/* Ofensiva de Guerra — tema medieval (couro, ouro e carmim) */
:root {
  /* Fontes: o modo god troca para a mesa toda (api/fontes); catálogo em data/fontes.json. */
  --font-titulo: 'Cinzel', Georgia, serif;
  --font-texto: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bg: #1b1410;
  --bg-2: #2a1f18;
  --felt: #3b2a1f;
  --felt-2: #4a3424;
  --gold: #e2b55a;
  --gold-2: #b98a2e;
  --crimson: #a8202c;
  --crimson-2: #7e1520;
  --ink: #f5ead6;
  --ink-dim: #c9b79a;
  --parchment: #f3e4c4;
  --parchment-ink: #3a2616;
  --win: #4caf6a;
  --lose: #d9534f;
  --tie: #c9a74a;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --card-ratio: 1.558; /* 1125 / 722 */
  --card-w: min(26vw, 13.5dvh, 128px);
  --card-w-cpu: min(15vw, 8.5dvh, 84px);
  --card-w-table: min(30vw, 17dvh, 140px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 50% 0%, #3a2a1d 0%, var(--bg) 70%) fixed, var(--bg);
  color: var(--ink);
  font-family: var(--font-texto);
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-titulo); letter-spacing: .02em; }
img { max-width: 100%; }

.screen { display: none; height: 100dvh; }
.screen.active { display: flex; }

/* ---------- Botões ---------- */
.btn {
  border: 0; border-radius: 999px; padding: .7em 1.2em; font-weight: 900; cursor: pointer;
  transition: transform .12s ease, filter .12s ease, opacity .2s;
  min-height: 44px; touch-action: manipulation; letter-spacing: .02em;
}
.btn:active:not(:disabled) { transform: scale(.96); }
.btn:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(.6); }
.btn-primary { background: linear-gradient(180deg, #f2cd75, var(--gold-2)); color: #2b1a08; box-shadow: 0 4px 0 #7a5718, 0 8px 18px rgba(0,0,0,.35); }
.btn-secondary { background: #5b4637; color: var(--ink); box-shadow: 0 4px 0 #3a2c21; }
.btn-danger { background: linear-gradient(180deg, #d0323f, var(--crimson-2)); color: #fff; box-shadow: 0 4px 0 #4f0b12, 0 8px 18px rgba(0,0,0,.35); }
.btn-ghost { background: transparent; color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; }
.btn-big { font-size: 1.15rem; padding: .85em 1.4em; }
.icon-btn { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; width: 44px; height: 44px; font-size: 1.2rem; cursor: pointer; flex: none; }
.btn:focus-visible, .icon-btn:focus-visible, .card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- Tela inicial ---------- */
#screen-start { align-items: center; justify-content: center; position: relative; overflow-x: hidden; overflow-y: auto; padding: 16px; }
.start-box { position: relative; z-index: 2; width: min(440px, 100%); text-align: center; background: rgba(27, 20, 16, .82); border: 1px solid rgba(226, 181, 90, .25); border-radius: 22px; padding: 22px 18px; box-shadow: var(--shadow); backdrop-filter: blur(4px); }
.logo-coin { width: 96px; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); animation: coin-float 4s ease-in-out infinite; }
@keyframes coin-float { 50% { transform: translateY(-6px) rotate(-4deg); } }
h1 { margin: .2em 0 .1em; font-size: clamp(2rem, 8vw, 2.8rem); color: var(--gold); text-shadow: 0 3px 0 #5b3b0e, 0 8px 20px rgba(0,0,0,.6); line-height: 1; }
h1 span { display: block; font-size: .55em; color: var(--ink); text-shadow: none; letter-spacing: .25em; text-transform: uppercase; margin-top: .25em; }
.tagline { color: var(--ink-dim); margin: .6em 0 1.2em; }
.start-form { display: grid; gap: 14px; text-align: left; }
.field { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.field > span, .field legend { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-dim); font-weight: 700; padding: 0; }
.field input[type=text], .field input:not([type]) , #player-name { background: #120d0a; border: 1px solid #5a4533; color: var(--ink); border-radius: 12px; padding: .75em .9em; font-size: 1rem; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #120d0a; border-radius: 12px; padding: 4px; border: 1px solid #5a4533; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented span { display: block; text-align: center; padding: .6em .3em; border-radius: 9px; font-weight: 700; font-size: .92rem; color: var(--ink-dim); }
.segmented input:checked + span { background: var(--gold-2); color: #1d1206; }
.segmented input:focus-visible + span { outline: 2px solid var(--gold); }
.start-hero { position: absolute; right: max(-60px, calc(50% - 560px)); bottom: 0; height: min(92dvh, 760px); width: auto; opacity: .9; pointer-events: none; z-index: 1; filter: drop-shadow(0 0 30px rgba(0,0,0,.7)); }
@media (max-width: 900px) { .start-hero { opacity: .18; right: 50%; transform: translateX(50%); } }

/* ---------- Mesa ---------- */
#screen-game { flex-direction: column; overflow: hidden; } /* o tremor da mesa nunca alarga a página */
.topbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); background: linear-gradient(180deg, #120d0a, rgba(18,13,10,.6)); border-bottom: 1px solid rgba(226,181,90,.18); }
.scoreboard { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-width: 0; }
.score { display: flex; align-items: center; gap: 8px; min-width: 0; }
.score-cpu { justify-content: flex-end; }
.score-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.score-text.right { text-align: right; }
.score-name { font-size: .72rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-text strong { font-size: 1.5rem; font-family: var(--font-titulo); color: var(--gold); }
.stake { position: relative; width: 58px; height: 56px; display: grid; place-items: center; background: url('../assets/moeda.webp') center / contain no-repeat; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.stake-label { position: absolute; top: -4px; font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dim); background: #120d0a; padding: 0 5px; border-radius: 6px; }
.stake strong { font-family: var(--font-titulo); font-size: 1.55rem; color: #fff; text-shadow: 0 2px 3px #000, 0 0 10px #000; }
.stake.bump { animation: bump .6s ease; }
@keyframes bump { 30% { transform: scale(1.35) rotate(-8deg); } 60% { transform: scale(.95); } }

/* Dado de pontuação */
.die { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(145deg, #fffaf0, #e6dccb); box-shadow: inset 0 -3px 0 #c6b9a3, 0 3px 6px rgba(0,0,0,.4); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 5px; flex: none; }
.die i { width: 6px; height: 6px; border-radius: 50%; background: #2b1a10; place-self: center; visibility: hidden; }
.die i.on { visibility: visible; }
.die.fdg { box-shadow: 0 0 0 3px var(--crimson), 0 0 14px var(--crimson); }

.table-wrap { flex: 1; display: grid; grid-template-columns: 1fr; min-height: 0; position: relative; }
.table {
  display: grid; grid-template-rows: auto 1fr auto; min-height: 0; gap: 4px;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.06), transparent 60%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, var(--felt-2), var(--felt));
  padding: 8px 12px calc(10px + var(--safe-b));
  overflow: hidden;
}

.opponent { display: flex; align-items: center; justify-content: center; gap: 12px; }
.avatar-wrap { position: relative; flex: none; }
.avatar { width: clamp(52px, 9dvh, 76px); height: clamp(52px, 9dvh, 76px); object-fit: cover; object-position: 50% 4%; border-radius: 50%; border: 3px solid var(--gold-2); background: #2a1f18; box-shadow: var(--shadow); }
.avatar-wrap.thinking .avatar { animation: think 1s ease-in-out infinite; }
@keyframes think { 50% { box-shadow: 0 0 0 6px rgba(226,181,90,.25), var(--shadow); } }
.bubble {
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%) scale(.8); transform-origin: left center;
  background: var(--parchment); color: var(--parchment-ink); font-weight: 900; padding: .45em .8em; border-radius: 12px; white-space: nowrap;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 5; font-size: .95rem;
}
.bubble::before { content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); border: 7px solid transparent; border-right-color: var(--parchment); border-left: 0; }
.bubble.show { opacity: 1; transform: translateY(-50%) scale(1); }
.bubble.alert { background: var(--crimson); color: #fff; }
.bubble.alert::before { border-right-color: var(--crimson); }
.bubble.guarantee {
  background: linear-gradient(135deg, #2b1807, #5c380f);
  color: #fff4cb;
  border: 2px solid #ffd700;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.65), var(--shadow);
  font-size: 1.05rem;
  letter-spacing: .02em;
}
.bubble.guarantee::before { border-right-color: #ffd700; }

.hand { display: flex; justify-content: center; align-items: flex-end; gap: clamp(6px, 2vw, 14px); min-height: calc(var(--card-w-cpu) * var(--card-ratio)); }
.hand-me { min-height: calc(var(--card-w) * var(--card-ratio) + 10px); padding-top: 10px; }

/* Cartas */
.card {
  --w: var(--card-w);
  width: var(--w); aspect-ratio: 722 / 1125; border-radius: calc(var(--w) * .07); padding: 0; border: 0;
  background: #000 center / cover no-repeat; box-shadow: 0 6px 14px rgba(0,0,0,.5); position: relative; flex: none;
  transition: transform .18s ease, box-shadow .18s ease, opacity .2s; cursor: default; overflow: hidden;
}
.card img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.hand-cpu .card { --w: var(--card-w-cpu); }
.slot .card { --w: var(--card-w-table); }
.hand-me .card.playable { cursor: pointer; }
.hand-me .card.playable:hover { transform: translateY(-6px); }
.hand-me .card.selected { transform: translateY(-14px) scale(1.04); box-shadow: 0 0 0 3px var(--gold), 0 14px 26px rgba(0,0,0,.6); }
.hand-me .card:not(.playable) { filter: saturate(.85); }
.card .tag { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); background: rgba(18,13,10,.88); color: var(--gold); font-size: clamp(.55rem, 1.6vw, .72rem); font-weight: 900; padding: .25em .55em; border-radius: 6px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.card.revealed { box-shadow: 0 0 0 2px var(--crimson), 0 6px 14px rgba(0,0,0,.5); }
.card.facedown-mine { opacity: .75; }
.card.enter { animation: card-in .35s ease-out; }
.card.enter-cpu { animation: card-in-cpu .35s ease-out; }
@keyframes card-in { from { transform: translateY(60px) scale(.8); opacity: 0; } }
@keyframes card-in-cpu { from { transform: translateY(-60px) scale(.8); opacity: 0; } }
.card.win { box-shadow: 0 0 0 3px var(--win), 0 0 20px rgba(76,175,106,.6); }
.card.lose { filter: grayscale(.7) brightness(.7); }
.card.tie { box-shadow: 0 0 0 3px var(--tie); }

/* Campo de batalha */
.battlefield { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto 1fr; align-items: center; gap: 4px 10px; min-height: 0; position: relative; }
.banner { grid-column: 1 / -1; text-align: center; font-family: var(--font-titulo); font-weight: 800; color: var(--gold); font-size: clamp(.8rem, 2.6vw, 1rem); min-height: 1.3em; letter-spacing: .06em; }
.banner.danger { color: #ff8a80; }
.rounds { display: flex; flex-direction: column; gap: 8px; justify-self: start; }
.round-pip { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(226,181,90,.45); display: grid; place-items: center; font-size: .72rem; font-weight: 900; color: var(--ink-dim); background: rgba(0,0,0,.2); }
.round-pip.current { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 10px rgba(226,181,90,.5); }
.round-pip.won { background: var(--win); border-color: var(--win); color: #fff; }
.round-pip.lost { background: var(--lose); border-color: var(--lose); color: #fff; }
.round-pip.tied { background: var(--tie); border-color: var(--tie); color: #1d1206; }
.arena { display: flex; gap: clamp(10px, 4vw, 28px); justify-content: center; align-items: center; min-height: 0; padding: 10px 0; }
.slot-cpu { transform: translateY(-9%) rotate(-3deg); }
.slot-me { transform: translateY(9%) rotate(3deg); }
.slot { width: var(--card-w-table); aspect-ratio: 722 / 1125; border-radius: 10px; border: 2px dashed rgba(226,181,90,.25); display: grid; place-items: center; position: relative; }
.slot:empty::after { content: attr(data-label); color: rgba(245,234,214,.25); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.pile { justify-self: end; position: relative; width: calc(var(--card-w-cpu) * .85); }
.pile-img { width: 100%; border-radius: 8px; box-shadow: 3px 3px 0 #120d0a, 6px 6px 0 #0c0806, 0 10px 20px rgba(0,0,0,.5); display: block; }
.pile span { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); background: #120d0a; color: var(--ink-dim); font-size: .7rem; padding: 1px 7px; border-radius: 8px; font-weight: 700; }

/* Jogador */
.me { display: grid; gap: 6px; }
.status-line { text-align: center; font-weight: 700; color: var(--ink); min-height: 1.4em; font-size: clamp(.85rem, 2.8vw, 1rem); }
.status-line.your-turn { color: var(--gold); }
.actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.actions .btn { padding: .6em .5em; font-size: clamp(.78rem, 2.8vw, .95rem); }

/* Diário */
.log-panel { display: none; background: #120d0a; border-left: 1px solid rgba(226,181,90,.18); padding: 12px; overflow: auto; min-height: 0; }
.log-panel h2 { margin: 0 0 8px; font-size: 1rem; color: var(--gold); }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .85rem; }
.log li { padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.04); color: var(--ink-dim); border-left: 3px solid transparent; }
.log li.me { border-left-color: var(--gold); }
.log li.cpu { border-left-color: var(--crimson); }
.log li.sys { color: var(--ink); background: rgba(226,181,90,.08); }
.log-panel.open { display: block; position: absolute; inset: 0 0 0 auto; width: min(340px, 88vw); z-index: 20; box-shadow: var(--shadow); }

@media (min-width: 980px) {
  .table-wrap { grid-template-columns: 1fr 300px; }
  .log-panel { display: block; position: static; width: auto; }
  .log-panel.open { position: static; width: auto; box-shadow: none; }
  #btn-log { visibility: hidden; }
  .actions { max-width: 620px; margin: 0 auto; width: 100%; }
}
@media (min-width: 700px) {
  :root { --card-w: min(18vw, 15dvh, 150px); --card-w-table: min(16vw, 14dvh, 130px); --card-w-cpu: min(10vw, 9dvh, 92px); }
}

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(8, 5, 3, .72); display: grid; place-items: center; z-index: 50; padding: 16px; animation: fade .2s ease; }
.modal-backdrop[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: linear-gradient(180deg, #fbf1dc, var(--parchment)); color: var(--parchment-ink); border-radius: 18px; padding: 20px 18px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6); border: 3px solid var(--gold-2); animation: pop .25s ease; }
.modal.wide { width: min(640px, 100%); }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }
.modal h2 { margin: 0 0 10px; font-size: 1.35rem; color: var(--crimson-2); text-align: center; }
.modal-body { font-size: 1rem; line-height: 1.45; }
.modal-body p { margin: .4em 0; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.modal-actions .btn { flex: 1 1 140px; }
.modal .btn-secondary { background: #6b5240; color: #fff; }
.modal .btn-ghost { color: var(--parchment-ink); }
.modal .mini-hand { display: flex; justify-content: center; gap: 8px; margin: 10px 0; }
.modal .mini-hand .card { --w: min(22vw, 92px); }
.modal .big-number { font-family: var(--font-titulo); font-size: 3rem; text-align: center; color: var(--crimson-2); margin: 0; line-height: 1; }
.modal .center { text-align: center; }
.modal label.range { display: grid; gap: 6px; margin: 10px 0; font-weight: 700; }
.modal input[type=range] { width: 100%; accent-color: var(--crimson); }
.modal .dice-roll { font-size: 3.4rem; text-align: center; margin: 8px 0; }
.modal .dice-roll.rolling { animation: roll .5s linear infinite; }
@keyframes roll { to { transform: rotate(360deg); } }
.rules h3 { margin: 1em 0 .3em; color: var(--crimson-2); font-size: 1.05rem; }
.rules ul { padding-left: 1.2em; margin: .3em 0; }
.rules li { margin: .25em 0; }
.rules-cards { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .9rem; }
.result-score { display: flex; justify-content: center; align-items: center; gap: 18px; font-family: var(--font-titulo); font-size: 2rem; margin: 6px 0; }
.result-score small { display: block; font-family: var(--font-texto); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: #7b5d40; text-align: center; }
.menu-list { display: grid; gap: 10px; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translate(-50%, 30px); background: #120d0a; color: var(--ink); border: 1px solid var(--gold-2); padding: .7em 1.1em; border-radius: 12px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .25s; z-index: 60; max-width: calc(100vw - 32px); text-align: center; font-weight: 700; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Telas baixas (celular deitado) */
@media (max-height: 520px) {
  :root { --card-w: min(14vw, 22dvh, 110px); --card-w-table: min(11vw, 20dvh); --card-w-cpu: min(8vw, 13dvh); }
  .banner { display: none; }
  .avatar { width: 44px; height: 44px; }
  .table { grid-template-rows: auto 1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Mesa de equipes (2x2 / 3x3) ---------- */
.mode-team { --card-w: min(23vw, 12dvh, 128px); }
.mode-team .opponent, .mode-team .arena { display: none; }
.mode-team .table { grid-template-rows: 1fr auto; }
.mode-team .battlefield { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; container-type: size; overflow: hidden auto; overscroll-behavior: contain; }
.ring {
  /* 2 linhas de lugares (etiqueta + cabeçalho + carta) devem caber na altura da mesa */
  --fit-h: calc((100cqh - 214px) / 3.2); /* folga para legenda, papel e balões dos lugares */
  --seat-card: min(24vw, var(--fit-h), 132px);
  grid-row: 3; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 4px; align-content: space-evenly; justify-items: center; align-items: center; min-height: 0; height: 100%; position: relative;
}
.ring[hidden] { display: none; }
[data-players="4"] .ring { grid-template-areas: ". t ." "l c r"; }
[data-players="6"] .ring { --seat-card: min(22vw, var(--fit-h), 120px); grid-template-areas: "tl t tr" "l c r"; }
.pos-me { grid-area: c; } .pos-t { grid-area: t; } .pos-l { grid-area: l; } .pos-r { grid-area: r; } .pos-tl { grid-area: tl; } .pos-tr { grid-area: tr; }
.ring-center { grid-area: c; display: flex; align-items: flex-end; justify-content: center; gap: 6px; align-self: end; }
.ring-center .pile { width: calc(var(--seat-card) * .42); flex: none; margin-bottom: 4px; }
.my-slot { border: 2px dashed rgba(226,181,90,.55); background: rgba(226,181,90,.07); }
.ring-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 100%; }
.seat-head { display: flex; align-items: center; gap: 4px; max-width: 100%; background: rgba(0,0,0,.3); border-radius: 999px; padding: 2px 7px 2px 2px; border: 1px solid transparent; transition: box-shadow .2s; }
.team-a .seat-head { border-color: rgba(226,181,90,.6); }
.team-b .seat-head { border-color: rgba(208,50,63,.8); }
.seat-avatar { width: 26px; height: 26px; border-radius: 50%; background: #2a1f18 50% 14% / 190% auto no-repeat; flex: none; border: 2px solid var(--gold-2); }
.team-b .seat-avatar { border-color: var(--crimson); }
.seat-name { font-size: .72rem; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62px; }
.seat-chips { display: flex; gap: 2px; flex: none; }
.chip { min-width: 16px; height: 20px; padding: 0 3px; border-radius: 4px; background: var(--parchment); color: var(--parchment-ink); font-size: .68rem; font-weight: 900; display: grid; place-items: center; }
.chip.back { background: linear-gradient(135deg, #a8202c, #4a0f14); width: 11px; min-width: 11px; padding: 0; border: 1px solid var(--gold-2); }
.chip.revealed { box-shadow: 0 0 0 2px var(--crimson); }
/* Telas estreitas: as fichas descem para baixo do nome, para o nome não ser cortado. */
@media (max-width: 520px) {
  .seat-head { flex-wrap: wrap; justify-content: center; row-gap: 2px; border-radius: 12px; padding: 2px 6px 3px 2px; }
  .seat-name { max-width: 64px; font-size: .68rem; }
  .seat-chips { flex-basis: 100%; justify-content: center; }
  .chip { height: 16px; min-width: 14px; font-size: .6rem; }
  .chip.back { width: 9px; min-width: 9px; }
  /* No celular a etiqueta vira ícone ao lado do nome (as cores e a legenda continuam dizendo quem é quem). */
  .seat-role { display: none; }
  .team-a .seat-name::before { content: '🛡 '; }
  .team-b .seat-name::before { content: '⚔ '; }
  .seat-name { max-width: 76px; }
  .mode-team { --card-w: min(21vw, 10.5dvh, 120px); }
}
.ring-slot { width: var(--seat-card); aspect-ratio: 722 / 1125; border-radius: 8px; border: 2px dashed rgba(226,181,90,.22); display: grid; place-items: center; position: relative; }
.ring-slot:empty::after { content: attr(data-label); color: rgba(245,234,214,.28); font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; }
.ring-slot .card { --w: var(--seat-card); }
.ring-cell.acting .seat-head { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(226,181,90,.6); }
.ring-cell.thinking .seat-avatar { animation: think 1s ease-in-out infinite; }
.seat-bubble { left: 50%; top: 0; transform: translate(-50%, -75%) scale(.8); transform-origin: center bottom; font-size: .8rem; }
.seat-bubble.show { transform: translate(-50%, -75%) scale(1); }
.seat-bubble::before { left: 50%; top: 100%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--parchment); border-bottom: 0; }
.seat-bubble.alert::before { border-right-color: transparent; border-top-color: var(--crimson); }
.mini-label { margin: 10px 0 0; font-weight: 900; text-align: center; font-size: .85rem; color: var(--crimson-2); }
.log li.ally { border-left-color: #6fa8dc; }

/* Balões dos cantos não saem da tela */
.pos-r .seat-bubble, .pos-tr .seat-bubble { left: auto; right: 0; transform: translate(0, -75%) scale(.8); transform-origin: right bottom; }
.pos-r .seat-bubble.show, .pos-tr .seat-bubble.show { transform: translate(0, -75%) scale(1); }
.pos-l .seat-bubble, .pos-tl .seat-bubble { left: 0; transform: translate(0, -75%) scale(.8); transform-origin: left bottom; }
.pos-l .seat-bubble.show, .pos-tl .seat-bubble.show { transform: translate(0, -75%) scale(1); }
.pos-r .seat-bubble::before, .pos-tr .seat-bubble::before { left: auto; right: 18px; transform: none; }
.pos-l .seat-bubble::before, .pos-tl .seat-bubble::before { left: 18px; transform: none; }
.seat-bubble { max-width: min(46vw, 220px); white-space: normal; }

@media (min-width: 700px) {
  .mode-team { --card-w: min(14vw, 13dvh, 130px); }
  [data-players="4"] .ring { --seat-card: min(15vw, var(--fit-h), 140px); }
  [data-players="6"] .ring { --seat-card: min(13vw, var(--fit-h), 124px); }
  .seat-name { max-width: 110px; font-size: .8rem; }
}
@media (max-height: 520px) {
  [data-players] .ring { --seat-card: min(9vw, var(--fit-h)); }
  .mode-team { --card-w: min(12vw, 20dvh, 100px); }
}

/* ===================================================================== */
/* Efeitos (fx.js): camada por cima da mesa, sem receber cliques          */
/* ===================================================================== */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.fx-stamp {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 2px; padding: .35em .9em .45em;
  border: 4px double currentColor; border-radius: 14px;
  background: radial-gradient(ellipse at center, rgba(20, 12, 8, .88), rgba(20, 12, 8, .6));
  box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 0 40px var(--glow, rgba(226,181,90,.55));
  color: var(--gold); text-align: center; white-space: nowrap; max-width: calc(100vw - 32px);
  animation: stamp-in var(--ms) cubic-bezier(.2, 1.4, .4, 1) both;
}
.fx-stamp strong { font-family: var(--font-titulo); font-weight: 800; font-size: clamp(2rem, 9vw, 4.2rem); letter-spacing: .06em; line-height: 1; text-shadow: 0 3px 0 rgba(0,0,0,.6), 0 0 18px var(--glow, rgba(226,181,90,.7)); }
.fx-stamp span { font-weight: 900; font-size: clamp(.85rem, 3.4vw, 1.15rem); color: var(--ink); text-transform: uppercase; letter-spacing: .08em; }
.fx-stamp.tone-crimson { color: #ff6b6b; --glow: rgba(255, 70, 70, .6); }
.fx-stamp.tone-win { color: #7be08f; --glow: rgba(90, 220, 120, .5); }
.fx-stamp.tone-grey { color: #c9c2b8; --glow: rgba(200, 200, 200, .25); }
.fx-stamp.tone-frost { color: #bfe3ff; --glow: rgba(160, 210, 255, .6); }
.fx-stamp.kind-aumento strong { font-size: clamp(2.3rem, 11vw, 5rem); }
.fx-stamp.kind-recusada strong { text-decoration: line-through 4px; }
.fx-stamp.kind-aceita, .fx-stamp.kind-recusada, .fx-stamp.kind-empate { top: 36%; }
.fx-stamp.kind-aceita strong, .fx-stamp.kind-recusada strong, .fx-stamp.kind-empate strong { font-size: clamp(1.6rem, 7vw, 3rem); }
.fx-stamp.kind-vitoria, .fx-stamp.kind-derrota { top: 22%; }
.fx-stamp.calm { animation: stamp-calm var(--ms) ease both; }
@keyframes stamp-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.6) rotate(-10deg); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(.92) rotate(-4deg); }
  22% { transform: translate(-50%, -50%) scale(1.04) rotate(-3deg); }
  30%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(.96) rotate(-3deg); }
}
@keyframes stamp-calm { 0%, 100% { opacity: 0; } 10%, 85% { opacity: 1; } }

.fx-vignette { position: absolute; inset: 0; animation: vignette var(--ms) ease both; }
.v-danger { box-shadow: inset 0 0 120px 30px rgba(200, 20, 30, .55); }
.v-glory { box-shadow: inset 0 0 120px 30px rgba(226, 181, 90, .45); }
.v-defeat { background: radial-gradient(ellipse at center, transparent 35%, rgba(40, 0, 0, .6)); }
.v-fire { box-shadow: inset 0 0 140px 40px rgba(255, 90, 20, .5); }
.v-frost { box-shadow: inset 0 0 140px 40px rgba(170, 220, 255, .55); background: radial-gradient(ellipse at center, transparent 50%, rgba(190, 230, 255, .18)); }
@keyframes vignette { 0% { opacity: 0; } 15%, 60% { opacity: 1; } 100% { opacity: 0; } }

.fx-points {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--font-titulo); font-weight: 800; font-size: clamp(2rem, 8vw, 3.4rem);
  color: var(--gold); text-shadow: 0 3px 0 rgba(0,0,0,.6), 0 0 18px rgba(226,181,90,.8);
  animation: points-fly 1.1s cubic-bezier(.5, 0, .7, 1) both;
}
.fx-points.tone-crimson { color: #ff6b6b; text-shadow: 0 3px 0 rgba(0,0,0,.6), 0 0 18px rgba(255,70,70,.8); }
@keyframes points-fly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  25% { opacity: 1; transform: translate(-50%, -80%) scale(1.3); }
  100% { opacity: .2; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.5); }
}

.fx-shake { animation: shake .5s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake {
  10%, 90% { transform: translate(calc(-2px * var(--shake, 1)), 0); }
  20%, 80% { transform: translate(calc(4px * var(--shake, 1)), calc(1px * var(--shake, 1))); }
  30%, 50%, 70% { transform: translate(calc(-7px * var(--shake, 1)), calc(-1px * var(--shake, 1))); }
  40%, 60% { transform: translate(calc(7px * var(--shake, 1)), calc(1px * var(--shake, 1))); }
}
.fx-score-hit { animation: score-hit .7s ease; }
@keyframes score-hit { 30% { transform: scale(1.25); filter: brightness(1.6); } }
.fx-pip-pop { animation: pip-pop .6s ease; }
@keyframes pip-pop { 40% { transform: scale(1.45); } }

/* Fim de jogo: o modal ganha moldura de vitória ou de derrota */
.fx-victory .modal { box-shadow: 0 0 0 2px var(--gold), 0 0 60px rgba(226,181,90,.6), var(--shadow); }
.fx-defeat .modal { box-shadow: 0 0 0 2px var(--crimson), 0 0 60px rgba(168,32,44,.6), var(--shadow); }
.fx-defeat #screen-game .table { filter: saturate(.5) brightness(.8); transition: filter 1s; }

@media (prefers-reduced-motion: reduce) {
  .fx-stamp { animation: stamp-calm var(--ms) ease both; }
  .fx-points { animation: stamp-calm 1.1s ease both; }
  .fx-shake, .fx-score-hit, .fx-pip-pop { animation: none; }
}

/* Painel de som e animações */
.audio-panel { display: grid; gap: 12px; }
.audio-panel label.vol { display: grid; grid-template-columns: 5.5em 1fr 2.6em; align-items: center; gap: 8px; font-weight: 700; }
.audio-panel output { text-align: right; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.audio-list { display: grid; gap: 4px; max-height: 38dvh; overflow: auto; padding-right: 4px; }
.audio-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; font-size: .85rem; padding: 4px 6px; border-radius: 8px; background: rgba(0,0,0,.2); }
.audio-row code { font-size: .72rem; color: var(--ink-dim); }
.audio-row .src { font-size: .7rem; color: var(--ink-dim); }
.audio-row .src.file { color: var(--win); }
.audio-row button { padding: .25em .7em; }

/* ===================================================================== */
/* Equipes: quem é parceiro e quem é rival                                */
/* ===================================================================== */
.team-legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: clamp(.66rem, 2.4vw, .8rem); font-weight: 900; }
.team-legend[hidden] { display: none; }
.team-legend span { white-space: nowrap; padding: 1px 9px; border-radius: 999px; }
.legend-us { color: #2a1a08; background: linear-gradient(180deg, #ffe08a, var(--gold)); }
.legend-them { color: #fff; background: linear-gradient(180deg, #d0323f, var(--crimson-2)); }

.seat-role { font-size: .55rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; padding: 0 7px; border-radius: 6px 6px 0 0; margin-bottom: -3px; line-height: 1.5; }
.team-a .seat-role { color: #2a1a08; background: var(--gold); }
.team-b .seat-role { color: #fff; background: var(--crimson); }
.team-a .seat-head { background: linear-gradient(180deg, rgba(226,181,90,.32), rgba(0,0,0,.35)); border-width: 2px; }
.team-b .seat-head { background: linear-gradient(180deg, rgba(168,32,44,.45), rgba(0,0,0,.35)); border-width: 2px; }
.team-a .ring-slot { border-color: rgba(226,181,90,.5); background: rgba(226,181,90,.05); }
.team-b .ring-slot { border-color: rgba(208,50,63,.55); background: rgba(168,32,44,.07); }
.team-a .ring-slot .card { box-shadow: 0 0 0 2px var(--gold), 0 6px 14px rgba(0,0,0,.5); }
.team-b .ring-slot .card { box-shadow: 0 0 0 2px #d0323f, 0 6px 14px rgba(0,0,0,.5); }
.team-a .ring-slot .card.win, .team-b .ring-slot .card.win { box-shadow: 0 0 0 3px var(--win), 0 0 18px rgba(76,175,106,.7); }
.ring-cell.acting .seat-role { filter: brightness(1.2); }

/* Quadro de opiniões da equipe nas decisões */
.council { display: grid; gap: 5px; margin-top: 10px; text-align: left; }
.council-row { display: grid; grid-template-columns: 28px auto auto 1fr; align-items: center; gap: 4px 8px; padding: 5px 8px; border-radius: 10px; background: rgba(0,0,0,.08); border-left: 4px solid var(--tie); }
.council-row .seat-avatar { width: 26px; height: 26px; }
.council-row b { color: var(--parchment-ink); }
.council-row small { grid-column: 2 / -1; color: #6b5640; font-size: .75rem; }
.council-vote { font-weight: 900; font-size: .78rem; padding: 1px 8px; border-radius: 999px; justify-self: start; }
.vote-accept { border-left-color: var(--win); } .vote-accept .council-vote { background: var(--win); color: #fff; }
.vote-refuse { border-left-color: var(--lose); } .vote-refuse .council-vote { background: var(--lose); color: #fff; }
.vote-raise { border-left-color: var(--crimson); } .vote-raise .council-vote { background: var(--crimson); color: #fff; }
.council-row.guarantee {
  background: linear-gradient(135deg, rgba(226, 181, 90, 0.28), rgba(255, 215, 0, 0.15));
  border-left: 5px solid #ffd700;
  box-shadow: 0 0 12px rgba(226, 181, 90, 0.35);
}
.council-row.guarantee .council-vote {
  background: linear-gradient(135deg, #ffd700, #e2b55a);
  color: #1a0f05;
  font-weight: 900;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.council-row.guarantee small {
  color: #8c5d18;
  font-weight: 800;
}

/* Placar de confrontos e rodadas, logo abaixo do topo */
.match-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 12px; background: rgba(0,0,0,.35); border-bottom: 1px solid rgba(226,181,90,.15); font-size: .75rem; font-weight: 900; color: var(--ink-dim); }
.match-strip .rounds { flex-direction: row; gap: 6px; justify-self: auto; }
.match-strip .round-pip { width: auto; height: 22px; min-width: 34px; border-radius: 999px; padding: 0 8px; font-size: .7rem; white-space: nowrap; }
.strip-confronto, .strip-wins { white-space: nowrap; }
.strip-wins { color: var(--gold); font-size: .85rem; }

/* ---------------------------------------------------------------------------
   Online: entrada, saguão, prazo e sugestões da equipe
   --------------------------------------------------------------------------- */
#screen-online { align-items: center; justify-content: center; overflow-x: hidden; overflow-y: auto; padding: 16px; }
.online-box { display: grid; gap: 14px; }
.online-box h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }

/* Salas abertas */
.open-rooms-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(226, 181, 90, 0.28);
  border-radius: var(--radius);
  padding: 12px;
  display: grid;
  gap: 8px;
}
.rooms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rooms-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4caf6a;
  box-shadow: 0 0 10px #4caf6a;
  display: inline-block;
  animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot { 50% { opacity: 0.35; transform: scale(0.9); } }
.btn-sm {
  min-height: 28px;
  padding: 2px 10px;
  font-size: 0.8rem;
}
.open-rooms-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}
.open-room-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(226, 181, 90, 0.08);
  border: 1px solid rgba(226, 181, 90, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
}
.room-item-info {
  display: grid;
  gap: 2px;
  text-align: left;
}
.room-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.room-item-code {
  font-family: var(--font-titulo);
  letter-spacing: 0.15em;
  color: var(--gold);
}
.room-item-desc {
  color: var(--ink-dim);
  font-size: 0.76rem;
}
.mode-badge {
  font-size: 0.7rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  color: var(--ink);
}
.rooms-empty, .rooms-loading {
  margin: 8px 0;
  font-size: 0.85rem;
  color: var(--ink-dim);
  text-align: center;
}

.join-form { border-top: 1px solid rgba(226,181,90,.25); padding-top: 14px; }
#online-code { text-transform: uppercase; letter-spacing: .3em; font-weight: 900; text-align: center; }
.online-rules { margin: 0; padding: 0; list-style: none; text-align: left; font-size: .86rem; color: var(--ink-dim); display: grid; gap: 6px; }
.online-error { margin: 0; min-height: 1.2em; color: #ff9a8f; font-weight: 700; }
.online-lobby { display: grid; gap: 10px; }
.online-lobby[hidden], #online-lobby[hidden], #online-entry[hidden] { display: none !important; }
.online-lobby .mini-label { margin: 0; color: var(--ink-dim); }
.room-code { margin: 0; font-family: var(--font-titulo); font-size: clamp(2rem, 11vw, 3rem); font-weight: 800; letter-spacing: .25em; color: var(--gold); user-select: all; }
.btn-invite { width: 100%; }
.lobby-status { margin: 0; color: var(--ink); }
.lobby-seats { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; text-align: left; }
.lobby-seat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; border: 2px solid rgba(226,181,90,.5); background: rgba(226,181,90,.12); }
.lobby-seat.team-b { border-color: rgba(208,50,63,.8); background: rgba(168,32,44,.22); }
.lobby-seat.empty b { color: var(--ink-dim); font-weight: 400; font-style: italic; }
.lobby-seat.is-npc { border-style: dashed; }
.lobby-seat small { color: var(--ink-dim); text-align: right; }
.lobby-hint { color: var(--ink-dim); font-size: 0.78rem; text-align: center; display: block; }

.npc-pill {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(226, 181, 90, 0.25);
  color: #fce2a6;
  border: 1px solid rgba(226, 181, 90, 0.4);
  margin-left: 4px;
  vertical-align: middle;
}
.npc-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
  color: #e2b55a;
  border: 1px solid rgba(226, 181, 90, 0.35);
  margin-left: 6px;
}

/* Animação de entrega de cartas: carta por carta */
@keyframes deal-card-mine {
  0% { transform: translateY(-220px) scale(0.35) rotate(-15deg); opacity: 0; }
  35% { opacity: 0.85; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes deal-card-cpu {
  0% { transform: translateY(220px) scale(0.35) rotate(15deg); opacity: 0; }
  35% { opacity: 0.85; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes deal-chip {
  0% { transform: scale(0.2) translateY(50px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.hand-me .card.deal-anim {
  animation: deal-card-mine 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#hand-cpu .card.deal-anim {
  animation: deal-card-cpu 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.chip.deal-anim {
  animation: deal-chip 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .hand-me .card.deal-anim,
  #hand-cpu .card.deal-anim,
  .chip.deal-anim {
    animation: none !important;
  }
}

.online-timer { font-weight: 900; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.35); color: var(--ink-dim); white-space: nowrap; }
.online-timer.mine { color: #1d1206; background: var(--gold); }
.online-timer.urgent { background: var(--crimson); color: #fff; animation: timer-pulse 1s ease-in-out infinite; }
@keyframes timer-pulse { 50% { transform: scale(1.08); } }
.modal-timer { margin: 10px 0 0; text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; }
.modal-timer.urgent { color: var(--crimson); }
.suggest { margin-top: 10px; }
.suggest .segmented { display: flex; gap: 6px; flex-wrap: wrap; }
.suggest .btn { flex: 1 1 auto; min-height: 40px; padding: 6px 10px; font-size: .9rem; }
.log li.timeout { border-left-color: var(--crimson); }
@media (prefers-reduced-motion: reduce) { .online-timer.urgent { animation: none; } }

/* Inputs com botão de nome aleatório */
.name-input-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.name-input-wrap input {
  flex: 1;
  min-width: 0;
}
.btn-random-name {
  flex-shrink: 0;
  font-size: 1.25rem;
  padding: 0.4em 0.6em;
  line-height: 1;
  border: 1px solid rgba(226, 181, 90, 0.35);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn-random-name:hover {
  transform: rotate(20deg) scale(1.08);
  background: rgba(226, 181, 90, 0.15);
}

/* Guerras (partidas) no strip do jogo */
.strip-wars {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--gold);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(226, 181, 90, 0.25);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.strip-wars strong {
  color: #fff;
  margin-left: 2px;
}

/* Sugestões ao parceiro durante a vez dele */
.partner-suggestions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px auto;
  padding: 6px 12px;
  background: rgba(26, 18, 12, 0.85);
  border: 1px solid rgba(226, 181, 90, 0.4);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  max-width: fit-content;
  animation: fadeIn 0.2s ease;
}
.partner-suggestions .sugg-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.btn-sugg {
  font-size: 0.76rem;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.btn-sugg:hover {
  transform: scale(1.06);
  filter: brightness(1.15);
}
.sugg-faz {
  background: linear-gradient(180deg, #3aa856, #256b37);
  color: #fff;
  box-shadow: 0 2px 6px rgba(46, 125, 50, 0.4);
}
.sugg-deixa {
  background: linear-gradient(180deg, #64748b, #475569);
  color: #fff;
  box-shadow: 0 2px 6px rgba(71, 85, 105, 0.4);
}
.sugg-ofensiva {
  background: linear-gradient(180deg, var(--crimson), var(--crimson-2));
  color: #fff;
  box-shadow: 0 2px 6px rgba(168, 32, 44, 0.4);
}

/* Balão especial com confiança / garantia do NPC */
.bubble.guarantee {
  background: linear-gradient(135deg, #7c1a22 0%, #a8202c 60%, #e2b55a 100%) !important;
  color: #fff !important;
  font-weight: 900 !important;
  border: 2px solid var(--gold) !important;
  box-shadow: 0 4px 18px rgba(226, 181, 90, 0.5), 0 0 12px rgba(168, 32, 44, 0.6) !important;
  animation: guarantee-pulse 0.9s ease-in-out infinite alternate !important;
}
@keyframes guarantee-pulse {
  from { transform: scale(1); filter: drop-shadow(0 0 4px var(--gold)); }
  to { transform: scale(1.08); filter: drop-shadow(0 0 10px var(--gold)); }
}

/* Troca de assento no saguão online */
.btn-change-seat {
  margin-left: auto;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(226, 181, 90, 0.4);
  background: rgba(226, 181, 90, 0.15);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.btn-change-seat:hover {
  background: var(--gold);
  color: #1d1206;
}
.lobby-seat {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lobby-seat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   Tela online: abas "Entrar numa sala" / "Criar sala", convite por link e chat
   --------------------------------------------------------------------------- */
#online-choose[hidden], .online-panel[hidden], .invite-card[hidden] { display: none !important; }
#online-choose { display: grid; gap: 12px; }
.online-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(226, 181, 90, .25);
}
.online-tab {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.online-tab[aria-selected="true"] {
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color: var(--parchment-ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.online-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.online-panel { display: grid; gap: 12px; }
.join-inline { border: 0; padding: 0; }
.code-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.code-row .btn { min-width: 96px; }
.open-rooms-list { max-height: min(260px, 38dvh); }
.invite-card {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(226, 181, 90, .45);
  background: rgba(226, 181, 90, .1);
}
.invite-card .mini-label { margin: 0; color: var(--ink-dim); }
.invite-card .btn-big { width: 100%; }
.invite-info { margin: 0; color: var(--ink); font-size: .9rem; }
.btn-sugg.active { outline: 3px solid #fff; outline-offset: 1px; transform: scale(1.06); }

/* Chat da sala */
.chat-panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(20, 14, 10, .96);
  border: 1px solid rgba(226, 181, 90, .4);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: left;
}
.chat-panel[hidden] { display: none !important; }
.chat-panel.inline { height: 240px; box-shadow: none; }
.chat-panel.inline .chat-close { display: none; }
.chat-panel:not(.inline) {
  position: fixed;
  z-index: 60;
  right: 12px;
  bottom: calc(12px + var(--safe-b));
  width: min(360px, calc(100vw - 24px));
  height: min(420px, 60dvh);
}
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid rgba(226, 181, 90, .25); color: var(--gold); }
.chat-list { margin: 0; padding: 8px 10px; list-style: none; overflow-y: auto; display: grid; align-content: start; gap: 6px; overscroll-behavior: contain; }
.chat-msg { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 6px 9px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--ink); font-size: .88rem; overflow-wrap: anywhere; }
.chat-msg b { grid-column: 1 / -1; font-size: .74rem; color: var(--gold); }
.chat-msg.enemy b { color: #ff9a8f; }
.chat-msg.mine { background: rgba(226, 181, 90, .16); margin-left: 18%; }
.chat-msg time { font-size: .68rem; color: var(--ink-dim); align-self: end; }
.chat-msg.system { background: transparent; color: var(--ink-dim); font-style: italic; font-size: .8rem; padding: 2px 6px; }
.chat-empty { color: var(--ink-dim); font-size: .85rem; text-align: center; padding: 18px 0; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 8px; border-top: 1px solid rgba(226, 181, 90, .25); }
.chat-form input { min-width: 0; min-height: 38px; border-radius: 9px; border: 1px solid rgba(226, 181, 90, .4); background: rgba(0, 0, 0, .35); color: var(--ink); padding: 0 10px; font: inherit; }
.chat-btn { position: relative; }
.chat-btn[hidden] { display: none !important; }
.chat-unread {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--crimson);
  color: #fff;
  font-size: .7rem;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
}
.chat-unread[hidden] { display: none; }

/* A barra de sugestões não pode roubar altura da mesa (no celular as cartas deixavam de
   caber): ela flutua logo acima da sua área, em uma linha só. */
.me { position: relative; }
.partner-suggestions {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 0 4px;
  z-index: 5;
  white-space: nowrap;
  gap: 6px;
  padding: 4px 8px;
}
.partner-suggestions[hidden] { display: none; }
@media (max-width: 600px) {
  .partner-suggestions .sugg-label { display: none; }
  .btn-sugg { padding: 3px 8px; font-size: .72rem; }
  .strip-wars { font-size: .7rem; padding: 1px 6px; }
  .strip-wars .wars-label { display: none; }
}

/* Nada da tela online pode alargar a caixa no celular (o campo do código empurrava tudo). */
.online-box { grid-template-columns: minmax(0, 1fr); }
#online-entry { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
#online-choose, .online-panel, .online-tabs, .open-rooms-box, .invite-card { min-width: 0; }
.code-row { grid-template-columns: minmax(0, 1fr) auto; }
.code-row input { width: 100%; min-width: 0; }
.online-tab { min-width: 0; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { .online-tab { font-size: .86rem; } }
/* O chat continua à mão mesmo com uma janela de decisão aberta. */
.chat-btn { z-index: 55; }

/* O seu balão sai de baixo (da sua mão), não do topo do centro — senão parecia que era o
   parceiro de cima falando. */
.ring-center { position: relative; }
/* Fica dentro da célula (nada de sair da mesa, senão a mesa ganha rolagem no celular). */
.seat-bubble.my-bubble { top: auto; bottom: 4px; transform: translate(-50%, 0) scale(.8); transform-origin: center bottom; z-index: 6; }
.seat-bubble.my-bubble.show { transform: translate(-50%, 0) scale(1); }
.seat-bubble.my-bubble { background: #fff6dc; border: 2px solid var(--gold); }

/* Carregando (criar/entrar/começar): botões travados e aviso com rodinha. */
.online-loading { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--gold); font-weight: 800; }
.online-loading[hidden] { display: none; }
.online-loading::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 3px solid rgba(226,181,90,.3); border-top-color: var(--gold); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.online-box[aria-busy="true"] button:disabled, .online-box[aria-busy="true"] input:disabled { opacity: .55; cursor: progress; }

/* Modo Tático (Auditoria da IA e God Mode) */
.debug-drawer {
  position: fixed;
  top: 50px;
  right: 12px;
  width: 330px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 70px);
  background: rgba(13, 20, 30, 0.96);
  border: 1px solid #1e88e5;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 15px rgba(30, 136, 229, 0.35);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  z-index: 999;
  backdrop-filter: blur(8px);
  color: #e0e0e0;
  font-family: inherit;
  font-size: 0.85rem;
}
.debug-drawer[hidden] { display: none !important; }
.debug-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(30, 136, 229, 0.15);
  border-bottom: 1px solid rgba(30, 136, 229, 0.3);
}
.debug-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.debug-badge {
  background: #1e88e5;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.debug-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
  color: #90caf9;
}
.debug-list {
  list-style: none;
  margin: 0;
  padding: 8px 12px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.debug-empty {
  color: #78909c;
  font-style: italic;
  text-align: center;
  padding: 16px 0;
}
.debug-item {
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid #1e88e5;
  border-radius: 4px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: fadeIn .2s ease-in;
}
.debug-item.ally { border-left-color: #4caf50; }
.debug-item.enemy { border-left-color: #f44336; }
.debug-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #b0bec5;
}
.debug-item-actor { font-weight: 800; color: #fff; }
.debug-item-time { font-variant-numeric: tabular-nums; opacity: 0.7; }
.debug-item-reason {
  color: #e2e8f0;
  line-height: 1.35;
  font-size: 0.78rem;
}

/* Botão flutuante para abrir/fechar auditoria */
.btn-toggle-debug {
  position: fixed;
  bottom: 14px;
  right: 14px;
  background: linear-gradient(135deg, #0d47a1, #1976d2);
  color: #fff;
  border: 1px solid #42a5f5;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 10px rgba(33, 150, 243, 0.5);
  cursor: pointer;
  z-index: 998;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-toggle-debug:hover { transform: scale(1.05); }
.btn-toggle-debug[hidden] { display: none !important; }
.debug-count {
  background: #fff;
  color: #0d47a1;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 999px;
}

/* Cartas e fichas reveladas pelo modo debug */
.chip.debug-chip {
  background: linear-gradient(135deg, #152438, #0b1524) !important;
  color: #90caf9 !important;
  border: 1.5px solid #2196f3 !important;
  box-shadow: 0 0 8px rgba(33, 150, 243, 0.5) !important;
  font-weight: 900 !important;
}
.card.debug-revealed {
  box-shadow: 0 0 10px rgba(33, 150, 243, 0.6) !important;
  border: 1.5px solid #42a5f5 !important;
}
.card.debug-facedown {
  opacity: 0.85;
  filter: contrast(1.1);
  border: 1.5px dashed #42a5f5 !important;
}

/* Modo god: troca de cartas */
.debug-tools { display: flex; gap: 4px; }
/* Troca de cartas (modo god): dois passos, cartas grandes para o dedo. */
.god-swap { display: grid; gap: 14px; max-height: min(62vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.god-step { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.god-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold, #e2b55a); color: #1b1410; font-size: .8rem; font-weight: 800; flex: none; }
.god-hand h4 { margin: 0 0 6px; font-size: .9rem; }
.god-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.god-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 6px 4px;
  border-radius: 10px; border: 1px solid rgba(58, 38, 22, .22); background: rgba(255, 255, 255, .55); color: var(--parchment-ink); font: inherit; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .12s, background .12s, border-color .12s; }
.god-tile b { font-size: 1.35rem; line-height: 1; }
.god-tile small { font-size: .68rem; opacity: .8; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
.god-tile:not(:disabled):hover, .god-tile:not(:disabled):focus-visible { border-color: var(--gold-2); background: rgba(226, 181, 90, .28); outline: none; }
.god-tile:not(:disabled):active { transform: scale(.96); }
.god-tile:disabled { cursor: default; opacity: .45; }
.god-tile.is-chosen { opacity: 1; border: 2px solid var(--gold-2); background: rgba(226, 181, 90, .35); min-width: 84px; }
.god-tile.is-last { border-color: var(--win); box-shadow: 0 0 0 2px rgba(76, 175, 106, .4); }
.god-chosen { display: flex; gap: 12px; align-items: center; position: sticky; top: 0; z-index: 1; padding: 6px 0 10px; background: #f8ecd3; border-bottom: 1px solid rgba(58, 38, 22, .15); }
.god-swap .linkish { border: 0; background: none; padding: 0; color: var(--crimson); font: inherit; font-size: .9rem; cursor: pointer; text-decoration: underline; }
.god-swap .muted { opacity: .7; font-size: .88rem; }
.god-chosen p { margin: 0 0 4px; }
@media (max-width: 600px) {
  .god-grid { grid-template-columns: repeat(3, 1fr); }
  .god-swap { max-height: 64vh; }
}

/* ---------------------------------------------------------------------------
   Conta: barra de login/moedas, perfil (patente, cadência, partidas, extrato)
   --------------------------------------------------------------------------- */
.account-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; min-height: 0; margin-bottom: 8px; }
.account-bar:empty { display: none; }
.account-hint { color: var(--ink-dim); font-size: .78rem; }
.btn-google { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #222; border: 1px solid #ddd; text-decoration: none; font-weight: 600; }
.btn-google:hover { background: #f3f3f3; }
.g-logo { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-weight: 800; color: #fff;
  background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); }
.account-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 10px 4px 4px; border-radius: 999px;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(226, 181, 90, .45); color: var(--ink); cursor: pointer; font: inherit; }
.account-chip:hover { border-color: var(--gold); }
.chip-main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.1; }
.chip-main b { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.chip-coins { font-weight: 700; color: var(--gold); white-space: nowrap; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar-lg { width: 64px; height: 64px; }
.avatar-letter { display: inline-grid; place-items: center; background: var(--crimson); color: var(--ink); font-weight: 800; }
.avatar-lg.avatar-letter { font-size: 1.8rem; }
.tier-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(226, 181, 90, .18); color: var(--gold); white-space: nowrap; }
.tier-sm { font-size: .68rem; padding: 0 6px; }
.tier-general, .tier-marechal { background: linear-gradient(90deg, #b98a2e, #e2b55a); color: #2a1f18; }

.profile-overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .6); }
.profile-panel { width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 18px; border-radius: var(--radius);
  background: var(--bg-2); border: 1px solid rgba(226, 181, 90, .35); box-shadow: var(--shadow); color: var(--ink); }
.profile-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.profile-head h2 { margin: 0 0 4px; font-size: 1.3rem; overflow-wrap: anywhere; }
.xp-bar { height: 8px; margin: 8px 0 2px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.xp-fill { height: 100%; background: linear-gradient(90deg, var(--gold-2), var(--gold)); }
.muted { color: var(--ink-dim); }
.profile-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin: 14px 0; }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .28); }
.tile b { font-size: 1.1rem; }
.tile small { color: var(--ink-dim); font-size: .72rem; }
.cadence { padding: 10px; border-radius: 10px; background: rgba(0, 0, 0, .2); }
.cadence-label { font-weight: 800; color: var(--gold); }
.cadence-bars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; height: 80px; margin-top: 8px; align-items: end; }
.cadence-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; }
.cadence-bar { width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--gold-2); }
.cadence-col small { font-size: .6rem; color: var(--ink-dim); }
.profile-tabs { display: flex; gap: 4px; margin: 14px 0 8px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.profile-tabs button { flex: 1; padding: 8px 4px; border: 0; background: none; color: var(--ink-dim); font: inherit; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; }
.profile-tabs button[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }
.match-list, .ledger-list, .tier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.match-row, .ledger-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(0, 0, 0, .2); font-size: .82rem; }
.ledger-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.match-row .m-when, .ledger-row .l-when { color: var(--ink-dim); font-size: .72rem; }
.result-win .m-result { color: var(--win); }
.result-loss .m-result, .result-abandon .m-result { color: var(--lose); }
.m-gain, .l-amount { white-space: nowrap; font-weight: 700; }
.ledger-row.gain .l-amount { color: var(--win); }
.ledger-row.loss .l-amount { color: var(--lose); }
.ledger-row.reversed { opacity: .6; }
.tier-list li { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, .2); }
.tier-list li.done { color: var(--ink-dim); }
.tier-list li.current { background: rgba(226, 181, 90, .2); color: var(--gold); font-weight: 800; }
.profile-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.reward-line { font-weight: 800; color: var(--gold); }
@media (max-width: 480px) {
  .match-row { grid-template-columns: minmax(0, 1fr) auto; }
  .match-row .m-when { grid-column: 1 / -1; }
}
#screen-start, #screen-online { position: relative; }
.account-bar.corner { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 6; margin: 0; justify-content: flex-end; max-width: calc(100% - 24px); }
@media (max-width: 600px) {
  .account-bar.corner .chip-main, .account-bar.corner .account-hint { display: none; }
  .account-bar.corner .account-chip { padding-right: 8px; }
  .account-bar.corner .btn-google { padding: 6px 10px; font-size: .8rem; }
  .account-bar.corner .g-long { display: none; }
}

/* Apelido, trava do online e aba "Conta" */
.nick-overlay { z-index: 90; }
.nick-panel { width: min(440px, 100%); }
.nick-panel h2 { margin: 0 0 12px; font-size: 1.2rem; }
.nick-form { display: grid; gap: 10px; }
.nick-form input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(226, 181, 90, .45); background: #120d0a; color: var(--ink); font: inherit; font-size: 1.05rem; }
.nick-msg { min-height: 1.2em; margin: 0; font-size: .85rem; }
.nick-msg.ok { color: var(--win); }
.nick-msg.bad { color: var(--lose); }
.nick-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.small { font-size: .8rem; }
#online-entry.gated > :not(#online-gate) { display: none !important; }
.online-gate { display: grid; justify-items: center; gap: 8px; padding: 14px 8px; text-align: center; }
.online-gate p { margin: 0; }
.gate-icon { font-size: 2.2rem; }
.gate-title { font-size: 1.15rem; font-weight: 800; color: var(--gold); }
.gate-actions { display: grid; gap: 8px; justify-items: center; margin: 6px 0; }
#online-name.locked { border-color: rgba(226, 181, 90, .6); background: rgba(226, 181, 90, .08); cursor: default; }
.account-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0 0 12px; }
.account-dl dt { color: var(--ink-dim); font-size: .8rem; padding-top: 2px; }
.account-dl dd { margin: 0; overflow-wrap: anywhere; }
.account-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
@media (max-width: 480px) {
  .profile-tabs button { font-size: .78rem; padding: 8px 2px; }
  .account-dl { grid-template-columns: 1fr; gap: 2px; }
  .account-dl dd { margin-bottom: 8px; }
}

/* ---------------------------------------------------------------------------
   Comprar o jogo (modal com artes) e banners de marcas
   --------------------------------------------------------------------------- */
.buy-ribbon { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 8px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(226, 181, 90, .55); background: linear-gradient(100deg, rgba(168, 32, 44, .55), rgba(226, 181, 90, .18)); color: var(--ink); font: inherit; text-align: left; }
.buy-ribbon:hover { border-color: var(--gold); filter: brightness(1.08); }
.buy-ribbon img { width: 34px; height: auto; border-radius: 4px; transform: rotate(-8deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); flex: none; }
.buy-ribbon > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.buy-ribbon small { color: var(--ink-dim); font-size: .75rem; }
.buy-ribbon > span:last-child { font-size: 1.6rem; color: var(--gold); }
.buy-hint { margin: 6px 0 0; font-size: .85rem; }
.buy-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 12px; background: rgba(5, 3, 2, .8); animation: fade .2s ease; }
.buy-panel { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; border-radius: 20px; overflow-x: hidden;
  background: radial-gradient(circle at 50% 0%, #4a3424 0%, #1b1410 70%); border: 1px solid rgba(226, 181, 90, .5); box-shadow: 0 20px 60px rgba(0, 0, 0, .7); }
.buy-close { position: absolute; top: 8px; right: 8px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: var(--ink); font-size: 1rem; cursor: pointer; }
.buy-viewport { position: relative; overflow: hidden; }
.buy-track { display: flex; transition: transform .45s cubic-bezier(.2, .8, .2, 1); touch-action: pan-y; }
.buy-slide { flex: 0 0 100%; display: grid; grid-template-rows: auto auto; padding: 18px 18px 6px; user-select: none; }
.buy-copy { text-align: center; padding: 4px 18px 0; }
.buy-kicker { margin: 0; color: var(--gold); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 800; }
.buy-title { margin: 4px 0 6px; font-size: clamp(1.25rem, 5vw, 1.7rem); line-height: 1.15; }
.buy-text { margin: 0; color: var(--ink-dim); font-size: .95rem; }
.buy-nav { position: absolute; top: 38%; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(226, 181, 90, .5); background: rgba(0, 0, 0, .5); color: var(--gold); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.buy-nav.prev { left: 8px; }
.buy-nav.next { right: 8px; }
.buy-dots { display: flex; justify-content: center; gap: 6px; padding: 8px 0 2px; }
.buy-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .25); cursor: pointer; }
.buy-dot[aria-selected="true"] { width: 24px; border-radius: 99px; background: var(--gold); }
.buy-footer { display: grid; gap: 8px; justify-items: center; padding: 10px 18px 18px; text-align: center; }
.buy-brand { margin: 0; font-weight: 800; color: var(--gold); letter-spacing: .02em; }
.btn-whatsapp { display: inline-flex; align-items: center; gap: 6px; background: #1faa53; color: #fff; text-decoration: none; border: 0; box-shadow: 0 6px 18px rgba(31, 170, 83, .35); }
.btn-whatsapp:hover { background: #22c05d; }

/* As artes: composições com as cartas do jogo */
.art { position: relative; height: clamp(190px, 38dvh, 260px); display: grid; place-items: center; border-radius: 14px; overflow: hidden; }
.art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 120%, rgba(0, 0, 0, .55), transparent 60%); }
.art-sky { background: linear-gradient(180deg, #5b8fc4 0%, #d9c39a 100%); }
.art-fan { background: radial-gradient(circle at 50% 60%, #7e1520 0%, #2a1f18 75%); }
.art-troop { background: linear-gradient(135deg, #3b2a1f, #6d4b2d); }
.art-blast { background: radial-gradient(circle at 50% 70%, #ff9a3c 0%, #a8202c 38%, #1b1410 80%); }
.art-general { background: radial-gradient(circle at 30% 40%, #e2b55a 0%, #7e1520 55%, #1b1410 100%); }
.art-gold { background: radial-gradient(circle at 50% 45%, #f6d27a 0%, #b98a2e 40%, #2a1f18 85%); }
.promo-card { position: absolute; width: clamp(92px, 26vw, 128px); aspect-ratio: 722 / 1125; height: auto; border-radius: 8px; box-shadow: 0 12px 26px rgba(0, 0, 0, .55); }
.promo-card.hero { z-index: 2; width: clamp(110px, 31vw, 150px); animation: promo-float 4s ease-in-out infinite; }
.promo-card.hero.small { width: clamp(84px, 22vw, 110px); right: 16%; left: auto; }
.promo-card.side { z-index: 1; opacity: .92; }
.promo-card.side.left { transform: translateX(-78%) rotate(-14deg) scale(.86); }
.promo-card.side.right { transform: translateX(78%) rotate(14deg) scale(.86); }
.promo-card.fan { transform-origin: 50% 110%; }
.promo-card.f1 { transform: rotate(-22deg); }
.promo-card.f2 { transform: rotate(0deg) translateY(-6px); }
.promo-card.f3 { transform: rotate(22deg); animation: promo-peek 3.2s ease-in-out infinite; }
.promo-card.troop { width: clamp(70px, 19vw, 96px); }
.promo-card.t1 { transform: translateX(-150%) rotate(-6deg); }
.promo-card.t2 { transform: translateX(-50%) rotate(-2deg) translateY(-8px); }
.promo-card.t3 { transform: translateX(50%) rotate(2deg) translateY(-8px); }
.promo-card.t4 { transform: translateX(150%) rotate(6deg); }
.promo-hero-img { position: absolute; left: 4%; bottom: -6%; height: 112%; width: auto; z-index: 2; filter: drop-shadow(0 0 18px rgba(0, 0, 0, .6)); }
.art-general .promo-card.side.right { transform: translateX(62%) rotate(10deg); }
.promo-coin { position: absolute; left: 14%; width: clamp(110px, 30vw, 150px); height: auto; z-index: 2; animation: promo-spin 6s ease-in-out infinite; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5)); }
@keyframes promo-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes promo-peek { 0%, 100% { translate: 0 0; } 50% { translate: 6px -10px; } }
@keyframes promo-spin { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .buy-track { transition: none; }
  .promo-card, .promo-coin { animation: none !important; }
}

/* Banners de marcas: discretos, fora da mesa, nunca cobrem botões */
.ad-slot { width: 100%; margin-top: 12px; }
.ad-slot-modal { margin-top: 10px; }
.ad-banner { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: var(--ink);
  background: rgba(0, 0, 0, .32); border: 1px dashed rgba(226, 181, 90, .4); text-align: left; }
.ad-banner:hover { border-style: solid; border-color: var(--gold); }
.ad-tag { flex: none; padding: 2px 6px; border-radius: 6px; background: rgba(226, 181, 90, .16); color: var(--gold); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.ad-img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; flex: none; background: #fff; }
.ad-text { display: grid; flex: 1; min-width: 0; }
.ad-text b { font-size: .85rem; line-height: 1.2; overflow-wrap: break-word; }
.ad-text small { color: var(--ink-dim); font-size: .72rem; line-height: 1.25; overflow-wrap: break-word; }
.ad-cta { flex: none; font-size: .78rem; font-weight: 800; color: var(--gold); white-space: nowrap; }
@media (max-width: 380px) {
  .ad-tag { display: none; }
}

/* Telas com rolagem (início e online): centraliza quando cabe e rola desde o topo quando não cabe.
   (align/justify center num flex com overflow corta o topo — o título sumia no celular.) */
#screen-start, #screen-online { align-items: flex-start; justify-content: flex-start; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#screen-start > .start-box, #screen-online > .start-box { margin: auto; flex: none; }
@media (max-width: 600px) {
  /* Espaço para o chip/botão de login do canto, que não pode cobrir o título. */
  #screen-start, #screen-online { padding-top: calc(60px + env(safe-area-inset-top)); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  #screen-start h1 { font-size: clamp(1.7rem, 9vw, 2.3rem); overflow-wrap: anywhere; }
}

/* Moedas da partida online (contador na faixa + animação por confronto). */
.strip-coins { white-space: nowrap; color: var(--gold); font-size: .85rem; padding: 1px 8px; border-radius: 999px; background: rgba(226, 181, 90, .12); border: 1px solid rgba(226, 181, 90, .3); transition: background .2s; }
.strip-coins.pos strong { color: #7ee08f; }
.strip-coins.neg strong { color: #ff8a7e; }
.strip-coins.bump { animation: coin-bump .65s ease; }
.strip-coins.bump-gain { background: rgba(126, 224, 143, .25); }
.strip-coins.bump-loss { background: rgba(255, 138, 126, .25); }
@keyframes coin-bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
.coin-fx { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.coin-fx .coin { position: absolute; font-size: clamp(1.3rem, 5vw, 1.8rem); will-change: transform, opacity; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.coin-fx-label { position: absolute; left: 50%; top: 34%; display: grid; justify-items: center; gap: 2px; transform: translate(-50%, -50%); text-align: center; animation: coin-label 2.4s ease forwards; }
.coin-fx-label b { font-size: clamp(2.2rem, 11vw, 3.6rem); font-weight: 900; line-height: 1; text-shadow: 0 4px 14px rgba(0, 0, 0, .7), 0 0 2px #000; }
.coin-fx-label small { font-size: .9rem; font-weight: 800; color: var(--ink); text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.coin-fx.gain .coin-fx-label b { color: var(--gold); }
.coin-fx.loss .coin-fx-label b { color: #ff7a6b; }
@keyframes coin-label {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(.5); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  26% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -55%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -95%) scale(.92); }
}
.coin-fx.loss .coin-fx-label { animation-name: coin-label-loss; }
@keyframes coin-label-loss {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  18% { transform: translate(calc(-50% - 6px), -50%); } 24% { transform: translate(calc(-50% + 6px), -50%); } 30% { transform: translate(-50%, -50%); }
  78% { opacity: 1; transform: translate(-50%, -45%); }
  100% { opacity: 0; transform: translate(-50%, -10%) scale(.95); }
}
.conf-coins { font-weight: 800; }
.conf-coins.pos { color: #2f7d43; }
.conf-coins.neg { color: #a8202c; }
.conf-coins small { font-weight: 700; opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .coin-fx-label, .strip-coins.bump { animation-duration: .01s; }
  .coin-fx-label { animation: none; }
}
@media (max-width: 600px) { .strip-coins { font-size: .72rem; padding: 1px 6px; } }

/* ---------------------------------------------------------------------------
   Personagens: escolha na tela inicial e falas na mesa
   --------------------------------------------------------------------------- */
.char-picker { display: grid; gap: 8px; }
.char-picker.shake { animation: shake .5s cubic-bezier(.36, .07, .19, .97) both; }
.char-team { display: grid; gap: 4px; }
.char-team-name { font-size: .78rem; font-weight: 700; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .06em; }
.char-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.char-card { display: grid; justify-items: center; gap: 2px; padding: 5px 4px 6px; background: #120d0a; border: 2px solid #5a4533; border-radius: 12px; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.char-card img { width: 100%; max-width: 72px; aspect-ratio: 200 / 240; border-radius: 9px; }
.char-card span { font-size: .8rem; font-weight: 700; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.char-card:hover { transform: translateY(-2px); }
.char-card.selected { border-color: var(--char-cor, var(--gold)); box-shadow: 0 0 0 2px var(--char-cor, var(--gold)), 0 6px 16px rgba(0,0,0,.4); }
.char-card.selected span { color: var(--ink); }
.char-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.char-hint { color: var(--ink-dim); font-size: .82rem; }
.lobby-char { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: var(--ink-dim); }
.lobby-char img { width: 22px; height: 26px; border-radius: 5px; }

.avatar-wrap .avatar { border-color: var(--char-cor, var(--gold)); }
.falando { box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(226,181,90,.6) !important; }

.fala-box {
  position: fixed; left: 50%; bottom: calc(14px + var(--safe-b)); z-index: 60;
  width: min(520px, calc(100vw - 32px));
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  padding: 10px 14px 10px 10px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(42,31,24,.97), rgba(27,20,16,.97));
  border: 2px solid var(--fala-cor, var(--gold)); box-shadow: var(--shadow);
  transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), opacity .25s;
}
.fala-box.show { transform: translate(-50%, 0); opacity: 1; }
.fala-art { width: 64px; height: 77px; border-radius: 12px; background: #120d0a; }
.fala-name { display: block; color: var(--fala-cor, var(--gold)); font-size: .9rem; letter-spacing: .02em; filter: brightness(1.25); }
.fala-line { margin: 2px 0 0; font-size: 1rem; line-height: 1.3; color: var(--ink); }
@media (max-width: 480px) {
  .fala-box { top: calc(8px + env(safe-area-inset-top, 0px)); bottom: auto; transform: translate(-50%, -140%); }
  .fala-art { width: 48px; height: 58px; }
  .fala-line { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) { .fala-box { transition: opacity .2s; } }

/* Aceite dos termos (depois do login): por cima de tudo, não fecha por fora. */
.terms-overlay { z-index: 95; }
.terms-form p { margin: 0; }
.terms-form input[type=date] { color-scheme: dark; }
.terms-check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.35; cursor: pointer; }
.terms-check[hidden] { display: none; }
.terms-check input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--gold, #e2b55a); }
.terms-check a { color: var(--gold, #e2b55a); }
.legal-links { margin: 14px 0 0; text-align: center; font-size: .8rem; color: var(--muted, #b9a888); }
.legal-links a { color: inherit; }

/* Modo god: escolha das fontes */
.god-fonts { display: grid; gap: 10px; }
.god-fonts select { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(226, 181, 90, .45); background: #120d0a; color: var(--ink); font: inherit; }
.font-sample { border: 1px dashed rgba(226, 181, 90, .45); border-radius: 12px; padding: 10px 12px; overflow-wrap: break-word; }
.font-sample h3 { margin: 0 0 6px; color: var(--gold); font-size: 1.3rem; }
.font-sample p { margin: 4px 0; }

/* App instalável */
.btn-instalar { display: block; margin: 10px auto 0; }
.btn-instalar[hidden] { display: none; }

/* Embaralhar: o embaralhador escolhe onde tenta pôr as cartas boas */
.embaralhar p { margin: 6px 0; }
.embaralhar-opcoes { display: grid; gap: 8px; margin: 10px 0; }
.embaralhar-op { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; border: 2px solid #c9a46a; background: #fff8e8; color: var(--parchment-ink); font: inherit; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.embaralhar-op:hover, .embaralhar-op:focus-visible { border-color: var(--crimson); box-shadow: 0 4px 14px rgba(126, 21, 32, .18); transform: translateY(-1px); outline: none; }
.embaralhar-op .op-texto { display: grid; gap: 2px; }
.embaralhar-op b { font-family: var(--font-titulo); color: var(--crimson-2); }
.embaralhar-op small { color: #6b4f33; line-height: 1.25; }
.embaralhar-op .op-chance { font-size: .78rem; font-weight: 900; color: var(--gold-2); text-transform: uppercase; letter-spacing: .04em; }
.embaralhar-aviso { font-size: .88rem; color: #6b4f33; text-align: center; }
.mini-monte { display: flex; gap: 1px; align-items: stretch; height: 38px; padding: 3px; border-radius: 6px; background: #2a1f18; }
.mini-monte i { width: 4px; border-radius: 1px; background: #7e1520; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.mini-monte i.boa { background: var(--gold); box-shadow: 0 0 4px rgba(226, 181, 90, .8); }

/* Corte: o monte de lado (topo à esquerda) com a faca arrastável */
.corte p { margin: 6px 0; }
.corte-rotulos { display: flex; justify-content: space-between; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #6b4f33; margin-top: 8px; }
.corte-monte { --frac: .5; position: relative; display: flex; gap: 2px; height: 74px; padding: 6px; border-radius: 10px; background: linear-gradient(180deg, #3b2a1f, #2a1f18); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .5); touch-action: none; cursor: ew-resize; user-select: none; }
.corte-monte i { flex: 1; min-width: 0; border-radius: 2px; background: linear-gradient(180deg, #a8202c, #7e1520); box-shadow: inset 0 0 0 1px rgba(226, 181, 90, .35); transition: transform .18s ease, background .18s, opacity .18s; }
.corte-monte i.fica { opacity: .55; }
.corte-monte i.sobe { transform: translateY(-4px); }
.corte-monte.arrastando i { transition: none; }
.corte-faca { position: absolute; top: -8px; bottom: -8px; width: 0; border-left: 3px dashed var(--gold); pointer-events: none; filter: drop-shadow(0 0 4px rgba(226, 181, 90, .9)); }
.corte-faca { left: calc(6px + (100% - 12px) * var(--frac, .5)); }
.corte-faca span { position: absolute; top: -20px; left: 50%; transform: translateX(-50%) rotate(90deg); font-size: 1.3rem; color: var(--crimson-2); }
.corte input[type=range] { margin: 8px 0 2px; }
.corte-monte.depois { height: 46px; cursor: default; margin-top: 4px; }
.corte-monte.depois i { transform: none; opacity: .45; }
.corte-monte.depois i.da { opacity: 1; }
.corte-monte.depois i.da-eu { background: var(--gold); box-shadow: 0 0 6px rgba(226, 181, 90, .9); }
.corte-monte.depois i.da-aliado { background: #3f7fd0; }
.corte-monte.depois i.da-rival { background: #e2543c; }
.corte-legenda { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 6px 0; font-size: .8rem; font-weight: 700; }
.corte-legenda .leg::before { content: ''; display: inline-block; width: 10px; height: 14px; border-radius: 2px; margin-right: 5px; vertical-align: -2px; }
.leg-eu::before { background: var(--gold); }
.leg-aliado::before { background: #3f7fd0; }
.leg-rival::before { background: #e2543c; }
.corte-dir { margin: 8px 0 4px; }
.corte-dir .btn { background: transparent; color: var(--ink-dim); box-shadow: none; border-radius: 9px; padding: .55em .3em; font-size: .88rem; }
.corte-dir .btn[aria-pressed="true"] { background: var(--gold-2); color: #1d1206; }
.corte-info { text-align: center; font-weight: 700; font-size: .9rem; min-height: 2.5em; }