/* Base race layout and water feedback; live Cup presentation is in cup-ui.css. */

@font-face{font-family:Archivo;src:url('/game/fonts/archivo.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  /* Canvas is a defended value: the reef's own deep water, never a UI grey. */
  --water:#061d27; --panel:#0b2933; --panel-2:#123844;
  --ink:#f2efdf; --muted:#a2bab9; --edge:#c2d5ce24;
  /* Accent contract: --you is the player and nothing else.
     --gold is CREDIT and nothing else. Any second use is a defect. */
  --you:#d8ff8e; --gold:#f0dcae; --hot:#ff9a6b;
  --radius:14px;            /* one radius family: 14px surfaces, 0 on type */
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--water);color:var(--ink);font-family:Archivo,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
button,select{font:inherit;color:inherit}

/* ── preview chrome (not part of the game) ── */
.bar{display:flex;align-items:center;gap:16px;padding:10px 20px;border-bottom:1px solid var(--edge);
  background:#04151c;position:sticky;top:0;z-index:40}
.bar img{display:block}
.flag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hot);
  border:1px solid #ff9a6b55;border-radius:99px;padding:3px 10px}
.compare{margin-left:auto;font-size:13px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--edge)}
.compare:hover{color:var(--ink)}

.cup{max-width:1280px;margin:0 auto;padding:18px 20px 60px}

/* ── stage ── */
.stage{position:relative;height:clamp(320px,54vh,600px);border-radius:var(--radius);overflow:hidden;
  background:#0a2b34;border:1px solid var(--edge)}
#race{position:absolute;inset:0;width:100%;height:100%;display:block}

/* the scene mounts these itself */
.race-labels{position:absolute;inset:0;pointer-events:none}
.race-labels button{position:absolute;top:0;left:0;pointer-events:auto;border:0;cursor:pointer;
  background:transparent;color:var(--ink);font-size:13px;font-weight:500;letter-spacing:.01em;
  padding:4px 2px;white-space:nowrap;text-shadow:0 1px 14px #02131aee,0 0 3px #02131a}
.race-labels button.yours{color:var(--you)}
.race-labels button>span:first-child{position:absolute}
.race-connectors{position:absolute;inset:0;width:100%;height:100%}
.race-connectors line{stroke-width:1;opacity:.32}
.course-markers{position:absolute;inset:0;pointer-events:none}
.course-markers span{position:absolute;font-size:10px;letter-spacing:.2em;font-weight:500;color:#cfe6e4;
  text-shadow:0 1px 10px #02131a}

/* phase gating */
[data-when]{display:none}
.cup[data-phase="gate"] [data-when~="gate"],
.cup[data-phase="countdown"] [data-when~="countdown"],
.cup[data-phase="racing"] [data-when~="racing"],
.cup[data-phase="finish"] [data-when~="finish"]{display:var(--show,block)}

/* ── gate copy over the reef ── */
.gate-copy{position:absolute;left:clamp(18px,3.4vw,44px);top:clamp(18px,4vw,48px);max-width:min(52%,460px)}
.eyebrow{margin:0 0 10px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#bcd6d4;
  text-shadow:0 1px 12px #02131a}
.gate-copy h1{margin:0;font-size:clamp(30px,4.8vw,60px);line-height:.88;font-weight:200;
  letter-spacing:-.045em;text-shadow:0 2px 30px #02131aaa}
.gate-copy .sub{margin:16px 0 0;font-size:clamp(13px,1.3vw,16px);line-height:1.5;color:#dceceb;max-width:30ch;
  text-shadow:0 1px 16px #02131a}

/* ── countdown ──
   The three seconds before the gun are the only quiet moment there will be, so
   the controls are taught here rather than left for the player to discover. */
.countdown{--show:grid;position:absolute;inset:0;place-content:center;justify-items:center;gap:26px;
  pointer-events:none;background:#02131a5c;backdrop-filter:blur(2px)}
.countdown>span{font-size:clamp(76px,13vw,168px);font-weight:150;line-height:.75;letter-spacing:-.06em;
  color:#fff;text-shadow:0 8px 70px #02131a99;animation:swell 1s ease-out}
@keyframes swell{from{transform:scale(1.25);opacity:0}35%{opacity:.96}to{transform:scale(1);opacity:.9}}
.teach{margin:0;padding:0;list-style:none;display:grid;gap:12px;justify-items:start}
.teach li{display:flex;align-items:center;gap:9px;font-size:clamp(12px,1.35vw,15px);color:#dbeceb}
.teach span{margin-left:5px;color:#a8c3c1}
kbd{font:inherit;font-size:.86em;font-weight:500;line-height:1;color:#eaf4f2;
  border:1px solid #ffffff3d;border-radius:5px;padding:5px 8px;min-width:30px;text-align:center}

/* ═══ the race ═══════════════════════════════════════════════════════════
   Everything below is a state of the water, not a widget on top of it. */
.hud{--show:block;position:absolute;inset:0;pointer-events:none}

/* BREATH. No bar. The water closes in and the colour drains, the way a diver
   narrows as the air goes. --strain runs 0 (fresh) to 1 (empty). */
.strain{position:absolute;inset:0;
  background:radial-gradient(120% 96% at 50% 50%,transparent 44%,#02141c calc(88% - var(--strain,0)*22%));
  opacity:calc(.2 + var(--strain,0)*.6);transition:opacity .5s linear}
.stage[data-winded] #race{filter:saturate(.55) brightness(.9)}
#race{transition:filter .7s ease}

/* EFFORT. Streaks of passing water when you spend breath or take a tow.
   Nothing is written; you just go faster and the reef smears. */
.rush{position:absolute;inset:0;opacity:var(--rush,0);transition:opacity .35s ease;overflow:hidden}
.rush i{position:absolute;left:-30%;height:1px;width:34%;
  background:linear-gradient(90deg,transparent,#dff6ff9c,transparent);
  animation:streak 1.15s linear infinite}
.rush i:nth-child(1){top:22%;animation-delay:0s;animation-duration:.9s}
.rush i:nth-child(2){top:35%;animation-delay:.22s}
.rush i:nth-child(3){top:48%;animation-delay:.46s;animation-duration:1s}
.rush i:nth-child(4){top:61%;animation-delay:.1s;animation-duration:.82s}
.rush i:nth-child(5){top:74%;animation-delay:.63s}
.rush i:nth-child(6){top:88%;animation-delay:.36s;animation-duration:1.3s}
@keyframes streak{to{transform:translateX(420%)}}

/* THE RAILS. Everything is pinned to the edge of the frame and separated by a
   hairline, the way a cockpit or a viewfinder reads. Nothing floats in a
   rounded translucent card, which is the habit that made the first pass look
   like a dashboard parked on top of a reef. */
.rail{position:absolute;left:0;right:0;display:flex;align-items:center;
  gap:clamp(14px,2.4vw,30px);padding:0 clamp(14px,2.2vw,26px);
  background:linear-gradient(#02131acc,#02131a00)}
.rail-top{top:0;height:clamp(58px,7vw,74px);border-bottom:1px solid #ffffff1f}
.rail-bottom{bottom:0;height:clamp(54px,6.4vw,66px);align-items:center;
  background:linear-gradient(#02131a00,#02131ae0);border-top:1px solid #ffffff1f}
.rail p{margin:0}

.place{display:flex;align-items:baseline;gap:.1em;color:#fff;transition:color .3s ease;min-width:2.6em}
.place b{font-size:clamp(30px,3.9vw,50px);font-weight:300;letter-spacing:-.045em;line-height:.9}
.place sup{font-size:clamp(11px,1.15vw,14px);font-weight:500;letter-spacing:.04em;opacity:.7}
.place[data-place="1"]{color:var(--you)}
.place[data-place="3"]{color:#ffc7ad}

.leg{flex:1;text-align:center}
.leg b{display:block;font-size:clamp(13px,1.5vw,18px);font-weight:300;letter-spacing:-.015em;color:#eaf4f2}
.leg i{display:block;margin-top:4px;font-style:normal;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:#8fadab}
.pot{text-align:right}
.pot b{font-size:clamp(17px,1.9vw,23px);font-weight:400;color:var(--gold);letter-spacing:-.02em}
.pot i{font-style:normal;font-size:9.5px;letter-spacing:.2em;color:#8fadab;margin-left:6px}

/* THE ORDER. Three lines against the right edge with the gap in seconds, which
   is the one question a racer asks constantly. Hairlines, not boxes. */
.order{position:absolute;right:0;top:clamp(70px,8.4vw,88px);margin:0;padding:0 clamp(14px,2.2vw,26px);
  list-style:none;display:grid;gap:0;text-align:right;min-width:clamp(150px,17vw,200px)}
.order li{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px solid #ffffff14}
.order li:last-child{border-bottom:0}
.order .who{font-size:clamp(12px,1.35vw,15px);font-weight:300;color:#cfe3e1}
.order li[data-you] .who{color:var(--you);font-weight:400}
.order .gap{font-size:clamp(11px,1.25vw,14px);font-weight:400;color:#93b0ae;font-variant-numeric:tabular-nums}
.order li[data-you] .gap{color:#e6f6d6}

/* BREATH. A real quantity, because the player is spending it and needs to know
   how much is left. The vignette stays as reinforcement, not as the only signal. */
.breath,.gate{display:grid;gap:6px;width:clamp(120px,15vw,190px)}
/* A class with display beats the UA rule for [hidden], so say it explicitly. */
.gate[hidden]{display:none}
.breath i,.gate i{display:block;height:4px;background:#ffffff26;overflow:hidden}
.breath u,.gate u{display:block;height:100%;width:100%;background:var(--you);
  transform-origin:left;transition:background .25s ease}
.breath span,.gate span{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#8fadab}
.breath[data-low] u{background:var(--hot)}
.breath[data-low] span{color:#ffc7ad}
.breath[data-tow] u{background:#8fe4ff}
.gate u{background:#98e8ff}
.gate[data-hot] span{color:#c1f1ff}
.gate[data-hot] i{height:6px}

.keys{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:7px;
  font-size:11px;color:#8fadab}
.keys kbd{padding:4px 7px;min-width:26px;font-size:10.5px;border-color:#ffffff2e}
.keys em{font-style:normal;margin-right:8px}
.keys .touch{display:none}
@media (pointer:coarse){.keys kbd,.keys em{display:none}.keys .touch{display:block;text-align:right}}

/* THE COURSE. A line along the very bottom edge of the frame: gates as ticks,
   fish as pips, so "how much is left" is never a guess. */
/* Sits exactly on the top edge of the bottom rail, so the course line is the
   frame's own hairline. At bottom:0 the pips hung past the stage and clipped. */
.course{position:absolute;left:0;right:0;bottom:clamp(54px,6.4vw,66px);height:3px;background:#ffffff1c}
.course .tick{position:absolute;top:-3px;width:1px;height:9px;background:#ffffff40}
.course .tick.fin{background:#d8eeff;width:2px;height:11px;top:-4px}
.course .pip{position:absolute;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:#a9cdcb;box-shadow:0 0 0 2px #02131a;transition:left .1s linear}
.course .pip.me{background:var(--you);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;z-index:2}

/* THE CALL. Events only: a place changing hands, a clean kick. Never a readout. */
.call{position:absolute;left:50%;top:clamp(86px,11vw,124px);transform:translateX(-50%);margin:0;
  font-size:clamp(18px,2.6vw,32px);font-weight:250;letter-spacing:-.03em;white-space:nowrap;
  color:#fff;text-shadow:0 2px 26px #02131a;opacity:0}
.call[data-live]{animation:say 1.5s ease-out}
.call[data-kind="gate"]{color:#b5efff}
.call[data-kind="gain"]{color:var(--you)}
.call[data-kind="loss"]{color:var(--hot)}
@keyframes say{0%{opacity:0;transform:translateX(-50%) translateY(12px)}
  18%{opacity:1;transform:translateX(-50%)}70%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .rush{display:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── pre-race ─────────────────────────────────────────────────────────── */
.panel{--show:grid;gap:20px;margin-top:20px}
.racers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.racer{text-align:left;background:transparent;border:0;border-top:1px solid var(--edge);
  padding:16px 2px 4px;cursor:pointer;display:grid;gap:8px;transition:border-color .2s}
.racer[aria-checked="true"]{border-top-color:var(--you)}
.racer h3{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:200;letter-spacing:-.035em;color:#dfeceb}
.racer[aria-checked="true"] h3{color:var(--you)}
.racer .line{margin:0;font-size:13.5px;color:#9db4b3;line-height:1.5;max-width:34ch}
.racer .trait{margin:0;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#7b9594}
.racer[aria-checked="true"] .trait{color:#b9d8a0}

.course-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--edge);padding-top:18px}
.course-row label{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
#course{background:transparent;border:0;border-bottom:1px solid var(--edge);padding:6px 2px;font-size:15px;
  font-weight:300;min-width:min(420px,60vw)}
#course option{background:var(--panel)}
.record{margin:0;font-size:13px;color:var(--muted)}
.record b{color:var(--ink);font-weight:500}

.go{display:inline-flex;align-items:baseline;gap:12px;background:var(--you);color:#07242c;border:0;
  border-radius:99px;padding:16px 30px;font-size:19px;font-weight:500;letter-spacing:-.01em;cursor:pointer;
  justify-self:start;transition:transform .16s ease}
.go span{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.go:hover{transform:translateY(-1px)}
.fineprint{margin:0;font-size:12px;color:#6f8887;max-width:70ch}

/* ── the ceremony ─────────────────────────────────────────────────────────
   Peggle's rule: the celebration is longer and louder than the shot. The result
   arrives on the water, not in a results table. */
.result{--show:grid;gap:22px;margin-top:20px;border-top:1px solid var(--edge);padding-top:24px}
.result:focus{outline:none}
.verdict h2{margin:0;font-size:clamp(38px,6.4vw,84px);font-weight:150;letter-spacing:-.055em;line-height:.82}
.verdict h2[data-won]{color:var(--you)}
.verdict p{margin:14px 0 0;font-size:clamp(15px,1.6vw,19px);font-weight:200;line-height:1.45;
  color:#c3d8d7;max-width:46ch}
.verdict p b{font-weight:400;color:var(--ink)}
.legs{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;background:var(--edge)}
.leg-cell{background:var(--water);padding:13px 14px 15px}
.leg-cell h4{margin:0 0 9px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#7b9594;font-weight:500}
.leg-cell b{font-size:21px;font-weight:200;letter-spacing:-.03em}
.leg-cell b[data-good]{color:var(--you)}
.leg-cell b[data-bad]{color:var(--hot)}
.leg-cell small{display:block;margin-top:6px;font-size:11.5px;color:#7b9594}
.tally{display:flex;gap:26px;flex-wrap:wrap;font-size:13px;color:#9db4b3}
.tally span b{color:var(--ink);font-weight:500}
.again{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.again button{background:var(--you);color:#07242c;border:0;border-radius:99px;padding:14px 26px;
  font-size:16px;font-weight:500;cursor:pointer}
.again button.ghost{background:transparent;color:#c3d8d7;border-bottom:1px solid var(--edge);border-radius:0;padding:14px 2px}

/* ── narrow ── */
@media (max-width:760px){
  .cup{padding:12px 14px 40px}
  .stage{height:min(56vh,400px)}
  .compare{display:none}
  .racers{grid-template-columns:1fr;gap:0}
  .racer{padding:14px 2px}
  .racer .line{max-width:none}
  .gate-copy{max-width:78%}
  .gate-copy h1{font-size:28px}
  /* Portrait has no room for a rail of three columns. The leg name drops, the
     order shrinks, and the controls become the gesture instead of the keys. */
  .rail-top{height:52px}
  .leg{display:none}
  .order{top:62px;min-width:128px;padding:0 14px}
  .order li{padding:5px 0}
  .rail-bottom{height:58px;gap:12px}
  .course{bottom:58px}
  .breath,.gate{width:auto;flex:1}
  .keys{flex:0 0 auto}
  .countdown{gap:18px}
  .teach li{font-size:12px}
  #course{min-width:0;width:100%}
  .go{width:100%;justify-content:center}
}

/* Picking CREDIT up bumps the pot, which is the only moment gold is allowed to move. */
.pot{transition:transform .18s ease}
.pot[data-hit]{transform:scale(1.14)}

/* Fidelity pass: give the water room, and keep controls readable without hiding fish. */
.stage{height:clamp(380px,62vh,680px)}
.stage:focus{outline:none}
.cup{scroll-margin-top:60px}
button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #d8ff8e;outline-offset:5px}
button:disabled{cursor:wait;opacity:.65}
.pause-button{pointer-events:auto;border:1px solid #b9d9df44;background:#082b38a6;border-radius:99px;padding:9px 14px;font-size:12px;min-height:44px;cursor:pointer}
.pause-screen{position:absolute;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;gap:22px;background:#031d2caa;backdrop-filter:blur(5px)}
.pause-screen[hidden]{display:none}
.pause-screen p{font-size:36px;font-weight:250;margin:0}
.pause-screen button{border:1px solid #b9d9df88;padding:14px 24px;border-radius:99px;background:#0b3444;cursor:pointer}
.how-to{display:grid;grid-template-columns:1fr 1fr;gap:28px;border-top:1px solid var(--edge);padding-top:16px}
.how-to p{font-size:13px;line-height:1.65;color:#adc6c8;margin:0;max-width:58ch}
.how-to b{display:block;color:#eef5ed;font-weight:500;margin-bottom:4px}
.tally .credit b{color:var(--gold)}
.touch-controls{gap:10px;grid-template-columns:1fr 1fr 1.6fr 1.6fr;margin-top:12px}
.touch-controls button{touch-action:none;border:1px solid #97cbd44d;background:#123744;border-radius:12px;min-height:58px;font-size:20px;cursor:pointer;user-select:none;-webkit-user-select:none}
.touch-controls small{display:block;font-size:10px;font-weight:400;color:#a5c3c8}
.touch-controls button[data-held]{border-color:var(--you);color:var(--you);background:#254649}
.cup .touch-controls{display:none}
.race-labels button[hidden]{display:none}
@media (pointer:coarse){.cup[data-phase="racing"] .touch-controls,.cup[data-phase="countdown"] .touch-controls{display:grid}.how-to p:last-child{font-size:0}.how-to p:last-child b{font-size:13px}.how-to p:last-child::after{content:"Use the buttons below the water. Tap an arrow to change channel, hold Surge for speed, and tap Kick as the gate meter fills. You can steer and surge together.";font-size:13px}}
@media(max-width:760px){
 .bar{padding:10px 14px;gap:10px}.flag{font-size:9px;letter-spacing:.08em}.brand img{width:76px;height:auto}
 .stage{height:clamp(390px,62svh,580px)}
 .rail-top{gap:12px}.place{margin-right:auto!important}.pot i{display:block;font-size:8px;margin-top:3px}.pause-button{padding:7px 10px}
 .gate-copy{max-width:90%;top:25px}.gate-copy h1{font-size:36px;max-width:10ch;line-height:.98}.gate-copy .sub{font-size:13px;max-width:26ch}
 .call{top:68px;left:20px;transform:none;font-size:20px}.call[data-live]{animation:mobile-call 1.5s ease-out}
 @keyframes mobile-call{0%,100%{opacity:0}20%,70%{opacity:1}}
 .order{top:106px;min-width:106px}.order .who{font-size:12px}.order .gap{font-size:11px}
 .keys{display:none}.rail-bottom{gap:24px}.breath,.gate{max-width:48%}
 .how-to{grid-template-columns:1fr;gap:12px}.teach{max-width:85%;gap:14px}.teach li{flex-wrap:wrap}.teach span{flex-basis:100%;line-height:1.4;margin-left:0}
 .racers{grid-template-columns:repeat(3,1fr);gap:12px}.racer h3{font-size:24px}.racer .line{font-size:12px}.racer .trait{font-size:9px;letter-spacing:.1em}
 .result{scroll-margin-top:64px}.fineprint{line-height:1.6;color:#9ab7b9}
}

/* Phase selectors must not reveal touch controls on mouse-only devices. */
@media(pointer:fine){.cup[data-phase] .touch-controls{display:none}}