/* ============================================================
   BREAKTHROUGH — the REALM card game. Phone first, portrait.
   ============================================================ */
@font-face{font-family:"Pixelify Sans";src:url("fonts/pixelify-sans.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk.woff2") format("woff2");font-weight:300 700;font-display:swap}
:root{
  --void:#05020c;--ink:#0d0819;--ink2:#160c26;--line:rgba(227,186,92,.3);
  --gold:#e3ba5c;--gold2:#fff1c2;--bone:#f4efe4;--dim:#a597cf;--faint:#6d6192;
  --chips:#5cf0ff;--mult:#ff4fc3;--x:#ffd35c;
  --Cold:#5cf0ff;--Rose:#ff7ac8;--Warm:#ffc94a;--Acid:#8dff5c;--Opposed:#b18cff;
  --px:"Pixelify Sans",system-ui,sans-serif;--num:"Space Grotesk",system-ui,sans-serif;
  --cw:76px;--ch:130px;
}
/* no zoom anywhere: the page may only scroll up and down (pan-y), and the game screen takes no gestures at all */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html,body{touch-action:manipulation;margin:0;height:100%;background:var(--void);color:var(--bone);font-family:var(--px);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
html,body{overflow-x:hidden;max-width:100%}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
.num,b{font-variant-numeric:tabular-nums}

/* the swirling sky behind everything */
.bt-sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(ellipse 80% 55% at 50% 38%,#3a1458 0%,#14072a 55%,var(--void) 100%)}
.bt-ring{position:absolute;left:50%;top:38%;width:150vmax;height:150vmax;margin:-75vmax;border-radius:50%;
  background:repeating-conic-gradient(rgba(197,107,255,.10) 0 6deg,transparent 6deg 18deg);animation:btSpin 60s linear infinite}
.bt-ring.b{background:repeating-conic-gradient(rgba(92,240,255,.06) 0 3deg,transparent 3deg 24deg);animation-duration:90s;animation-direction:reverse}
.bt-ring.c{width:90vmax;height:90vmax;margin:-45vmax;background:radial-gradient(circle,rgba(255,79,195,.12),transparent 60%);animation:btPulse 4s ease-in-out infinite}
@keyframes btSpin{to{transform:rotate(360deg)}}
@keyframes btPulse{50%{opacity:.4;transform:scale(1.08)}}
section{position:relative;z-index:1}
/* the sky follows the run: deeper layers burn brighter, shifting from violet towards gold; a filling bar warms it;
   a strong cast flashes it, and a cast that smashes the whole target strobes (set from bt-page.js) */
.bt-sky{--depth:0;--heat:0;--fc:rgba(92,240,255,.55);
  filter:brightness(calc(.8 + var(--depth) * .95 + var(--heat) * .22)) saturate(calc(1 + var(--depth) * .9)) hue-rotate(calc(var(--depth) * 85deg));
  transition:filter 1.4s ease}
.bt-sky[data-tier="1"] .bt-ring{animation-duration:38s}.bt-sky[data-tier="1"] .bt-ring.b{animation-duration:55s}
.bt-sky[data-tier="2"] .bt-ring{animation-duration:22s}.bt-sky[data-tier="2"] .bt-ring.b{animation-duration:30s}.bt-sky[data-tier="2"] .bt-ring.c{animation-duration:2s}
.bt-sky[data-tier="3"] .bt-ring{animation-duration:11s}.bt-sky[data-tier="3"] .bt-ring.b{animation-duration:15s}.bt-sky[data-tier="3"] .bt-ring.c{animation-duration:1s}
.bt-sky::after{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse 70% 60% at 50% 45%,var(--fc),transparent 70%)}
.bt-sky.boom::after{animation:btBoom .7s ease-out}
.bt-sky.strobe::after{animation:btStrobe 1.3s steps(1,end)}
.bt-sky.hot .bt-ring.c{background:radial-gradient(circle,rgba(255,211,92,.32),transparent 62%)}
@keyframes btBoom{0%{opacity:.95}100%{opacity:0}}
@keyframes btStrobe{0%{opacity:1}12%{opacity:0}24%{opacity:.9}36%{opacity:0}48%{opacity:.8}60%{opacity:0}72%{opacity:.6}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.bt-sky.strobe::after{animation:btBoom .9s ease-out}}

/* ---------- lobby ---------- */
.bt-lobby{max-width:480px;margin:0 auto;padding:0 16px calc(28px + env(safe-area-inset-bottom));min-height:100%}
.bt-top{display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) 0 4px}
.bt-brand{display:flex;align-items:center;gap:8px;color:var(--bone);text-decoration:none;font-weight:700;letter-spacing:.24em;font-size:.9rem}
.bt-brand img{width:28px;height:28px}
.bt-icon{width:40px;height:40px;display:grid;place-items:center;background:rgba(13,8,25,.7);border:1px solid var(--line);font-size:1.2rem;color:var(--gold2)}
.bt-title{text-align:center;margin-top:14px}
.bt-kick{margin:0;font-size:.72rem;letter-spacing:.32em;color:var(--chips)}
.bt-title h1{margin:6px 0 0;font-size:clamp(3.2rem,17vw,4.6rem);line-height:.86;letter-spacing:.02em;color:var(--gold);
  text-shadow:0 0 28px rgba(255,200,90,.45),4px 4px 0 #7a5414,8px 8px 0 #000}
.bt-lede{margin:14px auto 0;max-width:330px;color:var(--dim);line-height:1.45;font-size:.95rem}
.bt-lede b{color:var(--gold2);font-weight:700}
.bt-fan{position:relative;height:168px;margin:14px 0 4px}
.bt-fan .bt-card{position:absolute;left:50%;top:14px;transform-origin:50% 140%}
.bt-modes{display:flex;flex-direction:column;gap:10px}
.bt-mode{display:grid;gap:3px;text-align:left;padding:14px 16px;border:0;position:relative;overflow:hidden;
  box-shadow:0 0 0 2px #000,0 5px 0 2px #000}
.bt-mode.daily{background:linear-gradient(135deg,#f2d27e,#e3ba5c 55%,#c9932f);color:#1a1206}
.bt-mode.free{background:linear-gradient(135deg,#2a0f4a,#3c1670);color:var(--bone);box-shadow:inset 0 0 0 2px #c56bff,0 0 0 2px #000,0 5px 0 2px #000}
.bt-mode::after{content:"▶";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:1.3rem;opacity:.8}
.bt-mode-k{font-size:1.35rem;font-weight:700;letter-spacing:.12em}
.bt-mode-t{font-family:var(--num);font-weight:600;font-size:.9rem}
.bt-mode-s{font-family:var(--num);font-size:.78rem;opacity:.8}
.bt-mode:active{transform:translateY(3px);box-shadow:0 0 0 2px #000,0 2px 0 2px #000}
.bt-resume{padding:12px;background:rgba(92,240,255,.12);border:2px solid var(--chips);color:var(--chips);font-weight:700;letter-spacing:.14em}
.bt-row{display:flex;gap:10px;margin-top:12px}
.bt-row>*{flex:1}
.bt-ghost{padding:12px 10px;background:rgba(13,8,25,.8);border:1px solid var(--line);color:var(--bone);letter-spacing:.1em;text-align:center;text-decoration:none;display:block}
.bt-ghost.small{padding:9px 12px;font-size:.85rem;display:inline-block}
.bt-ghost.wide,.bt-btn.wide{width:100%;margin-top:10px}
.bt-league{margin-top:10px;border-color:var(--chips);color:var(--chips)}
.bt-link{display:inline-block;background:none;border:0;color:var(--dim);text-decoration:underline;font-size:.82rem;margin-top:10px}
.bt-wallet{margin-top:18px;padding:14px;background:rgba(13,8,25,.7);border:1px solid var(--line);text-align:center}
.bt-wallet p{margin:0 0 10px;color:var(--dim);font-family:var(--num);font-size:.85rem;line-height:1.4}
.bt-wallet p b{color:var(--gold2)}
.bt-fine{margin:10px 0 0!important;font-family:var(--num);font-size:.72rem!important;color:var(--faint)!important;line-height:1.4}
.bt-err{color:#ff8a9a!important}

/* the competition banner */
.bt-comp{width:100%;display:grid;gap:3px;margin:0 0 10px;padding:12px 14px;text-align:left;border:2px solid var(--chips);color:var(--bone);
  background:linear-gradient(135deg,#06303c,#14072a 60%,#3c0830);box-shadow:0 0 24px -4px rgba(92,240,255,.7);animation:btCompGlow 2.4s ease-in-out infinite;position:relative}
.bt-comp::after{content:"›";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:1.8rem;color:var(--chips)}
.bt-comp-k{font-size:1.5rem;font-weight:700;letter-spacing:.12em;color:var(--gold2);text-shadow:0 0 14px rgba(92,240,255,.8)}
.bt-comp-t{font-family:var(--num);font-weight:600;font-size:.88rem}
.bt-comp-s{font-family:var(--num);font-size:.76rem;color:var(--chips)}
@keyframes btCompGlow{50%{box-shadow:0 0 36px 0 rgba(92,240,255,.9)}}
.bt-compinfo{margin:0 0 12px;padding:10px 12px;text-align:left;font-family:var(--num);font-size:.8rem;line-height:1.45;color:var(--dim);background:rgba(7,4,15,.7);border-left:3px solid var(--chips)}
.bt-compinfo b{color:var(--gold2)}
.bt-win{margin:6px 0 0;padding:10px;font-family:var(--num);font-size:.85rem;line-height:1.4;background:rgba(92,240,255,.1);border:1px solid var(--chips);color:var(--bone)}
.bt-win b{color:var(--chips)}

/* ---------- a card ---------- */
.bt-card,.bt-card *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.bt-card{width:var(--cw);height:var(--ch);position:relative;background:#07040f;border:3px solid var(--tc,#9ca3af);
  box-shadow:0 0 0 2px #000,3px 4px 0 2px #000;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none;
  transition:transform .18s cubic-bezier(.3,1.4,.5,1),box-shadow .18s}
.bt-card .art{position:relative;flex:1;background:#000 center/cover no-repeat;image-rendering:auto}
.bt-card .gem{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 2px #000,0 0 10px var(--ac);
  display:grid;place-items:center;font-size:.62rem;font-weight:700;color:#07040f}
.bt-card .gem.prime{background:conic-gradient(var(--Cold),var(--Rose),var(--Warm),var(--Acid),var(--Opposed),var(--Cold))}
/* the traits sit down the left edge, under the Aura gem: the part of a card still showing when the hand overlaps */
.bt-card .tr{position:absolute;left:3px;top:26px;display:flex;flex-direction:column;gap:2px}
.bt-card .tr i{font-style:normal;width:16px;height:16px;display:grid;place-items:center;font-size:.66rem;font-weight:700;background:rgba(7,4,15,.85);color:var(--x);box-shadow:0 0 0 1px rgba(255,211,92,.6)}
.bt-card .tr i svg{width:72%;height:auto;fill:currentColor;display:block}
.bt-table b.ti svg{width:1.05em;height:auto;fill:var(--x);display:inline-block;vertical-align:-.1em}
.bt-card .foot{position:relative;z-index:2;height:24px;display:flex;align-items:center;justify-content:space-between;padding:0 4px;background:linear-gradient(180deg,#160c26,#07040f);border-top:2px solid var(--tc,#9ca3af)}
.bt-card .foot b{font-family:var(--num);font-size:.92rem;color:var(--chips);font-weight:700}
.bt-card .foot span{font-size:.5rem;letter-spacing:.06em;color:var(--dim);text-transform:uppercase;max-width:44px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bt-card.own{box-shadow:0 0 0 2px #000,3px 4px 0 2px #000,0 0 18px var(--gold)}
.bt-card.own::before{content:"YOURS";position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2;padding:1px 4px;font-size:.5rem;letter-spacing:.12em;background:var(--gold);color:#140a02}
.bt-card.big{--cw:30vw;--ch:50vw;max-width:130px;max-height:200px}
.bt-card.big .gem{width:26px;height:26px;font-size:.8rem}
.bt-card.big .foot{height:30px}.bt-card.big .foot b{font-size:1.15rem}.bt-card.big .foot span{font-size:.62rem;max-width:80px}
.bt-card.big .tr{top:34px}.bt-card.big .tr i{width:20px;height:20px;font-size:.78rem}

/* ---------- the game ---------- */
.bt-game,.bt-game *{touch-action:none}
.bt-game{height:100dvh;max-width:520px;overflow:hidden;margin:0 auto;display:flex;flex-direction:column;padding:calc(6px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom))}
.bt-hud{display:flex;align-items:center;gap:8px}
.bt-layer{flex:1;text-align:center;line-height:1.1}
.bt-layer span{display:block;font-size:.66rem;letter-spacing:.3em;color:var(--chips)}
.bt-layer b{font-size:1.1rem;letter-spacing:.06em;color:var(--gold2)}
.bt-goal{margin-top:6px;padding:8px 10px;background:rgba(13,8,25,.75);border:1px solid var(--line)}
.bt-run{display:flex;justify-content:space-between;align-items:baseline;font-size:.62rem;letter-spacing:.16em;color:var(--dim)}
.bt-run b{font-family:var(--num);font-size:.95rem;letter-spacing:0;color:var(--chips);margin-left:4px;display:inline-block;transition:transform .15s}
.bt-run b.up{transform:scale(1.18);text-shadow:0 0 12px var(--chips)}
.bt-time b{font-family:var(--num);font-size:.95rem;letter-spacing:0;color:var(--bone);margin-left:4px}
.bt-time.low b{color:#ff5a6e;text-shadow:0 0 10px #ff5a6e;animation:btLow .5s steps(2) infinite}
@keyframes btLow{50%{opacity:.45}}
.bt-boost{font-style:normal;margin-right:8px;padding:1px 5px;font-family:var(--num);font-size:.62rem;font-weight:700;letter-spacing:.06em;color:#140a02;background:var(--gold)}
.bt-score{display:flex;align-items:baseline;justify-content:center;gap:8px}
.bt-score b{font-family:var(--num);font-size:min(1.9rem,calc(56vw / (var(--len,6) * .62)));white-space:nowrap;color:var(--gold2);text-shadow:0 0 18px rgba(255,220,130,.4)}
.bt-score span{font-family:var(--num);color:var(--dim);font-weight:600}
.bt-score span i{font-style:normal}
.bt-bar{height:10px;margin-top:4px;background:#000;border:1px solid var(--gold);position:relative;overflow:hidden}
.bt-bar i{position:absolute;inset:0 auto 0 0;width:0;background:repeating-linear-gradient(90deg,var(--gold) 0 8px,#a87a22 8px 10px);transition:width .5s ease-out}
.bt-bar.full i{background:repeating-linear-gradient(90deg,var(--chips) 0 8px,#2aa6b8 8px 10px);box-shadow:0 0 14px var(--chips)}
.bt-pips{display:flex;justify-content:space-between;margin-top:6px;font-size:.66rem;letter-spacing:.14em;color:var(--dim)}
.bt-pips i{font-style:normal;letter-spacing:.1em}
.bt-pips .c i{color:var(--chips)}.bt-pips .d i{color:var(--mult)}
.bt-pips .k{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;color:var(--dim);text-decoration:underline dotted;text-underline-offset:3px}
.bt-pips .k b{font-family:var(--num);color:var(--bone)}
.bt-card.fresh::after{content:"NEW";position:absolute;left:50%;top:-9px;transform:translateX(-50%);z-index:3;padding:1px 5px;font-size:.55rem;letter-spacing:.14em;background:var(--chips);color:#07040f;box-shadow:0 0 0 2px #000,0 0 12px var(--chips)}
.bt-deckitem{display:flex;flex-direction:column;align-items:center;gap:4px}
.bt-deckitem small{font-family:var(--num);font-size:.66rem;color:var(--dim)}
.bt-deckitem.hand small{color:var(--chips)}
.bt-deckitem.used{opacity:.4}

.bt-stage{position:relative;flex:1;overflow:hidden;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.bt-handname{position:relative;min-height:1.6em;font-size:1.35rem;font-weight:700;letter-spacing:.1em;color:var(--gold2);text-shadow:3px 3px 0 #000;text-align:center}
.bt-handname small{display:block;font-family:var(--num);font-size:.75rem;letter-spacing:.06em;color:var(--dim);font-weight:500;text-shadow:none}
.bt-played{position:relative;display:flex;gap:6px;min-height:0;--cw:58px;--ch:108px}
.bt-played .bt-card .gem{width:15px;height:15px;font-size:.5rem}.bt-played .bt-card .tr{top:20px}.bt-played .bt-card .tr i{width:13px;height:13px;font-size:.55rem}.bt-played .bt-card .foot{height:22px}
.bt-played .bt-card{animation:btIn .3s cubic-bezier(.3,1.5,.5,1) both}
.bt-played .bt-card.dim{opacity:.35;filter:grayscale(.8)}
.bt-played .bt-card.hit{transform:translateY(-10px) scale(1.12);box-shadow:0 0 0 2px #000,0 0 24px var(--x)}
@keyframes btIn{from{transform:translateY(80px) scale(.6);opacity:0}}
.bt-calc{position:relative;display:flex;align-items:center;gap:8px}
.bt-calc>i{font-style:normal;font-size:1.6rem;color:var(--gold2);text-shadow:2px 2px 0 #000}
.bt-chips,.bt-mult{min-width:96px;padding:6px 10px 4px;text-align:center;box-shadow:0 0 0 2px #000,3px 3px 0 2px #000}
.bt-chips{background:linear-gradient(180deg,#0e4a5a,#08303c);border:2px solid var(--chips)}
.bt-mult{background:linear-gradient(180deg,#5a0e48,#3c0830);border:2px solid var(--mult)}
.bt-chips b,.bt-mult b{display:block;font-family:var(--num);font-size:min(1.5rem,calc(36vw / (var(--len,4) * .62)));line-height:1;white-space:nowrap}
.bt-chips b{color:var(--chips)}.bt-mult b{color:#ff9ce0}
.bt-chips span,.bt-mult span{font-size:.55rem;letter-spacing:.24em;color:var(--dim)}
.bt-chips.bump,.bt-mult.bump{animation:btBump .22s ease-out}
@keyframes btBump{40%{transform:scale(1.18)}}
.bt-float{position:absolute;z-index:5;pointer-events:none;font-family:var(--num);font-weight:700;font-size:1.05rem;text-shadow:2px 2px 0 #000;white-space:nowrap;animation:btFloat .9s ease-out forwards}
.bt-float small{display:block;font-family:var(--px);font-size:.6rem;letter-spacing:.08em;text-align:center;color:var(--bone)}
@keyframes btFloat{0%{transform:translate(-50%,0) scale(.6);opacity:0}20%{transform:translate(-50%,-14px) scale(1.15);opacity:1}100%{transform:translate(-50%,-50px) scale(1);opacity:0}}
.bt-flash{position:absolute;inset:-20px;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(255,241,194,.6),transparent 60%)}
.bt-flash.go{animation:btFlash .6s ease-out}
@keyframes btFlash{0%{opacity:1}100%{opacity:0}}
.bt-total{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--num);font-weight:700;color:var(--gold2);
  /* sized to the number of characters, so a trillion still fits a phone, in a dark box so it reads over the effects */
  font-size:min(3.2rem,12vw,calc(84vw / (var(--len,6) * .62)));white-space:nowrap;max-width:94vw;padding:.12em .45em;
  background:rgba(5,2,12,.86);border:2px solid var(--gold);box-shadow:0 0 0 3px #000,0 0 30px rgba(255,200,90,.45);
  text-shadow:0 0 22px rgba(255,200,90,.7),3px 3px 0 #000;animation:btSlam .5s cubic-bezier(.2,1.6,.4,1) both;pointer-events:none}
@keyframes btSlam{from{transform:translate(-50%,-50%) scale(2.2);opacity:0}}
.bt-coach{position:absolute;left:8px;right:8px;bottom:6px;z-index:7;padding:10px 12px;background:rgba(7,4,15,.95);border:2px solid var(--chips);font-family:var(--num);font-size:.86rem;line-height:1.35;text-align:center;box-shadow:0 0 20px rgba(92,240,255,.35)}
.bt-coach b{color:var(--chips)}

.bt-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 2px}
.bt-sort{padding:5px 9px;font-size:.72rem;letter-spacing:.1em;background:rgba(13,8,25,.8);border:1px solid var(--line)}
.bt-why{border-color:var(--chips);color:var(--chips)}
.bt-tools{flex-wrap:nowrap}.bt-tools .bt-preview{margin-left:auto}
.bt-steps{display:grid;gap:3px;margin:8px 0 4px;text-align:left;font-family:var(--num);font-size:.84rem}
.bt-steps div{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:6px 9px;background:rgba(7,4,15,.75);border-left:3px solid var(--line)}
.bt-steps div.c{border-left-color:var(--chips)}.bt-steps div.m{border-left-color:var(--mult)}.bt-steps div.x{border-left-color:var(--x)}
.bt-steps span b{color:var(--gold2);font-weight:600}
.bt-steps span em{font-style:normal;font-weight:700}
.bt-steps div.c em{color:var(--chips)}.bt-steps div.m em{color:#ff9ce0}.bt-steps div.x em{color:var(--x)}
.bt-steps small{color:var(--faint);white-space:nowrap;font-size:.74rem}
.bt-steps .tot{margin-top:6px;padding:10px;border:2px solid var(--gold);border-left-width:2px;background:rgba(227,186,92,.1);font-size:1rem}
.bt-steps .tot b{font-size:1.2rem;color:var(--gold2)}
.bt-preview{font-size:.82rem;letter-spacing:.06em;color:var(--gold2);text-align:right}
.bt-preview small{font-family:var(--num);color:var(--dim);font-size:.75rem}
.bt-hand{position:relative;height:calc(var(--ch) + 30px);margin-top:4px}
.bt-hand .bt-card{position:absolute;bottom:4px}
.bt-hand .bt-card.sel{transform:translateY(-24px);box-shadow:0 0 0 2px #000,0 0 22px var(--ac)}
.bt-hand .bt-card.new{animation:btDeal .35s cubic-bezier(.3,1.4,.5,1) both}
@keyframes btDeal{from{transform:translateY(120px) rotate(8deg);opacity:0}}
.bt-actions{display:flex;gap:10px;margin-top:6px}
.bt-btn{flex:1;padding:14px 8px;border:0;font-weight:700;letter-spacing:.16em;font-size:1.05rem;text-align:center;text-decoration:none;display:block}
.bt-btn.cast{color:#1a1206;background:linear-gradient(180deg,#f2d27e,#e3ba5c);box-shadow:inset 0 3px 0 #fff1c2,inset 0 -4px 0 #a87a22,0 0 0 2px #000,0 5px 0 2px #000}
.bt-btn.discard{color:var(--bone);background:linear-gradient(180deg,#6a1a5a,#4a0e3e);box-shadow:inset 0 2px 0 #ff9ce0,0 0 0 2px #000,0 5px 0 2px #000}
.bt-btn:disabled{filter:grayscale(.8) brightness(.6)}
.bt-btn:not(:disabled):active{transform:translateY(3px)}

/* ---------- sheets ---------- */
.bt-sheet{touch-action:manipulation;position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(3,1,8,.82);backdrop-filter:blur(3px);animation:btFade .2s both}
@keyframes btFade{from{opacity:0}}
.bt-panel{width:100%;max-width:440px;max-height:calc(100dvh - 32px);overflow:auto;padding:20px 16px;background:linear-gradient(180deg,#1a0b2e,#0d0819);border:2px solid var(--gold);box-shadow:0 0 0 3px #000,0 0 50px rgba(197,107,255,.35);text-align:center}
.bt-panel.tall{max-height:calc(100dvh - 32px)}
.bt-panel h2{margin:6px 0 4px;font-size:2rem;color:var(--gold);text-shadow:3px 3px 0 #7a5414,5px 5px 0 #000;letter-spacing:.04em}
.bt-panel h3{margin:18px 0 6px;font-size:.8rem;letter-spacing:.24em;color:var(--chips);text-align:left}
.bt-sub{margin:4px 0 12px;font-family:var(--num);color:var(--dim);font-size:.88rem;line-height:1.4}
.bt-offer{display:flex;justify-content:center;gap:6px;margin:8px 0 4px}
.bt-offer .bt-card.big{--cw:min(27vw,120px);--ch:min(40vw,176px)}
.bt-offer button{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.bt-offer .why{font-family:var(--num);font-size:.66rem;color:var(--dim);width:min(27vw,120px);line-height:1.3}
.bt-offer .bt-card{animation:btIn .4s cubic-bezier(.3,1.5,.5,1) both}
.bt-offer button:nth-child(2) .bt-card{animation-delay:.08s}.bt-offer button:nth-child(3) .bt-card{animation-delay:.16s}
.bt-endscore b{display:block;font-family:var(--num);font-size:3rem;color:var(--gold2);text-shadow:0 0 24px rgba(255,200,90,.6),4px 4px 0 #000}
.bt-endscore span{font-size:.8rem;letter-spacing:.24em;color:var(--dim)}
.bt-endrows{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 6px}
.bt-endrows div{padding:8px;background:rgba(7,4,15,.7);border:1px solid var(--line)}
.bt-endrows span{display:block;font-size:.6rem;letter-spacing:.2em;color:var(--faint)}
.bt-endrows b{font-family:var(--num);font-size:1.05rem;color:var(--bone)}
.bt-how{text-align:left}
.bt-how h2{text-align:center}
.bt-how ol{margin:8px 0 0;padding-left:20px;font-family:var(--num);font-size:.9rem;line-height:1.45;color:var(--bone)}
.bt-how li{margin-bottom:6px}.bt-how b{color:var(--gold2)}
.bt-table{display:grid;gap:4px}
.bt-table div{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:6px 8px;background:rgba(7,4,15,.7);border-left:3px solid var(--line);font-family:var(--num);font-size:.8rem}
.bt-table div b{font-family:var(--px);font-size:.9rem;color:var(--gold2)}
.bt-table div small{display:block;color:var(--dim);font-size:.72rem}
.bt-table div em{font-style:normal;font-weight:700;white-space:nowrap}
.bt-table .c{color:var(--chips)}.bt-table .m{color:#ff9ce0}.bt-table .x{color:var(--x)}
.bt-tabs{display:flex;gap:6px;margin-bottom:12px}
.bt-tabs button{flex:1;padding:9px;background:rgba(7,4,15,.7);border:1px solid var(--line);font-size:.82rem;letter-spacing:.08em}
.bt-tabs button.on{background:var(--gold);color:#140a02;border-color:var(--gold)}
.bt-rows{display:grid;gap:4px;text-align:left}
.bt-rows div{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:7px 8px;background:rgba(7,4,15,.7);font-family:var(--num);font-size:.85rem}
.bt-rows div.you{outline:2px solid var(--chips)}
.bt-rows i{font-style:normal;color:var(--faint);font-weight:700}
.bt-rows b{color:var(--gold2)}
.bt-rows small{color:var(--dim);font-size:.7rem;margin-left:6px}
.bt-summons{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px;justify-items:center;margin:6px 0 4px;--cw:80px;--ch:134px}
.bt-summons button{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.bt-summons small{font-family:var(--num);font-size:.66rem;color:var(--dim)}
.bt-detail{display:flex;gap:14px;align-items:flex-start;text-align:left}
.bt-detail ul{margin:0;padding:0;list-style:none;font-family:var(--num);font-size:.84rem;line-height:1.35;flex:1}
.bt-detail li{padding:4px 0;border-bottom:1px solid rgba(227,186,92,.12)}
.bt-detail li b{color:var(--gold2);font-family:var(--px)}
.bt-burst{position:fixed;inset:0;z-index:40;pointer-events:none;display:grid;place-items:center}
.bt-burst b{font-size:clamp(2rem,10.5vw,3.4rem);max-width:94vw;text-align:center;color:var(--gold2);letter-spacing:.04em;text-shadow:0 0 40px rgba(92,240,255,.9),4px 4px 0 #7a5414,8px 8px 0 #000;animation:btSlam .6s cubic-bezier(.2,1.6,.4,1) both}
@media (min-width:430px){:root{--cw:84px;--ch:122px}}
@media (max-height:700px){:root{--ch:118px;--cw:70px}.bt-card .gem{width:18px;height:18px}.bt-card .tr{top:23px}.bt-card .tr i{width:14px;height:14px;font-size:.6rem}.bt-stage{min-height:140px}.bt-score b{font-size:min(1.5rem,calc(50vw / (var(--len,6) * .62)))}.bt-played{--cw:50px;--ch:94px}.bt-played .bt-card .foot{height:18px}.bt-played .bt-card .foot b{font-size:.78rem}.bt-played .bt-card .foot span{display:none}.bt-played .bt-card .gem{width:13px;height:13px}.bt-played .bt-card .tr{top:18px;left:2px}.bt-played .bt-card .tr i{width:11px;height:11px;font-size:.5rem}}
@media (prefers-reduced-motion:reduce){.bt-ring{animation:none}}

[data-whysheet]{z-index:60}

.bt-cardimg{display:block;width:100%;margin:8px 0;border:2px solid var(--gold);box-shadow:0 0 0 2px #000;-webkit-touch-callout:default;user-select:auto;-webkit-user-select:auto}
[data-sharesheet]{z-index:60}

/* Mirror Duel */
.bt-mode.duel{border-color:#ff4fc3;background:linear-gradient(135deg,rgba(255,79,195,.18),rgba(13,8,25,.85))}
.bt-mode.duel .bt-mode-k{color:#ff9ce0}
.bt-test{font-style:normal;margin-left:6px;padding:1px 5px;font-size:.6rem;letter-spacing:.12em;color:#07040f;background:#ff9ce0}
.bt-duelbox{margin:0 0 10px;padding:12px 14px;border:2px solid #ff4fc3;background:rgba(40,8,32,.85);text-align:left;box-shadow:0 0 22px -6px #ff4fc3}
.bt-duelbox h3{margin:0 0 4px;font-size:1rem;letter-spacing:.12em;color:#ff9ce0}
.bt-duelbox p{margin:4px 0;font-family:var(--num);font-size:.86rem;line-height:1.4;color:var(--bone)}
.bt-duelbox b{color:var(--gold2)}
.bt-duelbox .bt-btn{margin-top:8px}
.bt-duelres{margin:8px 0 0;padding:12px;border:2px solid #ff4fc3;background:rgba(40,8,32,.7);font-family:var(--num);font-size:.9rem;line-height:1.45;text-align:left}
.bt-duelres .vs{display:grid;grid-template-columns:1fr auto;gap:4px 10px;margin:6px 0}
.bt-duelres .vs b{text-align:right;color:var(--gold2)}
.bt-duelres .win{color:#8dff5c}.bt-duelres .lose{color:#ff7a8a}

/* the end of a run: what more $DMT would have scored */
.bt-upsell{margin:10px 0 0;padding:10px 12px;font-family:var(--num);font-size:.86rem;line-height:1.45;text-align:left;color:var(--bone);background:linear-gradient(135deg,rgba(255,211,92,.16),rgba(13,8,25,.9));border:1px solid var(--gold)}
.bt-upsell b{color:var(--gold2)}.bt-upsell i{font-style:normal;color:#8dff5c}
.bt-upsell a{display:block;margin-top:6px;color:var(--x);font-weight:700;letter-spacing:.04em}

/* Realm Weather: the day's rule twist, on the Daily Trip button and above the score */
.bt-weather{margin:0 0 6px;padding:5px 10px;font-family:var(--num);font-size:.78rem;line-height:1.3;text-align:center;color:var(--bone);background:linear-gradient(90deg,rgba(92,240,255,.14),rgba(255,79,195,.14));border:1px solid rgba(92,240,255,.4)}
.bt-weather b{margin-right:6px;font-family:var(--px);letter-spacing:.08em;color:var(--chips)}
.bt-mode-w{display:block;margin-top:6px;padding:4px 8px;font-family:var(--num);font-size:.74rem;line-height:1.3;color:#07040f;background:var(--chips)}

/* the effects layer (bt-fx.js): behind the cards, over the sky */
.bt-fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* the run total glows hotter with each milestone it passes (million, billion, trillion...) */
[data-total][data-mag="1"]{color:#9ff6ff;text-shadow:0 0 8px rgba(92,240,255,.7)}
[data-total][data-mag="2"]{color:#ffb3ec;text-shadow:0 0 10px rgba(255,79,195,.8)}
[data-total][data-mag="3"]{color:#ffd88a;text-shadow:0 0 12px rgba(255,170,60,.9)}
[data-total][data-mag="4"],[data-total][data-mag="5"]{color:#fff3c4;text-shadow:0 0 10px #ffd35c,0 0 22px rgba(255,211,92,.9);animation:btMag 1.2s ease-in-out infinite}
@keyframes btMag{50%{text-shadow:0 0 18px #ffd35c,0 0 36px rgba(255,211,92,1)}}
.bt-mile{position:fixed;left:50%;top:30%;z-index:60;transform:translate(-50%,-50%);text-align:center;pointer-events:none;animation:btMile 1.9s ease-out both}
.bt-mile b{display:block;font-family:var(--px);font-size:clamp(2.2rem,12vw,3.6rem);letter-spacing:.06em;color:#fff3c4;text-shadow:0 0 18px #ffd35c,0 0 40px rgba(255,170,60,.9),4px 4px 0 #000}
.bt-mile span{font-family:var(--num);font-size:.8rem;letter-spacing:.3em;color:var(--chips)}
@keyframes btMile{0%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}14%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-80%) scale(1)}}

/* the round score and its target stay on one line, however big they get */
.bt-score{white-space:nowrap}
.bt-score span{font-size:min(1em,calc(34vw / (var(--tlen,6) * .62)))}

/* the cast total sits above the chips x mult boxes (top set from bt-page.js), not over them */
.bt-total.above{transform:translate(-50%,-100%);animation:btSlamUp .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes btSlamUp{from{transform:translate(-50%,-100%) scale(2.2);opacity:0}}