:root {
    --ink: #101418;
    --ink-2: #181e25;
    --ink-3: #232b34;
    --line: #2f3944;
    --chalk: #f2ede3;
    --chalk-dim: #a9b0b8;
    --red: #c8102e;
    --gold: #e6b422;
    --sky: #8ed0f5;
    --navy: #1b2f5c;
    --display: 'Bungee', 'Impact', 'Arial Black', sans-serif;
    --body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  }
  html, body { height: 100%; }
  [hidden] { display: none !important; }
  body {
    margin: 0; background: var(--ink); color: var(--chalk);
    font-family: var(--body); font-size: 15px; line-height: 1.45;
    -webkit-font-smoothing: antialiased; overflow: hidden;
  }
  button { font: inherit; cursor: pointer; }
  button:focus-visible, .level:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  /* ---------- gallery ---------- */
  #gallery {
    position: absolute; inset: 0; overflow: auto;
    padding: clamp(20px, 4vw, 48px);
    background:
      radial-gradient(1200px 500px at 50% -200px, #1e3a63 0%, transparent 60%),
      var(--ink);
  }
  .masthead { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 36px; }
  .masthead h1 { font-family: var(--display); font-size: clamp(30px, 5vw, 54px); margin: 0; letter-spacing: 0.01em; line-height: 1; }
  .masthead h1 span { color: var(--red); }
  .masthead p { margin: 0; color: var(--chalk-dim); max-width: 46ch; }
  .eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chalk-dim); font-weight: 500; }

  .wall { display: flex; flex-wrap: wrap; gap: 28px 32px; align-items: flex-start; }
  .level {
    position: relative; width: 250px; text-align: left; padding: 0; border: 0;
    background: var(--ink-2); color: inherit; border-radius: 6px;
    box-shadow: 0 1px 0 var(--line), 0 20px 40px -24px #000;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .level:hover { z-index: 6; }
  .level:not([disabled]):hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--line), 0 30px 50px -22px #000; }
  .level[disabled] { cursor: default; opacity: .55; }
  .poster { display: block; width: 250px; height: 340px; border-radius: 6px 6px 0 0; background: linear-gradient(#5db8ea, #bfe6fb 70%, #7fb069 70.5%, #6a9a55); }
  .level[disabled] .poster { background: linear-gradient(#2a333d, #1c2229 70%, #262e36 70.5%, #20272e); }
  .meta { padding: 14px 16px 16px; display: grid; gap: 4px; }
  .meta .name { font-family: var(--display); font-size: 20px; line-height: 1.1; }
  .meta .facts { display: flex; gap: 10px; color: var(--chalk-dim); font-size: 13px; }
  .meta .facts b { color: var(--chalk); font-weight: 500; }
  .tag { position: absolute; top: 12px; left: 12px; background: var(--red); color: #fff; font-family: var(--display); font-size: 11px; padding: 5px 8px 4px; border-radius: 3px; letter-spacing: .04em; }
  .tag.locked { background: var(--ink-3); color: var(--chalk-dim); }
  .play { position: absolute; right: 12px; bottom: 74px; font-family: var(--display); font-size: 12px; background: var(--gold); color: #1a1200; border: 0; padding: 8px 12px; border-radius: 3px; pointer-events: none; }

  .lb {
    position: absolute; left: calc(100% + 12px); top: 0; width: 264px; z-index: 5;
    background: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px 12px;
    opacity: 0; transform: translateX(-8px); transition: opacity .16s ease, transform .16s ease; pointer-events: none;
  }
  .level:hover .lb, .level:focus-visible .lb { opacity: 1; transform: none; }
  .lb h3 { margin: 0 0 10px; font-family: var(--display); font-size: 13px; letter-spacing: .04em; color: var(--gold); }
  .lb ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
  .lb li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; font-size: 14px; }
  .lb li .rank { color: var(--chalk-dim); }
  .lb li .t { font-weight: 700; }
  .lb .empty { color: var(--chalk-dim); font-size: 13px; }
  .lb .foot { margin-top: 10px; font-size: 12px; color: var(--chalk-dim); }
  @media (max-width: 720px) {
    .wall { gap: 28px; }
    .lb { position: static; opacity: 1; transform: none; pointer-events: auto; width: auto; margin: 0; border-radius: 0 0 6px 6px; border-width: 1px 0 0; }
  }

  /* ---------- game ---------- */
  #game { position: absolute; inset: 0; }
  #game canvas { display: block; width: 100%; height: 100%; }
  .hud { position: absolute; inset: 0; pointer-events: none; font-variant-numeric: tabular-nums; }
  .hud .top { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
  .stat { background: rgba(16,20,24,.72); backdrop-filter: blur(6px); border-radius: 4px; padding: 8px 12px; display: grid; gap: 1px; min-width: 96px; }
  .stat .k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-dim); }
  .stat .v { font-family: var(--display); font-size: 20px; line-height: 1; }
  .stat .v.gold { color: var(--gold); }
  .stats { display: flex; gap: 8px; }
  .hud .bottom { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
  .keys { color: var(--chalk); font-size: 12px; background: rgba(16,20,24,.6); padding: 6px 10px; border-radius: 4px; }
  .keys kbd { font: 700 11px var(--body); background: var(--chalk); color: var(--ink); border-radius: 3px; padding: 1px 5px; margin-right: 2px; }
  .toast { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); font-family: var(--display); font-size: 26px; color: var(--gold); text-shadow: 0 2px 0 #000; opacity: 0; transition: opacity .25s; }
  .toast.show { opacity: 1; }
  .altimeter { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); height: 46vh; width: 10px; background: rgba(16,20,24,.55); border-radius: 5px; overflow: hidden; }
  .altimeter i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--gold); border-radius: 5px; }
  .back { pointer-events: auto; background: rgba(16,20,24,.72); color: var(--chalk); border: 1px solid var(--line); padding: 8px 12px; border-radius: 4px; font-size: 13px; }

  .overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,10,14,.66); }
  .card { background: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; padding: 28px 30px; width: min(420px, 90vw); display: grid; gap: 14px; text-align: center; }
  .card h2 { font-family: var(--display); margin: 0; font-size: 34px; line-height: 1; color: var(--gold); }
  .card .big { font-family: var(--display); font-size: 48px; line-height: 1; font-variant-numeric: tabular-nums; }
  .card .sub { color: var(--chalk-dim); }
  .card input { font: inherit; padding: 10px 12px; border-radius: 4px; border: 1px solid var(--line); background: var(--ink); color: var(--chalk); text-align: center; }
  .card .row { display: flex; gap: 10px; justify-content: center; }
  .btn { background: var(--gold); color: #1a1200; border: 0; padding: 10px 16px; border-radius: 4px; font-weight: 700; }
  .btn.quiet { background: var(--ink-3); color: var(--chalk); }
  .start .card { text-align: left; }
  .start .card h2 { color: var(--chalk); }
  .start .card ul { margin: 0; padding-left: 18px; color: var(--chalk-dim); display: grid; gap: 4px; }
  @media (prefers-reduced-motion: reduce) { .level, .lb, .toast { transition: none; } }

*{box-sizing:border-box}#c{touch-action:none}.restart{position:absolute;right:16px;bottom:52px;pointer-events:auto}.touch{display:none}.card{max-height:94dvh;overflow:auto}.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.level,.poster{width:100%}.poster{object-fit:contain}.lb{left:0;top:auto;bottom:0;width:100%;transform:none;box-sizing:border-box}.level:hover .lb{pointer-events:none}.toast{max-width:85vw;text-align:center}.card p{margin:0}@media(pointer:coarse){.touch{position:absolute;bottom:20px;left:16px;right:16px;display:flex;align-items:flex-end;gap:12px;pointer-events:auto}.touch button{background:#172532df;color:#fff;border:1px solid #9eb1bc;border-radius:12px;min-width:55px;min-height:55px;font-weight:bold;touch-action:none}.dpad{display:grid;grid-template-columns:repeat(3,55px);gap:5px;margin-right:auto}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.keys{display:none}.restart{bottom:148px}}@media(max-width:600px){.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.stat{min-width:78px;padding:7px}.stat .v{font-size:17px}.card{padding:20px;width:92vw}.toast{top:27%;font-size:18px}.wall{grid-template-columns:1fr}.level{max-width:360px;margin:auto}.lb{position:static}.play{bottom:auto;top:12px}}
/* Keep the touch arrows in a familiar cross layout. */
.hud .top{flex-wrap:wrap;justify-content:flex-end;gap:8px}.hud .top .stats{margin-right:auto}@media(max-width:600px){.hud .top .stats{width:100%}.hud .top .back{padding:6px 9px;font-size:12px}#chapter{top:150px}}
.controls-card label{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left}.controls-card input[type=range]{width:48%;padding:0}.controls-card input[type=checkbox]{width:20px;height:20px}.controls-card .row{flex-wrap:wrap}#controlsMenu{z-index:20}.top>.back{pointer-events:auto}
.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}
/* Preserve the captured course proportions rather than stretching the artwork. */
img.poster{height:auto;aspect-ratio:500/640;object-fit:cover;background:#adc1cb}
/* One public adventure; prototype courses remain in source. */
#wall{max-width:560px;margin:auto}.level{width:100%}#chapter{display:block}
@media(pointer:coarse){#chapter{position:fixed;top:132px;left:16px;bottom:auto;font-size:12px;max-width:75vw}}
@media(pointer:coarse) and (max-width:600px){#chapter{top:184px}}
#touchStick{width:132px;height:132px;position:relative;flex-shrink:0;margin-right:auto;border:1px solid #b4c3cd88;border-radius:50%;background:#172532aa;touch-action:none}#stickKnob{position:absolute;width:48px;height:48px;left:41px;top:41px;border-radius:50%;background:#dbc087aa;border:1px solid #f0dda6;pointer-events:none}@media(pointer:coarse){#game:not(.use-arrows) .dpad{display:none}.use-arrows #touchStick{display:none}.touch{gap:8px}}
.touch-extras{position:absolute;bottom:142px;left:0;display:flex;gap:6px}.touch-extras button{min-width:48px;min-height:38px;font-size:11px}
/* Avatar studio: contained modal, usable on desktop and phones. */
#avatarCreator{color:#e7e7df;background:#111e26;border:1px solid #40545e;border-radius:20px;width:min(1000px,95vw);max-width:95vw;max-height:94dvh;padding:22px;box-sizing:border-box;overflow:auto;box-shadow:0 30px 100px #0009}
#avatarCreator::backdrop{background:#03090fd9}#avatarCreator header,#avatarCreator footer{display:flex;gap:16px;align-items:center;justify-content:space-between}#avatarCreator h2{font-size:32px;margin:5px 0 15px}#avatarCreator button,#avatarCreator select{font:inherit;color:#eef0e9;background:#273b47;border:1px solid #62747c;border-radius:8px;padding:9px 12px;cursor:pointer}#avatarCreator button:focus-visible,#avatarCreator select:focus-visible{outline:3px solid #eab966;outline-offset:3px}#avatarCreator #avatarSave{background:#e7b56a;color:#17242b;font-weight:700;white-space:nowrap}#avatarCreator p{font-size:13px;color:#b7c4c9;line-height:1.5}.avatar-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:24px}.avatar-stage{position:sticky;top:0;align-self:start;background:#182731;border-radius:14px;overflow:hidden;text-align:center}#avatarCanvas{display:block;width:100%;height:440px;touch-action:none}.avatar-view{display:flex;justify-content:center;gap:6px}.avatar-options label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#c6d2d7}.avatar-options select{width:100%;margin-bottom:12px}#avatarFields{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin-top:18px}#avatarPalettes fieldset{padding:10px 0;border:0;margin:0}#avatarPalettes legend{font-size:13px;color:#c6d2d7;margin-bottom:4px}#avatarCreator .avatar-swatch{width:29px;height:29px;min-width:0;margin:3px;padding:0;border-radius:50%;border:2px solid #ffffff33}#avatarCreator .avatar-swatch[aria-pressed=true]{outline:2px solid #fff;outline-offset:2px}#avatarCreator footer{border-top:1px solid #344751;margin-top:18px;padding-top:14px}.masthead [data-avatar-open]{align-self:center;white-space:nowrap}
@media(max-width:650px){#avatarCreator{padding:14px}.avatar-layout{grid-template-columns:1fr;gap:14px}.avatar-stage{position:relative}#avatarCanvas{height:300px}#avatarCreator h2{font-size:25px}#avatarCreator footer{position:sticky;bottom:-14px;background:#111e26;padding:12px 0}#avatarCreator .avatar-swatch{width:28px;height:28px}#avatarCreator header .eyebrow{font-size:10px}}
.live-status{font-size:11px;color:#dbc79f;max-width:90vw;line-height:1.4}
.clip-panel{display:grid;gap:12px;border-top:1px solid #52616b;padding-top:14px}.clip-panel video{width:100%;max-height:240px;background:#000}
.reaction-submission{display:grid;gap:12px;min-width:0;border-top:1px solid #52616b;padding-top:14px}
.reaction-submission .reaction-field{display:grid;gap:6px;min-width:0}
.reaction-field input,.reaction-field select{box-sizing:border-box;width:100%;min-width:0;max-width:100%;font:inherit;padding:10px;color:#eef0e9;background:#273b47;border:1px solid #62747c;border-radius:8px}
.reaction-submission p{overflow-wrap:anywhere;line-height:1.5}
#accountDialog{color:#e8e8df;background:#17252f;border:1px solid #536978;border-radius:14px;padding:24px;width:min(480px,94vw);max-height:90dvh;overflow:auto}#accountDialog::backdrop{background:#08121ce0}#accountDialog label{display:grid;gap:5px;margin:12px 0}#accountDialog input,#accountDialog textarea{font:inherit;width:100%;padding:9px;box-sizing:border-box}#accountDialog button{font:inherit;padding:10px;margin:5px 0;cursor:pointer}#accountDialog p{line-height:1.5;font-size:14px}#accountDialog .row{display:flex;gap:10px}
#rankingDialog{color:#e8e8df;background:#17252f;border:1px solid #536978;border-radius:14px;padding:24px;width:min(650px,94vw);max-height:90dvh;overflow:auto}#rankingDialog::backdrop{background:#08121ce0}#rankingDialog a{color:#e5bb79}#rankingDialog button{font:inherit;padding:10px}.masthead{flex-wrap:wrap}
#graphicsQuality{font:inherit;color:#eef0e9;background:#273b47;border:1px solid #62747c;border-radius:7px;padding:8px;max-width:100%}#graphicsQuality:focus-visible{outline:3px solid #eab966;outline-offset:3px}
/* Support is offered on wide earned landings, away from active jumps. */
#courseSupport{position:fixed;right:18px;bottom:88px;max-width:240px;background:#142630ed;border:1px solid #879c92;border-radius:12px;padding:12px 16px;color:#f3ead8;z-index:9;display:grid;gap:8px;box-shadow:0 8px 30px #0006}
#courseSupport[hidden]{display:none}
#courseSupport button{background:#e4c894;color:#18262e;border:0;border-radius:8px;padding:10px 14px;font:inherit;cursor:pointer}
#courseSupport small{font-size:11px;color:#bacbc9}
@media(max-width:600px){#courseSupport{top:98px;bottom:auto;right:10px;max-width:210px;padding:9px 12px;font-size:12px}}

/* Private playtest polish: keep the view clear and every phone action reachable. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
#gallery{padding-top:max(clamp(20px,4vw,48px),var(--safe-top));padding-bottom:max(clamp(20px,4vw,48px),var(--safe-bottom))}
a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.overlay{padding:12px max(12px,var(--safe-right)) max(12px,var(--safe-bottom)) max(12px,var(--safe-left));padding-top:max(12px,var(--safe-top));overscroll-behavior:contain}
.overlay .card{width:min(480px,100%);max-height:calc(100dvh - max(12px,var(--safe-top)) - max(12px,var(--safe-bottom)));overscroll-behavior:contain;scroll-padding:16px}
.card .row,#accountDialog .row{flex-wrap:wrap}
.controls-card label input[type=checkbox]{flex:0 0 22px}
.controls-card label input[type=range]{flex:0 0 44%;min-width:0}
.card button,.card a{overflow-wrap:anywhere}
.avatar-options,.avatar-options label,#avatarFields{min-width:0}
#avatarCreator select{min-width:0;max-width:100%}
#avatarCreator footer{flex-wrap:wrap}
#avatarCreator footer p{flex:1 1 180px}
#avatarCreator footer #avatarSave{margin-left:auto}
@media(pointer:coarse){
  button,.btn{min-height:44px}
  .hud .top{top:calc(10px + var(--safe-top));left:calc(10px + var(--safe-left));right:calc(10px + var(--safe-right));gap:6px}
  .hud .top .stats{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:4px;width:100%;margin:0}
  .stat{min-width:0;padding:7px 6px}
  .stat .k{font-size:9px;letter-spacing:.06em}
  .stat .v{font-size:16px;white-space:nowrap}
  .hud .top #btnMenu{position:absolute;top:58px;right:0;min-height:44px;padding:5px 8px;font-size:12px;max-width:106px}
  /* These actions remain in the pause menu, leaving room for the actual climb. */
  .hud .top #btnBack,.hud .top #btnMute,.hud .top #btnShare,.hud #btnRestart{display:none}
  #chapter{position:fixed;left:calc(10px + var(--safe-left));top:calc(72px + var(--safe-top));max-width:calc(100vw - 132px - var(--safe-left) - var(--safe-right));padding:5px 8px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #liveStatus{position:fixed;left:calc(10px + var(--safe-left));top:calc(112px + var(--safe-top));max-width:calc(100vw - 20px - var(--safe-left) - var(--safe-right));font-size:10px;padding:3px 6px;background:#101418bb;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .touch{left:calc(10px + var(--safe-left));right:calc(10px + var(--safe-right));bottom:calc(12px + var(--safe-bottom));gap:8px;pointer-events:none;user-select:none;-webkit-user-select:none}
  .touch button,#touchStick{pointer-events:auto}
  .touch button{min-width:56px;min-height:52px;padding:6px;font-size:12px}
  .touch>button[data-key=Space]{background:#cda968;color:#171e24;border-color:#f4d6a3}
  .touch-extras{left:auto;right:0;bottom:60px;display:grid;grid-template-columns:56px 56px;gap:6px;pointer-events:none}
  .touch-extras button{min-height:44px;min-width:56px;font-size:11px}
  #touchStick{width:124px;height:124px}
  #stickKnob{left:37px;top:37px}
  .dpad{grid-template-columns:repeat(3,44px);gap:3px;pointer-events:none}
  .dpad button{min-width:44px;min-height:48px;padding:3px}
  .altimeter{right:calc(5px + var(--safe-right));width:5px;height:34vh;top:45%}
  #toast{top:calc(148px + var(--safe-top));bottom:auto;font-size:18px}
  #courseSupport{top:calc(148px + var(--safe-top));bottom:auto;right:calc(10px + var(--safe-right));max-width:min(210px,70vw)}
  #avatarCreator .avatar-swatch{width:36px;height:36px;min-height:36px;margin:4px}
  #avatarCreator .avatar-view{flex-wrap:wrap;padding:4px}
  #avatarCreator .avatar-view button{padding:8px;font-size:12px}
  #avatarCreator header{gap:8px}
}
@media(pointer:coarse) and (orientation:landscape){
  .hud .top .stats{width:min(440px,calc(100% - 120px))}
  .hud .top #btnMenu{top:0}
  #chapter{top:calc(66px + var(--safe-top));max-width:55vw}
  #liveStatus{top:calc(98px + var(--safe-top));max-width:55vw}
  #courseSupport{top:calc(66px + var(--safe-top));max-width:210px;padding:8px 12px;font-size:12px}
  #toast{top:calc(130px + var(--safe-top))}
  #avatarCanvas{height:220px}
}
@media(pointer:coarse) and (max-width:350px){
  .hud .top .stat .v{font-size:15px}
  #touchStick{width:116px;height:116px}
  #stickKnob{left:33px;top:33px}
  #avatarFields{grid-template-columns:1fr}
}
#bindingsDialog{width:min(540px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;padding:24px;color:var(--chalk,#e8edf0);background:#162630;border:1px solid #77939d;border-radius:14px;overflow:auto}
#bindingsDialog::backdrop{background:#071117c9}
#bindingsDialog h2{margin-top:0;font-size:25px}
#bindingsDialog select{width:100%;margin:8px 0 12px;min-height:44px;background:#0b1c25;color:#f0e6d2;border:1px solid #708894;border-radius:6px;padding:8px}
.binding-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(112px,40%);align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #49616a}
.binding-row button{min-height:44px;padding:8px;background:#203a46;color:#f5d28b;border:1px solid #79949f;border-radius:6px;font:inherit;overflow-wrap:anywhere}
#bindingStatus{min-height:3em;color:#f5d28b;font-size:14px;line-height:1.45}
#bindingsDialog .row{display:flex;flex-wrap:wrap;gap:8px}
#bindingsDialog .row button{flex:1;min-height:44px}
#btnBindings{margin:8px 0 12px;white-space:normal}
@media(max-width:420px){#bindingsDialog{padding:16px}.binding-row{font-size:14px;grid-template-columns:minmax(0,1fr) minmax(110px,40%)}}
/* The pause shell stays put; only the selected settings section scrolls. */
#controlsMenu .controls-card[data-tabbed]{width:min(820px,94vw);max-height:90dvh;padding:0;display:flex;flex-direction:column;text-align:left;overflow:hidden;border:1px solid #45505b;border-radius:18px;background:#171f28;box-shadow:0 24px 90px #0009}
.pause-header{padding:22px 26px 12px;background:linear-gradient(115deg,#273748,#171f28)}
.pause-header h2{margin:0;font-size:28px}.pause-header .sub{margin:8px 0 0;max-width:72ch;font-size:13px;line-height:1.5}
.pause-tabs{display:flex;flex-wrap:wrap;gap:5px;padding:12px 20px;border-bottom:1px solid #39434d}
.pause-tabs button{border:1px solid transparent;background:transparent;color:#c0c9d3;border-radius:8px;padding:10px 12px;font-weight:600;min-height:44px}
.pause-tabs button[aria-selected=true]{background:#ecc477;color:#18232e}.pause-tabs button:hover{border-color:#a7a098}
.pause-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 26px;scrollbar-gutter:stable;flex:1}
.pause-panel{min-height:200px}.pause-panel h3{font-size:21px;margin:0 0 4px}.pause-intro{color:#acb9c6;margin:0 0 22px;font-size:14px}
.pause-panel>label{padding:14px 0;border-bottom:1px solid #303d49;min-height:30px}.pause-panel>.btn{margin:6px 8px 6px 0}
.pause-panel .clip-panel{margin:0;border:0;padding:0}.pause-panel .clip-panel label{padding:12px 0}
.pause-panel p{max-width:70ch;line-height:1.55}.pause-panel video{max-width:100%;max-height:260px}
.pause-footer{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 26px;border-top:1px solid #39434d;background:#1b2631}.pause-footer .btn{margin:0;min-height:44px}
@media(max-width:550px){#controlsMenu .controls-card[data-tabbed]{width:96vw;max-height:94dvh;border-radius:12px}.pause-header{padding:16px}.pause-header h2{font-size:24px}.pause-tabs{padding:8px;gap:3px}.pause-tabs button{flex:1 0 28%;padding:8px 4px;font-size:12px}.pause-body{padding:16px}.pause-footer{padding:12px 16px}.pause-footer .btn{flex:1;padding:10px;font-size:13px}}
/* Avatar choices stay inside the page, including in embedded browsers. */
.avatar-picker{min-width:0;width:100%;margin-bottom:12px}
#avatarCreator .avatar-picker>[role=combobox]{width:100%;min-height:44px;text-align:left;display:block}
.avatar-choice-list{max-height:220px;overflow-y:auto;border:1px solid #8a9dab;border-radius:8px;margin-top:5px;padding:4px;background:#13212c}
#avatarCreator .avatar-choice-list [role=option]{display:block;width:100%;text-align:left;min-height:44px;border:0;border-radius:5px;background:transparent}
#avatarCreator .avatar-choice-list [aria-selected=true],#avatarCreator .avatar-choice-list .active{background:#e7b56a;color:#17242b}

/* Always-visible, deliberate recording controls. */
#runRecordingBar{position:absolute;right:0;top:52px;display:grid;grid-template-columns:155px minmax(200px,290px);gap:6px;max-width:95vw;pointer-events:auto;z-index:6}
#runRecordingBar button{border:1px solid #f7d271;border-radius:8px;background:#182b36f2;color:#fff;padding:10px 12px;min-height:44px;font:600 13px/1.3 system-ui;cursor:pointer}
#runRecordingBar #recordRunButton{background:#b22e36;border-color:#f59797;font-size:15px}
#runRecordingBar [data-granted=true]{border-color:#79d6aa;background:#194638}
#runRecordStatus{grid-column:1/-1;background:#12232ee8;color:#fff;border-radius:5px;padding:5px 8px;font:12px/1.3 system-ui}
.run-record-dialog{max-width:480px;width:calc(100% - 40px);border:1px solid #d9be7b;border-radius:14px;padding:22px;background:#142731;color:#fff;font:16px/1.5 system-ui;z-index:100}
.run-record-dialog::backdrop{background:#0009}.run-record-dialog label{display:flex;gap:12px;align-items:flex-start;margin:14px 0}.run-record-dialog input{width:20px;height:20px;flex-shrink:0}.run-record-dialog button{padding:10px 16px;margin:8px 6px 0 0;min-height:44px;border-radius:8px;cursor:pointer}
@media(max-width:700px){#runRecordingBar{top:168px;grid-template-columns:120px minmax(150px,220px);max-width:calc(100vw - 32px)}#runRecordingBar button{padding:6px;font-size:11px}#runRecordingBar #recordRunButton{font-size:13px}}

/* World-backed welcome menu, without a gallery step. */
#gallery { display:none !important; }
body.welcome-mode #game > :not(#c):not(#startOverlay):not(#controlsMenu) { display:none !important; }
body.welcome-mode #startOverlay { background:linear-gradient(180deg,rgba(8,12,22,.12),rgba(8,12,22,.48)); }
#startOverlay .card { background:rgba(12,18,28,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);text-align:center;padding:36px;gap:25px;border-radius:18px;width:min(390px,88vw); }
#startOverlay .card > :not(#startName):not(.welcome-actions):not(.welcome-feedback):not(.welcome-player):not(#previousInterruptionNotice):not(.welcome-secondary):not(.welcome-about):not(#welcomePersonalBest) { display:none !important; }
#startOverlay #startName { font-size:clamp(40px,7vw,64px); }
#startOverlay .welcome-actions { flex-direction:column;gap:12px; }
#startOverlay .btn { padding:15px 24px;font-size:18px;border-radius:9px; }
#controlsMenu { z-index:60; }
body.welcome-mode #btnConfirmRestart,body.welcome-mode #btnLeave { display:none; }

body.welcome-mode #pauseDescription { display:none; }

body.welcome-mode #playtestFeedbackButton { display:none; }
/* Interface finish: warm amber actions, charcoal surfaces, consistent controls. */
:root{--ui-surface:#15191f;--ui-raised:#21262e;--ui-edge:#ffffff18;--ui-muted:#aab2bd;--ui-accent:#f0bd65;--gold:#f0bd65;--line:#ffffff18;--body:Inter,'Segoe UI',Arial,sans-serif}
.btn,.back,.pause-tabs button,dialog button,#avatarCreator button{font-family:var(--body);font-weight:600;letter-spacing:.01em;transition:background-color .16s,border-color .16s,box-shadow .16s,transform .16s;min-height:44px}
.btn,.back{border:1px solid var(--ui-edge);border-radius:10px;padding:11px 17px;line-height:1.35}
.btn{background:var(--ui-accent);color:#241a0c;box-shadow:inset 0 1px #ffffff40,0 3px 8px #0002}
.btn.quiet,.back{background:#20252def;color:#e4e8ef;box-shadow:inset 0 1px #ffffff06}
button:not(:disabled):hover{filter:brightness(1.08)}
.btn:not(:disabled):hover,.back:not(:disabled):hover{border-color:#ffffff45;box-shadow:0 5px 16px #0003}
.btn:not(:disabled):active,.back:not(:disabled):active{transform:translateY(1px);box-shadow:none}
button:disabled{opacity:.48;cursor:not-allowed;filter:none}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role=combobox]:focus-visible{outline:2px solid #f0bd65;outline-offset:4px}
.card,dialog,.run-record-dialog{border:1px solid var(--ui-edge);background:var(--ui-surface);color:#f1f3f6;box-shadow:0 24px 80px #0008;border-radius:20px}
.card h2,dialog h2{font-family:var(--body);font-weight:650;letter-spacing:-.035em}
#startOverlay .card{background:linear-gradient(145deg,#1d232ced,#12161de8);border:1px solid #ffffff24;box-shadow:0 32px 90px #0006,inset 0 1px #ffffff12;padding:42px;gap:32px;border-radius:24px;backdrop-filter:none}
#startOverlay #startName{font-family:var(--body);font-size:clamp(40px,5vw,58px);font-weight:650;letter-spacing:-.055em;line-height:1.05}
#startOverlay .btn{font-size:16px;min-height:54px;border-radius:12px}
#startOverlay .btn.quiet{background:#ffffff08;border-color:#ffffff20;color:#d9dee7}
#controlsMenu{background:#090c12b3}
#controlsMenu .controls-card[data-tabbed]{display:grid;grid-template-columns:176px minmax(0,1fr);grid-template-rows:auto minmax(220px,1fr) auto;width:min(920px,94vw);height:min(720px,88dvh);max-height:88dvh;border-radius:22px;background:#15191f;border:1px solid #ffffff21;gap:0}
.pause-header{grid-column:1/-1;padding:26px 30px 20px;background:transparent;border-bottom:1px solid var(--ui-edge)}
.pause-header h2{font:650 27px/1.2 var(--body);letter-spacing:-.035em;color:#f3f5f8}
.pause-header .sub{color:var(--ui-muted);font-size:12px;max-width:76ch}
.pause-tabs{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px;padding:20px 12px;border:0;border-right:1px solid var(--ui-edge);background:#11151b}
.pause-tabs button{display:block;text-align:left;border-radius:9px;padding:12px 14px;color:#aab3c0;font-size:13px;font-weight:550;min-height:46px;border:1px solid transparent}
.pause-tabs button[aria-selected=true]{background:#f0bd6514;color:#f3cb87;border-color:#f0bd6530;box-shadow:inset 3px 0 #f0bd65}
.pause-tabs button:hover{background:#ffffff06;border-color:#ffffff16}
.pause-body{padding:26px 30px;scrollbar-width:thin;scrollbar-color:#49515c transparent;min-width:0}
.pause-panel h3{font:600 20px/1.3 var(--body);letter-spacing:-.025em;color:#edf0f5;margin-bottom:6px}
.pause-intro{font-size:13px;color:#909dab;margin-bottom:24px}
.pause-panel>label{display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:14px;padding:18px 0;border-color:#ffffff0d}
.pause-panel input[type=range]{accent-color:var(--ui-accent);width:min(210px,43%);cursor:pointer;height:22px;flex-shrink:0}
input[type=checkbox]{accent-color:var(--ui-accent);width:18px;height:18px;min-width:18px;cursor:pointer}
.pause-panel label:has(input[type=checkbox]){justify-content:flex-start}
.pause-panel select,dialog select,dialog textarea,dialog input:not([type=checkbox]):not([type=range]),#avatarCreator select{background:#0f1319;color:#eef1f7;border:1px solid #ffffff25;border-radius:9px;padding:11px 12px;font:14px/1.5 var(--body)}
.pause-panel .sub,.pause-panel p{color:#aab4c1;font-size:13px}
.pause-footer{grid-column:1/-1;background:#191e25;border-top:1px solid var(--ui-edge);padding:18px 26px;justify-content:flex-end}
.pause-footer #btnLeave{margin-right:auto;order:-1;background:transparent;border-color:transparent;color:#aeb6c1}
.pause-footer #btnResume{min-width:128px}
#btnConfirmRestart{background:#b3505015;color:#f0aaaa;border-color:#b3505035;box-shadow:none}
.hud .stat{background:#151a22e8;border:1px solid #ffffff13;border-radius:12px;padding:10px 14px;backdrop-filter:none;box-shadow:0 4px 20px #0002}
.stat .v{font-family:var(--body);font-weight:650;font-size:22px;letter-spacing:-.04em;line-height:1.2}
.stat .k{font-size:9px;color:#9ca7b6;letter-spacing:.12em}
#runRecordingBar button{border:1px solid #ffffff21;background:#202630;color:#e8edf5;border-radius:10px;box-shadow:0 3px 12px #0002;font:600 13px/1.3 var(--body);padding:12px 16px}
#runRecordingBar #recordRunButton{background:#b33948;border-color:#ffffff24;font-size:14px;box-shadow:inset 0 1px #ffffff20,0 4px 18px #0003}
#runRecordStatus{background:#141920e8;color:#abb7c5;border:1px solid #ffffff12;border-radius:8px;font-size:11px}
.run-record-dialog{padding:28px;font-family:var(--body);font-size:14px;line-height:1.6}
.run-record-dialog::backdrop,dialog::backdrop{background:#080b12ba}
.run-record-dialog button,dialog button{background:#282f39;color:#eef1f7;border:1px solid #ffffff22;border-radius:9px;padding:11px 18px}
.run-record-dialog [data-yes]{background:#f0bd65;color:#241a0c;border-color:#f0bd65}
#avatarCreator{background:#15191f;border-color:#ffffff22;border-radius:20px;font-family:var(--body)}
#avatarCreator .avatar-picker>[role=combobox]{background:#202630;color:#edf0f5;border:1px solid #ffffff22;border-radius:9px;padding:12px}
#avatarCreator .avatar-choice-list{background:#11161e;border-color:#ffffff25;padding:6px;border-radius:10px}
#avatarCreator .avatar-choice-list [role=option]{border-radius:6px;padding:10px}
#avatarCreator .avatar-choice-list [aria-selected=true]{background:#f0bd6526;color:#f3ca87}
#playtestFeedbackButton{background:#20252def !important;border-color:#ffffff26 !important;border-radius:10px !important;padding:11px 15px !important;color:#cbd3df !important}
body.welcome-mode #restartDescription{display:none}
@media(max-width:640px){
 #controlsMenu .controls-card[data-tabbed]{display:flex;width:96vw;height:92dvh;max-height:92dvh;border-radius:16px}
 .pause-header{padding:20px}.pause-header h2{font-size:24px}
 .pause-tabs{flex-direction:row;overflow-x:auto;flex-shrink:0;border-right:0;border-bottom:1px solid var(--ui-edge);padding:10px;gap:4px}
 .pause-tabs button{flex:0 0 auto;min-height:42px;padding:10px 13px;font-size:12px;white-space:nowrap;text-align:center}
 .pause-tabs button[aria-selected=true]{box-shadow:inset 0 -2px #f0bd65}
 .pause-body{padding:20px}.pause-footer{padding:14px 18px}.pause-panel>label{gap:12px}
 #startOverlay .card{padding:32px;width:min(350px,84vw);box-sizing:border-box}
 .hud .stat{padding:7px 9px}.stat .v{font-size:18px}
}
@media(prefers-reduced-motion:reduce){button,.btn,.back,.pause-tabs button{transition:none !important;transform:none !important}}
/* Keep contextual prompts clear of gameplay controls. */
#courseSupport{left:18px;right:auto;bottom:108px;top:auto;background:#171d26ed;border:1px solid #ffffff24;border-radius:12px;box-shadow:0 8px 26px #0003}
#courseSupport button{background:#f0bd65;color:#241a0c;font:600 13px var(--body);min-height:44px;border-radius:9px}
#playtestFeedbackButton{bottom:108px !important}
@media(max-width:640px){
 .hud .top{top:12px;left:12px;right:12px}
 .hud .top .stats{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:5px;width:100%;margin:0}
 .hud .top .stat{min-width:0;padding:8px}.stat .v{font-size:17px}.stat .k{font-size:8px;letter-spacing:.06em}
 .hud .top #btnMenu{position:absolute;left:0;right:auto;top:60px;min-width:70px;min-height:44px}
 .hud .top #btnMute,.hud .top #btnShare{display:none}
 #runRecordingBar{top:60px;right:0;max-width:calc(100vw - 110px);width:210px}
 #runRecordingBar button{min-height:44px;padding:10px;font-size:13px}
 #runRecordStatus{font-size:10px;padding:4px 7px}
 #courseSupport{top:164px;bottom:auto;left:12px;right:auto;max-width:170px;padding:0;background:transparent;border:0;box-shadow:none}
 #courseSupport>span,#courseSupport>small{display:none}
 #courseSupport button{font-size:12px;min-height:44px;padding:10px 12px}
 #playtestFeedbackButton{top:164px !important;bottom:auto !important;right:12px !important;max-width:165px;font-size:11px !important;min-height:44px}
 .hud .bottom .keys:not(#chapter){display:none}
}
/* Custom finish on native inputs retains keyboard and screen-reader behavior. */
.pause-panel input[type=checkbox],.run-record-dialog input[type=checkbox]{appearance:none;position:relative;display:inline-block;width:20px;height:20px;min-width:20px;margin:0;border:1px solid #ffffff38;border-radius:6px;background:#0e131a;vertical-align:middle}
.pause-panel input[type=checkbox]:checked,.run-record-dialog input[type=checkbox]:checked{background:#f0bd65;border-color:#f0bd65}
.pause-panel input[type=checkbox]:checked::after,.run-record-dialog input[type=checkbox]:checked::after{content:'';position:absolute;left:4px;top:5px;width:8px;height:4px;border-left:2px solid #211708;border-bottom:2px solid #211708;transform:rotate(-45deg)}
.pause-panel input[type=range]{appearance:none;background:transparent}
.pause-panel input[type=range]::-webkit-slider-runnable-track{height:4px;background:#424953;border-radius:8px}
.pause-panel input[type=range]::-webkit-slider-thumb{appearance:none;width:17px;height:17px;margin-top:-6.5px;border:2px solid #f7d29a;border-radius:50%;background:#f0bd65;box-shadow:0 2px 6px #0005}
#avatarCreator .avatar-swatch{width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border-radius:50%;flex-shrink:0}
#avatarCreator footer{background:#15191f}
@media(max-width:640px){
 #chapter{position:fixed;top:auto;bottom:208px;left:12px;max-width:calc(100vw - 24px);font-size:10px;pointer-events:none}
 #liveStatus{position:fixed;top:auto;bottom:184px;left:12px;max-width:calc(100vw - 24px);font-size:10px;pointer-events:none}
}

/* Prominent leaderboard entry, clear of capture and touch controls. */
button.leaderboard-entry{background:#bd3047;color:#fff;border:1px solid #ef7b8d;border-radius:12px;min-height:48px;padding:12px 22px;font-weight:750;box-shadow:0 5px 18px #0003;cursor:pointer;pointer-events:auto}
button.leaderboard-entry:hover{background:#d33d56}button.leaderboard-entry:focus-visible{outline:3px solid #ffd17c;outline-offset:3px}
#leaderboardGame{position:absolute;left:0;top:84px;min-width:180px}
#leaderboardSettings{background:#bd3047;color:#fff}
@media(max-width:640px){#leaderboardGame{top:112px;width:70px;min-width:70px;min-height:44px;padding:4px;font-size:11px;padding:10px 14px;font-size:13px}.pause-footer{flex-wrap:wrap}#leaderboardSettings{flex:1 0 100%;}}

@media(max-width:640px){#courseSupport{top:176px}#playtestFeedbackButton{top:176px !important}}

.welcome-player{margin:16px 0;text-align:left}.welcome-player label{display:block;margin-bottom:6px;font-weight:600}.welcome-player input{box-sizing:border-box;width:100%}.welcome-player .sub{margin:6px 0 10px}.welcome-player .row{flex-wrap:wrap;gap:8px}

#loadingScreen{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0b131f;color:#f0e7d5;text-align:center;padding:24px}#loadingScreen[hidden]{display:none}#loadingScreen progress{width:min(280px,80vw);accent-color:#ed5b4b}

@media(pointer:coarse){#touchMore{position:absolute;right:0;bottom:60px;min-height:44px}.touch-extras{bottom:112px;grid-template-columns:repeat(3,56px)}.touch-extras[hidden]{display:none!important}}

#previousInterruptionNotice{font-size:13px;line-height:1.45;color:#e2c799}#startOverlay #previousInterruptionNotice .btn{font-size:13px;min-height:38px;padding:8px 12px;margin-top:8px}

/* Creative interface finish: additive item5 layer */
/* Add after existing style.css. Presentation only: retain all IDs, copy and events. */
:root{--finish-bg:#101923;--finish-surface:#182330;--finish-raised:#213142;--finish-line:#354858;--finish-text:#f4f7fa;--finish-muted:#becbd6;--finish-red:#c8344e;--finish-focus:#8be0eb;--finish-radius:18px}
#startOverlay .card,#controlsMenu .controls-card,dialog{color:var(--finish-text);background:linear-gradient(145deg,#1a2836,#111923 75%);border:1px solid var(--finish-line);border-radius:var(--finish-radius);box-shadow:0 24px 80px #0008,inset 0 1px #ffffff0a;font-family:var(--body);box-sizing:border-box}
dialog{width:min(680px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:28px;overflow:auto;scrollbar-width:thin;scrollbar-color:#506579 #182330}
dialog::backdrop{background:#050c16bd}
dialog h2,#controlsTitle{font:700 clamp(24px,3vw,32px)/1.12 var(--body);letter-spacing:-.035em;margin:0 0 14px}
dialog h3{font-size:18px;letter-spacing:-.02em;margin:24px 0 10px}
dialog p,dialog label,dialog summary{line-height:1.55}
dialog p,.pause-intro,.pause-panel p,#pauseDescription{color:var(--finish-muted)}
dialog .sub{font-size:12px;line-height:1.55;color:var(--finish-muted)}
dialog button,#startOverlay .btn,#controlsMenu .btn,.pause-tabs button{min-height:44px;border-radius:10px;border:1px solid var(--finish-line);background:var(--finish-raised);color:var(--finish-text);font:600 14px/1.3 var(--body);padding:12px 17px;box-shadow:inset 0 1px #ffffff06;transition:background .15s,border-color .15s}
dialog button:hover,#controlsMenu .btn:hover,#startOverlay .btn:hover{background:#2c4053;border-color:#607a90;transform:none}
dialog button:disabled,#controlsMenu button:disabled{opacity:.5;cursor:not-allowed}
dialog :is(button,input,select,textarea,summary,[role=combobox]):focus-visible,#startOverlay :is(button,input):focus-visible,#controlsMenu :is(button,input,select):focus-visible{outline:3px solid var(--finish-focus);outline-offset:3px;box-shadow:0 0 0 6px #07121a}
#startOverlay .card{width:min(520px,calc(100vw - 32px));padding:38px;text-align:left;border-top:3px solid var(--finish-red)}
#startOverlay #startName{font:800 clamp(38px,5vw,60px)/1 var(--body);letter-spacing:-.05em;margin:8px 0 24px;color:#fff}
#startOverlay .eyebrow{color:#f58c9a;letter-spacing:.16em;font-size:11px}
#startOverlay .welcome-player{border-top:1px solid var(--finish-line);padding-top:20px;margin-top:22px}
#startOverlay .welcome-player label{color:#edf3f8;font-size:13px;margin-bottom:8px}
#startOverlay .welcome-player .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#startOverlay .welcome-player .btn{font-size:12px;padding:10px 12px}
#startOverlay .welcome-actions{display:flex;gap:10px;margin-top:24px}
#startOverlay #btnStart{flex:1;background:var(--finish-red);border-color:#e45f74;color:white;min-height:52px;font-size:16px;box-shadow:0 8px 22px #aa18322b}
#startOverlay #btnStart:hover{background:#e13e59}
#startOverlay #btnWelcomeSettings{background:transparent;min-width:108px}
#welcomeGuestName,dialog input:not([type=checkbox]):not([type=range]),dialog select,dialog textarea{box-sizing:border-box;max-width:100%;background:#0d1620;color:var(--finish-text);border:1px solid #4b6072;border-radius:9px;font:14px/1.45 var(--body);padding:12px;min-height:44px}
#welcomeGuestName::placeholder,dialog input::placeholder{color:#a0afbb}
#controlsMenu .controls-card[data-tabbed]{border-top:3px solid var(--finish-red)}
.pause-header{padding:26px 30px;background:transparent;border-bottom:1px solid var(--finish-line)}
.pause-tabs{background:#101923;border-right:1px solid var(--finish-line);gap:7px;padding:16px 12px}
.pause-tabs button{text-align:left;background:transparent;border-color:transparent;color:#bdcbd7;padding:12px 15px}
.pause-tabs button[aria-selected=true]{background:#294152;color:#e0f8fb;border-color:#4c6e80;box-shadow:inset 3px 0 var(--finish-focus)}
.pause-body{padding:24px 30px;background:transparent;min-width:0}
.pause-panel>label{border-bottom:1px solid #30404f;padding:16px 0}
.pause-panel input[type=range]{accent-color:var(--finish-focus)}
.pause-panel input[type=range]::-webkit-slider-thumb{background:var(--finish-focus);border-color:#d1fbff}
.pause-panel input[type=checkbox]:checked,.run-record-dialog input[type=checkbox]:checked{background:var(--finish-focus);border-color:var(--finish-focus)}
.pause-footer{background:#101923;border-top:1px solid var(--finish-line);gap:9px;padding:16px 24px}
#controlsMenu #btnResume{background:#e9f3f8;border-color:#e9f3f8;color:#13222e;font-weight:750}
#controlsMenu #btnLeave{color:#c4d2de}
button.leaderboard-entry,#leaderboardSettings,#runRecordingBar #recordRunButton{background:var(--finish-red);color:#fff;border:1px solid #e96379;border-radius:11px;font-weight:750;box-shadow:0 4px 16px #0003}
#controlsMenu #leaderboardSettings{background:var(--finish-red);border-color:#e96379;color:#fff}
#rankingDialog{width:min(760px,calc(100vw - 32px))}
#rankingCategories,#rankingScopes{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
#rankingCategories button,#rankingScopes button{font-size:12px;padding:10px 14px}
#rankingCategories button[aria-pressed=true],#rankingScopes button[aria-pressed=true]{background:#304d60;border-color:#7bc2d3;color:#edfcff}
#rankingRows{border:1px solid var(--finish-line);border-radius:12px;padding:12px;background:#111c27;min-height:48px}
#rankingRows table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
#rankingRows td,#rankingRows th{padding:11px 8px;border-bottom:1px solid #30404e;text-align:left;overflow-wrap:anywhere}
dialog details{border:1px solid var(--finish-line);border-radius:10px;padding:12px 14px;margin:14px 0;background:#14202c}
dialog summary{cursor:pointer;color:#e2edf5;font-weight:600;min-height:24px}
#accountForm label{display:grid;gap:7px;margin:16px 0;color:#dae6ef;font-size:13px}
#accountForm .row{gap:8px;flex-wrap:wrap}
#accountDialog #accountClose,#rankingClose{margin-top:18px}
.run-record-dialog{font-size:14px;line-height:1.6;padding:28px}
.run-record-dialog label{display:flex;align-items:flex-start;gap:11px;padding:12px 0;border-bottom:1px solid #30404e}
.run-record-dialog input[type=checkbox]{flex:0 0 20px;margin-top:2px}
.run-record-dialog button{margin:8px 6px 0 0}
.run-record-dialog [data-yes],.run-record-dialog [data-start],#avatarSave{background:var(--finish-red);border-color:#e96379;color:#fff}
#avatarCreator{width:min(920px,calc(100vw - 32px));background:var(--finish-bg);border-color:var(--finish-line);padding:0}
#avatarCreator header,#avatarCreator footer{padding:20px 24px;background:#182330;border-color:var(--finish-line)}
#avatarCreator .avatar-options{padding:20px;min-width:0}
#avatarCreator fieldset{border-color:var(--finish-line);border-radius:10px}
#avatarCreator .avatar-picker>[role=combobox],#avatarCreator .avatar-choice-list{background:#172634;border-color:#506579;color:#f4f7fa}
#avatarCreator .avatar-choice-list [aria-selected=true]{background:#35566b;color:#fff}
#avatarCreator .avatar-swatch{min-width:40px;min-height:40px;padding:0}
#avatarCreator #avatarSave{background:var(--finish-red);border-color:#e96379;color:#fff}
#avatarCreator .avatar-view{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
#avatarCreator #avatarRandom{margin-right:6px}
@media(max-width:640px){dialog,.run-record-dialog{padding:20px;max-height:calc(100dvh - 24px);width:calc(100vw - 24px);max-width:calc(100vw - 24px)}#startOverlay .card{padding:26px;width:calc(100vw - 28px);max-height:calc(100dvh - 28px);overflow:auto}#startOverlay #startName{font-size:42px}#startOverlay .welcome-actions{gap:8px}#startOverlay .welcome-player .row{grid-template-columns:1fr}#controlsMenu .controls-card[data-tabbed]{width:calc(100vw - 20px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px)}.pause-header{padding:20px}.pause-tabs{padding:10px;gap:5px;border-right:0;border-bottom:1px solid var(--finish-line)}.pause-tabs button{padding:10px 13px;min-height:44px}.pause-tabs button[aria-selected=true]{box-shadow:inset 0 -3px var(--finish-focus)}.pause-body{padding:18px}.pause-footer{padding:12px;gap:8px}#rankingDialog{width:calc(100vw - 24px)}#rankingRows{padding:8px}#avatarCreator{width:calc(100vw - 24px)}#avatarCreator header,#avatarCreator footer{padding:16px}#avatarCreator .avatar-options{padding:16px}}
@media(prefers-reduced-motion:reduce){dialog button,#startOverlay .btn,#controlsMenu .btn,.pause-tabs button{transition:none}}

/* Scoped private-testing HUD: keep inspection controls clear of recording. */
#privateQaStatus{display:flex;align-items:center;gap:10px;border:1px solid var(--finish-line);border-radius:11px!important;background:#142431f2!important;color:var(--finish-text)!important;max-width:calc(100vw - 28px)!important;box-sizing:border-box}
#privateQaStatus>span{line-height:1.4}
#privateQaStatus button{flex-shrink:0;min-height:44px;padding:8px 12px;border:1px solid #607a90;border-radius:8px;background:var(--finish-raised);color:var(--finish-text);font:600 12px/1.3 var(--body)}
#privateQaStatus button:hover{background:#2c4053}
#privateQaStatus button:focus-visible{outline:3px solid var(--finish-focus);outline-offset:3px}
#testResetHUD{min-height:44px;min-width:88px;white-space:nowrap}
@media(max-width:640px){
 #game:has(#privateQaStatus) .hud .top #testFlyHUD{position:absolute;left:0;right:auto;top:112px;width:70px;min-width:70px;min-height:44px;padding:4px;font-size:11px}
 #game:has(#privateQaStatus) .hud .top #testResetHUD{position:absolute;left:78px;right:auto;top:112px;width:70px;min-width:70px;min-height:44px;padding:4px;font-size:11px}
 #privateQaStatus{left:12px!important;top:212px!important;max-width:calc(100vw - 24px)!important}
 #game:has(#privateQaStatus) #testFlightNotice{left:12px!important;top:282px!important;transform:none!important;max-width:calc(100vw - 24px)!important;text-align:left!important}
}
@media(pointer:coarse) and (orientation:landscape) and (min-width:641px){
 #game:has(#privateQaStatus) .hud .top .stats{margin-right:80px;width:min(440px,calc(100% - 342px))}
 #game:has(#privateQaStatus) .hud .top #testFlyHUD{position:absolute;left:0;right:auto;top:0;min-width:148px;min-height:44px}
 #game:has(#privateQaStatus) .hud .top #testResetHUD{position:absolute;left:158px;right:auto;top:0;min-width:88px;min-height:44px}
 #game:has(#privateQaStatus) #testFlightNotice{left:14px!important;top:164px!important;transform:none!important;max-width:310px!important;text-align:left!important}
}
/* A short viewport must scroll settings, never the pinned title or Resume. */
@media(min-width:641px) and (max-height:500px){
 #controlsMenu .controls-card[data-tabbed]{grid-template-rows:auto minmax(0,1fr) auto}
 #controlsMenu .pause-header{padding:12px 20px}
 #controlsMenu .pause-header h2{font-size:22px;margin-bottom:8px}
 #controlsMenu .pause-tabs{min-height:0;overflow-y:auto}
 #controlsMenu .pause-footer{padding:10px 16px}
}

/* Visible payment choices, with direct links below each QR. */
#supportQR{padding:16px;border:2px solid #f0bd65;border-radius:14px;margin:0 0 20px;background:#18232e}
#supportQR[hidden],#menuDonate[hidden]{display:none}
#supportQR h3{margin:0 0 6px;color:#ffda88}
.support-choices{display:flex;flex-wrap:wrap;gap:16px;margin:14px 0}
.support-choice{display:flex;flex:1 1 180px;align-items:center;flex-direction:column;gap:10px;min-width:0}
#supportQR canvas{width:164px;height:164px;max-width:100%;image-rendering:pixelated;border-radius:3px}
.support-choice a{white-space:normal;text-align:center}
.support-choice small{color:#d4dce5}
#menuDonate{border-color:#f0bd65;color:#ffda88}
#game .top #donateHUD{pointer-events:auto;background:#f0bd65;color:#241a0c;border:1px solid #ffda88;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box}
#game .top #donateHUD[hidden]{display:none}
@media(max-width:640px){
 #game .top #donateHUD{position:absolute;left:0;top:164px;width:70px;padding:8px 4px;font-size:13px}
 #game:has(#donateHUD:not([hidden])) #courseSupport{display:none}
 #game:has(#donateHUD:not([hidden])) #privateQaStatus{top:232px!important}
}
/* Subtitle presentation remains outside menus and never catches pointer input. */
.announcer-subtitle{position:fixed;bottom:9%;left:50%;transform:translateX(-50%);width:max-content;max-width:min(88vw,760px);box-sizing:border-box;padding:8px 16px;border-radius:8px;background:#091624b8;color:#fff3d8;font:800 17px/1.35 Nunito,sans-serif;text-align:center;pointer-events:none;z-index:35;margin:0;text-shadow:0 1px 3px #000}
/* Legal details remain available in Settings; their page has no game state. */
#settingsLegal{margin-top:8px;font-size:15px;font-weight:600}
#settingsLegal>a{display:inline-flex;align-items:center;min-height:44px;color:#d3e2ed;text-decoration:underline;text-underline-offset:3px}
#settingsLegal>a:hover{color:#fff4de}
#settingsLegal>a:focus-visible,.legal-page a:focus-visible{outline:3px solid #7ff4fa;outline-offset:3px;border-radius:3px}
.legal-link-note{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.legal-page{height:auto;min-height:100dvh;overflow:auto;box-sizing:border-box;padding:clamp(20px,5vw,52px);background:linear-gradient(155deg,#26364a,#152231 75%);font-family:Nunito,'Trebuchet MS',sans-serif;color:#fff4de}
.legal-page main{box-sizing:border-box;max-width:680px;margin:0 auto;padding:clamp(20px,4vw,36px);border:2px solid #647185;border-radius:20px;background:#192635;box-shadow:0 8px 0 #0b1420}
.legal-page .legal-brand{display:block;width:min(100%,320px);height:auto;margin:0 auto 24px}
.legal-page h1{font-size:clamp(26px,5vw,34px);line-height:1.2;margin:0 0 24px;font-weight:900}
.legal-page h2{font-size:20px;line-height:1.3;margin:24px 0 8px;font-weight:800}
.legal-page h3{font-size:18px;line-height:1.3;margin:24px 0 8px;font-weight:800}
.legal-page p{font-size:16px;line-height:1.6;margin:8px 0;color:#d3e2ed}
.legal-page p a{color:#ffda77;text-underline-offset:3px;overflow-wrap:anywhere}
.legal-page .legal-return{display:inline-flex;align-items:center;min-height:44px;margin-top:24px;color:#ffda77;font-weight:800;text-underline-offset:4px}

/* Primary phone actions: Crouch beside Jump, with room for the thumbstick. */
@media(pointer:coarse){
 .touch-actions{display:grid;grid-template-columns:repeat(2,56px);gap:8px;flex-shrink:0}
 .touch-actions>button[data-key=Space]{background:#cda968;color:#171e24;border-color:#f4d6a3}
 #touchMore{bottom:120px}
 .touch-extras{bottom:172px;grid-template-columns:repeat(2,56px)}
}

/* Keep optional support in the menu instead of covering phone gameplay. */
@media(pointer:coarse){#game #donateHUD,#game #courseSupport{display:none!important}}