@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}
.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}
.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}
 .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){grid-column:2}
 .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}
.menu-item:focus,.menu-item:hover{transform:translateX(8px);background:linear-gradient(90deg,rgba(214,183,123,.2),rgba(214,183,123,.04) 70%,transparent)}
.menu-item:focus::before,.menu-item:hover::before{transform:scaleY(1)}
.menu-item:focus .mi-label,.menu-item:hover .mi-label{color:#fff4d8;text-shadow:0 0 22px rgba(255,200,120,.45),0 2px 6px #000}
.menu-item:focus .mi-sub,.menu-item:hover .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:'◆';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:'→ ';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:'“' '”'}
.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-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}
}