:root {
  /* Identidade jo.gando (quiz shorts): amarelo, rosa e lima sobre fundo escuro jogável */
  --bg: #14110a;
  --bg-2: #1e1a12;
  --card: #2a2418;
  --card-2: #342c1c;
  --border: #4a3f28;
  --text: #fff8e7;
  --muted: #b8a88a;
  --primary: #FFD54A;
  --primary-2: #FF4FA3;
  --accent-lime: #B6F26D;
  --danger: #f43f5e;
  --warn: #FFB347;
  --gold: #FFE566;
  --ok: #2ECC71;
  --radius: 16px;
  --board: #F5B820;
  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: .55rem; color: var(--text); text-decoration: none; font-size: 1.05rem; white-space: nowrap; font-weight: 800; }
.brand-logo { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; border: 2px solid #111; box-shadow: 0 2px 0 rgb(0 0 0 / .25); background: #FFD54A; }
.brand-name { letter-spacing: -.01em; }
.brand-name .dot { color: var(--primary-2); }
.brand-icon { font-size: 1.4rem; }
.btn-primary { color: #1a1208 !important; text-shadow: none; font-weight: 800; }
.featured-quiz {
  display: grid; grid-template-columns: 1.15fr auto; gap: .85rem; align-items: center;
  margin: 0 0 .75rem; padding: .85rem 1rem; border-radius: 18px;
  background:
    repeating-conic-gradient(from 0deg at 70% 40%, #FFD54A 0 10deg, #F5B820 10deg 20deg),
    linear-gradient(120deg, #FFD54A, #FF8A65);
  border: 3px solid #111; box-shadow: 0 7px 0 rgb(0 0 0 / .22); color: #111;
}
.featured-quiz h2 { margin: 0 0 .3rem; font-size: 1.28rem; -webkit-text-stroke: 2px #111; paint-order: stroke fill; color: #fff; text-shadow: 0 2px 0 #111; line-height: 1.15; }
.featured-quiz p { margin: 0 0 .7rem; color: #1a1208; font-weight: 700; font-size: .95rem; line-height: 1.35; }
.featured-quiz .btn { border: 3px solid #111; box-shadow: 0 4px 0 #111; background: #fffef8; color: #111; font-weight: 900; }
.featured-quiz .btn:hover { background: #FF4FA3; color: #fff; }
.featured-quiz-art { justify-self: end; width: min(132px, 30vw); aspect-ratio: 1; border-radius: 16px; border: 3px solid #111; background: #fffef8; object-fit: cover; box-shadow: 0 5px 0 rgb(0 0 0 / .2); }
@media (max-width: 720px) {
  .featured-quiz { grid-template-columns: 1fr auto; gap: .7rem; padding: .75rem .85rem; }
  .featured-quiz h2 { font-size: 1.15rem; }
  .featured-quiz p { font-size: .88rem; margin-bottom: .55rem; }
  .featured-quiz-art { width: 88px; }
}
.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 max(1rem, env(safe-area-inset-right)) calc(4rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }

/* ---------- 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 12% 20%, rgb(255 213 74 / .22), transparent 42%), radial-gradient(circle at 88% 10%, rgb(255 79 163 / .18), transparent 40%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--primary) 25%, transparent), transparent 55%), var(--card); border: 2px solid color-mix(in srgb, var(--primary) 35%, var(--border)); }
.hero h1 { font-size: 1.5rem; }
.hero p { margin: 0; }
.hero-compact { padding: .65rem .85rem; margin: 0 0 .85rem; gap: .7rem; border-width: 1px; }
.hero-compact .hero-kicker { margin: 0 0 .15rem; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); }
.hero-compact .muted { font-size: .88rem; line-height: 1.3; }
.hero-compact .btn { flex: none; white-space: nowrap; }
.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); }
.banner.install-banner { justify-content: flex-start; background: color-mix(in srgb, var(--primary) 12%, var(--card)); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.install-banner img { flex: none; border-radius: 11px; }
.install-banner > span:nth-child(2) { flex: 1; line-height: 1.35; }
.install-actions { display: flex; align-items: center; gap: .3rem; flex: none; }
.install-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.install-head img { width: 56px; height: 56px; border-radius: 14px; flex: none; }
.install-head p { margin: 0; }
.install-steps { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.install-step { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: 12px; background: var(--bg-2); line-height: 1.4; }
.install-num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #0b1220; font-size: .9rem; }
.install-ico { display: inline-block; padding: 0 .2rem; }
.install-ok { width: 100%; }
@media (max-width: 520px) { .install-banner .muted.small { display: none; } }

.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: calc(1.2rem + env(safe-area-inset-bottom)); 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: .4rem; height: 100dvh; padding: max(.45rem, env(safe-area-inset-top)) max(2.1rem, calc(env(safe-area-inset-right) + 1.6rem)) max(.45rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); overflow: hidden; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary-2) 18%, transparent), transparent 50%), var(--bg); }
.game-screen.has-panel { overflow-y: auto; }
/* Segurar o dedo na tela durante o jogo não seleciona texto nem abre o menu do navegador. */
.game-screen { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.game-screen input, .game-screen textarea, .game-screen [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.game-screen img { -webkit-user-drag: none; }
.hud { flex: none; width: min(900px, 100%); display: flex; flex-direction: column; gap: .3rem; }
.game-title { display: flex; flex-direction: column; min-width: 0; }
.players { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; gap: .4rem; align-items: center; }
.player { min-height: 0; padding: .3rem .5rem; border-radius: 12px; background: var(--card); border: 1px solid var(--border); transition: box-shadow .15s; }
.game-screen .avatar:not(.xl) { width: 34px; height: 34px; font-size: .95rem; }
.game-screen .player-inner.small .avatar { width: 24px; height: 24px; font-size: .7rem; }

/* menu lateral da partida */
.drawer-handle { position: absolute; right: env(safe-area-inset-right); top: 50%; z-index: 31; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 4.6rem; padding: 0; transform: translateY(-50%); border: 1px solid var(--border); border-right: 0; border-radius: 12px 0 0 12px; background: color-mix(in srgb, var(--card) 92%, transparent); color: var(--text); font-size: 1.5rem; font-weight: 800; cursor: pointer; box-shadow: -4px 0 14px rgb(0 0 0 / .35); transition: transform .2s, opacity .2s; }
.drawer-handle span { animation: nudge 1.8s ease-in-out 2; }
.drawer-open .drawer-handle { opacity: 0; pointer-events: none; transform: translate(100%, -50%); }
.drawer-tip { position: absolute; right: calc(env(safe-area-inset-right) + 2.3rem); top: 50%; z-index: 32; max-width: min(240px, 60vw); padding: .55rem .8rem; border-radius: 12px; background: var(--primary); color: #0b1220; font-weight: 700; font-size: .88rem; line-height: 1.3; box-shadow: 0 8px 24px rgb(0 0 0 / .45); transform: translateY(-50%); cursor: pointer; }
.drawer-tip::after { content: ''; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; background: var(--primary); transform: translateY(-50%) rotate(45deg); border-radius: 2px; }
.drawer-tip.show { animation: tipIn .35s cubic-bezier(.2,1.4,.4,1) both, tipOut .4s 2.8s ease-in forwards; }
.voice-fab { position: absolute; right: env(safe-area-inset-right); top: calc(50% - 5.4rem); z-index: 31; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; width: 2rem; min-height: 3.6rem; padding: .3rem 0; transform: translateY(-50%); border: 1px solid color-mix(in srgb, var(--primary) 55%, var(--border)); border-right: 0; border-radius: 12px 0 0 12px; background: color-mix(in srgb, var(--card) 92%, transparent); color: var(--text); cursor: pointer; box-shadow: -4px 0 14px rgb(0 0 0 / .35); transition: background .2s, transform .2s, opacity .2s; animation: voicePulse 2.2s ease-in-out 3; }
.voice-fab-icon { font-size: 1.1rem; line-height: 1; }
.voice-fab-label { font-size: .58rem; font-weight: 800; letter-spacing: .02rem; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.voice-fab.on { background: #16a34a; border-color: #22c55e; color: #fff; animation: none; }
.voice-fab.on.speaking { box-shadow: 0 0 0 3px rgb(34 197 94 / .45), -4px 0 14px rgb(0 0 0 / .35); }
.voice-fab.peer-on { animation: voicePulse 1.4s ease-in-out infinite; }
.drawer-open .voice-fab { opacity: 0; pointer-events: none; transform: translate(100%, -50%); }
@keyframes voicePulse { 0%, 100% { box-shadow: -4px 0 14px rgb(0 0 0 / .35); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 45%, transparent), -4px 0 14px rgb(0 0 0 / .35); } }
.voice-tip { position: absolute; right: calc(env(safe-area-inset-right) + 2.7rem); top: calc(50% - 5.4rem); z-index: 32; max-width: min(260px, 64vw); padding: .6rem .85rem; border-radius: 12px; background: var(--primary); color: #0b1220; font-weight: 700; font-size: .88rem; line-height: 1.3; box-shadow: 0 8px 24px rgb(0 0 0 / .45); transform: translateY(-50%); cursor: pointer; }
.voice-tip::after { content: ''; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; background: var(--primary); transform: translateY(-50%) rotate(45deg); border-radius: 2px; }
.voice-tip.show { animation: tipIn .35s cubic-bezier(.2,1.4,.4,1) both; }
.voice-note { margin: .35rem 0 0; padding: .45rem .7rem; 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: .86rem; font-weight: 600; }
.voice-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .7rem; border-radius: 12px; background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); font-weight: 600; font-size: .9rem; }
.voice-label { margin-top: .3rem; }
.google-login { display: flex; justify-content: center; min-height: 44px; }
.login-divider { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .8rem; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.share-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin: .6rem 0; }
.share-app { justify-content: center; text-decoration: none; font-weight: 700; }
.share-whatsapp { border-color: #25d366; }
.share-telegram { border-color: #2aabee; }
.share-facebook { border-color: #1877f2; }
.share-link { display: flex; gap: .5rem; margin-bottom: .6rem; }
.share-link .input { flex: 1; min-width: 0; font-size: .85rem; }
.quick-ad { display: grid; gap: .7rem; justify-items: center; }
.quick-ad-slot { display: grid; place-items: center; width: 100%; min-height: 250px; border-radius: 12px; background: color-mix(in srgb, var(--card) 70%, #000); border: 1px dashed var(--border); color: var(--muted); font-weight: 700; text-align: center; overflow: hidden; }
.quick-ad-skip { min-width: 9rem; }
.drawer-backdrop { position: absolute; inset: 0; z-index: 33; background: rgb(2 6 23 / .45); animation: fadeIn .2s ease-out; }
.game-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 34; width: min(320px, 86vw); display: flex; flex-direction: column; gap: .8rem; padding: max(.8rem, env(safe-area-inset-top)) max(.9rem, env(safe-area-inset-right)) max(.9rem, env(safe-area-inset-bottom)) .9rem; overflow-y: auto; background: var(--bg-2); border-left: 1px solid var(--border); box-shadow: -12px 0 40px rgb(0 0 0 / .5); transform: translateX(105%); transition: transform .25s cubic-bezier(.2,.8,.3,1); }
.game-drawer.open { transform: none; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border); }
.drawer-head .icon-btn { font-size: 1.5rem; font-weight: 800; }
.drawer-section { display: flex; flex-direction: column; gap: .5rem; padding: .7rem; border-radius: 14px; background: var(--card); border: 1px solid var(--border); }
.drawer-section .sound-btns { gap: .4rem; }
.drawer-label { font-size: .75rem; font-weight: 800; letter-spacing: .04rem; text-transform: uppercase; color: var(--muted); }
.drawer-row { width: 100%; justify-content: flex-start; text-align: left; }
.drawer-exit { margin-top: auto; color: #fca5a5; border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.game-drawer .game-actions { flex-direction: row; flex-wrap: wrap; }
.game-drawer .game-actions .btn { flex: 1 1 auto; white-space: nowrap; padding-inline: .7rem; }
.game-drawer .voice { flex-wrap: wrap; }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateX(-4px); } }
@keyframes tipIn { from { opacity: 0; transform: translate(14px, -50%) scale(.85); } }
@keyframes tipOut { to { opacity: 0; transform: translate(10px, -50%); visibility: hidden; } }
.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.2rem; font-weight: 700; font-size: .92rem; text-align: center; line-height: 1.25; }
/* O tabuleiro ocupa todo o espaço que sobra; cada jogo se ajusta com unidades cqw/cqh. */
.board-wrap { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; container: board / size; }
.game-screen.has-panel .board-wrap { flex: none; height: min(62dvh, 100vw); }
.board-wrap.empty { flex: none; height: auto !important; container-type: normal; }
.board-placeholder { display: flex; align-items: center; justify-content: center; width: min(560px, 100%); height: 110px; border-radius: 18px; border: 2px dashed var(--border); font-size: 3rem; }
.board-stack { position: relative; }
.promo-picker { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); }

.board.lig4 { --l4-gap: clamp(3px, 1.4vw, 9px); width: min(100cqw, 100cqh * 1.13); 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(100cqw, 100cqh); 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; container-type: size; }
.v-cell .mark { font-size: 72cqmin; }
.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(100cqw, 100cqh); 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%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; }
.bn-sea { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.bn-sea.enemy { width: min(100cqw, 60cqh - 2.6rem); }
.bn-sea.own { width: min(70cqw, 36cqh - 2.6rem); }
@container board (min-aspect-ratio: 6 / 5) {
  .board.batalha { flex-direction: row; align-items: center; gap: 1rem; }
  .bn-sea.enemy { width: min(58cqw, 100cqh - 3.4rem); }
  .bn-sea.own { width: min(38cqw, 72cqh - 3.4rem); }
}
.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); } }

/* ---------- Dominó ---------- */
.board.domino { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem; border-radius: 22px; overflow: hidden; box-shadow: 0 14px 40px rgb(0 0 0 / .45); }
.board.domino .dm-table { flex: 1 1 auto; min-height: 120px; }
.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 { --felt: #15803d; position: relative; width: 100%; min-height: 120px; display: flex; align-items: center; justify-content: center; overflow-x: hidden; overflow-y: auto; border-radius: 16px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--felt) 80%, #fff), color-mix(in srgb, var(--felt) 40%, #000)); box-shadow: inset 0 0 30px rgb(0 0 0 / .5), 0 10px 30px rgb(0 0 0 / .4); }
.dm-snake { position: absolute; left: 8px; right: 8px; top: 8px; }
.dm-snake .dm-tile { position: absolute; box-sizing: border-box; justify-content: center; }
.dm-snake .dm-tile.just { animation: pop .35s ease-out; }
.dm-snake .dm-end { position: absolute; display: grid; place-items: center; padding: 0; font-size: .7rem; background: rgb(15 23 42 / .7); box-shadow: 0 0 10px rgb(253 224 71 / .6); }
.dm-empty { padding: .3rem .7rem; border-radius: 10px; background: rgb(0 0 0 / .35); color: #f1f5f9; }
.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: clamp(30px, 4.2vh, 38px); 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.mine .dm-tile { cursor: pointer; }
.dm-hand.own.reveal .dm-tile.playable { box-shadow: 0 0 0 2px var(--primary), 0 3px 8px rgb(0 0 0 / .5); animation: pulse 1.2s ease-in-out infinite; }
.dm-hand.own.mine .dm-tile:hover, .dm-hand.own .dm-tile.sel { transform: translateY(-6px); }
.dm-why { padding: .15rem .55rem; border-radius: 999px; background: rgb(253 224 71 / .18); color: #fde68a; }
.nope { animation: nope .32s ease-in-out; }
@keyframes nope { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }
.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; }
.dm-scene .dm-actions { padding: .25rem .6rem; border-radius: 12px; background: rgb(15 23 42 / .6); }
.dm-scene .dm-stock { color: #e2e8f0; }
.dm-scene .dm-hand.opp { padding: .2rem .5rem; border-radius: 10px; background: rgb(0 0 0 / .25); }
/* cenários do dominó: fundo = ambiente, .dm-table = superfície da mesa (também nas miniaturas: .scene-swatch) */
.dm-scene.scene-felt { background: repeating-linear-gradient(90deg, #5b3a1e 0 96px, #4a2f17 96px 98px, #6b4524 98px 190px, #3f2812 190px 192px); }
.scene-felt .dm-table { box-shadow: inset 0 0 30px rgb(0 0 0 / .5), 0 0 0 6px #7c4a1e, 0 0 0 8px #3b2210, 0 12px 30px rgb(0 0 0 / .5); }
.dm-scene.scene-boteco { background: linear-gradient(rgb(0 0 0 / .15), rgb(0 0 0 / .35)), conic-gradient(#b91c1c 0 25%, #fef3c7 0 50%, #b91c1c 0 75%, #fef3c7 0) 0 0 / 44px 44px; }
.scene-boteco .dm-table { background: linear-gradient(rgb(255 255 255 / .12), transparent 40%), repeating-linear-gradient(0deg, #c8924f 0 38px, #b07a3d 38px 40px, #d29c58 40px 78px, #a8723a 78px 80px); box-shadow: inset 0 0 22px rgb(70 30 0 / .45), 0 0 0 5px #9ca3af, 0 0 0 7px #4b5563, 0 12px 26px rgb(0 0 0 / .5); }
.dm-scene.scene-praca { background: radial-gradient(circle, #166534 0 26px, transparent 27px) 10px 14px / 150px 130px, radial-gradient(circle, #15803d 0 18px, transparent 19px) 85px 70px / 150px 130px, repeating-linear-gradient(45deg, #d6d3d1 0 14px, #a8a29e 14px 16px), #d6d3d1; }
.scene-praca .dm-table { background: radial-gradient(circle at 40% 30%, rgb(255 255 255 / .25), transparent 60%), radial-gradient(circle, rgb(0 0 0 / .08) 0 1px, transparent 1.5px) 0 0 / 7px 7px, #9ca3af; box-shadow: inset 0 0 18px rgb(0 0 0 / .3), 0 0 0 6px #6b7280, 0 12px 26px rgb(0 0 0 / .45); }
.dm-scene.scene-praia { background: radial-gradient(ellipse 70% 10% at 50% 15%, rgb(255 255 255 / .45), transparent 70%), linear-gradient(#0ea5e9 0 18%, #7dd3fc 18% 22%, #fde68a 22%, #fbbf24); }
.scene-praia .dm-table { background: radial-gradient(circle at 50% 35%, #fef08a, #facc15 60%, #eab308); box-shadow: inset 0 0 0 4px rgb(255 255 255 / .35), inset 0 -10px 20px rgb(161 98 7 / .3), 0 14px 24px rgb(120 53 15 / .35); }
.scene-praia .dm-empty { background: rgb(120 53 15 / .6); }
.dm-scene.scene-marmore { background: radial-gradient(ellipse at 50% 0%, rgb(253 230 138 / .25), transparent 60%), linear-gradient(#1c1917, #0c0a09); }
.scene-marmore .dm-table { background: linear-gradient(115deg, transparent 30%, rgb(120 113 108 / .35) 31%, transparent 33%) 0 0 / 260px 200px, linear-gradient(65deg, transparent 55%, rgb(120 113 108 / .25) 56%, transparent 58%) 0 0 / 180px 240px, radial-gradient(circle at 40% 30%, #fafaf9, #e7e5e4 70%, #d6d3d1); box-shadow: inset 0 0 20px rgb(0 0 0 / .2), 0 0 0 4px #b45309, 0 0 0 6px #78350f, 0 14px 30px rgb(0 0 0 / .6); }
.scene-marmore .dm-empty { color: #fff; }
.dm-scene.scene-cassino { background: radial-gradient(circle at 50% 40%, #991b1b, #450a0a 80%); box-shadow: inset 0 0 0 5px #d4a017, inset 0 0 40px rgb(0 0 0 / .6), 0 14px 40px rgb(0 0 0 / .45); }
.scene-cassino .dm-table { --felt: #166534; box-shadow: inset 0 0 30px rgb(0 0 0 / .5), 0 0 0 6px #78350f, 0 0 0 9px #d4a017, 0 14px 30px rgb(0 0 0 / .5); }
.dm-scene.scene-neon { background: linear-gradient(rgb(236 72 153 / .12) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgb(34 211 238 / .12) 1px, transparent 1px) 0 0 / 32px 32px, radial-gradient(circle at 50% 30%, #3b0764, #0a0014 80%); }
.scene-neon .dm-table { background: rgb(10 0 25 / .75); box-shadow: inset 0 0 24px rgb(34 211 238 / .25), 0 0 0 2px #22d3ee, 0 0 22px #22d3ee; animation: dmNeon 2.4s ease-in-out infinite alternate; }
@keyframes dmNeon { to { box-shadow: inset 0 0 24px rgb(236 72 153 / .25), 0 0 0 2px #ec4899, 0 0 26px #ec4899; } }
.dm-scene.scene-galaxia { background: radial-gradient(circle, #fff 0 1px, transparent 1.5px) 0 0 / 40px 40px, radial-gradient(circle, rgb(255 255 255 / .7) 0 1px, transparent 1.5px) 20px 13px / 63px 57px, radial-gradient(ellipse at 25% 30%, rgb(168 85 247 / .55), transparent 55%), radial-gradient(ellipse at 80% 70%, rgb(34 211 238 / .35), transparent 50%), #0b0620; }
.scene-galaxia .dm-table { background: rgb(15 10 40 / .6); box-shadow: inset 0 0 30px rgb(168 85 247 / .3), 0 0 0 2px rgb(196 181 253 / .6), 0 0 40px rgb(168 85 247 / .45); }
.dm-scene .dm-table.custom { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--felt) 80%, #fff), color-mix(in srgb, var(--felt) 40%, #000)); }
.scene-swatch.dm-scene { padding: 0; border-radius: 12px; box-shadow: none; }
.scene-swatch .dm-table { width: 64%; min-height: 0; height: 58%; border-radius: 8px; }
.scene-swatch .dm-tile.mini { --t: 11px; padding: 1px; transform: rotate(-8deg); }
.btn.hint { animation: pulse 1s ease-in-out infinite; box-shadow: 0 0 0 3px var(--gold); }

/* ---------- Ligue os Pontos ---------- */
.board.pontos { width: min(100cqw, 100cqh); 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; }
/* molduras novas: anel (::before), enfeites em órbita (.fx-orbit), anel extra (.fx-ring2) e raios (.fx-rays) */
.fx-orbit { position: absolute; inset: -22%; z-index: 3; pointer-events: none; animation: spin var(--orbit-s, 7s) linear infinite; font-style: normal; }
.fx-arm { position: absolute; inset: 0; transform: rotate(var(--a)); font-style: normal; }
.fx-glyph { position: absolute; left: 50%; top: 0; translate: -50% -50%; font-size: max(10px, .6em); line-height: 1; font-style: normal; color: var(--orb-color, #fff); text-shadow: 0 0 6px var(--fx-glow, transparent); animation: orbBob 1.6s ease-in-out var(--d, 0s) infinite alternate; }
.fx-ring2 { position: absolute; inset: -10px; border-radius: 50%; z-index: -1; pointer-events: none; border: 2px dashed var(--ring2, #a855f7); animation: spin 5s linear infinite reverse; }
.fx-rays { position: absolute; inset: -38%; border-radius: 50%; z-index: -3; pointer-events: none; background: repeating-conic-gradient(var(--ray, rgb(250 204 21 / .55)) 0 6deg, transparent 6deg 22deg); -webkit-mask: radial-gradient(closest-side, transparent 52%, #000 60%, transparent 100%); mask: radial-gradient(closest-side, transparent 52%, #000 60%, transparent 100%); animation: spin 12s linear infinite; }
.avatar.sm .fx-orbit { inset: -26%; }
.avatar.sm .fx-glyph { font-size: 8px; }
.avatar.sm .fx-rays, .avatar.sm .fx-ring2 { display: none; }
@keyframes orbBob { from { scale: .8; opacity: .75; } to { scale: 1.15; opacity: 1; } }
@keyframes neonPulse { 0%, 100% { opacity: 1; } 45% { opacity: .55; } 50% { opacity: 1; } 55% { opacity: .4; } }
@keyframes fxShine { 0%, 60% { background-position: 200% 0; } 100% { background-position: -100% 0; } }

.fx-prata { --fx-bg: conic-gradient(#64748b, #f8fafc, #94a3b8, #e2e8f0, #475569, #f1f5f9, #64748b); --fx-glow: rgb(226 232 240 / .6); --orbit-s: 9s; }
.fx-ouro { --fx-bg: conic-gradient(#92400e, #fde68a, #f59e0b, #fff7d6, #b45309, #facc15, #92400e); --fx-glow: rgb(245 196 81 / .85); --orb-color: #fde68a; --orbit-s: 8s; }
.fx-neon { --fx-bg: conic-gradient(#22d3ee, #a855f7, #ec4899, #22d3ee); --fx-glow: rgb(34 211 238 / .95); --ring2: #ec4899; }
.fx-neon::after { box-shadow: 0 0 14px #22d3ee, 0 0 26px rgb(168 85 247 / .7); animation: neonPulse 2.4s linear infinite; }
.fx-neon .fx-ring2 { border-style: solid; border-width: 1.5px; inset: -9px; opacity: .8; animation: neonPulse 1.7s linear infinite; }
.fx-coracoes { --fx-bg: conic-gradient(#fb7185, #f9a8d4, #e11d48, #fbcfe8, #fb7185); --fx-glow: rgb(244 63 94 / .75); --orbit-s: 6s; }
.fx-pixel { --fx-bg: conic-gradient(#ef4444 0 12.5%, #f97316 0 25%, #facc15 0 37.5%, #22c55e 0 50%, #06b6d4 0 62.5%, #3b82f6 0 75%, #8b5cf6 0 87.5%, #ec4899 0); --fx-glow: rgb(250 204 21 / .5); }
.fx-pixel::before { animation: spin 2s steps(8) infinite !important; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)) !important; mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)) !important; }
.fx-oceano { --fx-bg: conic-gradient(#0c4a6e, #38bdf8, #0ea5e9, #a5f3fc, #0369a1, #22d3ee, #0c4a6e); --fx-glow: rgb(14 165 233 / .8); --orbit-s: 10s; }
.fx-oceano .fx-orbit { animation-direction: reverse; }
.fx-toxico { --fx-bg: conic-gradient(#14532d, #84cc16, #22c55e, #d9f99d, #15803d, #a3e635, #14532d); --fx-glow: rgb(132 204 22 / .95); --orb-color: #bef264; --orbit-s: 4s; }
.fx-toxico .fx-glyph { animation-duration: .7s; }
.fx-estrelas { --fx-bg: conic-gradient(#1e1b4b, #fde047, #312e81, #fef9c3, #1e3a8a, #facc15, #1e1b4b); --fx-glow: rgb(253 224 71 / .7); --orbit-s: 5s; }
.fx-sakura { --fx-bg: conic-gradient(#fbcfe8, #f472b6, #fdf2f8, #ec4899, #fbcfe8); --fx-glow: rgb(244 114 182 / .7); --orbit-s: 11s; }
.fx-sakura .fx-glyph { animation: petal 2.4s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes petal { from { rotate: -25deg; scale: .8; } to { rotate: 35deg; scale: 1.1; } }
.fx-matrix { --fx-bg: conic-gradient(#022c22 0 15%, #22c55e 15% 20%, #052e16 20% 45%, #4ade80 45% 50%, #022c22 50% 80%, #86efac 80% 84%, #022c22 84%); --fx-glow: rgb(34 197 94 / .9); --orb-color: #4ade80; --orbit-s: 5s; }
.fx-matrix::before { animation: spin 1.6s steps(10) infinite !important; }
.fx-matrix .fx-glyph { font-family: ui-monospace, Consolas, monospace; font-weight: 800; animation: matrixBlink .9s steps(2) var(--d, 0s) infinite; }
@keyframes matrixBlink { 50% { opacity: .25; } }
.fx-portal { --fx-bg: conic-gradient(#7c3aed, #22d3ee, #0f172a, #a855f7, #06b6d4, #0f172a, #7c3aed); --fx-glow: rgb(139 92 246 / .95); --ring2: #22d3ee; }
.fx-portal::before { animation-duration: 1.8s !important; }
.fx-portal .fx-ring2 { inset: -11px; border-width: 2px; animation-duration: 2.6s; box-shadow: 0 0 10px rgb(34 211 238 / .6); }
.fx-diamante { --fx-bg: conic-gradient(#e0f2fe, #ffffff, #67e8f9, #f0f9ff, #a5b4fc, #ffffff, #e0f2fe); --fx-glow: rgb(165 243 252 / .95); --ray: rgb(224 242 254 / .5); --orb-color: #e0f2fe; --orbit-s: 8s; }
.fx-diamante .fx-rays { inset: -30%; animation-duration: 18s; }
.fx-dragao { --fx-bg: conic-gradient(#450a0a, #dc2626, #f97316, #1c1917, #b91c1c, #fbbf24, #450a0a); --fx-glow: rgb(220 38 38 / .95); --orbit-s: 3.5s; }
.fx-dragao::before { animation-duration: 1.2s !important; }
.fx-dragao::after { animation: fxGlow .45s ease-in-out infinite alternate; }
.fx-dragao .fx-glyph { animation: flicker .35s ease-in-out infinite alternate; }
.fx-lendaria { --fx-bg: conic-gradient(#facc15, #fff7d6, #f97316, #fde047, #a855f7, #facc15); --fx-glow: rgb(250 204 21 / 1); --ray: rgb(253 224 71 / .6); --orbit-s: 6s; }
.fx-lendaria::before { inset: -6px; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px)); animation-duration: 2s !important; }
.fx-lendaria::after { box-shadow: 0 0 18px rgb(250 204 21 / .9), 0 0 36px rgb(249 115 22 / .5); }
@media (prefers-reduced-motion: reduce) { .fx-orbit, .fx-rays, .fx-ring2, .avatar.fx::before { animation: none !important; } }
@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; }
.shop-item .avatar.lg { margin: 26px 0 12px; }
.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); }

.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: listas horizontais (jogar agora / favoritos) ---------- */
.hscroll { position: relative; margin: 0 -1rem; }
.hscroll-track { display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 1rem; padding: .2rem 1rem .8rem; scrollbar-width: thin; scrollbar-color: var(--border) transparent; overscroll-behavior-x: contain; }
.hscroll-track::-webkit-scrollbar { height: 6px; }
.hscroll-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.hscroll-arrow { position: absolute; top: calc(50% - .4rem); translate: 0 -50%; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: color-mix(in srgb, var(--card-2) 92%, transparent); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgb(0 0 0 / .45); display: none; }
.hscroll-arrow.prev { left: .4rem; }
.hscroll-arrow.next { right: .4rem; }
@media (hover: hover) and (pointer: fine) { .hscroll-arrow:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; } }
.quick-card { position: relative; flex: 0 0 clamp(190px, 46vw, 240px); scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); background: var(--card); transition: transform .12s, border-color .12s; }
.quick-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.quick-card:first-child { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); box-shadow: 0 0 24px color-mix(in srgb, var(--gold) 14%, transparent); }
.quick-open { display: flex; flex-direction: column; color: var(--text); text-decoration: none; flex: 1; }
.quick-art { aspect-ratio: 16 / 9; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-2); }
.quick-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.quick-card:hover .quick-art img { transform: scale(1.05); }
.quick-body { display: flex; flex-direction: column; gap: .2rem; padding: .6rem .75rem .2rem; }
.quick-body .game-name { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-rank { font-size: .66rem; font-weight: 800; letter-spacing: .03rem; color: var(--gold); text-transform: uppercase; }
.quick-play { margin: .45rem .75rem .75rem; }
.fav-btn { position: absolute; top: .45rem; right: .45rem; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgb(6 12 24 / .65); color: #fff; font-size: 1.05rem; cursor: pointer; backdrop-filter: blur(4px); }
.fav-btn.on { color: var(--gold); background: rgb(6 12 24 / .8); }
.fav-btn:active { transform: scale(.9); }
a.game-card { text-decoration: none; }
.suggest-card { display: flex; flex-direction: column; gap: .6rem; }
.suggest-card p { margin: 0; }
.suggest-row { display: flex; gap: .6rem; }
.suggest-row .input { flex: 1; }

/* ---------- página do jogo ---------- */
.gp-head { display: grid; grid-template-columns: minmax(0, 180px) 1fr; gap: 1rem; align-items: center; padding: .7rem; 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 { min-width: 0; }
.gp-info h1 { font-size: 1.45rem; margin: .1rem 0 .25rem; }
.gp-desc { margin: 0 0 .2rem; }
.gp-back { padding: 0; }
.gp-social { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.social-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; transition: transform .08s, border-color .12s; }
.social-btn:active { transform: scale(.94); }
.social-btn.on { border-color: color-mix(in srgb, #f43f5e 55%, var(--border)); background: color-mix(in srgb, #f43f5e 14%, var(--bg-2)); }
.social-btn.on:nth-child(2) { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); background: color-mix(in srgb, var(--gold) 14%, var(--bg-2)); }
.gp-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; margin: .8rem 0; scrollbar-width: none; max-width: 100%; }
.gp-tabs button { flex: 0 0 auto; }
.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)); }
.gp-play-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.gp-side { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.gp-side .how-to { margin: 0; }
.gp-side .card { margin: 0; }

.gp-quick-play {
  display: flex; width: 100%; margin-top: .55rem; padding: .85rem 1rem;
  font-size: 1.05rem; font-weight: 900; border-radius: 14px;
  border: 3px solid #111; box-shadow: 0 5px 0 #111;
  animation: ctaGlow 2.4s ease-in-out infinite;
}
.play-panel { display: flex; flex-direction: column; gap: .8rem; margin: 0; border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); box-shadow: 0 10px 30px rgb(0 0 0 / .25); }
.play-tweaks { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); padding: .15rem .7rem .55rem; }
.play-tweaks summary {
  cursor: pointer; list-style: none; font-weight: 700; font-size: .9rem;
  padding: .55rem 0; color: var(--muted);
}
.play-tweaks summary::-webkit-details-marker { display: none; }
.play-tweaks[open] summary { color: var(--text); border-bottom: 1px solid var(--border); margin-bottom: .55rem; }
.mode-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.mode-switch.two { grid-template-columns: repeat(2, 1fr); }
.mode-btn { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .6rem .3rem; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg-2); color: var(--text); font: inherit; cursor: pointer; transition: border-color .12s, background .12s, transform .08s; }
.mode-btn:active { transform: scale(.97); }
.mode-btn strong { font-size: .92rem; }
.mode-icon { font-size: 1.35rem; line-height: 1.2; }
.mode-btn.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, var(--bg-2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.play-opts { display: flex; flex-direction: column; gap: .35rem; }
.play-opts .chip-row { margin: 0 0 .25rem; }
.opt-label { font-size: .74rem; font-weight: 700; letter-spacing: .03rem; text-transform: uppercase; color: var(--muted); }
.play-note { margin: .1rem 0 0; }
.stake-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.stake-btn { position: relative; padding: .5rem .85rem; border-radius: 10px; border: 1.5px solid var(--border); background: var(--bg-2); color: var(--text); font: inherit; cursor: pointer; }
.stake-btn strong { color: var(--gold); font-size: .95rem; }
.stake-btn:last-child strong { color: var(--text); }
.stake-btn.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, var(--bg-2)); }
.stake-btn.locked { opacity: .5; }
.stake-btn .waiting-dot { position: absolute; top: -7px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--ok); color: #052e14; font-size: .68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.play-cta { width: 100%; padding: .95rem 1rem; font-size: 1.08rem; font-weight: 800; border-radius: 14px; box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 30%, transparent); animation: ctaGlow 2.4s ease-in-out infinite; }
@keyframes ctaGlow { 50% { box-shadow: 0 8px 30px color-mix(in srgb, var(--primary) 50%, transparent); } }
.play-panel .challenge { margin-top: 0; }
.friend-list.compact { display: flex; flex-direction: column; gap: .4rem; }

.comment-form { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .9rem; }
.comment-list { display: flex; flex-direction: column; gap: .7rem; }
.comment { display: flex; gap: .6rem; align-items: flex-start; }
.comment .avatar { margin-top: .15rem; }
.comment-body { flex: 1; min-width: 0; padding: .5rem .7rem; border-radius: 12px; background: var(--bg-2); }
.comment-top { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.comment-top .link-btn { margin-left: auto; padding: 0; font-size: .76rem; }
.comment-text { margin: .2rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; }

@media (max-width: 760px) {
  .gp-play-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gp-head { grid-template-columns: 72px 1fr; gap: .65rem; padding: .5rem; align-items: start; }
  .gp-quick-play { margin-top: .4rem; padding: .75rem .9rem; font-size: 1rem; }
  .play-panel { padding: .8rem; gap: .55rem; }
  .mode-btn { padding: .4rem .2rem; }
  .mode-icon { font-size: 1.1rem; }
  .mode-btn .tiny { font-size: .68rem; }
  .play-opts .chip-btn { padding: .38rem .65rem; font-size: .82rem; }
  .stake-btn { padding: .4rem .65rem; }
  .play-cta { padding: .85rem 1rem; font-size: 1.05rem; }
  .gp-art { aspect-ratio: 1; }
  .gp-info h1 { font-size: 1.12rem; }
  .gp-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; }
  .gp-info .chips { display: none; }
  .gp-social { margin-top: .3rem; }
  .social-btn { padding: .32rem .55rem; font-size: .78rem; }
  .gp-tabs { margin: .5rem 0; }
  .gp-side { order: 2; }
  .play-panel { order: 1; }
  .suggest-row { flex-direction: column; }
  .hscroll { margin: 0 -.9rem; }
}
.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); }
.presence.busy { background: #f59e0b; }
.friend-status.on { color: var(--ok); }
.friend-status.busy { color: #fbbf24; font-weight: 600; }
.friend-text { display: flex; flex-direction: column; min-width: 0; }
.profile-link { cursor: pointer; }
.friend-text.profile-link:hover strong, .rank-row.profile-link:hover .rank-nick { text-decoration: underline; }
.badge.online-badge { background: var(--ok); color: #06101f; font-weight: 800; }
.avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; z-index: 0; }
.friend-toast { display: flex; align-items: center; gap: .6rem; text-align: left; pointer-events: auto; cursor: pointer; border-color: color-mix(in srgb, var(--ok) 60%, transparent); width: 100%; }
.friend-toast-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.photo-box { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.photo-btns { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.profile-head { align-items: flex-start; }
.profile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.bio-form { display: flex; flex-direction: column; gap: .35rem; margin-top: .3rem; }
.bio-form textarea { resize: vertical; min-height: 3.2rem; }
.top-games { display: flex; flex-wrap: wrap; gap: .45rem; }
.game-tag { display: inline-flex; align-items: center; gap: .2rem; padding: .35rem .75rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border)); background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--text); font-weight: 700; font-size: .85rem; cursor: pointer; }
.game-tag small { color: var(--muted); font-weight: 500; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .55rem; }
.ach { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .6rem .5rem; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); text-align: center; filter: grayscale(1); opacity: .65; }
.ach.got { filter: none; opacity: 1; border-color: color-mix(in srgb, #fbbf24 55%, var(--border)); background: color-mix(in srgb, #fbbf24 9%, var(--bg-2)); }
.ach .progress { width: 100%; }
.ach-icon { font-size: 1.7rem; line-height: 1.1; }
.ach-name { font-size: .82rem; }
.pm-head { display: flex; align-items: center; gap: 1rem; }
.pm-info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.pm-info h3 { margin: 0; }
.pm-bio { margin: .2rem 0 0; padding: .6rem .8rem; border-radius: 12px; background: var(--bg-2); white-space: pre-line; overflow-wrap: anywhere; }
.pm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .6rem; }
@media (max-width: 520px) { .pm-stats { grid-template-columns: repeat(2, 1fr); } }
.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(100cqw, 100cqh - 76px); 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; --uw: clamp(46px, min(16cqw, 10.5cqh), 90px); position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .6rem; padding: .8rem .6rem; border-radius: 22px; color: #fff; overflow: hidden; isolation: isolate; box-shadow: 0 14px 40px rgb(0 0 0 / .45); }
.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: rgb(15 23 42 / .55); border: 1px solid rgb(255 255 255 / .14); backdrop-filter: blur(3px); }
.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: calc(var(--uw, 54px) * 1.5); height: calc(var(--uw, 54px) * 2.22); 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 { position: relative; display: flex; align-items: center; justify-content: center; gap: 1.2rem; width: min(560px, 100%); min-height: 170px; padding: 1.2rem 1rem; border-radius: 18px; transition: box-shadow .5s; }
.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 2px rgb(255 255 255 / .5), 0 4px 10px rgb(0 0 0 / .4); }
.uno-deck.can.reveal .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; --w: var(--uw, 54px); position: relative; flex: 0 0 auto; width: var(--w); height: calc(var(--w) * 1.48); padding: 0; border-radius: calc(var(--w) * .15); border: 3px solid #fff; background: var(--c); color: #fff; font: 900 calc(var(--w) * .3)/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: calc(var(--w) * .38); 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: calc(var(--w) * .19); z-index: 1; }
.uno-corner.br { top: auto; left: auto; bottom: 3px; right: 4px; transform: rotate(180deg); }
.uno-card.big { --w: calc(var(--uw, 54px) * 1.5); }
.uno-pile { position: relative; z-index: 1; }
.uno-pile > .uno-card:first-child { position: relative; z-index: 1; }
.uno-card.under { position: absolute; inset: 0; z-index: 0; transform: rotate(-14deg) translate(-6px, 3px); filter: brightness(.85); }
.uno-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; padding: .6rem; border-radius: 14px; background: rgb(15 23 42 / .55); border: 1px solid rgb(255 255 255 / .14); backdrop-filter: blur(3px); max-width: 100%; }
.uno-tip { padding: .15rem .6rem; border-radius: 999px; background: rgb(15 23 42 / .55); }

/* cenários (também usados nas miniaturas da loja: .scene-swatch) */
.uno-scene.scene-felt { background: repeating-radial-gradient(circle at 30% 20%, rgb(255 255 255 / .035) 0 2px, transparent 2px 12px), radial-gradient(circle at 50% 40%, #22a05a, #0c4a26 75%); box-shadow: inset 0 0 0 6px #f97316, inset 0 0 0 9px #7c2d12, 0 14px 40px rgb(0 0 0 / .45); }
.scene-felt .uno-table { border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #fdba74, #f97316 55%, #c2410c); box-shadow: 0 0 0 9px #1f2937, 0 0 0 12px #f97316, inset 0 0 0 3px color-mix(in srgb, var(--cur) 80%, transparent), 0 14px 30px rgb(0 0 0 / .45); }
.scene-felt .uno-table::before { content: ''; position: absolute; inset: 12px 24px; border-radius: 50%; border: 3px dotted rgb(255 255 255 / .55); pointer-events: none; }
.uno-scene.scene-wood { background: linear-gradient(to bottom, transparent 55%, rgb(255 255 255 / .28)), repeating-linear-gradient(0deg, transparent 0 74px, rgb(0 0 0 / .1) 74px 76px), repeating-linear-gradient(90deg, #b9824f 0 110px, #a8733f 110px 112px, #c08b57 112px 220px, #9c6a3a 220px 222px); }
.scene-wood .uno-table { background: none; box-shadow: none; }
.scene-wood .uno-table .uno-card.big, .scene-wood .uno-table .uno-back.big { box-shadow: 0 10px 22px rgb(0 0 0 / .4); }
.uno-scene.scene-redwood { background: radial-gradient(ellipse at 50% 0%, rgb(255 255 255 / .18), transparent 60%), repeating-linear-gradient(90deg, #9a3412 0 90px, #7c2d12 90px 92px, #a8441b 92px 180px, #6f2810 180px 182px); }
.scene-redwood .uno-table { background: none; box-shadow: none; }
.uno-scene.scene-diamond { background: conic-gradient(from 45deg, rgb(255 255 255 / .06) 0 25%, transparent 0 50%, rgb(255 255 255 / .06) 0 75%, transparent 0) 0 0 / 56px 56px, radial-gradient(circle at 50% 45%, #1f74e0, #0a347f 80%); }
.scene-diamond .uno-table { background: rgb(8 30 80 / .45); border: 2px solid rgb(147 197 253 / .35); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--cur) 65%, transparent), 0 0 30px rgb(59 130 246 / .35); }
.scene-diamond .uno-table::before { content: ''; position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; transform: translate(-50%, -50%) rotate(45deg); border: 2px solid rgb(147 197 253 / .25); border-radius: 14px; pointer-events: none; }
.uno-scene.scene-sunset { background: radial-gradient(circle at 50% 78%, #fde68a 0 10%, rgb(253 230 138 / .35) 10.5% 14%, transparent 14.5%), linear-gradient(#4c1d95, #be185d 45%, #f97316 75%, #fbbf24); }
.scene-sunset .uno-table { background: rgb(30 10 40 / .45); border-radius: 26px; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--cur) 70%, transparent), 0 10px 30px rgb(0 0 0 / .35); }
.uno-scene.scene-candy { background: radial-gradient(circle at 15% 20%, #fff 0 3px, transparent 4px) 0 0 / 46px 46px, repeating-linear-gradient(45deg, #f9a8d4 0 18px, #fbcfe8 18px 36px); }
.scene-candy .uno-table { background: radial-gradient(circle, #fff, #fce7f3); border-radius: 50%; box-shadow: 0 0 0 8px #6ee7b7, 0 0 0 11px #fff, inset 0 0 0 3px color-mix(in srgb, var(--cur) 75%, transparent), 0 12px 26px rgb(190 24 93 / .35); color: #831843; }
.scene-candy .uno-info { color: #831843; }
.uno-scene.scene-party { background: radial-gradient(circle, #f472b6 0 3px, transparent 4px) 0 0 / 70px 60px, radial-gradient(circle, #facc15 0 3px, transparent 4px) 25px 30px / 80px 70px, radial-gradient(circle, #22d3ee 0 3px, transparent 4px) 50px 10px / 60px 90px, radial-gradient(circle at 50% 30%, #6d28d9, #2e1065 75%); }
.scene-party .uno-table { background: rgb(46 16 101 / .55); border-radius: 30px; box-shadow: 0 0 0 3px #f472b6, 0 0 24px #f472b6, inset 0 0 0 3px color-mix(in srgb, var(--cur) 70%, transparent); animation: partyGlow 2.4s ease-in-out infinite alternate; }
@keyframes partyGlow { to { box-shadow: 0 0 0 3px #22d3ee, 0 0 30px #22d3ee, inset 0 0 0 3px color-mix(in srgb, var(--cur) 70%, transparent); } }
.uno-scene.scene-beach { background: radial-gradient(ellipse 60% 14% at 50% 34%, rgb(255 255 255 / .5), transparent 70%), linear-gradient(#38bdf8 0 22%, #0ea5e9 22% 30%, #7dd3fc 30% 34%, #fde68a 34%, #fcd34d); }
.scene-beach .uno-table { background: repeating-linear-gradient(90deg, #ef4444 0 26px, #fff 26px 52px); border-radius: 14px; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--cur) 80%, transparent), 0 12px 24px rgb(120 53 15 / .35); }
.scene-beach .uno-info { padding: .3rem .5rem; border-radius: 10px; background: rgb(15 23 42 / .55); }
.uno-scene.scene-casino { background: radial-gradient(circle at 50% 40%, #991b1b, #450a0a 80%); box-shadow: inset 0 0 0 5px #d4a017, inset 0 0 40px rgb(0 0 0 / .6), 0 14px 40px rgb(0 0 0 / .45); }
.scene-casino .uno-table { border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #15803d, #064e3b 80%); box-shadow: 0 0 0 7px #78350f, 0 0 0 10px #d4a017, inset 0 0 0 3px color-mix(in srgb, var(--cur) 75%, transparent), 0 14px 30px rgb(0 0 0 / .5); }
.uno-scene.scene-galaxy { background: radial-gradient(circle, #fff 0 1px, transparent 1.5px) 0 0 / 40px 40px, radial-gradient(circle, rgb(255 255 255 / .7) 0 1px, transparent 1.5px) 20px 13px / 63px 57px, radial-gradient(ellipse at 25% 30%, rgb(168 85 247 / .55), transparent 55%), radial-gradient(ellipse at 80% 70%, rgb(34 211 238 / .35), transparent 50%), #0b0620; }
.scene-galaxy .uno-table { background: rgb(15 10 40 / .55); border-radius: 50%; box-shadow: 0 0 0 2px rgb(196 181 253 / .6), 0 0 40px rgb(168 85 247 / .45), inset 0 0 0 3px color-mix(in srgb, var(--cur) 70%, transparent); }

/* animações das cartas */
.uno-fx { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 5; pointer-events: none; }
.uno-flyback { position: absolute; left: -29px; top: -43px; }
@keyframes unoFly { from { transform: translate(var(--fx), var(--fy)) rotate(-25deg) scale(.6); opacity: .6; } 70% { transform: translate(0, 0) rotate(6deg) scale(1.08); opacity: 1; } to { transform: none; } }
@keyframes unoDeal { from { transform: translate(-90px, 0) scale(1); opacity: 1; } to { transform: translate(var(--tx), var(--ty)) rotate(20deg) scale(.45); opacity: 0; } }
.uno-burst { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .3rem; white-space: nowrap; }
.uno-burst strong { padding: .2rem .7rem; border-radius: 999px; background: rgb(0 0 0 / .65); font-size: 1rem; text-shadow: 0 1px 2px #000; }
.uno-burst-icon { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; font: 900 3rem/1 system-ui, sans-serif; color: #fff; border: 5px solid #fff; box-shadow: 0 0 30px rgb(0 0 0 / .5); }
.uno-burst-icon.skip { background: #dc2626; animation: unoWobble .5s ease-in-out 2; }
.uno-burst-icon.rev { background: #2563eb; animation: unoSpin .8s ease-in-out; }
.uno-burst-icon.plus { background: linear-gradient(135deg, #f59e0b, #dc2626); text-shadow: 0 3px 0 rgb(0 0 0 / .3); }
.uno-burst-icon.plus.big { width: 120px; height: 120px; font-size: 3.6rem; background: linear-gradient(135deg, #111827, #7c3aed); box-shadow: 0 0 0 4px #fde047, 0 0 40px #a855f7; }
.uno-burst-icon.wheel { background: conic-gradient(#ef4444 0 25%, #facc15 0 50%, #22c55e 0 75%, #3b82f6 0); animation: unoWheel 1s cubic-bezier(.2,.8,.3,1) both; }
.uno-burst-icon.wheel::after { content: ''; width: 46%; height: 46%; border-radius: 50%; background: var(--pick); border: 4px solid #fff; animation: pop .35s .55s both; }
@keyframes unoBurst { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -80%) scale(.9); opacity: 0; } }
@keyframes unoWobble { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes unoSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes unoWheel { from { transform: rotate(-540deg); } to { transform: rotate(0); } }
@keyframes unoShake { 20%, 60% { transform: translateX(-8px) rotate(-1deg); } 40%, 80% { transform: translateX(8px) rotate(1deg); } }
.uno-ripple-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.uno-ripple { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; opacity: 0; }
@keyframes unoRipple { from { transform: scale(.2); opacity: .75; } to { transform: scale(14); opacity: 0; } }
.uno-shout-big { position: absolute; left: var(--sx); top: var(--sy); transform: translate(-50%, -50%); padding: .2rem .8rem; border-radius: 14px; background: #facc15; color: #b91c1c; font: 900 2rem/1.1 system-ui, sans-serif; border: 4px solid #fff; box-shadow: 0 6px 20px rgb(0 0 0 / .45); white-space: nowrap; }
@keyframes unoShout { 0% { transform: translate(-50%, -50%) scale(0) rotate(-20deg); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.25) rotate(8deg); opacity: 1; } 40% { transform: translate(-50%, -50%) scale(1) rotate(-4deg); } 80% { opacity: 1; } 100% { transform: translate(-50%, -90%) scale(1); opacity: 0; } }
.uno-bubble { position: absolute; left: var(--sx); top: var(--sy); transform: translate(-50%, -50%); padding: .2rem .7rem; border-radius: 999px; background: rgb(0 0 0 / .7); font-size: .85rem; white-space: nowrap; }
@keyframes unoBubble { 0% { opacity: 0; transform: translate(-50%, -30%); } 20%, 75% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -80%); } }

/* miniaturas da loja */
.scene-swatch { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 70px; border-radius: 12px; overflow: hidden; font-size: 2rem; background: var(--bg-2); }
.scene-swatch .uno-table { width: 62%; min-height: 0; height: 58%; padding: 0; gap: 0; }
.scene-swatch .uno-table::before { inset: 4px 8px; border-width: 2px; }
.scene-swatch .mini-card { width: 16px; height: 24px; border-radius: 3px; border: 2px solid #fff; background: #ef4444; transform: rotate(-12deg); }
.scene-swatch.scene-felt { box-shadow: inset 0 0 0 3px #f97316; }
.victory-swatch { display: flex; align-items: center; justify-content: center; width: 100%; height: 70px; border-radius: 12px; font-size: 2.2rem; background: radial-gradient(circle, rgb(250 204 21 / .25), transparent 70%), var(--bg-2); }
.victory-swatch.v-fogos { background: radial-gradient(circle, rgb(244 63 94 / .3), transparent 70%), #0b1020; }
.victory-swatch.v-raios { background: radial-gradient(circle, rgb(103 232 249 / .3), transparent 70%), #0b1020; }
.victory-swatch.v-coracoes { background: radial-gradient(circle, rgb(236 72 153 / .3), transparent 70%), var(--bg-2); }

/* tela de resultado */
.win-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; background: radial-gradient(circle at 50% 35%, rgb(30 41 59 / .55), rgb(2 6 23 / .82)); backdrop-filter: blur(3px); animation: fadeIn .3s ease-out; }
.win-overlay.preview { cursor: pointer; }
.win-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.win-card { position: relative; z-index: 1; width: min(460px, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1.4rem 1.1rem 1.1rem; border-radius: 22px; text-align: center; background: linear-gradient(180deg, rgb(30 41 59 / .92), rgb(15 23 42 / .95)); border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 20px 60px rgb(0 0 0 / .55); animation: winIn .55s cubic-bezier(.2,1.4,.4,1) both; }
.win-card.mine { border-color: rgb(250 204 21 / .55); box-shadow: 0 0 0 1px rgb(250 204 21 / .3), 0 0 60px rgb(250 204 21 / .25), 0 20px 60px rgb(0 0 0 / .55); }
.win-close { position: absolute; top: .5rem; right: .5rem; }
.win-hero { position: relative; display: flex; align-items: center; justify-content: center; padding-top: 1.6rem; }
.avatar.xl { width: 112px; height: 112px; font-size: 2.8rem; box-shadow: 0 0 0 4px #fde047, 0 0 34px rgb(250 204 21 / .6); animation: winPop .7s .15s cubic-bezier(.2,1.6,.4,1) both; }
.avatar.xl.fx { box-shadow: 0 0 34px rgb(250 204 21 / .5) !important; }
.win-card.bot .avatar.xl { box-shadow: 0 0 0 4px #94a3b8, 0 0 24px rgb(148 163 184 / .4); }
.win-ring { position: absolute; left: 50%; top: calc(50% + .8rem); width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgb(253 224 71 / .7), transparent 30%, rgb(253 224 71 / .5), transparent 60%, rgb(253 224 71 / .7), transparent 90%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); animation: spin 3s linear infinite; }
.win-card.bot .win-ring { display: none; }
.win-crown { position: absolute; top: -.4rem; left: 50%; z-index: 2; font-size: 2.6rem; transform: translateX(-50%); filter: drop-shadow(0 4px 6px rgb(0 0 0 / .5)); animation: crownDrop .8s .35s cubic-bezier(.2,1.6,.4,1) both, crownBob 2s 1.2s ease-in-out infinite; }
.win-name { font-size: 1.15rem; }
.win-title { margin: 0; font-size: 1.7rem; background: linear-gradient(90deg, #fde047, #f97316, #fde047); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: shine 2.5s linear infinite; }
.win-card.bot .win-title { background: none; color: var(--text); }
.win-draw { display: flex; gap: .6rem; }
.win-lines { display: flex; flex-direction: column; gap: .2rem; }
.win-actions { display: flex; flex-direction: column; align-items: center; gap: .55rem; width: 100%; margin-top: .3rem; }
.win-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45rem; }
.win-ask { width: 100%; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes winIn { from { transform: translateY(30px) scale(.85); opacity: 0; } }
@keyframes winPop { from { transform: scale(0); } }
@keyframes crownDrop { from { transform: translate(-50%, -60px) rotate(-30deg); opacity: 0; } }
@keyframes crownBob { 50% { transform: translate(-50%, -6px) rotate(6deg); } }
@keyframes shine { to { background-position: -200% 0; } }
.uno-hand { --hw: max(34px, min(var(--uw), calc((100cqw - 2.6rem) / var(--n, 7) - .3rem))); max-width: min(100%, calc(var(--n, 7) * (var(--hw) + .3rem) + 1.2rem + 2px)); }
.uno-hand .uno-card { --w: var(--hw); }
.uno-hand .uno-card { cursor: default; transition: transform .12s; }
.uno-hand .uno-card:disabled { filter: brightness(.55) saturate(.7); }
.uno-hand.mine .uno-card { cursor: pointer; }
.uno-hand.reveal .uno-card.playable { box-shadow: 0 0 0 2px var(--primary), 0 4px 10px rgb(0 0 0 / .5); animation: pulse 1.2s ease-in-out infinite; }
.uno-hand.mine .uno-card: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 ---------- */
/* Estádio: arquibancada com torcida colorida e refletores em volta do campo. */
.board.futebol {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  padding: .45rem; border-radius: 18px;
  background:
    radial-gradient(ellipse 45% 35% at 12% 0%, rgb(255 255 255 / .2), transparent 70%),
    radial-gradient(ellipse 45% 35% at 88% 0%, rgb(255 255 255 / .2), transparent 70%),
    radial-gradient(ellipse 45% 35% at 12% 100%, rgb(255 255 255 / .12), transparent 70%),
    radial-gradient(ellipse 45% 35% at 88% 100%, rgb(255 255 255 / .12), transparent 70%),
    radial-gradient(circle at 3px 3px, #ef4444 1.7px, transparent 2.3px) 0 0 / 13px 11px,
    radial-gradient(circle at 3px 3px, #facc15 1.7px, transparent 2.3px) 6px 5px / 17px 13px,
    radial-gradient(circle at 3px 3px, #f8fafc 1.5px, transparent 2.2px) 3px 8px / 11px 15px,
    radial-gradient(circle at 3px 3px, #22c55e 1.6px, transparent 2.3px) 9px 2px / 19px 12px,
    radial-gradient(circle at 3px 3px, #3b82f6 1.6px, transparent 2.3px) 12px 9px / 23px 14px,
    repeating-linear-gradient(0deg, #253247 0 13px, #1a2436 13px 26px);
  box-shadow: inset 0 0 60px 20px rgb(2 6 23 / .7), 0 10px 30px rgb(0 0 0 / .35);
}
.fb-canvas { width: auto; height: auto; max-width: 100%; max-height: calc(100cqh - 4.4rem); border-radius: 12px; touch-action: none; box-shadow: 0 0 0 3px rgb(255 255 255 / .12), 0 14px 40px rgb(0 0 0 / .6); cursor: grab; }
.fb-canvas:active { cursor: grabbing; }
.fb-bar { display: flex; flex-direction: column; align-items: center; gap: .15rem; height: 3.1rem; flex: none; padding: .25rem .9rem; border-radius: 12px; background: rgb(2 6 23 / .72); max-width: 100%; }
.fb-row { display: flex; align-items: center; gap: .8rem; white-space: nowrap; }
.fb-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: #fde68a; }
.fb-hint.off { visibility: hidden; }
.disc-swatch { width: 60px; height: 60px; }
.item-preview { display: block; width: 100%; max-width: 600px; aspect-ratio: 2 / 1; border-radius: 12px; margin: 0 auto .5rem; }
.fb-score { font-size: 1.25rem; line-height: 1.3; 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; }

/* ---------- Sinuca: mesa em canvas + barra fixa (placar, mira fina e força); cenário = fundo do .board ---------- */
.board.sinuca {
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  padding: .35rem; border-radius: 18px; box-shadow: inset 0 0 70px 24px rgb(2 6 23 / .65), 0 10px 30px rgb(0 0 0 / .35);
}
.sn-canvas { display: block; flex: none; width: auto; height: auto; max-width: 100%; border-radius: 18px; touch-action: none; box-shadow: 0 16px 44px rgb(0 0 0 / .65); cursor: crosshair; }
.sn-bar { display: flex; align-items: center; height: 2.6rem; flex: none; width: min(100%, 660px); padding: .2rem .35rem; border-radius: 12px; background: rgb(2 6 23 / .8); }
.sn-row { display: flex; align-items: center; justify-content: space-between; gap: .45rem; width: 100%; font-size: .8rem; min-width: 0; }
.sn-mid.wait { color: #fde68a; font-size: .8rem; }
/* Tela deitada e baixa (celular de lado): taco de força à esquerda da mesa e placar numa coluna à direita. */
.board.sinuca.side { flex-direction: row; padding-left: 64px; }
.board.sinuca.side .sn-bar { height: auto; width: 6.6rem; max-height: 100%; padding: .45rem .3rem; }
.board.sinuca.side .sn-row { flex-direction: column; gap: .5rem; }
.board.sinuca.side .sn-side, .board.sinuca.side .sn-side.opp { flex-direction: column; flex: none; gap: .2rem; text-align: center; }
.board.sinuca.side .sn-side b { max-width: 6rem; }
.board.sinuca.side .sn-dots { flex-wrap: wrap; justify-content: center; max-width: 5.6rem; }
.board.sinuca.side .sn-mid { white-space: normal; text-align: center; line-height: 1.2; }
@media (orientation: landscape) and (max-height: 560px) {
  .game-screen:has(.board.sinuca) { gap: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .game-screen:has(.board.sinuca) .hud { position: absolute; z-index: 4; top: calc(env(safe-area-inset-top) + .4rem); left: calc(env(safe-area-inset-left) + .3rem); width: 64px; pointer-events: none; }
  .game-screen:has(.board.sinuca) .hud .player, .game-screen:has(.board.sinuca) .hud .status-line { display: none; }
  .game-screen:has(.board.sinuca) .hud .players { display: block; }
  .game-screen:has(.board.sinuca) .hud .vs { min-width: 0; }
  .game-screen:has(.board.sinuca) .board.sinuca { border-radius: 0; padding-block: .25rem; }
}
.sn-fine.off { visibility: hidden; }
/* Taco em pé ao lado da mesa: puxe para baixo e solte para tacar. */
.sn-pull { position: absolute; z-index: 3; width: 52px; display: flex; flex-direction: column; align-items: center; gap: .25rem; touch-action: none; user-select: none; cursor: ns-resize; }
.sn-pull.off { display: none; }
.sn-pull-label { flex: none; font-size: .72rem; font-weight: 800; color: #fde68a; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.sn-pull-track { position: relative; flex: 1; width: 34px; border-radius: 17px; overflow: hidden; background: rgb(2 6 23 / .72); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .14), 0 6px 18px rgb(0 0 0 / .45); }
.sn-pull.over .sn-pull-track { background: rgb(2 6 23 / .5); }
.sn-pull-track .fill { position: absolute; left: 0; right: 0; top: 0; height: 0; background: linear-gradient(180deg, #15803d, #facc15 55%, #dc2626); opacity: .85; }
.sn-pull-track .mark { position: absolute; left: 0; right: 0; height: 3px; margin-top: -1px; background: #fde047; box-shadow: 0 0 8px #fde047; }
.sn-pull-track .mark[hidden] { display: none; }
.sn-pull-cue {
  position: absolute; left: 50%; top: 6%; width: 16px; height: 88%; margin-left: -8px; pointer-events: none;
  filter: drop-shadow(2px 3px 3px rgb(0 0 0 / .5));
}
.sn-side { display: flex; align-items: center; gap: .35rem; min-width: 0; flex: 1; }
.sn-side.opp { flex-direction: row-reverse; }
.sn-side b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 7rem; }
.sn-side.turn b { color: #fde047; }
.sn-mid { color: var(--muted); white-space: nowrap; font-size: .72rem; }
.sn-dots { display: inline-flex; gap: 2px; }
.sn-dots i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset -1px -2px 2px rgb(0 0 0 / .35); }
.sn-dots i.st { background-image: linear-gradient(#f8fafc 0 26%, transparent 26% 74%, #f8fafc 74%); }
.sn-fine { width: 2.3rem; height: 2.3rem; flex: none; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font-size: 1.3rem; font-weight: 800; line-height: 1; cursor: pointer; touch-action: none; user-select: none; }
.sn-fine:active { background: var(--primary); }
/* ---------- Animações de palavra (Palavras Cruzadas e Cruzadinha) ---------- */
.word-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.wfx-host { position: relative; }
.wfx-swatch { display: flex; align-items: center; justify-content: center; width: 100%; height: 70px; border-radius: 12px; font-size: 2.2rem; background: radial-gradient(circle, rgb(250 204 21 / .25), transparent 70%), #14532d; }

/* ---------- Palavras Cruzadas: placar, tabuleiro 15×15, estante e botões ---------- */
.board.palavras { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: .4rem; border-radius: 18px; }
.pc-top { display: flex; align-items: center; justify-content: center; gap: .35rem; flex-wrap: wrap; flex: none; max-width: 100%; }
.pc-chip { display: flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; background: rgb(2 6 23 / .72); border: 2px solid transparent; font-size: .8rem; }
.pc-chip strong { color: #fde68a; font-size: .95rem; }
.pc-chip .pc-name { max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-chip .pc-count { color: var(--muted); font-size: .72rem; }
.pc-chip.turn { border-color: var(--seat); box-shadow: 0 0 10px var(--seat); }
.pc-chip.out { opacity: .45; }
.pc-bag { padding: .2rem .55rem; border-radius: 999px; background: rgb(2 6 23 / .72); font-size: .8rem; }
.pc-host { position: relative; flex: none; }
.pc-grid {
  --pc-board: #14532d;
  width: min(100cqw - .8rem, 100cqh - 10.2rem, 680px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(15, 1fr); gap: 2px; padding: 4px;
  background: var(--pc-board); border-radius: 10px; box-shadow: 0 12px 30px rgb(0 0 0 / .45), inset 0 0 0 2px rgb(255 255 255 / .08); container-type: inline-size; touch-action: none;
}
.pc-cell { position: relative; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 3px; background: rgb(255 255 255 / .1); color: #fff; cursor: pointer; min-width: 0; min-height: 0; font: inherit; }
.pc-cell.full { background: transparent; }
.pc-cell.drop:hover, .pc-cell.drop:focus-visible { outline: 2px solid #fde047; outline-offset: -2px; }
.pc-cell.pm-wt { background: #dc2626; }
.pc-cell.pm-wd { background: #db2777; }
.pc-cell.pm-lt { background: #2563eb; }
.pc-cell.pm-ld { background: #0ea5e9; }
.pc-cell.center { background: #db2777; }
.pc-pm { font-size: 2.1cqw; font-weight: 800; letter-spacing: -.02em; opacity: .92; pointer-events: none; }
.pc-pm.star { font-size: 4.2cqw; color: #fde68a; }
.pc-tile {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 4px; user-select: none; pointer-events: none;
  background: linear-gradient(160deg, #fff4dc, #f2d9a8); color: #3f2a14; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .18), 0 1px 2px rgb(0 0 0 / .35);
}
.pc-tile b { font-size: 4.3cqw; font-weight: 800; line-height: 1; }
.pc-tile i { position: absolute; right: 8%; bottom: 4%; font-size: 1.9cqw; font-style: normal; font-weight: 700; opacity: .8; }
.pc-tile.blank b { color: #b45309; }
.pc-tile.last { box-shadow: 0 0 0 2px #fde047, 0 0 10px #fde047; animation: pc-in .45s ease-out; }
.pc-tile.pending { box-shadow: 0 0 0 2px #22d3ee, 0 3px 8px rgb(0 0 0 / .4); transform: translateY(-1px); pointer-events: auto; cursor: grab; }
@keyframes pc-in { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: none; opacity: 1; } }
.pc-msg { min-height: 1.3rem; max-width: 100%; padding: 0 .5rem; font-size: .8rem; text-align: center; color: #e2e8f0; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.pc-msg.bad { color: #fca5a5; }
.pc-rack { display: flex; gap: .3rem; padding: .3rem .45rem; border-radius: 10px; background: rgb(69 26 3 / .8); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .3); flex: none; touch-action: none; container-type: inline-size; width: min(100%, 25rem); justify-content: center; }
.pc-rack .pc-tile, .pc-rack .pc-slot { width: min(12.2cqw, 3rem); height: min(12.2cqw, 3rem); flex: none; pointer-events: auto; cursor: grab; }
.pc-rack .pc-tile b { font-size: min(6.4cqw, 1.6rem); }
.pc-rack .pc-tile i { font-size: min(3cqw, .75rem); }
.pc-rack .pc-tile.picked { transform: translateY(-6px); box-shadow: 0 0 0 3px #22d3ee, 0 6px 12px rgb(0 0 0 / .45); }
.pc-rack .pc-tile.swap { transform: translateY(-6px); box-shadow: 0 0 0 3px #f97316; }
.pc-rack.off .pc-tile { cursor: default; }
.pc-slot { border-radius: 4px; background: rgb(0 0 0 / .25); }
.pc-actions { display: flex; gap: .35rem; flex: none; flex-wrap: wrap; justify-content: center; }
.pc-actions .pc-icon { min-width: 2.3rem; padding-inline: .5rem; }
.pc-actions .pc-play { min-width: 6.5rem; }
@container board (max-width: 480px) {
  .pc-actions { flex-wrap: nowrap; gap: .25rem; }
  .pc-actions .btn { padding-inline: .55rem; }
  .pc-actions .pc-play { min-width: 0; flex: 1 1 auto; }
}
.pc-ghost { position: fixed; z-index: 1000; width: var(--gs, 40px); height: var(--gs, 40px); translate: -50% -70%; pointer-events: none; container-type: inline-size; box-shadow: 0 10px 22px rgb(0 0 0 / .5); }
.pc-ghost b { font-size: 60cqw; }
.pc-ghost i { font-size: 26cqw; }
.pc-picker { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgb(2 6 23 / .6); border-radius: 18px; }
.pc-picker-card { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--border); }
.pc-picker-grid { display: grid; grid-template-columns: repeat(6, 2.4rem); gap: .35rem; container-type: inline-size; }
.pc-picker-grid .pc-tile { width: 2.4rem; height: 2.4rem; pointer-events: auto; cursor: pointer; border: 0; font-weight: 800; font-size: 1.2rem; }
.pc-banner { position: absolute; left: 50%; top: 42%; z-index: 7; translate: -50% -50%; padding: .3rem 1rem; border-radius: 12px; font-size: clamp(1.4rem, 6cqw, 2.6rem); font-weight: 900; color: #fde047; text-shadow: 0 3px 0 #92400e, 0 0 18px rgb(250 204 21 / .7); pointer-events: none; animation: pc-banner 1.8s ease-out forwards; white-space: nowrap; }
@keyframes pc-banner { 0% { scale: .3; opacity: 0; } 15% { scale: 1.15; opacity: 1; } 25% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; translate: -50% -90%; } }
.tile-swatch { display: flex; gap: 4px; justify-content: center; align-items: center; width: 100%; height: 70px; border-radius: 12px; background: #14532d; container-type: inline-size; }
.tile-swatch .pc-tile { width: 38px; height: 38px; }
.tile-swatch .pc-tile b { font-size: 20px; }
.tile-swatch .pc-tile i { font-size: 9px; }
/* estilos de peça (itens tile) */
.pc-tile.tile-madeira { background: linear-gradient(160deg, #b7793f, #7c4a1e); color: #fff7ed; }
.pc-tile.tile-neon { background: #0b1020; color: #f0abfc; box-shadow: inset 0 0 0 2px #e879f9, 0 0 8px #e879f9; text-shadow: 0 0 6px #f0abfc; }
.pc-tile.tile-marmore { background: radial-gradient(circle at 30% 20%, #fff, #e5e7eb 45%, #cbd5e1), linear-gradient(120deg, transparent 40%, rgb(100 116 139 / .25) 42%, transparent 46%); color: #1e293b; }
.pc-tile.tile-gelo { background: linear-gradient(160deg, #ecfeff, #a5f3fc); color: #0e7490; box-shadow: inset 0 0 0 1px #fff, 0 0 6px rgb(103 232 249 / .6); }
.pc-tile.tile-doce { background: repeating-linear-gradient(45deg, #fbcfe8 0 6px, #fce7f3 6px 12px); color: #9d174d; }
.pc-tile.tile-galaxia { background: radial-gradient(circle at 30% 30%, #a855f7, #312e81 60%, #0f172a); color: #fff; text-shadow: 0 0 6px #c4b5fd; }
.pc-tile.tile-ouro { background: linear-gradient(160deg, #fef08a, #eab308 55%, #a16207); color: #422006; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .2), 0 0 8px rgb(250 204 21 / .6); }
.pc-tile.tile-diamante { background: linear-gradient(135deg, #e0f2fe, #bae6fd 30%, #f0f9ff 50%, #a5b4fc 75%, #e0e7ff); color: #1e3a8a; box-shadow: inset 0 0 0 1px #fff, 0 0 10px rgb(165 180 252 / .8); }
.pc-scene.scene-biblioteca { background: repeating-linear-gradient(90deg, #7c2d12 0 18px, #1e3a8a 18px 30px, #166534 30px 44px, #a16207 44px 52px, #581c87 52px 66px), linear-gradient(#3b2414, #3b2414); background-blend-mode: multiply; }
.pc-scene.scene-cafe { background: radial-gradient(ellipse 45% 30% at 50% 0%, rgb(254 215 170 / .35), transparent 72%), repeating-linear-gradient(0deg, rgb(0 0 0 / .18) 0 2px, transparent 2px 40px), linear-gradient(180deg, #6b4423, #3f2511); }
.pc-scene.scene-escritorio { background: radial-gradient(ellipse 50% 35% at 50% 50%, rgb(255 255 255 / .12), transparent 70%), repeating-linear-gradient(90deg, #334155 0 60px, #2b3646 60px 62px), #334155; }
.pc-scene.scene-jardim { background: radial-gradient(circle at 15% 20%, #fda4af 0 8px, transparent 9px) 0 0 / 70px 60px, radial-gradient(circle at 60% 70%, #fde047 0 6px, transparent 7px) 0 0 / 80px 70px, linear-gradient(180deg, #4ade80, #15803d); }
.pc-scene.scene-praia { background: radial-gradient(circle at 82% 16%, #fef9c3 0 26px, rgb(253 224 71 / .5) 27px, transparent 70px), linear-gradient(180deg, #7dd3fc 0 32%, #0ea5e9 32% 44%, #38bdf8 44% 46%, #fde68a 46% 100%); }
.pc-scene.scene-noite { background: radial-gradient(circle at 2px 2px, #fff 0.9px, transparent 1.4px) 0 0 / 37px 29px, radial-gradient(circle at 80% 18%, #fef9c3 0 22px, transparent 23px), linear-gradient(180deg, #0b1023, #1e1b4b 70%, #312e81); }
.pc-scene.scene-castelo { background: repeating-linear-gradient(0deg, rgb(0 0 0 / .25) 0 2px, transparent 2px 26px), repeating-linear-gradient(90deg, rgb(0 0 0 / .2) 0 2px, transparent 2px 52px), radial-gradient(ellipse 40% 30% at 50% 0%, rgb(251 191 36 / .35), transparent 72%), linear-gradient(180deg, #57534e, #292524); }
.pc-scene.scene-espaco { background: radial-gradient(ellipse 35% 28% at 20% 25%, rgb(168 85 247 / .45), transparent 70%), radial-gradient(ellipse 30% 25% at 82% 75%, rgb(56 189 248 / .35), transparent 70%), radial-gradient(circle at 2px 2px, #fff 0.9px, transparent 1.4px) 0 0 / 37px 29px, #020617; }
.pc-scene.scene-palacio { background: radial-gradient(ellipse 45% 32% at 50% 0%, rgb(254 249 195 / .55), transparent 72%), repeating-linear-gradient(60deg, rgb(255 255 255 / .06) 0 3px, transparent 3px 26px), linear-gradient(180deg, #a16207, #713f12); }
.scene-swatch.pc-scene::after { content: ''; width: 46%; height: 64%; border-radius: 6px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .12) 0 1px, transparent 1px 7px), repeating-linear-gradient(0deg, rgb(255 255 255 / .12) 0 1px, transparent 1px 7px), #14532d; box-shadow: 0 4px 10px rgb(0 0 0 / .5); }

/* ---------- Cruzadinha: grade, dica atual, teclado na tela, lista de dicas (telas largas) ---------- */
.board.cruzadinha { width: 100%; height: 100%; display: flex; flex-direction: column; gap: .35rem; padding: .4rem; border-radius: 18px; }
.cz-top { display: flex; align-items: center; justify-content: center; gap: .35rem; flex-wrap: wrap; flex: none; }
.cz-chip { position: relative; display: flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; overflow: hidden; font-size: .8rem; background: rgb(2 6 23 / .75); }
.cz-chip::before { content: ''; position: absolute; inset: 0; width: var(--pct, 0%); background: var(--seat); opacity: .35; transition: width .3s; }
.cz-chip > * { position: relative; }
.cz-chip .cz-name { max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-chip.done { box-shadow: 0 0 0 2px #22c55e; }
.cz-chip.out { opacity: .45; }
.cz-timer { padding: .2rem .6rem; border-radius: 999px; background: rgb(2 6 23 / .75); font-variant-numeric: tabular-nums; font-size: .85rem; font-weight: 700; }
.cz-timer.low { color: #fca5a5; animation: pulse 1s infinite; }
.cz-main { flex: 1; min-height: 0; display: flex; gap: .6rem; }
.cz-host { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.cz-grid { --cz: 30px; --cz-cell: #fff; display: grid; gap: 0; touch-action: none; user-select: none; filter: drop-shadow(0 10px 22px rgb(0 0 0 / .45)); }
.cz-block { width: var(--cz); height: var(--cz); }
.cz-cell { position: relative; width: var(--cz); height: var(--cz); display: flex; align-items: center; justify-content: center; background: var(--cz-cell); color: #0f172a; box-shadow: inset 0 0 0 1px #334155; cursor: pointer; }
.cz-grid.dark-cells .cz-cell { color: #f8fafc; box-shadow: inset 0 0 0 1px #64748b; }
.cz-cell b { font-size: calc(var(--cz) * .58); font-weight: 800; line-height: 1; }
.cz-cell i { position: absolute; left: 2px; top: 1px; font-size: calc(var(--cz) * .26); font-style: normal; font-weight: 700; opacity: .7; }
.cz-cell.word { background: color-mix(in srgb, var(--cz-cell) 72%, #38bdf8); }
.cz-cell.ok { background: color-mix(in srgb, var(--cz-cell) 55%, #4ade80); }
.cz-cell.bad { background: color-mix(in srgb, var(--cz-cell) 60%, #f87171); }
.cz-cell.cur { background: #fde047; color: #0f172a; box-shadow: inset 0 0 0 3px #f59e0b; }
.cz-cell.given b { color: #7c3aed; }
.cz-cell.miss b { color: #dc2626; opacity: .75; }
.cz-cell.pop b { animation: pc-in .5s ease-out; }
.cz-clues { display: none; width: 17rem; flex: none; overflow-y: auto; padding: .5rem; border-radius: 12px; background: rgb(2 6 23 / .78); font-size: .8rem; }
.cz-list { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .6rem; }
.cz-list strong { color: #fde68a; margin-bottom: .2rem; }
.cz-item { text-align: left; background: none; border: 0; padding: .2rem .35rem; border-radius: 6px; color: var(--text, #e2e8f0); cursor: pointer; font: inherit; }
.cz-item:hover { background: rgb(255 255 255 / .06); }
.cz-item.cur { background: rgb(56 189 248 / .25); }
.cz-item.ok { color: #86efac; text-decoration: line-through; opacity: .75; }
.cz-clue { display: flex; align-items: center; gap: .4rem; min-height: 2.6rem; flex: none; padding: .25rem .4rem; border-radius: 12px; background: rgb(2 6 23 / .82); }
.cz-clue-text { flex: 1; text-align: center; font-size: .9rem; font-weight: 600; line-height: 1.2; }
.cz-nav { width: 2.1rem; height: 2.1rem; flex: none; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-2); color: inherit; font-size: 1.2rem; font-weight: 800; cursor: pointer; }
.cz-kbd { display: flex; flex-direction: column; gap: .3rem; flex: none; user-select: none; touch-action: manipulation; }
.cz-kbd.off { opacity: .45; pointer-events: none; }
.cz-krow { display: flex; justify-content: center; gap: .25rem; }
.cz-key { flex: 1; max-width: 2.9rem; height: 2.65rem; border-radius: 8px; border: 0; background: #e2e8f0; color: #0f172a; font-weight: 800; font-size: 1.05rem; box-shadow: inset 0 -3px 0 #94a3b8; cursor: pointer; padding: 0; }
.cz-key.wide { max-width: 4.2rem; flex: 1.5; background: #cbd5e1; }
.cz-key.down { transform: translateY(2px); box-shadow: inset 0 -1px 0 #94a3b8; background: #fde047; }
@container board (min-width: 860px) {
  .cz-clues { display: block; }
  .cz-kbd { max-width: 40rem; width: 100%; margin: 0 auto; }
}
.cz-scene.scene-caderno { background: linear-gradient(90deg, transparent 2.4rem, rgb(239 68 68 / .45) 2.4rem 2.5rem, transparent 2.5rem), repeating-linear-gradient(0deg, #f8fafc 0 26px, #bfdbfe 26px 27px); }
.cz-scene.scene-quadro { background: radial-gradient(ellipse 60% 40% at 30% 30%, rgb(255 255 255 / .06), transparent 70%), linear-gradient(180deg, #14532d, #052e16); box-shadow: inset 0 0 0 10px #78350f; }
.cz-scene.scene-cafe { background: radial-gradient(ellipse 45% 30% at 50% 0%, rgb(254 215 170 / .35), transparent 72%), repeating-linear-gradient(0deg, rgb(0 0 0 / .18) 0 2px, transparent 2px 40px), linear-gradient(180deg, #6b4423, #3f2511); }
.cz-scene.scene-parque { background: radial-gradient(circle at 15% 20%, #fda4af 0 8px, transparent 9px) 0 0 / 70px 60px, radial-gradient(circle at 60% 70%, #fde047 0 6px, transparent 7px) 0 0 / 80px 70px, linear-gradient(180deg, #86efac, #16a34a); }
.cz-scene.scene-praia { background: radial-gradient(circle at 82% 16%, #fef9c3 0 26px, rgb(253 224 71 / .5) 27px, transparent 70px), linear-gradient(180deg, #7dd3fc 0 32%, #0ea5e9 32% 44%, #38bdf8 44% 46%, #fde68a 46% 100%); }
.cz-scene.scene-noite { background: radial-gradient(circle at 2px 2px, #fff 0.9px, transparent 1.4px) 0 0 / 37px 29px, radial-gradient(circle at 80% 18%, #fef9c3 0 22px, transparent 23px), linear-gradient(180deg, #0b1023, #1e1b4b 70%, #312e81); }
.cz-scene.scene-espaco { background: radial-gradient(ellipse 35% 28% at 20% 25%, rgb(168 85 247 / .45), transparent 70%), radial-gradient(ellipse 30% 25% at 82% 75%, rgb(56 189 248 / .35), transparent 70%), radial-gradient(circle at 2px 2px, #fff 0.9px, transparent 1.4px) 0 0 / 37px 29px, #020617; }
.cz-scene.scene-palacio { background: radial-gradient(ellipse 45% 32% at 50% 0%, rgb(254 249 195 / .55), transparent 72%), repeating-linear-gradient(60deg, rgb(255 255 255 / .06) 0 3px, transparent 3px 26px), linear-gradient(180deg, #a16207, #713f12); }
.scene-swatch.cz-scene::after { content: ''; width: 44%; height: 66%; background: linear-gradient(90deg, transparent 33%, #0f172a 33% 36%, transparent 36% 64%, #0f172a 64% 67%, transparent 67%), linear-gradient(0deg, transparent 33%, #0f172a 33% 36%, transparent 36% 64%, #0f172a 64% 67%, transparent 67%), #fff; box-shadow: 0 4px 10px rgb(0 0 0 / .45); }

/* ---------- Quem é o Ladrão? ---------- */
.board.ladrao { width: 100%; height: 100%; display: flex; flex-direction: column; gap: .35rem; padding: .45rem; border-radius: 18px; position: relative; overflow: hidden; container-type: size; }
.ld-top { display: flex; justify-content: center; gap: .4rem; flex: none; }
.ld-chip { padding: .2rem .65rem; border-radius: 999px; background: rgb(2 6 23 / .72); font-size: .8rem; font-weight: 700; }
.ld-table { --ld-table: #7c2d12; position: relative; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 920px; margin: 0 auto; }
.ld-felt { position: absolute; inset: 14% 13%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--ld-table) 70%, #fff 12%), var(--ld-table) 70%); box-shadow: 0 0 0 8px rgb(0 0 0 / .28), 0 0 0 11px color-mix(in srgb, var(--ld-table) 60%, #000), 0 18px 40px rgb(0 0 0 / .5), inset 0 0 40px rgb(0 0 0 / .35); }
.ld-center { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(58%, 22rem); display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; color: #fef3c7; text-shadow: 0 1px 3px #000; pointer-events: none; }
.ld-center-title { font-size: .75rem; opacity: .9; }
.ld-center strong { font-size: clamp(.9rem, 3.2cqw, 1.25rem); }
.ld-seat { position: absolute; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 1px; width: clamp(64px, 15cqw, 104px); padding: .25rem .2rem; border: 2px solid transparent; border-radius: 12px; background: rgb(2 6 23 / .62); color: #f8fafc; font: inherit; cursor: default; transition: transform .15s, border-color .15s, box-shadow .15s; }
.ld-seat.turn { border-color: #fbbf24; box-shadow: 0 0 0 3px rgb(251 191 36 / .25), 0 0 18px rgb(251 191 36 / .45); }
.ld-seat.out { opacity: .35; filter: grayscale(1); }
.ld-seat.target { cursor: pointer; border-color: rgb(56 189 248 / .7); animation: ld-pulse 1.2s ease-in-out infinite; }
.ld-seat.target:hover { transform: scale(1.06); }
.ld-seat.sel { border-color: #22d3ee; background: rgb(8 51 68 / .9); box-shadow: 0 0 0 3px #22d3ee, 0 0 22px rgb(34 211 238 / .6); animation: none; transform: scale(1.08); }
@keyframes ld-pulse { 50% { box-shadow: 0 0 0 4px rgb(56 189 248 / .35); } }
.ld-av { position: relative; display: grid; place-items: center; width: clamp(28px, 6cqw, 40px); aspect-ratio: 1; border-radius: 50%; background: var(--seat); color: #0f172a; font-weight: 800; font-size: .8rem; box-shadow: 0 2px 6px rgb(0 0 0 / .4); }
.ld-badge { position: absolute; right: -7px; bottom: -5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; font-size: .68rem; font-weight: 900; color: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .5); }
.ld-badge.role-D { background: #1d4ed8; }
.ld-badge.role-B { background: #b91c1c; }
.ld-badge.role-V { background: #7e22ce; }
.ld-badge.role-C { background: #475569; }
.ld-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; font-weight: 700; }
.ld-score { font-size: .65rem; color: #fde68a; }
.ld-mark { position: absolute; left: -6px; top: -8px; font-size: .9rem; filter: drop-shadow(0 1px 2px #000); }
.ld-say { position: absolute; bottom: calc(100% + 4px); left: 50%; translate: -50% 0; width: max-content; max-width: 9.5rem; padding: .2rem .45rem; border-radius: 10px; background: #f8fafc; color: #0f172a; font-size: .66rem; font-weight: 700; line-height: 1.15; box-shadow: 0 3px 8px rgb(0 0 0 / .4); animation: ld-pop .25s ease-out; z-index: 2; }
.ld-say::after { content: ''; position: absolute; top: 100%; left: 50%; translate: -50% 0; border: 5px solid transparent; border-top-color: #f8fafc; }
.ld-say.typing { letter-spacing: 2px; }
.ld-seat.edge-l .ld-say { left: 0; translate: 0 0; }
.ld-seat.edge-l .ld-say::after { left: 18px; }
.ld-seat.edge-r .ld-say { left: auto; right: 0; translate: 0 0; }
.ld-seat.edge-r .ld-say::after { left: auto; right: 12px; translate: 0 0; }
@keyframes ld-pop { from { scale: .4; opacity: 0; } }
.ld-panel { flex: none; display: flex; align-items: center; gap: .7rem; width: 100%; max-width: 760px; margin: 0 auto; padding: .45rem .6rem; border-radius: 14px; background: rgb(2 6 23 / .72); }
.ld-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.ld-prompt { margin: 0; font-size: .86rem; font-weight: 700; }
.ld-secret { margin: 0; font-size: .76rem; color: #cbd5e1; }
.ld-actions { display: flex; gap: .35rem; flex-wrap: wrap; }

/* papelzinho (frente = letra; verso = "?"), estilos da loja em paper-* */
.ld-paper { --pw: 70px; flex: none; width: var(--pw); aspect-ratio: 3 / 4; perspective: 500px; cursor: default; }
.ld-paper.small { --pw: 46px; }
.ld-paper.folded { cursor: pointer; animation: ld-wiggle 1.6s ease-in-out infinite; }
@keyframes ld-wiggle { 0%, 70%, 100% { rotate: 0deg; } 80% { rotate: -6deg; } 90% { rotate: 6deg; } }
.ld-paper-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, 1.4, .5, 1); }
.ld-paper.open .ld-paper-inner { transform: rotateY(180deg); }
.ld-paper-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 5px; backface-visibility: hidden; box-shadow: 0 4px 10px rgb(0 0 0 / .45); overflow: hidden; }
.ld-paper-face.back { font-size: calc(var(--pw) * .45); font-weight: 900; color: rgb(0 0 0 / .35); background-image: linear-gradient(90deg, transparent 49%, rgb(0 0 0 / .12) 50%, transparent 51%), linear-gradient(0deg, transparent 49%, rgb(0 0 0 / .12) 50%, transparent 51%); }
.ld-paper-face.front { transform: rotateY(180deg); }
.ld-paper-face.front b { font-size: calc(var(--pw) * .62); line-height: 1; font-family: 'Comic Sans MS', 'Segoe Print', cursive; }
.ld-paper-face.front span { font-size: calc(var(--pw) * .14); font-weight: 700; opacity: .8; }
.ld-paper .role-D b { color: #1d4ed8; }
.ld-paper .role-B b { color: #b91c1c; }
.ld-paper .role-V b { color: #7e22ce; }
.ld-paper .role-C b { color: #334155; }
.ld-paper-face { background-color: #fefefe; color: #1e293b; }
.paper-caderno .ld-paper-face { background: repeating-linear-gradient(180deg, transparent 0 9px, #bfdbfe 9px 10px), linear-gradient(90deg, transparent 14%, #fca5a5 14% 15.5%, transparent 15.5%), #fefefe; }
.paper-postit .ld-paper-face { background: linear-gradient(180deg, #fde047, #facc15); }
.paper-kraft .ld-paper-face { background: radial-gradient(circle at 30% 20%, rgb(255 255 255 / .15), transparent 60%), #c8a27a; color: #3f2a14; }
.paper-pergaminho .ld-paper-face { background: radial-gradient(ellipse at 50% 50%, #fdf4d7 40%, #e9c98a 100%); color: #5b3a12; }
.paper-jornal .ld-paper-face { background: repeating-linear-gradient(180deg, rgb(0 0 0 / .14) 0 2px, transparent 2px 5px) 6% 0 / 40% 100% no-repeat, repeating-linear-gradient(180deg, rgb(0 0 0 / .14) 0 2px, transparent 2px 5px) 94% 0 / 40% 100% no-repeat, #e7e5e4; }
.paper-neon .ld-paper-face { background: #0f172a; color: #e879f9; box-shadow: inset 0 0 0 2px #e879f9, 0 0 14px rgb(232 121 249 / .6); }
.paper-neon .ld-paper-face.front b { color: #f0abfc !important; text-shadow: 0 0 8px #e879f9, 0 0 16px #a855f7; }
.paper-ouro .ld-paper-face { background: linear-gradient(135deg, #fde68a, #f59e0b 45%, #fef3c7 55%, #d97706); color: #451a03; }
.paper-holografico .ld-paper-face { background: linear-gradient(115deg, #fbcfe8, #bae6fd, #bbf7d0, #fef08a, #ddd6fe, #fbcfe8); background-size: 300% 300%; animation: ld-holo 4s linear infinite; }
@keyframes ld-holo { to { background-position: 300% 0; } }
.paper-swatch { display: flex; justify-content: center; gap: .4rem; padding: .5rem; border-radius: 10px; background: #7c2d12; }
.paper-swatch .ld-paper .ld-paper-inner { transition: none; }
.ld-preview { display: flex; justify-content: center; align-items: center; gap: 1rem; min-height: 200px; border-radius: 12px; background: radial-gradient(ellipse at 50% 40%, #9a3412, #7c2d12 70%); }
.ld-preview .ld-paper { --pw: 76px; }

/* revelação */
.ld-reveal { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: .6rem; background: rgb(2 6 23 / .62); backdrop-filter: blur(2px); animation: ld-fade .25s ease-out; }
@keyframes ld-fade { from { opacity: 0; } }
.ld-reveal-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem; width: min(100%, 34rem); padding: 1rem; border-radius: 16px; background: #0f172a; border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 20px 50px rgb(0 0 0 / .6); text-align: center; animation: ld-pop .3s ease-out; }
.ld-reveal-card h3 { margin: 0; }
.ld-papers { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }
.ld-reveal-p { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 60px; }
.ld-reveal-p.accused .ld-paper { outline: 3px solid #fbbf24; outline-offset: 3px; border-radius: 5px; }
.ld-reveal-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
.ld-gain { position: absolute; top: -8px; right: -2px; padding: 0 .3rem; border-radius: 999px; background: #16a34a; font-size: .66rem; font-weight: 800; animation: ld-pop .3s 1.4s both; }
.ld-reveal-line { margin: 0; font-weight: 800; font-size: 1rem; }
.ld-reveal-line.good { color: #86efac; }
.ld-reveal-line.bad { color: #fca5a5; }

/* cenários */
.ld-scene.scene-sala { background: radial-gradient(ellipse 50% 30% at 50% 0%, rgb(254 243 199 / .3), transparent 72%), repeating-linear-gradient(90deg, rgb(0 0 0 / .12) 0 2px, transparent 2px 70px), linear-gradient(180deg, #92400e, #451a03); }
.ld-scene.scene-delegacia { background: repeating-linear-gradient(90deg, rgb(0 0 0 / .18) 0 3px, transparent 3px 46px), radial-gradient(ellipse 40% 26% at 50% 0%, rgb(255 255 255 / .25), transparent 72%), linear-gradient(180deg, #475569, #1e293b); }
.ld-scene.scene-cozinha { background: conic-gradient(#f1f5f9 25%, #cbd5e1 0 50%, #f1f5f9 0 75%, #cbd5e1 0) 0 0 / 56px 56px; }
.ld-scene.scene-mansao { background: radial-gradient(ellipse 45% 30% at 50% 0%, rgb(254 240 138 / .35), transparent 72%), repeating-linear-gradient(90deg, #4c0519 0 40px, #3f0414 40px 44px), #4c0519; }
.ld-scene.scene-trem { background: radial-gradient(circle at 2px 2px, #fff 0.8px, transparent 1.3px) 0 0 / 41px 33px, linear-gradient(180deg, #0f172a 0 30%, #78350f 30% 33%, #451a03 33% 100%); }
.ld-scene.scene-cassino { background: radial-gradient(circle at 12% 18%, rgb(250 204 21 / .5) 0 6px, transparent 7px) 0 0 / 64px 52px, radial-gradient(ellipse 50% 35% at 50% 0%, rgb(244 63 94 / .35), transparent 72%), linear-gradient(180deg, #4a044e, #1e1b4b); }
.ld-scene.scene-navio { background: radial-gradient(circle at 85% 15%, #fef9c3 0 22px, transparent 60px), repeating-linear-gradient(170deg, rgb(255 255 255 / .12) 0 2px, transparent 2px 22px), linear-gradient(180deg, #38bdf8 0 35%, #0369a1 35% 100%); }
.ld-scene.scene-castelo { background: repeating-linear-gradient(0deg, rgb(0 0 0 / .3) 0 2px, transparent 2px 26px), repeating-linear-gradient(90deg, rgb(0 0 0 / .25) 0 2px, transparent 2px 52px), radial-gradient(circle at 80% 15%, #e2e8f0 0 20px, transparent 21px), linear-gradient(180deg, #1e1b4b, #312e81 60%, #18181b); }
.scene-swatch.ld-scene::after { content: ''; width: 52%; height: 52%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #9a3412, #7c2d12 70%); box-shadow: 0 0 0 3px rgb(0 0 0 / .3), 0 4px 10px rgb(0 0 0 / .5); }
.player.multi.many { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem .5rem; align-content: center; }
.player.multi.many .player-tags { display: none; }

@container (max-width: 520px) {
  .ld-felt { inset: 16% 9%; }
  .ld-seat { width: clamp(58px, 21cqw, 86px); }
  .ld-say { max-width: 7rem; font-size: .62rem; }
  .ld-paper { --pw: 54px; }
  .ld-prompt { font-size: .8rem; }
}

.cue-swatch { display: block; width: 100%; max-width: 240px; height: auto; aspect-ratio: 240 / 64; margin: 0 auto; border-radius: 10px; background: radial-gradient(ellipse at 50% 40%, #16a34a, #0b5e33); }
.pocket-swatch { display: flex; align-items: center; justify-content: center; width: 100%; height: 70px; border-radius: 12px; font-size: 2.2rem; background: radial-gradient(circle, #000 0 18px, #1c1917 19px 24px, transparent 25px), radial-gradient(circle, rgb(250 204 21 / .2), transparent 70%), #0f7a43; }
.scene-swatch.sn-scene { padding: 0; }
/* Miniatura da loja: mesa de sinuca (caçapas, bolas e linha de saída) em cima do cenário. */
.sn-mini {
  position: relative; width: 78%; aspect-ratio: 2 / 1; max-height: 78%; border-radius: 5px;
  background:
    radial-gradient(circle at 32% 50%, #f8fafc 0 6%, transparent 7%),
    radial-gradient(circle at 66% 38%, #facc15 0 6%, transparent 7%),
    radial-gradient(circle at 74% 62%, #2563eb 0 6%, transparent 7%),
    radial-gradient(circle at 82% 48%, #111 0 6%, transparent 7%),
    radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--sn-cloth, #15803d) 80%, #fff), var(--sn-cloth, #0b6b38) 72%);
  box-shadow: inset 0 0 0 3px var(--sn-wood2, #8a4e1c), inset 0 0 0 5px var(--sn-wood, #3f220c), 0 0 8px var(--sn-glow, transparent), 0 3px 8px rgb(0 0 0 / .55);
}
.sn-mini::before {
  content: ''; position: absolute; inset: 4px; border-radius: 2px; pointer-events: none;
  background:
    radial-gradient(circle at 0 0, #0a0a0a 0 5px, transparent 6px),
    radial-gradient(circle at 50% 0, #0a0a0a 0 4px, transparent 5px),
    radial-gradient(circle at 100% 0, #0a0a0a 0 5px, transparent 6px),
    radial-gradient(circle at 0 100%, #0a0a0a 0 5px, transparent 6px),
    radial-gradient(circle at 50% 100%, #0a0a0a 0 4px, transparent 5px),
    radial-gradient(circle at 100% 100%, #0a0a0a 0 5px, transparent 6px);
}
.sn-mini::after { content: ''; position: absolute; left: 26%; top: 18%; bottom: 18%; border-left: 1px dashed rgb(255 255 255 / .45); }

.sn-scene.scene-boteco {
  background:
    radial-gradient(ellipse 40% 32% at 50% 0%, rgb(253 224 71 / .38), transparent 72%),
    repeating-linear-gradient(0deg, rgb(0 0 0 / .35) 0 2px, transparent 2px 24px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .3) 0 2px, transparent 2px 52px),
    linear-gradient(180deg, #8a3b1c, #5c2412);
}
.sn-scene.scene-clube {
  background:
    radial-gradient(ellipse 45% 30% at 50% 0%, rgb(254 243 199 / .3), transparent 72%),
    radial-gradient(circle at 10px 10px, rgb(250 204 21 / .16) 2px, transparent 3px) 0 0 / 22px 22px,
    linear-gradient(180deg, #064e3b, #022c22);
}
.sn-scene.scene-salao {
  background:
    radial-gradient(ellipse 50% 35% at 50% 50%, rgb(255 255 255 / .12), transparent 70%),
    repeating-linear-gradient(90deg, #7a4a24 0 70px, #5e3818 70px 73px),
    #6b4423;
}
.sn-scene.scene-neon {
  background:
    radial-gradient(ellipse 30% 22% at 12% 18%, rgb(236 72 153 / .55), transparent 70%),
    radial-gradient(ellipse 30% 22% at 88% 82%, rgb(34 211 238 / .5), transparent 70%),
    repeating-linear-gradient(90deg, rgb(168 85 247 / .12) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgb(168 85 247 / .12) 0 1px, transparent 1px 40px),
    #12051f;
}
.sn-scene.scene-praia {
  background:
    radial-gradient(circle at 82% 16%, #fef9c3 0 26px, rgb(253 224 71 / .5) 27px, transparent 70px),
    linear-gradient(180deg, #7dd3fc 0 32%, #0ea5e9 32% 44%, #38bdf8 44% 46%, #fde68a 46% 100%);
}
.sn-scene.scene-cassino {
  background:
    radial-gradient(ellipse 45% 30% at 50% 0%, rgb(254 240 138 / .35), transparent 72%),
    repeating-linear-gradient(45deg, rgb(250 204 21 / .2) 0 2px, transparent 2px 30px),
    repeating-linear-gradient(-45deg, rgb(250 204 21 / .2) 0 2px, transparent 2px 30px),
    linear-gradient(180deg, #991b1b, #450a0a);
}
.sn-scene.scene-cobertura {
  background:
    radial-gradient(circle at 15% 14%, #f8fafc 0 16px, rgb(248 250 252 / .25) 17px, transparent 40px),
    radial-gradient(circle at 3px 3px, rgb(253 224 71 / .8) 1.4px, transparent 2px) 0 60% / 14px 18px no-repeat,
    radial-gradient(circle at 2px 2px, rgb(253 230 138 / .55) 1.2px, transparent 1.8px) 0 0 / 11px 15px,
    linear-gradient(180deg, #0b1023 0%, #1e1b4b 55%, #312e81 100%);
}
.sn-scene.scene-espaco {
  background:
    radial-gradient(ellipse 35% 28% at 20% 25%, rgb(168 85 247 / .45), transparent 70%),
    radial-gradient(ellipse 30% 25% at 82% 75%, rgb(56 189 248 / .35), transparent 70%),
    radial-gradient(circle at 2px 2px, #fff 0.9px, transparent 1.4px) 0 0 / 37px 29px,
    radial-gradient(circle at 2px 2px, #c7d2fe 0.8px, transparent 1.3px) 11px 7px / 23px 41px,
    #020617;
}
.sn-scene.scene-palacio {
  background:
    radial-gradient(ellipse 45% 32% at 50% 0%, rgb(254 249 195 / .55), transparent 72%),
    repeating-linear-gradient(60deg, rgb(255 255 255 / .06) 0 3px, transparent 3px 26px),
    radial-gradient(circle at 50% 50%, rgb(250 204 21 / .25), transparent 70%),
    linear-gradient(180deg, #a16207, #713f12);
}

/* Camadas animadas dos cenários (neon, luzes, bolhas…) ficam atrás da mesa e da barra. */
.sn-scene { isolation: isolate; }
.sn-scene::before, .sn-scene::after { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; }
.sn-scene.scene-neonrosa { background: radial-gradient(ellipse 60% 45% at 50% 50%, rgb(236 72 153 / .22), transparent 75%), #14031a; }
.sn-scene.scene-neonrosa::before {
  content: ''; inset: 8px; border-radius: 20px; border: 3px solid #fbcfe8;
  box-shadow: 0 0 4px #fff, 0 0 12px #ec4899, 0 0 30px #db2777, inset 0 0 12px #ec4899, inset 0 0 30px rgb(219 39 119 / .55);
  animation: snFlicker 6s infinite;
}
.sn-scene.scene-neonazul { background: radial-gradient(ellipse 60% 45% at 50% 50%, rgb(34 211 238 / .2), transparent 75%), #020b1a; }
.sn-scene.scene-neonazul::before {
  content: ''; inset: 8px; border-radius: 20px; border: 3px solid #cffafe;
  box-shadow: 0 0 4px #fff, 0 0 12px #22d3ee, 0 0 30px #0891b2, inset 0 0 12px #22d3ee, inset 0 0 30px rgb(8 145 178 / .55);
  animation: snPulse 3.2s ease-in-out infinite;
}
.sn-scene.scene-neonazul::after {
  content: ''; inset: 18px; border-radius: 14px; border: 2px solid #ddd6fe;
  box-shadow: 0 0 10px #a855f7, inset 0 0 10px #a855f7; animation: snPulse 3.2s ease-in-out 1.6s infinite;
}
.sn-scene.scene-letreiro { background: repeating-linear-gradient(90deg, rgb(255 255 255 / .03) 0 2px, transparent 2px 46px), linear-gradient(180deg, #1c0a24, #07020c); }
.sn-scene.scene-letreiro::before {
  content: '8 BALL'; inset: auto 0 auto 0; top: .2rem; text-align: center; font: 900 clamp(.9rem, 4cqmin, 2.4rem) / 1 system-ui, sans-serif; letter-spacing: .3em;
  color: #fef08a; text-shadow: 0 0 4px #fff, 0 0 12px #facc15, 0 0 26px #f97316, 0 0 44px #ea580c; animation: snFlicker 4.5s infinite;
}
.sn-scene.scene-letreiro::after {
  content: 'SINUCA'; inset: auto 0 .2rem 0; text-align: center; font: 900 clamp(.8rem, 3.4cqmin, 2rem) / 1 system-ui, sans-serif; letter-spacing: .4em;
  color: #fbcfe8; text-shadow: 0 0 4px #fff, 0 0 12px #ec4899, 0 0 28px #be185d; animation: snFlicker 7s 1.3s infinite;
}
.sn-scene.scene-fliperama { overflow: hidden; background: radial-gradient(circle at 50% 30%, #fde047 0 6%, #fb923c 6.5% 11%, transparent 11.5%), linear-gradient(180deg, #1e0a3c 0 50%, #2e0249 50%); }
.sn-scene.scene-fliperama::before {
  content: ''; inset: 50% -20% -60% -20%; transform-origin: 50% 0; transform: perspective(200px) rotateX(55deg);
  background: repeating-linear-gradient(90deg, #f0abfc 0 2px, transparent 2px 48px), repeating-linear-gradient(0deg, #f0abfc 0 2px, transparent 2px 48px);
  filter: drop-shadow(0 0 4px #d946ef); animation: snGrid 1.6s linear infinite; opacity: .75;
}
.sn-scene.scene-balada { overflow: hidden; background: #090212; }
.sn-scene.scene-balada::before {
  content: ''; inset: -60%;
  background: conic-gradient(from 0deg, rgb(236 72 153 / .5), transparent 12%, rgb(34 211 238 / .5) 25%, transparent 37%, rgb(250 204 21 / .45) 50%, transparent 62%, rgb(168 85 247 / .5) 75%, transparent 87%, rgb(236 72 153 / .5));
  animation: snSpin 9s linear infinite;
}
.sn-scene.scene-balada::after { content: ''; background: radial-gradient(circle at 2px 2px, rgb(255 255 255 / .55) 1px, transparent 1.6px) 0 0 / 26px 26px; animation: snPulse 1.2s ease-in-out infinite; }
.sn-scene.scene-cidade {
  background:
    linear-gradient(0deg, #0f172a 0 18%, transparent 18%),
    repeating-linear-gradient(90deg, transparent 0 6px, rgb(253 224 71 / .55) 6px 9px, transparent 9px 15px) 0 100% / 100% 34% no-repeat,
    linear-gradient(0deg, #1e293b 0 34%, transparent 34%),
    radial-gradient(circle at 80% 18%, #f8fafc 0 14px, transparent 15px),
    linear-gradient(180deg, #0b1023, #312e81 70%, #7c3aed);
}
.sn-scene.scene-cidade::before { content: ''; inset: auto 6% 36% auto; width: 22%; height: 4px; border-radius: 4px; background: #f472b6; box-shadow: 0 0 8px #f472b6, 0 0 20px #db2777; animation: snFlicker 5s infinite; }
.sn-scene.scene-pub {
  background:
    radial-gradient(ellipse 45% 30% at 50% 0%, rgb(253 230 138 / .3), transparent 72%),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .35) 0 3px, transparent 3px 90px),
    linear-gradient(0deg, #3f2a12 0 22%, #b45309 22% 23%, #14532d 23%);
}
.sn-scene.scene-garagem {
  background:
    repeating-linear-gradient(-45deg, #facc15 0 16px, #111 16px 32px) 0 100% / 100% 14px no-repeat,
    radial-gradient(ellipse 40% 30% at 50% 0%, rgb(255 255 255 / .2), transparent 70%),
    radial-gradient(circle at 30% 70%, rgb(0 0 0 / .25) 0 30px, transparent 60px),
    linear-gradient(180deg, #6b7280, #374151);
}
.sn-scene.scene-porao {
  background:
    radial-gradient(ellipse 40% 30% at 50% 0%, rgb(254 215 170 / .35), transparent 70%),
    repeating-linear-gradient(0deg, #3b1d12 0 3px, transparent 3px 22px),
    repeating-linear-gradient(90deg, #3b1d12 0 3px, transparent 3px 48px),
    linear-gradient(180deg, #9a3412, #7c2d12);
}
.sn-scene.scene-pordosol {
  background:
    radial-gradient(circle at 50% 62%, #fef08a 0 34px, rgb(253 186 116 / .7) 35px, transparent 90px),
    linear-gradient(180deg, #4c1d95 0%, #be185d 38%, #f97316 62%, #7c2d12 63%, #431407 100%);
}
.sn-scene.scene-cabana {
  background:
    linear-gradient(135deg, transparent 46%, #052e16 46% 54%, transparent 54%) 0 100% / 60px 70px repeat-x,
    linear-gradient(225deg, transparent 46%, #052e16 46% 54%, transparent 54%) 0 100% / 60px 70px repeat-x,
    repeating-linear-gradient(0deg, #78350f 0 26px, #5b2a0a 26px 29px);
}
.sn-scene.scene-aurora { overflow: hidden; background: radial-gradient(circle at 2px 2px, #fff 0.8px, transparent 1.3px) 0 0 / 31px 27px, linear-gradient(180deg, #020617, #0c4a6e 80%, #e0f2fe); }
.sn-scene.scene-aurora::before {
  content: ''; inset: -10% -40%;
  background: radial-gradient(ellipse 30% 20% at 30% 30%, rgb(74 222 128 / .55), transparent 70%), radial-gradient(ellipse 35% 18% at 65% 25%, rgb(45 212 191 / .5), transparent 70%), radial-gradient(ellipse 25% 16% at 50% 45%, rgb(192 132 252 / .4), transparent 70%);
  filter: blur(6px); animation: snDrift 14s ease-in-out infinite alternate;
}
.sn-scene.scene-aquario { overflow: hidden; background: radial-gradient(ellipse 50% 30% at 50% 0%, rgb(186 230 253 / .45), transparent 70%), linear-gradient(180deg, #0369a1, #082f49); }
.sn-scene.scene-aquario::before {
  content: ''; inset: 0 0 -100% 0;
  background: radial-gradient(circle at 10px 10px, rgb(224 242 254 / .7) 0 3px, transparent 4px) 0 0 / 90px 120px, radial-gradient(circle at 6px 6px, rgb(224 242 254 / .55) 0 2px, transparent 3px) 40px 60px / 70px 90px;
  animation: snRise 9s linear infinite;
}
.sn-scene.scene-aquario::after { content: ''; background: linear-gradient(0deg, #ca8a04 0 6%, transparent 6%), radial-gradient(ellipse 4% 18% at 8% 94%, #16a34a, transparent 70%), radial-gradient(ellipse 4% 22% at 92% 92%, #15803d, transparent 70%); }
.sn-scene.scene-gelo {
  background:
    linear-gradient(160deg, transparent 40%, rgb(255 255 255 / .25) 41% 43%, transparent 44%),
    linear-gradient(20deg, transparent 55%, rgb(255 255 255 / .2) 56% 58%, transparent 59%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgb(224 242 254 / .4), transparent 70%),
    linear-gradient(180deg, #bae6fd, #0284c7 70%, #0c4a6e);
}
.sn-scene.scene-discoteca { overflow: hidden; background: radial-gradient(circle at 50% 8%, #e5e7eb 0 22px, transparent 23px), #110627; }
.sn-scene.scene-discoteca::before {
  content: ''; inset: -50%;
  background: radial-gradient(circle at 4px 4px, #fff 1.4px, transparent 2px) 0 0 / 34px 34px, radial-gradient(circle at 4px 4px, #f0abfc 1.4px, transparent 2px) 17px 17px / 34px 34px;
  animation: snSpin 20s linear infinite;
}
.sn-scene.scene-discoteca::after { content: ''; background: linear-gradient(0deg, transparent 70%, rgb(236 72 153 / .25)), repeating-linear-gradient(90deg, rgb(250 204 21 / .18) 0 40px, rgb(34 211 238 / .18) 40px 80px, rgb(236 72 153 / .18) 80px 120px) 0 100% / 100% 16% no-repeat; animation: snPulse .9s steps(2) infinite; }
.sn-scene.scene-tempestade { background: repeating-linear-gradient(105deg, rgb(148 163 184 / .2) 0 1px, transparent 1px 14px), linear-gradient(180deg, #1e293b, #0f172a); }
.sn-scene.scene-tempestade::before { content: ''; background: rgb(226 232 240 / .9); opacity: 0; animation: snFlash 7s infinite; }
.sn-scene.scene-vulcao { background: linear-gradient(0deg, #dc2626 0 5%, #7f1d1d 5% 20%, transparent 20%), radial-gradient(ellipse 40% 30% at 50% 100%, rgb(249 115 22 / .7), transparent 70%), linear-gradient(180deg, #1c1917, #451a03); }
.sn-scene.scene-vulcao::before { content: ''; background: radial-gradient(ellipse 70% 40% at 50% 100%, rgb(251 146 60 / .6), transparent 70%); animation: snPulse 2.4s ease-in-out infinite; }
.sn-scene.scene-cyber {
  background:
    repeating-linear-gradient(90deg, transparent 0 5px, rgb(34 211 238 / .6) 5px 7px, transparent 7px 12px) 0 100% / 100% 30% no-repeat,
    linear-gradient(0deg, #0b1120 0 30%, transparent 30%),
    linear-gradient(180deg, #2e1065, #831843 75%, #0b1120);
}
.sn-scene.scene-cyber::before { content: ''; inset: auto 8% 34% 8%; height: 3px; background: #22d3ee; box-shadow: 0 0 8px #22d3ee, 0 0 22px #06b6d4; animation: snFlicker 3.5s infinite; }
.sn-scene.scene-cyber::after { content: ''; inset: 12% auto auto 10%; width: 3px; height: 26%; background: #f472b6; box-shadow: 0 0 8px #f472b6, 0 0 22px #db2777; animation: snFlicker 5s 1s infinite; }
.sn-scene.scene-arcoiris { background: #0a0612; }
.sn-scene.scene-arcoiris::before {
  content: ''; inset: 8px; border-radius: 20px; border: 3px solid #f87171;
  box-shadow: 0 0 4px #fff, 0 0 14px #ef4444, 0 0 32px #ef4444, inset 0 0 14px #ef4444, inset 0 0 32px rgb(239 68 68 / .5);
  animation: snHue 6s linear infinite;
}
.sn-scene.scene-arcoiris::after { content: ''; background: radial-gradient(ellipse 60% 45% at 50% 50%, rgb(239 68 68 / .25), transparent 75%); animation: snHue 6s linear infinite; }
.sn-scene.scene-diamante { background: repeating-conic-gradient(from 45deg, rgb(255 255 255 / .12) 0 25%, transparent 0 50%) 0 0 / 46px 46px, radial-gradient(ellipse 50% 40% at 50% 0%, rgb(224 231 255 / .6), transparent 70%), linear-gradient(180deg, #312e81, #1e1b4b); }
.sn-scene.scene-diamante::before { content: ''; background: radial-gradient(circle at 20% 30%, #fff 0 1.5px, transparent 3px), radial-gradient(circle at 75% 20%, #fff 0 1.5px, transparent 3px), radial-gradient(circle at 60% 80%, #fff 0 1.5px, transparent 3px), radial-gradient(circle at 15% 85%, #fff 0 1.5px, transparent 3px); animation: snPulse 1.8s ease-in-out infinite; }
.sn-scene.scene-dragao { background: radial-gradient(ellipse 50% 35% at 50% 100%, rgb(234 88 12 / .55), transparent 70%), repeating-linear-gradient(60deg, rgb(0 0 0 / .25) 0 10px, transparent 10px 20px), linear-gradient(180deg, #450a0a, #1c0303); }
.sn-scene.scene-dragao::before { content: ''; background: radial-gradient(ellipse 18% 6% at 22% 30%, #fde047, #ea580c 40%, transparent 70%), radial-gradient(ellipse 18% 6% at 78% 30%, #fde047, #ea580c 40%, transparent 70%); animation: snPulse 2s ease-in-out infinite; }
@keyframes snFlicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .35; } }
@keyframes snPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes snSpin { to { transform: rotate(360deg); } }
@keyframes snGrid { to { background-position: 0 48px, 0 48px; } }
@keyframes snDrift { from { transform: translateX(-8%) skewX(-6deg); } to { transform: translateX(8%) skewX(6deg); } }
@keyframes snRise { to { transform: translateY(-50%); } }
@keyframes snFlash { 0%, 90%, 92%, 94%, 100% { opacity: 0; } 91%, 93% { opacity: .55; } }
@keyframes snHue { to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sn-scene::before, .sn-scene::after { animation: none !important; } }

/* Aventura do Pinguim: tela 24×14 blocos; no celular em pé os botões ficam embaixo da tela do jogo */
/* Aventura do Pinguim: o canvas ocupa a área inteira (o jogo desenha o cenário na sobra de tela). */
.board.plataforma { width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.pl-stage { position: relative; width: 100%; height: 100%; border-radius: 14px; overflow: hidden; touch-action: none; background: #0b1220; }
.pl-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.pl-controls { position: absolute; left: max(.6rem, env(safe-area-inset-left)); right: max(.6rem, env(safe-area-inset-right)); bottom: max(.6rem, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.board.plataforma:not(.touch) .pl-controls { display: none; }
.pl-pad { display: flex; align-items: flex-end; gap: .6rem; pointer-events: auto; touch-action: none; -webkit-touch-callout: none; }
.pl-btn { width: clamp(56px, min(11cqw, 16cqh), 84px); aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; background: rgb(15 23 42 / .35); border: 2px solid rgb(255 255 255 / .45); backdrop-filter: blur(2px); transition: background .08s, transform .08s; }
.pl-btn.big { width: clamp(66px, min(13cqw, 19cqh), 96px); font-size: 1.9rem; }
.pl-btn.fire { display: none; margin-bottom: 2.2rem; border-color: rgb(253 186 116 / .8); background: rgb(194 65 12 / .35); }
.board.plataforma.has-fire .pl-btn.fire { display: flex; }
.pl-btn.down { display: none; margin-bottom: 2.2rem; border-color: rgb(134 239 172 / .85); background: rgb(21 128 61 / .4); }
.board.plataforma.can-down .pl-btn.down { display: flex; }
.pl-controls, .pl-pad, .pl-btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pl-btn.on { background: rgb(255 255 255 / .38); transform: scale(.94); }
.board.plataforma.idle .pl-controls { display: none; }
/* Jogo em tempo real: sem o placar de cima nem margens, o jogo ocupa a tela toda; no fim, o painel de
   resultado fica por cima do jogo (embaixo dele não dá para rolar: o canvas segura os toques). */
.game-screen.immersive { gap: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow: hidden; }
.game-screen.immersive .hud { display: none; }
.game-screen.immersive .board-wrap { flex: 1 1 auto; height: auto; }
.game-screen.immersive .pl-stage { border-radius: 0; }
.game-screen.immersive .post-panel { position: absolute; left: 50%; bottom: max(.8rem, env(safe-area-inset-bottom)); z-index: 30; transform: translateX(-50%); width: min(560px, calc(100% - 4.5rem)); max-height: calc(100dvh - 1.6rem); overflow-y: auto; padding: .8rem 1rem; gap: .4rem; background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: 0 16px 50px rgb(0 0 0 / .55); backdrop-filter: blur(4px); animation: fadeIn .25s ease-out; }
.game-screen.immersive .post-panel h3 { margin: 0; }
@media (orientation: landscape) and (max-height: 560px) {
  .game-screen.immersive .post-panel { bottom: 50%; transform: translate(-50%, 50%); }
}

/* Cartão de vitória com a tela deitada e baixa (celular de lado): avatar à esquerda, texto e botões à direita. */
@media (orientation: landscape) and (max-height: 560px) {
  .win-overlay { padding: .5rem; }
  .win-card { width: min(720px, 100%); max-height: calc(100dvh - 1rem); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.2rem; row-gap: .3rem; align-items: center; justify-items: start; text-align: left; padding: .8rem 2.4rem .8rem 1rem; }
  .win-card > :not(.win-hero):not(.win-close) { grid-column: 2; }
  .win-hero { grid-column: 1; grid-row: 1 / span 6; padding-top: 1.2rem; }
  .win-card .avatar.xl { width: 80px; height: 80px; font-size: 2rem; }
  .win-ring { width: 108px; height: 108px; margin: -54px 0 0 -54px; }
  .win-crown { font-size: 1.9rem; top: -.2rem; }
  .win-title { font-size: 1.35rem; }
  .win-lines { font-size: .88rem; }
  .win-actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .4rem; margin-top: .1rem; }
  .win-actions .btn { padding: .5rem .85rem; font-size: .9rem; }
  .win-row { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .player.multi .player-text strong { font-size: .78rem; }
  .hero { flex-direction: column; align-items: flex-start; }
  .hero h1 { font-size: 1.25rem; }
  .hero-compact { flex-direction: row; align-items: center; }
  .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: .3rem .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; }
  .game-screen .vs { min-width: 48px; }
  .game-screen .score { font-size: 1.05rem; }
}


/* ---------- Quiz: short colorido (header, carta, barra, A/B/C) ---------- */
.board.quiz.qz {
  --qz-bg: #FFD54A; --qz-ray: #F5B820; --qz-header: #6B2D9B; --qz-accent: #FF4FA3;
  position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; border-radius: 0; color: #111;
  font-family: Fredoka, Nunito, system-ui, sans-serif; background: var(--qz-bg);
}
.qz-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.qz-rays {
  position: absolute; left: 50%; top: 50%; width: 240%; height: 240%;
  background: repeating-conic-gradient(from 0deg, var(--qz-bg) 0 12deg, var(--qz-ray) 12deg 24deg);
  opacity: .95; transform: translate(-50%, -50%);
}
.qz-motion { position: absolute; inset: -10%; opacity: .22; background:
  radial-gradient(circle at 20% 30%, #fff 0 2px, transparent 3px),
  radial-gradient(circle at 70% 60%, #fff 0 2px, transparent 3px),
  radial-gradient(circle at 40% 80%, #fff 0 1.5px, transparent 2.5px);
  background-size: 90px 90px, 120px 120px, 70px 70px;
}
.qz[data-cat="futebol"] .qz-motion,
.qz[data-scene="gramado"] .qz-motion {
  opacity: .55; background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .08) 0 2px, transparent 2px 28px),
    repeating-linear-gradient(0deg, rgb(0 0 0 / .08) 0 14px, transparent 14px 28px);
}
.qz[data-cat="lugares"] .qz-motion,
.qz[data-scene="mapa"] .qz-motion {
  opacity: .35; background:
    repeating-linear-gradient(0deg, transparent 0 18px, rgb(255 255 255 / .15) 18px 19px),
    repeating-linear-gradient(90deg, transparent 0 28px, rgb(255 255 255 / .12) 28px 29px);
}
.qz[data-cat="rankings"] .qz-motion,
.qz[data-scene="podio"] .qz-motion {
  opacity: .4; background:
    linear-gradient(180deg, transparent 55%, rgb(255 215 0 / .25)),
    radial-gradient(circle at 50% 100%, rgb(255 255 255 / .2), transparent 55%);
}
.qz[data-scene="noite"] { --qz-bg: #1e1b4b; --qz-ray: #312e81; }
.qz-hud {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .45rem .7rem 0; flex: none;
}
.qz-score, .qz-progress, .qz-streak {
  padding: .15rem .55rem; border-radius: 999px; background: rgb(0 0 0 / .35); color: #fff;
  font-weight: 800; font-variant-numeric: tabular-nums; font-size: .85rem;
  -webkit-text-stroke: 1px #111; paint-order: stroke fill;
}
.qz-streak { background: #ef4444; }
.qz-header {
  position: relative; z-index: 2; margin: .35rem .55rem 0; padding: .55rem .75rem .7rem;
  background: var(--qz-header); border-radius: 0 0 28px 28px; box-shadow: 0 8px 0 rgb(0 0 0 / .18);
  text-align: center; flex: none;
}
.qz-title {
  font-weight: 900; font-size: clamp(1.15rem, 4.6cqw, 1.85rem); letter-spacing: .04em; color: #fff;
  text-transform: uppercase; -webkit-text-stroke: 3px #111; paint-order: stroke fill;
  text-shadow: 0 3px 0 #111, 2px 2px 0 #111;
}
.qz-body {
  position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column;
  gap: .55rem; padding: .55rem .7rem .75rem;
}
.qz-card {
  flex: 1.1; min-height: 0; background: #fffef8; border: 5px solid #111; border-radius: 22px;
  box-shadow: 0 10px 0 rgb(0 0 0 / .2); padding: .7rem .8rem; display: flex; flex-direction: column; gap: .45rem;
}
.qz-question {
  font-weight: 900; font-size: clamp(1.05rem, 4.2cqw, 1.55rem); line-height: 1.15; color: #111;
}
.qz-stim { flex: 1; min-height: 0; display: grid; place-items: center; }
.qz-emoji {
  font-size: clamp(2.8rem, 14cqw, 5.5rem); font-weight: 900; color: #E11D2E;
  -webkit-text-stroke: 4px #111; paint-order: stroke fill; line-height: 1; text-align: center;
}
.qz-img { max-width: min(46%, 180px); max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 0 rgb(0 0 0 / .15)); }
.qz-bar {
  height: clamp(18px, 3.2cqh, 28px); border: 4px solid #111; border-radius: 999px; background: #fff;
  overflow: hidden; box-shadow: 0 4px 0 rgb(0 0 0 / .15); flex: none;
}
.qz-bar-fill {
  height: 100%; width: 100%; background: linear-gradient(90deg, #FFE566, #FF8A00 55%, #FF3B3B);
  will-change: width;
}
.qz.qz-low .qz-bar { box-shadow: 0 4px 0 rgb(0 0 0 / .15), 0 0 18px rgb(255 59 59 / .35); }
.qz.qz-read .qz-bar-fill { width: 100% !important; opacity: .55; filter: grayscale(.2); }
.qz.qz-read .qz-opt.waiting { opacity: .55; transform: scale(.98); }
.qz-banner {
  margin-top: .35rem; padding: .35rem .6rem; border-radius: 999px; border: 3px solid #111;
  text-align: center; font-weight: 900; font-size: clamp(.95rem, 3.6cqw, 1.25rem);
  -webkit-text-stroke: 2px #111; paint-order: stroke fill; color: #fff;
  animation: qz-pop .35s ease-out;
}
.qz-banner.ok { background: #2ECC71; }
.qz-banner.bad { background: #ef4444; }
.qz.qz-hit .qz-card { animation: qz-bounce .55s ease-out; box-shadow: 0 10px 0 rgb(46 204 113 / .45); }
.qz.qz-miss .qz-card { animation: qz-shake .45s ease-out; box-shadow: 0 10px 0 rgb(239 68 68 / .4); }
.qz-opt.ok { animation: qz-pop .4s ease-out; }
.qz-opt.bad { animation: qz-shake .4s ease-out; }
@keyframes qz-pop {
  0% { transform: scale(.7); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes qz-bounce {
  0% { transform: scale(.96); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes qz-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px) rotate(-1deg); }
  40% { transform: translateX(8px) rotate(1deg); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.qz-opts { display: flex; flex-direction: column; gap: .45rem; flex: none; }
.qz-opt {
  display: flex; align-items: center; gap: .55rem; min-height: clamp(52px, 9cqh, 78px);
  padding: .35rem .55rem .35rem .3rem; border-radius: 999px; border: 4px solid #111; background: #fffef8;
  box-shadow: 0 6px 0 rgb(0 0 0 / .18); cursor: pointer; font: inherit; text-align: left; color: #111;
}
.qz-opt:disabled { cursor: default; }
.qz-opt.picked { outline: 3px solid var(--accent, #FF4FA3); }
.qz-opt.ok { background: #2ECC71; transform: scale(1.02); }
.qz-opt.bad { background: #fda4af; }
.qz-opt.dim { opacity: .45; }
.qz-letter {
  width: clamp(40px, 8cqw, 56px); height: clamp(40px, 8cqw, 56px); border-radius: 50%;
  display: grid; place-items: center; background: var(--accent, #FF4FA3); border: 3px solid #111;
  color: #fff; font-weight: 900; font-size: clamp(1.1rem, 4cqw, 1.5rem);
  -webkit-text-stroke: 2px #111; paint-order: stroke fill; flex: none;
}
.qz-opt-text { flex: 1; text-align: center; font-weight: 900; font-size: clamp(1rem, 4cqw, 1.45rem); line-height: 1.05; }
.qz-pick {
  flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; align-content: center;
}
.qz-cat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  min-height: 88px; border-radius: 22px; border: 4px solid #111; cursor: pointer; font: inherit; color: #111;
  background: linear-gradient(160deg, var(--cat, #FFD54A), color-mix(in srgb, var(--cat2, #6B2D9B) 35%, var(--cat, #FFD54A)));
  box-shadow: 0 8px 0 rgb(0 0 0 / .18); font-weight: 900;
}
.qz-cat-emoji { font-size: 1.8rem; line-height: 1; }
.qz-cat:disabled { opacity: .7; cursor: default; }
.qz.qz-reveal .qz-card { box-shadow: 0 10px 0 rgb(46 204 113 / .35); }
@media (max-width: 420px) {
  .qz-pick { grid-template-columns: 1fr; }
}

/* Lista de jogos no HTML (SEO) — discreta sob a grade */
.seo-games { margin: .4rem 0 1.2rem; }
.seo-game-list { display: flex; flex-wrap: wrap; gap: .35rem .7rem; margin: 0; padding: 0; list-style: none; }
.seo-game-list a { color: var(--muted, #8b9bb7); font-size: .82rem; text-decoration: none; }
.seo-game-list a:hover { color: var(--primary, #22d3ee); text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }