:root{--bg:#ffffff;--panel:#f6f8fb;--panel-2:#e9eef5;--ink:#0f1320;--muted:#6c7686;--line:#d9e2ef;--brand:#0aa770;--brand-2:#33c3ff;--good:#16b369;--bad:#e64b4b;--radius-lg:18px;--radius-sm:10px;--shadow-lg:0 32px 64px rgba(15,19,32,0.12);--shadow-sm:0 8px 24px rgba(15,19,32,0.07);--safe-top:env(safe-area-inset-top);--safe-bottom:env(safe-area-inset-bottom);--gap:10px;--card-size:72px}*{box-sizing:border-box;-webkit-tap-highlight-color:#fff0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Inter",Roboto,"Segoe UI",Helvetica,Arial,sans-serif}html,body{margin:0;background:var(--bg);color:var(--ink);height:100%;min-height:100%}body{display:flex;flex-direction:column;min-height:100dvh;overflow-x:hidden;overflow-y:auto}header.topbar{flex-shrink:0;padding:calc(12px + var(--safe-top)) 16px 12px;background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1.2;font-weight:600}.brand-link{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-sm);padding:6px 10px;background:var(--panel);box-shadow:var(--shadow-sm);font-size:14px;line-height:1.2;font-weight:600}.brand-emoji{font-size:16px;line-height:1}.brand-text{background-image:linear-gradient(90deg,var(--brand) 0%,var(--brand-2) 100%);-webkit-background-clip:text;color:#fff0;font-weight:600}.statbar{flex-shrink:0;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);padding:8px 12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;row-gap:6px;column-gap:8px;font-size:13px;line-height:1.2;color:var(--ink);font-weight:500}.stat-left,.stat-right{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.stat-block{display:flex;flex-direction:column;min-width:58px}.stat-label{color:var(--muted);font-weight:400;font-size:12px;line-height:1.2}.stat-value{font-size:14px;font-weight:600;color:var(--ink);line-height:1.2}.restart-btn{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);line-height:1.2;font-size:13px;font-weight:600;padding:8px 10px;color:var(--ink);min-width:64px;text-align:center;cursor:pointer;box-shadow:var(--shadow-sm);user-select:none}.restart-btn:active{transform:scale(.97)}main.game-area-wrapper{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:16px;padding-bottom:calc(16px + var(--safe-bottom))}.board-shell{background:var(--panel);box-shadow:var(--shadow-lg);border-radius:var(--radius-lg);border:1px solid var(--line);width:100%;max-width:480px;max-height:100%;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.board-head{width:100%;text-align:center;font-size:14px;line-height:1.2;font-weight:600;color:var(--ink);margin-bottom:12px;display:flex;justify-content:space-between;flex-wrap:wrap;row-gap:6px}.board-head .info{font-size:13px;line-height:1.3;color:var(--muted);font-weight:500}.grid-area{flex:1 1 auto;width:100%;min-height:0;display:grid;justify-content:center;align-content:flex-start;gap:var(--gap);grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}.card{position:relative;width:100%;aspect-ratio:1/1;border-radius:var(--radius-lg);cursor:pointer;perspective:800px;-webkit-perspective:800px}.card-inner{position:absolute;inset:0;border-radius:inherit;background:#fff0;transform-style:preserve-3d;transition:transform .28s cubic-bezier(.2,.8,.4,1)}.card.is-matched .card-inner{box-shadow:0 0 0 3px var(--good) inset,0 16px 32px rgb(22 179 105 / .22)}.card-face{position:absolute;inset:0;border-radius:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:600;line-height:1;user-select:none}.card-front{background:var(--bg);border:1px solid var(--line);box-shadow:var(--shadow-sm);color:var(--ink);transform:rotateY(0deg)}.card-back{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);color:#fff;border:0;box-shadow:0 16px 40px rgb(51 195 255 / .4);transform:rotateY(180deg);font-size:28px;font-weight:600}.card.is-flipped .card-inner{transform:rotateY(180deg)}.card.disabled{pointer-events:none;opacity:.55}.overlay{position:fixed;inset:0;padding:24px;padding-top:calc(24px + var(--safe-top));padding-bottom:calc(24px + var(--safe-bottom));background:rgb(15 19 32 / .6);display:flex;align-items:center;justify-content:center;z-index:999;opacity:0;pointer-events:none;transition:opacity .2s ease}.overlay.active{opacity:1;pointer-events:auto}.modal{background:var(--bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--line);width:100%;max-width:320px;padding:20px 20px 16px;text-align:center;color:var(--ink)}.modal-title{font-size:16px;line-height:1.3;font-weight:600;margin-bottom:8px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.modal-title .good{color:var(--good)}.modal-desc{font-size:13px;line-height:1.4;color:var(--muted);font-weight:500;margin-bottom:16px}.modal-stats-row{display:flex;justify-content:space-between;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);padding:10px 12px;margin-bottom:16px;font-size:13px;line-height:1.3}.modal-stats-col{display:flex;flex-direction:column;min-width:0}.modal-stats-label{color:var(--muted);font-size:11px;font-weight:500;line-height:1.2}.modal-stats-value{font-weight:600;color:var(--ink);font-size:14px;line-height:1.2;margin-top:2px}.modal-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.btn-primary{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);color:#fff;border:0;font-size:14px;font-weight:600;line-height:1.2;border-radius:var(--radius-sm);box-shadow:0 20px 32px rgb(51 195 255 / .4),var(--shadow-sm);padding:10px 14px;min-width:110px;cursor:pointer}.btn-primary:active{transform:scale(.97)}.btn-ghost{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);font-size:14px;line-height:1.2;font-weight:600;padding:10px 14px;min-width:110px;cursor:pointer}.btn-ghost:active{transform:scale(.97)}@media(min-width:480px){:root{--gap:12px;--card-size:80px}header.topbar{font-size:15px}.brand-link{font-size:14px}.statbar{font-size:13px}.stat-value{font-size:14px}.restart-btn{font-size:13px}.card-face{font-size:34px}.card-back{font-size:30px}.board-shell{padding:20px}}@media(min-width:768px){:root{--card-size:92px}.board-shell{max-width:520px}.statbar{justify-content:space-between}}