@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;
  font-family: Inter, system-ui, sans-serif;
  color: #f2f0ea;
  background: #080a0f;
  --bg: #080a0f;
  --surface: #11141b;
  --surface-raised: #171b24;
  --line: #292e39;
  --muted: #8b909b;
  --cream: #f2f0ea;
  --acid: #d9ff43;
  --acid-dark: #94b51c;
  --blue: #45a6ff;
  --red: #ff5c63;
  --gold: #efbd5c;
  --display: "Barlow Condensed", Impact, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); text-transform: uppercase; }
h1 { font-size: clamp(3rem, 7vw, 6.5rem); line-height: .85; letter-spacing: -.035em; }
h1 em { color: var(--acid); font-weight: 700; }
h2 { font-size: 2rem; letter-spacing: -.01em; }

.eyebrow, .kicker, .tag {
  color: var(--acid);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.button {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: .8rem 1.1rem;
  background: var(--surface-raised);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.button.primary { border-color: var(--acid); background: var(--acid); color: #090b08; }
.button.primary:hover { background: #e4ff76; }
.button.ghost:hover { border-color: #555d6d; }
.button.large { padding: 1rem 1.35rem; }
.button.wide { width: 100%; }
.text-button { border: 0; background: none; color: var(--muted); padding: 1rem 0; }
.text-button:hover { color: var(--cream); }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); background: var(--surface); border-radius: 3px; }

.app-shell { min-height: 100vh; background: radial-gradient(circle at 70% -20%, #252a18 0, transparent 35%), var(--bg); }
.topbar { height: 72px; display: flex; align-items: center; gap: 2rem; padding: 0 4vw; border-bottom: 1px solid var(--line); }
.topbar nav { display: flex; gap: .25rem; }
.topbar > .icon-button { margin-left: auto; }
.wordmark { display: inline-flex; align-items: center; gap: .65rem; border: 0; background: none; font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: .08em; }
.wordmark.static { padding: 0; }
.wordmark-mark { display: grid; place-items: center; width: 28px; height: 28px; background: var(--acid); color: #080a0f; clip-path: polygon(50% 0, 94% 22%, 94% 76%, 50% 100%, 6% 76%, 6% 22%); }
.nav-link { position: relative; border: 0; background: none; color: var(--muted); padding: 1.6rem .8rem; }
.nav-link.active, .nav-link:hover { color: var(--cream); }
.nav-link.active::after { content: ""; position: absolute; height: 2px; inset: auto .8rem 0; background: var(--acid); }
.page { max-width: 1280px; margin: auto; padding: 4rem 4vw 6rem; }

.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1.15fr .85fr; }
.auth-hero { position: relative; overflow: hidden; padding: 9vh 7vw; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 68% 48%, #263215 0, transparent 34%), linear-gradient(140deg, #0c1015, #080a0f); border-right: 1px solid var(--line); }
.auth-hero h1 { max-width: 780px; margin: 1.4rem 0 2rem; }
.auth-hero p { max-width: 520px; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.hero-board { position: absolute; right: -4vw; bottom: -11vw; width: 38vw; aspect-ratio: 5 / 3; display: grid; grid-template-columns: repeat(5, 1fr); transform: rotate(-12deg) skew(10deg); opacity: .55; }
.hero-board i { border: 1px solid #4b5434; background: #171d14; }
.hero-board i.core { background: var(--acid); box-shadow: 0 0 70px var(--acid); }
.auth-panel { display: grid; place-items: center; padding: 2rem; background: #0b0d12; }
.auth-card { width: min(410px, 100%); }
.auth-card .kicker { display: block; margin: 3.5rem 0 .7rem; }
.auth-card h2 { font-size: 2.6rem; margin-bottom: 2rem; }
label { display: block; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 1rem 0 .45rem; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: 2px; background: #0d1016; color: var(--cream); padding: .9rem 1rem; outline: none; }
input:focus, select:focus { border-color: var(--acid); }
.auth-card .button { margin-top: 1.4rem; }
.notice { padding: .75rem; border: 1px solid; margin: 1rem 0; font-size: .85rem; }
.notice.error { color: #ff9ba0; border-color: #71353a; background: #2b1417; }

.home-hero { min-height: 390px; display: flex; justify-content: space-between; align-items: flex-end; padding: 3.5rem; background: linear-gradient(95deg, #12171c 0%, #12171ce8 48%, transparent), radial-gradient(circle at 82% 50%, #424c1b 0, #161a12 22%, #0f1217 58%); border: 1px solid var(--line); overflow: hidden; position: relative; }
.home-hero::after { content: "D"; position: absolute; right: 8%; top: 50%; transform: translateY(-50%) rotate(8deg); font: 800 18rem/1 var(--display); color: #d9ff430b; }
.home-hero h1 { font-size: clamp(3rem, 6vw, 5.7rem); margin: 1rem 0 1.4rem; }
.home-hero p { color: var(--muted); max-width: 560px; }
.home-hero .button { position: relative; z-index: 1; white-space: nowrap; }
.section-heading, .detail-header { display: flex; justify-content: space-between; align-items: flex-end; margin: 4rem 0 1.5rem; }
.section-heading h2, .detail-header h1 { margin: .45rem 0 0; }
.detail-header h1 { font-size: clamp(3rem, 6vw, 5rem); }
.loadout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.loadout-card { position: relative; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.loadout-number { position: absolute; z-index: 2; top: .85rem; right: 1rem; color: #ffffff38; font: 800 1rem var(--display); }
.loadout-art { height: 170px; display: grid; place-items: center; background: radial-gradient(circle, #2d3b21, #10150f 60%); border-bottom: 1px solid var(--line); }
.loadout-art.art-1 { background: radial-gradient(circle, #263448, #101218 60%); }
.loadout-art.art-2 { background: radial-gradient(circle, #422629, #151011 60%); }
.loadout-art span { font: 700 5rem var(--display); color: var(--acid); filter: drop-shadow(0 0 20px #d9ff4355); }
.loadout-body { padding: 1.25rem; }
.loadout-body h3 { font-size: 1.6rem; margin: .55rem 0 .25rem; }
.loadout-body p { color: var(--muted); font-size: .84rem; }
.card-actions { display: flex; gap: .6rem; margin-top: 1.2rem; }
.card-actions .button { flex: 1; }
.back-link { border: 0; background: none; color: var(--muted); }
.passive-banner { display: grid; grid-template-columns: 100px 1fr; gap: 1.5rem; align-items: center; padding: 1.5rem; background: linear-gradient(90deg, #1a2012, var(--surface)); border: 1px solid #4a5824; margin-bottom: 1rem; }
.passive-icon { display: grid; place-items: center; width: 82px; height: 82px; border: 1px solid #6d812d; color: var(--acid); font: 700 2.4rem var(--display); }
.passive-banner h2 { margin: .35rem 0; }
.passive-banner p { color: var(--muted); margin: 0; }
.ability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ability-card { position: relative; min-height: 220px; display: grid; grid-template-columns: 58px 1fr; align-content: start; gap: 1rem; padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); }
.ability-icon { width: 58px; height: 58px; display: grid; place-items: center; background: #20251a; color: var(--acid); font: 700 1.8rem var(--display); }
.ability-title h3 { font-size: 1.5rem; margin: .35rem 0; }
.ability-card > p { grid-column: 1 / -1; color: var(--muted); font-size: .84rem; line-height: 1.5; min-height: 3.8em; }
.ability-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); padding-top: .8rem; }
.ability-stats span { color: var(--muted); font-size: .65rem; text-transform: uppercase; }
.ability-stats b { display: block; color: var(--cream); font: 700 1.15rem var(--display); }
.ability-grid.selectable .ability-card { cursor: pointer; }
.ability-grid.selectable .ability-card:hover, .ability-card.selected { border-color: var(--acid); }
.ability-card.selected::after { content: "✓"; position: absolute; top: .6rem; right: .7rem; color: #080a0f; background: var(--acid); width: 24px; height: 24px; display: grid; place-items: center; }
.selection-count { font: 800 2.2rem var(--display); color: var(--muted); }
.selection-count b { color: var(--acid); }
.builder-title { margin: 3rem 0 1rem; }
.passive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.passive-choice { text-align: left; border: 1px solid var(--line); background: var(--surface); padding: 1.2rem; }
.passive-choice b, .passive-choice small { display: block; }
.passive-choice b { font: 700 1.4rem var(--display); text-transform: uppercase; margin: .6rem 0; }
.passive-choice small { color: var(--muted); line-height: 1.45; }
.passive-choice.selected { border-color: var(--acid); background: #171c10; }
.builder-footer { display: flex; justify-content: flex-end; margin-top: 2rem; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1.5rem; background: #050608e8; backdrop-filter: blur(8px); }
.match-modal, .result-modal { position: relative; width: min(560px, 100%); background: #11141b; border: 1px solid #343a45; padding: 2rem; box-shadow: 0 30px 100px #000; }
.match-modal h2 { font-size: 2.5rem; margin: .5rem 0 1.5rem; }
.modal-close { position: absolute; right: 1rem; top: 1rem; width: 36px; height: 36px; border: 0; background: #20242d; font-size: 1.4rem; }
.difficulty-list { display: grid; gap: .65rem; margin-top: 1.3rem; }
.difficulty { position: relative; display: grid; grid-template-columns: 75px 1fr 25px; text-align: left; align-items: center; gap: 1rem; border: 1px solid var(--line); background: #151820; padding: 1rem; }
.difficulty:hover { border-color: var(--acid); background: #191f12; }
.difficulty-rank { grid-row: 1 / 3; display: grid; place-items: center; height: 45px; background: #242a1b; color: var(--acid); font: 700 1rem var(--display); text-transform: uppercase; }
.difficulty b { font: 700 1.2rem var(--display); text-transform: uppercase; }
.difficulty small { color: var(--muted); }
.difficulty i { grid-column: 3; grid-row: 1 / 3; color: var(--acid); }

.battle-page { height: 100vh; min-height: 620px; display: flex; flex-direction: column; background: radial-gradient(circle at 50% 45%, #192112, transparent 34%), #080a0f; overflow: hidden; }
.scoreboard { position: relative; flex: 0 0 clamp(112px, 15vh, 138px); display: grid; grid-template-columns: minmax(240px, 1fr) clamp(160px, 14.6vw, 210px) minmax(240px, 1fr); align-items: center; border-bottom: 1px solid var(--line); background: #0d1015f2; box-shadow: 0 10px 35px #0005; }
.battle-exit, .mobile-log-toggle { position: absolute; z-index: 5; top: 14px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); background: #151922; color: var(--muted); font-size: 1rem; }
.battle-exit { left: 14px; }
.battle-exit:hover, .mobile-log-toggle:hover { border-color: var(--cream); color: var(--cream); }
.mobile-log-toggle { right: 14px; display: none; }
.fighter { display: flex; align-items: center; gap: 1rem; width: min(430px, 100%); padding: .8rem 2.4vw; }
.fighter.enemy { justify-self: end; flex-direction: row-reverse; text-align: right; }
.fighter.player { justify-self: start; }
.fighter-avatar { width: 56px; height: 56px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid currentColor; font: 800 1.65rem var(--display); background: #11161f; transform: rotate(45deg); box-shadow: 0 0 24px #0008; }
.fighter.player { color: var(--blue); }
.fighter.enemy { color: var(--red); }
.fighter-info { min-width: 205px; flex: 1; }
.fighter-info > span { display: block; color: var(--muted); font: 700 .72rem var(--display); letter-spacing: .12em; text-transform: uppercase; }
.energy-value { display: flex; align-items: baseline; justify-content: space-between; margin-top: .1rem; }
.energy-value small { color: currentColor; font: 700 .58rem var(--display); letter-spacing: .13em; }
.energy-value b { color: var(--cream); font: 800 2.25rem/.9 var(--display); }
.energy-value em { margin-left: .18rem; color: var(--muted); font: 700 .85rem var(--display); font-style: normal; }
.fighter-meta { display: flex; justify-content: space-between; gap: .65rem; color: var(--muted); font-size: .54rem; letter-spacing: .04em; }
.energy-track { height: 5px; background: #282d37; margin: .4rem 0 .3rem; overflow: hidden; }
.energy-track i { display: block; height: 100%; background: currentColor; }
.passive-chip { display: block; width: fit-content; max-width: 100%; margin-top: .42rem; padding: .25rem .42rem; border: 1px solid currentColor; background: #111820; color: currentColor !important; font: 700 .58rem var(--display) !important; letter-spacing: .06em !important; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; cursor: help; }
.fighter.enemy .passive-chip { margin-left: auto; }
.score-center { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-inline: 1px solid var(--line); background: #0a0d12; }
.score-versus { display: flex; align-items: center; justify-content: center; gap: .65rem; }
.score-versus b { font: 800 3rem/.85 var(--display); }
.score-versus b.enemy { color: var(--red); }
.score-versus b.player { color: var(--blue); }
.score-versus span { color: var(--muted); font: 700 .72rem var(--display); letter-spacing: .14em; }
.score-center > strong { margin-top: .5rem; color: var(--cream); font: 800 .82rem var(--display); letter-spacing: .14em; }
.score-center > small { margin-top: .15rem; color: var(--muted); font-size: .54rem; letter-spacing: .1em; }
.battle-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: clamp(220px, 18.75vw, 290px) minmax(0, 1fr) clamp(220px, 18.75vw, 290px); gap: clamp(.5rem, .95vw, .85rem); padding: clamp(.55rem, 1.5vh, .85rem) clamp(.65rem, 1.1vw, 1rem) clamp(.65rem, 1.7vh, 1rem); overflow: hidden; }
.ability-rail, .battle-log { min-height: 0; border: 1px solid var(--line); background: #0d1015e8; }
.ability-rail { display: flex; flex-direction: column; overflow: hidden; }
.rail-heading, .log-heading { min-height: clamp(52px, 6.5vh, 58px); display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: clamp(.65rem, 1.3vh, .8rem); border-bottom: 1px solid var(--line); }
.rail-heading span, .log-heading span { display: block; color: var(--acid); font-size: .5rem; letter-spacing: .14em; }
.rail-heading b, .log-heading b { display: block; font: 700 .9rem var(--display); text-transform: uppercase; }
.log-heading > small { color: var(--muted); font-size: .55rem; white-space: nowrap; }
.log-close { display: none; }
.ability-rail .hand { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; padding: 0; overflow-y: auto; scrollbar-color: #515966 transparent; scrollbar-width: thin; }
.ability-rail .hand-card-wrap { flex: 1 1 0; min-height: 76px; }
.ability-rail .hand-card { height: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: linear-gradient(90deg, #171c24, #101319); }
.ability-rail .hand-card-wrap:last-child .hand-card { border-bottom: 0; }
.ability-rail .hand-card:hover:not(:disabled), .ability-rail .hand-card.selected { border-color: var(--line); border-left: 3px solid var(--acid); background: linear-gradient(90deg, #202819, #12171b); transform: none; }
.battle-main { min-width: 0; min-height: 0; display: flex; }
.battlefield { flex: 1; width: min(1050px, 96vw); min-height: 360px; margin: .7rem auto 1.2rem; display: flex; flex-direction: column; }
.battle-main .battlefield { width: 100%; height: 100%; min-height: 0; margin: 0; }
.battle-main .lanes { flex: 1; }
.lanes { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid #424852; box-shadow: 0 20px 60px #0007; }
.lane { position: relative; min-width: 0; display: block; border: 0; border-right: 1px solid #424852; background: linear-gradient(180deg, #f6f6f2, #d8d9d6 49%, #eeeeea); transition: filter .15s, box-shadow .15s; }
.lane:last-child { border-right: 0; }
.lane:hover { filter: brightness(1.08); }
.lane.selected { outline: 2px solid var(--cream); outline-offset: -4px; box-shadow: inset 0 0 0 5px #080a0f55; }
.lane:focus-visible { outline: 2px solid var(--cream); outline-offset: -4px; }
.lane.empty { background: linear-gradient(180deg, #f4f4f0, #d8d9d5 50%, #efefeb); }
.lane.player, .lane.controlled-player { background: linear-gradient(180deg, #123550, #1d5a86 49%, #153e5d); }
.lane.bot, .lane.controlled-enemy { background: linear-gradient(180deg, #501820, #812d36 49%, #5a1c25); }
.lane.contested { background: linear-gradient(180deg, #4e401b, #806b2c 49%, #5a481d); }
.lane.valid-target { cursor: crosshair; box-shadow: inset 0 0 0 2px var(--acid), inset 0 0 60px #d9ff4315; animation: target-pulse 1.2s ease-in-out infinite; }
.lane.invalid-target { opacity: .32; }
.lane.frozen { filter: saturate(.35); box-shadow: inset 0 0 35px #a7ddff44; }
.character { position: absolute; z-index: 5; left: 50%; width: 50px; height: 50px; display: none; place-items: center; border: 2px solid currentColor; border-radius: 50%; font: 800 1.05rem var(--display); background: #0d1118; transform: translateX(-50%); box-shadow: 0 8px 24px #000b; }
.character.enemy { top: clamp(48px, 7.5vh, 70px); }
.character.player { bottom: clamp(18px, 3vh, 30px); }
.character.present { display: grid; }
.character b { line-height: 1; }
.character small { position: absolute; top: calc(100% + 4px); color: currentColor; font: 700 .45rem var(--display); letter-spacing: .08em; }
.character.player small { top: auto; bottom: calc(100% + 4px); }
.character.player { color: var(--blue); }
.character.enemy { color: var(--red); }
.character-move { position: absolute; top: 50%; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid #5b6573; border-radius: 50%; background: #171d27; color: var(--cream); font: 800 1.15rem/1 var(--display); transform: translateY(-50%); box-shadow: 0 4px 14px #000a; }
.character-move.left { right: calc(100% + 7px); }
.character-move.right { left: calc(100% + 7px); }
.character-move:hover:not(:disabled) { border-color: var(--blue); background: #1b3c57; }
.character-move:disabled { opacity: .25; }
.summon-slots { position: absolute; z-index: 2; inset: clamp(110px, 15vh, 142px) 0 clamp(92px, 12vh, 120px); display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: clamp(.5rem, 1.2vh, .8rem); }
.summon-slot { width: min(126px, 78%); height: clamp(44px, 6.5vh, 58px); display: block; flex: 0 0 auto; border: 1px dashed #333a42aa; border-radius: 4px; background: #0b0e1226; }
.summon-piece { position: relative; width: min(126px, 82%); min-height: 42px; flex: 0 0 auto; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: .4rem; padding: .35rem .5rem; border: 1px solid currentColor; border-radius: 3px; background: #171b22; box-shadow: 0 7px 20px #0007; text-align: left; }
.piece-glyph { display: grid; place-items: center; width: 28px; height: 28px; color: #0a0d11; border-radius: 2px; font: 800 1rem var(--display); }
.piece-name { min-width: 0; overflow: hidden; color: var(--cream); font: 700 .66rem var(--display); letter-spacing: .035em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.summon-piece.player { color: var(--blue); }
.summon-piece.enemy { color: var(--red); }
.summon-piece.player .piece-glyph { background: var(--blue); }
.summon-piece.enemy .piece-glyph { background: var(--red); }
.summon-piece.selected { outline: 2px solid var(--acid); outline-offset: 2px; }
.summon-piece.valid-target { cursor: crosshair; animation: target-pulse 1.2s ease-in-out infinite; box-shadow: 0 0 0 2px var(--acid), 0 8px 26px #d9ff4330; }
.summon-piece.invalid-target { opacity: .18; }
.summon-piece.disabled { opacity: .35; filter: grayscale(1); }
.piece-fortified { position: absolute; right: -5px; top: -6px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #2c2412; color: var(--gold); font-size: .55rem; }
.piece-timer { position: absolute; left: -6px; bottom: -6px; display: grid; place-items: center; width: 18px; height: 18px; background: #0b0d11; color: var(--cream); border: 1px solid currentColor; border-radius: 50%; font-size: .55rem; }
.hand { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.hand-card-wrap { position: relative; min-width: 0; }
.hand-card { position: relative; min-width: 0; height: 105px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; border: 1px solid #363c47; background: linear-gradient(145deg, #1b2028, #101319); overflow: hidden; }
.hand-card { width: 100%; }
.hand-card:hover:not(:disabled), .hand-card.selected { border-color: var(--acid); transform: translateY(-4px); }
.hand-card.unavailable { opacity: .38; filter: saturate(.45); }
.card-cost { position: absolute; left: .35rem; top: .35rem; width: 21px; height: 21px; display: grid; place-items: center; background: var(--acid); color: #080a0f; font: 800 .75rem var(--display); border-radius: 50%; }
.card-icon { color: var(--acid); font-size: 1.6rem; }
.hand-card b { font: 700 .9rem var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90%; }
.hand-card > small { color: var(--muted); font-size: .55rem; text-transform: uppercase; }
.burn { position: absolute; right: .35rem; top: .35rem; color: var(--red); font: 700 .6rem var(--display); }
.card-uses { position: absolute; left: .35rem; bottom: .3rem; color: var(--muted); font: 700 .52rem var(--display); }
.card-cd { position: absolute; z-index: 3; right: .35rem; bottom: .3rem; color: var(--muted); font: 700 .52rem var(--display); letter-spacing: .05em; }
.card-cd.active { color: var(--red); }
.end-turn, .reserve-button { min-height: 46px; border: 1px solid var(--acid); background: var(--acid); color: #080a0f; font: 800 .8rem var(--display); letter-spacing: .08em; }
.end-turn:disabled { opacity: .35; }
.end-turn kbd { margin-left: .45rem; padding: .18rem .35rem; border: 1px solid #080a0f66; border-radius: 2px; background: #080a0f1f; color: inherit; font: 700 .56rem var(--display); letter-spacing: .06em; }
.reserve-button { border-color: #6e62ff; background: #26204c; color: #c7c1ff; }
.target-bar { position: fixed; z-index: 25; left: 50%; bottom: 90px; width: min(650px, calc(100% - 2rem)); transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .75rem; background: #151912f5; border: 1px solid var(--acid); box-shadow: 0 12px 45px #000b; }
.target-bar > div { display: flex; align-items: center; gap: .75rem; }
.target-bar > div > span { color: var(--acid); font-size: 1.4rem; }
.target-bar p { margin: 0; color: var(--muted); font-size: .7rem; }
.target-bar p b { display: block; color: var(--cream); font: 700 .9rem var(--display); text-transform: uppercase; }
.target-bar button { border: 0; background: transparent; color: var(--muted); font-size: .7rem; white-space: nowrap; }
.bot-action-banner { position: fixed; z-index: 24; left: 50%; bottom: 90px; transform: translateX(-50%); min-width: 270px; padding: .65rem 1rem; background: #251316f5; border: 1px solid var(--red); text-align: center; box-shadow: 0 12px 45px #000b; }
.bot-action-banner span, .bot-action-banner b { display: block; }
.bot-action-banner span { color: var(--red); font-size: .55rem; letter-spacing: .14em; }
.bot-action-banner b { font: 700 1rem var(--display); text-transform: uppercase; }
.battle-log { position: static; z-index: 30; width: auto; padding: 0; display: flex; flex-direction: column; transform: none; transition: .2s; overflow: hidden; }
.log-list { flex: 1 1 auto; min-height: 0; height: auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #515966 transparent; scrollbar-width: thin; }
.log-actions { flex: 0 0 auto; display: grid; gap: .55rem; padding: .75rem; border-top: 1px solid var(--line); background: #0a0d12; }
.log-actions .end-turn, .log-actions .reserve-button { width: 100%; }
.log-entry { padding: .75rem .85rem; border-bottom: 1px solid var(--line); cursor: help; }
.log-entry:hover { background: #151a21; }
.log-entry > span { color: var(--acid); font: 700 .5rem var(--display); letter-spacing: .09em; }
.log-entry p { margin: .25rem 0 0; color: var(--muted); font-size: .7rem; line-height: 1.4; }
.result-modal { text-align: center; }
.versus-modal { width: min(720px, 100%); padding: 2rem; background: #11141b; border: 1px solid #3b424d; box-shadow: 0 30px 100px #000; }
.versus-modal h2 { margin: .45rem 0 1.5rem; font-size: 2.6rem; }
.versus-grid { display: grid; grid-template-columns: 1fr 55px 1fr; align-items: center; gap: .75rem; }
.versus-grid article { min-height: 125px; padding: 1rem; border: 1px solid var(--line); background: #151920; }
.versus-grid article:last-child { text-align: right; }
.versus-grid article span, .versus-grid article b, .versus-grid article small { display: block; }
.versus-grid article span { color: var(--muted); font-size: .55rem; letter-spacing: .1em; }
.versus-grid article b { margin: .7rem 0; font: 700 1.5rem var(--display); text-transform: uppercase; }
.versus-grid article small { color: var(--acid); }
.versus-grid > i { color: var(--muted); font: 800 1.5rem var(--display); font-style: normal; text-align: center; }
.rules-recap { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0; }
.rules-recap span { padding: .6rem; background: #0d1015; color: var(--muted); font-size: .65rem; text-align: center; }
.burn-preview { margin-top: 1rem; padding: .75rem; border: 1px solid #663036; background: #281417; color: #ff9ca1; font-size: .75rem; }
.result-symbol { color: var(--acid); font: 800 5rem var(--display); margin-top: 1rem; }
.result-modal h2 { font-size: 3rem; margin-bottom: .4rem; }
.result-modal p { color: var(--muted); }
.toast { position: fixed; z-index: 200; left: 50%; top: calc(clamp(112px, 15vh, 138px) + clamp(.55rem, 1.5vh, .85rem) + 5px); bottom: auto; transform: translateX(-50%); max-width: min(560px, calc(100vw - 2rem)); background: #1c2115; border: 1px solid var(--acid); color: var(--cream); padding: .55rem .9rem; box-shadow: 0 15px 50px #000; text-align: center; }
.game-tooltip { position: fixed; z-index: 500; width: min(280px, calc(100vw - 20px)); padding: .58rem .68rem; border: 1px solid #59632c; background: #11150df5; color: #d8dbcf; box-shadow: 0 14px 45px #000d; font-size: .66rem; line-height: 1.4; pointer-events: none; white-space: pre-line; }

@keyframes target-pulse { 50% { filter: brightness(1.35); } }

@media (min-width: 901px) {
  .fighter-info > span { font-size: .78rem; }
  .energy-value small { font-size: .64rem; }
  .energy-value b { font-size: 2.5rem; }
  .energy-value em { font-size: .95rem; }
  .fighter-meta { font-size: .6rem; }
  .passive-chip { font-size: .64rem !important; }
  .score-versus b { font-size: 3.15rem; }
  .score-center > small { font-size: .6rem; }
  .rail-heading span, .log-heading span { font-size: .58rem; }
  .rail-heading b, .log-heading b { font-size: 1.02rem; }
  .log-heading > small { font-size: .62rem; }
  .card-cost { width: 24px; height: 24px; font-size: .85rem; }
  .card-icon { font-size: 1.85rem; }
  .hand-card b { font-size: 1.02rem; }
  .hand-card > small { font-size: .62rem; }
  .card-uses, .card-cd { font-size: .6rem; }
  .burn { font-size: .66rem; }
  .character { width: 50px; height: 50px; font-size: 1.12rem; }
  .character small { font-size: .52rem; }
  .summon-slot { width: min(126px, 78%); }
  .summon-piece { width: min(142px, 86%); min-height: 48px; grid-template-columns: 34px minmax(0, 1fr); }
  .piece-glyph { width: 32px; height: 32px; font-size: 1.1rem; }
  .piece-name { font-size: .74rem; }
  .end-turn, .reserve-button { min-height: 50px; font-size: .9rem; }
  .log-entry { padding: .88rem .95rem; }
  .log-entry > span { font-size: .58rem; }
  .log-entry p { font-size: .78rem; line-height: 1.5; }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .fighter { padding-inline: 1.4vw; }
}

@media (min-width: 901px) and (max-height: 800px) {
  .scoreboard { min-height: 0; }
  .fighter { padding-block: .35rem; }
  .fighter-avatar { width: 46px; height: 46px; font-size: 1.4rem; }
  .fighter-info > span { font-size: .68rem; }
  .energy-value b { font-size: 2rem; }
  .energy-value em { font-size: .78rem; }
  .energy-track { margin-block: .25rem .2rem; }
  .fighter-meta { font-size: .52rem; }
  .passive-chip { margin-top: .25rem; padding-block: .16rem; font-size: .56rem !important; }
  .score-versus b { font-size: 2.6rem; }
  .score-center > strong { margin-top: .3rem; }
}

@media (max-width: 900px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .loadout-grid, .ability-grid { grid-template-columns: repeat(2, 1fr); }
  .passive-grid { grid-template-columns: 1fr; }
  .battle-page { height: auto; overflow: visible; }
  .scoreboard { flex-basis: 124px; grid-template-columns: 1fr 150px 1fr; }
  .mobile-log-toggle { display: grid; }
  .battle-layout { display: flex; flex-direction: column; padding: 0; overflow: visible; }
  .battle-main { order: 1; }
  .ability-rail { order: 2; position: sticky; z-index: 10; bottom: 0; border-inline: 0; }
  .rail-heading { display: none; }
  .ability-rail .hand { display: flex; flex-direction: row; gap: .35rem; padding: .45rem .55rem; overflow-x: auto; overflow-y: hidden; }
  .ability-rail .hand-card-wrap { flex: 0 0 96px; }
  .battle-log { position: fixed; right: 0; top: 0; bottom: 0; width: min(350px, 90vw); background: #0c0f14f5; border-left: 1px solid var(--line); transform: translateX(100%); box-shadow: -20px 0 60px #000a; }
  .battle-log.open { transform: none; }
  .log-heading { padding-right: 3.4rem; }
  .log-close { position: absolute; right: .75rem; top: .75rem; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); background: #171b23; color: var(--cream); font-size: 1.2rem; }
  .fighter-info { min-width: 120px; }
}

@media (max-width: 650px) {
  h1 { font-size: 3.3rem; }
  .topbar { padding: 0 1rem; gap: .7rem; }
  .topbar nav { display: none; }
  .page { padding: 2rem 1rem 4rem; }
  .home-hero { min-height: 430px; padding: 1.5rem; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 1rem; }
  .loadout-grid, .ability-grid { grid-template-columns: 1fr; }
  .section-heading, .detail-header { align-items: flex-start; gap: 1rem; }
  .passive-banner { grid-template-columns: 1fr; }
  .scoreboard { grid-template-columns: 1fr 82px 1fr; }
  .fighter { padding: .7rem; gap: .55rem; }
  .fighter-avatar { display: none; }
  .fighter-info { min-width: 0; flex: 1; }
  .energy-value small { display: none; }
  .energy-value b { font-size: 1.55rem; }
  .energy-value em { font-size: .68rem; }
  .fighter-meta { display: grid; gap: .1rem; font-size: .48rem; }
  .passive-chip { max-width: 110px; font-size: .5rem !important; }
  .score-versus { gap: .25rem; }
  .score-versus b { font-size: 1.8rem; }
  .score-versus span { font-size: .5rem; }
  .score-center > strong { font-size: .62rem; }
  .score-center > small { display: none; }
  .battlefield { min-height: 390px; width: 100%; margin: .5rem 0; }
  .lanes { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; border-inline: 0; }
  .lanes::-webkit-scrollbar { display: none; }
  .lane { flex: 0 0 76vw; min-height: 410px; scroll-snap-align: center; border-left: 1px solid #30362a; }
  .character { width: 38px; height: 38px; }
  .character-move { width: 25px; height: 25px; }
  .summon-slots { inset: 58px 0; gap: .35rem; }
  .summon-slot { width: 68%; height: 29px; }
  .summon-piece { width: 88%; min-height: 34px; grid-template-columns: 22px minmax(0, 1fr); gap: .25rem; padding: .25rem; }
  .piece-glyph { width: 22px; height: 22px; font-size: .8rem; }
  .piece-name { font-size: .48rem; }
  .ability-rail .hand { scroll-snap-type: x proximity; scrollbar-width: none; }
  .ability-rail .hand::-webkit-scrollbar { display: none; }
  .ability-rail .hand-card-wrap { scroll-snap-align: start; }
  .hand-card { height: 82px; }
  .hand-card b { font-size: .7rem; }
  .hand-card > small { display: none; }
  .target-bar, .bot-action-banner { bottom: 102px; width: calc(100% - 1rem); }
  .target-bar p { font-size: .62rem; }
  .versus-grid { grid-template-columns: 1fr; }
  .versus-grid > i { display: none; }
  .versus-grid article:last-child { text-align: left; }
  .rules-recap { grid-template-columns: 1fr; }
}

/* Guided tutorial */
.tutorial-home { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; margin-top: 2rem; border: 1px solid #4b5828; background: linear-gradient(120deg, #141a12, #0d1117 62%); overflow: hidden; }
.tutorial-home-copy { position: relative; z-index: 2; padding: clamp(2rem, 4vw, 3.5rem); }
.tutorial-home h2 { margin: .55rem 0 .85rem; font-size: clamp(2.3rem, 4vw, 4rem); line-height: .95; }
.tutorial-home p { max-width: 680px; margin-bottom: 1.35rem; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.tutorial-home-points { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.tutorial-home-points span { padding: .38rem .65rem; border: 1px solid #394522; color: var(--acid); background: #11160e; font: 700 .68rem var(--display); letter-spacing: .08em; text-transform: uppercase; }
.tutorial-home-board { position: relative; min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 2rem; background: radial-gradient(circle at 50% 50%, #34421c, transparent 55%); }
.tutorial-home-board::before { content: ""; position: absolute; inset: 9% 8%; border: 1px solid #66743a55; transform: skewY(-4deg); }
.tutorial-preview-score { position: relative; z-index: 1; display: flex; align-items: center; gap: .65rem; }
.tutorial-preview-score b { font: 800 3rem/1 var(--display); }
.tutorial-preview-score b:first-child { color: var(--red); }
.tutorial-preview-score b:last-child { color: var(--blue); }
.tutorial-preview-score span { color: var(--muted); font: 700 .7rem var(--display); }
.tutorial-preview-lanes { position: relative; z-index: 1; width: min(420px, 100%); height: 155px; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid #555e68; transform: perspective(500px) rotateX(10deg); box-shadow: 0 20px 45px #0009; }
.tutorial-preview-lanes i { position: relative; display: grid; place-items: center; border-right: 1px solid #555e68; background: #dedfdb; }
.tutorial-preview-lanes i:last-child { border: 0; }
.tutorial-preview-lanes .blue { background: #1c5c89; }
.tutorial-preview-lanes .red { background: #812d36; }
.tutorial-preview-lanes .contested { background: #806b2c; }
.tutorial-preview-lanes span { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--blue); background: #10151c; color: var(--blue); font-style: normal; }
.tutorial-home-board > small { position: relative; z-index: 1; color: var(--muted); font: 700 .62rem var(--display); letter-spacing: .14em; text-align: center; }

.tutorial-page { height: 100vh; min-height: 650px; display: flex; flex-direction: column; background: radial-gradient(circle at 40% 45%, #1a2413, transparent 34%), var(--bg); overflow: hidden; }
.tutorial-topbar { flex: 0 0 72px; display: grid; grid-template-columns: 1fr minmax(260px, 420px) 1fr; align-items: center; gap: 1rem; padding: 0 clamp(1rem, 2vw, 2rem); border-bottom: 1px solid var(--line); background: #0c0f14f5; }
.tutorial-progress { display: flex; align-items: center; gap: .7rem; }
.tutorial-progress > div { flex: 1; height: 5px; background: #282e36; overflow: hidden; }
.tutorial-progress i { display: block; height: 100%; background: var(--acid); transition: width .25s ease; }
.tutorial-progress span { color: var(--muted); font: 700 .72rem var(--display); }
.tutorial-top-actions { justify-self: end; display: flex; align-items: center; gap: .5rem; }
.tutorial-top-actions .button { padding: .62rem .8rem; }
.tutorial-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 26vw, 390px); }
.tutorial-game { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .55rem; padding: .75rem; overflow: hidden; }
.tutorial-gamebar { flex: 0 0 82px; display: grid; grid-template-columns: 1fr 155px 1fr; align-items: center; border: 1px solid var(--line); background: #0d1015e8; }
.tutorial-fighter { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0 1.2rem; }
.tutorial-fighter span { color: var(--muted); font: 700 .65rem var(--display); letter-spacing: .1em; }
.tutorial-fighter b { font: 800 2.2rem/1 var(--display); }
.tutorial-fighter b small { color: var(--muted); font-size: .85rem; }
.tutorial-fighter.enemy { color: var(--red); }
.tutorial-fighter.player { color: var(--blue); }
.tutorial-fighter.player { position: relative; padding-bottom: 1rem; }
.tutorial-energy { padding: 0; border: 0; background: transparent; color: var(--blue); }
.tutorial-energy b { display: block; }
.tutorial-fighter em { position: absolute; right: 1.2rem; bottom: -.2rem; max-width: calc(100% - 2.4rem); color: var(--blue); font: 700 .55rem var(--display); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.tutorial-round { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; border-inline: 1px solid var(--line); text-align: center; }
.tutorial-round span, .tutorial-round small { color: var(--muted); font: 700 .55rem var(--display); letter-spacing: .1em; }
.tutorial-round b { color: var(--cream); font: 800 2rem/1 var(--display); }
.tutorial-round b i { color: var(--muted); font-size: .58rem; font-style: normal; }
.tutorial-legend { flex: 0 0 26px; display: flex; justify-content: center; align-items: center; gap: 1.1rem; color: var(--muted); font: 700 .56rem var(--display); letter-spacing: .07em; }
.tutorial-legend span { display: flex; align-items: center; gap: .35rem; }
.tutorial-legend i { width: 10px; height: 10px; border: 1px solid #737b84; }
.tutorial-legend i.blue { background: #1d5a86; border-color: var(--blue); }
.tutorial-legend i.empty { background: #dedfdb; }
.tutorial-legend i.red { background: #812d36; border-color: var(--red); }
.tutorial-legend i.yellow { background: #806b2c; border-color: var(--gold); }
.tutorial-board { flex: 1 1 auto; min-height: 300px; display: flex; }
.tutorial-board .lanes { width: 100%; height: 100%; }
.tutorial-board .summon-slots { inset: clamp(82px, 12vh, 105px) 0 clamp(68px, 10vh, 88px); gap: .35rem; }
.tutorial-board .summon-slot { height: clamp(36px, 5.2vh, 48px); }
.tutorial-commandbar { flex: 0 0 clamp(112px, 15vh, 140px); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 165px; gap: .6rem; }
.tutorial-hand { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); background: #0d1015; }
.tutorial-card { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem; border: 0; border-right: 1px solid var(--line); background: linear-gradient(145deg, #1b2028, #101319); overflow: hidden; }
.tutorial-card:last-child { border-right: 0; }
.tutorial-card:disabled { opacity: .32; }
.tutorial-card.enabled { opacity: 1; }
.tutorial-card.selected { background: #202819; box-shadow: inset 0 0 0 2px var(--acid); }
.tutorial-card b { max-width: 88%; color: var(--cream); font: 700 .86rem var(--display); overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.tutorial-card > small { color: var(--muted); font-size: .52rem; text-transform: uppercase; }
.tutorial-turn-controls { display: grid; align-content: stretch; gap: .5rem; }
.tutorial-turn-controls > button { min-height: 0; }
.tutorial-guide { position: relative; min-height: 0; padding: clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid var(--line); background: #10131af2; overflow-y: auto; }
.tutorial-step-number { position: absolute; top: 1.2rem; right: 1.5rem; color: #ffffff10; font: 800 5rem/1 var(--display); }
.tutorial-guide h1 { position: relative; margin: .65rem 0 1rem; font-size: clamp(2.5rem, 4vw, 4rem); line-height: .88; }
.tutorial-guide > p { position: relative; color: var(--muted); font-size: .88rem; line-height: 1.65; }
.tutorial-instruction { margin: 1.4rem 0 1rem; padding: 1rem; border-left: 3px solid var(--acid); background: #1a2013; }
.tutorial-instruction span, .tutorial-instruction b { display: block; }
.tutorial-instruction span { margin-bottom: .35rem; color: var(--acid); font: 700 .56rem var(--display); letter-spacing: .13em; }
.tutorial-instruction b { font-size: .78rem; line-height: 1.45; }
.tutorial-topic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin: 1rem 0; }
.tutorial-topic { position: relative; min-height: 62px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: .4rem; padding: .55rem; border: 1px solid var(--line); background: #171b22; text-align: left; }
.tutorial-topic > span { color: var(--acid); font: 700 1.2rem var(--display); text-align: center; }
.tutorial-topic > b { font: 700 .66rem var(--display); line-height: 1.1; text-transform: uppercase; }
.tutorial-topic > i { position: absolute; top: .28rem; right: .35rem; color: var(--acid); font-size: .65rem; font-style: normal; }
.tutorial-topic:hover, .tutorial-topic.active { border-color: var(--acid); }
.tutorial-topic.viewed { background: #192014; }
.tutorial-topic-detail { margin-bottom: .8rem; padding: .85rem; border: 1px solid #4a5729; background: #13180f; }
.tutorial-topic-detail > b { color: var(--acid); font: 700 .78rem var(--display); text-transform: uppercase; }
.tutorial-topic-detail ul { display: grid; gap: .42rem; margin: .65rem 0 0; padding: 0; list-style: none; }
.tutorial-topic-detail li { position: relative; padding-left: .9rem; color: var(--muted); font-size: .7rem; line-height: 1.4; }
.tutorial-topic-detail li::before { content: "·"; position: absolute; left: .15rem; color: var(--acid); font-weight: 900; }
.tutorial-complete-actions { display: grid; gap: .55rem; }
.tutorial-mini-log { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.tutorial-mini-log > span { color: var(--muted); font: 700 .55rem var(--display); letter-spacing: .12em; }
.tutorial-mini-log ol { list-style: none; margin: .65rem 0 0; padding: 0; }
.tutorial-mini-log li { padding: .55rem 0; border-bottom: 1px solid #242a33; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.tutorial-mini-log li span { display: block; margin-bottom: .15rem; color: var(--acid); font: 700 .52rem var(--display); }
.tutorial-inspectable[role="button"] { cursor: pointer; }
.tutorial-focus-active { filter: brightness(1.12); }
.tutorial-spotlight { position: absolute; z-index: 41; border: 2px solid var(--acid); border-radius: 4px; background: transparent; box-shadow: 0 0 0 9999px #080b10c9, 0 0 0 5px #d9ff4326, 0 0 28px #d9ff4342; pointer-events: none; transition: inset .2s ease, width .2s ease, height .2s ease; }
.tutorial-spotlight::after { content: attr(data-label); position: absolute; top: 4px; left: 4px; padding: .25rem .4rem; background: var(--acid); color: #0a0d0f; font: 800 .5rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 2px 10px #0008; }
.tutorial-pulse { animation: tutorial-pulse 1.15s ease-in-out infinite; }
@keyframes tutorial-pulse { 50% { box-shadow: 0 0 0 3px #d9ff4340, 0 0 24px #d9ff4328; filter: brightness(1.18); } }

@media (max-width: 1100px) {
  .tutorial-layout { grid-template-columns: minmax(0, 1fr) 310px; }
  .tutorial-guide { padding: 1.4rem; }
  .tutorial-game { padding: .55rem; }
  .tutorial-card b { font-size: .72rem; }
  .tutorial-card > small { display: none; }
}

@media (max-width: 900px) {
  .tutorial-home { grid-template-columns: 1fr; }
  .tutorial-page { height: auto; min-height: 100vh; overflow: visible; }
  .tutorial-topbar { position: sticky; z-index: 50; top: 0; grid-template-columns: 1fr 150px auto; }
  .tutorial-top-actions .button { display: none; }
  .tutorial-layout { display: flex; flex-direction: column; }
  .tutorial-guide { order: -1; max-height: none; border-left: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .tutorial-game { min-height: 720px; }
  .tutorial-board .lanes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; }
  .tutorial-board .lane { min-height: 0; }
}

@media (max-width: 650px) {
  .tutorial-home-copy { padding: 1.5rem; }
  .tutorial-home-board { min-height: 260px; }
  .tutorial-topbar { grid-template-columns: 1fr 110px auto; height: 64px; padding: 0 .7rem; }
  .tutorial-topbar .wordmark > span:last-child { display: none; }
  .tutorial-progress { gap: .35rem; }
  .tutorial-guide h1 { font-size: 2.6rem; }
  .tutorial-gamebar { grid-template-columns: 1fr 88px 1fr; }
  .tutorial-fighter { padding: 0 .55rem; }
  .tutorial-fighter span { font-size: .5rem; }
  .tutorial-fighter b { font-size: 1.65rem; }
  .tutorial-fighter em { right: .55rem; max-width: calc(100% - 1.1rem); font-size: .46rem; }
  .tutorial-legend { gap: .45rem; font-size: .46rem; }
  .tutorial-board { min-height: 420px; }
  .tutorial-board .lanes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .tutorial-board .lane { flex: 0 0 76vw; min-height: 410px; }
  .tutorial-commandbar { display: flex; flex-direction: column; flex-basis: auto; }
  .tutorial-hand { flex: 0 0 96px; display: flex; overflow-x: auto; }
  .tutorial-card { flex: 0 0 105px; min-height: 92px; border-bottom: 1px solid var(--line); }
  .tutorial-turn-controls { grid-template-columns: 1fr 1fr; min-height: 52px; }
  .tutorial-topic-grid { grid-template-columns: 1fr; }
}

/* Tutorial battle: the real gameplay UI with contextual guidance. */
.tutorial-battle .tutorial-spotlight { position: fixed; z-index: 60; border: 2px solid var(--acid); border-radius: 5px; background: transparent; box-shadow: 0 0 0 9999px #171a20c7, 0 0 0 5px #d9ff4326, 0 0 30px #d9ff4348; pointer-events: none; transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease; }
.tutorial-battle .tutorial-spotlight::after { display: none; }
.tutorial-battle .tutorial-focus-active { filter: brightness(1.12); }
.tutorial-battle .hand-card.tutorial-focus-active, .tutorial-battle .hand-card:has(.tutorial-focus-active) { opacity: 1; filter: brightness(1.12); }
.tutorial-battle .bot-action-banner, .tutorial-battle .target-bar { z-index: 75; }
.tutorial-coach { position: fixed; z-index: 80; bottom: 18px; width: min(370px, calc(100vw - 2rem)); padding: .82rem .9rem; border: 1px solid #66752f; background: #10140ff5; box-shadow: 0 20px 70px #000e; }
.tutorial-coach.center { left: 50%; transform: translateX(-50%); }
.tutorial-coach.left { left: 18px; transform: none; }
.tutorial-coach.right { right: 18px; left: auto; transform: none; }
.tutorial-coach-head { display: grid; grid-template-columns: 1fr auto 28px 28px; align-items: center; gap: .35rem; margin-bottom: .65rem; }
.tutorial-coach-head > span { color: var(--acid); font: 800 .58rem var(--display); letter-spacing: .12em; }
.tutorial-coach-head > b { color: var(--muted); font: 700 .62rem var(--display); }
.tutorial-coach-head button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); background: #191d23; color: var(--muted); }
.tutorial-coach h2 { margin: 0; color: var(--cream); font-size: clamp(1.45rem, 2vw, 1.9rem); line-height: .98; }
.tutorial-coach > p { margin: .45rem 0 .3rem; color: #d7d9d1; font-size: .76rem; line-height: 1.4; }
.tutorial-coach > small { display: block; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.tutorial-coach-actions { display: flex; justify-content: flex-end; gap: .45rem; margin-top: .7rem; }
.tutorial-coach-actions .button { flex: 1 1 auto; padding: .58rem .65rem; white-space: nowrap; }
.tutorial-coach-actions .button.ghost { flex: 0 0 auto; }
.tutorial-coach.busy { border-color: #87404a; }
.tutorial-wait { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: .75rem; color: var(--red); font: 700 .62rem var(--display); letter-spacing: .1em; text-transform: uppercase; }
.tutorial-wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: tutorial-wait 1s ease-in-out infinite; }
.tutorial-color-key { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin: .7rem 0; }
.tutorial-color-key span { display: flex; align-items: center; gap: .4rem; color: var(--muted); font: 700 .55rem var(--display); letter-spacing: .06em; }
.tutorial-color-key i { width: 12px; height: 12px; border: 1px solid #777; }
.tutorial-color-key .blue { background: #1d5a86; border-color: var(--blue); }
.tutorial-color-key .red { background: #812d36; border-color: var(--red); }
.tutorial-color-key .yellow { background: #806b2c; border-color: var(--gold); }
.tutorial-color-key .white { background: #eeeeea; }
.tutorial-result-actions { display: grid; gap: .55rem; margin-top: 1rem; }
@keyframes tutorial-wait { 50% { opacity: .3; transform: scale(.7); } }

@media (max-height: 720px) and (min-width: 901px) {
  .tutorial-coach { bottom: 12px; width: min(350px, calc(100vw - 2rem)); padding: .7rem .78rem; }
  .tutorial-coach h2 { font-size: 1.55rem; }
  .tutorial-coach > p { margin-block: .35rem .25rem; font-size: .72rem; }
  .tutorial-coach > small { font-size: .6rem; }
  .tutorial-coach > .button { margin-top: .55rem; }
}