/* Cinzel and Inter, served from this site (SIL Open Font License 1.1; see assets/fonts/). Variable fonts: one file
   per language subset covers every weight, and browsers only download the subsets a page actually uses. */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:500 700;font-display:swap;src:url('assets/fonts/cinzel-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:500 700;font-display:swap;src:url('assets/fonts/cinzel-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/inter-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/inter-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/inter-greek-ext.woff2') format('woff2');unicode-range:U+1F00-1FFF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/inter-greek.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/inter-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------- Tokens ---------- */
:root{
  --bg:#0b0f18;
  --ink:#e4d8c1;
  --ink-strong:#f0ddbf;
  --muted:#9d988d;
  --gold:#d8b879;
  --gold-light:#f0d7a5;
  --line:#6b593f55;
  --heart:#c7605f;
  --hud-h:58px;
  --ui:1;
  --rail-w:272px;
  --stage-pad:24px;
  font-family:Inter,system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none;
  color-scheme:dark;
}
*{box-sizing:border-box}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
h1,h2,h3{margin:0}
code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
body{
  margin:0;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% -10%,#26304a 0,transparent 48%),
    radial-gradient(circle at 0 65%,#1b2930 0,transparent 32%),
    radial-gradient(circle at 100% 85%,#292037 0,transparent 34%),
    var(--bg);
}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.17em;color:#b79a69}
.empty-copy{color:#8f8a80;font-size:12px;margin:0}
.hand-grid>.empty-copy{margin:auto}

/* ---------- Screen shell: HUD on top, stage + roster rail below ---------- */
.shell{height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:calc(var(--hud-h) * var(--ui)) minmax(0,1fr)}

/* Large screens: the HUD, headings, roster, labels, action bar and captions step up with --ui (via zoom on
   those pieces only, so nothing sized from the viewport is affected). Card sizes scale separately below. */
@media(min-width:1700px) and (min-height:900px){:root{--ui:1.15}}
@media(min-width:2300px) and (min-height:1200px){:root{--ui:1.35}}
@media(min-width:3000px) and (min-height:1600px){:root{--ui:1.7}}
.topbar>*,.hero,.zone-label,.panel-actions>*,.side-panel>*,.slot-label,.arena-side>small,.arena-versus,.front-marker,.battle-message,.result-banner,.xp-report,.finish-scene>*,.hand-grid>.empty-copy{zoom:var(--ui)}

.topbar{display:flex;align-items:center;gap:24px;padding:0 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0e131dee,#0c111acc)}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:linear-gradient(145deg,#5d4737,#1c2533);border:1px solid #b6975e;color:#e8c987;font-size:18px;box-shadow:0 0 16px #af7b3944}
.brand h1{font:700 17px Cinzel,Georgia,serif;letter-spacing:.03em;color:#f3dec0}

.phase-track{display:flex;align-items:center;margin:0 auto}
.phase-step{display:flex;align-items:center;gap:7px;color:#6e7885;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.phase-step b{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;border:1px solid #4c5260;font-size:9px}
.phase-step.active{color:#e2c18b}
.phase-step.active b{background:#86643f;border-color:#c99d5e;color:#fdf0d6;box-shadow:0 0 12px #c99d5e66}
.phase-track i{width:26px;height:1px;margin:0 10px;background:#44464c}

.run-stats{display:flex;align-items:baseline;gap:20px}
.run-stats>div{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.run-stats span{font-size:9px;font-weight:800;letter-spacing:.15em;color:#8a8273}
.run-stats strong{font-size:16px;color:#ead6b0}
.run-stats #lives-value{color:var(--heart);letter-spacing:.08em}
.run-stats .gold-stat strong{color:var(--gold-light);text-shadow:0 0 10px #e5b96a66}
.run-stats .gold-stat strong:before{content:'◈ ';color:var(--gold)}

.hud-buttons{display:flex;gap:6px}
.hud-button{display:grid;place-items:center;width:32px;height:32px;border:1px solid #6d5a40;border-radius:50%;background:#1a222e;color:var(--gold);font-size:15px;font-weight:800;line-height:1}
.hud-button:hover{border-color:#c49a61;color:var(--gold-light)}
.hud-button{position:relative}
.hud-button[hidden]{display:none}
.hud-button[aria-pressed="false"]{color:#6f6b66;border-color:#3d434c}
.hud-button[aria-pressed="false"]:after{content:'';position:absolute;left:7px;right:7px;top:50%;height:2px;border-radius:2px;background:#c7605f;transform:rotate(-40deg)}

main{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) calc(var(--rail-w) * var(--ui))}
body:not([data-phase="shop"]) main{grid-template-columns:minmax(0,1fr)}
body:not([data-phase="shop"]) .side-panel{display:none}

.stage{min-width:0;min-height:0;display:flex;flex-direction:column;padding-top:16px}
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 var(--stage-pad) 12px}
.hero-copy h2{font:700 25px/1.15 Cinzel,Georgia,serif;letter-spacing:.01em;color:var(--ink-strong);margin-top:4px;text-shadow:0 2px 12px #000}
.hero>p{max-width:420px;margin:0 0 3px;text-align:right;color:#9d9c92;font-size:12px;line-height:1.45}

.main-panel{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 var(--stage-pad);overflow-y:auto;overflow-x:hidden;scrollbar-color:#6e5a40 transparent}

/* Section labels replace the old boxed panel titles. */
.zone-label{display:flex;align-items:center;gap:12px;margin:6px 0 12px;color:#c9aa76;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.zone-label em{font-style:normal;font-weight:600;letter-spacing:.04em;text-transform:none;color:#8d887e}
.zone-label:after{content:'';order:1;flex:1;height:1px;background:linear-gradient(90deg,#5a513e,transparent)}

/* Bottom action bar, pinned to the stage floor. */
.panel-actions{position:sticky;bottom:0;z-index:6;display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:auto calc(-1 * var(--stage-pad)) 0;padding:14px var(--stage-pad) 16px;border-top:1px solid var(--line);background:linear-gradient(180deg,#0b0f1899,#0b0f18e6 55%);backdrop-filter:blur(6px)}
.action-help{margin-right:auto;min-width:0}
.action-help strong,.action-help span{display:block}
.action-help strong{font-size:12px;color:#d8c5a5}
.action-help span{font-size:11px;color:#8c9497;margin-top:3px}

/* ---------- Buttons ---------- */
.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:40px;padding:10px 18px;border-radius:10px;font-size:12px;font-weight:800;white-space:nowrap}
.primary-button,.card-action{background:linear-gradient(180deg,#b2874e,#7c5534);border:1px solid #d1a86a;color:#fff0d0;box-shadow:0 3px 0 #513c2e}
.primary-button:hover:not(:disabled),.card-action:hover:not(:disabled){background:linear-gradient(180deg,#c59a5c,#936841)}
.secondary-button{background:#1f2835;border:1px solid #6d5a40;color:#e3c495}
.secondary-button:hover:not(:disabled){background:#2b3646}
.card-action{width:100%;border-radius:8px;padding:8px 6px;font-size:11px;font-weight:800;letter-spacing:.02em}
.text-button{border:0;background:transparent;color:var(--gold);font-size:12px;font-weight:800;padding:4px 0;white-space:nowrap}
.text-button:hover{color:var(--gold-light)}
.danger{color:#c6857b}

/* ---------- Roster rail ---------- */
.side-panel{min-height:0;display:flex;flex-direction:column;padding:16px 14px 12px;border-left:1px solid var(--line);background:linear-gradient(180deg,#0d121bc4,#0b1018d9);backdrop-filter:blur(10px)}
.rail-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.rail-head h3{font:700 19px Cinzel,Georgia,serif;color:#ead6b0;white-space:nowrap}
#deck-count{font:600 11px Inter,system-ui,sans-serif;color:var(--muted);margin-left:6px}
.side-hint{margin:6px 0 10px;font-size:11px;line-height:1.45;color:#8f9090}
.deck-list{flex:1;min-height:0;display:flex;flex-direction:column;gap:2px;margin:0 -6px;overflow:auto;scrollbar-color:#6e5a40 transparent}
.deck-row{display:flex;align-items:center;gap:10px;min-width:0;padding:6px;border:1px solid transparent;border-radius:9px;cursor:help;transition:background .15s,border-color .15s}
.deck-row:hover,.deck-row:focus-visible,.deck-row:focus-within{background:#ffffff08;border-color:#c49a6150;outline:none}
.deck-row.combine-selected{background:#3c354088;border-color:#cfa66f}
.deck-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;overflow:hidden;border:1px solid #ffffff1c;border-radius:7px;background:linear-gradient(135deg,var(--art-color),#111a26);color:#f4dda8;font:700 22px Cinzel,Georgia,serif}
.roster-info{min-width:0;flex:1}
.roster-info strong{display:block;font-size:12px;color:#ead7bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster-info small{display:block;margin-top:1px;font-size:10px;color:#a29f97;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster-xp-track{height:3px;margin-top:5px;border-radius:3px;background:#1a2331;overflow:hidden}
.roster-xp-track i{display:block;height:100%;background:linear-gradient(90deg,#82609c,#dbb775)}
.roster-actions{display:flex;flex:none;flex-direction:column;gap:4px;width:58px}
.roster-actions button{width:100%;min-height:22px;border-radius:6px;font-size:10px;font-weight:800}
.combine-button{border:1px solid #98754b;background:#4a3c31;color:#f6dcaa}
.combine-button:hover,.combine-button:focus-visible{background:#765638;border-color:#d8a767}
.combine-button.selected{background:#3a4a50;border-color:#96b7b6;color:#dcebea}
.sell-button{border:1px solid #4c4a50;background:#2a2a31;color:#dfbd83}
.sell-button:hover{border-color:#8a7a5c}

/* ---------- Cards ----------
   Every card is 5:7 and sized only by --card-w. All internals use em,
   scaled from the card's own font-size, so proportions never change. */
.card3d{--frame-edge:#a88655;--frame-light:#e3c48d;--frame-deep:#48382d;--frame-top:#303644;--frame-bottom:#202633;--frame-glow:#a8865533;--frame-radius:.9em /* one corner curve for every faction */}
.game-card{
  position:relative;flex:none;display:flex;flex-direction:column;
  width:var(--card-w,190px);aspect-ratio:5/7;
  font-size:calc(var(--card-w,190px) / 12.5);
  padding:.4em;overflow:hidden;
  container-type:inline-size;
  border:2px solid var(--frame-edge);border-radius:var(--frame-radius);
  background:linear-gradient(180deg,#ffffff0e,transparent 28%),linear-gradient(155deg,var(--frame-top),#1a2330 57%,var(--frame-bottom));
  box-shadow:0 .3em 0 var(--frame-deep),0 .8em 1.6em #0008,0 0 1.2em var(--frame-glow);
  backface-visibility:hidden;
  transition:box-shadow .15s;
}
.game-card:before{content:'';position:absolute;inset:.28em;z-index:2;pointer-events:none;border:1px solid var(--frame-light);border-radius:calc(var(--frame-radius) * .75);opacity:.4}
/* Faction corner ornaments sit under the card's text (content is z-index 2), so they never obscure it. */
.game-card:after{content:'';position:absolute;inset:1px;z-index:1;pointer-events:none;border-radius:inherit}

.card-top{display:flex;align-items:center;gap:.4em;height:2.5em;flex:none;padding:0 .35em;font-size:.62em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--frame-light);white-space:nowrap}
.card-top>span:first-child{overflow:hidden;text-overflow:ellipsis}
.tier{display:grid;place-items:center;flex:none;width:1.9em;height:1.9em;border:1px solid var(--frame-edge);border-radius:50%;background:var(--frame-deep);color:var(--frame-light);font-size:.92em}
.faction-crest{display:none;margin-left:auto;flex:none;width:1.9em;height:1.9em;place-items:center;border:1px solid var(--frame-edge);border-radius:50%;background:#0b111a88;color:var(--frame-light);line-height:1;text-shadow:0 0 .6em var(--frame-glow)}

.card-art{position:relative;flex:none;aspect-ratio:1.75;display:grid;place-items:center;overflow:hidden;border:1px solid var(--frame-edge);border-radius:.55em;background:radial-gradient(circle at 50% 39%,var(--art-color),var(--art-shade) 72%);box-shadow:inset 0 0 0 2px #080d17aa,inset 0 0 2em #0509129e}
.card-art:before,.card-art:after{content:'';position:absolute;inset:0}
.card-art:before{opacity:.15}
.card-art:after{inset:auto -20% -45% -20%;height:80%;border-radius:50%;background:#040b17;opacity:.42}
.pattern-sunburst:before{background:repeating-conic-gradient(from 0deg at 50% 55%,#fff8d6 0deg 12deg,transparent 12deg 28deg)}
.pattern-rings:before{background:repeating-radial-gradient(circle at 50% 55%,transparent 0 1.2em,#faffde 1.25em 1.45em,transparent 1.5em 2.3em)}
.pattern-waves:before{background:repeating-radial-gradient(ellipse at 30% 120%,transparent 0 1em,#dcffff 1.1em 1.35em,transparent 1.4em 2em)}
.pattern-stars:before{background-image:radial-gradient(#fff .13em,transparent .2em);background-size:1.6em 1.75em}
.card-art.has-portrait:before{display:none}
.card-art.has-portrait:after{z-index:2;inset:0;height:auto;border-radius:0;background:linear-gradient(180deg,transparent 68%,#0b111f88);opacity:1}
.art-image{position:relative;z-index:1;max-width:90%;max-height:94%;object-fit:contain}
.card-art.has-portrait .art-image{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center 35%}
.art-orbit{position:absolute;width:5.2em;height:5.2em;border:1px solid #e9d7a666;border-radius:50%;transform:rotate(-20deg) scaleX(1.25);box-shadow:0 0 1.6em #e5c68844}
.art-symbol{position:relative;z-index:1;font:700 4.4em/1 Cinzel,Georgia,serif;color:#ffdfac;text-shadow:0 0 .2em #ffbb5d,0 0 .4em #ffe19b88}
.art-star{position:absolute;right:.7em;top:.55em;color:#e7c27b;font-size:1em}
.card-level{position:absolute;z-index:5;top:.8em;left:.8em;padding:.25em .5em;border:1px solid var(--frame-edge);border-radius:.4em;background:#131b26cc;color:var(--frame-light);font:800 .56em Inter,system-ui,sans-serif;letter-spacing:.07em}

.card-info{flex:1;min-height:0;overflow:hidden;padding:.5em .3em .15em}
.card-name{font:700 1.08em/1.15 Cinzel,Georgia,serif;letter-spacing:.01em;color:#f1ddba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-info p{margin:.4em 0 0;font-size:max(.72em,8px);font-weight:500;line-height:1.35;color:#bdb9af}
.card-info .card-flavor{font-family:Georgia,serif;font-style:italic;color:#a09a8f}

.card-bottom{display:flex;justify-content:space-between;gap:.3em;flex:none;padding:0 .15em .1em}
.stat{display:inline-flex;align-items:center;justify-content:center;gap:.2em;min-width:2.5em;padding:.2em .5em;border-radius:.45em;background:#3b4250;color:#e4bd85;font-size:.82em;font-weight:800;white-space:nowrap}
.stat.health{background:#49363d;color:#e19891}
.stat small{font-size:.75em}

.member-exp{flex:none;margin:.35em .15em 0;color:var(--frame-light)}
.member-exp>div{display:flex;align-items:center;justify-content:space-between;gap:.3em;font:800 .56em Inter,system-ui,sans-serif;letter-spacing:.05em}
.member-exp strong{color:var(--frame-light);white-space:nowrap}
.member-exp>i{display:block;height:.28em;margin-top:.25em;border-radius:.2em;background:#111b28;overflow:hidden}
.member-exp>i>b{display:block;height:100%;background:linear-gradient(90deg,var(--frame-edge),var(--frame-light))}

/* Tiny cards (battle on narrow screens) drop the ability text to stay legible. */
@container (max-width:104px){
  .card-info p{display:none}
  .card-name{font-size:1.2em}
  .card-top>span:first-child{visibility:hidden}
}

/* Faction frames */
.card3d.faction-infernal{--frame-edge:#c9714e;--frame-light:#f3ba84;--frame-deep:#65382b;--frame-top:#422d2c;--frame-bottom:#321f27;--frame-glow:#b94d2d55}
.faction-infernal .game-card:after{background:linear-gradient(135deg,#ed956666 0 .7em,transparent .75em) top left/1.5em 1.5em no-repeat,linear-gradient(225deg,#ed956666 0 .7em,transparent .75em) top right/1.5em 1.5em no-repeat,linear-gradient(45deg,#ed956666 0 .7em,transparent .75em) bottom left/1.5em 1.5em no-repeat,linear-gradient(315deg,#ed956666 0 .7em,transparent .75em) bottom right/1.5em 1.5em no-repeat}
.faction-infernal .faction-crest{display:grid;border-radius:3px;transform:rotate(45deg)}
.faction-infernal .faction-crest:before{content:"▲";transform:rotate(-45deg);font-size:.8em}
.card3d.faction-verdant{--frame-edge:#89aa72;--frame-light:#c9d8a5;--frame-deep:#405942;--frame-top:#304138;--frame-bottom:#23372f;--frame-glow:#78a06e44}
.faction-verdant .game-card:after{background:radial-gradient(circle at 0 0,#d4e5ab99 0 .32em,transparent .38em) top left/2em 2em no-repeat,radial-gradient(circle at 100% 0,#d4e5ab99 0 .32em,transparent .38em) top right/2em 2em no-repeat,radial-gradient(circle at 0 100%,#d4e5ab99 0 .32em,transparent .38em) bottom left/2em 2em no-repeat,radial-gradient(circle at 100% 100%,#d4e5ab99 0 .32em,transparent .38em) bottom right/2em 2em no-repeat}
.faction-verdant .faction-crest{display:grid}
.faction-verdant .faction-crest:before{content:"❧";font-size:1.1em}
.card3d.faction-astral{--frame-edge:#a596d2;--frame-light:#e1d6ff;--frame-deep:#5b4d83;--frame-top:#39344f;--frame-bottom:#2a2947;--frame-glow:#927bc466}
.faction-astral .game-card:before{border-style:double;border-width:2px;opacity:.6}
.faction-astral .game-card:after{background:radial-gradient(circle,#e7ddffd9 0 .07em,transparent .11em) .08em .08em/.24em .24em no-repeat,radial-gradient(circle,#e7ddffd9 0 .07em,transparent .11em) calc(100% - .08em) .08em/.24em .24em no-repeat,radial-gradient(circle,#e7ddffd9 0 .07em,transparent .11em) .08em calc(100% - .08em)/.24em .24em no-repeat,radial-gradient(circle,#e7ddffd9 0 .07em,transparent .11em) calc(100% - .08em) calc(100% - .08em)/.24em .24em no-repeat}
.faction-astral .faction-crest{display:grid}
.faction-astral .faction-crest:before{content:"✦";font-size:1em}
.card3d.faction-abyssal{--frame-edge:#6caab1;--frame-light:#bde2df;--frame-deep:#28606b;--frame-top:#2a4850;--frame-bottom:#1e3845;--frame-glow:#5caab455}
.faction-abyssal .game-card{border-width:3px}
.faction-abyssal .game-card:after{background:radial-gradient(ellipse at 50% -.5em,transparent .9em,#9bd0cf88 .95em 1.05em,transparent 1.1em) top/2.2em .8em repeat-x,radial-gradient(ellipse at 50% 1.3em,transparent .9em,#9bd0cf88 .95em 1.05em,transparent 1.1em) bottom/2.2em .8em repeat-x}
.faction-abyssal .faction-crest{display:grid;border-radius:40% 40% 55% 55%}
.faction-abyssal .faction-crest:before{content:"≈";font-size:1.25em}
.card3d.faction-tempest{--frame-edge:#8daacb;--frame-light:#eee0ad;--frame-deep:#38516a;--frame-top:#31465b;--frame-bottom:#24364b;--frame-glow:#749fc366}
.faction-tempest .game-card:after{background:repeating-linear-gradient(135deg,#e5dbad99 0 .2em,transparent .2em .5em) top left/1.3em .6em no-repeat,repeating-linear-gradient(135deg,#e5dbad99 0 .2em,transparent .2em .5em) bottom right/1.3em .6em no-repeat}
.faction-tempest .faction-crest{display:grid;border-radius:.25em}
.faction-tempest .faction-crest:before{content:"ϟ";font-size:1.2em}

/* ---------- 3D card body ----------
   .card3d (perspective) > .card-tilt (pointer tilt / flip) > slabs + back + face.
   Slabs stacked behind the face give the card real thickness when it turns. */
.card3d{--rx:0deg;--ry:0deg;--px:0;--py:0;--thick:calc(var(--card-w,190px) * .03);position:relative;flex:none;width:var(--card-w,190px);perspective:calc(var(--card-w,190px) * 5)}
.card-tilt{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card3d.tilting .card-tilt{transform:translateZ(calc(var(--card-w,190px) * .07)) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .1s linear}
.card-slab,.card-back{position:absolute;inset:0;font-size:calc(var(--card-w,190px) / 12.5);border-radius:var(--frame-radius)}
.card-slab{background:linear-gradient(90deg,var(--frame-deep),var(--frame-edge) 50%,var(--frame-deep));transform:translateZ(calc(var(--thick) * var(--slab) / -4))}
.card-back{display:grid;place-items:center;border:2px solid #a88655;background:repeating-linear-gradient(45deg,#ffffff07 0 .25em,transparent .25em .8em),radial-gradient(circle at 50% 45%,#3b2f4c,#141a26 72%);box-shadow:inset 0 0 0 .35em #0b0f18,inset 0 0 0 calc(.35em + 1px) #b6975e99;transform:translateZ(calc(var(--thick) * -1)) rotateY(180deg);backface-visibility:hidden}
.card-back span{display:grid;place-items:center;width:1.9em;height:1.9em;border:1px solid #b6975e;border-radius:50%;color:#e8c987;font-size:2em;text-shadow:0 0 .4em #e5b96a;box-shadow:0 0 1em #b8874666}

.card-glare{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;opacity:0;background:radial-gradient(circle at calc(50% + var(--px) * 50%) calc(50% + var(--py) * 50%),#fffaf0aa,transparent 58%);mix-blend-mode:overlay;transition:opacity .35s}
.card3d.tilting .card-glare{opacity:1}
.card-info,.card-bottom{transform:translate(calc(var(--px) * .1em),calc(var(--py) * .1em));transition:transform .5s cubic-bezier(.2,.8,.2,1)}

/* ---------- Art layers ----------
   The background, character and foreground shift by their --depth (-1 far .. 1 near) as the card tilts. */
/* Vertical travel is half the horizontal: the foreground is a ground strip, and bobbing it up and down reads as loose. */
.art-layer{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transform:translate(calc(var(--px) * var(--depth,0) * .5em + var(--layer-x,0%)),calc(var(--py) * var(--depth,0) * .25em + var(--layer-y,0%))) scale(var(--layer-scale,1.12));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
/* Pinned to the layer box: as a grid item, height:100% would not resolve and the image grew from its width. */
.image-layer img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:var(--fit,cover)}
.fx-rays{background:repeating-conic-gradient(from -32deg at 50% -18%,#fff4d04d 0deg 4deg,transparent 4deg 13deg);mask-image:linear-gradient(180deg,#000 10%,transparent 85%);mix-blend-mode:screen;animation:raysPulse 5s ease-in-out infinite alternate}
.fx-fog{background:radial-gradient(ellipse 55% 32% at 25% 88%,#e6ecf866,transparent 70%),radial-gradient(ellipse 50% 28% at 72% 96%,#e6ecf855,transparent 70%),radial-gradient(ellipse 40% 22% at 50% 78%,#e6ecf833,transparent 70%);background-size:160% 100%;mix-blend-mode:screen;animation:fogRoll 10s ease-in-out infinite alternate}
.fx-caustics{background:radial-gradient(circle at 30% 40%,transparent 36%,#bff4ff40 41%,transparent 47%) 0 0/2.3em 1.9em,radial-gradient(circle at 70% 60%,transparent 34%,#bff4ff33 40%,transparent 46%) 0 0/1.8em 2.2em;mix-blend-mode:screen;animation:causticsShift 8s linear infinite}
.fx-glow{background:radial-gradient(circle at 50% 42%,var(--art-color) 0,transparent 62%);mix-blend-mode:screen;animation:glowPulse 3.2s ease-in-out infinite alternate}
.fx-vignette{background:radial-gradient(ellipse at 50% 42%,transparent 42%,#05070dd9 100%)}
.card-popout{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;overflow:hidden}
.game-card>.card-art{z-index:1}
.game-card>.card-top,.game-card>.card-info,.game-card>.card-bottom,.game-card>.member-exp{position:relative;z-index:2}

/* ---------- Particles ---------- */
.card-particles{position:absolute;inset:-6%;z-index:3;pointer-events:none;transform:translate(calc(var(--px) * .35em),calc(var(--py) * .35em));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card-particles i{position:absolute;left:var(--x);top:var(--y);width:calc(var(--size) * .22em);aspect-ratio:1;border-radius:50%;opacity:0;animation:var(--motion) var(--dur) linear var(--delay) infinite}
.particles-embers i{--motion:particleRise;top:auto;bottom:0;background:radial-gradient(circle,#fff3c4,#ff9a3a 45%,transparent 72%);box-shadow:0 0 .3em #ff8a3a}
.particles-sparkles i{--motion:particleTwinkle;width:calc(var(--size) * .5em);border-radius:0;background:#fff8dc;clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%);filter:drop-shadow(0 0 .15em #fff)}
.particles-snow i{--motion:particleFall;top:0;background:#f4f8ff;box-shadow:0 0 .2em #fff}
.particles-bubbles i{--motion:particleBubble;top:auto;bottom:0;width:calc(var(--size) * .42em);background:radial-gradient(circle at 34% 30%,#ffffffd9 0 12%,transparent 17%),radial-gradient(circle,transparent 56%,#bfefffb3 62%,transparent 72%)}
.particles-motes i{--motion:particleDrift;width:calc(var(--size) * .32em);background:radial-gradient(circle,#fffbe0,#e8ffb0 40%,transparent 70%)}
.particles-petals i{--motion:particlePetal;top:0;width:calc(var(--size) * .36em);aspect-ratio:1.6;border-radius:80% 0 80% 0;background:linear-gradient(135deg,#ffd6e6,#e58db3)}
.particles-sparks i{--motion:particleSpark;width:.07em;height:calc(var(--size) * .75em);aspect-ratio:auto;border-radius:.05em;background:linear-gradient(#fff,#9fd4ff);box-shadow:0 0 .25em #8fc8ff}
.battle-card .card-particles{display:none}
/* Faction particles are a quiet ambience at level 1 and build with each level; legendary gold motes stay bright. */
.lv-1 .card-particles{opacity:.4}
.lv-2 .card-particles{opacity:.55}
.lv-3 .card-particles{opacity:.75}
.lv-1 .card-particles i,.lv-2 .card-particles i{scale:.8}
.card-particles.gilded{opacity:1}
.card3d.tilting .art-layer,.card3d.tilting .card-particles,.card3d.tilting .card-info,.card3d.tilting .card-bottom{transition:transform .1s linear}

/* ---------- Foils ----------
   Art foils sit over the art window, frame foils sit behind the card's content so only the frame shines,
   and card foils cover everything. Each brightens and follows the pointer while the card tilts. */
:root{--rainbow:linear-gradient(115deg,#ff6ec4,#ffd86e 14%,#6effb1 28%,#6ec8ff 42%,#c46eff 56%,#ff6ec4 70%,#ffd86e 84%,#6effb1);--rainbow-soft:linear-gradient(115deg,#ff6ec440,#ffd86e40 14%,#6effb12e 28%,#6ec8ff40 42%,#c46eff40 56%,#ff6ec440 70%,#ffd86e40 84%,#6effb12e)}
.card-foil{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:var(--foil-rest,.28);background-size:300% 300%;background-position:calc(50% + var(--px) * 45%) calc(50% + var(--py) * 45%);mix-blend-mode:color-dodge;transition:opacity .35s;animation:foilDrift 9s linear infinite alternate}
.card3d.tilting .card-foil{opacity:var(--foil-lit,.62);animation:none}
.card-art>.card-foil{z-index:3}
.game-card>.card-foil{z-index:3}
.game-card>.card-foil-frame{z-index:0}
.foil .game-card{box-shadow:0 .3em 0 var(--frame-deep),0 .8em 1.6em #0008,0 0 1.3em #c9a2ff55}
/* Level 3 holo on the character only: masked to the character's outline and moving with it. */
.character-foil{-webkit-mask-size:var(--mask-size,contain);mask-size:var(--mask-size,contain);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.card-foil.foil-holo.character-foil{--foil-rest:.22;--foil-lit:.55}
.card-foil.foil-holo{--foil-rest:.07;--foil-lit:.55;background-image:linear-gradient(115deg,transparent 30%,#ffffff70 46%,transparent 62%),var(--rainbow)}
/* Full-card holo: the holo rainbow and moving highlight across the whole card, frame and text included. */
.card-foil.foil-full{--foil-rest:.16;--foil-lit:.55;background-image:linear-gradient(115deg,transparent 28%,#ffffff66 45%,transparent 60%),var(--rainbow)}
.card-foil.foil-cosmos{--foil-rest:.55;--foil-lit:.9;background-image:radial-gradient(#fff .05em,transparent .09em),radial-gradient(#fff6d8 .035em,transparent .07em),radial-gradient(#dff4ff .06em,transparent .1em),var(--rainbow-soft);background-size:1.3em 1.5em,.8em .9em,2.3em 2.1em,300% 300%;background-position:calc(var(--px) * .6em) calc(var(--py) * .6em),calc(var(--px) * -.4em) calc(var(--py) * -.4em),calc(.7em + var(--px) * .9em) calc(.4em + var(--py) * .9em),calc(50% + var(--px) * 45%) calc(50% + var(--py) * 45%)}
.card-foil.foil-cracked-ice{--foil-rest:.22;--foil-lit:.66;background-image:repeating-linear-gradient(33deg,transparent 0 .85em,#ffffff5c .85em .95em),repeating-linear-gradient(-58deg,transparent 0 1.25em,#ffffff4d 1.25em 1.33em),repeating-linear-gradient(98deg,transparent 0 1.6em,#ffffff40 1.6em 1.66em),var(--rainbow);background-size:auto,auto,auto,300% 300%}
.card-foil.foil-reverse{--foil-rest:.3;--foil-lit:.85;background-image:linear-gradient(115deg,transparent 30%,#ffffff5c 46%,transparent 62%),var(--rainbow)}
.card-foil-frame.foil-gold{--foil-rest:.36;--foil-lit:.7;background-image:linear-gradient(115deg,#6b4a12 0%,#f5d27a 20%,#fff3c4 30%,#c9982e 45%,#6b4a12 60%,#f5d27a 80%,#fff3c4 90%);background-size:250% 250%;mix-blend-mode:hard-light}
.foil-gold-art{--foil-rest:.55;--foil-lit:1;background-image:linear-gradient(115deg,transparent 35%,#ffe7a380 48%,transparent 60%),linear-gradient(#d9a84022,#d9a84022);mix-blend-mode:overlay}
.card3d.foil-gold{--frame-edge:#d4a843;--frame-light:#ffe7a3;--frame-deep:#6b4d17;--frame-glow:#e8c46a66}
.foil-gold .game-card{box-shadow:0 .3em 0 var(--frame-deep),0 .8em 1.6em #0008,0 0 1.5em #e8c46a77}
.card-foil.foil-rainbow{--foil-rest:.55;--foil-lit:.85;background-image:linear-gradient(125deg,#ff9a9a,#ffe29a,#b6ff9a,#9ae6ff,#c89aff,#ff9ad8,#ff9a9a);background-size:250% 250%;mix-blend-mode:soft-light}
.card-foil.foil-rainbow:after{content:'';position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(#fff .04em,transparent .08em),radial-gradient(#fff .03em,transparent .06em);background-size:1em 1.2em,.7em .8em;background-position:calc(var(--px) * .5em) calc(var(--py) * .5em),calc(var(--px) * -.3em) .35em;mix-blend-mode:overlay;opacity:.8}
.card-foil.foil-etched{--foil-rest:.2;--foil-lit:.5;background-image:repeating-linear-gradient(135deg,#ffffff4d 0 1px,transparent 1px 3px),var(--rainbow);background-size:auto,300% 300%}
.card-foil.foil-sparkle{--foil-rest:.5;--foil-lit:.95;background-image:radial-gradient(#fff .035em,transparent .07em),radial-gradient(#ffeecc .045em,transparent .09em),radial-gradient(#dff4ff .03em,transparent .06em);background-size:2.1em 2.5em,3.1em 2.7em,1.7em 1.9em;background-position:0 0,1.1em 1.3em,.6em .9em;animation:glitter 1.4s steps(2) infinite}
.card3d.tilting .card-foil.foil-sparkle{background-position:calc(var(--px) * .5em) calc(var(--py) * .5em),calc(1.1em - var(--px) * .4em) 1.3em,.6em calc(.9em + var(--py) * .4em);animation:glitter 1.4s steps(2) infinite}

/* ---------- Ascension: cards look grander as they level up ----------
   LV2 tempered, LV3 empowered (circling border light), LV4 exalted (aura, backlight), LV5 legendary (gold). */
@property --sweep{syntax:'<angle>';inherits:false;initial-value:0deg}
.lv-2 .game-card:before,.lv-3 .game-card:before{opacity:.75}
.lv-2 .game-card{box-shadow:0 .3em 0 var(--frame-deep),0 .8em 1.6em #0008,0 0 0 1px #dfe6f055,0 0 1.2em var(--frame-glow)}
.lv-2 .card-level{border-color:#cfd6e0;color:#eef2f8}
.lv-3 .card-level,.lv-4 .card-level{border-color:var(--frame-light);box-shadow:0 0 .5em var(--frame-glow)}
.lv-4 .card-level{background:linear-gradient(135deg,var(--frame-deep),#131b26);box-shadow:0 0 .7em var(--frame-edge)}
.lv-5 .card-level{background:linear-gradient(135deg,#7a5418,#f5d27a 50%,#7a5418);border-color:#ffe7a3;color:#2a1a05;box-shadow:0 0 .8em #f5d27a99}
.card-ring{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;padding:.13em;background:conic-gradient(from var(--sweep),transparent 0 64%,var(--frame-light) 78%,#fff 81%,var(--frame-light) 84%,transparent 96%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;mix-blend-mode:screen;opacity:.75;animation:ringSweep 4.5s linear infinite}
.lv-4 .card-ring{opacity:.95;animation-duration:3.6s}
/* LV4 exalted: a second light circles the other way, and the frame glows from within. */
.card-ring.counter{padding:.1em;background:conic-gradient(from var(--sweep),transparent 0 70%,#fff 80%,var(--frame-light) 84%,transparent 94%);animation-direction:reverse;animation-duration:5.2s;opacity:.7}
.lv-4 .game-card{border-color:var(--frame-light);box-shadow:0 .3em 0 var(--frame-deep),0 .8em 1.6em #0008,0 0 1.6em var(--frame-glow),inset 0 0 1.1em var(--frame-glow),inset 0 0 0 1px var(--frame-light)}
.lv-5 .card-ring{opacity:1;padding:.16em;background:conic-gradient(from var(--sweep),transparent 0 30%,#ffe7a3 42%,#fff 46%,#ffe7a3 50%,transparent 62%,transparent 80%,#ffe7a3 90%,#fff 93%,#ffe7a3 96%,transparent 100%);animation-duration:2.8s}
.card-aura{position:absolute;inset:3%;font-size:calc(var(--card-w,190px) / 12.5);border-radius:var(--frame-radius);pointer-events:none;background:var(--frame-edge);filter:blur(.9em);opacity:.7;transform:translateZ(calc(var(--thick) * -1.6));animation:auraPulse 2.8s ease-in-out infinite alternate}
.lv-5 .card-aura{inset:0;background:linear-gradient(135deg,#f5d27a,#e8a94a,#fff3c4,#e8a94a);filter:blur(1.1em)}
.lv-5 .card-info p{color:#f3e6c8;text-shadow:0 1px 2px #000c}
.lv-5 .card-name{filter:drop-shadow(0 1px 1px #000e) drop-shadow(0 0 .3em #0008);background:linear-gradient(90deg,#fff3c4,#f5d27a 35%,#fff8e0 50%,#f5d27a 65%,#d9a840);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nameShine 4s linear infinite}
.card-particles.gilded i{background:radial-gradient(circle,#fff8e0,#f5d27a 45%,transparent 72%);box-shadow:0 0 .3em #f5d27a}
.battle-card .card-ring{opacity:.55}

/* Dealt and restocked cards flip in from their backs. */
.card3d.flip-in .card-tilt{animation:cardFlip .75s cubic-bezier(.25,.8,.3,1) var(--flip-delay,0ms) backwards}

/* ---------- Faction frames: crafted pass (generated by tools/build-faction-frames.py) ---------- */
/* Each faction frame: a textured, lit panel; ornate corners drawn beneath the text; a bevelled inner border;
   an engraved name plate; a metal bezel round the art; coin tier, enamelled crest and gem stat badges. */
.game-card{border-width:max(2px,.11em)}
.faction-abyssal .game-card{border-width:max(3px,.15em)}
.game-card:before{inset:.26em;opacity:.55;box-shadow:inset 0 0 0 max(1px,.05em) #0007,0 0 0 max(1px,.05em) #0006}
.game-card .card-top{padding:0 1.25em;box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--frame-edge) 45%,transparent)}
/* Corner ornaments sit under the art, plaque, badges and text: they frame those pieces instead of crossing them. */
.game-card:after{z-index:0}
.game-card .tier{background:radial-gradient(circle at 35% 30%,var(--frame-light),var(--frame-edge) 48%,var(--frame-deep));border-color:var(--frame-light);color:#1d130f;font-weight:900;box-shadow:0 0 .35em var(--frame-glow),inset 0 -.08em .1em #0005}
.game-card .faction-crest{background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--frame-deep) 85%,#000),#070b12);box-shadow:inset 0 0 0 1px #0009,0 0 .4em var(--frame-glow)}
.game-card .card-art{box-shadow:0 0 0 max(1px,.05em) var(--frame-deep),0 0 0 max(2px,.13em) color-mix(in srgb,var(--frame-edge) 80%,transparent),0 .12em .35em #000b,inset 0 0 0 1px #0009,inset 0 0 1.6em #05091299}
.card-name{position:relative;margin:0 -.3em;padding:.12em .3em .14em;text-shadow:0 1px 2px #000b}
.card-name:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--frame-deep) 75%,transparent) 14%,color-mix(in srgb,var(--frame-deep) 75%,transparent) 86%,transparent);border-block:1px solid transparent;border-image:linear-gradient(90deg,transparent,var(--frame-edge) 16%,var(--frame-light) 50%,var(--frame-edge) 84%,transparent) 1}
.card-info{isolation:isolate}
/* Legendary gradient-text names: text-shadow would paint over the gold, and a filter would pull the plate in front
   of the text (filters create a stacking context), so they rely on the dark plate for contrast instead. */
.lv-5 .card-name{text-shadow:none;filter:none}
.lv-5 .card-name:before{background:linear-gradient(90deg,transparent,#140d05e6 12%,#140d05e6 88%,transparent)}
/* Stat sockets: attack and health are medallions set into the bottom corners of the frame, ringed in the faction's
   metal; EXP sits centred between them, so the bottom of the card is one band built for the stats. */
.game-card .card-bottom{position:relative;display:flex;justify-content:space-between;align-items:flex-end;flex:none;height:2.3em;margin:.15em -.18em -.18em;padding:0;transform:none}
.stat{position:relative;display:grid;place-items:center;min-width:2.3em;height:2.3em;padding:0 .3em;border:max(1px,.07em) solid var(--frame-light);border-radius:1.15em;font-size:1em;color:#f6e3bb;background:radial-gradient(circle at 50% 30%,#626d83,#2a303d 62%,#161a22);box-shadow:0 0 0 max(1px,.09em) var(--frame-deep),0 0 0 max(2px,.17em) var(--frame-edge),0 .12em .35em #000b,inset 0 .14em .25em #ffffff26,inset 0 -.2em .35em #000a}
.stat.health{color:#ffe1da;background:radial-gradient(circle at 50% 30%,#d4566b,#7a2034 58%,#3a0d17)}
.stat i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:1.55em;line-height:1;opacity:.2}
.stat b{position:relative;font:700 1.2em/1 Cinzel,Georgia,serif;text-shadow:0 .06em .12em #000c;white-space:nowrap}
.stat b small{font-size:.62em;opacity:.8}
.stat-shield{position:absolute;top:-.55em;right:-.3em;padding:.1em .3em;border:max(1px,.06em) solid #cfe9ff;border-radius:.6em;background:linear-gradient(#5b86b0,#2b4a6b);color:#eef7ff;font:800 .62em/1.1 Inter,system-ui,sans-serif;font-style:normal;box-shadow:0 .1em .2em #0009}
.game-card>.member-exp{position:absolute;left:3.1em;right:3.1em;bottom:.62em;margin:0;z-index:2}
.card-bottom:before{content:'';position:absolute;left:2.6em;right:2.6em;bottom:.2em;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--frame-edge) 60%,transparent),transparent)}

.faction-infernal .game-card{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M0 20L14 26L22 18L38 30L52 22M22 18L26 4M38 30L36 48L50 60L70 54M50 60L56 80M70 54L80 58M60 0L64 12L80 16M8 60L18 52L16 42' fill='none' stroke='%23ff7a3a' stroke-width='.7' opacity='.22'/%3E%3C/svg%3E") 0 0/5.5em 5.5em,radial-gradient(ellipse 90% 45% at 50% 0%,#ffffff14,transparent 70%),linear-gradient(155deg,var(--frame-top),#161d29 57%,var(--frame-bottom))}
.faction-infernal .game-card:after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform=''%3E%3Cpath d='M3 3H31L25 7.5H10Q7.5 7.5 7.5 10V25L3 31Z' fill='%234a2a22' stroke='%23f3ba84' stroke-width='1.1'/%3E%3Cpath d='M31 3L38 1.2L34 5.6ZM3 31L1.2 38L5.6 34Z' fill='%23f3ba84'/%3E%3Cpath d='M11 13.5L13.5 11L16 13.5L13.5 16Z' fill='%23c9714e' stroke='%23f3ba84' stroke-width='.7'/%3E%3Ccircle cx='13.5' cy='13.5' r='1.2' fill='%23ffd49a'/%3E%3Cpath d='M19 7.5Q22 10 20.5 13M7.5 19Q10 22 13 20.5' fill='none' stroke='%23ff8a4a' stroke-width='.7' opacity='.8'/%3E%3C/g%3E%3C/svg%3E") 0 0/2.5em 2.5em no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='translate(48 0) scale(-1 1)'%3E%3Cpath d='M3 3H31L25 7.5H10Q7.5 7.5 7.5 10V25L3 31Z' fill='%234a2a22' stroke='%23f3ba84' stroke-width='1.1'/%3E%3Cpath d='M31 3L38 1.2L34 5.6ZM3 31L1.2 38L5.6 34Z' fill='%23f3ba84'/%3E%3Cpath d='M11 13.5L13.5 11L16 13.5L13.5 16Z' fill='%23c9714e' stroke='%23f3ba84' stroke-width='.7'/%3E%3Ccircle cx='13.5' cy='13.5' r='1.2' fill='%23ffd49a'/%3E%3Cpath d='M19 7.5Q22 10 20.5 13M7.5 19Q10 22 13 20.5' fill='none' stroke='%23ff8a4a' stroke-width='.7' opacity='.8'/%3E%3C/g%3E%3C/svg%3E") 100% 0/2.5em 2.5em no-repeat}
.faction-verdant .game-card{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M0 10C20 6 40 14 80 8M0 30C24 26 46 36 80 28M0 52C22 48 44 58 80 50M0 72C20 68 44 78 80 70' fill='none' stroke='%23c9d8a5' stroke-width='.8' opacity='.1'/%3E%3C/svg%3E") 0 0/6em 6em,radial-gradient(ellipse 90% 45% at 50% 0%,#ffffff14,transparent 70%),linear-gradient(155deg,var(--frame-top),#161d29 57%,var(--frame-bottom))}
.faction-verdant .game-card:after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform=''%3E%3Cpath d='M4 42C4 19 15 6 42 4' fill='none' stroke='%23c9d8a5' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M4 42c-1.6 3 .6 5 3 3.6M42 4c3-1.6 5 .6 3.6 3' fill='none' stroke='%23c9d8a5' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M7 24C4 17.5 7.5 13 13 13C14 18.5 12 22.5 7 24Z' fill='%236f9160' stroke='%23c9d8a5' stroke-width='.7'/%3E%3Cpath d='M24 7C17.5 4 13 7.5 13 13C18.5 14 22.5 12 24 7Z' fill='%236f9160' stroke='%23c9d8a5' stroke-width='.7'/%3E%3Ccircle cx='10' cy='10' r='2.6' fill='%23f1eec4'/%3E%3Ccircle cx='10' cy='10' r='1' fill='%23d9a441'/%3E%3C/g%3E%3C/svg%3E") 0 0/2.5em 2.5em no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='translate(48 0) scale(-1 1)'%3E%3Cpath d='M4 42C4 19 15 6 42 4' fill='none' stroke='%23c9d8a5' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M4 42c-1.6 3 .6 5 3 3.6M42 4c3-1.6 5 .6 3.6 3' fill='none' stroke='%23c9d8a5' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M7 24C4 17.5 7.5 13 13 13C14 18.5 12 22.5 7 24Z' fill='%236f9160' stroke='%23c9d8a5' stroke-width='.7'/%3E%3Cpath d='M24 7C17.5 4 13 7.5 13 13C18.5 14 22.5 12 24 7Z' fill='%236f9160' stroke='%23c9d8a5' stroke-width='.7'/%3E%3Ccircle cx='10' cy='10' r='2.6' fill='%23f1eec4'/%3E%3Ccircle cx='10' cy='10' r='1' fill='%23d9a441'/%3E%3C/g%3E%3C/svg%3E") 100% 0/2.5em 2.5em no-repeat}
.faction-astral .game-card{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg fill='%23e8e0ff'%3E%3Ccircle cx='7' cy='12' r='.7' opacity='.5'/%3E%3Ccircle cx='31' cy='5' r='.5' opacity='.4'/%3E%3Ccircle cx='52' cy='18' r='.9' opacity='.45'/%3E%3Ccircle cx='73' cy='9' r='.5' opacity='.35'/%3E%3Ccircle cx='18' cy='38' r='.6' opacity='.4'/%3E%3Ccircle cx='44' cy='44' r='.5' opacity='.3'/%3E%3Ccircle cx='66' cy='36' r='.8' opacity='.45'/%3E%3Ccircle cx='11' cy='66' r='.9' opacity='.35'/%3E%3Ccircle cx='36' cy='71' r='.6' opacity='.4'/%3E%3Ccircle cx='61' cy='63' r='.5' opacity='.3'/%3E%3C/g%3E%3C/svg%3E") 0 0/5em 5em,radial-gradient(ellipse 90% 45% at 50% 0%,#ffffff14,transparent 70%),linear-gradient(155deg,var(--frame-top),#161d29 57%,var(--frame-bottom))}
.faction-astral .game-card:after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform=''%3E%3Cpath d='M3 29A26 26 0 0 1 29 3' fill='none' stroke='%23e1d6ff' stroke-width='1.1'/%3E%3Cpath d='M3 21A18 18 0 0 1 21 3' fill='none' stroke='%23a596d2' stroke-width='.8' stroke-dasharray='1.4 2.4'/%3E%3Cpath d='M11 3.5L12.5 9.5L18.5 11L12.5 12.5L11 18.5L9.5 12.5L3.5 11L9.5 9.5Z' fill='%23f4efff'/%3E%3Ccircle cx='11' cy='11' r='4.5' fill='%23c9b8ff' opacity='.25'/%3E%3Ccircle cx='25' cy='8' r='1' fill='%23e1d6ff'/%3E%3Ccircle cx='8' cy='25' r='1' fill='%23e1d6ff'/%3E%3Cpath d='M33.5 4.5a3.6 3.6 0 1 0 3.6 4.6a2.6 2.6 0 1 1-3.6-4.6z' fill='%23e1d6ff'/%3E%3C/g%3E%3C/svg%3E") 0 0/2.5em 2.5em no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='translate(48 0) scale(-1 1)'%3E%3Cpath d='M3 29A26 26 0 0 1 29 3' fill='none' stroke='%23e1d6ff' stroke-width='1.1'/%3E%3Cpath d='M3 21A18 18 0 0 1 21 3' fill='none' stroke='%23a596d2' stroke-width='.8' stroke-dasharray='1.4 2.4'/%3E%3Cpath d='M11 3.5L12.5 9.5L18.5 11L12.5 12.5L11 18.5L9.5 12.5L3.5 11L9.5 9.5Z' fill='%23f4efff'/%3E%3Ccircle cx='11' cy='11' r='4.5' fill='%23c9b8ff' opacity='.25'/%3E%3Ccircle cx='25' cy='8' r='1' fill='%23e1d6ff'/%3E%3Ccircle cx='8' cy='25' r='1' fill='%23e1d6ff'/%3E%3Cpath d='M33.5 4.5a3.6 3.6 0 1 0 3.6 4.6a2.6 2.6 0 1 1-3.6-4.6z' fill='%23e1d6ff'/%3E%3C/g%3E%3C/svg%3E") 100% 0/2.5em 2.5em no-repeat}
.faction-abyssal .game-card{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M0 12q10-6 20 0t20 0t20 0t20 0M0 32q10-6 20 0t20 0t20 0t20 0M0 52q10-6 20 0t20 0t20 0t20 0M0 72q10-6 20 0t20 0t20 0t20 0' fill='none' stroke='%23bde2df' stroke-width='.7' opacity='.1'/%3E%3C/svg%3E") 0 0/5em 5em,radial-gradient(ellipse 90% 45% at 50% 0%,#ffffff14,transparent 70%),linear-gradient(155deg,var(--frame-top),#161d29 57%,var(--frame-bottom))}
.faction-abyssal .game-card:after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform=''%3E%3Cpath d='M4 36C4 17 13 5 36 4' fill='none' stroke='%23bde2df' stroke-width='1.2'/%3E%3Cpath d='M13 13m-6 0a6 6 0 1 1 6 6a4 4 0 1 1-4-4a2.2 2.2 0 1 1 2.2 2.2' fill='none' stroke='%23bde2df' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M22 6.5q3.5 3.5 7 0q3.5 3.5 7 0M6.5 22q3.5 3.5 0 7q3.5 3.5 0 7' fill='none' stroke='%236caab1' stroke-width='1'/%3E%3Ccircle cx='20' cy='16' r='1.3' fill='none' stroke='%23bde2df' stroke-width='.6'/%3E%3Ccircle cx='16.5' cy='21' r='.8' fill='%23bde2df' opacity='.8'/%3E%3C/g%3E%3C/svg%3E") 0 0/2.5em 2.5em no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='translate(48 0) scale(-1 1)'%3E%3Cpath d='M4 36C4 17 13 5 36 4' fill='none' stroke='%23bde2df' stroke-width='1.2'/%3E%3Cpath d='M13 13m-6 0a6 6 0 1 1 6 6a4 4 0 1 1-4-4a2.2 2.2 0 1 1 2.2 2.2' fill='none' stroke='%23bde2df' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M22 6.5q3.5 3.5 7 0q3.5 3.5 7 0M6.5 22q3.5 3.5 0 7q3.5 3.5 0 7' fill='none' stroke='%236caab1' stroke-width='1'/%3E%3Ccircle cx='20' cy='16' r='1.3' fill='none' stroke='%23bde2df' stroke-width='.6'/%3E%3Ccircle cx='16.5' cy='21' r='.8' fill='%23bde2df' opacity='.8'/%3E%3C/g%3E%3C/svg%3E") 100% 0/2.5em 2.5em no-repeat}
.faction-tempest .game-card{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M-10 30L30-10M10 80L90 0M40 90L90 40M-10 70L70-10' fill='none' stroke='%23dfe8f5' stroke-width='.6' opacity='.08'/%3E%3C/svg%3E") 0 0/5em 5em,radial-gradient(ellipse 90% 45% at 50% 0%,#ffffff14,transparent 70%),linear-gradient(155deg,var(--frame-top),#161d29 57%,var(--frame-bottom))}
.faction-tempest .game-card:after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform=''%3E%3Cpath d='M3 27V3H27' fill='none' stroke='%23eee0ad' stroke-width='1.4'/%3E%3Cpath d='M7.5 21V7.5H21' fill='none' stroke='%238daacb' stroke-width='.9'/%3E%3Cpath d='M27 3L31 1.2M3 27L1.2 31' stroke='%23eee0ad' stroke-width='1.2'/%3E%3Cpath d='M21 10L14 17.5H18.5L12.5 26L22.5 15.5H18L23 10Z' fill='%23eee0ad' stroke='%2338516a' stroke-width='.6' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 0 0/2.5em 2.5em no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='translate(48 0) scale(-1 1)'%3E%3Cpath d='M3 27V3H27' fill='none' stroke='%23eee0ad' stroke-width='1.4'/%3E%3Cpath d='M7.5 21V7.5H21' fill='none' stroke='%238daacb' stroke-width='.9'/%3E%3Cpath d='M27 3L31 1.2M3 27L1.2 31' stroke='%23eee0ad' stroke-width='1.2'/%3E%3Cpath d='M21 10L14 17.5H18.5L12.5 26L22.5 15.5H18L23 10Z' fill='%23eee0ad' stroke='%2338516a' stroke-width='.6' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 100% 0/2.5em 2.5em no-repeat}
/* ---------- end faction frames ---------- */

/* Card-shaped placeholders share the card ratio. */
.sold-slot,.empty-slot{flex:none;width:var(--card-w);aspect-ratio:5/7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:2px dashed #5d5040;border-radius:12px;background:#0b0f1873;color:#8d7a60;text-align:center}
.sold-slot span,.empty-slot span{font-size:calc(var(--card-w) * .2);line-height:1;color:#7a6146}
.sold-slot strong{font:700 18px Cinzel,Georgia,serif;color:#b3a283}
.sold-slot small,.empty-slot small{font-size:11px}

/* ---------- Shop ---------- */
/* Shop cards fill the screen: limited by the height left after the HUD, heading and action bar (card is 1.4x tall
   plus its Recruit button), or by fitting three across beside the roster rail; never smaller than 200px. */
.market-grid{--card-w:clamp(200px,min((100vh - 300px * var(--ui)) / 1.62,(100vw - 420px * var(--ui)) / 3.3),900px);display:flex;justify-content:center;align-items:flex-start;gap:max(22px,calc(var(--card-w) * .1));flex-wrap:wrap;padding:6px 0 18px}
.market-offer{display:flex;flex-direction:column;gap:max(10px,calc(var(--card-w) * .05));width:var(--card-w)}
.market-recruit{padding:max(10px,calc(var(--card-w) * .045)) 6px;font-size:max(12px,calc(var(--card-w) * .055))}
/* Clicking the card itself recruits it too. */
.offer-card{cursor:pointer}
.offer-card .card-tilt{transition:transform .5s cubic-bezier(.2,.8,.2,1),scale .12s ease}
.offer-card:active .card-tilt{scale:.96}
.market-offer.unaffordable .offer-card{cursor:not-allowed}
/* Cards you can't afford are drained of colour (filtering the face and edge keeps the 3D tilt intact). */
.market-offer .game-card,.market-offer .card-slab{transition:filter .3s ease}
.market-offer.unaffordable .game-card,.market-offer.unaffordable .card-slab{filter:grayscale(.9) brightness(.55) contrast(.9)}
.market-offer.unaffordable .offer-card:hover .game-card{filter:grayscale(.7) brightness(.75)}
.market-offer.unaffordable .card-particles,.market-offer.unaffordable .card-foil{visibility:hidden}
.market-offer.unaffordable .offer-card:active .card-tilt{scale:1}

/* ---------- Muster ---------- */
/* Muster cards grow with the screen: two rows of cards (1.4x tall plus a button) share the height left after the
   HUD, heading, labels and action bar, and seven fit across the hand. */
.hand-grid,.lineup-grid{--card-w:clamp(80px,min((100vh - 380px * var(--ui)) / 3.14,(100vw - 2 * var(--stage-pad) - 80px) / 7.4),420px)}
.hand-grid{display:flex;justify-content:center;align-items:flex-start;gap:max(8px,calc(var(--card-w) * .05));min-height:calc(var(--card-w) * 1.4 + 76px);padding:8px 0 10px;border-radius:14px}
.hand-grid{--hand-w:calc(100vw - 2 * var(--stage-pad) - 80px);gap:0}
.hand-grid .deploy-card+.deploy-card{margin-left:min(10px,(var(--hand-w) - var(--card-w)) / max(var(--count,1) - 1,1) - var(--card-w))}
/* A crowded bench overlaps its cards; clicking a card musters it, so the buttons step aside. */
.hand-grid.crowded .deploy-action{visibility:hidden}
.hand-grid .deploy-card{transform:translateY(var(--fan-y,0)) rotate(var(--fan-rot,0deg));transform-origin:50% 140%;transition:transform .25s ease,margin .2s cubic-bezier(.2,.8,.2,1),opacity .15s,filter .15s}
.hand-grid .deploy-card:hover{z-index:5;transform:translateY(calc(var(--fan-y,0px) - 16px)) rotate(var(--fan-rot,0deg))}
.lineup-grid{display:flex;justify-content:center;gap:10px;padding-bottom:12px}
.placement{display:flex;flex-direction:column;align-items:center;gap:6px;width:var(--card-w)}
.slot-label{font-size:9px;font-weight:800;letter-spacing:.14em;color:#c9a773}
.deploy-card{position:relative;display:flex;flex-direction:column;gap:8px;width:var(--card-w);cursor:grab;border-radius:12px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:opacity .15s,filter .15s}
.deploy-card:active{cursor:grabbing}
.deploy-card img{pointer-events:none}
.deploy-action{padding:max(7px,calc(var(--card-w) * .045)) 4px;font-size:max(10px,calc(var(--card-w) * .065))}
.deploy-face{cursor:pointer}
.deploy-face .card-tilt{transition:transform .5s cubic-bezier(.2,.8,.2,1),scale .12s ease}
.deploy-face:active .card-tilt{scale:.96}
/* Warline full: hand cards dim like unaffordable shop cards, but stay draggable for swaps, so hover revives them. */
.hand-grid .deploy-card .game-card,.hand-grid .deploy-card .card-slab{transition:filter .3s ease}
.drag-ghost .game-card,.drag-ghost .card-slab{filter:none}
.card-dragging .hand-grid .deploy-card:hover{transform:translateY(var(--fan-y,0)) rotate(var(--fan-rot,0deg))}

/* Picked-up card: the spot it left fades, the hand opens a gap where it will land, and slots glow. */
.deploy-card.drag-origin{opacity:.22;filter:grayscale(.8) brightness(.8)}
.deploy-card.drag-origin .card-action{visibility:hidden}
.hand-grid .drop-before{margin-left:calc(var(--card-w) * .45)}
.hand-grid .drop-after{margin-right:calc(var(--card-w) * .45)}
.hand-grid.drop-target{background:radial-gradient(ellipse at 50% 55%,#e3c48d14,transparent 70%)}
.empty-slot{transition:border-color .15s,background .15s,box-shadow .15s,transform .15s}
.placement.drop-target .empty-slot{border-style:solid;border-color:#e3c48d;background:radial-gradient(circle at 50% 50%,#e3c48d26,#e3c48d08 70%);box-shadow:0 0 0 1px #e3c48d55,0 0 26px #e3c48d44,inset 0 0 22px #e3c48d22;transform:scale(1.03)}
.placement.drop-target .empty-slot span{color:#f0d7a5;text-shadow:0 0 12px #e3c48d}
.placement.drop-target .game-card{box-shadow:0 0 0 2px #f0d7a5,0 0 26px #e3c48d88}
.placement.drop-target .slot-label{color:#f0d7a5;text-shadow:0 0 10px #e3c48d88}
body.card-dragging,body.card-dragging *{cursor:grabbing!important}

.drag-ghost{position:fixed;left:0;top:0;z-index:2000;pointer-events:none;perspective:900px;will-change:transform}
.drag-sway{transform-style:preserve-3d;transition:transform .06s linear}
.drag-lift{transform-style:preserve-3d;animation:pickUp .2s cubic-bezier(.2,.9,.3,1.3) forwards;filter:drop-shadow(0 26px 20px #000b) drop-shadow(0 0 16px #e3c48d44)}
.drag-lift .card-glare{opacity:.55}

.enemy-tease{order:2;display:flex;align-items:center;gap:8px;color:#c98c83}
.enemy-tease>div{display:flex;gap:4px}
.enemy-tease b{display:grid;place-items:center;width:26px;height:26px;overflow:hidden;border:1px solid #895f57;border-radius:6px;background:var(--art-color);color:#f4d8a2;font:700 14px Cinzel,Georgia,serif}
/* Layered thumbnails: the character cropped toward its head, over a blurred slice of its scene. */
.deck-icon,.enemy-tease b,.xp-symbol{position:relative}
.thumb-scene{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(1px) brightness(.8)}
.thumb-character{position:relative;display:block;width:100%;height:100%;object-fit:cover;object-position:center 28%;scale:1.35}
.portrait-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center 36%;border-radius:inherit}

/* ---------- Battle ---------- */
/* The battlefield: sky, mountains, ruins and braziers behind; a perspective floor with a rune circle;
   cards standing on it; particles, fog and rocks in front. Layers drift with --cam-x/--cam-y for parallax. */
.arena-scene{
  --card-w:clamp(44px,min((100vw - 2 * var(--stage-pad) - 60px - 12px * var(--slots,5)) / (2 * var(--slots,5)),(100vh - 220px * var(--ui)) * .3),340px);
  --cam-x:0;--cam-y:0;--horizon:50%;--ground:15%;
  position:relative;flex:1;min-height:calc(var(--card-w) * 1.4 + 200px);margin:0 calc(-1 * var(--stage-pad));
  overflow:hidden;isolation:isolate;background:#0a0c16;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
body[data-phase="result"] .arena-scene{min-height:calc(var(--card-w) * 1.4 + 110px)}
.scene-layer{position:absolute;pointer-events:none;transition:translate .9s cubic-bezier(.2,.7,.2,1)}
.scene-sky{inset:-4%;z-index:0;background:linear-gradient(180deg,#070914 0%,#10152b 30%,#231d38 47%,#4a2a33 55%,#6d3522 60%,#2a1a20 68%,#0e0c14 100%);translate:calc(var(--cam-x) * -4px) calc(var(--cam-y) * -3px)}
.scene-stars{position:absolute;inset:0 0 45%;opacity:.7;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff 50%,transparent),radial-gradient(1px 1px at 28% 8%,#fff 50%,transparent),radial-gradient(1.4px 1.4px at 44% 22%,#ffe9c7 50%,transparent),radial-gradient(1px 1px at 63% 12%,#fff 50%,transparent),radial-gradient(1.2px 1.2px at 81% 26%,#fff 50%,transparent),radial-gradient(1px 1px at 91% 7%,#cfe0ff 50%,transparent),radial-gradient(1px 1px at 6% 36%,#fff 50%,transparent),radial-gradient(1.3px 1.3px at 53% 34%,#fff 50%,transparent),radial-gradient(1px 1px at 72% 40%,#fff 50%,transparent),radial-gradient(1px 1px at 35% 30%,#fff 50%,transparent);animation:twinkle 5s ease-in-out infinite alternate}
.scene-moon{position:absolute;top:9%;right:17%;width:clamp(38px,6vw,72px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 36%,#fff8e6,#f1dcb0 45%,#c9a877 100%);box-shadow:0 0 30px 6px #f3d79a55,0 0 120px 40px #f3d79a22}
.scene-far{left:-3%;right:-3%;bottom:calc(100% - var(--horizon) - 1px);height:34%;z-index:1;filter:blur(.6px);translate:calc(var(--cam-x) * -8px) calc(var(--cam-y) * -4px)}
.scene-far svg,.scene-mid svg{display:block;width:100%;height:100%}
.range-far{fill:#1c2036}
.range-castle{fill:#161a2c}
.range-near{fill:#12151f}
.scene-haze{left:0;right:0;top:calc(var(--horizon) - 14%);height:22%;z-index:2;background:linear-gradient(180deg,transparent,#8a4a3144 55%,transparent);filter:blur(6px)}
.scene-mid{left:-5%;right:-5%;bottom:calc(100% - var(--horizon) - 5%);height:58%;z-index:3;translate:calc(var(--cam-x) * -16px) calc(var(--cam-y) * -6px)}
.ruin-shapes{fill:#0b0d16;filter:drop-shadow(0 -1px 0 #3a3a5a)}
.scene-banner{fill:#5b1f24;transform-box:fill-box;transform-origin:50% 0;animation:bannerSway 5s ease-in-out infinite alternate}
.scene-banner+.scene-banner{fill:#26324f;animation-delay:-2.5s}

.scene-floor{position:absolute;left:0;right:0;top:var(--horizon);bottom:0;z-index:2;overflow:hidden;perspective:520px;perspective-origin:50% 0;background:linear-gradient(180deg,#171722 0%,#1d1a20 35%,#221a18 100%)}
.floor-plane{position:absolute;left:-60%;right:-60%;top:0;height:320%;transform-origin:50% 0;transform:rotateX(78deg);background-image:linear-gradient(#e8c58212 1px,transparent 1px),linear-gradient(90deg,#e8c58212 1px,transparent 1px);background-size:70px 70px;background-position:center top;mask-image:linear-gradient(180deg,transparent 0,#000 12%)}
.floor-light{position:absolute;inset:0;background:radial-gradient(ellipse 40% 60% at 50% 70%,#e3a45a26,transparent 70%),radial-gradient(ellipse 18% 40% at 8% 18%,#ff8a3a33,transparent 70%),radial-gradient(ellipse 18% 40% at 92% 18%,#ff8a3a33,transparent 70%),linear-gradient(180deg,#0a0c1688,transparent 30%);animation:torchlight 2.6s ease-in-out infinite alternate}

.scene-brazier{position:absolute;bottom:4%;width:clamp(24px,2.6vw,40px);height:clamp(70px,38%,150px);pointer-events:none}
.scene-brazier.left{left:9%}
.scene-brazier.right{right:9%}
.scene-brazier .stand{position:absolute;left:40%;width:20%;top:16%;bottom:0;background:linear-gradient(90deg,#07080d,#2c2630 50%,#07080d);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}
.scene-brazier .bowl{position:absolute;left:-10%;right:-10%;top:10%;height:10%;border-radius:0 0 50% 50%/0 0 100% 100%;background:linear-gradient(#4a3a30,#15121a);box-shadow:0 -3px 10px #ff8a3a99}
.brazier-glow{position:absolute;left:50%;top:6%;width:600%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#ff9a4a40,#ff6a2a14 40%,transparent 70%);animation:torchlight 1.8s ease-in-out infinite alternate}
.flame{position:absolute;left:50%;bottom:88%;width:110%;height:34%;transform-origin:50% 100%;translate:-50% 0;border-radius:50% 50% 42% 42%/65% 65% 35% 35%;background:radial-gradient(ellipse at 50% 85%,#fff5d0 0,#ffc25a 28%,#ff6a1f 58%,transparent 74%);filter:blur(1.2px);mix-blend-mode:screen;animation:flicker .22s ease-in-out infinite alternate}
.flame.inner{width:60%;height:22%;animation-duration:.17s;animation-delay:-.1s;background:radial-gradient(ellipse at 50% 85%,#ffffff 0,#fff0b0 35%,transparent 70%)}

.scene-rune{position:absolute;left:50%;bottom:calc(var(--ground) - 4%);z-index:4;width:min(42vw,440px);aspect-ratio:1;pointer-events:none;transform:translate(-50%,50%) perspective(600px) rotateX(74deg);opacity:.75}
.scene-rune svg{display:block;width:100%;height:100%;animation:runeSpin 60s linear infinite;filter:drop-shadow(0 0 6px #e3b56a)}
.rune-line{fill:none;stroke:#e8c582;stroke-width:1.2;opacity:.55}
.rune-line.faint{opacity:.3}
.rune-ticks{fill:none;stroke:#e8c582;stroke-width:5;stroke-dasharray:1.5 7;opacity:.45}
.rune-core{fill:#ffe3a8}
.arena-scene.rune-flare .scene-rune{animation:runeFlare 1.2s ease-out}

.arena{position:absolute;left:0;right:0;bottom:var(--ground);z-index:6;padding-top:34px;overflow:visible;scrollbar-width:none;translate:calc(var(--cam-x) * -3px) 0;transition:translate .9s cubic-bezier(.2,.7,.2,1)}
.arena::-webkit-scrollbar{display:none}
.arena-scene .player-side .card3d{--ry:10deg;--rx:3deg}
.arena-scene .enemy-side .card3d{--ry:-10deg;--rx:3deg}
.arena-scene .battle-unit:before{content:'';position:absolute;left:4%;right:4%;bottom:-12px;height:22px;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#000d 0,#0006 45%,transparent 70%)}
.arena-scene .arena-side>small{text-shadow:0 1px 6px #000}
.arena-scene.impact .arena,.arena-scene.impact .scene-mid,.arena-scene.impact .scene-far,.arena-scene.impact .scene-fore{animation:arenaImpact .42s ease}

.scene-particles{position:absolute;inset:0;z-index:7;width:100%;height:100%;pointer-events:none}
.scene-fog{left:-10%;right:-10%;bottom:0;height:34%;z-index:8;opacity:.55;translate:calc(var(--cam-x) * -24px) 0}
.scene-fog i{position:absolute;inset:0;background:radial-gradient(ellipse 30% 55% at 20% 80%,#8d8aa433,transparent 70%),radial-gradient(ellipse 35% 50% at 70% 90%,#8d8aa42e,transparent 70%),radial-gradient(ellipse 25% 40% at 45% 100%,#b39a8a26,transparent 70%);animation:fogDrift 26s linear infinite alternate}
.scene-fog i+i{animation-duration:38s;animation-direction:alternate-reverse;opacity:.7;transform:scaleX(-1)}
.scene-fore{left:-4%;right:-4%;bottom:-2px;height:9%;z-index:9;filter:blur(1.5px);translate:calc(var(--cam-x) * -34px) calc(var(--cam-y) * -4px)}
.scene-rocks{display:block;width:100%;height:100%;fill:#05060b}
.scene-vignette{position:absolute;inset:0;z-index:10;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 48%,transparent 55%,#04050acc 100%)}
.arena-scene .battle-message{position:absolute;left:50%;bottom:2%;z-index:11;width:min(92%,760px);min-height:0;margin:0;padding:4px 12px;translate:-50% 0;text-shadow:0 2px 8px #000,0 0 18px #000}
.arena-track{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:12px;min-width:max-content;margin:0 auto}
.arena-side{display:flex;flex-direction:column;gap:10px}
.arena-side>small{display:block;text-align:center;font-size:9px;font-weight:800;letter-spacing:.16em;color:#c5a579;white-space:nowrap}
.enemy-side>small{color:#c98c83}
.arena-units{display:flex;gap:6px;width:calc(var(--card-w) * var(--slots,5) + 6px * (var(--slots,5) - 1));min-height:calc(var(--card-w) * 1.4 + 9px)}
.player-side .arena-units{justify-content:flex-end}
.enemy-side .arena-units{justify-content:flex-start}
.arena-versus{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;align-self:stretch;width:36px;padding-top:20px;color:#b58c5e;font:700 22px Cinzel,Georgia,serif;text-shadow:0 0 18px #b97c3c}
.arena-versus:before,.arena-versus:after{content:'';flex:1;width:1px;min-height:16px;background:linear-gradient(180deg,transparent,#9c7049,transparent)}
.arena-versus small{font:700 9px Inter,system-ui,sans-serif;letter-spacing:.2em;color:#d8b987}

.battle-unit{position:relative;flex:none;display:flex;flex-direction:column;gap:5px;transition:filter .25s}
/* ---------- Character view: creatures on the field instead of cards ---------- */
/* Each fighter keeps a card-sized footprint (so the line layout is unchanged) but shows only the creature standing
   on a pool of shadow, with attack, health and any shield in small badges at its feet. */
.figure{position:relative;width:var(--card-w);aspect-ratio:5/7;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;pointer-events:auto}
.figure-body{position:relative;flex:1;width:128%;display:flex;align-items:flex-end;justify-content:center;min-height:0}
.figure-body:before{content:'';position:absolute;left:14%;right:14%;bottom:-4%;height:16%;border-radius:50%;background:radial-gradient(ellipse,#000c 0,#0007 45%,transparent 72%);z-index:-1}
.figure-character{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;scale:1.3;transform-origin:50% 100%;filter:drop-shadow(0 0 .5px #0009) drop-shadow(0 6px 10px #000a);user-select:none;-webkit-user-drag:none}
.enemy-side .figure-character{transform:scaleX(-1)}
.figure-sigil{display:grid;place-items:center;width:62%;aspect-ratio:1;margin-bottom:12%;border-radius:50%;background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--art-color) 70%,#fff),var(--art-color) 55%,#0b0e16 100%);box-shadow:0 0 calc(var(--card-w) * .18) color-mix(in srgb,var(--art-color) 70%,transparent),inset 0 -6px 14px #0008;color:#fff4dc;font-size:calc(var(--card-w) * .34);line-height:1;text-shadow:0 0 12px #fff8;animation:sigilFloat 3.2s ease-in-out infinite alternate}
@keyframes sigilFloat{to{translate:0 -6%}}
.figure-stats{display:flex;justify-content:center;gap:calc(var(--card-w) * .06);margin-top:calc(var(--card-w) * .05)}
.figure-stats b{display:grid;place-items:center;min-width:calc(var(--card-w) * .3);height:calc(var(--card-w) * .3);padding:0 3px;border-radius:50%;font:700 calc(var(--card-w) * .17)/1 Cinzel,Georgia,serif;color:#fff;text-shadow:0 1px 2px #000;box-shadow:0 2px 6px #000a,inset 0 1px 0 #fff4}
.figure-attack{background:radial-gradient(circle at 35% 30%,#6f86b8,#26345a 70%);border:2px solid #b8c7e8}
.figure-health{background:radial-gradient(circle at 35% 30%,#d2585b,#6a1c24 70%);border:2px solid #f0b0a4}
.figure-health.wounded{color:#ffd0c4}
.figure-shield{background:radial-gradient(circle at 35% 30%,#8fb9cf,#2c4f63 70%);border:2px solid #d4ecf5;border-radius:40% 40% 50% 50%!important}
/* Levels show as a glow at the creature's feet rather than a frame. */
.figure.lv-3 .figure-body:after,.figure.lv-4 .figure-body:after,.figure.lv-5 .figure-body:after{content:'';position:absolute;left:18%;right:18%;bottom:-2%;height:10%;border-radius:50%;z-index:-1;background:radial-gradient(ellipse,#e9c27a99,transparent 70%)}
.figure.lv-5 .figure-body:after{background:radial-gradient(ellipse,#ffd98acc,transparent 70%);filter:blur(1px)}
.figure-view .battle-unit .combat-float{top:10%}
.figure-view .battle-unit.frontline .figure-body{filter:drop-shadow(0 0 10px #f4d49a55)}
.figure-view .battle-unit.struck .figure-character,.figure-view .battle-unit.clashing .figure-character{animation:figureHit .45s ease}
.figure-view .enemy-side .battle-unit.struck .figure-character,.figure-view .enemy-side .battle-unit.clashing .figure-character{animation-name:figureHitMirrored}
@keyframes figureHit{30%{filter:brightness(2.2) saturate(.3) drop-shadow(0 0 8px #ff6a4a)}}
@keyframes figureHitMirrored{30%{filter:brightness(2.2) saturate(.3) drop-shadow(0 0 8px #ff6a4a)}}
.figure-view .battle-unit.blessed .figure-body{filter:drop-shadow(0 0 12px #9be0a0)}
.figure-view .battle-unit.warded .figure-body{filter:drop-shadow(0 0 12px #9bc6e1)}
.figure-view .battle-unit.casting .figure-body{filter:drop-shadow(0 0 14px #f4d49a)}
.figure-view .battle-unit.arriving .figure-body{filter:drop-shadow(0 0 16px #f1c46a)}
.figure-view .battle-unit:before{display:none}
/* Motion. Directions come from --dx/--dy (toward the enemy), so the same moves work sideways on desktop and up and
   down on portrait phones. Everything plays at the battle's speed (--speed). */
.figure-view .player-side .battle-unit{--dx:1;--dy:0}
.figure-view .enemy-side .battle-unit{--dx:-1;--dy:0}
.figure-view .battle-unit.acting,.figure-view .battle-unit.clashing{animation:figureLunge calc(.5s / var(--speed,1)) cubic-bezier(.3,.9,.3,1)}
.figure-view .battle-unit.struck{animation:figureKnock calc(.42s / var(--speed,1)) cubic-bezier(.2,.9,.3,1)}
.figure-view .battle-unit.casting{animation:figureCast calc(.5s / var(--speed,1)) ease}
.figure-view .battle-unit.clashing .figure-character,.figure-view .battle-unit.struck .figure-character{animation-duration:calc(.45s / var(--speed,1))}
@keyframes figureLunge{0%{translate:0 0}26%{translate:calc(var(--dx) * 38%) calc(var(--dy) * 38%);scale:1.1}40%{translate:calc(var(--dx) * 22%) calc(var(--dy) * 22%);scale:1.04}58%{translate:calc(var(--dx) * -10%) calc(var(--dy) * -10%);scale:1}100%{translate:0 0}}
@keyframes figureKnock{0%{translate:0 0}22%{translate:calc(var(--dx) * -16%) calc(var(--dy) * -16%);rotate:calc(var(--dx) * -6deg)}60%{translate:calc(var(--dx) * -4%) calc(var(--dy) * -4%);rotate:0deg}100%{translate:0 0}}
@keyframes figureCast{0%,100%{translate:0 0}40%{translate:0 -8%}}
/* Ability burst: the ability's icon pops over the creature as it fires. */
.ability-burst{position:absolute;z-index:6;left:50%;top:-4%;display:grid;place-items:center;width:calc(var(--card-w) * .42);aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff6d8,#f1c46a 45%,#9a6a25);box-shadow:0 0 0 2px #fff3cf,0 0 22px #f4c86a;color:#3b2408;font-size:calc(var(--card-w) * .24);line-height:1;pointer-events:none;animation:abilityBurst calc(.62s / var(--speed,1)) cubic-bezier(.2,.9,.3,1.3) forwards}
@keyframes abilityBurst{0%{opacity:0;scale:.2;translate:-50% 30%}35%{opacity:1;scale:1.25;translate:-50% -10%}60%{scale:1}100%{opacity:0;translate:-50% -45%}}
/* Deaths: the creature flashes, greys and sinks away while a spirit wisp rises from it. */
.figure-view .battle-unit.falling{animation:none}
.figure-view .battle-unit.falling .figure-body,.figure-view .battle-unit.falling .figure-stats{animation:figureDeath calc(.7s / var(--speed,1)) ease-in forwards}
.figure-view .battle-unit.falling .figure:after{content:'';position:absolute;left:50%;bottom:30%;width:34%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(circle,#fffbe8,#f6dca0aa 40%,transparent 70%);filter:blur(1px);pointer-events:none;animation:soulRise calc(.9s / var(--speed,1)) ease-out forwards}
@keyframes figureDeath{0%{opacity:1;filter:none}18%{opacity:1;filter:brightness(2.6) saturate(0)}100%{opacity:0;translate:0 6%;scale:.82;filter:grayscale(1) brightness(.5) blur(2px)}}
@keyframes soulRise{0%{opacity:0;translate:-50% 20%;scale:.5}30%{opacity:1}100%{opacity:0;translate:-50% -160%;scale:1.2}}
/* Card view keeps its own motions, paced to the battle speed too. */
.arena-scene .battle-unit{animation-duration:calc(.5s / var(--speed,1))}
.arena-scene .battle-unit.falling{animation-duration:calc(.55s / var(--speed,1))}
.arena-scene .combat-float{animation-duration:calc(.75s / var(--speed,1))}
.figure-view .arena-side>small{visibility:hidden}
.battle-unit.fainted{filter:grayscale(1);opacity:.28}
.battle-unit.falling{animation:collapse .55s ease forwards}
.battle-unit .health-track{height:4px;border-radius:4px;background:#4c3034;overflow:hidden}
.health-track i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#ae5350,#e7a471);transition:width .3s}
.front-marker{position:absolute;top:-9px;left:50%;z-index:5;transform:translateX(-50%);padding:3px 6px;border-radius:4px;background:#9b703e;color:#fff1cb;font:800 7px Inter,system-ui,sans-serif;letter-spacing:.1em}
.enemy-side .front-marker{background:#9b5e56}
.battle-card .faction-crest{display:none!important}
.battle-unit.frontline .battle-card{box-shadow:0 0 0 2px var(--frame-light),0 0 18px var(--frame-glow),0 .3em 0 var(--frame-deep)}
.battle-unit.acting{z-index:3}
.player-side .battle-unit.acting{animation:lungeRight .5s ease}
/* Simultaneous clash: both fronts lunge into each other and flash from the impact. */
.player-side .battle-unit.clashing{z-index:3;animation:lungeRight .5s ease}
.enemy-side .battle-unit.clashing{z-index:3;animation:lungeLeft .5s ease}
.battle-unit.clashing .battle-card{animation:clashFlash .5s ease}
.enemy-side .battle-unit.acting{animation:lungeLeft .5s ease}
.battle-unit.casting{animation:spellPulse .5s ease}
/* A summoned token rises into the line out of a burst of light. */
.battle-unit.arriving{animation:summonRise .6s cubic-bezier(.2,.8,.2,1.15)}
.battle-unit.arriving .battle-card{box-shadow:0 0 0 2px #f1d59a,0 0 30px #f1c46a}
@keyframes summonRise{0%{opacity:0;transform:translateY(24px) scale(.6);filter:brightness(2.4)}60%{opacity:1;filter:brightness(1.4)}100%{transform:none;filter:none}}
.battle-unit.struck{animation:shudder .5s ease}
.battle-unit.struck .battle-card{box-shadow:0 0 0 3px #dc7e65,0 0 28px #ed745f}
.battle-unit.blessed{animation:spellPulse .5s ease}
.battle-unit.blessed .battle-card{box-shadow:0 0 0 2px #a5d6a0,0 0 24px #7ec99d}
.battle-unit.warded{animation:spellPulse .5s ease}
.battle-unit.warded .battle-card{box-shadow:0 0 0 2px #9bc6e1,0 0 26px #7cb4dd}
.battle-unit.repositioned .battle-card{box-shadow:0 0 0 2px #c8dfeb,0 0 24px #9bc8e5}
.player-side .battle-unit.repositioned.to-front,.enemy-side .battle-unit.repositioned.to-rear{animation:shiftRight .5s cubic-bezier(.2,.8,.2,1)}
.player-side .battle-unit.repositioned.to-rear,.enemy-side .battle-unit.repositioned.to-front{animation:shiftLeft .5s cubic-bezier(.2,.8,.2,1)}
.combat-float{position:absolute;z-index:5;top:0;left:50%;transform:translateX(-50%);font:700 max(22px,calc(var(--card-w) * .16)) Cinzel,Georgia,serif;text-shadow:0 2px 5px #000;pointer-events:none;animation:floatUp .75s ease-out forwards}
.combat-float.damage{color:#ff8f71}
.combat-float.boon{color:#bce4ac}

.battle-message{display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;margin:4px auto 0;padding:6px 16px;max-width:760px;text-align:center;color:#e9d7b8}
.battle-message>span{font-size:20px;color:#d5aa68}
.battle-message div{display:flex;flex-direction:column;gap:3px}
.battle-message small{font-size:9px;font-weight:800;letter-spacing:.18em;color:#bda074}
.battle-message strong{font-size:14px;font-weight:600}
.battle-progress{width:min(100%,760px);height:3px;margin:8px auto 0;border-radius:3px;background:#262a36;overflow:hidden}
.panel-actions>.battle-progress{position:absolute;left:0;right:0;top:-1px;width:auto;height:2px;margin:0;border-radius:0;background:#ffffff10}

/* On desktop the battlefield fills the whole stage behind the heading, like the menu backdrops. */
@media(min-width:761px){
  body[data-phase="battle"] .arena-scene,body[data-phase="result"] .arena-scene{position:absolute;inset:0;z-index:0;margin:0;min-height:0;border:0;--ground:22%}
  body[data-phase="result"] .arena-scene{--ground:30%}
  body[data-phase="battle"] .hero,body[data-phase="result"] .hero,body[data-phase="result"] .result-banner,body[data-phase="result"] .xp-report{position:relative;z-index:1}
  .arena-scene:after{content:'';position:absolute;inset:0 0 auto;height:22%;z-index:10;pointer-events:none;background:linear-gradient(180deg,#0b0f18c8,transparent)}
  .arena-scene .battle-message{bottom:calc(var(--ground) - 72px)}
  body[data-phase="result"] .arena-scene .battle-message{display:none}
  body[data-phase="result"] .xp-report{margin:auto auto 10px;padding:8px 14px;border-radius:12px;background:#0b0f18a6;backdrop-filter:blur(6px)}
  body[data-phase="result"] .panel-actions{margin-top:0}
}
.battle-progress i{display:block;height:100%;background:linear-gradient(90deg,#715438,#e6be7b);transition:width .2s}

/* ---------- Menu backdrops (market for the shop, war camp for the muster) ----------
   Same layer system as the battlefield, dimmed by a shade so cards and text stay readable. */
main{position:relative}
.stage-backdrop{--horizon:58%;--cam-x:0;--cam-y:0;position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.stage-backdrop:empty{display:none}
.stage-backdrop>*{animation:sceneFade .9s ease both}
.stage,.side-panel{position:relative;z-index:1}
.stage-backdrop .scene-fore{height:13%}
.backdrop-shade{position:absolute;inset:0;z-index:10;background:linear-gradient(180deg,#0b0f18b8 0%,#0b0f1830 13%,transparent 38%,#0b0f1820 70%,#0b0f18c0 100%),radial-gradient(ellipse 50% 45% at 45% 50%,#0b0f1840,transparent 75%)}

.market-sky{background:linear-gradient(180deg,#0a0d22 0%,#171c42 32%,#33275a 52%,#6a3446 61%,#2a1a24 76%,#0e0c14 100%)}
.scene-skyline{display:block;width:100%;height:100%}
.scene-skyline path{fill:#1a1d33}
.skyline-windows{fill:#f0b060;opacity:.55}
.stall-shapes{fill:#0c0e18;filter:drop-shadow(0 -1px 0 #4a3a3a)}
.awning{filter:brightness(1.15)}
.awning-edge{fill:#120a10}
.tent-door{fill:#e3a45a4d}
.tent-door.lit{fill:#f0a050b0;filter:drop-shadow(0 0 10px #ff9a4a)}
.market-floor{background:linear-gradient(180deg,#15141c,#1d1719 40%,#201815)}
.market-floor .floor-plane{background-size:44px 28px}
.market-floor .floor-light{background:radial-gradient(ellipse 30% 45% at 26% 12%,#ffb56a26,transparent 70%),radial-gradient(ellipse 30% 45% at 74% 12%,#ffb56a26,transparent 70%),radial-gradient(ellipse 22% 40% at 12% 30%,#ff8a3a1f,transparent 70%),linear-gradient(180deg,#0a0c1688,transparent 30%)}
.scene-lanterns{left:0;right:0;top:4%;height:44%;z-index:5;translate:calc(var(--cam-x) * -20px) calc(var(--cam-y) * -6px)}
.lantern-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lantern-line path{fill:none;stroke:#2b2432;stroke-width:1.5;vector-effect:non-scaling-stroke}
.lantern{position:absolute;width:clamp(9px,1vw,15px);aspect-ratio:.72;translate:-50% 0;transform-origin:50% -9px;border-radius:40% 40% 45% 45%;background:radial-gradient(circle at 50% 45%,#fff4d6 0,hsl(var(--hue) 95% 60%) 42%,hsl(var(--hue) 80% 26%) 100%);box-shadow:0 0 10px 3px hsl(var(--hue) 95% 55% / .55),0 0 46px 16px hsl(var(--hue) 95% 55% / .16);animation:lanternSway 3.6s ease-in-out var(--sway-delay,0s) infinite alternate}
.lantern:before{content:'';position:absolute;left:50%;top:-9px;width:1px;height:9px;background:#2b2432}
.scene-jars{display:block;width:100%;height:100%;fill:#05060b}

.camp-sky{background:linear-gradient(180deg,#080a18 0%,#171a36 28%,#3a2440 46%,#7a3a2a 56%,#3a1f22 64%,#120e14 100%)}
.camp-shapes{fill:#0a0c14}
.camp-floor{background:linear-gradient(180deg,#191318,#1e1614 50%,#1a1310)}
.camp-floor .floor-light{background:radial-gradient(ellipse 32% 60% at 12% 62%,#ff8a3a3d,transparent 70%),radial-gradient(ellipse 14% 30% at 91% 22%,#ff8a3a2a,transparent 70%),linear-gradient(180deg,#0a0c1688,transparent 30%);animation:torchlight 1.6s ease-in-out infinite alternate}
.scene-props{inset:0;z-index:5;translate:calc(var(--cam-x) * -18px) calc(var(--cam-y) * -5px)}
.scene-props .scene-brazier.right{right:7%;bottom:34%}
.campfire{position:absolute;left:10%;bottom:15%;width:clamp(50px,6vw,90px);height:clamp(60px,8vw,110px)}
.campfire .logs{position:absolute;left:-6%;right:-6%;bottom:0;height:22%;background:linear-gradient(18deg,transparent 38%,#2e1c15 39% 61%,transparent 62%),linear-gradient(-18deg,transparent 38%,#3b251a 39% 61%,transparent 62%)}
.campfire .flame{bottom:12%;width:84%;height:82%}
.campfire .flame.mid{width:62%;height:64%;animation-duration:.2s;animation-delay:-.07s}
.campfire .flame.inner{width:36%;height:40%}
.campfire .brazier-glow{top:62%;width:880%}

/* ---------- Result & campaign end ---------- */
.result-banner{display:flex;align-items:center;justify-content:center;gap:16px;padding:4px 0 2px;color:#b9d3a8;text-align:left}
.result-banner.enemy{color:#dea8a3}
.result-banner.tie{color:#c4bade}
.result-banner>span{font-size:42px;line-height:1;text-shadow:0 0 20px currentColor}
.result-banner small{font-size:9px;font-weight:800;letter-spacing:.17em;opacity:.8}
.result-banner h3{font:700 32px/1 Cinzel,Georgia,serif;margin:3px 0}
.result-banner p{margin:0;font-size:12px;color:#a9a398}

.xp-report{width:min(100%,900px);margin:10px auto 16px}
.xp-awards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 16px}
.xp-award{display:flex;align-items:center;gap:9px;min-width:0;padding:6px 0;border-bottom:1px solid #ffffff0d}
.xp-symbol{display:grid;place-items:center;flex:none;width:30px;height:30px;overflow:hidden;border-radius:6px;background:linear-gradient(135deg,var(--art-color),#171e2b);color:#f4d8a2;font:700 16px Cinzel,Georgia,serif}
.xp-award>div{min-width:0;flex:1}
.xp-award strong,.xp-award small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp-award strong{font-size:11px;color:#ecddc0}
.xp-award small{margin-top:2px;font-size:10px;color:#a59c8f}
.xp-award b{max-width:110px;font-size:9px;text-align:right;color:#d6b875}

.finish-scene{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 0 30px;text-align:center}
.finish-emblem{display:grid;place-items:center;width:110px;height:110px;margin-bottom:20px;border:2px solid #bd965e;border-radius:50%;background:linear-gradient(135deg,#76563b,#262e3a);color:#f5d69a;font-size:66px;box-shadow:0 0 0 10px #ffffff08,0 0 40px #b8874666}
.finish-scene>small{font-size:10px;font-weight:800;letter-spacing:.19em;color:#a49d8c}
.finish-scene h3{margin:8px 0;font:700 34px Cinzel,Georgia,serif;color:#e9d8bb}
.finish-scene>p{max-width:420px;margin:0 0 18px;font-size:14px;line-height:1.5;color:#a49d8c}
.finish-scene .xp-report{text-align:left}

.load-error{padding:30px}

/* ---------- Tooltip ---------- */
.card-tooltip{--card-w:calc(250px * var(--ui));position:fixed;z-index:1000;width:var(--card-w);pointer-events:none;filter:drop-shadow(0 18px 24px #000b)}
.card-tooltip[hidden]{display:none}
/* Long-press preview (touch screens): the card full size over a dimmed game. */
.touch-preview{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;background:#05070cd9;backdrop-filter:blur(4px);animation:previewFade .15s ease-out}
.touch-preview[hidden]{display:none}
.preview-card{--card-w:min(78vw,calc((100dvh - 150px) / 1.4),380px);width:var(--card-w);filter:drop-shadow(0 24px 40px #000c);animation:previewPop .22s cubic-bezier(.2,.8,.2,1.2)}
.preview-card .tooltip-xp{margin-top:10px}
.touch-preview p{margin:0;color:#9d927f;font-size:12px}
@keyframes previewFade{from{opacity:0}}
@keyframes previewPop{from{opacity:0;transform:scale(.85)}}
.offer-card,.battle-unit,.deck-row,.game-card,.card3d img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.tooltip-xp{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding:8px 11px;border:1px solid #967143;border-radius:8px;background:#1c2430;color:#ead4a4;font:800 10px Inter,system-ui,sans-serif}
.tooltip-xp span{color:#c5b6a0;font-weight:600}

/* ---------- Dialogs ---------- */
.modal{width:min(560px,calc(100vw - 32px));max-height:90vh;overflow:auto;padding:28px;border:1px solid #856a49;border-radius:18px;background:linear-gradient(145deg,#232b39,#141b27);color:#e3d3b7;box-shadow:0 25px 90px #000a}
.modal::backdrop{background:#050912c9;backdrop-filter:blur(4px)}
.modal h2{margin:4px 0 14px;font:700 30px Cinzel,Georgia,serif;color:#f0ddbf}
.modal ol{padding-left:21px;font-size:14px;line-height:1.55}
.modal li{margin:10px 0}
.modal .note{font-size:12px;color:#a9a398}
.modal-close{position:absolute;right:16px;top:13px;width:32px;height:32px;border:0;border-radius:50%;background:#38404a;color:#d2b982;font-size:22px;line-height:1}
.lab-modal{width:min(1000px,calc(100vw - 32px))}
.lab-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.lab-heading p{max-width:490px;margin:0 0 15px;font-size:13px;line-height:1.5;color:#a9a398}
.lab-actions{display:flex;flex-wrap:wrap;gap:7px;margin:20px 30px 0 0}
.lab-actions .secondary-button{min-height:34px;padding:7px 10px;font-size:10px}
.upload-button{cursor:pointer}
.lab-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:30px}
.card-form{display:flex;flex-direction:column;gap:11px}
.card-form label{display:flex;flex-direction:column;gap:5px;color:#c1aa83;font-size:10px;font-weight:800;letter-spacing:.04em}
.card-form input,.card-form select{width:100%;height:35px;padding:7px;border:1px solid #62584a;border-radius:7px;background:#111c29;color:#ead7b8;font-size:12px;font-weight:600}
.card-form input:focus,.card-form select:focus{outline:2px solid #ad8451;outline-offset:1px}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.form-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.form-buttons .primary-button,.form-buttons .secondary-button{min-height:35px;padding:7px 11px;font-size:11px}
.field-hint{color:#8f8b82;font-size:9px;font-weight:500;letter-spacing:0}
.finish-fields{display:flex;flex-direction:column;gap:10px;margin:4px 0 0;padding:12px;border:1px solid #4a4238;border-radius:10px}
.finish-fields legend{padding:0 6px;color:#c1aa83;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.layer-rows{display:flex;flex-direction:column;gap:8px}
.layer-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:end;padding-bottom:10px;border-bottom:1px solid #ffffff10}
.layer-row:last-child{padding-bottom:0;border-bottom:0}
.card-form .layer-row input[type="range"]{height:35px;padding:0;accent-color:#c49a61}
.card-form .check-label{flex-direction:row;align-items:center;gap:6px;height:35px;white-space:nowrap}
.card-form .check-label input{width:auto;height:auto}
.lab-preview{--card-w:236px;align-self:start;display:flex;flex-direction:column;align-items:center;gap:14px}
.lab-preview>small{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.17em;color:#b79a69}
.lab-preview p{margin:0;font-size:11px;line-height:1.5;color:#a9a398}
.lab-preview code{font-size:10px}
#lab-message{min-height:15px;margin:0;color:#9fcbad;font-size:11px;font-weight:700}
#lab-message.error{color:#df9588}

/* ---------- Developer tools ---------- */
.debug-modal{width:min(1280px,calc(100vw - 32px))}
.debug-tabs{display:flex;gap:6px;margin:4px 0 16px;border-bottom:1px solid #4a4238}
.debug-tabs button{border:0;border-bottom:2px solid transparent;background:none;color:#a9a398;padding:8px 12px;font-size:12px;font-weight:800;letter-spacing:.06em}
.debug-tabs button.active{color:var(--gold-light);border-bottom-color:var(--gold)}
.debug-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:14px}
.debug-controls label{display:flex;flex-direction:column;gap:5px;color:#c1aa83;font-size:10px;font-weight:800;letter-spacing:.04em}
.debug-controls select,.debug-controls input:not([type]){height:34px;min-width:170px;padding:6px 8px;border:1px solid #62584a;border-radius:7px;background:#111c29;color:#ead7b8;font-size:12px}
.debug-controls input[type="range"]{width:160px;accent-color:#c49a61}
.debug-controls .check-label{flex-direction:row;align-items:center;gap:8px;font-size:12px}
.debug-note{margin-left:auto;color:#a9a398;font-size:11px}
.debug-gallery{display:flex;flex-direction:column;gap:22px;padding:10px 4px 20px;overflow-x:auto}
.debug-row{display:grid;width:max-content;grid-template-columns:150px repeat(5,var(--card-w));gap:18px;align-items:center;content-visibility:auto;contain-intrinsic-size:auto calc(var(--card-w) * 1.45)}
.debug-head{content-visibility:visible;position:sticky;top:-28px;z-index:5;padding:6px 0;background:#161d2a}
.debug-head b{text-align:center;color:var(--gold);font-size:11px;letter-spacing:.14em}
.debug-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.debug-meta strong{font:700 15px Cinzel,Georgia,serif;color:#ead6b0}
.debug-meta small{color:#a9a398;font-size:11px;overflow-wrap:anywhere}
.debug-meta code{color:#cfc4ae}
.debug-cell{position:relative}
.debug-readout{padding:10px 12px;border:1px solid #4a4238;border-radius:8px;background:#0e1520;color:#d8c5a5;font-size:12px;line-height:1.7}
.debug-readout b{color:var(--gold);font-weight:800}
.debug-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.debug-actions .secondary-button{min-height:34px;padding:8px 12px;font-size:11px}

/* ---------- Animations ---------- */
@keyframes lungeRight{0%,100%{transform:perspective(600px) translateX(0)}45%{transform:perspective(600px) translateX(24px) rotateY(-18deg) rotateX(6deg) scale(1.1)}}
@keyframes lungeLeft{0%,100%{transform:perspective(600px) translateX(0)}45%{transform:perspective(600px) translateX(-24px) rotateY(18deg) rotateX(6deg) scale(1.1)}}
@keyframes shiftRight{0%{transform:translateX(-42px) scale(.88);opacity:.5}65%{transform:translateX(8px) scale(1.06);opacity:1}100%{transform:translateX(0) scale(1)}}
@keyframes shiftLeft{0%{transform:translateX(42px) scale(.88);opacity:.5}65%{transform:translateX(-8px) scale(1.06);opacity:1}100%{transform:translateX(0) scale(1)}}
@keyframes shudder{0%,100%{transform:perspective(600px) translateX(0)}20%{transform:perspective(600px) translateX(-7px) rotateY(-12deg)}40%{transform:perspective(600px) translateX(7px) rotateY(10deg)}60%{transform:perspective(600px) translateX(-4px) rotateY(-5deg)}}
@keyframes spellPulse{0%,100%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.7);transform:scale(1.045)}}
@keyframes collapse{0%{opacity:1;transform:perspective(500px) rotateX(0)}100%{opacity:.28;transform:perspective(500px) translateY(14%) rotateX(68deg) scale(.9)}}
@keyframes cardFlip{0%{transform:translateY(-14px) rotateY(180deg) scale(.92)}55%{transform:translateZ(30px) rotateY(-12deg) scale(1.05)}100%{transform:none}}
@keyframes pickUp{from{transform:translateZ(0) scale(1)}to{transform:translateZ(40px) scale(1.08)}}
@keyframes raysPulse{from{opacity:.7}to{opacity:1}}
@keyframes fogRoll{from{background-position:0% 0}to{background-position:100% 0}}
@keyframes causticsShift{from{background-position:0 0,0 0}to{background-position:2.3em 1.9em,-1.8em 2.2em}}
@keyframes glowPulse{from{filter:brightness(.85)}to{filter:brightness(1.25)}}
@keyframes glitter{0%{filter:brightness(1)}50%{filter:brightness(1.8) hue-rotate(40deg)}100%{filter:brightness(1)}}
@keyframes particleRise{0%{opacity:0;transform:translate(0,0) scale(1)}15%{opacity:1}100%{opacity:0;transform:translate(calc(var(--drift) * 1.2em),-7.5em) scale(.4)}}
@keyframes particleFall{0%{opacity:0;transform:translate(0,-1em)}15%{opacity:.9}100%{opacity:0;transform:translate(calc(var(--drift) * 1.5em),8em)}}
@keyframes particleTwinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes particleBubble{0%{opacity:0;transform:translate(0,0)}15%{opacity:.9}50%{transform:translate(calc(var(--drift) * .6em),-3.6em)}100%{opacity:0;transform:translate(calc(var(--drift) * -.4em),-7.5em)}}
@keyframes particleDrift{0%,100%{opacity:0;transform:translate(0,0)}30%,70%{opacity:.9}50%{transform:translate(calc(var(--drift) * 1.2em),-1.4em)}}
@keyframes particlePetal{0%{opacity:0;transform:translate(0,-1em) rotate(0)}15%{opacity:.95}100%{opacity:0;transform:translate(calc(var(--drift) * 2.5em + 1.2em),8em) rotate(540deg)}}
@keyframes particleSpark{0%,100%{opacity:0}8%{opacity:1;transform:rotate(calc(var(--drift) * 40deg))}16%{opacity:0}55%{opacity:0}60%{opacity:.8;transform:translateY(.3em) rotate(calc(var(--drift) * -30deg))}66%{opacity:0}}
@keyframes ringSweep{to{--sweep:360deg}}
@keyframes auraPulse{from{opacity:.5;scale:1.01}to{opacity:.95;scale:1.08}}
@keyframes nameShine{from{background-position:120% 0}to{background-position:-100% 0}}
@keyframes foilDrift{from{background-position:0% 30%}to{background-position:100% 70%}}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-39px) scale(1.1)}}
@keyframes twinkle{from{opacity:.45}to{opacity:.85}}
@keyframes bannerSway{from{transform:skewX(-4deg)}to{transform:skewX(5deg)}}
@keyframes torchlight{0%{opacity:.75}40%{opacity:1}70%{opacity:.85}100%{opacity:.95}}
@keyframes flicker{0%{transform:scale(1,1) skewX(0)}50%{transform:scale(.92,1.08) skewX(3deg)}100%{transform:scale(1.05,.94) skewX(-3deg)}}
@keyframes runeSpin{to{transform:rotate(360deg)}}
@keyframes runeFlare{0%{opacity:.75;filter:none}20%{opacity:1;filter:brightness(2.2) drop-shadow(0 0 20px #ffd58a)}100%{opacity:.75;filter:none}}
@keyframes fogDrift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
@keyframes lanternSway{from{rotate:-5deg}to{rotate:5deg}}
@keyframes sceneFade{from{opacity:0}to{opacity:1}}
@keyframes clashFlash{0%,30%{box-shadow:0 .3em 0 var(--frame-deep)}45%{box-shadow:0 0 0 3px #ffcf7a,0 0 30px #ff8a3a}100%{box-shadow:0 0 0 2px var(--frame-light),0 0 18px var(--frame-glow)}}
@keyframes arenaImpact{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
@media(prefers-reduced-motion:reduce){
  .arena-scene *,.stage-backdrop *,.battle-unit,.combat-float,.card-tilt,.card-foil,.art-layer,.card-particles,.card-ring,.card-aura,.card-name{animation-duration:.01ms!important}
  .card-particles{display:none}
  .scene-layer,.arena{transition:none}
  .game-card,.card-tilt,.art-layer,.card-info,.card-bottom,.hand-grid .deploy-card{transition:none!important}
}

/* ---------- Smaller screens ---------- */
@media(max-width:1100px){
  :root{--rail-w:236px;--stage-pad:18px}
  .run-stats{gap:14px}
  .phase-step span{display:none}
  .phase-track i{width:14px;margin:0 6px}
  .hero>p{display:none}
}
/* Phones and other short screens: the game fills the screen exactly (no page scrolling). The stage and the roster
   share it, switched by tabs in the header. */
.view-tabs{display:none}
@media(max-width:760px),(max-height:520px) and (orientation:landscape){
  :root{--stage-pad:12px}
  body{overflow:hidden}
  .shell{height:100dvh;grid-template-rows:auto minmax(0,1fr)}
  .topbar{flex-wrap:wrap;gap:8px 12px;padding:8px 12px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .phase-track{display:none}
  .brand h1{display:none}
  .view-tabs{display:flex;flex:1;min-width:0;max-width:260px;margin-right:auto;padding:3px;gap:3px;border:1px solid #4b4031;border-radius:10px;background:#0b0f18cc}
  .view-tabs button{flex:1;min-width:0;padding:6px 8px;border:0;border-radius:7px;background:transparent;color:#9d927f;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .view-tabs button[aria-selected="true"]{background:linear-gradient(180deg,#4a3a28,#2c2419);color:var(--gold-light);box-shadow:inset 0 0 0 1px #8a6c45}
  .view-tabs b{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;padding:0 4px;border-radius:9px;background:#d8b87926;color:var(--gold);font-size:10px}
  main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
  body:not([data-view="roster"]) .side-panel{display:none}
  body[data-phase="shop"][data-view="roster"] .stage{display:none}
  /* The roster is a shop-only screen (as on desktop); in other phases the stage tab is just the screen's title. */
  body:not([data-phase="shop"]) .view-tabs [data-view="roster"]{display:none}
  .side-panel{border-left:0;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .stage{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  /* Anything that still doesn't fit (a long experience report) scrolls inside the stage, never the page. */
  .main-panel{overflow-y:auto}
  .hero{padding-top:8px}
  .hero-copy h2{font-size:20px}
  .panel-actions{flex-wrap:wrap}
  .scene-brazier,.scene-rune{display:none}
  .arena-track{margin:0}
  .lab-layout{grid-template-columns:1fr}
  .layer-row{grid-template-columns:1fr 1fr}
  .lab-preview{display:none}
  .lab-heading{display:block}
  .lab-actions{margin:8px 0 20px}
  .card-tooltip{--card-w:220px}
}

/* Portrait phones: everything fits the width, no sideways scrolling. */
@media(max-width:760px){
  .run-stats{order:3;width:100%;justify-content:space-between;gap:8px}
  .action-help span{display:none}
  .panel-actions{padding:10px var(--stage-pad);padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .run-stats span{letter-spacing:.08em}
  .run-stats{flex-wrap:wrap;row-gap:4px}
  .run-stats>.rival-stat{flex-basis:100%;justify-content:center;padding-top:4px;border-top:1px solid var(--line)}
  .action-help{width:100%}
  .zone-label{flex-wrap:wrap;row-gap:6px}
  .zone-label em{white-space:normal}
  .enemy-tease{width:100%}
  .panel-actions>.primary-button,.panel-actions>.secondary-button{flex:1}
  /* Market: all three offers side by side. */
  .market-grid{--card-w:min(calc((100vw - 2 * var(--stage-pad) - 20px) / 3),210px);flex-wrap:nowrap;gap:10px;justify-content:center}
  .market-recruit{padding:8px 2px;font-size:11px}
  /* Hand: an overlapping fan held like real cards (tap one to muster it). Warline: all five in one row. */
  .hand-grid{--card-w:clamp(84px,min((100vw - 2 * var(--stage-pad)) / 3,(100dvh - 500px) / 1.4),160px);--hand-w:calc(100vw - 2 * var(--stage-pad) - 64px)}
  .zone-label em{display:none}
  .lineup-grid{--card-w:calc((100vw - 2 * var(--stage-pad) - 24px) / 5);gap:6px;justify-content:center}
  .deploy-action{padding:6px 2px;font-size:10px}
  .lineup-grid .deploy-action{display:none}
  .slot-label{font-size:8px;letter-spacing:.06em}
  /* Battle: the rival's warline above yours, vanguards stacked on the right so the fronts meet head on. */
  /* Five cards to a row; a line grown past five by summons wraps, its vanguard row nearest the middle. */
  .arena-scene{--card-w:calc((100vw - 2 * var(--stage-pad) - 24px) / 5);--horizon:30%;--ground:9%;min-height:calc(var(--card-w) * 2.8 * var(--rows,1) + 150px)}
  body[data-phase="result"] .arena-scene{min-height:calc(var(--card-w) * 2.8 * var(--rows,1) + 80px)}
  .arena-units{flex-wrap:wrap-reverse;row-gap:8px;width:calc(var(--card-w) * min(var(--slots,5),5) + 6px * (min(var(--slots,5),5) - 1))}
  .arena{overflow:visible;padding-bottom:0;bottom:var(--ground)}
  .arena-track{flex-direction:column-reverse;align-items:center;gap:4px;min-width:0}
  .arena-units{min-height:calc(var(--card-w) * 1.4 + 9px)}
  .enemy-side .arena-units{flex-direction:row-reverse}
  .arena-side{flex-direction:column}
  .enemy-side{flex-direction:column-reverse}
  .arena-versus{flex-direction:row;width:100%;padding:0;align-self:auto;font-size:16px}
  .arena-versus:before,.arena-versus:after{width:auto;height:1px;min-height:0;min-width:16px;background:linear-gradient(90deg,transparent,#9c7049,transparent)}
  .arena-scene .player-side .card3d,.arena-scene .enemy-side .card3d{--ry:0deg;--rx:6deg}
  .player-side .battle-unit.acting,.player-side .battle-unit.clashing{animation-name:lungeUp}
  .enemy-side .battle-unit.acting,.enemy-side .battle-unit.clashing{animation-name:lungeDown}
  /* Character view: fronts meet vertically, so lunges and knockback run up and down. */
  .figure-view .player-side .battle-unit{--dx:0;--dy:-1}
  .figure-view .enemy-side .battle-unit{--dx:0;--dy:1}
  .figure-view .player-side .battle-unit.acting,.figure-view .player-side .battle-unit.clashing,.figure-view .enemy-side .battle-unit.acting,.figure-view .enemy-side .battle-unit.clashing{animation-name:figureLunge}
  /* The rival's row is mirrored here, so its cards shift the same way as yours. */
  .enemy-side .battle-unit.repositioned.to-front{animation-name:shiftRight}
  .enemy-side .battle-unit.repositioned.to-rear{animation-name:shiftLeft}
  .arena-scene .battle-message{bottom:1%;font-size:12px}
}

/* Landscape phones: sized by the short height so a whole row of cards stays on screen. */
@media(max-height:520px) and (orientation:landscape){
  :root{--ui:1}
  .topbar{flex-wrap:nowrap;gap:14px}
  .view-tabs{flex:0 1 220px;margin-right:0}
  .run-stats{margin-left:auto}
  .run-stats{gap:12px}
  .run-stats strong{font-size:14px}
  .hero{padding-top:4px;padding-bottom:6px}
  .hero>p{display:none}
  .hero-copy h2{display:none}
  .panel-actions{padding:8px var(--stage-pad);padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .panel-actions .primary-button,.panel-actions .secondary-button{min-height:34px;padding:7px 14px}
  .action-help span{display:none}
  .zone-label{margin-top:2px}
  .market-grid{--card-w:clamp(96px,min((100dvh - 240px) / 1.4,(100vw - 2 * var(--stage-pad) - 60px) / 3.3),260px);flex-wrap:nowrap;gap:24px;padding-bottom:8px}
  /* Muster: the hand fan on the left, the warline on the right, one row of cards. */
  body[data-phase="deploy"] .main-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;column-gap:18px}
  .hand-label{grid-area:1/1}
  .hand-grid{grid-area:2/1}
  .line-label{grid-area:1/2}
  .lineup-grid{grid-area:2/2;align-self:start}
  body[data-phase="deploy"] .panel-actions{grid-area:3/1/4/3}
  .zone-label em,.line-label .enemy-tease{display:none}
  .hand-grid,.lineup-grid{--card-w:clamp(60px,min((100dvh - 200px) / 1.4,(100vw - 2 * var(--stage-pad) - 60px) / 8.6),150px)}
  .lineup-grid{gap:6px;padding-bottom:0}
  .hand-grid{--hand-w:calc(100vw - 2 * var(--stage-pad) - 5 * var(--card-w) - 80px)}
  .deploy-action{padding:5px 2px;font-size:10px}
  .lineup-grid .deploy-action{display:none}
  .slot-label{font-size:8px;letter-spacing:.06em}
  .arena-scene{--card-w:clamp(44px,min((100vw - 2 * var(--stage-pad) - 110px) / (2 * max(var(--slots,5),5)),(100dvh - 150px) / 1.45),200px);min-height:calc(var(--card-w) * 1.4 + 120px)}
  body[data-phase="result"] .arena-scene{min-height:calc(var(--card-w) * 1.4 + 90px)}
  .arena{padding-top:26px}
  .arena-units{gap:4px;width:calc(var(--card-w) * var(--slots,5) + 4px * (var(--slots,5) - 1))}
}
/* The phone hand fan: cards overlap just enough for the whole hand to fit, and the buttons give way to tapping. */
@media(max-width:760px),(max-height:520px) and (orientation:landscape){
  .hand-grid{flex-wrap:nowrap;justify-content:center;gap:0;min-height:0;padding:10px 0 calc(var(--card-w) * .12 + 10px)}
  .hand-grid .deploy-card+.deploy-card{margin-left:min(6px,(var(--hand-w) - var(--card-w)) / max(var(--count,1) - 1,1) - var(--card-w))}
  .hand-grid .deploy-action{display:none}
  .hand-grid .deploy-card{transform:translateY(calc(var(--fan-y,0px) * .5)) rotate(calc(var(--fan-rot,0deg) * .5))}
  .hand-grid .deploy-card:hover{transform:translateY(calc(var(--fan-y,0px) * .5 - 10px)) rotate(calc(var(--fan-rot,0deg) * .5))}
}
/* In-between widths: the header sheds its phase steps, then the title, rather than widening the page. */
@media(max-width:1300px){.topbar{gap:14px;padding:0 14px}}
/* Online, the rival's standing joins the header; the phase steps drop their labels to make room. */
@media(max-width:1400px){body[data-mode=online] .phase-step span{display:none}body[data-mode=online] .phase-track i{width:14px;margin:0 6px}}
@media(max-width:1000px){.phase-track{display:none}}
@media(max-width:900px){.brand h1{display:none}}
@media(max-width:420px){.brand h1{font-size:14px}.brand{gap:7px}.brand-mark{width:28px;height:28px;font-size:15px}.hud-button{width:29px;height:29px;font-size:13px}.topbar{gap:8px}}
@media(min-width:761px){.narrow-only{display:none}}
@media(max-width:760px){.wide-only{display:none}}
@keyframes lungeUp{0%,100%{transform:perspective(600px) translateY(0)}45%{transform:perspective(600px) translateY(-18px) rotateX(14deg) scale(1.1)}}
@keyframes lungeDown{0%,100%{transform:perspective(600px) translateY(0)}45%{transform:perspective(600px) translateY(18px) rotateX(-14deg) scale(1.1)}}

/* ---------- Start menu / live 1v1 ---------- */
.lobby{position:fixed;inset:0;z-index:60;display:flex;overflow-y:auto;padding:16px;background:radial-gradient(ellipse at 50% 35%,#2a2230f2,#0b0e14fa 70%);backdrop-filter:blur(6px)}
.lobby[hidden]{display:none}
.lobby-card{margin:auto;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:10px;width:min(400px,100%);padding:34px 28px 24px;border:1px solid #856a49;border-radius:18px;background:linear-gradient(160deg,#232b39,#121823);box-shadow:0 30px 100px #000c,inset 0 1px #f0d7a522;text-align:center;zoom:var(--ui)}
.lobby-mark{width:52px;height:52px;font-size:28px;border-radius:14px}
.lobby-card h1{font:700 28px/1.1 Cinzel,Georgia,serif;letter-spacing:.04em;color:var(--ink-strong);text-shadow:0 2px 14px #000}
.lobby-sub{margin:0 0 10px;color:#9d927f;font-size:13px}
.lobby-panel{display:grid;gap:10px;width:100%}
.lobby-panel[hidden],.lobby-panel [hidden]{display:none}
.lobby-panel .primary-button,.lobby-panel .secondary-button{width:100%;min-height:46px;font-size:13px}
.lobby-or{display:flex;align-items:center;gap:10px;color:#7d7566;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.lobby-or:before,.lobby-or:after{content:'';flex:1;height:1px;background:#4b4031}
.join-form{display:flex;gap:8px}
.join-form input{flex:1;width:0;min-width:0;height:46px;padding:0 14px;border:1px solid #6d5a40;border-radius:10px;background:#0f141d;color:var(--gold-light);font:700 20px/1 Cinzel,Georgia,serif;letter-spacing:.3em;text-align:center;text-transform:uppercase}
.join-form input::placeholder{color:#5b5446;font-size:13px;letter-spacing:.2em}
.join-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px #d8b87922}
.join-form .secondary-button{min-height:46px;width:auto}
.lobby-home{justify-self:center;text-decoration:none}
.lobby-label{margin:0;color:#9d927f;font-size:12px}
.room-code{padding:10px 0 6px;font:700 44px/1 Cinzel,Georgia,serif;letter-spacing:.28em;padding-left:.28em;color:var(--gold-light);text-shadow:0 0 22px #e5b96a66;user-select:all}
.lobby-note{margin:4px 0 0;color:#9d927f;font-size:12px;animation:lobby-pulse 1.8s ease-in-out infinite}
@keyframes lobby-pulse{50%{opacity:.45}}
/* Covenant picker: one tile per faction, tinted with its colours. */
.faction-picks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.faction-pick{display:grid;gap:3px;padding:10px 12px;border:1px solid #4b4031;border-radius:10px;background:linear-gradient(160deg,var(--pick,#2a3140),#121823);color:var(--ink);text-align:left;font-size:11px;line-height:1.35}
.faction-pick b{font:700 14px Cinzel,Georgia,serif;color:var(--pick-ink,var(--ink-strong))}
.faction-pick span{color:#a59b8a}
.faction-pick:hover,.faction-pick:focus-visible{border-color:var(--pick-ink,var(--gold));box-shadow:0 0 0 1px var(--pick-ink,var(--gold)),0 6px 20px #0008}
.faction-pick.last-pick{border-color:#8a6c45}
.faction-infernal{--pick:#4a2420;--pick-ink:#f0a178}
.faction-verdant{--pick:#23382b;--pick-ink:#a9d69a}
.faction-astral{--pick:#2d2748;--pick-ink:#c7b8f5}
.faction-abyssal{--pick:#1c3540;--pick-ink:#8fd1dc}
.faction-tempest{--pick:#232f47;--pick-ink:#a8c4f0}
.faction-all{--pick:#2e2a22;--pick-ink:var(--gold-light)}
@media(max-width:420px){.faction-picks{grid-template-columns:1fr}.faction-pick span{display:none}}
.lobby-status,.lobby-error{margin:0;min-height:0;font-size:12px;overflow-wrap:anywhere}
.lobby-status{color:#b9ad96}
.lobby-error{color:#f08a7a}
.lobby-status:empty,.lobby-error:empty{display:none}
body.in-lobby{overflow:hidden}

.run-stats>.rival-stat[hidden]{display:none}
.rival-stat strong{color:#e7a7a0}
.match-timer{display:inline-block;margin-bottom:6px;padding:3px 10px;border:1px solid #6d5a40;border-radius:999px;background:#10151ecc;color:var(--gold-light);font-size:12px;font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.match-timer[hidden]{display:none}
.match-timer.urgent{border-color:#c0584a;color:#ffb3a6;animation:lobby-pulse .9s ease-in-out infinite}
.enemy-tease.rival-note{color:#b9ad96;font-size:11px;font-weight:700;letter-spacing:.04em}
body[data-mode=online] #card-lab-button{display:none}
/* Phones: warline cards have no buttons (tapping a card returns it), so one hint line explains the gestures. */
.deploy-hint{display:none;margin:4px 0 0;text-align:center;color:#8d887e;font-size:11px}
@media(max-width:760px),(max-height:520px) and (orientation:landscape){.deploy-hint{display:block}}
@media(max-height:520px) and (orientation:landscape){.deploy-hint{grid-area:2/2;align-self:end;margin:0 0 6px}}
.net-banner{position:fixed;top:max(10px,env(safe-area-inset-top));left:50%;z-index:70;display:flex;align-items:center;gap:10px;padding:8px 16px;translate:-50% 0;border:1px solid #8a6c45;border-radius:999px;background:#141a25f2;color:var(--gold-light);font-size:13px;font-weight:800;box-shadow:0 10px 30px #000a}
.net-banner[hidden]{display:none}
.net-banner i{width:12px;height:12px;border:2px solid #d8b87955;border-top-color:var(--gold-light);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{rotate:360deg}}