/* Reef Express: the Drive mode's bell, look-ahead, feedback, express riders and results.
   Brass (the bell's colour) marks everything the bell touches; lime stays Go's alone. */
:root{--brass:#f3c35a;--brass-deep:#3a3014;--brass-ink:#2d2208;--sting:#ffb3d7;--clear:#9ce8c9}
.drive-buttons button:first-child{background:#133e4b;color:inherit;border-color:#bdd5c467}
.drive-buttons #throttle{background:#c9f688;color:var(--ink);border-color:#e5ffc7}
.drive-buttons .bell-button{background:var(--brass-deep);border-color:#f3d58a88;color:#ffe3a1}
.drive-buttons .bell-button[data-ready=false]{opacity:.55}
.bell-button .charges{margin-left:8px;letter-spacing:.12em;font-size:11px;color:var(--brass)}
.bell-button[data-urgent] .charges{color:var(--brass-ink)}
.lookahead[data-tone=wait] .la-icon{background:var(--brass-deep);color:#ffe3a1;border-color:#f3d58a88}
.drive-buttons .bell-button[data-urgent]{background:var(--brass);color:var(--brass-ink);border-color:#ffe9b3;animation:bell-urge .7s ease-in-out infinite alternate}
@keyframes bell-urge{to{box-shadow:0 0 0 6px #f3c35a33,0 0 26px #f3c35a66}}

/* Score and combo share one baseline row under the label. */
#line[data-mode=drive] .score-box{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:4px 8px;min-width:120px}
.score-box span{grid-column:1/-1}
.ghost-gap{font-style:normal;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--clear);white-space:nowrap}
.ghost-gap[data-behind]{color:#ffb4a2}
#hazard-limit{background:var(--sting);width:4px;height:18px!important;top:-6px!important;border-radius:2px;box-shadow:0 0 0 2px #3a1024,0 0 10px var(--sting)}
.score-box strong{font-variant-numeric:tabular-nums}
/* The pill names itself where there is room; on phones it is just the multiplier. */
.score-box em::before{content:'combo '}
.score-box em{font-style:normal;font-weight:800;font-size:12px;line-height:1;color:var(--brass-ink);background:var(--gold);border-radius:99px;padding:3px 7px;white-space:nowrap}

/* The rail ahead: what's coming and what to do about it. */
.lookahead{position:absolute;left:50%;top:92px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;border-radius:14px;background:#062d3bdd;border:1px solid #bfe1d24d;box-shadow:0 10px 40px #00141c55;z-index:6;min-width:280px;backdrop-filter:blur(8px)}
.lookahead b{display:block;font-size:14px;font-weight:700;letter-spacing:.01em}
.lookahead div>span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.la-icon{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:17px;font-weight:800;background:#123f4d;border:1px solid #bfe1d24d}
.lookahead[data-tone=ring] .la-icon{background:var(--brass);color:var(--brass-ink);border-color:#ffe9b3}
.lookahead[data-tone=ring]{border-color:#f3c35a99}
.lookahead[data-tone=ease] .la-icon{background:var(--sting);color:#3a1024}
.lookahead[data-tone=ease]{border-color:#ffb3d799}
.lookahead[data-tone=clear] .la-icon{background:var(--clear);color:#083024}
.lookahead[data-tone=stop] .la-icon{background:var(--gold);color:var(--brass-ink)}
.la-meter{position:relative;width:110px;height:8px;border-radius:99px;background:#ffffff1f;margin-left:4px;flex:none}
.la-meter i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:#d7f3e6}
.la-meter b{position:absolute;top:-4px;width:3px;height:16px;border-radius:2px;background:var(--gold);transform:translateX(-50%)}
.lookahead:not([data-tone=stop]) .la-meter{display:none}

/* Feedback: short, centred, gone in a moment. */
.pop{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%) scale(.9);margin:0;font-size:clamp(26px,3.4vw,44px);font-weight:800;font-style:italic;letter-spacing:-.03em;color:#fff7e0;text-shadow:0 3px 30px #00202a,0 1px 0 #00202a;opacity:0;pointer-events:none;z-index:7;white-space:nowrap;text-align:center}
.pop small{display:table;margin-left:auto;margin-right:auto;font-size:max(13px,.4em);font-style:normal;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff3cf;background:#062d3bcc;border:1px solid #f3d58a66;border-radius:99px;padding:4px 12px;margin-top:8px;text-shadow:none}
.pop[data-tone=bad]{color:#ffd0c4}
.pop[data-tone=bad] small{color:#ffb4a2}
.pop[data-show]{animation:pop-in 1.5s ease-out forwards}
@keyframes pop-in{0%{opacity:0;transform:translate(-50%,-40%) scale(.85)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}22%{transform:translate(-50%,-50%) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1)}}

.express-chip{position:absolute;right:38px;bottom:118px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:#3a3014ee;border:1px solid #f3d58a88;color:#ffe3a1;font-size:13px;z-index:5}
.express-chip strong{font-variant-numeric:tabular-nums;font-size:16px;color:#fff3cf}
.express-chip[data-late]{background:#3a1d14ee;border-color:#ffb4a277;color:#ffcdbd}

.drive-help .line-note{margin:-6px 0 14px;font-size:13px;color:var(--gold)}
.drive-help .rules{margin:0 0 20px;padding-left:18px;display:grid;gap:9px;font-size:14px;line-height:1.4;color:#dcefe7}
.drive-help .rules b{color:#fff}
/* The demo CREDIT buy-in sits between the rules and Let's go. */
.drive-help .game-buyin{margin:0;max-width:none}
.drive-help{max-height:calc(100dvh - 225px);overflow:auto}
#drive-help .game-buyin-entry,#drive-help .game-buyin-prizes strong{color:var(--gold)}
.drive-help .game-buyin-status{font-size:13px;line-height:1.35;color:#f3e6c4}

.finish-stars{margin:6px 0 2px;font-size:38px;letter-spacing:.12em;color:var(--gold)}
.finish-best{margin:4px 0 12px;font-size:13px;color:var(--gold);font-weight:700}
.finish-prize{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--muted)}.finish-prize[data-won]{color:var(--gold)}
.finish-stats{display:grid;grid-template-columns:1fr auto;gap:6px 18px;margin:0 0 14px;font-size:13px}
.finish-stats dt{color:var(--muted)}.finish-stats dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:700}

@media(max-width:700px){
  /* Meter, tide and score share the first row so the dashboard stays its old height. */
  #line[data-mode=drive] .drive-instruments .meter{width:calc(100% - 200px)}
  #line[data-mode=drive] .score-box{min-width:0}
  .score-box strong{font-size:20px;grid-column:1/-1;grid-row:2}
  .score-box span{grid-column:1}.score-box em{grid-column:2;grid-row:1;font-size:10px;padding:2px 5px}.score-box em::before{content:none}
  .lookahead{top:auto;bottom:calc(env(safe-area-inset-bottom) + 176px);min-width:0;width:calc(100% - 28px);padding:8px 12px 8px 8px}
  .la-meter{width:70px}
  .express-chip{right:14px;bottom:auto;top:178px;font-size:12px;padding:8px 11px}
  .pop{top:30%;white-space:normal;width:calc(100% - 32px);font-size:30px}
  .drive-buttons .bell-button kbd{display:none}
  /* With the buy-in block the help can outgrow a tall phone; keep it clear of the top bar. */
  .drive-help{max-height:calc(100dvh - 240px);overflow:auto}
}
@media(prefers-reduced-motion:reduce){.pop[data-show]{animation:none;opacity:1}.drive-buttons .bell-button[data-urgent]{animation:none}}