@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap');
:root{color-scheme:light;--ink:#152521;--muted:#71817b;--paper:#f5f6f1;--surface:#fffefa;--line:#e1e7df;--green:#2c8c62;--deep:#14553f;--lime:#d8f278;--shadow:0 18px 48px rgba(23,54,43,.09)}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{min-width:320px;background:radial-gradient(circle at 80% 20%,#eaf6ee,transparent 35%),var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,select{font:inherit}a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid #159353;outline-offset:3px}.game-shell{width:min(calc(100% - 32px),760px);margin:auto}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:34px;height:34px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;padding:7px;border-radius:10px;background:var(--deep);transform:rotate(-4deg)}.brand-mark i{border-radius:3px;background:var(--lime)}.brand-mark i:last-child{background:white}.brand-name,.footer>a{font:800 17px Manrope,sans-serif;letter-spacing:-.06em}.brand-name span,.footer>a span{color:var(--green)}.back-link{color:var(--muted);font-size:12px;font-weight:700}.game{width:min(100%,520px);margin:30px auto 44px}.heading{display:flex;justify-content:space-between;align-items:end;gap:12px}.eyebrow{margin:0 0 7px;color:var(--green);font-size:9px;font-weight:800;letter-spacing:.13em}.heading h1{margin:0;font:800 clamp(36px,9vw,52px)/1 Manrope,sans-serif;letter-spacing:-.075em}.heading h1 span{color:#efa93e}.intro{margin:8px 0 0;color:var(--muted);font-size:12px}.level-picker{display:grid;gap:5px;color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.08em}.level-picker select{max-width:170px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-size:11px;letter-spacing:0}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 9px}.stats>div{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}.stats span{color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.08em}.stats strong{font:800 16px Manrope,sans-serif;font-variant-numeric:tabular-nums}.status{min-height:20px;margin:8px 0;color:var(--muted);font-size:11px;text-align:center}.board{--columns:4;display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:9px;padding:12px;border:1px solid #e3e9df;border-radius:16px;background:#eaf0e6;box-shadow:var(--shadow)}.card{aspect-ratio:1;min-width:0;display:grid;place-items:center;border:1px solid #c9d7ca;border-radius:11px;background:linear-gradient(145deg,#1c7251,#14553f);color:white;font-size:clamp(20px,6vw,34px);cursor:pointer;box-shadow:0 3px 7px rgba(23,54,43,.12);transition:transform .16s,background .16s}.card:hover:not(.matched){transform:translateY(-2px)}.card.revealed{background:var(--surface);color:var(--ink);font-size:clamp(23px,7vw,38px)}.card.matched{border-color:#a8cd76;background:#e4f4c8;box-shadow:inset 0 0 0 2px #a8cd76;cursor:default}.actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px}.button{min-height:40px;padding:0 15px;border:1px solid var(--line);border-radius:9px;font-size:11px;font-weight:700;cursor:pointer}.primary{border-color:var(--deep);background:var(--deep);color:white}.best{color:var(--muted);font-size:10px;font-weight:700;text-align:right}.help,.save-state{color:var(--muted);font-size:10px;text-align:center}.help{margin:17px 0 4px}.save-state{margin:8px 0}.footer{display:flex;justify-content:space-between;padding:16px 0 22px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}.footer>a{color:var(--ink);font-size:13px}
@media(max-width:440px){.game-shell{width:calc(100% - 24px)}.game{margin:24px auto 34px}.heading{align-items:center}.heading h1{font-size:37px}.intro{max-width:180px;font-size:11px}.level-picker select{max-width:145px}.stats{gap:5px}.stats>div{padding:8px 7px}.stats span{font-size:7px}.stats strong{font-size:14px}.board{gap:6px;padding:8px;border-radius:13px}.card{border-radius:8px}.actions{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
