/* BoosterOdds client styles — scoped under .boosterodds so the widget can live inside any WordPress/Breakdance page */

/* Card data + card images come from MTGJSON / the Scryfall image CDN and are
   shown unmodified and uncropped. All other art (wrapper, card back, glows,
   particles) is original CSS. Custom properties are scoped to .boosterodds so the
   widget neither leaks into nor inherits from the host theme. */

.boosterodds{
  /* BoosterOdds night colourway ("Lavender on ink") */
  --bg:#0B0910;              /* Ink — the simulator's ground */
  --raised:#171320;          /* Ink Raised — panels, rows */
  --panel:rgba(255,255,255,.045);
  --panel-2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --ink:#EDEBF2;             /* text on ink */
  --paper:#F7F7F4;
  --ink-dim:#C7C2D4;
  --ink-faint:#9B95AD;
  --ink-mute:#8A8499;
  --volt:#B08CFF;            /* the one brand colour (lavender) */
  --lift:#B08CFF;            /* accent on ink — same as the brand colour */
  --gold:#D9B45F;            /* rare — rarity only, never an accent */
  --cyan:#8FE3FF;            /* foil marker — its only job */
  --ahead:#3BE08A; --near:#F5B44C; --behind:#FF8593;   /* return on price, on ink */
  --r-common:#8B94A8;
  --r-uncommon:#B9C8DC;
  --r-rare:#D9B45F;
  --r-mythic:#EC6B34;
  --r-special:#B08CFF;
  --r-bonus:#B08CFF;

  --f-display:'Anton','Haettenschweiler','Arial Narrow',sans-serif;
  --f-text:'Archivo',system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --card-radius:4.6%;
  --card-ar:488/680;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.76,0,.24,1);
}

.boosterodds,.boosterodds *{box-sizing:border-box;margin:0;padding:0}
.boosterodds [hidden]{display:none!important}
.boosterodds{
  position:relative;overflow:hidden;border-radius:14px;
  background:var(--bg);
  color:var(--ink);
  font:400 14.5px/1.5 var(--f-text);
  -webkit-font-smoothing:antialiased;text-align:left;
}
.boosterodds button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-transform:none;letter-spacing:normal;box-shadow:none}
.boosterodds select{font:inherit}
.boosterodds h1,.boosterodds h2,.boosterodds p,.boosterodds ul{margin:0;padding:0;color:inherit;font-family:inherit}

.boosterodds .app{position:relative;z-index:1;display:flex;flex-direction:column}
.boosterodds .anton,.boosterodds .stat b,.boosterodds .tile b,.boosterodds .ret-hero b,.boosterodds .now .nm,.boosterodds .now .price,
.boosterodds .now-empty .big,.boosterodds .sum-head h2,.boosterodds .sum-head .val,.boosterodds .sum-total,.boosterodds .pack-face .setname{font-family:var(--f-display);font-weight:400}
.boosterodds .mono,.boosterodds .rev-top .run,.boosterodds .now .meta,.boosterodds .gc .cap b,.boosterodds .ev-strip b,
.boosterodds .price-in input,.boosterodds .price-in .sym,.boosterodds .field .code{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.boosterodds .kap{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.boosterodds .ahead{color:var(--ahead)!important}.boosterodds .near{color:var(--near)!important}.boosterodds .behind{color:var(--behind)!important}

/* ---------------- head row: set · booster · session figures · controls ---------------- */
.boosterodds .bar{display:flex;align-items:center;gap:14px 20px;padding:16px clamp(16px,2vw,24px);flex-wrap:wrap}
.boosterodds .head-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.boosterodds .title{font-family:var(--f-display);font-weight:400;font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--paper);line-height:1.2}
.boosterodds .chips{display:flex;gap:6px;flex-wrap:wrap}
.boosterodds .chip{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-radius:99px;padding:5px 10px;color:var(--ink-faint);
  border:1px solid var(--line-2);transition:.15s;font-family:var(--f-text);line-height:1.3}
.boosterodds .chip:hover{color:var(--ink);border-color:rgba(255,255,255,.34)}
.boosterodds .chip.on{background:var(--lift);border-color:var(--lift);color:var(--bg)}
.boosterodds .tools{display:flex;align-items:center;gap:6px;margin-left:auto}
.boosterodds .seg{display:flex;gap:4px}
.boosterodds .seg button{font-family:var(--f-mono);font-size:12px;border-radius:6px;padding:5px 9px;color:var(--ink-faint);border:1px solid var(--line-2);transition:.15s}
.boosterodds .seg button.on{background:var(--lift);border-color:var(--lift);color:var(--bg);font-weight:600}
.boosterodds .stage-wrap.shake{animation:shake .5s var(--ease-out)}
@keyframes shake{
  0%,100%{transform:translate3d(0,0,0)}
  15%{transform:translate3d(-9px,4px,0) rotate(-.35deg)}
  32%{transform:translate3d(8px,-5px,0) rotate(.3deg)}
  50%{transform:translate3d(-6px,3px,0)}70%{transform:translate3d(4px,-2px,0)}
  86%{transform:translate3d(-2px,1px,0)}
}

/* ---------------- controls (live in the top bar) ---------------- */
.boosterodds .controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.boosterodds .field{position:relative;display:flex;align-items:center}
.boosterodds .field select{
  appearance:none;background:transparent;border:0;box-shadow:none;color:var(--paper);
  padding:4px 22px 4px 0;border-radius:6px;font-size:15px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
  font-family:var(--f-display);font-weight:400;line-height:1.2;
  max-width:min(48vw,340px);text-overflow:ellipsis;
}
.boosterodds .field select option{font-family:var(--f-text);text-transform:none;letter-spacing:0;font-size:14px;background:var(--raised);color:var(--ink)}
.boosterodds .field:hover select{color:var(--lift)}
.boosterodds .field select:disabled{opacity:.45;cursor:not-allowed}
.boosterodds .field select:focus-visible{outline:2px solid var(--lift);outline-offset:1px}
.boosterodds .field::after{content:"";position:absolute;right:6px;pointer-events:none;width:6px;height:6px;
  border-right:1.6px solid var(--ink-dim);border-bottom:1.6px solid var(--ink-dim);
  transform:translateY(-2px) rotate(45deg)}
.boosterodds .icon-btn{width:30px;height:30px;display:grid;place-items:center;border-radius:6px;
  background:transparent;border:1px solid var(--line-2);color:var(--ink-faint);font-size:14px;transition:.15s}
.boosterodds .icon-btn:hover{color:var(--ink);background:var(--panel-2)}

/* ---------------- live session figures (in the head row) ---------------- */
.boosterodds .stats{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;font-variant-numeric:tabular-nums;margin-left:auto}
.boosterodds .stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.boosterodds .stat b{font-size:15px;line-height:1.2;font-weight:500;color:var(--paper);transition:color .2s}
.boosterodds .stat b.mono{font-size:15px;font-weight:500}
.boosterodds .stat span{font-size:9.5px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.1em;line-height:1.2}
.boosterodds .stat.lift b{color:var(--lift)}
.boosterodds .tools .reset{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);padding:6px 9px;border-radius:6px;border:1px solid transparent;transition:.15s}
.boosterodds .tools .reset:hover{color:var(--ink);border-color:var(--line-2)}
.boosterodds .tools .reset.arm{color:var(--behind);border-color:rgba(255,107,120,.45)}
@media (max-width:1100px){.boosterodds .stat.more{display:none}}

/* ---------------- pack view: price + return left, pack + tiles right ---------------- */
.boosterodds .pv{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start;width:100%;text-align:left}
.boosterodds .pv-left{display:flex;flex-direction:column;gap:16px}
.boosterodds .ctl{border:1px solid var(--line);border-radius:10px;background:var(--raised);padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.boosterodds .ctl .kap{margin-top:8px}.boosterodds .ctl .kap:first-child{margin-top:0}
.boosterodds .price-in{display:flex;align-items:center;background:var(--bg);border-radius:8px;box-shadow:inset 0 0 0 1.5px var(--lift);overflow:hidden;width:170px}
.boosterodds .price-in .sym{padding:0 11px;font-size:15px;color:var(--ink-faint);background:rgba(176,140,255,.12);align-self:stretch;display:flex;align-items:center}
.boosterodds .price-in input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);padding:10px 12px;font-size:15px;font-weight:500;outline:none;-moz-appearance:textfield}
.boosterodds .price-in input::-webkit-outer-spin-button,.boosterodds .price-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.boosterodds .price-in:focus-within{box-shadow:inset 0 0 0 2px var(--lift),0 0 0 3px rgba(176,140,255,.22)}
.boosterodds .ret-hero{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.boosterodds .ret-hero b{font-size:40px;line-height:1;letter-spacing:-.01em;color:var(--ink-faint)}
.boosterodds .ret-hero span{font-size:12.5px;line-height:1.5;color:var(--ink-dim);max-width:34ch}
.boosterodds .cta{display:flex;align-items:center;gap:14px}
.boosterodds .cta small{font-size:12.5px;color:var(--ink-faint)}
.boosterodds .btn.big{height:46px;padding:0 22px;font-size:14px;border-radius:8px}
.boosterodds .pv-right{display:flex;flex-direction:column;gap:12px;min-width:0}
.boosterodds .stage-box{border-radius:10px;background:var(--raised);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:22px 20px 16px;min-height:440px;position:relative;overflow:hidden}
.boosterodds .stage-box::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 260px at 50% 55%,rgba(176,140,255,.14),transparent 70%);pointer-events:none}
.boosterodds .stage-box>*{position:relative}
.boosterodds .ev-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.boosterodds .tile{border-radius:8px;background:var(--raised);border:1px solid var(--line);padding:12px 14px;min-width:0}
.boosterodds .tile b{display:block;font-size:26px;line-height:1;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boosterodds .tile b.mono{font-size:20px;font-weight:600}
.boosterodds .tile.lift b{color:var(--lift)}
.boosterodds .tile.ahead b{color:var(--ahead)}.boosterodds .tile.near b{color:var(--near)}.boosterodds .tile.behind b{color:var(--behind)}
.boosterodds .tile span{display:block;font-size:10px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em;margin-top:4px}
.boosterodds .method-line{margin:14px auto 0;width:100%;text-align:center;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.boosterodds .stat b.bump{animation:bump .42s var(--ease-out)}
@keyframes bump{0%{transform:none}30%{transform:scale(1.28);color:#fff}100%{transform:none}}

/* minmax(0, 1fr): an `auto` track would grow to the views' intrinsic width and
   overflow narrow screens. */
.boosterodds .pr-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;justify-items:center;
  padding:6px clamp(16px,2vw,24px) 24px;position:relative;min-height:732px}
.boosterodds .view{display:none;width:100%;min-width:0;animation:fadeUp .45s var(--ease-out) both}
.boosterodds .view.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------------- pack ---------------- */
.boosterodds .view[data-view="pack"]{display:none}
.boosterodds .view[data-view="pack"].active{display:flex;flex-direction:column}
.boosterodds .view[data-view="pack"].active .pv{flex:1;align-items:stretch}
.boosterodds .view[data-view="pack"].active .stage-box{flex:1}
.boosterodds .pack-wrap{perspective:1400px;padding:10px 0 4px}
.boosterodds .pack{position:relative;width:min(250px,56vw);aspect-ratio:63/94;cursor:pointer;
  transform-style:preserve-3d;transition:transform .5s var(--ease-out);
  animation:float 5.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotateX(6deg) rotateZ(-1deg)}
  50%{transform:translateY(-13px) rotateX(3deg) rotateZ(1deg)}}
.boosterodds .pack:hover{animation-play-state:paused;transform:translateY(-10px) rotateX(2deg) scale(1.035)}
.boosterodds .pack.opening{animation:none;pointer-events:none}
/* set / booster change: the old pack whips out to the left, the new one drops
   in from above with a flash — unmistakable, unlike a subtle turn */
.boosterodds .pack.swap{animation:swap .8s var(--ease-out)}
@keyframes swap{
  0%{transform:translateX(0) rotateY(0) scale(1);opacity:1}
  30%{transform:translateX(-140%) rotateY(-70deg) scale(.85);opacity:0}
  31%{transform:translateY(-60px) rotateX(20deg) scale(1.12);opacity:0;filter:brightness(2)}
  55%{opacity:1}
  100%{transform:translateY(0) rotateX(6deg) rotateZ(-1deg) scale(1);opacity:1;filter:brightness(1)}
}
.boosterodds .pack-half{position:absolute;inset:0;overflow:hidden;border-radius:5px;
  box-shadow:0 26px 60px -18px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.09) inset;
  transition:transform .85s var(--ease-in-out),opacity .85s ease,background .5s ease;
  background:linear-gradient(118deg,var(--w1,#2a3352) 0%,var(--w2,#4a3d7a) 26%,#1d2440 48%,var(--w3,#6a4f8f) 68%,#232a47 100%)}
.boosterodds .pack-half::before{content:"";position:absolute;inset:-40%;
  background:linear-gradient(72deg,transparent 36%,rgba(255,255,255,.5) 47%,rgba(255,255,255,.13) 52%,transparent 62%);
  animation:sheen 4.2s linear infinite}
@keyframes sheen{from{transform:translateX(-52%)}to{transform:translateX(52%)}}
.boosterodds .pack-half::after{content:"";position:absolute;inset:0;opacity:.3;mix-blend-mode:overlay;
  background:repeating-linear-gradient(102deg,rgba(255,255,255,.14) 0 1px,transparent 1px 7px),
             repeating-linear-gradient(-8deg,rgba(0,0,0,.24) 0 1px,transparent 1px 12px)}
.boosterodds .pack-half.top{clip-path:inset(0 0 82% 0)}
.boosterodds .pack-half.bot{clip-path:inset(18% 0 0 0)}
.boosterodds .pack-top-serration{position:absolute;left:0;right:0;top:17.4%;height:9px;z-index:4;opacity:.75;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 3px,transparent 3px 7px)}
/* crimped heat-seals at both ends + a soft pillow shading down the sides */
.boosterodds .pack-crimp{position:absolute;left:0;right:0;height:6.5%;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 2px,rgba(255,255,255,.16) 2px 3px,transparent 3px 6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.boosterodds .pack-crimp.t{top:0;border-radius:5px 5px 0 0;transition:transform .85s var(--ease-in-out),opacity .85s ease}
.boosterodds .pack-crimp.b{bottom:0;border-radius:0 0 5px 5px;transition:transform .85s var(--ease-in-out),opacity .85s ease}
.boosterodds .pack-shade{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:5px;
  background:linear-gradient(90deg,rgba(0,0,0,.42) 0%,transparent 12%,transparent 88%,rgba(0,0,0,.42) 100%),
             linear-gradient(180deg,rgba(255,255,255,.08),transparent 30%,transparent 70%,rgba(0,0,0,.3));
  transition:opacity .5s}
.boosterodds .pack.opening .pack-crimp.t{transform:translate3d(0,-118%,60px) rotate(-9deg);opacity:0}
.boosterodds .pack.opening .pack-crimp.b{transform:translate3d(0,26%,-40px) rotate(3deg);opacity:0}
.boosterodds .pack.opening .pack-shade,.boosterodds .pack.opening .pack-top-serration{opacity:0}
.boosterodds .pack-face{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;padding:16% 12% 12%;pointer-events:none}
.boosterodds .pack-face .sym{width:52px;height:52px;object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 3px 9px rgba(0,0,0,.6));opacity:.94}
.boosterodds .pack-face .sym-fallback{width:50px;height:50px;border-radius:50%;border:2px solid rgba(255,255,255,.75);
  display:grid;place-items:center;font-weight:700;font-size:16px}
.boosterodds .pack-face .setname{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.75);line-height:1.3;max-width:100%;text-wrap:balance}
.boosterodds .pack-face .brandline{font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55);
  margin-bottom:auto;padding-top:6%}
.boosterodds .pack-face .count{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:auto}
.boosterodds .pack-face .kind{font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:rgba(255,255,255,.68);
  padding:3px 9px;border-radius:99px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.16)}
.boosterodds .pack.opening .pack-half.top{transform:translate3d(0,-118%,60px) rotate(-9deg);opacity:0}
.boosterodds .pack.opening .pack-half.bot{transform:translate3d(0,26%,-40px) rotate(3deg);opacity:0}
.boosterodds .pack.opening .pack-face{opacity:0;transition:opacity .3s}

.boosterodds .tagline{color:var(--ink-faint);font-size:12.5px;margin:0;min-height:18px;line-height:1.5}
.boosterodds .tagline b{color:var(--ink);font-weight:600}
.boosterodds .tagline .ok{color:var(--lift)}
.boosterodds .hint{margin-top:10px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);animation:pulse 2.3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
.boosterodds .loading{display:flex;align-items:center;gap:9px;color:var(--ink-dim);font-size:13px}
.boosterodds .spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--lift);
  border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.boosterodds .err{color:var(--behind);font-size:13px;max-width:52ch;margin:0}

/* compact EV strip — always visible in reveal + summary views */
.boosterodds .ev-strip{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:center;
  padding:9px 16px;border-radius:99px;border:1px solid var(--line);background:var(--raised);
  font-size:11.5px;color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.boosterodds .ev-strip b{color:var(--ink);font-weight:650;letter-spacing:0;text-transform:none;font-size:13px}
.boosterodds .ev-strip b.lift{color:var(--lift)}
.boosterodds .ev-strip .vs{color:var(--ink-dim)}.boosterodds .ev-strip .vs.ahead{color:var(--ahead)}.boosterodds .ev-strip .vs.behind{color:var(--behind)}.boosterodds .ev-strip .vs.near{color:var(--near)}
.boosterodds .ev-strip[hidden]{display:none}

/* ---------------- reveal ---------------- */
/* Layout: a head row (counter / booster / running value + progress), then a
   two-column body — the card stage on the left, an info panel on the right.
   The stage gets its own padding so the card's drop shadow and rarity glow
   never reach the panel, and the panel sits in a higher stacking layer so the
   absolutely-positioned card can't paint over the text. */
.boosterodds .view[data-view="reveal"]{display:none}
.boosterodds .view[data-view="reveal"].active{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vh,18px)}
.boosterodds .rev-head{width:min(640px,92vw);display:grid;gap:10px}
.boosterodds .rev-top{display:flex;align-items:center;gap:12px;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.boosterodds .rev-top .sep{opacity:.5}
.boosterodds .rev-top .run{margin-left:auto;color:var(--ink);letter-spacing:0;font-size:13px;text-transform:none;font-weight:600}
.boosterodds .prog{width:100%;height:3px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.boosterodds .prog i{display:block;height:100%;width:0;border-radius:3px;background:var(--lift);
  box-shadow:0 0 10px rgba(176,140,255,.5);transition:width .4s var(--ease-out)}

.boosterodds .rev-body{display:grid;grid-template-columns:auto minmax(280px,400px);align-items:center;
  gap:clamp(20px,4vw,56px);width:100%;max-width:1000px;justify-content:center}
.boosterodds .stage-wrap{position:relative;z-index:1;padding:clamp(16px,2.4vw,26px)}
.boosterodds .stage{position:relative;perspective:1700px;width:min(320px,72vw);aspect-ratio:var(--card-ar);
  display:grid;place-items:center;cursor:pointer}
.boosterodds .glow{position:absolute;inset:-22%;border-radius:50%;pointer-events:none;filter:blur(28px);
  background:radial-gradient(circle,var(--g,transparent) 0%,transparent 66%);opacity:0;transition:opacity .5s}
.boosterodds .glow.on{opacity:.85}

.boosterodds .panel{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px;
  padding:22px 24px 20px;border-radius:10px;height:340px;
  /* near-opaque on purpose: the rarity / foil glow sits in a lower layer and
     must read as BEHIND the panel, not bleed through a glass effect */
  background:var(--raised);
  border:1px solid var(--line);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.9)}
.boosterodds .panel::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent,rgba(255,255,255,.25)),transparent);
  opacity:.9;transition:background .3s}
.boosterodds .panel .actions{margin-top:auto;justify-content:flex-start}


/* Foil is signalled by a halo AROUND the card and by the caption — never by an
   overlay on the artwork, which would colour-shift it. */
.boosterodds .glow.rainbow{background:conic-gradient(from 0deg,#ff2f6e,#ffd400,#00ffa3,#00b3ff,#a855f7,#ff2f6e);
  border-radius:50%;filter:blur(46px);animation:spin360 6s linear infinite}
@keyframes spin360{to{transform:rotate(360deg)}}

/* Special-foil families. All of these live in the halo layer AROUND the card
   and in the ring on the card edge — nothing is ever drawn over the artwork.
   surge  : horizontal energy bands sweeping through the halo
   galaxy : deep violet field with twinkling points
   metal  : slow silver / gold shimmer (etched, gilded, textured, raised)
   prism  : fast, flickering spectrum (halo, oil slick, neon, confetti, ...) */
.boosterodds .glow.surge{inset:-26%;border-radius:50%;filter:blur(30px);
  background:repeating-linear-gradient(180deg,#00e5ff 0 8%,#0a6cff 16%,#7cf7ff 24%,transparent 32%);
  background-size:100% 220%;animation:surgeWave 1.4s linear infinite}
@keyframes surgeWave{from{background-position:0 0}to{background-position:0 220%}}
.boosterodds .glow.galaxy{inset:-24%;border-radius:50%;filter:blur(24px);
  background:
    radial-gradient(circle at 20% 30%,#fff 0 1.5%,transparent 3%),
    radial-gradient(circle at 70% 20%,#fff 0 1%,transparent 2.5%),
    radial-gradient(circle at 80% 75%,#dff 0 1.2%,transparent 3%),
    radial-gradient(circle at 35% 80%,#fff 0 1%,transparent 2.5%),
    radial-gradient(circle at 55% 50%,#c084fc 0 20%,#4c1d95 45%,transparent 70%);
  animation:spin360 14s linear infinite,twinkle 1.6s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}
.boosterodds .glow.metal{inset:-22%;border-radius:50%;filter:blur(34px);
  background:conic-gradient(from 90deg,var(--m1,#f4f4f4),var(--m2,#8d8d97) 30%,var(--m1,#f4f4f4) 50%,var(--m2,#8d8d97) 80%,var(--m1,#f4f4f4));
  animation:spin360 9s linear infinite}
.boosterodds .glow.metal.gold{--m1:#ffe9a8;--m2:#b0842a}
.boosterodds .glow.prism{inset:-22%;border-radius:50%;filter:blur(40px);
  background:conic-gradient(from 0deg,#ff2f6e,#ffd400,#00ffa3,#00b3ff,#a855f7,#ff2f6e);
  animation:spin360 2.2s linear infinite,hue 1.1s steps(6) infinite}
@keyframes hue{to{filter:blur(40px) hue-rotate(360deg)}}

/* card-edge rings per family (box-shadow only, sits outside the image) */
.boosterodds .card.is-foil.f-surge .side.front{box-shadow:0 22px 48px -14px rgba(0,0,0,.8),0 0 0 2px #7cf7ff,0 0 28px 6px rgba(0,229,255,.6)}
.boosterodds .card.is-foil.f-galaxy .side.front{box-shadow:0 22px 48px -14px rgba(0,0,0,.8),0 0 0 2px #e9d5ff,0 0 28px 6px rgba(168,85,247,.65)}
.boosterodds .card.is-foil.f-metal .side.front{box-shadow:0 22px 48px -14px rgba(0,0,0,.8),0 0 0 2px #f4f4f4,0 0 22px 4px rgba(255,255,255,.45)}
.boosterodds .card.is-foil.f-metal.gold .side.front{box-shadow:0 22px 48px -14px rgba(0,0,0,.8),0 0 0 2px #ffe9a8,0 0 24px 5px rgba(217,180,95,.6)}
.boosterodds .card.is-foil.f-prism .side.front{box-shadow:0 22px 48px -14px rgba(0,0,0,.8),0 0 0 2px #fff,0 0 30px 8px rgba(255,255,255,.5)}
.boosterodds .tag-foil.special{background:linear-gradient(100deg,#7cf7ff,#a855f7,#ff2f6e);color:#0a0b10}
.boosterodds .tag-foil.metal{background:linear-gradient(100deg,#f4f4f4,#8d8d97);color:#0a0b10}
.boosterodds .tag-foil.metal.gold{background:linear-gradient(100deg,#ffe9a8,#b0842a)}

.boosterodds .card{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .62s var(--ease-in-out),opacity .45s ease;will-change:transform}
.boosterodds .card .side{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--card-radius);overflow:hidden;
  box-shadow:0 22px 48px -14px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.07)}
.boosterodds .card .front{transform:rotateY(180deg);background:#0d0f17}
.boosterodds .card .front img{width:100%;height:100%;display:block;object-fit:contain}
/* --tx / --ty are driven by pointer position for a subtle 3D tilt once the
   card is face-up. Rotation + uniform scale only — the image itself is never
   distorted. */
.boosterodds .card.flipped{transform:rotateY(calc(180deg + var(--ty,0deg))) rotateX(var(--tx,0deg)) scale(1.02)}
.boosterodds .card.flipped.tilting{transition:transform .12s ease-out,opacity .45s ease}
.boosterodds .card.stacked{transform:translate3d(calc(var(--i)*3px),calc(var(--i)*-4px),calc(var(--i)*-14px))
  rotate(calc(var(--i)*-.8deg))}
.boosterodds .card.is-foil .side.front{box-shadow:0 22px 48px -14px rgba(0,0,0,.8),
  0 0 0 2px rgba(255,255,255,.55),0 0 22px 3px rgba(120,220,255,.55)}

/* Card back: deliberately plain — flat raised ground, a thin inset frame and
   the BoosterOdds mark at low contrast. Not a reproduction of any real card
   back (that is WotC artwork); CARD_BACK in the script swaps in your own image. */
.boosterodds .back{background:var(--raised)}
.boosterodds .back .bimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.boosterodds .back::before{content:"";position:absolute;inset:5%;border-radius:3%;border:1px solid rgba(255,255,255,.09)}
.boosterodds .back::after{content:"";position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);opacity:.22;
  background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 64 64%27%3E%3Cpath fill=%27%23B08CFF%27 fill-rule=%27evenodd%27 d=%27M14 14 L20 8 L26 14 L32 8 L38 14 L44 8 L50 14 L50 53 Q50 58 45 58 L19 58 Q14 58 14 53 Z M25.2 50.65 L20.8 47.35 L38.8 23.35 L43.2 26.65 Z M28.8 30 A3.8 3.8 0 1 1 21.2 30 A3.8 3.8 0 1 1 28.8 30 Z M42.8 44 A3.8 3.8 0 1 1 35.2 44 A3.8 3.8 0 1 1 42.8 44 Z%27/%3E%3C/svg%3E") center/contain no-repeat}
.boosterodds .back.has-img::before,.boosterodds .back.has-img::after{display:none}

.boosterodds .tag-foil{display:inline-flex;padding:3px 9px;border-radius:99px;font-size:9.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#0a0b10;
  background:linear-gradient(100deg,#ffd400,#00ffa3,#00b3ff,#a855f7)}

.boosterodds .now{display:flex;flex-direction:column;gap:12px;animation:fadeUp .35s var(--ease-out) both;min-height:0;overflow:hidden}
.boosterodds .now .kicker{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.boosterodds .now .nm{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.005em;line-height:1.08;text-wrap:balance;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.boosterodds .now .type{font-size:13px;color:var(--ink-dim)}
.boosterodds .now .price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-top:6px;
  border-top:1px solid var(--line)}
.boosterodds .now .price{color:var(--lift);font-variant-numeric:tabular-nums;font-size:30px;letter-spacing:0}
.boosterodds .now .price.none{color:var(--ink-faint);font-size:18px}
.boosterodds .now .price-lbl{font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em}
.boosterodds .now .meta{display:flex;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-faint)}
.boosterodds .pill.rc-special{color:var(--lift)}
.boosterodds .now .meta .sep{opacity:.5}
.boosterodds .now-empty{display:flex;flex-direction:column;gap:10px;color:var(--ink-dim);font-size:14px;line-height:1.5}
.boosterodds .now-empty .big{font-size:20px;font-weight:650;color:var(--ink);letter-spacing:-.02em}
.boosterodds .now-empty kbd{display:inline-block;font:inherit;font-size:11px;padding:1px 7px;border-radius:5px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-dim)}
.boosterodds .pill{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:4px 9px;border-radius:99px;border:1px solid currentColor;background:color-mix(in srgb,currentColor 12%,transparent)}

/* mana symbols — original CSS discs, not the printed symbol artwork */
.boosterodds .mana{display:inline-flex;gap:3px;align-items:center}
.boosterodds .ms{width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;
  font:700 10.5px/1 ui-sans-serif,system-ui,sans-serif;color:#1a1a1a;
  background:#cbc2b5;box-shadow:inset 0 -1.5px 0 rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.5)}
.boosterodds .ms.W{background:#f8f5dc}.boosterodds .ms.U{background:#9fc9ec}.boosterodds .ms.B{background:#b3a8a8}
.boosterodds .ms.R{background:#f2a37a}.boosterodds .ms.G{background:#9fd4a5}.boosterodds .ms.C{background:#d5d0cf}
.boosterodds .ms.hy{background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);font-size:8px;letter-spacing:-.02em}
.boosterodds .rc-common{color:var(--r-common)}.boosterodds .rc-uncommon{color:var(--r-uncommon)}
.boosterodds .rc-rare{color:var(--r-rare)}.boosterodds .rc-mythic{color:var(--r-mythic)}
.boosterodds .rc-special,.boosterodds .rc-bonus{color:var(--r-special)}

.boosterodds .tray{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;max-width:1200px;min-height:64px;padding:0 8px}
.boosterodds .tray .mini{width:44px;aspect-ratio:var(--card-ar);border-radius:3px;overflow:hidden;flex:none;
  box-shadow:0 3px 10px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);
  animation:pop .4s var(--ease-out) both;background:#0d0f17}
.boosterodds .tray .mini img{width:100%;height:100%;object-fit:contain;display:block}
.boosterodds .tray .mini.hit{box-shadow:0 3px 14px rgba(217,180,95,.5),0 0 0 1.5px var(--gold)}
.boosterodds .tray .mini.foil{box-shadow:0 3px 14px rgba(120,220,255,.5),0 0 0 1.5px var(--cyan)}
@keyframes pop{from{opacity:0;transform:translateY(-16px) scale(.8)}to{opacity:1;transform:none}}

/* ---------------- card retiring: fly from the stage into its tray slot ----- */
/* A fixed-position clone of the face-up card travels (translate + uniform
   scale only) to the exact slot the thumbnail will occupy, then the thumbnail
   lands with a small bounce. Used by both Next and Reveal-all. */
.boosterodds .fly{position:fixed;z-index:60;pointer-events:none;transform-origin:top left;
  border-radius:var(--card-radius);overflow:hidden;background:#0d0f17;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1);
  transition:transform .46s cubic-bezier(.5,0,.2,1),border-radius .46s,box-shadow .46s}
.boosterodds .fly img{width:100%;height:100%;object-fit:contain;display:block}
.boosterodds .fly.hit{box-shadow:0 18px 40px -12px rgba(0,0,0,.85),0 0 0 2px var(--gold),0 0 24px rgba(217,180,95,.5)}
.boosterodds .fly.foil{box-shadow:0 18px 40px -12px rgba(0,0,0,.85),0 0 0 2px var(--cyan),0 0 24px rgba(120,220,255,.5)}
.boosterodds .tray .mini.slot{visibility:hidden;animation:none}
.boosterodds .tray .mini.land{animation:land .45s var(--ease-out)}
@keyframes land{0%{transform:scale(1.35) translateY(-4px)}55%{transform:scale(.94)}100%{transform:none}}

.boosterodds .actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:2px}
.boosterodds .btn{height:46px;padding:0 20px;border-radius:8px;font-size:14px;font-weight:700;letter-spacing:.01em;font-family:var(--f-text);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24);transition:.15s}
.boosterodds .btn:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42);transform:translateY(-1px)}
.boosterodds .btn.primary{background:var(--volt);color:var(--bg);box-shadow:none}
.boosterodds .btn.primary:hover{background:#C4A8FF;box-shadow:none}
.boosterodds .btn.ghost{color:var(--ink-faint);box-shadow:none;font-weight:600;padding:0 8px;height:40px}
.boosterodds .btn.ghost:hover{color:var(--ink);box-shadow:none}
.boosterodds .btn:disabled{opacity:.45;cursor:default;transform:none}

/* ---------------- homepage layout (data-layout="home") ----------------
   The tool is the hero: h1 + lede + all controls in the left column, the pack
   and the value tiles on the right. The head row keeps the session figures. */
.boosterodds[data-layout="home"] .head-left{display:none}
.boosterodds[data-layout="home"] .bar{padding-top:12px;padding-bottom:4px}
.boosterodds[data-layout="home"] .pv{grid-template-columns:minmax(340px,470px) minmax(0,1fr);gap:clamp(20px,2.6vw,34px)}
.boosterodds[data-layout="home"] .pv-left{gap:18px;padding-top:6px}
.boosterodds[data-layout="home"] .home-copy h1,.boosterodds[data-layout="home"] .home-copy .h1{font-family:var(--f-display);font-weight:400;font-size:44px;line-height:1;letter-spacing:-.022em;color:var(--paper);text-wrap:balance;margin:0}
.boosterodds[data-layout="home"] .home-copy h1 em,.boosterodds[data-layout="home"] .home-copy .h1 em{font-style:normal;color:var(--lift)}
.boosterodds[data-layout="home"] .home-copy p{font-size:14.5px;line-height:1.6;color:var(--ink-dim);margin:14px 0 0}
.boosterodds[data-layout="home"] .ctl{gap:13px;padding:16px 18px}
.boosterodds[data-layout="home"] .ctl .kap{margin:0 0 7px}
.boosterodds[data-layout="home"] .home-ctl{display:flex;flex-direction:column}
.boosterodds[data-layout="home"] .field{display:flex}
.boosterodds[data-layout="home"] .field select{width:100%;max-width:none;background:var(--bg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);border-radius:8px;
  padding:11px 34px 11px 13px;font-family:var(--f-text);font-size:14.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.boosterodds[data-layout="home"] .field:hover select{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.boosterodds[data-layout="home"] .field::after{right:15px;width:7px;height:7px}
.boosterodds[data-layout="home"] .chips{gap:7px}
.boosterodds[data-layout="home"] .chip{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;border-radius:7px;padding:7px 12px;border:0;color:var(--ink-dim);box-shadow:inset 0 0 0 1px var(--line-2)}
.boosterodds[data-layout="home"] .chip:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);color:var(--ink)}
.boosterodds[data-layout="home"] .chip.on{background:var(--lift);color:var(--bg);box-shadow:none}
.boosterodds[data-layout="home"] .price-in{width:150px}
.boosterodds[data-layout="home"] .ret-hero b{font-size:34px}
.boosterodds[data-layout="home"] .btn.big{height:50px;padding:0 24px;font-size:15px;border-radius:9px}
.boosterodds[data-layout="home"] .tagline{display:none}
.boosterodds[data-layout="home"] .stage-box{min-height:406px}
.boosterodds[data-layout="home"] .tile b{font-size:30px}
/* opening inside the right column: the pack view never hides; the stage box and
   tiles give way to the reveal / summary sections that were moved in beside them */
.boosterodds[data-layout="home"] .view[data-view="pack"]{display:flex;flex-direction:column}
.boosterodds[data-layout="home"] .pv{flex:1;align-items:stretch}
.boosterodds[data-layout="home"] .pv-right{display:flex;flex-direction:column;gap:12px}
.boosterodds[data-layout="home"] .pv-right .stage-box{flex:1}
.boosterodds[data-layout="home"]:not([data-mode="pack"]) .pv-right .stage-box,
.boosterodds[data-layout="home"]:not([data-mode="pack"]) .pv-right .ev-tiles{display:none}
.boosterodds[data-layout="home"] .pv-right .view.active{display:flex;flex-direction:column;justify-content:center;flex:1;min-height:0;
  border-radius:10px;background:var(--raised);border:1px solid var(--line);padding:18px 18px 16px}
.boosterodds[data-layout="home"] .pv-right .view[data-view="reveal"].active{gap:14px;align-items:center}
.boosterodds[data-layout="home"] .pv-right .rev-head{width:100%}
.boosterodds[data-layout="home"] .pv-right .rev-body{gap:clamp(16px,2vw,36px)}
.boosterodds[data-layout="home"] .pv-right .stage-wrap{padding:clamp(8px,1.4vw,18px)}
.boosterodds[data-layout="home"] .pv-right .stage{width:min(290px,72vw)}
.boosterodds[data-layout="home"] .pv-right .panel{height:320px}
.boosterodds[data-layout="home"] .pv-right .tray{min-height:56px}
.boosterodds[data-layout="home"] .pv-right .tray{max-width:100%}
.boosterodds[data-layout="home"] .pv-right .grid{grid-template-columns:repeat(var(--cols,auto-fit),minmax(84px,96px));gap:8px;margin-bottom:12px}
.boosterodds[data-layout="home"] .pv-right .sum-head h2,.boosterodds[data-layout="home"] .pv-right .sum-head .val{font-size:20px}
.boosterodds[data-layout="home"] .pv-right .sum-sub{margin-bottom:12px}
.boosterodds[data-layout="home"] .pv-right .ev-strip{font-size:11px}
.boosterodds[data-layout="home"] .btn.big:disabled{opacity:.55}
@media (max-width:860px){
  .boosterodds[data-layout="home"] .head-left{display:none}
  .boosterodds[data-layout="home"] .pv{grid-template-columns:1fr;gap:14px}
  .boosterodds[data-layout="home"] .pv-right .view.active{padding:12px 10px}
  .boosterodds[data-layout="home"] .pv-left{order:1}.boosterodds[data-layout="home"] .pv-right{order:2}
  .boosterodds[data-layout="home"] .home-copy h1,.boosterodds[data-layout="home"] .home-copy .h1{font-size:34px}
}

/* ---------------- summary ---------------- */
.boosterodds .sum-total{display:none}
.boosterodds .sum-head{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;justify-content:center;margin-bottom:5px}
.boosterodds .sum-head h2{font-size:22px;letter-spacing:0;color:var(--paper)}
.boosterodds .sum-head .val{font-size:22px;color:var(--lift);font-variant-numeric:tabular-nums}
.boosterodds .sum-sub{text-align:center;color:var(--ink-faint);font-size:12.5px;margin-bottom:18px}
.boosterodds .grid{display:grid;gap:12px;justify-content:center;
  grid-template-columns:repeat(var(--cols,auto-fit),minmax(104px,128px));max-width:1560px;margin:0 auto 20px}
/* Price and labels live UNDER the card so nothing covers the artist credit. */
.boosterodds .gc{display:flex;flex-direction:column;gap:6px;color:var(--ink);text-decoration:none;
  animation:fadeUp .4s var(--ease-out) both;transition:transform .18s}
.boosterodds .gc:hover{transform:translateY(-4px);z-index:3}
.boosterodds .gc .shot{position:relative;aspect-ratio:var(--card-ar);border-radius:5px;overflow:hidden;background:#0d0f17;
  box-shadow:0 6px 20px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07)}
.boosterodds .gc img{width:100%;height:100%;object-fit:contain;display:block}
.boosterodds .gc .name{font-size:11px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.boosterodds .gc .cap{display:flex;align-items:center;gap:6px;font-size:10.5px;padding:0 2px;
  font-variant-numeric:tabular-nums;color:var(--ink-dim)}
.boosterodds .gc .cap>span:not(:first-child){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.boosterodds .gc .cap b{font-weight:650;color:var(--ink);margin-left:auto;flex:none}
.boosterodds .gc.top-hit .shot{box-shadow:0 8px 26px rgba(217,180,95,.4),0 0 0 2px var(--gold)}
.boosterodds .gc.foil .shot{box-shadow:0 8px 26px rgba(120,220,255,.35),0 0 0 2px var(--cyan)}
.boosterodds .gc .dot{display:block;width:8px;height:8px;border-radius:50%;flex:none;background:currentColor;
  box-shadow:0 0 6px currentColor}

.boosterodds .burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:40}
.boosterodds .p{position:absolute;width:6px;height:6px;border-radius:50%;opacity:0}
@keyframes fly{0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(.2)}}

.boosterodds .pr-footer{padding:15px;text-align:center;font-size:11px;color:var(--ink-faint);line-height:1.7;
  border-top:1px solid var(--line)}
.boosterodds .pr-footer a{color:var(--ink-dim)}

@media (max-width:560px){
  .boosterodds .bar{gap:10px 12px;padding:12px 14px}
  .boosterodds .head-left{flex-basis:100%}
  .boosterodds .field{flex:1 1 100%}
  .boosterodds .field select{width:100%;max-width:none}
  .boosterodds .stats{margin-left:0;gap:14px}
  .boosterodds .stat.more{display:none}
  .boosterodds .tools{margin-left:auto}
  .boosterodds .pr-main{padding:14px 12px}
  .boosterodds .rev-head{width:100%}
  .boosterodds .tray .mini{width:33px}.boosterodds .tray{min-height:0}
  .boosterodds .sum-head h2,.boosterodds .sum-head .val{font-size:18px}
  .boosterodds .grid{grid-template-columns:repeat(auto-fit,minmax(88px,110px));gap:10px}
  .boosterodds .ret-hero b{font-size:34px}
  .boosterodds .ev-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .boosterodds .btn.big{flex:1;text-align:center}
}
@media (prefers-reduced-motion:reduce){.boosterodds *{animation-duration:.01ms!important;transition-duration:.12s!important}}

/* ---- phone layout: must stay after every desktop rule it overrides ---- */
@media (max-width:860px){
  /* Phone layout: the card is the screen; the info panel is a fixed-height
     bottom sheet so Flip/Next never moves; the top bar hides while a pack is
     open. */
  .boosterodds .view{animation:none}                          /* a transformed ancestor would pin the fixed sheet */
  .boosterodds .pr-main{min-height:0}
  .boosterodds[data-mode="reveal"] .stats,.boosterodds[data-mode="sum"] .stats,
  .boosterodds[data-mode="reveal"] .bar,.boosterodds[data-mode="sum"] .bar{display:none}
  .boosterodds .pv{grid-template-columns:1fr;gap:14px}
  .boosterodds .pv-right{order:1}.boosterodds .pv-left{order:2}
  .boosterodds .stage-box{min-height:0;padding:16px 14px 12px}
  .boosterodds .pv .pack{width:min(210px,52vw)}
  .boosterodds .rev-body{grid-template-columns:1fr;justify-items:center;gap:0;padding-bottom:var(--sheet-h,178px)}
  .boosterodds .rev-head{width:min(560px,100%);scroll-margin-top:8px}
  .boosterodds .view{scroll-margin-top:8px}
  .boosterodds .stage-wrap{padding:8px 14px 10px}
  .boosterodds .stage{width:min(360px,80vw,calc((100dvh - 330px) * 0.7176))}
  .boosterodds .panel{position:fixed;left:0;right:0;bottom:0;z-index:80;height:auto;min-height:0;border-radius:18px 18px 0 0;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));gap:8px;text-align:left;
    background:var(--raised);box-shadow:0 -14px 40px -12px rgba(0,0,0,.9)}
  .boosterodds .panel::before{left:14px;right:14px}
  /* face-up: two columns — text left, price right; three fixed rows */
  .boosterodds .now{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:3px;align-content:start;
    height:84px;gap:3px 12px;animation:none}
  .boosterodds .now .kicker{grid-column:1/-1;gap:6px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
  .boosterodds .now .nm{grid-column:1;grid-row:2;font-size:17px;line-height:1.2;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-wrap:initial}
  .boosterodds .now .price-row{grid-column:2;grid-row:2/4;border:0;padding:0;align-items:center;align-self:center}
  .boosterodds .now .price{font-size:19px}.boosterodds .now .price-lbl{display:none}
  .boosterodds .now .type{grid-column:1;grid-row:3;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .boosterodds .now .meta{display:none}
  .boosterodds .now-empty{grid-column:1/-1;gap:4px;height:84px;justify-content:center}
  .boosterodds .now-empty .big{font-size:17px}.boosterodds .now-empty div{font-size:13px}.boosterodds .now-empty .kb{display:none}
  .boosterodds .panel .actions{margin-top:0;justify-content:stretch}
  .boosterodds .panel .actions .btn{flex:1 1 0;padding:12px 10px;font-size:14px}
  .boosterodds .tray{padding:6px 8px 0}
  /* summary: the actions become the bottom bar, with the pack total */
  .boosterodds .grid{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .boosterodds .sum-actions{position:fixed;left:0;right:0;bottom:0;z-index:80;margin:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--raised);border-top:1px solid var(--line);box-shadow:0 -14px 40px -12px rgba(0,0,0,.9);
    flex-wrap:nowrap;align-items:center;gap:8px}
  .boosterodds .sum-total{display:block;color:var(--lift);font-variant-numeric:tabular-nums;font-size:16px;margin-right:auto;white-space:nowrap}
  .boosterodds .sum-actions .btn{padding:11px 12px;font-size:13.5px;white-space:nowrap}
  .boosterodds .sum-head{margin-top:4px}
}