:root {
  --bg: #04060c;
  --panel: rgba(8, 13, 25, 0.74);
  --line: rgba(120, 170, 255, 0.17);
  --txt: #dbe7ff;
  --dim: #7f93b8;
  --hit: #5cf2ff;
  --err: #ff4d6d;
  --atk: #ff5a4d;
  --ret: #7db8ff;
  --roam: #ffc94d;
  --mono: "JetBrains Mono", Consolas, "Courier New", monospace;
  --ui: Rajdhani, "Segoe UI", system-ui, sans-serif;
  --disp: Orbitron, Rajdhani, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--ui);
  font-size: 15px;
  cursor: none;
  user-select: none;
  -webkit-user-select: none;
}

#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }

.panel {
  background: linear-gradient(180deg, rgba(14, 22, 40, 0.78), var(--panel));
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Every typeable word on the HUD. <b> wraps the letters typed so far. */
.kw { font-family: var(--mono); font-weight: 700; letter-spacing: 0.03em; transition: opacity 0.12s; }
.kw b { color: var(--hit); font-weight: 800; text-shadow: 0 0 12px rgba(92, 242, 255, 0.85); }
.kw.dim { opacity: 0.4; }

#hud { position: fixed; inset: 0; pointer-events: none; }

/* ---------- modes ---------- */
#topbar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 9px; }
#modes { display: flex; gap: 10px; }
.mode {
  --c: #fff;
  min-width: 138px;
  padding: 8px 18px 7px;
  text-align: center;
  border-radius: 11px;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.mode[data-m="attack"] { --c: var(--atk); }
.mode[data-m="run"] { --c: var(--ret); }
.mode[data-m="roam"] { --c: var(--roam); }
.mode .kw { display: block; font-size: 21px; color: #b9c8e6; }
.mode em { display: block; margin-top: 1px; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.mode.on { border-color: var(--c); transform: translateY(1px); box-shadow: 0 0 0 1px var(--c), 0 0 26px -6px var(--c), inset 0 0 26px -12px var(--c); }
.mode.on .kw { color: var(--c); }
.mode.on em { color: var(--txt); }

#status { padding: 4px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); background: rgba(6, 10, 20, 0.55); white-space: nowrap; }
#status.atk { color: #ffb3ab; }
#status.ret { color: #b9d8ff; }
#status.safe { color: #ffe9ad; }
#status.warn { color: #fff; background: rgba(255, 60, 80, 0.5); animation: pulse 0.5s infinite alternate; }
#net { min-height: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
#net.good { color: #7fe0a8; }
#net.fair { color: #ffd24d; }
#net.poor { color: #ff8a80; }
@keyframes pulse { from { box-shadow: 0 0 0 0 rgba(255, 60, 80, 0.7); } to { box-shadow: 0 0 22px 2px rgba(255, 60, 80, 0.75); } }

/* ---------- left column ---------- */
#left { position: absolute; top: 14px; left: 14px; width: 292px; display: flex; flex-direction: column; gap: 10px; }
#vitals { padding: 12px 14px 10px; }
.v-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
#v-name { font-size: 19px; font-weight: 700; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#v-level { font-family: var(--disp); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--roam); }
.bar { position: relative; height: 17px; margin-bottom: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.bar i { position: absolute; inset: 0; width: 100%; transform-origin: left; transition: transform 0.12s linear; }
.bar.hull i { background: linear-gradient(90deg, #2bd47d, #9cff57); }
.bar.hull.mid i { background: linear-gradient(90deg, #e0a52b, #ffd24d); }
.bar.hull.low i { background: linear-gradient(90deg, #d42b4a, #ff5a4d); }
.bar.shield { height: 11px; }
.bar.shield i { background: linear-gradient(90deg, #2b7bd4, #7dd0ff); }
.bar span { position: absolute; right: 7px; top: 0; font: 700 11px/17px var(--mono); color: #06101c; mix-blend-mode: normal; text-shadow: 0 0 3px rgba(255, 255, 255, 0.5); }
.bar.shield span { font-size: 9px; line-height: 11px; }
.bar label { position: absolute; left: 7px; top: 0; font: 700 10px/17px var(--ui); letter-spacing: 0.16em; color: rgba(4, 12, 22, 0.85); }
.bar.shield label { font-size: 8px; line-height: 11px; }
.trio { display: flex; gap: 6px; margin-top: 9px; }
.trio > div { flex: 1; position: relative; padding: 5px 0 6px; text-align: center; border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.trio b { display: block; font: 800 22px/1 var(--mono); color: #fff; }
.trio small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--dim); }
/* what the ship's upgrades add up to; a chip flashes when its number goes up */
#chips { display: flex; gap: 5px; margin-top: 6px; }
.chip { flex: 1; padding: 4px 0 2px; text-align: center; border-radius: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; }
.chip b { display: block; font: 700 12.5px/1.1 var(--mono); color: #fff; }
.chip small { font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--dim); }
.chip.up { animation: chip-up 1.6s ease-out; }
@keyframes chip-up { 0% { transform: scale(1.14); border-color: var(--roam); background: rgba(255, 201, 77, 0.4); } 100% { transform: none; border-color: transparent; background: rgba(255, 255, 255, 0.04); } }

/* ---------- upgrades ---------- */
#upgrades { padding: 10px 12px 8px; transition: opacity 0.2s, box-shadow 0.2s, border-color 0.2s; opacity: 0.72; }
#upgrades.ready { opacity: 1; border-color: rgba(255, 201, 77, 0.6); box-shadow: 0 0 0 1px rgba(255, 201, 77, 0.35), 0 0 34px -8px rgba(255, 201, 77, 0.7), 0 10px 34px rgba(0, 0, 0, 0.5); animation: slidein 0.3s ease-out; }
@keyframes slidein { from { transform: translateX(-24px); opacity: 0.3; } to { transform: none; opacity: 1; } }
.up-title { margin-bottom: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--dim); }
.up-title .pts { display: inline-block; min-width: 20px; margin-right: 6px; padding: 0 5px; border-radius: 5px; font: 800 12px/18px var(--mono); text-align: center; color: #1a1200; background: var(--roam); }
.up-title em { display: block; margin-top: 1px; font-style: normal; font-size: 10.5px; letter-spacing: 0.12em; color: #ffe9ad; }
#upgrades.ready .up-title { color: #fff; }
.up-path { --c: #fff; padding: 5px 0 5px 9px; border-left: 2px solid var(--c); margin-bottom: 6px; }
.up-head { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--c); }
.up-branch { color: var(--dim); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.pips { margin-left: auto; display: flex; gap: 2px; }
.pips i { width: 7px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.pips i.on { background: var(--c); box-shadow: 0 0 6px var(--c); }
.pips i.gap { margin-left: 3px; }
.up-opts { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 4px; }
.up-opts.two { grid-template-columns: 1fr 1fr; }
.up-opts.three .up-opt { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.up-opts.three .d { flex-basis: 100%; }
.up-opt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 4px 8px 5px; border-radius: 7px; background: rgba(255, 255, 255, 0.045); border: 1px solid transparent; }
.up-opt .kw { font-size: 17px; color: #fff; }
.up-opts.two .kw { font-size: 15.5px; }
.up-opt .fork { margin-bottom: 1px; padding: 0 6px; border-radius: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #06101c; background: var(--c); }
.up-opt .d { font-size: 12.5px; font-weight: 500; line-height: 1.2; color: #a9bbdb; }
.up-opt:has(.kw.hit) { border-color: var(--hit); background: rgba(92, 242, 255, 0.09); }
.up-sum { margin-top: 2px; font-size: 11.5px; font-weight: 500; line-height: 1.25; color: #9fb0d0; }
.up-sum.new { animation: sum-new 2s ease-out; }
@keyframes sum-new { 0% { color: #fff; text-shadow: 0 0 10px var(--c); } 100% { color: #9fb0d0; text-shadow: none; } }
.up-max { margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--dim); }

/* ---------- right column ---------- */
#right { position: absolute; top: 14px; right: 14px; width: 250px; display: flex; flex-direction: column; gap: 8px; }
#leader { padding: 10px 12px 8px; }
.lb-title { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--dim); }
.lb-row { display: flex; align-items: center; gap: 6px; padding: 1.5px 0; font-size: 14px; font-weight: 600; }
.lb-row .rk { width: 14px; font: 700 11px var(--mono); color: var(--dim); }
.lb-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .wp { min-width: 30px; padding: 0 4px; border-radius: 4px; font: 700 11px/16px var(--mono); text-align: center; color: #06101c; }
.lb-row .sc { min-width: 44px; text-align: right; font: 500 12px var(--mono); color: #a9bbdb; }
.lb-row.me { color: var(--hit); }
.lb-row.me .nm { text-shadow: 0 0 10px rgba(92, 242, 255, 0.6); }
#feed { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.feed-line { padding: 2px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: #c6d4ef; background: rgba(6, 10, 20, 0.6); animation: feed 6s forwards; }
.feed-line b { color: #ff8a80; }
@keyframes feed { 0% { opacity: 0; transform: translateX(12px); } 5% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- map ---------- */
#mini { position: absolute; right: 14px; bottom: 14px; width: 250px; padding: 10px 12px 9px; }
#minimap { display: block; width: 226px; height: 226px; margin: 0 auto; }
.legend { margin-top: 7px; }
.lg-title { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; color: var(--dim); }
.lg-title span { letter-spacing: 0.08em; }
.lg-bar { height: 7px; margin-top: 3px; border-radius: 4px; background: linear-gradient(90deg, #4da3ff 0%, #38e8c6 23%, #9cff57 41%, #ffd24d 59%, #ff8a3d 77%, #ff3d6e 100%); }
.lg-ticks { display: flex; justify-content: space-between; margin-top: 1px; font: 500 9.5px var(--mono); color: var(--dim); }
.cmds { margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--dim); text-align: center; }
.cmds .kw { color: #dbe7ff; }

#bigmap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(2, 4, 9, 0.72); }
#bigmapc { width: min(78vh, 78vw); height: min(78vh, 78vw); }
.bm-note { margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.bm-note b { font-family: var(--mono); color: var(--hit); text-transform: none; }

/* ---------- toasts ---------- */
#toasts { position: absolute; top: 132px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.toast { padding: 6px 22px 5px; border-radius: 10px; font-family: var(--disp); font-size: 20px; font-weight: 800; letter-spacing: 0.14em; color: #fff; background: rgba(8, 13, 25, 0.8); border: 1px solid var(--line); animation: toast 2.6s forwards; white-space: nowrap; }
.toast small { display: block; margin-top: 1px; font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-align: center; color: var(--dim); }
.toast b { color: var(--hit); }
.toast.gold { color: var(--roam); border-color: rgba(255, 201, 77, 0.6); box-shadow: 0 0 30px -6px rgba(255, 201, 77, 0.8); }
.toast.kill { color: #ff8a80; border-color: rgba(255, 90, 77, 0.6); box-shadow: 0 0 30px -6px rgba(255, 90, 77, 0.8); }
.toast.kill b { color: #fff; }
.toast.warn { color: #fff; background: rgba(190, 30, 50, 0.75); border-color: #ff5a6e; }
@keyframes toast { 0% { opacity: 0; transform: scale(0.7); } 8% { opacity: 1; transform: scale(1.06); } 14% { transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }

/* ---------- typing zone ---------- */
#typing { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(820px, calc(100vw - 620px)); min-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#typing::before { content: ""; position: absolute; left: -60px; right: -60px; top: -26px; bottom: -16px; z-index: -1; background: radial-gradient(ellipse at 50% 70%, rgba(4, 6, 12, 0.82) 0%, rgba(4, 6, 12, 0.5) 45%, rgba(4, 6, 12, 0) 72%); }
/* The word bar: battle / boost words in two rows that hold still while you type. The top row
   is the one being typed, the row under it is what comes next. Only when a row is finished
   do the rows move up one. Row height (36px) appears three times below: keep them in step. */
#stream { --c: var(--atk); display: flex; align-items: center; gap: 16px; height: 92px; padding: 0 20px 0 16px; border-radius: 14px; background: linear-gradient(180deg, rgba(14, 22, 40, 0.95), rgba(8, 13, 25, 0.95)); border: 1px solid var(--c); box-shadow: 0 0 34px -10px var(--c), inset 0 0 30px -16px var(--c); animation: bar-in 0.18s ease-out; }
#stream.chase { --c: #ff9a3d; }
#stream.evade { --c: var(--ret); }
@keyframes bar-in { from { transform: translateY(12px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
#stream .tag { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 112px; }
#stream-ctx { padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: #06101c; background: var(--c); }
#stream-who { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: #a9bbdb; }
/* 34ch wide: must match ROW_CHARS in hud.js */
.rowsbox { width: 34ch; height: 72px; overflow: hidden; font: 800 26px/36px var(--mono); letter-spacing: 0; }
.rows { transform: translateY(-36px); } /* the row just finished waits out of sight above */
.rows.shift { animation: rows-up 0.2s ease-out; }
@keyframes rows-up { from { transform: translateY(0); } to { transform: translateY(-36px); } }
.row { height: 36px; white-space: pre; }
.tw { color: #c3d0ea; }
.row.next .tw { color: #6b7b9c; }
.tw.done { color: #2f8f9c; }
.tw.cur { position: relative; color: #fff; text-shadow: 0 0 16px rgba(255, 255, 255, 0.3); text-decoration: underline 2px var(--c); text-underline-offset: 7px; }
.tw.cur b { position: relative; color: var(--hit); font-weight: 800; text-shadow: 0 0 12px rgba(92, 242, 255, 0.85); }
/* the caret: after the typed letters, or in front of the word before any are typed */
.tw.cur b::after, .tw.cur:not(:has(b))::before { content: ""; position: absolute; top: 5px; bottom: 5px; width: 2px; border-radius: 2px; background: var(--hit); box-shadow: 0 0 8px var(--hit); }
.tw.cur b::after { right: -1px; }
.tw.cur:not(:has(b))::before { left: -2px; }
.tw.cur.dim { color: #66769a; text-shadow: none; }
.tw.cur.dim::before { display: none; }

/* the combo meter sits either side of the typed letters */
#bufrow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; width: 100%; }
#combo { --cc: #6f7f9f; justify-self: start; display: flex; align-items: center; gap: 9px; padding: 4px 12px 4px 10px; border-radius: 10px; background: rgba(8, 13, 25, 0.8); border: 1px solid color-mix(in srgb, var(--cc) 50%, transparent); transition: border-color 0.2s, box-shadow 0.2s; }
#combo.t1 { --cc: #dbe7ff; }
#combo.t2 { --cc: var(--hit); }
#combo.t3 { --cc: var(--roam); box-shadow: 0 0 18px -6px var(--roam); }
#combo.max { --cc: #ff6bd6; animation: combo-max 0.5s infinite alternate; }
@keyframes combo-max { from { box-shadow: 0 0 10px -4px #ff6bd6; } to { box-shadow: 0 0 26px -2px #ff6bd6; } }
#combo.lost { --cc: var(--err); animation: shake 0.25s; }
#c-x { min-width: 50px; text-align: right; font: 800 25px/1 var(--mono); color: var(--cc); text-shadow: 0 0 14px color-mix(in srgb, var(--cc) 70%, transparent); }
#c-x.bump { animation: c-bump 0.2s ease-out; }
@keyframes c-bump { from { transform: scale(1.5); } to { transform: none; } }
.c-bars { width: 112px; }
.c-bars small { display: block; margin-bottom: 2px; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; color: var(--dim); }
.c-bar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.c-bar i { display: block; height: 100%; width: 0; background: var(--cc); box-shadow: 0 0 10px var(--cc); transition: width 0.12s; }
.c-time { height: 2px; margin-top: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.c-time i { display: block; height: 100%; width: 0; background: #8fa3c9; }
.c-time.low i { background: var(--err); }
#c-bonus { --cc: #6f7f9f; justify-self: end; text-align: right; white-space: nowrap; font: 600 12.5px/1.3 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
#c-bonus b { font: 800 15px var(--mono); color: var(--cc); text-shadow: 0 0 12px color-mix(in srgb, var(--cc) 60%, transparent); }
#c-bonus.t1 { --cc: #dbe7ff; }
#c-bonus.t2 { --cc: var(--hit); }
#c-bonus.t3 { --cc: var(--roam); }
#c-bonus.max { --cc: #ff6bd6; }
.toast.combo { color: #ff9de6; border-color: rgba(255, 107, 214, 0.6); box-shadow: 0 0 30px -6px rgba(255, 107, 214, 0.8); }
#buf { display: flex; align-items: center; justify-content: center; min-height: 34px; font: 800 24px var(--mono); letter-spacing: 0.1em; color: var(--hit); text-shadow: 0 0 16px rgba(92, 242, 255, 0.7); }
#buf.err { color: var(--err); text-shadow: 0 0 16px rgba(255, 77, 109, 0.8); animation: shake 0.2s; }
#buf.stray { color: #ffd24d; text-shadow: 0 0 16px rgba(255, 210, 77, 0.7); }
#buf-hint { display: none; font: 600 13px var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); text-shadow: none; }
#buf.empty #buf-hint { display: inline; }
body.veteran #buf.empty #buf-hint { display: none; }
#buf.empty .caret { display: none; }
@keyframes shake { 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-4px); } 100% { transform: none; } }
.caret { display: inline-block; width: 3px; height: 1.05em; margin-left: 3px; vertical-align: text-bottom; background: var(--hit); animation: blink 0.9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

#xp { display: flex; align-items: center; gap: 10px; width: 100%; }
#xp-lv { width: 34px; height: 34px; border-radius: 9px; font: 800 15px/32px var(--disp); text-align: center; color: var(--roam); background: var(--panel); border: 1px solid rgba(255, 201, 77, 0.55); box-shadow: 0 0 16px -4px rgba(255, 201, 77, 0.7); }
.xpbar { position: relative; flex: 1; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.xpbar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #ff9a3d, #ffe27a); box-shadow: 0 0 12px #ffc94d; transition: transform 0.2s ease-out; }
#xp-txt { min-width: 96px; font: 500 11.5px var(--mono); color: var(--dim); text-align: right; }

/* ---------- title & death ---------- */
.overlay { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px; text-align: center; background: radial-gradient(ellipse at center, rgba(4, 6, 12, 0.72) 0%, rgba(4, 6, 12, 0.92) 75%); }
.logo { font-family: var(--disp); font-size: clamp(54px, 10vw, 132px); font-weight: 900; line-height: 1; letter-spacing: 0.06em; background: linear-gradient(180deg, #ffffff 10%, #5cf2ff 55%, #2b6cff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 32px rgba(92, 242, 255, 0.5)); }
.logo span { background: linear-gradient(180deg, #ffe27a, #ff5a4d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { font-size: clamp(15px, 1.6vw, 21px); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #a9bbdb; }
/* the start page: a callsign, then ENTER / new / a code, all typed */
#lobby { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 6px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.step label { max-width: 520px; font-size: 12px; font-weight: 700; letter-spacing: 0.3em; line-height: 1.5; color: var(--dim); }
.box { min-width: 360px; height: 62px; margin: 4px auto 6px; padding: 0 24px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font: 800 32px var(--mono); letter-spacing: 0.08em; color: #fff; background: rgba(8, 13, 25, 0.8); border: 1px solid rgba(92, 242, 255, 0.6); box-shadow: 0 0 40px -8px rgba(92, 242, 255, 0.7), inset 0 0 30px -14px rgba(92, 242, 255, 0.8); white-space: pre; }
.box.small { min-width: 300px; height: 48px; font-size: 24px; text-transform: uppercase; letter-spacing: 0.16em; }
.hint { font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.hint.err { color: #ff8a80; }
.hint b { font-family: var(--mono); color: var(--hit); text-transform: none; }
kbd { padding: 1px 8px; border-radius: 5px; font: 700 12px var(--mono); color: #06101c; background: var(--hit); }
.opts { display: flex; flex-direction: column; gap: 6px; }
.opt, .room { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 14px; width: 540px; padding: 7px 16px; border-radius: 10px; text-align: left; font-size: 15px; color: #c6d4ef; background: rgba(8, 13, 25, 0.7); border: 1px solid var(--line); }
.opt kbd { justify-self: start; }
.opt em, .room em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.lw { font: 800 20px var(--mono); letter-spacing: 0.04em; color: #fff; }
.lw b { color: var(--hit); text-shadow: 0 0 12px rgba(92, 242, 255, 0.85); }
.lw.dim { opacity: 0.4; }
.lw.code { font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--roam); }
#rooms { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.room { padding: 5px 16px; font-size: 14px; background: rgba(255, 201, 77, 0.06); border-color: rgba(255, 201, 77, 0.3); }
.room .lw { font-size: 18px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--roam); }
#rooms .none { padding: 2px 0; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.foot { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--dim); }
.foot b { font-family: var(--mono); color: #dbe7ff; }
#conn { height: 16px; font: 500 12px var(--mono); color: #ff8a80; }
.legal { position: fixed; right: 18px; bottom: 14px; font: 600 12px var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); text-decoration: none; }
.legal:hover { color: var(--txt); }
/* the link banner: the socket is down and the server is holding our ship while a new one comes up */
#link { position: fixed; top: 92px; left: 50%; transform: translateX(-50%); z-index: 20; padding: 8px 26px 7px; border-radius: 10px; font-family: var(--disp); font-size: 20px; font-weight: 800; letter-spacing: 0.14em; text-align: center; white-space: nowrap; color: #fff; background: rgba(190, 30, 50, 0.8); border: 1px solid #ff5a6e; animation: linkpulse 1.1s ease-in-out infinite alternate; }
#link small { display: block; margin-top: 2px; font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: #ffd0d6; }
@keyframes linkpulse { from { opacity: 0.7; } to { opacity: 1; } }
.cmds .ring { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #fff; vertical-align: -1px; }
.lb-count { display: flex; align-items: baseline; gap: 6px; margin: -3px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: #c6d4ef; }
.lb-count b { font: 800 15px var(--mono); color: var(--hit); }
.lb-count span { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }

.d-title { font-family: var(--disp); font-size: clamp(36px, 6vw, 76px); font-weight: 900; letter-spacing: 0.1em; color: #ff5a4d; text-shadow: 0 0 40px rgba(255, 90, 77, 0.7); }
#d-by { font-size: 20px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #a9bbdb; }
#d-by b { color: #fff; }
#d-stats { display: flex; gap: 12px; margin: 8px 0 12px; }
#d-stats div { min-width: 118px; padding: 12px 14px 9px; border-radius: 12px; background: rgba(8, 13, 25, 0.8); border: 1px solid var(--line); }
#d-stats b { display: block; font: 800 28px var(--mono); color: #fff; }
#d-stats small { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--dim); }

@media (max-width: 1180px) {
  #left { width: 250px; }
  #right, #mini { width: 214px; }
  #minimap { width: 190px; height: 190px; }
  #typing { width: calc(100vw - 520px); }
  #c-bonus { display: none; }
  #bufrow { grid-template-columns: auto 1fr; }
}
@media (max-height: 760px) {
  .up-opt .d { font-size: 11.5px; }
  .up-path { margin-bottom: 3px; padding-top: 3px; padding-bottom: 3px; }
  #minimap { width: 170px; height: 170px; }
}