* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--slate-50); color: var(--slate-700); }
button,input { font: inherit; }
.glyph-page { width: min(calc(100% - 40px), 920px); margin: 0 auto; padding: 34px 0 72px; }
.game-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
.game-heading h1 { margin: 5px 0 7px; color: var(--slate-900); font-size: clamp(38px,6vw,54px); line-height: 1; letter-spacing: -.055em; }
.game-heading p { margin: 0; color: var(--slate-600); }
.heading-actions { display: flex; gap: 8px; }
.icon-button { display:grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid var(--slate-200); border-radius:var(--radius-md); background:white; color:var(--slate-600); box-shadow:var(--shadow-xs); font-weight:700; cursor:pointer; }
.icon-button svg { width:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.glyph-card { overflow:hidden; border:1px solid var(--slate-200); border-radius:var(--radius-lg); background:white; box-shadow:var(--shadow-sm); }
.run-strip { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--slate-200); background:var(--slate-50); }
.run-strip>div { display:flex; justify-content:space-between; gap:12px; padding:13px 18px; border-right:1px solid var(--slate-200); }
.run-strip>div:last-child { border-right:0; }.run-strip span{color:var(--slate-500);font-size:12px;font-weight:600}.run-strip strong{color:var(--slate-800)}
.puzzle-stage { padding:30px; }.puzzle-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px}.puzzle-heading h2{margin:6px 0 0;color:var(--slate-900);font-size:clamp(24px,4vw,32px)}
.category-label{color:var(--cobalt-700);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.letter-count{padding:6px 9px;border:1px solid var(--slate-200);border-radius:var(--radius-sm);background:var(--slate-50);color:var(--slate-600);font-size:12px;font-weight:600}
.skyline-frame{position:relative;padding:20px 20px 34px;border:1px solid var(--slate-200);border-radius:var(--radius-md);background:linear-gradient(180deg,#f9faff,#f3f5fa)}
.skyline{height:230px;display:flex;justify-content:center;align-items:stretch;gap:8px;overflow:hidden}.glyph-cell{position:relative;flex:0 0 var(--glyph-width,54px);height:100%}.glyph-stroke{position:absolute;left:10%;right:10%;top:36%;bottom:29%;border:2px solid #27314c;border-radius:3px;background:#354263;box-shadow:inset 0 1px rgba(255,255,255,.18)}
.glyph-cell.ascender .glyph-stroke{top:8%}.glyph-cell.descender .glyph-stroke{bottom:5%}.glyph-cell.both .glyph-stroke{top:8%;bottom:5%}.glyph-cell.rounded .glyph-stroke{border-radius:999px}.glyph-cell.narrow{--glyph-width:34px}.glyph-cell.wide{--glyph-width:78px}
.glyph-cell.is-vowel::after{content:"";position:absolute;left:50%;bottom:12px;width:7px;height:7px;translate:-50%;border-radius:50%;background:var(--cobalt-500)}.glyph-cell .revealed-letter{position:absolute;z-index:2;inset:0;display:grid;place-items:center;color:white;font:700 24px/1 var(--font-mono);text-transform:lowercase}
.baseline{position:absolute;left:20px;right:20px;top:71%;height:1px;background:#aeb7ca}.baseline span{position:absolute;top:7px;color:var(--slate-400);font-size:9px;letter-spacing:.08em;text-transform:uppercase}.baseline span:first-child{left:0}.baseline span:last-child{right:0}
.hint-panel{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:16px;padding:14px 16px;border:1px solid var(--slate-200);border-radius:var(--radius-md);background:var(--slate-50)}.hint-panel>div span,.hint-panel>div strong{display:block}.hint-label{color:var(--slate-400);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.hint-panel strong{margin-top:3px;color:var(--slate-700);font-size:13px}.hint-button{padding:8px 11px;border:1px solid var(--slate-300);border-radius:var(--radius-sm);background:white;color:var(--slate-700);font-size:12px;font-weight:700;cursor:pointer}.hint-button span{color:var(--danger)}.hint-button:disabled{opacity:.55;cursor:default}
.guess-form{margin-top:20px}.guess-form label{display:block;margin-bottom:7px;color:var(--slate-700);font-size:13px;font-weight:700}.guess-form>div{display:grid;grid-template-columns:1fr auto;gap:10px}.guess-form input{min-width:0;height:48px;padding:10px 14px;border:1px solid var(--slate-300);border-radius:var(--radius-md);background:white;color:var(--slate-900);font:600 18px/1 var(--font-mono);text-transform:lowercase}.guess-form input:focus{border-color:var(--cobalt-500);outline:3px solid var(--cobalt-100)}
.primary-button{min-height:46px;padding:10px 18px;border:1px solid var(--cobalt-600);border-radius:var(--radius-md);background:var(--cobalt-600);color:white;font-weight:700;cursor:pointer}.primary-button:hover{background:var(--cobalt-700)}
.guess-history{display:grid;gap:7px;margin-top:14px}.guess-row{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:12px;padding:9px 11px;border:1px solid var(--slate-200);border-radius:var(--radius-sm);background:var(--slate-50)}.guess-row code{color:var(--slate-800);font:700 14px/1 var(--font-mono)}.profile-track{display:flex;gap:3px}.profile-track i{width:18px;height:5px;border-radius:99px;background:var(--slate-200)}.profile-track i.match{background:var(--cobalt-500)}.guess-row span{color:var(--slate-500);font-size:11px}
.reveal-stage[hidden]{display:none}.reveal-stage{min-height:510px;display:grid;place-items:center;align-content:center;padding:40px;text-align:center;background:radial-gradient(circle,var(--cobalt-50),transparent 55%)}.reveal-stage h2{margin:10px 0 6px;color:var(--slate-900);font:700 clamp(42px,9vw,76px)/1 var(--font-mono);letter-spacing:.04em;text-transform:lowercase}.reveal-stage p{max-width:520px;margin:0;color:var(--slate-600)}.reveal-score{margin:25px 0 18px}.reveal-score strong,.reveal-score span{display:block}.reveal-score strong{color:var(--cobalt-700);font-size:28px}.reveal-score span{color:var(--slate-500);font-size:11px}
.status-line{margin:0;padding:13px 22px;border-top:1px solid var(--slate-200);background:var(--slate-50);color:var(--slate-500);font-size:13px;text-align:center}
.complete-state{min-height:510px;display:grid;place-items:center;align-content:center;padding:35px;text-align:center;background:radial-gradient(circle,var(--cobalt-50),transparent 55%)}.complete-state h2{margin:8px 0;color:var(--slate-900);font-size:34px}.complete-state p{margin:0 0 20px;color:var(--slate-600)}
.ad-card{height:92px;display:grid;place-items:center;margin:20px 0;border:1px dashed var(--slate-300);border-radius:var(--radius-md);color:var(--slate-400);font-size:10px;letter-spacing:.16em;text-transform:uppercase}.about-card{display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;padding:28px;border:1px solid var(--slate-100);border-radius:var(--radius-lg);background:white;box-shadow:var(--shadow-sm)}.about-card h2{margin:5px 0 0;color:var(--slate-800);font-size:23px}.about-card p{margin:0;color:var(--slate-600);line-height:1.65}
.dialog{width:min(calc(100% - 32px),490px);padding:28px;border:1px solid var(--slate-200);border-radius:var(--radius-lg);background:white;color:var(--slate-600);box-shadow:var(--shadow-lg)}.dialog::backdrop{background:rgba(20,25,40,.48)}.dialog h2{margin:6px 0 18px;color:var(--slate-800)}.dialog-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border:0;background:transparent;color:var(--slate-500);font-size:24px;cursor:pointer}.steps{margin:0 0 18px;padding:0;list-style:none}.steps li{display:flex;gap:13px;padding:12px 0;border-top:1px solid var(--slate-200)}.steps li>span{color:var(--cobalt-600);font-size:12px;font-weight:700}.steps p{margin:3px 0 0;color:var(--slate-500);font-size:13px}
.result-dialog{text-align:center}.result-mark{display:grid;place-items:center;min-width:60px;width:max-content;height:58px;margin:0 auto 14px;padding:0 10px;border:1px solid var(--cobalt-200);border-radius:var(--radius-md);background:var(--cobalt-50);color:var(--cobalt-700);font-weight:700}.result-grid,.record-grid{display:grid;grid-template-columns:repeat(3,1fr);margin:20px 0;border-block:1px solid var(--slate-200)}.record-grid{grid-template-columns:1fr 1fr}.result-grid div,.record-grid div{padding:13px 6px;border-right:1px solid var(--slate-200)}.result-grid div:last-child,.record-grid div:nth-child(2n){border-right:0}.record-grid div:nth-child(n+3){border-top:1px solid var(--slate-200)}.result-grid strong,.result-grid span,.record-grid strong,.record-grid span{display:block}.result-grid span,.record-grid span{margin-top:3px;color:var(--slate-500);font-size:11px}.round-pips{display:flex;justify-content:center;gap:6px;margin-bottom:18px}.round-pips span{min-width:42px;padding:6px;border-radius:var(--radius-sm);background:var(--slate-100);font-size:11px;font-weight:700}.text-button{width:100%;margin-top:8px;padding:9px;border:0;background:transparent;color:var(--slate-500);cursor:pointer}
#snackbar{position:fixed;z-index:var(--global-toast-z);left:50%;top:var(--global-toast-top);translate:-50% -18px;max-width:calc(100% - 32px);padding:10px 14px;border:1px solid var(--slate-200);border-radius:var(--radius-md);background:white;box-shadow:var(--shadow-md);color:var(--slate-700);opacity:0;pointer-events:none;transition:.2s}#snackbar.show{translate:-50% 0;opacity:1}
@media(max-width:700px){.glyph-page{width:min(calc(100% - 16px),920px);padding-top:22px}.game-heading{align-items:flex-start}.puzzle-stage{padding:22px 16px}.skyline-frame{padding-inline:8px}.skyline{height:200px;gap:4px}.glyph-cell{--glyph-width:38px}.glyph-cell.narrow{--glyph-width:25px}.glyph-cell.wide{--glyph-width:52px}.baseline{left:8px;right:8px}.hint-panel{display:block}.hint-button{width:100%;margin-top:12px}.guess-form>div{grid-template-columns:1fr}.guess-form .primary-button{width:100%}.guess-row{grid-template-columns:90px 1fr}.guess-row>span{grid-column:1/-1}.about-card{grid-template-columns:1fr;gap:10px;padding:22px}.dialog{padding:25px 18px}}
@media(max-width:390px){.run-strip>div{display:block;padding:10px 11px}.run-strip strong{display:block;margin-top:2px}.puzzle-heading{display:block}.letter-count{display:inline-block;margin-top:8px}.glyph-cell{--glyph-width:32px}.glyph-cell.narrow{--glyph-width:21px}.glyph-cell.wide{--glyph-width:43px}}
@media(prefers-reduced-motion:reduce){#snackbar{transition:none}}