:root {
  --bg: #0b1220;
  --bg-2: #111a2e;
  --card: #152038;
  --card-2: #1a2744;
  --border: #22304d;
  --text: #e6edf7;
  --muted: #8b9bb7;
  --primary: #22d3ee;
  --primary-2: #6366f1;
  --danger: #f43f5e;
  --warn: #e0b45a;
  --gold: #f5c451;
  --ok: #22c55e;
  --radius: 16px;
  --board: #1d4ed8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
body.in-game { overflow: hidden; }
a { color: var(--primary); }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.2; }
h2 { font-size: 1.25rem; margin: 1.6rem 0 .8rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }
p { margin: 0 0 .6rem; line-height: 1.45; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.tiny { font-size: .76rem; }
.center { text-align: center; align-items: center; }
.good-text { color: var(--ok); }
.bad-text { color: var(--danger); }
.strike { text-decoration: line-through; }
.stack { display: flex; flex-direction: column; gap: .7rem; }
.full { width: 100%; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 1px solid transparent; border-radius: 12px; padding: .7rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; transition: transform .08s, opacity .15s, background .15s; color: var(--text); text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { padding: .45rem .8rem; font-size: .88rem; border-radius: 10px; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #06101f; }
.btn-ghost { background: transparent; border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-2); }
.btn-danger { background: transparent; border-color: color-mix(in srgb, var(--danger) 60%, transparent); color: var(--danger); }
.btn.dim { opacity: .6; }
.icon-btn { background: transparent; border: 0; color: var(--muted); font-size: 1.2rem; cursor: pointer; padding: .3rem .5rem; border-radius: 8px; }
.icon-btn:hover { background: var(--bg-2); color: var(--text); }
.link-btn { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; padding: .3rem; }

.input { width: 100%; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: .7rem .9rem; font: inherit; }
.input:focus { outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent); border-color: transparent; }
textarea.input { min-height: 70px; resize: vertical; }
.select { width: auto; margin-bottom: .6rem; }
.code-input { font-size: 1.6rem; letter-spacing: .5rem; text-align: center; font-weight: 700; }
.form-error { color: var(--danger); font-size: .88rem; min-height: 1em; margin: 0; }
.check { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.check input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--primary); }

/* ---------- topo ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem 1rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: .4rem; color: var(--text); text-decoration: none; font-size: 1.1rem; white-space: nowrap; }
.brand-icon { font-size: 1.4rem; }
.top-right { display: flex; align-items: center; gap: .6rem; }
.online-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted); }
.online-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.online-pill.off i { background: var(--danger); box-shadow: none; }
.coin-pill { display: inline-flex; gap: .3rem; align-items: center; padding: .35rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); color: var(--gold); font-weight: 700; text-decoration: none; }
.avatar-link { text-decoration: none; }

.tabs { position: sticky; top: 57px; z-index: 19; display: flex; gap: .2rem; overflow-x: auto; padding: .4rem .6rem; background: var(--bg); border-bottom: 1px solid var(--border); scrollbar-width: none; }
.tabs a { position: relative; flex: 0 0 auto; padding: .5rem .8rem; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .92rem; }
.tabs a.active { background: var(--card); color: var(--text); }
.badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: .7rem; display: inline-flex; align-items: center; justify-content: center; }

.container { max-width: 980px; margin: 0 auto; padding: 1rem 1rem 4rem; }

/* ---------- cards / lobby ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.hero { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem; border-radius: var(--radius); background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--primary-2) 35%, transparent), transparent 60%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--primary) 25%, transparent), transparent 55%), var(--card); border: 1px solid var(--border); }
.hero h1 { font-size: 1.5rem; }
.hero p { margin: 0; }
.banner { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--ok) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.banner.warn { background: color-mix(in srgb, var(--warn) 12%, var(--card)); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }

.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.game-card { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; text-align: left; padding: 1.2rem; border-radius: var(--radius); background: linear-gradient(160deg, var(--card-2), var(--card)); border: 1px solid var(--border); color: var(--text); font: inherit; cursor: pointer; transition: transform .12s, border-color .12s; }
.game-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }
.game-emoji { font-size: 2.4rem; }
.game-name { font-size: 1.15rem; }
.chips, .chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.chip { font-size: .75rem; padding: .2rem .55rem; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); }
.chip.gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 35%, transparent); }
.chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.chip-btn { padding: .45rem .8rem; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font: inherit; font-size: .88rem; cursor: pointer; }
.chip-btn.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 18%, var(--bg-2)); }

.private-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.private-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.inline-form { display: flex; gap: .4rem; }
.inline-form .input { width: 120px; text-transform: uppercase; letter-spacing: .15rem; }
.footnote { font-size: .78rem; text-align: center; margin-top: 2rem; }
.ad-banner { display: flex; justify-content: center; margin: 1rem 0; min-height: 50px; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgb(3 7 18 / .7); backdrop-filter: blur(4px); }
.modal-card { width: min(440px, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 1.2rem; box-shadow: 0 20px 60px rgb(0 0 0 / .5); }
.modal-card.wide { width: min(640px, 100%); }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.modal-head h3 { margin: 0; font-size: 1.2rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.notice { padding: .6rem .8rem; border-radius: 10px; background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); font-size: .9rem; }
.bonus-note { color: var(--gold); font-weight: 600; }

.setup-section { border-top: 1px solid var(--border); padding-top: .9rem; margin-top: .9rem; }
.level-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.level-btn, .table-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .75rem .4rem; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font: inherit; cursor: pointer; transition: border-color .12s, transform .08s; }
.level-btn:hover, .table-btn:hover { border-color: var(--primary); }
.level-btn:active, .table-btn:active { transform: scale(.97); }
.tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.table-btn strong { font-size: 1.15rem; color: var(--gold); }
.table-btn.locked { opacity: .55; }
.waiting-dot { position: absolute; top: -8px; right: -4px; font-size: .65rem; padding: .1rem .4rem; border-radius: 999px; background: var(--ok); color: #052e14; font-weight: 700; }
.challenge { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: .7rem; padding: .7rem .8rem; border-radius: 12px; background: color-mix(in srgb, var(--gold) 10%, var(--bg-2)); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); font-size: .88rem; }
.friendly-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: .8rem; }
.friendly-row > div { display: flex; flex-direction: column; }

.spinner { width: 40px; height: 40px; margin: .5rem auto; border: 4px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; width: min(92vw, 420px); }
.toast { padding: .7rem 1rem; border-radius: 12px; background: var(--card-2); border: 1px solid var(--border); box-shadow: 0 8px 30px rgb(0 0 0 / .4); font-size: .92rem; transition: opacity .4s, transform .4s; text-align: center; }
.toast.good { border-color: color-mix(in srgb, var(--ok) 60%, transparent); }
.toast.bad { border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.toast.out { opacity: 0; transform: translateY(8px); }

/* ---------- avatar / tags ---------- */
.avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-2), var(--primary)); color: #06101f; font-weight: 800; font-size: 1.1rem; }
.avatar.sm { width: 32px; height: 32px; font-size: .85rem; }
.avatar.lg { width: 72px; height: 72px; font-size: 1.8rem; }
.seat-dot { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--card); }
.tag { display: inline-flex; align-items: center; font-size: .7rem; padding: .1rem .45rem; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.tag.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.tag.gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.premium-tag { display: inline-block; margin-left: .4rem; font-size: .62rem; font-weight: 800; letter-spacing: .05rem; padding: .12rem .4rem; border-radius: 6px; background: linear-gradient(135deg, #e879f9, #f5c451); color: #1a0b22; vertical-align: middle; }
.progress { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; margin: .3rem 0; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-2)); border-radius: inherit; }

/* ---------- ranking ---------- */
.segmented { display: inline-flex; flex-wrap: wrap; gap: .3rem; padding: .3rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; margin-bottom: .7rem; }
.segmented button { background: none; border: 0; color: var(--muted); padding: .5rem .8rem; border-radius: 9px; font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; }
.segmented button.active { background: var(--card-2); color: var(--text); }
.rank-card { padding: .3rem; }
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-row { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: 10px; }
.rank-row:nth-child(odd) { background: color-mix(in srgb, var(--bg-2) 50%, transparent); }
.rank-row.me { outline: 1px solid var(--primary); }
.rank-pos { width: 2rem; text-align: center; font-weight: 700; color: var(--muted); }
.rank-nick { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-value { font-weight: 700; color: var(--gold); }
.empty { padding: 1.5rem; text-align: center; }
.mine { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }

/* ---------- missões / moedas / loja ---------- */
.cta { text-align: center; }
.streak { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: .4rem; margin: .6rem 0 .9rem; }
.streak-cell { display: flex; flex-direction: column; align-items: center; padding: .5rem .2rem; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border); }
.streak-cell strong { color: var(--gold); }
.streak-cell.done { background: color-mix(in srgb, var(--ok) 15%, var(--bg-2)); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.streak-cell.next { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.missions { display: flex; flex-direction: column; gap: .6rem; }
.mission { display: flex; align-items: center; gap: .8rem; padding: .7rem; border-radius: 12px; background: var(--bg-2); }
.mission.claimed { opacity: .6; }
.mission-text { flex: 1; display: flex; flex-direction: column; }
.room-code { font-size: 2rem; font-weight: 800; letter-spacing: .4rem; text-align: center; padding: .6rem; margin: .6rem 0; border-radius: 12px; background: var(--bg-2); border: 1px dashed var(--border); color: var(--primary); }
.small-code { font-size: 1.3rem; letter-spacing: .2rem; }
.balance { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.balance-value { font-size: 2rem; color: var(--gold); }
.packages { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin: .5rem 0; }
.package { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 1rem .5rem; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font: inherit; cursor: pointer; }
.package:hover { border-color: var(--gold); }
.package strong { font-size: 1.15rem; color: var(--gold); }
.package .price { font-weight: 700; }
.premium-card { background: linear-gradient(160deg, color-mix(in srgb, #e879f9 14%, var(--card)), var(--card)); }
.benefits { margin: .3rem 0 .8rem; padding-left: 1.2rem; line-height: 1.7; }
.history { display: flex; flex-direction: column; }
.history-row { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.history-row:last-child { border-bottom: 0; }
.history-reason { flex: 1; font-size: .9rem; }
.shop-title { margin-top: 1rem; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.shop-item { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; margin: 0; }
.shop-item.equipped { border-color: var(--primary); }
.swatch { display: inline-block; }
.piece-swatch { width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 -4px 0 rgb(0 0 0 / .25); }
.board-swatch { width: 64px; height: 44px; border-radius: 8px; box-shadow: inset 0 0 0 4px rgb(255 255 255 / .1); }
.profile-head { display: flex; align-items: center; gap: 1rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; margin-bottom: .7rem; }
.stat { display: flex; flex-direction: column; align-items: center; padding: .7rem; border-radius: 12px; background: var(--bg-2); }
.stat strong { font-size: 1.3rem; }
.qr { width: 220px; height: 220px; border-radius: 12px; background: #fff; padding: 8px; }
.pix-code { font-size: .75rem; min-height: 60px; }
.test-ad { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-height: 180px; border-radius: 12px; background: repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 10px, var(--card-2) 10px, var(--card-2) 20px); text-align: center; padding: 1rem; margin-bottom: .6rem; }

/* ---------- tela de jogo ---------- */
.game-screen { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: .7rem .8rem 1rem; overflow-y: auto; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary-2) 18%, transparent), transparent 50%), var(--bg); }
.game-top { width: min(640px, 100%); display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.game-title { display: flex; flex-direction: column; align-items: center; text-align: center; }
.players { width: min(640px, 100%); display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: center; }
.player { min-height: 64px; padding: .5rem .6rem; border-radius: 14px; background: var(--card); border: 1px solid var(--border); transition: box-shadow .15s; }
.player.speaking { box-shadow: 0 0 0 2px var(--ok), 0 0 18px color-mix(in srgb, var(--ok) 50%, transparent); }
.player-inner { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.player.right .player-inner { flex-direction: row-reverse; text-align: right; }
.player-text { display: flex; flex-direction: column; min-width: 0; }
.player-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-tags { display: flex; gap: .25rem; margin-top: .15rem; }
.player.right .player-tags { justify-content: flex-end; }
.player-empty { text-align: center; padding: .8rem 0; }
.vs { display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 70px; }
.score { font-size: 1.3rem; font-weight: 800; }
.timer { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.timer.low { color: var(--danger); font-weight: 700; }
.status-line { min-height: 1.4rem; font-weight: 700; text-align: center; }
.board-wrap { width: min(560px, 100%); display: flex; justify-content: center; }
.board-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 7 / 5; border-radius: 18px; border: 2px dashed var(--border); font-size: 3rem; }

.board.lig4 { --l4-gap: clamp(3px, 1.4vw, 9px); width: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: start; gap: var(--l4-gap); padding: calc(var(--l4-gap) * 1.4); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--board) 85%, #fff), var(--board)); box-shadow: 0 12px 40px rgb(0 0 0 / .45), inset 0 -6px 0 rgb(0 0 0 / .25); }
.l4-col { display: grid; grid-template-rows: repeat(6, auto); gap: var(--l4-gap); padding: 0; background: none; border: 0; border-radius: 10px; cursor: default; }
.board.can-move .l4-col:not(:disabled) { cursor: pointer; }
.board.can-move .l4-col:not(:disabled):hover { background: rgb(255 255 255 / .12); }
.l4-col.hint { background: color-mix(in srgb, var(--gold) 35%, transparent); animation: pulse 1s ease-in-out infinite; }
.l4-cell { position: relative; border-radius: 50%; background: color-mix(in srgb, var(--bg) 85%, transparent); box-shadow: inset 0 4px 6px rgb(0 0 0 / .5); aspect-ratio: 1; }
.piece { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--piece) 60%, #fff), var(--piece) 60%); box-shadow: inset 0 -4px 0 rgb(0 0 0 / .25); }
.piece.drop { animation: drop calc(.12s + var(--fall) * .05s) cubic-bezier(.5, 0, 1, .6); }
.piece.win { animation: glow .8s ease-in-out infinite alternate; }
@keyframes drop { from { transform: translateY(calc(var(--fall) * -115%)); } to { transform: translateY(0); } }
@keyframes glow { from { box-shadow: 0 0 0 3px #fff, 0 0 12px #fff; } to { box-shadow: 0 0 0 3px var(--piece), 0 0 22px var(--piece); } }
@keyframes pulse { 50% { opacity: .55; } }

.board.velha { width: min(100%, 400px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; border-radius: 18px; background: color-mix(in srgb, var(--board) 45%, var(--bg-2)); box-shadow: 0 12px 40px rgb(0 0 0 / .45); }
.v-cell { display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--card); border: 0; font: inherit; cursor: default; }
.board.can-move .v-cell:not(:disabled) { cursor: pointer; }
.board.can-move .v-cell:not(:disabled):hover { background: var(--card-2); }
.v-cell.hint { box-shadow: inset 0 0 0 3px var(--gold); animation: pulse 1s ease-in-out infinite; }
.mark { font-size: clamp(2.5rem, 14vw, 5rem); font-weight: 900; line-height: 1; }
.mark.pop { animation: pop .25s ease-out; }
.mark.win { text-shadow: 0 0 18px currentColor; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- 8×8: damas e xadrez ---------- */
.board-stack { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.board.grid8 { --sq-dark: #9a6b43; --sq-light: #f0d9b5; width: min(100%, 520px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); padding: 8px; border-radius: 14px; background: linear-gradient(160deg, #5b3a22, #3b2414); box-shadow: 0 12px 40px rgb(0 0 0 / .45); }
.board.xadrez { --sq-dark: #769656; --sq-light: #eeeed2; background: linear-gradient(160deg, #3f4a36, #262d21); }
.sq { position: relative; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; font: inherit; cursor: default; container-type: size; }
.sq.dark { background: var(--sq-dark); }
.sq.light { background: var(--sq-light); }
.board.can-move .sq { cursor: pointer; }
.sq.last::before { content: ''; position: absolute; inset: 0; background: rgb(250 204 21 / .32); }
.sq.sel::before { content: ''; position: absolute; inset: 0; background: rgb(56 189 248 / .45); }
.sq.check::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgb(239 68 68 / .95), rgb(239 68 68 / .2) 70%); }
.sq.hint { box-shadow: inset 0 0 0 4px var(--gold); animation: pulse 1s ease-in-out infinite; }
.sq.target::after { content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgb(15 23 42 / .35); z-index: 2; pointer-events: none; }
.sq.target.capture::after { width: 86%; height: 86%; background: transparent; border: 5px solid rgb(15 23 42 / .35); box-sizing: border-box; }
.board.damas .sq.target::after { background: rgb(56 189 248 / .7); box-shadow: 0 0 10px rgb(56 189 248 / .8); }
.coord { position: absolute; font-size: clamp(.5rem, 1.6vw, .7rem); font-weight: 700; opacity: .75; pointer-events: none; z-index: 1; }
.coord.rank { top: 2px; left: 3px; }
.coord.file { bottom: 1px; right: 3px; }
.sq.dark .coord { color: var(--sq-light); }
.sq.light .coord { color: var(--sq-dark); }

.ck { position: relative; z-index: 1; width: 78%; height: 78%; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 48cqmin; line-height: 1; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--piece) 55%, #fff), var(--piece) 62%); box-shadow: inset 0 -4px 0 rgb(0 0 0 / .3), inset 0 0 0 3px color-mix(in srgb, var(--piece) 70%, #000), 0 3px 6px rgb(0 0 0 / .4); transition: transform .12s; }
.ck.king { box-shadow: inset 0 -4px 0 rgb(0 0 0 / .3), inset 0 0 0 3px var(--gold), 0 0 10px color-mix(in srgb, var(--gold) 60%, transparent), 0 3px 6px rgb(0 0 0 / .4); }
.ck.movable { animation: breathe 1.6s ease-in-out infinite; }
.ck.captured { opacity: .35; transform: scale(.85); }
.ck.moved, .cp.moved { animation: pop .2s ease-out; }
.sq.sel .ck { transform: scale(1.08); }
@keyframes breathe { 50% { transform: scale(1.06); } }

.cp { position: relative; z-index: 1; font-size: 82cqmin; line-height: 1; user-select: none; }
.cp.w { color: #fff; text-shadow: 0 0 1px #000, 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 0 3px 4px rgb(0 0 0 / .45); }
.cp.b { color: #111827; text-shadow: 0 0 1px #fff, 0 1px 0 rgb(255 255 255 / .5), 0 3px 4px rgb(0 0 0 / .45); }
.promo-picker { display: flex; align-items: center; gap: .4rem; padding: .5rem .7rem; border-radius: 14px; background: var(--card); border: 1px solid var(--primary); box-shadow: 0 8px 30px rgb(0 0 0 / .5); }
.promo-btn { width: 52px; height: 52px; border-radius: 10px; border: 1px solid var(--border); background: #d6c7a8; font-size: 2.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.promo-btn:hover { background: #f0d9b5; }

/* ---------- Batalha Naval ---------- */
.board.batalha { width: 100%; display: grid; grid-template-columns: 1fr; gap: .8rem; justify-items: center; }
.bn-sea { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.bn-sea.enemy { max-width: 440px; }
.bn-sea.own { max-width: 300px; }
.bn-title { font-size: .85rem; font-weight: 700; color: var(--muted); }
.bn-sea.can-move .bn-title { color: var(--text); }
.bn-grid { width: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; padding: 5px; border-radius: 12px; background: linear-gradient(160deg, #0c4a6e, #082f49); box-shadow: 0 10px 30px rgb(0 0 0 / .4), inset 0 0 30px rgb(56 189 248 / .15); }
.bn-cell { position: relative; padding: 0; border: 0; border-radius: 3px; background: rgb(56 189 248 / .14); cursor: default; container-type: size; }
.bn-sea.can-move .bn-cell:not(:disabled) { cursor: crosshair; }
.bn-sea.can-move .bn-cell:not(:disabled):hover { background: rgb(250 204 21 / .45); }
.bn-cell.ship { background: color-mix(in srgb, var(--piece) 80%, #334155); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .3); }
.bn-cell.sunk { background: #475569; box-shadow: inset 0 0 0 2px rgb(239 68 68 / .7); }
.bn-cell.water::after { content: ''; position: absolute; inset: 38%; border-radius: 50%; background: rgb(186 230 253 / .7); }
.bn-cell.hit::after { content: '✹'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #f97316; font-size: 80cqmin; text-shadow: 0 0 6px #ef4444; }
.bn-cell.last { animation: splash .6s ease-out; outline: 2px solid #fde047; outline-offset: -1px; z-index: 1; }
.bn-cell.hint { box-shadow: inset 0 0 0 3px var(--gold); animation: pulse 1s ease-in-out infinite; }
.bn-fleet { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.bn-ship { height: 9px; width: calc(var(--len) * 11px); border-radius: 6px; background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.bn-ship.gone { background: #ef4444; opacity: .45; }
@keyframes splash { from { transform: scale(1.5); } to { transform: scale(1); } }
@media (min-width: 900px) {
  .board-wrap:has(.batalha) { width: min(900px, 100%); }
  .board.batalha { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

/* ---------- Dominó ---------- */
.board.domino { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.dm-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.dm-back { width: 22px; height: 40px; border-radius: 5px; background: linear-gradient(135deg, color-mix(in srgb, var(--piece) 75%, #fff), var(--piece)); box-shadow: inset 0 0 0 2px rgb(0 0 0 / .2), 0 2px 4px rgb(0 0 0 / .4); }
.dm-table { --t: 26px; width: 100%; min-height: 120px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; padding: .8rem; border-radius: 16px; background: radial-gradient(circle at 50% 40%, #166534, #052e16); box-shadow: inset 0 0 30px rgb(0 0 0 / .5), 0 10px 30px rgb(0 0 0 / .4); }
.dm-table.dense { --t: 20px; }
.dm-empty { color: #bbf7d0; }
.dm-tile { --t: inherit; display: inline-flex; align-items: center; gap: 0; padding: 2px; border-radius: 6px; background: linear-gradient(160deg, #fffdf5, #e7e2d3); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .15), 0 2px 4px rgb(0 0 0 / .45); border: 0; font: inherit; }
.dm-tile.v { flex-direction: column; }
.dm-half { width: var(--t); height: var(--t); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 12%; }
.dm-half i { border-radius: 50%; margin: 14%; }
.dm-half i.on { background: #111827; }
.dm-bar { background: #a8a29e; align-self: stretch; width: 1px; margin: 3px 1px; }
.dm-tile.v .dm-bar { width: auto; height: 1px; margin: 1px 3px; }
.dm-tile.just { box-shadow: 0 0 0 2px #fde047, 0 0 14px #fde047; }
.dm-hand.own { --t: 30px; padding: .5rem; border-radius: 14px; background: color-mix(in srgb, var(--piece) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--piece) 35%, var(--border)); }
.dm-hand.own .dm-tile { cursor: default; transition: transform .12s; }
.dm-hand.own .dm-tile:disabled { filter: grayscale(.4) brightness(.75); }
.dm-hand.own .dm-tile.playable { cursor: pointer; box-shadow: 0 0 0 2px var(--primary), 0 3px 8px rgb(0 0 0 / .5); }
.dm-hand.own .dm-tile.playable:hover, .dm-hand.own .dm-tile.sel { transform: translateY(-6px); }
.dm-hand.own .dm-tile.hint { animation: pulse 1s ease-in-out infinite; box-shadow: 0 0 0 3px var(--gold); }
.dm-hand.opp .dm-tile { --t: 16px; }
.dm-end { padding: .4rem .6rem; border-radius: 10px; border: 2px dashed #fde047; background: rgb(253 224 71 / .15); color: #fde047; font: inherit; font-weight: 700; cursor: pointer; animation: pulse 1s ease-in-out infinite; }
.dm-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; }
.dm-stock { font-size: .85rem; color: var(--muted); font-weight: 600; }
.btn.hint { animation: pulse 1s ease-in-out infinite; box-shadow: 0 0 0 3px var(--gold); }

/* ---------- Ligue os Pontos ---------- */
.board.pontos { width: min(100%, 460px); aspect-ratio: 1; padding: 6px; border-radius: 18px; background: linear-gradient(160deg, #f8fafc, #e2e8f0); box-shadow: 0 12px 40px rgb(0 0 0 / .45); }
.pt-svg { width: 100%; height: 100%; display: block; }
.pt-dot { fill: #1e293b; }
.pt-vis { stroke: #cbd5e1; stroke-width: 3; stroke-dasharray: 3 6; stroke-linecap: round; transition: stroke .1s; }
.pt-line.drawn .pt-vis { stroke-width: 7; stroke-dasharray: none; }
.pt-line.last .pt-vis { animation: lineIn .35s ease-out; }
.pt-line.hint .pt-vis { stroke: var(--gold); stroke-width: 7; stroke-dasharray: none; animation: pulse 1s ease-in-out infinite; }
.pt-hit { stroke: transparent; stroke-width: 22; stroke-linecap: round; cursor: pointer; }
.board.can-move .pt-line.free:hover .pt-vis { stroke: var(--me); stroke-width: 7; stroke-dasharray: none; opacity: .6; }
.pt-box { opacity: .55; animation: pop .3s ease-out; transform-box: fill-box; transform-origin: center; }
.pt-box-label { font: 800 15px system-ui, sans-serif; text-anchor: middle; }
@keyframes lineIn { from { stroke-width: 14; opacity: .3; } }

/* ---------- molduras animadas ---------- */
.avatar.fx { isolation: isolate; box-shadow: none !important; }
.avatar.fx::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; z-index: -1; background: var(--fx-bg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); animation: spin 3s linear infinite; }
.avatar.fx::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; z-index: -2; box-shadow: 0 0 12px var(--fx-glow, transparent); animation: fxGlow 2s ease-in-out infinite alternate; }
.fx-arcoiris { --fx-bg: conic-gradient(#ef4444, #f59e0b, #facc15, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444); --fx-glow: rgb(217 70 239 / .55); }
.fx-fogo { --fx-bg: conic-gradient(#7f1d1d, #ef4444, #f97316, #facc15, #f97316, #ef4444, #7f1d1d); --fx-glow: rgb(249 115 22 / .8); }
.fx-fogo::before { animation-duration: 1.4s !important; }
.fx-gelo { --fx-bg: conic-gradient(#e0f2fe, #7dd3fc, #ffffff, #38bdf8, #e0f2fe, #a5f3fc, #e0f2fe); --fx-glow: rgb(125 211 252 / .7); }
.fx-gelo::before { animation-duration: 6s !important; }
.fx-raio { --fx-bg: conic-gradient(#facc15 0 10%, #6d28d9 10% 25%, #fde047 25% 32%, #4c1d95 32% 50%, #facc15 50% 58%, #7c3aed 58% 80%, #fef08a 80% 86%, #5b21b6 86%); --fx-glow: rgb(250 204 21 / .8); }
.fx-raio::before { animation: spin .9s steps(6) infinite !important; }
.fx-louros { --fx-bg: conic-gradient(#a16207, #fde68a, #ca8a04, #fef3c7, #a16207); --fx-glow: rgb(234 179 8 / .5); }
.fx-galaxia { --fx-bg: conic-gradient(#1e1b4b, #7c3aed, #ec4899, #1e1b4b, #2563eb, #22d3ee, #1e1b4b); --fx-glow: rgb(124 58 237 / .8); }
.fx-galaxia::before { animation-duration: 8s !important; }
.fx-coroa { --fx-bg: conic-gradient(#facc15, #fff7d6, #eab308, #a16207, #facc15); --fx-glow: rgb(250 204 21 / .9); }
.fx-premium { --fx-bg: conic-gradient(#e879f9, #f5c451, #e879f9, #a78bfa, #e879f9); --fx-glow: rgb(232 121 249 / .8); }
.fx-orn { position: absolute; pointer-events: none; z-index: 2; }
.fx-louros .fx-orn { inset: -32%; width: 164%; height: 164%; }
.fx-coroa .fx-orn, .fx-premium .fx-orn { width: 72%; left: 14%; top: -52%; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .5)); }
.fx-fogo .fx-orn { width: 150%; left: -25%; top: -76%; animation: flicker .5s ease-in-out infinite alternate; transform-origin: bottom; }
@keyframes fxGlow { from { opacity: .5; } to { opacity: 1; } }
@keyframes flicker { from { transform: scaleY(.92) scaleX(1.03); } to { transform: scaleY(1.06) scaleX(.97); } }
.shop-item .avatar { margin: 18px 0 6px; }
.ad-item { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.ad-tag { font-size: .62rem; font-weight: 800; letter-spacing: .05rem; padding: .12rem .45rem; border-radius: 6px; background: var(--ok); color: #052e14; }

/* ---------- arte dos jogos e som ---------- */
.game-art { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-2); margin-bottom: .2rem; }
.game-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.game-card:hover .game-art img { transform: scale(1.05); }
.how-to { margin: .4rem 0; padding: .5rem .7rem; border-radius: 10px; background: var(--bg-2); }
.how-to summary { cursor: pointer; font-weight: 700; font-size: .9rem; }
.sound-btns { display: inline-flex; gap: .1rem; }
.sound-btn { position: relative; font-size: 1.05rem; padding: .3rem .4rem; }
.sound-btn.off { opacity: .45; }
.sound-btn[data-sound="music"].off::after { content: ''; position: absolute; left: 20%; right: 20%; top: 50%; height: 2px; background: var(--danger, #ef4444); transform: rotate(-35deg); }

.game-actions { display: flex; gap: .5rem; }
.room-bar { width: min(640px, 100%); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 14px; background: var(--card); border: 1px solid var(--border); }
.voice { display: flex; align-items: center; gap: .4rem; }
.voice-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-2); font-size: 1.15rem; cursor: pointer; opacity: .6; }
.voice-btn.on { opacity: 1; border-color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, var(--bg-2)); }
.voice-btn.speaking { box-shadow: 0 0 0 3px var(--ok); }
.voice-btn:disabled { cursor: not-allowed; opacity: .3; }
#volume { width: 80px; accent-color: var(--primary); }
.emotes { display: flex; flex-wrap: wrap; gap: .25rem; }
.emote-btn { min-width: 36px; height: 36px; padding: 0 .4rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.emote-btn:hover { background: var(--card-2); }
.emote-layer { position: fixed; inset: 0; pointer-events: none; z-index: 45; }
.emote-bubble { position: absolute; top: 140px; font-size: 2.6rem; font-weight: 900; animation: floatUp 2.2s ease-out forwards; text-shadow: 0 4px 12px rgb(0 0 0 / .5); }
.emote-bubble.me { left: 18%; }
.emote-bubble.opp { right: 18%; }
@keyframes floatUp { 0% { transform: translateY(20px) scale(.5); opacity: 0; } 15% { transform: translateY(0) scale(1.15); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-60px) scale(1); opacity: 0; } }

.post-panel { width: min(640px, 100%); display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; padding: 1rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); }
.post-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.result-lines { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .9rem; font-weight: 600; }
.proposal { display: flex; flex-direction: column; gap: .5rem; align-items: center; width: 100%; padding: .7rem; border-radius: 12px; background: color-mix(in srgb, var(--primary) 10%, var(--bg-2)); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); }
.change-form { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 100%; }
.cta-inline { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .7rem; border-radius: 12px; background: color-mix(in srgb, var(--gold) 10%, var(--bg-2)); font-size: .9rem; }

/* ---------- home: jogar agora ---------- */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.quick-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); background: var(--card); }
.quick-card:first-child { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); box-shadow: 0 0 30px color-mix(in srgb, var(--gold) 15%, transparent); }
.quick-art { aspect-ratio: 16 / 7; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-2); }
.quick-art img { width: 100%; height: 100%; object-fit: cover; }
.quick-body { display: flex; flex-direction: column; gap: .25rem; padding: .8rem 1rem 1rem; }
.quick-rank { font-size: .72rem; font-weight: 800; letter-spacing: .03rem; color: var(--gold); text-transform: uppercase; }
.quick-actions { display: flex; gap: .5rem; margin-top: .4rem; }
a.game-card { text-decoration: none; }

/* ---------- página do jogo ---------- */
.gp-head { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 1.2rem; align-items: center; padding: 1rem; border-radius: var(--radius); background: linear-gradient(160deg, var(--card-2), var(--card)); border: 1px solid var(--border); }
.gp-art { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-2); }
.gp-art img { width: 100%; height: 100%; object-fit: cover; }
.gp-info h1 { font-size: 1.6rem; margin: .2rem 0 .4rem; }
.gp-back { padding: 0; }
.gp-tabs { margin: 1rem 0; }
.gp-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.gp-highlight { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 9%, var(--card)), var(--card)); }
.post-actions.start { justify-content: flex-start; }
.rank-head { padding: .6rem .7rem 0; }

.podium { display: flex; justify-content: center; align-items: flex-end; gap: .6rem; padding: .6rem 0 0; }
.podium-spot { display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 30%; max-width: 150px; text-align: center; }
.podium-spot.me .podium-nick { color: var(--primary); }
.podium-medal { font-size: 1.5rem; }
.podium-nick { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.podium-step { width: 100%; margin-top: .3rem; border-radius: 10px 10px 4px 4px; display: flex; align-items: flex-start; justify-content: center; padding-top: .35rem; font-weight: 900; color: rgb(255 255 255 / .8); background: linear-gradient(180deg, var(--card-2), var(--bg-2)); border: 1px solid var(--border); }
.podium-spot.p1 .podium-step { height: 76px; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 45%, var(--card-2)), var(--bg-2)); }
.podium-spot.p2 .podium-step { height: 54px; background: linear-gradient(180deg, color-mix(in srgb, #cbd5e1 35%, var(--card-2)), var(--bg-2)); }
.podium-spot.p3 .podium-step { height: 40px; background: linear-gradient(180deg, color-mix(in srgb, #d97706 35%, var(--card-2)), var(--bg-2)); }
.podium.compact .podium-step { height: auto !important; min-height: 18px; padding: .1rem 0; font-size: .75rem; }
.podium.compact .podium-spot.p1 { transform: translateY(-8px); }

/* ---------- amigos ---------- */
.friend-list { display: flex; flex-direction: column; gap: .4rem; margin: .4rem 0 .7rem; width: 100%; }
.friend-row { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: 12px; background: var(--bg-2); text-align: left; }
.friend-row .avatar { position: relative; }
.presence { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: #64748b; border: 2px solid var(--bg-2); }
.presence.on { background: var(--ok); }
.friend-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.friend-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-actions { display: flex; gap: .3rem; align-items: center; }
.friend-code { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .7rem 0 .3rem; }
.friend-code strong { font-size: 1.15rem; letter-spacing: .15rem; color: var(--primary); }
.inline-form.wide { width: 100%; }
.inline-form.wide .input { width: auto; flex: 1; text-transform: none; letter-spacing: normal; }
.invite-box { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.invite-more { width: 100%; }
.invite-more summary { cursor: pointer; color: var(--muted); }

/* ---------- vários adversários ---------- */
.player.multi { display: flex; flex-direction: column; gap: .3rem; justify-content: center; }
.player-inner.small { gap: .45rem; }
.player-inner.small .player-text strong { font-size: .85rem; }
.player-inner.small .player-tags { margin-top: 0; }
.player-inner.out { opacity: .45; }
.player.right.multi .player-inner { flex-direction: row-reverse; text-align: right; }

/* ---------- Ludo ---------- */
.board.ludo { --lu-bg: #f8fafc; width: min(100%, 520px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(15, 1fr); gap: 1px; padding: 6px; border-radius: 16px; background: color-mix(in srgb, var(--lu-bg) 70%, #94a3b8); box-shadow: 0 12px 40px rgb(0 0 0 / .45); }
.lu-base { border-radius: 10px; background: var(--q); padding: 14%; display: flex; }
.lu-base.empty { filter: saturate(.25) brightness(.8); }
.lu-base-inner { flex: 1; border-radius: 8px; background: color-mix(in srgb, var(--lu-bg) 92%, var(--q)); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--q) 50%, transparent); }
.lu-slot { margin: 12%; border-radius: 50%; background: color-mix(in srgb, #000 10%, transparent); box-shadow: inset 0 2px 3px rgb(0 0 0 / .25); }
.lu-cell { background: var(--lu-bg); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: clamp(.5rem, 2.2vw, .9rem); color: #94a3b8; container-type: size; }
.lu-cell.start, .lu-cell.home { background: var(--q); }
.lu-cell.start::after { content: '➜'; color: rgb(255 255 255 / .85); font-size: 60cqmin; }
.lu-goal { border-radius: 6px; background: conic-gradient(from -45deg, #22c55e 0 25%, #eab308 0 50%, #3b82f6 0 75%, #ef4444 0); box-shadow: inset 0 0 0 3px rgb(255 255 255 / .6); }
.lu-stack { position: relative; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.lu-stack.n2 { grid-template-columns: 1fr 1fr; }
.lu-stack.n3, .lu-stack.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.lu-pawn { pointer-events: auto; width: 82%; aspect-ratio: 1; border-radius: 50% 50% 46% 46%; border: 2px solid rgb(255 255 255 / .9); padding: 0; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--piece) 50%, #fff), var(--piece) 62%); box-shadow: 0 2px 4px rgb(0 0 0 / .5), inset 0 -3px 0 rgb(0 0 0 / .25); cursor: default; }
.lu-stack.n2 .lu-pawn, .lu-stack.n3 .lu-pawn, .lu-stack.n4 .lu-pawn { width: 92%; border-width: 1px; }
.lu-pawn.movable { cursor: pointer; animation: hop .8s ease-in-out infinite; box-shadow: 0 0 0 3px #fde047, 0 0 12px #fde047; z-index: 3; }
.lu-pawn.hint { box-shadow: 0 0 0 3px var(--gold), 0 0 14px var(--gold); }
.lu-pawn.moved { animation: pop .3s ease-out; }
.lu-pawn.done { width: 60%; }
@keyframes hop { 50% { transform: translateY(-18%); } }
.lu-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .7rem; }
.lu-dice { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 14px; background: #fff; color: #0f172a; font-size: 3.2rem; line-height: 1; box-shadow: 0 0 0 3px var(--piece, var(--border)), 0 6px 16px rgb(0 0 0 / .45); }
.lu-dice.rolled { animation: roll .45s ease-out; }
@keyframes roll { 0% { transform: rotate(-200deg) scale(.6); } 70% { transform: rotate(20deg) scale(1.1); } 100% { transform: rotate(0) scale(1); } }

/* ---------- UNO ---------- */
.board.uno { --board: #7f1d1d; width: 100%; display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.uno-opps { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.uno-opp { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .4rem .7rem; border-radius: 12px; background: var(--card); border: 1px solid var(--border); }
.uno-opp.turn { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.uno-fan { display: flex; height: 38px; padding-left: 14px; }
.uno-fan .uno-back { margin-left: -14px; }
.uno-back { display: inline-block; width: 26px; height: 38px; border-radius: 5px; border: 2px solid #fff; background: radial-gradient(ellipse at center, #ef4444 0 30%, transparent 32%), var(--piece, #1e293b); box-shadow: 0 2px 4px rgb(0 0 0 / .4); }
.uno-back.big { width: 58px; height: 86px; border-width: 3px; border-radius: 9px; }
.uno-shout { position: absolute; top: -10px; right: -8px; padding: .05rem .35rem; border-radius: 6px; background: #facc15; color: #7f1d1d; font-weight: 900; font-size: .72rem; transform: rotate(10deg); animation: pulse 1s ease-in-out infinite; }
.uno-table { display: flex; align-items: center; justify-content: center; gap: 1.2rem; width: 100%; padding: 1rem; border-radius: 18px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--board) 80%, #fff 5%), color-mix(in srgb, var(--board) 60%, #000)); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--cur) 70%, transparent), inset 0 0 40px rgb(0 0 0 / .5), 0 10px 30px rgb(0 0 0 / .4); }
.uno-deck { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 0; background: none; border: 0; color: #fff; font: inherit; }
.uno-deck.can { cursor: pointer; }
.uno-deck.can .uno-back { box-shadow: 0 0 0 3px #fde047, 0 0 16px #fde047; animation: pulse 1.2s ease-in-out infinite; }
.uno-deck.hint .uno-back { box-shadow: 0 0 0 3px var(--gold); }
.uno-info { display: flex; flex-direction: column; align-items: center; gap: .3rem; color: #fff; }
.uno-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--cur); border: 3px solid #fff; box-shadow: 0 0 12px var(--cur); }
.uno-dir { font-size: 1.6rem; line-height: 1; }
.uno-card { --c: #475569; --wild: transparent; position: relative; flex: 0 0 auto; width: 54px; height: 80px; padding: 0; border-radius: 8px; border: 3px solid #fff; background: var(--c); color: #fff; font: 900 1rem/1 system-ui, sans-serif; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgb(0 0 0 / .45); overflow: hidden; }
.uno-card.c0 { --c: #ef4444; }
.uno-card.c1 { --c: #eab308; }
.uno-card.c2 { --c: #16a34a; }
.uno-card.c3 { --c: #2563eb; }
.uno-card.c4 { --c: #111827; background: conic-gradient(from 45deg at 50% 50%, #ef4444 0 25%, #eab308 0 50%, #16a34a 0 75%, #2563eb 0); }
.uno-card.c4::before { content: ''; position: absolute; inset: 22% 18%; border-radius: 50%; background: #111827; box-shadow: 0 0 0 4px var(--wild); }
.uno-oval { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 72%; height: 58%; border-radius: 50%; background: #fff; color: var(--c); transform: rotate(-20deg); font-size: 1.25rem; text-shadow: 1px 1px 0 rgb(0 0 0 / .15); }
.uno-card.c4 .uno-oval { background: none; color: #fff; }
.uno-corner { position: absolute; top: 3px; left: 4px; font-size: .62rem; z-index: 1; }
.uno-corner.br { top: auto; left: auto; bottom: 3px; right: 4px; transform: rotate(180deg); }
.uno-card.big { width: 74px; height: 110px; }
.uno-card.big .uno-oval { font-size: 1.8rem; }
.uno-card.just { animation: deal .3s ease-out; }
@keyframes deal { from { transform: translateY(-30px) rotate(-12deg) scale(.8); opacity: .3; } }
.uno-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; padding: .6rem; border-radius: 14px; background: var(--card); border: 1px solid var(--border); max-width: 100%; }
.uno-hand.tight .uno-card { width: 46px; height: 68px; }
.uno-hand .uno-card { cursor: default; transition: transform .12s; }
.uno-hand .uno-card:disabled { filter: brightness(.55) saturate(.7); }
.uno-hand .uno-card.playable { cursor: pointer; box-shadow: 0 0 0 2px var(--primary), 0 4px 10px rgb(0 0 0 / .5); }
.uno-hand .uno-card.playable:hover, .uno-hand .uno-card.sel { transform: translateY(-8px); }
.uno-hand .uno-card.drawn { box-shadow: 0 0 0 3px #fde047, 0 0 14px #fde047; }
.uno-hand .uno-card.hint { animation: pulse 1s ease-in-out infinite; box-shadow: 0 0 0 3px var(--gold); }
.uno-colors { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: 14px; background: var(--card); border: 1px solid var(--primary); }
.uno-color { width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; cursor: pointer; box-shadow: 0 3px 8px rgb(0 0 0 / .4); }
.uno-color:hover { transform: scale(1.1); }

/* ---------- Futebol de tampinha ---------- */
.board.futebol { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.board-wrap:has(.futebol) { width: min(820px, 100%); }
.fb-canvas { width: 100%; height: auto; border-radius: 14px; touch-action: none; box-shadow: 0 12px 40px rgb(0 0 0 / .45); cursor: grab; }
.fb-canvas:active { cursor: grabbing; }
.fb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .9rem; }
.fb-score { font-size: 1.4rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.fb-flicks { display: inline-flex; gap: .25rem; }
.fb-flicks i { width: 12px; height: 12px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--border); }
.fb-flicks i.on { background: #fde047; border-color: #fde047; box-shadow: 0 0 6px #fde047; }

@media (max-width: 640px) {
  .gp-head { grid-template-columns: 1fr; }
  .gp-info h1 { font-size: 1.3rem; }
  .uno-card { width: 46px; height: 68px; }
  .uno-card.big { width: 62px; height: 92px; }
  .player.multi .player-text strong { font-size: .78rem; }
  .hero { flex-direction: column; align-items: flex-start; }
  .hero h1 { font-size: 1.25rem; }
  .tabs a span { display: none; }
  .tabs a { font-size: 1.15rem; padding: .45rem .7rem; }
  .online-pill { display: none; }
  .players { grid-template-columns: 1fr auto 1fr; }
  .player { padding: .4rem; }
  .player-text .tiny { display: none; }
  .avatar { width: 36px; height: 36px; }
  .level-row { grid-template-columns: 1fr; }
  .challenge, .friendly-row { flex-direction: column; align-items: stretch; }
  #volume { display: none; }
}