:root {
  --ink: #0a0815;
  --night: #100d22;
  --panel: rgba(20, 16, 41, .78);
  --panel-strong: rgba(16, 12, 34, .94);
  --line: rgba(219, 199, 255, .16);
  --line-bright: rgba(222, 205, 255, .4);
  --violet: #a981ff;
  --violet-light: #d7c4ff;
  --cyan: #7ee8ff;
  --gold: #e6c478;
  --gold-light: #fff0bf;
  --red: #ff6f83;
  --green: #75e4ba;
  --text: #f4f0ff;
  --muted: #a7a0bb;
  --shadow: 0 28px 80px rgba(3, 2, 12, .46);
  --serif: "STKaiti", "KaiTi", "FangSong", serif;
  --sans: "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
}

body.gameover-locked {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

body {
  overflow-x: hidden;
}

button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.ambient {
  position: fixed;
  z-index: 0;
  width: 42vw;
  height: 42vw;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .2;
  pointer-events: none;
}

.ambient-one { top: -18vw; left: -12vw; background: #6337c7; }
.ambient-two { right: -16vw; bottom: -22vw; background: #1b92ac; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: .035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

#app { position: relative; z-index: 1; min-height: 100vh; }
.screen { display: none; min-height: 100vh; }
.screen.is-active { display: flex; }

.glass-panel {
  background: linear-gradient(145deg, rgba(30, 24, 57, .78), rgba(12, 10, 29, .82));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), var(--shadow);
  backdrop-filter: blur(18px);
}

/* Start screen */
.start-screen {
  position: relative;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8, 7, 18, .18), rgba(8, 7, 18, .72) 58%, rgba(8, 7, 18, .92)),
    linear-gradient(0deg, #0a0815 0%, transparent 34%),
    url("assets/fate-arena.png") center / cover no-repeat;
}

.start-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 26% 44%, rgba(141, 101, 255, .24), transparent 32%), linear-gradient(115deg, rgba(7, 6, 18, .2), rgba(7, 6, 18, .64));
  pointer-events: none;
}

.start-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1480px, calc(100% - 80px));
  margin: 0 auto;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: white;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(229, 196, 120, .55);
  transform: rotate(45deg);
  background: rgba(24, 17, 43, .68);
}

.brand-mark svg {
  width: 31px;
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 1.6;
  transform: rotate(-45deg);
}

.brand b { display: block; font-family: var(--serif); font-size: 22px; letter-spacing: .18em; }
.brand small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; letter-spacing: .42em; }

.ghost-button, .danger-button {
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid var(--line-bright);
  background: rgba(16, 12, 35, .46);
  color: var(--violet-light);
  cursor: pointer;
  transition: .22s ease;
}

.ghost-button:hover { border-color: var(--gold); color: var(--gold-light); background: rgba(35, 27, 58, .76); }

.start-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(360px, 1.05fr) minmax(520px, .95fr);
  align-items: center;
  gap: clamp(60px, 7vw, 130px);
  width: min(1420px, calc(100% - 100px));
  margin: auto;
  padding: 48px 0 74px;
}

.hero-copy { max-width: 680px; padding-bottom: 4vh; }
.eyebrow { display: flex; align-items: center; gap: 14px; color: var(--gold-light); font-size: 13px; letter-spacing: .32em; }
.eyebrow span { display: inline-block; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.hero-copy h1 { margin: 22px 0; font-family: var(--serif); font-size: clamp(62px, 6.5vw, 110px); font-weight: 400; line-height: .94; letter-spacing: .08em; text-shadow: 0 12px 50px rgba(8, 4, 22, .8); }
.hero-copy h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--gold-light); text-shadow: 0 0 45px rgba(229, 196, 120, .14); }
.hero-lead { max-width: 610px; margin: 30px 0 34px; color: #d2cce1; font-family: var(--serif); font-size: 19px; line-height: 2; letter-spacing: .12em; }
.feature-row { display: flex; gap: 12px; flex-wrap: wrap; }
.feature-row span { padding: 10px 14px; border: 1px solid rgba(231, 214, 255, .16); background: rgba(11, 8, 26, .44); color: var(--muted); font-size: 12px; }
.feature-row b { color: var(--gold-light); font-size: 16px; margin-right: 3px; }

.entry-panel {
  position: relative;
  width: 100%;
  max-width: 650px;
  margin-left: auto;
  padding: 34px 38px 28px;
  border: 1px solid rgba(231, 215, 255, .22);
  background: linear-gradient(145deg, rgba(24, 19, 46, .94), rgba(10, 8, 25, .91));
  box-shadow: 0 34px 110px rgba(2, 1, 11, .64), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.entry-panel::before, .entry-panel::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: var(--gold);
  opacity: .75;
}
.entry-panel::before { left: -1px; top: -1px; border-left: 2px solid; border-top: 2px solid; }
.entry-panel::after { right: -1px; bottom: -1px; border-right: 2px solid; border-bottom: 2px solid; }

.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.section-index { margin: 0 0 7px; color: var(--gold); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; }
.panel-heading h2, .modal-card h2 { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: .1em; }
.seal { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(230, 196, 120, .55); color: var(--gold-light); font-family: var(--serif); transform: rotate(45deg); }
.seal i, .modal-emblem i, .log-glyph i, .rule-grid article > span i { display: inline-block; font-style: normal; transform: rotate(-45deg); }

.field-label { display: block; margin: 17px 0 9px; color: #dcd6eb; font-size: 12px; letter-spacing: .14em; }
.row-label { display: flex; align-items: center; justify-content: space-between; }
.row-label small { color: #777086; font-size: 10px; letter-spacing: 0; }
.name-field { display: flex; align-items: center; height: 48px; border: 1px solid var(--line); background: rgba(7, 5, 19, .46); transition: .2s; }
.name-field:focus-within { border-color: rgba(169, 129, 255, .7); box-shadow: 0 0 0 3px rgba(169, 129, 255, .08); }
.name-field > span { padding-left: 15px; color: var(--gold); }
.name-field input { flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; outline: 0; background: transparent; color: white; letter-spacing: .08em; }
.name-field small { padding-right: 14px; color: #70697e; }

.character-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.character-card { position: relative; height: 188px; padding: 0; overflow: hidden; border: 1px solid var(--line); background: #171128; cursor: pointer; text-align: left; transition: .25s ease; }
.character-card::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; transition: .2s; pointer-events: none; }
.character-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 21%; filter: saturate(.78) brightness(.75); transform: scale(1.02); transition: .35s ease; }
.character-card[data-character="male"] img { object-position: center 15%; transform: scale(1.12); }
.character-card[data-character="female"] img { object-position: center 18%; }
.character-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 4, 19, .98) 0, rgba(7, 4, 19, .28) 52%, transparent 74%); }
.character-info { position: absolute; z-index: 2; left: 16px; right: 12px; bottom: 13px; }
.character-info small, .character-info b, .character-info em { display: block; }
.character-info small { color: var(--gold); font-size: 9px; letter-spacing: .14em; }
.character-info b { margin: 2px 0; font-family: var(--serif); font-size: 22px; letter-spacing: .18em; }
.character-info em { color: #9891a7; font-size: 9px; font-style: normal; letter-spacing: .07em; }
.check-mark { position: absolute; z-index: 3; top: 10px; right: 10px; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--gold); color: #241b0b; font-size: 12px; opacity: 0; transform: scale(.7); transition: .2s; }
.character-card:hover img, .character-card.is-selected img { filter: saturate(1) brightness(.92); transform: scale(1.06); }
.character-card[data-character="male"]:hover img, .character-card[data-character="male"].is-selected img { transform: scale(1.16); }
.character-card.is-selected { border-color: var(--gold); box-shadow: 0 0 32px rgba(230, 196, 120, .12); }
.character-card.is-selected::after { inset: 5px; border-color: rgba(255, 240, 191, .32); }
.character-card.is-selected .check-mark { opacity: 1; transform: scale(1); }

.player-count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.player-count button { display: flex; align-items: baseline; justify-content: center; gap: 3px; height: 47px; border: 1px solid var(--line); background: rgba(7, 5, 19, .46); color: #878094; cursor: pointer; transition: .2s; }
.player-count b { font-family: var(--serif); font-size: 21px; font-weight: 400; }
.player-count small { font-size: 9px; }
.player-count button:hover { border-color: var(--line-bright); color: white; }
.player-count button.is-selected { border-color: var(--violet); background: linear-gradient(135deg, rgba(120, 80, 215, .34), rgba(66, 49, 117, .2)); color: var(--violet-light); box-shadow: inset 0 0 24px rgba(169, 129, 255, .08); }

.primary-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  margin-top: 22px;
  padding: 0 20px 0 24px;
  border: 1px solid rgba(255, 240, 191, .64);
  background: linear-gradient(105deg, #9270df, #60429d 55%, #ae8b4f);
  color: white;
  box-shadow: 0 12px 36px rgba(66, 39, 126, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
  cursor: pointer;
  letter-spacing: .16em;
  transition: .25s ease;
}
.primary-button::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255, 255, 255, .15); pointer-events: none; }
.primary-button:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 18px 44px rgba(79, 47, 143, .42); }
.primary-button i { font-size: 21px; font-style: normal; }
.primary-button.compact { display: inline-flex; width: auto; min-width: 150px; justify-content: center; margin-top: 18px; }
.entry-note { margin: 12px 0 0; color: #6f697b; font-size: 9px; text-align: center; letter-spacing: .13em; }
.entry-note span { color: var(--gold); }
.entry-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.entry-actions .primary-button { min-width: 0; }
.online-entry { min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; border: 1px solid rgba(112, 220, 203, .48); border-radius: 6px; color: #f7fbff; background: linear-gradient(135deg, #174d59, #3b4779); box-shadow: 0 10px 26px rgba(20, 48, 80, .25); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.online-entry:hover { filter: brightness(1.12); transform: translateY(-2px); }
.online-entry i { font-size: 18px; font-style: normal; color: #8ff0df; }
.online-entry.is-disabled { border-color: rgba(155, 149, 169, .18); background: rgba(35, 32, 43, .52); box-shadow: none; color: #6f6977; cursor: not-allowed; filter: grayscale(1); }
.online-entry.is-disabled:hover { filter: grayscale(1); transform: none; }
.start-footer { position: absolute; z-index: 2; bottom: 25px; left: 50%; display: flex; align-items: center; gap: 12px; color: #615b6d; font-size: 9px; letter-spacing: .22em; transform: translateX(-50%); }
.start-footer i { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }

/* Battle screen */
.game-screen {
  position: relative;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
  background: radial-gradient(circle at 50% 55%, #1c1640 0, #0a0817 58%, #06050e 100%);
}

.orientation-gate,
.fullscreen-resume { display: none; }
.mobile-health { display: none; }

.game-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 76px;
  margin: 14px 18px 0;
  padding: 10px 20px;
}

.back-button { justify-self: start; padding: 10px 14px; border: 0; background: transparent; color: #aaa3b8; cursor: pointer; transition: .2s; }
.back-button span { color: var(--gold); margin-right: 7px; }
.back-button:hover { color: white; }
.round-center { min-width: 440px; text-align: center; }
.round-kicker { display: flex; justify-content: center; align-items: center; gap: 11px; color: var(--gold); font-size: 9px; letter-spacing: .18em; }
.round-kicker i { width: 3px; height: 3px; border-radius: 50%; background: var(--violet); }
.round-status { margin: 5px 0 7px; font-family: var(--serif); font-size: 17px; letter-spacing: .13em; }
.timer-track { width: 300px; height: 2px; margin: auto; overflow: hidden; background: rgba(255, 255, 255, .1); }
.timer-track span { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg, var(--cyan), var(--violet), var(--gold)); box-shadow: 0 0 8px var(--violet); transition: transform .1s linear; }
.sudden-badge { justify-self: end; display: flex; align-items: center; gap: 10px; color: #7f788e; }
.sudden-badge > span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); transform: rotate(45deg); }
.sudden-badge div { display: flex; flex-direction: column; }
.sudden-badge small { font-size: 9px; letter-spacing: .1em; }
.sudden-badge b { margin-top: 3px; color: #aaa3b7; font-size: 10px; font-weight: 400; }
.sudden-badge.is-active { color: var(--red); }
.sudden-badge.is-active > span { border-color: var(--red); box-shadow: 0 0 18px rgba(255, 111, 131, .25); }
.sudden-badge.is-active b { color: #ffd0d7; }

.battle-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 235px minmax(600px, 1fr) 225px;
  gap: 14px;
  flex: 1;
  min-height: 0;
  padding: 14px 18px 128px;
}

.side-panel { align-self: stretch; padding: 18px 14px; overflow: hidden; }
.side-title { display: flex; align-items: baseline; justify-content: space-between; margin: 0 3px 15px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.side-title span { font-family: var(--serif); letter-spacing: .12em; }
.side-title small { color: #716a7f; font-size: 9px; }
.roster { display: flex; flex-direction: column; gap: 7px; }
.roster-item { position: relative; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; min-height: 62px; padding: 8px 9px; border: 1px solid transparent; background: rgba(5, 4, 16, .26); transition: .25s; }
.roster-item.is-current { border-color: rgba(126, 232, 255, .45); background: linear-gradient(90deg, rgba(64, 160, 186, .16), rgba(5, 4, 16, .2)); }
.roster-item.is-player::after { content: "你"; position: absolute; right: 5px; top: 4px; color: var(--gold); font-size: 7px; }
.roster-item.is-dead { filter: grayscale(1); opacity: .38; }
.roster-avatar { position: relative; width: 38px; height: 38px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; background: #19102d; }
.roster-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.roster-avatar .charge-dot { position: absolute; right: 0; bottom: 0; width: 9px; height: 9px; border: 2px solid #171028; border-radius: 50%; background: var(--violet); box-shadow: 0 0 8px var(--violet); }
.roster-name { display: block; max-width: 100px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.roster-state { margin-top: 5px; color: #777184; font-size: 8px; }
.hearts { display: flex; gap: 2px; margin-top: 3px; }
.heart { color: #3d3948; font-size: 10px; }
.heart.is-full { color: var(--red); text-shadow: 0 0 7px rgba(255, 111, 131, .5); }
.roster-ap { min-width: 28px; text-align: center; }
.roster-ap b { display: block; color: var(--cyan); font-family: var(--serif); font-size: 17px; }
.roster-ap small { color: #6f6979; font-size: 7px; }
.legend { display: flex; gap: 13px; margin: 14px 2px 0; padding-top: 12px; border-top: 1px solid var(--line); color: #686171; font-size: 8px; }
.legend i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; }
.legend-charge { background: var(--violet); box-shadow: 0 0 5px var(--violet); }
.legend-stand { border: 1px solid var(--gold); }

.arena-column { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.arena-shell { position: relative; flex: 1; min-height: 460px; overflow: hidden; border: 1px solid rgba(206, 189, 236, .12); background: #0e0b20; box-shadow: inset 0 0 80px rgba(4, 3, 13, .8), 0 22px 60px rgba(2, 1, 10, .38); }
.arena-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .67; filter: saturate(.8) brightness(.74); }
.arena-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 23%, rgba(7, 5, 19, .15) 55%, rgba(7, 5, 19, .9) 110%), linear-gradient(0deg, rgba(6, 5, 15, .48), transparent 35%); }
.fate-core { position: absolute; z-index: 2; left: 50%; top: 50%; width: 82px; height: 82px; transform: translate(-50%, -50%); pointer-events: none; }
.fate-core i, .fate-core span { position: absolute; inset: 0; border: 1px solid rgba(184, 145, 255, .35); transform: rotate(45deg); animation: coreSpin 18s linear infinite; }
.fate-core span { inset: 16px; border-color: rgba(126, 232, 255, .5); animation-direction: reverse; animation-duration: 10s; }
@keyframes coreSpin { to { transform: rotate(405deg); } }
.arena-nodes { position: absolute; z-index: 4; inset: 0; }
.arena-node { position: absolute; width: 124px; height: 92px; transform: translate(-50%, -50%); border: 1px solid rgba(221, 205, 255, .14); border-radius: 50%; background: radial-gradient(ellipse, rgba(113, 88, 163, .12), transparent 68%); transition: .24s; }
.arena-node::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(229, 196, 120, .13); border-radius: 50%; }
.arena-count-3 .arena-node[data-node="0"] { left: 50%; top: 19%; }
.arena-count-3 .arena-node[data-node="1"] { left: 77.7%; top: 67%; }
.arena-count-3 .arena-node[data-node="2"] { left: 22.3%; top: 67%; }
.arena-count-4 .arena-node[data-node="0"] { left: 50%; top: 16%; }
.arena-count-4 .arena-node[data-node="1"] { left: 86%; top: 51%; }
.arena-count-4 .arena-node[data-node="2"] { left: 50%; top: 86%; }
.arena-count-4 .arena-node[data-node="3"] { left: 14%; top: 51%; }
.arena-count-5 .arena-node[data-node="0"] { left: 50%; top: 16%; }
.arena-count-5 .arena-node[data-node="1"] { left: 84.2%; top: 40.2%; }
.arena-count-5 .arena-node[data-node="2"] { left: 71.2%; top: 79.3%; }
.arena-count-5 .arena-node[data-node="3"] { left: 28.8%; top: 79.3%; }
.arena-count-5 .arena-node[data-node="4"] { left: 15.8%; top: 40.2%; }
.arena-count-6 .arena-node[data-node="0"] { left: 50%; top: 16%; }
.arena-count-6 .arena-node[data-node="1"] { left: 81.2%; top: 33.5%; }
.arena-count-6 .arena-node[data-node="2"] { left: 81.2%; top: 68.5%; }
.arena-count-6 .arena-node[data-node="3"] { left: 50%; top: 86%; }
.arena-count-6 .arena-node[data-node="4"] { left: 18.8%; top: 68.5%; }
.arena-count-6 .arena-node[data-node="5"] { left: 18.8%; top: 33.5%; }
.arena-node .node-label { position: absolute; left: 50%; top: -15px; display: flex; align-items: center; gap: 4px; transform: translateX(-50%); color: rgba(239, 228, 255, .52); font-size: 8px; white-space: nowrap; }
.node-label i { width: 14px; height: 1px; background: rgba(230, 196, 120, .35); }
.arena-node.is-targetable { z-index: 7; border-color: var(--cyan); background: radial-gradient(ellipse, rgba(71, 190, 217, .26), rgba(63, 132, 164, .04)); box-shadow: 0 0 25px rgba(126, 232, 255, .22), inset 0 0 22px rgba(126, 232, 255, .14); cursor: pointer; animation: nodePulse 1.2s ease-in-out infinite; }
.arena-node.is-targetable:hover { background: radial-gradient(ellipse, rgba(126, 232, 255, .38), rgba(63, 132, 164, .08)); transform: translate(-50%, -50%) scale(1.08); }
@keyframes nodePulse { 50% { box-shadow: 0 0 34px rgba(126, 232, 255, .36), inset 0 0 26px rgba(126, 232, 255, .18); } }

.battle-token { position: absolute; z-index: 5; width: 48px; height: 48px; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: transparent; cursor: default; transition: left .42s ease, top .42s ease, filter .22s; }
.battle-token.slot-0 { left: 25%; top: 22%; }
.battle-token.slot-1 { left: 50%; top: 18%; }
.battle-token.slot-2 { left: 75%; top: 22%; }
.battle-token.slot-3 { left: 23%; top: 50%; }
.battle-token.slot-4 { left: 50%; top: 50%; }
.battle-token.slot-5 { left: 77%; top: 50%; }
.battle-token.slot-6 { left: 26%; top: 78%; }
.battle-token.slot-7 { left: 50%; top: 82%; }
.battle-token.slot-8 { left: 74%; top: 78%; }
.battle-token .token-ring { position: absolute; inset: 0; overflow: hidden; border: 2px solid rgba(244, 240, 255, .62); border-radius: 50%; background: #211737; box-shadow: 0 6px 14px rgba(3, 2, 10, .58); }
.battle-token img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.battle-token .token-name { position: absolute; left: 50%; bottom: -14px; max-width: 76px; padding: 2px 6px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 9px; background: rgba(7, 5, 17, .86); color: #e8e2f2; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; transform: translateX(-50%); }
.battle-token .token-hp { position: absolute; left: 7px; right: 7px; bottom: -4px; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(5, 3, 12, .9); }
.battle-token .token-hp i { display: block; height: 100%; background: linear-gradient(90deg, #ff667b, #ff98a7); transition: width .28s; }
.hp-fill.hp-0 { width: 0; }
.hp-fill.hp-1 { width: 25%; }
.hp-fill.hp-2 { width: 50%; }
.hp-fill.hp-3 { width: 75%; }
.hp-fill.hp-4 { width: 100%; }
.battle-token .token-charge { position: absolute; right: -2px; top: -2px; display: grid; width: 17px; height: 17px; place-items: center; border: 1px solid #dcc9ff; border-radius: 50%; background: #6e48bb; color: white; font-size: 9px; box-shadow: 0 0 12px #9f75f3; }
.battle-token.is-player .token-ring { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(230, 196, 120, .13), 0 7px 16px rgba(3, 2, 10, .62); }
.battle-token.is-current .token-ring { border-color: var(--cyan); box-shadow: 0 0 19px rgba(126, 232, 255, .62); animation: currentPulse 1.1s ease-in-out infinite; }
.battle-token.is-targetable { cursor: crosshair; filter: drop-shadow(0 0 9px rgba(255, 111, 131, .9)); }
.battle-token.is-targetable .token-ring { border-color: var(--red); animation: targetPulse .8s ease-in-out infinite; }
.battle-token.is-targetable:hover { transform: translate(-50%, -50%) scale(1.14); }
@keyframes currentPulse { 50% { box-shadow: 0 0 27px rgba(126, 232, 255, .86); } }
@keyframes targetPulse { 50% { border-color: #ffd2d8; box-shadow: 0 0 18px rgba(255, 111, 131, .76); } }
.battle-token.anim-attack { animation: tokenAttack .52s ease; }
.battle-token.anim-hit { animation: tokenHit .5s ease; }
.battle-token.anim-heal { animation: tokenHeal .65s ease; }
.battle-token.anim-charge { animation: tokenCharge .65s ease; }
.battle-token.anim-stand { animation: tokenStand .85s ease; }
@keyframes tokenAttack { 35% { transform: translate(-50%, -50%) scale(1.2) rotate(-8deg); filter: brightness(1.6); } 68% { transform: translate(-50%, -50%) scale(.91) rotate(5deg); } }
@keyframes tokenHit { 25%, 70% { transform: translate(calc(-50% - 6px), -50%); filter: brightness(2) saturate(.3); } 45%, 85% { transform: translate(calc(-50% + 5px), -50%); } }
@keyframes tokenHeal { 40% { transform: translate(-50%, -50%) scale(1.16); filter: drop-shadow(0 0 13px var(--green)) brightness(1.4); } }
@keyframes tokenCharge { 50% { transform: translate(-50%, -50%) scale(1.18) rotate(8deg); filter: drop-shadow(0 0 18px var(--violet)) brightness(1.35); } }
@keyframes tokenStand { 20% { filter: brightness(.15); } 55% { transform: translate(-50%, -50%) scale(1.28); filter: drop-shadow(0 0 25px var(--gold)) brightness(2); } }
.arena-shell.fx-shake { animation: arenaShake .35s ease; }
@keyframes arenaShake { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }

.selection-hint { position: absolute; z-index: 12; left: 50%; bottom: 18px; padding: 8px 15px; border: 1px solid rgba(126, 232, 255, .32); background: rgba(8, 7, 22, .84); color: var(--cyan); font-size: 10px; letter-spacing: .1em; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: .22s; }
.selection-hint.is-visible { opacity: 1; transform: translate(-50%, 0); }
.battle-log { display: grid; grid-template-columns: 31px 1fr; align-items: center; gap: 10px; min-height: 49px; margin-top: 9px; padding: 8px 12px; }
.log-glyph { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(230, 196, 120, .3); color: var(--gold); font-family: var(--serif); font-size: 11px; transform: rotate(45deg); }
.battle-log > div { height: 31px; overflow: hidden; }
.log-line { color: #888193; font-size: 9px; line-height: 15px; white-space: nowrap; }
.log-line:first-child { color: #d5cfe0; }
.log-line b { color: var(--gold-light); font-weight: 400; }

.action-queue { display: flex; flex-direction: column; gap: 8px; min-height: 100px; }
.queue-empty { padding: 24px 8px; color: #5f596a; font-size: 10px; line-height: 1.8; text-align: center; }
.queue-item { position: relative; display: grid; grid-template-columns: 23px 34px 1fr auto; align-items: center; gap: 8px; padding: 8px 7px; border: 1px solid transparent; background: rgba(5, 4, 16, .26); transition: .25s; }
.queue-item.is-current { border-color: rgba(126, 232, 255, .35); background: rgba(55, 140, 164, .12); }
.queue-order { color: #686171; font-family: var(--serif); font-size: 13px; }
.queue-avatar { width: 31px; height: 31px; overflow: hidden; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15); }
.queue-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.queue-name { min-width: 0; }
.queue-name b, .queue-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-name b { font-size: 10px; font-weight: 400; }
.queue-name small { margin-top: 3px; color: #716b7b; font-size: 7px; }
.dice { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid rgba(230, 196, 120, .4); color: var(--gold-light); font-family: var(--serif); font-size: 11px; transform: rotate(45deg); }
.dice b { transform: rotate(-45deg); }
.queue-tip { display: flex; gap: 9px; margin-top: 18px; padding: 12px 8px; border-top: 1px solid var(--line); color: #716b7d; }
.queue-tip span { color: var(--gold); font-size: 10px; }
.queue-tip p { margin: 0; font-size: 8px; line-height: 1.7; }

.action-dock { position: fixed; z-index: 25; left: 50%; bottom: 16px; display: grid; grid-template-columns: 205px auto; align-items: center; gap: 14px; width: min(1040px, calc(100% - 60px)); min-height: 96px; padding: 10px 14px; transform: translateX(-50%); }
.current-actor { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; height: 70px; padding-right: 14px; border-right: 1px solid var(--line); }
.mini-avatar { width: 45px; height: 45px; overflow: hidden; border: 1px solid var(--gold); border-radius: 50%; background: #1a1230; }
.mini-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.current-actor small { display: block; color: #6f6979; font-size: 8px; }
.current-actor b { display: block; max-width: 75px; margin-top: 4px; overflow: hidden; font-family: var(--serif); font-size: 13px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.current-ap { text-align: center; }
.current-ap span { display: block; margin-top: 2px; color: var(--cyan); font-family: var(--serif); font-size: 23px; text-shadow: 0 0 12px rgba(126, 232, 255, .42); }
.action-buttons { display: grid; grid-template-columns: repeat(4, 1fr) 1.35fr; gap: 7px; }
.action-buttons button { position: relative; display: grid; grid-template-columns: 25px 1fr; grid-template-rows: 1fr 1fr; align-items: center; min-width: 92px; height: 64px; padding: 8px 10px; border: 1px solid rgba(222, 205, 255, .18); background: linear-gradient(145deg, rgba(45, 34, 77, .72), rgba(17, 13, 37, .72)); cursor: pointer; text-align: left; transition: .2s; }
.action-buttons button:hover:not(:disabled), .action-buttons button.is-selected { border-color: var(--violet); background: linear-gradient(145deg, rgba(103, 73, 163, .65), rgba(33, 24, 62, .86)); transform: translateY(-2px); }
.action-buttons button:disabled { opacity: .28; cursor: not-allowed; filter: grayscale(.7); }
.action-buttons button.is-unavailable { opacity: .42; cursor: not-allowed; filter: grayscale(.5); }
.action-buttons button.is-holding { border-color: var(--gold); filter: brightness(1.2); }
.character-skill-button { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.action-icon { grid-row: 1 / span 2; color: var(--gold-light); font-family: var(--serif); font-size: 20px; text-align: center; }
.action-buttons b { align-self: end; font-size: 11px; font-weight: 400; }
.action-buttons small { align-self: start; color: #756e82; font-size: 7px; }
.action-buttons .end-action { border-color: rgba(230, 196, 120, .22); }
.skill-info-popover { position: fixed; z-index: 45; left: 50%; bottom: 122px; width: min(520px, calc(100% - 40px)); padding: 16px 19px; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: .18s ease; }
.skill-info-popover.is-visible { opacity: 1; transform: translate(-50%, 0); }
.skill-info-popover small, .skill-info-popover b { display: block; }
.skill-info-popover small { color: var(--gold); font-size: 7px; letter-spacing: .22em; }
.skill-info-popover b { margin: 5px 0; font-family: var(--serif); font-size: 18px; font-weight: 400; letter-spacing: .12em; }
.skill-info-popover p { margin: 0; color: #aaa2b5; font-size: 9px; line-height: 1.7; }

.maintenance-screen { display: grid; width: 100vw; min-height: 100vh; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 35%, rgba(126, 83, 206, .22), transparent 28%), linear-gradient(145deg, #151026, #070611); }
.maintenance-card { width: min(560px, 100%); padding: 44px; text-align: center; }
.maintenance-card h1 { margin: 10px 0 16px; font-family: var(--serif); font-size: 32px; font-weight: 400; letter-spacing: .12em; }
.maintenance-card > p:last-of-type { color: #948d9f; font-size: 11px; line-height: 1.9; }
.maintenance-card .primary-button { display: inline-flex; margin-top: 20px; text-decoration: none; }

/* RPS */
.rps-overlay { position: fixed; z-index: 22; inset: 90px 260px 120px; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: .3s; }
.rps-overlay.is-visible { opacity: 1; pointer-events: auto; }
.rps-panel { width: min(660px, 95%); padding: 28px 32px 25px; text-align: center; }
.rps-heading small { color: var(--gold); font-size: 9px; letter-spacing: .24em; }
.rps-heading h2 { margin: 7px 0; font-family: var(--serif); font-size: 27px; font-weight: 400; letter-spacing: .12em; }
.rps-heading p { margin: 0; color: #7d768a; font-size: 10px; }
.rps-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.rps-choices button { position: relative; height: 126px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 35%, rgba(114, 78, 186, .22), rgba(8, 6, 20, .66)); cursor: pointer; transition: .24s; }
.rps-choices button > span { display: grid; width: 52px; height: 52px; margin: 0 auto 8px; place-items: center; border: 1px solid rgba(230, 196, 120, .38); border-radius: 50%; color: var(--gold-light); font-family: var(--serif); font-size: 24px; box-shadow: inset 0 0 20px rgba(230, 196, 120, .06); }
.rps-choices b, .rps-choices small { display: block; }
.rps-choices b { font-family: var(--serif); font-size: 14px; font-weight: 400; }
.rps-choices small { margin-top: 3px; color: #686171; font-size: 8px; }
.rps-choices button:hover, .rps-choices button.is-selected { border-color: var(--gold); background: radial-gradient(circle at 50% 35%, rgba(174, 137, 83, .26), rgba(50, 33, 84, .66)); transform: translateY(-4px); box-shadow: 0 12px 28px rgba(7, 4, 19, .46); }
.rps-choices button:disabled { cursor: default; }
.rps-choices button:not(.is-selected):disabled { opacity: .28; transform: scale(.96); }
.rps-reveal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 32px; margin-top: 17px; }
.reveal-hand { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(4, 3, 12, .3); color: #80798a; font-size: 8px; }
.reveal-hand b { color: var(--violet-light); font-family: var(--serif); font-size: 12px; }
.reveal-hand.is-winner { border-color: rgba(230, 196, 120, .33); color: var(--gold-light); }
.reveal-hand.is-winner b { color: var(--gold); }

/* Modals and toast */
.modal-layer { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(5, 3, 13, .78); opacity: 0; pointer-events: none; backdrop-filter: blur(10px); transition: .25s; }
.modal-layer.is-visible { opacity: 1; pointer-events: auto; }
.modal-card { position: relative; width: min(520px, 100%); padding: 38px; border: 1px solid var(--line-bright); background: linear-gradient(145deg, #211932, #0d0a1c); box-shadow: 0 35px 100px rgba(0, 0, 0, .65); text-align: center; transform: translateY(12px) scale(.98); transition: .25s; }
.modal-layer.is-visible .modal-card { transform: translateY(0) scale(1); }
.modal-close { position: absolute; right: 13px; top: 12px; width: 34px; height: 34px; border: 0; background: transparent; color: #81798e; font-size: 24px; cursor: pointer; }
.rules-card { width: min(820px, 100%); max-height: calc(100vh - 50px); overflow-y: auto; text-align: left; }
.rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 26px 0 8px; }
.rule-grid article { display: flex; gap: 13px; padding: 15px; border: 1px solid var(--line); background: rgba(7, 5, 18, .32); }
.rule-grid article:last-child { grid-column: 1 / -1; }
.rule-grid article > span { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(230, 196, 120, .38); color: var(--gold); font-family: var(--serif); transform: rotate(45deg); }
.rule-grid h3 { margin: 0 0 5px; color: #e9e3f3; font-family: var(--serif); font-size: 14px; font-weight: 400; }
.rule-grid p { margin: 0; color: #827b8e; font-size: 10px; line-height: 1.7; }
.score-rules { margin-top: 12px; padding: 14px; border: 1px solid rgba(230, 196, 120, .22); background: rgba(31, 23, 46, .55); }
.score-rules > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.score-rules > header span { color: var(--gold); font-family: var(--serif); font-size: 17px; letter-spacing: .14em; }
.score-rules > header b { color: var(--gold-light); font-size: 10px; font-weight: 400; }
.score-rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.score-rule-grid article { padding: 10px; border-left: 2px solid rgba(169, 129, 255, .5); background: rgba(7, 5, 18, .3); }
.score-rule-grid h3 { margin: 0 0 4px; color: #e9e3f3; font-family: var(--serif); font-size: 13px; font-weight: 400; }
.score-rule-grid p { margin: 0; color: #8e879b; font-size: 9px; line-height: 1.65; }
.difficulty-rules { margin-top: 12px; padding: 14px; border: 1px solid rgba(111, 199, 255, .2); background: rgba(19, 28, 49, .45); }
.difficulty-rules > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.difficulty-rules > header span { color: #a9d8ff; font-family: var(--serif); font-size: 17px; letter-spacing: .14em; }
.difficulty-rules > header b { color: #c3b8d2; font-size: 9px; font-weight: 400; }
.difficulty-rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.difficulty-rule-grid article { padding: 10px; border-top: 2px solid rgba(111, 199, 255, .38); background: rgba(7, 5, 18, .3); }
.difficulty-rule-grid h3 { margin: 0 0 4px; color: #e9e3f3; font-family: var(--serif); font-size: 12px; font-weight: 400; }
.difficulty-rule-grid p, .difficulty-rules > p { margin: 0; color: #8e879b; font-size: 9px; line-height: 1.65; }
.difficulty-rules > p { margin-top: 9px; }
.confirm-card { width: min(420px, 100%); }
.modal-emblem { display: grid; width: 54px; height: 54px; margin: 0 auto 23px; place-items: center; border: 1px solid var(--gold); color: var(--gold-light); font-size: 26px; transform: rotate(45deg); }
.confirm-card p { color: #8c8497; font-size: 11px; line-height: 1.8; }
.modal-actions { display: flex; justify-content: center; gap: 10px; margin-top: 25px; }
.danger-button { border-color: rgba(255, 111, 131, .5); color: #ffc4cd; }
.danger-button:hover { background: rgba(133, 45, 66, .32); border-color: var(--red); }
.gameover-card { width: min(760px, 100%); padding: 24px 30px; overflow: hidden; }
#gameOverModal { overflow: hidden; overscroll-behavior: none; touch-action: none; }
#gameOverModal .gameover-card { overflow: hidden !important; overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; }
#gameOverModal .gameover-card * { -webkit-user-drag: none; }
#gameOverModal button { touch-action: manipulation; }
.victory-rays { position: absolute; left: 50%; top: -170px; width: 430px; height: 430px; border: 1px solid rgba(230, 196, 120, .12); border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(230, 196, 120, .08) 0 5deg, transparent 5deg 15deg); transform: translateX(-50%); }
.gameover-card > * { position: relative; z-index: 1; }
.winner-portrait { width: 76px; height: 76px; margin: 10px auto 7px; overflow: hidden; border: 2px solid var(--gold); border-radius: 50%; box-shadow: 0 0 0 7px rgba(230, 196, 120, .08), 0 0 32px rgba(230, 196, 120, .25); }
.winner-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 17%; }
.gameover-card > b { display: block; font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: .15em; }
.gameover-card > p:not(.section-index) { color: #847d91; font-size: 10px; }
.gameover-card .primary-button { margin-top: 0; }
.settlement-breakdown { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 12px; }
.settlement-breakdown article { padding: 8px 5px; border: 1px solid var(--line); background: rgba(7, 5, 18, .5); }
.settlement-breakdown small, .settlement-breakdown b, .settlement-breakdown em { display: block; }
.settlement-breakdown small { color: #8d8698; font-size: 8px; }
.settlement-breakdown b { margin: 3px 0; color: #f6f1ff; font-size: 15px; }
.settlement-breakdown em { color: var(--gold); font-size: 8px; font-style: normal; }
.damage-score-note { margin: 7px 0 !important; color: #aaa1b8 !important; }
.settlement-standings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: left; }
.settlement-standing { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 5px; min-width: 0; padding: 5px 7px; border: 1px solid rgba(219, 199, 255, .1); background: rgba(7, 5, 18, .35); font-size: 8px; }
.settlement-standing.is-player { border-color: rgba(230, 196, 120, .45); color: var(--gold-light); }
.settlement-standing span { color: var(--gold); }
.settlement-standing b { overflow: hidden; font-size: 8px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.settlement-standing em { color: #c8b7ee; font-style: normal; }
.elimination-card { width: min(580px, 100%); }
.elimination-stats { display: flex; justify-content: center; gap: 8px; margin: 16px 0 4px; }
.elimination-stats span { padding: 8px 12px; border: 1px solid var(--line); color: #bdb3cc; font-size: 10px; }
.elimination-stats b { color: var(--gold-light); }
.settlement-pending { z-index: 130; }
.settlement-pending-card { width: min(460px, 100%); padding: 34px; }
.settlement-pending-card h2 { margin: 9px 0; font-family: var(--serif); font-size: 24px; font-weight: 400; }
.settlement-pending-card > p:not(.section-index) { margin: 0; color: #92899f; font-size: 10px; line-height: 1.7; }
.settlement-spinner { display: block; width: 46px; height: 46px; margin: 0 auto 18px; border: 1px solid rgba(230, 196, 120, .22); border-top-color: var(--gold); border-radius: 50%; box-shadow: 0 0 24px rgba(169, 129, 255, .18); animation: settlementSpin .85s linear infinite; }
@keyframes settlementSpin { to { transform: rotate(360deg); } }
.spectator-panel { position: fixed; z-index: 16; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 14px; width: min(940px, calc(100% - 40px)); padding: 9px 12px; transform: translateX(-50%); }
.spectator-heading { min-width: 130px; }
.spectator-heading small, .spectator-heading b { display: block; }
.spectator-heading small { color: var(--gold); font-size: 7px; letter-spacing: .16em; }
.spectator-heading b { margin-top: 2px; font-size: 10px; }
.spectator-stats { display: flex; flex: 1; justify-content: center; gap: 12px; color: #aaa2b8; font-size: 8px; }
.spectator-stats strong { color: var(--gold-light); font-weight: 400; }
.spectator-actions { display: flex; gap: 5px; }
.spectator-actions button { min-height: 28px; padding: 0 9px; border: 1px solid var(--line); background: rgba(12, 9, 27, .75); color: #aaa2b8; font-size: 8px; cursor: pointer; }
.spectator-actions button.is-selected { border-color: var(--gold); color: var(--gold-light); }
.game-screen.is-spectating .action-dock { display: none; }
.battle-token.is-spectator-focus { box-shadow: 0 0 0 3px rgba(230, 196, 120, .75), 0 0 24px rgba(230, 196, 120, .6); }
.toast-container { position: fixed; z-index: 120; top: 96px; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 7px; transform: translateX(-50%); pointer-events: none; }
.toast { padding: 9px 16px; border: 1px solid rgba(230, 196, 120, .35); background: rgba(13, 9, 27, .94); color: #e9e3f3; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); font-size: 10px; animation: toastIn .25s ease, toastOut .25s ease 2.2s forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-7px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-7px); } }

/* Main hub and character selection */
[hidden], .is-hidden { display: none !important; }
.hub-screen, .character-select-screen {
  position: relative;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(circle at 73% 42%, rgba(125, 84, 214, .25), transparent 30%),
    linear-gradient(118deg, #090713 4%, #18102d 53%, #080710 100%);
  --theme-accent: #a981ff;
  --theme-glow: rgba(169, 129, 255, .3);
}
.theme-crimson { --theme-accent: #ef6672; --theme-glow: rgba(213, 48, 63, .28); }
.theme-azure { --theme-accent: #79ddeb; --theme-glow: rgba(79, 184, 218, .25); }
.theme-earth { --theme-accent: #c19a68; --theme-glow: rgba(144, 105, 63, .28); }
.theme-steel { --theme-accent: #d2a65e; --theme-glow: rgba(116, 101, 81, .3); }
.theme-storm { --theme-accent: #82a9ff; --theme-glow: rgba(64, 93, 165, .32); }
.theme-starlight { --theme-accent: #ff9fc8; --theme-glow: rgba(244, 119, 187, .28); }
.hub-screen::before, .character-select-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 74% 42%, var(--theme-glow), transparent 28%), repeating-linear-gradient(90deg, transparent 0 99px, rgba(255, 255, 255, .015) 100px);
  pointer-events: none;
}
.hub-header, .character-select-header {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 0 78px;
  align-items: center;
  gap: 22px;
  width: calc(100% - 72px);
  margin: 0 auto;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.hub-back { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); background: rgba(12, 9, 27, .52); color: #aaa2ba; cursor: pointer; }
.hub-back:hover { border-color: var(--theme-accent); color: white; }
.hub-player { display: flex; align-items: center; gap: 14px; margin-left: auto; text-align: right; }
.hub-player small, .hub-player b, .hub-player em { display: block; }
.hub-player small { color: #6f687d; font-size: 8px; letter-spacing: .2em; }
.hub-player b { margin-top: 4px; font-family: var(--serif); font-size: 16px; font-weight: 400; letter-spacing: .12em; }
.hub-account-score { min-width: 76px; padding: 5px 10px; border: 1px solid rgba(230, 196, 120, .25); background: rgba(12, 8, 27, .52); text-align: center; }
.hub-account-score em { margin-top: 2px; color: var(--gold-light); font-family: var(--serif); font-size: 18px; font-style: normal; line-height: 1; }
.hub-profile-button { width: 44px; height: 44px; overflow: hidden; padding: 0; border: 1px solid rgba(230,196,120,.45); border-radius: 50%; background: #090716; cursor: pointer; }
.hub-profile-button img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.hub-layout {
  position: relative;
  z-index: 2;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(230px, 280px) minmax(300px, 1fr) minmax(380px, 42vw);
  gap: clamp(18px, 3vw, 52px);
  width: min(1500px, calc(100% - 72px));
  min-height: 0;
  margin: auto;
  padding: 42px 0 32px;
}
.hub-menu { align-self: center; padding: 21px 14px; }
.hub-menu > .section-index { margin: 0 9px 13px; }
.hub-menu button { display: grid; grid-template-columns: 42px 1fr 18px; align-items: center; gap: 11px; width: 100%; min-height: 68px; padding: 10px; border: 1px solid transparent; border-bottom-color: rgba(255, 255, 255, .06); background: transparent; cursor: pointer; text-align: left; transition: .2s; }
.hub-menu button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--theme-accent) 45%, transparent); background: color-mix(in srgb, var(--theme-accent) 9%, transparent); transform: translateX(4px); }
.hub-menu button > span { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(230, 196, 120, .26); color: var(--gold-light); font-family: var(--serif); transform: rotate(45deg); }
.hub-menu button > span::first-letter { transform: rotate(-45deg); }
.hub-menu button b, .hub-menu button small { display: block; }
.hub-menu button b { font-family: var(--serif); font-size: 15px; font-weight: 400; letter-spacing: .12em; }
.hub-menu button small { margin-top: 4px; color: #766f82; font-size: 8px; }
.hub-menu button > i { color: var(--theme-accent); font-size: 20px; font-style: normal; }
.hub-menu button.is-disabled { opacity: .3; cursor: not-allowed; filter: grayscale(1); }

/* Tutorial, profile and achievements share the same fixed landscape canvas. */
.tutorial-screen, .profile-screen, .achievement-screen { position: relative; flex-direction: column; width: 100vw; height: 100vh; min-height: 620px; overflow: hidden; padding: 18px 26px 22px; background: radial-gradient(circle at 60% 35%, rgba(101,65,168,.2), transparent 35%), linear-gradient(140deg,#121020,#070711 72%); }
.tutorial-header, .profile-header, .achievement-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 68px; border-bottom: 1px solid rgba(255,255,255,.08); }
.tutorial-header h1, .profile-header h1, .achievement-header h1 { margin: 2px 0 0; font-family: var(--serif); font-size: 24px; font-weight: 400; letter-spacing: .15em; }
.tutorial-header small, .profile-header small, .achievement-header small { color: var(--gold); font-size: 7px; letter-spacing: .23em; }
.tutorial-header .ghost-button, .profile-header .ghost-button { justify-self: end; margin: 0; }
.tutorial-progress { display: flex; gap: 9px; }
.tutorial-progress i { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: #6f687b; font-size: 8px; font-style: normal; }
.tutorial-progress i.is-current { border-color: var(--gold); color: var(--gold-light); box-shadow: 0 0 18px rgba(230,196,120,.18); }
.tutorial-progress i.is-done { border-color: #73d6c2; background: rgba(38,127,111,.22); color: #aef2e3; }
.tutorial-layout { display: grid; flex: 1; grid-template-columns: minmax(220px,280px) minmax(420px,1fr) minmax(220px,280px); gap: 18px; min-height: 0; padding-top: 18px; }
.tutorial-coach, .tutorial-controls { align-self: center; padding: 22px; }
.tutorial-coach > small { color: var(--gold); font-size: 8px; letter-spacing: .2em; }
.tutorial-coach h2 { margin: 7px 0 13px; font-family: var(--serif); font-size: 25px; font-weight: 400; }
.tutorial-coach > p { min-height: 42px; color: #b5adbf; font-size: 10px; line-height: 1.8; }
.tutorial-facts { display: grid; gap: 7px; margin-top: 15px; }
.tutorial-facts span { padding: 9px; border-left: 2px solid var(--gold); background: rgba(255,255,255,.025); color: #837b8e; font-size: 8px; line-height: 1.55; }
.tutorial-stage { position: relative; min-width: 0; min-height: 0; padding: 18px; }
.tutorial-stage-top { display: flex; justify-content: space-between; color: #938a9e; font-size: 9px; }
.tutorial-stage-top b { color: var(--gold-light); font-weight: 400; }
.tutorial-stage-top em { font-family: var(--serif); font-size: 18px; font-style: normal; }
.tutorial-arena { position: absolute; inset: 54px 18px 86px; display: grid; grid-template-columns: 1fr 42px 1fr 42px 1fr; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.05); background: radial-gradient(circle,rgba(120,81,190,.22),transparent 57%); }
.tutorial-node { position: relative; display: grid; justify-self: center; width: 132px; height: 132px; place-items: center; border: 1px solid rgba(230,196,120,.25); border-radius: 50%; color: #746c81; font-size: 8px; }
.tutorial-node::before { content:""; position:absolute; inset:13px; border:1px dashed rgba(175,139,239,.26); border-radius:50%; }
.tutorial-node-label { position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%);white-space:nowrap; }
.tutorial-path { display: flex; justify-content: space-between; color: rgba(230,196,120,.35); }
.tutorial-token { position: absolute; z-index: 2; display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; font-family: var(--serif); font-size: 18px; font-style: normal; overflow:visible; }
.tutorial-token img { width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 18%; }
.tutorial-token small { position:absolute;right:-4px;bottom:-5px;min-width:25px;padding:2px 4px;border-radius:8px;background:#100c1b;color:#f5edf8;font-size:6px;font-style:normal;text-align:center;white-space:nowrap; }
.tutorial-token.hero { left: 16px; bottom: 16px; border: 2px solid var(--gold); background: #4a326e; color: white; box-shadow: 0 0 25px rgba(149,99,221,.4); }
.tutorial-token.enemy { right: 16px; top: 16px; border: 2px solid #b75d68; background: #421e29; color: #ffdbe0; }
.tutorial-token.defeated { border-color:#554e60;filter:grayscale(1);opacity:.45; }
.tutorial-token.defeated::after { content:"×";position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:rgba(10,8,14,.55);color:#d7cfdb;font-size:28px; }
.tutorial-health { position: absolute; right: 10px; bottom: 8px; left: 10px; display: grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;color: #d37c8a; font-size: 8px; }
.tutorial-health span { display:grid;gap:2px;padding:5px 7px;border:1px solid rgba(255,255,255,.06);background:rgba(5,4,14,.65); }
.tutorial-health b { color:#d8cfdf;font-size:7px;font-weight:400; }
.tutorial-health .hero-health { color:#e7c777; }
.tutorial-health .defeated-health { color:#686170; }
.tutorial-result { position: absolute; right: 18px; bottom: 15px; left: 18px; min-height: 56px; padding: 10px 14px; border: 1px solid rgba(230,196,120,.12); background: rgba(5,4,14,.78); text-align: center; }
.tutorial-result:empty { display:none; }
.tutorial-result b, .tutorial-result span, .tutorial-result small { display: block; }
.tutorial-result b { color: var(--gold-light); font-family: var(--serif); font-size: 15px; }
.tutorial-result span { margin-top: 3px; color: #c7bdcf; font-size: 8px; }
.tutorial-result small { margin-top: 4px; color: #756d81; font-size: 7px; }
.tutorial-controls { display: grid; gap: 8px; }
.tutorial-controls > small { color: #7d7488; font-size: 8px; text-align: center; }
.tutorial-controls button { min-height: 48px; border: 1px solid rgba(255,255,255,.12); background: rgba(7,5,18,.5); color: #cfc7d8; cursor:pointer; }
.tutorial-controls .primary-button { width: 100%; margin: 0; border-color: var(--gold); }
.tutorial-rps { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.profile-header, .achievement-header { grid-template-columns: 50px 1fr auto; gap: 12px; }
.profile-layout { display: grid; flex: 1; grid-template-columns: minmax(210px,260px) minmax(480px,1fr) minmax(280px,350px); gap: 16px; min-height: 0; padding-top: 16px; }
.profile-login-gate { align-self: center; justify-self: center; width: min(460px,85vw); padding: 36px; text-align:center; }
.profile-login-gate > span { color:var(--gold); font-family:var(--serif); font-size:32px; }
.profile-login-gate h2 { font-family:var(--serif); font-weight:400; }
.profile-login-gate p { color:#847b8f; font-size:9px; }
.profile-login-gate button { padding:9px 18px; border:1px solid var(--gold); background:transparent; color:var(--gold-light); cursor:pointer; }
.profile-identity { align-self:center; padding:20px; text-align:center; }
.profile-avatar-wrap { position:relative; width:92px; height:92px; margin:0 auto 12px; border:2px solid var(--gold); border-radius:50%; overflow:hidden; }
.profile-avatar-wrap img { width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.profile-identity h2 { margin:5px 0; font-family:var(--serif); font-size:23px; font-weight:400; }
.profile-identity > p { margin:5px; color:var(--gold-light); font-size:9px; }
.profile-identity > button { width:100%; margin-top:7px; padding:8px; border:1px solid rgba(255,255,255,.1); background:transparent; color:#aaa1b5; font-size:8px; }
.profile-identity > small { display:block; margin:10px 0; color:#6e6679; font-size:7px; line-height:1.7; }
.profile-appearance-actions { display:grid; gap:7px; margin-top:12px; text-align:left; }
.profile-appearance-actions label { color:#7e758a; font-size:7px; }
.profile-appearance-actions select { display:block; width:100%; margin-top:3px; padding:6px; border:1px solid rgba(255,255,255,.1); background:#090714; color:#ddd6e5; font-size:8px; }
.profile-main { min-width:0; min-height:0; padding:14px; overflow:hidden; }
.profile-tabs { display:flex; gap:5px; padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.07); }
.profile-tabs button, .achievement-toolbar button { padding:7px 12px; border:1px solid transparent; background:transparent; color:#7f768a; font-size:8px; }
.profile-tabs button.is-selected, .achievement-toolbar button.is-selected { border-color:var(--gold); color:var(--gold-light); }
#profilePanel { height:calc(100% - 43px); overflow:auto; padding-top:10px; }
.profile-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.profile-stat-grid article, .collection-summary article { padding:10px; border:1px solid rgba(255,255,255,.07); background:rgba(5,4,14,.38); }
.profile-stat-grid small, .profile-stat-grid b, .collection-summary small, .collection-summary b { display:block; }
.profile-stat-grid small, .collection-summary small { color:#776f82; font-size:7px; }
.profile-stat-grid b, .collection-summary b { margin-top:4px; color:var(--gold-light); font-family:var(--serif); font-size:18px; font-weight:400; }
.profile-point-row { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; }
.profile-point-row > div { padding:10px; border-left:2px solid var(--gold); background:rgba(255,255,255,.025); }
.profile-point-row small,.profile-point-row b,.profile-point-row span { display:block; }
.profile-point-row small,.profile-point-row span { color:#756d80; font-size:7px; }.profile-point-row b { margin:3px 0; font-family:var(--serif); font-size:19px; }
.profile-achievement-row { margin-top:8px; padding:10px; border:1px solid rgba(255,255,255,.07); }.profile-achievement-row h3 { margin:0 0 7px; font-size:10px; }.profile-achievement-row span { display:inline-block; margin-right:4px; padding:4px 7px; border:1px solid rgba(230,196,120,.2); color:var(--gold-light); font-size:7px; }.profile-achievement-row button { float:right; padding:4px 8px; border:1px solid var(--gold); background:transparent; color:var(--gold-light); font-size:7px; }
.profile-character { position:relative; min-height:0; overflow:hidden; }.profile-character::after { content:""; position:absolute; inset:auto 0 0; height:45%; background:linear-gradient(transparent,#070711); }.profile-character > img { width:100%; height:100%; object-fit:contain; object-position:center top; }.profile-character > div { position:absolute; z-index:2; right:10px; bottom:16px; left:10px; text-align:center; }.profile-character small,.profile-character b,.profile-character p { display:block; }.profile-character b { font-family:var(--serif); font-size:20px; }.profile-character p { color:#776f82; font-size:7px; }
.profile-match-list article { display:flex; justify-content:space-between; gap:16px; margin-bottom:6px; padding:10px; border:1px solid rgba(255,255,255,.07); }.profile-match-list span { text-align:right; }.profile-match-list b,.profile-match-list small { display:block; }.profile-match-list b { font-size:9px; }.profile-match-list small { margin-top:4px; color:#756d80; font-size:7px; }
.collection-summary { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }.collection-characters { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-top:8px; }.collection-characters article { position:relative; height:180px; overflow:hidden; border:1px solid rgba(255,255,255,.08); text-align:center; }.collection-characters img { width:100%; height:145px; object-fit:cover; object-position:center top; }.collection-characters b,.collection-characters small { display:block; font-size:7px; }.collection-characters .is-locked { filter:grayscale(1); opacity:.35; }
.security-disabled { display:grid; gap:6px; }.security-disabled h2 { margin:0; font-family:var(--serif); font-weight:400; }.security-disabled p { color:#756d80; font-size:8px; }.security-disabled button { display:flex; justify-content:space-between; padding:10px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); color:#5d5667; }.security-disabled span { font-size:7px; }
.achievement-header #achievementSummary { text-align:right; }.achievement-header #achievementSummary b,.achievement-header #achievementSummary span { display:block; }.achievement-header #achievementSummary b { color:var(--gold-light); font-family:var(--serif); font-size:20px; }.achievement-header #achievementSummary span { color:#756d80; font-size:7px; }
.achievement-layout { display:grid; flex:1; grid-template-columns:210px minmax(520px,1fr) 210px; gap:12px; min-height:0; padding-top:14px; }.achievement-side,.achievement-main,.achievement-recent { min-height:0; padding:12px; overflow:hidden; }.achievement-side nav { display:grid; gap:4px; }.achievement-side nav button { display:flex; justify-content:space-between; padding:8px; border:1px solid transparent; background:transparent; color:#877e91; font-size:8px; text-align:left; }.achievement-side nav button.is-selected { border-color:var(--gold); color:var(--gold-light); }.achievement-side > section { margin-top:14px; padding-top:10px; border-top:1px solid rgba(255,255,255,.07); }.achievement-side > section > small,.achievement-recent > small { color:var(--gold); font-size:7px; letter-spacing:.15em; }.achievement-side article { display:flex; justify-content:space-between; margin-top:5px; padding:7px; background:rgba(255,255,255,.025); font-size:7px; }.achievement-toolbar { display:flex; justify-content:space-between; align-items:center; padding-bottom:8px; }.achievement-toolbar small { color:#6e6679; font-size:7px; }.achievement-list { height:calc(100% - 40px); overflow:auto; }.achievement-card { display:grid; grid-template-columns:36px 1fr 115px; gap:10px; align-items:center; margin-bottom:6px; padding:9px; border:1px solid rgba(255,255,255,.07); background:rgba(5,4,14,.38); }.achievement-card.is-completed { border-color:rgba(230,196,120,.28); }.achievement-card.is-character-locked { opacity:.58; }.achievement-icon { display:grid; width:32px;height:32px;place-items:center;border:1px solid rgba(230,196,120,.27);border-radius:50%;color:var(--gold); }.achievement-card small,.achievement-card h3,.achievement-card p { margin:0; }.achievement-card small { color:#746c80;font-size:6px; }.achievement-card h3 { margin:3px 0;color:#e8e0ee;font-family:var(--serif);font-size:13px;font-weight:400; }.achievement-card p { color:#81798c;font-size:7px;line-height:1.45; }.achievement-bar { display:inline-block;width:70%;height:3px;margin-top:5px;background:#211b2b;vertical-align:middle; }.achievement-bar i { display:block;height:100%;background:var(--gold); }.achievement-card em { margin-left:5px;color:#726a7d;font-size:6px;font-style:normal; }.achievement-card > aside { text-align:right; }.achievement-card > aside b,.achievement-card > aside small { display:block; }.achievement-card > aside b { color:var(--gold-light);font-size:7px; }.achievement-card > aside button { margin-top:5px;padding:4px 7px;border:1px solid var(--gold);background:transparent;color:var(--gold-light);font-size:6px; }.achievement-recent article { display:flex;gap:7px;margin-top:6px;padding:7px;border:1px solid rgba(255,255,255,.06); }.achievement-recent article > span { color:#76ddc7; }.achievement-recent b,.achievement-recent small { display:block;font-size:7px; }.achievement-recent small,.achievement-recent > p { color:#6f677a;font-size:6px;line-height:1.6; }
.hub-center { display: grid; align-items: center; min-width: 0; }
.hub-welcome h1 { margin: 18px 0; font-family: var(--serif); font-size: clamp(48px, 5.2vw, 84px); font-weight: 400; line-height: 1; letter-spacing: .08em; }
.hub-welcome h1 em { color: var(--theme-accent); font-size: .62em; font-style: normal; }
.hub-welcome > p:last-child { max-width: 520px; color: #928a9e; font-family: var(--serif); font-size: 14px; line-height: 2; letter-spacing: .06em; }
.hub-match-panel { width: min(520px, 100%); padding: 28px; }
.hub-player-count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 22px; }
.hub-player-count button { height: 76px; border: 1px solid var(--line); background: rgba(7, 5, 19, .48); cursor: pointer; }
.hub-player-count button:hover, .hub-player-count button.is-selected { border-color: var(--theme-accent); background: var(--theme-glow); box-shadow: inset 0 0 18px var(--theme-glow); }
.hub-player-count b, .hub-player-count small { display: block; }
.hub-player-count b { color: var(--gold-light); font-family: var(--serif); font-size: 25px; font-weight: 400; }
.hub-player-count small { margin-top: 3px; color: #8a8295; font-size: 8px; }
.hub-mode-hint { margin: 14px 0 0; color: #8a8395; font-size: 9px; }
.hub-difficulty-label { margin: 13px 0 6px; color: var(--gold); font-size: 8px; letter-spacing: .16em; }
.hub-difficulty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.hub-difficulty button { min-height: 48px; padding: 5px; border: 1px solid var(--line); background: rgba(7, 5, 19, .48); color: #a89fb4; cursor: pointer; }
.hub-difficulty button:hover, .hub-difficulty button.is-selected { border-color: var(--theme-accent); background: var(--theme-glow); box-shadow: inset 0 0 18px var(--theme-glow); }
.hub-difficulty b, .hub-difficulty small { display: block; }
.hub-difficulty b { color: #f2ecfa; font-family: var(--serif); font-size: 13px; font-weight: 400; }
.hub-difficulty small { margin-top: 3px; color: #8a8295; font-size: 7px; }
.hub-difficulty-description { min-height: 31px; margin: 7px 0 0; color: #8a8395; font-size: 8px; line-height: 1.55; }
.hub-match-panel .primary-button { width: 100%; }
.hub-character { position: relative; min-width: 0; overflow: hidden; }
.hub-character::after { content: ""; position: absolute; inset: auto 4% 0; height: 38%; background: linear-gradient(transparent, rgba(7, 5, 16, .94)); pointer-events: none; }
.hub-character > img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center top; filter: drop-shadow(0 20px 45px rgba(0, 0, 0, .55)); transition: opacity .2s; }
.hub-fate-halo, .character-preview-halo { position: absolute; left: 50%; top: 44%; width: min(36vw, 500px); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--theme-accent) 40%, transparent); border-radius: 50%; box-shadow: 0 0 70px var(--theme-glow), inset 0 0 70px var(--theme-glow); transform: translate(-50%, -50%); }
.hub-fate-halo::before, .character-preview-halo::before { content: ""; position: absolute; inset: 10%; border: 1px dashed color-mix(in srgb, var(--theme-accent) 32%, transparent); border-radius: 50%; animation: haloSpin 24s linear infinite; }
@keyframes haloSpin { to { transform: rotate(360deg); } }
.hub-character-plaque { position: absolute; z-index: 3; right: 4%; bottom: 5%; left: 4%; padding: 14px 18px; text-align: center; }
.hub-character-plaque small, .hub-character-plaque b, .hub-character-plaque span { display: block; }
.hub-character-plaque small { color: var(--theme-accent); font-size: 8px; letter-spacing: .24em; }
.hub-character-plaque b { margin: 5px 0; font-family: var(--serif); font-size: 24px; font-weight: 400; letter-spacing: .16em; }
.hub-character-plaque span { color: #837b8e; font-size: 9px; }
.hub-character-plaque em { color: var(--gold-light); font-style: normal; }

.character-select-header { justify-content: flex-start; }
.character-select-header > div h1 { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 400; letter-spacing: .16em; }
.character-select-header > div p { margin: 4px 0 0; color: #777083; font-size: 8px; letter-spacing: .2em; }
.character-select-header > span { margin-left: auto; color: var(--theme-accent); font-family: var(--serif); font-size: 13px; }
.character-select-layout { position: relative; z-index: 2; display: grid; flex: 1 1 auto; grid-template-columns: minmax(250px, 300px) minmax(320px, 1fr) minmax(330px, 390px); gap: 24px; width: min(1500px, calc(100% - 72px)); min-height: 0; margin: auto; padding: 28px 0; }
.character-choice-list { align-self: center; max-height: 100%; padding: 17px; overflow-y: auto; }
.character-choice-list > .section-index { margin: 0 0 10px; }
.protagonist-choice { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.protagonist-choice h2 { margin: 0 0 7px; color: #777080; font-size: 9px; font-weight: 400; letter-spacing: .2em; }
.protagonist-choice > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.character-choice { display: grid; grid-template-columns: 45px 1fr; align-items: center; gap: 10px; min-height: 59px; padding: 6px; border: 1px solid transparent; background: rgba(7, 5, 18, .32); cursor: pointer; text-align: left; }
.character-choice.wide { width: 100%; margin-top: 7px; }
.character-choice img { width: 44px; height: 44px; object-fit: cover; object-position: center 18%; border-radius: 50%; filter: saturate(.7); }
.character-choice b, .character-choice small { display: block; }
.character-choice b { font-family: var(--serif); font-size: 13px; font-weight: 400; }
.character-choice small { margin-top: 3px; color: #716a7d; font-size: 7px; }
.character-choice:hover, .character-choice.is-selected { border-color: color-mix(in srgb, var(--theme-accent) 52%, transparent); background: var(--theme-glow); }
.character-choice.is-selected img { outline: 1px solid var(--theme-accent); outline-offset: 2px; filter: none; }
.character-preview { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.character-preview > img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center top; image-rendering: auto; }
.character-preview-halo { top: 50%; width: min(36vw, 500px); }
.character-detail { align-self: center; max-height: 100%; padding: 25px; overflow-y: auto; }
.character-detail-heading h2 { margin: 5px 0; color: white; font-family: var(--serif); font-size: 27px; font-weight: 400; letter-spacing: .13em; }
.character-detail-heading > span { color: var(--theme-accent); font-size: 9px; letter-spacing: .12em; }
.character-skill-detail { display: grid; gap: 10px; margin-top: 19px; }
.character-skill-detail article { padding: 14px; border: 1px solid var(--line); background: rgba(5, 4, 15, .36); }
.character-skill-detail header { display: flex; align-items: center; gap: 11px; }
.character-skill-detail header > span { color: var(--theme-accent); font-family: var(--serif); font-size: 24px; opacity: .48; }
.character-skill-detail header small { color: #766f80; font-size: 7px; letter-spacing: .18em; }
.character-skill-detail h3 { margin: 2px 0 0; color: var(--gold-light); font-family: var(--serif); font-size: 18px; font-weight: 400; letter-spacing: .1em; }
.character-skill-detail ul { margin: 11px 0 0; padding: 0 0 0 17px; color: #a29aaa; font-size: 9px; line-height: 1.75; }
.character-detail-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 18px; }
.character-detail-actions .primary-button { margin: 0; }

.action-buttons { grid-template-columns: repeat(var(--action-count, 5), minmax(72px, 1fr)); }
.roster-avatar { overflow: visible; border-radius: 50%; }
.roster-avatar > img { border-radius: inherit; }
.ability-badge { position: absolute; z-index: 3; display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; font-size: 7px; font-style: normal; }
.shield-badge { left: -3px; bottom: -2px; border: 1px solid #81eaf6; background: #173f54; color: #c8faff; }
.pursuit-badge { right: -3px; bottom: -2px; border: 1px solid var(--gold); background: #5a3a17; color: #fff0bf; }
.mark-badge { right: -6px; bottom: -4px; width: 21px; border: 1px solid #d3a973; background: #56311f; color: #fff0c8; }
.horse-badge { right: -6px; top: -4px; width: 22px; border: 1px solid #d8b46d; background: #3a2a1c; color: #fff0c6; }
.mulei-badge { left: -5px; top: -4px; width: 21px; border: 1px solid #8cb5ff; background: #172a4d; color: #dbe9ff; box-shadow: 0 0 9px rgba(102, 150, 255, .48); }
.jinmian-badge { left:-5px;bottom:-4px;width:auto;min-width:18px;padding-inline:3px;border:1px solid #d0a267;background:#4a271f;color:#ffe0b6;box-shadow:0 0 9px rgba(207,127,70,.48); }
.token-shield, .token-pursuit, .token-mark, .token-horse, .token-stun, .token-mulei { position: absolute; z-index: 4; top: -5px; display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; font-size: 7px; }
.token-shield { left: -5px; border: 1px solid #83efff; background: #15475c; color: #c6f8ff; }
.token-pursuit { right: -5px; border: 1px solid var(--gold); background: #563513; color: #fff0bf; }
.token-mark { right: -7px; width: 21px; border: 1px solid #d8ae74; background: #56311f; color: #fff0c8; }
.token-horse { right: -8px; width: 24px; border: 1px solid #dab56d; background: #3b2a1b; color: #fff0c5; }
.token-stun { left: -6px; bottom: -5px; top: auto; border: 1px solid #df8ef7; background: #4d1e59; color: #fff; }
.token-mulei { left: 50%; top: -7px; width: 20px; transform: translateX(-50%); border: 1px solid #8bb5ff; background: #172b50; color: #e0ecff; box-shadow: 0 0 10px rgba(91, 138, 255, .58); }
.battle-token.has-mulei-rage .token-ring { box-shadow: 0 0 0 2px rgba(104, 143, 255, .44), 0 0 18px rgba(59, 100, 218, .62); }
.battle-token.has-mulei-immunity .token-ring { animation: mulei-guard-pulse .9s ease-in-out infinite alternate; border-color: #b8d4ff; }
.battle-token.has-royal-might .token-ring { border-color:#e5a86e;box-shadow:0 0 0 3px rgba(183,91,55,.2),0 0 19px rgba(229,116,72,.72),inset 0 0 10px rgba(255,192,118,.22); }
.token-jinmian { position:absolute;z-index:6;left:0;bottom:10px;display:grid;min-width:18px;height:16px;padding-inline:3px;place-items:center;border:1px solid #e0a16e;border-radius:9px;background:#4b241f;color:#ffe0b5;font-size:7px;pointer-events:none; }
@keyframes mulei-guard-pulse { from { box-shadow: 0 0 0 2px rgba(108, 155, 255, .5), 0 0 12px rgba(70, 112, 228, .58); } to { box-shadow: 0 0 0 4px rgba(176, 207, 255, .72), 0 0 26px rgba(73, 127, 255, .88); } }

@media (max-width: 1180px) {
  .start-layout { grid-template-columns: .8fr 1.2fr; gap: 45px; width: calc(100% - 55px); }
  .hero-copy h1 { font-size: 66px; }
  .entry-panel { max-width: 590px; }
  .battle-layout { grid-template-columns: 190px minmax(520px, 1fr) 180px; }
  .rps-overlay { left: 210px; right: 195px; }
  .action-dock { width: calc(100% - 36px); grid-template-columns: 180px auto; }
  .action-buttons button { min-width: 76px; padding: 7px 6px; }
}

@media (max-width: 930px), (hover: none) and (pointer: coarse), (any-pointer: coarse) {
  body { overflow: auto; }
  .start-screen { min-height: auto; }
  .start-layout { grid-template-columns: 1fr; width: min(680px, calc(100% - 36px)); padding: 36px 0 80px; }
  .hero-copy { padding: 25px 0 0; text-align: center; }
  .eyebrow, .feature-row { justify-content: center; }
  .hero-copy h1 { font-size: clamp(55px, 12vw, 90px); }
  .hero-lead { margin-left: auto; margin-right: auto; }
  .entry-panel { margin: 0 auto; }
  .start-header { width: calc(100% - 36px); }

  .game-screen { min-height: 100vh; overflow: auto; }
  .game-header { grid-template-columns: auto 1fr auto; }
  .round-center { min-width: 280px; }
  .sudden-badge div { display: none; }
  .battle-layout { grid-template-columns: 170px minmax(520px, 1fr); padding-bottom: 136px; }
  .queue-panel { display: none; }
  .rps-overlay { inset: 90px 20px 120px 180px; }
  .action-dock { overflow-x: auto; }
}

@media (max-width: 720px) {
  .start-header { padding: 20px 0; }
  .brand b { font-size: 17px; }
  .brand-mark { width: 38px; height: 38px; }
  .start-header .ghost-button { padding: 0 12px; }
  .entry-panel { padding: 27px 20px 24px; }
  .character-card { height: 168px; }
  .hero-copy h1 { font-size: 54px; }
  .hero-lead { font-size: 15px; }

  .game-header { position: sticky; top: 0; margin: 0; grid-template-columns: auto 1fr; }
  .back-button { padding: 8px 4px; font-size: 0; }
  .back-button span { font-size: 22px; }
  .round-center { min-width: 0; }
  .round-status { font-size: 13px; }
  .timer-track { width: min(260px, 72vw); }
  .sudden-badge { display: none; }
  .battle-layout { display: flex; flex-direction: column-reverse; padding: 10px 8px 140px; }
  .side-panel { align-self: auto; }
  .roster-panel { padding: 10px; }
  .roster { display: grid; grid-template-columns: repeat(3, 1fr); }
  .roster-item { grid-template-columns: 32px 1fr; min-height: 48px; padding: 5px; }
  .roster-avatar { width: 30px; height: 30px; }
  .roster-ap { display: none; }
  .legend { display: none; }
  .arena-shell { min-height: 430px; }
  .arena-art { object-position: center; }
  .arena-node { width: 100px; height: 80px; }
  .battle-token { width: 42px; height: 42px; }
  .rps-overlay { inset: 70px 8px 136px; }
  .rps-panel { padding: 22px 13px; }
  .rps-choices { gap: 6px; }
  .rps-choices button { height: 114px; padding: 7px; }
  .rps-choices button > span { width: 44px; height: 44px; }
  .action-dock { bottom: 0; grid-template-columns: 1fr; gap: 4px; width: 100%; padding: 5px; }
  .current-actor { display: none; }
  .action-buttons { gap: 3px; }
  .action-buttons button { min-width: 60px; height: 57px; grid-template-columns: 20px 1fr; padding: 5px 3px; }
  .action-icon { font-size: 15px; }
  .action-buttons b { font-size: 9px; }
  .action-buttons small { font-size: 6px; }
  .rule-grid { grid-template-columns: 1fr; }
  .rule-grid article:last-child { grid-column: auto; }
  .score-rule-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .character-grid { gap: 7px; }
  .character-card { height: 150px; }
  .character-info { left: 10px; }
  .character-info em { display: none; }
  .player-count { gap: 4px; }
  .roster { grid-template-columns: repeat(2, 1fr); }
  .arena-shell { min-height: 390px; }
  .arena-node { width: 86px; height: 72px; }
  .battle-token { width: 37px; height: 37px; }
  .rps-heading h2 { font-size: 21px; }
  .rps-choices b { font-size: 12px; }
  .action-buttons button { display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .action-buttons small { display: none; }
  .action-buttons .end-action { min-width: 72px; }
}

/* Phone-first landscape canvas. Once play starts, JavaScript freezes these dimensions while the sensor tilts. */
@media (max-width: 930px), (hover: none) and (pointer: coarse), (any-pointer: coarse) {
  :root { --mobile-landscape-width: 100vw; --mobile-landscape-height: 100dvh; }
  html, body { width: 100%; height: 100%; overflow: hidden; }
  .start-screen { width: var(--mobile-landscape-width); height: var(--mobile-landscape-height); min-height: 0; overflow: hidden; }
  .start-header { flex: 0 0 45px; width: calc(100% - 20px); padding: 7px 0; }
  .brand { gap: 9px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-mark svg { width: 23px; }
  .brand b { font-size: 14px; }
  .brand small { margin-top: 1px; font-size: 6px; }
  .start-header .ghost-button { min-height: 30px; padding: 0 12px; font-size: 9px; }
  .start-layout {
    grid-template-columns: minmax(230px, .72fr) minmax(460px, 1.28fr);
    align-items: center;
    gap: 14px;
    width: calc(100% - 20px);
    height: calc(var(--mobile-landscape-height) - 47px);
    margin: 0 auto;
    padding: 5px 0 8px;
  }
  .hero-copy { max-width: none; padding: 0 4px; text-align: left; }
  .eyebrow { justify-content: flex-start; margin: 0; font-size: 8px; }
  .eyebrow span { width: 25px; }
  .hero-copy h1 { margin: 7px 0; font-size: clamp(40px, 7.4vh, 56px); line-height: .9; }
  .hero-lead { margin: 10px 0; font-size: 10px; line-height: 1.65; }
  .feature-row { justify-content: flex-start; gap: 4px; }
  .feature-row span { padding: 5px 6px; font-size: 7px; }
  .feature-row b { font-size: 10px; }
  .entry-panel { max-width: none; height: auto; margin: 0; padding: 10px 14px; }
  .panel-heading { margin-bottom: 3px; }
  .section-index { margin-bottom: 2px; font-size: 7px; }
  .panel-heading h2 { font-size: 17px; }
  .seal { width: 27px; height: 27px; font-size: 10px; }
  .field-label { margin: 5px 0 3px; font-size: 8px; }
  .row-label small { font-size: 6px; }
  .name-field { height: 31px; }
  .name-field input { font-size: 10px; }
  .name-field small { font-size: 7px; }
  .character-grid { gap: 6px; }
  .character-card { height: clamp(82px, 25vh, 105px); }
  .character-info { left: 10px; bottom: 7px; }
  .character-info small { font-size: 6px; }
  .character-info b { margin: 0; font-size: 14px; }
  .character-info em { font-size: 6px; }
  .check-mark { top: 5px; right: 5px; width: 17px; height: 17px; font-size: 8px; }
  .player-count { gap: 4px; }
  .player-count button { height: 29px; }
  .player-count b { font-size: 14px; }
  .primary-button { min-height: 35px; margin-top: 7px; padding: 0 14px; font-size: 10px; }
  .entry-note, .start-footer { display: none; }

  .hub-screen, .character-select-screen { width: var(--mobile-landscape-width); height: var(--mobile-landscape-height); min-height: 0; overflow: hidden; padding-right:env(safe-area-inset-right);padding-left:env(safe-area-inset-left); }
  .hub-header, .character-select-header { flex: 0 0 43px; gap: 10px; width: calc(100% - 16px); }
  .hub-header .brand-mark { width: 28px; height: 28px; }
  .hub-header .brand-mark svg { width: 20px; }
  .hub-header .brand b { font-size: 12px; }
  .hub-header .brand small { font-size: 5px; }
  .hub-back { width: 29px; height: 29px; font-size: 11px; }
  .hub-player small { font-size: 5px; }
  .hub-player b { margin-top: 1px; font-size: 10px; }
  .hub-player { gap: 6px; }
  .hub-account-score { min-width: 49px; padding: 2px 5px; }
  .hub-account-score em { margin-top: 1px; font-size: 11px; }
  .hub-profile-button { width: 28px; height: 28px; }
  .hub-layout { grid-template-columns:minmax(0,22fr) minmax(0,42fr) minmax(0,36fr); gap: 7px; width: calc(100% - 16px); height: calc(100% - 43px); margin: 0 auto; padding: 5px 0; }
  .hub-menu { padding: 6px; }
  .hub-menu > .section-index { margin: 2px 5px 3px; font-size: 5px; }
  .hub-menu button { grid-template-columns: 27px 1fr 10px; gap: 6px; min-height: 0; height: calc((var(--mobile-landscape-height) - 68px) / 5); padding: 2px 5px; }
  .hub-menu button > span { width: 23px; height: 23px; font-size: 8px; }
  .hub-menu button b { font-size: 10px; }
  .hub-menu button small { margin-top: 1px; font-size: 5px; }
  .hub-menu button > i { font-size: 12px; }
  .hub-welcome .eyebrow { font-size: 6px; }
  .hub-welcome h1 { margin: 8px 0; font-size: clamp(31px, 8.5vh, 43px); }
  .hub-welcome > p:last-child { font-size: 7px; line-height: 1.7; }
  .hub-match-panel { padding: 10px; }
  .hub-match-panel .panel-heading h2 { font-size: 15px; }
  .hub-player-count { gap: 4px; margin-top: 8px; }
  .hub-player-count button { height: 45px; }
  .hub-player-count b { font-size: 17px; }
  .hub-player-count small { font-size: 5px; }
  .hub-mode-hint { margin: 6px 0 0; font-size: 6px; }
  .hub-difficulty-label { margin: 5px 0 3px; font-size: 5px; }
  .hub-difficulty { gap: 3px; }
  .hub-difficulty button { min-height: 31px; padding: 2px; }
  .hub-difficulty b { font-size: 8px; }
  .hub-difficulty small { margin-top: 1px; font-size: 5px; }
  .hub-difficulty-description { min-height: 17px; margin-top: 3px; font-size: 5px; line-height: 1.45; }
  .hub-match-panel .primary-button { min-height: 28px; margin-top: 4px; }
  .hub-character-plaque { right: 3%; bottom: 2%; left: 3%; padding: 6px 8px; }
  .hub-character-plaque small { font-size: 5px; }
  .hub-character-plaque b { margin: 2px 0; font-size: 14px; }
  .hub-character-plaque span { font-size: 5px; }

  #app { width:var(--mobile-landscape-width);height:var(--mobile-landscape-height);min-height:0;overflow:hidden; }
  .tutorial-screen, .profile-screen, .achievement-screen { width:100%;height:100%;min-height:0;padding:max(3px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left)); }
  .tutorial-header,.profile-header,.achievement-header { min-height:36px; }
  .tutorial-header h1,.profile-header h1,.achievement-header h1 { font-size:13px; }.tutorial-header small,.profile-header small,.achievement-header small { font-size:4px; }
  .tutorial-header .ghost-button,.profile-header .ghost-button { min-height:25px;height:25px;padding:0 8px;font-size:6px; }
  .tutorial-progress { gap:4px; }.tutorial-progress i { width:18px;height:18px;font-size:5px; }
  .tutorial-layout { grid-template-columns:minmax(0,22fr) minmax(0,54fr) minmax(0,24fr);gap:5px;height:calc(100% - 36px);padding-top:4px; }
  .tutorial-layout > *, .profile-layout > *, .achievement-layout > * { min-width:0; }
  .tutorial-coach,.tutorial-controls { padding:8px; }.tutorial-coach > small { font-size:5px; }.tutorial-coach h2 { margin:3px 0 5px;font-size:14px; }.tutorial-coach > p { min-height:25px;font-size:6px;line-height:1.45; }.tutorial-facts { gap:3px;margin-top:5px; }.tutorial-facts span { padding:4px;font-size:5px;line-height:1.35; }
  .tutorial-stage { padding:7px; }.tutorial-stage-top { font-size:5px; }.tutorial-stage-top em { font-size:10px; }.tutorial-arena { inset:24px 7px 48px;grid-template-columns:1fr 18px 1fr 18px 1fr;gap:2px; }.tutorial-node { width:72px;height:72px;font-size:5px; }.tutorial-node::before { inset:8px; }.tutorial-token { width:31px;height:31px;font-size:9px; }.tutorial-token.hero { left:7px;bottom:7px; }.tutorial-token.enemy { right:7px;top:7px; }.tutorial-token small { right:-3px;bottom:-4px;min-width:18px;padding:1px 2px;font-size:4px; }.tutorial-token.defeated::after { font-size:16px; }.tutorial-health { right:4px;bottom:3px;left:4px;gap:2px;font-size:4px; }.tutorial-health span { gap:1px;padding:2px 3px; }.tutorial-health b { font-size:4px; }.tutorial-result { right:7px;bottom:6px;left:7px;min-height:35px;padding:4px; }.tutorial-result b { font-size:8px; }.tutorial-result span,.tutorial-result small { margin-top:1px;font-size:5px; }.tutorial-controls { gap:3px; }.tutorial-controls > small { font-size:5px; }.tutorial-controls button { min-height:30px;font-size:6px; }.tutorial-rps { gap:2px; }
  .profile-header,.achievement-header { grid-template-columns:29px 1fr auto;gap:5px; }.profile-layout { grid-template-columns:minmax(0,20fr) minmax(0,55fr) minmax(0,25fr);gap:5px;height:calc(100% - 36px);padding-top:4px; }.profile-login-gate { padding:16px; }.profile-identity { padding:7px; }.profile-avatar-wrap { width:50px;height:50px;margin-bottom:4px; }.profile-identity h2 { font-size:13px; }.profile-identity > p,.profile-identity > button,.profile-identity > small { margin:2px 0;padding:3px;font-size:5px; }.profile-appearance-actions { gap:2px;margin-top:3px; }.profile-appearance-actions label,.profile-appearance-actions select { font-size:5px; }.profile-appearance-actions select { padding:2px; }.profile-main { padding:5px; }.profile-tabs { gap:1px;padding-bottom:3px; }.profile-tabs button,.achievement-toolbar button { padding:3px 5px;font-size:5px; }#profilePanel { height:calc(100% - 22px);padding-top:3px; }.profile-stat-grid { gap:2px; }.profile-stat-grid article,.collection-summary article { padding:4px; }.profile-stat-grid small,.collection-summary small { font-size:4px; }.profile-stat-grid b,.collection-summary b { margin-top:1px;font-size:10px; }.profile-point-row { gap:2px;margin-top:3px; }.profile-point-row > div { padding:4px; }.profile-point-row small,.profile-point-row span { font-size:4px; }.profile-point-row b { margin:1px 0;font-size:10px; }.profile-achievement-row { margin-top:3px;padding:4px; }.profile-achievement-row h3 { margin-bottom:2px;font-size:6px; }.profile-achievement-row span,.profile-achievement-row button { padding:2px 3px;font-size:4px; }.profile-character > div { bottom:5px; }.profile-character b { font-size:11px; }.profile-character p { font-size:4px; }.profile-match-list article { gap:5px;margin-bottom:2px;padding:4px; }.profile-match-list b { font-size:5px; }.profile-match-list small { margin-top:1px;font-size:4px; }.collection-summary { gap:2px; }.collection-characters { gap:2px;margin-top:3px; }.collection-characters article { height:105px; }.collection-characters img { height:82px; }.collection-characters b,.collection-characters small { font-size:4px; }.security-disabled { gap:2px; }.security-disabled h2 { font-size:10px; }.security-disabled p { font-size:5px; }.security-disabled button { padding:5px;font-size:5px; }.security-disabled span { font-size:4px; }
  .achievement-header #achievementSummary b { font-size:10px; }.achievement-header #achievementSummary span { font-size:4px; }.achievement-layout { grid-template-columns:minmax(0,18fr) minmax(0,64fr) minmax(0,18fr);gap:4px;height:calc(100% - 36px);padding-top:4px; }.achievement-side,.achievement-main,.achievement-recent { padding:4px; }.achievement-side nav { gap:1px; }.achievement-side nav button { padding:4px;font-size:5px; }.achievement-side > section { margin-top:4px;padding-top:3px; }.achievement-side article { margin-top:2px;padding:3px;font-size:4px; }.achievement-toolbar { padding-bottom:3px; }.achievement-toolbar small { font-size:4px; }.achievement-list { height:calc(100% - 23px); }.achievement-card { grid-template-columns:23px 1fr 72px;gap:4px;margin-bottom:2px;padding:4px; }.achievement-icon { width:21px;height:21px;font-size:6px; }.achievement-card small { font-size:4px; }.achievement-card h3 { margin:1px 0;font-size:7px; }.achievement-card p { font-size:4px;line-height:1.3; }.achievement-bar { margin-top:2px;height:2px; }.achievement-card em { font-size:4px; }.achievement-card > aside b,.achievement-card > aside small,.achievement-card > aside button { margin-top:1px;padding:2px;font-size:4px; }.achievement-recent article { gap:3px;margin-top:2px;padding:3px; }.achievement-recent b,.achievement-recent small,.achievement-recent > p { font-size:4px; }
  .profile-identity, .profile-character, .achievement-recent { overflow:auto;overscroll-behavior:contain; }

  .character-select-header > div h1 { font-size: 15px; }
  .character-select-header > div p { margin-top: 1px; font-size: 5px; }
  .character-select-header > span { font-size: 8px; }
  .character-select-layout { grid-template-columns:minmax(0,27fr) minmax(0,36fr) minmax(0,37fr); gap: 7px; width: calc(100% - 16px); height: calc(100% - 43px); padding: 5px 0; }
  .character-choice-list { padding: 6px; }
  .character-choice-list > .section-index { margin-bottom: 3px; font-size: 5px; }
  .protagonist-choice { padding-bottom: 3px; }
  .protagonist-choice h2 { margin-bottom: 3px; font-size: 5px; }
  .protagonist-choice > div { gap: 3px; }
  .character-choice { grid-template-columns: 27px 1fr; gap: 5px; min-height: 0; height: clamp(42px, 11.5vh, 48px); padding: 3px; }
  .character-choice.wide { margin-top: 3px; }
  .character-choice img { width: 26px; height: 26px; }
  .character-choice b { font-size: 8px; }
  .character-choice small { margin-top: 0; font-size: 5px; }
  .character-detail { padding: 6px 8px; }
  .character-detail-heading .section-index { font-size: 5px; }
  .character-detail-heading h2 { margin: 2px 0; font-size: 16px; }
  .character-detail-heading > span { font-size: 6px; }
  .character-skill-detail { gap: 3px; margin-top: 4px; }
  .character-skill-detail article { padding: 4px 6px; }
  .character-skill-detail header { gap: 5px; }
  .character-skill-detail header > span { font-size: 14px; }
  .character-skill-detail header small { font-size: 5px; }
  .character-skill-detail h3 { font-size: 11px; }
  .character-skill-detail ul { margin-top: 2px; padding-left: 12px; font-size: 5.5px; line-height: 1.3; }
  .character-detail-actions { gap: 4px; margin-top: 3px; }
  .character-detail-actions .primary-button, .character-detail-actions .ghost-button { min-height: 25px; padding: 0 8px; font-size: 7px; }

  .game-screen { width: var(--mobile-landscape-width); height: var(--mobile-landscape-height); min-height: 0; overflow: hidden; padding-right:env(safe-area-inset-right);padding-left:env(safe-area-inset-left); }

  .game-header {
    position: relative;
    top: auto;
    flex: 0 0 50px;
    grid-template-columns: 86px minmax(0, 1fr) 42px;
    min-height: 46px;
    height: 46px;
    margin: 3px 4px 2px;
    padding: 3px 8px;
  }
  .back-button { padding: 5px; font-size: 9px; white-space: nowrap; }
  .back-button span { margin-right: 3px; font-size: 16px; }
  .round-center { min-width: 0; }
  .round-kicker { gap: 6px; font-size: 7px; }
  .round-status { margin: 2px 0 4px; font-size: 12px; line-height: 1; }
  .timer-track { width: min(320px, 58vw); }
  .sudden-badge { display: flex; }
  .sudden-badge > span { width: 26px; height: 26px; font-size: 10px; }
  .sudden-badge div { display: none; }

  .battle-layout {
    display: grid;
    grid-template-columns: clamp(126px, 18vw, 154px) minmax(0, 1fr) clamp(112px, 16vw, 132px);
    gap: 4px;
    flex: 1 1 auto;
    width: 100%;
    height: calc(100% - 51px);
    min-height: 0;
    padding: 2px 4px 4px;
  }
  .side-panel { min-height: 0; padding: 5px; }
  .roster-panel { grid-column: 1; grid-row: 1; padding: 5px; }
  .side-title { margin: 0 2px 4px; padding-bottom: 4px; }
  .side-title span { font-size: 10px; }
  .side-title small { font-size: 7px; }
  .roster { display: flex; flex-direction: column; gap: 2px; height: calc(100% - 27px); }
  .roster-item {
    flex: 1 1 0;
    grid-template-columns: 28px minmax(0, 1fr) 23px;
    gap: 4px;
    width: 100%;
    min-height: 0;
    max-height: 49px;
    padding: 2px 3px;
  }
  .roster-avatar { width: 26px; height: 26px; }
  .roster-name { max-width: 68px; font-size: 8px; }
  .hearts, .roster-state { display: none; }
  .mobile-health { display: grid; grid-template-columns: 12px 1fr 20px; align-items: center; gap: 2px; margin-top: 3px; }
  .mobile-health span, .mobile-health em { color: #8d8599; font-size: 6px; font-style: normal; }
  .mobile-health i { display: block; height: 4px; overflow: hidden; border-radius: 3px; background: #302a3d; }
  .mobile-health i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff6379, #ff9ba8); box-shadow: 0 0 5px rgba(255, 111, 131, .5); }
  .roster-ap { min-width: 20px; }
  .roster-ap b { font-size: 14px; }
  .roster-ap small { font-size: 6px; }
  .legend { display: none; }

  .arena-column { grid-column: 2; grid-row: 1; min-height: 0; overflow: hidden; }
  .arena-shell { min-height: 0; height: auto; }
  .arena-node { width: 88px; height: 62px; }
  .arena-node .node-label { top: -10px; font-size: 6px; }
  .battle-token { width: 36px; height: 36px; }
  .game-screen .arena-art,
  .game-screen .arena-vignette,
  .game-screen .fate-core,
  .game-screen .arena-nodes,
  .game-screen .battle-token { transform: translateZ(0); backface-visibility: hidden; }
  .game-screen .arena-shell,
  .game-screen .glass-panel { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .battle-token .token-name { bottom: -11px; max-width: 54px; padding: 1px 4px; font-size: 6px; }
  .battle-log { grid-template-columns: 22px 1fr; gap: 5px; min-height: 30px; height: 30px; margin-top: 3px; padding: 3px 6px; }
  .log-glyph { width: 20px; height: 20px; font-size: 8px; }
  .battle-log > div { height: 22px; }
  .log-line { font-size: 7px; line-height: 11px; }
  .queue-panel { display: none; }

  .action-dock {
    position: fixed;
    z-index: 25;
    left: auto;
    right: 4px;
    top: 51px;
    bottom: 4px;
    display: block;
    width: clamp(112px, 16vw, 132px);
    min-height: 0;
    padding: 5px;
    overflow: hidden;
    transform: none;
  }
  .current-actor { display: none; }
  .action-buttons { display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; }
  .action-buttons button,
  .action-buttons .end-action {
    display: grid;
    flex: 1 1 0;
    grid-template-columns: 25px 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 3px 6px;
  }
  .action-icon { display: block; grid-row: 1 / span 2; font-size: 17px; }
  .action-buttons b { display: block; font-size: 9px; }
  .action-buttons small { display: block; font-size: 6px; }
  .skill-info-popover { left: auto; right: calc(clamp(112px, 16vw, 132px) + 9px); bottom: auto; top: 50%; width: min(300px, calc(100% - 280px)); padding: 10px 12px; transform: translateY(calc(-50% + 7px)); }
  .skill-info-popover.is-visible { transform: translateY(-50%); }
  .skill-info-popover b { font-size: 14px; }
  .skill-info-popover p { font-size: 7px; line-height: 1.55; }

  .rps-overlay { inset: 51px calc(clamp(112px, 16vw, 132px) + 8px) 4px calc(clamp(126px, 18vw, 154px) + 8px); }
  .rps-panel { width: min(520px, 98%); max-height: 100%; padding: 10px 12px; overflow: auto; }
  .rps-heading h2 { margin: 3px 0; font-size: 17px; }
  .rps-heading p { font-size: 7px; }
  .rps-choices { gap: 5px; margin-top: 8px; }
  .rps-choices button { height: clamp(72px, 24vh, 94px); padding: 4px; }
  .rps-choices button > span { width: 34px; height: 34px; margin-bottom: 3px; font-size: 16px; }
  .rps-choices b { font-size: 10px; }
  .rps-choices small { font-size: 6px; }
  .rps-reveal { margin-top: 6px; }
  .reveal-hand { padding: 3px 5px; font-size: 6px; }
  .modal-card { max-height: calc(var(--mobile-landscape-height) - 20px); padding: 20px; overflow-y: auto; }
  #gameOverModal { padding: 4px; }
  #gameOverModal .gameover-card {
    width: min(690px, calc(var(--mobile-landscape-width) - 12px));
    max-height: calc(var(--mobile-landscape-height) - 8px);
    padding: 10px 18px;
    overflow: hidden !important;
  }
  #gameOverModal .section-index { margin-bottom: 2px; font-size: 7px; }
  #gameOverModal h2 { font-size: 18px; }
  #gameOverModal .victory-rays { top: -245px; width: 360px; height: 360px; }
  #gameOverModal .winner-portrait { width: 44px; height: 44px; margin: 3px auto 2px; box-shadow: 0 0 0 3px rgba(230, 196, 120, .08), 0 0 16px rgba(230, 196, 120, .22); }
  #gameOverModal .gameover-card > b { font-size: 15px; }
  #gameOverModal .gameover-card > p:not(.section-index) { margin: 5px 0; font-size: 7px; }
  #gameOverModal .modal-actions { gap: 7px; margin-top: 8px; }
  #gameOverModal .modal-actions button { min-height: 31px; margin: 0; padding: 0 13px; font-size: 8px; }
  #gameOverModal .settlement-breakdown { gap: 3px; margin-top: 4px; }
  #gameOverModal .settlement-breakdown article { padding: 3px; }
  #gameOverModal .settlement-breakdown small, #gameOverModal .settlement-breakdown em { font-size: 6px; }
  #gameOverModal .settlement-breakdown b { margin: 1px 0; font-size: 11px; }
  #gameOverModal .damage-score-note { margin: 3px 0 !important; font-size: 6px !important; }
  #gameOverModal .settlement-standing { min-height: 18px; padding: 2px 4px; font-size: 6px; }
  #gameOverModal .settlement-standing b, #gameOverModal .settlement-standing em { font-size: 6px; }
  .elimination-card { width: min(580px, calc(var(--mobile-landscape-width) - 16px)); padding: 12px 22px; }
  .elimination-card .modal-emblem { width: 34px; height: 34px; margin-bottom: 8px; font-size: 13px; }
  .elimination-card .elimination-stats { margin: 6px 0 2px; }
  .elimination-card .elimination-stats span { padding: 4px 8px; font-size: 7px; }
  .elimination-card > p:not(.section-index) { margin: 5px 0; font-size: 7px; }
  .elimination-card .modal-actions { margin-top: 7px; }
  .settlement-pending-card { width: min(500px, calc(var(--mobile-landscape-width) - 20px)); padding: 18px 26px; }
  .settlement-pending-card h2 { margin: 4px 0; font-size: 17px; }
  .settlement-pending-card > p:not(.section-index) { font-size: 7px; }
  .settlement-spinner { width: 30px; height: 30px; margin-bottom: 8px; }
  .spectator-panel { left: auto; right: 4px; top: 51px; bottom: auto; display: flex; flex-direction: column; align-items: stretch; gap: 5px; width: clamp(128px, 17vw, 142px); height: calc(var(--mobile-landscape-height) - 55px); padding: 5px; transform: none; }
  .spectator-heading { min-width: 0; text-align: center; }
  .spectator-stats { display: grid; grid-template-columns: 1fr 1fr; flex: 0 0 auto; gap: 3px; font-size: 6px; text-align: center; }
  .spectator-stats strong { grid-column: 1 / -1; }
  .spectator-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: auto; }
  .spectator-actions button { min-height: 25px; padding: 0 3px; font-size: 6px; }
  #switchSpectator, #finishSpectating { grid-column: 1 / -1; }
}

/* Browsers that keep both address and navigation bars leave only ~275px of landscape height. */
@media (max-height: 320px) and (max-width: 930px), (max-height: 320px) and (hover: none) and (pointer: coarse), (max-height: 320px) and (any-pointer: coarse) {
  .start-header { flex-basis: 38px; padding: 3px 0; }
  .start-header .brand-mark { width: 27px; height: 27px; }
  .start-header .brand-mark svg { width: 19px; }
  .start-header .ghost-button { min-height: 27px; }
  .start-layout { height: calc(var(--mobile-landscape-height) - 39px); gap: 10px; padding: 2px 0 3px; }
  .entry-panel { padding: 5px 10px; }
  .panel-heading { margin-bottom: 0; }
  .panel-heading h2 { font-size: 14px; }
  .seal { width: 22px; height: 22px; }
  .field-label { margin: 2px 0 1px; }
  .name-field { height: 26px; }
  .character-card { height: 60px; }
  .character-info { bottom: 3px; }
  .character-info em { display: none; }
  .entry-actions { gap: 5px; }
  .entry-actions .primary-button, .online-entry { min-height: 30px; height: 30px; margin-top: 3px; padding: 0 10px; font-size: 8px; }
  .primary-button i, .online-entry i { font-size: 14px; }
}

/* Before the first user gesture portrait asks for rotation; an active game session relies on the OS orientation lock. */
@media (max-width: 930px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait), (any-pointer: coarse) and (orientation: portrait) {
  body.orientation-blocked { overflow: hidden; }
  body.orientation-blocked #app > .orientation-gate {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background:
      radial-gradient(circle at 50% 38%, rgba(122, 82, 209, .28), transparent 28%),
      linear-gradient(160deg, #18102d, #080712 68%);
    text-align: center;
  }
  body.landscape-session #app > .orientation-gate { display: none; }
  .orientation-gate::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(230, 196, 120, .18); pointer-events: none; }
  .rotate-phone { position: relative; width: 112px; height: 92px; margin-bottom: 24px; }
  .rotate-phone span { position: absolute; left: 27px; top: 4px; width: 50px; height: 82px; border: 2px solid var(--gold-light); border-radius: 8px; box-shadow: 0 0 28px rgba(169, 129, 255, .25); animation: phoneRotate 2.2s ease-in-out infinite; }
  .rotate-phone span::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; border: 1px solid var(--gold); border-radius: 50%; transform: translateX(-50%); }
  .rotate-phone i { position: absolute; right: 0; top: 27px; color: var(--cyan); font-size: 30px; font-style: normal; }
  .orientation-copy { position: relative; z-index: 1; }
  .orientation-copy h2 { margin: 5px 0 10px; font-family: var(--serif); font-size: 29px; font-weight: 400; letter-spacing: .14em; }
  .orientation-copy > p:last-child { max-width: 310px; margin: 0 auto; color: #9991a7; font-size: 12px; line-height: 1.8; }
  .orientation-gate .primary-button { width: 190px; margin-top: 24px; }
  .orientation-gate > small { max-width: 300px; margin-top: 20px; color: #5f586b; font-size: 9px; line-height: 1.7; }
  @keyframes phoneRotate { 0%, 28% { transform: rotate(0deg); } 65%, 100% { transform: rotate(90deg); } }
}

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

/* Store and account assets */
.character-choice.is-locked { position: relative; opacity: .46; filter: grayscale(.7); }
.character-choice.is-locked::after { content: "未解锁"; position: absolute; right: 6px; top: 6px; padding: 2px 5px; border: 1px solid rgba(230,196,120,.3); background: rgba(7,5,18,.88); color: var(--gold-light); font-size: 7px; letter-spacing: .1em; }
.character-detail-actions .primary-button:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.8); }
.store-screen, .account-screen { position: relative; flex-direction: column; width: 100vw; height: 100vh; min-height: 620px; overflow: hidden; padding: 18px 26px 22px; background: radial-gradient(circle at 65% 32%, rgba(117,73,186,.2), transparent 34%), linear-gradient(140deg, #121020, #070711 70%); }
.store-header { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 16px; min-height: 68px; border-bottom: 1px solid rgba(255,255,255,.07); }
.store-header h1, .store-header p { margin: 0; }
.store-header h1 { font-family: var(--serif); font-size: 24px; font-weight: 400; letter-spacing: .15em; }
.store-header p { margin-top: 4px; color: #80798d; font-size: 8px; }
.store-wallet-summary { display: flex; align-items: center; gap: 10px; }
.store-wallet-summary > span { min-width: 86px; padding: 7px 10px; border-left: 1px solid rgba(230,196,120,.2); }
.store-wallet-summary small, .store-wallet-summary b { display: block; }
.store-wallet-summary small { color: #746d80; font-size: 7px; }
.store-wallet-summary b { margin-top: 3px; color: var(--gold-light); font-size: 12px; font-weight: 500; }
.store-wallet-summary .store-last-change { min-width: 122px; }
.store-wallet-summary button, .store-earn-button, .store-ledger-button { padding: 9px 12px; border: 1px solid rgba(230,196,120,.25); background: rgba(15,12,26,.75); color: #d8d1e0; cursor: pointer; }
.store-layout { display: grid; grid-template-columns: 190px minmax(300px, .9fr) minmax(350px, 1.15fr); gap: 12px; height: calc(100dvh - 108px); padding-top: 14px; }
.store-sidebar, .store-catalog, .store-detail { min-height: 0; overflow: hidden; }
.store-sidebar { padding: 14px 10px; }
.store-sidebar > button { display: grid; grid-template-columns: 30px 1fr; width: 100%; min-height: 50px; margin: 3px 0; padding: 6px 8px; border: 1px solid transparent; background: transparent; color: #aca4b7; cursor: pointer; text-align: left; }
.store-sidebar > button span { grid-row: 1 / 3; display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(230,196,120,.22); color: var(--gold-light); }
.store-sidebar > button b, .store-sidebar > button small { display: block; }
.store-sidebar > button b { font-family: var(--serif); font-weight: 400; }
.store-sidebar > button small { color: #696374; font-size: 7px; }
.store-sidebar > button.is-selected { border-color: rgba(189,141,255,.38); background: rgba(119,72,179,.14); color: #fff; }
.store-sidebar .store-earn-button, .store-sidebar .store-ledger-button { display: block; min-height: 32px; margin-top: 10px; text-align: center; }
.store-catalog { padding: 13px; overflow-y: auto; }
.store-bonus-banner { display: flex; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid rgba(76,206,200,.24); background: rgba(44,153,153,.08); }
.store-bonus-banner b { color: #a6efea; font-size: 10px; }
.store-bonus-banner span { color: #8eabb0; font-size: 8px; }
.store-section-heading { display: flex; align-items: end; justify-content: space-between; margin: 14px 2px 10px; }
.store-section-heading small, .store-section-heading h2, .store-section-heading em { margin: 0; }
.store-section-heading h2 { font-family: var(--serif); font-size: 21px; font-weight: 400; }
.store-section-heading small, .store-section-heading em { color: #746d80; font-size: 7px; font-style: normal; }
.store-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.store-product-card { display: grid; grid-template-columns: 68px 1fr; gap: 8px; min-height: 82px; padding: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.07); background: rgba(5,4,13,.48); color: #ded8e6; cursor: pointer; text-align: left; }
.store-product-card:hover, .store-product-card.is-selected { border-color: rgba(196,150,255,.5); background: rgba(100,59,156,.16); }
.store-product-card img { width: 68px; height: 76px; object-fit: cover; object-position: center 18%; }
.store-product-card span { align-self: center; min-width: 0; }
.store-product-card small, .store-product-card b, .store-product-card em { display: block; }
.store-product-card small { color: #80778a; font-size: 7px; }
.store-product-card b { margin: 4px 0; font-family: var(--serif); font-weight: 400; }
.store-product-card em { color: var(--gold-light); font-size: 8px; font-style: normal; }
.store-detail { position: relative; padding: 12px; overflow-y: auto; }
#storeProductDetail { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(180px, 1fr); gap: 13px; min-height: 100%; }
.store-detail-art { min-height: 0; overflow: hidden; background: radial-gradient(circle, rgba(155,105,225,.2), transparent 60%); }
.store-detail-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 14%; }
.store-detail-copy { align-self: center; }
.store-detail-copy h2 { margin: 4px 0 7px; font-family: var(--serif); font-size: 24px; font-weight: 400; }
.store-detail-copy > small, .store-detail-copy > p { color: #8d8499; font-size: 8px; line-height: 1.65; }
.store-detail-skills article { margin: 7px 0; padding: 7px; border-left: 2px solid rgba(194,146,255,.5); background: rgba(6,5,14,.45); }
.store-detail-skills small, .store-detail-skills b { display: block; }
.store-detail-skills small { color: #756c81; font-size: 6px; }
.store-detail-skills b { margin: 2px 0; color: var(--gold-light); font-size: 10px; }
.store-detail-skills p { margin: 0; color: #a9a1b2; font-size: 8px; line-height: 1.55; }
.store-detail-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-self: end; }
.store-login-gate, .store-coming-soon, .store-empty { display: grid; height: 100%; place-content: center; justify-items: center; padding: 20px; text-align: center; }
.store-login-gate > span, .store-coming-soon > span, .store-empty > span { color: var(--gold-light); font-family: var(--serif); font-size: 34px; }
.store-login-gate h2, .store-coming-soon h2 { margin: 8px 0; font-family: var(--serif); font-weight: 400; }
.store-login-gate p, .store-coming-soon p, .store-empty p { max-width: 300px; color: #81798d; font-size: 9px; line-height: 1.7; }
.store-login-gate button { padding: 9px 18px; border: 1px solid var(--gold); background: transparent; color: var(--gold-light); cursor: pointer; }
.account-screen { display: none; place-items: center; }
.account-screen.is-active { display: grid; }
.store-auth-card { position: relative; width: min(460px,92vw); padding: 28px; }
.store-auth-card h1 { font-family: var(--serif); font-weight: 400; }
.store-auth-card label { display: block; margin: 9px 0; color: #a39aaa; font-size: 9px; }
.store-auth-card input { display: block; width: 100%; margin-top: 4px; padding: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(3,3,10,.65); color: #fff; }
.store-auth-tabs, .store-starter-field > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.store-auth-tabs button, .store-starter-field button { padding: 8px; border: 1px solid rgba(255,255,255,.1); background: transparent; color: #9991a4; }
.store-auth-tabs button.is-selected, .store-starter-field button.is-selected { border-color: var(--gold); color: var(--gold-light); }
.store-auth-message, .store-purchase-status { min-height: 18px; color: #f0a1a1; font-size: 8px; }
.store-purchase-balance { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.store-purchase-balance span { padding: 9px; border: 1px solid rgba(255,255,255,.08); }
.store-purchase-balance small, .store-purchase-balance b { display: block; }
.store-success-card > img { width: 100px; height: 130px; object-fit: cover; object-position: top; }
.store-ledger-card { max-height: 78dvh; overflow-y: auto; }
#storeLedgerList article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px; border-bottom: 1px solid rgba(255,255,255,.07); text-align: left; }
#storeLedgerList b, #storeLedgerList small { display: block; }
#storeLedgerList small { margin-top: 3px; color: #716a7c; font-size: 7px; }
#storeLedgerList em { font-style: normal; }
#storeLedgerList .is-positive { color: #80dbc9; } #storeLedgerList .is-negative { color: #ee9a9a; }

@media (max-width: 930px), (hover: none) and (pointer: coarse), (any-pointer: coarse) {
  .store-screen, .account-screen { width:var(--mobile-landscape-width);height:var(--mobile-landscape-height);min-height:0; }
  .store-screen { padding:max(4px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left)); }
  .store-header { grid-template-columns: 28px 1fr auto; min-height: 34px; gap: 6px; }
  .store-header h1 { font-size: 13px; } .store-header p { display: none; }
  .store-wallet-summary { gap: 3px; } .store-wallet-summary > span { min-width: 52px; padding: 3px 5px; } .store-wallet-summary .store-last-change { display: none; }
  .store-wallet-summary small { font-size: 5px; } .store-wallet-summary b { font-size: 8px; }
  .store-wallet-summary button { padding: 5px 7px; font-size: 6px; }
  .store-layout { grid-template-columns:minmax(0,16fr) minmax(0,36fr) minmax(0,48fr); gap: 5px; height:calc(100% - 43px);padding-top:5px; }
  .store-sidebar { padding: 4px; } .store-sidebar > .section-index { display: none; }
  .store-sidebar > button { grid-template-columns: 19px 1fr; min-height: 28px; margin: 1px 0; padding: 2px 3px; }
  .store-sidebar > button span { width: 16px; height: 16px; font-size: 6px; } .store-sidebar > button b { font-size: 8px; } .store-sidebar > button small { font-size: 5px; }
  .store-sidebar .store-earn-button, .store-sidebar .store-ledger-button { min-height: 23px; margin-top: 3px; padding: 3px; font-size: 6px; }
  .store-catalog, .store-detail { padding: 4px; }
  .store-bonus-banner { padding: 4px; } .store-bonus-banner b, .store-bonus-banner span { font-size: 5px; }
  .store-section-heading { margin: 5px 1px 3px; } .store-section-heading h2 { font-size: 11px; } .store-section-heading small, .store-section-heading em { font-size: 5px; }
  .store-product-grid { gap: 3px; } .store-product-card { grid-template-columns: 36px 1fr; min-height: 45px; gap: 3px; padding: 2px; }
  .store-product-card img { width: 36px; height: 41px; } .store-product-card small, .store-product-card em { font-size: 5px; } .store-product-card b { margin: 1px 0; font-size: 7px; }
  #storeProductDetail { grid-template-columns: minmax(105px,.8fr) minmax(150px,1fr); gap: 5px; }
  .store-detail-copy h2 { margin: 1px 0 3px; font-size: 13px; } .store-detail-copy > small, .store-detail-copy > p { font-size: 5px; }
  .store-detail-skills article { margin: 2px 0; padding: 3px; } .store-detail-skills small { font-size: 4px; } .store-detail-skills b { margin: 0; font-size: 6px; } .store-detail-skills p { font-size: 5px; line-height: 1.35; }
  .store-detail-actions { gap: 4px; } .store-detail-actions button { min-height: 24px; height: 24px; font-size: 6px; }
  .account-screen { padding: 4px; } .store-auth-card { width: min(430px,80vw); padding: 12px 22px; } .store-auth-card h1 { margin: 3px 0; font-size: 15px; }
  .store-auth-card label { margin: 3px 0; font-size: 6px; } .store-auth-card input { margin-top: 2px; padding: 5px; }
  .store-auth-tabs button, .store-starter-field button { padding: 4px; font-size: 6px; } .store-auth-card .primary-button { min-height: 26px; height: 26px; margin-top: 3px; font-size: 7px; }
}

.store-sale-price { color: #ffd68a !important; }
.store-sale-price del { margin-right: 4px; color: #756e7d; font-size: .88em; }

/* Android browsers may expose a desktop-sized CSS viewport in landscape. The runtime class is
   the hard fallback that keeps the complete hub inside the actual visual viewport. */
html.mobile-device-root,
html.mobile-device-root body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
body.mobile-landscape-device {
  --mobile-safe-top: 42px;
  --mobile-safe-bottom: 12px;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body.mobile-landscape-device #app {
  position: fixed;
  top: var(--mobile-ui-top, 0px);
  left: var(--mobile-ui-left, 0px);
  width: var(--mobile-landscape-width);
  height: var(--mobile-landscape-height);
  min-height: 0;
  overflow: hidden;
  transform: scale(var(--mobile-ui-scale, 1));
  transform-origin: left top;
}
body.mobile-landscape-device #app > .screen { width:100%;height:100%;min-width:0;min-height:0; }
/* VivoBrowser sometimes fails to repaint non-image layers after homeScreen changes from none to flex.
   Keep this one screen composited throughout mobile navigation and switch its visibility instead. */
body.mobile-landscape-device #homeScreen {
  position:absolute;inset:0;display:flex;visibility:hidden;opacity:0;pointer-events:none;
}
body.mobile-landscape-device #homeScreen.is-active {
  visibility:visible;opacity:1;pointer-events:auto;
}
body.mobile-landscape-device.fullscreen-resume-needed #app > .fullscreen-resume {
  position:fixed;z-index:260;top:0;left:0;display:grid;width:100vw;height:100dvh;
  place-items:center;padding:10px;background:linear-gradient(145deg,rgba(11,8,27,.98),rgba(7,17,31,.98));
  text-align:center;pointer-events:auto;touch-action:manipulation;
}
body.mobile-landscape-device .fullscreen-resume-card {
  width:min(430px,calc(100vw - 20px));max-height:calc(100dvh - 16px);padding:9px 16px;overflow:auto;
}
body.mobile-landscape-device .fullscreen-resume-card .section-index { margin:0 0 2px;font-size:7px; }
body.mobile-landscape-device .fullscreen-resume-card h2 { margin:2px 0 4px;font:400 18px/1.2 var(--serif); }
body.mobile-landscape-device .fullscreen-resume-card > p:not(.section-index) { margin:0;color:var(--muted);font-size:9px;line-height:1.45; }
body.mobile-landscape-device .fullscreen-resume-card .primary-button { width:100%;min-height:34px;margin-top:7px;padding:6px 14px; }

/* VivoBrowser 30 on high-DPR phones intermittently drops large translucent compositor layers:
   text and panels disappear while decoded portrait textures remain. The stable path keeps the same
   layout but removes the blur/filter/animation layers that trigger the GPU tile loss. */
html.mobile-stable-render .ambient { display:none !important; }
html.mobile-stable-render body.mobile-landscape-device #app {
  isolation:isolate;background:#0a0815;
}
html.mobile-stable-render body.mobile-landscape-device .glass-panel,
html.mobile-stable-render body.mobile-landscape-device .modal-layer {
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}
html.mobile-stable-render body.mobile-landscape-device .glass-panel {
  background:linear-gradient(145deg,rgba(30,24,57,.98),rgba(12,10,29,.99));
}
html.mobile-stable-render body.mobile-landscape-device *,
html.mobile-stable-render body.mobile-landscape-device *::before,
html.mobile-stable-render body.mobile-landscape-device *::after {
  animation:none !important;transition:none !important;will-change:auto !important;
}
html.mobile-stable-render body.mobile-landscape-device img { filter:none !important; }
html.mobile-stable-render body.mobile-landscape-device #homeScreen {
  position:relative;inset:auto;display:none;visibility:visible;opacity:1;pointer-events:none;
}
html.mobile-stable-render body.mobile-landscape-device #homeScreen.is-active {
  display:flex;visibility:visible;opacity:1;pointer-events:auto;
}
html.mobile-stable-render body.mobile-landscape-device .game-screen .arena-nodes {
  transform:none;backface-visibility:visible;
}
html.mobile-stable-render body.mobile-landscape-device .game-screen .battle-token {
  transform:translate(-50%,-50%);backface-visibility:visible;
}
.mobile-diagnostic-badge {
  position:absolute;z-index:999;right:8px;bottom:8px;max-width:calc(100% - 16px);padding:4px 7px;
  border:1px solid rgba(126,232,255,.7);background:rgba(4,7,18,.92);color:#bdefff;
  font:7px/1.35 var(--sans);letter-spacing:.02em;white-space:nowrap;pointer-events:none;
}

/* The portrait width can match max-width:930px while the same phone reports 2048px after rotating.
   Keep the entry screen mobile through the runtime class so it cannot jump back to desktop rules. */
body.mobile-landscape-device .start-screen {
  width:100%;height:100%;min-height:0;overflow:hidden;
  padding:var(--mobile-safe-top) 10px var(--mobile-safe-bottom);
}
body.mobile-landscape-device .start-header { flex:0 0 45px;width:100%;padding:6px 0; }
body.mobile-landscape-device .brand { gap:9px; }
body.mobile-landscape-device .brand-mark { width:32px;height:32px; }
body.mobile-landscape-device .brand-mark svg { width:23px; }
body.mobile-landscape-device .brand b { font-size:14px; }
body.mobile-landscape-device .brand small { margin-top:1px;font-size:6px; }
body.mobile-landscape-device .start-header .ghost-button { min-height:30px;padding:0 12px;font-size:9px; }
body.mobile-landscape-device .start-layout {
  display:grid;flex:1 1 auto;grid-template-columns:310px minmax(0,1fr);align-items:center;gap:14px;
  width:100%;height:calc(100% - 45px);min-height:0;margin:0;padding:5px 0 8px;
}
body.mobile-landscape-device .hero-copy { max-width:none;padding:0 4px;text-align:left; }
body.mobile-landscape-device .eyebrow { justify-content:flex-start;margin:0;font-size:8px; }
body.mobile-landscape-device .eyebrow span { width:25px; }
body.mobile-landscape-device .hero-copy h1 { margin:7px 0;font-size:44px;line-height:.9; }
body.mobile-landscape-device .hero-lead { margin:8px 0;font-size:9px;line-height:1.55; }
body.mobile-landscape-device .feature-row { justify-content:flex-start;gap:4px; }
body.mobile-landscape-device .feature-row span { padding:4px 5px;font-size:6px; }
body.mobile-landscape-device .feature-row b { font-size:9px; }
body.mobile-landscape-device .entry-panel { align-self:center;max-width:none;max-height:100%;margin:0;padding:7px 12px;overflow:auto; }
body.mobile-landscape-device .panel-heading { margin-bottom:2px; }
body.mobile-landscape-device .entry-panel .section-index { margin-bottom:2px;font-size:6px; }
body.mobile-landscape-device .entry-panel .panel-heading h2 { font-size:15px; }
body.mobile-landscape-device .entry-panel .seal { width:25px;height:25px;font-size:9px; }
body.mobile-landscape-device .entry-panel .field-label { margin:3px 0 2px;font-size:7px; }
body.mobile-landscape-device .entry-panel .row-label small { font-size:5px; }
body.mobile-landscape-device .entry-panel .name-field { height:28px; }
body.mobile-landscape-device .entry-panel .name-field input { font-size:9px; }
body.mobile-landscape-device .entry-panel .name-field small { font-size:6px; }
body.mobile-landscape-device .entry-panel .character-grid { gap:5px; }
body.mobile-landscape-device .entry-panel .character-card { height:76px; }
body.mobile-landscape-device .entry-panel .character-info { left:8px;bottom:5px; }
body.mobile-landscape-device .entry-panel .character-info small,
body.mobile-landscape-device .entry-panel .character-info em { font-size:5px; }
body.mobile-landscape-device .entry-panel .character-info b { margin:0;font-size:12px; }
body.mobile-landscape-device .entry-panel .check-mark { top:4px;right:4px;width:16px;height:16px;font-size:7px; }
body.mobile-landscape-device .entry-panel .primary-button,
body.mobile-landscape-device .entry-panel .online-entry { min-height:29px;height:29px;margin-top:4px;font-size:8px; }
body.mobile-landscape-device .entry-note,
body.mobile-landscape-device .start-footer { display:none; }

/* The remaining account/progression pages use the same fixed landscape canvas even when every
   mobile media feature becomes false after Android rotates into desktop-width landscape. */
body.mobile-landscape-device .tutorial-screen,
body.mobile-landscape-device .profile-screen,
body.mobile-landscape-device .achievement-screen {
  width:100%;height:100%;min-height:0;padding:var(--mobile-safe-top) 7px var(--mobile-safe-bottom);
}
body.mobile-landscape-device .tutorial-header,
body.mobile-landscape-device .profile-header,
body.mobile-landscape-device .achievement-header { min-height:36px; }
body.mobile-landscape-device .tutorial-header h1,
body.mobile-landscape-device .profile-header h1,
body.mobile-landscape-device .achievement-header h1 { font-size:13px; }
body.mobile-landscape-device .tutorial-header small,
body.mobile-landscape-device .profile-header small,
body.mobile-landscape-device .achievement-header small { font-size:5px; }
body.mobile-landscape-device .tutorial-progress { gap:4px; }
body.mobile-landscape-device .tutorial-progress i { width:18px;height:18px;font-size:6px; }
body.mobile-landscape-device .tutorial-layout {
  grid-template-columns:minmax(0,22fr) minmax(0,54fr) minmax(0,24fr);gap:5px;height:calc(100% - 36px);padding-top:4px;
}
body.mobile-landscape-device .tutorial-layout > *,
body.mobile-landscape-device .profile-layout > *,
body.mobile-landscape-device .achievement-layout > * { min-width:0; }
body.mobile-landscape-device .tutorial-coach,
body.mobile-landscape-device .tutorial-controls { padding:8px; }
body.mobile-landscape-device .tutorial-coach h2 { margin:3px 0 5px;font-size:14px; }
body.mobile-landscape-device .tutorial-coach > p { min-height:25px;font-size:6px;line-height:1.45; }
body.mobile-landscape-device .tutorial-facts { gap:3px;margin-top:5px; }
body.mobile-landscape-device .tutorial-facts span { padding:4px;font-size:5px;line-height:1.35; }
body.mobile-landscape-device .tutorial-stage { padding:7px; }
body.mobile-landscape-device .tutorial-stage-top { font-size:6px; }
body.mobile-landscape-device .tutorial-stage-top em { font-size:10px; }
body.mobile-landscape-device .tutorial-arena { inset:24px 7px 48px;grid-template-columns:1fr 18px 1fr 18px 1fr;gap:2px; }
body.mobile-landscape-device .tutorial-node { width:72px;height:72px;font-size:6px; }
body.mobile-landscape-device .tutorial-node::before { inset:8px; }
body.mobile-landscape-device .tutorial-token { width:31px;height:31px;font-size:9px; }
body.mobile-landscape-device .tutorial-token.hero { left:7px;bottom:7px; }
body.mobile-landscape-device .tutorial-token.enemy { right:7px;top:7px; }
body.mobile-landscape-device .tutorial-token small { right:-3px;bottom:-4px;min-width:18px;padding:1px 2px;font-size:4px; }
body.mobile-landscape-device .tutorial-token.defeated::after { font-size:16px; }
body.mobile-landscape-device .tutorial-health { right:4px;bottom:3px;left:4px;gap:2px;font-size:4px; }
body.mobile-landscape-device .tutorial-health span { gap:1px;padding:2px 3px; }
body.mobile-landscape-device .tutorial-health b { font-size:4px; }
body.mobile-landscape-device .tutorial-result { right:7px;bottom:6px;left:7px;min-height:35px;padding:4px; }
body.mobile-landscape-device .tutorial-controls { gap:3px; }
body.mobile-landscape-device .tutorial-controls button { min-height:30px;font-size:7px; }
body.mobile-landscape-device .profile-header,
body.mobile-landscape-device .achievement-header { grid-template-columns:29px 1fr auto;gap:5px; }
body.mobile-landscape-device .profile-layout {
  grid-template-columns:minmax(0,20fr) minmax(0,55fr) minmax(0,25fr);gap:5px;height:calc(100% - 36px);padding-top:4px;
}
body.mobile-landscape-device .profile-identity { padding:7px;overflow:auto; }
body.mobile-landscape-device .profile-avatar-wrap { width:50px;height:50px;margin-bottom:4px; }
body.mobile-landscape-device .profile-identity h2 { font-size:13px; }
body.mobile-landscape-device .profile-main { padding:5px; }
body.mobile-landscape-device .profile-tabs { gap:1px;padding-bottom:3px; }
body.mobile-landscape-device .profile-tabs button,
body.mobile-landscape-device .achievement-toolbar button { padding:3px 5px;font-size:6px; }
body.mobile-landscape-device #profilePanel { height:calc(100% - 22px);padding-top:3px; }
body.mobile-landscape-device .profile-stat-grid article,
body.mobile-landscape-device .collection-summary article { padding:4px; }
body.mobile-landscape-device .profile-stat-grid b,
body.mobile-landscape-device .collection-summary b { margin-top:1px;font-size:10px; }
body.mobile-landscape-device .profile-character > div { bottom:5px; }
body.mobile-landscape-device .profile-character b { font-size:11px; }
body.mobile-landscape-device .achievement-layout {
  grid-template-columns:minmax(0,18fr) minmax(0,64fr) minmax(0,18fr);gap:4px;height:calc(100% - 36px);padding-top:4px;
}
body.mobile-landscape-device .achievement-side,
body.mobile-landscape-device .achievement-main,
body.mobile-landscape-device .achievement-recent { padding:4px; }
body.mobile-landscape-device .achievement-list { height:calc(100% - 23px); }
body.mobile-landscape-device .achievement-card { grid-template-columns:23px 1fr 72px;gap:4px;margin-bottom:2px;padding:4px; }
body.mobile-landscape-device .achievement-icon { width:21px;height:21px;font-size:6px; }
body.mobile-landscape-device .achievement-card h3 { margin:1px 0;font-size:7px; }
body.mobile-landscape-device .achievement-card p { font-size:5px;line-height:1.3; }
body.mobile-landscape-device .achievement-recent { overflow:auto; }
body.mobile-landscape-device .hub-screen {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: var(--mobile-safe-top) 7px var(--mobile-safe-bottom);
}
body.mobile-landscape-device .hub-header {
  flex: 0 0 50px;
  gap: 10px;
  width: calc(100% - 16px);
}
body.mobile-landscape-device .hub-header .brand-mark { width: 34px; height: 34px; }
body.mobile-landscape-device .hub-header .brand-mark svg { width: 24px; }
body.mobile-landscape-device .hub-header .brand b { font-size: 16px; }
body.mobile-landscape-device .hub-header .brand small { font-size: 7px; }
body.mobile-landscape-device .hub-player { gap: 6px; }
body.mobile-landscape-device .hub-player small { font-size: 8px; }
body.mobile-landscape-device .hub-player b { margin-top: 1px; font-size: 14px; }
body.mobile-landscape-device .hub-account-score { min-width: 62px; padding: 3px 7px; }
body.mobile-landscape-device .hub-account-score em { margin-top: 1px; font-size: 16px; }
body.mobile-landscape-device .hub-profile-button { width: 35px; height: 35px; }
body.mobile-landscape-device .hub-layout {
  grid-template-columns: 226px minmax(265px, 1fr) 345px;
  gap: 9px;
  width: calc(100% - 16px);
  height: calc(100% - 50px);
  min-height: 0;
  margin: 0 auto;
  padding: 5px 0;
}
body.mobile-landscape-device .hub-menu { display:flex;flex-direction:column;align-self:stretch;min-height:0;padding:6px;overflow:hidden; }
body.mobile-landscape-device .hub-menu > .section-index { flex:0 0 auto;margin:2px 7px 4px;font-size:8px; }
body.mobile-landscape-device .hub-menu button {
  display: grid !important;
  visibility: visible;
  opacity: 1;
  flex: 1 1 0;
  grid-template-columns: 34px 1fr 12px;
  gap: 6px;
  min-height: 0;
  height: auto;
  max-height: none;
  padding: 2px 5px;
}
body.mobile-landscape-device .hub-menu button > span { width: 29px; height: 29px; font-size: 11px; }
body.mobile-landscape-device .hub-menu button b { font-size: 14px; }
body.mobile-landscape-device .hub-menu button small { margin-top: 1px; font-size: 8px; }
body.mobile-landscape-device .hub-menu button > i { font-size: 12px; }
body.mobile-landscape-device .hub-center { display:flex;align-items:center;min-width:0;min-height:0;overflow:hidden; }
body.mobile-landscape-device .hub-welcome { display:block;width:100%;min-width:0;opacity:1;visibility:visible; }
body.mobile-landscape-device .hub-welcome .eyebrow { font-size: 9px; }
body.mobile-landscape-device .hub-welcome h1 { margin: 10px 0; font-size: clamp(34px, 9vh, 44px); }
body.mobile-landscape-device .hub-welcome > p:last-child { font-size: 11px; line-height: 1.65; }
body.mobile-landscape-device .hub-match-panel { width:100%;max-height:100%;padding:8px 10px;overflow:auto; }
body.mobile-landscape-device .hub-match-panel .panel-heading { margin-bottom:3px; }
body.mobile-landscape-device .hub-match-panel .panel-heading h2 { font-size:16px; }
body.mobile-landscape-device .hub-player-count { gap:4px;margin-top:5px; }
body.mobile-landscape-device .hub-player-count button { height:38px; }
body.mobile-landscape-device .hub-player-count b { font-size:17px; }
body.mobile-landscape-device .hub-player-count small { font-size:7px; }
body.mobile-landscape-device .hub-mode-hint { margin:4px 0 0;font-size:8px; }
body.mobile-landscape-device .hub-difficulty-label { margin:4px 0 2px;font-size:8px; }
body.mobile-landscape-device .hub-difficulty { gap:3px; }
body.mobile-landscape-device .hub-difficulty button { min-height:31px;padding:2px; }
body.mobile-landscape-device .hub-difficulty b { font-size:10px; }
body.mobile-landscape-device .hub-difficulty small { font-size:7px; }
body.mobile-landscape-device .hub-difficulty-description { min-height:20px;margin-top:3px;font-size:7px;line-height:1.4; }
body.mobile-landscape-device .hub-match-panel .primary-button { min-height:28px;height:28px;margin-top:4px;font-size:9px; }
body.mobile-landscape-device .hub-character { min-width: 0; min-height: 0; overflow: hidden; }
body.mobile-landscape-device .hub-character img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
body.mobile-landscape-device .hub-character-plaque { right: 3%; bottom: 2%; left: 3%; padding: 6px 8px; }
body.mobile-landscape-device .hub-character-plaque small { font-size: 8px; }
body.mobile-landscape-device .hub-character-plaque b { margin: 3px 0; font-size: 19px; }
body.mobile-landscape-device .hub-character-plaque span { font-size: 8px; }

/* Full mobile store fallback. Android WebViews can report a desktop 100dvh even while the
   application itself is rendered on the fixed landscape canvas. Every height below therefore
   derives from #app, never from the browser-reported viewport. */
body.mobile-landscape-device .store-screen,
body.mobile-landscape-device .account-screen {
  width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;
}
body.mobile-landscape-device .store-screen { padding:var(--mobile-safe-top) 7px var(--mobile-safe-bottom); }
body.mobile-landscape-device .store-header {
  grid-template-columns:32px minmax(150px,1fr) auto;flex:0 0 43px;gap:6px;width:100%;min-height:43px;
}
body.mobile-landscape-device .store-header .hub-back { width:29px;height:29px;font-size:11px; }
body.mobile-landscape-device .store-header h1 { font-size:15px; }
body.mobile-landscape-device .store-header p { display:none; }
body.mobile-landscape-device .store-wallet-summary { gap:3px; }
body.mobile-landscape-device .store-wallet-summary > span { min-width:58px;padding:3px 5px; }
body.mobile-landscape-device .store-wallet-summary .store-last-change { display:none; }
body.mobile-landscape-device .store-wallet-summary small { font-size:6px; }
body.mobile-landscape-device .store-wallet-summary b { margin-top:1px;font-size:9px; }
body.mobile-landscape-device .store-wallet-summary button { padding:5px 7px;font-size:7px; }
body.mobile-landscape-device .store-layout {
  display:grid;flex:1 1 auto;grid-template-columns:145px 325px minmax(0,1fr);gap:5px;
  width:100%;height:calc(100% - 43px);min-height:0;padding-top:5px;
}
body.mobile-landscape-device .store-sidebar,
body.mobile-landscape-device .store-catalog,
body.mobile-landscape-device .store-detail { min-width:0;min-height:0; }
body.mobile-landscape-device .store-sidebar { display:flex;flex-direction:column;padding:4px;overflow:hidden; }
body.mobile-landscape-device .store-sidebar > .section-index { flex:0 0 auto;margin:2px 4px 3px;font-size:6px; }
body.mobile-landscape-device .store-sidebar > button {
  display:grid;flex:1 1 0;grid-template-columns:21px 1fr;align-content:center;min-height:0;height:auto;
  margin:1px 0;padding:2px 4px;
}
body.mobile-landscape-device .store-sidebar > button span { width:18px;height:18px;font-size:7px; }
body.mobile-landscape-device .store-sidebar > button b { font-size:9px; }
body.mobile-landscape-device .store-sidebar > button small { font-size:6px; }
body.mobile-landscape-device .store-sidebar .store-earn-button,
body.mobile-landscape-device .store-sidebar .store-ledger-button {
  display:block;flex:0 0 25px;min-height:25px;margin-top:3px;padding:3px;font-size:7px;text-align:center;
}
body.mobile-landscape-device .store-catalog,
body.mobile-landscape-device .store-detail { padding:5px;overflow:auto;overscroll-behavior:contain; }
body.mobile-landscape-device .store-bonus-banner { padding:5px 6px; }
body.mobile-landscape-device .store-bonus-banner b,
body.mobile-landscape-device .store-bonus-banner span { font-size:6px; }
body.mobile-landscape-device .store-section-heading { margin:6px 1px 4px; }
body.mobile-landscape-device .store-section-heading h2 { font-size:13px; }
body.mobile-landscape-device .store-section-heading small,
body.mobile-landscape-device .store-section-heading em { font-size:6px; }
body.mobile-landscape-device .store-product-grid { gap:4px; }
body.mobile-landscape-device .store-product-card {
  grid-template-columns:42px 1fr;gap:4px;min-height:53px;padding:3px;
}
body.mobile-landscape-device .store-product-card img { width:42px;height:47px; }
body.mobile-landscape-device .store-product-card small,
body.mobile-landscape-device .store-product-card em { font-size:6px; }
body.mobile-landscape-device .store-product-card b { margin:2px 0;font-size:8px; }
body.mobile-landscape-device #storeProductDetail {
  grid-template-columns:minmax(125px,.8fr) minmax(160px,1fr);gap:6px;width:100%;height:100%;min-height:0;
}
body.mobile-landscape-device .store-detail-art { height:100%;min-height:0; }
body.mobile-landscape-device .store-detail-copy { align-self:center;min-width:0;max-height:100%;overflow:auto; }
body.mobile-landscape-device .store-detail-copy h2 { margin:2px 0 4px;font-size:15px; }
body.mobile-landscape-device .store-detail-copy > small,
body.mobile-landscape-device .store-detail-copy > p { margin:3px 0;font-size:6px;line-height:1.45; }
body.mobile-landscape-device .store-detail-skills article { margin:3px 0;padding:4px; }
body.mobile-landscape-device .store-detail-skills small { font-size:5px; }
body.mobile-landscape-device .store-detail-skills b { margin:1px 0;font-size:8px; }
body.mobile-landscape-device .store-detail-skills p { font-size:6px;line-height:1.35; }
body.mobile-landscape-device .store-detail-actions { gap:4px; }
body.mobile-landscape-device .store-detail-actions button { min-height:25px;height:25px;font-size:7px; }
body.mobile-landscape-device .account-screen { padding:var(--mobile-safe-top) 7px var(--mobile-safe-bottom);place-items:center; }
body.mobile-landscape-device .store-auth-card { width:min(430px,80%);max-height:100%;padding:10px 20px;overflow:auto; }
body.mobile-landscape-device .store-auth-card h1 { margin:3px 0;font-size:15px; }
body.mobile-landscape-device .store-auth-card label { margin:3px 0;font-size:7px; }
body.mobile-landscape-device .store-auth-card input { margin-top:2px;padding:5px; }
body.mobile-landscape-device .store-auth-tabs button,
body.mobile-landscape-device .store-starter-field button { padding:4px;font-size:7px; }
body.mobile-landscape-device .store-auth-card .primary-button { min-height:27px;height:27px;margin-top:3px;font-size:8px; }

/* Full mobile character-selection fallback, also independent from media-query support. */
body.mobile-landscape-device .character-select-screen { width:100%;height:100%;min-height:0;overflow:hidden;padding:var(--mobile-safe-top) 7px var(--mobile-safe-bottom); }
body.mobile-landscape-device .character-select-header { flex:0 0 43px;gap:8px;width:calc(100% - 16px); }
body.mobile-landscape-device .character-select-header .hub-back { width:29px;height:29px;font-size:11px; }
body.mobile-landscape-device .character-select-header > div h1 { font-size:15px; }
body.mobile-landscape-device .character-select-header > div p { margin-top:1px;font-size:6px; }
body.mobile-landscape-device .character-select-header > span { font-size:9px; }
body.mobile-landscape-device .character-select-layout {
  grid-template-columns:245px minmax(0,1fr) 335px;gap:7px;width:calc(100% - 16px);
  height:calc(100% - 43px);min-height:0;margin:0 auto;padding:5px 0;
}
body.mobile-landscape-device .character-choice-list { align-self:stretch;padding:6px;overflow:auto; }
body.mobile-landscape-device .character-choice-list > .section-index { margin-bottom:3px;font-size:6px; }
body.mobile-landscape-device .protagonist-choice { padding-bottom:3px; }
body.mobile-landscape-device .protagonist-choice h2 { margin-bottom:3px;font-size:6px; }
body.mobile-landscape-device .protagonist-choice > div { gap:3px; }
body.mobile-landscape-device .character-choice {
  grid-template-columns:29px 1fr;gap:5px;min-height:0;height:43px;padding:3px;
}
body.mobile-landscape-device .character-choice.wide { margin-top:3px; }
body.mobile-landscape-device .character-choice img { width:28px;height:28px; }
body.mobile-landscape-device .character-choice b { font-size:9px; }
body.mobile-landscape-device .character-choice small { margin-top:0;font-size:6px; }
body.mobile-landscape-device .character-preview { min-width:0;min-height:0; }
body.mobile-landscape-device .character-detail { align-self:stretch;padding:6px 8px;overflow:auto; }
body.mobile-landscape-device .character-detail-heading .section-index { font-size:6px; }
body.mobile-landscape-device .character-detail-heading h2 { margin:2px 0;font-size:17px; }
body.mobile-landscape-device .character-detail-heading > span { font-size:7px; }
body.mobile-landscape-device .character-skill-detail { gap:3px;margin-top:4px; }
body.mobile-landscape-device .character-skill-detail article { padding:4px 6px; }
body.mobile-landscape-device .character-skill-detail header { gap:5px; }
body.mobile-landscape-device .character-skill-detail header > span { font-size:14px; }
body.mobile-landscape-device .character-skill-detail header small { font-size:5px; }
body.mobile-landscape-device .character-skill-detail h3 { font-size:11px; }
body.mobile-landscape-device .character-skill-detail ul { margin-top:2px;padding-left:12px;font-size:6px;line-height:1.3; }
body.mobile-landscape-device .character-detail-actions { gap:4px;margin-top:3px; }
body.mobile-landscape-device .character-detail-actions .primary-button,
body.mobile-landscape-device .character-detail-actions .ghost-button { min-height:26px;padding:0 8px;font-size:8px; }

/* Complete mobile battle fallback.  These selectors intentionally sit outside media queries. */
body.mobile-landscape-device .game-screen { width:100%;height:100%;min-height:0;overflow:hidden;padding:var(--mobile-safe-top) 0 var(--mobile-safe-bottom); }
body.mobile-landscape-device .game-header {
  position:relative;top:auto;display:grid;flex:0 0 52px;grid-template-columns:112px minmax(0,1fr) 52px;
  width:auto;height:48px;min-height:48px;margin:3px 5px 1px;padding:4px 9px;
}
body.mobile-landscape-device .back-button { padding:5px 7px;font-size:11px;white-space:nowrap; }
body.mobile-landscape-device .back-button span { margin-right:3px;font-size:17px; }
body.mobile-landscape-device .round-kicker { gap:7px;font-size:9px; }
body.mobile-landscape-device .round-status { margin:2px 0 4px;font-size:15px;line-height:1; }
body.mobile-landscape-device .timer-track { width:min(330px,58vw); }
body.mobile-landscape-device .sudden-badge > span { width:30px;height:30px;font-size:12px; }
body.mobile-landscape-device .sudden-badge div { display:none; }
body.mobile-landscape-device .battle-layout {
  display:grid;flex:1 1 auto;grid-template-columns:174px minmax(0,1fr) 158px;gap:5px;
  width:100%;height:calc(100% - 52px);min-height:0;padding:3px 5px 5px;
}
body.mobile-landscape-device .side-panel { min-width:0;min-height:0;padding:6px; }
body.mobile-landscape-device .roster-panel { grid-column:1;grid-row:1; }
body.mobile-landscape-device .side-title { margin:0 2px 4px;padding-bottom:4px; }
body.mobile-landscape-device .side-title span { font-size:12px; }
body.mobile-landscape-device .side-title small { font-size:9px; }
body.mobile-landscape-device .roster { display:flex;flex-direction:column;gap:3px;height:calc(100% - 27px); }
body.mobile-landscape-device .roster-item {
  display:grid;flex:1 1 0;grid-template-columns:34px minmax(0,1fr) 27px;gap:5px;width:100%;
  min-width:0;min-height:0;max-height:52px;padding:3px 4px;
}
body.mobile-landscape-device .roster-avatar { width:32px;height:32px; }
body.mobile-landscape-device .roster-name { max-width:82px;font-size:10px; }
body.mobile-landscape-device .hearts, body.mobile-landscape-device .roster-state { display:none; }
body.mobile-landscape-device .mobile-health { display:grid;grid-template-columns:14px 1fr 22px;align-items:center;gap:3px;margin-top:3px; }
body.mobile-landscape-device .mobile-health span, body.mobile-landscape-device .mobile-health em { color:#aaa2b7;font-size:8px;font-style:normal; }
body.mobile-landscape-device .mobile-health i { display:block;height:5px;overflow:hidden;border-radius:3px;background:#302a3d; }
body.mobile-landscape-device .mobile-health i b { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff6379,#ff9ba8); }
body.mobile-landscape-device .roster-ap { min-width:24px; }
body.mobile-landscape-device .roster-ap b { font-size:16px; }
body.mobile-landscape-device .roster-ap small { font-size:8px; }
body.mobile-landscape-device .legend, body.mobile-landscape-device .queue-panel { display:none; }
body.mobile-landscape-device .arena-column { grid-column:2;grid-row:1;min-width:0;min-height:0;overflow:hidden; }
body.mobile-landscape-device .arena-shell { width:100%;height:auto;min-width:0;min-height:0; }
body.mobile-landscape-device .arena-node { width:92px;height:65px; }
body.mobile-landscape-device .arena-node .node-label { top:-11px;font-size:8px; }
body.mobile-landscape-device .battle-token { width:42px;height:42px; }
body.mobile-landscape-device .battle-token .token-name { bottom:-13px;max-width:68px;padding:1px 4px;font-size:8px; }

/* Battle presentation foundation v35: four isolated render layers and reliable touch targets. */
.arena-shell .battle-layer { position:absolute; inset:0; }
.arena-path-layer { z-index:3; pointer-events:none; }
.arena-path-layer .arena-nodes { z-index:1; pointer-events:auto; }
.arena-piece-layer { z-index:8; pointer-events:none; }
.arena-effect-layer { z-index:20; overflow:hidden; pointer-events:none; }
.arena-float-layer { z-index:30; overflow:visible; pointer-events:none; }
.arena-path-svg { position:absolute; z-index:0; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.arena-path-svg path { fill:none; stroke:rgba(126,232,255,.78); stroke-width:.55; stroke-linecap:round; stroke-dasharray:2.2 2.2; opacity:0; filter:drop-shadow(0 0 2px rgba(126,232,255,.75)); }
.arena-path-svg.is-active path { opacity:1; animation:battlePathFlow .52s linear infinite; }
@keyframes battlePathFlow { to { stroke-dashoffset:-8.8; } }

.piece-anchor { position:absolute; width:160px; height:110px; transform:translate(-50%,-50%); pointer-events:none; }
.arena-count-3 .arena-position[data-position="0"] { left:50%; top:19%; }
.arena-count-3 .arena-position[data-position="1"] { left:77.7%; top:67%; }
.arena-count-3 .arena-position[data-position="2"] { left:22.3%; top:67%; }
.arena-count-4 .arena-position[data-position="0"] { left:50%; top:16%; }
.arena-count-4 .arena-position[data-position="1"] { left:86%; top:51%; }
.arena-count-4 .arena-position[data-position="2"] { left:50%; top:86%; }
.arena-count-4 .arena-position[data-position="3"] { left:14%; top:51%; }
.arena-count-5 .arena-position[data-position="0"] { left:50%; top:16%; }
.arena-count-5 .arena-position[data-position="1"] { left:84.2%; top:40.2%; }
.arena-count-5 .arena-position[data-position="2"] { left:71.2%; top:79.3%; }
.arena-count-5 .arena-position[data-position="3"] { left:28.8%; top:79.3%; }
.arena-count-5 .arena-position[data-position="4"] { left:15.8%; top:40.2%; }
.arena-count-6 .arena-position[data-position="0"] { left:50%; top:16%; }
.arena-count-6 .arena-position[data-position="1"] { left:81.2%; top:33.5%; }
.arena-count-6 .arena-position[data-position="2"] { left:81.2%; top:68.5%; }
.arena-count-6 .arena-position[data-position="3"] { left:50%; top:86%; }
.arena-count-6 .arena-position[data-position="4"] { left:18.8%; top:68.5%; }
.arena-count-6 .arena-position[data-position="5"] { left:18.8%; top:33.5%; }

/* Arena alignment v36: bind logical positions to the six painted stone platforms. */
.arena-count-3 .arena-node[data-node="0"], .arena-count-3 .arena-position[data-position="0"] { left:37%; top:31%; }
.arena-count-3 .arena-node[data-node="1"], .arena-count-3 .arena-position[data-position="1"] { left:73.5%; top:49%; }
.arena-count-3 .arena-node[data-node="2"], .arena-count-3 .arena-position[data-position="2"] { left:34.7%; top:69%; }
.arena-count-4 .arena-node[data-node="0"], .arena-count-4 .arena-position[data-position="0"] { left:37%; top:31%; }
.arena-count-4 .arena-node[data-node="1"], .arena-count-4 .arena-position[data-position="1"] { left:60.7%; top:31%; }
.arena-count-4 .arena-node[data-node="2"], .arena-count-4 .arena-position[data-position="2"] { left:64.3%; top:69%; }
.arena-count-4 .arena-node[data-node="3"], .arena-count-4 .arena-position[data-position="3"] { left:34.7%; top:69%; }
.arena-count-5 .arena-node[data-node="0"], .arena-count-5 .arena-position[data-position="0"] { left:37%; top:31%; }
.arena-count-5 .arena-node[data-node="1"], .arena-count-5 .arena-position[data-position="1"] { left:60.7%; top:31%; }
.arena-count-5 .arena-node[data-node="2"], .arena-count-5 .arena-position[data-position="2"] { left:73.5%; top:49%; }
.arena-count-5 .arena-node[data-node="3"], .arena-count-5 .arena-position[data-position="3"] { left:64.3%; top:69%; }
.arena-count-5 .arena-node[data-node="4"], .arena-count-5 .arena-position[data-position="4"] { left:34.7%; top:69%; }
.arena-count-6 .arena-node[data-node="0"], .arena-count-6 .arena-position[data-position="0"] { left:37%; top:31%; }
.arena-count-6 .arena-node[data-node="1"], .arena-count-6 .arena-position[data-position="1"] { left:60.7%; top:31%; }
.arena-count-6 .arena-node[data-node="2"], .arena-count-6 .arena-position[data-position="2"] { left:73.5%; top:49%; }
.arena-count-6 .arena-node[data-node="3"], .arena-count-6 .arena-position[data-position="3"] { left:64.3%; top:69%; }
.arena-count-6 .arena-node[data-node="4"], .arena-count-6 .arena-position[data-position="4"] { left:34.7%; top:69%; }
.arena-count-6 .arena-node[data-node="5"], .arena-count-6 .arena-position[data-position="5"] { left:26.4%; top:49%; }
.arena-node { width:clamp(126px,16%,164px); height:clamp(78px,20%,108px); }
.piece-anchor { width:clamp(172px,22%,196px); height:clamp(104px,26%,126px); }
body.mobile-landscape-device .arena-node { width:126px; height:78px; }
body.mobile-landscape-device .piece-anchor { width:172px; height:104px; }

.arena-piece-layer .battle-token,
body.mobile-landscape-device .arena-piece-layer .battle-token { width:56px; height:56px; z-index:10; pointer-events:auto; touch-action:manipulation; transition:filter .2s; }
.arena-piece-layer .battle-token.slot-0 { left:17%; top:21%; }
.arena-piece-layer .battle-token.slot-1 { left:50%; top:12%; }
.arena-piece-layer .battle-token.slot-2 { left:83%; top:21%; }
.arena-piece-layer .battle-token.slot-3 { left:17%; top:50%; }
.arena-piece-layer .battle-token.slot-4 { left:50%; top:50%; }
.arena-piece-layer .battle-token.slot-5 { left:83%; top:50%; }
.arena-piece-layer .battle-token.slot-6 { left:17%; top:79%; }
.arena-piece-layer .battle-token.slot-7 { left:50%; top:88%; }
.arena-piece-layer .battle-token.slot-8 { left:83%; top:79%; }
.arena-piece-layer .battle-token .token-ring { inset:6px; }
.arena-piece-layer .battle-token img { pointer-events:none; user-select:none; -webkit-user-drag:none; }
.arena-piece-layer .battle-token > :not(.token-ring) { pointer-events:none; }
.arena-piece-layer .battle-token.is-current { z-index:35; }
.arena-piece-layer .battle-token.is-performing { z-index:65; }
.arena-piece-layer .battle-token.is-targetable { z-index:80; }
.arena-piece-layer .battle-token.is-targetable .token-ring { box-shadow:0 0 0 3px rgba(255,111,131,.2),0 0 20px rgba(255,111,131,.88); }
.arena-piece-layer .battle-token .token-hp { left:12px; right:12px; bottom:2px; }
.arena-piece-layer .battle-token .token-name { bottom:-10px; }

.battle-impact { position:absolute; width:42px; height:42px; margin:-21px 0 0 -21px; border:2px solid currentColor; border-radius:50%; color:#ff6f83; opacity:0; animation:battleImpact .46s ease-out; }
.battle-impact.is-heal { color:#67efae; }
.battle-impact.is-shield { color:#7ee8ff; }
@keyframes battleImpact { 0% { opacity:1; transform:scale(.25); } 70% { opacity:.65; } 100% { opacity:0; transform:scale(1.9); } }
.combat-number { position:absolute; min-width:38px; padding:3px 7px; border:1px solid currentColor; border-radius:12px; background:rgba(8,6,20,.9); color:#ff7f91; font:700 13px/1.1 var(--sans); text-align:center; white-space:nowrap; transform:translate(-50%,-50%); animation:combatNumberFloat .9s ease-out forwards; }
.combat-number.kind-heal { color:#73efb2; }
.combat-number.kind-shield { color:#82e9ff; }
.combat-number.kind-horse { color:#f0c777; }
.combat-number.kind-last-stand { color:#f5d67e; }
@keyframes combatNumberFloat { 0% { opacity:0; transform:translate(-50%,-20%) scale(.7); } 18% { opacity:1; transform:translate(-50%,-58%) scale(1.12); } 100% { opacity:0; transform:translate(-50%,-150%) scale(.94); } }

.target-choice-strip { position:absolute; z-index:95; left:50%; bottom:54px; display:flex; align-items:center; gap:8px; max-width:min(92%,520px); padding:8px 38px 8px 10px; border:1px solid rgba(255,111,131,.55); border-radius:12px; background:rgba(10,7,25,.96); box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 20px rgba(255,111,131,.16); opacity:0; pointer-events:none; transform:translate(-50%,8px); transition:.16s; }
.target-choice-strip.is-visible { opacity:1; pointer-events:auto; transform:translate(-50%,0); }
.target-choice-strip > small { color:#c9bfda; white-space:nowrap; }
.target-choice-strip > div { display:flex; gap:6px; overflow-x:auto; }
.target-choice-strip > div button { display:flex; align-items:center; gap:5px; min-width:56px; min-height:44px; padding:4px 8px; border:1px solid rgba(255,255,255,.15); border-radius:9px; background:#35234e; color:#f4ecff; }
.target-choice-strip > div img { width:28px; height:28px; border-radius:50%; object-fit:cover; object-position:center 18%; pointer-events:none; }
.target-choice-strip > #closeTargetChoice { position:absolute; right:7px; top:50%; width:28px; height:28px; border:0; border-radius:50%; background:rgba(255,255,255,.08); color:#d7cde4; transform:translateY(-50%); }
.arena-shell[data-action-phase="prepare"] .arena-effect-layer,
.arena-shell[data-action-phase="travel"] .arena-effect-layer,
.arena-shell[data-action-phase="impact"] .arena-effect-layer { opacity:1; }

@media (max-height:430px), (max-width:930px) and (orientation:landscape) {
  .piece-anchor { width:172px; height:104px; }
  .arena-node { width:126px; height:78px; }
  .arena-count-3 .arena-node[data-node="0"], .arena-count-3 .arena-position[data-position="0"] { left:37%; top:28%; }
  .arena-count-3 .arena-node[data-node="1"], .arena-count-3 .arena-position[data-position="1"] { left:73.5%; top:49%; }
  .arena-count-3 .arena-node[data-node="2"], .arena-count-3 .arena-position[data-position="2"] { left:34.7%; top:72.5%; }
  .arena-count-4 .arena-node[data-node="0"], .arena-count-4 .arena-position[data-position="0"] { left:37%; top:28%; }
  .arena-count-4 .arena-node[data-node="1"], .arena-count-4 .arena-position[data-position="1"] { left:60.7%; top:28%; }
  .arena-count-4 .arena-node[data-node="2"], .arena-count-4 .arena-position[data-position="2"] { left:64.3%; top:72.5%; }
  .arena-count-4 .arena-node[data-node="3"], .arena-count-4 .arena-position[data-position="3"] { left:34.7%; top:72.5%; }
  .arena-count-5 .arena-node[data-node="0"], .arena-count-5 .arena-position[data-position="0"] { left:37%; top:28%; }
  .arena-count-5 .arena-node[data-node="1"], .arena-count-5 .arena-position[data-position="1"] { left:60.7%; top:28%; }
  .arena-count-5 .arena-node[data-node="2"], .arena-count-5 .arena-position[data-position="2"] { left:73.5%; top:49%; }
  .arena-count-5 .arena-node[data-node="3"], .arena-count-5 .arena-position[data-position="3"] { left:64.3%; top:72.5%; }
  .arena-count-5 .arena-node[data-node="4"], .arena-count-5 .arena-position[data-position="4"] { left:34.7%; top:72.5%; }
  .arena-count-6 .arena-node[data-node="0"], .arena-count-6 .arena-position[data-position="0"] { left:37%; top:28%; }
  .arena-count-6 .arena-node[data-node="1"], .arena-count-6 .arena-position[data-position="1"] { left:60.7%; top:28%; }
  .arena-count-6 .arena-node[data-node="2"], .arena-count-6 .arena-position[data-position="2"] { left:73.5%; top:49%; }
  .arena-count-6 .arena-node[data-node="3"], .arena-count-6 .arena-position[data-position="3"] { left:64.3%; top:72.5%; }
  .arena-count-6 .arena-node[data-node="4"], .arena-count-6 .arena-position[data-position="4"] { left:34.7%; top:72.5%; }
  .arena-count-6 .arena-node[data-node="5"], .arena-count-6 .arena-position[data-position="5"] { left:26.4%; top:49%; }
  .arena-piece-layer .battle-token,
  body.mobile-landscape-device .arena-piece-layer .battle-token { width:52px; height:52px; }
  .arena-piece-layer .battle-token .token-ring { inset:5px; }
  .target-choice-strip { bottom:42px; padding-top:5px; padding-bottom:5px; }
}

@media (prefers-reduced-motion:reduce) {
  .arena-path-svg.is-active path,
  .battle-impact,
  .combat-number { animation-duration:.01ms!important; animation-iteration-count:1!important; }
}

/* Common battle actions v37: readable paths, guarded damage, healing and persistent combat states. */
.arena-path-svg .arena-path-shadow { stroke:rgba(3,2,12,.78);stroke-width:1.6;stroke-dasharray:none;filter:none; }
.arena-path-svg .arena-action-path { stroke-width:.72; }
.arena-path-svg[data-kind="attack"] .arena-action-path { stroke:#ff8a9b;filter:drop-shadow(0 0 3px rgba(255,111,131,.9)); }
.arena-path-svg[data-kind="remote"] .arena-action-path { stroke:#c78bff;filter:drop-shadow(0 0 3px rgba(181,103,255,.95)); }
.arena-path-svg[data-kind="dash"] .arena-action-path,
.arena-path-svg[data-kind="dive"] .arena-action-path { stroke:#f1c76d;filter:drop-shadow(0 0 3px rgba(240,188,83,.92)); }
.arena-path-head { opacity:0;fill:#bff5ff;stroke:#fff;stroke-width:.22;filter:drop-shadow(0 0 2px #7ee8ff);pointer-events:none; }
.arena-path-svg[data-kind="attack"] .arena-path-head { fill:#ff8093;stroke:#ffd4db; }
.arena-path-svg[data-kind="remote"] .arena-path-head { fill:#c78bff;stroke:#f0dcff; }
.arena-path-svg[data-kind="dash"] .arena-path-head,
.arena-path-svg[data-kind="dive"] .arena-path-head { fill:#f2c96f;stroke:#fff0c7; }
.arena-path-svg.is-active .arena-path-head[data-active="true"] { opacity:1; }

.arena-piece-layer .battle-token::before,
.arena-piece-layer .battle-token::after { content:"";position:absolute;z-index:-1;inset:2px;border-radius:50%;opacity:0;pointer-events:none; }
.arena-piece-layer .battle-token.has-charge-aura::before { opacity:1;border:2px solid #f2ca6d;box-shadow:0 0 0 2px rgba(242,202,109,.16),0 0 16px rgba(242,202,109,.82),inset 0 0 9px rgba(255,225,138,.28);animation:chargeAuraHold 1.45s ease-in-out infinite; }
.arena-piece-layer .battle-token.has-pursuit-aura::after { inset:0;opacity:1;border:1px dashed rgba(205,145,255,.88);box-shadow:0 0 10px rgba(172,96,244,.72);animation:pursuitAuraOrbit 3s linear infinite; }
.arena-piece-layer .battle-token.has-shield-aura .token-ring { border-color:#9cefff;box-shadow:0 0 0 4px rgba(107,220,255,.17),0 0 18px rgba(84,201,255,.76),inset 0 0 10px rgba(129,234,246,.2); }
.arena-piece-layer .battle-token.has-horse-guard .token-ring { box-shadow:0 0 0 3px rgba(226,179,94,.2),0 0 15px rgba(196,132,52,.62); }
@keyframes chargeAuraHold { 0%,100% { transform:scale(.94);opacity:.72; } 50% { transform:scale(1.08);opacity:1; } }
@keyframes pursuitAuraOrbit { to { transform:rotate(360deg); } }

.route-destination { position:absolute;width:76px;height:46px;margin:-23px 0 0 -38px;border:1px solid rgba(126,232,255,.76);border-radius:50%;box-shadow:0 0 12px rgba(126,232,255,.35),inset 0 0 10px rgba(126,232,255,.12);opacity:0;animation:routeDestination .78s ease-out; }
.route-destination.is-dash,.route-destination.is-dive { border-color:#e9bf62;box-shadow:0 0 13px rgba(233,191,98,.5),inset 0 0 10px rgba(233,191,98,.14); }
@keyframes routeDestination { 0% { opacity:0;transform:scale(.55); } 25%,60% { opacity:1; } 100% { opacity:0;transform:scale(1.15); } }

.strike-trail { position:absolute;height:5px;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(255,139,157,.48) 38%,#fff 78%,#ff7188);box-shadow:0 0 8px #ff6f83;transform-origin:100% 50%;transform:translate(-100%,-50%) rotate(var(--strike-angle));opacity:0;animation:strikeTrail .56s cubic-bezier(.18,.8,.24,1); }
.strike-trail::after { content:"";position:absolute;right:-7px;top:50%;width:18px;height:18px;border-top:2px solid #fff;border-right:2px solid #ff8296;transform:translateY(-50%) rotate(45deg); }
.strike-trail.is-remote { height:3px;background:linear-gradient(90deg,transparent,#b864ff 48%,#f3dcff);box-shadow:0 0 11px #a855f7; }
@keyframes strikeTrail { 0% { opacity:0;transform:translate(-100%,-50%) rotate(var(--strike-angle)) scaleX(.08); } 24% { opacity:1; } 72% { opacity:.9;transform:translate(-100%,-50%) rotate(var(--strike-angle)) scaleX(1); } 100% { opacity:0;transform:translate(-100%,-50%) rotate(var(--strike-angle)) scaleX(.72); } }

.battle-impact { display:grid;place-items:center; }
.battle-impact i { position:absolute;width:84%;height:2px;border-radius:2px;background:currentColor;box-shadow:0 0 7px currentColor;transform:rotate(38deg); }
.battle-impact i + i { transform:rotate(-38deg); }
.battle-impact.is-move-arrival { color:#7ee8ff;border-style:dashed; }
.battle-impact.is-dash,.battle-impact.is-dive { color:#edbd5c; }
.battle-impact.is-horse,.battle-impact.is-horse-break { color:#e3ac58;border-width:3px;border-style:double; }
.battle-impact.is-shield-break { color:#8eefff;border-width:3px; }
.battle-impact.is-heal i,.battle-impact.is-move-arrival i,.battle-impact.is-horse i { display:none; }
.battle-impact.is-shield-break i { width:50%;transform:translate(-14px,-7px) rotate(24deg); }
.battle-impact.is-shield-break i + i { transform:translate(13px,9px) rotate(-31deg); }

.battle-particles { position:absolute;width:0;height:0;pointer-events:none; }
.battle-particles i { position:absolute;left:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:#ff7f91;box-shadow:0 0 7px currentColor;opacity:0;animation:battleParticle .74s ease-out var(--particle-delay) forwards; }
.battle-particles.is-heal i { width:4px;height:9px;border-radius:5px 5px 2px 2px;background:#74efb1;color:#74efb1; }
.battle-particles.is-shield-gain i,.battle-particles.is-shield-break i { background:#8defff;color:#8defff;clip-path:polygon(50% 0,100% 40%,68% 100%,12% 74%);border-radius:0; }
.battle-particles.is-charge i { background:#f4cf73;color:#f4cf73;transform:rotate(45deg); }
.battle-particles.is-pursuit i { background:#c88bff;color:#c88bff; }
.battle-particles.is-horse i,.battle-particles.is-horse-break i { background:#dca355;color:#dca355;border-radius:1px; }
@keyframes battleParticle { 0% { opacity:0;transform:rotate(var(--particle-angle)) translateX(3px) scale(.4); } 20% { opacity:1; } 100% { opacity:0;transform:rotate(var(--particle-angle)) translateX(var(--particle-distance)) scale(.75); } }

.battle-aura-effect { position:absolute;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;pointer-events:none; }
.battle-aura-effect > i { position:absolute;inset:7px;border:1px solid currentColor;border-radius:50%;animation:auraWave .88s ease-out forwards; }
.battle-aura-effect > i:nth-child(2) { animation-delay:.12s; }
.battle-aura-effect > i:nth-child(3) { animation-delay:.24s; }
.battle-aura-effect.is-heal { color:#72efaf; }
.battle-aura-effect.is-shield-gain { color:#88edff; }
.battle-aura-effect.is-charge { color:#f2c96d; }
.battle-aura-effect.is-pursuit { color:#c78bff; }
.battle-aura-effect.is-last-stand { color:#f5d67e; }
.battle-aura-effect.is-eliminated { color:#7a657f;filter:grayscale(.5); }
@keyframes auraWave { 0% { opacity:0;transform:scale(.42); } 24% { opacity:.95; } 100% { opacity:0;transform:scale(1.75); } }

.combat-number { z-index:3;letter-spacing:.03em;box-shadow:0 5px 16px rgba(0,0,0,.45),0 0 9px currentColor; }
.combat-number.kind-horse-break { color:#f0b65d;border-style:double; }
.combat-number.kind-damage { font-size:15px; }
.arena-piece-layer .battle-token.anim-hit { animation:tokenDamageRecoil .5s cubic-bezier(.2,.78,.32,1); }
.arena-piece-layer .battle-token.anim-guarded-hit { animation:tokenGuardedHit .46s ease; }
.arena-piece-layer .battle-token.anim-shield-break { animation:tokenShieldBreak .66s ease; }
.arena-piece-layer .battle-token.anim-horse-break { animation:tokenHorseBreak .72s ease; }
.arena-piece-layer .battle-token.anim-charge-windup { animation:chargeWindup .74s ease-in-out; }
.arena-piece-layer .battle-token.anim-heal-channel { animation:healChannel .8s ease-in-out; }
.arena-piece-layer .battle-token.is-strike-ready .token-ring { filter:brightness(1.15) contrast(1.05); }
@keyframes tokenDamageRecoil { 18% { transform:translate(calc(-50% - 5px),-50%) rotate(-5deg);filter:brightness(1.9) saturate(.45); } 42% { transform:translate(calc(-50% + 4px),-50%) rotate(4deg); } 68% { transform:translate(calc(-50% - 2px),-50%); } }
@keyframes tokenGuardedHit { 30% { transform:translate(-50%,-50%) scale(.92);filter:brightness(1.5) sepia(.35); } 58% { transform:translate(-50%,-50%) scale(1.05); } }
@keyframes tokenShieldBreak { 22% { transform:translate(-50%,-50%) scale(.9);filter:brightness(1.8) saturate(.5); } 55% { transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 0 14px #83efff); } }
@keyframes tokenHorseBreak { 20% { transform:translate(calc(-50% - 4px),-50%) rotate(-4deg); } 48% { transform:translate(calc(-50% + 5px),-50%) rotate(5deg);filter:sepia(.7) brightness(1.45); } 75% { transform:translate(-50%,-50%) scale(.94); } }
@keyframes chargeWindup { 0% { filter:brightness(1); } 50% { transform:translate(-50%,-50%) scale(1.12);filter:drop-shadow(0 0 16px #efc664) brightness(1.45); } }
@keyframes healChannel { 0%,100% { filter:brightness(1); } 48% { transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 0 15px #69e8a9) brightness(1.35); } }

html.mobile-stable-render body.mobile-landscape-device .battle-impact { animation:battleImpact .46s ease-out !important; }
html.mobile-stable-render body.mobile-landscape-device .combat-number { animation:combatNumberFloat .9s ease-out forwards !important; }
html.mobile-stable-render body.mobile-landscape-device .battle-particles i { animation:battleParticle .74s ease-out var(--particle-delay) forwards !important; }
html.mobile-stable-render body.mobile-landscape-device .battle-aura-effect > i { animation:auraWave .88s ease-out forwards !important; }
html.mobile-stable-render body.mobile-landscape-device .strike-trail { animation:strikeTrail .56s cubic-bezier(.18,.8,.24,1) !important; }
html.mobile-stable-render body.mobile-landscape-device .route-destination { animation:routeDestination .78s ease-out !important; }

@media (prefers-reduced-motion:reduce) {
  .arena-path-svg.is-active path,.battle-impact,.combat-number,.battle-particles i,.battle-aura-effect > i,.strike-trail,.route-destination,
  html.mobile-stable-render body.mobile-landscape-device .battle-impact,
  html.mobile-stable-render body.mobile-landscape-device .combat-number,
  html.mobile-stable-render body.mobile-landscape-device .battle-particles i,
  html.mobile-stable-render body.mobile-landscape-device .battle-aura-effect > i,
  html.mobile-stable-render body.mobile-landscape-device .strike-trail,
  html.mobile-stable-render body.mobile-landscape-device .route-destination { animation-duration:.01ms !important;animation-iteration-count:1 !important; }
}
body.mobile-landscape-device .battle-log { grid-template-columns:25px 1fr;gap:6px;height:34px;min-height:34px;margin-top:3px;padding:4px 7px; }
body.mobile-landscape-device .log-glyph { width:23px;height:23px;font-size:9px; }
body.mobile-landscape-device .battle-log > div { height:25px; }
body.mobile-landscape-device .log-line { font-size:9px;line-height:12px; }
body.mobile-landscape-device .action-dock {
  position:absolute;z-index:25;top:calc(var(--mobile-safe-top) + 52px);right:5px;bottom:var(--mobile-safe-bottom);left:auto;display:block;
  width:158px;min-height:0;padding:6px;overflow:hidden;transform:none;
}
body.mobile-landscape-device .current-actor { display:none; }
body.mobile-landscape-device .action-buttons { display:flex;flex-direction:column;gap:4px;width:100%;height:100%; }
body.mobile-landscape-device .action-buttons button, body.mobile-landscape-device .action-buttons .end-action {
  display:grid;flex:1 1 0;grid-template-columns:30px 1fr;grid-template-rows:1fr 1fr;
  width:100%;min-width:0;min-height:0;height:auto;padding:3px 7px;
}
body.mobile-landscape-device .action-icon { display:block;grid-row:1 / span 2;font-size:19px; }
body.mobile-landscape-device .action-buttons b { display:block;font-size:11px; }
body.mobile-landscape-device .action-buttons small { display:block;font-size:8px; }
body.mobile-landscape-device .skill-info-popover { left:auto;right:168px;top:50%;bottom:auto;width:min(330px,calc(100% - 365px));padding:10px 12px;transform:translateY(calc(-50% + 7px)); }
body.mobile-landscape-device .skill-info-popover.is-visible { transform:translateY(-50%); }
body.mobile-landscape-device .skill-info-popover b { font-size:15px; }
body.mobile-landscape-device .skill-info-popover p { font-size:9px;line-height:1.55; }
body.mobile-landscape-device .rps-overlay { inset:calc(var(--mobile-safe-top) + 52px) 168px var(--mobile-safe-bottom) 184px; }
body.mobile-landscape-device .rps-panel { width:min(520px,98%);max-height:100%;padding:10px 12px;overflow:auto; }
body.mobile-landscape-device .rps-heading h2 { margin:3px 0;font-size:19px; }
body.mobile-landscape-device .rps-heading p { font-size:9px; }
body.mobile-landscape-device .rps-choices { gap:6px;margin-top:8px; }
body.mobile-landscape-device .rps-choices button { height:88px;padding:5px; }
body.mobile-landscape-device .rps-choices button > span { width:38px;height:38px;margin-bottom:3px;font-size:18px; }
body.mobile-landscape-device .rps-choices b { font-size:12px; }
body.mobile-landscape-device .rps-choices small { font-size:8px; }
body.mobile-landscape-device .modal-card { max-height:calc(var(--mobile-landscape-height) - 18px);overflow-y:auto; }
body.mobile-landscape-device .spectator-panel { right:5px;top:calc(var(--mobile-safe-top) + 52px);bottom:var(--mobile-safe-bottom);width:158px;height:auto; }

/* Native phone canvas (v27).
   A stable 720-960px visual viewport is already the phone's real landscape canvas, so do not
   shrink a second 930px design surface into it. Flexible columns below keep every page inside
   800x360 while preserving the three-column composition and readable touch targets. */
html.native-mobile-canvas body.mobile-landscape-device {
  --mobile-safe-top: 28px;
  --mobile-safe-bottom: 6px;
}
html.native-mobile-canvas body.mobile-landscape-device #app { transform:none; }
html.native-mobile-canvas body.mobile-landscape-device .start-header { flex-basis:43px; }
html.native-mobile-canvas body.mobile-landscape-device .start-layout {
  grid-template-columns:minmax(245px,34%) minmax(0,1fr);gap:10px;height:calc(100% - 43px);
}
html.native-mobile-canvas body.mobile-landscape-device .entry-panel { padding:6px 10px; }
html.native-mobile-canvas body.mobile-landscape-device .hub-header { flex-basis:44px;width:calc(100% - 10px); }
html.native-mobile-canvas body.mobile-landscape-device .hub-layout {
  grid-template-columns:minmax(176px,24%) minmax(230px,1fr) minmax(270px,39%);
  gap:6px;width:calc(100% - 10px);height:calc(100% - 44px);padding:3px 0;
}
html.native-mobile-canvas body.mobile-landscape-device .hub-menu { padding:4px; }
html.native-mobile-canvas body.mobile-landscape-device .hub-menu button { grid-template-columns:32px 1fr 10px;gap:4px; }
html.native-mobile-canvas body.mobile-landscape-device .hub-menu button b { font-size:14px; }
html.native-mobile-canvas body.mobile-landscape-device .hub-menu button small { font-size:8px; }
html.native-mobile-canvas body.mobile-landscape-device .hub-welcome h1 { font-size:36px; }
html.native-mobile-canvas body.mobile-landscape-device .hub-character-plaque { right:2%;left:2%; }

html.native-mobile-canvas body.mobile-landscape-device .character-select-header,
html.native-mobile-canvas body.mobile-landscape-device .store-header { flex-basis:39px;min-height:39px; }
html.native-mobile-canvas body.mobile-landscape-device .character-select-layout {
  grid-template-columns:minmax(185px,25%) minmax(205px,1fr) minmax(250px,36%);
  gap:6px;width:calc(100% - 10px);height:calc(100% - 39px);padding:3px 0;
}
html.native-mobile-canvas body.mobile-landscape-device .character-choice-list,
html.native-mobile-canvas body.mobile-landscape-device .character-detail { padding:5px; }
html.native-mobile-canvas body.mobile-landscape-device .character-choice { height:40px; }
html.native-mobile-canvas body.mobile-landscape-device .character-skill-detail ul { font-size:7px;line-height:1.35; }

html.native-mobile-canvas body.mobile-landscape-device .store-layout {
  grid-template-columns:minmax(108px,15%) minmax(245px,35%) minmax(0,1fr);
  gap:5px;height:calc(100% - 39px);padding-top:3px;
}
html.native-mobile-canvas body.mobile-landscape-device .store-sidebar > button b,
html.native-mobile-canvas body.mobile-landscape-device .store-product-card b { font-size:9px; }
html.native-mobile-canvas body.mobile-landscape-device .store-sidebar > button small,
html.native-mobile-canvas body.mobile-landscape-device .store-product-card small,
html.native-mobile-canvas body.mobile-landscape-device .store-product-card em,
html.native-mobile-canvas body.mobile-landscape-device .store-detail-copy > small,
html.native-mobile-canvas body.mobile-landscape-device .store-detail-copy > p,
html.native-mobile-canvas body.mobile-landscape-device .store-detail-skills p { font-size:7px; }
html.native-mobile-canvas body.mobile-landscape-device #storeProductDetail {
  grid-template-columns:minmax(112px,42%) minmax(0,1fr);gap:5px;
}

html.native-mobile-canvas body.mobile-landscape-device .game-header {
  flex-basis:46px;grid-template-columns:105px minmax(0,1fr) 46px;height:43px;min-height:43px;
}
html.native-mobile-canvas body.mobile-landscape-device .battle-layout {
  grid-template-columns:145px minmax(0,1fr) 132px;gap:4px;height:calc(100% - 46px);padding:2px 4px 4px;
}
html.native-mobile-canvas body.mobile-landscape-device .action-dock {
  top:calc(var(--mobile-safe-top) + 46px);right:4px;bottom:var(--mobile-safe-bottom);width:132px;padding:4px;
}
html.native-mobile-canvas body.mobile-landscape-device .action-buttons { gap:3px; }
html.native-mobile-canvas body.mobile-landscape-device .action-buttons button,
html.native-mobile-canvas body.mobile-landscape-device .action-buttons .end-action {
  grid-template-columns:26px 1fr;padding:2px 5px;
}
html.native-mobile-canvas body.mobile-landscape-device .action-icon { font-size:17px; }
html.native-mobile-canvas body.mobile-landscape-device .action-buttons b { font-size:11px; }
html.native-mobile-canvas body.mobile-landscape-device .action-buttons small { font-size:8px; }
html.native-mobile-canvas body.mobile-landscape-device .rps-overlay {
  inset:calc(var(--mobile-safe-top) + 46px) 140px var(--mobile-safe-bottom) 153px;
}
html.native-mobile-canvas body.mobile-landscape-device .spectator-panel {
  right:4px;top:calc(var(--mobile-safe-top) + 46px);bottom:var(--mobile-safe-bottom);width:132px;
}
html.native-mobile-canvas body.mobile-landscape-device .skill-info-popover {
  right:140px;width:min(310px,calc(100% - 305px));
}
html.native-mobile-canvas body.mobile-landscape-device .modal-card {
  max-height:calc(var(--mobile-landscape-height) - 12px);
}

/* Desktop readability pass: key navigation and battle information are no longer 6-9px text. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  html:not(.mobile-device-root) .hub-header .brand b { font-size:26px; }
  html:not(.mobile-device-root) .hub-header .brand small { font-size:10px; }
  html:not(.mobile-device-root) .hub-player small { font-size:11px; }
  html:not(.mobile-device-root) .hub-player b { font-size:19px; }
  html:not(.mobile-device-root) .hub-account-score em { font-size:22px; }
  html:not(.mobile-device-root) .hub-menu > .section-index { font-size:10px; }
  html:not(.mobile-device-root) .hub-menu button b { font-size:19px; }
  html:not(.mobile-device-root) .hub-menu button small { font-size:11px; }
  html:not(.mobile-device-root) .hub-welcome .eyebrow { font-size:12px; }
  html:not(.mobile-device-root) .hub-welcome > p:last-child { font-size:17px; }
  html:not(.mobile-device-root) .hub-character-plaque small { font-size:11px; }
  html:not(.mobile-device-root) .hub-character-plaque b { font-size:27px; }
  html:not(.mobile-device-root) .hub-character-plaque span { font-size:11px; }
  html:not(.mobile-device-root) .back-button { font-size:15px; }
  html:not(.mobile-device-root) .round-kicker { font-size:12px; }
  html:not(.mobile-device-root) .round-status { font-size:22px; }
  html:not(.mobile-device-root) .side-title span { font-size:17px; }
  html:not(.mobile-device-root) .side-title small { font-size:11px; }
  html:not(.mobile-device-root) .roster-name { font-size:14px; }
  html:not(.mobile-device-root) .roster-state { font-size:10px; }
  html:not(.mobile-device-root) .roster-ap b { font-size:21px; }
  html:not(.mobile-device-root) .roster-ap small { font-size:10px; }
  html:not(.mobile-device-root) .log-line { font-size:12px; }
  html:not(.mobile-device-root) .current-actor small { font-size:10px; }
  html:not(.mobile-device-root) .current-actor b { font-size:15px; }
  html:not(.mobile-device-root) .action-buttons b { font-size:15px; }
  html:not(.mobile-device-root) .action-buttons small { font-size:10px; }
  html:not(.mobile-device-root) .queue-panel .side-title span { font-size:17px; }
  html:not(.mobile-device-root) .skill-info-popover p { font-size:11px; }
}

/* Position containers v38: every logical position owns a bounded, readable token formation. */
.arena-node[data-node="0"], .piece-anchor[data-position="0"], .roster-position-badge[data-position="0"] { --position-color:#f0ca72; }
.arena-node[data-node="1"], .piece-anchor[data-position="1"], .roster-position-badge[data-position="1"] { --position-color:#75ddff; }
.arena-node[data-node="2"], .piece-anchor[data-position="2"], .roster-position-badge[data-position="2"] { --position-color:#b891ff; }
.arena-node[data-node="3"], .piece-anchor[data-position="3"], .roster-position-badge[data-position="3"] { --position-color:#ff8f9f; }
.arena-node[data-node="4"], .piece-anchor[data-position="4"], .roster-position-badge[data-position="4"] { --position-color:#74dda9; }
.arena-node[data-node="5"], .piece-anchor[data-position="5"], .roster-position-badge[data-position="5"] { --position-color:#e7a66c; }

.arena-node,
.piece-anchor,
body.mobile-landscape-device .arena-node,
body.mobile-landscape-device .piece-anchor {
  width:clamp(132px,18%,158px);
  height:clamp(92px,25%,112px);
}
.arena-node {
  color:var(--position-color,#d8c5ff);
  border:1px solid currentColor;
  border-radius:28px;
  background:radial-gradient(ellipse at center,rgba(36,29,58,.58),rgba(9,7,22,.42) 72%);
  box-shadow:0 0 0 1px rgba(8,6,20,.72),inset 0 0 24px rgba(109,79,164,.14);
  opacity:.58;
  pointer-events:auto;
  transition:width .2s,height .2s,opacity .2s,filter .2s,box-shadow .2s,transform .2s;
}
.arena-node::before {
  inset:6px;
  border:1px dashed currentColor;
  border-radius:22px;
  opacity:.35;
}
.arena-node.is-populated { opacity:.82; }
.arena-node.is-empty { filter:saturate(.35) brightness(.62); }
.arena-node[data-occupancy="2"] { box-shadow:0 0 13px color-mix(in srgb,currentColor 22%,transparent),inset 0 0 25px rgba(109,79,164,.16); }
.arena-node[data-occupancy="3"] { opacity:.9;box-shadow:0 0 17px color-mix(in srgb,currentColor 28%,transparent),inset 0 0 27px rgba(109,79,164,.2); }
.arena-node[data-occupancy="4"],
.arena-node[data-occupancy="5"],
.arena-node[data-occupancy="6"] { opacity:1;box-shadow:0 0 22px color-mix(in srgb,currentColor 42%,transparent),0 0 0 2px color-mix(in srgb,currentColor 12%,transparent),inset 0 0 30px rgba(109,79,164,.25); }
.arena-node.is-crowded { cursor:zoom-in; }
.arena-node.is-expanded { cursor:zoom-out; }
.arena-node .node-label {
  z-index:3;
  top:-18px;
  min-width:86px;
  justify-content:center;
  padding:3px 8px;
  border:1px solid color-mix(in srgb,currentColor 48%,transparent);
  border-radius:11px;
  background:rgba(8,6,20,.9);
  color:currentColor;
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
  box-shadow:0 5px 15px rgba(0,0,0,.28);
}
.arena-node .node-number {
  position:absolute;
  left:50%;
  top:50%;
  color:currentColor;
  font:700 40px/1 var(--serif);
  opacity:.13;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.arena-node.is-empty .node-number { opacity:.2; }

.piece-anchor { z-index:1;transition:width .2s,height .2s,opacity .2s,filter .2s; }
.piece-anchor .position-shared-plate {
  position:absolute;
  z-index:0;
  inset:5px;
  border:1px solid var(--position-color,#d8c5ff);
  border-radius:24px;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--position-color,#d8c5ff) 20%,transparent),transparent 69%);
  box-shadow:inset 0 0 18px color-mix(in srgb,var(--position-color,#d8c5ff) 12%,transparent);
  opacity:0;
  pointer-events:none;
}
.piece-anchor.is-populated .position-shared-plate { opacity:.16; }
.piece-anchor[data-occupancy="2"] .position-shared-plate { opacity:.25; }
.piece-anchor[data-occupancy="3"] .position-shared-plate { opacity:.32; }
.piece-anchor[data-occupancy="4"] .position-shared-plate,
.piece-anchor[data-occupancy="5"] .position-shared-plate,
.piece-anchor[data-occupancy="6"] .position-shared-plate { opacity:.46;box-shadow:0 0 18px color-mix(in srgb,var(--position-color,#d8c5ff) 32%,transparent),inset 0 0 22px color-mix(in srgb,var(--position-color,#d8c5ff) 18%,transparent); }
.piece-anchor.has-targetable { z-index:85; }

/* Logical positions use non-overlapping triangle, grid or two-row layouts. */
.arena-count-3 .arena-node[data-node="0"], .arena-count-3 .arena-position[data-position="0"] { left:50%;top:27%; }
.arena-count-3 .arena-node[data-node="1"], .arena-count-3 .arena-position[data-position="1"] { left:71%;top:72%; }
.arena-count-3 .arena-node[data-node="2"], .arena-count-3 .arena-position[data-position="2"] { left:29%;top:72%; }
.arena-count-4 .arena-node[data-node="0"], .arena-count-4 .arena-position[data-position="0"] { left:32%;top:29%; }
.arena-count-4 .arena-node[data-node="1"], .arena-count-4 .arena-position[data-position="1"] { left:68%;top:29%; }
.arena-count-4 .arena-node[data-node="2"], .arena-count-4 .arena-position[data-position="2"] { left:68%;top:72%; }
.arena-count-4 .arena-node[data-node="3"], .arena-count-4 .arena-position[data-position="3"] { left:32%;top:72%; }
.arena-count-5 .arena-node[data-node="0"], .arena-count-5 .arena-position[data-position="0"] { left:22%;top:29%; }
.arena-count-5 .arena-node[data-node="1"], .arena-count-5 .arena-position[data-position="1"] { left:50%;top:29%; }
.arena-count-5 .arena-node[data-node="2"], .arena-count-5 .arena-position[data-position="2"] { left:78%;top:29%; }
.arena-count-5 .arena-node[data-node="3"], .arena-count-5 .arena-position[data-position="3"] { left:65%;top:72%; }
.arena-count-5 .arena-node[data-node="4"], .arena-count-5 .arena-position[data-position="4"] { left:35%;top:72%; }
.arena-count-6 .arena-node[data-node="0"], .arena-count-6 .arena-position[data-position="0"] { left:22%;top:29%; }
.arena-count-6 .arena-node[data-node="1"], .arena-count-6 .arena-position[data-position="1"] { left:50%;top:29%; }
.arena-count-6 .arena-node[data-node="2"], .arena-count-6 .arena-position[data-position="2"] { left:78%;top:29%; }
.arena-count-6 .arena-node[data-node="3"], .arena-count-6 .arena-position[data-position="3"] { left:78%;top:72%; }
.arena-count-6 .arena-node[data-node="4"], .arena-count-6 .arena-position[data-position="4"] { left:50%;top:72%; }
.arena-count-6 .arena-node[data-node="5"], .arena-count-6 .arena-position[data-position="5"] { left:22%;top:72%; }

.arena-piece-layer .battle-token,
body.mobile-landscape-device .arena-piece-layer .battle-token { width:56px;height:56px;z-index:10;pointer-events:auto; }
.arena-piece-layer .battle-token.slot-0 { left:25%;top:24%; }
.arena-piece-layer .battle-token.slot-1 { left:50%;top:25%; }
.arena-piece-layer .battle-token.slot-2 { left:75%;top:24%; }
.arena-piece-layer .battle-token.slot-3 { left:19%;top:50%; }
.arena-piece-layer .battle-token.slot-4 { left:50%;top:50%; }
.arena-piece-layer .battle-token.slot-5 { left:81%;top:50%; }
.arena-piece-layer .battle-token.slot-6 { left:25%;top:76%; }
.arena-piece-layer .battle-token.slot-7 { left:50%;top:75%; }
.arena-piece-layer .battle-token.slot-8 { left:75%;top:76%; }
.piece-anchor[data-occupancy="6"] .battle-token.slot-7 { top:78%; }
.arena-piece-layer[data-layout="bounded"] .battle-token .token-ring,
.piece-anchor .battle-token .token-ring { inset:6px; }
.piece-anchor[data-occupancy="4"] .battle-token,
.piece-anchor[data-occupancy="5"] .battle-token,
.piece-anchor[data-occupancy="6"] .battle-token { width:52px;height:52px; }
.piece-anchor[data-occupancy="4"] .battle-token .token-ring,
.piece-anchor[data-occupancy="5"] .battle-token .token-ring,
.piece-anchor[data-occupancy="6"] .battle-token .token-ring { inset:8px; }
.piece-anchor[data-occupancy="4"] .token-name,
.piece-anchor[data-occupancy="5"] .token-name,
.piece-anchor[data-occupancy="6"] .token-name { max-width:46px;padding-inline:3px;font-size:7px; }
.arena-piece-layer .battle-token.is-targetable,
body.mobile-landscape-device .arena-piece-layer .battle-token.is-targetable { z-index:100; }
.arena-piece-layer .battle-token.is-targetable .token-ring { border-color:#ff748a;box-shadow:0 0 0 3px rgba(255,80,104,.25),0 0 22px rgba(255,74,103,.96); }
.arena-piece-layer .battle-token img,
.arena-piece-layer .battle-token .token-ring img { pointer-events:none!important;touch-action:none;user-select:none;-webkit-user-drag:none; }

/* Statuses occupy separate points around the portrait instead of stacking upward. */
.battle-token .token-charge { left:50%;right:auto;top:-5px;transform:translateX(-50%); }
.battle-token .token-shield { left:-3px;top:3px; }
.battle-token .token-pursuit { right:-3px;top:3px; }
.battle-token .token-mark { right:-7px;top:50%;transform:translateY(-50%); }
.battle-token .token-horse { right:-8px;top:auto;bottom:-5px; }
.battle-token .token-stun { left:-5px;top:auto;bottom:-5px; }
.battle-token .token-mulei { left:50%;right:auto;top:-7px;bottom:auto;transform:translateX(-50%); }

/* Yunsheng: the stage belongs to a logical position and never captures input. */
.piece-anchor .yunsheng-stage {
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:86%;
  height:72%;
  display:grid;
  place-items:end center;
  padding-bottom:5px;
  border:1px solid rgba(255,159,205,.84);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,197,224,.18) 0 24%,rgba(202,116,255,.1) 48%,transparent 70%);
  box-shadow:0 0 14px rgba(255,117,190,.45),inset 0 0 20px rgba(227,166,255,.22);
  color:#ffd6e8;
  font-size:7px;
  letter-spacing:.16em;
  text-shadow:0 0 7px rgba(255,135,204,.92);
  transform:translate(-50%,-50%);
  pointer-events:none;
  animation:yunshengStagePulse 2.4s ease-in-out infinite;
}
.piece-anchor .yunsheng-stage::before,
.piece-anchor .yunsheng-stage::after { content:"";position:absolute;inset:12%;border:1px dashed rgba(255,215,238,.48);border-radius:50%;animation:yunshengStageOrbit 8s linear infinite; }
.piece-anchor .yunsheng-stage::after { inset:29%;border-style:solid;animation-direction:reverse;animation-duration:5s; }
.battle-token.has-yunsheng-stage .token-ring { border-color:#ffc4df;box-shadow:0 0 0 3px rgba(255,147,199,.18),0 0 17px rgba(241,116,190,.72); }
.battle-token.has-yunsheng-anthem::after { opacity:1;border:1px dashed rgba(255,212,135,.92);box-shadow:0 0 12px rgba(255,189,97,.7);animation:pursuitAuraOrbit 3.4s linear infinite; }
.battle-token.has-yunsheng-echo .token-ring { box-shadow:0 0 0 3px rgba(197,111,255,.16),0 0 17px rgba(184,87,246,.72); }
.token-yunsheng-stage,.token-yunsheng-anthem,.token-yunsheng-echo { position:absolute;z-index:5;display:grid;width:16px;height:16px;place-items:center;border-radius:50%;font-size:7px;pointer-events:none; }
.token-yunsheng-stage { left:-5px;top:50%;transform:translateY(-50%);border:1px solid #ffb4d7;background:#572547;color:#ffe2ef; }
.token-yunsheng-anthem { left:50%;bottom:-7px;transform:translateX(-50%);border:1px solid #ffd186;background:#604724;color:#fff0bd; }
.token-yunsheng-echo { right:-7px;top:50%;transform:translateY(-50%);border:1px solid #cf8aff;background:#42205c;color:#efd7ff; }
.yunsheng-badge { right:-5px;bottom:-5px;width:auto;min-width:16px;padding-inline:3px;border:1px solid #f5a8d2;background:#492345;color:#ffe1f0; }
.battle-aura-effect.is-yunsheng-stage,.battle-aura-effect.is-yunsheng-anthem { color:#ffaad1; }
.battle-aura-effect.is-yunsheng-echo,.battle-aura-effect.is-yunsheng-echo-heal { color:#c784ff; }

.yunsheng-melody-card { width:min(650px,100%); }
.yunsheng-melody-options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0 18px; }
.yunsheng-melody-options button { min-height:126px;padding:18px;border:1px solid rgba(255,174,216,.4);background:linear-gradient(145deg,rgba(90,39,82,.78),rgba(37,24,60,.88));color:#f7eef8;text-align:left; }
.yunsheng-melody-options button span { float:left;display:grid;width:48px;height:48px;margin-right:13px;place-items:center;border:1px solid #ffb6d9;border-radius:50%;color:#ffd9e9;font:24px/1 var(--serif); }
.yunsheng-melody-options button b,.yunsheng-melody-options button small { display:block; }
.yunsheng-melody-options button b { margin:5px 0 8px;font:20px/1.2 var(--serif);color:#ffe0ef; }
.yunsheng-melody-options button small { line-height:1.55;color:#bdb1c9; }
.yunsheng-melody-options button:disabled { opacity:.38;filter:grayscale(.35); }

.jinmian-soul-modal { width:min(760px,100%);text-align:left; }
.jinmian-soul-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px; }
.jinmian-soul-card,.jinmian-soul-option { min-width:0;padding:16px;border:1px solid rgba(192,145,95,.45);background:linear-gradient(145deg,rgba(47,25,29,.94),rgba(13,13,25,.96));color:#f3e9df;text-align:left; }
.jinmian-soul-card b,.jinmian-soul-card small,.jinmian-soul-option b,.jinmian-soul-option small { display:block; }
.jinmian-soul-card b,.jinmian-soul-option b { color:#f2cf9b;font:20px/1.25 var(--serif); }
.jinmian-soul-card small,.jinmian-soul-option small { margin-top:7px;color:#b8a9aa;line-height:1.45; }
.jinmian-soul-option span { float:left;display:grid;width:42px;height:42px;margin-right:12px;place-items:center;border:1px solid #c88d62;border-radius:50%;color:#f4c88f; }
.jinmian-replace-actions { display:flex;flex-wrap:wrap;gap:7px;margin-top:12px; }
.jinmian-replace-actions button { padding:7px 10px;border:1px solid rgba(217,164,105,.5);background:rgba(88,45,40,.55);color:#f4dcc0; }
.jinmian-soul-grid > .ghost-button { grid-column:1/-1; }
.jinmian-soul-option:disabled { opacity:.42; }
.empty-copy { grid-column:1/-1;padding:18px;border:1px dashed rgba(201,153,102,.35);color:#b9adb6; }

@keyframes yunshengStagePulse { 50% { filter:brightness(1.18);box-shadow:0 0 22px rgba(255,117,190,.62),inset 0 0 24px rgba(227,166,255,.3); } }
@keyframes yunshengStageOrbit { to { transform:rotate(360deg); } }

@media (max-width:930px), (hover:none) and (pointer:coarse) {
  .yunsheng-melody-card { width:min(720px,calc(100vw - 36px));padding:18px 22px; }
  .yunsheng-melody-card > p { margin-block:8px; }
  .yunsheng-melody-options { gap:10px;margin:12px 0; }
  .yunsheng-melody-options button { min-height:86px;padding:12px; }
  .yunsheng-melody-options button span { width:38px;height:38px;font-size:19px; }
  .yunsheng-melody-options button b { font-size:17px; }
  .jinmian-soul-modal { width:min(720px,calc(100vw - 28px));padding:16px 20px; }
  .jinmian-soul-grid { gap:8px;margin-top:10px; }
  .jinmian-soul-card,.jinmian-soul-option { padding:10px; }
  .jinmian-soul-card b,.jinmian-soul-option b { font-size:16px; }
  .jinmian-soul-card small,.jinmian-soul-option small { font-size:10px;margin-top:4px; }
}

.roster-identity { display:flex;align-items:center;gap:6px;min-width:0; }
.roster-identity .roster-name { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.roster-position-badge {
  flex:0 0 auto;
  padding:1px 5px;
  border:1px solid color-mix(in srgb,var(--position-color,#d8c5ff) 62%,transparent);
  border-radius:7px;
  background:color-mix(in srgb,var(--position-color,#d8c5ff) 12%,rgba(8,6,20,.88));
  color:var(--position-color,#d8c5ff);
  font-size:8px;
  font-weight:700;
  white-space:nowrap;
}

.arena-node.is-expanded,
body.mobile-landscape-device .arena-node.is-expanded { z-index:70;width:190px;height:132px;opacity:1;box-shadow:0 0 36px color-mix(in srgb,currentColor 55%,transparent),0 0 0 3px rgba(8,6,20,.8),inset 0 0 34px rgba(109,79,164,.3);transform:translate(-50%,-50%); }
.piece-anchor.is-expanded,
body.mobile-landscape-device .piece-anchor.is-expanded { z-index:90;width:190px;height:132px;opacity:1; }
.piece-anchor.is-expanded .battle-token { width:58px;height:58px; }
.piece-anchor.is-expanded .battle-token .token-ring { inset:5px; }
.piece-anchor.is-expanded .battle-token .token-name { max-width:76px;padding:2px 5px;font-size:8px; }
.arena-node.is-position-muted,
.piece-anchor.is-position-muted { opacity:.18;filter:grayscale(.6) brightness(.56); }

@media (max-height:430px), (max-width:930px) and (orientation:landscape) {
  .arena-node,
  .piece-anchor,
  body.mobile-landscape-device .arena-node,
  body.mobile-landscape-device .piece-anchor { width:132px;height:92px; }
  .arena-node .node-label,
  body.mobile-landscape-device .arena-node .node-label { top:-15px;min-width:76px;padding:2px 6px;font-size:8px; }
  .arena-node .node-number { font-size:32px; }
  .arena-piece-layer .battle-token,
  body.mobile-landscape-device .arena-piece-layer .battle-token { width:54px;height:54px; }
  .piece-anchor[data-occupancy="4"] .battle-token,
  .piece-anchor[data-occupancy="5"] .battle-token,
  .piece-anchor[data-occupancy="6"] .battle-token { width:50px;height:50px; }
  .arena-node.is-expanded,
  .piece-anchor.is-expanded,
  body.mobile-landscape-device .arena-node.is-expanded,
  body.mobile-landscape-device .piece-anchor.is-expanded { width:174px;height:120px; }
  .roster-position-badge { padding-inline:4px;font-size:7px; }
}

/* Strict position bounds v39: the complete resting piece stays inside its position container. */
.piece-anchor:not(.has-performing-piece),
body.mobile-landscape-device .piece-anchor:not(.has-performing-piece) {
  overflow:clip;
  border-radius:28px;
}
.piece-anchor .battle-token,
body.mobile-landscape-device .piece-anchor .battle-token {
  box-sizing:border-box;
  width:54px;
  height:54px;
}
.piece-anchor .battle-token.slot-0 { left:26%;top:33%; }
.piece-anchor .battle-token.slot-1 { left:50%;top:33%; }
.piece-anchor .battle-token.slot-2 { left:74%;top:33%; }
.piece-anchor .battle-token.slot-3 { left:27%;top:50%; }
.piece-anchor .battle-token.slot-4 { left:50%;top:50%; }
.piece-anchor .battle-token.slot-5 { left:73%;top:50%; }
.piece-anchor .battle-token.slot-6 { left:26%;top:67%; }
.piece-anchor .battle-token.slot-7,
.piece-anchor[data-occupancy="6"] .battle-token.slot-7 { left:50%;top:67%; }
.piece-anchor .battle-token.slot-8 { left:74%;top:67%; }

.piece-anchor .battle-token .token-ring,
.arena-piece-layer[data-layout="bounded"] .battle-token .token-ring {
  inset:auto;
  left:50%;
  top:0;
  width:42px;
  height:42px;
  transform:translateX(-50%);
}
.piece-anchor .battle-token .token-name,
body.mobile-landscape-device .piece-anchor .battle-token .token-name {
  bottom:0;
  box-sizing:border-box;
  max-width:52px;
  padding:1px 4px;
  font-size:7px;
  line-height:9px;
}
.piece-anchor .battle-token .token-hp,
body.mobile-landscape-device .piece-anchor .battle-token .token-hp {
  left:12px;
  right:12px;
  bottom:11px;
}

.piece-anchor[data-occupancy="4"] .battle-token,
.piece-anchor[data-occupancy="5"] .battle-token,
.piece-anchor[data-occupancy="6"] .battle-token,
body.mobile-landscape-device .piece-anchor[data-occupancy="4"] .battle-token,
body.mobile-landscape-device .piece-anchor[data-occupancy="5"] .battle-token,
body.mobile-landscape-device .piece-anchor[data-occupancy="6"] .battle-token {
  width:48px;
  height:48px;
}
.piece-anchor[data-occupancy="4"] .battle-token.slot-0,
.piece-anchor[data-occupancy="5"] .battle-token.slot-0,
.piece-anchor[data-occupancy="6"] .battle-token.slot-0,
.piece-anchor[data-occupancy="4"] .battle-token.slot-6,
.piece-anchor[data-occupancy="5"] .battle-token.slot-6,
.piece-anchor[data-occupancy="6"] .battle-token.slot-6 { left:22%; }
.piece-anchor[data-occupancy="4"] .battle-token.slot-2,
.piece-anchor[data-occupancy="5"] .battle-token.slot-2,
.piece-anchor[data-occupancy="6"] .battle-token.slot-2,
.piece-anchor[data-occupancy="4"] .battle-token.slot-8,
.piece-anchor[data-occupancy="5"] .battle-token.slot-8,
.piece-anchor[data-occupancy="6"] .battle-token.slot-8 { left:78%; }
.piece-anchor[data-occupancy="4"] .battle-token .token-ring,
.piece-anchor[data-occupancy="5"] .battle-token .token-ring,
.piece-anchor[data-occupancy="6"] .battle-token .token-ring,
body.mobile-landscape-device .piece-anchor[data-occupancy="4"] .battle-token .token-ring,
body.mobile-landscape-device .piece-anchor[data-occupancy="5"] .battle-token .token-ring,
body.mobile-landscape-device .piece-anchor[data-occupancy="6"] .battle-token .token-ring {
  inset:auto;
  left:50%;
  top:0;
  width:34px;
  height:34px;
}
.piece-anchor[data-occupancy="4"] .battle-token .token-name,
.piece-anchor[data-occupancy="5"] .battle-token .token-name,
.piece-anchor[data-occupancy="6"] .battle-token .token-name,
body.mobile-landscape-device .piece-anchor[data-occupancy="4"] .battle-token .token-name,
body.mobile-landscape-device .piece-anchor[data-occupancy="5"] .battle-token .token-name,
body.mobile-landscape-device .piece-anchor[data-occupancy="6"] .battle-token .token-name {
  bottom:0;
  max-width:38px;
  padding:0 2px;
  font-size:6px;
  line-height:8px;
}
.piece-anchor[data-occupancy="4"] .battle-token .token-hp,
.piece-anchor[data-occupancy="5"] .battle-token .token-hp,
.piece-anchor[data-occupancy="6"] .battle-token .token-hp,
body.mobile-landscape-device .piece-anchor[data-occupancy="4"] .battle-token .token-hp,
body.mobile-landscape-device .piece-anchor[data-occupancy="5"] .battle-token .token-hp,
body.mobile-landscape-device .piece-anchor[data-occupancy="6"] .battle-token .token-hp {
  left:10px;
  right:10px;
  bottom:10px;
}

/* Every status marker stays on the inside edge of the complete piece box. */
.piece-anchor .battle-token .token-charge { left:50%;right:auto;top:0;transform:translateX(-50%); }
.piece-anchor .battle-token .token-shield { left:0;top:1px; }
.piece-anchor .battle-token .token-pursuit { right:0;top:1px; }
.piece-anchor .battle-token .token-mark { right:0;top:17px;transform:none; }
.piece-anchor .battle-token .token-horse { right:0;top:auto;bottom:10px; }
.piece-anchor .battle-token .token-stun { left:0;top:auto;bottom:10px; }

.piece-anchor.is-expanded .battle-token,
body.mobile-landscape-device .piece-anchor.is-expanded .battle-token { width:54px;height:54px; }
.piece-anchor.is-expanded .battle-token .token-ring { inset:auto;left:50%;top:0;width:42px;height:42px; }
.piece-anchor.is-expanded .battle-token .token-name,
body.mobile-landscape-device .piece-anchor.is-expanded .battle-token .token-name { bottom:0;max-width:52px;padding:1px 4px;font-size:7px;line-height:9px; }
.piece-anchor.is-expanded .battle-token .token-hp,
body.mobile-landscape-device .piece-anchor.is-expanded .battle-token .token-hp { left:12px;right:12px;bottom:11px; }

/* Profile v42: readable hierarchy on desktop and a two-tier mobile landscape layout. */
.profile-screen { --profile-copy:11px; --profile-meta:10px; }
.profile-layout {
  grid-template-columns:minmax(230px,270px) minmax(520px,1fr) minmax(280px,360px);
  gap:14px;
  padding-top:12px;
}
.profile-identity {
  align-self:stretch;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:18px;
  text-align:left;
}
.profile-identity-summary { display:flex;align-items:center;gap:13px;min-width:0; }
.profile-identity-copy { min-width:0;flex:1; }
.profile-identity-copy > small { display:block;color:#857c90;font-size:var(--profile-meta);letter-spacing:.18em; }
.profile-identity-copy h2 { margin:5px 0 3px;font-size:clamp(22px,1.8vw,28px);line-height:1.05; }
.profile-identity-copy > p { margin:0;color:var(--gold-light);font-size:var(--profile-copy); }
.profile-avatar-wrap { flex:0 0 auto;width:86px;height:86px;margin:0;box-shadow:0 0 24px rgba(151,102,210,.16); }
.profile-identity-copy > button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-height:36px;
  margin-top:10px;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.025);
  color:#bcb3c6;
  font-size:var(--profile-copy);
  text-align:left;
}
.profile-identity-copy > button span { color:var(--gold-light);font-size:var(--profile-meta); }
.profile-identity-copy > small:last-child { margin-top:8px;letter-spacing:0;line-height:1.45; }
.profile-identity-actions { display:grid;gap:11px;margin-top:auto;padding-top:16px; }
.profile-identity-actions > button { min-height:38px;padding:8px 10px;font-size:var(--profile-copy); }
.profile-appearance-actions { grid-template-columns:1fr 1fr;gap:8px;margin:0; }
.profile-appearance-actions label { font-size:var(--profile-meta); }
.profile-appearance-actions select { min-height:38px;padding:7px 8px;font-size:var(--profile-copy); }
.profile-main { padding:16px; }
.profile-tabs { gap:6px;padding-bottom:10px;overflow-x:auto;scrollbar-width:none; }
.profile-tabs::-webkit-scrollbar { display:none; }
.profile-tabs button { flex:0 0 auto;min-height:38px;padding:8px 14px;font-size:var(--profile-copy);cursor:pointer; }
#profilePanel { height:calc(100% - 49px);padding-top:10px;overscroll-behavior:contain; }
.profile-highlight-row { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.profile-highlight-row article {
  position:relative;
  min-height:88px;
  padding:13px 14px;
  overflow:hidden;
  border:1px solid rgba(230,196,120,.18);
  background:linear-gradient(135deg,rgba(80,54,115,.3),rgba(6,5,16,.45));
}
.profile-highlight-row article::after { content:"";position:absolute;right:-20px;bottom:-35px;width:76px;height:76px;border:1px solid rgba(230,196,120,.12);transform:rotate(45deg); }
.profile-highlight-row small,.profile-highlight-row b,.profile-highlight-row span { display:block;position:relative;z-index:1; }
.profile-highlight-row small { color:#a89dac;font-size:var(--profile-meta); }
.profile-highlight-row b { margin:4px 0 2px;color:var(--gold-light);font-family:var(--serif);font-size:26px;font-weight:400;line-height:1; }
.profile-highlight-row span { color:#7e7487;font-size:var(--profile-meta); }
.profile-stat-grid { grid-template-columns:repeat(3,1fr);gap:7px;margin-top:8px; }
.profile-stat-grid article,.collection-summary article { padding:11px 12px; }
.profile-stat-grid small,.collection-summary small { font-size:var(--profile-meta); }
.profile-stat-grid b,.collection-summary b { margin-top:3px;font-size:18px; }
.profile-point-row { gap:7px;margin-top:8px; }
.profile-point-row > div { padding:10px 12px; }
.profile-point-row small,.profile-point-row span { font-size:var(--profile-meta); }
.profile-point-row b { margin:3px 0;font-size:19px; }
.profile-achievement-row { margin-top:8px;padding:10px 12px; }
.profile-achievement-row header { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px; }
.profile-achievement-row h3 { margin:0;font-size:var(--profile-copy); }
.profile-achievement-row span { padding:5px 8px;font-size:var(--profile-meta); }
.profile-achievement-row button { float:none;min-height:30px;padding:5px 9px;font-size:var(--profile-meta); }
.profile-character { border:1px solid rgba(230,196,120,.12);background:radial-gradient(circle at 50% 35%,rgba(90,56,134,.24),transparent 58%); }
.profile-character b { font-size:22px; }
.profile-character p,.profile-character small { font-size:var(--profile-meta); }
.profile-match-list { display:grid;gap:8px; }
.profile-match-list article.profile-match-card {
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:72px;
  margin:0;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg,rgba(62,42,91,.2),rgba(6,5,16,.18));
}
.profile-match-rank { display:flex;align-items:baseline;justify-content:center;gap:2px;color:var(--gold-light); }
.profile-match-rank b { font-family:var(--serif);font-size:27px;font-weight:400;line-height:1; }
.profile-match-rank small { font-size:var(--profile-meta); }
.profile-match-copy { min-width:0; }
.profile-match-copy > b { overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap; }
.profile-match-copy > small { margin-top:4px;font-size:var(--profile-meta); }
.profile-match-copy > div { display:flex;flex-wrap:wrap;gap:6px;margin-top:7px; }
.profile-match-copy > div span { padding:3px 6px;border:1px solid rgba(255,255,255,.07);color:#9b92a5;font-size:var(--profile-meta); }
.profile-match-score { text-align:right; }
.profile-match-score b { color:var(--gold-light);font-family:var(--serif);font-size:22px; }
.profile-match-score small { font-size:var(--profile-meta); }
.profile-empty { padding:24px;border:1px dashed rgba(255,255,255,.1);color:#8e8498;font-size:var(--profile-copy);text-align:center; }
.collection-summary { grid-template-columns:repeat(5,minmax(90px,1fr));gap:7px; }
.collection-characters { grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;margin-top:10px; }
.collection-characters article { height:190px; }
.collection-characters img { height:154px; }
.collection-characters b { font-size:var(--profile-copy); }
.collection-characters small { font-size:var(--profile-meta); }
.security-disabled { gap:8px; }
.security-disabled h2 { font-size:22px; }
.security-disabled p { font-size:var(--profile-copy); }
.security-disabled button { min-height:42px;padding:10px 12px;font-size:var(--profile-copy); }
.security-disabled span { font-size:var(--profile-meta); }

body.mobile-landscape-device .profile-screen { --profile-copy:10px;--profile-meta:9px; }
body.mobile-landscape-device .profile-header { min-height:38px;grid-template-columns:34px 1fr auto;gap:7px; }
body.mobile-landscape-device .profile-header h1 { font-size:15px; }
body.mobile-landscape-device .profile-header small { font-size:8px; }
body.mobile-landscape-device .profile-header .ghost-button { min-width:76px;min-height:30px;height:30px;padding:0 9px;font-size:10px; }
body.mobile-landscape-device .profile-layout {
  grid-template-areas:"identity identity" "main character";
  grid-template-columns:minmax(0,1fr) minmax(150px,28vw);
  grid-template-rows:58px minmax(0,1fr);
  gap:6px;
  height:calc(100% - 38px);
  padding-top:4px;
}
body.mobile-landscape-device .profile-identity {
  grid-area:identity;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:5px 8px;
  overflow:hidden;
}
body.mobile-landscape-device .profile-identity-summary { gap:8px;overflow:hidden; }
body.mobile-landscape-device .profile-avatar-wrap { width:42px;height:42px;margin:0; }
body.mobile-landscape-device .profile-identity-copy { display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:8px; }
body.mobile-landscape-device .profile-identity-copy > small:first-child { display:none; }
body.mobile-landscape-device .profile-identity-copy h2 { grid-column:1;margin:0;font-size:15px;white-space:nowrap; }
body.mobile-landscape-device .profile-identity-copy > p { grid-column:2;margin:0;font-size:10px;white-space:nowrap; }
body.mobile-landscape-device .profile-identity-copy > button { grid-column:3;grid-row:1;min-height:26px;margin:0;padding:4px 7px;font-size:10px; }
body.mobile-landscape-device .profile-identity-copy > small:last-child { grid-column:1 / -1;grid-row:2;margin:2px 0 0;overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap; }
body.mobile-landscape-device .profile-identity-actions { display:flex;align-items:center;gap:6px;margin:0;padding:0; }
body.mobile-landscape-device .profile-identity-actions > button { min-height:30px;padding:5px 8px;font-size:9px;white-space:nowrap; }
body.mobile-landscape-device .profile-appearance-actions { display:flex;gap:5px; }
body.mobile-landscape-device .profile-appearance-actions label { font-size:9px;white-space:nowrap; }
body.mobile-landscape-device .profile-appearance-actions select { width:105px;min-height:30px;margin:0 0 0 3px;padding:4px 5px;font-size:9px; }
body.mobile-landscape-device .profile-main { grid-area:main;padding:7px; }
body.mobile-landscape-device .profile-character { grid-area:character;min-height:0; }
body.mobile-landscape-device .profile-tabs { gap:3px;padding-bottom:5px; }
body.mobile-landscape-device .profile-tabs button { min-height:31px;padding:5px 9px;font-size:10px; }
body.mobile-landscape-device #profilePanel { height:calc(100% - 37px);padding-top:5px; }
body.mobile-landscape-device .profile-highlight-row { gap:4px; }
body.mobile-landscape-device .profile-highlight-row article { min-height:52px;padding:6px 8px; }
body.mobile-landscape-device .profile-highlight-row small { font-size:9px; }
body.mobile-landscape-device .profile-highlight-row b { margin:2px 0 1px;font-size:17px; }
body.mobile-landscape-device .profile-highlight-row span { font-size:8px; }
body.mobile-landscape-device .profile-stat-grid { gap:3px;margin-top:4px; }
body.mobile-landscape-device .profile-stat-grid article,
body.mobile-landscape-device .collection-summary article { min-height:34px;padding:4px 6px; }
body.mobile-landscape-device .profile-stat-grid small,
body.mobile-landscape-device .collection-summary small { font-size:9px; }
body.mobile-landscape-device .profile-stat-grid b,
body.mobile-landscape-device .collection-summary b { margin-top:1px;font-size:13px; }
body.mobile-landscape-device .profile-point-row { gap:3px;margin-top:4px; }
body.mobile-landscape-device .profile-point-row > div { min-height:42px;padding:4px 6px; }
body.mobile-landscape-device .profile-point-row small { font-size:9px; }
body.mobile-landscape-device .profile-point-row b { margin:1px 0;font-size:14px; }
body.mobile-landscape-device .profile-point-row span { font-size:8px; }
body.mobile-landscape-device .profile-achievement-row { margin-top:4px;padding:5px 7px; }
body.mobile-landscape-device .profile-achievement-row header { margin-bottom:4px; }
body.mobile-landscape-device .profile-achievement-row h3 { font-size:10px; }
body.mobile-landscape-device .profile-achievement-row span,
body.mobile-landscape-device .profile-achievement-row button { min-height:24px;padding:3px 6px;font-size:9px; }
body.mobile-landscape-device .profile-character > div { bottom:8px; }
body.mobile-landscape-device .profile-character b { font-size:15px; }
body.mobile-landscape-device .profile-character small,
body.mobile-landscape-device .profile-character p { font-size:9px; }
body.mobile-landscape-device .profile-layout:not([data-profile-tab="overview"]) { grid-template-areas:"identity" "main";grid-template-columns:minmax(0,1fr); }
body.mobile-landscape-device .profile-layout:not([data-profile-tab="overview"]) .profile-character { display:none; }
body.mobile-landscape-device .profile-match-list { gap:4px; }
body.mobile-landscape-device .profile-match-list article.profile-match-card { grid-template-columns:38px minmax(0,1fr) auto;gap:7px;min-height:58px;padding:6px 8px; }
body.mobile-landscape-device .profile-match-rank b { font-size:20px; }
body.mobile-landscape-device .profile-match-rank small,
body.mobile-landscape-device .profile-match-copy > small,
body.mobile-landscape-device .profile-match-copy > div span,
body.mobile-landscape-device .profile-match-score small { font-size:9px; }
body.mobile-landscape-device .profile-match-copy > b { font-size:11px; }
body.mobile-landscape-device .profile-match-copy > div { gap:4px;margin-top:4px; }
body.mobile-landscape-device .profile-match-copy > div span { padding:2px 5px; }
body.mobile-landscape-device .profile-match-score b { font-size:17px; }
body.mobile-landscape-device .collection-summary { grid-template-columns:repeat(5,minmax(0,1fr));gap:3px; }
body.mobile-landscape-device .collection-characters { grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:5px;margin-top:5px; }
body.mobile-landscape-device .collection-characters article { height:132px; }
body.mobile-landscape-device .collection-characters img { height:101px; }
body.mobile-landscape-device .collection-characters b { font-size:10px; }
body.mobile-landscape-device .collection-characters small { font-size:9px; }
body.mobile-landscape-device .security-disabled { gap:4px; }
body.mobile-landscape-device .security-disabled h2 { font-size:16px; }
body.mobile-landscape-device .security-disabled p,
body.mobile-landscape-device .security-disabled button { font-size:10px; }
body.mobile-landscape-device .security-disabled button { min-height:34px;padding:6px 8px; }
body.mobile-landscape-device .security-disabled span { font-size:9px; }

@media (max-width:760px) and (orientation:landscape) {
  body.mobile-landscape-device .profile-identity-actions > button { display:none; }
  body.mobile-landscape-device .profile-appearance-actions select { width:88px; }
  body.mobile-landscape-device .profile-layout { grid-template-columns:minmax(0,1fr) 145px; }
}

/* Profile v43: complete overview, expandable records, wardrobe, collection and public profile. */
.profile-overview-lead { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:9px;padding:13px 16px;border:1px solid rgba(230,196,120,.2);background:linear-gradient(110deg,rgba(113,70,158,.23),rgba(12,10,27,.74)); }
.profile-overview-lead small,.profile-overview-lead p { color:#8f8599;font-size:var(--profile-meta); }
.profile-overview-lead h2 { margin:4px 0;font-family:var(--serif);font-size:20px;font-weight:400; }
.profile-overview-lead p { margin:0; }
.profile-overview-lead > strong { color:var(--gold-light);font-family:var(--serif);font-size:32px;font-weight:400;white-space:nowrap; }
.profile-overview-lead > strong small { display:block;text-align:center; }
.profile-difficulty-breakdown { margin-top:8px;padding:10px 12px;border:1px solid rgba(255,255,255,.07);background:rgba(6,5,16,.3); }
.profile-difficulty-breakdown header,.profile-difficulty-breakdown article { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.profile-difficulty-breakdown header { margin-bottom:7px; }
.profile-difficulty-breakdown h3 { margin:0;font-size:var(--profile-copy); }
.profile-difficulty-breakdown header span { color:#756d80;font-size:var(--profile-meta); }
.profile-difficulty-breakdown > div { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
.profile-difficulty-breakdown article { padding:7px 9px;border:1px solid rgba(230,196,120,.1);font-size:var(--profile-meta); }
.profile-difficulty-breakdown article span { color:#8f8599; }
.profile-difficulty-breakdown article strong { color:var(--gold-light); }
.profile-trial-overview { margin-top:8px;padding:11px 12px;border:1px solid rgba(94,205,255,.2);background:linear-gradient(120deg,rgba(23,74,104,.22),rgba(8,7,21,.58)); }
.profile-trial-overview > header { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px; }
.profile-trial-overview h3 { margin:3px 0 0;font-family:var(--serif);font-size:17px;font-weight:400; }
.profile-trial-overview header small,.profile-trial-overview header span { color:#8f98a9;font-size:var(--profile-meta); }
.profile-trial-overview > div { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px; }
.profile-trial-overview article { display:grid;gap:3px;min-width:0;padding:8px;border:1px solid rgba(255,255,255,.08);background:rgba(3,8,19,.44); }
.profile-trial-overview article b { color:#e5e8ef;font-family:var(--serif);font-size:15px; }
.profile-trial-overview article small,.profile-trial-overview article span { overflow:hidden;color:#757d90;font-size:var(--profile-meta);text-overflow:ellipsis;white-space:nowrap; }
.profile-trial-overview article.is-completed { border-color:rgba(230,196,120,.45);box-shadow:inset 0 0 18px rgba(202,158,74,.08); }
.profile-trial-overview article.is-completed b,.profile-trial-overview article.is-completed small { color:var(--gold-light); }
.profile-soul-codex { margin-top:8px;padding:11px 12px;border:1px solid rgba(211,141,92,.28);background:linear-gradient(120deg,rgba(77,31,28,.28),rgba(8,7,21,.64)); }
.profile-soul-codex > header { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px; }
.profile-soul-codex h3 { margin:3px 0 0;color:#f2d1aa;font-family:var(--serif);font-size:17px;font-weight:400; }
.profile-soul-codex header small,.profile-soul-codex header span { color:#a9979b;font-size:var(--profile-meta); }
.profile-soul-codex > div { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px; }
.profile-soul-codex article { display:flex;align-items:center;gap:7px;min-width:0;padding:7px;border:1px solid rgba(222,157,105,.16);background:rgba(16,8,14,.52); }
.profile-soul-codex article i { display:grid;flex:0 0 26px;height:26px;place-items:center;border:1px solid rgba(226,159,105,.55);border-radius:50%;color:#f1c38d;font:13px var(--serif); }
.profile-soul-codex article div { min-width:0; }
.profile-soul-codex article b,.profile-soul-codex article small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.profile-soul-codex article b { color:#eee3dd;font-size:11px; }
.profile-soul-codex article small { margin-top:2px;color:#85777e;font-size:8px; }
.profile-soul-codex > div > p { grid-column:1/-1;margin:0;color:#8d7e84;font-size:var(--profile-meta); }
.profile-showcase-slots { display:grid!important;grid-template-columns:repeat(3,1fr);gap:6px; }
.profile-showcase-slots span { display:block;text-align:center; }
.profile-showcase-slots .is-empty { border-style:dashed;color:#67606f; }
.profile-achievement-row header > div { display:flex;gap:5px; }
.profile-character > div { display:grid;justify-items:center; }
.profile-character > div button { min-height:34px;margin-top:8px;padding:6px 12px;border:1px solid rgba(230,196,120,.42);background:rgba(20,14,36,.84);color:var(--gold-light);font-size:var(--profile-meta); }
.profile-avatar-wrap > span[data-frame]:not([data-frame="default"]) { inset:-5px;border:2px solid var(--gold);box-shadow:0 0 15px rgba(229,188,98,.48),inset 0 0 10px rgba(151,102,210,.45); }

.profile-match-list article.profile-match-card { display:block;min-height:0;padding:0;overflow:hidden; }
.profile-match-summary { display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:72px;padding:10px 12px;border:0;background:transparent;color:#eee8f4;text-align:left;cursor:pointer; }
.profile-match-summary:hover,.profile-match-summary[aria-expanded="true"] { background:rgba(128,82,179,.13); }
.profile-match-copy { display:block; }
.profile-match-copy > span { display:flex;flex-wrap:wrap;gap:6px;margin-top:7px; }
.profile-match-copy > span i { padding:3px 6px;border:1px solid rgba(255,255,255,.07);color:#9b92a5;font-size:var(--profile-meta);font-style:normal; }
.profile-match-detail { padding:0 14px 12px 76px;border-top:1px solid rgba(255,255,255,.06);background:rgba(6,5,16,.35); }
.profile-match-detail dl { display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:0;padding:10px 0 8px; }
.profile-match-detail dl div { padding:7px;border:1px solid rgba(255,255,255,.06);text-align:center; }
.profile-match-detail dt { color:#7d7487;font-size:var(--profile-meta); }
.profile-match-detail dd { margin:3px 0 0;color:var(--gold-light);font-size:var(--profile-copy); }
.profile-match-detail > p { margin:0;color:#8f8599;font-size:var(--profile-meta); }
.profile-match-detail footer { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;color:#8f8599;font-size:var(--profile-meta); }
.profile-match-detail footer button { min-height:28px;padding:4px 8px;border:1px solid rgba(230,196,120,.26);background:transparent;color:var(--gold-light);font-size:var(--profile-meta); }

.collection-filters { display:flex;gap:5px;margin-top:9px; }
.collection-filters button { min-height:32px;padding:5px 10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:#8f8599;font-size:var(--profile-meta); }
.collection-filters button.is-selected { border-color:var(--gold);color:var(--gold-light); }
.collection-characters article { position:relative;height:205px;overflow:hidden; }
.collection-characters article > div { position:absolute;right:0;bottom:0;left:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;padding:8px;background:linear-gradient(transparent,rgba(7,5,17,.98) 30%); }
.collection-characters article > div b,.collection-characters article > div small { grid-column:1; }
.collection-characters article > div button { grid-column:2;grid-row:1 / 3;min-height:30px;padding:4px 7px;border:1px solid rgba(230,196,120,.28);background:rgba(20,14,36,.85);color:var(--gold-light);font-size:var(--profile-meta); }
.collection-characters article > div button:disabled { border-color:rgba(255,255,255,.07);color:#706878; }
.profile-asset-collection { margin-top:8px;padding:10px;border:1px solid rgba(255,255,255,.07); }
.profile-asset-collection header { display:flex;justify-content:space-between;align-items:center; }
.profile-asset-collection h3 { margin:0;font-size:var(--profile-copy); }
.profile-asset-collection header span { color:#82788d;font-size:var(--profile-meta); }
.profile-asset-collection > div { display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:7px;margin-top:9px; }
.profile-asset-collection article { display:grid;grid-template-columns:28px 1fr;align-items:center;padding:8px;border:1px solid rgba(255,255,255,.07); }
.profile-asset-collection article > span { grid-row:1 / 3;color:#756d80;font-size:20px; }
.profile-asset-collection article b,.profile-asset-collection article small { font-size:var(--profile-meta); }
.profile-asset-collection article small { color:#756d80; }
.profile-asset-collection article.is-equipped { border-color:var(--gold);background:rgba(230,196,120,.07); }
.profile-identity-inventory { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px; }
.profile-identity-inventory section { padding:10px;border:1px solid rgba(255,255,255,.07); }
.profile-identity-inventory h3 { margin:0 0 8px;font-size:var(--profile-copy); }
.profile-identity-inventory span { display:block;margin-top:5px;padding:6px;border:1px solid rgba(255,255,255,.05);color:#a99fb2;font-size:var(--profile-meta); }

.profile-public-tools { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px;padding:10px 12px;border:1px solid rgba(255,255,255,.07); }
.profile-public-tools h2 { margin:0 0 3px;font-size:17px; }
.profile-public-tools p { margin:0;color:#857b90;font-size:var(--profile-meta); }
.profile-public-tools form { display:flex;gap:5px; }
.profile-public-tools input { width:150px;min-height:34px;padding:6px 8px;border:1px solid rgba(230,196,120,.2);background:#090718;color:#ece6f2;text-transform:uppercase; }
.profile-public-tools button { min-height:34px;padding:6px 10px;border:1px solid var(--gold);background:rgba(230,196,120,.08);color:var(--gold-light); }
.profile-public-card { overflow:hidden;border:1px solid rgba(230,196,120,.18);background:linear-gradient(135deg,rgba(70,44,104,.24),rgba(5,5,15,.72)); }
.profile-public-hero { position:relative;display:flex;align-items:center;gap:13px;min-height:128px;padding:16px 43% 16px 18px;overflow:hidden; }
.profile-public-hero > img:first-child { width:76px;height:76px;border:2px solid rgba(230,196,120,.45);border-radius:50%;object-fit:cover; }
.profile-public-hero h2 { margin:4px 0;font-family:var(--serif);font-size:25px;font-weight:400; }
.profile-public-hero small,.profile-public-hero p { color:#8f8599;font-size:var(--profile-meta); }
.profile-public-hero p { margin:6px 0 0; }
.profile-public-hero button { padding:4px 7px;border:1px solid rgba(255,255,255,.09);background:transparent;color:#aaa1b4;font-size:var(--profile-meta); }
.profile-public-character { position:absolute;right:4%;bottom:-35%;width:38%;height:170%;object-fit:contain;object-position:center top;filter:drop-shadow(0 0 24px rgba(111,66,155,.28)); }
.profile-public-stats { display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07); }
.profile-public-stats span { padding:10px;border-right:1px solid rgba(255,255,255,.06);text-align:center; }
.profile-public-stats small,.profile-public-stats b { display:block; }
.profile-public-stats small { color:#7f7589;font-size:var(--profile-meta); }
.profile-public-stats b { margin-top:3px;color:var(--gold-light);font-size:16px; }
.profile-public-bottom { display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px; }
.profile-public-bottom > section { padding:9px;border:1px solid rgba(255,255,255,.06); }
.profile-public-bottom header { display:flex;justify-content:space-between;align-items:center; }
.profile-public-bottom h3 { margin:0;font-size:var(--profile-copy); }
.profile-public-bottom header span { color:#877c91;font-size:var(--profile-meta); }
.profile-public-bottom section > div { display:flex;flex-wrap:wrap;gap:5px;margin-top:8px; }
.profile-public-bottom section > div > span { padding:5px 7px;border:1px solid rgba(230,196,120,.13);color:#b1a7ba;font-size:var(--profile-meta); }

.profile-modal-layer { z-index:210;padding:18px;overflow:hidden; }
.profile-modal-layer .modal-card { box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;text-align:left; }
.profile-wardrobe-modal { width:min(760px,calc(100% - 24px)); }
.profile-showcase-modal { width:min(650px,calc(100% - 24px)); }
.profile-wardrobe-modal > header,.profile-showcase-modal > header { display:flex;align-items:center;justify-content:space-between; }
.profile-wardrobe-modal > header h2,.profile-showcase-modal > header h2 { margin:2px 0;font-size:20px; }
.profile-wardrobe-modal > header small,.profile-showcase-modal > header small { color:var(--gold);font-size:10px;letter-spacing:.16em; }
.profile-wardrobe-modal > header > button,.profile-showcase-modal > header > button { width:34px;height:34px;border:1px solid rgba(255,255,255,.1);background:transparent;color:#aaa1b4;font-size:20px; }
.profile-wardrobe-body { display:grid;grid-template-columns:40% 1fr;gap:15px;margin-top:12px; }
.profile-wardrobe-preview { position:relative;height:310px;overflow:hidden;border:1px solid rgba(230,196,120,.15);background:radial-gradient(circle,rgba(109,66,153,.22),transparent 64%); }
.profile-wardrobe-preview img { width:100%;height:100%;object-fit:contain; }
.profile-wardrobe-preview span { position:absolute;right:0;bottom:0;left:0;padding:9px;background:rgba(7,5,17,.88);color:var(--gold-light);text-align:center; }
.profile-wardrobe-fields { display:grid;gap:9px;align-content:start; }
.profile-wardrobe-fields label { color:#918797;font-size:11px; }
.profile-wardrobe-fields select { display:block;width:100%;min-height:39px;margin-top:4px;padding:7px;border:1px solid rgba(255,255,255,.1);background:#0b091b;color:#eee8f4; }
.profile-wardrobe-fields p,.profile-showcase-modal > p { color:#857b90;font-size:10px;line-height:1.55; }
.profile-wardrobe-modal > footer,.profile-showcase-modal > footer { display:flex;justify-content:flex-end;gap:7px;margin-top:12px; }
.profile-showcase-choices { display:grid;gap:6px;max-height:48vh;margin-top:10px;overflow:auto; }
.profile-showcase-choices label { display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px;padding:8px;border:1px solid rgba(255,255,255,.07); }
.profile-showcase-choices input { accent-color:#c7a556; }
.profile-showcase-choices b,.profile-showcase-choices small { display:block; }
.profile-showcase-choices b { font-size:11px; }
.profile-showcase-choices small { margin-top:2px;color:#7f7589;font-size:9px; }

body.mobile-landscape-device .profile-overview-lead { gap:8px;margin-bottom:4px;padding:6px 8px; }
body.mobile-landscape-device .profile-overview-lead h2 { margin:2px 0;font-size:13px; }
body.mobile-landscape-device .profile-overview-lead > strong { font-size:20px; }
body.mobile-landscape-device .profile-difficulty-breakdown { margin-top:4px;padding:5px 7px; }
body.mobile-landscape-device .profile-difficulty-breakdown header { margin-bottom:4px; }
body.mobile-landscape-device .profile-difficulty-breakdown article { padding:4px 5px;font-size:8px; }
body.mobile-landscape-device .profile-trial-overview { margin-top:4px;padding:5px 7px; }
body.mobile-landscape-device .profile-trial-overview > header { margin-bottom:4px; }
body.mobile-landscape-device .profile-trial-overview h3 { font-size:11px; }
body.mobile-landscape-device .profile-trial-overview > div { gap:3px; }
body.mobile-landscape-device .profile-trial-overview article { gap:1px;padding:4px; }
body.mobile-landscape-device .profile-trial-overview article b { font-size:10px; }
body.mobile-landscape-device .profile-trial-overview article small,
body.mobile-landscape-device .profile-trial-overview article span { font-size:7px; }
body.mobile-landscape-device .profile-soul-codex { margin-top:4px;padding:5px 7px; }
body.mobile-landscape-device .profile-soul-codex > header { margin-bottom:4px; }
body.mobile-landscape-device .profile-soul-codex h3 { font-size:11px; }
body.mobile-landscape-device .profile-soul-codex > div { gap:3px; }
body.mobile-landscape-device .profile-soul-codex article { gap:4px;padding:4px; }
body.mobile-landscape-device .profile-soul-codex article i { flex-basis:18px;height:18px;font-size:9px; }
body.mobile-landscape-device .profile-soul-codex article b { font-size:8px; }
body.mobile-landscape-device .profile-soul-codex article small { font-size:6px; }
body.mobile-landscape-device .profile-showcase-slots { gap:3px; }
body.mobile-landscape-device .profile-character > div button { min-height:26px;margin-top:4px;padding:3px 7px;font-size:8px; }
body.mobile-landscape-device .profile-match-summary { grid-template-columns:38px minmax(0,1fr) auto;gap:7px;min-height:58px;padding:6px 8px; }
body.mobile-landscape-device .profile-match-copy > span { gap:4px;margin-top:4px; }
body.mobile-landscape-device .profile-match-copy > span i { padding:2px 5px;font-size:9px; }
body.mobile-landscape-device .profile-match-detail { padding:0 8px 7px 52px; }
body.mobile-landscape-device .profile-match-detail dl { gap:3px;padding:6px 0 5px; }
body.mobile-landscape-device .profile-match-detail dl div { padding:4px 2px; }
body.mobile-landscape-device .profile-match-detail dt,body.mobile-landscape-device .profile-match-detail > p,body.mobile-landscape-device .profile-match-detail footer { font-size:8px; }
body.mobile-landscape-device .profile-match-detail dd { font-size:9px; }
body.mobile-landscape-device .collection-filters { margin-top:4px; }
body.mobile-landscape-device .collection-filters button { min-height:25px;padding:3px 7px;font-size:8px; }
body.mobile-landscape-device .collection-characters article { height:139px; }
body.mobile-landscape-device .collection-characters article > div { padding:5px; }
body.mobile-landscape-device .collection-characters article > div button { min-height:24px;padding:2px 5px;font-size:8px; }
body.mobile-landscape-device .profile-public-tools { gap:7px;margin-bottom:4px;padding:5px 7px; }
body.mobile-landscape-device .profile-public-tools h2 { font-size:12px; }
body.mobile-landscape-device .profile-public-tools p { font-size:8px; }
body.mobile-landscape-device .profile-public-tools input { width:125px;min-height:27px;padding:3px 5px;font-size:9px; }
body.mobile-landscape-device .profile-public-tools button { min-height:27px;padding:3px 7px;font-size:9px; }
body.mobile-landscape-device .profile-public-hero { min-height:90px;padding:8px 42% 8px 10px; }
body.mobile-landscape-device .profile-public-hero > img:first-child { width:52px;height:52px; }
body.mobile-landscape-device .profile-public-hero h2 { margin:2px 0;font-size:16px; }
body.mobile-landscape-device .profile-public-character { bottom:-43%;height:180%; }
body.mobile-landscape-device .profile-public-stats span { padding:5px; }
body.mobile-landscape-device .profile-public-stats small { font-size:8px; }
body.mobile-landscape-device .profile-public-stats b { margin-top:1px;font-size:11px; }
body.mobile-landscape-device .profile-public-bottom { gap:4px;padding:5px; }
body.mobile-landscape-device .profile-public-bottom > section { padding:5px; }
body.mobile-landscape-device .profile-public-bottom section > div { margin-top:4px; }
body.mobile-landscape-device .profile-public-bottom section > div > span { padding:3px 5px;font-size:8px; }
body.mobile-landscape-device .profile-modal-layer { position:absolute;inset:0;padding:10px;background:rgba(5,3,13,.94); }
body.mobile-landscape-device .profile-modal-layer .modal-card { max-height:calc(100% - 2px);padding:12px 14px; }
body.mobile-landscape-device .profile-wardrobe-modal { width:min(720px,calc(100% - 16px)); }
body.mobile-landscape-device .profile-wardrobe-body { grid-template-columns:32% 1fr;gap:9px;margin-top:6px; }
body.mobile-landscape-device .profile-wardrobe-preview { height:clamp(145px,46vh,190px); }
body.mobile-landscape-device .profile-wardrobe-fields { grid-template-columns:1fr 1fr;gap:5px 7px; }
body.mobile-landscape-device .profile-wardrobe-fields label { font-size:9px; }
body.mobile-landscape-device .profile-wardrobe-fields select { min-height:30px;margin-top:2px;padding:4px;font-size:9px; }
body.mobile-landscape-device .profile-wardrobe-fields p { grid-column:1 / -1;margin:2px 0;font-size:8px; }
body.mobile-landscape-device .profile-showcase-modal { width:min(650px,calc(100% - 16px)); }
body.mobile-landscape-device .profile-showcase-choices { max-height:min(205px,45vh); }

/* v47 · 2v2 命运对决 */
.hub-match-mode { display:grid;grid-template-columns:1fr 1fr;gap:7px; }
.hub-match-mode button { min-height:48px;padding:6px 8px;border:1px solid var(--line);background:rgba(7,5,19,.48);color:#eee8f4;text-align:left; }
.hub-match-mode button:hover,.hub-match-mode button.is-selected { border-color:var(--theme-accent);background:linear-gradient(135deg,rgba(85,52,131,.36),rgba(21,13,39,.72));box-shadow:inset 0 0 20px rgba(132,89,198,.1); }
.hub-match-mode b,.hub-match-mode small { display:block; }
.hub-match-mode b { font-family:var(--serif);font-size:12px;font-weight:400; }
.hub-match-mode small { margin-top:3px;color:#8a8295;font-size:7px; }
.hub-player-count button:disabled { cursor:not-allowed;opacity:.38; }
.hub-teammate-field { display:block;margin:8px 0 2px;color:var(--gold);font-size:8px;letter-spacing:.08em; }
.hub-teammate-field[hidden] { display:none; }
.hub-teammate-field select { width:100%;min-height:32px;margin-top:5px;padding:5px 8px;border:1px solid rgba(126,232,255,.2);background:#0c091c;color:#eee9f5;font-family:var(--serif); }
.hub-teammate-field > small { display:block;margin-top:4px;color:#80778a;font-size:7px;letter-spacing:0; }

.team-mode-rules { margin-top:14px;padding-top:12px;border-top:1px solid rgba(126,232,255,.16); }
.team-mode-rules > header { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px; }
.team-mode-rules > header span { color:#8ee8ff;font-family:var(--serif);font-size:15px; }
.team-mode-rules > header b { color:#9e94ad;font-size:9px;font-weight:400; }

.roster-team-badge,.team-badge { display:inline-grid;place-items:center;flex:0 0 auto;min-width:16px;height:16px;padding:0 3px;border:1px solid currentColor;border-radius:3px;font-size:8px;font-style:normal; }
.team-blue .roster-team-badge,.team-badge.team-blue { color:#7ee8ff;background:rgba(36,151,210,.14); }
.team-red .roster-team-badge,.team-badge.team-red { color:#ff8c9d;background:rgba(201,60,86,.14); }
.roster-item.team-blue { border-left:2px solid rgba(80,208,255,.72); }
.roster-item.team-red { border-left:2px solid rgba(255,91,119,.72); }
.battle-token.team-blue .token-ring { box-shadow:0 0 0 3px rgba(63,195,255,.28),0 0 13px rgba(63,195,255,.24); }
.battle-token.team-red .token-ring { box-shadow:0 0 0 3px rgba(255,76,108,.28),0 0 13px rgba(255,76,108,.24); }
.battle-token.team-blue.is-targetable .token-ring,.battle-token.team-red.is-targetable .token-ring { border-color:var(--red);box-shadow:0 0 0 3px rgba(255,76,108,.25),0 0 18px rgba(255,76,108,.72); }
.settlement-standing .team-badge { margin-right:4px;vertical-align:middle; }
.settlement-standing.team-blue { border-left:2px solid rgba(80,208,255,.65); }
.settlement-standing.team-red { border-left:2px solid rgba(255,91,119,.65); }

.team-signal-panel { position:fixed;z-index:15;right:196px;bottom:77px;display:flex;align-items:center;gap:6px;padding:5px 7px; }
.team-signal-panel[hidden] { display:none; }
.team-signal-panel > small { color:#8ee8ff;font-size:7px;white-space:nowrap; }
.team-signal-panel > div { display:flex;gap:3px; }
.team-signal-panel button { min-height:24px;padding:3px 6px;border:1px solid rgba(126,232,255,.18);background:rgba(17,13,36,.82);color:#c8c0d4;font-size:7px; }
.team-signal-panel button:active { border-color:#7ee8ff;color:#fff; }

body.mobile-landscape-device .hub-match-mode button { min-height:34px;padding:4px 6px; }
body.mobile-landscape-device .hub-match-mode b { font-size:10px; }
body.mobile-landscape-device .hub-teammate-field select { min-height:27px;margin-top:2px;padding:3px 6px;font-size:8px; }
body.mobile-landscape-device .team-signal-panel { right:172px;bottom:63px;padding:3px 5px; }
body.mobile-landscape-device .team-signal-panel button { min-height:20px;padding:2px 5px;font-size:6px; }
/* ===== 孤命试炼 ===== */
.solo-trial-screen {
  position: relative;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  padding: 24px 32px 28px;
  background:
    radial-gradient(circle at 68% 35%, rgba(119, 63, 190, .2), transparent 34%),
    linear-gradient(135deg, #100c20 0%, #0b1120 58%, #151021 100%);
  color: #f4eefc;
  overflow: hidden;
}
.solo-trial-header { height: 82px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid rgba(218, 188, 120, .25); }
.solo-trial-header > div { flex: 1; }
.solo-trial-header small { color: #d7b66c; letter-spacing: .22em; }
.solo-trial-header h1 { margin: 3px 0 0; font-family: var(--display-font, serif); font-size: 30px; font-weight: 500; }
.solo-trial-header > span { color: #d8cde5; padding: 10px 16px; border: 1px solid rgba(218, 188, 120, .25); background: rgba(10, 9, 25, .55); }
.solo-trial-layout { height: calc(100% - 100px); display: grid; grid-template-columns: minmax(210px, .8fr) minmax(390px, 1.55fr) minmax(270px, 1fr); gap: 16px; padding-top: 18px; }
.solo-trial-layout > * { min-height: 0; }
.solo-trial-hero, .solo-trial-stages, .solo-trial-detail { padding: 18px; border-color: rgba(219, 183, 107, .22); }
.solo-trial-hero { display: flex; flex-direction: column; }
.solo-trial-hero > img { width: 100%; min-height: 0; flex: 1; object-fit: cover; object-position: top; border: 1px solid rgba(219, 183, 107, .3); background: #090b18; }
.solo-trial-hero label { display: grid; gap: 5px; margin-top: 10px; color: #d8cde5; font-size: 12px; }
.solo-trial-hero select { width: 100%; min-height: 38px; color: #fff; background: #151127; border: 1px solid rgba(200, 163, 238, .32); padding: 0 9px; }
.solo-trial-hero > p:not(.section-index) { margin: 8px 0; color: #9d91ae; font-size: 11px; line-height: 1.55; }
.solo-trial-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.solo-trial-mode button { min-height: 54px; color: #bdb2cd; border: 1px solid rgba(169, 145, 204, .2); background: rgba(17, 13, 37, .72); text-align: left; padding: 8px; }
.solo-trial-mode button b, .solo-trial-mode button small { display: block; }
.solo-trial-mode button small { margin-top: 3px; font-size: 9px; color: #81758f; }
.solo-trial-mode button.is-selected { color: #f2d68e; border-color: #b58945; background: rgba(95, 62, 27, .28); }
.solo-trial-stages { display: flex; flex-direction: column; }
.solo-trial-stages h2, .solo-trial-detail h2 { margin: 4px 0 14px; font-family: var(--display-font, serif); font-size: 26px; font-weight: 500; }
.solo-trial-stage-list { display: grid; gap: 9px; min-height: 0; flex: 1; }
.solo-trial-stage-list button { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 0; color: #d8d0e2; border: 1px solid rgba(175, 148, 205, .18); background: rgba(12, 11, 30, .65); padding: 10px 13px; text-align: left; }
.solo-trial-stage-list button > span { display: grid; place-items: center; width: 44px; height: 44px; color: #d7b66c; border: 1px solid rgba(215, 182, 108, .4); transform: rotate(45deg); font-size: 12px; }
.solo-trial-stage-list button > span::first-line { transform: rotate(-45deg); }
.solo-trial-stage-list button b, .solo-trial-stage-list button small { display: block; }
.solo-trial-stage-list button b { margin-bottom: 5px; font-size: 17px; }
.solo-trial-stage-list button small { color: #91859e; }
.solo-trial-stage-list button em { color: #b7a5c7; font-size: 11px; font-style: normal; }
.solo-trial-stage-list button.is-selected { border-color: #d3aa59; background: linear-gradient(90deg, rgba(119, 70, 31, .35), rgba(42, 25, 69, .55)); box-shadow: inset 3px 0 #e0b65d; }
.solo-trial-stage-list button.is-locked { opacity: .42; }
.solo-trial-detail { display: flex; flex-direction: column; }
.solo-trial-detail > p { margin: 0 0 10px; color: #a99bb7; }
.solo-trial-enemies { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 12px; }
.solo-trial-enemies article { min-width: 0; text-align: center; }
.solo-trial-enemies img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; border: 1px solid rgba(211, 170, 89, .35); border-radius: 50%; }
.solo-trial-enemies span { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c9bbd4; font-size: 10px; }
.solo-trial-detail dl { display: grid; gap: 7px; margin: 0; }
.solo-trial-detail dl > div { padding: 8px 9px; background: rgba(9, 9, 24, .5); border-left: 2px solid rgba(215, 182, 108, .52); }
.solo-trial-detail dt { color: #e5c678; font-size: 11px; }
.solo-trial-detail dd { margin: 3px 0 0; color: #b7acbf; font-size: 10px; line-height: 1.45; }
#soloTrialReward { margin-top: auto; padding: 10px; color: #efce7a; border: 1px solid rgba(215, 182, 108, .25); background: rgba(77, 52, 20, .22); }
.solo-trial-detail .primary-button { width: 100%; min-height: 46px; }

@media (max-width: 930px), (hover: none) and (pointer: coarse) {
  .solo-trial-screen { padding: 9px 12px 10px; }
  .solo-trial-header { height: 48px; gap: 9px; }
  .solo-trial-header h1 { font-size: 20px; }
  .solo-trial-header small { font-size: 8px; }
  .solo-trial-header > span { padding: 6px 9px; font-size: 10px; }
  .solo-trial-layout { height: calc(100% - 54px); grid-template-columns: 155px minmax(280px, 1.45fr) minmax(220px, 1fr); gap: 8px; padding-top: 7px; }
  .solo-trial-hero, .solo-trial-stages, .solo-trial-detail { padding: 9px; }
  .solo-trial-hero > img { min-height: 90px; }
  .solo-trial-hero label { margin-top: 5px; font-size: 9px; }
  .solo-trial-hero select { min-height: 27px; font-size: 10px; }
  .solo-trial-hero > p:not(.section-index) { margin: 4px 0; font-size: 8px; line-height: 1.3; }
  .solo-trial-mode { gap: 4px; }
  .solo-trial-mode button { min-height: 38px; padding: 4px; font-size: 9px; }
  .solo-trial-mode button small { font-size: 7px; }
  .solo-trial-stages h2, .solo-trial-detail h2 { margin: 1px 0 6px; font-size: 18px; }
  .solo-trial-stage-list { gap: 4px; }
  .solo-trial-stage-list button { grid-template-columns: 35px 1fr auto; gap: 6px; padding: 5px 7px; }
  .solo-trial-stage-list button > span { width: 29px; height: 29px; font-size: 8px; }
  .solo-trial-stage-list button b { margin-bottom: 2px; font-size: 12px; }
  .solo-trial-stage-list button small, .solo-trial-stage-list button em { font-size: 8px; }
  .solo-trial-detail > p { margin-bottom: 5px; font-size: 9px; }
  .solo-trial-enemies { gap: 3px; margin-bottom: 5px; }
  .solo-trial-enemies span { margin-top: 2px; font-size: 7px; }
  .solo-trial-detail dl { gap: 3px; }
  .solo-trial-detail dl > div { padding: 4px 6px; }
  .solo-trial-detail dt { font-size: 9px; }
  .solo-trial-detail dd { margin-top: 1px; font-size: 7.5px; line-height: 1.25; }
  #soloTrialReward { margin-bottom: 5px; padding: 5px; font-size: 8px; }
  .solo-trial-detail .primary-button { min-height: 31px; font-size: 11px; }
}

/* Runtime mobile rules cannot rely only on media queries: several Android browsers keep a
   desktop-sized layout viewport after entering fullscreen landscape. Keep the trial header
   above the content and fit all three columns inside the locked visual canvas. */
body.mobile-landscape-device .solo-trial-screen {
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: var(--mobile-safe-top) 8px var(--mobile-safe-bottom);
}
body.mobile-landscape-device .solo-trial-header {
  flex: 0 0 42px;
  width: 100%;
  height: 42px;
  min-height: 0;
  gap: 8px;
}
body.mobile-landscape-device .solo-trial-header .hub-back { flex: 0 0 30px; }
body.mobile-landscape-device .solo-trial-header h1 { margin-top: 1px; font-size: 18px; line-height: 1; white-space: nowrap; }
body.mobile-landscape-device .solo-trial-header small { font-size: 7px; }
body.mobile-landscape-device .solo-trial-header > span { padding: 5px 8px; font-size: 9px; white-space: nowrap; }
body.mobile-landscape-device .solo-trial-layout {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(145px, 18%) minmax(280px, 1fr) minmax(220px, 29%);
  gap: 6px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding-top: 5px;
  overflow: hidden;
}
body.mobile-landscape-device .solo-trial-layout > * { min-width: 0; min-height: 0; overflow: hidden; }
body.mobile-landscape-device .solo-trial-hero,
body.mobile-landscape-device .solo-trial-stages,
body.mobile-landscape-device .solo-trial-detail { padding: 7px; }
body.mobile-landscape-device .solo-trial-hero > img { min-height: 72px; }
body.mobile-landscape-device .solo-trial-hero label { margin-top: 4px; font-size: 8px; }
body.mobile-landscape-device .solo-trial-hero select { min-height: 25px; padding: 0 6px; font-size: 9px; }
body.mobile-landscape-device .solo-trial-hero > p:not(.section-index) { margin: 3px 0; font-size: 7px; line-height: 1.25; }
body.mobile-landscape-device .solo-trial-mode { gap: 3px; }
body.mobile-landscape-device .solo-trial-mode button { min-height: 35px; padding: 4px; font-size: 8px; }
body.mobile-landscape-device .solo-trial-mode button small { margin-top: 1px; font-size: 6px; }
body.mobile-landscape-device .solo-trial-stages h2,
body.mobile-landscape-device .solo-trial-detail h2 { margin: 1px 0 5px; font-size: 17px; line-height: 1.1; }
body.mobile-landscape-device .solo-trial-stage-list { grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 3px; }
body.mobile-landscape-device .solo-trial-stage-list button { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 5px; padding: 4px 6px; }
body.mobile-landscape-device .solo-trial-stage-list button > span { width: 27px; height: 27px; font-size: 7px; }
body.mobile-landscape-device .solo-trial-stage-list button b { margin-bottom: 1px; font-size: 11px; }
body.mobile-landscape-device .solo-trial-stage-list button small,
body.mobile-landscape-device .solo-trial-stage-list button em { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
body.mobile-landscape-device .solo-trial-detail > p { margin-bottom: 4px; font-size: 8px; }
body.mobile-landscape-device .solo-trial-enemies { flex: 0 0 auto; gap: 3px; margin-bottom: 4px; }
body.mobile-landscape-device .solo-trial-enemies span { margin-top: 1px; font-size: 6px; }
body.mobile-landscape-device .solo-trial-detail dl { flex: 1 1 auto; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 3px; min-height: 0; overflow: hidden; }
body.mobile-landscape-device .solo-trial-detail dl > div { min-height: 0; padding: 3px 5px; overflow: hidden; }
body.mobile-landscape-device .solo-trial-detail dt { font-size: 8px; }
body.mobile-landscape-device .solo-trial-detail dd { margin-top: 1px; font-size: 6.5px; line-height: 1.2; }
body.mobile-landscape-device #soloTrialReward { flex: 0 0 auto; margin: 4px 0; padding: 4px 6px; font-size: 7px; }
body.mobile-landscape-device .solo-trial-detail .primary-button { flex: 0 0 30px; min-height: 30px; font-size: 10px; }

@media (max-height: 380px) {
  body.mobile-landscape-device .solo-trial-header { flex-basis: 34px; height: 34px; }
  body.mobile-landscape-device .solo-trial-header small,
  body.mobile-landscape-device .solo-trial-hero > .section-index,
  body.mobile-landscape-device .solo-trial-detail > .section-index { display: none; }
  body.mobile-landscape-device .solo-trial-layout { padding-top: 3px; }
  body.mobile-landscape-device .solo-trial-hero,
  body.mobile-landscape-device .solo-trial-stages,
  body.mobile-landscape-device .solo-trial-detail { padding: 5px; }
  body.mobile-landscape-device .solo-trial-mode button { min-height: 31px; }
}

/* Shuoya + pre-match Ban phase */
.ban-character-card { width:min(920px,92vw); max-height:min(760px,90vh); overflow:auto; }
.ban-character-card > p:not(.section-index) { color:var(--muted); }
.ban-character-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:18px 0; }
.ban-character-grid button { display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:76px; padding:8px; border:1px solid rgba(202,181,255,.22); background:rgba(17,13,42,.82); color:var(--text); text-align:left; cursor:pointer; }
.ban-character-grid button:hover { border-color:rgba(246,208,116,.65); }
.ban-character-grid button.is-selected { border-color:#ef6b75; background:linear-gradient(115deg,rgba(117,30,48,.62),rgba(48,22,64,.82)); box-shadow:inset 3px 0 #ef6b75,0 0 18px rgba(220,58,82,.18); }
.ban-character-grid img { width:56px; height:56px; object-fit:cover; object-position:top; border-radius:4px; pointer-events:none; }
.ban-character-grid span { min-width:0; pointer-events:none; }
.ban-character-grid b,.ban-character-grid small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ban-character-grid small { margin-top:5px; color:var(--muted); font-size:12px; }
.ban-character-grid i { color:#d8c89a; font-style:normal; font-size:12px; pointer-events:none; }
.ban-character-grid .is-selected i { color:#ff8f9a; }
.ban-character-actions { display:flex; justify-content:flex-end; gap:10px; margin-bottom:12px; }
.theme-eclipse { --theme-accent:#d55b64; --theme-soft:#67556e; }
.has-shuoya-awaken .token-ring { box-shadow:0 0 0 3px rgba(155,53,66,.18),0 0 16px rgba(216,72,87,.65); }
.has-shuoya-wolf .token-ring { border-color:#e35b62; box-shadow:0 0 0 3px rgba(70,9,17,.32),0 0 21px rgba(218,53,68,.82); }
.is-shuoya-dying { filter:saturate(.55); }
.is-shuoya-dying .token-ring { border-color:#b42e42; animation:shuoyaDyingPulse 1s ease-in-out infinite; }
.token-shuoya { background:#511723!important; color:#ffd4d8!important; }
@keyframes shuoyaDyingPulse { 50% { opacity:.48; box-shadow:0 0 26px rgba(226,44,70,.9); } }

body.mobile-landscape-device .ban-character-card { width:760px; max-height:330px; padding:12px 18px; }
body.mobile-landscape-device .ban-character-card h2 { margin:2px 0 3px; font-size:19px; }
body.mobile-landscape-device .ban-character-card > p:not(.section-index) { margin:2px 0; font-size:9px; }
body.mobile-landscape-device .ban-character-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin:7px 0; }
body.mobile-landscape-device .ban-character-grid button { grid-template-columns:34px minmax(0,1fr) auto; gap:5px; min-height:43px; padding:4px; }
body.mobile-landscape-device .ban-character-grid img { width:34px; height:34px; }
body.mobile-landscape-device .ban-character-grid b { font-size:9px; }
body.mobile-landscape-device .ban-character-grid small { margin-top:1px; font-size:6px; }
body.mobile-landscape-device .ban-character-grid i { font-size:7px; }
body.mobile-landscape-device .ban-character-actions { gap:6px; margin-bottom:4px; }
body.mobile-landscape-device .ban-character-actions button { min-height:28px; padding:4px 12px; font-size:9px; }
body.mobile-landscape-device .ban-character-card > small { font-size:6.5px; }

/* Achievement center readability pass (v52) */
.achievement-header #achievementSummary b { font-size:24px; line-height:1; }
.achievement-header #achievementSummary span { font-size:10px; line-height:1.35; }
.achievement-side-nav button { min-height:36px; padding:8px 10px; font-size:11px; line-height:1.25; }
.achievement-side section > small { font-size:9px; line-height:1.4; }
.achievement-side article b { font-size:10px; line-height:1.35; }
.achievement-side article small { font-size:8.5px; line-height:1.4; }
.achievement-toolbar button { min-height:30px; padding:6px 10px; font-size:10px; }
.achievement-toolbar small { font-size:9px; line-height:1.4; }
.achievement-card { grid-template-columns:38px minmax(0,1fr) 138px; gap:10px; padding:10px 12px; }
.achievement-icon { width:36px; height:36px; font-size:12px; }
.achievement-card > div > small { font-size:8.5px; line-height:1.35; }
.achievement-card h3 { margin:3px 0; font-size:15px; line-height:1.25; }
.achievement-card p { font-size:10px; line-height:1.5; }
.achievement-card em { margin-top:3px; font-size:8.5px; }
.achievement-card aside b { font-size:9.5px; line-height:1.4; }
.achievement-card aside small,
.achievement-card aside button { font-size:8px; line-height:1.35; }
.achievement-recent b { font-size:9.5px; line-height:1.35; }
.achievement-recent small { font-size:8px; line-height:1.4; }

body.mobile-landscape-device .achievement-header #achievementSummary b { font-size:13px; }
body.mobile-landscape-device .achievement-header #achievementSummary span { font-size:6px; }
body.mobile-landscape-device .achievement-side-nav button { min-height:23px; padding:3px 5px; font-size:7px; }
body.mobile-landscape-device .achievement-side section > small { font-size:5.5px; }
body.mobile-landscape-device .achievement-side article b { font-size:6.5px; }
body.mobile-landscape-device .achievement-side article small { font-size:5.5px; }
body.mobile-landscape-device .achievement-toolbar button { min-height:20px; padding:2px 6px; font-size:6.5px; }
body.mobile-landscape-device .achievement-toolbar small { font-size:5.5px; }
body.mobile-landscape-device .achievement-card { grid-template-columns:25px minmax(0,1fr) 88px; gap:5px; padding:5px 6px; }
body.mobile-landscape-device .achievement-icon { width:24px; height:24px; font-size:7px; }
body.mobile-landscape-device .achievement-card > div > small { font-size:5.5px; }
body.mobile-landscape-device .achievement-card h3 { margin:1px 0; font-size:9px; }
body.mobile-landscape-device .achievement-card p { font-size:6.5px; line-height:1.35; }
body.mobile-landscape-device .achievement-card em { margin-top:1px; font-size:5.5px; }
body.mobile-landscape-device .achievement-card aside b { font-size:6px; }
body.mobile-landscape-device .achievement-card aside small,
body.mobile-landscape-device .achievement-card aside button { font-size:5.5px; }
body.mobile-landscape-device .achievement-recent b { font-size:6.5px; }
body.mobile-landscape-device .achievement-recent small { font-size:5.5px; }