/* Lobby: o salão antes de sentar. Mesmo mundo da mesa: latão, esmalte vinho, papel creme, letreiro do Bené.
   Tudo em em: o tamanho de letra da raiz do Lobby acompanha a altura da tela, do celular deitado ao monitor. */

#tela-lobby { overflow: hidden; }
.lobby {
  position: absolute; inset: 0; overflow: hidden;
  font-size: clamp(11px, calc(1.05vh + .55vw), 21px);
  display: grid; grid-template-rows: auto 1fr auto; gap: .6em;
  padding: max(.9em, env(safe-area-inset-top)) max(1.4em, env(safe-area-inset-right)) .9em max(1.4em, env(safe-area-inset-left));
}
/* o salão atrás: a foto da mesa, aberta, desfocada e com luz baixa nas bordas */
.lobby::before {
  content: ''; position: absolute; inset: -40px; z-index: -1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 52%, rgba(255, 190, 110, .16), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 40%, rgba(10, 2, 2, .85) 100%),
    url(../assets/cenario/mesa.webp) center 40% / cover no-repeat;
  filter: blur(6px) brightness(.5) saturate(1.1);
}
.lobby::after { /* fumaça leve e grão de filme */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: var(--ruido); mix-blend-mode: overlay;
}

/* ---------- topo: perfil, marca, carteira ---------- */
.lb-topo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 1em; }
.lb-perfil { display: flex; align-items: flex-start; gap: .9em; }
.lb-perfil .quadro { position: relative; --qw: 7.4em; flex: none; --min-plaq: 10px; }
.lb-dados { display: flex; flex-direction: column; align-items: flex-start; gap: .45em; padding-top: .5em; min-width: 0; }
.lb-classe {
  margin: 0; font: italic 700 1.2em / 1 var(--f-titulo); font-variation-settings: 'SOFT' 100, 'WONK' 1;
  color: var(--ambar); text-shadow: 0 2px 4px #000;
}
.lb-nivel { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .55em; row-gap: .15em; width: 14em; }
.lb-nivel-num { font: 700 1em var(--f-titulo); color: var(--creme); white-space: nowrap; text-shadow: 0 1px 3px #000; }
.lb-nivel-num b { font-size: 1.35em; color: var(--ouro-claro); }
.lb-barra, .tf-barra {
  position: relative; display: block; height: .7em; border-radius: 1em; overflow: hidden;
  background: #1a0b08; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8), 0 0 0 1.5px #8c6220, 0 1px 0 1.5px rgba(255, 220, 150, .25);
}
.lb-barra i, .tf-barra i {
  position: absolute; inset: 0 auto 0 0; border-radius: inherit;
  background: linear-gradient(180deg, #ffe7a6, #e5a83d 50%, #a8681a); box-shadow: 0 0 .6em rgba(255, 180, 70, .6);
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}
.lb-nivel small { grid-column: 2; font: 500 .78em var(--f-texto); color: #d9c49b; }
.lb-medalhas { display: flex; gap: .5em; flex-wrap: wrap; }
.medalha {
  display: inline-flex; align-items: center; gap: .35em; padding: .22em .7em .22em .28em; border-radius: 1em;
  font: 600 .88em / 1 var(--f-titulo); color: var(--creme); white-space: nowrap;
  background: linear-gradient(180deg, rgba(50, 18, 12, .9), rgba(20, 7, 5, .9)) padding-box, var(--latao) border-box;
  border: 1.5px solid transparent; box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.medalha svg { width: 1.5em; height: 1.5em; padding: .22em; border-radius: 50%; color: #4a1a08; background: radial-gradient(circle at 35% 30%, #fbe7ae, #c99a45 55%, #7c561b); }
.medalha b { color: var(--ouro-claro); }
#lb-trocar { font-size: .8em; }

.lb-marca { margin: 0; line-height: 0; }
.lb-marca img { height: 9.2em; width: auto; filter: drop-shadow(0 .5em 1em rgba(0, 0, 0, .75)); }

/* carteira: contador mecânico de latão, com janelas de rolos numerados */
.contador {
  justify-self: end; display: grid; justify-items: center; gap: .25em; padding: .55em .9em .5em;
  border-radius: .7em; --brilho: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 40%) padding-box,
    linear-gradient(180deg, #5a1520, #2a0a10) padding-box,
    var(--latao) border-box;
  border: .22em solid transparent;
  box-shadow: 0 .5em 1.4em rgba(0, 0, 0, .65), inset 0 -.3em .6em rgba(0, 0, 0, .4);
}
.contador-rotulo, .contador-sub { font: italic 700 .85em / 1 var(--f-titulo); font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--ouro-claro); }
.contador-sub { font: 500 .78em var(--f-texto); color: #d9c49b; font-style: normal; }
.contador-janela { display: flex; align-items: center; gap: .45em; }
.moeda-latao {
  width: 2.2em; height: 2.2em; border-radius: 50%; flex: none;
  background:
    radial-gradient(circle, transparent 52%, rgba(74, 48, 16, .55) 54% 57%, transparent 59%),
    radial-gradient(circle at 35% 30%, #fff1c2, #e2b860 38%, #a9781f 70%, #6e4a14);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .6), inset 0 -2px 3px rgba(60, 30, 0, .45);
}
.digitos { display: flex; align-items: flex-end; }
.digitos .dig {
  display: inline-grid; place-items: center; width: 1.05em; height: 1.45em; margin: 0 .05em;
  font: 800 1.9em / 1 var(--f-titulo); font-variation-settings: 'opsz' 48; font-variant-numeric: tabular-nums;
  color: #fff3d6; border-radius: .12em;
  background: linear-gradient(180deg, #050202 0%, #2b1410 22%, #3a1c16 50%, #2b1410 78%, #050202 100%);
  box-shadow: inset 0 0 0 1px rgba(201, 161, 74, .55), inset 0 .1em .2em rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 230, 170, .2);
  text-shadow: 0 0 calc(var(--brilho) * .5em) rgba(255, 200, 100, .95);
}
.digitos .sep { font: 800 1.5em / 1 var(--f-titulo); color: var(--ouro-claro); margin: 0 .02em; }
.contador.gastando .dig { color: #ffd2c4; }
.moeda-voo {
  position: fixed; left: 0; top: 0; z-index: 200; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff1c2, #e2b860 38%, #a9781f 70%, #6e4a14);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .6), 0 0 12px rgba(255, 200, 100, .6);
}

/* ---------- meio: as salas ---------- */
.lb-meio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9em; min-height: 0; }
.lb-titulo {
  margin: 0; font: italic 900 2.1em / 1 var(--f-titulo); font-variation-settings: 'opsz' 96, 'SOFT' 100, 'WONK' 1;
  color: #fff0cf; text-shadow: 0 0 .35em rgba(255, 180, 80, .55), 0 3px 0 #3d0912;
}
.salas { display: flex; gap: 1.4em; justify-content: center; align-items: stretch; }
.sala {
  --e1: #3b8a5f; --e2: #102a1c;
  position: relative; width: 11.2em; padding: 3.6em .9em 1em; border-radius: .9em;
  display: flex; flex-direction: column; align-items: center; gap: .35em;
  background:
    radial-gradient(circle at 1em 1em, #f6dc96 0 .16em, #6b4a17 .19em .24em, transparent .26em),
    radial-gradient(circle at calc(100% - 1em) 1em, #f6dc96 0 .16em, #6b4a17 .19em .24em, transparent .26em),
    radial-gradient(circle at 1em calc(100% - 1em), #f6dc96 0 .16em, #6b4a17 .19em .24em, transparent .26em),
    radial-gradient(circle at calc(100% - 1em) calc(100% - 1em), #f6dc96 0 .16em, #6b4a17 .19em .24em, transparent .26em),
    linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 30%),
    radial-gradient(120% 80% at 50% 0%, var(--e1), var(--e2)) padding-box,
    var(--latao) border-box;
  border: .26em solid transparent;
  box-shadow: 0 .9em 1.8em rgba(0, 0, 0, .65), inset 0 0 0 .14em rgba(0, 0, 0, .35), inset 0 -.6em 1em rgba(0, 0, 0, .35);
  margin-top: 2.2em; color: var(--creme); text-align: center;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), filter .2s;
}
.sala-salao { --e1: #a3263a; --e2: #3d0912; }
.sala-cassino { --e1: #2c4a7a; --e2: #0e1830; }
.sala-cobertura { --e1: #6a3f8a; --e2: #1f0f2c; }
.sala.aberta:hover, .sala.aberta:focus-visible { transform: translateY(-.4em) rotate(-.6deg); filter: brightness(1.12); }
.sala-ficha { position: absolute; left: 50%; top: -2.4em; width: 5.4em; transform: translateX(-50%); filter: drop-shadow(0 .4em .5em rgba(0, 0, 0, .7)); }
.sala-ficha img { display: block; width: 100%; height: auto; }
.sala.aberta:hover .sala-ficha { animation: gira-ficha .8s cubic-bezier(.2, .8, .2, 1); }
@keyframes gira-ficha { from { transform: translateX(-50%) rotateY(0); } to { transform: translateX(-50%) rotateY(360deg); } }
.sala-nome {
  font: italic 900 1.9em / 1 var(--f-titulo); font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 1;
  color: #fff2d8; text-shadow: 0 0 .3em rgba(255, 200, 120, .4), 0 2px 0 rgba(0, 0, 0, .55); margin-bottom: .2em;
}
.sala-linha {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: .5em; padding: .22em .1em;
  border-bottom: 1px dashed rgba(242, 213, 140, .3);
}
.sala-linha small { font: 500 .85em var(--f-texto); color: #e9d6ad; }
.sala-linha b { font: 700 1.15em var(--f-titulo); font-variant-numeric: tabular-nums; color: var(--ouro-claro); }
.sala-sentar, .sala-falta {
  margin-top: .55em; width: 100%; padding: .45em .4em; border-radius: .4em;
  font: 750 1.05em / 1.1 var(--f-titulo); font-variation-settings: 'opsz' 24;
}
.sala-sentar { color: #2e1a05; background: var(--latao-liso); box-shadow: 0 .2em .5em rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5); }
.sala-falta { display: inline-flex; align-items: center; justify-content: center; gap: .3em; color: #f1e4c6; background: rgba(0, 0, 0, .4); font-size: .9em; font-style: italic; }
.sala-falta svg { width: 1.1em; height: 1.1em; color: var(--ouro-claro); }
.sala.trancada, .sala.curta { cursor: not-allowed; }
.sala.trancada { filter: saturate(.35) brightness(.62); }
.sala.curta { filter: saturate(.6) brightness(.8); }
.sala-tranca {
  position: absolute; right: -.7em; top: 1.2em; width: 3em; height: 3em; padding: .55em; border-radius: 50%; transform: rotate(12deg);
  color: #4a3010; background: radial-gradient(circle at 35% 30%, #fbe7ae, #c99a45 55%, #7c561b); box-shadow: 0 .3em .6em rgba(0, 0, 0, .7);
}
.sala-tranca svg { width: 100%; height: 100%; display: block; }

/* ---------- rodapé: Bené e a doca ---------- */
.lb-rodape { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.lb-bene { display: flex; align-items: center; gap: 1.2em; min-width: 0; flex: 1; }
.lb-bene .quadro { position: relative; --qw: 6.4em; flex: none; --min-plaq: 10px; }
.letreiro-lobby { font-size: 1.05em; max-width: 19em; opacity: 0; }
.lb-dock { display: flex; gap: .5em; flex-wrap: nowrap; }
.doca {
  position: relative; width: 6.6em; display: flex; flex-direction: column; align-items: center; gap: .3em; padding: .55em .3em .5em; border-radius: .7em;
  font: 680 .86em / 1.05 var(--f-titulo); font-variation-settings: 'opsz' 14; color: var(--creme); text-align: center;
  background: linear-gradient(180deg, rgba(58, 26, 20, .95), rgba(29, 11, 8, .95)) padding-box, var(--latao) border-box;
  border: .14em solid transparent; box-shadow: 0 .3em .8em rgba(0, 0, 0, .6);
  transition: transform .15s, filter .15s;
}
.doca svg {
  width: 2.6em; height: 2.6em; padding: .45em; border-radius: 50%; color: #3a2208;
  background: radial-gradient(circle at 35% 30%, #fbe7ae, #c99a45 55%, #7c561b); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .5);
}
.doca:hover { transform: translateY(-.2em); filter: brightness(1.15); }
.doca-livro { background: radial-gradient(120% 120% at 50% 0%, #8a1d30, #3d0912) padding-box, var(--latao) border-box; }
.pingo-doca {
  position: absolute; right: .3em; top: .3em; min-width: 1.3em; height: 1.3em; padding: 0 .3em; border-radius: 1em;
  display: grid; place-items: center; font: 700 .85em var(--f-texto); font-style: normal; color: #fff;
  background: var(--rubi); box-shadow: 0 0 0 2px #2a0a10, 0 0 .6em rgba(255, 60, 60, .8);
  animation: pulsa 1.4s ease-in-out infinite;
}
@keyframes pulsa { 50% { transform: scale(1.18); } }

/* ---------- painel (bônus, tarefas, loja, ganhar e perder) ---------- */
.painel {
  width: min(64em, 94vw); max-width: none; max-height: 92vh; padding: 0; border: 0; background: none; color: var(--tinta);
  font-size: clamp(11px, calc(.9vh + .5vw), 18px); overflow: visible;
}
.painel::backdrop { background: rgba(10, 3, 3, .72); backdrop-filter: blur(3px); }
.painel-moldura {
  display: flex; flex-direction: column; max-height: 92vh; border-radius: 1em; padding: .9em 1.1em 1.1em;
  background: radial-gradient(120% 90% at 50% 0%, #5a1520, #1e070a 70%) padding-box, var(--latao) border-box;
  border: .3em solid transparent; box-shadow: 0 2em 4em rgba(0, 0, 0, .8);
}
.painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: .7em; }
.painel-topo h2 { margin: 0; font: italic 900 2em / 1 var(--f-titulo); font-variation-settings: 'opsz' 96, 'SOFT' 100, 'WONK' 1; color: var(--ouro-claro); text-shadow: 0 2px 0 #3d0912, 0 0 .4em rgba(255, 180, 80, .35); }
.painel-papel {
  overflow-y: auto; overscroll-behavior: contain; padding: 1.1em 1.4em 1.3em; border-radius: .35em;
  background: var(--ruido), radial-gradient(ellipse at 40% 20%, #f8eed6, var(--papel) 60%, #e3cfa3);
  box-shadow: inset 0 0 0 1px rgba(90, 60, 20, .35), inset 0 0 2em rgba(120, 80, 30, .25);
  font: 400 1em / 1.4 var(--f-texto);
}
.pn-intro { margin: 0 0 1em; max-width: 60ch; color: #3a2a1a; }
.pn-intro b { color: var(--vinho); }
.pn-sub { margin: 1em 0 .5em; font: italic 800 1.3em / 1.1 var(--f-titulo); font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--vinho); }
.pn-sub small { font: 500 .7em var(--f-texto); color: #6b4a17; font-style: normal; margin-left: .4em; }
.pn-acao { display: flex; justify-content: center; margin-top: 1.2em; }
.painel .placa { width: auto; }
.aviso-legal { margin: 1em 0 0; padding: .6em .8em; border-left: 3px solid var(--vinho); background: rgba(110, 20, 35, .07); font-size: .9em; color: #4a2a1a; }

/* selos de carimbo no papel */
.painel .selo, .livro .selo { display: inline-block; mix-blend-mode: multiply; background: none; font-size: .85em; }
.selo-pego { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(-14deg); font-size: 1.1em !important; }
.selo-recebido { color: #24563b !important; transform: rotate(-6deg); }
.selo-breve { color: #6b4a17 !important; transform: rotate(-4deg); font-size: .7em !important; }

/* bônus: 7 fichas */
.dias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr) 1.35fr; gap: .6em; align-items: end; }
.dia {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .3em; padding: .6em .3em .7em; border-radius: .6em;
  background: rgba(110, 70, 20, .08); box-shadow: inset 0 0 0 1px rgba(110, 70, 20, .2);
}
.dia-n { font: 700 .9em var(--f-titulo); color: #6b4a17; }
.dia-ficha { position: relative; width: 4.2em; aspect-ratio: 1; display: grid; place-items: center; filter: drop-shadow(0 .25em .3em rgba(60, 30, 0, .45)); }
.dia-ficha img { width: 100%; height: auto; display: block; }
.dia-v { font: 800 1.35em / 1 var(--f-titulo); font-variant-numeric: tabular-nums; color: var(--tinta); }
.dia small { font-size: .78em; line-height: 1.15; text-align: center; color: var(--vinho); font-weight: 700; }
.dia.setimo .dia-ficha { width: 5.6em; }
.dia-extra {
  position: absolute; right: -.3em; top: -.2em; width: 1.8em; height: 1.8em; border-radius: 50%; display: grid; place-items: center;
  font: 800 .9em var(--f-titulo); color: #fff2d8; background: var(--vinho); box-shadow: 0 0 0 2px var(--ouro);
}
.dia.pego { opacity: .62; }
.dia.pego .dia-ficha { filter: grayscale(.5) drop-shadow(0 .2em .2em rgba(60, 30, 0, .3)); }
.dia.hoje { background: rgba(240, 168, 60, .2); box-shadow: inset 0 0 0 2px var(--ouro), 0 0 1.2em rgba(240, 168, 60, .45); opacity: 1; }
.dia.hoje .dia-n { color: var(--vinho); font-style: italic; }
.dia.futuro { opacity: .8; }
.nota-quebra { margin: 0 0 .9em; padding: .5em .8em; background: rgba(168, 22, 31, .1); border-left: 3px solid var(--carimbo); font-weight: 700; color: var(--carimbo); }
.bt-resgatar { font-size: 1.25em; padding-inline: 2.2em; }
.volte { margin: 0; font: italic 600 1.05em var(--f-titulo); color: #6b4a17; text-align: center; }

/* abas de papel (tarefas) */
.abas-papel { display: flex; gap: .3em; margin: -.4em 0 0; border-bottom: 2px solid rgba(110, 70, 20, .35); }
.aba-papel {
  padding: .45em 1.1em .35em; border: 0; border-radius: .4em .4em 0 0; margin-bottom: -2px;
  font: 700 1em var(--f-titulo); color: #6b4a17; background: rgba(110, 70, 20, .12); border: 2px solid transparent;
}
.aba-papel[aria-selected="true"] { color: var(--vinho); background: #f8eed6; border-color: rgba(110, 70, 20, .35); border-bottom-color: #f8eed6; }
.aba-corpo { padding-top: 1em; }
.tarefas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5em; }
.tarefa {
  display: grid; grid-template-columns: 1fr 6em 7em; align-items: center; gap: 1em; padding: .65em .9em; border-radius: .4em;
  background: rgba(255, 250, 235, .55); box-shadow: 0 1px 0 rgba(110, 70, 20, .25), inset 0 0 0 1px rgba(110, 70, 20, .15);
}
.tf-texto { display: flex; flex-direction: column; gap: .4em; font: 600 1.05em / 1.2 var(--f-texto); }
.tf-barra { height: .6em; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 1px #8c6220; background: #3a2418; }
.tf-premio { display: inline-flex; align-items: center; gap: .3em; font: 800 1.15em var(--f-titulo); font-variant-numeric: tabular-nums; color: var(--tinta); }
.tf-premio svg, .pacote-moedas svg, .bt-item svg { width: 1.2em; height: 1.2em; color: #a9781f; flex: none; }
.tf-acao { display: flex; justify-content: flex-end; }
.tf-falta { font: 700 1em var(--f-titulo); color: #6b4a17; font-variant-numeric: tabular-nums; }
.bt-receber { font-size: .95em; padding: .45em 1.1em; animation: chama 1.6s ease-in-out infinite; }
.tarefa.completa:not(.recebida) { background: rgba(240, 200, 100, .3); box-shadow: inset 0 0 0 2px var(--ouro); }
.tarefa.recebida { opacity: .7; }

/* convites: bilhete de entrada */
.bilhete {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .3em 1.2em; padding: 1em 1.4em;
  background: #fbf3df; border: 2px dashed #a9781f; border-radius: .5em;
  box-shadow: 0 .3em .8em rgba(60, 30, 0, .2);
}
.bilhete::before, .bilhete::after { content: ''; position: absolute; top: 50%; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--papel); transform: translateY(-50%); box-shadow: inset 0 0 0 2px #a9781f; }
.bilhete::before { left: -.7em; } .bilhete::after { right: -.7em; }
.bilhete-rotulo { grid-column: 1; font: italic 600 .9em var(--f-titulo); color: #6b4a17; }
.bilhete-codigo { grid-column: 1; font: 900 1.7em / 1 var(--f-titulo); letter-spacing: .06em; color: var(--vinho); }
.bilhete-texto { grid-column: 2; grid-row: 1 / 3; margin: 0; font-style: italic; color: #3a2a1a; }
.bilhete .placa { grid-column: 3; grid-row: 1 / 3; }
.amigos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35em; }
.amigos li { display: grid; grid-template-columns: 11em 1fr 6em 5em; align-items: center; gap: .8em; padding: .4em .7em; border-radius: .3em; background: rgba(255, 250, 235, .55); }
.amigos li.vazio { display: block; font-style: italic; color: #6b4a17; }
.am-nome { font: 700 1em var(--f-titulo); }
.am-maos { font-variant-numeric: tabular-nums; color: #6b4a17; font-size: .9em; }
.am-espera { font-style: italic; color: #6b4a17; font-size: .9em; }
.simulacao { display: flex; align-items: center; gap: .8em; margin-top: 1em; padding: .6em .8em; border: 1px dashed #a9781f; border-radius: .4em; font-size: .88em; color: #6b4a17; font-style: italic; }
.simulacao .btn-mini { font-style: normal; flex: none; }

/* loja */
.pacotes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .8em; }
.pacote {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .25em; padding: .8em .6em .8em; border-radius: .6em;
  background: rgba(255, 250, 235, .6); box-shadow: inset 0 0 0 1px rgba(110, 70, 20, .25), 0 .2em .5em rgba(60, 30, 0, .15);
}
.pacote.oferta { background: rgba(240, 200, 100, .3); box-shadow: inset 0 0 0 2px var(--ouro); }
.fita {
  position: absolute; top: .6em; left: -.4em; padding: .15em .6em; font: 700 .75em var(--f-titulo); color: #fff2d8;
  background: var(--vinho); transform: rotate(-8deg); box-shadow: 0 .15em .3em rgba(0, 0, 0, .4);
}
.pacote-desenho { width: 100%; max-width: 8em; aspect-ratio: 4 / 3; }
.pacote-desenho svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 .3em .3em rgba(60, 30, 0, .35)); }
.pacote-nome { font: italic 800 1.15em var(--f-titulo); font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--vinho); }
.pacote-moedas { display: inline-flex; align-items: center; gap: .25em; font: 800 1.2em var(--f-titulo); font-variant-numeric: tabular-nums; }
.pacote-bonus { color: #6b4a17; font-weight: 700; }
.bt-preco { margin-top: .3em; font-size: 1em; padding: .45em 1em; }
.loja-duas { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.6em; }
.itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5em; }
.item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8em; padding: .55em .8em; border-radius: .4em; background: rgba(255, 250, 235, .55); box-shadow: inset 0 0 0 1px rgba(110, 70, 20, .2); }
.item-ic svg { width: 2.6em; height: 2.6em; padding: .45em; border-radius: 50%; color: #3a2208; background: radial-gradient(circle at 35% 30%, #fbe7ae, #c99a45 55%, #7c561b); display: block; }
.item-eAgora .item-ic svg { color: #fff2d8; background: radial-gradient(circle at 35% 30%, #ef3150, #9c0c22 60%, #4b0410); }
.item-txt { display: flex; flex-direction: column; gap: .1em; }
.item-txt b { font: 700 1.05em var(--f-titulo); }
.item-txt small { color: #4a3a2a; line-height: 1.25; }
.item-tem b { color: var(--vinho); }
.bt-item { display: inline-flex; align-items: center; gap: .3em; font-size: .95em; padding: .45em .9em; white-space: nowrap; }
.itens.breve .item { opacity: .75; }

/* ganhar e perder */
.ganha-perde { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6em; }
.gp-col h3 { margin: 0 0 .5em; font: italic 900 1.7em / 1 var(--f-titulo); font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 1; }
.gp-ganha h3 { color: #24563b; } .gp-perde h3 { color: var(--carimbo); }
.gp-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4em; }
.gp-col li { display: grid; grid-template-columns: auto 1fr auto; gap: .7em; align-items: center; padding: .45em .6em; border-radius: .35em; background: rgba(255, 250, 235, .55); }
.gp-ic svg { width: 2.3em; height: 2.3em; padding: .4em; border-radius: 50%; display: block; color: #fff2d8; }
.gp-ganha .gp-ic svg { background: radial-gradient(circle at 35% 30%, #5cb582, #24563b 60%, #102a1c); }
.gp-perde .gp-ic svg { background: radial-gradient(circle at 35% 30%, #d2455a, #8a1020 60%, #3d0912); }
.gp-txt { display: flex; flex-direction: column; }
.gp-txt b { font: 700 1.02em var(--f-titulo); }
.gp-txt small { color: #4a3a2a; line-height: 1.25; }
.gp-num { font: 800 1em var(--f-titulo); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.gp-ganha .gp-num { color: #24563b; } .gp-perde .gp-num { color: var(--carimbo); }

/* diálogo de compra simulada */
.aviso-prototipo { padding: .6em .8em; border-radius: .3em; background: rgba(242, 213, 140, .15); border: 1px solid var(--ouro); }
.letras-miudas-p { font-size: .88em; color: #e2cfa8; }

/* mesa: botão Levantar, Livro e aviso de tarefa */
.tarefa-aviso {
  position: absolute; right: .9em; top: 3.4em; margin: 0; max-width: 20em; padding: .5em .9em .55em 1.1em; display: flex; flex-direction: column; gap: .1em;
  font: 400 .88em / 1.25 var(--f-texto); color: var(--tinta); background: var(--papel) var(--ruido); border-radius: .2em .5em .5em .2em;
  box-shadow: 0 .3em .8em rgba(0, 0, 0, .6); transform: rotate(-1deg); pointer-events: none;
}
.tarefa-aviso::before { content: ''; position: absolute; left: .35em; top: .5em; bottom: .5em; width: 3px; border-radius: 2px; background: var(--ouro); }
.tarefa-aviso b { font: 700 1em var(--f-titulo); color: var(--vinho); }
.fim-carteira { margin: 0 0 1em; font-style: italic; color: var(--ouro-claro); }
#truques .truque[hidden] { display: none !important; }
.cargas small { font: italic 600 1em var(--f-texto); color: #d9c49b; }

/* ---------- telas baixas: celular deitado ---------- */
@media (max-height: 520px) {
  .lobby { gap: .3em; padding-block: .5em; }
  .lb-perfil .quadro { --qw: 5.6em; }
  .lb-marca img { height: 6em; }
  #lb-trocar { display: none; }
  .lb-nivel { width: 11em; }
  .lb-titulo { font-size: 1.5em; }
  .lb-meio { gap: .3em; }
  .salas { gap: .8em; }
  .sala { width: 9.4em; padding: 2.7em .6em .6em; margin-top: 1.6em; }
  .sala-ficha { width: 4em; top: -1.8em; }
  .sala-nome { font-size: 1.5em; }
  .lb-bene .quadro { --qw: 4.4em; }
  .letreiro-lobby { font-size: .95em; max-width: 14em; }
  .doca { width: 5.6em; font-size: .78em; padding: .35em .2em; }
  .doca svg { width: 2.2em; height: 2.2em; }
  .dias { grid-template-columns: repeat(7, 1fr); }
  .pacotes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4em; }
  .tarefa { grid-template-columns: 1fr 5em 6em; }
}
@media (max-width: 760px) {
  .ganha-perde, .loja-duas { grid-template-columns: 1fr; }
  .pacotes { grid-template-columns: repeat(3, 1fr); }
  .bilhete { grid-template-columns: 1fr; }
  .bilhete-texto, .bilhete .placa { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pingo-doca, .bt-receber { animation: none; }
  .sala.aberta:hover .sala-ficha { animation: none; }
}

/* ---------- ajustes da 1ª rodada de autocrítica ---------- */
.lb-marca { font-size: 1em; }
.lb-marca img { height: 10.5em; }
.lb-nome {
  margin: 0; font: italic 900 1.9em / 1 var(--f-titulo); font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 1;
  color: #fff0cf; text-shadow: 0 0 .3em rgba(255, 180, 80, .45), 0 2px 0 #3d0912; white-space: nowrap;
}
.lb-classe { font-size: 1em; }
.painel[data-painel="tarefas"] { width: min(54em, 94vw); }
.bt-preco, .bt-item { padding-inline: 1.5em !important; }
.pacote .bt-preco { margin-top: auto; }
.painel-topo { flex-wrap: nowrap; }
.painel-topo h2 { flex: none; }
.painel-bene { flex: 1; min-width: 0; display: flex; align-items: center; gap: .9em; padding-left: 1em; }
.camafeu { flex: none; width: 3.4em; height: 3.4em; border-radius: 50%; padding: .2em; background: var(--latao); box-shadow: 0 .2em .5em rgba(0, 0, 0, .6); }
.camafeu img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 14%; display: block; }
.letreiro-painel { font-size: .95em; max-width: 26em; opacity: 0; padding: .4em .9em .45em; }
.contador-mini {
  flex: none; display: inline-flex; align-items: center; gap: .35em; padding: .25em .5em; border-radius: .45em;
  background: linear-gradient(180deg, #5a1520, #2a0a10) padding-box, var(--latao) border-box; border: .14em solid transparent;
}
.contador-mini .moeda-latao { width: 1.5em; height: 1.5em; }
.contador-mini .digitos .dig { font-size: 1.15em; }
.contador-mini .digitos .sep { font-size: 1em; }
@media (max-height: 520px) {
  .lb-marca img { height: 5.6em; }
  .lb-nome { font-size: 1.35em; }
  .lb-perfil .quadro { --qw: 5em; }
  .camafeu { width: 2.6em; height: 2.6em; }
  .painel-topo h2 { font-size: 1.5em; }
}

/* ---------- medalhão do jogador no cabeçalho e PT | EN ---------- */
.lb-perfil { gap: 1.7em; }
.lb-retrato-caixa { position: relative; flex: none; }
.medalhao-lobby { position: absolute; right: -1.25em; bottom: 1.7em; width: 3.2em; z-index: 2; cursor: pointer; transition: filter .15s, transform .15s; }
.medalhao-lobby:hover { filter: brightness(1.15); transform: scale(1.06); }
.medalhao-lobby .medalhao-iniciais { font-size: 1.3em; }
.lb-direita { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: .55em; }
.idioma {
  display: inline-flex; padding: .16em; border-radius: .5em;
  background: var(--latao-liso); box-shadow: 0 2px 6px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.idioma button {
  border: 0; padding: .32em .7em .3em; border-radius: .36em; background: transparent;
  font: 800 .78em / 1 var(--f-titulo); letter-spacing: .08em; color: #3a2208; text-shadow: 0 1px 0 rgba(255, 238, 190, .6);
}
.idioma button + button { margin-left: .12em; }
.idioma button[aria-pressed="true"] { background: linear-gradient(180deg, #6e1423, #2a0a10); color: var(--ouro-claro); text-shadow: 0 1px 0 #000; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7); }
.idioma button:not([aria-pressed="true"]):hover { background: rgba(255, 240, 200, .35); }
@media (max-height: 520px) {
  .lb-perfil { gap: 1.3em; }
  .medalhao-lobby { width: 2.5em; right: -1em; bottom: 1.2em; }
  .medalhao-lobby .medalhao-iniciais { font-size: 1em; }
}

/* ---------- Sua foto ---------- */
.dlg-foto { max-width: min(36em, 94vw); }
.foto-corpo { display: flex; flex-wrap: wrap; align-items: center; gap: 1.3em; }
.foto-previa { position: relative; flex: none; width: 9.5em; aspect-ratio: 1; padding: .32em; border-radius: 50%; background: var(--latao); box-shadow: 0 .4em 1em rgba(0, 0, 0, .6); }
#foto-canvas { display: block; width: 100%; height: 100%; border-radius: 50%; touch-action: none; background: radial-gradient(circle at 45% 32%, #8a1a2c, #3d0912 70%, #22060b); }
#foto-canvas.arrastavel { cursor: grab; }
#foto-canvas.arrastavel:active { cursor: grabbing; }
.foto-previa .medalhao-iniciais { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.4em; pointer-events: none; }
.foto-campos { flex: 1; min-width: 14em; display: flex; flex-direction: column; gap: .5em; }
.foto-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.foto-arquivo { display: inline-block; width: auto; font-size: .92em; padding-inline: 1.5em; cursor: pointer; }
.foto-arquivo input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.foto-arquivo:focus-within { outline: 3px solid var(--ouro-claro); outline-offset: 3px; }
.foto-dica { margin: 0; font-style: italic; font-size: .9em; color: #e2cfa8; }
.foto-rotulo { font: 700 .95em var(--f-titulo); color: var(--ouro-claro); margin-top: .3em; }
#foto-apelido { padding: .55em .7em; border-radius: .3em; border: 1.5px solid var(--ouro); background: #fbf3df; color: var(--tinta); font: 1em var(--f-texto); }
#foto-aviso:empty { display: none; }