:root{--ink:#17231d;--paper:#f5f0e8;--panel:#fffdf7;--line:#cdc7bc;--green:#2f6d4f;--lime:#d8ef72;--yellow:#e1a629;--gray:#777b77;--shadow:0 18px 50px rgba(28,42,34,.12)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;min-height:100vh}.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100vw - 1050px)/2));background:rgba(245,240,232,.94)}.brand{display:flex;gap:11px;align-items:center;color:inherit;text-decoration:none;font-weight:900;letter-spacing:.16em}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--lime);font-family:Georgia,serif;font-style:italic;font-size:23px}.topbar nav{display:flex;align-items:center;gap:8px}.icon-btn,.account-btn,.admin-link{border:1px solid var(--line);background:transparent;color:inherit;min-height:38px;border-radius:99px;padding:0 14px;font-weight:700;text-decoration:none;display:grid;place-items:center}.icon-btn{width:38px;padding:0;font-size:18px}.flash{max-width:680px;margin:14px auto 0;padding:12px 18px;background:var(--lime);border-radius:8px;text-align:center}main{max-width:1050px;margin:auto;padding:34px 20px}.hero{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.2em;color:var(--green)}h1{font:700 clamp(38px,6vw,70px)/.92 Georgia,serif;margin:12px 0 0;letter-spacing:-.045em}h1 em{color:var(--green);font-weight:400}.mode-switch{display:flex;background:#e8e2d9;border-radius:99px;padding:4px}.mode-switch button{border:0;background:transparent;padding:10px 18px;border-radius:99px;font-weight:800;color:#667068}.mode-switch .active{background:var(--ink);color:white}.game-shell{max-width:610px;margin:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 22px 22px;box-shadow:var(--shadow)}.game-meta{font-size:10px;letter-spacing:.16em;font-weight:900;display:flex;justify-content:space-between;color:#68736c;margin-bottom:15px}.board{display:grid;gap:6px;justify-content:center;min-height:330px}.row{display:flex;gap:6px;justify-content:center}.tile{width:clamp(38px,9vw,52px);aspect-ratio:1;border:2px solid #d2cec5;display:grid;place-items:center;font-weight:900;font-size:clamp(20px,5vw,28px);text-transform:uppercase;border-radius:5px;background:#fff}.tile.filled{border-color:#758078}.tile.correct{border-color:var(--green);background:var(--green);color:#fff}.tile.present{border-color:var(--yellow);background:var(--yellow);color:#fff}.tile.absent{border-color:var(--gray);background:var(--gray);color:#fff}.message{height:20px;text-align:center;font-size:13px;font-weight:800;margin:10px}.keyboard{display:grid;gap:6px}.keyrow{display:flex;justify-content:center;gap:5px}.key{height:46px;min-width:29px;flex:1;max-width:43px;padding:0;border:0;border-radius:5px;background:#dedbd3;color:var(--ink);font-weight:900}.key.wide{max-width:68px;font-size:11px}.key.correct{background:var(--green);color:#fff}.key.present{background:var(--yellow);color:#fff}.key.absent{background:var(--gray);color:#fff}.result-actions{display:flex;gap:10px;justify-content:center;margin-top:16px}.primary,.secondary{border:1px solid var(--ink);border-radius:6px;padding:12px 17px;font-weight:900}.primary{background:var(--ink);color:white}.secondary{background:transparent;color:var(--ink)}.tagline{text-align:center;font:italic 16px Georgia,serif;color:#6e756f;margin:26px}dialog{max-width:480px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:16px;padding:30px;background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}dialog::backdrop{background:rgba(10,20,14,.55)}dialog h2{font:700 29px/1.1 Georgia,serif}.close{float:right;border:0;background:transparent;font-size:30px}.example{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:10px;margin:20px 0}.example .tile{width:42px}.login-form{display:grid;gap:14px;margin:20px 0}.login-form label{font-size:12px;font-weight:800}.login-form input{display:block;width:100%;padding:13px;margin-top:7px;border:1px solid var(--line);border-radius:6px;font-size:16px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}.stat-grid strong{font:700 28px Georgia,serif;display:block}.stat-grid span{font-size:10px}.dist{display:grid;gap:5px;margin-top:18px}.bar{display:flex;gap:8px;align-items:center}.bar i{font-style:normal;background:var(--green);color:white;min-width:24px;padding:4px;text-align:right;font-size:11px;font-weight:bold}
button,a{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}@media(max-width:650px){.topbar{height:60px;padding:0 12px}.brand{font-size:14px}.account-btn{max-width:80px;overflow:hidden}.admin-link{display:none}main{padding:22px 10px}.hero{align-items:start;flex-direction:column}.hero h1{font-size:44px}.game-shell{padding:15px 7px}.board{min-height:300px}.tile{width:min(11vw,47px)}.key{height:48px;min-width:0}.keyrow{gap:3px}.keyboard{gap:5px}}
@media(prefers-reduced-motion:no-preference){.tile.reveal{animation:flip .5s ease}.message.bump{animation:bump .25s ease}@keyframes flip{50%{transform:rotateX(90deg)}}@keyframes bump{50%{transform:scale(1.05)}}}
.board .tile{width:min(52px,calc((100vw - 76px)/var(--cols,5)))}
[hidden]{display:none!important}
.device-input{position:absolute;width:1px;height:1px;opacity:.01;left:-2px;font-size:16px;border:0;padding:0}.board{cursor:text}.board:focus-visible{outline:3px solid var(--yellow);outline-offset:5px}
.brand-by{font-size:.72em;font-weight:700;letter-spacing:.06em;color:var(--green)}