:root{
  --bg:#0f1220;
  --panel:#171b2e;
  --panel-2:#202640;
  --panel-3:#2a3150;
  --text:#f8f6ef;
  --muted:#a8aec5;
  --lime:#c9ff4f;
  --purple:#8e6cff;
  --cyan:#65e5dc;
  --red:#ff6b74;
  --gold:#ffd66b;
  --line:rgba(255,255,255,.09);
  --shadow:0 24px 70px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:
radial-gradient(circle at 15% 15%,rgba(142,108,255,.17),transparent 30%),
radial-gradient(circle at 85% 85%,rgba(201,255,79,.1),transparent 26%),var(--bg);color:var(--text);overscroll-behavior:none}
button{font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid rgba(201,255,79,.75);outline-offset:3px}
.game-shell{min-height:100vh;padding:18px}
.game-header{max-width:980px;margin:0 auto 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:950;letter-spacing:1.8px}
.brand-mark{width:36px;height:36px;border-radius:12px;background:var(--lime);color:#12151d;display:grid;place-items:center;transform:rotate(-7deg)}
.header-actions{display:flex;gap:8px}
.icon-btn{width:42px;height:42px;border-radius:13px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}
.game-panel{max-width:980px;margin:0 auto;background:rgba(23,27,46,.94);border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.top-row{display:grid;grid-template-columns:120px 1fr 120px;gap:24px;align-items:center}
.title-wrap{text-align:center}
.eyebrow{font-size:11px;letter-spacing:2px;font-weight:900;color:var(--lime)}
h1{font-size:clamp(34px,5vw,58px);letter-spacing:-2.5px;margin:8px 0 6px}
.title-wrap p{margin:0;color:var(--muted)}
.stat{background:var(--panel-2);border:1px solid var(--line);border-radius:20px;padding:18px;text-align:center}
.stat span,.status-strip span,.result-grid span{display:block;color:var(--muted);font-size:10px;letter-spacing:1.4px;font-weight:850;text-transform:uppercase}
.stat strong{font-size:30px;display:block;margin-top:4px}
.status-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.status-strip>div{border:1px solid var(--line);border-radius:15px;padding:10px 12px;text-align:center;background:rgba(32,38,64,.6)}
.status-strip strong{display:block;margin-top:3px;font-size:16px}
.progress-wrap{height:9px;background:var(--panel-2);border-radius:99px;overflow:hidden;margin:18px 0 16px}
.progress-bar{height:100%;width:100%;background:linear-gradient(90deg,var(--lime),var(--purple));transition:width .12s linear}
.progress-bar.warning{background:linear-gradient(90deg,var(--red),var(--gold))}
.message{text-align:center;color:var(--muted);min-height:24px;font-weight:750}
.hint-line{text-align:center;color:var(--gold);font-size:13px;min-height:20px;font-weight:800}
.word-preview{min-height:68px;margin:6px auto 18px;display:flex;align-items:center;justify-content:center;font-size:clamp(30px,6vw,52px);font-weight:950;letter-spacing:8px;color:var(--lime);text-transform:uppercase;overflow-wrap:anywhere}
.letter-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;max-width:860px;margin:0 auto;touch-action:none;user-select:none}
.letter-btn{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#2a3150,#1d2239);color:var(--text);font-size:clamp(23px,3.7vw,37px);font-weight:950;cursor:pointer;box-shadow:inset 0 -8px 14px rgba(0,0,0,.18),0 10px 20px rgba(0,0,0,.14);transition:transform .12s,background .12s,color .12s}
.letter-btn:hover{transform:translateY(-2px)}
.letter-btn.selected{background:var(--lime);color:#12151d;transform:translateY(-4px) scale(1.025)}
.letter-btn.selected::after{content:attr(data-order);position:absolute;right:7px;top:5px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#12151d;color:var(--lime);font-size:10px;font-weight:950}
.letter-btn.pulse{animation:letterPulse .38s ease}
@keyframes letterPulse{50%{transform:scale(1.1);box-shadow:0 0 0 8px rgba(201,255,79,.13)}}
.tool-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:680px;margin:20px auto 0}
.tool-btn{border:1px solid var(--line);border-radius:14px;padding:11px;background:var(--panel-2);color:var(--text);font-weight:850;cursor:pointer}
.tool-btn span{margin-right:4px}.tool-btn b{color:var(--lime);margin-left:3px}
.tool-btn:disabled{opacity:.4;cursor:not-allowed}
.actions{display:flex;justify-content:center;gap:12px;margin:14px 0 22px}
.primary-btn,.secondary-btn{border:0;border-radius:15px;padding:14px 22px;font-weight:900;cursor:pointer;min-height:50px}
.primary-btn{background:var(--lime);color:#10131a;box-shadow:0 8px 24px rgba(201,255,79,.12)}
.primary-btn:active{transform:translateY(1px)}
.secondary-btn{background:var(--panel-2);color:var(--text);border:1px solid var(--line)}
.full{width:100%;margin-top:10px}
.found-box{margin-top:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:22px;padding:20px}
.found-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}
.found-heading h2{font-size:18px;margin:0}
.found-heading span{color:var(--muted);font-weight:800}
.found-words{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px;min-height:36px}
.word-chip{background:rgba(201,255,79,.12);border:1px solid rgba(201,255,79,.25);color:var(--lime);padding:8px 11px;border-radius:999px;font-size:13px;font-weight:850;text-transform:uppercase;animation:chipIn .2s ease}
@keyframes chipIn{from{transform:scale(.7);opacity:0}}
.keyboard-help{text-align:center;color:var(--muted);font-size:11px;margin:15px 0 0}
.modal{position:fixed;inset:0;display:none;place-items:center;padding:20px;background:rgba(7,9,16,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:50;overflow:auto}
.modal.open{display:grid}
.modal-card{width:min(520px,100%);background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:30px;text-align:center;box-shadow:var(--shadow)}
.start-card{width:min(720px,100%)}
.compact-card{width:min(420px,100%)}
.modal-icon{font-size:46px;margin-bottom:8px}
.modal-card h2{font-size:clamp(32px,7vw,42px);letter-spacing:-1.5px;margin:8px 0}
.modal-card p{color:var(--muted);line-height:1.55}
.modal-card ul{text-align:left;color:var(--muted);line-height:1.65;padding-left:22px;margin:16px auto;max-width:560px}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 14px}
.mode-card{border:1px solid var(--line);border-radius:18px;background:var(--panel-2);color:var(--text);padding:16px 10px;cursor:pointer;text-align:left}
.mode-card strong,.mode-card span,.mode-card small{display:block}
.mode-card strong{font-size:16px}.mode-card span{color:var(--lime);font-weight:850;margin:5px 0}.mode-card small{color:var(--muted)}
.mode-card.selected{border-color:var(--lime);box-shadow:0 0 0 2px rgba(201,255,79,.14);background:linear-gradient(145deg,rgba(201,255,79,.1),var(--panel-2));transform:translateY(-2px)}
.best-strip{display:flex;justify-content:space-between;align-items:center;border-radius:14px;background:rgba(142,108,255,.12);border:1px solid rgba(142,108,255,.26);padding:11px 14px;color:var(--muted)}
.best-strip strong{color:var(--text);font-size:20px}
.final-score{font-size:72px;font-weight:950;color:var(--lime);line-height:1;margin:13px 0}
.new-best{display:inline-block;color:#111;background:var(--gold);border-radius:99px;padding:7px 13px;font-weight:950;font-size:12px;letter-spacing:1px;margin-bottom:14px}
.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0}
.result-grid>div{background:var(--panel-2);border:1px solid var(--line);padding:12px;border-radius:15px}
.result-grid strong{display:block;margin-top:4px;font-size:18px}
.success{color:var(--lime)!important}.error{color:var(--red)!important}.bonus{color:var(--gold)!important}
.back-link{color:var(--muted);text-decoration:none;font-size:13px;font-weight:800;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.back-link:hover{color:var(--text)}
@media(max-width:760px){
  .game-shell{padding:10px 10px calc(18px + env(safe-area-inset-bottom))}
  .game-header{margin-bottom:10px}
  .game-panel{padding:18px 14px;border-radius:22px}
  .top-row{grid-template-columns:1fr 1fr;gap:10px}
  .title-wrap{grid-column:1/-1;grid-row:1}
  .stat{padding:11px}.stat strong{font-size:24px}
  .status-strip{grid-template-columns:repeat(2,1fr);margin-top:14px}
  .letter-grid{grid-template-columns:repeat(4,1fr);gap:10px;max-width:430px}
  .letter-btn{border-radius:16px;font-size:clamp(25px,9vw,36px)}
  .word-preview{letter-spacing:5px;min-height:58px}
  .tool-row{gap:7px}.tool-btn{font-size:12px;padding:10px 5px}
  .actions{flex-direction:column;gap:8px}.primary-btn,.secondary-btn{width:100%}
  .mode-grid{grid-template-columns:1fr}.mode-card{text-align:center;padding:12px}
  .modal-card{padding:24px 18px}
  .keyboard-help{display:none}
}
@media(max-width:600px){.game-header{flex-wrap:wrap}.back-link{order:3;width:100%;text-align:center}.brand{margin-left:auto}.header-actions{margin-left:auto}}
@media(max-width:390px){.letter-grid{gap:7px}.game-panel{padding-left:10px;padding-right:10px}.letter-btn.selected::after{right:4px;top:4px;width:17px;height:17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}