/* ============================================================================
   RETNING B — «MAKSIMALT SIRKUS»
   Alt på elleve. Konfetti, glade farger, store tall, knapper som overreagerer,
   skjermrystelser, trommevirvel før resultatet. Game show.
   Farge-respons: høylytt, rask, mettet — hele UI-et svømmer i paletten.
   ============================================================================ */

body[data-direction="b"] {
  --bg: #140a2e;
  --bg-2: #1d1142;
  --surface: #271654;
  --surface-2: #321c6b;
  --line: rgba(255,255,255,.14);
  --text: #fff7ff;
  --muted: #c4b0ff;
  --accent: #ff3ea5;          /* hot magenta */
  --accent-2: #ffd23e;        /* game-show gull */
  --up: #36e27b;
  --down: #ff5a5a;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 26px 60px rgba(120,20,140,.5);
  --font-display: "Arial Black", "Archivo Black", system-ui, sans-serif;
  --font-body: "Trebuchet MS", system-ui, -apple-system, sans-serif;
  --motion: 1.6;              /* alt overreagerer */
  --film-mix: 1;             /* maksimal farge-respons */
}

/* Sprudlende bakgrunn — roterende lyssøyler + mettet farge-respons */
body[data-direction="b"] {
  background:
    radial-gradient(1000px 700px at 50% -10%, color-mix(in srgb, var(--film-glow) calc(var(--film-mix)*40%), transparent), transparent 55%),
    conic-gradient(from 0deg at 50% 0%, rgba(255,62,165,.10), rgba(255,210,62,.10), rgba(54,226,123,.10), rgba(120,90,255,.12), rgba(255,62,165,.10)),
    linear-gradient(180deg, #160b34, #0e0722);
  transition: background-color .35s var(--ease);
}

/* Lett «spotlight-sveip» bak alt */
body[data-direction="b"] .grain {
  opacity: .5; mix-blend-mode: screen;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255,255,255,.05) 12deg, transparent 24deg, transparent 180deg, rgba(255,255,255,.04) 200deg, transparent 220deg);
  animation: sweepB 16s linear infinite; transform-origin: 50% 30%;
}
@keyframes sweepB { to { transform: rotate(360deg); } }

/* Brand — fet, mettet, sprettende regnbue */
body[data-direction="b"] .brand .l1, body[data-direction="b"] .brand .l3 { letter-spacing: .01em; text-transform: uppercase; }
/* Archivo Black er svært bred — hold det stort, men innenfor skjermen så merket leses */
body[data-direction="b"] .brand { padding-inline: 2vw; }
body[data-direction="b"] .brand .l2 { text-transform: uppercase; font-size: clamp(30px, 6.6vw, 80px); letter-spacing: -.02em; white-space: nowrap; }
body[data-direction="b"] .brand .l3 { font-size: clamp(24px, 5vw, 60px); }
body[data-direction="b"] .brand .gold {
  background: linear-gradient(92deg, #ffd23e, #ff3ea5, #36e27b, #5a9bff, #ffd23e);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rainbowB 4s linear infinite, wobbleB 3s ease-in-out infinite;
}
@keyframes rainbowB { to { background-position: 300% 50%; } }
@keyframes wobbleB { 0%,100%{transform: rotate(-1.2deg) scale(1);} 50%{transform: rotate(1.2deg) scale(1.02);} }
body[data-direction="b"] .kicker { color: var(--accent-2); animation: wobbleB 4s ease-in-out infinite; }

/* Sifre spretter inn, store og fargerike */
body[data-direction="b"] .digit {
  background: linear-gradient(180deg, #3a2080, #271654);
  border-width: 2px;
}
body[data-direction="b"] .digit.filled { animation: rubber .5s var(--ease); }
@keyframes rubber { 0%{transform: scale(1);} 30%{transform: scale(1.25,.78);} 50%{transform: scale(.85,1.18);} 70%{transform: scale(1.06,.96);} 100%{transform: scale(1);} }

/* Knapper — store, runde, sprettende; skygge i farge */
body[data-direction="b"] .btn {
  background: linear-gradient(180deg, #ff6ec0, var(--accent));
  color: #fff; text-transform: uppercase; letter-spacing: .04em; font-weight: 800;
  box-shadow: 0 10px 0 #b81f6e, 0 18px 30px rgba(255,62,165,.4);
  border: 2px solid rgba(255,255,255,.25);
}
body[data-direction="b"] .btn:hover { transform: translateY(-3px) rotate(-1deg); }
body[data-direction="b"] .btn:active { transform: translateY(6px); box-shadow: 0 4px 0 #b81f6e, 0 8px 14px rgba(255,62,165,.4); }
body[data-direction="b"] .btn.ghost { box-shadow: none; background: rgba(255,255,255,.06); }

/* Rader spretter på hover, fargeskygge */
body[data-direction="b"] .row { border-width: 2px; }
body[data-direction="b"] .row:hover { transform: translateY(-4px) rotate(-.4deg) scale(1.01); box-shadow: 0 20px 40px rgba(255,62,165,.3); }
body[data-direction="b"] .imdb { box-shadow: 0 0 16px rgba(245,197,24,.5); }

/* Tabs som game-show-knapper */
body[data-direction="b"] .tab.on { background: linear-gradient(180deg, var(--accent-2), #ff9c2e); color: #2a0a3a; box-shadow: 0 6px 0 #c47800; }

/* Score stort og sprett */
body[data-direction="b"] .score { font-size: 30px; }
body[data-direction="b"] .vbtn:hover { transform: scale(1.18) rotate(-4deg); }

/* Envelope — game-show-trommevirvel-glød */
body[data-direction="b"] .envelope {
  border-width: 3px; animation: enthrob 1.1s ease-in-out infinite;
  box-shadow: var(--shadow), 0 0 90px color-mix(in srgb, var(--accent) 50%, transparent);
}
@keyframes enthrob { 0%,100%{transform: scale(1) rotate(-.6deg);} 50%{transform: scale(1.025) rotate(.6deg);} }
body[data-direction="b"] .envelope .seal { background: radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent) 65%, #b81f6e); }

/* Vinnerkort eksploderer inn */
body[data-direction="b"] .winner.show { animation: winnerPop .8s var(--ease) both; }
@keyframes winnerPop { 0%{transform: scale(.3) rotate(-8deg); opacity:0;} 60%{transform: scale(1.08) rotate(3deg);} 100%{transform: none; opacity:1;} }

/* Overlay-kort med tjukk farget ramme */
body[data-direction="b"] .ov-card { border-width: 3px; border-radius: 24px; }
body[data-direction="b"] .ov-stage .ov-title-over { text-transform: uppercase; }

/* Toast som spretter inn */
body[data-direction="b"] .toast { border-width: 2px; font-size: 16px; text-transform: uppercase; }
body[data-direction="b"] .toast.show { animation: rubber .6s var(--ease); }

/* Skjermrystelse ved stemming */
body[data-direction="b"].shake #app { animation: shake .5s; }
@keyframes shake {
  0%,100%{transform: translate(0,0);} 15%{transform: translate(-7px,3px) rotate(-.4deg);}
  30%{transform: translate(6px,-4px) rotate(.4deg);} 45%{transform: translate(-5px,2px);}
  60%{transform: translate(5px,3px);} 75%{transform: translate(-3px,-2px);}
}