:root{--bg:#f6f4ef;--surface:#fff;--ink:#1d1b18;--muted:#6d665c;--line:#d9d3c7;--g:#1f8a5b;--y:#d9a520;--x:#7b7f86;--key:#e3ded3;--accent:#1f6f5c;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#121214;--surface:#1c1c20;--ink:#f2efe9;--muted:#a8a298;--line:#3a3a40;--g:#2e9d69;--y:#c99a1c;--x:#4d5058;--key:#4a4a52;--accent:#3fae8d;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 Figtree,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
a{color:var(--accent)}
.wrap{max-width:720px;margin:0 auto;padding:0 12px}
.top{border-bottom:1px solid var(--line);background:var(--surface)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:54px}
.logo{display:flex;align-items:center;gap:8px;font:900 1.35rem Figtree,sans-serif;color:var(--ink);text-decoration:none}
.logo .tile{width:30px;height:30px;font-size:1rem;border:0}
.top nav{display:flex;gap:6px;align-items:center}
.top nav a,.top nav button{font:700 .95rem Figtree,sans-serif;color:var(--ink);background:none;border:1px solid var(--line);border-radius:10px;padding:6px 10px;text-decoration:none;cursor:pointer}
.game{display:flex;flex-direction:column;align-items:center;padding-top:10px}
.modes{display:flex;gap:6px;margin-bottom:10px}
.mode{font:700 .9rem Figtree,sans-serif;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:6px 14px;cursor:pointer}
.mode[aria-selected=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.board{display:grid;gap:6px;width:min(330px,82vw)}
.row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tile{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:2px solid var(--line);font:900 clamp(1.6rem,8vw,2.1rem)/1 Figtree,sans-serif;text-transform:uppercase;border-radius:6px;background:var(--surface);user-select:none}
.tile.full{border-color:var(--muted);animation:pop .1s}
.tile.g{background:var(--g);border-color:var(--g);color:#fff}
.tile.y{background:var(--y);border-color:var(--y);color:#fff}
.tile.x{background:var(--x);border-color:var(--x);color:#fff}
.tile.flip{animation:flip .45s ease}
.tile.win{animation:jump .5s ease}
.row.shake{animation:shake .45s}
@keyframes pop{50%{transform:scale(1.08)}}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@keyframes jump{40%{transform:translateY(-14px)}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.toast{min-height:1.8em;margin:8px 0;font-weight:800;opacity:0;transition:opacity .2s;background:var(--ink);color:var(--bg);padding:4px 14px;border-radius:8px}
.toast.on{opacity:1}
.kb{width:100%;max-width:500px;display:grid;gap:7px;margin-bottom:18px}
.krow{display:flex;gap:5px;justify-content:center}
.key{flex:1;min-width:0;height:54px;border:0;border-radius:7px;background:var(--key);color:var(--ink);font:800 clamp(.9rem,3.8vw,1.1rem) Figtree,sans-serif;text-transform:uppercase;cursor:pointer;padding:0}
.key.wide{flex:1.6;font-size:.75rem}
.key.g{background:var(--g);color:#fff}.key.y{background:var(--y);color:#fff}.key.x{background:var(--x);color:#fff}
.content{padding-top:16px;padding-bottom:30px}
.content h1{font-size:1.6rem;line-height:1.2}
.ejemplo{display:flex;gap:5px;margin:10px 0}
.ejemplo .tile,#dlg .ejemplo .tile{width:44px;height:44px;font-size:1.4rem}
.faq details{border-bottom:1px solid var(--line);padding:8px 0}
.faq summary{font-weight:700;cursor:pointer}
dialog{border:0;border-radius:18px;background:var(--surface);color:var(--ink);max-width:min(440px,94vw);width:100%;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog h2{margin:.1em 0 .4em}
.big{font:900 2rem Figtree,sans-serif;letter-spacing:.12em;margin:.2em 0;color:var(--g)}
.def{background:var(--bg);border-radius:12px;padding:10px 14px;margin:10px 0}
.def p{margin:.3em 0}
.tag{display:inline-block;background:var(--y);color:#fff;font-weight:800;font-size:.8rem;border-radius:999px;padding:2px 10px}
.ej{font-style:italic;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;font-size:.8rem;gap:4px}
.stats b{display:block;font-size:1.7rem}
.dist{margin:10px 0}
.dist div{display:flex;align-items:center;gap:6px;margin:3px 0;font-weight:700}
.dist i{font-style:normal;background:var(--x);color:#fff;text-align:right;padding:1px 6px;border-radius:4px;font-size:.85rem}
.dist i.me{background:var(--g)}
.btn{display:inline-block;font:800 1rem Figtree,sans-serif;background:var(--g);color:#fff;border:0;border-radius:12px;padding:11px 18px;cursor:pointer;margin-top:8px;text-decoration:none}
.btn.sec{background:var(--key);color:var(--ink)}
.hint{color:var(--muted);font-size:.9rem}
.glos{display:grid;gap:12px;margin:14px 0}
.gl{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.gl h2{margin:0;text-transform:capitalize}
.gl p{margin:.3em 0}
.foot{border-top:1px solid var(--line);padding:16px 0;color:var(--muted);font-size:.88rem}
.foot a{color:var(--muted)}