/* BITR — the profiles on the arcade's CRT (index.html, after select.css, profile.css and
   arcade-additions.css). select.css makes the whole window the cabinet's electric-blue tube; this
   brings a member's profile onto it: a dark glass panel edged in the tube's blue, the intro's
   red-and-yellow arcade buttons, and the tube's blues in place of the leftover navy. */

/* The page is inside the bezel, so it's the bezel's height shorter than the window */
.arcade:has(.details:not([hidden])) { min-height: calc(100dvh - 2 * var(--bezel)); }

/* The card: a dim panel on the tube, edged in its blue, lit by the member's colour */
.details-card {
  border-color: var(--frame);
  box-shadow: inset 0 0 0 3px var(--blue-deep), 0 0 0 2px #020820, 0 0 24px rgba(60, 110, 255, 0.18);
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 60%),
    rgba(2, 5, 22, 0.8);
}
.details-name { text-shadow: 3px 3px 0 #000, 4px 4px 0 #071660; }
.details-home { color: #cfdcff; }
.profile-bio { border-bottom-color: #1c3a9a; }
.stat-title { color: #f5d63c; text-shadow: 2px 2px 0 #3a2a00; border-bottom-color: #1c3a9a; }
.details-card > .badge-strip { border-top-color: #1c3a9a; }
.ticker-list .feed-item, .feed-item { border-bottom-color: #13287a; }
.feed-account, .film-rewatch, .profile-actions #edit-space { color: #9cc4ff; }
.track:hover, .track:focus-visible, .track.is-playing { background: #0c1f6a; }

/* Back and the arrows: keys of lit glass on the tube, navy with a pale blue rim and glowing letters,
   flaring electric blue when pressed or pointed at */
.pad-btn {
  color: #dbe8ff;
  background: linear-gradient(180deg, #0c2a9a, #061670 60%, #030a3a);
  border-color: #8cb8ff;
  box-shadow: 0 4px 0 #010520, 0 0 0 2px #020820, 0 0 14px rgba(60, 120, 255, 0.35);
  text-shadow: 0 0 6px rgba(140, 190, 255, 0.9), 2px 2px 0 #020820;
}
.pad-btn:hover, .pad-btn:focus-visible {
  color: #fff;
  background: linear-gradient(180deg, #2f6bff, #1840d8 60%, #0a2290);
  border-color: #cfe0ff;
  box-shadow: 0 4px 0 #010520, 0 0 0 2px #020820, 0 0 22px rgba(80, 140, 255, 0.6);
}
.pad-btn:active { box-shadow: 0 2px 0 #010520, 0 0 0 2px #020820, 0 0 22px rgba(80, 140, 255, 0.6); }

/* The music dock's parts, in the tube's blues */
.tape-shell { border-color: #8cb8ff; background: #071a5a; }
#tape-member { color: #9cc4ff; }
.tape-transport button { border-color: #2a5cff; background: #071a5a; }
.tape-transport #tape-play { background: #0f2a9a; border-color: #8cb8ff; }
.tape-transport button:hover, .tape-transport button:focus-visible { background: #1a3ccc; outline-color: #cfdcff; }
.record-list button:hover, .record-list button:focus-visible, .record-list button[aria-pressed="true"] { background: #0c1f6a; }
.pin-people a { border-color: #1c3a9a; background: #020a2a; }
.pin-people a:hover, .pin-people a:focus-visible { background: #0c1f6a; }

/* The now-playing box and the bio's game text box: blue-glass panels */
.feed-track.is-latest, .bio-box { background: linear-gradient(180deg, #0f2a9a, #040d3a); }

/* On the select screen, which is exactly the window, the curved glass rendered in Blender sits on top
   too: tube-curve darkening into the corners, a rim highlight across the top, a glare and a faint
   reflection of the arcade's doorway (assets/select/crt-glass*.png, stretched to the screen) */
.arcade:has(> .select:not([hidden]))::before {
  background:
    linear-gradient(180deg, transparent 0, rgba(170, 200, 255, 0.06) 46%, rgba(170, 200, 255, 0.06) 54%, transparent 100%) 0 0 / 100% 22% no-repeat,
    url('../assets/select/crt-glass.png') 0 0 / 100% 100% no-repeat;
  image-rendering: auto;
}
@media (orientation: portrait) {
  .arcade:has(> .select:not([hidden]))::before {
    background-image:
      linear-gradient(180deg, transparent 0, rgba(170, 200, 255, 0.06) 46%, rgba(170, 200, 255, 0.06) 54%, transparent 100%),
      url('../assets/select/crt-glass-tall.png');
  }
}
@keyframes crt-roll-glass { from { background-position: 0 -30%, 0 0; } to { background-position: 0 130%, 0 0; } }
.arcade:has(> .select:not([hidden]))::before { animation-name: crt-roll-glass; }

/* Coming on: whenever the select screen or a profile appears, the picture tears in for a moment,
   sliced into bands that jump sideways with red and cyan split apart, then snaps clean (js/crt.js
   drives the #tube-glitch filter in index.html) */
.arcade .is-glitching { filter: url(#tube-glitch) brightness(1.2) saturate(1.2); }

/* ---------- The close-up tube: dotted scan lines, the grade, glow and colour fringing ----------
   js/crt.js draws the intro's dotted scan lines on this see-through canvas: dark between the rows,
   pale blue-white dots that brighten over anything bright */
.crt-dots {
  position: fixed;
  inset: 0;
  z-index: 19;
  width: 100%;
  height: 100%;
  /* the whole window, so the canvas keeps whole pixels (a stretched one smears its dots), cut to the glass */
  clip-path: inset(var(--bezel) round clamp(18px, 4vmin, 48px) / clamp(16px, 3.4vmin, 42px));
  pointer-events: none;
}
/* The profiles keep more of their text crisp: softer lines there */
.arcade:has(.details:not([hidden])) .crt-dots { opacity: 0.6; }
/* The members' pictures through the intro's grade (the #tube-grade filter in index.html, the numbers
   from tools/blender/tube_post.py): neutral tones to electric blue, warm ones kept hot */
.slot-face, .slot-shadow, #details-face, .photo, .pick-face.is-round, .film-poster, .feed-art, .club-art { filter: url(#tube-grade); }
.pick-face { filter: url(#tube-grade) drop-shadow(0 6px 0 rgba(0, 0, 0, 0.6)); }
/* Glow and a little colour fringing: the picture blooms through the lines, and edges split into red
   and blue the way a tired tube's beams drift apart */
.select, .details { filter: brightness(1.2) saturate(1.2); }
.slot-frame img {
  filter:
    url(#tube-grade)
    drop-shadow(-2px 0 0 rgba(255, 40, 90, 0.5)) drop-shadow(2px 0 0 rgba(40, 200, 255, 0.5))
    drop-shadow(0 0 10px color-mix(in srgb, var(--c) 55%, transparent)) drop-shadow(0 4px 0 rgba(0, 0, 0, 0.6));
}
.slot-name, .select-hint, .select-credit, .hud-name, .stat-title, .details-name {
  text-shadow: -1px 0 0 rgba(255, 40, 90, 0.55), 1px 0 0 rgba(40, 200, 255, 0.55), 0 0 8px currentColor, 2px 2px 0 #020820;
}

/* A member's featured picture plays on a little pixel-art TV from the cabinet's world (rendered in
   Blender, assets/select/tv-frame.png; its screen is see-through) instead of a tilted snapshot */
.photo {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 640 / 600;
  margin: 0;
  padding: 0;
  transform: none;
}
.photo img {
  position: absolute;
  inset: 39.56% 33.83% 20.27% 14.68%;
  width: 51.49%;
  height: 40.17%;
  max-width: none;
  object-fit: cover;
  border: 0;
  box-shadow: none;
  filter: brightness(1.1);   /* graded with the TV around it (.photo) */
}
/* the TV's own glass: scanlines, a curve of shade at the edges and a glint, over the picture */
.photo::before {
  content: '';
  position: absolute;
  inset: 39.56% 33.83% 20.27% 14.68%;
  width: auto;
  height: auto;
  z-index: 1;
  transform: none;
  border-radius: 8% / 10%;
  background:
    radial-gradient(ellipse 40% 30% at 28% 22%, rgba(255, 255, 255, 0.22), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 70% 70% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.6) 100%);
  box-shadow: inset 0 0 14px 4px rgba(0, 0, 0, 0.55);
}
.photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url('../assets/select/tv-frame.png') 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}

/* ---------- Phones and tablets: the tube fills the screen, edge to edge ----------
   No bezel, no rounded glass corners and no arcade room around it: the screen itself is the tube.
   Safari on iPhone keeps strips above and below the page for its address bar and toolbar. Since
   Safari 26 it ignores theme-color and tints them from a fixed element along the window's top or
   bottom edge, else the body's background colour; the tube's dotted lines are a fixed, see-through
   canvas over the whole window, which on its own leaves those strips black. So the tube's blue runs
   right to its top and bottom edges, the glass only darkens a little at the sides, and thin fixed
   strips at the very top and bottom (.bar-tint, in index.html), with the body behind them, carry the
   colour the tube's ends come out at under the grainy dotted lines (#18225a, measured): Safari's bars
   read as more of the tube instead of a black frame. The footer keeps clear of the floating toolbar. */
.bar-tint { display: none; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  html:has(#arcade), html:has(#arcade) body {
    background: #18225a radial-gradient(ellipse 75% 70% at 50% 45%, #0723b1 0, #05188a 70%) no-repeat;
  }
  html:has(#arcade) body { min-height: 100dvh; }
  .bar-tint {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    height: 6px;
    z-index: 950;   /* over the dotted lines, under the intro */
    background-color: #18225a;
    pointer-events: none;
  }
  .bar-tint-top { top: 0; }
  .bar-tint-bottom { bottom: 0; }
  .intro-on .bar-tint { background-color: #000; }   /* black bars around the black title screen */
  .arcade {
    --bezel: 0px;
    margin: 0;
    min-height: 100dvh;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px));
  }
  .arcade::before, .arcade::after { border-radius: 0; }
  /* the glass darkens only a little, at the sides; the rendered curved glass, which fades to black at
     the top and bottom, stays off */
  .arcade::after {
    background: linear-gradient(90deg, rgba(0, 2, 12, 0.35), transparent 12%, transparent 88%, rgba(0, 2, 12, 0.35));
    box-shadow: none;
  }
  .arcade:has(> .select:not([hidden]))::before { background: none; }
  .crt-dots { clip-path: none; }
}
/* Touch screens: Safari's floating bottom toolbar covers the last few dozen pixels of the page, so the
   footer and the profile's BACK buttons sit above it. And to keep phones smooth: no whole-page colour
   boost (it makes Safari redraw the page, its filtered pictures included, whenever anything on it
   blinks) and no rolling refresh band (a full-screen repaint every frame); the dotted lines over the
   page carry the motion */
@media (hover: none) and (pointer: coarse) {
  .select, .details { filter: none; }
  .arcade::before, .arcade:has(> .select:not([hidden]))::before { animation: none; }
  .arcade { padding-bottom: max(46px, calc(env(safe-area-inset-bottom) + 26px)); }
  .details-nav { bottom: max(46px, calc(env(safe-area-inset-bottom) + 26px)); }
}
/* short phones (iPhone SE and the like): the roster closes up so the select screen fits without scrolling */
@media (max-width: 760px) and (max-height: 700px) {
  .roster { row-gap: 30px; padding-top: 28px; }
  .select { gap: 6px; padding-bottom: 20px; }
}