/* ─── Press Start 2P font ───────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ─── Reset & base ─────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #e0e0e0;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  cursor: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ─── CRT scanlines ─────────────────────────────────────────────────────────── */

#scanlines {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.12) 3px,
    rgba(0, 0, 0, 0.12) 4px
  );
}

/* Subtle vignette */
#scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0,0,0,0.45) 100%
  );
}

/* ─── WebGL background canvas (home view) ──────────────────────────────────── */

#bg-canvas {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  display: none;          /* shown only in home view via JS */
  pointer-events: none;
}

/* ─── Game screenshot (full viewport) ──────────────────────────────────────── */

#game-image {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  transition: opacity 0.12s ease;
  z-index: 0;
  display: block;
  filter: blur(6px) brightness(0.45) saturate(0.7);
  transform: scale(1.04); /* prevent blur edge fringing */
}

/* ─── HUD overlay (bottom) ──────────────────────────────────────────────────── */

#hud {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 64px 40px 18px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.55) 25%,
    rgba(0,0,0,0.88) 55%,
    rgba(0,0,0,0.97) 80%,
    #000 100%
  );
}

/* ─── Info row: [LETTER]  [TITLE block]  [counter] ─────────────────────────── */

#info-row {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 10px;
}

/* Big letter badge */
#letter-badge {
  font-size: 80px;
  font-weight: bold;
  line-height: 1;
  min-width: 70px;
  color: #00ff41;
  text-shadow:
    0 0 12px #00ff41,
    0 0 30px rgba(0, 255, 65, 0.4);
  letter-spacing: -2px;
}

/* Title block */
#title-block {
  flex: 1;
  min-width: 0;
}

#game-title {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(255,255,255,0.3),
    1px 1px 0 rgba(0,0,0,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
  margin-bottom: 5px;
}

#game-sub {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #fff;
}

#game-pos {
  color: #fff;
}

#game-year {
  color: #fff;
}

.ready {
  color: #00cc33;
  text-shadow: 0 0 6px rgba(0,200,50,0.5);
}

.not-ready {
  color: #553300;
}

/* Counter top-right of the info row */
#counter-block {
  font-size: 13px;
  color: #444;
  text-align: right;
  white-space: nowrap;
  padding-bottom: 2px;
}

/* ─── Key hints bar ─────────────────────────────────────────────────────────── */

#key-hints {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 8px;
  color: #fff;
}

#key-hints span {
  white-space: nowrap;
}

kbd {
  font-family: inherit;
  font-size: 10px;
  color: #555;
  background: #111;
  border: 1px solid #333;
  border-radius: 2px;
  padding: 1px 4px;
}

/* ─── In-browser DOS player overlay ────────────────────────────────────────── */

#player-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
}

/* Desktop: full-screen block layout */
#player-overlay.active {
  display: block;
}

/* player-view fills the full overlay on desktop */
#player-view {
  position: absolute;
  inset: 0;
}

#dos-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Hide js-dos branding */
.powered { display: none !important; }

/* js-dos wraps the canvas in a .dosbox-container div — force it to fill player-view */
#player-view .dosbox-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* ─── In-game touch controls ────────────────────────────────────────────────── */

/* Hidden by default on desktop; shown by media query on touch devices */
#gc-controls {
  display: none;
}

.gc-btn {
  border: 1px solid rgba(0, 255, 65, 0.45);
  background: rgba(0, 0, 0, 0.55);
  color: rgba(0, 255, 65, 0.95);
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-weight: bold;
  cursor: pointer;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.07s, border-color 0.07s;
}

.gc-btn:active,
.gc-btn.pressed {
  background: rgba(0, 255, 65, 0.22);
  border-color: rgba(0, 255, 65, 0.85);
  color: #00ff41;
}

/* D-pad shared (used by landscape right panel) */
.gc-dpad-mid {
  display: flex;
  align-items: center;
  gap: 3px;
}

.gc-dpad-center {
  width: 38px;
  height: 38px;
}

/* ── Touch devices: portrait ─────────────────────────────────────────────────── */
@media (pointer: coarse) and (orientation: portrait) {
  #player-overlay.active {
    display: flex;
    flex-direction: column;
  }

  /* Player area fills all space above the keyboard */
  #player-view {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;      /* centre the 4:3 game frame vertically */
    justify-content: center;
    background: #000;
  }

  /* Make the dosbox container maintain 4:3 rather than filling the flex area */
  #player-view .dosbox-container {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    flex-shrink: 0;
  }

  /* Keyboard panel: shrink-wraps its content, does not fill remaining height */
  #gc-controls {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background: #040404;
    border-top: 1px solid rgba(0, 255, 65, 0.1);
  }

  /* Landscape panels hidden in portrait */
  #gc-landscape-left,
  #gc-landscape-right {
    display: none;
  }

  #gc-portrait-panel {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    padding: 5px 8px 6px;
    gap: 4px;
  }

  /* kb-wrap: keys left, arrows right */
  #gc-kb-wrap {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
  }

  #gc-kb-keys {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  /* Each row is auto-height — determined by the square keys inside */
  .gc-key-row {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
  }

  /* Square keys: width from flex distribution, height = width via aspect-ratio */
  .gc-key {
    flex: 1;
    min-width: 0;
    aspect-ratio: 1;
    font-size: 10px;
    padding: 0;
    border-radius: 4px;
    letter-spacing: 0;
  }

  /* ESC slightly wider */
  .gc-wide-key {
    flex: 1.5;
    font-size: 8px;
  }

  /* Arrow d-pad column */
  #gc-arrows {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
  }

  .gc-arr-row {
    display: flex;
    gap: 3px;
  }

  .gc-arr-btn {
    width: 34px;
    height: 34px;
    font-size: 14px;
    padding: 0;
    border-radius: 4px;
  }

  .gc-arr-ph {
    width: 34px;
    height: 34px;
  }

  .gc-arr-center {
    background: transparent;
    border: none;
    pointer-events: none;
  }

  /* Bottom strip: CTRL, ALT, SPACE (wide), ENTER */
  #gc-strip {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
  }

  .gc-mod-btn {
    flex: 1;
    height: 32px;
    font-size: 9px;
    letter-spacing: 0.5px;
    padding: 0;
    border-radius: 4px;
  }

  .gc-space-btn {
    flex: 3;
    height: 32px;
    font-size: 9px;
    padding: 0;
    border-radius: 4px;
  }

  .gc-enter-btn {
    flex: 2;
    height: 32px;
    font-size: 9px;
    letter-spacing: 0.5px;
    padding: 0;
    border-radius: 4px;
  }
}

/* ── Touch devices: landscape ────────────────────────────────────────────────── */
@media (pointer: coarse) and (orientation: landscape) {
  #player-overlay.active {
    display: flex;
    flex-direction: row;
  }

  #player-view {
    position: relative;
    order: 2;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* display:contents promotes children to direct flex items of #player-overlay */
  #gc-controls {
    display: contents;
  }

  /* Portrait panel hidden in landscape */
  #gc-portrait-panel {
    display: none;
  }

  /* Left panel: ESC / CTRL / ALT / SPC */
  #gc-landscape-left {
    order: 1;
    flex: 0 0 90px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    align-items: stretch;
    padding: 16px 8px;
    background: #040404;
    border-right: 1px solid rgba(0, 255, 65, 0.1);
  }

  #gc-landscape-left .gc-btn {
    height: 38px;
    width: 100%;
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  /* Right panel: arrows + Enter */
  #gc-landscape-right {
    order: 3;
    flex: 0 0 130px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
    background: #040404;
    border-left: 1px solid rgba(0, 255, 65, 0.1);
  }

  #gc-landscape-right .gc-dpad-mid {
    display: flex;
    align-items: center;
    gap: 3px;
  }

  #gc-landscape-right .gc-btn {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  #gc-landscape-right #gc-enter {
    width: 88px;
    height: 32px;
    font-size: 11px;
    letter-spacing: 1.5px;
    margin-top: 4px;
  }

  #gc-landscape-right .gc-dpad-center {
    width: 38px;
    height: 38px;
  }
}

#player-status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 18px;
  color: #00ff41;
  text-shadow: 0 0 12px #00ff41;
  text-align: center;
  pointer-events: none;
}

#player-pause, #player-close {
  position: absolute;
  top: 12px;
  z-index: 10;
  padding: 8px 16px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.5);
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  transition: opacity 0.2s;
}

#player-pause { right: 110px; } /* sits to the left of EXIT */
#player-close { right: 12px;  }

#player-pause:hover, #player-pause:active,
#player-close:hover, #player-close:active {
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}

/* ─── Mobile browse view ────────────────────────────────────────────────────── */
/* On portrait phones the game screenshot is landscape (4:3), so object-fit:    */
/* contain centres it vertically — image ends up mid-screen.  Fix: anchor to    */
/* top.  The HUD gradient normally blends into the image below it; on mobile    */
/* we give it a solid background so it doesn't cover the screenshot above.      */

body.mobile #game-image {
  object-position: top center;  /* pin screenshot to top edge, not mid-screen */
}

body.mobile #hud {
  padding: 14px 20px 12px;      /* remove the 64px transparent overlap region */
  background: rgba(0, 0, 0, 0.95); /* solid bar — no gradient over the image */
}

body.mobile #info-row {
  gap: 14px;
  margin-bottom: 6px;
}

body.mobile #letter-badge {
  font-size: 48px;
  min-width: 40px;
}

body.mobile #game-title {
  font-size: 14px;
}

body.mobile #key-hints {
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── Mobile on-screen controls (home/browse nav) ──────────────────────────── */
/* Hidden on desktop; shown as a flow element inside #home-content on mobile    */

#mobile-controls {
  display: none;
  opacity: 0.95;
}

/* D-pad */
#dpad {
  display: grid;
  grid-template-columns: 44px 44px 44px;
  grid-template-rows:    44px 44px 44px;
  gap: 4px;
  pointer-events: auto;
}

#btn-up    { grid-column: 2; grid-row: 1; }
#btn-left  { grid-column: 1; grid-row: 2; }
.dpad-center { grid-column: 2; grid-row: 2; }
#btn-right { grid-column: 3; grid-row: 2; }
#btn-down  { grid-column: 2; grid-row: 3; }

.dpad-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 65, 0.35);
  background: rgba(0, 0, 0, 0.38);
  color: rgba(0, 255, 65, 0.85);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
  transition: background 0.08s, border-color 0.08s;
}

.dpad-btn:active,
.dpad-btn.pressed {
  background: rgba(0, 255, 65, 0.18);
  border-color: rgba(0, 255, 65, 0.7);
  color: #00ff41;
}

/* Action buttons — horizontal row */
#action-btns {
  display: flex;
  flex-direction: row;
  gap: 6px;
  pointer-events: auto;
}

.action-btn {
  flex: 1;
  padding: 10px 4px;
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 65, 0.35);
  background: rgba(0, 0, 0, 0.38);
  color: rgba(0, 255, 65, 0.85);
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: background 0.08s, border-color 0.08s;
}

.action-btn:active,
.action-btn.pressed {
  background: rgba(0, 255, 65, 0.18);
  border-color: rgba(0, 255, 65, 0.7);
  color: #00ff41;
}

/* LAUNCH gets a slightly brighter border to stand out */
#btn-launch {
  border-color: rgba(0, 255, 65, 0.55);
}

/* Mobile: shown as column (d-pad above, action row below) */
body.mobile #mobile-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  flex-shrink: 0;
  pointer-events: auto;
}

body.mobile #action-btns {
  width: 100%;
}

/* ─── Toast notification ────────────────────────────────────────────────────── */

#toast {
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 100;
  font-size: 18px;
  color: #00ff41;
  text-shadow: 0 0 14px #00ff41;
  background: rgba(0,0,0,0.82);
  border: 1px solid #004d14;
  padding: 14px 32px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.mobile #toast {
  font-size: 11px;
  padding: 10px 20px;
  top: 20px;
}

#toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── Loading screen ────────────────────────────────────────────────────────── */

#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transition: opacity 0.4s ease;
}

#loading-text {
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 3px;
  color: #00ff41;
  text-shadow:
    0 0 20px #00ff41,
    0 0 40px rgba(0,255,65,0.3);
}

#loading-sub {
  font-size: 9px;
  color: #555;
  letter-spacing: 1px;
}

#loading-bar {
  width: 300px;
  height: 2px;
  background: #111;
  border: 1px solid #222;
  overflow: hidden;
}

#loading-fill {
  height: 100%;
  width: 0%;
  background: #00ff41;
  box-shadow: 0 0 8px #00ff41;
  transition: width 0.4s ease;
  animation: loading-pulse 1.2s ease-in-out infinite;
}

@keyframes loading-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ─── Phosphor flicker animation on the letter badge ───────────────────────── */

@keyframes flicker {
  0%, 98%, 100% { opacity: 1; }
  99% { opacity: 0.85; }
}

#letter-badge {
  animation: flicker 8s ease-in-out infinite;
}

/* ─── Sort badge (browse view) ──────────────────────────────────────────────── */

#sort-badge {
  font-size: 10px;
  color: #00ff41;
  letter-spacing: 2px;
  opacity: 0.7;
  margin-top: 4px;
  text-align: right;
}

/* ─── Home view ─────────────────────────────────────────────────────────────── */

#home-view {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  /* Dark gradient from top (transparent) to bottom (solid) */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 25%,
    rgba(0,0,0,0.55) 40%,
    rgba(0,0,0,0.88) 60%,
    rgba(0,0,0,0.97) 80%,
    #000 100%
  );
  pointer-events: none;  /* let clicks fall through to nothing at the top */
}

#home-header {
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 32px;
  pointer-events: auto;
}

#home-logo {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #00ff41;
  text-shadow: 0 0 14px rgba(0,255,65,0.5);
  flex-shrink: 0;
}

#home-tabs {
  display: flex;
  gap: 8px;
}

.htab {
  padding: 5px 10px;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 1px;
  border: 1px solid #333;
  background: transparent;
  color: #fff;
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.15s, border-color 0.15s;
}

.htab.active {
  color: #00ff41;
  border-color: #00ff41;
  text-shadow: 0 0 8px rgba(0,255,65,0.4);
}

.htab:hover {
  color: #fff;
  border-color: #777;
}

#home-sort-btn {
  margin-left: auto;
  padding: 5px 14px;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: #00ff41;
  background: rgba(0,255,65,0.06);
  border: 1px solid rgba(0,255,65,0.3);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s;
}

#home-sort-btn:hover {
  background: rgba(0,255,65,0.15);
}

/* ─── Home content layout ───────────────────────────────────────────────────── */

#home-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  padding: 0;
  gap: 0;
  pointer-events: auto;
}

/* Left column: card rows */
#home-left {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 16px 0 32px;
  overflow: hidden;
}

/* Right column: info panel */
#home-right {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  padding: 20px 28px 20px 20px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.60) 0%,
    rgba(0,0,0,0.85) 35%,
    rgba(0,0,0,0.96) 100%
  );
  border-left: 1px solid rgba(255,255,255,0.05);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #222 transparent;
}

/* ─── Related games (dynamic, below spotlight) ───────────────────────────────── */

#home-related {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

#home-related:empty { display: none; }

/* ─── Hero section (focused row) ────────────────────────────────────────────── */

#home-hero-section {
  flex: 0 0 auto;
  padding-top: 28px;  /* headroom for focused card scale to bleed upward */
  margin-top: -18px;
}

#home-hero-row {
  display: flex;
  gap: 12px;
  overflow: visible;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  margin-top: 8px;
}

/* ─── Compact rows (non-focused surrounding rows) ────────────────────────────── */

#home-compact-rows {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
}

.compact-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.compact-row {
  display: flex;
  gap: 8px;
  overflow: visible;
}

/* ─── Section labels ─────────────────────────────────────────────────────────── */

.section-label {
  font-size: 11px;
  letter-spacing: 3px;
  color: #444;
}

.section-label-active {
  color: #00cc44;
}

/* ─── Hero cards ─────────────────────────────────────────────────────────────── */

.hero-card {
  flex: 0 0 210px;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
  opacity: 0.8;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
}

.hero-card.focused {
  opacity: 1;
  transform: scale(1.28) translateY(-6px);
  border-color: #00ff41;
  box-shadow: 0 0 22px rgba(0,255,65,0.55), 0 0 6px rgba(0,255,65,0.35);
  z-index: 2;
  position: relative;
}

.hero-card-img-wrap {
  width: 210px;
  height: 158px;  /* 4:3 landscape: 210 × 0.75 = 157.5 */
  background: #111;
  overflow: hidden;
  position: relative;
}

.hero-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Compact cards ──────────────────────────────────────────────────────────── */

.compact-card {
  flex: 0 0 110px;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
  opacity: 0.8;
  border: 2px solid transparent;
  border-radius: 3px;
  overflow: hidden;
}

.compact-card:hover {
  opacity: 0.75;
  transform: scale(1.04);
}

.compact-card-img-wrap {
  width: 110px;
  height: 73px;
  background: #111;
  overflow: hidden;
  position: relative;
}

.compact-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Shared card title ──────────────────────────────────────────────────────── */

.card-title {
  padding: 4px 4px 2px;
  font-size: 7px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgb(46 82 12 / 60%);
}

.hero-card.focused .card-title {
  color: #ccc;
}

/* ─── Home spotlight (right-panel info) ─────────────────────────────────────── */

#home-spotlight {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

/* Wikipedia image at the top of the spotlight panel */
#spotlight-wiki-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 12px;
  background: #111;
  display: none; /* shown via JS when URL is available */
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
}

#spotlight-title {
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 8px;
  word-break: break-word;
}

#spotlight-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  color: #fff;
}

#spotlight-year  { color: #fff; }
#spotlight-status { font-size: 8px; }
#spotlight-size  { color: #fff; font-size: 8px; }

#spotlight-genres {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.genre-tag {
  padding: 2px 9px;
  border: 1px solid rgba(0,255,65,0.25);
  border-radius: 10px;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(0,255,65,0.65);
}

#spotlight-series {
  font-size: 11px;
  color: rgba(110,175,255,0.85);
  letter-spacing: 1px;
  margin-bottom: 6px;
}

#spotlight-studio {
  font-size: 12px;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

#spotlight-people {
  font-size: 11px;
  color: #fff;
  margin-bottom: 10px;
  font-style: italic;
}

#spotlight-desc {
  font-size: 9px;
  color: #ccc;
  line-height: 1.9;
  max-height: 120px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
  padding-right: 4px;
  margin-bottom: 8px;
}

/* ─── Star ratings ───────────────────────────────────────────────────────────── */

#spotlight-rating {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 10px;
}

#spotlight-stars {
  display: flex;
  gap: 2px;
}

.star {
  background: none;
  border: none;
  font-size: 20px;
  color: #333;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  transition: color 0.1s, transform 0.1s;
  outline: none;
}

.star.active { color: #ffd700; }
.star:focus  { outline: none; }

#spotlight-avg-rating {
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.5px;
}

/* ─── Featured badges (GOTD / GOTW) ─────────────────────────────────────────── */

.hero-card-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 3px 5px;
  border-radius: 2px;
  z-index: 5;
  pointer-events: none;
  text-transform: uppercase;
}

.hero-card-badge.gotd { background: #e8b400; color: #000; }
.hero-card-badge.gotw { background: #1a7fc4; color: #fff; }

/* ─── Hamburger menu button (hidden on desktop) ──────────────────────────────── */

#hamburger-btn {
  display: none;
  padding: 4px 10px;
  font-size: 20px;
  line-height: 1;
  background: transparent;
  border: 1px solid rgba(0,255,65,0.3);
  color: rgba(0,255,65,0.9);
  cursor: pointer;
  border-radius: 3px;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}

#hamburger-btn:active {
  border-color: rgba(0,255,65,0.7);
  color: #00ff41;
}

/* Dropdown menu — shown when #home-tabs has .open class on mobile */
#home-tabs.open {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 300;
  display: flex !important;
  flex-direction: column;
  background: rgba(0,0,0,0.97);
  border-bottom: 1px solid rgba(0,255,65,0.15);
  padding: 6px 0;
  gap: 0;
}

#home-tabs.open .htab {
  text-align: left;
  padding: 16px 24px;
  border: none;
  border-bottom: 1px solid #0e0e0e;
  border-radius: 0;
  font-size: 16px;
  letter-spacing: 3px;
  color: #666;
  width: 100%;
}

#home-tabs.open .htab.active {
  color: #00ff41;
  border-color: #0e0e0e;
}

/* ─── Mobile home layout: cards on top, info panel on bottom ────────────────── */
/* Applied via JS (body.mobile) for reliable touch detection                     */

body.mobile #hamburger-btn {
  display: block;
}

body.mobile #home-tabs {
  display: none;   /* hidden until hamburger opens it */
}

body.mobile #home-content {
  flex-direction: column;
}

body.mobile #home-left {
  flex: 1;
  min-height: 0;
  overflow: visible;   /* allow hero row to bleed to screen edges */
  padding: 4px 0 0 0; /* side padding handled per-section below */
}

/* Compact rows keep horizontal padding for readability */
body.mobile #home-compact-rows {
  padding-left: 12px;
  padding-right: 10px;
}

/* Hero section: full-width, enough headroom so label doesn't touch thumbnails */
body.mobile #home-hero-section {
  padding-top: 10px;
  margin-top: 0;
}

body.mobile #hero-row-label {
  margin-bottom: 10px;  /* push cards further below the section heading */
}

/* Peek carousel: padding-left centres card[0]; translateX(-n * cardWidth) centres card[n] */
body.mobile #home-hero-row {
  padding-left: calc((100vw - 62vw) / 2);  /* = 19vw */
  padding-right: calc((100vw - 62vw) / 2);
}

/* Hero cards: 62vw wide so ~19vw of each neighbour peeks on either side */
body.mobile .hero-card {
  flex: 0 0 62vw;
}

body.mobile .hero-card-img-wrap {
  width: 62vw;
  height: calc(62vw * 0.75);
}

/* Focused card: subtle lift only — no large scale that would cover peek cards */
body.mobile .hero-card.focused {
  transform: scale(1.04) translateY(-2px);
}

body.mobile #home-right {
  flex: 0 0 auto;        /* height = content height, no artificial gap */
  padding: 8px 16px 10px;
  border-left: none;
  border-top: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}

/* Info panel: natural height, column flow, no justify tricks */
body.mobile #home-spotlight {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Compact spotlight on mobile — strip out padding/spacing so more fits */
body.mobile #spotlight-people { display: none; }
body.mobile #spotlight-studio  { display: none; }
body.mobile #home-hints        { display: none; }
body.mobile #spotlight-series  { display: none; }
body.mobile #spotlight-wiki-img { display: none; }

/* Genre tags: single row, no wrapping (keeps height constant) */
body.mobile #spotlight-genres {
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Scrollable description on mobile, matching desktop behavior */
body.mobile #spotlight-desc {
  max-height: 68px;
  height: auto;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #555 transparent;
  margin-bottom: 0;
}

/* Rating sits immediately below description — no auto-margin gap */
body.mobile #spotlight-rating {
  margin-top: 6px;
  padding-top: 6px;
  flex-shrink: 0;
}

/* ─── Tablet home layout ────────────────────────────────────────────────────── */
/* Tablet = touch + wider screen (≥768px, set via body.tablet in JS)            */

/* Tablet controls: fixed at bottom-left */
body.tablet #mobile-controls {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.82);
  border-top: 1px solid rgba(0, 255, 65, 0.12);
  border-right: 1px solid rgba(0, 255, 65, 0.12);
  border-radius: 0 10px 0 0;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 10px;
}

body.tablet #dpad {
  grid-template-columns: 36px 36px 36px;
  grid-template-rows:    36px 36px 36px;
  flex-shrink: 0;
}

body.tablet .dpad-btn {
  width: 36px;
  height: 36px;
  font-size: 14px;
}

body.tablet #action-btns {
  gap: 5px;
}

body.tablet .action-btn {
  flex: 1;
  padding: 7px 6px;
  font-size: 10px;
  letter-spacing: 0.5px;
  border-radius: 5px;
}

/* Tablet: 2-column home layout (cards left, right pane with GOTW + recs) */
body.tablet #home-content {
  flex-direction: row;  /* override mobile's column */
}

body.tablet #home-left {
  flex: 1;
  padding: 6px 14px 0 16px;
}

body.tablet #home-right {
  flex: 0 0 40vw;
  max-height: none;
  overflow-y: auto;
  border-left: 1px solid rgba(255,255,255,0.05);
  border-top: none;
  padding: 10px 14px 12px;
}

/* Tablet: hide hamburger, show nav tabs inline */
body.tablet #hamburger-btn {
  display: none;
}

body.tablet #home-tabs {
  display: flex; /* override body.mobile's display:none */
}

/* Tablet: responsive card widths (vw-based so they fill the layout nicely) */
body.tablet .hero-card        { flex: 0 0 20vw; }
body.tablet .hero-card-img-wrap { width: 20vw; height: calc(20vw * 0.75); }

body.tablet .compact-card        { flex: 0 0 10vw; }
body.tablet .compact-card-img-wrap { width: 10vw; height: calc(10vw * 0.67); }

body.tablet .shelf-card        { flex: 0 0 12vw; }
body.tablet .shelf-card-img-wrap { width: 12vw; height: calc(12vw * 0.75); }

/* GOTW card: hidden — the GOTW row in the left panel already shows this prominently */
#home-gotw-card {
  display: none;
}

/* On mobile the right panel is already cramped — hide rec list */
body.mobile:not(.tablet) #home-rec-list {
  display: none;
}

/* GOTW featured card — rich magazine/newspaper style */
.gotw-label {
  font-size: 7px;
  letter-spacing: 4px;
  color: #00cc44;
  text-shadow: 0 0 8px rgba(0,204,68,0.4);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,255,65,0.15);
}

.gotw-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  border: 1px solid rgba(0,255,65,0.2);
  margin-bottom: 10px;
  background: #111;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.gotw-title {
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 5px;
  line-height: 1.4;
  word-break: break-word;
}

.gotw-meta {
  font-size: 8px;
  color: #888;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.gotw-genres {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.gotw-genre-tag {
  padding: 2px 8px;
  border: 1px solid rgba(0,255,65,0.2);
  border-radius: 10px;
  font-size: 7px;
  letter-spacing: 0.5px;
  color: rgba(0,255,65,0.55);
}

.gotw-studio {
  font-size: 7px;
  color: #777;
  margin-bottom: 7px;
  letter-spacing: 0.5px;
}

.gotw-desc {
  font-size: 8px;
  color: #888;
  line-height: 1.7;
  margin-bottom: 8px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.gotw-rating {
  font-size: 8px;
  color: #ffd700;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

/* Rating indicator under card thumbnails */
.card-rating {
  padding: 2px 4px 3px;
  font-size: 6px;
  color: #ffd700;
  letter-spacing: 0.5px;
  background: rgba(0,0,0,0.4);
  min-height: 13px;
  line-height: 1;
}

/* Recommendations — pushed to the bottom of the right panel */
#home-rec-list {
  margin-top: auto;
  padding-top: 10px;
}

/* Recommendations list */
.rec-list-label {
  font-size: 9px;
  letter-spacing: 3px;
  color: #555;
  padding: 6px 0 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 4px;
}

.rec-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.1s;
}

.rec-item:hover {
  background: rgba(255,255,255,0.05);
}

.rec-img {
  flex: 0 0 60px;
  width: 60px;
  height: 45px;
  object-fit: cover;
  border-radius: 2px;
  background: #111;
}

.rec-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rec-title {
  font-size: 8px;
  color: #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.rec-desc {
  font-size: 7px;
  color: #555;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ─── Home hints ─────────────────────────────────────────────────────────────── */

#home-hints {
  flex: 0 0 auto;
  padding: 8px 0 14px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 8px;
  color: #fff;
}

#home-hints span {
  white-space: nowrap;
}

/* Mobile hints (hidden on desktop, shown on mobile via body.mobile) */
#mobile-hints { display: none; }

body.mobile #mobile-hints {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 8px;
  color: #888;
  padding: 8px 0;
}

/* ─── Shelf cards (non-focused, 130px) ──────────────────────────────────────── */

.shelf-row { display: flex; gap: 8px; overflow: visible; }
.shelf-card { flex: 0 0 130px; cursor: pointer; opacity: 0.8; border: 2px solid transparent; border-radius: 3px; overflow: hidden; transition: transform 0.15s, opacity 0.15s; }
.shelf-card:hover { opacity: 0.8; }
.shelf-card-img-wrap { width: 130px; height: 87px; background: #111; overflow: hidden; }
.shelf-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── List cards (text-oriented, 195×56px) ──────────────────────────────────── */

.list-row { display: flex; gap: 10px; overflow: visible; }
.list-card { flex: 0 0 195px; height: 56px; display: flex; align-items: center; gap: 8px; cursor: pointer; opacity: 0.8; border: 2px solid transparent; border-radius: 3px; overflow: hidden; transition: opacity 0.12s, border-color 0.12s; }
.list-card:hover { opacity: 0.8; }
.list-card-img { flex: 0 0 84px; width: 84px; height: 56px; object-fit: cover; display: block; background: #111; }
.list-card-info { flex: 1; min-width: 0; padding-right: 6px; }
.list-card-title { font-size: 11px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.list-card-year { font-size: 9px; color: #fff; }

/* ─── Search modal ─────────────────────────────────────────────────────────── */

#search-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0, 0, 0, 0.94);
  flex-direction: column;
  cursor: default;
}

#search-modal.open {
  display: flex;
}

#search-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid #1c1c1c;
  flex-shrink: 0;
}

body.mobile #search-bar {
  padding: 12px 16px;
}

body.mobile #search-input {
  font-size: 20px;
}

body.mobile #search-info {
  padding: 6px 16px;
}

body.mobile #search-results {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  padding: 10px 14px 20px;
}

#search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 16px;
  color: #fff;
  caret-color: #00ff41;
  letter-spacing: 1px;
  cursor: text;
}

#search-input::placeholder {
  color: #2a2a2a;
}

#search-close {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #444;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  cursor: pointer;
  border-radius: 3px;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}

#search-close:hover {
  color: #aaa;
  border-color: #555;
}

#search-info {
  padding: 8px 24px;
  font-size: 11px;
  color: #3a3a3a;
  letter-spacing: 2px;
  flex-shrink: 0;
}

#search-results {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  align-content: start;
}

#search-results::-webkit-scrollbar {
  width: 4px;
}

#search-results::-webkit-scrollbar-track {
  background: #080808;
}

#search-results::-webkit-scrollbar-thumb {
  background: #1e1e1e;
  border-radius: 2px;
}

.search-card {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  opacity: 0.8;
  transition: opacity 0.12s, border-color 0.12s, box-shadow 0.12s;
  background: #0a0a0a;
}

.search-card:hover {
  opacity: 0.85;
}

.search-card.sel {
  border-color: #00ff41;
  opacity: 1;
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.5), 0 0 4px rgba(0, 255, 65, 0.3);
  /* No scale — scaling caused selected card to cover all surrounding cards and text */
}

.search-card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #111;
}

.search-card-title {
  padding: 5px 6px 3px;
  font-size: 12px;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-card.sel .search-card-title {
  color: #fff;
}

.search-card-year {
  padding: 0 6px 5px;
  font-size: 10px;
  color: #666;
}

/* ─── Login screen ───────────────────────────────────────────────────────────── */

#login-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

#login-screen.hidden {
  display: none;
}

#login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 320px;
}

#login-title {
  font-size: 13px;
  letter-spacing: 2px;
  color: #e0e0e0;
  text-transform: uppercase;
}

#login-sub {
  font-size: 8px;
  color: #444;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

#login-input {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid #222;
  color: #e0e0e0;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 10px;
  padding: 10px 14px;
  text-align: center;
  letter-spacing: 2px;
  outline: none;
  cursor: text !important; /* override global cursor: none */
}

#login-input:focus {
  border-color: #444;
}

#login-btn {
  width: 100%;
  background: none;
  border: 1px solid #333;
  color: #999;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

#login-btn:hover {
  border-color: #777;
  color: #ddd;
}

#login-error {
  font-size: 11px;
  color: #c04040;
  letter-spacing: 1px;
  min-height: 16px;
}