@font-face{font-family:'Pixelify Sans';src:url('/fonts/pixelify-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Pixelify Sans';src:url('/fonts/pixelify-semibold.ttf') format('truetype');font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}
:root{--ink:#ece6da;--muted:#aeb4bb;--cream:#dccfb8;--night:#111c22;--gold:#e4d58a;--pixel:'Pixelify Sans',monospace;--mono:'IBM Plex Mono',monospace;color-scheme:dark;font-family:var(--mono);font-size:15px;color:var(--ink);background:#3d6a72;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,select{cursor:pointer}button{color:inherit}button:disabled{cursor:default;opacity:.46}a{color:inherit;text-decoration:none}button,input,select,textarea{border-radius:1px}button{touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #ffe691;outline-offset:4px}input:focus-visible,textarea:focus-visible{outline:2px solid #e3d68b;outline-offset:0}button:not(:disabled):active{transform:translateY(2px)}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}h1,h2,h3,p{margin:0}button svg{pointer-events:none}.icon{width:18px;height:18px;flex:none;vertical-align:middle;image-rendering:pixelated}.large-icon{width:40px;height:40px;margin:8px auto 18px;display:block;color:var(--gold)}
#world{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:0;pointer-events:none}#app{position:relative;z-index:2;min-height:100svh}.crt{position:fixed;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0px,rgba(20,24,26,.12) 1px,transparent 2px);mix-blend-mode:multiply;opacity:.8}.toolbar{position:fixed;left:20px;right:16px;top:14px;z-index:8;display:flex;align-items:center;justify-content:space-between;pointer-events:none;gap:10px}.toolbar button{pointer-events:auto}.identity,.tools{display:flex;align-items:center;gap:12px}.identity{min-width:0}.nickname{display:flex;align-items:center;gap:6px;max-width:200px;height:28px;padding:3px 8px;font:12px/18px var(--pixel);border:1px solid #ece6da33;background:#090d138c;white-space:nowrap}.nickname span{overflow:hidden;text-overflow:ellipsis}.nickname .icon{width:14px;height:14px}.nickname.compact{padding:3px 6px;width:30px}.nickname.compact span{display:none}.altitude{font:12px/18px var(--pixel);letter-spacing:1.1px;white-space:nowrap;text-shadow:0 1px 1px #333}.altitude b{font-weight:400;color:#aeb4bb;margin-left:7px}.tools{gap:9px}.icon-button{border:0;background:none;width:40px;height:40px;display:grid;place-items:center;color:#b1b6b7;padding:8px}.icon-button:hover{color:#f8e6bf}.notebook-button{width:27px;padding:4px}.notebook-button .icon{width:12px;height:15px}.sound-button{margin-left:20px}.pass-badge{height:38px;border:2px solid #3d2a08;padding:7px 10px;display:flex;align-items:center;gap:7px;font:600 14px/20px var(--pixel);color:#3d2a08;letter-spacing:.5px;background:linear-gradient(110deg,#d99a26 0%,#ffe48a 38%,#fff6d0 50%,#ffe48a 62%,#d99a26 100%);background-size:300% 100%;animation:gold-flow 2.6s linear infinite;box-shadow:0 4px #70521b,0 0 0 1px #eed6a455;transform:translateY(-1px)}.pass-badge .icon{width:18px;height:20px}.home-screen{height:100svh;min-height:900px;position:relative}.logo{display:flex;justify-content:center;position:absolute;top:96px;left:50%;transform:translateX(-50%);font:600 112px/1 var(--pixel);letter-spacing:0;white-space:nowrap;isolation:isolate;color:#eee6d5;-webkit-text-stroke:5px #2d2924;paint-order:stroke fill;filter:drop-shadow(0 8px 0 #453c2d)}.logo span{display:inline-block;animation:logo-hop 4s linear infinite;animation-delay:calc(var(--i)*90ms)}.home-menu{position:absolute;top:calc(45svh - 43px);left:50%;transform:translateX(-50%);width:580px}.daily-heading{height:43px;display:flex;justify-content:flex-end;align-items:flex-start}.bell{width:36px;height:32px;display:grid;place-items:center;padding:5px;border:1px solid #ece6da4d;background:#090d13c7;transform:rotate(-3deg);margin:0 2px 0 0}.bell .icon{width:18px;height:18px;animation:bell-tinkle 7s linear infinite}.bell:hover{border-color:var(--gold);color:var(--gold)}.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mode-card{position:relative;min-width:0;min-height:136px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 12px;border:2px solid #090d13e6;box-shadow:inset 0 -4px #090d132b,0 4px #090d1380;transition:filter .16s,transform .16s,box-shadow .16s}.mode-card.sky{color:#2a1d10;background:#efd9b0}.mode-card.abyss{color:#eef6f8;background:#24506a}.mode-card.past{color:#fff3e8;background:#b4645a}.mode-card.future{color:#eefaf6;background:#2f6f6a}.mode-card>.icon{width:30px;height:30px;margin-bottom:3px}.mode-name{font:400 30px/32px var(--pixel);letter-spacing:3px}.mode-description{font:12px/17px var(--mono);margin-top:5px;opacity:.86;max-width:100%}.mode-card:hover{filter:brightness(1.1);transform:translateY(-3px);box-shadow:inset 0 -4px #090d132b,0 7px #090d1380}.mode-card:active{transform:translateY(3px)!important;box-shadow:inset 0 -2px #090d132b,0 1px #090d1380}.completed-badge{position:absolute;right:8px;top:7px;display:flex;align-items:center;gap:4px;font:12px var(--pixel)}.completed-badge .icon{width:11px;height:11px}.premium-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:10px;min-height:50px;border:1px solid #ece6da40;background:#101d24db;box-shadow:0 2px #10192266}.premium-menu button{min-width:0;display:flex;gap:8px;align-items:center;justify-content:center;border:0;border-right:1px solid #ece6da21;background:transparent;font:600 12.5px/15px var(--pixel);letter-spacing:.3px;padding:10px 6px}.premium-menu button:last-child{border-right:0}.premium-menu button:hover{background:#ece6da16;color:#ffe3a5}.premium-menu .icon{width:17px;height:17px}.primary-actions{display:flex;gap:8px;margin-top:10px}.btn{min-height:44px;padding:11px 16px;border:2px solid var(--cream);background:#090d13c7;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--ink);font:500 14px/1.15 var(--pixel);letter-spacing:1.4px;text-align:center;box-shadow:0 2px #0b10164d;transition:background .14s,transform .14s,filter .14s}.btn:hover:not(:disabled){background:#24353c}.btn.solid{background:var(--cream);color:#141a22;border-color:var(--cream);box-shadow:0 3px #80745e}.btn.solid:hover{background:#f1e2c5;border-color:#f1e2c5}.btn.discreet{border:1px solid #ece6da30;background:#090d1375}.btn.small{min-height:36px;padding:7px 11px;font-size:12px;letter-spacing:1px}.btn.wide{display:flex;width:100%;margin-top:14px}.primary-actions .btn{height:50px;padding:12px}.leader-button{flex:1.09}.share-button{flex:1}.share-button:disabled{color:var(--muted);border-color:#dccfb859;background:#090d13ad;opacity:.6}.home-footer{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:10px}.help-link{height:30px;display:inline-flex;align-items:center;justify-content:center;gap:5px;background:#090d1375;padding:5px 11px;font:12px var(--pixel);letter-spacing:1px}.question-mark{font-size:21px;line-height:20px}.language-label select{height:30px;min-width:104px;border:0;background-color:#090d1399;color:var(--ink);padding:5px 27px 5px 9px;font:12px var(--mono);appearance:none;background-image:linear-gradient(45deg,transparent 50%,#eee7d6 50%),linear-gradient(135deg,#eee7d6 50%,transparent 50%);background-position:calc(100% - 13px) 13px,calc(100% - 9px) 13px;background-size:4px 4px;background-repeat:no-repeat}.language-label option{background:#16262e}.nickname-prompt{position:fixed;left:24px;bottom:24px;width:340px;min-height:92px;background:#08121be8;border-left:3px solid var(--gold);padding:10px 7px 8px 12px;display:grid;grid-template-columns:16px 1fr;gap:3px 8px;animation:prompt-enter .52s .6s both}.nickname-prompt>.icon{width:14px;height:14px;color:var(--gold);margin-top:6px}.nickname-prompt p{font:15px/18px var(--pixel);white-space:nowrap}.nickname-prompt small{display:block;color:var(--muted);font:9px/14px var(--mono)}.nickname-actions{grid-column:2;display:flex;justify-content:flex-end;gap:6px;margin-top:5px}.records-aside{position:fixed;bottom:36px;right:48px;width:300px;padding:16px;background:#0b161bd9;border:1px solid #d6d4c04d;display:none}.mode-records{display:flex;gap:12px;justify-content:space-between}.mode-records>div{display:flex;flex-direction:column;align-items:center;gap:8px;font:12px var(--pixel)}.mode-records .icon{width:10px;height:10px}.mode-records strong{font-size:22px}.mode-records small{font:10px var(--mono)}.records-aside h2{font:12px var(--pixel);letter-spacing:2px;margin:18px 0 10px}.records-aside p{font:11px/18px var(--mono);color:var(--muted)}.records-aside ol{list-style:none;margin:0;padding:0;font:11px var(--mono)}.records-aside li{display:flex;justify-content:space-between;padding:5px 0}.records-aside li span{margin-left:auto}
/* The question sign and answer dock stay fixed while the world travels behind them. */
.game-screen{position:relative;height:var(--app-height,100svh);min-height:520px;overflow:hidden}.question-board{position:absolute;left:50%;top:66px;width:520px;padding:11px 16px 15px;background:#16191ce8;border:1px solid #ece6da30;text-align:center;transform-origin:50% -28px;animation:board-sway 3.8s ease-in-out infinite;box-shadow:0 2px #0002}.board-rope{position:absolute;left:50%;bottom:100%;width:5px;height:30px;background:repeating-linear-gradient(35deg,#6e715d 0 3px,#c2b799 3px 6px);opacity:.8}.score-progress{display:flex;justify-content:center;align-items:center;gap:12px;height:25px}.score-progress ol{list-style:none;padding:0;margin:0;display:flex;gap:4px}.score-progress li{width:22px;height:19px;background:#b1b0a221;border-bottom:2px solid transparent;display:grid;place-items:center}.score-progress li.current{border-color:#e8e4d96b}.score-progress li.perfect{background:#ffdf6c;color:#4b390b;box-shadow:0 0 10px #ffde6c8c;animation:step-pop .52s steps(5)}.score-progress li.great,.score-progress li.good{background:#7eae91;color:#183528}.score-progress li.miss{background:#879099;color:#17232d}.score-progress li .icon{width:14px;height:14px}.score-progress p{display:flex;gap:4px;align-items:baseline}.score-progress strong{font:23px var(--pixel);color:var(--ink)}.score-progress p>span{font:11px var(--mono);color:var(--muted)}.question-count{margin-top:5px;letter-spacing:1.5px;font:11px/18px var(--pixel);text-transform:uppercase;color:#bdbdb7}.question-count span{letter-spacing:.7px}.question-board h1{font:400 32px/1.14 var(--pixel);margin:13px 0 12px}.question-board h1 span{display:inline-block;animation:word-arrive .38s ease-out both;animation-delay:calc(80ms + var(--i)*45ms)}.question-hint{font:14px/21px var(--mono);color:var(--gold);margin-top:4px;margin-bottom:12px}.timer{position:relative;height:4px;background:#b6b7b135;overflow:hidden}.timer>div{position:absolute;inset:0;background:var(--ink);transform-origin:left center;transition:transform .1s linear}.timer .urgent{background:#d88f79}.question-board.answered{padding-bottom:20px}.question-board.answered h1{margin-bottom:0}.answer-dock{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);width:520px;display:flex;flex-direction:column;align-items:flex-end;gap:16px}.skip{min-height:32px;font-size:12px;border:1px solid #ece6da3d;background:#101b21c7;padding:7px 13px;letter-spacing:2px}.answer-dock form{display:flex;gap:7px;width:100%;padding:16px;background:#101b21f0;border:1px solid #ece6da33}.answer-dock input{height:52px;min-width:0;flex:1;background:#0b1318;color:var(--ink);border:1px solid #c5c1ad66;padding:10px 12px;font:16px/24px var(--mono)}.answer-dock input::placeholder{color:#8e9494}.answer-dock form .btn{flex:none;width:100px;height:52px;letter-spacing:1.4px}.answer-dock form .btn:disabled{background:#bbb5a5;border-color:#bbb5a5;color:#323a3d;opacity:.55;box-shadow:none}.answer-result{position:absolute;left:50%;bottom:36px;width:520px;transform:translateX(-50%);background:#121f26f5;border:1px solid #acb9b62e;animation:result-arrive .42s cubic-bezier(.2,1.4,.4,1);isolation:isolate}.answer-result>header{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#879099;color:#14212e}.answer-result h2{display:flex;align-items:center;gap:9px;font:500 27px var(--pixel);white-space:nowrap}.answer-result h2>.icon{width:27px;height:27px}.answer-result header p{display:flex;align-items:baseline;white-space:nowrap}.answer-result header strong{font:42px/1 var(--pixel);letter-spacing:-1px}.answer-result header small{font:10px var(--mono)}.answer-result.perfect{border-color:#d9bc53;background:#1c2328f2;animation:perfect-arrive .52s cubic-bezier(.2,1.6,.4,1)}.answer-result.perfect>header{background:linear-gradient(110deg,#dfaa31 0%,#ffe48a 38%,#fff2b6 50%,#ffe48a 62%,#dfaa31 100%);background-size:300% 100%;animation:gold-flow 3.2s linear infinite;color:#4c370d}.answer-result.great>header{background:#a3c6a5;color:#1d3e31}.answer-result.good>header{background:#9ab8bd;color:#1e3d49}.result-body{padding:12px 16px 16px}.result-message{font:13px/21px var(--mono);min-height:21px}.result-body h3{font:10px/16px var(--mono);letter-spacing:.6px;color:#a5b0b4;margin:12px 0 7px}.answer-examples{list-style:none;padding:0;margin:0 0 13px}.answer-examples li{display:grid;grid-template-columns:minmax(0,1fr) 104px 54px;gap:10px;align-items:center;font:12px/25px var(--mono);color:#aeb7bd}.answer-examples li>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.answer-examples li>span:last-child{text-align:right}.answer-examples li.your-answer{color:var(--gold)}.answer-examples em{font-style:normal;color:var(--gold)}.answer-bar{position:relative;height:6px;background:#96a0a32e}.answer-bar b{position:absolute;inset:0;background:#a8b3b5;transform:scaleX(var(--bar));transform-origin:left;animation:bar-fill .6s steps(8) both}.your-answer .answer-bar b{background:#ffe07b}.answer-result .next{width:100%;height:50px}.result-letters{display:inline-flex}.perfect .result-letters span{display:inline-block;animation:letter-burst .64s cubic-bezier(.15,1.7,.35,1) both,letter-wave 2.4s ease-in-out infinite;animation-delay:calc(var(--i)*55ms),calc(.9s + var(--i)*80ms)}.result-sparkles{position:absolute;top:-14px;left:-14px;right:-14px;display:flex;justify-content:space-between;font:24px var(--pixel);color:#ffe48a;pointer-events:none;animation:twinkle 1.3s steps(4) infinite}.result-sparkles i{font-style:normal;transform:translateY(22px)}#zone-announcement{position:fixed;z-index:3;left:50%;top:26%;transform:translateX(-50%);font:600 52px/1.1 var(--pixel);letter-spacing:4px;color:#fff7dc;white-space:nowrap;text-shadow:4px 4px #22212d;opacity:0;pointer-events:none;border-bottom:5px solid #fff7dc;box-shadow:0 4px #22212d}#zone-announcement.announce{animation:zone-enter 2.4s ease-out both}
/* Archive, scores and help use the same quiet, square pixel panels. */
.secondary-screen{max-width:680px;margin:0 auto;min-height:100svh;padding:85px 20px 40px;animation:page-in .25s ease-out}.page-heading{display:flex;gap:20px;align-items:center;margin-bottom:18px}.page-heading h1{font:500 27px/32px var(--pixel);letter-spacing:2px;text-shadow:0 2px #17252c}.btn.back{min-height:34px;padding:7px 11px;font-size:12px;letter-spacing:1px;border:1px solid #d3d1bb55;background:#12232ac9;flex:none}.dark-panel,.summary-panel{background:#101b22f0;border:1px solid #d3d1bb4d;padding:24px;box-shadow:0 4px #0b182557}.dark-panel>h2,.summary-panel>h2{font:26px/31px var(--pixel);margin:8px 0 10px}.dark-panel>p{font:12px/21px var(--mono);color:#bec5c6}.tabs{display:flex;border:1px solid #e2dbc73b}.tabs button{flex:1;min-width:0;min-height:40px;font:14px var(--pixel);letter-spacing:.6px;background:transparent;border:0;border-right:1px solid #e2dbc72b;padding:8px 4px}.tabs button:last-child{border-right:0}.tabs button[aria-selected=true]{color:#1a2228;background:var(--cream)}.tabs button:hover:not([aria-selected=true]){background:#d7cbb518}.mode-tabs{margin-top:12px}.day-selector{display:flex;justify-content:center;align-items:center;gap:20px;margin:16px 0 8px;font:14px var(--pixel);letter-spacing:1px}.day-selector .icon-button{font-size:28px;width:32px}.board-note{text-align:center;color:var(--muted);font:11px/20px var(--mono)}.distribution{display:flex;gap:4px;align-items:flex-end;height:95px;margin:22px 16px 4px;border-bottom:1px solid #e2dbc740}.distribution i{flex:1;height:var(--height);background:#bda477;min-height:2px}.distribution-labels{display:flex;justify-content:space-between;margin:0 16px;color:var(--muted);font:10px var(--mono)}.list-heading{font:13px var(--pixel);letter-spacing:2px;margin:25px 0 8px}.leader-list{list-style:none;padding:0;margin:0}.leader-list li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;padding:12px 2px;border-bottom:1px solid #aab8b51f;font:15px var(--pixel);gap:9px}.leader-list .rank{color:var(--gold);font-size:20px}.leader-list li>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis}.leader-list small{font:10px var(--mono);color:var(--muted);display:block;margin-top:4px}.leader-list strong{font:26px var(--pixel)}.leader-list strong small{display:inline}.leader-list .icon{width:14px;height:14px}.fine-print{font:10px/17px var(--mono)!important;color:#9da9ad!important;margin:22px 0 0!important;text-align:center}.empty-state{text-align:center;padding:44px 15px 34px}.empty-state>.icon{width:38px;height:38px;color:#d3c5a7;margin-bottom:12px}.empty-state h2{font:24px var(--pixel)}.empty-state p{font:12px/20px var(--mono);margin:12px 0 22px;color:var(--muted)}.section-icon .icon{width:35px;height:35px;color:#ead9ac}.archive-panel{text-align:center}.archive-month{font:20px var(--pixel);text-transform:uppercase;letter-spacing:2px;margin:30px 0 14px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.calendar-day{position:relative;min-height:47px;border:1px solid #d0c7ab3d;background:#233139;color:#d2cec2;font:22px var(--pixel)}.calendar-day:hover{background:#3c4c51}.calendar-day.selected{background:var(--cream);color:#17232d;border-color:var(--cream)}.calendar-day.today{outline:1px solid var(--gold);outline-offset:-4px}.calendar-day i{position:absolute;bottom:4px;left:calc(50% - 2px);width:4px;height:4px;background:#a0c9a3}.selected-date{margin:22px 0 12px!important;font:13px var(--pixel)!important;letter-spacing:1.2px}.small-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.compact-card{min-height:90px;padding:12px 5px}.compact-card .mode-name{font-size:19px;line-height:25px;letter-spacing:1.2px}.compact-card>.icon{width:24px;height:24px}.pack-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}.pack-card{min-width:0;min-height:200px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;border:1px solid var(--pack);box-shadow:0 3px color-mix(in srgb,var(--pack),black 50%);background:color-mix(in srgb,var(--pack) 20%,#17242b);padding:20px 12px;transition:transform .2s,background .2s}.pack-card:hover{transform:translateY(-4px);background:color-mix(in srgb,var(--pack) 35%,#17242b)}.pack-pixel-icon{color:var(--pack);font:42px var(--pixel);height:46px}.pack-pixel-icon .icon{width:36px;height:36px}.pack-card strong{font:23px var(--pixel)}.pack-card>span:not(.pack-pixel-icon){font:11px var(--mono);text-align:center}.pack-card small{font:9px var(--mono);color:#afb8bb;text-align:center;line-height:16px}.summary-panel{text-align:center}.summary-icon>.icon{width:40px;height:40px;color:var(--gold);margin:8px 0 14px}.eyebrow{font:12px var(--pixel);letter-spacing:1.7px;color:#bec4c4}.summary-score{margin:20px 0 24px;color:var(--gold)}.summary-score>strong{font:86px/1 var(--pixel);text-shadow:4px 4px #090d1380}.summary-score>span{font:17px var(--pixel);margin-left:8px;color:#b2baba}.summary-rounds{list-style:none;display:flex;justify-content:center;gap:6px;padding:0;margin:0}.summary-rounds li{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;border:1px solid #d3d1bb30;padding:8px 2px;background:#b7b7a40d}.summary-rounds li.perfect{border-color:#dfbd5f;color:var(--gold);background:#d9b65b12}.summary-rounds li.good,.summary-rounds li.great{color:#a4d1b4}.summary-rounds li>span:first-child{font:11px var(--mono);color:var(--muted)}.summary-rounds li>span:last-child{font:8px/12px var(--mono);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.summary-rounds strong{font:23px var(--pixel)}.summary-detail{font:12px var(--mono);color:var(--muted);margin:22px 0}.summary-buttons{display:flex;flex-wrap:wrap;gap:10px}.summary-buttons .btn{flex:1;white-space:nowrap}.summary-buttons .discreet{flex-basis:100%;margin-top:2px}.next-daily{font:11px/18px var(--mono);color:var(--muted);display:block;margin-top:24px}.article-screen{max-width:760px}.article-panel{padding:32px}.article-panel h2{font-size:32px;line-height:1.1}.article-panel>h3{font:23px/28px var(--pixel);color:var(--cream);margin:29px 0 10px}.article-panel p{font:13px/1.9 var(--mono);color:#c4cbcb;margin:10px 0}.help-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:27px 0}.help-modes section{border-top:1px solid #c2c5b83d;padding-top:15px}.help-modes h3{font:23px var(--pixel);letter-spacing:1.5px}.help-modes .icon{width:20px;height:20px}.help-modes p{font-size:12px}.article-panel details{margin:28px 0;padding:15px;background:#090f1452;border:1px solid #c2c5b83d}.article-panel summary{font:17px var(--pixel);cursor:pointer;color:var(--gold)}.article-links{display:flex;justify-content:center;gap:16px;font:12px var(--pixel);margin-top:24px;color:var(--muted)}.article-links a:hover{text-decoration:underline;color:var(--gold)}
/* Native dialogs provide keyboard focus trapping, Escape, and background inertness. */
.modal{width:min(440px,calc(100vw - 32px));max-height:calc(100svh - 40px);overflow-y:auto;background:#15242bf7;color:var(--ink);padding:28px;border:1px solid #d6cdb55e;box-shadow:0 6px #080f1466;animation:dialog-in .25s ease-out;margin:auto}.modal::backdrop{background:#05080bd1}.modal h2{font:600 28px/32px var(--pixel);letter-spacing:2px;margin-bottom:13px}.modal>p{font:12px/22px var(--mono);margin-bottom:18px}.modal .muted{color:var(--muted)}.modal label:not(.plan){display:block;font:13px var(--pixel);letter-spacing:.5px;margin-bottom:8px}.modal input:not([type=radio]),.modal textarea{width:100%;border:1px solid #bcbca275;background:#0d171d;color:var(--ink);padding:12px;font:16px/24px var(--mono)}.modal input:not([type=radio]){height:49px}.modal form>small{display:block;font:10px/18px var(--mono);color:var(--muted);margin:9px 0}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:23px}.modal-modes{margin:22px 0 18px}.modal-modes .compact-card{min-height:95px}.modal-modes .mode-name{font-size:25px}.modal .fine-print{margin-bottom:20px!important}.pass-modal{width:min(560px,calc(100vw - 24px));padding:20px 24px;background:transparent;border:0;box-shadow:none;text-align:center;overflow-x:hidden}.pass-ticket{width:404px;max-width:100%;margin:0 auto;color:#453419;background:#dbc687;text-align:left;position:relative;box-shadow:0 5px #271d1080;animation:ticket-enter .36s ease-out;isolation:isolate}.pass-ticket::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#fff7c137 40%,transparent 55%);background-size:300% 100%;animation:gold-flow 7s linear infinite;mix-blend-mode:soft-light}.ticket-top{padding:22px 26px 24px;border-bottom:2px dashed #7a65336b;position:relative}.ticket-top::before,.ticket-top::after{content:'';position:absolute;bottom:-11px;width:20px;height:20px;background:#0b1114;border-radius:50%;z-index:2}.ticket-top::before{left:-10px}.ticket-top::after{right:-10px}.ticket-top h2{font-size:32px;letter-spacing:2px;margin-bottom:10px}.ticket-top h3{font:600 15px var(--mono);margin-bottom:12px}.ticket-top ul{padding-left:20px;margin:0;list-style-type:'◆ ';font:12px/20px var(--mono)}.ticket-top li{padding-left:1px;margin-bottom:5px}.ticket-bottom{padding:26px}.plan-options{border:0;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:10px}.plan{display:flex;align-items:center;gap:9px;padding:9px 10px;min-height:58px;cursor:pointer;background:#eadbaf66;border:2px solid #695a3938}.plan.chosen{background:#f1e7cbb8;border-color:#5b5032}.plan input{appearance:none;width:15px;height:15px;border:2px solid #675937;display:grid;place-items:center;padding:0;margin:0;flex:none}.plan input:checked::before{content:'';width:7px;height:7px;background:#675937}.plan strong{display:block;font:19px var(--pixel)}.plan small{display:block;font:10px/14px var(--mono)}.plan-price{margin-left:auto;display:grid;grid-template-columns:auto auto;align-items:baseline;white-space:nowrap}.plan-price b{font:32px/30px var(--pixel)}.plan-price>small{font-size:9px;display:inline}.plan-price em{grid-column:1/3;font:10px var(--mono);text-align:right}.ticket-button{width:100%;background:#4b3713;border-color:#4b3713;color:#f6e5ac;min-height:50px;box-shadow:0 3px #2f240f}.ticket-button:hover:not(:disabled){background:#634a1d}.ticket-note{font:10px/17px var(--mono);margin:14px 0 0;text-align:center}.ticket-note .icon{width:11px;height:11px}.ticket-preview{font:11px/18px var(--mono);padding:10px 0 0}.text-button{border:0;background:none;text-decoration:underline;font:12px var(--mono);color:var(--ink);margin:22px auto 13px;display:block}.pass-close{min-width:140px;margin:0 auto}.notebook-list{list-style:none;padding:0;margin:16px 0;font:12px/20px var(--mono)}.notebook-list li{display:flex;gap:14px;justify-content:space-between;padding:9px 0;border-bottom:1px solid #a7b0ad24}.notebook-list li>span{overflow:hidden;text-overflow:ellipsis}.notebook-list b{color:var(--gold);white-space:nowrap}.notebook-mode{font:20px var(--pixel)!important;color:var(--gold)}.notebook-modal .records-aside{display:block;position:static;width:100%;margin:18px 0;border:0;background:none;padding:0}.modal textarea{font-size:12px;resize:vertical;min-height:155px}.modal .solid .icon{width:16px;height:16px}#toast{position:fixed;z-index:100;bottom:24px;left:50%;transform:translate(-50%,20px);max-width:calc(100vw - 32px);width:max-content;background:#111c22f5;border:1px solid #d4c88a;color:var(--ink);padding:13px 18px;font:14px/20px var(--pixel);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;text-align:center}#toast.visible{opacity:1;transform:translate(-50%,0)}
@keyframes logo-hop{0%,5%,15%,100%{transform:translateY(0)}8%{transform:translateY(-5px)}11%{transform:translateY(1px)}}
@keyframes gold-flow{from{background-position:0% 50%}to{background-position:300% 50%}}
@keyframes bell-tinkle{0%,82%,100%{transform:rotate(0)}84%,88%,92%{transform:rotate(-14deg)}86%,90%,94%{transform:rotate(14deg)}}
@keyframes prompt-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes board-sway{0%,100%{transform:translateX(-50%) rotate(-.8deg)}50%{transform:translateX(-50%) rotate(.8deg)}}
@keyframes word-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes result-arrive{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes perfect-arrive{0%{transform:translate(-50%,30px) scale(.86)}55%{transform:translate(-50%,-6px) scale(1.04)}100%{transform:translate(-50%,0)}}
@keyframes step-pop{from{transform:scale(1.8) rotate(-12deg);filter:brightness(2)}60%{transform:scale(.9)}to{transform:none;filter:none}}
@keyframes bar-fill{from{transform:scaleX(0)}to{transform:scaleX(var(--bar))}}
@keyframes letter-burst{0%{opacity:0;transform:translateY(-35px) scale(2.8) rotate(-20deg)}45%{opacity:1}70%{transform:translateY(3px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes letter-wave{0%,60%,100%{transform:none}30%{transform:translateY(-4px)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1)}70%{opacity:.6;transform:scale(.85)}}
@keyframes zone-enter{0%{opacity:0;transform:translate(-50%,15px) scale(.9)}15%,65%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-14px)}}
@keyframes page-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ticket-enter{from{opacity:0;transform:translateY(-40px) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:none}12%{transform:translate(-5px,3px)}25%{transform:translate(5px,-4px)}38%{transform:translate(-4px,-2px)}50%{transform:translate(4px,3px)}64%{transform:translate(-2px,2px)}80%{transform:translate(2px,-1px)}}
.celebrate-shake #world{animation:shake .46s .06s steps(8)}
@media(min-width:1600px){.home-screen>.records-aside{display:block}}
@media(max-height:899px) and (min-width:701px){.home-screen{min-height:760px}.home-menu{top:max(280px,calc(45svh - 43px))}.mode-card{min-height:120px;padding:12px}.logo{top:73px;font-size:100px}.home-footer{margin-top:8px}.nickname-prompt{bottom:16px}.question-board{top:60px}.answer-dock,.answer-result{bottom:24px}}
@media(max-width:1050px) and (min-width:701px){.nickname-prompt{width:245px}.nickname-prompt p{white-space:normal}.nickname-prompt small{display:none}}
@media(max-width:700px){
 :root{font-size:14px}.toolbar{top:10px;left:10px;right:10px;gap:5px}.identity{gap:8px}.nickname{font-size:11px;padding:3px 6px;max-width:130px;height:28px}.nickname .icon{width:13px;height:13px}.altitude{font-size:10px;letter-spacing:.3px}.altitude b{margin-left:3px}.tools{gap:5px}.sound-button{margin-left:2px;width:29px;padding:6px}.pass-badge{font-size:13px;padding:5px 9px;height:33px;gap:0;letter-spacing:.3px}.pass-badge>.icon{display:none}.notebook-button{width:20px}.home-screen{height:100svh;min-height:810px}.logo{top:101px;font-size:70px;line-height:1;letter-spacing:0;-webkit-text-stroke:3px #2d2924;filter:drop-shadow(0 6px 0 #453c2d)}.home-menu{width:calc(100% - 32px);top:max(290px,calc(45svh - 43px))}.mode-grid{gap:8px}.mode-card{min-height:121px;padding:12px 8px;box-shadow:inset 0 -4px #090d132b,0 4px #090d1380}.mode-card>.icon{width:29px;height:29px;margin-bottom:3px}.mode-name{font-size:27px;line-height:29px;letter-spacing:2.8px}.mode-description{font-size:12px;line-height:16px;max-width:145px;margin-top:5px;text-align:center}.premium-menu{margin-top:8px;min-height:50px}.premium-menu button{font-size:12px;padding:10px 3px;letter-spacing:0}.premium-menu .icon{display:none}.primary-actions{margin-top:9px}.primary-actions .btn{height:40px;min-height:40px;padding:9px}.leader-button{font-size:13px}.share-button{display:none}.home-footer{position:fixed;top:calc(max(810px,100svh) - max(290px,calc(45svh - 43px)) - 54px);left:0;margin:0;gap:8px}.help-link{width:36px;height:30px;padding:5px}.help-label{display:none}.language-label select{height:30px;min-width:104px}.nickname-prompt{left:16px;bottom:67px;width:calc(100% - 32px);min-height:39px;padding:7px 8px;grid-template-columns:14px 1fr auto;gap:6px;border-left-width:2px;align-items:center;background:#0b1c24eb}.nickname-prompt>.icon{margin:0;width:12px;height:12px}.nickname-prompt p{white-space:normal;font-size:11px;line-height:15px}.nickname-prompt small{display:none}.nickname-actions{grid-column:auto;margin:0;gap:4px}.nickname-actions .btn{min-height:28px;padding:4px 6px;font-size:10px}.nickname-actions .discreet{display:none}.records-aside{display:none}.game-screen{min-height:480px}.question-board{top:72px;width:calc(100% - 32px);padding:11px 12px 14px}.question-board h1{font-size:27px;line-height:1.15;margin:12px 0}.question-hint{font-size:11px;line-height:18px;margin-bottom:11px}.question-count{font-size:10px;letter-spacing:1px}.score-progress ol{gap:3px}.score-progress li{width:20px;height:18px}.score-progress{gap:12px}.score-progress strong{font-size:21px}.answer-dock{bottom:20px;width:calc(100% - 32px);gap:12px}.answer-dock form{padding:10px;gap:6px}.answer-dock input{font-size:16px;height:49px;padding:10px 9px}.answer-dock form .btn{width:80px;height:49px;padding:10px 6px;font-size:12px;letter-spacing:.8px}.answer-result{width:calc(100% - 32px);bottom:20px}.answer-result>header{padding:0 12px;height:48px}.answer-result h2{font-size:22px;gap:7px}.answer-result h2>.icon{width:23px;height:23px}.answer-result header strong{font-size:36px}.result-body{padding:10px 12px 12px}.result-message{font-size:11px;line-height:18px}.result-body h3{font-size:9px;margin:11px 0 6px}.answer-examples li{grid-template-columns:minmax(0,1fr) 65px 45px;gap:7px;font-size:10px;line-height:25px}.answer-result .next{height:46px;font-size:12px;letter-spacing:1px}.result-letters{letter-spacing:0}#zone-announcement{font-size:35px;letter-spacing:2px;top:32%}.secondary-screen{padding:72px 16px 28px}.page-heading{gap:13px;margin-bottom:16px}.page-heading h1{font-size:24px;letter-spacing:1.6px}.dark-panel,.summary-panel{padding:18px 14px}.tabs button{font-size:12px}.mode-tabs button{font-size:11px;padding:8px 2px;letter-spacing:0}.empty-state{padding:35px 8px 25px}.empty-state h2{font-size:22px}.empty-state p{font-size:11px}.small-grid{gap:5px}.small-grid .compact-card{min-height:83px;padding:8px 3px}.small-grid .mode-name{font-size:16px;letter-spacing:.5px}.small-grid .icon{width:22px;height:22px}.pack-grid{gap:9px}.pack-card{padding:14px 8px;min-height:190px}.pack-card strong{font-size:20px}.pack-card>span:not(.pack-pixel-icon){font-size:10px;line-height:16px}.pack-card small{font-size:8px}.calendar-day{min-height:42px}.calendar-grid{gap:5px}.summary-score>strong{font-size:74px}.summary-score>span{font-size:14px}.summary-rounds{gap:4px}.summary-rounds li{padding:8px 1px}.summary-rounds li>span:last-child{display:none}.summary-rounds strong{font-size:20px}.summary-buttons .btn{font-size:12px;padding:10px;letter-spacing:1px}.summary-panel h2{font-size:25px}.article-panel{padding:22px 18px}.article-panel h2{font-size:28px}.article-panel p{font-size:12px}.article-panel>h3{font-size:22px}.help-modes{gap:14px}.article-links{gap:12px}.modal{padding:23px 20px;width:calc(100vw - 32px);max-height:calc(100svh - 28px)}.modal h2{font-size:26px}.modal .btn{font-size:12px}.pass-modal{padding:12px 4px;width:calc(100vw - 24px)}.ticket-top{padding:21px 22px 22px}.ticket-bottom{padding:22px}.ticket-top ul{font-size:11px;line-height:20px}.plan{padding:8px;gap:7px}.plan strong{font-size:18px}.plan small{font-size:9px}.plan-price b{font-size:29px}.modal-modes .mode-name{font-size:23px}.modal-modes .compact-card{min-height:95px}.fine-print{font-size:9px!important}.question-board.answered{padding-bottom:18px}
}
@media(max-width:370px){.altitude{font-size:9px}.nickname{max-width:118px;font-size:10px}.pass-badge{font-size:12px;padding:5px 7px}.sound-button{width:24px}.logo{font-size:63px}.home-menu{width:calc(100% - 24px)}.mode-description{font-size:11px;max-width:125px}.mode-name{font-size:25px}.premium-menu button{font-size:11px}.mode-card{min-height:116px}.home-screen{min-height:795px}.home-footer{top:calc(max(795px,100svh) - max(290px,calc(45svh - 43px)) - 54px)}}
@media(max-height:650px){.game-screen .question-board{top:58px;padding:8px 12px 10px}.game-screen .question-board h1{font-size:23px;line-height:1.05;margin:8px 0}.game-screen .question-hint{margin:5px 0 9px;font-size:11px}.game-screen .answer-dock,.game-screen .answer-result{bottom:13px}.game-screen .answer-result .result-body{padding:8px 12px 10px}.game-screen .answer-examples li{line-height:21px}.game-screen .answer-result .next{min-height:39px;height:39px}.game-screen .answer-result>header{height:42px}#zone-announcement{top:40%;font-size:30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.question-board{transform:translateX(-50%)}.answer-result{transform:translateX(-50%)}.logo span{transform:none}.crt{opacity:.5}#zone-announcement.announce{animation:none!important;opacity:0}}
/* Redrawn pixel wordmark: reference dimensions, with independently hopping glyphs. */
.logo{top:108px;width:525.33px;height:101.33px;font-size:0;line-height:0;-webkit-text-stroke:0;filter:none;display:block}
.logo svg{display:block;width:100%;height:100%;overflow:visible}
.logo .glyph{animation:logo-hop 4s linear infinite;animation-delay:calc(var(--i)*90ms)}
@keyframes logo-hop{0%,5%,15%,100%{transform:translateY(0)}8%{transform:translateY(-.6px)}11%{transform:translateY(.1px)}}
.crt{background:repeating-linear-gradient(to bottom,rgba(10,18,23,.18) 0 1px,rgba(255,238,203,.035) 1px 2px);opacity:.88;mix-blend-mode:normal}
@media(max-width:700px){.logo{top:106px;width:328.33px;height:63.33px}}
@media(max-width:370px){.logo{width:304px;height:58.65px}}
@media(max-height:899px) and (min-width:701px){.logo{top:108px}}
.nickname{letter-spacing:.65px}
@media(max-width:700px){.mode-card:not(.compact-card){height:121px;min-height:121px;padding:9px 8px}.home-footer{top:calc(max(810px,100svh) - max(290px,calc(45svh - 43px)) - 45px)}.nickname{font-size:12px;max-width:130px;letter-spacing:.3px}}
@media(max-width:370px){.nickname{font-size:10px;letter-spacing:.3px}.home-footer{top:calc(max(795px,100svh) - max(290px,calc(45svh - 43px)) - 45px)}}
body[data-view="leaderboard"] .secondary-screen{max-width:600px;padding-top:64px}
body[data-view="leaderboard"] .page-heading{padding:6px 8px;min-height:50px;border:1px solid #d4cfb34a;background:#292821f2;margin-bottom:8px;gap:12px}
body[data-view="leaderboard"] .page-heading h1{font-size:18px;line-height:24px;letter-spacing:2px}
.leaderboard-panel{padding:16px;background:#2c2a25f5}
.leaderboard-panel .tabs{gap:6px;border:0}
.leaderboard-panel .tabs button{border:1px solid #e2dbc735;min-height:36px;background:#111b217a}
.leaderboard-panel .tabs button[aria-selected=true]{background:var(--cream)}
.leaderboard-panel .period-tabs button{min-height:38px}
.leaderboard-panel .day-selector{margin:12px 0 8px}
@media(max-width:700px){body[data-view="leaderboard"] .secondary-screen{padding-top:64px}.leaderboard-panel{padding:14px 12px}.leaderboard-panel .mode-tabs{gap:4px}.leaderboard-panel .mode-tabs button{font-size:10px}}

@media(max-width:700px){.nickname-prompt{bottom:61px}}
/* Measured second pass: shared panel geometry and responsive controls. */
@font-face{font-family:'Pixelify Sans';src:url('/fonts/pixelify-medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-semibold.ttf') format('truetype');font-weight:600 700;font-style:normal;font-display:swap}
[hidden]{display:none!important}
.toolbar{top:16px}.identity{height:28px}.tools{position:fixed;inset:0;pointer-events:none}.tools button{position:absolute;pointer-events:auto}.sound-button{right:16px;top:14px;width:40px;height:40px;margin:0}.notebook-button{right:58px;top:22px;width:24px;height:24px;padding:4px}.pass-badge{right:92px;top:14px;transform:none;font-weight:500}.bell{transform:none}.btn{font-weight:500}.leader-button{flex:none;width:298px}.share-button{flex:1}.premium-menu button{font-weight:500}.help-link{height:32px}.language-label select{font:12px var(--pixel);width:105px;min-width:105px;height:28px}.nickname-prompt{padding:7px;min-height:93.2px}.nickname-prompt p{font-size:14px}.nickname-prompt>.icon{margin-top:4px}.nickname-prompt .nickname-actions{margin-top:5px}
.modal{width:min(420px,calc(100vw - 32px));padding:16px;background:rgba(9,13,19,.78);backdrop-filter:blur(6px);border:1px solid #ece6da33;box-shadow:none;max-height:calc(100svh - 32px)}
.modal::backdrop{background:rgba(4,7,11,.6)}.modal h2{font:500 22px/33px var(--pixel);letter-spacing:1.1px;margin:0}.modal .btn{font:400 13px/19.5px var(--pixel);letter-spacing:1.4px;border-width:1px;min-height:42px;box-shadow:none}.modal .btn.solid{box-shadow:0 3px #80745e}.modal input:not([type=radio]){font:15px/22.5px var(--mono);height:50px;background:#090d138c;border-color:#ece6da4d;min-width:0}.modal>p.name-description{font:13px/19.5px var(--mono);color:var(--muted);margin:12px 0}.name-line{display:flex;gap:8px}.name-line input{flex:1;width:0!important}.name-line .btn{padding:10px 13px;min-height:50px}.form-error{height:19.5px;font:13px/19.5px var(--mono);color:#e3a59c;margin:6px 0 12px}.name-modal .modal-actions{margin:0;gap:8px}.name-modal .modal-actions .btn{min-height:48.5px;padding:13px 16px}.dialog-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.close-x{display:grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid #ece6da33;background:#090d138c;font:25px/1 var(--pixel)}.reminder-modal>p{font:13px/19.5px var(--pixel);letter-spacing:.6px;color:var(--muted);margin:12px 0}.reminder-modal .btn.wide{margin-top:10px;min-height:37px}.reminder-modal form>small{font:10px/15px var(--mono);margin:10px 0 0;text-align:center}.reminder-feedback{font:12px/18px var(--mono);color:var(--muted);margin-top:12px}
.pass-modal{width:min(560px,calc(100vw - 24px));background:none;backdrop-filter:none;border:0;max-height:calc(100svh - 24px);padding:16px 24px;text-align:center;overflow-x:hidden}.pass-ticket{width:408px;max-width:100%;border-radius:6px;background:linear-gradient(120deg,#fff2bc 0%,#ffe791 46%,#e7b44a 100%);color:#3d2a08;box-shadow:0 7px 0 #5c451d70}.ticket-top{padding:23px 26px 24px;border-bottom:2px dashed #6a481080}.ticket-top h2{font:400 32px/40px var(--pixel);letter-spacing:2px;margin:0 0 9px}.ticket-top h3{font:600 15px/20.25px var(--mono);margin:0 0 10px}.ticket-top ul{list-style:none;padding:0;font:400 13.5px/18.9px var(--mono)}.ticket-top li{position:relative;padding-left:18px;margin-bottom:4px}.ticket-top li::before{content:'◆';position:absolute;left:0;font-size:9px}.ticket-top li:last-child{margin-bottom:0}.ticket-bottom{padding:24px 26px 20px}.plan-options{gap:10px;margin-bottom:10px}.plan{padding:10px 12px;min-height:58px;height:58px;gap:10px;border:1px solid #3d2a0847;background:#fff6d059}.plan.chosen{border-color:#3d2a08;background:#fffae8b8;box-shadow:2px 2px #3d2a081f}.plan input{width:16px;height:16px;border-color:#3d2a08}.plan strong{font:400 19px/22px var(--pixel)}.plan small{font:10px/15px var(--mono)}.plan-price{column-gap:3px}.plan-price>small{font-size:10px}.plan-price .pixel-number{height:21px;max-width:72px}.plan-price em{font:10px/14px var(--mono)}.modal .ticket-button{background:#3d2a08;color:#fff2c6;min-height:49.5px;font:400 15px/22.5px var(--pixel);padding:13px 16px 12px;border:0}.ticket-note{display:flex;flex-direction:column;gap:2px;font:11px/16.8px var(--mono);color:#6a4810;margin:8px 0 0}.ticket-note>span{display:block}.ticket-note .icon{width:12px;height:12px}.pass-edition{font:11px/15.4px var(--mono)!important;color:var(--muted);margin:17px auto 0!important;max-width:400px}.text-button{font:13px/19.5px var(--mono);margin:12px auto;padding:0}.pass-close{height:41.5px;min-height:41.5px!important;width:140px}.code-line{display:flex;gap:8px;max-width:440px;margin:12px auto 0}.code-line input{width:0!important;flex:1;font-size:11px!important}.code-line .btn{padding:9px}.code-feedback{font:11px/17px var(--mono);color:#e3a59c;margin-top:8px}.ticket-preview{font:11px/18px var(--mono)}
.direction-modal{width:min(440px,calc(100vw - 32px))}.modal-modes{margin:12px 0 10px;gap:8px 10px}.mode-choice{border:1px solid #ece6da33;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:63px;padding:8px;box-shadow:0 3px #0004}.mode-choice>span{font:15px/22.5px var(--pixel);letter-spacing:1px;display:flex;align-items:center;gap:5px}.mode-choice small{font:11px/16.5px var(--mono);opacity:.8}.mode-choice.sky{background:#efd9b0;color:#2a1d10}.mode-choice.abyss{background:#24506a}.mode-choice.past{background:#b4645a}.mode-choice.future{background:#2f6f6a}.direction-modal .btn.wide{margin-top:0}
.notebook-modal{width:min(460px,calc(100vw - 32px));height:min(680px,calc(100svh - 32px));padding:18px 18px 12px 30px;color:#2f2620;border:0;border-left:13px solid #6b5142;border-radius:2px 5px 5px 2px;background:repeating-linear-gradient(to bottom,#dccfb8 0 23px,#b2a69166 23px 24px);box-shadow:4px 5px 0 #1b181666;backdrop-filter:none;overflow:hidden;display:flex;flex-direction:column}.notebook-modal:not([open]){display:none}.notebook-modal::before{content:'';position:absolute;left:44px;top:0;bottom:0;border-left:1px dashed #aa715966;pointer-events:none}.notebook-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid #77635066;position:relative;z-index:1}.notebook-head>.icon{width:26px;height:24px}.notebook-head>div{flex:1}.notebook-head h2{font:400 18px/27px var(--pixel);letter-spacing:.6px;white-space:nowrap}.notebook-head p{font:10px/15px var(--mono);letter-spacing:1px;color:#6c5c4c}.notebook-head .close-x{width:30px;height:30px;background:#cabb9e7a;border-color:#806b4f66;color:#514132}.notebook-pages{flex:1;min-height:0;overflow-y:auto;margin-top:8px;scrollbar-color:#a38e6a transparent}.notebook-index{list-style:none;margin:0;padding:0}.notebook-index button{display:flex;width:100%;gap:18px;align-items:center;min-height:37px;background:none;border:0;text-align:left;padding:7px 0;font:13px/21px var(--pixel);color:#584b3e}.notebook-index button:disabled{opacity:.45}.notebook-index button>span{width:19px;flex:none;text-align:right;font:11px var(--mono)}.notebook-index strong{font-weight:400}.notebook-index i{display:block;width:56%;border-bottom:1px dashed #776959}.notebook-index button:hover:not(:disabled){background:#9b7a4030}.notebook-foot{font:10px/16px var(--mono);text-align:center;padding-top:8px;border-top:1px solid #77635066;color:#6c5c4c;position:relative;z-index:1}.notebook-foot button,.notebook-back{font:12px/20px var(--pixel);letter-spacing:.5px;color:#44372e;padding:3px 8px;margin:3px;border:1px solid #9b8767;background:#e5d8bc}.notebook-entry{padding:10px 8px 30px 18px;position:relative}.notebook-back{margin-left:0}.page-number{display:block;font:12px/24px var(--mono);margin-top:22px;color:#8b755c}.notebook-entry h3{font:25px/32px var(--pixel);margin:4px 0 20px}.notebook-entry>p{font:14px/24px var(--mono);color:#4f4036}.notebook-entry small{display:block;margin-top:30px;font:10px/18px var(--mono);color:#826d54}
.help-modal{width:min(520px,calc(100vw - 32px));height:calc(100svh - 32px);max-height:calc(100svh - 32px);overflow-y:auto;scrollbar-color:#66706c transparent}.help-steps{font:14px/21px var(--mono);margin:16px 0 20px;padding-left:24px;color:#d2d3d0}.help-steps li{padding-left:2px;margin-bottom:12px}.help-modal h3{font:500 16px/24px var(--pixel);letter-spacing:1px;margin:21px 0 7px}.help-muted{font:12px/18px var(--mono);color:var(--muted);margin-bottom:10px}.score-key{border:1px solid #ece6da26}.score-key>div{display:flex;justify-content:space-between;padding:8px 12px;font:14px/21px var(--pixel);letter-spacing:.5px;background:#ffffff04}.score-key>div+div{border-top:1px solid #ece6da15}.score-key .perfect{color:#ffe086}.score-key .excellent{color:#c6aae0}.score-key .great{color:#a6c7e7}.score-key .ok{color:#aed0a7}.score-key .weak{color:#e3a59c}.score-key .miss{color:#aeb4bb}.help-modal details{border-top:1px solid #ece6da26;padding:12px 0}.help-modal summary{cursor:pointer;font:14px/21px var(--pixel);color:#e2d9bf}.help-modal details p{font:12px/19px var(--mono);color:var(--muted);margin:10px 0 0}.help-article-link{display:block;font:12px/20px var(--pixel);margin-top:14px;text-decoration:underline;color:var(--muted)}
body[data-view="leaderboard"] .secondary-screen,body[data-view="archive"] .secondary-screen,body[data-view="packs"] .secondary-screen{width:100%;max-width:600px;padding:64px 20px 36px;height:100svh}
body[data-view="leaderboard"] .page-heading,body[data-view="archive"] .page-heading,body[data-view="packs"] .page-heading{height:50px;min-height:50px;margin-bottom:8px;padding:6px 8px;background:rgba(9,13,19,.78);backdrop-filter:blur(6px);border:1px solid #ece6da33;gap:12px}
body[data-view="leaderboard"] .page-heading h1,body[data-view="archive"] .page-heading h1,body[data-view="packs"] .page-heading h1{font:500 18px/27px var(--pixel);letter-spacing:1.8px}.page-heading .back{min-height:36px;padding:7px 10px;border:1px solid #ece6da33;font:12px/18px var(--pixel)}
.leaderboard-panel{height:calc(100% - 58px);overflow-y:auto;padding:16px;background:rgba(9,13,19,.78);backdrop-filter:blur(6px);scrollbar-color:#56676b transparent}.leaderboard-panel .tabs button{font:400 13px/19.5px var(--pixel);letter-spacing:1.3px}.leaderboard-panel .mode-tabs{margin-top:10px}.leaderboard-panel .day-selector{justify-content:space-between;margin:12px 0 8px}.day-selector .icon-button{width:32px;height:32px;padding:0;border:1px solid #ece6da33;background:#090d138c;font:22px/1 var(--pixel)}.leaderboard-panel .day-selector strong{font:13px/19.5px var(--pixel);letter-spacing:1px}.board-stat,.board-you,.board-average{font:13px/19.5px var(--mono);color:var(--muted);margin:10px 0}.board-you{color:var(--ink);margin:4px 0 12px}.score-distribution{height:260px;position:relative;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #ece6da33;background:repeating-linear-gradient(to top,transparent 0 calc(25% - 1px),#ffffff08 calc(25% - 1px) 25%)}.score-distribution svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.score-distribution polygon{fill:#c6b26a40}.score-distribution polyline{fill:none;stroke:#d8c987;stroke-width:.35;vector-effect:non-scaling-stroke}.score-distribution>span{font:12px/18px var(--mono);color:#aeb4bb88}.distribution-labels{font:10px/15px var(--mono);color:var(--muted);margin-top:6px}.board-average{margin:12px 0 24px}.list-heading{font:13px/20px var(--pixel);letter-spacing:1px;margin:0 0 10px}.leader-list li{height:32px;min-height:32px;padding:5px 0;font:12px/18px var(--mono)}.leader-list .rank{min-width:30px}.leader-list small{font:10px var(--mono)}.leader-list strong{font:500 15px var(--pixel)}.empty-ranking{font:12px/20px var(--mono);color:var(--muted);padding:20px 0 40px}.leaderboard-panel>.fine-print{font:10px/16px var(--mono);margin-top:24px}
.archive-panel{padding:16px;background:rgba(9,13,19,.78);backdrop-filter:blur(6px);height:calc(100% - 58px);overflow:auto;scrollbar-color:#56676b transparent}.archive-description{font:13px/19.5px var(--mono)!important;margin:0 0 14px!important}.archive-list{list-style:none;padding:0;margin:0}.archive-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:58px;border-top:1px solid #ece6da1f}.archive-list strong{font:13px/20px var(--pixel);letter-spacing:1px}.archive-list li>div{display:flex;gap:7px}.archive-direction{width:36px;height:36px;border:1px solid #ece6da33;background:#090d138c;display:grid;place-items:center}.archive-direction.sky{color:#efd9b0}.archive-direction.abyss{color:#95c7df}.archive-direction.past{color:#e3a59c}.archive-direction.future{color:#a8d3c8}.archive-direction .icon{width:18px;height:18px}.pack-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.pack-row{display:flex;align-items:center;width:100%;gap:16px;background:rgba(9,13,19,.78);backdrop-filter:blur(6px);border:1px solid #ece6da33;padding:17px 20px;min-height:62px}.pack-row strong{font:500 15px/22px var(--pixel);letter-spacing:1.4px}.pack-row>.icon{width:23px;height:23px;color:#e4d5b4}.pack-row:hover{background:#253841dc}
body[data-view="game"] .nickname,body[data-view="game"] .tools{display:none}.question-board{top:64px;background:rgba(9,13,19,.78);backdrop-filter:blur(6px)}.question-board h1{font-weight:500;margin:10px 0}.question-hint{font-size:13px;line-height:19.5px}.question-board.answered{padding-bottom:12px}.answer-result{background:rgba(9,13,19,.78)!important;backdrop-filter:blur(6px)}.answer-result h2{font-weight:500}.perfect .result-letters{color:#ffeb9b;-webkit-text-stroke:1px #5b410f;paint-order:stroke fill;text-shadow:2px 2px #5b410f,-1px -1px #5b410f,1px -1px #5b410f,-1px 1px #5b410f}.answer-result.excellent>header{background:#b098cc;color:#322440}.answer-result.great>header{background:#96b6d1;color:#1e3449}.answer-result.ok>header{background:#9dbf98;color:#25442c}.answer-result.weak>header{background:#d19588;color:#4b2f2c}.score-progress li.excellent{background:#b098cc}.score-progress li.great{background:#96b6d1}.score-progress li.ok{background:#9dbf98}.score-progress li.weak{background:#d19588}
@media(max-width:700px){
 .toolbar{top:10px;left:10px}.nickname{height:28px;padding:3px 8px;max-width:140px;letter-spacing:.65px}.sound-button{right:8px;top:8px;width:40px;height:40px;padding:8px}.notebook-button{right:48px;top:16px;width:24px;height:24px}.pass-badge{right:80px;top:10px;width:87.08px;height:34px;font-size:13px;padding:5px 9px}.leader-button{width:100%;font-size:12px}.help-link{height:28px}.language-label select{height:28px}.nickname-prompt{bottom:48px;min-height:45.25px;padding:7px 8px;grid-template-columns:14px 1fr auto}.nickname-prompt p{font-size:11px;line-height:15px}.nickname-actions .discreet{display:inline-flex;width:20px;min-height:25px;font-size:0;padding:0;border:0;background:none}.nickname-actions .discreet::after{content:'×';font:18px var(--pixel)}.nickname-actions .solid{min-height:28px}.pass-modal{padding:12px 4px}.ticket-top{padding:20px 22px}.ticket-bottom{padding:22px}.ticket-top ul{font-size:12px;line-height:18px}.ticket-top h2{font-size:30px;line-height:37px}.ticket-top h3{font-size:13px;line-height:20px}.plan{padding:8px;gap:8px}.plan strong{font-size:18px}.plan small{font-size:9px}.ticket-note{font-size:10px}.pass-edition{font-size:10px!important}.notebook-modal{padding:18px 16px 12px 18px}.notebook-head h2{font-size:16px;letter-spacing:0}.notebook-head{gap:8px}.notebook-head>.icon{width:22px}.help-steps{font-size:13px;line-height:20px}.help-modal{padding:16px}.help-modal h2{font-size:21px}.name-modal .name-description{font-size:12px}.name-line .btn{padding:10px 9px;font-size:12px}.reminder-modal h2{font-size:19px;letter-spacing:.7px}
 body[data-view="leaderboard"] .secondary-screen,body[data-view="archive"] .secondary-screen,body[data-view="packs"] .secondary-screen{padding:48px 16px 16px}.leaderboard-panel{padding:12px}.leaderboard-panel .mode-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.leaderboard-panel .mode-tabs button:last-child{grid-column:1/-1}.leaderboard-panel .mode-tabs button{font-size:12px;min-height:34px}.leaderboard-panel .period-tabs button{font-size:12px}.score-distribution{height:160px}.leaderboard-panel .day-selector{margin-top:10px}.archive-list li{min-height:56px}.archive-list li>div{gap:5px}.archive-direction{width:32px;height:32px}.archive-list strong{font-size:12px}.pack-row{min-height:60px;padding:16px}.pack-row strong{font-size:14px}
 .question-board{top:36px;padding:8px 12px 12px;width:calc(100% - 32px)}.question-board h1{font-size:20.28px;line-height:21.9px;margin:10px 0}.score-progress{height:22px;gap:8px}.score-progress li{width:14px;height:12px}.score-progress li .icon{width:10px;height:10px}.score-progress ol{gap:3px}.score-progress strong{font-size:20px}.question-count{font-size:9px;line-height:14px;margin-top:4px}.question-hint{font-size:11px;line-height:16px;margin:9px 0}.answer-result{bottom:16px}.answer-result>header{height:52px;padding:0 14px}.answer-result h2{font-size:25px}.answer-result header strong{font-size:40px}.answer-result h2>.icon{width:30px;height:30px}.result-body{padding:12px 14px 14px}.result-message{font-size:13px;line-height:20px}.result-body h3{font-size:10px;line-height:16px;margin:12px 0 6px}.answer-examples li{font-size:12px;line-height:25px;grid-template-columns:minmax(0,1fr) 84px 58px;gap:8px}.answer-examples{margin-bottom:12px}.answer-result .next{height:49.5px;font-size:13px}.answer-dock{bottom:16px}.answer-dock form{padding:12px}.answer-dock input{height:48px}.answer-dock form .btn{height:48px}
}
@media(max-width:370px){.altitude{font-size:9px}.nickname{max-width:125px;font-size:11px}.notebook-head h2{font-size:14px}.name-line .btn{font-size:10px;padding:9px}.plan small{font-size:8px}.pass-modal{width:calc(100vw - 16px)}.ticket-top,.ticket-bottom{padding-left:18px;padding-right:18px}}
body[data-view="archive"] .secondary-screen,body[data-view="packs"] .secondary-screen{max-width:560px}.archive-list li{min-height:63px}.archive-direction{width:46px;height:44px;border:2px solid #090d13e6;box-shadow:inset 0 -3px #090d132b}.archive-direction.sky{background:#dccfb8;color:#141a22}.archive-direction.abyss{background:#304b5b;color:#ece6da}.archive-direction.past{background:#b29b79;color:#291d11}.archive-direction.future{background:#3e5f67;color:#ece6da}.archive-list strong{font-weight:500}
body[data-view="packs"] .secondary-screen{display:flex;flex-direction:column;justify-content:center}.pack-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:16px;background:rgba(9,13,19,.78);border:1px solid #ece6da33;backdrop-filter:blur(6px)}.pack-row{height:108px;padding:12px 8px;border:2px solid #090d13e6;box-shadow:inset 0 -4px #090d132b,0 3px #090d1380;flex-direction:column;justify-content:center;gap:7px;backdrop-filter:none}.pack-row strong{font:400 12px/16px var(--pixel);letter-spacing:1px;text-align:center}.pack-row>.icon{width:34px;height:34px;color:inherit}.pack-row:hover{filter:brightness(1.1)}.pack-row.history{background:#b4645a;color:#fff3e8}.pack-row.geography{background:#24506a;color:#dceef6}.pack-row.pop{background:#6b4e8a;color:#efe1ff}.pack-row.food{background:#d9963f;color:#2a1d10}.pack-row.sport{background:#3f7d4e;color:#e3f6df}.pack-row.music{background:#2f6f6a;color:#d4f2e8}.pack-row.nature{background:#7a8f3e;color:#f0f2cb}.pack-row.internet{background:#3b4a8f;color:#e2e7ff}.pack-row.everyday{background:#efd9b0;color:#2a1d10}
@media(max-width:700px){.archive-direction{width:46px;height:44px}.archive-list li>div{gap:6px}.archive-list strong{font-size:12px}.archive-panel{padding:16px}.pack-row{height:96px;padding:9px 6px;gap:6px}.pack-row strong{font-size:11px;line-height:14px;letter-spacing:.6px}.pack-row>.icon{width:32px;height:32px}.pack-list{gap:8px}.pack-row:nth-child(-n+6){min-height:92px}}
@media(max-width:370px){.archive-direction{width:38px;height:40px}.archive-list li>div{gap:4px}.archive-list strong{font-size:11px}.pack-row strong{font-size:10px}}
.archive-description{text-align:left!important}.archive-panel,.leaderboard-panel,.notebook-pages,.help-modal{scrollbar-width:none}.archive-panel::-webkit-scrollbar,.leaderboard-panel::-webkit-scrollbar,.notebook-pages::-webkit-scrollbar,.help-modal::-webkit-scrollbar{display:none}.pack-row.nature strong,.pack-row.internet strong,.pack-row.everyday strong{max-width:105px}.pack-row.internet strong{max-width:90px}
@media(min-width:701px){body[data-view="game"] .nickname{display:flex;opacity:.7}body[data-view="game"] .tools{display:block}.question-board h1{font-size:34px;line-height:36.72px}}
.mode-intro{position:absolute;z-index:6;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:#16232c35;animation:intro-away 1.4s both;pointer-events:none}.mode-intro>.icon{width:36px;height:36px;color:#f4e9cb}.mode-intro p{font:500 26px/34px var(--pixel);max-width:420px;text-align:center;color:#fff2d6;text-shadow:2px 2px #3d3b35}.with-intro .question-board,.with-intro .answer-dock{opacity:0;animation-delay:1.4s}.with-intro .question-board{animation:question-reveal .01s 1.4s forwards,board-sway 3.8s 1.4s ease-in-out infinite}.with-intro .answer-dock{animation:dock-reveal .2s 1.4s forwards}.answer-result header strong .pixel-number{height:28px;width:auto;max-width:116px;vertical-align:middle}.answer-result.excellent{border-color:#b99be0}.answer-result.ok{border-color:#6ac38d}.answer-result.ok>header{background:#6ac38d;color:#102d20}.excellent .result-letters{color:#e9d7ff;-webkit-text-stroke:1px #342247;paint-order:stroke fill;text-shadow:2px 2px #342247}.excellent>header{background:linear-gradient(110deg,#b999e4,#c6a5ef,#8d67bc)!important}.tiered-result .answer-examples li{grid-template-columns:85px minmax(0,1fr) 90px 56px;gap:8px}.history-result .answer-examples li{grid-template-columns:85px minmax(0,1fr) 48px}.answer-examples .example-tier{display:flex;align-items:center;gap:3px;text-transform:capitalize;font-size:11px;overflow:visible!important}.example-tier .icon{width:11px;height:11px}.example-tier.perfect{color:#ffe086}.example-tier.excellent{color:#bfa0e3}.example-tier.great{color:#84b4db}.example-tier.ok{color:#6ac38d}.example-tier.weak{color:#db8a78}.tiered-result .example-answer{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.result-letters span{display:inline-block}
@keyframes intro-away{0%,70%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes question-reveal{to{opacity:1}}
@keyframes dock-reveal{to{opacity:1}}
@media(max-width:700px){.mode-intro p{font-size:22px;line-height:28px;max-width:290px}.tiered-result .answer-examples li{grid-template-columns:85px minmax(0,1fr) 60px 54px;gap:5px}.history-result .answer-examples li{grid-template-columns:85px minmax(0,1fr) 42px}.tiered-result .example-answer{white-space:normal;line-height:20px;padding:2px 0}.tiered-result h2{font-size:24px}.tiered-result h2>.icon{width:24px;height:24px}.answer-result header strong .pixel-number{height:28px;max-width:100px}.answer-result header strong{line-height:1}.tiered-result .answer-examples .example-tier{font-size:10px}}
.answer-dock form{flex-wrap:wrap}.answer-dock input{flex-basis:0}.answer-error{flex-basis:100%;font:12px/18px var(--mono);color:#e3a59c;margin:0 0 8px;text-align:left}
.observation-screen{height:100svh}.observation{position:absolute;inset:0;width:100%;height:100%;border:0;background:#090d1310;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;color:#fff0c8;text-shadow:2px 2px #262635}.observation>span{font:500 30px/40px var(--pixel);letter-spacing:3px}.observation>strong{display:flex;align-items:baseline;gap:8px;font:20px var(--pixel)}.observation .pixel-number{height:42px;width:auto}.observation>small{font:12px/18px var(--pixel);letter-spacing:2px;opacity:.7}.observation strong small{font-weight:400}body[data-view="observation"] .identity,body[data-view="observation"] .notebook-button{display:none}
.summary-layout{width:min(960px,100%);margin:0 auto;padding:64px 20px 36px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start;gap:12px}.summary-card,.summary-ranking,.summary-records,.summary-name{min-width:0;padding:16px;background:rgba(9,13,19,.85);border:1px solid #ece6da33;backdrop-filter:blur(6px)}.summary-label{font:12px/18px var(--pixel);letter-spacing:1.8px;color:var(--muted);display:flex;align-items:center;gap:6px}.summary-label .icon{width:15px;height:15px}.final-score{display:flex;align-items:baseline;gap:10px;height:57px;margin:12px 0}.final-score>.pixel-number{width:auto;height:49px;max-width:170px}.final-score>span{font:30px/1 var(--pixel);color:var(--muted)}.final-score small{font:14px/21px var(--pixel);letter-spacing:1.2px;margin-left:5px}.summary-answers{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:6px}.summary-answers>li{border-left:4px solid #6d747b;background:linear-gradient(90deg,#aeb4bb09,transparent)}.summary-answers>.perfect{border-color:#ffe086;background:linear-gradient(90deg,#ffe08620,transparent)}.summary-answers>.excellent{border-color:#bfa0e3;background:linear-gradient(90deg,#bfa0e320,transparent)}.summary-answers>.great{border-color:#84b4db}.summary-answers>.ok{border-color:#6ac38d}.summary-answers>.weak{border-color:#db8a78}.summary-answers summary{display:flex;align-items:center;gap:8px;min-height:37.5px;padding:0 6px 0 8px;cursor:pointer;list-style:none}.summary-answers details{min-width:0}.summary-answer-copy>strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-answers summary::-webkit-details-marker{display:none}.summary-answer-copy{min-width:0;flex:1;display:block;font:11px/18px var(--mono);color:var(--muted)}.summary-answer-copy>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-answer-copy>strong{display:block;font-weight:400;color:var(--ink)}.summary-tier{display:flex;align-items:center;white-space:nowrap;gap:4px;font:10px/15px var(--pixel);letter-spacing:.5px;color:var(--muted)}.summary-tier .icon{width:12px;height:12px}.perfect .summary-tier{color:#ffe086}.excellent .summary-tier{color:#bfa0e3}.great .summary-tier{color:#84b4db}.ok .summary-tier{color:#6ac38d}.weak .summary-tier{color:#db8a78}.summary-points{font:20px/25px var(--pixel);min-width:44px;text-align:right}.summary-chevron{font:10px var(--mono);color:var(--muted)}.summary-answer-detail{padding:12px;font:11px/18px var(--mono);color:var(--muted);border-top:1px solid #ece6da22}.summary-answer-detail p+p{margin-top:8px}.next-mode{width:100%;display:flex;flex-direction:column;align-items:center;gap:9px;justify-content:center;min-height:88px;border:2px solid #090d13e6;box-shadow:inset 0 -4px #090d132b;color:var(--ink)}.next-mode.sky{background:#dccfb8;color:#2a1d10}.next-mode.abyss{background:#304b5b}.next-mode.past{background:#b4645a}.next-mode.future{background:#2f6f6a}.next-mode strong{font:500 23px/28px var(--pixel);letter-spacing:1px}.next-mode strong .icon{width:25px;height:25px}.next-mode small{font:12px/18px var(--mono);opacity:.8}.summary-actions{display:flex;gap:10px;margin-top:12px}.summary-actions>.btn{flex:1;min-height:52px;font:14px/20px var(--pixel);border-width:1px;padding:11px}.summary-actions>.btn:not(.discreet){box-shadow:0 3px #80745e}.daily-checklist{list-style:none;display:flex;justify-content:center;gap:6px;margin:14px 0 12px;padding:0}.daily-checklist li{font:11px/16px var(--pixel);border:1px solid #ece6da44;padding:6px 8px;color:var(--muted)}.daily-checklist .selected{background:#ece6da20;color:var(--ink)}.summary-reminder{display:flex;align-items:center;gap:6px;margin:0 auto;padding:3px 6px;font:14px/20px var(--pixel);letter-spacing:1.2px;border:2px solid var(--cream);background:#090d138c;box-shadow:0 3px #80745e;color:var(--cream)}.home-screen-guide{display:flex;margin:13px auto 12px;font-size:12px;min-height:42px;border-width:1px}.summary-home{display:flex;width:100%;font-size:12px;min-height:41px;border-width:1px}.summary-sidebar{min-width:0;display:flex;flex-direction:column;gap:12px}.summary-name{display:flex;align-items:center;gap:8px;padding:6px 7px 6px 12px;border-left:3px solid var(--cream)}.summary-name>span{min-width:0;flex:1;font:11px/16px var(--mono);color:var(--muted)}.summary-name strong{display:block;font:15px/20px var(--pixel);color:var(--ink);overflow:hidden;text-overflow:ellipsis}.summary-name .icon{width:14px;height:14px}.summary-name .btn{min-height:37px;font-size:11px;padding:7px 10px;border-width:1px;letter-spacing:1px}.summary-ranking h2{font:600 30px/39px var(--mono);margin-top:10px}.local-ranking-label{font:12px/18px var(--mono);color:var(--gold);margin:0 0 18px}.summary-ranking .score-distribution{height:190px}.summary-ranking h3{font:12px/18px var(--pixel);letter-spacing:1px;margin:20px 0 12px}.summary-local-note{font:11px/18px var(--mono);color:var(--muted);margin:20px 0}.summary-ranking .btn{font-size:12px;border-width:1px;min-height:42px}.summary-records{display:grid;grid-template-columns:1fr 1fr;gap:16px}.summary-records>div{display:flex;flex-direction:column;gap:5px}.summary-records span{font:12px/18px var(--pixel);color:var(--muted)}.summary-records .icon{width:14px;height:14px}.summary-records strong{font:25px/30px var(--pixel)}.summary-records small{font:10px var(--mono)}
@media(max-width:700px){.summary-layout{grid-template-columns:minmax(0,1fr);padding:48px 16px 24px}.summary-answers summary{min-height:37.5px;gap:6px}.summary-tier{font-size:10px}.summary-points{font-size:21px;min-width:44px}.final-score{margin-bottom:12px}.summary-actions .btn{min-height:64px;font-size:14px;letter-spacing:1px}.summary-reminder{font-size:14px;letter-spacing:.7px}.daily-checklist li{padding:6px;font-size:10px}.summary-ranking .score-distribution{height:200px}}
.share-modal{width:min(1000px,calc(100% - 48px));max-width:none;max-height:calc(100svh - 48px);padding:20px;background:#090f17;border:1px solid #ece6da44;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;overflow:auto}.share-modal:not([open]){display:none}.share-modal::backdrop{background:#04070bb8}.share-preview{position:relative;border:1px solid #ece6da44;min-width:0;min-height:620px;display:flex;align-items:center;justify-content:center;padding:16px 16px 50px;background:repeating-linear-gradient(0deg,#ffffff04 0 1px,transparent 1px 4px)}.share-preview canvas{display:block;width:100%;max-height:580px;object-fit:contain;image-rendering:pixelated;border:1px solid #ece6da44;box-shadow:6px 6px #0008}.share-preview>p{position:absolute;bottom:8px;left:12px;font:12px/18px var(--pixel)}.share-preview>p span{font:11px var(--mono);color:#888d95;margin-left:8px}.share-controls{min-width:0}.share-controls .dialog-title{margin-bottom:14px;height:40px}.share-controls .dialog-title h2{font:22px/30px var(--pixel);letter-spacing:2px}.share-controls .close-x{height:40px;width:40px;border:1px solid #ece6da44;background:#090d138c;color:var(--ink)}.share-scope,.share-exports{display:flex;gap:6px}.share-scope .btn,.share-exports .btn{flex:1;min-width:0;font:13px/19.5px var(--pixel);letter-spacing:1.2px;min-height:42px;padding:10px 14px}.share-scope [aria-pressed=true]{background:var(--cream);color:#1c222a}.share-controls>h3{font:12px/18px var(--pixel);letter-spacing:1.8px;margin:14px 0 12px}.share-networks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 2px}.share-network{display:flex;align-items:center;gap:7px;flex-direction:column;border:0;background:transparent;padding:4px 0 2px;font:11px/16.5px var(--pixel);min-height:69.5px}.social-symbol{width:40px;height:40px;display:grid;place-items:center;color:#fff;background:var(--social-color);font:600 30px/40px var(--pixel);clip-path:polygon(10% 0,90% 0,90% 10%,100% 10%,100% 90%,90% 90%,90% 100%,10% 100%,10% 90%,0 90%,0 10%,10% 10%)}.share-network[aria-pressed=true] .social-symbol{outline:2px solid var(--cream);outline-offset:3px;clip-path:none}.share-reveal{display:flex;align-items:flex-start;gap:10px;margin:14px 0;font:12px/19px var(--mono)}.share-reveal input{margin:4px 0 0;width:16px;height:16px;accent-color:var(--cream)}.share-reveal>span{flex:1}.share-reveal small{display:block;font:11px/17px var(--mono);color:#818995;margin-top:4px}.share-primary{width:100%;height:54px;letter-spacing:1.3px}.share-primary>.icon{width:27px;height:27px}.share-exports{margin-top:14px}.share-exports .btn{font-size:11px;min-height:44px;letter-spacing:.5px;padding:8px 10px}.share-note{font:12px/18px var(--mono);color:#aeb4bb;text-align:center;margin:14px 0}.share-message{font:13px/20px var(--pixel);margin-top:14px}.share-message summary{cursor:pointer}.share-message textarea{font:12px/20px var(--mono);background:#101923;color:var(--ink);border:1px solid #ece6da33;resize:vertical;min-height:160px;width:100%;margin-top:10px;padding:12px}.share-feedback{font:12px/17px var(--mono);min-height:17px;margin-top:10px;color:var(--gold)}
@media(max-width:700px){.share-modal{width:100%;max-height:94svh;margin:auto 0 0;padding:14px 16px 12px;display:flex;flex-direction:column;gap:0;overflow:auto}.share-controls{display:contents}.share-controls .dialog-title{order:-2;flex:none}.share-preview{order:-1;flex:none;min-height:0;margin-bottom:14px;padding:16px 16px 34px}.share-preview canvas{max-height:300px;max-width:100%;width:auto}.share-networks{display:flex;overflow-x:auto;overscroll-behavior-x:contain;padding:0 0 6px;gap:2px}.share-network{width:68px;flex:none}.share-reveal{margin-top:12px}.share-primary{flex:none}.share-exports{flex:none}.share-note{flex:none}.share-feedback{flex:none}.share-scope{flex:none}.share-modal .share-preview canvas{width:100%;height:auto;max-height:300px;object-fit:contain}}
.share-modal label.share-reveal{display:flex;align-items:flex-start;gap:10px;margin:14px 0;font:12px/19px var(--mono);letter-spacing:0}.share-modal .share-reveal input{flex:none;width:16px;height:16px;min-width:16px;padding:0;margin:4px 0 0;appearance:auto;accent-color:var(--cream)}.social-symbol svg{width:32px;height:32px}.share-network[data-value="Snapchat"] .social-symbol{color:#111820}
@media(max-width:700px){.share-networks{flex:none}.share-reveal,.share-controls>h3,.share-message{flex:none}.share-modal label.share-reveal{margin-top:12px}}
.day-streak{margin-right:auto;align-self:center;display:flex;align-items:center;gap:5px;border:1px solid #b1945266;background:#090d13aa;color:#d6d4c9;padding:4px 6px;font:11px/16px var(--pixel);letter-spacing:1px}.day-streak>.icon{color:#ffc64d;width:17px;height:17px}.mode-card.completed{background:#14232ae8;color:var(--muted);border:1px solid #ece6da40;border-top:5px solid #5f9d9a;box-shadow:none;gap:4px;padding:12px}.mode-card.completed.sky{border-top-color:#dccfb8}.mode-card.completed.abyss{border-top-color:#304b5b}.mode-card.completed.past{border-top-color:#b4645a}.mode-card.completed h3{font:14px/20px var(--pixel);font-weight:400;letter-spacing:1px}.mode-card.completed h3 .icon{width:15px;height:15px}.mode-card.completed p{display:flex;align-items:baseline;color:var(--ink)}.mode-card.completed p>.pixel-number{width:auto;height:16px}.mode-card.completed small{font:10px/16px var(--pixel)}.completed-actions{display:flex;justify-content:center;gap:5px}.completed-actions .btn{min-height:28px;height:28px;padding:4px 7px;letter-spacing:.5px;font:11px/18px var(--pixel);border:0;background:#666b6b;color:#ece6da;box-shadow:none}.completed-actions .btn.solid{background:var(--cream);color:#20262d}.completed-actions .btn .icon{width:18px;height:18px}
@media(max-width:700px){.has-played .home-menu{top:auto;bottom:54px}.has-played .mode-card{min-height:106px}.has-played .mode-card:not(.completed){padding:10px 12px}.has-played .mode-card.completed{min-height:106px;padding:10px}.has-played .mode-card .mode-name{font-size:27px;line-height:28px}.has-played .mode-card>.icon{height:28px;width:28px;margin-bottom:3px}.has-played .mode-description{line-height:15px;margin-top:5px}.has-played .home-footer{position:fixed}}
@media(max-width:700px){.has-played .mode-card:not(.compact-card){height:auto;min-height:106px}.has-played .mode-card:not(.completed){padding:11.5px 12px}.has-played .share-button{display:inline-flex}.has-played .home-footer{position:absolute;top:auto;left:0;bottom:-38px;margin:0}.has-played .primary-actions .btn{font-size:12px;letter-spacing:.4px;white-space:nowrap}}
@media(max-width:700px){.has-played .leader-button{width:auto;min-width:0;flex:1.13}.has-played .share-button{width:auto;min-width:0;flex:1}}


/* Keep the pause/return flow visible while playing on touch screens. */
.beta-badge{cursor:default}
body[data-view="game"] .tools{display:flex}
body[data-view="game"] .notebook-button{width:auto;min-width:44px;min-height:44px;display:inline-flex;align-items:center;gap:7px;padding:8px 10px;font:13px var(--pixel);background:#12222ee8;border:1px solid #ece6da66}
.reminder-modal .reminder-consent{display:flex;gap:10px;align-items:flex-start;font:12px/1.6 var(--mono);margin:18px 0;text-align:left;letter-spacing:0}
.reminder-modal .reminder-consent input{width:18px;height:18px;flex:none;padding:0;margin:2px 0 0;appearance:auto}
.reminder-modal .reminder-feedback{font:12px/1.6 var(--mono);margin:14px 0;min-height:2em}
.reminder-modal small{display:block;margin:14px 0;font:11px/1.7 var(--mono)}
.reminder-modal a{color:var(--sky)}
.reminder-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media(max-width:700px){body[data-view="game"] .question-board{top:66px}body[data-view="game"] .sound-button{display:none}body[data-view="game"] .toolbar{align-items:flex-start}}

/* Translations can be wider and taller than the original English copy. */
.question-board h1 span{max-width:100%;overflow-wrap:anywhere;hyphens:auto}
.answer-result>header{min-height:52px;height:auto;padding-top:7px;padding-bottom:7px;gap:8px}
.answer-result h2{min-width:0;white-space:normal;line-height:1.05}
.answer-result h2>.icon{flex-shrink:0}
.result-letters{flex-wrap:wrap;min-width:0;overflow-wrap:anywhere}
.answer-result header p{flex-shrink:0}
.example-tier{min-width:0;overflow-wrap:anywhere}
.game-screen.stacked-game{height:auto;min-height:var(--app-height,100svh);padding:66px 0 20px;display:flex;flex-direction:column;align-items:center;gap:18px;overflow:visible}
body[data-view="game"] .stacked-game .question-board,.stacked-game .answer-result,.stacked-game .answer-dock{position:relative;left:auto;top:auto;bottom:auto;flex-shrink:0;margin:0;transform:none!important;animation:none!important;opacity:1}
.stacked-game .answer-dock{margin-top:auto}
.stacked-game .question-board{transform-origin:center}
.email-language-note{display:block;margin-top:8px}
@media(max-width:700px){.answer-result h2{font-size:clamp(19px,5.8vw,25px)}.answer-result>header{padding-inline:10px}.example-tier{hyphens:auto}.pack-row strong{overflow-wrap:anywhere;hyphens:auto}}

/* Wonderhop: an independent wordmark and a field-guide palette. */
:root {
  --ink: #f1f3ed;
  --muted: #b7c4c8;
  --cream: #d9e5dd;
  --night: #202940;
  --gold: #bdce9c;
  --brand-ink: #202940;
  --brand-paper: #e0e8e9;
  --brand-focus: #f1f5df;
  --brand-copper: #bf7754;
  accent-color: var(--gold);
  caret-color: var(--cream);
  scrollbar-color: #819b9e #202940;
}

::selection { background: #d9e5dd; color: #202940; }
button:focus-visible, a:focus-visible, select:focus-visible,
summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline-color: var(--brand-focus);
}

.logo {
  top: 92px;
  width: min(600px, calc(100% - 48px));
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--brand-ink);
  font-size: 0;
  line-height: 1;
  -webkit-text-stroke: 0;
  filter: none;
}
.brand-wordmark { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.logo .brand-tagline {
  display: block;
  font: 600 11px/18px var(--mono);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  animation: none;
  transform: none;
}

.sky { --mode-surface: #a7d4e8; --mode-ink: #172b3d; --mode-accent: #a7d4e8; }
.abyss { --mode-surface: #544c78; --mode-ink: #f4f0ff; --mode-accent: #c4b8ee; }
.past { --mode-surface: #e6b087; --mode-ink: #342417; --mode-accent: #e6b087; }
.future { --mode-surface: #bdce9c; --mode-ink: #23321b; --mode-accent: #bdce9c; }
.mode-card[class], .mode-choice[class], .archive-direction[class], .next-mode[class] {
  background: var(--mode-surface);
  color: var(--mode-ink);
}
.mode-description, .mode-choice small, .next-mode small { opacity: 1; }
.mode-card.completed[class] {
  background: #20293aeF;
  color: var(--mode-accent);
  border-top-color: var(--mode-accent);
}
.mode-card.completed p { color: var(--ink); }
.completed-actions .btn { background: #3d4b5c; color: #f1f3ed; }
.completed-actions .btn.solid { background: var(--mode-accent); color: #202940; }
.btn.solid { background: var(--cream); border-color: var(--cream); color: #202940; box-shadow: 0 3px #617775; }
.btn.solid:hover { background: #eff5ed; border-color: #eff5ed; }
.modal .btn.solid { box-shadow: 0 3px #617775; }

.pass-badge {
  color: var(--brand-ink);
  background: var(--brand-paper);
  border-color: var(--brand-ink);
  box-shadow: 0 3px #657c80;
  animation: none;
}
.pass-ticket {
  background: var(--brand-paper);
  color: var(--brand-ink);
  border-radius: 0;
  box-shadow: 0 7px #101b2599;
}
.pass-ticket::after { display: none; }
.ticket-top { border-bottom-color: #647b8580; }
.ticket-top h2 { display: flex; align-items: center; gap: 10px; }
.ticket-top h2 .icon { width: 28px; height: 28px; }
.plan { background: #f2f6f54d; border-color: #647b8570; }
.plan.chosen { background: #f4f7f3; border-color: #344b5e; box-shadow: none; }
.plan input { border-color: #344b5e; }
.plan input:checked::before { background: #344b5e; }
.modal .ticket-button { background: #344b5e; color: #f4f7f3; box-shadow: 0 3px #202940; }
.modal .ticket-button:hover { background: #435f70; }
.ticket-note { color: #425568; }
.pass-ticket :focus-visible { outline-color: #344b5e; }
.day-streak { border-color: #9eaf8470; color: #e9efdf; }
.day-streak > .icon { color: #bdce9c; }
.score-distribution polygon { fill: #a7d4e840; }
.score-distribution polyline { stroke: #a7d4e8; }
.summary-reminder { box-shadow: 0 3px #617775; }

@media (max-width: 700px) {
  .logo { top: 108px; width: calc(100% - 44px); max-width: 400px; gap: 12px; }
  .logo .brand-tagline { font-size: 9px; line-height: 15px; letter-spacing: 1px; }
  .pass-badge { width: 98px; padding-inline: 7px; white-space: nowrap; }
  body[data-view="home"] .altitude { display: none; }
}
@media (max-width: 360px) {
  .logo { width: calc(100% - 32px); }
  .pass-badge { right: 75px; width: 95px; font-size: 12px; }
  body[data-view="home"] .nickname { max-width: 118px; }
}
@media (max-width: 700px) {
  body[data-view="home"] .beta-badge { width: auto; min-width: 98px; max-width: 145px; height: auto; min-height: 34px; white-space: normal; line-height: 1.15; text-align: center; justify-content: center; }
}
/* Hop Pass keeps the existing pixel typography and four-direction palette. */
.pass-button{border:1px solid #eee6d5;background:#1c3443;color:#eee6d5;cursor:pointer;min-height:36px;padding:8px 12px;font:inherit}
.daily-free-label{font-size:10px;letter-spacing:.08em;opacity:.8}
.pass-modal{width:min(690px,calc(100vw - 28px));max-width:690px;padding:26px;max-height:calc(100dvh - 28px);overflow:auto;background:#10212c;border:1px solid #8aa4ae;box-shadow:0 6px #050b10}
.pass-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.pass-heading p{font-size:10px;letter-spacing:.18em;margin:0 0 8px}
.pass-heading h2{font-family:"Pixelify Sans",monospace;font-size:40px;line-height:1;margin:0}
.pass-benefits{padding:15px 0;border-block:1px solid #eee6d54d;line-height:1.8;font-size:12px}
.pass-plans{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.pass-plan{padding:18px;border:2px solid #a7d4e8;background:#12222e;display:flex;flex-direction:column;gap:12px;min-width:0}
.pass-plan.lifetime{border-color:#bdce9c;background:#1b2c2c}
.pass-plan h3,.pass-plan h2{margin:0;font-size:20px}
.pass-price{font-family:"Pixelify Sans",monospace;font-size:34px;line-height:1.2!important;margin:0!important;overflow-wrap:anywhere}
.pass-price small{display:block;font-family:"IBM Plex Mono",monospace;font-size:12px;margin-top:6px}
.pass-plan-note{font-size:11px;line-height:1.7;flex:1;margin:0}
.pass-plan .btn{white-space:normal;min-height:48px;font-size:12px;width:100%;line-height:1.5}
.pass-fine,.pass-email-help{font-size:11px!important;line-height:1.8!important;opacity:.85}
.pass-fine a{color:inherit;text-decoration:underline}
.pass-message,.pass-pending{padding:12px;border:1px solid #a7d4e8;line-height:1.7;font-size:12px;overflow-wrap:anywhere}
.pass-message{background:#213844}
.pass-identity{font-size:11px;overflow-wrap:anywhere;margin:18px 0 10px}
.pass-account-actions{display:flex;flex-wrap:wrap;gap:8px}
.pass-account-actions .btn{white-space:normal;font-size:11px}
.pass-active{text-align:center;padding:20px 8px}
.pass-active>span{font-size:42px;color:#bdce9c}
.pass-active h3{font-size:20px;margin:10px 0}
.pass-active p{font-size:12px}
#account-login-form{margin:20px 0;display:grid;gap:12px}
#account-login-form label{font-size:12px}
#account-email{font:16px/1.5 "IBM Plex Mono",monospace;background:#12222e;color:#eee6d5;border:2px solid #a7d4e8;min-width:0;width:100%;padding:12px}
.pass-modal .wide{white-space:normal;line-height:1.5}
@media(max-width:540px){.pass-modal{padding:18px}.pass-plans{grid-template-columns:1fr}.pass-plan{padding:14px;gap:10px}.pass-heading h2{font-size:34px}.pass-price{font-size:30px}.daily-free-label{font-size:9px}.pass-button{font-size:10px;padding:6px 9px}.pass-modal .btn{min-height:44px}}

/* A readable field guide below the existing pixel-world home screen. */
body[data-view="home"] .toolbar,
body[data-view="home"] .home-screen > .nickname-prompt,
body[data-view="home"] .home-screen > .records-aside { position: absolute; }

.home-guide-link { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 9px; background: #090d1399; font: 11px/1.5 var(--mono); white-space: nowrap; }
.home-guide-link:hover { color: #bdce9c; }

.home-guide {
  position: relative;
  z-index: 2;
  background: #172331;
  color: #edf1e9;
  border-top: 4px solid #819b9e;
  font: 400 14px/1.9 var(--mono);
}
.home-guide[hidden], body[data-view]:not([data-view="home"]) .home-guide { display: none; }
.guide-inner { width: min(1120px, calc(100% - 80px)); margin-inline: auto; }
.home-guide h2, .home-guide h3, .home-guide p, .home-guide figure { margin: 0; }
.home-guide h2, .home-guide h3 { font-family: var(--pixel); font-weight: 500; text-wrap: balance; }
.home-guide h2 { font-size: clamp(32px, 3.5vw, 46px); line-height: 1.1; letter-spacing: -.4px; }
.home-guide h3 { font-size: 29px; line-height: 1.2; }
.home-guide p { color: #bfccd1; }
.home-guide p + p { margin-top: 18px; }
.home-guide strong { color: #edf1e9; font-weight: 600; }
.home-guide [id] { scroll-margin-top: 40px; }
.guide-block { padding-block: 76px; border-bottom: 1px solid #82949f40; }
.home-guide .guide-eyebrow { font: 500 11px/1.6 var(--mono); letter-spacing: 1.6px; text-transform: uppercase; color: #bdce9c; margin-bottom: 16px; }
.guide-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding-block: 88px; }
.guide-intro h2 { font-size: clamp(38px, 4.3vw, 58px); }
.guide-intro h2 span { color: #a7d4e8; }
.guide-contents { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 24px; font-size: 12px; }
.guide-contents a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid #819b9e66; }
.home-guide a:hover, .guide-text-link:hover { color: #bdce9c; }
.home-guide .context-link, .article-panel .context-link { color: #a7d4e8; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.home-guide .context-link:hover, .article-panel .context-link:hover { color: #bdce9c; }
.mode-guide-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mode-guide-link:hover { color: var(--cream); }
.article-panel .mode-guides-label { margin-top: 24px; font-size: 11px; color: var(--muted); }
.guide-section-heading { max-width: 720px; margin-bottom: 36px; }
.guide-section-heading > p:last-child:not(:first-child) { margin-top: 18px; }
.guide-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; list-style: none; margin: 0 0 24px; padding: 0; counter-reset: steps; }
.guide-step-number { display: block; color: #a7d4e8; font: 32px/1 var(--pixel); margin-bottom: 16px; }
.guide-steps h3 { font-size: 25px; margin-bottom: 12px; }
.guide-text-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; padding: 8px 0; color: #edf1e9; background: transparent; border: 0; border-bottom: 1px solid #819b9e; font: inherit; font-size: 12px; cursor: pointer; }
.guide-mode { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; padding-block: 38px; }
.guide-mode + .guide-mode { margin-top: 20px; }
.guide-mode:nth-of-type(even) .guide-scene { order: 2; }
.guide-mode .guide-eyebrow { color: var(--mode-accent); font-size: 10px; letter-spacing: 1px; }
.guide-mode h3 { font-size: 36px; margin-bottom: 20px; }
.guide-mode-copy { min-width: 0; }
.guide-scene { align-self: center; min-width: 0; }
.guide-scene img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; image-rendering: pixelated; border: 1px solid #a8bcc252; box-shadow: 8px 8px 0 #0e1823; }
.guide-scene figcaption { display: flex; gap: 14px; align-items: baseline; color: #a9bdc5; font: 11px/1.7 var(--mono); margin-top: 22px; }
.guide-scene figcaption span { color: var(--mode-accent); font: 17px/1.3 var(--pixel); text-transform: uppercase; letter-spacing: 1px; }
.guide-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 46px; padding: 10px 18px; margin-top: 24px; border: 1px solid var(--mode-accent, #bdce9c); color: var(--mode-accent, #bdce9c); background: transparent; font: 18px/1.3 var(--pixel); text-align: left; cursor: pointer; }
.guide-button:hover { background: var(--mode-surface, #bdce9c); color: var(--mode-ink, #172331) !important; }
.guide-button span { font: 20px/1 var(--mono); }
.guide-origin, .guide-more, .guide-faq { display: grid; grid-template-columns: .85fr 1.15fr; gap: 76px; }
.guide-origin h2 { color: #e6b087; }
.guide-origin-path { display: flex; flex-wrap: wrap; gap: 12px 22px; border-top: 1px solid #82949f40; padding-top: 24px; margin-top: 24px; }
.guide-origin-path span { font: 18px/1.5 var(--pixel); color: var(--mode-accent); }
.guide-more { align-items: start; }
.guide-more h2 { margin-bottom: 24px; }
.guide-play-options { border-left: 2px solid #bdce9c; padding-left: 30px; }
.guide-play-options h3 { margin-bottom: 16px; }
.guide-play-options .guide-text-link { margin-top: 16px; }
.guide-faq-list { border-top: 1px solid #82949f55; }
.guide-faq details { border-bottom: 1px solid #82949f55; }
.guide-faq summary { position: relative; list-style: none; padding: 22px 32px 22px 0; cursor: pointer; font: 500 14px/1.7 var(--mono); }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { content: '+'; position: absolute; right: 4px; top: 23px; font: 20px/1 var(--mono); color: #bdce9c; }
.guide-faq details[open] summary::after { content: '−'; }
.guide-faq details[open] summary { color: #bdce9c; }
.guide-faq details p { padding-bottom: 24px; font-size: 13px; }
.guide-closing { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 72px 0 64px; }
.guide-closing > img { display: block; width: 240px; max-width: 80%; height: auto; }
.guide-closing > p { font: 22px/1.4 var(--pixel); margin-top: 24px; }

@media (max-width: 960px) {
  .guide-inner { width: calc(100% - 48px); }
  .guide-intro, .guide-origin, .guide-more, .guide-faq { gap: 32px; }
  .guide-mode { gap: 36px; }
  .guide-steps { gap: 26px; }
}
@media (max-width: 700px) {
  body[data-view="home"] .home-footer { position: absolute; }
  .home-guide { font-size: 13px; line-height: 1.85; }
  .guide-inner { width: calc(100% - 40px); }
  .guide-block { padding-block: 48px; }
  .guide-intro, .guide-origin, .guide-more, .guide-faq { grid-template-columns: 1fr; gap: 28px; }
  .guide-intro { padding-top: 56px; }
  .guide-intro h2 { font-size: 40px; }
  .guide-contents { gap: 4px 20px; }
  .guide-section-heading { margin-bottom: 28px; }
  .guide-steps { grid-template-columns: 1fr; gap: 28px; }
  .guide-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; }
  .guide-step-number { grid-row: 1 / 3; font-size: 29px; margin-top: 3px; }
  .guide-steps h3 { font-size: 25px; }
  .guide-mode { grid-template-columns: 1fr; gap: 28px; padding-block: 22px; }
  .guide-mode + .guide-mode { margin-top: 28px; }
  .guide-mode:nth-of-type(even) .guide-scene { order: 0; }
  .guide-mode h3 { font-size: 33px; margin-bottom: 16px; }
  .guide-mode .guide-eyebrow { font-size: 10px; }
  .guide-scene img { box-shadow: 5px 5px 0 #0e1823; }
  .guide-scene figcaption { gap: 10px; margin-top: 16px; font-size: 10px; }
  .guide-button { margin-top: 20px; }
  .guide-play-options { padding-left: 20px; }
  .guide-faq summary { font-size: 13px; }
  .guide-closing { padding-block: 56px; }
}

/* Focused guide pages reuse the original mode copy and illustrations. */
.topic-screen { max-width: 1000px; }
.topic-screen .page-heading h1 { line-height: 1.2; text-wrap: balance; }
.topic-scenes .guide-mode { display: block; padding: 0; border: 0; margin-bottom: 32px; }
.topic-scenes .guide-scene { margin: 0 0 24px; }
.topic-scenes .guide-scene img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.topic-scenes .guide-mode-copy h3 { margin-top: 12px; font-family: var(--pixel); font-size: 32px; line-height: 1.2; }
.topic-scenes .guide-mode + .guide-mode { border-top: 1px solid #819b9e66; padding-top: 28px; }
.article-languages { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 28px; font: 12px/1.8 var(--mono); }
.article-languages a { text-decoration: underline; text-underline-offset: 3px; }
.article-languages a[aria-current="page"] { color: var(--gold); font-weight: 700; }
.article-links a[aria-current="page"] { color: var(--gold); font-weight: 700; }
.article-links { flex-wrap: wrap; }
@media (max-width: 700px) {
 .topic-screen .page-heading { align-items: flex-start; }
 .topic-screen .page-heading h1 { font-size: 24px; overflow-wrap: anywhere; }
 .topic-scenes .guide-mode-copy h3 { font-size: 26px; }
}
@media (max-width: 700px) {
  body[data-view="home"] .home-footer { width: 100%; min-width: 0; }
  .home-footer .help-link, .home-footer .language-label { flex: none; }
  .home-footer .home-guide-link { flex: 1; min-width: 0; white-space: normal; text-align: center; justify-content: center; }
}