/* Pop Go! — the Ludo of Rede POP. Art: go/design/v1 (Codex), exported by build-game.py. */
:root {
  --bg: #1B1650; --bg2: #2a1a6e; --ink: #fff; --muted: #c7c2f0; --gold: #FFC93C; --gold2: #F59E0B;
  --navy: #0d1446; --line: rgba(255,255,255,.18);
  --red: #EF3340; --green: #22B24C; --yellow: #F7C600; --blue: #1E88E5;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  background-color: #1B1650;
  font-family: 'Baloo 2', 'Sora', system-ui, sans-serif; color: var(--ink);
  background: var(--bg) url(../asset/bg-game.webp) center top / cover fixed;
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  overscroll-behavior: none;
}
body.in-lobby { background-image: url(../asset/bg-lobby.webp); }
button { font: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* platform strip (same as every game page) */
.platform-strip { position: relative; overflow: hidden; padding: 8px 0; flex-shrink: 0; width: 100%; min-height: 58px; }
.platform-strip::before, .platform-strip::after { content: ''; position: absolute; top: 0; bottom: 0; width: 32px; z-index: 2; pointer-events: none; }
.platform-strip::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.platform-strip::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.platform-track { display: flex; align-items: center; gap: 10px; width: max-content; animation: platformMarquee 36s linear infinite; }
.platform-strip:hover .platform-track { animation-play-state: paused; }
@keyframes platformMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.platform-card { flex: 0 0 auto; width: 76px; height: 42px; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.platform-card:active { transform: scale(.92); }
.platform-card img { height: 22px; width: auto; max-width: 90%; object-fit: contain; display: block; }
@media (prefers-reduced-motion: reduce) { .platform-track { animation: none; } }

/* header */
.top { width: 100%; max-width: 480px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px; padding: 4px 12px; }
.top .brand { height: 40px; width: auto; justify-self: center; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.icon-group { display: flex; gap: 4px; }
.icon { width: 38px; height: 38px; border-radius: 13px; display: flex; align-items: center; justify-content: center; padding: 0;
  background: rgba(13,20,70,.4); border: 1.5px solid var(--line); color: #fff; font-weight: 800; font-size: 17px;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1); overflow: hidden; }
.icon:active { transform: scale(.88); }
#btnBack { font-size: 26px; line-height: 1; }

main { width: 100%; max-width: 480px; flex: 1; display: flex; flex-direction: column; padding: 0 12px calc(16px + env(safe-area-inset-bottom)); }
.view { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* jelly buttons */
.jelly { position: relative; border: 0; border-radius: 18px; padding: 13px 22px; width: 100%; max-width: 320px; color: #fff;
  font-weight: 800; font-size: 18px; text-decoration: none; text-align: center; display: block;
  background: linear-gradient(180deg, #ffd85c, #f59e0b); color: #5a2a00;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(0,0,0,.15), 0 5px 0 #b45309, 0 8px 18px rgba(0,0,0,.35);
  transition: transform .12s, box-shadow .12s; }
.jelly:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(0,0,0,.15), 0 1px 0 #b45309, 0 3px 8px rgba(0,0,0,.35); }
.jelly.big { font-size: 22px; padding: 15px 22px; animation: jellyBreath 2.6s ease-in-out infinite; }
.jelly.blue { background: linear-gradient(180deg, #5fb4ff, #1e6fe0); color: #fff; box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.18), 0 5px 0 #0b3d91, 0 8px 18px rgba(0,0,0,.35); }
.jelly.green { background: linear-gradient(180deg, #4ade80, #16a34a); color: #fff; box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.18), 0 5px 0 #14532d, 0 8px 18px rgba(0,0,0,.35); }
.jelly.small { font-size: 15px; padding: 9px 14px; width: auto; }
.jelly:disabled { filter: grayscale(.8) brightness(.8); animation: none; }
@keyframes jellyBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03, .98); } }
.link-btn { background: none; border: 0; color: #fff; text-shadow: 0 1px 3px rgba(0,20,80,.7); text-decoration: underline; font-size: 15px; padding: 6px; }

/* lobby */
.lobby-logo { width: min(240px, 62vw); height: auto; margin-top: 4px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); animation: logoFloat 3.4s ease-in-out infinite; }
@keyframes logoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.lobby-tag { margin: -6px 0 2px; color: #fff; text-shadow: 0 2px 4px rgba(0,20,80,.6); font-weight: 600; text-align: center; }
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 320px; }
.mode { border-radius: 16px; padding: 10px 6px; background: rgba(13,20,70,.45); border: 2px solid var(--line); color: #fff; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mode b { font-size: 17px; }
.mode span { font-size: 12.5px; color: #dfe6ff; }
.mode-pick + .mode-pick { margin-top: -4px; }
.pcard .team { position: absolute; left: 1%; bottom: -4px; z-index: 2; font-size: 10px; font-weight: 800; padding: 0 6px; border-radius: 8px; background: #fff; color: #1B1650; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.pcard .team[data-t="1"] { background: #1B1650; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.wait-pairs { font-size: 13px; color: #fff; text-align: center; margin: -4px 0 0; text-shadow: 0 1px 3px rgba(0,20,80,.7); }
.win-rank li.team-sep { justify-content: center; background: none; border: 0; padding: 0; font-size: 12px; color: var(--muted); }
.mode.on { border-color: var(--gold); background: rgba(255,201,60,.16); box-shadow: 0 0 0 3px rgba(255,201,60,.18); }
.code-join { display: flex; gap: 8px; width: 100%; max-width: 320px; }
.code-join input { flex: 1; min-width: 0; border-radius: 14px; border: 2px solid var(--line); background: rgba(0,0,0,.25); color: #fff;
  padding: 10px 12px; font: inherit; font-size: 17px; letter-spacing: 3px; text-transform: uppercase; text-align: center; }
.code-join input::placeholder { letter-spacing: 0; text-transform: none; color: var(--muted); }
.code-join button { border-radius: 14px; border: 0; padding: 0 16px; background: #fff; color: var(--bg); font-weight: 800; }
.lobby-note { margin: 0; font-size: 14px; color: #fff; text-shadow: 0 1px 3px rgba(0,20,80,.7); text-align: center; }
.howto-inline { width: 100%; background: rgba(13,20,70,.72); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.howto-inline h3 { margin: 0; font-size: 18px; color: var(--gold); }
.howto-inline div { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.35; }
.howto-inline span { font-size: 20px; flex-shrink: 0; }
.howto-inline p { margin: 0; }

/* waiting room */
#waitView h2 { margin: 10px 0 0; font-size: 22px; text-align: center; }
.wait-code { background: rgba(0,0,0,.25); border: 2px dashed var(--gold); border-radius: 18px; padding: 10px 16px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.wait-code span { color: var(--muted); font-size: 13px; }
.wait-code b { font-size: 34px; letter-spacing: 6px; color: var(--gold); line-height: 1; }
.wait-share { display: flex; gap: 8px; }
.wait-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 340px; }
.wseat { border-radius: 16px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 2px solid rgba(255,255,255,.2); background: rgba(13,20,70,.45); min-height: 108px; justify-content: center; }
.wseat .av { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15); font-size: 26px; }
.wseat .av img, .wseat .av span { width: 56px !important; height: 56px !important; }
.wseat b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wseat.empty b { color: #dfe6ff; font-weight: 600; }
.wseat.empty .av { animation: seatPulse 1.4s ease-in-out infinite; }
@keyframes seatPulse { 50% { opacity: .45; } }
.wseat[data-c="0"] { border-color: var(--red); } .wseat[data-c="1"] { border-color: var(--green); }
.wseat[data-c="2"] { border-color: var(--yellow); } .wseat[data-c="3"] { border-color: var(--blue); }
.wait-hint { margin: 0; color: #fff; text-shadow: 0 1px 3px rgba(0,20,80,.7); text-align: center; font-size: 15px; }

/* game */
#gameView { gap: 6px; }
/* bigger board: almost edge to edge (main has 12px side padding) */
#gameView .board-wrap { width: calc(100% + 16px); margin: 0 -8px; }
.sponsor-strip { width: 100%; aspect-ratio: 1600 / 180; background: url(../asset/sponsor-strip.webp) center / 100% 100% no-repeat; position: relative; }
.sponsor-track { position: absolute; left: 3.6%; right: 3.6%; top: 18%; bottom: 18%; overflow: hidden; border-radius: 10px; }
.sponsor-track .row { display: flex; align-items: center; gap: 22px; height: 100%; width: max-content; animation: platformMarquee 40s linear infinite; }
.sponsor-track a { height: 72%; display: flex; align-items: center; }
.sponsor-track img { height: 100%; width: auto; max-width: 110px; object-fit: contain; display: block; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.pcard { position: relative; aspect-ratio: 3 / 1; background: url(../asset/player-card.webp) 0 0 / 400% 100% no-repeat; opacity: .82; transition: opacity .2s, transform .2s; }
.pcard.active { background-image: url(../asset/player-card-active.webp); opacity: 1; transform: scale(1.04); }
.pcard[data-c="1"] { background-position-x: 33.333%; } .pcard[data-c="2"] { background-position-x: 66.667%; } .pcard[data-c="3"] { background-position-x: 100%; }
.pcard.gone { opacity: .45; filter: grayscale(.6); }
.pcard .av { position: absolute; left: 4.17%; top: 12.5%; width: 25%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #fff; }
.pcard .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard .av > span { width: 100% !important; height: 100% !important; padding: 2px !important; }
.pcard .av img.emb { object-fit: contain; padding: 12%; }
.pcard .nm { position: absolute; left: 36%; right: 7%; top: 21%; bottom: 21%; display: flex; flex-direction: column; justify-content: center; line-height: 1.05; overflow: hidden; }
.pcard .nm b { font-size: clamp(11px, 3.2vw, 15px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.pcard[data-c="2"] .nm b { color: #4a2c00; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.pcard .nm small { font-size: clamp(9px, 2.5vw, 11.5px); opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard[data-c="2"] .nm small { color: #4a2c00; }
.pcard .tm { position: absolute; left: 36%; right: 9%; bottom: 12%; height: 5%; border-radius: 4px; background: rgba(0,0,0,.25); overflow: hidden; }
.pcard .tm i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; }
.pcard .tm i.low { background: #ff4d4d; }
.pcard .me { position: absolute; top: -6px; right: 4%; background: var(--gold); color: #5a2a00; font-size: 10px; font-weight: 800; padding: 0 6px; border-radius: 8px; }

.board-wrap { position: relative; width: 100%; aspect-ratio: 1; }
#board { width: 100%; height: 100%; display: block; touch-action: manipulation; }
.toast { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none;
  background: rgba(13,20,70,.9); border: 2px solid var(--gold); border-radius: 16px; padding: 8px 16px; font-weight: 800; font-size: 19px; text-align: center; white-space: nowrap; transition: transform .2s, opacity .2s; }
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.dice-zone { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; }
.dice-tray { position: relative; width: 150px; aspect-ratio: 480 / 300; background: url(../asset/dice-tray.webp) center / contain no-repeat; display: flex; align-items: center; justify-content: center; }
#dice { position: relative; z-index: 2; width: 92px; height: 92px; margin-top: -26px; filter: drop-shadow(0 8px 6px rgba(0,0,0,.35)); }
/* roll: jump up out of the tray, tumble twice, drop back */
#dice.rolling { animation: diceTumble .62s cubic-bezier(.3,.7,.4,1) both; }
@keyframes diceTumble {
  0% { transform: translateY(0) rotate(0) scale(1); }
  30% { transform: translateY(-58px) rotate(260deg) scale(1.15); }
  60% { transform: translateY(-34px) rotate(560deg) scale(1.1); }
  100% { transform: translateY(0) rotate(720deg) scale(1); } }
/* land: squash and bounce */
#dice.land { animation: diceLand .42s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes diceLand {
  0% { transform: scale(1.25, .7); } 45% { transform: scale(.9, 1.15) translateY(-8px); } 100% { transform: scale(1); } }
/* a 6: gold flash behind the dice */
.dice-flash { position: absolute; z-index: 1; left: 50%; top: 32%; width: 130px; height: 130px; transform: translate(-50%, -50%) scale(.4); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255,231,120,.95), rgba(255,170,0,.55) 40%, transparent 70%); pointer-events: none; }
.dice-tray.six .dice-flash { animation: diceFlash .9s ease-out both; }
@keyframes diceFlash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
@media (prefers-reduced-motion: reduce) { #dice.rolling, #dice.land, .dice-tray.six .dice-flash { animation: none; } }
.roll-btn { width: 170px; aspect-ratio: 400 / 160; border: 0; background: url(../asset/btn-roll.webp) 0 0 / 300% 100% no-repeat; color: #6b2d00; font-weight: 800; font-size: 22px; letter-spacing: 1px; padding-bottom: 4px; }
.roll-btn:active:not(:disabled) { background-position-x: 50%; }
.roll-btn:disabled { background-position-x: 100%; color: #6b7280; }
.roll-btn.go { animation: rollPulse 1s ease-in-out infinite; }
@keyframes rollPulse { 50% { transform: scale(1.07); } }
/* reactions + typed chat (same rules as Pop Match: emoji for all, typing for allowed accounts) */
.reaction-bar { display: flex; gap: 6px; width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.reaction-bar::-webkit-scrollbar { display: none; }
.reaction-bar button { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--line); background: rgba(13,20,70,.55); font-size: 21px; padding: 0; transition: transform .12s; }
.reaction-bar button:active { transform: scale(.85); }
.go-chat { display: flex; gap: 6px; width: 100%; }
.go-chat input { flex: 1; min-width: 0; border-radius: 14px; border: 1.5px solid var(--line); background: rgba(0,0,0,.3); color: #fff; padding: 9px 12px; font: inherit; font-size: 15px; }
.go-chat input::placeholder { color: var(--muted); }
.go-chat button { width: 44px; border-radius: 14px; border: 0; background: var(--gold); color: #5a2a00; font-size: 18px; font-weight: 800; }
.cards { position: relative; }
.cards .bubble { position: absolute; bottom: 86%; z-index: 5; background: #fff; color: #1B1650; border-radius: 14px 14px 14px 4px; padding: 4px 10px;
  font-size: 13.5px; font-weight: 700; line-height: 1.25; box-shadow: 0 4px 12px rgba(0,0,0,.35); overflow-wrap: anywhere; animation: bubbleIn .25s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
.cards.bottom .bubble { bottom: auto; top: 86%; border-radius: 4px 14px 14px 14px; }
.cards .bubble.emoji { font-size: 26px; padding: 2px 8px; background: rgba(255,255,255,.92); }
.cards .bubble.out { opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; }
@keyframes bubbleIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* The floating "Dúvidas" support button (src/auth.js, fixed bottom-right, 64px on phones / 76px wider)
   sat right on top of the send button and the last emoji -- same fix as Pop Match: keep its footprint
   free on the right of the two bottom rows. On a wide screen the 480px column is far from it. */
/* the Dúvidas button sits bottom-right: these rows stop short of it (width, not padding: padding doesn't clip a scroller) */
.go-chat, #gameView .talk-row { align-self: flex-start; width: calc(100% - 84px); }
@media (min-width: 481px) { .go-chat, #gameView .talk-row { width: calc(100% - 104px); } }
/* chat history: a 💬 button left of the emoji row opens the table's last 50 messages */
.talk-row { display: flex; gap: 6px; align-items: center; }
.talk-row .reaction-bar { flex: 1; min-width: 0; width: auto; }
.talk-row.no-react .reaction-bar { display: none; }
.talk-log-btn { position: relative; flex: 0 0 auto; width: 44px; height: 40px; border-radius: 12px; border: 1.5px solid var(--gold); background: rgba(13,20,70,.75); font-size: 20px; padding: 0; }
.talk-log-btn:active { transform: scale(.9); }
.talk-unread { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #1B1650; }
.talk-log { position: fixed; left: 8px; right: 8px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60; max-width: 480px; margin: 0 auto; max-height: min(52dvh, calc(100dvh - 140px));   /* sits above the Dúvidas button */ display: flex; flex-direction: column;
  background: rgba(18,16,64,.97); border: 1.5px solid var(--gold); border-radius: 18px; box-shadow: 0 -8px 30px rgba(0,0,0,.45); overflow: hidden; }
.talk-log-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 14px; }
.talk-log-head button { border: 0; background: rgba(255,255,255,.12); color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; }
.talk-log-list { overflow-y: auto; padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.talk-item { color: #fff; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.talk-item .who { font-weight: 800; margin-right: 6px; }
.talk-item .when { color: var(--muted); font-size: 11px; margin-left: 6px; }
.talk-item.emoji .what { font-size: 20px; }
.talk-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 14px 0; }
@media (min-width: 720px) { .go-chat, #gameView .reaction-bar { width: 100%; } }
.net-badge { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 300; background: #b91c1c; color: #fff; font-weight: 700; padding: 6px 14px; border-radius: 20px; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.4); }

/* overlays */
.overlay { position: fixed; inset: 0; z-index: 200; background: rgba(8,6,35,.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 18px; }
.sheet { position: relative; width: 100%; max-width: 420px; max-height: 86dvh; overflow: auto; background: linear-gradient(180deg, #2b2385, #1a1456); border: 2px solid var(--gold); border-radius: 22px; padding: 18px; }
.sheet.center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sheet h2 { margin: 0 0 10px; color: var(--gold); font-size: 22px; }
.sheet ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.4; }
.sheet-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 16px; }
.gate-logo { width: 200px; height: auto; }
.rank-list { display: flex; flex-direction: column; gap: 6px; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: rgba(255,255,255,.07); }
.rank-row.me { background: rgba(245,158,11,.22); }
.rank-row .pos { width: 30px; text-align: center; font-weight: 800; }
.rank-row .pos img { width: 26px; height: auto; display: block; margin: 0 auto; }
.rank-row .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.rank-row .pts { font-weight: 800; color: var(--gold); }

.win-box { position: relative; width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.win-art { position: relative; width: 100%; aspect-ratio: 1200 / 1100; background: url(../asset/win-banner.webp) center / contain no-repeat; }
#crownCanvas { position: absolute; left: 50%; top: -3%; width: 34%; transform: translateX(-50%); }
#winTitle { position: absolute; left: 12%; right: 12%; top: 25%; height: 23%; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: clamp(22px, 7.5vw, 32px); line-height: 1; color: #fff; text-shadow: 0 3px 0 #0b2a8a, 0 0 12px rgba(255,255,255,.4); }
.win-sponsor { position: absolute; left: 36.7%; top: 61.3%; width: 26.6%; aspect-ratio: 1; border-radius: 12%; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; }
.win-sponsor span { position: absolute; top: 4%; font-size: clamp(8px, 2.2vw, 10px); color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.6); z-index: 1; }
.win-sponsor img { width: 72%; height: 72%; object-fit: contain; }
.win-sponsor b { position: absolute; bottom: 4%; font-size: clamp(8px, 2.2vw, 11px); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.win-rank { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.win-rank li { display: flex; align-items: center; gap: 10px; background: rgba(13,20,70,.85); border: 1.5px solid var(--line); border-radius: 14px; padding: 6px 12px; }
.win-rank li.me { border-color: var(--gold); background: rgba(245,158,11,.25); }
.win-rank .medal { width: 30px; aspect-ratio: 200 / 240; background: url(../asset/medals.webp) 0 0 / 400% 100% no-repeat; flex-shrink: 0; }
.win-rank .who { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-rank .pts { color: var(--gold); font-weight: 800; }
.win-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }

#rpGuestBanner { display: none; }
/* room at the end of the lobby so the last card can scroll above the floating "Dúvidas" button */
#lobbyView { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }