:root{--paper:#f4efe4;--ink:#1d1c1a;--muted:#777168;--line:#cfc6b8;--card:#fffdf7;--accent:#e9aa38;--accent2:#f7dfad;--good:#39785d;--bad:#a44f45;--shadow:0 18px 50px rgba(45,38,28,.09)}
*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 0,#fff8e9 0,transparent 32rem),var(--paper)}button,input{font:inherit}.topbar{max-width:1040px;margin:auto;padding:22px 20px 12px;display:flex;align-items:center;justify-content:space-between;gap:16px}.back{color:var(--ink);text-decoration:none;font-weight:800}.brand{font-size:.75rem;letter-spacing:.15em;font-weight:900;color:var(--muted);text-transform:uppercase}main{max-width:1040px;margin:auto;padding:12px 20px 48px}.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:26px 0 18px;border-bottom:2px solid var(--ink)}.kicker{display:block;font-size:.68rem;letter-spacing:.16em;font-weight:900;color:var(--muted);text-transform:uppercase}.hero h1{font-size:clamp(2.7rem,8vw,5.7rem);line-height:.9;letter-spacing:-.055em;margin:.3rem 0 .65rem}.hero p{max-width:650px;margin:0;color:var(--muted);font-size:1rem}.hero-stat{text-align:right}.hero-stat strong{display:block;font-size:2.2rem}.hero-stat span{font-size:.7rem;letter-spacing:.12em;font-weight:900;color:var(--muted);text-transform:uppercase}.game-layout{display:grid;grid-template-columns:minmax(300px,430px) minmax(0,1fr);gap:32px;padding-top:28px}.play-panel{display:flex;flex-direction:column;align-items:center;gap:14px}.drag-word{min-height:46px;display:grid;place-items:center;width:min(92vw,390px);padding:5px 14px;border-bottom:2px solid var(--ink);font-size:1.55rem;font-weight:950;letter-spacing:.12em;color:var(--muted);text-align:center;overflow-wrap:anywhere;transition:color .12s ease,transform .12s ease}.drag-word.active{color:var(--ink);transform:translateY(-1px)}.letter-wheel{position:relative;width:min(86vw,340px);aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:contain}.drag-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}.drag-polyline{fill:none;stroke:var(--accent);stroke-width:11;stroke-linecap:round;stroke-linejoin:round;opacity:.56}.letter{position:absolute;z-index:2;width:82px;height:82px;border:1px solid var(--line);border-radius:22px;background:var(--card);font-size:2rem;font-weight:900;box-shadow:0 5px 0 rgba(60,50,37,.08);display:grid;place-items:center;transition:transform .1s ease,border-color .1s ease,background .1s ease,box-shadow .1s ease;touch-action:none}.letter.center{left:50%;top:50%;transform:translate(-50%,-50%);background:var(--accent);border-color:#c7891f;color:#17120a}.letter[data-pos="0"]{left:50%;top:0;transform:translateX(-50%)}.letter[data-pos="1"]{right:6%;top:24%}.letter[data-pos="2"]{right:6%;bottom:16%}.letter[data-pos="3"]{left:50%;bottom:0;transform:translateX(-50%)}.letter[data-pos="4"]{left:6%;bottom:16%}.letter[data-pos="5"]{left:6%;top:24%}.letter.drag-hit,.letter.tap-hit{background:#fff0bf;border-color:#c7891f;box-shadow:0 0 0 4px rgba(233,170,56,.22),0 5px 0 rgba(60,50,37,.08)}.letter.center.drag-hit,.letter.center.tap-hit{background:#f4bd54}.letter:active{transform:scale(.96)}.letter.center:active{transform:translate(-50%,-50%) scale(.96)}.tap-actions{display:flex;gap:9px;justify-content:center}.drag-hint{font-size:.78rem;font-weight:800;color:var(--muted);text-align:center;line-height:1.35}.primary,.secondary{min-height:48px;border-radius:13px;padding:0 18px;font-weight:900;border:1px solid var(--ink);cursor:pointer}.primary{background:var(--ink);color:#fff}.secondary{background:transparent;color:var(--ink)}.primary.compact,.secondary.compact{min-height:42px;padding:0 20px}.primary:disabled,.secondary:disabled{opacity:.35;cursor:default}.tools{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}.message{min-height:28px;text-align:center;font-weight:800}.message.good{color:var(--good)}.message.bad{color:var(--bad)}.side-panel{min-width:0}.score-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}.score-box{padding:12px 14px}.score-box+ .score-box{border-left:1px solid var(--line)}.score-box span{display:block;font-size:.62rem;letter-spacing:.12em;font-weight:900;color:var(--muted);text-transform:uppercase}.score-box strong{font-size:1.65rem}.found-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:14px 0 9px}.found-head h2{margin:0;font-size:1.35rem}.found-head span{color:var(--muted);font-size:.8rem}.found-list{display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start;min-height:90px}.found-word{padding:7px 9px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.42);font-size:.78rem;font-weight:800}.found-word.pangram{background:var(--accent2);border-color:#cf9a39}.empty{color:var(--muted);font-size:.9rem}.progress{height:7px;background:#ddd5c8;border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s ease}.reveal{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}.answer-list{display:none;margin-top:12px;columns:2;column-gap:22px;font-size:.82rem}.answer-list.open{display:block}.answer-list span{display:block;break-inside:avoid;padding:3px 0}.center-track{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:17px}.center-chip{min-width:42px;height:42px;border:1px solid var(--line);background:var(--card);border-radius:12px;font-weight:900}.center-chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}.center-chip.done{background:var(--accent2);border-color:#cfa049}.stage-note{margin:-2px 0 14px;color:var(--muted);font-size:.88rem}.mastery{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:10px 0 18px}.mastery span{height:5px;background:#d9d1c5;border-radius:99px}.mastery span.done{background:var(--accent)}
@media(max-width:780px){.hero{grid-template-columns:1fr}.hero-stat{text-align:left;display:flex;align-items:baseline;gap:9px}.game-layout{grid-template-columns:1fr;gap:20px}.play-panel{order:1}.side-panel{order:2}.letter-wheel{width:min(92vw,320px)}.letter{width:74px;height:74px;border-radius:20px}.answer-list{columns:1}}
@media(max-width:420px){.topbar,main{padding-left:14px;padding-right:14px}.hero h1{font-size:3.15rem}.letter-wheel{width:290px}.letter{width:68px;height:68px;font-size:1.7rem}.score-box{padding:10px}.score-box strong{font-size:1.35rem}.drag-word{font-size:1.3rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}