/* Auto-extracted from index.html — do not hand-edit huge diffs; prefer board/prompts splits */

/* ═══════════════════════════════════════ TOKENS */
:root {
  --pink:#FF6BA8; --pink-l:#FFB3D1; --pink-d:#D63384; --pink-dd:#9C1A5A;
  --bg:#120810; --bg-mid:#1E0F18; --bg-panel:#2A1520; --bg-card:#3D1A2E;
  --border:rgba(255,107,168,.25); --border-h:rgba(255,107,168,.6);
  --shadow:0 4px 24px rgba(214,51,132,.18); --shadow-lg:0 12px 40px rgba(0,0,0,.5);
  --r:12px; --rsm:8px;
  --h-pink:#FF6BA8; --h-red:#E53E3E; --h-yellow:#D4A017;
  --h-green:#2F855A; --h-blue:#2B6CB0; --h-purple:#6B46C1; --h-any:#718096;
  --ui-panel-bg:rgba(6,14,28,.84);
  --ui-panel-border:rgba(186,228,255,.32);
  --ui-panel-border-strong:rgba(186,228,255,.5);
  --ui-panel-glow:0 0 0 1px rgba(186,228,255,.08),0 8px 32px rgba(0,0,0,.45);
  /* Options → Text & UI scale (1 = 100%). Applied via zoom on scrollable shells. */
  --ui-text-scale:1;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;overflow:hidden;background-color:#329dff}
body{height:100%;overflow:hidden}
body{font-family:'Nunito',sans-serif;background:transparent;color:#fff;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;position:relative}
#llc-sky-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
/* Official site body: ptn.png tile + #4ec5ff → #329dff gradient */
.llc-sky-base{
  position:absolute;inset:0;
  background-color:#329dff;
  background-image:url("../../bg/ptn.png"),linear-gradient(90deg,#4ec5ff 0%,#329dff 100%);
  background-position:top center,top center;
  background-size:200px 200px,100% 100%;
  background-repeat:repeat,no-repeat;
}
/* .sw-Lower-Content::before — cloud/sky art layer */
.llc-sky-cloud{
  position:absolute;top:0;left:0;width:100%;
  height:min(940px,49vw);
  background:url("../../bg/bg_lower.png") top center/100% auto no-repeat;
  opacity:.92;
}
/* .sw-Lower-Content::after — feather deco (top-right) */
.llc-sky-deco-lower{
  position:absolute;
  width:min(588px,31vw);height:min(866px,46vw);
  top:min(139px,7.2vw);right:max(-6px,-.3vw);
  background:url("../../bg/deco_lower.png") top center/contain no-repeat;
  animation:wingFloating01 6s ease-in-out infinite;
  transform-origin:center center;
}
/* .st-Footer::before — wing feathers */
.llc-sky-wing{
  position:absolute;
  background:url("../../bg/deco_footer-wing.png") top center/contain no-repeat;
  pointer-events:none;
}
.llc-sky-wing-a{
  width:min(314px,16.4vw);height:min(442px,23vw);
  top:max(-165px,-8.6vw);left:7px;
  animation:wingFloating02 5.2s ease-in-out infinite;
}
.llc-sky-wing-b{
  width:min(260px,13.5vw);height:min(366px,19vw);
  bottom:8%;right:2%;
  opacity:.78;
  animation:wingFloating01b 7s ease-in-out infinite;
  animation-delay:-2s;
}
.llc-sky-wing-c{
  width:min(220px,11.5vw);height:min(310px,16vw);
  top:38%;left:-1%;
  opacity:.62;
  animation:wingFloating02 6.5s ease-in-out infinite;
  animation-delay:-1s;
}
/* Darken for game UI readability */
.llc-sky-dim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(4,12,28,.72) 0%,rgba(6,16,34,.48) 38%,rgba(4,10,24,.78) 100%),
    radial-gradient(ellipse 120% 80% at 50% 0%,rgba(255,255,255,.06) 0%,transparent 55%);
}
@keyframes wingFloating01{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(20px)}
}
@keyframes wingFloating02{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(10px)}
}
@keyframes wingFloating01b{
  0%,100%{transform:scaleX(-1) translateY(0)}
  50%{transform:scaleX(-1) translateY(20px)}
}
@media(min-width:1921px){
  .llc-sky-base{background-size:10.42vw 10.42vw,auto}
  .llc-sky-cloud{height:48.96vw}
  .llc-sky-deco-lower{width:30.6vw;height:45.1vw;top:7.24vw;right:-.31vw}
  .llc-sky-wing-a{width:16.35vw;height:23vw;top:-8.6vw}
}
@media(max-width:1024px){
  .llc-sky-base{background-size:26vw 26vw,auto}
  .llc-sky-cloud{height:122vw;background-image:url("../../bg/bg_lower_sp.png")}
  .llc-sky-deco-lower{
    width:38vw;height:56.5vw;top:4.7vw;right:3.9vw;
    background-image:url("../../bg/deco_lower_sp.png");
  }
  .llc-sky-wing-a{
    width:31vw;height:52vw;top:-20vw;left:-3vw;
    background-image:url("../../bg/deco_footer-wing_sp.png");
  }
}
@media (prefers-reduced-motion:reduce){
  .llc-sky-deco-lower,.llc-sky-wing{animation:none!important}
}
.screen{position:relative;z-index:1}
button{cursor:pointer;font-family:'Nunito',sans-serif;border:none;
  transition:all .15s ease;outline:none}
button:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}
button:active:not(:disabled){transform:translateY(0);filter:brightness(.95)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none!important;filter:none!important}
input,select{font-family:'Nunito',sans-serif;border:2px solid var(--ui-panel-border);
  border-radius:var(--r);padding:10px 14px;font-size:15px;
  background:rgba(255,255,255,.06);color:#fff;outline:none;
  transition:border-color .2s,background .2s}
input::placeholder{color:rgba(255,255,255,.3)}
input:focus,select:focus{border-color:var(--pink);background:rgba(255,255,255,.1)}
select option{background:#2A1520;color:#fff}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:rgba(255,107,168,.35);border-radius:2px}

/* ═══ SCREENS */
.screen{display:none;width:100%;height:100%}
.screen.active{display:flex}

/* ═══ LOBBY */
#screen-lobby{flex-direction:column;align-items:center;justify-content:flex-start;
  overflow-y:auto;padding:clamp(12px,2vh,24px) 16px;background:transparent}
.logo{text-align:center;margin-bottom:clamp(12px,2vh,20px);max-width:min(520px,92vw);flex-shrink:0}
.logo-img{display:block;width:100%;max-width:min(420px,72vw);height:auto;margin:0 auto;
  filter:drop-shadow(0 6px 24px rgba(255,107,168,.28))}
.logo-tagline{font-family:'Fredoka One',cursive;font-size:clamp(12px,2.8vw,16px);
  letter-spacing:.04em;color:rgba(255,255,255,.92);margin-top:0;line-height:1.3;
  text-shadow:0 1px 10px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.35)}
.logo-foot{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:baseline;width:100%;margin-top:8px;gap:8px}
.logo-tagline{grid-column:2;justify-self:center}
.logo-version{
  grid-column:1;justify-self:start;
  font-family:'Fredoka One',cursive;font-size:clamp(12px,2.8vw,16px);
  letter-spacing:.04em;color:rgba(255,255,255,.92);line-height:1.3;
  text-shadow:0 1px 10px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.35)}
.lobby-menu{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,2vh,22px);width:100%;max-width:min(920px,96vw)}
.lobby-setup{width:100%;max-width:min(430px,100%)}
.lobby-cols{
  display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;
  gap:clamp(10px,1.6vw,18px);width:100%}
.lobby-col{flex:0 1 380px;width:min(100%,380px);min-width:min(100%,260px)}
.panel{background:var(--ui-panel-bg);backdrop-filter:blur(14px);
  border:1px solid var(--ui-panel-border-strong);border-radius:20px;padding:22px 20px;
  width:100%;box-shadow:var(--ui-panel-glow)}
.panel+.panel{margin-top:12px}
.panel h2{font-family:'Fredoka One',cursive;font-size:19px;color:var(--pink);
  margin-bottom:14px;text-align:center}
.field{margin-bottom:11px}
.field label{display:block;font-weight:800;font-size:11px;
  text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.38);margin-bottom:5px}
.field input,.field select{width:100%}
.cpu-diff-pills{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 8px}
.cpu-diff-pill{
  appearance:none;border:1px solid rgba(186,228,255,.55);border-radius:10px;
  background:rgba(52,163,243,.18);color:#fff;font:inherit;font-size:12px;font-weight:800;
  letter-spacing:.04em;padding:10px 4px;cursor:pointer;line-height:1.2;
  transition:background .2s ease,border-color .2s ease,transform .15s ease}
.cpu-diff-pill:hover{background:rgba(52,163,243,.35);border-color:#fff}
.cpu-diff-pill.is-active{
  background:rgba(255,107,168,.42);border-color:#ffd0e4;box-shadow:0 0 0 1px rgba(255,208,228,.35)}
.cpu-diff-pill[data-cpu-diff="expert"].is-active{
  background:linear-gradient(135deg,rgba(255,196,92,.55),rgba(255,107,168,.45));
  border-color:#ffe6a8;box-shadow:0 0 0 1px rgba(255,230,168,.45)}
.cpu-diff-hint{
  margin:0 0 10px;font-size:11px;line-height:1.45;color:rgba(255,255,255,.62);min-height:2.6em}
.field-cpu-diff{position:relative}
.field-cpu-diff .llc-select-wrap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
.field-cpu-cosmetics{margin-top:4px}
.cpu-cosmetics-pickers{
  display:flex;align-items:center;gap:10px;
}
.cpu-cosmetic-current{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px;border:1px solid rgba(255,255,255,.28);border-radius:10px;
  background:rgba(0,0,0,.22);color:#fff;cursor:pointer;
}
.cpu-cosmetic-current:hover,.cpu-cosmetic-current:focus-visible{
  border-color:rgba(255,107,168,.65);background:rgba(0,0,0,.34);outline:none;
}
.cpu-cosmetic-current__art{
  position:relative;display:block;background:#111 center/cover no-repeat;
  box-shadow:0 2px 7px rgba(0,0,0,.4);
}
.cpu-cosmetic-current--sleeve .cpu-cosmetic-current__art{
  width:46px;aspect-ratio:63 / 88;border-radius:4px;
}
.cpu-cosmetic-current--playmat .cpu-cosmetic-current__art{
  width:92px;aspect-ratio:1024 / 563;border-radius:6px;
}
.cpu-cosmetic-current__art.is-random::after,
.deck-sleeve-tile__art.is-random::after,
.deck-playmat-tile__art.is-random::after{
  content:'?';position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(10,18,36,.56);color:#fff;font-size:clamp(22px,4vw,34px);font-weight:900;
  text-shadow:0 2px 5px #000;
}
.deck-sleeve-tile__art,.deck-playmat-tile__art{position:relative}
.cpu-cosmetics-hint{
  margin:8px 0 0;font-size:11px;line-height:1.45;color:rgba(255,255,255,.55)}
#inp-code{min-width:11.5em;font-variant-numeric:tabular-nums}
.deck-prev{margin-top:7px;background:rgba(255,255,255,.05);border:1px solid var(--ui-panel-border);
  border-radius:var(--rsm);padding:9px 11px;font-size:11px;
  color:rgba(255,255,255,.5);line-height:1.9}
.deck-regen{margin-top:2px;padding:0;border:none;background:none;color:var(--pink);font-size:11px;
  cursor:pointer;text-decoration:underline;font-family:inherit;display:inline}
.deck-regen:hover{color:#fff}
.phase-timer-lobby{
  padding:10px 12px;border-radius:var(--rsm);
  background:rgba(255,255,255,.04);border:1px solid var(--ui-panel-border)}
.phase-timer-toggle{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  font-size:13px;font-weight:700;color:rgba(255,255,255,.78);margin:0 0 8px}
.phase-timer-toggle input{flex:0 0 auto;width:auto;accent-color:var(--pink)}
.phase-timer-duration{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.phase-timer-duration[hidden]{display:none}
.phase-timer-duration label{font-size:10px;margin:0;flex:1 1 100%}
.phase-timer-duration input[type=range]{flex:1;min-width:120px;accent-color:var(--pink)}
.phase-timer-sec-label{font-size:13px;font-weight:800;color:var(--pink);min-width:36px;text-align:right}
.btn-grad{width:100%;padding:13px;border-radius:var(--r);
  background:linear-gradient(135deg,var(--pink),var(--pink-d));
  color:#fff;font-size:15px;font-weight:800;
  box-shadow:0 4px 16px rgba(214,51,132,.35)}
.prompt-branch-box{max-width:min(640px,96vw)!important}
.prompt-branch-msg{font-size:14px;color:rgba(255,255,255,.78);margin-bottom:6px;line-height:1.45}
.prompt-branch-sub{font-size:12px;color:rgba(255,255,255,.48);margin:0 0 14px}
.prompt-effect-text{
  font-size:13px;color:rgba(255,255,255,.82);line-height:1.5;margin:0 0 12px;
  padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,107,168,.22);text-align:left;max-height:min(36vh,220px);overflow-y:auto}
.prompt-effect-text .rule-kw{cursor:help;text-decoration:underline dotted rgba(255,107,168,.55)}
.prompt-cost-question{font-size:14px;color:rgba(255,255,255,.9);font-weight:700;margin:0 0 14px;line-height:1.45}
.prompt-choice-list{display:flex;flex-direction:column;gap:10px}
.prompt-choice-btn{
  display:flex;gap:12px;align-items:flex-start;text-align:left;
  width:100%;padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.06);border:2px solid rgba(255,107,168,.32);
  color:#fff;font-size:14px;font-weight:700;line-height:1.5;
  box-shadow:none;white-space:normal;word-break:break-word}
.prompt-choice-btn:hover:not(:disabled){
  background:rgba(255,107,168,.14);border-color:var(--pink);
  transform:translateY(-1px);filter:none}
.prompt-choice-num{
  flex:0 0 28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--pink-d));
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;line-height:1;margin-top:1px}
.prompt-choice-text{flex:1;min-width:0}
.prompt-choice-text.prompt-choice-hearts,
.btn-grad.prompt-choice-hearts{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px}
.prompt-choice-hearts .hicon{width:22px;height:22px;flex-shrink:0}
.prompt-choice-heart-caption,.prompt-choice-heart-suffix{font-weight:700}
.prompt-text-wrap{margin-top:4px}
.prompt-text-input{
  width:100%;padding:12px 14px;border-radius:10px;border:2px solid rgba(255,107,168,.35);
  background:rgba(0,0,0,.35);color:#fff;font-size:15px;font-family:inherit;box-sizing:border-box}
.prompt-text-input:focus{outline:none;border-color:var(--pink)}
.prompt-outcome-hints{
  margin:12px 0 0;padding:0;list-style:none;font-size:12px;color:rgba(255,255,255,.55);line-height:1.45}
.prompt-outcome-hints li{margin:6px 0;padding-left:14px;position:relative}
.prompt-outcome-hints li::before{content:'•';position:absolute;left:0;color:var(--pink)}
.prompt-text-submit{margin-top:14px;width:100%}
@media(max-width:480px){
  .prompt-choice-btn{padding:12px 14px;font-size:13px}
  .prompt-choice-num{flex-basis:24px;height:24px;font-size:12px}
}
.btn-out{width:100%;padding:11px;border-radius:var(--r);
  background:transparent;color:var(--pink);font-size:14px;font-weight:800;
  border:2px solid var(--pink)}
.btn-ghost{background:rgba(255,255,255,.07);color:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--rsm);
  padding:7px 14px;font-size:12px;font-weight:700}
.btn-danger{background:rgba(229,62,62,.14);color:#FC8181;
  border:1px solid rgba(229,62,62,.3);border-radius:var(--rsm);
  padding:7px 14px;font-size:12px;font-weight:700}
.divider{position:relative;text-align:center;color:rgba(255,255,255,.28);
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:2px;margin:16px 0}
.divider::before,.divider::after{content:'';position:absolute;top:50%;
  width:calc(50% - 26px);height:1px;background:rgba(255,255,255,.1)}
.divider::before{left:0}.divider::after{right:0}
.lerr{color:var(--pink);font-weight:800;font-size:12px;text-align:center;min-height:18px;margin-top:6px}
.btn-solo{width:100%;padding:14px 16px;border-radius:var(--r);
  background:linear-gradient(135deg,#68d391,#38a169);
  color:#fff;font-size:16px;font-weight:800;letter-spacing:.2px;
  box-shadow:0 6px 22px rgba(56,161,105,.42);margin-bottom:8px}
.btn-solo:hover{filter:brightness(1.06)}
.btn-tutorial{width:100%;padding:11px;border-radius:var(--r);
  background:linear-gradient(135deg,#5a8fd4,#3d6cb5);color:#fff;font-size:14px;font-weight:800;
  box-shadow:0 4px 14px rgba(61,108,181,.35)}
@media(max-width:720px){
  .lobby-cols{flex-direction:column;align-items:center;max-width:430px;margin:0 auto}
  .lobby-col{width:100%;max-width:430px}
  .cpu-diff-pills{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ═══ TUTORIAL SPOTLIGHT + DIALOGUE */
#tutorial-spotlight{
  position:fixed;inset:0;z-index:8500;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .25s ease}
#tutorial-spotlight.show{opacity:1;visibility:visible}
#tutorial-spotlight svg{width:100%;height:100%;display:block}
.tut-hole{fill:rgba(0,0,0,.62)}
body.tutorial-spotlight-light #tutorial-spotlight .tut-hole,
#tutorial-spotlight.light .tut-hole{fill:rgba(0,0,0,.40)}
#tutorial-spotlight.no-dim .tut-hole{fill:transparent}
.tut-ring{fill:none;stroke:#e53e3e;stroke-width:3;vector-effect:non-scaling-stroke}
.tut-ring.pulse{animation:tut-pulse 1.4s ease-in-out infinite}
@keyframes tut-pulse{
  0%,100%{stroke-opacity:1;stroke-width:3}
  50%{stroke-opacity:.55;stroke-width:5}
}
#overlay-tutorial{
  position:fixed;left:0;top:0;z-index:8600;width:min(420px,calc(100vw - 32px));
  pointer-events:auto;opacity:0;visibility:hidden;
  transition:opacity .28s ease,top .35s ease,left .35s ease,width .2s ease}
#overlay-tutorial.open{opacity:1;visibility:visible}
.tut-bar{
  position:relative;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#faf8f5 0%,#f0ebe4 100%);
  border:2px solid rgba(73,73,73,.14);
  border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.35) inset;
  padding:12px 14px 14px;overflow:visible}
.tut-bar::after{
  content:'';position:absolute;width:0;height:0;border:9px solid transparent;pointer-events:none}
#overlay-tutorial[data-placement="bottom"] .tut-bar::after{
  top:-18px;left:var(--tut-arrow-x,50%);transform:translateX(-50%);
  border-bottom-color:#f5f1eb}
#overlay-tutorial[data-placement="top"] .tut-bar::after{
  bottom:-18px;left:var(--tut-arrow-x,50%);transform:translateX(-50%);
  border-top-color:#f0ebe4}
#overlay-tutorial[data-placement="right"] .tut-bar::after{
  left:-18px;top:var(--tut-arrow-y,50%);transform:translateY(-50%);
  border-right-color:#f5f1eb}
#overlay-tutorial[data-placement="left"] .tut-bar::after{
  right:-18px;top:var(--tut-arrow-y,50%);transform:translateY(-50%);
  border-left-color:#f5f1eb}
.tut-exit{
  position:absolute;top:8px;right:10px;z-index:2;
  background:rgba(73,73,73,.08);border:1px solid rgba(73,73,73,.18);
  color:#494949;border-radius:8px;padding:4px 9px;font-size:10px;font-weight:800;cursor:pointer}
.tut-exit:hover{background:rgba(73,73,73,.14)}
.tut-body{display:flex;gap:12px;align-items:flex-start;padding-top:2px;padding-right:52px}
.tut-portrait{
  flex:0 0 80px;width:80px;height:88px;
  object-fit:contain;object-position:center bottom;
  border:none;border-radius:0;background:transparent}
.tut-content{flex:1;min-width:0}
.tut-speaker{font-size:17px;font-weight:800;color:#494949;margin:0 0 4px;line-height:1.2}
.tut-sep{height:2px;background:linear-gradient(90deg,rgba(73,73,73,.25),rgba(73,73,73,.08));
  margin:0 0 10px;border-radius:1px}
.tut-text{font-size:15px;line-height:1.55;color:#494949;margin:0}
.tut-text b,.tut-text strong{color:#1a1a1a;font-weight:800}
.tut-nav{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-shrink:0;margin-top:12px;padding-top:10px;border-top:1px solid rgba(73,73,73,.12)}
.tut-nav button{
  padding:9px 18px;border-radius:10px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit}
.tut-btn-back{background:#fff;color:#494949;border:2px solid rgba(73,73,73,.22)}
.tut-btn-back:disabled{opacity:.35;cursor:not-allowed}
.tut-btn-next{background:linear-gradient(135deg,var(--pink),var(--pink-d));color:#fff;border:none;
  box-shadow:0 3px 12px rgba(214,51,132,.3)}
.tut-step{display:none!important}
/*
 * Tutorial pointer model
 * - Slideshow / live info+watch: board blocked; only Kanon bubble is clickable
 * - Live ACTION steps: board uses normal gameplay hit-testing (JS gates which
 *   cards/actions). Dialogue chrome must NOT sit on top of the hand/stage.
 */
body.tutorial-mode:not(.tutorial-live-action) #screen-game,
body.tutorial-mode:not(.tutorial-live-action) #screen-game *,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-mull,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-mull *,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-coin,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-coin *,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-live,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-live *,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-prompt,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-prompt *,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-pick,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-pick *,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-hand-pick,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-hand-pick *,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-heart,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-heart *,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-surveil,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-surveil *,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-zone,
body.tutorial-mode:not(.tutorial-live-mode) #overlay-zone *,
body.tutorial-mode:not(.tutorial-live-mode) #modal-card,
body.tutorial-mode:not(.tutorial-live-mode) #modal-card *,
body.tutorial-mode #perf-spectacle,
body.tutorial-mode #perf-spectacle *,
body.tutorial-mode #center-banner,
body.tutorial-mode #center-banner *,
body.tutorial-mode #overlay-win,
body.tutorial-mode #overlay-win *,
body.tutorial-mode #rule-kw-tip,
body.tutorial-mode #card-flight-layer{
  pointer-events:none!important;user-select:none}
body.tutorial-mode #tutorial-spotlight.show{pointer-events:auto}
body.tutorial-mode #overlay-tutorial,
body.tutorial-mode #overlay-tutorial *{pointer-events:auto}
/* Live action: keep dialogue visually above the board, but never steal hits.
 * pointer-events:none on the bubble lets raise/drag reach the hand underneath. */
body.tutorial-live-mode.tutorial-live-action #overlay-tutorial,
body.tutorial-live-mode.tutorial-live-action #overlay-tutorial.open{
  pointer-events:none!important}
body.tutorial-live-mode.tutorial-live-action #overlay-tutorial .tut-bar,
body.tutorial-live-mode.tutorial-live-action #overlay-tutorial .tut-bar *{
  pointer-events:none!important}
body.tutorial-live-mode.tutorial-live-action #overlay-tutorial .tut-exit,
body.tutorial-live-mode.tutorial-live-action #overlay-tutorial .tut-nav,
body.tutorial-live-mode.tutorial-live-action #overlay-tutorial .tut-nav *{
  pointer-events:auto!important}
body.tutorial-live-mode.tutorial-live-action #screen-game{
  pointer-events:auto!important}
body.tutorial-live-mode.tutorial-live-action #screen-game .my-hand-strip,
body.tutorial-live-mode.tutorial-live-action #screen-game .my-hand-strip *{
  pointer-events:auto!important}
body.tutorial-live-mode.tutorial-live-action #screen-game .playmat-frame.my-mat,
body.tutorial-live-mode.tutorial-live-action #screen-game .playmat-frame.my-mat *{
  pointer-events:auto!important}
body.tutorial-live-mode.tutorial-live-action #screen-game #phase-action-bar,
body.tutorial-live-mode.tutorial-live-action #screen-game #phase-action-bar *,
body.tutorial-live-mode.tutorial-live-action #screen-game .card-hover-panel,
body.tutorial-live-mode.tutorial-live-action #screen-game .card-hover-panel *{
  pointer-events:auto!important}
body.tutorial-live-mode.tutorial-live-action #screen-game .opp-hand-strip,
body.tutorial-live-mode.tutorial-live-action #screen-game .opp-hand-strip *,
body.tutorial-live-mode.tutorial-live-action #screen-game .playmat-frame.opp-mat,
body.tutorial-live-mode.tutorial-live-action #screen-game .playmat-frame.opp-mat *{
  pointer-events:none!important}
/* Guided card must drag on touch (manipulation cancels drag before threshold). */
body.tutorial-live-mode.tutorial-live-action #hand-row .hcard.tut-hand-sel{
  touch-action:none;cursor:grab}
body.tutorial-mode:not(.tutorial-live-mode) #phase-action-bar{pointer-events:none!important}
body.tutorial-mode:not(.tutorial-live-mode) #phase-action-bar .btn-phase-primary{
  opacity:1;cursor:not-allowed;transform:none!important;filter:saturate(.92);
}
body.tutorial-live-mode #phase-action-bar{pointer-events:auto!important}
body.tutorial-live-mode #phase-action-bar .btn-phase-primary:not(.tut-locked){
  opacity:1;cursor:pointer;transform:none!important;filter:none;
}
body.tutorial-live-mode #phase-action-bar .btn-phase-primary.tut-locked{
  opacity:.45;cursor:not-allowed;pointer-events:none!important;
}
body.tutorial-live-mode #overlay-mull .btn-grad{opacity:1;pointer-events:auto}
body.tutorial-live-mode #overlay-mull:not(.tut-mull-readonly) .mullcard{pointer-events:auto;cursor:pointer}
/* Rails mulligan: only the guided target card is interactive. */
body.tutorial-live-mode #overlay-mull.tut-mull-rails .mullcard:not(.tut-mull-target){
  pointer-events:none!important;cursor:default;opacity:.55;filter:grayscale(.25);
}
body.tutorial-live-mode #overlay-mull.tut-mull-rails .mullcard.tut-mull-target{
  pointer-events:auto!important;cursor:pointer;outline:2px solid rgba(244,114,182,.95);
  box-shadow:0 0 0 3px rgba(244,114,182,.28);
}
body.tutorial-live-mode #overlay-mull.tut-mull-rails .btn-grad{
  opacity:1;pointer-events:auto!important;cursor:pointer;
}
body.tutorial-live-mode #overlay-mull.tut-mull-rails .btn-grad:disabled{
  opacity:.45;cursor:not-allowed;pointer-events:none!important;
}
body.tutorial-live-mode #overlay-coin{pointer-events:auto}
/* Live tutorial: bubble above spotlight dim layer; still below game modals (coin, mulligan, prompts). */
body.tutorial-live-mode #overlay-tutorial,
body.tutorial-live-mode #overlay-tutorial.open{z-index:8700}
body.tutorial-live-coin #overlay-tutorial,
body.tutorial-live-coin #overlay-tutorial.open,
body.tutorial-live-mulligan #overlay-tutorial,
body.tutorial-live-mulligan #overlay-tutorial.open{z-index:8950}
/* choose_first: keep Kanon bubble above the coin dim so dialogue stays readable;
   coin choice buttons remain clickable via pointer-events below. */
body.tutorial-live-choose-first #overlay-coin,
body.tutorial-live-choose-first #overlay-coin.open{z-index:9000!important}
body.tutorial-live-choose-first #overlay-tutorial,
body.tutorial-live-choose-first #overlay-tutorial.open{z-index:9100!important}
body.tutorial-live-choose-first #tutorial-spotlight,
body.tutorial-live-choose-first #tutorial-spotlight.show{pointer-events:none!important;z-index:8500}
body.tutorial-live-choose-first #overlay-coin,
body.tutorial-live-choose-first #overlay-coin *{pointer-events:auto!important}
body.tutorial-live-mode #overlay-coin.open,
body.tutorial-live-mode #overlay-mull.open,
body.tutorial-live-mode #overlay-prompt.open,
body.tutorial-live-mode #overlay-pick.open,
body.tutorial-live-mode #overlay-hand-pick.open,
body.tutorial-live-mode #overlay-live.open{z-index:8800!important}
body.tutorial-live-coin #overlay-coin,
body.tutorial-live-mulligan #overlay-mull{z-index:8800}
body.tutorial-live-coin #tutorial-spotlight,
body.tutorial-live-coin #tutorial-spotlight.show,
body.tutorial-live-mulligan #tutorial-spotlight,
body.tutorial-live-mulligan #tutorial-spotlight.show{pointer-events:none!important}
body.tutorial-live-coin #overlay-tutorial,
body.tutorial-live-coin #overlay-tutorial.open,
body.tutorial-live-mulligan #overlay-tutorial,
body.tutorial-live-mulligan #overlay-tutorial.open{pointer-events:auto}
body.tutorial-live-coin #overlay-coin,
body.tutorial-live-coin #overlay-coin *,
body.tutorial-live-mulligan #overlay-mull,
body.tutorial-live-mulligan #overlay-mull *{pointer-events:auto!important}
body.tutorial-live-mode:not(.tutorial-live-action) #tutorial-spotlight,
body.tutorial-live-mode:not(.tutorial-live-action) #tutorial-spotlight.show{
  pointer-events:none!important}
body.tutorial-live-action .tut-btn-next{opacity:.35;pointer-events:none}
body.tutorial-live-mode.tutorial-live-action #tutorial-spotlight,
body.tutorial-live-mode.tutorial-live-action #tutorial-spotlight.show{
  pointer-events:none!important;opacity:0!important;visibility:hidden!important}
body.tutorial-mode .side-log .sbfoot{pointer-events:none!important}
body.tutorial-mode .side-log .sbfoot button{
  opacity:.72;cursor:not-allowed;transform:none!important;
}
body.tutorial-mode #center-banner.show{z-index:8700}
body.tutorial-mode.tut-pin-card-info #card-hover-panel{opacity:1;pointer-events:none}
body.tutorial-mode.tut-pin-card-info #card-hover-panel .hc-empty{display:none}
/* Outline only — never pin transform. Raise / play-sel / drag rely on translateY. */
body.tutorial-mode #hand-row .hcard.tut-hand-sel{
  outline:2px solid var(--pink);outline-offset:2px;
  box-shadow:0 0 12px rgba(255,107,168,.45),0 0 22px rgba(56,161,105,.35);
  border-color:rgba(56,161,105,.85);z-index:28;
}
body.tutorial-mode #hand-row .hcard.tut-hand-sel.play-sel{
  border-color:rgba(56,161,105,.9);
  box-shadow:0 0 22px rgba(56,161,105,.65),0 10px 28px rgba(0,0,0,.5),0 0 12px rgba(255,107,168,.35);
  z-index:42;
  /* Explicit raise so tutorial CSS never suppresses normal play-sel lift. */
  transform:translateY(-28px)!important;
}
/* Live hand-play: mute other cards visually; JS gates which card can be played. */
body.tutorial-live-mode.tutorial-live-action #hand-row .hcard:not(.tut-hand-sel){
  opacity:.48;filter:grayscale(.2);
}
body.tutorial-live-mode.tutorial-live-action #hand-row .hcard.tut-hand-sel{
  opacity:1;filter:none;cursor:grab;touch-action:none;
}
body.tutorial-mode #sb-activatable-wrap.tut-show{outline:2px solid rgba(255,107,168,.35);border-radius:10px}

/* ═══ WAITING */
#screen-waiting{flex-direction:column;align-items:center;justify-content:center;
  background:transparent;padding:24px}
.wait-box{background:var(--ui-panel-bg);backdrop-filter:blur(14px);
  border:1px solid var(--ui-panel-border-strong);border-radius:24px;padding:36px 28px;
  text-align:center;max-width:360px;width:100%;box-shadow:var(--ui-panel-glow)}
.wait-box h2{font-family:'Fredoka One',cursive;font-size:24px;color:var(--pink);margin-bottom:5px}
.wait-box p{font-size:12px;color:rgba(255,255,255,.4)}
.wait-timer-info{font-size:12px;color:rgba(255,255,255,.52);margin:10px 0 0;line-height:1.45}
.code-disp{font-family:'Fredoka One',cursive;font-size:48px;letter-spacing:7px;color:#fff;
  background:rgba(255,107,168,.1);border:2px dashed rgba(255,107,168,.4);
  border-radius:var(--r);padding:14px 20px;margin:18px 0 6px;cursor:pointer;transition:all .2s}
.code-disp:hover{background:rgba(255,107,168,.17);border-color:var(--pink)}
.spinner{width:38px;height:38px;border:4px solid rgba(255,107,168,.2);
  border-top-color:var(--pink);border-radius:50%;
  animation:spin 1s linear infinite;margin:18px auto 10px}
#screen-waiting.llc-menu-screen{
  overflow-y:auto;padding:clamp(12px,2vh,24px) 16px;font-family:'Zen Kaku Gothic New','Nunito',sans-serif}
#screen-waiting.llc-menu-screen .wait-box{
  position:relative;overflow:hidden;max-width:min(420px,92vw);padding:28px 24px 22px;
  border:1px solid rgba(255,255,255,.4);border-radius:10px;
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(52,163,243,.82);
  backdrop-filter:none;box-shadow:none}
#screen-waiting.llc-menu-screen .wait-box h2{
  font-family:Kalnia,serif;font-weight:500;font-size:clamp(24px,4.5vw,34px);line-height:1.15;
  letter-spacing:.02em;margin-bottom:8px;text-align:center;
  background:linear-gradient(45deg,#ffcbe1 0%,#fff 18%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
#screen-waiting.llc-menu-screen .wait-box p{
  font-size:13px;color:rgba(255,255,255,.88);letter-spacing:.04em;line-height:1.45}
#screen-waiting.llc-menu-screen .wait-hint{font-size:11px;color:rgba(255,255,255,.62);margin:0 0 4px}
#screen-waiting.llc-menu-screen .wait-timer-info{
  font-family:'Libre Baskerville',serif;font-size:13px;color:rgba(255,255,255,.82)}
#screen-waiting.llc-menu-screen .code-disp{
  font-family:'Fredoka One',cursive;font-weight:400;font-size:clamp(36px,8vw,48px);letter-spacing:7px;
  color:#fff;background:rgba(255,255,255,.1);border:1px solid #bae4ff;border-radius:10px;
  padding:14px 18px;margin:16px 0 6px;transition:background .25s ease,border-color .25s ease}
#screen-waiting.llc-menu-screen .code-disp:hover{
  background:url("../../bg/ptn.png") top center/200px 200px repeat,#bae4ff;color:#4a5c80;border-color:#fff}
#screen-waiting.llc-menu-screen .spinner{
  border-color:rgba(255,255,255,.25);border-top-color:#fff;margin:16px auto 10px}
#screen-waiting.llc-menu-screen .wait-actions{margin-top:16px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══ GAME — dual playmats (opponent top, you bottom) + hand strips */
#screen-game{
  align-items:stretch;justify-content:center;
  background:transparent;overflow:hidden;
}
.game-viewport-frame{
  flex:1 1 auto;width:100%;min-height:100vh;
  display:flex;align-items:stretch;justify-content:center;
}
#screen-game .game-viewport-frame .game-wide-wrap{flex:1 1 auto}
:root{--hand-strip-h:132px;--hand-card-pad:24px;--my-hand-card-h:calc((var(--hand-strip-h) - var(--hand-card-pad)) * 1.44);--opp-hand-card-h:calc((var(--hand-strip-h) - var(--hand-card-pad)) * 1.28);--skill-hand-preserve-h:calc(max(var(--hand-strip-h),var(--my-hand-card-h)) + 30px);--skill-hand-blur-feather:min(88px,14vh);--mat-seam-h:5px;--menu-card-h:118px;--side-panel-w:440px;--playmat-gutter:880px;--playmat-aspect:1024/563;--playmat-mat-max-h:calc((100vh - 2 * var(--hand-strip-h) - var(--mat-seam-h) - 8px) / 2);--playmat-col-max-w:min(calc(100vw - var(--playmat-gutter)),calc(var(--playmat-mat-max-h) * 1024 / 563));--field-card-scale:1.16;--pile-fill-scale:1.14;--flight-ms:300ms;--fan-shift-ms:280ms;--energy-flip-ms:360ms}
.game-wide-wrap{
  width:100%;height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:transparent;gap:0;
  border-left:1px solid rgba(186,228,255,.08);
  border-right:1px solid rgba(186,228,255,.08);
  box-shadow:inset 0 0 80px rgba(0,0,0,.35);
}
.playmat-column{
  flex:0 0 auto;
  position:relative;
  width:var(--playmat-col-max-w);
  max-width:var(--playmat-col-max-w);
  display:flex;flex-direction:column;
  align-items:stretch;
  max-height:100vh;
  min-width:0;
  overflow:visible;
}
.mat-seam{
  flex:0 0 var(--mat-seam-h);
  background:linear-gradient(90deg, rgba(255,107,168,.05), rgba(255,107,168,.35), rgba(255,107,168,.05));
  box-shadow:0 0 12px rgba(255,107,168,.15);
}
/* Layout-neutral on desktop — mobile rules below retarget these for mat pan/zoom. */
.playmat-mat-viewport,
.playmat-mat-stack{display:contents}
.hand-strip{
  flex:0 0 var(--hand-strip-h);
  height:var(--hand-strip-h);
  position:relative;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,14,28,.88);
  border-top:1px solid var(--ui-panel-border);
  border-bottom:1px solid var(--ui-panel-border);
  overflow-x:auto;overflow-y:hidden;
  padding:6px 12px;
  scrollbar-width:thin;
}
.hand-strip.opp-hand-strip{
  align-items:flex-start;padding-top:10px;
  border-bottom:1px solid var(--ui-panel-border);
  /* Y open for peek; X stays visible so a thin edge-bleed into panels is allowed.
     Fan width is still packed to the playmat column (see layoutHandFan). */
  overflow:visible;
  max-width:100%;
  z-index:25;
}
.opp-hand-strip .hand-fan{
  align-items:flex-start;
  overflow:visible;
  height:auto;
  min-height:100%;
}
.hand-strip.my-hand-strip{
  align-items:flex-end;padding-bottom:10px;
  border-top:1px solid var(--ui-panel-border);
  overflow:visible;
  max-width:100%;
  z-index:25;
}
.hand-strip.my-hand-strip .hand-fan{
  align-items:flex-end;
  overflow:visible;
  height:auto;
  min-height:100%;
}
html:not(.tcg-mobile-viewport) #screen-game .my-hand-strip .hcard{
  height:var(--my-hand-card-h);width:auto;aspect-ratio:63/88;
}
html:not(.tcg-mobile-viewport) #screen-game .opp-hand-strip .opp-hand-card{
  height:var(--opp-hand-card-h);width:auto;aspect-ratio:63/88;
}
.my-hand-strip .hcard:hover:not(.play-sel){transform:translateY(-10px);z-index:5}
.my-hand-strip .hcard.hover-sel:not(.play-sel){transform:translateY(-12px);z-index:6}
.my-hand-strip .hcard.play-sel{
  transform:translateY(-28px);
  z-index:24;
  border-color:rgba(56,161,105,.9);
  box-shadow:0 0 22px rgba(56,161,105,.6),0 10px 28px rgba(0,0,0,.5);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.hand-strip-label{
  position:absolute;left:10px;top:6px;
  font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;
  color:rgba(255,255,255,.32);pointer-events:none;z-index:1;
}
.hand-strip.my-hand-strip .hand-strip-label{bottom:6px;top:auto}
.hand-fan{
  display:flex;align-items:flex-end;justify-content:center;
  height:100%;min-width:min-content;padding:0 4px;
}
/* The component wrapper must not contribute the hand's intrinsic card width.
   Otherwise large hands widen past the playmat even when .hand-fan is 100%. */
html:not(.tcg-portrait-play) #screen-game ll-hand-zone{
  display:block;width:100%;min-width:0;max-width:100%;
}
/* Desktop: never let min-content fan width escape the playmat column. */
html:not(.tcg-mobile-viewport):not(.tcg-portrait-play) #screen-game .hand-fan{
  min-width:0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
#screen-game.prep-hands-hidden .my-hand-strip,
#screen-game.prep-hands-hidden .opp-hand-strip{
  visibility:hidden;pointer-events:none;
}
#screen-game img,
.overlay .mbox img.card-face-fill,
.overlay .surveilcard img,
.overlay .mullcard img,
.overlay .menu-card img{
  pointer-events:none;-webkit-touch-callout:none;-webkit-user-drag:none;
  user-select:none;-webkit-user-select:none;
}
#screen-game .mslot,#screen-game .lcard,#screen-game .echip-stack{
  -webkit-touch-callout:none;touch-action:manipulation;
}
.side-panel{
  flex:0 0 var(--side-panel-w);width:var(--side-panel-w);
  min-width:var(--side-panel-w);max-width:var(--side-panel-w);
  height:100vh;
  background:var(--ui-panel-bg);
  backdrop-filter:blur(12px);
  border-color:var(--ui-panel-border);
  display:flex;flex-direction:column;gap:10px;
  padding:14px 12px;overflow:hidden;
  box-shadow:var(--ui-panel-glow);
}
/* Use 16:9 desktop side space for the panels instead of leaving sky margins.
   The playmat remains height-fitted so cards never overlap the hand strips. */
@media (min-width:1000px) and (min-aspect-ratio:16/10) {
  html:not(.tcg-mobile-viewport):not(.tcg-compact-desktop) #screen-game .game-wide-wrap{
    --side-panel-w:min(600px,max(clamp(280px,23vw,440px),calc((100vw - (var(--playmat-mat-max-h) * 1024 / 563)) / 2)));
    --playmat-gutter:calc(2 * var(--side-panel-w));
  }
}
@media (min-width:1000px) and (min-aspect-ratio:16/10) and (max-height:1100px) {
  html:not(.tcg-mobile-viewport):not(.tcg-compact-desktop){
    /* Field cards fill their printed slot (slight bleed) instead of sitting
       small inside the outline. */
    --field-card-scale:1.16;
    --pile-fill-scale:1.14;
    /* 1080p: large hands, shifted toward the viewport edges. */
    --hand-strip-h:96px;
    --hand-card-pad:18px;
    --my-hand-card-h:calc(var(--hand-strip-h) * 1.5);
    --opp-hand-card-h:calc(var(--hand-strip-h) * 1.32);
    /* Keep both hand edges inside the printed playmat border. */
    --hand-safe-inline:8px;
  }
  html:not(.tcg-mobile-viewport):not(.tcg-compact-desktop) #screen-game .game-wide-wrap{
    --hand-strip-h:96px;
    --hand-card-pad:18px;
    --my-hand-card-h:calc(var(--hand-strip-h) * 1.5);
    --opp-hand-card-h:calc(var(--hand-strip-h) * 1.32);
    --hand-safe-inline:8px;
    --playmat-mat-max-h:calc((100vh - 2 * var(--hand-strip-h) - var(--mat-seam-h) - 8px) / 2 - 14px);
    --side-panel-w:min(440px,max(280px,calc((100vw - (var(--playmat-mat-max-h) * 1024 / 563)) / 2)));
    --playmat-gutter:calc(2 * var(--side-panel-w));
    --playmat-col-max-w:min(calc(100vw - var(--playmat-gutter)),calc(var(--playmat-mat-max-h) * 1024 / 563));
  }
  html:not(.tcg-mobile-viewport):not(.tcg-compact-desktop) #screen-game .hand-strip{
    padding-inline:var(--hand-safe-inline);
  }
  html:not(.tcg-mobile-viewport):not(.tcg-compact-desktop) #screen-game .opp-hand-strip{
    transform:translateY(-26px);
  }
  html:not(.tcg-mobile-viewport):not(.tcg-compact-desktop) #screen-game .my-hand-strip{
    transform:translateY(26px);
  }
  html:not(.tcg-mobile-viewport):not(.tcg-compact-desktop) #screen-game .stage-slot .mslot,
  html:not(.tcg-mobile-viewport):not(.tcg-compact-desktop) #screen-game .live-slot-wrap .lcard.live-card{
    width:100%;
  }
}
.side-panel.side-left{padding-bottom:12px}
html:not(.tcg-mobile-viewport):not(.tcg-portrait-play) #screen-game .side-panel.side-left{
  position:relative;
}
/* Tall skill text: expand upward over left-panel chrome and stay on-screen. */
html:not(.tcg-mobile-viewport):not(.tcg-portrait-play) #screen-game #card-hover-panel.visible{
  position:absolute;
  left:12px;right:12px;bottom:12px;
  z-index:90;
  margin-top:0;
  max-height:calc(100% - 24px);
  overflow-x:hidden;
  overflow-y:auto;
  background:rgba(8,14,28,.97);
  border:1px solid var(--ui-panel-border-strong);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 -16px 48px rgba(0,0,0,.55);
  backdrop-filter:blur(14px);
}
.card-hover-panel{
  flex:0 0 auto;flex-shrink:0;
  min-height:96px;
  margin-top:auto;
  display:flex;flex-direction:column;gap:6px;
  overflow:visible;
  opacity:0;pointer-events:none;
  transition:opacity .18s ease;
  background:rgba(255,255,255,.04);
  border:1px solid var(--ui-panel-border);
  border-radius:12px;padding:8px 10px;
}
.card-hover-panel.visible{opacity:1;pointer-events:auto}
.card-hover-panel .hc-empty{
  font-size:11px;color:rgba(255,255,255,.32);text-align:center;
  padding:24px 8px;line-height:1.5;
}
.card-hover-panel .hc-img{
  width:100%;max-width:168px;margin:0 auto;
  aspect-ratio:63/88;border-radius:6px;object-fit:cover;
  box-shadow:0 4px 14px rgba(0,0,0,.45);display:none;
}
.card-hover-panel .hc-img.show{display:block}
.card-hover-panel .hc-img.landscape{max-width:200px;aspect-ratio:88/63}
.card-hover-panel .hc-name{
  font-family:'Fredoka One',cursive;font-size:15px;color:#fff;
  text-align:center;line-height:1.2;
}
.card-hover-panel .hc-sub{font-size:10px;color:rgba(255,255,255,.42);text-align:center}
.card-hover-panel .hc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.card-hover-panel .hc-stats .sbox{padding:4px 2px}
.card-hover-panel .hc-stats .sk{font-size:8px}
.card-hover-panel .hc-stats .sv{font-size:12px}
.card-hover-panel .hc-text{
  font-size:10px;color:rgba(255,255,255,.58);line-height:1.45;
}
.card-hover-panel .hc-text .rule-you-may,
.ctxt .rule-you-may{
  color:#F6E05E;font-weight:700;
}
.card-hover-panel .hc-play-label,
#cd-actions .hc-play-label{
  font-size:10px;color:rgba(255,255,255,.38);text-align:center;margin:4px 0 6px;
}
.card-hover-panel .hc-play-warn,
#cd-actions .hc-play-warn{
  font-size:10px;color:#FC8181;text-align:center;margin-top:6px;
}
.card-hover-panel .hc-slotrow .btn-smol{width:100%;padding:5px 6px;font-size:10px}
.card-hover-panel .hc-slotrow .btn-smol:disabled{opacity:.42;cursor:default}
.card-hover-panel .hc-live-multi{
  display:none;flex-direction:column;align-items:center;gap:8px;width:100%;
}
.card-hover-panel.live-multi .hc-live-multi{display:flex}
.card-hover-panel.live-multi .hc-img,
.card-hover-panel.live-multi .hc-name,
.card-hover-panel.live-multi .hc-sub,
.card-hover-panel.live-multi .hc-stats,
.card-hover-panel.live-multi .hc-text,
.card-hover-panel.live-multi #hc-actions{display:none!important}
.card-hover-panel .hc-live-place{
  display:none;
  width:100%;
  margin-top:10px;
  flex:0 0 auto;
}
.card-hover-panel .hc-live-place.show,
.card-hover-panel .hc-live-place:not([hidden]){
  display:block;
}
.card-hover-panel .hc-live-place .btn-hc-live-place{
  width:100%;
  min-height:44px;
  border-radius:10px;
  font-size:14px;
  font-weight:800;
}
.card-hover-panel .hc-live-multi-thumbs{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;width:100%;
}
.card-hover-panel .hc-live-multi-thumbs .hc-live-thumb{
  width:min(72px,28%);aspect-ratio:88/63;border-radius:5px;object-fit:cover;
  box-shadow:0 3px 10px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25);
}
.card-hover-panel .hc-live-multi-title{
  font-family:'Fredoka One',cursive;font-size:15px;color:#fff;text-align:center;line-height:1.2;
}
.card-hover-panel .hc-live-multi-score{
  font-family:'Fredoka One',cursive;font-size:22px;font-weight:800;color:#ffb4d9;
  text-align:center;line-height:1.15;text-shadow:0 2px 10px rgba(255,100,180,.35);
}
.card-hover-panel .hc-live-multi-sub{
  font-size:10px;color:rgba(255,255,255,.42);text-align:center;margin-top:-4px;
}
.card-hover-panel .hc-live-multi-hearts{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;
  padding:6px 4px 2px;width:100%;
}
.card-hover-panel .hc-live-multi-hearts .heart-stat-row{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Fredoka One',cursive;font-size:26px;font-weight:800;color:#fff;line-height:1;
}
.card-hover-panel .hc-live-multi-hearts .hicon{
  width:36px;height:36px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.card-hover-panel .hc-live-multi-label{
  font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:rgba(255,255,255,.45);text-align:center;
}
#picker-card-hover-panel{
  position:fixed;
  left:0;
  top:0;
  z-index:968;
  width:min(248px, 26vw);
  max-height:min(92vh, calc(100dvh - 24px));
  overflow-x:hidden;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px 10px;
  margin:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
  background:rgba(4,10,22,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--ui-panel-border-strong);
  border-radius:12px;
  box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 10px 36px rgba(0,0,0,.55);
}
#picker-card-hover-panel.visible{opacity:1;visibility:visible}
/* Stay above zone/pick overlays (incl. spectacle-elevated zone @ 9200). */
body:has(#overlay-zone.open) #picker-card-hover-panel,
body:has(#overlay-pick.open) #picker-card-hover-panel,
body:has(#overlay-mull.open) #picker-card-hover-panel,
body:has(#overlay-hand-pick.open) #picker-card-hover-panel,
body:has(#overlay-surveil.open) #picker-card-hover-panel,
body:has(#modal-decklog-missing.open) #picker-card-hover-panel,
body:has(#modal-decklog-sub-pick.open) #picker-card-hover-panel{
  z-index:9300;
}
body:has(#modal-decklog-missing.open) #modal-card,
body:has(#modal-decklog-sub-pick.open) #modal-card{
  z-index:9400;
}
#picker-card-hover-panel .hc-img{max-width:118px}
#picker-card-hover-panel .hc-img.landscape{max-width:138px}
#picker-card-hover-panel .hc-name{font-size:13px;line-height:1.25}
#picker-card-hover-panel .hc-sub{font-size:9px}
#picker-card-hover-panel .hc-stats .sbox{padding:3px 2px}
#picker-card-hover-panel .hc-stats .sk{font-size:7px}
#picker-card-hover-panel .hc-stats .sv{font-size:11px}
#picker-card-hover-panel .hc-text{font-size:10px;max-height:min(34vh, 220px);overflow-y:auto}
html.tcg-mobile-viewport #picker-card-hover-panel{display:none!important}
#screen-deck .deck-builder-pool-layout{
  display:flex;
  flex-direction:row;
  align-items:stretch;
  gap:8px;
  flex:1 1 auto;
  min-height:0;
  min-width:0;
}
#screen-deck .deck-builder-pool-main{
  display:flex;
  flex-direction:column;
  flex:1 1 0;
  min-width:0;
  min-height:0;
}
#deck-card-hover-panel{
  flex:0 0 var(--deck-hover-panel-w,248px);
  width:var(--deck-hover-panel-w,248px);
  max-width:min(var(--deck-hover-panel-w,248px),34vw);
  min-width:0;
  align-self:flex-start;
  height:auto;
  max-height:min(100%,calc(100dvh - 120px));
  display:flex;
  flex-direction:column;
  gap:5px;
  overflow:hidden;
  margin-top:0;
  opacity:1;
  pointer-events:auto;
  z-index:1;
  padding:8px 9px;
  background:rgba(4,10,22,.94);
  backdrop-filter:blur(16px);
  border:1px solid var(--ui-panel-border-strong);
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 10px 36px rgba(0,0,0,.55);
}
#deck-card-hover-panel .hc-img{
  flex-shrink:0;
  max-width:118px;
  margin-bottom:0;
}
#deck-card-hover-panel .hc-img.landscape{max-width:138px}
#deck-card-hover-panel .hc-name{
  flex-shrink:0;
  font-size:13px;
  line-height:1.25;
}
#deck-card-hover-panel .hc-sub{
  flex-shrink:0;
  font-size:9px;
  color:rgba(255,255,255,.58);
}
#deck-card-hover-panel .hc-stats{
  flex-shrink:0;
  gap:3px;
}
#deck-card-hover-panel .hc-stats .sbox{padding:3px 2px}
#deck-card-hover-panel .hc-stats .sk{font-size:7px}
#deck-card-hover-panel .hc-stats .sv{font-size:11px}
#deck-card-hover-panel .hc-empty{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.48);
}
#deck-card-hover-panel .hc-text{
  flex:0 1 auto;
  min-height:0;
  max-height:min(42vh,320px);
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  font-size:11px;
  line-height:1.5;
  color:rgba(255,255,255,.78);
  scrollbar-gutter:stable;
}
#cd-actions .deck-copy-id-row{
  display:flex;justify-content:center;margin-top:6px;
}
#cd-actions .deck-copy-id-btn{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;padding:5px 10px;
}
.stage-slot.play-glow-valid::after,
.stage-slot.play-glow-invalid::after{
  content:'';position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:6px;
  transition:box-shadow .18s ease, opacity .18s ease;
}
.stage-slot.play-glow-valid::after{
  box-shadow:0 0 0 2px rgba(74,222,128,.6),0 0 20px rgba(74,222,128,.38),inset 0 0 24px rgba(74,222,128,.1);
  animation:playGlowSoft 1.3s ease-in-out infinite alternate;
}
.stage-slot.play-glow-selected.play-glow-valid::after{
  box-shadow:0 0 0 3px rgba(134,239,172,.88),0 0 34px rgba(74,222,128,.58),inset 0 0 36px rgba(134,239,172,.16);
  animation:playGlowStrong .85s ease-in-out infinite alternate;
}
.stage-slot.play-glow-focus.play-glow-valid::after{
  box-shadow:0 0 0 4px rgba(187,247,208,1),0 0 46px rgba(74,222,128,.82),inset 0 0 52px rgba(187,247,208,.24);
  animation:none;opacity:1;
}
.stage-slot.play-glow-invalid::after{
  box-shadow:0 0 0 2px rgba(252,129,129,.5),inset 0 0 18px rgba(252,129,129,.1);
  animation:none;
}
@keyframes playGlowSoft{
  from{box-shadow:0 0 0 2px rgba(74,222,128,.45),0 0 16px rgba(74,222,128,.28),inset 0 0 20px rgba(74,222,128,.08)}
  to{box-shadow:0 0 0 2px rgba(74,222,128,.72),0 0 26px rgba(74,222,128,.48),inset 0 0 30px rgba(74,222,128,.14)}
}
@keyframes playGlowStrong{
  from{box-shadow:0 0 0 3px rgba(134,239,172,.72),0 0 28px rgba(74,222,128,.48),inset 0 0 32px rgba(134,239,172,.12)}
  to{box-shadow:0 0 0 3px rgba(187,247,208,.95),0 0 42px rgba(74,222,128,.68),inset 0 0 44px rgba(187,247,208,.22)}
}
html:not(.tcg-mobile-viewport) #screen-game .play-cost-hud,
html:not(.tcg-mobile-viewport) #screen-game .live-score-hud{
  transition:opacity .16s ease, transform .2s cubic-bezier(.22,1,.36,1), bottom .22s cubic-bezier(.22,1,.36,1), left .22s cubic-bezier(.22,1,.36,1);
}
.play-cost-hud{
  position:absolute;left:50%;bottom:calc(var(--hand-strip-h) - 6px);
  transform:translateX(-50%);z-index:130;pointer-events:none;
  opacity:0;transition:opacity .16s ease, transform .2s cubic-bezier(.22,1,.36,1);
  text-align:center;
}
html:not(.tcg-mobile-viewport) .playmat-column.play-selecting .play-cost-hud{
  bottom:calc(var(--hand-strip-h) + 30px);
  z-index:140;
}
body:has(.overlay.skill-hand-preserve.open) .playmat-column.play-selecting .play-cost-hud{
  bottom:calc(var(--skill-hand-preserve-h) + 10px);
  z-index:916;
}
.play-cost-hud.show{opacity:1}
.play-cost-hud .pch-inner{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(8,18,32,.94);
  border:2px solid rgba(251,191,36,.62);
  border-radius:20px;padding:10px 20px;
  box-shadow:0 0 28px rgba(251,191,36,.32),0 10px 28px rgba(0,0,0,.5);
}
.play-cost-hud.cost-ok .pch-inner{
  border-color:rgba(74,222,128,.72);
  box-shadow:0 0 32px rgba(74,222,128,.38),0 10px 28px rgba(0,0,0,.5);
}
.play-cost-hud.cost-no .pch-inner{
  border-color:rgba(252,129,129,.62);
  box-shadow:0 0 24px rgba(252,129,129,.28),0 10px 28px rgba(0,0,0,.5);
}
.play-cost-hud .pch-icon{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(251,191,36,.45))}
.play-cost-hud .pch-cost{
  font-family:'Fredoka One',cursive;font-size:38px;line-height:1;color:#FBBF24;
  min-width:1ch;transition:color .15s ease;
}
.play-cost-hud .pch-cost.tick{animation:costTick .28s ease}
.play-cost-hud .pch-hint{
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:rgba(255,255,255,.52);max-width:min(220px,42vw);line-height:1.25;text-align:left;
  white-space:normal;
}
/* Never steal stage-slot hover — that flashed baton cost ↔ pick-a-slot under the cursor. */
.play-cost-hud .pch-row,
.play-cost-hud .pch-row *{pointer-events:none!important}
.play-cost-hud .pch-row{display:inline-flex;align-items:flex-start;gap:8px}
.play-cost-hud .pch-have{font-size:10px;color:rgba(255,255,255,.42);margin-top:5px;line-height:1.35}
.play-cost-hud .pch-have b{color:#68D391;font-size:13px;font-weight:800}
.play-cost-hud .pch-breakdown{color:rgba(255,255,255,.38);font-size:9px}
.z-baton-toggle{
  left:77.8%;top:73.8%;width:8.6%;height:16.2%;
  display:flex;align-items:center;justify-content:flex-end;
  overflow:visible;z-index:14;padding-right:1.5%;
  pointer-events:none;
}
.z-baton-toggle.show{pointer-events:auto}
.mat-baton-toggle{
  flex:0 0 auto;padding:clamp(4px,9cqh,10px) clamp(6px,11cqw,12px);border-radius:14px;
  border:2px solid rgba(134,239,172,.55);background:rgba(8,32,18,.92);
  color:#86EFAC;font-size:clamp(7px,18cqw,10px);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  cursor:pointer;pointer-events:auto;line-height:1.2;min-width:clamp(36px,52cqw,52px);
  box-shadow:0 0 16px rgba(74,222,128,.28),0 6px 18px rgba(0,0,0,.45);
  transition:border-color .15s ease,color .15s ease,background .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.mat-baton-toggle.baton-on{
  border-color:rgba(74,222,128,.85);color:#86EFAC;background:rgba(8,40,22,.94);
  box-shadow:0 0 18px rgba(74,222,128,.38),0 6px 18px rgba(0,0,0,.45);
}
.mat-baton-toggle.baton-off{
  border-color:rgba(248,113,113,.72);color:#FCA5A5;background:rgba(40,10,14,.94);
  box-shadow:0 0 16px rgba(248,113,113,.32),0 6px 18px rgba(0,0,0,.45);
}
.live-score-hud{
  position:absolute;left:50%;bottom:calc(var(--hand-strip-h) + 56px);
  transform:translateX(-50%);z-index:131;pointer-events:none;
  opacity:0;transition:opacity .16s ease, transform .2s cubic-bezier(.22,1,.36,1);
  text-align:center;
}
.live-score-hud.show{opacity:1}
.live-score-hud .lsh-inner{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(8,18,32,.94);
  border:2px solid rgba(255,142,200,.62);
  border-radius:20px;padding:10px 22px;
  box-shadow:0 0 28px rgba(255,107,168,.32),0 10px 28px rgba(0,0,0,.5);
}
.live-score-hud .lsh-icon{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(255,142,200,.45))}
.live-score-hud .lsh-score-group{display:inline-flex;align-items:baseline;gap:4px}
.live-score-hud .lsh-score{
  font-family:'Fredoka One',cursive;font-size:clamp(36px,5vw,48px);line-height:1;color:#FF8EC8;
  min-width:1ch;transition:color .15s ease;
}
.live-score-hud .lsh-score-bonus{
  font-family:'Fredoka One',cursive;font-size:clamp(28px,4vw,38px);line-height:1;font-weight:800;color:#FBBF24;
  min-width:0;transition:color .15s ease;
  -webkit-text-stroke:1.5px #fff;text-stroke:1.5px #fff;
  paint-order:stroke fill;
  text-shadow:0 0 6px rgba(251,191,36,.45),0 2px 10px rgba(0,0,0,.65);
}
.live-score-hud.score-boosted .lsh-inner{outline:1px solid rgba(251,191,36,.45)}
.live-score-hud .lsh-score.tick{animation:costTick .28s ease}
.live-score-hud .lsh-hint{
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:rgba(255,255,255,.48);margin-top:5px;line-height:1.35;
}
@keyframes costTick{
  0%{transform:scale(1)}
  45%{transform:scale(1.2);color:#86EFAC}
  100%{transform:scale(1)}
}
.playmat-column.play-selecting .playmat-frame.my-mat{
  box-shadow:0 0 0 2px rgba(74,222,128,.35),0 0 36px rgba(74,222,128,.12),0 8px 28px rgba(0,0,0,.45);
}
.playmat-column.live-selecting .z-my-energy{opacity:.35;pointer-events:none}
.playmat-column.live-selecting .playmat-frame.my-mat{
  box-shadow:0 0 0 2px rgba(255,107,168,.35),0 0 36px rgba(255,107,168,.12),0 8px 28px rgba(0,0,0,.45);
}
#overlay-live{display:none!important}
.mslot.drop-valid{outline:none;box-shadow:none;animation:none}
.mslot.drop-invalid{outline:none;opacity:1}
.hcard.dragging-source{opacity:.28!important;transform:none!important;pointer-events:none}
.drag-hand-wrap{
  position:fixed;left:0;top:0;z-index:7000;pointer-events:none;
  transform-origin:0 0;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.55));
}
/* Tutorial live-action: ghost must paint above Kanon dialogue (z≈8700). */
body.tutorial-live-mode.tutorial-live-action .drag-hand-wrap{
  z-index:9200!important;
}
.drag-hand-wrap .drag-hand-inner{
  animation:dragDangle .42s ease-in-out infinite alternate;
  transform-origin:center 92%;
}
.drag-hand-wrap .drag-hand-card{
  position:relative;
  border-radius:5px;overflow:hidden;border:2px solid rgba(255,107,168,.65);
  background:#111;
}
.drag-hand-card > img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:3px;
}
.drag-hand-card > .noimg{width:100%;height:100%}
.drag-hand-card .card-art.live-sideways{position:absolute;inset:0}
@keyframes dragDangle{
  from{transform:rotate(-5deg) translateY(0)}
  to{transform:rotate(5deg) translateY(3px)}
}
.side-panel.side-left{border-right:1px solid var(--ui-panel-border-strong);min-height:0}
.side-panel.side-left > .side-block:not(.card-hover-panel){flex-shrink:0}
.side-panel.side-right{border-left:1px solid var(--ui-panel-border-strong);min-height:0}
.side-panel h3{font-family:'Fredoka One',cursive;font-size:16px;color:var(--pink);margin:0 0 6px}
.players-stats-panel{padding:8px 10px;display:flex;flex-direction:column;gap:8px}
.player-stat-strip{display:flex;flex-direction:column;gap:2px;min-width:0}
.player-stat-strip h3{font-size:13px;margin:0;line-height:1.2}
.player-stat-strip.opp h3{color:rgba(186,228,255,.92)}
.player-stat-strip.opp .cpill.nrg b{color:#93C5FD}
.player-stat-strip + .player-stat-strip{padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}
.cpills.cpills-inline{flex-wrap:nowrap!important;gap:4px!important;margin-top:0!important}
.cpills.cpills-inline .cpill{
  flex:1 1 0!important;min-width:0!important;
  padding:4px 5px!important;font-size:10px!important;gap:3px!important;border-radius:8px;
}
.cpills.cpills-inline .cpill b{font-size:12px!important}
.cpills.cpills-inline .pill-ico{width:14px;height:14px;flex-shrink:0}
.side-panel h4{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;
  color:rgba(255,107,168,.65);margin:0 0 5px}
.side-block{background:rgba(255,255,255,.05);border:1px solid var(--ui-panel-border);
  border-radius:12px;padding:10px 11px}
.phase-panel .pbadge{font-family:'Fredoka One',cursive;font-size:12px;color:var(--pink);
  background:rgba(255,107,168,.12);border:1px solid rgba(255,107,168,.28);
  border-radius:16px;padding:4px 10px;display:inline-block;margin-bottom:0}
.phase-panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px;
}
.phase-panel-head .pbadge{flex:1;min-width:0}
.phase-head-stack{
  position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-end;
}
.phase-head-stack .pbadge{align-self:stretch;text-align:center}
.phase-badge-row{
  display:flex;align-items:center;gap:6px;width:100%;min-width:0;
}
.phase-badge-row .pbadge{flex:1 1 auto;min-width:0;margin-bottom:0}
.btn-spectate-pov{
  flex:0 0 auto;width:28px;height:28px;padding:0;border-radius:8px;
  border:1px solid rgba(186,228,255,.38);background:rgba(100,160,220,.16);
  color:#d7f0ff;font-size:15px;line-height:1;cursor:pointer;
  display:none;align-items:center;justify-content:center;
}
body.tcg-spectator-mode .btn-spectate-pov{display:inline-flex}
.btn-spectate-pov:hover{
  background:rgba(100,160,220,.3);border-color:rgba(186,228,255,.6);color:#fff;
}
.btn-spectate-pov:focus-visible{
  outline:2px solid rgba(186,228,255,.75);outline-offset:2px;
}
.btn-spectate-hidden-hands{
  flex:0 0 auto;width:28px;height:28px;padding:0;border-radius:8px;
  border:1px solid rgba(186,228,255,.38);background:rgba(100,160,220,.16);
  color:#d7f0ff;font-size:14px;line-height:1;cursor:pointer;
  display:none;align-items:center;justify-content:center;
}
body.tcg-spectator-mode .btn-spectate-hidden-hands{display:inline-flex}
.btn-spectate-hidden-hands:hover{
  background:rgba(100,160,220,.3);border-color:rgba(186,228,255,.6);color:#fff;
}
.btn-spectate-hidden-hands.is-active{
  border-color:rgba(255,190,120,.7);background:rgba(255,160,60,.22);color:#ffe7a8;
}
.btn-spectate-hidden-hands:focus-visible{
  outline:2px solid rgba(186,228,255,.75);outline-offset:2px;
}
#screen-game .my-hand-strip .hcard.hand-facedown-spec{
  cursor:default;
}
#screen-game .my-hand-strip .hcard.hand-facedown-spec > .back.live-back{
  width:100%;height:100%;border-radius:inherit;
  background:var(--my-sleeve-image,var(--card-back-default)) center/cover no-repeat;
}
.spectator-count{
  font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(186,228,255,.78);margin-bottom:3px;white-space:nowrap;
}
.spectator-count[hidden]{display:none!important}
#overlay-spectate-list .mbox{max-width:min(480px,92vw)}
.spectate-match-list{display:flex;flex-direction:column;gap:8px;margin:12px 0 4px;max-height:min(52vh,420px);overflow-y:auto}
.spectate-match-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.05);
  border:1px solid var(--ui-panel-border);
}
.spectate-match-label{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.4;color:rgba(255,255,255,.9);overflow:hidden}
.spectate-match-names{display:block;overflow:hidden;text-overflow:ellipsis}
.spectate-match-meta{display:block;font-size:11px;color:rgba(255,255,255,.45);margin-top:4px;line-height:1.35}
.spectate-match-row .btn-out{
  flex:0 0 auto;width:auto;min-width:72px;padding:8px 14px;font-size:12px;align-self:center;
}
@media(max-width:420px){
  .spectate-match-row{flex-wrap:wrap}
  .spectate-match-row .btn-out{flex:1 1 100%;min-width:0}
}
.spectate-bar{
  position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:950;
  display:flex;align-items:center;gap:12px;
  background:rgba(8,18,32,.94);border:1px solid rgba(186,228,255,.28);
  border-radius:20px;padding:8px 14px;box-shadow:0 8px 28px rgba(0,0,0,.45);
}
.spectate-bar[hidden]{display:none!important}
.spectate-bar-label{font-size:11px;font-weight:700;color:rgba(186,228,255,.88);white-space:nowrap}
/* Keep deck / WR / energy-deck piles visible for spectators (face-down decks + public WR). */
body.tcg-spectator-mode #screen-game .mat-baton-toggle,
body.tcg-spectator-mode #screen-game #btn-resign,
body.tcg-spectator-mode #screen-game .phase-action-bar{display:none!important}
body.tcg-spectator-mode #screen-game #btn-phase-primary,
body.tcg-spectator-mode #screen-game .phase-action-bar,
body.tcg-spectator-mode #screen-game .tcg-debug-row,
body.tcg-spectator-mode #screen-game .mat-zone.deck-pile.z-main-deck,
body.tcg-spectator-mode #screen-game .mat-zone.deck-pile.z-opp-main-deck,
body.tcg-spectator-mode #screen-game .mat-zone.deck-pile.z-energy-deck,
body.tcg-spectator-mode #screen-game .mat-zone.deck-pile.z-opp-energy-deck{pointer-events:none!important}
body.tcg-spectator-mode #screen-game .mat-zone.deck-pile.wr-pile,
body.tcg-spectator-mode #screen-game .mat-zone.deck-pile.wr-pile .wr-face-card{
  pointer-events:auto!important;cursor:pointer!important
}
/* Radio is local to this browser only — spectators may enable it for themselves. */
body.tcg-spectator-mode #screen-game .tcg-radio-bar,
body.tcg-spectator-mode #screen-game .tcg-radio-bar *,
body.tcg-spectator-mode #screen-game .tcg-radio-stack,
body.tcg-spectator-mode #screen-game .tcg-radio-stack *{
  pointer-events:auto!important
}
body.tcg-spectator-mode #screen-game .mslot.occupied,
body.tcg-spectator-mode #screen-game .lcard:not(.live-storage-facedown):not(.live-storage-flip),
body.tcg-spectator-mode #screen-game .hand-strip .hcard,
body.tcg-spectator-mode #screen-game .hand-strip .opp-hand-card.hcard,
body.tcg-spectator-mode #screen-game .echip-stack{cursor:help}
body.tcg-spectator-mode #spectate-bar,
body.tcg-spectator-mode #spectate-bar button{pointer-events:auto}
body.tcg-spectator-mode #overlay-zone,
body.tcg-spectator-mode #overlay-zone *{pointer-events:auto}
body.tcg-spectator-mode #overlay-mull #btn-mull{display:none!important}
body.tcg-spectator-mode #sb-activatable-wrap .btn-stage-ability{
  pointer-events:none!important;opacity:.55;cursor:default
}
body.tcg-replay-view-mode #screen-game .phase-action-bar{display:none!important}
body.tcg-replay-view-mode #screen-game .mat-zone.deck-pile,
body.tcg-replay-view-mode #screen-game .mat-baton-toggle,
body.tcg-replay-view-mode #screen-game .mslot,
body.tcg-replay-view-mode #screen-game .lcard,
body.tcg-replay-view-mode #screen-game .hand-strip .hcard,
body.tcg-replay-view-mode #screen-game .hand-strip .opp-hand-card{pointer-events:none!important}
body.tcg-replay-view-mode #overlay-mull,
body.tcg-replay-view-mode #overlay-mull *,
body.tcg-replay-view-mode #overlay-coin,
body.tcg-replay-view-mode #overlay-coin *,
body.tcg-replay-view-mode #overlay-live,
body.tcg-replay-view-mode #overlay-live *{pointer-events:none!important}
body.tcg-replay-view-mode #screen-game #btn-resign{display:none!important}
body.tcg-replay-view-mode #replay-control-dock,
body.tcg-replay-view-mode #replay-control-bar{
  z-index:20000!important;pointer-events:auto!important
}
body.tcg-replay-view-mode #replay-control-dock,
body.tcg-replay-view-mode #replay-control-bar,
body.tcg-replay-view-mode #replay-control-bar *,
body.tcg-replay-view-mode #screen-game .tcg-debug-row,
body.tcg-replay-view-mode #screen-game .tcg-debug-row button{pointer-events:auto!important}
body.tcg-replay-view-mode.tcg-replay-bar-autohide #replay-control-bar{
  pointer-events:none!important
}
body.tcg-replay-view-mode.tcg-replay-bar-autohide #replay-control-dock:hover #replay-control-bar,
body.tcg-replay-view-mode.tcg-replay-bar-autohide #replay-control-dock.replay-bar-peek #replay-control-bar,
body.tcg-replay-view-mode.tcg-replay-bar-autohide #replay-control-dock:focus-within #replay-control-bar{
  pointer-events:auto!important
}
body.tcg-replay-view-mode .overlay.replay-prompt-readonly{pointer-events:none}
body.tcg-replay-view-mode .overlay.replay-prompt-readonly button,
body.tcg-replay-view-mode .overlay.replay-prompt-readonly input,
body.tcg-replay-view-mode .overlay.replay-prompt-readonly select,
body.tcg-replay-view-mode .overlay.replay-prompt-readonly textarea{
  opacity:.72;cursor:default;filter:saturate(.75)
}
body.tcg-replay-view-mode .overlay.replay-prompt-readonly .pickcard,
body.tcg-replay-view-mode .overlay.replay-prompt-readonly .hand-pick-card,
body.tcg-replay-view-mode .overlay.replay-prompt-readonly .surveilcard,
body.tcg-replay-view-mode .overlay.replay-prompt-readonly .heart-btn{cursor:default}
.phase-timer-wrap{flex:0 0 auto;line-height:0}
.phase-timer-wrap[hidden]{display:none!important}
.phase-timer-wrap.phase-timer-wrap--prompt{
  position:fixed;top:12px;right:12px;z-index:965;pointer-events:none;
}
.phase-timer-wrap.phase-timer-wrap--opp .phase-timer-pie{
  border-color:rgba(255,200,120,.62);
}
.time-pie.phase-timer-pie.phase-timer-pie--opp{
  background:conic-gradient(
    from -90deg,
    #ffc878 0turn,
    #ffc878 calc(var(--time-ratio, 1) * 1turn),
    #5c4a52 0
  );
}
.time-pie.phase-timer-pie{
  position:relative;width:52px;height:52px;border-radius:999px;
  background:conic-gradient(
    from -90deg,
    #7de4ef 0turn,
    #7de4ef calc(var(--time-ratio, 1) * 1turn),
    #5c4a52 0
  );
  border:2px solid rgba(255,255,255,.66);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 0 10px rgba(0,0,0,.12);
}
.time-pie.phase-timer-pie > span{
  position:relative;z-index:1;font-size:20px;line-height:1;font-weight:800;
  font-family:'Fredoka One',cursive;letter-spacing:.3px;color:#f8fbff;
  text-shadow:0 1px 0 #4f3a41,0 0 8px rgba(0,0,0,.45);
}
.time-pie.phase-timer-pie.phase-timer-pie--urgent{
  background:conic-gradient(
    from -90deg,
    #ffb8dc 0turn,
    #ffb8dc calc(var(--time-ratio, 1) * 1turn),
    #5c4a52 0
  );
  border-color:rgba(255,180,210,.82);
}
.phase-panel .pmsg{font-size:11px;color:rgba(255,255,255,.55);line-height:1.45;margin-bottom:8px;min-height:32px}
.phase-panel .pbtns{display:flex;flex-wrap:wrap;gap:6px}
.side-panel.side-right .side-log{flex:1 1 0;min-height:0;max-height:100%;height:auto;overflow:hidden}
.side-log{flex:1 1 0;display:flex;flex-direction:column;min-height:0;
  background:rgba(255,255,255,.04);border:1px solid var(--ui-panel-border);
  border-radius:12px;overflow:hidden}
.side-log > .sbs,
.side-log > .tcg-radio-bar,
.side-log > .tcg-radio-stack,
.side-log > .phase-action-bar,
.side-log > .sbfoot{flex:0 0 auto}
/*
 * board-zones.js wraps #game-log in <ll-side-panel>. That host is the flex child —
 * without min-height:0 it grows with log lines and pushes End Main / Radio / Resign off-screen.
 */
.side-log > ll-side-panel{
  flex:1 1 0;min-height:0;max-height:100%;
  display:flex;flex-direction:column;overflow:hidden;
}
.side-log .logscroll,
.side-log > ll-side-panel > .logscroll{
  flex:1 1 0;min-height:0;overflow-x:hidden;overflow-y:auto;padding:8px 10px;
}
html:not(.tcg-mobile-viewport) .side-log.radio-open{
  --tcg-radio-stack-h:300px;
  display:grid;
  grid-template-rows:auto minmax(64px,1fr) auto minmax(140px,var(--tcg-radio-stack-h)) auto auto;
  overflow:hidden;
}
html:not(.tcg-mobile-viewport) .side-log.radio-open > ll-side-panel{
  min-height:64px;overflow:hidden;
}
html:not(.tcg-mobile-viewport) .side-log.radio-open .logscroll,
html:not(.tcg-mobile-viewport) .side-log.radio-open > ll-side-panel > .logscroll{
  flex:1 1 0;min-height:64px;height:auto;max-height:100%;overflow-y:auto;
}
.tcg-radio-stack{
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.tcg-radio-stack[hidden]{display:none!important}
.tcg-radio-resize{
  flex:0 0 18px;display:flex;align-items:center;justify-content:center;
  cursor:row-resize;touch-action:none;user-select:none;position:relative;z-index:5;
  pointer-events:auto;
  background:rgba(255,255,255,.06);border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tcg-radio-resize:hover,.tcg-radio-resize.is-dragging{background:rgba(255,107,168,.14)}
.tcg-radio-resize-grip{
  width:44px;height:5px;border-radius:999px;background:rgba(255,255,255,.38);
  box-shadow:0 1px 0 rgba(0,0,0,.22);
  pointer-events:none;
}
.tcg-radio-resize.is-dragging .tcg-radio-resize-grip{background:rgba(255,183,214,.98)}
body.tcg-radio-resize-active{cursor:row-resize!important;user-select:none!important}
body.tcg-radio-resize-active *{cursor:row-resize!important}
.tcg-radio-bar{
  flex:0 0 auto;padding:8px 8px 0;border-top:1px solid rgba(255,255,255,.06);
}
.tcg-radio-bar .tcg-radio-toggle{
  width:100%;font-size:11px;padding:7px;cursor:pointer;
}
.tcg-radio-bar .tcg-radio-toggle.is-on{
  background:rgba(255,107,168,.18);color:#fff;border-color:rgba(255,107,168,.45);
}
.tcg-radio-dock{
  flex:0 0 auto;display:flex;flex-direction:column;
  padding:4px 8px 0;background:rgba(255,255,255,.04);
}
.tcg-radio-dock-inner{
  flex:0 0 auto;overflow:hidden;
  background:rgba(248,250,255,.94);border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(31,47,95,.08);
}
.tcg-radio-dock iframe{
  display:block;width:100%;border:0;background:transparent;
}
.tcg-radio-request{
  display:block;flex:0 0 auto;text-align:center;font-size:10px;font-weight:800;
  padding:4px 6px 5px;color:var(--pink);text-decoration:none;letter-spacing:.02em;
}
.tcg-radio-request:hover{text-decoration:underline;color:#ffb8dc}
.phase-action-bar{
  padding:10px 8px 8px;border-top:1px solid rgba(255,255,255,.06);
}
.phase-action-bar:not(.show){display:none}
.phase-action-bar .btn-phase-primary{
  width:100%;padding:14px 16px;border-radius:14px;border:none;cursor:pointer;
  font-family:'Fredoka One',cursive;font-size:18px;font-weight:800;line-height:1.15;
  letter-spacing:.02em;color:#fff;white-space:normal;text-align:center;
  background:linear-gradient(135deg,var(--pink),var(--pink-d));
  box-shadow:0 4px 18px rgba(255,107,168,.28);
  transition:transform .12s ease,filter .12s ease;
}
.phase-action-bar .btn-phase-primary:hover{filter:brightness(1.06)}
.phase-action-bar .btn-phase-primary:active{transform:scale(.98)}
.phase-action-bar .btn-phase-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}
.phase-action-bar .btn-phase-primary.waiting{
  opacity:.58;cursor:default;pointer-events:none;
  filter:saturate(.85);
}
.phase-action-bar .btn-phase-primary.waiting:hover{filter:saturate(.85)}
.side-log .sbfoot{padding:8px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:5px}
.side-log .sbfoot button{width:100%;font-size:11px;padding:7px}
.tcg-debug-only{display:none}
/* Inline debug widgets (log tools); menu screens still use .screen.active */
body.tcg-debug-on .tcg-debug-only:not(.screen){display:flex}
body.tcg-debug-on .screen.tcg-debug-only.active{display:flex}
body.tcg-debug-on .llc-menu-item.tcg-debug-only{display:flex}
.sbfoot .tcg-debug-row{gap:6px;margin-bottom:2px}
.sbfoot .tcg-debug-row button{font-size:10px;padding:6px}
.replay-control-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:20000;
  display:none;justify-content:center;align-items:flex-end;
  pointer-events:none;padding-bottom:max(8px, env(safe-area-inset-bottom, 0px));
}
.replay-control-dock.show{display:flex}
#replay-control-dock[hidden]{display:none!important}
.replay-control-bar{
  position:relative;left:auto;bottom:auto;transform:none;z-index:20000;
  isolation:isolate;pointer-events:auto;
  display:none;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  padding:8px 14px;border-radius:14px;
  background:rgba(12,18,32,.92);border:1px solid rgba(186,228,255,.28);
  box-shadow:0 8px 28px rgba(0,0,0,.45);max-width:min(96vw,860px);
  margin:0 12px 4px;transition:transform .22s ease,opacity .22s ease;
}
.replay-control-bar.show{display:flex}
#replay-control-bar[hidden]{display:none!important}
body.tcg-replay-bar-autohide #replay-control-dock{
  pointer-events:auto;min-height:40px;
}
body.tcg-replay-bar-autohide #replay-control-bar{
  transform:translateY(calc(100% + 20px));opacity:0;pointer-events:none!important;
}
body.tcg-replay-bar-autohide #replay-control-dock:hover #replay-control-bar,
body.tcg-replay-bar-autohide #replay-control-dock.replay-bar-peek #replay-control-bar,
body.tcg-replay-bar-autohide #replay-control-dock:focus-within #replay-control-bar{
  transform:none;opacity:1;pointer-events:auto!important;
}
.replay-control-bar .replay-step-btns{display:flex;align-items:center;gap:4px}
.replay-control-bar .replay-step-label{
  font-size:11px;font-weight:700;color:rgba(255,255,255,.85);min-width:84px;text-align:center;
}
.replay-control-bar .replay-action-label{
  font-size:11px;font-weight:700;color:rgba(186,228,255,.88);max-width:min(42vw,220px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize;
}
.replay-control-bar button{font-size:11px;padding:6px 10px}
.replay-control-bar .replay-step-btn{min-width:36px;padding:6px 8px}
.replay-control-bar .replay-play-btn{min-width:42px;font-size:13px}
.replay-control-bar .replay-hide-btn{white-space:nowrap}
.replay-control-bar .replay-exit-btn{font-weight:800;white-space:nowrap}
.replay-control-bar input[type=range]{
  flex:1 1 200px;min-width:140px;max-width:min(48vw,360px);accent-color:var(--pink);
}
.replay-control-bar .replay-handoff-note{
  font-size:10px;color:rgba(186,228,255,.75);width:100%;text-align:center;margin:0;
}
.replay-file-meta{font-size:12px;color:rgba(255,255,255,.65);margin:8px 0 12px;line-height:1.45}
.replay-library-scroll{display:flex;flex-direction:column;gap:6px;max-height:min(52vh,480px);overflow-y:auto;margin:12px 0}
.replay-library-section-title{
  font-family:'Fredoka One',cursive;font-size:15px;color:var(--pink);margin:10px 0 2px
}
.replay-library-section-hint{font-size:11px;color:rgba(255,255,255,.55);margin:0 0 8px;line-height:1.4}
.replay-library-list{display:flex;flex-direction:column;gap:10px;margin:0}
.replay-library-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;
}
.replay-library-card strong{display:block;color:#fff;font-size:14px}
.replay-library-card span{display:block;color:rgba(255,255,255,.68);font-size:12px;line-height:1.45;margin-top:3px}
.replay-library-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.replay-import-box{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.ljo-scores{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 0}
.ljo-scores .sblock{text-align:center}

.playmat-frame{
  flex:0 0 auto;
  align-self:center;
  width:min(100%, calc(var(--playmat-mat-max-h) * 1024 / 563));
  max-width:100%;
  aspect-ratio:var(--playmat-aspect);
  height:auto;
  max-height:var(--playmat-mat-max-h);
  position:relative;
  overflow:hidden;
  box-shadow:0 0 0 2px rgba(186,228,255,.22),0 8px 28px rgba(0,0,0,.45);
}
.playmat-frame.opp-mat{box-shadow:0 0 0 2px rgba(186,228,255,.28),0 8px 28px rgba(0,0,0,.45)}
.playmat-img.playmat-img-flipped{transform:rotate(180deg)}
.mat-owner-label{
  position:absolute;left:8px;top:4px;z-index:5;pointer-events:none;
  font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;
  color:rgba(255,255,255,.35);background:rgba(0,0,0,.45);
  padding:2px 7px;border-radius:8px;
}
.playmat-frame.my-mat .mat-owner-label{bottom:4px;top:auto}

/* ── Mobile / tablet: fixed 20:9 frame (proportional layout, no breakpoint reflow) ── */
/* ── Mobile portrait: block play — landscape only (see Puchiball Grand Live) ── */
#tcg-mobile-rotate-hint{
  position:fixed;inset:0;z-index:100000;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:24px;text-align:center;pointer-events:auto;
  color:#fff;
  background:linear-gradient(rgba(6,8,16,.94),rgba(6,8,16,.97));
}
#tcg-mobile-rotate-hint.show{display:flex}
#tcg-mobile-rotate-hint[hidden]{display:none!important}
.tcg-landscape-mode-overlay__icon{
  font-size:clamp(64px,14vw,120px);line-height:1;font-weight:900;
  text-shadow:0 6px 20px rgba(0,0,0,.45);
}
.tcg-landscape-mode-overlay__title{
  margin:0;max-width:min(640px,92vw);
  font-family:'Fredoka One',cursive;
  font-size:clamp(24px,5.8vw,48px);font-weight:400;line-height:1.12;
  text-shadow:0 3px 14px rgba(0,0,0,.5);
}
.tcg-landscape-mode-overlay__sub{
  margin:0;max-width:min(480px,88vw);
  font-size:clamp(14px,3.6vw,18px);font-weight:700;line-height:1.45;
  color:rgba(255,255,255,.78);
}
html.tcg-mobile-portrait .screen,
html.tcg-mobile-portrait .overlay,
html.tcg-mobile-portrait #tcg-phone-fs-btn,
html.tcg-mobile-portrait #toast,
html.tcg-mobile-portrait #center-banner,
html.tcg-mobile-portrait #perf-spectacle,
html.tcg-mobile-portrait #live-judge-overlay,
html.tcg-mobile-portrait #rule-kw-tip,
html.tcg-mobile-portrait #opp-skill-wait-banner{
  display:none!important;visibility:hidden!important;pointer-events:none!important;
}
html.tcg-mobile-portrait #llc-sky-bg{opacity:.35}
#tcg-phone-fs-btn{
  position:fixed;z-index:99998;display:none;
  right:max(10px, env(safe-area-inset-right, 0px));
  bottom:max(10px, env(safe-area-inset-bottom, 0px));
  padding:8px 12px;border-radius:999px;border:1px solid rgba(186,228,255,.45);
  background:rgba(6,14,28,.88);color:#fff;font:inherit;font-size:12px;font-weight:800;
  letter-spacing:.02em;box-shadow:0 4px 18px rgba(0,0,0,.45);
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
#tcg-phone-fs-btn:active{transform:scale(.97)}
html.tcg-phone-device #tcg-phone-fs-btn.show{display:block}
html.tcg-fs-native #tcg-phone-fs-btn,
html.tcg-android-apk #tcg-phone-fs-btn{display:none!important}
html.tcg-phone-device.tcg-mobile-viewport,
html.tcg-phone-device.tcg-mobile-viewport body{
  width:100vw;height:100dvh;min-height:100dvh;max-height:100dvh;
}
html.tcg-phone-device.tcg-mobile-viewport #screen-game.active{
  width:100vw;height:100dvh;max-height:100dvh;
  padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  box-sizing:border-box;
}
html.tcg-fs-native.tcg-phone-device,
html.tcg-fs-native.tcg-phone-device body{
  width:100vw;height:100vh;min-height:100vh;max-height:100vh;
}
html.tcg-mobile-viewport body{
  min-height:100dvh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
/* Menus use the full viewport — do not letterbox to the 20:9 game frame
   (that clips hub/lobby on square foldables). Game keeps 20:9 below. */
html.tcg-mobile-viewport .llc-menu-screen.active{
  width:100vw;
  height:100dvh;
  max-width:100vw;max-height:100dvh;flex-shrink:0;
  overflow-x:hidden;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  /* flex-start + account-shell margin-block:auto: centers when short, scrolls when tall */
  justify-content:flex-start;
  align-items:center;
  padding:clamp(10px, 1.8vh, 18px) clamp(10px, 2vw, 16px);
  padding-bottom:max(clamp(12px, 2vh, 20px), env(safe-area-inset-bottom, 0px));
  box-sizing:border-box;
}
/* Square / short landscape (unfolded fold): tighten chrome so lobby fits better */
@media (max-aspect-ratio: 5/4) {
  html.tcg-mobile-viewport .llc-menu-screen.active .logo{
    margin-bottom:clamp(6px,1.2vh,12px);
  }
  html.tcg-mobile-viewport .llc-menu-screen.active .logo-img{
    max-width:min(300px,48vw);
  }
  html.tcg-mobile-viewport #screen-lobby .lobby-menu{
    gap:clamp(10px,1.6vh,16px);
  }
  html.tcg-mobile-viewport #screen-lobby .lobby-cols{
    gap:clamp(8px,1.2vw,14px);
  }
  html.tcg-mobile-viewport .llc-menu-screen.active .panel h2{
    font-size:clamp(22px,4.2vw,34px);
    margin-bottom:8px;
  }
}
@media (max-aspect-ratio: 5/4) and (max-height: 820px) {
  /* Prefer stacked columns on short square so each panel is fully reachable by scroll */
  html.tcg-mobile-viewport #screen-lobby .lobby-cols{
    flex-direction:column;align-items:center;max-width:min(430px,96vw);margin:0 auto;
  }
  html.tcg-mobile-viewport #screen-lobby .lobby-col{
    width:100%;max-width:min(430px,96vw);
  }
}
html.tcg-mobile-viewport #screen-game.active{
  width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;
  align-items:center;justify-content:center;overflow:hidden;
  background:#060810;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame{
  container-type:size;
  container-name:tcg-game;
  width:min(100vw, calc(100dvh * 20 / 9));
  height:min(100dvh, calc(100vw * 9 / 20));
  aspect-ratio:20 / 9;
  flex-shrink:0;overflow:hidden;position:relative;
}
/* Square / near-square foldables: fill the screen instead of 20:9 letterbox bars. */
@media (max-aspect-ratio: 5/4) {
  html.tcg-mobile-viewport #screen-game .game-viewport-frame{
    width:100vw;
    height:100dvh;
    max-width:100vw;
    max-height:100dvh;
    aspect-ratio:auto;
  }
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .game-wide-wrap{
  width:100%;height:100%;
  align-items:stretch;
  border-left:none;border-right:none;box-shadow:none;
  --side-panel-w:24cqw;
  --playmat-gutter:var(--side-panel-w);
  --mobile-hand-card-h:44cqh;
  --mobile-hand-half:calc(var(--mobile-hand-card-h) / 2);
  --mobile-hand-peek:var(--mobile-hand-half);
  --mobile-hand-rest-offset:calc(var(--mobile-hand-card-h) * 0.34);
  --mobile-hand-tap-lift:var(--mobile-hand-half);
  --mobile-hand-raise:var(--mobile-hand-card-h);
  --hand-strip-h:var(--mobile-hand-peek);
  --skill-hand-preserve-h:var(--mobile-hand-card-h);
  --opp-hand-card-h:var(--mobile-hand-card-h);
  --opp-hand-peek:calc(var(--opp-hand-card-h) / 4);
  --opp-hand-strip-h:var(--opp-hand-peek);
  --opp-hand-rest-offset:calc(-1 * (var(--opp-hand-card-h) - var(--opp-hand-peek)));
  --mat-seam-h:0.32cqh;
  --mobile-mat-view-h:calc(100cqh - var(--mobile-hand-peek));
  --mobile-action-dock-h:12cqh;
  --field-card-scale:1.22;
}
html.tcg-tablet-landscape.tcg-mobile-viewport #screen-game .game-viewport-frame .game-wide-wrap{
  --side-panel-w:21cqw;
  --mobile-hand-card-h:40cqh;
}
@media (max-aspect-ratio: 5/4) {
  html.tcg-mobile-viewport #screen-game .game-viewport-frame .game-wide-wrap{
    --mobile-hand-card-h:36cqh;
    --mobile-action-dock-h:9cqh;
    --side-panel-w:20cqw;
  }
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-left{
  height:100%;max-height:100%;min-height:0;align-self:stretch;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding:0.5cqw 0.45cqw calc(var(--mobile-action-dock-h, 12cqh) + 0.35cqw);gap:0.38cqw;
  -webkit-overflow-scrolling:touch;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-left.is-drag-scrolling{
  cursor:grabbing;
  user-select:none;
  -webkit-user-select:none;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-left.is-drag-scrolling a,
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-left.is-drag-scrolling button{
  pointer-events:none;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-left .card-hover-panel{display:none!important}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-left .phase-panel .pbadge{
  font-size:clamp(10px,1.05cqw,14px);padding:0.28cqw 0.65cqw;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-left .phase-panel .pmsg{
  font-size:clamp(10px,0.92cqw,13px);min-height:2.6em;line-height:1.4;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-left .player-stat-strip h3{
  font-size:clamp(11px,1cqw,15px);
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-left .cpills.cpills-inline .cpill{
  padding:0.32cqw 0.38cqw!important;font-size:clamp(8px,0.72cqw,11px)!important;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-left .cpills.cpills-inline .cpill b{
  font-size:clamp(10px,0.95cqw,14px)!important;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-left .cpills.cpills-inline .pill-ico{
  width:clamp(12px,1.1cqw,16px);height:clamp(12px,1.1cqw,16px);
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-left .tline-inline{
  font-size:clamp(9px,0.82cqw,12px);line-height:1.45;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-left .stage-board-panel h4{
  font-size:clamp(10px,0.88cqw,13px);
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-left .stage-board-hearts .heart-stat-row{
  font-size:clamp(12px,1.05cqw,16px);
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-left .stage-board-hearts .heart-stat-row .hicon{
  width:clamp(14px,1.25cqw,20px);height:clamp(14px,1.25cqw,20px);
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-left .stage-board-yell{
  font-size:clamp(11px,0.95cqw,14px);
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-left .side-block{
  padding:0.45cqw 0.5cqw;border-radius:0.55cqw;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right{
  position:absolute;left:0;bottom:0;width:var(--side-panel-w);height:auto;z-index:60;
  background:transparent;border:none;box-shadow:none;padding:0.35cqw 0.4cqw;
  pointer-events:none;min-width:0;max-width:var(--side-panel-w);
  display:flex;flex-direction:column;justify-content:flex-end;
}
html.tcg-phone-device.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right{
  bottom:0;
}
html.tcg-tablet-landscape.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right{
  bottom:max(0.25cqw, env(safe-area-inset-bottom, 0px));
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .logscroll,
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .sbs{
  display:none!important;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .side-log{
  flex:none;background:transparent;border:none;overflow:visible;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .phase-action-bar,
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .tcg-radio-stack,
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .tcg-radio-resize,
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .tcg-radio-bar,
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .tcg-radio-dock,
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .sbfoot{
  pointer-events:auto;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .tcg-radio-bar{
  padding:0.28cqw 0.3cqw 0;
  flex-shrink:0;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .tcg-radio-bar .tcg-radio-toggle{
  font-size:clamp(9px,0.78cqw,11px);padding:0.38cqw 0.35cqw;
  background:rgba(6,14,28,.88);border:1px solid var(--ui-panel-border);border-radius:0.55cqw;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .tcg-radio-dock{
  padding:0.22cqw 0.3cqw 0.15cqw;flex:1 1 0;min-height:0;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .tcg-radio-stack:not([hidden]){
  flex-shrink:0;display:flex;flex-direction:column;min-height:186px;overflow:hidden;
}
@media (max-aspect-ratio: 5/4) {
  html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .tcg-radio-stack:not([hidden]){
    min-height:clamp(96px, 16cqh, 140px);
  }
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .phase-action-bar{
  padding:0.35cqw 0.3cqw 0.3cqw;margin-bottom:0.22cqw;
  background:rgba(6,14,28,.92);border:1px solid var(--ui-panel-border);border-radius:0.55cqw;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
  flex-shrink:0;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .phase-action-bar .btn-phase-primary{
  font-size:clamp(13px,1.15cqw,17px);padding:0.65cqw 0.45cqw;
  min-height:clamp(40px,4.4cqh,52px);
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .sbfoot{
  padding:0.28cqw 0.3cqw;gap:0.22cqw;
  background:rgba(6,14,28,.88);border:1px solid var(--ui-panel-border);border-radius:0.55cqw;
  flex-shrink:0;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .phase-action-bar.show ~ .sbfoot .tcg-debug-row{
  display:none;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .side-panel.side-right .sbfoot button{
  font-size:clamp(9px,0.78cqw,11px);padding:0.38cqw 0.35cqw;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .playmat-column{
  flex:1 1 auto;height:100%;max-height:100cqh;min-height:0;min-width:0;
  width:auto!important;max-width:none!important;
  overflow:visible;position:relative;
  display:flex;flex-direction:column;
  --mobile-hand-rest-offset:calc(var(--mobile-hand-card-h) * 0.34);
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .playmat-mat-viewport{
  display:flex;flex-direction:column;
  flex:0 0 var(--mobile-mat-view-h);height:var(--mobile-mat-view-h);
  min-height:0;overflow:hidden;position:relative;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .playmat-mat-stack{
  display:flex;flex-direction:column;align-items:stretch;
  width:100%;margin:0;
  transform:translateY(var(--mobile-mat-pan, 0px));
  transition:transform 0.42s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .playmat-mat-stack .playmat-frame{
  flex:0 0 auto;width:100%;height:auto;
  aspect-ratio:1024/563;max-height:none;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .playmat-mat-stack .mat-seam{
  flex:0 0 var(--mat-seam-h);height:var(--mat-seam-h);
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .hand-strip.opp-hand-strip{
  flex:0 0 var(--opp-hand-peek);height:var(--opp-hand-peek);min-height:var(--opp-hand-peek);
  overflow:hidden;z-index:12;margin-bottom:0;padding:0.15cqh 0.5cqw 0.25cqh;
  background:linear-gradient(180deg,rgba(6,14,28,.88) 0%,rgba(6,14,28,.35) 100%);
  border-bottom:1px solid rgba(186,228,255,.14);
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .playmat-column:not(.mat-focus-opp) .opp-hand-strip{
  display:none;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .opp-hand-strip .hand-fan{
  align-items:flex-start;height:100%;overflow:visible;
  transform:translateY(var(--opp-hand-rest-offset));
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .opp-hand-strip .hand-strip-label{
  top:0.1cqh;bottom:auto;left:0.417cqw;font-size:0.34cqw;opacity:.65;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .opp-hand-strip .opp-hand-card{
  height:var(--opp-hand-card-h);width:auto;aspect-ratio:63/88;
  box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.16);
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .playmat-column.mat-focus-opp,
html.tcg-mobile-viewport #screen-game .game-viewport-frame .playmat-column.mat-focus-live:not(.mobile-live-hand-mode){
  --mobile-mat-view-h:100cqh;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .playmat-column.mat-focus-opp .my-hand-strip,
html.tcg-mobile-viewport #screen-game .game-viewport-frame .playmat-column.mat-focus-live:not(.mobile-live-hand-mode) .my-hand-strip{
  display:none!important;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .hand-strip.my-hand-strip{
  --mobile-hand-scroll-pad:calc(var(--mobile-hand-card-h) * 0.22);
  flex:0 0 calc(var(--mobile-hand-peek) + var(--mobile-hand-scroll-pad));
  height:calc(var(--mobile-hand-peek) + var(--mobile-hand-scroll-pad));
  min-height:calc(var(--mobile-hand-peek) + var(--mobile-hand-scroll-pad));
  z-index:28;overflow-x:auto;overflow-y:hidden;padding-bottom:0;
  padding-top:var(--mobile-hand-scroll-pad);box-sizing:border-box;align-items:stretch;
  touch-action:pan-x;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:none;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .hand-strip.my-hand-strip::-webkit-scrollbar{display:none}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .my-hand-strip .hand-fan{
  align-items:flex-end;height:100%;overflow:visible;
  width:max-content;min-width:100%;
  transform:translateY(var(--mobile-hand-rest-offset));
  transition:transform .22s cubic-bezier(.22,1,.36,1);
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .my-hand-strip .hand-strip-label{
  top:auto;bottom:0.15cqh;z-index:2;opacity:.45;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .playmat-column.mobile-live-hand-mode{
  --mobile-mat-view-h:calc(100cqh - var(--mobile-hand-peek));
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .playmat-column.mobile-live-hand-mode .my-hand-strip{
  position:absolute;left:0;right:0;bottom:0;width:100%;display:flex!important;
  padding:0.25cqh 0.35cqw 0;
  background:linear-gradient(180deg,rgba(6,14,28,0) 0%,rgba(6,14,28,.55) 18%,rgba(6,14,28,.94) 100%);
  border-top:1px solid rgba(186,228,255,.16);
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .hcard{width:auto}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .my-hand-strip .hcard{
  height:var(--mobile-hand-card-h);
  transform-origin:center bottom;
  touch-action:pan-x;
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .18s ease,border-color .18s ease;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .my-hand-strip .hcard:not(.play-sel):not(.hover-sel){
  transform:none;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .my-hand-strip .hcard.hover-sel:not(.play-sel){
  transform:translateY(calc(-1 * var(--mobile-hand-tap-lift)));
  z-index:18;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .my-hand-strip .hcard.play-sel{
  transform:translateY(calc(-1 * var(--mobile-hand-tap-lift)));
  z-index:42;
  border-color:rgba(56,161,105,.9);
  box-shadow:0 0 28px rgba(56,161,105,.62),0 14px 36px rgba(0,0,0,.55);
}
html:not(.foil-fx-off).tcg-mobile-viewport #screen-game .game-viewport-frame .my-hand-strip .hcard.card-tilt-enabled.foil-tilt-hover:not(.play-sel){
  transform:translateY(calc(-1 * var(--mobile-hand-tap-lift))) rotateX(var(--foil-rx,0deg)) rotateY(var(--foil-ry,0deg));
  z-index:20;
}
html:not(.foil-fx-off).tcg-mobile-viewport #screen-game .game-viewport-frame .my-hand-strip .hcard.card-tilt-enabled.play-sel.foil-tilt-hover{
  transform:translateY(calc(-1 * var(--mobile-hand-tap-lift))) rotateX(var(--foil-rx,0deg)) rotateY(var(--foil-ry,0deg));
  z-index:42;
}
html:not(.foil-fx-off).tcg-mobile-viewport #screen-game .game-viewport-frame .my-hand-strip .hcard.card-tilt-enabled:not(.play-sel):not(.hover-sel):not(.foil-tilt-hover){
  transform:none;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .playmat-column.play-selecting .my-hand-strip .hcard.play-sel{
  z-index:45;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .playmat-column.play-selecting .play-cost-hud,
html.tcg-mobile-viewport #screen-game .game-viewport-frame .playmat-column.live-selecting .live-score-hud{
  left:var(--mobile-hud-x, 50%);
  bottom:calc(var(--mobile-hand-peek) + 6cqh);
  transform:translateX(-50%);
  z-index:44;
  transition:opacity .16s ease, transform .2s cubic-bezier(.22,1,.36,1), left .22s cubic-bezier(.22,1,.36,1);
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .playmat-column.play-selecting .play-cost-hud.pch-over-live{
  position:fixed;
  left:var(--pch-live-x, 50%);
  top:var(--pch-live-y, 50%);
  bottom:auto;
  right:auto;
  transform:translate(-50%, -50%);
  z-index:140;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .hand-strip{padding:0.35cqh 0.6cqw}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .hand-fan{padding:0 0.25cqw}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .hand-strip-label{
  font-size:0.375cqw;left:0.417cqw;top:0.25cqw;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .mat-owner-label{
  font-size:0.375cqw;padding:0.083cqw 0.292cqw;border-radius:0.333cqw;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .hcard .ccost{
  min-width:clamp(8px,22cqw,14px);height:clamp(8px,22cqw,14px);
  font-size:clamp(6px,14cqw,8px);padding:0 2px;border-radius:5px;gap:0;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .hcard .ccost .ticon{
  width:clamp(6px,12cqw,9px);height:clamp(6px,12cqw,9px);
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .hcard .tbadge{
  font-size:clamp(5px,11cqw,7px);padding:0 2px;border-radius:2px;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .hcard.play-sel .ccost{
  min-width:clamp(12px,28cqw,20px);height:clamp(12px,28cqw,20px);
  font-size:clamp(7px,16cqw,10px);border-radius:7px;
}
html.tcg-mobile-viewport #screen-game .game-viewport-frame .hcard.play-sel .ccost .ticon{
  width:clamp(7px,14cqw,11px);height:clamp(7px,14cqw,11px);
}
/* Mobile splash — viewport-centered, never tied to playmat pan ("camera"). Card flights may render off-screen; that is OK. */
html.tcg-mobile-viewport #center-banner{
  position:fixed;left:50%;top:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%);
  z-index:9050;width:min(88vw,920px);
}
html.tcg-mobile-viewport #opp-skill-wait{
  position:fixed;left:50%;top:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%);
  z-index:9040;
}
html.tcg-mobile-viewport #live-judge-overlay{
  position:fixed;inset:0;z-index:9030;
}
html.tcg-mobile-viewport #perf-spectacle{
  position:fixed;left:50%;top:50%;right:auto;bottom:auto;
  width:min(100vw, calc(100dvh * 20 / 9));
  height:min(100dvh, calc(100vw * 9 / 20));
  transform:translate(-50%, -50%);
  container-type:size;container-name:tcg-perf;
  z-index:9100;padding:0.15cqh 0.2cqw;box-sizing:border-box;overflow:hidden;
  display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;
  --perf-member-w:7.2cqw;
  --perf-col-side-inset:5.4cqw;
  --perf-yell-rail-gap:0.65cqw;
  --perf-rail-slot-w:calc(var(--perf-member-w) * 2.15 + 0.75cqw);
}
@media (max-aspect-ratio: 5/4) {
  html.tcg-mobile-viewport #perf-spectacle{
    width:100vw;
    height:100dvh;
    max-width:100vw;
    max-height:100dvh;
  }
}
html.tcg-tablet-landscape.tcg-mobile-viewport #perf-spectacle{
  --perf-member-w:6.6cqw;
  --perf-col-side-inset:5cqw;
}
html.tcg-mobile-viewport #perf-spectacle .perf-stage{
  width:100%;height:100%;max-height:100%;min-height:0;margin:0;flex:1;
  gap:0.12cqh;align-items:stretch;
}
html.tcg-mobile-viewport #perf-spectacle .perf-spotlights{
  width:85cqw;height:70cqh;transform:translate(-50%, -46%) scale(2);
}
html.tcg-mobile-viewport #perf-spectacle .perf-col{
  min-height:0;flex:1;display:flex;flex-direction:column;
}
html.tcg-mobile-viewport #perf-spectacle .perf-col.opp{
  justify-content:flex-start;align-items:stretch;
}
html.tcg-mobile-viewport #perf-spectacle .perf-col.mine{
  justify-content:flex-end;align-items:stretch;
}
html.tcg-mobile-viewport #perf-spectacle .perf-col-row{
  flex:1;min-height:0;width:100%;
}
html.tcg-mobile-viewport #perf-spectacle .perf-col.opp .perf-col-row{align-items:flex-start}
html.tcg-mobile-viewport #perf-spectacle .perf-col.mine .perf-col-row{align-items:flex-end}
html.tcg-mobile-viewport #perf-spectacle .perf-col-body{
  flex:1;min-height:0;height:100%;
  padding-left:var(--perf-col-side-inset);padding-right:var(--perf-col-side-inset);
  gap:var(--perf-yell-rail-gap);min-height:0;
  justify-content:center;
}
html.tcg-mobile-viewport #perf-spectacle .perf-col.opp .perf-col-body{align-items:flex-start}
html.tcg-mobile-viewport #perf-spectacle .perf-col.mine .perf-col-body{align-items:flex-end}
html.tcg-mobile-viewport #perf-spectacle .perf-col-side{
  width:6.2cqw;left:0;gap:0.2cqh;
}
html.tcg-mobile-viewport #perf-spectacle .perf-col-lbl{
  font-size:2.35cqw;line-height:1.05;
}
html.tcg-mobile-viewport #perf-spectacle .perf-card-stack{
  flex:1 1 auto;max-width:calc(100% - var(--perf-rail-slot-w) - var(--perf-yell-rail-gap));
  min-height:0;height:100%;gap:0.22cqh;
  display:flex;flex-direction:column;
}
html.tcg-mobile-viewport #perf-spectacle .perf-col.opp .perf-card-stack{justify-content:flex-start}
html.tcg-mobile-viewport #perf-spectacle .perf-col.mine .perf-card-stack{justify-content:flex-end}
html.tcg-mobile-viewport #perf-spectacle .perf-col.opp .perf-live-row{margin-top:auto}
html.tcg-mobile-viewport #perf-spectacle .perf-col.mine .perf-stage-row{margin-top:auto}
html.tcg-mobile-viewport #perf-spectacle .perf-yell-rail{
  gap:0.35cqw;flex:0 0 var(--perf-rail-slot-w);
  align-self:center;
}
html.tcg-mobile-viewport #perf-spectacle .perf-live-row,
html.tcg-mobile-viewport #perf-spectacle .perf-stage-row{
  min-height:0;max-height:none;gap:0.5cqw;
}
html.tcg-mobile-viewport #perf-spectacle .perf-card.live{width:9.2cqw}
html.tcg-mobile-viewport #perf-spectacle .perf-live-row.perf-live-multi .perf-card.live{
  width:7.4cqw;height:auto;
}
html.tcg-mobile-viewport #perf-spectacle .perf-card.member,
html.tcg-mobile-viewport #perf-spectacle .perf-deck-pile{width:var(--perf-member-w)}
html.tcg-mobile-viewport #perf-spectacle .perf-stage-row.perf-stage-multi .perf-card.member{
  width:6.2cqw;height:auto;
}
html.tcg-mobile-viewport #perf-spectacle .perf-card.member.member-in-wait{
  width:calc(var(--perf-member-w) * 88 / 63);height:var(--perf-member-w);
  aspect-ratio:88/63;
}
html.tcg-mobile-viewport #perf-spectacle .perf-stage-row.perf-stage-multi .perf-card.member.member-in-wait{
  width:calc(6.2cqw * 88 / 63);height:6.2cqw;
  aspect-ratio:88/63;
}
html.tcg-mobile-viewport #perf-spectacle .perf-col.mine .perf-yell-row,
html.tcg-mobile-viewport #perf-spectacle .perf-col.opp .perf-yell-row{
  width:var(--perf-member-w);
  aspect-ratio:63/88;
}
html.tcg-mobile-viewport #perf-spectacle .perf-yell-card{
  width:100%;height:100%;
}
html.tcg-mobile-viewport #perf-spectacle .perf-hearts-band{
  gap:0.65cqw;width:100%;justify-content:center;align-self:center;
}
html.tcg-mobile-viewport #perf-spectacle .perf-hearts-panel{min-height:2.4cqh}
html.tcg-mobile-viewport #perf-spectacle .perf-hearts-panel .heart-stat-row{
  font-size:2.25cqw;gap:0.28cqw;
}
html.tcg-mobile-viewport #perf-spectacle .perf-hearts-panel .hicon{
  width:2.7cqw;height:2.7cqw;
}
html.tcg-mobile-viewport #perf-spectacle .perf-hearts-panel.dense .heart-stat-row{font-size:1.85cqw}
html.tcg-mobile-viewport #perf-spectacle .perf-hearts-panel.dense .hicon{
  width:2.2cqw;height:2.2cqw;
}
html.tcg-mobile-viewport #perf-spectacle .perf-blade-row{
  font-size:2.05cqw;min-height:2.2cqh;gap:0.4cqw;
}
html.tcg-mobile-viewport #perf-spectacle .perf-blade-row .bicon{width:2.7cqw;height:2.7cqw}
html.tcg-mobile-viewport #perf-spectacle .perf-yell-blade-hearts .hicon.bheart{
  width:2cqw;height:2cqw;
}
html.tcg-mobile-viewport #perf-spectacle .perf-outcome,
html.tcg-mobile-viewport #perf-spectacle .perf-side-outcomes .perf-outcome{
  font-size:1.55cqw;padding:0.35cqh 0.75cqw;
}
html.tcg-mobile-viewport #perf-spectacle .perf-fx-toast{
  bottom:8cqh;max-width:72cqw;font-size:1.45cqw;padding:0.35cqh 1cqw;
}
html.tcg-mobile-viewport #perf-spectacle .perf-splash{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
html.tcg-mobile-viewport #perf-spectacle .perf-splash-txt{
  font-size:7cqw;max-width:88cqw;padding:0 2cqw;
}
html.tcg-mobile-viewport #perf-spectacle .perf-splash.live-start .perf-splash-txt{font-size:9cqw}
html.tcg-mobile-viewport #perf-spectacle .perf-judge-panel{
  position:absolute;inset:0;padding:0.5cqh;
}
html.tcg-mobile-viewport #perf-spectacle .perf-judge-center{
  max-width:82cqw;margin-left:0;gap:0.6cqh;
}
html.tcg-mobile-viewport #perf-spectacle .perf-judge-title{font-size:4.5cqw}
html.tcg-mobile-viewport #perf-spectacle .perf-judge-side-lbl{font-size:1.65cqw}
html.tcg-mobile-viewport #perf-spectacle .perf-judge-side-num{font-size:7cqw}
html.tcg-mobile-viewport #perf-spectacle .perf-judge-duel{
  gap:1.5cqw;padding:0.6cqh 2.5cqw;
}
html.tcg-mobile-viewport #perf-spectacle .perf-verdict{font-size:5cqw}
html.tcg-mobile-viewport #toast{
  position:fixed;top:max(12px, env(safe-area-inset-top, 0px));left:50%;
  transform:translateX(-50%) translateY(-65px);
  z-index:9060;
}
html.tcg-mobile-viewport #toast.show{
  transform:translateX(-50%) translateY(0);
}
html.tcg-mobile-viewport body.perf-spectacle-active #center-banner{
  left:50%;top:50%;transform:translate(-50%,-50%);
}

/* ── Sub-1080p desktop: log hidden; radio / phase / resign in left pane; playmat fills viewport ── */
html.tcg-compact-desktop:not(.tcg-mobile-viewport) #screen-game .game-viewport-frame .game-wide-wrap{
  --side-panel-w:min(320px, 28vw);
  --playmat-gutter:calc(2 * var(--side-panel-w));
}
html.tcg-compact-desktop:not(.tcg-mobile-viewport) #screen-game .game-viewport-frame .side-panel.side-left .card-hover-panel{
  display:none!important;
}
html.tcg-compact-desktop:not(.tcg-mobile-viewport) #screen-game .game-viewport-frame .side-left-actions-host{
  display:none!important;
}

/* Full desktop: never show compact action host; keep standard three-column game layout */
html:not(.tcg-compact-desktop):not(.tcg-mobile-viewport) #screen-game .game-viewport-frame .side-left-actions-host{
  display:none!important;
}
html:not(.tcg-mobile-viewport) #screen-game .game-viewport-frame .side-panel.side-right{
  display:flex!important;
}

/* ── Sub-1080p desktop: 16:9 frame + uniform UI scale (hand strips / panels / playmat) ── */
html.tcg-desktop-scaled:not(.tcg-mobile-viewport){
  --hand-strip-h:calc(132px * var(--desktop-ui-scale, 1));
  --hand-card-pad:calc(24px * var(--desktop-ui-scale, 1));
  --mat-seam-h:calc(5px * var(--desktop-ui-scale, 1));
  --skill-hand-preserve-h:calc(max(var(--hand-strip-h), var(--my-hand-card-h)) + calc(30px * var(--desktop-ui-scale, 1)));
  --skill-hand-blur-feather:min(calc(88px * var(--desktop-ui-scale, 1)),14vh);
}
html.tcg-desktop-scaled:not(.tcg-mobile-viewport) #screen-game.active{
  align-items:center;justify-content:center;
  background:transparent;
}
html.tcg-desktop-scaled:not(.tcg-mobile-viewport) #screen-game .game-viewport-frame{
  flex:0 0 auto;
  width:min(100vw, calc(100vh * 16 / 9));
  height:min(100vh, calc(100vw * 9 / 16));
  max-width:100vw;max-height:100vh;
  min-height:0;
}
html.tcg-desktop-scaled:not(.tcg-mobile-viewport) #screen-game .game-viewport-frame .game-wide-wrap{
  width:100%;height:100%;min-height:0;max-height:100%;
}
html.tcg-desktop-scaled:not(.tcg-mobile-viewport) #screen-game .game-viewport-frame .playmat-column{
  max-height:100%;
}
html.tcg-desktop-scaled:not(.tcg-mobile-viewport) #screen-game .game-viewport-frame .side-panel{
  height:100%;min-height:0;
}
html.tcg-desktop-scaled:not(.tcg-mobile-viewport):not(.tcg-compact-desktop) #screen-game .game-viewport-frame .game-wide-wrap{
  --side-panel-w:calc(440px * var(--desktop-ui-scale, 1));
  --playmat-gutter:calc(2 * var(--side-panel-w));
}
html.tcg-desktop-scaled:not(.tcg-mobile-viewport).tcg-compact-desktop #screen-game .game-viewport-frame .game-wide-wrap{
  --side-panel-w:min(calc(320px * var(--desktop-ui-scale, 1)), 28vw);
  --playmat-gutter:calc(2 * var(--side-panel-w));
}

.playmat-img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
  pointer-events:none;user-select:none;
}
.playmat-overlay{
  position:absolute;inset:0;
  pointer-events:none;
}
.playmat-board{display:contents}
.mat-zone{
  position:absolute;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  box-sizing:border-box;
  padding:0;
  container-type:size;
  pointer-events:auto;
}
.mat-zone.slot-fill{padding:0}
.mat-zone.success-col{
  flex-direction:column;gap:0;padding:0;
  align-items:stretch;justify-content:flex-start;overflow:visible;
}
.success-live-stack{
  display:block;position:relative;
  width:100%;height:100%;overflow:visible;
}
.slive-chip{
  position:absolute;left:50%;transform:translateX(-50%);
  flex-shrink:0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.slive-chip .lcard.live-card{
  width:100%;height:100%;flex:0 0 auto;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.slive-chip .slive-face{
  width:100%;height:100%;border-radius:3px;
  background-size:cover;background-position:center;
  border:1px solid rgba(255,107,168,.45);
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.slive-chip.empty{
  border-radius:3px;border:1px dashed rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.22);font-size:clamp(8px,2.5cqw,12px);
  cursor:default;
}
.slive-chip.empty.back-pip::after{content:'♪';font-size:clamp(8px,2.5cqw,12px)}
.success-live-stack.triumph{
  z-index:24;overflow:visible;
}
.success-live-stack.triumph .slive-chip{
  animation:slive-triumph-rise 1.15s cubic-bezier(.22,.85,.25,1) forwards;
  animation-delay:calc(var(--triumph-i, 0) * 90ms);
  z-index:24;
}
.slive-triumph-sparkle{
  position:absolute;inset:-8%;pointer-events:none;border-radius:inherit;z-index:3;
  opacity:0;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.95) 0 1.2px,transparent 2.4px),
    radial-gradient(circle at 82% 20%,rgba(255,244,215,.9) 0 1.6px,transparent 2.8px),
    radial-gradient(circle at 74% 78%,rgba(255,255,255,.88) 0 1px,transparent 2.2px),
    radial-gradient(circle at 24% 72%,rgba(255,220,180,.86) 0 1.3px,transparent 2.4px),
    radial-gradient(circle at 50% 12%,rgba(255,255,255,.78) 0 1px,transparent 2px);
  animation:slive-triumph-sparkle 1.05s ease-out calc(.12s + var(--triumph-i, 0) * 90ms) 1 forwards;
}
@keyframes slive-triumph-rise{
  0%{
    transform:translateX(-50%) translateY(0) scale(1);
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
  }
  38%{
    transform:translateX(calc(-50% + var(--triumph-x, 0px))) translateY(calc(-1 * var(--triumph-lift, 14px))) scale(1.08);
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.48)) drop-shadow(0 0 16px rgba(255,180,220,.62));
  }
  62%{
    transform:translateX(calc(-50% + var(--triumph-x, 0px))) translateY(calc(-1 * var(--triumph-lift, 14px))) scale(1.05);
    filter:drop-shadow(0 8px 14px rgba(0,0,0,.44)) drop-shadow(0 0 22px rgba(255,200,120,.55));
  }
  100%{
    transform:translateX(calc(-50% + var(--triumph-x, 0px))) translateY(calc(-1 * var(--triumph-lift, 14px))) scale(1.04);
    filter:drop-shadow(0 7px 12px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(255,190,210,.5));
  }
}
@keyframes slive-triumph-sparkle{
  0%{opacity:0;transform:scale(.88)}
  32%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.06)}
}
.mat-zone.success-col.triumph-glow{
  filter:drop-shadow(0 0 10px rgba(255,150,200,.28));
}
@media (prefers-reduced-motion:reduce){
  .success-live-stack.triumph .slive-chip{animation:none}
  .slive-triumph-sparkle{display:none}
}
.mat-zone.deck-pile.deck-hidden{cursor:default}
.mat-zone.deck-pile{padding:0;cursor:pointer;overflow:visible;
  align-items:center;justify-content:center}

.deck-stack{
  width:100%;height:100%;border-radius:3px;
  background:url('../../lltcg-back.png') center/cover no-repeat;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  position:relative;overflow:hidden;
  flex-shrink:0;
}
.deck-stack.thick::before,.deck-stack.thick::after{
  content:'';position:absolute;inset:0;border-radius:3px;
  background:url('../../lltcg-back.png') center/cover no-repeat;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.deck-stack.thick::before{transform:translate(2%,1%);z-index:0;opacity:.85}
.deck-stack.thick::after{transform:translate(1%,0.5%);z-index:0;opacity:.92}
.deck-count{
  position:absolute;bottom:4%;right:4%;
  background:rgba(0,0,0,.78);color:#fff;
  font-size:clamp(9px,2.8cqw,13px);font-weight:800;
  padding:2px 7px;border-radius:10px;z-index:2;
}

/* Waiting Room — face-up discard pile (top card visible) */
.mat-zone.wr-pile{cursor:pointer}
.mat-zone.wr-pile .deck-stack.wr-has-cards{
  background:transparent;box-shadow:none;
}
.mat-zone.wr-pile .deck-stack.wr-has-cards::before,
.mat-zone.wr-pile .deck-stack.wr-has-cards::after{display:none}
.wr-face-stack{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.wr-face-card{
  position:absolute;
  border-radius:3px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  background:#111;
  left:50%;top:50%;
  pointer-events:auto;
  cursor:help;
}
.wr-face-card.wr-under{
  transform:translate(calc(-50% - 4%), calc(-50% - 3%)) scale(0.96);
  opacity:.82;z-index:0;
}
.wr-face-card.wr-top{z-index:1;transform:translate(-50%,-50%)}
.wr-face-card > img.card-face-fill,
.wr-face-card > .noimg.card-face-fill{
  width:100%;height:100%;object-fit:cover;display:block;
}
.wr-face-card.wr-live .card-landscape-in-portrait{
  position:absolute;left:50%;top:50%;
}
.mat-zone.z-opp-main-deck,.mat-zone.z-opp-energy-deck{cursor:default}
.mat-zone.z-opp-main-deck .deck-stack,.mat-zone.z-opp-energy-deck .deck-stack{pointer-events:none}

.mat-zone.z-my-energy,.mat-zone.z-opp-energy{overflow:visible}
.z-opp-energy .energy-stack{align-items:center;transform:translateY(-6%)}

/* Energy — chevron row: tall overlapping cards */
.energy-stack{
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
  height:100%;width:100%;padding:0 1%;
}
.echip-stack{
  position:relative;flex-shrink:0;
  height:100%;width:auto;aspect-ratio:unset;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
  transition:transform .2s ease,filter .2s ease;
}
.echip-stack.stack-shift-anim{
  transition:left var(--fan-shift-ms) cubic-bezier(.25,.9,.25,1),
              top var(--fan-shift-ms) cubic-bezier(.25,.9,.25,1),
              margin-left var(--fan-shift-ms) cubic-bezier(.25,.9,.25,1),
              width var(--fan-shift-ms) cubic-bezier(.25,.9,.25,1),
              height var(--fan-shift-ms) cubic-bezier(.25,.9,.25,1),
              transform .2s ease,filter .2s ease;
}
.echip-stack:first-child{margin-left:0!important}
.echip-stack .echip{
  width:100%;height:100%;border-radius:3px;
  background:rgba(18,14,10,.92);
  border:1px solid rgba(251,191,36,.55);
  box-shadow:0 1px 4px rgba(0,0,0,.35);
  position:relative;overflow:hidden;
  display:block;
  font-size:clamp(10px,2.8cqw,14px);color:#FBBF24;font-weight:800;
  transition:border-color .2s ease,box-shadow .2s ease;
  contain:layout style paint;
}
.echip-stack .echip.energy-face-ready{background:none}
.echip-stack .echip.energy-has-face{background:none}
.echip .card-art.energy-chip-face{
  position:absolute;inset:0;margin:auto;
  width:100%;height:100%;
  transform:rotate(0deg);transform-origin:center center;
  border-radius:inherit;overflow:hidden;z-index:1;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.echip .card-art.energy-chip-face.energy-sideways{
  width:calc(100% * 63 / 88);height:calc(100% * 88 / 63);
  transform:rotate(90deg);
}
.echip .card-art.energy-chip-face > img.card-face-fill,
.echip .card-art.energy-chip-face > .noimg.card-face-fill{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  filter:none;
}
.echip .card-art.energy-chip-face.energy-sideways > img,
.echip .card-art.energy-chip-face.energy-sideways > .noimg{
  filter:grayscale(.7) brightness(.55);
}
.echip-stack .echip > img.card-face-fill,
.echip-stack .echip > .noimg.card-face-fill{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;z-index:1;
  filter:none;
}
.echip-stack .echip:has(> .card-art.energy-chip-face),
.echip-stack .echip:has(> img.card-face-fill),
.echip-stack .echip:has(> .noimg.card-face-fill){
  background:none;
}
.echip-stack.used .echip > img.card-face-fill,
.echip-stack.used .echip > .noimg.card-face-fill{
  filter:grayscale(.7) brightness(.55);
}
.echip-stack.used .echip{
  filter:none;
  border-color:rgba(120,120,120,.45);
  color:rgba(150,150,150,.5);
}
.energy-stack.energy-flip-anim .echip-stack{
  transition:width var(--energy-flip-ms) cubic-bezier(.25,.9,.25,1),
              height var(--energy-flip-ms) cubic-bezier(.25,.9,.25,1),
              margin-left var(--energy-flip-ms) cubic-bezier(.25,.9,.25,1);
}
.energy-stack.energy-flip-anim .echip{
  transition:border-color var(--energy-flip-ms) ease,box-shadow var(--energy-flip-ms) ease;
}
.energy-stack.energy-flip-anim .echip .card-art.energy-chip-face{
  transition:transform var(--energy-flip-ms) cubic-bezier(.25,.9,.25,1),
              width var(--energy-flip-ms) cubic-bezier(.25,.9,.25,1),
              height var(--energy-flip-ms) cubic-bezier(.25,.9,.25,1);
}
.energy-stack.energy-flip-anim .echip .card-art.energy-chip-face > img,
.energy-stack.energy-flip-anim .echip .card-art.energy-chip-face > .noimg,
.energy-stack.energy-flip-anim .echip > img.card-face-fill,
.energy-stack.energy-flip-anim .echip > .noimg.card-face-fill{
  transition:filter var(--energy-flip-ms) ease;
}
.echip-stack.stack-shift-anim .echip .card-art.energy-chip-face:not(.energy-sideways),
.echip-stack.stack-shift-anim .echip > img.card-face-fill{
  transform:translateZ(0);
}
.energy-stack.energy-flip-anim .echip-stack.stack-shift-anim .echip .card-art.energy-chip-face:not(.energy-sideways){
  transform:rotate(0deg);
}
.echip-stack.stack-shift-anim .echip .card-art.energy-chip-face.energy-sideways{
  transform:rotate(90deg) translateZ(0);
}
.energy-stack.energy-flip-anim .echip-stack.stack-shift-anim .echip .card-art.energy-chip-face.energy-sideways{
  transform:rotate(90deg);
}

/* Coin flip */
.coin-mbox{text-align:center;max-width:360px}
.coin-stage{perspective:800px;height:120px;display:flex;align-items:center;justify-content:center;margin:18px 0}
.coin{
  width:96px;height:96px;min-width:96px;min-height:96px;flex-shrink:0;
  position:relative;transform-style:preserve-3d;
}
.coin:not(.flipping){transition:transform 1.1s cubic-bezier(.2,.85,.25,1)}
.coin.flipping{animation:coinFlip 1.1s cubic-bezier(.2,.85,.25,1) forwards;transition:none}
.coin.landed-heads{transform:rotateY(0deg)}
.coin.landed-tails{transform:rotateY(180deg)}
.coin-face{
  position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka One',cursive;font-size:11px;line-height:1.15;
  padding:10px;text-align:center;color:#fff;
  overflow:hidden;word-break:break-word;
  border:3px solid rgba(255,255,255,.35);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.coin-heads{background:linear-gradient(145deg,#F472B6,#DB2777)}
.coin-tails{background:linear-gradient(145deg,#60A5FA,#2563EB);transform:rotateY(180deg)}
.coin-result{font-size:14px;font-weight:800;color:var(--gold);min-height:1.4em;margin-top:8px}
.coin-choice-btns{display:flex;flex-direction:column;gap:10px;margin-top:14px;width:100%;max-width:320px}
.coin-choice-btns[hidden],.coin-mbox:has(.coin.flipping) .coin-choice-btns{display:none!important}
.coin-choice-btns .btn-grad{width:100%;padding:11px 18px;font-size:13px}
.coin-choice-btns .btn-grad.tut-coin-opp-locked,
.coin-choice-btns .btn-grad.tut-coin-opp-locked:disabled{
  opacity:.42;cursor:not-allowed;filter:grayscale(.35);pointer-events:none;
}
@keyframes coinFlip{
  0%{transform:rotateY(0) scale(1)}
  100%{transform:rotateY(1080deg) scale(1)}
}

/* Opponent hand cards (face-down, above mat) */
.opp-hand-card{
  height:var(--opp-hand-card-h);aspect-ratio:63/88;border-radius:4px;
  background:url('../../lltcg-back.png') center/cover no-repeat;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 2px 6px rgba(0,0,0,.45);
  flex-shrink:0;position:relative;
  touch-action:manipulation;-webkit-touch-callout:none;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.opp-hand-card.stack-shift-anim{
  transition:transform var(--fan-shift-ms) cubic-bezier(.25,.9,.25,1),
              box-shadow .15s,border-color .15s;
}
.opp-hand-more{font-size:11px;color:rgba(255,255,255,.45);margin-left:8px;font-weight:800;align-self:center}

.mat-zone[class*='stage-'],.mat-zone[class*='live-']{overflow:visible}
.stage-slot,.live-slot-wrap{
  width:100%;height:100%;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
}
.stage-slot.opp,.live-slot-wrap.opp{justify-content:flex-start}
.stage-hearts{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;gap:1px;flex-wrap:nowrap;justify-content:center;align-items:center;
  z-index:4;max-width:160%;pointer-events:none;
  background:none;padding:0;border-radius:0;box-shadow:none;
}
.stage-hearts.dense{gap:0}
.stage-hearts.dense .hicon.fld{margin:0 -4px}
.mslot .stage-hearts{
  position:absolute;left:50%;top:0;transform:translate(-50%,-88%);z-index:8;
  transition:transform .2s cubic-bezier(.22,1,.36,1);
}
.lcard.live-card .stage-hearts{
  position:absolute;left:50%;top:0;transform:translate(-50%,-72%);z-index:6;
}
.lcard.live-card .stage-hearts.live-req{
  display:flex;gap:3px 6px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:2px 6px;border-radius:999px;background:rgba(0,0,0,.7);
}
.lcard.live-card .stage-hearts.live-req .heart-stat-row{
  display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:800;color:#fff;line-height:1;
}
.lcard.live-card .stage-hearts.live-req.req-modified,
.stage-hearts.live-req.req-modified{
  padding:2px 6px;border-radius:999px;background:rgba(20,40,70,.82);
  box-shadow:0 0 0 1px rgba(96,165,250,.55),0 0 10px rgba(96,165,250,.28);
}
.stage-slot.opp .mslot .stage-hearts{
  top:auto;bottom:0;transform:translate(-50%,88%);
}
.stage-slot.opp .lcard.live-card .stage-hearts,
.live-slot-wrap.opp .lcard.live-card .stage-hearts{
  top:auto;bottom:0;transform:translate(-50%,72%);
}
.mslot .stage-hearts .hicon.fld{
  width:clamp(17px,4.32cqw,20px);height:clamp(17px,4.32cqw,20px);
}
.mslot .stage-hearts.dense .hicon.fld{margin:0 -5px}
.hicon.fld{width:clamp(14px,3.6cqw,17px);height:clamp(14px,3.6cqw,17px);flex-shrink:0}
.hicon.fld[data-color="pink"]{filter:drop-shadow(0 0 5px rgba(255,107,168,.92)) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.hicon.fld[data-color="red"]{filter:drop-shadow(0 0 5px rgba(248,113,113,.92)) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.hicon.fld[data-color="yellow"]{filter:drop-shadow(0 0 5px rgba(251,191,36,.92)) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.hicon.fld[data-color="green"]{filter:drop-shadow(0 0 5px rgba(74,222,128,.88)) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.hicon.fld[data-color="blue"]{filter:drop-shadow(0 0 5px rgba(96,165,250,.92)) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.hicon.fld[data-color="purple"]{filter:drop-shadow(0 0 5px rgba(192,132,252,.92)) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.hicon.fld[data-color="any"]{filter:drop-shadow(0 0 4px rgba(210,210,220,.75)) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.field-badge{
  display:flex;align-items:center;justify-content:center;gap:4px;
  flex:0 0 auto;width:100%;padding:1px 0 2px;pointer-events:none;line-height:1;z-index:6;
}
.mslot .field-badge.field-blade{
  position:absolute;left:0;right:0;margin:0;order:unset;z-index:8;
  transition:transform .2s cubic-bezier(.22,1,.36,1);
}
.mslot .field-badge.field-cost{
  position:absolute;top:3%;left:3%;right:auto;width:auto;margin:0;padding:2px 5px;
  border-radius:8px;background:rgba(0,0,0,.72);z-index:9;
  transform:none;gap:3px;
}
.stage-slot.opp .mslot .field-badge.field-cost{
  top:auto;bottom:3%;
}
.field-badge.field-cost.cost-boosted{outline:1px solid rgba(251,191,36,.5)}
.field-badge.field-cost.cost-reduced{outline:1px solid rgba(96,165,250,.5)}
.stage-slot:not(.opp) .mslot .field-badge.field-blade{
  top:auto;bottom:0;padding:3px 0 0;transform:translateY(42%);
}
.stage-slot.opp .mslot .field-badge.field-blade{
  top:0;bottom:auto;padding:0 0 3px;transform:translateY(-42%);
}
.mslot .field-badge.field-hearts{
  position:absolute;left:auto;right:0;width:auto;margin:0;padding:2px 5px;
  display:flex;align-items:center;
  border-radius:8px;background:rgba(0,0,0,.72);z-index:9;gap:2px;
  transition:transform .2s cubic-bezier(.22,1,.36,1);
}
.stage-slot:not(.opp) .mslot .field-badge.field-hearts{
  top:auto;bottom:0;transform:translate(8%, 42%);
}
.stage-slot.opp .mslot .field-badge.field-hearts{
  top:0;bottom:auto;transform:translate(8%, -42%);
}
.field-badge.field-hearts .heart-stat-row{
  display:inline-flex;align-items:center;gap:2px;
}
.field-badge.field-hearts .heart-stat-count{
  font-size:clamp(15px,4.5cqw,21px);font-weight:800;color:#fff;
  text-shadow:0 0 2px #000,0 0 6px rgba(0,0,0,.95);
}
.field-badge.field-hearts .stat-mod-bonus{
  font-family:'Fredoka One',cursive;
  font-size:clamp(15px,4.5cqw,21px);font-weight:800;color:#FBBF24;
  text-shadow:0 0 2px #000,0 0 6px rgba(0,0,0,.95);
}
.field-badge.field-hearts .hicon{
  width:clamp(16px,4.4cqw,22px);height:clamp(16px,4.4cqw,22px);
}
.live-slot-wrap:not(.opp) .field-badge{
  position:absolute;left:0;right:0;padding:3px 0 0;margin:0;order:unset;
}
.live-slot-wrap:not(.opp) .field-badge{
  top:100%;bottom:auto;transform:none;
}
.live-slot-wrap.opp .field-badge{
  position:absolute;left:0;right:0;padding:0 0 3px;margin:0;order:unset;
}
.live-slot-wrap.opp .field-badge{
  bottom:100%;top:auto;transform:none;
}
.stage-slot:not(.opp) .mslot:hover .stage-hearts,
.stage-slot:not(.opp) .mslot.foil-tilt-hover .stage-hearts{
  transform:translate(-50%,-108%) scale(1.22);
}
.stage-slot:not(.opp) .mslot:hover .field-badge.field-blade,
.stage-slot:not(.opp) .mslot.foil-tilt-hover .field-badge.field-blade{
  transform:translateY(54%) scale(1.22);
}
.stage-slot.opp .mslot:hover .stage-hearts,
.stage-slot.opp .mslot.foil-tilt-hover .stage-hearts{
  transform:translate(-50%,108%) scale(1.22);
}
.stage-slot.opp .mslot:hover .field-badge.field-blade,
.stage-slot.opp .mslot.foil-tilt-hover .field-badge.field-blade{
  transform:translateY(-54%) scale(1.22);
}
.member-stacked-energy{
  position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  z-index:4;pointer-events:none;display:flex;align-items:center;justify-content:center
}
.member-stacked-energy .echip{
  width:28px;height:28px;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.45);
  opacity:.92
}
.member-stacked-energy .stacked-energy-count{
  position:absolute;top:-4px;right:-6px;min-width:16px;height:16px;padding:0 3px;
  border-radius:999px;background:rgba(15,23,42,.92);border:1px solid rgba(255,255,255,.35);
  color:#fde68a;font-size:10px;font-weight:800;line-height:14px;text-align:center
}
.stage-slot.opp .member-stacked-energy{bottom:auto;top:-6px}
.member-under-stack{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible
}
.under-chip{
  position:absolute;overflow:hidden;border-radius:3px;pointer-events:auto;
  box-shadow:0 1px 4px rgba(0,0,0,.45);background:rgba(0,0,0,.2)
}
.under-chip .card-portrait-in-landscape{
  pointer-events:none
}
.under-chip > img,
.under-chip > .card-face-fill,
.under-chip > .noimg{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:3px
}
.member-under-stack .stacked-cards-count{
  position:absolute;z-index:6;pointer-events:none;
  min-width:18px;height:18px;padding:0 4px;margin:0;
  border-radius:999px;background:rgba(15,23,42,.92);border:1px solid rgba(255,255,255,.35);
  color:#e2e8f0;font-size:10px;font-weight:800;line-height:16px;text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.45);white-space:nowrap
}
.perf-card.member:has(.member-under-stack){overflow:visible;isolation:isolate}
.perf-card.member > img,
.perf-card.member > .noimg,
.perf-card.member > .card-art,
.perf-card.member > .card-face-fill{
  position:relative;z-index:1
}
.perf-card.member > .member-under-stack{z-index:0}
.field-badge .badge-val{
  font-size:clamp(15px,4.5cqw,21px);font-weight:800;color:#fff;
  text-shadow:0 0 2px #000,0 0 6px rgba(0,0,0,.95),0 1px 5px rgba(0,0,0,.92),0 2px 8px rgba(0,0,0,.88);
}
.field-badge .bicon,.field-badge .ticon{
  width:clamp(18px,4.8cqw,24px);height:clamp(18px,4.8cqw,24px);
  filter:drop-shadow(0 0 3px rgba(0,0,0,.92)) drop-shadow(0 1px 5px rgba(0,0,0,.88));
}
.mslot{width:100%;flex:0 0 auto;min-height:0;border-radius:3px;border:none;background:transparent;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:filter .15s;position:relative;overflow:visible;z-index:1}
.mslot:hover,.mslot.foil-tilt-hover{z-index:12}
.mslot:hover{filter:brightness(1.08)}
.mslot > img,.mslot > .noimg,.mslot > .live-flip-inner{position:relative;z-index:1}
.mslot.drop{outline:2px solid var(--pink);outline-offset:-2px;animation:dpulse .6s ease-in-out infinite alternate}
.mslot img{width:100%;height:100%;object-fit:contain;object-position:center bottom;border-radius:3px;display:block}
.mslot.stage-flip{perspective:720px;overflow:visible;position:relative;min-height:0;transform-style:preserve-3d;
  display:flex;align-items:center;justify-content:center}
.mslot.stage-flip .live-flip-inner{
  position:relative;left:auto;top:auto;margin:0;flex:0 0 auto;transform-style:preserve-3d;
  transform-origin:50% 50%;
  transition:transform .55s cubic-bezier(.4,.2,.2,1)}
.mslot.stage-flip.revealed .live-flip-inner{transform:rotateY(180deg)}
.mslot.stage-flip.revealed .live-flip-back{display:none!important;visibility:hidden!important}
.mslot.stage-flip .live-flip-face{
  position:absolute;inset:0;width:100%;height:100%;border-radius:3px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
}
.mslot.stage-flip .live-flip-back{transform:rotateY(0deg);background:url('../../lltcg-back.png') center/cover no-repeat}
.mslot.stage-flip .live-flip-front{transform:rotateY(180deg)}
.mslot.stage-flip .live-flip-back .back.live-back{width:100%;height:100%}
.mslot.stage-flip .live-flip-front > img,
.mslot.stage-flip .live-flip-front > .noimg,
.mslot.stage-flip .live-flip-front .card-face-fill{
  width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block;border-radius:3px;
}
.card-flight .flight-inner .card-back-fill,
.card-flight .flight-inner .back.live-back.card-back-fill{
  width:100%;height:100%;border-radius:4px;
  background:url('../../lltcg-back.png') center/cover no-repeat;
}
.mslot > img,.mslot > .noimg{border-radius:3px;overflow:hidden}
.wdim{position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(6px,2cqw,9px);font-weight:800;color:rgba(255,255,255,.75);
  letter-spacing:.04em;text-transform:uppercase;pointer-events:none;
  background:transparent;border-radius:3px}
.wdim::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:rgba(0,0,0,.55);border-radius:3px;
  transform-origin:center center;
}
/* Dim rotates with the face (same 90°) so the blackout tracks mid-flip — not an AABB morph. */
.mslot.member-in-wait > .wdim::before{
  transform:rotate(90deg);
}
.mslot.member-wait-flip-anim > .wdim::before{
  transition:transform .36s cubic-bezier(.4,.2,.2,1);
}
.mslot.member-in-wait > img,
.mslot.member-in-wait > .noimg,
.mslot.member-in-wait .live-flip-front > img,
.mslot.member-in-wait .live-flip-front > .noimg,
.mslot.member-in-wait .live-flip-front .card-face-fill{
  transform:rotate(90deg);
  transform-origin:center center;
}
/* Wait members are portrait-in-landscape — foil tilt on the slot breaks hover art. */
html:not(.foil-fx-off) #screen-game .mslot.member-in-wait.card-tilt-enabled.foil-tilt-hover{
  transform:none;
  box-shadow:none;
}
.mslot.member-wait-flip-anim > img,
.mslot.member-wait-flip-anim > .noimg,
.mslot.member-wait-flip-anim .live-flip-front > img,
.mslot.member-wait-flip-anim .live-flip-front > .noimg,
.mslot.member-wait-flip-anim .live-flip-front .card-face-fill{
  transition:transform .36s cubic-bezier(.4,.2,.2,1);
}
.bicon,.eicon,.ticon,.pill-ico{width:1em;height:1em;object-fit:contain;vertical-align:-0.15em;display:inline-block}
.bicon{width:clamp(8px,2.4cqw,12px);height:clamp(8px,2.4cqw,12px)}
.eicon{width:clamp(10px,3cqw,16px);height:clamp(10px,3cqw,16px);opacity:1}
.eicon.off{opacity:.35;filter:grayscale(.8)}
.pill-ico{width:18px;height:18px;opacity:.95}
.hicon{width:11px;height:11px;object-fit:contain;display:inline-block;vertical-align:middle;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));flex-shrink:0}
.hicon.lg{width:16px;height:16px}
.hicon.xl{width:22px;height:22px}
.heartpick button{display:inline-flex;align-items:center;gap:6px;justify-content:center}
.schip{display:flex;align-items:center;gap:2px}
.schip img{width:clamp(8px,2.2cqw,11px);height:clamp(8px,2.2cqw,11px);object-fit:contain}
.ccost .ticon{width:clamp(8px,2.2cqw,10px);height:clamp(8px,2.2cqw,10px)}
.lcard{width:100%;flex:1 1 auto;min-height:0;border-radius:3px;border:none;overflow:hidden;position:relative;cursor:pointer}
.lcard img{width:100%;height:100%;object-fit:cover}
.lcard .back{width:100%;height:100%;background:url('../../lltcg-back.png') center/cover no-repeat}

/* Unified card art: face/back edge-fill their frame; rotation lives on wrapper only */
.card-face-fill,
.card-back-fill,
.card-portrait-in-landscape > .noimg,
.card-landscape-in-portrait > .noimg{
  width:100%;height:100%;display:block;border-radius:inherit;
}
img.card-face-fill,
.card-portrait-in-landscape img,
.card-landscape-in-portrait img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;border-radius:inherit;
  pointer-events:none;-webkit-touch-callout:none;-webkit-user-drag:none;
  user-select:none;-webkit-user-select:none;
}
.card-back-fill,
.back.live-back.card-back-fill{
  background:url('../../lltcg-back.png') center/cover no-repeat;
}
.card-portrait-in-landscape,
.card-landscape-in-portrait{
  position:absolute;left:50%;top:50%;transform-origin:center center;
  overflow:hidden;border-radius:3px;
}
/* Portrait back/face in landscape live-storage frame (88:63 slot) */
.card-portrait-in-landscape{
  width:calc(100% * 63 / 88);height:calc(100% * 88 / 63);
  transform:translate(-50%, -50%) rotate(90deg);
}
/* Landscape live art in portrait hand/frame (63:88 slot) */
.card-landscape-in-portrait{
  width:calc(100% * 88 / 63);height:calc(100% * 63 / 88);
  transform:translate(-50%, -50%) rotate(90deg);
}
.mat-zone[class*='live-']{
  overflow:visible;display:flex;justify-content:center;padding:0;
  align-items:flex-end;
}
.z-opp-live-0,.z-opp-live-1,.z-opp-live-2{align-items:flex-start}
.live-slot-wrap:has(.storage-sideways-member){
  justify-content:center;
}
.live-slot-wrap.opp:has(.storage-sideways-member){
  justify-content:center;
}
.lcard.live-card{flex:0 0 auto;position:relative;box-shadow:0 2px 6px rgba(0,0,0,.4);overflow:visible;background:rgba(0,0,0,.12)}
.lcard.live-card > img.card-face-fill,
.lcard.live-card > .card-face-fill.noimg,
.lcard.live-card > .card-art:not(.live-sideways) > img,
.lcard.live-card > .card-art:not(.live-sideways) > .noimg{
  width:100%;height:100%;object-fit:cover;object-position:center;border-radius:3px;display:block;
  transform:none!important;aspect-ratio:unset;max-width:none;
}
.lcard.live-card .card-landscape-in-portrait,
.lcard.live-card .card-art.live-sideways.card-landscape-in-portrait{
  position:absolute;inset:auto;left:50%;top:50%;
}
.lcard.live-card.storage-sideways-member{
  transform:rotate(90deg);transform-origin:center center;
}
/* Live-storage reveal flip — same horizontal rotateY slab as stage; members keep card rotate(90deg). */
.lcard.live-card.live-storage-flip{
  background:transparent;box-shadow:none;
  perspective:720px;overflow:visible;position:relative;
  transform-style:preserve-3d;
  display:flex;align-items:center;justify-content:center;
}
.lcard.live-card.live-storage-flip .live-flip-inner{
  position:relative;left:auto;top:auto;margin:0;flex:0 0 auto;
  transform-style:preserve-3d;transform-origin:50% 50%;
  transition:transform .78s cubic-bezier(.4,.2,.2,1);
}
.lcard.live-card.live-storage-flip.revealed .live-flip-inner{transform:rotateY(180deg)}
.lcard.live-card.live-storage-flip .live-flip-face{
  position:absolute;inset:0;width:100%;height:100%;border-radius:3px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  background:rgba(0,0,0,.12);
}
.lcard.live-card.live-storage-flip .live-flip-back{
  transform:rotateY(0deg);
  /* Portrait backs use .card-portrait-in-landscape; do not also cover-crop here. */
  background:transparent;
}
.lcard.live-card.live-storage-flip .live-flip-back:not(:has(.card-portrait-in-landscape)){
  background:url('../../lltcg-back.png') center/cover no-repeat;
}
.lcard.live-card.live-storage-flip .live-flip-front{transform:rotateY(180deg);background:transparent}
.lcard.live-card.live-storage-flip .live-flip-back .back.live-back,
.lcard.live-card.live-storage-flip .live-flip-back .card-back-fill{width:100%;height:100%}
.lcard.live-card.live-storage-flip .live-flip-front > img,
.lcard.live-card.live-storage-flip .live-flip-front > .noimg,
.lcard.live-card.live-storage-flip .live-flip-front .card-face-fill{
  width:100%;height:100%;object-fit:contain;object-position:center bottom;
  display:block;border-radius:3px;
}
.lcard.live-card.storage-sideways-member > img,
.lcard.live-card.storage-sideways-member > .noimg,
.lcard.live-card.storage-sideways-member .live-flip-front > img,
.lcard.live-card.storage-sideways-member .live-flip-front > .noimg,
.lcard.live-card.storage-sideways-member .live-flip-front .card-face-fill,
.lcard.live-card.storage-sideways-member .live-flip-front .card-art > img,
.lcard.live-card.storage-sideways-member .live-flip-front .card-art > .noimg{
  width:100%;height:100%;object-fit:cover;object-position:center;transform:none!important;
  aspect-ratio:unset;max-width:none;border-radius:3px;display:block;
}
.lcard.live-card.storage-sideways-member .card-art.live-sideways,
.lcard.live-card.storage-sideways-member .card-landscape-in-portrait{
  position:static;width:100%;height:100%;transform:none;
}
.lcard.live-card .back.live-back.card-back-fill,
.lcard.live-card .card-back-fill{
  width:100%;height:100%;border-radius:3px;border:1px solid rgba(255,255,255,.12);
}
.lcard.live-card.live-storage-facedown{
  position:relative;overflow:visible;background:transparent;box-shadow:none;
}
.lcard.live-card.live-storage-facedown .live-facedown-shell{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:hidden;border-radius:3px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  background:rgba(0,0,0,.12);
}
.lcard.live-card.live-storage-facedown .live-flip-back{
  position:absolute;inset:0;transform:none;
  backface-visibility:visible;overflow:hidden;
}
.lcard.live-card.live-storage-facedown .card-portrait-in-landscape{border:none}
.lcard.live-card .card-portrait-in-landscape.storage-member-art,
.lcard.live-card .card-art.storage-member-art.card-portrait-in-landscape{
  position:absolute;inset:auto;left:50%;top:50%;
}
.lcard.live-card .live-flip-inner{
  position:relative;width:100%;height:100%;min-height:100%;transform-style:preserve-3d;
  transition:transform .78s cubic-bezier(.4,.2,.2,1);
  transform-origin:center center;
}
.lcard.live-card .live-flip-face{
  position:absolute;inset:0;border-radius:3px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
}
.lcard.live-card .live-flip-back{
  transform:rotateY(0deg);
  background:transparent;
}
.lcard.live-card .live-flip-back:not(:has(.card-portrait-in-landscape)){
  background:url('../../lltcg-back.png') center/cover no-repeat;
}
.lcard.live-card .live-flip-front{transform:rotateY(180deg)}
.lcard.live-card.live-storage-flip .live-flip-front{background:transparent}
.lcard.live-card .live-flip-back .card-back-fill,
.lcard.live-card .live-flip-back > .back.live-back{width:100%;height:100%}
.card-art.live-sideways,
.card-landscape-in-portrait{
  position:absolute;left:50%;top:50%;
  width:calc(100% * 88 / 63);height:calc(100% * 63 / 88);
  transform:translate(-50%, -50%) rotate(90deg);transform-origin:center center;
  overflow:hidden;border-radius:3px;
}
.card-art.live-sideways > img,
.card-art.live-sideways > .noimg,
.card-landscape-in-portrait > img,
.card-landscape-in-portrait > .noimg{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:none!important;aspect-ratio:unset;max-width:none;flex-shrink:0;display:block;
}
.hcard{
  height:calc(var(--hand-strip-h) - 28px);width:auto;aspect-ratio:63/88;
  border-radius:4px;border:2px solid transparent;
  position:relative;cursor:pointer;flex-shrink:0;overflow:hidden;
  container-type:inline-size;
  touch-action:manipulation;-webkit-touch-callout:none;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.hcard.stack-shift-anim{
  transition:transform var(--fan-shift-ms) cubic-bezier(.25,.9,.25,1),
              box-shadow .15s,border-color .15s;
}
.hcard.card-live-hand{overflow:hidden}
.hcard.card-live-hand .card-art.live-sideways,
.hcard.card-live-hand .card-landscape-in-portrait{
  will-change:transform;
}
.hcard:not(.card-live-hand) img{width:100%;height:100%;object-fit:cover}
.hcard:not(.play-sel):hover{transform:translateY(-6px);z-index:5}
.hcard.hover-sel:not(.play-sel){border-color:rgba(255,107,168,.45);transform:translateY(-8px);z-index:6;box-shadow:0 0 10px rgba(255,107,168,.35)}
html:not(.foil-fx-off) #screen-game .hcard.card-tilt-enabled.hover-sel:not(.play-sel):not(.foil-tilt-hover){
  transform:translateY(-8px);border-color:rgba(255,107,168,.45);box-shadow:0 0 10px rgba(255,107,168,.35);
}
html:not(.foil-fx-off) #screen-game .hcard.card-tilt-enabled:not(.play-sel):hover{
  transform:translateY(-4px);
}
.hcard.play-sel{border-color:rgba(56,161,105,.9);transform:translateY(-28px);z-index:24;
  box-shadow:0 0 22px rgba(56,161,105,.6),0 10px 28px rgba(0,0,0,.5)}
.hcard.playable{box-shadow:0 0 6px rgba(56,161,105,.55);border-color:rgba(56,161,105,.5)}
.hcard.playable.play-sel{box-shadow:0 0 22px rgba(56,161,105,.65),0 10px 28px rgba(0,0,0,.5)}
.hcard.card-live-hand .tbadge,.hcard.card-live-hand .ccost{z-index:2}
.hcard.hand-draw-flip{perspective:820px;overflow:visible;transform-style:preserve-3d}
.hcard.hand-draw-flip .hand-flip-inner{
  position:relative;width:100%;height:100%;min-height:100%;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,.2,.2,1);
}
.hcard.hand-draw-flip.revealed .hand-flip-inner{transform:rotateY(180deg)}
.hcard.hand-skill-revealed,.opp-hand-card.hand-skill-revealed{
  box-shadow:0 0 0 2px rgba(251,191,36,.75),0 0 14px rgba(251,191,36,.35);
}
.opp-hand-card.hand-draw-flip.revealed .hand-flip-inner{transform:rotateY(180deg)}
.hcard.hand-draw-flip .hand-flip-face{
  position:absolute;inset:0;border-radius:4px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
}
.hcard.hand-draw-flip .hand-flip-back{
  transform:rotateY(0deg);
  background:url('../../lltcg-back.png') center/cover no-repeat;
}
.hcard.hand-draw-flip .hand-flip-front{transform:rotateY(180deg)}
.hcard.hand-draw-flip .hand-flip-back .back.live-back{width:100%;height:100%}
.hcard.hand-draw-flip .tbadge,.hcard.hand-draw-flip .ccost{z-index:3}
.cpills{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;width:100%}
.cpill{
  flex:1 1 calc(50% - 4px);min-width:calc(50% - 4px);
  display:flex;align-items:center;justify-content:center;gap:5px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;
  padding:7px 10px;font-size:13px;color:rgba(255,255,255,.72);
}
.cpill b{font-weight:800;color:#fff;font-size:15px}
.cpill .pill-lbl{font-weight:800;color:rgba(255,255,255,.62);letter-spacing:.02em}
.cpill.nrg b{color:#FBBF24}
.snum{font-family:'Fredoka One',cursive;font-size:22px;line-height:1}
.snum.mine{color:var(--pink)}.snum.opp{color:rgba(255,255,255,.45)}
.slbl{font-size:9px;font-weight:800;text-transform:uppercase;color:rgba(255,255,255,.35)}
.vssep{font-family:'Fredoka One',cursive;font-size:14px;color:rgba(255,255,255,.2)}
.btn-phase{padding:7px 14px;border-radius:16px;font-size:12px;font-weight:800;
  background:linear-gradient(135deg,var(--pink),var(--pink-d));color:#fff;white-space:nowrap}
.btn-smol{padding:5px 10px;border-radius:14px;font-size:11px;font-weight:700;
  background:rgba(255,107,168,.12);border:1px solid rgba(255,107,168,.28);color:var(--pink-l)}
.btn-ghost{background:rgba(255,255,255,.07);color:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--rsm);font-weight:700}
.btn-danger{background:rgba(229,62,62,.14);color:#FC8181;border:1px solid rgba(229,62,62,.3);border-radius:var(--rsm);font-weight:700}
.tline{font-size:11px;color:rgba(255,255,255,.52);line-height:1.7}
.tline b{color:#fff}.tline .ap{color:var(--pink);font-weight:800}
.turn-block{padding:7px 10px}
.tline-inline{font-size:10px;line-height:1.35;white-space:normal}
.tline-inline .turn-k{font-weight:800;color:rgba(255,107,168,.75);text-transform:uppercase;letter-spacing:.6px;font-size:9px}
.tline-inline .turn-sep{color:rgba(255,255,255,.22);margin:0 2px}
.stage-board-panel{
  flex:0 0 auto;
  font-size:12px;color:rgba(255,255,255,.72);line-height:1.4;padding:10px 12px;
  overflow-x:hidden;
  scrollbar-gutter:stable;
}
.stage-board-panel.has-activatable-skills,
.stage-board-panel.has-active-effects{
  flex:0 1 auto;min-height:0;
  max-height:min(42vh,360px);
  overflow-y:auto;overscroll-behavior:contain;
}
.stage-board-panel h4{margin:0 0 8px;font-size:15px;font-weight:800;color:#fff;letter-spacing:.02em}
.stage-board-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.stage-board-side{display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}
.stage-board-side-lbl{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;
  color:rgba(255,107,168,.78);line-height:1.2;
}
.stage-board-side.opp .stage-board-side-lbl{color:rgba(186,228,255,.72)}
.stage-board-lbl{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.75px;
  color:rgba(255,107,168,.78);margin-bottom:4px;
}
.stage-board-lbl.opp{color:rgba(186,228,255,.72)}
.stage-board-hearts{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;gap:4px 8px;min-height:26px;width:100%;text-align:left}
.stage-board-hearts.empty{color:rgba(255,255,255,.38);font-size:12px;text-align:left}
.stage-board-hearts .heart-stat-row{display:inline-flex;align-items:center;gap:5px;font-size:17px;font-weight:800;color:#fff}
.stage-board-hearts .heart-stat-row .hicon{width:22px;height:22px}
.stage-board-yell{display:flex;align-items:center;gap:5px;font-weight:800;color:#fff;font-size:15px}
.stage-board-yell .bicon{width:20px;height:20px}
body.tutorial-mode:not(.tutorial-live-mode) #overlay-mull .btn-grad{opacity:.45;pointer-events:none}
body.tutorial-mode #overlay-mull.tut-mull-readonly .mullcard{pointer-events:none;cursor:default}
body.tutorial-mode #overlay-prompt.tut-prompt-readonly{pointer-events:none}
body.tutorial-mode #overlay-prompt.tut-prompt-readonly .btn-grad{opacity:.72;cursor:default}
body.tutorial-mode:not(.tutorial-live-mode) #overlay-coin{pointer-events:none}
.stage-board-abilities{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}
.stage-board-abilities[hidden]{display:none!important}
.stage-board-active{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}
.stage-board-active[hidden]{display:none!important}
.stage-active-item{margin-top:6px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.stage-active-item:first-child{margin-top:0}
.stage-active-who{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.55px;color:rgba(255,107,168,.78);margin-bottom:2px;line-height:1.25}
.stage-active-item.opp .stage-active-who{color:rgba(186,228,255,.72)}
.stage-active-text{font-size:11px;line-height:1.4;color:rgba(255,255,255,.82)}
.field-badge.field-score.score-boosted{outline:1px solid rgba(251,191,36,.45)}
.field-badge .badge-val-bonus{
  font-family:'Fredoka One',cursive;
  font-size:clamp(15px,4.5cqw,21px);font-weight:800;color:#FBBF24;
  text-shadow:0 0 2px #000,0 0 6px rgba(0,0,0,.95),0 1px 5px rgba(0,0,0,.92),0 2px 8px rgba(0,0,0,.88);
}
.stage-ability-item{margin-top:8px}
.stage-ability-item:first-child{margin-top:0}
.stage-ability-who{font-size:11px;font-weight:700;color:rgba(255,255,255,.55);margin-bottom:4px;line-height:1.3}
.btn-stage-ability{
  width:100%;text-align:left;display:flex;gap:8px;align-items:flex-start;
  padding:10px 12px;font-size:12px;line-height:1.45;border-radius:8px;
  background:rgba(255,107,168,.1);border:1px solid rgba(255,107,168,.28);color:#fff;cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease,filter .15s ease;
}
.btn-stage-ability:hover:not(:disabled){
  background:rgba(255,107,168,.2);border-color:rgba(255,107,168,.55);
  box-shadow:0 0 14px rgba(255,107,168,.22);
}
.btn-stage-ability:disabled{opacity:.46;cursor:not-allowed}
.btn-stage-ability .ticon{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.btn-stage-ability .stage-ability-desc{flex:1;min-width:0;font-size:12px;line-height:1.45;color:rgba(255,255,255,.92)}
.mslot.sb-skill-highlight{
  outline:3px solid rgba(255,107,168,.95);outline-offset:2px;
  filter:brightness(1.14) drop-shadow(0 0 16px rgba(255,107,168,.55));z-index:5;position:relative;
}

/* Zone positions — CSS fallback; playmat_zones.json overrides at runtime */
.z-my-success{left:3%;top:28.5%;width:12.9%;height:23.6%}
.z-my-live-0{left:24.6%;top:7.1%;width:12.9%;height:16.8%}
.z-my-live-1{left:44%;top:6.9%;width:12.9%;height:16.9%}
.z-my-live-2{left:63%;top:6.9%;width:12.9%;height:16.9%}
.z-my-stage-left{left:24.1%;top:36.1%;width:9.2%;height:23.4%}
.z-my-stage-center{left:45.1%;top:36.1%;width:9.3%;height:23.4%}
.z-my-stage-right{left:64.9%;top:36.1%;width:9.4%;height:23.4%}
.z-my-energy{left:21.5%;top:69.2%;width:57.4%;height:22%;overflow:visible}
.z-main-deck{left:86.7%;top:5.3%;width:9.3%;height:23.6%}
.z-waiting-room{left:86.7%;top:38.5%;width:9.3%;height:23.6%}
.z-energy-deck{left:86.7%;top:71.5%;width:9.4%;height:23.4%}
/* Opponent mat: 180° mirror (x' = 1-x-w, y' = 1-y-h); playmat_zones.json applies at runtime */
.z-opp-success{left:84.1%;top:47.9%;width:12.9%;height:23.6%}
.z-opp-live-0{left:62.6%;top:76.2%;width:12.9%;height:16.8%}
.z-opp-live-1{left:43.1%;top:76.2%;width:12.9%;height:16.9%}
.z-opp-live-2{left:24.1%;top:76.2%;width:12.9%;height:16.9%}
.z-opp-stage-left{left:66.7%;top:40.4%;width:9.2%;height:23.4%}
.z-opp-stage-center{left:45.6%;top:40.4%;width:9.3%;height:23.4%}
.z-opp-stage-right{left:25.7%;top:40.4%;width:9.4%;height:23.4%}
.z-opp-energy{left:21.1%;top:6.4%;width:57.4%;height:22%;overflow:visible}
.z-opp-main-deck{left:4%;top:71.2%;width:9.3%;height:23.6%}
.z-opp-waiting-room{left:4%;top:37.9%;width:9.3%;height:23.6%}
.z-opp-energy-deck{left:3.9%;top:5.1%;width:9.4%;height:23.4%}

.board,.game-root,.sidebar,.parea,.livecenter,.handbar,.pbar,.stage,.estrip,.handrow,.handlbl,
.view169-wrap,.view169-stage,.phase-hud,.player-hud,.vs-hud,.log-panel,.opp-strip{display:contents}
@keyframes dpulse{from{outline-color:rgba(255,107,168,.4)}to{outline-color:rgba(255,107,168,1)}}
@keyframes fdin{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.tbadge{position:absolute;top:3%;left:3%;font-size:clamp(5px,1.5cqw,8px);font-weight:800;
  padding:1px 3px;border-radius:2px;text-transform:uppercase;
  background:rgba(0,0,0,.65);color:#fff;pointer-events:none}
.tbadge.mb{background:rgba(255,107,168,.85)}
.tbadge.lv{background:rgba(251,191,36,.85);color:#1a0a0e}
.tbadge.en{background:rgba(56,161,105,.85)}
.ccost{position:absolute;top:3%;right:3%;min-width:clamp(12px,3.5cqw,16px);height:clamp(12px,3.5cqw,16px);border-radius:8px;
  background:rgba(0,0,0,.75);color:#fff;font-size:clamp(6px,1.8cqw,9px);font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:1px;padding:0 3px;pointer-events:none}
.ccost.ok{color:#68D391}.ccost.no{color:#FC8181}
.hcard.play-sel .ccost{
  min-width:clamp(24px,6cqw,32px);height:clamp(24px,6cqw,32px);border-radius:11px;
  font-size:clamp(12px,3.4cqw,16px);font-weight:900;
  border:1px solid rgba(251,191,36,.58);
  box-shadow:0 0 14px rgba(251,191,36,.42);
  top:2%;right:2%;z-index:3;
  transition:border-color .15s ease,box-shadow .15s ease,color .15s ease;
}
.hcard.play-sel .ccost.cost-discount{
  border-color:rgba(134,239,172,.78);
  box-shadow:0 0 16px rgba(74,222,128,.48);
  color:#86EFAC;
}
.hcard.play-sel .ccost .ticon{width:clamp(13px,3.6cqw,17px);height:clamp(13px,3.6cqw,17px)}
.noimg{width:100%;height:100%;background:linear-gradient(135deg,var(--bg-card),var(--bg-mid));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:3px}
.niname{font-size:clamp(5px,1.8cqw,8px);font-weight:800;color:rgba(255,255,255,.85);
  text-align:center;line-height:1.2;word-break:break-word}
.nihearts{display:flex;gap:1px;flex-wrap:wrap;justify-content:center}
.sbox .sv{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
.sbox .sv.heart-stat{gap:4px 8px;flex-wrap:wrap}
.sbox .heart-stat-row{display:inline-flex;align-items:center;gap:3px;font-weight:800;color:#fff}
.sbox .stat-mod-bonus,
.sbox .heart-stat-row.heart-stat-mod .stat-mod-bonus{
  font-family:'Fredoka One',cursive;
  font-weight:800;color:#FBBF24;line-height:1;
  text-shadow:0 0 2px #000,0 0 6px rgba(0,0,0,.95),0 1px 5px rgba(0,0,0,.92);
}
.sbox .heart-stat-row.heart-stat-mod{gap:2px}
/* Match blade / blade-heart icons to colored hearts in card info stats. */
.sbox .heart-stat-row .hicon,
.sbox .blade-heart-stat .hicon,
.sbox .blade-heart-stat .hicon.bheart,
.sbox .sv > .ticon,
.sbox .sv > .bicon{
  width:clamp(12px,3.2cqw,16px);height:clamp(12px,3.2cqw,16px)
}
.niscore{display:flex;align-items:center;gap:2px;justify-content:center}
.hdot{display:inline-flex;width:9px;height:9px;border-radius:50%;flex-shrink:0}
.hdot.lg{width:13px;height:13px}
.hdot.pink{background:var(--h-pink)}.hdot.red{background:var(--h-red)}
.hdot.yellow{background:var(--h-yellow)}.hdot.green{background:var(--h-green)}
.hdot.blue{background:var(--h-blue)}.hdot.purple{background:var(--h-purple)}
.hdot.any,.hdot.gray{background:var(--h-any)}
.le{font-size:12px;color:rgba(255,255,255,.68);line-height:1.45;padding:4px 6px;border-radius:4px}
.le.sys{color:var(--pink-l);font-weight:700;background:rgba(255,107,168,.08);border-left:2px solid rgba(255,107,168,.38)}
.le.sys.le-divider{
  font-size:14px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  text-align:center;margin:6px 0 5px;padding:7px 10px;
  border-left:none;border-radius:4px;
  background:rgba(255,107,168,.12);
  color:var(--pink-l);
}
.le.warn{color:#FC8181;background:rgba(229,62,62,.07)}
.le.good{color:#68D391;background:rgba(56,161,105,.07)}
.le.action{color:rgba(255,255,255,.72);border-left:2px solid rgba(255,255,255,.18);padding-left:6px}
.le.effect{color:rgba(255,220,240,.88);background:rgba(255,107,168,.06);border-left:2px solid rgba(255,107,168,.55);padding-left:6px}
.le.effect .fxn{color:var(--pink-l);font-weight:700}
.le.effect.fx-hdr{font-weight:700;color:var(--pink-l);margin-top:3px}
.le.log-in{animation:logIn .35s ease both}
.le.log-spectacle-surface{box-shadow:inset 0 0 0 1px rgba(255,107,168,.35);background:rgba(255,107,168,.1)!important}
@keyframes logIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.card-flight-layer{position:fixed;inset:0;pointer-events:none;z-index:6500;overflow:hidden}
.card-flight{
  position:absolute;left:0;top:0;border-radius:5px;overflow:hidden;
  box-shadow:0 10px 36px rgba(0,0,0,.55),0 0 0 1px rgba(255,107,168,.25);
  transition:transform var(--flight-ms,300ms) cubic-bezier(.22,1,.36,1),opacity var(--flight-ms,300ms) ease;
  will-change:transform,opacity;
}
.card-flight .flight-inner{
  width:100%;height:100%;position:relative;
  transform-origin:center center;
  transition:transform var(--flight-ms,300ms) cubic-bezier(.22,1,.36,1);
}
.card-flight.flight-portrait > .flight-inner > img.card-face-fill,
.card-flight.flight-portrait > .flight-inner > .card-face-fill.noimg{width:100%;height:100%;object-fit:cover;display:block}
.card-flight .flight-inner .card-art.energy-sideways,
.card-flight .flight-inner .card-art.energy-chip-face{
  position:absolute;left:50%;top:50%;
  width:calc(100% * 63 / 88);height:calc(100% * 88 / 63);
  transform:translate(-50%, -50%) rotate(90deg);transform-origin:center center;
  overflow:hidden;border-radius:3px;
}
.card-flight .flight-inner .card-art.energy-chip-face:not(.energy-sideways){
  width:100%;height:100%;transform:translate(-50%, -50%) rotate(0deg);
}
.card-flight .flight-inner .card-art.energy-sideways > img,
.card-flight .flight-inner .card-art.energy-sideways > .noimg,
.card-flight .flight-inner .card-art.energy-chip-face > img,
.card-flight .flight-inner .card-art.energy-chip-face > .noimg{
  width:100%;height:100%;object-fit:cover;display:block;transform:none!important;
}
.card-flight.flight-landscape > .flight-inner > img.card-face-fill,
.card-flight.flight-landscape > .flight-inner > .card-face-fill.noimg,
.card-flight.flight-deck-live > .flight-inner > img.card-face-fill,
.card-flight.flight-deck-live > .flight-inner > .card-face-fill.noimg{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transform:none!important;aspect-ratio:unset;max-width:none;
}
.card-flight .flight-inner .card-landscape-in-portrait,
.card-flight .flight-inner .card-art.live-sideways{
  position:absolute;left:50%;top:50%;
  width:calc(100% * 88 / 63);height:calc(100% * 63 / 88);
  transform:translate(-50%, -50%) rotate(90deg);transform-origin:center center;
  overflow:hidden;
}
/* Landscape-native Live art fills a landscape flight shell without rotation.
   Do NOT flatten .card-portrait-in-landscape here — face-down Live backs (and
   member art) must keep the 90° spin so portrait art sits correctly in the
   landscape borders (opp hand → live storage).
   Deck/WR (.flight-deck-live) are portrait piles — keep the 90° Live wrapper. */
.card-flight.flight-landscape .flight-inner .card-landscape-in-portrait,
.card-flight.flight-landscape .flight-inner .card-art.live-sideways{
  width:100%;height:100%;transform:translate(-50%, -50%) rotate(0deg);
}
.card-flight .flight-inner .card-portrait-in-landscape{
  position:absolute;left:50%;top:50%;
  width:calc(100% * 63 / 88);height:calc(100% * 88 / 63);
  transform:translate(-50%, -50%) rotate(90deg);transform-origin:center center;
  overflow:hidden;
}
.card-flight .flight-inner .card-portrait-in-landscape > .back.live-back,
.card-flight .flight-inner .card-portrait-in-landscape > .card-back-fill{
  width:100%;height:100%;border-radius:4px;
}
.card-flight .flight-inner .card-landscape-in-portrait > img,
.card-flight .flight-inner .card-landscape-in-portrait > .noimg,
.card-flight .flight-inner .card-art.live-sideways > img,
.card-flight .flight-inner .card-art.live-sideways > .noimg{
  width:100%;height:100%;object-fit:cover;display:block;transform:none!important;
  aspect-ratio:unset;max-width:none;flex-shrink:0;
}
.card-flight.art-spin-morph{
  transition:transform var(--flight-ms,300ms) cubic-bezier(.22,1,.36,1),
             width var(--flight-ms,300ms) cubic-bezier(.22,1,.36,1),
             height var(--flight-ms,300ms) cubic-bezier(.22,1,.36,1),
             opacity var(--flight-ms,300ms) ease;
}
.card-flight.art-spin-morph .flight-inner .card-landscape-in-portrait,
.card-flight.art-spin-morph .flight-inner .card-art.live-sideways,
.card-flight.art-spin-morph .flight-inner .card-portrait-in-landscape{
  transition:transform var(--flight-ms,300ms) cubic-bezier(.22,1,.36,1),
              width var(--flight-ms,300ms) cubic-bezier(.22,1,.36,1),
              height var(--flight-ms,300ms) cubic-bezier(.22,1,.36,1);
}
.card-flight .flight-inner .card-portrait-in-landscape.member-flight-from-portrait{
  width:100%;height:100%;
  transform:translate(-50%, -50%) rotate(0deg);
}
.card-flight.member-storage-morph .flight-inner{
  transform:none!important;
}
.card-flight.member-shell-spin{
  transition:transform var(--flight-ms,300ms) cubic-bezier(.22,1,.36,1),
             width var(--flight-ms,300ms) cubic-bezier(.22,1,.36,1),
             height var(--flight-ms,300ms) cubic-bezier(.22,1,.36,1),
             opacity var(--flight-ms,300ms) ease;
}
.card-flight.member-shell-spin .flight-inner .card-portrait-in-landscape{
  width:100%;height:100%;
  transform:translate(-50%, -50%) rotate(0deg);
}
.card-flight.member-storage-morph .flight-inner .card-portrait-in-landscape.storage-member-art > img,
.card-flight.member-storage-morph .flight-inner .card-portrait-in-landscape.storage-member-art > .noimg,
.card-flight.member-storage-morph .flight-inner .card-portrait-in-landscape.member-flight-from-portrait > .back,
.card-flight.member-storage-morph .flight-inner .card-portrait-in-landscape.member-flight-from-portrait > .card-back-fill{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;
}
.card-flight.card-spin-morph .flight-inner{
  transition:transform var(--flight-ms,300ms) cubic-bezier(.22,1,.36,1);
}
.card-arriving{opacity:0!important;pointer-events:none;transition:none!important}
.hcard,.lcard.live-card,.mslot.occupied{transition:opacity 70ms ease}

/* ─── MODALS */
.overlay{position:fixed;inset:0;background:rgba(4,10,24,.82);backdrop-filter:blur(4px);z-index:900;
  display:none;align-items:center;justify-content:center;
  padding:16px;backdrop-filter:blur(4px)}
.overlay.open{display:flex}
/* Skill resolve prompts: full-screen blur/dim with a feathered cutout so hand cards stay sharp. */
body:has(.overlay.skill-hand-preserve.open)::before{
  content:'';
  position:fixed;inset:0;z-index:899;pointer-events:auto;
  background:rgba(4,10,24,.82);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  --skill-hand-cut:calc(var(--skill-hand-preserve-h) + env(safe-area-inset-bottom,0px));
  --skill-hand-feather:var(--skill-hand-blur-feather,72px);
  mask-image:linear-gradient(
    to bottom,
    #000 0,
    #000 max(0px,calc(100% - var(--skill-hand-cut) - var(--skill-hand-feather))),
    rgba(0,0,0,.72) calc(100% - var(--skill-hand-cut) - calc(var(--skill-hand-feather) * .45)),
    rgba(0,0,0,.28) calc(100% - var(--skill-hand-cut) - calc(var(--skill-hand-feather) * .12)),
    transparent calc(100% - var(--skill-hand-cut))
  );
  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0,
    #000 max(0px,calc(100% - var(--skill-hand-cut) - var(--skill-hand-feather))),
    rgba(0,0,0,.72) calc(100% - var(--skill-hand-cut) - calc(var(--skill-hand-feather) * .45)),
    rgba(0,0,0,.28) calc(100% - var(--skill-hand-cut) - calc(var(--skill-hand-feather) * .12)),
    transparent calc(100% - var(--skill-hand-cut))
  );
}
.overlay.skill-hand-preserve.open{
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  pointer-events:none;
}
.overlay.skill-hand-preserve.open .mbox{pointer-events:auto}
body.prompt-board-peek .overlay.skill-hand-preserve.open,
body.prompt-board-peek .overlay.hand-pick-overlay.open,
body.prompt-board-peek #overlay-prompt.open,
body.prompt-board-peek #overlay-pick.open,
body.prompt-board-peek #overlay-hand-pick.open,
body.prompt-board-peek #overlay-heart.open,
body.prompt-board-peek #overlay-surveil.open{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
body.prompt-board-peek:has(.overlay.skill-hand-preserve.open)::before,
body.prompt-board-peek:has(.overlay.hand-pick-overlay.open)::before{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  mask-image:none!important;-webkit-mask-image:none!important;
}
body.prompt-board-peek .overlay.hand-pick-overlay.open .hand-pick-shell,
body.prompt-board-peek .overlay.skill-hand-preserve.open .mbox{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
}
.prompt-board-peek-rail{
  display:none;position:fixed;left:0;top:0;bottom:0;width:44px;z-index:98000;
  pointer-events:auto;cursor:pointer;align-items:center;justify-content:center;
  background:linear-gradient(90deg,rgba(8,12,24,.72) 0%,rgba(8,12,24,.22) 70%,transparent 100%);
  box-shadow:inset 3px 0 0 rgba(255,107,168,.85);
}
body.prompt-board-peek-rail-on .prompt-board-peek-rail{display:flex}
body.prompt-board-peek .prompt-board-peek-rail{
  background:linear-gradient(90deg,rgba(255,107,168,.28) 0%,rgba(8,12,24,.12) 70%,transparent 100%);
  box-shadow:inset 3px 0 0 #FBBF24;
}
.prompt-board-peek-rail-label{
  writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);
  pointer-events:none;text-shadow:0 1px 4px #000;
}
html.tcg-portrait-play .prompt-board-peek-rail,
html.tcg-mobile-viewport .prompt-board-peek-rail{display:none!important}
body:has(.overlay.skill-hand-preserve.open) #screen-game .my-hand-strip{
  position:relative;z-index:915;
}
body:has(.overlay.skill-hand-preserve.open) #screen-game .playmat-column.play-selecting .play-cost-hud,
body:has(.overlay.skill-hand-preserve.open) #screen-game .playmat-column.live-selecting .live-score-hud{
  z-index:916;pointer-events:auto;
}
#overlay-zone{z-index:910}
#modal-card{z-index:940}
body.mulligan-card-preview #modal-card,
body.deck-card-preview #modal-card{z-index:970}
.mbox{background:var(--ui-panel-bg);backdrop-filter:blur(14px);
  border:1px solid var(--ui-panel-border-strong);border-radius:16px;padding:22px;
  max-height:92vh;overflow-y:auto;position:relative;box-shadow:var(--ui-panel-glow)}
.mcls{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.08);
  border:none;color:rgba(255,255,255,.55);width:26px;height:26px;border-radius:50%;
  font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mcls:hover{background:rgba(255,255,255,.16);color:#fff}

/* Card detail */
#modal-card .mbox{max-width:420px;width:100%}
.cdimg{width:min(168px,48vw);aspect-ratio:63/88;border-radius:7px;margin:0 auto 12px;
  display:block;object-fit:cover;box-shadow:0 4px 18px rgba(0,0,0,.5)}
.cdimg.landscape{width:min(280px,88vw);aspect-ratio:88/63;height:auto;object-fit:contain}
.cdname{font-family:'Fredoka One',cursive;font-size:20px;color:#fff;
  text-align:center;margin-bottom:2px}
.cdsub{font-size:10px;color:var(--pink-l);text-align:center;margin-bottom:12px}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:11px}
.sbox{background:rgba(255,255,255,.05);border-radius:7px;padding:7px;text-align:center}
.sbox .sv{font-family:'Fredoka One',cursive;font-size:17px;color:#fff}
.sbox .sk{font-size:9px;color:rgba(255,255,255,.38);text-transform:uppercase;letter-spacing:.4px;margin-top:1px}
.ctxt{background:rgba(255,255,255,.04);border-radius:7px;padding:9px 11px;
  font-size:11px;color:rgba(255,255,255,.73);line-height:1.6;margin-bottom:11px;white-space:pre-wrap}
.card-hover-panel .hc-text .rule-kw,
.ctxt .rule-kw,
.prompt-effect-text .rule-kw,
.stage-ability-desc .rule-kw{
  display:inline-flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;
  max-width:100%;vertical-align:middle;
  font-weight:700;cursor:help;
  border-bottom:1px dotted rgba(255,255,255,.28);
}
.rule-kw-label{font-weight:700}
.rule-kw:hover,.rule-kw:focus-visible{border-bottom-color:rgba(255,255,255,.55)}
.skill-type-icons{
  display:inline-flex;align-items:center;flex-shrink:0;flex-wrap:nowrap;
  height:1.05em;margin-right:3px;line-height:0;
}
.skill-type-icons img{height:100%;width:auto;display:block}
.btn-stage-ability .skill-type-icons{height:18px;margin-top:1px;margin-right:5px}
.rule-kw--on-enter .rule-kw-label{color:#86EFAC}
.rule-kw--on-leave .rule-kw-label{color:#FCA5A5}
.rule-kw--live-start .rule-kw-label{color:#FBBF24}
.rule-kw--live-success .rule-kw-label{color:#F472B6}
.rule-kw--activated .rule-kw-label{color:#FB923C}
.rule-kw--always .rule-kw-label{color:#93C5FD}
.rule-kw--automatic .rule-kw-label{color:#C4B5FD}
.rule-kw--once-per-turn .rule-kw-label{color:rgba(255,255,255,.78)}
.rule-kw--twice-per-turn .rule-kw-label{color:rgba(255,255,255,.78)}
.rule-kw--center .rule-kw-label{color:#FDE047}
.rule-kw--yell .rule-kw-label{color:#7AE582}
.rule-kw--wait .rule-kw-label{color:#38BDF8}
.card-hover-panel .hc-text .rule-kw--on-enter,
.ctxt .rule-kw--on-enter{border-bottom-color:rgba(134,239,172,.42)}
.card-hover-panel .hc-text .rule-kw--live-start,
.ctxt .rule-kw--live-start{border-bottom-color:rgba(251,191,36,.42)}
.card-hover-panel .hc-text .rule-kw--activated,
.ctxt .rule-kw--activated{border-bottom-color:rgba(251,146,60,.42)}
.card-hover-panel .hc-text .rule-kw--automatic,
.ctxt .rule-kw--automatic{border-bottom-color:rgba(196,181,253,.42)}
.card-hover-panel .hc-text .rule-kw--yell,
.ctxt .rule-kw--yell{
  color:#7AE582;border-bottom-color:rgba(122,229,130,.42);
}
.card-hover-panel .hc-text .rule-kw--yell:hover,
.ctxt .rule-kw--yell:hover{color:#9AE6B4;border-bottom-color:rgba(154,230,180,.65)}
.card-hover-panel .hc-text .rule-kw--wait,
.ctxt .rule-kw--wait,
.prompt-effect-text .rule-kw--wait,
.stage-ability-desc .rule-kw--wait{
  color:#38BDF8;border-bottom-color:rgba(56,189,248,.42);
}
.card-hover-panel .hc-text .rule-kw--wait:hover,
.ctxt .rule-kw--wait:hover,
.prompt-effect-text .rule-kw--wait:hover,
.stage-ability-desc .rule-kw--wait:hover{
  color:#7DD3FC;border-bottom-color:rgba(125,211,252,.65);
}
.rule-kw-tip{
  position:fixed;z-index:9000;max-width:min(300px,88vw);padding:11px 13px;
  background:rgba(6,14,28,.97);border:1px solid rgba(104,211,145,.38);
  border-radius:11px;box-shadow:0 14px 40px rgba(0,0,0,.58),0 0 0 1px rgba(104,211,145,.08);
  pointer-events:none;opacity:0;transform:translateY(5px);
  transition:opacity .14s ease,transform .14s ease;
}
.rule-kw-tip.show{opacity:1;transform:translateY(0)}
.rule-kw-tip .rkt-head{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;margin-bottom:5px}
.rule-kw-tip .rkt-head .skill-type-icons{height:16px;margin-right:0}
.rule-kw-tip .rkt-title{
  font-family:'Fredoka One',cursive;font-size:13px;color:#7AE582;margin-bottom:0;
}
.rule-kw-tip .rkt-body{font-size:11px;line-height:1.48;color:rgba(255,255,255,.78)}
.mbtns{display:flex;flex-direction:column;gap:6px}
.slotrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}

/* Mulligan */
#overlay-mull .mbox{max-width:860px;width:100%;text-align:center}
#overlay-mull h2{font-family:'Fredoka One',cursive;font-size:24px;color:var(--pink);margin-bottom:5px}
#overlay-mull p{font-size:12px;color:rgba(255,255,255,.45);margin-bottom:18px}
.mullgrid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:18px}
.pickgrid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px 0}
.menu-card.portrait,.mullcard.portrait,.pickcard.portrait,.surveilcard.portrait{
  width:calc(var(--menu-card-h) * 63 / 88);height:var(--menu-card-h);
}
.menu-card.landscape,.mullcard.landscape,.pickcard.landscape,.surveilcard.landscape,.zthumb.landscape{
  width:calc(var(--menu-card-h) * 88 / 63);height:var(--menu-card-h);
}
.zthumb.portrait{width:calc(var(--menu-card-h) * 63 / 88 * 0.82);height:calc(var(--menu-card-h) * 0.82)}
.pickcard,.surveilcard,.mullcard,.menu-card{position:relative;border-radius:6px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;transition:border .15s,transform .15s,box-shadow .15s;flex-shrink:0}
.pickcard.menu-card-hold-pending,.hand-pick-card.menu-card-hold-pending,.surveilcard.menu-card-hold-pending,.zthumb.menu-card-hold-pending{touch-action:none}
.pickcard.sel,.surveilcard.on-deck,.menu-card.sel{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}
.pick-grid-order{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:flex-start}
.pick-order-item{display:flex;flex-direction:column;align-items:center;gap:6px;width:92px}
.pick-order-badge{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;background:var(--pink);color:#1a1020;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.pick-order-controls{display:flex;gap:4px;width:100%;justify-content:center}
.pick-order-btn{min-width:34px;padding:4px 0;font-size:14px;line-height:1.1}
.pickcard.ineligible{opacity:.38;filter:grayscale(.35);cursor:not-allowed}
.pickcard.ineligible.sel{border-color:rgba(255,255,255,.2);box-shadow:none}
.pickcard.hidden-hand-pick{
  width:calc(var(--menu-card-h) * 63 / 88);height:var(--menu-card-h);
  background:url('../../lltcg-back.png') center/cover no-repeat;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.pickcard.hidden-hand-pick.sel{border-color:var(--pink);box-shadow:0 0 0 2px var(--pink),0 0 14px rgba(255,107,168,.45)}
.pickcard img,.surveilcard img,.mullcard img,.menu-card img,.zthumb img{width:100%;height:100%;object-fit:cover}
.pickcard .noimg,.surveilcard .noimg,.mullcard .noimg,.menu-card .noimg,.zthumb .noimg{width:100%;height:100%}

/* Full-screen hand discard picker */
.overlay.hand-pick-overlay{
  background:rgba(2,6,18,.94);backdrop-filter:blur(10px);z-index:960;
  align-items:flex-end;padding:0 0 max(28px,5vh);
}
.hand-pick-shell{width:100%;max-width:1040px;text-align:center;padding:0 20px 8px}
.hand-pick-shell h2{font-size:clamp(20px,3vw,26px);margin:0 0 8px;color:#fff;font-weight:700}
.hand-pick-shell .hpick-msg{font-size:clamp(14px,2vw,17px);color:rgba(255,255,255,.78);margin:0 0 22px;line-height:1.45}
.hand-pick-fan{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(12px,2vw,20px);
  margin:0 auto 18px;min-height:calc(var(--hand-pick-card-h) + 12px);
}
.hand-pick-card{
  --hand-pick-card-h:clamp(130px,22vh,210px);
  position:relative;height:var(--hand-pick-card-h);width:calc(var(--hand-pick-card-h)*0.714);
  border-radius:8px;overflow:hidden;cursor:pointer;border:3px solid rgba(255,255,255,.18);
  box-shadow:0 8px 28px rgba(0,0,0,.55);transition:transform .15s,border-color .15s,box-shadow .15s;
}
.hand-pick-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.45)}
.hand-pick-card.sel{border-color:var(--pink);box-shadow:0 0 0 2px var(--pink),0 12px 32px rgba(255,107,168,.35);transform:translateY(-10px)}
.hand-pick-card:not(.card-live-hand) img,.hand-pick-card:not(.card-live-hand) .noimg{width:100%;height:100%;object-fit:cover}
.hand-pick-card.card-live-hand{overflow:hidden}
.hand-pick-count{font-size:13px;color:rgba(255,255,255,.55);margin-bottom:14px}
.hand-pick-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.surveil-zones{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:10px;align-items:flex-start}
.surveil-zone{min-width:200px;flex:1 1 280px;max-width:640px;background:rgba(0,0,0,.22);border-radius:12px;padding:14px 16px;border:1px dashed rgba(255,255,255,.14)}
.surveil-zone h3{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.45);margin:0 0 10px;text-align:center}
.surveil-deck-slots{
  display:flex;gap:clamp(18px,4vw,32px);justify-content:space-evenly;align-items:flex-end;
  flex-wrap:nowrap;width:100%;min-height:calc(var(--menu-card-h) + 28px);padding:0 6px;
}
.surveil-slot{
  position:relative;flex:0 0 auto;width:calc(var(--menu-card-w) + 14px);
  min-height:calc(var(--menu-card-h) + 24px);
  display:flex;align-items:flex-end;justify-content:center;padding-top:18px;
}
.surveil-slot-num{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  font-family:'Fredoka One',cursive;font-size:15px;color:var(--pink-l);
  text-shadow:0 0 8px rgba(0,0,0,.8);pointer-events:none;z-index:1;
}
.surveil-slot-drop{
  width:var(--menu-card-w);height:var(--menu-card-h);
  border-radius:6px;border:2px dashed rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);transition:border-color .15s,background .15s;
}
.surveil-slot.drop-target .surveil-slot-drop{border-color:var(--pink);background:rgba(255,107,168,.12)}
.surveil-slot.has-card .surveil-slot-drop{border-style:solid;border-color:rgba(255,255,255,.12);background:transparent}
.surveilcard{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:var(--menu-card-w);height:var(--menu-card-h);z-index:2;
  touch-action:none;user-select:none;
  transition:transform var(--fan-shift-ms) cubic-bezier(.25,.9,.25,1),
              left var(--fan-shift-ms) cubic-bezier(.25,.9,.25,1),
              top var(--fan-shift-ms) cubic-bezier(.25,.9,.25,1);
}
.surveil-wr-drop .surveilcard{
  position:relative;left:auto;bottom:auto;transform:none;
  transition:transform var(--fan-shift-ms) cubic-bezier(.25,.9,.25,1),
              left var(--fan-shift-ms) cubic-bezier(.25,.9,.25,1),
              top var(--fan-shift-ms) cubic-bezier(.25,.9,.25,1);
}
.surveilcard.sel{border-color:var(--pink);box-shadow:0 0 0 2px var(--pink),0 8px 24px rgba(255,107,168,.45);z-index:4}
.surveilcard.dragging{opacity:.45;transform:translateX(-50%) scale(.96)}
.surveil-wr-drop{
  min-height:calc(var(--menu-card-h) + 16px);border-radius:10px;border:2px dashed rgba(255,255,255,.16);
  background:rgba(0,0,0,.18);padding:10px;display:flex;flex-wrap:wrap;gap:8px;
  justify-content:center;align-content:flex-start;transition:border-color .15s,background .15s;
}
.surveil-wr-drop.drop-target{border-color:var(--pink);background:rgba(255,107,168,.1)}
#overlay-surveil.return-all .surveil-wr-zone{display:none}
.surveil-hint{font-size:11px;color:rgba(255,255,255,.42);margin-bottom:8px;line-height:1.45;text-align:center}
.heartpick{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.heartpick button{min-width:88px}
.mullcard:hover{transform:translateY(-5px)}
.mullcard.mk{border-color:var(--pink);opacity:.52}
.mullmark{position:absolute;inset:0;background:rgba(214,51,132,.52);
  display:none;align-items:center;justify-content:center;font-size:20px;color:#fff;z-index:3}
.mullcard.mk .mullmark{display:flex}

/* Live set */
#overlay-live .mbox{max-width:820px;width:100%;text-align:center}
#overlay-live h2{font-family:'Fredoka One',cursive;font-size:21px;color:var(--pink);margin-bottom:5px}
#overlay-live p{font-size:11px;color:rgba(255,255,255,.42);margin-bottom:12px}
.lselrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  min-height:calc(var(--menu-card-h) + 12px);margin-bottom:10px;align-items:flex-end}
.lselrow .menu-card.sel{border-color:var(--pink);transform:translateY(-8px);
  box-shadow:0 0 12px rgba(255,107,168,.55);z-index:2}
.lselcount{font-size:12px;color:rgba(255,255,255,.42);margin-bottom:11px}
.lselcount span{font-family:'Fredoka One',cursive;font-size:20px;color:var(--pink)}

/* Zone viewer */
#overlay-zone .mbox{max-width:780px;width:100%}
#overlay-zone h2{font-family:'Fredoka One',cursive;font-size:19px;color:var(--pink);
  margin-bottom:11px;text-align:center}
.zonegrid{display:flex;flex-wrap:wrap;gap:8px;max-height:420px;overflow-y:auto}
.zthumb{border-radius:4px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,107,168,.2);transition:all .15s;flex-shrink:0}

.zthumb:hover{transform:translateY(-4px);border-color:var(--pink)}

/* Toast — hidden off-screen until .show; :empty avoids a blank pill if something toggles show without text */
.toast{position:fixed;top:18px;left:50%;
  transform:translateX(-50%) translateY(-65px);
  background:linear-gradient(135deg,var(--pink-d),var(--pink-dd));
  color:#fff;font-family:'Fredoka One',cursive;font-size:15px;
  padding:11px 22px;border-radius:40px;
  box-shadow:0 6px 22px rgba(214,51,132,.42);
  z-index:5000;white-space:nowrap;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.toast:empty{display:none}
.toast.show{transform:translateX(-50%) translateY(0)}
body.missions-overlay-open .toast,
body.news-overlay-open .toast{z-index:8900}

#overlay-api-error{z-index:9800}
#overlay-api-error .mbox{max-width:min(420px,92vw);width:100%;text-align:center;padding:26px 22px 20px}
#overlay-api-error .api-error-title{
  font-family:'Fredoka One',cursive;font-size:22px;color:#fff;margin:0 0 10px;
}
#overlay-api-error .api-error-msg{
  font-size:13px;color:rgba(255,255,255,.88);line-height:1.55;margin:0 0 10px;white-space:pre-wrap;
}
#overlay-api-error .api-error-hint{
  font-size:11px;color:rgba(255,255,255,.5);line-height:1.45;margin:0 0 18px;
}
#overlay-api-error .btn-grad{min-width:120px;margin:0 auto}

/* Center-screen game announcements — borderless outlined text */
#center-banner{
  position:fixed;left:50%;top:44%;z-index:6800;pointer-events:none;
  transform:translate(-50%,-50%);
  width:min(94vw,920px);
  visibility:hidden;opacity:0;
  text-align:center;
  transition:opacity .34s ease,visibility 0s linear .34s;
}
#center-banner.show{visibility:visible;opacity:1;transition:opacity .34s ease,visibility 0s}
#center-banner .cb-inner{
  background:none;border:none;border-radius:0;padding:0;
  box-shadow:none;backdrop-filter:none;
  width:100%;text-align:center;
}
#center-banner .cb-title{
  font-size:clamp(40px,9vw,84px);
  text-align:center;
}
#center-banner .cb-sub{
  margin-top:10px;font-family:'Zen Kaku Gothic New','Nunito',sans-serif;font-weight:700;
  font-size:clamp(14px,2.5vw,20px);letter-spacing:.06em;
  color:rgba(255,255,255,.88);line-height:1.35;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
  text-align:center;width:100%;
}
#center-banner .cb-detail{
  margin-top:8px;font-family:'Zen Kaku Gothic New','Nunito',sans-serif;font-weight:700;
  font-size:clamp(13px,2.2vw,18px);color:rgba(255,230,240,.92);letter-spacing:.04em;line-height:1.3;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
  text-align:center;width:100%;
}
#center-banner.kind-phase .cb-sub{display:none}

#opp-skill-wait{
  position:fixed;left:50%;top:38%;z-index:6755;pointer-events:none;
  transform:translate(-50%,-50%);
  visibility:hidden;
  max-width:min(92vw,780px);text-align:center;
}
#opp-skill-wait.show{visibility:visible}
#opp-skill-wait .osw-title{
  font-size:clamp(32px,7vw,64px);line-height:1.08;
  text-align:center;
}
#opp-skill-wait .osw-sub{
  margin-top:10px;font-family:'Zen Kaku Gothic New','Nunito',sans-serif;font-weight:700;
  font-size:clamp(14px,2.4vw,20px);letter-spacing:.04em;
  color:rgba(255,255,255,.86);line-height:1.3;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
#opp-skill-wait .osw-leave{
  display:inline-block;
  pointer-events:auto;
  margin-top:16px;
  min-height:44px;
  padding:10px 18px;
  border-radius:12px;
  border:1px solid rgba(255,180,180,.45);
  background:rgba(80,16,24,.92);
  color:#ffe8e8;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  touch-action:manipulation;
}
#opp-skill-wait .osw-leave[hidden]{display:none!important;}

#live-judge-overlay{
  position:fixed;inset:0;z-index:6750;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  visibility:hidden;
  background:transparent;
}
#live-judge-overlay::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:rgba(0,0,0,.38);opacity:0;
  transition:opacity .32s ease;
}
#live-judge-overlay.show{visibility:visible}
#live-judge-overlay.show::before{opacity:1}
#live-judge-overlay .ljo-inner{
  position:relative;z-index:1;
  background:rgba(6,14,28,.92);
  border:2px solid rgba(251,191,36,.55);
  border-radius:20px;padding:22px 34px 18px;
  box-shadow:0 0 0 1px rgba(251,191,36,.12),0 16px 48px rgba(0,0,0,.55);
  backdrop-filter:blur(10px);text-align:center;
  max-width:min(92vw,420px);
}
#live-judge-overlay .ljo-title{
  font-size:clamp(22px,4vw,32px);margin-bottom:4px;
}
#live-judge-overlay .ljo-scores .snum{font-size:clamp(32px,8vw,48px)}
#live-judge-overlay .judge-hint{
  margin-top:12px;padding:8px 12px;border-radius:10px;
  background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.28);
  font-size:11px;font-weight:700;line-height:1.45;color:rgba(255,255,255,.72);
  text-align:center;min-height:0;display:none;
}
#live-judge-overlay .judge-hint.show{display:block}
#live-judge-overlay .judge-hint.good{border-color:rgba(104,211,145,.35);background:rgba(104,211,145,.1);color:#9AE6B4}
#live-judge-overlay .judge-hint.bad{border-color:rgba(252,129,129,.35);background:rgba(252,129,129,.1);color:#FEB2B2}

/* ═══ PERFORMANCE SPECTACLE */
#perf-spectacle{
  --perf-member-w:clamp(100px,16vw,136px);
  --perf-col-side-inset:clamp(132px,23vw,218px);
  --perf-yell-rail-gap:clamp(18px,2.8vw,32px);
  --perf-rail-slot-w:calc(var(--perf-member-w) * 2 + 28px);
  position:fixed;inset:0;z-index:8700;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(10px,2vh,24px) clamp(10px,2vw,24px);
}
body.tutorial-mode.perf-spectacle-active #overlay-tutorial{z-index:8800}
body.perf-spectacle-active #tutorial-spotlight .tut-hole{fill:rgba(0,0,0,.28)}
#perf-spectacle.show{opacity:1;visibility:visible;pointer-events:none}
body.perf-spectacle-active #screen-game .game-wide-wrap,
body.perf-spectacle-active .game-root,
body.perf-spectacle-active .sidebar,
body.perf-spectacle-active .handbar,
body.perf-spectacle-active #screen-game .side-panel,
body.perf-spectacle-active #screen-game .playmat-column,
body.perf-spectacle-active #screen-game .hand-strip,
body.perf-spectacle-active #card-hover-panel{
  opacity:0!important;visibility:hidden!important;
  pointer-events:none!important;user-select:none;
  filter:none!important;
  transition:opacity .45s ease,visibility .45s ease;
}
body.perf-spectacle-active #live-judge-overlay{display:none!important}
body.perf-spectacle-active #center-banner{
  left:50%;right:auto;
  transform:translate(-50%,-50%);
  top:clamp(30%,36vh,40%);
}
body.perf-spectacle-active #center-banner.show{z-index:8750}
/* Skill dialogues during spectacle: overlays default to z-index 900, but
   #perf-spectacle is 8700 (9100 on mobile). Raise prompts above the stage. */
body.perf-spectacle-active #overlay-prompt.open,
body.perf-spectacle-active #overlay-pick.open,
body.perf-spectacle-active #overlay-hand-pick.open,
body.perf-spectacle-active #overlay-heart.open,
body.perf-spectacle-active #overlay-surveil.open,
body.perf-spectacle-active #overlay-live.open,
body.perf-spectacle-active #overlay-zone.open{
  z-index:9200;
}
body.perf-spectacle-active #modal-card{z-index:9350}
/* Hand strip is hidden during spectacle — drop the hand cutout and use a
   normal dimmed bubble so dialogue is readable over the stage. */
body.perf-spectacle-active .overlay.skill-hand-preserve.open{
  background:rgba(4,10,24,.82);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  pointer-events:auto;
}
body.perf-spectacle-active:has(.overlay.skill-hand-preserve.open)::before{
  display:none;
}
.perf-spotlights{
  position:absolute;left:50%;top:50%;z-index:0;
  width:min(760px,88vw);height:min(480px,56vh);
  transform:translate(-50%,-46%) scale(3);overflow:visible;pointer-events:none;
}
.perf-spot{
  position:absolute;top:0;width:0;height:0;border-style:solid;
  filter:blur(52px);opacity:.48;transform-origin:50% 0;
}
.perf-spot-l{
  left:22%;
  border-width:0 clamp(90px,14vw,130px) clamp(220px,32vh,300px) clamp(90px,14vw,130px);
  border-color:transparent transparent rgba(255,107,168,.58) transparent;
  animation:perfSpotSweepL 5.2s ease-in-out infinite alternate;
}
.perf-spot-r{
  left:78%;
  border-width:0 clamp(90px,14vw,130px) clamp(220px,32vh,300px) clamp(90px,14vw,130px);
  border-color:transparent transparent rgba(96,165,250,.52) transparent;
  animation:perfSpotSweepR 6.4s ease-in-out infinite alternate;
  animation-delay:-2.8s;
}
.perf-spot-c{
  left:50%;
  border-width:0 clamp(70px,11vw,100px) clamp(200px,28vh,260px) clamp(70px,11vw,100px);
  border-color:transparent transparent rgba(251,191,36,.32) transparent;
  animation:perfSpotSweepC 7s ease-in-out infinite alternate;
  animation-delay:-1.4s;
}
@keyframes perfSpotSweepL{
  0%{transform:translateX(-108px) rotate(-26deg)}
  100%{transform:translateX(108px) rotate(20deg)}
}
@keyframes perfSpotSweepR{
  0%{transform:translateX(96px) rotate(24deg)}
  100%{transform:translateX(-96px) rotate(-22deg)}
}
@keyframes perfSpotSweepC{
  0%{transform:translateX(-84px) rotate(-12deg)}
  100%{transform:translateX(84px) rotate(12deg)}
}
.perf-stage{
  position:relative;z-index:2;width:min(760px,88vw);height:min(88vh,900px);max-height:92vh;
  margin:0 auto;display:grid;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch;gap:clamp(8px,1.2vh,14px);isolation:isolate;
}
.perf-seam{
  grid-row:2;flex:none;align-self:stretch;margin:0;position:relative;z-index:1;
  height:2px;
  background:linear-gradient(90deg,rgba(255,107,168,.05),rgba(255,107,168,.4),rgba(255,107,168,.05));
  box-shadow:0 0 14px rgba(255,107,168,.2);border-radius:2px;
}
.perf-col{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;
  transform:scale(.82);opacity:0;transition:transform .55s cubic-bezier(.2,.9,.2,1),opacity .45s ease;
}
.perf-col.opp{grid-row:1;justify-content:flex-end}
.perf-col.mine{grid-row:3;justify-content:flex-start}
.perf-col.in{transform:scale(1);opacity:1}
.perf-col-row{
  position:relative;
  display:flex;flex-direction:row;align-items:stretch;gap:0;width:100%;min-height:0;
}
.perf-col.mine .perf-col-row{align-items:stretch}
.perf-col-side{
  position:absolute;left:clamp(0px,0.5vw,8px);z-index:6;
  flex:none;width:clamp(128px,22vw,210px);
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  min-width:0;overflow:visible;pointer-events:none;
  transition:transform .28s ease;
}
.perf-col.opp .perf-col-side{bottom:0;top:auto;justify-content:flex-end}
.perf-col.mine .perf-col-side{top:0;bottom:auto;justify-content:flex-start}
.perf-col-lbl{
  flex:0 0 auto;width:100%;max-width:100%;text-align:left;
  font-family:'Fredoka One',cursive;font-size:clamp(28px,4.8vw,40px);line-height:1.1;
  color:rgba(255,255,255,.92);text-shadow:0 2px 12px rgba(0,0,0,.45);
  overflow-wrap:break-word;word-break:break-word;hyphens:auto;
}
.perf-col.opp .perf-col-lbl{color:#FFB8DC}
.perf-col.mine .perf-col-lbl{color:#9AE6B4}
.perf-col-body{
  flex:1;min-width:0;width:100%;
  padding-left:var(--perf-col-side-inset);
  padding-right:var(--perf-col-side-inset);
  display:flex;flex-direction:row;align-items:flex-end;justify-content:center;
  gap:var(--perf-yell-rail-gap);
  position:relative;overflow:visible;
}
.perf-col.mine .perf-col-body{align-items:flex-start}
.perf-card-stack{
  flex:1 1 auto;display:flex;flex-direction:column;align-items:center;
  gap:clamp(2px,0.35vh,5px);min-width:0;
  max-width:calc(100% - var(--perf-rail-slot-w) - var(--perf-yell-rail-gap));
  margin:0;
}
.perf-col.mine .perf-card-stack .perf-live-row{order:1}
.perf-col.mine .perf-card-stack .perf-hearts-band{order:2}
.perf-col.mine .perf-card-stack .perf-stage-row{order:3;margin-top:clamp(2px,0.4vh,6px)}
.perf-col.opp .perf-card-stack .perf-stage-row{order:1;margin-bottom:clamp(2px,0.4vh,6px)}
.perf-col.opp .perf-card-stack .perf-hearts-band{order:2}
.perf-col.opp .perf-card-stack .perf-live-row{order:3}
.perf-yell-rail{
  position:relative;left:auto;margin-left:0;
  flex:0 0 var(--perf-rail-slot-w);width:var(--perf-rail-slot-w);
  min-width:var(--perf-rail-slot-w);max-width:var(--perf-rail-slot-w);
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;
  gap:clamp(8px,1.2vw,12px);
  padding:0;pointer-events:none;overflow:visible;
}
.perf-col.mine .perf-yell-rail{align-self:flex-start;align-items:flex-start}
.perf-col.opp .perf-yell-rail{align-self:flex-end;align-items:flex-end}
.perf-col.mine .perf-deck-pile{align-self:flex-start}
.perf-col.opp .perf-deck-pile{align-self:flex-end}
.perf-live-row,.perf-stage-row{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(8px,1.2vw,12px);min-height:clamp(84px,13vw,120px);
}
.perf-live-row{
  position:relative;
  flex-wrap:wrap;
  flex-shrink:0;width:100%;max-width:100%;overflow:visible;
}
.perf-stage-row{
  flex-wrap:nowrap;
  flex-shrink:0;width:100%;max-width:100%;overflow:visible;
}
.perf-live-row.perf-live-multi{
  flex-wrap:nowrap;justify-content:center;align-items:center;
  gap:clamp(4px,0.65vw,8px);
  min-height:var(--perf-live-row-h, clamp(64px,10vw,96px));
  max-height:var(--perf-live-row-h, clamp(72px,11vw,108px));
}
.perf-stage-row.perf-stage-multi{
  gap:clamp(4px,0.65vw,8px);
  min-height:var(--perf-stage-row-h, clamp(84px,13vw,120px));
  max-height:var(--perf-stage-row-h, clamp(92px,14vw,128px));
}
.perf-card{
  border-radius:8px;overflow:hidden;box-shadow:0 10px 32px rgba(0,0,0,.48);
  background:rgba(0,0,0,.18);position:relative;flex-shrink:0;
}
/* Judge score badges hang above the Live art — do not clip them. */
.perf-card.live{
  width:clamp(168px,26vw,240px);aspect-ratio:88/63;overflow:visible;z-index:2;
}
.perf-card.live:has(> .perf-card-score){z-index:5}
.perf-card.live > img,
.perf-card.live > .noimg,
.perf-card.live > .card-art{
  border-radius:8px;
}
.perf-live-row.perf-live-multi .perf-card.live{
  width:var(--perf-live-w, clamp(108px,16vw,168px));
  height:var(--perf-live-h, auto);
  aspect-ratio:88/63;flex:0 0 auto;
}
.perf-card.member{width:var(--perf-member-w,clamp(100px,16vw,136px));aspect-ratio:63/88}
.perf-card.member .perf-member-blade{
  position:absolute;bottom:4px;right:4px;display:flex;align-items:center;gap:2px;
  background:rgba(0,0,0,.72);border-radius:6px;padding:2px 5px;font-size:11px;font-weight:700;color:#fff;
  pointer-events:none;z-index:6;
}
.perf-card.member .perf-member-blade .bicon.sm{width:14px;height:14px}
.perf-card.member .perf-member-blade .perf-blade-mod,
.perf-blade-row .perf-blade-num.perf-blade-mod,
.perf-card.member .perf-member-blade-delta,
.perf-blade-row .perf-member-blade-delta{color:#FBBF24;font-weight:800}
.perf-card.member .perf-member-blade.perf-member-blade-wait{
  opacity:.78;filter:grayscale(.35);
}
.perf-card.member .perf-member-hearts{
  position:absolute;bottom:4px;left:4px;display:flex;align-items:center;gap:2px;
  background:rgba(0,0,0,.72);border-radius:6px;padding:2px 5px;
  pointer-events:none;z-index:6;
}
.perf-card.member .perf-member-hearts .hicon{
  width:14px;height:14px;
}
.perf-card.member .perf-member-hearts .heart-stat-count{
  font-size:11px;font-weight:700;color:#fff;
}
.perf-card.member .perf-member-hearts .stat-mod-bonus{
  color:#FBBF24;font-weight:800;font-size:11px;
}
.perf-card.member .perf-member-cost{
  position:absolute;top:4px;right:4px;display:flex;align-items:center;gap:2px;
  background:rgba(0,0,0,.78);border-radius:6px;padding:2px 5px;font-size:11px;font-weight:700;color:#fff;
  pointer-events:none;z-index:6;box-shadow:0 0 0 1px rgba(251,191,36,.45);
}
.perf-card.member .perf-member-cost.cost-up{box-shadow:0 0 0 1px rgba(251,191,36,.55)}
.perf-card.member .perf-member-cost.cost-down{box-shadow:0 0 0 1px rgba(96,165,250,.55)}
.perf-card.member .perf-member-cost .bicon.sm{width:14px;height:14px}
.perf-card.member .perf-member-cost-delta{color:#FBD38D;font-size:10px;font-weight:800}
.perf-card.live .perf-live-req{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  display:flex;gap:4px 6px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.72);
  pointer-events:none;z-index:7;max-width:94%;
}
.perf-card.live .perf-live-req.req-modified{
  background:rgba(20,40,70,.88);box-shadow:0 0 0 1px rgba(96,165,250,.65),0 0 14px rgba(96,165,250,.35);
}
.perf-card.live .perf-live-req.req-uncleared{
  background:rgba(70,20,30,.9);box-shadow:0 0 0 1px rgba(248,113,113,.7),0 0 12px rgba(248,113,113,.35);
}
.perf-card.live .perf-live-req.req-cleared{display:none!important}
.perf-card.live .perf-live-req .hicon.fld{width:16px;height:16px}
.perf-card.live .perf-live-req .heart-stat-row{
  display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:800;color:#fff;line-height:1;
}
.perf-card.live .perf-live-req .heart-stat-count{font-variant-numeric:tabular-nums}
.perf-card.live .perf-live-req .heart-stat-count-mod,
.lcard.live-card .stage-hearts.live-req .heart-stat-count-mod,
.perf-card.live .perf-live-req .stat-mod-bonus,
.lcard.live-card .stage-hearts.live-req .stat-mod-bonus{
  color:#FBBF24;text-shadow:0 0 2px #000,0 0 6px rgba(0,0,0,.9);
}
.perf-card.live .perf-live-req .heart-stat-count-tick{
  transform:scale(1.35);color:#FDE68A;transition:transform .12s ease,color .12s ease;
}
.perf-card.live.perf-live-req-just-cleared{
  box-shadow:0 0 0 2px rgba(104,211,145,.75),0 0 16px rgba(104,211,145,.35);
}
.perf-card.live.perf-live-failed-req{
  box-shadow:0 0 0 2px rgba(248,113,113,.55),0 0 14px rgba(248,113,113,.25);
}
.perf-card.live .perf-card-score.perf-score-live-start{
  top:6px;left:6px;right:auto;
}
/* Wait: landscape chrome matching rotated art (avoids portrait ghost/outline).
   Portrait is W×H (H=W·88/63); landscape swaps to H×W — never reuse portrait H as height
   or the frame collapses to a square. */
.perf-card.member.member-in-wait{
  width:calc(var(--perf-member-w, clamp(100px,16vw,136px)) * 88 / 63);
  height:var(--perf-member-w, clamp(100px,16vw,136px));
  aspect-ratio:88/63;
}
.perf-stage-row.perf-stage-multi .perf-card.member.member-in-wait{
  width:calc(var(--perf-stage-member-w, var(--perf-member-w, clamp(100px,16vw,136px))) * 88 / 63);
  height:var(--perf-stage-member-w, var(--perf-member-w, clamp(100px,16vw,136px)));
  aspect-ratio:88/63;
}
.perf-card.member.member-in-wait > .wdim{
  font-size:clamp(9px,1.4vw,13px);letter-spacing:.06em;z-index:5;
}
.perf-card.member.member-in-wait > .wdim::before{
  transform:none;
}
.perf-card.member.member-in-wait > img,
.perf-card.member.member-in-wait > .noimg,
.perf-card.member.member-in-wait .card-face-fill,
.perf-card.member.member-in-wait .card-art > img,
.perf-card.member.member-in-wait .card-art > .noimg,
.perf-card.member.member-in-wait .live-flip-front > img,
.perf-card.member.member-in-wait .live-flip-front > .noimg,
.perf-card.member.member-in-wait .live-flip-front .card-face-fill{
  position:absolute;left:50%;top:50%;
  width:calc(100% * 63 / 88);height:calc(100% * 88 / 63);
  transform:translate(-50%, -50%) rotate(90deg);
  transform-origin:center center;
  filter:grayscale(.45) brightness(.78);
}
.perf-stage-row.perf-stage-multi .perf-card.member{
  width:var(--perf-stage-member-w, var(--perf-member-w, clamp(100px,16vw,136px)));
  height:var(--perf-stage-member-h, auto);
  aspect-ratio:63/88;flex:0 0 auto;
}
.perf-card .back.live-back,.perf-card .back{width:100%;height:100%;background:url('../../lltcg-back.png') center/cover no-repeat}
.perf-card img{width:100%;height:100%;object-fit:cover;display:block}
.perf-card.live > img,.perf-card.live > .noimg,
.perf-card.live .card-art:not(.live-sideways) > img,
.perf-card.live .card-art:not(.live-sideways) > .noimg{
  object-fit:contain;transform:none;
}
.perf-card .card-art.live-sideways{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.perf-card .card-art.live-sideways img{height:100%;width:auto;transform:rotate(90deg);object-fit:contain}
.perf-deck-pile{
  position:relative;
  width:var(--perf-member-w,clamp(100px,16vw,136px));aspect-ratio:63/88;border-radius:8px;
  background:url('../../lltcg-back.png') center/cover no-repeat;
  box-shadow:0 8px 22px rgba(0,0,0,.42);transform:translateY(0);
  transition:transform .4s ease;flex-shrink:0;
}
.perf-deck-pile.perf-deck-draw{transform:translateY(-7px)}
.perf-yell-draw-pending{
  position:absolute;left:50%;top:50%;right:auto;bottom:auto;
  display:flex;align-items:center;justify-content:center;gap:clamp(2px,.5vw,4px);
  z-index:40;pointer-events:none;white-space:nowrap;
  opacity:0;transform:translate(-50%,-50%) scale(.72);
  transition:opacity .32s ease,transform .38s cubic-bezier(.2,.9,.2,1);
}
.perf-yell-draw-pending.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.perf-yell-draw-pending.punch{animation:perfYellDrawPunch .32s cubic-bezier(.2,.9,.2,1)}
@keyframes perfYellDrawPunch{
  0%{transform:translate(-50%,-50%) scale(.85)}
  55%{transform:translate(-50%,-50%) scale(1.12)}
  100%{transform:translate(-50%,-50%) scale(1)}
}
.perf-yell-draw-pending .ticon{
  width:clamp(20px,3.8vw,28px);height:clamp(20px,3.8vw,28px);
  filter:drop-shadow(0 0 6px rgba(0,0,0,.8));
}
.perf-yell-draw-val{
  font-family:'Fredoka One',cursive;font-size:clamp(18px,3.6vw,28px);line-height:1;
  font-weight:800;color:#FBBF24;
  -webkit-text-stroke:1.5px #fff;text-stroke:1.5px #fff;
  paint-order:stroke fill;
  text-shadow:0 0 6px rgba(251,191,36,.45),0 2px 10px rgba(0,0,0,.65);
}
.perf-card-score.perf-yell-score-total{
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.7);
  z-index:12;
}
.perf-card-score.perf-yell-score-total.show{
  transform:translate(-50%,-58%) scale(1);
}
.perf-yell-card.perf-yell-flying{
  position:fixed;z-index:10060;pointer-events:none;margin:0;
  transition:transform .48s cubic-bezier(.2,.9,.2,1),opacity .38s ease;
}
.perf-yell-row{
  position:relative;
  width:var(--perf-member-w,clamp(100px,16vw,136px));
  aspect-ratio:63/88;
  flex-shrink:0;min-width:0;overflow:visible;
}
.perf-col.mine .perf-yell-row{align-self:flex-start}
.perf-col.opp .perf-yell-row{align-self:flex-end}
.perf-yell-card{
  --yell-stack-x:0px;--yell-stack-y:0px;--yell-stack-scale:1;
  width:100%;height:100%;border-radius:8px;overflow:hidden;
  box-shadow:0 10px 32px rgba(0,0,0,.38);opacity:0;
  transform:translate(var(--yell-stack-x),var(--yell-stack-y)) scale(var(--yell-stack-scale)) translateX(12px) rotateY(90deg);
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.2,1),box-shadow .35s ease;
  position:absolute;left:0;top:0;background:rgba(0,0,0,.18);flex-shrink:0;
}
.perf-yell-card > img,.perf-yell-card > .noimg{width:100%;height:100%;object-fit:cover;display:block;border-radius:5px;overflow:hidden}
.perf-yell-card.live .card-landscape-in-portrait{border-radius:5px}
.perf-yell-blade-hearts{
  position:absolute;left:clamp(5px,0.8vw,10px);top:clamp(5px,0.8vw,10px);
  transform:none;display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;
  gap:2px;z-index:3;pointer-events:none;
}
.perf-yell-blade-hearts .hicon.bheart{width:clamp(18px,3.2vw,26px);height:clamp(18px,3.2vw,26px)}
.perf-yell-special-icons{
  position:absolute;right:clamp(5px,0.8vw,10px);top:clamp(5px,0.8vw,10px);
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;
  gap:2px;z-index:4;pointer-events:none;
}
.perf-yell-special-icons .hicon{width:clamp(18px,3.2vw,26px);height:clamp(18px,3.2vw,26px);
  filter:drop-shadow(0 0 4px rgba(0,0,0,.75))}
.perf-yell-stack-count{
  position:absolute;right:clamp(-6px,-1vw,-2px);top:clamp(-8px,-1.2vw,-4px);
  z-index:40;min-width:1.55em;height:1.55em;padding:0 .35em;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;font-family:'Fredoka One',cursive;font-size:clamp(12px,2.2vw,16px);
  font-weight:800;line-height:1;color:#fff;
  background:linear-gradient(135deg,#7c5cff,#4f46e5);
  border:1.5px solid rgba(255,255,255,.85);
  box-shadow:0 4px 12px rgba(0,0,0,.4);pointer-events:none;
}
.perf-yell-stack-count[hidden]{display:none!important}
.perf-heart-fly{
  /* Above #perf-spectacle (8700/9100); flights are appended to body. */
  position:fixed;z-index:10050;pointer-events:none;
  transition:transform .58s cubic-bezier(.2,.85,.25,1),opacity .58s ease;
  filter:drop-shadow(0 0 10px rgba(255,107,168,.45));
}
.perf-heart-fly .hicon.bheart{width:clamp(22px,4vw,30px);height:clamp(22px,4vw,30px)}
.perf-card.member.perf-member-heart-pulse{
  box-shadow:0 0 0 2px rgba(255,220,120,.85),0 0 18px rgba(255,200,80,.45);
  transition:box-shadow .2s ease;
}
.perf-card.live.perf-heart-check-pulse{
  animation:perfLiveHeartCheckPulse 1.05s ease-in-out infinite;
}
@keyframes perfLiveHeartCheckPulse{
  0%,100%{filter:brightness(1);transform:scale(1)}
  50%{filter:brightness(1.18);transform:scale(1.03)}
}
.perf-yell-card.show{
  opacity:1;
  transform:translate(var(--yell-stack-x),var(--yell-stack-y)) scale(var(--yell-stack-scale)) rotateY(0deg);
}
.perf-hearts-band{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:clamp(8px,1.2vw,14px);width:min(100%,560px);flex-wrap:nowrap;
  margin:0;position:relative;z-index:4;pointer-events:none;
}
.perf-hearts-band .perf-hearts-panel{
  flex:1 1 auto;width:auto;min-width:0;justify-content:center;
}
.perf-hearts-band .perf-blade-row{flex:0 0 auto;margin:0}
.perf-hearts-panel{
  min-height:clamp(28px,4vw,36px);padding:0;border-radius:0;
  background:transparent;border:none;backdrop-filter:none;box-shadow:none;
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:6px 10px;
  transition:transform .35s ease,filter .35s ease;
  margin:0;position:relative;pointer-events:none;
}
.perf-col.mine .perf-hearts-band{margin:-2px 0 0}
.perf-col.opp .perf-hearts-band{margin:0 0 -2px}
.perf-hearts-panel.pulse{transform:scale(1.08);filter:drop-shadow(0 0 18px rgba(255,107,168,.35))}
.perf-hearts-panel .heart-stat-row{display:inline-flex;align-items:center;flex-shrink:0;font-size:clamp(20px,3.6vw,30px);font-weight:800;color:#fff;gap:5px}
.perf-hearts-panel.dense .heart-stat-row{font-size:clamp(16px,2.8vw,24px);gap:4px}
.perf-hearts-panel .hicon{width:clamp(22px,3.6vw,32px);height:clamp(22px,3.6vw,32px)}
.perf-hearts-panel.dense .hicon{width:clamp(18px,2.8vw,26px);height:clamp(18px,2.8vw,26px)}
.perf-blade-row{
  display:flex;align-items:center;gap:8px;font-weight:800;font-size:clamp(18px,3vw,24px);color:#fff;
  min-height:clamp(28px,4vw,36px);
}
.perf-blade-row[hidden]{display:none!important}
.perf-blade-row.perf-blade-pending{opacity:.72}
.perf-blade-row.perf-blade-active{opacity:1}
.perf-blade-row .bicon{width:clamp(24px,3.6vw,32px);height:clamp(24px,3.6vw,32px)}
.perf-fx-toast{
  position:absolute;left:50%;bottom:12%;transform:translateX(-50%) translateY(12px);
  max-width:min(420px,88vw);padding:10px 16px;border-radius:12px;
  background:rgba(12,20,36,.88);border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.88);font-size:12px;font-weight:700;line-height:1.45;text-align:center;
  opacity:0;transition:opacity .3s ease,transform .3s ease;z-index:5;
}
.perf-fx-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.perf-live-outcomes,.perf-side-outcomes{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;
}
.perf-side-outcomes:empty{display:none}
.perf-live-outcomes .perf-outcome,.perf-side-outcomes .perf-outcome{
  font-size:clamp(11px,2vw,14px);padding:8px 12px;white-space:nowrap;
}
.perf-outcome{
  padding:10px 20px;border-radius:12px;font-size:clamp(13px,2.4vw,17px);font-weight:800;letter-spacing:.03em;
  opacity:0;transform:scale(.92);transition:opacity .35s ease,transform .35s cubic-bezier(.2,.9,.2,1);
  backdrop-filter:blur(10px);box-shadow:0 6px 24px rgba(0,0,0,.5);
}
.perf-outcome.show{opacity:1;transform:scale(1)}
.perf-outcome.ok{background:rgba(8,28,18,.92);border:2px solid rgba(104,211,145,.6);color:#C6F6D5;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.perf-outcome.fail{background:rgba(32,10,10,.92);border:2px solid rgba(252,129,129,.55);color:#FECACA;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.perf-outcome.pending{background:rgba(20,24,36,.9);border:2px solid rgba(160,174,192,.45);color:#E2E8F0;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.perf-splash{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:25;
  pointer-events:none;visibility:hidden;
  transition:visibility 0s linear .34s;
}
.perf-splash.show{visibility:visible;transition:visibility 0s}
.perf-splash-txt{
  font-size:clamp(36px,8vw,72px);
  text-align:center;max-width:min(96vw,920px);
  padding:0 clamp(16px,4vw,32px);box-sizing:border-box;
  transform:scale(.94);opacity:0;
  transition:transform .34s cubic-bezier(.2,.9,.2,1),opacity .34s ease;
}
.perf-splash.show .perf-splash-txt{transform:scale(1);opacity:1}
.perf-splash.live-start .perf-splash-txt{font-size:clamp(52px,13vw,108px)}
.perf-splash.live-start.show .perf-splash-txt{transform:scale(1.02)}
.perf-judge-panel{
  position:fixed;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vh,28px);pointer-events:none;
  opacity:0;transition:opacity .22s ease;
}
.perf-judge-panel.show{opacity:1}
.perf-judge-fx-layer{
  position:fixed;inset:0;z-index:10;pointer-events:none;overflow:visible;
}
.perf-judge-center{
  position:relative;z-index:11;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(8px,1.6vh,14px);text-align:center;max-width:min(92vw,560px);
  margin-left:calc(var(--perf-col-side-inset, clamp(132px, 23vw, 218px)) / 2);
}
.perf-judge-title{
  font-size:clamp(22px,5vw,36px);letter-spacing:.04em;
  opacity:0;transform:translateY(-6px);
  transition:opacity .24s ease,transform .3s cubic-bezier(.2,.9,.2,1);
}
.perf-judge-title.show{opacity:1;transform:translateY(0)}
.perf-judge-title[hidden]{display:none!important}
.perf-judge-duel{
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,2.5vw,20px);
  padding:clamp(12px,2vh,18px) clamp(18px,4vw,28px);
  border-radius:16px;background:rgba(6,14,28,.82);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 40px rgba(0,0,0,.5);backdrop-filter:blur(10px);
  opacity:0;transform:scale(.9) translateY(8px);
  transition:opacity .24s ease,transform .3s cubic-bezier(.2,.9,.2,1);
}
.perf-judge-duel.show{opacity:1;transform:scale(1) translateY(0)}
.perf-judge-duel[hidden],.perf-judge-solo[hidden]{display:none!important}
.perf-judge-side{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;
  min-width:clamp(64px,14vw,100px);
}
.perf-judge-side-lbl{
  font-size:clamp(11px,2vw,13px);font-weight:800;color:rgba(255,255,255,.72);
  letter-spacing:.04em;text-transform:uppercase;text-align:center;max-width:clamp(72px,16vw,120px);
  line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.perf-judge-side.mine .perf-judge-side-lbl{color:#9AE6B4}
.perf-judge-side.opp .perf-judge-side-lbl{color:#FFB8DC}
.perf-judge-side-num{
  font-family:'Fredoka One',cursive;font-size:clamp(36px,8vw,64px);line-height:1;
  color:#FF6BA8;
  -webkit-text-stroke:2px #fff;text-stroke:2px #fff;
  paint-order:stroke fill;
  text-shadow:0 0 8px rgba(255,107,168,.45),0 3px 14px rgba(0,0,0,.55);
  min-width:1.2ch;text-align:center;
  transition:transform .18s cubic-bezier(.2,.9,.2,1);
}
.perf-judge-side-num.tick{transform:scale(1.14)}
.perf-judge-sep{
  font-family:'Fredoka One',cursive;font-size:clamp(22px,4vw,34px);color:rgba(255,255,255,.45);
  padding:0 2px;margin-bottom:.06em;flex-shrink:0;
}
.perf-judge-solo{
  font-family:'Fredoka One',cursive;font-size:clamp(20px,4.5vw,32px);line-height:1.3;
  padding:clamp(14px,2.5vh,20px) clamp(20px,4vw,32px);border-radius:16px;
  background:rgba(6,14,28,.88);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 40px rgba(0,0,0,.5);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(10px) scale(.96);
  transition:opacity .28s ease,transform .32s cubic-bezier(.2,.9,.2,1);
}
.perf-judge-solo.show{opacity:1;transform:translateY(0) scale(1)}
.perf-judge-solo.win{color:#9AE6B4}
.perf-judge-solo.lose{color:#FCA5A5}
.perf-judge-solo.tie{color:#FBBF24}
.perf-card-score{
  position:absolute;left:50%;top:0;
  display:flex;align-items:center;justify-content:center;gap:clamp(3px,.8vw,6px);
  z-index:12;pointer-events:none;white-space:nowrap;
  opacity:0;transform:translate(-50%,-28%) scale(.7);
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.2,1);
}
.perf-card-score.show{opacity:1;transform:translate(-50%,-42%) scale(1)}
.perf-card-score.punch{animation:perfScorePunch .32s cubic-bezier(.2,.9,.2,1)}
@keyframes perfScorePunch{
  0%{transform:translate(-50%,-42%) scale(.85)}
  55%{transform:translate(-50%,-46%) scale(1.12)}
  100%{transform:translate(-50%,-42%) scale(1)}
}
.perf-card-score .ticon{
  width:clamp(22px,4.5vw,32px);height:clamp(22px,4.5vw,32px);
  filter:drop-shadow(0 0 6px rgba(0,0,0,.8));
}
.perf-card-score-val{
  font-family:'Fredoka One',cursive;font-size:clamp(22px,4.5vw,34px);line-height:1;
  font-weight:800;color:#FF6BA8;
  -webkit-text-stroke:1.5px #fff;text-stroke:1.5px #fff;
  paint-order:stroke fill;
  text-shadow:0 0 6px rgba(255,107,168,.4),0 2px 10px rgba(0,0,0,.65);
}
.perf-card-score-bonus{
  font-family:'Fredoka One',cursive;font-size:clamp(22px,4.5vw,34px);line-height:1;
  font-weight:800;color:#FBBF24;
  -webkit-text-stroke:1.5px #fff;text-stroke:1.5px #fff;
  paint-order:stroke fill;
  text-shadow:0 0 6px rgba(251,191,36,.45),0 2px 10px rgba(0,0,0,.65);
}
.perf-score-fly{
  /* Above #perf-spectacle; flights are appended to body. */
  position:fixed;z-index:10055;margin:0;pointer-events:none;
  transition:transform .36s cubic-bezier(.25,.85,.3,1),opacity .36s ease;
  will-change:transform,opacity;
}
.perf-score-fly .ticon{width:clamp(22px,4.5vw,32px);height:clamp(22px,4.5vw,32px)}
.perf-score-fly .perf-card-score-val,.perf-score-fly .perf-card-score-bonus{font-size:clamp(22px,4.5vw,34px)}
.perf-verdict{
  font-family:'Fredoka One',cursive;font-size:clamp(18px,3.5vw,26px);line-height:1.35;
  padding:10px 18px;border-radius:12px;background:rgba(0,0,0,.45);max-width:100%;
  opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease;
}
.perf-verdict.show{opacity:1;transform:translateY(0)}
.perf-verdict.win{color:#9AE6B4}
.perf-verdict.lose{color:#FCA5A5}
.perf-verdict.tie{color:#FBBF24}

@media (prefers-reduced-motion:reduce){
  #center-banner{transform:translate(-50%,-50%);transition-duration:.01ms!important;opacity:1!important}
  #center-banner:not(.show){opacity:0!important}
  .llc-splash-title,#center-banner .cb-title,.perf-splash-txt{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
  .perf-col,.perf-yell-card,.perf-outcome,.perf-splash,.perf-judge-panel,.perf-spot,.perf-card-score,.perf-score-fly{animation:none!important;transition-duration:.01ms!important}
  .perf-spot-l,.perf-spot-r,.perf-spot-c{transform:none!important}
  #perf-spectacle{transition-duration:.01ms!important}
}

/* Above #perf-spectacle (8700) so win/loss is never hidden under a stuck Performance stage. */
#overlay-win{position:fixed;inset:0;z-index:9000;background:rgba(8,3,6,.93);
  display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:24px;backdrop-filter:blur(8px)}
#overlay-win.open{display:flex}
.wtitle{font-family:'Fredoka One',cursive;font-size:clamp(38px,8vw,68px);
  text-align:center;filter:drop-shadow(0 0 28px currentColor)}
.wsub{font-size:15px;color:rgba(255,255,255,.58);text-align:center}
.wstats{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:11px;padding:12px 22px;font-size:12px;color:rgba(255,255,255,.65);
  line-height:2.1;text-align:center}
.wstats b{color:#fff}
.win-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:4px}
.win-rematch-hint{font-size:13px;color:rgba(255,200,220,.92);margin:10px 0 0;line-height:1.45;text-align:center;max-width:min(360px,88vw)}
#overlay-win .win-pr-reward{font-size:14px;color:rgba(255,220,240,.92);margin:8px 0 0;text-align:center;max-width:min(520px,92vw)}
#overlay-win .win-debug-row button{font-size:12px;padding:8px 14px;width:auto}

/* Responsive */
@media(max-width:680px){.game-root{grid-template-columns:1fr}.sidebar{display:none}}
@media(max-width:480px){
  .hcard{width:50px}
  .my-hand-strip .hcard{width:auto;height:var(--my-hand-card-h)}
  .logo-img{max-width:300px}
  .logo-tagline,.logo-version{font-size:13px}
}

/* ── Official-site menu chrome (hub / account screens only; not gameplay) ── */
body:has(.llc-menu-screen.active) .llc-sky-dim,
body.news-overlay-open .llc-sky-dim,
body.missions-overlay-open .llc-sky-dim{
  background:
    linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(78,197,255,.12) 42%,rgba(50,157,255,.18) 100%),
    radial-gradient(ellipse 90% 60% at 72% 8%,rgba(255,255,255,.14) 0%,transparent 58%)}
body.news-overlay-open .llc-sky-dim::after,
body.missions-overlay-open .llc-sky-dim::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:rgba(4,10,24,.42)}
.llc-menu-screen{
  /* flex-start + .account-shell margin-block:auto: centers when short, scrolls from top when tall
     (justify-content:center clipped logo/news above the fold on ~1080p). */
  flex-direction:column;align-items:center;justify-content:flex-start;
  overflow-y:auto;padding:clamp(12px,2vh,24px) 16px;background:transparent;
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;color:#fff}
.llc-menu-screen .logo-tagline,.llc-menu-screen .logo-version{
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;font-weight:500;letter-spacing:.08em;
  color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(74,92,128,.35)}
.llc-menu-screen .panel{
  background:transparent;border:none;border-radius:0;padding:0;box-shadow:none;backdrop-filter:none}
.llc-menu-screen .panel h2{
  font-family:Kalnia,serif;font-weight:500;font-size:clamp(28px,5vw,42px);line-height:1.15;
  letter-spacing:.02em;margin-bottom:10px;text-align:left;
  background:linear-gradient(45deg,#ffcbe1 0%,#fff 18%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.llc-menu-screen .panel h2,.llc-menu-screen .panel h3,.llc-menu-screen .panel h4{text-align:left}
/* In-game splash titles — Fredoka + tinted fill; subtle ink + dark pink glow */
.llc-splash-title,
#center-banner .cb-title,
.perf-splash-txt,
#opp-skill-wait .osw-title,
#live-judge-overlay .ljo-title,
.perf-judge-title{
  --splash-ink:0 1px 2px rgba(0,0,0,.48),0 2px 4px rgba(0,0,0,.32);
  --splash-glow:0 0 12px rgba(90,18,55,.78),0 0 24px rgba(150,38,88,.58),0 0 40px rgba(195,50,105,.34),0 0 56px rgba(210,65,120,.18);
  display:inline-block;max-width:100%;width:auto;
  font-family:'Fredoka One',cursive;font-weight:400;line-height:1.08;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  color:#fff8fc;
  text-shadow:var(--splash-ink),var(--splash-glow);
}
#center-banner.show .cb-title,
#opp-skill-wait.show .osw-title{
  animation:splash-title-enter .24s cubic-bezier(.25,.8,.25,1) both}
@keyframes splash-title-enter{
  from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}}
/* Center banner — phase / live pipeline tints */
#center-banner.kind-phase .cb-title{
  color:#e8f6ff;
  --splash-glow:0 0 12px rgba(90,18,55,.72),0 0 24px rgba(150,38,88,.52),0 0 38px rgba(195,50,105,.3),0 0 22px rgba(100,160,255,.22);
}
#center-banner.kind-live .cb-title,
#center-banner.kind-live-attempt .cb-title{
  color:#ffe8f4;
  --splash-glow:0 0 14px rgba(100,14,58,.82),0 0 28px rgba(165,35,92,.62),0 0 44px rgba(215,55,120,.38),0 0 24px rgba(255,90,150,.24);
}
#center-banner.kind-live-perform .cb-title{
  color:#f2ebff;
  --splash-glow:0 0 12px rgba(90,18,58,.76),0 0 26px rgba(150,38,88,.54),0 0 40px rgba(195,50,105,.32),0 0 22px rgba(160,130,255,.2);
}
#center-banner.kind-judge .cb-title{
  color:#fff4d6;
  --splash-glow:0 0 12px rgba(90,18,55,.74),0 0 24px rgba(150,38,88,.54),0 0 38px rgba(195,50,105,.3),0 0 20px rgba(210,165,70,.18);
}
#center-banner.kind-judge.win-me .cb-title{
  color:#dcfce8;
  --splash-glow:0 0 12px rgba(70,18,48,.68),0 0 24px rgba(130,38,78,.48),0 0 36px rgba(165,45,95,.28),0 0 20px rgba(100,200,140,.2);
}
#center-banner.kind-judge.lose-me .cb-title{
  color:#ffe4e4;
  --splash-glow:0 0 14px rgba(100,14,52,.8),0 0 28px rgba(165,35,82,.58),0 0 42px rgba(210,50,95,.34),0 0 18px rgba(220,90,90,.16);
}
#center-banner.kind-success .cb-title{
  color:#dcfce8;
  --splash-glow:0 0 12px rgba(70,18,48,.68),0 0 24px rgba(130,38,78,.48),0 0 36px rgba(165,45,95,.28),0 0 20px rgba(100,200,140,.2);
}
#center-banner.kind-action .cb-title{
  color:#f8faff;
  --splash-glow:0 0 12px rgba(90,18,55,.74),0 0 24px rgba(150,38,88,.54),0 0 38px rgba(195,50,105,.3),0 0 20px rgba(170,180,255,.16);
}
.perf-splash-txt{
  color:#fff4d6;
  --splash-glow:0 0 12px rgba(90,18,55,.74),0 0 24px rgba(150,38,88,.54),0 0 38px rgba(195,50,105,.3),0 0 20px rgba(210,165,70,.18);
}
.perf-splash.live-start .perf-splash-txt{
  color:#ffb8dc;
  --splash-glow:0 0 16px rgba(105,10,58,.88),0 0 32px rgba(175,32,92,.68),0 0 50px rgba(225,55,125,.42),0 0 28px rgba(255,100,160,.28);
}
#opp-skill-wait .osw-title{
  color:#efe4ff;
  --splash-glow:0 0 12px rgba(90,18,58,.76),0 0 26px rgba(150,38,88,.54),0 0 40px rgba(195,50,105,.32),0 0 22px rgba(160,130,255,.2);
}
#live-judge-overlay .ljo-title{
  color:#fff4d6;
  --splash-glow:0 0 12px rgba(90,18,55,.74),0 0 24px rgba(150,38,88,.54),0 0 38px rgba(195,50,105,.3),0 0 20px rgba(210,165,70,.18);
}
.llc-menu-screen .panel h3{
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;font-weight:700;font-size:16px;color:#fff}
.llc-menu-screen .account-lead,.llc-menu-screen .hub-stat,.llc-menu-screen .auth-box p{
  font-size:14px;color:rgba(255,255,255,.94);line-height:1.55;letter-spacing:.04em}
.llc-menu-screen .hub-stat{font-family:'Libre Baskerville',serif;font-size:13px;margin:4px 0 0}
.llc-menu-screen .hub-stat-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:4px 0 0}
.llc-menu-screen .hub-stat-row .hub-stat{margin:0}
.hub-star-gems-pill{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 8px;border-radius:999px;
  border:1px solid rgba(255,210,120,.35);background:rgba(255,200,80,.12);
  font-family:'Libre Baskerville',serif;font-size:13px;font-weight:700;color:#fff;white-space:nowrap}
.hub-star-gems-pill img{width:22px;height:22px;object-fit:contain;display:block;flex:0 0 auto}
.hub-coins-pill{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 8px;border-radius:999px;
  border:1px solid rgba(255,220,120,.4);background:rgba(255,190,40,.14);
  font-family:'Libre Baskerville',serif;font-size:13px;font-weight:700;color:#fff;white-space:nowrap}
.hub-coins-pill img{width:18px;height:18px;object-fit:contain;display:block;flex:0 0 auto}
.hub-coins-pill .sleeve-shop-free,
.sleeve-shop-free{margin-left:8px;font-size:11px;font-weight:600;color:#ffe7a8}
.hub-seals-pill{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:5px 10px;border-radius:12px;
  border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.22)
}
.hub-seal-chip{display:inline-flex;align-items:center;gap:4px;font-family:'Libre Baskerville',serif;font-size:12px;font-weight:700;color:#fff}
.hub-seal-chip img{width:18px;height:18px;object-fit:contain;display:block}
.sticker-seals-bar{margin:8px 0 12px}
.sticker-cards-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin-top:12px
}
.sticker-card-tile{
  display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:10px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);text-align:center
}
.sticker-card-tile .sticker-card-art{
  position:relative;width:100%;aspect-ratio:63/88;overflow:hidden;
  border-radius:6px;background:#111;cursor:pointer
}
.sticker-card-tile .sticker-card-art > img.card-face-fill,
.sticker-card-tile .sticker-card-art > .noimg.card-face-fill{
  width:100%;height:100%;object-fit:cover;border-radius:inherit
}
.sticker-card-tile .sticker-card-meta{font-size:11px;color:rgba(255,255,255,.75);line-height:1.3}
.sticker-card-tile .sticker-card-cost{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;font-weight:800;font-size:13px;color:#fff
}
.sticker-card-tile .sticker-card-cost img{width:16px;height:16px}
.sticker-card-tile .btn-grad,.sticker-card-tile .btn-out{width:100%;padding:6px 8px;font-size:12px}
.sticker-card-tile.is-owned-max{opacity:.72}
.deck-convert-seal-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.deck-convert-seal-row .btn-grad{
  flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:4px 10px;min-height:0;line-height:1.2;font-size:12px;white-space:nowrap
}
.deck-convert-seal-row .btn-grad img{width:22px;height:22px;object-fit:contain;display:block;flex:0 0 auto}
.deck-convert-seal-balance{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%;font-size:12px;color:rgba(255,255,255,.85)}
.deck-convert-seal-balance .sticker-card-cost{display:inline-flex;align-items:center;gap:4px}
.deck-seal-batch-toggle.is-active{
  border-color:rgba(255,196,120,.65)!important;background:rgba(255,160,64,.22)!important;color:#ffe7c2}
.deck-card-tile.seal-batch-sel{
  outline:2px solid rgba(255,196,120,.95);outline-offset:1px;
  box-shadow:0 0 0 3px rgba(255,160,64,.28),0 6px 18px rgba(0,0,0,.35)}
.deck-card-tile.seal-batch-sel .deck-seal-batch-qty{
  position:absolute;bottom:3px;left:3px;z-index:2;
  background:rgba(180,90,10,.92);color:#fff;font-size:10px;font-weight:800;
  padding:1px 5px;border-radius:6px;line-height:1.3}
.deck-card-tile.seal-batch-dim{opacity:.42;filter:grayscale(.25)}
.deck-seal-batch-bar{
  position:sticky;bottom:0;z-index:8;margin-top:10px;padding:10px 12px;
  border-radius:12px;border:1px solid rgba(255,196,120,.35);
  background:linear-gradient(180deg,rgba(40,28,16,.96),rgba(22,16,10,.98));
  box-shadow:0 -8px 24px rgba(0,0,0,.35);display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.deck-seal-batch-bar[hidden]{display:none!important}
.deck-seal-batch-summary{flex:1 1 220px;min-width:0}
.deck-seal-batch-summary-title{margin:0 0 4px;font-size:13px;font-weight:700;color:#ffe7c2}
.deck-seal-batch-totals{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.deck-seal-batch-totals .sticker-card-cost{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:#fff}
.deck-seal-batch-empty{font-size:12px;color:rgba(255,255,255,.65)}
.deck-seal-batch-actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.sticker-info-fab{flex:0 0 auto}
.sticker-info-fab .news-fab-icon{width:38px;height:38px;font-size:20px}
.sticker-info-fab:hover .news-fab-icon{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.34)}
#modal-sticker-info.llc-menu-screen{
  position:fixed;inset:0;z-index:8750;display:none;align-items:center;justify-content:center;
  overflow:auto;padding:clamp(12px,3vw,24px) 16px;
  background:rgba(4,10,24,.78);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)
}
#modal-sticker-info.open{display:flex}
#modal-sticker-info .sticker-info-shell{
  max-width:min(560px,94vw);width:100%;margin-block:auto;padding:clamp(16px,2.6vw,24px);
  border-radius:16px;border:1px solid rgba(255,255,255,.44);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(38,132,210,.9);
  box-shadow:0 18px 52px rgba(0,0,0,.45),0 0 32px rgba(52,163,243,.24),inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
#modal-sticker-info .sticker-info-panel{
  width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none
}
#modal-sticker-info .account-screen-head{margin-bottom:8px}
.sticker-info-lead{font-size:13px;color:rgba(255,255,255,.86);line-height:1.55;margin:0 0 14px;text-align:center}
.sticker-info-tiers{display:flex;flex-direction:column;gap:10px;max-height:min(60vh,520px);overflow-y:auto;padding-right:3px}
.sticker-info-tier{
  display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;
  padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.28);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(20,79,132,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)
}
.sticker-info-tier-head{grid-column:1 / -1;display:flex;align-items:center;gap:8px;font-weight:800;color:#fff;font-size:14px}
.sticker-info-tier-head img{width:28px;height:28px;object-fit:contain}
.sticker-info-tier-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(186,228,255,.85);margin-top:2px}
.sticker-info-tier-value{font-size:12px;color:rgba(255,255,255,.88);line-height:1.4}
.sticker-info-tier-cost{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;color:#fff}
.sticker-info-tier-cost img{width:20px;height:20px;object-fit:contain}
.hub-ranked-pr-pill{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 8px;border-radius:999px;
  border:1px solid rgba(186,160,255,.4);background:rgba(120,90,210,.18);
  font-family:'Libre Baskerville',serif;font-size:13px;font-weight:700;color:#fff;white-space:nowrap}
.hub-ranked-pr-pill .hub-ranked-pr-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:20px;padding:0 6px;
  border-radius:6px;font-size:10px;font-weight:800;letter-spacing:.06em;
  background:linear-gradient(135deg,#9b7bff,#6a4fd8);color:#fff;
  box-shadow:0 1px 4px rgba(80,50,160,.35)}
.hub-ranked-pr-pill.is-empty{
  border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06);opacity:.72}
.hub-ranked-pr-pill.is-empty .hub-ranked-pr-badge{
  background:rgba(255,255,255,.22);box-shadow:none}
.hub-missions-pill{
  position:relative;display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;
  border:1px solid rgba(120,220,150,.4);background:linear-gradient(135deg,rgba(46,160,90,.35),rgba(32,120,70,.28));
  font-family:'Libre Baskerville',serif;font-size:13px;font-weight:700;color:#fff;white-space:nowrap;cursor:pointer;
  transition:box-shadow .25s ease,border-color .25s ease,filter .25s ease}
.hub-missions-pill:hover{border-color:rgba(150,240,180,.55);background:linear-gradient(135deg,rgba(56,180,100,.42),rgba(40,140,80,.34))}
.hub-missions-pill.has-claim{
  border-color:rgba(170,255,200,.75);
  background:linear-gradient(135deg,rgba(64,200,110,.52),rgba(36,150,80,.4));
  box-shadow:0 0 0 1px rgba(120,255,170,.35),0 0 14px rgba(70,220,130,.55),0 0 28px rgba(40,180,100,.28);
  animation:hub-missions-claim-glow 1.8s ease-in-out infinite}
.hub-missions-pill.has-claim:hover{
  border-color:rgba(190,255,215,.9);
  box-shadow:0 0 0 1px rgba(140,255,180,.45),0 0 18px rgba(80,235,140,.65),0 0 32px rgba(50,200,110,.34)}
@keyframes hub-missions-claim-glow{
  0%,100%{filter:brightness(1);box-shadow:0 0 0 1px rgba(120,255,170,.35),0 0 14px rgba(70,220,130,.55),0 0 28px rgba(40,180,100,.28)}
  50%{filter:brightness(1.08);box-shadow:0 0 0 1px rgba(150,255,190,.5),0 0 20px rgba(90,240,150,.7),0 0 36px rgba(50,200,110,.4)}
}
@media (prefers-reduced-motion:reduce){
  .hub-missions-pill.has-claim{animation:none}
}
.hub-missions-badge{
  position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:linear-gradient(135deg,#ff6ba8,#d63384);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;
  box-shadow:0 0 8px rgba(255,107,168,.55)}
.hub-missions-pill.has-claim .hub-missions-badge{
  box-shadow:0 0 10px rgba(255,107,168,.75),0 0 4px rgba(255,255,255,.35)}
.hub-login-bonus-pill{
  position:relative;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  border:1px solid rgba(255,179,209,.42);background:linear-gradient(135deg,rgba(255,107,168,.32),rgba(186,120,255,.22));
  font-family:'Libre Baskerville',serif;font-size:13px;font-weight:700;color:#fff;white-space:nowrap;cursor:pointer}
.hub-login-bonus-pill:hover{
  border-color:rgba(255,210,230,.65);background:linear-gradient(135deg,rgba(255,107,168,.42),rgba(186,120,255,.3))
}
.hub-login-bonus-dot{
  position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:999px;
  background:linear-gradient(135deg,#ff6ba8,#d63384);box-shadow:0 0 8px rgba(255,107,168,.55)
}
body.login-bonus-overlay-open{overflow:hidden}
#overlay-login-bonus.llc-menu-screen{
  position:fixed;inset:0;z-index:8745;display:none;align-items:center;justify-content:center;
  overflow:hidden;padding:clamp(12px,3vw,24px) 16px;
  background:rgba(4,10,24,.78);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#overlay-login-bonus.open{display:flex}
#overlay-login-bonus .login-bonus-shell{
  max-width:min(560px,96vw);width:100%;margin-block:auto;min-height:0;
  display:flex;flex-direction:column;overflow:hidden;
  padding:clamp(16px,2.6vw,24px) clamp(14px,2.2vw,20px);
  border-radius:16px;border:1px solid rgba(255,255,255,.44);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(38,132,210,.92);
  box-shadow:0 18px 52px rgba(0,0,0,.45),0 0 32px rgba(52,163,243,.24),inset 0 1px 0 rgba(255,255,255,.16)}
#overlay-login-bonus .login-bonus-lead{
  text-align:left;margin:0 0 14px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.88)}
#overlay-login-bonus .login-bonus-title{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  flex:1 1 auto;min-width:0}
#overlay-login-bonus .login-bonus-kanon{
  flex:0 0 auto;width:44px;height:48px;object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
  pointer-events:none;user-select:none}
#overlay-login-bonus .login-bonus-title-text{
  min-width:0;overflow-wrap:break-word;text-wrap:balance}
@media (max-width:560px){
  #overlay-login-bonus .login-bonus-kanon{width:36px;height:40px}
}
#login-bonus-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%}
.login-bonus-cell{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;
  min-width:0;min-height:104px;padding:8px 4px 10px;border-radius:12px;text-align:center;
  border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.22);
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,opacity .25s ease}
.login-bonus-cell--locked{opacity:.42;filter:saturate(.55)}
.login-bonus-cell--claimed{
  opacity:.78;border-color:rgba(150,240,180,.4);background:rgba(40,120,80,.22)}
.login-bonus-cell--next{
  border-color:rgba(255,179,209,.55);box-shadow:0 0 0 1px rgba(255,107,168,.28),0 6px 16px rgba(0,0,0,.25)}
.login-bonus-cell--just_claimed,
.login-bonus-cell.is-claimed-pop{
  border-color:var(--pink);background:rgba(255,107,168,.22);
  box-shadow:0 0 0 1px rgba(255,107,168,.4),0 8px 22px rgba(255,107,168,.28)}
.login-bonus-cell.is-claiming{
  animation:login-bonus-claim-pop .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes login-bonus-claim-pop{
  0%{transform:scale(.92);filter:brightness(.9)}
  45%{transform:scale(1.08);filter:brightness(1.15)}
  100%{transform:scale(1);filter:brightness(1)}
}
.login-bonus-day{
  font-size:10px;font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.7);text-transform:uppercase;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-bonus-icon-wrap{
  display:flex;align-items:center;justify-content:center;min-height:36px;margin:2px 0;flex:0 0 auto}
.login-bonus-icon{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.login-bonus-pr-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:22px;padding:0 7px;
  border-radius:7px;font-size:11px;font-weight:800;letter-spacing:.04em;color:#fff;
  background:linear-gradient(135deg,#9b7bff,#6a4fd8);box-shadow:0 2px 8px rgba(80,50,160,.4)}
.login-bonus-reward{
  font-size:11px;font-weight:700;line-height:1.2;color:#fff;letter-spacing:.02em;
  width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  overflow:hidden;overflow-wrap:anywhere;word-break:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
@media (max-width:560px){
  #login-bonus-grid{gap:6px}
  .login-bonus-cell{min-height:92px;padding:6px 2px 8px}
  .login-bonus-icon{width:24px;height:24px}
  .login-bonus-reward{font-size:9px;line-height:1.15;-webkit-line-clamp:4}
}
body.missions-overlay-open{overflow:hidden}
#overlay-missions.llc-menu-screen{
  position:fixed;inset:0;z-index:8750;display:none;align-items:center;justify-content:center;
  overflow:hidden;padding:clamp(12px,3vw,24px) 16px;
  background:rgba(4,10,24,.78);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#overlay-missions.open{display:flex}
#overlay-missions .missions-shell{
  max-width:min(520px,94vw);width:100%;margin-block:auto;min-height:0;
  display:flex;flex-direction:column;overflow:hidden;
  padding:clamp(16px,2.6vw,24px) clamp(14px,2.2vw,20px);
  border-radius:16px;border:1px solid rgba(255,255,255,.44);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(38,132,210,.9);
  box-shadow:0 18px 52px rgba(0,0,0,.45),0 0 32px rgba(52,163,243,.24),inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#overlay-missions .missions-panel-shell{
  display:flex;flex-direction:column;min-height:0;overflow:hidden;width:100%;
  max-height:min(72vh,640px);flex:0 1 auto;
  background:transparent;border:none;border-radius:0;padding:0;box-shadow:none;backdrop-filter:none}
#overlay-missions .missions-tab-bar{
  display:flex;gap:8px;margin:0 0 12px;flex:0 0 auto}
#overlay-missions .missions-tab{
  flex:1 1 0;min-width:0;padding:10px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.4);background:rgba(52,163,243,.35);
  color:#fff;font-family:'Zen Kaku Gothic New','Nunito',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.04em;cursor:pointer;transition:border-color .2s ease,background .2s ease}
#overlay-missions .missions-tab:hover{border-color:rgba(186,228,255,.75)}
#overlay-missions .missions-tab.active{
  border-color:#fff;background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(52,163,243,.82);
  box-shadow:0 0 0 1px rgba(186,228,255,.35)}
#overlay-missions .missions-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding-right:6px;margin-right:-2px;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,179,209,.75) rgba(255,255,255,.12)}
#overlay-missions .missions-scroll::-webkit-scrollbar{width:6px}
#overlay-missions .missions-scroll::-webkit-scrollbar-track{
  background:rgba(255,255,255,.12);border-radius:999px;margin:6px 0}
#overlay-missions .missions-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--pink-l),var(--pink));border-radius:999px;
  border:1px solid rgba(255,255,255,.28);box-shadow:0 0 8px rgba(255,107,168,.28)}
#overlay-missions .missions-scroll::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#fff,var(--pink-l))}
#overlay-missions .missions-scroll .llc-menu-list{margin-top:0}
#overlay-missions .missions-item{
  cursor:default;align-items:center;justify-content:space-between;gap:12px;min-height:62px;padding:12px 14px}
#overlay-missions .missions-item--claimed{opacity:.45}
#overlay-missions .missions-item .llc-menu-item-body{flex:1 1 auto;min-width:0}
#overlay-missions .missions-item-action{flex:0 0 auto;display:flex;align-items:center}
#overlay-missions .missions-claim-btn{
  width:auto;padding:7px 14px;font-size:12px;font-weight:800;white-space:nowrap;
  border:1px solid rgba(255,210,230,.55);
  background:linear-gradient(135deg,var(--pink),var(--pink-d));
  color:#fff;
  box-shadow:0 4px 14px rgba(214,51,132,.42)}
#overlay-missions .missions-claim-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(214,51,132,.52);
  filter:none}
#overlay-missions .missions-status-chip{
  font-size:11px;font-weight:700;color:rgba(255,255,255,.72);letter-spacing:.04em;white-space:nowrap}
#overlay-missions .missions-status-chip--active{color:#bae4ff}
#overlay-missions .missions-status-chip--claimed{color:rgba(255,255,255,.5)}
#overlay-missions .missions-loading,
#overlay-missions .missions-empty{
  font-size:14px;color:rgba(255,255,255,.94);text-align:center;margin:18px 8px;line-height:1.55;letter-spacing:.04em}
#overlay-mission-starter.llc-menu-screen{
  position:fixed;inset:0;z-index:8760;display:none;align-items:center;justify-content:center;
  overflow:auto;padding:clamp(12px,3vw,24px) 16px;
  background:rgba(4,10,24,.82);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#overlay-mission-starter.open{display:flex}
#overlay-mission-starter .mission-starter-shell{
  max-width:min(720px,94vw);width:100%;margin-block:auto;min-height:0;
  display:flex;flex-direction:column;overflow:hidden;
  padding:clamp(16px,2.6vw,24px) clamp(14px,2.2vw,20px);
  border-radius:16px;border:1px solid rgba(255,255,255,.44);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(38,132,210,.9);
  box-shadow:0 18px 52px rgba(0,0,0,.45),0 0 32px rgba(52,163,243,.24),inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#overlay-mission-starter .account-panel{
  display:flex;flex-direction:column;min-height:0;width:100%;
  background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}
#overlay-mission-starter .mission-starter-actions{
  display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.starter-opt.starter-opt--owned,
.starter-opt:disabled{
  opacity:.42;filter:grayscale(1);cursor:not-allowed;pointer-events:none}
.starter-opt .starter-owned-tag{
  margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.7)}
.toast.toast-success{
  background:linear-gradient(135deg,#2ea85a,#1f7a42);
  box-shadow:0 6px 22px rgba(46,160,90,.45)}
.star-gem-inline{display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.star-gem-inline img{width:18px;height:18px;object-fit:contain;display:block}
.star-gem-cost{display:inline-flex;align-items:center;gap:5px}
.star-gem-cost img{width:20px;height:20px;object-fit:contain}
.llc-menu-screen .hub-stat b,.llc-menu-screen .hub-user b{color:#fff}
.llc-menu-screen .field label{
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.08em;color:rgba(255,255,255,.72)}
.llc-menu-screen input,.llc-menu-screen select{
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;border:1px solid #bae4ff;border-radius:8px;
  background:rgba(255,255,255,.12);color:#fff}
.llc-menu-screen input:focus,.llc-menu-screen select:focus{
  border-color:#fff;background:rgba(255,255,255,.18);box-shadow:0 0 0 1px rgba(186,228,255,.35)}
.llc-select-wrap{position:relative;display:block;width:100%}
.llc-select-wrap::after{
  content:'';position:absolute;right:14px;top:50%;transform:translateY(-50%);width:12px;height:7px;
  pointer-events:none;opacity:.92;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1.25L6 5.75L11 1.25' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.llc-menu-screen .llc-select-wrap select,
#screen-lobby .llc-select-wrap select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:100%;display:block;box-sizing:border-box;
  padding:12px 40px 12px 14px;min-height:46px;
  font-size:14px;font-weight:700;line-height:1.35;letter-spacing:.03em;
  border:1px solid #bae4ff;border-radius:10px;
  background:rgba(52,163,243,.28);color:#fff;cursor:pointer;
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease,transform .25s ease}
.llc-menu-screen .llc-select-wrap select:hover,
#screen-lobby .llc-select-wrap select:hover{
  border-color:rgba(255,255,255,.55);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(52,163,243,.45)}
.llc-menu-screen .llc-select-wrap select:focus,
#screen-lobby .llc-select-wrap select:focus{
  outline:none;border-color:#fff;background:rgba(255,255,255,.16);
  box-shadow:0 0 0 1px rgba(186,228,255,.45)}
.llc-menu-screen .llc-select-wrap select:disabled,
#screen-lobby .llc-select-wrap select:disabled{opacity:.5;cursor:not-allowed}
.llc-menu-screen .llc-select-wrap select,
#screen-lobby .llc-select-wrap select{color-scheme:dark}
.llc-menu-screen .llc-select-wrap select option,
.llc-menu-screen .llc-select-wrap select optgroup,
#screen-lobby .llc-select-wrap select option,
#screen-lobby .llc-select-wrap select optgroup{
  background:#2d4a6e;color:#fff;font-weight:600}
.llc-menu-screen .llc-select-wrap select optgroup,
#screen-lobby .llc-select-wrap select optgroup{
  font-weight:800;color:#bae4ff;font-style:normal;background:#243a58}
.llc-menu-screen .deck-prev{
  border:1px solid rgba(255,255,255,.28);background:rgba(52,163,243,.28);color:rgba(255,255,255,.82)}
#screen-ranked .ranked-deck-field,
#screen-lobby .ranked-deck-field,
#screen-leaderboard .leaderboard-mode-field{margin:14px 0 10px;text-align:left}
#screen-ranked .ranked-deck-field label,
#screen-lobby .field > label[for="sel-lobby-game-mode"],
#screen-leaderboard .leaderboard-mode-field label{
  display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.72);margin-bottom:6px}
.game-mode-desc{
  margin:8px 0 0;font-size:12px;line-height:1.45;color:rgba(255,255,255,.72);text-align:left}
#screen-ranked .ranked-sound-opt{
  display:flex;align-items:center;gap:8px;margin:10px 0 6px;font-size:13px;color:rgba(255,255,255,.88);cursor:pointer}
#screen-ranked .ranked-sound-opt input{width:16px;height:16px;accent-color:#bae4ff;cursor:pointer}
#screen-ranked .ranked-queue-stats{margin:8px 0 10px;text-align:center}
.llc-menu-screen .options-discord-presence{
  margin:10px 0 12px;padding:10px 12px;border-radius:10px;
  border:1px solid rgba(186,228,255,.28);background:rgba(8,18,36,.35)
}
.llc-menu-screen .options-discord-presence .account-lead{margin:6px 0 8px;font-size:12px}
.llc-menu-screen .options-discord-presence .btn-out{width:auto;display:inline-flex}
.llc-menu-screen .options-apk-assets{
  margin:10px 0 12px;padding:10px 12px;border-radius:10px;
  border:1px solid rgba(186,228,255,.28);background:rgba(8,18,36,.35)
}
.llc-menu-screen .options-apk-assets h3{margin:0 0 6px;font-size:15px}
.llc-menu-screen .options-apk-assets-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.llc-menu-screen .options-apk-assets-actions .btn-out{width:auto;display:inline-flex}
.apk-asset-first-launch{
  position:fixed;inset:0;z-index:20000;display:flex;align-items:center;justify-content:center;
  padding:max(16px, env(safe-area-inset-top)) 18px;background:rgba(4,8,18,.78)
}
.apk-asset-first-launch[hidden]{display:none!important}
.apk-asset-first-launch-card{
  width:min(440px,100%);max-height:min(88vh,640px);overflow:auto;
  padding:20px 18px;border-radius:14px;background:#0c1730;
  border:1px solid rgba(186,228,255,.35);color:#eef6ff
}
.apk-asset-first-launch-card h2{margin:0 0 10px;font-size:1.25rem}
.apk-asset-first-launch-card p{margin:0 0 10px;font-size:14px;line-height:1.45;color:rgba(255,255,255,.88)}
.apk-asset-first-launch-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.apk-asset-logo{
  display:block;width:min(320px,78vw);height:auto;margin:0 auto 16px
}
.apk-asset-dl-title{margin:0 0 12px;font-size:15px;font-weight:700;text-align:center}
.apk-asset-bar{
  position:relative;height:16px;border-radius:999px;overflow:hidden;
  background:rgba(0,0,0,.45);border:1px solid rgba(186,228,255,.35)
}
.apk-asset-bar-fill{
  height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,#5eead4,#38bdf8,#a78bfa);
  background-size:200% 100%;
  animation:apk-asset-bar-shine 1.4s linear infinite;
  transition:width .18s ease-out
}
@keyframes apk-asset-bar-shine{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
.apk-asset-bar-label{margin:8px 0 0;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.9)}
.llc-menu-screen .options-apk-bar{margin:8px 0 4px}
.llc-menu-screen .queue-other-modes{  margin:2px 0 10px;
  text-align:center;
  color:rgba(255,255,255,.94);
  font-size:12px;
  line-height:1.35;
  text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 10px rgba(0,0,0,.28);
}
#screen-lobby .queue-other-modes{text-align:left;margin:2px 0 8px}
.llc-menu-screen .queue-other-modes-lead,
.llc-menu-screen .queue-other-modes-sep{color:rgba(255,255,255,.94)}
.llc-menu-screen .queue-other-mode-name{
  color:#ffd28a;
  font-weight:700;
  font-style:normal;
  text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 8px rgba(0,0,0,.25);
}
#ranked-search-float{
  position:fixed;top:12px;right:12px;z-index:9000;pointer-events:auto;
  max-width:min(360px,calc(100vw - 24px))}
body:has(#screen-game.active) #ranked-search-float{top:68px}
#ranked-search-float[hidden]{display:none!important}
#casual-search-float{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:12000;
  pointer-events:auto;max-width:min(96vw,420px);
}
body:has(#screen-game.active) #casual-search-float{top:68px}
#casual-search-float[hidden]{display:none!important}
.ranked-search-float-inner{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;border-radius:10px;border:1px solid rgba(186,228,255,.55);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(20,36,58,.94);
  box-shadow:0 8px 28px rgba(0,0,0,.35);color:#fff;font-size:13px}
.ranked-search-float-label{font-weight:800;letter-spacing:.04em;white-space:nowrap}
#ranked-search-float-seconds{font-variant-numeric:tabular-nums;min-width:2.5em;font-weight:700;color:#bae4ff}
#btn-ranked-float-cancel{padding:6px 12px;font-size:11px;margin-left:auto}
#btn-anti-softlock{
  position:fixed;bottom:14px;right:14px;z-index:10150;pointer-events:auto;
  max-width:min(220px,46vw);padding:8px 12px;font-size:11px;line-height:1.3;
  background:rgba(32,14,14,.94);border:1px solid rgba(251,146,60,.55);color:#fdba74;
  border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.5);cursor:pointer;
  font-weight:700;letter-spacing:.02em;
}
#btn-anti-softlock:hover:not(:disabled){filter:brightness(1.08);border-color:rgba(251,146,60,.9)}
#btn-anti-softlock[hidden]{display:none!important}
.llc-menu-screen button:hover:not(:disabled){filter:none}
.llc-menu-screen .llc-menu-hover,.llc-menu-screen .llc-menu-item,.llc-menu-screen .btn-grad,.llc-menu-screen .btn-out,
.llc-menu-screen .btn-solo,.llc-menu-screen .btn-tutorial,.llc-menu-screen .starter-opt,.llc-menu-screen .box-tile,
.llc-menu-screen .rank-card,.llc-menu-screen .deck-slot-btn{position:relative;overflow:hidden}
.llc-menu-screen .llc-menu-hover::before,.llc-menu-screen .llc-menu-item::before,.llc-menu-screen .btn-grad::before,.llc-menu-screen .btn-out::before,
.llc-menu-screen .btn-solo::before,.llc-menu-screen .btn-tutorial::before,.llc-menu-screen .starter-opt::before,.llc-menu-screen .box-tile::before,
.llc-menu-screen .rank-card::before,.llc-menu-screen .deck-slot-btn::before{
  content:'';position:absolute;inset:0;background:rgba(255,255,255,.15);
  transform:scaleX(0);transform-origin:bottom right;transition:transform .3s ease;pointer-events:none}
.llc-menu-screen .llc-menu-hover:hover:not(:disabled)::before,.llc-menu-screen .llc-menu-item:hover:not(:disabled)::before,.llc-menu-screen .btn-grad:hover:not(:disabled)::before,
.llc-menu-screen .btn-out:hover:not(:disabled)::before,.llc-menu-screen .btn-solo:hover:not(:disabled)::before,
.llc-menu-screen .btn-tutorial:hover:not(:disabled)::before,.llc-menu-screen .starter-opt:hover::before,.llc-menu-screen .box-tile:hover::before,
.llc-menu-screen .rank-card:hover::before,.llc-menu-screen .deck-slot-btn:hover::before{
  transform:scaleX(1);transform-origin:bottom left}
.llc-menu-screen .btn-grad,.llc-menu-screen .btn-out,.llc-menu-screen .btn-solo,.llc-menu-screen .btn-ghost{
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;font-weight:700;letter-spacing:.06em;
  transition:color .25s ease,border-color .25s ease,background .25s ease,transform .25s ease}
.llc-menu-screen .btn-grad{
  width:100%;padding:14px 18px;border-radius:10px;border:1px solid rgba(255,255,255,.4);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(52,163,243,.82);
  color:#fff;font-size:15px;box-shadow:none;transform:none}
.llc-menu-screen .btn-out,.llc-menu-screen .btn-solo{
  width:100%;padding:12px 18px;border-radius:10px;border:1px solid #bae4ff;
  background:rgba(52,163,243,.28);color:#fff;font-size:14px;box-shadow:none;transform:none}
.llc-menu-screen .btn-out:hover:not(:disabled),.llc-menu-screen .btn-solo:hover:not(:disabled){
  background:url("../../bg/ptn.png") top center/200px 200px repeat,#bae4ff;color:#4a5c80;transform:none}
.llc-menu-screen .btn-grad:hover:not(:disabled){transform:translateY(-1px)}
.llc-menu-screen .btn-ghost{
  padding:8px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.35);
  background:rgba(52,163,243,.35);color:#fff;font-size:12px}
.llc-menu-screen .btn-ghost:hover:not(:disabled){
  background:url("../../bg/ptn.png") top center/200px 200px repeat,#bae4ff;color:#4a5c80;transform:none}
.llc-menu-screen .options-danger{border-color:rgba(255,180,180,.65);color:#ffe4e6;background:rgba(120,24,48,.28)}
.llc-menu-screen .options-danger:hover:not(:disabled){background:rgba(180,40,70,.45);color:#fff}
.locale-wrap{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.82);position:relative}
.locale-wrap label{
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;font-weight:700;white-space:nowrap;
  letter-spacing:.06em;color:rgba(255,255,255,.82)}
.locale-picker{position:relative;min-width:0}
.locale-picker-toggle{
  appearance:none;-webkit-appearance:none;position:relative;display:inline-flex;align-items:center;gap:8px;
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;font-weight:700;letter-spacing:.04em;
  color:#fff;cursor:pointer;box-sizing:border-box;
  padding:7px 32px 7px 10px;min-height:36px;
  border:1px solid #bae4ff;border-radius:8px;
  background:rgba(255,255,255,.12);
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease,color .25s ease}
.locale-picker-toggle::after{
  content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);width:12px;height:7px;
  pointer-events:none;opacity:.92;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1.25L6 5.75L11 1.25' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.llc-menu-screen .locale-picker-toggle:hover:not(:disabled){
  border-color:rgba(255,255,255,.55);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(52,163,243,.45);
  color:#fff;filter:none}
.locale-picker-toggle:focus,
.locale-picker-toggle[aria-expanded="true"]{
  outline:none;border-color:#fff;background:rgba(255,255,255,.18);
  box-shadow:0 0 0 1px rgba(186,228,255,.35)}
.locale-flag{
  width:20px;height:14px;object-fit:cover;border-radius:2px;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.2);display:block}
.locale-picker-current{white-space:nowrap}
.locale-picker-menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:max(100%,168px);
  display:flex;flex-direction:column;gap:4px;padding:6px;
  border-radius:10px;border:1px solid #bae4ff;
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(20,36,58,.96);
  box-shadow:0 12px 28px rgba(0,0,0,.4)}
.locale-picker-menu[hidden]{display:none!important}
.locale-picker-option{
  display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:8px;
  border:1px solid transparent;background:transparent;color:#fff;
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;font-weight:700;font-size:13px;
  cursor:pointer;text-align:left;
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.llc-menu-screen .locale-picker-option:hover:not(:disabled),
.llc-menu-screen .locale-picker-option:focus{
  outline:none;border-color:rgba(255,255,255,.45);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(52,163,243,.45);
  color:#fff;filter:none}
.locale-picker-option.is-active{
  border-color:#bae4ff;background:rgba(52,163,243,.35)}
.logo-foot .locale-wrap{grid-column:1 / -1;margin-top:10px;justify-content:center;width:100%}
.hub-top-actions .locale-wrap{margin-right:4px}
/* Title logo row — centered art + news button on the right */
.logo-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,min(420px,72vw)) minmax(0,1fr);
  align-items:start;width:100%;max-width:min(520px,92vw);
  margin:0 auto clamp(12px,2vh,20px);flex-shrink:0}
/* ~1080p usable height: shrink title art so logo + news stay fully on-screen */
@media (max-height: 1000px) {
  .llc-menu-screen .logo-img{max-width:min(340px,58vw)}
  .llc-menu-screen .logo-row{
    grid-template-columns:minmax(0,1fr) minmax(0,min(340px,58vw)) minmax(0,1fr);
    margin-bottom:clamp(6px,1.2vh,12px);
  }
  .llc-menu-screen .llc-menu-item{min-height:58px}
}
@media (max-height: 860px) {
  .llc-menu-screen .logo-img{max-width:min(280px,50vw)}
  .llc-menu-screen .logo-row{
    grid-template-columns:minmax(0,1fr) minmax(0,min(280px,50vw)) minmax(0,1fr);
  }
}
.logo-row .logo{grid-column:2;margin-bottom:0;max-width:none;width:100%}
.logo-row-side--left{grid-column:1}
.logo-row-side--right{
  grid-column:3;display:flex;justify-content:flex-start;align-items:flex-start;
  padding:clamp(4px,1.2vw,10px) 0 0 clamp(6px,1.5vw,12px)}
.news-fab{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;border:none;
  background:transparent;cursor:pointer;color:#fff;font-family:inherit;position:relative}
.news-fab-icon{
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka One',cursive;font-size:24px;font-weight:700;line-height:1;color:#fff;
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(52,163,243,.92);
  border:1px solid rgba(255,255,255,.45);box-shadow:0 4px 16px rgba(0,0,0,.28);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
.news-fab:hover .news-fab-icon{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.34)}
.news-fab-label{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.45)}
.news-fab-badge{
  position:absolute;top:-2px;right:-4px;z-index:2;padding:2px 6px;border-radius:999px;
  font-size:9px;font-weight:900;letter-spacing:.04em;line-height:1.2;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,var(--pink),var(--pink-d));
  border:1px solid rgba(255,255,255,.55);box-shadow:0 2px 10px rgba(255,107,168,.55);
  pointer-events:none}
.news-fab-badge[hidden]{display:none!important}
.news-fab--new .news-fab-icon{
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(255,107,168,.94);
  border-color:rgba(255,179,209,.85);
  box-shadow:0 0 0 2px rgba(255,107,168,.35),0 0 18px rgba(255,107,168,.65),0 4px 16px rgba(0,0,0,.28);
  animation:newsFabGlow 1.6s ease-in-out infinite}
.news-fab--new .news-fab-label{color:var(--pink-l)}
.news-fab--new:hover .news-fab-icon{
  box-shadow:0 0 0 2px rgba(255,107,168,.45),0 0 22px rgba(255,107,168,.75),0 6px 20px rgba(0,0,0,.34)}
@keyframes newsFabGlow{
  0%,100%{box-shadow:0 0 0 2px rgba(255,107,168,.3),0 0 14px rgba(255,107,168,.5),0 4px 16px rgba(0,0,0,.28)}
  50%{box-shadow:0 0 0 3px rgba(255,107,168,.5),0 0 24px rgba(255,107,168,.85),0 4px 16px rgba(0,0,0,.28)}
}
html[lang="ja"] .news-fab-label{text-transform:none;letter-spacing:.04em;font-size:11px}
html[lang="ja"] .news-fab-badge,
html[lang="ko"] .news-fab-badge{text-transform:none;letter-spacing:.02em;font-size:10px}
#overlay-news .news-list-item--new{
  border-color:rgba(255,107,168,.7)!important;
  box-shadow:0 0 0 1px rgba(255,107,168,.35),0 8px 22px rgba(255,107,168,.2);
  background:linear-gradient(135deg,rgba(255,107,168,.22),rgba(255,255,255,.06))}
#overlay-news .news-list-item-new-tag{
  display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  font-size:10px;font-weight:900;letter-spacing:.04em;vertical-align:middle;
  color:#fff;background:linear-gradient(135deg,var(--pink),var(--pink-d));
  border:1px solid rgba(255,255,255,.4)}
html[lang="ja"] #overlay-news .news-list-item-new-tag,
html[lang="ko"] #overlay-news .news-list-item-new-tag{text-transform:none;letter-spacing:.02em}

/* Shop cosmetics "New" (playmats / sleeves) — mirrors news FAB highlight */
.shop-new-badge{
  position:absolute;top:6px;right:6px;z-index:3;padding:2px 7px;border-radius:999px;
  font-size:9px;font-weight:900;letter-spacing:.04em;line-height:1.2;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,var(--pink),var(--pink-d));
  border:1px solid rgba(255,255,255,.55);box-shadow:0 2px 10px rgba(255,107,168,.45);
  pointer-events:none;white-space:nowrap}
#btn-hub-shop.is-shop-new,
.shop-hub-tile.is-shop-new,
.sleeve-shop-gen.is-shop-new,
.sleeve-shop-char.is-shop-new{
  position:relative;
  box-shadow:0 0 0 2px rgba(255,107,168,.45),0 0 18px rgba(255,107,168,.35)}
/* Bleed "New" above category / character boxes without shifting layout */
.sleeve-shop-gen.is-shop-new{overflow:visible;z-index:2}
.sleeve-shop-char.is-shop-new{z-index:2}
#btn-hub-shop.is-shop-new{animation:newsFabGlow 1.6s ease-in-out infinite}
.sleeve-shop-tile.is-shop-new{position:relative;outline:2px solid rgba(255,107,168,.65)}
.sleeve-shop-tile.is-shop-new > .shop-new-badge{top:4px;right:4px}
.sleeve-shop-gen.is-shop-new > .shop-new-badge,
.sleeve-shop-char.is-shop-new > .shop-new-badge{
  top:-8px;right:-6px;z-index:4}
.shop-hub-tile{position:relative}
.shop-hub-tile.is-shop-new > .shop-new-badge{top:10px;right:10px}
html[lang="ja"] .shop-new-badge,
html[lang="ko"] .shop-new-badge{text-transform:none;letter-spacing:.02em;font-size:10px}

body.news-overlay-open{overflow:hidden}
#overlay-news.llc-menu-screen{
  position:fixed;inset:0;z-index:8750;display:none;align-items:center;justify-content:center;
  overflow:hidden;padding:clamp(12px,3vw,24px) 16px;
  background:rgba(4,10,24,.78);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#overlay-news.open{display:flex}
#overlay-news .news-shell{
  max-width:min(480px,94vw);width:100%;margin-block:auto;min-height:0;
  display:flex;flex-direction:column;overflow:hidden;
  padding:clamp(16px,2.6vw,24px) clamp(14px,2.2vw,20px);
  border-radius:16px;border:1px solid rgba(255,255,255,.44);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(38,132,210,.9);
  box-shadow:0 18px 52px rgba(0,0,0,.45),0 0 32px rgba(52,163,243,.24),inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#overlay-news .news-shell.news-shell--detail{max-width:min(640px,96vw)}
#overlay-news .account-shell{
  width:100%;margin-block:0;gap:0;flex:0 1 auto;min-height:0}
#overlay-news .news-panel-shell{
  display:flex;flex-direction:column;min-height:0;overflow:hidden;width:100%;
  background:transparent;border:none;border-radius:0;padding:0;box-shadow:none;backdrop-filter:none}
#overlay-news .news-shell:not(.news-shell--detail) .news-panel-shell{
  max-height:min(68vh,600px);height:auto;flex:0 1 auto}
#overlay-news .news-shell--detail .news-panel-shell{max-height:min(82vh,760px);flex:1 1 auto}
#overlay-news #news-list-pane[hidden],
#overlay-news #news-detail-pane[hidden]{display:none!important}
#overlay-news #news-list-pane:not([hidden]),
#overlay-news #news-detail-pane:not([hidden]){
  display:flex;flex-direction:column;min-height:0;overflow:hidden}
#overlay-news .news-shell:not(.news-shell--detail) #news-list-pane:not([hidden]){flex:0 1 auto;max-height:min(calc(68vh - 56px),544px)}
#overlay-news .news-shell--detail #news-detail-pane:not([hidden]){flex:1 1 auto}
#overlay-news .account-screen-head{margin-bottom:8px;flex:0 0 auto}
#overlay-news .news-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding-right:6px;margin-right:-2px;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,179,209,.75) rgba(255,255,255,.12);
}
#overlay-news .news-scroll::-webkit-scrollbar{width:6px}
#overlay-news .news-scroll::-webkit-scrollbar-track{
  background:rgba(255,255,255,.12);
  border-radius:999px;
  margin:6px 0;
}
#overlay-news .news-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--pink-l),var(--pink));
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 0 8px rgba(255,107,168,.28);
}
#overlay-news .news-scroll::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#fff,var(--pink-l));
}
#overlay-news .news-shell:not(.news-shell--detail) #news-list-scroll{
  flex:0 1 auto;max-height:min(calc(68vh - 56px),544px)}
#overlay-news .news-scroll .llc-menu-list{margin-top:0}
#overlay-news .news-empty{font-size:14px;color:rgba(255,255,255,.94);text-align:center;margin:18px 8px;line-height:1.55;letter-spacing:.04em}
#overlay-news .news-list-item{min-height:58px}
#overlay-news .account-screen-head .news-head-close{
  flex:0 0 auto;margin-left:0;white-space:nowrap}
#overlay-news .news-detail-banner-wrap{margin:0 0 14px}
#overlay-news .news-detail-banner-wrap[hidden]{display:none!important}
#overlay-news .news-detail-banner-wrap--crop .news-detail-banner{
  display:block;width:100%;height:clamp(120px,22vw,180px);object-fit:cover;object-position:center;
  border-radius:10px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08)}
#overlay-news .news-detail-banner-wrap--full{
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(132px,24vw,196px);padding:8px 0;margin:0 0 14px;
  border:none;border-radius:0;background:transparent;box-shadow:none}
#overlay-news .news-detail-banner-wrap--full .news-detail-banner{
  display:block;width:auto;max-width:min(92%,340px);height:auto;
  max-height:clamp(108px,20vw,168px);object-fit:contain;object-position:center;
  border:none;border-radius:0;background:transparent;box-shadow:none}
#overlay-news .news-detail-banner-wrap--wide{
  display:flex;align-items:center;justify-content:center;
  min-height:0;padding:4px 0;margin:0 0 14px;
  border:none;border-radius:0;background:transparent;box-shadow:none}
#overlay-news .news-detail-banner-wrap--wide .news-detail-banner{
  display:block;width:100%;max-width:100%;height:auto;
  max-height:clamp(140px,32vw,220px);object-fit:contain;object-position:center;
  border:none;border-radius:8px;background:transparent;box-shadow:none}
#overlay-news .news-detail-body{margin:0;padding-bottom:8px;overflow-wrap:anywhere;word-break:break-word}
#overlay-news .news-detail-body strong{font-weight:700;color:#fff}
#overlay-news .news-detail-body a.news-ext-link{
  color:#bae4ff;font-weight:700;text-decoration:underline;text-underline-offset:2px}
#overlay-news .news-detail-body a.news-ext-link:hover{color:#fff}
#overlay-news .news-card-id{
  display:inline;padding:1px 6px;margin:0 1px;border-radius:6px;border:1px solid rgba(186,228,255,.45);
  background:rgba(52,163,243,.35);color:#fff;font:inherit;font-size:.92em;font-weight:700;
  letter-spacing:.02em;cursor:pointer;vertical-align:baseline;line-height:1.45}
#overlay-news .news-card-id:hover{
  background:url("../../bg/ptn.png") top center/200px 200px repeat,#bae4ff;color:#4a5c80}
body.news-overlay-open #modal-card.open{z-index:8900}
body.locale-ja{font-family:'Zen Kaku Gothic New','Nunito',sans-serif}
body.locale-ja .llc-menu-item-title{font-family:'Zen Kaku Gothic New','Nunito',sans-serif}
body.locale-ko{font-family:'Noto Sans KR','Nunito',sans-serif}
body.locale-ko .llc-menu-item-title{font-family:'Noto Sans KR','Nunito',sans-serif}
body.locale-zh{font-family:'Noto Sans SC','Nunito',sans-serif}
body.locale-zh .llc-menu-item-title{font-family:'Noto Sans SC','Nunito',sans-serif}
body.locale-th{font-family:'Noto Sans Thai','Nunito',sans-serif}
body.locale-th .llc-menu-item-title{font-family:'Noto Sans Thai','Nunito',sans-serif}
.llc-menu-screen .lerr{color:#ffd6e8;font-weight:700}
.llc-menu-screen .hub-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.llc-menu-screen .hub-top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.llc-menu-screen .hub-user{font-size:14px;color:rgba(255,255,255,.95);letter-spacing:.04em}
.llc-menu-list{display:flex;flex-direction:column;gap:10px;margin:16px 0 0;width:100%}
.llc-menu-row{display:flex;flex-direction:row;align-items:stretch;gap:10px;width:100%}
.llc-menu-row > .llc-menu-item{
  flex:1 1 0;width:auto;min-width:0;padding:12px 14px;
}
.llc-menu-row--deck > .llc-menu-item--wide{flex:3 1 0}
.llc-menu-row--deck > .llc-menu-item--narrow{flex:1 1 0}
.llc-menu-row--deck > .llc-menu-item--narrow .llc-menu-item-sub{display:none}
.llc-menu-row--deck > .llc-menu-item--tiny{flex:0 0 auto;min-width:72px;max-width:96px;padding:10px 8px}
.llc-menu-row--deck > .llc-menu-item--tiny .llc-menu-item-sub{display:none}
.llc-menu-row--deck > .llc-menu-item--tiny .llc-menu-item-title{font-size:12px;letter-spacing:.02em;padding-left:14px}
.llc-menu-row--deck > .llc-menu-item--tiny .llc-menu-item-title::before{width:8px;height:14px;top:.5em}
.llc-menu-row--collect > .llc-menu-item--wide{flex:4 1 0}
.llc-menu-row--collect > .llc-menu-item--narrow{flex:1 1 0}
.llc-menu-row--collect > .llc-menu-item--narrow .llc-menu-item-sub{display:none}
.llc-menu-row .llc-menu-item-title{font-size:15px;letter-spacing:.04em}
.llc-menu-row .llc-menu-item-sub{font-size:11px;margin-left:16px;line-height:1.35}
@media (max-width: 420px) {
  .llc-menu-row{gap:8px}
  .llc-menu-row > .llc-menu-item{padding:10px 10px;min-height:58px}
  .llc-menu-row .llc-menu-item-title{font-size:13px;padding-left:16px}
  .llc-menu-row .llc-menu-item-sub{font-size:10px;margin-left:16px}
}
.llc-menu-item{
  display:flex;align-items:stretch;gap:0;width:100%;min-height:68px;padding:14px 18px;
  border:1px solid rgba(255,255,255,.4);border-radius:10px;
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(52,163,243,.82);
  color:#fff;text-align:left;cursor:pointer;transform:none}
.llc-menu-item:hover:not(:disabled){transform:none}
/* Soft accent fills + light 1px tinted borders (All Stars-style color cues). */
.llc-menu-item.llc-menu-accent-pink,
.llc-menu-item.llc-menu-accent-green,
.llc-menu-item.llc-menu-accent-blue,
.llc-menu-item.llc-menu-accent-sky,
.llc-menu-item.llc-menu-accent-purple,
.llc-menu-item.llc-menu-accent-violet{
  border-width:1px;
  box-shadow:none;
}
.llc-menu-item.llc-menu-accent-pink{
  border-color:rgba(255,170,210,.55);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(232,72,153,.38);
}
.llc-menu-item.llc-menu-accent-pink:hover:not(:disabled){
  border-color:rgba(255,190,220,.75);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(244,114,182,.50);
}
.llc-menu-item.llc-menu-accent-green{
  border-color:rgba(150,230,180,.55);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(34,160,90,.38);
}
.llc-menu-item.llc-menu-accent-green:hover:not(:disabled){
  border-color:rgba(170,240,200,.75);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(46,190,110,.50);
}
.llc-menu-item.llc-menu-accent-blue{
  border-color:rgba(150,195,255,.55);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(37,99,200,.38);
}
.llc-menu-item.llc-menu-accent-blue:hover:not(:disabled){
  border-color:rgba(175,210,255,.75);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(59,130,246,.50);
}
.llc-menu-item.llc-menu-accent-sky{
  border-color:rgba(150,220,240,.55);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(14,140,180,.36);
}
.llc-menu-item.llc-menu-accent-sky:hover:not(:disabled){
  border-color:rgba(175,230,250,.75);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(34,170,210,.48);
}
.llc-menu-item.llc-menu-accent-purple{
  border-color:rgba(190,175,245,.55);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(109,70,196,.38);
}
.llc-menu-item.llc-menu-accent-purple:hover:not(:disabled){
  border-color:rgba(210,200,255,.75);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(139,92,246,.50);
}
/* Tournament — deeper pastel violet than Replay / How to Play purple */
.llc-menu-item.llc-menu-accent-violet{
  border-color:rgba(165,145,230,.58);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(78,48,158,.46);
}
.llc-menu-item.llc-menu-accent-violet:hover:not(:disabled){
  border-color:rgba(190,175,245,.78);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(98,62,185,.56);
}
a.llc-apk-promo{
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:14px;
  cursor:pointer;
}
a.llc-apk-promo .llc-apk-icon{
  flex:0 0 auto;
  width:56px;
  height:56px;
  border-radius:14px;
  object-fit:cover;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  background:rgba(8,14,28,.55);
}
a.llc-apk-promo .llc-menu-item-body{
  flex:1 1 auto;
  min-width:0;
}
a.llc-apk-promo .llc-menu-item-title{
  padding-left:0;
}
a.llc-apk-promo .llc-menu-item-title::before{display:none}
a.llc-apk-promo .llc-menu-item-sub{
  margin-left:0;
}
a.llc-apk-promo[hidden]{display:none!important}
html.tcg-portrait-play a.llc-apk-promo{display:none!important}
.llc-menu-item-body{display:flex;flex-direction:column;justify-content:center;min-width:0;position:relative;z-index:1}
.llc-menu-item-title{
  position:relative;padding-left:18px;font-weight:500;font-size:16px;line-height:1.55;letter-spacing:.06em;color:#fff}
.llc-menu-item-title::before{
  content:'';position:absolute;left:0;top:.45em;width:11px;height:18px;transform:translateY(-50%);
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 11 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 9C3.03757 9 5.5 4.97056 5.5 0C5.5 4.97056 7.96243 9 11 9C7.96243 9 5.5 13.0294 5.5 18C5.5 13.0294 3.03757 9 0 9Z' fill='white'/%3E%3C/svg%3E") center/contain no-repeat}
.llc-menu-item-sub{font-size:12px;line-height:1.45;color:rgba(255,255,255,.78);margin:2px 0 0 18px;letter-spacing:.04em}
.llc-menu-item-note{
  display:inline-block;margin:-4px 0 10px 18px;padding:0;border:0;background:none;
  font-size:11px;line-height:1.4;letter-spacing:.03em;color:rgba(186,228,255,.82);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.llc-menu-item-note:hover{color:#ffb8dc}
.llc-menu-item.tcg-debug-only{display:none}
body.tcg-debug-on .llc-menu-item.tcg-debug-only{display:flex}
.llc-menu-screen .logo{text-align:center;align-self:center}
.llc-menu-screen .auth-box{text-align:center;padding:28px 20px;flex:0 0 auto;width:100%}
.llc-menu-screen .auth-guest-menu{margin-top:12px}
.llc-menu-screen .auth-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px;width:100%;max-width:320px;margin-left:auto;margin-right:auto}
.llc-menu-screen .rank-card{
  border-radius:10px;border:1px solid rgba(255,255,255,.4);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(52,163,243,.72);box-shadow:none}
.llc-menu-screen .rank-card.is-you{border-color:#fff;box-shadow:0 0 0 2px rgba(186,228,255,.45)}
.llc-menu-screen .rank-pos{color:#ffd6e8}
.llc-menu-screen .deck-slot-btn{
  border:1px solid rgba(255,255,255,.35);background:rgba(52,163,243,.35);border-radius:8px}
.llc-menu-screen .deck-slot-btn.active,.llc-menu-screen .deck-slot-btn.equipped{border-color:#fff}
.llc-menu-screen .btn-tutorial{
  width:100%;padding:12px 18px;border-radius:10px;border:1px solid #bae4ff;
  background:rgba(52,163,243,.28);color:#fff;font-size:14px;font-weight:700;
  box-shadow:none;letter-spacing:.06em}
.llc-menu-screen .btn-tutorial:hover:not(:disabled){
  background:url("../../bg/ptn.png") top center/200px 200px repeat,#bae4ff;color:#4a5c80;transform:none}
.llc-menu-screen .divider::before,.llc-menu-screen .divider::after{background:rgba(255,255,255,.22)}
#screen-lobby.llc-menu-screen{align-items:center}
#screen-lobby.llc-menu-screen .account-shell.wide{max-width:min(920px,96vw)}
#screen-lobby.llc-menu-screen .lobby-menu{align-items:center;width:100%}
#screen-lobby.llc-menu-screen .lobby-setup{width:100%;max-width:min(430px,100%);margin-inline:auto}
#screen-lobby.llc-menu-screen .panel h2{text-align:center}
#screen-ranked.llc-menu-screen .account-panel{text-align:left}
.llc-menu-back-row{margin:0 0 10px;text-align:left}
.llc-menu-back-row .btn-ghost{width:auto;display:inline-flex}
.llc-menu-back-row .btn-ghost::before{content:'‹ ';opacity:.85}
.llc-menu-screen .account-screen-head{
  display:flex;
  align-items:center;
  gap:10px 12px;
  width:100%;
  margin:0 0 12px;
  align-self:stretch;
  min-width:0}
.llc-menu-screen .account-screen-head .btn-ghost,
.llc-menu-screen .account-screen-head > button{
  flex:0 0 auto;
  width:auto;max-width:none;align-self:center;white-space:nowrap;
  position:relative;z-index:2}
.llc-menu-screen .account-screen-head h2{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  text-align:center;
  line-height:1.15;
  font-size:clamp(17px,2.2vw + 0.65rem,34px);
  overflow-wrap:break-word;
  text-wrap:balance;
  position:relative;z-index:1}
.account-shell{width:100%;max-width:min(720px,96vw);flex:0 0 auto;display:flex;
  flex-direction:column;align-items:stretch;gap:clamp(10px,1.8vh,18px);margin-block:auto}
.account-shell.wide{max-width:min(900px,96vw)}
.account-panel{width:100%;flex:0 0 auto}
.account-lead{text-align:left;line-height:1.5;margin:0 0 4px}
.starter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:12px}
.starter-opt{
  padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.4);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(52,163,243,.72);
  cursor:pointer;text-align:center;color:#fff;font-family:'Zen Kaku Gothic New','Nunito',sans-serif}
.starter-opt:hover{transform:none}
.starter-opt img{width:100%;max-height:120px;object-fit:contain;border-radius:8px;background:rgba(255,255,255,.08)}
.starter-opt .starter-name{font-size:13px;font-weight:700;color:#fff;margin-top:8px;line-height:1.35;letter-spacing:.04em}
.starter-opt.sel{border-color:#fff;box-shadow:0 0 0 2px rgba(186,228,255,.55),0 0 18px rgba(186,228,255,.25)}
.account-shell.booster-shell{max-width:min(1200px,98vw)}
.account-shell.card-list-shell{max-width:min(1120px,98vw)}
/* Always-on pink scrollbar (overlay scrollbars hide on some Windows/macOS browsers). */
#screen-card-list.llc-menu-screen{
  min-height:0;
  height:100%;
  max-height:100%;
  overflow-x:hidden;
  overflow-y:scroll;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,179,209,.75) rgba(255,255,255,.12);
}
#screen-card-list.llc-menu-screen::-webkit-scrollbar{width:8px}
#screen-card-list.llc-menu-screen::-webkit-scrollbar-track{
  background:rgba(255,255,255,.12);border-radius:999px;margin:6px 0}
#screen-card-list.llc-menu-screen::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--pink-l),var(--pink));border-radius:999px;
  border:1px solid rgba(255,255,255,.28);box-shadow:0 0 8px rgba(255,107,168,.28)}
#screen-card-list.llc-menu-screen::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#fff,var(--pink-l))}
#screen-card-list .card-list-lead{
  margin:0 0 10px;max-width:42em
}
#screen-card-list .card-list-progress{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin:0 0 14px;padding:10px 14px;border-radius:12px;
  border:1px solid rgba(255,179,209,.28);
  background:
    linear-gradient(135deg,rgba(255,107,168,.14),rgba(186,120,255,.08) 55%,rgba(0,0,0,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)
}
#screen-card-list .card-list-progress-label{
  font-family:'Libre Baskerville',serif;font-size:13px;font-weight:700;
  letter-spacing:.04em;color:rgba(255,255,255,.78)
}
#screen-card-list .card-list-progress-value{
  font-family:'Fredoka One',cursive;font-size:22px;line-height:1;letter-spacing:.02em;
  color:#fff;text-shadow:0 1px 10px rgba(255,107,168,.35)
}
#screen-card-list .card-list-progress-bar{
  flex:1 1 140px;min-width:120px;height:8px;border-radius:999px;
  background:rgba(255,255,255,.12);overflow:hidden;
  border:1px solid rgba(255,255,255,.1)
}
#screen-card-list .card-list-progress-bar > i{
  display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--pink-d),var(--pink-l));
  box-shadow:0 0 10px rgba(255,107,168,.45);
  transition:width .35s ease
}
#screen-card-list .card-list-body{padding:2px 0 8px}
#screen-card-list .card-list-section{margin-top:18px}
#screen-card-list .card-list-section:first-child{margin-top:4px}
#screen-card-list .card-list-section-head{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 12px;padding:10px 2px 10px;
  background:linear-gradient(180deg,rgba(50,157,255,.96) 0%,rgba(50,157,255,.88) 55%,rgba(50,157,255,.55) 100%);
  border-bottom:1px solid rgba(255,179,209,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
#screen-card-list .card-list-section-head h3{
  margin:0;flex:1 1 auto;min-width:0;
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;
  font-size:15px;font-weight:700;letter-spacing:.04em;line-height:1.35;
  color:#fff;text-align:left
}
#screen-card-list .card-list-section-chip{
  flex:0 0 auto;padding:4px 10px;border-radius:999px;
  border:1px solid rgba(255,179,209,.35);
  background:rgba(255,107,168,.14);
  font-family:'Libre Baskerville',serif;font-size:12px;font-weight:700;
  color:var(--pink-l);letter-spacing:.03em;white-space:nowrap
}
#screen-card-list .card-list-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:10px;justify-items:center
}
#screen-card-list .deck-card-tile{
  cursor:pointer;width:100%;max-width:96px;aspect-ratio:63/88;height:auto;
  border-radius:8px;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 16px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.06);
  background:#111;transition:border-color .15s ease,box-shadow .15s ease,opacity .15s ease,filter .15s ease
}
#screen-card-list .deck-card-tile:hover{
  border-color:var(--pink);
  box-shadow:0 8px 22px rgba(0,0,0,.45),0 0 0 1px rgba(255,107,168,.4),0 0 18px rgba(255,107,168,.2)
}
#screen-card-list .deck-card-tile.card-list-unowned{
  opacity:.46;filter:saturate(.35) brightness(.72)
}
#screen-card-list .deck-card-tile.card-list-unowned:hover{
  opacity:.68;filter:saturate(.55) brightness(.85)
}
#screen-card-list .deck-card-tile.card-list-owned{
  border-color:rgba(255,179,209,.28)
}
@media (max-width:640px){
  #screen-card-list .card-list-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:7px}
  #screen-card-list .deck-card-tile{max-width:78px}
  #screen-card-list .card-list-section-head h3{font-size:13px}
  #screen-card-list .card-list-progress-value{font-size:18px}
}
.box-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:14px}
.booster-open-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.booster-open-actions .btn-grad:disabled,
.booster-open-actions .btn-out:disabled,
#modal-paid-booster .paid-booster-actions .btn-grad:disabled{
  opacity:.42;filter:grayscale(.35);cursor:not-allowed;box-shadow:none}
.box-tile{
  border-radius:10px;border:1px solid rgba(255,255,255,.4);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(52,163,243,.72);
  padding:14px;cursor:pointer;text-align:center;color:#fff}
.box-tile:hover{transform:none}
.box-tile img{width:100%;max-height:210px;object-fit:contain;border-radius:8px;background:rgba(255,255,255,.08)}
.box-tile-ph{
  width:100%;min-height:160px;max-height:210px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:linear-gradient(145deg,rgba(255,215,120,.22),rgba(186,120,255,.28) 55%,rgba(120,200,255,.2));
  border:1px solid rgba(255,255,255,.18);font-size:42px;font-weight:900;letter-spacing:.12em;color:rgba(255,255,255,.92);
  text-shadow:0 2px 12px rgba(0,0,0,.45)}
.box-tile.sel .box-tile-ph{border-color:rgba(186,228,255,.65);box-shadow:inset 0 0 0 1px rgba(186,228,255,.35)}
.box-tile.sel{border-color:#fff;box-shadow:0 0 0 2px rgba(186,228,255,.55),0 0 18px rgba(186,228,255,.25)}
.box-tile .box-name{font-size:15px;font-weight:700;color:#fff;margin-top:10px;line-height:1.35;letter-spacing:.04em}
.box-tile{position:relative}
.box-info-btn{
  position:absolute;top:8px;right:8px;z-index:2;
  padding:4px 10px;font-size:11px;font-weight:700;letter-spacing:.04em;
  border-radius:6px;border:1px solid rgba(255,255,255,.35);
  background:rgba(8,16,32,.72);color:#fff;cursor:pointer;
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif}
.box-info-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}
#modal-booster-rates .mbox{max-width:min(720px,96vw);max-height:min(88vh,920px);display:flex;flex-direction:column}
.booster-rates-head{margin:0 0 4px;text-align:center;color:#fff;font-size:1.15rem}
.booster-rates-lead{font-size:12px;color:rgba(255,255,255,.62);text-align:center;margin:0 0 12px;line-height:1.45}
.booster-rates-rarity{margin-bottom:14px}
.booster-rates-rarity h3,.booster-rates-cards h3{
  margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(186,228,255,.92)}
.booster-rates-rarity-grid{display:flex;flex-wrap:wrap;gap:6px}
.booster-rarity-chip{
  font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff}
.booster-rarity-chip .brp{color:rgba(255,255,255,.72);font-weight:600;margin-left:4px}
.booster-rates-scroll{flex:1;min-height:0;overflow-y:auto;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(0,0,0,.18)}
.booster-rates-cardlist{list-style:none;margin:0;padding:6px}
.booster-rates-card{
  display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;
  padding:8px 10px;border-radius:8px;border:1px solid transparent}
.booster-rates-card+.booster-rates-card{border-top:1px solid rgba(255,255,255,.06)}
.booster-rates-card:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.booster-rates-thumb{
  width:44px;height:62px;border-radius:5px;overflow:hidden;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);cursor:pointer;padding:0;position:relative}
.booster-rates-thumb > img,
.booster-rates-thumb > .card-face-fill,
.booster-rates-thumb > .noimg{width:100%;height:100%;object-fit:contain;display:block}
.booster-rates-thumb .card-landscape-in-portrait,
.booster-rates-thumb .card-art.live-sideways{
  border-radius:inherit}
.booster-rates-thumb .card-landscape-in-portrait img,
.booster-rates-thumb .card-landscape-in-portrait .noimg,
.booster-rates-thumb .card-art.live-sideways img,
.booster-rates-thumb .card-art.live-sideways .noimg{object-fit:contain}
.booster-rates-meta{min-width:0}
.booster-rates-id{font-size:10px;color:rgba(255,255,255,.55);font-family:ui-monospace,monospace;word-break:break-all}
.booster-rates-name{font-size:12px;font-weight:700;color:#fff;line-height:1.3;margin-top:2px}
.booster-rates-sub{font-size:10px;color:rgba(255,255,255,.55);margin-top:2px}
.booster-rates-pct{font-size:12px;font-weight:700;color:rgba(186,228,255,.95);white-space:nowrap}
.booster-rates-notes{margin:10px 0 0;padding:0;list-style:none;font-size:11px;color:rgba(255,255,255,.55);line-height:1.45}
.booster-rates-notes li+li{margin-top:4px}
.booster-rates-loading{text-align:center;padding:28px 12px;color:rgba(255,255,255,.65);font-size:13px}
@media(max-width:520px){
  .box-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
  .box-tile img{max-height:160px}
  .box-tile .box-name{font-size:13px}
}
.pack-reveal{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0}
.pack-card{width:72px;text-align:center;font-size:10px;color:rgba(255,255,255,.92)}
.pack-card img{width:72px;border-radius:6px}
#overlay-pack-open{
  position:fixed;inset:0;z-index:9500;
  background:radial-gradient(ellipse 80% 70% at 50% 42%,rgba(18,28,48,.97) 0%,rgba(6,10,18,.98) 100%);
  display:none;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
#overlay-pack-open.active{display:flex;cursor:pointer}
#overlay-pack-open .pack-open-skip{
  position:absolute;top:clamp(12px,2vh,20px);right:clamp(12px,2vw,20px);z-index:40;
  display:none;width:auto;padding:8px 14px;font-size:12px;font-weight:700;letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.22);border-radius:8px;background:rgba(255,255,255,.08);color:#fff;
  cursor:pointer;font-family:'Zen Kaku Gothic New','Nunito',sans-serif;pointer-events:auto;
  transition:background .2s ease,border-color .2s ease}
#overlay-pack-open.active .pack-open-skip{display:inline-flex;align-items:center}
#overlay-pack-open .pack-open-skip:hover{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.38);color:#fff}
#overlay-pack-open.phase-ready{cursor:pointer}
#overlay-pack-open.phase-cards{cursor:pointer}
.pack-open-stage{position:relative;width:min(720px,96vw);height:min(85vh,900px);display:flex;
  align-items:center;justify-content:center;flex-direction:column}
.pack-open-hint{
  position:absolute;bottom:clamp(16px,4vh,36px);left:50%;transform:translateX(-50%);
  margin:0;font-size:13px;font-weight:600;color:rgba(255,255,255,.62);letter-spacing:.06em;
  pointer-events:none;opacity:0;transition:opacity .35s ease;z-index:30;text-align:center;white-space:nowrap;
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;text-transform:uppercase}
#overlay-pack-open.phase-ready .pack-open-hint,
#overlay-pack-open.phase-cards .pack-open-hint{opacity:1}
@keyframes pack-idle{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
#overlay-pack-open.phase-ready .pack-open-pack{
  animation:pack-idle 3.2s ease-in-out infinite}
#overlay-pack-open.phase-rip .pack-open-pack,
#overlay-pack-open.phase-pack-down .pack-open-pack{animation:none}
.pack-open-pack{
  position:absolute;z-index:5;
  transition:transform .85s cubic-bezier(.4,0,.2,1)}
.pack-open-pack.style-photo{width:min(340px,52vw);aspect-ratio:520/980}
.pack-open-pack.style-promo{
  width:min(340px,52vw);aspect-ratio:520/900;border-radius:8px 8px 10px 10px;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.45))}
.pack-open-sleeve{position:relative;width:100%;height:100%;border-radius:inherit;overflow:visible;
  box-shadow:0 10px 32px rgba(0,0,0,.42)}
.pack-open-art-stack{position:relative;width:100%;height:100%;border-radius:inherit;overflow:hidden;background:transparent}
.pack-open-art{
  position:absolute;left:0;top:0;width:100%;height:100%;display:block;
  object-fit:fill;object-position:center center;pointer-events:none;user-select:none}
.pack-open-pack.style-photo .pack-open-art{
  object-fit:contain;object-position:center center}
.pack-open-pack.style-photo .pack-open-top .pack-open-art{
  object-fit:contain;object-position:center top}
.pack-open-body-art{z-index:1;border-radius:inherit;
  transition:clip-path .2s ease,-webkit-clip-path .2s ease,opacity .12s ease}
.pack-open-pack:not(.pack-art-ready) .pack-open-body-art,
.pack-open-pack:not(.pack-art-ready) .pack-open-top .pack-open-art{opacity:0}
.pack-open-pack.pack-art-ready .pack-open-body-art,
.pack-open-pack.pack-art-ready .pack-open-top .pack-open-art{opacity:1}
.pack-open-pack.style-photo .pack-open-body-art,
.pack-open-pack.style-promo .pack-open-body-art{
  clip-path:inset(calc(var(--rip-cut, 13%) - 1px) 0 0 0 round 0);
  -webkit-clip-path:inset(calc(var(--rip-cut, 13%) - 1px) 0 0 0 round 0)}
.pack-open-top{
  position:absolute;left:0;top:0;right:0;z-index:4;overflow:hidden;
  height:var(--rip-cut, 13%);
  transform-origin:18% 100%;
  transition:transform .72s cubic-bezier(.4,0,.2,1),opacity .28s ease .38s,visibility 0s linear .72s}
.pack-open-top .pack-open-art{
  position:absolute;left:0;top:0;width:100%;
  object-fit:fill;object-position:center top;
  height:calc(100% / var(--rip-h, .13))}
.pack-open-top.crimp-top{
  background:transparent;border:none;box-shadow:none;border-radius:8px 8px 0 0}
.pack-open-top.crimp-top::before{
  content:'';position:absolute;left:0;right:0;top:0;height:46%;z-index:2;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.04) 55%,transparent 100%);
  mix-blend-mode:soft-light}
.pack-open-top.crimp-top::after{
  content:'';position:absolute;left:8%;right:8%;bottom:0;height:2px;z-index:3;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 3px,transparent 3px 6px)}
.pack-open-pack.style-promo .pack-open-body-art{border-radius:0 0 8px 10px}
#overlay-pack-open.phase-rip .pack-open-top:not(.crimp-top),
#overlay-pack-open.phase-rip .pack-open-top.crimp-top{
  transform:translateY(-155%) rotate(-12deg);opacity:0;visibility:hidden}
#overlay-pack-open.phase-pack-down .pack-open-top,
#overlay-pack-open.phase-cards .pack-open-top{display:none!important}
/* After tear: clip to jagged edge, drop rectangular shadows that ghost in the torn zone */
.pack-open-pack.style-photo.phase-ripped-body .pack-open-art-stack,
.pack-open-pack.style-photo.phase-ripped-body .pack-open-body-art{
  clip-path:url(#pack-tear-photo);-webkit-clip-path:url(#pack-tear-photo)}
.pack-open-pack.style-promo.phase-ripped-body .pack-open-art-stack,
.pack-open-pack.style-promo.phase-ripped-body .pack-open-body-art{
  clip-path:url(#pack-tear-promo);-webkit-clip-path:url(#pack-tear-promo)}
.pack-open-pack.phase-ripped-body .pack-open-body-art{
  border:none;background:transparent;outline:none;box-shadow:none;
  transition:opacity .12s ease}
.pack-open-pack.phase-ripped-body .pack-open-art-stack{transition:none}
#overlay-pack-open.phase-rip .pack-open-sleeve,
#overlay-pack-open.phase-pack-down .pack-open-sleeve,
#overlay-pack-open.phase-cards .pack-open-sleeve{
  box-shadow:none}
#overlay-pack-open.phase-rip .pack-open-pack.style-promo,
#overlay-pack-open.phase-pack-down .pack-open-pack.style-promo,
#overlay-pack-open.phase-cards .pack-open-pack.style-promo{
  filter:none}
#overlay-pack-open.phase-pack-down .pack-open-pack{transform:translateY(110vh)}
.pack-open-cards{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:2;overflow:visible}
#overlay-pack-open:not(.phase-pack-down):not(.phase-cards) .pack-open-cards{
  opacity:0;visibility:hidden}
#overlay-pack-open.phase-pack-down .pack-open-cards,
#overlay-pack-open.phase-cards .pack-open-cards{
  opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
.pack-open-stage .pack-open-flash{
  position:absolute;inset:0;pointer-events:none;z-index:24;opacity:0;
  background:radial-gradient(circle at 50% 46%,rgba(255,248,230,.38) 0%,rgba(255,220,160,.12) 28%,transparent 62%)}
.pack-open-stage .pack-open-flash.active{animation:pack-rare-flash .55s ease-out forwards}
.pack-open-stage .pack-open-flash.flash-premium.active{
  background:radial-gradient(circle at 50% 46%,rgba(240,248,255,.42) 0%,rgba(180,210,255,.14) 30%,transparent 64%)}
@keyframes pack-rare-flash{0%{opacity:0;transform:scale(.92)}22%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.06)}}
.pack-open-card{
  position:absolute;width:min(280px,42vw);aspect-ratio:63/88;border-radius:10px;overflow:visible;
  opacity:1;
  transform:translateY(calc(var(--stack-i,0) * -3px)) scale(calc(1 - var(--stack-i,0) * .006));
  transition:transform .78s cubic-bezier(.45,.04,.25,1);
  will-change:transform;
}
.pack-open-card.pack-faces-pending .pack-open-card-inner img{opacity:0}
.pack-open-card.pack-faces-ready .pack-open-card-inner img{opacity:1}
.pack-open-card.dismissed{
  transform:translateY(115vh) rotate(7deg) scale(.97)!important;
  pointer-events:none;z-index:120!important;
  transition-duration:.82s}
.pack-reveal-t2.dismissed{transition-duration:.92s}
.pack-reveal-t3.dismissed{transition-duration:1.02s;transform:translateY(115vh) rotate(9deg) scale(.98)!important}
/* Stack — every card face stays visible; FX + name/rarity labels only on the active top card */
.pack-open-card:not(.pack-top):not(.dismissed) .pack-open-shine,
.pack-open-card:not(.pack-top):not(.dismissed) .pack-open-burst,
.pack-open-card:not(.pack-top):not(.dismissed) .pack-open-sparkle-layer,
.pack-open-card:not(.pack-top):not(.dismissed) .pack-open-rarity-frame,
.pack-open-card:not(.pack-top):not(.dismissed) .pack-open-card-name,
.pack-open-card:not(.pack-top):not(.dismissed) .pack-open-card-meta{
  opacity:0;visibility:hidden;pointer-events:none}
.pack-open-card:not(.pack-top):not(.dismissed) .pack-open-card-inner{
  box-shadow:0 8px 22px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.1)}
.pack-open-rarity-frame{
  position:absolute;inset:-3px;border-radius:12px;pointer-events:none;z-index:0;opacity:0}
.pack-open-card.pack-top.revealing.pack-reveal-t1 .pack-open-rarity-frame,
.pack-open-card.pack-top.pack-reveal-t1:not(.dismissed) .pack-open-rarity-frame{
  opacity:1;border:1px solid rgba(255,220,170,.48);
  box-shadow:0 0 16px rgba(255,200,120,.18);
  animation:pack-frame-in .55s ease-out forwards}
.pack-open-card.pack-top.revealing.pack-reveal-t2 .pack-open-rarity-frame,
.pack-open-card.pack-top.pack-reveal-t2:not(.dismissed) .pack-open-rarity-frame{
  opacity:1;border:1px solid rgba(195,215,255,.58);
  box-shadow:0 0 22px rgba(150,185,255,.26),inset 0 0 14px rgba(220,235,255,.08);
  animation:pack-frame-in .7s ease-out forwards}
.pack-open-card.pack-top.revealing.pack-reveal-t3 .pack-open-rarity-frame,
.pack-open-card.pack-top.pack-reveal-t3:not(.dismissed) .pack-open-rarity-frame{
  opacity:1;border:2px solid rgba(255,230,175,.75);
  box-shadow:0 0 30px rgba(255,205,110,.34),0 0 48px rgba(255,180,80,.14),inset 0 0 18px rgba(255,248,220,.1);
  animation:pack-frame-in-strong .95s ease-out forwards}
@keyframes pack-frame-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
@keyframes pack-frame-in-strong{from{opacity:0;transform:scale(.96)}40%{opacity:1;transform:scale(1.015)}to{opacity:1;transform:scale(1)}}
.pack-open-card-inner{
  position:relative;width:100%;height:100%;border-radius:inherit;overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.1);
  transition:box-shadow .35s ease}
.pack-open-card.pack-top.revealing .pack-open-card-inner{
  animation:pack-top-settle .36s cubic-bezier(.25,.8,.25,1)}
.pack-open-card.pack-top.revealing.pack-reveal-t0 .pack-open-card-inner{animation:none}
.pack-open-card.pack-top.revealing.pack-reveal-t2 .pack-open-card-inner{
  animation:pack-top-settle-premium .52s cubic-bezier(.22,.85,.24,1)}
.pack-open-card.pack-top.revealing.pack-reveal-t3 .pack-open-card-inner{
  animation:pack-top-settle-chase .72s cubic-bezier(.2,.88,.22,1)}
@keyframes pack-top-settle{from{transform:translateY(-8px) scale(.985)}to{transform:translateY(0) scale(1)}}
@keyframes pack-top-settle-premium{
  from{transform:translateY(-12px) scale(.98)}
  55%{transform:translateY(2px) scale(1.008)}
  to{transform:translateY(0) scale(1)}}
@keyframes pack-top-settle-chase{
  from{transform:translateY(-16px) scale(.97)}
  45%{transform:translateY(3px) scale(1.012)}
  62%{transform:translateY(-1px) scale(1.004)}
  to{transform:translateY(0) scale(1)}}
.pack-open-shine,.pack-open-burst,.pack-open-sparkle-layer{
  position:absolute;pointer-events:none;border-radius:inherit}
.pack-open-shine{
  inset:0;z-index:4;opacity:0;
  background:linear-gradient(118deg,transparent 42%,rgba(255,255,255,.32) 50%,transparent 58%)}
.pack-open-card.pack-top.revealing.pack-reveal-t1 .pack-open-shine{animation:pack-foil-sweep .72s ease-out .08s 1 forwards}
.pack-open-card.pack-top.revealing.pack-reveal-t2 .pack-open-shine{animation:pack-foil-sweep .88s ease-out .1s 1 forwards}
.pack-open-card.pack-top.revealing.pack-reveal-t3 .pack-open-shine{animation:pack-foil-sweep 1.05s ease-out .14s 1 forwards}
@keyframes pack-foil-sweep{0%{opacity:0;transform:translateX(-42%) skewX(-6deg)}38%{opacity:1}100%{opacity:0;transform:translateX(42%) skewX(-6deg)}}
.pack-open-burst{
  inset:-16%;z-index:0;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.46) 0%,rgba(210,225,255,.18) 24%,transparent 58%)}
.pack-open-card.pack-top.revealing.pack-reveal-t2 .pack-open-burst{animation:pack-burst-ring .9s cubic-bezier(.2,.8,.2,1) forwards}
.pack-open-card.pack-top.revealing.pack-reveal-t3 .pack-open-burst{animation:pack-burst-ring-strong 1.15s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pack-burst-ring{0%{opacity:0;transform:scale(.6)}32%{opacity:.82;transform:scale(1)}100%{opacity:0;transform:scale(1.32)}}
@keyframes pack-burst-ring-strong{0%{opacity:0;transform:scale(.5)}26%{opacity:1;transform:scale(1.03)}100%{opacity:0;transform:scale(1.38)}}
.pack-open-sparkle-layer{
  inset:-5%;z-index:5;opacity:0;
  background:
    radial-gradient(circle at 20% 24%,rgba(255,255,255,.92) 0 1px,transparent 2px),
    radial-gradient(circle at 80% 22%,rgba(255,244,215,.88) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 72% 76%,rgba(255,255,255,.82) 0 1px,transparent 2px),
    radial-gradient(circle at 26% 70%,rgba(255,236,195,.86) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 48% 14%,rgba(255,255,255,.72) 0 1px,transparent 2px)}
.pack-open-card.pack-top.revealing.pack-reveal-t3 .pack-open-sparkle-layer{animation:pack-sparkle-pop 1.05s ease-out .22s 1 forwards}
@keyframes pack-sparkle-pop{0%{opacity:0;transform:scale(.9)}28%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.04)}}
.pack-open-card.pack-top.pack-reveal-t1:not(.dismissed) .pack-open-card-inner{
  box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.14),0 0 18px rgba(255,200,120,.16)}
.pack-open-card.pack-top.pack-reveal-t2:not(.dismissed) .pack-open-card-inner{
  box-shadow:0 14px 36px rgba(0,0,0,.52),0 0 0 1px rgba(210,225,255,.34),0 0 26px rgba(150,180,255,.22)}
.pack-open-card.pack-top.pack-reveal-t3:not(.dismissed) .pack-open-card-inner{
  box-shadow:0 16px 40px rgba(0,0,0,.54),0 0 0 2px rgba(255,240,200,.48),0 0 34px rgba(255,200,110,.26)}
.pack-open-card:not(.card-live-hand) img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .12s ease}
.pack-open-card.card-live-hand{overflow:visible}
.pack-open-card.card-live-hand .pack-open-card-inner{overflow:hidden}
.pack-open-card.card-live-hand .card-art.live-sideways,
.pack-open-card.card-live-hand .card-landscape-in-portrait{
  will-change:transform;
}
.pack-open-card.card-live-hand .card-landscape-in-portrait img,
.pack-open-card.card-live-hand .card-landscape-in-portrait .noimg,
.pack-open-card.card-live-hand .card-art.live-sideways img,
.pack-open-card.card-live-hand .card-art.live-sideways .noimg{object-fit:contain}
.pack-open-card-name{
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  width:max-content;max-width:min(340px,85vw);padding:0;z-index:3;
  font-size:clamp(15px,2.4vw,20px);font-weight:700;text-align:center;line-height:1.25;
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;letter-spacing:.02em;
  pointer-events:none;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 2px 10px rgba(0,0,0,.88),0 0 20px rgba(0,0,0,.5)}
.pack-open-card-meta{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  width:max-content;min-width:100%;padding:0;z-index:3;
  background:none;font-size:26px;font-weight:700;text-align:center;
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;letter-spacing:.04em;
  pointer-events:none;white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.88),0 0 20px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){
  .pack-open-stage .pack-open-flash{display:none!important}
  .pack-open-card.revealing .pack-open-card-inner,
  .pack-open-card.revealing .pack-open-shine,
  .pack-open-card.revealing .pack-open-burst,
  .pack-open-card.revealing .pack-open-sparkle-layer,
  .pack-open-card.revealing .pack-open-rarity-frame{animation:none!important}
  .pack-open-card{transition-duration:.14s!important}
  #overlay-pack-open.phase-ready .pack-open-pack{animation:none}
}
#overlay-ranked-pr-reward{
  position:fixed;inset:0;z-index:9520;
  background:radial-gradient(ellipse 80% 70% at 50% 42%,rgba(18,28,48,.97) 0%,rgba(6,10,18,.98) 100%);
  display:none;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
#overlay-ranked-pr-reward.active{display:flex}
.ranked-pr-reward-stage{
  position:relative;width:min(520px,94vw);display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:clamp(20px,4vh,36px) clamp(16px,3vw,24px)}
.ranked-pr-reward-title{
  margin:0 0 8px;font-size:clamp(20px,3.2vw,26px);font-weight:800;color:#fff;letter-spacing:.02em;
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;text-shadow:0 2px 16px rgba(0,0,0,.45)}
.ranked-pr-reward-card-wrap{
  position:relative;width:min(280px,42vw);
  min-height:min(390px,58vw);height:auto;
  display:flex;align-items:center;justify-content:center;margin:12px 0 4px;
  overflow:visible}
.ranked-pr-reward-card-wrap.is-pack-row{
  width:min(720px,94vw);min-height:min(220px,36vw);gap:clamp(8px,2vw,16px);
  flex-wrap:wrap;justify-content:center}
.ranked-pr-reward-card-wrap.is-pack-row .pack-open-card,
.ranked-pr-reward-card-wrap.is-pack-row .ranked-pr-pack-mini{
  width:min(160px,28vw)!important;max-width:170px;opacity:1!important;animation:none!important;
  transform:none!important}
#overlay-ranked-pr-reward .pack-open-card-name,
#overlay-ranked-pr-reward .pack-open-card-meta{display:none!important}
#overlay-ranked-pr-reward .pack-open-card{
  position:relative;transform:none;opacity:0;margin:0}
#overlay-ranked-pr-reward.active .pack-open-card{
  animation:ranked-pr-card-enter .65s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ranked-pr-card-enter{
  0%{opacity:0;transform:scale(.72) translateY(24px)}
  100%{opacity:1;transform:scale(1) translateY(0)}}
.ranked-pr-reward-details{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin:4px 0 10px;max-width:min(420px,90vw)}
.ranked-pr-reward-card-name{
  margin:0;font-size:clamp(17px,2.8vw,22px);font-weight:700;line-height:1.3;color:#fff;
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.ranked-pr-reward-rarity.pack-results-rarity{
  margin:0;font-size:clamp(22px,3.6vw,28px);font-weight:800;letter-spacing:.04em;line-height:1.1;
  text-shadow:0 2px 12px rgba(0,0,0,.5)}
.ranked-pr-reward-sub{
  margin:0 0 18px;max-width:min(420px,90vw);font-size:14px;line-height:1.45;color:rgba(255,255,255,.82)}
.ranked-pr-reward-ok{
  min-width:min(200px,70vw);padding:12px 28px;font-size:15px;font-weight:700}
.ranked-pr-reward-stage .ranked-pr-reward-flash{
  position:absolute;inset:0;pointer-events:none;z-index:24;opacity:0;
  background:radial-gradient(circle at 50% 46%,rgba(255,248,230,.38) 0%,rgba(255,220,160,.12) 28%,transparent 62%)}
.ranked-pr-reward-stage .ranked-pr-reward-flash.active{animation:pack-rare-flash .55s ease-out forwards}
.ranked-pr-reward-stage .ranked-pr-reward-flash.flash-premium.active{
  background:radial-gradient(circle at 50% 46%,rgba(240,248,255,.42) 0%,rgba(180,210,255,.14) 30%,transparent 64%)}
@media (prefers-reduced-motion:reduce){
  #overlay-ranked-pr-reward .ranked-pr-reward-flash{display:none!important}
  #overlay-ranked-pr-reward .pack-open-card{opacity:1!important;animation:none!important}
}
#screen-pack-results.llc-menu-screen{
  justify-content:flex-start;
  align-items:center;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  box-sizing:border-box;
}
#screen-pack-results .account-shell.wide{
  max-width:min(1100px,98vw);
  margin-block:0;
  padding-bottom:clamp(24px,4vh,48px);
}
.pack-results-cards-block{
  width:100%;margin:20px auto 24px;padding:clamp(16px,2.5vw,24px) clamp(12px,2vw,18px) clamp(18px,3vw,26px);
  border-radius:12px;border:1px solid rgba(255,255,255,.18);
  background:rgba(6,14,32,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 28px rgba(0,0,0,.32);
  /* Keep the whole screen scrolling; avoid nested scroll traps on tall box pulls */
  overflow:visible;
}
.pack-results-grid{
  display:flex;flex-wrap:nowrap;gap:clamp(10px,1.4vw,18px);justify-content:center;align-items:flex-start;
  margin:0 auto;width:100%;overflow-x:auto;padding:4px 2px 8px}
.pack-results-item{
  display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1vh,12px);
  flex:0 0 auto;width:min(160px,calc((100vw - 88px) / 5))}
.pack-results-name{
  width:100%;font-size:13px;font-weight:700;color:#fff;text-align:center;line-height:1.3;
  min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pack-results-card{
  width:100%;aspect-ratio:63/88;border-radius:8px;overflow:hidden;position:relative;
  box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.1);touch-action:manipulation}
.pack-results-card.hcard{height:auto;cursor:pointer}
.pack-results-card img,.pack-results-card .noimg,.pack-results-card .card-face-fill{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.pack-results-card.card-live-hand{overflow:hidden}
.pack-results-card.card-live-hand .card-landscape-in-portrait img,
.pack-results-card.card-live-hand .card-landscape-in-portrait .noimg{object-fit:contain}
.pack-results-card.is-holo::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:8px;
  background:linear-gradient(125deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  animation:pack-holo-shine 1.8s ease-in-out infinite}
@keyframes pack-holo-shine{0%,100%{opacity:.25}50%{opacity:.85}}
.pack-results-rarity{
  width:100%;font-size:20px;font-weight:900;letter-spacing:.05em;text-align:center;line-height:1.15}
/* Tier 1 — Master Chases (ultra-rare autographs, LLE god-pack exclusives) */
.pack-results-rarity.rarity-chase{
  font-size:22px;letter-spacing:.07em;
  background:linear-gradient(95deg,#fff9c4 0%,#ffd700 10%,#ff6ba8 24%,#67e8f9 40%,#c084fc 55%,#fbbf24 72%,#34d399 86%,#fff9c4 100%);
  background-size:320% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rarity-chase-shift 2.1s linear infinite;
  filter:drop-shadow(0 0 10px rgba(255,210,100,.5));
  -webkit-text-stroke:.5px rgba(255,230,150,.4);
  paint-order:stroke fill;
}
/* Tier 2 — Premium Parallels & high-end foils */
.pack-results-rarity.rarity-premium-ar{
  background:linear-gradient(90deg,#fecaca 0%,#ef4444 30%,#991b1b 55%,#fca5a5 80%,#fecaca 100%);
  background-size:180% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rarity-premium-shift 3.2s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(220,38,38,.35));
}
.pack-results-rarity.rarity-premium-peplus,
.pack-results-rarity.rarity-premium-pplus{
  background:linear-gradient(90deg,#fef08a 0%,#facc15 25%,#fb923c 50%,#f472b6 75%,#fde68a 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rarity-premium-shift 2.8s ease-in-out infinite;
}
.pack-results-rarity.rarity-premium-sre{
  background:linear-gradient(90deg,#a5f3fc 0%,#22d3ee 25%,#818cf8 55%,#e879f9 80%,#a5f3fc 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rarity-premium-shift 3s ease-in-out infinite;
}
.pack-results-rarity.rarity-premium-rm{
  background:linear-gradient(90deg,#ddd6fe 0%,#a78bfa 35%,#6366f1 65%,#c4b5fd 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 5px rgba(129,140,248,.35));
}
/* Tier 3 — Standard pack foil slot */
.pack-results-rarity.rarity-foil-p,
.pack-results-rarity.rarity-foil-pe{
  background:linear-gradient(90deg,#e9d5ff 0%,#c4b5fd 45%,#a78bfa 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pack-results-rarity.rarity-foil-re,
.pack-results-rarity.rarity-foil-lplus{
  background:linear-gradient(90deg,#bae6fd 0%,#7dd3fc 35%,#a78bfa 70%,#f0abfc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Tier 4 — Base non-foil */
.pack-results-rarity.rarity-base-rplus{
  background:linear-gradient(90deg,#d1fae5 0%,#9AE6B4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pack-results-rarity.rarity-base-pr,
.pack-results-rarity.rarity-base-prplus{
  color:#c4b5fd;
}
.pack-results-rarity.rarity-base-r{color:rgba(186,210,255,.92)}
.pack-results-rarity.rarity-base-l{color:rgba(154,230,180,.88)}
.pack-results-rarity.rarity-base-n{color:rgba(168,178,198,.72)}
.pack-results-god-banner{
  text-align:center;font-family:'Fredoka One',cursive;font-size:clamp(20px,3.8vw,30px);line-height:1.2;
  margin:-2px 0 12px;
  background:linear-gradient(95deg,#fff9c4 0%,#ffd700 15%,#ff6ba8 35%,#67e8f9 55%,#ffd700 100%);
  background-size:280% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rarity-chase-shift 2s linear infinite;
  filter:drop-shadow(0 0 12px rgba(255,200,80,.55));
}
@keyframes rarity-chase-shift{0%{background-position:0% center}100%{background-position:320% center}}
@keyframes rarity-premium-shift{0%,100%{background-position:0% center}50%{background-position:100% center}}
.pack-results-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}
.pack-results-grid--box{
  display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(6px,.8vw,10px);
  flex-wrap:unset;overflow-x:visible;justify-content:stretch;width:100%;max-width:100%}
.pack-results-grid--box .pack-results-item{width:auto;min-width:0}
.pack-results-grid--box .pack-results-name{font-size:10px;min-height:2.4em}
.pack-results-grid--box .pack-results-rarity{font-size:12px}
.pack-results-item--converted .pack-results-card{filter:grayscale(.88) brightness(.72)}
.pack-results-item--converted .pack-results-name,.pack-results-item--converted .pack-results-rarity{opacity:.55}
.pack-gem-convert-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;
  border-radius:8px;background:rgba(8,12,24,.62);color:#fff;font-weight:800;font-size:clamp(14px,1.6vw,18px);
  pointer-events:none;animation:pack-gem-pulse 1.35s ease-in-out infinite}
.pack-gem-convert-overlay img{width:clamp(20px,2.2vw,28px);height:clamp(20px,2.2vw,28px);object-fit:contain}
@keyframes pack-gem-pulse{0%,100%{opacity:.78;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
.pack-open-card.pack-converted .pack-open-card-inner{filter:grayscale(.88) brightness(.72)}
.pack-open-card.pack-converted::after{
  content:'';position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:rgba(8,12,24,.55);animation:pack-gem-pulse 1.35s ease-in-out infinite}
.pack-open-gem-overlay{
  position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;gap:6px;
  font-weight:800;font-size:18px;color:#fff;pointer-events:none}
.pack-open-gem-overlay img{width:24px;height:24px;object-fit:contain}
#modal-paid-booster .mbox{max-width:min(420px,94vw);text-align:center}
#modal-paid-booster .paid-booster-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
#modal-paid-booster .paid-booster-actions .btn-grad,#modal-paid-booster .paid-booster-actions .btn-out{
  width:100%;justify-content:center;display:inline-flex;align-items:center;gap:8px}
#modal-star-gem-migration .mbox{max-width:min(480px,94vw);text-align:center}
#modal-star-gem-migration .migration-gem-total{
  margin-top:14px;font-size:1.35rem;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px}
#modal-star-gem-migration .migration-gem-total img{width:28px;height:28px;object-fit:contain}
@media (max-width:900px){
  .pack-results-grid--box{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:520px){
  .pack-results-grid--box{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pack-open-rarity{font-weight:900;letter-spacing:.05em;line-height:1.15;font-size:1em}
.pack-open-rarity.rarity-chase{
  background:linear-gradient(95deg,#fff9c4 0%,#ffd700 10%,#ff6ba8 24%,#67e8f9 40%,#c084fc 55%,#fbbf24 72%,#34d399 86%,#fff9c4 100%);
  background-size:320% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rarity-chase-shift 2.1s linear infinite}
.pack-open-rarity.rarity-premium-ar{
  background:linear-gradient(90deg,#fecaca 0%,#ef4444 30%,#991b1b 55%,#fca5a5 80%,#fecaca 100%);
  background-size:180% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rarity-premium-shift 3.2s ease-in-out infinite}
.pack-open-rarity.rarity-premium-peplus,.pack-open-rarity.rarity-premium-pplus{
  background:linear-gradient(90deg,#fef08a 0%,#facc15 25%,#fb923c 50%,#f472b6 75%,#fde68a 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rarity-premium-shift 2.8s ease-in-out infinite}
.pack-open-rarity.rarity-premium-sre{
  background:linear-gradient(90deg,#a5f3fc 0%,#22d3ee 25%,#818cf8 55%,#e879f9 80%,#a5f3fc 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rarity-premium-shift 3s ease-in-out infinite}
.pack-open-rarity.rarity-premium-rm{
  background:linear-gradient(90deg,#ddd6fe 0%,#a78bfa 35%,#6366f1 65%,#c4b5fd 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pack-open-rarity.rarity-foil-p,.pack-open-rarity.rarity-foil-pe{
  background:linear-gradient(90deg,#e9d5ff 0%,#c4b5fd 45%,#a78bfa 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pack-open-rarity.rarity-foil-re,.pack-open-rarity.rarity-foil-lplus{
  background:linear-gradient(90deg,#bae6fd 0%,#7dd3fc 35%,#a78bfa 70%,#f0abfc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pack-open-rarity.rarity-base-rplus{
  background:linear-gradient(90deg,#d1fae5 0%,#9AE6B4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pack-open-rarity.rarity-base-pr,.pack-open-rarity.rarity-base-prplus{color:#c4b5fd}
.pack-open-rarity.rarity-base-r{color:rgba(186,210,255,.92)}
.pack-open-rarity.rarity-base-l{color:rgba(154,230,180,.88)}
.pack-open-rarity.rarity-base-n{color:rgba(168,178,198,.72)}
.pack-open-card.is-holo.pack-top:not(.dismissed) .pack-open-card-inner::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(125deg,transparent 36%,rgba(255,255,255,.24) 50%,transparent 64%);
  opacity:.6;z-index:2}
.deck-slot-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.deck-slot-btn{padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.3);cursor:pointer;font-size:12px;color:#fff;font-weight:700}
.deck-slot-btn.equipped{border-color:#9AE6B4}
.deck-slot-btn.active{border-color:var(--pink)}
#screen-leaderboard.llc-menu-screen{
  justify-content:flex-start;
  align-items:stretch;
  overflow-y:auto;
  min-height:100%;
  box-sizing:border-box;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,179,209,.75) rgba(255,255,255,.12);
}
#screen-leaderboard.llc-menu-screen::-webkit-scrollbar{width:6px}
#screen-leaderboard.llc-menu-screen::-webkit-scrollbar-track{
  background:rgba(255,255,255,.12);border-radius:999px;margin:6px 0}
#screen-leaderboard.llc-menu-screen::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--pink-l),var(--pink));border-radius:999px;
  border:1px solid rgba(255,255,255,.28);box-shadow:0 0 8px rgba(255,107,168,.28)}
#screen-leaderboard.llc-menu-screen::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#fff,var(--pink-l))}
#screen-leaderboard .account-shell.wide{
  max-width:min(720px,96vw);
  margin-block:0;
  align-self:center;
}
.leaderboard-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px 0 18px}
.leaderboard-your-rank{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;
  margin:0 0 14px;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(255,107,168,.35);background:rgba(255,107,168,.1)}
.leaderboard-your-rank-line{margin:0;font-size:15px;font-weight:800;color:#fff}
.leaderboard-list{display:flex;flex-direction:column;gap:12px;width:100%}
.rank-card{
  border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.28);
  overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.rank-card.is-you{border-color:var(--pink);box-shadow:0 0 16px rgba(255,107,168,.22)}
.rank-card.rank-card-flash{animation:leaderboardYouFlash 1.2s ease}
@keyframes leaderboardYouFlash{
  0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.28)}
  35%,65%{box-shadow:0 0 22px rgba(255,107,168,.55);border-color:var(--pink)}
}
.rank-banner-wrap{
  overflow:hidden;background:linear-gradient(90deg,rgba(255,107,168,.18),rgba(77,150,255,.18));
  position:relative;isolation:isolate;box-sizing:border-box}
.rank-banner-wrap.empty{background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.04))}
.rank-banner-img{display:block;max-width:none;object-fit:fill;object-position:left top}
.rank-card-body{
  display:grid;grid-template-columns:auto minmax(0,1fr) min(210px,38vw);
  align-items:center;gap:10px 12px;padding:10px 12px}
.rank-card .rank-banner-wrap{
  grid-column:3;grid-row:1;align-self:center;justify-self:stretch;
  width:100%;max-width:210px;aspect-ratio:3.5 / 1;
  border-radius:8px;border:1px solid rgba(255,255,255,.12)}
.rank-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.22);flex-shrink:0;background:rgba(0,0,0,.35);align-self:center}
.rank-avatar-fallback{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:rgba(255,255,255,.85);letter-spacing:0;line-height:1;user-select:none}
.rank-meta{min-width:0;align-self:center}
.rank-pos{font-size:13px;font-weight:800;color:var(--pink-l);min-width:2.2em}
.rank-name{appearance:none;-webkit-appearance:none;background:none;border:none;padding:0;margin:0;font-family:inherit;font-size:15px;font-weight:800;color:#fff;line-height:1.25;text-align:inherit;text-decoration:none;box-shadow:none}
.rank-name:focus{outline:none}
.rank-name:focus-visible{outline:none}
.rank-elo{font-size:14px;font-weight:900;color:#fff;margin-top:1px}
.rank-record{font-size:12px;color:rgba(255,255,255,.78);margin-top:2px;line-height:1.3}
.leaderboard-empty{font-size:14px;color:rgba(255,255,255,.72);text-align:center;padding:24px 12px}
@media (max-width:520px){
  .rank-card-body{grid-template-columns:auto minmax(0,1fr)}
  .rank-card .rank-banner-wrap{
    grid-column:1 / -1;grid-row:2;max-width:none;width:100%;margin-top:2px}
}
#screen-debug-card-test .account-shell{max-width:min(920px,96vw)}
#screen-debug-card-test .debug-board-advanced{
  margin:14px 0 4px;border:1px solid rgba(255,255,255,.14);border-radius:10px;
  background:rgba(0,0,0,.18);padding:0 12px 12px
}
#screen-debug-card-test .debug-board-advanced>summary{
  cursor:pointer;font-weight:800;font-size:13px;color:rgba(255,255,255,.92);
  padding:12px 4px;list-style-position:outside
}
#screen-debug-card-test .debug-board-advanced[open]>summary{margin-bottom:8px}
#screen-debug-card-test .debug-board-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px
}
@media (max-width:720px){
  #screen-debug-card-test .debug-board-grid{grid-template-columns:1fr}
}
#screen-debug-card-test .debug-board-player{
  margin:0;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);min-width:0
}
#screen-debug-card-test .debug-board-player legend{
  font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.78);padding:0 6px
}
#screen-debug-card-test .debug-board-player .field{margin-bottom:10px}
#screen-debug-card-test .debug-board-player .field label{font-size:12px}
#screen-debug-card-test .debug-board-player input,
#screen-debug-card-test .debug-board-player select{font-size:12px}
#screen-debug-card-test .debug-board-player .debug-stage-row{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px;align-items:center;margin-bottom:6px
}
#screen-debug-card-test .debug-board-player .debug-stage-row label{
  font-size:11px;color:rgba(255,255,255,.65);margin:0
}
#screen-debug-card-test .debug-stage-custom{margin-top:4px}
#screen-debug-card-test .debug-stage-custom[hidden]{display:none!important}
#screen-debug-card-test .debug-card-preview{
  margin:10px 0 14px;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.22);min-height:72px;display:flex;align-items:center;gap:12px
}
#screen-debug-card-test .debug-card-preview.empty{color:rgba(255,255,255,.55);font-size:13px;justify-content:center}
#screen-debug-card-test .debug-card-preview img{width:56px;height:auto;border-radius:6px;flex-shrink:0}
#screen-debug-card-test .debug-card-preview .debug-card-meta{min-width:0}
#screen-debug-card-test .debug-card-preview .debug-card-name{font-weight:800;font-size:14px;color:#fff}
#screen-debug-card-test .debug-card-preview .debug-card-id{font-size:11px;color:rgba(255,255,255,.7);font-family:ui-monospace,Consolas,monospace;word-break:break-all}
.bug-reports-list{display:flex;flex-direction:column;gap:10px;max-height:min(58vh,520px);overflow-y:auto}
.bug-report-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;
  padding:10px 12px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.82);
}
.bug-report-card time{display:block;font-size:11px;color:rgba(255,255,255,.5);margin-bottom:4px}
.bug-report-card .bug-report-title{font-weight:800;color:#fdba74;margin-bottom:4px}
.bug-report-card .bug-report-title.from-cpu{color:#93c5fd}
.bug-report-card .bug-report-reporter{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;color:rgba(255,255,255,.45)}
.bug-report-card .bug-report-reporter.from-cpu{color:#93c5fd}
.bug-report-card code{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:rgba(255,255,255,.7)}
.bug-report-card .bug-report-card-id{font-family:ui-monospace,Consolas,monospace;font-size:12px;font-weight:700;color:#fde68a;margin-bottom:4px;word-break:break-all}
.bug-report-card .bug-report-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.bug-report-card .bug-report-actions button{padding:4px 10px;font-size:10px}
.bug-report-card .bug-report-log{
  margin-top:8px;max-height:min(28vh,220px);overflow:auto;padding:8px 10px;border-radius:8px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);
  font-family:ui-monospace,Consolas,monospace;font-size:10px;line-height:1.35;color:rgba(255,255,255,.78);
  white-space:pre-wrap;word-break:break-word;
}
.bug-reports-empty{color:rgba(255,255,255,.55);font-size:13px;text-align:center;padding:24px 8px}
#modal-banner-crop{z-index:945}
#modal-banner-crop .mbox{
  max-width:min(920px,96vw);width:100%;max-height:92vh;overflow-x:hidden;overflow-y:auto;
  display:flex;flex-direction:column;padding:18px 20px 16px
}
.banner-crop-lead{font-size:13px;color:rgba(255,255,255,.82);line-height:1.4;margin:0 0 10px;text-align:center;flex-shrink:0}
.banner-crop-section-title{
  margin:0 0 6px;font-size:15px;font-weight:800;color:#fff;text-align:center;flex-shrink:0
}
.banner-crop-workspace{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start;
  min-height:0;flex:0 0 auto
}
.profile-flag-section{
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);flex-shrink:0
}
.profile-flag-lead{font-size:13px;color:rgba(255,255,255,.82);line-height:1.4;margin:0 0 10px;text-align:center}
.profile-flag-search{
  width:100%;box-sizing:border-box;margin-bottom:8px;padding:9px 12px;border-radius:8px;
  border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35);color:#fff;font-size:14px
}
.profile-flag-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;
  max-height:min(240px,32vh);overflow-y:auto;padding:6px;border:1px solid rgba(255,255,255,.16);
  border-radius:8px;background:rgba(0,0,0,.18);scrollbar-gutter:stable
}
.profile-flag-card{
  display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:6px;border-radius:8px;
  border:2px solid rgba(255,255,255,.14);background:rgba(0,0,0,.28);cursor:pointer;color:#fff
}
.profile-flag-card:hover{border-color:var(--pink)}
.profile-flag-card.is-selected{border-color:var(--pink);box-shadow:0 0 0 2px rgba(255,107,168,.4)}
.profile-flag-card__thumb{
  width:100%;aspect-ratio:4 / 3;object-fit:contain;border-radius:4px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)
}
.profile-flag-card__thumb.is-empty{
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  color:rgba(255,255,255,.55)
}
.profile-flag-card__name{
  font-size:10px;font-weight:700;line-height:1.2;text-align:center;
  color:rgba(255,255,255,.88);overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.profile-flag-actions{display:flex;gap:10px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.profile-flag-status{font-size:12px;color:rgba(255,255,255,.72);text-align:center;margin:8px 0 0;min-height:1.2em}
.rank-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.rank-name-wrap{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.rank-flag{
  width:18px;height:13px;border-radius:2px;object-fit:cover;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.25)
}
.banner-pick-wrap{margin-bottom:0;min-width:0;display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.banner-card-search{
  width:100%;box-sizing:border-box;margin-bottom:8px;padding:9px 12px;border-radius:8px;
  border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35);color:#fff;font-size:14px;flex-shrink:0
}
.banner-card-search::placeholder{color:rgba(255,255,255,.45)}
.banner-card-search:focus{outline:none;border-color:rgba(255,107,168,.55)}
.banner-card-grid{
  --banner-tile-w:76px;
  --banner-tile-art-h:calc(var(--banner-tile-w) * 88 / 63);
  --banner-tile-name-h:22px;
  --banner-tile-h:calc(var(--banner-tile-art-h) + var(--banner-tile-name-h));
  display:grid;grid-template-columns:repeat(auto-fill,var(--banner-tile-w));grid-auto-rows:var(--banner-tile-h);
  gap:8px;justify-content:start;align-content:start;
  flex:1 1 auto;min-height:min(200px,28vh);max-height:min(460px,calc(92vh - 260px));
  overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;
  padding:8px;border:1px solid rgba(255,255,255,.16);
  border-radius:8px;background:rgba(0,0,0,.18)
}
.banner-crop-align-col{flex-shrink:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:min(210px,26vw)}
.banner-card-tile{
  display:flex;flex-direction:column;width:var(--banner-tile-w);max-width:var(--banner-tile-w);
  min-width:0;height:var(--banner-tile-h);min-height:var(--banner-tile-h);max-height:var(--banner-tile-h);
  padding:0;border-radius:6px;overflow:hidden;cursor:pointer;justify-self:start;align-self:start;
  border:2px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);text-align:left;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease
}
.banner-card-tile.hcard{
  width:var(--banner-tile-w);height:var(--banner-tile-h);min-height:var(--banner-tile-h);
  max-height:var(--banner-tile-h);aspect-ratio:unset;flex-shrink:0
}
.banner-card-tile:hover{border-color:var(--pink);transform:translateY(-2px);z-index:2}
.banner-card-tile.selected{border-color:var(--pink);box-shadow:0 0 0 2px rgba(255,107,168,.45)}
.banner-card-art{
  position:relative;width:100%;height:var(--banner-tile-art-h);min-height:var(--banner-tile-art-h);
  flex-shrink:0;overflow:hidden;background:rgba(0,0,0,.15)
}
.banner-card-art > img,.banner-card-art > .noimg,.banner-card-art > .card-face-fill{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block
}
.banner-card-tile.card-live-hand .banner-card-art{overflow:hidden}
.banner-card-tile.card-live-hand .banner-card-art .card-landscape-in-portrait img,
.banner-card-tile.card-live-hand .banner-card-art .card-landscape-in-portrait .noimg{
  object-fit:contain
}
.banner-card-name{
  flex:0 0 var(--banner-tile-name-h);height:var(--banner-tile-name-h);min-height:var(--banner-tile-name-h);
  box-sizing:border-box;font-size:9px;line-height:1.25;text-align:center;color:rgba(255,255,255,.88);
  padding:4px 3px 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgba(0,0,0,.55)
}
.banner-card-pick-empty{font-size:12px;color:rgba(255,255,255,.65);text-align:center;margin:8px 0 0}
.banner-crop-stage{
  position:relative;width:min(210px,26vw);aspect-ratio:63/88;margin:0;border-radius:10px;overflow:hidden;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);touch-action:none;user-select:none}
.banner-crop-stage img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;pointer-events:none}
.banner-crop-window{
  position:absolute;left:0;top:0;border:2px solid rgba(255,255,255,.92);
  box-shadow:0 0 0 9999px rgba(0,0,0,.45);cursor:grab;box-sizing:border-box}
.banner-crop-window:active{cursor:grabbing}
.banner-crop-preview-wrap{margin-top:10px;flex-shrink:0;display:flex;flex-direction:column;align-items:stretch;width:100%}
.banner-crop-preview-label{font-size:12px;color:rgba(255,255,255,.7);margin-bottom:5px;text-align:center}
.banner-crop-preview.rank-banner-wrap{
  width:100%;height:auto;aspect-ratio:3.5 / 1;border-radius:8px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);box-sizing:border-box;
  contain:paint}
.banner-crop-actions{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap;flex-shrink:0}
@media (max-width:640px){
  .banner-crop-workspace{grid-template-columns:1fr;justify-items:center}
  .banner-pick-wrap{width:100%}
  .banner-card-grid{
    --banner-tile-w:72px;
    min-height:min(180px,24vh);max-height:min(340px,calc(92vh - 300px));width:100%
  }
  .banner-crop-stage{width:min(240px,72vw)}
  #modal-banner-crop .mbox{overflow-y:auto}
}
/* ── Match stamps (LLSIF-style) ── */
.match-stamp-overlay{
  position:absolute;inset:0;z-index:70;
  pointer-events:none;overflow:visible;
}
.mat-stamp-layer{
  position:absolute;pointer-events:none;
  display:flex;
}
#my-stamp-layer{
  left:0;bottom:0;width:34%;height:40%;
  justify-content:flex-start;align-items:flex-end;
  padding:0 0 1% 0.4%;
}
#opp-stamp-layer{
  right:0;top:0;width:34%;height:40%;
  justify-content:flex-end;align-items:flex-start;
  padding:1% 0.4% 0 0;
}
.tcg-stamp-pop{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.58));
  animation:tcgStampIn .55s cubic-bezier(.2,.9,.25,1.1) both;
}
.tcg-stamp-pop-out{animation:tcgStampOut .4s ease forwards}
.tcg-stamp-pop-img{
  width:125px;height:125px;max-width:min(125px,32vw);max-height:min(125px,32vw);
  object-fit:contain;object-position:center bottom;
  display:block;
}
#opp-stamp-layer .tcg-stamp-pop-img{object-position:center top}
.tcg-stamp-pop-label{
  font-size:clamp(12px,2.5vw,16px);font-weight:800;color:#fff;
  text-shadow:
    0 0 2px rgba(0,0,0,1),
    0 1px 4px rgba(0,0,0,.95),
    0 2px 10px rgba(0,0,0,.9),
    0 4px 18px rgba(0,0,0,.75);
  text-align:center;max-width:min(200px,92%);line-height:1.25;
}
.tcg-stamp-anim-01{animation-name:tcgStampPopBounce}
.tcg-stamp-anim-02{animation-name:tcgStampSlideUp}
.tcg-stamp-anim-03{animation-name:tcgStampSpinPop}
.tcg-stamp-anim-04{animation-name:tcgStampElastic}
.tcg-stamp-anim-05{animation-name:tcgStampFloat}
@keyframes tcgStampIn{from{opacity:0}to{opacity:1}}
@keyframes tcgStampOut{to{opacity:0;transform:scale(.85)}}
@keyframes tcgStampPopBounce{
  0%{opacity:0;transform:scale(.2)}
  55%{opacity:1;transform:scale(1.12)}
  75%{transform:scale(.94)}
  100%{transform:scale(1)}
}
@keyframes tcgStampSlideUp{
  0%{opacity:0;transform:translateY(28px) scale(.85)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes tcgStampSpinPop{
  0%{opacity:0;transform:scale(.3) rotate(-18deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes tcgStampElastic{
  0%{opacity:0;transform:scale(.15)}
  50%{opacity:1;transform:scale(1.18)}
  70%{transform:scale(.9)}
  100%{transform:scale(1)}
}
@keyframes tcgStampFloat{
  0%{opacity:0;transform:translateY(-20px) scale(.9)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
#btn-stamp{
  width:100%;margin-bottom:8px;padding:8px 12px;border-radius:14px;
  border:1px solid rgba(255,107,168,.45);background:rgba(255,107,168,.12);
  color:#fff;font-weight:800;font-size:13px;cursor:pointer;
}
#btn-stamp:hover{filter:brightness(1.08)}
#btn-stamp:disabled{opacity:.4;cursor:not-allowed}
#btn-stamp[hidden]{display:none!important}
.stamp-picker{
  position:fixed;z-index:920;bottom:calc(var(--hand-strip-h) + 72px);right:max(12px,calc(50% - var(--playmat-col-max-w)/2 - 20px));
  width:min(320px,calc(100vw - 24px));max-height:min(380px,52vh);
  background:rgba(18,12,28,.96);border:1px solid rgba(255,107,168,.35);
  border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.55);
  display:flex;flex-direction:column;padding:10px;gap:8px;
}
.stamp-picker[hidden]{display:none!important}
.stamp-picker-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stamp-picker-title{margin:0;font-size:15px;color:#fff}
.stamp-picker-tabs{display:flex;gap:6px;flex-wrap:wrap}
.stamp-picker-tab{
  padding:5px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.2);
  background:transparent;color:rgba(255,255,255,.85);font-size:12px;font-weight:700;cursor:pointer;
}
.stamp-picker-tab.active{border-color:var(--pink);background:rgba(255,107,168,.2)}
.stamp-picker-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  overflow-y:auto;padding:4px 2px;flex:1;min-height:0;
}
.stamp-picker-tile{
  position:relative;border:none;padding:4px;border-radius:10px;background:rgba(255,255,255,.06);cursor:pointer;
}
.stamp-picker-tile img{
  width:100%;height:72px;object-fit:contain;object-position:center;
  display:block;border-radius:6px;
}
.stamp-picker-tile.is-profile-pick{box-shadow:0 0 0 2px var(--pink)}
.stamp-picker-star{
  position:absolute;top:2px;right:2px;font-size:14px;line-height:1;color:rgba(255,255,255,.55);
  text-shadow:0 1px 3px rgba(0,0,0,.8);cursor:pointer;padding:2px;
}
.stamp-picker-star.is-on{color:#ffd76a}
.stamp-picker-empty{font-size:12px;color:rgba(255,255,255,.7);text-align:center;grid-column:1/-1;margin:12px 0}
.stamp-picker-audio{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.82)}
.banner-stamp-section{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.options-stamp-grid{display:flex;flex-wrap:wrap;gap:8px;min-height:36px;margin:8px 0 10px}
.options-stamp-slot{
  width:40px;height:40px;border-radius:8px;flex:0 0 auto;overflow:hidden;
  background:rgba(255,255,255,.08);
}
.options-stamp-slot img{width:100%;height:100%;object-fit:contain}
#modal-stamp-profile{z-index:950}
#modal-stamp-profile .stamp-profile-mbox{
  width:min(400px,calc(100vw - 24px));max-height:min(88vh,640px);
  display:flex;flex-direction:column;gap:10px;
}
.stamp-profile-lead{margin:0;font-size:12px;color:rgba(255,255,255,.72);text-align:center}
.stamp-profile-count{margin:0;font-size:13px;font-weight:700;color:var(--pink);text-align:center}
.stamp-profile-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  overflow-y:auto;flex:1;min-height:120px;max-height:min(360px,50vh);padding:4px 2px;
}
.stamp-profile-actions{display:flex;justify-content:center;gap:10px;padding-top:4px}
.rank-stamp-profile{display:none!important}
body.tcg-spectator-mode #btn-stamp{display:none!important}
.account-shell.wide{max-width:min(900px,96vw)}
.account-shell.deck-builder-shell{max-width:min(1320px,98vw);width:100%;margin:0 auto;align-self:center}
#screen-deck{
  justify-content:flex-start;
  align-items:stretch;
  padding:2px 10px 4px;
  overflow-y:auto;
  min-height:100%;
  box-sizing:border-box;
  --deck-grid-cols:5;
  --deck-hover-panel-w:248px;
}
#screen-deck .deck-builder-shell{
  gap:4px;
  margin-block:0;
  max-width:min(1280px,98vw);
  width:100%;
  flex:1 1 auto;
  min-height:0;
  max-height:calc(100dvh - 4px);
  align-self:center;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#screen-deck .logo{
  margin-bottom:2px;
  max-width:min(240px,62vw);
}
#screen-deck .logo-img{
  max-width:min(200px,50vw);
  filter:drop-shadow(0 4px 14px rgba(255,107,168,.22));
}
#screen-deck .logo-tagline,#screen-deck .logo-version{
  font-size:10px;
  letter-spacing:.03em;
}
#screen-deck .logo-foot{margin-top:3px}
#screen-deck .account-panel{
  padding:10px 14px 6px;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#screen-deck .account-panel .field{
  margin-bottom:7px;
}
#screen-deck .deck-builder-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px 18px;
  margin-bottom:7px;
}
#screen-deck .deck-builder-meta .field{
  margin-bottom:0;
}
#screen-deck .deck-builder-meta__name{
  flex:0 1 auto;
  min-width:min(160px,100%);
}
#screen-deck .deck-builder-meta__name input{
  width:min(240px,100%);
  max-width:100%;
}
#screen-deck .deck-builder-meta__import-search{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:8px 10px;
  flex:0 1 auto;
  width:auto;
  max-width:100%;
  min-width:0;
}
#screen-deck .deck-builder-meta__sleeve-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:10px 14px;
  flex:1 1 100%;
  width:100%;
  min-width:0;
}
#screen-deck .deck-builder-meta__sleeve{
  flex:0 0 auto;
  min-width:0;
  max-width:100%;
}
#screen-deck .deck-builder-meta__side-tools{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1 1 280px;
  min-width:min(240px,100%);
  max-width:100%;
}
#screen-deck .deck-builder-meta__side-tools .deck-pool-tools{
  margin-bottom:0;
}
#screen-deck .deck-builder-meta__side-tools .deck-filter-panel:not(.show-advanced){
  max-height:none;
}
#screen-deck .deck-builder-meta__side-tools .deck-filter-panel.show-advanced{
  max-height:min(42vh,320px);
}
#screen-deck .deck-builder-meta__search{
  flex:0 1 150px;
  width:150px;
  max-width:160px;
  min-width:120px;
}
#screen-deck .deck-builder-meta__search input{
  width:100%;
  max-width:100%;
  font-family:ui-monospace,Consolas,monospace;font-size:12px;letter-spacing:.02em;
}
.lobby-deck-experiment{margin-top:8px;width:100%;font-size:12px}
.experiment-import-row{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px;width:100%;
}
.experiment-import-col{
  flex:1 1 200px;min-width:min(180px,100%);
}
.experiment-import-col label{display:block;margin-bottom:4px}
.experiment-pwd-row{display:flex;gap:8px;align-items:stretch;flex-wrap:nowrap}
.experiment-pwd-row input{
  flex:1 1 auto;min-width:0;width:100%;
  text-transform:uppercase;letter-spacing:.08em;
  font-family:ui-monospace,Consolas,monospace;font-size:12px;
}
.experiment-pwd-row .btn-out{
  flex:0 0 auto;width:auto;min-width:0;padding:10px 12px;font-size:12px;white-space:nowrap;
}
#screen-deck .deck-builder-meta__experiment-pwd{
  flex:0 1 148px;
  width:148px;
  max-width:168px;
  min-width:120px;
}
#screen-deck .deck-builder-meta__experiment-pwd .experiment-pwd-row input{
  width:100%;
  max-width:100%;
}
#screen-deck .deck-builder-meta__experiment-pwd .experiment-pwd-row .btn-out{
  padding:8px 10px;
}
#screen-deck .deck-builder-meta__experiment-pwd .experiment-pwd-active{
  margin-top:6px;
}
#screen-deck .deck-builder-meta__experiment-decklog{
  flex:0 1 200px;
  width:200px;
  max-width:220px;
  min-width:150px;
}
#screen-deck .deck-builder-meta__experiment-decklog .experiment-pwd-row input{
  width:100%;
  max-width:100%;
}
#screen-deck .deck-builder-meta__experiment-decklog .deck-builder-hint--compact{
  display:none;
}
#screen-deck .deck-builder-meta.deck-experiment-meta .deck-builder-meta__import-search{
  flex:1 1 auto;
  flex-wrap:wrap;
  min-width:min(300px,100%);
}
.experiment-pwd-active{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11px;color:rgba(255,255,255,.85)}
.experiment-pwd-active code{font-size:12px;letter-spacing:.1em;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.35);color:#bae4ff}
.experiment-pwd-active .btn-ghost{padding:4px 8px;font-size:11px}
#inp-lobby-experiment-pwd{font-family:ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
#screen-deck .deck-builder-meta__slots{
  flex:1 1 280px;
  min-width:min(280px,100%);
}
#screen-deck .deck-builder-meta__account-decklog{
  flex:0 1 200px;
  width:200px;
  max-width:220px;
  min-width:150px;
}
#screen-deck .deck-builder-meta__account-decklog .experiment-pwd-row input{
  width:100%;
  max-width:100%;
}
#screen-deck .deck-builder-meta__account-decklog .deck-builder-hint--compact{
  display:none;
}
#screen-deck .deck-builder-meta__account-decklog .decklog-auto-energy-opt{
  display:flex;
  align-items:flex-start;
  gap:6px;
  margin-top:6px;
  font-size:10px;
  line-height:1.25;
  white-space:normal;
}
/* deck log import overlays — match sticker-info / menu shell chrome */
.overlay.decklog-import-overlay{
  z-index:920;
  padding:clamp(12px,3vw,24px) 16px;
  align-items:center;
  justify-content:center;
  overflow:auto;
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;
}
.decklog-import-shell{
  max-width:min(780px,96vw);
  width:100%;
  margin-block:auto;
  padding:clamp(16px,2.6vw,24px);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.44);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(38,132,210,.9);
  box-shadow:0 18px 52px rgba(0,0,0,.45),0 0 32px rgba(52,163,243,.24),inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  text-align:left;
  max-height:min(92vh,980px);
  overflow:auto;
  color:#fff;
}
.decklog-sub-pick-shell{max-width:min(1100px,98vw)}
.decklog-import-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.decklog-import-head h2{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  font-family:Kalnia,serif;
  font-weight:500;
  font-size:clamp(22px,3.6vw,32px);
  line-height:1.2;
  letter-spacing:.02em;
  background:linear-gradient(45deg,#ffcbe1 0%,#fff 18%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-align:left;
}
.decklog-import-close{
  flex:0 0 auto;
  width:36px;
  height:36px;
  padding:0;
  border-radius:50%;
  font-size:16px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.decklog-import-lead{
  font-size:14px;
  color:rgba(255,255,255,.92);
  line-height:1.55;
  letter-spacing:.03em;
  margin:0 0 14px;
}
.decklog-missing-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:12px;
  max-height:min(52vh,560px);
  overflow:auto;
  padding-right:6px;
  margin-right:-2px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,179,209,.75) rgba(255,255,255,.12);
}
.decklog-missing-list::-webkit-scrollbar{width:6px}
.decklog-missing-list::-webkit-scrollbar-track{
  background:rgba(255,255,255,.12);
  border-radius:999px;
  margin:6px 0;
}
.decklog-missing-list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--pink-l),var(--pink));
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 0 8px rgba(255,107,168,.28);
}
.decklog-missing-list::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#fff,var(--pink-l));
}
.decklog-import-shell{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,179,209,.75) rgba(255,255,255,.12);
}
.decklog-import-shell::-webkit-scrollbar{width:6px}
.decklog-import-shell::-webkit-scrollbar-track{
  background:rgba(255,255,255,.12);
  border-radius:999px;
  margin:6px 0;
}
.decklog-import-shell::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--pink-l),var(--pink));
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 0 8px rgba(255,107,168,.28);
}
.decklog-import-shell::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#fff,var(--pink-l));
}
.decklog-auto-energy-opt{
  display:flex;
  align-items:center;
  gap:8px;
  margin:8px 0 2px;
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.9);
  cursor:pointer;
  user-select:none;
}
.decklog-auto-energy-opt input{
  width:16px;
  height:16px;
  accent-color:var(--pink);
  cursor:pointer;
  flex:0 0 auto;
}
.decklog-missing-row{
  display:grid;
  grid-template-columns:104px 1fr minmax(150px,210px);
  gap:4px 12px;
  align-items:start;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.28);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(20,79,132,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.decklog-missing-thumb{
  width:104px;
  height:144px;
  border-radius:6px;
  background:rgba(0,0,0,.35);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  grid-row:1 / span 2;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}
.decklog-missing-thumb > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}
.decklog-missing-thumb--live .deck-live-art{
  position:absolute;
  left:50%;
  top:50%;
  width:calc(100% * 88 / 63);
  height:calc(100% * 63 / 88);
  transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center center;
  overflow:hidden;
  border-radius:inherit;
}
.decklog-missing-thumb--live .deck-live-art > img,
.decklog-missing-thumb--live .deck-live-art > .noimg,
.decklog-missing-thumb--live .deck-live-art > .card-face-fill{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
.decklog-missing-thumb--interactive{
  cursor:pointer;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  transition:box-shadow .15s ease, outline-color .15s ease;
}
.decklog-missing-thumb--interactive:hover{
  box-shadow:0 0 0 2px rgba(255,107,168,.55),0 6px 18px rgba(0,0,0,.4);
}
.decklog-missing-body{min-width:0;grid-column:2}
.decklog-missing-name{
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;
  font-weight:700;
  font-size:15px;
  line-height:1.3;
  color:#fff;
}
.decklog-missing-meta{
  font-family:'Libre Baskerville',serif;
  font-size:12px;
  color:rgba(255,255,255,.88);
  margin-top:4px;
}
.decklog-missing-obtain{
  font-size:12px;
  color:var(--pink-l);
  margin-top:4px;
  line-height:1.4;
}
.decklog-missing-sub{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
  justify-content:center;
  grid-column:3;
  grid-row:1 / span 2;
  align-self:center;
}
.decklog-missing-sub-status{
  font-size:12px;
  color:rgba(255,255,255,.86);
  line-height:1.35;
}
.decklog-missing-sub-tray{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.decklog-missing-sub-mini,
.decklog-sub-pick-mini{
  width:36px;
  height:50px;
  padding:0;
  border:0;
  border-radius:4px;
  overflow:hidden;
  position:relative;
  background:rgba(0,0,0,.35);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  flex:0 0 auto;
  cursor:pointer;
}
.decklog-missing-sub-mini{cursor:default}
.decklog-missing-sub-mini > img,
.decklog-sub-pick-mini > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.decklog-missing-sub-mini--live .deck-live-art,
.decklog-sub-pick-mini--live .deck-live-art{
  position:absolute;
  left:50%;
  top:50%;
  width:calc(100% * 88 / 63);
  height:calc(100% * 63 / 88);
  transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center center;
  overflow:hidden;
  border-radius:inherit;
}
.decklog-missing-sub-mini--live .deck-live-art > img,
.decklog-missing-sub-mini--live .deck-live-art > .noimg,
.decklog-missing-sub-mini--live .deck-live-art > .card-face-fill,
.decklog-sub-pick-mini--live .deck-live-art > img,
.decklog-sub-pick-mini--live .deck-live-art > .noimg,
.decklog-sub-pick-mini--live .deck-live-art > .card-face-fill{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
.decklog-sub-pick-mini:hover{
  box-shadow:0 0 0 2px rgba(255,107,168,.55),0 2px 8px rgba(0,0,0,.4);
}
.decklog-sub-pick-target{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.28);
  background:url("../../bg/ptn.png") top center/200px 200px repeat,rgba(20,79,132,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.decklog-sub-pick-target-thumb{
  width:56px;
  height:78px;
  border-radius:5px;
  overflow:hidden;
  position:relative;
  flex:0 0 auto;
  background:rgba(0,0,0,.35);
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}
.decklog-sub-pick-target-thumb > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.decklog-sub-pick-target-thumb--live .deck-live-art{
  position:absolute;
  left:50%;
  top:50%;
  width:calc(100% * 88 / 63);
  height:calc(100% * 63 / 88);
  transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center center;
  overflow:hidden;
  border-radius:inherit;
}
.decklog-sub-pick-target-thumb--live .deck-live-art > img,
.decklog-sub-pick-target-thumb--live .deck-live-art > .noimg,
.decklog-sub-pick-target-thumb--live .deck-live-art > .card-face-fill{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
.decklog-sub-pick-target-body{min-width:0;flex:1 1 auto}
.decklog-sub-pick-target-label{
  margin:0 0 2px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(186,228,255,.9);
}
.decklog-sub-pick-target-name{
  margin:0;
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;
  font-weight:700;
  font-size:15px;
  line-height:1.25;
  color:#fff;
}
.decklog-sub-pick-target-meta{
  margin:4px 0 0;
  font-family:'Libre Baskerville',serif;
  font-size:12px;
  color:rgba(255,255,255,.88);
  line-height:1.35;
}
.decklog-sub-pick-count{
  margin:0 0 10px;
  font-family:Kalnia,serif;
  font-size:clamp(18px,2.8vw,24px);
  font-weight:500;
  letter-spacing:.02em;
  color:#fff;
}
.decklog-sub-pick-count.is-ready{color:var(--pink-l)}
.decklog-sub-pick-tray{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(8,28,52,.45);
  min-height:66px;
}
.decklog-missing-sub .decklog-sub-choose{
  width:100%;
  padding:8px 12px;
  font-size:12px;
  font-weight:700;
}
.decklog-missing-err{
  margin:0 0 10px;
}
.decklog-import-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.22);
  position:sticky;
  bottom:0;
  background:linear-gradient(180deg,rgba(20,79,132,0),rgba(20,79,132,.92) 28%);
}
.decklog-sub-pick-tools{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(8,28,52,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.decklog-sub-pick-search-host .field{margin-bottom:0}
.decklog-sub-pick-search-host label{
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.9);
  margin-bottom:4px;
  display:block;
}
.decklog-sub-pick-search-host input{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.28);
  color:#fff;
}
.decklog-sub-pick-filter-host{
  max-height:min(34vh,320px);
  overflow:auto;
  padding-right:2px;
}
.decklog-sub-pick-pool-chrome{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
}
.decklog-sub-pick-pool-title{
  margin:0;
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;
  font-weight:700;
  font-size:15px;
  color:#fff;
}
.decklog-sub-pick-sort-host{margin-left:auto}
.decklog-sub-pick-pool-chrome .deck-section-stats{
  width:100%;
  margin:0;
  font-family:'Libre Baskerville',serif;
  font-size:12px;
  color:rgba(255,255,255,.88);
}
.decklog-sub-pick-pool-host{
  max-height:min(42vh,480px);
  overflow:auto;
  padding:8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.22);
}
/* Card tiles parked into the substitute picker keep deck-builder hover chrome */
#modal-decklog-sub-pick .deck-card-tile:hover{
  border-color:var(--pink);box-shadow:0 0 0 1px rgba(255,107,168,.35)}
@media (max-width:640px){
  .decklog-missing-row{
    grid-template-columns:88px 1fr;
    grid-template-areas:"img body" "sub sub";
  }
  .decklog-missing-thumb{width:88px;height:122px;grid-area:img;grid-row:auto}
  .decklog-missing-body{grid-area:body;grid-column:auto}
  .decklog-missing-sub{grid-area:sub;grid-column:auto;grid-row:auto}
  .decklog-import-head h2{font-size:clamp(20px,5.5vw,26px)}
}
#screen-deck .deck-section-head{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:center;
  gap:4px;
  margin:0 0 4px;
  flex:0 0 auto;
}
#screen-deck .deck-section-head--deck{
  align-items:center;
}
#screen-deck .deck-section-head__title-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-width:0;
  min-height:34px;
}
#screen-deck .deck-section-head__side{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
}
#screen-deck .deck-section-head__side--left{
  justify-content:flex-start;
}
#screen-deck .deck-section-head__side--right{
  justify-content:flex-end;
}
#screen-deck .deck-section-head--pool h4{
  position:static;
  left:auto;
  top:auto;
  transform:none;
  margin:0;
  flex:0 0 auto;
  text-align:center;
  pointer-events:none;
  white-space:nowrap;
  z-index:0;
}
#screen-deck .deck-section-head h4{
  margin:0;
  width:auto;
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  text-align:left;
  color:rgba(255,255,255,.95);
  letter-spacing:.04em;
  flex:0 1 auto;
  min-width:0;
}
#screen-deck .deck-section-head--deck h4{
  position:static;
  transform:none;
  width:100%;
  text-align:center;
  pointer-events:auto;
}
#screen-deck .deck-section-stats{
  margin:0;
  min-height:1.4em;
  font-size:14px;
  line-height:1.4;
  color:rgba(255,255,255,.82);
  text-align:center;
  white-space:normal;
}
#screen-deck .deck-collection-sort{
  position:static;
  right:auto;
  top:auto;
  transform:none;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 1 auto;
  margin:0;
  max-width:100%;
}
#screen-deck .deck-seal-batch-toggle{
  position:static;
  left:auto;
  top:auto;
  transform:none;
  z-index:1;
  width:auto;
  padding:6px 10px;
  font-size:12px;
  white-space:nowrap;
  flex:0 1 auto;
  max-width:100%;
}
#screen-deck .deck-collection-sort .llc-select-wrap{
  display:block;
  width:max-content;
  max-width:100%;
  min-width:0;
}
#screen-deck .deck-collection-sort select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:var(--deck-sort-select-w, 12.5rem);
  min-width:var(--deck-sort-select-w, 12.5rem);
  max-width:none;
  display:block;box-sizing:border-box;
  padding:6px 36px 6px 12px;min-height:34px;
  font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.02em;
  border:1px solid rgba(186,228,255,.55);border-radius:8px;
  background:rgba(52,163,243,.28);color:#fff;cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
  color-scheme:dark;
  white-space:nowrap;
}
#screen-deck .deck-collection-sort select:hover{
  border-color:rgba(255,255,255,.55);
  background:rgba(52,163,243,.42);
}
#screen-deck .deck-collection-sort select:focus{
  outline:none;border-color:#fff;background:rgba(255,255,255,.14);
  box-shadow:0 0 0 1px rgba(186,228,255,.4);
}
#screen-deck .deck-collection-sort select:disabled{opacity:.45;cursor:not-allowed}
#screen-deck .deck-builder-hint{
  font-size:10px;
  margin:0 0 3px;
  line-height:1.35;
  flex-shrink:0;
}
.deck-pool-tools{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:4px;
  min-width:0;
}
.deck-filter-panel{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  overflow:hidden;
}
.deck-filter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-shrink:0;
}
.deck-filter-title{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
.deck-filter-head-actions{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  flex-shrink:0;
}
.deck-filter-advanced-toggle{
  padding:3px 10px;
  font-size:10px;
  font-weight:600;
  border-radius:999px;
  white-space:nowrap;
}
.deck-filter-advanced-toggle.has-active{
  border-color:rgba(186,228,255,.55);
  color:#bae4ff;
}
.deck-filter-panel:not(.show-advanced){
  max-height:min(16vh,110px);
}
.deck-filter-panel.show-advanced{
  max-height:min(52vh,400px);
}
.deck-filter-advanced{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.deck-filter-advanced[hidden]{display:none!important}
.deck-filter-head label{
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,.88);
  letter-spacing:.04em;
}
.deck-filter-clear{
  padding:3px 8px;
  font-size:10px;
  border-radius:999px;
}
.deck-filter-rows{
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0;
  padding-right:2px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,179,209,.75) rgba(255,255,255,.12);
}
.deck-filter-rows::-webkit-scrollbar{width:6px}
.deck-filter-rows::-webkit-scrollbar-track{
  background:rgba(255,255,255,.12);
  border-radius:999px;
  margin:6px 0;
}
.deck-filter-rows::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--pink-l),var(--pink));
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 0 8px rgba(255,107,168,.28);
}
.deck-filter-rows::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#fff,var(--pink-l));
}
.deck-filter-pair{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:6px 14px;
  min-width:0;
}
.deck-filter-pair > .deck-filter-row{
  flex:1 1 220px;
  min-width:min(200px,100%);
}
.deck-filter-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  min-width:0;
}
.deck-filter-row-label{
  flex:0 0 100%;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  margin:0;
}
.deck-filter-chip{
  flex:0 0 auto;
  padding:4px 9px;
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.9);
  cursor:pointer;
  white-space:nowrap;
}
.deck-filter-chip:hover{border-color:rgba(186,228,255,.45)}
.deck-filter-chip.active{
  border-color:rgba(186,228,255,.75);
  background:rgba(186,228,255,.18);
  color:#fff;
  box-shadow:0 0 0 1px rgba(186,228,255,.25);
}
.deck-filter-heart{
  width:30px;height:30px;padding:3px;border-radius:8px;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.22);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.deck-filter-heart img{width:22px;height:22px;object-fit:contain;display:block;pointer-events:none}
.deck-filter-heart.active{border-color:rgba(186,228,255,.75);background:rgba(186,228,255,.14)}
.deck-filter-range{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
}
.deck-filter-range input{
  width:52px;padding:4px 6px;font-size:11px;
  border-radius:6px;border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.28);color:#fff;
}
.deck-filter-range span{font-size:10px;color:rgba(255,255,255,.5)}
.deck-filter-pack{
  width:min(100%,100%);
  max-width:100%;
  padding:5px 8px;font-size:11px;
  border-radius:6px;border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.28);color:#fff;
}
.deck-filter-pack option{font-size:11px}
.deck-heart-filters-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:flex-start;
  width:100%;
}
.deck-heart-section{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:0 0 auto;
  width:fit-content;
  max-width:100%;
}
.deck-heart-section > .deck-filter-row-label{
  flex:none;
  font-size:9px;
  letter-spacing:.06em;
}
.deck-heart-grid{
  display:flex;
  flex-direction:column;
  gap:1px;
  width:fit-content;
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  padding:3px;
  background:rgba(0,0,0,.18);
}
.deck-heart-grid-row{
  display:grid;
  grid-template-columns:20px repeat(5,20px);
  gap:1px;
  align-items:center;
}
.deck-heart-grid-header .deck-heart-mode-lbl{
  font-size:8px;
  font-weight:700;
  color:rgba(255,255,255,.42);
  text-align:center;
  line-height:1;
  user-select:none;
}
.deck-heart-label{
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:18px;
}
.deck-heart-label img{
  width:16px;
  height:16px;
  object-fit:contain;
  display:block;
  pointer-events:none;
}
.deck-heart-mode-btn{
  width:20px;
  height:18px;
  min-width:0;
  padding:0;
  font-size:8px;
  font-weight:700;
  border-radius:3px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.68);
  cursor:pointer;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.deck-heart-mode-btn:hover{border-color:rgba(186,228,255,.45);color:#fff}
.deck-heart-mode-btn.active{
  border-color:rgba(186,228,255,.8);
  background:rgba(186,228,255,.22);
  color:#fff;
  box-shadow:0 0 0 1px rgba(186,228,255,.2);
}
.deck-heart-mode-btn.none-mode{font-size:10px;line-height:.9}
.deck-filter-range-chips{
  display:flex;
  flex-direction:column;
  gap:3px;
  width:fit-content;
  max-width:100%;
}
.deck-filter-range-chip-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:3px;
}
.deck-filter-range-chip-row > span{
  flex:0 0 auto;
  font-size:9px;
  font-weight:700;
  color:rgba(255,255,255,.88);
  min-width:42px;
}
.deck-filter-range-tilde{
  flex:0 0 auto;
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,.88);
  padding:0 2px;
  user-select:none;
}
.deck-filter-range-chip{
  min-width:22px;
  padding:2px 5px;
  font-size:9px;
  font-weight:700;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.72);
  cursor:pointer;
}
.deck-filter-range-chip:hover{border-color:rgba(186,228,255,.45)}
.deck-filter-range-chip.active{
  border-color:rgba(186,228,255,.75);
  background:rgba(186,228,255,.18);
  color:#fff;
}
#screen-deck .deck-builder-lists{
  gap:8px;
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  align-items:stretch;
  margin-bottom:0;
  grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
}
#screen-deck .deck-builder-section{
  display:flex;
  flex-direction:column;
  min-height:0;
  align-items:stretch;
  overflow:hidden;
}
#screen-deck .deck-card-grid{
  padding:8px;
  gap:var(--deck-grid-gap,8px);
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,179,209,.75) rgba(255,255,255,.12);
  grid-auto-rows:var(--deck-tile-h);
}
#screen-deck .deck-card-grid--deck,
#screen-deck .deck-card-grid--pool{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,179,209,.75) rgba(255,255,255,.12);
  grid-template-columns:repeat(var(--deck-grid-cols,5),var(--deck-tile-w));
  grid-auto-rows:var(--deck-tile-h);
}
/* Match news overlay pink scrollbar (PC dual-pane grids) */
#screen-deck .deck-card-grid::-webkit-scrollbar{width:6px}
#screen-deck .deck-card-grid::-webkit-scrollbar-track{
  background:rgba(255,255,255,.12);
  border-radius:999px;
  margin:6px 0;
}
#screen-deck .deck-card-grid::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--pink-l),var(--pink));
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 0 8px rgba(255,107,168,.28);
}
#screen-deck .deck-card-grid::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#fff,var(--pink-l));
}
#screen-deck .deck-slot-row{
  margin:4px 0;
}
#screen-deck .deck-slot-btn{
  padding:6px 10px;
  font-size:12px;
}
#screen-deck .deck-builder-dock{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex-shrink:0;
  margin-top:6px;
}
#screen-deck .deck-builder-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:0;
  flex-shrink:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
#screen-deck #deck-err{flex-shrink:0;margin:0}
#screen-deck .deck-builder-actions .btn-grad,
#screen-deck .deck-builder-actions .btn-out,
#screen-deck .deck-builder-actions .btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  flex:1 1 auto;
  min-width:min(108px, 46%);
  min-height:40px;
  padding:10px 8px;
  font-size:11px;
  line-height:1.2;
  white-space:normal;
  text-align:center;
  transform:none;
}
#screen-deck .deck-builder-actions .btn-grad:hover:not(:disabled),
#screen-deck .deck-builder-actions .btn-out:hover:not(:disabled),
#screen-deck .deck-builder-actions .btn-ghost:hover:not(:disabled){
  transform:none;
}
#screen-deck .deck-builder-actions #btn-deck-save{
  order:-1;
  flex:1 1 140px;
  font-weight:800;
}
html.tcg-compact-desktop #screen-deck.active .deck-builder-dock,
html.tcg-mobile-viewport #screen-deck.active .deck-builder-dock{
  position:fixed;
  left:max(8px,env(safe-area-inset-left,0px));
  right:max(8px,env(safe-area-inset-right,0px));
  bottom:max(8px,env(safe-area-inset-bottom,0px));
  z-index:60;
  margin:0;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(186,228,255,.32);
  background:rgba(8,18,40,.94);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
html.tcg-compact-desktop #screen-deck.active .account-panel,
html.tcg-mobile-viewport #screen-deck.active .account-panel{
  padding-bottom:calc(156px + env(safe-area-inset-bottom,0px));
}
html.tcg-compact-desktop #screen-deck.active .deck-builder-actions,
html.tcg-mobile-viewport #screen-deck.active .deck-builder-actions{
  overflow:visible;
}
html.tcg-compact-desktop #screen-deck.active .deck-builder-actions #btn-deck-save,
html.tcg-mobile-viewport #screen-deck.active .deck-builder-actions #btn-deck-save{
  flex:1 1 100%;
  min-height:44px;
}
@media(max-width:900px){
  #screen-deck.active .deck-builder-dock{
    position:fixed;
    left:max(8px,env(safe-area-inset-left,0px));
    right:max(8px,env(safe-area-inset-right,0px));
    bottom:max(8px,env(safe-area-inset-bottom,0px));
    z-index:60;
    margin:0;
    padding:8px 10px;
    border-radius:14px;
    border:1px solid rgba(186,228,255,.32);
    background:rgba(8,18,40,.94);
    box-shadow:0 12px 32px rgba(0,0,0,.45);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
  #screen-deck.active .account-panel{
    padding-bottom:calc(156px + env(safe-area-inset-bottom,0px));
  }
  #screen-deck.active .deck-builder-actions{
    overflow:visible;
  }
  #screen-deck.active .deck-builder-actions #btn-deck-save{
    flex:1 1 100%;
    min-height:44px;
  }
}
@media(max-height:820px){
  #screen-deck .logo-img{max-width:min(168px,44vw)}
  #screen-deck .logo-tagline,#screen-deck .logo-version{font-size:9px}
}
@media(max-width:820px){
  #screen-deck .deck-builder-lists{grid-template-columns:1fr;gap:12px;max-height:none}
  #screen-deck .deck-builder-section{
    max-height:none;
    flex:0 0 auto;
    min-height:0;
    min-width:0;
    width:100%;
    overflow:hidden;
  }
  #screen-deck .deck-builder-section--deck{
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  #screen-deck .deck-card-grid,
  #screen-deck .deck-card-grid--deck,
  #screen-deck .deck-card-grid--pool{
    --deck-tile-w:min(70px,16vw);
    --deck-tile-h:calc(var(--deck-tile-w) * 88 / 63);
    --deck-grid-gap:6px;
    grid-template-columns:repeat(var(--deck-grid-cols,5),var(--deck-tile-w));
    justify-content:center;
    overflow-x:hidden;
    max-width:100%;
  }
  #deck-card-hover-panel{
    flex:0 0 min(var(--deck-hover-panel-w,248px),34vw);
    width:min(var(--deck-hover-panel-w,248px),34vw);
    max-width:min(var(--deck-hover-panel-w,248px),34vw);
  }
}
@media(max-width:520px){
  #screen-deck{--deck-grid-cols:3}
  #screen-deck .deck-builder-pool-layout{flex-direction:column}
  #screen-deck .deck-card-grid,
  #screen-deck .deck-card-grid--deck,
  #screen-deck .deck-card-grid--pool{
    --deck-tile-w:min(72px,28vw);
    --deck-grid-gap:5px;
  }
  #deck-card-hover-panel{
    flex:0 0 auto;
    width:100%;
    max-width:none;
    min-width:0;
    align-self:flex-start;
    max-height:min(38vh,320px);
  }
}
@media(max-width:380px){
  #screen-deck{--deck-grid-cols:3}
  #screen-deck .deck-card-grid,
  #screen-deck .deck-card-grid--deck,
  #screen-deck .deck-card-grid--pool{
    --deck-tile-w:min(64px,30vw);
  }
}
/*
 * Mobile only (not PC): unlock the viewport clamp so the whole deck-builder
 * menu scrolls as one page. Card grids expand with content — no nested
 * scroll panes (those feel broken on phones).
 * Also: stack Collection / Current Deck and shrink tiles so fixed 77px×5
 * columns cannot overflow and visually phase into the other pane.
 */
html.tcg-mobile-viewport #screen-deck{
  --deck-grid-cols:4;
  --deck-hover-panel-w:min(200px,42vw);
  padding:2px 8px 10px;
}
html.tcg-mobile-viewport #screen-deck .deck-card-grid,
html.tcg-mobile-viewport #screen-deck .deck-card-grid--deck,
html.tcg-mobile-viewport #screen-deck .deck-card-grid--pool{
  --deck-tile-w:min(68px,18vw);
  --deck-tile-h:calc(var(--deck-tile-w) * 88 / 63);
  --deck-grid-gap:6px;
  grid-template-columns:repeat(var(--deck-grid-cols,4),var(--deck-tile-w));
  justify-content:center;
}
html.tcg-mobile-viewport #screen-deck.active .deck-builder-shell{
  max-height:none;
  height:auto;
  flex:0 0 auto;
  overflow:visible;
  max-width:100%;
  gap:6px;
}
html.tcg-mobile-viewport #screen-deck.active .account-panel{
  overflow:visible;
  flex:0 0 auto;
  height:auto;
  min-height:0;
  padding:8px 10px 8px;
}
html.tcg-mobile-viewport #screen-deck.active .deck-builder-lists{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  flex:0 0 auto;
  min-height:0;
  height:auto;
  overflow:visible;
  align-items:stretch;
}
html.tcg-mobile-viewport #screen-deck.active .deck-builder-section{
  flex:0 0 auto;
  min-height:auto;
  max-height:none;
  overflow:hidden;
  height:auto;
  width:100%;
  min-width:0;
}
html.tcg-mobile-viewport #screen-deck.active .deck-builder-section--deck{
  margin-top:2px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.14);
}
html.tcg-mobile-viewport #screen-deck.active .deck-builder-pool-layout,
html.tcg-mobile-viewport #screen-deck.active .deck-builder-pool-main{
  flex:0 0 auto;
  min-height:0;
  height:auto;
  overflow:visible;
  width:100%;
  min-width:0;
}
html.tcg-mobile-viewport #screen-deck.active .deck-card-grid,
html.tcg-mobile-viewport #screen-deck.active .deck-card-grid--deck,
html.tcg-mobile-viewport #screen-deck.active .deck-card-grid--pool{
  flex:0 0 auto;
  min-height:0;
  max-height:none;
  height:auto;
  overflow-x:hidden;
  overflow-y:visible;
  scrollbar-gutter:auto;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
html.tcg-mobile-viewport #screen-deck .deck-section-head h4{
  font-size:18px;
}
html.tcg-mobile-viewport #screen-deck .deck-section-stats{
  font-size:12px;
}
html.tcg-mobile-viewport #screen-deck .deck-builder-meta{
  gap:8px 10px;
}
html.tcg-mobile-viewport #screen-deck #deck-card-hover-panel{
  display:none!important;
}
@media(max-width:520px){
  html.tcg-mobile-viewport #screen-deck{
    --deck-grid-cols:3;
  }
  html.tcg-mobile-viewport #screen-deck .deck-card-grid,
  html.tcg-mobile-viewport #screen-deck .deck-card-grid--deck,
  html.tcg-mobile-viewport #screen-deck .deck-card-grid--pool{
    --deck-tile-w:min(72px,28vw);
    --deck-grid-gap:5px;
  }
}
@media(max-width:380px){
  html.tcg-mobile-viewport #screen-deck{
    --deck-grid-cols:3;
  }
  html.tcg-mobile-viewport #screen-deck .deck-card-grid,
  html.tcg-mobile-viewport #screen-deck .deck-card-grid--deck,
  html.tcg-mobile-viewport #screen-deck .deck-card-grid--pool{
    --deck-tile-w:min(64px,30vw);
  }
}
/* Tablet / short landscape phones still in mobile viewport: keep stacked panes. */
@media(min-width:521px) and (max-width:900px){
  html.tcg-mobile-viewport #screen-deck{
    --deck-grid-cols:5;
  }
  html.tcg-mobile-viewport #screen-deck .deck-card-grid,
  html.tcg-mobile-viewport #screen-deck .deck-card-grid--deck,
  html.tcg-mobile-viewport #screen-deck .deck-card-grid--pool{
    --deck-tile-w:min(70px,14vw);
  }
}
.deck-builder-lists{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.deck-builder-lists h4{color:rgba(255,255,255,.95);font-size:13px;margin:0 0 6px}
.deck-builder-hint{font-size:11px;color:rgba(255,255,255,.65);margin:0 0 6px}
.deck-builder-section{min-width:0}
.deck-card-grid{
  --deck-tile-w:77px;
  --deck-tile-h:calc(var(--deck-tile-w) * 88 / 63);
  --deck-grid-cols:5;
  --deck-grid-gap:8px;
  display:grid;
  grid-template-columns:repeat(var(--deck-grid-cols),var(--deck-tile-w));
  grid-auto-rows:var(--deck-tile-h);
  gap:var(--deck-grid-gap);
  justify-content:start;align-content:start;
  border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:10px;background:rgba(0,0,0,.18)}
.deck-card-grid--deck,.deck-card-grid--pool{overflow:visible}
.deck-card-tile{
  width:var(--deck-tile-w);max-width:var(--deck-tile-w);min-width:0;
  height:var(--deck-tile-h);min-height:var(--deck-tile-h);max-height:var(--deck-tile-h);
  justify-self:start;align-self:start;aspect-ratio:63/88;border-radius:6px;overflow:hidden;
  position:relative;cursor:pointer;border:2px solid transparent;background:rgba(0,0,0,.35);
  flex-shrink:0;transition:border-color .12s,box-shadow .12s;box-sizing:border-box}
/* Live art is landscape-native; rotate it into the portrait 63:88 tile.
   Unscoped so every surface that builds a .deck-live-tile (deck builder,
   card list, decklog substitute picker) gets the same orientation. */
.deck-live-tile .deck-live-art{
  position:absolute;left:50%;top:50%;
  width:calc(100% * 88 / 63);height:calc(100% * 63 / 88);
  transform:translate(-50%,-50%) rotate(90deg);transform-origin:center center;
  overflow:hidden;border-radius:inherit}
.deck-live-tile .deck-live-art > img,
.deck-live-tile .deck-live-art > .noimg,
.deck-live-tile .deck-live-art > .card-face-fill{
  width:100%;height:100%;object-fit:contain;object-position:center;display:block}
#screen-deck .deck-card-tile:not(.deck-live-tile):hover,
#screen-deck .deck-card-tile.deck-live-tile:hover,
#screen-deck .deck-card-tile.hover-sel,
.deck-card-tile:hover{
  transform:none;z-index:1}
.deck-card-tile:hover{
  border-color:var(--pink);box-shadow:0 0 0 1px rgba(255,107,168,.35)}
.deck-card-tile:not(.deck-live-tile) img,.deck-card-tile:not(.deck-live-tile) .noimg,.deck-card-tile:not(.deck-live-tile) .card-face-fill{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.deck-card-tile .deck-qty{position:absolute;bottom:3px;right:3px;background:rgba(0,0,0,.82);color:#fff;
  font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;line-height:1.3;pointer-events:none}
.deck-card-tile .deck-rarity{position:absolute;top:3px;right:3px;font-size:8px;font-weight:700;background:rgba(0,0,0,.72);
  color:#fff;padding:1px 4px;border-radius:3px;pointer-events:none;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck-card-tile .deck-loveca-pt{position:absolute;top:3px;left:3px;font-size:8px;font-weight:800;
  background:rgba(90,18,55,.88);color:#fff;padding:2px 5px;border-radius:4px;line-height:1.2;letter-spacing:.02em;pointer-events:none}
#deck-current-stats.deck-stats-over{color:#ffd6e8;font-weight:700}
.deck-card-tile.in-deck{border-color:rgba(154,230,180,.45)}
.deck-card-tile.deck-hold-pending{touch-action:none}
.deck-card-empty{font-size:12px;color:rgba(255,255,255,.55);padding:12px 8px}
.deck-current{font-size:13px;line-height:1.6;color:rgba(255,255,255,.92)}
.auth-box{text-align:center;padding:28px 20px;flex:0 0 auto}
.auth-box p{color:rgba(255,255,255,.92);font-size:15px;line-height:1.45}
.auth-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px;width:100%;max-width:280px;margin-left:auto;margin-right:auto}
.auth-actions .btn-out,.auth-actions .btn-grad{width:100%}
.options-section{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.options-section h3{margin:0 0 8px;font-size:16px;color:#fff}
.options-section .account-lead{text-align:left;margin-bottom:12px}
.options-toggle{display:flex;align-items:flex-start;gap:10px;color:rgba(255,255,255,.88);font-size:14px;line-height:1.45;cursor:pointer;user-select:none}
.options-toggle input{margin-top:3px;accent-color:var(--pink);flex-shrink:0}
.options-sfx-volume{margin:10px 0 0 26px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;color:rgba(255,255,255,.82);font-size:13px}
.options-sfx-volume label{flex:0 0 auto}
.options-sfx-volume input[type=range]{flex:1;min-width:140px;max-width:280px;accent-color:var(--pink)}
.options-sfx-volume-val{min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.65)}
.options-sfx-volume.is-muted{opacity:.45;pointer-events:none}
.options-text-scale{margin:14px 0 4px}
.options-text-scale-head{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:6px;
  color:rgba(255,255,255,.9);font-size:14px;font-weight:700
}
.options-text-scale-exp{
  display:inline-block;padding:2px 8px;border-radius:999px;
  border:1px solid rgba(255,179,209,.4);background:rgba(255,107,168,.12);
  font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--pink-l);text-transform:uppercase
}
.options-text-scale .account-lead{margin-bottom:10px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.72)}
.options-text-scale-steps{
  display:flex;flex-wrap:wrap;gap:8px;align-items:stretch
}
.options-scale-btn{
  flex:1 1 auto;min-width:4.5em;padding:10px 12px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.88);font-family:'Libre Baskerville',serif;font-size:14px;font-weight:700;
  letter-spacing:.02em;transition:border-color .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease
}
.options-scale-btn:hover{
  border-color:rgba(255,179,209,.55);background:rgba(255,107,168,.12);color:#fff
}
.options-scale-btn.is-active{
  border-color:var(--pink);background:rgba(255,107,168,.22);color:#fff;
  box-shadow:0 0 0 1px rgba(255,107,168,.35),0 4px 14px rgba(255,107,168,.2)
}
.options-danger{border-color:rgba(252,165,165,.55);color:#FECACA}
.options-danger:hover{border-color:#FCA5A5;background:rgba(127,29,29,.35)}
/*
 * Text/UI scale: zoom grows layout boxes so scrollable parents absorb size
 * (no transform-overlap). Cap zoomed modal height so panels stay on-screen.
 */
.llc-menu-screen.active > *{
  zoom:var(--ui-text-scale)
}
.overlay.open > .mbox,
#modal-sticker-info.open .sticker-info-shell,
#overlay-missions.open .missions-shell,
#overlay-news.open .news-shell{
  zoom:var(--ui-text-scale)
}
html[data-ui-text-scale]:not([data-ui-text-scale="100"]) .overlay.open > .mbox{
  max-height:calc(88dvh / var(--ui-text-scale))
}
html[data-ui-text-scale]:not([data-ui-text-scale="100"]) #overlay-missions.open,
html[data-ui-text-scale]:not([data-ui-text-scale="100"]) #overlay-news.open,
html[data-ui-text-scale]:not([data-ui-text-scale="100"]) #modal-sticker-info.open{
  overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch
}
html[data-ui-text-scale]:not([data-ui-text-scale="100"]) #overlay-missions.open .missions-shell,
html[data-ui-text-scale]:not([data-ui-text-scale="100"]) #overlay-news.open .news-shell,
html[data-ui-text-scale]:not([data-ui-text-scale="100"]) #modal-sticker-info.open .sticker-info-shell{
  max-height:calc(90dvh / var(--ui-text-scale))
}
/* Match chrome: scale side panels on desktop (flex shrinks playmat). Mobile: phase bar only. */
html:not(.tcg-mobile-viewport) #screen-game .side-panel{
  zoom:var(--ui-text-scale)
}
html.tcg-mobile-viewport #screen-game .phase-action-bar{
  zoom:var(--ui-text-scale)
}
/*
 * Text scale + CSS zoom grows used layout size. Side panels are height:100vh and
 * centered in .game-wide-wrap, so 115–130% clips both top and bottom. Inverse
 * height/width keep the zoomed panel inside the viewport; flex-shrink + scroll
 * keep content reachable without overlapping the playmat.
 */
html:not(.tcg-mobile-viewport)[data-ui-text-scale]:not([data-ui-text-scale="100"]) #screen-game .game-wide-wrap{
  align-items:stretch
}
html:not(.tcg-mobile-viewport)[data-ui-text-scale]:not([data-ui-text-scale="100"]) #screen-game .side-panel{
  --ui-scale-panel-h:calc(100vh / var(--ui-text-scale));
  --ui-scale-panel-w:calc(var(--side-panel-w) / var(--ui-text-scale));
  height:var(--ui-scale-panel-h);
  max-height:var(--ui-scale-panel-h);
  width:var(--ui-scale-panel-w);
  min-width:var(--ui-scale-panel-w);
  max-width:var(--ui-scale-panel-w);
  flex:0 0 var(--ui-scale-panel-w);
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  gap:calc(10px / var(--ui-text-scale));
  padding:calc(14px / var(--ui-text-scale)) calc(12px / var(--ui-text-scale));
  box-sizing:border-box
}
html.tcg-desktop-scaled:not(.tcg-mobile-viewport)[data-ui-text-scale]:not([data-ui-text-scale="100"]) #screen-game .game-viewport-frame .side-panel{
  --ui-scale-panel-h:calc(100% / var(--ui-text-scale));
  height:var(--ui-scale-panel-h);
  max-height:var(--ui-scale-panel-h)
}
html:not(.tcg-mobile-viewport)[data-ui-text-scale]:not([data-ui-text-scale="100"]) #screen-game .side-panel.side-left > .stage-board-panel{
  flex:1 1 auto;
  flex-shrink:1;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto
}
html:not(.tcg-mobile-viewport)[data-ui-text-scale]:not([data-ui-text-scale="100"]) #screen-game .side-panel.side-left > .card-hover-panel{
  flex:0 1 auto;
  flex-shrink:1;
  min-height:0;
  max-height:min(42%, 280px);
  overflow-x:hidden;
  overflow-y:auto;
  margin-top:auto
}
html:not(.tcg-mobile-viewport)[data-ui-text-scale]:not([data-ui-text-scale="100"]) #screen-game .side-panel.side-right .side-log{
  flex:1 1 0;
  min-height:0;
  max-height:100%;
  overflow:hidden
}
html:not(.tcg-mobile-viewport)[data-ui-text-scale]:not([data-ui-text-scale="100"]) #screen-game .side-panel.side-right .side-log > ll-side-panel{
  flex:1 1 0;
  min-height:0;
  max-height:100%;
  overflow:hidden
}
.account-panel .field label{color:rgba(255,255,255,.78)}
/* ── Card tilt (all rarities) + foil textures (premium rarities) ── */
html:not(.foil-fx-off) #screen-game .hand-fan{perspective:1200px}
html:not(.foil-fx-off) #screen-game .hcard.card-tilt-enabled,
html:not(.foil-fx-off) #screen-game .lcard.card-tilt-enabled,
html:not(.foil-fx-off) #screen-game .mslot.card-tilt-enabled{
  transform-style:preserve-3d;
  --foil-x:50%;--foil-y:50%;--foil-rx:0deg;--foil-ry:0deg;
  transition:transform .48s cubic-bezier(0.34,1.56,0.64,1),box-shadow .18s ease,border-color .15s;
}
html:not(.foil-fx-off) #screen-game .hcard.card-tilt-enabled:not(.play-sel):not(.foil-tilt-hover):hover{
  transform:translateY(-4px);
}
html:not(.foil-fx-off) #screen-game .my-hand-strip .hcard.card-tilt-enabled.foil-tilt-hover:not(.play-sel){
  transform:translateY(-12px) rotateX(var(--foil-rx,0deg)) rotateY(var(--foil-ry,0deg));
  z-index:8;box-shadow:0 16px 36px rgba(0,0,0,.48),0 0 22px rgba(255,180,230,.18);
}
html:not(.foil-fx-off) #screen-game .hcard.card-tilt-enabled.foil-tilt-hover:not(.play-sel){
  transform:translateY(-10px) rotateX(var(--foil-rx,0deg)) rotateY(var(--foil-ry,0deg));
  z-index:7;box-shadow:0 14px 32px rgba(0,0,0,.45),0 0 18px rgba(255,200,255,.15);
}
html:not(.foil-fx-off) #screen-game .hcard.card-tilt-enabled.play-sel.foil-tilt-hover{
  transform:translateY(-28px) rotateX(var(--foil-rx,0deg)) rotateY(var(--foil-ry,0deg));
}
html:not(.foil-fx-off) #screen-game .lcard.card-tilt-enabled.foil-tilt-hover,
html:not(.foil-fx-off) #screen-game .mslot.card-tilt-enabled.foil-tilt-hover{
  transform:rotateX(var(--foil-rx,0deg)) rotateY(var(--foil-ry,0deg));
  z-index:12;box-shadow:0 10px 26px rgba(0,0,0,.42),0 0 14px rgba(255,210,255,.12);
}
.card-foil-fx{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;overflow:hidden;
}
.card-foil-grain{
  position:absolute;inset:0;opacity:0;
  background:
    repeating-linear-gradient(118deg,transparent 0 2px,rgba(255,255,255,.05) 2px 3px),
    repeating-linear-gradient(28deg,transparent 0 3px,rgba(0,0,0,.07) 3px 4px);
  mix-blend-mode:overlay;
}
.foil-tex-standard .card-foil-grain{opacity:.42}
.foil-tex-energy .card-foil-grain{
  opacity:.92;
  background:
    repeating-linear-gradient(105deg,transparent 0 1px,rgba(255,255,255,.08) 1px 2px),
    repeating-linear-gradient(15deg,rgba(180,220,255,.06) 0 4px,rgba(255,200,255,.05) 4px 8px),
    repeating-linear-gradient(75deg,transparent 0 3px,rgba(0,0,0,.08) 3px 4px);
}
.foil-tex-secret .card-foil-grain{
  /* Lighter than standard dark grain — SEC rainbow was reading muddy/dark. */
  opacity:.32;
  background:
    repeating-linear-gradient(118deg,transparent 0 2px,rgba(255,255,255,.08) 2px 3px),
    repeating-linear-gradient(28deg,transparent 0 3px,rgba(0,0,0,.035) 3px 4px);
}
.card-foil-shine{
  position:absolute;inset:-25%;
  background:radial-gradient(circle at var(--foil-x,50%) var(--foil-y,50%),
    rgba(255,255,255,.34) 0%,rgba(255,255,255,.07) 22%,transparent 52%);
  mix-blend-mode:soft-light;opacity:0;transition:opacity .32s ease;
}
.card-foil-enabled.foil-tilt-hover .card-foil-shine{opacity:.68}
.foil-tex-secret.card-foil-enabled.foil-tilt-hover .card-foil-shine{opacity:.78}
.card-foil-rainbow{
  position:absolute;inset:-10%;opacity:0;pointer-events:none;
  background:linear-gradient(125deg,
    transparent 15%,rgba(255,120,200,.22) 30%,rgba(120,210,255,.28) 45%,
    rgba(255,230,120,.24) 58%,rgba(180,130,255,.26) 72%,transparent 88%);
  background-size:240% 240%;
  background-position:calc(var(--foil-x,50%) * 1.4) calc(var(--foil-y,50%) * 1.4);
  mix-blend-mode:color-dodge;
  transition:opacity .28s ease;
}
/* Soft-light keeps chroma without crushing midtones; stronger on tilt. */
.foil-tex-secret .card-foil-rainbow{
  opacity:.46;
  mix-blend-mode:soft-light;
  background:linear-gradient(125deg,
    transparent 12%,rgba(255,150,220,.34) 28%,rgba(140,220,255,.38) 44%,
    rgba(255,236,150,.36) 58%,rgba(200,160,255,.38) 74%,transparent 90%);
}
.foil-tex-secret.card-foil-enabled.foil-tilt-hover .card-foil-rainbow{opacity:.72}
.foil-tex-energy .card-foil-rainbow{opacity:.35}
.card-foil-stamp{
  display:none;position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 42% 28% at var(--foil-x,50%) var(--foil-y,50%),rgba(255,230,140,.42),transparent 72%),
    linear-gradient(140deg,transparent 40%,rgba(255,215,100,.18) 50%,transparent 60%);
  mix-blend-mode:hard-light;
}
.foil-tex-signed .card-foil-stamp{display:block;opacity:.88}
.card-tilt-enabled .card-face-fill,
.card-tilt-enabled img.card-face-fill{transform:translateZ(1px)}
/* Keep card art sharp when lifting — avoid scale() on card shells (causes bitmap upscale blur). */
#screen-game img.card-face-fill,
#screen-game .hcard img,
#screen-game .lcard img,
#screen-game .mslot img,
#screen-game .echip img,
.overlay .menu-card img,
.overlay .mullcard img,
.overlay .pickcard img,
.overlay .surveilcard img,
.overlay .hand-pick-card img,
.deck-card-tile img,
.zthumb img{
  image-rendering:auto;
  image-rendering:-webkit-optimize-contrast;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}