/* Void Spaces UI. The game world is neon vector; the interface around it is
   softer: rounded glass panels, pill buttons, a friendly rounded sans. */
:root {
  --bg: #000;
  --cyan: #2ef2ff;
  --magenta: #ff5cf0;
  --yellow: #ffe95c;
  --green: #4dffa0;
  --red: #ff5a78;
  --orange: #ffa94d;
  --blue: #5cc2ff;
  --purple: #b98cff;
  --dim: rgba(140, 200, 255, 0.18);
  --line: rgba(140, 200, 255, 0.14);
  --text: #e6f6ff;
  --soft: #9cc2d8;
  --panel: linear-gradient(160deg, rgba(14, 28, 52, 0.86), rgba(8, 12, 30, 0.9));
  --glass: rgba(10, 20, 38, 0.66);
  --radius: 18px;
  --sans: 'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Exo 2', system-ui, sans-serif;
  --display: 'Exo 2', system-ui, sans-serif;
  --logo: 'Audiowide', 'Exo 2', sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-font-smoothing: antialiased; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; cursor: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
button, input, select { font-family: var(--sans); font-size: 15px; }
[hidden] { display: none !important; }
b { font-weight: 600; }

/* ── Buttons & fields ── */
.btn {
  --c: var(--cyan);
  position: relative; background: color-mix(in srgb, var(--c) 9%, transparent); color: var(--c); border: 1.5px solid color-mix(in srgb, var(--c) 70%, transparent);
  padding: 10px 20px; border-radius: 999px; cursor: pointer; font-weight: 600; letter-spacing: 0.02em;
  transition: background 0.15s, transform 0.08s, box-shadow 0.15s, border-color 0.15s;
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 18%, transparent);
}
.btn:hover, .btn:focus-visible { background: color-mix(in srgb, var(--c) 20%, transparent); border-color: var(--c); outline: none; box-shadow: 0 0 22px color-mix(in srgb, var(--c) 40%, transparent); }
.btn:active { transform: scale(0.97); }
.btn.big {
  font-size: 18px; font-weight: 800; padding: 14px 24px; width: 100%; color: #04121a; border: none;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #ffffff));
  box-shadow: 0 6px 24px color-mix(in srgb, var(--c) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn.big:hover { filter: brightness(1.08); box-shadow: 0 8px 30px color-mix(in srgb, var(--c) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.btn.magenta { --c: var(--magenta); }
.btn.green { --c: var(--green); }
.btn.yellow { --c: var(--yellow); }
.btn.small { padding: 6px 14px; font-size: 13px; }
.btn:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--soft); font-weight: 500; }
.field input, .field select, input.code-in {
  background: rgba(0, 0, 0, 0.45); color: var(--text); border: 1.5px solid var(--dim); padding: 9px 14px; border-radius: 12px; outline: none; font-family: var(--sans); font-size: 15px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus, input.code-in:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(46, 242, 255, 0.15); }
.field input[type=range] { padding: 0; border: none; background: none; accent-color: var(--cyan); }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--text); cursor: pointer; }
.check input { accent-color: var(--cyan); width: 18px; height: 18px; }

/* ── Screens ── */
.screen {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(4, 10, 24, 0.25), rgba(0, 0, 8, 0.75));
  overflow-y: auto; animation: fadein 0.18s ease-out;
}
@keyframes fadein { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.panel {
  background: var(--panel); padding: 24px; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
  border-radius: var(--radius); position: relative; animation: rise 0.22s ease-out;
  border: 1.5px solid transparent;
  background-image: var(--panel), linear-gradient(135deg, rgba(46, 242, 255, 0.75), rgba(185, 140, 255, 0.35) 50%, rgba(255, 92, 240, 0.7));
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(46, 242, 255, 0.12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  scrollbar-width: thin; scrollbar-color: rgba(140, 200, 255, 0.3) transparent;
}
.panel.wide { width: min(1080px, 100%); }
.panel h2 { font-weight: 800; color: var(--text); margin: 0 0 14px; font-size: 22px; letter-spacing: 0.01em; }
.panel h2::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); margin-right: 10px; vertical-align: 3px; }
.panel .close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.muted { color: var(--soft); font-size: 13.5px; line-height: 1.5; }
.err { color: var(--red); min-height: 1.3em; font-size: 14px; margin-top: 8px; }
p { line-height: 1.55; }

.title { text-align: center; width: min(440px, 100%); }
.logo { font-family: var(--logo); font-weight: 400; font-size: clamp(40px, 9vw, 66px); letter-spacing: 0.04em; line-height: 0.95; margin: 4px 0 8px; }
.logo .a { color: var(--cyan); text-shadow: 0 0 18px rgba(46, 242, 255, 0.55); display: block; }
.logo .b { color: var(--magenta); text-shadow: 0 0 18px rgba(255, 92, 240, 0.55); display: block; }
.tagline { color: var(--soft); margin: 0 0 22px; font-size: 15px; }
.menu { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.foot { margin-top: 14px; font-size: 12px; color: #6f8fa8; }
.foot a { color: #8fc0e0; }

.rooms { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; max-height: 50vh; overflow-y: auto; }
.room { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--dim); background: rgba(0, 0, 0, 0.25); padding: 12px 16px; cursor: pointer; border-radius: 14px; transition: border-color 0.15s, background 0.15s, transform 0.1s; }
.room:hover { border-color: var(--cyan); background: rgba(46, 242, 255, 0.07); transform: translateY(-1px); }
.room .nm { flex: 1; color: var(--text); font-weight: 600; }
.room .meta { color: var(--soft); font-size: 12.5px; font-weight: 400; }
.room .cnt { color: var(--green); font-weight: 800; font-size: 17px; }

/* ── Hangar ── */
.hulls { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 14px 0; }
.hull { border: 1.5px solid var(--dim); padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; background: rgba(0, 0, 0, 0.3); border-radius: 16px; transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s; }
.hull:hover { border-color: rgba(46, 242, 255, 0.55); transform: translateY(-2px); }
.hull.sel { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(46, 242, 255, 0.15), 0 0 24px rgba(46, 242, 255, 0.25); background: rgba(46, 242, 255, 0.05); }
.hull canvas { width: 100%; height: 110px; display: block; border-radius: 10px; }
.hull .hn { color: var(--text); font-size: 17px; font-weight: 800; }
.hull .hr { display: inline-block; align-self: flex-start; color: var(--magenta); background: rgba(255, 92, 240, 0.12); font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.hull .hb { color: var(--soft); font-size: 12.5px; line-height: 1.4; }
.bars { display: grid; grid-template-columns: 62px 1fr; gap: 3px 8px; font-size: 11.5px; color: var(--soft); margin-top: 4px; align-items: center; }
.bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--cyan); }
.deathline { color: var(--red); font-size: 22px; font-weight: 800; margin-bottom: 6px; text-shadow: 0 0 14px rgba(255, 90, 120, 0.5); }

/* ── HUD ── */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud .pe { pointer-events: auto; }
.hud-tl { position: absolute; top: max(10px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); font-size: 13.5px; line-height: 1.5; background: var(--glass); padding: 8px 14px 9px; border-radius: 14px; border: 1px solid var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hud-tl .code { color: var(--yellow); cursor: pointer; font-weight: 700; background: rgba(255, 233, 92, 0.12); padding: 0 7px; border-radius: 6px; pointer-events: auto; }
.hud-tl .netstat:empty { display: none; }
.hud-tr { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.feed { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13.5px; }
.feed div { background: var(--glass); padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); animation: fade 6s forwards; }
@keyframes fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.center-msg { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); text-align: center; font-size: clamp(17px, 3vw, 26px); font-weight: 800; color: var(--yellow); text-shadow: 0 0 16px rgba(255, 233, 92, 0.5); pointer-events: none; white-space: nowrap; }
.timer { font-size: 20px; font-weight: 800; color: var(--cyan); font-variant-numeric: tabular-nums; }
.hud-bl { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 7px; width: min(340px, 46vw); background: var(--glass); padding: 10px 12px 12px; border-radius: 16px; border: 1px solid var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.meter { position: relative; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #7a5cff, #c58cff); transition: width 0.2s; }
.meter.hp i { background: linear-gradient(90deg, #ffb84d, #fff3a8); }
.meter span { position: absolute; inset: 0; font-size: 11.5px; font-weight: 600; line-height: 18px; padding: 0 9px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.meter span em { font-style: normal; opacity: 0.9; }
.power { display: flex; gap: 5px; }
.power button { flex: 1; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--dim); color: var(--soft); padding: 6px 2px; font-size: 11.5px; font-weight: 600; cursor: pointer; border-radius: 10px; transition: background 0.15s, color 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.power button i { font-style: normal; opacity: 0.55; margin-right: 2px; }
.power button:hover { background: rgba(185, 140, 255, 0.12); color: var(--text); }
.power button.on { border-color: var(--purple); color: #fff; background: rgba(185, 140, 255, 0.28); box-shadow: 0 0 12px rgba(185, 140, 255, 0.45); }
.power button.sym.on { border-color: var(--green); background: rgba(77, 255, 160, 0.2); box-shadow: 0 0 12px rgba(77, 255, 160, 0.4); }
.power button.shd.on { border-color: var(--blue); background: rgba(92, 194, 255, 0.25); box-shadow: 0 0 12px rgba(92, 194, 255, 0.4); }
.power button.shd.off { opacity: 0.6; text-decoration: line-through; }
.status-line { font-size: 12.5px; color: var(--soft); display: flex; gap: 10px; flex-wrap: wrap; }
.status-line b { color: var(--text); }
.chat { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: 168px; width: min(420px, 60vw); font-size: 13.5px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; align-items: flex-start; }
.chat .line { background: var(--glass); padding: 3px 10px; border-radius: 10px; animation: fade 12s forwards; }
.chat input { pointer-events: auto; width: 100%; background: rgba(6, 14, 28, 0.92); color: var(--text); border: 1.5px solid var(--cyan); padding: 8px 14px; border-radius: 999px; outline: none; font-family: var(--sans); }
#radar { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); border: 1px solid var(--line); background: var(--glass); border-radius: 14px; }
.tip { position: absolute; pointer-events: none; background: rgba(8, 16, 32, 0.94); border: 1.5px solid var(--green); padding: 8px 12px; font-size: 12.5px; max-width: 270px; line-height: 1.4; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
.tip b { display: block; color: var(--green); font-size: 14px; font-weight: 700; }
.hint { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 740px); font-size: 12.5px; line-height: 1.55; color: var(--soft); background: var(--glass); padding: 6px 14px; border-radius: 14px; border: 1px solid var(--line); text-align: center; }
.hint b { color: var(--green); }
@media (max-width: 1000px) { .hint { display: none; } }
.score { width: 100%; border-collapse: collapse; font-size: 14px; }
.score th { text-align: left; color: var(--soft); font-weight: 600; border-bottom: 1px solid var(--dim); padding: 6px 8px; font-size: 12px; }
.score td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.score tr.me td { background: rgba(46, 242, 255, 0.08); }
.score tr.me td:first-child { border-radius: 8px 0 0 8px; }
.score tr.me td:last-child { border-radius: 0 8px 8px 0; }
.score td.n, .score th.n { text-align: right; }
.score td.n { font-size: 15px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.overlay-score { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, 94vw); pointer-events: none; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; align-items: baseline; }
.keys kbd { color: var(--yellow); font-family: var(--sans); font-weight: 700; font-size: 12.5px; background: rgba(255, 233, 92, 0.1); border: 1px solid rgba(255, 233, 92, 0.35); border-bottom-width: 2.5px; padding: 2px 9px; border-radius: 8px; white-space: nowrap; justify-self: start; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; font-size: 13.5px; margin: 8px 0; font-weight: 600; }
.cats span::before { content: '●  '; }

/* ── Touch ── */
#touch { position: absolute; inset: 0; pointer-events: none; }
#touch .tbtn {
  --c: var(--cyan);
  position: absolute; pointer-events: auto; width: 52px; height: 52px; right: calc(var(--col) * 60px + max(10px, env(safe-area-inset-right))); top: calc(var(--row) * 58px + max(54px, calc(env(safe-area-inset-top) + 46px)));
  border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--c) 75%, transparent); background: color-mix(in srgb, var(--c) 12%, rgba(6, 12, 26, 0.6));
  color: var(--c); font-size: 9.5px; font-weight: 700; line-height: 1.2; display: flex; align-items: center; justify-content: center; text-align: center; touch-action: none;
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 25%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
#touch .tbtn b { color: #fff; font-weight: 800; }
#touch .tbtn.active { background: color-mix(in srgb, var(--c) 45%, transparent); color: #fff; transform: scale(0.94); }
#touch [data-name=special] { --col: 0; --row: 0; --c: var(--magenta); }
#touch [data-name=boost] { --col: 0; --row: 1; --c: var(--green); }
#touch [data-name=repair] { --col: 0; --row: 2; --c: var(--green); }
#touch [data-name=shields] { --col: 1; --row: 0; --c: var(--blue); }
#touch [data-name=power] { --col: 1; --row: 1; --c: var(--purple); }
#touch [data-name=build] { --col: 1; --row: 2; --c: var(--orange); }
#touch [data-name=rotate] { --col: 1; --row: 3; font-size: 22px; display: none; --c: var(--green); }
body.holding #touch [data-name=rotate] { display: flex; }
.stick { position: absolute; width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%; border: 2px solid rgba(46, 242, 255, 0.45); background: radial-gradient(circle, rgba(46, 242, 255, 0.08), transparent 70%); pointer-events: none; }
.stick i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.5), rgba(46, 242, 255, 0.35)); box-shadow: 0 0 16px rgba(46, 242, 255, 0.5); }
.stick.r { border-color: rgba(255, 90, 120, 0.5); background: radial-gradient(circle, rgba(255, 90, 120, 0.08), transparent 70%); }
.stick.r i { background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.5), rgba(255, 90, 120, 0.4)); box-shadow: 0 0 16px rgba(255, 90, 120, 0.5); }

.launchbar { position: sticky; bottom: -24px; margin: 0 -24px -24px; padding: 14px 24px; background: linear-gradient(180deg, rgba(8, 14, 32, 0.85), rgba(8, 12, 30, 0.98)); border-top: 1px solid var(--line); z-index: 2; border-radius: 0 0 var(--radius) var(--radius); }
body.touch .hud-bl { width: min(300px, 34vw); padding: 8px 10px 10px; }
body.touch .hud-bl .power button { padding: 8px 2px; }
body.touch #radar { width: 120px; height: 84px; }
body.touch .hint, body.touch .tip { display: none; }

@media (max-height: 520px) {
  .panel { padding: 14px 16px; }
  .panel h2 { font-size: 17px; margin-bottom: 8px; }
  .hulls { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 8px 0; }
  .hull canvas { height: 64px; }
  .hull .hb, .bars { display: none; }
  .hull .hn { font-size: 14px; }
  .deathline { font-size: 17px; }
  .btn.big { padding: 10px 16px; font-size: 16px; }
  .hud-bl { gap: 5px; }
  .meter { height: 16px; }
  .meter span { line-height: 16px; }
  .logo { font-size: 34px; }
  .tagline { margin-bottom: 10px; }
  .menu { gap: 7px; margin-top: 8px; }
  .title .btn { padding: 7px 12px; }
  .launchbar { bottom: -14px; margin: 0 -16px -14px; padding: 8px 16px; }
}
@media (max-width: 640px) {
  .grid2 { grid-template-columns: 1fr; }
  .panel { padding: 18px; }
  .hulls { grid-template-columns: repeat(2, 1fr); }
  .hull canvas { height: 80px; }
  .hull .hb, .bars { display: none; }
  .hud-bl { width: 52vw; }
  .chat { bottom: 130px; }
  .hint { display: none; }
  .launchbar { margin: 0 -18px -18px; bottom: -18px; padding: 12px 18px; }
}

/* ── Coaching ── */
.coach { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); max-width: min(560px, calc(100vw - 440px)); text-align: center; font-size: 15px; font-weight: 500; color: #fff; background: rgba(8, 36, 26, 0.82); border: 1.5px solid var(--green); padding: 8px 18px; border-radius: 999px; pointer-events: none; box-shadow: 0 0 20px rgba(77, 255, 160, 0.25); animation: rise 0.25s ease-out; }
.coach b { color: #fff; }
.coach b.g { color: var(--green); }
@media (max-width: 900px) { .coach { top: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 110px); max-width: 80vw; font-size: 14px; border-radius: 16px; } }
body.touch .coach { top: auto; bottom: max(10px, env(safe-area-inset-bottom)); width: 30vw; max-width: 330px; font-size: 12.5px; padding: 6px 12px; border-radius: 14px; }
@media (orientation: portrait) { body.touch .coach { bottom: auto; top: 110px; width: auto; max-width: 86vw; } }
.coach-touch { position: absolute; inset: 0; background: rgba(2, 6, 16, 0.93); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto auto; pointer-events: auto; z-index: 5; padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); gap: 10px; animation: fadein 0.2s; }
.coach-touch .zone { border: 2px dashed; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 10px; font-size: 13.5px; color: #d6e6f2; }
.coach-touch .zone b { font-size: 20px; font-weight: 800; }
.coach-touch .zone .thumb { width: 54px; height: 54px; border-radius: 50%; border: 2px solid currentColor; position: relative; animation: wiggle 1.6s ease-in-out infinite; }
.coach-touch .zone .thumb::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: currentColor; opacity: 0.6; }
@keyframes wiggle { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(14px, -10px); } 60% { transform: translate(-10px, 8px); } }
.coach-touch .l { border-color: rgba(46, 242, 255, 0.6); color: var(--cyan); background: rgba(46, 242, 255, 0.04); }
.coach-touch .r { border-color: rgba(255, 90, 120, 0.6); color: var(--red); background: rgba(255, 90, 120, 0.04); }
.coach-touch .build { grid-column: 1 / -1; border: 1.5px solid rgba(77, 255, 160, 0.6); border-radius: 16px; background: rgba(77, 255, 160, 0.05); padding: 10px 14px; font-size: 13.5px; color: #d6e6f2; line-height: 1.5; }
.coach-touch .build b { color: var(--green); }
.coach-touch .btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--soft); align-items: center; justify-content: center; }
.coach-touch .btns span b { color: var(--text); }
.coach-touch .go { grid-column: 1 / -1; --c: var(--green); }

/* ═══ Y2K glass + neon skin (early-2000s Flash-game gloss) ═══════════════ */
:root {
  --glass-top: rgba(150, 215, 255, 0.28);
  --glass-mid: rgba(60, 110, 200, 0.16);
  --glass-low: rgba(10, 24, 60, 0.82);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0) 50%);
  --sans: 'Exo 2', 'Trebuchet MS', Verdana, sans-serif;
}

/* Glass panels: a glossy split at the middle, bevelled rim, neon halo. */
.panel {
  background-image:
    linear-gradient(180deg, var(--glass-top) 0%, var(--glass-mid) 46%, rgba(8, 20, 52, 0.86) 47%, var(--glass-low) 100%),
    linear-gradient(135deg, #8ff6ff, #3d7bff 45%, #ff7cf2);
  border: 2px solid transparent;
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -14px 30px rgba(0, 0, 0, 0.35),
    0 0 26px rgba(46, 242, 255, 0.35),
    0 18px 50px rgba(0, 0, 0, 0.6);
}
.panel::before {
  /* Curved reflection across the top of the glass. */
  content: ''; position: absolute; left: 3%; right: 3%; top: 3px; height: 54px; border-radius: 18px 18px 50% 50% / 18px 18px 26px 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)); pointer-events: none;
}
.panel h2 {
  font-weight: 800; font-style: italic; letter-spacing: 0.02em; font-size: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #c9f6ff 45%, #2ef2ff 52%, #9fe9ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px rgba(46, 242, 255, 0.55)) drop-shadow(0 2px 0 rgba(0, 20, 60, 0.9));
}
.panel h2::before { display: none; }

/* Gel buttons */
.btn {
  --c: #2ef2ff;
  position: relative; overflow: hidden; isolation: isolate;
  color: #fff; font-weight: 800; letter-spacing: 0.03em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 8px color-mix(in srgb, var(--c) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 55%, #ffffff) 0%, color-mix(in srgb, var(--c) 70%, #002) 49%, color-mix(in srgb, var(--c) 45%, #001) 51%, color-mix(in srgb, var(--c) 75%, #002) 100%);
  border: 1.5px solid color-mix(in srgb, var(--c) 60%, #ffffff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -3px 8px rgba(0, 0, 0, 0.35), 0 0 14px color-mix(in srgb, var(--c) 55%, transparent), 0 3px 8px rgba(0, 0, 0, 0.5);
}
.btn::before {
  content: ''; position: absolute; left: 6%; right: 6%; top: 1px; height: 48%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.12)); z-index: -1; pointer-events: none;
}
.btn:hover, .btn:focus-visible { filter: brightness(1.15) saturate(1.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -3px 8px rgba(0, 0, 0, 0.3), 0 0 24px color-mix(in srgb, var(--c) 80%, transparent), 0 3px 8px rgba(0, 0, 0, 0.5); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 55%, #ffffff) 0%, color-mix(in srgb, var(--c) 70%, #002) 49%, color-mix(in srgb, var(--c) 45%, #001) 51%, color-mix(in srgb, var(--c) 75%, #002) 100%); border-color: #fff; }
.btn:active { transform: translateY(1px) scale(0.98); filter: brightness(0.95); }
.btn.big { color: #fff; font-size: 20px; font-style: italic; padding: 14px 26px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, #ffffff) 0%, var(--c) 49%, color-mix(in srgb, var(--c) 60%, #003) 51%, color-mix(in srgb, var(--c) 85%, #002) 100%); border: 2px solid rgba(255, 255, 255, 0.75); }
.btn.big:hover { filter: brightness(1.12); }
.btn.magenta { --c: #ff4fe6; }
.btn.green { --c: #2bff8e; }
.btn.yellow { --c: #ffd83a; }
.btn:disabled { filter: grayscale(0.7) brightness(0.7); }

/* Inputs: inset glass wells */
.field input, .field select, input.code-in {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.65), rgba(10, 30, 60, 0.55));
  border: 1.5px solid rgba(140, 220, 255, 0.45); border-radius: 10px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.15);
}
.field { color: #bfe9ff; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }

/* Logo: chrome gradient with a neon edge */
.logo { font-style: normal; }
.logo .a, .logo .b {
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px var(--g)) drop-shadow(0 3px 0 rgba(0, 10, 40, 0.95));
}
.logo .a { --g: rgba(46, 242, 255, 0.8); background-image: linear-gradient(180deg, #ffffff 0%, #b8f8ff 42%, #13c8ff 50%, #7ff3ff 100%); }
.logo .b { --g: rgba(255, 79, 230, 0.8); background-image: linear-gradient(180deg, #ffffff 0%, #ffd0fa 42%, #ff3fe0 50%, #ff9ff2 100%); }
.tagline { color: #d6f4ff; font-style: italic; text-shadow: 0 0 8px rgba(46, 242, 255, 0.5); }

/* Cards and rows: smaller glass tiles */
.room, .hull {
  background: linear-gradient(180deg, rgba(140, 210, 255, 0.16) 0%, rgba(60, 110, 200, 0.08) 48%, rgba(5, 15, 40, 0.55) 50%, rgba(5, 12, 34, 0.7) 100%);
  border: 1.5px solid rgba(140, 220, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.4);
}
.hull.sel { border-color: #9ff8ff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 2px rgba(46, 242, 255, 0.5), 0 0 26px rgba(46, 242, 255, 0.55); }
.hull canvas { box-shadow: inset 0 0 0 1px rgba(140, 220, 255, 0.25); }
.hull .hn { font-style: italic; text-shadow: 0 0 8px rgba(46, 242, 255, 0.5); }
.hull .hr { color: #fff; background: linear-gradient(180deg, #ff9df0, #c81fb1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 8px rgba(255, 79, 230, 0.5); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }
.bar { background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.06)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8); height: 7px; }
.bar i { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%) !important; background-color: var(--cyan); box-shadow: 0 0 6px currentColor; }
.launchbar { background: linear-gradient(180deg, rgba(20, 40, 90, 0.92), rgba(6, 12, 34, 0.98)); border-top: 1px solid rgba(160, 230, 255, 0.4); border-radius: 0 0 20px 20px; }

/* HUD glass */
.hud-tl, .hud-bl, .hint, .feed div, .chat .line, #radar {
  background: linear-gradient(180deg, rgba(140, 210, 255, 0.2) 0%, rgba(50, 100, 190, 0.12) 47%, rgba(5, 14, 40, 0.68) 50%, rgba(4, 10, 30, 0.8) 100%);
  border: 1.5px solid rgba(150, 225, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 14px rgba(46, 242, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.5);
}
.timer { font-style: italic; background: linear-gradient(180deg, #fff, #8ff6ff 50%, #2ef2ff 52%, #b9fbff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px rgba(46, 242, 255, 0.6)); }
.center-msg { font-style: italic; background: linear-gradient(180deg, #fff 0%, #fff6b0 45%, #ffcf2e 52%, #fff3a0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(255, 216, 58, 0.7)) drop-shadow(0 2px 0 rgba(40, 20, 0, 0.9)); text-shadow: none; }
.deathline { font-style: italic; }

/* Glossy tube meters */
.meter { height: 20px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.75), rgba(30, 50, 90, 0.5)); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.15); border: 1px solid rgba(150, 225, 255, 0.3); }
.meter i { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.15) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(90deg, #7a5cff, #e08cff); box-shadow: 0 0 10px rgba(185, 140, 255, 0.7); }
.meter.hp i { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.15) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(90deg, #ff9a2e, #fff07a); box-shadow: 0 0 10px rgba(255, 200, 80, 0.7); }
.meter span { line-height: 20px; }

/* Power and toggle buttons: mini gels */
.power button {
  color: #d6ecff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
  background: linear-gradient(180deg, rgba(200, 230, 255, 0.28) 0%, rgba(80, 120, 190, 0.2) 48%, rgba(10, 20, 50, 0.7) 52%, rgba(20, 35, 70, 0.75) 100%);
  border: 1px solid rgba(160, 220, 255, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.power button.on { color: #fff; background: linear-gradient(180deg, #e8d4ff 0%, #a070ff 48%, #6a2fe0 52%, #9b6bff 100%); border-color: #f0e4ff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 14px rgba(185, 140, 255, 0.8); }
.power button.shd.on { background: linear-gradient(180deg, #d4f0ff 0%, #5cc2ff 48%, #1f7fe0 52%, #6cc8ff 100%); border-color: #e4f6ff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 14px rgba(92, 194, 255, 0.8); }
.power button.sym.on { background: linear-gradient(180deg, #d4ffe8 0%, #4dffa0 48%, #12b85e 52%, #5cffaa 100%); border-color: #e4fff0; color: #013; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 14px rgba(77, 255, 160, 0.8); }

/* Touch: glossy orbs */
#touch .tbtn {
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.55) 0%, color-mix(in srgb, var(--c) 55%, transparent) 38%, color-mix(in srgb, var(--c) 30%, rgba(0, 10, 30, 0.8)) 72%);
  border: 1.5px solid color-mix(in srgb, var(--c) 60%, #ffffff);
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.45), 0 0 14px color-mix(in srgb, var(--c) 60%, transparent);
}

/* Coaching banners */
.coach { background: linear-gradient(180deg, rgba(180, 255, 215, 0.3) 0%, rgba(40, 160, 100, 0.22) 47%, rgba(4, 40, 24, 0.85) 50%, rgba(3, 30, 18, 0.9) 100%); border: 1.5px solid rgba(160, 255, 200, 0.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 20px rgba(77, 255, 160, 0.45); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.tip { background: linear-gradient(180deg, rgba(160, 255, 210, 0.2) 0%, rgba(20, 60, 50, 0.6) 47%, rgba(4, 16, 22, 0.92) 50%, rgba(4, 12, 20, 0.95) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 16px rgba(77, 255, 160, 0.35); }
.keys kbd { color: #2a1c00; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background: linear-gradient(180deg, #fff8c8 0%, #ffe36a 48%, #e8b000 52%, #ffd84a 100%); border: 1px solid #fff2a8; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 0 #7a5a00, 0 0 8px rgba(255, 216, 58, 0.5); }
.coach-touch { background: radial-gradient(ellipse at 50% 0%, rgba(40, 90, 180, 0.5), rgba(2, 6, 18, 0.96) 70%); }
/* Legibility on the bright upper half of the glass */
:root { --glass-top: rgba(130, 200, 255, 0.2); }
.muted, .hull .hb, .bars, .status-line, .hud-tl, .room .meta, p, .keys span, .cats, .tip, .err { text-shadow: 0 1px 2px rgba(0, 4, 20, 0.95), 0 0 6px rgba(0, 4, 20, 0.6); }
.panel > .muted:first-of-type, .panel p { color: #e4f4ff; }
.hull .hb { color: #cfe6f5; }
.power { flex-wrap: wrap; }
.power button { flex: 1 1 22%; min-width: 0; }
.power .shd, .power .sym { flex: 1 1 40%; }
.timer { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #b8fbff; filter: none; text-shadow: 0 0 10px rgba(46, 242, 255, 0.8), 0 2px 0 rgba(0, 20, 60, 0.9); }
.power .short { display: none; }
body.touch .power .full, .hud-bl.narrow .power .full { display: none; }
body.touch .power .short { display: inline; }
@media (max-width: 1100px) { .power .full { display: none; } .power .short { display: inline; } }

/* ═══ Contrast pass: solid dark glass, gloss only on the rim ═══════════ */
.panel {
  background-image:
    linear-gradient(180deg, rgba(26, 46, 88, 0.97) 0px, rgba(12, 22, 48, 0.97) 70px, rgba(7, 12, 30, 0.98) 100%),
    linear-gradient(135deg, #8ff6ff, #3d7bff 45%, #ff7cf2);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 22px rgba(46, 242, 255, 0.28), 0 18px 50px rgba(0, 0, 0, 0.7);
}
.panel::before { height: 22px; top: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)); }
.screen { background: radial-gradient(ellipse at center, rgba(0, 0, 10, 0.55), rgba(0, 0, 8, 0.85)); }

.room, .hull {
  background: linear-gradient(180deg, rgba(30, 52, 96, 0.9) 0px, rgba(10, 18, 40, 0.95) 28px, rgba(8, 14, 34, 0.95) 100%);
  border: 1.5px solid rgba(120, 190, 240, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.45);
}
.hull.sel { background: linear-gradient(180deg, rgba(30, 80, 120, 0.95) 0px, rgba(8, 28, 50, 0.97) 28px, rgba(6, 20, 40, 0.97) 100%); }
.launchbar { background: rgba(6, 12, 30, 0.99); }

.hud-tl, .hud-bl, .hint, .feed div, .chat .line, #radar, .tip, .coach {
  background: linear-gradient(180deg, rgba(28, 48, 90, 0.92) 0px, rgba(6, 12, 30, 0.9) 14px, rgba(4, 9, 24, 0.9) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 12px rgba(46, 242, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.55);
}
.coach { background: linear-gradient(180deg, rgba(20, 70, 46, 0.95) 0px, rgba(4, 26, 16, 0.94) 14px, rgba(3, 20, 12, 0.94) 100%); }
.tip { background: rgba(4, 14, 18, 0.96); }

/* Text: brighter and plainer */
:root { --soft: #c2d8ea; --text: #f2f9ff; }
.muted, .hull .hb, .room .meta, .bars, .status-line, .tagline, .keys span, p { color: #d3e4f2; }
.panel > .muted:first-of-type, .panel p { color: #e8f3fc; }
.field { color: #e3f3ff; }
.field input, .field select, input.code-in { background: #050b1c; color: #fff; border-color: rgba(140, 210, 255, 0.55); }
.foot { color: #9fb7cc; }
.foot a { color: #cfe8ff; }
.hud-tl, .status-line, .meter span { color: #fff; }
.hud-tl .muted { color: #c9dcec; }
.panel h2 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #eafcff; filter: none; text-shadow: 0 0 10px rgba(46, 242, 255, 0.55), 0 2px 0 rgba(0, 20, 60, 0.9); }
.center-msg { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #ffe86b; filter: none; text-shadow: 0 0 12px rgba(255, 216, 58, 0.7), 0 2px 0 rgba(40, 20, 0, 0.9); }

/* Buttons: same gel, darker body so white labels stand out */
.btn::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.05)); }
.btn { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, #ffffff) 0%, color-mix(in srgb, var(--c) 55%, #001) 49%, color-mix(in srgb, var(--c) 35%, #001) 51%, color-mix(in srgb, var(--c) 55%, #001) 100%); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
.btn.big { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 40%, #ffffff) 0%, color-mix(in srgb, var(--c) 80%, #001) 49%, color-mix(in srgb, var(--c) 50%, #001) 51%, color-mix(in srgb, var(--c) 70%, #001) 100%); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.power button { color: #fff; background: linear-gradient(180deg, rgba(60, 90, 140, 0.9) 0%, rgba(20, 34, 70, 0.95) 50%, rgba(10, 18, 40, 0.95) 100%); }

/* ═══ Dark gel buttons: tinted dark body, neon rim, faint gloss, white text ═══ */
.btn, .btn:hover, .btn:focus-visible, .btn.big, .btn.big:hover {
  color: #fff; text-shadow: 0 1px 2px #000, 0 0 10px color-mix(in srgb, var(--c) 80%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #050a18) 0%, color-mix(in srgb, var(--c) 18%, #040814) 50%, color-mix(in srgb, var(--c) 10%, #02040c) 51%, color-mix(in srgb, var(--c) 22%, #040814) 100%);
  border: 1.5px solid var(--c);
}
.btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 12px color-mix(in srgb, var(--c) 25%, transparent), 0 0 12px color-mix(in srgb, var(--c) 40%, transparent), 0 3px 8px rgba(0, 0, 0, 0.6); }
.btn::before { height: 45%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.02)); }
.btn:hover, .btn:focus-visible { filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 18px color-mix(in srgb, var(--c) 40%, transparent), 0 0 22px color-mix(in srgb, var(--c) 70%, transparent), 0 3px 8px rgba(0, 0, 0, 0.6); }
.btn.big { border-width: 2px; }
.btn.big:hover { filter: none; }

.power button { color: #e6f2ff; background: linear-gradient(180deg, #1c2c4c 0%, #101a32 50%, #0a1024 51%, #121c36 100%); border: 1px solid rgba(140, 190, 240, 0.4); }
.power button.on, .power button.shd.on, .power button.sym.on { color: #fff; text-shadow: 0 1px 2px #000; }
.power button.on { background: linear-gradient(180deg, #3a2470 0%, #261650 50%, #1a0e3c 51%, #2a1858 100%); border-color: #b98cff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 12px rgba(185, 140, 255, 0.7); }
.power button.shd.on { background: linear-gradient(180deg, #164a70 0%, #0e3352 50%, #08243c 51%, #0e3354 100%); border-color: #5cc2ff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 12px rgba(92, 194, 255, 0.7); }
.power button.sym.on { background: linear-gradient(180deg, #14583a 0%, #0c3d28 50%, #072a1b 51%, #0c3d28 100%); border-color: #4dffa0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 12px rgba(77, 255, 160, 0.7); }
.power button i { color: #9fc4e6; opacity: 1; }

.hull .hr { color: #ffd6fa; background: #3a0f36; border: 1px solid #ff6fe8; box-shadow: 0 0 8px rgba(255, 79, 230, 0.4); text-shadow: none; }
.keys kbd { color: #ffe86b; text-shadow: none; background: #1c1704; border: 1px solid #c9a51c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 0 #4a3a00; }

#touch .tbtn {
  color: #fff; text-shadow: 0 1px 2px #000;
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--c) 35%, #0a1020) 0%, color-mix(in srgb, var(--c) 18%, #050a16) 55%, #03060e 100%);
  border: 1.5px solid var(--c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 0 12px color-mix(in srgb, var(--c) 50%, transparent);
}
#touch .tbtn.active { background: color-mix(in srgb, var(--c) 40%, #050a16); }
.coach-touch { background: radial-gradient(ellipse at 50% 0%, rgba(20, 40, 90, 0.98), rgba(2, 5, 14, 0.98) 70%); }

/* ═══ Objective bar (game modes) ═══ */
.obj { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; color: #fff; font-size: 14px; max-width: calc(100vw - 600px); min-width: 0; }
.obj .orow, .obj .sub { background: linear-gradient(180deg, rgba(28, 48, 90, 0.95) 0px, rgba(6, 12, 30, 0.94) 14px, rgba(4, 9, 24, 0.94) 100%); border: 1px solid rgba(140, 200, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 12px rgba(46, 242, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.55); text-shadow: 0 1px 2px #000; white-space: nowrap; }
.obj .orow { display: flex; align-items: center; gap: 12px; padding: 6px 16px; border-radius: 999px; font-size: 15px; }
.obj .sub { font-size: 13px; padding: 3px 14px; border-radius: 999px; color: #e3f0fb; }
.obj b { color: #fff; }
.obj .big { font-size: 20px; font-weight: 800; }
.obj .warn { color: #ffb37a; font-weight: 700; }
.obj .muted { color: #c9dcec; font-size: 12.5px; }
.obj .tk { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.obj .tk b { font-size: 19px; font-weight: 800; min-width: 2.2ch; text-align: right; }
.obj .tk.t1 b { color: var(--cyan); }
.obj .tk.t2 b { color: var(--magenta); text-align: left; }
.obj .tk.rev { flex-direction: row-reverse; }
.obj .tkm { display: block; width: 92px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); }
.obj .tk.rev .tkm { transform: scaleX(-1); }
.obj .tkm i { display: block; height: 100%; border-radius: 999px; transition: width 0.3s; }
.obj .zones { display: flex; gap: 6px; }
.obj .zn { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid; display: grid; place-items: center; font-weight: 800; font-size: 15px; background: rgba(0, 0, 0, 0.6); }
.obj .zn.contested { animation: zblink 0.45s infinite alternate; }
@keyframes zblink { to { box-shadow: 0 0 12px #ffe86b; } }
.obj .vip { display: flex; align-items: center; gap: 6px; }
.obj .crown { font-size: 18px; }
.obj .vs { display: flex; flex-direction: column; align-items: center; font-size: 20px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.obj .vs small { font-size: 11px; font-weight: 600; color: #c9dcec; }
.obj .relic-who { font-size: 15px; }
.obj:not([hidden]) ~ .coach { top: calc(max(10px, env(safe-area-inset-top)) + 78px); }
.score-sum { margin: -4px 0 10px; font-size: 14px; color: #e3f0fb; }
.score-sum b { font-size: 16px; }
.keys.modes kbd { color: #eafcff; background: rgba(46, 242, 255, 0.1); border-color: rgba(46, 242, 255, 0.45); }
@media (max-width: 1100px) { .obj { max-width: calc(100vw - 24px); top: calc(max(10px, env(safe-area-inset-top)) + 84px); } .obj .orow { font-size: 13.5px; gap: 8px; padding: 5px 12px; } .obj .tkm { width: 60px; } }
@media (max-width: 640px) { .obj { top: calc(max(8px, env(safe-area-inset-top)) + 104px); } .obj .sub { font-size: 12px; white-space: normal; text-align: center; } .obj .muted { display: none; } }

/* ═══ Portrait phones ═══ */
@media (orientation: portrait) {
  body.touch .hud-tl { font-size: 11.5px; max-width: calc(100vw - 190px); padding: 6px 10px 7px; }
  body.touch .hud-tl .timer { font-size: 16px; }
  body.touch .hud-tr .btn.small { padding: 5px 10px; font-size: 12px; }
  /* Action buttons: a two-column stack on the right, above the radar. */
  body.touch #touch .tbtn { width: 48px; height: 48px; top: auto; bottom: calc(var(--row) * 54px + 108px + env(safe-area-inset-bottom)); right: calc(var(--col) * 54px + max(10px, env(safe-area-inset-right))); font-size: 8.5px; }
  body.touch #touch [data-name=special] { --col: 0; --row: 3; }
  body.touch #touch [data-name=boost] { --col: 0; --row: 2; }
  body.touch #touch [data-name=repair] { --col: 0; --row: 1; }
  body.touch #touch [data-name=shields] { --col: 1; --row: 3; }
  body.touch #touch [data-name=power] { --col: 1; --row: 2; }
  body.touch #touch [data-name=build] { --col: 1; --row: 1; }
  body.touch #touch [data-name=rotate] { --col: 0; --row: 0; bottom: calc(108px + env(safe-area-inset-bottom)); right: calc(130px + env(safe-area-inset-right)); }
  body.touch .hud-bl { width: calc(100vw - 160px); max-width: 300px; }
  body.touch .hud-bl .status-line { font-size: 11px; }
  body.touch .meter span { font-size: 10.5px; padding: 0 7px; }
  body.touch .coach { top: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 160px); left: 12px; right: 130px; transform: none; width: auto; max-width: none; }
}

/* BUILD is a toggle: make "on" unmistakable. */
#touch .tbtn[data-name=build].active { background: color-mix(in srgb, var(--c) 70%, #050a16); color: #fff; box-shadow: 0 0 18px var(--c), inset 0 0 12px rgba(255,255,255,0.35); transform: none; }
#touch .tbtn[data-name=build].active::after { content: 'ON'; position: absolute; bottom: 14%; left: 0; right: 0; font-size: 0.7em; text-align: center; }

/* RingStack (shared thederf.com accounts) on the title screen. */
.ring-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: -4px 0 14px; font-size: 13px; color: #d3e4f2; }
.ring-row[hidden] { display: none; }
.ring-row .rs { font-family: 'Audiowide', sans-serif; font-size: 11px; letter-spacing: .08em; color: var(--yellow); border: 1px solid rgba(255, 233, 92, .5); border-radius: 999px; padding: 2px 8px; }
.ring-row b { color: #fff; }
.ring-row .btn.ring { --c: var(--yellow); }
.ring-row .linkish { background: none; border: 0; padding: 0; color: var(--cyan); font: inherit; text-decoration: underline; cursor: pointer; }

/* Cosmetics screen */
.cos-top { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 12px 0 4px; }
.cos-top canvas { width: min(380px, 100%); height: auto; aspect-ratio: 380 / 220; border-radius: 12px; border: 1px solid rgba(160, 200, 255, 0.25); background: #000; }
.cos-acct { flex: 1; min-width: 200px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.cos-slots h3 { margin: 16px 0 8px; font-family: 'Audiowide', sans-serif; font-size: 14px; letter-spacing: .06em; color: #e8f4ff; }
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cos { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; border-radius: 12px; background: rgba(8, 14, 30, 0.92); border: 1px solid rgba(160, 200, 255, 0.18); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.cos:hover { border-color: rgba(160, 200, 255, 0.45); }
.cos.look { border-color: #5cc2ff; box-shadow: 0 0 12px rgba(92, 194, 255, 0.35); }
.cos.on { border-color: #3dff7f; box-shadow: 0 0 12px rgba(61, 255, 127, 0.35); }
.cos .sw { display: block; width: 100%; height: 34px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.25); }
.cos .cn { font-weight: 700; color: #fff; font-size: 13.5px; }
.cos .cr { font-size: 11.5px; text-transform: capitalize; letter-spacing: .03em; }
.cos .price { font-size: 12.5px; color: var(--yellow); }
.cos .btn { margin-top: 2px; }
.cos canvas.sw { display: block; width: 100%; height: 34px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.25); }
.cos .cb { font-size: 12px; color: #c4d6ea; line-height: 1.35; }

/* ── HUD icons ─────────────────────────────────────────────────── */
.ic { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.28em; flex: none; }
.icon-btn { display: inline-grid; place-items: center; padding: 6px 10px; }
.icon-btn .ic { width: 20px; height: 20px; }
.hud-bl .meter em { display: inline-flex; align-items: center; font-style: normal; }
.hud-bl .meter em .ic { width: 15px; height: 15px; }
.hud-bl .meter.en em[data-down="true"] { color: #ff6b6b; }
.hud-bl .status-line .parts { display: inline-flex; gap: 12px; align-items: center; }
.hud-bl .status-line .parts > span { display: inline-flex; gap: 4px; align-items: center; }
.hud-bl .status-line .parts .ic { width: 15px; height: 15px; opacity: .8; }
.hud-bl .status-line .repairing { color: var(--green); animation: rs-pulse 1s ease-in-out infinite; }
@keyframes rs-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .hud-bl .status-line .repairing { animation: none; } }
.hud-tl .stats { display: inline-flex; gap: 12px; align-items: center; }
.hud-tl .stats > span { display: inline-flex; gap: 4px; align-items: center; }
.hud-tl .stats .ic { width: 14px; height: 14px; }
/* Power row: an icon per button, with the key as a small badge (hidden on touch). */
.power button { position: relative; display: inline-grid; place-items: center; padding: 6px 2px 5px; }
.power button .ic { width: 19px; height: 19px; }
.power button > i { position: absolute; right: 4px; bottom: 1px; font-size: 9.5px; font-style: normal; opacity: .55; }
body.touch .power button > i { display: none; }
.power button .badge { position: absolute; top: 1px; right: 3px; color: var(--green); }
.power button .badge .ic { width: 11px; height: 11px; stroke-width: 3; }
.power button.shd.off { text-decoration: none; }
/* Touch buttons: icons only, labels in aria-label/title. */
#touch .tbtn { place-items: center; }
#touch .tbtn:not([data-name=rotate]), body.holding #touch [data-name=rotate] { display: grid; }
#touch .tbtn .ic { width: 26px; height: 26px; }
#touch .tbtn[data-name=build].active::after { bottom: 7%; font-size: 0.62em; }
/* Touch guide: the button legend shows the same icons. */
.coach-touch .btns span { display: inline-flex; align-items: center; gap: 6px; }
.coach-touch .btns .ic, .coach-touch .build .ic { width: 18px; height: 18px; }
.keys kbd .ic { width: 15px; height: 15px; }

/* Invite friends list and incoming invite prompt */
.friends { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.friend { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(8, 14, 30, 0.9); border: 1px solid rgba(160, 200, 255, 0.18); }
.friend .dot { width: 9px; height: 9px; border-radius: 50%; background: #56627a; flex: none; }
.friend.on .dot { background: #3dff7f; box-shadow: 0 0 8px #3dff7f; }
.friend .fn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.friend .fn span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-prompt { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; max-width: min(92vw, 380px); pointer-events: auto; }