/* Shiftship's own look: a neon vector arcade (Doug picked it on 1 Oct from the style options). Black space,
   glowing cyan and magenta outlines, a grid floor on the sky (draw.js), Orbitron for titles, numbers and buttons,
   Inter for reading. Loaded last on every Shiftship page so it only changes this game. */
@font-face { font-family: Orbitron; src: url(/fonts/Orbitron.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/Inter-500.woff2) format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/Inter-700.woff2) format('woff2'); font-weight: 700 900; font-display: swap; }
:root {
  --cyan: #2ff3ff;
  --mag: #ff2fd6;
  --hi: #2ff3ff;
  --hi-soft: #2ff3ff22;
  --bg: #04040c;
  --bg2: #070718;
  --panel: #0a0a1f;
  --panel2: #11112c;
  --line: #2ff3ff55;
  --ink: #04040c;
  --text: #e6fdff;
  --soft: #93b8c6;
  --accent: #2ff3ff;
  --pink: #ff2fd6;
  --teal: #2ff3ff;
  --violet: #9b6bff;
  --good: #5dff9e;
  --radius: 12px;
  --glow-c: 0 0 10px #2ff3ff88, 0 0 2px #2ff3ff;
  --glow-m: 0 0 10px #ff2fd688, 0 0 2px #ff2fd6;
}
html { background: var(--bg); }
body.ss, body.ss.game { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); }
.ss h1, .ss h2, .ss h3, .ss .score, .ss .count, .ss .big-score b, .ss .tv-title, .ss .big-code, .ss .b-time, .ss .b-ko,
.ss .tile-btn b, .ss .party-tile b, .ss .planet b, .ss .kicker, .ss .tv-chip, .ss .podium .block, .ss .combo, .ss .js-n {
  font-family: Orbitron, Inter, system-ui, sans-serif; letter-spacing: .04em;
}

/* Buttons: dark glass with a glowing outline. Cyan is the main colour, magenta the big "go" one. */
.ss button { font-family: Orbitron, Inter, system-ui, sans-serif; font-weight: 700; letter-spacing: .05em; font-size: 16px;
  background: #06142acc; color: var(--cyan); border: 2px solid var(--cyan); border-radius: var(--radius);
  box-shadow: var(--glow-c), inset 0 0 12px #2ff3ff22; text-shadow: 0 0 8px #2ff3ff99; }
.ss button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 18px #2ff3ffcc, inset 0 0 18px #2ff3ff44; }
.ss button.pink, .ss .tile-btn.pink { background: #2a0626cc; color: #ffd6f6; border-color: var(--mag); box-shadow: var(--glow-m), inset 0 0 14px #ff2fd633; text-shadow: 0 0 8px #ff2fd6; }
.ss button.teal { background: #06142acc; color: var(--cyan); }
.ss button.quiet { background: #04040c99; color: var(--text); border: 1.5px solid #2ff3ff55; box-shadow: none; text-shadow: none; font-family: Inter, system-ui, sans-serif; font-weight: 600; letter-spacing: 0; }
.ss button.back span { text-shadow: none; }
.ss button:focus-visible, .ss a:focus-visible, .ss input:focus-visible { outline: 2px solid var(--mag); outline-offset: 3px; }
.ss a { color: var(--cyan); }

/* Panels: near-black glass with a thin cyan edge. */
.ss .card { background: #070716ee; border: 1.5px solid #2ff3ff66; border-radius: 16px; box-shadow: 0 0 24px #2ff3ff22, inset 0 0 30px #2ff3ff0d; }
.ss .page { background: #04040cd9; }
.ss .home { background: linear-gradient(180deg, #04040c66, #04040cdd 70%); }
.ss input { background: #04040c; color: var(--text); border: 2px solid #2ff3ff88; border-radius: 10px; box-shadow: inset 0 0 10px #2ff3ff22; }
.ss .room-card input, .ss .name-row input { background: #04040c; color: var(--text); border: 2px solid #2ff3ff88; }

/* The logo: outlined letters that glow, SHIFT in cyan and SHIP in magenta. */
.ss .ss-logo .word { font-family: Orbitron, Inter, sans-serif; font-weight: 900; letter-spacing: .1em; font-size: 40px; color: transparent;
  -webkit-text-stroke: 1.6px var(--cyan); text-shadow: 0 0 14px #2ff3ffaa; transform: none; }
.ss .ss-logo .word em { color: transparent; -webkit-text-stroke-color: var(--mag); text-shadow: 0 0 14px #ff2fd6aa; }
@media (max-height: 640px) { .ss .ss-logo .word { font-size: 30px; } }
@media (max-width: 370px) { .ss .ss-logo .word { font-size: 34px; } }

/* Top bar and play screen */
.ss .hp i, .ss .b-hp i { color: var(--mag); text-shadow: 0 0 8px var(--mag); }
.ss .hp i.gone, .ss .b-hp i.gone { color: #ffffff22; text-shadow: none; }
.ss .score { text-shadow: 0 0 10px #2ff3ff88; color: var(--text); font-size: 20px; }
.ss .trip { background: #ffffff14; border: 1px solid #2ff3ff66; }
.ss .trip i { background: linear-gradient(90deg, var(--cyan), var(--mag)); box-shadow: 0 0 8px #ff2fd688; }
.ss .trip.boss i { background: linear-gradient(90deg, #ff2f5e, var(--mag)); }
.ss .dust-chip, .ss .me-pill, .ss .bhud, .ss .tv-chip { background: #04040ccc; border: 1.5px solid #2ff3ff55; box-shadow: 0 0 12px #2ff3ff22; }
.ss .combo { background: #2a0626; color: #ffd6f6; border: 2px solid var(--mag); box-shadow: var(--glow-m); }
.ss .toast, .ss .tip { background: #070716ee; border: 1.5px solid #2ff3ff66; color: var(--text); }
.ss .power-bar { border: 1.5px solid #2ff3ff88; background: #04040ccc; }
.ss .count { color: transparent; -webkit-text-stroke: 3px var(--cyan); text-shadow: 0 0 24px #2ff3ffcc; font-weight: 900; }
.ss .b-out b { color: var(--mag); -webkit-text-stroke: 0; text-shadow: 0 0 18px var(--mag); font-family: Orbitron, Inter, sans-serif; }

/* FIRE: a magenta ring that glows; the weapon box: a cyan one. */
.ss .fire-btn { background: radial-gradient(circle at 50% 45%, #ff2fd6aa, #3a0634 70%); border: 3px solid var(--mag); color: #fff; box-shadow: 0 0 20px #ff2fd6aa, inset 0 0 16px #ff2fd688 !important; text-shadow: 0 0 8px #fff; font-size: 16px; }
.ss .fire-btn.down, .ss .fire-btn:active { transform: scale(.94); box-shadow: 0 0 34px #ff2fd6, inset 0 0 22px #ff2fd6 !important; }
.ss .fire-btn.auto { background: #06142acc; color: var(--cyan); border-color: var(--cyan); box-shadow: var(--glow-c) !important; text-shadow: 0 0 8px var(--cyan); font-size: 14px; }
.ss .arm-btn { background: #04040ccc; border: 1.5px solid var(--cyan); box-shadow: var(--glow-c); color: var(--text); text-shadow: none; }

/* Home tiles, planet map, hangar, end card */
.ss .tile-btn b { font-size: 15px; }
.ss .party-tile b { font-size: 15px; }
.ss .planet b { font-size: 15px; }
.ss .planet .orb { border: 2px solid #ffffff55; box-shadow: 0 0 14px #2ff3ff44, inset -8px -8px 0 #00000055; }
.ss .mission .bar i { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.ss .big-score b { text-shadow: 0 0 18px #2ff3ffaa; }
.ss .paint, .ss .gear-btn { background: #070716; border: 1.5px solid #2ff3ff44; box-shadow: none; color: var(--text); text-shadow: none; font-family: Inter, system-ui, sans-serif; letter-spacing: 0; }
.ss .paint.on, .ss .gear-btn.max { border-color: var(--good); box-shadow: 0 0 10px #5dff9e66; }
.ss .planet { font-family: Inter, system-ui, sans-serif; letter-spacing: 0; color: var(--text); text-shadow: none; }

/* Party room: chips, lists, TV */
.ss .course, .ss .mode { background: #070716; color: var(--text); text-shadow: none; font-family: Inter, system-ui, sans-serif; letter-spacing: 0; border: 1.5px solid #2ff3ff44; box-shadow: none; }
.ss .mode b { font-family: Orbitron, Inter, sans-serif; font-size: 15px; }
.ss .course.on, .ss .mode.on { border-color: var(--mag); background: #ff2fd61c; box-shadow: var(--glow-m); }
.ss .pilots li, .ss .standings li, .ss .tonight li { background: #ffffff0a; border: 1px solid #2ff3ff22; }
.ss .standings li.me, .ss .tonight li.me { outline: 1.5px solid var(--mag); box-shadow: 0 0 10px #ff2fd655; }
.ss .room-card h2.win, .ss .tv-res-card h2 { color: var(--mag); text-shadow: 0 0 16px #ff2fd6aa; }
.ss .tv-title { color: transparent; -webkit-text-stroke: 1.6px var(--cyan); text-shadow: 0 0 16px #2ff3ffaa; font-weight: 900; }
.ss .tv-title em { color: transparent; -webkit-text-stroke-color: var(--mag); text-shadow: 0 0 16px #ff2fd6aa; font-style: normal; }
.ss .tv-title span { -webkit-text-stroke: 0; color: var(--soft); text-shadow: none; }
.ss.ss .big-code { color: var(--text); background: #04040c; border: 2px solid var(--mag); box-shadow: var(--glow-m); text-shadow: 0 0 14px #2ff3ffaa; }
.ss .tv-board li, .ss .tv-feed li { background: #070716e6; border: 1.5px solid #2ff3ff44; }
.ss .podium .block { background: #06142a; color: var(--cyan); border: 2px solid var(--cyan); box-shadow: var(--glow-c); }
.ss .tv-pilot small { background: var(--mag); color: #fff; }
.ss .button-link { background: #06142a; color: var(--cyan); border: 2px solid var(--cyan); box-shadow: var(--glow-c); }
/* Orbitron is wide: the small lines under titles read in Inter so tiles stay one or two lines */
.ss button small, .ss .tile-btn small, .ss .party-tile small, .ss .party-btns small { font-family: Inter, system-ui, sans-serif; letter-spacing: 0; text-shadow: none; }
/* short screens (a laptop at 650 tall, a sideways phone at 360): a little tighter so the home never scrolls */
@media (max-height: 700px) { .ss .home { gap: 8px; } .ss .ss-logo canvas { width: 66px; height: 66px; } }
@media (max-height: 380px) { .ss .home { gap: 5px; } .ss .row-btns button.small { min-height: 38px; } }
.ss .js-n { background: transparent; color: var(--cyan); border: 2px solid var(--cyan); box-shadow: var(--glow-c); }
/* difficulty switches */
.ss .level-row .lvl, .ss .level { background: #070716; color: var(--text); border: 1.5px solid #2ff3ff44; box-shadow: none; text-shadow: none; font-size: 13px; }
.ss .level-row .lvl.on, .ss .level.on { border-color: var(--mag); background: #ff2fd61c; box-shadow: var(--glow-m); color: #ffd6f6; }