:root {
  --berinjela: #2b0f1c;
  --bordo: #5e1631;
  --bordo2: #7a2140;
  --rosa: #e2477e;
  --acafrao: #f4a12c;
  --ouro: #ffd97a;
  --turquesa: #17a39d;
  --marfim: #fbeedb;
  --tinta: #fbeedb;
  --tinta2: #e9c9b6;
  --fundo: var(--berinjela);
  --painel: rgba(94, 22, 49, .78);
  --painel2: rgba(43, 15, 28, .82);
  --linha: rgba(255, 217, 122, .35);
  --raio: 14px;
  --titulo: 'Rozha One', Georgia, serif;
  --apoio: 'Yatra One', 'Rozha One', Georgia, serif;
  --ui: 'Mukta', system-ui, sans-serif;
  --carta-l: min(17.4vw, 86px);
  --sombra: 0 6px 18px rgba(0, 0, 0, .45);
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.35;
  overflow-x: hidden;
  /* treliça de janela de palácio (jali) */
  background-image:
    radial-gradient(circle at 50% 50%, transparent 9px, rgba(226, 71, 126, .10) 10px, transparent 11px),
    radial-gradient(circle at 0 0, transparent 9px, rgba(244, 161, 44, .08) 10px, transparent 11px),
    linear-gradient(180deg, #3a1226 0%, #2b0f1c 55%, #1f0a14 100%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
  background-attachment: fixed;
}
body.com-fundo { background-image: linear-gradient(rgba(43, 15, 28, .62), rgba(31, 10, 20, .86)), var(--fundo-img); background-size: cover; background-position: center; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--ouro); }
h1, h2, h3 { font-family: var(--titulo); font-weight: 400; margin: 0 0 .4em; letter-spacing: .3px; }
.esconder { display: none !important; }
.app { min-height: 100dvh; display: flex; flex-direction: column; }

/* botões */
.bt {
  border: 2px solid var(--ouro); background: linear-gradient(180deg, #f7b445, #e08a12);
  color: #3a1406; font-weight: 800; border-radius: 999px; padding: .55em 1.2em; cursor: pointer;
  box-shadow: 0 3px 0 #9a5a07, var(--sombra); transition: transform .08s, filter .15s; min-height: 44px;
}
.bt:active { transform: translateY(2px); box-shadow: 0 1px 0 #9a5a07; }
.bt:disabled { filter: grayscale(.7) brightness(.8); cursor: not-allowed; opacity: .7; }
.bt.rosa { background: linear-gradient(180deg, #ef6b9a, #c92e64); color: #fff; box-shadow: 0 3px 0 #7d1638, var(--sombra); }
.bt.turq { background: linear-gradient(180deg, #2fc4bd, #12817c); color: #fff; box-shadow: 0 3px 0 #0b5653, var(--sombra); }
.bt.leve { background: rgba(255, 255, 255, .06); color: var(--tinta); border-color: var(--linha); box-shadow: none; font-weight: 600; }
.bt.peq { padding: .3em .8em; min-height: 34px; font-size: .9em; }
.bt.cheio { width: 100%; }
.icone { background: none; border: 1px solid var(--linha); color: var(--tinta); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.1em; display: inline-grid; place-items: center; }

/* entrada */
.entrada { flex: 1; display: grid; place-items: center; padding: 24px 16px calc(24px + var(--seguro-baixo)); }
.cartao {
  width: min(440px, 100%); background: var(--painel); border: 2px solid var(--linha); border-radius: 22px;
  padding: 22px 20px; box-shadow: var(--sombra); position: relative; backdrop-filter: blur(4px);
}
.arco { border-radius: 160px 160px 22px 22px; padding-top: 36px; }
.logo { text-align: center; margin-bottom: 8px; }
.logo img { max-width: 100%; max-height: 150px; }
.logo .nome { font-family: var(--titulo); font-size: clamp(44px, 13vw, 64px); color: var(--ouro); text-shadow: 0 3px 0 var(--bordo), 0 0 22px rgba(244, 161, 44, .5); line-height: 1; }
.logo .sub { font-family: var(--apoio); color: var(--rosa); font-size: 1.15em; margin-top: 2px; }
.campo { display: block; margin: 10px 0; }
.campo span { display: block; font-size: .85em; color: var(--tinta2); margin-bottom: 3px; }
.campo input, .campo select, textarea {
  width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--linha); background: rgba(0, 0, 0, .3);
  outline: none; min-height: 44px;
}
.campo input:focus { border-color: var(--acafrao); }
.abas { display: flex; gap: 6px; margin: 8px 0 4px; }
.abas button { flex: 1; background: transparent; border: none; border-bottom: 2px solid transparent; padding: 8px; cursor: pointer; color: var(--tinta2); font-weight: 700; }
.abas button.ativa { border-color: var(--acafrao); color: var(--ouro); }
.linha-bts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.linha-bts > * { flex: 1 1 140px; }
.erro-msg { color: #ffb3c6; min-height: 1.3em; font-size: .92em; }
.rodape { text-align: center; font-size: .78em; color: var(--tinta2); margin-top: 16px; opacity: .85; }

/* lanternas do lobby */
.lanternas { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.lanterna { position: absolute; top: -20px; width: 22px; height: 30px; border-radius: 45% 45% 40% 40%; background: radial-gradient(circle at 50% 60%, #ffe39a, #f4a12c 55%, #c8243f); box-shadow: 0 0 22px 6px rgba(244, 161, 44, .45); animation: balanca 4s ease-in-out infinite; transform-origin: 50% -60px; }
.lanterna::before { content: ''; position: absolute; left: 50%; top: -60px; height: 60px; border-left: 1px solid rgba(255, 217, 122, .4); }
.petala { position: absolute; top: -20px; width: 10px; height: 14px; background: var(--rosa); border-radius: 80% 0 80% 0; opacity: .7; animation: cai linear infinite; }
@keyframes balanca { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes cai { to { transform: translateY(110vh) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .lanterna, .petala { animation: none !important; } .petala { display: none; } * { transition: none !important; } }

/* barra do topo */
.topo { display: flex; align-items: center; gap: 8px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); background: #2b0f1c; border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 20; }
.topo .tt { font-family: var(--titulo); color: var(--ouro); font-size: 1.35em; line-height: 1; }
.topo .info { flex: 1; min-width: 0; font-size: .85em; color: var(--tinta2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selos { display: inline-flex; gap: 3px; vertical-align: middle; }
.selo { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ouro); background: rgba(255, 255, 255, .08); display: inline-block; }
.selo.ganho { background: radial-gradient(circle at 40% 35%, #ffe7a6, #e2477e 70%); box-shadow: 0 0 8px rgba(226, 71, 126, .7); }

/* lobby */
.lobby { flex: 1; width: min(980px, 100%); margin: 0 auto; padding: 14px 16px calc(16px + var(--seguro-baixo)); display: grid; gap: 14px; grid-template-columns: 1fr; position: relative; z-index: 1; }
@media (min-width: 860px) { .lobby { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.painel { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; box-shadow: var(--sombra); }
.painel h2 { font-size: 1.3em; color: var(--ouro); }
.mesa-lobby { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.cadeira { background: var(--painel2); border: 2px dashed var(--linha); border-radius: 16px; padding: 12px 8px; text-align: center; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.cadeira.ocupada { border-style: solid; }
.cadeira .nm { font-weight: 800; word-break: break-word; }
.cadeira .st { font-size: .8em; color: var(--tinta2); }
.vs { font-family: var(--titulo); color: var(--rosa); font-size: 1.6em; }
.avatar { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ouro); background: radial-gradient(circle, #7a2140, #3a1226); display: grid; place-items: center; font-size: 30px; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.peq { width: 34px; height: 34px; font-size: 19px; }
.ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #4ad66d; margin-right: 4px; }
.ponto.off { background: #8a7a80; }
.lista-fila { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-fila li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(0, 0, 0, .2); border-radius: 10px; }
.lista-fila li .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.etiqueta { font-size: .72em; padding: 1px 7px; border-radius: 99px; background: var(--turquesa); color: #fff; font-weight: 700; }
.etiqueta.gm { background: var(--rosa); }
.ferramentas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.config-linha { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.config-linha label { flex: 1 1 120px; font-size: .85em; color: var(--tinta2); }
.config-linha select { width: 100%; margin-top: 2px; padding: 8px; border-radius: 8px; background: rgba(0, 0, 0, .35); border: 1px solid var(--linha); min-height: 40px; }
.contagem { text-align: center; margin-top: 10px; color: var(--ouro); font-weight: 700; }

/* chat */
.chat { display: flex; flex-direction: column; gap: 8px; }
.chat .msgs { height: 220px; overflow-y: auto; background: rgba(0, 0, 0, .25); border-radius: 10px; padding: 8px; font-size: .93em; display: flex; flex-direction: column; gap: 3px; }
.chat .msgs .sis { color: var(--acafrao); font-style: italic; font-size: .9em; }
.chat .msgs b.gm { color: var(--rosa); }
.chat form { display: flex; gap: 6px; }
.chat input { flex: 1; min-width: 0; padding: 10px; border-radius: 10px; border: 1px solid var(--linha); background: rgba(0, 0, 0, .3); min-height: 44px; }

/* jogo */
.jogo { flex: 1; display: flex; flex-direction: column; width: min(980px, 100%); margin: 0 auto; padding-bottom: var(--base-h, 200px); position: relative; }
.faixa-tempo { height: 4px; background: rgba(255, 255, 255, .08); }
.faixa-tempo i { display: block; height: 100%; background: linear-gradient(90deg, var(--turquesa), var(--acafrao), var(--rosa)); transition: width 1s linear; }
.jogador { display: flex; align-items: center; gap: 10px; padding: 6px 12px; }
.jogador .dados { flex: 1; min-width: 0; }
.jogador .nm { font-weight: 800; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jogador .nums { display: flex; gap: 8px; font-size: .8em; color: var(--tinta2); flex-wrap: wrap; row-gap: 0; }
.jogador.vez { background: linear-gradient(90deg, rgba(244, 161, 44, .22), transparent); }
.jogador.vez .nm::after { content: 'na vez'; font-size: .7em; background: var(--acafrao); color: #3a1406; padding: 0 6px; border-radius: 99px; }
.mao-op { display: flex; }
.mao-op .mini { width: 18px; height: 27px; margin-left: -8px; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.mao-op .mini:first-child { margin-left: 0; }
.mesa { padding: 6px 10px; background: radial-gradient(ellipse at center, rgba(122, 33, 64, .55), rgba(43, 15, 28, .2) 70%); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.rotulo { font-family: var(--apoio); color: var(--ouro); font-size: .95em; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rotulo small { font-family: var(--ui); color: var(--tinta2); font-size: .8em; }
.mercado { display: flex; gap: 6px; justify-content: center; margin: 4px 0 8px; }
.carta { width: var(--carta-l); aspect-ratio: 2 / 3; border-radius: 9px; position: relative; flex: none; cursor: pointer; transition: transform .15s, box-shadow .15s; background: #fbeedb; box-shadow: 0 3px 8px rgba(0, 0, 0, .45); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.carta svg, .carta img { width: 100%; height: 100%; display: block; border-radius: 9px; object-fit: cover; }
.carta .nomec { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; text-transform: uppercase; letter-spacing: .4px; pointer-events: none; }
.carta.sel { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--acafrao), 0 10px 18px rgba(0, 0, 0, .6); }
.carta.dica { box-shadow: 0 0 0 3px var(--turquesa), 0 0 18px var(--turquesa); }
.carta.nova { animation: entra .4s ease-out; }
.carta.vazia { background: transparent; border: 2px dashed var(--linha); box-shadow: none; cursor: default; }
@keyframes entra { from { transform: translateY(-14px) scale(.9); opacity: 0; } }
.reservas { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.baralho { display: flex; align-items: center; gap: 8px; font-size: .85em; color: var(--tinta2); }
.baralho .carta { --carta-l: 38px; cursor: default; }
.pilhas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; flex: 1 1 260px; }
.pilha { text-align: center; font-size: .68em; color: var(--tinta2); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
.pilha .moedas { position: relative; height: 37px; width: 30px; margin: 0 auto 1px; }
.pilha .moedas svg { position: absolute; left: 0; width: 30px; height: 30px; }
.pilha.vazia { opacity: .35; }
.pilha .resto { display: block; font-size: .95em; color: var(--tinta); }
.bonus-linha { display: flex; gap: 10px; justify-content: center; margin-top: 6px; font-size: .8em; color: var(--tinta2); flex-wrap: wrap; }
.bonus-linha span { display: inline-flex; gap: 4px; align-items: center; }
.bonus-ficha { width: 22px; height: 22px; border-radius: 50%; background: #1c1418; border: 2px solid var(--ouro); display: inline-grid; place-items: center; font-weight: 800; font-size: 11px; color: var(--ouro); }

.eu-area { display: flex; gap: 10px; align-items: center; padding: 8px 12px; flex-wrap: wrap; }
.rebanho { display: inline-flex; align-items: center; gap: 6px; background: rgba(216, 174, 114, .15); border: 1px solid rgba(216, 174, 114, .5); padding: 4px 10px; border-radius: 99px; font-weight: 700; }
.rebanho { flex: none; }
.rebanho button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linha); background: rgba(0, 0, 0, .3); cursor: pointer; font-weight: 800; }
.minhas-fichas { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.minhas-fichas svg { width: 22px; height: 22px; }
.total { font-family: var(--titulo); color: var(--ouro); font-size: 1.25em; background: rgba(0,0,0,.25); border: 1px solid var(--linha); border-radius: 99px; padding: 2px 12px; cursor: pointer; min-height: 40px; }

.base { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: linear-gradient(0deg, rgba(31, 10, 20, .98), rgba(43, 15, 28, .92)); border-top: 1px solid var(--linha); padding-bottom: var(--seguro-baixo); }
.base-in { width: min(980px, 100%); margin: 0 auto; }
.acoes { display: flex; gap: 8px; padding: 8px 12px 4px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.acoes::-webkit-scrollbar { display: none; }
.acoes .msg { flex: 1; min-width: 110px; font-size: .82em; color: var(--tinta2); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.acoes .bt { flex: none; white-space: nowrap; }
.mao { display: flex; gap: 6px; overflow-x: auto; padding: 12px 12px 8px; scroll-snap-type: x proximity; min-height: calc(var(--carta-l) * 1.5 + 24px); }
.mao .carta { scroll-snap-align: start; }
.mao .vazio { color: var(--tinta2); font-size: .9em; align-self: center; }

.anuncio { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 60; pointer-events: none; padding: 14px 22px; border-radius: 18px; border: 2px solid var(--ouro); background: var(--bordo); color: #fff; font-family: var(--apoio); font-size: clamp(18px, 5vw, 26px); text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); animation: anuncia 2.2s ease forwards; max-width: 90vw; }
.anuncio.vender { background: linear-gradient(135deg, #7a2140, #c92e64); }
.anuncio.camelos { background: linear-gradient(135deg, #8a5a22, #c88a45); }
.anuncio.trocar { background: linear-gradient(135deg, #0f6c68, #17a39d); }
.anuncio.pegar { background: linear-gradient(135deg, #5e1631, #9b3fb5); }
@keyframes anuncia { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.9); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%); } }
.flash { position: fixed; inset: 0; pointer-events: none; z-index: 55; animation: flash .7s ease forwards; }
.flash.vermelho { background: rgba(200, 36, 63, .35); }
.flash.verde { background: rgba(23, 163, 157, .3); }
@keyframes flash { to { opacity: 0; } }
.emote-voa { position: fixed; z-index: 58; font-size: 46px; pointer-events: none; animation: voa 2.2s ease-out forwards; }
.emote-voa img { width: 90px; height: 90px; object-fit: contain; }
@keyframes voa { 0% { opacity: 0; transform: scale(.5); } 15% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: translateY(-80px) scale(1); } }

/* modais (abrem de baixo) */
.fundo-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
.modal { width: min(560px, 100%); max-height: 86dvh; overflow-y: auto; background: var(--bordo); border: 2px solid var(--linha); border-bottom: none; border-radius: 22px 22px 0 0; padding: 16px 16px calc(18px + var(--seguro-baixo)); animation: sobe .25s ease-out; }
@media (min-width: 700px) { .fundo-modal { align-items: center; } .modal { border-radius: 22px; border-bottom: 2px solid var(--linha); } }
@keyframes sobe { from { transform: translateY(40px); opacity: 0; } }
.modal h2 { color: var(--ouro); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tabela { width: 100%; border-collapse: collapse; font-size: .92em; }
.tabela th, .tabela td { padding: 6px 4px; border-bottom: 1px solid rgba(255, 217, 122, .18); text-align: center; }
.tabela th:first-child, .tabela td:first-child { text-align: left; }
.tabela tr.total td { font-weight: 800; color: var(--ouro); font-size: 1.1em; }
.podio { display: flex; justify-content: center; align-items: flex-end; gap: 16px; margin: 10px 0; }
.podio .deg { text-align: center; }
.podio .deg .bloco { width: 110px; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, var(--acafrao), #b9620c); display: grid; place-items: center; font-family: var(--titulo); font-size: 28px; color: #3a1406; }
.podio .deg.segundo .bloco { background: linear-gradient(180deg, #c9d3db, #7e8b95); }
.grade-av { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.grade-av button { background: none; border: 2px solid transparent; border-radius: 50%; padding: 0; cursor: pointer; aspect-ratio: 1; }
.grade-av button.ativa { border-color: var(--acafrao); }
.grade-av .avatar { width: 100%; height: 100%; }
.emotes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.emotes button { font-size: 28px; background: rgba(0, 0, 0, .2); border: 1px solid var(--linha); border-radius: 12px; cursor: pointer; aspect-ratio: 1; padding: 0; }
.emotes button img { width: 100%; height: 100%; object-fit: contain; }
.zoom { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(0, 0, 0, .7); }
.zoom .carta { --carta-l: min(62vw, 300px); cursor: default; }
.dica-box { margin: 6px 12px 0; font-size: .82em !important; line-height: 1.25; background: rgba(23, 163, 157, .18); border: 1px solid var(--turquesa); border-radius: 12px; padding: 8px 10px; font-size: .9em; display: flex; gap: 8px; align-items: flex-start; }
.dica-box b { color: #7ef0e9; }
.regras p, .regras li { font-size: .95em; }
.regras li { margin-bottom: 4px; }
.aviso-barra { background: var(--turquesa); color: #fff; text-align: center; padding: 6px; font-size: .9em; }
.aviso-barra.rosa { background: var(--rosa); }
.toast { position: fixed; left: 50%; bottom: calc(170px + var(--seguro-baixo)); transform: translateX(-50%); background: #1c0a12; border: 1px solid var(--rosa); padding: 8px 14px; border-radius: 12px; z-index: 90; font-size: .92em; max-width: 92vw; text-align: center; animation: anuncia 3s ease forwards; }
.painel-chat-jogo .msgs { height: 45dvh; }
.ranking td, .ranking th { font-size: .88em; }
.historico { max-height: 50dvh; overflow-y: auto; font-size: .92em; }
.historico div { padding: 4px 0; border-bottom: 1px solid rgba(255, 217, 122, .12); }

/* desktop: mesa mais larga e cartas maiores */
@media (min-width: 760px) {
  :root { --carta-l: 104px; }
  .jogo { padding-bottom: 210px; }
  .mercado { gap: 12px; }
}

/* medidor de chance de vitória */
.medidor { display: flex; align-items: center; gap: 8px; padding: 4px 12px; font-size: .74em; color: var(--tinta2); width: min(980px, 100%); margin: 0 auto; }
.medidor span { white-space: nowrap; max-width: 30%; overflow: hidden; text-overflow: ellipsis; }
.medidor .barra { flex: 1; height: 8px; border-radius: 6px; background: var(--turquesa); overflow: hidden; }
.medidor .barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--acafrao), var(--rosa)); transition: width .8s ease; }

/* =================================================================== tema 2: bazar mais vivo */
/* botões de latão em forma de cartucho */
.bt {
  --b1: #ffe08a; --b2: #f4a12c; --b3: #b8620a; --borda: #6b3205; --txt: #3a1406;
  position: relative; border: none; border-radius: 12px; padding: .55em 1.35em; min-height: 44px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0 8%, transparent 45%),
    linear-gradient(180deg, var(--b1), var(--b2) 55%, var(--b3));
  color: var(--txt); font-weight: 800; letter-spacing: .2px; text-shadow: 0 1px 0 rgba(255,255,255,.45);
  box-shadow: inset 0 0 0 2px var(--borda), inset 0 0 0 4px rgba(255,236,170,.7), 0 4px 0 var(--borda), 0 8px 16px rgba(0,0,0,.45);
  transition: transform .1s, box-shadow .1s, filter .2s;
}
.bt::before, .bt::after { content: '◆'; position: absolute; top: 50%; transform: translateY(-50%); font-size: .55em; color: var(--borda); opacity: .75; }
.bt::before { left: .55em; } .bt::after { right: .55em; }
.bt.peq::before, .bt.peq::after, .bt.redondo::before, .bt.redondo::after { display: none; }
.bt:hover:not(:disabled) { filter: brightness(1.08) saturate(1.1); }
.bt:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--borda), inset 0 0 0 4px rgba(255,236,170,.7), 0 1px 0 var(--borda), 0 3px 8px rgba(0,0,0,.4); }
.bt.rosa { --b1: #ff9ec0; --b2: #e2477e; --b3: #9c1d4c; --borda: #5a0f2a; --txt: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.bt.turq { --b1: #9ff3ec; --b2: #17a39d; --b3: #0b6360; --borda: #063a38; --txt: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.bt.leve { --b1: #8a3a58; --b2: #5e1631; --b3: #3a0c1f; --borda: #24060f; --txt: var(--marfim); text-shadow: none;
  box-shadow: inset 0 0 0 1.5px rgba(255,217,122,.55), inset 0 0 0 3px rgba(0,0,0,.25), 0 3px 0 #24060f, 0 6px 12px rgba(0,0,0,.35); font-weight: 700; }
.bt.peq { padding: .35em .85em; min-height: 38px; }
.bt.redondo { border-radius: 50%; width: 42px; height: 42px; padding: 0; display: inline-grid; place-items: center; font-size: 1.1em; }
.bt:disabled { filter: grayscale(.75) brightness(.75); }
.icone { border: none; background: radial-gradient(circle at 35% 30%, #ffe8a6, #d79b22 60%, #8a5a0c); color: #3a1406; box-shadow: inset 0 0 0 2px #6b3205, inset 0 0 0 4px rgba(255,240,190,.6), 0 3px 8px rgba(0,0,0,.5); font-weight: 800; }
.icone:active { transform: translateY(1px); }

/* topo com friso de arcos */
.topo { background: linear-gradient(180deg, #4a1430, #2b0f1c); border-bottom: none; padding-bottom: 12px; }
.topo::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background: radial-gradient(circle at 10px 0, #2b0f1c 9px, transparent 10px) 0 0 / 20px 10px repeat-x,
    radial-gradient(circle at 10px 0, #ffd97a 10px, transparent 11px) 0 1px / 20px 10px repeat-x; pointer-events: none; }
.topo .tt { text-shadow: 0 2px 0 #5e1631, 0 0 14px rgba(244,161,44,.5); font-size: 1.5em; }
.topo .tt::before { content: '🐪 '; font-size: .7em; }

/* mesa: tapete bordado com franjas */
.mesa {
  margin: 8px 6px; padding: 10px 10px 12px; border-radius: 14px; position: relative;
  background:
    radial-gradient(ellipse at center, rgba(244,161,44,.10), transparent 65%),
    repeating-linear-gradient(45deg, rgba(255,217,122,.05) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, #6d1b3a, #4b1028);
  border: 3px solid #d79b22;
  box-shadow: inset 0 0 0 3px #2b0f1c, inset 0 0 0 6px rgba(226,71,126,.55), inset 0 0 24px rgba(0,0,0,.45), 0 8px 22px rgba(0,0,0,.5);
}
.mesa::before, .mesa::after { content: ''; position: absolute; left: 14px; right: 14px; height: 7px;
  background: repeating-linear-gradient(90deg, #ffd97a 0 2px, transparent 2px 7px); opacity: .7; }
.mesa::before { top: -9px; } .mesa::after { bottom: -9px; }
.rotulo { align-items: center; }
.rotulo .orn { font-family: var(--apoio); color: var(--ouro); font-size: 1.05em; text-shadow: 0 2px 0 #2b0f1c; letter-spacing: .5px; }
.baralho-pilha { display: inline-flex; align-items: center; gap: 6px; color: var(--marfim); font-weight: 800; }
.baralho-pilha .carta.mini-baralho { --carta-l: 24px; cursor: default; box-shadow: 2px 2px 0 #3a0c1f, 4px 4px 0 #24060f, 0 3px 8px rgba(0,0,0,.6); }

/* cartas */
.carta { border-radius: 9px; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 4px 10px rgba(0,0,0,.55); transition: transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .18s; }
.carta .nomec { font-family: var(--apoio); font-weight: 400; letter-spacing: .3px; font-size: 10.5px; text-transform: none; bottom: 3px; }
.carta.c-prata .nomec { color: #1b2a3a; text-shadow: 0 0 3px #fff, 0 0 2px #fff; }
.carta.c-ouro .nomec { color: #4a2a00; text-shadow: 0 0 3px #fff3c4, 0 0 2px #fff3c4; }
.carta.sel { transform: translateY(-12px) rotate(-1.5deg); box-shadow: 0 0 0 3px var(--ouro), 0 0 18px rgba(255,217,122,.75), 0 12px 20px rgba(0,0,0,.6); }
.carta.chegou { animation: pousa .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes pousa { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
.mercado { perspective: 600px; }
.mercado > .carta:hover:not(.vazia) { transform: translateY(-4px); }
/* par da troca: a carta dada fica "de frente" para a do mercado */
.carta.par { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--turquesa), 0 0 18px rgba(23,163,157,.7), 0 12px 20px rgba(0,0,0,.6); }
.carta .dado { position: absolute; left: 50%; bottom: -34%; transform: translateX(-50%) rotate(6deg); width: 62%; z-index: 3; pointer-events: none; animation: pousa .35s ease-out; }
.carta .dado .carta { --carta-l: 100%; width: 100%; box-shadow: 0 0 0 2px var(--turquesa), 0 6px 12px rgba(0,0,0,.7); }
.carta .dado .nomec { font-size: 8px; }
.mercado { margin-bottom: 18px; }
.carta.dada { opacity: .35; transform: translateY(6px) scale(.94); }
body.arrastando .mercado > .carta:not(.vazia):not(.c-camelo) { box-shadow: 0 0 0 2px rgba(23,163,157,.7), 0 4px 10px rgba(0,0,0,.55); }
body.arr-merc .base { box-shadow: 0 -4px 22px rgba(23,163,157,.6); }
.carta.alvo, .base.alvo { box-shadow: 0 0 0 4px var(--turquesa), 0 0 26px var(--turquesa) !important; transform: translateY(-8px) scale(1.06); }
.fantasma { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)); }
.fantasma > .carta { width: 100% !important; height: 100%; --carta-l: 100%; transform: none !important; opacity: 1 !important; }
.mao .carta, .rebanho-cartas { touch-action: pan-x; }
.mercado > .carta { touch-action: none; }

/* fichas: moedas espalhadas, a mais valiosa por cima */
.ficha { --f: 30px; width: var(--f); height: var(--f); display: inline-block; position: relative; flex: none; border-radius: 50%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)); }
.ficha svg, .ficha img { width: 100%; height: 100%; display: block; }
.ficha .v { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--titulo); font-size: calc(var(--f) * .42); color: #3a1406; text-shadow: 0 0 3px #fff3c4, 0 0 6px #fff3c4; }
.ficha.sob .v { right: 50%; font-size: calc(var(--f) * .36); }
.fileiras { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 6px 0 4px; }
@media (min-width: 760px) { .fileiras { grid-template-columns: repeat(3, 1fr); } .ficha { --f: 36px; } }
.fileira { display: flex; align-items: center; min-height: 34px; padding: 2px 6px; border-radius: 99px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px rgba(255,217,122,.18); }
.moedas-linha { display: flex; align-items: center; }
.moedas-linha .ficha + .ficha { margin-left: calc(var(--f) * -.5); }
.moedas-linha .ficha:last-child { filter: drop-shadow(0 0 5px rgba(255,217,122,.7)) drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.fileira.vazia { opacity: .45; }
.fileira .acabou { font-size: .75em; color: var(--tinta2); font-style: italic; padding: 0 4px; }
.bonus-linha { gap: 14px; align-items: flex-end; margin-top: 8px; }
.bonus-pilha { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; font-size: .72em; color: var(--tinta2); }
.bonus-pilha .ficha { box-shadow: 0 3px 0 #000, 0 5px 0 #2b2226; }
.bonus-pilha.vazia { opacity: .35; }
.camelo-ficha small { max-width: 64px; text-align: center; line-height: 1.05; }
.minhas-fichas .ficha { --f: 24px; }

/* rebanho em cartas, ao lado da mão */
.mao-zona { display: flex; align-items: stretch; gap: 4px; padding-left: 10px; }
.mao-zona .mao { flex: 1; padding-left: 4px; }
.rebanho-cartas { flex: none; position: relative; width: calc(var(--carta-l) * .9 + 26px); padding: 12px 0 8px; display: flex; flex-direction: column; align-items: center; cursor: grab; border-right: 1px dashed var(--linha); padding-right: 6px; }
.rebanho-cartas .pilha-cam { position: relative; width: calc(var(--carta-l) * .9); height: calc(var(--carta-l) * 1.35); }
.rebanho-cartas .carta.cam-reb { position: absolute; left: calc(var(--k) * 6px); top: calc(var(--k) * -3px); --carta-l: calc(var(--carta-l) * .78); }
.rebanho-cartas .qtd { margin-top: 2px; font-weight: 800; font-size: .85em; background: #1f9fd6; color: #fff; border-radius: 99px; padding: 0 8px; box-shadow: inset 0 0 0 1.5px #ffd97a; }
.rebanho-cartas .qtd small { color: #ffe08a; }
.rebanho-cartas.vazio { opacity: .55; cursor: default; }
.rebanho-cartas .sem { display: grid; place-items: center; height: 100%; font-size: .72em; color: var(--tinta2); text-align: center; border: 2px dashed var(--linha); border-radius: 9px; }
.rebanho-cartas.dando .qtd { background: var(--turquesa); }

/* jogadores como varandas */
.jogador { margin: 0 6px; border-radius: 0 0 16px 16px; }
.jogador.baixo { border-radius: 16px 16px 0 0; }
.moldura-av { position: relative; display: inline-grid; place-items: center; }
.moldura-av::before { content: ''; position: absolute; inset: -5px -4px -3px; border-radius: 50% 50% 12px 12px / 60% 60% 12px 12px; border: 2px solid #d79b22; background: rgba(0,0,0,.25); z-index: -1; }
.jogador.vez { background: linear-gradient(90deg, rgba(244,161,44,.28), rgba(244,161,44,.05)); box-shadow: inset 3px 0 0 var(--acafrao); }
.jogador.vez .moldura-av::after { content: '🏮'; position: absolute; top: -12px; right: -10px; font-size: 16px; animation: balanca 2.4s ease-in-out infinite; transform-origin: 50% 0; }
.total { background: linear-gradient(180deg, #ffe08a, #d79b22); color: #3a1406; border: none; box-shadow: inset 0 0 0 2px #6b3205, 0 3px 0 #6b3205; text-shadow: 0 1px 0 rgba(255,255,255,.5); }

/* base: madeira entalhada */
.base { background: linear-gradient(180deg, #3b1a10, #24100a); border-top: 3px solid #d79b22; box-shadow: 0 -6px 18px rgba(0,0,0,.5); }
.base::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 9px;
  background: radial-gradient(circle at 9px 9px, #d79b22 7px, transparent 8px) 0 0 / 18px 9px repeat-x; opacity: .9; pointer-events: none; }

/* medidor: camelinho corre na barra */
.medidor .barra { position: relative; overflow: visible; height: 9px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.medidor .barra i { border-radius: 6px; }
.medidor .barra em { position: absolute; top: 50%; transform: translate(-50%, -58%); font-style: normal; font-size: 15px; transition: left .8s ease; filter: drop-shadow(0 1px 1px #000); }

/* peças voando e partículas */
.voadora { position: fixed; z-index: 110; pointer-events: none; transform-style: preserve-3d; filter: drop-shadow(0 12px 14px rgba(0,0,0,.55)); will-change: transform; }
.voadora > .carta { width: 100% !important; height: 100%; --carta-l: 100%; }
.voadora > .ficha { --f: 100%; width: 100%; height: 100%; }
.voadora.brilha { filter: drop-shadow(0 0 10px #ffd97a) drop-shadow(0 0 18px #f4a12c); }
.particula { position: fixed; z-index: 115; pointer-events: none; font-style: normal; text-shadow: 0 0 6px currentColor; }
.numero-sobe { position: fixed; z-index: 116; pointer-events: none; transform: translate(-50%, -50%); font-family: var(--titulo); font-size: 28px; text-shadow: 0 3px 0 #5e1631, 0 0 14px rgba(244,161,44,.9); animation: sobe-num 1.6s cubic-bezier(.2,.8,.3,1) forwards; white-space: nowrap; }
@keyframes sobe-num { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.4); } 18% { opacity: 1; transform: translate(-50%, -70%) scale(1.25); } 70% { opacity: 1; transform: translate(-50%, -120%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -170%) scale(.9); } }

/* anúncio: faixa ornamentada que desce e brilha */
.anuncio { all: unset; position: fixed; left: 50%; top: 30%; z-index: 100; pointer-events: none; transform: translateX(-50%); max-width: 94vw; animation: anuncio-vida 2.6s cubic-bezier(.2,.9,.3,1) forwards; }
.anuncio.curto { animation-duration: 1.7s; top: 24%; }
.anuncio .fita { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 26px; color: #fff; border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.25), transparent 40%), var(--fita, linear-gradient(135deg, #7a2140, #c92e64));
  box-shadow: inset 0 0 0 2px #ffd97a, inset 0 0 0 5px rgba(0,0,0,.25), inset 0 0 0 6px rgba(255,217,122,.6), 0 14px 40px rgba(0,0,0,.65); overflow: visible; }
.anuncio .fita::after { content: ''; position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 62%); background-size: 250% 100%; animation: reflexo 1.3s .35s ease-out; pointer-events: none; }
.anuncio .ponta { position: absolute; top: 8px; bottom: -8px; width: 26px; background: var(--ponta, #5a0f2a); z-index: -1; }
.anuncio .ponta.e { left: -18px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.anuncio .ponta.d { right: -18px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.anuncio .ico { font-size: 34px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); animation: pula-ico .7s .1s cubic-bezier(.3,1.8,.5,1) both; }
.anuncio .txt { display: flex; flex-direction: column; line-height: 1.1; }
.anuncio .txt b { font-family: var(--apoio); font-weight: 400; color: var(--ouro); font-size: clamp(14px, 4vw, 18px); text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.anuncio .frase { font-family: var(--titulo); font-size: clamp(20px, 6vw, 30px); text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.anuncio .palavra { display: inline-block; animation: palavra .45s calc(.12s + var(--i) * .07s) cubic-bezier(.3,1.6,.5,1) both; }
.anuncio small { font-size: clamp(12px, 3.4vw, 15px); color: #fff3c4; margin-top: 2px; font-weight: 700; }
.anuncio.vender { --fita: linear-gradient(135deg, #8a1538, #e2477e); --ponta: #5a0f2a; }
.anuncio.camelos { --fita: linear-gradient(135deg, #0f6f9c, #1f9fd6); --ponta: #0a4a6a; }
.anuncio.trocar { --fita: linear-gradient(135deg, #0b6360, #17a39d); --ponta: #063a38; }
.anuncio.pegar { --fita: linear-gradient(135deg, #6a2c91, #9b3fb5); --ponta: #3f1858; }
@keyframes anuncio-vida { 0% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(.6) rotate(-4deg); } 14% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.06) rotate(1deg); } 22% { transform: translateX(-50%) scale(1) rotate(0); } 82% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-26px) scale(.92); } }
@keyframes reflexo { from { background-position: 150% 0; } to { background-position: -60% 0; } }
@keyframes palavra { from { opacity: 0; transform: translateY(14px) scale(.7); } }
@keyframes pula-ico { from { transform: scale(0) rotate(-40deg); } }
@media (prefers-reduced-motion: reduce) { .anuncio, .anuncio * { animation-duration: .01s !important; } .anuncio { animation: none; opacity: 1; } }

/* modal com moldura de palácio */
.modal { background: linear-gradient(180deg, #6d1b3a, #4b1028); border: 3px solid #d79b22; box-shadow: inset 0 0 0 3px #2b0f1c, inset 0 0 0 5px rgba(226,71,126,.5), 0 -10px 40px rgba(0,0,0,.6); }
.modal h2 { font-family: var(--titulo); text-shadow: 0 2px 0 #2b0f1c; }
.painel { background: linear-gradient(180deg, rgba(109,27,58,.9), rgba(75,16,40,.9)); border: 2px solid rgba(215,155,34,.7); box-shadow: inset 0 0 0 3px rgba(43,15,28,.8), 0 8px 22px rgba(0,0,0,.45); }
.painel h2::before { content: '❖ '; color: var(--rosa); }

/* compacto no celular */
.reservas-topo { display: inline-flex; align-items: flex-end; gap: 8px; }
.reservas-topo .ficha { --f: 24px; }
.reservas-topo .bonus-pilha small { font-size: .9em; line-height: 1; }
.camelo-ficha small { max-width: none; }
.fileira { min-height: 30px; padding: 1px 6px; }
.fileiras { gap: 4px 8px; margin: 4px 0 0; }
.mercado { margin: 4px 0 14px; }
.mesa { padding: 8px 8px 10px; }
@media (max-width: 759px) { .fileira .ficha { --f: 27px; } }
@media (min-width: 760px) { .reservas-topo .ficha { --f: 32px; } .mercado { margin-bottom: 22px; } }

/* anúncio centralizado sem limitar a largura pela metade da tela */
.anuncio { left: 0; right: 0; margin: 0 auto; width: max-content; max-width: 92vw; transform: none; }
.anuncio .frase { font-size: clamp(18px, 5.4vw, 30px); }
@keyframes anuncio-vida { 0% { opacity: 0; transform: translateY(-40px) scale(.6) rotate(-4deg); } 14% { opacity: 1; transform: translateY(0) scale(1.06) rotate(1deg); } 22% { transform: scale(1) rotate(0); } 82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-26px) scale(.92); } }
@media (max-width: 759px) {
  .mao .carta, .rebanho-cartas { --carta-l: min(15.6vw, 80px); }
  .topo { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 10px; }
  .jogador { padding: 4px 10px; }
}
.reservas-topo .bonus-pilha small { margin-top: 5px; }
.rebanho-cartas .carta.cam-reb:not(:last-child) .nomec { display: none; }