/* Orbitron (seule police du site) is loaded from index.html's <head> (see
   the comment there) — a CSS @import here would force the browser to fetch
   and parse this whole file before it could even discover the font
   request, adding a full extra render-blocking round-trip. */

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

/* Admin-only aliases keep the control center aligned with the OtakuScouter
   brand without changing the geometry of the player-facing application. */
.admin-console {
  --radius: 0.75rem;
  --sidebar-background: 240 10% 6%;
  --sidebar-foreground: 0 0% 95%;
  --sidebar-primary: 270 80% 50%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 10% 11%;
  --sidebar-accent-foreground: 0 0% 95%;
  --sidebar-border: 240 10% 15%;
  --sidebar-ring: 188 86% 53%;
  background:
    radial-gradient(100% 70% at 50% -10%, hsl(var(--primary) / 0.08), transparent 60%),
    hsl(var(--background));
}

.admin-grid {
  background-image:
    linear-gradient(hsl(var(--primary) / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--primary) / 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
}

/* Legacy managers still use low-contrast zinc utilities. Raise their contrast
   inside the admin only while they are progressively moved to shared tokens. */
.admin-console .text-zinc-500,
.admin-console .text-zinc-600 {
  color: hsl(var(--muted-foreground));
}

@media (max-width: 767px) {
  .admin-console button:not([role="switch"]),
  .admin-console input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-console *,
  .admin-console *::before,
  .admin-console *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   OTAKUSCOUTER - DARK NEON GAMER
   Solo Leveling / SAO System Interface
   ======================================== */

@layer base {
  :root {
    /* OtakuScouter original violet / gold identity, refined for contrast. */
    --background: 240 13% 5.5%;
    --foreground: 0 0% 96%;

    /* Cards - dark with transparency */
    --card: 240 13% 8.5%;
    --card-foreground: 0 0% 96%;

    --popover: 240 14% 10.5%;
    --popover-foreground: 0 0% 96%;

    /* Primary - DEEP VIOLET/PURPLE */
    --primary: 270 84% 59%;
    --primary-foreground: 0 0% 100%;

    /* Secondary - GOLDEN YELLOW (accent partner) */
    --secondary: 45 98% 56%;
    --secondary-foreground: 240 13% 5.5%;

    /* Muted - Dark grays */
    --muted: 240 13% 14%;
    --muted-foreground: 240 5% 58%;

    /* Accent - GOLDEN YELLOW */
    --accent: 45 98% 56%;
    --accent-foreground: 240 13% 5.5%;

    /* Destructive - NEON RED */
    --destructive: 0 82% 58%;
    --destructive-foreground: 0 0% 96%;

    /* Success - NEON GREEN */
    --success: 145 76% 48%;
    --success-foreground: 240 13% 5.5%;

    /* Warning - GOLDEN YELLOW */
    --warning: 45 98% 56%;
    --warning-foreground: 240 13% 5.5%;

    /* Borders - very subtle */
    --border: 240 12% 19%;
    --input: 240 14% 11%;
    --ring: 270 84% 59%;

    --radius: 0.9rem;

    /* Rank Colors */
    --rank-e: 0 0% 50%;
    --rank-d: 145 80% 45%;
    --rank-c: 210 100% 55%;
    --rank-b: 270 80% 55%;
    --rank-a: 45 100% 50%;
    --rank-s: 340 90% 55%;
    --rank-ss: 45 100% 55%;
  }

  .dark {
    --background: 240 13% 5.5%;
    --foreground: 0 0% 96%;
    --card: 240 13% 8.5%;
    --card-foreground: 0 0% 96%;
    --popover: 240 14% 10.5%;
    --popover-foreground: 0 0% 96%;
    --primary: 270 84% 59%;
    --primary-foreground: 0 0% 100%;
    --secondary: 45 98% 56%;
    --secondary-foreground: 240 13% 5.5%;
    --muted: 240 13% 14%;
    --muted-foreground: 240 5% 58%;
    --accent: 45 98% 56%;
    --accent-foreground: 240 13% 5.5%;
    --destructive: 0 82% 58%;
    --destructive-foreground: 0 0% 96%;
    --success: 145 76% 48%;
    --success-foreground: 240 13% 5.5%;
    --warning: 45 98% 56%;
    --warning-foreground: 240 13% 5.5%;
    --border: 240 12% 19%;
    --input: 240 14% 11%;
    --ring: 270 84% 59%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Orbitron', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    /* A layered ink-and-indigo canvas keeps the UI atmospheric even before a
       page-specific backdrop mounts. */
    background:
      radial-gradient(80rem 42rem at 82% -12%, hsl(var(--primary) / 0.14), transparent 58%),
      radial-gradient(58rem 34rem at 8% 104%, hsl(var(--accent) / 0.08), transparent 60%),
      hsl(var(--background));
    -webkit-tap-highlight-color: transparent;
  }

  button,
  a,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: transparent;
  }

  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 3px;
  }

  /* Scrollbar - Neon style */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: hsl(var(--background));
  }

  ::-webkit-scrollbar-thumb {
    background: hsl(var(--primary) / 0.5);
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary));
  }

  /* Hidden scrollbar - keeps scroll behavior but invisible track/thumb */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

/* -------------------------------------------------------------------------
   Shared OtakuScouter atmosphere
   ------------------------------------------------------------------------- */

@layer components {
  /* Collectible-card motion system: tilt, holographic glare and depth. */
  .otaku-card-tilt {
    --card-rx: 0deg;
    --card-ry: 0deg;
    --card-mx: 50%;
    --card-my: 50%;
    isolation: isolate;
    transform: perspective(1100px) rotateX(var(--card-rx)) rotateY(var(--card-ry));
    transform-style: preserve-3d;
    transition: transform 380ms cubic-bezier(.2, .8, .2, 1), box-shadow 380ms ease, border-color 240ms ease;
    will-change: transform;
  }

  .otaku-card-tilt.is-tilting {
    transition: transform 70ms linear, box-shadow 160ms ease, border-color 160ms ease;
  }

  .otaku-card-tilt::before,
  .otaku-card-tilt::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
  }

  .otaku-card-tilt::before {
    z-index: 20;
    opacity: 0;
    border: 1px solid color-mix(in srgb, var(--card-accent, #c084fc) 75%, white 25%);
    background:
      radial-gradient(circle at var(--card-mx) var(--card-my), rgba(255, 255, 255, .28), transparent 24%),
      linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--card-accent, #c084fc) 28%, transparent) 46%, rgba(255, 255, 255, .2) 50%, transparent 58%);
    mix-blend-mode: screen;
    transition: opacity 260ms ease;
  }

  .otaku-card-tilt::after {
    z-index: 19;
    opacity: 0;
    background: repeating-linear-gradient(112deg, transparent 0 7px, rgba(255, 255, 255, .05) 8px, transparent 10px);
    mix-blend-mode: overlay;
    transform: translateZ(1px);
    transition: opacity 260ms ease;
  }

  .otaku-card-tilt:hover {
    box-shadow: 0 18px 38px rgba(0, 0, 0, .32), 0 0 28px color-mix(in srgb, var(--card-accent, #c084fc) 30%, transparent);
  }

  .otaku-card-tilt:hover::before,
  .otaku-card-tilt:hover::after,
  .otaku-card-tilt:focus-visible::before,
  .otaku-card-tilt:focus-visible::after {
    opacity: 1;
  }

  .otaku-card-tilt__media {
    transform: translateZ(18px);
    transform-style: preserve-3d;
  }

  .otaku-card-tilt__media img {
    transition: transform 650ms cubic-bezier(.2, .8, .2, 1), filter 350ms ease;
  }

  .otaku-card-tilt:hover .otaku-card-tilt__media img,
  .otaku-card-tilt:focus-visible .otaku-card-tilt__media img {
    transform: scale(1.08);
    filter: saturate(1.12) contrast(1.05);
  }

  /* Living collectible card. The sweep, prism and seal are deliberately
     CSS-driven so a collection can animate without React state per card. */
  .otaku-card-showcase {
    --card-rarity: #c084fc;
    isolation: isolate;
    transform-style: preserve-3d;
  }

  .otaku-card-showcase::before,
  .otaku-card-showcase::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
  }

  .otaku-card-showcase::before {
    z-index: 31;
    padding: 1px;
    background: conic-gradient(from 0deg, transparent 0deg, var(--card-rarity) 70deg, rgba(255,255,255,.85) 105deg, transparent 150deg, var(--card-rarity) 235deg, transparent 300deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .85;
    animation: otaku-card-rarity-ring 4.5s linear infinite;
  }

  .otaku-card-showcase::after {
    z-index: 30;
    background:
      radial-gradient(circle at 22% 18%, rgba(255,255,255,.34), transparent 18%),
      linear-gradient(115deg, transparent 24%, rgba(255,255,255,.2) 44%, transparent 55%),
      repeating-linear-gradient(120deg, transparent 0 9px, rgba(255,255,255,.055) 10px, transparent 12px);
    background-size: auto, 230% 100%, auto;
    mix-blend-mode: screen;
    opacity: .62;
    animation: otaku-card-foil-sweep 4.8s cubic-bezier(.2,.7,.2,1) infinite;
  }

  .otaku-card-showcase__foil,
  .otaku-card-showcase__scan,
  .otaku-card-showcase__spark {
    position: absolute;
    pointer-events: none;
  }

  .otaku-card-showcase__foil {
    z-index: 29;
    inset: 0;
    background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.48) 48%, transparent 61%);
    background-size: 220% 100%;
    mix-blend-mode: screen;
    animation: otaku-card-foil-sweep 3.6s ease-in-out infinite;
  }

  .otaku-card-showcase__scan {
    z-index: 32;
    inset: 0;
    opacity: .32;
    background: repeating-linear-gradient(to bottom, transparent 0 7px, rgba(255,255,255,.08) 8px, transparent 10px);
    mask-image: linear-gradient(to bottom, transparent, black 22%, black 78%, transparent);
    animation: otaku-card-scan 2.8s linear infinite;
  }

  .otaku-card-showcase__spark {
    z-index: 33;
    right: 12%;
    top: 15%;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: white;
    box-shadow: 0 0 12px 4px var(--card-rarity);
    animation: otaku-card-spark 2.4s ease-in-out infinite;
  }

  .otaku-card-showcase[data-rarity="RARE"] { --card-rarity: #38bdf8; }
  .otaku-card-showcase[data-rarity="EPIQUE"] { --card-rarity: #a855f7; }
  .otaku-card-showcase[data-rarity="LEGENDARY"] { --card-rarity: #fbbf24; }
  .otaku-card-showcase[data-rarity="MYTHIQUE"] { --card-rarity: #f472b6; }
  .otaku-card-showcase[data-rarity="EQUIPE"] { --card-rarity: #34d399; }

  .otaku-card-reveal {
    animation: otaku-card-reveal-in .95s cubic-bezier(.16,1,.3,1) both;
  }

  .otaku-card-reveal::after {
    animation-duration: 1.3s;
    animation-iteration-count: 1;
  }

  /* Reveal cards use the available viewport instead of the old thumbnail
     dimensions, while staying bounded so the CTA remains visible on mobile. */
  .os-reveal-card {
    width: min(21rem, 31vw);
    height: auto;
    aspect-ratio: 3 / 4;
    min-height: 0;
  }
  .os-reveal-card__media {
    height: 60%;
    min-height: 14rem;
  }
  .os-reveal-card__media img {
    object-position: center 18%;
  }

  /* Character artwork is portrait-oriented and the focal point is usually
     above the vertical centre. Keep faces in frame instead of letting
     object-cover crop them away. */
  .otaku-character-image {
    object-position: center 18% !important;
  }

  @keyframes otaku-card-rarity-ring {
    to { transform: rotate(360deg); }
  }

  @keyframes otaku-card-foil-sweep {
    0%, 22% { background-position: -130% 0; }
    55%, 72% { background-position: 130% 0; }
    100% { background-position: 130% 0; }
  }

  @keyframes otaku-card-scan {
    from { transform: translateY(-12%); }
    to { transform: translateY(12%); }
  }

  @keyframes otaku-card-spark {
    0%, 100% { transform: scale(.65); opacity: .35; }
    50% { transform: scale(1.4); opacity: 1; }
  }

  @keyframes otaku-card-reveal-in {
    0% { opacity: 0; transform: perspective(1000px) rotateY(-90deg) rotateZ(-5deg) scale(.7); }
    62% { opacity: 1; transform: perspective(1000px) rotateY(10deg) rotateZ(1deg) scale(1.04); }
    100% { opacity: 1; transform: perspective(1000px) rotateY(0deg) rotateZ(0deg) scale(1); }
  }

  /* Touch devices have no hover state, so the foil has a slow autonomous
     sweep and a barely-there lift instead of looking like a static card. */
  @media (pointer: coarse) {
    .otaku-card-tilt {
      animation: otaku-card-float 5.5s ease-in-out infinite;
    }

    .otaku-card-tilt::before {
      opacity: .55;
      background-size: 100% 100%, 240% 100%;
      background-position: 50% 0, -120% 0;
      animation: otaku-card-foil 4.2s ease-in-out infinite;
    }

    .otaku-card-tilt::after {
      opacity: .35;
    }
  }

  @keyframes otaku-card-float {
    0%, 100% { transform: perspective(1100px) rotateX(0deg) rotateY(0deg) translateY(0); }
    50% { transform: perspective(1100px) rotateX(.8deg) rotateY(-.8deg) translateY(-2px); }
  }

  @keyframes otaku-card-foil {
    0%, 100% { background-position: -120% 0, 0 0; }
    48%, 62% { background-position: 120% 0, 0 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .otaku-card-tilt,
    .otaku-card-tilt.is-tilting,
    .otaku-card-tilt__media img {
      transition: none;
      transform: none;
      will-change: auto;
      animation: none;
    }

    .otaku-card-tilt::before,
    .otaku-card-tilt::after {
      display: none;
    }

    .otaku-card-showcase::before,
    .otaku-card-showcase::after,
    .otaku-card-showcase__foil,
    .otaku-card-showcase__scan,
    .otaku-card-showcase__spark,
    .otaku-card-reveal {
      animation: none;
    }
  }

  /* OtakuScouter booster identity: a foil/scouter hybrid instead of a generic
     summon button. The pack is deliberately CSS-only so it stays crisp on
     mobile and does not add another image dependency to the opening flow. */
  .os-booster-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, .2);
    border-radius: 1.25rem;
    padding: 1.1rem;
    background:
      radial-gradient(circle at 88% 0%, rgba(34, 211, 238, .15), transparent 30%),
      radial-gradient(circle at 10% 90%, rgba(168, 85, 247, .2), transparent 36%),
      linear-gradient(145deg, rgba(19, 23, 44, .96), rgba(8, 8, 18, .97));
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 18px 55px rgba(8, 8, 18, .34);
  }

  .os-booster-panel__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .33;
    background-image: linear-gradient(rgba(125, 211, 252, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(125, 211, 252, .05) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
  }

  .os-live-dot {
    width: .42rem;
    height: .42rem;
    border-radius: 999px;
    background: #67e8f9;
    box-shadow: 0 0 0 3px rgba(103, 232, 249, .13), 0 0 14px #67e8f9;
    animation: os-live-pulse 1.8s ease-in-out infinite;
  }

  .os-booster-option {
    isolation: isolate;
    border-color: rgba(255,255,255,.12);
    background: linear-gradient(120deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
    box-shadow: inset 0 1px rgba(255,255,255,.08);
  }
  .os-booster-option::before {
    content: "";
    position: absolute;
    inset: .45rem;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--booster-accent) 28%, transparent);
    border-radius: 1rem;
    opacity: .55;
  }
  .os-booster-option::after {
    content: "";
    position: absolute;
    right: -3rem;
    top: -4rem;
    width: 10rem;
    height: 10rem;
    pointer-events: none;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--booster-accent) 22%, transparent), transparent 68%);
    opacity: .65;
  }

  .os-booster-option--single { --booster-accent: #a78bfa; }
  .os-booster-option--box { --booster-accent: #fbbf24; border-color: rgba(251,191,36,.3); background: linear-gradient(120deg, rgba(245,158,11,.22), rgba(127,29,29,.18)); }
  .os-booster-option:hover:not(:disabled) { border-color: var(--booster-accent); box-shadow: 0 12px 35px color-mix(in srgb, var(--booster-accent) 20%, transparent), inset 0 1px rgba(255,255,255,.14); }

  .os-booster-pack {
    position: relative;
    width: 4.8rem;
    height: 6.25rem;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: .75rem .75rem 1rem 1rem;
    transform: perspective(600px) rotateY(-12deg) rotateZ(-2deg);
    background:
      radial-gradient(circle at 50% 38%, rgba(255,255,255,.28), transparent 28%),
      linear-gradient(155deg, #7c3aed, #24114e 55%, #0e172d);
    box-shadow: 0 14px 28px rgba(0,0,0,.42), inset 0 0 24px rgba(167,139,250,.58), inset 0 1px rgba(255,255,255,.7);
  }

  .os-booster-pack::before { content: ""; position: absolute; left: .55rem; right: .55rem; top: 1.42rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); box-shadow: 0 3.35rem rgba(255,255,255,.28), 0 4.55rem rgba(255,255,255,.18); }
  .os-booster-pack::after { content: ""; position: absolute; inset: .28rem; border: 1px solid rgba(255,255,255,.2); border-radius: .55rem .55rem .8rem .8rem; pointer-events: none; }
  .os-booster-pack--box { background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.28), transparent 28%), linear-gradient(155deg, #f59e0b, #8a2415 56%, #351022); box-shadow: 0 14px 28px rgba(0,0,0,.42), inset 0 0 24px rgba(251,191,36,.68), inset 0 1px rgba(255,255,255,.7); }
  .os-booster-pack__foil { position: absolute; inset: 0; opacity: .65; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.48) 45%, transparent 63%); background-size: 220% 100%; animation: os-pack-foil 3.8s ease-in-out infinite; mix-blend-mode: screen; }
  .os-booster-pack__topline, .os-booster-pack__bottomline { position: absolute; left: .35rem; right: .35rem; z-index: 2; font-size: .42rem; font-weight: 900; letter-spacing: .15em; text-align: center; color: rgba(255,255,255,.86); }
  .os-booster-pack__topline { top: .55rem; }
  .os-booster-pack__bottomline { bottom: .42rem; font-size: .31rem; color: rgba(255,255,255,.58); }
  .os-booster-pack__logo { position: absolute; z-index: 2; left: 50%; top: 1.65rem; transform: translateX(-50%); font-family: 'Orbitron', sans-serif; font-size: 2.1rem; font-weight: 950; letter-spacing: -.18em; color: #fff; text-shadow: 0 0 9px rgba(255,255,255,.9), 0 0 24px var(--booster-accent, #a78bfa); }
  .os-booster-pack__title { position: absolute; z-index: 2; left: 0; right: 0; top: 3.45rem; text-align: center; font-size: .45rem; font-weight: 900; letter-spacing: .13em; color: rgba(255,255,255,.94); }
  .os-booster-pack__edition { position: absolute; z-index: 2; left: 50%; top: 4.02rem; transform: translateX(-50%); color: rgba(255,255,255,.65); font-size: .31rem; font-weight: 800; letter-spacing: .2em; white-space: nowrap; }
  .os-booster-pack__rays { position: absolute; inset: 1.9rem .3rem 1.55rem; opacity: .4; background: repeating-conic-gradient(from 0deg, transparent 0deg 12deg, rgba(255,255,255,.36) 13deg 15deg, transparent 16deg 27deg); animation: os-pack-rays 10s linear infinite; }
  .os-booster-pack__seal { position: absolute; z-index: 3; left: 50%; bottom: 1.05rem; width: 1.28rem; height: 1.28rem; display: grid; place-items: center; transform: translateX(-50%) rotate(-8deg); border: 1px solid rgba(255,255,255,.72); border-radius: 999px; background: rgba(8,8,18,.72); box-shadow: 0 0 16px var(--booster-accent, #a78bfa), inset 0 0 8px rgba(255,255,255,.16); }
  .os-booster-pack__seal span { font-size: .38rem; font-weight: 950; color: #fff; }

  .os-opening-pack {
    --opening-accent: #67e8f9;
    position: relative;
    width: min(21rem, 31vw);
    height: auto;
    aspect-ratio: 5 / 7;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 1rem 1rem 1.2rem 1.2rem;
    background: radial-gradient(circle at 50% 46%, rgba(255,255,255,.22), transparent 30%), linear-gradient(155deg, #4c1d95, #111b46 53%, #07131f);
    box-shadow: 0 28px 80px rgba(34, 211, 238, .18), inset 0 0 42px rgba(103,232,249,.4), inset 0 1px rgba(255,255,255,.65);
    transform: perspective(900px) rotateY(-10deg) rotateZ(-2deg);
  }

  .os-opening-pack::before, .os-opening-pack::after { content: ""; position: absolute; left: .7rem; right: .7rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); }
  .os-opening-pack::before { top: 1.15rem; }
  .os-opening-pack::after { bottom: 1.5rem; }
  .os-opening-pack--tear { box-shadow: 0 0 75px rgba(103,232,249,.75), 0 28px 80px rgba(34, 211, 238, .18), inset 0 0 42px rgba(103,232,249,.72); }
  .os-opening-pack__foil { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.5) 45%, transparent 62%); background-size: 240% 100%; mix-blend-mode: screen; animation: os-pack-foil 2.8s ease-in-out infinite; }
  .os-opening-pack__scanline { position: absolute; inset: 0; opacity: .36; background: repeating-linear-gradient(to bottom, transparent 0 9px, rgba(255,255,255,.1) 10px, transparent 12px); mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); animation: os-opening-scan 1.8s linear infinite; }
  .os-opening-pack__topline, .os-opening-pack__bottomline { position: absolute; left: 1rem; right: 1rem; z-index: 2; text-align: center; font-size: .47rem; font-weight: 950; letter-spacing: .2em; color: rgba(255,255,255,.8); }
  .os-opening-pack__topline { top: 1.75rem; }
  .os-opening-pack__bottomline { bottom: 2.2rem; font-size: .4rem; color: rgba(255,255,255,.55); }
  .os-opening-pack__logo { position: absolute; z-index: 2; left: 50%; top: 6.7rem; transform: translateX(-50%); font-family: 'Orbitron', sans-serif; font-size: 6rem; line-height: 1; font-weight: 950; letter-spacing: -.22em; color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.9), 0 0 38px var(--opening-accent); }
  .os-opening-pack__title { position: absolute; z-index: 2; left: 0; right: 0; top: 13.5rem; text-align: center; font-size: .78rem; font-weight: 950; letter-spacing: .22em; color: rgba(255,255,255,.9); }
  .os-opening-pack__rays { position: absolute; inset: 6.2rem 1rem 5rem; opacity: .38; background: repeating-conic-gradient(from 0deg, transparent 0deg 10deg, rgba(103,232,249,.55) 11deg 13deg, transparent 14deg 26deg); animation: os-pack-rays 12s linear infinite; }
  .os-opening-pack__seal { position: absolute; z-index: 3; left: 50%; bottom: 4.1rem; width: 2.8rem; height: 2.8rem; display: grid; place-items: center; transform: translateX(-50%) rotate(-8deg); border: 1px solid rgba(255,255,255,.7); border-radius: 999px; background: rgba(8,8,18,.68); box-shadow: 0 0 22px var(--opening-accent); }
  .os-opening-pack__seal span { font-size: .42rem; font-weight: 950; color: #fff; letter-spacing: .05em; }

  /* Premium card back: indigo Japanese textile, antique-gold frame and a
     purple OS medallion based on the supplied reference. */
  .os-opening-card-back,
  .os-card-back {
    overflow: hidden;
    isolation: isolate;
    border-radius: 1.35rem !important;
    clip-path: inset(0 round 1.35rem);
    border: 2px solid #c49a57;
    background:
      radial-gradient(circle at 50% 42%, rgba(119, 74, 177, .3), transparent 24%),
      repeating-radial-gradient(ellipse at 50% 100%, transparent 0 7px, rgba(157, 128, 193, .23) 8px 9px, transparent 10px 18px) 0 0 / 42px 25px,
      repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 12px),
      linear-gradient(145deg, #21182d, #100d1c 58%, #1a1026);
    box-shadow:
      0 0 0 3px rgba(78, 48, 39, .8),
      0 0 0 5px rgba(205, 159, 84, .45),
      0 24px 70px rgba(0, 0, 0, .58),
      inset 0 0 34px rgba(183, 129, 56, .25),
      inset 0 0 80px rgba(84, 41, 118, .28);
    backface-visibility: hidden;
  }
  .os-opening-card-back { position: relative; display: block; width: min(21rem, 31vw); aspect-ratio: 3 / 4; }
  .os-card-back { position: absolute; inset: 0; }
  .os-card-flip,
  .os-card-stack__item { border-radius: 1.35rem !important; }
  .os-card-back::before,
  .os-opening-card-back::before {
    content: "";
    position: absolute;
    inset: .48rem;
    z-index: 3;
    pointer-events: none;
    border: 2px solid rgba(215, 174, 99, .9);
    border-radius: .72rem;
    box-shadow:
      inset 0 0 0 2px rgba(80, 49, 37, .85),
      inset 0 0 0 4px rgba(224, 184, 102, .34),
      0 0 15px rgba(205, 159, 84, .24);
  }
  .os-card-back::after,
  .os-opening-card-back::after {
    content: "";
    position: absolute;
    inset: 1rem;
    z-index: 1;
    pointer-events: none;
    border: 1px solid rgba(205, 159, 84, .42);
    border-radius: .4rem;
    background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(218, 179, 105, .045) 8px 9px);
  }
  .os-opening-card-back__grid,
  .os-card-back__grid {
    position: absolute;
    inset: .95rem;
    z-index: 0;
    border: 1px solid rgba(211, 169, 92, .42);
    border-radius: .45rem;
    background:
      repeating-radial-gradient(ellipse at 50% 100%, transparent 0 7px, rgba(151, 119, 187, .2) 8px 9px, transparent 10px 18px) 0 0 / 38px 24px,
      repeating-linear-gradient(45deg, transparent 0 9px, rgba(128, 103, 161, .08) 10px 11px, transparent 12px 20px),
      linear-gradient(180deg, rgba(255,255,255,.02), rgba(26, 15, 38, .18));
    box-shadow: inset 0 0 30px rgba(11, 7, 22, .62), inset 0 0 0 1px rgba(242, 211, 143, .12);
  }
  .os-opening-card-back__grid::after,
  .os-card-back__grid::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .32;
    background: repeating-linear-gradient(135deg, transparent 0 17px, rgba(195, 155, 83, .14) 18px 19px, transparent 20px 36px);
  }
  .os-opening-card-back__rings,
  .os-card-back__rings {
    position: absolute;
    left: 50%;
    top: 43%;
    z-index: 2;
    width: 64%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(225, 183, 99, .86);
    border-radius: 999px;
    background:
      repeating-radial-gradient(circle, transparent 0 10px, rgba(232, 193, 111, .3) 11px 13px, transparent 14px 21px),
      radial-gradient(circle, rgba(71, 38, 59, .92), rgba(38, 22, 42, .98));
    box-shadow:
      0 0 0 5px rgba(77, 44, 44, .9),
      0 0 0 7px rgba(211, 163, 79, .72),
      0 0 30px rgba(213, 160, 76, .34),
      inset 0 0 0 2px rgba(60, 34, 38, .9),
      inset 0 0 24px rgba(236, 194, 103, .25);
    animation: os-card-ring 12s linear infinite;
  }
  .os-opening-card-back__rings::before,
  .os-card-back__rings::before {
    content: "";
    position: absolute;
    inset: 9%;
    border: 2px solid rgba(224, 181, 94, .9);
    border-radius: 999px;
    background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 6px, rgba(234, 193, 108, .4) 7px 8px, transparent 9px 15px);
    box-shadow: inset 0 0 0 4px rgba(80, 45, 36, .8), inset 0 0 20px rgba(239, 192, 95, .28);
  }
  .os-opening-card-back__rings::after,
  .os-card-back__rings::after {
    content: "";
    position: absolute;
    inset: 25%;
    border: 2px solid rgba(231, 190, 103, .86);
    border-radius: 999px;
    background: radial-gradient(circle at 35% 25%, #7d54a6, #43235f 55%, #241733);
    box-shadow: 0 0 0 4px rgba(72, 38, 37, .8), 0 0 20px rgba(141, 91, 188, .5), inset 0 0 16px rgba(255, 223, 142, .22);
  }
  .os-opening-card-back__seal,
  .os-card-back__mark {
    position: absolute !important;
    left: 50%;
    top: 43%;
    z-index: 5;
    display: grid;
    width: 5.1rem;
    height: 5.1rem;
    place-items: center;
    transform: translate(-50%, -50%) !important;
    border: 2px solid #edcb7e;
    border-radius: 999px;
    background: radial-gradient(circle at 32% 22%, #a875d2, #5e318a 52%, #28183b 100%);
    color: #f2d487;
    font-family: 'Orbitron', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -.18em;
    text-indent: -.18em;
    text-shadow: 0 1px 0 #4b2e24, 0 0 12px rgba(255, 226, 142, .45);
    box-shadow: 0 0 0 4px rgba(77, 44, 42, .8), 0 0 0 6px rgba(222, 177, 91, .75), inset 0 0 18px rgba(255, 237, 177, .28), 0 0 24px rgba(141, 91, 188, .55);
  }
  .os-opening-card-back__chip,
  .os-card-back__chip {
    position: absolute;
    top: 67%;
    left: 50%;
    z-index: 5;
    margin: 0;
    transform: translateX(-50%);
    color: rgba(240, 207, 131, .75);
    font-family: 'Orbitron', sans-serif;
    font-size: .4rem;
    font-weight: 900;
    letter-spacing: .2em;
    white-space: nowrap;
  }
  .os-opening-card-back__label {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    z-index: 5;
    margin: 0;
    color: rgba(242, 211, 143, .72);
    font-size: .42rem;
    font-weight: 900;
    letter-spacing: .32em;
    text-align: center;
  }

  /* Real paper-tear construction: both pieces carry their own foil and
     packaging print, then separate from the ragged seam in opposite vectors. */
  .os-opening-pack__tear-pieces {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
  }
  /* The x10 animation now uses the same premium 5:7 format as the single reveal. */
  .os-opening-pack__tear-pieces--mini { transform: none; }
  .os-opening-pack__tear-piece {
    position: absolute;
    left: -.08rem;
    width: calc(100% + .16rem);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.66);
    background:
      radial-gradient(circle at 50% 34%, rgba(255,255,255,.28), transparent 28%),
      repeating-linear-gradient(112deg, rgba(255,255,255,.04) 0 2px, transparent 2px 7px),
      linear-gradient(155deg, #5b21b6, #24114e 55%, #0e172d);
    box-shadow: 0 0 32px rgba(103,232,249,.5), inset 0 0 34px rgba(167,139,250,.55);
  }
  .os-opening-pack__tear-piece--box {
    background:
      radial-gradient(circle at 50% 34%, rgba(255,255,255,.3), transparent 28%),
      repeating-linear-gradient(112deg, rgba(255,255,255,.04) 0 2px, transparent 2px 7px),
      linear-gradient(155deg, #f59e0b, #8a2415 56%, #351022);
    box-shadow: 0 0 32px rgba(251,191,36,.62), inset 0 0 34px rgba(251,191,36,.6);
  }
  .os-opening-pack__tear-piece--top {
    top: -.08rem;
    height: 56%;
    clip-path: polygon(0 0, 100% 0, 100% 87%, 92% 92%, 83% 87%, 73% 96%, 61% 88%, 50% 94%, 38% 86%, 27% 95%, 15% 88%, 0 93%);
  }
  .os-opening-pack__tear-piece--bottom {
    bottom: -.08rem;
    height: 56%;
    clip-path: polygon(0 7%, 15% 12%, 27% 5%, 38% 14%, 50% 6%, 61% 12%, 73% 4%, 83% 13%, 92% 7%, 100% 12%, 100% 100%, 0 100%);
  }
  .os-opening-pack__tear-piece-foil {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 15%, rgba(255,255,255,.62) 46%, transparent 64%);
    background-size: 240% 100%;
    mix-blend-mode: screen;
    animation: os-pack-foil .6s ease-out both;
  }
  .os-opening-pack__tear-piece-topline,
  .os-opening-pack__tear-piece-bottomline,
  .os-opening-pack__tear-piece-title,
  .os-opening-pack__tear-piece-edition,
  .os-opening-pack__tear-piece-logo,
  .os-opening-pack__tear-piece-seal { position: absolute; z-index: 2; text-align: center; color: rgba(255,255,255,.9); }
  .os-opening-pack__tear-piece-topline { top: 1.2rem; left: 1rem; right: 1rem; font-size: .46rem; font-weight: 950; letter-spacing: .2em; }
  .os-opening-pack__tear-piece-logo { top: 4.1rem; left: 0; right: 0; font-family: 'Orbitron', sans-serif; font-size: 4rem; font-weight: 950; letter-spacing: -.2em; text-shadow: 0 0 16px #fff, 0 0 36px #67e8f9; }
  .os-opening-pack__tear-piece-title { top: 8.6rem; left: 0; right: 0; font-size: .6rem; font-weight: 950; letter-spacing: .24em; }
  .os-opening-pack__tear-piece-edition { top: 1.9rem; left: 0; right: 0; font-size: .43rem; font-weight: 900; letter-spacing: .28em; color: rgba(255,255,255,.68); }
  .os-opening-pack__tear-piece-seal { bottom: 2.3rem; left: 50%; display: grid; width: 2.4rem; height: 2.4rem; place-items: center; transform: translateX(-50%) rotate(-8deg); border: 1px solid rgba(255,255,255,.75); border-radius: 999px; background: rgba(8,8,18,.68); box-shadow: 0 0 24px rgba(255,255,255,.4); font-size: .5rem; font-weight: 950; }
  .os-opening-pack__tear-piece-bottomline { right: 1rem; bottom: 1.25rem; left: 1rem; font-size: .38rem; font-weight: 900; letter-spacing: .18em; color: rgba(255,255,255,.62); }
  .os-opening-pack__tear-flash { position: absolute; left: 3%; top: 48%; z-index: 24; width: 94%; height: 4px; border-radius: 999px; background: linear-gradient(90deg, transparent, #fff 20%, #67e8f9 50%, #fff 80%, transparent); box-shadow: 0 0 20px 6px rgba(103,232,249,.9); }

  @keyframes os-card-ring { to { transform: rotate(360deg); } }

  /* Opening stage inspired by the reference rhythm: quiet dark field,
     then the card back gets the spotlight before the face is revealed. */
  .os-opening-stage {
    isolation: isolate;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 46%, rgba(124, 58, 237, .12), transparent 23%),
      radial-gradient(circle at 50% 52%, rgba(8, 8, 18, .2), rgba(8, 8, 18, .94) 72%),
      #07070c;
  }
  .os-opening-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .2;
    background-image:
      linear-gradient(rgba(167,139,250,.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(103,232,249,.1) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: radial-gradient(circle at 50% 48%, black, transparent 68%);
  }
  .os-opening-stage::after {
    content: "";
    position: absolute;
    inset: 10% 18%;
    pointer-events: none;
    z-index: -1;
    opacity: .18;
    border: 1px solid rgba(255,255,255,.14);
    clip-path: polygon(50% 0, 100% 28%, 86% 100%, 14% 100%, 0 28%);
    box-shadow: 0 0 90px rgba(124,58,237,.18), inset 0 0 90px rgba(103,232,249,.08);
  }

  /* Selection focus: the gallery stays present, but the selected card owns
     the scene.  The backdrop filter is deliberately on the modal layer so
     the card and its power panel remain perfectly sharp. */
  .os-card-focus-backdrop {
    background: linear-gradient(135deg, rgba(4, 4, 12, .9), rgba(12, 6, 28, .84));
    backdrop-filter: blur(22px) saturate(.62) brightness(.64);
    -webkit-backdrop-filter: blur(22px) saturate(.62) brightness(.64);
  }
  .os-card-focus-panel {
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 1.25rem;
    background: linear-gradient(145deg, rgba(23, 17, 42, .82), rgba(6, 7, 17, .76));
    box-shadow: 0 24px 90px rgba(0, 0, 0, .52), 0 0 60px rgba(124, 58, 237, .2), inset 0 1px rgba(255, 255, 255, .08);
  }
  .os-card-focus-power {
    border: 1px solid rgba(103, 232, 249, .2);
    border-radius: .9rem;
    background: linear-gradient(135deg, rgba(11, 31, 50, .72), rgba(31, 12, 57, .7));
    box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 10px 32px rgba(8, 16, 34, .26);
  }

  .os-card-stack {
    position: relative;
    width: min(21rem, 72vw);
    aspect-ratio: 3 / 4;
    perspective: 1400px;
  }
  .os-card-stack__item {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
  }

  .os-opening-card-back__corners,
  .os-card-back__corners { position: absolute; inset: .72rem; z-index: 4; pointer-events: none; }
  .os-opening-card-back__corners span,
  .os-card-back__corners span { position: absolute; width: 1.65rem; height: 1.65rem; border: 2px solid rgba(224,181,94,.95); border-radius: .48rem; background: linear-gradient(135deg, rgba(228,186,99,.4), rgba(65,39,38,.7)); box-shadow: 0 0 12px rgba(214,166,78,.38), inset 0 0 0 2px rgba(75,43,35,.75); transform: rotate(45deg); }
  .os-opening-card-back__corners span:nth-child(1), .os-card-back__corners span:nth-child(1) { top: 0; left: 0; }
  .os-opening-card-back__corners span:nth-child(2), .os-card-back__corners span:nth-child(2) { top: 0; right: 0; }
  .os-opening-card-back__corners span:nth-child(3), .os-card-back__corners span:nth-child(3) { right: 0; bottom: 0; }
  .os-opening-card-back__corners span:nth-child(4), .os-card-back__corners span:nth-child(4) { bottom: 0; left: 0; }

  @keyframes os-opening-scan { from { transform: translateY(-18%); } to { transform: translateY(18%); } }

  @keyframes os-live-pulse { 0%, 100% { opacity: .55; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
  @keyframes os-pack-foil { 0%, 20% { background-position: -140% 0; } 60%, 78% { background-position: 140% 0; } 100% { background-position: 140% 0; } }
  @keyframes os-pack-rays { to { transform: rotate(360deg); } }

  @media (max-width: 640px) {
    .os-booster-panel { padding: .9rem; border-radius: 1rem; }
    .os-booster-option { min-height: 128px; padding: .8rem; }
    .os-booster-pack { width: 4.15rem; height: 5.4rem; }
    .os-booster-pack__topline { top: .44rem; font-size: .35rem; }
    .os-booster-pack__logo { top: 1.42rem; font-size: 1.8rem; }
    .os-booster-pack__title { top: 3rem; font-size: .37rem; }
    .os-booster-pack__edition { top: 3.48rem; font-size: .27rem; }
    .os-booster-pack__seal { bottom: .9rem; width: 1.1rem; height: 1.1rem; }
    .os-opening-pack { width: min(18rem, 78vw); height: auto; }
    .os-opening-pack__logo { top: 5.35rem; font-size: 5rem; }
    .os-opening-pack__title { top: 10.8rem; font-size: .62rem; }
    .os-opening-pack__topline { top: 1.35rem; font-size: .38rem; }
    .os-opening-pack__bottomline { bottom: 1.8rem; font-size: .32rem; }
    .os-opening-pack__seal { bottom: 3.25rem; width: 2.35rem; height: 2.35rem; }
    .os-opening-card-back { width: min(18rem, 78vw); }
    .os-card-stack { width: min(18rem, 78vw); }
    .os-opening-card-back__seal { width: 5.1rem; height: 5.1rem; font-size: 1.65rem; }
    .os-opening-card-back__chip, .os-card-back__chip { margin: 0; font-size: .33rem; }
    .os-opening-card-back__grid::after, .os-card-back__grid::after { font-size: .36rem; letter-spacing: .16em; }
    .os-opening-pack__tear-piece-topline { top: .95rem; font-size: .36rem; }
    .os-opening-pack__tear-piece-logo { top: 3.35rem; font-size: 3.35rem; }
    .os-opening-pack__tear-piece-title { top: 7.2rem; font-size: .48rem; }
    .os-opening-pack__tear-piece-edition { top: 1.55rem; font-size: .35rem; }
    .os-opening-pack__tear-piece-seal { bottom: 1.75rem; width: 1.9rem; height: 1.9rem; font-size: .42rem; }
    .os-opening-pack__tear-piece-bottomline { right: .7rem; bottom: .95rem; left: .7rem; font-size: .29rem; }
    .os-reveal-card { width: min(18rem, 78vw); height: auto; aspect-ratio: 3 / 4; min-height: 0; }
    .os-reveal-card__media { height: 58%; min-height: 12rem; }
    .os-card-back__mark { font-size: 3.2rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .os-live-dot, .os-booster-pack, .os-booster-pack__foil, .os-booster-pack__rays, .os-opening-pack__foil, .os-opening-pack__scanline, .os-opening-pack__rays { animation: none; }
  }

  /* Shared reward reveal — a compact Kyara-inspired scan, foil and burst
     language reused by every reward-producing flow (contracts, quizzes,
     chests, referrals and login rewards). */
  .otaku-vfx-backdrop {
    background:
      radial-gradient(circle at 50% 50%, rgba(124, 58, 237, .2), transparent 25%),
      radial-gradient(circle at 50% 50%, rgba(8, 8, 18, .35), rgba(8, 8, 18, .82) 62%, rgba(8, 8, 18, .94));
  }

  .otaku-vfx-rays {
    pointer-events: none;
    animation: otaku-vfx-spin 14s linear infinite;
    opacity: .6;
  }

  .otaku-vfx-ray {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 50%;
    transform-origin: 50% 100%;
    background: linear-gradient(to top, rgba(255, 255, 255, .34), transparent 76%);
    filter: blur(.2px);
  }

  .otaku-vfx-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 999px;
    pointer-events: none;
    box-shadow: 0 0 14px currentColor;
  }

  .otaku-vfx-card {
    isolation: isolate;
    transform-style: preserve-3d;
    background:
      linear-gradient(135deg, rgba(255,255,255,.08), transparent 34%),
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.1), transparent 48%),
      rgba(8, 8, 18, .96);
  }

  .otaku-vfx-card::before,
  .otaku-vfx-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
  }

  .otaku-vfx-card::before {
    z-index: 1;
    background: repeating-linear-gradient(112deg, transparent 0 8px, rgba(255,255,255,.04) 9px, transparent 11px);
    mix-blend-mode: screen;
  }

  .otaku-vfx-card::after {
    z-index: 2;
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: inset 0 0 28px rgba(255,255,255,.06);
  }

  .otaku-vfx-card__shine {
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.34) 47%, transparent 58%);
    transform: translateX(-130%);
    animation: otaku-vfx-shine 1.4s cubic-bezier(.2,.7,.2,1) .35s forwards;
    mix-blend-mode: screen;
  }

  .otaku-vfx-scanline {
    pointer-events: none;
    opacity: .4;
    background: repeating-linear-gradient(to bottom, transparent 0 8px, rgba(255,255,255,.04) 9px, transparent 10px);
    mask-image: radial-gradient(ellipse at center, black, transparent 70%);
    animation: otaku-vfx-scan 1.5s linear infinite;
  }

  .otaku-vfx-banner {
    text-shadow: 0 0 18px currentColor, 0 0 42px currentColor;
    animation: otaku-vfx-banner-in .8s cubic-bezier(.16, 1, .3, 1) both;
  }

  @keyframes otaku-vfx-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @keyframes otaku-vfx-shine {
    to { transform: translateX(130%); }
  }

  @keyframes otaku-vfx-scan {
    from { transform: translateY(-12%); }
    to { transform: translateY(12%); }
  }

  @keyframes otaku-vfx-banner-in {
    from { opacity: 0; transform: scale(.72) translateY(10px); letter-spacing: .28em; }
    to { opacity: 1; transform: scale(1) translateY(0); letter-spacing: .04em; }
  }

  @media (prefers-reduced-motion: reduce) {
    .otaku-vfx-rays,
    .otaku-vfx-card__shine,
    .otaku-vfx-scanline,
    .otaku-vfx-banner {
      animation: none;
    }

    .otaku-vfx-card__shine { transform: none; opacity: .18; }
  }

  .otaku-atmosphere {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    isolation: isolate;
    contain: paint;
    background:
      radial-gradient(42rem 30rem at 78% 18%, hsl(var(--primary) / 0.09), transparent 70%),
      radial-gradient(38rem 28rem at 18% 86%, hsl(var(--accent) / 0.06), transparent 70%);
  }

  .otaku-atmosphere::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.16;
    background-image:
      linear-gradient(118deg, transparent 0 47%, hsl(var(--foreground) / 0.05) 47.15%, transparent 47.35%),
      linear-gradient(118deg, transparent 0 67%, hsl(var(--primary) / 0.045) 67.15%, transparent 67.35%);
    background-size: 17rem 17rem, 25rem 25rem;
    mask-image: linear-gradient(to bottom, black 0%, transparent 78%);
  }

  .otaku-atmosphere__sun {
    position: absolute;
    top: 5vh;
    right: 7vw;
    width: clamp(14rem, 28vw, 28rem);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.58;
    background:
      repeating-linear-gradient(0deg, transparent 0 0.32rem, hsl(var(--accent) / 0.08) 0.37rem 0.42rem),
      radial-gradient(circle, hsl(var(--accent) / 0.14), hsl(var(--accent) / 0.025) 56%, transparent 70%);
  }

  .otaku-atmosphere__waves {
    position: absolute;
    inset: auto 0 0;
    height: 43%;
    opacity: 0.28;
    background-image:
      repeating-radial-gradient(ellipse at 0 100%, transparent 0 1.7rem, hsl(var(--primary) / 0.07) 1.78rem 1.9rem, transparent 1.98rem 3.45rem),
      repeating-radial-gradient(ellipse at 100% 120%, transparent 0 2rem, hsl(var(--foreground) / 0.035) 2.08rem 2.2rem, transparent 2.28rem 4.2rem);
    mask-image: linear-gradient(to top, black, transparent 92%);
    transform: perspective(28rem) rotateX(58deg) scale(1.8) translateY(38%);
    transform-origin: bottom;
  }

  .otaku-atmosphere__speedlines {
    position: absolute;
    right: -14vw;
    bottom: -18vh;
    width: 72vw;
    height: 54vh;
    opacity: 0.12;
    background: repeating-conic-gradient(from 248deg at 50% 50%, transparent 0deg 3deg, hsl(var(--primary) / 0.22) 3.2deg 3.7deg, transparent 4deg 8deg);
    mask-image: radial-gradient(ellipse at center, black, transparent 68%);
    transform: rotate(-8deg);
  }

  .otaku-atmosphere__grain {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image: radial-gradient(hsl(var(--foreground) / 0.6) 0.5px, transparent 0.6px);
    background-size: 5px 5px;
    mix-blend-mode: screen;
  }

  .otaku-atmosphere--compact {
    opacity: 0.7;
  }

  .otaku-glass-header {
    /* No backdrop-filter: this header sits over the animated atmosphere, so a
       blur had to be recomputed on EVERY frame (not just while scrolling).
       At this opacity the frosted look was barely visible anyway. */
    background: hsl(var(--background) / 0.94);
    border-color: hsl(var(--border) / 0.85);
    box-shadow: 0 1rem 3rem hsl(228 40% 3% / 0.2);
  }

  .otaku-play-hero {
    background:
      linear-gradient(115deg, hsl(var(--background) / 0.9), hsl(232 26% 11% / 0.5)),
      radial-gradient(circle at 80% 20%, hsl(var(--accent) / 0.11), transparent 28%),
      radial-gradient(circle at 18% 72%, hsl(var(--primary) / 0.12), transparent 32%);
  }

  .otaku-hero-relic {
    position: relative;
    border: 1px solid hsl(var(--foreground) / 0.12);
    /* Denser fill instead of backdrop-filter: blur(12px), which was
       re-blurred on every frame of the animated atmosphere behind it. */
    background: linear-gradient(145deg, hsl(var(--card) / 0.88), hsl(var(--background) / 0.74));
    box-shadow: 1.5rem 1.5rem 0 hsl(var(--primary) / 0.055), 0 1.5rem 4rem hsl(228 40% 3% / 0.38);
    transform: rotate(2deg);
  }

  .otaku-hero-relic::before,
  .otaku-hero-relic::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border: 1px solid hsl(var(--primary) / 0.28);
  }

  .otaku-hero-relic::before { inset: 1rem; transform: rotate(-4deg); }
  .otaku-hero-relic::after { inset: 2rem; border-color: hsl(var(--accent) / 0.23); transform: rotate(2deg); }

  .otaku-feature-card {
    position: relative;
    isolation: isolate;
    transition: background-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
  }

  .otaku-feature-card::after {
    content: "";
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.7), transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 220ms ease;
  }

  .otaku-feature-card:hover {
    background: hsl(var(--card) / 0.34);
    transform: translateY(-0.25rem);
    box-shadow: 0 1rem 2.5rem hsl(228 40% 3% / 0.18);
  }

  .otaku-feature-card:hover::after { transform: scaleX(1); }

  .otaku-mode-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-image: linear-gradient(135deg, hsl(var(--card) / 0.85), transparent 72%);
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
  }

  .otaku-mode-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 28%, hsl(var(--foreground) / 0.07) 48%, transparent 68%);
    transform: translateX(-125%);
    transition: transform 650ms ease;
  }

  .otaku-mode-card:hover::before { transform: translateX(125%); }
  .otaku-mode-card:hover { transform: translateY(-0.18rem); }

  .otaku-impact {
    background: radial-gradient(circle at center, hsl(var(--foreground) / 0.8), transparent 30%);
    mix-blend-mode: screen;
  }

  .otaku-impact__flash {
    background: radial-gradient(circle at center, hsl(var(--accent) / 0.9), hsl(var(--primary) / 0.34) 32%, transparent 72%);
    filter: saturate(135%);
  }

  /* Route wrapper (see PageTransition in App.tsx). Plain CSS fade-in only:
     no framer-motion here any more, so nothing can leave the wrapper stuck
     at opacity 0 between two pages. */
  .route-transition {
    /* Never put `transform`, `filter` or `will-change` here. Either one makes
       this div the containing block of every `position: fixed` descendant, so
       full-screen overlays (tutorial popups, the matchmaking screen, the quiz,
       the leave-game dialog) size and centre themselves against the whole
       scrollable page instead of the viewport — rendering their backdrop
       full-screen while pushing their content off screen. The fade below only
       touches opacity, and the `backwards` fill leaves nothing applied once
       it has played. */
    min-height: 100vh;
    min-height: 100dvh;
    animation: otaku-route-in 120ms ease-out backwards;
  }

  .battle-pass-track {
    background:
      linear-gradient(180deg, hsl(var(--card) / 0.52), hsl(var(--background) / 0.3)),
      radial-gradient(circle at 50% 0%, hsl(var(--primary) / 0.08), transparent 62%);
    box-shadow: inset 0 1px 0 hsl(var(--foreground) / 0.04), 0 1rem 2rem hsl(240 30% 2% / 0.18);
    scrollbar-width: none;
  }

  .battle-pass-track::-webkit-scrollbar { display: none; }

  @media (max-width: 767px) {
    .battle-pass-track {
      scroll-snap-type: x mandatory;
      touch-action: pan-x;
    }
  }

}

/* Frosted glass over the animated atmosphere = the blur is recomputed on
   every frame, for every glass element on screen (measured on /play: 38 fps
   → 60 fps once removed). On any page that shows the atmosphere (home,
   /play, their popups), glass falls back to its plain translucent tint,
   which looks nearly identical on this dark theme. The shell classes cover
   browsers without :has(). */
.route-transition:has(.otaku-atmosphere) *,
.otaku-index-shell *,
.otaku-play-shell * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Backdrop filters force the browser to repaint what sits behind each panel.
   The dark UI has opaque enough surfaces to keep its hierarchy without them. */
[class*="backdrop-blur"],
.neon-card,
.glass-panel {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@keyframes otaku-route-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Blind test player (AudioPlayer) — decorative loops in CSS so they run on
   the compositor instead of React state / JS-driven framer animations. */
.otaku-eq-bar {
  transform-origin: bottom;
  animation: otaku-eq 0.6s ease-in-out infinite alternate;
}
.otaku-eq-bar--idle {
  animation: none;
  transform: scaleY(0.15);
}
@keyframes otaku-eq {
  from { transform: scaleY(var(--eq-lo, 0.2)); }
  to { transform: scaleY(var(--eq-hi, 0.8)); }
}

.otaku-orb--a { animation: otaku-orb-a 4s ease-in-out infinite; }
.otaku-orb--b { animation: otaku-orb-b 3.5s ease-in-out 0.5s infinite; }
.otaku-orb--c { animation: otaku-orb-c 3s ease-in-out 1s infinite; }
.otaku-orbs--paused .otaku-orb { animation-play-state: paused; }
@keyframes otaku-orb-a {
  0%, 100% { opacity: 0.3; transform: translate(0, 0) scale(1); }
  50% { opacity: 0.6; transform: translate(50px, 30px) scale(1.3); }
}
@keyframes otaku-orb-b {
  0%, 100% { opacity: 0.3; transform: translate(0, 0) scale(1); }
  50% { opacity: 0.5; transform: translate(-40px, -30px) scale(1.2); }
}
@keyframes otaku-orb-c {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.4); }
}

.otaku-wave-sweep { animation: otaku-wave-sweep 2s linear infinite; }
@keyframes otaku-wave-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .otaku-atmosphere *,
  .otaku-mode-card::before,
  .route-transition,
  .otaku-eq-bar,
  .otaku-orb,
  .otaku-wave-sweep {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* Barre d'état iOS (PWA installée et app Capacitor) -------------------------
   Avec viewport-fit=cover et le style « black-translucent », la page passe
   sous l'heure et l'encoche. Cette bande opaque, haute exactement de la zone
   sûre (0 px dans un navigateur classique et sur desktop), empêche le contenu
   qui défile d'apparaître derrière l'heure. Sous les dialogues (z-50). */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 45;
  height: env(safe-area-inset-top, 0px);
  background: hsl(var(--background));
  pointer-events: none;
}

/* Mobile app foundation ---------------------------------------------------
   `dvh` follows the visible viewport when mobile browsers show their chrome;
   the safe-area padding keeps key controls clear of notches and home bars. */
@media (max-width: 767px), (pointer: coarse) and (max-width: 1024px) {
  html {
    background: hsl(var(--background));
    -webkit-text-size-adjust: 100%;
  }

  body {
    overscroll-behavior-y: none;
  }

  .mobile-app-shell {
    min-height: 100svh;
    min-height: 100dvh;
  }

  .mobile-app-header {
    padding-top: max(0.5rem, env(safe-area-inset-top));
  }

  /* These utilities are used by full-screen games and fixed overlays. They
     must exist as CSS (not just JSX class names) because Tailwind has no
     native safe-area plugin in this project. */
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }

  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .safe-notification-toasts {
    top: max(0.75rem, calc(env(safe-area-inset-top) + 0.5rem));
    right: 0.75rem;
    left: 0.75rem;
  }

  .safe-toast-viewport {
    top: max(0.75rem, calc(env(safe-area-inset-top) + 0.5rem));
    padding: 0;
  }

  .safe-sheet-content[data-sheet-side="left"],
  .safe-sheet-content[data-sheet-side="right"] {
    height: 100dvh;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .safe-sheet-close {
    top: max(0.75rem, calc(env(safe-area-inset-top) + 0.5rem));
  }

  .safe-floating-top {
    top: max(1rem, calc(env(safe-area-inset-top) + 0.5rem));
  }

  .safe-game-feedback {
    top: max(5rem, calc(env(safe-area-inset-top) + 4.5rem));
  }

  /* Any route-level sticky header is a potential notch collision. Keeping a
     small baseline also preserves its usual breathing room on Android. */
  .route-transition :is(header, div).sticky.top-0 {
    padding-top: max(0.75rem, env(safe-area-inset-top));
  }

  /* Pages à onglets hub (HubTabs) : les onglets portent déjà la zone sûre au
     repos. L'en-tête collant qui les suit ne la rajoute pas (double marge) ;
     une fois collé, il s'arrête juste sous la barre d'état. */
  .route-transition .hub-tabs + :is(header, div).sticky.top-0 {
    top: env(safe-area-inset-top, 0px);
    padding-top: 0.75rem;
  }

  [data-sonner-toaster] {
    --mobile-offset-top: max(0.75rem, calc(env(safe-area-inset-top) + 0.5rem));
    --mobile-offset-right: 0.75rem;
    --mobile-offset-bottom: max(0.75rem, calc(env(safe-area-inset-bottom) + 0.5rem));
    --mobile-offset-left: 0.75rem;
  }

  .mobile-app-content {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .mobile-app-tabbar {
    padding-bottom: max(0.375rem, env(safe-area-inset-bottom));
    box-shadow: 0 -12px 32px hsl(240 10% 2% / 0.42);
  }

  .mobile-app-shell button,
  .mobile-app-shell [role="button"] {
    touch-action: manipulation;
  }

  /* Prevent iOS from zooming on form controls and make sheets feel native. */
  input,
  select,
  textarea {
    font-size: max(16px, 1em);
  }

  [data-radix-popper-content-wrapper] {
    max-width: calc(100vw - 1rem);
  }
}

/* ========================================
   DARK NEON GAMER - BACKGROUND PATTERNS
   ======================================== */

@layer components {
  /* Subtle grid overlay - system interface style */
  .neon-grid {
    position: relative;
  }

  .neon-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(hsl(var(--primary) / 0.03) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--primary) / 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
  }

  /* Scanline effect */
  .scanlines::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      hsl(0 0% 0% / 0.03) 2px,
      hsl(0 0% 0% / 0.03) 4px
    );
    pointer-events: none;
    z-index: 1;
  }

  /* Corner decorations - system UI */
  .corner-decor {
    position: relative;
  }

  .corner-decor::before,
  .corner-decor::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: hsl(var(--primary) / 0.5);
    border-style: solid;
    border-width: 0;
  }

  .corner-decor::before {
    top: 0;
    left: 0;
    border-top-width: 1px;
    border-left-width: 1px;
  }

  .corner-decor::after {
    bottom: 0;
    right: 0;
    border-bottom-width: 1px;
    border-right-width: 1px;
  }
}

/* ========================================
   DARK NEON GAMER - UI COMPONENTS
   ======================================== */

@layer components {
  /* Neon Card - Dark with colored border */
  .neon-card {
    @apply relative;
    background: hsl(var(--card) / 0.9);
    border: 1px solid hsl(var(--border));
  }

  .neon-card-primary {
    border-color: hsl(var(--primary) / 0.6);
    box-shadow:
      0 0 15px hsl(var(--primary) / 0.15),
      inset 0 0 20px hsl(var(--primary) / 0.03);
  }

  .neon-card-secondary {
    border-color: hsl(var(--secondary) / 0.6);
    box-shadow:
      0 0 15px hsl(var(--secondary) / 0.15),
      inset 0 0 20px hsl(var(--secondary) / 0.03);
  }

  .neon-card-accent {
    border-color: hsl(var(--accent) / 0.6);
    box-shadow:
      0 0 15px hsl(var(--accent) / 0.15),
      inset 0 0 20px hsl(var(--accent) / 0.03);
  }

  .neon-card-success {
    border-color: hsl(var(--success) / 0.6);
    box-shadow:
      0 0 15px hsl(var(--success) / 0.15),
      inset 0 0 20px hsl(var(--success) / 0.03);
  }

  /* Manga card - clean dark style NO BORDERS */
  .manga-card {
    @apply relative;
    background: hsl(var(--card) / 0.95);
    border: none;
    box-shadow: 0 4px 30px hsl(0 0% 0% / 0.5);
  }

  .manga-card-primary {
    background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--primary) / 0.05));
    box-shadow:
      0 0 25px hsl(var(--primary) / 0.1),
      0 4px 30px hsl(0 0% 0% / 0.5);
  }

  .manga-card-primary:hover {
    box-shadow:
      0 0 35px hsl(var(--primary) / 0.15),
      0 4px 30px hsl(0 0% 0% / 0.6);
  }

  /* Game Mode Button - Dark with neon border */
  .game-mode-btn {
    @apply relative px-6 py-4;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    transition: all 0.2s ease;
  }

  .game-mode-btn:hover {
    border-color: hsl(var(--primary) / 0.8);
    box-shadow: 0 0 20px hsl(var(--primary) / 0.2);
  }

  /* Anime button - Neon gamer style */
  .anime-btn {
    @apply relative px-6 py-3 font-display font-bold uppercase tracking-wider;
    @apply transition-all duration-200;
    background: hsl(var(--card));
    color: hsl(var(--primary));
    border: 1px solid hsl(var(--primary) / 0.5);
  }

  .anime-btn:hover {
    background: hsl(var(--primary) / 0.1);
    border-color: hsl(var(--primary));
    box-shadow: 0 0 20px hsl(var(--primary) / 0.3);
  }

  .anime-btn:active {
    transform: scale(0.98);
  }

  .anime-btn-primary {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.8));
    color: hsl(var(--primary-foreground));
    border: none;
    box-shadow: 0 0 20px hsl(var(--primary) / 0.3);
  }

  .anime-btn-primary:hover {
    box-shadow: 0 0 30px hsl(var(--primary) / 0.5);
    transform: translateY(-2px);
  }

  .anime-btn-secondary {
    background: linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--secondary) / 0.8));
    color: hsl(var(--secondary-foreground));
    border: none;
    box-shadow: 0 0 20px hsl(var(--secondary) / 0.3);
  }

  .anime-btn-secondary:hover {
    box-shadow: 0 0 30px hsl(var(--secondary) / 0.5);
    transform: translateY(-2px);
  }

  .anime-btn-accent {
    background: hsl(var(--card));
    color: hsl(var(--accent));
    border: 1px solid hsl(var(--accent) / 0.5);
  }

  .anime-btn-accent:hover {
    background: hsl(var(--accent) / 0.1);
    border-color: hsl(var(--accent));
    box-shadow: 0 0 20px hsl(var(--accent) / 0.3);
  }

  .anime-btn-outline {
    background: transparent;
    color: hsl(var(--muted-foreground));
    border: 1px solid hsl(var(--border));
  }

  .anime-btn-outline:hover {
    color: hsl(var(--foreground));
    border-color: hsl(var(--muted-foreground));
  }

  /* Tag/Pill component */
  .tag-pill {
    @apply inline-flex items-center rounded-full px-3 py-1 text-xs font-medium uppercase tracking-wider;
    background: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
    border: 1px solid hsl(var(--primary) / 0.3);
  }

  /* Skew panel - for headers/footers */
  .skew-panel {
    @apply relative px-6 py-3;
    background: hsl(var(--card) / 0.9);
    border: 1px solid hsl(var(--border));
  }

  /* Energy/Timer bar - clean no border */
  .energy-bar {
    @apply relative h-3 overflow-hidden;
    background: hsl(var(--muted));
  }

  .energy-bar-fill {
    @apply h-full;
    background: linear-gradient(
      90deg,
      hsl(var(--primary)) 0%,
      hsl(var(--primary)) 40%,
      hsl(var(--secondary)) 70%,
      hsl(var(--destructive)) 100%
    );
    transition: width 0.3s ease-out;
  }

  .energy-bar-fill.critical {
    animation: energy-pulse 0.25s ease-in-out infinite;
    background: hsl(var(--destructive));
    box-shadow: 0 0 15px hsl(var(--destructive));
  }

  @keyframes energy-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
  }

  /* Glass panel */
  .glass-panel {
    @apply relative;
    background: hsl(var(--card) / 0.7);
  }

  /* Anime frame - for images - CLEAN NO BORDER */
  .anime-frame {
    @apply relative overflow-hidden;
    background: hsl(var(--card));
  }
}

/* ========================================
   IMPACT & TRANSITION EFFECTS
   ======================================== */

@layer components {
  /* Impact frame flash - STRONGER */
  .impact-frame {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: white;
    mix-blend-mode: difference;
    animation: impact-flash 0.2s ease-out forwards;
  }

  @keyframes impact-flash {
    0% { opacity: 1; }
    25% { opacity: 0; }
    50% { opacity: 1; }
    75% { opacity: 0; }
    100% { opacity: 0; }
  }

  /* Eyecatch transition - VIBRANT */
  .eyecatch {
    position: fixed;
    inset: 0;
    z-index: 9998;
    overflow: hidden;
  }

  .eyecatch::before {
    content: '';
    position: absolute;
    inset: -20%;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
    transform: translateX(-100%) skewX(-20deg);
    animation: eyecatch-sweep 0.7s ease-in-out forwards;
  }

  .eyecatch::after {
    content: '';
    position: absolute;
    inset: -20%;
    background: hsl(var(--accent));
    transform: translateX(-150%) skewX(-20deg);
    animation: eyecatch-sweep 0.7s ease-in-out 0.1s forwards;
  }

  @keyframes eyecatch-sweep {
    0% { transform: translateX(-150%) skewX(-20deg); }
    40% { transform: translateX(0) skewX(-20deg); }
    60% { transform: translateX(0) skewX(-20deg); }
    100% { transform: translateX(150%) skewX(-20deg); }
  }

  /* Color burst effect */
  .color-burst {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .color-burst::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: hsl(var(--primary));
    transform: translate(-50%, -50%);
    animation: burst 0.5s ease-out forwards;
    box-shadow:
      0 0 0 0 hsl(var(--primary)),
      0 0 0 0 hsl(var(--secondary)),
      0 0 0 0 hsl(var(--accent));
  }

  @keyframes burst {
    0% {
      box-shadow:
        0 0 0 0 hsl(var(--primary)),
        0 0 0 0 hsl(var(--secondary)),
        0 0 0 0 hsl(var(--accent));
    }
    100% {
      box-shadow:
        0 0 0 100px hsl(var(--primary) / 0),
        0 0 0 200px hsl(var(--secondary) / 0),
        0 0 0 300px hsl(var(--accent) / 0);
    }
  }
}

/* ========================================
   DARK NEON GAMER - TITLE EFFECTS
   ======================================== */

@layer components {
  /* Main title - Futuristic glow style */
  .anime-title {
    @apply font-display font-black uppercase tracking-wider;
  }

  /* Glowing title - for emphasis */
  .anime-title-glow {
    @apply font-display font-black uppercase;
    text-shadow:
      0 0 10px currentColor,
      0 0 20px currentColor,
      0 0 40px currentColor;
  }

  /* Subtitle with minimal decoration */
  .anime-subtitle {
    @apply relative inline-block font-display font-semibold uppercase tracking-widest text-sm;
    color: hsl(var(--muted-foreground));
  }
}

/* ========================================
   DARK NEON GAMER - TEXT UTILITIES
   ======================================== */

@layer utilities {
  /* Neon text glows */
  .text-glow-primary {
    text-shadow:
      0 0 5px hsl(var(--primary)),
      0 0 15px hsl(var(--primary) / 0.5);
  }

  .text-glow-secondary {
    text-shadow:
      0 0 5px hsl(var(--secondary)),
      0 0 15px hsl(var(--secondary) / 0.5);
  }

  .text-glow-accent {
    text-shadow:
      0 0 5px hsl(var(--accent)),
      0 0 15px hsl(var(--accent) / 0.5);
  }

  .text-glow-success {
    text-shadow:
      0 0 5px hsl(var(--success)),
      0 0 15px hsl(var(--success) / 0.5);
  }

  .text-glow-destructive {
    text-shadow:
      0 0 5px hsl(var(--destructive)),
      0 0 15px hsl(var(--destructive) / 0.5);
  }
}

/* ========================================
   CARD & CONTAINER EFFECTS - CLEAN MINIMAL
   ======================================== */

@layer components {
  /* Manga panel style card - CLEAN NO BORDERS */
  .manga-card {
    @apply relative;
    background: hsl(var(--card) / 0.95);
    box-shadow: 0 4px 30px hsl(0 0% 0% / 0.4);
    transition: all 0.2s;
  }

  .manga-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 40px hsl(0 0% 0% / 0.5);
  }

  /* Color accent cards */
  .manga-card-primary {
    background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--primary) / 0.08));
  }

  .manga-card-primary:hover {
    box-shadow:
      0 0 25px hsl(var(--primary) / 0.15),
      0 8px 40px hsl(0 0% 0% / 0.5);
  }

  .manga-card-secondary {
    background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--secondary) / 0.08));
  }

  /* Neon card - subtle glow, NO BORDER */
  .neon-card {
    @apply relative;
    background: hsl(var(--card) / 0.95);
    box-shadow: 0 4px 30px hsl(0 0% 0% / 0.4);
  }

  .neon-card:hover {
    box-shadow:
      0 0 20px hsl(var(--primary) / 0.1),
      0 8px 40px hsl(0 0% 0% / 0.5);
  }

  .neon-card-primary {
    background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--primary) / 0.05));
    box-shadow:
      0 0 15px hsl(var(--primary) / 0.08),
      0 4px 30px hsl(0 0% 0% / 0.4);
  }

  .neon-card-secondary {
    background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--secondary) / 0.05));
    box-shadow:
      0 0 15px hsl(var(--secondary) / 0.08),
      0 4px 30px hsl(0 0% 0% / 0.4);
  }

  /* Glass panel - for overlays */
  .glass-panel {
    @apply relative;
    background: hsl(var(--card) / 0.85);
    box-shadow: 0 0 30px hsl(0 0% 0% / 0.3);
  }
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes loading {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
  20%, 40%, 60%, 80% { transform: translateX(8px); }
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes slam {
  0% { transform: scale(3) rotate(-15deg); opacity: 0; filter: blur(10px); }
  50% { transform: scale(1.15) rotate(3deg); opacity: 1; filter: blur(0); }
  70% { transform: scale(0.95) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.animate-slam {
  animation: slam 0.5s ease-out forwards;
}

@keyframes slide-up {
  0% { transform: translateY(100px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.animate-slide-up {
  animation: slide-up 0.5s ease-out forwards;
}

@keyframes cut-in {
  0% { transform: translateX(100%) skewX(-25deg); opacity: 0; }
  100% { transform: translateX(0) skewX(0); opacity: 1; }
}

.animate-cut-in {
  animation: cut-in 0.4s ease-out forwards;
}

@keyframes flash-border {
  0%, 100% {
    border-color: hsl(var(--primary));
    box-shadow: 0 0 20px hsl(var(--primary) / 0.5);
  }
  50% {
    border-color: hsl(var(--secondary));
    box-shadow: 0 0 30px hsl(var(--secondary) / 0.7);
  }
}

.animate-flash-border {
  animation: flash-border 0.15s ease-in-out 4;
}

@keyframes pulse-scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.animate-pulse-scale {
  animation: pulse-scale 0.6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.animate-float {
  animation: float 2.5s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px hsl(var(--primary) / 0.5);
  }
  50% {
    box-shadow: 0 0 40px hsl(var(--primary) / 0.8), 0 0 60px hsl(var(--secondary) / 0.4);
  }
}

.animate-glow-pulse {
  animation: glow-pulse 1.5s ease-in-out infinite;
}

/* ========================================
   DARK NEON GAMER - RANK TIER SYSTEM
   ======================================== */

@layer utilities {
  /* Rank Text Colors - Neon */
  .rank-e { color: hsl(0 0% 55%); }
  .rank-d { color: hsl(140 100% 50%); text-shadow: 0 0 8px hsl(140 100% 50% / 0.5); }
  .rank-c { color: hsl(210 100% 60%); text-shadow: 0 0 8px hsl(210 100% 60% / 0.5); }
  .rank-b { color: hsl(270 100% 65%); text-shadow: 0 0 8px hsl(270 100% 65% / 0.5); }
  .rank-a { color: hsl(45 100% 50%); text-shadow: 0 0 8px hsl(45 100% 50% / 0.5); }
  .rank-s { color: hsl(340 100% 60%); text-shadow: 0 0 8px hsl(340 100% 60% / 0.5); }
  .rank-ss { color: hsl(45 100% 55%); text-shadow: 0 0 10px hsl(45 100% 55% / 0.6); }

  /* Legacy tier classes */
  .tier-e-rank { color: hsl(0 0% 55%); }
  .tier-d-rank { color: hsl(140 100% 50%); }
  .tier-c-rank { color: hsl(210 100% 60%); }
  .tier-b-rank { color: hsl(270 100% 65%); }
  .tier-a-rank { color: hsl(45 100% 50%); }
  .tier-s-rank { color: hsl(340 100% 60%); }
  .tier-special-grade { color: hsl(45 100% 55%); }

  /* Rank Card Backgrounds - Dark with neon border */
  .rank-card-e {
    background: hsl(0 0% 8%);
    border: 1px solid hsl(0 0% 30%);
  }

  .rank-card-d {
    background: hsl(140 30% 6%);
    border: 1px solid hsl(140 100% 50% / 0.5);
    box-shadow: 0 0 15px hsl(140 100% 50% / 0.1);
  }

  .rank-card-c {
    background: hsl(210 30% 6%);
    border: 1px solid hsl(210 100% 60% / 0.5);
    box-shadow: 0 0 15px hsl(210 100% 60% / 0.1);
  }

  .rank-card-b {
    background: hsl(270 30% 6%);
    border: 1px solid hsl(270 100% 65% / 0.5);
    box-shadow: 0 0 15px hsl(270 100% 65% / 0.15);
  }

  .rank-card-a {
    background: hsl(45 30% 6%);
    border: 1px solid hsl(45 100% 50% / 0.5);
    box-shadow: 0 0 20px hsl(45 100% 50% / 0.15);
  }

  .rank-card-s {
    background: hsl(340 30% 6%);
    border: 1px solid hsl(340 100% 60% / 0.5);
    box-shadow: 0 0 25px hsl(340 100% 60% / 0.2);
  }

  .rank-card-ss {
    background: hsl(45 30% 6%);
    border: 1px solid hsl(45 100% 55% / 0.6);
    box-shadow: 0 0 30px hsl(45 100% 55% / 0.25);
  }

  /* Legacy tier backgrounds */
  .tier-bg-e-rank {
    background: hsl(0 0% 8%);
    border-color: hsl(0 0% 30%);
  }
  .tier-bg-d-rank {
    background: hsl(140 30% 6%);
    border-color: hsl(140 100% 50%);
    box-shadow: 0 0 15px hsl(140 100% 50% / 0.2);
  }
  .tier-bg-c-rank {
    background: hsl(210 30% 6%);
    border-color: hsl(210 100% 60%);
    box-shadow: 0 0 15px hsl(210 100% 60% / 0.2);
  }
  .tier-bg-b-rank {
    background: hsl(270 30% 6%);
    border-color: hsl(270 100% 65%);
    box-shadow: 0 0 20px hsl(270 100% 65% / 0.2);
  }
  .tier-bg-a-rank {
    background: hsl(45 30% 6%);
    border-color: hsl(45 100% 50%);
    box-shadow: 0 0 25px hsl(45 100% 50% / 0.25);
  }
  .tier-bg-s-rank {
    background: hsl(340 30% 6%);
    border-color: hsl(340 100% 60%);
    box-shadow: 0 0 30px hsl(340 100% 60% / 0.3);
  }
  .tier-bg-special-grade {
    background: hsl(45 30% 6%);
    border-color: hsl(45 100% 55%);
    box-shadow: 0 0 35px hsl(45 100% 55% / 0.35);
  }
}

/* ========================================
   DARK NEON GAMER - MISC & UTILITIES
   ======================================== */

::selection {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

*:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* Animated border glow */
.animated-border {
  position: relative;
}

.animated-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    90deg,
    hsl(var(--primary)),
    hsl(var(--accent)),
    hsl(var(--primary))
  );
  background-size: 200% 100%;
  animation: border-flow 3s linear infinite;
  z-index: -1;
  opacity: 0.5;
}

@keyframes border-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Summon / boosters : voir src/styles/boosters.css (importé par la page /summon). */

/* Deck : voir src/styles/deck.css (importé par CollectionModal). */