:root {
  --bg: #090b12;
  --panel: #121521;
  --panel-2: #181c2b;
  --line: rgba(255,255,255,.16);
  --text: #fffdf7;
  --muted: #f4ead7;
  --gold: #e2c27a;
  --violet: #8b5cf6;
  --cyan: #58d0d4;
  --green: #4ade80;
  --red: #f87171;
  --shadow: 0 20px 50px rgba(0,0,0,.35);
  --radius: 22px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at top,rgba(139,92,246,.14),transparent 28%),radial-gradient(circle at bottom,rgba(88,208,212,.08),transparent 28%),var(--bg);color:var(--text);font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;overscroll-behavior-y:none;overscroll-behavior-x:none;-webkit-overflow-scrolling:touch}
body{max-width:none;margin:0;padding:0;background:radial-gradient(circle at top,rgba(139,92,246,.14),transparent 28%),radial-gradient(circle at bottom,rgba(88,208,212,.08),transparent 28%),var(--bg);overscroll-behavior:none}
.app-shell{min-height:100svh;display:flex;flex-direction:column;padding:10px 10px 96px;max-width:560px;margin:0 auto;overscroll-behavior-y:contain}
#app{flex:1}
button{font:inherit}
img{max-width:100%;display:block}
a{color:inherit}
.panel{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);box-shadow:var(--shadow)}
.topbar{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:14px;align-items:center;position:sticky;top:0;z-index:12;background:linear-gradient(180deg,rgba(18,21,33,.95),rgba(24,28,43,.92));backdrop-filter:blur(12px)}
.topbar h1{font-size:30px;margin:0;font-weight:700;letter-spacing:.02em}
.topbar-actions{display:flex;gap:8px;align-items:center}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.28em;color:var(--gold);margin-bottom:4px}
.btn{border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--text);border-radius:14px;padding:12px 14px;cursor:pointer;font-size:16px;font-weight:600}
.btn.primary{background:linear-gradient(180deg,#e7cd90,#caa154);color:#24170c;border-color:rgba(255,255,255,.08);font-weight:700}
.btn.ghost{background:rgba(255,255,255,.04)}
.btn.small{padding:10px 12px;font-size:15px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.stack{display:grid;gap:14px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mini-box{padding:14px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.mini-link{cursor:pointer;text-align:left}
.mini-label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.mini-value{font-size:32px;font-weight:700;margin-top:4px;color:var(--text)}
.screen-title{font-size:34px;font-weight:700;margin:0 0 8px;color:var(--text)}
.screen-sub,.helper,.list,.deck-meta,.augury-desc,.value-sub,.log-item{font-size:20px;color:var(--muted);line-height:1.62}
.card-frame{position:relative;overflow:hidden;border-radius:28px;border:1px solid rgba(226,194,122,.30);background:linear-gradient(180deg,#0f121d,#171b2a);padding:14px;box-shadow:0 0 0 1px rgba(226,194,122,.08),0 24px 64px rgba(0,0,0,.42)}
.card-frame::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:30px;background:linear-gradient(135deg,rgba(226,194,122,.65),rgba(139,92,246,.4),rgba(88,208,212,.3));filter:blur(12px);opacity:.5}
.card-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.card-title{font-size:40px;line-height:1.08;font-weight:800;margin:0;color:var(--text)}
.badge{border:1px solid rgba(226,194,122,.28);background:rgba(226,194,122,.14);color:#fff4d6;padding:8px 12px;border-radius:999px;font-size:13px;text-transform:uppercase;letter-spacing:.1em}
.art-box{margin-top:12px;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#0f1118;position:relative}
.art-box img{width:100%;aspect-ratio:2/3;object-fit:cover}
.card-back-box{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px;overflow:hidden;background:radial-gradient(circle at center,rgba(139,92,246,.22),transparent 28%),linear-gradient(180deg,#111321,#0c0f18)}
.card-back-box::before{content:"";position:absolute;inset:18px;border-radius:18px;border:1px solid rgba(226,194,122,.22)}
.back-sigil{font-size:86px;color:#f8e8b9;text-shadow:0 0 18px rgba(226,194,122,.35);position:relative;z-index:1}
.back-runes{position:absolute;bottom:28px;letter-spacing:.5em;color:rgba(255,240,201,.7);font-size:18px}
.lineage,.chronicle,.gift,.stats{margin-top:12px;padding:12px 14px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.label{font-size:13px;text-transform:uppercase;letter-spacing:.22em;color:var(--gold);margin-bottom:6px}
.value-text,.stat-head,.result-title,.deck-name,.augury-name{color:var(--text)}
.value-text{font-size:26px;line-height:1.64;font-weight:700}
.stat-row{margin-top:10px;position:relative}
.stat-head{display:flex;justify-content:space-between;font-size:25px;font-weight:800;margin-bottom:10px;gap:14px}
.bar{height:14px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08);position:relative}
.fill{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--violet));width:0}
.fill.active{background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:0 0 20px rgba(88,208,212,.35)}
.fill.animate-delta{width:var(--bar-end);animation:barGrow .85s ease forwards}
@keyframes barGrow{from{width:var(--bar-start)}to{width:var(--bar-end)}}
.delta-pill{display:inline-flex;align-items:center;justify-content:center;margin-top:8px;padding:6px 10px;border-radius:999px;font-size:15px;font-weight:700;animation:deltaFloat .8s ease both}
.delta-pill.positive{background:rgba(74,222,128,.14);color:#d6ffe3;border:1px solid rgba(74,222,128,.3)}
.delta-pill.negative{background:rgba(248,113,113,.14);color:#ffe0e0;border:1px solid rgba(248,113,113,.3)}
@keyframes deltaFloat{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.deck-stack-wrap{overflow-x:auto;padding-bottom:6px}
.deck-stack{display:flex;gap:0;align-items:flex-start;padding:8px 0 4px 2px;min-height:250px}
.deck-card{padding:10px;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:linear-gradient(180deg,rgba(24,18,26,.92),rgba(18,20,31,.96));cursor:pointer;display:grid;gap:10px;min-width:170px;width:170px;box-shadow:var(--shadow)}
.deck-card.selected{outline:2px solid var(--gold);background:linear-gradient(180deg,rgba(60,45,24,.96),rgba(24,20,31,.98))}
.deck-art-wrap{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0f1118}
.deck-card img{border-radius:14px;aspect-ratio:2/3;object-fit:cover;width:100%}
.deck-card-copy{display:grid;gap:4px;background:linear-gradient(180deg,rgba(13,15,24,.96),rgba(22,20,31,.98));border:1px solid rgba(226,194,122,.16);border-radius:14px;padding:10px 10px 11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.deck-name{font-size:20px;font-weight:800;line-height:1.2}
.attr-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.attr-btn{padding:14px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.07);color:var(--text);cursor:pointer;font-size:18px;font-weight:700}
.attr-btn.active{background:rgba(88,208,212,.14);border-color:rgba(88,208,212,.42)}
.augury-toggle{padding:16px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.05);cursor:pointer;text-align:left;width:100%}
.augury-toggle.selected{outline:2px solid var(--violet);background:rgba(139,92,246,.14)}
.augury-name{font-size:20px;font-weight:800}
.result-box{padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07)}
.result-title{font-size:24px;font-weight:700;margin-bottom:6px}

#app{position:relative;min-height:320px;overflow:hidden;}
.screen-shell{
  position:relative;
  isolation:isolate;
  opacity:1;
  transform:translateX(0) scale(1);
  filter:none;
}
.screen-shell::before,.screen-shell::after{
  content:"";
  position:absolute;
  inset:-12% -8%;
  pointer-events:none;
  opacity:0;
  z-index:3;
  mix-blend-mode:screen;
  will-change:transform,opacity,filter;
}
.screen-shell::before{
  background:
    radial-gradient(circle at 18% 52%, rgba(214,224,255,.14) 0 8%, rgba(214,224,255,0) 26%),
    radial-gradient(circle at 50% 28%, rgba(173,216,230,.16) 0 10%, rgba(173,216,230,0) 30%),
    radial-gradient(circle at 82% 58%, rgba(160,120,255,.18) 0 9%, rgba(160,120,255,0) 28%),
    radial-gradient(circle at 38% 82%, rgba(226,194,122,.12) 0 8%, rgba(226,194,122,0) 26%);
  filter:blur(24px);
}
.screen-shell::after{
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(214,224,255,.08) 18%, rgba(255,255,255,.12) 34%, rgba(160,120,255,.10) 52%, rgba(255,255,255,.06) 72%, rgba(255,255,255,0) 100%);
  filter:blur(30px);
  transform:translateX(-18%) scale(1.08);
}
.screen-shell.is-leaving{
  opacity:0;
  transform:translateX(18px) scale(.985);
  filter:blur(4px);
  transition:opacity .22s ease, transform .22s ease, filter .22s ease;
}
.screen-shell.is-leaving::before{
  opacity:.62;
  animation:sectionMistDriftOut .28s ease forwards;
}
.screen-shell.is-leaving::after{
  opacity:.42;
  animation:sectionMistSweepOut .28s ease forwards;
}
.screen-shell.is-entering{
  opacity:0;
  transform:translateX(-18px) scale(.985);
  filter:blur(4px);
}
.screen-shell.is-entering::before{
  opacity:.56;
  animation:sectionMistDriftIn .46s cubic-bezier(.2,.8,.2,1) both;
}
.screen-shell.is-entering::after{
  opacity:.38;
  animation:sectionMistSweepIn .46s cubic-bezier(.2,.8,.2,1) both;
}
.screen-shell.is-entering.is-active{
  opacity:1;
  transform:translateX(0) scale(1);
  filter:none;
  transition:opacity .34s ease, transform .34s cubic-bezier(.22,.8,.2,1), filter .34s ease;
}
@keyframes sectionMistDriftIn{
  0%{opacity:0;transform:translate3d(-2.5%,1%,0) scale(1.06);filter:blur(28px)}
  28%{opacity:.55}
  100%{opacity:0;transform:translate3d(2.5%,-1.5%,0) scale(1.16);filter:blur(36px)}
}
@keyframes sectionMistSweepIn{
  0%{opacity:0;transform:translateX(-24%) scale(1.08)}
  32%{opacity:.4}
  100%{opacity:0;transform:translateX(22%) scale(1.16)}
}
@keyframes sectionMistDriftOut{
  0%{opacity:0;transform:translate3d(-1%,0,0) scale(1.02);filter:blur(22px)}
  35%{opacity:.5}
  100%{opacity:0;transform:translate3d(3.5%,-1%,0) scale(1.12);filter:blur(34px)}
}
@keyframes sectionMistSweepOut{
  0%{opacity:0;transform:translateX(-6%) scale(1.04)}
  30%{opacity:.3}
  100%{opacity:0;transform:translateX(18%) scale(1.1)}
}
@media (prefers-reduced-motion: reduce){
  .screen-shell,.screen-shell.is-leaving,.screen-shell.is-entering,.screen-shell.is-entering.is-active{
    transition:none !important;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
  }
  .screen-shell::before,.screen-shell::after{
    animation:none !important;
    opacity:0 !important;
  }
}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:rgba(9,11,18,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:10px 14px 16px;max-width:500px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nav-btn{padding:14px 10px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer}
.nav-btn.active{background:linear-gradient(180deg,#e7cd90,#caa154);color:#24170c;border-color:transparent;font-weight:700}
.toast{position:fixed;left:14px;right:14px;bottom:92px;padding:18px 18px;font-size:18px;border-radius:18px;background:rgba(18,21,33,.96);border:1px solid rgba(226,194,122,.28);box-shadow:var(--shadow);display:none;max-width:472px;margin:0 auto;color:var(--text)}
.toast.show{display:block}
.list{margin:0;padding-left:18px}
.rule-card{padding:16px}
.vault-grid,.overlay-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.vault-card{padding:12px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.vault-card img{border-radius:14px;aspect-ratio:2/3;object-fit:cover;width:100%;margin-bottom:8px}
.vault-empty{padding:16px;border-radius:18px;border:1px dashed rgba(255,255,255,.2);color:var(--muted)}

.vault-card-button{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  text-align:left;
  color:inherit;
  cursor:pointer;
}
.vault-card-button:active{transform:scale(.99)}
.vault-overlay-panel{max-width:560px}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:flex-end;justify-content:center;padding:18px;padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(18px + env(safe-area-inset-bottom));z-index:2000}
.overlay-panel{width:min(500px,100%);max-height:calc(100svh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;padding:16px}
.overlay-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px;font-size:20px}
@media (max-width:420px){.deck-card{min-width:168px;width:168px}.deck-card.stackable{margin-left:-72px}}
@media (min-width:460px){body{padding-bottom:98px}}



.grimorio-lightbox{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:10px;align-items:center}
.lightbox-track-wrap{
  overflow:hidden;
  padding:12px 0 10px;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  position:relative;
}
.lightbox-track-wrap::before,
.lightbox-track-wrap::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:28px;
  z-index:3;
  pointer-events:none;
}
.lightbox-track-wrap::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.lightbox-track-wrap::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.lightbox-track{
  display:flex;
  gap:14px;
  align-items:stretch;
  will-change:transform;
  transition:transform .44s cubic-bezier(.22,.8,.2,1);
  padding:6px 34px 18px;
}
.lightbox-track.no-anim{transition:none}
.lightbox-card{
  flex:0 0 222px;
  transition:transform .42s cubic-bezier(.22,.8,.2,1), opacity .32s ease, box-shadow .32s ease, filter .32s ease;
  opacity:.45;
  filter:saturate(.62) brightness(.68);
  transform:scale(.84) rotateY(0deg);
  margin:0;
  cursor:pointer;
  transform-origin:center center;
}
.lightbox-card.center,
.lightbox-card.selected{
  opacity:1;
  filter:none;
  transform:translateY(0) scale(1) rotateY(0deg);
  outline:2px solid var(--gold);
  box-shadow:0 22px 46px rgba(0,0,0,.48),0 0 0 1px rgba(226,194,122,.18),0 0 34px rgba(139,92,246,.2);
}
.lightbox-card.left{transform:translateX(8px) scale(.9) rotate(-5deg);opacity:.72;filter:saturate(.78) brightness(.82)}
.lightbox-card.right{transform:translateX(-8px) scale(.9) rotate(5deg);opacity:.72;filter:saturate(.78) brightness(.82)}
.lightbox-card.far-left{transform:translateX(18px) scale(.82) rotate(-9deg);opacity:.28}
.lightbox-card.far-right{transform:translateX(-18px) scale(.82) rotate(9deg);opacity:.28}
.lightbox-card .deck-name{font-size:22px}
.lightbox-card .deck-meta{font-size:18px;line-height:1.4}
.lightbox-nav{
  height:42px;
  width:42px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  font-size:28px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center
}
.lightbox-nav:active{transform:scale(.97)}
.lightbox-counter{text-align:center;color:var(--muted);font-size:22px;font-weight:700;letter-spacing:.08em}
@media (max-width:420px){
  .grimorio-lightbox{grid-template-columns:34px minmax(0,1fr) 34px}
  .lightbox-track{padding:4px 16px 12px}
  .lightbox-card{flex-basis:190px}
  .lightbox-nav{height:34px;width:34px;font-size:22px}
}

/* v8 visual pass */
.card-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 18%, rgba(255,245,210,.06) 30%, rgba(88,208,212,.10) 42%, transparent 56%);
  transform:translateX(-120%);
  animation:cardSheen 7s linear infinite;
  pointer-events:none;
}
.card-frame .art-box::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 22%, rgba(255,235,180,.16), transparent 14%),
    radial-gradient(circle at 78% 36%, rgba(139,92,246,.16), transparent 16%),
    radial-gradient(circle at 56% 78%, rgba(88,208,212,.14), transparent 15%);
  mix-blend-mode:screen;
  animation:arcanePulse 5.5s ease-in-out infinite;
  pointer-events:none;
}
.badge{box-shadow:0 0 12px rgba(226,194,122,.16)}
.deck-card.selected,.lightbox-card.selected{box-shadow:0 0 0 1px rgba(226,194,122,.28),0 0 26px rgba(139,92,246,.18),0 20px 45px rgba(0,0,0,.4)}
.fill.active{
  background:linear-gradient(90deg,#f1d79a 0%, #8b5cf6 55%, #58d0d4 100%);
  box-shadow:0 0 14px rgba(139,92,246,.3), 0 0 22px rgba(88,208,212,.22);
  animation:activeBarGlow 2s ease-in-out infinite;
}
.result-block{display:grid;gap:8px}
.flip-stage{perspective:1200px}
.flip-card{position:relative}
.flip-inner{position:relative;transform-style:preserve-3d}
.flip-card.revealed .flip-inner{animation:enemyReveal 1s cubic-bezier(.2,.75,.15,1) forwards}
.flip-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-back{position:absolute;inset:0;transform:rotateY(180deg)}
@keyframes enemyReveal{from{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}
@keyframes cardSheen{0%{transform:translateX(-120%)}100%{transform:translateX(140%)}}
@keyframes arcanePulse{0%,100%{opacity:.35}50%{opacity:.78}}
@keyframes activeBarGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}

.lightbox-card{touch-action:pan-y;}
.lightbox-track-wrap:active .lightbox-card.selected{transform:scale(.985);}

.lightbox-nav{height:42px;width:42px;border-radius:999px;border:1px solid var(--line);background:rgba(18,21,33,.86);color:var(--text);cursor:pointer;font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.28)}
.lightbox-counter{text-align:center;color:var(--muted);font-size:16px;font-weight:600;margin-top:-2px}
@media (max-width:420px){.lightbox-card{flex-basis:204px}.deck-card{min-width:158px;width:158px}}

.value-text,.screen-sub,.helper,.list,.deck-meta,.augury-desc,.value-sub,.log-item,.mini-label,.label,.lightbox-counter{ text-shadow: 0 1px 1px rgba(0,0,0,.45); }
.deck-card-copy,.lineage,.chronicle,.gift,.stats,.result-box,.mini-box,.augury-toggle,.vault-card{ background: linear-gradient(180deg, rgba(13,15,24,.98), rgba(20,22,33,.98)); }
.card-frame,.panel{ box-shadow: 0 22px 56px rgba(0,0,0,.42); }
.topbar .btn,.bottom-nav .nav-btn{ min-height: 48px; }
@media (max-width:420px){
  body{padding:16px 16px 92px;}
  .topbar h1{font-size:28px;}
  .screen-title{font-size:28px;}
  .card-title{font-size:30px;}
  .value-text{font-size:18px;}
  .stat-head{font-size:17px;}
  .attr-btn{font-size:17px;}
  .screen-sub,.helper,.list,.deck-meta,.augury-desc,.value-sub,.log-item{font-size:17px;}
}


@media (max-width: 480px){
  body{font-size:19px;padding:16px 16px 92px}
  .topbar h1{font-size:28px}
  .btn{padding:12px 14px;font-size:17px}
  .screen-title{font-size:32px}
  .screen-sub,.helper,.list,.deck-meta,.augury-desc,.value-sub,.log-item{font-size:21px;line-height:1.66}
  .card-title{font-size:42px}
  .label{font-size:15px}
  .value-text{font-size:24px;line-height:1.62}
  .stat-head{font-size:23px}
  .bar{height:16px}
  .attr-btn{font-size:19px;padding:14px 12px}
  .augury-name{font-size:22px}
  .lightbox-card .deck-name{font-size:23px}
  .lightbox-card .deck-meta{font-size:18px}
  .deck-name{font-size:24px}
  .lightbox-counter{font-size:20px}
}


.selectable-stats .label{color:#fff1c7}
.stat-row{width:100%;text-align:left;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px 14px 12px;margin-top:10px;color:inherit}
.stat-row.is-pickable{cursor:pointer;transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease}
.stat-row.is-pickable:hover,.stat-row.is-pickable:focus{transform:translateY(-1px);border-color:rgba(226,194,122,.55);box-shadow:0 12px 28px rgba(0,0,0,.22)}
.stat-row.is-selected{background:linear-gradient(180deg, rgba(226,194,122,.16), rgba(139,92,246,.12));border-color:rgba(226,194,122,.65);box-shadow:0 0 0 1px rgba(226,194,122,.18), 0 12px 30px rgba(226,194,122,.12)}
.stat-select-hint{margin-top:10px;font-size:17px;font-weight:800;letter-spacing:.02em;color:#fff2c3}
.result-spacer{margin-top:10px}
.augury-toggle .augury-name{font-size:26px;font-weight:700;color:var(--text)}
.augury-toggle .augury-desc{font-size:19px;line-height:1.6;color:var(--text)}
.duel-controls-panel .screen-sub{font-size:17px;color:#fff4dd}
.value-sub{font-size:17px}
.deck-name{font-size:18px}
.deck-card-copy{background:linear-gradient(180deg, rgba(10,11,18,.94), rgba(21,24,36,.96));padding:12px 12px 14px}
@media (max-width: 640px){
  body{padding:12px 12px 94px}
  .screen-title{font-size:28px}
  .screen-sub,.helper,.list,.deck-meta,.augury-desc,.value-sub,.log-item{font-size:17px;line-height:1.7}
  .card-title{font-size:34px}
  .value-text{font-size:23px}
  .stat-head{font-size:22px}
  .btn{font-size:18px;padding:14px 16px}
  .mini-label{font-size:13px}
  .mini-value{font-size:30px}
  .deck-name{font-size:20px}
  .deck-meta{font-size:16px}
  .label{font-size:13px}
  .stat-select-hint{font-size:15px}
}


.selected-attr-pill{
  margin-top:12px;
  display:inline-block;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(226,194,122,.10);
  border:1px solid rgba(226,194,122,.28);
  color:#fff2c3;
  font-size:20px;
  line-height:1.45;
}
.selected-attr-pill strong{color:#ffffff}

.card-back-box img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.92;
  filter:saturate(1.05) contrast(1.05);
}
.back-sigil,.back-runes{
  filter:drop-shadow(0 0 14px rgba(226,194,122,.32));
}
.back-sigil{
  animation: sigilPulse 2.6s ease-in-out infinite;
}
@keyframes sigilPulse{
  0%,100%{transform:scale(1);opacity:.92}
  50%{transform:scale(1.05);opacity:1}
}

@media (max-width: 480px){
  body{padding:12px 12px 88px}
  .topbar h1{font-size:28px}
  .screen-title{font-size:36px}
  .card-title{font-size:40px}
  .screen-sub,.helper,.list,.deck-meta,.augury-desc,.value-sub,.log-item{font-size:22px;line-height:1.68}
  .label{font-size:16px}
  .value-text{font-size:28px;line-height:1.66}
  .stat-head{font-size:27px}
  .stat-select-hint{font-size:18px}
  .deck-name{font-size:22px;line-height:1.35}
  .deck-card-copy{padding:12px 14px}
  .lightbox-counter{font-size:22px}
  .selected-attr-pill{font-size:22px}
  .btn,.nav-btn{font-size:18px}
  .mini-label{font-size:13px}
  .mini-value{font-size:34px}
}

.duel-action-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

@media (max-width: 700px){
  .app-shell{max-width:none;padding:8px 8px 94px}
  .topbar{margin-bottom:10px;border-radius:0 0 18px 18px}
  .panel,.card-frame,.overlay-panel{border-radius:20px}
  .screen-title{font-size:30px}
  .card-title{font-size:30px}
  .lightbox-track-wrap{padding:6px 0 2px}
  .bottom-nav{max-width:none}
}

.mission-start-panel{padding:18px}
.mission-start-btn{width:100%;min-height:56px;font-size:20px}

html,body{height:100%;overflow:hidden}
.app-shell{height:100svh;max-width:480px;padding:8px 8px 86px;overflow:hidden}
#app{height:calc(100svh - 150px);overflow:hidden}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;z-index:20}
.battle-screen{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px;overflow:hidden}
.battle-screen.end-screen{grid-template-rows:auto 1fr}
.battle-status.compact{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px}
.battle-status .mini-box{padding:10px 12px}
.battle-status .mini-value{font-size:26px}
.battle-main-grid{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:hidden}
.battle-side{min-width:0;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.battle-card-frame{min-height:0;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:6px;border:1px solid rgba(226,194,122,.30);border-radius:22px;background:linear-gradient(180deg,#0f121d,#171b2a);padding:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(226,194,122,.08),0 16px 40px rgba(0,0,0,.35)}
.battle-art{position:relative;min-height:0;overflow:hidden;border-radius:18px;border:1px solid var(--line);background:#0f1118}
.battle-art img{width:100%;height:100%;object-fit:cover;display:block}
.battle-card-copy{background:rgba(10,12,18,.9);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:8px}
.battle-family{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.battle-name{font-size:17px;font-weight:800;line-height:1.1;color:var(--text)}
.battle-lineage{font-size:12px;line-height:1.3;color:#f3ead8;margin-top:3px}
.battle-meta{font-size:11px;line-height:1.3;color:var(--muted);margin-top:4px}
.battle-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.battle-stats .stat-row{margin-top:0;padding:8px;border-radius:12px}
.battle-stats .stat-head{font-size:14px;margin-bottom:6px}
.battle-stats .bar{height:10px}
.battle-stats .stat-select-hint{font-size:11px;margin-top:4px;color:#fff0c9}
.battle-carousel-panel{padding:8px;overflow:hidden}
.battle-carousel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.compact-lightbox{height:104px}
.compact-lightbox .lightbox-track-wrap{height:104px}
.compact-lightbox .deck-card{width:112px;height:104px;padding:0;border-radius:18px;overflow:hidden;background:none;border:none;box-shadow:none}
.compact-lightbox .deck-art-wrap{height:100%;border-radius:16px;overflow:hidden;border:1px solid rgba(226,194,122,.25)}
.compact-lightbox .deck-card-copy{position:absolute;left:6px;right:6px;bottom:6px;background:rgba(9,11,18,.88);border-radius:10px;padding:6px}
.compact-lightbox .deck-name{font-size:11px;font-weight:800}
.compact-lightbox .deck-meta{font-size:9px;line-height:1.2}
.fullscreen-controls{padding:10px;display:grid;gap:8px}
.selected-attr-pill{font-size:15px;padding:10px 12px}
.augury-toggle{padding:10px 12px}
.augury-name{font-size:15px}
.augury-desc{font-size:12px;line-height:1.35}
.duel-action-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.duel-action-row .btn{min-height:48px;font-size:16px}
.result-box{padding:10px}
.result-title{font-size:18px}
.result-box .helper{font-size:13px;line-height:1.4}
.mission-screen{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:18px;gap:14px}
.mission-screen .screen-title{font-size:34px}
.mission-screen .screen-sub{font-size:18px;max-width:28ch}
.mission-start-btn{min-width:70%;min-height:56px;font-size:20px}
.battle-back-art{height:100%}
.back-only{grid-template-rows:1fr;padding:8px}
.back-only .battle-art{height:100%;display:flex;align-items:center;justify-content:center}
.back-only .back-sigil{position:absolute;font-size:72px;color:#f8e8b9;text-shadow:0 0 18px rgba(226,194,122,.35)}
.back-only .back-runes{position:absolute;bottom:18px;letter-spacing:.4em;color:rgba(255,240,201,.7);font-size:16px}
@media (max-width:420px){
  .topbar h1{font-size:24px}
  .battle-name{font-size:15px}
  .battle-lineage{font-size:11px}
  .battle-stats .stat-head{font-size:12px}
  .battle-stats .stat-select-hint{font-size:10px}
  .compact-lightbox .deck-card{width:96px}
  .compact-lightbox{height:96px}.compact-lightbox .lightbox-track-wrap{height:96px}
}


/* v22: maximize card height and remove bulky header actions */
.topbar{
  padding: 8px 12px !important;
  margin-bottom: 8px !important;
  min-height: 0 !important;
}
.topbar h1{
  font-size: 20px !important;
  line-height: 1.1 !important;
}
.topbar .eyebrow{display:none !important;}
.topbar-actions{display:none !important;}
.app-shell{
  padding-top: 6px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  padding-bottom: 86px !important;
  max-width: 520px !important;
}
.stack{gap:10px !important;}
.panel.rule-card{padding:12px !important;}
.screen-title{font-size:24px !important;margin-bottom:4px !important;}
.eyebrow{font-size:10px !important;margin-bottom:2px !important;}
.grid-2{gap:8px !important;}
.mini-box{padding:10px !important;}
.mini-label{font-size:11px !important;}
.mini-value{font-size:24px !important;}
.duel-controls-panel{
  position: sticky;
  bottom: 74px;
  z-index: 15;
  background: linear-gradient(180deg, rgba(18,21,33,.96), rgba(24,28,43,.96)) !important;
  backdrop-filter: blur(12px);
}
.augury-toggle{padding: 10px 12px !important;}
.augury-name{font-size:16px !important;}
.augury-desc{font-size:13px !important; line-height:1.35 !important;}
.duel-action-row{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:8px !important;
}
.grimorio-lightbox{margin-top: 4px !important;}
.deck-card .deck-card-copy{padding: 8px 10px !important;}
.deck-name{font-size:15px !important; line-height:1.2 !important;}
.deck-meta{font-size:12px !important; line-height:1.25 !important;}
.card-frame{padding: 10px !important;}
.card-title{font-size: 28px !important; line-height: 1.05 !important;}
.badge{font-size:11px !important;padding:6px 10px !important;}
.art-box{margin-top:8px !important;}
.art-box img{
  aspect-ratio: 2 / 3 !important;
  max-height: 44svh !important;
  object-fit: cover !important;
}
.lineage,.chronicle,.gift,.stats{
  margin-top:8px !important;
  padding:10px 12px !important;
}
.label{font-size:11px !important;}
.value-text{font-size:18px !important; line-height:1.35 !important;}
.value-sub{font-size:15px !important; line-height:1.4 !important;}
.stat-head{font-size:17px !important; margin-bottom:6px !important;}
.bar{height:10px !important;}
.selected-attr-pill{
  font-size:15px !important;
  padding:8px 10px !important;
}
.mission-start-panel{padding:16px !important;}
@media (max-height: 800px){
  .art-box img{max-height: 38svh !important;}
  .chronicle{display:none !important;}
}

.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* v23 refinements */
.topbar{display:none!important;}
.app-shell{padding-top:8px!important;}
.relocated-status{
  order: 3;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.battle-main-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:start;
}
.battle-side .battle-card-frame{
  height:100%;
}
.battle-card-frame.back-only .battle-art{
  aspect-ratio:2/3;
}
.battle-card-frame .battle-art,
.battle-card-frame .battle-art img{
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
}
.battle-card-frame .battle-card-copy,
.battle-card-frame .battle-stats{
  display:none !important;
}
.choose-panel{
  order:1;
}
.chooser-card-frame{
  display:grid;
  grid-template-columns: minmax(0,1fr);
  gap:10px;
}
.chooser-art img{
  width:100%;
  max-height:48svh;
  object-fit:cover;
  aspect-ratio:2/3;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:var(--shadow);
}
.chooser-copy{
  padding:10px 12px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
}
.chooser-chronicle,
.chooser-gift{
  font-size:15px;
  line-height:1.45;
  color:var(--text);
  margin-top:8px;
}
.fullscreen-controls{
  order:2;
  position:sticky;
  bottom:72px;
  z-index:12;
}
.duel-action-row.single{
  grid-template-columns: 1fr 1fr!important;
}
.compact-lightbox{
  margin-top:8px;
}
@media (max-height: 820px){
  .chooser-art img{max-height:38svh;}
  .chooser-chronicle{display:none;}
}


/* v25b: keep 'Elige tu carta' visible on short screens */
.battle-screen{
  grid-template-rows: auto minmax(0, 26svh) minmax(300px, auto) auto !important;
  min-height: calc(100svh - 86px);
}
.battle-main-grid{
  min-height: 0 !important;
  max-height: 26svh !important;
}
.battle-side{
  min-height: 0 !important;
}
.battle-card-frame{
  min-height: 0 !important;
}
.choose-panel{
  min-height: 300px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr) auto !important;
  overflow: hidden !important;
}
.chooser-card-frame{
  min-height: 0 !important;
  overflow: hidden !important;
}
.chooser-art img{
  max-height: 28svh !important;
}
.fullscreen-controls{
  position: sticky !important;
  bottom: 72px !important;
  z-index: 12 !important;
}
@media (max-height: 820px){
  .battle-screen{
    grid-template-rows: auto minmax(0, 22svh) minmax(250px, auto) auto !important;
  }
  .battle-main-grid{
    max-height: 22svh !important;
  }
  .choose-panel{
    min-height: 250px !important;
  }
  .chooser-art img{
    max-height: 20svh !important;
  }
  .chooser-chronicle{
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .chooser-gift{
    display:none !important;
  }
}


/* v26 chooser redesign */
.choose-panel{
  min-height: 220px !important;
  grid-template-rows: auto auto minmax(96px,auto) !important;
}
.chooser-header-row{
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
}
.chooser-nav{
  height:44px;
  width:44px;
  border-radius:50%;
  border:1px solid rgba(226,194,122,.35);
  background:rgba(16,20,30,.92);
  color:var(--text);
  font-size:28px;
  line-height:1;
}
.chooser-copy.compact{
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  min-width:0;
}
.minimal-chooser .battle-name{
  font-size:18px !important;
  line-height:1.15;
}
.minimal-chooser .battle-lineage{
  font-size:13px !important;
  margin-top:4px;
}
.chooser-stats{
  display:grid;
  gap:8px;
}
.chooser-stats .stat-row{
  margin-top:0 !important;
}
.chooser-stats .stat-select-hint{
  display:block !important;
}
.compact-lightbox{height:112px;}
.compact-lightbox .lightbox-track-wrap{height:112px;}
.deck-card{
  perspective:1000px;
}
.deck-flip-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .45s ease;
}
.deck-card.flipped .deck-flip-inner{
  transform:rotateY(180deg);
}
.deck-flip-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius:16px;
  overflow:hidden;
}
.deck-front{
  background:none;
}
.deck-back{
  transform:rotateY(180deg);
  background:linear-gradient(180deg, #141926, #0d111a);
  border:1px solid rgba(226,194,122,.25);
  padding:8px;
}
.deck-story{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background:transparent !important;
  position:static !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
}
.deck-lore{
  margin-top:6px;
  font-size:10px;
  line-height:1.3;
  color:var(--text);
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
@media (max-height:820px){
  .choose-panel{min-height:190px !important;}
  .minimal-chooser .battle-name{font-size:16px !important;}
  .chooser-stats .stat-head{font-size:15px !important;}
}


/* v27 simplify duel: no grimoire counters, no separate fight panel */
.battle-screen{
  grid-template-rows: minmax(0, 28svh) minmax(0, 1fr) !important;
  gap: 10px !important;
  min-height: calc(100svh - 72px) !important;
}
.battle-main-grid{
  max-height: 28svh !important;
}
.choose-panel{
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(90px,auto) auto !important;
  gap: 10px !important;
  padding: 10px !important;
}
.chooser-header-row{
  grid-template-columns: 52px 1fr 52px !important;
  gap: 12px !important;
}
.chooser-nav{
  width: 52px !important;
  height: 52px !important;
  font-size: 30px !important;
}
.minimal-chooser .battle-name{
  font-size: 20px !important;
}
.minimal-chooser .battle-lineage{
  font-size: 14px !important;
}
.chooser-stats{
  display: grid !important;
  gap: 10px !important;
}
.chooser-stats .stat-row{
  padding: 10px 12px !important;
}
.chooser-stats .stat-head{
  font-size: 18px !important;
}
.chooser-stats .stat-select-hint{
  font-size: 14px !important;
}
.compact-lightbox{
  height: 118px !important;
}
.compact-lightbox .lightbox-track-wrap{
  height: 118px !important;
}
.chooser-fight-row{
  margin-top: 2px !important;
}
.chooser-fight-row .btn{
  min-height: 54px !important;
  font-size: 18px !important;
}
.relocated-status,
.fullscreen-controls,
.battle-status{
  display:none !important;
}
@media (max-height: 820px){
  .battle-screen{
    grid-template-rows: minmax(0, 24svh) minmax(0, 1fr) !important;
  }
  .battle-main-grid{
    max-height: 24svh !important;
  }
  .choose-panel{
    grid-template-rows: auto auto minmax(82px,auto) auto !important;
  }
  .chooser-nav{
    width: 46px !important;
    height: 46px !important;
  }
  .minimal-chooser .battle-name{
    font-size: 18px !important;
  }
  .chooser-stats .stat-head{
    font-size: 16px !important;
  }
}


/* v28 polish chooser */
.minimal-chooser .label,
.minimal-chooser .battle-meta,
.minimal-chooser .chooser-chronicle,
.minimal-chooser .chooser-gift,
.minimal-chooser .value-sub{
  display:none !important;
}
.chooser-stats .stat-select-hint{
  display:none !important;
}
.chooser-stats .stat-row{
  padding:8px 10px !important;
}
.chooser-stats .stat-head{
  font-size:17px !important;
  margin-bottom:5px !important;
}
.chooser-fight-row{
  justify-self:center;
  width:100%;
  margin-top:0 !important;
}
.chooser-fight-row .btn{
  min-height:44px !important;
  font-size:16px !important;
  width:auto !important;
  min-width:160px !important;
  justify-self:center;
  padding:10px 18px !important;
  border-radius:14px !important;
}
.duel-action-row.single{
  grid-template-columns:auto !important;
  justify-content:center !important;
}
.choose-panel{
  gap:8px !important;
}
.chooser-header-row{
  margin-bottom:4px !important;
}
.compact-lightbox{
  height:108px !important;
}
.compact-lightbox .lightbox-track-wrap{
  height:108px !important;
}


/* v29 remove obsolete grimorio strip */
.grimorio-lightbox.compact-lightbox,
.compact-lightbox,
.lightbox-track-wrap,
.lightbox-track,
.deck-card,
.deck-art-wrap,
.deck-card-copy,
.deck-flip-inner,
.deck-flip-face,
.deck-front,
.deck-back,
.deck-story,
.deck-lore{
  display:none !important;
}
.choose-panel{
  grid-template-rows:auto 1fr auto !important;
}
.chooser-card-frame.minimal-chooser{
  height:100%;
  display:grid !important;
  grid-template-rows:auto 1fr !important;
}
.chooser-stats{
  align-content:start;
}


/* v30 compact bottom area and prevent overflow behind bottom nav */
.app-shell{
  padding-bottom: 78px !important;
}
.battle-screen{
  min-height: calc(100svh - 78px) !important;
  gap: 8px !important;
}
.choose-panel{
  gap: 6px !important;
  padding: 8px !important;
  grid-template-rows: auto 1fr auto !important;
}
.chooser-card-frame.minimal-chooser{
  gap: 6px !important;
}
.chooser-header-row{
  margin-bottom: 2px !important;
}
.chooser-stats{
  gap: 6px !important;
}
.chooser-stats .stat-row{
  padding: 6px 8px !important;
  border-radius: 12px !important;
}
.chooser-stats .stat-head{
  font-size: 15px !important;
  margin-bottom: 4px !important;
}
.chooser-stats .bar{
  height: 8px !important;
}
.chooser-fight-row{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.chooser-fight-row .btn{
  min-height: 38px !important;
  font-size: 15px !important;
  min-width: 132px !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
}
.bottom-nav{
  padding-top: 6px !important;
  padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
}
.nav-btn{
  min-height: 42px !important;
  font-size: 14px !important;
  padding: 8px 10px !important;
}

/* shorter screens */
@media (max-height: 820px){
  .app-shell{
    padding-bottom: 74px !important;
  }
  .battle-screen{
    min-height: calc(100svh - 74px) !important;
    gap: 6px !important;
  }
  .choose-panel{
    padding: 7px !important;
    gap: 5px !important;
  }
  .chooser-nav{
    width: 42px !important;
    height: 42px !important;
    font-size: 26px !important;
  }
  .minimal-chooser .battle-name{
    font-size: 17px !important;
  }
  .minimal-chooser .battle-lineage{
    font-size: 12px !important;
  }
  .chooser-stats .stat-row{
    padding: 5px 8px !important;
  }
  .chooser-stats .stat-head{
    font-size: 14px !important;
  }
  .chooser-fight-row .btn{
    min-height: 34px !important;
    font-size: 14px !important;
    padding: 7px 12px !important;
    min-width: 120px !important;
  }
  .nav-btn{
    min-height: 38px !important;
    font-size: 13px !important;
  }
}


/* v31 integrate fight into bottom nav */
.bottom-nav{
  display:grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap:8px !important;
}
.nav-btn{
  min-height: 40px !important;
  font-size: 13px !important;
  border-radius: 12px !important;
}
.nav-fight-btn{
  background: linear-gradient(180deg,#e7cd90,#caa154) !important;
  color:#24170c !important;
  font-weight:700 !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
.nav-btn.is-disabled,
.nav-btn:disabled{
  opacity:.45 !important;
  filter:grayscale(.15);
}
.chooser-fight-row{display:none !important;}


/* v32: chooser fits content, give more height to player/enemy cards */
.battle-screen{
  grid-template-rows: minmax(0, 38svh) auto !important;
  min-height: calc(100svh - 74px) !important;
  gap: 6px !important;
}
.battle-main-grid{
  max-height: 38svh !important;
  min-height: 38svh !important;
  gap: 10px !important;
}
.battle-side{
  min-height: 0 !important;
}
.battle-card-frame,
.battle-card-frame.back-only{
  height: 100% !important;
}
.battle-card-frame .battle-art,
.battle-card-frame .battle-art img,
.battle-card-frame.back-only .battle-art,
.battle-card-frame.back-only .battle-art img{
  height: 100% !important;
  max-height: none !important;
}
.choose-panel{
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  grid-template-rows: auto auto !important;
  gap: 6px !important;
  padding: 8px !important;
}
.chooser-card-frame.minimal-chooser{
  height: auto !important;
  min-height: 0 !important;
  grid-template-rows: auto auto !important;
  gap: 6px !important;
}
.chooser-stats{
  gap: 5px !important;
}
.chooser-stats .stat-row{
  padding: 5px 8px !important;
}
.chooser-stats .stat-head{
  font-size: 14px !important;
  margin-bottom: 3px !important;
}
.chooser-stats .bar{
  height: 7px !important;
}
.choose-panel .lightbox-counter{
  font-size: 12px !important;
}
.chooser-header-row{
  grid-template-columns: 40px 1fr 40px !important;
  gap: 8px !important;
}
.chooser-nav{
  width: 40px !important;
  height: 40px !important;
  font-size: 24px !important;
}
.minimal-chooser .battle-name{
  font-size: 17px !important;
}
.minimal-chooser .battle-lineage{
  font-size: 12px !important;
}
.bottom-nav{
  gap: 6px !important;
}
.nav-btn{
  min-height: 38px !important;
  padding: 7px 8px !important;
}
@media (max-height: 820px){
  .battle-screen{
    grid-template-rows: minmax(0, 42svh) auto !important;
    min-height: calc(100svh - 70px) !important;
  }
  .battle-main-grid{
    max-height: 42svh !important;
    min-height: 42svh !important;
  }
  .choose-panel{
    padding: 7px !important;
    gap: 5px !important;
  }
  .chooser-header-row{
    grid-template-columns: 36px 1fr 36px !important;
  }
  .chooser-nav{
    width: 36px !important;
    height: 36px !important;
    font-size: 22px !important;
  }
  .chooser-stats .stat-row{
    padding: 4px 7px !important;
  }
  .chooser-stats .stat-head{
    font-size: 13px !important;
  }
  .nav-btn{
    min-height: 36px !important;
    font-size: 12px !important;
  }
}


/* v33 scroll + clearer selected skill */
html, body {
  height: 100%;
  overflow-y: auto !important;
}
body {
  overflow-y: auto !important;
}
.app-shell {
  min-height: 100svh;
  overflow-y: auto !important;
}
#app {
  overflow-y: visible !important;
}
.battle-screen,
.end-screen {
  overflow: visible !important;
}
.vault-grid,
.overlay-panel,
.mission-screen {
  overflow-y: visible !important;
}
.stat-row.is-selected {
  border: 2px solid var(--gold) !important;
  background: rgba(226,194,122,.16) !important;
  box-shadow: 0 0 0 2px rgba(226,194,122,.15), 0 0 18px rgba(226,194,122,.18) !important;
}
.stat-row.is-selected .stat-head span:first-child {
  color: #fff4d6 !important;
}
.stat-row.is-selected .bar {
  background: rgba(255,255,255,.14) !important;
}
.stat-row.is-selected::after {
  content: "Seleccionada";
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fff4d6;
}
.result-box .helper {
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.result-title {
  font-size: 19px !important;
}
@media (max-width: 520px){
  .stat-row.is-selected::after {
    font-size: 11px;
  }
}

.app-shell,
#app {
  padding-top: max(8px, env(safe-area-inset-top)) !important;
  padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* give content breathing room so browser bars don't cover it */
.battle-screen,
.end-screen,
.vault-grid,
.mission-screen {
  padding-top: 8px !important;
  padding-bottom: 12px !important;
}

/* larger type */
.mini-label { font-size: 12px !important; }
.mini-value { font-size: 26px !important; }
.eyebrow { font-size: 11px !important; }
.screen-title { font-size: 26px !important; }
.screen-sub, .helper, .list, .deck-meta, .augury-desc, .value-sub, .log-item { font-size: 16px !important; line-height: 1.55 !important; }
.battle-name { font-size: 18px !important; }
.battle-lineage { font-size: 13px !important; }
.chooser-stats .stat-head { font-size: 15px !important; }
.selected-attr-pill { font-size: 16px !important; }
.result-title { font-size: 20px !important; }
.result-box .helper { font-size: 15px !important; line-height: 1.55 !important; }
.nav-btn { font-size: 14px !important; }
.btn { font-size: 16px !important; }

@media (max-height: 820px){
  .battle-screen,
  .end-screen,
  .vault-grid,
  .mission-screen {
    padding-top: 10px !important;
    padding-bottom: 14px !important;
  }
  .screen-title { font-size: 24px !important; }
  .screen-sub, .helper, .value-sub { font-size: 15px !important; }
  .battle-name { font-size: 17px !important; }
  .chooser-stats .stat-head { font-size: 14px !important; }
}


/* v37 exhausted cards in chooser */
.chooser-card-frame.is-exhausted{
  filter: grayscale(1);
  opacity: .82;
}
.chooser-card-frame.is-exhausted .battle-name,
.chooser-card-frame.is-exhausted .battle-lineage{
  color:#d7d0c2 !important;
}
.chooser-exhausted{
  margin-top:6px;
  font-size:12px;
  font-weight:700;
  color:#f3ead8;
  opacity:.95;
}
.chooser-card-frame.is-exhausted .chooser-stats{
  opacity:.85;
}
.chooser-card-frame.is-exhausted .stat-row{
  cursor: default !important;
}
.chooser-card-frame.is-exhausted .stat-row.is-pickable{
  pointer-events:none;
}

/* v38 naming + fight button inside Arena + audio friendly ui */
.bottom-nav{
  grid-template-columns: repeat(3, 1fr) !important;
}
.chooser-fight-inline{
  display:flex;
  justify-content:center;
  margin-top:4px;
}
.chooser-fight-inline .btn{
  min-height:40px !important;
  font-size:15px !important;
  min-width:150px !important;
  padding:8px 16px !important;
  border-radius:12px !important;
}


/* v39 top expedition counters */
.expedition-counter{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:8px 10px !important;
}
.counter-box{
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.05);
  padding:8px 10px;
  text-align:center;
}
.counter-box .mini-label{
  font-size:12px !important;
}
.counter-box .mini-value{
  font-size:24px !important;
  margin-top:2px;
}
.battle-screen{
  grid-template-rows:auto minmax(0, 34svh) auto !important;
}
.battle-main-grid{
  min-height:34svh !important;
  max-height:34svh !important;
}
.choose-panel{
  margin-bottom:6px;
}
@media (max-height:820px){
  .battle-screen{
    grid-template-rows:auto minmax(0, 38svh) auto !important;
  }
  .battle-main-grid{
    min-height:38svh !important;
    max-height:38svh !important;
  }
  .counter-box .mini-value{
    font-size:22px !important;
  }
}


/* v41 fix exhausted chooser cards: keep arrows, show card back */
.chooser-back-wrap{
  position: relative;
  width: 100%;
  min-height: 140px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(226,194,122,.24);
  background: radial-gradient(circle at center,rgba(139,92,246,.20),transparent 28%), linear-gradient(180deg,#111321,#0c0f18);
  display:flex;
  align-items:center;
  justify-content:center;
}
.chooser-back-wrap img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.chooser-back-wrap .back-sigil{
  position:relative;
  z-index:1;
  font-size:54px;
  color:#f8e8b9;
  text-shadow:0 0 18px rgba(226,194,122,.35);
}
.chooser-back-wrap .back-runes{
  position:absolute;
  bottom:12px;
  z-index:1;
  letter-spacing:.35em;
  color:rgba(255,240,201,.75);
  font-size:14px;
}


/* v43 exhausted chooser cards: show original art in black and white instead of card back */
.chooser-exhausted-card{
  display:grid;
  gap:10px;
}
.chooser-art-exhausted{
  position:relative;
  border-radius:20px;
  overflow:hidden;
}
.chooser-art-exhausted img{
  filter:grayscale(1) contrast(1.04) brightness(.82);
}
.chooser-art-exhausted::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(8,10,16,.06), rgba(8,10,16,.28));
  pointer-events:none;
}
.chooser-card-frame.is-exhausted .chooser-copy{
  background:rgba(255,255,255,.05);
}
.chooser-card-frame.is-exhausted .chooser-exhausted-card .chooser-stats{
  opacity:.92;
}
.chooser-card-frame.is-exhausted .chooser-exhausted-card .stat-row{
  filter:none;
}


/* v44 exhausted cards: preview above, disabled stats below */
.battle-card-frame.is-exhausted-preview .battle-art img{
  filter:grayscale(1) contrast(1.04) brightness(.82);
}
.battle-card-frame.is-exhausted-preview .battle-card-copy,
.battle-card-frame.is-exhausted-preview .battle-stats{
  opacity:.9;
}
.battle-exhausted{
  margin-top:8px;
  font-size:12px;
  font-weight:700;
  color:#f3ead8;
}
.chooser-card-frame.is-exhausted{
  filter:none;
  opacity:1;
}
.chooser-card-frame.is-exhausted .chooser-copy{
  opacity:.9;
}
.chooser-stats.disabled-stats{
  opacity:.62;
}
.chooser-stats.disabled-stats .stat-row{
  cursor:default !important;
  pointer-events:none;
  filter:grayscale(1);
}
.chooser-stats.disabled-stats .stat-head{
  color:#c7c0b2 !important;
}
.chooser-stats.disabled-stats .bar{
  opacity:.55;
}
.chooser-stats.disabled-stats .stat-select-hint{
  color:#9c9486 !important;
}


/* v48 arena cleanup: remove counters, stabilize layout, taller duel panel */
.battle-carousel-head{justify-content:center !important;}
.expedition-counter{display:none !important;}
.choose-panel .lightbox-counter{display:none !important;}
.battle-screen{
  grid-template-rows:minmax(0, 46svh) auto !important;
  gap:8px !important;
}
.battle-main-grid{
  min-height:46svh !important;
  max-height:46svh !important;
  gap:12px !important;
}
.battle-side{
  gap:8px !important;
}
.battle-side .eyebrow{
  text-align:center;
  margin-bottom:4px !important;
}
.choose-panel{
  margin-bottom:0 !important;
}
@media (max-height: 820px){
  .battle-screen{
    grid-template-rows:minmax(0, 49svh) auto !important;
  }
  .battle-main-grid{
    min-height:49svh !important;
    max-height:49svh !important;
  }
}


/* v49 duel outcome labels + living card art */
.duel-state-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 12px;
  border-radius:999px;
  border:1px solid rgba(226,194,122,.22);
  background:rgba(255,255,255,.04);
}
.duel-state-label.is-winner{
  color:#e9d79e;
  border-color:rgba(226,194,122,.34);
  background:linear-gradient(180deg, rgba(226,194,122,.18), rgba(139,92,246,.12));
  box-shadow:0 0 18px rgba(226,194,122,.12);
}
.duel-state-label.is-loser{
  color:#d7d1c3;
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.14));
}
.chooser-status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  margin-top:6px;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.chooser-status-pill.is-winner{
  color:#24170c;
  background:linear-gradient(180deg,#e7cd90,#caa154);
  box-shadow:0 8px 20px rgba(202,161,84,.22);
}
.chooser-status-pill.is-loser{
  color:#e6dfd1;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14);
}
.chooser-nav[disabled]{
  opacity:.35;
  cursor:default;
  pointer-events:none;
}
.battle-card-frame,
.chooser-card-frame,
.deck-card,
.vault-card{
  position:relative;
  overflow:hidden;
}
.battle-art{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.battle-art img{
  transform:scale(1.02);
  transform-origin:center center;
  filter:saturate(1.08) contrast(1.06) brightness(1.03);
  animation:cardArtBreath 5.8s ease-in-out infinite;
  will-change:transform,filter;
}
.battle-art::before{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,240,180,.22), transparent 18%),
    radial-gradient(circle at 82% 32%, rgba(139,92,246,.18), transparent 20%),
    radial-gradient(circle at 66% 82%, rgba(88,208,212,.18), transparent 22%);
  transform:scale(1.08);
  animation:cardArtFlicker 5.8s ease-in-out infinite;
}
.battle-art::after{
  content:"";
  position:absolute;
  inset:-12%;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  background:
    linear-gradient(118deg,
      transparent 16%,
      rgba(255,255,255,.02) 30%,
      rgba(255,244,210,.16) 42%,
      rgba(255,255,255,.22) 48%,
      rgba(255,244,210,.18) 54%,
      rgba(88,208,212,.10) 60%,
      transparent 78%);
  transform:translateX(-48%) translateY(0) rotate(-3deg) scale(1.12);
  animation:cardArtAura 5.8s cubic-bezier(.22,.72,.2,1) infinite;
}
.battle-card-frame.is-exhausted-preview .battle-art img{
  animation:none;
  transform:none;
}
.battle-card-frame.is-exhausted-preview .battle-art::before,
.battle-card-frame.is-exhausted-preview .battle-art::after{
  opacity:.06;
  animation:none;
}
@keyframes cardArtBreath{
  0%,100%{transform:scale(1.02);filter:saturate(1.08) contrast(1.06) brightness(1.03)}
  18%{transform:scale(1.032);filter:saturate(1.12) contrast(1.08) brightness(1.06)}
  34%{transform:scale(1.038);filter:saturate(1.15) contrast(1.1) brightness(1.1)}
  56%{transform:scale(1.03);filter:saturate(1.11) contrast(1.08) brightness(1.05)}
  74%{transform:scale(1.036);filter:saturate(1.14) contrast(1.09) brightness(1.08)}
}
@keyframes cardArtFlicker{
  0%,100%{opacity:.10}
  16%{opacity:.18}
  26%{opacity:.28}
  38%{opacity:.16}
  52%{opacity:.24}
  70%{opacity:.12}
  82%{opacity:.2}
}
@keyframes cardArtAura{
  0%,12%,100%{opacity:0;transform:translateX(-52%) translateY(0) rotate(-3deg) scale(1.12)}
  20%{opacity:.16}
  28%{opacity:.28}
  36%{opacity:.42;transform:translateX(-4%) translateY(-1%) rotate(-2deg) scale(1.14)}
  44%{opacity:.18}
  54%{opacity:0}
  72%{opacity:.12}
  82%{opacity:.22;transform:translateX(12%) translateY(1%) rotate(-1deg) scale(1.13)}
  90%{opacity:.06}
}


/* v51 mobile spacing + more visual duel result */
.result-block-visual{
  gap:10px;
}
.duel-result-box{
  display:grid;
  gap:14px;
  padding:14px;
}
.duel-banner{
  border-radius:18px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.duel-banner.is-win{
  border-color:rgba(226,194,122,.34);
  background:linear-gradient(180deg, rgba(226,194,122,.18), rgba(139,92,246,.10));
  box-shadow:0 12px 30px rgba(202,161,84,.10);
}
.duel-banner.is-loss{
  border-color:rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(15,18,29,.96));
}
.duel-banner-kicker{
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#f2dfae;
}
.duel-banner-title{
  margin-top:6px;
  font-size:30px;
  line-height:1.05;
  font-weight:900;
  color:#fff8e6;
}
.duel-banner-copy{
  margin-top:8px;
  font-size:15px;
  line-height:1.5;
  color:#f2ead7;
}
.duel-score-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.duel-score-card{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(10,11,18,.98), rgba(21,24,36,.96));
  padding:14px;
  display:grid;
  gap:12px;
}
.duel-score-card.is-winner{
  border-color:rgba(226,194,122,.34);
  box-shadow:0 0 0 1px rgba(226,194,122,.10), 0 16px 34px rgba(0,0,0,.26);
}
.duel-score-card.is-loser{
  opacity:.92;
}
.duel-score-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.duel-score-label{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#b8b2a4;
}
.duel-score-name{
  margin-top:4px;
  font-size:18px;
  font-weight:800;
  color:#fff5d8;
  line-height:1.15;
}
.duel-score-lineage{
  margin-top:4px;
  font-size:13px;
  line-height:1.35;
  color:#ddd5c6;
}
.duel-score-total-wrap{
  min-width:74px;
  border-radius:16px;
  padding:10px 10px 8px;
  text-align:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.duel-score-total-label{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#bfb7a8;
}
.duel-score-total{
  margin-top:4px;
  font-size:34px;
  line-height:1;
  font-weight:900;
  color:#fff6dc;
}
.duel-score-breakdown{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.duel-score-breakdown span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  border-radius:999px;
  padding:6px 10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-size:12px;
  line-height:1.3;
  color:#e7dece;
}
.duel-verdict-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.duel-verdict-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.duel-verdict-pill.is-win{
  color:#24170c;
  background:linear-gradient(180deg,#e7cd90,#caa154);
}
.duel-verdict-pill.is-loss{
  color:#f0e9db;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
}
.duel-verdict-copy{
  font-size:14px;
  line-height:1.5;
  color:#e8e0d1;
}
.final-accept-wrap{
  margin-top:12px;
}
@media (max-width: 480px){
  .battle-screen{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    height:auto !important;
    overflow:visible !important;
  }
  .battle-main-grid{
    min-height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    align-items:stretch !important;
  }
  .battle-side{
    overflow:visible !important;
  }
  .battle-card-frame,
  .battle-card-frame.back-only{
    height:auto !important;
    min-height:0 !important;
  }
  .choose-panel{
    margin-top:4px !important;
    min-height:auto !important;
    position:relative !important;
    z-index:1 !important;
  }
  .chooser-card-frame.minimal-chooser{
    min-height:auto !important;
  }
  .duel-score-grid{
    grid-template-columns:1fr;
  }
  .duel-banner-title{
    font-size:26px;
  }
  .duel-score-total{
    font-size:30px;
  }
}
@media (max-width: 380px){
  .duel-score-top{
    flex-direction:column;
  }
  .duel-score-total-wrap{
    width:100%;
  }
}


.vault-card.is-missing{
  filter:grayscale(1) saturate(.15) brightness(.85);
  opacity:.78;
  cursor:not-allowed;
}
.vault-card.is-missing img{
  filter:grayscale(1) saturate(.15) contrast(1.02);
}
.vault-card.is-missing::before{
  opacity:.14;
  animation-duration:10s;
}
.vault-card.is-missing .deck-name,
.vault-card.is-missing .deck-meta,
.vault-card.is-missing .vault-state{
  color:#b8b1a5;
}
.vault-card.is-owned .vault-state{color:#e2c27a;font-weight:700}
.vault-card.is-missing .vault-state{color:#d0c7b8;font-weight:700}
.vault-state{margin-top:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.vault-card[disabled]{pointer-events:none}


.vault-overlay-panel{max-width:min(96vw,720px) !important;padding:14px !important}
.vault-lightbox{display:grid;gap:14px}
.vault-lightbox-art{display:flex;justify-content:center;align-items:center;background:#0f1118;border:1px solid var(--line);border-radius:20px;overflow:hidden;padding:10px}
.vault-lightbox-art img{display:block;width:100%;max-width:min(92vw,520px);max-height:78vh;aspect-ratio:2/3;object-fit:contain !important;border-radius:16px;background:#0b0d13}
.vault-lightbox-body{display:grid;gap:10px}
.vault-lightbox-title{margin:0;font-size:clamp(1.5rem,4vw,2rem);line-height:1.1}
.vault-lightbox-lineage{font-size:1rem;color:var(--muted);font-weight:700}
.vault-lightbox-story{font-size:1rem;line-height:1.55;color:var(--text)}

.card-lightbox-trigger{display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer}
.card-lightbox-trigger img{display:block;width:100%}
.deck-card-preview-btn{border-radius:14px;overflow:hidden}
.vault-lightbox-gift{font-size:1rem;line-height:1.45;color:var(--gold, #f1d38a);font-weight:700}


/* v14 lightbox spacing + mobile safe areas */
.overlay{z-index:140 !important;padding:96px 18px calc(108px + env(safe-area-inset-bottom, 0px)) !important;align-items:flex-end !important;}
.overlay-panel{max-height:calc(100vh - 220px - env(safe-area-inset-bottom, 0px)) !important;margin-top:calc(24px + env(safe-area-inset-top, 0px)) !important;}
.vault-overlay-panel{margin-bottom:0 !important;}
.overlay-head{position:sticky;top:0;z-index:2;background:linear-gradient(180deg,rgba(18,21,33,.98),rgba(18,21,33,.92));padding-top:2px}
@media (max-width:520px){
  .overlay{padding:132px 12px calc(112px + env(safe-area-inset-bottom, 0px)) !important;}
  .overlay-panel{max-height:calc(100vh - 268px - env(safe-area-inset-bottom, 0px)) !important;margin-top:calc(40px + env(safe-area-inset-top, 0px)) !important;}
  .vault-lightbox-art img{max-height:52vh !important;}
}
@supports (height: 100dvh){
  .overlay-panel{max-height:calc(100dvh - 220px - env(safe-area-inset-bottom, 0px)) !important;}
  @media (max-width:520px){
    .overlay-panel{max-height:calc(100dvh - 268px - env(safe-area-inset-bottom, 0px)) !important;}
  }
}

/* v15 rebalance lightbox spacing */
.overlay{
  padding:72px 18px calc(108px + env(safe-area-inset-bottom, 0px)) !important;
}
.overlay-panel{
  max-height:calc(100vh - 186px - env(safe-area-inset-bottom, 0px)) !important;
  margin-top:calc(16px + env(safe-area-inset-top, 0px)) !important;
}
@supports (height: 100dvh){
  .overlay-panel{
    max-height:calc(100dvh - 186px - env(safe-area-inset-bottom, 0px)) !important;
  }
}
.vault-overlay-panel .overlay-head{
  position:static !important;
  background:transparent !important;
  padding-top:0 !important;
  margin-bottom:12px !important;
}
@media (max-width:520px){
  .overlay{
    padding:98px 12px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .overlay-panel{
    max-height:calc(100vh - 210px - env(safe-area-inset-bottom, 0px)) !important;
    margin-top:calc(20px + env(safe-area-inset-top, 0px)) !important;
  }
  .vault-lightbox-art img{
    max-height:58vh !important;
  }
}
@supports (height: 100dvh){
  @media (max-width:520px){
    .overlay-panel{
      max-height:calc(100dvh - 210px - env(safe-area-inset-bottom, 0px)) !important;
    }
  }
}


/* v31 circular chooser + stable chooser panel */
.choose-panel{
  min-height: 370px !important;
  align-content: stretch !important;
  grid-template-rows: auto minmax(0,1fr) auto !important;
}
.chooser-card-frame.minimal-chooser{
  min-height: 250px !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr) !important;
  align-content: stretch !important;
}
.chooser-copy.compact{
  min-height: 72px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.chooser-stats{
  min-height: 150px !important;
  align-content: start !important;
}
@media (max-width: 480px){
  .choose-panel{
    min-height: 348px !important;
  }
  .chooser-card-frame.minimal-chooser{
    min-height: 236px !important;
  }
  .chooser-copy.compact{
    min-height: 68px !important;
  }
  .chooser-stats{
    min-height: 144px !important;
  }
}


/* v18 duel result spacing + next combat */
.choose-panel.has-result{
  min-height: 540px !important;
  grid-template-rows: auto auto auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-content: start !important;
}
.choose-panel.has-result .chooser-card-frame.minimal-chooser{
  min-height: 250px !important;
  height: auto !important;
}
.choose-panel.has-result .chooser-card-frame.is-exhausted .chooser-copy,
.choose-panel.has-result .chooser-copy.compact{
  min-height: 76px !important;
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: 10px !important;
}
.choose-panel.has-result .chooser-stats{
  min-height: 148px !important;
}
.result-block-visual{
  margin-top: 10px !important;
}
.next-combat-wrap{
  margin-top: 10px !important;
  padding-bottom: 4px;
}
@media (max-width: 520px){
  .choose-panel.has-result{
    min-height: 500px !important;
  }
}


/* v20 stable post-duel chooser + overlay banner */
.battle-main-grid.has-duel-overlay{
  position:relative;
  padding-top:44px;
}
.duel-overlay-banner{
  position:absolute;
  top:4px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:grid;
  gap:4px;
  justify-items:center;
  text-align:center;
  pointer-events:none;
}
.duel-overlay-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(226,194,122,.35);
  background:rgba(12,16,24,.88);
  color:var(--text);
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.duel-overlay-banner.is-win .duel-overlay-pill{
  border-color:rgba(74,222,128,.45);
  box-shadow:0 0 0 1px rgba(74,222,128,.18) inset;
}
.duel-overlay-banner.is-loss .duel-overlay-pill{
  border-color:rgba(248,113,113,.45);
  box-shadow:0 0 0 1px rgba(248,113,113,.18) inset;
}
.duel-overlay-copy{
  max-width:min(78vw, 420px);
  color:var(--muted);
  font-size:12px;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.chooser-post-duel{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.05);
  padding:12px 14px;
  display:grid;
  gap:8px;
}
.chooser-post-duel-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:100%;
  min-height:28px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(226,194,122,.3);
  background:rgba(12,16,24,.86);
  color:var(--text);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.chooser-post-duel-copy{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.choose-panel.has-result{
  min-height:unset !important;
  grid-template-rows:auto auto auto !important;
  overflow:visible !important;
}
.choose-panel.has-result .chooser-card-frame.minimal-chooser,
.choose-panel.has-result .chooser-header-row,
.choose-panel.has-result .chooser-copy.compact{
  min-height:unset !important;
  margin-bottom:0 !important;
  position:static !important;
  transform:none !important;
}
@media (max-width:520px){
  .battle-main-grid.has-duel-overlay{
    padding-top:48px;
  }
  .duel-overlay-copy{
    max-width:84vw;
    font-size:11px;
  }
}


/* v22: safe bottom spacing for Cripta so bottom nav never overlaps content */
.vault-screen{
  padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important;
}
.vault-header-card,
.vault-grid,
.vault-empty{
  scroll-margin-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
}
.vault-grid{
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 768px){
  .vault-screen{
    padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* v23 collapsible duel result */
.duel-result-details{
  border-radius:18px;
  background:rgba(10,13,22,.58);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 0fr;
  transition:grid-template-rows .42s ease, border-color .28s ease, background .28s ease;
}
.duel-result-summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  gap:4px;
  padding:12px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  transition:background .28s ease, border-color .28s ease;
}
.duel-result-summary::-webkit-details-marker{display:none}
.duel-result-summary-main{
  display:grid;
  gap:2px;
  color:#f6f0e1;
  font-size:14px;
}
.duel-result-summary-main strong{
  font-size:16px;
  line-height:1.15;
}
.duel-result-summary-action{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#cdb987;
  font-weight:800;
}
.duel-result-summary-action .when-open{display:none}
.duel-result-summary-action .when-closed,
.duel-result-summary-action .when-open{
  transition:opacity .22s ease, transform .22s ease;
}
.duel-result-summary::after{
  content:'▾';
  justify-self:end;
  align-self:center;
  margin-top:-28px;
  font-size:16px;
  color:#e7cd90;
  transition:transform .32s ease, color .24s ease;
}
.duel-result-details[open]{
  grid-template-rows:auto 1fr;
  background:rgba(10,13,22,.64);
}
.duel-result-details[open] .duel-result-summary{
  border-bottom:1px solid rgba(255,255,255,.08);
}
.duel-result-details[open] .duel-result-summary-action{
  color:#f2dfae;
}
.duel-result-details[open] .duel-result-summary-action .when-closed{display:none}
.duel-result-details[open] .duel-result-summary-action .when-open{display:inline}
.duel-result-details[open] .duel-result-summary::after{
  transform:rotate(180deg);
  color:#f2dfae;
}
.duel-result-details .duel-result-box{
  margin-top:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-12px);
  transition:opacity .28s ease, transform .38s ease;
}
.duel-result-details[open] .duel-result-box{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .duel-result-details,
  .duel-result-summary,
  .duel-result-summary::after,
  .duel-result-summary-action .when-closed,
  .duel-result-summary-action .when-open,
  .duel-result-details .duel-result-box{
    transition:none;
  }
}


/* v42 prevent bottom nav from covering action buttons */
:root{
  --bottom-nav-reserve: 112px;
}
.app-shell{
  padding-bottom: calc(var(--bottom-nav-reserve) + env(safe-area-inset-bottom)) !important;
}
#app{
  padding-bottom: calc(var(--bottom-nav-reserve) + env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}
.bottom-nav{
  z-index: 40 !important;
}
.battle-screen,
.battle-screen.end-screen,
.mission-screen,
.choose-panel,
.choose-panel.has-result,
.final-accept-wrap,
.next-combat-wrap{
  scroll-padding-bottom: calc(var(--bottom-nav-reserve) + 16px) !important;
}
.mission-screen,
.choose-panel,
.choose-panel.has-result{
  padding-bottom: calc(var(--bottom-nav-reserve) + 8px) !important;
}
.final-accept-wrap,
.next-combat-wrap{
  margin-bottom: calc(var(--bottom-nav-reserve) - 36px) !important;
}
@media (max-width: 480px){
  :root{
    --bottom-nav-reserve: 124px;
  }
  .battle-screen{
    padding-bottom: 8px !important;
  }
  .choose-panel,
  .choose-panel.has-result,
  .mission-screen{
    padding-bottom: calc(var(--bottom-nav-reserve) + 14px) !important;
  }
  .final-accept-wrap,
  .next-combat-wrap{
    margin-bottom: calc(var(--bottom-nav-reserve) - 24px) !important;
  }
}
@media (max-height: 820px){
  :root{
    --bottom-nav-reserve: 132px;
  }
}

/* v43 adaptive layout pass: improve responsiveness across widths/heights */
:root{
  --shell-max-width: 640px;
  --bottom-nav-height: clamp(78px, 10vh, 96px);
  --page-gutter: clamp(10px, 2.8vw, 18px);
  --section-gap: clamp(10px, 2.6vw, 16px);
  --card-title-size: clamp(22px, 5.2vw, 34px);
  --screen-title-size: clamp(24px, 5.8vw, 38px);
  --body-copy-size: clamp(14px, 3.4vw, 18px);
  --button-text-size: clamp(15px, 3.8vw, 18px);
}

html,body{
  height:auto !important;
  min-height:100%;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}

body{
  padding:0 !important;
}

.app-shell{
  min-height:100svh !important;
  height:auto !important;
  max-width:var(--shell-max-width) !important;
  margin:0 auto !important;
  padding:var(--page-gutter) var(--page-gutter) calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 22px) !important;
  overflow:visible !important;
  gap:var(--section-gap);
}

#app{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 22px) !important;
}

.stack,
.overlay-grid,
.vault-grid,
.grid-2,
.attr-buttons,
.duel-action-row,
.result-block,
.battle-screen,
.mission-screen{
  gap:var(--section-gap) !important;
}

.screen-title{font-size:var(--screen-title-size) !important; line-height:1.08 !important;}
.screen-sub,.helper,.list,.deck-meta,.augury-desc,.value-sub,.log-item{font-size:var(--body-copy-size) !important; line-height:1.55 !important;}
.card-title{font-size:var(--card-title-size) !important; line-height:1.05 !important;}
.value-text{font-size:clamp(17px, 4vw, 24px) !important; line-height:1.45 !important;}
.stat-head{font-size:clamp(15px, 3.7vw, 21px) !important;}
.deck-name,.augury-name{font-size:clamp(15px, 3.9vw, 22px) !important; line-height:1.2 !important;}
.btn,.nav-btn,.attr-btn{font-size:var(--button-text-size) !important;}
.btn,.attr-btn{min-height:48px !important;}

.panel,
.card-frame,
.battle-card-frame,
.overlay-panel,
.result-box,
.mini-box,
.vault-card,
.augury-toggle,
.chooser-card-frame{
  width:100%;
  max-width:100%;
}

.bottom-nav{
  left:max(env(safe-area-inset-left), 0px) !important;
  right:max(env(safe-area-inset-right), 0px) !important;
  max-width:var(--shell-max-width) !important;
  width:calc(100% - (var(--page-gutter) * 2)) !important;
  bottom:max(env(safe-area-inset-bottom), 0px) !important;
  margin:0 auto 0 !important;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
  border-radius:18px 18px 0 0;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
}

.toast{
  bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 12px) !important;
  width:calc(100% - (var(--page-gutter) * 2)) !important;
  max-width:calc(var(--shell-max-width) - (var(--page-gutter) * 2)) !important;
}

.battle-screen,
.battle-screen.end-screen{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  grid-template-rows:auto auto auto auto !important;
}

.battle-main-grid{
  min-height:0 !important;
  height:auto !important;
  overflow:visible !important;
  align-items:start;
}

.battle-side{
  overflow:visible !important;
}

.battle-card-frame{
  height:auto !important;
  min-height:0 !important;
  grid-template-rows:auto auto auto !important;
  overflow:visible !important;
}

.battle-art,
.art-box{
  aspect-ratio:2 / 3;
  min-height:0;
}

.battle-art img,
.art-box img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.battle-card-copy,
.deck-card-copy{
  padding:clamp(8px, 2vw, 12px) !important;
}

.battle-name{font-size:clamp(15px, 3.8vw, 20px) !important; line-height:1.12 !important;}
.battle-lineage,.battle-meta{font-size:clamp(11px, 2.8vw, 14px) !important; line-height:1.35 !important;}
.battle-stats{grid-template-columns:1fr 1fr !important; gap:8px !important;}
.battle-stats .stat-row{padding:8px !important;}
.battle-stats .stat-head{font-size:clamp(12px, 3vw, 15px) !important;}

.battle-carousel-panel,
.choose-panel,
.choose-panel.has-result,
.mission-screen,
.vault-screen{
  overflow:visible !important;
  min-height:0 !important;
  padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 18px) !important;
}

.final-accept-wrap,
.next-combat-wrap,
.chooser-fight-inline{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

.mission-start-btn,
#finalAcceptBtn,
#nextCombatBtn,
#resolveBtn{
  width:100%;
}

.overlay{
  align-items:flex-end !important;
  padding:var(--page-gutter) !important;
}

.overlay-panel{
  width:min(var(--shell-max-width), 100%) !important;
  max-height:min(86svh, 900px) !important;
}

.vault-grid,
.overlay-grid{
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
}

img, button, .btn, .nav-btn, .attr-btn, .augury-toggle, .stat-row, .vault-card-button{
  max-width:100%;
}

@media (max-width: 700px){
  .battle-main-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:8px !important;
    align-items:start !important;
  }
  .battle-side{
    gap:8px !important;
    min-width:0 !important;
  }
  .battle-side .eyebrow{
    text-align:center;
  }
  .battle-card-frame,
  .battle-card-frame.enemy{
    order:initial !important;
  }
  .battle-carousel-panel{
    order:3;
  }
  .battle-card-copy{
    padding:8px !important;
  }
  .battle-name{
    font-size:clamp(13px, 2.9vw, 16px) !important;
  }
  .battle-lineage,.battle-meta{
    font-size:clamp(10px, 2.3vw, 12px) !important;
  }
}

@media (max-width: 560px){
  .app-shell{
    --shell-max-width: 100%;
  }
  .grid-2,
  .vault-grid,
  .overlay-grid,
  .attr-buttons,
  .duel-action-row{
    grid-template-columns:1fr !important;
  }
  .battle-stats{
    grid-template-columns:1fr !important;
  }
  .bottom-nav{
    width:100% !important;
    max-width:none !important;
    left:0 !important;
    right:0 !important;
    border-radius:18px 18px 0 0;
  }
}

@media (max-width: 420px){
  .app-shell{
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .battle-art,
  .art-box{
    aspect-ratio: 11 / 16;
  }
  .compact-lightbox .deck-card{
    width:92px !important;
  }
  .nav-btn{
    padding:12px 8px !important;
  }
}


@media (max-width: 420px){
  .battle-main-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:6px !important;
  }
  .battle-card-frame{
    padding:6px !important;
    border-radius:16px !important;
  }
  .battle-stats .stat-row{
    padding:6px !important;
  }
  .battle-stats .stat-head{
    font-size:11px !important;
  }
}

@media (max-height: 740px){
  :root{
    --bottom-nav-height: 102px;
  }
  .battle-art,
  .art-box{
    aspect-ratio: 5 / 7;
  }
  .overlay-panel{
    max-height:82svh !important;
  }
}

/* v23: lift vault lightbox to avoid bottom browser bars and hidden controls */
:root{
  --overlay-top-safe: max(18px, env(safe-area-inset-top, 0px));
  --overlay-bottom-safe: calc(var(--bottom-nav-height, 88px) + env(safe-area-inset-bottom, 0px) + 26px);
}

.overlay{
  min-height:100dvh !important;
  align-items:flex-end !important;
  padding:
    calc(var(--overlay-top-safe) + 10px)
    max(12px, var(--page-gutter, 14px))
    var(--overlay-bottom-safe)
    max(12px, var(--page-gutter, 14px)) !important;
  box-sizing:border-box !important;
}

.overlay-panel{
  width:min(var(--shell-max-width, 720px), 100%) !important;
  max-height:calc(100dvh - var(--overlay-top-safe) - var(--overlay-bottom-safe) - 10px) !important;
  margin:0 auto !important;
  overflow:auto !important;
  overscroll-behavior:contain;
}

.vault-overlay-panel{
  margin-bottom:8px !important;
}

.vault-overlay-panel .overlay-head{
  position:sticky;
  top:0;
  z-index:4;
  padding-top:4px;
  padding-bottom:10px;
  background:linear-gradient(180deg, rgba(18,21,33,.99), rgba(18,21,33,.94) 72%, rgba(18,21,33,0));
}

.vault-lightbox{
  padding-bottom:6px;
}

.vault-lightbox-art{
  align-items:flex-start !important;
}

.vault-lightbox-art img{
  max-height:calc(100dvh - var(--overlay-top-safe) - var(--overlay-bottom-safe) - 110px) !important;
}

@supports not (height: 100dvh){
  .overlay{min-height:100vh !important;}
  .overlay-panel{max-height:calc(100vh - var(--overlay-top-safe) - var(--overlay-bottom-safe) - 10px) !important;}
  .vault-lightbox-art img{max-height:calc(100vh - var(--overlay-top-safe) - var(--overlay-bottom-safe) - 110px) !important;}
}

@media (max-width: 640px){
  :root{
    --overlay-bottom-safe: calc(var(--bottom-nav-height, 88px) + env(safe-area-inset-bottom, 0px) + 34px);
  }
  .overlay{
    padding-top:calc(var(--overlay-top-safe) + 14px) !important;
    padding-bottom:var(--overlay-bottom-safe) !important;
  }
  .overlay-panel{
    max-height:calc(100dvh - var(--overlay-top-safe) - var(--overlay-bottom-safe) - 6px) !important;
  }
  .vault-overlay-panel{
    margin-bottom:12px !important;
  }
  .vault-lightbox-art img{
    max-height:calc(100dvh - var(--overlay-top-safe) - var(--overlay-bottom-safe) - 124px) !important;
  }
}

@media (max-height: 760px){
  :root{
    --overlay-bottom-safe: calc(var(--bottom-nav-height, 88px) + env(safe-area-inset-bottom, 0px) + 40px);
  }
  .overlay{
    padding-top:calc(var(--overlay-top-safe) + 8px) !important;
  }
  .vault-lightbox-art img{
    max-height:calc(100dvh - var(--overlay-top-safe) - var(--overlay-bottom-safe) - 132px) !important;
  }
}

/* v24: make vault card image as large as possible without hiding controls */
.vault-overlay-panel{
  width:min(96vw, 760px) !important;
}
.vault-overlay-panel .overlay-head{
  padding-bottom:8px !important;
}
.vault-lightbox{
  gap:10px !important;
  padding-bottom:2px !important;
}
.vault-lightbox-art{
  padding:6px !important;
}
.vault-lightbox-art img{
  width:auto !important;
  max-width:min(100%, 560px) !important;
  max-height:calc(100dvh - var(--overlay-top-safe) - var(--overlay-bottom-safe) - 72px) !important;
}
@supports not (height: 100dvh){
  .vault-lightbox-art img{
    max-height:calc(100vh - var(--overlay-top-safe) - var(--overlay-bottom-safe) - 72px) !important;
  }
}
@media (max-width: 640px){
  .vault-lightbox-art img{
    max-width:100% !important;
    max-height:calc(100dvh - var(--overlay-top-safe) - var(--overlay-bottom-safe) - 82px) !important;
  }
}
@media (max-height: 760px){
  .vault-lightbox-art img{
    max-height:calc(100dvh - var(--overlay-top-safe) - var(--overlay-bottom-safe) - 96px) !important;
  }
}

/* v44 prevent battle section overlap across screen sizes */
.battle-screen{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:clamp(10px, 2.8vw, 18px) !important;
  overflow:visible !important;
}

.battle-main-grid,
.battle-main-grid.has-duel-overlay,
.battle-carousel-panel,
.choose-panel,
.choose-panel.has-result{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

.battle-main-grid,
.battle-main-grid.has-duel-overlay{
  flex:0 0 auto !important;
  margin:0 0 clamp(10px, 2.6vw, 16px) 0 !important;
  isolation:isolate;
  z-index:1 !important;
}

.battle-main-grid.has-duel-overlay{
  padding-bottom:clamp(4px, 1.5vw, 10px) !important;
}

.battle-carousel-panel,
.choose-panel,
.choose-panel.has-result{
  flex:0 0 auto !important;
  margin:0 !important;
  clear:both;
  z-index:2 !important;
}

.battle-side,
.battle-card-frame,
.chooser-card-frame,
.chooser-post-duel,
.result-block,
.result-block-visual,
.next-combat-wrap,
.final-accept-wrap,
.chooser-fight-inline{
  max-width:100% !important;
  box-sizing:border-box !important;
}

@media (max-width: 560px), (max-height: 820px){
  .battle-screen{
    gap:12px !important;
  }
  .battle-main-grid,
  .battle-main-grid.has-duel-overlay{
    margin-bottom:12px !important;
  }
}

/* v46: force reliable vertical scroll in Vault/Crypt on mobile */
html,body{
  min-height:100% !important;
  height:auto !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
}

#app{
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
}

.vault-screen{
  display:grid !important;
  align-content:start !important;
  min-height:calc(100svh - 140px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-y:contain !important;
  touch-action:pan-y !important;
  padding-bottom:calc(var(--bottom-nav-height, 88px) + env(safe-area-inset-bottom) + 32px) !important;
}

.vault-grid,
.vault-header-card,
.vault-empty{
  width:100% !important;
}

@media (max-width: 700px){
  .vault-screen{
    min-height:calc(100svh - 126px) !important;
    padding-bottom:calc(var(--bottom-nav-height, 88px) + env(safe-area-inset-bottom) + 44px) !important;
  }
}

/* v32 iPhone bottom nav: transparent background and flush to screen bottom */
.bottom-nav{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 0 !important;
  box-shadow: none !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 0 !important;
  align-items: end;
}

.bottom-nav::before,
.bottom-nav::after{
  display:none !important;
  content:none !important;
}

.nav-btn{
  box-shadow: 0 6px 16px rgba(0,0,0,.18) !important;
}

.toast{
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 10px) !important;
}

@media (max-width: 560px){
  .bottom-nav{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* v33 contain bottom nav inside app-shell and keep safe gap above content */
.app-shell{
  position:relative !important;
}

#app{
  width:100% !important;
  min-width:0 !important;
  padding-bottom:0 !important;
}

.bottom-nav{
  position:sticky !important;
  left:auto !important;
  right:auto !important;
  bottom:max(env(safe-area-inset-bottom, 0px), 0px) !important;
  width:100% !important;
  max-width:100% !important;
  margin:18px 0 0 0 !important;
  align-self:stretch !important;
  z-index:30 !important;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  border-radius:18px 18px 0 0 !important;
}

@supports (padding: max(0px)){
  .bottom-nav{
    padding-bottom:max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 560px){
  .bottom-nav{
    margin-top:14px !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }
}


/* v34 desktop wheel scroll fix: keep app-shell nav layout but restore normal wheel scrolling */
html, body{
  min-height:100% !important;
  height:auto !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}

body{
  overscroll-behavior-y:auto !important;
}

.app-shell{
  min-height:100dvh !important;
  height:auto !important;
  overflow:visible !important;
}

#app{
  min-height:0 !important;
  height:auto !important;
  overflow:visible !important;
}

.vault-screen,
.rules-screen,
.battle-screen{
  overflow:visible !important;
}

/* Let mouse wheel bubble to the page even over internal panels */
.panel,
.vault-screen,
.rules-screen,
.battle-screen,
.bottom-nav{
  overscroll-behavior: auto !important;
}

/* v46 vault overlay full-screen frontmost with maximum card size */
#vaultCardOverlay.overlay{
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  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) !important;
  background:rgba(5,7,12,.94) !important;
  backdrop-filter:blur(8px);
  display:flex !important;
  align-items:stretch !important;
  justify-content:stretch !important;
}
#vaultCardOverlay .vault-overlay-panel{
  width:100vw !important;
  max-width:none !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  margin:0 !important;
  border-radius:0 !important;
  border:none !important;
  box-shadow:none !important;
  background:linear-gradient(180deg, rgba(10,12,19,.985), rgba(10,12,19,.965)) !important;
  overflow:auto !important;
  position:relative !important;
  z-index:100000 !important;
  padding:calc(12px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)) !important;
}
#vaultCardOverlay .vault-overlay-panel .overlay-head{
  position:sticky !important;
  top:0 !important;
  z-index:3 !important;
  margin:0 0 10px 0 !important;
  padding:2px 0 10px 0 !important;
  background:linear-gradient(180deg, rgba(10,12,19,.99), rgba(10,12,19,.94) 75%, rgba(10,12,19,0)) !important;
}
#vaultCardOverlay .vault-lightbox{
  min-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 76px) !important;
  display:grid !important;
  grid-template-rows:minmax(0,1fr) auto !important;
  gap:12px !important;
}
#vaultCardOverlay .vault-lightbox-art{
  min-height:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#vaultCardOverlay .vault-lightbox-art img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:min(96vw, calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 120px) * 0.72)) !important;
  max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 120px) !important;
  object-fit:contain !important;
  border-radius:18px !important;
  box-shadow:0 24px 56px rgba(0,0,0,.48) !important;
  background:#0b0d13 !important;
}
#vaultCardOverlay .vault-lightbox-body{
  position:relative !important;
  z-index:2 !important;
}
@supports not (height: 100dvh){
  #vaultCardOverlay .vault-overlay-panel{
    min-height:100vh !important;
    max-height:100vh !important;
  }
  #vaultCardOverlay .vault-lightbox{
    min-height:calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 76px) !important;
  }
  #vaultCardOverlay .vault-lightbox-art img{
    max-width:min(96vw, calc((100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 120px) * 0.72)) !important;
    max-height:calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 120px) !important;
  }
}
@media (max-width: 640px){
  #vaultCardOverlay .vault-overlay-panel{
    padding:calc(10px + env(safe-area-inset-top, 0px)) 12px calc(14px + env(safe-area-inset-bottom, 0px)) 12px !important;
  }
  #vaultCardOverlay .vault-lightbox{
    min-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 68px) !important;
    gap:10px !important;
  }
  #vaultCardOverlay .vault-lightbox-art img{
    max-width:100% !important;
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 108px) !important;
  }
}


/* v24: Cripta cards are display-only, no click interaction */
.vault-grid .vault-card{cursor:default;user-select:none;-webkit-tap-highlight-color:transparent;}
.vault-grid .vault-card:active{transform:none !important;}


/* v39 duel outcome banner on combat images + force focus to top after fight */
.battle-card-frame.has-duel-outcome .battle-art{position:relative;isolation:isolate;}
.battle-outcome-banner{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:10px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
  box-shadow:0 16px 38px rgba(0,0,0,.28);
}
.battle-outcome-banner.is-victory{
  color:#fdf6cf;
  background:linear-gradient(180deg, rgba(114,88,23,.90), rgba(43,84,36,.78));
}
.battle-outcome-banner.is-defeat{
  color:#ffe0dc;
  background:linear-gradient(180deg, rgba(126,26,33,.90), rgba(61,13,18,.82));
}
@media (max-width: 640px){
  .battle-outcome-banner{
    top:10px;
    left:10px;
    right:10px;
    min-height:46px;
    padding:8px 10px;
    font-size:.92rem;
    letter-spacing:.1em;
  }
}


.battle-progress-panel{display:grid;gap:12px;margin-bottom:14px;padding:14px 16px}
.battle-progress-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.battle-progress-head--compact{align-items:center}
.battle-progress-title{margin:4px 0 0;font-size:22px;line-height:1.15}
.battle-progress-subtitle{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.35}
.battle-progress-counter{display:grid;gap:4px;justify-items:end;color:var(--muted);font-size:14px}
.battle-progress-counter strong{font-size:28px;color:var(--text)}
.battle-progress-counter--compact strong{font-size:24px}
.battle-progress-bars{display:grid;gap:12px}
.battle-progress-bars--compact{gap:8px}
.battle-progress-label-row{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted);margin-bottom:6px}
.battle-progress-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.battle-progress-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#e7cd90 0%, #8b5cf6 60%, #58d0d4 100%)}
.battle-progress-bar.is-readiness span{background:linear-gradient(90deg,#58d0d4 0%, #8b5cf6 100%)}
.battle-progress-compact-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.battle-progress-toggle{padding:8px 14px;border-radius:999px;font-size:13px;min-height:auto}
.battle-progress-details{display:grid;gap:12px;padding-top:2px}
.battle-progress-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.battle-progress-stat{padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);display:grid;gap:4px}
.battle-progress-stat span{font-size:13px;color:var(--muted)}
.battle-progress-stat strong{font-size:18px}

.battle-outcome-banner{position:absolute;left:10px;right:10px;top:10px;z-index:2;display:grid;gap:4px;padding:12px 14px;border-radius:16px;background:rgba(14,16,25,.82);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.battle-outcome-banner strong{font-size:22px;line-height:1.05}
.battle-outcome-banner span{font-size:13px;color:#f2ead8}
.battle-outcome-banner.is-victory strong{color:#f6d88f}
.battle-outcome-banner.is-defeat strong{color:#ffd0d0}

.duel-compare-panel{margin-top:14px;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);display:grid;gap:12px}
.duel-compare-head h4{margin:4px 0 0;font-size:20px}
.duel-compare-grid{display:grid;gap:10px}
.duel-compare-row{padding:10px 12px;border-radius:14px;background:rgba(14,16,25,.62);border:1px solid rgba(255,255,255,.08);display:grid;gap:8px}
.duel-compare-values{display:grid;grid-template-columns:56px 1fr 56px;gap:10px;align-items:center;font-size:14px}
.duel-compare-values span{text-align:center;color:var(--muted);font-weight:700}
.duel-compare-values .player{text-align:left}
.duel-compare-values .enemy{text-align:right}
.duel-compare-bars{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center}
.duel-compare-bar{height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.duel-compare-bar.left span,.duel-compare-bar.right span{display:block;height:100%;border-radius:999px}
.duel-compare-bar.left span{margin-left:auto;background:linear-gradient(90deg,#8b5cf6 0%, #e7cd90 100%)}
.duel-compare-bar.right span{background:linear-gradient(90deg,#58d0d4 0%, #8b5cf6 100%)}
.duel-compare-row.player-lean{box-shadow:inset 0 0 0 1px rgba(226,194,122,.08)}
.duel-compare-row.enemy-lean{box-shadow:inset 0 0 0 1px rgba(88,208,212,.08)}

@media (max-width:420px){
  .battle-progress-title{font-size:18px}
  .battle-progress-subtitle{font-size:12px}
  .battle-progress-compact-row{font-size:12px}
  .duel-compare-values{grid-template-columns:48px 1fr 48px}
  .battle-outcome-banner strong{font-size:18px}
}

@media (max-width: 640px){
  .battle-progress-head--compact{align-items:flex-start}
  .battle-progress-counter--compact{justify-items:start}
  .battle-progress-compact-row{align-items:flex-start}
  .battle-progress-toggle{width:100%}
  .battle-progress-grid{grid-template-columns:1fr}
}


/* Vault flip cards */
.vault-card-flip{padding:0 !important;overflow:visible;perspective:1400px;border-radius:20px}
.vault-flip-button{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
  border-radius:20px;
  perspective:1400px;
}
.vault-card-inner{
  position:relative;
  display:block;
  width:100%;
  min-height:420px;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform .78s cubic-bezier(.22,.7,.18,1), box-shadow .28s ease;
  will-change:transform;
}
.vault-card-flip:hover .vault-card-inner,
.vault-card-flip:focus-within .vault-card-inner{
  box-shadow:0 18px 34px rgba(0,0,0,.22);
}
.vault-card-flip.is-flipped .vault-card-inner{transform:rotateY(180deg)}
.vault-face{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(13,15,24,.98), rgba(20,22,33,.98));
}
.vault-face-front{transform:rotateY(0deg)}
.vault-face-front img{border-radius:14px;aspect-ratio:2/3;object-fit:cover;width:100%;margin-bottom:4px;transform:translateZ(18px)}
.vault-face-back{transform:rotateY(180deg);justify-content:flex-start;background:linear-gradient(180deg, rgba(18,12,27,.98), rgba(12,16,25,.98));border:1px solid rgba(226,194,122,.22)}
.vault-face > *{transform:translateZ(14px)}
.vault-flip-hint{margin-top:auto;font-size:.78rem;line-height:1.3;color:var(--muted);opacity:.9}
.vault-flip-hint-back{color:#d7c49c}
.vault-back-topline{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#e2c27a;font-weight:800}
.vault-back-title{font-size:1rem;line-height:1.2;font-weight:800}
.vault-back-lineage{font-size:.84rem;color:var(--muted);font-weight:700}
.vault-back-gift{font-size:.84rem;line-height:1.35;color:#f0d38f;font-weight:700}
.vault-back-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px}
.vault-back-stat{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:.78rem}
.vault-back-stat strong{font-size:.92rem;color:#fff}
.vault-back-story{font-size:.78rem;line-height:1.45;color:#ece7dc;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.vault-card-flip.is-missing .vault-face-back{background:linear-gradient(180deg, rgba(26,24,28,.98), rgba(15,18,24,.98));border-color:rgba(208,199,184,.18)}
@media (max-width: 520px){
  .vault-card-inner{min-height:400px}
  .vault-back-story{-webkit-line-clamp:5}
}

@media (prefers-reduced-motion: reduce){
  .vault-card-inner{transition:none}
}


/* v25 duel lightbox flip card */
.vault-lightbox-flip-wrap{display:flex;justify-content:center;align-items:flex-start}
.vault-lightbox-card{width:min(92vw,520px);max-width:520px;margin:0 auto}
.vault-lightbox-card .vault-flip-button{width:100%;display:block}
.vault-lightbox-card .vault-card-inner{min-height:min(78vh,880px)}
.vault-lightbox-card .vault-face{min-height:min(78vh,880px)}
.vault-lightbox-card .vault-face-front,
.vault-lightbox-card .vault-face-back{padding:14px}
.vault-lightbox-card img{display:block;width:100%;aspect-ratio:2/3;object-fit:contain !important;border-radius:16px;background:#0b0d13}
.vault-lightbox-face .deck-name{font-size:clamp(1.3rem,3.8vw,2rem)}
.vault-lightbox-face .deck-meta{font-size:clamp(.95rem,2.6vw,1.1rem)}
.vault-lightbox-card .vault-back-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vault-lightbox-card .vault-back-story{font-size:1rem;line-height:1.55}
@media (max-width:520px){
  .vault-lightbox-card{width:min(94vw,520px)}
  .vault-lightbox-card .vault-card-inner,
  .vault-lightbox-card .vault-face{min-height:min(72vh,760px)}
}


/* v47 transient duel HUD */
.battle-screen{position:relative}
.duel-hud-flash{
  position:absolute;
  left:50%;
  top:14px;
  transform:translateX(-50%);
  z-index:7;
  width:min(92%, 720px);
  display:grid;
  gap:12px;
  padding:14px 16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(13,17,28,.92), rgba(8,11,19,.84));
  box-shadow:0 20px 48px rgba(0,0,0,.42);
  backdrop-filter:blur(10px);
  animation:duelHudIn .34s ease, duelHudOut .5s ease 2.9s forwards;
  pointer-events:none;
}
.duel-hud-flash.is-win{box-shadow:0 20px 52px rgba(210,170,84,.22), 0 20px 48px rgba(0,0,0,.42); border-color:rgba(235,206,129,.38)}
.duel-hud-flash.is-loss{box-shadow:0 20px 52px rgba(108,137,220,.18), 0 20px 48px rgba(0,0,0,.42); border-color:rgba(148,170,255,.24)}
.duel-hud-flash-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.duel-hud-flash-card{padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:grid;gap:4px}
.duel-hud-flash-card span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#cdb987;font-weight:800}
.duel-hud-flash-card strong{font-size:34px;line-height:1;color:#f8f2e7}
.duel-hud-flash-card.is-enemy strong{text-align:right}
.duel-hud-flash-versus{font-size:15px;font-weight:900;letter-spacing:.2em;color:#f2dfae}
.duel-hud-flash-verdict{justify-self:center;padding:8px 16px;border-radius:999px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;font-weight:900;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#f8f2e7}
.duel-hud-flash.is-win .duel-hud-flash-verdict{color:#f6d88f}
.duel-hud-flash.is-loss .duel-hud-flash-verdict{color:#d7e2ff}
@keyframes duelHudIn{from{opacity:0;transform:translate(-50%,-18px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes duelHudOut{to{opacity:0;transform:translate(-50%,-10px) scale(.98)}}
@media (max-width: 640px){
  .duel-hud-flash{top:10px;padding:12px 12px 10px}
  .duel-hud-flash-score{grid-template-columns:1fr;gap:8px}
  .duel-hud-flash-versus{justify-self:center}
  .duel-hud-flash-card strong,.duel-hud-flash-card.is-enemy strong{text-align:center;font-size:28px}
}
@media (prefers-reduced-motion: reduce){
  .duel-hud-flash{animation:none}
}


/* v31: persistent duel HUD + compact collapsible battle status + arena fit */
.battle-screen{
  grid-template-rows:auto minmax(0, 1fr) minmax(0, auto) !important;
  gap:8px !important;
  min-height:calc(100svh - 72px) !important;
  align-content:start;
}
.battle-main-grid{
  max-height:min(34svh, 340px) !important;
  min-height:min(34svh, 340px) !important;
  align-items:stretch;
}
.battle-side{min-height:0}
.battle-card-frame,
.battle-card-frame.back-only{
  min-height:0 !important;
}
.battle-card-frame .battle-art,
.battle-card-frame .battle-art img,
.battle-card-frame.back-only .battle-art,
.battle-card-frame.back-only .battle-art img{
  max-height:min(27svh, 270px);
}
.choose-panel{
  min-height:0 !important;
  grid-template-rows:auto auto minmax(0,1fr) auto !important;
}
.battle-progress-panel{
  padding:8px 10px !important;
  border-radius:16px !important;
}
.battle-progress-summary{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  background:transparent;
  border:0;
  color:inherit;
  padding:0;
  text-align:left;
  cursor:pointer;
}
.battle-progress-summary-main{display:grid;gap:2px;min-width:0}
.battle-progress-summary-title{font-size:15px;line-height:1.15;color:#f5ead0}
.battle-progress-summary-copy{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.battle-progress-summary-side{display:grid;justify-items:end;gap:6px}
.battle-progress-summary-action{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#d7c18a;font-weight:800}
.battle-progress-counter--compact{display:grid;gap:1px;justify-items:end}
.battle-progress-counter--compact span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.battle-progress-counter--compact strong{font-size:18px;line-height:1;color:#fff6de}
.battle-progress-panel.is-collapsed .battle-progress-details{display:none}
.battle-progress-details{margin-top:10px;animation:duelDropReveal .28s ease both}
.battle-progress-subtitle{margin:8px 0 0;font-size:12px}
.battle-progress-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;margin-top:10px}
.battle-progress-stat{padding:8px 10px !important;border-radius:12px !important}
.battle-progress-stat span{font-size:11px !important}
.battle-progress-stat strong{font-size:15px !important}
.duel-hud-flash{
  top:14px;
  left:50%;
  transform:translateX(-50%);
  width:min(92vw, 620px);
  z-index:40;
  animation:duelHudSettle .28s ease-out both;
}
@keyframes duelHudSettle{
  from{opacity:0;transform:translateX(-50%) translateY(-14px) scale(.98)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@media (max-height: 820px){
  .battle-main-grid{
    max-height:min(30svh, 260px) !important;
    min-height:min(30svh, 260px) !important;
  }
  .battle-card-frame .battle-art,
  .battle-card-frame .battle-art img,
  .battle-card-frame.back-only .battle-art,
  .battle-card-frame.back-only .battle-art img{
    max-height:min(23svh, 205px);
  }
}
@media (max-width: 720px){
  .battle-screen{grid-template-rows:auto minmax(0,1fr) minmax(0,auto) !important}
  .battle-main-grid{max-height:min(32svh, 320px) !important;min-height:min(32svh, 320px) !important}
  .battle-progress-summary{grid-template-columns:minmax(0,1fr)}
  .battle-progress-summary-side{justify-items:start}
  .battle-progress-summary-copy{white-space:normal}
}


/* v32: central duel scoreboard over both cards, no per-card defeat banners */
.battle-main-grid{position:relative;overflow:visible}
.battle-main-grid .duel-hud-flash{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(88%, 560px);
  z-index:12;
  pointer-events:none;
  animation:duelHudCenterIn .28s ease-out both;
}
.battle-main-grid .duel-hud-flash.is-win,
.battle-main-grid .duel-hud-flash.is-loss{
  box-shadow:0 22px 60px rgba(0,0,0,.5);
}
@keyframes duelHudCenterIn{
  from{opacity:0;transform:translate(-50%,-44%) scale(.96)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.battle-outcome-banner{display:none !important}
@media (max-width: 720px){
  .battle-main-grid .duel-hud-flash{width:min(92%, 500px)}
}
@media (max-width: 640px){
  .battle-main-grid .duel-hud-flash{
    width:min(94%, 420px);
    top:50%;
  }
}
@media (prefers-reduced-motion: reduce){
  .battle-main-grid .duel-hud-flash{animation:none}
}


/* v47: full battle cards always visible + shared result marker centered over both cards */
.battle-screen,
.battle-screen.end-screen{
  height:auto !important;
  min-height:calc(100svh - 72px) !important;
  overflow:visible !important;
}

.battle-main-grid,
.battle-main-grid.has-duel-overlay{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  max-height:none !important;
  min-height:0 !important;
  height:auto !important;
  align-items:start !important;
  overflow:visible !important;
}

.battle-side{
  min-height:0 !important;
  overflow:visible !important;
}

.battle-side .eyebrow{
  flex:0 0 auto;
}

.battle-card-frame,
.battle-card-frame.back-only,
.battle-side .battle-card-frame{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  align-self:start !important;
}

.battle-card-frame .battle-art,
.battle-card-frame.back-only .battle-art{
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  display:block !important;
}

.battle-card-frame .battle-art img,
.battle-card-frame.back-only .battle-art img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
}

.battle-main-grid .duel-hud-flash{
  width:min(90%, 560px) !important;
}

.duel-hud-flash-card{
  gap:6px;
}

.duel-hud-flash-card-top{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:center;
  gap:10px;
}

.duel-hud-flash-card-copy{
  min-width:0;
  display:grid;
  gap:2px;
}

.duel-hud-flash-thumb{
  width:44px;
  height:62px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(17,21,33,.95), rgba(10,13,21,.95));
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}

.duel-hud-flash-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.duel-hud-flash-thumb.is-back{
  position:relative;
  background:radial-gradient(circle at center,rgba(139,92,246,.22),transparent 28%), linear-gradient(180deg,#111321,#0c0f18);
}

.duel-hud-flash-thumb.is-back::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("cards/card-back.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.98;
}

.duel-hud-flash-card em{
  display:block;
  font-style:normal;
  font-size:12px;
  line-height:1.2;
  color:#f2ead8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width: 720px), (max-height: 820px){
  .battle-main-grid,
  .battle-main-grid.has-duel-overlay{
    max-height:none !important;
    min-height:0 !important;
  }

  .battle-card-frame .battle-art img,
  .battle-card-frame.back-only .battle-art img{
    max-height:none !important;
  }
}

@media (max-width: 640px){
  .battle-main-grid .duel-hud-flash{
    width:min(94%, 420px) !important;
  }

  .duel-hud-flash-card-top{
    grid-template-columns:38px minmax(0,1fr);
    gap:8px;
  }

  .duel-hud-flash-thumb{
    width:38px;
    height:54px;
  }

  .duel-hud-flash-card em{
    font-size:11px;
  }
}


body.screen-start-active{
  padding:0;
}
body.screen-start-active #app{
  min-height:100svh;
}
.app-shell.is-start-screen .topbar,
.app-shell.is-start-screen .bottom-nav{
  display:none;
}
.app-shell.is-start-screen{
  max-width:none;
  padding:0;
}
.screen-shell--start{
  min-height:100svh;
}
.start-screen{
  position:relative;
  min-height:100svh;
  width:100%;
  overflow:hidden;
  background:#090b12;
}
.start-screen-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.start-screen-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(4,5,10,.22) 0%, rgba(6,7,12,.12) 18%, rgba(8,9,16,.16) 52%, rgba(8,9,16,.72) 100%),
    radial-gradient(circle at 50% 36%, rgba(146,108,255,.18), transparent 26%),
    radial-gradient(circle at 50% 78%, rgba(0,0,0,.1), rgba(0,0,0,.42) 58%, rgba(0,0,0,.72) 100%);
}
.start-screen-hitarea{
  position:absolute;
  inset:0;
  z-index:1;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.start-screen-content{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  text-align:center;
  padding:8vh 24px max(52px, env(safe-area-inset-bottom) + 24px);
  color:#fff7e8;
  pointer-events:none;
}
.start-screen-kicker,
.start-screen-title,
.start-screen-subtitle,
.start-screen-btn{
  pointer-events:auto;
}
.start-screen-kicker{
  font-size:14px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:rgba(255,238,198,.84);
  margin-bottom:10px;
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}
.start-screen-title{
  margin:0;
  font-size:clamp(46px, 9vw, 88px);
  line-height:.95;
  font-weight:600;
  color:#fff4d6;
  text-shadow:0 4px 20px rgba(0,0,0,.78), 0 0 22px rgba(120,80,220,.34);
  font-family:"Brush Script MT","Segoe Script","Lucida Handwriting","Apple Chancery",cursive;
}
.start-screen-subtitle{
  margin:14px 0 22px;
  max-width:28rem;
  font-size:clamp(18px, 3.5vw, 26px);
  line-height:1.5;
  color:#f5e8cb;
  text-shadow:0 2px 16px rgba(0,0,0,.82);
}
.start-screen-btn{
  min-width:200px;
  font-size:20px;
  padding:16px 28px;
  box-shadow:0 14px 34px rgba(0,0,0,.36), 0 0 26px rgba(226,194,122,.16);
}
@media (max-width:640px){
  .start-screen-content{
    justify-content:flex-end;
    padding:10vh 18px max(40px, env(safe-area-inset-bottom) + 18px);
  }
  .start-screen-title{font-size:clamp(40px, 12vw, 68px)}
  .start-screen-subtitle{font-size:18px;max-width:18rem}
  .start-screen-btn{min-width:180px;font-size:18px;padding:14px 24px}
}


/* v54 start button punch + single scroll model for screens */
body:not(.screen-start-active){
  overflow:hidden !important;
}
body:not(.screen-start-active) #app{
  min-height:0 !important;
  height:calc(100svh - 150px) !important;
  overflow:hidden !important;
}
body:not(.screen-start-active) .screen-shell{
  height:100%;
}
body:not(.screen-start-active) .vault-screen,
body:not(.screen-start-active) .battle-screen,
body:not(.screen-start-active) .stack,
body:not(.screen-start-active) .mission-screen,
body:not(.screen-start-active) .rule-card{
  max-height:100%;
}
body:not(.screen-start-active) .vault-screen,
body:not(.screen-start-active) .stack,
body:not(.screen-start-active) .mission-screen,
body:not(.screen-start-active) .rule-card{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
}
body:not(.screen-start-active) .battle-screen{
  overflow:hidden !important;
}

.start-screen-content{
  justify-content:flex-end;
  align-items:center;
  padding:8vh 24px max(72px, env(safe-area-inset-bottom) + 34px);
}
.start-screen-title{
  letter-spacing:.02em;
}
.start-screen-subtitle{
  max-width:24rem;
  margin:12px 0 26px;
}
.start-screen-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:min(82vw, 320px);
  min-height:64px;
  padding:18px 32px;
  border:1px solid rgba(255,233,191,.62);
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,241,201,.28) 0%, rgba(246,186,72,.34) 35%, rgba(115,38,14,.72) 100%),
    radial-gradient(circle at 50% 0%, rgba(255,245,214,.44), transparent 58%),
    linear-gradient(135deg, #7c1f10 0%, #a43516 36%, #df8f2f 100%);
  color:#fff8e8;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 16px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(255,240,213,.18) inset, 0 0 34px rgba(236,174,51,.28);
  overflow:hidden;
}
.start-screen-btn-glow{
  position:absolute;
  inset:-35% auto auto -20%;
  width:58%;
  height:190%;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,245,223,.42), rgba(255,255,255,0));
  transform:rotate(18deg);
  pointer-events:none;
}
.start-screen-btn-label{
  position:relative;
  z-index:1;
}
.start-screen-btn:hover,
.start-screen-btn:focus-visible{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 20px 42px rgba(0,0,0,.46), 0 0 0 1px rgba(255,240,213,.24) inset, 0 0 42px rgba(236,174,51,.36);
}
@media (max-width:640px){
  body:not(.screen-start-active) #app{
    height:calc(100svh - 136px) !important;
  }
  .start-screen-content{
    padding:10vh 18px max(58px, env(safe-area-inset-bottom) + 24px);
  }
  .start-screen-btn{
    min-width:min(88vw, 300px);
    min-height:60px;
    font-size:17px;
    padding:16px 24px;
  }
}

/* v48 compact duel/card lightbox: no scrollbars, card always fits viewport */
#vaultCardOverlay.overlay{
  overflow:hidden !important;
  overscroll-behavior:contain !important;
}
#vaultCardOverlay .vault-overlay-panel{
  overflow:hidden !important;
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  align-items:start !important;
  justify-items:center !important;
  padding:calc(10px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)) !important;
}
#vaultCardOverlay .vault-overlay-panel .overlay-head{
  width:min(100%, 480px) !important;
  margin:0 auto 8px !important;
  padding:0 0 6px 0 !important;
  background:linear-gradient(180deg, rgba(10,12,19,.96), rgba(10,12,19,.82) 72%, rgba(10,12,19,0)) !important;
}
#vaultCardOverlay .vault-lightbox{
  width:100% !important;
  min-height:0 !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
}
#vaultCardOverlay .vault-lightbox-card{
  width:min(76vw, 340px) !important;
  max-width:min(76vw, 340px) !important;
  margin:0 auto !important;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.42));
}
#vaultCardOverlay .vault-lightbox-card .vault-card-inner,
#vaultCardOverlay .vault-lightbox-card .vault-face{
  min-height:min(68dvh, 620px) !important;
}
#vaultCardOverlay .vault-lightbox-card .vault-face{
  padding:12px !important;
  border-radius:22px !important;
  box-shadow:0 18px 38px rgba(0,0,0,.34) !important;
}
#vaultCardOverlay .vault-lightbox-card img{
  width:100% !important;
  max-width:100% !important;
  max-height:calc(68dvh - 28px) !important;
  object-fit:contain !important;
  border-radius:16px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.28) !important;
}
#vaultCardOverlay .vault-lightbox-face .deck-name{font-size:clamp(1.05rem, 3.8vw, 1.4rem) !important;}
#vaultCardOverlay .vault-lightbox-face .deck-meta{font-size:clamp(.8rem, 2.8vw, .96rem) !important;}
#vaultCardOverlay .vault-lightbox-card .vault-back-topline{font-size:.68rem !important;}
#vaultCardOverlay .vault-lightbox-card .vault-back-title{font-size:1rem !important;}
#vaultCardOverlay .vault-lightbox-card .vault-back-lineage,
#vaultCardOverlay .vault-lightbox-card .vault-back-gift,
#vaultCardOverlay .vault-lightbox-card .vault-back-story,
#vaultCardOverlay .vault-lightbox-card .vault-flip-hint{font-size:.78rem !important;line-height:1.35 !important;}
#vaultCardOverlay .vault-lightbox-card .vault-back-stats{gap:8px !important;}
#vaultCardOverlay .vault-lightbox-card .vault-back-stat{padding:7px 9px !important;font-size:.74rem !important;}
#vaultCardOverlay .vault-lightbox-card .vault-back-stat strong{font-size:.86rem !important;}
#vaultCardOverlay .vault-lightbox-card .vault-back-story{
  -webkit-line-clamp:4 !important;
  line-clamp:4 !important;
  overflow:hidden !important;
}
#vaultCardOverlay .btn.ghost{
  border-radius:999px !important;
  padding:10px 14px !important;
  background:rgba(20,23,36,.88) !important;
  border:1px solid rgba(226,194,122,.24) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
}
@supports not (height: 100dvh){
  #vaultCardOverlay .vault-lightbox-card .vault-card-inner,
  #vaultCardOverlay .vault-lightbox-card .vault-face{min-height:min(68vh, 620px) !important;}
  #vaultCardOverlay .vault-lightbox-card img{max-height:calc(68vh - 28px) !important;}
}
@media (max-width: 640px){
  #vaultCardOverlay .vault-overlay-panel{
    padding:calc(8px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px)) 10px !important;
  }
  #vaultCardOverlay .vault-overlay-panel .overlay-head{
    width:min(100%, 360px) !important;
    margin-bottom:6px !important;
  }
  #vaultCardOverlay .vault-lightbox-card{
    width:min(82vw, 300px) !important;
    max-width:min(82vw, 300px) !important;
  }
  #vaultCardOverlay .vault-lightbox-card .vault-card-inner,
  #vaultCardOverlay .vault-lightbox-card .vault-face{
    min-height:min(62dvh, 540px) !important;
  }
  #vaultCardOverlay .vault-lightbox-card img{
    max-height:calc(62dvh - 26px) !important;
  }
}
@media (max-width: 420px){
  #vaultCardOverlay .vault-lightbox-card{
    width:min(84vw, 272px) !important;
    max-width:min(84vw, 272px) !important;
  }
  #vaultCardOverlay .vault-lightbox-card .vault-card-inner,
  #vaultCardOverlay .vault-lightbox-card .vault-face{
    min-height:min(58dvh, 500px) !important;
  }
  #vaultCardOverlay .vault-lightbox-card img{
    max-height:calc(58dvh - 24px) !important;
  }
  #vaultCardOverlay .vault-lightbox-face .deck-name{font-size:1rem !important;}
  #vaultCardOverlay .vault-lightbox-face .deck-meta{font-size:.78rem !important;}
  #vaultCardOverlay .vault-lightbox-card .vault-back-story{-webkit-line-clamp:3 !important;line-clamp:3 !important;}
}


/* v58: ensure enemy card back keeps real height in Arena */
.battle-card-frame.back-only .battle-art.card-back-box,
.battle-card-frame .battle-art.card-back-box{
  position:relative !important;
  display:block !important;
  width:100% !important;
  aspect-ratio:2 / 3 !important;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
}

.battle-card-frame.back-only .battle-art.card-back-box img,
.battle-card-frame .battle-art.card-back-box img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}


/* overlay must sit above bottom nav and keep reading space on mobile */
#vaultCardOverlay.overlay{z-index:2200 !important;align-items:flex-start !important;padding-top:calc(16px + env(safe-area-inset-top)) !important;padding-bottom:calc(28px + env(safe-area-inset-bottom)) !important;}
#vaultCardOverlay .vault-overlay-panel{position:relative;z-index:2201 !important;max-height:calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;padding-bottom:calc(22px + env(safe-area-inset-bottom)) !important;margin-bottom:0 !important;}
.bottom-nav{z-index:40 !important;}
@media (max-width: 520px){
  #vaultCardOverlay.overlay{padding-left:12px !important;padding-right:12px !important;padding-top:calc(12px + env(safe-area-inset-top)) !important;padding-bottom:calc(22px + env(safe-area-inset-bottom)) !important;}
  #vaultCardOverlay .vault-overlay-panel{max-height:calc(100svh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;border-radius:20px !important;}
}

/* v30: always show full card artwork without cropping */
.art-box,
.deck-art-wrap,
.vault-card,
.vault-face-front,
.battle-art{
  background:#0b0d13 !important;
}

.art-box,
.deck-art-wrap,
.battle-art,
.vault-face-front{
  display:flex;
  align-items:center;
  justify-content:center;
}

.art-box img,
.deck-card img,
.vault-card img,
.vault-face-front img,
.battle-card-frame .battle-art img,
.battle-card-frame.back-only .battle-art img,
.battle-card-frame.back-only .battle-art.card-back-box img,
.battle-card-frame .battle-art.card-back-box img{
  width:100% !important;
  height:100% !important;
  aspect-ratio:2 / 3 !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  background:#0b0d13 !important;
}

/* grid/front cards should keep the whole illustration visible */
.vault-face-front img,
.vault-card img,
.deck-card img,
.art-box img{
  margin-bottom:0 !important;
}

/* keep battle card containers shaped like cards while showing full art */
.battle-card-frame .battle-art,
.battle-card-frame.back-only .battle-art{
  aspect-ratio:2 / 3 !important;
  overflow:hidden !important;
}


/* v31b iPhone lightbox + vault navigation polish */
#vaultCardOverlay{
  z-index:9999 !important;
}
#vaultCardOverlay .vault-overlay-panel{
  padding-top:calc(env(safe-area-inset-top, 0px) + 18px) !important;
  padding-bottom:calc(var(--bottom-nav-height, 88px) + env(safe-area-inset-bottom, 0px) + 22px) !important;
  justify-content:flex-start !important;
}
#vaultCardOverlay .overlay-head{
  position:sticky !important;
  top:0 !important;
  z-index:5 !important;
}
#vaultCardOverlay .vault-lightbox{
  min-height:0 !important;
  height:auto !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding-top:6px !important;
}
#vaultCardOverlay .vault-lightbox-card{
  width:min(78vw, 340px) !important;
  max-width:min(78vw, 340px) !important;
}
#vaultCardOverlay .vault-lightbox-card .vault-card-inner,
#vaultCardOverlay .vault-lightbox-card .vault-face{
  min-height:auto !important;
  height:auto !important;
}
#vaultCardOverlay .vault-lightbox-card .vault-face-front{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
}
#vaultCardOverlay .vault-lightbox-card .vault-face-front img{
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  max-height:calc(100svh - env(safe-area-inset-top, 0px) - var(--bottom-nav-height, 88px) - env(safe-area-inset-bottom, 0px) - 160px) !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 auto 4px auto !important;
}
#vaultCardOverlay .vault-lightbox-card .vault-face-back{
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
@supports not (height: 100svh){
  #vaultCardOverlay .vault-lightbox-card .vault-face-front img{
    max-height:calc(100vh - env(safe-area-inset-top, 0px) - var(--bottom-nav-height, 88px) - env(safe-area-inset-bottom, 0px) - 160px) !important;
  }
}
@media (max-width: 430px){
  #vaultCardOverlay .vault-overlay-panel{
    padding-top:calc(env(safe-area-inset-top, 0px) + 24px) !important;
    padding-bottom:calc(var(--bottom-nav-height, 96px) + env(safe-area-inset-bottom, 0px) + 26px) !important;
  }
  #vaultCardOverlay .overlay-head{
    margin-bottom:8px !important;
  }
  #vaultCardOverlay .vault-lightbox-card{
    width:min(82vw, 300px) !important;
    max-width:min(82vw, 300px) !important;
  }
  #vaultCardOverlay .vault-lightbox-card .vault-face-front img{
    max-height:calc(100svh - env(safe-area-inset-top, 0px) - var(--bottom-nav-height, 96px) - env(safe-area-inset-bottom, 0px) - 188px) !important;
  }
}
@media (max-width: 390px){
  #vaultCardOverlay .vault-overlay-panel{
    padding-top:calc(env(safe-area-inset-top, 0px) + 28px) !important;
  }
  #vaultCardOverlay .vault-lightbox-card{
    width:min(84vw, 286px) !important;
    max-width:min(84vw, 286px) !important;
  }
  #vaultCardOverlay .vault-lightbox-card .vault-face-front img{
    max-height:calc(100svh - env(safe-area-inset-top, 0px) - var(--bottom-nav-height, 96px) - env(safe-area-inset-bottom, 0px) - 202px) !important;
  }
}

/* v32: keep Crypt cards fully visible and preserve Arena lightbox */
.vault-grid .vault-card-flip{
  overflow:visible !important;
}
.vault-grid .vault-card-inner{
  min-height:420px !important;
}
.vault-grid .vault-face-front{
  display:grid !important;
  grid-template-rows:auto auto auto auto auto !important;
  align-content:start !important;
  justify-items:stretch !important;
}
.vault-grid .vault-face-front img{
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  max-height:none !important;
  aspect-ratio:2 / 3 !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 0 6px 0 !important;
  transform:none !important;
  align-self:start !important;
  justify-self:center !important;
  background:#0b0d13 !important;
}
.vault-grid .vault-face-front > *{
  transform:none !important;
}
.vault-grid .deck-name,
.vault-grid .deck-meta,
.vault-grid .vault-state,
.vault-grid .vault-flip-hint{
  position:relative !important;
  z-index:1 !important;
}

@media (max-width: 430px){
  .vault-grid .vault-card-inner{
    min-height:392px !important;
  }
}


/* v33: extra vertical breathing room for vault lightbox card so top edge never clips */
#vaultCardOverlay .vault-lightbox-card .vault-card-inner,
#vaultCardOverlay .vault-lightbox-card .vault-face{
  box-sizing:border-box !important;
  padding-top:18px !important;
  padding-bottom:12px !important;
}
#vaultCardOverlay .vault-lightbox-card .vault-face-front{
  padding-top:6px !important;
}
#vaultCardOverlay .vault-lightbox-card .vault-face-front img{
  object-fit:contain !important;
  object-position:center top !important;
  margin-top:0 !important;
}
@media (max-width: 430px){
  #vaultCardOverlay .vault-lightbox-card .vault-card-inner,
  #vaultCardOverlay .vault-lightbox-card .vault-face{
    padding-top:18px !important;
    padding-bottom:14px !important;
  }
  #vaultCardOverlay .vault-lightbox-card .vault-face-front{
    padding-top:8px !important;
  }
}


/* v34: fix vault overlay front image collapsing; keep full card visible */
#vaultCardOverlay .vault-overlay-panel{
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
#vaultCardOverlay .vault-lightbox{
  overflow:visible !important;
}
#vaultCardOverlay .vault-lightbox-card{
  width:min(84vw, 340px) !important;
  max-width:min(84vw, 340px) !important;
}
#vaultCardOverlay .vault-lightbox-card .vault-card-inner,
#vaultCardOverlay .vault-lightbox-card .vault-face{
  min-height:min(82svh, 760px) !important;
  height:min(82svh, 760px) !important;
}
#vaultCardOverlay .vault-lightbox-card .vault-face-front{
  display:grid !important;
  grid-template-rows:minmax(0, 1fr) auto auto auto auto !important;
  align-content:stretch !important;
  gap:8px !important;
}
#vaultCardOverlay .vault-lightbox-card .vault-face-front img{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 auto !important;
}
#vaultCardOverlay .vault-lightbox-card .vault-face-back{
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
@media (max-width: 430px){
  #vaultCardOverlay .vault-lightbox-card{
    width:min(88vw, 320px) !important;
    max-width:min(88vw, 320px) !important;
  }
  #vaultCardOverlay .vault-lightbox-card .vault-card-inner,
  #vaultCardOverlay .vault-lightbox-card .vault-face{
    min-height:min(78svh, 700px) !important;
    height:min(78svh, 700px) !important;
  }
}


/* v35: start button goes to Arena + iPhone battle chooser visible */
body:not(.screen-start-active) .battle-screen{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
}

@media (max-width: 430px){
  body:not(.screen-start-active) #app{
    height:calc(100svh - 138px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .battle-screen{
    min-height:calc(100svh - 138px) !important;
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    padding-bottom:calc(var(--bottom-nav-reserve) + 10px) !important;
  }

  .battle-main-grid,
  .battle-main-grid.has-duel-overlay{
    flex:0 0 auto !important;
    max-height:min(34svh, 300px) !important;
    min-height:min(34svh, 300px) !important;
    margin-bottom:8px !important;
  }

  .choose-panel,
  .choose-panel.has-result{
    flex:0 0 auto !important;
    display:grid !important;
    min-height:240px !important;
    height:auto !important;
    overflow:visible !important;
    padding-bottom:calc(var(--bottom-nav-reserve) + 8px) !important;
  }

  .chooser-card-frame,
  .chooser-header-row,
  .chooser-stats{
    min-height:0 !important;
    overflow:visible !important;
  }
}

@media (max-width: 430px) and (max-height: 920px){
  .battle-main-grid,
  .battle-main-grid.has-duel-overlay{
    max-height:min(30svh, 260px) !important;
    min-height:min(30svh, 260px) !important;
  }

  .battle-card-frame .battle-art,
  .battle-card-frame .battle-art img,
  .battle-card-frame.back-only .battle-art,
  .battle-card-frame.back-only .battle-art img{
    max-height:min(22svh, 190px) !important;
  }

  .choose-panel,
  .choose-panel.has-result{
    min-height:220px !important;
  }
}