/* ========================================================
   FUN FOUND GAMES — 80s Neon Arcade x Short-Form Feed theme
   Shared stylesheet for all pages
   ======================================================== */

:root{
  --bg-deep: #0a0621;
  --bg-deep-2: #150a35;
  --panel: #150c33;
  --panel-line: #3a2a72;
  --pink: #fe2c55;
  --cyan: #25f4ee;
  --yellow: #f9f871;
  --purple: #9d4edd;
  --green: #39ff9d;
  --ink: #0a0621;
  --cream: #f4f1ff;
  --dim: #b6a9e8;
}

*{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  /* Forces the vertical scrollbar to always render, whether or not the
     current page/tab actually needs to scroll. Without this, switching
     between tabs of different heights (my-items.php, admin/player.php) can
     toggle the scrollbar's presence, and the whole page visibly shifts
     sideways by the scrollbar's width each time. overflow-y: scroll is the
     old-school fix but works in every browser; scrollbar-gutter: stable is
     the newer/nicer equivalent but isn't universally supported yet — kept
     alongside it as a no-op enhancement where it is supported, not a
     replacement for it. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

html, body{
  max-width: 100%;
  overflow-x: hidden;
}

body{
  margin: 0;
  min-height: 100vh;
  font-family: 'VT323', monospace;
  font-size: 1.25rem;
  background: #000;
  color: var(--cream);
  position: relative;
}

h1, h2, h3, p{
  overflow-wrap: break-word;
}

h1, h2, h3, .pixel{
  font-family: 'Press Start 2P', 'VT323', monospace;
  line-height: 1.5;
}

.feed{
  font-family: 'Baloo 2', sans-serif;
}

a{ color: inherit; }

/* ---------- coin cursor for anything clickable ---------- */

a, button, .sound-toggle, .nav-toggle, .login-tabs button{
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13' fill='%23f9f871' stroke='%230a0621' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='9' fill='none' stroke='%230a0621' stroke-width='1.4'/%3E%3Ctext x='16' y='21' font-family='Arial, sans-serif' font-size='13' font-weight='bold' fill='%230a0621' text-anchor='middle'%3E%24%3C/text%3E%3C/svg%3E") 16 16, pointer;
}

img{ max-width: 100%; }

/* ---------- background layers ---------- */

.bg-fixed{
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse 60% 40% at 50% 18%, rgba(255,46,151,0.35) 0%, rgba(255,46,151,0) 70%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(5,228,245,0.18) 0%, rgba(5,228,245,0) 70%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-deep-2) 55%, #1c0f45 100%);
}

.bg-stars{
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 80% 10%, #fff, transparent),
    radial-gradient(1px 1px at 60% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 30% 60%, #fff, transparent),
    radial-gradient(1px 1px at 90% 50%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 45% 80%, #fff, transparent),
    radial-gradient(1px 1px at 20% 90%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 70%, #fff, transparent);
  opacity: 0.6;
  animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle{
  0%{ opacity: 0.35; }
  100%{ opacity: 0.75; }
}

.bg-sun{
  position: fixed;
  left: 50%;
  bottom: 38vh;
  width: min(60vw, 520px);
  height: min(60vw, 520px);
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--yellow) 0%, var(--pink) 55%, var(--purple) 100%);
  box-shadow: 0 0 120px rgba(255,46,151,0.45);
  opacity: 0.5;
  z-index: -2;
}

.bg-grid{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42vh;
  z-index: -1;
  background-image:
    linear-gradient(rgba(5,228,245,0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,228,245,0.55) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(260px) rotateX(60deg);
  transform-origin: bottom;
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%);
  animation: gridmove 3s linear infinite;
}

@keyframes gridmove{
  from{ background-position: 0 0, 0 0; }
  to{ background-position: 0 48px, 0 0; }
}

.scanlines{
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0px,
    rgba(0,0,0,0.15) 1px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0) 3px
  );
  mix-blend-mode: multiply;
}

.scanlines::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.45) 100%);
}

/* ---------- neon text helpers ---------- */

.neon-pink{ color: var(--pink); text-shadow: 0 0 6px var(--pink), 0 0 18px rgba(255,46,151,0.7), 0 0 40px rgba(255,46,151,0.4); }
.neon-cyan{ color: var(--cyan); text-shadow: 0 0 6px var(--cyan), 0 0 18px rgba(5,228,245,0.7), 0 0 40px rgba(5,228,245,0.4); }
.neon-yellow{ color: var(--yellow); text-shadow: 0 0 6px var(--yellow), 0 0 18px rgba(249,248,113,0.7); }

.flicker{
  animation: flicker 4.5s linear infinite;
}
@keyframes flicker{
  0%, 3%, 6%, 100%{ opacity: 1; }
  4%{ opacity: 0.55; }
  5%{ opacity: 0.9; }
  62%{ opacity: 1; }
  63%{ opacity: 0.6; }
  64%{ opacity: 1; }
}

/* ---------- glitch duotone text (short-form-feed energy) ---------- */

.glitch{
  position: relative;
  display: inline-block;
  color: var(--cream);
}

.glitch::before,
.glitch::after{
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.glitch::before{
  color: var(--cyan);
  animation: glitchL 3.4s ease-in-out infinite;
}

.glitch::after{
  color: var(--pink);
  animation: glitchR 3.4s ease-in-out infinite;
}

@keyframes glitchL{
  0%, 100%{ transform: translate(-4px, -3px); }
  50%{ transform: translate(-7px, 1px); }
}

@keyframes glitchR{
  0%, 100%{ transform: translate(4px, 3px); }
  50%{ transform: translate(7px, -1px); }
}

/* ---------- sticker badges ---------- */

.sticker{
  position: absolute;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--cream);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.4);
  transform: rotate(-8deg);
  animation: stickerBob 3s ease-in-out infinite;
  white-space: nowrap;
  z-index: 2;
}

.sticker.pink{ background: var(--pink); color: #fff; }
.sticker.cyan{ background: var(--cyan); color: var(--ink); }
.sticker.yellow{ background: var(--yellow); color: var(--ink); }

@keyframes stickerBob{
  0%, 100%{ translate: 0 0; }
  50%{ translate: 0 -8px; }
}

/* ---------- layout shell ---------- */

.page{
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrap{
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 48px);
}

/* Wraps any wide data table so it scrolls inside its own panel instead of
   pushing the whole page sideways on a phone. Lives here rather than in one
   page's <style> block because several admin pages use the class — it was
   previously only defined inside admin/dashboard.php, so the same markup in
   admin/cabinet.php and admin/users.php silently did nothing. */
.table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Base styling for every admin data table. Lives here for the same reason
   .table-scroll does: it was previously defined only inside dashboard.php's
   and cabinet.php's own <style> blocks, so admin/users.php — which uses the
   same class — inherited no width, no border-collapse, no header padding and
   no row separators, and sized itself to its content instead. */
.roster-table{
  width: 100%;
  border-collapse: collapse;
  font-family: 'VT323', monospace;
  font-size: 1.15rem;
}
.roster-table th,
.roster-table td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--panel-line);
  text-align: left;
}
.roster-table th{ color: var(--cyan); }
.roster-table th a{ color: var(--cyan); text-decoration: none; }
.roster-table td a{ color: var(--cream); text-decoration: none; }
.roster-table td a:hover{ color: var(--cyan); }
.roster-table tr:hover td{ background: rgba(37,244,238,0.06); }

/* ---------- nav ---------- */

.nav{
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 2px solid var(--panel-line);
}

/* The frosted-glass background lives on a pseudo-element rather than on
   .nav itself. backdrop-filter (like transform/filter) creates a new
   containing block for any position:fixed descendant — and .nav-links
   (the mobile slide-in menu) is exactly that. With the filter on .nav
   directly, the menu's "top:0; right:0; height:100%" resolved against
   .nav's own ~70px-tall box instead of the viewport, squashing the panel
   into a sliver instead of covering the screen. */
.nav::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 6, 33, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nav-inner{
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px clamp(18px, 5vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo{
  font-family: 'Press Start 2P', monospace;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--cream);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.nav-logo .hl{ color: var(--pink); text-shadow: 0 0 6px var(--pink), 0 0 16px rgba(255,46,151,0.7); }

.nav-links{
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li a{
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--dim);
  padding: 8px 4px;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  /* Without this, a squeezed desktop window (narrower than the hamburger
     breakpoint but wide enough that flex still tries to fit every item on
     one row) lets a pill button's text wrap onto a second line inside
     itself, which then overlaps its neighbor (e.g. "Player Login" wrapping
     and colliding with "Host Login"). Pills should shrink the row's gaps
     first, never their own label. */
  white-space: nowrap;
}

.nav-links li a:hover,
.nav-links li a.active{
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(5,228,245,0.8);
}

/* Live nav link — steady red when the game isn't currently pushing a live
   dock snapshot (see assets/main.js, which polls dock_state.php on every
   page and toggles this class), steady green when it is. No flashing —
   just two distinct resting colors, so it's an always-visible "is the
   stream up" signal instead of a viewer only finding out after clicking
   through to live.php's own offline veil. */
.nav-links li a.nav-live-offline{
  color: #ff4d4d;
  text-shadow: 0 0 8px rgba(255,60,60,0.9);
}

/* Steady (non-strobing) green when the game IS live — without this there
   was only one visible state (the offline strobe), so "live" and "the
   check silently isn't working" looked identical: plain default nav text
   either way. */
.nav-links li a.nav-live-online{
  color: #35d94f;
  text-shadow: 0 0 8px rgba(53,217,79,0.75);
}

.nav-links li a.cta{
  font-family: 'Baloo 2', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--pink);
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  border: none;
  box-shadow: 0 4px 14px rgba(254,44,85,0.55);
}

.nav-links li a.cta:hover{
  color: #fff;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 18px rgba(254,44,85,0.65);
  text-shadow: none;
}

/* Second nav CTA — used for "Host Login" sitting next to "Player Login"
   (.cta). Same pill shape, outlined instead of filled, so the two read as
   equally weighted but distinct: one for players, one for the streamer/staff. */
.nav-links li a.cta-outline{
  font-family: 'Baloo 2', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  background: transparent;
  color: var(--cyan);
  padding: 9px 20px;
  border-radius: 999px;
  border: 2px solid var(--cyan);
  box-shadow: none;
}

.nav-links li a.cta-outline:hover{
  color: var(--ink);
  background: var(--cyan);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 18px rgba(5,228,245,0.4);
  text-shadow: none;
}

.nav-toggle{
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav-toggle span{
  width: 26px;
  height: 3px;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(5,228,245,0.8);
}

@media (max-width: 980px){
  /* Raised from 760px (and later from 900px, when the theme switch and
     sound button moved into the bar): with "Live" added as an 8th nav item alongside
     Games/News/Contact/Shop/theme-toggle/Player Login/Host Login, the full
     row no longer fits in the gap between 760px and ~900px — it used to
     just get visually tight there, but now it overflows and wraps mid-pill
     instead. Switching to the hamburger earlier avoids that dead zone. */
  .nav-toggle{ display: flex; }

  .nav-links{
    position: fixed;
    top: 0; right: 0;
    height: 100%;
    width: min(78vw, 300px);
    background: var(--bg-deep-2);
    border-left: 2px solid var(--panel-line);
    flex-direction: column;
    align-items: flex-start;
    /* flex-start + its own top/bottom padding rather than centering: with
       7 nav items now (Games/News/Contact/Shop/theme toggle/Player Login/
       Host Login) a centered column that's taller than the viewport gets
       clipped equally off both ends with nothing to scroll to — starting
       from the top and scrolling is what actually stays reachable on a
       short phone. */
    justify-content: flex-start;
    padding: 76px 32px 32px;
    gap: 22px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 45;
  }

  .nav-links.open{ transform: translateX(0); }

  .nav-links li a{ font-size: 0.75rem; }

  /* Player Login / Host Login stretch full-width in the stacked mobile
     panel instead of staying pill-sized, so both read clearly as
     equal-weight, separate destinations. :has() support is now broad
     enough for this as a progressive enhancement — an unsupporting
     browser just keeps the smaller content-width pill, not a broken one. */
  .nav-links li:has(> a.cta),
  .nav-links li:has(> a.cta-outline){
    align-self: stretch;
  }
  .nav-links li a.cta,
  .nav-links li a.cta-outline{
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* ---------- buttons ---------- */

.btn{
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-align: center;
  padding: 14px 26px;
  border: 3px solid var(--cream);
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.55);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn:hover{
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.55);
  filter: brightness(1.08);
}

.btn:active{
  transform: translate(0,0);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.55);
}

.btn-cyan{ background: var(--cyan); }
.btn-pink{ background: var(--pink); color: var(--cream); }

.btn-outline{
  background: transparent;
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 4px 4px 0 rgba(5,228,245,0.25);
}
.btn-outline:hover{ background: rgba(5,228,245,0.08); }

.btn[disabled],
.btn.disabled{
  background: #3a2a72;
  color: #8779c4;
  border-color: #5b4699;
  border-radius: 999px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
  cursor: not-allowed;
  filter: none;
  transform: none;
}
.btn[disabled]:hover, .btn.disabled:hover{
  transform: none;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
}

/* ---------- hero ---------- */

.hero{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* padding-block, not the shorthand: .hero shares its element with .wrap,
     and a shorthand here wiped out .wrap's side gutter, so on phones the
     hero text and buttons ran into the screen edges. */
  padding-block: 70px 30px;
}

.hero-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.badge{
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--green);
  padding: 8px 16px;
  border: 2px solid #b6ffcf;
  box-shadow: 3px 3px 0 #0f7a45;
  margin-bottom: 30px;
}

.hero h1{
  font-size: clamp(2rem, 7vw, 4rem);
  margin: 0 0 18px;
  color: var(--cream);
}

.hero h1 .line2{ display: block; margin-top: 10px; }

.hero .tagline{
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: 1.4rem;
  color: var(--dim);
}

.hero-actions{
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- sections / panels ---------- */

section{ padding: 20px 0 70px; position: relative; z-index: 1; }

.section-title{
  font-size: clamp(1.3rem, 4vw, 2rem);
  text-align: center;
  margin: 0 0 12px;
}

.section-sub{
  text-align: center;
  color: var(--dim);
  font-size: 1.3rem;
  max-width: 560px;
  margin: 0 auto 46px;
}

.panel{
  background: var(--panel);
  border: 2px solid var(--panel-line);
  padding: 28px;
  position: relative;
}

.panel::before{
  content: "";
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 1px dashed rgba(5,228,245,0.25);
  pointer-events: none;
}

/* ---------- feature grid (home) ---------- */

.feature-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.feature-grid.single{
  grid-template-columns: minmax(220px, 320px);
  justify-content: center;
}

.feature-card{
  background: var(--panel);
  border: 2px solid var(--panel-line);
  padding: 26px 22px;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.feature-card:hover{
  border-color: var(--cyan);
  transform: translateY(-4px);
}

.feature-card .icon{ font-size: 2.2rem; margin-bottom: 14px; }

.feature-card h3{
  font-size: 0.85rem;
  color: var(--yellow);
  margin: 0 0 12px;
}

.feature-card p{ color: var(--dim); margin: 0; }

/* ---------- arcade cabinet cards (games page) ---------- */

.cab-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}

.cab-grid.single{
  grid-template-columns: minmax(240px, 320px);
  justify-content: center;
}

.cabinet{
  background: linear-gradient(180deg, #1c1044 0%, #150c33 100%);
  border: 3px solid var(--panel-line);
  border-radius: 22px;
  padding: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.cabinet:hover{
  transform: translateY(-6px) scale(1.02);
  border-color: var(--cyan);
  box-shadow: 0 14px 30px rgba(37,244,238,0.18);
}

.cabinet .marquee{
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  text-align: center;
  padding: 10px 6px;
  background: var(--ink);
  border: 2px solid var(--pink);
  border-radius: 999px;
  color: var(--pink);
  text-shadow: 0 0 6px rgba(254,44,85,0.7);
}

.cabinet .screen{
  aspect-ratio: 9 / 16;
  background: repeating-linear-gradient(45deg, #10082b, #10082b 8px, #150c38 8px, #150c38 16px);
  border: 2px solid #000;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.cabinet .screen .glyph{
  font-size: 3.2rem;
  filter: drop-shadow(0 0 10px rgba(37,244,238,0.6));
}

.cabinet .screen .ribbon{
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  transform: none;
  background: var(--pink);
  color: #fff;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-align: center;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.cabinet .screen .reel-stats{
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.cabinet .screen .reel-stats span{
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  color: #fff; /* always sits on its own fixed dark chip background below, regardless of theme */
  background: rgba(10, 6, 33, 0.65);
  border: 1px solid rgba(244,241,255,0.25);
  padding: 4px 9px;
  border-radius: 999px;
  backdrop-filter: blur(2px);
}

.cabinet .info{ text-align: center; }

.cabinet .info h3{
  font-size: 0.78rem;
  margin: 0 0 8px;
  color: var(--cream);
}

.cabinet .info p{
  color: var(--dim);
  margin: 0 0 16px;
  font-size: 1.1rem;
}

/* ---------- coin slot decoration ---------- */

.coin-note{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
  color: var(--dim);
  font-size: 1.2rem;
}

.coin-note .coin{
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 8px rgba(249,248,113,0.8);
  animation: coinspin 2.2s linear infinite;
}

@keyframes coinspin{
  0%{ transform: scaleX(1); }
  50%{ transform: scaleX(0.15); }
  100%{ transform: scaleX(1); }
}

/* ---------- terminal / crt box (news, under-construction) ---------- */

.terminal{
  max-width: 720px;
  margin: 0 auto;
  background: #060316;
  border: 3px solid var(--panel-line);
  padding: 30px;
  font-family: 'VT323', monospace;
  font-size: 1.35rem;
  color: var(--green);
  box-shadow: 0 0 30px rgba(57,255,157,0.12);
}

.terminal .term-line{ margin: 0 0 10px; }

.terminal .prompt{ color: var(--cyan); }

.cursor{
  display: inline-block;
  width: 10px;
  height: 1.1em;
  background: var(--green);
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink{
  50%{ opacity: 0; }
}

.news-list{
  max-width: 720px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.news-item{
  background: var(--panel);
  border: 2px solid var(--panel-line);
  border-left: 5px solid var(--cyan);
  padding: 18px 22px;
}

.news-item .date{
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: var(--yellow);
  display: block;
  margin-bottom: 10px;
}

.news-item h3{ margin: 0 0 8px; font-size: 1rem; color: var(--cream); }
.news-item p{ margin: 0; color: var(--dim); }

/* ---------- forms (contact, login) ---------- */

.form-panel{
  max-width: 480px;
  margin: 0 auto;
}

.field{ margin-bottom: 22px; text-align: left; }

.field label{
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: var(--cyan);
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}

.field input,
.field select,
.field textarea{
  width: 100%;
  background: #0c0726;
  border: 2px solid var(--panel-line);
  color: var(--cream);
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Date/time inputs sit on the same near-black .field background above, and
   browsers draw their native calendar/clock indicator as a DARK icon by
   default — so on this theme the picker button was invisible and the field
   looked like it had no picker at all. `color-scheme: dark` tells the
   browser to render its built-in widget chrome (indicator, spinners, and
   the dropdown panel itself) for a dark surface; the invert filter is a
   fallback for engines that draw the icon regardless. Also enlarges the
   indicator, which is a ~12px tap target out of the box. */
.field input[type="date"],
.field input[type="time"],
.field input[type="datetime-local"]{
  color-scheme: dark;
}
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator,
.field input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.6);
  opacity: 0.85;
  cursor: pointer;
  padding: 6px;
  margin-right: -2px;
}
.field input[type="date"]::-webkit-calendar-picker-indicator:hover,
.field input[type="time"]::-webkit-calendar-picker-indicator:hover,
.field input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover{
  opacity: 1;
}

/* Modern theme puts these on a light surface, where the default dark icon is
   correct — so undo both the scheme and the invert. */
[data-theme="modern"] .field input[type="date"],
[data-theme="modern"] .field input[type="time"],
[data-theme="modern"] .field input[type="datetime-local"]{
  color-scheme: light;
}
[data-theme="modern"] .field input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="modern"] .field input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="modern"] .field input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(5,228,245,0.4);
}

.field textarea{ min-height: 120px; resize: vertical; }

/* The options list is painted by the browser, not by the rule above, so on
   this near-black field it came out as dark text on a dark panel in the one
   place a player cannot afford to misread — choosing which cabinet's account
   they are opening. `color-scheme` is what tells the browser to draw its own
   widget chrome for a dark surface. Undone on the modern theme, which puts
   the same control on a light one. */
.field select{ color-scheme: dark; cursor: pointer; }
[data-theme="modern"] .field select{ color-scheme: light; }


.form-msg{
  margin-top: 18px;
  padding: 14px 16px;
  border: 2px solid var(--green);
  background: rgba(57,255,157,0.08);
  color: var(--green);
  font-size: 1.1rem;
  display: none;
}

.form-msg.show{ display: block; }

.contact-info{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  max-width: 720px;
  margin: 0 auto 50px;
  text-align: center;
}

.contact-info .item{
  background: var(--panel);
  border: 2px solid var(--panel-line);
  padding: 20px;
}

.contact-info .item .icon{ font-size: 1.6rem; margin-bottom: 10px; }
.contact-info .item h3{ font-size: 0.65rem; margin: 0 0 8px; color: var(--yellow); }
.contact-info .item p{ margin: 0; color: var(--dim); font-size: 1.05rem; word-break: break-word; }

.login-tabs{
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 30px;
}

.login-tabs button{
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  padding: 12px 22px;
  background: var(--panel);
  color: var(--dim);
  border: 2px solid var(--panel-line);
  cursor: pointer;
}

.login-tabs button.active{
  color: var(--ink);
  background: var(--cyan);
  border-color: var(--cyan);
}

.login-tabs button:first-child{ border-right: none; }

.checkbox-row{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dim);
  font-size: 1.1rem;
  margin-bottom: 22px;
}

.checkbox-row input{ width: 18px; height: 18px; accent-color: var(--pink); }

/* ---------- sound toggle ---------- */

.sound-toggle{
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 60;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--panel);
  border: 2px solid var(--cyan);
  color: var(--cream);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 14px rgba(37,244,238,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sound-toggle:hover{
  transform: scale(1.08);
  box-shadow: 0 4px 18px rgba(0,0,0,0.55), 0 0 20px rgba(37,244,238,0.5);
}

.sound-toggle:active{ transform: scale(0.94); }

@media (max-width: 480px){
  .sound-toggle{
    width: 46px;
    height: 46px;
    font-size: 1.15rem;
    bottom: 14px;
    right: 14px;
  }
}

/* ---------- footer ---------- */

.site-footer{
  border-top: 2px solid var(--panel-line);
  background: rgba(6, 3, 22, 0.6);
  padding: 34px 0 26px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.footer-logo{
  font-family: 'Press Start 2P', monospace;
  font-size: 0.75rem;
  color: var(--pink);
  text-shadow: 0 0 8px rgba(255,46,151,0.6);
  margin: 0 0 10px;
}

.footer-copy{ color: var(--dim); font-size: 1.05rem; margin: 0 0 14px; }

.blink-cursor{
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: var(--yellow);
  animation: blink 1.1s steps(1) infinite;
}

.footer-links{
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 16px;
  list-style: none;
  padding: 0;
}

.footer-links a{
  font-size: 1.05rem;
  color: var(--dim);
  text-decoration: none;
}
.footer-links a:hover{ color: var(--cyan); }

/* ---------- page header (inner pages) ---------- */

.page-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* padding-block for the same reason as .hero: it sits on a .wrap. */
  padding-block: 60px 20px;
}

.page-header h1{
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  margin: 0 0 14px;
}

.page-header p{
  color: var(--dim);
  max-width: 560px;
  margin: 0 auto;
  font-size: 1.3rem;
}

@media (max-width: 600px){
  .login-tabs{ flex-wrap: wrap; }
  .login-tabs button{ flex: 1 1 auto; }

  .footer-links{
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .hero-actions{
    width: 100%;
  }

  .hero-actions .btn{
    flex: 1 1 auto;
    text-align: center;
  }
}

@media (max-width: 480px){
  body{ font-size: 1.1rem; }

  .nav-inner{ padding-top: 12px; padding-bottom: 12px; }

  .nav-logo{ font-size: 0.62rem; }

  .badge{ font-size: 0.5rem; padding: 7px 12px; }

  /* 0.38rem computed to ~6px in Press Start 2P — a pixel font that needs
     ~9px to resolve at all, so every CTA on the site was an illegible smear
     in a 28px-tall bar. The modern theme's counterpart further down sets
     0.88rem, so the two themes had drifted 2.3x apart. This keeps the
     buttons small (well under the 0.72rem desktop size) while staying
     readable and giving a ~40px tap target. */
  .btn{ font-size: 0.5rem; padding: 12px 16px; }

  .cabinet .marquee{ font-size: 0.6rem; }

  .panel{ padding: 20px; }

  .terminal{ padding: 20px; }
}

/* ========================================================
   MODERN THEME — toggled via [data-theme="modern"] on <html>
   ========================================================
   Not a plain "light mode" — it's a second full visual identity:
   a soft gradient-mesh backdrop, frosted-glass panels, gradient
   headlines, and gradient buttons with colored glow. The brand accents
   (pink/cyan/purple/amber) carry over so it still reads as the same
   product, just rendered as a contemporary marketing site instead of a
   CRT arcade.

   Rather than hiding the retro background layers, the modern theme
   REPURPOSES them: .bg-fixed becomes the gradient mesh, .bg-sun becomes
   a floating blurred orb, .bg-grid becomes a faint dot grid. That means
   zero HTML changes — the same divs serve both themes. */

:root[data-theme="modern"]{
  --bg-deep: #fbfaff;
  --bg-deep-2: #f2f0fb;
  --panel: #ffffff;
  --panel-line: #e7e4f5;
  --ink: #17143a;
  --cream: #17143a;
  --dim: #5d5980;

  /* modern-only accents (darker than the neons, for text on light bg) */
  --m-pink: #e11d64;
  --m-purple: #7c3aed;
  --m-cyan: #0891b2;
  --m-amber: #b45309;
}

[data-theme="modern"] body{
  background: var(--bg-deep);
}

/* --- repurposed background layers --- */

/* Gradient mesh: soft colored blooms over an off-white base */
[data-theme="modern"] .bg-fixed{
  display: block;
  background:
    radial-gradient(ellipse 50% 45% at 12% 8%,  rgba(254,44,85,0.20)  0%, rgba(254,44,85,0)  60%),
    radial-gradient(ellipse 45% 40% at 88% 12%, rgba(124,58,237,0.20) 0%, rgba(124,58,237,0) 60%),
    radial-gradient(ellipse 55% 45% at 75% 85%, rgba(37,244,238,0.22) 0%, rgba(37,244,238,0) 60%),
    radial-gradient(ellipse 45% 40% at 15% 92%, rgba(249,168,37,0.16) 0%, rgba(249,168,37,0)  60%),
    linear-gradient(180deg, #fbfaff 0%, #f4f2fd 100%);
}

/* Floating blurred orb — slow drift keeps the page feeling alive */
[data-theme="modern"] .bg-sun{
  display: block;
  bottom: auto;
  top: 8%;
  width: min(46vw, 420px);
  height: min(46vw, 420px);
  background: linear-gradient(135deg, rgba(254,44,85,0.5) 0%, rgba(124,58,237,0.45) 55%, rgba(37,244,238,0.4) 100%);
  filter: blur(70px);
  opacity: 0.55;
  box-shadow: none;
  animation: orbDrift 18s ease-in-out infinite;
}

@keyframes orbDrift{
  0%, 100%{ transform: translateX(-50%) translateY(0) scale(1); }
  50%     { transform: translateX(-42%) translateY(40px) scale(1.08); }
}

/* Faint dot grid instead of the perspective neon grid */
[data-theme="modern"] .bg-grid{
  display: block;
  height: 100vh;
  transform: none;
  background-image: radial-gradient(rgba(23,20,58,0.13) 1px, transparent 1px);
  background-size: 26px 26px;
  animation: none;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
  opacity: 0.7;
}

/* Genuinely retro-only bits stay hidden */
[data-theme="modern"] .bg-stars,
[data-theme="modern"] .scanlines,
[data-theme="modern"] .coin-note,
[data-theme="modern"] .blink-cursor{
  display: none;
}

/* Typography: swap pixel/mono fonts for a clean system sans-serif */
[data-theme="modern"] body,
[data-theme="modern"] h1,
[data-theme="modern"] h2,
[data-theme="modern"] h3,
[data-theme="modern"] .pixel,
[data-theme="modern"] .nav-logo,
[data-theme="modern"] .btn,
[data-theme="modern"] .badge,
[data-theme="modern"] .field label,
[data-theme="modern"] .nav-links li a,
[data-theme="modern"] .cabinet .marquee,
[data-theme="modern"] .cabinet .screen .ribbon,
[data-theme="modern"] .cabinet .screen .reel-stats span,
[data-theme="modern"] .news-item .date,
[data-theme="modern"] .login-tabs button,
[data-theme="modern"] .footer-logo,
[data-theme="modern"] .roster-pager a,
[data-theme="modern"] .roster-pager span,
[data-theme="modern"] .kv-card .label,
[data-theme="modern"] .nav-username,
[data-theme="modern"] .terminal{
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  letter-spacing: normal;
}

/* Big, tight, heavy headline type — the main "this is a modern site" signal */
[data-theme="modern"] h1,
[data-theme="modern"] h2,
[data-theme="modern"] h3{
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

[data-theme="modern"] .hero h1{
  font-size: clamp(2.6rem, 8vw, 5.2rem);
}

[data-theme="modern"] .hero .tagline,
[data-theme="modern"] .section-sub,
[data-theme="modern"] .page-header p{
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  font-size: 1.15rem;
  line-height: 1.6;
}

/* Gradient headline text (applied to the spans too — each line clips its
   own gradient, which is more reliable across browsers than relying on a
   child to inherit the parent's clipped background) */
[data-theme="modern"] .hero h1,
[data-theme="modern"] .hero h1 .line2,
[data-theme="modern"] .page-header h1,
[data-theme="modern"] .section-title{
  background-image: linear-gradient(115deg, #17143a 0%, #7c3aed 45%, #e11d64 78%, #f97316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
}

/* Kill glow/glitch/flicker effects */
[data-theme="modern"] .neon-pink,
[data-theme="modern"] .footer-logo,
[data-theme="modern"] .nav-logo .hl{ color: var(--m-pink); text-shadow: none; }
[data-theme="modern"] .neon-cyan,
[data-theme="modern"] .field label,
[data-theme="modern"] .nav-links li a:hover,
[data-theme="modern"] .nav-links li a.active,
[data-theme="modern"] .item-row span:last-child,
[data-theme="modern"] .roster-table th a,
[data-theme="modern"] .roster-pager a:hover,
[data-theme="modern"] .roster-table td a:hover{ color: var(--m-cyan); text-shadow: none; }
[data-theme="modern"] .neon-yellow,
[data-theme="modern"] .feature-card h3,
[data-theme="modern"] .news-item .date,
[data-theme="modern"] .contact-info .item h3,
[data-theme="modern"] .kv-card .label{ color: var(--m-amber); }
[data-theme="modern"] .roster-pager .current{ color: var(--m-pink); }
[data-theme="modern"] .cabinet .marquee{ text-shadow: none; }
[data-theme="modern"] .nav-toggle span{ box-shadow: none; background: var(--m-purple); }

[data-theme="modern"] .flicker{ animation: none; opacity: 1; }

[data-theme="modern"] .glitch::before,
[data-theme="modern"] .glitch::after{ display: none; }

/* Coin cursor off — plain pointer */
[data-theme="modern"] a,
[data-theme="modern"] button,
[data-theme="modern"] .sound-toggle,
[data-theme="modern"] .nav-toggle,
[data-theme="modern"] .login-tabs button{
  cursor: pointer;
}

/* Nav: frosted glass */
[data-theme="modern"] .nav{
  border-bottom: 1px solid rgba(231,228,245,0.9);
  box-shadow: 0 1px 24px rgba(23,20,58,0.05);
}
[data-theme="modern"] .nav::before{
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

[data-theme="modern"] .nav-logo{
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

[data-theme="modern"] .nav-links li a{
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 12px;
}
[data-theme="modern"] .nav-links li a:hover{
  background: rgba(124,58,237,0.08);
}

/* Buttons: gradient fills + colored glow, no pixel border/hard offset */
[data-theme="modern"] .btn{
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 15px 32px;
  background-image: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  box-shadow: 0 6px 20px rgba(245,158,11,0.35);
}
[data-theme="modern"] .btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(245,158,11,0.42);
  filter: brightness(1.04);
}
[data-theme="modern"] .btn:active{
  transform: translateY(-1px);
}

[data-theme="modern"] .btn-cyan{
  background-image: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
  color: #06282f;
  box-shadow: 0 6px 20px rgba(8,145,178,0.4);
}
[data-theme="modern"] .btn-cyan:hover{ box-shadow: 0 12px 28px rgba(8,145,178,0.48); }

[data-theme="modern"] .btn-pink{
  background-image: linear-gradient(135deg, #fb3b6c 0%, #9333ea 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(225,29,100,0.4);
}
[data-theme="modern"] .btn-pink:hover{ box-shadow: 0 12px 28px rgba(225,29,100,0.48); }

[data-theme="modern"] .btn-outline{
  background-image: none;
  background-color: rgba(255,255,255,0.7);
  border: 2px solid rgba(124,58,237,0.35);
  color: var(--m-purple);
  box-shadow: 0 4px 14px rgba(23,20,58,0.06);
}
[data-theme="modern"] .btn-outline:hover{
  background-color: #fff;
  border-color: var(--m-purple);
  box-shadow: 0 10px 24px rgba(124,58,237,0.18);
}

[data-theme="modern"] .btn[disabled],
[data-theme="modern"] .btn.disabled{
  background-image: none;
  background-color: #ecebf6;
  color: #9a97b8;
  box-shadow: none;
}
[data-theme="modern"] .btn[disabled]:hover,
[data-theme="modern"] .btn.disabled:hover{ box-shadow: none; filter: none; }

/* CTA pill in nav gets the same gradient treatment */
[data-theme="modern"] .nav-links li a.cta{
  background-image: linear-gradient(135deg, #fb3b6c 0%, #9333ea 100%);
  box-shadow: 0 6px 18px rgba(225,29,100,0.38);
}
[data-theme="modern"] .nav-links li a.cta:hover{
  background-color: transparent;
  box-shadow: 0 10px 26px rgba(225,29,100,0.46);
}

[data-theme="modern"] .nav-links li a.cta-outline{
  color: var(--m-purple);
  border-color: var(--m-purple);
}
[data-theme="modern"] .nav-links li a.cta-outline:hover{
  color: #fff;
  background: var(--m-purple);
  box-shadow: 0 10px 26px rgba(124,58,237,0.3);
}

/* Badge: gradient pill with glow */
[data-theme="modern"] .badge{
  border: none;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 9px 20px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed 0%, #e11d64 100%);
  box-shadow: 0 6px 18px rgba(124,58,237,0.32);
}

/* Panels / cards: frosted glass, generous radius, layered shadow */
[data-theme="modern"] .panel{
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(23,20,58,0.09), 0 2px 8px rgba(23,20,58,0.04);
}
[data-theme="modern"] .panel::before{ display: none; }

[data-theme="modern"] .feature-card,
[data-theme="modern"] .contact-info .item,
[data-theme="modern"] .news-item,
[data-theme="modern"] .kv-card,
[data-theme="modern"] .item-row{
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(23,20,58,0.07);
}

/* Cards lift with a colored glow on hover */
[data-theme="modern"] .feature-card:hover,
[data-theme="modern"] .contact-info .item:hover{
  transform: translateY(-6px);
  border-color: rgba(124,58,237,0.35);
  box-shadow: 0 20px 44px rgba(124,58,237,0.18);
}

[data-theme="modern"] .news-item{
  border-left: 4px solid transparent;
  border-image: linear-gradient(180deg, #7c3aed 0%, #e11d64 100%) 1;
  border-radius: 18px;
}

[data-theme="modern"] .feature-card .icon,
[data-theme="modern"] .contact-info .item .icon{
  font-size: 2.6rem;
}

[data-theme="modern"] .feature-card h3,
[data-theme="modern"] .contact-info .item h3{
  font-size: 1.15rem;
  font-weight: 700;
}

/* Game cards */
[data-theme="modern"] .cabinet{
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 24px;
  box-shadow: 0 10px 34px rgba(23,20,58,0.08);
}
[data-theme="modern"] .cabinet:hover{
  transform: translateY(-8px) scale(1.015);
  border-color: rgba(124,58,237,0.35);
  box-shadow: 0 24px 50px rgba(124,58,237,0.2);
}
[data-theme="modern"] .cabinet .screen{
  background: linear-gradient(160deg, #ede9fe 0%, #fce7f3 55%, #cffafe 100%);
  border: none;
  border-radius: 18px;
}
[data-theme="modern"] .cabinet .screen .glyph{
  filter: drop-shadow(0 6px 16px rgba(124,58,237,0.28));
}
[data-theme="modern"] .cabinet .marquee{
  background: linear-gradient(135deg, #7c3aed 0%, #e11d64 100%);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(124,58,237,0.3);
}
[data-theme="modern"] .cabinet .screen .ribbon{
  background: rgba(23,20,58,0.82);
  backdrop-filter: blur(4px);
  font-size: 0.8rem;
}
[data-theme="modern"] .cabinet .info h3{ font-size: 1.15rem; }
[data-theme="modern"] .cabinet .info p{ font-size: 1rem; line-height: 1.55; }

/* Dev-log box becomes a sleek dark "code card" — a deliberate dark accent
   against the light page, which reads as modern rather than as leftover CRT */
[data-theme="modern"] .terminal{
  background: linear-gradient(160deg, #1e1b4b 0%, #17143a 100%);
  color: #6ee7b7;
  border: none;
  border-radius: 20px;
  font-size: 1rem;
  line-height: 1.8;
  box-shadow: 0 18px 44px rgba(23,20,58,0.28);
}
[data-theme="modern"] .terminal .prompt{ color: #22d3ee; }
[data-theme="modern"] .terminal .cursor{ background: #6ee7b7; }

/* Forms */
[data-theme="modern"] .field label{
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}
[data-theme="modern"] .field input,
[data-theme="modern"] .field select,
[data-theme="modern"] .field textarea{
  background: rgba(255,255,255,0.9);
  border: 1.5px solid var(--panel-line);
  border-radius: 12px;
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  padding: 13px 16px;
}
[data-theme="modern"] .field input:focus,
[data-theme="modern"] .field select:focus,
[data-theme="modern"] .field textarea:focus{
  border-color: var(--m-purple);
  box-shadow: 0 0 0 4px rgba(124,58,237,0.14);
}
[data-theme="modern"] .form-msg{
  color: #047857;
  border-color: rgba(4,120,87,0.3);
  background: rgba(16,185,129,0.09);
  border-radius: 12px;
}

/* Login tabs → segmented control */
[data-theme="modern"] .login-tabs button{
  font-size: 0.95rem;
  font-weight: 700;
  border: 1px solid var(--panel-line);
  background: rgba(255,255,255,0.8);
  color: var(--dim);
}
[data-theme="modern"] .login-tabs button:first-child{
  border-radius: 999px 0 0 999px;
  border-right: none;
}
[data-theme="modern"] .login-tabs button:last-child{
  border-radius: 0 999px 999px 0;
}
[data-theme="modern"] .login-tabs button.active{
  background: linear-gradient(135deg, #7c3aed 0%, #e11d64 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(124,58,237,0.3);
}

/* Roster table (admin) */
[data-theme="modern"] .roster-table,
[data-theme="modern"] .events-table{
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  font-size: 0.95rem;
}
[data-theme="modern"] .roster-table th a{ font-weight: 700; }
[data-theme="modern"] .roster-table tr:hover td,
[data-theme="modern"] .events-table tr:hover td{ background: rgba(124,58,237,0.06); }
[data-theme="modern"] .roster-pager a,
[data-theme="modern"] .roster-pager span{
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  border-width: 1px;
}

/* Footer */
[data-theme="modern"] .site-footer{
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--panel-line);
}
[data-theme="modern"] .footer-logo{
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background-image: linear-gradient(115deg, #7c3aed 0%, #e11d64 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[data-theme="modern"] .footer-links a:hover{ color: var(--m-purple); }

/* Floating controls */
[data-theme="modern"] .sound-toggle{
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(124,58,237,0.25);
  box-shadow: 0 8px 24px rgba(23,20,58,0.14);
}
[data-theme="modern"] .sound-toggle:hover{
  border-color: var(--m-purple);
  box-shadow: 0 12px 30px rgba(124,58,237,0.24);
}

[data-theme="modern"] .theme-toggle{
  background: rgba(255,255,255,0.8);
  border-color: rgba(124,58,237,0.3);
  color: var(--m-purple);
  box-shadow: 0 4px 14px rgba(23,20,58,0.07);
}
[data-theme="modern"] .theme-toggle:hover{
  border-color: var(--m-purple);
  color: var(--m-purple);
  box-shadow: 0 8px 22px rgba(124,58,237,0.2);
}

/* Roomier vertical rhythm — modern marketing pages breathe more */
[data-theme="modern"] section{ padding: 20px 0 96px; }
[data-theme="modern"] .hero{ padding-block: 100px 30px; }

@media (max-width: 480px){
  [data-theme="modern"] section{ padding: 64px 0; }
  [data-theme="modern"] .hero{ padding-block: 64px 80px; }
  [data-theme="modern"] .btn{ font-size: 0.88rem; padding: 13px 24px; }
}

/* Theme toggle button itself — variable-driven, adapts automatically */
.theme-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Baloo 2', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  background: transparent;
  color: var(--dim);
  border: 2px solid var(--panel-line);
  border-radius: 999px;
  padding: 8px 14px;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.theme-toggle:hover{
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-1px);
}

/* ==========================================================
   MOBILE HARDENING
   Applies to both themes. Kept at the end so it wins over the
   per-page <style> blocks' own sizing without needing !important.
   ========================================================== */

/* iOS zooms the whole page in when a focused input's text is under 16px,
   then leaves you scrolled somewhere else. The shared .field inputs were
   already safe (19.2px retro / 16px modern); these are the ones that
   weren't — search boxes, quantity steppers, the trade-recipient box
   inside a position:fixed modal (the worst of them, since the zoom leaves
   the modal half off-screen with no way back). */
@media (max-width: 767px){
  input[type="text"], input[type="number"], input[type="search"],
  input[type="email"], input[type="password"], input[type="datetime-local"],
  select, textarea{
    font-size: 16px;
  }
}

/* Touch targets. Everything below measured under ~44px on a 360-390px
   phone; several were under 20px. `pointer: coarse` scopes this to touch
   devices so the desktop layout keeps its tighter spacing. */
@media (pointer: coarse){
  .nav-toggle{ padding: 12px 9px; }
  .footer-links{ gap: 24px; row-gap: 18px; }
  .footer-links a{ display: inline-block; padding: 10px 4px; }
  .roster-pager a, .roster-pager span{ min-width: 44px; padding: 13px 12px; }
  .theme-toggle{ min-height: 44px; }
}

/* The hamburger sits at the right edge of .nav-inner, which is exactly
   where the open drawer covers — and .nav is a stacking context, so an
   unpositioned toggle paints underneath the z-index:45 panel. Lifting it
   above means the button that opened the menu can also close it. */
.nav-toggle{ position: relative; z-index: 46; }


/* ==========================================================================
   Confirm modal
   ==========================================================================
   Replaces window.confirm() on destructive admin actions. The native dialog
   renders as "funfoundgames.com says ..." in the browser's own chrome, which
   is unstyleable, looks like a phishing prompt, and gives no room to explain
   what the action actually does.

   Progressive enhancement: a form carries data-confirm, and main.js turns it
   into this dialog. With JS unavailable the form still submits.
   ========================================================================== */
.modal-backdrop{
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(6, 4, 20, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.16s ease;
}
.modal-backdrop.open{ opacity: 1; pointer-events: auto; }

.modal-box{
  width: 100%; max-width: 460px;
  background: var(--panel);
  border: 2px solid var(--panel-line);
  border-radius: 14px;
  padding: 24px 26px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.16s ease;
}
.modal-backdrop.open .modal-box{ transform: none; }

.modal-title{
  font-family: 'Press Start 2P', monospace;
  font-size: 0.78rem; line-height: 1.5;
  color: var(--cream);
  margin: 0 0 12px;
}
.modal-text{
  color: var(--dim); line-height: 1.6; font-size: 0.95rem;
  margin: 0 0 22px;
}
.modal-actions{ display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* The destructive option is never the visually dominant one — the safe exit
   is what a mis-click should land on. */
.modal-box .btn{ padding: 9px 18px; font-size: 0.72rem; }

[data-theme="modern"] .modal-backdrop{ background: rgba(30, 20, 60, 0.45); }
[data-theme="modern"] .modal-box{
  border-width: 1px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(80, 50, 160, 0.22);
}
[data-theme="modern"] .modal-title{
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  font-size: 1.15rem; font-weight: 700;
}
[data-theme="modern"] .modal-box .btn{ font-size: 0.85rem; }

@media (max-width: 480px){
  .modal-actions{ flex-direction: column-reverse; }
  .modal-actions .btn{ width: 100%; text-align: center; }
}

/* ==========================================================================
   Copy-to-clipboard control
   ==========================================================================
   Used wherever a value exists to be pasted somewhere else (sync URL, cabinet
   key). Paired with a scrolling value box rather than word-break, which was
   splitting URLs mid-domain across three lines.
   ========================================================================== */
.copy-field{ margin-bottom: 14px; }
.copy-field:last-child{ margin-bottom: 0; }
.copy-label{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: var(--dim); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: 5px;
}
.copy-value{
  display: block; overflow-x: auto; white-space: nowrap;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--cream);
  font-size: 0.9rem;
}
.copy-btn{
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--cyan);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em;
}
.copy-btn:hover{ text-decoration: underline; }
.copy-btn.copied{ color: var(--dim); text-decoration: none; }

[data-theme="modern"] .copy-value{ background: rgba(0, 0, 0, 0.05); }
[data-theme="modern"] .copy-btn{ color: var(--m-cyan); font-weight: 700; }


/* ==========================================================================
   Admin components
   ========================================================================== */

/* Panel headings. Several admin panels were building these out of inline
   styles on a <strong>, which drifted between pages. */
.panel-title{
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 1.05rem; font-weight: 800;
  color: var(--cream);
  margin: 0 0 6px;
}
.panel-sub{ color: var(--dim); font-size: 0.88rem; line-height: 1.55; margin: 0 0 16px; }
.panel-foot{ color: var(--dim); font-size: 0.82rem; line-height: 1.55; margin: 14px 0 0; }
.panel-foot a, .panel-sub a{ text-decoration: underline; }

/* Small row-level buttons. Both were inline-styled .btn .btn-outline with
   different padding and colours, which is why the Actions column came out
   ragged. One size, and the destructive one deliberately quieter than the
   safe one rather than the loudest thing in the row. */
.row-actions{ display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.row-actions form{ margin: 0; width: 100%; }
.btn-quiet-sm,
.btn-danger-sm{
  width: 100%;
  padding: 7px 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.58rem;
  line-height: 1.5;
  border-radius: 8px;
  background: transparent;
  border: 2px solid var(--panel-line);
  color: var(--dim);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-quiet-sm:hover{ border-color: var(--cyan); color: var(--cyan); }
.btn-danger-sm:hover{ border-color: #a84040; color: #f2a5a5; }

[data-theme="modern"] .btn-quiet-sm,
[data-theme="modern"] .btn-danger-sm{
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  font-size: 0.8rem; font-weight: 600;
  border-width: 1px; border-radius: 9px;
}
[data-theme="modern"] .btn-quiet-sm:hover{ border-color: var(--m-cyan); color: var(--m-cyan); }
[data-theme="modern"] .btn-danger-sm:hover{ border-color: #d14343; color: #c22b2b; }

/* Connection status line, shared by the cabinet page and My Account. Billing
   and connection are separate axes — "paid but no key yet" is normal during
   setup — so connection gets its own dot rather than competing for the same
   slot as the billing state. */
.conn-status-bar{ display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.conn-status{
  display: flex; align-items: center; gap: 9px;
  color: var(--dim); font-size: 0.88rem; line-height: 1.5;
  flex: 1 1 260px;
}
.conn-status-action{ margin-left: auto; }
.conn-dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--dim); }
.conn-dot.live{ background: var(--cyan); box-shadow: 0 0 8px rgba(37,244,238,0.6); }
.conn-dot.pending{ background: #e0a542; }
.conn-dot.none{ background: #a84040; }
[data-theme="modern"] .conn-dot.live{ background: var(--m-cyan); box-shadow: none; }

/* One-time key reveal. */
.key-reveal{
  border: 2px solid var(--cyan);
  background: rgba(5, 228, 245, 0.06);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.key-reveal-head{ color: var(--cyan); font-size: 0.9rem; line-height: 1.55; margin: 0 0 4px; }
.key-reveal-hint{ color: var(--dim); font-size: 0.82rem; margin: 0 0 14px; }
[data-theme="modern"] .key-reveal{
  border-width: 1px; border-color: var(--m-cyan);
  background: rgba(8, 145, 178, 0.06);
}
[data-theme="modern"] .key-reveal-head{ color: var(--m-cyan); }

/* ==========================================================================
   Modern-theme colour corrections
   ==========================================================================
   The modern theme keeps --cyan as the retro neon (it is still used for
   glows) and provides --m-cyan for text on the light background. Anything
   that paints TEXT with --cyan therefore has to be remapped here, or it
   renders as pale blue on near-white and is effectively unreadable. */
[data-theme="modern"] .setup-body h2,
[data-theme="modern"] .host-body h2,
[data-theme="modern"] .terms-body h2,
[data-theme="modern"] .cab-conn.live,
[data-theme="modern"] .conn-copy,
[data-theme="modern"] .cab-bill.paid,
[data-theme="modern"] .bill-state.paid,
[data-theme="modern"] .chip-toggle-btn,
[data-theme="modern"] .audit-action a{ color: var(--m-cyan); }

[data-theme="modern"] .cab-dot,
[data-theme="modern"] .cab-conn.live .cab-dot{ background: var(--m-cyan); }

/* Admin nav: the /ADMIN tag sat flush against the first link with no gap. */
.nav-logo + .nav-toggle{ margin-left: 12px; }
[data-theme="modern"] .nav-links{ gap: 4px; }
.nav-inner .nav-logo span[style]{ margin-right: 6px; }

/* Search toolbars: the input kept a square retro border beside a fully
   rounded button, which is what made the filter row look unfinished. */
[data-theme="modern"] .roster-search input,
[data-theme="modern"] .roster-toolbar input[type="text"]{
  border-radius: 10px;
  border: 1px solid var(--panel-line);
  padding: 9px 13px;
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
}
.roster-search{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* The nav username chip is declared page-locally on every admin page in the
   retro pixel face. This outranks those (attribute + class beats class) so
   the modern theme gets a readable one without editing six <style> blocks. */
[data-theme="modern"] .nav-username{
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  font-size: 0.85rem;
  font-weight: 600;
}


/* ==========================================================================
   Announcer — the retro mascot on the home page
   ==========================================================================
   Pelly stands at the edge of the hero and reads out whatever
   /announcements.php is currently serving: owner-written lines, plus
   automatic ones for a stream that is live right now and the next scheduled
   one.

   Everything here degrades to nothing: the markup is hidden until the fetch
   succeeds, so a failed request or a missing table leaves the home page
   exactly as it was rather than showing an empty speech bubble.
   ========================================================================== */
/* The slot reserves the announcer's height from first paint, so revealing the
   content after the fetch does not push the rest of the page down. Sized to
   the avatar, which is the tallest thing in the row.

   It is NOT inside .hero: that is a centred flex row, so anything placed in
   it becomes a second flex item beside the hero text instead of sitting
   under it. */
.announcer-slot{
  min-height: 124px;
  display: flex; align-items: center; justify-content: center;
  /* padding-block: this is also a .wrap, and the shorthand erased its gutter. */
  padding-block: 10px 4px;
}
/* Nothing to say — collapse rather than leaving a hole. The only shift this
   can cause is on an empty or failed fetch, which is the rare case. */
.announcer-slot.is-empty{ min-height: 0; padding-block: 0; }

.announcer{
  display: none;                 /* revealed by JS once there is a line to say */
  align-items: flex-end;
  gap: 14px;
  width: 100%;
  max-width: 720px;
  padding: 0 10px;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.announcer.ready{ display: flex; opacity: 1; }

/* Without an explicit min-width:0 the bubble refuses to shrink below its
   content and overflows the row on narrow screens. */
.announcer-body{ flex: 1 1 auto; min-width: 0; }

.announcer-avatar{
  position: relative;
  width: 88px; flex-shrink: 0;
  cursor: pointer;
  background: none; border: none; padding: 0;
  /* Above the bubble so the squawk arcs can carry over it. */
  z-index: 2;
}
.announcer-avatar img{
  display: block; width: 100%; height: auto;
  /* The sprite is a flat PNG; the glow is what makes it sit in the scene
     rather than looking pasted on top of it. */
  filter: drop-shadow(0 4px 14px rgba(37, 244, 238, 0.35));
  animation: announcer-bob 3.4s ease-in-out infinite;
  transform-origin: 50% 90%;
}
/* A short squash-and-stretch while a line is being typed, so the mascot
   looks like the source of the words rather than a static decoration. */
.announcer.talking .announcer-avatar img{ animation: announcer-talk 0.42s ease-in-out infinite; }

/* The squawk itself: a sharp rear-back-and-snap-forward, timed to the two
   cries in SoundEngine.playSquawk() (~0.4s total). Overrides the talk loop
   for its duration because a bird mid-shriek is not also idly chattering. */
.announcer.squawking .announcer-avatar img{
  animation: announcer-squawk 0.44s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* A periodic idle hop, fired on a random timer rather than a CSS loop so the
   mascot does not look metronomic. */
.announcer.hopping .announcer-avatar img{
  animation: announcer-hop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes announcer-bob{
  0%, 100%{ transform: translateY(0) rotate(-1.2deg); }
  50%     { transform: translateY(-7px) rotate(1.2deg); }
}
@keyframes announcer-talk{
  0%, 100%{ transform: translateY(0)    scale(1, 1); }
  40%     { transform: translateY(-4px) scale(0.97, 1.04); }
  70%     { transform: translateY(1px)  scale(1.03, 0.97); }
}

/* Wind up away from the bubble, then throw the whole body into the cry. */
@keyframes announcer-squawk{
  0%   { transform: translateY(0)     rotate(0deg)    scale(1, 1); }
  14%  { transform: translateY(2px)   rotate(-7deg)   scale(1.05, 0.94); }
  34%  { transform: translateY(-9px)  rotate(6deg)    scale(0.93, 1.10); }
  52%  { transform: translateY(-2px)  rotate(-3deg)   scale(1.04, 0.97); }
  72%  { transform: translateY(-6px)  rotate(4deg)    scale(0.96, 1.06); }
  100% { transform: translateY(0)     rotate(0deg)    scale(1, 1); }
}

@keyframes announcer-hop{
  0%,100%{ transform: translateY(0)    rotate(0deg)  scale(1, 1); }
  25%    { transform: translateY(-13px) rotate(-5deg) scale(0.95, 1.07); }
  60%    { transform: translateY(0)    rotate(3deg)  scale(1.06, 0.94); }
  80%    { transform: translateY(-3px) rotate(0deg)  scale(0.99, 1.01); }
}

/* Cartoon sound-waves off the beak. Three quarter-circle arcs (border on one
   side + 50% radius), staggered so they read as one expanding burst rather
   than three separate rings. Pelly faces right, into the bubble, so they
   emit from his right edge at beak height. */
.announcer-waves{
  /* Anchored just off the beak tip rather than the edge of the box, and
     lifted above the bubble - as a later sibling the bubble paints over the
     avatar by default, which swallowed these entirely. */
  position: absolute; left: 76%; top: 22%;
  width: 18px; height: 18px;
  pointer-events: none; opacity: 0;
  z-index: 3;
}
.announcer-waves i{
  position: absolute; inset: 0;
  border: 2.5px solid var(--cyan);
  border-radius: 50%;
  /* Only the leading edge - a full ring reads as a bubble, not a sound wave. */
  border-color: transparent var(--cyan) transparent transparent;
  opacity: 0;
}
.announcer.squawking .announcer-waves{ opacity: 1; }
.announcer.squawking .announcer-waves i{ animation: announcer-wave 0.5s ease-out; }
.announcer.squawking .announcer-waves i:nth-child(2){ animation-delay: 0.09s; }
.announcer.squawking .announcer-waves i:nth-child(3){ animation-delay: 0.19s; }

@keyframes announcer-wave{
  0%  { transform: rotate(-22deg) scale(0.35) translateX(0);   opacity: 0; }
  25% { opacity: 0.95; }
  100%{ transform: rotate(-22deg) scale(2.9)  translateX(10px); opacity: 0; }
}
[data-theme="modern"] .announcer-waves i{ border-right-color: var(--m-cyan); }

.announcer-bubble{
  position: relative;
  flex: 1 1 auto; min-width: 0;
  background: var(--panel);
  border: 2px solid var(--cyan);
  border-radius: 14px;
  padding: 16px 18px;
  min-height: 62px;
  display: flex; align-items: center;
  box-shadow: 0 0 22px rgba(37, 244, 238, 0.18);
  transform-origin: 0 80%;
}
.announcer-bubble.pop{ animation: announcer-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes announcer-pop{
  0%  { transform: scale(0.82) translateY(6px) rotate(-1.4deg); opacity: 0; }
  55% { transform: scale(1.03) translateY(-2px) rotate(0.7deg); opacity: 1; }
  78% { transform: scale(0.99) translateY(0)   rotate(-0.35deg); }
  100%{ transform: scale(1)    translateY(0)   rotate(0deg); opacity: 1; }
}

/* Characters rise into place as they are typed. Each one animates once, on
   the frame it is appended - the typewriter builds real elements rather than
   re-rendering a string, so nothing restarts an animation already running. */
.announcer-ch{
  display: inline-block;
  white-space: pre;              /* keeps spaces, which would collapse otherwise */
  animation: announcer-ch-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes announcer-ch-in{
  0%  { transform: translateY(0.32em) scale(0.7); opacity: 0; }
  100%{ transform: translateY(0)      scale(1);   opacity: 1; }
}

/* Tail, pointing back at the mascot. Two triangles so the border reads
   through the notch as a continuous outline. */
.announcer-bubble::before,
.announcer-bubble::after{
  content: ''; position: absolute; left: -13px; bottom: 16px;
  border-style: solid; border-width: 9px 13px 9px 0;
}
.announcer-bubble::before{ border-color: transparent var(--cyan) transparent transparent; }
.announcer-bubble::after{
  left: -10px; border-color: transparent var(--panel) transparent transparent;
}

.announcer-text{
  font-family: 'VT323', monospace;
  font-size: 1.35rem; line-height: 1.35;
  color: var(--cream);
  margin: 0; word-break: break-word;
}
.announcer-text .caret{
  display: inline-block; width: 0.55em;
  color: var(--cyan);
  animation: announcer-caret 1s steps(1) infinite;
}
@keyframes announcer-caret{ 0%, 49%{ opacity: 1; } 50%, 100%{ opacity: 0; } }

/* A line about a stream that is live right now gets a pulsing marker — it is
   the one message on the page that is time-critical. */
.announcer-live-dot{
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--pink); margin-right: 9px; vertical-align: middle;
  animation: announcer-pulse 1.4s ease-in-out infinite;
}
@keyframes announcer-pulse{
  0%, 100%{ transform: scale(1);   box-shadow: 0 0 0 0 rgba(254, 44, 85, 0.55); }
  50%     { transform: scale(1.2); box-shadow: 0 0 0 7px rgba(254, 44, 85, 0); }
}
.announcer-bubble a{ color: inherit; text-decoration: none; }
.announcer-bubble a:hover .announcer-text{ color: var(--cyan); }

/* Progress pips: which line of how many, and a way to jump between them. */
.announcer-pips{ display: flex; gap: 6px; margin-top: 10px; }
.announcer-pip{
  width: 7px; height: 7px; border-radius: 50%; padding: 0;
  border: none; background: var(--panel-line); cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.announcer-pip.on{ background: var(--cyan); transform: scale(1.25); }

[data-theme="modern"] .announcer-avatar img{ filter: drop-shadow(0 6px 16px rgba(124, 58, 237, 0.25)); }
[data-theme="modern"] .announcer-bubble{
  border-width: 1px; border-color: var(--panel-line);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(80, 50, 160, 0.12);
}
[data-theme="modern"] .announcer-bubble::before{ border-right-color: var(--panel-line); }
[data-theme="modern"] .announcer-text{
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  font-size: 1rem; font-weight: 600;
}
[data-theme="modern"] .announcer-text .caret{ color: var(--m-cyan); }
[data-theme="modern"] .announcer-pip.on{ background: var(--m-cyan); }

@media (max-width: 560px){
  .announcer-slot{ min-height: 96px; }
  .announcer{ gap: 10px; }
  .announcer-avatar{ width: 62px; }
  .announcer-text{ font-size: 1.15rem; }
  [data-theme="modern"] .announcer-text{ font-size: 0.92rem; }
}

/* Motion is decorative here and the content is fully readable without it.
   Anyone who has asked the OS for less of it gets the text placed at once,
   with no bob, no typing and no pulse. */
@media (prefers-reduced-motion: reduce){
  .announcer,
  .announcer-avatar img,
  .announcer.talking .announcer-avatar img,
  .announcer.squawking .announcer-avatar img,
  .announcer.hopping .announcer-avatar img,
  .announcer.squawking .announcer-waves i,
  .announcer-bubble.pop,
  .announcer-ch,
  .announcer-live-dot,
  .announcer-text .caret{
    animation: none;
  }
  .announcer{ transition: none; }
  /* The character animation uses fill-mode both, so cancelling it without
     this would leave every letter stuck at its 0% (invisible) state. */
  .announcer-ch{ opacity: 1; transform: none; }
  .announcer-waves{ display: none; }
}

/* Announced to assistive tech, invisible on screen. The mascot's visible text
   is typed one character at a time, and a live region containing that would
   fire an announcement per character; the full line is written here once
   instead, and the animated copy is aria-hidden. */
.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Site chrome (public pages): grouped nav and footer
   ==========================================================================
   Logo on the left, four main links in the middle, then a cluster of
   controls: the Retro | Modern switch, the sound button (it used to float
   over page content) and one "Log in" menu holding both Player and Host.
   Home, Contact and Host a cabinet moved to the logo, the footer and the
   phone drawer, which is what took the bar from nine items to four. */

.nav-inner{ gap: 24px; }

.nav-links{ flex: 1; justify-content: center; }
.nav-links li a{ font-size: 0.75rem; display: inline-flex; align-items: center; gap: 8px; }

.nav-drawer-only{ display: none; }

.live-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dim);
  flex-shrink: 0;
}
.nav-live-online .live-dot{ background: #35d94f; box-shadow: 0 0 8px rgba(53,217,79,0.8); }
.nav-live-offline .live-dot{ background: #ff4d4d; }

.nav-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Retro | Modern switch: two buttons, the current theme pressed, so it's
   obvious which one you're on (the old single button named the other). */
.theme-switch{
  display: inline-flex;
  border: 2px solid var(--panel-line);
  flex-shrink: 0;
}
.theme-switch button{
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  height: 40px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--dim);
}
.theme-switch button:hover{ color: var(--cyan); }
.theme-switch button[aria-pressed="true"]{ background: var(--cyan); color: var(--ink); }

.icon-btn{
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border: 2px solid var(--panel-line);
  background: transparent;
  color: var(--cyan);
  transition: border-color 0.2s ease;
}
.icon-btn:hover{ border-color: var(--cyan); }
.icon-btn svg{
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: round;
}
.icon-btn .icon-sound-off,
.icon-btn[aria-pressed="false"] .icon-sound-on{ display: none; }
.icon-btn[aria-pressed="false"] .icon-sound-off{ display: block; }

/* One pill for every call to action in the bar: the Log in summary, and
   My Tackle Box / Log out on signed-in pages. */
.nav-actions .cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  color: var(--cream);
  background: var(--pink);
  border: 2px solid #ff8aa3;
  box-shadow: 4px 4px 0 #7a0f2a;
  text-decoration: none;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
}
.nav-actions .cta::-webkit-details-marker{ display: none; }
.nav-actions .cta:hover{ filter: brightness(1.08); }

.login-menu{ position: relative; }
.login-menu > summary::after{
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.login-menu[open] > summary::after{ transform: translateY(2px) rotate(-135deg); }

.login-menu-panel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 270px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 2px solid var(--panel-line);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.45);
  z-index: 50;
}
.login-menu-panel a{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  text-decoration: none;
  color: var(--cream);
  font-size: 1.15rem;
}
.login-menu-panel a + a{ border-top: 1px dashed var(--panel-line); }
.login-menu-panel a:hover{ background: rgba(37,244,238,0.08); }
.login-menu-panel strong{
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  font-weight: 400;
  color: var(--cyan);
}
.login-menu-panel span{ color: var(--dim); font-size: 1.05rem; }

@media (max-width: 980px){
  .nav-links{ flex: none; }
  .nav-links li a{ font-size: 0.85rem; }

  /* In the drawer the theme switch and log-ins get their own rows at the
     bottom; the copies in the bar hide so the bar is logo, sound, menu. */
  .nav-actions .theme-switch,
  .nav-actions .login-menu,
  .nav-actions > .cta{ display: none; }

  .nav-drawer-only{ display: block; }
  .nav-drawer-sub a{ font-family: 'VT323', monospace; font-size: 1.35rem !important; }
  .nav-drawer-theme{ margin-top: 8px; }
  .nav-drawer-cta{ align-self: stretch; }
  .nav-drawer-cta a{ justify-content: center; }
}

/* Footer: grouped columns instead of one long wrapping row of nine links. */
.site-footer{ text-align: left; padding: 44px 0 36px; }
.footer-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.footer-brand p{ margin: 0 0 12px; }
.footer-head{
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: var(--cyan);
  margin: 0 0 12px;
}
.footer-col ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-col a{ color: var(--dim); text-decoration: none; font-size: 1.15rem; }
.footer-col a:hover{ color: var(--cyan); }

@media (max-width: 760px){
  .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .footer-brand{ grid-column: 1 / -1; }
}
@media (pointer: coarse){
  .footer-col a{ display: inline-block; padding: 6px 0; }
}

/* Modern theme versions of the above */
[data-theme="modern"] .theme-switch{
  border: 0;
  background: #f2f0fb;
  border-radius: 999px;
  padding: 4px;
}
[data-theme="modern"] .theme-switch button{
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--dim);
}
[data-theme="modern"] .theme-switch button[aria-pressed="true"]{
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(23,20,58,0.15);
}
[data-theme="modern"] .icon-btn{
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
}
[data-theme="modern"] .icon-btn:hover{ border-color: var(--m-purple); }
[data-theme="modern"] .icon-btn svg{ stroke-linecap: round; }
[data-theme="modern"] .nav-actions .cta{
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: none;
}
[data-theme="modern"] .login-menu-panel{
  border: 1px solid var(--panel-line);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(23,20,58,0.14);
  overflow: hidden;
}
[data-theme="modern"] .login-menu-panel a{ font-family: 'Figtree', system-ui, sans-serif; font-size: 0.9rem; }
[data-theme="modern"] .login-menu-panel a + a{ border-top: 1px solid #f0eef8; }
[data-theme="modern"] .login-menu-panel a:hover{ background: #f7f6fc; }
[data-theme="modern"] .login-menu-panel strong{
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
[data-theme="modern"] .login-menu-panel span{ font-size: 0.85rem; }
[data-theme="modern"] .nav-live-online .live-dot{ background: #16a34a; box-shadow: none; }
[data-theme="modern"] .nav-live-offline .live-dot{ background: #dc2626; }
[data-theme="modern"] .footer-head{
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}
[data-theme="modern"] .footer-col a{ font-size: 0.95rem; }
[data-theme="modern"] .footer-col a:hover{ color: var(--m-purple); }
@media (max-width: 980px){
  [data-theme="modern"] .nav-drawer-sub a{ font-family: 'Figtree', system-ui, sans-serif; font-size: 1rem !important; }
}

/* Modern type: Baloo 2 for display, Figtree for everything else. Before
   this the theme fell back to whatever sans the OS had (Segoe, DejaVu…),
   so it looked generic and different on every machine. */
[data-theme="modern"] h1,
[data-theme="modern"] h2,
[data-theme="modern"] h3,
[data-theme="modern"] .nav-logo,
[data-theme="modern"] .footer-logo{
  font-family: 'Baloo 2', 'Figtree', system-ui, sans-serif;
  letter-spacing: -0.01em;
}
[data-theme="modern"] h1,
[data-theme="modern"] h2,
[data-theme="modern"] h3{ line-height: 1.05; }

/* The purple→orange gradient was on every section title; it now marks the
   page's main heading only, and section titles are solid ink. */
[data-theme="modern"] .section-title{
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
}

/* Retro drawer log-ins: square pixel buttons to match the bar, not the
   older rounded Baloo pills. */
:root:not([data-theme="modern"]) .nav-drawer-cta a.cta,
:root:not([data-theme="modern"]) .nav-drawer-cta a.cta-outline{
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  font-weight: 400;
  border-radius: 0;
  padding: 16px 12px;
}
:root:not([data-theme="modern"]) .nav-drawer-cta a.cta{ border: 2px solid #ff8aa3; box-shadow: 4px 4px 0 #7a0f2a; }
:root:not([data-theme="modern"]) .nav-drawer-cta a.cta-outline{ box-shadow: 4px 4px 0 rgba(37,244,238,0.25); }
[data-theme="modern"] .nav-logo{ font-size: 1.4rem; }
[data-theme="modern"] .section-title{ font-size: clamp(1.9rem, 5vw, 2.75rem); }

/* ---------- News: status line and dated posts ---------- */
.status-line{
  max-width: 820px;
  margin: 0 auto 32px;
  font-family: 'VT323', monospace;
  font-size: 1.4rem;
  color: var(--green);
  text-align: center;
}
.status-line .prompt{ color: var(--cyan); }
.news-list{ max-width: 820px; margin-top: 0; }
.news-item{
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  padding: 0;
  border-left-width: 2px;
}
.news-meta{
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 16px;
  border-right: 2px dashed var(--panel-line);
}
.news-item .date{ margin: 0; }
.news-tag{
  width: fit-content;
  padding: 5px 7px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  color: var(--ink);
  background: var(--yellow);
}
.news-body{ padding: 22px 26px; }
.news-body h3{ line-height: 1.5; }
@media (max-width: 560px){
  .news-item{ grid-template-columns: minmax(0, 1fr); }
  .news-meta{ flex-direction: row; align-items: center; border-right: 0; border-bottom: 2px dashed var(--panel-line); padding: 14px 18px; }
  .news-body{ padding: 16px 18px 20px; }
}
[data-theme="modern"] .status-line{ font-family: 'Figtree', sans-serif; font-size: 0.95rem; font-weight: 600; color: #047857; }
[data-theme="modern"] .status-line .prompt{ color: var(--m-cyan); }
[data-theme="modern"] .news-item{ border-image: none; border: 1px solid var(--panel-line); border-radius: 20px; overflow: hidden; }
[data-theme="modern"] .news-meta{ border-right: 1px solid #f0eef8; }
[data-theme="modern"] .news-item .date{ font-family: 'Figtree', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--dim); }
[data-theme="modern"] .news-tag{ font-family: 'Figtree', sans-serif; font-size: 0.75rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; color: #92400e; background: #fef3c7; }
[data-theme="modern"] .news-body h3{ font-size: 1.4rem; }
[data-theme="modern"] .news-body p{ font-size: 1rem; line-height: 1.55; }
@media (max-width: 560px){ [data-theme="modern"] .news-meta{ border-bottom: 1px solid #f0eef8; } }

/* ---------- Contact: channel list beside the form ---------- */
.contact-layout{
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 40px;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}
.contact-layout .form-panel{ max-width: none; margin: 0; }
.contact-channels{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.contact-channel{
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px;
  background: var(--panel);
  border: 2px solid var(--panel-line);
  text-decoration: none;
  color: var(--cream);
}
a.contact-channel:hover{ border-color: var(--cyan); }
.contact-channel.is-note{ background: transparent; border-style: dashed; }
.contact-channel svg{
  width: 44px; height: 44px; flex-shrink: 0; padding: 10px; box-sizing: border-box;
  fill: none; stroke: var(--cyan); stroke-width: 2;
  border: 2px solid var(--cyan);
}
.contact-channel > span{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.contact-channel-label{ font-family: 'Press Start 2P', monospace; font-size: 0.55rem; color: var(--yellow); }
.contact-channel-value{ font-size: 1.35rem; color: var(--cyan); overflow-wrap: anywhere; }
.is-note .contact-channel-value{ color: var(--dim); }
.field-row{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px){
  .contact-layout{ grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .field-row{ grid-template-columns: minmax(0, 1fr); gap: 0; }
}
[data-theme="modern"] .contact-channel{ border: 1px solid var(--panel-line); border-radius: 20px; background: #fff; }
[data-theme="modern"] .contact-channel.is-note{ background: transparent; border: 1.5px dashed #d9d4f0; }
[data-theme="modern"] .contact-channel svg{ border: 0; border-radius: 12px; background: #ede9fe; stroke: var(--m-purple); stroke-linecap: round; stroke-linejoin: round; }
[data-theme="modern"] .contact-channel-label{ font-family: 'Figtree', sans-serif; font-size: 0.8rem; font-weight: 500; color: var(--dim); }
[data-theme="modern"] .contact-channel-value{ font-size: 1.05rem; font-weight: 700; color: var(--ink); }

/* ---------- Log in: Player / Host switch at the top of the form ---------- */
.login-switch{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: -28px -28px 26px;
  border-bottom: 2px solid var(--panel-line);
}
.login-switch a{
  display: flex; align-items: center; justify-content: center;
  height: 54px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  color: var(--dim);
  text-decoration: none;
  background: rgba(0,0,0,0.25);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  position: relative;
  z-index: 1;
}
.login-switch a:hover{ color: var(--cyan); }
.login-switch a[aria-current="page"]{ color: var(--cyan); background: transparent; border-bottom-color: var(--cyan); }
[data-theme="modern"] .login-switch{
  margin: 0 0 24px;
  border: 0;
  background: #f2f0fb;
  border-radius: 999px;
  padding: 4px;
}
[data-theme="modern"] .login-switch a{
  height: 42px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: 'Figtree', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
}
[data-theme="modern"] .login-switch a[aria-current="page"]{ background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(23,20,58,0.15); }

/* ---------- Shop: wallet chip ---------- */
.wallet-chip{
  display: inline-flex; align-items: center; gap: 16px;
  margin-top: 22px;
  padding: 12px 20px 12px 14px;
  border: 2px solid var(--yellow);
  background: rgba(249,248,113,0.08);
  color: var(--cream);
  text-decoration: none;
}
.wallet-chip img{ width: 40px; height: 40px; }
.wallet-chip > span:nth-child(2){ display: flex; flex-direction: column; text-align: left; }
.wallet-label{ font-family: 'Press Start 2P', monospace; font-size: 0.5rem; color: var(--dim); }
.wallet-value{ font-family: 'Press Start 2P', monospace; font-size: 1.05rem; color: var(--yellow); margin-top: 6px; }
.wallet-link{ color: var(--cyan); font-size: 1.2rem; }
[data-theme="modern"] .wallet-chip{
  border: 1px solid var(--panel-line); border-radius: 20px; background: #fff;
  box-shadow: 0 4px 14px rgba(23,20,58,0.05);
}
[data-theme="modern"] .wallet-label{ font-family: 'Figtree', sans-serif; font-size: 0.8rem; font-weight: 500; }
[data-theme="modern"] .wallet-value{ font-family: 'Baloo 2', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--ink); margin-top: 0; line-height: 1.1; }
[data-theme="modern"] .wallet-link{ font-family: 'Figtree', sans-serif; font-size: 0.9rem; font-weight: 700; color: var(--m-purple); }

/* ==========================================================================
   Admin sidebar (admin/_sidebar.php)
   ========================================================================== */
.admin-side{
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 264px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  box-sizing: border-box;
  overflow-y: auto;
  background: #0d0828;
  border-right: 2px solid var(--panel-line);
}
body.admin-app .page{ margin-left: 264px; }

.admin-side-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px; }
.admin-logo{ font-size: 0.72rem; line-height: 1.6; }
.admin-logo-sub{ display: block; font-size: 0.55rem; color: var(--cyan); text-shadow: none; }

.admin-side-body{ display: flex; flex-direction: column; flex: 1; margin-top: 28px; }
.admin-side-links{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-side-links a{
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;
  padding: 0 10px;
  font-size: 1.35rem;
  color: var(--dim);
  text-decoration: none;
}
.admin-side-links a:hover{ color: var(--cyan); }
.admin-side-links a.active{ background: var(--cyan); color: var(--ink); }
.owner-tag{
  margin-left: auto;
  padding: 3px 4px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.42rem;
  color: var(--yellow);
  border: 1px solid var(--yellow);
}
.admin-side-links a.active .owner-tag{ color: var(--ink); border-color: var(--ink); }
.admin-side-head{
  margin: 26px 10px 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: #6f64a3;
}
.cab-status-dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #6f64a3; }
.cab-status-dot.is-live{ background: var(--green); box-shadow: 0 0 8px rgba(57,255,157,0.7); }

.admin-side-foot{
  margin-top: auto;
  padding: 18px 8px 0;
  border-top: 1px dashed var(--panel-line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.admin-side-site{ color: var(--cyan); font-size: 1.25rem; text-decoration: none; }
.admin-side-controls{ display: flex; align-items: center; gap: 10px; }
.admin-side-user{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-side-user .nav-username{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-logout{
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: var(--pink);
  text-decoration: none;
  padding: 12px 0;
}

/* Phones and narrow tablets: the sidebar becomes a top bar, and its links
   drop down from the menu button. */
@media (max-width: 980px){
  body.admin-app .page{ margin-left: 0; }
  .admin-side{
    position: sticky;
    bottom: auto;
    width: auto;
    padding: 12px 16px;
    overflow: visible;
    border-right: 0;
    border-bottom: 2px solid var(--panel-line);
  }
  .admin-side-top{ padding: 0; }
  .admin-side .nav-toggle{ display: flex; }
  .admin-side-body{
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    max-height: calc(100svh - 70px);
    overflow-y: auto;
    margin: 0;
    padding: 16px;
    background: #0d0828;
    border-bottom: 2px solid var(--panel-line);
  }
  .admin-side-body.open{ display: flex; }
  .admin-side-foot{ margin-top: 20px; }
}

[data-theme="modern"] .admin-side{
  background: #fff;
  border-right: 1px solid var(--panel-line);
}
[data-theme="modern"] .admin-logo{ font-size: 1.25rem; }
[data-theme="modern"] .admin-logo-sub{
  font-family: 'Figtree', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-purple);
  -webkit-text-fill-color: currentColor;
}
[data-theme="modern"] .admin-side-links a{
  font-family: 'Figtree', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 10px;
  min-height: 40px;
}
[data-theme="modern"] .admin-side-links a:hover{ color: var(--ink); background: #f7f6fc; }
[data-theme="modern"] .admin-side-links a.active{ background: #f2f0fb; color: var(--ink); font-weight: 600; }
[data-theme="modern"] .owner-tag,
[data-theme="modern"] .admin-side-links a.active .owner-tag{
  font-family: 'Figtree', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border: 0;
  border-radius: 999px;
  color: #92400e;
  background: #fef3c7;
}
[data-theme="modern"] .admin-side-head{
  font-family: 'Figtree', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8a86a8;
}
[data-theme="modern"] .cab-status-dot{ background: #c9c4ea; }
[data-theme="modern"] .cab-status-dot.is-live{ background: #16a34a; box-shadow: none; }
[data-theme="modern"] .admin-side-foot{ border-top: 1px solid #f0eef8; }
[data-theme="modern"] .admin-side-site{ font-family: 'Figtree', sans-serif; font-size: 0.9rem; font-weight: 600; color: var(--m-purple); }
[data-theme="modern"] .admin-logout{ font-family: 'Figtree', sans-serif; font-size: 0.85rem; font-weight: 600; color: #be123c; }
@media (max-width: 980px){
  [data-theme="modern"] .admin-side{ border-right: 0; border-bottom: 1px solid var(--panel-line); }
  [data-theme="modern"] .admin-side-body{ background: #fff; border-bottom: 1px solid var(--panel-line); }
}