:root {
  --bg: #0b131d;
  --panel: #111d29;
  --panel-2: #172533;
  --line: rgba(177, 204, 219, .12);
  --text: #edf5f7;
  --muted: #8da4af;
  --blue: #39aef5;
  --blue-deep: #157dc5;
  --orange: #ff7a36;
  --orange-deep: #c94c21;
  --lime: #a9cf45;
  --danger: #f05750;
  --terrain-a: #34434a;
  --terrain-b: #2e3d44;
  --shadow: 0 20px 54px rgba(0,0,0,.35);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { min-height: 100%; margin: 0; color: var(--text); background: radial-gradient(circle at 50% -15%, #213b4b 0, #0e1a25 38%, #080f17 100%); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overscroll-behavior: none; }
button { font: inherit; touch-action: manipulation; }
button:focus-visible { outline: 3px solid rgba(57,174,245,.6); outline-offset: 2px; }
[hidden] { display: none !important; }

.app { width: min(100%, 720px); min-height: 100dvh; margin: 0 auto; padding: calc(10px + var(--safe-top)) 13px calc(18px + var(--safe-bottom)); }
.screen { animation: screen-in .25s ease both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(5px); } }

.menu-topbar { height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { border: 0; padding: 0; display: flex; align-items: center; gap: 10px; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1; }
.brand b { font-size: 18px; font-weight: 950; letter-spacing: .16em; }
.brand small { margin-top: 5px; color: var(--blue); font-size: 7px; font-weight: 900; letter-spacing: .17em; }
.brand-sigil { width: 38px; height: 38px; position: relative; display: grid; place-items: center; border: 1px solid rgba(57,174,245,.4); background: linear-gradient(145deg, #1f3949, #101e29); clip-path: polygon(50% 0, 95% 24%, 86% 78%, 50% 100%, 14% 78%, 5% 24%); }
.brand-sigil::before, .brand-sigil::after { content: ""; position: absolute; width: 4px; height: 24px; background: var(--blue); transform: rotate(40deg); }
.brand-sigil::after { transform: rotate(-40deg); }
.brand-sigil i { z-index: 2; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--panel); }
.record-pill { min-width: 67px; height: 37px; padding: 5px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: rgba(17,29,41,.78); }
.record-pill small { color: var(--muted); font-size: 6px; font-weight: 900; letter-spacing: .12em; }.record-pill b { color: var(--blue); font-size: 16px; }

.menu-hero { min-height: 475px; position: relative; overflow: hidden; border: 1px solid rgba(135,168,184,.18); border-radius: 20px; background: linear-gradient(150deg, #1a2c39, #0f1c27 70%); box-shadow: var(--shadow); }
.menu-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,15,22,.08) 28%, rgba(7,15,22,.78) 72%, rgba(7,15,22,.98)); pointer-events: none; }
.radar-grid { position: absolute; inset: 0; opacity: .34; background: radial-gradient(circle at 72% 28%, transparent 0 40px, rgba(74,157,192,.18) 41px 42px, transparent 43px 80px, rgba(74,157,192,.13) 81px 82px, transparent 83px), linear-gradient(rgba(115,158,177,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(115,158,177,.06) 1px, transparent 1px); background-size: auto, 39px 39px, 39px 39px; }
.battle-preview { position: absolute; z-index: 1; left: -7%; top: -6px; width: 114%; height: 370px; transform: perspective(700px) rotateX(43deg); transform-origin: 50% 78%; }
.preview-zone circle { fill: rgba(169,207,69,.1); stroke: #a9cf45; stroke-width: 4; stroke-dasharray: 8 6; }.preview-zone text { fill: #cde980; font-size: 25px; font-weight: 900; text-anchor: middle; }
.preview-rock path { fill: #5d696d; stroke: #889398; stroke-width: 3; }
.preview-unit { stroke: rgba(255,255,255,.48); stroke-width: 2; }.preview-unit.blue { fill: #269fe8; }.preview-unit.orange { fill: #ef6b31; }
.preview-shot { fill: none; stroke: #ffdf63; stroke-width: 5; stroke-dasharray: 7 13; animation: shot 1s linear infinite; }
@keyframes shot { to { stroke-dashoffset: -40; } }
.menu-hero-copy { position: absolute; z-index: 4; left: 18px; right: 18px; bottom: 84px; }
.menu-hero-copy > span { color: #7ecbf8; font-size: 8px; font-weight: 900; letter-spacing: .18em; }
.menu-hero-copy h1 { margin: 7px 0 8px; font-size: clamp(29px,8vw,42px); line-height: 1; letter-spacing: -.04em; font-weight: 900; }
.menu-hero-copy p { max-width: 440px; margin: 0; color: #aabcc4; font-size: 11px; line-height: 1.5; }
.mode-strip { position: absolute; z-index: 5; left: 13px; right: 13px; bottom: 12px; height: 58px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; border: 1px solid rgba(143,179,194,.15); border-radius: 11px; background: rgba(7,17,25,.72); backdrop-filter: blur(10px); }
.mode-strip > span { padding: 10px 9px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }.mode-strip > span + span { border-left: 1px solid rgba(143,179,194,.13); }
.mode-strip small { color: #6e8a97; font-size: 6px; font-weight: 900; letter-spacing: .13em; }.mode-strip b { color: #d8e4e8; font-size: 9px; }

.start-button { width: 100%; min-height: 70px; margin-top: 11px; padding: 9px 14px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #258fd2, #1472ba); box-shadow: 0 10px 24px rgba(14,103,164,.3), inset 0 1px 0 rgba(255,255,255,.19); cursor: pointer; }
.start-button > span { display: grid; grid-template-columns: 43px 1fr; grid-template-rows: 1fr 1fr; column-gap: 11px; align-items: center; text-align: left; }.start-button i { grid-row: 1/3; width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 9px; background: rgba(5,46,78,.25); font-style: normal; padding-left: 2px; }.start-button b { align-self: end; font-size: 16px; letter-spacing: .04em; }.start-button small { align-self: start; margin-top: 2px; color: #b8ddf5; font-size: 8px; }.start-button strong { font-size: 29px; font-weight: 300; }
.start-button:active { transform: translateY(2px); }
.rules-glance { margin-top: 9px; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.rules-glance > div { min-height: 69px; padding: 9px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 11px; background: rgba(17,29,41,.72); }
.rules-glance > div > b { color: var(--lime); font-size: 25px; font-weight: 850; }.rules-glance span { display: flex; flex-direction: column; gap: 2px; }.rules-glance strong { font-size: 9px; }.rules-glance small { color: var(--muted); font-size: 7px; line-height: 1.2; }
.how-button { width: 100%; min-height: 49px; margin-top: 9px; padding: 0 13px; display: grid; grid-template-columns: 27px auto 1fr 15px; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 11px; color: #dce8ec; background: rgba(17,29,41,.62); text-align: left; cursor: pointer; }.how-button > span { color: var(--blue); font-size: 19px; }.how-button b { font-size: 10px; }.how-button small { color: var(--muted); font-size: 8px; }.how-button i { color: #6b8692; font-style: normal; font-size: 20px; }

.battle-header { height: 50px; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 10px; }
.battle-header > div { text-align: center; }.battle-header span { color: var(--blue); font-size: 7px; font-weight: 900; letter-spacing: .15em; }.battle-header h1 { margin: 2px 0 0; color: #dbe8ec; font-size: 15px; font-weight: 700; }.battle-header h1 b { color: #fff; }
.icon-button { width: 39px; height: 39px; border: 1px solid var(--line); border-radius: 9px; color: #d9e6ea; background: var(--panel); cursor: pointer; font-size: 23px; }.restart-button { font-size: 18px; }
.scoreboard { min-height: 76px; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); box-shadow: 0 9px 25px rgba(0,0,0,.18); }
.score-side { padding: 10px; display: flex; align-items: center; gap: 9px; }.score-ai { justify-content: flex-end; text-align: right; }.score-side > span:not(.team-mark) { display: flex; flex-direction: column; gap: 2px; }.score-side small { color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .12em; }.score-side b { font-size: 24px; line-height: 1; }.score-player b { color: var(--blue); }.score-ai b { color: var(--orange); }
.team-mark { width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid currentColor; transform: rotate(45deg); }.team-mark i { width: 10px; height: 10px; background: currentColor; }.score-player .team-mark { color: var(--blue); }.score-ai .team-mark { color: var(--orange); }
.score-center { padding: 8px 6px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }.score-center > small { color: #8098a3; font-size: 6px; font-weight: 900; letter-spacing: .13em; }.score-center > span { color: #657e89; font-size: 6px; }.zone-row { display: flex; gap: 5px; }.zone-row i { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #708790; border-radius: 50%; color: #9bb0b8; background: #0c1721; font-style: normal; font-size: 8px; font-weight: 900; }.zone-row i.player { color: #fff; border-color: var(--blue); background: var(--blue-deep); }.zone-row i.ai { color: #fff; border-color: var(--orange); background: var(--orange-deep); }
.turn-banner { min-height: 35px; margin: 8px 0; padding: 0 10px; display: flex; align-items: center; gap: 7px; border-left: 3px solid var(--blue); color: #dce9ed; background: linear-gradient(90deg, rgba(37,139,204,.17), transparent); font-size: 9px; }.turn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(57,174,245,.1); }.orders { margin-left: auto; color: #86a0ab; font-size: 7px; letter-spacing: .1em; }.turn-banner.ai-turn { border-color: var(--orange); background: linear-gradient(90deg, rgba(255,122,54,.14), transparent); }.ai-turn .turn-dot { background: var(--orange); box-shadow: 0 0 0 4px rgba(255,122,54,.1); }
.coach { width: 100%; min-height: 49px; margin-bottom: 8px; padding: 7px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(57,174,245,.22); border-radius: 10px; color: #b9ccd4; background: #132735; text-align: left; cursor: pointer; font-size: 9px; line-height: 1.35; }.coach-number { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--blue); border-radius: 50%; color: var(--blue); font-size: 12px; font-weight: 900; }.coach b { color: #fff; }.coach > i { margin-left: auto; color: #64808c; font-style: normal; font-size: 17px; }

.board-shell { --coord: 17px; width: 100%; aspect-ratio: 1; position: relative; padding: var(--coord) 0 0 var(--coord); }
.coordinate { position: absolute; z-index: 3; display: grid; color: #607984; font-size: 7px; font-weight: 800; }
.coordinate.top { left: var(--coord); right: 0; top: 0; height: var(--coord); grid-template-columns: repeat(7,1fr); align-items: center; text-align: center; }.coordinate.left { left: 0; top: var(--coord); bottom: 0; width: var(--coord); grid-template-rows: repeat(7,1fr); align-items: center; text-align: center; }
.battle-grid { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(7,1fr); grid-template-rows: repeat(7,1fr); overflow: hidden; border: 2px solid #63727b; border-radius: 7px; background: #2d3d44; box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.04); user-select: none; }
.cell { min-width: 0; min-height: 0; position: relative; border: 0; border-right: 1px solid rgba(171,193,199,.12); border-bottom: 1px solid rgba(171,193,199,.12); background: var(--cell); cursor: pointer; }
.cell::before { content: ""; position: absolute; inset: 0; opacity: .35; background: repeating-linear-gradient(145deg, transparent 0 9px, rgba(255,255,255,.025) 9px 10px); pointer-events: none; }.cell:nth-child(odd) { --cell: var(--terrain-a); }.cell:nth-child(even) { --cell: var(--terrain-b); }.cell:hover { filter: brightness(1.05); }
.cell.zone-cell { background: radial-gradient(circle, rgba(169,207,69,.17), transparent 63%), var(--cell); }.zone-mark { position: absolute; z-index: 1; inset: 14%; display: grid; place-items: center; border: 2px dashed rgba(183,219,92,.55); border-radius: 50%; color: rgba(215,238,149,.65); font-size: clamp(9px,3vw,16px); font-weight: 900; }.zone-mark.player { border-style: solid; border-color: var(--blue); color: #d4efff; background: rgba(24,136,204,.14); }.zone-mark.ai { border-style: solid; border-color: var(--orange); color: #ffddcc; background: rgba(216,81,28,.14); }
.rock { position: absolute; z-index: 2; left: 16%; top: 19%; width: 68%; height: 61%; background: linear-gradient(145deg,#788286,#505d62); clip-path: polygon(12% 51%,28% 13%,64% 2%,93% 35%,79% 79%,41% 96%,5% 76%); filter: drop-shadow(4px 6px 1px rgba(0,0,0,.25)); }.rock::after { content: ""; position: absolute; left: 27%; top: 18%; width: 30%; height: 20%; background: rgba(255,255,255,.13); clip-path: polygon(0 60%,50% 0,100% 45%,74% 100%,20% 90%); }
.cell.legal-move::after { content: ""; position: absolute; z-index: 7; left: 50%; top: 50%; width: 16px; height: 16px; transform: translate(-50%,-50%); border: 2px solid #87d7ff; border-radius: 50%; background: rgba(57,174,245,.4); box-shadow: 0 0 0 7px rgba(57,174,245,.1); animation: move-pulse 1.2s ease-in-out infinite; }.cell.legal-move { box-shadow: inset 0 0 0 2px rgba(57,174,245,.45); }
@keyframes move-pulse { 50% { transform: translate(-50%,-50%) scale(.74); opacity: .7; } }
.cell.legal-target { box-shadow: inset 0 0 0 3px var(--danger); }.cell.legal-target::after { content: ""; position: absolute; z-index: 8; inset: 9%; border: 2px solid rgba(255,95,79,.9); border-radius: 50%; background: linear-gradient(90deg,transparent 47%,#ff6256 48% 52%,transparent 53%),linear-gradient(transparent 47%,#ff6256 48% 52%,transparent 53%); animation: target-spin 5s linear infinite; pointer-events: none; }
@keyframes target-spin { to { transform: rotate(360deg); } }
.cell.tutorial-target { animation: tutorial-cell 1.2s ease-in-out infinite; }
@keyframes tutorial-cell { 50% { box-shadow: inset 0 0 0 4px rgba(255,223,94,.8); } }

.unit-piece { position: absolute; z-index: 5; inset: 6%; color: var(--team); filter: drop-shadow(2px 4px 2px rgba(0,0,0,.38)); transition: transform .18s ease; }
.unit-piece.player { --team: var(--blue); --team-dark: #0d629e; }.unit-piece.ai { --team: var(--orange); --team-dark: #a53a18; transform: rotate(180deg); }
.unit-piece.selected { filter: drop-shadow(0 0 7px rgba(111,214,255,.95)); }.unit-piece.selected::before { content: ""; position: absolute; inset: -7%; border: 2px solid #a8e3ff; border-radius: 8px; animation: selected-unit 1s ease-in-out infinite; }
@keyframes selected-unit { 50% { opacity: .35; transform: scale(1.08); } }
.vehicle { position: absolute; left: 10%; right: 10%; top: 22%; bottom: 22%; border: 2px solid rgba(255,255,255,.35); background: var(--team); }
.vehicle::before, .vehicle::after { content: ""; position: absolute; left: -6%; right: -6%; height: 18%; border-radius: 3px; background: var(--team-dark); }.vehicle::before { top: -8%; }.vehicle::after { bottom: -8%; }
.turret { position: absolute; z-index: 2; left: 33%; top: 31%; width: 34%; height: 31%; border: 2px solid rgba(255,255,255,.35); border-radius: 5px; background: var(--team-dark); }.barrel { position: absolute; z-index: 1; left: 50%; top: -27%; width: 8%; height: 43%; transform: translateX(-50%); border-radius: 4px; background: var(--team-dark); }
.unit-piece.scout .vehicle { left: 16%; right: 16%; top: 17%; bottom: 17%; clip-path: polygon(50% 0,100% 74%,74% 100%,26% 100%,0 74%); }.unit-piece.scout .turret { left: 38%; top: 39%; width: 24%; height: 24%; border-radius: 50%; }.unit-piece.scout .barrel { height: 36%; top: -20%; }
.unit-piece.artillery .vehicle { left: 14%; right: 14%; }.unit-piece.artillery .turret { left: 35%; width: 30%; }.unit-piece.artillery .barrel { top: -57%; height: 74%; width: 7%; }
.unit-label { position: absolute; z-index: 4; left: 3px; top: 2px; width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.6); border-radius: 3px; color: #fff; background: var(--team-dark); font-size: clamp(6px,2vw,9px); font-weight: 900; }.hp-bar { position: absolute; z-index: 4; left: 8%; right: 8%; bottom: -1px; display: flex; justify-content: center; gap: 2px; }.hp-bar i { flex: 1; max-width: 9px; height: 4px; border-radius: 1px; background: rgba(255,255,255,.2); }.hp-bar i.on { background: #d9f28f; }.unit-piece.ai .unit-label,.unit-piece.ai .hp-bar { transform: rotate(180deg); }
.unit-piece.has-moved { opacity: .77; }.unit-piece.has-fired .barrel::after { content: ""; position: absolute; left: 50%; top: -8px; width: 5px; height: 5px; transform: translateX(-50%); border-radius: 50%; background: #ffc75b; }
.cell.last-action { animation: action-flash .55s ease; }@keyframes action-flash { 50% { box-shadow: inset 0 0 0 5px rgba(255,223,91,.75); } }

.status-line { min-height: 35px; padding: 7px 4px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #859da7; text-align: center; font-size: 8px; }.status-line > span { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(57,174,245,.1); }.status-line p { margin: 0; }.status-line.error { color: #ed8f88; }.status-line.error > span { background: var(--danger); box-shadow: 0 0 0 4px rgba(240,87,80,.1); }.status-line.good { color: #b8d77a; }.status-line.good > span { background: var(--lime); }
.unit-panel { min-height: 65px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); overflow: hidden; }.unit-panel-empty { height: 63px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #5f7985; }.unit-panel-empty > span { color: #496674; }.unit-panel-empty p { margin: 0; display: flex; flex-direction: column; gap: 2px; }.unit-panel-empty b { color: #8098a3; font-size: 9px; }.unit-panel-empty small { font-size: 7px; }
.unit-panel-data { min-height: 63px; padding: 8px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; }.panel-unit-icon { width: 42px; height: 42px; position: relative; border: 1px solid #358fbd; border-radius: 8px; background: #19384a; }.panel-unit-icon::before { content: ""; position: absolute; left: 8px; right: 8px; top: 14px; bottom: 8px; border: 2px solid #94d9ff; background: var(--blue-deep); }.panel-unit-icon::after { content: ""; position: absolute; left: 18px; top: 5px; width: 6px; height: 17px; background: #94d9ff; }.panel-unit-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }.panel-unit-copy span { color: var(--blue); font-size: 6px; font-weight: 900; letter-spacing: .13em; }.panel-unit-copy b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }.panel-unit-copy small { color: var(--muted); font-size: 7px; }.panel-stats { display: flex; align-items: center; }.panel-stats > span { min-width: 42px; display: flex; flex-direction: column; align-items: center; gap: 2px; }.panel-stats > span + span { border-left: 1px solid var(--line); }.panel-stats small { color: #738d98; font-size: 5px; font-weight: 900; }.panel-stats b { font-size: 11px; }
.battle-controls { margin-top: 8px; display: grid; grid-template-columns: 58px 1fr 58px; gap: 7px; }.battle-controls > button { min-height: 53px; border: 1px solid var(--line); border-radius: 10px; color: #8ba3ad; background: var(--panel); cursor: pointer; }.battle-controls > button:not(.end-turn) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }.battle-controls > button > span { font-size: 18px; }.battle-controls > button > b { font-size: 7px; }.battle-controls button:disabled { opacity: .33; cursor: default; }
.battle-controls .end-turn { padding: 0 12px; display: flex; align-items: center; justify-content: space-between; color: #fff; border-color: #258fd1; background: linear-gradient(135deg,#238dd0,#156eb2); text-align: left; }.end-turn > span { display: flex; flex-direction: column; gap: 2px; }.end-turn b { font-size: 10px; }.end-turn small { color: #b9dcf2; font-size: 7px; }.end-turn > i { font-style: normal; font-size: 23px; }

.backdrop { position: fixed; z-index: 50; inset: 0; background: rgba(2,7,11,.74); backdrop-filter: blur(6px); animation: fade .2s ease both; }@keyframes fade { from { opacity: 0; } }
.sheet { position: fixed; z-index: 51; left: 50%; bottom: 0; width: min(100%,720px); max-height: min(88dvh,800px); padding: 9px 16px calc(18px + var(--safe-bottom)); overflow-y: auto; transform: translateX(-50%); border: 1px solid rgba(148,179,193,.14); border-radius: 20px 20px 0 0; color: var(--text); background: #111d29; box-shadow: 0 -22px 60px rgba(0,0,0,.45); animation: sheet-up .25s cubic-bezier(.2,.85,.25,1) both; }@keyframes sheet-up { from { transform: translate(-50%,100%); } }
.sheet-handle { width: 41px; height: 4px; margin: 0 auto 13px; border-radius: 99px; background: #415766; }.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }.sheet-head span,.result-kicker { color: var(--blue); font-size: 7px; font-weight: 900; letter-spacing: .16em; }.sheet-head h2 { margin: 3px 0 0; font-size: 22px; }.sheet-head > button { width: 37px; height: 37px; border: 1px solid var(--line); border-radius: 8px; color: #aabec6; background: #182835; cursor: pointer; font-size: 20px; }
.rule-list { display: grid; gap: 8px; }.rule-list > div { min-height: 72px; padding: 10px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 10px; background: #152431; }.rule-list > div > i { flex: 0 0 auto; width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--blue); border-radius: 5px; color: var(--blue); font-style: normal; font-size: 9px; font-weight: 900; }.rule-list span { display: flex; flex-direction: column; gap: 3px; }.rule-list b { font-size: 10px; }.rule-list small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.unit-rules { margin: 9px 0 12px; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.mini-unit { min-height: 91px; padding: 8px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; background: #0d1822; text-align: center; }.mini-unit > i { width: 35px; height: 26px; position: relative; border: 2px solid #9ad9fa; background: var(--blue-deep); }.mini-unit > i::after { content: ""; position: absolute; left: 50%; top: -14px; width: 5px; height: 20px; transform: translateX(-50%); background: #9ad9fa; }.mini-unit.scout > i { clip-path: polygon(50% 0,100% 100%,0 100%); }.mini-unit.artillery > i::after { top: -23px; height: 29px; }.mini-unit span { display: flex; flex-direction: column; gap: 3px; }.mini-unit b { font-size: 8px; }.mini-unit small { color: var(--muted); font-size: 6px; }
.primary-button,.secondary-button,.danger-button { width: 100%; min-height: 49px; border-radius: 10px; font-size: 9px; font-weight: 900; letter-spacing: .04em; cursor: pointer; }.primary-button { border: 0; color: #fff; background: linear-gradient(135deg,#278fd0,#156eb1); }.secondary-button { margin-top: 7px; border: 1px solid var(--line); color: #b7c9d0; background: #172633; }.danger-button { border: 0; color: #fff; background: linear-gradient(135deg,#e95e50,#b93a37); }.exit-sheet p { margin: 0 0 14px; color: var(--muted); font-size: 10px; }
.result-sheet { text-align: center; }.result-emblem { width: 84px; height: 84px; position: relative; margin: 3px auto 14px; display: grid; place-items: center; border: 1px solid var(--blue); background: linear-gradient(145deg,#1c3d51,#102330); clip-path: polygon(50% 0,92% 22%,84% 76%,50% 100%,16% 76%,8% 22%); }.result-emblem::before,.result-emblem::after { content: ""; position: absolute; width: 6px; height: 54px; background: var(--blue); transform: rotate(40deg); }.result-emblem::after { transform: rotate(-40deg); }.result-emblem > i { z-index: 2; width: 17px; height: 17px; border: 3px solid #fff; border-radius: 50%; background: #18384a; }.result-sheet.loss .result-emblem { border-color: var(--orange); }.result-sheet.loss .result-emblem::before,.result-sheet.loss .result-emblem::after { background: var(--orange); }.result-sheet h2 { margin: 6px 0; font-size: 28px; }.result-sheet > p { margin: 0 auto 14px; max-width: 390px; color: var(--muted); font-size: 9px; line-height: 1.45; }.result-stats { margin-bottom: 13px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 10px; background: #0d1822; }.result-stats > div { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }.result-stats > div + div { border-left: 1px solid var(--line); }.result-stats small { color: #728b96; font-size: 6px; font-weight: 900; letter-spacing: .12em; }.result-stats b { font-size: 16px; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: calc(18px + var(--safe-bottom)); max-width: calc(100% - 28px); transform: translateX(-50%); padding: 10px 14px; border: 1px solid rgba(105,176,210,.24); border-radius: 8px; color: #e8f3f6; background: rgba(17,36,49,.96); box-shadow: 0 10px 28px rgba(0,0,0,.35); font-size: 8px; text-align: center; animation: toast-in .2s ease both; }@keyframes toast-in { from { opacity: 0; transform: translate(-50%,8px); } }

@media (min-width: 620px) {
  .app { padding-left: 24px; padding-right: 24px; }.menu-hero { min-height: 500px; }.battle-preview { height: 410px; }.menu-hero-copy h1 { font-size: 43px; }
  .board-shell { width: min(63vh,590px); margin: 0 auto; }.scoreboard,.turn-banner,.coach,.status-line,.unit-panel,.battle-controls { width: min(63vh,590px); margin-left:auto; margin-right:auto; }.battle-controls { margin-top:8px; }
}
@media (max-width: 360px) {
  .app { padding-left: 8px; padding-right: 8px; }.menu-hero { min-height: 445px; }.battle-preview { height: 345px; }.menu-hero-copy h1 { font-size: 28px; }.mode-strip b { font-size: 8px; }.rules-glance > div { padding: 6px; gap: 5px; }.rules-glance > div > b { font-size: 21px; }.unit-panel-data { grid-template-columns: 40px 1fr auto; }.panel-stats > span { min-width: 37px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } }