/* ============================================================================
   BracketReel — shared reel styles. Pair with reel.js.
   Scope: everything INSIDE the reel + the scaling stage. Host pages provide
   their own page chrome (download panels, body layout, etc).
   ============================================================================ */
.reel-host{
  --ink:#0a0d14; --paper:#10141d; --paper2:#161b26;
  --line:rgba(255,255,255,.09);
  --chalk:#f2f3f5; --mute:#8b93a3;
  --lime:#d9ff3c; --blue:#2f6bff;
  --slot:#1c2230; --slot-ring:rgba(255,255,255,.10);
  position:relative;
}
.reel-host .anton{ font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:-.01em; }

/* fixed 9:16 stage, scaled as one unit (approach A) */
.reel-host .stage{ width:300px; height:533px; position:relative; margin:0 auto; }
.reel-host .stage-inner{ position:absolute; top:0; left:50%;
  transform:translateX(-50%) scale(var(--reel-scale,1)); transform-origin:top center; }
/* full-viewport host centers the stage in the screen */
.reel-host--full{ width:100vw; height:100dvh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#000; }
.reel-host--full .stage-inner{ top:50%; transform:translate(-50%,-50%) scale(var(--reel-scale,1)); transform-origin:center center; }
.reel-host--full .vreel{ border-radius:0 !important; box-shadow:none !important; }

.reel-host .vreel{ position:relative; width:300px; height:533px; border-radius:26px; overflow:hidden;
  background:radial-gradient(120% 70% at 80% 8%, rgba(47,107,255,.28), transparent 55%),
             radial-gradient(90% 60% at 15% 100%, rgba(47,107,255,.10), transparent 60%),
             linear-gradient(180deg,#0e1626 0%, #0a1019 55%, #070b12 100%);
  box-shadow:0 40px 90px -36px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06) inset; }

/* scenes */
.reel-host .vscene{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .55s ease; }
.reel-host .vscene.on{ opacity:1; pointer-events:auto; }

/* ===== SCENE 1: bracket ===== */
.reel-host .b-head{ position:absolute; top:46px; left:0; right:0; text-align:center; z-index:5; }
.reel-host .b-title{ font-size:12px; font-weight:700; letter-spacing:.04em; color:#8b93a3; }
.reel-host .b-round{ font-family:'Archivo',sans-serif; font-weight:900; font-size:22px; text-transform:uppercase;
  color:#fff; line-height:1; margin-top:3px; text-shadow:0 2px 10px rgba(0,0,0,.35); }
/* logo near the bottom of the bracket screen, centered */
.reel-host .b-foot{ position:absolute; bottom:20px; left:0; right:0; z-index:5; display:flex; align-items:center; justify-content:center; }
.reel-host .b-foot .brlogo{ height:20px; width:auto; display:block; }
.reel-host .brlogo-img{ height:20px; width:auto; max-width:200px; object-fit:contain; display:block; }

/* central watermark "26" */
.reel-host .b-center{ position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:46%;
  z-index:1; pointer-events:none; }
/* central watermark "26": a direct child of the bracket scene, spanning the full
   300px reel width with text-align:center (true reel-center, no % or transforms),
   and an explicit top + fixed-height line box. Fully deterministic for html2canvas
   so it sits in the identical spot in every captured frame. */
.reel-host .b-26{ position:absolute; left:0; right:0; top:197px; height:170px; line-height:170px;
  text-align:center; z-index:1; pointer-events:none;
  font-family:'Archivo',sans-serif; font-weight:900; font-size:170px;
  color:rgba(255,255,255,.05); letter-spacing:-.04em; user-select:none; white-space:nowrap; }
.reel-host .b-center{ position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:46%;
  z-index:1; pointer-events:none; }
.reel-host .slot.fin{ position:absolute; left:50%; transform:translateX(-50%); z-index:4; width:36px; height:24px; }
.reel-host #s_f_0{ top:calc(50% - 28px); }
.reel-host #s_f_1{ top:calc(50% + 4px); }

/* bracket grid */
.reel-host .bracket{ position:absolute; inset:90px 16px 46px; z-index:3; display:flex; justify-content:space-between; }
.reel-host .side{ display:flex; gap:9px; }
.reel-host .side.right{ flex-direction:row-reverse; }
.reel-host .col{ display:flex; flex-direction:column; justify-content:space-around; }

/* flags — one size for every round */
.reel-host .slot{ width:36px; height:24px; border-radius:8px; position:relative; }
.reel-host .col.r16 .slot, .reel-host .col.qf .slot, .reel-host .col.sf .slot{ width:36px; height:24px; }
.reel-host .slot .empty{ position:absolute; inset:0; border-radius:9px; background:#1c2230; border:1px solid rgba(255,255,255,.10); }
.reel-host .slot .bubble{ position:absolute; inset:0; border-radius:9px; overflow:hidden;
  border:2px solid rgba(255,255,255,.9); box-shadow:0 3px 8px rgba(0,0,0,.35); opacity:0; }
.reel-host .slot.filled .bubble{ opacity:1; }
.reel-host .slot.filled .empty{ opacity:0; }
.reel-host .bubble .fsvg{ width:100%; height:100%; display:block; }

/* connector lines */
.reel-host .lines{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.reel-host .lines svg{ width:100%; height:100%; display:block; }
.reel-host .lines path{ stroke:rgba(255,255,255,.08); stroke-width:1; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* flyer */
.reel-host .flyer{ position:absolute; z-index:7; border-radius:9px; overflow:hidden;
  border:2px solid rgba(255,255,255,.9); box-shadow:0 0 0 2px var(--lime), 0 6px 16px rgba(0,0,0,.5);
  will-change:transform; pointer-events:none; }
.reel-host .flyer .fsvg{ width:100%; height:100%; display:block; }

/* ===== SCENE 2: champion ===== */
.reel-host .vchamp{ background:radial-gradient(80% 55% at 50% 30%, rgba(217,255,60,.12), transparent 60%),
  linear-gradient(180deg,#0c1018,#06080d);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; text-align:center; padding:0 26px 78px; }
.reel-host .vc-trophy{ font-size:60px; filter:drop-shadow(0 8px 24px rgba(217,255,60,.25)); opacity:0; transform:translateY(10px) scale(.8); }
.reel-host .vc-eyebrow{ margin-top:14px; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--lime); font-weight:700; opacity:0; }
.reel-host .vc-flag{ margin-top:16px; width:105px; height:70px; border-radius:12px; overflow:hidden; border:2px solid rgba(255,255,255,.85); box-shadow:0 12px 30px rgba(0,0,0,.5);
  opacity:0; transform:scale(.6); }
.reel-host .vc-flag .fsvg{ width:100%; height:100%; }
.reel-host .vc-name{ font-family:'Archivo',sans-serif; font-weight:900; font-size:46px; line-height:.95; text-transform:uppercase; margin-top:18px;
  white-space:nowrap; max-width:100%; opacity:0; transform:translateY(12px); }
.reel-host .vc-sub{ font-size:15px; color:var(--lime); font-weight:600; margin-top:8px; opacity:0; }
/* champion footer: just the logo, centered (no "Made with") */
.reel-host .vc-tag{ position:absolute; bottom:20px; left:0; right:0; opacity:0;
  display:flex; align-items:center; justify-content:center; }
.reel-host .vc-tag .brlogo{ height:20px; width:auto; display:block; }

/* ===== play / replay overlay ===== */
.reel-host .vplay{ position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
  background:rgba(6,9,15,.55); backdrop-filter:blur(2px); cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity .35s ease; }
.reel-host .vplay.show{ opacity:1; pointer-events:auto; }
.reel-host .vplay-btn{ display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer;
  background:var(--lime); color:#10120a; font-family:'Hanken Grotesk',sans-serif; font-weight:600; font-size:15px;
  padding:13px 24px; border-radius:13px; box-shadow:0 12px 34px -10px rgba(217,255,60,.6);
  transition:transform .15s ease, box-shadow .3s ease; }
.reel-host .vplay:hover .vplay-btn{ transform:translateY(-2px); }
.reel-host .vplay-btn:active{ transform:translateY(1px); }
.reel-host .vplay-ic{ width:18px; height:18px; }
.reel-host .vplay-label{ line-height:1; }

/* during PNG capture: square corners */
.vreel.capturing{ border-radius:0 !important; box-shadow:none !important; }