/* Buraco dos Passatempos da Delza de Oliveira (24/10/2026). Celular primeiro: cartas grandes, mão em leque. */
:root{
  --vermelho:#ae0100; --verde:#006b03; --verde-esc:#023a03; --verde-mesa:#0b5a24; --ouro:#ffc302; --laranja:#ff7402;
  --creme:#fff8f0; --tinta:#1f1a1c; --naipe-v:#c40000; --naipe-p:#1f1a1c;
  --cw:clamp(50px,14.5vw,78px); --ch:calc(var(--cw)*1.42);
  --mw:clamp(30px,8.6vw,46px); --mh:calc(var(--mw)*1.42);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--verde-esc);color:#fff;font-family:Nunito,system-ui,sans-serif;overscroll-behavior:none}
button{font:inherit;cursor:pointer}
.app{display:flex;flex-direction:column;height:100svh;max-width:900px;margin:0 auto;
  background:radial-gradient(120% 70% at 50% 40%,#137a32 0%,var(--verde-mesa) 55%,#063d17 100%)}

.barra{display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px;background:var(--verde-esc)}
.voltar{color:#fff;text-decoration:none;font-size:2rem;line-height:1;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.1)}
.titulo{display:flex;flex-direction:column;line-height:1.05;flex:1;min-width:0}
.titulo b{font-family:"Baloo 2",Nunito,sans-serif;font-size:1.35rem;color:var(--ouro)}
.titulo span{font-size:.75rem;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.placar{display:flex;gap:6px;font-size:.82rem;font-weight:800}
.placar span{background:rgba(255,255,255,.12);border-radius:999px;padding:4px 10px;white-space:nowrap}
.placar b{color:var(--ouro);font-size:1rem}
.mais{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.4rem;line-height:1}

.rivais{display:flex;justify-content:space-between;gap:6px;padding:6px 10px}
.jog{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(0,0,0,.22);border-radius:999px;padding:6px 8px;
  font-weight:800;font-size:.85rem;border:2px solid transparent;transition:border-color .2s,background .2s}
.jog.parceira{background:rgba(255,195,2,.16)}
.jog .qtd{display:inline-flex;align-items:center;gap:4px;color:var(--ouro)}
.jog .qtd::before{content:"";width:12px;height:16px;border-radius:3px;background:var(--vermelho);border:1.5px solid #fff}
.jog.vez{border-color:var(--ouro);background:rgba(255,195,2,.28)}

.mesa{flex:1;overflow-y:auto;padding:4px 10px;display:flex;flex-direction:column;gap:8px;min-height:0}
.lado h2{margin:0 0 4px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.lado h2 small{text-transform:none;letter-spacing:0;font-weight:600;opacity:.75;margin-left:4px}
.jogos{display:flex;flex-wrap:wrap;gap:6px;min-height:calc(var(--mh) + 10px)}
.jogos:empty::after{content:"Nenhum jogo ainda";font-size:.85rem;opacity:.6;align-self:center}
.grupo{all:unset;display:flex;align-items:flex-end;padding:4px 6px 4px 4px;border-radius:10px;background:rgba(0,0,0,.18);position:relative}
.nos .grupo{cursor:pointer}
.nos .grupo:focus-visible,.nos .grupo.alvo{outline:3px solid var(--ouro)}
.grupo .carta{width:var(--mw);height:var(--mh);font-size:calc(var(--mw)*.34);margin-right:calc(var(--mw)*-.4);letter-spacing:-.06em;padding-left:3px}
.grupo .carta:last-child{margin-right:0}
.grupo .selo{position:absolute;top:-8px;right:-4px;font-size:.62rem;font-weight:900;padding:2px 6px;border-radius:999px;background:var(--ouro);color:var(--tinta)}
.grupo .selo.suja{background:#fff;color:var(--vermelho)}

.centro{display:flex;align-items:center;justify-content:center;gap:18px;padding:6px 0}
.monte,.lixo{border:0;background:none;padding:0;position:relative;color:#fff}
.monte b,.lixo b{position:absolute;bottom:-6px;right:-8px;background:var(--tinta);color:#fff;border-radius:999px;font-size:.75rem;padding:2px 7px;border:2px solid var(--ouro)}
.verso,.lixo-vazio{display:block;width:var(--cw);height:var(--ch);border-radius:9px}
.verso{background:var(--vermelho) url(/img/icone-app-transparente.png) center/70% no-repeat;border:3px solid #fff;
  box-shadow:0 3px 0 #7d0000,0 6px 14px rgba(0,0,0,.35)}
.lixo-vazio{border:3px dashed rgba(255,255,255,.4)}
.monte.pode,.lixo.pode{animation:chama 1.4s ease-in-out infinite}
@keyframes chama{50%{transform:translateY(-4px);filter:drop-shadow(0 0 10px var(--ouro))}}
.mortos{display:flex;flex-direction:column;gap:4px;font-size:.72rem;font-weight:800;text-align:center}
.mortos span{background:rgba(0,0,0,.25);border-radius:6px;padding:3px 6px}
.mortos span.pego{opacity:.5;text-decoration:line-through}

.carta{position:relative;width:var(--cw);height:var(--ch);border-radius:9px;background:#fff;color:var(--naipe-p);
  box-shadow:0 1px 0 rgba(0,0,0,.2),0 3px 8px rgba(0,0,0,.25);font-weight:900;font-size:calc(var(--cw)*.34);line-height:1;
  display:flex;flex-direction:column;align-items:flex-start;padding:5px 0 0 5px;user-select:none}
.carta.v{color:var(--naipe-v)}
.carta .n{font-size:.95em;margin-top:1px}
.carta .grande{position:absolute;right:6px;bottom:4px;font-size:1.6em;opacity:.9}
.carta.cur{background:linear-gradient(160deg,#fff 60%,#fff3c4)}
.carta.cur::after{content:"★";position:absolute;right:4px;top:4px;font-size:.5em;color:#c58f00}

.aviso{margin:0;padding:6px 12px;min-height:2.4em;text-align:center;font-weight:800;font-size:.95rem;background:rgba(0,0,0,.25)}
.aviso.erro{color:#ffd7d2}
.acoes{display:flex;gap:8px;padding:8px 10px 4px}
.acoes button{flex:1;border:0;border-radius:999px;padding:12px 6px;font-weight:900;font-size:.98rem;background:#fff;color:var(--verde-esc);
  display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px}
.acoes button.forte{background:var(--ouro);color:var(--tinta)}
.acoes button.dica{flex:.8;background:rgba(255,255,255,.18);color:#fff}
.acoes button.dica img{width:26px;height:26px}
.acoes button:disabled{opacity:.38;cursor:default}

.mao{position:relative;height:calc(var(--ch) + 30px + env(safe-area-inset-bottom,0px));padding:18px 10px env(safe-area-inset-bottom,0px);overflow:hidden}
.mao.duas{height:calc(var(--ch)*2 + 26px + env(safe-area-inset-bottom,0px))}
.mao .carta{position:absolute;transition:transform .15s,left .2s,top .2s;border:0}
.mao .carta.sel{transform:translateY(-16px);box-shadow:0 0 0 3px var(--ouro),0 8px 18px rgba(0,0,0,.4)}
.mao .carta.dica{box-shadow:0 0 0 3px var(--laranja),0 8px 18px rgba(0,0,0,.4)}
.mao.espera .carta{filter:saturate(.75) brightness(.92)}

.toast{pointer-events:none;position:fixed;left:50%;top:9%;transform:translateX(-50%);z-index:20;background:#fff;color:var(--tinta);border-radius:22px;
  padding:12px 18px 12px 12px;display:flex;align-items:center;gap:12px;font-weight:900;font-size:1.05rem;box-shadow:0 18px 40px rgba(0,0,0,.4);
  animation:pula .45s cubic-bezier(.2,.9,.3,1.4)}
.toast[hidden]{display:none}
.caixa .partilha{background:#fff3c4;border:2px dashed var(--ouro);border-radius:16px;padding:10px 12px 12px;margin:10px 0 2px}
.caixa .partilha p{margin:0 0 6px;font-weight:800;color:var(--tinta)}
.caixa .partilha button{margin:0;background:var(--vermelho)}
.caixa .partilha small{display:block;margin-top:6px;color:var(--verde-esc);font-weight:700}
.toast.fala{border-radius:22px 22px 22px 6px;border:3px solid var(--ouro);font-size:1rem;max-width:min(92vw,360px)}
@keyframes pula{from{transform:translate(-50%,20px) scale(.8);opacity:0}}

.caixa{border:0;border-radius:24px;padding:22px 20px;max-width:min(420px,92vw);width:100%;background:var(--creme);color:var(--tinta);text-align:center}
.caixa::backdrop{background:rgba(2,30,8,.7)}
.caixa h2{font-family:"Baloo 2",Nunito,sans-serif;color:var(--vermelho);margin:0 0 12px;font-size:1.5rem;line-height:1.1}
.caixa button{display:block;width:100%;margin:8px 0 0;border:0;border-radius:999px;padding:14px;font-weight:900;font-size:1rem;background:var(--verde);color:#fff}
.caixa button.forte{background:var(--ouro);color:var(--tinta)}
.caixa button.leve{background:transparent;color:var(--verde-esc);border:2px solid #d9cbb8}
.caixa table{width:100%;border-collapse:collapse;margin:6px 0 10px;font-size:.95rem}
.caixa th,.caixa td{padding:6px 4px;border-bottom:1px solid #eadfd2}
.caixa th:first-child,.caixa td:first-child{text-align:left}
.caixa tr.total td{font-weight:900;border-bottom:0}
.caixa img{margin:-4px auto 4px;display:block}
.regras{text-align:left}
.regras ul{padding-left:18px;margin:0 0 6px}
.regras li{margin:0 0 8px;line-height:1.45}