/* Quem É? — visual de jogo de mesa: cores vivas, letra grossa com contorno, retratos com fita, mão de cartas. */
:root {
  --ink: #1c0b2e; --text: #ffffff; --muted: #ffd9c2; --faint: #b9a3c9;
  --gold: #ffd23f; --gold2: #ff9f1c; --ok: #4ade80; --bad: #ff4d5a; --cyan: #38c6f4; --blue: #2f7df6;
  --wine: #5a0d1c; --plate: rgba(28, 11, 46, .72);
  font-family: 'Nunito', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2a0a12; color: var(--text); }
body { -webkit-tap-highlight-color: transparent; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input { font: inherit; }
[hidden] { display: none !important; }

/* letra de jogo: grossa, contorno escuro e sombra em degrau */
.chunky, .logo-t, .mi b, .endtitle, .stamp, .pop, .title-card b, .vs-word, .countdown, .lobby-head b, .coll-head b {
  font-family: 'Lilita One', 'Outfit', sans-serif; letter-spacing: .01em; paint-order: stroke fill;
  -webkit-text-stroke: 6px var(--ink); text-shadow: 0 5px 0 var(--ink), 0 10px 24px rgba(0,0,0,.45);
}

#stage { position: fixed; inset: 0; z-index: 0; }
#stage canvas { display: block; width: 100% !important; height: 100% !important; touch-action: manipulation; }
#glow { position: fixed; inset: 0; z-index: 1; pointer-events: none; transition: opacity .6s;
  background: radial-gradient(ellipse 70% 60% at 62% 50%, rgba(255,140,40,0) 0%, rgba(120,10,30,.25) 70%, rgba(40,0,15,.75) 100%),
              linear-gradient(90deg, rgba(60,5,20,.72) 0%, rgba(60,5,20,.25) 34%, rgba(60,5,20,0) 55%); }
body[data-screen="game"] #glow { opacity: .35; }

.screen { position: fixed; inset: 0; z-index: 2; display: none; pointer-events: none; }
.screen.on { display: block; }
.screen.on > * { pointer-events: auto; }

kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 5px; margin-left: 8px;
  font: 800 11px 'Nunito', sans-serif; color: inherit; border: 2px solid currentColor; opacity: .55; border-radius: 5px; -webkit-text-stroke: 0; text-shadow: none; }

.ico { display: inline-block; width: 18px; height: 18px; background: currentColor; vertical-align: -3px; }
.ico.crown { color: var(--gold); -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 7l4.5 4L12 4l4.5 7L21 7l-2 12H5z"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 7l4.5 4L12 4l4.5 7L21 7l-2 12H5z"/></svg>') center/contain no-repeat; }
.ico.fire { color: #ff8a3d; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c1 4 6 6 6 12a6 6 0 1 1-12 0c0-3 2-5 3-6 0 2 1 3 2 3 0-4-1-6 1-9z"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c1 4 6 6 6 12a6 6 0 1 1-12 0c0-3 2-5 3-6 0 2 1 3 2 3 0-4-1-6 1-9z"/></svg>') center/contain no-repeat; }

/* ---------- botões: placas inclinadas com contorno ---------- */
.gb { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 22px;
  transform: skewX(-8deg); border: 3px solid var(--ink); border-radius: 8px; box-shadow: 0 5px 0 var(--ink);
  background: linear-gradient(#ffffff 0%, #e9e2f3 100%); color: var(--ink); font: 400 22px 'Lilita One', sans-serif; white-space: nowrap;
  transition: transform .1s, box-shadow .1s, filter .1s; }
.gb > * { transform: skewX(8deg); }
.gb .t { display: inline-block; }
.gb:hover:not(:disabled) { filter: brightness(1.08); transform: skewX(-8deg) translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.gb:active:not(:disabled) { transform: skewX(-8deg) translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.gb:disabled { filter: grayscale(.7) brightness(.8); cursor: default; }
.gb.pri { background: linear-gradient(#ffe773 0%, #ffbf1f 55%, #ff9f1c 100%); }
.gb.red { background: linear-gradient(#ff8a8f 0%, #ff4d5a 60%, #e0303f 100%); color: #fff; }
.gb.red .t, .gb.blue .t { paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); }
.gb.blue { background: linear-gradient(#8fe0ff 0%, #38c6f4 55%, #2f7df6 100%); color: #fff; }
.gb.ghost { background: rgba(28,11,46,.75); color: #fff; }
.gb.small { height: 40px; font-size: 18px; padding: 0 14px; }

.field { display: flex; align-items: center; height: 50px; background: rgba(28,11,46,.8); border: 3px solid var(--ink); border-radius: 10px; padding: 0 6px 0 14px; gap: 10px; min-width: 250px; }
.field label { font: 900 13px 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); white-space: nowrap; }
.field input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font: 400 22px 'Lilita One', sans-serif; }
.field input::placeholder { color: var(--faint); }
.field.code input { text-transform: uppercase; letter-spacing: .2em; }
.seg { display: inline-flex; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; background: rgba(28,11,46,.8); }
.seg button { height: 44px; padding: 0 18px; font: 400 20px 'Lilita One', sans-serif; color: var(--faint); }
.seg button.on { background: linear-gradient(#ffe773, #ffbf1f); color: var(--ink); }

/* ---------- retratos ---------- */
.avatar { width: 64px; height: 64px; border: 3px solid #fff; border-radius: 8px; overflow: hidden; background: #2a2f4a; box-shadow: 0 0 0 3px var(--ink), 0 8px 18px rgba(0,0,0,.4); flex: none; position: relative; }
.avatar .face { display: block; width: 100%; height: 118%; margin-top: -4%; }
.avatar.big { width: 84px; height: 84px; }
.avatar.huge { width: 150px; height: 150px; border-width: 5px; border-radius: 12px; }
.ribbon { display: inline-block; padding: 3px 26px 3px 12px; font: 900 15px 'Nunito', sans-serif; color: #fff; white-space: nowrap;
  background: linear-gradient(90deg, var(--rc, #2f9fd8) 0%, var(--rc, #2f9fd8) 70%, rgba(47,159,216,0) 100%); transform: skewX(-12deg); text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.ribbon > span { display: inline-block; transform: skewX(12deg); }
.count { display: inline-flex; align-items: center; gap: 3px; font: 400 22px 'Lilita One', sans-serif; paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); }
.count::before { content: ''; width: 14px; height: 18px; border: 2px solid #fff; border-radius: 3px; background: rgba(255,255,255,.2); box-shadow: 3px -3px 0 -1px rgba(255,255,255,.6); margin-right: 3px; }

/* ---------- menu ---------- */
.logo { position: absolute; left: 5vw; top: 7vh; display: flex; align-items: center; gap: 14px; transform: rotate(-3deg); }
.logo-q { width: 74px; height: 74px; display: grid; place-items: center; background: linear-gradient(#ffe773, #ff9f1c); color: var(--ink); font: 400 62px 'Lilita One', sans-serif; border: 4px solid var(--ink); border-radius: 14px; transform: rotate(-8deg); box-shadow: 0 6px 0 var(--ink); }
.logo-t { font-size: clamp(64px, 8vw, 104px); color: var(--gold); line-height: 1; -webkit-text-stroke: 9px var(--ink); text-shadow: 0 8px 0 var(--ink), 0 14px 30px rgba(0,0,0,.5); }
.mainnav { position: absolute; left: 5vw; top: calc(7vh + 150px); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.mi { display: block; text-align: left; padding: 3px 0; transform-origin: left center; transition: transform .16s cubic-bezier(.3,1.6,.5,1); }
.mi b { display: block; font-size: clamp(34px, 4vw, 48px); line-height: 1.05; color: #fff; -webkit-text-stroke: 7px var(--ink); }
.mi small { display: block; height: 0; overflow: hidden; font: 800 16px 'Nunito', sans-serif; color: var(--muted); text-shadow: 0 2px 6px rgba(0,0,0,.8); transition: height .16s; padding-left: 4px; }
.mi:hover, .mi.sel { transform: scale(1.12) rotate(-2deg); }
.mi.sel b { color: var(--gold); }
.mi:hover small, .mi.sel small { height: 22px; }

.me-card { position: absolute; right: 3vw; top: 4vh; display: flex; align-items: center; gap: 12px; }
.mc-info { text-align: right; }
.mc-info b { display: block; font: 400 26px 'Lilita One', sans-serif; paint-order: stroke fill; -webkit-text-stroke: 5px var(--ink); cursor: pointer; }
.mc-info b:hover { color: var(--gold); }
.mc-info span { display: inline-flex; align-items: center; gap: 4px; background: rgba(28,11,46,.8); border-radius: 999px; padding: 3px 12px 3px 8px; font: 900 16px 'Nunito', sans-serif; }
.mc-info em { font-style: normal; margin-right: 8px; }
.deckpick { position: absolute; right: 3vw; top: calc(4vh + 108px); display: flex; align-items: center; gap: 4px; background: rgba(28,11,46,.8); border: 3px solid var(--ink); border-radius: 12px; padding: 4px; }
.deckpick div { min-width: 150px; text-align: center; }
.deckpick small { display: block; font: 900 12px 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); }
.deckpick b { font: 400 24px 'Lilita One', sans-serif; }
.arrow { width: 40px; height: 48px; font: 400 34px 'Lilita One', sans-serif; color: #fff; opacity: .7; }
.arrow:hover { opacity: 1; color: var(--gold); }

/* ---------- barra de baixo ---------- */
#dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 30px 4vw calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(28,11,46,0) 0%, rgba(28,11,46,.78) 40%, rgba(28,11,46,.92) 100%); display: flex; flex-direction: column; gap: 10px;
  transition: transform .4s cubic-bezier(.4,0,.2,1); }
#dock:empty { display: none; }
#dock.hand-mode { background: none; padding-top: 0; }
#dock.swap > * { animation: dockIn .3s cubic-bezier(.2,1.3,.4,1); }
@keyframes dockIn { from { opacity: 0; transform: translateY(24px); } }
.drow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.drow .grow { flex: 1; }
.dtitle { font: 400 30px 'Lilita One', sans-serif; line-height: 1; paint-order: stroke fill; -webkit-text-stroke: 5px var(--ink); color: var(--gold); }
.dsub { font: 800 16px 'Nunito', sans-serif; color: var(--muted); margin-top: 4px; }
.dlabel { margin-right: 14px; }
.linkbox { display: flex; align-items: center; height: 50px; background: rgba(28,11,46,.8); border: 3px dashed rgba(255,255,255,.35); border-radius: 10px; padding: 0 14px; font: 800 15px 'Nunito', sans-serif; color: #fff; max-width: 42vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; user-select: all; }

/* mão de cartas (perguntas) */
.hand-top { display: flex; align-items: flex-end; gap: 12px; }
.cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.cats button { height: 36px; padding: 0 14px; border-radius: 999px; border: 3px solid var(--ink); background: rgba(28,11,46,.85); font: 400 17px 'Lilita One', sans-serif; color: #fff; white-space: nowrap; display: inline-flex; align-items: center; }
.cats button.on { background: var(--cc, var(--gold)); color: var(--ink); transform: translateY(-3px); box-shadow: 0 3px 0 var(--ink); }
.cats button kbd { margin-left: 6px; height: 16px; min-width: 16px; font-size: 10px; border-width: 1.5px; }
.hand { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 170px; padding: 0 10px; }
.qc { position: relative; flex: none; width: 118px; height: 160px; margin: 0 -14px; border: 3px solid var(--ink); border-radius: 12px;
  background: linear-gradient(170deg, #fff 0%, #f1ecf7 100%); color: var(--ink); padding: 26px 10px 10px; text-align: center;
  font: 900 16px 'Nunito', sans-serif; line-height: 1.15; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 0 var(--ink), 0 14px 26px rgba(0,0,0,.35); transform-origin: 50% 140%;
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px)); transition: transform .18s cubic-bezier(.3,1.5,.5,1), filter .15s; animation: dealIn .45s cubic-bezier(.2,1.3,.4,1) backwards; animation-delay: var(--d, 0ms); }
.qc::before { content: attr(data-g); position: absolute; left: 0; right: 0; top: 0; height: 22px; border-radius: 8px 8px 0 0; background: var(--cc, var(--gold)); font: 400 13px 'Lilita One', sans-serif; color: var(--ink); line-height: 22px; letter-spacing: .04em; }
.qc::after { content: '?'; position: absolute; right: 8px; bottom: 4px; font: 400 22px 'Lilita One', sans-serif; color: var(--cc, var(--gold)); paint-order: stroke fill; -webkit-text-stroke: 3px var(--ink); }
.qc:hover:not(:disabled) { transform: rotate(0deg) translateY(-34px) scale(1.12); z-index: 5; }
.qc:disabled { filter: grayscale(.85) brightness(.75); cursor: default; }
.qc em { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%) rotate(-10deg); font: 400 20px 'Lilita One', sans-serif; font-style: normal; padding: 0 8px; border: 2px solid currentColor; border-radius: 6px; }
.qc em.y { color: #15803d; } .qc em.n { color: #be123c; }
@keyframes dealIn { from { transform: translateY(220px) rotate(20deg); opacity: 0; } }
.qc.guess { width: 130px; margin-left: 20px; background: linear-gradient(170deg, #ff8a8f 0%, #ff4d5a 55%, #c81e3a 100%); color: #fff; font: 400 26px 'Lilita One', sans-serif; paint-order: stroke fill; -webkit-text-stroke: 5px var(--ink); flex-direction: column; gap: 4px; padding-top: 10px; }
.qc.guess::before { display: none; }
.qc.guess::after { content: '?'; position: static; font-size: 64px; color: #fff; -webkit-text-stroke: 7px var(--ink); line-height: .9; order: -1; }
.qc.guess kbd { margin: 0; -webkit-text-stroke: 0; }
.qc.auto { width: 96px; height: 120px; margin-right: 20px; padding: 10px; font-size: 14px; flex-direction: column; gap: 6px; }
.qc.auto::before, .qc.auto::after { display: none; }
.qc.auto i { width: 40px; height: 22px; border-radius: 999px; background: #c9c2d6; border: 2px solid var(--ink); position: relative; }
.qc.auto i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); transition: left .15s; }
.qc.auto.on i { background: var(--ok); } .qc.auto.on i::after { left: 20px; }
.locked .hand .qc:not(.auto) { filter: grayscale(.6) brightness(.7); pointer-events: none; }
.locked .cats { opacity: .6; }
.waitbox { display: inline-flex; align-items: center; gap: 10px; font: 400 24px 'Lilita One', sans-serif; paint-order: stroke fill; -webkit-text-stroke: 5px var(--ink); }
.dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); margin-right: 3px; animation: dot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-6px); } }

/* escolher no chute */
.picks { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; padding: 10px 2px; }
.pk { flex: none; width: 70px; background: #fff; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; transition: transform .12s; box-shadow: 0 4px 0 var(--ink); }
.pk:hover { transform: translateY(-8px) rotate(-3deg); border-color: var(--bad); }
.pk .face { display: block; width: 100%; }
.pk span { display: block; font: 900 12px 'Nunito', sans-serif; color: var(--ink); padding: 1px 0 3px; text-align: center; }
.confirm-face { width: 74px; background: #fff; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; transform: rotate(-4deg); box-shadow: 0 5px 0 var(--ink); }
.confirm-face .face { display: block; width: 100%; }

/* ---------- partida: lugares e letreiros ---------- */
.seats { position: absolute; inset: 0; pointer-events: none; }
.seat { position: absolute; display: flex; flex-direction: column; gap: 4px; pointer-events: auto; transition: opacity .3s, transform .4s; }
.seat .row { display: flex; align-items: center; gap: 10px; }
.seat.op { right: 3vw; top: 3vh; align-items: flex-end; }
.seat.op .row { flex-direction: row-reverse; }
.seat.me { left: 3vw; bottom: calc(var(--dockH, 220px) + 6px); }
.seat .avatar::before { content: ''; position: absolute; inset: 0; }
.seat.active .avatar { box-shadow: 0 0 0 3px var(--ink), 0 0 0 7px var(--gold), 0 0 40px 14px rgba(255,210,63,.8); animation: activePulse 1.2s infinite; }
@keyframes activePulse { 50% { box-shadow: 0 0 0 3px var(--ink), 0 0 0 7px var(--gold), 0 0 60px 22px rgba(255,210,63,.95); } }
.seat .stack { display: flex; flex-direction: column; gap: 8px; }
.seat .who { display: flex; flex-direction: column; gap: 4px; }
.seat.op .who { align-items: flex-end; }
.seat.op .ribbon { --rc: #e8455a; background: linear-gradient(270deg, var(--rc) 0%, var(--rc) 70%, rgba(232,69,90,0) 100%); padding: 3px 12px 3px 26px; }
.seat.me .ribbon { --rc: #f0a21a; }
.mini-secret { display: flex; align-items: center; gap: 8px; background: rgba(28,11,46,.8); border: 3px solid var(--ink); border-radius: 10px; padding: 4px 10px 4px 4px; }
.mini-secret .ms { width: 40px; background: #fff; border-radius: 5px; overflow: hidden; }
.mini-secret .ms .face { display: block; width: 100%; }
.mini-secret small { display: block; font: 900 10px 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); }
.mini-secret b { font: 400 18px 'Lilita One', sans-serif; }
.turnline { position: absolute; left: 50%; top: 2.5vh; transform: translateX(-50%); text-align: center; }
.turnline b { display: block; font: 400 30px 'Lilita One', sans-serif; paint-order: stroke fill; -webkit-text-stroke: 6px var(--ink); text-shadow: 0 4px 0 var(--ink); white-space: nowrap; }
.turnline.me b { color: var(--gold); }
.turnline i { display: block; height: 8px; margin: 6px auto 0; width: 0; max-width: 260px; background: linear-gradient(90deg, var(--gold), var(--gold2)); border: 2px solid var(--ink); border-radius: 999px; transition: width .5s linear; }
.feed { position: absolute; left: 3vw; top: 3vh; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; max-width: 380px; }
.feed li { background: rgba(28,11,46,.78); border-radius: 8px; padding: 5px 12px; font: 800 14px 'Nunito', sans-serif; animation: feedIn .35s cubic-bezier(.2,1.3,.4,1); white-space: nowrap; border-left: 4px solid var(--fc, var(--gold)); }
.feed li:nth-child(n+4) { opacity: .6; } .feed li:nth-child(n+5) { display: none; }
.feed li b { margin-right: 6px; }
.feed li.me { --fc: var(--gold); } .feed li.mate { --fc: var(--cyan); } .feed li.op { --fc: var(--bad); }
.feed li .y { color: var(--ok); } .feed li .n { color: #ff8a8f; }
@keyframes feedIn { from { opacity: 0; transform: translateX(-30px); } }

/* cinema */
.bars i { position: fixed; left: 0; right: 0; height: 0; background: #000; z-index: 8; transition: height .5s cubic-bezier(.4,0,.2,1); }
.bars i:first-child { top: 0; } .bars i:last-child { bottom: 0; }
body.cine .bars i { height: 9vh; }
body.cine .seats, body.cine .turnline, body.cine .feed { opacity: 0; }
body.cine #dock, body.cutting #dock.hide-cut { transform: translateY(115%); }
body.cutting .seat.me { transform: translateY(calc(var(--dockH, 220px) - 20px)); }

.speech { position: absolute; z-index: 9; transform: translate(-50%, -100%) scale(.5); opacity: 0; background: #fff; color: var(--ink); font: 400 24px 'Lilita One', sans-serif; padding: 10px 20px; border: 4px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink); transition: transform .3s cubic-bezier(.3,1.7,.5,1), opacity .2s; max-width: min(480px, 80vw); text-align: center; pointer-events: none; }
.speech::after { content: ''; position: absolute; left: 50%; bottom: -16px; margin-left: -12px; border: 12px solid transparent; border-top: 14px solid var(--ink); border-bottom: 0; }
.speech.on { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.speech.me { background: linear-gradient(#ffe773, #ffbf1f); }

/* SIM / NÃO gigante com raios */
.stamp { position: absolute; z-index: 10; transform: translate(-50%, -50%) scale(0); opacity: 0; font-size: clamp(110px, 17vw, 230px); line-height: 1; pointer-events: none; -webkit-text-stroke: 12px var(--ink); text-shadow: 0 12px 0 var(--ink), 0 20px 40px rgba(0,0,0,.5); }
.stamp::before { content: ''; position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(var(--sc) 0deg 10deg, transparent 10deg 20deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: spin 4s linear infinite; opacity: .75; }
.stamp.good { color: #7cf29b; --sc: rgba(255,240,140,.9); }
.stamp.bad { color: #ff6b76; --sc: rgba(255,150,120,.85); }
.stamp.on { animation: stampIn 1s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes stampIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-12deg); } 22% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(-4deg); } 34% { transform: translate(-50%, -50%) scale(.96) rotate(-4deg); } 82% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15) rotate(-4deg); } }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.pop { position: absolute; left: 50%; top: 42%; z-index: 9; transform: translate(-50%, -50%) scale(0); opacity: 0; color: var(--gold); font-size: clamp(64px, 9vw, 120px); pointer-events: none; white-space: nowrap; }
.pop.on { animation: popIn 1.3s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes popIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(8deg); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(-3deg); } 75% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(.9) rotate(-3deg); } }

.title-card { position: absolute; top: 15vh; z-index: 10; transform: translateX(-50%); text-align: center; opacity: 0; pointer-events: none; }
.title-card small { display: inline-block; font: 900 18px 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .14em; color: var(--ink); background: var(--gold); padding: 3px 14px; border-radius: 999px; border: 3px solid var(--ink); }
.title-card b { display: block; font-size: clamp(50px, 7vw, 96px); color: #fff; white-space: nowrap; line-height: 1.05; margin-top: 6px; }
.title-card b i { font-style: normal; color: var(--gold); margin: 0 .2em; }
.title-card.on { animation: titleIn 1.9s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes titleIn { 0% { opacity: 0; transform: translateX(-50%) scale(.4); } 18% { opacity: 1; transform: translateX(-50%) scale(1.05); } 30% { transform: translateX(-50%) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-20px); } }
.skip { position: fixed; right: 3vw; bottom: calc(9vh + 16px); z-index: 11; font: 400 20px 'Lilita One', sans-serif; color: #fff; opacity: .8; display: flex; align-items: center; paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); }
.skip:hover { opacity: 1; }

/* ---------- VS ---------- */
.overlay { position: fixed; inset: 0; z-index: 12; display: none; }
.overlay.on { display: block; }
#vs { background: radial-gradient(ellipse at center, rgba(255,120,40,.55) 0%, rgba(140,10,30,.9) 60%, rgba(40,0,12,.97) 100%); }
.versus { position: absolute; left: 50%; top: 50%; width: min(1000px, 92vw); height: 300px; transform: translate(-50%, -50%); }
.vs-side { position: absolute; top: 0; bottom: 0; width: 56%; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 70px; }
.vs-side.a { left: 0; clip-path: polygon(0 12%, 100% 0, 88% 100%, 0 88%); background: linear-gradient(90deg, rgba(255,210,63,.15), rgba(255,190,40,.85)); align-items: flex-end; animation: vsA .6s cubic-bezier(.2,1.2,.4,1) backwards; }
.vs-side.b { right: 0; clip-path: polygon(12% 0, 100% 12%, 100% 88%, 0 100%); background: linear-gradient(90deg, rgba(56,198,244,.85), rgba(47,125,246,.15)); align-items: flex-start; animation: vsB .6s cubic-bezier(.2,1.2,.4,1) backwards; }
@keyframes vsA { from { transform: translateX(-120%); } } @keyframes vsB { from { transform: translateX(120%); } }
.vs-p { display: flex; align-items: center; gap: 12px; }
.vs-side.a .vs-p { flex-direction: row-reverse; }
.vs-p b { font: 400 30px 'Lilita One', sans-serif; paint-order: stroke fill; -webkit-text-stroke: 6px var(--ink); }
.vs-bolt { position: absolute; left: 50%; top: -14%; width: 26px; height: 128%; transform: translateX(-50%) rotate(16deg); background: linear-gradient(#fff, #ffe773 40%, #fff 60%, #ffbf1f); clip-path: polygon(40% 0, 100% 0, 62% 46%, 90% 46%, 10% 100%, 38% 54%, 0 54%); filter: drop-shadow(0 0 18px #fff6b0); animation: bolt .5s .3s backwards; }
@keyframes bolt { from { opacity: 0; transform: translateX(-50%) rotate(16deg) scaleY(0); } }
.vs-word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); font-size: 120px; color: var(--gold); font-style: italic; -webkit-text-stroke: 10px var(--ink); animation: vsWord .5s .45s cubic-bezier(.2,1.8,.4,1) backwards; }
@keyframes vsWord { from { transform: translate(-50%, -50%) scale(3) rotate(-8deg); opacity: 0; } }
.lobbyvs { top: 54%; }
.lobbyvs .vs-side { animation: none; }
.slot-empty { display: flex; align-items: center; gap: 12px; opacity: .8; }
.slot-empty .avatar { background: rgba(28,11,46,.6); display: grid; place-items: center; font: 400 34px 'Lilita One', sans-serif; color: rgba(255,255,255,.4); animation: dot 1.4s infinite; }
.vs-side.a .slot-empty { flex-direction: row-reverse; }
.slot-empty b { font: 400 22px 'Lilita One', sans-serif; color: rgba(255,255,255,.75); paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); }
.tag-me { font: 900 11px 'Nunito', sans-serif; text-transform: uppercase; background: #fff; color: var(--ink); padding: 1px 6px; border-radius: 4px; }

/* ---------- sala ---------- */
.lobby-head { position: absolute; left: 50%; top: 7vh; transform: translateX(-50%); text-align: center; }
.lobby-head small { display: inline-block; font: 900 16px 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .14em; color: var(--ink); background: var(--gold); padding: 3px 14px; border-radius: 999px; border: 3px solid var(--ink); }
.lobby-head b { display: block; font-size: 64px; line-height: 1.1; color: #fff; }
.lobby-head b span { color: var(--gold); letter-spacing: .06em; }
.countdown { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); z-index: 3; font-size: 220px; color: var(--gold); -webkit-text-stroke: 14px var(--ink); animation: cd 1s infinite; pointer-events: none; }
@keyframes cd { 0% { transform: translate(-50%, -50%) scale(1.5); opacity: .3; } 25% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* ---------- fim de partida ---------- */
#endscreen { background: radial-gradient(ellipse at 50% 90%, rgba(255,190,40,.6) 0%, rgba(160,20,40,.85) 45%, rgba(40,0,12,.95) 100%); text-align: center; }
.endtitle { margin: 7vh 0 0; font-size: clamp(60px, 8vw, 104px); color: var(--gold); font-weight: 400; animation: titleIn2 .6s cubic-bezier(.2,1.6,.4,1); }
.endtitle.lose { color: #ff8a8f; }
@keyframes titleIn2 { from { transform: scale(2.4); opacity: 0; } }
.endsub { font: 800 20px 'Nunito', sans-serif; color: var(--muted); margin-top: 6px; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 26px; margin-top: 5vh; flex-wrap: wrap; padding: 0 4vw; }
.pod { width: 200px; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: podIn .55s cubic-bezier(.2,1.4,.4,1) backwards; }
.pod .medal { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 400 20px 'Lilita One', sans-serif; color: var(--ink); border: 3px solid var(--ink); background: radial-gradient(circle at 35% 30%, #fff6b0, #ffc93a 60%, #d48a00); }
.pod.lose .medal { background: radial-gradient(circle at 35% 30%, #fff, #c9ccd6 60%, #8a90a3); }
.pod .pname2 { font: 400 26px 'Lilita One', sans-serif; paint-order: stroke fill; -webkit-text-stroke: 5px var(--ink); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .frame { width: 180px; padding: 12px 12px 14px; border-radius: 16px; border: 4px solid var(--ink); background: linear-gradient(#ff6a5c, #d8283d); box-shadow: 0 8px 0 var(--ink); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pod.win .frame { background: linear-gradient(#ffe773, #ff9f1c); box-shadow: 0 8px 0 var(--ink), 0 0 50px rgba(255,220,90,.7); }
.pod .frame .avatar { width: 140px; height: 140px; border-width: 5px; }
.pod .secret-of { display: flex; align-items: center; gap: 6px; font: 900 13px 'Nunito', sans-serif; color: var(--ink); }
.pod .secret-of .ms { width: 34px; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; background: #fff; }
.pod .secret-of .ms .face { display: block; width: 100%; }
.pod .prize { display: inline-flex; align-items: center; gap: 6px; background: rgba(28,11,46,.85); border-radius: 999px; padding: 5px 16px 5px 10px; font: 400 22px 'Lilita One', sans-serif; }
@keyframes podIn { from { transform: translateY(80px) scale(.8); opacity: 0; } }

/* ---------- coleção ---------- */
#colecao { background: radial-gradient(ellipse at center, rgba(120,20,40,.75), rgba(30,0,10,.92)); }
.coll-head { position: absolute; left: 5vw; right: 5vw; top: 5vh; display: flex; align-items: flex-end; gap: 30px; }
.coll-head b { font-size: 66px; color: var(--gold); line-height: 1; }
.ctabs { display: flex; gap: 6px; padding-bottom: 8px; }
.ctabs button { height: 40px; padding: 0 16px; border-radius: 999px; border: 3px solid var(--ink); background: rgba(28,11,46,.85); font: 400 18px 'Lilita One', sans-serif; }
.ctabs button.on { background: var(--gold); color: var(--ink); }
.coll-grid { position: absolute; left: 5vw; right: 5vw; top: calc(5vh + 96px); bottom: 140px; overflow: auto; display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px; align-content: start; scrollbar-width: thin; padding: 6px; }
.cc { background: #fff; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 0 var(--ink); animation: podIn .4s backwards; }
.cc .face { display: block; width: 100%; }
.cc span { display: block; font: 900 13px 'Nunito', sans-serif; color: var(--ink); text-align: center; padding: 2px 0 4px; }
.cc.lock { background: #3a2550; } .cc.lock span { color: var(--faint); }

.toast { position: fixed; left: 50%; bottom: calc(var(--dockH, 120px) + 16px); transform: translateX(-50%); z-index: 20; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 5px 0 var(--ink); padding: 9px 18px; font: 400 20px 'Lilita One', sans-serif; animation: feedIn .3s; max-width: 90vw; text-align: center; }

/* ---------- ícones do menu ---------- */
/* ilustração à esquerda, título e subtítulo à direita; grid para não precisar de embrulho em volta de <b> e <small> */
.mi { display: grid; grid-template-columns: auto auto; grid-template-areas: "ico tit" "ico sub"; column-gap: 12px; align-items: center; justify-content: start; }
.mi b { grid-area: tit; }
.mi small { grid-area: sub; }
.mi-ico { grid-area: ico; align-self: center; display: block; width: 56px; height: 56px; transform: rotate(-6deg); transition: transform .22s cubic-bezier(.3,1.6,.5,1); }
.mi:nth-child(even) .mi-ico { transform: rotate(5deg); }
.mi:hover .mi-ico, .mi.sel .mi-ico { transform: rotate(0deg) scale(1.06); }
.mi-ico svg { display: block; width: 100%; height: 100%; overflow: visible; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 3px 0 var(--ink)); }
.mi-ico svg * { transform-box: view-box; }

/* solo: boné que gira e dá um pulinho */
.i-cap { transform-origin: 28px 28px; }
.i-shadow { transform-origin: 29px 49px; }
.mi:hover .i-cap, .mi.sel .i-cap { animation: iCap .8s cubic-bezier(.3,.6,.4,1); }
.mi:hover .i-shadow, .mi.sel .i-shadow { animation: iCapShadow .8s cubic-bezier(.3,.6,.4,1); }
@keyframes iCap {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  15% { transform: translateY(2px) rotate(0deg) scale(1.08, .9); }
  50% { transform: translateY(-11px) rotate(-200deg) scale(1); }
  82% { transform: translateY(0) rotate(-360deg) scale(1.1, .9); }
  100% { transform: translateY(0) rotate(-360deg) scale(1); }
}
@keyframes iCapShadow { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.1); } 50% { transform: scale(.55); opacity: .2; } 82% { transform: scale(1.12); } }

/* contra: cartas que se chocam com faísca */
.i-ca { transform-origin: 14px 44px; }
.i-cb { transform-origin: 42px 44px; }
.i-spark { transform-origin: 28px 9px; transform: scale(0); }
.mi:hover .i-ca, .mi.sel .i-ca { animation: iClashA 1.1s cubic-bezier(.4,0,.3,1) infinite; }
.mi:hover .i-cb, .mi.sel .i-cb { animation: iClashB 1.1s cubic-bezier(.4,0,.3,1) infinite; }
.mi:hover .i-spark, .mi.sel .i-spark { animation: iSpark 1.1s infinite; }
@keyframes iClashA { 0%, 70%, 100% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(-2px) rotate(-6deg); } 40% { transform: translateX(3px) rotate(6deg); } 50% { transform: translateX(1px) rotate(2deg); } }
@keyframes iClashB { 0%, 70%, 100% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(2px) rotate(6deg); } 40% { transform: translateX(-3px) rotate(-6deg); } 50% { transform: translateX(-1px) rotate(-2deg); } }
@keyframes iSpark { 0%, 38% { transform: scale(0) rotate(0deg); } 46% { transform: scale(1.25) rotate(25deg); } 62%, 100% { transform: scale(0) rotate(60deg); } }

/* duo: duas carinhas fazendo toca aqui */
.i-fa { transform-origin: 16px 45px; }
.i-fb { transform-origin: 40px 45px; }
.i-burst { transform-origin: 28px 7px; opacity: 0; }
.mi:hover .i-fa, .mi.sel .i-fa { animation: iHiA 1.1s cubic-bezier(.4,0,.3,1) infinite; }
.mi:hover .i-fb, .mi.sel .i-fb { animation: iHiB 1.1s cubic-bezier(.4,0,.3,1) infinite; }
.mi:hover .i-burst, .mi.sel .i-burst { animation: iBurst 1.1s infinite; }
@keyframes iHiA { 0%, 75%, 100% { transform: translateX(0) rotate(0deg); } 20% { transform: translateX(-1px) rotate(-4deg); } 40% { transform: translateX(1.5px) rotate(4deg); } 52% { transform: translateX(1px) rotate(2.5deg); } }
@keyframes iHiB { 0%, 75%, 100% { transform: translateX(0) rotate(0deg); } 20% { transform: translateX(1px) rotate(4deg); } 40% { transform: translateX(-1.5px) rotate(-4deg); } 52% { transform: translateX(-1px) rotate(-2.5deg); } }
@keyframes iBurst { 0%, 36% { opacity: 0; transform: scale(.4); } 44% { opacity: 1; transform: scale(1.15); } 64%, 100% { opacity: 0; transform: scale(1.3); } }

/* duo x duo: quatro carinhas pulando alternadas */
.i-bolt { transform-origin: 28px 17px; }
.mi:hover .i-p1, .mi:hover .i-p3, .mi.sel .i-p1, .mi.sel .i-p3 { animation: iHop .6s cubic-bezier(.3,0,.5,1) infinite; }
.mi:hover .i-p2, .mi:hover .i-p4, .mi.sel .i-p2, .mi.sel .i-p4 { animation: iHop .6s cubic-bezier(.3,0,.5,1) -.3s infinite; }
.mi:hover .i-bolt, .mi.sel .i-bolt { animation: iBolt .6s ease-in-out infinite; }
@keyframes iHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes iBolt { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.15) rotate(-8deg); } }

/* coleção: roletinha que gira rápido e vai parando */
.i-wheel { transform-origin: 28px 31px; transform: rotate(30deg); }
.i-pointer { transform-origin: 28px 4px; }
.mi:hover .i-wheel, .mi.sel .i-wheel { animation: iSpin 2.8s cubic-bezier(.12,.75,.16,1) forwards; }
.mi:hover .i-pointer, .mi.sel .i-pointer { animation: iTick .1s ease-in-out 16 alternate; }
@keyframes iSpin { from { transform: rotate(30deg); } to { transform: rotate(1290deg); } }
@keyframes iTick { from { transform: rotate(0deg); } to { transform: rotate(14deg); } }

/* opções: engrenagem girando, a pequena no contrapasso */
.i-g1 { transform-origin: 24px 26px; }
.i-g2 { transform-origin: 44px 44px; }
.mi:hover .i-g1, .mi.sel .i-g1 { animation: iGear 2.4s linear infinite; }
.mi:hover .i-g2, .mi.sel .i-g2 { animation: iGearB 2.4s linear infinite; }
@keyframes iGear { to { transform: rotate(360deg); } }
@keyframes iGearB { to { transform: rotate(-480deg); } }

@media (min-width: 761px) and (max-height: 780px) {
  .mi-ico { width: 48px; height: 48px; }
}
@media (max-width: 760px) {
  .mainnav { gap: 0; }
  .mi { column-gap: 9px; padding: 2px 0; }
  .mi-ico { width: 40px; height: 40px; }
  .mi-ico svg { stroke-width: 3.6; filter: drop-shadow(0 2px 0 var(--ink)); }
  .mi small { font-size: 14px; }
  .mi:hover small, .mi.sel small { height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .mi-ico, .mi-ico svg * { animation: none !important; transition: none !important; }
}

/* ---------- celular ---------- */
@media (max-width: 760px) {
  .logo { left: 5vw; top: 4vh; } .logo-q { width: 54px; height: 54px; font-size: 44px; } .logo-t { font-size: 62px; -webkit-text-stroke: 7px var(--ink); }
  .mainnav { top: calc(4vh + 100px); }
  .mi b { font-size: 36px; -webkit-text-stroke: 6px var(--ink); }
  .me-card { top: auto; bottom: calc(var(--dockH, 0px) + 10px); right: 4vw; }
  .me-card .avatar.big { width: 56px; height: 56px; }
  .deckpick { top: 4vh; right: 3vw; transform: scale(.8); transform-origin: top right; }
  body[data-screen="menu"] .deckpick { top: auto; bottom: calc(var(--dockH, 0px) + 84px); }
  #dock { padding: 18px 3vw calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .gb { height: 44px; font-size: 18px; padding: 0 14px; }
  .dtitle { font-size: 24px; } .dsub { font-size: 14px; }
  .field { min-width: 0; flex: 1; }
  .linkbox { max-width: 100%; flex: 1; font-size: 12px; }
  .hand { height: 128px; justify-content: flex-start; overflow-x: auto; overflow-y: visible; padding: 34px 20px 0; scrollbar-width: none; }
  .qc { width: 88px; height: 118px; margin: 0 -8px; font-size: 13px; padding: 22px 6px 6px; }
  .qc:hover:not(:disabled) { transform: rotate(0deg) translateY(-18px) scale(1.06); }
  .qc.guess { width: 96px; font-size: 20px; } .qc.guess::after { font-size: 46px; }
  .qc.auto { width: 74px; height: 96px; font-size: 12px; }
  .cats button { height: 32px; font-size: 15px; padding: 0 11px; } .cats kbd { display: none; }
  .seat.op { top: 1.5vh; right: 2vw; } .seat.me { left: 2vw; }
  .seat .avatar { width: 46px; height: 46px; }
  .seat .ribbon { font-size: 12px; }
  .count { font-size: 18px; }
  .mini-secret { display: none; }
  .turnline { top: auto; bottom: calc(var(--dockH, 220px) + 10px); left: auto; right: 3vw; transform: none; text-align: right; }
  .turnline b { font-size: 22px; }
  .feed { top: 9vh; left: 2vw; max-width: 64vw; } .feed li { font-size: 11px; padding: 3px 8px; } .feed li:nth-child(n+3) { display: none; }
  .versus { height: 360px; }
  .vs-side { width: 100%; height: 48%; padding: 0 24px; }
  .vs-side.a { top: 0; bottom: auto; clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); align-items: flex-start; }
  .vs-side.b { bottom: 0; top: auto; clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%); align-items: flex-end; }
  .vs-side.a .vs-p, .vs-side.a .slot-empty { flex-direction: row; }
  .vs-bolt { display: none; } .vs-word { font-size: 80px; }
  .vs-p b { font-size: 22px; }
  .lobby-head b { font-size: 46px; }
  .podium { gap: 10px; } .pod { width: 150px; } .pod .frame { width: 140px; } .pod .frame .avatar { width: 100px; height: 100px; }
  .endtitle { font-size: 56px; }
  .coll-grid { grid-template-columns: repeat(5, 1fr); top: calc(5vh + 110px); }
  .coll-head { flex-direction: column; align-items: flex-start; gap: 6px; } .coll-head b { font-size: 48px; }
  .countdown { font-size: 150px; }
}

.pk.down { opacity: .35; filter: grayscale(1); transform: scale(.9); box-shadow: none; }
.pk.choose:hover { border-color: var(--gold); box-shadow: 0 4px 0 var(--ink), 0 0 0 3px var(--gold); }
.picks { padding-top: 14px; }