/* ============================================================
   Tadaweb TCG — Stylesheet
   Aesthetic: dark futuristic arena, holographic accents
   ============================================================ */

/* ── Screen-reader-only utility (visually hidden, still announced) ── */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── No text selection / drag-image across the game UI ──────────────
   This is a game, not a document — accidental highlights make cards
   look "stuck" and break the tactile feel of drag-to-attach. We
   blanket-disable text selection and image dragging, then re-enable
   selection on the surfaces where it's legitimately useful: input
   fields, textareas, contenteditable regions, the long-form Rules
   page, and anything explicitly marked .selectable. */
html, body{
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
img, video{
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}
input, textarea, [contenteditable="true"], .selectable,
#screen-rules, #screen-rules *{
  user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  -moz-user-select: text;
}

/* ── Reduced-motion support ────────────────────────────────────
   Honor the OS-level preference. Strip animations, transitions, and
   marquees down to instant transitions so the visual chrome stops
   moving but the layout still works. JS-driven effects (starfield,
   particles, dice tumble) check window.PREFERS_REDUCED_MOTION and
   short-circuit themselves — see app.js boot. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  .home-marquee, .home-marquee-inner{ animation: none !important; }
}

/* Card art is photographic / illustrative, not pixel art. The old hints
   (`optimize-contrast` / `crisp-edges`) forced nearest-neighbor-style
   scaling that made downscaled cards on the hand/bench/board look jagged
   and broke small in-card text. Switching to `high-quality` (Chrome/Edge)
   with `auto` fallback gives smooth bicubic-ish downscaling everywhere
   without softening the VS / collection-detail full-size renders. */
img[src^="cards/"],
img[src*="/cards/"]{
  image-rendering: auto;
  image-rendering: high-quality;
}

/* Apply the same quality hint to anything rendering a card-back / card
   image — including the dynamically-created .card-fly elements used by
   the deal animation and the AI's hand-to-zone fly. */
.card-fly img,
.opening-fly img,
.hand-card img,
.bench-slot img,
.active-slot img,
.deck-item img,
.card-tile img,
.builder-card img,
.opp-hand-card img{
  image-rendering: auto;
  image-rendering: high-quality;
  /* Promote each card image to its own compositor layer. Forces the GPU
     to handle the downscale with smooth interpolation instead of falling
     back to a software nearest-neighbor path when scaled via transform. */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Chakra Petch — bundled locally so it works without internet */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/ChakraPetch-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/ChakraPetch-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/ChakraPetch-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/ChakraPetch-700.ttf') format('truetype');
}

:root{
  --bg: #00111A;
  --bg-2: #061a26;
  --bg-3: #0c2735;
  --accent: #34d9c3;
  --accent-dim: #1f8a7a;
  --light: #fafafa;
  --muted: rgba(250,250,250,0.55);
  --danger: #ff5c5c;
  --joy: #ff8c2a;
  --tech: #34d9c3;
  --shadow: #6c4fd9;
  --gold: #ffc857;
  --ex-orange: #ff7a18;
  --ir-purple: #b85cff;
  --line: rgba(52,217,195,0.18);
  --card-radius: 12px;
  --shadow-deep: 0 10px 30px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
  --glow: 0 0 18px rgba(52,217,195,0.35);
}

*{ box-sizing: border-box; margin:0; padding:0; }
em, i, blockquote, cite, address{ font-style: normal; }
html, body{ height: 100%; }

/* ── Material Symbols (Google Icons) ──────────────────────────────
   Tadaweb design system uses Google Icons. Single shared CSS class so
   any element can drop in `<span class="msi">name</span>` and pick up
   the font + variation axes. */
.msi{
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
  user-select: none;
  /* Variation axes — opsz, wght, FILL, GRAD */
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.msi.filled{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
body{
  font-family: 'Chakra Petch', system-ui, sans-serif;
  background: var(--bg);
  color: var(--light);
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(52,217,195,0.08), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(108,79,217,0.08), transparent 50%),
    linear-gradient(180deg, #00111A 0%, #00080d 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ── Hide the browser's main scrollbar ───────────────────────────
   The default vertical scrollbar on <html>/<body> clashes with the
   dark theme and shifts layout when content overflows. Hide it
   everywhere — page scrolling still works via wheel/touch/keyboard.
   Custom scrollbars on inner containers (.builder-grid, .deck-list,
   .collection-list, .log-panel, etc.) are styled per-container with
   their own ::-webkit-scrollbar rules and stay visible. */
html, body{
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE / legacy Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{ width: 0; height: 0; display: none; }

/* When the page is in fullscreen mode (via the Settings → Full Screen
   toggle), hide every scrollbar. The browser viewport is sized to the
   screen exactly, so scrollbars would only show up as visual noise. */
:fullscreen, :fullscreen body{
  overflow: hidden;
}
:fullscreen *::-webkit-scrollbar,
:fullscreen ::-webkit-scrollbar{ display: none; width: 0; height: 0; }
:fullscreen *{ scrollbar-width: none; -ms-overflow-style: none; }
/* Same rules for the webkit-prefixed variant in older Safari. */
:-webkit-full-screen, :-webkit-full-screen body{ overflow: hidden; }
:-webkit-full-screen *::-webkit-scrollbar{ display: none; width: 0; height: 0; }
:-webkit-full-screen *{ scrollbar-width: none; -ms-overflow-style: none; }
body::before{
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px);
  z-index: 1;
}