:root {
  color-scheme: dark;
  --bg: #040403;
  --surface: #0d0e0e;
  --surface-2: #141515;
  --surface-3: #1a1b1b;
  --line: rgba(226, 199, 156, .16);
  --line-strong: rgba(226, 199, 156, .42);
  --text: #eee7db;
  --muted: #9c978e;
  --muted-dark: #68665f;
  --gold: #c8a877;
  --gold-bright: #ead4b2;
  --gold-dark: #705b3c;
  --red: #8e222b;
  --red-deep: #4f1017;
  --black-tile: #17191a;
  --black-deep: #080909;
  --cyan: #91cdd4;
  --green: #7ed2a0;
  --error: #ff9aaa;
  --radius: 12px;
  --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* cores da moldura do The Mindgamer (mindgamer.css) na temperatura da mesa */
  --game-accent: #c9a56f;
  --mg-primary-base: #1c150c;
  --ink-0: #f1ebe0;
  --ink-1: #ddd2c1;
  --ink-2: #b3a996;
  --ink-3: #8b8375;
  --mg-line:    rgb(226 199 156 / 0.2);
  --mg-line-hi: rgb(234 212 178 / 0.6);
  --mg-rule:    rgb(226 199 156 / 0.42);
  --mg-frame:   rgb(255 240 215 / 0.05);
  --mg-panel:   linear-gradient(180deg, rgb(26 24 21 / 0.92), rgb(9 9 8 / 0.95));
  --mg-surface: linear-gradient(180deg, rgb(42 38 32 / 0.75), rgb(14 13 11 / 0.88));
  --mg-dialog:  linear-gradient(180deg, #1d1b18, #0b0a09);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
h1, h2, h3, p { margin-top: 0; }
.hidden { display: none !important; }

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(160, 120, 64, .11), transparent 58%),
    linear-gradient(180deg, #090908, #020202 72%);
}

.eyebrow,
.menu-label,
.stage-kicker {
  margin: 0 0 5px;
  color: var(--gold);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.status-line { min-height: 22px; color: var(--muted); font-size: .84rem; }
.status-line.error { color: var(--error); }

/* ---------------------------------------------------------------- setup */
/* tela temporária de chave de API: sai quando o jogo for aberto pelo The Mindgamer */

.setup-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 32px 18px;
}

.setup-card {
  position: relative;
  width: min(650px, 100%);
  padding: 38px 42px 30px;
  border: 1px solid var(--line);
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
  background: linear-gradient(180deg, rgba(22, 23, 23, .98), rgba(9, 10, 10, .99));
  box-shadow: 0 35px 100px rgba(0, 0, 0, .72), inset 0 1px rgba(255, 255, 255, .035);
}

.setup-card::before {
  content: "";
  position: absolute;
  inset: 0 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.brand { text-align: center; margin-bottom: 28px; }
.brand-title {
  margin: 5px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  line-height: 1;
  letter-spacing: .015em;
}
.brand-title span { color: var(--gold-bright); font-style: italic; font-weight: 500; }
.tagline { max-width: 50ch; margin: 0 auto; color: var(--muted); }

.setup-form { display: grid; gap: 15px; }
.provider-preset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 13px;
  border: 1px solid rgba(200, 168, 119, .22);
  border-radius: 8px;
  background: rgba(200, 168, 119, .055);
}
.provider-preset > div { display: grid; gap: 2px; }
.provider-preset strong { color: var(--gold-bright); font-size: .88rem; }
.preset-label { color: var(--gold); font-size: .57rem; font-weight: 800; letter-spacing: .14em; }
.provider-preset .text-button { color: var(--gold-bright); }
.field { display: grid; gap: 6px; }
.field label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .82rem;
  font-weight: 750;
}
.hint { color: var(--muted); font-size: .7rem; font-weight: 400; }

input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 8px;
  padding: 11px 13px;
  outline: none;
  background: rgba(2, 3, 3, .82);
  transition: border-color .18s, box-shadow .18s;
}
input::placeholder { color: #53534f; }
input:focus { border-color: var(--line-strong); box-shadow: 0 0 0 3px rgba(200, 168, 119, .09); }

.advanced-settings {
  border-block: 1px solid rgba(255, 255, 255, .06);
  padding: 12px 0;
}
.advanced-settings summary {
  color: var(--muted);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 700;
  list-style-position: outside;
  margin-left: 14px;
}
.advanced-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 14px;
}
.advanced-grid .api-field { grid-column: 1 / -1; }

.setup-actions { display: flex; justify-content: flex-end; gap: 10px; }
.setup-footer {
  margin: 17px 0 0;
  color: #56544f;
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 18px;
  background: linear-gradient(180deg, #191a1a, #0c0d0d);
  color: var(--text);
  font-weight: 750;
  letter-spacing: .01em;
  transition: transform .16s var(--ease), border-color .18s, filter .18s, box-shadow .18s;
}
.btn:hover:not(:disabled) { border-color: var(--line-strong); }
.btn:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}
.btn:disabled { opacity: .38; }
.btn.primary {
  border-color: rgba(229, 201, 159, .55);
  background: linear-gradient(180deg, #d8bd91, #a98655 62%, #745933);
  color: #17120c;
  box-shadow: 0 10px 24px rgba(175, 128, 66, .16);
}
.btn.secondary { background: linear-gradient(180deg, #1c1d1d, #0c0d0d); }
.btn.warning { border-color: rgba(204, 104, 78, .45); color: #ffd9ca; background: #531e18; }
.btn.danger { border-color: rgba(180, 53, 70, .4); color: #e9b8bf; background: #44131a; }


/* =========================================================================
   MESA

   A moldura (painéis, botões, diálogos) vem de mindgamer.css, com as cores
   quentes do Double Game definidas no :root lá em cima. Aqui fica a grade da
   tela, o placar e tudo dentro da mesa.

   Medidas em --u (1px de uma tela 1920×1080, definido em mindgamer.css), com
   piso em px nos textos. Antes as medidas eram px fixos: a mesa ficava
   pequena no meio de um 1920×1080 e, num 1366×768, o botão e o guia cobriam
   a mão do jogador.
   ========================================================================= */

.game-view {
  --rail: calc(300 * var(--u));
  --gap: calc(12 * var(--u));
  --hud-h: max(56px, calc(86 * var(--u)));
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: var(--hud-h) minmax(0, 1fr);
  gap: var(--gap);
  padding: var(--gap);
  background: #030303;
  font-family: var(--font-serif);
  font-variant-numeric: lining-nums;
  color: var(--ink-0);
}

/* ================================================================= topo ===== */

.game-hud {
  min-height: 0;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail);
  gap: var(--gap);
}

.hud-brand {
  flex-direction: row;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: 0 calc(16 * var(--u));
}

.hud-logo {
  flex: 1;
  min-width: 0;
  height: 100%;
  max-height: calc(100% - 16 * var(--u));
  object-fit: contain;
  object-position: center;
}

.hud-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 0 calc(34 * var(--u));
}

.hud-meta {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  min-width: 0;
}

.hud-meta--phase { align-items: flex-end; text-align: right; }

.hud-meta small,
.hud-name {
  white-space: nowrap;
  font-size: max(11px, calc(14 * var(--u)));
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* max-width: sem ele a caixa cresce pra fora do bloco e invade o placar */
.hud-meta strong {
  max-width: 100%;
  font-size: max(14px, calc(22 * var(--u)));
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-0);
}

.hud-meta--phase strong { color: var(--game-accent); }

.hud-score {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
}

.hud-player { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.human-side .hud-name { color: var(--game-accent); }

.score-num {
  min-width: 2ch;
  font-size: max(24px, calc(46 * var(--u)));
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums lining-nums;
}

.score-separator { font-size: max(20px, calc(34 * var(--u))); color: var(--game-accent); }

.hud-actions {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  padding: 0 calc(16 * var(--u));
}

.chat-toggle { position: relative; }

.notification-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 11px;
  height: 11px;
  border: 2px solid #0b0a09;
  border-radius: 50%;
  background: #c83a48;
}

/* ================================================================= mesa ===== */

.game-shell {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: calc(10 * var(--u));
  padding: calc(18 * var(--u)) calc(40 * var(--u)) calc(22 * var(--u));
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--mg-line);
  border-radius: calc(12 * var(--u));
  background: #050505 url("assets/arena-table.webp") center / cover no-repeat;
}

.game-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.3), transparent 18%, transparent 74%, rgb(0 0 0 / 0.55)),
    radial-gradient(circle at 50% 46%, transparent 25%, rgb(0 0 0 / 0.22) 78%);
}

.table-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--u));
}

/* só aparece quando é erro; o resto do tempo quem fala é o guia */
.game-status:not(.error) { display: none; }

.game-status {
  font-size: max(13px, calc(16 * var(--u)));
  text-align: center;
  color: #f0a3ae;
}

.action-guide {
  max-width: min(calc(960 * var(--u)), 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(24 * var(--u));
  border: 1px solid var(--mg-line);
  border-radius: 999px;
  background: rgb(4 4 4 / 0.72);
  font-size: max(13px, calc(18 * var(--u)));
  line-height: 1.35;
  text-align: center;
  color: var(--ink-1);
}

.guide-mark {
  flex: none;
  width: max(6px, calc(8 * var(--u)));
  height: max(6px, calc(8 * var(--u)));
  border-radius: 50%;
  background: var(--game-accent);
  box-shadow: 0 0 calc(10 * var(--u)) var(--game-accent);
}

.table {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 0.85fr) minmax(0, 1.7fr) minmax(0, 1.05fr);
  gap: calc(6 * var(--u));
}

.hand-zone {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.opponent-zone { justify-content: flex-start; }

.zone-meta {
  width: min(calc(900 * var(--u)), 92%);
  display: flex;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  margin-bottom: calc(8 * var(--u));
  font-size: max(11px, calc(14 * var(--u)));
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ------------------------------------------------------------ trilho ----- */

.rack {
  position: relative;
  width: min(calc(900 * var(--u)), 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(14 * var(--u));
  padding: calc(8 * var(--u)) calc(28 * var(--u)) calc(22 * var(--u));
  min-height: calc(80 * var(--u));
}

.rack::before,
.rack::after {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  width: 92%;
  pointer-events: none;
}

.rack::before {
  bottom: calc(8 * var(--u));
  height: calc(18 * var(--u));
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 2px 2px 8px 8px;
  background: linear-gradient(180deg, #252626 0 10%, #080909 28% 68%, #1c1d1d 72%, #050505 100%);
  box-shadow: 0 calc(11 * var(--u)) calc(18 * var(--u)) rgb(0 0 0 / 0.6);
}

.rack::after {
  bottom: calc(25 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 3px;
  background: linear-gradient(180deg, #292a2a, #090909);
}

.rack > * { position: relative; z-index: 1; }

.hand-empty {
  align-self: center;
  padding-bottom: calc(18 * var(--u));
  font-size: max(12px, calc(15 * var(--u)));
  font-style: italic;
  color: var(--ink-3);
}

/* ------------------------------------------------------------ blocos ----- */

.tile,
.back-card,
.duel-card {
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 7px);
}

.tile,
.back-card {
  position: relative;
  width: max(52px, calc(96 * var(--u)));
  aspect-ratio: 0.75;
  flex: none;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 0;
  border: 1px solid rgb(231 215 189 / 0.25);
  box-shadow: 0 calc(10 * var(--u)) calc(15 * var(--u)) rgb(0 0 0 / 0.55), inset 0 1px rgb(255 255 255 / 0.09), inset 0 -7px rgb(0 0 0 / 0.32);
  transition: border-color .18s ease, box-shadow .18s ease, translate .18s ease;
}

.tile.red,  .back-card.red  { background: linear-gradient(145deg, #a32e39, #6b151e 65%, #3b0b10); }
.tile.black, .back-card.black { background: linear-gradient(145deg, #272929, #101111 66%, #050505); }

.tile::after,
.back-card::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgb(255 255 255 / 0.055);
  clip-path: inherit;
  pointer-events: none;
}

.opponent-zone .back-card { width: max(42px, calc(76 * var(--u))); }

.tile { color: var(--ink-0); }

.tile .tile-number {
  font-size: max(22px, calc(46 * var(--u)));
  line-height: 1;
  text-shadow: 0 3px 7px rgb(0 0 0 / 0.55);
}

.tile .tile-label {
  margin-top: calc(6 * var(--u));
  font-size: max(11px, calc(13 * var(--u)));
  letter-spacing: 0.02em;
  /* sem caixa alta: "VERMELHO" não cabia no bloco estreito do celular */
  color: rgb(235 224 207 / 0.78);
}

.tile.legal { border-color: rgb(231 205 165 / 0.5); }

/* hover só acende a borda: sem pulo e sem zoom */
.tile.legal:hover,
.tile.legal:focus-visible {
  outline: none;
  border-color: var(--game-accent);
  box-shadow: 0 calc(10 * var(--u)) calc(15 * var(--u)) rgb(0 0 0 / 0.55), 0 0 calc(20 * var(--u)) rgb(201 165 111 / 0.3);
}

/* selecionado sobe: é estado de seleção, não efeito de hover */
.tile.selected {
  translate: 0 calc(-14 * var(--u));
  border-color: var(--game-accent);
  box-shadow: 0 calc(20 * var(--u)) calc(28 * var(--u)) rgb(0 0 0 / 0.62), 0 0 0 2px rgb(226 199 156 / 0.25), 0 0 calc(28 * var(--u)) rgb(205 160 98 / 0.25);
}

/* ----------------------------------------------------- centro: ordem ----- */

.center-stage {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
}

.order-panel {
  width: min(calc(560 * var(--u)), 92%);
  align-items: center;
  padding: calc(32 * var(--u));
  text-align: center;
}

.stage-kicker {
  margin: 0 0 calc(10 * var(--u));
  font-size: max(11px, calc(14 * var(--u)));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--game-accent);
}

.order-panel h2 {
  margin: 0 0 calc(10 * var(--u));
  font-size: max(22px, calc(36 * var(--u)));
  font-weight: 400;
  line-height: 1.1;
}

.dice-label {
  margin: 0 0 calc(22 * var(--u));
  font-size: max(13px, calc(18 * var(--u)));
  color: var(--ink-2);
}

.button-row { display: flex; justify-content: center; gap: calc(12 * var(--u)); }
.button-row .mg-btn { min-width: calc(170 * var(--u)); }

/* ---------------------------------------------------- centro: seleção ----- */

.draft-panel {
  width: min(calc(1100 * var(--u)), 100%);
  display: grid;
  gap: calc(20 * var(--u));
}

.draft-meta {
  display: flex;
  justify-content: space-between;
  gap: calc(14 * var(--u));
  padding: 0 calc(8 * var(--u));
  font-size: max(11px, calc(14 * var(--u)));
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.draft-row {
  display: grid;
  grid-template-columns: calc(120 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(14 * var(--u));
}

.row-label {
  font-size: max(11px, calc(14 * var(--u)));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.slots {
  display: flex;
  justify-content: center;
  gap: calc(14 * var(--u));
}

.slot {
  position: relative;
  flex: 0 1 auto;
  width: max(44px, calc(104 * var(--u)));
  aspect-ratio: 0.92;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(222 206 178 / 0.23);
  border-radius: calc(9 * var(--u));
  box-shadow: 0 calc(9 * var(--u)) calc(12 * var(--u)) rgb(0 0 0 / 0.48), inset 0 1px rgb(255 255 255 / 0.09), inset 0 -5px rgb(0 0 0 / 0.28);
  transition: border-color .18s ease, box-shadow .18s ease, opacity .2s ease;
}

.slot::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgb(255 255 255 / 0.055);
  border-radius: 6px;
  background-image:
    linear-gradient(45deg, rgb(255 255 255 / 0.025) 25%, transparent 25%),
    linear-gradient(-45deg, rgb(255 255 255 / 0.025) 25%, transparent 25%);
  background-size: 9px 9px;
}

.slot.red   { background: linear-gradient(145deg, #a3333d, #6f1821 65%, #3e0d13); }
.slot.black { background: linear-gradient(145deg, #292b2b, #111212 65%, #050606); }
.slot.legal { border-color: rgb(226 199 156 / 0.55); cursor: pointer; }

.slot.legal:hover,
.slot.legal:focus-visible {
  outline: none;
  border-color: var(--game-accent);
  box-shadow: 0 calc(9 * var(--u)) calc(12 * var(--u)) rgb(0 0 0 / 0.48), 0 0 calc(20 * var(--u)) rgb(203 170 119 / 0.3);
}

.slot:disabled { cursor: default; }
.slot.taken { opacity: 0; visibility: hidden; pointer-events: none; }

/* ----------------------------------------------------- centro: duelo ----- */

.duel-stage {
  width: min(calc(640 * var(--u)), 96%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(60 * var(--u)) minmax(0, 1fr);
  align-items: end;
  gap: calc(12 * var(--u));
}

.duel-position { display: grid; justify-items: center; gap: calc(10 * var(--u)); }

.duel-owner {
  font-size: max(11px, calc(14 * var(--u)));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.duel-card {
  position: relative;
  width: max(100px, calc(140 * var(--u)));
  aspect-ratio: 0.82;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgb(230 211 180 / 0.28);
  background: linear-gradient(145deg, #272929, #0b0c0c 68%, #030303);
  box-shadow: 0 calc(15 * var(--u)) calc(24 * var(--u)) rgb(0 0 0 / 0.58), inset 0 1px rgb(255 255 255 / 0.08);
  overflow: hidden;
}

.duel-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgb(255 255 255 / 0.055);
  clip-path: inherit;
  pointer-events: none;
}

.duel-card.red   { background: linear-gradient(145deg, #a22e39, #65151d 68%, #370a0f); }
.duel-card.black { background: linear-gradient(145deg, #292b2b, #0e0f0f 68%, #030303); }

.duel-card.empty {
  background: rgb(5 6 6 / 0.1);
  border: 1px dashed rgb(226 199 156 / 0.25);
  box-shadow: none;
  clip-path: none;
  opacity: 0.7;
}

.duel-card.empty::after { clip-path: none; border-color: rgb(255 255 255 / 0.02); }

.duel-card.face-down:not(.empty)::before {
  content: "◆";
  font-size: max(14px, calc(22 * var(--u)));
  color: rgb(229 210 178 / 0.2);
}

.duel-card.face-down .duel-label { position: absolute; bottom: calc(14 * var(--u)); }
.duel-card.empty .duel-label { position: static; letter-spacing: 0.04em; }

.duel-number {
  font-size: max(34px, calc(66 * var(--u)));
  line-height: 0.95;
  color: var(--ink-0);
  text-shadow: 0 4px 10px rgb(0 0 0 / 0.6);
}

.duel-label {
  font-size: max(11px, calc(13 * var(--u)));
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-align: center;
  color: rgb(234 221 202 / 0.72);
}

.duel-card.is-revealed { animation: revealCard .48s var(--mg-ease); }
.duel-card.winner-glow { border-color: rgb(232 204 161 / 0.75); box-shadow: 0 calc(18 * var(--u)) calc(28 * var(--u)) rgb(0 0 0 / 0.6), 0 0 calc(30 * var(--u)) rgb(206 164 104 / 0.3); }
.duel-card.thinking { animation: thinkPulse 1.5s ease-in-out infinite; }

.versus { align-self: center; font-size: max(22px, calc(36 * var(--u))); text-align: center; color: var(--game-accent); }

.result-label {
  grid-column: 1 / -1;
  min-height: 1.4em;
  font-size: max(14px, calc(20 * var(--u)));
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--game-accent);
}

/* ------------------------------------------------------------ ações ----- */

/* altura reservada: aparecer e sumir botão não empurra a mesa */
.main-controls {
  min-height: max(38px, calc(54 * var(--u)));
  display: flex;
  justify-content: center;
  gap: calc(12 * var(--u));
}

.main-controls .mg-btn { min-width: calc(240 * var(--u)); }

/* ================================================================ regras ===== */

.rules-pages { min-height: 84px; }
.rules-page strong { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 500; color: var(--game-accent); }
.rules-page p { margin: 0; }

.rules-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--mg-line);
}

.rules-dismiss { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.rules-dismiss input { width: 16px; height: 16px; margin: 0; accent-color: var(--game-accent); }
.rules-nav { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }
.rules-arrow { width: 38px; height: 38px; font-size: 17px; }
.rules-arrow:disabled { opacity: .3; cursor: default; }

/* ================================================================ gavetas ===== */

.drawer-scrim { position: fixed; inset: 0; z-index: 29; background: rgb(0 0 0 / 0.35); }

.drawer {
  position: fixed;
  z-index: 30;
  top: calc(var(--gap) * 2 + var(--hud-h));
  bottom: var(--gap);
  width: min(420px, calc(100vw - 24px));
  gap: 12px;
  padding-bottom: 18px;
  opacity: 0;
  pointer-events: none;
  transition: transform .28s var(--mg-ease), opacity .2s ease;
}

.drawer.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.drawer > :not(.mg-panel__head) { margin-inline: 22px; }

.chat-drawer { right: var(--gap); transform: translateX(calc(100% + 28px)); }
.menu-drawer { left: var(--gap); transform: translateX(calc(-100% - 28px)); }

.drawer .mg-panel__head .mg-iconbtn { width: 38px; height: 38px; }
.drawer-copy { margin-top: 0; margin-bottom: 0; font-size: 14px; line-height: 1.45; color: var(--ink-3); }

.chat-list {
  flex: 1;
  min-height: 160px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px;
  scrollbar-width: thin;
}

.message {
  max-width: 88%;
  align-self: flex-start;
  padding: 10px 12px;
  border: 1px solid rgb(255 255 255 / 0.07);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.04);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: fadeUp .25s var(--mg-ease);
}

.message .msg-author { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: 0.12em; color: var(--game-accent); }
.message.human { align-self: flex-end; border-color: rgb(201 165 111 / 0.3); background: rgb(201 165 111 / 0.1); }
.message.system { align-self: center; max-width: 100%; border: 0; background: none; font-size: 13px; text-align: center; color: var(--ink-3); }

.chat-form { display: flex; gap: 8px; }

.chat-form input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--mg-line);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.45);
  font-family: var(--font-serif);
  font-size: 15px;
}

.chat-form input:focus { outline: none; border-color: var(--mg-line-hi); box-shadow: none; }
.chat-send { width: 44px; height: 44px; }

.model-state { min-height: 18px; margin: 0; font-size: 13px; color: var(--ink-3); }
.model-state.error { color: #f0a3ae; }
.model-state.busy  { color: var(--game-accent); }

.menu-section { padding: 12px 0; border-block: 1px solid var(--mg-line); }

.menu-label {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--game-accent);
}

.scoring-line { margin: 0; font-size: 15px; color: var(--ink-2); }

.history-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.history-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.text-button { border: 0; padding: 4px; background: none; font-family: var(--font-serif); font-size: 14px; color: var(--ink-3); cursor: pointer; }
.text-button:hover { color: var(--ink-0); }
.history-list { flex: 1; min-height: 0; overflow: auto; font-size: 14px; color: var(--ink-2); }
.history-list.collapsed { display: none; }
.history-item { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px; padding: 9px 2px; border-bottom: 1px solid rgb(255 255 255 / 0.05); }
.h-round { color: var(--ink-3); }
.h-result { color: var(--game-accent); }
.history-empty { font-style: italic; color: var(--ink-3); }
/* coluna presa à largura da gaveta: sem o minmax(0, …) ela crescia até o
   rótulo inteiro caber numa linha e empurrava o botão para fora no celular.
   Rótulo comprido ("Voltar ao The Mindgamer", dentro do hub) quebra linha. */
.menu-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }

.menu-actions .mg-btn { white-space: normal; text-align: center; line-height: 1.2; }

/* ======================================================= aviso e animações ===== */

.mg-toast { animation: fadeUp .25s var(--mg-ease); }
.mg-toast.hide { animation: toastOut .25s ease forwards; }
.thinking-dots { color: var(--game-accent); }

@keyframes fadeUp { from { opacity: 0; translate: 0 7px; } to { opacity: 1; translate: 0 0; } }
@keyframes revealCard { from { opacity: .25; transform: rotateY(88deg); } to { opacity: 1; transform: rotateY(0); } }
@keyframes thinkPulse { 50% { border-color: rgb(231 205 165 / 0.55); box-shadow: 0 0 24px rgb(197 158 101 / 0.2); } }
@keyframes toastOut { to { opacity: 0; } }
/* o placar que muda acende, sem crescer */
@keyframes scorePop { 45% { color: var(--game-accent); } }
.score-num.pop { animation: scorePop .5s var(--mg-ease); }
.result-label.pop { animation: fadeUp .35s var(--mg-ease); }

/* =========================================================================
   TELAS ESTREITAS / RETRATO

   A mesa vira página que rola, o topo quebra em duas linhas (logo e botões em
   cima, placar embaixo) e a unidade vira 1px.
   ========================================================================= */

@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  :root { --u: 1px; }

  .game-view {
    --gap: 8px;
    --hud-h: auto;
    position: static;
    min-height: 100dvh;
    grid-template-rows: auto auto;
  }

  .game-hud {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "strip strip";
  }

  .hud-brand   { grid-area: brand; height: 64px; }
  .hud-actions { height: 64px; }
  .hud-logo    { max-height: 48px; object-position: left center; }
  .hud-actions { grid-area: actions; padding: 0 10px; }
  .hud-strip   { grid-area: strip; min-height: 72px; padding: 0 16px; }

  .game-shell { padding: 16px 12px 18px; }
  .table { grid-template-rows: auto auto auto; gap: 18px; }

  .rack { gap: 6px; padding-inline: 8px; }
  .tile, .back-card { width: clamp(50px, 16vw, 84px); }
  .opponent-zone .back-card { width: clamp(38px, 11vw, 64px); }

  .draft-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .row-label { text-align: center; }
  .slots { gap: 5px; }
  .slot { flex: 1 1 0; width: auto; min-width: 0; max-width: 84px; }

  .duel-card { width: clamp(100px, 26vw, 132px); }

  .main-controls { flex-direction: column; }
  .main-controls .mg-btn { width: 100%; min-width: 0; }

  .drawer { top: 8px; bottom: 8px; width: calc(100vw - 16px); }
  .chat-drawer { right: 8px; }
  .menu-drawer { left: 8px; }
}

@media (max-width: 640px) {
  .hud-strip { gap: 10px; padding: 0 14px; }
  .hud-name { display: none; }
  .score-num { font-size: 32px; }
  .hud-score { gap: 10px; }
  .hud-meta strong { font-size: 14px; letter-spacing: 0; }
  .draft-meta { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
  .rules-footer { flex-direction: column; align-items: flex-start; }
}

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

/* ---------- entrada: níveis da IA local ---------- */

.ai-entry { display: grid; gap: 12px; margin-bottom: 22px; }

.entry-label {
  margin: 0;
  color: var(--muted);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
}

.ai-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.entry-note {
  margin: 0;
  color: var(--muted-2, var(--muted));
  font-size: .82rem;
  line-height: 1.45;
  text-align: center;
}

.model-setup { border-top: 1px solid var(--line); padding-top: 16px; }

.model-setup > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  list-style: none;
}

.model-setup > summary::-webkit-details-marker { display: none; }
.model-setup > summary:hover { color: var(--gold-bright); }
.model-setup[open] > summary { margin-bottom: 16px; }

/* ------------------------------------------------------------------ 1v1 */
/* contra outra pessoa não há "trocar adversário", e o aviso do chat é o da IA */
.mg-1v1 #new-game-button,
.mg-1v1 .chat-drawer .drawer-copy { display: none; }