/* Chem Clash v1.2 backgrounds + contrast fix (item 0 / F6 / F76) */
html{background:#E9F1FF}
body{background:transparent!important;isolation:isolate;color:#2B3550}
.chem-scenery{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#E9F1FF}
.chem-scenery-canvas{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.chem-scenery svg{position:absolute;inset:0;width:100%;height:100%;opacity:.45}
.chem-scenery:after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.42)}
.bg-tutorial .chem-scenery:after{background:rgba(255,255,255,.78)}
.bg-defeat .chem-scenery:after{background:rgba(57,48,79,.45)}

#stage,#app,.v1-local-board{background:transparent!important}
#stage:before,.ambient{display:none!important}

/* Panels: opaque enough for ≥4.5:1 text */
.home-content,.intro,.gallery-head,
dialog,.drawer,.reaction-animation,.tools,.legend,
.v1-local-board>header,.turn-banner,.tutorial-banner,
.v1-actions,.v1-team,.inline-help,details.inline-help{
  background:rgba(255,255,255,.88)!important;
  color:#2B3550!important;
  border:1px solid rgba(43,53,80,.14);
  border-radius:16px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.home-content,.intro,.gallery-head{padding:clamp(16px,4vw,28px)}
.home-content :is(h1,h2,h3,p,label,small,b,.academy,.subtitle,.kicker,.brand),
.intro :is(h1,h2,h3,p,label,small,b,.steps),
.gallery-head :is(h1,p),
dialog :is(h2,h3,p,.note,li,label,b,small),
.drawer :is(h2,h3,p,.note,li,label,b,small),
#app>header,#app>header :is(h1,p,small,b),
.v1-local-board>header :is(b,span),
.turn-banner :is(b,span),
.team-label :is(b,span),
.hand-title :is(h2,span),
.save-status,.card-reason,.inline-help{color:#2B3550!important;text-shadow:none!important}

/* Buttons inside panels — never blank / invisible */
button,.choice,[data-cmd],[data-action],[data-answer],[data-modal],[data-pending],
.home-content a,.intro a,.gallery-head a,#app>header a,.art-library-link,
.top-buttons button,.v1-actions button,.controls button{
  color:#2B3550!important;
  background:linear-gradient(180deg,#ffffff,#e8eef8)!important;
  border:1px solid rgba(43,53,80,.22)!important;
  min-height:44px;
  min-width:44px;
  border-radius:14px;
  font-weight:700;
  text-decoration:none!important;
  box-shadow:0 1px 0 #fff inset;
}
button.primary,.choice.primary,[data-cmd].primary,
button.primary:disabled{
  background:linear-gradient(180deg,#4FD1F5,#3B82F6)!important;
  color:#fff!important;
  border-color:#2563eb!important;
}
button.orange{background:linear-gradient(180deg,#FF8FB8,#FF6F9F)!important;color:#fff!important}
button:disabled,.choice:disabled{opacity:.55;filter:grayscale(.15)}
button:active{transform:translateY(2px) scale(.98)}

/* Selects / inputs */
select,input[type=text],textarea{
  background:#fff!important;color:#2B3550!important;
  border:1px solid #809b9a!important;min-height:44px;border-radius:12px;padding:8px 12px
}
label{color:#2B3550!important}
input[type=checkbox]{width:22px;height:22px;accent-color:#3B82F6}

/* Quiz answers — high contrast */
dialog [data-answer],.drawer [data-answer],
body[data-bg-scene=quiz] button{
  background:#fff!important;color:#183b42!important;
  border:2px solid #3B82F6!important;font-size:16px!important
}
body[data-bg-scene=quiz] :is(dialog,.drawer){
  /* contrast_fix: dark panel over scene art (was white frost → white text invisible) */
  background:linear-gradient(165deg,rgba(12,16,36,.94),rgba(8,12,28,.96))!important;
  color:#f2f6ff!important;
  border:1px solid rgba(255,214,107,.45)!important
}
body[data-bg-scene=fusion] :is(dialog,.drawer){
  /* contrast_fix: dark panel over scene art (was white frost → white text invisible) */
  background:linear-gradient(165deg,rgba(12,16,36,.94),rgba(8,12,28,.96))!important;
  color:#f2f6ff!important;
  border:1px solid rgba(255,214,107,.45)!important
}
body[data-bg-scene=result] :is(dialog,.drawer){
  /* contrast_fix: dark panel over scene art (was white frost → white text invisible) */
  background:linear-gradient(165deg,rgba(12,16,36,.94),rgba(8,12,28,.96))!important;
  color:#f2f6ff!important;
  border:1px solid rgba(255,214,107,.45)!important
}

.locked-electrons{color:#4b5563!important;background:#e5e7eb;padding:6px 10px;border-radius:10px;display:inline-block}
.note,dialog .note,.drawer .note{background:#edf3e9!important;color:#183b42!important}
#detail .formula,#detail .detail-attack b,#detail .detail-attack small,#detail .english-note{color:#254b53!important}
.intro .steps>div{background:#e2eee5;color:#183b42}

/* Safe area + dvh */
html,body{min-height:100vh;min-height:100dvh}
#viewport,#app,#stage{
  padding-top:env(safe-area-inset-top,0);
  padding-left:env(safe-area-inset-left,0);
  padding-right:env(safe-area-inset-right,0);
}
.v12-sticky-bar{
  position:sticky;bottom:0;z-index:30;
  padding:8px 10px max(env(safe-area-inset-bottom),8px);
  background:rgba(255,255,255,.94)!important;
  border-top:1px solid rgba(43,53,80,.12);
  display:flex;flex-direction:column;gap:8px;
}
.v12-sticky-bar .row{display:flex;gap:8px}
.v12-sticky-bar .row>*{flex:1}
.v12-end-hold{
  -webkit-touch-callout:none;user-select:none;-webkit-user-select:none;
  touch-action:manipulation;position:relative;overflow:hidden
}
.v12-end-hold .hold-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(59,130,246,.35);pointer-events:none
}

/* One-screen battle (F46–47 minimum) */
@media (max-width:520px){
  body.v12-battle-active,body.v12-battle-active #app,body.v12-battle-active #stage,
  body.v12-battle-active #viewport{
    height:100dvh;max-height:100dvh;overflow:hidden!important;overscroll-behavior:none
  }
  body.v12-battle-active .v1-local-board,
  body.v12-battle-active #app{
    display:flex;flex-direction:column;height:100%;max-height:100dvh;overflow:hidden
  }
  body.v12-battle-active .v1-local-hand,
  body.v12-battle-active .v1-hand,
  body.v12-battle-active #hand-scroll{
    display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;
    touch-action:pan-x;scroll-snap-type:x mandatory;gap:8px;padding:6px 4px;
    max-height:150px;flex:0 0 auto
  }
  body.v12-battle-active .v1-local-hand>*,
  body.v12-battle-active .v1-hand>*{
    flex:0 0 68px;width:68px;scroll-snap-align:start
  }
  body.v12-battle-active .v1-local-bench,
  body.v12-battle-active .v1-bench{
    display:grid!important;grid-template-columns:repeat(3,1fr);gap:6px;
    overflow:hidden!important;max-height:64px
  }
  body.v12-battle-active .card-english{word-break:keep-all;overflow-wrap:normal;font-size:11px}
  body.v12-battle-active .v1-card-art{object-fit:cover;aspect-ratio:2/3;max-height:72px;width:100%}
}

/* Compound +2 badge */
.ko-plus2{position:absolute;top:4px;right:4px;background:linear-gradient(135deg,#FFE08A,#F5B700);color:#5b3b00;
  font-size:11px;font-weight:800;padding:2px 6px;border-radius:999px;z-index:2}
.card,.v1-fighter,.v1-hand-card{position:relative}
/* Energy chips: beat v1.css `.v1-unit-info span{display:block}` which stretched e⁻ᴬ into a huge yellow slash */
.energy-shapes,.v1-unit-info .energy-shapes{display:inline-flex!important;flex-wrap:wrap;align-items:center;gap:2px;width:auto!important;max-width:100%;overflow:visible}
.energy-shapes span,.v1-unit-info .energy-shapes span,.v1-unit-info .e-shape,.e-shape{
  display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;
  width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;
  max-width:22px!important;max-height:22px!important;flex:0 0 22px!important;overflow:hidden!important;
  border-radius:50%;font-size:11px;font-weight:800;margin:1px;line-height:1;vertical-align:middle
}
.e-shape.normal{background:#3B82F6;color:#fff}
.e-shape.quiz,.v1-unit-info .e-shape.quiz{
  background:linear-gradient(135deg,#FFE08A,#F5B700);color:#5b3b00;border-radius:4px;
  transform:rotate(45deg);width:22px!important;height:22px!important;max-width:22px!important;max-height:22px!important;
  flex:0 0 22px!important;overflow:hidden!important
}
.e-shape.quiz>span,.v1-unit-info .e-shape.quiz>span{
  transform:rotate(-45deg);display:flex!important;align-items:center;justify-content:center;
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  flex:none!important;overflow:visible!important;line-height:1;margin:0
}
.e-shape.locked{background:#9ca3af;color:#111;border:2px solid #6b7280}

@media (min-width:850px){
  .chem-scenery{background:linear-gradient(90deg,#dce9df,#f3f5ee 35%,#f3f5ee 65%,#dce9df)}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:900px){
  /* Phone landscape only — iPad landscape stays playable */
  body.v12-battle-active::before{
    content:'請轉返直向玩';position:fixed;inset:0;z-index:9999;
    background:#1e293bee;color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:20px;font-weight:800
  }
}

/* Force readable controls (wins over chain/v1) */
button.primary,
.controls button.primary,
.v1-actions button.primary,
.v12-sticky-bar button.primary,
[data-cmd=start].primary,
button.primary .hold-label{
  background:linear-gradient(180deg,#4FD1F5,#3B82F6)!important;
  color:#ffffff!important;
  border:1px solid #1d4ed8!important;
}
button:not(.primary),
.controls button:not(.primary),
.top-buttons button,
a.art-library-link{
  background:linear-gradient(180deg,#ffffff,#e8eef8)!important;
  color:#2B3550!important;
}
dialog button[data-answer],
dialog button[data-fusion-answer],
dialog button[data-action],
dialog button[data-pending]{
  background:#ffffff!important;
  color:#183b42!important;
  border:2px solid #3B82F6!important;
  width:100%;
  margin:6px 0;
  text-align:left;
  padding:12px 14px;
}


/* v1.2: English names break only at spaces, never mid-word */
.card-english,.v1-name small,.v1-hand-card small,.v1-fighter .v1-name small,
.card-head small,.detail-title small{
  word-break:keep-all!important;
  overflow-wrap:break-word!important;
  hyphens:manual!important;
  -webkit-hyphens:manual!important;
}
.v12-first-chip{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:6px 12px;border-radius:999px;
  background:rgba(255,224,138,.92);color:#2B3550;font-weight:800;
  border:1px solid #F5B700;flex-shrink:0;
}

.v12-end-hold{position:relative;overflow:hidden}.v12-end-hold .hold-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,143,184,.45);pointer-events:none}.v12-end-hold .hold-label{position:relative}
.v12-hold-hint{animation:v12shake .35s}
@keyframes v12shake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.v12-hold-hint{animation:none}}

/* v1.2 home one-screen (~390×844) */
body:not(.v12-battle-active) #app,
body:not(.v12-battle-active) .intro,
body:not(.v12-battle-active) .home-content{
  max-height:100dvh;overflow:auto;overscroll-behavior:contain;
}
.intro{padding:8px 12px 12px!important;margin:0 auto!important}
.intro h2{font-size:22px!important;line-height:1.25!important;margin:6px 0 8px!important}
.intro .hero-cards{display:flex;justify-content:center;gap:6px;margin:4px 0 8px!important;max-height:72px;overflow:hidden}
.intro .hero-cards img,.intro .hero-cards .v1-card-art,.intro .hero-cards > *{max-height:72px!important;width:auto!important}
.intro .steps{display:flex!important;gap:6px!important;margin:6px 0!important}
.intro .steps div{padding:6px 8px!important;font-size:12px!important}
.intro p{margin:4px 0!important;font-size:13px!important;line-height:1.35!important}
.intro label{margin:4px 0!important;font-size:13px!important}
.intro .controls{margin-top:8px!important;gap:6px!important}
.intro .controls .primary{min-height:48px!important}
.home-content{padding:16px 16px 12px!important}
.home-content .brand{font-size:28px!important;margin:6px 0 2px!important}
.home-content .academy{font-size:14px!important;letter-spacing:4px!important}
.home-content .subtitle{margin:6px 0 8px!important;font-size:13px!important}
.home-content .sigil{height:64px!important;width:64px!important;font-size:28px!important;margin:4px auto!important}
.home-content .deck-select{margin:8px 0!important;gap:8px!important}
.home-content .deck-option{padding:8px!important}
.home-content .home-links{margin-top:8px!important;gap:6px!important}
.home-content .home-links a,.home-content .home-links button{font-size:13px!important;min-height:40px!important;padding:6px 8px!important}
.home-content > a{padding:10px!important;margin-bottom:8px!important}
@media(max-height:900px){
  /* Hub no longer dumps selects — keep a compact hero strip; hide only the 3-step row */
  .home-content .sigil{display:none!important}
  .intro .steps{display:none!important}
  .intro h2{font-size:20px!important}
  .intro.hub .hero-cards{display:flex!important;max-height:64px!important;margin:4px 0 6px!important}
  .intro.hub .hero-cards img,.intro.hub .hero-cards .v1-card-art,.intro.hub .hero-cards > *{max-height:64px!important;width:auto!important}
}
@media(max-height:620px){
  .intro.hub .hero-cards{display:none!important}
}
/* wide desktop: 2-col battle hand */
@media(min-width:1100px){
  body.v12-battle-active .v1-hand,body.v12-battle-active .v1-local-hand{
    grid-auto-flow:row!important;grid-template-rows:none!important;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;
    max-height:none!important;
  }
}

.v12-home-more{margin-top:8px;border:1px solid rgba(43,53,80,.15);border-radius:12px;padding:4px 10px;background:rgba(255,255,255,.55)}
.v12-home-more summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font-weight:700;color:#2B3550}

/* Ultra-short / narrow phones (e.g. 320×568): shave ~12px so #app fits */
@media (max-width:340px),(max-height:600px){
  .intro .brand,.home-content .brand{font-size:24px!important;margin:2px 0 0!important}
  .intro .academy,.home-content .academy{font-size:12px!important;letter-spacing:2px!important;margin:0!important}
  .intro .subtitle,.home-content .subtitle{margin:2px 0 4px!important;font-size:12px!important}
  .intro h2{font-size:18px!important;margin:4px 0!important}
  .intro .controls{margin-top:4px!important;gap:4px!important}
  .intro .controls .primary,.home-content > a{min-height:44px!important;padding:8px!important;margin-bottom:4px!important}
  .home-content{padding:8px 10px 6px!important}
  .home-content .deck-select{margin:4px 0!important;gap:4px!important}
  .home-content .deck-option{padding:6px!important}
  .v12-home-more{margin-top:4px;padding:2px 8px}
  .v12-home-more summary{min-height:36px}
  .intro p,.intro label{margin:2px 0!important;font-size:12px!important}
}
/* Wide desktop battle: chain uses .v12-board (two .v1-team); local may use .v1-board */
@media (min-width:1400px){
  body.v12-battle-active #app,body.v12-battle-active .v1-shell,body.v12-battle-active .chain-shell{
    max-width:min(1600px,96vw)!important;margin-left:auto!important;margin-right:auto!important;
  }
  body.v12-battle-active .v12-board,body.v12-battle-active .v1-board,body.v12-battle-active .chain-board{
    display:grid!important;grid-template-columns:1fr auto 1fr!important;gap:8px 16px!important;
    align-items:start!important;margin:4px 0 8px!important;
  }
  body.v12-battle-active .v12-board .versus{align-self:center!important;margin:0!important;padding:0 4px!important}
  body.v12-battle-active .v1-team{margin:0!important}
  body.v12-battle-active .v1-fighter{transform:scale(0.88);transform-origin:top center;max-width:280px}
  body.v12-battle-active .v1-bench{display:flex!important;flex-wrap:wrap!important;gap:4px!important}
  body.v12-battle-active .v1-bench .v1-fighter{transform:scale(0.72);max-width:160px}
  body.v12-battle-active .inline-help,body.v12-battle-active .v11-help{display:none!important}
  body.v12-battle-active .hand-title{margin:4px 0!important}
  body.v12-battle-active .v1-hand,body.v12-battle-active .v1-local-hand,body.v12-battle-active #hand-scroll{
    display:grid!important;grid-template-columns:repeat(auto-fill,minmax(110px,1fr))!important;
    grid-auto-flow:row!important;max-height:28vh!important;overflow:auto!important;gap:6px!important;
  }
  body.v12-battle-active .v12-sticky-bar{position:sticky!important;bottom:0!important;z-index:20!important}
  body.v12-battle-active .turn-banner{margin:4px 0!important;padding:6px 10px!important}
  body.v12-battle-active header{margin-bottom:4px!important}
}

/* 1920 chain: keep hand+sticky in first viewport */
@media (min-width:1400px){
  body.v12-battle-active .v12-board .v1-team .team-label{font-size:13px!important;margin-bottom:2px!important}
  body.v12-battle-active .v12-board .v1-fighter img,
  body.v12-battle-active .v12-board .v1-fighter .card-art,
  body.v12-battle-active .v12-board .art-frame{max-height:140px!important;width:auto!important}
  body.v12-battle-active .versus + .versus,
  body.v12-battle-active .hand-title + .versus{display:none!important}
  body.v12-battle-active .save-status{display:none!important}
  body.v12-battle-active .v1-hand-card{min-height:0!important;padding:4px!important}
  body.v12-battle-active .v1-hand-card .card-reason{display:none!important}
  body.v12-battle-active .v1-hand-card img,body.v12-battle-active .v1-hand-card .card-art{max-height:72px!important}
}

/* ===== v1.2 hub + matchup: NO panel — content sits on the lab background =====
   Scoped to non-battle screens via .intro.hub/.intro.matchup + body:has(). */
body:has(.intro.hub,.intro.matchup):not(.v12-battle-active)::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,28,70,.18) 0%,rgba(30,28,70,0) 22%,rgba(30,28,70,0) 45%,rgba(28,26,66,.38) 78%,rgba(24,22,60,.55) 100%);
}
body:not(.v12-battle-active) .intro:is(.hub,.matchup){
  background:transparent!important;border:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
/* Text: white + soft dark shadow */
body:not(.v12-battle-active) .intro:is(.hub,.matchup) :is(h1,h2,h3,p,label,small,b,span,strong,.diff-label,.vs-tile-label),
body:not(.v12-battle-active) #app>header:has(+ .intro:is(.hub,.matchup)) :is(h1,p){
  color:#fff!important;
  text-shadow:0 1px 2px rgba(20,20,60,.7),0 2px 12px rgba(20,20,60,.55)!important;
}
body:not(.v12-battle-active) .intro.hub h2{font-size:26px!important;letter-spacing:1px}
body:not(.v12-battle-active) .intro.matchup .diff-blurb{color:#bff7e8!important;font-weight:700}
/* Hero cards float */
body:not(.v12-battle-active) .intro.hub .hero-cards{overflow:visible!important;max-height:none!important;padding:6px 0 10px}
body:not(.v12-battle-active) .intro.hub .hero-cards :is(img,.v1-card-art){
  max-height:96px!important;border:2px solid rgba(255,255,255,.85)!important;border-radius:10px!important;
  box-shadow:0 8px 22px rgba(20,20,60,.45)!important;
}
/* Ghost pills for every non-primary control on these screens */
body:not(.v12-battle-active) .intro:is(.hub,.matchup) button:not(.primary):not(.vs-tile),
body:not(.v12-battle-active) .intro.hub a.art-library-link,
body:not(.v12-battle-active) #app>header .back-btn{
  background:rgba(20,20,60,.12)!important;
  border:1px solid rgba(255,255,255,.75)!important;border-radius:999px!important;
  color:#fff!important;box-shadow:none!important;
  text-shadow:0 1px 2px rgba(20,20,60,.7),0 2px 10px rgba(20,20,60,.5)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
body:not(.v12-battle-active) .intro.hub .hub-footer{border-top:0!important}
body:not(.v12-battle-active) .intro.hub .hub-footer button,
body:not(.v12-battle-active) .intro.hub .hub-footer a.art-library-link{border-color:rgba(255,255,255,.5)!important;padding:8px 14px!important}
body:not(.v12-battle-active) .intro.hub .hub-footer span{color:rgba(255,255,255,.6)!important}
body:not(.v12-battle-active) .intro:is(.hub,.matchup) .primary{border-radius:999px!important;box-shadow:0 8px 24px rgba(37,99,235,.45)!important}
/* VS tiles: art + shadowed text, no box */
body:not(.v12-battle-active) .intro.matchup .vs-tile{
  background:transparent!important;border:0!important;box-shadow:none!important;padding:4px!important;border-radius:16px!important;
}
/* single-card portrait as tile cover removed — see .deck-cover / .deck-fan below */
body:not(.v12-battle-active) .intro.matchup .vs-tile b{font-size:18px!important}
body:not(.v12-battle-active) .intro.matchup .vs-center strong{font-size:34px!important;color:#fff!important;text-shadow:0 2px 4px rgba(20,20,60,.6),0 0 20px rgba(80,60,180,.6)!important}
/* Difficulty: ghost pills, selected filled accent */
body:not(.v12-battle-active) .intro.matchup .diff-pill.selected{
  background:linear-gradient(180deg,#5eead4,#14b8a6)!important;border-color:#ccfbf1!important;color:#06312c!important;
  text-shadow:none!important;box-shadow:0 6px 18px rgba(20,184,166,.45)!important
}
body:not(.v12-battle-active) .intro.matchup .compact-choice{background:transparent!important;border:0!important;padding:4px 2px!important}
body:not(.v12-battle-active) .intro.matchup input[type=checkbox]{color-scheme:light;accent-color:#14b8a6}
@media(max-width:480px){
  body:not(.v12-battle-active) .intro.matchup .vs-row{grid-template-columns:1fr auto 1fr!important;gap:6px!important}
  body:not(.v12-battle-active) .intro.matchup .vs-tile{flex-direction:column!important;align-items:center!important;text-align:center!important;gap:4px!important}
  /* portrait tile img rule removed */
  body:not(.v12-battle-active) .intro.matchup .vs-tile :is(b,small){flex:none!important;width:100%;text-align:center!important}
  body:not(.v12-battle-active) .intro.matchup .vs-tile .vs-tile-label{width:100%;margin:0!important}
  body:not(.v12-battle-active) .intro.matchup .vs-tile small{font-size:12px!important;line-height:1.4!important}
  body:not(.v12-battle-active) .intro.matchup .vs-center strong{font-size:24px!important}
}
/* Deck picker dialog: dark translucent */
dialog:has(.deck-options){
  background:rgba(22,22,58,.72)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.3)!important;box-shadow:0 20px 60px rgba(10,10,40,.5)!important;color:#fff!important
}
dialog:has(.deck-options)::backdrop{background:rgba(20,20,60,.35)!important}
dialog:has(.deck-options) :is(h2,b,small,p){color:#fff!important;text-shadow:none!important}
dialog:has(.deck-options) .controls{background:transparent!important}
dialog:has(.deck-options) :is(.deck-options button,.controls button){
  background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.45)!important;color:#fff!important;box-shadow:none!important;border-radius:14px!important
}
dialog:has(.deck-options) .controls button{border-radius:999px!important}
dialog:has(.deck-options) .deck-options button.selected{
  background:rgba(20,184,166,.35)!important;border:2px solid #5eead4!important;box-shadow:0 0 0 3px rgba(94,234,212,.3)!important
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  dialog:has(.deck-options){background:rgba(22,22,58,.94)!important}
}
/* no-panel iteration 2: scrim lives on the scenery overlay (body::before was painted under it) */
body:has(.intro.hub,.intro.matchup):not(.v12-battle-active)::before{content:none!important}
body:has(.intro.hub,.intro.matchup):not(.v12-battle-active) .chem-scenery:after{
  background:linear-gradient(180deg,rgba(28,26,70,.30) 0%,rgba(40,36,90,.12) 30%,rgba(40,36,90,.10) 50%,rgba(28,26,70,.42) 80%,rgba(22,20,58,.62) 100%)!important;
}
body:not(.v12-battle-active) .intro.matchup button.diff-pill.selected:not(.primary):not(.vs-tile){
  background:linear-gradient(180deg,#5eead4,#14b8a6)!important;border:1px solid #ccfbf1!important;color:#06312c!important;
  text-shadow:none!important;box-shadow:0 6px 18px rgba(20,184,166,.45)!important
}
body:not(.v12-battle-active) .intro:is(.hub,.matchup) button:not(.primary):not(.vs-tile){background:rgba(20,20,60,.22)!important}
/* no-panel iteration 3: desktop — centre hub vertically, larger hero + text */
@media(min-width:700px) and (min-height:700px){
  body:not(.v12-battle-active) .intro.hub{min-height:calc(100dvh - 120px);display:flex;flex-direction:column;justify-content:center}
  body:not(.v12-battle-active) .intro.hub h2{font-size:34px!important}
  body:not(.v12-battle-active) .intro.hub .hero-cards{display:flex!important}
  body:not(.v12-battle-active) .intro.hub .hero-cards :is(img,.v1-card-art){max-height:150px!important}
  body:not(.v12-battle-active) .intro:is(.hub,.matchup) p,
  body:not(.v12-battle-active) .intro.matchup label{font-size:15px!important}
}
/* Matchup: no blown-up single-card portrait — use emblem/cover wrap instead */
body:not(.v12-battle-active) .intro.matchup .vs-tile :is(img.v1-card-art,.v1-card-art){/* legacy rule neutralized below */}
body:not(.v12-battle-active) .intro.matchup .vs-tile > .v1-card-art,
body:not(.v12-battle-active) .intro.matchup .vs-tile > img.v1-card-art{display:none!important}
body:not(.v12-battle-active) .intro.matchup .vs-tile .deck-cover.ready{
  display:block!important;width:100%!important;max-width:160px!important;height:auto!important;aspect-ratio:2/3!important;
  object-fit:cover!important;object-position:50% 18%!important;
  border:2px solid rgba(255,255,255,.85)!important;border-radius:14px!important;box-shadow:0 10px 26px rgba(20,20,60,.45)!important
}
body:not(.v12-battle-active) .intro.matchup .vs-tile:is(:hover,:focus-visible) .deck-cover.ready,
body:not(.v12-battle-active) .intro.matchup .vs-tile:is(:hover,:focus-visible) .deck-fan-card{
  border-color:#7ff3d5!important;box-shadow:0 0 0 3px rgba(127,243,213,.55),0 8px 20px rgba(20,20,60,.4)!important
}
body:not(.v12-battle-active) .intro.matchup .vs-tile .deck-fan-card :is(img,.v1-card-art){
  width:100%!important;height:100%!important;max-width:none!important;aspect-ratio:auto!important;
  border:0!important;border-radius:0!important;box-shadow:none!important
}
@media(max-width:480px){
  body:not(.v12-battle-active) .intro.matchup .vs-tile .deck-cover.ready{max-width:120px!important}
  body:not(.v12-battle-active) .intro.matchup .vs-tile .deck-fan-card :is(img,.v1-card-art){
    width:100%!important;height:100%!important;max-width:none!important;aspect-ratio:auto!important
  }
}