/* ===================== Botequei — tema "boteco raiz" (lousa + madeira) ===================== */

/* Fontes vendorizadas (sem CDN): Anton (OFL) p/ números-menu, Patrick Hand (OFL) p/ giz. */
@font-face { font-family: 'Anton'; src: url('fonts/anton-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Patrick'; src: url('fonts/patrickhand-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --bg:        #141a10;   /* lousa */
  --bg-soft:   #1a2113;   /* sheet / cartão de giz */
  --card:      #1d2515;
  --card-hi:   #26301a;
  --line:      #3c4a2b;                    /* linha sólida (bordas discretas) */
  --chalk-line: rgba(242,234,214,.26);     /* traço de giz (tracejado) */
  --gold:      #f4b13c;   /* âmbar de chopp */
  --gold-deep: #d5871c;
  --cream:     #f2ead6;   /* giz */
  --muted:     #aeb096;   /* giz apagado */
  --danger:    #e8735f;
  --danger2:   #e8735f;
  --ok:        #7fc98a;
  --radius:    18px;
  --tap:       64px;
  --safe-b:    env(safe-area-inset-bottom, 0px);
  --safe-t:    env(safe-area-inset-top, 0px);
  --num: 'Anton', 'Arial Narrow', system-ui, sans-serif;
  --hand: 'Patrick', 'Segoe Print', 'Comic Sans MS', system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  /* poeira de giz + lousa */
  background:
    radial-gradient(rgba(255,255,255,.05) .5px, transparent .6px) 0 0 / 7px 7px,
    radial-gradient(135% 100% at 50% -10%, #20281b 0%, #141a10 55%, #0b0e07 100%);
  background-attachment: fixed;
  color: var(--cream);
  font-family: var(--hand);
  font-size: 17px;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
}
/* moldura de madeira fixa em volta da tela */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  box-shadow:
    inset 0 0 0 5px #3a2712,
    inset 0 0 0 10px #6b4a28,
    inset 0 0 0 13px #241608,
    inset 0 0 90px rgba(0,0,0,.5);
}
#app { max-width: 560px; margin: 0 auto; min-height: 100%; }

/* ---------- Telas ---------- */
.screen { display: none; min-height: 100dvh; flex-direction: column;
  padding: calc(20px + var(--safe-t)) 20px calc(20px + var(--safe-b)); }
.screen.is-active { display: flex; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

/* ---------- Botões ---------- */
.btn {
  border: 0; border-radius: 14px; font-size: 18px; font-weight: 400;
  padding: 14px 18px; color: #241400; background: var(--gold);
  cursor: pointer; transition: transform .08s ease, filter .15s ease;
  font-family: var(--hand); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .45; filter: grayscale(.35); cursor: default; }
.btn-primary { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%); color: #241400;
  box-shadow: 0 4px 16px rgba(244,177,60,.28); }
.btn-ghost { background: rgba(255,255,255,.04); color: var(--cream); border: 2px dashed var(--chalk-line); }
.btn-lg { width: 100%; font-size: 21px; padding: 18px; min-height: var(--tap); }
.btn-emoji { font-size: 20px; }

/* ---------- Home ---------- */
.home-hero { text-align: center; padding: 26px 0 10px; }
.logo { font-size: 64px; filter: drop-shadow(0 6px 14px rgba(244,177,60,.4)); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
.brand { font-family: var(--hand); font-size: 52px; margin: 4px 0 0; letter-spacing: .5px; color: var(--cream);
  text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.tagline { color: var(--muted); margin: 0; font-size: 17px; }

.home-card { background: rgba(255,255,255,.03); border: 2px dashed var(--chalk-line);
  border-radius: var(--radius); padding: 18px; margin-top: 20px; display: grid; gap: 14px;
  box-shadow: inset 0 0 24px rgba(0,0,0,.22); }

.field { display: grid; gap: 6px; font-size: 14px; color: var(--muted); font-weight: 400; }
.field input, .code-input {
  background: var(--card); border: 1.5px solid var(--line); color: var(--cream);
  border-radius: 12px; padding: 14px; font-size: 18px; width: 100%;
  font-family: system-ui, -apple-system, sans-serif; /* legível pra digitar */
  -webkit-user-select: text; user-select: text;
}
.field input:focus, .code-input:focus { outline: none; border-color: var(--gold); }

.join-row { display: flex; gap: 8px; }
.join-row .code-input { text-transform: uppercase; letter-spacing: 2px; text-align: center; flex: 1; min-width: 0; }
.join-row .code-input::placeholder { text-transform: none; letter-spacing: normal; font-size: 15px; }
.join-row .btn { white-space: nowrap; }

.home-history { margin-top: 22px; }
.home-history h2 { font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
#history-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.hist-item { display: flex; justify-content: space-between; align-items: center;
  background: var(--card); border: 2px dashed var(--chalk-line); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.hist-item small { color: var(--muted); }

.home-foot { margin-top: auto; text-align: center; color: var(--muted); font-size: 13px; padding-top: 20px; }

/* ---------- Topbar da mesa ---------- */
.topbar { display: flex; align-items: center; gap: 10px; }
.icon-btn { background: rgba(255,255,255,.04); border: 2px dashed var(--chalk-line); color: var(--cream);
  min-width: 46px; height: 46px; border-radius: 12px; font-size: 20px; cursor: pointer; padding: 0 10px; font-family: var(--hand); }
.icon-btn:active { transform: scale(.94); }
#btn-leave { font-family: var(--num); font-size: 30px; line-height: 1; }
.table-id { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255,255,255,.03); border: 2px dashed var(--gold); border-radius: 12px; height: 46px; padding: 0 12px; overflow: hidden; cursor: pointer; color: var(--cream); }
.mesa-label { max-width: 100%; font-size: 10px; letter-spacing: 2px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.mesa-code { font-family: var(--num); font-size: 20px; letter-spacing: 4px; color: var(--gold); line-height: 1; }
.topbar-actions { display: flex; gap: 8px; }

.conn-banner { margin-top: 10px; background: rgba(244,177,60,.1); border: 1px dashed var(--gold);
  color: var(--gold); border-radius: 10px; padding: 8px 12px; font-size: 15px; text-align: center; }
.hh-banner { margin-top: 8px; background: linear-gradient(180deg, rgba(244,177,60,.22), rgba(244,177,60,.07));
  border: 2px dashed var(--gold); color: var(--gold); border-radius: 12px; padding: 9px 12px;
  font-family: var(--num); letter-spacing: .5px; font-size: 17px; text-align: center;
  animation: hhpulse 2s ease-in-out infinite; }
@keyframes hhpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(244,177,60,.25); } 50% { box-shadow: 0 0 16px 2px rgba(244,177,60,.4); } }

/* ---------- Totais (herói: a mesa) ---------- */
.totals { display: flex; align-items: flex-end; gap: 16px; padding: 16px 4px 8px; }
.total-hero { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; border-radius: 14px; padding: 4px 10px 6px; }
.total-hero .total-cap, .total-hero .total-num { position: relative; z-index: 1; }
/* chopp: nível recortado num ::before dentro de uma camada com overflow hidden,
   pra NÃO cortar o texto do herói (o número/legenda ficam livres, z-index 1) */
.hero-fill { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: 14px; }
.hero-fill::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fill, 0);
  background: linear-gradient(180deg, rgba(244,177,60,.30), rgba(244,177,60,.10));
  border-top: 3px solid rgba(255,240,200,.55); transition: height .6s cubic-bezier(.3,1.3,.5,1); }
.total-side { text-align: right; display: flex; flex-direction: column; gap: 4px; }
.total-num { font-family: var(--num); line-height: .82; color: var(--gold); font-variant-numeric: tabular-nums; }
.total-cap { font-size: 16px; color: var(--muted); }
.total-hero .total-num { font-size: 72px; line-height: .95; text-shadow: 0 0 22px rgba(244,177,60,.22), 0 2px 0 rgba(0,0,0,.3); }
.total-side .total-num { font-size: 40px; color: var(--cream); }
.total-money .total-num { font-size: 26px; color: var(--cream); }
/* a conta é um botão: tocar abre "Fechar a conta" */
.total-money { display: flex; align-items: baseline; gap: 8px; justify-content: flex-end;
  background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.total-money::after { content: '›'; align-self: center; color: var(--gold); font-size: 22px; line-height: 1; opacity: .75; }
.total-money:active { opacity: .6; }

/* ---------- Grid de itens (coasters de giz) ---------- */
.items-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 4px; }
.item-card { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  border: 2px dashed var(--chalk-line); border-radius: 16px; padding: 13px 12px 12px;
  display: flex; flex-direction: column; gap: 3px; position: relative; overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0,0,0,.22); min-height: 116px; }
.item-card.hot { border-color: rgba(244,177,60,.5); }
.item-emoji { font-size: 34px; line-height: 1; }
.item-name { font-family: var(--hand); font-size: 20px; color: var(--cream); }
.item-sub { font-size: 13px; color: var(--muted); min-height: 15px; }
.item-qty { position: absolute; top: 6px; right: 13px; font-family: var(--num); font-size: 40px; line-height: .8;
  color: var(--gold); font-variant-numeric: tabular-nums; }
.item-card[data-zero] .item-qty { color: var(--muted); opacity: .5; }
.item-plus { position: absolute; bottom: 9px; right: 13px; margin: 0; min-height: 0; padding: 0;
  border: 0; background: none; color: var(--muted); font-family: var(--num); font-size: 15px; cursor: pointer; }
.item-card.pop { animation: pop .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { 0% { transform: scale(1); } 30% { transform: scale(1.11); box-shadow: 0 0 0 3px var(--gold); } 60% { transform: scale(.985); } 100% { transform: scale(1); } }
.item-card.pop-remove { animation: popr .35s ease; }
@keyframes popr { 0% { transform: scale(1); } 35% { transform: scale(.94); box-shadow: 0 0 0 3px var(--danger2); } 100% { transform: scale(1); } }

.btn-additem { margin-top: 12px; width: 100%; }

/* ---------- Dock inferior (zona do polegar) ---------- */
.action-bar { display: flex; gap: 10px; margin-top: auto; position: sticky; z-index: 3;
  bottom: calc(6px + var(--safe-b)); padding-top: 12px; }
.chip { flex: 1; background: rgba(28,34,20,.92); border: 2px dashed var(--chalk-line); color: var(--cream);
  border-radius: 14px; padding: 13px 6px; font-size: 17px; font-family: var(--hand); cursor: pointer;
  backdrop-filter: blur(2px); }
.chip:active { transform: scale(.96); }

/* Pill de jogo minimizado: a partida segue rolando; um toque traz de volta.
   O pulso é só de brilho (sem mexer na geometria — alvo de toque parado). */
.game-pill { position: sticky; z-index: 3; bottom: calc(74px + var(--safe-b)); display: block;
  margin: 10px auto 0; max-width: 100%; background: var(--gold); color: #241400; border: none;
  border-radius: 999px; padding: 11px 18px; font-family: var(--hand); font-size: 16px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4); animation: pill-glow 2.2s ease-in-out infinite; }
.game-pill.urgent { background: var(--danger); color: #fff; } /* SUA VEZ */
.game-pill:active { transform: scale(.97); }
@keyframes pill-glow {
  0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, .4); filter: brightness(1); }
  50% { box-shadow: 0 6px 26px rgba(244, 177, 60, .55); filter: brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) { .game-pill { animation: none; } }

/* "Encerrar a partida" dentro dos jogos (ação explícita; o ✕ só minimiza) */
.game-end { width: 100%; margin-top: 12px; color: var(--danger); border-color: rgba(232, 115, 95, .55); }

/* atalho de jogos (picker rápido da mesa) */
.games-grid { display: grid; gap: 10px; }
.game-pick { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: rgba(255,255,255,.05); border: 2px dashed var(--chalk-line); color: var(--cream);
  border-radius: 12px; padding: 14px 16px; font-size: 17px; font-family: var(--hand); cursor: pointer; }
.game-pick:active { transform: scale(.98); }
.game-pick-e { font-size: 24px; line-height: 1; }
#btn-rodada { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: #241400;
  border: 0; font-size: 18px; box-shadow: 0 4px 16px rgba(244,177,60,.3); }

/* ---------- Overlays / sheets (cartão de giz) ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center; z-index: 40; animation: fade .2s ease; }
.sheet { background: linear-gradient(180deg, #1c2314, #141a0f); border: 2px dashed var(--chalk-line); border-bottom: 0;
  border-radius: 22px 22px 0 0; width: 100%; max-width: 560px; padding: 22px 18px calc(26px + var(--safe-b));
  position: relative; animation: rise .28s cubic-bezier(.2,.9,.3,1); box-shadow: 0 -10px 40px rgba(0,0,0,.5); }
@keyframes rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet h2 { margin: 0 0 6px; font-family: var(--hand); font-size: 27px; font-weight: 400; }
.sheet-sub { color: var(--muted); margin: 0 0 16px; font-size: 15px; }
.sheet-close { position: absolute; top: 14px; right: 14px; background: var(--card);
  border: 1px solid var(--line); color: var(--cream); width: 44px; height: 44px; border-radius: 50%; font-size: 17px; cursor: pointer; }
.sheet-actions { display: flex; gap: 10px; margin-top: 18px; }
.sheet-actions .btn { flex: 1; }

.qr-wrap { display: flex; justify-content: center; padding: 10px; background: #fff; border-radius: 16px; margin: 4px auto 14px; width: fit-content; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.qr-wrap svg, .qr-wrap canvas { display: block; width: 220px; height: 220px; }
.big-code { text-align: center; font-family: var(--num); font-size: 46px; letter-spacing: 8px; color: var(--gold); margin-bottom: 6px; }

.peers-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.peer-row { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.03);
  border: 2px dashed var(--chalk-line); border-radius: 12px; padding: 11px 13px; }
.peer-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.peer-dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.peer-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.peer-name { font-size: 18px; }
.peer-conn { font-size: 12px; color: var(--muted); }
.peer-total { font-family: var(--num); font-size: 26px; color: var(--gold); }
.peer-you { font-size: 12px; color: var(--muted); }

.emoji-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.emoji-pick { font-size: 26px; width: 46px; height: 46px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--card); cursor: pointer; }
.emoji-pick.sel { border-color: var(--gold); background: var(--card-hi); }

/* ---------- Modo bebedeira ---------- */
.bebedeira { position: fixed; inset: 0; z-index: 60; background: radial-gradient(120% 90% at 50% 0%, #23301a, #0b0e07);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; }
.bebedeira-exit { position: absolute; top: calc(16px + var(--safe-t)); right: 18px; background: transparent;
  border: 2px dashed var(--chalk-line); color: var(--muted); width: 44px; height: 44px; border-radius: 50%; font-size: 18px; }
.bebedeira-item { font-size: 90px; line-height: 1; animation: bob 3s ease-in-out infinite; }
.bebedeira-count { font-family: var(--num); font-size: 150px; line-height: .85; color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(244,177,60,.3); }
.bebedeira-plus { width: min(78vw, 340px); height: min(38vh, 300px); border-radius: 40px; border: 0;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: #241400; font-family: var(--num); font-size: 72px; cursor: pointer;
  box-shadow: 0 10px 30px rgba(244,177,60,.35); }
.bebedeira-plus:active { transform: scale(.97); }
.bebedeira-plus.pop { animation: pop .3s ease; }
.bebedeira-hint { color: var(--muted); font-size: 15px; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(90px + var(--safe-b)); transform: translateX(-50%);
  background: #26301a; border: 2px dashed var(--chalk-line); color: var(--cream); padding: 12px 18px;
  border-radius: 999px; font-size: 16px; z-index: 80; box-shadow: 0 8px 24px rgba(0,0,0,.45);
  animation: fade .2s ease; max-width: 90%; text-align: center; }
.toast[hidden] { display: none; }
[hidden] { display: none !important; }

/* ===================== Extras (perfil, social, conta, configs) ===================== */

/* Tema claro: papel kraft / lousa clara */
body.light {
  --bg: #efe4cf; --bg-soft: #fdf6e6; --card: #fbf2df; --card-hi: #f6ead1;
  --line: #d8c39c; --chalk-line: rgba(90,70,40,.4); --cream: #2e2314; --muted: #7a6a4c;
  --gold: #c9791a; --gold-deep: #a95f10;
}
body.light { background:
  radial-gradient(rgba(120,90,50,.06) .5px, transparent .6px) 0 0 / 7px 7px,
  radial-gradient(135% 100% at 50% -10%, #fdf6e6 0%, #ece0c7 60%); }
body.light .btn-primary { color: #fff; }
body.light .item-name, body.light .peer-name { color: var(--cream); }
/* superfícies escuras -> claras no tema kraft */
body.light .sheet { background: linear-gradient(180deg, #fdf6e6, #f2e7cd); }
body.light .chip, body.light .toast, body.light .fx-plus { background: #fbf2df; }
body.light .sheet-close { background: var(--card); }

/* Tema neon: balada — roxo profundo + rosa/âmbar elétrico */
body.neon {
  --bg: #0c0a1e; --bg-soft: #16112e; --card: #1a1338; --card-hi: #241a4d;
  --line: #4a2f7a; --chalk-line: rgba(200,160,255,.28); --cream: #f3ebff; --muted: #a79bd0;
  --gold: #ff5cc8; --gold-deep: #b23c9c;
}
body.neon { background:
  radial-gradient(rgba(180,120,255,.06) .5px, transparent .6px) 0 0 / 7px 7px,
  radial-gradient(135% 100% at 50% -10%, #1a1140 0%, #0c0a1e 55%, #060418 100%); }
body.neon .btn-primary { box-shadow: 0 0 16px rgba(255,92,200,.5); }
body.neon .total-num, body.neon .item-qty { text-shadow: 0 0 14px rgba(255,92,200,.5); }

/* Tema retrô: boteco anos 70 — laranja queimado + madeira */
body.retro {
  --bg: #2a1a0e; --bg-soft: #35210f; --card: #3d2712; --card-hi: #4a3016;
  --line: #6e4a24; --chalk-line: rgba(255,210,150,.3); --cream: #ffe9c9; --muted: #c8a878;
  --gold: #ff8c1a; --gold-deep: #d46a00;
}
body.retro { background:
  radial-gradient(rgba(255,180,90,.05) .5px, transparent .6px) 0 0 / 7px 7px,
  radial-gradient(135% 100% at 50% -10%, #3a2410 0%, #2a1a0e 60%, #1a0f06 100%); }

/* Fonte grande (acessibilidade) */
body.bigfont { font-size: 20px; }
body.bigfont .item-name { font-size: 22px; }
body.bigfont .btn, body.bigfont .chip { font-size: 19px; }

.gear { position: absolute; top: calc(16px + var(--safe-t)); right: 18px; background: transparent;
  border: 0; font-size: 24px; cursor: pointer; z-index: 5; }
.seal { color: var(--muted); font-size: 13px; display: block; margin-top: 8px; }
.btn-install { width: auto; margin-bottom: 6px; }

/* Nome/emoji da mesa */
.name-emoji { display: flex; gap: 8px; align-items: center; }
.emoji-one { font-size: 24px; width: 48px; height: 48px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--card); cursor: pointer; }
.name-emoji input { flex: 1; }

/* Menu */
.menu-list { display: grid; gap: 8px; }
.menu-item { text-align: left; background: rgba(255,255,255,.03); border: 2px dashed var(--chalk-line); color: var(--cream);
  border-radius: 12px; padding: 15px 16px; font-size: 18px; font-family: var(--hand); cursor: pointer; }
.menu-item:active { transform: scale(.98); }

/* Perfil */
.lbl { font-size: 14px; color: var(--muted); margin: 12px 0 6px; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.swatch.sel { border-color: var(--cream); }
.check { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 16px; color: var(--cream); cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--gold); }

/* Placar */
.mvp { background: linear-gradient(180deg, rgba(244,177,60,.16), rgba(255,255,255,.02)); border: 2px dashed var(--gold);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; text-align: center; color: var(--gold); font-size: 18px; }
.peer-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; flex: none; box-shadow: 0 0 0 1.5px rgba(242,234,214,.4); }
.peer-medal { font-size: 20px; width: 22px; text-align: center; }
.peer-badges { font-size: 14px; color: var(--muted); }
.my-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.badge { background: rgba(255,255,255,.04); border: 2px dashed var(--chalk-line); border-radius: 999px; padding: 6px 12px; font-size: 14px; }

/* Conta */
.sheet-tall { max-height: 88vh; overflow-y: auto; }
.bill-opts { display: grid; gap: 4px; margin-bottom: 10px; }
.field-inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.field-inline span { flex: 1; }
.field-inline input { width: 110px; }
.bill-list { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 8px; }
.bill-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.03); border: 2px dashed var(--chalk-line);
  border-radius: 12px; padding: 12px 14px; }
.bill-row .b-name { flex: 1; font-size: 18px; }
.bill-row .b-amt { font-family: var(--num); font-size: 22px; color: var(--gold); }
.bill-row .b-pix { background: var(--gold); color: #241400; border: 0; border-radius: 10px; padding: 8px 12px; font-family: var(--hand); font-size: 16px; cursor: pointer; }
.bill-total { text-align: right; font-family: var(--num); font-size: 26px; margin-top: 8px; }
.pix-code { width: 100%; background: var(--card); border: 1.5px solid var(--line); color: var(--cream);
  border-radius: 12px; padding: 12px; font-family: monospace; font-size: 12px; resize: none; -webkit-user-select: all; user-select: all; }

/* Offline (pareamento por QR/código, sem servidor) */
.btn-offline { font-size: 15px; padding: 12px; opacity: .95; }
.code-box { width: 100%; background: var(--card); border: 1.5px solid var(--line); color: var(--cream);
  border-radius: 12px; padding: 10px 12px; font-family: monospace; font-size: 11px; line-height: 1.35;
  resize: none; word-break: break-all; -webkit-user-select: all; user-select: all; margin-bottom: 8px; }
.scan-wrap { border-radius: 16px; overflow: hidden; background: #000; margin: 6px 0 4px; aspect-ratio: 1 / 1; }
.scan-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Reações */
.react-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.react-row button { font-size: 40px; background: transparent; border: 0; cursor: pointer; }
.react-row button:active { transform: scale(1.2); }

/* Escolha de tema (fim do tour) */
.sheet .hint { color: var(--muted); font-size: 14px; margin: 2px 0 10px; }
.theme-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-row .btn { width: 100%; }
.theme-row .btn:last-child { grid-column: 1 / -1; }

/* Camada de efeitos */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.fx-float { position: absolute; font-size: 44px; animation: floatUp 2.2s ease-out forwards; }
@keyframes floatUp { 0% { transform: translateY(0) scale(.6); opacity: 0; }
  15% { opacity: 1; transform: translateY(-10px) scale(1.1); }
  100% { transform: translateY(-70vh) scale(1); opacity: 0; } }
.fx-plus { position: absolute; font-family: var(--hand); font-size: 22px; color: var(--gold); background: #26301a;
  border: 2px dashed var(--chalk-line); border-radius: 999px; padding: 6px 12px; animation: floatUp 1.8s ease-out forwards; white-space: nowrap; }

/* Brinde */
.brinde { position: fixed; inset: 0; z-index: 75; background: radial-gradient(120% 90% at 50% 30%, #23301a, #0b0e07ee);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.brinde-emoji { font-size: 110px; animation: bob 1.5s ease-in-out infinite; }
.brinde-count { font-family: var(--num); font-size: 190px; color: var(--gold); line-height: .9; }
.brinde-word { font-family: var(--hand); font-size: 46px; color: var(--cream); }
.brinde.go .brinde-count { animation: pop .4s ease; }
.toast-action { color: var(--gold); }
.price-list { list-style: none; padding: 0; margin: 0; }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--chalk-line); }
.price-row input { width: 110px; background: var(--card); border: 1.5px solid var(--line); color: var(--cream); border-radius: 10px; padding: 10px; font-size: 16px; font-family: system-ui, sans-serif; }

/* Comemoração de marcos (confete de emoji, cai do topo) */
.confetti { position: absolute; top: -8vh; will-change: transform;
  animation-name: fall; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; }
  100% { transform: translateY(120vh) rotate(600deg); opacity: .95; } }

/* Dicas de primeiro uso (giz apagado) */
.table-hint { text-align: center; color: var(--muted); font-size: 15px; margin: 2px 0 8px; opacity: .85; }
.home-hint { text-align: center; color: var(--muted); font-size: 15px; margin: 16px 6px 0; line-height: 1.45; opacity: .9; }

/* ===================== Novas features (ritmo, roleta, cutucar, cerimônia, números) ===================== */

/* select (configs) combina com os inputs de texto */
select { background: var(--card); border: 1.5px solid var(--line); color: var(--cream);
  border-radius: 10px; padding: 10px; font-size: 16px; font-family: system-ui, sans-serif; }
.field-inline select { width: 150px; }
.btn-stats { font-size: 15px; padding: 12px; }

/* Botão de cutucar no placar */
.peer-poke { background: rgba(255,255,255,.05); border: 2px dashed var(--chalk-line); color: var(--cream);
  border-radius: 10px; width: 44px; height: 44px; font-size: 18px; cursor: pointer; flex: none; }
.peer-poke:active { transform: scale(.9); }

/* Conta: gorjeta em presets + linha rica (itens, cobertura, "eu pago") */
.tip-row { display: flex; align-items: center; gap: 10px; padding: 6px 0 8px; }
.tip-row .lbl { margin: 0; flex: none; }
.tip-btns { display: flex; gap: 6px; flex: 1; }
.tip-btns button { flex: 1; background: var(--card); border: 1.5px solid var(--line); color: var(--cream);
  border-radius: 10px; padding: 9px 0; font-family: var(--hand); font-size: 16px; cursor: pointer; }
.tip-btns button.sel { border-color: var(--gold); background: var(--card-hi); color: var(--gold); }
.bill-row .b-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bill-row .b-items { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill-row .b-covered { font-size: 14px; color: var(--ok); white-space: nowrap; }
.bill-row .b-actions { display: flex; gap: 6px; align-items: center; flex: none; }
.bill-row .b-pay { background: rgba(255,255,255,.05); border: 2px dashed var(--chalk-line); color: var(--cream);
  border-radius: 10px; width: 44px; height: 44px; font-size: 16px; cursor: pointer; }
.bill-row .b-pay.on { border-color: var(--gold); background: rgba(244,177,60,.18); }
.bill-row .b-sel { width: 20px; height: 20px; accent-color: var(--gold); flex: none; }

/* Meu ritmo */
.pace-summary { font-family: var(--hand); font-size: 22px; text-align: center; margin: 2px 0 12px; }
.pace-summary strong { font-family: var(--num); color: var(--gold); font-size: 30px; }
.pace-meter { height: 14px; background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; }
.pace-bar { height: 100%; width: 0; border-radius: 999px; transition: width .5s ease; background: var(--ok); }
.pace-bar.lvl-medio { background: var(--gold); }
.pace-bar.lvl-alto { background: var(--danger); }
.pace-label { text-align: center; color: var(--muted); font-size: 15px; margin: 8px 0 10px; }
.pace-chart { width: 100%; height: auto; display: block; background: rgba(255,255,255,.03);
  border: 2px dashed var(--chalk-line); border-radius: 14px; }
.pace-bac { text-align: center; margin-top: 14px; padding: 12px; background: rgba(255,255,255,.03);
  border: 2px dashed var(--chalk-line); border-radius: 14px; }
.bac-big { font-family: var(--num); font-size: 46px; color: var(--gold); line-height: 1; }
.bac-big small { font-size: 18px; color: var(--muted); }
.bac-lbl { color: var(--cream); font-size: 16px; margin-top: 4px; }
.bac-drive { color: var(--danger); font-size: 15px; margin-top: 4px; }

/* Roleta: quem paga a próxima */
.roulette-list { list-style: none; padding: 0; margin: 6px 0 4px; display: grid; gap: 8px; max-height: 46vh; overflow-y: auto; }
.roul-item { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.03); border: 2px dashed var(--chalk-line);
  border-radius: 12px; padding: 11px 13px; font-size: 18px; transition: transform .1s ease, border-color .1s ease, background .1s ease; }
.roul-item.on { border-color: var(--gold); background: rgba(244,177,60,.2); transform: scale(1.03); box-shadow: 0 0 16px rgba(244,177,60,.3); }
.roul-name { flex: 1; min-width: 0; }
.roulette-result { text-align: center; font-family: var(--hand); font-size: 22px; color: var(--gold); margin: 12px 0 2px;
  background: linear-gradient(180deg, rgba(244,177,60,.16), transparent); border: 2px dashed var(--gold); border-radius: 14px; padding: 12px; }

/* Cutucar / desafiar */
.poke-actions { display: grid; gap: 10px; }
.poke-actions .poke-btn { width: 100%; justify-content: flex-start; }

/* Cerimônia de troféus */
.ceremony-list { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 10px; }
.ceremony-row { display: flex; align-items: center; gap: 14px; background: linear-gradient(180deg, rgba(244,177,60,.1), rgba(255,255,255,.02));
  border: 2px dashed var(--gold); border-radius: 14px; padding: 12px 14px; }
.cer-emoji { font-size: 38px; line-height: 1; flex: none; }
.cer-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cer-title { font-family: var(--hand); font-size: 19px; color: var(--gold); }
.cer-name { font-size: 16px; color: var(--cream); }

/* Meus números (estatísticas de vida) */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 12px; }
.stat-cell { background: rgba(255,255,255,.03); border: 2px dashed var(--chalk-line); border-radius: 14px;
  padding: 12px 8px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.stat-cell.wide { grid-column: 1 / -1; flex-direction: row; justify-content: center; align-items: baseline; gap: 8px; }
.stat-v { font-family: var(--num); font-size: 30px; color: var(--gold); line-height: 1; }
.stat-l { font-size: 13px; color: var(--muted); }
.stats-h3 { font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin: 14px 0 6px; font-family: var(--hand); font-weight: 400; }
.stats-history { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.stats-history li { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--card); border: 2px dashed var(--chalk-line); border-radius: 12px; padding: 10px 13px; font-size: 15px; }
.stats-history small { color: var(--muted); }

/* ===================== Leva 2 (presença, categorias, comanda, acessibilidade) ===================== */

/* Foco visível pra quem navega por teclado */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* Barra de presença (avatares de quem está na mesa) */
.presence-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; cursor: pointer; }
.pres-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px;
  box-shadow: 0 0 0 1.5px rgba(242, 234, 214, .4); flex: none; position: relative; }
/* tela apagada / caiu há pouco: esmaece com 💤 em vez de sumir da barra */
.pres-av.zz { filter: grayscale(1); opacity: .5; }
.pres-av .zz-b { position: absolute; right: -5px; bottom: -5px; font-size: 11px; font-style: normal; filter: none; }

/* Seções do menu */
.menu-sec { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 14px 2px 2px; }
.menu-sec:first-child { margin-top: 2px; }

/* Cabeçalho de categoria no cardápio */
.cat-head { grid-column: 1 / -1; font-family: var(--hand); font-size: 15px; color: var(--muted);
  letter-spacing: .5px; margin: 8px 2px 0; padding-top: 5px; border-top: 1px dashed var(--chalk-line); }
.cat-head:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.item-badge { position: absolute; bottom: 9px; left: 12px; font-size: 12px; opacity: .8; }

/* Placar: indicador de conexão por pessoa + nome clicável (abre comanda) */
.peer-net { font-size: 15px; width: 22px; text-align: center; flex: none; }
.peer-net.off { opacity: .6; }
.peer-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; padding: 0; cursor: pointer; }

/* Comanda individual */
.comanda-list { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 8px; }
.comanda-row { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .03);
  border: 2px dashed var(--chalk-line); border-radius: 12px; padding: 11px 13px; }
.comanda-row .c-emoji { font-size: 22px; flex: none; }
.comanda-row .c-name { flex: 1; min-width: 0; }
.comanda-row .c-qty { font-family: var(--num); font-size: 22px; color: var(--gold); }
.comanda-row .c-money { color: var(--muted); font-size: 14px; }

/* Insight das estatísticas */
.stats-insight { text-align: center; color: var(--muted); font-size: 15px; margin: 6px 2px 0; }

/* Respeita "reduzir movimento" (acessibilidade): corta animações decorativas */
@media (prefers-reduced-motion: reduce) {
  .confetti, .fx-float, .fx-plus, .logo, .bebedeira-item, .brinde-emoji, .hh-banner { animation: none !important; }
  .item-card.pop, .item-card.pop-remove, .bebedeira-plus.pop, .brinde.go .brinde-count { animation: none !important; }
  .screen.is-active, .sheet, .overlay, .roul-item { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ===================== Leva 3 (segurança, retrô, liga, modo bar) ===================== */

.home-row { display: flex; gap: 10px; }
.home-row .btn { flex: 1; }
.home-extras { display: grid; gap: 10px; } /* features pessoais (só com histórico) */

/* Tô de boa? (segurança) */
.safe-verdict { border: 2px dashed var(--chalk-line); border-radius: 14px; padding: 14px; text-align: center; margin-bottom: 12px; }
.safe-verdict.lvl-no { border-color: var(--danger); background: rgba(232, 115, 95, .12); }
.safe-verdict.lvl-wait { border-color: var(--gold); background: rgba(244, 177, 60, .12); }
.safe-verdict.lvl-ok { border-color: var(--ok); background: rgba(127, 201, 138, .12); }
.sv-title { font-family: var(--hand); font-size: 24px; }
.sv-advice { color: var(--muted); font-size: 15px; margin-top: 4px; }
.safe-rows { display: grid; gap: 8px; margin-bottom: 6px; }
.safe-row { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .03); border: 2px dashed var(--chalk-line); border-radius: 12px; padding: 11px 13px; }
.sr-emoji { font-size: 20px; flex: none; }
.sr-label { flex: 1; color: var(--muted); }
.sr-val { font-family: var(--hand); color: var(--cream); }

/* Retrospectiva */
.retro-slides { display: grid; gap: 10px; }
.retro-slide { display: flex; align-items: center; gap: 14px; background: linear-gradient(180deg, rgba(244, 177, 60, .1), rgba(255, 255, 255, .02)); border: 2px dashed var(--gold); border-radius: 14px; padding: 14px 16px; }
.rs-emoji { font-size: 32px; flex: none; }
.rs-big { font-family: var(--num); font-size: 32px; color: var(--gold); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-sub { color: var(--muted); font-size: 14px; text-align: right; flex: none; }

/* Liga & desafios */
.league-level { background: rgba(255, 255, 255, .03); border: 2px dashed var(--chalk-line); border-radius: 14px; padding: 14px; margin-bottom: 6px; }
.ll-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ll-badge { font-family: var(--num); background: var(--gold); color: #241400; border-radius: 999px; padding: 4px 12px; font-size: 18px; }
.ll-title { font-family: var(--hand); font-size: 20px; }
.ll-xp { color: var(--muted); font-size: 13px; margin-top: 6px; text-align: right; }
.pace-meter.sm { height: 8px; margin-top: 4px; }
.league-challenges { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 8px; }
.chal-row { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .03); border: 2px dashed var(--chalk-line); border-radius: 12px; padding: 11px 13px; }
.chal-row.done { border-color: var(--ok); }
.chal-emoji { font-size: 24px; flex: none; }
.chal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chal-title { font-size: 16px; }
.chal-tick { font-family: var(--num); color: var(--gold); flex: none; }
.league-season { margin-top: 12px; }
.season-card { display: flex; align-items: center; gap: 14px; background: linear-gradient(180deg, rgba(244, 177, 60, .14), transparent); border: 2px dashed var(--gold); border-radius: 14px; padding: 14px 16px; }
.season-emoji { font-size: 40px; flex: none; }
.season-title { font-family: var(--hand); font-size: 20px; color: var(--gold); }
.season-sub { color: var(--muted); font-size: 14px; }

/* Chip de nível no placar */
.lvl-chip { font-family: var(--num); font-size: 12px; background: rgba(244, 177, 60, .2); color: var(--gold); border-radius: 999px; padding: 1px 7px; }

/* ===================== Leva 4 (jukebox, modo festa) ===================== */

.jukebox-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; max-height: 50vh; overflow-y: auto; }
.jbx-row { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .03); border: 2px dashed var(--chalk-line); border-radius: 12px; padding: 10px 13px; }
.jbx-n { font-family: var(--num); color: var(--gold); width: 22px; text-align: center; flex: none; }
.jbx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jbx-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jbx-by { font-size: 13px; color: var(--muted); }
.jbx-play { background: rgba(255, 255, 255, .05); border: 2px dashed var(--chalk-line); border-radius: 10px; width: 44px; height: 44px; font-size: 18px; cursor: pointer; flex: none; }

/* Modo festa (overlay full-screen com visualizador) */
.overlay-full { align-items: stretch; }
.festa-inner { position: relative; width: 100%; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(120% 90% at 50% 0%, #23301a, #0b0e07); }
body.light .festa-inner { background: radial-gradient(120% 90% at 50% 0%, #fdf6e6, #ece0c7); }
.festa-canvas { width: min(92vw, 560px); height: auto; aspect-ratio: 8 / 5; background: rgba(0, 0, 0, .18); border: 2px dashed var(--chalk-line); border-radius: 16px; }
body.light .festa-canvas { background: rgba(120, 90, 50, .08); }
.festa-hint { color: var(--muted); font-family: var(--hand); font-size: 18px; }
.overlay-full .sheet-close { position: absolute; top: calc(16px + var(--safe-t)); right: 18px; z-index: 2; }

/* ===================== Leva 5 (torneio, carta, coach) ===================== */

/* Coach no ritmo */
.pace-coach { margin-top: 12px; padding: 12px; background: rgba(255, 255, 255, .03); border: 2px dashed var(--chalk-line); border-radius: 14px; }
.pace-coach:empty { display: none; }
.coach-head { font-family: var(--hand); font-size: 18px; color: var(--gold); margin-bottom: 6px; }
.coach-proj { color: var(--cream); font-size: 15px; margin-bottom: 6px; }
.coach-tip { color: var(--muted); font-size: 15px; padding: 3px 0; }

/* Torneio */
.tourn-list { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 8px; counter-reset: t; }
.tourn-row { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .03); border: 2px dashed var(--chalk-line); border-radius: 12px; padding: 11px 13px; }
.tourn-medal { font-size: 20px; width: 30px; text-align: center; flex: none; }
.tourn-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tourn-pts { font-family: var(--num); color: var(--gold); flex: none; }
.tourn-pts small { font-family: var(--hand); color: var(--muted); }

/* Carta da mesa */
.card-draw { background: linear-gradient(180deg, rgba(244, 177, 60, .12), rgba(255, 255, 255, .02)); border: 2px dashed var(--gold); border-radius: 16px; padding: 26px 18px; text-align: center; margin: 6px 0 4px; }
.card-emoji { font-size: 64px; line-height: 1; }
.card-text { font-family: var(--hand); font-size: 22px; color: var(--cream); margin-top: 10px; }

/* ---------- Telas largas (tablet/desktop): aproveita o espaço ---------- */
@media (min-width: 720px) {
  #app { max-width: 760px; }
  .items-grid { grid-template-columns: repeat(3, 1fr); }
  .home-card { max-width: 460px; margin-left: auto; margin-right: auto; }
  /* herói vira um "copo" compacto e centralizado, em vez de esticar a linha toda */
  .totals { justify-content: center; gap: 40px; }
  .total-hero { flex: 0 1 420px; align-items: center; text-align: center; }
  .total-hero .total-num { font-size: 88px; }
}
@media (min-width: 1040px) {
  #app { max-width: 960px; }
  .items-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===================== Leva 6 — molduras, passaporte, foto, boas-vindas ===================== */

/* Molduras do avatar conforme o nível da liga (prata a partir do nv3, ouro do nv5) */
.peer-avatar.fr-silver, .pres-av.fr-silver { box-shadow: 0 0 0 2px #d3d7de, 0 0 0 4px rgba(211,215,222,.35); }
.peer-avatar.fr-gold, .pres-av.fr-gold { box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px rgba(244,177,60,.4); }

/* Passaporte de botecos */
.passport-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.pass-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.pass-pin { font-size: 20px; flex: none; }
.pass-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pass-name { font-weight: 400; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pass-when { font-size: 13px; color: var(--muted); }
.pass-map { text-decoration: none; font-size: 20px; flex: none; padding: 4px; }

/* Foto da noite (álbum local) */
.photo-wrap { border-radius: 14px; overflow: hidden; background: var(--card); min-height: 160px; display: grid; place-items: center; }
.photo-wrap img { display: block; width: 100%; max-height: 60vh; object-fit: contain; }
.photo-wrap:empty::after { content: "📷"; font-size: 48px; opacity: .5; }

/* Guia de boas-vindas */
.welcome-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.welcome-list li { display: flex; gap: 10px; align-items: baseline; font-size: 16px; line-height: 1.35; }
.welcome-list b { color: var(--gold); }

/* ===================== Purrinha (commit-reveal) ===================== */
.purr-lbl { margin: 16px 0 10px; font-size: 15px; color: var(--cream); }
.purr-lbl b { color: var(--gold); }
/* palito (matchstick): cabeça vermelha + corpo de madeira */
.pstick { display: inline-block; width: 6px; height: 26px; border-radius: 3px;
  background: linear-gradient(180deg, #e8735f 0 26%, #efdcb4 26% 100%); box-shadow: 0 1px 1px rgba(0,0,0,.3); }
.purr-hsticks { display: inline-flex; gap: 4px; align-items: flex-end; }
.purr-hsticks.sm .pstick { width: 5px; height: 18px; }
.purr-fist { font-size: 24px; } .purr-fist.sm { font-size: 18px; }
/* opções de mão (0..3) como cartões com os palitos */
.purr-hands { display: flex; gap: 8px; }
.purr-hand { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px;
  min-height: 82px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--card);
  color: var(--cream); cursor: pointer; transition: transform .08s; }
.purr-hand:active { transform: translateY(2px); }
.purr-hand.on { background: var(--gold); color: #241a08; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(244,177,60,.3); }
.purr-hvis { display: flex; align-items: flex-end; min-height: 26px; }
.purr-hn { font-family: var(--num); font-size: 22px; }
/* palpite: fichas numeradas */
.purr-opts { display: flex; gap: 8px; }
.purr-opts-wrap { flex-wrap: wrap; }
.purr-opt { min-width: 48px; min-height: 48px; flex: 0 0 auto; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--cream); font-family: var(--num); font-size: 22px; cursor: pointer; }
.purr-opt.on { background: var(--gold); color: #241a08; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(244,177,60,.28); }
#btn-purr-seal { margin-top: 18px; }
.purr-waitbig { font-family: var(--num); font-size: 44px; text-align: center; color: var(--gold); margin-top: 10px; }
.purr-waitsub { text-align: center; color: var(--muted); margin-bottom: 12px; }
.purr-seals { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.purr-seal { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; }
.purr-seal.done { border-color: var(--gold); }
.purr-sav { font-size: 20px; }
.purr-sname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.purr-sst { font-size: 13px; color: var(--muted); white-space: nowrap; }
.purr-seal.done .purr-sst { color: var(--gold); }
.purr-total { font-size: 18px; color: var(--muted); text-align: center; margin: 4px 0 14px; }
.purr-total b { font-family: var(--num); color: var(--gold); font-size: 34px; margin-left: 8px; vertical-align: -4px; }
.purr-reveals { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.purr-rev { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px; }
.purr-rev.seer { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(244,177,60,.22); }
.purr-rev.loser { border-color: var(--danger); }
.purr-av { font-size: 22px; flex: none; }
.purr-rname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.purr-rhand { flex: none; display: inline-flex; }
.purr-rguess { font-family: var(--num); color: var(--cream); font-size: 16px; white-space: nowrap; flex: none; }
.purr-tag { font-size: 12px; border-radius: 999px; padding: 2px 8px; flex: none; }
.purr-tag.seer { background: rgba(244,177,60,.2); color: var(--gold); }
.purr-tag.loser { background: rgba(232,115,95,.2); color: var(--danger); }
.purr-verdict { margin-top: 16px; text-align: center; font-size: 20px; padding: 12px; border-radius: 12px; background: var(--card); }
.purr-verdict.win { color: var(--gold); background: rgba(244,177,60,.12); }
.purr-verdict.lose { color: var(--danger); background: rgba(232,115,95,.12); }
#btn-purr-again { margin-top: 14px; }
/* clássico: palpites falados em turno (públicos, sem repetir) */
.purr-status { text-align: center; font-size: 13px; color: var(--muted); margin: 2px 0 10px; }
.purr-said { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.purr-sd { display: flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px; font-size: 14px; }
.purr-sd.me { border-color: var(--gold); }
.purr-sdg { font-family: var(--num); color: var(--gold); font-size: 16px; }
.purr-turnrow { text-align: center; font-size: 17px; color: var(--cream); margin: 8px 0 10px; min-height: 22px; }
.purr-opt:disabled { opacity: .32; cursor: not-allowed; text-decoration: line-through; }
.purr-hand:disabled { opacity: .32; cursor: not-allowed; } /* 3-2-1: mão limitada ao seu estoque */
#btn-purr-say { margin-top: 12px; width: 100%; }

/* ===================== Dominó ===================== */
#overlay-domino .sheet { display: flex; flex-direction: column; }
#dom-game { display: flex; flex-direction: column; min-height: 0; }
.dom-opps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; justify-content: center; flex: none; }
.dom-opp { display: flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px; font-size: 14px; transition: transform .15s, box-shadow .15s; }
.dom-opp.turn { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(244,177,60,.25); }
.dom-opp.played { animation: domplayed 1.6s ease-out; }
@keyframes domplayed { 0% { transform: scale(1); box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(244,177,60,.6); }
  30% { transform: scale(1.08); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244,177,60,0); } }
.dom-oav { font-size: 16px; }
.dom-ocount { font-family: var(--num); color: var(--gold); white-space: nowrap; }
.dom-turn { text-align: center; font-size: 18px; color: var(--muted); margin: 6px 0 8px; min-height: 22px; flex: none; }
.dom-turn.mine { color: var(--gold); }
/* a "mesa" (feltro) — o tabuleiro escala pra caber TUDO numa linha só (sem wrap, sem scroll) */
.dom-board-wrap { background: linear-gradient(180deg, #23492f, #1a3623); border: 1px solid rgba(0,0,0,.35);
  border-radius: 14px; padding: 10px; margin-bottom: 14px; box-shadow: inset 0 2px 10px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center; overflow: hidden; height: 104px; }
body.light .dom-board-wrap { background: linear-gradient(180deg, #2f6b45, #245536); }
.dom-board { display: inline-flex; flex-wrap: nowrap; gap: 5px; align-items: center; transform-origin: center; will-change: transform; }
.dom-empty { color: rgba(255,255,255,.7); font-size: 14px; }
/* pedra: metades com pips, marfim com leve 3D */
.dom-tile { position: relative; display: inline-flex; background: linear-gradient(180deg, #fbf3e0, #ecdcbb); border: 1px solid #6b5836;
  border-radius: 6px; flex: none; box-shadow: 0 2px 3px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.55); }
.dom-tile.dbl { flex-direction: column; } /* carroça atravessada */
.dom-tile.open { animation: domopen 1.9s ease-in-out infinite; } /* pontas abertas pulsam (sem banner) */
.dom-tile.just { animation: domplace .45s ease-out; box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(244,177,60,.7); z-index: 1; }
@keyframes domopen { 0%, 100% { box-shadow: 0 0 0 2px rgba(244,177,60,.3), 0 2px 3px rgba(0,0,0,.35); }
  50% { box-shadow: 0 0 0 3px rgba(244,177,60,.75), 0 0 8px rgba(244,177,60,.4); } }
@keyframes domplace { 0% { transform: scale(1.55); } 60% { transform: scale(.94); } 100% { transform: scale(1); } }
/* avatar de quem jogou a peça, some sozinho */
.dom-played-av { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; background: var(--gold); box-shadow: 0 1px 4px rgba(0,0,0,.5);
  z-index: 3; animation: domchip 3s ease-out forwards; }
@keyframes domchip { 0% { transform: scale(0); } 14% { transform: scale(1.18); } 28% { transform: scale(1); }
  78% { opacity: 1; } 100% { opacity: 0; transform: scale(.9); } }
.dom-half { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  width: 24px; height: 24px; padding: 4px; gap: 1px; box-sizing: content-box; }
.dom-tile > .dom-half:first-child { border-right: 2px solid rgba(70,55,30,.5); }
.dom-tile.dbl > .dom-half:first-child { border-right: none; border-bottom: 2px solid rgba(70,55,30,.5); }
.dp { border-radius: 50%; place-self: center; width: 100%; height: 100%; max-width: 6px; max-height: 6px; }
.dp.on { background: #241a08; box-shadow: inset 0 0 1px rgba(0,0,0,.4); }
.dom-htile .dp { max-width: 7px; max-height: 7px; }
/* minha mão */
#dom-hand-wrap { flex: none; }
.dom-hand-lbl { font-size: 13px; color: var(--muted); margin-bottom: 8px; text-align: center; }
.dom-hand { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dom-htile { padding: 3px; border: 2px solid transparent; border-radius: 9px; background: none; cursor: pointer; line-height: 0; transition: transform .08s; }
.dom-htile.can { border-color: var(--gold); box-shadow: 0 0 8px rgba(244,177,60,.35); }
.dom-htile.can:active { transform: translateY(2px); }
.dom-htile.dim { opacity: .4; filter: grayscale(.4); }
.dom-htile .dom-half { width: 30px; height: 30px; }
.dom-side-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.dom-side-pick span { font-size: 14px; color: var(--muted); width: 100%; text-align: center; }
.dom-side-pick .btn b { font-family: var(--num); color: var(--gold); }
.dom-result { text-align: center; font-size: 22px; padding: 16px; border-radius: 12px; background: var(--card); margin: 8px 0; }
.dom-result.win { color: var(--gold); background: rgba(244,177,60,.12); }
#btn-dom-pass { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .dom-tile.open, .dom-tile.just, .dom-played-av, .dom-opp.played { animation: none; }
}
/* PAISAGEM (celular deitado, não desktop): o tabuleiro vira o protagonista */
@media (orientation: landscape) and (max-height: 600px) {
  #overlay-domino .sheet { max-width: 96vw; width: 96vw; height: 96vh; max-height: 96vh; }
  #dom-game { flex: 1; }
  .dom-board-wrap { flex: 1; height: auto; min-height: 0; margin-bottom: 8px; }
  .dom-opps { margin-bottom: 4px; }
  .dom-turn { margin: 2px 0 4px; }
  .dom-hand { max-height: 26vh; overflow-y: auto; }
  .dom-hand-lbl { margin-bottom: 4px; }
}
/* mesa verificada */
.dom-verified { text-align: center; font-size: 13px; padding: 6px 10px; border-radius: 999px; margin-bottom: 10px;
  background: rgba(244,177,60,.14); color: var(--gold); }
.dom-verified.ok { background: rgba(127,201,138,.16); color: var(--ok); }
.dom-verified.bad { background: rgba(232,115,95,.16); color: var(--danger); }
.dom-setup { text-align: center; padding: 34px 12px; }
.dom-setup-spin { font-size: 46px; animation: dompulse 1.2s ease-in-out infinite; }
.dom-setup-msg { margin-top: 14px; color: var(--muted); font-size: 16px; }
/* escolha do modo ao começar (partida normal x mesa verificada) */
.dom-start { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 20px 6px; }
.dom-start-q { font-size: 18px; color: var(--cream); margin-bottom: 4px; text-align: center; }
.dom-start-alt { font-size: 15px; }
.dom-start-note { font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
@keyframes dompulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .dom-setup-spin { animation: none; } }

/* ===================== App liso — tour guiado + desktop de verdade ===================== */

/* Tour da 1ª mesa: spotlight (recorte via box-shadow gigante) + balão explicativo */
.tour { position: fixed; inset: 0; z-index: 60; }
.tour-spot { position: absolute; border-radius: 14px; border: 2px dashed var(--gold);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .74); transition: all .25s ease; pointer-events: none; }
.tour-balloon { position: absolute; left: 16px; right: 16px; max-width: 430px; margin: 0 auto;
  background: linear-gradient(180deg, #1c2314, #141a0f); border: 2px dashed var(--chalk-line);
  border-radius: 16px; padding: 14px 16px 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .55); }
.tour-count { font-size: 12px; letter-spacing: 1px; color: var(--muted); }
.tour-title { font-family: var(--hand); font-size: 23px; color: var(--gold); margin-top: 2px; }
.tour-text { font-size: 15px; color: var(--cream); margin-top: 4px; line-height: 1.45; }
.tour-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.tour-row .btn { width: auto; padding: 10px 16px; font-size: 15px; }
body.light .tour-balloon { background: linear-gradient(180deg, #fdf6e6, #f2e7cd); }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }

/* Desktop de verdade (>=900px): sheet centralizado como cartão — não bottom-sheet de celular */
@media (min-width: 900px) {
  .overlay { align-items: center; padding: 28px; }
  .sheet { max-width: 640px; max-height: 90vh; overflow-y: auto; border-radius: 22px;
    border-bottom: 2px dashed var(--chalk-line); animation: sheet-pop .22s ease;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
  /* jogos ganham um cartão mais largo pro tabuleiro respirar */
  #overlay-domino .sheet, #overlay-purrinha .sheet { max-width: 760px; }
  .tour-balloon { max-width: 460px; }
}
@keyframes sheet-pop { from { transform: translateY(16px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===================== Truco ===================== */
.tru-score { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; margin-bottom: 6px; }
.tru-score b { font-family: var(--num); font-size: 26px; }
.tru-score b.us { color: var(--gold); }
.tru-var { text-transform: capitalize; color: var(--muted); font-size: 13px; }
.tru-stake { background: rgba(244,177,60,.14); color: var(--gold); border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.tru-vira { text-align: center; color: var(--muted); font-size: 14px; margin-bottom: 4px; }
.tru-table { min-height: 96px; background: linear-gradient(180deg, #14532d, #0f3d22); border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; flex-wrap: wrap;
  box-shadow: inset 0 0 30px rgba(0,0,0,.35); margin: 6px 0 10px; }
.tru-played { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tru-played small { color: #d9e8d9; font-size: 11px; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tru-played.me small { color: var(--gold); }
.tru-card { display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 46px; height: 64px; border-radius: 7px; background: #fdf9ee; color: #1c2314;
  box-shadow: 0 2px 6px rgba(0,0,0,.4); font-family: var(--num); }
.tru-card b { font-size: 20px; line-height: 1; }
.tru-card i { font-style: normal; font-size: 16px; line-height: 1.2; }
.tru-card.red { color: #c0392b; }
.tru-card.sm { width: 30px; height: 42px; }
.tru-card.sm b { font-size: 13px; } .tru-card.sm i { font-size: 11px; }
.tru-card.back { background: repeating-linear-gradient(45deg, #7a1e1e, #7a1e1e 4px, #5d1414 4px, #5d1414 8px); }
.tru-hand-lbl { text-align: center; color: var(--muted); font-size: 13px; margin-top: 2px; }
.tru-hand { display: flex; justify-content: center; gap: 10px; padding: 8px 0; }
.tru-hcard { background: none; border: 0; padding: 0; cursor: pointer; transition: transform .12s ease; }
.tru-hcard:not(.dim):active { transform: translateY(-6px) scale(1.04); }
.tru-hcard.dim { opacity: .55; }
.tru-actions { display: flex; flex-direction: column; gap: 8px; align-items: center; min-height: 30px; }
.tru-btns { display: flex; gap: 8px; width: 100%; }
.tru-btns .btn { flex: 1; }
.tru-raise { width: 100%; border-color: rgba(244,177,60,.6); color: var(--gold); font-size: 17px; }
.tru-run { color: var(--danger); border-color: rgba(232,115,95,.5); }
.tru-pend, .tru-onze { text-align: center; font-size: 15px; color: var(--cream); }
.tru-envinfo { text-align: center; font-size: 13px; color: var(--muted); }