:root { --ink:#17273f; --paper:#fffaf0; --red:#d9534f; --blue:#2e82d5; --line:rgba(23,39,63,.16); --shadow:0 24px 62px rgba(27,49,73,.2); }
* { box-sizing:border-box; }
html { background:#d5edf1; }
body { min-width:320px; margin:0; color:var(--ink); font-family:Inter,ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif; background:radial-gradient(circle at 12% 2%,rgba(255,255,255,.8),transparent 23rem),radial-gradient(circle at 91% 11%,rgba(233,157,77,.26),transparent 25rem),linear-gradient(#c7e9f0,#edf5ee 44%,#fff3dc); }
button,a { font:inherit; -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } button:disabled { cursor:not-allowed; } button:focus-visible,a:focus-visible { outline:4px solid #f4b34b; outline-offset:4px; } [hidden] { display:none!important; }
.battle-page { width:min(1220px,calc(100% - 26px)); margin:0 auto; padding:15px 0 40px; }
.battle-nav { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:66px; padding:10px 14px; border:1px solid rgba(255,255,255,.88); border-radius:22px; background:rgba(255,255,255,.76); box-shadow:0 12px 32px rgba(31,85,95,.12); backdrop-filter:blur(14px); }
.battle-brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:950; letter-spacing:-.035em; }.battle-brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:white; background:linear-gradient(145deg,#4eb6df,#2763b7); box-shadow:inset 0 -5px 9px rgba(15,50,114,.24); font-size:1.12rem; }.battle-brand small { display:block; color:#60718a; font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.battle-nav-links { display:flex; gap:5px; }.battle-nav-links a,.battle-nav-button { padding:9px 13px; border:0; border-radius:999px; color:#586b84; background:transparent; text-decoration:none; font-size:.8rem; font-weight:850; }.battle-nav-links a:hover,.battle-nav-button:hover:not(:disabled) { color:#1f5fa4; background:rgba(46,130,213,.1); }
.battle-hero { display:flex; align-items:end; justify-content:space-between; gap:24px; padding:38px 8px 20px; }.battle-hero p { margin:0 0 8px; color:#2772ae; font-size:.72rem; font-weight:950; letter-spacing:.13em; text-transform:uppercase; }.battle-hero h1 { margin:0; font-family:Georgia,serif; font-size:clamp(2.7rem,6vw,5.25rem); line-height:.89; letter-spacing:-.065em; }.battle-hero h1 span { color:#d3534e; font-style:italic; }.battle-hero-copy { max-width:350px; margin:0; color:#596f80; line-height:1.62; }
.battle-shell { position:relative; overflow:hidden; border:5px solid #1c3349; border-radius:28px; background:#172b3d; box-shadow:0 28px 70px rgba(20,43,61,.28),inset 0 0 0 1px rgba(255,255,255,.2); }.battle-shell::after { position:absolute; inset:0; z-index:1; pointer-events:none; content:""; background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 16%,transparent 75%,rgba(8,23,36,.18)),radial-gradient(ellipse at 50% 105%,rgba(8,24,39,.3),transparent 45%); }.battle-canvas { display:block; width:100%; aspect-ratio:8/5; background:#bcdde0; cursor:crosshair; touch-action:none; filter:saturate(1.08) contrast(1.025); transition:filter .25s ease; }.battle-canvas[data-battle3d-assets="loading"] { filter:saturate(.82); }
.battle-hud { position:absolute; inset:0; z-index:2; pointer-events:none; color:#fff; }.battle-hud-top { display:flex; justify-content:space-between; gap:12px; padding:16px; }.battle-hud-cluster { display:flex; gap:8px; }.battle-stat { min-width:86px; padding:8px 11px; border:1px solid rgba(255,255,255,.62); border-radius:13px; background:linear-gradient(145deg,rgba(37,70,99,.88),rgba(16,34,54,.84)); box-shadow:0 5px 14px rgba(2,14,27,.25),inset 0 1px 0 rgba(255,255,255,.22); backdrop-filter:blur(7px); text-shadow:0 2px 0 rgba(16,31,49,.62); }.battle-stat small { display:block; color:#b9d5e7; font-size:.59rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.battle-stat strong { display:block; font-size:1.04rem; line-height:1.15; }.battle-unit-roster { position:absolute; left:16px; bottom:15px; display:flex; flex-wrap:wrap; gap:5px; max-width:43%; }.battle-unit-roster span { padding:7px 9px; border:1px solid rgba(255,255,255,.68); border-radius:999px; color:#fff; background:color-mix(in srgb,var(--unit) 76%,#172b42); font-size:.68rem; font-weight:900; box-shadow:0 4px 12px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.22); }.battle-message { position:absolute; right:16px; bottom:15px; max-width:min(390px,52%); padding:10px 13px; border:1px solid rgba(255,255,255,.66); border-radius:14px; background:linear-gradient(145deg,rgba(36,69,97,.9),rgba(15,32,51,.88)); box-shadow:0 5px 16px rgba(1,13,25,.24),inset 0 1px 0 rgba(255,255,255,.18); backdrop-filter:blur(7px); font-size:.77rem; font-weight:850; line-height:1.35; text-align:center; text-shadow:0 1px 0 rgba(16,31,49,.62); }
.battle-screen { position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:clamp(16px,4vw,42px); background:rgba(16,38,59,.48); backdrop-filter:blur(2px); }.battle-screen-card { width:min(570px,100%); max-height:calc(100% - 12px); overflow:auto; padding:clamp(22px,4vw,39px); border:3px solid rgba(255,255,255,.85); border-radius:25px; color:var(--ink); background:rgba(255,252,242,.97); box-shadow:0 18px 0 rgba(19,47,73,.22); text-align:center; }.battle-campaign-card { width:min(880px,100%); padding:clamp(18px,3vw,30px); }.battle-kicker { margin:0 0 9px; color:#ce524c; font-size:.7rem; font-weight:1000; letter-spacing:.13em; text-transform:uppercase; }.battle-screen-card h2 { margin:0; font-family:Georgia,serif; font-size:clamp(2rem,6vw,3.7rem); line-height:.95; letter-spacing:-.055em; }.battle-campaign-card h2 { font-size:clamp(1.65rem,3.4vw,2.75rem); }.battle-copy { margin:13px auto 20px; max-width:450px; color:#617286; line-height:1.57; }
.campaign-heading { display:flex; align-items:start; justify-content:space-between; gap:20px; text-align:left; }.campaign-heading .battle-copy { max-width:none; margin:8px 0 0; }.campaign-wallet { display:grid; gap:5px; min-width:180px; padding:11px 13px; border:1px solid #d2dee5; border-radius:14px; color:#526d83; background:#f1f7f8; text-align:right; }.campaign-wallet strong { color:#ba6a35; font-size:.96rem; }.campaign-wallet span { font-size:.66rem; font-weight:850; }
.campaign-level-grid { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:6px; margin:17px 0 14px; }.campaign-level { min-height:62px; padding:6px 3px; border:2px solid #d7e1e6; border-radius:12px; color:#31516b; background:#fff; }.campaign-level:hover:not(:disabled),.campaign-level.selected { border-color:#3683ce; transform:translateY(-2px); box-shadow:0 5px 0 rgba(54,131,206,.16); }.campaign-level.boss { color:#a44b3d; background:#fff3dc; }.campaign-level:disabled { opacity:.45; }.campaign-level strong,.campaign-level span,.campaign-level small { display:block; }.campaign-level strong { font-size:.95rem; }.campaign-level span { overflow:hidden; margin:2px 0; font-size:.5rem; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }.campaign-level small { color:#e3a431; font-size:.56rem; letter-spacing:-.08em; }
.battle-upgrades { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-bottom:14px; }.battle-upgrades button { display:grid; grid-template-columns:1fr auto; gap:3px 7px; padding:9px 11px; border:1px solid #d5e0e6; border-radius:13px; color:#3d5a70; background:#f7faf9; text-align:left; }.battle-upgrades button:hover:not(:disabled) { border-color:#4f91cd; background:#eef8fc; }.battle-upgrades button span { grid-column:1/-1; }.battle-upgrades button strong { font-size:.7rem; }.battle-upgrades button small { color:#b96a34; font-size:.67rem; font-weight:900; text-align:right; }.campaign-actions { display:flex; align-items:center; justify-content:center; gap:14px; }.campaign-actions .battle-copy { margin:0; }
.battle-primary,.battle-secondary { min-height:49px; padding:0 22px; border:0; border-radius:14px; font-weight:950; letter-spacing:.02em; }.battle-primary { color:white; background:linear-gradient(135deg,#438ee0,#265cae); box-shadow:0 6px 0 #194584; }.battle-primary:hover { transform:translateY(-2px); box-shadow:0 8px 0 #194584; }.battle-secondary { margin-top:10px; color:#3e5c78; background:#e8f0f4; }.battle-result-score { margin:17px 0; color:#d2534c; font-size:1.08rem; font-weight:950; }.battle-result-stats { display:flex; justify-content:center; gap:8px; margin:17px 0 22px; }.battle-result-stats span { min-width:100px; padding:10px; border:1px solid #d7e2e8; border-radius:13px; background:#f2f8f9; }.battle-result-stats strong,.battle-result-stats small { display:block; }.battle-result-stats strong { color:#d28b32; font-size:1.08rem; }.battle-result-stats small { margin-top:3px; color:#647a8b; font-size:.62rem; font-weight:850; text-transform:uppercase; }
.battle-controls { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:15px auto 0; width:min(780px,100%); }.battle-choice { --choice:#2d75bb; --choice-soft:#eaf4fc; display:flex; align-items:center; justify-content:space-between; min-height:78px; padding:12px 18px; border:2px solid color-mix(in srgb,var(--choice) 44%,transparent); border-radius:20px; color:#23425f; background:linear-gradient(145deg,#fff,var(--choice-soft)); box-shadow:0 7px 0 color-mix(in srgb,var(--choice) 18%,transparent),0 11px 24px rgba(32,68,95,.1); text-align:left; transition:transform .17s ease,box-shadow .17s ease,border-color .17s ease; }.battle-choice[data-choice-kind="bonus"] { --choice:#2e9b68; --choice-soft:#e7f7ee; }.battle-choice[data-choice-kind="recruit"] { --choice:#2e82cf; --choice-soft:#e5f4fc; }.battle-choice[data-choice-kind="danger"] { --choice:#b5525e; --choice-soft:#fae9e8; }.battle-choice[data-choice-kind="enemy"] { --choice:#a94048; --choice-soft:#f9e5df; }.battle-choice:hover:not(:disabled) { border-color:var(--choice); transform:translateY(-3px); box-shadow:0 10px 0 color-mix(in srgb,var(--choice) 18%,transparent),0 15px 28px rgba(32,68,95,.13); }.battle-choice:active:not(:disabled) { transform:translateY(4px); box-shadow:0 2px 0 color-mix(in srgb,var(--choice) 18%,transparent); }.battle-choice:disabled { opacity:.66; filter:saturate(.75); }.battle-choice span { display:flex; align-items:center; gap:10px; }.battle-choice b { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:white; background:linear-gradient(145deg,color-mix(in srgb,var(--choice) 78%,white),var(--choice)); box-shadow:inset 0 -3px 5px rgba(0,0,0,.16); font-size:.8rem; }.battle-choice strong { color:color-mix(in srgb,var(--choice) 78%,#162b42); font-size:1.5rem; line-height:1; }.battle-choice small { display:block; margin-top:3px; color:#6b8094; font-size:.68rem; font-weight:850; }.battle-choice > i { color:var(--choice); font-style:normal; font-size:1.1rem; font-weight:900; }.battle-help { display:flex; justify-content:space-between; gap:18px; padding:16px 5px 0; color:#597186; font-size:.78rem; line-height:1.55; }.battle-help strong { color:#294861; }.battle-footer { display:flex; justify-content:space-between; gap:12px; padding:28px 5px 0; color:#6c8294; font-size:.75rem; }
@media (max-width:720px) {
  html,body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
  body { min-height:100dvh; }
  .battle-page { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:8px; width:100%; height:100dvh; margin:0; padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  .battle-nav { min-height:50px; padding:5px 7px; border-radius:15px; }
  .battle-brand { gap:7px; font-size:.9rem; }
  .battle-brand-mark { width:36px; height:36px; border-radius:11px; font-size:.95rem; }
  .battle-brand small { display:none; }
  .battle-nav-links { align-items:center; }
  .battle-nav-links a,.battle-nav-button { display:inline-flex; align-items:center; min-height:40px; padding:7px 9px; font-size:.72rem; }
  .battle-nav-links a:not(:first-child),.battle-nav-links .battle-nav-button:first-of-type { display:none; }
  .battle-hero,.battle-help,.battle-footer { display:none; }
  .battle-shell { min-height:0; height:100%; border-width:3px; border-radius:19px; }
  .battle-canvas { width:100%; height:100%; aspect-ratio:auto; }
  .battle-hud-top { padding:8px; }
  .battle-hud-cluster { gap:4px; }
  .battle-stat { min-width:56px; padding:5px 6px; border-width:1px; }
  .battle-stat small { font-size:.42rem; }
  .battle-stat strong { font-size:.72rem; }
  .battle-unit-roster { left:8px; bottom:8px; gap:3px; }
  .battle-unit-roster span { padding:4px 6px; border-width:1px; font-size:.52rem; }
  .battle-message { right:8px; bottom:8px; max-width:50%; padding:6px 8px; border-width:1px; font-size:.59rem; }
  .battle-screen { padding:8px; }
  .battle-screen-card { max-height:calc(100% - 8px); overscroll-behavior:contain; }
  .battle-controls { gap:8px; width:100%; margin:0; }
  .battle-choice { min-height:64px; padding:8px 10px; border-radius:16px; }
  .battle-choice b { width:27px; height:27px; }
  .battle-choice strong { font-size:1.24rem; }
  .battle-choice small { font-size:.56rem; }
  .campaign-heading { display:block; }
  .campaign-wallet { display:flex; justify-content:space-between; width:100%; margin-top:10px; text-align:left; }
  .campaign-level-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .battle-upgrades { grid-template-columns:1fr; }
  .campaign-actions { align-items:stretch; flex-direction:column; gap:8px; }
}
@media (max-width:430px) {
  .battle-screen { padding:5px; }
  .battle-screen-card { padding:14px 10px; border-width:2px; border-radius:17px; }
  .battle-campaign-card h2 { font-size:1.38rem; }
  .battle-kicker { margin-bottom:5px; font-size:.56rem; }
  .battle-copy { margin:5px 0 8px; font-size:.68rem; }
  .campaign-heading .battle-copy { display:none; }
  .campaign-wallet { margin-top:7px; padding:6px 8px; }
  .campaign-level-grid { gap:4px; margin:8px 0 7px; }
  .campaign-level { min-height:43px; padding:3px 2px; border-radius:9px; }
  .campaign-level span { display:none; }
  .battle-upgrades { gap:4px; margin-bottom:7px; }
  .battle-upgrades button { padding:5px 8px; }
  .battle-primary,.battle-secondary { min-height:46px; }
  .battle-choice span { gap:7px; }
  .battle-choice > i { display:none; }
  .battle-result-stats { gap:5px; }
  .battle-result-stats span { min-width:0; flex:1; padding:8px 4px; }
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  html,body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
  body { min-height:100dvh; }
  .battle-page { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:6px; width:100%; height:100dvh; margin:0; padding:max(5px,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)); }
  .battle-nav,.battle-hero,.battle-help,.battle-footer { display:none; }
  .battle-shell { min-height:0; height:100%; border-width:3px; border-radius:17px; }
  .battle-canvas { width:100%; height:100%; aspect-ratio:auto; }
  .battle-controls { gap:8px; width:min(680px,100%); margin:0 auto; }
  .battle-choice { min-height:54px; padding:6px 12px; }
  .battle-screen { padding:6px; }
  .battle-screen-card { max-height:calc(100% - 6px); padding:12px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }