:root{font-family:system-ui,sans-serif;color:#e9e5d9;background:#101411;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;font-weight:400;--ink:#e9e5d9;--muted:#899087;--gold:#d1ac62;--line:#303730;--panel:#171c18;--mono:ui-monospace,"SFMono-Regular",monospace}*{box-sizing:border-box}body{margin:0;min-width:340px;min-height:100vh;background:radial-gradient(ellipse at 50% 52%,#202720 0,#151a16,#101411 76%)}button{font:inherit}.shell{width:min(1200px,calc(100% - 64px));margin:auto;min-height:100vh;display:flex;flex-direction:column}.topbar{height:78px;border-bottom:1px solid #2b322c;display:flex;align-items:center;justify-content:space-between}.wordmark{color:var(--ink);text-decoration:none;font:500 12px var(--mono);letter-spacing:.12em;display:flex;gap:11px;align-items:center}.wordmark b{color:var(--gold);font-weight:500}.brand-seal{width:28px;height:28px;border:1px solid #8e7444;border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:9px;letter-spacing:0}.date-chip,.eyebrow,.caption,.paper-foot,footer,.turn-number,.turn-result,.dial-tools,.primary-button,.text-button{font-family:var(--mono);letter-spacing:.12em}.date-chip{font-size:10px;color:#aaa99c;display:flex;align-items:center;gap:9px}.live-dot{width:6px;height:6px;background:#83a27c;border-radius:50%;box-shadow:0 0 10px #83a27c88}.intro{text-align:center;padding:44px 0 34px}.eyebrow{font-size:10px;color:var(--gold);letter-spacing:.2em;margin:0 0 14px}.eyebrow>span{color:#7b8176;margin-left:8px}h1{font:500 clamp(38px,5vw,56px)/1.05 Georgia,serif;letter-spacing:-.035em;margin:0;color:#eee9dd}.subhead{font-size:14px;color:#a2a79d;margin:16px 0 0}.game-grid{display:grid;grid-template-columns:minmax(225px,1fr) minmax(340px,1.35fr) minmax(225px,1fr);gap:22px;align-items:stretch;flex:1}.panel{background:linear-gradient(145deg,#1b211c,#171c18);border:1px solid #333a33;padding:23px 21px;min-height:430px;display:flex;flex-direction:column;position:relative}.panel:before{content:"";position:absolute;top:-1px;left:20px;width:30px;height:1px;background:var(--gold)}.section-heading{display:flex;align-items:center;gap:10px}.small-index{font:10px var(--mono);color:var(--gold);border:1px solid #635438;padding:4px 5px}.section-heading h2{font:500 18px Georgia,serif;margin:0}.panel-copy{font-size:12px;color:#92988e;margin:11px 0 22px}.notes-list{margin:0;padding:0;list-style:none;display:grid;gap:14px}.notes-list li{font-size:13px;line-height:1.65;color:#d1d0c5;display:grid;grid-template-columns:27px 1fr;gap:10px;background:#20251f;border:1px solid #343a31;padding:12px 10px}.note-pin{font:10px var(--mono);color:#b69a5c;padding-top:2px}.paper-foot{font-size:8px;color:#6f776d;display:flex;justify-content:space-between;border-top:1px solid #343a31;padding-top:14px;margin-top:auto}.dial-panel{min-width:0;display:flex;flex-direction:column;align-items:center;padding:0 14px}.timer-row{width:100%;display:flex;justify-content:space-between;align-items:flex-start;padding:5px 8px 0}.timer-row>div{display:flex;align-items:baseline;gap:7px}.timer-row>div:first-child{gap:9px}.caption{font-size:9px;color:#898f85;letter-spacing:.15em}.timer-row strong{font:500 19px var(--mono);color:#e4d1a3}.timer-row .unit{font:9px var(--mono);color:#838a80}.best-box{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.best-box strong{font:12px var(--mono);color:#afb59f}.dial-wrap{width:min(100%,350px);position:relative;margin:11px 0 3px;aspect-ratio:1;display:grid;place-items:center}.dial-halo{position:absolute;top:6%;right:6%;bottom:6%;left:6%;border-radius:50%;box-shadow:0 0 56px #bd995c0c,inset 0 0 25px #0008}.dial{width:100%;height:100%;overflow:visible;touch-action:none;cursor:grab;filter:drop-shadow(0 10px 14px #0008)}.dial:active{cursor:grabbing}.dial-outer{fill:url(#x);fill:#1b211d;stroke:#788071;stroke-width:2}.dial-inner{fill:#151a16;stroke:#353d35;stroke-width:1}.dial-mark{stroke:#757c70;stroke-width:1.3;opacity:.48}.dial-mark.major{stroke:#d0b16d;stroke-width:2;opacity:.9}.pointer{fill:var(--gold);filter:drop-shadow(0 0 6px #cba65a88);transform-origin:0 0}.hub-ring{fill:#20251f;stroke:#91774a;stroke-width:1.4}.hub{fill:#161b17;stroke:#30372f;stroke-width:1}.dial-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:135px;text-align:center;pointer-events:none;display:flex;align-items:center;flex-direction:column}.dial-center .caption{white-space:nowrap;color:#a6a995}.dial-center strong{font:500 39px var(--mono);line-height:1.2;color:#efe5cb;text-shadow:0 0 20px #d3b67528}.dial-center>span:last-child{font:8px var(--mono);letter-spacing:.15em;color:#777f74;margin-top:3px}.near .dial-center strong{color:#f2d37d;text-shadow:0 0 20px #d9b65c88}.near .dial{animation:tremor .11s infinite alternate}.near .dial-mark.major{stroke:#f1d17b;opacity:1}@keyframes tremor{0%{transform:translate(-.55px) rotate(-.12deg)}to{transform:translate(.55px) rotate(.12deg)}}.dial-tools{font-size:9px;color:#858d82;display:flex;align-items:center;gap:9px;margin:3px 0 15px;letter-spacing:.08em}.keycap{border:1px solid #5e655b;border-radius:3px;padding:3px 6px;color:#d4d1c5;font:10px var(--mono)}.divider{height:12px;border-left:1px solid #394039;margin:0 2px}.action-row{display:flex;gap:10px;width:100%;max-width:330px}.primary-button{flex:1;background:#c7a35c;border:1px solid #dbbc79;color:#17170f;min-height:43px;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:14px;transition:background .15s,transform .15s}.primary-button:hover:not(:disabled){background:#dfbd76;transform:translateY(-1px)}.primary-button:disabled{opacity:.4;cursor:not-allowed}.primary-button span{font-size:16px}.sound-button{width:95px;border:1px solid #42493f;background:#202620;color:#c4c8b9;font:11px var(--mono);display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}.sound-button span{font-size:9px}.status-line{font-size:11px;color:#a6ad9f;min-height:16px;text-align:center;margin:11px 0 0}.turn-list{display:grid}.turn-row{height:43px;display:grid;grid-template-columns:32px 1fr auto;align-items:center;border-bottom:1px solid #333a32;color:#b9beb2}.turn-number{font-size:9px;color:#7d8579}.turn-name{font-size:12px}.turn-result{font-size:8px;color:#737b70}.turn-row.correct .turn-result{color:#9bb18e}.turn-row.miss .turn-result{color:#c7816d}.log-divider{border-top:1px solid #353c34;margin:22px 0 14px}.best-note{display:flex;gap:11px;align-items:flex-start}.best-icon{color:var(--gold);font-size:19px}.best-note p{font-size:11px;line-height:1.55;color:#949b90;margin:1px 0}.text-button{margin-top:auto;background:transparent;border:0;border-top:1px solid #363d35;color:#c9aa68;padding:15px 0 0;text-align:left;display:flex;justify-content:space-between;font-size:9px;cursor:pointer}.text-button:disabled{opacity:.42;cursor:default}footer{display:flex;justify-content:space-between;color:#626b60;font-size:8px;letter-spacing:.13em;padding:26px 0 18px;margin-top:20px}footer i{color:#bd9d59;font-style:normal;margin:0 5px}@media(max-width:900px){.shell{width:min(720px,calc(100% - 36px))}.game-grid{grid-template-columns:1fr 1fr;gap:15px}.dial-panel{grid-column:1 / -1;grid-row:1;padding:0 12%}.dial-wrap{width:min(100%,320px)}.panel{min-height:300px}.notes-panel,.progress-panel{padding:19px 16px}.notes-list li{font-size:12px}.intro{padding:35px 0 28px}}@media(max-width:540px){.shell{width:calc(100% - 28px)}.topbar{height:62px}.wordmark{font-size:10px;gap:7px}.brand-seal{width:25px;height:25px}.date-chip{font-size:8px;gap:6px}.intro{padding:30px 0 25px}h1{font-size:40px}.subhead{font-size:12px;line-height:1.5;max-width:330px;margin:13px auto 0}.game-grid{grid-template-columns:1fr;gap:13px}.dial-panel{grid-column:auto;grid-row:auto;padding:0 1%}.dial-wrap{width:min(100%,340px);margin:8px 0 2px}.timer-row{padding:5px 3px 0}.panel{min-height:0;padding:18px}.notes-list{gap:8px}.notes-list li{padding:9px}.paper-foot{margin-top:19px}.progress-panel{min-height:230px}.text-button{margin-top:16px}footer{font-size:7px;line-height:1.5;gap:10px}footer span:first-child{max-width:180px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* Keep the dial and primary action in the first phone viewport. */
@media(max-width:540px){.intro{padding:14px 0 10px}.intro h1{font-size:32px}.subhead{margin-top:8px}.game-grid{gap:9px}.dial-panel{order:-1}.dial-wrap{width:min(100%,220px);margin:2px 0}.dial-tools{margin:1px 0 7px}.action-row{gap:8px}.primary-button{min-height:40px}}

@media(min-width:901px){.intro{padding:25px 0 15px}}