/* Coin-flip bonus overlay. Calm while waiting, tighter as tiers collect, bright
   only at the win. DOM + CSS around one small 3D canvas; animates transform,
   opacity and filter only. Sizes come from coin-flip-bonus.js (--cfb-coin). */
.cfb{--cfb-coin:72px;--cfb-cols:3;--cfb-mini:#35dc96;--cfb-minor:#5b9bff;--cfb-major:#c887ff;--cfb-grand:#ffd451;position:absolute;inset:0;z-index:12;display:grid;place-items:center;padding:calc(max(12px,env(safe-area-inset-top)) + var(--cfb-top,0px)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow:hidden;color:var(--text-primary);font-family:var(--font-ui);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* Jackpot tier jewels: result-presentation colours, deliberately richer than the UI tokens. */
.cfb [data-tier="mini"]{--cfb-tier:var(--cfb-mini)}
.cfb [data-tier="minor"]{--cfb-tier:var(--cfb-minor)}
.cfb [data-tier="major"]{--cfb-tier:var(--cfb-major)}
.cfb [data-tier="grand"]{--cfb-tier:var(--cfb-grand)}
.cfb[data-win-tier="mini"]{--cfb-win:var(--cfb-mini)}
.cfb[data-win-tier="minor"]{--cfb-win:var(--cfb-minor)}
.cfb[data-win-tier="major"]{--cfb-win:var(--cfb-major)}
.cfb[data-win-tier="grand"]{--cfb-win:var(--cfb-grand)}

/* The veil hides the table and any loose coins on it; darker where the coins sit. */
.cfb-veil{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,color-mix(in srgb,var(--color-field) 12%,transparent),color-mix(in srgb,var(--color-field) 30%,transparent))}
.cfb-veil::after{content:"";position:absolute;inset:0;background:var(--color-field);opacity:0;transition:opacity 280ms var(--ease-standard)}
.cfb[data-progress="1"] .cfb-veil::after{opacity:.04}
.cfb[data-hush="true"] .cfb-veil::after,.cfb[data-win-tier="major"] .cfb-veil::after,.cfb[data-win-tier="grand"] .cfb-veil::after{opacity:.16}
.cfb-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* 3D path: real coins are drawn on the canvas; buttons stay as hit targets. */
.cfb[data-render="3d"] .cfb-coin-inner,.cfb[data-render="3d"] .cfb-item{visibility:hidden}
.cfb[data-render="3d"] .cfb-coin{opacity:1;filter:none;animation:none;transform:none}

/* One light behind the winners. Size and motion grow with the tier; it flares once. */
.cfb-light{position:absolute;left:var(--cfb-fx,50%);top:var(--cfb-fy,45%);width:0;height:0;pointer-events:none}
.cfb-light i{position:absolute;left:0;top:0;width:calc(var(--cfb-coin)*var(--cfb-glow,3));aspect-ratio:1;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.4)}
.cfb-halo{background:radial-gradient(circle,color-mix(in srgb,var(--cfb-win,var(--color-gold)) 55%,transparent) 0,color-mix(in srgb,var(--cfb-win,var(--color-gold)) 18%,transparent) 38%,transparent 68%)}
.cfb-rays{background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--cfb-win,var(--color-gold)) 30%,transparent) 0 8deg,transparent 8deg 30deg);mask:radial-gradient(circle,#000 0,transparent 66%);-webkit-mask:radial-gradient(circle,#000 0,transparent 66%)}
.cfb[data-win-tier="mini"]{--cfb-glow:2.6}
.cfb[data-win-tier="minor"]{--cfb-glow:3.6}
.cfb[data-win-tier="major"]{--cfb-glow:5.4}
.cfb[data-win-tier="grand"]{--cfb-glow:8}
.cfb[data-win-tier] .cfb-halo{animation:cfb-flare 520ms var(--ease-standard) both}
.cfb[data-win-tier="mini"] .cfb-halo{--cfb-peak:.5;--cfb-rest:.3}
.cfb[data-win-tier="minor"] .cfb-halo{--cfb-peak:.75;--cfb-rest:.45}
.cfb[data-win-tier="major"] .cfb-halo{--cfb-peak:.95;--cfb-rest:.6;animation-duration:700ms}
.cfb[data-win-tier="grand"] .cfb-halo{--cfb-peak:1;--cfb-rest:.75;animation-duration:900ms}
.cfb[data-win-tier="major"] .cfb-rays{animation:cfb-rays-in 700ms var(--ease-standard) both,cfb-turn 18s linear infinite;--cfb-rest:.5}
.cfb[data-win-tier="grand"] .cfb-rays{animation:cfb-rays-in 900ms var(--ease-standard) both,cfb-turn 12s linear infinite;--cfb-rest:.85}

.cfb-item{position:absolute;left:0;top:0;width:72px;height:72px;border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(circle at 35% 30%,var(--text-primary) 0,var(--color-gold) 40%,var(--color-gold-strong) 100%);box-shadow:0 0 0 3px var(--color-red),0 0 24px var(--color-gold)}
.cfb-item::after{content:"";position:absolute;inset:36%;border-radius:12%;background:var(--color-field)}
.cfb-stage{position:relative;display:grid;grid-template-areas:"head" "ladder" "board" "foot";grid-template-rows:28px 58px auto 48px;gap:8px;justify-items:center;width:100%;max-width:560px;min-height:0}
.cfb[data-ladder="side"] .cfb-stage{grid-template-areas:"head head" "ladder board" "foot foot";grid-template-columns:132px auto;grid-template-rows:28px auto 48px;justify-content:center;max-width:none}
.cfb[data-fits="false"]{overflow-y:auto;place-items:start center}
.cfb-headrow{grid-area:head;position:relative;display:grid;place-items:center;width:100%;min-width:0;height:28px}
.cfb-head{max-width:calc(100% - 96px);overflow:hidden;font:700 15px/28px var(--font-ui);white-space:nowrap;text-overflow:ellipsis;text-align:center;transition:opacity 180ms var(--ease-standard)}
.cfb[data-phase="win"] .cfb-head,.cfb[data-phase="result"] .cfb-head{color:var(--cfb-win,var(--text-primary));font:900 19px/28px var(--font-bet);letter-spacing:.02em;text-shadow:0 2px 0 var(--color-field)}
.cfb[data-hush="true"] .cfb-head{opacity:0}
.cfb-help-button{position:absolute;right:-8px;top:50%;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--text-muted);transform:translateY(-50%);touch-action:manipulation}
.cfb-help-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.cfb-help-button:hover,.cfb-help-button[aria-expanded="true"]{color:var(--text-primary)}
.cfb-help-button:focus-visible,.cfb-done:focus-visible{outline:2px solid var(--text-primary);outline-offset:-2px;border-radius:8px}
.cfb:not([data-phase="pick"]) .cfb-help-button{visibility:hidden}
.cfb-help{position:absolute;z-index:3;left:50%;top:calc(max(12px,env(safe-area-inset-top)) + var(--cfb-top,0px) + 36px);width:min(320px,calc(100% - 24px));margin:0;padding:10px 12px;border:1px solid var(--color-line);border-radius:8px;background:var(--color-panel);color:var(--text-primary);font:500 12px/18px var(--font-ui);text-align:left;transform:translateX(-50%);box-shadow:var(--shadow-2)}

/* Tier ladder. Plain while nothing is collected; each plaque lights with its own count. */
.cfb-ladder{grid-area:ladder;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%;margin:0;padding:0;list-style:none}
.cfb-row{position:relative;display:grid;grid-template-columns:14px auto;grid-template-rows:16px 18px 12px;align-content:center;justify-content:center;align-items:center;column-gap:4px;min-width:0;padding:4px 2px;border:1px solid var(--color-line-soft);border-radius:8px;background:var(--color-field);transition:border-color 180ms var(--ease-standard),opacity 180ms var(--ease-standard),transform 240ms var(--ease-standard)}
.cfb-row::before{content:"";position:absolute;inset:0;border-radius:7px;background:linear-gradient(180deg,color-mix(in srgb,var(--cfb-tier) 42%,transparent),transparent 80%);opacity:0;transition:opacity 240ms var(--ease-standard)}
.cfb-row>*{position:relative}
.cfb-row .cfb-mark{width:14px;height:14px;color:var(--cfb-tier)}
.cfb-mark svg{display:block;width:100%;height:100%;fill:currentColor}
.cfb-name{font:800 11px/16px var(--font-bet);letter-spacing:.05em;color:var(--cfb-tier)}
.cfb-prize{grid-column:1/-1;overflow:hidden;font:700 13px/18px var(--font-money);font-variant-numeric:tabular-nums;white-space:nowrap;text-overflow:ellipsis;text-align:center}
.cfb-pips{grid-column:1/-1;display:flex;justify-content:center;gap:4px}
.cfb-pips i{width:8px;height:8px;border:1px solid var(--cfb-tier);border-radius:50%;opacity:.45}
.cfb-row[data-count="1"] .cfb-pips i:nth-child(-n+1),.cfb-row[data-count="2"] .cfb-pips i:nth-child(-n+2),.cfb-row[data-count="3"] .cfb-pips i{background:var(--cfb-tier);opacity:1}
.cfb-row[data-count="1"]::before{opacity:.35}
.cfb-row[data-count="1"]{border-color:color-mix(in srgb,var(--cfb-tier) 40%,transparent)}
.cfb-row[data-near="true"]{border-color:var(--cfb-tier)}
.cfb-row[data-near="true"]::before{opacity:.8;animation:cfb-breathe 900ms ease-in-out infinite}
.cfb-row[data-near="true"] .cfb-pips i:nth-child(3){animation:cfb-pip 800ms ease-in-out infinite}
.cfb-row[data-won="true"]{z-index:1;border-color:var(--cfb-tier);transform:scale(1.06)}
.cfb-row[data-won="true"]::before{opacity:1;background:linear-gradient(180deg,color-mix(in srgb,var(--cfb-tier) 70%,transparent),color-mix(in srgb,var(--cfb-tier) 22%,transparent))}
.cfb-row[data-won="true"] .cfb-name,.cfb-row[data-won="true"] .cfb-mark{color:var(--text-primary)}
.cfb[data-win-tier] .cfb-row:not([data-won]),.cfb[data-hush="true"] .cfb-row{opacity:.35}
.cfb[data-ladder="side"] .cfb-ladder{grid-template-columns:1fr;grid-auto-rows:32px;align-self:center}
.cfb[data-ladder="side"] .cfb-row{grid-template-columns:14px auto 1fr;grid-template-rows:15px 15px;justify-content:stretch;padding:0 8px}
.cfb[data-ladder="side"] .cfb-name{line-height:15px}
.cfb[data-ladder="side"] .cfb-prize{grid-column:1/3;grid-row:2;line-height:15px;text-align:left;overflow:visible}
.cfb[data-ladder="side"] .cfb-pips{grid-column:3;grid-row:2;justify-content:flex-end}
.cfb[data-ladder="side"] .cfb-row[data-won="true"]{transform:scale(1.03)}
.cfb[data-compact="true"] .cfb-ladder{grid-template-columns:1fr 1fr;grid-auto-rows:auto;align-self:center;gap:4px}
.cfb[data-compact="true"] .cfb-row{grid-template-columns:12px auto;grid-template-rows:14px 14px 10px;justify-content:center;padding:2px}
.cfb[data-compact="true"] .cfb-row .cfb-mark{width:12px;height:12px}
.cfb[data-compact="true"] .cfb-name{font-size:10px;line-height:14px;letter-spacing:0}
.cfb[data-compact="true"] .cfb-prize{grid-column:1/-1;grid-row:2;font-size:11px;line-height:14px;text-align:center}
.cfb[data-compact="true"] .cfb-pips{grid-column:1/-1;grid-row:3;justify-content:center}
.cfb[data-compact="true"] .cfb-pips i{width:6px;height:6px}
.cfb:focus{outline:none}

/* Coins (CSS fallback faces; the 3D canvas replaces them when available). */
.cfb-board{grid-area:board;position:relative;display:grid;place-items:center}
.cfb-grid{position:relative;display:grid;grid-template-columns:repeat(var(--cfb-cols),var(--cfb-coin));gap:8px}
.cfb-coin{position:relative;width:var(--cfb-coin);height:var(--cfb-coin);padding:0;border:0;border-radius:50%;background:transparent;perspective:calc(var(--cfb-coin)*4);touch-action:manipulation;transition:transform 120ms var(--ease-standard),opacity 180ms var(--ease-standard),filter 180ms var(--ease-standard)}
.cfb-coin:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
.cfb[data-phase="pick"] .cfb-coin:not(.is-revealed):hover{filter:brightness(1.1)}
.cfb[data-phase="pick"] .cfb-coin:not(.is-revealed):active{transform:scale(.94)}
.cfb:not([data-phase="pick"]) .cfb-coin,.cfb-coin.is-revealed{cursor:default}
.cfb-coin-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 420ms cubic-bezier(.18,.82,.22,1)}
.cfb-coin.is-revealed .cfb-coin-inner{transform:rotateY(180deg)}
.cfb-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cfb-back{background:radial-gradient(circle at 35% 30%,var(--text-primary) 0,var(--color-gold) 40%,var(--color-gold-strong) 100%);box-shadow:inset 0 0 0 calc(var(--cfb-coin)*.05) color-mix(in srgb,var(--color-field) 30%,transparent),0 3px 6px #0006}
.cfb-back::before{content:"";position:absolute;inset:14%;border:1px solid color-mix(in srgb,var(--color-field) 35%,transparent);border-radius:50%}
.cfb-back::after{content:"";width:26%;height:26%;border-radius:12%;background:var(--color-field);box-shadow:0 0 0 calc(var(--cfb-coin)*.03) var(--color-gold-strong)}
.cfb-front{transform:rotateY(180deg);align-content:center;gap:calc(var(--cfb-coin)*.02);background:radial-gradient(circle at 40% 32%,color-mix(in srgb,var(--cfb-tier) 70%,var(--text-primary)),var(--cfb-tier) 45%,color-mix(in srgb,var(--cfb-tier) 35%,var(--color-field)) 100%);box-shadow:inset 0 0 0 calc(var(--cfb-coin)*.06) var(--color-gold),0 3px 6px #0006;color:var(--color-field)}
.cfb-front .cfb-mark{width:calc(var(--cfb-coin)*.36);height:calc(var(--cfb-coin)*.36)}
.cfb-front b{font:900 calc(var(--cfb-coin)*.15)/1.1 var(--font-bet);letter-spacing:.02em}
.cfb-coin.is-near .cfb-front{animation:cfb-near 800ms ease-in-out infinite}
.cfb-coin.is-winner{z-index:1;animation:cfb-win 640ms var(--ease-standard) 2;filter:drop-shadow(0 0 8px var(--cfb-tier))}
.cfb-coin.is-dim{opacity:.32}
.cfb-coin.is-rest{opacity:.4;transform:scale(.86)}

/* Prize plate for MAJOR and GRAND, placed under the gathered winners. */
.cfb-banner{position:absolute;z-index:2;left:var(--cfb-bx,50%);top:var(--cfb-by,60%);display:grid;justify-items:center;gap:2px;max-width:calc(100% - 24px);pointer-events:none;transform:translate(-50%,-50%);text-align:center;animation:cfb-plate 520ms var(--ease-standard) both}
.cfb-banner-name{font:900 clamp(16px,calc(var(--cfb-room,80px)*.22),28px)/1.1 var(--font-bet);letter-spacing:.14em;color:var(--cfb-win);text-shadow:0 2px 0 var(--color-field)}
.cfb-banner-prize{font:800 clamp(26px,calc(var(--cfb-room,80px)*.42),56px)/1.05 var(--font-money);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap;color:var(--text-primary);-webkit-text-stroke:1px var(--color-field);paint-order:stroke fill;text-shadow:0 3px 0 var(--color-field),0 0 18px color-mix(in srgb,var(--cfb-win) 70%,transparent)}
.cfb[data-win-tier="grand"] .cfb-banner-prize{font-size:clamp(30px,calc(var(--cfb-room,80px)*.5),68px);color:var(--cfb-grand)}
.cfb[data-win-tier="grand"] .cfb-banner{animation-duration:700ms}

.cfb-foot{grid-area:foot;display:grid;place-items:center;width:100%;min-width:0}
.cfb-done{min-width:176px;min-height:44px;padding:8px 20px;border:1px solid var(--color-line);border-radius:8px;background:var(--color-panel);color:var(--text-primary);font:700 14px/20px var(--font-ui);touch-action:manipulation;transition:transform 120ms var(--ease-standard),filter 180ms var(--ease-standard);animation:cfb-rise 240ms var(--ease-standard) both}
.cfb-done:hover{filter:brightness(1.15)}
.cfb-done:active{transform:translateY(1px)}
/* Small but always legible: these amounts are examples and nothing is paid. */
.cfb-dev{position:absolute;z-index:2;left:50%;bottom:max(1px,env(safe-area-inset-bottom));max-width:calc(100% - 16px);transform:translateX(-50%);color:var(--text-muted);font:600 9px/11px var(--font-ui);letter-spacing:.04em;white-space:nowrap;pointer-events:none}

@keyframes cfb-pip{50%{opacity:.25;transform:scale(1.5)}}
@keyframes cfb-breathe{50%{opacity:.45}}
@keyframes cfb-near{50%{filter:brightness(1.35)}}
@keyframes cfb-win{50%{transform:scale(1.14)}}
@keyframes cfb-flare{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}45%{opacity:var(--cfb-peak,.8);transform:translate(-50%,-50%) scale(1.12)}100%{opacity:var(--cfb-rest,.5);transform:translate(-50%,-50%) scale(1)}}
@keyframes cfb-rays-in{0%{opacity:0}100%{opacity:var(--cfb-rest,.5)}}
@keyframes cfb-turn{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes cfb-plate{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes cfb-rise{from{opacity:0;transform:translateY(8px)}}
@media(max-width:359px){
  .cfb-prize{font-size:12px}
  .cfb-name{font-size:10px;letter-spacing:0}
}
/* Weak devices and reduced motion keep the reveal and the win, without the turning rays. */
.cfb[data-quality="low"] .cfb-rays{transform:translate(-50%,-50%);animation:cfb-rays-in 700ms var(--ease-standard) both}
@media(prefers-reduced-motion:reduce){.cfb-rays{display:none}}
/* DEV preview page only: its status caption must not show through the veil. */
.preview-arena[data-coin-flip-state="open"] .preview-caption{visibility:hidden}

/* Bonus entrance: only the two sampled door leaves move; room props stay still. */
.cfb-door-room{position:absolute;inset:0;pointer-events:none}
.cfb-door-portal{position:absolute;overflow:hidden;background:radial-gradient(ellipse at 50% 85%,var(--color-gold-strong),var(--color-field) 66%);box-shadow:inset 0 0 18px var(--color-field)}
.cfb-door-leaf{position:absolute;top:0;width:50%;height:100%;will-change:transform}
.cfb-door-leaf canvas{display:block;width:100%;height:100%}
.cfb-door-seam{position:absolute;left:calc(50% - 1px);top:0;width:2px;height:100%;background:var(--text-primary);box-shadow:0 0 8px 1px var(--color-gold);opacity:0;pointer-events:none}
.cfb-door-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 80%,var(--color-gold),transparent 75%);opacity:0;pointer-events:none}
.cfb-door-vault{position:absolute;inset:16% 21% 10%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,minmax(0,1fr));gap:5%;opacity:0;align-items:center;justify-items:center}
.cfb-door-token{display:block;position:relative;height:80%;width:auto;max-width:100%;aspect-ratio:1;border-radius:50%;border:2px solid var(--color-gold);background:radial-gradient(circle at 35% 25%,var(--text-primary),var(--color-gold-strong) 74%);box-shadow:inset 0 0 0 2px var(--color-gold-strong),0 2px 3px var(--color-field)}
@media(prefers-reduced-motion:reduce){.cfb-door-leaf{will-change:auto}}

.cfb-door-token::after{content:"";position:absolute;inset:35%;background:var(--color-field);border:1px solid var(--color-gold);border-radius:1px}

.cfb-door-key{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;border:2px solid var(--text-primary);background:var(--color-gold);box-shadow:0 0 18px var(--color-gold);pointer-events:none}

.cfb-door-beam{position:absolute;pointer-events:none;transform-origin:50% 12%;opacity:0;background:radial-gradient(ellipse at 50% 22%,color-mix(in srgb,var(--color-gold) 38%,transparent),color-mix(in srgb,var(--color-gold) 14%,transparent) 38%,transparent 72%)}
.cfb-door-vault{inset:0;display:block;background:radial-gradient(ellipse at 50% 90%,color-mix(in srgb,var(--color-gold) 24%,transparent),transparent 65%);opacity:1}

.cfb-head{ text-shadow:0 1px 4px var(--color-field),0 2px 8px var(--color-field)}

/* Keep the habitual strike position available throughout the bonus. */
.cfb[data-quick-open="true"]{padding-bottom:var(--cfb-bottom,128px)}
.cfb-open{position:absolute;z-index:4;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px;border:2px solid var(--text-muted);border-radius:50%;background:var(--color-field);color:var(--text-primary);font:700 12px/16px var(--font-ui);touch-action:manipulation}
.cfb-open svg{width:52%;height:52%;fill:currentColor;pointer-events:none}.cfb-open span{pointer-events:none}
.cfb-open:disabled{opacity:.4}.cfb-open:active:not(:disabled){filter:brightness(1.2)}.cfb-open:focus-visible{outline:2px solid var(--color-gold);outline-offset:3px}
.cfb[data-quick-open="true"] .cfb-done{display:none}
.cfb-door-portal{background:var(--color-field)}
.cfb-door-vault{background:linear-gradient(color-mix(in srgb,var(--color-field) 25%,transparent),color-mix(in srgb,var(--color-field) 42%,transparent)),url('./assets/backgrounds/lantern-room-clean-wide.png') center 44% / auto 150%;box-shadow:inset 12px 0 18px color-mix(in srgb,var(--color-field) 55%,transparent),inset -12px 0 18px color-mix(in srgb,var(--color-field) 55%,transparent)}
html[data-edition="extreme"] .cfb-door-vault{background-image:linear-gradient(color-mix(in srgb,var(--color-field) 25%,transparent),color-mix(in srgb,var(--color-field) 42%,transparent)),url('./assets/backgrounds/lantern-room-extreme-indigo-wide.png')}