:root {
  --teal: #2de2c8; --ember: #ff7a2f; --ember-hot: #ffb15c; --bg: #070a10; --panel: rgba(10, 14, 20, 0.92); --line: rgba(45, 226, 200, 0.25);
  --sal: max(env(safe-area-inset-left, 0px), var(--nsal, 0px));
  --sar: max(env(safe-area-inset-right, 0px), var(--nsar, 0px));
  --sat: max(env(safe-area-inset-top, 0px), var(--nsat, 0px));
  --sab: max(env(safe-area-inset-bottom, 0px), var(--nsab, 0px));
  --serif: Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: #dfe8ec; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; overflow: hidden;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; overscroll-behavior: none; }
canvas#c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: #fff; mix-blend-mode: screen; }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%); }
#vignette.hurt { background: radial-gradient(ellipse at center, transparent 45%, rgba(170,20,10,0.55) 100%); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud .tl { position: absolute; left: calc(14px + var(--sal)); top: calc(10px + var(--sat)); }
#hud .tr { position: absolute; right: calc(12px + var(--sar)); top: calc(8px + var(--sat)); display: flex; align-items: center; gap: 10px; }
#hud .tc { position: absolute; left: 50%; top: calc(8px + var(--sat)); transform: translateX(-50%); width: min(46vw, 520px); text-align: center; }
/* 1.1 HP bar: smooth fill, delayed damage trail, shield overlay, low-HP pulse, heal flash */
#hp { position: relative; width: clamp(150px, 24vw, 240px); height: 16px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,140,110,0.55); border-radius: 4px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
#hp-lag, #hp-fill, #hp-shield { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
#hp-lag { background: linear-gradient(90deg, #fff6, #ffd6c8); }
#hp-fill { background: linear-gradient(180deg, #ff7a5c, #d8341f 60%, #a3200f); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); }
#hp-shield { background: repeating-linear-gradient(135deg, rgba(45,226,200,0.55) 0 6px, rgba(45,226,200,0.3) 6px 12px); width: 0; }
#hp-text { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 16px; font-weight: 800; letter-spacing: 0.04em; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; font-variant-numeric: tabular-nums; }
#hp.low { animation: hpLow 0.9s ease-in-out infinite; border-color: #ff5a3c; }
@keyframes hpLow { 50% { box-shadow: 0 0 14px rgba(255,60,30,0.9); } }
#hp.heal { animation: hpHeal 0.6s ease-out; }
@keyframes hpHeal { 0% { box-shadow: 0 0 0 rgba(90,255,170,0); } 30% { box-shadow: 0 0 18px rgba(90,255,170,0.95); border-color: #7dffb8; } 100% { box-shadow: 0 0 0 rgba(90,255,170,0); } }
body.lowhp #vignette { animation: lowVig 0.9s ease-in-out infinite; }
@keyframes lowVig { 0%, 100% { background: radial-gradient(ellipse at center, transparent 50%, rgba(120,10,5,0.35) 100%); } 50% { background: radial-gradient(ellipse at center, transparent 42%, rgba(190,20,10,0.6) 100%); } }
#stam { width: clamp(110px, 17vw, 170px); height: 6px; margin-top: 6px; background: rgba(255,255,255,0.12); border-radius: 3px; overflow: hidden; }
#stam-fill { height: 100%; width: 100%; background: var(--teal); transition: background 0.2s; }
#stam.low #stam-fill { background: #ff9a3c; }
#build-icons { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 3px; max-width: 180px; font-size: 13px; }
#build-icons span { background: rgba(0,0,0,0.45); border: 1px solid var(--line); border-radius: 5px; padding: 0 3px; line-height: 18px; }
#boss-name { font-family: var(--serif); letter-spacing: 0.18em; text-transform: uppercase; font-size: 13px; color: #f1d9c7; text-shadow: 0 1px 4px #000; }
#boss-bar { position: relative; height: 10px; margin-top: 4px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,140,80,0.5); border-radius: 2px; overflow: hidden; }
#boss-fill, #boss-lag { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
#boss-lag { background: #fff2; transition: width 0.6s ease-out 0.25s; }
#boss-fill { background: linear-gradient(90deg, #b8321a, var(--ember) 70%, var(--ember-hot)); }
#boss-bar .marker { position: absolute; top: -1px; bottom: -1px; width: 2px; background: #fff; box-shadow: 0 0 6px #fff; }
#boss-bar .marker.done { background: #555; box-shadow: none; }
#boss-bar.pulse { animation: pulse 0.6s ease-out 3; }
@keyframes pulse { 50% { box-shadow: 0 0 18px var(--ember); border-color: #fff; } }
#boss-phase { font-size: 10px; letter-spacing: 0.3em; color: #c9a28b; margin-top: 3px; text-transform: uppercase; }
#timer { font-variant-numeric: tabular-nums; font-size: 14px; color: #cfe; text-shadow: 0 1px 3px #000; }
#fps { font-size: 11px; color: #8aa; font-variant-numeric: tabular-nums; }
.icon-btn { pointer-events: auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(0,0,0,0.45); font-size: 14px; }
#adapt-hint { position: absolute; left: 50%; top: calc(64px + var(--sat)); transform: translateX(-50%); max-width: 70vw; text-align: center; font-size: 13px; color: var(--teal);
  font-style: italic; opacity: 0; transition: opacity 0.5s; text-shadow: 0 1px 4px #000; }
#adapt-hint.on { opacity: 1; }
#tut-text { position: absolute; left: 50%; top: calc(62px + var(--sat)); transform: translateX(-50%); max-width: 62vw; text-align: center; font-size: 15px; background: rgba(0,0,0,0.55);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; display: none; }
#tut-text.on { display: block; }
#tut-text b { color: var(--teal); }
#tut-text button { pointer-events: auto; margin-left: 10px; background: none; border: 1px solid #fff4; border-radius: 6px; padding: 2px 8px; font-size: 12px; color: #9ab; }

/* ---------- touch controls ---------- */
#controls { position: absolute; inset: 0; }
#stick-zone { position: absolute; left: 0; top: 70px; bottom: 0; width: 50%; pointer-events: auto; touch-action: none; }
#stick { position: fixed; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
#stick.on { opacity: 1; }
#stick::before { content: ''; position: absolute; width: 112px; height: 112px; left: -56px; top: -56px; border-radius: 50%; border: 2px solid rgba(45,226,200,0.35); background: rgba(0,0,0,0.2); }
#knob { position: absolute; left: 0; top: 0; width: 50px; height: 50px; border-radius: 50%; background: rgba(45,226,200,0.55); box-shadow: 0 0 16px rgba(45,226,200,0.6); transform: translate(-50%,-50%); }
.touch #stick-hint { display: block; }
#buttons { position: absolute; right: calc(18px + var(--sar)); bottom: calc(16px + var(--sab)); width: 250px; height: 270px; pointer-events: none; }
.btn-act { position: absolute; pointer-events: auto; touch-action: none; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); background: rgba(10,14,20,0.55);
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: #e8f3f3; display: flex; align-items: center; justify-content: center; transition: transform 0.05s, background 0.05s; }
.btn-act.down { transform: scale(0.92); background: rgba(45,226,200,0.35); }
#btn-light { width: 92px; height: 92px; right: 0; bottom: 0; border-color: rgba(45,226,200,0.7); }
#btn-heavy { width: 68px; height: 68px; right: 104px; bottom: 6px; border-color: rgba(255,122,47,0.7); }
#btn-heavy.down { background: rgba(255,122,47,0.4); }
#btn-roll { width: 70px; height: 70px; right: 24px; bottom: 104px; border-color: rgba(255,255,255,0.55); }
#btn-lock { width: 40px; height: 40px; right: 196px; bottom: 150px; font-size: 16px; }
/* special skill: radial cooldown sweep */
#btn-skill { width: 62px; height: 62px; right: 112px; bottom: 90px; border-color: rgba(167,123,255,0.75); font-size: 24px; overflow: hidden; }
#btn-skill .cd, .ab .cd { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(0,0,0,0.72) var(--cd, 0deg), transparent 0); pointer-events: none; }
#btn-skill.cooling .ic { opacity: 0.45; }
/* ultimate: meter ring fills, glows when ready */
#btn-ult { width: 74px; height: 74px; right: 8px; bottom: 186px; border: none; background: rgba(10,14,20,0.6); font-size: 14px; }
#btn-ult .ring, .ab.ult .ring { position: absolute; inset: -3px; border-radius: 50%; padding: 4px; background: conic-gradient(#ffd25a var(--m, 0deg), rgba(255,255,255,0.12) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); pointer-events: none; }
#btn-ult .lbl { opacity: 0.5; letter-spacing: 0.12em; }
#btn-ult.ready { background: radial-gradient(circle, rgba(255,210,90,0.65), rgba(255,122,47,0.35) 70%); animation: ultGlow 0.9s ease-in-out infinite; }
#btn-ult.ready .lbl { opacity: 1; color: #fff; text-shadow: 0 0 8px #ffd25a; font-size: 16px; }
#btn-ult.cooling .lbl::after { content: ' …'; }
@keyframes ultGlow { 50% { box-shadow: 0 0 26px 6px rgba(255,190,80,0.85); transform: scale(1.06); } }
/* desktop ability indicators (keyboard) */
#ab-desk { position: absolute; left: 50%; bottom: calc(14px + var(--sab)); transform: translateX(-50%); display: none; gap: 14px; }
body.mouse #ab-desk { display: flex; }
.ab { position: relative; width: 54px; height: 54px; border-radius: 50%; background: rgba(10,14,20,0.6); border: 2px solid rgba(167,123,255,0.7); display: flex; align-items: center; justify-content: center; font-size: 22px; overflow: visible; }
.ab .cd { overflow: hidden; }
.ab .k { position: absolute; bottom: -6px; right: -6px; font-size: 10px; font-weight: 800; background: #111a; border: 1px solid #fff4; border-radius: 4px; padding: 0 4px; }
.ab.ult { border: none; width: 62px; height: 62px; font-size: 13px; font-weight: 800; color: #fff8; }
.ab.ult.ready { background: radial-gradient(circle, rgba(255,210,90,0.65), rgba(255,122,47,0.35) 70%); color: #fff; animation: ultGlow 0.9s ease-in-out infinite; }
.cooldown { box-shadow: inset 0 0 0 40px rgba(0,0,0,0.45); }
/* left-hand layout: mirror */
body.lefty #stick-zone { left: auto; right: 0; }
body.lefty #buttons { right: auto; left: calc(18px + var(--sal)); transform: scaleX(-1); }
body.lefty #buttons .btn-act { transform: scaleX(-1); }
body.lefty #buttons .btn-act.down { transform: scaleX(-1) scale(0.92); }
body.mouse #controls #buttons, body.mouse #stick { display: none; }

/* ---------- banners / damage numbers ---------- */
#banner { position: fixed; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
#banner.on { opacity: 1; }
#banner .b1 { font-size: 12px; letter-spacing: 0.5em; color: var(--ember-hot); text-transform: uppercase; }
#banner .b2 { font-family: var(--serif); font-size: clamp(26px, min(7vw, 11vh), 64px); letter-spacing: 0.14em; text-transform: uppercase; color: #f5ece4; text-shadow: 0 0 24px rgba(255,122,47,0.55), 0 2px 6px #000; margin: 6px 0; }
#banner .b3 { font-size: 13px; letter-spacing: 0.3em; color: #9fb7bf; text-transform: uppercase; font-style: italic; }
#banner::before, #banner::after { content: ''; display: block; height: 1px; margin: 8px auto; width: 0; background: linear-gradient(90deg, transparent, var(--ember), transparent); transition: width 0.8s; }
#banner.on::before, #banner.on::after { width: min(60vw, 560px); }
#dmg-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.dmg { position: absolute; left: 0; top: 0; font-weight: 800; font-size: 16px; color: #fff; text-shadow: 0 2px 3px #000, 0 0 8px rgba(255,122,47,0.7); will-change: transform, opacity; white-space: nowrap; }
.dmg.big { font-size: 22px; color: var(--ember-hot); }
.dmg.teal { color: var(--teal); text-shadow: 0 2px 3px #000, 0 0 8px rgba(45,226,200,0.8); }
.dmg.grey { color: #9aa; font-size: 12px; }
.dmg.ult { font-size: 26px; color: #ffe08a; text-shadow: 0 2px 3px #000, 0 0 14px rgba(255,200,80,0.95); }
.dmg.heal { color: #7dffb8; text-shadow: 0 2px 3px #000, 0 0 8px rgba(90,255,170,0.8); }
.dmg.hurt { color: #ff6b57; font-size: 15px; }
.dmg.gold { color: #ffd25a; font-size: 20px; text-shadow: 0 2px 3px #000, 0 0 10px rgba(255,210,90,0.9); }

/* ---------- 1.1: loading, cinematic, hero select, what's new ---------- */
#loading { position: fixed; inset: 0; z-index: 50; background: radial-gradient(ellipse at 50% 60%, #1a0d08, #050608 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: opacity 0.5s; }
#loading.done { opacity: 0; pointer-events: none; }
.ld-title { font-family: var(--serif); font-size: clamp(34px, 8vw, 64px); letter-spacing: 0.1em; color: #f2ebe4; text-shadow: 0 0 30px rgba(255,122,47,0.5); }
.ld-title span { color: var(--ember); margin-left: 0.3em; }
.ld-bar { width: min(320px, 60vw); height: 4px; background: #fff1; border-radius: 2px; overflow: hidden; }
#load-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--ember), var(--ember-hot)); transition: width 0.15s; }
.ld-sub { font-size: 12px; letter-spacing: 0.3em; color: #9fb7bf; text-transform: uppercase; }
#cine { position: fixed; inset: 0; pointer-events: none; }
#cine .bar { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height 0.25s ease-out; }
#cine .bar.top { top: 0; } #cine .bar.bot { bottom: 0; }
#cine.on .bar { height: 7vh; }
#cine .ult-name { position: absolute; left: 0; right: 0; bottom: 12vh; text-align: center; font-family: var(--serif); font-size: clamp(22px, 5vw, 44px); letter-spacing: 0.25em; text-transform: uppercase;
  color: #ffd25a; text-shadow: 0 0 24px currentColor, 0 2px 6px #000; opacity: 0; transform: scale(1.3); transition: opacity 0.2s, transform 0.4s; }
#cine.on .ult-name { opacity: 1; transform: none; }
.ver { position: absolute; left: calc(6vw + var(--sal)); bottom: calc(10px + var(--sab)); background: none; border: 1px solid #fff2; border-radius: 20px; padding: 4px 12px; font-size: 12px; color: #9fb7bf; }
.title-wrap { position: static; }
#s-heroes { background: linear-gradient(90deg, rgba(7,10,16,0.8) 0%, rgba(7,10,16,0) 24%, rgba(7,10,16,0) 44%, rgba(7,10,16,0.88) 62%); flex-direction: row; justify-content: space-between; align-items: stretch; gap: 12px; }
.hero-list { display: flex; flex-direction: column; gap: 6px; justify-content: center; width: min(170px, 20vw); }
.hero-card { text-align: left; border-radius: 12px; border: 1px solid rgba(255,255,255,0.15); background: rgba(10,14,20,0.75); padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; border-left: 4px solid var(--hc); }
.hero-card.on { border-color: var(--hc); box-shadow: 0 0 18px -4px var(--hc); background: rgba(20,26,34,0.9); }
.hero-card .hn { font-weight: 800; font-size: 14px; }
.hero-card .hr { font-size: 11px; color: #9fb7bf; }
.hero-card.locked .hn { opacity: 0.7; }
.hero-panel { width: min(400px, 42vw); align-self: center; max-height: 100%; }
.hero-panel h2 { margin-bottom: 2px !important; }
.stat-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin: 6px 0 8px; }
.sb { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #9fb7bf; gap: 6px; }
.sb i { display: flex; gap: 2px; } .sb b, .sb em { width: 14px; height: 6px; border-radius: 2px; background: var(--teal); } .sb em { background: #fff2; }
.skill { font-size: 12px; color: #c7d3d8; margin: 5px 0; line-height: 1.35; }
.skill b { color: #fff; } .skill.ult b { color: #ffd25a; }
.skill .kb { display: inline-block; width: 20px; text-align: center; }
ul.news { margin: 6px 0; padding-left: 18px; font-size: 14px; line-height: 1.45; color: #c7d3d8; } ul.news li { margin: 5px 0; } ul.news b { color: #fff; }
@media (max-height: 420px) { .hero-panel { padding: 10px 14px; } .skill { font-size: 11px; margin: 3px 0; } .hero-card { padding: 6px 10px; } .stat-bars { margin: 4px 0; } .hero-panel .row { margin-top: 6px; } }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; padding: calc(12px + var(--sat)) calc(16px + var(--sar)) calc(12px + var(--sab)) calc(16px + var(--sal));
  background: radial-gradient(ellipse at center, rgba(7,10,16,0.55), rgba(7,10,16,0.92)); overflow: auto; touch-action: pan-y; }
.screen.on { display: flex; }
#s-title { background: linear-gradient(90deg, rgba(7,10,16,0.92) 0%, rgba(7,10,16,0.55) 45%, rgba(7,10,16,0) 75%); align-items: flex-start; padding-left: calc(6vw + var(--sal)); }
.title-wrap h1 { font-family: var(--serif); font-size: clamp(42px, 9vw, 92px); margin: 0; letter-spacing: 0.08em; line-height: 0.95; color: #f2ebe4; text-shadow: 0 0 30px rgba(255,122,47,0.45); }
.title-wrap h1 span { display: block; color: var(--ember); letter-spacing: 0.2em; font-size: 0.62em; }
.tag { color: #9fb7bf; margin: 10px 0 14px; font-size: 14px; max-width: 360px; }
.menu { display: flex; flex-direction: column; gap: 7px; min-width: 230px; }
.menu button, .row button, .panel button.opt { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 10px 16px; text-align: left; font-size: 15px; }
.menu button small { color: #8fa; font-size: 11px; margin-left: 6px; }
button.primary { background: linear-gradient(90deg, rgba(255,122,47,0.35), rgba(255,122,47,0.12)) !important; border-color: rgba(255,122,47,0.7) !important; color: #fff; font-weight: 700; }
button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; min-width: 260px; max-width: 92vw; max-height: 100%; overflow: auto; }
.panel.wide { width: min(720px, 92vw); }
.panel h2, .screen > h2 { font-family: var(--serif); letter-spacing: 0.1em; margin: 0 0 8px; font-weight: 400; }
.panel h2 small { font-family: system-ui, sans-serif; font-size: 13px; color: var(--ember-hot); letter-spacing: 0; margin-left: 8px; }
.sub { color: #9fb7bf; margin: 0 0 10px; font-size: 13px; }
.dim { opacity: 0.7; }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
#cards { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.card { width: min(200px, 28vw); min-height: 190px; border-radius: 14px; border: 2px solid var(--rc); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.4)), #0c1118;
  padding: 12px; text-align: left; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 0 24px -8px var(--rc); transform: translateY(12px); opacity: 0; animation: cardIn 0.35s forwards; }
.card:nth-child(2) { animation-delay: 0.08s; } .card:nth-child(3) { animation-delay: 0.16s; } .card:nth-child(4) { animation-delay: 0.24s; }
@keyframes cardIn { to { transform: none; opacity: 1; } }
.card .ic { font-size: 28px; }
.card .nm { font-weight: 800; font-size: 16px; }
.card .rr { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--rc); }
.card .ds { font-size: 13px; color: #c7d3d8; line-height: 1.35; }
.card .st { margin-top: auto; font-size: 11px; color: #8aa; }
.card.risk { background: linear-gradient(180deg, rgba(255,60,40,0.12), rgba(0,0,0,0.4)), #120c0c; }
.card[disabled] { opacity: 0.35; }
.card:active { transform: scale(0.97); }
#recap, .recap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 8px 0; }
#recap .k, .recap-grid .k { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #8aa; }
#recap .v, .recap-grid .v { font-size: 18px; font-weight: 700; }
#recap .full { grid-column: 1 / -1; }
#card-preview { display: block; width: min(420px, 80vw); margin-top: 10px; border-radius: 8px; border: 1px solid var(--line); }
#card-preview:not([src]) { display: none; }
.set-grid { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; }
.seg { display: inline-flex; border: 1px solid rgba(255,255,255,0.18); border-radius: 9px; overflow: hidden; }
.seg button { background: none; border: none; padding: 7px 12px; font-size: 13px; }
.seg button.on { background: rgba(45,226,200,0.25); color: #fff; }
.set-grid label { font-size: 14px; }
.set-grid label small { display: block; color: #8aa; font-size: 11px; }
.shop-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.shop-item .t { flex: 1; } .shop-item .t small { display: block; color: #8aa; }
.shop-item button { min-width: 96px; }
table.board { width: 100%; border-collapse: collapse; font-size: 14px; }
table.board td, table.board th { padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,0.07); text-align: left; }
table.board th { font-size: 10px; letter-spacing: 0.2em; color: #8aa; text-transform: uppercase; font-weight: 400; }
#toast { position: fixed; left: 50%; bottom: calc(18px + var(--sab)); transform: translateX(-50%); background: rgba(0,0,0,0.8); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px;
  font-size: 13px; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
#toast.on { opacity: 1; }
#rotate { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; padding: 30px; background: var(--bg); font-size: 18px; color: var(--teal); z-index: 50; }
@media (orientation: portrait) and (hover: none) { body.ingame #rotate { display: flex; } }
#rotate b { font-size: 22px; } #rotate small { color: #9fb7bf; font-size: 13px; } #rotate .rot-i { font-size: 54px; margin-bottom: 10px; animation: rot16 1.6s ease-in-out infinite; }
@keyframes rot16 { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (max-height: 520px) {
  .title-wrap h1 { font-size: clamp(34px, 10vh, 64px); }
  .title-wrap h1 span { display: inline; margin-left: 0.3em; }
  .tag { font-size: 12px; margin: 4px 0 10px; }
  .menu { display: grid; grid-template-columns: 1fr 1fr; min-width: 0; width: min(440px, 52vw); }
  .menu button.primary { grid-column: 1 / -1; }
}
@media (max-height: 420px) {
  .card { min-height: 150px; padding: 10px; } .card .ic { font-size: 22px; } .card .ds { font-size: 12px; }
  .menu button { padding: 7px 14px; font-size: 14px; } .tag { margin: 6px 0 8px; } .panel { padding: 12px 16px; }
}

.recap-grid { margin-bottom: 10px; }

.end-panel { width: min(980px, 94vw) !important; display: flex; gap: 18px; align-items: center; }
.end-left { flex: 1 1 55%; min-width: 0; }
.end-panel #card-preview { flex: 0 1 42%; width: 42%; max-width: 420px; margin: 0; }
.end-panel #recap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .end-panel { flex-direction: column; } .end-panel #card-preview { width: 90%; } }

@media (min-width: 760px) { .set-grid { grid-template-columns: 1fr auto 1fr auto; } }
#s-settings .panel.wide { width: min(900px, 94vw); }

#arena-load{position:fixed;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:rgba(5,7,12,.82);color:#cfe;font:600 15px system-ui;z-index:60}#arena-load.on{display:flex}.al-spin{width:34px;height:34px;border-radius:50%;border:3px solid #2de2c8;border-top-color:transparent;animation:alspin .8s linear infinite}@keyframes alspin{to{transform:rotate(360deg)}}

/* ================= 1.2 HUD buttons: hand-made SVG icons, radial cooldown, ready glow ================= */
body { --ac: #2de2c8; }
body[data-hero="guardian"] { --ac: #ffd25a; } body[data-hero="ranger"] { --ac: #9be36a; } body[data-hero="arcanist"] { --ac: #b48aff; }
.svgi { width: 100%; height: 100%; display: block; overflow: visible; }
.btn-act.hb, .ab { background: radial-gradient(circle at 50% 38%, rgba(30,38,52,0.78), rgba(6,9,14,0.82) 72%); border: 2px solid rgba(255,255,255,0.22);
  box-shadow: 0 2px 10px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12); transition: transform 0.07s ease-out, filter 0.07s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; }
.btn-act.hb .ic, .ab .ic { position: absolute; left: 50%; top: 50%; width: 56%; height: 56%; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.6)); transition: opacity 0.15s; }
.btn-act.hb.down, .ab.down { transform: scale(0.88); filter: brightness(1.45); }
#buttons .btn-act.hb.down { transform: scale(0.88); }
body.lefty #buttons .btn-act.hb.down { transform: scaleX(-1) scale(0.88); }
#btn-light { color: #eaf6f6; border-color: color-mix(in srgb, var(--ac) 70%, transparent); }
#btn-light .ic { width: 60%; height: 60%; }
#btn-heavy { color: #ffb04a; border-color: rgba(255,150,60,0.7); }
#btn-heavy .chg { position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(#ffb04a var(--hc, 0deg), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); pointer-events: none; }
#btn-heavy.down { background: radial-gradient(circle, rgba(255,140,50,0.45), rgba(6,9,14,0.82) 72%); }
#btn-roll { color: #8ff4e6; }
#btn-roll .pips { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; pointer-events: none; }
#btn-roll .pips i { width: 6px; height: 6px; border-radius: 50%; background: #8ff4e6; box-shadow: 0 0 4px #8ff4e6; }
#btn-roll .pips i.off { background: rgba(255,255,255,0.18); box-shadow: none; }
#btn-roll.cooldown .ic { opacity: 0.4; }
#btn-lock { color: #cfe; } #btn-lock .ic { width: 62%; height: 62%; }
#btn-pause .ic { display: block; width: 18px; height: 18px; color: #e8f3f3; margin: auto; }
/* skill: progress ring + radial sweep + seconds + ready pulse + locked */
.sk, .ul { overflow: visible !important; }
.rg { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; }
.rg circle { fill: none; stroke-width: 5.5; }
.rg .trk { stroke: rgba(255,255,255,0.12); }
.rg .prg { stroke: var(--ac); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: var(--off, 0); transition: stroke-dashoffset 0.1s linear; filter: drop-shadow(0 0 3px var(--ac)); }
.sk { color: var(--ac); border-color: color-mix(in srgb, var(--ac) 55%, transparent) !important; }
.sk .sw { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(3,5,9,0.74) var(--cd, 0deg), transparent 0); pointer-events: none; }
.sk .cdn, .ab .cdn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 22px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 0 4px #000, 0 1px 2px #000; pointer-events: none; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sk.cooling .ic { opacity: 0.38; }
.sk:not(.cooling) .cdn { display: none; }
.sk.ready { box-shadow: 0 0 0 0 var(--ac), 0 2px 10px rgba(0,0,0,0.45); animation: skReady 1.6s ease-in-out infinite; }
@keyframes skReady { 0%,100% { box-shadow: 0 0 6px 0 color-mix(in srgb, var(--ac) 55%, transparent), 0 2px 10px rgba(0,0,0,.45); } 50% { box-shadow: 0 0 18px 3px color-mix(in srgb, var(--ac) 75%, transparent), 0 2px 10px rgba(0,0,0,.45); } }
.sk.flash::after, .ul.flash::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid var(--ac); animation: readyBurst 0.55s ease-out forwards; pointer-events: none; }
@keyframes readyBurst { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.55); opacity: 0; } }
.sk .lk { position: absolute; right: -3px; top: -3px; width: 20px; height: 20px; border-radius: 50%; background: #0b0f16; border: 1.5px solid rgba(255,255,255,0.35); color: #c8ccd4; display: none; padding: 3px; box-sizing: border-box; }
.sk.locked { filter: grayscale(0.9) brightness(0.65); } .sk.locked .lk { display: block; } .sk.locked { animation: none; }
/* ultimate: charging ring + percent, then a spinning ready ring */
.ul { --ac: #ffd25a; color: #ffd25a; }
body[data-hero="blade"] .ul { color: #7ff6e8; } body[data-hero="ranger"] .ul { color: #c4f58e; } body[data-hero="arcanist"] .ul { color: #ff9a4a; }
.ul .ic { opacity: 0.55; filter: grayscale(0.4) drop-shadow(0 1px 1.5px rgba(0,0,0,0.6)) !important; }
.ul .pct { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); font: 800 10.5px/1 system-ui, sans-serif; color: #ffe9a8; text-shadow: 0 0 3px #000; pointer-events: none; font-variant-numeric: tabular-nums; }
.ul .tag { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); font: 800 9.5px/1 system-ui, sans-serif; letter-spacing: 0.16em; color: rgba(255,233,168,0.7); text-shadow: 0 0 3px #000; pointer-events: none; }
.ul .rg .prg { stroke: #ffd25a; filter: drop-shadow(0 0 3px #ffb04a); }
.ul.ready { background: radial-gradient(circle, rgba(255,210,90,0.55), rgba(255,122,47,0.28) 62%, rgba(6,9,14,0.82) 76%) !important; animation: ultGlow 0.9s ease-in-out infinite; }
.ul.ready .ic { opacity: 1; filter: drop-shadow(0 0 6px #fff6) drop-shadow(0 1px 1.5px rgba(0,0,0,0.6)) !important; }
.ul.ready .pct { display: none; } .ul.ready .tag { color: #fff; text-shadow: 0 0 6px #ffd25a; }
.ul.ready .rg { animation: ultSpin 2.4s linear infinite; } .ul.ready .rg .prg { stroke-dasharray: 9 3.5; stroke-dashoffset: 0 !important; }
@keyframes ultSpin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.ul.cooling .pct::after { content: ' …'; }
/* desktop ability bar */
.ab { position: relative; }
.ab .ic { width: 58%; height: 58%; }
.ab .k { z-index: 2; }
.ab.ul { width: 62px; height: 62px; }
/* adaptation pop: icon + taunt + what it learned */
#adapt-pop { position: absolute; top: calc(70px + var(--sat, 0px)); left: 50%; transform: translate(-50%, -8px); display: flex; align-items: center; gap: 10px; max-width: min(560px, 78vw);
  padding: 7px 14px 7px 8px; border-radius: 14px; background: linear-gradient(90deg, rgba(60,10,10,0.82), rgba(14,10,20,0.82)); border: 1px solid rgba(255,120,90,0.55); color: #ffe2d6;
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 6; box-shadow: 0 4px 18px rgba(0,0,0,0.5); }
#adapt-pop.on { opacity: 1; transform: translate(-50%, 0); }
#adapt-pop .ai { flex: 0 0 34px; height: 34px; color: #ff8a6a; padding: 5px; border-radius: 50%; background: rgba(255,90,60,0.18); box-sizing: border-box; animation: adaptPulse 0.9s ease-in-out 2; }
#adapt-pop .at { font: italic 700 14px/1.15 Georgia, serif; color: #fff; } #adapt-pop .ad { font: 500 11.5px/1.25 system-ui, sans-serif; color: #ffcdbd; opacity: 0.9; }
@keyframes adaptPulse { 50% { transform: scale(1.18); background: rgba(255,90,60,0.4); } }
/* boss learned card */
.learned { margin: 6px auto 4px; max-width: 640px; padding: 8px 12px; border-radius: 12px; background: rgba(40,10,14,0.6); border: 1px solid rgba(255,120,90,0.4); text-align: left; }
.learned h4 { margin: 0 0 4px; font: 800 11px/1.2 system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #ff9a7a; display: flex; align-items: center; gap: 6px; }
.learned h4 .svgi { width: 16px; height: 16px; color: #ff9a7a; }
.learned .li { display: flex; gap: 8px; align-items: center; font: 500 12.5px/1.3 system-ui, sans-serif; color: #f0dcd6; margin: 3px 0; }
.learned .li span.g { flex: 0 0 20px; height: 20px; color: #ff8a6a; }

/* ================= 1.2 story scenes ================= */
#scene { position: fixed; inset: 0; z-index: 40; display: none; }
#scene.on { display: block; }
#scene .sc-bar { position: absolute; left: 0; right: 0; height: 11vh; background: #000; }
#scene .sc-bar.top { top: 0; } #scene .sc-bar.bot { bottom: 0; }
#scene .sc-skip { position: absolute; top: calc(2.5vh + var(--sat, 0px)); right: calc(14px + var(--sar, 0px)); z-index: 2; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.3); color: #e8eef4; font: 700 13px/1 system-ui, sans-serif; padding: 7px 12px; border-radius: 16px; letter-spacing: 0.04em; }
#scene .sc-box { position: absolute; left: 50%; bottom: calc(11vh + 10px); transform: translateX(-50%); width: min(720px, 84vw); padding: 10px 18px 12px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(8,10,16,0.55), rgba(8,10,16,0.82)); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 6px 24px rgba(0,0,0,0.5); }
#scene .sc-who { font: 800 12px/1.2 system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 4px; }
#scene .sc-text { font: 500 17px/1.38 Georgia, 'Noto Serif Devanagari', 'Noto Sans Devanagari', serif; color: #f4efe6; min-height: 2.6em; }
#scene .sc-box.narr .sc-text { font-style: italic; color: #e4dccb; text-align: center; }
#scene .sc-next { position: absolute; right: 12px; bottom: 6px; color: #fff8; font-size: 14px; opacity: 0; }
#scene.typed .sc-next { opacity: 1; animation: scNext 0.9s ease-in-out infinite; }
@keyframes scNext { 50% { transform: translateX(4px); } }
#scene .sc-card { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 12vw; font: 700 26px/1.3 Georgia, 'Noto Serif Devanagari', serif; color: #fff; letter-spacing: 0.04em; text-shadow: 0 0 18px rgba(180,138,255,0.6); opacity: 0; transition: opacity 0.6s; pointer-events: none; }
#scene .sc-card.on { opacity: 1; background: radial-gradient(ellipse at center, rgba(5,4,12,0.55), rgba(5,4,12,0.15) 70%); }
body.in-scene #hud, body.in-scene #banner { visibility: hidden; }
@media (max-height: 430px) { #scene .sc-text { font-size: 15px; } #scene .sc-box { width: min(640px, 70vw); padding: 8px 14px 10px; } #scene .sc-card { font-size: 21px; } }
/* subtitles (boss rush intros + phase lines) */
#subtitle { position: absolute; left: 50%; bottom: calc(14px + var(--sab, 0px)); transform: translateX(-50%); max-width: min(520px, 46vw); text-align: center; font: 600 13.5px/1.3 system-ui, 'Noto Sans Devanagari', sans-serif; color: #f4efe6;
  background: rgba(6,8,12,0.62); padding: 5px 12px; border-radius: 10px; opacity: 0; transition: opacity 0.25s; pointer-events: none; z-index: 5; }
#subtitle.on { opacity: 1; } #subtitle b { font-weight: 800; margin-right: 6px; }
/* story chapter select + chapter complete */
.chapters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 8px 0 10px; }
.chap { position: relative; text-align: left; padding: 10px 10px 12px; min-height: 120px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.18); color: #eef; background: linear-gradient(160deg, var(--c1), var(--c2)); display: flex; flex-direction: column; gap: 4px; }
.chap .no { font: 800 10.5px/1 system-ui; letter-spacing: 0.16em; opacity: 0.75; text-transform: uppercase; } .chap .tt { font: 700 14.5px/1.2 Georgia, 'Noto Serif Devanagari', serif; }
.chap .bs { font: 500 11.5px/1.25 system-ui; opacity: 0.8; margin-top: auto; } .chap .ok { position: absolute; top: 8px; right: 9px; color: #9be36a; font-weight: 900; }
.chap.locked { filter: grayscale(1) brightness(0.5); } .chap.locked .tt::after { content: ' 🔒'; font-size: 12px; }
.chap.next { box-shadow: 0 0 0 2px #ffd25a, 0 0 18px rgba(255,210,90,0.4); }
.lore { margin: 6px 0 8px; padding: 10px 14px; border-radius: 10px; background: rgba(255,240,210,0.07); border-left: 3px solid #ffd25a; text-align: left; font: 500 14px/1.45 Georgia, 'Noto Serif Devanagari', serif; color: #efe6d6; }
.lore h4 { margin: 0 0 4px; font: 800 11px/1.2 system-ui; letter-spacing: 0.14em; text-transform: uppercase; color: #ffd25a; }
@media (max-height: 430px) { .chapters { gap: 7px; } .chap { min-height: 96px; padding: 8px; } .chap .tt { font-size: 13px; } }

.lang-tog { position: absolute; right: calc(14px + var(--sar, 0px)); top: calc(12px + var(--sat, 0px)); display: flex; gap: 4px; }
.lang-tog button { background: rgba(10,14,20,0.6); border: 1px solid rgba(255,255,255,0.25); color: #dde; font: 700 12px/1 system-ui, 'Noto Sans Devanagari', sans-serif; padding: 6px 9px; border-radius: 8px; min-width: 0; }
.lang-tog button.on { background: rgba(45,226,200,0.25); border-color: #2de2c8; color: #fff; }
.menu button.primary.alt { background: linear-gradient(180deg, rgba(255,122,47,0.85), rgba(200,70,20,0.85)); }
.story-panel { max-height: 92vh; overflow-y: auto; }
#s-chapter .panel { max-height: 92vh; overflow-y: auto; }

/* v1.3: fullscreen (web), short-screen controls */
.fs-btn { position: absolute; top: calc(10px + var(--sat)); right: calc(14px + var(--sar)); z-index: 5; display: none; padding: 7px 12px; font-size: 13px; border-radius: 10px;
  background: rgba(10,14,20,0.6); border: 1px solid rgba(255,255,255,0.22); color: #dff; letter-spacing: 0.04em; }
body.can-fs .fs-btn { display: block; }
.fs-item { display: none; } body.can-fs .fs-item { display: block; }
.fs-off { display: none; } body.is-fs .fs-on { display: none; } body.is-fs .fs-off { display: inline; }
#buttons { zoom: var(--ctlz, 1); }

/* ================= 1.4 new heroes (helper task 606bfb03): accents + Berserker rage bar / Storm Monk counter chip ================= */
body[data-hero="berserker"] { --ac: #ff5a46; } body[data-hero="monk"] { --ac: #6cc4ff; }
body[data-hero="berserker"] .ul { color: #ff6a50; } body[data-hero="monk"] .ul { color: #9fd8ff; }
#hero-meter { display: flex; align-items: center; gap: 6px; margin-top: 5px; pointer-events: none; }
#hero-meter .hm-bar { position: relative; width: clamp(110px, 17vw, 170px); height: 7px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,90,70,0.45); border-radius: 4px; overflow: hidden; }
#hero-meter .hm-fill { height: 100%; width: 0; background: linear-gradient(90deg, #8a1208, #ff3a2a 70%, #ffb15c); transition: width 0.12s linear; }
#hero-meter .hm-lbl { font: 800 9.5px/1 system-ui, sans-serif; letter-spacing: 0.06em; color: #ffb3a6; text-shadow: 0 1px 2px #000; white-space: nowrap; font-variant-numeric: tabular-nums; }
#hero-meter.full .hm-bar { box-shadow: 0 0 8px rgba(255,60,40,0.7); }
#hero-meter.on[data-kind="rage"] .hm-bar { border-color: #ff5a3c; box-shadow: 0 0 12px rgba(255,50,30,0.9); animation: rageOn 0.5s ease-in-out infinite alternate; }
#hero-meter.on[data-kind="rage"] .hm-lbl { color: #fff; }
@keyframes rageOn { from { filter: brightness(1); } to { filter: brightness(1.5); } }
#hero-meter[data-kind="storm"] .hm-bar { border-color: rgba(110,190,255,0.5); width: clamp(60px, 9vw, 90px); }
#hero-meter[data-kind="storm"] .hm-fill { background: linear-gradient(90deg, #1d4f9a, #6cc4ff 70%, #e6f6ff); }
#hero-meter[data-kind="storm"] .hm-lbl { color: #a9d8ff; }
#hero-meter.on[data-kind="storm"] .hm-bar { box-shadow: 0 0 8px rgba(110,190,255,0.8); }

/* v1.4: Boss moves codex */
.moves-panel { max-height: calc(100vh - 24px); display: flex; flex-direction: column; }
.moves-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.moves-tabs button { padding: 6px 12px; border-radius: 999px; font-size: 13px; min-height: 0; }
.moves-tabs button.sel { background: var(--accent, #2de2c8); color: #071012; border-color: transparent; }
.moves-body { overflow-y: auto; flex: 1 1 auto; text-align: left; padding-right: 4px; }
.moves-body .mv-head { font: 700 15px/1.2 Georgia, serif; margin: 2px 0 2px; }
.moves-body .mv-style { font-size: 12.5px; opacity: 0.85; margin-bottom: 8px; }
.moves-body .mv { display: grid; grid-template-columns: 10px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.moves-body .mv i { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; box-shadow: 0 0 8px currentColor; background: currentColor; }
.moves-body .mv b { font-size: 13.5px; } .moves-body .mv p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.3; opacity: 0.9; }
.moves-body .mv .hi { opacity: 0.75; font-size: 12px; }
/* v1.4: the recenter button says what it is */
#btn-lock::after { content: attr(data-label); position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 2px; font: 700 9px/1 system-ui, sans-serif; letter-spacing: 0.04em; color: #cfe; opacity: 0.85; white-space: nowrap; text-shadow: 0 1px 2px #000; pointer-events: none; }
#cam-tip { position: fixed; z-index: 30; max-width: 190px; padding: 7px 10px; border-radius: 10px; background: rgba(5,12,16,0.92); border: 1px solid #2de2c8; color: #e8fffb; font: 600 12px/1.25 system-ui, sans-serif; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
#cam-tip.on { opacity: 1; }
#cam-tip::after { content: ''; position: absolute; bottom: -7px; left: var(--ax, 50%); border: 7px solid transparent; border-bottom: 0; border-top-color: #2de2c8; transform: translateX(-50%); }

/* 1.4 difficulty chip on the title screen */
.menu .diff-chip { border-color: #ff6a3a77; color: #ffd8c4; }
.diff-chip b { color: #ff9a5a; }
.diff-chip[data-d="story"] { border-color: #5ad1ff66; } .diff-chip[data-d="story"] b { color: #8fe3ff; }
.diff-chip[data-d="hard"] b { color: #ff5a3a; }
.diff-chip[data-d="nightmare"] { border-color: #c03aff88; box-shadow: 0 0 12px #a020ff44; } .diff-chip[data-d="nightmare"] b { color: #d07aff; }
body.can-fs .lang-tog { right: calc(150px + var(--sar, 0px)); } /* 1.4: the fullscreen button no longer covers EN/हिं */

/* ---------------- 1.5 multiplayer ---------------- */
#s-title .menu button.mp { background: linear-gradient(180deg, #3fc8ff, #1f6fb8); color: #061420; }
.mp-panel { max-width: 640px; text-align: center; }
.mp-panel button { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 10px 16px; font-size: 15px; color: #fff; }
.mp-panel .row { justify-content: center; }
.mp-mode.on { background: rgba(63,200,255,0.16) !important; }
.mp-row { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 6px 0; }
.mp-row input, .mp-joinrow input { font: 600 16px system-ui; padding: 8px 10px; border-radius: 10px; border: 1px solid #ffffff33; background: #0008; color: #fff; width: 160px; text-align: center; }
.mp-joinrow input { text-transform: uppercase; letter-spacing: 2px; width: 170px; }
.mp-panel h2 { margin: 0 0 2px; } .mp-panel .sub { margin: 0 0 4px; font-size: 12px; } .mp-panel .row { margin-top: 6px; } .mp-panel button { padding: 8px 14px; }
.mp-panel { max-height: calc(100vh - 16px); overflow-y: auto; }
.mp-arrow { min-width: 36px; padding: 6px 8px !important; }
#mp-hero { min-width: 150px; text-align: center; }
.mp-modes { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.mp-mode { flex: 1; max-width: 260px; opacity: .7; border: 2px solid transparent !important; }
.mp-mode small { display: block; font-size: 11px; opacity: .8; font-weight: 500; }
.mp-mode.on { opacity: 1; border-color: #3fc8ff !important; box-shadow: 0 0 14px #3fc8ff55; }
.mp-roomhead { display: flex; gap: 14px; align-items: baseline; justify-content: center; }
.mp-code { font: 800 30px ui-monospace, monospace; letter-spacing: 6px; color: #ffd27a; }
#mp-ping { font-size: 12px; opacity: .7; }
#mp-list { list-style: none; padding: 0; margin: 8px auto; max-width: 420px; text-align: left; }
#mp-list li { padding: 4px 8px; border-bottom: 1px solid #ffffff14; }
#mp-list li.slots { opacity: .6; font-size: 12px; text-align: center; border: 0; }
#mp-status { min-height: 1.2em; font-size: 13px; }
#mp-status.err { color: #ff8a7a; }
#mp-wait { opacity: .8; font-size: 13px; align-self: center; }
#coop-hud { position: fixed; inset: 0; pointer-events: none; z-index: 6; }
#coop-hud .party { position: absolute; left: max(10px, env(safe-area-inset-left)); top: 74px; display: flex; flex-direction: column; gap: 4px; }
#coop-hud .pm { display: flex; align-items: center; gap: 6px; font: 700 12px system-ui; text-shadow: 0 1px 2px #000; }
#coop-hud .pm span { min-width: 64px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#coop-hud .pm b { width: 80px; height: 7px; background: #0009; border-radius: 4px; overflow: hidden; display: block; }
#coop-hud .pm b i { display: block; height: 100%; background: #4cd06a; width: 100%; }
#coop-hud .pm.down b i { background: #777; }
#coop-hud .pm em { color: #ff6a5a; font-style: normal; font-size: 11px; }
#coop-hud .coop-rev { display: none; position: absolute; left: 50%; top: 38%; transform: translateX(-50%); text-align: center; font: 800 15px system-ui; color: #9dffc4; text-shadow: 0 2px 4px #000; }
#coop-hud .coop-rev b { display: block; width: 160px; height: 8px; margin: 4px auto 0; background: #0009; border-radius: 4px; overflow: hidden; }
#coop-hud .coop-rev b i { display: block; height: 100%; background: #6dffa8; width: 0; }
#coop-hud .coop-taunt { pointer-events: auto; position: absolute; right: calc(max(12px, env(safe-area-inset-right)) + 118px); top: 58px; width: 54px; height: 54px; border-radius: 50%; border: 2px solid #ffd25a88; background: #1a1206cc; color: #fff; font-size: 20px; padding: 0; line-height: 1; }
#coop-hud .coop-taunt small { display: block; font: 800 8px system-ui; letter-spacing: .5px; color: #ffd25a; }
#coop-hud .coop-taunt.cd { opacity: .35; }
#coop-hud .coop-room { position: absolute; left: 50%; transform: translateX(-50%); bottom: 4px; font: 600 10px system-ui; opacity: .55; text-shadow: 0 1px 2px #000; }
#coop-hud .coop-room.enr { color: #ffa04a; opacity: 1; font-size: 12px; font-weight: 800; }
#coop-hud .coop-scorch { display: none; position: absolute; right: calc(max(12px, env(safe-area-inset-right)) + 118px); top: 116px; width: 54px; text-align: center; font: 800 13px system-ui; color: #ff8a3a; text-shadow: 0 1px 3px #000, 0 0 6px #ff5a1a; }
#coop-hud.me-aim .coop-room::after { content: ' · BOSS IS ON YOU'; color: #ff7a6a; opacity: 1; }

/* ===================== 1.6 ===================== */
/* title: 3 big modes in one row, then a 4-column grid (12 items) — fits 800x360 and 1600x720 landscape phones */
#s-title .menu.m16 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; width: min(720px, 64vw); min-width: 0; }
#s-title .menu.m16 > button { grid-column: span 3; padding: 8px 10px; font-size: 14px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#s-title .menu.m16 > button.primary { grid-column: span 4; padding: 11px 12px; font-size: 16px; text-align: center; }
#s-title .menu.m16 > button small { display: block; margin: 2px 0 0; font-size: 11px; }
#s-title .menu.m16 > button.primary small { display: inline; margin-left: 6px; }
#s-title .menu.m16 > button.mp { background: linear-gradient(180deg, rgba(63,200,255,0.42), rgba(31,111,184,0.22)) !important; color: #fff; border-color: rgba(63,200,255,0.8) !important; }
#s-title .menu.m16 .mode16 { border-color: rgba(255,210,90,0.45); background: linear-gradient(180deg, rgba(255,210,90,0.13), rgba(255,210,90,0.04)); }
#s-title .menu.m16 .tower16 small, #s-title .menu.m16 .weekly16 small { color: #ffd58a; }
#s-title .menu.m16 .upg16 small { color: #8fe3ff; }
#s-title .menu.m16 .diff-chip { text-align: left; }
#s-title .menu.m16 > button[data-act="tutorial"], #s-title .menu.m16 > button[data-act="stats"] { grid-column: span 2; }
#s-title .menu.m16 > button[data-act="settings"] { grid-column: span 3; } #s-title .menu.m16 > .diff-chip { grid-column: span 5; }
@media (max-height: 430px) {
  #s-title .tag { white-space: nowrap; max-width: none; font-size: 11.5px; }
  #s-title .menu.m16 > button.mp small { display: none; }
  #s-title .menu.m16 { gap: 5px; width: min(680px, 66vw); }
  #s-title .menu.m16 > button { padding: 5px 8px; font-size: 12.5px; }
  #s-title .menu.m16 > button.primary { padding: 8px 8px; font-size: 14px; }
  #s-title .menu.m16 > button small { font-size: 10px; }
  #s-title .title-wrap h1 { font-size: clamp(30px, 9vh, 52px); }
  #s-title .tag { margin: 2px 0 6px; }
}
@media (orientation: portrait) { #s-title .menu.m16 { width: min(560px, 94vw); } #s-title .menu.m16 > button, #s-title .menu.m16 > button[data-act] { grid-column: span 6; } #s-title .menu.m16 > button.primary { grid-column: span 12; } #s-title .menu.m16 > .diff-chip { grid-column: span 12; } #s-title .menu.m16 > button.primary small { display: inline; } }

/* 1.6 panel screens */
#s-16.p16-side { align-items: flex-end; background: linear-gradient(90deg, rgba(7,10,16,0) 0%, rgba(7,10,16,0.35) 35%, rgba(7,10,16,0.9) 60%); }
#s-16.p16-side .p16 { width: min(620px, 58vw); }
.p16 h2 small { font-size: 12px; color: #9fb7bf; }
.p16 h3 { margin: 10px 0 6px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #cfe; font-weight: 700; }
.p16 h3 small { text-transform: none; letter-spacing: 0; color: #9fb7bf; font-weight: 400; margin-left: 6px; }
.h16row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gem16 { font: 700 15px/1 system-ui, sans-serif; color: #8fe3ff; background: rgba(63,200,255,0.12); border: 1px solid rgba(63,200,255,0.4); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.htabs16 { display: flex; gap: 5px; flex-wrap: wrap; margin: 6px 0 4px; }
.htabs16 .h16 { padding: 5px 9px; font-size: 12.5px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); color: #dde; }
.htabs16 .h16.sel { border-color: var(--c); color: #fff; box-shadow: inset 0 -2px 0 var(--c); }
.chips16 { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.chip16 { position: relative; text-align: left; padding: 7px 9px 7px 22px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); font-size: 13px; }
.chip16::before { content: ''; position: absolute; left: 8px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--sw, #889); box-shadow: 0 0 8px var(--sw, #889); }
.chip16 b { display: block; font-weight: 600; } .chip16 small { color: #8fe3ff; font-size: 11px; } .chip16 em { display: block; font-style: normal; color: #9fb7bf; font-size: 10.5px; margin-top: 2px; }
.chip16.on { border-color: #2de2c8; background: rgba(45,226,200,0.12); } .chip16.own small { color: #9fe8b0; }
.tree16 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tier16 { border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 6px; background: rgba(0,0,0,0.18); }
.tier16.open { border-color: rgba(255,210,90,0.45); }
.tier16 .tl { font-size: 11px; color: #ffd58a; margin-bottom: 4px; }
.node16 { display: block; width: 100%; text-align: left; margin: 0 0 4px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); font-size: 12.5px; }
.node16 small { display: block; color: #9fb7bf; font-size: 10.5px; } .node16.on { border-color: #ffd25a; background: rgba(255,210,90,0.16); } .node16:disabled { opacity: 0.4; }
.note16, .sub16 { color: #9fb7bf; font-size: 12px; margin: 6px 0; }
.stat16 { display: flex; gap: 10px; margin: 8px 0; } .stat16 > div { flex: 1; text-align: center; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 6px; }
.stat16 b { display: block; font-size: 22px; color: #ffd58a; } .stat16 small { color: #9fb7bf; font-size: 11px; }
.wk16 { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0; }
.wkboss { flex: 1.4; border: 1px solid rgba(255,210,90,0.4); border-radius: 12px; padding: 8px 12px; background: rgba(255,210,90,0.06); }
.wkboss > b { font-family: var(--serif); font-size: 19px; color: #ffe0a8; } .wkboss ul { margin: 4px 0; padding-left: 18px; font-size: 13px; } .wkboss small { color: #9fb7bf; font-size: 11.5px; }
.enr16 { font-size: 11px; color: #ff7a5a; border: 1px solid #ff7a5a88; border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
.wkname { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #9fb7bf; }
.wkname input, #mp-name { background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; color: #fff; padding: 8px 10px; font-size: 14px; }
.tabs16 { display: flex; gap: 6px; margin: 8px 0 4px; } .tabs16 button { padding: 5px 12px; border-radius: 8px; font-size: 12.5px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); }
.tabs16 button.sel { border-color: #2de2c8; color: #fff; }
.lb16 { min-height: 40px; } .board.b16 { width: 100%; font-size: 12.5px; } .board.b16 td { padding: 3px 6px; } .board.b16 tr.me td { color: #2de2c8; font-weight: 700; }
.lbst { color: #9fb7bf; font-size: 13px; } .lbst.off { color: #ffb08a; } .lbme { font-size: 12.5px; color: #cfe; margin: 4px 0; }
.chs16 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.ch16 { border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 8px 10px; background: rgba(255,255,255,0.04); display: flex; flex-direction: column; gap: 4px; min-height: 86px; }
.ch16 .cht { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #9fb7bf; } .ch16 b { font-size: 14px; font-weight: 600; flex: 1; } .ch16 span { color: #8fe3ff; font-size: 12.5px; }
.ch16.t-mid { border-color: rgba(255,210,90,0.35); } .ch16.t-hard { border-color: rgba(255,106,58,0.45); }
.ch16.done { background: rgba(45,226,200,0.12); border-color: #2de2c8; } .ch16.done span { color: #2de2c8; }
.end16 { grid-column: 1 / -1; } .end16 .v16 { font-size: 13px; color: #dfe; margin: 2px 0; }
.practice16 { margin-left: 10px; font: 600 12px/1 system-ui, sans-serif; padding: 6px 10px; border-radius: 8px; border: 1px solid currentColor; background: rgba(255,255,255,0.06); color: inherit; vertical-align: middle; }
.clue16 p { font-style: italic; color: #ffe0a8; }
.mp-modes { flex-wrap: wrap; }
/* co-op emotes */
.emo-btn { position: fixed; z-index: 40; right: calc(14px + var(--sar, 0px)); top: calc(118px + var(--sat, 0px)); width: 44px; height: 44px; border-radius: 50%; font-size: 22px; line-height: 1; padding: 0; background: rgba(10,14,20,0.6); border: 1px solid rgba(255,255,255,0.3); }
.emo-btn.on { border-color: #2de2c8; } .emo-btn.cool { opacity: 0.45; }
.emo-pal { position: fixed; z-index: 41; right: calc(64px + var(--sar, 0px)); top: calc(110px + var(--sat, 0px)); display: none; grid-template-columns: repeat(4, 44px); gap: 6px; padding: 8px; border-radius: 14px; background: rgba(10,14,20,0.85); border: 1px solid rgba(255,255,255,0.2); }
.emo-pal.on { display: grid; } .emo-pal button { width: 44px; height: 44px; font-size: 24px; padding: 0; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
@media (max-height: 430px) {
  .p16 { padding: 10px 14px; } .p16 h3 { margin: 6px 0 4px; } .chip16 { padding: 5px 7px 5px 20px; font-size: 12px; } .chips16 { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .stat16 b { font-size: 18px; } .ch16 { min-height: 70px; } .emo-btn { top: calc(96px + var(--sat, 0px)); width: 40px; height: 40px; } .emo-pal { top: calc(90px + var(--sat, 0px)); right: calc(58px + var(--sar, 0px)); }
}

/* ===== 1.6 hotfix: every menu works with the phone upright (portrait) ===== */
@media (orientation: portrait) {
  .screen { overflow-y: auto; justify-content: safe center; padding-left: calc(10px + var(--sal, 0px)); padding-right: calc(10px + var(--sar, 0px)); }
  .screen > * { flex-shrink: 0; max-width: 100%; }
  .panel, .panel.wide { width: 100%; max-width: 100%; min-width: 0; max-height: none; }
  /* hero select: hero chips in a grid on top, the hero in the middle, details full width below */
  #s-heroes { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 10px;
    background: linear-gradient(180deg, rgba(7,10,16,0.82) 0%, rgba(7,10,16,0.15) 24%, rgba(7,10,16,0.15) 36%, rgba(7,10,16,0.92) 46%); }
  .hero-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 6px; }
  .hero-card { min-width: 0; padding: 6px 8px; }
  .hero-card .hn { font-size: 13px; overflow-wrap: anywhere; line-height: 1.15; }
  .hero-card .hr { font-size: 10.5px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hero-panel { width: 100%; max-width: none; align-self: stretch; margin-top: auto; max-height: none; overflow: visible; }
  #cards { flex-direction: column; align-items: stretch; width: 100%; }
  #cards .card { width: 100%; max-width: none; min-height: 0; }
  .end-panel { grid-template-columns: 1fr !important; }
  .row { flex-wrap: wrap; }
  .moves-tabs { flex-wrap: wrap; }
  #set-grid { grid-template-columns: 1fr !important; }
  .seg { flex-wrap: wrap; max-width: 100%; }
}
@media (orientation: portrait) { #s-16.p16-side { align-items: stretch; background: linear-gradient(180deg, rgba(7,10,16,0.1) 0%, rgba(7,10,16,0.1) 30%, rgba(7,10,16,0.92) 42%); } #s-16.p16-side .p16 { width: 100%; margin-top: auto; } .chs16 { grid-template-columns: 1fr; } .tree16 { grid-template-columns: 1fr; } .wk16 { flex-direction: column; } .stat16 { flex-wrap: wrap; } .emo-pal { grid-template-columns: repeat(4, 40px); } }

/* ===================== 1.6.1 HOME: one big Play, 4 modes, a small dock, everything else under "More" ===================== */
#s-title { justify-content: center; }
#s-title .title-wrap.t161 { display: flex; flex-direction: column; align-items: stretch; width: min(540px, 62vw); gap: 0; }
#s-title .t161 h1 { font-size: clamp(34px, 11vh, 62px); white-space: nowrap; }
#s-title .t161 h1 span { display: inline; margin-left: 0.28em; font-size: 0.62em; letter-spacing: 0.2em; }
#s-title .t161 .tag { margin: 4px 0 12px; font-size: 12.5px; max-width: none; opacity: 0.85; }
.t161 button { font: inherit; color: #eef4f6; border-radius: 14px; border: 1px solid rgba(255,255,255,0.14); background: rgba(10,14,20,0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.t161 button i, .t-sheet button i { font-style: normal; line-height: 1; }
.t161 button small, .t-sheet button small { display: block; font-size: 11px; color: #9fd8c8; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t161 .lb, .t-sheet .lb { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* PLAY */
.t-play { display: flex; gap: 8px; align-items: stretch; }
.t-go { flex: 1; min-width: 0; display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 10px 18px !important;
  background: linear-gradient(180deg, #ff9a4a, #e0541c 55%, #b8400f) !important; border: 1px solid #ffc08a !important; box-shadow: 0 6px 22px -6px rgba(255,110,40,0.75), inset 0 1px 0 rgba(255,255,255,0.35); }
.t-go i { grid-row: 1 / 3; font-size: 26px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,0.22); padding-left: 3px; }
.t-go .lb { font: 900 22px/1.05 var(--serif); letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0,0,0,0.45); }
.t-go small { color: #ffe6d2 !important; font-size: 12px !important; font-weight: 600; opacity: 0.95; }
.t161 .diff-chip { flex: 0 0 auto; width: 112px; padding: 6px 10px; font-size: 11px; line-height: 1.25; text-align: center; color: #c9d4d8; white-space: normal; border-color: #ff6a3a77; }
.t161 .diff-chip b { display: block; font-size: 15px; margin: 2px 0 0; }
/* MODES */
.t-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.t-mode { min-width: 0; padding: 8px 6px 7px !important; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.t-mode i { font-size: 22px; }
.t-mode .lb { font-weight: 800; font-size: 13px; max-width: 100%; }
.t-mode small { font-size: 10.5px !important; max-width: 100%; }
.t-mode.story { border-color: rgba(255,210,140,0.35) !important; } .t-mode.story small { color: #ffd9a0; }
.t-mode.mp { border-color: rgba(63,200,255,0.55) !important; background: linear-gradient(180deg, rgba(63,200,255,0.22), rgba(10,14,20,0.55)) !important; } .t-mode.mp small { color: #9fe0ff; }
.t-mode.tower small, .t-mode.weekly small { color: #ffd58a; }
.t-mode.weekly { border-color: rgba(255,210,90,0.45) !important; }
/* DOCK */
.t-dock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.t-dock button { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 6px !important; font-size: 12.5px; font-weight: 700; background: rgba(10,14,20,0.4); border-color: rgba(255,255,255,0.1); }
.t-dock button i { font-size: 15px; }
.t-dock button .lb { min-width: 0; }
.t-dock button { position: relative; overflow: visible; }
.t-dock button small { position: absolute; top: -7px; right: 2px; background: #1fb89f; color: #04130f !important; border-radius: 999px; padding: 2px 6px; font-size: 10px !important; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,0.5); overflow: visible !important; }
.t-dock button small:empty { display: none; }
.t-dock .t-more { color: #fff; border-color: rgba(255,255,255,0.22); }
/* top-right bar */
.t-bar { position: absolute; top: calc(10px + var(--sat)); right: calc(12px + var(--sar)); display: flex; gap: 8px; align-items: center; z-index: 6; }
.t-chip, .t-ib { background: rgba(10,14,20,0.6); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; color: #e6f6ff; }
.t-chip { font: 700 13px/1 system-ui, sans-serif; padding: 8px 12px; border-color: rgba(63,200,255,0.45); color: #8fe3ff; }
.t-ib { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; font-size: 16px; line-height: 1; }
#s-title .t-bar .fs-btn { position: static; display: none; padding: 0; letter-spacing: 0; font-size: 17px; border-radius: 999px; }
body.can-fs #s-title .t-bar .fs-btn { display: grid; }
#s-title .t-bar .fs-btn .fs-off { display: none; } body.is-fs #s-title .t-bar .fs-btn .fs-on { display: none; } body.is-fs #s-title .t-bar .fs-btn .fs-off { display: inline; }
/* MORE sheet */
.t-sheet { position: fixed; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; background: rgba(3,5,9,0.74); padding: calc(10px + var(--sat)) calc(12px + var(--sar)) calc(10px + var(--sab)) calc(12px + var(--sal)); }
.t-sheet.on { display: flex; }
.t-sheet-in { width: min(560px, 92vw); max-height: 100%; overflow-y: auto; background: #0c1018; border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; padding: 12px 14px 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); touch-action: pan-y; }
.t-sheet-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font: 700 16px/1 var(--serif); letter-spacing: 0.08em; color: #f2ebe4; }
.t-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.t-grid > button { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: #eef4f6; text-align: center; font-size: 13px; font-weight: 700; }
.t-grid > button i { font-size: 22px; }
.t-grid > button .lb { max-width: 100%; }
.t-grid > button .lb { white-space: normal; line-height: 1.15; overflow-wrap: anywhere; }
#s-title .t-sheet small.ver { color: #9fb7bf; }
#s-title .t-sheet .ver { position: static; border: 0; padding: 0; background: none; font-size: 11px; }
#s-title .t-sheet .lang-tog { position: static; grid-column: span 1; display: flex; flex-direction: column; gap: 4px; align-items: stretch; justify-content: center; }
#s-title .t-sheet .lang-tog .lang-l { display: none; }
#s-title .t-sheet .lang-tog button { padding: 8px 6px; font-size: 13px; border-radius: 10px; min-width: 0; }
body.can-fs #s-title .t-sheet .lang-tog { right: auto; }
/* short landscape phones (most Android phones: 780-915 x 360-412) */
@media (orientation: landscape) and (max-height: 430px) {
  #s-title .title-wrap.t161 { width: min(520px, 62vw); }
  #s-title .t161 h1 { font-size: clamp(30px, 10vh, 46px); }
  #s-title .t161 .tag { margin: 2px 0 8px; font-size: 11.5px; }
  .t-go { padding: 8px 14px !important; } .t-go i { width: 40px; height: 40px; font-size: 22px; } .t-go .lb { font-size: 20px; }
  .t-mode i { font-size: 20px; }
}
@media (orientation: landscape) and (max-height: 340px) { #s-title .t161 .tag { display: none; } .t-mode i { font-size: 17px; } .t-mode small { display: none !important; } }
/* portrait: centred column, 2x2 modes */
@media (orientation: portrait) {
  #s-title { align-items: center; padding-left: calc(16px + var(--sal)); background: linear-gradient(180deg, rgba(7,10,16,0.35) 0%, rgba(7,10,16,0.8) 45%, rgba(7,10,16,0.95) 100%); justify-content: flex-end; padding-bottom: calc(22px + var(--sab)); }
  #s-title .title-wrap.t161 { width: min(460px, 100%); }
  #s-title .t161 h1 { text-align: center; font-size: clamp(38px, 12vw, 60px); }
  #s-title .t161 .tag { text-align: center; }
  .t-go { padding: 14px 18px !important; }
  .t-modes { grid-template-columns: 1fr 1fr; }
  .t-mode { flex-direction: row; justify-content: flex-start; text-align: left; padding: 10px 12px !important; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; }
  .t-mode i { grid-row: 1 / 3; }
  .t-mode .lb, .t-mode small { text-align: left; }
  .t-dock button { flex-direction: column; gap: 3px; padding: 8px 4px !important; font-size: 11.5px; }
  .t-grid { grid-template-columns: repeat(3, 1fr); }
  .t-sheet { align-items: flex-end; }
}
#hero-name:not(:empty)::before { content: '⚔ '; }
#s-title button:focus, #s-title button:focus-visible { outline: none; } body.mouse #s-title button:focus-visible { outline: 2px solid rgba(45,226,200,0.7); outline-offset: 2px; }
@media (orientation: portrait) and (max-width: 400px) { .t-go .lb { font-size: 18px; } .t-go i { width: 38px; height: 38px; font-size: 20px; } .t-go { column-gap: 9px; padding: 12px 12px !important; } .t161 .diff-chip { width: 96px; } }