@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ------------------------------------------------------------------ tokens */
:root{
 color-scheme:dark;
 --ink:#0a1216;--ink-2:#0f1b21;--panel:rgba(11,21,27,.8);--panel-2:rgba(18,32,40,.9);
 --line:rgba(214,183,123,.24);--line-soft:rgba(255,255,255,.08);
 --gold:#d6b77b;--gold-hi:#f4d9a0;--text:#eef0e8;--muted:#a3b3b7;
 --army:#194276;--metal:#e2ba72;
 --health:#d94b43;--health-hi:#ff8a6b;--mana:#3d97df;--mana-hi:#8fd3ff;--command:#e9b949;--ally:#8fe6c5;--enemy:#ff7a64;
 --radius:12px;--glass:blur(14px) saturate(1.25);
 --shadow:0 18px 60px rgba(0,0,0,.45);
 --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)
}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--text);font:16px/1.5 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;border:1px solid rgba(214,183,123,.28);background:linear-gradient(180deg,rgba(35,52,61,.92),rgba(20,33,40,.92));padding:12px 18px;border-radius:9px;transition:border-color .18s,background .18s,transform .18s,box-shadow .18s}
button:hover:not(:disabled){border-color:var(--gold);box-shadow:0 0 0 1px rgba(214,183,123,.25),0 8px 24px rgba(0,0,0,.3)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
a{color:var(--gold);text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;letter-spacing:.01em}
kbd{font:700 11px/1 Manrope,system-ui;letter-spacing:.04em;border:1px solid rgba(255,255,255,.22);border-bottom-width:2px;background:rgba(9,18,23,.8);padding:4px 6px;border-radius:5px;color:#f1ecdc;white-space:nowrap}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.tag{font-size:11px;font-weight:700;letter-spacing:.14em;border:1px solid var(--line);padding:7px 11px;border-radius:999px;color:var(--gold)}
[hidden]{display:none!important}
.touch-copy{display:none}.touch-story .touch-copy{display:block}.touch-story .desktop-copy{display:none}
.cta{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;background:linear-gradient(135deg,var(--gold-hi),var(--gold) 45%,#b48a4a);color:#1a1409;font-weight:800;letter-spacing:.02em;padding:15px 20px;box-shadow:0 10px 30px rgba(214,183,123,.25),inset 0 1px 0 rgba(255,255,255,.5)}
.cta:hover:not(:disabled){box-shadow:0 14px 36px rgba(214,183,123,.35),inset 0 1px 0 rgba(255,255,255,.6);border:0}
.cta kbd{background:rgba(26,20,9,.18);border-color:rgba(26,20,9,.35);color:#1a1409}
.secondary{width:100%}
.ghost-button{background:transparent}

/* -------------------------------------------------------------- selection */
#selection{position:relative;min-height:100vh;min-height:100dvh;padding:0 clamp(16px,3.4vw,48px) 40px;overflow:hidden;isolation:isolate}
.select-backdrop{position:fixed;inset:0;z-index:-1;background:radial-gradient(1200px 700px at 18% 20%,color-mix(in srgb,var(--army) 38%,transparent),transparent 60%),radial-gradient(900px 600px at 90% 90%,rgba(214,183,123,.12),transparent 60%),linear-gradient(180deg,#0b151a,#070d10);transition:background 1s}
.select-backdrop i{position:absolute;inset:-20%;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(214,183,123,.03) 0 12.5%,transparent 0 25%);background-size:180px 180px;opacity:.5;transform:rotate(12deg);mask-image:radial-gradient(circle at 30% 30%,#000,transparent 70%)}
.select-backdrop i+i{background:radial-gradient(circle at 70% 20%,rgba(255,220,160,.07),transparent 40%);transform:none;opacity:1;animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-4%,3%)}}
.select-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:78px;border-bottom:1px solid var(--line-soft);font-size:14px}
.select-header .brand{font:600 20px 'Cormorant Garamond',Georgia,serif;letter-spacing:.08em}
.back-link{font-weight:700}
.select-main{display:grid;grid-template-columns:minmax(360px,.95fr) minmax(0,1.25fr);gap:clamp(20px,3vw,44px);padding-top:clamp(20px,4vh,44px);align-items:start;max-width:1600px;margin:auto}
.select-hero{position:sticky;top:20px;display:grid;gap:18px}
.select-hero h1{font-size:clamp(44px,5.2vw,78px);line-height:.98;margin-top:6px}
.lede{color:var(--muted);max-width:520px}
.hero-card{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr);gap:20px;padding:20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--army) 26%,rgba(16,28,34,.92)),rgba(10,19,24,.94));box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:var(--glass)}
.hero-portrait{position:relative;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--metal) 26%,transparent),transparent 65%),#081014;min-height:220px;display:grid;place-items:center}
.hero-portrait img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5));animation:float 6s ease-in-out infinite}
.portrait-glow{position:absolute;inset:auto 10% 6% 10%;height:14%;background:radial-gradient(ellipse,color-mix(in srgb,var(--metal) 45%,transparent),transparent 70%);filter:blur(6px)}
@keyframes float{50%{transform:translateY(-6px)}}
.hero-info{display:grid;gap:9px;align-content:start;min-width:0}
.hero-info h2{font-size:clamp(28px,2.6vw,38px);line-height:1.02}
.leader{color:var(--muted);font-size:14px}
.xp-line{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted);margin-top:4px}
.xp-line strong{color:var(--gold-hi);font-size:15px}
.xp-track{height:5px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.xp-track i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-hi));transform-origin:left;transform:scaleX(0);transition:transform .5s}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:6px 0 4px}
.hero-stats div{border-top:1px solid var(--line-soft);padding-top:8px;min-width:0}
.hero-stats dt{font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.hero-stats dd{margin:2px 0 0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#load-status{color:var(--gold);font-size:13px}#load-status:empty{display:none}
/* Where the King fights: the practice hall or a campaign chamber. */
.chamber-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:2px 0}
.chamber-pick{position:relative;display:grid;gap:1px;align-content:start;min-width:0;padding:8px 9px 9px;text-align:left;border-radius:10px;border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(160deg,color-mix(in srgb,var(--tone) 34%,#111d23),#0b1519 80%);color:var(--text);transition:border-color .2s,box-shadow .2s,transform .2s}
.chamber-pick::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 80% 0,color-mix(in srgb,var(--glow) 40%,transparent),transparent 65%);opacity:.45;pointer-events:none;transition:opacity .2s}
.chamber-pick:hover{transform:translateY(-1px)}
.chamber-pick:hover::before,.chamber-pick[aria-checked=true]::before{opacity:1}
.chamber-pick[aria-checked=true]{border-color:var(--glow);box-shadow:0 0 0 1px var(--glow),inset 0 -2px 0 var(--glow)}
.chamber-pick small{font-size:9px;letter-spacing:.16em;color:var(--muted);font-weight:700}
.chamber-pick strong{font:600 14px/1.1 'Cormorant Garamond',Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chamber-pick span{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chamber-pick em{position:absolute;top:6px;right:7px;font-style:normal;font-size:10px;color:var(--glow)}
.controls-card{font-size:13px;line-height:2.1;color:var(--muted);padding:14px 16px;border:1px solid var(--line-soft);border-radius:12px;background:rgba(9,17,21,.6)}
.controls-card kbd{margin:0 5px 0 12px}.controls-card kbd:first-child{margin-left:0}
.select-roster{min-width:0}
.roster-head{display:flex;align-items:center;justify-content:space-between;margin:6px 0 14px}
.roster-head h2{font-size:30px}
#kings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.king-card{position:relative;padding:0;overflow:hidden;text-align:left;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(165deg,color-mix(in srgb,var(--army) 30%,#17242b),#0e181d 70%);isolation:isolate}
.king-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--metal) 28%,transparent),transparent 60%);opacity:.35;transition:opacity .25s;z-index:-1}
.king-card:hover::before,.king-card[aria-pressed=true]::before{opacity:.9}
.king-card[aria-pressed=true]{border-color:var(--metal);box-shadow:0 0 0 1px var(--metal),0 12px 30px rgba(0,0,0,.4),inset 0 -3px 0 var(--metal)}
.king-card img{width:100%;height:132px;object-fit:contain;display:block;margin-top:8px;transition:transform .35s}
.king-card:hover img,.king-card[aria-pressed=true] img{transform:scale(1.06) translateY(-2px)}
.card-meta{display:grid;padding:8px 12px 12px}
.card-meta strong{font-size:14px;line-height:1.25}
.card-meta small{font-size:10px;letter-spacing:.14em;color:var(--muted)}
.king-card .number{position:absolute;z-index:2;left:10px;top:8px;color:#c6d1cd;font-size:11px;font-weight:700}
.card-level{position:absolute;z-index:2;right:8px;top:7px;font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--gold-hi);background:rgba(8,15,19,.7);border:1px solid var(--line);padding:2px 6px;border-radius:99px}

/* ---------------------------------------------------------- loading veil */
#loading-veil{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--army) 35%,rgba(6,12,15,.9)),rgba(4,8,10,.96));backdrop-filter:blur(10px)}
.veil-card{display:grid;justify-items:center;gap:14px;width:min(420px,86vw);text-align:center}
.veil-card img{width:200px;height:220px;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6));animation:float 4s ease-in-out infinite}
.veil-bar{width:100%;height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.veil-bar i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--gold-hi));transition:transform .3s;box-shadow:0 0 12px var(--gold)}
#loading-text{color:var(--muted);font-size:14px}

/* ------------------------------------------------------------ game layers */
body.playing{overflow:hidden}
#game,#viewport{position:fixed;inset:0}
canvas{width:100%;height:100%;display:block;touch-action:none}
#vignette{position:absolute;inset:0;pointer-events:none;z-index:1}
#vignette i{position:absolute;inset:0}
#vignette::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 58%,rgba(3,7,9,.55) 100%)}
.v-low{opacity:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(190,24,24,.5) 100%);transition:opacity .4s}
#vignette.low .v-low{opacity:1;animation:heartbeat 1.1s ease-in-out infinite}
@keyframes heartbeat{0%,100%{opacity:.55}14%{opacity:1}28%{opacity:.7}42%{opacity:.95}}
.v-flash{opacity:0}
.v-flash[data-kind=hurt]{background:radial-gradient(ellipse at center,rgba(255,40,30,.08) 30%,rgba(210,20,20,.55) 100%)}
.v-flash[data-kind=heal]{background:radial-gradient(ellipse at center,transparent 40%,rgba(90,230,140,.4) 100%)}
.v-flash[data-kind=decree]{background:radial-gradient(circle at center,rgba(255,236,180,.55),rgba(255,200,90,.18) 45%,transparent 75%)}
#nameplates,#damage-numbers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#nameplates{z-index:2}#damage-numbers{z-index:4}
.plate{position:absolute;left:0;top:0;width:104px;margin:-34px 0 0 -52px;text-align:center;will-change:transform;text-shadow:0 1px 3px #000,0 0 8px rgba(0,0,0,.6)}
.plate-name{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;color:#d8fff0;white-space:nowrap}
.plate-bar{position:relative;height:6px;margin-top:4px;border-radius:4px;background:rgba(5,14,12,.85);border:1px solid rgba(143,230,197,.45);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.plate-bar i{position:absolute;inset:0;transform-origin:left}
.plate-bar .ghost{background:#f5f0d8}
.plate-bar .fill{background:linear-gradient(90deg,#57c99a,#a8f5d4)}
.plate-mark{display:block;font-size:9px;font-weight:800;letter-spacing:.14em;color:var(--gold-hi);min-height:12px;margin-top:2px}
.plate.primary .plate-name{color:var(--gold-hi)}
.plate.primary .plate-bar{border-color:var(--gold)}
.plate.enemy .plate-name{color:#ffd2c7}
.plate.enemy .plate-bar{border-color:rgba(255,122,100,.55)}
.plate.enemy .fill{background:linear-gradient(90deg,#c9372e,#ff8a6b)}
.plate.king{width:150px;margin-left:-75px}
.plate.king .plate-name{font-size:11px;color:#ffe2c8}
.plate.king .plate-bar{height:8px}
.plate.target .fill{background:linear-gradient(90deg,#b88a3e,#f4d9a0)}
.plate.target .plate-name{color:#f4e2bd}
.plate.targeted .plate-bar{box-shadow:0 0 0 2px rgba(255,255,255,.35),0 0 14px rgba(255,122,100,.6)}
.plate.warning .plate-name{color:#ff9b82;animation:blink .35s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
.damage-number{position:absolute;left:0;top:0;font:800 20px/1 Manrope,system-ui;color:#fff3d6;text-shadow:0 2px 0 #3a2508,0 0 10px rgba(255,190,90,.65);white-space:nowrap;will-change:transform,opacity}
.damage-number.heavy{font-size:30px;color:#ffd06a;text-shadow:0 2px 0 #4a1c05,0 0 16px rgba(255,140,40,.8)}
.damage-number.taken{color:#ff8b7e;font-size:22px;text-shadow:0 2px 0 #3a0808,0 0 10px rgba(255,60,40,.6)}
.damage-number.heal{color:#9ff5b6}
.damage-number.evade{color:#9fe8ff;font-size:16px;letter-spacing:.14em;text-shadow:0 2px 0 #06303a,0 0 12px rgba(120,220,255,.7)}

/* ----------------------------------------------------------------- HUD */
.hud-card{position:absolute;z-index:5;background:linear-gradient(160deg,rgba(16,29,36,.82),rgba(8,16,20,.78));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:var(--glass);pointer-events:none}
#objective-card{top:18px;left:20px;width:310px;padding:14px 16px}
#objective-card h3{font-size:24px;line-height:1.1;margin:5px 0 4px}
#objective-text{font-size:13px;color:#c7d3d4;line-height:1.5}
#objective-goals{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
#objective-goals li{font-size:12px;color:var(--muted);padding-left:18px;position:relative}
#objective-goals li::before{content:'';position:absolute;left:2px;top:5px;width:8px;height:8px;border:1.5px solid var(--gold);transform:rotate(45deg)}
#objective-goals li.done{color:var(--gold-hi)}
#objective-goals li.done::before{background:var(--gold)}
#wave-timer{height:3px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:8px;overflow:hidden}
#wave-timer i{display:block;height:100%;background:var(--gold);transform-origin:left}
#boss-bar{position:absolute;z-index:5;top:16px;left:50%;transform:translateX(-50%);width:min(620px,46vw,calc(100vw - 912px));pointer-events:none;filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
.boss-head{display:flex;align-items:flex-end;gap:10px;margin-bottom:6px}
#boss-icon{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,122,100,.6);box-shadow:0 0 16px rgba(255,90,60,.35);object-fit:cover}
.boss-names{flex:1;min-width:0}
.boss-names .eyebrow{color:#ff9b82;font-size:10px}
#boss-name{display:block;font:600 22px/1.05 'Cormorant Garamond',Georgia,serif;text-shadow:0 2px 6px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#boss-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.chip{font-size:10px;font-weight:800;letter-spacing:.12em;padding:4px 8px;border-radius:99px;border:1px solid;background:rgba(10,14,16,.8)}
.chip.warn{color:#ffb39c;border-color:#ff7a64;animation:blink .3s steps(2) infinite}
.chip.rage{color:#ffd0c0;border-color:#ff3b2f;background:rgba(120,10,6,.6)}
.chip.stun{color:#fff1a8;border-color:#e9c95a}
.chip.cast{color:#ffc9b8;border-color:#ff9b82}
.boss-track{position:relative;height:14px;border-radius:7px;background:rgba(10,6,6,.85);border:1px solid rgba(255,122,100,.5);overflow:hidden;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.boss-track i{position:absolute;inset:0;transform-origin:left}
.boss-track .ghost{background:#f8e2c4}
.boss-track .fill{background:linear-gradient(180deg,#ff6b52,#b52a22 60%,#7c1510);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
#boss-bar:not(.king) .boss-track{border-color:rgba(214,183,123,.5)}
#boss-bar:not(.king) .fill{background:linear-gradient(180deg,#f2cf85,#b4843c 60%,#7a5520)}
#boss-bar:not(.king) .eyebrow{color:var(--gold)}
#boss-hp{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:800;letter-spacing:.08em;text-shadow:0 1px 2px #000}
#view-label{position:absolute;z-index:5;left:50%;top:92px;transform:translateX(-50%);font-size:10px;font-weight:800;letter-spacing:.16em;color:#cfe0da;background:rgba(10,20,25,.7);border:1px solid var(--line-soft);padding:6px 11px;border-radius:99px;pointer-events:none;white-space:nowrap;opacity:.8}
.tactical-view #view-label{color:#bdf4de;border-color:rgba(135,187,155,.5);opacity:1}
.hud-buttons{position:absolute;z-index:6;top:18px;right:20px;display:flex;gap:8px}
.hud-buttons button{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:13px;font-weight:700;background:rgba(12,23,29,.78);backdrop-filter:var(--glass)}
.hud-buttons svg{width:16px;height:16px;fill:var(--gold)}
.hud-buttons button[aria-pressed=true]{border-color:#8fe6c5;color:#dfffee}
.hud-legend{position:absolute;z-index:5;top:66px;right:22px;display:flex;gap:14px;font-size:11px;color:#b8c6c8;pointer-events:none;text-shadow:0 1px 3px #000}
.hud-legend span{display:flex;align-items:center;gap:6px}
#camera-hint{color:var(--gold)}

#king-frame{bottom:20px;left:20px;width:372px;padding:14px 16px 12px 14px;display:grid;grid-template-columns:78px minmax(0,1fr);gap:14px;align-items:center}
.king-portrait{position:relative;width:78px;height:78px}
#hud-portrait{position:absolute;inset:7px;width:64px;height:64px;border-radius:50%;object-fit:cover;background:#081014;border:1px solid rgba(255,255,255,.12)}
.xp-ring{position:absolute;inset:0;width:78px;height:78px;transform:rotate(-90deg)}
.xp-ring circle{fill:none;stroke-width:3.2;stroke-linecap:round}
.xp-track{stroke:rgba(255,255,255,.1)}
.xp-fill{stroke:var(--metal);filter:drop-shadow(0 0 4px var(--metal));transition:stroke-dasharray .4s}
.level-badge{position:absolute;right:-4px;bottom:-2px;min-width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,var(--gold-hi),#a67a3c);color:#1a1208;font-size:13px;font-weight:800;border:2px solid #0b1418;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.king-bars{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;min-width:0}
.king-name-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
#hud-king-name{font:600 18px/1 'Cormorant Garamond',Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#player-xp-text{font-size:11px;color:var(--muted);white-space:nowrap}
#hero-label{font-size:11px;color:var(--muted);margin-top:-3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{position:relative;height:17px;border-radius:5px;background:rgba(3,8,10,.75);border:1px solid rgba(255,255,255,.1);overflow:hidden;box-shadow:inset 0 2px 5px rgba(0,0,0,.55)}
.bar i{position:absolute;inset:0;transform-origin:left}
.bar .ghost{background:rgba(255,238,210,.75)}
.bar.health .fill{background:linear-gradient(180deg,var(--health-hi),var(--health) 55%,#8e201b)}
.bar.mana .ghost{background:rgba(210,240,255,.6)}
.bar.mana .fill{background:linear-gradient(180deg,var(--mana-hi),var(--mana) 55%,#1c5a93)}
.bar.mana .cost{left:auto;right:auto;width:var(--cost,0%);background:repeating-linear-gradient(135deg,rgba(255,255,255,.4) 0 4px,transparent 4px 8px);opacity:.9;animation:blink .6s steps(2) infinite}
.bar.command{height:9px}
.bar.command .fill{background:linear-gradient(90deg,#9c6b1c,var(--command),#fff0b4)}
.bar.command.ready{border-color:var(--gold);box-shadow:0 0 12px rgba(233,185,73,.7),inset 0 2px 5px rgba(0,0,0,.3);animation:glow 1.1s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 22px rgba(255,210,110,.95),inset 0 2px 5px rgba(0,0,0,.3)}}
.bar-label,.bar-value{position:absolute;top:50%;transform:translateY(-50%);font-size:10px;font-weight:800;letter-spacing:.12em;text-shadow:0 1px 2px #000,0 0 4px #000}
.bar-label{left:8px;color:rgba(255,255,255,.88)}
.bar-value{right:8px;letter-spacing:.04em;font-size:11px}
.bar.command .bar-label{top:auto;bottom:calc(100% + 3px);left:auto;right:0;transform:none;font-size:9px;line-height:1;color:var(--gold-hi)}
.bar.command{overflow:visible;margin-top:14px}
.bar.command .fill{border-radius:4px}
.bar.critical .fill{animation:pulse-red .8s ease-in-out infinite}
@keyframes pulse-red{50%{filter:brightness(1.5)}}
.coins{position:absolute;top:10px;right:12px;display:none;align-items:center;gap:5px;font-size:12px;color:var(--gold-hi)}
.coins svg{width:14px;height:14px;fill:var(--gold)}

#action-bar{position:absolute;z-index:6;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px;padding:10px 12px;border-radius:16px;background:linear-gradient(180deg,rgba(14,26,32,.7),rgba(7,14,18,.82));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:var(--glass)}
.action{position:relative;width:72px;height:78px;padding:6px 4px 5px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;border-radius:12px;background:radial-gradient(circle at 50% 35%,rgba(62,86,98,.55),rgba(14,24,30,.95) 70%);border:1px solid rgba(214,183,123,.3);overflow:hidden}
.action kbd{position:absolute;top:4px;left:4px;font-size:9px;padding:2px 4px;z-index:2}
.action small{font-size:10px;font-weight:700;line-height:1.1;text-align:center;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2;text-shadow:0 1px 2px #000}
.action-icon{width:30px;height:30px;fill:var(--gold-hi);margin-bottom:auto;margin-top:15px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));z-index:1}
.action-portrait{position:absolute;inset:14px 12px 20px;width:calc(100% - 24px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;z-index:1;border:1px solid rgba(255,255,255,.2)}
.action .action-portrait:not([hidden])~.action-icon,.action .action-portrait:not([hidden])+.action-icon{visibility:hidden}
.switch .action-portrait:not([hidden]){z-index:1}
.switch:has(.action-portrait:not([hidden])) .action-icon{visibility:hidden}
.strike.primary .action-icon{visibility:hidden}
.action .cd{position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;background:conic-gradient(rgba(4,9,12,.78) calc(var(--cd,0) * 360deg),transparent 0)}
.action.ready{border-color:rgba(143,230,197,.5)}
.combo-pips{position:absolute;top:6px;right:6px;display:flex;gap:3px;z-index:2}
.combo-pips i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .12s,box-shadow .12s}
.strike[data-step="0"] .combo-pips i:nth-child(-n+1),.strike[data-step="1"] .combo-pips i:nth-child(-n+2),.strike[data-step="2"] .combo-pips i{background:var(--gold-hi);box-shadow:0 0 6px var(--gold)}
.strike[data-step="2"]{border-color:var(--gold-hi);box-shadow:0 0 18px rgba(244,217,160,.45)}
.raise.blocked .action-icon{fill:#8b8f8c}
.decree .action-icon{fill:#a58a52}
.decree.ready{border-color:var(--gold-hi);background:radial-gradient(circle at 50% 35%,rgba(233,185,73,.55),rgba(40,26,8,.95) 70%);animation:glow 1.1s ease-in-out infinite}
.decree.ready .action-icon{fill:#fff2c6}
.decree.ready small{color:#fff2c6}

#squad-panel{bottom:20px;right:20px;width:312px;padding:12px 12px 10px}
#squad-panel header{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--gold);margin:0 4px 8px}
#squad-panel header strong{font-size:13px;letter-spacing:.05em;color:var(--text)}
#squad-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.soldier-card{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(143,230,197,.18)}
.soldier-card img,.card-glyph{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;font-size:24px;background:#0b171b}
.soldier-card.equipped{border-color:var(--gold);background:linear-gradient(90deg,rgba(214,183,123,.16),rgba(255,255,255,.03))}
.card-body{min-width:0}
.card-body strong{font-size:13px;display:block}
.card-body small{font-size:10.5px;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-bar{height:4px;border-radius:3px;background:rgba(0,0,0,.5);overflow:hidden;margin-top:4px}
.card-bar i{display:block;height:100%;transform-origin:left;background:linear-gradient(90deg,#57c99a,#a8f5d4)}
.card-badge{position:absolute;top:5px;right:7px;font-size:8.5px;font-weight:800;letter-spacing:.14em;color:#1a1409;background:var(--gold);padding:2px 5px;border-radius:4px}
.promo-pips{position:absolute;bottom:7px;right:8px;display:flex;gap:3px}
.promo-pips i{width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--gold);background:transparent}
.promo-pips i.on{background:var(--gold-hi);box-shadow:0 0 6px var(--gold)}
#companion-status{font-size:12px;color:var(--muted);line-height:1.5;padding:2px 4px}

#crosshair{position:absolute;z-index:4;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
#crosshair svg{width:100%;height:100%;overflow:visible}
#crosshair .tick{stroke:#f6e7bb;stroke-width:2.2;stroke-linecap:round;fill:none;transform-origin:32px 32px;transform:scale(var(--spread,1));transition:transform .08s}
#crosshair .dot{fill:#f6e7bb}
#crosshair-charge{fill:none;stroke:var(--charge-color,#c9a5ff);stroke-width:3;stroke-linecap:round;transform:rotate(-90deg);transform-origin:32px 32px;opacity:0;transition:opacity .2s;filter:drop-shadow(0 0 4px var(--charge-color,#c9a5ff))}
#crosshair.on-target .tick,#crosshair.on-target .dot{stroke:#ff8f76;fill:#ff8f76}
#crosshair.on-target .dot{fill:#ff8f76}
#hit-marker{position:absolute;z-index:4;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}
#hit-marker i{position:absolute;left:50%;top:50%;background:#fff;box-shadow:0 0 6px rgba(255,220,160,.9)}
#hit-marker i:first-child{width:26px;height:2px;margin:-1px 0 0 -13px}
#hit-marker i:last-child{width:2px;height:26px;margin:-13px 0 0 -1px}
#hit-marker.heavy i{background:#ffd06a}
#charge-label{position:absolute;z-index:4;left:50%;top:calc(50% + 42px);transform:translateX(-50%);font-size:11px;font-weight:700;letter-spacing:.06em;color:#eadcff;background:rgba(18,14,32,.75);border:1px solid rgba(201,165,255,.45);padding:5px 10px;border-radius:99px;white-space:nowrap;pointer-events:none}
#ground-hint{position:absolute;z-index:4;top:calc(50% + 76px);left:50%;transform:translateX(-50%);max-width:min(460px,90vw);width:max-content;font-size:12px;color:#d5f7e8;text-shadow:0 1px 3px #000;background:rgba(8,26,20,.72);border:1px solid rgba(143,230,197,.25);padding:7px 12px;border-radius:8px;pointer-events:none;text-align:center}
#feedback{position:absolute;z-index:5;left:50%;bottom:132px;transform:translateX(-50%) translateY(8px);max-width:min(560px,90vw);width:max-content;padding:8px 16px;border-radius:99px;font-size:13.5px;font-weight:600;color:#ffe7b5;background:linear-gradient(90deg,transparent,rgba(12,20,24,.85) 12%,rgba(12,20,24,.85) 88%,transparent);text-shadow:0 1px 3px #000;pointer-events:none;opacity:0;transition:opacity .25s,transform .25s;text-align:center}
#feedback.show{opacity:1;transform:translateX(-50%) translateY(0)}
.banner{position:absolute;z-index:8;left:50%;top:32%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:4px;pointer-events:none;text-align:center;width:max-content;max-width:92vw}
.banner strong{font:700 clamp(40px,7vw,88px)/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.14em;background:linear-gradient(180deg,#fff6dc,var(--gold-hi) 45%,#b58947);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 12px rgba(0,0,0,.7)) drop-shadow(0 0 24px rgba(244,200,120,.35))}
.banner small{font-size:12px;font-weight:800;letter-spacing:.28em;color:#f3e3c0;text-shadow:0 2px 6px #000;text-transform:uppercase}
.banner::before,.banner::after{content:'';width:min(440px,70vw);height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.banner::before{order:-1}
.banner.red strong{background:linear-gradient(180deg,#ffe8dc,#ff9b82 45%,#b3322a);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 4px 12px rgba(0,0,0,.7)) drop-shadow(0 0 24px rgba(255,90,60,.4))}
.banner.red::before,.banner.red::after{background:linear-gradient(90deg,transparent,#ff7a64,transparent)}

/* hide gameplay HUD while menus are open */
.story-paused #action-bar,.story-paused #crosshair,.story-paused #ground-hint,.story-paused #charge-label,.story-paused #feedback,.story-paused .hud-legend,.story-paused #touch-controls,
.story-paused #objective-card,.story-paused #boss-bar,.story-paused #view-label,.story-paused .hud-buttons,.story-paused #king-frame,.story-paused #squad-panel,.story-paused #nameplates,.story-paused #damage-numbers,.story-paused #banner{visibility:hidden}
.command-open #touch-controls,.command-open #crosshair{visibility:hidden}
.tactical-view #crosshair,.tactical-view #charge-label{display:none!important}
.tactical-view #ground-hint{top:auto;bottom:128px}
.tactical-view #feedback{bottom:172px}
.tactical-view canvas{cursor:crosshair}

/* --------------------------------------------------------------- overlays */
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(8,16,20,.55),rgba(3,7,9,.82));backdrop-filter:blur(7px);padding:16px}

#training-panel{z-index:24}
.training-card{width:min(680px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:26px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(18,32,40,.97),rgba(9,17,21,.97));box-shadow:0 30px 120px rgba(0,0,0,.6)}
.training-card h2{font-size:36px;margin:4px 0 8px}
.training-intro,.training-help{color:#b9c8cb;font-size:13.5px;line-height:1.6;margin:0 0 16px}
.training-help{margin:16px 0 10px}
.training-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.training-tools button{font-size:14px;padding:12px;min-height:46px;min-width:0}
.training-tools .accent{border-color:rgba(143,230,197,.55);background:linear-gradient(180deg,rgba(40,80,66,.9),rgba(22,48,40,.92))}
.training-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line-soft);padding:9px 0;font-size:13px}
.training-row span{min-width:0}
.training-row button{padding:8px 12px;font-size:13px;min-height:40px;flex-shrink:0}
#training-squad:empty{display:none}
#training-squad{border-bottom:1px solid var(--line);margin:10px 0}
#training-list{max-height:200px;overflow:auto;font-size:13px;color:var(--muted)}
#training-close{margin-top:18px}

#actions-scrim{position:absolute;inset:0;z-index:11;background:rgba(4,10,14,.35)}
#tile-actions{position:absolute;z-index:12;width:290px;max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);overflow:auto;padding:16px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(18,32,40,.97),rgba(9,17,21,.97));box-shadow:0 16px 50px rgba(0,0,0,.6)}
#tile-actions h3{font-size:26px;margin:4px 0}
#action-note{font-size:12px;line-height:1.5;color:#b9cbd1;margin-bottom:10px}
#tile-actions button{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:6px;font-size:13.5px;text-align:left;min-height:42px;padding:9px 12px}
#tile-actions kbd{font-size:9px;padding:2px 5px}
#tile-actions label{display:block;margin:12px 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--gold)}
#command-soldier{width:100%;padding:10px;border-radius:8px;background:#10222b;color:#fff;border:1px solid rgba(214,183,123,.35);font:inherit;font-size:13.5px}
#action-close{justify-content:center!important}

#summon-wheel{z-index:10;background:radial-gradient(circle at 50% 50%,rgba(10,22,28,.6),rgba(3,7,9,.86))}
.wheel-panel{width:min(560px,100vw);max-height:100dvh;overflow:auto;text-align:center;padding:18px 16px}
.wheel-panel h2{font-size:40px;margin-top:2px}
.wheel-ring{position:relative;width:min(460px,92vw);aspect-ratio:1;margin:6px auto}
.wheel-art{position:absolute;inset:0;width:100%;height:100%;animation:spin 60s linear infinite}
.wheel-art circle{fill:none;stroke:rgba(214,183,123,.35);stroke-width:1.5;stroke-dasharray:2 6}
.wheel-art circle.thin{stroke:rgba(214,183,123,.18);stroke-dasharray:none}
@keyframes spin{to{transform:rotate(360deg)}}
.wheel-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150px;display:grid;gap:6px}
.wheel-center span{font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--gold)}
.wheel-center strong{font-size:13px}
.wheel-center small{font-size:10.5px;color:var(--muted)}
.wheel-option{position:absolute;left:calc(50% + 38% * cos(var(--a)));top:calc(50% + 38% * sin(var(--a)));transform:translate(-50%,-50%);width:118px;min-height:128px;padding:8px 6px 7px;display:flex;flex-direction:column;align-items:center;gap:2px;border-radius:14px;background:radial-gradient(circle at 50% 30%,rgba(60,86,98,.6),rgba(12,22,28,.96) 72%);border:1px solid rgba(143,230,197,.45)}
.wheel-option:hover:not(:disabled),.wheel-option:focus-visible{transform:translate(-50%,-50%) scale(1.07);border-color:var(--gold-hi);box-shadow:0 0 24px rgba(244,217,160,.35)}
.wheel-option img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.18)}
.wheel-option img:not([hidden])+.piece-glyph{display:none}
.piece-glyph{font-size:38px;line-height:58px;height:58px}
.wheel-option strong{font-size:14px}
.wheel-option small{font-size:10.5px;color:#d0dcdc}
.wheel-option em{font-size:10px;font-style:normal;color:#b8dec9}
.wheel-option kbd{position:absolute;top:6px;left:6px;font-size:9px;padding:2px 5px}
.wheel-option:disabled{opacity:.45;filter:grayscale(.7)}
.wheel-option.pawn{--a:-90deg}.wheel-option.knight{--a:-18deg}.wheel-option.bishop{--a:54deg}.wheel-option.rook{--a:126deg}.wheel-option.queen{--a:198deg}
.wheel-option.bishop:not(:disabled){border-color:rgba(201,165,255,.6)}
.wheel-option.queen:not(:disabled){border-color:rgba(255,210,154,.6)}
#wheel-reason{font-size:13.5px;line-height:1.55;color:#c8d7dc;max-width:460px;margin:8px auto 14px;min-height:42px}
#wheel-cancel{padding:10px 22px}
#wheel-cancel kbd{margin-left:10px}

/* ------------------------------------------------------------------ touch */
#touch-controls{display:none}
.touch-story .hud-legend,.touch-story #view-toggle{display:none!important}
.touch-story #touch-controls{display:block;position:absolute;inset:0;pointer-events:none;z-index:7}
.touch-story #touch-controls button,.touch-story #move-stick{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}
/* No page zoom on a touch screen: one finger still scrolls the menus, but a pinch or a
   double tap never scales the page (story-touch.js stops iOS's gestures too). The game
   itself takes every gesture, and a held button never selects text or opens a callout. */
html:has(body.touch-story),body.touch-story{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%}
.touch-story #action-bar,.touch-story #action-bar *,.touch-story #touch-controls,.touch-story #touch-controls *{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.touch-story #move-stick{position:absolute;left:max(18px,var(--safe-left));bottom:calc(22px + var(--safe-bottom));width:132px;height:132px;border-radius:50%;background:radial-gradient(circle,rgba(20,40,52,.35),rgba(10,24,32,.7));border:2px solid rgba(167,201,210,.4);box-shadow:0 0 0 10px rgba(11,28,35,.25),inset 0 0 30px rgba(0,0,0,.4);display:grid;place-items:center}
.touch-story #move-stick>span{position:absolute;top:12px;font-size:9px;font-weight:800;letter-spacing:.18em;color:#e0ecee;pointer-events:none}
.touch-story #move-thumb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border:2px solid rgba(244,217,160,.75);border-radius:50%;background:radial-gradient(circle at 40% 35%,#f4e2b8,#b99a5c);box-shadow:0 6px 16px rgba(0,0,0,.5);pointer-events:none}
.touch-story #move-stick.engaged{border-color:var(--gold)}
.touch-buttons{position:absolute;right:max(14px,var(--safe-right));bottom:calc(18px + var(--safe-bottom));display:grid;grid-template-columns:repeat(3,62px);grid-template-rows:repeat(3,58px);gap:8px;pointer-events:auto}
.touch-buttons button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px;font-size:10.5px;font-weight:800;letter-spacing:.02em;border-radius:14px;background:rgba(12,28,38,.82);border-color:rgba(153,184,199,.4);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.touch-buttons svg{width:22px;height:22px;fill:var(--gold-hi)}
.touch-buttons button[aria-pressed=true]{color:#e3fff2;background:rgba(35,82,68,.9);border-color:#92e8c4}
.touch-buttons{grid-template-rows:repeat(4,58px)}
.t-attack{grid-column:2/4;grid-row:3/5;border-radius:50%!important;font-size:13px!important;background:radial-gradient(circle at 50% 35%,rgba(150,98,55,.95),rgba(76,44,24,.95))!important;border-color:rgba(244,217,160,.6)!important}
.t-attack svg{width:34px!important;height:34px!important}
.t-dash{grid-column:1;grid-row:4}
.t-aim{grid-column:1;grid-row:3}
.t-raise{grid-column:1;grid-row:2;background:rgba(30,66,56,.88)!important}
.t-decree{grid-column:2;grid-row:2}
.t-view{grid-column:3;grid-row:2}
.t-technique{grid-column:1/3;grid-row:1;background:rgba(58,46,22,.88)!important;border-color:rgba(244,217,160,.5)!important}
.t-technique.locked{opacity:.5}
.t-castling{grid-column:3;grid-row:1}
.t-actions{position:absolute;right:0;bottom:calc(100% + 8px);width:100%;min-height:44px}
/* Touch HUD. The middle of the view stays clear: the King's vitals and the
   Training / Pause buttons share the top edge, the objective is one line under
   them and the opponent's bar comes next. Messages and loot cards appear under
   that band (two at most) and fade; the soldiers wait above the joystick and
   the primary-soldier switch above the action buttons. */
.touch-story .hud-buttons{top:calc(8px + var(--safe-top));right:max(10px,var(--safe-right));gap:6px}
.touch-story .hud-buttons button span,.touch-story .hud-buttons kbd{display:none}
.touch-story .hud-buttons button{padding:9px;min-width:42px;min-height:42px;justify-content:center;border-radius:13px}
.touch-story .hud-buttons svg{width:18px;height:18px}
/* Vitals: portrait, level and bars only (the name is in the menu). */
.touch-story #king-frame{top:calc(8px + var(--safe-top));bottom:auto;left:max(10px,var(--safe-left));width:min(236px,calc(100vw - 124px));grid-template-columns:42px minmax(0,1fr);gap:9px;padding:7px 10px 8px 7px;border-radius:14px}
.touch-story .king-portrait,.touch-story .xp-ring{width:42px;height:42px}
.touch-story #hud-portrait{inset:4px;width:34px;height:34px}
.touch-story .level-badge{min-width:19px;height:19px;right:-5px;bottom:-4px;font-size:9.5px;border-width:1.5px}
.touch-story .points-badge{left:-6px;top:-6px;min-width:20px;height:17px;padding:0 4px;font-size:9.5px;line-height:17px}
.touch-story .king-name-line,.touch-story #hero-label{display:none}
.touch-story .king-bars{gap:3px}
.touch-story .bar{height:12px;border-radius:4px}
.touch-story .bar-label{left:6px;font-size:7.5px;letter-spacing:.1em}
.touch-story .bar-value{right:6px;font-size:8.5px}
.touch-story .bar.command{height:5px;margin-top:12px}
.touch-story .bar.command .bar-label{font-size:7.5px;letter-spacing:.1em}
/* Statuses ride in the gap above the Command bar instead of adding a row. */
.touch-story .king-status{position:absolute;left:61px;bottom:14px;gap:3px}
.touch-story .status-chip{padding:0 5px;font-size:7px;line-height:11px;letter-spacing:.1em}
/* Objective: one line (title, then the task) with the wave timer beneath. */
.touch-story #objective-card{top:calc(78px + var(--safe-top));left:max(10px,var(--safe-left));width:auto;max-width:calc(100vw - 20px - var(--safe-left) - var(--safe-right));display:flex;align-items:baseline;gap:8px;padding:5px 11px 6px;border-radius:99px;overflow:hidden}
.touch-story #objective-card .eyebrow,.touch-story #objective-goals{display:none}
.touch-story #objective-card h3{flex:none;margin:0;font-size:14px;line-height:1.2}
.touch-story #objective-text{min-width:0;font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.touch-story #wave-timer{position:absolute;left:12px;right:12px;bottom:2px;margin:0;height:2px}
/* The opponent: a compact bar under the objective. */
.touch-story #boss-bar{top:calc(116px + var(--safe-top));left:max(10px,var(--safe-left));right:max(10px,var(--safe-right));width:auto;transform:none}
.touch-story .boss-head{gap:7px;margin-bottom:4px;align-items:center}
.touch-story #boss-icon{width:28px;height:28px}
.touch-story .boss-names .eyebrow{font-size:8px;letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.touch-story #boss-name{font-size:15px}
.touch-story #boss-chips{gap:3px;max-width:54%}
.touch-story #boss-chips .chip{padding:2px 6px;font-size:7.5px;letter-spacing:.06em}
.touch-story .boss-track{height:9px;border-radius:5px}
.touch-story #boss-hp{font-size:8px;right:6px}
/* Soldiers: a row of small cards above the joystick. */
.touch-story #squad-panel:has(#squad-list:empty){display:none}
.touch-story #squad-panel{top:auto;bottom:calc(168px + var(--safe-bottom));left:max(10px,var(--safe-left));right:auto;width:auto;padding:5px;border-radius:12px}
.touch-story #squad-panel header,.touch-story #companion-status{display:none}
.touch-story #squad-list{grid-auto-flow:column;gap:5px}
.touch-story .soldier-card{grid-template-columns:32px;padding:3px 3px 7px}
.touch-story .soldier-card img,.touch-story .card-glyph{width:32px;height:32px;font-size:18px}
.touch-story .card-body{position:absolute;left:4px;right:4px;bottom:2px}
.touch-story .card-bar{margin-top:0;height:3px}
.touch-story .card-body strong,.touch-story .card-body small{display:none}
.touch-story .card-badge,.touch-story .promo-pips{display:none}
/* The primary-soldier switch (the only ability button on touch) above the action grid. */
.touch-story #action-bar{left:auto;right:max(14px,var(--safe-right));bottom:calc(284px + var(--safe-bottom));transform:none;padding:4px;gap:4px;border-radius:14px}
.touch-story #action-bar .action:not(.switch){display:none}
.touch-story .action{width:54px;height:56px;padding:4px 3px}
.touch-story .action small{font-size:9px}
.touch-story .action-icon{width:24px;height:24px;margin-top:9px}
.touch-story .action-portrait{inset:8px 10px 18px;width:calc(100% - 20px)}
/* Messages sit above the controls, centred in the space left of the switch. */
.touch-story #feedback,.touch-story #ground-hint,.touch-story.tactical-view #ground-hint,.touch-story #view-label{top:auto;left:calc(50% - 36px);max-width:calc(100vw - 108px)}
.touch-story #feedback{bottom:calc(296px + var(--safe-bottom));font-size:12px;padding:6px 14px}
.touch-story #ground-hint,.touch-story.tactical-view #ground-hint{bottom:calc(332px + var(--safe-bottom));transform:translateX(-50%);font-size:11px;padding:6px 10px}
.touch-story #view-label{display:none;bottom:calc(296px + var(--safe-bottom));font-size:9px}
.touch-story.tactical-view #view-label{display:block}
.touch-story.tactical-view #feedback{bottom:calc(368px + var(--safe-bottom))}
.touch-story #charge-label{top:calc(50% + 36px)}
.touch-story .banner{top:38%}
.touch-story .banner strong{font-size:clamp(30px,10vw,44px);letter-spacing:.1em}
.touch-story .banner small{font-size:10px;letter-spacing:.2em}
/* Loot and news: slim pills at the right under the top band, two at a time
   (image, kind and name; the details are in the menus). */
.touch-story #notices{top:calc(172px + var(--safe-top));bottom:auto;left:auto;right:max(10px,var(--safe-right));width:auto;max-width:min(250px,calc(100vw - 20px));justify-items:end;gap:5px}
.touch-story .notice{grid-template-columns:30px minmax(0,auto);gap:8px;padding:4px 12px 5px 4px;border-radius:99px;max-width:100%}
.touch-story .notice:nth-child(n+3){display:none}
.touch-story .notice-art{width:30px;height:30px;border-radius:50%}
.touch-story .notice-art b{font-size:16px}
.touch-story .notice-text small{font-size:7.5px;letter-spacing:.12em}
.touch-story .notice-text strong{font-size:14px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.touch-story .notice-text span{display:none}
.touch-story .action kbd{display:none}
.touch-story .t-technique.locked{opacity:.6;border-style:dashed}
.touch-story .setting{grid-template-columns:1fr}
/* Training tools on a phone: a compact card whose Return button stays in reach. */
.touch-story #training-panel{padding:10px max(10px,var(--safe-right)) 10px max(10px,var(--safe-left))}
.touch-story .training-card{padding:16px 16px 0;max-height:calc(100dvh - 20px)}
.touch-story .training-card h2{font-size:26px;margin:2px 0 6px}
.touch-story .training-intro,.touch-story .training-help{font-size:12px;line-height:1.5}
.touch-story .training-tools{gap:7px}
.touch-story .training-tools button{font-size:12.5px;padding:8px 10px;min-height:44px;line-height:1.25}
.touch-story #training-close kbd,.touch-story #wheel-cancel kbd,.touch-story #tile-actions kbd{display:none}
.touch-story #training-close{position:sticky;bottom:0;z-index:2;width:100%;margin:12px 0 0;box-shadow:0 -14px 24px rgba(9,17,21,.95)}
.touch-story .wheel-option{width:98px;min-height:112px}
.touch-story .wheel-option img,.touch-story .piece-glyph{width:44px;height:44px;line-height:44px;font-size:30px}
.touch-story .wheel-option kbd{display:none}
/* Short portrait phones: smaller thumbs (still 44 px targets) give the view back. */
@media (orientation:portrait) and (max-height:720px){
 .touch-story #move-stick{width:114px;height:114px;bottom:calc(16px + var(--safe-bottom))}
 .touch-story #move-thumb{width:48px;height:48px}
 .touch-buttons{grid-template-columns:repeat(3,56px);grid-template-rows:repeat(4,48px);gap:6px;bottom:calc(14px + var(--safe-bottom))}
 .touch-buttons button{border-radius:12px;font-size:10px;white-space:nowrap}
 .touch-story #action-bar{bottom:calc(232px + var(--safe-bottom))}
 .touch-story .action{width:48px;height:48px}
 .touch-story #squad-panel{bottom:calc(140px + var(--safe-bottom))}
 .touch-story #feedback,.touch-story #view-label{bottom:calc(242px + var(--safe-bottom))}
 .touch-story #ground-hint,.touch-story.tactical-view #ground-hint{bottom:calc(276px + var(--safe-bottom))}
 .touch-story.tactical-view #feedback{bottom:calc(312px + var(--safe-bottom))}
 .touch-story #notices{top:calc(168px + var(--safe-top))}
}
/* Landscape phones: vitals, objective and soldiers stack in the left column, the
   opponent's bar and the cards take the top centre, the switch sits beside the
   action grid and messages sit low between the thumbs. */
@media (orientation:landscape) and (max-height:600px){
 .touch-story #king-frame{width:214px}
 .touch-story #objective-card{top:calc(72px + var(--safe-top));max-width:214px}
 .touch-story #objective-card h3{font-size:13px}
 .touch-story #objective-text{display:none}
 .touch-story #squad-panel{top:calc(106px + var(--safe-top));bottom:auto}
 .touch-story #boss-bar{top:calc(8px + var(--safe-top));left:calc(max(10px,var(--safe-left)) + 226px);right:calc(max(10px,var(--safe-right)) + 104px);width:auto;max-width:400px;margin:0 auto}
 .touch-story #boss-chips{max-width:55%}
 .touch-story #notices{top:calc(58px + var(--safe-top));max-width:min(240px,34vw)}
 .touch-story #move-stick{width:104px;height:104px;bottom:calc(14px + var(--safe-bottom))}
 .touch-story #move-thumb{width:44px;height:44px}
 .touch-buttons{grid-template-columns:repeat(3,54px);grid-template-rows:repeat(4,44px);gap:6px;bottom:calc(10px + var(--safe-bottom))}
 .touch-story #action-bar{right:calc(max(14px,var(--safe-right)) + 182px);bottom:calc(10px + var(--safe-bottom))}
 .touch-story .action{width:50px;height:50px}
 .touch-story #feedback,.touch-story #ground-hint,.touch-story.tactical-view #ground-hint,.touch-story #view-label{left:calc(50% - 68px);max-width:calc(100vw - 440px)}
 .touch-story #feedback{bottom:calc(14px + var(--safe-bottom))}
 .touch-story #ground-hint,.touch-story.tactical-view #ground-hint{bottom:calc(50px + var(--safe-bottom))}
 .touch-story #view-label{bottom:calc(86px + var(--safe-bottom))}
 .touch-story.tactical-view #feedback{bottom:calc(14px + var(--safe-bottom))}
 .touch-story .banner{top:42%}
 .touch-story .training-card{width:min(760px,100%)}
 .touch-story .training-card h2{font-size:22px}
 .touch-story .training-tools{grid-template-columns:repeat(3,minmax(0,1fr))}
 /* Summon wheel: the square, title, reason and Cancel on the left, the ring at full height on the right. */
 .touch-story #summon-wheel{padding:8px max(12px,var(--safe-right)) 8px max(12px,var(--safe-left))}
 .touch-story .wheel-panel{width:min(760px,100%);max-height:100%;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto auto auto auto 1fr;column-gap:24px;text-align:left;padding:4px}
 .touch-story .wheel-panel>:not(.wheel-ring){grid-column:1}
 .touch-story #wheel-square{grid-row:2}
 .touch-story .wheel-panel h2{grid-row:3;font-size:26px}
 .touch-story .wheel-ring{grid-column:2;grid-row:1/7;width:min(calc(100dvh - 24px),340px);margin:0}
 .touch-story #wheel-reason{grid-row:4;margin:6px 0 12px;min-height:0;font-size:12.5px}
 .touch-story #wheel-cancel{grid-row:5;justify-self:start;align-self:start;min-height:44px}
 .touch-story .wheel-option{width:74px;min-height:0;padding:5px 4px;border-radius:12px}
 .touch-story .wheel-option img,.touch-story .piece-glyph{width:36px;height:36px;line-height:36px;font-size:24px}
 .touch-story .wheel-option strong{font-size:11.5px}
 .touch-story .wheel-option small{font-size:8.5px;line-height:1.2}
 .touch-story .wheel-option em{display:none}
 .touch-story .wheel-center{width:110px;gap:3px}
 .touch-story .wheel-center span{font-size:8.5px}
 .touch-story .wheel-center strong{font-size:11.5px}
 .touch-story .wheel-center small{font-size:9px}
}

/* ------------------------------------------------------------- responsive */
@media (max-width:1180px){
 .select-main{grid-template-columns:1fr}
 .select-hero{position:static}
 #kings{grid-template-columns:repeat(5,minmax(0,1fr))}
 #king-frame{width:330px}
 #squad-panel{width:270px}
 #objective-card{width:270px}
 #boss-bar{width:min(520px,40vw)}
 .hud-legend{display:none}
}
/* Seven abilities: compact buttons below 1500 px keep the bottom row in one line. */
@media (max-width:1500px){
 body:not(.touch-story) #action-bar{gap:8px;padding:8px 10px}
 body:not(.touch-story) .action{width:64px;height:70px}
 body:not(.touch-story) .action small{font-size:9.5px;letter-spacing:-.01em}
}
/* Laptop widths: icon-only top buttons leave the boss bar room to breathe. */
@media (max-width:1300px){
 body:not(.touch-story) .hud-buttons button span{display:none}
 body:not(.touch-story) #boss-bar{width:min(520px,calc(100vw - 552px))}
}
/* Too narrow for vitals + actions + squad in one row: the action bar docks
   beside the vitals and the squad lifts above the corner. */
@media (max-width:1320px){
 body:not(.touch-story) #king-frame{width:300px}
 body:not(.touch-story) #action-bar{left:334px;transform:none}
 body:not(.touch-story) #squad-panel{bottom:118px;width:250px}
 body:not(.touch-story) #objective-card{width:256px}
 body:not(.touch-story) #boss-bar{width:min(420px,calc(100vw - 576px))}
 body:not(.touch-story) #view-label{top:100px}
}
/* Narrower still: the boss bar takes a second row under the buttons. */
@media (max-width:860px){
 body:not(.touch-story) #boss-bar{left:auto;right:20px;transform:none;top:72px;width:min(360px,calc(100vw - 316px))}
 body:not(.touch-story) #view-label{top:160px;left:auto;right:20px;transform:none}
}
@media (max-width:900px){
 body:not(.touch-story) #action-bar{left:20px;bottom:142px}
 body:not(.touch-story) #squad-panel{bottom:240px}
 /* Messages stack above the action bar, clear of the squad on the right. */
 body:not(.touch-story) #feedback{left:20px;bottom:244px;max-width:calc(100vw - 310px);transform:translateY(8px);text-align:left}
 body:not(.touch-story) #feedback.show{transform:none}
 body:not(.touch-story).tactical-view #ground-hint{left:20px;bottom:244px;max-width:calc(100vw - 310px);transform:none}
 body:not(.touch-story).tactical-view #feedback{bottom:288px}
}
@media (max-width:900px){
 #kings{grid-template-columns:repeat(4,minmax(0,1fr))}
 .hero-card{grid-template-columns:1fr}
 .hero-portrait{min-height:200px}
}
@media (max-width:640px){
 #kings{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .king-card img{height:96px}
 .card-meta{padding:6px 8px 9px}
 .card-meta strong{font-size:12px}
 .select-header{min-height:64px}
 .select-header .brand{display:none}
 .select-hero{gap:12px}
 .select-hero h1{font-size:40px}
 .lede{font-size:14px}
 .hero-card{grid-template-columns:112px minmax(0,1fr);gap:14px;padding:14px;border-radius:16px}
 .hero-portrait{min-height:0;height:170px}
 .hero-info h2{font-size:24px}
 .hero-stats{grid-template-columns:1fr 1fr;gap:6px 10px}
 .hero-stats dd{font-size:12.5px}
 .hero-info .cta{grid-column:1/-1;padding:13px 16px}
 .chamber-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
 .controls-card{display:none}
 .training-tools{grid-template-columns:1fr 1fr}
 .roster-head h2{font-size:24px}
}
/* Landscape phones: the chosen King's card stays on the left, the roster scrolls on the right. */
@media (orientation:landscape) and (max-height:600px){
 .select-header{min-height:48px}
 .select-main{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;padding-top:8px}
 .select-hero{position:sticky;top:8px;gap:6px;max-height:calc(100dvh - 16px);overflow:auto;scrollbar-width:none}
 .select-hero>.eyebrow,.lede{display:none}
 .select-hero h1{font-size:21px;margin-top:0}
 .hero-stats .hero-element{grid-column:span 2}
 .hero-card{grid-template-columns:76px minmax(0,1fr);gap:4px 12px;padding:10px 12px;border-radius:14px}
 .hero-portrait{grid-row:1/6;min-height:0;height:96px;align-self:center}
 .hero-info{display:contents}
 .hero-info>:not(.hero-stats):not(.cta):not(.chamber-picker){grid-column:2}
 .chamber-picker{grid-column:1/-1;gap:5px}
 .chamber-pick{padding:5px 7px 6px}
 .chamber-pick strong{font-size:12.5px}
 .chamber-pick span{display:none}
 .hero-info .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .hero-info h2{font-size:20px}
 .leader{font-size:11.5px}
 .xp-line{font-size:11.5px;margin-top:0}
 .hero-stats{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px;margin:4px 0 2px}
 .hero-stats div{padding-top:4px}
 .hero-stats dt{font-size:8.5px}
 .hero-stats dd{font-size:11.5px}
 .hero-info .cta{grid-column:1/-1;padding:10px 14px}
 .controls-card{display:none}
 .roster-head{margin:0 0 8px}
 .roster-head h2{font-size:20px}
 #kings{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 .king-card img{height:78px}
}
@media (max-height:760px) and (min-width:901px){
 #king-frame{padding:10px 12px}
 #objective-card{padding:10px 12px}
 .action{width:68px;height:70px}
 .action small{font-size:9.5px;letter-spacing:-.01em}
}
/* ================================================================== TITLE */
/* The live chamber renders behind: the title layer itself is transparent. */
.title-screen{position:fixed;inset:0;z-index:40;overflow:hidden;isolation:isolate;--edge:clamp(22px,5vw,88px)}
.title-backdrop{position:absolute;inset:0;z-index:-2;background:#05080a url(story/title/story.webp) center/cover no-repeat;opacity:0;transition:opacity 1s}
body.title-static .title-backdrop{opacity:.6}
.title-grade{position:absolute;inset:0;z-index:-1;pointer-events:none}
.title-grade i{position:absolute;inset:0}
.grade-left{background:linear-gradient(90deg,rgba(3,6,8,.9) 0%,rgba(3,6,8,.66) 26%,rgba(3,6,8,.12) 52%,transparent 64%);opacity:0;transition:opacity .9s}
.grade-vignette{background:radial-gradient(ellipse at 62% 48%,transparent 42%,rgba(0,0,0,.62) 100%),linear-gradient(180deg,rgba(0,0,0,.55),transparent 18%,transparent 78%,rgba(0,0,0,.7))}
.grade-grain{opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .9s steps(4) infinite}
@keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}
.title-cut,.title-fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.title-cut{z-index:1}.title-fade{z-index:30}
.title-screen[data-state=menu] .grade-left,.title-screen[data-state=panel] .grade-left{opacity:1}

/* Boot: a black stage with the crest while the chamber loads. */
.title-boot{position:absolute;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;gap:16px;background:radial-gradient(circle at 50% 44%,#121b20,#030506 72%);transition:opacity 1.1s .15s,visibility 0s 1.3s}
.title-screen:not([data-state=boot]) .title-boot{opacity:0;visibility:hidden}
.boot-crest{font-size:68px;line-height:1;color:var(--gold);text-shadow:0 0 26px rgba(214,183,123,.55);animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.55;transform:scale(.96)}}
.boot-bar{width:min(260px,60vw);height:2px;background:rgba(255,255,255,.1);overflow:hidden}
.boot-bar i{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--gold),var(--gold-hi));box-shadow:0 0 10px var(--gold);transition:transform .35s}
#boot-text{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* The Blender-rendered wordmark: centred on PRESS ANY KEY, top-left in the menu. */
.title-brand{position:absolute;z-index:3;left:50%;top:41%;width:min(1080px,86vw);transform:translate(-50%,-50%);display:grid;gap:clamp(8px,1.4vw,18px);transition:left 1s cubic-bezier(.2,.8,.2,1),top 1s cubic-bezier(.2,.8,.2,1),width 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1),opacity .6s}
.title-screen[data-state=boot] .title-brand{opacity:0;transform:translate(-50%,-46%) scale(1.04)}
.title-screen[data-state=menu] .title-brand,.title-screen[data-state=panel] .title-brand{left:var(--edge);top:clamp(22px,6vh,64px);width:min(560px,42vw);transform:none}
.title-screen[data-state=selection] .title-brand,.title-screen[data-state=leaving] .title-brand{opacity:0}
/* A soft pool of shadow behind the wordmark keeps it readable over bright fire and bloom. */
.title-brand::before{content:'';position:absolute;inset:-40% -14% -46%;z-index:-1;background:radial-gradient(closest-side,rgba(2,4,6,.62),rgba(2,4,6,.28) 60%,transparent);pointer-events:none;transition:opacity .8s}
.title-screen[data-state=menu] .title-brand::before,.title-screen[data-state=panel] .title-brand::before{opacity:0}
.title-logo{position:relative;margin:0;line-height:0;filter:drop-shadow(0 8px 20px rgba(0,0,0,.8)) drop-shadow(0 0 34px rgba(255,190,90,.2))}
.title-logo img{width:100%;height:auto;display:block}
.logo-sheen{position:absolute;inset:0;-webkit-mask:url(story/title/logo.webp) center/100% 100% no-repeat;mask:url(story/title/logo.webp) center/100% 100% no-repeat;
 background:linear-gradient(105deg,transparent 42%,rgba(255,248,228,.95) 50%,transparent 58%);background-size:260% 100%;mix-blend-mode:screen;animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,58%{background-position:130% 0}88%,100%{background-position:-30% 0}}
.title-tag{display:flex;align-items:center;justify-content:center;gap:16px;font-size:clamp(10px,1vw,13px);font-weight:800;letter-spacing:.62em;color:#f1e4c8;text-shadow:0 0 10px rgba(0,0,0,.95),0 0 22px rgba(0,0,0,.7),0 2px 6px #000}
.title-tag span{white-space:nowrap}
.title-tag::before,.title-tag::after{content:'';flex:0 1 110px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.title-tag::after{transform:scaleX(-1)}
.title-screen[data-state=menu] .title-tag,.title-screen[data-state=panel] .title-tag{justify-content:flex-start;letter-spacing:.5em}
.title-screen[data-state=menu] .title-tag::before,.title-screen[data-state=panel] .title-tag::before{display:none}

.press-start{position:absolute;z-index:3;left:0;right:0;bottom:18vh;text-align:center;font-size:clamp(13px,1.25vw,16px);font-weight:800;letter-spacing:.5em;color:#fff3da;text-shadow:0 0 16px rgba(255,210,140,.55),0 0 8px rgba(0,0,0,.9),0 2px 6px #000;opacity:0;pointer-events:none;transition:opacity .6s}
/* A dark band under the prompt so it reads over bright summons and bloom. */
.press-start::before{content:'';position:absolute;z-index:-1;left:50%;top:50%;width:min(620px,92vw);height:74px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(2,4,6,.72),rgba(2,4,6,.38) 62%,transparent);pointer-events:none}
.press-start span{padding-left:.5em}
.title-screen[data-state=press] .press-start{opacity:1}
.title-screen[data-state=press] .press-start span{animation:press 2.2s ease-in-out 1s infinite}
@keyframes press{50%{opacity:.5}}

/* Main menu: big serif items with a gold marker, PS5-style focus. */
.title-menu{position:absolute;z-index:4;left:var(--edge);bottom:clamp(96px,17vh,180px);width:min(460px,40vw);display:grid;gap:2px;opacity:0;transform:translateX(-24px);pointer-events:none;transition:opacity .6s .25s,transform .8s .25s cubic-bezier(.2,.8,.2,1)}
.title-screen[data-state=menu] .title-menu{opacity:1;transform:none;pointer-events:auto}
.menu-item{position:relative;display:grid;gap:2px;justify-items:start;padding:9px 18px 9px 26px;text-align:left;background:transparent;border:0;border-radius:0;box-shadow:none!important;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s}
.menu-item::before{content:'';position:absolute;left:0;top:10%;bottom:10%;width:3px;background:linear-gradient(180deg,var(--gold-hi),var(--gold));transform:scaleY(0);transition:transform .25s;box-shadow:0 0 12px var(--gold)}
.mi-label{font:600 clamp(26px,2.5vw,40px)/1.05 'Cormorant Garamond',Georgia,serif;letter-spacing:.02em;color:rgba(236,232,220,.58);transition:color .2s,text-shadow .2s}
.mi-sub{font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#c9b99a;text-wrap:balance;max-height:0;opacity:0;overflow:hidden;transition:max-height .25s,opacity .25s}
/* A controller's choice (.pad-focused) looks exactly like the mouse's hover. */
.menu-item:is(:focus,:hover,.pad-focused){transform:translateX(8px);background:linear-gradient(90deg,rgba(214,183,123,.2),rgba(214,183,123,.04) 70%,transparent)}
.menu-item:is(:focus,:hover,.pad-focused)::before{transform:scaleY(1)}
.menu-item:is(:focus,:hover,.pad-focused) .mi-label{color:#fff4d8;text-shadow:0 0 22px rgba(255,200,120,.45),0 2px 6px #000}
.menu-item:is(:focus,:hover,.pad-focused) .mi-sub{max-height:34px;opacity:1}
.menu-item:focus-visible{outline:none}
.menu-item:active{transform:translateX(8px) scale(.99)}

/* Context for the focused item (bottom right). */
.title-info{position:absolute;z-index:4;right:var(--edge);bottom:clamp(96px,15vh,160px);width:min(380px,28vw);display:grid;gap:8px;padding:16px;border-radius:18px;border:1px solid var(--line);
 background:linear-gradient(160deg,rgba(14,24,30,.72),rgba(6,11,14,.82));backdrop-filter:var(--glass);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .6s .35s}
.title-screen[data-state=menu] .title-info{opacity:1}
.ti-art{border-radius:12px;overflow:hidden;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.1);background:#0a1114;margin-bottom:4px}
.ti-art img{width:100%;height:100%;object-fit:cover;display:block}
.ti-art.portrait{aspect-ratio:auto;height:180px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--metal) 30%,transparent),transparent 65%),#081014}
.ti-art.portrait img{object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))}
/* Skill Trees: the six trees, drawn with the pieces of the army on screen. */
.ti-trees{aspect-ratio:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:linear-gradient(160deg,rgba(214,183,123,.3),rgba(214,183,123,.06))}
.tt{position:relative;display:grid;justify-items:center;align-content:start;gap:2px;min-width:0;padding:8px 4px 12px;text-align:center;background:radial-gradient(circle at 50% 30%,rgba(214,183,123,.18),transparent 60%),#0b1317}
.tt-icon{height:42px;display:grid;place-items:center;font-size:30px;line-height:1;color:var(--gold-hi)}
.tt-icon img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.6))}
.tt strong{font:600 clamp(11.5px,1vw,14px)/1.05 'Cormorant Garamond',Georgia,serif;color:#f1e4c8}
.tt small{font-size:8.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tt i{position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.tt i::after{content:'';position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p));background:linear-gradient(90deg,var(--gold),var(--gold-hi))}
.title-info h2{font-size:30px;line-height:1.05}
.ti-text{font-size:13px;line-height:1.6;color:#c9d4d5}
.ti-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 0}
.ti-stats div{padding:8px;border:1px solid var(--line-soft);border-radius:10px;background:rgba(255,255,255,.03)}
.ti-stats dt{font-size:9.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.ti-stats dd{margin:2px 0 0;font:700 18px/1.1 'Cormorant Garamond',Georgia,serif;color:var(--gold-hi)}

/* Account rating (top right). */
.title-profile{position:absolute;z-index:4;top:clamp(22px,4.5vh,44px);right:var(--edge);display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:12px;row-gap:0;padding:10px 16px;border-radius:14px;border:1px solid var(--line);
 background:rgba(8,14,18,.6);backdrop-filter:var(--glass);opacity:0;transition:opacity .6s .4s;pointer-events:none}
.title-screen[data-state=menu] .title-profile,.title-screen[data-state=panel] .title-profile{opacity:1}
.tp-label{font-size:9.5px;font-weight:800;letter-spacing:.24em;color:var(--muted)}
.title-profile strong{grid-row:1/3;grid-column:2;font:700 34px/1 'Cormorant Garamond',Georgia,serif;color:var(--gold-hi);text-shadow:0 0 18px rgba(244,200,120,.35)}
.tp-title{font-size:13px;font-weight:700;color:var(--text)}
.tp-next{grid-column:1/3;font-size:10.5px;color:var(--muted);letter-spacing:.06em;margin-top:4px}

.title-foot{position:absolute;z-index:5;left:var(--edge);right:var(--edge);bottom:clamp(16px,3.4vh,30px);display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
.title-hints{font-size:11px;color:#b9c3c4;display:flex;align-items:center;gap:6px;opacity:0;transition:opacity .6s .4s}
.title-hints kbd{margin-left:6px}.title-hints kbd:first-child{margin-left:0}
.title-screen[data-state=menu] .title-hints{opacity:1}
.title-mark{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.3em;color:rgba(244,217,160,.78);text-shadow:0 1px 4px #000;white-space:nowrap}

.title-panel{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:16px;background:rgba(3,6,8,.55);backdrop-filter:blur(6px)}
.panel-card{width:min(640px,100%);max-height:calc(100dvh - 32px);overflow:auto;display:grid;gap:12px;padding:26px 28px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(18,32,40,.97),rgba(9,17,21,.98));box-shadow:0 30px 120px rgba(0,0,0,.6)}
.panel-card h2{font-size:40px;line-height:1}
.panel-body{display:grid;gap:10px}
.credit-lead{font-size:17px;color:#eadcbf}.credit-lead strong{color:var(--gold-hi)}
.credit-list{display:grid;gap:8px;margin:0}
.credit-list div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:10px;background:rgba(255,255,255,.03)}
.credit-list dt{font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;padding-top:2px}
.credit-list dd{margin:0;font-size:13.5px;color:#d4dcdd}

/* The live match on the title screen: no HUD. */
body.attract :is(#objective-card,#boss-bar,#view-label,.hud-buttons,#king-frame,#action-bar,#squad-panel,#crosshair,#hit-marker,#charge-label,#ground-hint,#feedback,#banner,.hud-legend,#touch-controls,#nameplates,#damage-numbers,#vignette){display:none!important}
body.title-open{overflow:hidden}
/* King selection, floating over the live chamber. */
body.title-open #selection{position:fixed;inset:0;z-index:45;overflow:auto;background:linear-gradient(90deg,rgba(4,8,10,.93),rgba(4,8,10,.76) 48%,rgba(4,8,10,.6));backdrop-filter:blur(2px)}
.back-link{background:transparent;border:0;padding:8px 0;color:var(--gold);font-weight:700;font-size:14px}
.back-link:hover:not(:disabled){box-shadow:none;color:var(--gold-hi)}

@media (max-width:900px){
 .title-screen[data-state=menu] .title-brand,.title-screen[data-state=panel] .title-brand{width:min(460px,70vw)}
 .title-menu{width:min(420px,calc(100vw - 2 * var(--edge)));bottom:clamp(70px,12vh,120px)}
 .title-info{display:none}
 .title-screen[data-state=menu] .grade-left{background:linear-gradient(0deg,rgba(3,6,8,.92),rgba(3,6,8,.5) 55%,rgba(3,6,8,.2))}
 .title-profile{top:auto;bottom:calc(clamp(70px,12vh,120px) + 330px);right:auto;left:var(--edge)}
}
@media (max-width:640px){
 .title-brand{top:38%}
 .title-tag{letter-spacing:.34em}
 .title-profile{display:none}
 .title-mark{font-size:9px;letter-spacing:.18em}
 .title-foot{justify-content:center}
 .title-mark{margin:0 auto}
 .mi-label{font-size:30px}
}
@media (max-height:620px) and (orientation:landscape){
 .title-screen[data-state=menu] .title-brand{width:min(360px,34vw)}
 .title-menu{bottom:48px;gap:0}
 .mi-label{font-size:24px}
 .menu-item{padding:5px 14px 5px 22px}
 .title-info{bottom:48px;width:min(320px,34vw)}
 .ti-art{display:none}
}

/* =============================================================== HUD extras */
.points-badge{position:absolute;left:-8px;top:-8px;z-index:2;min-width:28px;height:22px;padding:0 6px;border-radius:11px;background:linear-gradient(135deg,#ffe7a8,#d49a3a);color:#2a1a06;font:800 11px/22px Manrope,system-ui;text-align:center;box-shadow:0 0 14px rgba(255,210,120,.85);animation:glow 1.4s ease-in-out infinite}
.action.technique.locked{opacity:.5}
.action.technique.locked .action-icon{fill:#8b8f8c}
.action.technique.ready{border-color:rgba(244,217,160,.6);box-shadow:0 0 16px rgba(244,200,120,.25)}
.action.technique .action-icon{fill:#ffe0a0}
.action.castling .action-icon{fill:#ffd9a0}
.action.castling.ready{border-color:rgba(255,217,160,.6)}
.action.technique .action-portrait:not([hidden])~.action-icon,.action.technique .action-portrait:not([hidden])+.action-icon{visibility:hidden}
.wheel-option.technique{border-color:rgba(244,217,160,.6);background:radial-gradient(circle at 50% 30%,rgba(104,82,40,.7),rgba(22,17,10,.97) 72%)}
.wheel-option.technique strong{color:var(--gold-hi)}
.wheel-option.technique em{color:#f1d9a6}


/* ============================================================== GAME MENU */
/* One full-screen menu: Inventory, Skill Trees, The Trial, Settings, Controls. */
.game-menu{position:fixed;inset:0;z-index:60;color:var(--text)}
.gm-scrim{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,rgba(22,36,42,.5),rgba(3,6,8,.9) 72%),rgba(3,6,8,.5);backdrop-filter:blur(12px) saturate(1.15)}
.gm-light{position:absolute;left:-10%;top:-30%;width:70%;height:90%;background:conic-gradient(from 200deg at 30% 0%,transparent,rgba(244,217,160,.07) 6%,transparent 13%,rgba(244,217,160,.05) 21%,transparent 30%);filter:blur(8px);animation:gm-light 22s ease-in-out infinite alternate;pointer-events:none}
@keyframes gm-light{to{transform:translateX(18%) rotate(5deg)}}
.gm-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55));pointer-events:none}
/* The Inventory stage shows the 3D piece: the left side stays clear of blur. */
.game-menu[data-tab=inventory] .gm-scrim{backdrop-filter:none;background:linear-gradient(90deg,rgba(3,6,8,0) 0,rgba(3,6,8,0) 44%,rgba(3,6,8,.5) 58%,rgba(3,6,8,.78))}
.game-menu[data-tab=inventory] .gm-light{display:none}
.gm-frame{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}
.gm-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;padding:14px clamp(16px,2.6vw,40px) 16px;background:linear-gradient(180deg,rgba(3,6,8,.94),rgba(3,6,8,.6) 72%,transparent);position:relative}
.gm-top::after{content:'';position:absolute;left:clamp(16px,2.6vw,40px);right:clamp(16px,2.6vw,40px);bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(214,183,123,.5),transparent)}
.gm-king{display:flex;align-items:center;gap:14px;min-width:0}
.gm-king>div{min-width:0}
#gm-eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Touch screens have no keys: the menu drops every key hint. */
.touch-story .game-menu kbd{display:none}
/* On touch the Controls tab names the on-screen buttons: keep those labels. */
.touch-story .game-menu .controls-group kbd{display:inline-block;font-size:11px;padding:3px 8px}
.touch-story .controls-group div{grid-template-columns:minmax(0,112px) minmax(0,1fr);gap:10px}
.gm-portrait{width:58px;height:58px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--metal) 40%,transparent),#081014 72%);border:1px solid rgba(244,217,160,.5);box-shadow:0 0 0 4px rgba(214,183,123,.08),0 0 26px rgba(244,200,120,.22)}
.gm-portrait img{width:128%;height:128%;object-fit:contain;transform:translateY(9%)}
.gm-king h2{font-size:clamp(20px,1.7vw,28px);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gm-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-tabs{position:relative;display:flex;align-items:center;gap:2px;padding:6px;border-radius:16px;background:rgba(5,10,13,.78);border:1px solid var(--line-soft);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 30px rgba(0,0,0,.35)}
.gm-tabs button{position:relative;z-index:1;display:flex;align-items:center;gap:8px;padding:10px 16px;border:0;border-radius:11px;background:transparent;box-shadow:none!important;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(236,232,220,.6);transition:color .25s}
.gm-tabs button svg{width:18px;height:18px;fill:currentColor;flex:none}
.gm-tabs button:hover:not([aria-selected=true]){color:#fff4d8}
.gm-tabs button[aria-selected=true]{color:#1a1409}
.gm-tab-glow{position:absolute;z-index:0;top:6px;bottom:6px;left:0;width:0;border-radius:11px;background:linear-gradient(135deg,var(--gold-hi),var(--gold) 55%,#b48a4a);box-shadow:0 6px 22px rgba(214,183,123,.4),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .42s cubic-bezier(.2,.8,.2,1),width .42s cubic-bezier(.2,.8,.2,1)}
.gm-shoulder{font-size:10.5px;padding:5px 8px;margin:0 6px;opacity:.8}
.gm-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:linear-gradient(135deg,#ffe7a8,#d49a3a);color:#2a1a06;font:800 11px/20px Manrope,system-ui;letter-spacing:0;box-shadow:0 0 12px rgba(255,210,120,.8);animation:glow 1.4s ease-in-out infinite}
.gm-tabs button[aria-selected=true] .gm-badge{background:#1a1409;color:var(--gold-hi);box-shadow:none;animation:none}
.gm-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.gm-coins{display:flex;align-items:center;gap:6px;padding:4px 14px 4px 4px;border-radius:999px;background:rgba(5,10,13,.75);border:1px solid var(--line-soft);font-weight:800;color:var(--gold-hi)}
.gm-coins img{width:30px;height:30px}
.gm-resume{display:flex;align-items:center;gap:10px;padding:11px 18px;border-radius:12px;font-weight:800;font-size:13px;letter-spacing:.06em}
.gm-body{position:relative;min-height:0;min-width:0;padding:clamp(10px,1.6vh,20px) clamp(16px,2.6vw,40px) 6px}
.gm-pane{height:100%;min-height:0}
.gm-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px clamp(16px,2.6vw,40px) 14px;background:linear-gradient(0deg,rgba(3,6,8,.9),transparent);font-size:12px;color:var(--muted)}
.gm-hints{display:flex;flex-wrap:wrap;gap:18px}
.gm-hints span{display:flex;align-items:center;gap:5px}
.gm-hints kbd{margin-right:2px}
.gm-system{display:flex;gap:4px}
.gm-link{background:transparent;border:0;padding:8px 12px;font-size:12.5px;font-weight:700;color:var(--gold)}
.gm-link:hover:not(:disabled){box-shadow:none;color:var(--gold-hi);background:rgba(214,183,123,.08)}
.gm-card{border:1px solid var(--line-soft);border-radius:16px;background:linear-gradient(160deg,rgba(18,30,36,.84),rgba(7,13,17,.9));box-shadow:0 18px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04)}
.game-menu[data-mode=title] .gm-shoulder{display:none}
.pane-note{font-size:13px;color:var(--muted);line-height:1.6}
.rarity-common{--rarity:#9fb3b8}.rarity-rare{--rarity:#5fa8ff}.rarity-epic{--rarity:#c77dff}

/* --------------------------------------------------------------- inventory */
.inv{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr);gap:clamp(16px,2vw,32px)}
.inv-stage{position:relative;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;gap:14px;cursor:grab;touch-action:none;user-select:none}
.inv-stage:active{cursor:grabbing}
.inv-head{grid-column:1/3;pointer-events:none}
.inv-name{font-size:clamp(30px,3vw,50px);line-height:1;text-shadow:0 4px 24px rgba(0,0,0,.85)}
.inv-role{font-size:13px;color:#c9d4d6;margin-top:6px;text-shadow:0 2px 8px #000}
.inv-slots{grid-column:1;grid-row:2;align-self:center;display:grid;gap:10px;z-index:1}
.inv-slot{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:10px;width:clamp(170px,15vw,224px);padding:8px 12px 8px 8px;text-align:left;border-radius:14px;background:linear-gradient(90deg,rgba(5,10,13,.86),rgba(5,10,13,.5));border:1px solid var(--line-soft)}
.inv-slot-art{width:64px;height:64px;display:grid;place-items:center;border-radius:12px;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.06),rgba(0,0,0,.35));border:1px dashed rgba(255,255,255,.16)}
.inv-slot-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.inv-slot-art b{font-size:26px;color:rgba(236,232,220,.25)}
.inv-slot.filled .inv-slot-art{border-style:solid;border-color:color-mix(in srgb,var(--rarity) 70%,transparent);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--rarity) 34%,transparent),rgba(0,0,0,.4) 72%)}
.inv-slot-text{min-width:0}
.inv-slot small{font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--muted)}
.inv-slot strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:14px;line-height:1.15;overflow-wrap:break-word}
.inv-slot:not(.filled) strong{color:var(--muted);font-weight:600}
.inv-slot.active{border-color:var(--gold);box-shadow:0 0 0 1px rgba(214,183,123,.4),0 0 24px rgba(214,183,123,.22)}
.inv-switch{grid-column:1/3;grid-row:3;justify-self:center;display:flex;align-items:center;gap:10px;z-index:1}
.inv-pieces{display:flex;gap:8px}
.inv-piece{position:relative;display:grid;justify-items:center;gap:3px;width:66px;padding:7px 4px 6px;border-radius:14px;background:rgba(5,10,13,.75);border:1px solid var(--line-soft)}
.inv-piece>span{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.1),rgba(0,0,0,.4));overflow:hidden}
.inv-piece img{width:132%;height:132%;object-fit:contain;transform:translateY(10%)}
.inv-piece b{font-size:26px;color:var(--gold-hi)}
.inv-piece small{font-size:9.5px;font-weight:800;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.inv-piece i{position:absolute;top:-6px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--gold);color:#1a1409;font:800 10px/18px Manrope,system-ui;font-style:normal}
.inv-piece[aria-selected=true]{border-color:var(--gold);background:linear-gradient(180deg,rgba(214,183,123,.28),rgba(5,10,13,.8));box-shadow:0 0 22px rgba(214,183,123,.28)}
.inv-piece[aria-selected=true] small{color:var(--gold-hi)}
.inv-arrow{display:flex;align-items:center;gap:6px;padding:10px 12px;border-radius:12px;font-size:22px;line-height:1}
.inv-arrow kbd{font-size:9.5px}
.inv-stats{grid-column:1/3;grid-row:4;justify-self:stretch;display:flex;justify-content:center;gap:8px;margin:0;z-index:1}
.inv-stats div{flex:0 1 128px;min-width:0;padding:9px 10px;border-radius:12px;background:rgba(5,10,13,.8);border:1px solid var(--line-soft);text-align:center}
.inv-stats dt{font-size:9.5px;font-weight:800;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.inv-stats dd{margin:2px 0 0;font:700 20px/1.1 'Cormorant Garamond',Georgia,serif}
.inv-stats dd small{display:inline-block;margin-left:6px;font:800 10px Manrope,system-ui;color:#8fe6a0;vertical-align:3px}
.inv-stats .up dd{color:#c8ffd6}
.inv-drag{position:absolute;right:6px;top:8px;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);pointer-events:none;text-shadow:0 1px 4px #000}
.inv-drag i{width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-left-color:transparent;animation:gm-spin 2.6s linear infinite}
@keyframes gm-spin{to{transform:rotate(360deg)}}
.inv-panel{min-height:0;min-width:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px;padding:16px;border-radius:22px;background:linear-gradient(160deg,rgba(14,24,30,.92),rgba(5,10,13,.95));border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(10px)}
.inv-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.inv-stage{min-width:0}
.inv-tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(0,0,0,.3);min-width:0;overflow-x:auto;scrollbar-width:none}
.inv-tabs button{display:flex;flex:none;align-items:center;gap:6px;padding:8px 12px;border:0;border-radius:9px;background:transparent;box-shadow:none!important;font-size:12.5px;font-weight:800;color:var(--muted);white-space:nowrap}
.inv-tabs button small{padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.08);font-size:10px}
.inv-tabs button kbd{font-size:9px;padding:2px 4px;opacity:.65}
.inv-tabs button[aria-selected=true]{background:linear-gradient(180deg,rgba(214,183,123,.24),rgba(214,183,123,.1));color:var(--gold-hi)}
.inv-coins{display:flex;align-items:center;gap:6px;font-weight:800;color:var(--gold-hi)}
.inv-coins img{width:32px;height:32px}
.inv-grid{min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:max-content;gap:9px;padding:3px;align-content:start}
.inv-cell{position:relative;aspect-ratio:1;padding:0;border-radius:13px;border:1px solid rgba(255,255,255,.09);background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--rarity) 30%,transparent),rgba(5,10,13,.92) 72%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),inset 0 -14px 24px rgba(0,0,0,.25);transition:transform .18s,border-color .18s,box-shadow .18s}
.inv-cell.empty{background:rgba(255,255,255,.018);border-style:dashed;border-color:rgba(255,255,255,.06);box-shadow:none}
.inv-cell-art{position:absolute;inset:9%}
.inv-cell-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.65));transition:transform .25s}
.inv-cell:not(.empty):hover,.inv-cell:not(.empty):focus-visible{transform:translateY(-2px);border-color:var(--rarity);box-shadow:0 10px 24px rgba(0,0,0,.4),0 0 20px color-mix(in srgb,var(--rarity) 45%,transparent);outline:none}
.inv-cell:not(.empty):hover .inv-cell-art img{transform:scale(1.08) rotate(-3deg)}
.inv-cell.selected{border-color:var(--gold-hi);box-shadow:0 0 0 2px rgba(244,217,160,.6),0 0 28px rgba(244,217,160,.32)}
.inv-cell.dim{opacity:.4}
.inv-count{position:absolute;right:6px;bottom:4px;font:800 12px Manrope,system-ui;color:#fff;text-shadow:0 1px 3px #000}
.inv-worn{position:absolute;left:6px;top:3px;font-style:normal;font-size:13px;color:var(--gold-hi);text-shadow:0 0 8px rgba(244,200,120,.9)}
.inv-new{display:none;position:absolute;right:4px;top:4px;padding:1px 5px;border-radius:5px;background:linear-gradient(135deg,#ffe7a8,#d49a3a);color:#1a1409;font:800 9px Manrope,system-ui;font-style:normal;letter-spacing:.08em}
.inv-cell.fresh .inv-new{display:block;animation:glow 1.4s ease-in-out infinite}
.inv-detail{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;padding:14px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--rarity,#d6b77b) 16%,transparent),rgba(0,0,0,.28));border:1px solid color-mix(in srgb,var(--rarity,#d6b77b) 45%,transparent);min-height:150px}
.inv-detail.empty{display:grid;place-items:center;color:var(--muted);font-size:13px;line-height:1.6;border-style:dashed;text-align:center}
.invd-art{width:118px;height:118px;border-radius:14px;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--rarity) 42%,transparent),rgba(0,0,0,.45) 72%)}
.invd-art img{width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,0,0,.6));animation:gm-float 4s ease-in-out infinite}
@keyframes gm-float{50%{transform:translateY(-4px) rotate(2deg)}}
.invd-text{min-width:0}
.invd-kind{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.invd-kind .rarity{color:var(--rarity)}
.inv-detail h4{margin:2px 0 6px;font:600 28px/1.05 'Cormorant Garamond',Georgia,serif}
.invd-stats{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:2px}
.invd-stats li{font-size:13.5px;font-weight:700;color:#c8ffd6}
.invd-stats li::before{content:'\25C6';margin-right:6px;color:var(--rarity);font-size:9px;vertical-align:2px}
.invd-preview{list-style:none;margin:6px 0;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.3);display:grid;gap:3px}
.invd-preview li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;font-size:12.5px}
.invd-preview s{color:var(--muted)}
.invd-preview b{color:#c8ffd6}
.invd-preview b::before{content:'\2192  ';color:var(--gold)}
.invd-lore{font:italic 500 15.5px/1.35 'Cormorant Garamond',Georgia,serif;color:#dccfb2}
.invd-note{font-size:12px;color:var(--muted);margin-top:6px}
.invd-actions{display:flex;gap:8px;margin-top:10px}
.invd-actions .cta,.invd-actions .ghost-button{width:auto;min-width:200px}
.invd-actions .cta:disabled{background:linear-gradient(135deg,#3b382f,#24221c);color:#8f887a;box-shadow:inset 0 0 0 1px rgba(214,183,123,.14);opacity:1}
.invd-actions .cta:disabled kbd{opacity:.45}

/* ------------------------------------------------------ elements and statuses */
.el-fire{--el:#ff7a33}.el-water{--el:#3ea8ff}.el-earth{--el:#c69a5b}.el-wind{--el:#bff3e6}.el-lightning{--el:#ffe25a}.el-ice{--el:#9fe8ff}
.rarity-legendary{--rarity:#ffb347}
.el-chip{display:inline-flex;align-items:center;gap:5px;padding:1px 8px 1px 5px;border-radius:999px;background:color-mix(in srgb,var(--el) 16%,rgba(0,0,0,.45));border:1px solid color-mix(in srgb,var(--el) 55%,transparent);color:color-mix(in srgb,var(--el) 65%,#fff);font:800 10.5px/1.6 Manrope,system-ui;letter-spacing:.06em;white-space:nowrap}
.el-chip i{width:8px;height:8px;border-radius:50%;background:var(--el);box-shadow:0 0 8px var(--el)}
/* Damage numbers in the element's colour, tagged WEAK or RESIST. */
.damage-number[class*=' el-']{color:color-mix(in srgb,var(--el) 75%,#fff);text-shadow:0 2px 0 rgba(0,0,0,.7),0 0 12px var(--el)}
.damage-number small{display:block;margin-top:1px;font:800 9.5px/1 Manrope,system-ui;letter-spacing:.18em;text-align:center}
.damage-number.weak{font-size:28px}
.damage-number.weak small{color:#fff;text-shadow:0 0 8px var(--el,#ffd06a),0 0 2px #000}
.damage-number.resist{font-size:16px;opacity:.85}
.damage-number.resist small{color:#b9c6c9}
/* Statuses: nameplate markers, boss chips and your King's chips. */
.plate-mark.frozen,.chip.status.frozen,.status-chip.frozen{--st:#9fe8ff}
.plate-mark.burn,.chip.status.burn,.status-chip.burn{--st:#ff8a3d}
.plate-mark.soaked,.chip.status.soaked,.status-chip.soaked{--st:#5fb8ff}
.status-chip.shock{--st:#ffe25a}
.plate-mark:is(.frozen,.burn,.soaked){color:var(--st);text-shadow:0 0 8px var(--st)}
.chip.status{color:color-mix(in srgb,var(--st) 70%,#fff);border-color:var(--st);background:color-mix(in srgb,var(--st) 16%,rgba(10,14,16,.85))}
.chip.weak,.chip.resist{color:color-mix(in srgb,var(--el) 70%,#fff);border-color:color-mix(in srgb,var(--el) 70%,transparent);background:color-mix(in srgb,var(--el) 12%,rgba(10,14,16,.85))}
.chip.resist{opacity:.8}
.king-status{display:flex;gap:5px;min-height:0}
.king-status:empty{display:none}
.status-chip{padding:2px 8px;border-radius:99px;font:800 9.5px/1.5 Manrope,system-ui;letter-spacing:.14em;color:color-mix(in srgb,var(--st) 70%,#fff);border:1px solid var(--st);background:color-mix(in srgb,var(--st) 18%,rgba(5,10,13,.8));box-shadow:0 0 12px color-mix(in srgb,var(--st) 40%,transparent);animation:glow 1.2s ease-in-out infinite}
/* The selection screen: every King's element. */
.hero-element dd{display:flex;align-items:center;gap:8px}
.hero-element small{font-size:11.5px;color:var(--muted);font-weight:600}

/* ------------------------------------------------- inventory: vitals and potions */
.inv-affinity{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:11.5px;font-weight:700;color:#c9d4d6;text-shadow:0 1px 6px #000}
.inv-affinity:empty{display:none}
.inv-affinity>span{display:inline-flex;align-items:center;gap:6px}
.inv-slot.el-fire,.inv-slot.el-water,.inv-slot.el-earth,.inv-slot.el-wind,.inv-slot.el-lightning,.inv-slot.el-ice{border-color:color-mix(in srgb,var(--el) 55%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--el) 22%,transparent)}
.inv-slot[class*=' el-'] .inv-slot-art{border-color:var(--el);background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--el) 45%,transparent),rgba(0,0,0,.45) 72%)}
.inv-slot[class*=' el-'] strong{color:color-mix(in srgb,var(--el) 60%,#fff)}
.inv-piece .el-dot{position:absolute;left:5px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--el);box-shadow:0 0 8px var(--el),0 0 0 2px rgba(5,10,13,.9)}
.inv-stats .el dd{color:color-mix(in srgb,var(--el) 70%,#fff);text-shadow:0 0 12px color-mix(in srgb,var(--el) 60%,transparent)}
.inv-vitals{position:relative;display:grid;gap:7px;padding:12px 12px 12px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(0,0,0,.28));border:1px solid var(--line-soft)}
.vital{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.vital-bar{position:relative;height:26px;border-radius:9px;overflow:hidden;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35));box-shadow:inset 0 1px 3px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.06)}
/* Tick marks every 10% over the fill. */
.vital-bar::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(0,0,0,.28) calc(10% - 1px) 10%);pointer-events:none}
.vital-fill{position:absolute;inset:0;transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1);background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 48%),linear-gradient(90deg,var(--bar-a),var(--bar-b));box-shadow:inset -3px 0 6px rgba(255,255,255,.35)}
.vital-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 45%,transparent 60%);background-size:260% 100%;animation:vital-shine 3.2s linear infinite}
@keyframes vital-shine{from{background-position:130% 0}to{background-position:-130% 0}}
.vital.health{--bar-a:#b3122b;--bar-b:#ff5a4a}
.vital.mana{--bar-a:#1f4fc4;--bar-b:#4fb2ff}
.vital.command{--bar-a:#9a6516;--bar-b:#ffd36a}
.vital.low .vital-fill{animation:vital-low 1s ease-in-out infinite}
@keyframes vital-low{50%{filter:brightness(1.5)}}
/* Potion preview: the share a potion would restore, shimmering on the bar. */
.vital-gain{position:absolute;top:0;bottom:0;left:0;width:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.6) 0 5px,rgba(255,255,255,.22) 5px 10px);box-shadow:0 0 14px rgba(255,255,255,.55);animation:vital-gain .6s linear infinite;transition:width .2s}
@keyframes vital-gain{to{background-position:14px 0}}
.vital-label{position:absolute;left:10px;top:50%;transform:translateY(-50%);font:800 9.5px Manrope,system-ui;letter-spacing:.18em;color:rgba(255,255,255,.88);text-shadow:0 1px 3px rgba(0,0,0,.9);pointer-events:none}
.vital-text{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:800 12.5px Manrope,system-ui;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.95);font-variant-numeric:tabular-nums;pointer-events:none}
.vital.surge .vital-bar{animation:vital-surge .9s ease-out}
@keyframes vital-surge{0%{box-shadow:inset 0 1px 3px rgba(0,0,0,.7),0 0 0 0 rgba(255,255,255,.7)}30%{box-shadow:inset 0 1px 3px rgba(0,0,0,.7),0 0 22px 3px color-mix(in srgb,var(--bar-b,#6fe39a) 70%,transparent)}100%{box-shadow:inset 0 1px 3px rgba(0,0,0,.7),0 0 0 0 transparent}}
.squad-bars{display:flex;align-items:center;gap:8px;padding-left:72px}
.squad-bars::after{display:none}
.squad-list{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.squad-chip{display:flex;align-items:center;gap:5px;flex:1;min-width:0;max-width:120px}
.squad-chip img{width:22px;height:22px;object-fit:contain;flex:none}
.squad-chip b{font-size:15px;color:var(--gold-hi)}
.squad-bar{position:relative;flex:1;height:8px;border-radius:4px;overflow:hidden;background:rgba(0,0,0,.5)}
.squad-fill{position:absolute;inset:0;transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1);background:linear-gradient(90deg,#1f9a55,#6fe39a)}
.squad-empty{font-size:11.5px;font-style:normal;color:var(--muted)}
.vital.squad{--bar-b:#6fe39a}
.potion{position:relative;width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.14),rgba(0,0,0,.55) 72%);border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .18s,box-shadow .18s,border-color .18s}
.potion img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.potion-count{position:absolute;right:-5px;bottom:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:linear-gradient(180deg,#2a3a42,#101a1f);border:1px solid rgba(255,255,255,.2);font:800 10.5px/17px Manrope,system-ui;color:#fff;text-align:center}
.potion:hover:not(.empty),.potion:focus-visible{transform:translateY(-2px) scale(1.06);border-color:var(--gold-hi);box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 18px rgba(244,217,160,.35);outline:none}
.potion.empty{opacity:.35;filter:grayscale(.8)}
.potion.blocked img{opacity:.6}
.potion-tip{position:absolute;right:calc(100% + 10px);z-index:3;transform:translateY(-50%);width:210px;padding:9px 12px;border-radius:12px;background:linear-gradient(160deg,rgba(18,30,36,.98),rgba(5,10,13,.98));border:1px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.55);pointer-events:none}
.potion-tip.inside{right:58px;transform:none;max-width:calc(100% - 76px)}
.potion-tip.inside.above{transform:translateY(-100%)}
.potion-tip strong{display:block;font:600 17px/1.1 'Cormorant Garamond',Georgia,serif;color:var(--gold-hi)}
.potion-tip span{display:block;font-size:11.5px;color:#c9d4d6;margin-top:2px}
.potion-tip b{display:block;margin-top:4px;font-size:12px;color:#c8ffd6}
.potion-tip em{display:block;margin-top:4px;font-size:11.5px;font-style:normal;color:#ffb39c}
/* Elements in the bag: glowing cards, sealed ones dark until unlocked. */
.inv-cell.element{background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--el) 38%,transparent),rgba(5,10,13,.94) 72%);border-color:color-mix(in srgb,var(--el) 40%,transparent)}
.inv-cell.element:not(.empty):hover,.inv-cell.element:focus-visible{border-color:var(--el);box-shadow:0 10px 24px rgba(0,0,0,.4),0 0 22px color-mix(in srgb,var(--el) 55%,transparent)}
.inv-cell.sealed .inv-cell-art img{filter:grayscale(1) brightness(.35) drop-shadow(0 6px 10px rgba(0,0,0,.65))}
.inv-cell.sealed{background:rgba(255,255,255,.02);border-style:dashed}
.inv-lock{position:absolute;left:0;right:0;bottom:6px;font:800 8.5px Manrope,system-ui;font-style:normal;letter-spacing:.16em;color:var(--muted);text-align:center}
.inv-detail.element{background:linear-gradient(135deg,color-mix(in srgb,var(--el) 18%,transparent),rgba(0,0,0,.3));border-color:color-mix(in srgb,var(--el) 50%,transparent)}
.inv-detail.element .invd-art{background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--el) 50%,transparent),rgba(0,0,0,.5) 72%)}
.inv-detail.element .invd-stats li{color:#e8f0f1;font-weight:600;font-size:12.5px;line-height:1.45}
.inv-detail.element .invd-stats li::before{color:var(--el)}
.inv-detail.sealed .invd-art img{filter:grayscale(1) brightness(.4)}
.invd-status{display:inline-flex;align-items:center;gap:6px;margin:2px 0 4px;padding:2px 9px 2px 6px;border-radius:99px;font:800 10px/1.6 Manrope,system-ui;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--el) 70%,#fff);border:1px solid color-mix(in srgb,var(--el) 60%,transparent)}
.invd-status i{width:8px;height:8px;border-radius:50%;background:var(--el);box-shadow:0 0 8px var(--el)}
.invd-matchup{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 8px;font-size:11.5px;color:#c9d4d6;margin:4px 0}
.invd-matchup span{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.invd-rival{margin:4px 0;padding:5px 9px;border-radius:9px;font-size:12px;font-weight:700;color:#fff;background:color-mix(in srgb,var(--el,#d6b77b) 22%,rgba(0,0,0,.3));border:1px solid color-mix(in srgb,var(--el,#d6b77b) 55%,transparent)}
.invd-rival.resist{color:#c9d4d6;background:rgba(0,0,0,.25);border-color:var(--line-soft)}
/* The Trial tab's vitals. */
.trial-vitals{display:grid;gap:6px;align-content:start}
.trial-bar{position:relative;height:18px;border-radius:7px;overflow:hidden;background:rgba(0,0,0,.45);box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.trial-bar i{position:absolute;inset:0;transform-origin:left;background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 50%),linear-gradient(90deg,var(--bar-a),var(--bar-b))}
.trial-bar.health{--bar-a:#b3122b;--bar-b:#ff5a4a}
.trial-bar.mana{--bar-a:#1f4fc4;--bar-b:#4fb2ff}
.trial-bar b{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:800 11px Manrope,system-ui;color:#fff;text-shadow:0 1px 3px #000}

/* ------------------------------------------------------------ skill trees */
.sk{position:relative}
.sk-hub{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;gap:6px;container-type:size}
.sk-hub-head{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.sk-points-card{justify-self:start;display:grid;justify-items:center;padding:8px 22px;border-radius:14px;border:1px solid var(--line);background:rgba(5,10,13,.72)}
.sk-points{font:700 40px/1 'Cormorant Garamond',Georgia,serif;color:var(--gold-hi)}
.sk-points-card span{font-size:9.5px;font-weight:800;letter-spacing:.22em;color:var(--muted)}
.sk-hub.has-points .sk-points-card{border-color:var(--gold);box-shadow:0 0 30px rgba(244,200,120,.3);animation:glow 1.6s ease-in-out infinite}
.sk-king-nav{grid-column:2;display:flex;align-items:center;gap:12px;font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.sk-king-nav button{padding:8px 16px;font-size:22px;line-height:1}
.sk-rating{grid-column:3;justify-self:end;display:grid;justify-items:end}
.sk-title-name{font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--gold)}
.sk-rating-value{font:700 30px/1 'Cormorant Garamond',Georgia,serif}
.sk-next-title{font-size:11px;color:var(--muted)}
.sk-wheel{position:relative;width:min(660px,calc(100cqh - 128px),100cqw);aspect-ratio:1;align-self:center}
.sk-wheel-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sk-wheel-art .w-outer{fill:none;stroke:rgba(214,183,123,.34);stroke-width:1.5}
.sk-wheel-art .w-ticks{fill:none;stroke:rgba(214,183,123,.26);stroke-width:9;stroke-dasharray:1.5 11}
.sk-wheel-art .w-orbit{fill:none;stroke:rgba(214,183,123,.2);stroke-width:1;stroke-dasharray:4 6}
.sk-wheel-art .w-runes{fill:none;stroke:rgba(214,183,123,.18);stroke-width:16;stroke-dasharray:2 6 12 6}
.sk-wheel-art .w-inner{fill:rgba(5,10,13,.6);stroke:rgba(244,217,160,.45);stroke-width:1.5}
.sk-rotor{transform-origin:300px 300px;animation:sk-rotate 140s linear infinite}
.sk-rotor.reverse{animation-direction:reverse;animation-duration:100s}
@keyframes sk-rotate{to{transform:rotate(360deg)}}
.sk-spokes .spoke{stroke:rgba(255,255,255,.14);stroke-width:2;stroke-dasharray:3 6}
.sk-spokes .spoke.lit{stroke:var(--tree);stroke-dasharray:none;opacity:.9;filter:drop-shadow(0 0 6px var(--tree))}
.sk-center,.sk-medal{position:absolute;translate:-50% -50%;display:grid;justify-items:center;gap:8px;padding:0;border:0;border-radius:24px;background:transparent;box-shadow:none!important;transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .28s}
.sk-center{left:50%;top:50%}
.sk-medal{left:calc(50% + 38% * cos(var(--a)));top:calc(50% + 38% * sin(var(--a)))}
.skm-disc{position:relative;display:grid;place-items:center;width:clamp(78px,10.5vw,116px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--tree) 28%,#1d2c33),#050a0c 74%);box-shadow:0 12px 34px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 6px rgba(5,10,13,.62)}
.skm-disc.big{width:clamp(110px,14vw,168px)}
.skm-arc{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);transform:rotate(-90deg)}
.skm-arc circle{fill:none;stroke-width:3.5}
.skm-arc .track{stroke:rgba(255,255,255,.1)}
.skm-arc .fill{stroke:var(--tree);stroke-linecap:round;filter:drop-shadow(0 0 5px var(--tree));transition:stroke-dasharray .6s}
.skm-art{width:88%;height:88%;display:grid;place-items:center;border-radius:50%;overflow:hidden}
.skm-art img{width:120%;height:120%;object-fit:contain;transform:translateY(7%);filter:drop-shadow(0 10px 14px rgba(0,0,0,.6))}
.skm-glyph{font-size:clamp(38px,4.6vw,58px);line-height:1;color:var(--tree);text-shadow:0 0 18px color-mix(in srgb,var(--tree) 60%,transparent)}
.skm-label{display:grid;justify-items:center;text-align:center;padding:6px 12px;border-radius:10px;background:rgba(3,7,9,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.06)}
.skm-label small{font-size:9px;font-weight:800;letter-spacing:.2em;color:var(--tree)}
.skm-label strong{font:600 17px/1.1 'Cormorant Garamond',Georgia,serif;white-space:nowrap}
.skm-label em{font-style:normal;font-size:11px;color:var(--muted)}
.sk-center .skm-label strong{font-size:21px}
.skm-ready{position:absolute;top:2px;right:12%;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#ffe7a8,#d49a3a);color:#1a1409;font:800 14px/24px Manrope,system-ui;box-shadow:0 0 16px rgba(255,210,120,.9);animation:glow 1.3s ease-in-out infinite}
.sk-medal kbd{position:absolute;top:2px;left:12%;font-size:9px;padding:2px 5px;opacity:.7}
.sk-center:hover,.sk-medal:hover,.sk-center:focus-visible,.sk-medal:focus-visible{transform:scale(1.07);filter:brightness(1.15);outline:none}
.sk-center:focus-visible .skm-disc,.sk-medal:focus-visible .skm-disc{box-shadow:0 0 0 3px var(--gold-hi),0 0 40px color-mix(in srgb,var(--tree) 55%,transparent)}
.sk-medal.learnable .skm-disc,.sk-center.learnable .skm-disc{animation:sk-pulse 1.8s ease-in-out infinite}
@keyframes sk-pulse{50%{box-shadow:0 12px 34px rgba(0,0,0,.55),0 0 0 6px rgba(5,10,13,.62),0 0 38px color-mix(in srgb,var(--tree) 70%,transparent)}}
.sk-hub-foot{display:flex;align-items:center;gap:16px;font-size:12.5px;color:var(--muted)}
.sk-reset{font-size:12px;padding:8px 12px}
.sk-ghost .skm-arc{display:none}
.sk-tree{height:100%;min-height:0;display:grid;grid-template-columns:clamp(220px,18vw,280px) minmax(0,1fr) clamp(300px,27vw,420px);gap:clamp(12px,1.5vw,24px)}
.sk-side{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-height:0;overflow:auto;padding:2px 4px}
.sk-back{align-self:stretch;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:11px;font-size:13px;font-weight:800}
.sk-back span{font-size:22px;line-height:.8}
.sk-back kbd{margin-left:auto;font-size:9px}
.sk-side-disc{margin:6px 0 2px}
.sk-side-piece{color:var(--tree)}
.sk-side-name{font-size:clamp(26px,2.3vw,36px);line-height:1.02}
.sk-motto{font:italic 500 16px/1.35 'Cormorant Garamond',Georgia,serif;color:#dccfb2}
.sk-motto q{quotes:'\201C' '\201D'}
.sk-motto span{display:block;margin-top:4px;font:800 9.5px Manrope,system-ui;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.sk-progress{align-self:stretch;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:6px}
.sk-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--tree));transform-origin:left;transition:transform .6s}
.sk-progress-text{font-size:11px;color:var(--muted)}
.sk-side-points{align-self:stretch;display:grid;justify-items:center;padding:10px;border-radius:12px;border:1px solid var(--line-soft);background:rgba(5,10,13,.62)}
.sk-side-points strong{font:700 34px/1 'Cormorant Garamond',Georgia,serif;color:var(--gold-hi)}
.sk-side-points span{font-size:9.5px;font-weight:800;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.sk-side-points.has-points{border-color:var(--gold);box-shadow:0 0 24px rgba(244,200,120,.25)}
.sk-tree-switch{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:auto;padding-top:8px}
.sk-chip{position:relative;width:42px;height:42px;padding:0;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--tree) 26%,#1a262c),#050a0c 76%);border:1px solid rgba(255,255,255,.12)}
.sk-chip img{width:124%;height:124%;object-fit:contain;transform:translateY(9%)}
.sk-chip .skm-glyph{font-size:22px}
.sk-chip b{position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;background:#ffd88a;box-shadow:0 0 8px #ffd88a}
.sk-chip[aria-pressed=true]{border-color:var(--tree);box-shadow:0 0 0 2px var(--tree),0 0 18px color-mix(in srgb,var(--tree) 60%,transparent)}
.sk-board{position:relative;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:16px 14px;border-radius:22px;border:1px solid var(--line-soft);background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--tree) 9%,transparent),transparent 66%),repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 18px,transparent 18px 36px),rgba(3,7,9,.6)}
.sk-tiers{display:grid;grid-template-rows:repeat(4,1fr);align-items:center}
.sk-tiers span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:9.5px;font-weight:800;letter-spacing:.2em;color:rgba(255,255,255,.26);text-align:center}
.sk-tiers span b{margin-left:6px;color:inherit}
.sk-tiers span.open{color:var(--gold)}
.sk-graph{position:relative;min-height:0}
.sk-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.sk-links .link{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2}
.sk-links .link.either{stroke-dasharray:7 6}
.sk-links .link.lit{stroke:color-mix(in srgb,var(--tree) 55%,transparent)}
.sk-links .link.done{stroke:var(--tree);stroke-width:2.6;filter:drop-shadow(0 0 5px var(--tree))}
.sk-links .flow{fill:none;stroke:#fff8e6;stroke-width:2;stroke-dasharray:4 26;stroke-linecap:round;opacity:.65;animation:sk-flow 1.6s linear infinite}
.sk-links .flow.surge{stroke-width:4.5;stroke-dasharray:70 500;opacity:1;animation:sk-surge 1.1s cubic-bezier(.2,.8,.2,1) 1}
@keyframes sk-flow{to{stroke-dashoffset:-30}}
@keyframes sk-surge{from{stroke-dashoffset:570}to{stroke-dashoffset:0}}
.sk-nodes{position:relative;height:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:clamp(8px,1.4vh,16px) clamp(10px,1.2vw,20px);align-items:center;justify-items:center}
.skn{position:relative;width:min(100%,190px);display:grid;gap:4px;padding:0 0 8px;border-radius:14px;text-align:center;background:linear-gradient(180deg,rgba(24,36,44,.97),rgba(7,13,17,.98));border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 28px rgba(0,0,0,.45);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s,filter .22s}
.skn-art{position:relative;display:block;aspect-ratio:16/8;border-radius:13px 13px 0 0;overflow:hidden;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--tree) 22%,#0b1418),#040809 82%)}
.skn-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s,filter .3s}
.skn-art::after{content:'';position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(0deg,rgba(7,13,17,.95),transparent)}
.skn-glyph{position:absolute;z-index:1;left:8px;bottom:6px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(3,7,9,.8);border:1px solid rgba(255,255,255,.2);font-size:16px;color:var(--tree)}
.skn.technique .skn-glyph{border-radius:9px;border-color:var(--line)}
.skn.mastery .skn-glyph{border:2px double #ffe9b8;color:#ffe9b8}
.skn-lock{position:absolute;z-index:1;right:6px;top:6px;padding:2px 7px;border-radius:6px;background:rgba(3,7,9,.85);font:800 9.5px Manrope,system-ui;letter-spacing:.1em;color:#ffb39c}
.skn-text{display:grid;padding:0 8px}
.skn-text strong{font-size:13.5px;line-height:1.2}
.skn-text small{font-size:10.5px;color:var(--tree);letter-spacing:.06em}
.skn-pips{display:flex;justify-content:center;gap:4px}
.skn-pips i{width:16px;height:4px;border-radius:2px;background:rgba(255,255,255,.14);transform-origin:left}
.skn-pips i.on{background:var(--gold-hi);box-shadow:0 0 6px var(--gold)}
.skn-kind{position:absolute;z-index:2;top:-9px;left:50%;translate:-50% 0;font-size:8.5px;font-weight:800;font-style:normal;letter-spacing:.16em;padding:2px 8px;border-radius:5px;background:#17262d;border:1px solid var(--line);color:var(--gold-hi);white-space:nowrap}
.skn.mastery .skn-kind{background:linear-gradient(135deg,#6b4a15,#2b1d08);color:#ffe9b8}
.skn.locked{filter:saturate(.3) brightness(.74)}
.skn.locked .skn-art img{filter:grayscale(.6) brightness(.55)}
.skn.available{border-color:color-mix(in srgb,var(--tree) 70%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--tree) 35%,transparent),0 0 26px color-mix(in srgb,var(--tree) 28%,transparent);animation:sk-node 2s ease-in-out infinite}
@keyframes sk-node{50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--tree) 60%,transparent),0 0 42px color-mix(in srgb,var(--tree) 45%,transparent)}}
.skn.learned{border-color:rgba(244,217,160,.55)}
.skn.maxed{border-color:var(--gold-hi);box-shadow:0 0 0 1px rgba(244,217,160,.4),0 0 30px rgba(244,200,120,.28)}
.skn.focused{transform:translateY(-3px) scale(1.05);border-color:var(--gold-hi);box-shadow:0 0 0 2px rgba(244,217,160,.7),0 16px 40px rgba(0,0,0,.5),0 0 34px color-mix(in srgb,var(--tree) 38%,transparent);z-index:3}
.skn.focused .skn-art img{transform:scale(1.1)}
.skn:focus-visible{outline:none}
.sk-detail{position:relative;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);border-radius:22px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,rgba(18,30,36,.96),rgba(5,10,13,.98));box-shadow:0 30px 80px rgba(0,0,0,.5)}
.skd-media{position:relative;aspect-ratio:16/9;background:#030607;overflow:hidden}
.skd-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.skd-fallback{position:absolute;inset:0;display:none;place-items:center;background:radial-gradient(circle,color-mix(in srgb,var(--tree) 16%,#0b1418),#040809)}
.skd-media.no-video .skd-fallback{display:grid}
.skd-media.no-video video{display:none}
.skd-fallback .diagram{width:auto;height:82%;max-width:none}
.skd-tag{position:absolute;z-index:1;left:10px;top:10px;display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;background:rgba(3,7,9,.72);font:800 9.5px Manrope,system-ui;letter-spacing:.16em;color:#fff}
.skd-tag i{width:7px;height:7px;border-radius:50%;background:#ff5a45;box-shadow:0 0 8px #ff5a45;animation:glow 1.2s ease-in-out infinite}
.skd-media.no-video .skd-tag{display:none}
.skd-media::after{content:'';position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(0deg,rgba(7,13,17,.96),transparent);pointer-events:none}
.skd-body{position:relative;min-height:0;overflow:auto;display:grid;gap:10px;align-content:start;padding:0 18px;margin-top:-30px}
.skd-chips{display:flex;flex-wrap:wrap;gap:6px}
.skd-chips .chip{padding:3px 8px;border-radius:6px;font-size:9.5px;font-weight:800;letter-spacing:.14em;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:var(--muted)}
.skd-chips .chip.kind-technique{color:var(--gold-hi);border-color:var(--line)}
.skd-chips .chip.kind-mastery{color:#ffe9b8;background:linear-gradient(135deg,#6b4a15,#2b1d08)}
.skd-chips .chip.key{color:#fff}
.skd-body h3{font-size:30px;line-height:1.05}
.skd-summary{font-size:13.5px;line-height:1.6;color:#d5dedf}
.skd-ranks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.skd-ranks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:center;padding:7px 9px;border-radius:9px;font-size:12.5px;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid transparent}
.skd-ranks li b{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font-size:11px;background:rgba(255,255,255,.07)}
.skd-ranks li.have{color:var(--gold-hi);background:rgba(214,183,123,.12)}
.skd-ranks li.have b{background:var(--gold);color:#1a1409}
.skd-ranks li.next{color:var(--text);border-color:rgba(214,183,123,.45);border-style:dashed}
.skd-idea{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border-radius:12px;background:rgba(0,0,0,.26);border:1px solid var(--line-soft)}
.skd-idea .diagram{width:88px;height:auto;max-width:none}
.skd-idea p{font-size:12px;color:var(--muted);line-height:1.5}
.skd-idea small{display:block;font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--gold);margin-bottom:2px}
.skd-why{font-size:12.5px;color:#ffb39c}
/* The Learn button, and why it is locked, stay in view while the ranks scroll beneath them. */
.skd-foot{position:sticky;bottom:0;z-index:2;display:grid;gap:8px;margin:2px -18px 0;padding:22px 18px 16px;background:linear-gradient(0deg,#070d10 72%,rgba(7,13,16,0))}
.skd-foot .skd-why{margin:0}
.skd-learn:disabled{background:linear-gradient(135deg,#4d4839,#302c23);color:#c9bfa8;box-shadow:inset 0 0 0 1px rgba(214,183,123,.18);opacity:1}
.skd-learn:disabled kbd{opacity:.5}
.skd-learn.maxed:disabled{background:linear-gradient(135deg,#6b4a15,#2b1d08);color:#ffe9b8;opacity:1}
.sk-stamp{position:absolute;left:50%;top:36%;z-index:5;display:grid;justify-items:center;gap:2px;padding:14px 28px;border:3px double var(--gold-hi);border-radius:10px;background:rgba(10,8,4,.86);box-shadow:0 0 70px rgba(244,200,120,.5);pointer-events:none;text-align:center;white-space:nowrap}
.sk-stamp small{font:800 11px Manrope,system-ui;letter-spacing:.3em;color:var(--gold)}
.sk-stamp strong{font:700 34px/1 'Cormorant Garamond',Georgia,serif;color:#fff4d8;text-shadow:0 0 22px rgba(255,210,140,.85)}
.sk-stamp span{font-size:11px;font-weight:800;color:var(--gold-hi)}
.sk-stamp.mastery{border-color:#ffe9b8}
.notation{display:inline-block;margin-left:6px;padding:2px 8px;border:1px solid var(--line);border-radius:6px;font:700 12px Manrope,system-ui;letter-spacing:.06em;color:var(--gold);vertical-align:middle}
.diagram{width:100%;max-width:230px;height:auto;aspect-ratio:1;flex:none;justify-self:center;border-radius:10px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.diagram .sq-light{fill:#e8dcc2}.diagram .sq-dark{fill:#80694d}
.diagram .pc{font:31px/1 'Segoe UI Symbol','Noto Sans Symbols 2','DejaVu Sans',serif;text-anchor:middle;dominant-baseline:central}
.diagram .pc-own{fill:#fff7e2;stroke:#2b1b07;stroke-width:1.1;paint-order:stroke}
.diagram .pc-rival{fill:#3b0f0a;stroke:#ffb4a0;stroke-width:.8;paint-order:stroke}
.diagram .arrow{stroke:#2e9e7a;stroke-width:4.5;stroke-linecap:round;opacity:.9}
.diagram .arrow-head{fill:#2e9e7a;opacity:.9}
.diagram .mk-move{fill:rgba(26,120,92,.55)}
.diagram .mk-hit{fill:rgba(214,58,44,.3);stroke:#d23a2e;stroke-width:2}
.diagram .mk-glow{fill:rgba(255,214,120,.5)}
.diagram .mk-guard{fill:none;stroke:#3aa0d8;stroke-width:3}
.diagram .mk-slow{fill:rgba(96,150,255,.25);stroke:#6aa8ff;stroke-width:2}
.diagram .mk-line{fill:rgba(255,186,90,.4)}
.diagram .mk-origin{fill:none;stroke:#1d8f73;stroke-width:2.5;stroke-dasharray:4 3}

/* -------------------------------------------------------------- the Trial */
.trial{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(18px,3vw,56px);align-items:center;max-width:1400px;margin:0 auto;overflow:auto}
.trial-hero h2{font-size:clamp(44px,5.4vw,86px);line-height:.95;margin:10px 0 16px;text-shadow:0 6px 30px rgba(0,0,0,.7)}
.trial-message{font-size:15px;line-height:1.7;color:#c9d4d6;max-width:560px}
.trial-cta{width:auto;min-width:300px;margin-top:24px;font-size:15px}
.trial-hero.defeat h2{color:#ffb39c}
.trial-hero.complete h2{color:var(--gold-hi)}
.trial-alt{justify-self:start;margin-top:-4px;padding:8px 2px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.trial-alt:hover{color:var(--text)}
.trial-tips{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px}
.trial-tips li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#c9d4d6}
.trial-tips b{color:var(--text)}
.trial-side{display:grid;gap:12px}
.trial-king{display:grid;grid-template-columns:124px minmax(0,1fr);gap:16px;align-items:center;padding:14px}
.trial-king img{width:124px;height:124px;object-fit:contain;border-radius:16px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--metal) 32%,transparent),#081014 72%)}
.trial-king small{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--gold)}
.trial-king strong{display:block;font:600 30px/1.05 'Cormorant Garamond',Georgia,serif}
.trial-king span{font-size:12.5px;color:var(--muted)}
.trial-xp{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin:10px 0 4px}
.trial-xp i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-hi));transform-origin:left}
.trial-king em{font-style:normal;font-size:11.5px;color:var(--muted)}
.trial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.trial-stat{padding:14px}
.trial-stat small{font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.trial-stat strong{display:block;font:700 27px/1.1 'Cormorant Garamond',Georgia,serif;color:var(--gold-hi);margin:2px 0}
.trial-stat span{font-size:11.5px;color:var(--muted);line-height:1.4}
.trial-stat.glow{border-color:var(--gold);box-shadow:0 0 26px rgba(244,200,120,.25)}

/* --------------------------------------------------- settings and controls */
.settings{display:grid;place-items:start center;overflow:auto}
.settings-card{width:min(760px,100%);padding:24px 26px;display:grid;gap:12px}
.settings-card h3{font-size:38px;line-height:1}
.settings-list{display:grid;gap:8px}
.setting{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,260px);gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line-soft);border-radius:12px;background:rgba(255,255,255,.03);font-size:14px;font-weight:600}
.setting select{background:#0d1a20;color:var(--text);border:1px solid rgba(214,183,123,.3);border-radius:8px;padding:9px;font:inherit;font-size:13px}
.setting input[type=range]{width:100%;accent-color:var(--gold)}
.setting input[type=checkbox]{justify-self:end;width:22px;height:22px;accent-color:var(--gold)}
.controls{overflow:auto;min-width:0}
/* Groups wrap to the pane's width like every other tab (one column on narrow screens). */
.controls-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px;max-width:1320px;margin:0 auto}
.controls-group{min-width:0;padding:18px}
.controls-group dl{margin:10px 0 0;display:grid;gap:2px}
.controls-group div{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:12px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--line-soft)}
.controls-group div:last-child{border-bottom:0}
.controls-group dt{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.controls-group dt i{font-size:10px;color:var(--muted);font-style:normal}
.controls-group dd{margin:0;font-size:13px;color:#c9d4d6}

/* ------------------------------------------------------ HUD notifications */
#notices{position:absolute;z-index:14;right:max(20px,var(--safe-right));top:calc(88px + var(--safe-top));width:min(340px,calc(100vw - 32px));display:grid;gap:8px;pointer-events:none}
.notice{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:center;padding:10px 14px 12px 10px;border-radius:14px;overflow:hidden;background:linear-gradient(120deg,rgba(18,30,36,.95),rgba(5,10,13,.95));border:1px solid color-mix(in srgb,var(--tone) 55%,transparent);box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 26px color-mix(in srgb,var(--tone) 22%,transparent);backdrop-filter:blur(8px)}
.notice::before{content:'';position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--tone),transparent)}
.notice::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);transform:translateX(-100%);animation:notice-shine 1.4s .25s ease-out 1;pointer-events:none}
@keyframes notice-shine{to{transform:translateX(100%)}}
.notice-art{width:58px;height:58px;display:grid;place-items:center;border-radius:12px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--tone) 40%,transparent),rgba(0,0,0,.35) 72%)}
.notice-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.notice-art b{font-size:28px;color:var(--tone);text-shadow:0 0 14px var(--tone)}
.notice-text{display:grid;gap:1px;min-width:0}
.notice-text small{font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--tone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notice-text strong{font:600 20px/1.12 'Cormorant Garamond',Georgia,serif;color:#fff4d8}
.notice-text span{font-size:12px;color:#c9d4d6}
.notice-timer{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tone);transform-origin:left;opacity:.75}
.notice.gold{--tone:#f4d9a0}.notice.common{--tone:#b8c6ca}.notice.rare{--tone:#6fb3ff}.notice.epic{--tone:#cf8dff}.notice.legendary{--tone:#ffb347}
body.attract #notices,body.story-paused #notices{display:none}
#ui-fx{position:fixed;inset:0;width:100%;height:100%;z-index:75;pointer-events:none}
.plate.loot .plate-bar{display:none}
.plate.loot .plate-name{color:var(--gold-hi);text-shadow:0 0 10px rgba(244,200,120,.7),0 1px 3px #000}
.plate.loot .plate-mark{color:#ffe3a1}

/* --------------------------------------------------------- menu responsive */
@media (max-width:1600px){
 .inv-tabs button kbd{display:none}
}
@media (min-width:861px) and (max-height:960px){
 /* Side by side on a laptop: tighter vitals leave the bag more than one row. */
 .inv-vitals{gap:5px;padding:9px 10px 9px 12px}
 .potion{width:38px;height:38px}
 .potion img{width:34px;height:34px}
 .vital-bar{height:24px}
}
@media (max-width:1380px){
 .gm-tabs button{padding:10px 12px;letter-spacing:.1em}
 .inv{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .inv-arrow{display:none}
 .inv-tabs button{padding:8px 10px}
 .inv-piece{width:56px}
 .inv-piece>span{width:40px;height:40px}
 .inv-stats dd{font-size:17px}
}
@media (max-width:1180px){
 .gm-top{grid-template-columns:minmax(0,1fr) auto;row-gap:10px}
 .gm-tabs{grid-column:1/3;grid-row:2;justify-self:center}
 .gm-actions{grid-column:2;grid-row:1}
 .inv-slot{width:170px}
 .trial{grid-template-columns:1fr;align-content:start}
 /* The tree view: a compact header over the board and the detail panel. */
 .sk-tree{grid-template-columns:minmax(0,1fr) minmax(280px,340px);grid-template-rows:auto minmax(0,1fr)}
 .sk-side{grid-column:1/3;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:6px 14px;text-align:left;overflow:visible}
 .sk-back{grid-row:1/3;align-self:center}
 .sk-side-disc{grid-row:1/3;margin:0}
 .sk-side-disc .skm-disc.big{width:74px}
 .sk-side-piece{grid-column:3;align-self:end}
 .sk-side-name{grid-column:3;font-size:28px}
 .sk-motto,.sk-progress,.sk-progress-text{display:none}
 .sk-side-points{grid-column:4;grid-row:1/3;padding:6px 14px}
 .sk-side-points strong{font-size:28px}
 .sk-tree-switch{grid-column:1/5;margin:0;padding:0;justify-content:center}
}
@media (max-width:860px){
 .inv{grid-template-columns:1fr;grid-template-rows:max(360px,48vh) auto;overflow:hidden auto}
 .game-menu[data-tab=inventory] .gm-scrim{background:linear-gradient(180deg,rgba(3,6,8,0) 0,rgba(3,6,8,0) 44%,rgba(3,6,8,.78) 58%)}
 /* Stacked: the bag takes its natural height and the pane scrolls. */
 .inv-panel{grid-template-rows:auto auto auto auto;min-height:auto}
 .inv-grid{overflow:visible}
 .sk-tree{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;overflow:auto;height:100%}
 .sk-side{grid-column:1/-1;min-height:auto}
 .sk-board{min-height:560px}
 .sk-detail{min-height:520px}
}
@media (max-width:760px){
 .gm-tabs button span{display:none}
 .gm-tabs button{padding:10px 14px}
 .gm-shoulder,.gm-hints{display:none}
 .gm-king h2{font-size:20px}
 .gm-portrait{width:44px;height:44px}
 .gm-coins{display:none}
 .gm-resume{padding:10px 14px}
 .gm-foot{justify-content:center}
 .inv-pieces{gap:4px}
 .inv-piece{width:50px}
 .inv-piece>span{width:38px;height:38px}
 .inv-arrow{display:none}
 /* The stage keeps a clear band for the 3D piece between the title and the piece switcher. */
 .inv{grid-template-rows:max(540px,76vh) auto}
 .inv-slots{grid-template-columns:repeat(2,minmax(0,1fr));grid-column:1/3;grid-row:4;align-self:end}
 .inv-slot{width:auto;grid-template-columns:44px minmax(0,1fr);padding:6px}
 .inv-slot-art{width:44px;height:44px}
 .inv-stats{grid-row:5}
 .inv-stats div{min-width:0;flex:1 1 40%}
 .inv-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 /* The bag's tabs keep their row; the purse drops beneath them when they need the width. */
 .inv-panel-head{flex-wrap:wrap;row-gap:6px}
 .inv-coins{margin-left:auto}
 .inv-detail{grid-template-columns:84px minmax(0,1fr)}
 .invd-art{width:84px;height:84px}
 .sk-wheel{width:min(100cqw,calc(100cqh - 112px))}
 /* A small wheel: compact medallions labelled by piece only; the King's name is in the header. */
 .skm-disc{width:clamp(54px,16vw,78px)}
 .skm-disc.big{width:clamp(86px,26vw,120px)}
 .sk-center .skm-label,.skm-label strong{display:none}
 .skm-label{gap:1px;padding:3px 8px}
 .skm-label small{font-size:8.5px}
 .skm-label em{font-size:10px}
 .skm-ready{width:20px;height:20px;font-size:12px;line-height:20px}
 .sk-medal kbd,.sk-hub-hint{display:none}
 /* Tree header on a phone: back, name, points, the piece switcher beneath. */
 .sk-side{grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px}
 .sk-side-disc{display:none}
 .sk-back{grid-column:1;grid-row:1/3;padding:8px 10px}
 .sk-side-piece,.sk-side-name{grid-column:2;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .sk-side-name{font-size:22px}
 .sk-side-points{grid-column:3;padding:6px 10px}
 .sk-side-points strong{font-size:24px}
 .sk-side-points span{max-width:68px;font-size:8px;line-height:1.25;text-align:center}
 .sk-tree-switch{grid-column:1/-1}
 .sk-nodes{gap:10px 6px}
 .skn-text strong{font-size:12px}
 .trial-grid{grid-template-columns:1fr 1fr}
 .trial-king{grid-template-columns:84px minmax(0,1fr)}
 .trial-king img{width:84px;height:84px}
 .controls-group div{grid-template-columns:1fr}
 .setting{grid-template-columns:1fr}
 #notices{top:auto;bottom:calc(330px + var(--safe-bottom));right:12px;width:min(300px,calc(100vw - 24px))}
}
@media (max-height:620px) and (orientation:landscape){
 /* Short screens: one header row, the tabs as icons. */
 .gm-top{padding-top:8px;padding-bottom:8px;grid-template-columns:minmax(0,1fr) auto auto;column-gap:12px}
 .gm-tabs{grid-column:2;grid-row:1}
 .gm-actions{grid-column:3;grid-row:1}
 .gm-tabs button span,.gm-shoulder{display:none}
 .gm-tabs button{padding:8px 12px}
 .gm-portrait{width:40px;height:40px}
 .gm-foot{display:none}
 /* Skill hub: points on the left, the wheel at full height in the middle, rating
    and Reset on the right; medallions scale with the wheel, labelled by piece. */
 .sk-hub{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:4px 14px}
 .sk-hub-head{display:contents}
 .sk-points-card{grid-column:1;grid-row:1/3;justify-self:end;padding:8px 16px}
 .sk-points{font-size:34px}
 .sk-king-nav{grid-column:1;grid-row:2;align-self:end;justify-self:end;gap:6px;font-size:9.5px;letter-spacing:.12em;white-space:nowrap}
 .sk-king-nav button{padding:6px 12px;min-height:40px}
 .sk-rating{grid-column:3;grid-row:1;align-self:end;justify-self:start;justify-items:start}
 .sk-rating-value{font-size:26px}
 .sk-hub-foot{grid-column:3;grid-row:2;align-self:start;justify-self:start}
 .sk-hub-hint{display:none}
 .sk-wheel{grid-column:2;grid-row:1/3;width:min(calc(100cqh - 22px),calc(100cqw - 300px));container-type:inline-size}
 .skm-disc{width:22cqw}
 .skm-disc.big{width:31cqw}
 .skm-glyph{font-size:10cqw}
 .sk-center .skm-label,.skm-label strong,.skm-label em{display:none}
 .skm-label{gap:1px;padding:2px 7px}
 .skm-label small{font-size:8px;letter-spacing:.14em}
 .sk-center,.sk-medal{gap:3px}
 .skm-ready{width:18px;height:18px;font-size:11px;line-height:18px}
 .sk-medal kbd{display:none}
 /* A tree: one header row (back, name, the six trees, points), the board on the
    left and the preview with its details on the right, each scrolling on its own. */
 .sk-tree{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px 12px;overflow:hidden;height:100%}
 .sk-side{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:auto auto;align-items:center;gap:0 12px;min-height:0;padding:0;overflow:visible;text-align:left}
 .sk-back{grid-column:1;grid-row:1/3;padding:7px 11px;font-size:12px}
 .sk-back kbd,.sk-side-disc,.sk-motto,.sk-progress,.sk-progress-text{display:none}
 .sk-side-piece{grid-column:2;grid-row:1;align-self:end;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .sk-side-name{grid-column:2;grid-row:2;align-self:start;min-width:0;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .sk-tree-switch{grid-column:3;grid-row:1/3;flex-wrap:nowrap;gap:4px;margin:0;padding:0}
 .sk-chip{width:34px;height:34px}
 .sk-side-points{grid-column:4;grid-row:1/3;display:flex;align-items:center;gap:6px;padding:4px 10px}
 .sk-side-points strong{font-size:22px}
 .sk-side-points span{max-width:64px;font-size:7.5px;line-height:1.2;text-align:left}
 .sk-board{grid-column:1;min-height:0;overflow:auto;padding:12px 8px 8px;border-radius:16px}
 .sk-nodes{height:auto;grid-template-rows:repeat(4,auto);gap:14px 8px}
 .skn{width:min(100%,160px)}
 .skn-text strong{font-size:11.5px}
 .skn-text small{font-size:9.5px}
 .sk-detail{grid-column:2;min-height:0;display:block;overflow:hidden auto;border-radius:16px}
 .skd-body{overflow:visible;padding:0 12px 12px}
 .skd-body h3{font-size:22px}
 .skd-summary{font-size:12px;line-height:1.5}
 /* Inventory: the stage fits the height (name, slots beside the piece, the piece
    switcher and stats beneath); the bag on the right scrolls on its own. */
 .inv{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:minmax(0,1fr);gap:12px;overflow:hidden}
 .inv-stage{grid-template-rows:auto minmax(0,1fr) auto auto;gap:5px}
 .inv-eyebrow,.inv-role,.inv-drag{display:none}
 .inv-name{font-size:18px}
 .inv-affinity{margin-top:2px;font-size:9.5px;gap:3px 10px}
 .inv-affinity .el-chip{padding-block:0}
 .inv-slots,.inv-slots[class]{grid-column:1;grid-row:2;grid-template-columns:auto;align-self:center;gap:3px}
 .inv-slot{width:132px;grid-template-columns:26px minmax(0,1fr);gap:6px;padding:2px 8px 2px 2px;border-radius:9px}
 .inv-slot-art{width:26px;height:26px;border-radius:7px}
 .inv-slot-art b{font-size:13px}
 .inv-slot-text{line-height:1.1}
 .inv-slot small{display:block;font-size:6.5px;letter-spacing:.14em}
 .inv-piece{line-height:1.1}
 .inv-slot strong{font-size:10.5px;-webkit-line-clamp:1;line-clamp:1}
 .inv-pieces{gap:4px}
 .inv-piece{width:42px;padding:3px 2px 2px;border-radius:9px;gap:1px}
 .inv-piece>span{width:26px;height:26px}
 .inv-piece small{font-size:6.5px;letter-spacing:.08em}
 .inv-piece i{min-width:15px;height:15px;font-size:8.5px;line-height:15px}
 .inv-stats,.inv-stats[class]{grid-row:4;gap:4px}
 .inv-stats div{flex:1 1 0;padding:3px 4px;border-radius:8px}
 .inv-stats dt{font-size:6.5px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .inv-stats dd{margin-top:1px;font-size:12px}
 .inv-stats dd small{font-size:8px;margin-left:3px}
 .inv-panel{min-height:0;overflow:hidden auto;padding:10px;gap:8px;grid-template-rows:auto auto auto auto}
 .inv-grid{overflow:visible;grid-template-columns:repeat(4,minmax(0,1fr))}
 .inv-panel>*{min-height:auto}
 .inv-panel-head{flex-wrap:wrap;row-gap:6px}
 .inv-tabs{gap:2px;padding:3px}
 .inv-tabs button{padding:6px 7px;gap:4px;font-size:11px}
 .inv-tabs button small{padding:1px 4px;font-size:9px}
 .inv-coins{margin-left:auto}
 .inv-coins img{width:24px;height:24px}
 .inv-vitals{gap:5px;padding:8px 9px 8px 10px}
 .potion{width:36px;height:36px}
 .potion img{width:32px;height:32px}
 .vital-bar{height:22px}
 .inv-detail{grid-template-columns:72px minmax(0,1fr);gap:10px;padding:10px}
 /* Settings: label and control side by side, compact rows. */
 .settings-card{padding:14px 16px;gap:8px}
 .settings-card h3{font-size:24px}
 .setting,.touch-story .setting{grid-template-columns:minmax(0,1fr) minmax(150px,240px);gap:10px;padding:7px 12px;font-size:13px}
 .setting select{padding:6px 8px}
 .controls-group{padding:12px 14px}
 .controls-group div{padding:5px 4px}
 /* The Trial: the message and its button on the left, the King and the cards on the right. */
 .trial{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch;gap:16px;height:100%;overflow:hidden}
 .trial-hero,.trial-side{min-height:0;overflow:auto;align-content:start}
 .trial-hero h2{font-size:30px;margin:4px 0 8px}
 .trial-message{font-size:12.5px;line-height:1.5}
 .trial-cta{min-width:0;width:100%;margin-top:12px;padding:10px 14px;font-size:13px}
 .trial-tips{margin-top:12px;gap:6px}
 .trial-tips li{font-size:11.5px}
 .trial-side{gap:8px}
 .trial-king{grid-template-columns:64px minmax(0,1fr);gap:10px;padding:10px}
 .trial-king img{width:64px;height:64px}
 .trial-king strong{font-size:20px}
 .trial-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .trial-stat{padding:9px 10px}
 .trial-stat strong{font-size:20px}
 .trial-stat span{font-size:10.5px}
 .invd-art{width:72px;height:72px}
}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ------------------------------------------------------------ controllers & local multiplayer */
.play-mode{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:3px;border:1px solid var(--line-soft);border-radius:10px;background:rgba(6,12,15,.55)}
.play-mode button{padding:7px 6px;border-radius:7px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);transition:background .2s,color .2s}
.play-mode button:hover{color:var(--text)}
.play-mode button[aria-checked=true]{background:linear-gradient(180deg,color-mix(in srgb,var(--metal) 40%,#1b2a31),#121e24);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--metal) 70%,transparent)}
.lobby-slots{display:grid;gap:6px}
.lobby-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.lobby-slot{position:relative;display:grid;gap:1px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(160deg,color-mix(in srgb,var(--tone,#555) 26%,#111d23),#0b1519 85%);min-width:0}
.lobby-slot.joined{border-color:color-mix(in srgb,var(--tone) 70%,transparent)}
.lobby-slot.open{border-style:dashed;background:rgba(9,17,21,.5)}
.lobby-slot.open strong{animation:join-pulse 1.6s ease-in-out infinite}
@keyframes join-pulse{50%{opacity:.45}}
.lobby-slot small{font-size:9px;letter-spacing:.16em;color:var(--muted);font-weight:700}
.lobby-slot strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lobby-slot span{font-size:11px;color:var(--muted)}
.lobby-slot .ls-team{justify-self:start;margin-top:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid var(--line-soft)}
.lobby-slot .ls-leave{position:absolute;top:4px;right:6px;font-size:15px;color:var(--muted);line-height:1}
.lobby-hint{font-size:11.5px;color:var(--muted);line-height:1.45;margin:0}
.pad-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.pad-status[hidden]{display:none}
.pad-status svg{width:18px;height:18px;fill:var(--gold)}
#pad-notice{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:80;margin:0;padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;
  background:rgba(8,15,18,.9);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.4);pointer-events:none}
#pad-notice[data-tone=warn]{border-color:#e08a5a;color:#ffd2b8}
#pad-notice[hidden]{display:none}
/* Split screen: Player 1's HUD keeps to its own viewport; the canvas stays full screen. */
body.split-screen #game{right:50%}
body.split-screen.split-4 #game{bottom:50%}
body.split-screen #viewport{right:0}
body.split-screen #touch-controls{display:none}
#player-huds{position:fixed;inset:0;z-index:12;pointer-events:none}
.player-view{position:absolute;box-sizing:border-box;border-left:2px solid rgba(0,0,0,.6)}
.pv-card{position:absolute;left:16px;bottom:16px;width:min(300px,calc(100% - 32px));padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--tone) 60%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--tone) 18%,rgba(12,22,27,.92)),rgba(8,15,18,.92));box-shadow:0 12px 30px rgba(0,0,0,.35);display:grid;gap:6px}
.pv-card header{display:flex;align-items:baseline;gap:8px}
.pv-card header b{font-size:12px;letter-spacing:.14em;color:var(--tone)}
.pv-device{font-size:11px;color:var(--muted)}
.pv-score{margin-left:auto;font:600 15px 'Cormorant Garamond',Georgia,serif}
.pv-bar{position:relative;height:16px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.pv-bar i{position:absolute;inset:0;transform-origin:left;transition:transform .15s}
.pv-bar.health i{background:linear-gradient(90deg,#b8322b,#e55a46)}
.pv-bar.command{height:6px}
.pv-bar.command i{background:linear-gradient(90deg,var(--gold),var(--gold-hi))}
.pv-bar span{position:absolute;right:6px;top:0;font-size:10.5px;line-height:16px;font-weight:700}
.pv-bar.command span{display:none}
.player-view.hurt .pv-card{box-shadow:0 0 0 2px #e55a46,0 12px 30px rgba(0,0,0,.35)}
.pv-keys{margin:0;font-size:10.5px;color:var(--muted)}
.pv-keys kbd{margin:0 3px 0 6px}.pv-keys kbd:first-child{margin-left:0}
.pv-notice{margin:0;font-size:12px;color:#ffd2b8}
.pv-notice[hidden]{display:none}
.pv-overlay{position:absolute;inset:0;display:grid;place-content:center;gap:6px;text-align:center;background:rgba(5,9,11,.62);backdrop-filter:blur(2px)}
.pv-overlay[hidden]{display:none}
.pv-overlay strong{font:600 26px 'Cormorant Garamond',Georgia,serif;letter-spacing:.06em}
.pv-overlay span{font-size:13px;color:var(--muted)}
#pad-debug{position:fixed;right:10px;top:60px;z-index:90;width:300px;max-height:70vh;overflow:auto;padding:10px;border-radius:10px;font:11px/1.45 ui-monospace,Consolas,monospace;
  background:rgba(4,8,10,.9);border:1px solid var(--line);color:#cfe;white-space:pre-wrap}
#pad-debug[hidden]{display:none}

/* ------------------------------------------------------------ device-aware prompts */
/* Every <kbd> hint gets a controller glyph beside it (story-prompts.js); the nearest data-input decides which shows. */
.pad-glyph{display:none;align-items:center;justify-content:center;flex:none;vertical-align:middle;position:relative;
  width:1.55em;height:1.55em;margin:0 .22em;border-radius:50%;font:800 .78em/1 Manrope,system-ui,sans-serif;color:#f4f6f8;
  background:radial-gradient(circle at 35% 30%,#4a5258,#1b2024 70%);box-shadow:inset 0 -2px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18),0 1px 3px rgba(0,0,0,.5)}
.pad-glyph b{font-weight:800;letter-spacing:0}
.pad-glyph[data-btn=a] b{color:#7ed957}.pad-glyph[data-btn=b] b{color:#ff5a4c}.pad-glyph[data-btn=x] b{color:#52a7ff}.pad-glyph[data-btn=y] b{color:#ffcd3c}
.pad-glyph[data-btn=lb],.pad-glyph[data-btn=rb]{width:2.3em;height:1.35em;border-radius:.45em .45em .35em .35em;font-size:.68em}
.pad-glyph[data-btn=lt],.pad-glyph[data-btn=rt]{width:1.75em;height:1.75em;border-radius:.7em .7em .3em .3em;font-size:.62em}
.pad-glyph[data-btn=ls],.pad-glyph[data-btn=rs]{font-size:.62em;width:2.1em;height:2.1em;background:radial-gradient(circle,#2a3035 52%,#5a636a 54%,#1b2024 60%)}
.pad-glyph[data-btn=view]::before,.pad-glyph[data-btn=menu]::before,.pad-glyph[data-btn=dpad]::before,.pad-glyph[data-btn=up]::before,.pad-glyph[data-btn=down]::before,.pad-glyph[data-btn=left]::before,.pad-glyph[data-btn=right]::before{
  content:'';position:absolute;inset:22%;background:#e8ecef;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.pad-glyph[data-btn=view]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h8v6H2z M6 6h8v8H6z' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E")}
.pad-glyph[data-btn=menu]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3.5h12M2 8h12M2 12.5h12' stroke='black' stroke-width='2'/%3E%3C/svg%3E")}
.pad-glyph[data-btn=dpad],.pad-glyph[data-btn=up],.pad-glyph[data-btn=down],.pad-glyph[data-btn=left],.pad-glyph[data-btn=right]{border-radius:.35em;
  --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 0h4v6h6v4h-6v6H6v-6H0V6h6z'/%3E%3C/svg%3E")}
.pad-glyph[data-btn=up]::after,.pad-glyph[data-btn=down]::after,.pad-glyph[data-btn=left]::after,.pad-glyph[data-btn=right]::after{content:'';position:absolute;width:22%;height:22%;border-radius:2px;background:var(--gold-hi,#ffd98a)}
.pad-glyph[data-btn=up]::after{top:20%;left:39%}.pad-glyph[data-btn=down]::after{bottom:20%;left:39%}.pad-glyph[data-btn=left]::after{left:20%;top:39%}.pad-glyph[data-btn=right]::after{right:20%;top:39%}
[data-input=pad] kbd[data-pad]{display:none!important}
[data-input=pad] .pad-glyph{display:inline-flex}
[data-input=pad] .no-pad{display:none!important}
[data-input=kbm] [data-input=pad] kbd[data-pad]{display:none!important}
[data-input=kbm] [data-input=pad] .pad-glyph{display:inline-flex}
.pad-copy{display:none}
[data-input=pad] .pad-copy{display:inline}
[data-input=pad] .desktop-copy:not(.pad-copy){display:none!important}
[data-input=pad] .kbm-only{display:none!important}
[data-input=kbm] .pad-only,body:not([data-input]) .pad-only{display:none!important}
.action .pad-glyph{position:absolute;top:3px;left:3px;font-size:12px;margin:0;z-index:2}
.hud-buttons .pad-glyph{font-size:13px}
.wheel-option .pad-glyph{display:none!important}
[data-input=pad] p.pad-copy{display:block}
.pad-controls{line-height:2.3}
.pad-controls .pad-glyph{font-size:12px;margin:0 2px 0 10px}.pad-controls .pad-glyph:first-child{margin-left:0}
.press-start .pad-copy .pad-glyph{font-size:1.25em;margin:0 .1em 0 .35em;letter-spacing:0}

/* Controller focus: a gold frame with a soft glow and a slow shimmer, like a console dashboard. */
@keyframes pad-focus{0%,100%{box-shadow:0 0 0 2px var(--gold-hi,#ffd98a),0 0 18px 2px rgba(255,205,120,.38),inset 0 0 12px rgba(255,220,150,.12)}
  50%{box-shadow:0 0 0 2px #fff1cf,0 0 26px 5px rgba(255,205,120,.55),inset 0 0 16px rgba(255,220,150,.2)}}
[data-input=pad] :is(.game-menu,#selection,#title,#tile-actions,#training-panel,#title-settings,#title-credits) :is(button,select,input,a,[tabindex="0"]):is(:focus,.pad-focused){
  outline:none;animation:pad-focus 1.6s ease-in-out infinite;position:relative;z-index:1;transform:translateY(-1px)}
[data-input=pad] :is(.game-menu,#selection,#title) .menu-item:is(:focus,.pad-focused){transform:translateX(8px);animation:none}
/* On a controller only its choice is lit, not an item the idle mouse happens to rest on. */
[data-input=pad] .menu-item:hover:not(:focus,.pad-focused){transform:none;background:transparent}
[data-input=pad] .menu-item:hover:not(:focus,.pad-focused)::before{transform:scaleY(0)}
[data-input=pad] .menu-item:hover:not(:focus,.pad-focused) .mi-label{color:rgba(236,232,220,.58);text-shadow:none}
[data-input=pad] .menu-item:hover:not(:focus,.pad-focused) .mi-sub{max-height:0;opacity:0}
[data-input=pad] .king-card:is(:focus,.pad-focused){transform:translateY(-3px) scale(1.02)}
[data-input=pad] input[type=range]:focus{border-radius:6px}
/* The summon wheel with a stick: the chosen piece lights up and a needle points at it. */
[data-input=pad] .wheel-option:is(:focus,.pad-focused):not(:disabled){transform:translate(-50%,-50%) scale(1.12);border-color:var(--gold-hi);
  box-shadow:0 0 0 2px var(--gold-hi),0 0 36px rgba(255,205,120,.55);background:linear-gradient(170deg,color-mix(in srgb,var(--metal) 38%,#1c2a31),#0f1a1f 80%)}
[data-input=pad] .wheel-option:is(:focus,.pad-focused):disabled{box-shadow:0 0 0 2px #e08a5a}
.wheel-needle{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .2s;transform:rotate(var(--needle,0deg))}
.wheel-needle i{position:absolute;left:-2px;top:-122px;width:4px;height:42px;border-radius:3px;
  background:linear-gradient(to top,transparent,var(--gold-hi,#ffd98a));box-shadow:0 0 12px rgba(255,210,140,.8)}
.wheel-needle.live{opacity:1}
/* Top view with a controller: a reticle the right stick moves. */
#pad-cursor{position:fixed;z-index:30;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;border-radius:50%;
  border:2px solid var(--gold-hi,#ffd98a);box-shadow:0 0 14px rgba(255,210,140,.6),inset 0 0 8px rgba(255,210,140,.35)}
#pad-cursor::before,#pad-cursor::after{content:'';position:absolute;left:50%;top:50%;background:var(--gold-hi,#ffd98a)}
#pad-cursor::before{width:2px;height:10px;margin:-5px 0 0 -1px}#pad-cursor::after{width:10px;height:2px;margin:-1px 0 0 -5px}
#pad-cursor[hidden]{display:none}
.play-mode{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}.play-mode button[hidden]{display:none}

/* ------------------------------------------------------------ equal local players */
/* Another player's HUD is a copy of Player 1's laid over their viewport (#player-huds). */
.player-view{position:absolute;overflow:hidden;border-left:2px solid rgba(0,0,0,.55)}
.player-view .pv-tag{position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:3px 12px;border-radius:999px;font:800 10.5px/1.6 Manrope,system-ui,sans-serif;letter-spacing:.18em;
  color:#0b1216;background:var(--tone);box-shadow:0 4px 14px rgba(0,0,0,.35);z-index:5}
body.split-screen #game::after{content:'PLAYER 1';position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:3px 12px;border-radius:999px;
  font:800 10.5px/1.6 Manrope,system-ui,sans-serif;letter-spacing:.18em;color:#0b1216;background:#d6b77b;box-shadow:0 4px 14px rgba(0,0,0,.35);z-index:5;pointer-events:none}
/* The roster marks each joined player's King in their colour. */
.king-card .p-badge{position:absolute;bottom:8px;right:8px;z-index:3;padding:2px 7px;border-radius:999px;font:800 10px/1.5 Manrope,system-ui,sans-serif;letter-spacing:.08em;
  color:#0b1216;background:var(--tone);box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 14px color-mix(in srgb,var(--tone) 60%,transparent);animation:join-pulse 1.4s ease-in-out infinite}
.king-card .p-badge.ready{animation:none}
.king-card:has(.p-badge){box-shadow:0 0 0 2px var(--tone,#6fd3ff)}
.lobby-slot{display:flex;align-items:center;gap:8px}
.lobby-slot img{width:44px;height:44px;flex:none;object-fit:contain;border-radius:8px;background:rgba(0,0,0,.25)}
.lobby-slot>div{display:grid;gap:1px;min-width:0}
.lobby-slot.ready{box-shadow:inset 0 0 0 1px var(--tone)}
/* A player's own pause menu carries their colour. */
.game-menu[data-player]:not([data-player=""]) .gm-frame{box-shadow:inset 0 3px 0 var(--player-tone,transparent)}
.game-menu[data-player]:not([data-player=""]) #gm-eyebrow{color:var(--player-tone)}

/* ------------------------------------------------------------ split-screen HUD */
/* Each player's HUD sizes to its own viewport (a container), not the window. Below
   1180 px wide the HUD packs itself: the action bar scales to the view's width at the
   bottom centre, the King and army cards sit above it left and right, the opponent's
   bar moves under the top-right buttons and loot notices below that. */
@container hud (max-width:1180px){
  body.split-screen #action-bar{left:50%;transform:translateX(-50%);bottom:10px;gap:5px;padding:6px 7px;border-radius:12px}
  body.split-screen .action{width:clamp(40px,calc((100cqw - 96px) / 7.2),60px);height:auto;aspect-ratio:56/60;padding:4px 3px 4px;border-radius:10px}
  body.split-screen .action small{font-size:clamp(7.5px,1.4cqw,9.5px)}
  body.split-screen .action-icon{width:clamp(16px,3.4cqw,24px);height:clamp(16px,3.4cqw,24px);margin-top:clamp(8px,1.8cqw,12px)}
  body.split-screen .action .pad-glyph{font-size:clamp(9px,1.6cqw,11px);top:2px;left:2px}
  body.split-screen .combo-pips{top:4px;right:4px}
  body.split-screen .combo-pips i{width:4px;height:4px}
  body.split-screen #king-frame{left:10px;bottom:calc(clamp(40px,calc((100cqw - 96px) / 7.2),60px) * 1.07 + 30px);width:min(330px,calc(50cqw - 16px));
    padding:9px 10px 8px;grid-template-columns:52px minmax(0,1fr);gap:9px}
  body.split-screen .king-portrait{width:52px;height:52px}
  body.split-screen #hud-portrait{inset:5px;width:42px;height:42px}
  body.split-screen .xp-ring{width:52px;height:52px}
  body.split-screen .level-badge{min-width:21px;height:21px;font-size:11px;right:-5px;bottom:-4px}
  body.split-screen #hud-king-name{font-size:15px}
  body.split-screen #player-xp-text,body.split-screen #hero-label{font-size:10px}
  body.split-screen .bar{height:14px}
  body.split-screen .bar.command{height:7px;margin-top:11px}
  body.split-screen .bar-label,body.split-screen .bar-value{font-size:9px}
  body.split-screen #squad-panel{right:10px;bottom:calc(clamp(40px,calc((100cqw - 96px) / 7.2),60px) * 1.07 + 30px);width:min(300px,calc(50cqw - 16px));padding:8px 9px 7px}
  body.split-screen #squad-list{gap:5px}
  body.split-screen .soldier-card{grid-template-columns:30px minmax(0,1fr);gap:7px;padding:4px 6px}
  body.split-screen .soldier-card img,body.split-screen .card-glyph{width:30px;height:30px;font-size:18px}
  body.split-screen .card-body strong{font-size:11.5px}
  body.split-screen #companion-status{font-size:10.5px;line-height:1.4}
  body.split-screen #objective-card{top:10px;left:10px;width:min(290px,calc(42cqw - 10px));padding:9px 11px}
  body.split-screen #objective-card h3{font-size:17px;margin:3px 0 2px}
  body.split-screen #objective-text{font-size:11.5px;line-height:1.4}
  body.split-screen #objective-goals li{font-size:10.5px}
  body.split-screen .hud-buttons{top:10px;right:10px;gap:5px}
  body.split-screen .hud-buttons button{padding:7px 8px;gap:5px}
  body.split-screen .hud-buttons button>span:not(.pad-glyph){display:none}
  body.split-screen .hud-legend,body.split-screen #view-label{display:none}
  body.split-screen #boss-bar{top:56px;left:auto;right:10px;transform:none;width:min(380px,calc(54cqw - 20px))}
  body.split-screen #boss-name{font-size:16px}
  body.split-screen #boss-icon{width:32px;height:32px}
  body.split-screen .boss-head{gap:7px;margin-bottom:4px}
  body.split-screen .boss-track{height:11px}
  body.split-screen #boss-chips .chip{font-size:8.5px;padding:3px 6px}
  body.split-screen #notices{top:132px;right:10px;width:min(300px,calc(50cqw - 16px))}
  body.split-screen #feedback.show{transform:translateX(-50%)}
  body.split-screen #feedback{left:50%;transform:translateX(-50%) translateY(8px);text-align:center;bottom:calc(clamp(40px,calc((100cqw - 96px) / 7.2),60px) * 1.07 + 160px);max-width:calc(100cqw - 24px);font-size:12px}
  body.split-screen #ground-hint{max-width:calc(100cqw - 24px)}
}
/* Narrow views (four players, small windows): drop the objective's goal list and the army hint. */
@container hud (max-width:760px){
  body.split-screen #objective-goals{display:none}
  body.split-screen #squad-panel #companion-status{display:none}
}
/* The Skill Trees hub's needle (right stick), like the summon wheel's. */
.sk-wheel .sk-needle{z-index:3}
.sk-wheel .sk-needle i{top:-158px;height:50px}
[data-input=pad] .sk-medal:is(:focus,.pad-focused) .skm-disc,[data-input=pad] .sk-center:is(:focus,.pad-focused) .skm-disc{box-shadow:0 0 0 3px var(--gold-hi,#ffd98a),0 0 30px rgba(255,205,120,.6)}
/* Chamber machinery: the "use" prompt (A / G at a lift, a stair or a fixture) and the fade while a King rides between floors. */
.use-prompt{position:absolute;z-index:6;left:50%;bottom:178px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:7px 16px 7px 8px;border-radius:99px;
  font-size:14px;font-weight:700;letter-spacing:.02em;color:#ffe9bf;background:linear-gradient(180deg,rgba(26,20,14,.9),rgba(12,10,8,.88));
  box-shadow:0 0 0 1px rgba(255,205,120,.55),0 8px 28px rgba(0,0,0,.55),0 0 26px rgba(255,170,80,.18);text-shadow:0 1px 2px #000;pointer-events:none;white-space:nowrap;
  animation:use-in .22s cubic-bezier(.2,.8,.2,1)}
.use-prompt[hidden]{display:none}
.use-prompt kbd{min-width:26px;text-align:center}
.use-prompt .pad-glyph{font-size:18px}
.use-prompt[data-tone=muted]{color:#d8cbb4;box-shadow:0 0 0 1px rgba(200,180,150,.35),0 8px 28px rgba(0,0,0,.55)}
@keyframes use-in{from{opacity:0;transform:translateX(-50%) translateY(8px) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
.transit-veil{position:absolute;inset:0;z-index:20;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 60%,rgba(20,12,8,.92),#050302 75%);transition:opacity .45s ease}
.transit .transit-veil{opacity:1;transition-duration:.5s}
@container hud (max-width:1180px){
  body.split-screen .use-prompt{bottom:calc(clamp(40px,calc((100cqw - 96px) / 7.2),60px) * 1.07 + 120px);font-size:12px;padding:5px 12px 5px 6px}
}
/* Split screen: banners fit their own view (vw would size them to the whole window). */
@container hud (max-width:1180px){
  body.split-screen .banner{max-width:calc(100cqw - 24px)}
  body.split-screen .banner strong{font-size:clamp(24px,7.4cqw,64px);letter-spacing:.1em;white-space:normal}
  body.split-screen .banner small{font-size:10.5px;letter-spacing:.22em}
  body.split-screen .banner::before,body.split-screen .banner::after{width:min(360px,70cqw)}
}

/* The boss bar: the name keeps its share of the row; status chips wrap instead of squeezing it. */
.boss-names{flex:1 1 auto;min-width:min(46%,200px)}
#boss-chips{flex:0 1 auto;min-width:0;max-width:56%}
/* Inventory by controller: the category headers and the potions show which one is focused. */
.inv-tabs button:is(:focus-visible,.pad-focused),[data-input=pad] .inv-tabs button:focus{outline:2px solid var(--gold-hi,#ffd98a);outline-offset:1px;color:#fff3d6;background:linear-gradient(180deg,rgba(255,217,138,.3),rgba(214,183,123,.12))}
.potion.pad-focused,[data-input=pad] .potion:focus{transform:translateY(-2px) scale(1.14);border-color:var(--gold-hi,#ffd98a);box-shadow:0 0 0 3px rgba(255,217,138,.85),0 8px 20px rgba(0,0,0,.5),0 0 26px rgba(244,217,160,.55);outline:none}
.gm-link .pad-glyph{margin-right:6px;font-size:15px}

/* The "Return to the title?" confirmation over the game menu. */
.gm-confirm{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:rgba(4,6,8,.62);backdrop-filter:blur(6px)}
.gm-confirm[hidden]{display:none}
.gm-confirm-card{width:min(440px,calc(100% - 32px));padding:26px 28px 22px;border-radius:16px;text-align:center;
  background:linear-gradient(180deg,rgba(32,28,22,.97),rgba(14,13,11,.97));box-shadow:0 0 0 1px rgba(214,183,123,.45),0 30px 80px rgba(0,0,0,.7)}
.gm-confirm-card h3{margin:6px 0 10px;font:600 30px/1.1 'Cormorant Garamond',Georgia,serif;color:#fff3d6}
.gm-confirm-card p:not(.eyebrow){margin:0 0 20px;font-size:13.5px;line-height:1.55;color:var(--muted,#c9bfae)}
.gm-confirm-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.gm-confirm-actions button{min-width:150px;justify-content:center}

/* The category headers: the generic controller frame is a box-shadow, which the tab row strips; draw an outline instead. */
.game-menu .inv-tabs button:is(:focus-visible,.pad-focused){outline:2px solid var(--gold-hi,#ffd98a)!important;outline-offset:1px;color:#fff3d6;background:linear-gradient(180deg,rgba(255,217,138,.32),rgba(214,183,123,.12))!important}

/* The mini-map and radar (the objective card's place): a gold-ringed disc, the objective in one line under it. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
#objective-card.minimap-card{width:auto;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;display:flex;flex-direction:column;align-items:center;gap:7px;--mm:176px}
.mm-frame{position:relative;width:var(--mm);height:var(--mm);border-radius:50%;
  box-shadow:0 0 0 1px rgba(214,183,123,.35),0 10px 30px rgba(0,0,0,.55),0 0 24px rgba(214,183,123,.12)}
#minimap{display:block;width:100%;height:100%;border-radius:50%}
.mm-glare{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.1),transparent 45%)}
.mm-caption{width:calc(var(--mm) + 40px);text-align:center;text-shadow:0 1px 3px #000;pointer-events:none}
#objective-card .mm-caption .eyebrow{font-size:8.5px;letter-spacing:.16em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
#objective-card .mm-caption h3{font-size:15px;line-height:1.15;margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-hint{margin:3px 0 0;font-size:10px;color:var(--muted,#b9b0a0);display:flex;align-items:center;justify-content:center;gap:5px;opacity:.85}
.mm-hint kbd{font-size:9px;padding:1px 5px}
#objective-card.minimap-card #wave-timer{width:var(--mm);margin-top:0}
.touch-story #objective-card.minimap-card{top:calc(70px + var(--safe-top));left:max(10px,var(--safe-left));display:flex;padding:0;border-radius:0;overflow:visible;--mm:112px}
.touch-story #objective-card .mm-caption .eyebrow,.touch-story .mm-hint{display:none}
.touch-story #objective-card .mm-caption h3{font-size:12px}
@container hud (max-width:1180px){
  body.split-screen #objective-card.minimap-card{width:auto;padding:0;--mm:clamp(96px,16cqw,150px)}
  body.split-screen #objective-card .mm-caption h3{font-size:12.5px}
  body.split-screen .mm-hint{display:none}
}
@container hud (max-width:760px){
  body.split-screen #objective-card.minimap-card .mm-caption .eyebrow{display:none}
}

/* The game menu's Map tab. */
.map-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px);gap:16px;height:100%;min-height:0}
.map-view{display:flex;flex-direction:column;min-height:0;padding:16px 18px}
.map-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.map-head h3{margin:2px 0 0;font:600 26px/1.1 'Cormorant Garamond',Georgia,serif;color:#fff3d6}
.map-floors{display:flex;gap:6px;flex-wrap:wrap}
.map-floors button{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;border:1px solid rgba(214,183,123,.25);background:rgba(255,255,255,.04);color:var(--muted);font-size:12px;font-weight:800}
.map-floors button[aria-pressed=true]{background:linear-gradient(180deg,rgba(214,183,123,.28),rgba(214,183,123,.1));color:var(--gold-hi);border-color:rgba(214,183,123,.6)}
.map-floors button i{font-style:normal;font-size:9px;letter-spacing:.12em;padding:1px 5px;border-radius:5px;background:rgba(127,240,200,.18);color:#9ff0d0}
.game-menu .map-floors button:is(:focus-visible,.pad-focused){outline:2px solid var(--gold-hi,#ffd98a)!important;outline-offset:1px}
.map-canvas-wrap{position:relative;flex:1;min-height:220px;border-radius:12px;background:radial-gradient(ellipse at center,rgba(30,34,40,.9),rgba(10,11,14,.95));box-shadow:inset 0 0 0 1px rgba(214,183,123,.2)}
.map-canvas{position:absolute;inset:0;width:100%;height:100%}
.map-floor-note{position:absolute;left:12px;bottom:8px;margin:0;font-size:11px;letter-spacing:.08em;color:var(--muted)}
.map-legend{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11px;color:var(--muted)}
.map-legend li{display:flex;align-items:center;gap:4px}
.map-legend canvas{width:20px;height:20px}
.map-side{padding:18px 18px 14px;overflow:auto}
.map-side h3{margin:4px 0 6px;font:600 24px/1.1 'Cormorant Garamond',Georgia,serif;color:#fff3d6}
.map-side .obj-detail{font-size:13px;line-height:1.55;color:#c7d3d4;margin:0 0 12px}
.obj-goals{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.obj-goals li{position:relative;padding-left:20px;font-size:12.5px;line-height:1.35;color:var(--muted)}
.obj-goals li::before{content:'';position:absolute;left:3px;top:4px;width:8px;height:8px;border:1.5px solid var(--gold);transform:rotate(45deg)}
.obj-goals li.done{color:var(--gold-hi)}
.obj-goals li.done::before{background:var(--gold)}
@media (max-width:900px){.map-layout{grid-template-columns:1fr;grid-template-rows:minmax(260px,1fr) auto}}

#objective-card.minimap-card{position:absolute;z-index:5;pointer-events:none}

/* The charge meter around the reticle (story-charge-meter.js). */
#charge-meter{position:absolute;z-index:4;left:50%;top:50%;width:140px;height:140px;transform:translate(-50%,-50%);pointer-events:none}
.story-paused #charge-meter,.tactical-view #charge-meter,.command-open #charge-meter{visibility:hidden}
.touch-story #charge-meter{width:116px;height:116px}

/* Skill Trees hub with a controller: a focused medal stays on its ring (absolute) and only glows (the general pad-focus rule would make it relative and push it out of place). */
[data-input=pad] :is(.game-menu,#selection,#title) :is(.sk-medal,.sk-center):is(:focus,.pad-focused){position:absolute;z-index:2;transform:scale(1.07);filter:brightness(1.18);animation:none}
[data-input=pad] :is(.game-menu,#selection,#title) :is(.sk-medal,.sk-center):is(:focus,.pad-focused) .skm-disc{box-shadow:0 0 0 3px var(--gold-hi,#ffd98a),0 0 34px color-mix(in srgb,var(--tree,#ffd98a) 60%,transparent),0 0 60px rgba(255,205,120,.35)}

/* The summon wheel shows the army: a badge per piece in it (the fused one marked), and a dimmed (still focusable) option when it cannot be raised. */
.wheel-option.unavailable{opacity:.5;filter:grayscale(.7)}
.wheel-option.unavailable.in-army{opacity:.82;filter:grayscale(.25)}
[data-input=pad] .wheel-option.unavailable:is(:focus,.pad-focused){box-shadow:0 0 0 2px #e08a5a,0 0 26px rgba(224,138,90,.35)}
.wheel-option .army-count{position:absolute;top:-9px;right:-9px;min-width:26px;height:26px;padding:0 6px;display:none;align-items:center;justify-content:center;gap:2px;border-radius:13px;
  font:700 12px/1 var(--ui-font,inherit);color:#10202a;background:linear-gradient(180deg,#9ff2d8,#5fd0b0);box-shadow:0 0 0 2px rgba(10,20,26,.9),0 0 14px rgba(120,240,200,.55)}
.wheel-option.in-army .army-count{display:inline-flex}
.wheel-option .army-count i{font-style:normal;font-size:10px;color:#1d4a3e}
.wheel-option.dismissing{animation:wheel-dismiss .35s ease-out}
@keyframes wheel-dismiss{0%{box-shadow:0 0 0 2px #ff9a6a,0 0 40px rgba(255,140,90,.8)}100%{box-shadow:none}}

/* Armour: a steel layer over a nameplate's bar and the boss bar, until it breaks off. */
.plate-bar .armor{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:repeating-linear-gradient(90deg,#c9d2de 0 6px,#8e98a6 6px 7px);opacity:.92;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.boss-armor{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:repeating-linear-gradient(90deg,#d5dce6 0 10px,#9aa3b0 10px 12px);opacity:.85;pointer-events:none}
.damage-number.armor{color:#c9d2de;font-size:.85em;text-shadow:0 1px 0 #2a2e35}
.damage-number.headshot{color:#ffe08a;font-weight:900;letter-spacing:.08em;text-shadow:0 0 12px rgba(255,200,80,.85),0 2px 0 #4a2c00}
.damage-number.critical{color:#ffd27a;font-weight:900;letter-spacing:.1em;text-shadow:0 0 14px rgba(255,170,60,.9),0 2px 0 #4a2200}
.damage-number.armorbreak{color:#e6edf7;font-weight:800;letter-spacing:.06em;text-shadow:0 0 10px rgba(180,200,230,.8),0 2px 0 #1d2128}

/* Through the chamber's great door: the screen fills with its light before the next chamber. */
body.chamber-exit::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;background:radial-gradient(circle at 50% 45%,rgba(255,240,205,1),rgba(255,214,140,.96) 45%,rgba(20,14,8,1));animation:chamber-exit 2.6s ease-in forwards}
@keyframes chamber-exit{0%{opacity:0}55%{opacity:1}100%{opacity:1}}

/* The Queen's meter: under the Command bar; it fills with landed blows, crackles when full, burns down while she is fused. */
.queen-bar{position:relative;height:16px;margin-top:5px;border-radius:999px;background:rgba(40,6,12,.75);border:1px solid rgba(255,80,100,.35);overflow:hidden}
.queen-bar .queen-fill{position:absolute;inset:0;transform-origin:left;background:linear-gradient(90deg,#5a0c18,#a8203a);transition:transform .15s linear}
.queen-bar.ready{border-color:#ffd27a;box-shadow:0 0 14px rgba(255,46,76,.7),0 0 4px #ffd27a inset;animation:queen-flash 1.1s ease-in-out infinite}
.queen-bar.ready .queen-fill{background:linear-gradient(90deg,#c0102e,#ff2e4c 55%,#ffd27a);background-size:200% 100%;animation:queen-flow 1.2s linear infinite}
.queen-bar.active{border-color:#ff5068;box-shadow:0 0 14px rgba(255,46,76,.55)}
.queen-bar.active .queen-fill{background:linear-gradient(90deg,#c0102e,#ff2e4c 60%,#ffd27a);animation:queen-pulse .9s ease-in-out infinite alternate}
.queen-bar .queen-text{position:relative;display:block;text-align:center;font-size:10px;line-height:16px;letter-spacing:.14em;color:#ffe2e6;text-shadow:0 1px 2px #000}
@keyframes queen-pulse{from{filter:brightness(1)}to{filter:brightness(1.35)}}
@keyframes queen-flow{from{background-position:0 0}to{background-position:-200% 0}}
@keyframes queen-flash{0%,100%{filter:brightness(1)}50%{filter:brightness(1.45)}}
/* Her party card when she is ready: a light flashing and electric sparks crawling through it. */
.soldier-card{position:relative}
.soldier-card .queen-sparks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;fill:none;stroke-linecap:round;stroke-linejoin:round}
.soldier-card.queen-ready{animation:queen-card 1.3s ease-in-out infinite;box-shadow:0 0 0 1px rgba(255,210,122,.75),0 0 16px rgba(255,46,76,.55)}
.soldier-card.queen-ready .queen-sparks{opacity:1}
.soldier-card.queen-ready .queen-sparks polyline{stroke:#ffe9a8;stroke-width:1.4;stroke-dasharray:14 120;filter:drop-shadow(0 0 2px #ff3050) drop-shadow(0 0 4px #ffd27a);animation:queen-spark .55s linear infinite}
.soldier-card.queen-ready .queen-sparks polyline:nth-child(2){stroke:#ff8aa0;animation-duration:.42s;animation-delay:-.2s}
.soldier-card.queen-ready .queen-sparks polyline:nth-child(3){stroke:#fff;stroke-width:1;animation-duration:.7s;animation-delay:-.35s}
@keyframes queen-spark{0%{stroke-dashoffset:134;opacity:0}10%{opacity:1}70%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes queen-card{0%,100%{background-color:rgba(255,46,76,.08)}50%{background-color:rgba(255,46,76,.22)}}
@media (prefers-reduced-motion:reduce){.soldier-card.queen-ready,.soldier-card.queen-ready .queen-sparks polyline,.queen-bar.ready{animation:none}}

/* A compact item description: it never crowds the item grid above it (long text scrolls inside). */
.inv-detail{grid-template-columns:64px minmax(0,1fr);gap:10px;padding:9px 11px;max-height:190px;overflow:hidden auto;align-items:start}
.invd-art{width:64px;height:64px;border-radius:10px}
.inv-detail h4{margin:1px 0 3px;font-size:20px}
.invd-kind{font-size:9.5px}
.invd-stats{display:flex;flex-wrap:wrap;gap:1px 12px;margin:0 0 3px}
.invd-stats li{font-size:12px}
.inv-detail.element .invd-stats li{font-size:11.5px;line-height:1.35}
.invd-preview{margin:3px 0;padding:5px 8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 12px}
.invd-preview li{font-size:11.5px}
.invd-lore{font-size:13px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.invd-note{font-size:11px;margin-top:3px}
.invd-matchup{font-size:11px;margin:2px 0}
.invd-actions{margin-top:6px}
.invd-actions .cta,.invd-actions .ghost-button{min-width:150px;padding-top:7px;padding-bottom:7px;font-size:12px}

.damage-number.warded{color:#9fe8ff;font-size:15px;font-weight:800;letter-spacing:.14em;text-shadow:0 2px 0 #06303a,0 0 12px rgba(120,220,255,.8)}

/* ============================================================ SELECT SCREENS */
/* CHOOSE YOUR KING and the chamber select: the 3D stage fills the screen (story-select-stage.js);
   the UI sits in dark bands top and bottom so the armies and the boxes stay in view. */
body.title-open #selection{position:fixed;inset:0;z-index:45;overflow:hidden;padding:0;background:none;backdrop-filter:none;min-height:0}
#selection .ks-screen{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto auto;pointer-events:none}
#selection .ks-screen>*{pointer-events:auto}
#selection .ks-screen::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,4,6,.86),rgba(2,4,6,.25) 16%,transparent 30%,transparent 52%,rgba(2,4,6,.55) 66%,rgba(2,4,6,.94) 82%),
  radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55))}
.ks-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:clamp(12px,2.2vh,26px) clamp(16px,3vw,48px) 0}
.ks-heading{text-align:center}
.ks-heading .eyebrow{letter-spacing:.42em;color:color-mix(in srgb,var(--metal,#d6b77b) 85%,#fff);font-size:11px}
.ks-heading h1{font:600 clamp(30px,4.4vw,64px)/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.06em;text-transform:uppercase;margin:4px 0 0;
  background:linear-gradient(180deg,#fff7e2,#e8c27a 55%,#9a6a26);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 18px rgba(0,0,0,.7))}
.ks-heading h1::after{content:"";display:block;width:min(360px,50%);height:2px;margin:10px auto 0;background:linear-gradient(90deg,transparent,var(--metal,#d6b77b),transparent)}
.ks-back{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 10px;border-radius:999px;border:1px solid rgba(214,183,123,.35);background:rgba(8,12,14,.55);color:#efe6d2;font:700 12px Manrope,system-ui;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px)}
.ks-back:hover{border-color:var(--gold,#d6b77b);background:rgba(30,24,14,.7)}
.ks-top .pad-status{justify-self:end}
/* Each player's banner over their army. */
.ks-banners{position:relative;align-self:start;display:flex;justify-content:flex-start;padding:clamp(10px,3vh,40px) clamp(16px,4vw,64px) 0;gap:24px}
.ks-banners.two{justify-content:space-between}
.ks-banner{width:min(400px,40vw);padding:16px 20px 14px;border-left:3px solid var(--tone);background:linear-gradient(90deg,rgba(6,9,11,.82),rgba(6,9,11,.35) 70%,transparent);
  animation:ks-in .45s cubic-bezier(.2,.8,.2,1) both}
.ks-banners.two .ks-banner:last-child{border-left:0;border-right:3px solid var(--tone);text-align:right;background:linear-gradient(270deg,rgba(6,9,11,.82),rgba(6,9,11,.35) 70%,transparent)}
.ks-banners.two .ks-banner:last-child .ks-chips{justify-content:flex-end}
.ks-player{font:800 11px Manrope,system-ui;letter-spacing:.3em;color:var(--tone)}
.ks-banner h2{font:600 clamp(28px,3.4vw,48px)/1 'Cormorant Garamond',Georgia,serif;margin:6px 0 4px;color:#fff3dc;text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 30px color-mix(in srgb,var(--army) 60%,transparent)}
.ks-era{font-size:13px;color:#c9c0ac;letter-spacing:.04em}
.ks-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ks-chips>span{padding:3px 9px;border-radius:999px;font:800 10px/1.6 Manrope,system-ui;letter-spacing:.14em;color:#efe6d2;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.ks-state{margin-top:10px;font:800 12px Manrope,system-ui;letter-spacing:.24em;color:#cfc6b2;display:flex;align-items:center;gap:8px}
.ks-banners.two .ks-banner:last-child .ks-state{justify-content:flex-end}
.ks-banner.ready .ks-state{color:var(--tone);text-shadow:0 0 12px var(--tone)}
.ks-banner.ready{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 40%,transparent)}
@keyframes ks-in{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
/* Player 2 may join any time. */
.ks-join{justify-self:end;align-self:end;margin:0 clamp(16px,4vw,64px) 10px;display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;
  background:rgba(8,12,14,.65);border:1px solid rgba(111,211,255,.45);color:#cfeeff;font:700 12px Manrope,system-ui;letter-spacing:.12em;text-transform:uppercase;animation:ks-pulse 2.2s ease-in-out infinite}
.ks-join[hidden]{display:none}
@keyframes ks-pulse{0%,100%{box-shadow:0 0 0 0 rgba(111,211,255,0)}50%{box-shadow:0 0 22px 2px rgba(111,211,255,.35)}}
/* The roster: twenty Kings in one 10 x 2 strip, no scroll. */
.ks-roster-wrap{padding:0 clamp(12px,3vw,48px)}
.ks-roster{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-auto-rows:min(13.5vh,128px);gap:clamp(4px,.6vw,9px);max-width:1640px;margin:0 auto}
.ks-card{position:relative;overflow:hidden;border-radius:10px;border:1px solid rgba(214,183,123,.22);background:#0a0d10;cursor:pointer;padding:0;color:#efe6d2;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease;filter:saturate(.8) brightness(.82)}
.ks-card .ks-art{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--army) 45%,transparent),transparent 70%)}
.ks-card img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.ks-card .ks-name{position:absolute;left:0;right:0;bottom:0;padding:16px 6px 6px;font:700 clamp(9px,.78vw,12px)/1.15 Manrope,system-ui;letter-spacing:.06em;text-transform:uppercase;text-align:center;
  background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.55) 60%,transparent);text-shadow:0 1px 2px #000}
.ks-card:hover{filter:none;border-color:color-mix(in srgb,var(--metal) 70%,transparent)}
.ks-card.chosen{filter:none;transform:translateY(-6px) scale(1.04);z-index:2;border-color:var(--cursor);box-shadow:0 0 0 2px var(--cursor),0 14px 34px rgba(0,0,0,.6),0 0 28px color-mix(in srgb,var(--cursor) 55%,transparent)}
.ks-card.locked{box-shadow:0 0 0 3px var(--cursor),0 0 38px var(--cursor)}
.ks-card.chosen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%);background-size:250% 100%;animation:ks-sheen 2.6s ease-in-out infinite}
@keyframes ks-sheen{from{background-position:120% 0}to{background-position:-120% 0}}
.ks-marks{position:absolute;top:5px;left:5px;right:5px;display:flex;gap:4px;justify-content:space-between}
.ks-marks i{font:900 10px/1 Manrope,system-ui;font-style:normal;letter-spacing:.06em;padding:3px 6px;border-radius:5px;background:var(--tone);color:#0b0d0f;box-shadow:0 2px 8px rgba(0,0,0,.6)}
.ks-foot{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(12px,2.4vw,36px);padding:12px 16px clamp(10px,2vh,20px);font:700 11px Manrope,system-ui;letter-spacing:.14em;text-transform:uppercase;color:#bfb7a4}
.ks-foot>span{display:inline-flex;align-items:center;gap:8px}
.ks-foot[hidden],#ks-versus[hidden]{display:none}
.ks-status{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:46;color:#ffb39e;font:700 13px Manrope,system-ui;text-align:center;pointer-events:none}
[data-input=pad] #selection kbd.kbm-only{display:none}
#selection .pad-glyph{display:none}
[data-input=pad] #selection .pad-glyph{display:inline-flex}
/* The chamber select: arrows either side of the boxes, the focused chamber's plaque below. */
#ks-chambers{grid-template-rows:auto 1fr auto auto auto}
#ks-chambers[hidden],#ks-kings[hidden]{display:none}
.cs-arrow{position:absolute;top:44%;width:clamp(48px,5vw,72px);height:clamp(48px,5vw,72px);border-radius:50%;border:1px solid rgba(214,183,123,.45);background:radial-gradient(circle at 50% 35%,rgba(60,46,26,.85),rgba(8,10,12,.85));
  display:grid;place-items:center;padding:0;min-width:0;min-height:0;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .15s ease,box-shadow .15s ease,opacity .2s ease}
.cs-arrow svg{width:clamp(18px,2.3vw,32px);height:clamp(18px,2.3vw,32px);fill:none;stroke:#f0d79a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cs-arrow.left{left:clamp(10px,3vw,48px)}
.cs-arrow.right{right:clamp(10px,3vw,48px)}
.cs-arrow:hover:not(:disabled){transform:scale(1.08);box-shadow:0 0 30px rgba(255,210,122,.45),0 10px 30px rgba(0,0,0,.6)}
.cs-arrow:disabled{opacity:.25;cursor:default}
.cs-info{grid-row:3;justify-self:center;width:min(760px,92vw);padding:16px 24px 18px;text-align:center;border-radius:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 55%,rgba(6,9,11,.9)),rgba(6,9,11,.92));border:1px solid color-mix(in srgb,var(--glow) 45%,transparent);
  box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);animation:cs-in .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes cs-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cs-num{font:800 11px Manrope,system-ui;letter-spacing:.36em;color:var(--glow)}
.cs-num em{font-style:normal;margin-left:10px;color:#9ff5b6;letter-spacing:.2em}
.cs-info h2{font:600 clamp(28px,3.4vw,46px)/1 'Cormorant Garamond',Georgia,serif;margin:6px 0 2px;color:#fff3dc;text-shadow:0 0 30px color-mix(in srgb,var(--glow) 50%,transparent)}
.cs-sub{font:italic 500 16px/1.3 'Cormorant Garamond',Georgia,serif;color:#dccfb2}
.cs-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.cs-facts dt{font:800 9.5px Manrope,system-ui;letter-spacing:.2em;text-transform:uppercase;color:#9a9282}
.cs-facts dd{margin:2px 0 0;font:700 13px Manrope,system-ui;color:#efe6d2}
.cs-enter{width:auto;min-width:260px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.cs-dots{grid-row:4;display:flex;justify-content:center;gap:8px;padding-top:10px}
.cs-dots button{width:10px;height:10px;border-radius:50%;border:1px solid rgba(214,183,123,.5);background:transparent;padding:0;cursor:pointer;transition:transform .2s ease}
.cs-dots button.done{background:rgba(159,245,182,.45)}
.cs-dots button.on{background:var(--gold,#d6b77b);transform:scale(1.4);box-shadow:0 0 10px var(--gold,#d6b77b)}
#ks-chambers .ks-foot{grid-row:5}
@media (max-width:760px),(max-height:520px){
  .ks-roster{grid-auto-rows:min(11vh,92px)}
  .ks-banner{padding:10px 12px}
  .ks-banner h2{font-size:24px}
  .cs-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ks-foot{gap:10px;font-size:9.5px}
}
@media (prefers-reduced-motion:reduce){.ks-card.chosen::after,.ks-join{animation:none}}

/* The roster wins over the old King grid (#kings) at every width; each card is the King alone, rendered in Blender. */
#kings.ks-roster{grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(4px,.6vw,9px)}
.ks-card .ks-art{background:radial-gradient(120% 80% at 50% 70%,color-mix(in srgb,var(--army) 55%,transparent),rgba(6,8,10,.95) 72%),linear-gradient(180deg,#0b0e11,#050607)}
.ks-card img{object-fit:contain;object-position:50% 80%;height:calc(100% - 4px);filter:drop-shadow(0 6px 10px rgba(0,0,0,.7))}

/* Three or four players: a banner each, side by side across the top. */
.ks-banners.many{justify-content:space-between;gap:10px}
.ks-banners.many .ks-banner{width:auto;flex:1 1 0;min-width:0;padding:10px 12px 9px}
.ks-banners.many .ks-banner h2{font-size:clamp(18px,2vw,30px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-banners.many .ks-era{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-banners.many .ks-chips>span:nth-child(3){display:none}

/* The select screens own the whole screen: the title's footer (credit, hints) steps aside. */
#title[data-state="selection"] .title-foot{display:none}

/* Short landscape screens (phones): both select screens still fit with no scroll, the stage keeps a band. */
@media (max-height:520px) and (orientation:landscape){
  .ks-top{padding-top:6px;gap:8px}
  .ks-heading .eyebrow{font-size:8.5px;letter-spacing:.32em}
  .ks-heading h1{font-size:clamp(20px,3.4vw,28px)}
  .ks-heading h1::after{margin-top:4px}
  .ks-back{padding:5px 10px 5px 8px;font-size:10px}
  .ks-banners{padding:4px clamp(12px,3vw,32px) 0}
  .ks-banner{width:min(300px,38vw);padding:6px 12px 6px}
  .ks-player{font-size:8.5px}
  .ks-banner h2{font-size:clamp(17px,2.6vw,22px);margin:2px 0 1px}
  .ks-era{font-size:10px}
  .ks-chips{margin-top:4px;gap:4px}
  .ks-chips>span{font-size:8px;padding:1px 6px}
  .ks-state{margin-top:4px;font-size:9px}
  .ks-join{padding:3px 12px;margin-bottom:5px;font-size:9px}
  #kings.ks-roster{grid-auto-rows:min(17vh,72px);gap:4px}
  .ks-card{border-radius:7px}
  .ks-card .ks-name{padding:10px 2px 3px;font-size:7.5px;letter-spacing:.03em}
  .ks-card.chosen{transform:translateY(-3px) scale(1.03)}
  .ks-marks i{font-size:7.5px;padding:2px 4px}
  .ks-foot{padding:4px 12px 6px;gap:12px;font-size:8.5px}
  .cs-arrow{top:34%;width:40px;height:40px}
  .cs-info{width:min(600px,72vw);padding:7px 16px 9px;border-radius:12px}
  .cs-num{font-size:8.5px}
  .cs-info h2{font-size:clamp(18px,2.8vw,24px);margin:2px 0 0}
  .cs-sub{display:none}
  .cs-facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:5px 0 7px}
  .cs-facts dt{font-size:7.5px}
  .cs-facts dd{font-size:10.5px}
  .cs-enter{min-width:170px;padding:6px 14px;font-size:12px}
  .cs-dots{padding-top:6px;gap:6px}
  .cs-dots button{width:8px;height:8px}
}


/* ===================================================== ARENA: RULES, GAME!, RESULTS */
/* Choose the Rules: two cards over the arena's open box, a stepper on each. */
#ks-rules{grid-template-rows:auto 1fr auto auto}
#ks-rules[hidden]{display:none}
.rs-cards{grid-row:2;align-self:end;justify-self:center;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,28px);width:min(980px,92vw);margin-bottom:clamp(8px,2vh,18px)}
.rs-card{position:relative;display:grid;justify-items:center;gap:8px;padding:clamp(14px,2.2vh,24px) clamp(14px,2vw,26px) 18px;border-radius:18px;text-align:center;cursor:pointer;
  background:linear-gradient(180deg,rgba(16,20,24,.86),rgba(6,8,10,.92));border:1px solid rgba(214,183,123,.22);box-shadow:0 18px 50px rgba(0,0,0,.55);backdrop-filter:blur(8px);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;color:#efe6d2}
.rs-card h2{margin:0;font:600 clamp(24px,2.6vw,36px)/1 'Cormorant Garamond',Georgia,serif;color:#fff3dc}
.rs-card p{margin:0;max-width:34ch;font:500 13px/1.45 Manrope,system-ui;color:#c9c0ac}
.rs-icon{width:44px;height:44px;fill:none;stroke:#d6b77b;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.rs-card.on{transform:translateY(-6px);border-color:#f0d79a;box-shadow:0 0 0 2px rgba(240,215,154,.55),0 22px 60px rgba(0,0,0,.6),0 0 46px rgba(255,200,110,.22);
  background:linear-gradient(180deg,rgba(46,36,20,.92),rgba(10,9,8,.94))}
.rs-card.on .rs-icon{opacity:1;filter:drop-shadow(0 0 8px rgba(255,210,122,.6))}
.rs-stepper{display:flex;align-items:center;gap:14px;margin-top:4px}
.rs-stepper button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(214,183,123,.45);background:radial-gradient(circle at 50% 35%,rgba(60,46,26,.9),rgba(8,10,12,.9));
  color:#f0d79a;font:700 24px/1 Manrope,system-ui;cursor:pointer;padding:0;display:grid;place-items:center}
.rs-stepper button:disabled{opacity:.25;cursor:default}
.rs-stepper button:not(:disabled):hover{box-shadow:0 0 18px rgba(255,210,122,.4)}
.rs-stepper strong{display:grid;justify-items:center;min-width:92px}
.rs-stepper b{font:600 clamp(40px,4.6vw,60px)/1 'Cormorant Garamond',Georgia,serif;color:#fff3dc;text-shadow:0 0 24px rgba(255,200,110,.35)}
.rs-stepper small{font:800 10px Manrope,system-ui;letter-spacing:.3em;text-transform:uppercase;color:#bfb7a4}
.rs-range{font:700 10px Manrope,system-ui;letter-spacing:.22em;text-transform:uppercase;color:#8f8775}
.rs-go{grid-row:3;display:flex;justify-content:center;padding-bottom:4px}
.rs-start{min-width:280px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
#ks-rules .ks-foot{grid-row:4}
@media (max-width:760px){.rs-cards{grid-template-columns:1fr}.rs-card p{display:none}}
@media (max-height:520px) and (orientation:landscape){.rs-card{padding:8px 12px 10px;gap:4px}.rs-card p,.rs-icon,.rs-range{display:none}.rs-card h2{font-size:20px}.rs-stepper b{font-size:32px}.rs-stepper button{width:34px;height:34px}}

/* GAME!: across every view at the end of a match. */
#arena-game{position:fixed;inset:0;z-index:70;display:grid;place-content:center;justify-items:center;gap:10px;pointer-events:none;
  background:radial-gradient(60% 45% at 50% 50%,rgba(0,0,0,.55),transparent 75%)}
#arena-game[hidden]{display:none}
#arena-game strong{font:700 clamp(84px,15vw,220px)/.9 'Cormorant Garamond',Georgia,serif;letter-spacing:.02em;font-style:italic;
  background:linear-gradient(180deg,#fff6d8 0%,#ffd77a 42%,#c98a2a 62%,#fff1c4 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 0 rgba(60,30,0,.65)) drop-shadow(0 0 40px rgba(255,190,80,.55))}
#arena-game span{font:800 clamp(14px,1.8vw,22px) Manrope,system-ui;letter-spacing:.42em;color:#fff3dc;text-shadow:0 2px 12px rgba(0,0,0,.8)}
#arena-game.play strong{animation:game-slam .7s cubic-bezier(.2,1.4,.3,1) both}
#arena-game.play span{animation:game-sub .6s .45s ease-out both}
#arena-game.play{animation:game-flash .9s ease-out both}
@keyframes game-slam{0%{transform:scale(2.6) rotate(-6deg);opacity:0}55%{transform:scale(.92) rotate(1deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes game-sub{0%{opacity:0;transform:translateY(14px);letter-spacing:.8em}100%{opacity:1;transform:none}}
@keyframes game-flash{0%{background-color:rgba(255,236,190,.55)}40%{background-color:rgba(255,236,190,0)}}

/* The scoreboard: the Kings by place. */
#arena-results{position:fixed;inset:0;z-index:72;display:grid;place-items:center;padding:clamp(10px,3vh,40px) 16px;overflow:auto;
  background:radial-gradient(120% 90% at 50% 0%,rgba(40,30,16,.82),rgba(4,6,8,.94) 60%)}
#arena-results[hidden]{display:none}
.ar-card{width:min(1080px,96vw);display:grid;gap:clamp(10px,1.8vh,18px)}
.ar-head{text-align:center}
.ar-head .eyebrow{letter-spacing:.42em;color:#d6b77b;font-size:11px;margin:0}
.ar-head h1{margin:6px 0 0;font:600 clamp(34px,4.4vw,62px)/1 'Cormorant Garamond',Georgia,serif;text-transform:uppercase;letter-spacing:.06em;
  background:linear-gradient(180deg,#fff3d0,#e2b45c 60%,#a8732a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ar-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ar-row{position:relative;display:grid;grid-template-columns:88px 92px minmax(0,1.2fr) minmax(0,2.4fr);align-items:center;gap:16px;padding:10px 18px 10px 12px;border-radius:16px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--tone) 16%,rgba(10,12,14,.92)),rgba(8,10,12,.9) 45%);border:1px solid rgba(255,255,255,.08);border-left:4px solid var(--tone);
  box-shadow:0 12px 34px rgba(0,0,0,.45);animation:ar-in .5s ease-out both}
.ar-row:nth-child(2){animation-delay:.08s}.ar-row:nth-child(3){animation-delay:.16s}.ar-row:nth-child(4){animation-delay:.24s}
@keyframes ar-in{0%{opacity:0;transform:translateX(-24px)}100%{opacity:1;transform:none}}
.ar-row.first{border-color:rgba(255,215,130,.55);border-left-color:#ffd77a;box-shadow:0 0 0 1px rgba(255,215,130,.35),0 16px 44px rgba(0,0,0,.5),0 0 50px rgba(255,190,80,.18);
  background:linear-gradient(90deg,rgba(70,52,20,.95),rgba(12,11,9,.92) 55%)}
.ar-place{font:700 clamp(26px,2.6vw,38px)/1 'Cormorant Garamond',Georgia,serif;color:#e8ddc8;text-align:center}
.ar-row.first .ar-place{color:#ffd77a;text-shadow:0 0 18px rgba(255,200,90,.6)}
.ar-row:nth-child(2) .ar-place{color:#d9dfe8}
.ar-row:nth-child(3) .ar-place{color:#e0a46c}
.ar-king{width:92px;height:96px;border-radius:12px;overflow:hidden;display:grid;place-items:end center;
  background:radial-gradient(110% 80% at 50% 75%,color-mix(in srgb,var(--army) 60%,transparent),rgba(6,8,10,.95) 72%)}
.ar-king img{height:96%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.7))}
.ar-row.first .ar-king{box-shadow:0 0 0 2px #ffd77a,0 0 24px rgba(255,200,90,.45)}
.ar-who{display:grid;gap:2px;min-width:0}
.ar-who small{font:800 10px Manrope,system-ui;letter-spacing:.3em;color:var(--tone)}
.ar-who strong{font:600 clamp(20px,2vw,28px)/1.05 'Cormorant Garamond',Georgia,serif;color:#fff3dc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-who em{font:500 12px Manrope,system-ui;font-style:normal;color:#a89f8c}
.ar-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0}
.ar-stats div{text-align:center}
.ar-stats dt{font:800 9px Manrope,system-ui;letter-spacing:.18em;text-transform:uppercase;color:#8f8775}
.ar-stats dd{margin:3px 0 0;font:700 clamp(18px,1.7vw,24px)/1 Manrope,system-ui;color:#efe6d2}
.ar-row.first .ar-stats dd{color:#fff3dc}
.ar-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:4px}
.ar-actions .cta{min-width:200px}
.ar-button{min-width:200px;padding:12px 22px;border-radius:999px;border:1px solid rgba(214,183,123,.4);background:rgba(10,12,14,.75);color:#efe6d2;
  font:800 12px Manrope,system-ui;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.ar-button:hover,.ar-button:focus-visible{border-color:#f0d79a;box-shadow:0 0 0 2px rgba(240,215,154,.45);outline:none}
.ar-actions .cta:focus-visible{box-shadow:0 0 0 3px rgba(255,236,190,.8)}
.ar-hint{text-align:center;margin:0;font:700 11px Manrope,system-ui;letter-spacing:.14em;text-transform:uppercase;color:#8f8775}
body.arena-results-open .player-view,body.arena-results-open #game{visibility:hidden}
@media (max-width:860px){.ar-row{grid-template-columns:56px 64px minmax(0,1fr);gap:10px}.ar-king{width:64px;height:70px}.ar-stats{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-height:560px) and (orientation:landscape){.ar-king{width:58px;height:60px}.ar-row{grid-template-columns:56px 58px minmax(0,1fr) minmax(0,2.2fr);padding:6px 12px}.ar-head h1{font-size:30px}}
@media (prefers-reduced-motion:reduce){#arena-game.play strong,#arena-game.play span,#arena-game.play,.ar-row{animation:none}}

/* Fixes: the portraits fill their frame; the buttons keep their size; GAME! has the screen to itself. */
.ar-king{position:relative}
.ar-king img{position:absolute;inset:4px 0 0;width:100%;height:calc(100% - 4px);object-fit:contain;object-position:50% 100%}
.ar-actions .cta,.rs-start{width:auto;flex:0 0 auto}
body.arena-over .banner,body.arena-over #notices{opacity:0 !important;transition:opacity .2s}

/* ------------------------------------------------------------------ HUD scale */
/* Every player's HUD sizes itself to its own view (the whole window, or one
   split-screen pane), by width and by height: the smaller the view, the smaller
   its panels, so the game stays in sight. CSS zoom lays a panel out again at the
   smaller size (text and art stay sharp, nothing is stretched or dropped) and
   scales its offsets with it; percentage anchors (the centred action bar) hold.
   Nameplates, damage numbers and the cursor follow the 3D scene and keep their size. */
#game,.player-view{container:hud / size}
body:not(.touch-story) :is(#game,.player-view)>:is(#objective-card,#boss-bar,.hud-buttons,#king-frame,#action-bar,#squad-panel,#notices,#feedback,#use-prompt,#ground-hint,#view-label,.banner,.hud-legend){zoom:var(--hud-zoom,1)}
@container hud (max-width:1600px) or (max-height:940px){:is(#game,.player-view)>*{--hud-zoom:.92}}
@container hud (max-width:1300px) or (max-height:800px){:is(#game,.player-view)>*{--hud-zoom:.86;--plate-scale:.94}}
@container hud (max-width:1000px) or (max-height:620px){:is(#game,.player-view)>*{--hud-zoom:.8;--plate-scale:.88}}
@container hud (max-width:760px) or (max-height:480px){:is(#game,.player-view)>*{--hud-zoom:.74;--plate-scale:.82}}
@container hud (max-width:560px) or (max-height:380px){:is(#game,.player-view)>*{--hud-zoom:.68;--plate-scale:.76}}
/* Short views (four players, a short window): one compact bottom row. The King's card
   docks beside the action bar instead of above it, and the army's cards line up in a
   row above the bar's right end, each with its portrait, name, state and health. */
@container hud (max-height:620px) and (min-width:600px){
  body:not(.touch-story) :is(#game,.player-view)>#king-frame{left:10px;bottom:10px;width:300px}
  body:not(.touch-story) :is(#game,.player-view)>#action-bar{left:320px;right:auto;bottom:10px;transform:none}
  body:not(.touch-story) :is(#game,.player-view)>#squad-panel{right:10px;bottom:106px}
  body:not(.touch-story).split-screen :is(#game,.player-view)>#squad-panel{bottom:calc(clamp(40px,calc((100cqw - 96px) / 7.2),60px) * 1.07 + 28px)}
  /* Messages and the use prompt rise above the docked row. */
  body:not(.touch-story) :is(#game,.player-view)>#feedback{left:50%;bottom:190px;transform:translateX(-50%) translateY(8px);text-align:center;max-width:calc(100cqw - 24px)}
  body:not(.touch-story) :is(#game,.player-view)>#feedback.show{transform:translateX(-50%)}
  body:not(.touch-story) :is(#game,.player-view)>#use-prompt{bottom:190px}
  /* The mini-map: a smaller disc in a short window (split screen sizes its own). */
  body:not(.touch-story):not(.split-screen) #objective-card.minimap-card{--mm:136px}
}
/* The army in a row (short views, and wide views up to 800 px tall): one card high instead of a column up the side. */
@container hud ((max-height:620px) and (min-width:600px)) or ((max-height:800px) and (min-width:1000px)){
  body:not(.touch-story) :is(#game,.player-view)>#squad-panel{width:auto;max-width:calc(100cqw - 340px);padding:7px 8px 6px}
  body:not(.touch-story) #squad-panel header{margin:0 2px 5px}
  body:not(.touch-story) #squad-panel #companion-status{display:none}
  body:not(.touch-story) #squad-list{grid-auto-flow:column;grid-auto-columns:minmax(0,148px);gap:5px}
  body:not(.touch-story) .soldier-card{grid-template-columns:30px minmax(0,1fr);gap:6px;padding:4px 6px}
  body:not(.touch-story) .soldier-card img,body:not(.touch-story) .card-glyph{width:30px;height:30px;font-size:18px}
  body:not(.touch-story) .card-body strong{font-size:11.5px}
  body:not(.touch-story) .card-body small{font-size:9.5px}
  body:not(.touch-story) .card-badge{top:3px;right:4px;font-size:7.5px;padding:1px 4px}
  body:not(.touch-story) .promo-pips{bottom:5px;right:5px}
}
/* Phones held upright: the King's vitals keep the top left, the mini-map tucks under the
   Training / Pause buttons at the top right, and the opponent's bar takes the space
   between them (it used to lie across the mini-map); loot cards come under the map. */
@media (orientation:portrait){
  .touch-story #objective-card.minimap-card{top:calc(58px + var(--safe-top));left:auto;right:max(10px,var(--safe-right));gap:4px;--mm:88px}
  .touch-story #objective-card.minimap-card .mm-caption{width:calc(var(--mm) + 16px)}
  .touch-story #objective-card .mm-caption h3{font-size:11px}
  .touch-story #boss-bar{top:calc(104px + var(--safe-top));right:calc(max(10px,var(--safe-right)) + 106px)}
  .touch-story #notices{top:calc(178px + var(--safe-top))}
}
/* Phones on their side: the left column is the vitals and the army (above the stick), so the
   mini-map takes the gap under the top-right buttons, above the action grid; loot cards sit beside it. */
@media (orientation:landscape) and (max-height:600px){
  .touch-story #objective-card.minimap-card{top:calc(56px + var(--safe-top));left:auto;right:max(10px,var(--safe-right));max-width:none;gap:2px;--mm:72px}
  .touch-story #objective-card.minimap-card .mm-caption{width:calc(var(--mm) + 24px)}
  .touch-story #objective-card .mm-caption h3{font-size:10.5px}
  .touch-story #notices{right:calc(max(10px,var(--safe-right)) + 104px)}
}
/* The Inventory on a phone held upright: one column for thumbs. A smaller stage (the
   piece, the switcher under it, the slots in one row, the stats in a strip), then the
   bag: its tabs, a grid of large cells, and the chosen item on a card that stays at
   the bottom of the screen with its Equip / Bind button beside the name, then the
   vitals and potions. A slot shows its items; a second tap on an item wears it.
   Vertical swipes on the stage scroll; sideways ones still turn the piece. */
@media (max-width:760px) and (orientation:portrait){
 .inv{grid-template-rows:max-content max-content;gap:12px;padding-bottom:6px}
 .inv-stage{min-height:max-content;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(130px,22vh) auto auto auto;gap:8px;touch-action:pan-y;cursor:default}
 .inv-head{grid-column:1}
 .inv-role,.inv-drag{display:none}
 .inv-name{font-size:28px}
 .inv-switch{grid-column:1;grid-row:3}
 .inv-switch{justify-self:stretch;justify-content:center}
 .inv-pieces{gap:4px;width:100%;justify-content:space-between}
 .inv-piece{width:auto;flex:1 1 0;min-width:0;max-width:58px;padding:6px 2px 5px}
 .inv-piece>span{width:38px;height:38px}
 .inv-slots,.inv-slots[class]{grid-column:1;grid-row:4;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;align-self:start}
 .inv-slot,.inv-slot[class]{width:auto;min-height:92px;grid-template-columns:1fr;justify-items:center;align-content:start;gap:5px;padding:8px 4px 7px;text-align:center;border-radius:13px}
 .inv-slot-art{width:46px;height:46px;border-radius:11px}
 .inv-slot small{font-size:8.5px;letter-spacing:.12em}
 .inv-slot strong{font-size:11.5px;line-height:1.15}
 .inv-stats,.inv-stats[class]{grid-column:1;grid-row:5;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px}
 .inv-stats div{flex:0 0 auto;min-width:78px;padding:6px 9px}
 .inv-stats dt{font-size:8px;letter-spacing:.1em}
 .inv-stats dd{font-size:16px}
 .inv-panel{display:flex;flex-direction:column;gap:10px;padding:12px;min-height:auto;overflow:visible}
 .inv-panel-head{order:1;scroll-margin-top:8px}
 .inv-grid{order:2;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;overflow:visible}
 .inv-detail{order:3;position:sticky;bottom:0;z-index:3;max-height:40vh;overflow:hidden auto;background-color:#0a1418;box-shadow:0 -16px 30px rgba(3,6,8,.75)}
 .inv-detail.empty{position:static;box-shadow:none}
 .inv-vitals{order:4}
 .invd-text{display:flex;flex-direction:column}
 .invd-kind{order:0}.inv-detail h4{order:1}
 .invd-actions{order:2;margin:2px 0 6px}
 .invd-stats,.invd-preview,.invd-status,.invd-matchup,.invd-rival,.invd-lore,.invd-note{order:3}
 .invd-actions .invd-primary{width:100%;min-height:46px;justify-content:center;font-size:14.5px}
 .invd-actions kbd{display:none}
}
/* Online lobbies: the host's button on the King select, the lobby panel beside the select screens, the title's join form. */
.ks-top-end{justify-self:end;display:flex;align-items:center;gap:10px}
.net-host{justify-self:auto;border-color:rgba(111,211,255,.5);color:#dff4ff}
.net-host::before{content:'';width:8px;height:8px;margin-left:6px;border-radius:50%;background:#6fd3ff;box-shadow:0 0 10px #6fd3ff}
.net-host:hover{border-color:#6fd3ff;background:rgba(14,30,40,.75)}
.net-panel{position:fixed;z-index:30;right:clamp(12px,2vw,28px);top:clamp(84px,13vh,128px);width:min(300px,calc(100vw - 24px));display:grid;gap:9px;padding:14px 16px 12px;border-radius:16px;
  background:linear-gradient(160deg,rgba(14,26,34,.94),rgba(6,12,16,.95));border:1px solid rgba(111,211,255,.42);box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 26px rgba(111,211,255,.12);backdrop-filter:blur(8px)}
.net-panel[hidden]{display:none}
.net-panel .eyebrow{margin:0;color:#8fdcff;letter-spacing:.2em}
.net-code{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.net-code span{font:800 9.5px Manrope,system-ui;letter-spacing:.2em;color:var(--muted)}
.net-code strong{font:700 30px/1 'Manrope',system-ui;letter-spacing:.16em;color:#fff;user-select:all}
.net-panel[data-role=""] .net-code,.net-panel[data-role=""] .net-players{display:none}
.net-players{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.net-players li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;padding:5px 8px;border-radius:9px;background:rgba(255,255,255,.04);border-left:3px solid var(--tone)}
.net-players b{font:800 11px Manrope,system-ui;color:var(--tone)}
.net-players span{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.net-players em{font:800 9px Manrope,system-ui;font-style:normal;letter-spacing:.12em;color:var(--muted)}
.net-status{margin:0;font-size:12px;line-height:1.45;color:#c9dbe2;overflow-wrap:anywhere}
.net-actions{display:grid;grid-template-columns:1fr auto;gap:6px}
.net-actions [hidden]{display:none}
.net-actions button{min-height:40px;justify-content:center;padding:8px 12px;font-size:13px}
.net-leave{justify-self:start;padding:4px 2px;border:0;background:none;box-shadow:none;color:var(--muted);font-size:11.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.online-card{width:min(460px,calc(100vw - 32px))}
.online-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:14px 0 8px}
#online-code{min-width:0;padding:12px 14px;border-radius:12px;border:1px solid rgba(214,183,123,.45);background:rgba(4,8,10,.6);color:#fff;
  font:700 24px/1 Manrope,system-ui;letter-spacing:.24em;text-transform:uppercase;text-align:center}
#online-code:focus{outline:none;border-color:var(--gold-hi);box-shadow:0 0 0 3px rgba(244,217,160,.25)}
.online-form .cta{min-width:96px;justify-content:center}
.online-status{min-height:20px;margin:0 0 6px;font-size:13px;line-height:1.45;color:#ffd9a8}
.online-host-note b{color:#8fdcff}
@media (max-width:760px){
  .net-panel{top:auto;bottom:calc(10px + var(--safe-bottom));right:10px;left:10px;width:auto;padding:10px 12px;gap:6px}
  .net-code strong{font-size:22px}
  .net-players li{padding:3px 8px}
  .net-host span{display:inline}
}
/* Online in a game: the connection badge (top centre), the veil while a guest reconnects, the relay form. */
.net-badge{position:fixed;z-index:40;left:50%;top:calc(6px + var(--safe-top));transform:translateX(-50%);margin:0;padding:3px 12px 3px 22px;border-radius:999px;pointer-events:none;
  font:800 9.5px/1.6 Manrope,system-ui,sans-serif;letter-spacing:.16em;color:#dff4ff;background:rgba(6,12,16,.72);border:1px solid rgba(111,211,255,.35)}
.net-badge::before{content:'';position:absolute;left:9px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#7be3a1;box-shadow:0 0 8px #7be3a1}
.net-badge[data-tone=warn]::before{background:#ffcf6a;box-shadow:0 0 8px #ffcf6a}
.net-badge[data-tone=bad]::before{background:#ff6a5a;box-shadow:0 0 8px #ff6a5a}
.net-badge[hidden]{display:none}
body.split-screen .net-badge{top:calc(36px + var(--safe-top))}
.net-veil{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(3,6,8,.66);backdrop-filter:blur(3px)}
.net-veil[hidden]{display:none}
.net-veil-card{display:grid;justify-items:center;gap:8px;padding:22px 26px;border-radius:18px;text-align:center;max-width:min(380px,calc(100vw - 32px));
  background:linear-gradient(160deg,rgba(14,26,34,.96),rgba(6,12,16,.97));border:1px solid rgba(111,211,255,.4);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.net-veil-card .eyebrow{margin:0;color:#8fdcff;letter-spacing:.2em}
.net-veil-card p:not(.eyebrow){margin:0 0 6px;font-size:14px;color:#dbe8ec}
.net-veil-spinner{width:28px;height:28px;border-radius:50%;border:3px solid rgba(111,211,255,.25);border-top-color:#8fdcff;animation:gm-spin 0.9s linear infinite}
.relay{margin:4px 0 12px;font-size:13px}
.relay summary{cursor:pointer;font-weight:800;color:#cfe3ea}
.relay summary small{font-weight:600;color:var(--muted);margin-left:6px}
.relay-form{display:grid;gap:8px;margin-top:8px}
.relay-form label{display:grid;gap:3px;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.relay-form input{padding:9px 11px;border-radius:9px;border:1px solid rgba(214,183,123,.35);background:rgba(4,8,10,.6);color:#fff;font:600 14px Manrope,system-ui;letter-spacing:0;text-transform:none}
.relay-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.relay-actions button{padding:7px 14px;min-height:36px}
#relay-status{font-size:12px;color:#ffd9a8}
/* The summon wheel's choice card (a tap on a piece the army has): raise another or dismiss one, over the ring's centre. */
.wheel-choice{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);width:min(212px,60%);display:grid;justify-items:center;gap:7px;padding:12px 12px 8px;border-radius:18px;text-align:center;
  background:radial-gradient(circle at 50% 0%,rgba(214,183,123,.2),rgba(8,15,19,.98) 70%);border:1px solid var(--gold);box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 30px rgba(214,183,123,.25);animation:choice-in .18s cubic-bezier(.2,.8,.2,1)}
.wheel-choice[hidden]{display:none}
.wheel-choice img{width:46px;height:46px;margin-top:-34px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);background:#0b171b;box-shadow:0 6px 16px rgba(0,0,0,.6)}
.wheel-choice .eyebrow{margin:0;font-size:9px;letter-spacing:.16em}
.wheel-choice strong{font:600 22px/1 'Cormorant Garamond',Georgia,serif;color:#fff3d6}
.wheel-choice button{width:100%;min-height:44px;justify-content:center;font-size:13px;padding:8px 10px}
.wheel-choice .wheel-choice-back{min-height:36px;border:0;background:none;box-shadow:none;color:var(--muted);font-size:12px;font-weight:700}
#summon-wheel.choosing .wheel-center{visibility:hidden}
/* While the card asks, the other pieces step back and the one it is about stays lit. */
#summon-wheel.choosing .wheel-option:not(.choosing-this){opacity:.22;filter:grayscale(.6)}
#summon-wheel.choosing .wheel-option.choosing-this{border-color:var(--gold-hi);box-shadow:0 0 0 2px rgba(244,217,160,.6),0 0 24px rgba(244,217,160,.35)}
/* Loot cards wait while the wheel is open (on a phone they lay over its title). */
.touch-story #game:has(#summon-wheel:not([hidden])) #notices{visibility:hidden}
@keyframes choice-in{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%)}}
/* The key legend repeats the top buttons' keys: below 1400 px it gives the opponent's bar the room. */
@container hud (max-width:1400px){
  :is(#game,.player-view)>.hud-legend{display:none}
}