
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 200 30% 8%;
    --foreground: 45 20% 90%;

    --card: 195 30% 15%;
    --card-foreground: 45 20% 90%;

    --popover: 195 30% 12%;
    --popover-foreground: 45 20% 90%;

    --primary: 40 80% 55%;
    --primary-foreground: 200 30% 8%;

    --secondary: 185 40% 25%;
    --secondary-foreground: 45 20% 90%;

    --muted: 200 20% 18%;
    --muted-foreground: 200 15% 55%;

    --accent: 40 75% 50%;
    --accent-foreground: 200 30% 8%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 195 25% 25%;
    --input: 195 25% 20%;
    --ring: 40 80% 55%;
    --radius: 1rem;

    --glass-bg: hsla(195, 30%, 20%, 0.12);
    --glass-border: hsla(195, 40%, 50%, 0.2);
    --glass-shadow: 0 8px 32px hsla(0, 0%, 0%, 0.3);
    --gold-glow: 0 0 20px hsla(40, 80%, 55%, 0.4);

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

/* ─── BUG FIX (2026-01) — "whole app scrolls like a webpage" ─────────
   Symptom: on Android (Capacitor APK) the entire viewport — header,
   search bars, navigation chrome — slid up/down as the user dragged,
   exactly as if the document body were a long-form web page. This
   happens because previously html/body used `min-height: 100%` (NOT
   a hard cap) AND body had `padding-bottom: env(safe-area-inset-bottom)`,
   so any time the React tree pushed total content height past the
   viewport by even one pixel, the body itself became scrollable.

   Fix: lock html, body and #root to EXACTLY viewport height and
   forbid overflow there. Per-page layouts (PageLayout, Index, etc.)
   own their own `overflow-y: auto` scroll-port whenever they need
   to scroll — the document body never scrolls.

   `overflow: hidden` on html + body is the most cross-WebView-friendly
   way to disable document-level scrolling (works back to Chromium 49
   on Samsung Internet, the WebView used by older Samsung Tizen
   builds). `100dvh` (dynamic viewport height) is preferred so the
   layout follows the browser-chrome show/hide animation; `100%`
   inherits from html which itself is `100vh`-equivalent — gives us
   a clean fallback on the few WebViews that don't ship `dvh` yet
   (Tizen 4-5 / webOS 4). */
html, body, #root {
  margin: 0;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  /* Pro-app stability: lock out rubber-band overscroll, pull-to-refresh,
     and pinch-zoom. Without these the WebView feels like a "shaky web
     page" — the body can bounce when the user overshoots a grid scroll
     and the entire chrome wobbles. */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply text-foreground;
    font-family: 'Inter', sans-serif;
    background-color: hsl(200 30% 4%);
    /* Nebula cosmic background — fixed so it never scrolls away.
       A slight dark veil on top keeps foreground text readable. */
    background-image:
      linear-gradient(hsla(200, 30%, 4%, 0.55), hsla(200, 30%, 4%, 0.55)),
      url('/images/nebula-bg.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}

/* -----------------------------------------------------------------------
   Spatial Navigation — focus styles applied when users navigate with a
   remote, keyboard arrows or Android TV D-Pad. Adds a glowing ring,
   a subtle scale and slightly stronger border to the focused element.
   Also restores the default browser outline for users who tab naturally
   (a11y) via :focus-visible, but keeps it invisible for mouse clicks.
   ---------------------------------------------------------------------- */
@layer utilities {
  .focusable {
    transition:
      transform 150ms ease-out,
      box-shadow 150ms ease-out,
      border-color 150ms ease-out;
    outline: none;
  }
  .focusable.is-focused,
  .focusable[data-focused="true"] {
    transform: scale(1.05);
    box-shadow:
      0 0 0 2px hsl(var(--primary)),
      0 0 24px 2px hsla(40, 80%, 55%, 0.55),
      0 10px 32px hsla(0, 0%, 0%, 0.55);
    border-color: hsl(var(--primary)) !important;
    z-index: 5;
    position: relative;
  }
  .focusable-tile.is-focused,
  .focusable-tile[data-focused="true"] {
    transform: scale(1.07);
  }
  /* No scale for wide chips (avoid overflow on scroll rows) */
  .focusable-chip.is-focused,
  .focusable-chip[data-focused="true"] {
    transform: scale(1.03);
  }
}

@layer utilities {
  .font-display {
    font-family: 'Cinzel', serif;
  }

  .glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none;
    box-shadow: var(--glass-shadow);
  }

  .glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: none;
    box-shadow: var(--glass-shadow), inset 0 1px 0 hsla(195, 40%, 60%, 0.1);
  }

  .glass-input {
    background: hsla(195, 30%, 20%, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid hsla(195, 40%, 50%, 0.15);
  }

  .gold-glow {
    filter: drop-shadow(0 0 8px hsla(40, 80%, 55%, 0.5));
  }

  .gold-text {
    background: linear-gradient(135deg, hsl(40, 80%, 55%), hsl(35, 70%, 65%), hsl(40, 80%, 55%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}
