:root {
  --bg: #0a1634; --bg2: #102452; --panel: rgba(13, 30, 72, .84); --panel2: rgba(22, 46, 102, .9);
  --line: rgba(110, 165, 255, .35); --line2: #4f86e0; --gold: #ffcf5a; --gold2: #ffad33;
  --blue: #46c4ff; --red: #ff5f73; --green: #5fe39a; --text: #eef5ff; --muted: #9db3da;
  --radius: 16px; --shadow: 0 10px 30px rgba(3, 8, 30, .45);
  --font: 'Kanit', 'Segoe UI', Tahoma, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); overflow: hidden; -webkit-tap-highlight-color: transparent; user-select: none; }
input, select, textarea { user-select: text; }
button { font-family: inherit; cursor: pointer; color: inherit; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: var(--blue); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
h1, h2, h3, h4 { margin: 0 0 8px; font-weight: 700; }
h4 { color: var(--gold); font-size: 15px; margin-top: 14px; }

.sky-bg { position: fixed; inset: 0; background: url(/assets/game/maps/sky.jpg) center/cover; filter: saturate(1.05) brightness(.55) blur(2px); transform: scale(1.04); z-index: -1; }
.sky-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(30, 80, 170, .2), rgba(5, 12, 35, .75)); }

/* ---------- buttons & inputs ---------- */
.btn { border: 0; border-radius: 12px; padding: 10px 18px; font-weight: 600; font-size: 15px; background: var(--panel2); border: 1px solid var(--line); transition: transform .12s, filter .12s, background .15s; }
.btn:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, #ffd96a, #ff9f2e); color: #3a1d00; border: 1px solid #ffe7a0; box-shadow: 0 4px 0 #b4610f, 0 8px 18px rgba(255, 160, 40, .3); }
.btn.danger { background: linear-gradient(180deg, #ff7d8d, #e0364f); border-color: #ffb0ba; }
.btn.ghost { background: rgba(255, 255, 255, .06); }
.btn.big { padding: 14px 24px; font-size: 18px; }
.btn.full { width: 100%; }
.btn.small { padding: 6px 10px; font-size: 13px; }
.icon-btn { background: rgba(255, 255, 255, .08); border: 1px solid var(--line); border-radius: 10px; width: 38px; height: 38px; font-size: 18px; }
.mini-btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; min-width: 38px; height: 38px; font-size: 16px; }
.mini-btn:active { background: var(--line2); }
input, select { font-family: inherit; font-size: 15px; background: rgba(5, 14, 40, .7); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; outline: none; }
input:focus, select:focus { border-color: var(--gold); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); }
label.chk { flex-direction: row; align-items: center; gap: 8px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.glass { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.panel { padding: 16px; }
.panel h3 { font-size: 17px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.panel h3 small { font-weight: 400; font-size: 12px; color: var(--muted); }
.seg { display: inline-flex; background: rgba(5, 14, 40, .6); border-radius: 12px; padding: 3px; border: 1px solid var(--line); }
.seg button { border: 0; background: none; padding: 7px 14px; border-radius: 9px; font-weight: 600; color: var(--muted); }
.seg button.active { background: var(--line2); color: #fff; }
.badge { background: var(--gold); color: #3a1d00; border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
kbd { background: #fff2; border: 1px solid #fff4; border-radius: 5px; padding: 0 5px; font-family: inherit; }
.stars .star { color: #ffffff30; font-size: 16px; } .stars .star.on { color: var(--gold); text-shadow: 0 0 8px #ffb000; }

/* ---------- topbar ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; height: 60px; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: linear-gradient(180deg, rgba(8, 20, 52, .95), rgba(8, 20, 52, .75)); border-bottom: 1px solid var(--line); z-index: 20; }
.brand { background: none; border: 0; font-size: 20px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; }
.brand b { color: var(--gold); } .logo-mark { color: var(--blue); }
.tb-news { flex: 1; display: flex; align-items: center; gap: 8px; overflow: hidden; min-width: 0; background: rgba(0, 0, 0, .2); border-radius: 99px; padding: 5px 12px; font-size: 14px; color: #ffe9a8; }
.tb-news-track { overflow: hidden; white-space: nowrap; flex: 1; }
.tb-news-track span { display: inline-block; padding-left: 100%; animation: ticker 22s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }
.tb-player { display: flex; align-items: center; gap: 10px; }
.tb-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--panel2); border: 2px solid var(--gold); }
.tb-meta b { font-size: 14px; display: block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gold); }
.tb-exp { width: 70px; height: 6px; background: #ffffff20; border-radius: 9px; overflow: hidden; } .tb-exp i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), #8af); }
.tb-cur { display: flex; gap: 10px; font-size: 13px; background: rgba(0, 0, 0, .25); padding: 6px 12px; border-radius: 99px; }
body[data-screen="battle"] .topbar, body[data-screen="login"] .topbar, body[data-screen="loading"] .topbar { display: none; }

/* ---------- screens ---------- */
#app { position: fixed; inset: 0; }
.screen { position: absolute; inset: 60px 0 0; display: none; overflow: auto; }
.screen.active { display: block; animation: fadein .25s ease; }
#screen-battle, #screen-login, #screen-loading { inset: 0; }
#screen-battle { overflow: hidden; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } }
.loading { height: 100%; display: grid; place-content: center; text-align: center; gap: 14px; font-size: 18px; }
.spinner { width: 54px; height: 54px; margin: auto; border: 5px solid #ffffff25; border-top-color: var(--gold); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.page { max-width: 1280px; margin: 0 auto; padding: 18px 18px 40px; }
.page-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-bottom: 14px; }
.page-head h2 { margin: 0; font-size: 24px; text-shadow: 0 2px 10px #0008; }

/* ---------- login ---------- */
.login-wrap { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px 32px; }
.login-hero { position: relative; width: min(1180px, 100%); display: flex; flex-direction: column; align-items: center; }
.logo-big { font-size: 54px; font-weight: 900; line-height: 1; letter-spacing: 3px; text-align: center; background: linear-gradient(180deg, #fff6c8, #ffc340 60%, #ff8a1e); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #6a3500) drop-shadow(0 8px 14px #0008); }
.logo-big span { display: block; font-size: 32px; background: linear-gradient(180deg, #e8f7ff, #5fc4ff); -webkit-background-clip: text; background-clip: text; }
.logo-big small { display: block; font-size: 15px; font-weight: 500; letter-spacing: 1px; color: #dfefff; -webkit-text-fill-color: #dfefff; filter: none; margin-top: 8px; }
.login-hero .logo-big { margin-bottom: -6px; position: relative; z-index: 2; }
.hero-stage { position: relative; width: 100%; animation: heroFloat 5s ease-in-out infinite; }
.hero-stage::before { content: ''; position: absolute; inset: 10% 8% -10%; background: radial-gradient(ellipse at 50% 60%, rgba(255, 207, 90, .45), rgba(70, 196, 255, .18) 45%, transparent 70%); filter: blur(30px); z-index: -1; }
.hero-stage img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 72%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 72%, transparent 100%); mask-composite: intersect; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)) saturate(1.08); }
@keyframes heroFloat { 50% { transform: translateY(-8px); } }
.login-card { width: min(460px, 100%); padding: 24px 26px; margin-top: -54px; position: relative; z-index: 3; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: rgba(0, 0, 0, .25); border-radius: 12px; padding: 4px; margin-bottom: 16px; transition: opacity .2s; }
.tabs.dim { opacity: .45; }
.tabs .tab { border: 0; background: none; padding: 9px; border-radius: 9px; font-weight: 600; color: var(--muted); }
.tabs .tab.active { background: var(--line2); color: #fff; }
.login-form { display: grid; gap: 12px; }
.pane-title { margin: 0; font-weight: 600; color: var(--gold); overflow-wrap: anywhere; }
.login-form > * { min-width: 0; } .login-card input { width: 100%; }
.code-input { font-size: 26px; letter-spacing: 12px; text-align: center; font-weight: 700; }
.login-links { display: flex; justify-content: space-between; gap: 10px; }
.link { background: none; border: 0; color: var(--blue); font-size: 14px; padding: 0; }
.link:hover { text-decoration: underline; }
.login-form .hint { margin: 0; text-align: center; }
/* ---------- home ---------- */
.home { display: grid; grid-template-columns: 1fr 400px; gap: 18px; padding: 18px; height: 100%; max-width: 1500px; margin: auto; }
.home-art { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); border: 2px solid #ffffff25; min-height: 360px; display: grid; grid-template-rows: 1fr auto; background: #0b1838; }
.home-art > img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center 30%; display: block; }
.home-heroes { display: flex; justify-content: center; gap: 4px; padding: 6px 10px 10px; background: linear-gradient(180deg, #2a5aa8, #0f2556); border-top: 2px solid #ffffff25; position: relative; }
.home-heroes::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(180deg, #5fbf4a, #3b8a33); border-top: 3px solid #a8f07a; }
.hh { position: relative; }
.hh { background: none; border: 0; display: flex; flex-direction: column; align-items: center; transition: transform .15s; }
.hh:hover { transform: translateY(-6px); }
.hh canvas { width: 120px; height: 104px; }
.hh b { position: relative; font-size: 13px; background: #0b1838cc; border: 1px solid var(--line); padding: 1px 10px; border-radius: 99px; }
.home-side { display: flex; flex-direction: column; gap: 12px; overflow: auto; padding-bottom: 8px; }
.mode-card { display: flex; align-items: center; gap: 14px; text-align: left; padding: 18px; border-radius: 18px; border: 2px solid #ffe7a0; background: linear-gradient(135deg, #ffcd55, #ff8a2b); color: #3a1d00; box-shadow: 0 6px 0 #a95812, var(--shadow); transition: transform .15s; }
.mode-card:hover { transform: translateY(-2px); }
.mode-card b { font-size: 22px; display: block; } .mode-card small { font-size: 13px; }
.mc-icon { font-size: 38px; } .mode-card .go { margin-left: auto; font-size: 34px; }
.pvp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.pvp-btn { border-radius: 14px; padding: 12px 6px; border: 1px solid var(--line2); background: linear-gradient(180deg, #2a4f9e, #19336f); display: flex; flex-direction: column; align-items: center; transition: transform .12s, box-shadow .12s; }
.pvp-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--gold); }
.pvp-btn b { font-size: 24px; color: var(--gold); } .pvp-btn small { font-size: 12px; color: var(--muted); }
.home-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: auto; }
.home-nav button { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; font-size: 13px; }
.home-nav span { font-size: 24px; }

/* ---------- heroes ---------- */
.heroes-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
.hero-list { display: flex; flex-direction: column; gap: 8px; }
.hero-tile { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; text-align: left; align-items: center; column-gap: 10px; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.hero-tile img { grid-row: span 2; width: 56px; height: 56px; object-fit: cover; object-position: top; border-radius: 12px; background: #fff1; }
.hero-tile small { color: var(--muted); }
.hero-tile.active { border-color: var(--c); box-shadow: 0 0 0 2px var(--c) inset; }
.hero-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px; }
.hd-stage { background: radial-gradient(circle at 50% 70%, #3a6cc9, #142a5e 70%); border-radius: 16px; display: flex; flex-direction: column; align-items: center; padding: 10px; }
.hd-canvas { width: 100%; max-width: 460px; aspect-ratio: 460/360; }
.hd-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.hd-actions button { border: 1px solid var(--line); background: #0006; border-radius: 99px; padding: 5px 12px; font-size: 13px; }
.hd-actions button.active { background: var(--gold); color: #3a1d00; }
.hd-info h2 { font-size: 30px; margin: 0; } .role { color: var(--muted); margin: 0 0 8px; } .quote { font-style: italic; color: var(--gold); }
.stat { display: grid; grid-template-columns: 90px 1fr 40px; align-items: center; gap: 10px; margin: 6px 0; font-size: 14px; }
.sbar { height: 10px; background: #ffffff18; border-radius: 9px; overflow: hidden; } .sbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); }
.kit { display: grid; gap: 8px; margin: 14px 0; } .kit > div { display: flex; gap: 10px; align-items: center; background: #0003; border-radius: 12px; padding: 8px; }
.kit img { width: 44px; height: 44px; object-fit: contain; } .kit small { display: block; color: var(--muted); }

/* ---------- campaign ---------- */
.chapter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chapter-tabs button { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 7px 16px; font-weight: 600; }
.chapter-tabs button.active { background: var(--gold); color: #3a1d00; }
.campaign-body { display: grid; grid-template-columns: 1fr 340px; gap: 16px; }
.world-map { position: relative; min-height: 470px; border-radius: 22px; background-size: cover; background-position: center; border: 2px solid #ffffff30; box-shadow: var(--shadow); overflow: hidden; }
.world-map::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 15, 45, .1), rgba(5, 15, 45, .55)); }
.world-map svg.path { position: absolute; inset: 0; width: 100%; height: 100%; }
.world-map path { fill: none; stroke: #fff; stroke-width: .8; stroke-dasharray: 1.6 1.6; opacity: .8; vector-effect: non-scaling-stroke; stroke-width: 4; }
.node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; background: none; border: 0; gap: 2px; }
.node .num { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px; background: radial-gradient(circle at 35% 30%, #6fb5ff, #2152b8); border: 3px solid #fff; box-shadow: 0 6px 16px #0008; transition: transform .15s; }
.node.cleared .num { background: radial-gradient(circle at 35% 30%, #ffe48a, #f19a1b); color: #4a2500; }
.node.boss .num { width: 74px; height: 74px; font-size: 30px; background: radial-gradient(circle at 35% 30%, #ff8aa0, #b3203d); }
.node.locked .num { background: #4a5670; filter: grayscale(1); }
.node.sel .num { transform: scale(1.15); box-shadow: 0 0 0 5px var(--gold), 0 6px 18px #000a; }
.node small { background: #0b1838d0; padding: 1px 8px; border-radius: 99px; font-size: 12px; white-space: nowrap; }
.node .stars .star { font-size: 14px; }
.stage-panel { padding: 18px; } .stage-panel h3 { font-size: 24px; margin: 0; } .eyebrow { color: var(--gold); font-size: 13px; margin: 0; }
.enemy-row { display: flex; gap: 8px; flex-wrap: wrap; }
.enemy { display: flex; flex-direction: column; align-items: center; background: #0003; border-radius: 12px; padding: 6px; width: 92px; text-align: center; }
.enemy img { width: 64px; height: 56px; object-fit: contain; } .enemy small { font-size: 11px; color: var(--muted); } .enemy b { font-size: 13px; }
.enemy.boss { border: 1px solid var(--red); background: #ff5f7322; }
.conds { margin: 0; padding-left: 4px; list-style: none; font-size: 14px; } .rewards { color: var(--gold); }
.stage-panel .go { width: 100%; margin-top: 10px; }

/* ---------- setup / pickers ---------- */
.setup-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.setup-opts { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
.teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.vs { align-self: center; font-size: 34px; font-weight: 900; color: var(--gold); text-shadow: 0 3px 0 #7a3c00; }
.team-col { background: #0003; border-radius: 16px; padding: 12px; border: 2px solid transparent; display: flex; flex-direction: column; gap: 8px; }
.team-col.t0 h3 { color: var(--blue); } .team-col.t1 h3 { color: var(--red); }
.team-col.editing { border-color: var(--gold); }
.slots { display: flex; gap: 8px; flex-wrap: wrap; }
.slot { width: 110px; height: 120px; border-radius: 14px; border: 2px dashed var(--line); background: #0003; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.slot.filled { border-style: solid; background: linear-gradient(180deg, #2a4f9e66, #0003); }
.slot img { width: 92px; height: 78px; object-fit: contain; } .slot .plus { font-size: 34px; color: var(--muted); }
.slot .x { position: absolute; top: 4px; right: 6px; font-size: 12px; opacity: .6; }
.slot.boss { border-color: var(--red); }
.pick-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pick { width: 118px; padding: 8px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel2); display: flex; flex-direction: column; align-items: center; transition: transform .12s; }
.pick:hover { transform: translateY(-3px); border-color: var(--c); }
.pick.active { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold); }
.pick img { width: 90px; height: 76px; object-fit: contain; } .pick small { font-size: 11px; color: var(--muted); }
.setup .start { align-self: center; min-width: 280px; }

/* ---------- lobby & room ---------- */
.lobby-body { display: grid; grid-template-columns: 360px 1fr; gap: 16px; }
.lobby-left { display: flex; flex-direction: column; gap: 12px; }
.create { display: grid; gap: 10px; }
.rooms-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lobby-rooms { padding: 16px; min-height: 400px; }
.room-list { display: flex; flex-direction: column; gap: 8px; }
.room-row { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 12px; align-items: center; background: #0003; border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.room-row.playing { opacity: .7; }
.rr-mode { font-size: 20px; font-weight: 800; color: var(--gold); text-align: center; } .rr-info small { display: block; color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 50px 10px; }
.room-code { display: flex; gap: 10px; align-items: center; } .room-code b { color: var(--gold); font-size: 20px; letter-spacing: 2px; }
.room-body { display: grid; grid-template-columns: 1fr 300px; gap: 16px; }
.room-main { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.room-opts { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.map-chip { width: 200px; height: 64px; border-radius: 12px; background-size: cover; background-position: center; display: flex; align-items: end; padding: 6px; border: 1px solid #fff4; }
.map-chip span { background: #0009; border-radius: 8px; padding: 2px 8px; font-size: 13px; }
.rslot { display: grid; grid-template-columns: 54px 1fr auto auto; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: #0003; border: 1px solid var(--line); min-height: 70px; }
.rslot img { width: 54px; height: 50px; object-fit: contain; } .rslot small { display: block; color: var(--muted); font-size: 12px; }
.rslot.me { border-color: var(--gold); } .rslot.ready .rs-state { color: var(--green); } .rs-state { font-size: 13px; color: var(--muted); }
.rslot.empty { grid-template-columns: 1fr auto auto; color: var(--muted); border-style: dashed; }
.rslot select { padding: 4px 6px; font-size: 12px; }
.room-actions { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.chat { padding: 14px; display: flex; flex-direction: column; max-height: 640px; }
.chat-log { flex: 1; overflow: auto; min-height: 260px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; padding-right: 4px; }
.msg.sys { color: var(--muted); font-size: 12px; font-style: italic; }
.chat-form { display: flex; gap: 6px; margin-top: 8px; } .chat-form input { flex: 1; min-width: 0; }

/* ---------- modal, toast, tables ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(3, 8, 25, .65); display: grid; place-items: center; z-index: 100; animation: fadein .2s; padding: 14px; }
.modal-back.out { opacity: 0; transition: opacity .2s; }
.modal { width: min(480px, 100%); max-height: 92vh; overflow: auto; background: linear-gradient(180deg, #17336f, #0d1f4a); border: 2px solid var(--line2); border-radius: 20px; box-shadow: 0 20px 60px #000a; padding: 18px; }
.modal.wide { width: min(780px, 100%); }
.modal-head { display: flex; justify-content: space-between; align-items: center; } .modal-head h2 { margin: 0; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
#toasts { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; pointer-events: none; align-items: center; }
.toast { background: #0d1f4af2; border: 1px solid var(--line2); padding: 10px 18px; border-radius: 12px; box-shadow: var(--shadow); animation: fadein .2s; font-size: 15px; max-width: 90vw; }
.toast.error { border-color: var(--red); background: #4a1020f2; } .toast.success { border-color: var(--green); } .toast.warn { border-color: var(--gold); }
.toast.out { opacity: 0; transition: opacity .4s; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 7px 8px; text-align: left; border-bottom: 1px solid #ffffff14; }
.table th { color: var(--muted); font-weight: 500; } .table tr.me { background: #ffcf5a22; }
.table img { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; }
.howto { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .howto > div { background: #0003; border-radius: 12px; padding: 10px; } .howto p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.settings { display: grid; gap: 12px; } .settings hr { border: 0; border-top: 1px solid var(--line); width: 100%; } .acct { display: grid; gap: 8px; }
.result { text-align: center; }
.result-title { font-size: 54px; font-weight: 900; background: linear-gradient(180deg, #fff6c8, #ffc340 60%, #ff8a1e); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #6a3500); animation: pop .5s cubic-bezier(.2, 1.6, .5, 1); }
.result.lose .result-title { background: linear-gradient(180deg, #e3ecff, #8aa2d6); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 4px 0 #1b2c55); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.result-stars .star { font-size: 52px; display: inline-block; animation: pop .5s backwards; } .result-stars .star:nth-child(2) { animation-delay: .2s; } .result-stars .star:nth-child(3) { animation-delay: .4s; }
.rewards-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.rewards-row span { background: #0004; border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; font-weight: 600; }
.rewards-row .lvup { background: var(--gold); color: #3a1d00; }
.result .stats tr.mvp { background: #ffcf5a1f; } .result em { background: var(--gold); color: #3a1d00; font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 6px; }
.first { color: var(--gold); font-weight: 700; }

/* ---------- battle ---------- */
.battle { position: absolute; inset: 0; overflow: hidden; background: #000; }
.arena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.arena-bg, .arena-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hud-top { position: absolute; top: 8px; left: 8px; right: 8px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; pointer-events: none; }
.team-bar { display: flex; gap: 6px; flex-wrap: wrap; pointer-events: auto; }
.team-bar.t1 { justify-content: flex-end; }
.chip { display: flex; align-items: center; gap: 6px; background: rgba(8, 20, 52, .8); border: 1px solid var(--line); border-radius: 12px; padding: 4px 8px 4px 4px; min-width: 128px; transition: transform .2s; }
.chip img { width: 36px; height: 36px; object-fit: cover; object-position: top; border-radius: 9px; background: #fff2; }
.chip b { font-size: 12px; display: block; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .bar { width: 80px; height: 6px; background: #fff2; border-radius: 9px; overflow: hidden; } .chip .bar i { display: block; height: 100%; transition: width .4s; }
.t0 .chip .bar i { background: var(--blue); } .t1 .chip .bar i { background: var(--red); }
.chip.active { border-color: var(--gold); transform: translateY(2px) scale(1.04); box-shadow: 0 0 12px #ffcf5a66; }
.chip.dead { opacity: .4; filter: grayscale(1); }
.center-box { display: flex; align-items: center; gap: 10px; background: rgba(8, 20, 52, .85); border: 1px solid var(--line2); border-radius: 16px; padding: 6px 12px; pointer-events: auto; }
.turn-no { font-size: 12px; color: var(--muted); font-weight: 600; writing-mode: horizontal-tb; }
.timer { position: relative; width: 48px; height: 48px; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 4; } .timer .bgc { stroke: #ffffff20; } .timer .fgc { stroke: var(--gold); stroke-dasharray: 119.4; stroke-linecap: round; transition: stroke-dashoffset .3s; }
.timer b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; }
.timer.low .fgc { stroke: var(--red); } .timer.low b { color: var(--red); animation: pulse .5s infinite alternate; }
@keyframes pulse { to { transform: scale(1.2); } }
.wind { display: flex; align-items: center; gap: 4px; min-width: 76px; } .wind-label { font-size: 12px; color: var(--muted); }
.wind .arrow { font-size: 22px; color: #9be3ff; display: inline-block; transition: transform .3s; } .wind b { font-size: 16px; }
.wind.strong .arrow { color: #ff9a6a; } .wind.calm { opacity: .4; }
.minimap { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); width: 300px; height: 56px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; }
.menu-btn { position: absolute; top: 140px; right: 10px; }
.banner { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; font-size: 44px; font-weight: 900; color: #fff; text-shadow: 0 4px 0 #1b2c55, 0 0 3px #000; pointer-events: none; transition: all .25s cubic-bezier(.2, 1.5, .5, 1); white-space: nowrap; }
.banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.banner.mine { color: var(--gold); text-shadow: 0 4px 0 #7a3c00, 0 0 3px #000; }
.banner.enemy { color: #ffd0d6; text-shadow: 0 4px 0 #6a1020; } .banner.skill { color: #e5d0ff; text-shadow: 0 4px 0 #3c1a7a, 0 0 3px #000; }
.status-line { position: absolute; bottom: 132px; left: 50%; transform: translateX(-50%); background: #0008; padding: 4px 14px; border-radius: 99px; font-size: 14px; pointer-events: none; }
.status-line:empty { display: none; }
.hud-bottom { position: absolute; left: 8px; right: 8px; bottom: 8px; display: grid; grid-template-columns: 250px 120px 1fr auto 210px; gap: 8px; align-items: stretch; background: linear-gradient(180deg, rgba(14, 32, 78, .9), rgba(8, 18, 46, .95)); border: 1px solid var(--line2); border-radius: 18px; padding: 8px; box-shadow: var(--shadow); transition: opacity .25s, filter .25s; }
.battle:not(.my-turn) .hud-bottom { filter: saturate(.4) brightness(.8); }
.battle:not(.my-turn) .hud-bottom button { pointer-events: none; }
.hero-card { display: flex; gap: 8px; align-items: center; }
.hc-portrait { width: 70px; height: 70px; border-radius: 14px; object-fit: cover; object-position: top; background: #fff2; border: 2px solid var(--gold); }
.hc-info { flex: 1; min-width: 0; } .hc-name { font-size: 16px; display: block; } .hc-class { font-size: 12px; color: var(--muted); display: block; margin-bottom: 4px; }
.bar { position: relative; height: 14px; background: #ffffff1a; border-radius: 9px; overflow: hidden; margin-top: 3px; }
.bar i { position: absolute; inset: 0 auto 0 0; transition: width .3s; } .bar span { position: relative; font-size: 10px; padding-left: 6px; line-height: 14px; font-weight: 600; }
.bar.hp i { background: linear-gradient(90deg, #2bd47a, #8cf5b4); } .bar.move { height: 9px; } .bar.move i { background: linear-gradient(90deg, #ffb238, #ffe08a); } .bar.move span { font-size: 8px; line-height: 9px; }
.aim-box { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 2px; }
.aim-box .mini-btn { width: 100%; height: 26px; font-size: 12px; }
.dial { position: relative; width: 70px; height: 52px; }
.dial svg { width: 70px; height: 70px; position: absolute; top: -12px; left: 0; overflow: visible; }
.dial-arc { fill: none; stroke: #ffffff30; stroke-width: 3; } .dial-needle { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
.ang-val { position: absolute; right: -6px; bottom: 0; font-size: 18px; }
.power-box { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.power-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); } .power-label b { color: #fff; font-size: 16px; }
.power-bar { position: relative; height: 24px; border-radius: 12px; background: #050e28; border: 1px solid var(--line); overflow: hidden; }
.power-bar .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #4fd1ff, #ffe066, #ff5a3c); }
.power-bar .last { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; box-shadow: 0 0 6px #fff; }
.power-bar em { position: absolute; top: 0; bottom: 0; width: 1px; background: #ffffff30; }
.weapons { display: flex; gap: 6px; flex-wrap: wrap; }
.wpn { position: relative; width: 44px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: #0004; padding: 2px; }
.wpn img { width: 100%; height: 100%; object-fit: contain; } .wpn small { position: absolute; top: 0; left: 3px; font-size: 9px; color: var(--muted); }
.wpn.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; background: #ffcf5a22; }
.actions { display: flex; flex-direction: column; gap: 6px; }
.skill-btn { display: grid; grid-template-columns: 36px auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; text-align: left; border-radius: 12px; border: 1px solid #b98aff; background: linear-gradient(180deg, #6b3fc4, #3c1f84); padding: 4px 10px 4px 4px; }
.skill-btn img { grid-row: span 2; width: 36px; height: 36px; object-fit: contain; } .skill-btn .sk-name { font-size: 13px; font-weight: 700; } .skill-btn small { font-size: 11px; color: #e5d0ff; }
.skill-btn.cooldown { filter: grayscale(.8); opacity: .6; } .skill-btn.armed { box-shadow: 0 0 0 3px var(--gold), 0 0 18px #b77bff; animation: pulse .6s infinite alternate; }
.items { display: flex; gap: 4px; }
.item-btn { position: relative; width: 38px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: #0004; font-size: 17px; }
.item-btn small { position: absolute; bottom: -2px; right: 2px; font-size: 10px; color: var(--gold); font-weight: 700; }
.fire-box { display: grid; grid-template-rows: auto 1fr auto; gap: 5px; }
.move-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; } .move-btns .mini-btn { height: 30px; }
.fire-btn { border-radius: 14px; border: 2px solid #ffd0a0; background: radial-gradient(circle at 50% 30%, #ff8a5a, #e0322a); font-size: 22px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 #7a1010; box-shadow: 0 4px 0 #8a1a10; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; touch-action: none; }
.fire-btn small { font-size: 10px; font-weight: 500; opacity: .85; } .fire-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #8a1a10; }
.skip-btn { border: 1px solid var(--line); background: #0004; border-radius: 9px; font-size: 12px; padding: 4px; }
.help-chip { position: absolute; bottom: 140px; right: 12px; font-size: 12px; color: #ffffffb0; background: #0006; padding: 4px 10px; border-radius: 99px; pointer-events: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .home { grid-template-columns: 1fr; height: auto; }
  .home-art { min-height: 260px; } .home-art > img { max-height: 380px; }
  .campaign-body, .lobby-body, .room-body, .heroes-layout { grid-template-columns: 1fr; }
  .hero-list { flex-direction: row; overflow: auto; } .hero-tile { min-width: 180px; }
  .hud-bottom { grid-template-columns: 1fr 110px 1fr; grid-template-rows: auto auto; }
  .hero-card { grid-column: 1; } .aim-box { grid-row: span 2; } .power-box { grid-column: 3; } .actions { grid-column: 1; flex-direction: row; } .fire-box { grid-column: 3; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .fire-box .move-btns { grid-column: span 2; } .help-chip, .minimap { display: none; }
  .status-line { bottom: 200px; }
}
@media (max-width: 760px) {
  .topbar { gap: 8px; padding: 0 8px; } .tb-news, .tb-cur span:nth-child(3), .tb-meta { display: none; }
  .brand { font-size: 16px; }
  .login-card { margin-top: -24px; padding: 18px; }
  .logo-big { font-size: 36px; }
  .hero-detail { grid-template-columns: 1fr; }
  .teams { grid-template-columns: 1fr; } .vs { text-align: center; }
  .page { padding: 12px; } .page-head h2 { font-size: 18px; }
  .hh canvas { width: 66px; height: 58px; } .hh b { font-size: 11px; }
  .hud-top { grid-template-columns: 1fr; } .team-bar { display: none; } .center-box { justify-self: center; }
  .hud-bottom { grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
  .hero-card { grid-column: span 2; } .hc-portrait { width: 44px; height: 44px; } .aim-box { grid-row: auto; grid-template-rows: auto; grid-template-columns: auto 1fr auto; align-items: center; } .dial { display: none; } .aim-box .ang-val { position: static; }
  .power-box { grid-column: span 2; } .actions { grid-column: 1; flex-direction: column; } .fire-box { grid-column: 2; }
  .weapons .wpn { width: 36px; height: 32px; }
  .banner { font-size: 28px; } .menu-btn { top: 70px; }
  .room-row { grid-template-columns: 50px 1fr auto; } .rr-count { display: none; }
  .howto { grid-template-columns: 1fr; }
  .world-map { min-height: 380px; } .node .num { width: 48px; height: 48px; font-size: 14px; } .node small { display: none; }
}
/* compact HUD for phones in landscape / short screens */
@media (max-height: 540px) {
  .hud-bottom { grid-template-columns: 140px minmax(0, 1fr) auto 150px; grid-template-rows: auto; padding: 5px; gap: 6px; left: 4px; right: 4px; bottom: 4px; border-radius: 14px; }
  .hud-bottom > * { grid-column: auto !important; grid-row: auto !important; }
  .hero-card, .help-chip, .minimap, .turn-no { display: none; }
  .aim-box { grid-template-columns: 38px 1fr 38px; grid-template-rows: auto; align-items: center; }
  .aim-box .mini-btn { height: 40px; } .dial { display: block; width: auto; height: auto; text-align: center; } .dial svg { display: none; } .aim-box .ang-val { position: static; font-size: 17px; }
  .power-box { gap: 4px; } .power-label { font-size: 11px; } .power-bar { height: 16px; }
  .wpn { width: 32px; height: 28px; }
  .actions { flex-direction: row; align-items: center; gap: 4px; }
  .skill-btn { grid-template-columns: 34px; padding: 3px; } .skill-btn .sk-name, .skill-btn small { display: none; } .skill-btn img { width: 34px; height: 34px; }
  .items { flex-wrap: wrap; max-width: 108px; gap: 3px; } .item-btn { width: 32px; height: 26px; font-size: 14px; }
  .fire-box { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 4px; }
  .fire-box .move-btns { grid-column: span 2; } .move-btns .mini-btn { height: 30px; }
  .fire-btn { font-size: 17px; padding: 4px; } .fire-btn small { display: none; } .skip-btn { font-size: 11px; }
  .hud-top { top: 4px; left: 4px; right: 4px; grid-template-columns: 1fr auto 1fr; }
  .team-bar { display: flex; } .chip { min-width: 0; padding: 3px; } .chip b { display: none; } .chip img { width: 26px; height: 26px; } .chip .bar { width: 34px; }
  .center-box { padding: 3px 8px; gap: 6px; } .timer { width: 36px; height: 36px; } .timer b { font-size: 14px; }
  .menu-btn { top: 50px; right: 6px; width: 32px; height: 32px; font-size: 14px; }
  .banner { font-size: 26px; top: 28%; } .status-line { bottom: 70px; font-size: 12px; }
  .topbar { height: 48px; } .screen { inset: 48px 0 0; } .tb-avatar { width: 34px; height: 34px; }
  .home { padding: 10px; gap: 10px; grid-template-columns: minmax(0, 1fr) 330px; height: 100%; } .home-art { min-height: 0; } .home-heroes { display: none; }
  .mode-card { padding: 10px 14px; } .mode-card b { font-size: 17px; } .mc-icon { font-size: 26px; } .panel { padding: 10px; } .pvp-btn { padding: 6px; } .pvp-btn b { font-size: 18px; } .home-nav button { padding: 4px; font-size: 11px; } .home-nav span { font-size: 18px; }
}
/* login: bigger heroes on narrow screens */
.hero-stage { margin-top: 10px; }
@media (max-width: 760px) {
  .login-wrap { padding: 16px 12px 24px; }
  .login-hero { width: calc(100% + 24px); overflow: hidden; }
  .hero-stage img { width: 175%; max-width: none; margin-left: -37.5%; }
  .login-card { margin-top: -30px; }
  .logo-big { font-size: 40px; } .logo-big span { font-size: 24px; }
}

/* ================= landing page (under the login box) ================= */
#screen-login { scroll-behavior: smooth; }
.login-wrap { min-height: 100vh; position: relative; }
.land-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; padding: 10px 24px; background: rgba(8, 20, 52, .9); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); margin-top: -60px; height: 60px; transform: translateY(-100%); opacity: 0; transition: transform .3s, opacity .3s; }
.land-nav.show { transform: none; opacity: 1; }
.land-brand { font-weight: 800; font-size: 18px; color: var(--text); text-decoration: none; letter-spacing: 1px; white-space: nowrap; } .land-brand b { color: var(--gold); }
.land-links { display: flex; gap: 4px; flex: 1; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.land-links a { color: #cfe0ff; text-decoration: none; padding: 6px 12px; border-radius: 99px; font-size: 14px; white-space: nowrap; }
.land-links a:hover { background: #ffffff14; color: var(--gold); }
.land-cta { text-decoration: none; }
.scroll-hint { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: -70px auto 30px; width: max-content; color: #cfe0ff; text-decoration: none; font-size: 13px; opacity: .85; }
.scroll-hint i { font-style: normal; font-size: 26px; line-height: 1; animation: bounceDown 1.6s infinite; color: var(--gold); }
@keyframes bounceDown { 50% { transform: translateY(6px); } }
.land-sec { max-width: 1180px; margin: 0 auto; padding: 60px 20px 30px; opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
.land-sec.in { opacity: 1; transform: none; }
.land-sec h2 { font-size: clamp(24px, 3.4vw, 36px); margin: 0 0 26px; text-shadow: 0 3px 14px #0009; }
.center { text-align: center; }
.eyebrow { color: var(--gold); font-weight: 600; letter-spacing: 2px; font-size: 13px; text-transform: uppercase; margin: 0 0 6px; }
/* story */
.story-card { padding: 34px clamp(20px, 5vw, 60px); text-align: center; background: linear-gradient(160deg, rgba(23, 51, 111, .92), rgba(10, 24, 60, .92)); position: relative; overflow: hidden; }
.story-card::after { content: ''; position: absolute; right: -60px; bottom: -40px; width: 320px; height: 320px; background: url(/assets/game/portraits/mewra.png) center/contain no-repeat; opacity: .12; pointer-events: none; }
.story-text { font-size: 17px; line-height: 1.9; color: #dbe7ff; max-width: 820px; margin: 0 auto 22px; }
.story-stats { display: flex; justify-content: center; gap: clamp(14px, 4vw, 48px); flex-wrap: wrap; }
.story-stats b { display: block; font-size: 34px; color: var(--gold); line-height: 1.1; } .story-stats span { color: var(--muted); font-size: 14px; }
/* heroes */
.lh-tabs { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.lh-tab { width: 150px; padding: 10px 8px 12px; border-radius: 18px; border: 2px solid var(--line); background: linear-gradient(180deg, rgba(30, 60, 130, .8), rgba(10, 24, 60, .9)); display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .15s, border-color .15s, box-shadow .15s; }
.lh-tab img { width: 120px; height: 100px; object-fit: contain; filter: drop-shadow(0 6px 10px #0007); transition: transform .2s; }
.lh-tab b { font-size: 17px; } .lh-tab small { color: var(--muted); font-size: 12px; }
.lh-tab:hover { transform: translateY(-4px); } .lh-tab:hover img { transform: scale(1.06); }
.lh-tab.active { border-color: var(--c); box-shadow: 0 0 0 2px var(--c), 0 10px 26px rgba(0, 0, 0, .4); }
.lh-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; padding: 22px; border-top: 4px solid var(--c); opacity: 0; transition: opacity .5s; }
.lh-detail.in { opacity: 1; }
.lh-stage { background: radial-gradient(circle at 50% 75%, color-mix(in srgb, var(--c) 45%, #1d3c84), #10224f 70%); border-radius: 18px; display: flex; flex-direction: column; align-items: center; padding: 10px; min-height: 300px; justify-content: center; }
.lh-stage canvas { width: 100%; max-width: 460px; aspect-ratio: 460/360; }
.lh-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.lh-acts button { border: 1px solid var(--line); background: #0006; border-radius: 99px; padding: 5px 12px; font-size: 13px; }
.lh-acts button.active { background: var(--gold); color: #3a1d00; }
.lh-info h3 { font-size: 32px; margin: 0; color: var(--c); }
.lh-quote { font-style: italic; color: var(--gold); margin: 4px 0 8px; }
.lh-lore { line-height: 1.85; color: #dbe7ff; margin: 0 0 12px; }
.lh-stat { display: grid; grid-template-columns: 92px 1fr 38px; gap: 10px; align-items: center; font-size: 14px; margin: 5px 0; }
.lh-stat div { height: 9px; background: #ffffff18; border-radius: 9px; overflow: hidden; } .lh-stat i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); }
.lh-kit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.lh-kit > div { display: flex; gap: 8px; align-items: center; background: #0003; border-radius: 12px; padding: 8px; }
.lh-kit img { width: 40px; height: 40px; object-fit: contain; } .lh-kit small { display: block; color: var(--muted); font-size: 12px; }
/* how to play */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.step { position: relative; padding: 20px; opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s; }
.step.in { opacity: 1; transform: none; }
.step:nth-child(2) { transition-delay: .08s; } .step:nth-child(3) { transition-delay: .16s; } .step:nth-child(4) { transition-delay: .24s; } .step:nth-child(5) { transition-delay: .32s; } .step:nth-child(6) { transition-delay: .4s; }
.step-n { position: absolute; top: 14px; right: 16px; font-size: 40px; font-weight: 900; color: #ffffff12; }
.step-i { font-size: 34px; } .step h3 { margin: 6px 0; font-size: 19px; } .step p { margin: 0; color: var(--muted); line-height: 1.7; font-size: 14px; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.ctrl { padding: 20px; } .ctrl h3 { margin: 0 0 10px; }
.ctrl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ctrl li { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; font-size: 15px; color: #dbe7ff; }
.ctrl kbd { display: inline-block; min-width: 30px; text-align: center; padding: 3px 7px; margin-right: 3px; border-radius: 7px; background: linear-gradient(180deg, #2c4c95, #1a3170); border: 1px solid #5a86e0; box-shadow: 0 3px 0 #0d1d48; font-weight: 700; }
.ctrl kbd.wide { min-width: 90px; }
.pad { display: inline-block; padding: 4px 12px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); font-weight: 700; text-align: center; }
.pad.red { background: radial-gradient(circle at 50% 30%, #ff8a5a, #e0322a); border-color: #ffd0a0; } .pad.purple { background: linear-gradient(180deg, #6b3fc4, #3c1f84); }
/* modes */
.modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mode { padding: 22px; opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s, box-shadow .2s; }
.mode.in { opacity: 1; transform: none; }
.mode > span { font-size: 38px; } .mode h3 { margin: 8px 0 6px; font-size: 20px; } .mode p { margin: 0; color: var(--muted); line-height: 1.7; font-size: 14px; }
.mode.hot { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 10px 30px rgba(255, 170, 40, .18); }
.mode-tags { display: flex; gap: 6px; margin-top: 10px; } .mode-tags i { font-style: normal; font-weight: 800; color: var(--gold); background: #ffcf5a1f; border: 1px solid #ffcf5a66; border-radius: 8px; padding: 2px 10px; }
/* devices */
.devices { display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px, 4vw, 50px); flex-wrap: wrap; }
.dev p { text-align: center; color: #dbe7ff; margin: 12px 0 0; }
.dev .screen-frame img { display: block; width: 100%; }
.dev.laptop { width: min(640px, 100%); }
.dev.laptop .screen-frame { border: 12px solid #141b2e; border-bottom-width: 16px; border-radius: 16px 16px 4px 4px; box-shadow: 0 20px 40px #0008; overflow: hidden; }
.dev.laptop .base { height: 14px; margin: 0 -6%; background: linear-gradient(180deg, #c7cedd, #8890a3); border-radius: 0 0 16px 16px; }
.dev.phone { width: min(420px, 100%); }
.dev.phone .screen-frame { border: 10px solid #141b2e; border-left-width: 22px; border-right-width: 22px; border-radius: 30px; box-shadow: 0 20px 40px #0008; overflow: hidden; }
.dev-points { list-style: none; padding: 0; margin: 28px auto 0; max-width: 820px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dev-points li { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; color: #dbe7ff; }
.land-foot { text-align: center; padding: 40px 20px 50px; color: var(--muted); }
.land-foot .btn { text-decoration: none; display: inline-block; margin-bottom: 14px; }
/* landing on tablets/phones */
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; } .modes { grid-template-columns: 1fr 1fr; } .lh-detail { grid-template-columns: 1fr; }
  .controls, .dev-points { grid-template-columns: 1fr; } .land-links { display: none; } .land-nav { justify-content: space-between; }
}
@media (max-width: 560px) {
  .steps, .modes { grid-template-columns: 1fr; } .lh-tab { width: calc(33% - 8px); padding: 6px 4px; } .lh-tab img { width: 76px; height: 64px; } .lh-tab b { font-size: 14px; } .lh-tab small { display: none; }
  .lh-kit { grid-template-columns: 1fr; } .ctrl li { grid-template-columns: 100px 1fr; font-size: 14px; } .land-sec { padding: 44px 14px 20px; }
  .story-text { font-size: 15px; } .lh-info h3 { font-size: 26px; } .scroll-hint { margin-top: -50px; }
}

/* ================= mobile: rotate prompt during battle ================= */
.rotate-hint { position: fixed; inset: 0; z-index: 500; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(6, 14, 40, .96); text-align: center; padding: 24px; }
.rotate-hint .phone-ico { width: 64px; height: 110px; border: 5px solid var(--gold); border-radius: 14px; animation: rotPhone 2s ease-in-out infinite; }
@keyframes rotPhone { 0%, 20% { transform: rotate(0); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
.rotate-hint b { font-size: 20px; } .rotate-hint small { color: var(--muted); }
@media (orientation: portrait) and (max-width: 820px) { body[data-screen="battle"] .rotate-hint { display: flex; } }

.lore { background: #0003; border-radius: 12px; padding: 8px 12px; margin: 8px 0; } .lore summary { cursor: pointer; color: var(--gold); font-weight: 600; } .lore p { line-height: 1.8; color: #dbe7ff; margin: 8px 0 0; }
@media (max-width: 760px) { .home-heroes { gap: 0; padding-left: 4px; padding-right: 4px; } .hh { flex: 1; min-width: 0; } .hh canvas { width: 100%; max-width: 70px; height: auto; aspect-ratio: 150/130; } }

/* two skills with individual cooldowns */
.actions .skills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.skill-btn { position: relative; overflow: hidden; }
.skill-btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--cd, 0%); background: rgba(5, 10, 30, .65); transition: height .4s; pointer-events: none; }
.skill-btn .cd-num { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 36px; text-align: center; font-style: normal; font-size: 22px; font-weight: 900; color: #fff; text-shadow: 0 2px 4px #000; z-index: 2; }
.skill-btn.ult { border-color: #ffcf5a; background: linear-gradient(180deg, #a8521e, #6a2a12); }
.skill-btn.cooldown { filter: none; opacity: 1; } .skill-btn.cooldown img { filter: grayscale(1) brightness(.6); }
@media (max-height: 540px) { .actions .skills { grid-template-columns: 1fr 1fr; gap: 3px; } }

/* ===== wardrobe / shop ===== */
.hd-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.hd-tabs button { border: 1px solid var(--line); background: #0004; border-radius: 99px; padding: 6px 14px; font-weight: 600; }
.hd-tabs button.active { background: var(--gold); color: #3a1d00; }
.wardrobe .slots-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.wardrobe .eq-slot { border: 2px dashed var(--line); border-radius: 14px; padding: 8px 6px; text-align: center; background: #0003; cursor: pointer; min-height: 84px; }
.wardrobe .eq-slot.on { border-style: solid; border-color: var(--gold); background: #ffcf5a14; }
.wardrobe .eq-slot.cur { box-shadow: 0 0 0 2px var(--blue); }
.wardrobe .eq-slot span { font-size: 28px; display: block; } .wardrobe .eq-slot small { display: block; font-size: 11px; color: var(--muted); } .wardrobe .eq-slot b { font-size: 12px; display: block; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-height: 320px; overflow: auto; padding-right: 4px; }
.shop-item { position: relative; border: 2px solid var(--rc, var(--line)); border-radius: 14px; padding: 8px; background: linear-gradient(180deg, #ffffff10, #0003); display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center; }
.shop-item .ic { font-size: 30px; } .shop-item b { font-size: 13px; } .shop-item small { font-size: 11px; color: var(--muted); }
.shop-item .rar { font-size: 10px; font-weight: 700; color: var(--rc); letter-spacing: 1px; }
.shop-item .st { font-size: 11px; color: var(--green); min-height: 14px; }
.shop-item .btn { padding: 5px 8px; font-size: 12px; width: 100%; }
.shop-item.equipped { box-shadow: 0 0 0 3px var(--gold); }
.skill-list { display: grid; gap: 6px; margin: 10px 0; }
.skill-list > div { display: flex; gap: 10px; align-items: center; background: #0003; border-radius: 12px; padding: 8px; }
.skill-list img { width: 40px; height: 40px; object-fit: contain; } .skill-list small { display: block; color: var(--muted); }
.skill-list .cdtag { margin-left: auto; white-space: nowrap; background: #ffffff14; border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; font-size: 12px; }
.skill-list .ulttag { color: var(--gold); font-size: 11px; font-weight: 700; }
@media (max-width: 700px) { .wardrobe .slots-row { grid-template-columns: repeat(3, 1fr); } }
.wr-quick { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }

/* ---------- home dressing room (3D turntable) ---------- */
.dress-host { display: block; background: radial-gradient(120% 90% at 40% 55%, #2a5aa8 0%, #142d63 55%, #0b1838 100%); }
.dress { --c: #7fd8ff; height: 100%; min-height: inherit; display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); }
.dr-heroes { grid-column: 1 / -1; display: flex; gap: 6px; padding: 10px 12px; background: #0b183899; border-bottom: 1px solid #ffffff1a; overflow-x: auto; scrollbar-width: none; }
.dr-heroes button { flex: 1 0 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 99px; border: 2px solid #ffffff22; background: #ffffff0d; color: #fff; font-weight: 600; transition: .15s; }
.dr-heroes button img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: center 20%; background: #0003; }
.dr-heroes button.active { border-color: var(--c); background: color-mix(in srgb, var(--c) 28%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 45%, transparent); }
.dr-stage { position: relative; min-height: 0; overflow: hidden; background: radial-gradient(60% 55% at 50% 62%, color-mix(in srgb, var(--c) 38%, transparent), transparent 70%), url(/assets/game/ui/home-bg2.jpg) center 35% / cover; }
.dr-stage::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0b1838b3, #0b183866 40%, #0b1838cc); pointer-events: none; }
.dr-3d { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.dr-3d.grabbing { cursor: grabbing; } .dr-3d.flat { object-fit: contain; }
.dr-tag { position: absolute; left: 14px; top: 12px; display: flex; flex-direction: column; pointer-events: none; text-shadow: 0 2px 6px #000a; }
.dr-tag b { font-size: 24px; line-height: 1.1; } .dr-tag small { color: #d8e4ff; font-size: 12px; }
.dr-tip { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 12px; color: #fff; background: #0008; padding: 4px 12px; border-radius: 99px; pointer-events: none; transition: opacity .6s; white-space: nowrap; }
.dr-tip.gone { opacity: 0; }
.dr-acts { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.dr-acts button { width: 38px; height: 38px; border-radius: 12px; border: 1px solid #ffffff33; background: #0b1838b3; color: #fff; font-size: 18px; }
.dr-acts button.active, .dr-acts button:hover { border-color: var(--c); }
.dr-try { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: #0b1838e6; border: 1px solid var(--c); padding: 6px 8px 6px 14px; border-radius: 99px; box-shadow: var(--shadow); white-space: nowrap; font-size: 13px; max-width: calc(100% - 20px); }
.dr-try span { overflow: hidden; text-overflow: ellipsis; }
.dr-side { display: flex; flex-direction: column; min-height: 0; background: #0b1838d9; border-left: 1px solid #ffffff1a; }
.dr-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 8px; border-bottom: 1px solid #ffffff14; }
.dr-slots button { border: 2px dashed #ffffff30; background: #0003; border-radius: 12px; padding: 4px 0 3px; color: #fff; display: flex; flex-direction: column; align-items: center; }
.dr-slots button span { font-size: 22px; line-height: 1.2; } .dr-slots button small { font-size: 10px; color: var(--muted); }
.dr-slots button.on { border-style: solid; border-color: #ffcf5a88; background: #ffcf5a14; }
.dr-slots button.cur { border-color: var(--c); box-shadow: 0 0 0 1px var(--c) inset; }
.dr-items { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; align-content: start; }
.dr-item { position: relative; border: 2px solid color-mix(in srgb, var(--rc) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 14%, transparent), #0003); border-radius: 12px; padding: 6px 4px 5px; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; transition: transform .12s; }
.dr-item:hover { transform: translateY(-2px); }
.dr-item .ic { font-size: 26px; line-height: 1.15; } .dr-item b { font-size: 12px; line-height: 1.2; } .dr-item em { font-style: normal; font-size: 10px; color: var(--rc); } .dr-item small { font-size: 11px; color: #ffe08a; }
.dr-item.on { border-color: #ffcf5a; box-shadow: 0 0 0 2px #ffcf5a55; } .dr-item.on small { color: var(--green); }
.dr-item.try { outline: 2px dashed #fff; outline-offset: 1px; }
.dr-quick { display: flex; gap: 4px; padding: 8px; border-top: 1px solid #ffffff14; } .dr-quick .btn { flex: 1; padding-left: 4px; padding-right: 4px; font-size: 12px; }
@media (max-width: 1100px) { .dress-host { min-height: 560px; } }
@media (max-width: 760px) {
  .dress { grid-template-columns: 1fr; grid-template-rows: auto 340px auto; }
  .dress-host { min-height: 0; }
  .dr-heroes button span { display: none; } .dr-heroes button { padding: 3px; flex: 1; justify-content: center; }
  .dr-side { border-left: 0; border-top: 1px solid #ffffff1a; } .dr-items { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 300px; }
}
/* phones held sideways: compact two-column room */
@media (max-height: 540px) and (orientation: landscape) {
  .home-art.dress-host { min-height: 0; height: 100%; }
  .dress { grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: auto minmax(0, 1fr); }
  .dr-heroes { padding: 4px 6px; } .dr-heroes button { padding: 2px; } .dr-heroes button span { display: none; } .dr-heroes button img { width: 26px; height: 26px; }
  .dr-tag b { font-size: 16px; } .dr-acts button { width: 30px; height: 30px; font-size: 14px; }
  .dr-slots { padding: 4px; } .dr-slots button span { font-size: 16px; } .dr-slots button small { display: none; }
  .dr-items { padding: 4px; gap: 4px; } .dr-item .ic { font-size: 18px; } .dr-item b { font-size: 10px; } .dr-item em { display: none; }
  .dr-quick { padding: 4px; } .dr-quick .btn { font-size: 10px; padding: 3px; } .dr-try { bottom: 30px; font-size: 11px; }
}

/* hero page: skill cards */
.skill-cards { display: grid; gap: 8px; margin: 8px 0 14px; }
.skill-card { --sc: #7fd8ff; text-align: left; color: #fff; border: 2px solid color-mix(in srgb, var(--sc) 55%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--sc) 18%, transparent), #0004); border-radius: 16px; padding: 10px 12px; transition: transform .12s; }
.skill-card:hover { transform: translateY(-2px); box-shadow: 0 0 16px color-mix(in srgb, var(--sc) 35%, transparent); }
.skill-card.ult { border-color: #ffcf5a; }
.sc-head { display: flex; align-items: center; gap: 10px; } .sc-head img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 6px var(--sc)); }
.sc-head b { font-size: 17px; display: block; } .sc-head small { color: var(--muted); font-size: 11px; }
.sc-key { margin-left: auto; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: #0005; border: 1px solid var(--sc); white-space: nowrap; }
.skill-card.ult .sc-key { border-color: #ffcf5a; color: #ffcf5a; }
.skill-card p { margin: 6px 0; font-size: 14px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 5px; } .sc-chips span { font-size: 12px; background: #ffffff14; border: 1px solid #ffffff22; border-radius: 99px; padding: 2px 9px; } .sc-chips .cd { background: #ffcf5a1f; border-color: #ffcf5a55; color: #ffe08a; }
/* weather */
.weather-chip { display: flex; align-items: center; gap: 4px; padding: 2px 10px 2px 6px; border-radius: 99px; background: #ffffff14; border: 1px solid #ffffff22; white-space: nowrap; cursor: help; }
.weather-chip .wi { font-size: 18px; } .weather-chip .wn { font-size: 13px; font-weight: 600; } .weather-chip small { font-size: 10px; color: var(--muted); }
.banner.weather { color: #e8f2ff; text-shadow: 0 0 18px #7fd8ff, 0 4px 0 #1b1030; }
@media (max-width: 760px) { .weather-chip .wn, .weather-chip small { display: none; } .weather-chip { padding: 2px 6px; } }
@media (max-height: 540px) { .weather-chip .wn, .weather-chip small { display: none; } }
/* weapon details */
.dr-item .wsum { font-style: normal; font-size: 10px; color: #cfe3ff; line-height: 1.25; display: block; padding: 0 2px; }
.dr-item .winfo { font-size: 10px; color: var(--gold); margin-top: 1px; }
.wpn-detail { --wc: #ffd27a; }
.wd-stage { position: relative; border-radius: 16px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--wc) 50%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--wc) 25%, transparent); }
.wd-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 560 / 230; }
.wd-tag { position: absolute; left: 12px; top: 10px; display: flex; flex-direction: column; text-shadow: 0 2px 6px #000c; pointer-events: none; }
.wd-tag .rar { font-size: 11px; font-weight: 700; color: var(--rc); } .wd-tag b { font-size: 22px; } .wd-tag small { font-size: 12px; color: #d8e4ff; }
.wd-desc { margin: 10px 0 6px; color: #e6eeff; }
.wd-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 8px 0 12px; }
.wd-bars > div { display: grid; grid-template-columns: 96px 1fr 30px; align-items: center; gap: 8px; font-size: 13px; }
.wd-bars i { height: 8px; border-radius: 99px; background: #ffffff14; overflow: hidden; } .wd-bars em { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--wc), #fff3c4); }
.wd-bars b { text-align: right; font-size: 12px; color: var(--muted); }
.wd-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wd-pc h4 { margin: 0 0 6px; } .wd-pc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wd-pc li { display: flex; gap: 8px; align-items: flex-start; padding: 7px 9px; border-radius: 12px; background: #0003; }
.wd-pc li.pro { border-left: 3px solid #5fe39a; } .wd-pc li.con { border-left: 3px solid #ff6b7d; }
.wd-pc li span { font-size: 20px; line-height: 1; } .wd-pc li b { display: block; font-size: 14px; } .wd-pc li small { color: var(--muted); font-size: 12px; }
@media (max-width: 600px) { .wd-bars, .wd-pc { grid-template-columns: 1fr; } .wd-tag b { font-size: 17px; } }
.modal:has(.wpn-detail) { padding-bottom: 0; }
.modal:has(.wpn-detail) .modal-actions { position: sticky; bottom: 0; margin: 10px -18px 0; padding: 12px 18px; background: linear-gradient(180deg, #0d1f4ae6, #0d1f4a); border-top: 1px solid #ffffff1a; }
.wd-pc li { padding: 5px 9px; }
/* quick sound button + panel */
.snd-btn.muted { opacity: .6; }
.battle-snd { position: absolute; top: 186px; right: 10px; }
@media (max-width: 760px) { .battle-snd { top: 116px; } }
@media (max-height: 540px) { .battle-snd { top: 50px; right: 44px; width: 32px; height: 32px; font-size: 14px; } }
.snd-panel { position: fixed; z-index: 120; width: 230px; display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: linear-gradient(180deg, #17336f, #0d1f4a); border: 2px solid var(--line2); box-shadow: 0 14px 40px #000a; animation: fadein .15s; }
.snd-panel label { display: grid; gap: 4px; font-size: 13px; } .snd-panel input[type=range] { width: 100%; }
.snd-panel .snd-mute { border: 1px solid var(--line); background: #ffffff14; color: #fff; border-radius: 12px; padding: 8px; font-weight: 700; }
.login-snd { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 48px; height: 48px; border-radius: 50%; font-size: 22px; background: #0b1838cc; border: 2px solid #ffffff44; box-shadow: 0 6px 20px #0008; }
body:not([data-screen="login"]) .login-snd { display: none; }
/* ultimate skill cut-in */
.ult-cutin { --uc: #ffd27a; position: absolute; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; display: grid; align-items: center; }
.ult-cutin::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, #0b0420cc 100%); animation: ucfade .3s both; }
.uc-lines { position: absolute; inset: -20%; background: repeating-linear-gradient(-12deg, transparent 0 22px, color-mix(in srgb, var(--uc) 35%, transparent) 22px 25px, transparent 25px 60px, #ffffff22 60px 62px); animation: ucspeed .35s linear infinite, ucfade .3s both; mix-blend-mode: screen; }
.uc-band { position: relative; height: clamp(120px, 30vh, 220px); display: flex; align-items: center; gap: 4%; padding: 0 8%; transform: skewY(-6deg);
  background: linear-gradient(90deg, #0b1838f2, color-mix(in srgb, var(--uc) 70%, #0b1838) 55%, #0b1838f2); border-top: 4px solid var(--uc); border-bottom: 4px solid var(--uc);
  box-shadow: 0 0 40px var(--uc), inset 0 0 60px #000a; animation: ucband .45s cubic-bezier(.2, 1.2, .4, 1) both; }
.uc-band img { height: 150%; margin-top: -4%; filter: drop-shadow(0 0 18px var(--uc)) drop-shadow(0 6px 0 #0008); transform: skewY(6deg); animation: ucpic .6s .1s cubic-bezier(.2, 1.3, .4, 1) both; }
.uc-text { transform: skewY(6deg); display: flex; flex-direction: column; animation: uctext .5s .2s cubic-bezier(.2, 1.5, .4, 1) both; }
.uc-text small { font-size: clamp(13px, 2vw, 18px); color: #fff; opacity: .85; letter-spacing: 2px; }
.uc-text b { font-size: clamp(30px, 6.5vw, 72px); font-weight: 900; line-height: 1.05; color: #fff; text-shadow: 0 0 20px var(--uc), 0 5px 0 #1b1030, 0 0 2px #000; }
.uc-text em { font-style: normal; font-size: clamp(12px, 1.8vw, 18px); color: var(--uc); font-weight: 700; letter-spacing: 4px; text-transform: uppercase; }
.ult-cutin.uc-foe .uc-band { flex-direction: row-reverse; text-align: right; transform: skewY(6deg); } .ult-cutin.uc-foe .uc-band img, .ult-cutin.uc-foe .uc-text { transform: skewY(-6deg); }
.ult-cutin.uc-foe .uc-band { animation-name: ucbandR; } .ult-cutin.uc-foe .uc-band img { animation-name: ucpicR; }
.ult-cutin.out { opacity: 0; transition: opacity .3s; } .ult-cutin.out .uc-band { transform: skewY(-6deg) scaleY(0); transition: transform .3s; }
@keyframes ucfade { from { opacity: 0; } }
@keyframes ucspeed { to { background-position: 200px 0; } }
@keyframes ucband { from { transform: skewY(-6deg) translateX(-110%); } }
@keyframes ucbandR { from { transform: skewY(6deg) translateX(110%); } }
@keyframes ucpic { from { transform: skewY(6deg) translateX(-60%) scale(.8); opacity: 0; } }
@keyframes ucpicR { from { transform: skewY(-6deg) translateX(60%) scale(.8); opacity: 0; } }
@keyframes uctext { from { transform: skewY(6deg) scale(2.2); opacity: 0; } }
/* world chat */
.chat-panel { flex: 1 1 auto; min-height: 150px; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
.chat-head { display: flex; justify-content: space-between; align-items: baseline; } .chat-head h3 { margin: 0; font-size: 16px; } .chat-head small { color: var(--muted); font-size: 11px; }
.chat-list { flex: 1 1 0; min-height: 90px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; scrollbar-width: thin; }
.chat-empty { margin: auto; text-align: center; }
.cm { display: flex; gap: 7px; align-items: flex-start; }
.cm img, .cm .cm-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: center 20%; background: #0004; flex: none; display: grid; place-items: center; font-size: 16px; border: 1px solid #ffffff22; }
.cm-b { background: #ffffff10; border-radius: 4px 12px 12px 12px; padding: 4px 9px 5px; max-width: calc(100% - 40px); }
.cm-top { display: flex; gap: 6px; align-items: baseline; } .cm-top b { font-size: 12px; color: #9be3ff; } .cm-top small { font-size: 10px; color: var(--muted); }
.cm-b p { margin: 1px 0 0; font-size: 13px; line-height: 1.35; word-break: break-word; }
.cm.me { flex-direction: row-reverse; } .cm.me .cm-b { background: #ffcf5a26; border-radius: 12px 4px 12px 12px; } .cm.me .cm-top b { color: var(--gold); }
.cm.sys { justify-content: center; } .cm.sys span { font-size: 12px; color: #ffe08a; background: #ffcf5a14; border: 1px solid #ffcf5a33; padding: 2px 10px; border-radius: 99px; text-align: center; }
.chat-quick { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .chat-quick button { flex: none; font-size: 11px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); background: #ffffff0d; color: #fff; }
.chat-form { display: flex; gap: 6px; } .chat-form input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: #0004; color: #fff; font: inherit; }
@media (max-width: 1100px) { .chat-panel { min-height: 320px; max-height: 420px; } }
@media (max-height: 540px) { .chat-panel { min-height: 260px; } }
.chat-panel { overflow: hidden; } .chat-list { min-height: 40px; }
@media (min-width: 1101px) and (max-height: 860px) {
  .home-side { gap: 8px; } .home-side .panel { padding: 10px 12px; } .home-side .panel h3 { margin-bottom: 6px; }
  .pvp-btn { padding: 6px; } .pvp-btn b { font-size: 22px; } .mode-card { padding: 10px 16px; } .mc-icon { font-size: 28px; }
  .home-nav button { padding: 6px 4px; } .home-nav span { font-size: 20px; }
  .chat-quick { display: none; }
}
/* ranks */
.rank-badge { --rk: #d08a4e; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 5px; border-radius: 99px; background: color-mix(in srgb, var(--rk) 18%, #0b1838); border: 1px solid color-mix(in srgb, var(--rk) 60%, transparent); white-space: nowrap; vertical-align: middle; }
.rank-badge i { font-style: normal; font-size: 15px; } .rank-badge b { font-size: 12px; color: var(--rk); } .rank-badge em { font-style: normal; font-size: 11px; color: var(--muted); }
.rank-badge.sm { padding: 1px 7px 1px 4px; } .rank-badge.sm i { font-size: 12px; } .rank-badge.sm b { font-size: 11px; }
.rslot .rank-badge { margin-top: 2px; }
.rank-open { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; margin-bottom: 8px; }
.rank-card { --rk: #d08a4e; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--rk) 22%, transparent), #0003); border: 1px solid color-mix(in srgb, var(--rk) 55%, transparent); transition: transform .12s; }
.rank-card:hover { transform: translateY(-1px); }
.rk-ic { font-size: 30px; filter: drop-shadow(0 0 8px var(--rk)); } .rk-info { flex: 1; min-width: 0; } .rk-info b { color: var(--rk); font-size: 16px; display: block; } .rk-info small { font-size: 11px; color: var(--muted); }
.rk-bar { height: 6px; border-radius: 99px; background: #ffffff14; overflow: hidden; margin-top: 4px; } .rk-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--rk), #fff); border-radius: 99px; }
.rk-more { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ranked-tag, .casual-tag { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 99px; vertical-align: middle; }
.ranked-tag { background: #ffcf5a26; color: var(--gold); border: 1px solid #ffcf5a66; } .casual-tag { background: #ffffff10; color: #cfe3ff; border: 1px solid #ffffff2a; }
.searching { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: #0003; border: 1px dashed #ffcf5a66; font-size: 13px; }
.searching .spin { width: 14px; height: 14px; border: 2px solid #ffcf5a44; border-top-color: var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rank-result { --rk: #d08a4e; margin: 10px auto; padding: 10px 14px; border-radius: 16px; max-width: 380px; background: color-mix(in srgb, var(--rk) 14%, #0004); border: 1px solid color-mix(in srgb, var(--rk) 50%, transparent); }
.rr-main { display: flex; align-items: center; justify-content: center; gap: 10px; } .rr-delta { font-size: 26px; font-weight: 900; }
.rank-result.up .rr-delta { color: #5fe39a; } .rank-result.down .rr-delta { color: #ff6b7d; }
.rr-promo { text-align: center; font-weight: 800; color: var(--gold); margin-bottom: 6px; animation: rkpop .6s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes rkpop { from { transform: scale(2); opacity: 0; } } .rr-demo { text-align: center; color: #ff9aa6; margin-bottom: 6px; }
.casual-note { text-align: center; color: #cfe3ff; }
.rank-table .rt-tiers { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 10px 0; }
.rank-table .rt-tiers div { text-align: center; padding: 8px 2px; border-radius: 12px; background: color-mix(in srgb, var(--rk) 16%, #0003); border: 1px solid color-mix(in srgb, var(--rk) 45%, transparent); }
.rank-table .rt-tiers i { font-style: normal; font-size: 26px; display: block; } .rank-table .rt-tiers b { color: var(--rk); font-size: 12px; display: block; } .rank-table .rt-tiers small { font-size: 10px; color: var(--muted); }
.rank-table tr td:first-child b { color: var(--rk); } .rank-table tr.me { background: #ffcf5a1f; outline: 1px solid #ffcf5a66; }
@media (max-width: 600px) { .rank-table .rt-tiers { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1101px) and (max-height: 860px) { .rank-card { padding: 5px 10px; } .rk-ic { font-size: 24px; } .rank-open { margin-bottom: 6px; } }
@media (min-width: 1101px) and (max-height: 860px) { .home-side .pvp-btn small { display: none; } .chat-panel { min-height: 120px; } }
.searching .ai-note { flex-basis: 100%; color: #cfe3ff; }
/* friends / profile / gender */
.g-ic { font-weight: 900; margin-left: 2px; font-size: .95em; }
.tb-friends { position: relative; } .tb-friends em { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: #ff4d6d; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; display: none; place-items: center; box-shadow: 0 0 0 2px #0b1838; }
.tb-friends.has em { display: grid; } .tb-friends.has { animation: frpulse 1.6s ease-in-out infinite; }
@keyframes frpulse { 50% { box-shadow: 0 0 0 4px #ff4d6d55; } }
.friends .fr-tabs { display: flex; gap: 6px; margin-bottom: 10px; } .fr-tabs button { flex: 1; border: 1px solid var(--line); background: #0003; color: #fff; border-radius: 99px; padding: 7px; font-weight: 600; font-family: inherit; }
.fr-tabs button.on { background: var(--gold); color: #3a1d00; border-color: transparent; } .fr-tabs em { font-style: normal; background: #ff4d6d; color: #fff; border-radius: 99px; padding: 0 6px; font-size: 11px; } .fr-tabs em:empty { display: none; }
.fr-body { max-height: 56vh; overflow: auto; display: grid; gap: 6px; align-content: start; } .fr-body h4 { margin: 8px 0 2px; }
.fr-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #ffffff0c; border: 1px solid #ffffff14; }
.fr-row img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center 20%; cursor: pointer; background: #0003; }
.fr-info { flex: 1; min-width: 0; cursor: pointer; } .fr-info b { display: block; } .fr-info small { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 5px; }
.fr-btns { display: flex; gap: 4px; }
.on-dot, .off-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; } .on-dot { background: #5fe39a; box-shadow: 0 0 6px #5fe39a; } .off-dot { background: #6b7a99; }
.fr-empty { text-align: center; padding: 26px 10px; color: var(--muted); }
.fr-search { display: flex; gap: 6px; } .fr-search input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: #0004; color: #fff; font: inherit; }
.fr-results { display: grid; gap: 6px; margin-top: 6px; } .my-id { user-select: all; color: var(--gold); }
.profile { display: flex; gap: 16px; align-items: center; } .profile > img { width: 110px; height: 110px; border-radius: 22px; object-fit: cover; object-position: center 20%; border: 2px solid var(--line2); background: #0003; }
.profile h2 { margin: 0; } .profile p { margin: 4px 0; } .profile .muted { display: flex; align-items: center; gap: 6px; }
.pf-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .pf-stats span { font-size: 12px; background: #ffffff10; border-radius: 99px; padding: 3px 10px; }
.pf-rel { color: var(--gold); font-weight: 600; }
.gender-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.gender-pick button { --gc: #9fb6d9; border: 2px solid color-mix(in srgb, var(--gc) 50%, transparent); background: color-mix(in srgb, var(--gc) 12%, #0003); color: #fff; border-radius: 16px; padding: 14px 4px; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .12s; }
.gender-pick button:hover { transform: translateY(-2px); } .gender-pick button.on { border-color: var(--gc); box-shadow: 0 0 14px color-mix(in srgb, var(--gc) 50%, transparent); }
.gender-pick i { font-style: normal; font-size: 30px; color: var(--gc); font-weight: 900; } .gender-pick b { font-size: 13px; }
@media (max-width: 560px) { .gender-pick { grid-template-columns: repeat(2, 1fr); } .profile { flex-direction: column; text-align: center; } .profile .muted, .pf-stats { justify-content: center; } }
.cm-name, .slot-name, .lb-name { cursor: pointer; } .cm-name:hover, .slot-name:hover, .lb-name:hover { text-decoration: underline; }
.invite-pop { position: fixed; z-index: 130; top: 70px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: linear-gradient(180deg, #1d3d80, #0d1f4a); border: 2px solid var(--gold); box-shadow: 0 14px 40px #000a; animation: fadein .2s; max-width: calc(100vw - 20px); }
.invite-pop img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: center 20%; } .invite-pop small { display: block; color: var(--muted); font-size: 12px; } .invite-pop.out { opacity: 0; transition: opacity .25s; }
@media (max-width: 760px) { .tb-friends { width: 36px; height: 36px; } }
.invite-pop { width: min(420px, calc(100vw - 20px)); } .invite-pop > div { flex: 1; min-width: 0; }
@media (max-width: 480px) {
  .topbar .brand { font-size: 14px; } .tb-player { gap: 5px; } .tb-cur { padding: 2px 8px; gap: 6px; font-size: 12px; }
  .topbar .icon-btn { width: 32px; height: 32px; font-size: 15px; } .tb-friends { width: 32px; height: 32px; } .tb-avatar { width: 30px !important; height: 30px !important; }
}
@media (max-width: 380px) { .topbar .brand .lg { transform: scale(.85); } }

.home-nav .friends-btn { position: relative; } .home-nav .friends-btn em { position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: #ff4d6d; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; display: none; place-items: center; }
.home-nav .friends-btn.has em { display: grid; } .home-nav .friends-btn.has { border-color: #ff4d6d88; animation: frpulse 1.6s ease-in-out infinite; }

/* ---------- taunt tombstone shop ---------- */
.tomb-intro { margin: 0 0 10px; }
.tomb-main { display: grid; grid-template-columns: 360px 1fr; gap: 14px; align-items: start; }
.tomb-prev canvas { width: 100%; border-radius: 14px; display: block; border: 1px solid var(--line); }
.tomb-info { padding: 10px 2px; }
.tomb-title { display: flex; align-items: center; gap: 8px; } .tomb-title b { font-size: 20px; }
.tomb-info .rar, .tomb-card small { color: var(--rc); }
.tomb-info .rar { border: 1px solid var(--rc); border-radius: 99px; padding: 1px 10px; font-size: 12px; }
.tomb-quote { font-size: 22px; font-weight: 800; color: #ffe36b; margin: 8px 0 4px; text-shadow: 0 2px 0 #3a1424; }
.tomb-info .ok { color: #7be09a; } .tomb-info .warn, .tomb-act .warn { color: #ff8fa3; }
.tomb-act { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.tomb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; max-height: 470px; overflow: auto; padding: 2px; }
.tomb-card { background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; }
.tomb-card canvas { width: 100%; border-radius: 8px; }
.tomb-card b { font-size: 13px; line-height: 1.2; text-align: center; } .tomb-card small { font-size: 12px; font-weight: 700; }
.tomb-card.sel { border-color: #ffd23f; box-shadow: 0 0 0 3px #ffd23f44; }
.tomb-card.lock canvas { filter: grayscale(.8) brightness(.7); }
.tomb-card.eq::after { content: '✅'; position: absolute; top: 4px; right: 6px; }
.tomb-card.own small { color: #7be09a; }
@media (max-width: 760px) { .tomb-main { grid-template-columns: 1fr; } .tomb-grid { max-height: none; grid-template-columns: repeat(3, 1fr); } .tomb-quote { font-size: 18px; } }

.dr-acts .dr-tomb { margin-top: 8px; border-color: #ffd23f99; background: linear-gradient(#4a2a6acc, #2a1640cc); box-shadow: 0 0 10px #ffd23f55; animation: tombGlow 2.4s ease-in-out infinite; }
.dr-acts .dr-tomb:hover { border-color: #ffd23f; transform: scale(1.08); }
@keyframes tombGlow { 50% { box-shadow: 0 0 16px #ffd23faa; } }

/* ---------- ultimate styles: cut-in variants ---------- */
.uc-preview-host { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.uc-preview-host .ult-cutin { position: absolute; }
.uc-demo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.uc-quote { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); max-width: 86%; padding: 10px 22px; border-radius: 22px; background: #fffef6; color: #1b1030; font-weight: 900; font-size: clamp(18px, 3.4vw, 34px); text-align: center; border: 4px solid var(--uc); box-shadow: 0 8px 0 #0006, 0 0 30px var(--uc); animation: ucquote .45s .3s cubic-bezier(.2, 1.6, .4, 1) both; z-index: 3; }
.uc-quote::after { content: ''; position: absolute; left: 22%; top: -16px; border: 9px solid transparent; border-bottom: 9px solid var(--uc); }
@keyframes ucquote { from { transform: translateX(-50%) scale(0) rotate(-8deg); opacity: 0; } }
.ult-cutin .uc-text b { position: relative; }

/* burst: spinning sunburst, hero zooms from the centre */
.ucs-burst::before { background: radial-gradient(circle, color-mix(in srgb, var(--uc) 45%, #fff) 0 8%, var(--uc) 20%, #12082ae6 70%); }
.uc-sun { position: absolute; left: 50%; top: 45%; width: 260vmax; height: 260vmax; margin: -130vmax; background: repeating-conic-gradient(from 0deg, #ffffff38 0 6deg, transparent 6deg 18deg); animation: ucspin 4s linear infinite, ucfade .3s both; }
.uc-ring { position: absolute; left: 50%; top: 45%; width: 20vmin; height: 20vmin; margin: -10vmin; border-radius: 50%; border: 10px solid #fff; animation: ucring .7s ease-out both; }
.ucs-burst .uc-band { background: none; border: 0; box-shadow: none; transform: none; flex-direction: column; justify-content: center; height: 80%; gap: 0; animation: none; }
.ucs-burst .uc-band img { height: 62%; transform: none; animation: ucpop .6s cubic-bezier(.2, 1.6, .4, 1) both; filter: drop-shadow(0 0 24px #fff) drop-shadow(0 0 40px var(--uc)); }
.ucs-burst .uc-text { transform: none; text-align: center; align-items: center; animation: ucshake .5s .25s both; }
@keyframes ucspin { to { transform: rotate(360deg); } }
@keyframes ucring { from { transform: scale(.2); opacity: 1; } to { transform: scale(9); opacity: 0; } }
@keyframes ucpop { from { transform: scale(0) rotate(-20deg); } }
@keyframes ucshake { 0% { transform: scale(3); opacity: 0; } 40% { transform: scale(1); opacity: 1; } 55% { transform: translate(-8px, 4px); } 70% { transform: translate(6px, -4px); } 85% { transform: translate(-3px, 2px); } }

/* manga: black & white comic panels slam in */
.ucs-manga::before { background: #fff; animation: ucfade .15s both; }
.uc-manga { position: absolute; inset: 0; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; padding: 10px; }
.uc-manga .mp { position: relative; overflow: hidden; border: 6px solid #111; background: radial-gradient(circle, #0003 1.4px, transparent 1.6px) 0 0 / 9px 9px, #fff; animation: ucslam .28s cubic-bezier(.2, 1.4, .4, 1) both; }
.uc-manga .mp1 { grid-row: span 2; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.uc-manga .mp1 img { position: absolute; bottom: -4%; left: 6%; height: 108%; filter: grayscale(1) contrast(1.5) drop-shadow(6px 6px 0 #111); }
.uc-manga .mp2 { animation-delay: .16s; clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%); }
.uc-manga .mp2 img { position: absolute; width: 230%; left: -60%; top: -28%; filter: grayscale(1) contrast(1.7); }
.uc-manga .mp3 { animation-delay: .3s; background: repeating-conic-gradient(from 0deg at 50% 50%, #111 0 4deg, #fff 4deg 12deg); display: grid; place-items: center; clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%); }
.uc-manga .mp3 b { font-size: clamp(40px, 9vw, 110px); font-weight: 900; color: var(--uc); -webkit-text-stroke: 4px #111; transform: rotate(-10deg); text-shadow: 6px 6px 0 #111; animation: ucpop .4s .4s cubic-bezier(.2, 1.8, .4, 1) both; }
.ucs-manga .uc-band { position: absolute; left: 0; right: 0; bottom: 4%; height: auto; padding: 8px 6%; background: #111; border-color: #111; box-shadow: none; transform: rotate(-3deg); animation: ucband .35s .45s cubic-bezier(.2, 1.2, .4, 1) both; }
.ucs-manga .uc-band > img { display: none; }
.ucs-manga .uc-text, .ucs-manga.uc-foe .uc-text { transform: none; } .ucs-manga .uc-text b { color: #fff; text-shadow: 4px 4px 0 var(--uc); }
.ucs-manga .uc-quote { bottom: auto; top: 6%; left: 72%; font-size: clamp(15px, 2.6vw, 28px); border-color: #111; border-radius: 50% / 40%; padding: 18px 26px; }
@keyframes ucslam { from { transform: scale(1.6) rotate(4deg); opacity: 0; } }

/* glitch: cyber neon with RGB split */
.ucs-glitch::before { background: linear-gradient(#050816ee, #12052aee); }
.uc-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #ffffff10 0 2px, transparent 2px 4px); animation: ucflick .12s steps(2) infinite; z-index: 2; }
.uc-grid { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 55%; background: linear-gradient(transparent 0 94%, var(--uc) 94%) 0 0 / 100% 40px, linear-gradient(90deg, transparent 0 96%, var(--uc) 96%) 0 0 / 60px 100%; transform: perspective(300px) rotateX(60deg); opacity: .5; animation: ucgrid .5s linear infinite; }
.ucs-glitch .uc-band { background: #0008; border-color: #0ff; border-width: 2px 0; box-shadow: 0 0 24px #0ff8, 0 0 60px #f0f6; animation: ucglitchIn .5s steps(6) both; }
.uc-gimg { position: relative; height: 150%; aspect-ratio: 1; margin-top: -4%; transform: skewY(6deg); flex: none; }
.uc-gimg img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: contain; }
.uc-gimg .g1, .uc-gimg .g2 { mix-blend-mode: screen; opacity: .7; }
.uc-gimg .g1 { filter: drop-shadow(0 0 0 #f0f) hue-rotate(90deg) saturate(3); animation: ucrgb1 .3s steps(3) infinite; }
.uc-gimg .g2 { filter: hue-rotate(200deg) saturate(3); animation: ucrgb2 .26s steps(3) infinite; }
.ucs-glitch .uc-text b { color: #e8ffff; text-shadow: 3px 0 #f0f, -3px 0 #0ff, 0 0 18px #0ff; animation: ucjit .2s steps(2) infinite; }
.ucs-glitch .uc-text em { color: #0ff; font-family: monospace; }
.ucs-glitch .uc-quote { background: #050816; color: #0ff; border: 2px solid #0ff; border-radius: 4px; font-family: monospace, sans-serif; box-shadow: 0 0 20px #0ff8; }
.ucs-glitch .uc-quote::after { display: none; }
@keyframes ucflick { 50% { opacity: .6; } }
@keyframes ucgrid { to { background-position: 0 40px, 0 0; } }
@keyframes ucglitchIn { 0% { clip-path: inset(40% 0 50% 0); transform: skewY(-6deg) translateX(-30px); } 30% { clip-path: inset(10% 0 70% 0); transform: skewY(-6deg) translateX(20px); } 60% { clip-path: inset(60% 0 10% 0); } 100% { clip-path: inset(0); } }
@keyframes ucrgb1 { 0% { transform: translate(-6px, 2px); } 50% { transform: translate(5px, -3px); } 100% { transform: translate(-2px, 0); } }
@keyframes ucrgb2 { 0% { transform: translate(6px, -2px); } 50% { transform: translate(-4px, 3px); } 100% { transform: translate(3px, 1px); } }
@keyframes ucjit { 50% { transform: translateX(3px); } }

/* flame: fire rises, embers fly */
.ucs-flame::before { background: radial-gradient(ellipse at 50% 120%, #ffb347 0, #ff4d1f 25%, #5a0c0ccc 55%, #12040acc 100%); }
.uc-fire { position: absolute; left: -10%; right: -10%; bottom: -10%; height: 70%; background: radial-gradient(ellipse at 20% 100%, #ffe36b 0, #ff8a3d 22%, transparent 48%), radial-gradient(ellipse at 60% 100%, #fff3a0 0, #ff6a2a 25%, transparent 50%), radial-gradient(ellipse at 90% 100%, #ffd23f 0, #ff4d1f 20%, transparent 45%); filter: blur(6px); animation: ucfire .3s ease-in-out infinite alternate; mix-blend-mode: screen; }
.ult-cutin .em { position: absolute; bottom: -5%; width: 8px; height: 8px; border-radius: 50%; background: #ffe36b; box-shadow: 0 0 12px 4px #ff8a3d; animation: ucember 1.4s ease-out infinite; transform: scale(var(--s)); }
.ucs-flame .uc-band { background: linear-gradient(90deg, #2a0606f2, #ff5a1fcc 50%, #2a0606f2); border-color: #ffd23f; box-shadow: 0 0 50px #ff6a2a; }
.ucs-flame .uc-band img { filter: drop-shadow(0 0 14px #ffb347) drop-shadow(0 0 30px #ff4d1f) sepia(.25) saturate(1.4); }
.ucs-flame .uc-text b { color: #fff6c0; text-shadow: 0 0 10px #ff8a3d, 0 0 30px #ff4d1f, 0 5px 0 #3a0a0a; }
@keyframes ucfire { to { transform: scaleY(1.12) translateY(-3%); } }
@keyframes ucember { from { transform: translateY(0) scale(var(--s)); opacity: 1; } to { transform: translateY(-90vh) translateX(40px) scale(0); opacity: 0; } }

/* shadow: blood-red sky, silhouette that reveals */
.ucs-shadow::before { background: radial-gradient(circle at 50% 40%, #d01030 0, #5a0418 40%, #0a0208f2 75%); }
.uc-moon { position: absolute; left: 50%; top: 30%; width: 40vmin; height: 40vmin; margin: -20vmin; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff2f2, #ff5a6a 60%, #a0102a); box-shadow: 0 0 80px 30px #ff2a4a88; animation: ucpop .8s cubic-bezier(.2, 1.2, .4, 1) both; }
.ucs-shadow .uc-band { background: linear-gradient(90deg, #000e, #1a0008e6 50%, #000e); border-color: #ff2a4a; box-shadow: 0 0 40px #ff2a4a; }
.ucs-shadow .uc-band img { animation: ucpic .6s .1s cubic-bezier(.2, 1.3, .4, 1) both, ucreveal 1.5s .1s both; }
.ucs-shadow.uc-foe .uc-band img { animation: ucpicR .6s .1s cubic-bezier(.2, 1.3, .4, 1) both, ucreveal 1.5s .1s both; }
.ucs-shadow .uc-text b { color: #fff; text-shadow: 0 0 16px #ff2a4a, 0 0 40px #ff0030, 0 5px 0 #000; letter-spacing: 2px; }
.ucs-shadow .uc-quote { background: #12030a; color: #ffd0d8; border-color: #ff2a4a; }
@keyframes ucreveal { 0%, 45% { filter: brightness(0) drop-shadow(0 0 14px #ff2a4a); } 100% { filter: brightness(1) drop-shadow(0 0 18px #ff2a4a); } }

/* cute: pastel, bouncing, hearts float up */
.ucs-cute::before { background: radial-gradient(circle at 50% 50%, #fff0f8ee, #ffc6e2ee 50%, #c7a8ffee); }
.ult-cutin .ht { position: absolute; bottom: -10%; font-size: calc(26px * var(--s)); font-style: normal; animation: ucheart 1.6s ease-in infinite; }
.ucs-cute .uc-band { background: linear-gradient(90deg, #ffffffcc, color-mix(in srgb, var(--uc) 45%, #fff) 50%, #ffffffcc); border: 4px dashed #ff7ab0; box-shadow: 0 0 30px #ff9ac0; border-radius: 40px; }
.ucs-cute .uc-band img { animation: ucpic .6s .1s cubic-bezier(.2, 1.3, .4, 1) both, ucbounce .5s .7s ease-in-out infinite alternate; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 6px 0 #ff7ab0aa); }
.ucs-cute .uc-text small { color: #b03070; } .ucs-cute .uc-text b { color: #ff4f9a; text-shadow: 0 4px 0 #fff, 0 0 20px #fff; } .ucs-cute .uc-text em { color: #a060ff; }
.ucs-cute .uc-quote { border-color: #ff7ab0; color: #b03070; border-radius: 30px; }
@keyframes ucheart { from { transform: translateY(0) rotate(-10deg); opacity: 1; } to { transform: translateY(-100vh) rotate(20deg); opacity: 0; } }
@keyframes ucbounce { to { transform: skewY(6deg) translateY(-8%) scale(1.04); } }

/* thunder: white strobes, lightning bolts */
.ucs-thunder::before { background: radial-gradient(circle at 50% 30%, #3a4a8a, #0a0f2af2 70%); }
.uc-flash { position: absolute; inset: 0; background: #fff; animation: ucstrobe .9s steps(1) both; z-index: 2; mix-blend-mode: screen; }
.uc-bolt { position: absolute; top: 0; left: 18%; width: 16%; height: 100%; fill: #fff; filter: drop-shadow(0 0 12px #9fd8ff) drop-shadow(0 0 30px var(--uc)); opacity: 0; animation: ucbolt .9s steps(1) both; }
.uc-bolt.b2 { left: 68%; width: 12%; animation-delay: .25s; }
.ucs-thunder .uc-band { background: linear-gradient(90deg, #0a1438f2, #2a5ad0cc 50%, #0a1438f2); border-color: #bfe6ff; box-shadow: 0 0 40px #7fd8ff; }
.ucs-thunder .uc-band img { animation: ucpic .6s .1s cubic-bezier(.2, 1.3, .4, 1) both, uczap .15s steps(2) infinite; }
.ucs-thunder.uc-foe .uc-band img { animation: ucpicR .6s .1s cubic-bezier(.2, 1.3, .4, 1) both, uczap .15s steps(2) infinite; }
.ucs-thunder .uc-text b { color: #fff; text-shadow: 0 0 10px #bfe6ff, 0 0 30px #4fc3ff, 0 5px 0 #0a1438; }
@keyframes ucstrobe { 0% { opacity: .9; } 8% { opacity: 0; } 30% { opacity: .7; } 36% { opacity: 0; } 55% { opacity: .5; } 60%, 100% { opacity: 0; } }
@keyframes ucbolt { 0% { opacity: 1; } 10% { opacity: 0; } 30% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes uczap { 0% { filter: drop-shadow(0 0 10px #bfe6ff) drop-shadow(0 0 2px #fff); } 100% { filter: drop-shadow(0 0 22px #4fc3ff) brightness(1.15); } }

/* ---------- ultimate style shop ---------- */
.us-heroes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.us-heroes button { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 99px; border: 2px solid var(--line); background: var(--panel); }
.us-heroes button.on { border-color: #ffd23f; background: #ffd23f22; }
.us-heroes img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.us-intro { margin: 4px 0 10px; } .us-intro .warn { color: #ffb347; }
.us-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; padding: 2px; }
.us-card { border: 2px solid var(--line); border-radius: 14px; padding: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--uc) 22%, transparent), var(--panel) 60%); display: flex; flex-direction: column; gap: 6px; }
.us-card.eq { border-color: #7be09a; box-shadow: 0 0 0 3px #7be09a33; } .us-card.lock { opacity: .7; }
.us-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; } .us-top b { font-size: 16px; }
.us-top .rar { color: var(--rc); border: 1px solid var(--rc); border-radius: 99px; padding: 0 8px; font-size: 11px; white-space: nowrap; }
.us-quote { margin: 0; font-weight: 800; font-size: 17px; color: #ffe36b; }
.us-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; } .us-tags span { font-size: 11px; background: #0004; border-radius: 99px; padding: 2px 8px; }
.us-act { display: flex; justify-content: space-between; align-items: center; margin-top: auto; gap: 6px; } .us-act .eqd { color: #7be09a; font-weight: 700; } .us-act .lk { color: #ff8fa3; font-weight: 700; }
.dr-acts .dr-ult { border-color: #ff7ad999; background: linear-gradient(#6a2a5acc, #2a1640cc); }
.us-h { margin: 12px 0 6px; font-size: 16px; } .us-h small { font-weight: 400; color: var(--muted); font-size: 12px; }
.us-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; padding: 2px; }
.usk { border: 2px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(135deg, color-mix(in srgb, var(--uc) 26%, transparent), var(--panel) 65%); }
.usk.eq { border-color: #ffd23f; box-shadow: 0 0 0 3px #ffd23f33; } .usk.lock { opacity: .72; }
.usk .tp { font-size: 11px; background: #0005; border-radius: 99px; padding: 1px 8px; color: var(--uc); border: 1px solid var(--uc); white-space: nowrap; }
.usk-d { margin: 0; font-size: 13px; }
.ult-shop .us-list { max-height: none; }
.ult-shop { max-height: 70vh; overflow: auto; padding-right: 4px; }
.sk-demo { width: 100%; aspect-ratio: 300 / 140; border-radius: 10px; display: block; border: 1px solid #ffffff22; background: #24345e; }
.skill-card .sk-demo { height: 130px; width: auto; max-width: 100%; margin: 0 auto 8px; }
.skill-card.alt { opacity: .82; }
.hd-info h4 .ult-go { margin-left: 6px; vertical-align: middle; }

/* ---------------- สมรภูมิ 3D (Worms-3D-style mode) ---------------- */
#screen-battle3d { inset: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#screen-battle3d.playing { overflow: hidden; }
body[data-screen="battle3d"] .topbar { display: none; }
.b3-beta { display: inline-block; font-size: 11px; font-weight: 700; background: #ff4f7b; color: #fff; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.mode-card.b3-card { width: 100%; padding: 12px 14px; background: linear-gradient(135deg, #5fd0ff, #3a7bff); border-color: #bfe9ff; color: #04163d; box-shadow: 0 5px 0 #1d46a8, var(--shadow); }
.mode-card.b3-card b { font-size: 18px; }
.b3-setup { max-width: 860px; margin: 0 auto; padding: 18px 16px 40px; color: #fff; }
.b3-setup h2 { margin: 0; font-size: 26px; } .b3-setup h3 { margin: 16px 0 8px; font-size: 16px; }
.b3s-head { display: flex; align-items: center; gap: 12px; }
.b3s-row { display: flex; flex-wrap: wrap; gap: 8px; }
.b3-chip { padding: 8px 14px; border-radius: 12px; border: 1px solid #ffffff40; background: #0a1a40cc; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.b3-chip.on { background: linear-gradient(135deg, #ffd34f, #ff9a2b); color: #3a1d00; border-color: #fff3c0; }
.b3s-heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.b3s-hero { position: relative; border-radius: 14px; border: 2px solid #ffffff30; background: #0a1a40cc; color: #fff; padding: 6px; cursor: pointer; font: inherit; }
.b3s-hero img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: 10px; background: #fff2; display: block; }
.b3s-hero b { display: block; font-size: 13px; margin-top: 4px; }
.b3s-hero.on { border-color: #ffd34f; box-shadow: 0 0 0 3px #ffd34f55; }
.b3s-hero.on::after { content: attr(data-n); position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; background: #ffd34f; color: #3a1d00; font-weight: 800; display: grid; place-items: center; }
.b3s-go { margin-top: 20px; width: 100%; font-size: 20px; padding: 14px; position: sticky; bottom: 10px; z-index: 3; }
@media (max-height: 560px) { .b3-setup { padding-top: 10px; } .b3-setup h2 { font-size: 20px; } .b3-setup h3 { margin: 10px 0 6px; } .b3-setup > p { font-size: 13px; margin: 6px 0; } .b3s-heroes { grid-template-columns: repeat(5, minmax(0, 92px)); gap: 6px; } .b3s-hero b { font-size: 11px; } .b3-chip { padding: 6px 10px; font-size: 13px; } .b3s-go { margin-top: 12px; padding: 10px; font-size: 18px; } }
.b3s-help { margin-top: 14px; font-size: 13px; opacity: .85; line-height: 1.6; }

.b3 { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 70%); user-select: none; -webkit-user-select: none; touch-action: none; color: #fff; }
.b3-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.b3-tags, .b3-fx { position: absolute; inset: 0; pointer-events: none; }
.b3-tag { position: absolute; left: 0; top: 0; text-align: center; white-space: nowrap; transform-origin: 50% 100%; }
.b3-tag b { font-size: 12px; text-shadow: 0 1px 2px #000, 0 0 4px #000; display: block; }
.b3-tag span { display: block; width: 56px; height: 7px; margin: 2px auto 0; border-radius: 4px; background: #0008; border: 1px solid #fff8; overflow: hidden; }
.b3-tag i { display: block; height: 100%; background: #3fa2ff; transition: width .3s; }
.b3-tag.t1 i { background: #ff5a5a; } .b3-tag.cur b { color: #ffe066; }
.b3-float { position: absolute; left: 0; top: 0; font-weight: 900; font-size: 20px; text-shadow: 0 2px 0 #000, 0 0 6px #000; }
.b3-float.big { font-size: 28px; }
.b3-top { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; pointer-events: none; }
.b3-turn { display: flex; align-items: center; gap: 8px; background: #081436cc; border-radius: 14px; padding: 4px 12px 4px 4px; }
.b3-turn img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; object-position: top; background: #fff2; }
.b3-turn span { border-left: 4px solid var(--tc); padding-left: 8px; } .b3-turn b { display: block; font-size: 14px; } .b3-turn small { font-size: 11px; opacity: .85; }
.b3-timer { min-width: 46px; height: 46px; border-radius: 50%; background: #081436cc; display: grid; place-items: center; font-size: 22px; font-weight: 800; border: 2px solid #fff6; }
.b3-timer.low { color: #ff6b6b; border-color: #ff6b6b; animation: b3pulse .5s infinite alternate; }
@keyframes b3pulse { to { transform: scale(1.1); } }
.b3-wind { display: flex; flex-direction: column; align-items: center; background: #081436cc; border-radius: 14px; padding: 4px 10px; min-width: 64px; }
.b3-wind i { font-style: normal; font-size: 22px; color: #9fe0ff; transition: transform .4s; display: block; } .b3-wind b { font-size: 11px; }
.b3-left { position: absolute; left: 12px; top: 10px; background: #081436cc; border-radius: 12px; padding: 6px 10px; font-size: 13px; pointer-events: none; }
.b3-stam { width: 110px; height: 8px; border-radius: 4px; background: #0008; margin-top: 4px; overflow: hidden; } .b3-stam i { display: block; height: 100%; background: linear-gradient(90deg, #6dff8f, #ffe066); }
.b3-weap { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 8px; }
.b3-w { position: relative; display: flex; flex-direction: column; align-items: center; width: 92px; padding: 6px 4px; border-radius: 14px; border: 2px solid #ffffff40; background: #081436d9; color: #fff; font: inherit; cursor: pointer; }
.b3-w span { font-size: 22px; line-height: 1; } .b3-w b { font-size: 11px; max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b3-w small { position: absolute; top: 2px; left: 6px; font-size: 10px; opacity: .6; }
.b3-w em { position: absolute; inset: 0; border-radius: 12px; background: #000a; display: grid; place-items: center; font-style: normal; font-size: 22px; font-weight: 800; }
.b3-w.on { border-color: #ffd34f; background: #4a3a08e0; } .b3-w.ult { border-color: #ff7ad0aa; } .b3-w.ult.on { border-color: #ff7ad0; background: #5a0f48e0; }
.b3-w:disabled { opacity: .7; cursor: default; }
.b3-power { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); width: min(460px, 64vw); opacity: 0; pointer-events: none; transition: opacity .15s; cursor: pointer; touch-action: none; }
.b3-power.show { pointer-events: auto; }
.b3-btn.b3-fire.charging { background: radial-gradient(circle, #ff8a3d, #d9341f); box-shadow: 0 0 0 4px #ffe06688, 0 0 22px #ff6a3d; animation: fireCharge .5s infinite alternate; }
@keyframes fireCharge { to { transform: scale(1.08); } }
.b3-power.show { opacity: .78; } .b3-power.show.charging { opacity: 1; }
.pw-head { text-align: center; font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000c; margin-bottom: 3px; min-height: 18px; }
.pw-track { position: relative; height: 18px; border-radius: 9px; background: linear-gradient(90deg, #0009, #000b); border: 2px solid #fffa; box-shadow: 0 2px 8px #0006;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), #ffffff40 calc(10% - 1px) 10%); }
.pw-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: linear-gradient(90deg, #7fd8ff, #2f7bff); box-shadow: 0 0 8px #2f7bffaa; z-index: 1; }
.pw-pre { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: linear-gradient(90deg, #ffb36688, #ff7a1acc); pointer-events: none; }
.pw-set { z-index: 2; }
.pw-last, .pw-foe { position: absolute; top: -7px; bottom: -7px; width: 0; font-style: normal; }
.pw-last::before { content: ''; position: absolute; left: -6px; top: -2px; border: 6px solid transparent; border-top: 8px solid #fff; filter: drop-shadow(0 1px 1px #000); }
.pw-last::after { content: ''; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; background: #fff; }
.pw-foe::before { content: '🎯'; position: absolute; left: -9px; bottom: -16px; font-size: 14px; }
.pw-foe::after { content: ''; position: absolute; left: -1.5px; top: 4px; bottom: 4px; width: 3px; background: #ff4b4b; box-shadow: 0 0 6px #ff4b4b; }
.pw-foe.over::after { background: #ff9a3d; box-shadow: 0 0 6px #ff9a3d; }
.pw-ticks { position: relative; height: 26px; }
.pw-ticks span { position: absolute; top: 2px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; line-height: 1.05; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.pw-ticks span:last-child { transform: translateX(-80%); }
.pw-ticks b { font-size: 10px; opacity: .75; } .pw-ticks small { font-size: 12px; font-weight: 800; color: #ffe066; }
.b3-msg { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); font-size: 22px; font-weight: 800; text-shadow: 0 2px 0 #000, 0 0 8px #000; opacity: 0; pointer-events: none; white-space: nowrap; }
.b3-msg.show { animation: b3msg 2.2s ease forwards; }
@keyframes b3msg { 0% { opacity: 0; transform: translate(-50%, 10px); } 12%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.b3-btn { position: absolute; border-radius: 50%; border: 2px solid #fff8; background: #081436cc; color: #fff; font: inherit; font-size: 26px; cursor: pointer; display: grid; place-items: center; touch-action: none; }
.b3-tr { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; } .b3-tr .b3-btn { position: static; width: 44px; height: 44px; font-size: 20px; } .b3-view.on { background: #ffd34f; color: #3a1d00; }
.b3-fire, .b3-jump, .b3-joy { display: none; }
.b3.touch .b3-fire { display: grid; right: 22px; bottom: 26px; width: 92px; height: 92px; background: radial-gradient(circle at 40% 35%, #ff9a4a, #e0401e); border-color: #ffe0b0; line-height: 1; }
.b3-fire small { display: block; font-size: 13px; font-weight: 800; }
.b3.touch .b3-jump { display: grid; right: 128px; bottom: 30px; width: 58px; height: 58px; }
.b3.touch .b3-joy { display: block; position: absolute; left: 26px; bottom: 26px; width: 120px; height: 120px; border-radius: 50%; background: #0a183c40; border: 2px solid #ffffffaa; touch-action: none; }
.b3-joy i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #ffffffaa; box-shadow: 0 2px 8px #0006; }
.b3.touch .b3-weap { bottom: auto; top: 66px; left: auto; right: 10px; transform: none; flex-direction: column; }
.b3.touch .b3-w { width: 78px; padding: 4px; } .b3.touch .b3-w small { display: none; }
.b3.touch .b3-power { bottom: 136px; }
.b3.touch .b3-left { top: 10px; bottom: auto; max-width: 30vw; }
.b3:not(.my-turn) .b3-fire, .b3:not(.my-turn) .b3-jump, .b3:not(.my-turn) .b3-joy { opacity: .35; }
.b3-res { width: 100%; border-collapse: collapse; } .b3-res td, .b3-res th { padding: 6px; text-align: left; border-bottom: 1px solid #ffffff20; } .b3-res tr.t0 td:first-child { color: #7fc4ff; } .b3-res tr.t1 td:first-child { color: #ff8a8a; }
@media (max-height: 480px) { .b3-top { top: 4px; } .b3-timer { min-width: 38px; height: 38px; font-size: 18px; } .b3-turn img { width: 30px; height: 30px; } .b3.touch .b3-w { width: 68px; } .b3.touch .b3-w span { font-size: 18px; } .b3-msg { top: 54px; font-size: 18px; } }
/* full-screen toggle (phones only) */
.tb-fs { display: none; } body.can-fs .tb-fs { display: inline-grid; place-items: center; } body.is-fs .tb-fs { opacity: .6; }
.b3-land { position: absolute; left: 0; top: 0; pointer-events: none; display: none; text-align: center; }
.b3-land i { display: block; width: 26px; height: 26px; margin: 0 auto; border-radius: 50%; border: 3px solid #ffe066; box-shadow: 0 0 0 2px #0008, inset 0 0 0 2px #0008; position: relative; }
.b3-land i::before, .b3-land i::after { content: ''; position: absolute; background: #ffe066; left: 50%; top: -9px; width: 2px; height: 38px; margin-left: -1px; }
.b3-land i::after { transform: rotate(90deg); }
.b3-land b { display: inline-block; margin-top: 3px; font-size: 12px; background: #081436d0; color: #ffe066; padding: 1px 7px; border-radius: 8px; white-space: nowrap; }
.b3-land.foe i { border-color: #ff4b4b; animation: b3pulse .4s infinite alternate; } .b3-land.foe i::before, .b3-land.foe i::after { background: #ff4b4b; } .b3-land.foe b { color: #ff7a7a; }
.b3-land.water i { border-color: #7fd0ff; } .b3-land.water i::before, .b3-land.water i::after { background: #7fd0ff; } .b3-land.water b { color: #9fdcff; }
/* 3D weather */
.b3-wx { display: flex; flex-direction: column; align-items: center; background: #081436cc; border-radius: 14px; padding: 3px 10px; min-width: 70px; line-height: 1.15; }
.b3-wx span { font-size: 20px; } .b3-wx b { font-size: 11px; } .b3-wx small { font-size: 10px; color: #ffe066; }
.b3-wfx { position: absolute; inset: 0; pointer-events: none; }
.b3-wfx.rain, .b3-wfx.storm { background-image: repeating-linear-gradient(105deg, transparent 0 14px, #d8ecff55 14px 15px, transparent 15px 38px), repeating-linear-gradient(100deg, transparent 0 22px, #ffffff33 22px 23px, transparent 23px 51px); background-size: 120px 220px, 160px 300px; animation: b3rain .35s linear infinite; }
.b3-wfx.storm { background-color: #0a0f2a40; animation: b3rain .25s linear infinite, b3flash 6s infinite; }
@keyframes b3rain { to { background-position: -40px 220px, -60px 300px; } }
@keyframes b3flash { 0%, 91%, 95%, 100% { box-shadow: inset 0 0 0 100vmax transparent; } 92%, 94% { box-shadow: inset 0 0 0 100vmax #ffffffaa; } 93% { box-shadow: inset 0 0 0 100vmax #ffffff22; } }
.b3-wfx.snow { background-image: radial-gradient(circle, #fff 1.5px, transparent 2.5px), radial-gradient(circle, #ffffffbb 1px, transparent 2px); background-size: 90px 90px, 60px 60px; animation: b3snow 4s linear infinite; }
@keyframes b3snow { to { background-position: 40px 360px, -30px 240px; } }
.b3-wfx.gale, .b3-wfx.leaf { background-image: repeating-linear-gradient(178deg, transparent 0 60px, #ffffff2a 60px 62px, transparent 62px 140px); background-size: 400px 140px; animation: b3gale .5s linear infinite; }
.b3-wfx.leaf { background-image: radial-gradient(ellipse 5px 2.5px, #7bd06b 70%, transparent 75%); background-size: 170px 130px; animation: b3gale 2.5s linear infinite; }
@keyframes b3gale { to { background-position: -400px 20px; } }
.b3-wfx.heat { background: linear-gradient(0deg, #ff6a1a22, transparent 40%); animation: b3heat 1.4s ease-in-out infinite alternate; }
@keyframes b3heat { to { opacity: .4; } }
@media (max-height: 480px) { .b3-wx { min-width: 58px; padding: 2px 6px; } .b3-wx span { font-size: 16px; } }
/* same account opened in another window */
.kicked-ov { position: fixed; inset: 0; z-index: 9999; background: #050b1fe6; display: grid; place-items: center; padding: 16px; backdrop-filter: blur(4px); }
.kicked-box { max-width: 420px; text-align: center; background: linear-gradient(160deg, #13245a, #0b1638); border: 1px solid #ffffff30; border-radius: 20px; padding: 24px 20px; color: #fff; box-shadow: 0 20px 60px #000a; }
.kicked-ic { font-size: 46px; } .kicked-box h2 { margin: 6px 0 10px; } .kicked-box p { opacity: .9; line-height: 1.6; margin: 0 0 16px; }
.kicked-box .btn { width: 100%; margin-bottom: 8px; } .kicked-box small { display: block; }
.skill-btn.ult-full { animation: ultReady 1s ease-in-out infinite alternate; }
@keyframes ultReady { from { box-shadow: 0 0 0 2px #ffcf5a, 0 0 10px #ff9a3d; } to { box-shadow: 0 0 0 3px #fff3b0, 0 0 22px #ffcf5a; } }
.b3-w .ug { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 4px; border-radius: 2px; background: #0008; overflow: hidden; }
.b3-w .ug i { display: block; height: 100%; background: linear-gradient(90deg, #ff7ad0, #ffe066); }
.b3-w.ult.ready { animation: ultReady 1s ease-in-out infinite alternate; }

/* ---------- new key art (login + loading) ---------- */
#screen-loading { background: linear-gradient(180deg, #0a1634b0, #0a1634e6), url(/assets/game/ui/hero-team-sm.jpg) center 40% / cover; }
.hero-stage { border-radius: 26px; }
.hero-stage img { height: clamp(220px, 48vh, 540px); object-fit: cover; object-position: 50% 28%; border-radius: 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 4%, #000 72%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 4%, #000 72%, transparent 100%); }
.hs-sparkle { position: absolute; inset: 0; pointer-events: none; border-radius: 26px; opacity: .9;
  background-image: radial-gradient(circle, #fff 1.2px, transparent 2px), radial-gradient(circle, #ffe9a0 1px, transparent 1.8px), radial-gradient(circle, #bfe9ff 1.4px, transparent 2.2px);
  background-size: 140px 120px, 90px 110px, 210px 170px; background-position: 10px 20px, 60px 40px, 120px 80px; animation: hsTwinkle 3.2s ease-in-out infinite alternate, hsDrift 18s linear infinite; mix-blend-mode: screen; }
@keyframes hsTwinkle { from { opacity: .35; } to { opacity: .95; } }
@keyframes hsDrift { to { background-position: 150px -100px, -30px -150px, 330px -90px; } }
.hs-shine { position: absolute; inset: 0; pointer-events: none; border-radius: 26px; overflow: hidden;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .22) 48%, rgba(255, 246, 200, .32) 50%, transparent 58%) no-repeat; background-size: 220% 100%; animation: hsShine 6.5s ease-in-out infinite; mix-blend-mode: soft-light; }
@keyframes hsShine { 0%, 55% { background-position: 130% 0; } 100% { background-position: -60% 0; } }
.hs-ribbon { position: absolute; left: 50%; top: -14px; z-index: 2; transform: translateX(-50%); padding: 5px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 1px; white-space: nowrap;
  color: #4a2400; background: linear-gradient(180deg, #fff3b8, #ffc94a); box-shadow: 0 3px 0 #b5741a, 0 6px 18px #0006; }
.login-hero .logo-big { margin-bottom: 10px; text-shadow: 0 4px 18px #0008; }
@media (max-width: 700px) { .hero-stage img { height: clamp(170px, 34vh, 300px); } .hs-ribbon { font-size: 11px; top: -12px; } .login-hero .logo-big { margin-bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .hs-sparkle, .hs-shine, .hero-stage { animation: none; } }

/* ---------- game logo in the top bar (same style as the key-art logo) ---------- */
.lg { position: relative; display: inline-flex; flex-direction: column; align-items: center; padding: 8px 30px 0; isolation: isolate; line-height: .82; font-family: 'Lilita One', 'Kanit', sans-serif; font-weight: 400; letter-spacing: 1px; transition: transform .2s; }
.brand:hover .lg { transform: scale(1.05) rotate(-1deg); }
.lg-art { position: absolute; left: 50%; top: -9px; width: 168px; height: 64px; transform: translateX(-50%); z-index: -2; filter: drop-shadow(0 2px 3px #0007); }
.lg b { position: relative; display: block; color: transparent; -webkit-background-clip: text; background-clip: text; }
.lg b::before { content: attr(data-t); position: absolute; inset: 0; z-index: -1; color: #3a1a0c; -webkit-text-stroke: 5px #3a1a0c; text-shadow: 0 3px 0 #3a1a0c, 0 5px 6px #0009; }
.lg-a { font-size: 25px; background-image: linear-gradient(180deg, #fff6c9 8%, #ffd257 45%, #f7a330 70%, #e8731c 100%); }
.lg-s { font-size: 23px; margin-top: 1px; background-image: linear-gradient(180deg, #eafcff 8%, #8fe0ff 45%, #3aa6f0 75%, #1d72d1 100%); }
.lg-s::before { color: #10305e !important; -webkit-text-stroke-color: #10305e !important; text-shadow: 0 3px 0 #10305e, 0 5px 6px #0009 !important; }
.lg::after { content: ''; position: absolute; left: 22%; right: 22%; top: 20%; height: 12%; background: linear-gradient(90deg, transparent, #fff9, transparent); z-index: 1; mix-blend-mode: overlay; animation: lgShine 5s ease-in-out infinite; pointer-events: none; }
@keyframes lgShine { 0%, 70% { opacity: 0; transform: translateX(-60%); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }
@media (max-width: 900px) { .brand .lg { padding: 4px 22px 0; } .lg-a { font-size: 20px; } .lg-s { font-size: 18px; } .lg-art { width: 132px; height: 52px; top: -8px; } }
@media (max-height: 520px), (max-width: 560px) { .brand .lg { padding: 2px 16px 0; } .lg-a { font-size: 16px; } .lg-s { font-size: 14px; } .lg-art { width: 104px; height: 42px; top: -6px; } .lg b::before { -webkit-text-stroke-width: 4px; } }

/* ---------- shop (opened from the dressing room) ---------- */
.dr-shop { position: absolute; left: 12px; top: 64px; z-index: 3; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; text-align: left; padding: 8px 14px 8px 10px; border-radius: 14px; border: 2px solid #ffe7a0; background: linear-gradient(135deg, #ffcd55, #ff8a2b); color: #3a1d00; box-shadow: 0 4px 0 #a95812, 0 8px 18px #0006; font-size: 22px; cursor: pointer; animation: shopPulse 2.6s ease-in-out infinite; }
.dr-shop b { font-size: 16px; line-height: 1.1; } .dr-shop small { grid-column: 2; font-size: 10px; opacity: .8; margin-top: -2px; }
.dr-shop { grid-template-rows: auto auto; } .dr-shop > :first-child { grid-row: span 2; }
.dr-shop:hover { transform: translateY(-2px); }
@keyframes shopPulse { 0%, 100% { box-shadow: 0 4px 0 #a95812, 0 8px 18px #0006; } 50% { box-shadow: 0 4px 0 #a95812, 0 0 0 4px #ffd34f55, 0 8px 22px #ff9a3d88; } }
.dr-more-shop { border-style: dashed !important; opacity: .85; }
.shop { display: grid; gap: 10px; }
.shop-heroes { display: flex; gap: 6px; flex-wrap: wrap; }
.shop-heroes button { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 12px; border: 2px solid #ffffff25; background: #0a1a40; color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.shop-heroes img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; object-position: top; }
.shop-heroes button.active { border-color: var(--c); background: color-mix(in srgb, var(--c) 25%, #0a1a40); }
.shop-main { display: grid; grid-template-columns: 280px 1fr; gap: 12px; min-height: 0; }
.shop-left { display: flex; flex-direction: column; gap: 8px; }
.shop-3d { width: 100%; height: 300px; border-radius: 14px; background: radial-gradient(circle at 50% 65%, #3a6cc9, #142a5e 75%); touch-action: pan-y; }
.shop-pick { display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .shop-pick small { opacity: .8; } .shop-pick .st { color: #9effb0; } .shop-pick .row2 { display: flex; gap: 6px; margin-top: 4px; } .shop-pick .btn.primary { flex: 1; }
.shop-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.shop-tabs button { padding: 6px 10px; border-radius: 10px; border: 1px solid #ffffff30; background: #0a1a40; color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.shop-tabs button.active { background: linear-gradient(135deg, #ffd34f, #ff9a2b); color: #3a1d00; border-color: #fff3c0; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; max-height: 360px; overflow: auto; padding: 2px; }
.shop-grid small.poor { color: #ff8a8a; }
.shop-empty { grid-column: 1 / -1; text-align: center; padding: 30px 0; }
.shop-extra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .shop-wallet { margin-left: auto; font-size: 14px; }
@media (max-width: 760px) { .shop-main { grid-template-columns: 1fr; } .shop-3d { height: 200px; } .shop-grid { max-height: 260px; } .dr-shop { top: 46px; padding: 5px 10px 5px 6px; font-size: 17px; } .dr-shop b { font-size: 13px; } .dr-shop small { display: none; } }
/* Sign in with Google */
.g-area { margin-top: 14px; } .g-sep { display: flex; align-items: center; gap: 10px; color: #b8c6e6; font-size: 13px; margin-bottom: 12px; }
.g-sep::before, .g-sep::after { content: ''; flex: 1; height: 1px; background: #ffffff26; }
.g-login { display: flex; flex-direction: column; align-items: center; min-height: 44px; gap: 6px; text-align: center; }
/* big logo (login + landing) */
.lg.lg-big { padding: 22px 70px 0; }
.lg-big .lg-art { width: 400px; height: 152px; top: -18px; }
.lg-big .lg-a { font-size: 64px; } .lg-big .lg-s { font-size: 58px; }
.lg-big b::before { -webkit-text-stroke-width: 10px; text-shadow: 0 6px 0 #3a1a0c, 0 10px 14px #000a; }
.lg-big .lg-s::before { text-shadow: 0 6px 0 #10305e, 0 10px 14px #000a !important; }
.lg-rib { position: relative; display: block; margin-top: 4px; padding: 3px 34px 5px; background: linear-gradient(180deg, #a5683c, #6b3c1c); border: 3px solid #3a1a0c; border-radius: 8px; box-shadow: 0 4px 0 #2a1208, 0 8px 14px #0008; font-style: normal; }
.lg-rib::before, .lg-rib::after { content: ''; position: absolute; top: 8px; width: 22px; height: 26px; background: #7a4422; border: 3px solid #3a1a0c; z-index: -1; }
.lg-rib::before { left: -16px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 35% 50%); } .lg-rib::after { right: -16px; clip-path: polygon(0 0, 100% 0, 65% 50%, 100% 100%, 0 100%); }
.lg-rib span { font-family: 'Lilita One', 'Kanit', sans-serif; font-size: 26px; letter-spacing: 4px; color: #ffe9b8; text-shadow: 0 2px 0 #3a1a0c; }
.lg-sub { display: block; margin-top: 10px; font-style: normal; font-size: 15px; letter-spacing: 1px; color: #e8f3ff; text-shadow: 0 2px 6px #000c; font-family: 'Kanit', sans-serif; line-height: 1.4; }
.login-hero .lg-big { margin-bottom: 10px; }
.land-brand .lg { transform: scale(.85); transform-origin: left center; }
@media (max-width: 700px) { .lg.lg-big { padding: 14px 40px 0; } .lg-big .lg-art { width: 260px; height: 100px; top: -12px; } .lg-big .lg-a { font-size: 40px; } .lg-big .lg-s { font-size: 36px; } .lg-big b::before { -webkit-text-stroke-width: 7px; } .lg-rib span { font-size: 18px; } .lg-sub { font-size: 12px; } }
/* coming-soon heroes */
.soon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.soon { position: relative; border-radius: 16px; overflow: hidden; border: 2px solid #ffffff30; background: #0a1a40; }
.soon img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.85) brightness(.85); transition: filter .3s, transform .3s; }
.soon:hover img { filter: none; transform: scale(1.05); }
.soon b { display: block; padding: 6px 8px 0; font-size: 15px; } .soon small { display: block; padding: 0 8px 8px; font-size: 12px; opacity: .8; }
.soon .cs { position: absolute; top: 20px; right: -44px; transform: rotate(38deg); width: 170px; text-align: center; padding: 3px 0; font-size: 11px; font-weight: 800; letter-spacing: 1px; background: linear-gradient(90deg, #ff4f7b, #ff9a3d); color: #fff; box-shadow: 0 2px 6px #0008; }
.soon-note { text-align: center; margin-top: 12px; }
.lh-stage canvas.d3 { width: 100%; height: 360px; display: block; touch-action: pan-y; }

#howto .steps { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
/* ---------- charms ---------- */
.charmbook { display: grid; gap: 10px; }
.cb-eq { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cb-pity { grid-column: 1 / -1; margin: 0; font-size: 13px; color: #ffe9a8; }
.cb-slot { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; border: 2px dashed var(--rc); background: #0a1a40; min-height: 64px; }
.cb-slot.on { border-style: solid; background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 22%, #0a1a40), #0a1a40); }
.cb-slot .ic { font-size: 30px; } .cb-slot div { flex: 1; min-width: 0; } .cb-slot b { display: block; } .cb-slot small { display: block; font-size: 11px; opacity: .8; }
.cb-filter { display: flex; gap: 6px; flex-wrap: wrap; } .cb-filter button { padding: 5px 12px; border-radius: 10px; border: 1px solid #ffffff30; background: #0a1a40; color: #fff; font: inherit; font-size: 13px; cursor: pointer; } .cb-filter button.active { background: linear-gradient(135deg, #c07bff, #6a3ad6); border-color: #e2c6ff; }
.cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 46vh; overflow: auto; padding: 2px; }
.cb-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 8px; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--rc) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 16%, transparent), #0004); color: #fff; font: inherit; cursor: pointer; }
.cb-card .ic { font-size: 30px; } .cb-card b { font-size: 13px; } .cb-card em { font-size: 11px; font-style: normal; color: var(--rc); font-weight: 700; } .cb-card small { font-size: 11px; opacity: .8; line-height: 1.35; } .cb-card i { font-size: 11px; font-style: normal; margin-top: 4px; color: #ffe066; }
.cb-card.locked { filter: grayscale(.6); opacity: .62; } .cb-card.locked i { color: #b8c6e6; }
.cb-card.on { box-shadow: 0 0 0 3px var(--rc), 0 0 18px color-mix(in srgb, var(--rc) 60%, transparent); }
.cb-card.unique.has { animation: uniqGlow 2s ease-in-out infinite alternate; } @keyframes uniqGlow { to { box-shadow: 0 0 22px #ffc43a99; } }
.cb-rates { font-size: 13px; background: #0a1a40; border-radius: 12px; padding: 8px 12px; } .cb-rates summary { cursor: pointer; font-weight: 700; } .cb-rates table { width: 100%; border-collapse: collapse; margin: 6px 0; } .cb-rates td, .cb-rates th { padding: 4px 6px; border-bottom: 1px solid #ffffff18; text-align: center; }
.charm-drop { display: flex; gap: 12px; align-items: center; margin: 10px auto; max-width: 460px; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--rc); background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 26%, #0a1a40), #0a1a40); animation: dropIn .7s cubic-bezier(.2, 1.6, .4, 1); text-align: left; }
.charm-drop .ic { font-size: 44px; animation: dropSpin 1.2s ease-out; } .charm-drop small { color: var(--rc); font-weight: 700; } .charm-drop b { display: block; font-size: 18px; } .charm-drop em { display: block; font-style: normal; font-size: 12px; opacity: .85; } .charm-drop i { display: block; font-style: normal; font-size: 12px; color: #9fe0ff; margin-top: 2px; }
.charm-drop.unique, .charm-drop.epic { box-shadow: 0 0 26px color-mix(in srgb, var(--rc) 70%, transparent); }
@keyframes dropIn { from { transform: scale(.4); opacity: 0; } } @keyframes dropSpin { from { transform: rotate(-360deg) scale(.2); } }
.dr-charm { background: linear-gradient(135deg, #8a4fff, #4a2ab8) !important; }
.b3-tag em { display: block; font-style: normal; font-size: 11px; line-height: 1; }
@media (max-width: 600px) { .cb-eq { grid-template-columns: 1fr; } }
/* charm slots, top-right of the dressing room */
.dr-charms { position: absolute; right: 10px; top: 10px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 8px 5px; border-radius: 14px; border: 2px solid #c07bffaa; background: linear-gradient(160deg, #4a2a8ae6, #1a1240e6); color: #fff; font: inherit; cursor: pointer; box-shadow: 0 4px 14px #0007; }
.dr-charms small { font-size: 11px; font-weight: 700; color: #e2c6ff; } .dr-charms em { font-size: 10px; font-style: normal; opacity: .85; }
.dr-charms > div { display: flex; gap: 5px; }
.dr-charms .cs { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; border: 2px dashed #ffffff55; background: #0006; color: #ffffff99; }
.dr-charms .cs.on { border: 2px solid var(--rc); background: radial-gradient(circle, color-mix(in srgb, var(--rc) 35%, #0000), #0007); color: #fff; box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 60%, transparent); }
.dr-charms:hover { border-color: #e2c6ff; transform: translateY(-1px); }
.dr-charms.need { animation: charmNeed 1.2s ease-in-out infinite alternate; } @keyframes charmNeed { to { box-shadow: 0 0 0 4px #c07bff66, 0 0 22px #c07bffaa; } }



/* necklace + ring slots in the equipment bar */
.dr-slots .charm-slot { border-color: #c07bff66; background: #2a1650aa; }
.dr-slots .charm-slot small { color: #e2c6ff; }
.dr-slots .charm-slot.on { border-style: solid; border-color: var(--rc); background: color-mix(in srgb, var(--rc) 18%, #1a1040); box-shadow: 0 0 8px color-mix(in srgb, var(--rc) 50%, transparent); }
.dr-slots .charm-slot.need { animation: charmNeed 1.2s ease-in-out infinite alternate; }
@keyframes charmNeed { to { box-shadow: 0 0 0 3px #c07bff66, 0 0 16px #c07bffaa; } }

/* charm picker beside the pose buttons */
.dr-charmbox { position: absolute; right: 58px; top: 10px; z-index: 3; width: 96px; display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 14px; border: 1px solid #c07bff88; background: linear-gradient(160deg, #3a1f70d9, #160f38d9); box-shadow: 0 4px 14px #0007; }
.dr-charmbox small { font-size: 11px; font-weight: 700; line-height: 1.25; text-align: center; color: #e2c6ff; }
.dr-charmbox button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px 4px; border-radius: 12px; border: 2px dashed #ffffff55; background: #0006; color: #fff; font: inherit; cursor: pointer; }
.dr-charmbox button span { font-size: 24px; line-height: 1.1; } .dr-charmbox button em { font-style: normal; font-size: 10px; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.dr-charmbox button.on { border-style: solid; border-color: var(--rc); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc) 35%, transparent), #0007); box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 55%, transparent); }
.dr-charmbox button:hover { border-color: #e2c6ff; }
.dr-charmbox button.need { animation: charmNeed 1.2s ease-in-out infinite alternate; }
@media (max-width: 760px) { .dr-charmbox { right: 46px; width: 74px; padding: 4px; gap: 4px; } .dr-charmbox small { font-size: 9px; } .dr-charmbox button span { font-size: 18px; } .dr-charmbox button em { display: none; } }
.b3-grave { position: absolute; left: 0; top: 0; padding: 3px 10px; border-radius: 10px; background: #2a1640e0; border: 2px solid #ffd23f; color: #ffe066; font-weight: 800; font-size: 14px; white-space: nowrap; text-shadow: 0 1px 2px #000; box-shadow: 0 3px 10px #0008; pointer-events: none; transform-origin: 50% 100%; }
.tomb-prev { position: relative; } .tomb-prev canvas.tomb3d-cv { height: 260px; cursor: grab; touch-action: none; }
.tomb-snd { position: absolute; right: 8px; top: 8px; }

/* ---------- PvP panel: rooms + practice side by side ---------- */
.pvp-more { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pvp-more .btn { padding: 9px 8px; font-size: 14px; line-height: 1.25; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pvp-more .btn small { font-size: 11px; font-weight: 400; }
/* ---------- auction house ---------- */
.mode-card.auction-card { width: 100%; padding: 12px 14px; background: linear-gradient(135deg, #d9a6ff, #8a4dff); border-color: #f0e0ff; color: #1d0748; box-shadow: 0 5px 0 #4f22a8, var(--shadow); }
.mode-card.auction-card b { font-size: 18px; }
.auction-card .auc-warn { color: #b0001c; display: inline; font-size: 13px; }
.auc { display: grid; gap: 10px; min-height: 340px; }
.auc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.auc-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.auc-tabs button, .auc-kinds button { background: var(--panel2); border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; font-size: 14px; }
.auc-tabs button.active, .auc-kinds button.active { background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #3a2200; border-color: transparent; font-weight: 700; }
.auc-kinds { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .auc-kinds button { font-size: 12px; padding: 4px 10px; }
.auc-wallet { font-size: 15px; } .auc-wallet small { color: var(--muted); margin-left: 6px; }
.auc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.auc-empty { grid-column: 1 / -1; text-align: center; padding: 30px 10px; }
.auc-card { --rc: #9db3da; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--rc) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 14%, #0c1a40), #0a1430); }
.auc-card.lead { box-shadow: 0 0 0 2px var(--gold), 0 0 18px #ffcf5a55; }
.auc-card.ended { opacity: .85; }
.auc-item { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; }
.auc-item .ic { font-size: 34px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--rc) 22%, #0006); }
.auc-item b { display: block; font-size: 16px; color: #fff; } .auc-item em { display: block; font-style: normal; font-size: 12px; color: var(--rc); font-weight: 700; }
.auc-item small { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.auc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.auc-meta > div { background: #0005; border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; }
.auc-meta small { font-size: 11px; color: var(--muted); } .auc-meta b { font-size: 16px; color: var(--gold); } .auc-meta em { font-style: normal; font-size: 11px; color: #cfe0ff; }
.auc-left.soon { color: #ff7a8a; animation: aucPulse 1s infinite; }
@keyframes aucPulse { 50% { opacity: .55; } }
.auc-seller { margin: 0; font-size: 12px; color: var(--muted); }
.auc-act { display: flex; gap: 6px; align-items: center; justify-content: space-between; }
.auc-act input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: #0008; color: #fff; font: inherit; font-size: 15px; }
.auc-lead { color: var(--gold); font-weight: 700; font-size: 14px; }
.auc-out { color: #ffb36b; font-size: 11px; }
.auc-res { --sc: #fff; font-size: 13px; } .auc-res b { color: var(--sc); } .auc-res i { font-style: normal; color: var(--gold); }
.auc-sell h4 { margin: 14px 0 8px; }
.auc-rules { background: #0005; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; font-size: 13px; }
.auc-rules ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; color: #d4e2ff; }
.auc-tag { display: inline-block; padding: 0 7px; border-radius: 99px; background: #ffcf5a; color: #3a2200; font-size: 11px; font-weight: 700; }
.auc-inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.auc-inv-it { --rc: #9db3da; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--rc) 50%, transparent); background: color-mix(in srgb, var(--rc) 12%, #0a1430); text-align: center; }
.auc-inv-it .ic { font-size: 28px; } .auc-inv-it b { font-size: 12px; } .auc-inv-it em { font-size: 11px; font-style: normal; color: var(--rc); }
.auc-inv-it.on { box-shadow: 0 0 0 3px var(--gold); }
.auc-form { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 10px; align-items: end; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--rc) 10%, #0a1430); border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); }
.auc-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.auc-form input, .auc-form select { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: #0008; color: #fff; font: inherit; font-size: 14px; }
.auc-pick { grid-column: 1 / -1; display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; } .auc-pick .ic { font-size: 30px; } .auc-pick small { display: block; font-size: 11px; color: var(--muted); }
.shop-auc { position: absolute; top: 4px; right: 4px; font-size: 10px; padding: 0 5px; border-radius: 99px; background: #ffcf5a; color: #3a2200; font-weight: 700; font-style: normal; }
@media (max-width: 760px) {
  .auc-form { grid-template-columns: 1fr 1fr; } .auc-pick { grid-column: 1 / -1; } .auc-form .f-go { grid-column: 1 / -1; }
  .auc-grid { grid-template-columns: 1fr; }
  .pvp-more .btn { font-size: 13px; }
}

.auc-net { grid-column: 1 / -1; margin: 0; font-size: 12px; color: #d4e2ff; } .auc-net b { color: var(--gold); }

/* ---------- gem top-up ---------- */
.tb-gembtn { display: inline-flex; align-items: center; gap: 3px; background: none; border: 0; padding: 0; font: inherit; color: inherit; position: relative; }
.tb-plus { font-style: normal; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: linear-gradient(180deg, #6fe0ff, #2f8bff); color: #fff; font-size: 12px; font-weight: 800; margin-left: 2px; }
.tb-gembtn.claim::after { content: ''; position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ff4d6a; box-shadow: 0 0 0 2px #0b1838; }
.tb-sup { color: #ffd34d; }
.tpu { display: grid; gap: 10px; min-height: 360px; }
.tpu-supbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(120deg, #6a4a00cc, #3a2a6acc); border: 1px solid #ffcf5a88; }
.tpu-supbar > span { font-size: 28px; } .tpu-supbar div { flex: 1; } .tpu-supbar b { display: block; color: var(--gold); } .tpu-supbar small { color: #e6dcff; font-size: 12px; } .tpu-supbar em { font-style: normal; color: var(--green); font-size: 13px; }
.tpu-first { margin: 0; padding: 8px 12px; border-radius: 12px; background: #ff5f7322; border: 1px solid #ff5f7366; font-size: 14px; }
.tpu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tpu-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 8px 10px; border-radius: 16px; border: 2px solid #6cc8ff66; background: linear-gradient(180deg, #1d3f86, #0c1a40); text-align: center; overflow: hidden; transition: transform .12s; }
.tpu-pack:hover { transform: translateY(-2px); border-color: #8fdcff; }
.tpu-pack .ic { font-size: 36px; } .tpu-pack b { font-size: 18px; color: #fff; } .tpu-pack b s { font-size: 12px; color: var(--muted); font-weight: 400; }
.tpu-pack em { font-style: normal; font-size: 12px; color: #7ff0b0; line-height: 1.35; } .tpu-pack small { font-size: 11px; color: var(--muted); }
.tpu-pack strong { margin-top: 6px; width: 100%; padding: 7px 0; border-radius: 10px; background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #3a2200; font-size: 17px; }
.tpu-pack.monthly { border-color: #ffcf5a; background: linear-gradient(180deg, #6a4a10, #2a1a4a); }
.tpu-pack .rib { position: absolute; top: 8px; right: -26px; transform: rotate(35deg); background: #ff4d6a; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 28px; }
.tpu-pack .rib.x2 { background: #ff8a2b; font-size: 9px; padding: 2px 22px; }
.tpu-why { text-align: center; margin: 4px 0 0; }
.tpu-off { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 12px; text-align: center; } .tpu-off span { font-size: 44px; } .tpu-off small { color: var(--muted); max-width: 420px; }
.tpu-pay { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.tpu-qr { background: #fff; color: #0b1838; border-radius: 16px; padding: 0 0 12px; text-align: center; overflow: hidden; display: flex; flex-direction: column; align-items: center; }
.tpu-pp { width: 100%; background: #113566; color: #fff; padding: 8px; font-weight: 700; letter-spacing: .5px; }
.tpu-qr canvas { width: 240px; height: 240px; margin: 6px 0 2px; image-rendering: pixelated; }
.tpu-amt { font-size: 26px; color: #113566; } .tpu-qr small { color: #4a5a7a; font-size: 13px; line-height: 1.4; }
.tpu-what { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--gold); }
.tpu-steps ol { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.tpu-file { display: grid; place-items: center; min-height: 90px; border: 2px dashed var(--line2); border-radius: 14px; cursor: pointer; background: #0004; margin-bottom: 8px; overflow: hidden; }
.tpu-file span { color: #bfe0ff; } .tpu-file img { max-height: 200px; max-width: 100%; display: block; }
.tpu-note { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: #0008; color: #fff; font: inherit; }
.tpu-btns { display: flex; gap: 8px; justify-content: space-between; }
.tpu-hist { display: grid; gap: 8px; }
.tpu-row { --sc: #fff; display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #0005; border-left: 4px solid var(--sc); }
.tpu-row b { display: block; } .tpu-row small { display: block; font-size: 12px; color: var(--muted); } .tpu-row .rs { color: #ff9aa8; }
.tpu-row .st { text-align: right; } .tpu-row .st em { font-style: normal; color: var(--sc); font-weight: 700; font-size: 13px; }
@media (max-width: 760px) { .tpu-pay { grid-template-columns: 1fr; } .tpu-qr { max-width: 300px; margin: 0 auto; } .tpu-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- special ammo in battle ---------- */
.b3-w.b3-ammo { --ac: #9db3da; border-color: color-mix(in srgb, var(--ac) 70%, #fff3); }
.b3-w.b3-ammo.on { background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 45%, #081436), #081436e6); box-shadow: 0 0 12px color-mix(in srgb, var(--ac) 60%, transparent); }
.b3-w.b3-ammo .cnt { font-style: normal; position: absolute; top: -8px; right: -6px; min-width: 24px; padding: 1px 6px; border-radius: 99px; background: var(--ac); color: #1a0f00; font-style: normal; font-size: 12px; font-weight: 800; box-shadow: 0 1px 3px #0008; }
.b3-ammo-pick { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); display: none; flex-direction: column; gap: 6px; padding: 10px; border-radius: 16px; background: #081436f0; border: 2px solid #ffffff40; z-index: 6; min-width: 260px; }
.b3-ammo-pick.open { display: flex; }
.b3-ammo-pick button { --ac: #9db3da; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px; text-align: left; padding: 6px 10px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--ac) 55%, transparent); background: color-mix(in srgb, var(--ac) 14%, #0a1430); color: #fff; font: inherit; }
.b3-ammo-pick button span { grid-row: span 2; font-size: 24px; } .b3-ammo-pick button b { font-size: 14px; } .b3-ammo-pick button small { font-size: 11px; color: #cfe0ff; }
.b3-ammo-pick button.on { box-shadow: 0 0 0 2px var(--ac); } .b3-ammo-pick button.empty { opacity: .5; }
.b3.touch .b3-ammo-pick { left: auto; right: 100px; top: 66px; bottom: auto; transform: none; }
.b3-flash { position: absolute; inset: 0; background: #fffbe0; opacity: 0; pointer-events: none; z-index: 5; }
.b3-flash.on { animation: b3Flash .35s ease-out; }
@keyframes b3Flash { 0% { opacity: .75; } 30% { opacity: .15; } 45% { opacity: .5; } 100% { opacity: 0; } }
.dr-ammo { position: absolute; left: 12px; top: 128px; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 12px; border: 2px solid #ffb08a; background: linear-gradient(135deg, #ff7a5a, #c73a8a); color: #fff; box-shadow: 0 3px 0 #7a1f4f, 0 6px 14px #0006; font-size: 16px; cursor: pointer; }
.dr-ammo b { font-size: 13px; } .dr-ammo:hover { transform: translateY(-2px); }
/* ammo shop */
.ammo-shop { display: grid; gap: 10px; } .ammo-intro { margin: 0; }
.ammo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ammo-card { --ac: #9db3da; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--ac) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 18%, #0c1a40), #0a1430); }
.ammo-card.sel { box-shadow: 0 0 0 3px var(--ac), 0 0 18px color-mix(in srgb, var(--ac) 50%, transparent); }
.ammo-card canvas { width: 100%; aspect-ratio: 220 / 120; border-radius: 10px; display: block; }
.ammo-top { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: center; } .ammo-top .ic { font-size: 30px; } .ammo-top b { display: block; font-size: 15px; } .ammo-top small { display: block; font-size: 11px; color: var(--muted); line-height: 1.35; }
.ammo-meta { display: flex; justify-content: space-between; font-size: 12px; color: #d4e2ff; } .ammo-meta b { color: var(--gold); }
.ammo-buy { display: flex; gap: 6px; flex-wrap: wrap; } .ammo-buy .btn { flex: 1; }
.ammo-per { margin: 0; font-size: 11px; color: var(--muted); text-align: right; }
.ammo-card.normal { justify-content: center; }
.ammo-wallet { text-align: right; font-size: 15px; }

/* ---------- kill cam ---------- */
.b3::before, .b3::after { content: ''; position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 4; transition: height .35s ease; pointer-events: none; }
.b3::before { top: 0; } .b3::after { bottom: 0; }
.b3.killcam::before, .b3.killcam::after { height: 9vh; }
.b3.killcam .b3-power, .b3.killcam .b3-weap, .b3.killcam .b3-land, .b3.killcam .b3-left, .b3.killcam .b3-joy, .b3.killcam .b3-btn, .b3.killcam .b3-ammo-pick { opacity: 0; pointer-events: none; }
.b3-kill { position: absolute; left: 50%; bottom: calc(9vh + 14px); transform: translate(-50%, 20px); opacity: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; transition: opacity .3s, transform .3s; text-shadow: 0 2px 6px #000; }
.b3-kill.on { opacity: 1; transform: translate(-50%, 0); }
.b3-kill b { font-size: 26px; color: #ff6b6b; } .b3-kill small { font-size: 15px; color: #ffe066; font-weight: 700; } .b3-kill em { font-style: normal; font-size: 11px; color: #fff9; margin-top: 2px; }
/* ---------- overview map pins ---------- */
.b3-pins { position: absolute; inset: 0; pointer-events: none; display: none; z-index: 3; } .b3-pins.on { display: block; }
.b3-pin { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 8px 4px; border-radius: 9px; background: #081436e8; border: 2px solid #9db3da; white-space: nowrap; box-shadow: 0 3px 10px #0008; min-width: 74px; }
.b3-pin::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: inherit; }
.b3-pin b { font-size: 12px; color: #fff; line-height: 1.1; } .b3-pin small { font-size: 10px; color: #cfe0ff; line-height: 1; }
.b3-pin .hpb { display: block; width: 64px; height: 6px; border-radius: 3px; background: #0009; overflow: hidden; } .b3-pin .hpb i { display: block; height: 100%; }
.b3-pin.foe { border-color: #ff5a5a; } .b3-pin.foe b { color: #ffb0b0; }
.b3-pin.ally { border-color: #3fa2ff; } .b3-pin.me { border-color: #ffe066; }
.b3.overview .b3-tag { display: none; }
.b3.overview .b3-land b { font-size: 14px; }

/* ---------- battle items + airdrops ---------- */
.b3-items { position: absolute; left: 12px; bottom: 14px; display: flex; gap: 6px; align-items: flex-end; z-index: 2; }
.b3-it { position: relative; width: 48px; height: 52px; border-radius: 12px; border: 2px solid #ffffff55; background: #081436d9; color: #fff; font: inherit; display: grid; place-items: center; cursor: pointer; padding: 0; }
.b3-it span { font-size: 24px; line-height: 1; }
.b3-it var { position: absolute; top: -7px; right: -6px; min-width: 20px; padding: 0 5px; border-radius: 99px; background: #ffcf5a; color: #3a2200; font-style: normal; font-size: 12px; font-weight: 800; }
.b3-it small { position: absolute; bottom: 1px; left: 4px; font-size: 9px; opacity: .6; }
.b3-it:not(:disabled):hover { transform: translateY(-2px); border-color: #ffe066; }
.b3-it.none { opacity: .35; } .b3-it.none var { background: #667; color: #fff; }
.b3-it.used:not(.none) { opacity: .55; filter: grayscale(.5); }
.b3-buffs { display: flex; flex-direction: column; gap: 3px; margin-left: 4px; }
.b3-buffs i { font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #ff9a3dcc; color: #fff; text-shadow: 0 1px 2px #0008; white-space: nowrap; }
.b3.touch .b3-items { left: 10px; bottom: auto; top: 96px; flex-direction: column; align-items: flex-start; }
.b3.touch .b3-it { width: 44px; height: 44px; } .b3.touch .b3-it span { font-size: 20px; }
.b3.killcam .b3-items { opacity: 0; pointer-events: none; }
.b3-droptag { position: absolute; left: 0; top: 0; padding: 2px 8px; border-radius: 10px; background: #081436d9; border: 2px solid #ffe066; font-size: 18px; pointer-events: none; animation: dropBob 1.2s ease-in-out infinite alternate; white-space: nowrap; }
@keyframes dropBob { to { margin-top: -6px; } }

/* ---------- in-battle chat ---------- */
.b3-chatbtn { position: relative; } .b3-chatbtn.on { background: #ffcf5a; color: #3a2200; }
.b3-chatbtn em, .b3c-tabs em { position: absolute; top: -5px; right: -5px; min-width: 18px; padding: 0 4px; border-radius: 99px; background: #ff4b4b; color: #fff; font-style: normal; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.b3-chatbtn em:empty, .b3c-tabs em:empty { display: none; }
.b3-chat { position: absolute; left: 12px; bottom: 78px; width: min(330px, 46vw); height: 168px; display: flex; flex-direction: column; border-radius: 14px; background: #08143640; border: 1px solid #ffffff22; z-index: 6; overflow: hidden; transition: background .2s, height .2s; }
.b3-chat:not(.open) { cursor: pointer; } .b3-chat:not(.open):hover { background: #08143670; }
.b3-chat.open { background: #081436e6; border-color: #ffffff55; height: 300px; box-shadow: 0 8px 24px #0008; }
.b3-chat:not(.open) .b3c-quick, .b3-chat:not(.open) .b3c-form, .b3-chat:not(.open) .b3c-x { display: none; }
.b3-chat.open .b3c-hint { display: none; }
.b3c-hint { margin: 0; padding: 2px 8px 5px; font-size: 10px; color: #fff8; text-shadow: 0 1px 2px #000; }
.b3-chat:not(.open) .b3c-m { background: none; text-shadow: 0 1px 3px #000, 0 0 2px #000; padding: 1px 6px; }
.b3-chat:not(.open) .b3c-list { pointer-events: none; }
.b3-chat.fresh:not(.open) { animation: chatFresh 1.2s ease-out; } @keyframes chatFresh { from { background: #ffcf5a40; } }
.b3-chat .b3c-tabs { padding: 4px; } .b3-chat .b3c-tabs button { padding: 3px 6px; font-size: 11px; }
.b3-chat:not(.open) .b3c-tabs button { background: #00000040; } .b3-chat:not(.open) .b3c-tabs button.on { background: #ffcf5acc; }
.b3.touch .b3-chat { left: 62px; bottom: auto; top: 96px; width: min(260px, 40vw); height: 120px; } .b3.touch .b3-chat.open { height: 230px; }
.b3.killcam .b3-chat:not(.open) { opacity: 0; }
.b3c-tabs { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid #ffffff20; }
.b3c-tabs button { position: relative; flex: 1; border: 0; border-radius: 10px; padding: 6px; background: #ffffff12; color: #fff; font: inherit; font-size: 13px; }
.b3c-tabs button.on { background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #3a2200; font-weight: 700; }
.b3c-tabs .b3c-x { flex: 0 0 34px; }
.b3c-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 5px; user-select: text; }
.b3c-m { font-size: 13px; line-height: 1.35; padding: 4px 8px; border-radius: 10px; background: #ffffff10; } .b3c-m b { color: #8fd0ff; margin-right: 6px; } .b3c-m small { float: right; color: #fff6; font-size: 10px; margin-left: 6px; }
.b3c-m.me { background: #ffcf5a22; } .b3c-m.me b { color: var(--gold); } .b3c-m.sys { color: #ffe066; font-size: 12px; background: none; text-align: center; }
.b3c-empty { color: #fff8; font-size: 12px; text-align: center; margin-top: 20px; }
.b3c-quick { display: flex; gap: 4px; padding: 4px 6px; overflow-x: auto; } .b3c-quick button { flex: none; border: 1px solid #ffffff30; background: #ffffff10; color: #fff; border-radius: 99px; padding: 3px 9px; font: inherit; font-size: 12px; }
.b3c-form { display: flex; gap: 6px; padding: 6px; } .b3c-form input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: #0008; color: #fff; font: inherit; font-size: 14px; }
.b3-chatpop { position: absolute; right: 12px; top: 64px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; pointer-events: none; z-index: 7; max-width: min(320px, 70vw); }
.b3cp { padding: 5px 10px; border-radius: 12px; background: #081436dd; border: 1px solid #ffffff30; font-size: 13px; animation: b3cpIn .25s ease-out; } .b3cp.room { border-color: #ffcf5a88; } .b3cp b { color: #8fd0ff; }
@keyframes b3cpIn { from { opacity: 0; transform: translateX(20px); } }

.b3.overview .b3-land { z-index: 4; } .b3.overview .b3-pin { opacity: .9; }
.b3.overview .b3-land b { transform: translateY(-58px); display: inline-block; }

/* ---------- victory cam ---------- */
.b3.victorycam::before, .b3.victorycam::after { height: 8vh; }
.b3.victorycam .b3-power, .b3.victorycam .b3-weap, .b3.victorycam .b3-land, .b3.victorycam .b3-left, .b3.victorycam .b3-joy, .b3.victorycam .b3-btn, .b3.victorycam .b3-items, .b3.victorycam .b3-chat:not(.open), .b3.victorycam .b3-top, .b3.victorycam .b3-msg, .b3.victorycam .b3-tags, .b3.victorycam .b3-ammo-pick { opacity: 0; pointer-events: none; transition: opacity .3s; }
.b3-victory { position: absolute; left: 50%; top: 13vh; transform: translateX(-50%) scale(.6); opacity: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; pointer-events: none; transition: opacity .35s, transform .5s cubic-bezier(.2, 1.6, .4, 1); text-align: center; }
.b3-victory.on { opacity: 1; transform: translateX(-50%) scale(1); }
.b3-victory b { font-size: clamp(48px, 9vw, 96px); font-weight: 900; letter-spacing: 3px; line-height: 1; background: linear-gradient(180deg, #fff6b0, #ffcf3a 45%, #ff8a1f); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #7a3b00; filter: drop-shadow(0 4px 0 #5a2a00) drop-shadow(0 0 22px #ffcf3a99); animation: vicPulse 1.1s ease-in-out infinite alternate; }
.b3-victory.lose b { background: linear-gradient(180deg, #e6ecff, #8ea4d4 50%, #4d5f8a); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 2px #1c2848; filter: drop-shadow(0 4px 0 #101830); animation: none; }
.b3-victory.draw b { background: linear-gradient(180deg, #ffffff, #b8f0ff); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 2px #1c4a68; }
.b3-victory small { margin-top: 8px; font-size: 18px; font-weight: 800; color: #fff; text-shadow: 0 2px 6px #000; }
.b3-victory em { margin-top: 6px; font-style: normal; font-size: 11px; color: #fffa; text-shadow: 0 1px 3px #000; }
@keyframes vicPulse { to { transform: scale(1.06); } }

/* ---------- room: mode switch + invite ---------- */
.seg.mode.big button { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; line-height: 1.1; } .seg.mode.big b { font-size: 18px; } .seg.mode.big small { font-size: 11px; opacity: .8; }
.room-mode { display: flex; align-items: center; gap: 6px; } .room-mode span { font-size: 13px; color: var(--muted); }
.room-mode button { min-width: 54px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: #fff; font: inherit; font-weight: 700; }
.room-mode button.active { background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #3a2200; border-color: transparent; }
.room-code .invite-btn { margin-right: 8px; }
.inv { display: grid; gap: 8px; min-width: min(420px, 80vw); }
.inv-q { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: #0008; color: #fff; font: inherit; }
.inv-list { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.inv-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 12px; background: #ffffff0d; }
.inv-row img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; object-position: top; background: #fff1; }
.inv-row b { font-size: 14px; } .inv-row small { display: block; font-size: 11px; color: var(--muted); }
.inv-fr { font-size: 10px; padding: 1px 6px; border-radius: 99px; background: #5fe39a33; color: #7dff9a; }

/* ---------- dress room on short / narrow screens (phones in landscape): nothing may overlap ---------- */
@media (max-height: 560px), (max-width: 1000px) {
  .dr-tag { left: 10px; top: 6px; } .dr-tag b { font-size: 16px; } .dr-tag small { font-size: 10px; }
  .dr-shop { left: 8px; top: 44px; grid-template-rows: auto; padding: 4px 10px 4px 6px; font-size: 16px; border-radius: 11px; box-shadow: 0 3px 0 #a95812, 0 5px 12px #0006; }
  .dr-shop b { font-size: 12px; } .dr-shop small { display: none; } .dr-shop > :first-child { grid-row: auto; }
  .dr-ammo { left: 8px; top: 80px; padding: 3px 9px 3px 6px; font-size: 13px; border-radius: 10px; }
  .dr-ammo b { font-size: 11px; }
  .dr-charmbox { right: auto; left: 8px; top: auto; bottom: 8px; width: auto; display: grid; grid-template-columns: 42px 42px; gap: 4px; padding: 4px 5px 5px; border-radius: 12px; }
  .dr-charmbox small { grid-column: 1 / -1; font-size: 9px; line-height: 1.1; }
  .dr-charmbox small br { display: none; }
  .dr-charmbox button { padding: 3px 0 2px; border-radius: 10px; } .dr-charmbox button span { font-size: 17px; } .dr-charmbox button em { font-size: 8px; max-width: 40px; }
  .dr-tip { display: none; }
}
@media (max-width: 800px) and (max-height: 560px) { .dr-charmbox small { display: none; } .dr-charmbox { grid-template-columns: 38px 38px; } .dr-ammo b { font-size: 10px; } }

/* minimap (bottom-right) — tap to open the overhead view */
.b3-mini { position: absolute; right: 12px; bottom: 14px; width: 208px; height: 112px; border-radius: 12px; background: #0a1a4466; border: 2px solid #ffffffaa; box-shadow: 0 4px 14px #0005; z-index: 3; cursor: pointer; overflow: hidden; touch-action: none; }
.b3-mini canvas { width: 100%; height: 100%; display: block; }
.b3-mini b { position: absolute; left: 6px; top: 4px; font-size: 10px; color: #fff; text-shadow: 0 1px 2px #000; pointer-events: none; opacity: .85; }
.b3-mini.on { border-color: #ffd34f; box-shadow: 0 0 0 2px #ffd34f88, 0 4px 14px #0005; }
.b3-mini.on b::after { content: ' · แตะเพื่อกลับ'; }
.b3.touch .b3-mini { right: 196px; bottom: 10px; width: 150px; height: 81px; }
.b3.killcam .b3-mini, .b3.victorycam .b3-mini { opacity: 0; pointer-events: none; }
/* preset power */
.pw-set { position: absolute; top: -7px; bottom: -7px; width: 4px; margin-left: -2px; background: #ff7a1a; border-radius: 3px; box-shadow: 0 0 0 2px #fff, 0 0 10px #ff7a1a; pointer-events: none; }
.pw-clear { display: none; margin: 4px auto 0; padding: 2px 10px; font-size: 11px; border-radius: 99px; border: 1px solid #ffffff66; background: #0a183c99; color: #fff; cursor: pointer; }
.b3-power.preset .pw-clear { display: block; }
.b3-power .pw-track { cursor: ew-resize; }
.rule-note { display: block; margin: 4px 0; color: #ffcf9a; font-weight: 700; }
.pro-note { margin: 8px auto; padding: 6px 12px; border-radius: 10px; background: #ff8a2a22; border: 1px solid #ff8a2a88; color: #ffcf9a; font-weight: 700; text-align: center; max-width: 420px; }

.rank-line { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; flex-wrap: wrap; }
.rank-line span { font-size: 12px; color: var(--muted); margin-right: 2px; }
.rank-line button { flex: 1; padding: 7px 8px; border-radius: 10px; border: 1px solid var(--line2); background: #19336f; color: #dfe8ff; font-weight: 700; font-size: 13px; cursor: pointer; }
.rank-line button.active { background: linear-gradient(180deg, #ffd34f, #f0a92a); color: #3a1d00; border-color: #ffe9a8; }
.rank-line-note { display: block; font-size: 11.5px; color: #ffcf9a; margin-bottom: 8px; }

/* ---------- beginner's guide ---------- */
.gd-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.gd-tabs button { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line2); background: #19336f; font-size: 20px; cursor: pointer; opacity: .65; }
.gd-tabs button.on { opacity: 1; background: linear-gradient(180deg, #ffd34f, #f0a92a); box-shadow: 0 0 0 2px #ffe9a8; }
.gd-page { min-height: 300px; }
.gd-page h3 { margin: 4px 0 12px; font-size: 20px; } .gd-page h3 small { font-size: 12px; color: var(--muted); font-weight: 600; margin-left: 6px; }
.gd-page ul, .gd-page ol { margin: 10px 0; padding-left: 22px; line-height: 1.75; } .gd-page li { margin: 3px 0; }
.gd-tip { background: #ffd34f1a; border: 1px solid #ffd34f55; border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.gd-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.gd kbd { display: inline-block; min-width: 22px; padding: 1px 6px; margin: 0 2px; border-radius: 6px; background: #fff; color: #1a2a55; font: 700 12px/1.6 inherit; text-align: center; box-shadow: 0 2px 0 #9aa9cc; }
.gd-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.gd-keys > div { background: #0a1a44aa; border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gd-keys span { font-size: 22px; } .gd-keys b { margin-left: 4px; }
.gd-art { position: relative; height: 96px; border-radius: 14px; margin-bottom: 8px; background: linear-gradient(180deg, #8fd3ff, #e8f6ff 70%, #fff); overflow: hidden; color: #1a2a55; font-weight: 800; }
.gd-islands .isl { position: absolute; bottom: 14px; padding: 6px 14px 10px; border-radius: 40% 40% 50% 50%; background: linear-gradient(180deg, #74d36a 55%, #9b6b45 55%); font-size: 22px; }
.gd-islands .a { left: 8%; } .gd-islands .b { right: 8%; }
.gd-islands .arc { position: absolute; left: 22%; right: 22%; top: 18px; height: 70px; border: 4px dashed #ff7a1a; border-bottom: none; border-radius: 50% 50% 0 0; }
.gd-wind .w { position: absolute; left: 14px; top: 10px; background: #0a1a44; color: #fff; padding: 4px 10px; border-radius: 10px; }
.gd-wind .dot { position: absolute; bottom: 14px; font-size: 13px; padding: 4px 8px; border-radius: 10px; background: #fffd; }
.gd-wind .still { left: 28%; color: #ff7a1a; } .gd-wind .real { right: 14%; color: #d62f2f; }
.gd-mini { background: linear-gradient(90deg, #0a1a44cc, #1d3a7acc); color: #fff; display: grid; place-items: center; height: 60px; }
.gd-gauge { margin: 18px 6px 8px; } .gd-track { position: relative; height: 20px; border-radius: 10px; background: #000a; border: 2px solid #fffa; }
.gd-pre { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, #ffb36688, #ff7a1acc); }
.gd-run { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, #7fd8ff, #2f7bff); }
.gd-track em { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; background: #ff7a1a; border-radius: 3px; box-shadow: 0 0 0 2px #fff; }
.gd-ticks { display: flex; justify-content: space-around; font-size: 11px; color: var(--muted); margin-top: 4px; } .gd-ticks b { display: block; color: var(--gold); text-align: center; }
.gd-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.gd-items > div { position: relative; background: #0a1a44aa; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; }
.gd-items span { font-size: 24px; } .gd-items small { color: var(--muted); font-size: 12px; } .gd-items kbd { position: absolute; right: 8px; top: 8px; }
.gd-path li { margin: 6px 0; }
/* first-battle coach bubble */
.coach { position: absolute; left: 50%; top: 74px; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 10px; max-width: min(560px, 86vw); padding: 10px 12px 10px 16px; border-radius: 16px; background: linear-gradient(180deg, #fff7d6, #ffe08a); color: #3a2400; font-weight: 800; box-shadow: 0 6px 18px #0006, 0 0 0 3px #ffffffaa; transition: opacity .2s; }
.coach.pop { animation: coachPop .35s ease-out; } .coach.hide { opacity: 0; pointer-events: none; }
.coach b { font-size: 15px; line-height: 1.4; }
.coach-x { flex: none; border: none; border-radius: 99px; padding: 4px 10px; background: #3a240022; color: #3a2400; font-weight: 800; font-size: 12px; cursor: pointer; }
@keyframes coachPop { from { transform: translate(-50%, -8px) scale(.92); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
.b3.touch .coach { top: 64px; } .b3.touch .coach b { font-size: 13px; }
.modal:has(.gd) { max-height: 94vh; overflow-y: auto; }
@media (max-height: 560px) {
  .gd-page { min-height: 0; } .gd-page h3 { font-size: 16px; margin: 2px 0 6px; }
  .gd-tabs { margin-bottom: 4px; } .gd-tabs button { width: 34px; height: 34px; font-size: 16px; }
  .gd-art { height: 64px; } .gd-keys > div { padding: 6px 8px; } .gd-page ul, .gd-page ol { line-height: 1.5; font-size: 13.5px; }
  .gd-nav { position: sticky; bottom: -2px; background: linear-gradient(180deg, transparent, #13286a 40%); padding-top: 8px; }
}
/* real-time mode */
.b3-btn.b3-fire.reload { background: radial-gradient(circle at 40% 35%, #7a8aa8, #3c4766); border-color: #c8d2ea; opacity: .85; }
.b3-power.reload .pw-head { color: #ffd27a; }
.b3-timer.rt { min-width: 64px; font-variant-numeric: tabular-nums; }
.room-style button { min-width: 0; }
.rank-opts .rank-line + .rank-line { margin-top: 4px; }
.rank-guest { margin: 2px 0 8px; padding: 6px 10px; border-radius: 10px; background: #ffd34f1a; border: 1px solid #ffd34f55; font-size: 12.5px; color: #ffe39a; }