:root {color-scheme: dark; font-family: system-ui, -apple-system, sans-serif; background: #101c27; color: #f0f5f4; --mint: #a3ecd4; --ink: #101c27;}
* {box-sizing: border-box;}
html, body {margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none;}
button, summary {font: inherit; -webkit-tap-highlight-color: transparent;}
button {cursor: pointer; border: 0; color: inherit; touch-action: none; -webkit-user-select: none; user-select: none;}
button:disabled {cursor: default; opacity: .45;}
button:focus-visible, summary:focus-visible {outline: 3px solid #fff4be; outline-offset: 3px;}
[hidden] {display: none !important;}
/* The safe-area inset belongs to the whole app, not to screenshot pixels. */
#app {height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: max(4px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); position: relative;}
.topbar {flex: 0 0 44px; display: flex; align-items: center; gap: 8px; min-width: 0;}
.wordmark {font-size: 11px; font-weight: 780; letter-spacing: .6px; display: flex; gap: 6px; align-items: center; min-width: 0; flex: 1;}
.wordmark > span:last-child {display: flex; align-items: baseline; gap: 6px; white-space: nowrap;}
.wordmark small {font-size: 9px; font-weight: 600; color: #a0b9c3; letter-spacing: 0;}
.mark {width: 14px; height: 14px; background: var(--mint); border-radius: 5px; transform: rotate(-10deg); flex-shrink: 0;}
.health-group {display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; color: #b8efdf; white-space: nowrap;}
#enemy-health {color: #edb69f;} #companion-health {color: #d1bbf4;}
.menu {display: flex; gap: 6px; flex-shrink: 0;}
.small-button {min-height: 44px; min-width: 54px; padding: 6px 9px; border: 1px solid #47606d; background: #233541; border-radius: 10px; font-size: 12px;}
/* A dedicated dock keeps fingers/control elements out of the battlefield. */
#stage {position: relative; flex: 1; min-height: 0; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 4px; overflow: hidden;}
#battlefield {position: relative; min-width: 0; min-height: 0; overflow: hidden;}
#arena {position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none;}
#controls {position: relative; pointer-events: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 4px; min-width: 0;}
.move-wrap {display: flex; align-items: center; flex-shrink: 0; pointer-events: auto;}
#joystick {width: 88px; height: 88px; border-radius: 50%; border: 2px solid #567681; background: #192f3b; display: grid; place-items: center; position: relative; touch-action: none; -webkit-user-select: none; user-select: none;}
#joystick[aria-disabled="true"] {opacity: .4;}
#thumb {width: 40px; height: 40px; border-radius: 50%; background: #a2cfce; border: 3px solid #d1e9e1; box-shadow: 0 2px 0 #0b1826; position: absolute;}
.crosshairs {width: 76%; height: 1px; background: #40606e; position: absolute;}
.crosshairs::after {content: ''; position: absolute; left: 50%; height: 58px; width: 1px; background: #40606e; transform: translateY(-50%);}
.control-label {position: absolute; bottom: 4px; font-size: 8px; letter-spacing: 1px; font-weight: 700; color: #c0d5db; pointer-events: none;}
.actions {display: flex; align-items: center; gap: 8px; pointer-events: auto; flex-shrink: 0;}
.action {border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; letter-spacing: .4px; border: 2px solid #8cacaf; box-shadow: inset 0 -3px 0 #09162155; min-width: 72px; min-height: 72px; padding: 6px;}
.action small {font-size: 10px; font-weight: 650; margin-top: 4px; letter-spacing: 0;}
.dodge {background: #2b4859; color: #dfecf0;}
.dodge.cooling {background: #263846; border-color: #66808b;}
.power {background: #d9a762; color: #38280e; border-color: #ffe0ac;}
.power.cooling {background: #755c38; color: #fff0d6; border-color: #bda784;}
.attack {background: #a3ecd4; color: #163634; min-width: 84px; min-height: 80px; border-color: #d5fae9;}
.action.held, .action:active {box-shadow: inset 0 3px 0 #09162177; filter: brightness(.9);}
.portrait-note {display: none;}
#overlay {position: absolute; inset: 0; background: #08121ddd; display: flex; justify-content: center; align-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); overflow-y: auto; z-index: 10;}
.card {max-width: 460px; width: 100%; background: #1e3443; border: 1px solid #57717d; border-radius: 24px; padding: 28px; box-shadow: 0 18px 50px #0006; max-height: 100%; overflow: auto;}
.eyebrow {font-size: 10px; color: #a3ecd4; font-weight: 750; letter-spacing: 1.9px;}
h1 {font-size: 35px; letter-spacing: -1.3px; line-height: 1.05; margin: 16px 0;}
p {font-size: 14px; color: #d0dee4; line-height: 1.55; margin: 12px 0 18px;}
#primary-action {background: #a3ecd4; color: #153430; width: 100%; min-height: 52px; border-radius: 12px; font-size: 15px; font-weight: 780;}
details {margin: 18px 0 0; font-size: 12px; color: #d0e0e4;}
summary {cursor: pointer; min-height: 32px; padding: 7px 0;}
details p {font-size: 12px;}
.card-note {display: block; margin-top: 13px; font-size: 10px; line-height: 1.4; color: #a2b6c0;}
@media (max-height: 500px) and (orientation: landscape) {
  #joystick {width: 76px; height: 76px;} #thumb {width: 34px; height: 34px;}
  .crosshairs::after {height: 50px;}
  .action {min-height: 64px; min-width: 64px; border-radius: 16px;}
  .attack {min-height: 72px; min-width: 80px;}
  .card {max-width: 520px; padding: 18px 24px; border-radius: 19px;}
  h1 {font-size: 29px; margin: 9px 0;} h1 br {display: none;} .card p {font-size: 12px; margin: 8px 0 12px;}
  #primary-action {min-height: 44px;} details {margin-top: 7px;} .card-note {margin-top: 6px;}
}
@media (orientation: portrait), (max-width: 540px) {
  .topbar {flex-basis: auto; flex-wrap: wrap; gap: 2px 6px; padding-bottom: 2px;}
  .wordmark {order: 0;} .menu {order: 1;}
  .health-group {order: 2; width: 100%; justify-content: space-between; min-height: 22px; gap: 4px;}
}
@media (orientation: portrait) {
  .portrait-note {display: block; padding: 2px 0; text-align: center; font-size: 10px; color: #c5d6dc;}
}
@media (max-width: 420px) {
  #controls {padding: 0;} .actions {gap: 6px;}
  #joystick {width: 76px; height: 76px;} #thumb {width: 34px; height: 34px;}
  .crosshairs::after {height: 50px;}
  .action {min-width: 64px; min-height: 64px;} .attack {min-width: 72px; min-height: 72px;}
  .mark {display: none;} .wordmark > span:last-child {gap: 4px;}
}
@media (prefers-reduced-motion: reduce) {*, *::before, *::after {scroll-behavior: auto !important;}}

.privacy-link {display: inline-block; min-height: 44px; padding: 12px 0; color: #b8efdf; text-underline-offset: 3px;}
.privacy-link:focus-visible {outline: 3px solid #fff4be; outline-offset: 3px;}