/* FableForge demos — jackpot + bullseye extracted from themes/default/style.css */
@import url("https://fonts.googleapis.com/css2?family=Bangers&family=Luckiest+Guy&family=VT323&display=swap");
:root {
  --player-name-bg: #1e3d1e;
  --font-vt323: "VT323", "Courier New", monospace;
  --font-bangers: "Bangers", cursive;
  --font-luckiest: "Luckiest Guy", cursive;
  --text-black: #0a1f0f;
  --border-black: #0a1f0f;
  --bg-body: #050505;
}
/* Demo host overrides so the full machine (incl. pull knob) fits the marketing layout */
.dm-context-preview {
  width: min(100%, 920px) !important;
  overflow: visible;
}
.dm-context-preview .jackpot-container {
  width: 100% !important;
  max-width: 862px;
  height: auto !important;
  min-height: 300px;
  max-height: none !important;
  overflow: visible !important;
}
.dm-context-preview .jackpot-cabinet {
  max-height: none !important;
  height: auto !important;
  min-height: 300px;
  overflow: visible !important;
  background-color: #234d23 !important;
  border: 4px solid #225522;
  box-shadow: 0 0 0 2px #0a1f0f inset, 0 6px 0 #0a1f0f, 0 10px 16px rgba(0,0,0,0.55);
}
.dm-context-preview .jackpot-sub,
.dm-context-preview .jackpot-reel-label {
  color: #e8f5e8 !important;
  text-shadow: 0 1px 0 #0a1f0f;
}
.dm-context-preview .jackpot-pull-knob {
  z-index: 20;
}
.dm-jackpot-row {
  flex-direction: column;
  align-items: stretch !important;
}
.jackpot-container {
 width: 862px;
 height: 300px;
 max-height: 300px;
 box-sizing: border-box;
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
}

.jackpot-cabinet {
 background-color: var(--player-name-bg);
 /* border: 6px solid #225522; */
 border-radius: 10px;
 /* box-shadow: 0 0 0 2px #0a1f0f inset, 0 6px 0 #0a1f0f, 0 10px 16px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(180, 220, 180, 0.1) inset; */
 width: 100%;
 height: 100%;
 max-height: 290px;
 position: relative;
 overflow: hidden;
 font-family: var(--font-vt323);
 color: #e8f5e8;
 user-select: none;
}

/* Marquee header */
.jackpot-header {
 padding-top: 30px;
 padding-left: 30px;
 /* text-align: center; */
 margin-bottom: 6px;
}

.jackpot-marquee {
 display:none;
 font-family: var(--font-bangers, "Bangers", cursive);
 font-size: 45px;
 letter-spacing: 2px;
 color: var(--text-black);
}
.jackpot-sub {
 display: block;
 margin-bottom: 2px;
 font-family: var(--font-vt323);
 font-size: 25px;
 color: var(--text-black);
}

/* Reels */
.jackpot-reels-row {
 display: flex;
 gap: 50px;
 justify-content: center;
 margin: 2px 0 2px;
 flex: 1;
}

.jackpot-reel-wrap {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 92px;
}

.jackpot-reel-label {
 font-family: var(--font-luckiest, "Luckiest Guy", cursive);
 font-size: 25px;
 color: var(--text-black);;
 margin-bottom: 1px;
 white-space: nowrap;
 overflow: visible;
 text-overflow: unset;
}

.jackpot-reel {
 width: 68px;
 height: 92px;
 background: #0a2214;
 border: 4px solid #225522;
 border-radius: 3px;
 overflow: hidden;
 position: relative;
 box-shadow:
 0 0 0 1px #0a1f0f inset,
 0 2px 5px rgba(0,0,0,0.55) inset,
 0 -1px 2px rgba(180,220,180,0.08) inset;
}

.jackpot-reel-strip {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 display: flex;
 flex-direction: column;
 will-change: transform;
}

.jackpot-symbol {
 height: 92px;
 font-size: 46px;
 font-weight: 700;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #d4f0d4;
 text-shadow: 0 2px 0 #0a1f0f, 0 0 3px rgba(0,0,0,0.35);
 background: repeating-linear-gradient(
 180deg,
 #132a18 0px,
 #132a18 45px,
 #0e2214 46px,
 #0e2214 92px
 );
 border-bottom: 1px solid rgba(34,85,34,0.4);
}

.jackpot-reel.is-spinning .jackpot-symbol {
 filter: blur(0.8px) saturate(1.2);
 text-shadow: 0 2px 0 #0a1f0f, 0 0 8px rgba(180,220,180,0.3);
 transition: filter 60ms linear;
}

.jackpot-reel-bezel {
 position: absolute;
 inset: 0;
 pointer-events: none;
 background: linear-gradient(
 to bottom,
 rgba(180,220,180,0.07) 0%,
 rgba(180,220,180,0.0) 16%,
 rgba(0,0,0,0.22) 80%,
 rgba(0,0,0,0.32) 100%
 );
 z-index: 2;
}

/* No small readout anymore — the spinning symbols in the reel window are the "big" display.
 On settle we pop the whole reel for the tiny animation. */
.jackpot-reel.settled {
 animation: jackpot-pop 420ms ease-out;
}

@keyframes jackpot-pop {
 0% { transform: scale(0.6); color: #fff; }
 40% { transform: scale(1.25); }
 70% { transform: scale(0.95); }
 100% { transform: scale(1); color: #f4d48a; }
}

/* Blinky lights (fewer, green tint ok) */
.jackpot-lights {
 display: flex;
 justify-content: center;
 gap: 5px;
 margin: 2px 0 3px;
}
.jackpot-light {
 width: 7px;
 height: 7px;
 background: #4a7a4a;
 border-radius: 50%;
 box-shadow: 0 0 3px #8ab38a, 0 1px 0 #0a1f0f;
 animation: jackpot-blink 1.1s infinite ease-in-out;
}
.jackpot-light.alt {
 background: #f4d48a;
 box-shadow: 0 0 4px #ffe070, 0 1px 0 #0a1f0f;
 animation-delay: 480ms;
}
@keyframes jackpot-blink {
 0%, 100% { opacity: 0.4; }
 50% { opacity: 1; }
}

/* Layout for side-by-side reels + lever on right */
.jackpot-main-flex {
 display: flex;
 align-items: center;
 gap: 10px;
 height: 165px;
 width: 95%;
}

/* === NEW PULL RAIL LEVER (right side, vertical, no separate meter) === */
.jackpot-lever-side {
 width: 42px;
 height: 190px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 position: relative;
 flex-shrink: 0;
}

.lever-rail {
 position: relative;
 width: 13px;
 height: 162px;
 background: #f4d48a;
 border: 2px solid #225522;
 border-radius: 3px;
 box-shadow: 0 1px 2px #0a1f0f inset;
 z-index: 1;
}

.lever-rail-fill {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 0%;
 background: linear-gradient(to bottom, #ffeb3b 0%, #f4a261 45%, #c33 100%);
 transition: height 50ms linear;
 z-index: 1;
 box-shadow: 0 0 4px rgba(200, 50, 50, 0.3);
}

.jackpot-pull-knob {
 letter-spacing: 2px;
 position: absolute;
 left: 20px;
 top: 0;
 transform: translate(-50%, 20%);
 width: 60px;
 height: 60px;
 background: radial-gradient(circle at 35% 30%, #e8f5e8, #f4d48a 55%, #0a1f0f 80%);
 border: 1px solid #0a1f0f; 
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-bangers);
 font-size: 20px;
 font-weight: 700;
 color: white;
 -webkit-text-stroke: 1px var(--border-black);
 z-index: 10;
 cursor: grab;
 user-select: none;
}

.jackpot-pull-knob:active,
.jackpot-pull-knob.dragging {
 cursor: grabbing;
 box-shadow: 0 1px 0 #0a1f0f, 0 0 0 2px #c5e8c5 inset, 0 3px 5px rgba(0,0,0,0.55);
 z-index: 11;
}

.jackpot-status {
 position: absolute;
 bottom: 30px;
 left: 50%;
 transform: translateX(-50%);
 text-align: center;
 font-size: 30px;
 color: #8ab38a;
 min-height: 14px;
 line-height: 1;
 white-space: nowrap;
 text-shadow: 0 1px 1px #0a1f0f;
}

/* Context area sizing (occupies the full context-section, reduced height no scroll) */
.context-section .jackpot-container {
 width: 862px;
 height: 270px;
 margin: -12px !important;
}
.context-section .jackpot-cabinet {
 box-shadow:
 0 0 0 2px #0a1f0f inset,
 0 5px 0 #0a1f0f,
 0 8px 14px rgba(0,0,0,0.55);
}

/* Character modal stats: always read-only (jackpot is the only writer at create) */
#stats-content-modal .stat-value,
#character-modal #stats-content-modal .stat-value {
 cursor: default !important;
 font-weight: 700;
 color: #f4d48a;
 user-select: none;
 pointer-events: none;
 outline: none !important;
 caret-color: transparent;
}

/* Tab buttons temporarily locked (e.g. mem/visuals during new-char creation) — no inline styles */
.tab-btn.tab-locked {
 opacity: 0.55 !important;
 pointer-events: none;
}

/* Jackpot shrink animation for delightful removal on submit */
.jackpot-container.shrinking {
 height: 0 !important;
 max-height: 0 !important;
 opacity: 0;
 margin: 0 !important;
 padding: 0 !important;
 overflow: hidden;
 transition: height 0.35s ease-out, max-height 0.35s ease-out, opacity 0.25s ease-out;
}

/* ============================================================
 FABLEFORGE BULLSEYE CHECK — skill-check visual (jackpot + dartboard)
 Component: bullseye-check.js | Demo: bullseye.html
 playBullseyeCheck({ label, stat, difficulty, outcome })
 outcome: 'success' | 'failure' | 'random'
 Stage gap defaults to ~2× dartboard width (set inline by JS).
 ============================================================ */

.bullseye-check-overlay {
 position: fixed;
 inset: 0;
 background: rgba(10, 8, 5, 0.72);
 z-index: 10000;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 pointer-events: none;
 transition: opacity 180ms ease;
}
.bullseye-check-overlay.visible {
 opacity: 1;
 pointer-events: auto;
}

.bullseye-check-modal {
 background: #1a140f;
 border: 5px solid #5c4633;
 border-radius: 12px;
 box-shadow:
 0 0 0 2px #0a1f0f,
 0 12px 40px rgba(0, 0, 0, 0.75),
 0 0 60px rgba(244, 212, 138, 0.08);
 padding: 18px 28px 20px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 10px;
 max-width: 96vw;
 max-height: 96vh;
 overflow: auto;
 position: relative;
 transform: scale(0.92);
 transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
 font-family: var(--font-vt323, "VT323", monospace);
 color: #d9b36b;
}
.bullseye-check-overlay.visible .bullseye-check-modal {
 transform: scale(1);
}

.bullseye-check-title {
 display: none; /* stat name lives on the reel label only */
 font-family: var(--font-bangers, "Bangers", cursive);
 font-size: 26px;
 color: #f4d48a;
 letter-spacing: 2px;
 text-shadow: 0 0 8px rgba(244, 212, 138, 0.3);
 margin: 0;
}

.bullseye-check-stage {
 display: flex;
 align-items: center;
 /* Default gap; JS sets ~560px (2× board) for long pellet flight */
 gap: 560px;
 justify-content: center;
 padding: 8px 12px;
}

/* Mini single-stat jackpot (reuses .jackpot-* reel styles) */
.bullseye-check-machine {
 position: relative;
 width: 140px;
 flex-shrink: 0;
}
.bullseye-check-machine .jackpot-cabinet {
 width: 140px;
 height: 220px;
 max-height: 220px;
 background: linear-gradient(180deg, #2a3a28 0%, #1a2818 100%);
 border: 4px solid #225522;
 border-radius: 10px;
 box-shadow:
 0 0 0 2px #0a1f0f inset,
 0 6px 0 #0a1f0f,
 0 10px 16px rgba(0, 0, 0, 0.55);
 overflow: visible;
 display: flex;
 align-items: center;
 justify-content: center;
}
.bullseye-check-machine .jackpot-header {
 display: none;
}
.bullseye-check-machine .jackpot-main-flex {
 height: auto;
 margin-top: 8px;
 width: 100%;
}
.bullseye-check-machine .jackpot-reels-row {
 gap: 0;
 margin: 8px 0 0;
 justify-content: center;
}
.bullseye-check-machine .jackpot-reel-wrap {
 width: 80px;
}
.bullseye-check-machine .jackpot-reel-label {
 font-size: 16px;
 max-width: 100px;
 overflow: hidden;
 text-overflow: ellipsis;
 color: #f4d48a;
}
.bullseye-check-machine .jackpot-reel {
 width: 72px;
 height: 80px;
}
.bullseye-check-machine .jackpot-symbol {
 height: 80px;
 font-size: 42px;
 background: repeating-linear-gradient(
 180deg,
 #132a18 0px,
 #132a18 39px,
 #0e2214 40px,
 #0e2214 80px
 );
}

/* Turret pivot disc */
.bullseye-check-turret {
 position: absolute;
 right: -14px;
 top: 50%;
 width: 34px;
 height: 34px;
 margin-top: -17px;
 border-radius: 50%;
 background:
 radial-gradient(circle at 38% 32%, #e8f5e8 0%, #8ab38a 28%, #3a2a20 62%, #1a140f 100%);
 border: 3px solid #0a1f0f;
 box-shadow:
 0 0 0 1px #66543a inset,
 0 3px 6px rgba(0, 0, 0, 0.55),
 0 0 8px rgba(244, 212, 138, 0.15);
 z-index: 4;
 pointer-events: none;
}
.bullseye-check-turret::after {
 content: '';
 position: absolute;
 left: 50%;
 top: 50%;
 width: 10px;
 height: 10px;
 margin: -5px 0 0 -5px;
 border-radius: 50%;
 background: radial-gradient(circle at 35% 30%, #f4d48a, #5c4633 70%, #0a1f0f);
 border: 1px solid #0a1f0f;
}

/* Nozzle — --aim rotates toward each pellet target */
.bullseye-check-nozzle {
 position: absolute;
 right: -36px;
 top: 50%;
 margin-top: -9px;
 --aim: 0deg;
 transform: rotate(var(--aim));
 transform-origin: 6px 50%;
 width: 30px;
 height: 18px;
 background: linear-gradient(90deg, #3a2a20, #66543a 40%, #f4d48a);
 border: 2px solid #0a1f0f;
 border-radius: 2px 10px 10px 2px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 z-index: 5;
 transition: transform 70ms ease-out;
}
.bullseye-check-nozzle::after {
 content: '';
 position: absolute;
 right: -4px;
 top: 50%;
 transform: translateY(-50%);
 width: 8px;
 height: 8px;
 background: #1a140f;
 border-radius: 50%;
 border: 1px solid #66543a;
}
.bullseye-check-nozzle.firing {
 animation: bullseye-check-nozzle-kick 90ms ease-out;
 filter: brightness(1.4);
}
@keyframes bullseye-check-nozzle-kick {
 0% { transform: rotate(var(--aim)) translateX(0); }
 50% { transform: rotate(var(--aim)) translateX(5px); }
 100% { transform: rotate(var(--aim)) translateX(0); }
}

/* Dartboard */
.bullseye-check-board-wrap {
 position: relative;
 width: 280px;
 height: 280px;
 flex-shrink: 0;
}
.bullseye-check-board {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 box-sizing: border-box;
 background:
 radial-gradient(circle at 50% 50%,
 transparent 0%,
 transparent 18%,
 #1a2818 18.5%,
 #1a2818 36%,
 #0e1a10 36.5%,
 #0e1a10 54%,
 #1a2818 54.5%,
 #1a2818 72%,
 #0e1a10 72.5%,
 #0e1a10 90%,
 #225522 90.5%,
 #0a1f0f 100%);
 border: 6px solid #3a2a20;
 box-shadow:
 0 0 0 3px #0a1f0f,
 0 8px 20px rgba(0, 0, 0, 0.55),
 inset 0 0 30px rgba(0, 0, 0, 0.35);
 overflow: hidden;
}
.bullseye-check-board::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: 50%;
 background:
 repeating-conic-gradient(
 from 0deg,
 rgba(244, 212, 138, 0.07) 0deg 18deg,
 transparent 18deg 36deg
 );
 pointer-events: none;
}
.bullseye-check-eye {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 border-radius: 50%;
 background:
 radial-gradient(circle at 40% 35%,
 #ffe070 0%,
 #e8b830 35%,
 #c33 70%,
 #8b1a1a 100%);
 box-shadow:
 0 0 0 2px #0a1f0f,
 0 0 12px rgba(232, 80, 60, 0.55),
 inset 0 2px 4px rgba(255, 255, 255, 0.25);
 transition: width 200ms ease, height 200ms ease;
 z-index: 2;
}
.bullseye-check-eye.hit-flash {
 animation: bullseye-check-hit 480ms ease-out;
}
@keyframes bullseye-check-hit {
 0% { box-shadow: 0 0 0 2px #0a1f0f, 0 0 8px rgba(232, 80, 60, 0.4); }
 40% {
 box-shadow: 0 0 0 4px #fff, 0 0 40px rgba(255, 220, 80, 0.95), 0 0 80px rgba(255, 100, 50, 0.7);
 transform: translate(-50%, -50%) scale(1.25);
 }
 100% {
 box-shadow: 0 0 0 2px #0a1f0f, 0 0 12px rgba(232, 80, 60, 0.55);
 transform: translate(-50%, -50%) scale(1);
 }
}

/* Pellets (fixed to viewport) + impact marks on board */
.bullseye-check-pellet {
 position: fixed;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: radial-gradient(circle at 35% 30%, #fff, #f4d48a 50%, #8b6914);
 box-shadow: 0 0 6px rgba(244, 212, 138, 0.8);
 z-index: 10050;
 pointer-events: none;
 will-change: left, top, transform, opacity;
}
.bullseye-check-impact {
 position: absolute;
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: #1a140f;
 border: 1px solid #66543a;
 box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
 transform: translate(-50%, -50%);
 z-index: 3;
 pointer-events: none;
}
.bullseye-check-impact.hit {
 background: radial-gradient(circle, #ffe070, #c33);
 border-color: #fff;
 width: 10px;
 height: 10px;
 box-shadow: 0 0 10px rgba(255, 200, 50, 0.9);
 z-index: 4;
}

/* Result banner */
.bullseye-check-result {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 8px;
 opacity: 0;
 pointer-events: none;
 z-index: 20;
 transition: opacity 120ms ease;
}
.bullseye-check-result.show {
 opacity: 1;
}
.bullseye-check-result-text {
 font-family: var(--font-bangers, "Bangers", cursive);
 font-size: 56px;
 letter-spacing: 3px;
 -webkit-text-stroke: 2px #0a1f0f;
 text-shadow: 0 4px 0 #0a1f0f, 0 0 30px rgba(0, 0, 0, 0.5);
 transform: scale(0.4) rotate(-6deg);
 transition: transform 280ms cubic-bezier(0.23, 1.2, 0.32, 1);
 white-space: nowrap;
}
.bullseye-check-result.show .bullseye-check-result-text {
 transform: scale(1) rotate(-3deg);
}
.bullseye-check-result.success {
 background: radial-gradient(circle, rgba(40, 120, 40, 0.55), rgba(10, 20, 10, 0.75));
}
.bullseye-check-result.success .bullseye-check-result-text {
 color: #7dff7d;
 text-shadow: 0 4px 0 #0a1f0f, 0 0 40px rgba(100, 255, 100, 0.7);
}
.bullseye-check-result.failure {
 background: radial-gradient(circle, rgba(120, 30, 30, 0.55), rgba(20, 8, 8, 0.75));
}
.bullseye-check-result.failure .bullseye-check-result-text {
 color: #ff6b6b;
 text-shadow: 0 4px 0 #0a1f0f, 0 0 40px rgba(255, 80, 80, 0.55);
}