/* BITR — "Select your bum" character select screen (index.html).
   Modelled on the Turtles in Time arcade select screen. */

@font-face {
  font-family: 'Press Start 2P';
  src: url('../assets/fonts/press-start-2p-latin-400-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'DotGothic16';
  src: url('../assets/fonts/dotgothic16-latin-400-normal.woff2') format('woff2');
  font-display: swap;
}

:root {
  --bg: #000;
  --ink: #fff;
  --blue: #2a6cff;
  --blue-hi: #7fb2ff;
  --blue-deep: #0b1f8a;
  --frame: #c8dcff;
  --c: #3ccf6e;           /* the highlighted member's colour, set by js/select.js */
  --pixel: 'Press Start 2P', ui-monospace, monospace;
  --text: 'DotGothic16', ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
body {
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: none;
  -webkit-tap-highlight-color: transparent;
}
img { image-rendering: pixelated; image-rendering: crisp-edges; }
button { font: inherit; color: inherit; }
a { color: var(--blue-hi); }
[hidden] { display: none !important; }

.arcade {
  max-width: 2000px;
  overflow-x: clip;   /* the last slot's slanted stripe pokes past the edge */
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------- 1UP score box (one player picks) ---------- */
.hud { display: grid; grid-template-columns: minmax(0, 1fr) 1fr; gap: 12px; font-family: var(--pixel); }
.hud-box {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'up name score' 'lives bar bar';
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
  padding: 8px 14px 9px;
  border: 3px solid var(--frame);
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px var(--blue-deep), 0 0 0 2px var(--blue-deep);
  background: #000;
  font-size: clamp(14px, 1vw, 20px);
  min-width: 0;
}
.hud-up { grid-area: up; color: var(--blue-hi); font-style: italic; font-size: 0.78em; }
.hud-up b { font-size: 2em; color: var(--blue); font-style: italic; }
.bitr-wordmark { display: inline-block; font-family: var(--pixel); font-weight: 700; font-style: italic; letter-spacing: -0.08em; color: var(--blue-hi); text-shadow: 2px 2px 0 var(--blue-deep), -1px 0 0 var(--blue); }
.hud-up.bitr-wordmark { font-size: 1.2em; }
.hud-name { grid-area: name; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-score { grid-area: score; }
.hud-lives { grid-area: lives; font-size: 1.1em; padding-left: 4px; }
.hud-bar {
  grid-area: bar;
  height: 14px;
  --fill: 10;
  background:
    linear-gradient(90deg, var(--c) calc(var(--fill) / 16 * 100%), transparent 0) 0 0 / 100% 100% no-repeat;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px);
          mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px);
  outline: 1px solid #333;
  transition: background 0.2s;
}

/* ---------- Title ---------- */
.select, .details { flex: 1; display: flex; flex-direction: column; }
.select { justify-content: center; gap: clamp(20px, 3vh, 44px); padding-bottom: 2vh; }
.hint-touch { display: none; }
@media (hover: none) { .hint-touch { display: inline; } .hint-mouse { display: none; } }
.select-title {
  margin: 4px 0 0;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: clamp(20px, 3.9vw, 76px);
  letter-spacing: 0.06em;
  text-align: center;
  color: #fff;
  text-shadow:
    3px 3px 0 var(--blue), -1px -1px 0 var(--blue-deep), 1px -1px 0 var(--blue-deep),
    -1px 1px 0 var(--blue-deep), 1px 1px 0 var(--blue-deep), 5px 5px 0 #000;
}
.select-hint {
  margin: 0;
  text-align: center;
  font-family: var(--pixel);
  font-size: clamp(10px, 0.75vw, 14px);
  color: #9aa6c8;
  animation: blink 1.4s steps(1) infinite;
}

/* ---------- Roster ---------- */
.roster {
  list-style: none;
  margin: 0;
  padding: clamp(48px, 7vh, 90px) 0 clamp(18px, 4vh, 60px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1.6vw, 36px);
  align-items: center;
}
.slot { --c: #fff; position: relative; }
.slot-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  outline: none;
}
.slot-frame {
  position: relative;
  display: block;
  aspect-ratio: 1;
  /* as big as the column allows, but never taller than about half the screen */
  width: min(100%, 52vh);
  margin: 0 auto;
  z-index: 1;
  transition: transform 0.12s steps(3);
}
.slot-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.6));
}
.slot-face { opacity: 0; }
/* the blue diagonal stripe behind the highlighted fighter */
.slot-band {
  position: absolute;
  left: 8%;
  right: 8%;
  top: -18%;
  bottom: -8px;
  transform: skewX(-14deg);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, var(--blue-hi), var(--blue) 40%, var(--blue-deep));
  opacity: 0;
  transition: opacity 0.1s steps(2);
}
.slot-name {
  display: block;
  margin-top: 16px;
  font-family: var(--pixel);
  font-size: clamp(9px, 1vw, 20px);
  text-align: center;
  color: var(--c);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.slot-up {
  position: absolute;
  left: 50%;
  top: clamp(-64px, -5vh, -40px);
  z-index: 2;
  padding: 2px 6px 3px;
  font-family: var(--pixel);
  font-size: clamp(10px, 0.8vw, 15px);
  font-style: italic;
  color: #fff;
  background: var(--blue-deep);
  border: 2px solid var(--frame);
  transform: translateX(-50%);
  opacity: 0;
  white-space: nowrap;
}
.slot-up b { font-size: 1.6em; color: #ffd84a; }
.slot-up::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--frame);
  border-bottom: 0;
}

.slot.is-active .slot-face { opacity: 1; }
.slot.is-active .slot-shadow { opacity: 0; }
.slot.is-active .slot-band { opacity: 1; }
.slot.is-active .slot-up { opacity: 1; animation: bob 0.6s steps(2) infinite; }
.slot.is-active .slot-frame { transform: scale(1.08); }
.slot.is-active .slot-name { color: #fff; text-shadow: 2px 2px 0 var(--blue); }
.slot-btn:focus-visible .slot-frame { outline: 3px solid #ffd84a; outline-offset: 4px; }
.slot.is-chosen .slot-frame { animation: flash 0.13s steps(1) 4; }
.slot.is-chosen .slot-band { animation: flash 0.13s steps(1) 4 reverse; }

/* ---------- Details ---------- */
.details { --c: #3ccf6e; gap: 16px; width: 100%; max-width: 1500px; margin: 0 auto; justify-content: center; }
.details-card {
  flex: 0 0 auto;
  display: grid;
  /* Left: portrait, then the feed. Right: bio and the rest. */
  grid-template-columns: minmax(260px, 32%) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: 'side body' 'feed body';
  gap: 22px 30px;
  border: 3px solid var(--frame);
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px var(--blue-deep), 0 0 0 2px var(--blue-deep);
  padding: 22px;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%),
    #000;
}
.details-side { grid-area: side; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; min-width: 0; }
/* Round portrait in the member's colour, like a fighter's badge. */
.details-portrait {
  flex: none;
  width: 152px;   /* 144px picture (the 72px avatar at 2x) + border */
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 4px solid var(--c);
  box-shadow: 0 0 0 3px #000, 0 0 0 6px var(--blue-deep), inset 0 0 0 3px #000;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 4px),
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c) 34%, #000), #000 74%);
  overflow: hidden;
}
.details-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
}
.details-id { min-width: 0; }
.details-name {
  margin: 6px 0 4px;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--c);
  text-shadow: 3px 3px 0 #000, 4px 4px 0 var(--blue-deep);
  overflow-wrap: anywhere;
}
.details-home { margin: 0; display: flex; align-items: center; gap: 8px; color: #cfd6ea; }
.details-home img { image-rendering: auto; border: 1px solid #333; }

.details-body {
  grid-area: body;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stat-cols { columns: var(--cols, 3) 230px; column-gap: 22px; }
/* Members with nothing in their feed yet: a narrow left column with just
   the portrait and name, and everything else spread across the card. */
.details-card.no-feed { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'side body'; grid-template-rows: none; }
.no-feed .details-side { flex-direction: column; align-items: flex-start; align-self: start; max-width: 220px; }
.no-feed .details-feed { display: none; }
.stat-cols > .stat { break-inside: avoid; margin-bottom: 16px; }
.stat-cols > .stat:last-child { margin-bottom: 0; }
.stat { min-width: 0; }
.stat-title {
  margin: 0 0 8px;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 12px;
  color: #ffd84a;
  letter-spacing: 1px;
  border-bottom: 2px dashed #2a3566;
  padding-bottom: 6px;
}
.stat-bio { margin: 0; font-size: 18px; }
.stat-note { margin: 6px 0 0; font-size: 13px; color: #8790ad; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 2px 8px; border: 2px solid var(--c); color: #fff; font-size: 15px; }
.list { margin: 0; padding: 0 0 0 1.6em; }
.list li { padding: 2px 0; }
.list li::marker { color: var(--c); font-family: var(--pixel); font-size: 10px; }
.osu-stats { list-style: none; margin: 0 0 6px; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.osu-stats span { color: #8790ad; margin-right: 6px; }
.osu-stats b { color: #ff66aa; font-weight: 400; }
.plays li { display: flex; flex-direction: column; }
.play-meta { font-size: 13px; color: #8790ad; }
.tracks { padding-left: 0; list-style: none; }
.track {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.track:hover, .track:focus-visible { background: #0b1450; outline: none; }
.track:focus-visible { box-shadow: inset 0 0 0 2px #ffd84a; }
.track-play { color: var(--c); font-size: 12px; }
.track-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.track-time { color: #8790ad; font-size: 14px; }
.track.is-playing { background: #0b1450; }
.track.is-playing .track-play { animation: blink 0.6s steps(1) infinite; }
.sc iframe { display: block; width: 100%; height: 166px; border: 0; margin-top: 8px; }
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.links a {
  display: inline-block;
  padding: 6px 10px;
  border: 2px solid var(--frame);
  color: #fff;
  text-decoration: none;
  background: var(--blue-deep);
}
.links a:hover, .links a:focus-visible { background: var(--blue); outline: none; }

.details-nav { display: flex; justify-content: center; gap: 12px; }
.pad-btn {
  min-width: 52px;
  min-height: 48px;
  padding: 0 16px;
  font-family: var(--pixel);
  font-size: 14px;
  color: #fff;
  background: var(--blue-deep);
  border: 3px solid var(--frame);
  border-radius: 8px;
  cursor: pointer;
}
.pad-btn:hover, .pad-btn:focus-visible { background: var(--blue); outline: none; }
.pad-btn:active { transform: translateY(2px); }

/* ---------- "What I've been up to" feed ---------- */
.details-feed { grid-area: feed; min-width: 0; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 6px;
  border-bottom: 2px dotted #1c2550;
}
.feed-icon { flex: none; width: 22px; text-align: center; color: var(--c); font-size: 17px; line-height: 1.4; }
.feed-main { min-width: 0; display: flex; flex-direction: column; }
.feed-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.feed-link:hover .feed-song, .feed-link:focus-visible .feed-song { text-decoration: underline; }
.feed-song, .feed-text { color: #fff; overflow-wrap: anywhere; }
.feed-text a { color: #fff; }
.feed-artist { color: #9aa6c8; font-size: 15px; overflow-wrap: anywhere; }
.feed-time, .feed-live { margin-top: 3px; font-family: var(--pixel); font-size: 9px; color: #6a7294; }
.feed-live { color: var(--c); animation: blink 1s steps(1) infinite; }
/* The latest scrobble gets a little "now playing" box with chunky cover art. */
.feed-track.is-latest {
  align-items: center;
  margin-bottom: 4px;
  padding: 10px;
  border: 3px solid var(--frame);
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px var(--blue-deep);
  background: linear-gradient(180deg, #0b1f8a, #050c40);
}
.feed-art {
  flex: none;
  width: 68px;
  height: 68px;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
}
.feed-note { padding: 9px 6px; color: #8790ad; font-size: 15px; }
.feed-more { padding: 12px 6px 0; }
.feed-more a { font-family: var(--pixel); font-size: 10px; color: var(--blue-hi); text-decoration: none; }
.feed-more a:hover, .feed-more a:focus-visible { color: #fff; }

/* ---------- Footer ---------- */
.foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  font-family: var(--pixel);
  font-size: clamp(10px, 0.7vw, 13px);
  color: #6a7294;
}
.foot a { color: #9aa6c8; text-decoration: none; padding: 8px 0; }
.foot a:hover, .foot a:focus-visible { color: #fff; }
.foot-sound { background: none; border: 0; padding: 8px 0; cursor: pointer; font-family: var(--pixel); font-size: inherit; color: #9aa6c8; }
.foot-sound:hover, .foot-sound:focus-visible { color: #fff; }
.noscript { font-family: var(--pixel); font-size: 12px; text-align: center; padding: 20px; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes bob { 50% { transform: translateX(-50%) translateY(-4px); } }
@keyframes flash { 50% { filter: brightness(2.4) saturate(0); } }
@keyframes enter { from { opacity: 0; transform: scale(0.96); } }

/* ---------- Desktop: keep the screen together in the middle ---------- */
@media (min-width: 761px) {
  /* The 1UP box, title and roster sit as one group in the middle of the
     window (with the footer at the bottom) instead of spread top to bottom. */
  .arcade { justify-content: center; }
  .hud { grid-template-columns: minmax(0, 760px); justify-content: center; margin-top: auto; }
  .select { flex: 0 0 auto; padding: clamp(8px, 2vh, 24px) 0; }
  .foot { margin-top: auto; }
  /* Long profiles share the available height without pushing navigation off-screen. */
  .arcade:has(.details:not([hidden])) { height: 100dvh; }
  .hud, .foot, .details-nav { flex-shrink: 0; }
  .details { min-height: 0; }
  .details-card { flex: 0 1 auto; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  .details-card.no-feed { grid-template-rows: minmax(0, 1fr); }
  .details-portrait { width: clamp(88px, 15dvh, 152px); }
  .details-body, .details-feed { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
  .details-body:focus-visible, .details-feed:focus-visible { outline: 2px solid #ffd84a; outline-offset: 3px; }
  /* A dim blue stage glow behind the roster so the black isn't empty. */
  .select { position: relative; isolation: isolate; }
  .select::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0 -16px;
    background:
      radial-gradient(ellipse 60% 55% at 50% 62%, rgba(42, 108, 255, 0.22), transparent 70%),
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 4px);
    -webkit-mask: radial-gradient(ellipse 65% 60% at 50% 58%, #000 40%, transparent 100%);
            mask: radial-gradient(ellipse 65% 60% at 50% 58%, #000 40%, transparent 100%);
    pointer-events: none;
  }
}

/* ---------- Phones and narrow windows ---------- */
@media (max-width: 760px) {
  .arcade { gap: 14px; }
  .hud { grid-template-columns: 1fr; }
  .hud-box { padding: 6px 8px 7px; column-gap: 8px; font-size: 10px; border-radius: 8px; }
  .hud-lives { padding-left: 0; }
  .hud-bar { height: 10px; }
  .roster { grid-template-columns: repeat(3, 1fr); row-gap: 56px; column-gap: 18px; padding-top: 44px; }
  .slot-name { font-size: 10px; margin-top: 12px; }
  .slot-up { top: -36px; font-size: 10px; }
  .slot-frame { width: 100%; }
  .select { gap: 12px; }
  .details-card { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
  .details-card, .details-card.no-feed { grid-template-columns: 1fr; grid-template-areas: 'side' 'body' 'feed'; grid-template-rows: none; }
  .no-feed .details-side { flex-direction: row; align-items: center; max-width: none; }
  .details-portrait { width: 116px; }   /* 108px picture: 1.5x */
  .details-nav { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .roster { column-gap: 12px; }
  .hud-box { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Details extras: speech-box bio, club card, snapshot ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stat-wide { grid-column: 1 / -1; }
.details-fan {
  display: inline-block;
  margin: 10px 0 0;
  padding: 4px 10px 5px;
  font-family: var(--pixel);
  font-size: 11px;
  color: #fff;
  background: #db0007;
  border: 2px solid #fff;
  box-shadow: 3px 3px 0 #000;
}
.bio-box {
  position: relative;
  padding: 14px 44px 16px 18px;
  border: 3px solid var(--frame);
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px var(--blue-deep);
  background: linear-gradient(180deg, #0b1f8a, #06104d);
}
.bio-box .stat-bio {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 26px);
  line-height: 1.45;
  white-space: pre-line;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  min-height: 1.45em;
}
.bio-more {
  position: absolute;
  right: 16px;
  bottom: 10px;
  color: var(--c);
  font-size: 14px;
  animation: bob-down 0.7s steps(2) infinite;
}
.bio-box.is-typing .bio-more { visibility: hidden; }
.bio-box.is-typing .stat-bio::after { content: '_'; color: var(--c); animation: blink 0.4s steps(1) infinite; }

.club-card {
  position: relative;
  overflow: hidden;
  max-width: 420px;
  padding: 14px 16px 16px;
  color: #fff;
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0 6px, transparent 6px 12px),
    #db0007;
  box-shadow: 4px 4px 0 #000;
}
.club-art { display: block; width: 48%; max-width: 170px; height: auto; margin: 0 auto 10px; }
.club-name {
  margin: 0;
  font-family: var(--pixel);
  font-size: clamp(18px, 1.6vw, 28px);
  text-align: center;
  text-shadow: 3px 3px 0 #6b0004;
}
.club-nick { margin: 6px 0 0; text-align: center; font-family: var(--pixel); font-size: 11px; color: #ffe2e2; }
.club-ground { margin: 6px 0 0; text-align: center; font-size: 15px; }
.club-chant {
  margin: 8px 0 0;
  text-align: center;
  font-family: var(--pixel);
  font-size: 14px;
  color: #ffd84a;
  text-shadow: 2px 2px 0 #6b0004;
  animation: blink 1s steps(1) infinite;
}

.photo { margin: 0; }
.photo img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 1;
  border: 3px solid var(--frame);
  box-shadow: 0 0 0 3px var(--blue-deep), 6px 6px 0 3px #000;
}

@keyframes bob-down { 50% { transform: translateY(3px); } }