.practice-actions { display:flex; justify-content:center; margin-top:20px; }
:root { color-scheme:light; --ink:#202a2b; --muted:#727b79; --line:#d9dfcf; --paper:#f2f5e9; --white:#fffefa; --green:#a8ce61; --green-dark:#667f38; --red:#b65e51; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font:15px/1.55 "Segoe UI",Arial,sans-serif; }
.game-shell { width:min(900px,calc(100% - 32px)); margin:auto; }.topbar { height:75px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.back,.brand { color:var(--ink); text-decoration:none; font-size:12px; font-weight:700; }.back { color:var(--muted); }.brand { display:flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.1em; }.brand b { display:grid; width:25px; height:25px; place-items:center; border-radius:8px 8px 8px 2px; background:var(--ink); color:#d8edaa; font:italic 16px Georgia,serif; }.lesson-badge { padding:6px 10px; border:1px solid var(--line); border-radius:99px; color:var(--green-dark); font:10px Consolas,monospace; }
.heading { padding:35px 0 19px; }.eyebrow { margin:0 0 7px; color:#8a927d; font:10px Consolas,monospace; letter-spacing:.15em; }.heading h1 { margin:0; font-size:clamp(37px,6vw,57px); line-height:1; letter-spacing:-.07em; }.heading h1 span { color:#7fa444; }.heading>p:last-child { margin:10px 0 0; color:var(--muted); font-size:13px; }
.panel { width:min(610px,100%); margin:35px auto; padding:33px; border:1px solid var(--line); border-radius:18px; background:var(--white); text-align:center; box-shadow:0 12px 25px #26300b0a; }.loading { color:var(--muted); }.intro .icon,.result .icon { display:grid; width:54px; height:54px; place-items:center; margin:0 auto 17px; border-radius:17px; background:#e8f1d5; color:#647c38; font-size:26px; }.intro h2,.result h2 { margin:0 0 8px; font-size:25px; letter-spacing:-.05em; }.intro>p:not(.eyebrow),.result>p:not(.eyebrow) { margin:0 auto 19px; max-width:460px; color:var(--muted); font-size:12px; }.button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:20px; padding:0 18px; border:0; border-radius:10px; background:var(--ink); color:white; font:700 12px "Segoe UI",Arial,sans-serif; text-decoration:none; cursor:pointer; }.button:hover { transform:translateY(-2px); }.button:focus-visible,.tile:focus-visible { outline:3px solid #7fa444; outline-offset:3px; }.button.secondary { border:1px solid var(--line); background:transparent; color:var(--ink); }
.stats { display:flex; gap:9px; align-items:stretch; padding:11px; border:1px solid var(--line); border-radius:13px; background:var(--white); }.stats>div { display:flex; min-width:70px; flex-direction:column; justify-content:center; padding:0 8px; }.stats small { color:#868c82; font:9px Consolas,monospace; letter-spacing:.08em; }.stats b { font-size:20px; }.stats .progress { flex:1; }.progress small { display:flex; justify-content:space-between; }.progress i { height:7px; overflow:hidden; margin-top:7px; border-radius:99px; background:#e9eadd; }.progress i span { display:block; width:0; height:100%; border-radius:inherit; background:var(--green); transition:width .2s; }.message { min-height:25px; margin:14px 0; color:var(--muted); text-align:center; font-size:11px; }.columns { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.columns h2 { display:flex; justify-content:space-between; margin:0 2px 8px; color:#657345; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }.columns h2 small { color:#a3a996; font:9px Consolas,monospace; }.tiles { display:grid; gap:8px; }.tile { min-height:54px; padding:9px; border:1px solid #dfe1d6; border-radius:10px; background:var(--white); color:var(--ink); box-shadow:0 3px 0 #e7e7dd; font:700 14px "Segoe UI",Arial,sans-serif; cursor:pointer; }.tile:hover:not(:disabled) { transform:translateY(-2px); }.tile.selected { border-color:#9fc25d; background:#f0f6e4; }.tile.matched { border-color:#c5db9b; background:#eef5df; color:#82946b; opacity:.5; }.tile.wrong { border-color:#dc9c91; background:#fff0ed; }.tile:disabled { cursor:default; }
.result { margin-top:45px; }.result .icon { background:#faedcc; color:#9e7939; }.actions { display:flex; justify-content:center; gap:9px; flex-wrap:wrap; margin-top:17px; }.error { border-color:#e3aaa3; background:#fff1ef; color:#883d37; }[hidden] { display:none!important; }footer { margin:45px 0 20px; padding-top:14px; border-top:1px solid var(--line); color:#8b9087; font:9px Consolas,monospace; text-align:center; }
@media(max-width:480px) { .game-shell { width:calc(100% - 22px); }.topbar { height:65px; }.heading { padding-top:27px; }.panel { padding:25px 16px; }.stats { gap:2px; padding:8px 4px; }.stats>div { min-width:52px; padding:0 4px; }.stats small,.progress small { font-size:8px; }.stats b { font-size:18px; }.tile { min-height:48px; font-size:12px; } }