/* Rye (Google Fonts, OFL), servida localmente para não depender da rede. */
@font-face {
  font-family: "Rye";
  font-display: swap;
  src: url("/assets/fonts/rye-latin.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --color-cream: #fbe6b4;
  --color-gold: #f5c04a;
  --color-gold-dark: #8a5a14;
  --color-wood-dark: #3b2208;
  --color-navy: #1c2a3d;
  --color-row: rgba(12, 22, 36, 0.72);
  --color-row-you: rgba(122, 104, 58, 0.72);
  --color-text: #f2f5fa;
  --color-muted: #b9c4d3;
  --color-time-up: #d9f0a3;
  --color-defeat: #ffb39c;
  --color-focus: #ffe38a;
  --font-ui: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-display: "Arial Black", "Trebuchet MS", system-ui, sans-serif;
  --font-carved: "Rye", Georgia, serif;
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  color: var(--color-text);
  font-family: var(--font-ui);
  background: #0b5f7a url("/assets/ui_scene_background.png") center / cover
    no-repeat;
}

/* A aplicação ocupa exatamente a viewport, sem rolagem de página. */
#app {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Scene ---------- */
.scene {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  padding: clamp(8px, 2vh, 24px) 16px;
  align-items: center;
  justify-content: center;
}

/* Mesmo lugar e tamanho no menu e na partida: canto superior esquerdo. */
.scene__logo {
  position: absolute;
  top: 16px;
  left: 24px;
  width: 124px;
  pointer-events: none;
}

/* ---------- Panel (9-slice do panel_menu.png) ---------- */
.panel {
  display: flex;
  width: min(100%, 480px);
  max-height: 100%;
  border-style: solid;
  border-width: 40px 32px;
  border-image-source: url("/assets/png/retina/ui/menu/panel_menu.png");
  border-image-slice: 80 64 fill;
  border-image-repeat: stretch;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
}

.panel--wide {
  width: min(100%, 960px);
}

.panel__content {
  display: flex;
  width: 100%;
  min-height: 0;
  padding: clamp(4px, 1.5vh, 16px) 12px;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.6vh, 16px);
  text-align: center;
  /* Só em telas muito baixas: rola dentro do painel, nunca a página. */
  overflow-y: auto;
}

.panel__title {
  margin: 0;
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.5vh, 2.5rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow:
    0 3px 0 var(--color-wood-dark),
    0 0 12px rgba(0, 0, 0, 0.5);
}

/* ---------- Menu buttons ---------- */
.menu-button {
  display: inline-flex;
  flex-shrink: 0;
  width: min(256px, 28vh);
  max-width: 100%;
  aspect-ratio: 256 / 88;
  padding: 0 32px 4px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent center / 100% 100% no-repeat;
  color: var(--color-wood-dark);
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.6vh, 1.5rem);
  font-weight: 900;
  white-space: nowrap;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 180ms var(--ease-pop),
    filter 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.menu-button--sm {
  width: min(216px, 24vh);
  font-size: clamp(0.75rem, 1.7vh, 1rem);
}

.menu-button--primary {
  background-image: image-set(
    url("/assets/png/default/ui/menu/button_primary_normal.png") 1x,
    url("/assets/png/retina/ui/menu/button_primary_normal.png") 2x
  );
}

.menu-button--primary:hover:not(:disabled) {
  background-image: image-set(
    url("/assets/png/default/ui/menu/button_primary_hover.png") 1x,
    url("/assets/png/retina/ui/menu/button_primary_hover.png") 2x
  );
}

.menu-button--primary:active:not(:disabled) {
  background-image: image-set(
    url("/assets/png/default/ui/menu/button_primary_pressed.png") 1x,
    url("/assets/png/retina/ui/menu/button_primary_pressed.png") 2x
  );
}

.menu-button--primary:disabled {
  background-image: image-set(
    url("/assets/png/default/ui/menu/button_primary_disabled.png") 1x,
    url("/assets/png/retina/ui/menu/button_primary_disabled.png") 2x
  );
  cursor: not-allowed;
}

.menu-button--secondary {
  color: var(--color-text);
  background-image: image-set(
    url("/assets/png/default/ui/menu/button_secondary_normal.png") 1x,
    url("/assets/png/retina/ui/menu/button_secondary_normal.png") 2x
  );
}

.menu-button--secondary:hover:not(:disabled) {
  filter: brightness(1.15);
}

.menu-button--secondary:active:not(:disabled) {
  background-image: image-set(
    url("/assets/png/default/ui/menu/button_secondary_pressed.png") 1x,
    url("/assets/png/retina/ui/menu/button_secondary_pressed.png") 2x
  );
}

/* Animação de hover: o botão expande com um leve "pop". */
.menu-button:hover:not(:disabled),
.menu-button:focus-visible {
  transform: scale(1.08);
}

.menu-button:active:not(:disabled) {
  transform: scale(0.97);
}

/* ---------- Round buttons ---------- */
.round-button {
  display: inline-flex;
  width: 48px;
  height: 48px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent center / 100% 100% no-repeat;
  background-image: image-set(
    url("/assets/png/default/ui/controls/button_round_normal.png") 1x,
    url("/assets/png/retina/ui/controls/button_round_normal.png") 2x
  );
  cursor: pointer;
  transition:
    transform 180ms var(--ease-pop),
    opacity 150ms ease;
}

/* Só com hover de verdade: no toque o :hover ficaria preso depois do toque. */
@media (hover: hover) {
  .round-button:hover:not(:disabled) {
    background-image: image-set(
      url("/assets/png/default/ui/controls/button_round_hover.png") 1x,
      url("/assets/png/retina/ui/controls/button_round_hover.png") 2x
    );
    transform: scale(1.12);
  }
}

.round-button:focus-visible {
  transform: scale(1.12);
}

.round-button:active:not(:disabled) {
  background-image: image-set(
    url("/assets/png/default/ui/controls/button_round_pressed.png") 1x,
    url("/assets/png/retina/ui/controls/button_round_pressed.png") 2x
  );
  transform: scale(0.95);
}

.round-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.round-button__icon {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

/* Foco visível para teclado em todos os controles. */
.menu-button:focus-visible,
.round-button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .menu-button,
  .round-button {
    transition: none;
  }

  .menu-button:hover:not(:disabled),
  .menu-button:focus-visible,
  .menu-button:active:not(:disabled),
  .round-button:hover:not(:disabled),
  .round-button:focus-visible,
  .round-button:active:not(:disabled) {
    transform: none;
  }
}

/* ---------- Main menu ---------- */
.menu__title {
  margin: 0;
  line-height: 0;
}

.menu__title img {
  width: auto;
  max-width: 100%;
  max-height: clamp(64px, 14vh, 128px);
}

.menu__tagline {
  margin: 0;
  color: var(--color-cream);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.menu__actions,
.menu__log-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.menu__actions {
  flex-direction: column;
}

.menu__log-actions {
  flex-wrap: wrap;
}

.menu__log-actions .menu-button {
  width: min(190px, 22vh);
}

.menu__ship {
  width: auto;
  height: clamp(36px, 8vh, 75px);
}

.menu__hint {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
}

.menu__last,
.menu__pending {
  margin: 0;
  color: var(--color-cream);
  font-size: 0.9rem;
}

.menu__pending:empty {
  display: none;
}

/* ---------- Options ---------- */
.option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.option__label {
  color: var(--color-cream);
  font-weight: 700;
}

.option__stepper {
  display: flex;
  align-items: center;
  gap: 24px;
}

.option__value {
  min-width: 96px;
  color: var(--color-text);
  font-size: 1.5rem;
  font-weight: 700;
}

.option__hint {
  color: var(--color-muted);
  font-size: 0.8rem;
}

/* ---------- Captain's Log ---------- */
.log__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.log__panel {
  display: flex;
  width: 100%;
  min-height: clamp(180px, 38vh, 360px);
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.log__subtitle {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.log-state {
  display: flex;
  margin: auto 0;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--color-muted);
}

.log-state p {
  margin: 0;
}

.log-state--error {
  color: var(--color-defeat);
}

.log-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  text-align: left;
}

.log-table th {
  padding: 0 14px;
  color: var(--color-muted);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.log-table td {
  padding: clamp(6px, 1.3vh, 12px) 14px;
  background: var(--color-row);
  font-weight: 700;
}

.log-table td:first-child {
  border-radius: 6px 0 0 6px;
}

.log-table td:last-child {
  border-radius: 0 6px 6px 0;
}

.log-table__row--you td {
  background: var(--color-row-you);
}

.log-table__accent {
  color: var(--color-gold);
}

.log-table__muted {
  color: var(--color-muted);
  font-size: 0.85rem;
}

.log-table__name {
  white-space: nowrap;
}

.log-table__result--time,
.log-table__result--defeat {
  font-size: 0.8rem;
  text-transform: uppercase;
}

.log-table__result--time {
  color: var(--color-time-up);
}

.log-table__result--defeat {
  color: var(--color-defeat);
}

.badge {
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--color-gold);
  border-radius: 4px;
  color: var(--color-gold);
  font-size: 0.65rem;
  text-transform: uppercase;
  vertical-align: middle;
}

.pagination {
  display: flex;
  margin-top: auto;
  align-items: center;
  gap: 16px;
}

.pagination__label {
  color: var(--color-cream);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.pagination__updating {
  color: var(--color-muted);
  text-transform: none;
}

/* ---------- Match ---------- */
/* A partida ocupa a viewport inteira, ignorando o padding da .scene. */
.match {
  position: absolute;
  inset: 0;
}

.match__bar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: start;
  gap: 8px 16px;
}

/* A pausa fica na 3ª coluna, ao lado dos contadores. */
.match__bar .round-button--control {
  grid-area: 1 / 3;
}

/* ---------- HUD (pontuação e tempo à esquerda da pausa, vida embaixo) ---------- */
/* Subgrid da barra: o HUD ocupa as três colunas, então a vida pode encostar na borda
   direita, embaixo da pausa. */
.hud {
  display: grid;
  margin: 0;
  grid-area: 1 / 1 / 3 / -1;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
}

.hud__counter {
  display: flex;
  width: 160px;
  height: 56px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  background: center / 100% 100% no-repeat;
  background-image: image-set(
    url("/assets/png/default/ui/hud/counter_panel.png") 1x,
    url("/assets/png/retina/ui/hud/counter_panel.png") 2x
  );
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}

.hud__icon {
  width: 28px;
  height: 28px;
}

.hud__value {
  margin: 0;
}

/* Vida: coração + barra do sample, alinhados à direita. */
.hud__health {
  display: flex;
  grid-column: 1 / -1;
  justify-self: end;
  align-items: center;
  gap: 8px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}

.hud__heart {
  width: 36px;
  height: 36px;
}

/* Moldura e preenchimento têm o mesmo tamanho (256×48), então se sobrepõem exatos. */
.hud__bar {
  position: relative;
  display: grid;
  width: 256px;
  margin: 0;
  aspect-ratio: 256 / 48;
  place-items: center;
  background: center / 100% 100% no-repeat;
  background-image: image-set(
    url("/assets/png/default/ui/hud/health_frame.png") 1x,
    url("/assets/png/retina/ui/hud/health_frame.png") 2x
  );
}

/* --hp (0–1) recorta o preenchimento: na arte de 256 px ele vai de x = 30
   (vazio) a x = 229 (cheio). */
.hud__fill {
  position: absolute;
  inset: 0;
  background: center / 100% 100% no-repeat;
  background-image: image-set(
    url("/assets/png/default/ui/hud/health_fill_green.png") 1x,
    url("/assets/png/retina/ui/hud/health_fill_green.png") 2x
  );
  clip-path: inset(0 calc((226 - 199 * var(--hp, 1)) / 256 * 100%) 0 0);
}

.hud__fill--mid {
  background-image: image-set(
    url("/assets/png/default/ui/hud/health_fill_amber.png") 1x,
    url("/assets/png/retina/ui/hud/health_fill_amber.png") 2x
  );
}

.hud__fill--low {
  background-image: image-set(
    url("/assets/png/default/ui/hud/health_fill_red.png") 1x,
    url("/assets/png/retina/ui/hud/health_fill_red.png") 2x
  );
}

.hud__bar-value {
  position: relative;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* O canvas preenche a área; o Pixi faz o letterbox da arena dentro dele. */
.game-canvas,
.game-canvas__host {
  position: absolute;
  inset: 0;
}

/* Sem gestos do navegador (zoom, rolagem) sobre a arena e os controles. */
.game-canvas {
  touch-action: none;
}

.game-canvas__host canvas {
  display: block;
}

/* ---------- Carregamento da arena ---------- */
/* Cobre a partida inteira (HUD e controles incluídos) com o fundo do menu. */
.arena-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  padding: clamp(8px, 2vh, 24px) 16px;
  align-items: center;
  justify-content: center;
  background: #0b5f7a url("/assets/ui_scene_background.png") center / cover
    no-repeat;
}

.arena-loading__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Navio + barra: --hp (0–1) é o progresso, o mesmo recorte da barra de vida. */
.arena-loading__voyage {
  --ship-length: 96px;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}

.arena-loading__sea {
  position: relative;
  height: 56px;
}

.arena-loading__ship {
  position: absolute;
  left: calc(var(--hp, 0) * (100% - var(--ship-length)));
  display: grid;
  width: var(--ship-length);
  height: 100%;
  place-items: center;
  transition: left 200ms ease-out;
  animation: arena-loading-bob 1.8s ease-in-out infinite;
}

/* A arte tem a proa para baixo; −90° aponta para a direita. */
.arena-loading__ship img {
  width: auto;
  max-width: none;
  height: var(--ship-length);
  rotate: -90deg;
}

.arena-loading .hud__fill {
  transition: clip-path 200ms ease-out;
}

@keyframes arena-loading-bob {
  0%,
  100% {
    transform: translateY(2px) rotate(-2deg);
  }

  50% {
    transform: translateY(-3px) rotate(2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .arena-loading__ship {
    animation: none;
  }

  .arena-loading__ship,
  .arena-loading .hud__fill {
    transition: none;
  }
}

/* ---------- Controles na tela (movimento à esquerda, tiros à direita) ---------- */
/* Triângulo compacto: ação principal em cima, centralizada sobre as duas laterais. */
.touch-controls {
  --control-size: 64px;
  position: absolute;
  bottom: 16px;
  display: grid;
  grid-template-columns: repeat(2, var(--control-size));
  grid-template-rows: auto auto;
  gap: 4px 8px;
  align-items: start;
  grid-template-areas:
    "main main"
    "side-a side-b";
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.touch-controls--left {
  left: 16px;
}

.touch-controls--right {
  right: 16px;
}

.touch-controls__forward,
.touch-controls__fire_front {
  grid-area: main;
}

.touch-controls__turn_left,
.touch-controls__fire_left {
  grid-area: side-a;
}

.touch-controls__turn_right,
.touch-controls__fire_right {
  grid-area: side-b;
}

.touch-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Tecla do controle, logo abaixo do botão. */
.touch-control__keys {
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--color-gold);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--color-row);
}

.round-button--control {
  position: relative;
  width: var(--control-size, 64px);
  height: var(--control-size, 64px);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
  -webkit-tap-highlight-color: transparent;
}

/* Cooldown da arma: véu branco que some conforme ela recarrega. As variáveis
   --cooldown-* (1 → 0) são escritas pelo GameCanvas a cada quadro. */
.touch-controls__fire_front {
  --cooldown: var(--cooldown-front, 0);
}

.touch-controls__fire_left {
  --cooldown: var(--cooldown-left, 0);
}

.touch-controls__fire_right {
  --cooldown: var(--cooldown-right, 0);
}

.touch-controls .round-button--control::after {
  position: absolute;
  inset: 5%; /* a borda do sprite é transparente */
  border-radius: 50%;
  background: #fff;
  opacity: calc(var(--cooldown, 0) * 0.6);
  pointer-events: none;
  content: "";
}

/* No toque a legenda de tecla não serve. */
@media (pointer: coarse) {
  .touch-control__keys {
    display: none;
  }
}

.round-button--control .round-button__icon {
  width: 32px;
  height: 32px;
}

/* A pausa acompanha a altura dos contadores do HUD. */
.match__bar .round-button--control {
  width: 56px;
  height: 56px;
}

.match__bar .round-button--control .round-button__icon {
  width: 28px;
  height: 28px;
}

/* ---------- Controls (options) ---------- */
.controls-list {
  display: grid;
  width: min(380px, 100%);
  gap: 8px;
  margin: 0;
  text-align: left;
}

.controls-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-cream);
  font-weight: 700;
}

.controls-list__row dd {
  display: flex;
  gap: 6px;
  margin: 0;
}

/* ---------- Mock API scenario panel ---------- */
.scenario-panel {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 5;
  max-width: min(280px, calc(100vw - 32px));
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--color-row);
  color: var(--color-text);
  font-size: 0.85rem;
}

.scenario-panel summary {
  cursor: pointer;
}

.scenario-panel__current {
  color: var(--color-gold);
}

.scenario-panel[open] {
  display: grid;
  gap: 8px;
}

.scenario-panel__field {
  display: grid;
  gap: 4px;
}

.scenario-panel select,
.scenario-panel button {
  font: inherit;
  padding: 4px 8px;
}

.scenario-panel__note {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.8rem;
}

.scenario-panel :focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .scene__logo {
    left: 16px;
    width: 96px;
  }

  .panel {
    border-width: 30px 24px;
  }

  .panel__content {
    padding: 8px 4px;
  }

  .menu-button {
    width: min(200px, 28vh);
    font-size: 1.05rem;
  }

  .menu-button--sm,
  .menu__log-actions .menu-button {
    width: 140px;
    font-size: 0.7rem;
  }

  .log-table th,
  .log-table td {
    padding-inline: 8px;
  }

  .log-table td {
    font-size: 0.85rem;
  }

  .log-table__muted {
    font-size: 0.7rem;
  }

  .log-table__name {
    white-space: normal;
  }
}

/* ---------- Partida no mobile (retrato estreito ou paisagem baixa) ---------- */
@media (max-width: 600px), (max-height: 480px) {
  /* Contadores menores para caber ao lado da pausa. */
  .match__bar,
  .hud {
    gap: 8px;
  }

  .hud__counter {
    width: 112px;
    height: 40px;
    gap: 4px;
    font-size: 1rem;
  }

  .hud__icon {
    width: 20px;
    height: 20px;
  }

  .hud__health {
    gap: 4px;
  }

  .hud__heart {
    width: 28px;
    height: 28px;
  }

  .hud__bar {
    width: 192px;
  }

  .hud__bar-value {
    font-size: 0.8rem;
  }

  /* 44 px: mínimo confortável para toque, mesmo com o contador em 40 px. */
  .match__bar .round-button--control {
    width: 44px;
    height: 44px;
  }

  .match__bar .round-button--control .round-button__icon {
    width: 22px;
    height: 22px;
  }

  .touch-controls {
    --control-size: 56px;
    bottom: 8px;
  }

  .touch-controls--left {
    left: 8px;
  }

  .touch-controls--right {
    right: 8px;
  }

  .round-button--control .round-button__icon {
    width: 28px;
    height: 28px;
  }
}

/* Em telas baixas o logo sobreporia o painel. */
@media (max-height: 640px) {
  .scene__logo {
    display: none;
  }
}

/* ---------- Modal ---------- */
.modal {
  width: min(100% - 32px, 480px);
  max-width: none;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
}

.modal::backdrop {
  background: rgba(6, 14, 24, 0.65);
  backdrop-filter: blur(2px);
}

/* Altura explícita: o max-height em % do painel não resolve dentro do <dialog>,
   e sem ela o conteúdo cortaria em vez de rolar. */
.modal .panel {
  width: 100%;
  max-height: calc(100dvh - 16px);
}

.modal__text {
  margin: 0;
  color: var(--color-muted);
}

/* ---------- Match result ---------- */
.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.4vh, 12px);
}

/* Placa de madeira com o número entalhado: veios em gradiente, e o texto escuro
   com sombra clara embaixo e escura em cima, como uma ranhura na tábua. */
.result__score,
.carved-key {
  border: 3px solid var(--color-wood-dark);
  border-radius: 10px;
  background:
    repeating-linear-gradient(
      178deg,
      rgba(59, 34, 8, 0) 0 7px,
      rgba(59, 34, 8, 0.18) 7px 9px,
      rgba(59, 34, 8, 0) 9px 16px
    ),
    linear-gradient(180deg, #c98a45, #a86a2c 55%, #8a5520);
  box-shadow:
    inset 0 2px 0 rgba(255, 220, 160, 0.45),
    inset 0 -3px 0 rgba(59, 34, 8, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.45);
  color: #4a2a0c;
  font-family: var(--font-carved);
  line-height: 1;
  text-shadow:
    0 -2px 1px rgba(30, 15, 2, 0.7),
    0 2px 0 rgba(255, 214, 150, 0.55);
}

.result__score {
  min-width: 3.2em;
  margin: 16px 0 0;
  padding: 0.3em 0.9em 0.2em;
  font-size: clamp(2.5rem, 9vh, 4.25rem);
}

/* Tecla entalhada: a mesma plaquinha de madeira da pontuação, em tamanho menor. */
.carved-key {
  display: inline-block;
  min-width: 2.6em;
  padding: 0.45em 0.8em 0.35em;
  border-width: 2px;
  border-radius: 6px;
  font-size: 1.1rem;
  text-align: center;
}

/* Moldura de madeira (o mesmo 9-slice do painel, menor) em volta do título. */
.result__title {
  padding: 2px 12px;
  border-style: solid;
  border-width: 20px 16px;
  border-image-source: url("/assets/png/retina/ui/menu/panel_menu.png");
  border-image-slice: 80 64 fill;
  border-image-repeat: stretch;
}

.result__details {
  margin: 0;
  color: var(--color-cream);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.result__retry {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-cream);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Player name form ---------- */
.player-form {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.4vh, 12px);
}

/* Campo de texto com o sprite do botão secundário como moldura. */
.text-field {
  width: min(100%, 300px);
  aspect-ratio: 256 / 88;
  padding: 0 40px 4px;
  border: 0;
  background: transparent center / 100% 100% no-repeat;
  background-image: image-set(
    url("/assets/png/default/ui/menu/button_secondary_normal.png") 1x,
    url("/assets/png/retina/ui/menu/button_secondary_normal.png") 2x
  );
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.4vh, 1.25rem);
  font-weight: 900;
  text-align: center;
  caret-color: var(--color-gold);
  transition:
    transform 180ms var(--ease-pop),
    filter 150ms ease;
}

.text-field::placeholder {
  color: var(--color-muted);
  opacity: 0.6;
}

.text-field:hover,
.text-field:focus-visible {
  filter: brightness(1.15);
  transform: scale(1.04);
}

/* Sem contorno retangular: o foco aparece como brilho seguindo a moldura do sprite. */
.text-field:focus,
.text-field:focus-visible {
  outline: none;
}

.text-field:focus-visible {
  filter: brightness(1.15) drop-shadow(0 0 6px var(--color-focus));
}

.text-field[aria-invalid="true"] {
  filter: drop-shadow(0 0 6px var(--color-defeat));
}

.player-form__error {
  margin: 0;
  color: var(--color-defeat);
  font-size: 0.85rem;
  font-weight: 700;
}

.player-form__actions {
  display: flex;
  margin-top: 4px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .text-field {
    transition: none;
  }

  .text-field:hover,
  .text-field:focus-visible {
    transform: none;
  }
}

/* ---------- Paisagem baixa (celular deitado): painéis, botões e controles menores ---------- */
/* No fim do arquivo para valer sobre as regras base de modal e painel. */
@media (max-height: 480px) {
  .panel {
    border-width: 26px 22px;
  }

  .panel__content {
    padding: 4px 8px;
    gap: 6px;
  }

  .panel__title {
    font-size: 1.25rem;
  }

  .modal {
    width: min(100% - 32px, 380px);
  }

  /* Largura fixa: a regra base usa vh e, deitado, o texto não caberia. */
  .menu-button {
    width: 140px;
    padding: 0 20px 3px;
    font-size: 0.85rem;
  }

  .menu-button--sm,
  .menu__log-actions .menu-button {
    width: 124px;
    padding-inline: 14px;
    font-size: 0.65rem;
  }

  /* Play e Options lado a lado: o menu cabe sem rolar. */
  .menu__actions {
    flex-direction: row;
  }

  .option {
    gap: 2px;
  }

  .option__value {
    min-width: 72px;
    font-size: 1.15rem;
  }

  .option__stepper .round-button {
    width: 44px;
    height: 44px;
  }

  .touch-controls {
    --control-size: 48px;
  }

  .touch-controls .round-button__icon {
    width: 24px;
    height: 24px;
  }
}