:root {
  color-scheme: dark;
  --ink: #eef8f5;
  --muted: #88a9a3;
  --panel: #102321;
  --line: rgba(146, 220, 205, 0.22);
  --cyan: #65e6d0;
  --coral: #ff806d;
  --gold: #ffd166;
}

* { box-sizing: border-box; }

dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: clamp(20px, 5vw, 36px); border: 1px solid #728458; border-radius: 16px; color: var(--ink); background: #19291d; box-shadow: 0 25px 100px #0009; }
dialog::backdrop { background: rgba(3, 12, 6, 0.8); backdrop-filter: blur(6px); }
#menu-title, #character-title { margin: 12px 0; font-size: 30px; }
.menu-description { color: #b3c3ac; line-height: 1.5; }
.difficulty-options { display: grid; gap: 12px; margin-top: 24px; }
.difficulty-options button { padding: 16px; text-align: left; border: 1px solid #536349; border-radius: 9px; background: #243724; color: var(--ink); cursor: pointer; }
.difficulty-options strong { display: block; font: bold 20px Georgia, serif; margin-bottom: 7px; }
.difficulty-options span { color: #b3c3ac; font: 13px/1.5 sans-serif; }
.difficulty-options button:hover { background: #354c2b; border-color: #c4ba7a; }
.difficulty-options button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#difficulty-label { color: var(--gold); margin-left: 10px; white-space: nowrap; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  background:
    linear-gradient(rgba(7, 18, 11, 0.25), rgba(7, 18, 11, 0.65)),
    url('forest.svg') center / cover fixed,
    #142319;
}

.game-shell {
  width: min(1060px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 24px;
}

.topbar, .status-row, .footer-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar { gap: 24px; margin-bottom: 22px; }
.eyebrow { margin: 0 0 5px; color: var(--cyan); font: 700 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0.18em; }
h1 { margin: 0; font-size: clamp(28px, 4vw, 46px); font-weight: 700; letter-spacing: 0; }
.scoreboard { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.reset-button { border: 1px solid var(--line); border-radius: 5px; padding: 11px 14px; color: var(--ink); background: rgba(16, 35, 33, 0.8); cursor: pointer; font: 600 12px ui-monospace, SFMono-Regular, Consolas, monospace; transition: border-color 160ms ease, background 160ms ease; }
.reset-button:hover, .reset-button:focus-visible { border-color: var(--cyan); background: #173a35; outline: none; }

.arena-wrap { border: 1px solid rgba(175, 166, 115, 0.3); border-radius: 8px; padding: 12px; background: rgba(24, 32, 20, 0.9); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3); }
.status-row { padding: 0 4px 11px; color: var(--muted); font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }
.controls-hint { color: #5e817a; }
#game { display: block; width: 100%; aspect-ratio: 1.72; border-radius: 4px; background: #0b2824; touch-action: none; }
.footer-note { justify-content: flex-end; gap: 8px; padding: 14px 2px 0; color: var(--muted); font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; }
.player-dot, .ai-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.player-dot { margin-left: 12px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.ai-dot { background: var(--coral); box-shadow: 0 0 8px var(--coral); }

/* Use the available browser viewport in either phone orientation. */
@media (max-width: 620px), (max-height: 600px) and (pointer: coarse), (max-width: 1024px) and (pointer: coarse) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body { min-width: 0; min-height: 0; }
  .game-shell {
    width: 100%; height: 100vh; height: 100dvh; margin: 0;
    padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    display: flex; flex-direction: column; gap: 4px;
  }
  .topbar { flex: none; gap: 8px; margin: 0; }
  .topbar .eyebrow { display: none; }
  h1 { font-size: clamp(16px, 4vw, 22px); }
  .topbar .reset-button { margin-left: auto; min-height: 44px; padding: 8px; white-space: nowrap; font-size: 10px; }
  .arena-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 4px; }
  .status-row { flex: none; gap: 6px; padding: 5px 6px; font-size: 10px; }
  #status { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  #difficulty-label { margin-left: auto; }
  .controls-hint { display: none; }
  #game { flex: 1; min-height: 0; height: 0; aspect-ratio: auto; border-radius: 0; }
  #ability-status { flex: none; margin: 0; font: 10px/1.3 sans-serif; }
  .footer-note { flex: none; justify-content: center; padding: 0; font-size: 9px; line-height: 1.2; }
  .footer-note a { margin-right: 0 !important; }
  .footer-note .player-dot, .footer-note .ai-dot, .footer-note .legend { display: none; }
}

#character-back { margin-top: 18px; }

.primary-button { display: block; width: 100%; margin-top: 20px; padding: 15px; border: 0; border-radius: 8px; background: var(--cyan); color: #102321; font-weight: bold; cursor: pointer; }
.leaderboard { width: 100%; border-collapse: collapse; margin: 24px 0; font: 14px/1.5 sans-serif; }
.leaderboard th, .leaderboard td { text-align: left; padding: 12px 5px; border-bottom: 1px solid var(--line); }
.leaderboard td:first-child { overflow-wrap: anywhere; max-width: 160px; }
.leaderboard td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
#player-name { display: block; width: 100%; margin-top: 10px; padding: 12px; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--muted); border-radius: 6px; }
#timer { color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }