/* ============ Coupy Brazil — plenário verde-amarelo-azul ============ */
:root {
  --bg: #06120d;
  --panel: #0c1c2e;
  --panel2: #12304a;
  --line: #1f4a6e;
  --fg: #eef3f0;
  --dim: #9db4c4;
  --green: #009c3b;
  --green-d: #006b2a;
  --yellow: #ffdf00;
  --blue: #1d4ed8;
  --blue-d: #002776;
  --accent: #ffdf00;
  --gold-hi: #fff3a6;
  --gold: #f5c518;
  --gold-lo: #c88a00;
  --gold-edge: #6b4500;
  --danger: #ef4444;
  --warn: #f59e0b;
  --ok: #22c55e;
  --r: 12px;
  --gbar-h: 52px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; color: var(--fg); background: var(--bg); }
body {
  min-height: 100dvh; font-size: 16px; line-height: 1.35; -webkit-text-size-adjust: 100%; overflow-x: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, #ffffff06 46px 48px),
    radial-gradient(900px 520px at 50% -8%, #0e6b46cc, transparent 70%),
    radial-gradient(700px 460px at 105% 35%, #0b2a7a77, transparent 70%),
    radial-gradient(600px 420px at -5% 70%, #ffdf0014, transparent 70%),
    linear-gradient(#071a12, #04070d) fixed;
}
h1, h2, h3 { margin: 0; }
h1 { font-size: 2rem; text-align: center; }
h2 { font-size: 1rem; color: var(--dim); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
h3 { font-size: .95rem; margin: 12px 0 6px; }
button, input { font: inherit; color: inherit; }
a { color: var(--yellow); }
[hidden] { display: none !important; }

#app { max-width: 1100px; margin: 0 auto; padding: 12px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

/* ---- barra global ---- */
.gbar {
  position: sticky; top: 0; z-index: 25; height: var(--gbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 12px; background: #04100bdd; backdrop-filter: blur(8px);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--green), var(--yellow), var(--blue)) 1;
}
.brand { font-weight: 800; letter-spacing: .02em; }
.brand b { color: var(--yellow); }
.gbar-r { display: flex; gap: 6px; }
.gbar .icon { min-width: 44px; min-height: 44px; font-size: 1.1rem; }
.icon.off { opacity: .45; }

/* ---- controles ---- */
.btn {
  min-height: 48px; padding: 10px 16px; border: 2px solid #003d18; border-radius: var(--r);
  background: linear-gradient(#10b24f, var(--green-d)); color: #fff; font-weight: 800; cursor: pointer;
  text-shadow: 0 1px 0 #0006; box-shadow: inset 0 1px 0 #ffffff55, 0 3px 0 #003d18, 0 6px 12px #0006;
  touch-action: manipulation;
}
.btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #ffffff55, 0 1px 0 #003d18; }
.btn.ghost { background: var(--panel2); color: var(--fg); border-color: var(--line); text-shadow: none; box-shadow: 0 3px 0 #0a1c2c; }
.btn.danger { background: linear-gradient(#ef4444, #991b1b); border-color: #4a0a0a; color: #fff; box-shadow: 0 3px 0 #4a0a0a; }
.btn.out { min-height: 44px; padding: 6px 14px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible, .icon:focus-visible, .link:focus-visible, .pick:focus-visible, .chip:focus-visible, .info:focus-visible,
.cta:focus-visible, .card:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #7aa7ff; outline-offset: 2px; }
.btn small { font-weight: 500; opacity: .85; }
.icon {
  min-width: 44px; min-height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel2); font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.link { background: none; border: 0; color: var(--dim); text-decoration: underline; min-height: 44px; padding: 0 12px; cursor: pointer; }
input {
  width: 100%; min-height: 48px; padding: 10px 12px; border-radius: var(--r);
  border: 1px solid var(--line); background: #040b14;
}
label { display: block; margin-bottom: 6px; color: var(--dim); font-size: .9rem; }
.row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.row > .btn { flex: 1 1 140px; }
.hint { color: var(--dim); font-size: .85rem; margin: 6px 0 0; text-align: center; }
.wait { color: var(--dim); text-align: center; margin: 8px 0; }

/* ---- fichas / moedas ---- */
.disc {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; font-size: 1rem; color: #3a2600;
  background: radial-gradient(circle at 35% 28%, #fff1a0, #e9ae00 68%, #a86b00);
  border: 2px dashed #7a5200aa;
  box-shadow: inset 0 0 0 3px #f9d84a, inset 0 2px 4px #fff9, 0 1px 2px #0006;
}
.chip-wrap { display: flex; align-items: center; gap: 4px; min-width: 0; }
.chip {
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  min-height: 52px; padding: 5px 18px 5px 5px; border: 2px solid var(--gold-edge); border-radius: 999px;
  background: radial-gradient(130% 170% at 28% 15%, var(--gold-hi) 0%, var(--gold) 38%, var(--gold-lo) 78%, #8a5a00 100%);
  color: #2a1b00; font-weight: 800; text-align: left; text-decoration: none; cursor: pointer; touch-action: manipulation;
  box-shadow: inset 0 2px 0 #fff8c8aa, inset 0 -3px 0 #7a520088, 0 4px 0 var(--gold-edge), 0 8px 14px #0008;
  transition: transform .08s, box-shadow .08s;
}
.chip:hover { filter: brightness(1.06); }
.chip:active { transform: translateY(3px); box-shadow: inset 0 2px 0 #fff8c8aa, inset 0 -3px 0 #7a520088, 0 1px 0 var(--gold-edge), 0 3px 6px #0008; }
.chip-t { display: flex; flex-direction: column; line-height: 1.15; }
.chip-t small { font-weight: 600; font-size: .7rem; opacity: .75; }
.chip.sm { min-height: 44px; font-size: .92rem; padding-left: 5px; }
.chip.sm .disc { width: 34px; height: 34px; font-size: .9rem; }
.chip.sm:not(:has(.disc)) { padding-left: 18px; justify-content: center; }
.chip.coup {
  border-color: #2a0000; color: #ffe9e9;
  background: radial-gradient(130% 170% at 28% 15%, #ff8a8a 0%, #b91c1c 38%, #7f1010 78%, #4a0505 100%);
  box-shadow: inset 0 2px 0 #ffb4b4aa, inset 0 -3px 0 #2a000088, 0 4px 0 #2a0000, 0 8px 14px #0008;
}
.chip.coup .disc { color: #fff; background: radial-gradient(circle at 35% 28%, #ff7b7b, #a31212 70%); border-color: #ffb4b4aa; box-shadow: inset 0 0 0 3px #c22, inset 0 2px 4px #fff6; }
.chip.pass, .chip.tw, .chip.tg { color: #0f172a; border-color: #334155; background: radial-gradient(130% 170% at 28% 15%, #f8fafc 0%, #cbd5e1 40%, #94a3b8 80%, #475569 100%); box-shadow: inset 0 2px 0 #fff, inset 0 -3px 0 #47556988, 0 4px 0 #334155, 0 8px 14px #0008; }
.chip.pass .disc { background: radial-gradient(circle at 35% 28%, #fff, #94a3b8 70%); border-color: #47556988; box-shadow: inset 0 0 0 3px #e2e8f0, inset 0 2px 4px #fff; color: #0f172a; }
.chip.challenge { color: #fff; border-color: #4a0a0a; background: radial-gradient(130% 170% at 28% 15%, #fca5a5 0%, #ef4444 40%, #b91c1c 80%, #7f1d1d 100%); box-shadow: inset 0 2px 0 #fecaca, inset 0 -3px 0 #7f1d1d88, 0 4px 0 #4a0a0a, 0 8px 14px #0008; }
.chip.block, .chip.wa { color: #fff; border-color: #0b1e5e; background: radial-gradient(130% 170% at 28% 15%, #93c5fd 0%, #3b82f6 40%, var(--blue) 80%, var(--blue-d) 100%); box-shadow: inset 0 2px 0 #bfdbfe, inset 0 -3px 0 #00277688, 0 4px 0 #0b1e5e, 0 8px 14px #0008; }
.chip.wa { border-color: #064e2a; background: radial-gradient(130% 170% at 28% 15%, #86efac 0%, #22c55e 40%, #15803d 80%, #064e2a 100%); box-shadow: inset 0 2px 0 #bbf7d0, inset 0 -3px 0 #064e2a88, 0 4px 0 #064e2a, 0 8px 14px #0008; }
.chip.challenge .disc, .chip.block .disc { color: #fff; background: radial-gradient(circle at 35% 28%, #ffffff55, #0003 75%); border-color: #fff8; box-shadow: inset 0 0 0 3px #ffffff33; }
.info {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: var(--yellow);
  font-size: 1.25rem; cursor: help; touch-action: manipulation;
}
.share-row .chip { flex: 1 1 130px; justify-content: center; padding-left: 18px; }

.mcoin {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff1a0, #e9ae00 68%, #a86b00); border: 1px solid #7a5200;
}

/* ---- tooltip ---- */
.tip {
  position: fixed; z-index: 60; max-width: min(280px, calc(100vw - 16px)); padding: 8px 10px; border-radius: 8px;
  background: #f8fafc; color: #0f172a; font-size: .82rem; font-weight: 600; line-height: 1.3;
  box-shadow: 0 6px 18px #000a; pointer-events: none;
}

/* ---- landing ---- */
.landing { position: relative; display: flex; flex-direction: column; gap: 28px; overflow-x: clip; padding-bottom: 8px; }
.landing > section, .landing > footer { position: relative; z-index: 1; }
.rain { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.rain i {
  position: absolute; top: -40px; left: var(--x); width: var(--z); height: var(--z); border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff1a0, #f0b400 60%, #8a5a00); border: 1px solid #7a5200;
  opacity: .55; animation: fall var(--d) linear var(--s) infinite, spin 1.4s linear var(--s) infinite;
}
@keyframes fall { from { translate: 0 0; } to { translate: 0 calc(100vh + 80px); } }
@keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }

.hero { text-align: center; padding-top: 10px; }
.hero h1 { font-size: clamp(2.6rem, 11vw, 4.6rem); line-height: 1; font-weight: 900; letter-spacing: -.02em; filter: drop-shadow(0 4px 0 #0008); }
.hero h1 span, .h-sm span { background: linear-gradient(90deg, var(--yellow), #8cf08c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline {
  margin: 12px auto 0; max-width: 18em; font-size: clamp(1.25rem, 5.4vw, 2rem); font-weight: 900; line-height: 1.15;
  color: var(--yellow); text-shadow: 0 0 18px #ffdf0055, 0 3px 0 #0008;
}
.sub { text-align: center; color: var(--dim); margin: 8px 0 0; }

.fan { position: relative; height: 200px; width: 100%; max-width: 440px; margin: 14px auto 6px; perspective: 900px; --step: 57px; }
.fcard {
  position: absolute; left: 50%; top: 14px; width: 86px; height: 126px; margin-left: -43px; transform-style: preserve-3d;
  transform: translateX(calc(var(--i) * var(--step))) translateY(calc(var(--a) * 9px)) rotateZ(calc(var(--i) * 9deg)) rotateY(calc(var(--i) * -10deg)) rotateX(8deg);
  z-index: calc(10 - var(--a));
}
.fcard-in {
  position: absolute; inset: 0; border-radius: 12px; border: 3px solid var(--c); overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 60%, #000), #0a0f18 90%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center;
  box-shadow: 0 10px 22px #000a, inset 0 0 0 2px #ffffff22; animation: bob 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s);
}
.fcard-in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, #ffffff30 50%, transparent 65%); background-size: 250% 100%; animation: shine 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
.fe { font-size: 2.3rem; filter: drop-shadow(0 3px 2px #0008); }
.fcard-in b { font-size: .8rem; }
.fcard-in small { font-size: .6rem; color: #ffffffb0; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotateY(-7deg); } 50% { transform: translateY(-12px) rotateY(7deg); } }
@keyframes shine { 0% { background-position: 150% 0; } 60%, 100% { background-position: -50% 0; } }

.cta {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; min-height: 64px; padding: 8px 28px 8px 8px;
  border: 2px solid var(--gold-edge); border-radius: 999px; font-size: 1.2rem; font-weight: 900; color: #2a1b00; cursor: pointer;
  background: radial-gradient(130% 170% at 28% 15%, var(--gold-hi) 0%, var(--gold) 38%, var(--gold-lo) 78%, #8a5a00 100%);
  box-shadow: inset 0 2px 0 #fff8c8aa, inset 0 -4px 0 #7a520088, 0 5px 0 var(--gold-edge), 0 10px 22px #000a, 0 0 28px #ffdf0044;
  animation: pulse 2.4s ease-in-out infinite; touch-action: manipulation;
}
.cta .disc { width: 46px; height: 46px; font-size: 1.4rem; }
.cta:active { transform: translateY(3px); }
@keyframes pulse { 0%, 100% { box-shadow: inset 0 2px 0 #fff8c8aa, inset 0 -4px 0 #7a520088, 0 5px 0 var(--gold-edge), 0 10px 22px #000a, 0 0 18px #ffdf0033; } 50% { box-shadow: inset 0 2px 0 #fff8c8aa, inset 0 -4px 0 #7a520088, 0 5px 0 var(--gold-edge), 0 10px 22px #000a, 0 0 40px #ffdf0088; } }

.card-box, .play { background: linear-gradient(#0d2236ee, #081726ee); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.play { max-width: 460px; width: 100%; margin: 0 auto; border-color: #ffdf0066; box-shadow: 0 0 0 1px #00000066, 0 12px 30px #000a; }
.form { display: flex; flex-direction: column; gap: 10px; }
.ts { display: flex; justify-content: center; }
.ts:empty { display: none; }
.or { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: .85rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.how h2, .cards-sec h2, .share-sec h2 { text-align: center; color: var(--yellow); margin-bottom: 12px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { display: flex; gap: 12px; align-items: center; background: #0b1c2cd9; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.steps h3 { margin: 0 0 2px; }
.steps p { margin: 0; color: var(--dim); font-size: .9rem; }
.role-grid { display: grid; gap: 10px; }
.role-info { display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 35%, #07101a), #07101a 70%); border: 1px solid color-mix(in srgb, var(--c) 70%, #000); border-radius: var(--r); padding: 10px 12px; }
.role-info h3 { margin: 0 0 2px; font-size: 1.05rem; }
.role-info p { margin: 2px 0 0; font-size: .88rem; }
.role-info .flavor, .c-flavor { color: var(--dim); font-style: italic; }
.ri-emoji { font-size: 2rem; }
.orig-p { color: var(--dim); font-weight: 600; font-size: .85em; }
.cards-sec { text-align: center; }
.cards-sec .role-info { text-align: left; }
.share-sec .share-row { max-width: 560px; margin: 0 auto; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.share-block { display: flex; flex-direction: column; gap: 6px; }
.share-block h3 { margin: 0; text-align: center; color: var(--dim); }
.foot { text-align: center; color: var(--dim); font-size: .9rem; padding: 6px 0 4px; }

/* ---- telas simples ---- */
.screen { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.h-sm { font-size: 1.8rem; font-weight: 900; }
.invite { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.code { font-size: 2.6rem; font-weight: 800; letter-spacing: .25em; text-align: center; color: var(--yellow); font-variant-numeric: tabular-nums; }
.plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.plist li { background: var(--panel2); padding: 10px 12px; border-radius: 8px; display: flex; align-items: center; gap: 8px; }
.badge { background: var(--yellow); color: #1a1400; font-size: .7rem; font-weight: 800; padding: 2px 6px; border-radius: 6px; text-transform: uppercase; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.on { background: var(--ok); }
.dot.off { background: #6b7280; }

/* ---- mesa ---- */
.topbar { display: flex; align-items: center; gap: 10px; padding: 4px 0 10px; }
.topbar .room { font-weight: 800; letter-spacing: .08em; margin-right: auto; }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; background: var(--panel2); padding: 6px 10px; border-radius: 999px; }
.timer.urgent { background: var(--danger); color: #fff; }
.cols { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.side { display: contents; }
.helpcard.docked { display: none; }
.main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.players {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; perspective: 900px; padding: 12px; border-radius: 18px;
  background: radial-gradient(120% 130% at 50% 0%, #11804f, #0a5234 55%, #062f1f); border: 5px solid #4a2c12;
  box-shadow: inset 0 0 40px #000a, 0 10px 24px #0008, 0 0 0 2px #2a170a;
}
.pl {
  background: #08121ce6; border: 2px solid var(--line); border-radius: var(--r); padding: 8px; min-width: 0;
  transform: rotateX(7deg); transform-origin: 50% 100%; box-shadow: 0 8px 14px #0007;
}
.pl.turn { border-color: var(--yellow); box-shadow: 0 0 0 2px #ffdf0044, 0 0 18px #ffdf0055, 0 8px 14px #0007; }
.pl.winner { border-color: var(--ok); }
.pl.dead { opacity: .6; }
.pl-head { display: flex; align-items: center; gap: 6px; }
.pl-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.pl-coins { margin: 2px 0 6px; font-variant-numeric: tabular-nums; font-weight: 700; }
.pl-cards { display: flex; gap: 6px; flex-wrap: wrap; perspective: 320px; }
.pl-dead { margin-top: 4px; font-size: .75rem; font-weight: 800; color: var(--danger); text-transform: uppercase; }

.banner { background: var(--panel2); border-left: 4px solid var(--yellow); border-radius: 8px; padding: 10px 12px; font-weight: 600; }
.banner-block { margin-top: 4px; color: var(--warn); }
.actions { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.actions.over { text-align: center; border-color: var(--ok); }
.actions.over h2 { color: var(--yellow); font-size: 1.4rem; text-transform: none; letter-spacing: 0; text-shadow: 0 0 16px #ffdf0066; }
.moves { display: grid; grid-template-columns: 1fr; gap: 10px; }

.hand h2 { margin-bottom: 6px; }
.hand-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; perspective: 800px; align-items: start; }

/* ---- cartas ---- */
.card {
  --c: #444; position: relative; border-radius: 10px; border: 2px solid var(--c); color: var(--fg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #000), #0b0f17 85%);
  display: flex; flex-direction: column; gap: 2px; text-align: left;
}
.card .c-top { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.card .c-emoji { font-size: 1.4rem; }
.card .c-name { font-weight: 800; }
.orig { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 999px; background: #000a; border: 1px solid #ffffff44; color: var(--gold-hi); }
.card .c-info { display: block; font-size: .8rem; margin-top: 4px; }
.card .c-flavor { display: block; font-size: .75rem; margin-top: 6px; }
.card.mini { width: 60px; min-height: 66px; padding: 4px 2px; align-items: center; justify-content: center; text-align: center; }
.card.mini .c-name { font-size: .56rem; overflow-wrap: anywhere; }
.card.mini .orig { font-size: .5rem; padding: 0 4px; }
.card.mini.back {
  border-color: #ffdf0088; min-height: 66px; overflow: hidden; transform: rotateY(-14deg) rotateX(6deg);
  background:
    radial-gradient(circle at 50% 50%, #ffdf0033 0 9px, transparent 10px),
    repeating-linear-gradient(45deg, #0b3d91 0 5px, #072a66 5px 10px);
  box-shadow: 3px 4px 6px #0008;
}
.card.mini.back::after { content: "★"; margin: auto; color: var(--yellow); font-size: 1.1rem; text-shadow: 0 1px 2px #000; }
.card.mini.lost .c-emoji { font-size: 1.1rem; }
.card.lost { opacity: .6; filter: grayscale(.6); }
.card .c-lost { font-size: .5rem; font-weight: 800; text-transform: uppercase; color: var(--danger); }
.card.full { padding: 10px; }
.card.full .c-emoji { font-size: 2rem; }
.card.full .c-name { font-size: 1.1rem; }

.hand-card { padding: 10px; min-height: 64px; cursor: pointer; transform-style: preserve-3d; touch-action: manipulation; font: inherit; }
.hand-card .c-more { display: none; }
.hand-card.open .c-more { display: block; }
.hand-card.open { grid-column: 1 / -1; box-shadow: 0 0 0 2px var(--c), 0 8px 18px #000a; }
.hand-card.flip { animation: flip .42s ease-out; }
@keyframes flip { from { transform: rotateY(-90deg); } to { transform: rotateY(0); } }

/* ---- log ---- */
.log { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
#log { list-style: none; margin: 8px 0 0; padding: 0; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
#log li { padding: 4px 0; border-bottom: 1px solid var(--line); }
#log li:last-child { border: 0; font-weight: 600; }

/* ---- modal ---- */
.overlay { position: fixed; inset: 0; background: #000b; display: flex; align-items: flex-end; justify-content: center; z-index: 40; }
.modal { background: var(--panel); width: 100%; max-width: 560px; max-height: 90dvh; overflow-y: auto; border-radius: 16px 16px 0 0; padding: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); border: 1px solid var(--line); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.modal-head h2 { color: var(--fg); text-transform: none; font-size: 1.05rem; }
.modal-body { display: flex; flex-direction: column; gap: 10px; }
.pick-grid, .ref-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pick { background: none; border: 3px solid transparent; border-radius: 12px; padding: 0; cursor: pointer; text-align: left; }
.pick.sel { border-color: var(--yellow); }
.ref { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* ---- toast / conexão ---- */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 70; pointer-events: none; padding: 0 12px; }
.toast { background: #000e; border: 1px solid var(--line); padding: 10px 14px; border-radius: 10px; max-width: 460px; }
.conn { position: sticky; top: var(--gbar-h); z-index: 24; background: var(--warn); color: #1a1000; text-align: center; font-weight: 700; padding: 6px; }

@media (min-width: 700px) {
  .players { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .moves { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .overlay { align-items: center; }
  .modal { border-radius: 16px; }
  .pick-grid { grid-template-columns: repeat(4, 1fr); }
  .ref-cards { grid-template-columns: repeat(3, 1fr); }
  .hand-cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .hand-card.open { grid-column: auto; }
  .fan { height: 270px; max-width: 700px; --step: 112px; }
  .fcard { width: 118px; height: 172px; margin-left: -59px; }
  .fe { font-size: 3.2rem; }
  .fcard-in b { font-size: 1rem; }
  .fcard-in small { font-size: .75rem; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li { flex-direction: column; text-align: center; }
  .role-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media (min-width: 1024px) {
  #app:has(.table) { max-width: 1240px; }
  .cols { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "main side" "log side"; gap: 14px 18px; align-items: start; }
  .main { grid-area: main; }
  .log { grid-area: log; }
  .side {
    display: flex; flex-direction: column; gap: 12px; grid-area: side; position: sticky; top: calc(var(--gbar-h) + 10px);
    max-height: calc(100dvh - var(--gbar-h) - 20px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  .helpcard.docked { display: block; }
  .help-btn { display: none; }
  #log { max-height: 30dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .rain { display: none; }
  .fcard-in, .fcard-in::after, .cta, .hand-card.flip { animation: none; }
  .chip, .btn { transition: none; }
}

.invite input[readonly], input[readonly] { user-select: all; -webkit-user-select: all; }

/* ---- carta de ajuda rápida (modelo: cartas físicas) ---- */
.helpcard {
  --script: "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive;
  --ink: #3b2a14; --gold: #9c7a2e;
  position: relative; padding: 14px 14px 12px; border-radius: 14px; color: var(--ink); font-size: .84rem; line-height: 1.3;
  background: linear-gradient(#fdf8ea, #f5ecd2);
  box-shadow: 0 10px 24px #000a, inset 0 0 0 3px #fdf8ea, inset 0 0 0 4.5px var(--gold);
}
.orn { position: absolute; width: 22px; height: 22px; border: 2px solid var(--gold); pointer-events: none; }
.orn::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.orn.tl { top: 9px; left: 9px; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.orn.tr { top: 9px; right: 9px; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.orn.bl { bottom: 9px; left: 9px; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.orn.br { bottom: 9px; right: 9px; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
.orn.tl::after { top: -4px; left: -4px; }
.orn.tr::after { top: -4px; right: -4px; }
.orn.bl::after { bottom: -4px; left: -4px; }
.orn.br::after { bottom: -4px; right: -4px; }
.hc-tabs { display: flex; gap: 2px; justify-content: center; margin: 0 8px 8px; border-bottom: 1.5px solid var(--gold); }
.hc-tab {
  font-family: var(--script); font-size: 1.1rem; font-weight: 700; background: none; border: 0; border-bottom: 3px solid transparent;
  margin-bottom: -1.5px; padding: 4px 8px; min-height: 44px; white-space: nowrap; color: #7a6a4a; cursor: pointer; touch-action: manipulation;
}
.hc-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.hc-tab:focus-visible, .hc-manual:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.hc-body { padding: 0 6px; }
.hc-role + .hc-role { border-top: 1px dotted var(--gold); margin-top: 5px; padding-top: 5px; }
.hc-role h4 { margin: 0; font-family: var(--script); font-size: 1.3rem; line-height: 1.05; color: color-mix(in srgb, var(--c) 78%, #000); }
.hc-role h4 small { font-size: .75em; font-weight: 400; opacity: .85; }
.helpcard p { margin: 2px 0 0; }
.hc-intro { font-family: var(--script); font-size: 1.15rem; font-weight: 700; margin: 2px 0 8px !important; }
.hc-turn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hc-turn li::before { content: "✱ "; color: var(--gold); font-weight: 900; }
.hc-turn small { color: #6b5a3a; }
.hc-foot { margin: 12px 0 0 !important; padding: 8px 10px; border-radius: 8px; background: #3b2a14; color: #ffe9a8; font-weight: 800; text-align: center; }
.hc-manual {
  display: block; width: calc(100% - 12px); margin: 8px 6px 0; min-height: 44px; border-radius: 10px; border: 1.5px solid var(--gold);
  background: #fffaf0; color: var(--ink); font-weight: 800; cursor: pointer; touch-action: manipulation;
}
.hc-manual:hover { background: #fff1c9; }
.helpcard.sheet { box-shadow: inset 0 0 0 3px #fdf8ea, inset 0 0 0 4.5px var(--gold); }

/* ---- cartas fora do jogo ---- */
.gy { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.gy-empty { margin: 6px 0 0; color: var(--dim); font-size: .85rem; text-align: center; }
.gy-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.gy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 2.6em; align-items: center; gap: 8px; }
.gy-name { display: flex; flex-direction: row; align-items: baseline; gap: 6px; min-width: 0; line-height: 1.1; }
.gy-name b { font-size: .9rem; color: color-mix(in srgb, var(--c) 45%, #fff); }
.gy-name small { color: var(--dim); font-size: .7rem; }
.gy-slots { display: flex; gap: 5px; }
.gy-slot {
  width: 26px; height: 32px; border-radius: 6px; border: 2px dashed #ffffff30; display: grid; place-items: center; font-size: .95rem;
}
.gy-slot.on { border: 2px solid var(--c); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 60%, #000), #0b0f17 90%); filter: grayscale(.25); }
.gy-n { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dim); }
.gy-row.has .gy-n { color: var(--fg); }

/* ---- manual ---- */
.modal.wide { max-width: 760px; }
.manual { display: flex; flex-direction: column; gap: 16px; line-height: 1.5; }
.m-lead { margin: 0; color: var(--dim); }
.m-sec h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--yellow); font-size: 1.08rem; }
.m-n {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .9rem; font-weight: 900; color: #3a2600;
  background: radial-gradient(circle at 35% 28%, #fff1a0, #e9ae00 68%, #a86b00);
}
.m-sec p { margin: 6px 0; }
.m-sec ul, .m-sec ol { margin: 6px 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.m-note { background: var(--panel2); border-left: 4px solid var(--yellow); border-radius: 8px; padding: 8px 10px; }
.m-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: .9rem; }
.m-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.m-table tr { display: block; background: #0b1c2cd9; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
.m-table td { display: grid; grid-template-columns: 6.8em minmax(0, 1fr); gap: 8px; padding: 3px 0; }
.m-table td::before { content: attr(data-l); color: var(--dim); font-weight: 700; }
@media (min-width: 700px) {
  .m-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .m-table tr { display: table-row; background: none; border: 0; padding: 0; margin: 0; }
  .m-table td, .m-table th { display: table-cell; padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
  .m-table td::before { content: none; }
  .m-table th { color: var(--dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
}

/* ============ menu drawer ============ */
.brand .bn b { color: var(--yellow); }
#btn-menu[aria-expanded="true"] { background: var(--yellow); color: #1a1400; }
.drawer-ov { position: fixed; inset: 0; z-index: 49; background: #000a; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(320px, 86vw); overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; background: var(--panel); border-left: 2px solid var(--line);
  padding: 12px; padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: calc(12px + env(safe-area-inset-bottom));
  box-shadow: -10px 0 30px #000a; animation: drawer-in .18s ease-out;
}
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-size: 1.1rem; }
.mi {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 10px; width: 100%;
  background: var(--panel2); border: 1px solid var(--line); color: var(--fg); font-weight: 700; font-size: 1rem;
  text-decoration: none; text-align: left; cursor: pointer; touch-action: manipulation;
}
.mi:hover { border-color: var(--yellow); }
.mi:focus-visible { outline: 3px solid #7aa7ff; outline-offset: 2px; }
.mi .ico { width: 1.6em; text-align: center; }
.mi.off .ico { opacity: .5; }
.mi-state { margin-left: auto; color: var(--dim); font-weight: 600; }
@media (max-width: 899px), (orientation: landscape) and (max-height: 600px) {
  .hdr-opt { display: none; } /* Som/Música vivem no drawer em telas pequenas */
}
@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }

/* ============ fim de jogo: pontos + revanche ============ */
.score { display: flex; flex-direction: column; gap: 6px; }
.score h3 { margin: 0; color: var(--dim); }
.score-t { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.score-t th, .score-t td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.score-t th:first-child { text-align: left; }
.score-t thead th { color: var(--dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.score-t tbody th { font-weight: 700; }
.score-t .pts { font-weight: 900; color: var(--yellow); }
.score-t tr.win { background: #ffdf0022; }
.score-t tr.me th { text-decoration: underline dotted; }
.score-f { margin: 0; color: var(--dim); font-size: .8rem; }
.rematch { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r); background: var(--panel2); border: 2px solid var(--yellow); }
.rm-t { margin: 0; }
.rm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; }
.rm-list li { white-space: nowrap; }
.btn.big { min-height: 64px; width: 100%; font-size: 1.25rem; }
.modal.center .modal-body { text-align: center; }
.modal .gy > h2 { display: none; }
.gy-btn { display: none; }
.rotate-hint {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding: 4px 4px 4px 12px;
  border-radius: 10px; background: var(--panel2); border: 1px solid var(--yellow); font-weight: 600; font-size: .9rem;
}

/* ============ celular deitado: mesa horizontal, sem scroll ============ */
@media (orientation: landscape) and (max-height: 600px) {
  :root { --gbar-h: 40px; }
  .gbar { padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); }
  .gbar .icon { min-width: 36px; min-height: 36px; font-size: 1rem; }
  body:has(.table) { height: 100dvh; overflow: hidden; }
  body:has(.table) .bn { display: none; }
  #app:has(.table) {
    max-width: none; padding: 4px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .table { height: calc(100dvh - var(--gbar-h) - 8px - env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
  /* o topbar da mesa sobe para dentro da barra global (header total = 40px) */
  .topbar {
    position: fixed; top: 0; left: 52px; right: 52px; height: var(--gbar-h); z-index: 26; padding: 0; gap: 8px; justify-content: flex-end;
  }
  .topbar .room { margin-right: auto; font-size: .85rem; }
  .topbar .icon { min-width: 34px; min-height: 34px; }
  .topbar .btn.out { min-height: 34px; padding: 2px 12px; font-size: .85rem; }
  .gy-btn, .help-btn { display: inline-grid; place-items: center; }
  .rotate-hint { display: none; }

  .cols {
    flex: 1; min-height: 0; width: 100%; gap: 0 8px;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "board banner" "board act" "board hand" "log log";
    align-items: stretch;
  }
  .table.over .cols { grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr); }
  .main { display: contents; }
  .side { display: none; }
  .players { grid-area: board; }
  .banner { grid-area: banner; }
  .actions { grid-area: act; }
  .hand { grid-area: hand; }
  .log { grid-area: log; }
  .banner { margin-bottom: 4px; padding: 4px 8px; font-size: .78rem; }

  /* assentos: grade compacta que ocupa a maior área */
  .players {
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 6px; padding: 6px;
    border-width: 3px; border-radius: 12px; min-height: 0; overflow: auto; align-content: stretch;
  }
  .players[data-n="1"], .players[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .players[data-n="1"] { grid-template-columns: 1fr; }
  .players[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl { padding: 4px 6px; transform: none; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 0; }
  .pl-head { gap: 4px; font-size: .8rem; }
  .pl-coins { margin: 0; font-size: .9rem; }
  .pl-cards { gap: 3px; flex-wrap: nowrap; }
  .pl-dead { margin: 0; font-size: .6rem; }
  .card.mini { width: 36px; min-height: 46px; flex: none; padding: 2px 0; }
  .card.mini .c-name, .card.mini .orig, .card .c-lost { display: none; }
  .card.mini .c-emoji { font-size: 1.1rem; }
  .card.mini.back { min-height: 46px; transform: none; }

  /* ações / respostas */
  .actions { padding: 6px 8px; gap: 4px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .actions h2 { font-size: .68rem; }
  .actions .wait { margin: 2px 0; font-size: .85rem; }
  .moves { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 6px; }
  .chip { min-height: 38px; padding: 3px 8px 3px 3px; gap: 5px; font-size: .75rem; box-shadow: inset 0 2px 0 #fff8c8aa, inset 0 -2px 0 #7a520088, 0 3px 0 var(--gold-edge), 0 5px 8px #0008; }
  .chip.sm { min-height: 38px; font-size: .78rem; }
  .chip .disc, .chip.sm .disc { width: 28px; height: 28px; font-size: .75rem; border-width: 1px; }
  .chip-t { min-width: 0; }
  .chip-t small { display: none; }
  .chip.sm:not(:has(.disc)) { padding-left: 8px; }
  .chip-wrap .info { display: none; } /* a dica fica no toque longo do próprio botão */
  .share-row .chip { flex-basis: 90px; }

  /* mão compacta */
  .hand { display: flex; align-items: center; gap: 6px; padding-top: 4px; }
  .hand h2 { font-size: .6rem; writing-mode: horizontal-tb; }
  .hand .hint { display: none; }
  .hand-cards { display: flex; flex: 1; gap: 6px; min-width: 0; }
  .hand-card { flex: 1; min-width: 0; min-height: 40px; padding: 3px 6px; }
  .hand-card .c-top { flex-wrap: nowrap; gap: 4px; }
  .hand-card .c-emoji { font-size: 1.1rem; }
  .hand-card .c-name { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hand-card .orig, .hand-card .c-more, .hand-card.open .c-more { display: none; }

  /* registro: faixa de 1-2 linhas rolável */
  .log { padding: 2px 8px; margin-top: 4px; border-radius: 8px; }
  .log h2 { display: none; }
  #log { margin: 0; max-height: 2.9em; font-size: .78rem; gap: 0; overscroll-behavior: contain; }
  #log li { padding: 1px 0; line-height: 1.4; }

  /* fim de jogo: painel rola dentro da coluna */
  .actions.over { text-align: center; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4px 10px; align-content: start; }
  .actions.over > h2 { grid-column: 1 / -1; font-size: 1rem; }
  .actions.over > .score { grid-column: 1; grid-row: 2 / span 3; }
  .actions.over > :not(h2):not(.score) { grid-column: 2; }
  .actions.over .row .btn { flex-basis: 80px; }
  .score-t { font-size: .8rem; }
  .score-t th, .score-t td { padding: 2px 6px; }
  .rematch { padding: 6px; gap: 4px; }
  .actions.over .btn { min-height: 38px; }
  .share-block h3 { margin: 4px 0; }

  /* modais: centralizados, baixos */
  .overlay { align-items: center; }
  .modal { max-height: 94dvh; border-radius: 14px; max-width: 640px; padding: 10px; }
  .pick-grid { grid-template-columns: repeat(4, 1fr); }
  .conn { top: var(--gbar-h); }
  .drawer { padding-top: 6px; gap: 5px; }
  .drawer-head { margin: 0; }
  .mi { min-height: 38px; }
}
/* celulares largos (>=860px): a mão ganha a própria coluna -> mesa em 3 colunas */
@media (orientation: landscape) and (max-height: 600px) and (min-width: 860px) {
  .cols {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(112px, .38fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "board banner hand" "board act hand" "log log log";
  }
  .table.over .cols { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr) minmax(112px, .3fr); }
  .hand { flex-direction: column; align-items: stretch; align-self: stretch; padding-top: 0; overflow-y: auto; }
  .hand-cards { flex-direction: column; flex: none; }
  .hand-card { flex: none; }
}