:root{
  --ui-scale:1;
  --ink:#101b2b;
  --night:#0b1422;
  --night-2:#14243a;
  --steel:#6d8299;
  --line:#34465c;
  --gold:#d8b77a;
  --gold-light:#f1dfaf;
  --aqua:#75d9e7;
  --cream:#f4f1e8;
  --paper:#fffdf6;
  font-family:Inter,"Segoe UI",system-ui,sans-serif;
  font-size:calc(16px * var(--ui-scale));
  color:var(--paper);
  background:var(--night);
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{background:radial-gradient(circle at 50% -15%,#263f5f 0,transparent 38%),linear-gradient(145deg,#09121f,#101c2e 62%,#07111c)}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
button:disabled{cursor:not-allowed;opacity:.45}
[hidden]{display:none!important}
.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}
.app-shell{display:flex;flex-direction:column;width:100%;height:100dvh;overflow:hidden;isolation:isolate}

/* A slim permanent toolbar leaves nearly all of the viewport for play. */
.site-bar{flex:0 0 3.3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-width:0;padding:0 .8rem 0 1rem;background:#091321e8;border-bottom:1px solid #40516a;box-shadow:0 4px 24px #0006;z-index:5}
.brand{display:flex;align-items:center;gap:.6rem;white-space:nowrap;min-width:0}
.brand-sigil{position:relative;display:grid;place-items:center;width:2.15rem;height:2.15rem;flex:none;border:1px solid #d8b77a;border-radius:.45rem;color:#f5deaa;background:linear-gradient(145deg,#283b55,#132239);font-weight:900;line-height:1;box-shadow:0 0 0 2px #d8b77a28,inset 0 0 12px #d8b77a18}
.brand-sigil span{position:absolute;right:-.28rem;top:-.38rem;color:#e5c98c;font-size:.65rem;animation:star-breathe 3s ease-in-out infinite}
.brand-name{font-size:.73rem;font-weight:900;letter-spacing:.18em;color:#f4e0b0}
.brand-name b{color:#eaf5fa;font-weight:750}
.site-tools{display:flex;align-items:center;justify-content:flex-end;gap:.65rem;min-width:0}
.live-status{display:flex;align-items:center;gap:.42rem;margin-right:.2rem;color:#b5c6d6;font-size:.66rem;font-weight:700;letter-spacing:.08em;white-space:nowrap;text-transform:uppercase}
.live-status::before{content:"";width:.42rem;height:.42rem;flex:none;border-radius:50%;background:#8ea3bb;box-shadow:0 0 0 .18rem #8ea3bb26}
.live-dot{display:none}
.live-status.connected::before,.live-status.live::before{background:#84e4c5;box-shadow:0 0 0 .18rem #84e4c52c,0 0 10px #84e4c5}
.scale-tools{display:flex;align-items:center;gap:0;height:1.9rem;border:1px solid #43546b;border-radius:.38rem;background:#18283b}
.scale-tools button{width:1.85rem;height:100%;border:0;background:transparent;color:#e9f2f7;font-size:1.1rem;font-weight:600;line-height:1;transition:background .18s}
.scale-tools button:hover{background:#2a4058}
.scale-tools output{min-width:2.6rem;color:#c4d4e2;text-align:center;font-size:.67rem;font-weight:800;letter-spacing:.02em}
.audio-tools{display:flex;align-items:center;gap:.28rem;height:1.9rem;padding-right:.4rem;border:1px solid #43546b;border-radius:.38rem;background:#18283b}
.icon-button{width:1.85rem;height:1.85rem;border:0;background:transparent;color:#e0dfbb;font-size:1.05rem;line-height:1}
.audio-tools input[type=range]{width:3.1rem;height:.2rem;accent-color:var(--gold);cursor:pointer}
.header-link{padding:.32rem .45rem;border:0;background:none;color:#b8c8d8;font-size:.67rem;font-weight:750;letter-spacing:.03em;white-space:nowrap;text-decoration:underline;text-decoration-color:#70859e;text-underline-offset:.22rem}
.header-link:hover{color:white}
.screen-stack{position:relative;flex:1;min-height:0;overflow:hidden}
.entry-error{position:absolute;z-index:9;left:50%;top:.75rem;transform:translateX(-50%);max-width:min(90vw,26rem);margin:0;padding:.65rem 1rem;border:1px solid #e2a79d;border-radius:.45rem;background:#512c34;color:#fff0ea;font-size:.78rem;font-weight:700;text-align:center;box-shadow:0 .4rem 1.8rem #0007}

/* Four short onboarding steps. Only wheel and roster surfaces scroll. */
.onboarding-screen{position:relative;display:grid;place-items:center;width:100%;height:100%;padding:1rem;overflow:hidden}
.entry-stars{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 11% 18%,#fff8 0 .055rem,transparent .08rem),
  radial-gradient(circle at 76% 24%,#fff5 0 .045rem,transparent .08rem),
  radial-gradient(circle at 25% 78%,#fff6 0 .065rem,transparent .09rem),
  radial-gradient(circle at 91% 79%,#fff5 0 .045rem,transparent .09rem),
  repeating-linear-gradient(90deg,transparent 0 4.5rem,#94b5da0b 4.55rem 4.6rem),
  repeating-linear-gradient(0deg,transparent 0 4.5rem,#94b5da0b 4.55rem 4.6rem);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 80%,transparent);
  animation:sky-drift 18s ease-in-out infinite alternate}
.entry-panel{position:relative;z-index:1;width:min(100%,38rem);padding:2.2rem 2.4rem;border:1px solid #5a7089;border-radius:.9rem;background:linear-gradient(145deg,#1d3047ed,#112037f5);box-shadow:0 1.4rem 5rem #020b18a6,inset 0 1px #ffffff22;animation:panel-rise .45s ease-out both}
.entry-panel:before{content:"";position:absolute;inset:.45rem;border:1px solid #e3cf9824;border-radius:.62rem;pointer-events:none}
.entry-back{position:absolute;z-index:2;top:.75rem;right:1rem;padding:.25rem .35rem;border:0;background:none;color:#d9e2e5;font-size:.7rem;font-weight:800;text-decoration:underline;text-underline-offset:.18rem}
.entry-back:hover{color:#fff1c8}
.entry-narrow{text-align:center}
.entry-emblem{display:grid;place-items:center;width:3.5rem;height:3.5rem;margin:0 auto 1rem;border:1px solid #c6ad79;border-radius:50%;background:radial-gradient(circle,#aa905634,#233349);color:#f5dd9d;font-size:1.8rem;box-shadow:0 0 1.8rem #dabb7e35;animation:emblem-hover 4s ease-in-out infinite}
.entry-step,.overlay-kicker{display:block;color:#cdb47e;font-size:.63rem;font-weight:900;letter-spacing:.18em}
.entry-panel h1{margin:.35rem 0 1.55rem;color:#f7f3e9;font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:750;letter-spacing:-.045em;line-height:1.1}
.entry-field{display:flex;gap:.5rem}
.entry-field input{flex:1;min-width:0;height:3.15rem;padding:.75rem 1rem;border:1px solid #68819a;border-radius:.45rem;background:#f9f8f2;color:#152238;font-size:1.05rem;font-weight:650}
.entry-field input::placeholder{color:#84909d}
.action-button{flex:none;min-height:2.6rem;padding:.65rem 1.15rem;border:1px solid #f4dba5;border-radius:.45rem;background:linear-gradient(#e7ca8d,#caa666);color:#1c2737;font-size:.83rem;font-weight:900;letter-spacing:.04em;box-shadow:inset 0 1px #fff8,0 .22rem 0 #856a40;transition:transform .16s,filter .16s,box-shadow .16s}
.action-button:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:inset 0 1px #fff8,0 .35rem 0 #856a40}
.action-button:active{transform:translateY(2px);box-shadow:inset 0 1px #fff8,0 .08rem 0 #856a40}
.action-button span{padding-left:.3rem;font-size:1.1rem}
.entry-wide{width:min(100%,43rem);padding:1.8rem 2rem 1.6rem}
.entry-wide h1{margin-bottom:1rem}
.codename-wheels{display:grid;grid-template-columns:minmax(0,1fr) 2rem minmax(0,1fr);align-items:center;gap:.5rem}
.word-wheel-wrap{min-width:0}
.wheel-label{display:block;margin-bottom:.4rem;color:#b4c9d7;font-size:.6rem;font-weight:850;letter-spacing:.17em}
.word-wheel{height:min(35vh,16rem);min-height:10rem;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scrollbar-width:none;border:1px solid #71889e;border-radius:.5rem;background:linear-gradient(#101c2bd9,#1a2b40);box-shadow:inset 0 .4rem 1rem #0005,inset 0 -.4rem 1rem #0005}
.word-wheel::-webkit-scrollbar,.avatar-grid::-webkit-scrollbar,.results-list::-webkit-scrollbar,.level-grid::-webkit-scrollbar{display:none}
.wheel-option,.word-option,.wheel-card{display:block;width:calc(100% - .5rem);min-height:2.45rem;margin:.25rem;padding:.4rem .6rem;border:1px solid #566d81;border-radius:.28rem;background:#263c56;color:#d5e3e9;text-align:center;font-size:.97rem;font-weight:730;scroll-snap-align:center;transition:background .15s,transform .15s,border-color .15s}
.wheel-option:hover,.word-option:hover,.wheel-card:hover{background:#385775}
.wheel-option.selected,.word-option.selected,.wheel-card.selected,.wheel-option[aria-selected=true],.word-option[aria-selected=true],.wheel-card[aria-selected=true],.wheel-card[aria-pressed=true]{background:linear-gradient(#e2c996,#bfa46d);border-color:#ffedc3;color:#172239;transform:scale(1.015);box-shadow:0 0 1rem #d5b88044}
.wheel-join{text-align:center;color:#e2cc97;font-size:1.3rem;font-weight:700}
.codename-bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem}
.codename-bottom strong{overflow:hidden;color:#f4dca5;font-size:1.2rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.avatar-panel{width:min(100%,59rem);max-height:calc(100% - 2rem);padding:1.6rem}
.avatar-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.8rem}
.avatar-heading h1{margin:.35rem 0 0}
.avatar-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.45rem;max-height:min(69vh,36rem);overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.avatar-choice,.avatar-card{display:grid;place-items:center;gap:.2rem;min-width:0;min-height:6rem;padding:.4rem;border:1px solid #60768e;border-radius:.45rem;background:linear-gradient(#2c415b,#1a2b42);color:#d8e6ef;box-shadow:inset 0 1px #fff2;transition:transform .16s,border-color .16s,background .16s}
.avatar-choice:hover,.avatar-card:hover{transform:translateY(-2px);border-color:#e5d2a5}
.avatar-choice.selected,.avatar-card.selected,.avatar-choice[aria-checked=true],.avatar-card[aria-checked=true],.avatar-card[aria-pressed=true]{border-color:#f8d588;background:linear-gradient(#496481,#273f59);box-shadow:0 0 0 2px #d8b77a7b,inset 0 1px #fff4}
.avatar-choice canvas,.avatar-choice img,.avatar-choice svg,.avatar-card canvas,.avatar-card img,.avatar-card svg{display:block;max-width:100%;width:3.5rem;height:3.5rem;object-fit:contain;image-rendering:pixelated}
.avatar-choice small,.avatar-card small,.avatar-card>span{max-width:100%;overflow:hidden;font-size:.57rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}

/* The entire game board is constrained to one viewport. */
.game-screen{display:grid;grid-template-rows:clamp(5.25rem,12vh,6.5rem) minmax(10rem,1fr) clamp(15.5rem,36vh,18rem);gap:.5rem;width:100%;height:100%;padding:.5rem .75rem .65rem;overflow:hidden}
.raceboard{display:grid;grid-template-columns:7.4rem minmax(0,1fr);gap:.48rem;min-height:0;padding:.37rem;border:1px solid #5d6b75;border-radius:.48rem;background:linear-gradient(180deg,#26394d,#1d2d41);box-shadow:inset 0 1px #ffffff27,0 .25rem .9rem #0005}
.raceboard-side{display:flex;flex-direction:column;justify-content:center;padding-left:.35rem;border-right:1px solid #64788a}
.raceboard-side strong{color:#f2d99c;font-size:.74rem;font-weight:900;letter-spacing:.12em}
.raceboard-side span{margin-top:.3rem;color:#9ab0c4;font-size:.62rem}
.leaderboard{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1.35fr);gap:.42rem;min-width:0;min-height:0}
.leaderboard:has(.leaders-pinned:only-child){grid-template-columns:1fr}
.leaders-pinned{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.38rem;min-width:0;min-height:0}
.leaders-pinned:has(.leader-row:only-child){grid-template-columns:1fr}
.leaders-pinned:has(.leader-row:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.leaders-scroll{position:relative;min-width:0;min-height:0;overflow:hidden;border-left:1px solid #55718a;padding-left:.38rem}
.leaders-scroll:before,.leaders-scroll:after{content:"";position:absolute;z-index:2;left:0;right:0;height:.5rem;pointer-events:none}
.leaders-scroll:before{top:0;background:linear-gradient(#1f3045,transparent)}
.leaders-scroll:after{bottom:0;background:linear-gradient(transparent,#1f3045)}
.leaders-track{display:flex;flex-direction:column;gap:.18rem;will-change:transform}
.leaders-scroll.is-scrolling .leaders-track,.leaders-scroll.scrolling .leaders-track{animation:standings-roll var(--scroll-seconds,40s) linear infinite alternate}
.leader-row{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) .2rem;align-items:center;column-gap:.35rem;min-width:0;min-height:0;padding:.27rem .4rem .32rem;border:1px solid #5d7387;border-radius:.31rem;background:linear-gradient(145deg,#34495f,#273c51);color:#f0f4f2;box-shadow:inset 0 1px #ffffff18}
.leaders-pinned .leader-row{height:100%}
.leaders-track .leader-row{height:2.35rem;min-height:2.35rem;padding:.15rem .3rem .22rem}
.leader-row:first-child{border-color:#bca77c}
.leader-row.me,.leader-row.is-me{background:linear-gradient(145deg,#416477,#294959);border-color:#90dce3}
.leader-place{color:#e2c98d;font-size:.7rem;font-weight:900}
.leader-avatar{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:.25rem;background:#18283b;overflow:hidden}
.leader-avatar img,.leader-avatar canvas,.leader-avatar svg{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.leader-info{min-width:0;line-height:1.03}
.leader-info strong,.leader-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leader-info strong{font-size:.68rem;font-weight:850}
.leader-info small{margin-top:.15rem;color:#b5c6d2;font-size:.52rem}
.leader-meter{grid-column:1/-1;align-self:end;height:.18rem;background:#0d1b29;border-radius:99px;overflow:hidden}
.leader-meter>span,.leader-meter>div,.leader-meter>i{display:block;height:100%;background:linear-gradient(90deg,#6fd5df,#f3dc9a);box-shadow:0 0 .4rem #8bdde4}
.leaders-track .leader-avatar{width:1.35rem;height:1.35rem}
.leaders-track .leader-info strong{font-size:.58rem}
.leaders-track .leader-info small{font-size:.49rem}
.leaders-track .leader-meter{height:.12rem}

/* A true wide stage. The canvas owns characters and level events. */
.arena-shell{position:relative;min-height:0;overflow:hidden;border:2px solid #6d7380;border-radius:.45rem;background:#182c43;box-shadow:0 .5rem 1.1rem #0006,inset 0 0 0 2px #182334}
.arena-shell:before{content:"";position:absolute;z-index:2;inset:0;border:1px solid #e2ca9b73;pointer-events:none}
.arena-shell:after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:.28rem;background:linear-gradient(90deg,#6d563b,#d4b77a 15%,#806546 55%,#c7aa70 85%,#66513c);pointer-events:none}
.arena-sky{position:absolute;inset:0;background:
  radial-gradient(circle at 73% 26%,#f7e6ad8a,transparent 17%),
  linear-gradient(180deg,#284e67 0%,#587f88 58%,#384f4c 59%,#243d35 100%);animation:sky-drift 18s ease-in-out infinite alternate}
#game-canvas{position:absolute;z-index:1;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
.arena-topline{position:absolute;z-index:3;top:.45rem;left:.5rem;right:.5rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;pointer-events:none}
.player-identity{display:flex;align-items:center;gap:.45rem;min-width:0;padding:.18rem .55rem .18rem .2rem;border:1px solid #d9d2bb77;border-radius:.3rem;background:#0b1928d9;box-shadow:0 .25rem .8rem #0006}
.profile-avatar{display:grid;place-items:center;width:1.85rem;height:1.85rem;flex:none;overflow:hidden;border-radius:.2rem;background:#3b5367;color:var(--gold);font-size:1.1rem}
.profile-avatar img,.profile-avatar canvas,.profile-avatar svg{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.player-identity strong,.player-identity small{display:block;overflow:hidden;max-width:11rem;text-overflow:ellipsis;white-space:nowrap}
.player-identity strong{font-size:.65rem;font-weight:850;line-height:1.1}
.player-identity small{color:#c0c9c9;font-size:.51rem}
.arena-level{padding:.35rem .5rem;border:1px solid #d9d2bb77;border-radius:.27rem;background:#0b1928d9;color:#e9e0c8;font-size:.59rem;font-weight:850;letter-spacing:.1em;box-shadow:0 .25rem .8rem #0006}
.arena-level b{color:#f8d98f;font-size:.78rem}
.arena-separator{color:#94a7af}
.arena-message{position:absolute;z-index:4;left:50%;top:42%;transform:translate(-50%,-50%);padding:.5rem 1rem;border:1px solid #f5dcaa;border-radius:.3rem;background:#102236e8;color:#fff7de;font-size:.95rem;font-weight:850;text-align:center;white-space:nowrap;box-shadow:0 .6rem 2rem #0008;animation:message-pop .32s ease-out}

/* The prompt is the only large text on the screen. */
.practice-grid{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(15.5rem,1.05fr);gap:.5rem;min-height:0}
.practice-panel{display:flex;flex-direction:column;gap:.32rem;min-width:0;min-height:0;padding:.65rem .75rem .55rem;border:2px solid #d4bd91;border-radius:.5rem;background:linear-gradient(145deg,#fffef9,#ece7d8);color:#1a2737;box-shadow:inset 0 0 0 2px #fffdf8,0 .45rem 1.2rem #0005}
.practice-topline{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex:0 0 auto;min-height:1.1rem}
.challenge-meta{display:flex;align-items:center;gap:.55rem;min-width:0;color:#657184;font-size:.59rem;font-weight:900;letter-spacing:.11em;white-space:nowrap}
#level-label{color:#455a6d}
#lesson-label{overflow:hidden;text-overflow:ellipsis}
.thin-rule{height:.66rem;width:1px;background:#b4b2a8}
.timer-wrap{display:flex;align-items:center;gap:.4rem;min-width:6rem;color:#775537;font-size:.65rem;font-weight:850}
.timer-rail{width:4rem;height:.32rem;overflow:hidden;border-radius:99px;background:#d7c9af}
#timer-fill{height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,#c28d53,#ecbf76);transition:width .18s linear}
#timer-fill.low{background:#ce705e}
.prompt-surface{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.55rem;align-items:start;flex:1 1 auto;min-height:0;padding:.35rem .25rem .25rem .15rem}
.prompt-mark{margin-top:.24rem;color:#8a887c;font-size:.52rem;font-weight:900;letter-spacing:.13em}
.target-text{min-width:0;align-self:center;overflow:hidden;overflow-wrap:anywhere;white-space:pre-wrap;color:#111d2e;font-family:"Segoe UI",system-ui,sans-serif;font-size:clamp(1.3rem,2.1vw,2rem);font-weight:760;line-height:1.22;letter-spacing:.008em}
.target-text.code{font-family:"Cascadia Code",Consolas,ui-monospace,monospace;font-size:clamp(.92rem,1.55vw,1.45rem);font-weight:680;line-height:1.25;letter-spacing:-.02em}
.target-text .char{white-space:pre-wrap;border-radius:.1rem;transition:color .1s,background .1s}
.target-text .char.correct{color:#177b66;animation:correct-pulse .2s ease-out}
.target-text .char.current{background:#eed793;box-shadow:inset 0 -.15rem #bd8c48}
.target-text .char.wrong{background:#eb9e8b;color:#63211c}
.answer-row{flex:0 0 3.5rem;min-height:0;margin-left:2.95rem}
#answer{display:block;width:100%;height:100%;resize:none;overflow:hidden;padding:.55rem .7rem;border:2px solid #677f8e;border-radius:.3rem;outline:none;background:#fffefa;color:#17273a;font-family:"Cascadia Code",Consolas,ui-monospace,monospace;font-size:1.15rem;font-weight:650;line-height:1.25;caret-color:#1967b5;box-shadow:inset 0 1px .22rem #0002}
#answer:focus{border-color:#227fb1;box-shadow:0 0 0 .16rem #56c1df6b,inset 0 1px .22rem #0002}
#answer::placeholder{color:#87939a;font-family:"Segoe UI",system-ui,sans-serif;font-size:.85rem;font-weight:550}
#answer.code-input{font-size:1rem}
.practice-bottom{display:flex;align-items:center;gap:.55rem;flex:0 0 2rem;min-width:0;margin-left:2.95rem}
.progress-rail{width:clamp(5rem,10vw,9rem);height:.42rem;flex:none;overflow:hidden;border:1px solid #a1aca8;border-radius:99px;background:#cbd0c5}
#progress-fill{width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#377d8c,#6dc7ad);box-shadow:0 0 .4rem #43b6b9;transition:width .16s ease-out}
.feedback{flex:1;min-width:0;overflow:hidden;color:#626e77;font-size:.65rem;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.feedback.positive{color:#237867}
.feedback.nudge{color:#a04c3e}
.practice-actions{display:flex;align-items:center;gap:.3rem;flex:none}
.small-button{min-height:1.75rem;padding:.32rem .55rem;border:1px solid #9aa7aa;border-radius:.26rem;background:#edf0eb;color:#253949;font-size:.62rem;font-weight:850;white-space:nowrap;transition:background .15s,transform .15s}
.small-button:hover{background:white;transform:translateY(-1px)}
.accent-button{border-color:#aa8c56;background:#d8b77a;color:#1b2734}

/* Side tips use keycaps, not extra prose or duplicated typing text. */
.tips-panel{display:flex;flex-direction:column;gap:.42rem;min-width:0;min-height:0;padding:.55rem .7rem;border:2px solid #7b9ab0;border-radius:.5rem;background:linear-gradient(145deg,#28445f,#1e344d 70%,#192c41);box-shadow:inset 0 0 0 2px #597c9535,0 .45rem 1.2rem #0005}
.tips-topline{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex:0 0 auto;min-height:1.6rem}
.tips-topline>strong{color:#e4d6ac;font-size:.63rem;font-weight:900;letter-spacing:.16em}
.hint-toggle{min-width:4.5rem;padding:.26rem .42rem;border:1px solid #8298ab;border-radius:99px;background:#183047;color:#e1eaf0;font-size:.63rem;font-weight:850;white-space:nowrap}
.hint-toggle span{margin-left:.2rem;color:#b5bdbe}
.hint-toggle[aria-pressed=true]{border-color:#eed794;background:#6e6244;color:#fff7db;box-shadow:0 0 .6rem #d4bd7b58}
.hint-toggle[aria-pressed=true] span{color:#fff7db}
.active-tip{flex:0 1 auto;min-height:2.7rem;max-height:5.5rem;overflow:auto;scrollbar-width:none}
.active-tip::-webkit-scrollbar{display:none}
.active-tip strong{display:block;color:#f5f1de;font-size:.85rem;font-weight:850;line-height:1.15}
.active-tip p{margin:.15rem 0 0;color:#cbdae2;font-size:.67rem;line-height:1.25}
#tip-sidequest{color:#f3d18e}
.hint-tools{display:flex;align-items:center;justify-content:space-between;gap:.35rem;flex:0 0 auto;padding:.3rem .4rem;border:1px solid #a09b6b;border-radius:.25rem;background:#7d744451;color:#f6e5b6;font-size:.62rem;font-weight:800}
.hint-tools button{padding:0;border:0;background:none;color:#fff2c5;font-size:.62rem;font-weight:900;text-decoration:underline;text-underline-offset:.15rem}
.tips-current-keys{display:flex;align-items:center;gap:.4rem;flex:0 0 auto;min-height:1.6rem;padding:.2rem .3rem;border:1px solid #cbb78199;border-radius:.27rem;background:#e5d29b1c;color:#f9e9b8;font-size:.67rem;font-weight:800}
.tips-current-keys kbd{display:inline-grid;place-items:center;min-width:1.45rem;min-height:1.25rem;padding:.05rem .25rem;border:1px solid #fff8d6;border-bottom:3px solid #bdab82;border-radius:.18rem;background:#f4e9ce;color:#2a3e4a;font-family:inherit;font-size:.62rem;font-weight:900}
.tips-keys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;min-height:0;flex:1 1 auto}
.key-guide{display:flex;align-items:center;justify-content:space-between;flex-direction:column;gap:.08rem;min-width:0;min-height:0;padding:.27rem .18rem;border:1px solid #7b9aad78;border-radius:.28rem;background:#2e4c65a6}
.key-guide>div{display:flex;align-items:center;justify-content:center;gap:.18rem;min-width:0}
.key-guide>div span{color:#dbcfab;font-size:.63rem;font-weight:900}
.key-guide kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;min-height:1.22rem;padding:.05rem .21rem;border:1px solid #d9e0e3;border-bottom:3px solid #a1afba;border-radius:.18rem;background:linear-gradient(#fff,#dce7ea);color:#203849;font-family:inherit;font-size:.58rem;font-weight:850;white-space:nowrap;box-shadow:0 .06rem .15rem #0004}
.key-guide kbd.wide-key{min-width:4rem}
.key-guide small{color:#d7e4e9;font-size:.53rem;font-weight:750;line-height:1.1;text-align:center;white-space:nowrap}

/* Shared compact dialogs. */
.overlay{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:1rem;overflow:hidden;background:#07111de8;backdrop-filter:blur(7px)}
.overlay-panel{position:relative;z-index:1;width:min(100%,46rem);max-height:calc(100dvh - 2rem);overflow:hidden;padding:1.25rem;border:1px solid #bda777;border-radius:.65rem;background:linear-gradient(145deg,#21364d,#14263c);box-shadow:0 1.5rem 5rem #000b,inset 0 0 0 2px #edd7a51c;animation:panel-rise .3s ease-out}
.overlay-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.85rem}
.overlay-head h2,.results-panel h2{margin:.25rem 0;color:#fff4d9;font-size:1.8rem;letter-spacing:-.04em}
.close-button{display:grid;place-items:center;width:2rem;height:2rem;flex:none;border:1px solid #8194a3;border-radius:.3rem;background:#2e465d;color:white;font-size:1.3rem;line-height:1}
.overlay-close{position:absolute;z-index:4;right:.8rem;top:.8rem}
.levels-panel{width:min(100%,48rem)}
.level-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:.4rem;max-height:min(68vh,32rem);overflow:auto;scrollbar-width:none}
.level-choice{display:grid;place-items:center;min-width:0;min-height:3rem;border:1px solid #69839b;border-radius:.3rem;background:#2b425a;color:#e3edf0;font-size:.85rem;font-weight:850}
.level-choice:hover,.level-choice.current{border-color:#f1d391;background:#4a5d69;color:#fff9da}
.level-choice.done{border-color:#7dd7d3}
.level-choice small{font-size:.45rem;color:#e4cf98}
.ticket-panel{width:min(100%,32rem);padding:1.55rem}
.ticket-graphic{position:relative;display:flex;align-items:center;flex-direction:column;gap:.9rem;min-height:20rem;padding:1.4rem 1.6rem;border:2px dashed #af8457;border-radius:.35rem;background:linear-gradient(135deg,#fffdf2,#e9dfc6);color:#283847;text-align:center;box-shadow:0 .45rem 2rem #0005}
.ticket-graphic:before,.ticket-graphic:after{content:"";position:absolute;top:50%;width:1.1rem;height:1.1rem;border-radius:50%;background:#1b2e44}
.ticket-graphic:before{left:-.65rem}.ticket-graphic:after{right:-.65rem}
.ticket-overline{max-width:90%;color:#715c43;font-size:.58rem;font-weight:900;letter-spacing:.13em}
.ticket-graphic h2{margin:0;color:#243b4f;font-size:1.5rem;line-height:1.1}
.ticket-event{display:grid;gap:.08rem;margin-top:-.45rem;color:#5b5245}
.ticket-event strong{font-size:.74rem}
.ticket-event span{font-size:.61rem}
.ticket-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;width:100%;padding:.7rem 0;border-top:1px dashed #b8a27f;border-bottom:1px dashed #b8a27f;text-align:left}
.ticket-grid small,.ticket-grid strong{display:block}
.ticket-grid small{color:#8b785f;font-size:.53rem;font-weight:900;letter-spacing:.12em}
.ticket-grid strong{margin-top:.2rem;overflow-wrap:anywhere;font-size:.8rem}
.ticket-qr{display:grid;place-items:center;width:10.5rem;height:10.5rem;padding:.3rem;border:1px solid #b7b4a6;background:white;image-rendering:pixelated}
.ticket-qr img,.ticket-qr canvas,.ticket-qr svg{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.ticket-footnote{color:#665847;font-size:.63rem;font-weight:750}
.ticket-next-results{display:block;margin:.8rem auto 0}
.results-panel{width:min(100%,36rem);text-align:center}
.results-panel h2{font-size:2.5rem}
.results-panel p{margin:.25rem 0 .8rem;color:#d4e1e7;font-size:.85rem}
.results-actions{display:flex;justify-content:center;align-items:center;gap:.65rem;margin:.8rem 0 1rem}
.results-standings{position:relative;z-index:1;text-align:left}
.results-standings>div:first-child{display:flex;justify-content:space-between;padding:.45rem .65rem;border:1px solid #637a8d;border-bottom:0;border-radius:.28rem .28rem 0 0;background:#30475d;color:#f3e3b6;font-size:.59rem;font-weight:900;letter-spacing:.1em}
.results-standings>div:first-child span{color:#9be2d4}
.results-list{max-height:min(39vh,15rem);overflow:auto;scrollbar-width:none;border:1px solid #637a8d;border-radius:0 0 .28rem .28rem;background:#13283b}
.result-row{display:flex;align-items:center;gap:.5rem;padding:.5rem .65rem;border-bottom:1px solid #354c62;font-size:.72rem}
.result-row:last-child{border-bottom:0}
.result-row>span:nth-child(2){display:grid;flex:1;min-width:0}
.result-row>span:nth-child(2) strong,.result-row>span:nth-child(2) small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result-row b{color:#f0d59a;font-size:.75rem}
.result-row em{color:#a3dbd3;font-size:.57rem;font-style:normal;white-space:nowrap}
.result-row small{color:#9eb0bc}
.fireworks{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:
  radial-gradient(circle at 20% 30%,#eacb8f 0 2px,transparent 4px),
  radial-gradient(circle at 80% 25%,#9cdde8 0 2px,transparent 4px),
  radial-gradient(circle at 62% 11%,#eacb8f 0 1px,transparent 3px),
  radial-gradient(circle at 36% 8%,#9cdde8 0 2px,transparent 4px);
  animation:firework-glow 2s ease-in-out infinite alternate}

@keyframes sky-drift{to{transform:translate3d(-1.5%,.8%,0) scale(1.03)}}
@keyframes star-breathe{50%{transform:scale(1.45) rotate(30deg);filter:drop-shadow(0 0 .35rem #f7e0a4)}}
@keyframes emblem-hover{50%{transform:translateY(-.3rem);box-shadow:0 0 2.4rem #dabb7e6b}}
@keyframes panel-rise{from{opacity:0;transform:translateY(.6rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes message-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes correct-pulse{from{background:#9ce4c7}to{background:transparent}}
@keyframes standings-roll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + 4.8rem))}}
@keyframes firework-glow{to{filter:brightness(1.7);transform:scale(1.04)}}

@media(max-width:1100px){
  .site-bar{padding-inline:.6rem}
  .brand-name{letter-spacing:.1em}
  .raceboard{grid-template-columns:5.5rem minmax(0,1fr)}
  .leaderboard{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}
  .leader-avatar{width:1.45rem;height:1.45rem}
  .practice-grid{grid-template-columns:minmax(0,3fr) minmax(14rem,1fr)}
  .target-text{font-size:clamp(1.1rem,1.85vw,1.6rem)}
}
@media(max-width:900px){
  .live-status{display:none}
  .audio-tools input[type=range]{width:2.3rem}
  .game-screen{padding-inline:.4rem}
  .raceboard-side{display:none}
  .raceboard{grid-template-columns:1fr}
  .leaderboard{grid-template-columns:minmax(0,1fr) minmax(0,.75fr)}
  .practice-grid{grid-template-columns:minmax(0,2fr) minmax(12rem,1fr)}
  .key-guide kbd{font-size:.5rem}
  .level-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
}
@media(max-height:700px){
  :root{font-size:calc(14px * var(--ui-scale))}
  .game-screen{grid-template-rows:clamp(4.5rem,11vh,5.4rem) minmax(9rem,1fr) clamp(14.1rem,37vh,16.5rem)}
  .practice-panel{gap:.2rem;padding:.42rem .55rem}
  .practice-bottom{flex-basis:1.8rem}
  .answer-row{flex-basis:3.1rem}
  .tips-panel{gap:.25rem;padding:.42rem .55rem}
}
@media(max-height:580px){
  :root{font-size:calc(12px * var(--ui-scale))}
  .game-screen{grid-template-rows:4.5rem minmax(7rem,1fr) 13.5rem}
  .tips-keys{gap:.18rem}
  .key-guide{padding:.1rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/* Medieval arcade skin: stone, carved wood, parchment, and blue cloth. */
:root{
  --ink:#2a2018;
  --night:#241a12;
  --night-2:#49311f;
  --steel:#756f61;
  --line:#68513a;
  --gold:#d5aa51;
  --gold-light:#f2d28b;
  --aqua:#2c67a5;
  --cream:#f1d69e;
  --paper:#fff1c8;
  font-family:"Trebuchet MS","Segoe UI",sans-serif;
  color:var(--paper);
  background:var(--night);
}
body{
  background-color:#2c2318;
  background-image:
    repeating-linear-gradient(0deg,#1d160f80 0 2px,transparent 2px 21px),
    repeating-linear-gradient(90deg,#80552c24 0 2px,transparent 2px 68px),
    linear-gradient(140deg,#46321e,#241b14 65%,#342414);
}
button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #e6be62;outline-offset:2px}

.site-bar{
  flex-basis:2.4rem;
  gap:.6rem;
  padding:0 .7rem;
  border-bottom:3px solid #a56d32;
  background:
    repeating-linear-gradient(0deg,#1c110a7a 0 1px,transparent 1px 9px),
    repeating-linear-gradient(90deg,transparent 0 75px,#e6b87410 76px 78px),
    linear-gradient(#77451f,#4b2d18 44%,#382214);
  box-shadow:inset 0 1px #c48b4f,0 3px 0 #2d1b0f,0 5px 12px #0f0a0770;
}
.brand{gap:.43rem}
.brand-sigil{
  width:1.63rem;height:1.63rem;
  border:2px solid #edc668;
  border-radius:2px;
  background:linear-gradient(125deg,#264c8d,#1d376d);
  color:#ffe39a;
  font-family:Georgia,serif;
  font-size:.9rem;
  box-shadow:inset 0 0 0 1px #fff0ab52,1px 2px 0 #21160e;
}
.brand-sigil span{right:-.18rem;top:-.26rem;color:#f7cd65;font-size:.49rem;animation:star-breathe 4s ease-in-out infinite}
.brand-name{font-family:Georgia,"Trebuchet MS",serif;font-size:.73rem;font-weight:900;letter-spacing:.12em;color:#ffe3a4;text-shadow:1px 1px #261607}
.brand-name b{color:#fff3d0}
.site-tools{gap:.42rem}
.live-status{color:#f4e6c3;font-size:.57rem;text-shadow:1px 1px #25170f}
.live-status::before{width:.38rem;height:.38rem;background:#c59a54;box-shadow:0 0 0 .12rem #322417}
.live-status.connected::before,.live-status.live::before{background:#77bf6f;box-shadow:0 0 0 .12rem #24381f}
.scale-tools,.audio-tools{
  height:1.55rem;
  border:2px solid #bd8747;
  border-radius:2px;
  background:linear-gradient(#694021,#3e2615);
  box-shadow:inset 0 1px #dda75c,1px 2px #29170d;
}
.scale-tools button{width:1.35rem;color:#f9e6b8;font-size:.9rem}
.scale-tools button:hover{background:#986435}
.scale-tools output{min-width:2.3rem;color:#ffe0a2;font-size:.56rem}
.audio-tools{gap:.15rem;padding-right:.3rem}
.icon-button{width:1.45rem;height:1.45rem;color:#f6dda0;font-size:.9rem}
.audio-tools input[type=range]{width:2.55rem;accent-color:#e4bb66}
.header-link{padding:.18rem .35rem;color:#f6e3bc;font-size:.56rem;text-decoration-color:#d8ac65}
.header-link:hover{color:white}
.settings-menu{position:relative;flex:none}
.settings-button{border:1px solid #bd8747;border-radius:2px;text-decoration:none;background:#3e2615a8;box-shadow:inset 0 1px #dda75c66}
.settings-button[aria-expanded=true]{color:#fff2d1;background:#80552c}
.settings-popover{position:absolute;z-index:30;top:calc(100% + .48rem);right:0;min-width:7.4rem;padding:.35rem;border:2px solid #b58449;border-radius:2px;background:linear-gradient(#f4dfb0,#cba676);box-shadow:2px 3px 0 #28170e,0 .6rem 1.5rem #120b0999}
.settings-popover .hint-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0;padding:.3rem .4rem;font-size:.61rem;box-shadow:none}
.entry-error{border:3px solid #bd8d65;border-radius:2px;background:#8c3c2f;color:#fff2d0;box-shadow:3px 4px #342017}

.onboarding-screen{
  background:
    linear-gradient(90deg,#17150bd9,#17150b80 24%,#17150b80 76%,#17150bd9),
    linear-gradient(0deg,#1a1b0ec4,transparent 58%),
    url("assets/art/meadow-world.webp?v=2026.10.02.5") center 58%/cover no-repeat,
    linear-gradient(#548196,#31656d 45%,#496943 46%,#24432f);
  image-rendering:pixelated;
}
.onboarding-screen::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#25190b0c 3px 4px)}
.entry-stars{display:none}
.entry-panel{
  border:6px solid #6f4424;
  border-radius:3px;
  background:
    radial-gradient(circle at 11px 11px,#3c3424 0 3px,#b7a06d 4px 5px,transparent 6px),
    radial-gradient(circle at calc(100% - 11px) 11px,#3c3424 0 3px,#b7a06d 4px 5px,transparent 6px),
    radial-gradient(circle at 11px calc(100% - 11px),#3c3424 0 3px,#b7a06d 4px 5px,transparent 6px),
    radial-gradient(circle at calc(100% - 11px) calc(100% - 11px),#3c3424 0 3px,#b7a06d 4px 5px,transparent 6px),
    repeating-linear-gradient(10deg,#8a60341c 0 2px,transparent 2px 12px),
    linear-gradient(#f8e5b6,#e6c78a);
  color:#3a281a;
  box-shadow:inset 0 0 0 3px #b47a3d,inset 0 0 0 6px #e7bb75,0 0 0 3px #342315,5px 8px 0 #1a110b99;
}
.entry-panel:before{inset:.62rem;border:1px solid #9b6b36;border-radius:0}
.entry-emblem{
  width:3.25rem;height:3.25rem;
  margin-bottom:.65rem;
  border:3px solid #c99c42;border-radius:2px;
  background:linear-gradient(140deg,#2c5490,#193767);
  color:#f7d77e;
  box-shadow:inset 0 0 0 1px #f8e4a6,2px 3px 0 #7d542e;
  font-size:1.65rem;
}
.entry-step,.overlay-kicker{color:#6e5132;font-family:Consolas,monospace;font-size:.65rem;letter-spacing:.13em}
.entry-panel h1{color:#302319;font-family:Georgia,"Trebuchet MS",serif;font-weight:800;text-shadow:0 1px #fff3d4}
.entry-field input{
  border:3px solid #936943;border-radius:2px;
  background:#fff8df;color:#2c241d;
  box-shadow:inset 2px 2px #d6bd8d;
}
.entry-field input::placeholder{color:#826f5a}
.action-button{
  border:2px solid #68471e;border-radius:2px;
  background:linear-gradient(#f9d889,#d9a846 55%,#bd8833);
  color:#37230f;
  box-shadow:inset 0 2px #fff3c7,inset 0 -2px #885b28,2px 3px #57371b;
  font-family:Georgia,"Trebuchet MS",serif;
  font-size:.83rem;
}
.action-button:hover{filter:brightness(1.05);box-shadow:inset 0 2px #fff3c7,inset 0 -2px #885b28,2px 5px #57371b}
.action-button:active{box-shadow:inset 0 2px #fff3c7,1px 1px #57371b}
.wheel-label{color:#735332}
.word-wheel{
  border:4px solid #80522a;border-radius:2px;
  background:repeating-linear-gradient(0deg,#5a381e 0 2px,#704523 3px 12px);
  box-shadow:inset 0 0 0 2px #bb8649,inset 0 0 1rem #1e120e8a;
}
.wheel-option,.word-option,.wheel-card{
  border:2px solid #af8b5a;border-radius:2px;
  background:linear-gradient(#f5e2b6,#d9b984);
  color:#3f2a19;
  font-family:Georgia,"Trebuchet MS",serif;
  box-shadow:1px 2px #3c2719;
}
.wheel-option:hover,.word-option:hover,.wheel-card:hover{background:#ffefc8}
.wheel-option.selected,.word-option.selected,.wheel-card.selected,.wheel-option[aria-selected=true],.word-option[aria-selected=true],.wheel-card[aria-selected=true],.wheel-card[aria-pressed=true]{
  border-color:#f9d872;background:linear-gradient(#fbeaa9,#d6a447);color:#3a2718;
  box-shadow:0 0 0 2px #68441e,inset 0 1px #fff8d7;
}
.wheel-join,.codename-bottom strong{color:#533d25}
.avatar-choice,.avatar-card{
  border:3px solid #885b32;border-radius:2px;
  background:linear-gradient(#f4dfa9,#c9a46f);
  color:#362619;
  box-shadow:inset 0 0 0 1px #ffebbc,2px 3px #68421f;
}
.avatar-choice:hover,.avatar-card:hover{border-color:#d2a643}
.avatar-choice.selected,.avatar-card.selected,.avatar-choice[aria-checked=true],.avatar-card[aria-checked=true],.avatar-card[aria-pressed=true]{
  border-color:#ead371;background:linear-gradient(#fff0b6,#dcb466);
  box-shadow:0 0 0 2px #524019,inset 0 0 0 2px #f9e19a;
}

.game-screen{
  grid-template-rows:clamp(3.45rem,8.2vh,4.05rem) minmax(8rem,1fr) clamp(15.5rem,37vh,18rem);
  gap:.4rem;
  padding:.35rem .48rem .48rem;
}
.raceboard{
  grid-template-columns:5.8rem minmax(0,1fr);
  gap:.4rem;
  padding:.28rem;
  border:3px solid #51402d;border-radius:2px;
  background:
    repeating-linear-gradient(0deg,transparent 0 22px,#676963 23px 25px),
    repeating-linear-gradient(90deg,#bcb9ac 0 58px,#9e9d91 59px 61px),
    #a5a69b;
  box-shadow:inset 0 0 0 2px #ddd4b7,0 3px #312114;
}
.raceboard-side{padding-left:.35rem;border-right:3px solid #6e5335;text-shadow:1px 1px #f7e5bb}
.raceboard-side strong{color:#3d3020;font-family:Georgia,serif;font-size:.67rem;letter-spacing:.05em}
.raceboard-side span{margin-top:.18rem;color:#554732;font-size:.57rem;font-weight:700}
.leaderboard{gap:.35rem}
.leaders-pinned{gap:.3rem}
.leaders-pinned:has(.leader-row:only-child){grid-template-columns:minmax(10rem,23rem)}
.leaders-scroll{border-left:3px solid #5d4930;padding-left:.33rem}
.leaders-scroll:before{background:linear-gradient(#b8b7ab,transparent)}
.leaders-scroll:after{background:linear-gradient(transparent,#a8a89c)}
.leader-row{
  padding:.12rem .3rem .15rem;
  border:2px solid #583b21;border-radius:2px;
  background:linear-gradient(#80552f,#54351e);
  color:#fff1c9;
  box-shadow:inset 0 1px #d9a95f,inset 0 -1px #321d12;
}
.leader-row:first-child{border-color:#e5bb61;background:linear-gradient(#916735,#654220)}
.leader-row.is-me,.leader-row.me{border-color:#e9cb70;background:linear-gradient(#265c9b,#1c4073);box-shadow:inset 0 1px #90b8de}
.leader-place{color:#ffda81;font-family:Georgia,serif;font-size:.73rem}
.leader-avatar{border:1px solid #e3bd6e;border-radius:1px;background:#d5b780}
.leader-info strong{font-size:.78rem;text-shadow:1px 1px #2b1c15}
.leader-info small{color:#f4ddad;font-size:.57rem}
.leader-meter{height:.22rem;border:1px solid #342518;border-radius:0;background:#b79d73}
.leader-meter>span,.leader-meter>div,.leader-meter>i{background:linear-gradient(90deg,#2f9860,#7acb65);box-shadow:none}
.leaders-track .leader-row{height:2.05rem;min-height:2.05rem}

.arena-shell{
  border:5px solid #6b4324;border-radius:2px;
  background:#527784;
  box-shadow:inset 0 0 0 2px #bd8b4e,0 0 0 2px #302014,0 3px #21170e;
}
.arena-shell:before{inset:1px;border:1px solid #d9aa69}
.arena-shell:after{height:.35rem;background:repeating-linear-gradient(90deg,#5e371d 0 29px,#a36c36 29px 31px,#4c2d1a 31px 58px)}
.arena-sky{background:linear-gradient(#6eb1d0,#abd8db 54%,#6c9365 55%,#416b45)}
.player-identity,.arena-level{
  border:2px solid #d1a95e;border-radius:2px;
  background:linear-gradient(#704926,#462c1a);
  color:#ffebbb;
  box-shadow:inset 0 1px #c69152,2px 3px #261810aa;
}
.profile-avatar{border:1px solid #dbbb72;border-radius:1px;background:#ae8651}
.player-identity strong{font-family:Georgia,serif;font-size:.7rem}
.player-identity small{color:#f0d6a3}
.arena-level b{color:#ffda79}
.arena-separator{color:#dfbe82}
.arena-message{
  max-width:min(80%,30rem);
  border:4px solid #70441f;border-radius:2px;
  background:linear-gradient(#fff2cb,#e4c287);
  color:#39281b;
  white-space:normal;
  text-shadow:0 1px #fff7df;
  box-shadow:inset 0 0 0 2px #c7954f,3px 5px #2c1b12a8;
}

.practice-grid{gap:.4rem;grid-template-columns:minmax(0,3.15fr) minmax(15.5rem,1.05fr)}
.practice-panel{
  position:relative;
  gap:.24rem;
  padding:.5rem .68rem .43rem;
  border:6px solid #70411f;border-radius:2px;
  background:
    radial-gradient(circle at 9px 9px,#3e3526 0 2px,#a99263 3px 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 9px) 9px,#3e3526 0 2px,#a99263 3px 4px,transparent 5px),
    radial-gradient(circle at 9px calc(100% - 9px),#3e3526 0 2px,#a99263 3px 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),#3e3526 0 2px,#a99263 3px 4px,transparent 5px),
    repeating-linear-gradient(13deg,#a8733920 0 1px,transparent 2px 15px),
    linear-gradient(#fff2c9,#ead0a0);
  color:#312319;
  box-shadow:inset 0 0 0 2px #c08545,0 0 0 2px #2d1d10,0 4px #21150d;
}
.challenge-meta{color:#806d50;font-family:Consolas,ui-monospace,monospace;font-size:.64rem;letter-spacing:.06em}
#level-label{color:#634320}
.thin-rule{background:#a88249}
.timer-wrap{color:#724623}
.timer-rail{height:.42rem;border:1px solid #96734a;border-radius:1px;background:#cdb480}
#timer-fill{border-radius:0;background:linear-gradient(90deg,#a98029,#e4be61)}
#timer-fill.low{background:#b85c34}
.prompt-mark{color:#8a6240;font-family:Consolas,monospace;font-size:.55rem;letter-spacing:.06em}
.target-text{color:#20170f;font-family:"Trebuchet MS","Segoe UI",sans-serif;font-size:clamp(1.3rem,2.1vw,2rem);font-weight:900;letter-spacing:.005em;text-shadow:0 1px #fff8e3}
.target-text.code{font-family:Consolas,ui-monospace,monospace;color:#272017;font-weight:750}
.target-text:has(.char:only-child){font-size:3.1rem}
.target-text .char.correct{color:#247d4b}
.target-text .char.current{background:#ffe05c;box-shadow:inset 0 -.18rem #2a66bd}
.target-text .char.optional{color:#876b42;background:#f6e7c2}
.target-text .char.wrong{background:#eaa58b;color:#672821}
#answer{
  border:4px solid #7b502d;border-radius:2px;
  background:#fffdf1;color:#281b11;
  box-shadow:inset 0 0 0 2px #f2d59f,inset 2px 3px #a58d6a77;
  caret-color:#174e9a;
}
#answer:focus{border-color:#a56c2d;box-shadow:inset 0 0 0 2px #f2d59f,0 0 0 2px #2759a2}
#answer.punctuation-error{border-color:#ae5039}
#answer.punctuation-error:focus{box-shadow:inset 0 0 0 2px #f2d59f,0 0 0 2px #ae5039}
#answer::placeholder{color:#9b8770}
.progress-rail{height:.51rem;border:2px solid #79583b;border-radius:1px;background:#ceba8d}
#progress-fill{border-radius:0;background:linear-gradient(90deg,#368e3e,#69bc4b);box-shadow:none}
.feedback{color:#765c42}
.feedback.positive{color:#287242}
.feedback.nudge{color:#a4432f}
.small-button{
  border:2px solid #795331;border-radius:2px;
  background:linear-gradient(#f6e3b3,#d6ae71);
  color:#3e2818;
  box-shadow:inset 0 1px #fff6d9,1px 2px #84623d;
  font-family:Georgia,"Trebuchet MS",serif;
}
.small-button:hover{background:#fff0c2}
.accent-button{border-color:#734722;background:linear-gradient(#efd189,#cc9347)}

.tips-panel{
  gap:.35rem;
  padding:.48rem .6rem;
  border:6px solid #6e4326;border-radius:2px;
  background:
    radial-gradient(circle at 9px 9px,#352c21 0 2px,#bca76a 3px 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 9px) 9px,#352c21 0 2px,#bca76a 3px 4px,transparent 5px),
    linear-gradient(#b6d4ee,#82b3de);
  color:#153a63;
  box-shadow:inset 0 0 0 2px #b87f43,0 0 0 2px #2d1c12,0 4px #21150d;
}
.tips-topline>strong{color:#164579;font-family:Georgia,serif;font-size:.7rem;letter-spacing:.08em}
.hint-toggle{
  border:2px solid #7a552f;border-radius:2px;
  background:linear-gradient(#f8eac1,#d8bc82);
  color:#352416;
  box-shadow:1px 2px #86643c;
}
.hint-toggle span{color:#755b37}
.hint-toggle[aria-pressed=true]{border-color:#b2772e;background:linear-gradient(#ffdc70,#dfac3e);color:#3f260e;box-shadow:1px 2px #86643c}
.hint-toggle[aria-pressed=true] span{color:#3f260e}
.active-tip strong{color:#193f6b;font-family:Georgia,serif;font-size:.9rem}
.active-tip p{color:#234f7b;font-size:.68rem}
#tip-sidequest{color:#714414}
.hint-tools{
  border:2px solid #7b572e;border-radius:2px;
  background:#f7e9bf;color:#523517;
}
.hint-tools button{color:#254f82}
.tips-current-keys{
  border:2px solid #628cb0;border-radius:2px;
  background:#d8e9f5;color:#17446f;
}
.tips-current-keys kbd,.key-guide kbd{
  border:2px solid #77869b;border-bottom:4px solid #66778c;border-radius:3px;
  background:linear-gradient(#fff,#dee6ee);
  color:#1d2f46;
  box-shadow:1px 2px #50749b;
}
.key-guide{border:1px solid #5b8eb9;border-radius:2px;background:#b9d8efa8}
.key-guide>div span{color:#245489}
.key-guide small{color:#184574}

.overlay{background:#1c140ed9;backdrop-filter:blur(3px)}
.overlay-panel{
  border:6px solid #694021;border-radius:2px;
  background:linear-gradient(#f6e2b2,#dbb876);
  color:#382818;
  box-shadow:inset 0 0 0 2px #c18948,0 0 0 2px #2e1f12,5px 8px #160e09aa;
}
.overlay-head h2,.results-panel h2{color:#352316;font-family:Georgia,serif}
.close-button{border:2px solid #6b4826;border-radius:2px;background:linear-gradient(#f6deb1,#c89d5d);color:#442b16}
.level-choice{
  border:2px solid #83582d;border-radius:2px;
  background:linear-gradient(#fff0c4,#d8b279);color:#3d2b19;
  font-family:Georgia,serif;
}
.level-choice:hover,.level-choice.current{border-color:#c58e37;background:#ffdf88;color:#362113}
.level-choice.done{border-color:#47833d}
.ticket-graphic{border-color:#8f5e30;background:linear-gradient(#fff7d5,#e6c893);color:#34271a}
.ticket-graphic:before,.ticket-graphic:after{background:#6e4323}
.ticket-graphic h2{color:#3a291a;font-family:Georgia,serif}
.results-panel p{color:#6b4d2e}
.results-standings>div:first-child{border-color:#7a542e;background:#704827;color:#ffdf9a}
.results-standings>div:first-child span{color:#e3c178}
.results-list{border-color:#7a542e;background:#f4dfae;color:#39281a}
.result-row{border-bottom-color:#b18b58}
.result-row small{color:#73573d}
.result-row b{color:#82531e}
.result-row em{color:#357449}
.fireworks{background:
  radial-gradient(circle at 20% 30%,#e8b747 0 2px,transparent 4px),
  radial-gradient(circle at 80% 25%,#315b9c 0 2px,transparent 4px),
  radial-gradient(circle at 62% 11%,#c78634 0 1px,transparent 3px),
  radial-gradient(circle at 36% 8%,#52845d 0 2px,transparent 4px)}
.fireworks::before,.fireworks::after{
  content:"";
  position:absolute;
  width:4.2rem;height:4.2rem;
  border-radius:50%;
  background:repeating-conic-gradient(#d99d34 0deg 5deg,transparent 5deg 31deg);
  mask:radial-gradient(circle,transparent 0 19%,#000 20% 52%,transparent 54%);
  animation:medieval-burst 2.8s ease-out infinite;
}
.fireworks::before{top:11%;left:10%}
.fireworks::after{top:4%;right:12%;background:repeating-conic-gradient(#3d71a9 0deg 5deg,transparent 5deg 31deg);animation-delay:1.1s}
@keyframes medieval-burst{0%{opacity:0;transform:scale(.2) rotate(0)}25%{opacity:1}75%,100%{opacity:0;transform:scale(1.5) rotate(30deg)}}

@media(max-width:1100px){
  .raceboard{grid-template-columns:4.8rem minmax(0,1fr)}
  .practice-grid{grid-template-columns:minmax(0,3fr) minmax(14rem,1fr)}
  .target-text{font-size:clamp(1.1rem,1.9vw,1.75rem)}
}
@media(max-width:900px){
  .raceboard{grid-template-columns:1fr}
  .practice-grid{grid-template-columns:minmax(0,2fr) minmax(12rem,1fr)}
}
@media(max-height:700px){
  .game-screen{grid-template-rows:clamp(3.1rem,8.2vh,3.7rem) minmax(7rem,1fr) clamp(14rem,37vh,16.5rem)}
  .practice-panel{gap:.15rem;padding:.33rem .45rem}
  .tips-panel{gap:.18rem;padding:.35rem .45rem}
}
@media(max-height:580px){
  .game-screen{grid-template-rows:3.2rem minmax(6rem,1fr) 13.3rem}
}

/* A single newly matched character flashes like a small arcade reward. */
.target-text .char.correct{animation:none}
.target-text .char.just-typed{animation:key-spark .48s ease-out both}
@keyframes key-spark{
  0%{color:#55320d;background:#f8d36b;text-shadow:0 0 5px #fff0a5;box-shadow:inset 0 -.18rem #ac6b20}
  45%{color:#215c31;background:#c8dc8c;text-shadow:0 -2px #fff9d3;box-shadow:inset 0 -.1rem #5c9f50}
  100%{color:#247d4b;background:transparent;text-shadow:none;box-shadow:none}
}

/* A release transition covers the game only after the new public files are ready. */
.update-overlay{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  overflow:hidden;background:#0f1525;color:#fff1c5;
  image-rendering:pixelated;
}
.update-overlay::before{
  content:"";position:absolute;inset:-12%;
  background:repeating-conic-gradient(from 5deg at 50% 50%,#ffdd7a 0deg 5deg,#e98d3b 5deg 9deg,transparent 9deg 18deg);
  opacity:0;transform:scale(.05) rotate(-15deg);
  animation:update-wave 1.2s cubic-bezier(.05,.8,.18,1) both;
}
.update-flash{
  position:absolute;inset:0;
  background:radial-gradient(circle,#fff7ce 0 6%,#ffbe5d 13%,#d45d35 25%,transparent 65%);
  animation:update-flash 1.15s ease-out both;
}
.update-sparks{position:absolute;inset:0;pointer-events:none}
.update-sparks i{
  position:absolute;left:calc(50% - .25rem);top:calc(50% - .25rem);
  width:.5rem;height:.5rem;background:#ffda72;box-shadow:0 0 .5rem #ff9039;
  transform:rotate(var(--angle));
  animation:update-spark 1.25s var(--delay) ease-out both;
}
.update-sparks i:nth-child(3n){background:#fff2c1;width:.3rem;height:.3rem}
.update-sparks i:nth-child(4n){background:#8ec7ff;box-shadow:0 0 .5rem #6fbaff}
.update-center{
  position:relative;z-index:1;text-align:center;max-width:min(88vw,35rem);
  padding:1.3rem 2.3rem 1.5rem;border:4px solid #a97435;
  background:linear-gradient(145deg,#2f291e,#171e29 58%,#302414);
  box-shadow:inset 0 0 0 2px #e0b461,0 0 0 5px #392211,0 14px 45px #000a;
  opacity:0;transform:scale(.8);
  animation:update-card .5s .75s ease-out forwards;
}
.update-emblem{display:block;font-size:2.1rem;color:#ffd37d;text-shadow:0 0 1rem #ffaa56}
.update-center h2{margin:.1rem 0 .2rem;font:700 clamp(1.25rem,2.4vw,2rem) Georgia,serif;color:#fff1c5}
.update-center p{margin:0;color:#c9d9e8;font:.9rem Georgia,serif}
.update-spinner{
  width:1.5rem;height:1.5rem;margin:.85rem auto 0;border:3px solid #92713d;
  border-top-color:#ffe4a6;border-right-color:#d29b42;border-radius:50%;
  animation:update-spin .7s linear infinite;
}
.update-overlay.waiting{background:#111827}
@keyframes update-wave{0%{opacity:0;transform:scale(.04) rotate(-15deg)}15%{opacity:1}75%{opacity:.7}100%{opacity:0;transform:scale(2) rotate(12deg)}}
@keyframes update-flash{0%{opacity:0;transform:scale(.15)}18%{opacity:1}100%{opacity:0;transform:scale(2.1)}}
@keyframes update-spark{0%{opacity:0;transform:rotate(var(--angle)) translateX(0) scale(.2)}15%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(var(--distance)) scale(1)}}
@keyframes update-card{to{opacity:1;transform:scale(1)}}
@keyframes update-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.update-overlay::before,.update-flash,.update-sparks i{animation-duration:.01ms}.update-center{animation-delay:0s}.update-spinner{animation-duration:1.5s}}