/* ===================================================================
   GALAXY RACE - interface
   =================================================================== */
:root{
  --bg:#05060f;
  --ink:#e8f0ff;
  --dim:#8ea0c4;
  --line:rgba(120,160,230,.20);
  --panel:rgba(10,16,34,.82);
  --accent:#4dd8ff;
  --warn:#ff5d5d;
  --good:#6fe38a;
  --gold:#ffd23f;
  --fastlap:#ff5fa2;
}

*{box-sizing:border-box}
/* Author rules like .countdown{display:grid} outrank the UA sheet's
   [hidden]{display:none}, so make the attribute win everywhere. */
[hidden]{display:none !important}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
@supports (height:100dvh){ html,body{height:100dvh} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.5 "Segoe UI",Inter,system-ui,-apple-system,sans-serif;
  overflow:hidden; -webkit-user-select:none; user-select:none;
  letter-spacing:.2px;
  /* No pull-to-refresh, no rubber banding, no double-tap zoom mid-race. */
  overscroll-behavior:none; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
button,input{font:inherit;color:inherit}

#stage{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

.screen{
  position:fixed; inset:0; z-index:5;
  display:none; align-items:center; justify-content:center;
  padding:20px;
  padding-top:max(20px,env(safe-area-inset-top));
  padding-bottom:max(20px,env(safe-area-inset-bottom));
  padding-left:max(20px,env(safe-area-inset-left));
  padding-right:max(20px,env(safe-area-inset-right));
  overflow:auto; -webkit-overflow-scrolling:touch;
}
.screen.active{display:flex}
#scr-race.active{display:block;padding:0;pointer-events:none}
#scr-race.active .hud{pointer-events:none}
#scr-race.active .hud input,#scr-race.active .hud form{pointer-events:auto}

/* --------------------------------------------------------- panels */
.panel{
  width:min(560px,100%); background:var(--panel);
  border:1px solid var(--line); border-radius:18px; padding:32px;
  backdrop-filter:blur(14px);
  box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}
.panel.wide{width:min(760px,100%)}

.logo{
  margin:0 0 6px; font-size:clamp(26px,5vw,42px); line-height:1;
  font-weight:800; letter-spacing:2px; text-align:center;
}
.logo span{
  display:block; font-size:.44em; letter-spacing:9px; margin:6px 0;
  color:var(--accent); text-shadow:0 0 22px rgba(77,216,255,.55);
}
.tag{text-align:center;color:var(--dim);margin:0 0 26px;font-size:13px}

.field{display:block;margin-bottom:16px}
.field span{display:block;font-size:11px;letter-spacing:1.6px;color:var(--dim);margin-bottom:6px;text-transform:uppercase}
.field small{display:block;color:#5f6f92;font-size:11px;margin-top:5px}
.field input{
  width:100%;padding:12px 14px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(77,216,255,.14)}

button{cursor:pointer;border:0;border-radius:11px;transition:transform .08s,filter .15s,opacity .15s}
button:active{transform:translateY(1px)}
button:disabled{opacity:.42;cursor:not-allowed}
.big{
  width:100%;padding:15px;font-weight:800;letter-spacing:2px;font-size:14px;
  background:linear-gradient(135deg,#4dd8ff,#2b7cff);color:#02121f;
  box-shadow:0 10px 30px rgba(43,124,255,.32);
}
.big:hover:not(:disabled){filter:brightness(1.12)}
.big.alt{background:linear-gradient(135deg,#6fe38a,#26b36a);box-shadow:0 10px 30px rgba(38,179,106,.32)}
.ghost{
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);
  padding:9px 14px;font-size:12px;
}
.ghost:hover{background:rgba(255,255,255,.12)}
.ghost.sm{width:100%;margin-bottom:8px;padding:8px}
.ghost.wide{width:100%;margin-top:10px;padding:10px;font-size:12.5px}
.ghost.wide.on{color:var(--accent);border-color:var(--accent)}
.msg{min-height:20px;text-align:center;font-size:12.5px;color:var(--warn);margin-top:12px}

/* A text box with a button welded to its right. */
.field-row{display:flex;gap:8px;align-items:stretch}
.field-row input{flex:1;min-width:0}
.ghost.sq{
  flex:none;width:46px;padding:0;font-size:17px;border-radius:11px;
  display:grid;place-items:center;
}

/* ------------------------------------------------------------ inviting */
.share-box{
  display:flex;flex-direction:column;gap:7px;padding:10px;border-radius:11px;
  background:rgba(77,216,255,.07);border:1px solid rgba(77,216,255,.25);
}
.share-box h3{margin:0}
.share-box h3 b{color:var(--accent);letter-spacing:1px;font-size:12px}
.share-link{
  width:100%;padding:7px 9px;border-radius:8px;font-size:11px;
  background:rgba(0,0,0,.35);border:1px solid var(--line);color:var(--dim);
  outline:none;text-overflow:ellipsis;
}
.share-btns{display:flex;gap:6px;flex-wrap:wrap}
.share-btns .ghost.sm{flex:1;margin:0;min-width:86px;white-space:nowrap}
.share-btns .wa{border-color:rgba(37,211,102,.5);color:#25d366}
.share-btns .wa:hover{background:rgba(37,211,102,.16)}
.share-msg{font-size:11px;color:var(--good);min-height:14px}

/* ---------------------------------------------------------- lobby */
.lobby-wrap{
  width:min(1180px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:20px;backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lobby-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lobby-head h2{margin:0;font-size:17px;letter-spacing:3px;font-weight:700}
.lobby-head em{font-style:normal;color:var(--accent);margin-left:6px}
.head-right{display:flex;align-items:center;gap:8px}
.pill{
  font-size:11px;padding:5px 11px;border-radius:20px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--dim);
}

.lobby-body{display:grid;grid-template-columns:1fr 300px;gap:16px;min-height:0;flex:1}

/* Twelve seats on the grid: four across, and it scrolls rather than pushing
   the hangar off the screen. */
.pilot-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-content:start;
  overflow:auto;padding-right:4px;min-height:0;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;
}
.pcard{
  position:relative;padding:13px;border-radius:14px;text-align:left;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line);border-top:3px solid var(--c);
  transition:transform .12s,box-shadow .18s,border-color .18s;
}
.pcard.mine{border-color:var(--c);box-shadow:0 0 0 2px var(--c) inset,0 0 30px -6px var(--c)}
/* An unfilled seat: same shape, none of the colour. */
.pcard.open{--c:rgba(140,165,215,.35);opacity:.5}
.pcard.open .glyph{color:#61708f}
.pcard .glyph{font-size:26px;color:var(--c);line-height:1}
.pcard h4{margin:8px 0 2px;font-size:15px;letter-spacing:.4px}
.pcard .full{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:1px}
.pcard .who{
  font-size:10.5px;padding:4px 8px;border-radius:6px;
  background:rgba(0,0,0,.35);display:inline-block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pcard .who.empty{color:#61708f}
.pcard .cardfoot{margin-top:10px;display:flex;align-items:center;gap:6px;justify-content:space-between}
.pcard .ptsbadge{
  background:rgba(255,255,255,.08);
  flex:none;font-size:10px;font-weight:800;letter-spacing:.4px;padding:4px 7px;
  border-radius:6px;background:color-mix(in srgb,var(--c) 20%,transparent);color:var(--c);
}
.pcard .ptsbadge.zero{background:rgba(255,255,255,.05);color:#5f6f92}
.pcard.top{border-color:var(--gold)}
/* Inside the card, not hanging off it: the grid scrolls and would clip it. */
.pcard .crown{
  position:absolute;top:8px;right:9px;font-size:16px;line-height:1;
  filter:drop-shadow(0 0 8px rgba(255,210,63,.85));
}

.side{display:flex;flex-direction:column;gap:10px;min-height:0}
.side h3{
  margin:0;font-size:10.5px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
}
.side h3 .races{letter-spacing:.6px;color:#5f6f92;font-size:10px;text-transform:none}

/* ------------------------------------------------------ league leader */
.champ{
  background:rgba(255,210,63,.10);border:1px solid rgba(255,210,63,.4);
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--c,#ffd23f) 26%,transparent),rgba(255,255,255,.03));
  border:1px solid color-mix(in srgb,var(--c,#ffd23f) 45%,transparent);
}
.champ .cup{font-size:24px;filter:drop-shadow(0 0 10px rgba(255,210,63,.7))}
.champ .clbl{display:block;font-size:8.5px;letter-spacing:1.8px;color:var(--dim)}
.champ b{display:block;font-size:17px;font-weight:800;color:var(--c,#ffd23f);line-height:1.2}
.champ em{font-style:normal;font-size:10.5px;color:var(--dim)}

.league{list-style:none;margin:0;padding:0;display:grid;gap:3px;max-height:186px;overflow:auto}
.league li{
  display:grid;grid-template-columns:16px 9px 1fr auto auto;gap:7px;align-items:center;
  padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.04);font-size:12px;
}
.league li.lead{background:rgba(255,255,255,.10);background:color-mix(in srgb,var(--c) 18%,rgba(255,255,255,.04));font-weight:700}
.league .lgp{color:var(--dim);font-size:10px;text-align:right}
.league .dot{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.league .lgn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.league .lgw{font-size:9.5px;color:var(--dim)}
.league .lgpts{color:var(--c);font-size:12.5px;min-width:26px;text-align:right}
.league .lg-empty{display:block;color:#5f6f92;font-size:11.5px;font-style:italic;background:none}
/* The results panel has to hold a 12-row classification AND a 12-row league
   without pushing the "back to hangar" button off screen. */
.league.res{max-height:26vh;overflow:auto;margin-top:8px}
.league.res li{font-size:12.5px;padding:4px 8px}
.roster{list-style:none;margin:0;padding:0;display:grid;gap:5px;max-height:180px;overflow:auto}
.roster li{
  display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;
  background:rgba(255,255,255,.04);font-size:12.5px;
}
.roster .dot{width:9px;height:9px;border-radius:50%;background:var(--c,#556);flex:none;box-shadow:0 0 8px var(--c)}
.roster .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roster .tag2{font-size:9.5px;padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.09);color:var(--dim)}
.roster .rdy{color:var(--good)}
.roster .wait{color:#8a94ad}

.chat-log{
  flex:1;min-height:110px;overflow:auto;padding:9px;border-radius:10px;
  background:rgba(0,0,0,.35);border:1px solid var(--line);font-size:12px;line-height:1.55;
}
.chat-log .c-sys{color:#7b88a8;font-style:italic}
.chat-log .c-from{font-weight:700}
.chat-form{display:flex;gap:6px}
.chat-form input{
  flex:1;padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);outline:none;
}
.chat-form button{padding:9px 14px;background:rgba(255,255,255,.09);border:1px solid var(--line);font-size:12px}

.lobby-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lobby-foot .msg{flex:1;text-align:left;margin:0}
.foot-btns{display:flex;gap:10px;min-width:min(420px,100%)}

/* ----------------------------------------------------------- race */
.hud{position:fixed;inset:0;z-index:6;font-variant-numeric:tabular-nums}
.hud-tl{position:absolute;top:14px;left:14px;display:flex;gap:8px;flex-wrap:wrap}
.hud-tl>div{
  background:rgba(6,10,24,.72);border:1px solid var(--line);border-radius:11px;
  padding:7px 13px;backdrop-filter:blur(8px);min-width:74px;
}
.hud .lbl{display:block;font-size:8.5px;letter-spacing:1.8px;color:var(--dim)}
.hud-tl b{font-size:20px;font-weight:800;line-height:1.15}
.hud-tl b i{font-style:normal;font-size:12px;color:var(--dim);font-weight:500}
.time-box b{font-size:15px}
.hud b.dim{color:#6d7c9b}

.standings{
  position:absolute;top:14px;right:14px;list-style:none;margin:0;padding:8px;
  width:220px;background:rgba(6,10,24,.72);border:1px solid var(--line);
  border-radius:12px;backdrop-filter:blur(8px);display:grid;gap:3px;
}
.standings li{
  display:grid;grid-template-columns:20px 10px 1fr auto;gap:7px;align-items:center;
  padding:5px 7px;border-radius:7px;font-size:11.5px;
}
.standings li.me{background:rgba(255,255,255,.11);font-weight:700}
.standings .p{color:var(--dim);font-size:10px;text-align:right}
.standings .dot{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.standings .gap{color:var(--dim);font-size:10px}
.standings .fin{color:var(--good);font-size:10px}

#minimap{
  position:absolute;right:14px;bottom:14px;border-radius:14px;
  background:rgba(6,10,24,.72);border:1px solid var(--line);backdrop-filter:blur(8px);
}

.hud-bottom{position:absolute;left:14px;bottom:14px;display:flex;align-items:flex-end;gap:12px}
.energy{
  background:rgba(6,10,24,.72);border:1px solid var(--line);border-radius:11px;
  padding:8px 13px;width:240px;backdrop-filter:blur(8px);
}
.energy em{font-style:normal;color:var(--accent);font-weight:700}
.energy .bar{height:9px;border-radius:5px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:5px}
#hud-eng-fill{
  height:100%;width:100%;border-radius:5px;
  background:linear-gradient(90deg,#2b7cff,#4dd8ff,#a6f0ff);
  transition:width .1s linear;
}
#hud-eng-fill.low{background:linear-gradient(90deg,#8a2a2a,#ff5d5d)}
/* -------------------------------------------------------- bomb magazine */
.bombs{
  background:rgba(6,10,24,.72);border:1px solid var(--line);border-radius:11px;
  padding:8px 13px;backdrop-filter:blur(8px);min-width:138px;
  transition:border-color .2s,box-shadow .2s;
}
.bombs:not(.empty){border-color:rgba(255,170,70,.55);box-shadow:0 0 22px -8px rgba(255,170,70,.8)}
.bombs em{font-style:normal;color:#ffb44a;font-weight:700}
.bombs .mag{display:flex;gap:5px;margin:5px 0 3px}
.bombs .mag i{
  font-style:normal;font-size:15px;line-height:1;opacity:.22;filter:grayscale(1);
  transition:opacity .15s,filter .15s,transform .15s;
}
.bombs .mag i.on{opacity:1;filter:none;transform:scale(1.08);text-shadow:0 0 10px rgba(255,140,40,.8)}
.bombs .hint{font-size:9px;letter-spacing:1px;color:var(--dim);text-transform:uppercase}

.speedo{
  background:rgba(6,10,24,.72);border:1px solid var(--line);border-radius:11px;
  padding:6px 14px;backdrop-filter:blur(8px);text-align:center;
}
.speedo b{font-size:24px;font-weight:800;display:block;line-height:1}
.speedo span{font-size:9px;color:var(--dim);letter-spacing:1.4px}

.warn{
  position:absolute;left:50%;top:20%;transform:translateX(-50%);
  font-size:26px;font-weight:800;letter-spacing:3px;color:var(--warn);
  text-shadow:0 0 26px rgba(255,93,93,.75);animation:blink .55s infinite alternate;
}
.warn.soft{top:27%;font-size:14px;color:#ffb454;text-shadow:0 0 18px rgba(255,180,84,.6);animation:none;letter-spacing:2px}
.warn.spin{
  top:33%;font-size:19px;color:#ff9a3d;text-shadow:0 0 24px rgba(255,140,50,.8);
  animation:spinwarn .5s linear infinite;
}
@keyframes spinwarn{from{transform:translateX(-50%) rotate(-3deg)}50%{transform:translateX(-50%) rotate(3deg)}to{transform:translateX(-50%) rotate(-3deg)}}
@keyframes blink{from{opacity:.35}to{opacity:1}}

.countdown{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:clamp(80px,18vw,190px);font-weight:900;letter-spacing:6px;
  color:#fff;text-shadow:0 0 60px rgba(77,216,255,.9);
}
.countdown.go{color:var(--good);text-shadow:0 0 70px rgba(111,227,138,.95)}
.countdown b{animation:pop .5s ease-out}
@keyframes pop{from{transform:scale(2.1);opacity:0}to{transform:scale(1);opacity:1}}

.toast{
  position:absolute;left:50%;top:12%;transform:translateX(-50%);
  background:rgba(6,10,24,.9);border:1px solid var(--line);border-radius:11px;
  padding:10px 20px;font-size:13.5px;white-space:nowrap;
  box-shadow:0 14px 40px rgba(0,0,0,.6);
}
.finish-flag{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:clamp(34px,7vw,66px);font-weight:900;letter-spacing:6px;
  color:#fff;text-shadow:0 0 50px rgba(255,255,255,.6);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 65%);
}

/* Sits in the gap between the bottom-left gauges and the minimap, so it
   wraps to a second line rather than running underneath either. */
.keys-hint{
  position:absolute;left:50%;bottom:100px;transform:translateX(-50%);
  font-size:10.5px;color:#6d7c9b;background:rgba(6,10,24,.6);
  padding:6px 14px;border-radius:16px;border:1px solid var(--line);
  transition:opacity .5s;text-align:center;line-height:1.7;
  max-width:min(600px,92vw);
}
.keys-hint b{color:var(--ink);font-weight:700}
.keys-hint.fade{opacity:0}

.race-chat{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);width:min(460px,86vw)}
.race-chat input{
  width:100%;padding:10px 14px;border-radius:10px;background:rgba(6,10,24,.94);
  border:1px solid var(--accent);outline:none;
}
.race-chat-log{
  position:absolute;left:14px;bottom:152px;width:min(360px,44vw);
  display:grid;gap:3px;font-size:12px;
}
.race-chat-log div{
  background:rgba(6,10,24,.66);padding:5px 10px;border-radius:8px;
  animation:fadein .2s;
}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1}}

/* --------------------------------------------------------- results */
.res-title{margin:0 0 20px;text-align:center;letter-spacing:4px;font-size:18px}
.res-table{width:100%;border-collapse:collapse;font-size:13px}
.res-table th{
  text-align:left;font-size:10px;letter-spacing:1.6px;color:var(--dim);
  padding:8px;border-bottom:1px solid var(--line);text-transform:uppercase;
}
.res-table td{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.05)}
.res-table tr.p1 td{background:rgba(255,210,63,.09)}
.res-table .rd{display:flex;align-items:center;gap:9px}
.res-table .dot{width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.res-table .pos{font-weight:800;font-size:16px;width:34px}
.res-note{text-align:center;color:var(--dim);font-size:12px;margin:18px 0 14px}
.res-scroll{max-height:36vh;overflow:auto}
.res-sub{
  margin:20px 0 0;font-size:10.5px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;
}
.res-sub b{color:var(--ink)}
.res-table .fl{color:var(--fastlap);font-size:9px;font-weight:800;letter-spacing:.6px}
.res-table .ptscol{width:56px;white-space:nowrap}
.res-table .ptscol b{color:var(--good);font-size:14px}
.res-table .ptscol span{color:var(--dim);font-size:10px;margin-left:5px}
.res-champ{
  display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:12px 15px;border-radius:12px;
  background:rgba(255,210,63,.10);border:1px solid rgba(255,210,63,.4);
  background:linear-gradient(120deg,color-mix(in srgb,var(--c,#ffd23f) 24%,transparent),rgba(255,255,255,.03));
  border:1px solid color-mix(in srgb,var(--c,#ffd23f) 45%,transparent);
}
.res-champ .cup{font-size:26px;filter:drop-shadow(0 0 10px rgba(255,210,63,.7))}
.res-champ .clbl{display:block;font-size:8.5px;letter-spacing:1.8px;color:var(--dim)}
.res-champ b{font-size:19px;font-weight:800;color:var(--c,#ffd23f)}
.res-champ .pts{margin-left:auto;font-weight:800;color:var(--c,#ffd23f)}

.overlay{
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;
  background:rgba(2,4,12,.86);backdrop-filter:blur(6px);padding:20px;
}
.overlay[hidden]{display:none}
.overlay h2{margin:0 0 10px;letter-spacing:3px;font-size:18px}
.overlay p{color:var(--dim);margin:0 0 20px}

/* Touch controls live in the mobile section at the foot of this file. */
.touch{display:none}

#btn-mute{padding:9px 11px;line-height:1}
#btn-mute.muted{opacity:.55}
/* --------------------------------------------------------------- throttle */
/* Accelerator, boost and reverse in one pad: hold to go, push forward to
   boost, pull back to reverse. Taller than a round pad so there is somewhere
   to slide to. */
.tpad.tthrottle{
  width:96px;height:186px;border-radius:48px;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:10px 0;font-size:0;position:relative;overflow:hidden;
  background:rgba(255,255,255,.07);
  transition:background .12s,box-shadow .12s;
}
.tpad.tthrottle .thr-end{
  font-size:9px;letter-spacing:1.4px;font-weight:800;color:#61708f;
  transition:color .12s;
}
.tpad.tthrottle .thr-knob{
  font-size:26px;line-height:1;color:var(--ink);
  transition:transform .06s linear,color .12s;
}
/* Which notch the thumb is in, at a glance. */
.tpad.tthrottle[data-mode=thrust]{background:rgba(110,227,138,.20)}
.tpad.tthrottle[data-mode=boost]{
  background:rgba(255,210,63,.30);box-shadow:0 0 26px -4px var(--gold) inset;
}
.tpad.tthrottle[data-mode=boost] .thr-top{color:var(--gold)}
.tpad.tthrottle[data-mode=boost] .thr-knob{color:var(--gold)}
.tpad.tthrottle[data-mode=reverse]{background:rgba(255,93,93,.26)}
.tpad.tthrottle[data-mode=reverse] .thr-bot{color:var(--warn)}
.tpad.tthrottle[data-mode=reverse] .thr-knob{color:var(--warn)}

/* ----------------------------------------------------------- voice chat */
.voice-box{
  display:flex;flex-direction:column;gap:7px;padding:10px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
}
.voice-box .ghost.sm{margin:0}
.voice-box .ghost.on{border-color:var(--good);color:var(--good)}
#btn-voice-deaf.on{border-color:var(--warn);color:var(--warn)}
.vrow{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--dim);cursor:pointer}
.vrow input{accent-color:var(--accent);margin:0}
.vrow b{color:var(--ink)}
.vrow.vnote{cursor:default;line-height:1.4}
.vmsg{font-size:11px;color:var(--warn);line-height:1.35}
.vmsg:empty{display:none}

/* Are you actually transmitting? The single most confusing thing about
   push-to-talk is not knowing, so it gets a big line and a live meter. */
.voice-live{display:flex;flex-direction:column;gap:5px}
.voice-live b{
  font-size:11px;letter-spacing:1.6px;text-align:center;padding:5px;
  border-radius:7px;background:rgba(255,255,255,.05);color:var(--dim);
  transition:background .1s,color .1s;
}
.voice-live.live b{background:var(--good);color:#06120a}
.voice-live.blocked b{background:var(--warn);color:#180404}
.vmeter{height:5px;border-radius:3px;background:rgba(255,255,255,.09);overflow:hidden}
.vmeter u{
  display:block;height:100%;width:0;background:var(--good);text-decoration:none;
  transition:width .08s linear;
}

/* The mic light, wherever a pilot is listed. */
.mic{font-size:10px;opacity:.5;vertical-align:1px}
.talking .mic{opacity:1;filter:drop-shadow(0 0 6px var(--good))}
.pcard.talking{border-color:var(--good);box-shadow:0 0 22px -6px var(--good)}
.roster li.talking .nm{color:var(--good)}
.standings li.talking{box-shadow:inset 2px 0 0 var(--good)}

#btn-voice{opacity:.55}
#btn-voice.on{opacity:1;color:var(--good);border-color:var(--good)}
#btn-voice.live{background:color-mix(in srgb,var(--good) 25%,transparent)}
.tbtn#btn-t-voice{opacity:.42}
.tbtn#btn-t-voice.on{opacity:1}
.tbtn#btn-t-voice.live{background:color-mix(in srgb,var(--good) 35%,transparent)}

/* On track: a quiet reminder that the mic exists, lit while it is open. */
.voice-hint{
  position:absolute;left:50%;transform:translateX(-50%);bottom:112px;
  font-size:10px;letter-spacing:2px;color:var(--dim);
  background:rgba(4,8,20,.6);border:1px solid var(--line);
  padding:4px 10px;border-radius:20px;pointer-events:none;
}
.voice-hint.live{color:#06120a;background:var(--good);border-color:var(--good)}

/* Fullscreen: lit while we hold the screen, dim while we do not. */
#btn-full{opacity:.55}
#btn-full.on{opacity:1;color:var(--accent);border-color:var(--accent)}
.tbtn#btn-t-full{opacity:.42}
.tbtn#btn-t-full.on{opacity:1}

/* ------------------------------------------------------ responsive */
@media (max-width:1180px){
  .pilot-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .lobby-body{grid-template-columns:1fr}
  .pilot-grid{grid-template-columns:repeat(2,1fr);max-height:46vh}
  .side{max-height:340px}
  .standings{width:172px;font-size:10.5px;max-height:46vh;overflow:auto}
  #minimap{width:132px;height:132px}
}
@media (max-width:620px){
  .pilot-grid{grid-template-columns:1fr}
  .panel{padding:22px}
  .hud-tl b{font-size:16px}
  .energy{width:160px}
  .bombs{min-width:110px}
  .hud-bottom{flex-wrap:wrap;max-width:70vw}
  .standings{top:auto;bottom:170px}
}

/* ===================================================================
   MOBILE
   Everything below is scoped to html.touch-ui, a class client.js sets
   when the device is driven by fingers rather than a mouse. Scoping it
   to a class (instead of @media pointer:coarse alone) keeps hybrid
   laptops on the desktop layout until someone actually taps, and lets
   the whole mobile skin outrank the desktop rules above without
   reaching for !important.
   =================================================================== */
:root{
  --sa-t:env(safe-area-inset-top,0px);
  --sa-b:env(safe-area-inset-bottom,0px);
  --sa-l:env(safe-area-inset-left,0px);
  --sa-r:env(safe-area-inset-right,0px);
}

/* ------------------------------------------------- forms and tap targets */
/* iOS zooms the page when a focused input is under 16px. */
html.touch-ui input,
html.touch-ui .field input,
html.touch-ui .chat-form input,
html.touch-ui .race-chat input{font-size:16px}
html.touch-ui button,
html.touch-ui .big{padding:17px}
html.touch-ui .ghost{padding:11px 15px}

/* ------------------------------------------------------------- connect */
@media (max-width:620px){
  .logo{font-size:clamp(24px,8vw,34px)}
  .logo span{letter-spacing:6px}
  .tag{margin-bottom:20px;font-size:12.5px}
}
/* A phone in landscape has ~390px of height, so the connect panel tightens up
   or the call sign field lands off screen. */
@media (max-height:520px) and (pointer:coarse){
  .panel{padding:18px}
  .logo{font-size:26px}
  .tag{margin-bottom:14px}
}

/* --------------------------------------------------------------- lobby */
@media (max-width:820px){
  .lobby-wrap{padding:14px;border-radius:14px;gap:10px}
  .lobby-head h2{font-size:14px;letter-spacing:1.5px;width:100%}
  .head-right{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .pilot-grid{grid-template-columns:repeat(2,1fr);max-height:none;overflow:visible}
  .lobby-body{display:block;overflow:auto;-webkit-overflow-scrolling:touch}
  .side{max-height:none;margin-top:14px}
  .league,.roster{max-height:none}
  .chat-log{min-height:84px;max-height:150px}
  /* Ready / launch stays reachable without scrolling back down. */
  .lobby-foot{
    position:sticky;bottom:0;z-index:2;
    background:linear-gradient(to top,var(--panel) 72%,transparent);
    padding-top:8px;margin:0 -14px -14px;padding-left:14px;padding-right:14px;
    padding-bottom:max(10px,var(--sa-b));
  }
  .foot-btns{min-width:100%}
}
@media (max-width:420px){
  .pilot-grid{grid-template-columns:1fr}
  /* One card per row, so it reads sideways instead of tall. The card has no
     wrapper elements — glyph, heading, perk, the three stat rows and the
     footer are all direct children — so each one is placed by hand. */
  .pcard{display:grid;grid-template-columns:34px 1fr;gap:2px 10px;align-items:start;padding:11px}
  .pcard>*{grid-column:2}
  .pcard .glyph{grid-column:1;grid-row:1/span 2;font-size:22px;align-self:center}
  .pcard h4{margin:0;align-self:center}
  .pcard .full{margin-bottom:5px}
  .pcard .cardfoot{grid-column:1/-1;margin-top:8px}
  .pcard .crown{top:6px;right:7px}
}

/* ---------------------------------------------------------------- race */
/* The bottom half of the screen belongs to the thumbs, so every gauge
   moves to the top and the minimap shrinks into the corner. */
html.touch-ui .hud-tl{
  top:calc(6px + var(--sa-t));left:calc(6px + var(--sa-l));
  gap:5px;max-width:58vw;
}
html.touch-ui .hud-tl>div{padding:4px 9px;min-width:0;border-radius:9px}
html.touch-ui .hud-tl b{font-size:14px}
html.touch-ui .hud-tl b i{font-size:10px}
html.touch-ui .time-box b{font-size:11.5px}
html.touch-ui .hud .lbl{font-size:7.5px;letter-spacing:1.2px}

html.touch-ui .hud-bottom{
  top:calc(6px + var(--sa-t));left:auto;bottom:auto;
  right:calc(122px + var(--sa-r));
  align-items:flex-start;gap:6px;flex-direction:column;
}
html.touch-ui .energy{width:128px;padding:5px 10px}
html.touch-ui .bombs{min-width:128px;padding:5px 10px}
html.touch-ui .bombs .hint{display:none}
html.touch-ui .speedo{display:none}

html.touch-ui #minimap{
  right:calc(8px + var(--sa-r));bottom:auto;top:calc(6px + var(--sa-t));
  width:108px;height:108px;border-radius:11px;
}
html.touch-ui .standings{
  top:calc(120px + var(--sa-t));right:calc(8px + var(--sa-r));
  width:150px;padding:5px;font-size:10px;max-height:40vh;
  overflow-y:auto;overflow-x:hidden;
}
html.touch-ui .standings li{padding:3px 5px;font-size:10px;gap:5px}
html.touch-ui .keys-hint{display:none}
html.touch-ui .race-chat{bottom:auto;top:calc(48px + var(--sa-t));width:min(420px,78vw)}
html.touch-ui .race-chat-log{
  left:50%;transform:translateX(-50%);bottom:auto;top:calc(150px + var(--sa-t));
  width:min(300px,52vw);font-size:11px;
}
html.touch-ui .warn{font-size:18px;top:19%;max-width:82vw;text-align:center;line-height:1.3}
html.touch-ui .warn.soft{font-size:11.5px;top:28%}
html.touch-ui .warn.spin{font-size:14px;top:35%}
html.touch-ui .toast{
  font-size:12px;padding:8px 14px;top:auto;bottom:calc(16px + var(--sa-b));
  max-width:60vw;white-space:normal;text-align:center;
}

/* ------------------------------------------------------- touch controls */
html.touch-ui .touch{
  display:block;position:fixed;inset:0;z-index:7;pointer-events:none;
  /* Stops the browser scrolling or zooming when a thumb drags. */
  touch-action:none;
}
.tzone{position:absolute;bottom:0;display:flex;align-items:flex-end;gap:12px;padding:0 14px}
.tzone-left{left:0;padding-left:calc(14px + var(--sa-l));padding-bottom:calc(14px + var(--sa-b))}
.tzone-right{right:0;padding-right:calc(14px + var(--sa-r));padding-bottom:calc(14px + var(--sa-b))}

.tpad{
  pointer-events:auto;display:grid;place-items:center;
  background:rgba(255,255,255,.09);border:1px solid var(--line);
  border-radius:50%;width:76px;height:76px;font-size:22px;font-weight:800;
  color:var(--ink);backdrop-filter:blur(6px);
  -webkit-tap-highlight-color:transparent;touch-action:none;
  transition:background .08s,transform .08s;
}
.tpad.on{background:rgba(77,216,255,.38);transform:scale(.94)}
.tpad.tsmall{width:54px;height:54px;font-size:13px}
.tbomb{
  width:62px;height:62px;font-size:24px;margin-bottom:104px;
  background:rgba(255,150,50,.20);border-color:rgba(255,170,70,.5);
}
.tbomb.on{background:rgba(255,150,50,.55)}

/* Utility row: standings, chat, respawn, sound. */
.tbar{
  position:absolute;pointer-events:auto;display:flex;gap:6px;
  left:50%;transform:translateX(-50%);bottom:calc(16px + var(--sa-b));
}
.tbtn{
  pointer-events:auto;width:42px;height:42px;border-radius:12px;font-size:17px;
  background:rgba(6,10,24,.72);border:1px solid var(--line);color:var(--ink);
  display:grid;place-items:center;backdrop-filter:blur(6px);
}
.tbtn.off{opacity:.42}

/* Portrait phones. Two pads a side fit across 390px, so the zones stay in a
   row - only the sizes come down. The utility row moves up out from under
   the thumbs. */
@media (orientation:portrait){
  html.touch-ui .tpad{width:66px;height:66px;font-size:20px}
  html.touch-ui .tpad.tsmall{width:48px;height:48px;font-size:11px}
  html.touch-ui .tpad.tthrottle{width:82px;height:162px;border-radius:41px}
  html.touch-ui .tpad.tthrottle .thr-knob{font-size:23px}
  html.touch-ui .tbomb{width:58px;height:58px;font-size:21px;margin-bottom:92px}

  html.touch-ui .tbar{bottom:calc(200px + var(--sa-b))}
  html.touch-ui .hud-bottom{right:auto;left:calc(6px + var(--sa-l));top:calc(100px + var(--sa-t))}
  html.touch-ui .hud-tl{max-width:calc(100vw - 130px)}
}

/* Short landscape screens: shrink the pads so they never swallow the track. */
@media (orientation:landscape) and (max-height:400px){
  html.touch-ui .tpad{width:64px;height:64px;font-size:19px}
  html.touch-ui .tpad.tthrottle{width:76px;height:140px;border-radius:38px;padding:7px 0}
  html.touch-ui .tpad.tthrottle .thr-knob{font-size:21px}
  html.touch-ui .tbomb{width:54px;height:54px;margin-bottom:80px}
  html.touch-ui .tpad.tsmall{width:46px;height:46px}
  html.touch-ui .tbtn{width:36px;height:36px;font-size:14px}
}

/* --------------------------------------------------------- rotate hint */
.rotate-hint{display:none}
html.touch-ui .rotate-hint.show{
  display:grid;place-items:center;position:fixed;inset:0;z-index:30;
  background:rgba(2,4,12,.9);backdrop-filter:blur(6px);padding:24px;
  text-align:center;pointer-events:auto;
}
.rh-inner{display:grid;gap:10px;justify-items:center}
.rh-icon{font-size:46px;color:var(--accent);animation:rot 2.2s ease-in-out infinite}
.rotate-hint b{font-size:17px;letter-spacing:2px}
.rotate-hint em{font-style:normal;color:var(--dim);font-size:12.5px;max-width:280px}
@keyframes rot{0%,60%{transform:rotate(0)}80%,100%{transform:rotate(90deg)}}

/* ------------------------------------------------------------- results */
@media (max-width:620px){
  .res-scroll{max-height:32vh;overflow:auto}
  .res-table{font-size:11.5px}
  .res-table th,.res-table td{padding:7px 5px}
  /* Gap is the first column to go when there is no room, best lap the next. */
  .res-table th:nth-child(4),.res-table td:nth-child(4){display:none}
}
@media (max-width:440px){
  .res-table th:nth-child(5),.res-table td:nth-child(5){display:none}
  .res-title{font-size:15px;letter-spacing:2px;margin-bottom:14px}
}