:root {
  --ink: #201e1b;
  --paper: #f2eadb;
  --paper-dark: #d9ceba;
  --red: #e34b43;
  --red-dark: #942e31;
  --blue: #3d83db;
  --blue-dark: #285594;
  --beast: #343533;
  --yellow: #f6c744;
  --shadow: 0 5px 0 rgba(32, 30, 27, .23);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overscroll-behavior: none; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  font-weight: 800;
  overflow-x: hidden;
}
button, select { font: inherit; }
button { color: inherit; }
.app { width: min(1500px, 100%); margin: 0 auto; padding: 12px 16px 18px; }

.topbar {
  min-height: 52px; display: flex; align-items: center; gap: 18px; margin-bottom: 10px;
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: clamp(17px, 2.3vw, 27px); letter-spacing: -.8px; white-space: nowrap; }
.brand b { color: var(--red); }
.brand-bean { width: 30px; height: 35px; display: inline-block; background: var(--yellow); border: 3px solid var(--ink); border-radius: 48% 52% 46% 54% / 56% 43% 57% 44%; transform: rotate(-12deg); box-shadow: inset -4px -4px 0 rgba(0,0,0,.12); }
.arena-picker { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 1px; }
.arena-picker select { appearance: none; border: 3px solid var(--ink); border-radius: 9px; padding: 8px 34px 8px 11px; background: #fff8ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='m2 2 6 6 6-6' fill='none' stroke='%23201e1b' stroke-width='3'/%3E%3C/svg%3E") no-repeat right 9px center; cursor: pointer; }
.unit-count { display: grid; line-height: 1; text-align: right; }
.unit-count span { font-size: 9px; letter-spacing: 1.5px; }
.unit-count strong { font-size: 17px; }
.sound-button { border: 2px solid var(--ink); background: transparent; border-radius: 8px; padding: 7px 9px; font-size: 10px; cursor: pointer; }

.battlefield {
  position: relative; width: 100%; aspect-ratio: 12 / 7; max-height: calc(100vh - 235px); min-height: 320px;
  border: 4px solid var(--ink); border-radius: 18px; overflow: hidden; background: #b9d6a2; box-shadow: var(--shadow);
  touch-action: none;
}
#game { display: block; width: 100%; height: 100%; cursor: crosshair; }
.scoreboard {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 6px 9px; border: 2px solid rgba(32,30,27,.8); border-radius: 10px; background: rgba(255,248,234,.87); box-shadow: 0 3px 0 rgba(32,30,27,.16); font-size: 11px; pointer-events: none; white-space: nowrap;
}
.scoreboard b { font-size: 16px; margin: 0 3px; }
.red-score { color: var(--red-dark); }.blue-score { color: var(--blue-dark); }
.battle-status { font-size: 9px; letter-spacing: 1.2px; color: var(--ink); border-inline: 1px solid rgba(32,30,27,.3); padding-inline: 10px; }
.announcement { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: clamp(50px, 11vw, 150px); color: #fff8ea; text-shadow: 0 7px 0 var(--ink), 5px 0 0 var(--ink), -5px 0 0 var(--ink); opacity: 0; transform: scale(.6) rotate(-3deg); transition: opacity .12s, transform .16s cubic-bezier(.2,1.8,.5,1); }
.announcement.show { opacity: 1; transform: scale(1) rotate(-3deg); }
.arena-loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper-dark); letter-spacing: 2px; }
.arena-loading[hidden] { display: none; }

.controls { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; margin-top: 14px; }
.team-tabs { display: flex; gap: 5px; }
.team-tab, .unit-button, .actions button, .result-card button { border: 3px solid var(--ink); border-radius: 10px; background: #fff8ea; box-shadow: 0 3px 0 rgba(32,30,27,.25); cursor: pointer; transition: transform .08s, box-shadow .08s; }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(32,30,27,.25); }
.team-tab { min-width: 67px; padding: 12px 10px; font-size: 12px; }
.team-tab.red.active { background: var(--red); color: white; }
.team-tab.blue.active { background: var(--blue); color: white; }
.team-tab.beast.active { background: var(--beast); color: white; }
.roster-wrap { min-width: 0; }
.roster { display: flex; gap: 7px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; }
.roster.hidden { display: none; }
.unit-button { flex: 1 0 108px; min-width: 100px; max-width: 150px; min-height: 56px; display: flex; align-items: center; gap: 5px; padding: 4px 7px; text-align: left; }
.unit-button img { width: 38px; height: 42px; object-fit: contain; }
.unit-button span { font-size: 11px; line-height: 1.05; }
.unit-button small { display: block; margin-top: 4px; color: #6f675d; font-size: 8px; text-transform: uppercase; letter-spacing: .5px; }
.unit-button.active { outline: 3px solid var(--yellow); outline-offset: 2px; background: white; }
.actions { display: grid; grid-template-columns: repeat(2, auto); gap: 5px; }
.actions button { padding: 9px 12px; font-size: 10px; }
.actions button:disabled { opacity: .35; cursor: default; }
.actions .fight-button { grid-column: 1 / -1; min-width: 150px; padding: 13px 24px; background: var(--yellow); font-size: 20px; letter-spacing: 1px; }
.setup-hint { text-align: center; margin: 10px 0 0; color: #6f675d; font-size: 10px; letter-spacing: .4px; }

.result-overlay { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgba(32,30,27,.65); backdrop-filter: blur(4px); }
.result-overlay[hidden] { display: none; }
.result-card { width: min(430px, 100%); border: 4px solid var(--ink); border-radius: 20px; padding: 28px; background: #fff8ea; text-align: center; box-shadow: 0 10px 0 rgba(0,0,0,.22); transform: rotate(-1deg); }
.result-card p { margin: 0; font-size: 10px; letter-spacing: 2px; }
.result-card h1 { margin: 12px 0 24px; font-size: clamp(38px, 10vw, 66px); line-height: .9; }
.result-card div { display: flex; justify-content: center; gap: 10px; }
.result-card button { min-width: 125px; padding: 13px; background: white; }
.result-card button:first-child { background: var(--yellow); }

@media (max-width: 800px) {
  .app { padding: 8px 8px 12px; }
  .topbar { gap: 9px; flex-wrap: wrap; }
  .brand { flex: 1; }.brand-bean { width: 24px; height: 29px; }
  .arena-picker { order: 3; width: 100%; margin: 0; }.arena-picker select { flex: 1; min-width: 0; width: 100%; }
  .sound-button { font-size: 0; width: 35px; height: 34px; padding: 0; }.sound-button::after { content: "♪"; font-size: 18px; }.sound-button.muted::after { content: "×"; }
  .battlefield { min-height: 300px; max-height: none; aspect-ratio: 12 / 8; border-radius: 13px; }
  .controls { grid-template-columns: 1fr auto; gap: 7px; }
  .team-tabs { grid-column: 1 / -1; }.team-tab { flex: 1; padding: 9px; }
  .unit-button { flex-basis: 100px; min-width: 98px; }
  .actions { align-self: stretch; }.actions .fight-button { min-width: 112px; padding-inline: 12px; }
  .setup-hint { font-size: 9px; }
}

@media (max-width: 460px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
  .brand { min-width: 0; }
  .brand span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .arena-picker { grid-column: 1 / -1; }
  .battlefield { min-height: 285px; }
  .scoreboard { top: 7px; gap: 4px; }.battle-status { padding-inline: 5px; }
  .unit-button { flex-basis: 90px; min-width: 90px; padding: 3px; }.unit-button img { width: 31px; }
  .actions .fight-button { min-width: 92px; font-size: 17px; }.actions button { padding-inline: 7px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }