* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --bg: #14181f; --panel: #1f2633; --panel2: #181d27; --field: #121620; --line: #2e3748; --text: #eef1f6; --muted: #98a2b5;
  --accent: #ffcc00; --accent-dark: #b38f00; --green: #1fbf5a; --red: #ff6b6b; --blue: #4da6ff;
}
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; transition: background .4s; }
.pixel { font-family: 'Press Start 2P', monospace; }
.hidden { display: none !important; }
a { color: var(--accent); }
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; image-rendering: pixelated; }

/* ---------- jogo ---------- */
#game { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; z-index: 1; }
#hud { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 6px 190px 4px 130px; min-height: 40px; } /* à direita ficam os 4 botões do canto */
.chip { display: flex; align-items: center; gap: 5px; background: #1c222dee; border: 1px solid #ffffff14; border-bottom: 3px solid var(--pc, #ffffff22); border-radius: 9px; padding: 3px 8px; font-size: 13px; font-weight: 600; }
.chip.dead { opacity: .35; filter: grayscale(1); }
.chip.clock { font-variant-numeric: tabular-nums; border-bottom-color: #ffffff22; }
.chip.next-ev { border-bottom-color: #ffd23f88; color: #ffe9a8; font-variant-numeric: tabular-nums; }
.chip.next-ev.soon { color: #ffd23f; border-bottom-color: #ffd23f; animation: pulse .5s infinite alternate; }
.chip.clock.warn { color: var(--red); border-bottom-color: var(--red); animation: pulse .6s infinite alternate; }
.chip.mine { background: #2a2a1aee; border-color: #ffcc0066; }
/* barra do topo: ícones em pixel art, tempo + sala + ping num chip só */
.chip .hud-ic, .chip canvas[data-icon] { width: 16px; height: 16px; image-rendering: pixelated; flex: none; }
.chip .st-pu { display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.info-chip { gap: 6px; } .info-chip b { font-variant-numeric: tabular-nums; } .info-chip small { color: var(--muted); font-size: 11px; font-weight: 600; }
.hud-sep { width: 1px; align-self: stretch; background: #ffffff1c; margin: 0 2px; }
.hud-ping { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding-left: 6px; border-left: 1px solid #ffffff1c; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hud-ping i { width: 7px; height: 7px; border-radius: 2px; background: #7ee2a0; } .hud-ping.ok i { background: #ffe27a; } .hud-ping.bad i { background: #ff6a6a; animation: pulse .6s infinite alternate; } .hud-ping.bad { color: #ff9a9a; }
.hud-ghost { font-size: 10px; color: #c8b8ff; font-weight: 800; text-transform: uppercase; }
.chip.ping.good { color: #7ee2a0; } .chip.ping.ok { color: #ffe27a; } .chip.ping.bad { color: #ff9a9a; animation: pulse .6s infinite alternate; }
.chip.ping { border-bottom-color: currentColor; font-variant-numeric: tabular-nums; }
.st-pu { display: inline-block; }
.st-pu.bump { animation: bump .8s ease-out; color: var(--accent); }
@keyframes bump { 0% { transform: scale(1); } 15% { transform: scale(1.7); } 40% { transform: scale(.9); } 60%, 100% { transform: scale(1); } }
.chip .pn { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
#wrap { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
#cv { image-rendering: pixelated; border-radius: 8px; border: 4px solid #0b0d12; box-shadow: 0 0 0 2px #ffffff18, 0 14px 40px #000c; }
#msg { position: absolute; font-size: 40px; font-weight: 800; text-shadow: 0 3px 0 #000, 0 0 20px #000; pointer-events: none; text-align: center; padding: 0 12px; }
#msg .pixel { display: inline-block; font-size: 56px; color: var(--accent); animation: pop .5s ease-out; }
button.pg-clip { background: linear-gradient(180deg, #ff8ac8, #e8366a); color: #fff; box-shadow: 0 4px 0 #8a1a3a; animation: pulse .9s infinite alternate; }
#callout { position: absolute; left: 0; right: 0; top: 18%; text-align: center; pointer-events: none; z-index: 4; }
#callout .co-t { display: block; font: 400 clamp(26px, 6vw, 54px) 'Press Start 2P', monospace; color: #ffd23f; text-shadow: 0 4px 0 #000, 0 0 24px #ff8a1a; letter-spacing: 2px; }
#callout .co-t.n3 { color: #ff8a1a; } #callout .co-t.n4 { color: #ff4a6a; text-shadow: 0 4px 0 #000, 0 0 30px #ff4a6a; }
#callout small { display: block; margin-top: 8px; font: 800 18px system-ui; text-shadow: 0 2px 0 #000; }
#callout.go { animation: coPop 1.7s ease-out both; }
@keyframes coPop { 0% { transform: scale(2.2); opacity: 0; } 12% { transform: scale(.92); opacity: 1; } 20% { transform: scale(1.05); } 28% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
#msg .hint2 { display: block; font-size: 15px; font-weight: 600; margin-top: 14px; }
#msg .results { margin: 14px auto 0; background: #000b; border: 1px solid #ffffff22; border-radius: 12px; padding: 10px 16px; font-size: 15px; font-weight: 600; text-shadow: none; text-align: left; min-width: 260px; }
#msg .results div { display: flex; gap: 14px; justify-content: space-between; padding: 3px 0; }
#msg .results .pts { color: var(--accent); }
#rotateHint { position: absolute; top: 48px; left: 50%; transform: translateX(-50%); background: #000d; padding: 8px 14px; border-radius: 20px; font-size: 13px; z-index: 7; white-space: nowrap; border: 1px solid #ffcc0066; cursor: pointer; }
#rotateHint b { color: var(--accent); }
body:not(.touch-land) #rotateHint { top: auto; bottom: 206px; } /* em pé: logo acima dos controles, sem cobrir o painel */
#bombBtn canvas { width: 52px; height: 52px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 #0006); }
body.touch-land #bombBtn canvas { width: 58px; height: 58px; }
#powerBtn span canvas { width: 36px; height: 36px; image-rendering: pixelated; display: block; }

#audio { position: fixed; top: 6px; right: 8px; display: flex; gap: 6px; z-index: 30; }
#audio button { width: 36px; height: 32px; margin: 0; padding: 0; background: #1f2633e6; border: 1px solid #ffffff1a; box-shadow: none; font-size: 15px; color: #fff; }
#audio button.off { opacity: .4; }
#audio #fsBtn { width: auto; padding: 0 10px; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
#audio #fsBtn span { font-size: 16px; }
#audio #fsBtn em { font-style: normal; }
#audio #fsBtn.on { background: #2a2a1ae6; border-color: #ffcc0066; }
#volPanel { position: absolute; top: 40px; right: 0; width: 230px; background: #14181ff5; border: 1px solid #ffffff22; border-radius: 14px; padding: 10px 12px; box-shadow: 0 12px 30px #000a; display: flex; flex-direction: column; gap: 8px; animation: rise .15s ease-out; }
#volPanel { width: 250px; }
#volPanel .volHead { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
#audio #volPanel .volHead button { width: auto; height: 26px; padding: 0 10px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
#volPanel .volHint { font-size: 11px; color: var(--muted); line-height: 1.35; }
#volPanel label span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
#audio button .pi { width: 18px; height: 18px; vertical-align: middle; }
#volPanel label { display: grid; grid-template-columns: 92px 1fr 28px; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--text); }
#volPanel input[type=range] { width: 100%; margin: 0; padding: 0; accent-color: var(--accent); background: transparent; border: 0; height: 22px; }
#volPanel b { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { #audio #fsBtn em { display: none; } } /* celular: só o ícone */
body.touch-land #audio #fsBtn em, body.in-game #audio #fsBtn em { display: none; } /* na partida: só o ícone */

#touch { position: absolute; left: 0; right: 0; bottom: 0; height: 190px; pointer-events: none; z-index: 5; }
/* área do polegar esquerdo: tocar em qualquer ponto dela faz o direcional aparecer ali */
#padZone { position: absolute; left: 0; top: 0; bottom: 0; width: 52%; pointer-events: auto; touch-action: none; }
#pad { position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: 20px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, #ffffff10, #ffffff22); border: 2px solid #ffffff38; pointer-events: none; opacity: .45; transition: opacity .12s; }
#pad.active { opacity: 1; transition: none; box-shadow: 0 0 0 6px #ffffff10; }
#knob { position: absolute; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffffffaa, #ffffff55); box-shadow: 0 4px 10px #0008; left: 41px; top: 41px; }
#bombBtn { position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: 36px; width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7a6a, #d8322a); border: 3px solid #ffffff40; box-shadow: 0 6px 0 #8a1a14, 0 10px 20px #0008; pointer-events: auto; display: flex; align-items: center; justify-content: center; font-size: 40px; }
#bombBtn:active { transform: translateY(4px); box-shadow: 0 2px 0 #8a1a14; }
/* botões das bombas especiais (aparecem quando há carga) */
#specialBtns { position: absolute; right: max(132px, calc(env(safe-area-inset-right) + 132px)); bottom: 44px; display: flex; flex-direction: column; gap: 10px; pointer-events: auto; }
#specialBtns > div { position: relative; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; border: 2px solid #ffffff40; box-shadow: 0 4px 0 #0008; }
#specialBtns > div:active { transform: translateY(3px); box-shadow: 0 1px 0 #0008; }
#powerBtn { background: radial-gradient(circle at 35% 30%, #9ae0ff, #2a8ad0); width: 66px !important; height: 66px !important; font-size: 30px !important; }
#specialBtns b { position: absolute; top: -4px; right: -4px; background: #14181f; color: #fff; font-size: 12px; border-radius: 10px; padding: 1px 6px; }
/* celular deitado: mapa no meio, controles nas laterais */
body.touch-land #touch { top: 0; height: auto; }
body.touch-land #pad { bottom: 22%; }
body.touch-land #padZone { top: 44px; width: 40%; }
body.touch-land #bombBtn { bottom: 18%; width: 112px; height: 112px; font-size: 44px; }
body.touch-land #bombBtn:active { transform: translateY(4px); }
body.touch-land #specialBtns { bottom: calc(18% + 124px); top: auto; right: max(42px, calc(env(safe-area-inset-right) + 42px)); }
body.touch-land #hud { padding: 3px 175px 2px 120px; min-height: 0; gap: 4px; }
body.touch-land .chip { font-size: 11px; padding: 2px 6px; }
/* botão do poder: sempre visível para quem tem poder; sem carga fica apagado */
#powerBtn span { font-size: 28px; line-height: 1; }
#powerBtn.empty { filter: grayscale(.9) brightness(.6); }
#powerBtn.empty b { background: #3a3a4a; }
/* painel compacto no celular: adversários só com o boneco (e o nome curto); o seu mostra tudo */
.chip.mini { padding: 2px 4px; gap: 3px; }
.chip.mini .pn { max-width: 52px; font-size: 10px; }
/* celular deitado e estreito: os adversários na barra de cima ficam só com o rosto (o nome já aparece em cima do boneco),
   para a barra caber numa linha e o mapa não encolher */
@media (max-width: 820px) { body.touch-land .chip:not(.mine) .pn { display: none; } body.touch-land .chip:not(.mine) { padding: 2px 4px; } }

/* ---------- telas ---------- */
.screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: transparent; z-index: 10; padding: 50px 16px 16px; overflow-y: auto; touch-action: pan-y; }
.screen.enter .panel, .screen.enter .home { animation: rise .28s ease-out; }
.panel { background: linear-gradient(180deg, var(--panel), var(--panel2)); border: 1px solid #ffffff14; border-radius: 16px; padding: 22px; width: 100%; max-width: 400px; box-shadow: 0 18px 50px #000b, inset 0 1px 0 #ffffff12; margin: auto; }
.panel.wide { max-width: 560px; }
h2 { font-family: 'Press Start 2P', monospace; font-size: 18px; margin: 0 0 16px; line-height: 1.4; text-shadow: 0 3px 0 #000; }
h2 span { color: var(--accent); }
h3 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin: 20px 0 8px; }
h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; }
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 5px; }
input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: #fff; font-size: 16px; }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
button { width: 100%; padding: 12px; margin-top: 12px; border: 0; border-radius: 10px; background: var(--accent); color: #14181f; font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 4px 0 var(--accent-dark); transition: transform .06s, box-shadow .06s, filter .15s; }
button:hover:not(:disabled) { filter: brightness(1.07); }
button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-dark); }
button:disabled { opacity: .45; cursor: default; }
button.sec { background: #2c3445; color: #eee; box-shadow: 0 4px 0 #161b25; }
button.sec:active:not(:disabled) { box-shadow: 0 1px 0 #161b25; }
button.wa { background: #25d366; color: #06301a; box-shadow: 0 4px 0 #128c47; }
button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
button.mini { width: auto; margin: 0; padding: 7px 11px; font-size: 13px; background: #2c3445; color: #eee; box-shadow: 0 3px 0 #161b25; flex: none; }
button.mini.ok { background: var(--green); color: #04240f; box-shadow: 0 3px 0 #0e7a36; }
.row { display: flex; gap: 10px; }
.row button { flex: 1; }
.row.tight { gap: 8px; align-items: center; flex-wrap: wrap; }
.row.tight button { margin-top: 0; }
.err { color: var(--red); font-size: 14px; min-height: 18px; margin-top: 8px; }
.hint { color: var(--muted); font-size: 13px; margin-top: 10px; line-height: 1.5; }
.check { display: flex; align-items: center; gap: 8px; margin-top: 12px; cursor: pointer; }
.check input { width: auto; }
.coderow { display: flex; gap: 8px; margin-top: 12px; }
.coderow input { flex: 1; min-width: 0; }
.coderow button { width: auto; margin: 0; padding: 0 18px; }
canvas.spr { image-rendering: pixelated; flex: none; }
.badge { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--green); color: #04240f; font-size: 12px; margin-left: 4px; }
.badge.alert { background: var(--red); color: #fff; animation: pulse .7s infinite alternate; }

/* apresentação */
.home { width: 100%; max-width: 520px; text-align: center; margin: auto; }
.logo { font-family: 'Press Start 2P', monospace; font-size: clamp(30px, 11vw, 60px); letter-spacing: 2px; white-space: nowrap; color: #fff; text-shadow: 0 6px 0 #c2410c, 0 10px 0 #000, 0 0 40px #ffcc0055; animation: bob 2.4s ease-in-out infinite; }
.logo span { color: var(--accent); display: inline-block; animation: boom 1.2s ease-in-out infinite; }
.tag { color: #d6dbe4; margin: 18px 0 18px; font-size: 16px; line-height: 1.5; text-shadow: 0 2px 0 #000; }
.cast { display: flex; justify-content: center; gap: clamp(6px, 3vw, 22px); margin-bottom: 18px; }
.cast figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: #c8cfda; text-shadow: 0 2px 0 #000; }
.cast canvas { width: clamp(56px, 17vw, 84px); height: clamp(56px, 17vw, 84px); filter: drop-shadow(0 6px 4px #0008); }
.account { background: #1f2633e6; border: 1px solid #ffffff14; border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; text-align: left; box-shadow: 0 10px 30px #0008; }
.account .who { flex: 1; min-width: 0; }
.account .who b { display: block; font-size: 16px; }
.account .who small { color: var(--muted); }
.account button { width: auto; margin: 0; padding: 9px 14px; font-size: 14px; }
button.big { font-family: 'Press Start 2P', monospace; font-size: 18px; padding: 18px; margin-top: 16px; box-shadow: 0 6px 0 var(--accent-dark), 0 12px 24px #0008; }
button.big:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--accent-dark); }

/* cadastro */
.tabs { display: flex; gap: 6px; background: var(--field); padding: 4px; border-radius: 12px; margin-bottom: 8px; }
.tabs button { margin: 0; background: transparent; color: var(--muted); padding: 10px; box-shadow: none; }
.tabs button.on { background: #2c3445; color: #fff; }

/* listas */
.rhead { display: flex; justify-content: space-between; margin: 18px 0 8px; font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
#roomList, #expRoomList, #plist, .flist, #inviteList { list-style: none; padding: 0; margin: 0; }
#plist li, .flist li, #inviteList li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--field); border: 1px solid #ffffff0c; border-radius: 10px; margin-bottom: 6px; }
.flist li.off { opacity: .55; }
.flist li .name { flex: 1; min-width: 0; }
.flist li button.mini { flex: none; }
.ftier { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 6px; border-radius: 50%; font-size: 11px; vertical-align: middle; background: color-mix(in srgb, var(--tc) 30%, #14181f); border: 2px solid var(--tc); }
.frel { font-size: 12px; color: var(--muted); white-space: nowrap; }
.flist.suggest { margin: -4px 0 8px; padding: 6px; background: #0e1219; border: 1px solid #ffcc0040; border-radius: 12px; animation: rise .15s ease-out; }
.flist.suggest li { margin-bottom: 4px; }
.fshare { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; background: radial-gradient(circle at 0% 50%, #3ddc8418, transparent 60%), var(--field); border: 1px dashed #3ddc8455; border-radius: 12px; font-size: 13px; color: var(--muted); }
.fshare span { flex: 1 1 200px; }
.fshare button { width: auto; margin: 0; }
.pg-friends .pg-mates { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pg-mate { display: flex; align-items: center; gap: 8px; background: #ffffff0a; border-radius: 10px; padding: 4px 6px; }
.pg-mate em { flex: 1; font-style: normal; font-weight: 700; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pg-mate .frel { margin-left: auto; }
button.pg-add { width: auto; margin: 0 0 0 6px; padding: 2px 8px; font-size: 11px; vertical-align: middle; }
.name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: column; }
#plist .name { flex-direction: row; align-items: center; gap: 6px; }
.st { font-size: 12px; font-weight: 600; }
.st::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: #666; }
.st.online::before { background: var(--green); }
.st.lobby::before { background: var(--accent); }
.st.playing::before { background: var(--red); }
.st.online { color: #7ee2a0; } .st.lobby { color: #ffe27a; } .st.playing { color: #ff9a9a; } .st.offline { color: var(--muted); }
.empty { color: var(--muted); font-size: 14px; justify-content: center; text-align: center; line-height: 1.5; padding: 14px !important; }

/* salas: cartões grandes, fáceis de tocar */
#roomList, #expRoomList { max-height: 46vh; overflow-y: auto; }
.room-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--field); border: 1px solid #ffffff10; border-radius: 12px; margin-bottom: 8px; cursor: pointer; transition: transform .1s, border-color .15s; }
.room-card:hover { border-color: var(--accent); }
.room-card:active { transform: scale(.98); }
.room-card.off { opacity: .5; cursor: default; }
.room-theme { font-size: 28px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #ffffff0c; border-radius: 10px; flex: none; }
.room-card .info { flex: 1; min-width: 0; }
.room-card .code { font-weight: 800; letter-spacing: 1px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.room-card .meta { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.pill { font-size: 11px; font-weight: 700; letter-spacing: 0; padding: 2px 7px; border-radius: 10px; background: #1fbf5a33; color: #7ee2a0; }
.pill.busy { background: #ff6b6b33; color: #ff9a9a; }
.seats { display: flex; gap: 3px; flex: none; }
.seats i { width: 10px; height: 10px; border-radius: 3px; background: #ffffff1a; }
.seats i.on { background: var(--green); }
.me-line { display: flex; align-items: center; gap: 8px; }

/* sala (lobby) */
#plist li.me { border-color: #ffcc0055; background: #ffcc000d; }
.mode-pick { margin-bottom: 12px; }
#plist li.team-head { background: transparent; border: 0; padding: 10px 2px 4px; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; }
#plist li.team-head small { color: var(--muted); margin-left: auto; }
#plist li.team-0 { color: #7cc0ff; } #plist li.team-1 { color: #ff8a8a; }
#teamBtn { margin-top: 6px; }
#plist .w { color: var(--accent); font-size: 13px; white-space: nowrap; }
#plist .empty-slot { border-style: dashed; border-color: #ffffff1c; background: transparent; color: var(--muted); }
.ghost-slot { width: 34px; height: 34px; border-radius: 8px; background: #ffffff08; flex: none; }
.reg { color: #4dff88; font-size: 12px; }
.tagbot { font-size: 10px; font-weight: 800; background: #4da6ff33; color: #9ccfff; padding: 1px 5px; border-radius: 5px; }
#botBox { margin-top: 10px; }
#addBotBtn { width: auto; padding: 9px 14px; font-size: 14px; flex: none; }
.pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pick button { margin: 0; padding: 8px 4px; background: var(--field); color: var(--text); border: 2px solid transparent; box-shadow: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; }
.pick button.on { border-color: var(--accent); background: #2a2a1a; }
.pick button.on canvas { animation: hop .5s ease-in-out infinite alternate; }
.pick canvas { width: 48px; height: 48px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { width: auto; margin: 0; padding: 8px 12px; font-size: 14px; background: var(--field); color: var(--text); border: 2px solid transparent; box-shadow: none; }
.chips button.on { border-color: var(--accent); background: #2a2a1a; }
.chips button:disabled { opacity: 1; cursor: default; }
.chips button:disabled:not(.on) { opacity: .45; }
#levelPick button { padding: 7px 10px; font-size: 13px; }
#inviteList { margin-top: 10px; }

/* ranking */
.rank { width: 100%; border-collapse: collapse; font-size: 14px; }
.rank th { color: var(--muted); font-size: 11px; text-transform: uppercase; text-align: right; padding: 6px 4px; font-weight: 700; }
.rank td { padding: 7px 4px; text-align: right; border-top: 1px solid #ffffff10; }
.rank th:nth-child(2), .rank td:nth-child(2) { text-align: left; }
.rank td:first-child { text-align: center; width: 34px; font-weight: 800; }
.rank .pl { display: flex; align-items: center; gap: 8px; }
.rank tr.me td { background: #ffcc0018; }
tr.clickable { cursor: pointer; } .rank tr.clickable:hover td, .pg-board tr.clickable:hover td { background: #ffffff0d; }
#plist li[data-profile], #inviteList li[data-profile] { cursor: pointer; }
.rank .pts { color: var(--accent); font-weight: 800; }
.rank-wrap { max-height: 55vh; overflow-y: auto; margin-top: 8px; }

/* como jogar */
.help-list { display: grid; gap: 10px; margin: 10px 0; }
.help-list div { display: flex; gap: 12px; align-items: center; font-size: 14px; line-height: 1.4; }
.help-list canvas { width: 36px; height: 36px; }
.help-list .ic { width: 36px; text-align: center; font-size: 24px; flex: none; }

/* apresentação do mapa antes da partida */
#intro { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 50px 12px 12px; background: #0a0c12d9; backdrop-filter: blur(3px); overflow-y: auto; touch-action: pan-y; }
.intro-card { width: 100%; max-width: 560px; margin: auto; background: linear-gradient(180deg, var(--panel), var(--panel2)); border: 1px solid #ffcc0044; border-radius: 16px; padding: 18px; box-shadow: 0 18px 50px #000c; animation: rise .35s ease-out; }
.intro-head { display: flex; align-items: center; gap: 14px; }
.intro-head canvas { width: 140px; height: 100px; image-rendering: pixelated; border-radius: 8px; border: 3px solid #0b0d12; flex: none; }
.intro-head h2 { margin: 4px 0 6px; font-size: 20px; }
.intro-kicker { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.intro-sub { color: var(--accent); font-weight: 700; }
.intro-text { font-size: 15px; line-height: 1.5; margin: 14px 0 10px; }
.intro-rules { display: flex; flex-wrap: wrap; gap: 6px; }
.intro-rules span { font-size: 12px; background: #ffffff0d; border-radius: 20px; padding: 4px 10px; color: #d6dbe4; }
.intro-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.intro-team { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px; border-radius: 12px; }
.intro-team > div { display: flex; gap: 4px; }
.intro-team small { font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.intro-team.team-0 { background: #4da6ff18; } .intro-team.team-0 small { color: #7cc0ff; }
.intro-team.team-1 { background: #ff4d4d18; } .intro-team.team-1 small { color: #ff8a8a; }
.intro-items div { background: var(--field); border-radius: 10px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.intro-items canvas { width: 34px; height: 34px; }
.intro-items b { font-size: 12px; }
.intro-items small { font-size: 11px; color: var(--muted); line-height: 1.25; }
.intro-vs { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.intro-vs .vs { font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--accent); }
.intro-pl { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; padding: 6px; border-radius: 10px; border: 2px solid transparent; transition: border-color .2s; max-width: 92px; }
.intro-pl span { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intro-pl .ok { position: absolute; top: -6px; right: -4px; background: var(--green); color: #04240f; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; font-style: normal; display: none; align-items: center; justify-content: center; }
.intro-pl.ready { border-color: #1fbf5a88; }
.intro-pl.ready .ok { display: flex; animation: pop .3s ease-out; }
.intro-tip { font-size: 13px; color: #d6dbe4; background: #ffcc000f; border-left: 3px solid var(--accent); padding: 8px 10px; border-radius: 6px; }
.intro-bar { position: relative; height: 22px; margin-top: 14px; background: var(--field); border-radius: 11px; overflow: hidden; }
.intro-bar div { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #c2410c, var(--accent)); transition: width .15s linear; }
.intro-bar span { position: relative; display: block; text-align: center; font-size: 12px; font-weight: 700; line-height: 22px; text-shadow: 0 1px 2px #000; }
#readyBtn, #introReadyBtn { margin-top: 12px; }
@media (max-width: 420px) {
  .intro-items { grid-template-columns: repeat(2, 1fr); }
  .intro-head canvas { width: 112px; height: 80px; }
}
@media (max-height: 520px) { /* celular deitado: card em duas colunas para caber */
  .intro-card { max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 12px; }
  .intro-head, .intro-text, .intro-rules { grid-column: 1; }
  .intro-items, .intro-vs, .intro-tip, .intro-bar, #readyBtn, #introReadyBtn { grid-column: 2; }
  .intro-head { grid-row: 1; } .intro-text { grid-row: 2; margin: 8px 0; font-size: 13px; } .intro-rules { grid-row: 3; align-self: start; }
  .intro-items { grid-row: 1; margin: 0 0 8px; } .intro-vs { grid-row: 2; margin: 0; } .intro-tip { grid-row: 3; font-size: 12px; }
  .intro-bar { grid-row: 4; margin-top: 8px; } #readyBtn, #introReadyBtn { grid-row: 5; margin-top: 8px; padding: 9px; }
  .intro-items { align-self: start; } .intro-items canvas { width: 26px; height: 26px; }
}

/* sair da partida */
#quitBtn { position: absolute; top: 6px; left: 8px; z-index: 6; width: auto; margin: 0; padding: 6px 12px; font-size: 14px; background: #1f2633e6; color: #fff; border: 1px solid #ffffff1a; box-shadow: none; }
.modal { position: fixed; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center; padding: 16px; background: #0a0c12cc; backdrop-filter: blur(3px); }
.modal .panel { animation: rise .2s ease-out; max-width: 420px; }
.quit-text { font-size: 15px; line-height: 1.55; margin: 0 0 6px; }
.quit-text .warn { display: block; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #ff6b6b1a; border: 1px solid #ff6b6b55; color: #ffc2c2; }
.quit-text .soft { display: block; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #ffcc0014; border: 1px solid #ffcc0044; color: #ffe9a0; }
button.danger { background: #e8402a; color: #fff; box-shadow: 0 4px 0 #8a1a14; }
button.danger:active:not(:disabled) { box-shadow: 0 1px 0 #8a1a14; }
.account .block { display: block; color: #ff9a9a; font-weight: 700; margin-top: 2px; }
body.touch-land #quitBtn { padding: 5px 9px; font-size: 12px; }

/* ---------- ranqueada ---------- */
.big-row { gap: 10px; }
.big-row button.big { flex: 1; font-size: 15px; padding: 16px 8px; }
button.ranked-big { background: linear-gradient(180deg, #ffd96a, #ffb800); box-shadow: 0 6px 0 #a87400, 0 0 24px #ffcc0055; }
.season { background: #ffcc0012; border: 1px solid #ffcc0033; border-radius: 10px; padding: 9px 12px; font-size: 13px; color: #ffe9a0; }
.queues { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.queue-card { background: var(--field); border: 1px solid #ffffff12; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.queue-card button { margin-top: auto; }
.qc-head b { font-size: 16px; display: block; } .qc-head small { color: var(--muted); font-size: 12px; }
.qc-tier { display: flex; gap: 10px; align-items: center; }
.qc-tier > div:last-child { flex: 1; min-width: 0; }
.qc-name { font-weight: 800; font-size: 15px; }
.qc-tier small { color: var(--muted); font-size: 11px; }
.qc-tags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 4px; }
.qc-tags span { font-size: 11px; background: #ffffff10; border-radius: 10px; padding: 2px 8px; }
.tier-badge { flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #ffffff30, transparent 60%), color-mix(in srgb, var(--tc) 35%, #14181f); border: 3px solid var(--tc); box-shadow: 0 0 16px color-mix(in srgb, var(--tc) 50%, transparent); }
.pp-bar { height: 7px; background: #ffffff14; border-radius: 4px; overflow: hidden; margin: 5px 0 3px; }
.pp-bar i { display: block; height: 100%; border-radius: 4px; }
.tier-chip { font-size: 12px; font-weight: 700; color: var(--tc); white-space: nowrap; }
@media (max-width: 520px) { .queues { grid-template-columns: 1fr; } }

/* procurando partida (fica visível em qualquer tela) */
.queue-box { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 38; display: flex; align-items: center; gap: 12px; width: min(92vw, 380px); background: linear-gradient(180deg, #2a3242, #1d2330); border: 1px solid #ffcc0066; border-radius: 14px; padding: 10px 14px; box-shadow: 0 14px 40px #000c; animation: drop .3s ease-out; }
.queue-box .qspin { font-size: 24px; animation: spin 1.2s linear infinite; }
.queue-box .qtext { flex: 1; display: flex; flex-direction: column; }
.queue-box small { color: var(--muted); font-variant-numeric: tabular-nums; }
@keyframes spin { to { transform: rotate(360deg); } }

/* resultado ranqueado */
#msg .rk-banner { margin: 10px auto 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; text-shadow: none; background: #000b; border: 2px solid var(--tc); border-radius: 12px; padding: 8px 14px; max-width: 420px; }
#msg .rk-banner .rk-icon { font-size: 22px; }
#msg .rk-banner em { font-style: normal; font-size: 13px; background: #ffffff14; border-radius: 8px; padding: 2px 8px; }
#msg .rk-banner em.up { background: #1fbf5a44; color: #9af0b8; animation: pulse .5s infinite alternate; }
#msg .rk-banner em.down { background: #ff6b6b33; color: #ffb0b0; }

/* perfil */
.profile-card { display: flex; gap: 14px; align-items: center; background: radial-gradient(circle at 15% 40%, #ffcc0018, transparent 55%), var(--field); border: 1px solid #ffffff12; border-radius: 14px; padding: 12px; }
.profile-card canvas { width: 120px; height: 120px; image-rendering: pixelated; flex: none; }
.pc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pc-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-name b { font-size: 22px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.pc-name button, .rename-row button { width: auto; margin: 0; }
.rename-row { display: flex; gap: 6px; align-items: center; }
.rename-row input { flex: 1; min-width: 0; margin: 0; }
.pc-hint { color: var(--muted); font-size: 11px; }
.pc-tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-tiers .tier-chip { background: color-mix(in srgb, var(--tc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); border-radius: 10px; padding: 2px 8px; }
.pc-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.pc-stats div { background: #ffffff0a; border-radius: 8px; padding: 4px 2px; text-align: center; display: flex; flex-direction: column; }
.pc-stats b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pc-stats small { font-size: 10px; color: var(--muted); }
.coll-head { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 2px 6px; }
.coll-head span { color: var(--muted); font-size: 12px; }
.cos-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.cos-tabs button { flex: none; width: auto; margin: 0; padding: 7px 11px; font-size: 13px; background: var(--field); color: var(--muted); border: 1px solid #ffffff12; box-shadow: none; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.cos-tabs button small { font-size: 10px; font-weight: 500; opacity: .8; }
.cos-tabs button.on { background: #2a2a1a; color: var(--accent); border-color: #ffcc0077; }
.cos-tabs { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.cos-tabs .cos-groups { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.cos-tabs .cos-groups button { width: 100%; flex-direction: row; justify-content: center; gap: 6px; font-weight: 800; }
.cos-tabs .cos-slots { display: flex; flex-wrap: wrap; gap: 4px; }
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin: 8px 0 6px; }
button.cos-card { position: relative; width: auto; margin: 0; padding: 18px 6px 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--rc, #9aa4b8) 16%, transparent), transparent 70%), var(--field); color: var(--text); border: 2px solid color-mix(in srgb, var(--rc, #9aa4b8) 35%, transparent); border-radius: 12px; box-shadow: none; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 13px; text-align: center; }
button.cos-card b { font-size: 12px; line-height: 1.2; }
button.cos-card small { font-size: 10px; font-weight: 500; color: var(--muted); line-height: 1.2; }
button.cos-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px #ffcc0040; }
button.cos-card.on small { color: var(--accent); font-weight: 700; }
button.cos-card.locked .thumb { filter: grayscale(1) brightness(.55); }
button.cos-card.locked b { opacity: .7; }
button.cos-card.shop { border-style: dashed; }
.cos-card .rar { position: absolute; top: 4px; left: 6px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--rc); }
.cos-card .thumb { width: 48px; height: 48px; image-rendering: pixelated; display: flex; align-items: center; justify-content: center; font-size: 30px; }
button.cos-card { height: auto; min-height: 0; overflow: visible; }
.cos-card .prog { position: relative; flex: none; display: block; width: 100%; height: 15px; background: #ffffff14; border-radius: 8px; overflow: hidden; margin-top: 4px; }
.cos-card .prog i { position: absolute; inset: 0 auto 0 0; background: var(--rc); opacity: .55; }
.cos-card .prog em { position: relative; display: block; text-align: center; font-style: normal; font-size: 10px; font-weight: 700; line-height: 15px; }
@media (max-width: 520px) {
  .profile-card { flex-direction: column; text-align: center; }
  .pc-name, .pc-tiers { justify-content: center; }
  .pc-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- dentro da partida: frases rápidas, feed, replay, recompensas ---------- */
#emoteBtn { position: absolute; top: 6px; left: 92px; z-index: 6; width: 40px; height: 34px; margin: 0; padding: 0; font-size: 18px; background: #1f2633e6; border: 1px solid #ffffff1a; box-shadow: none; }
#emotePanel { position: absolute; top: 46px; left: 8px; z-index: 7; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #14181ff2; border: 2px solid #0b0d12; border-radius: 10px; padding: 6px; box-shadow: 0 4px 0 #0b0d12, 0 12px 30px #000a; animation: rise .15s ease-out; }
#emotePanel button { width: auto; min-width: 118px; margin: 0; padding: 7px 9px; font-size: 13px; background: #232b3a; color: #fff; box-shadow: none; border: 1px solid #ffffff10; border-radius: 7px; text-align: left; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
#emotePanel button:hover { background: #2e3850; border-color: #ffcc0066; filter: none; }
#emotePanel button:active { transform: scale(.96); }
#emotePanel kbd { font: 700 10px system-ui; color: var(--muted); background: #ffffff12; border-radius: 4px; padding: 1px 5px; }
body.touch-land #emoteBtn { left: 74px; }
@media (pointer: coarse) { #emotePanel kbd { display: none; } }
#killfeed { position: absolute; top: 48px; right: 8px; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
#killfeed div { background: #000b; border-radius: 8px; padding: 4px 10px; font-size: 13px; animation: rise .2s ease-out; }
#killfeed div.me { border: 1px solid #ffcc0088; }
#replayBtn { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); z-index: 8; width: auto; margin: 0; padding: 10px 18px; font-size: 15px; animation: pop .4s ease-out; box-shadow: 0 6px 0 var(--accent-dark), 0 0 24px #ffcc0066; }
#replay { position: fixed; inset: 0; z-index: 35; background: #000c; display: flex; align-items: center; justify-content: center; }
.replay-box { background: var(--panel); border: 1px solid #ffffff22; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; align-items: center; box-shadow: 0 20px 60px #000; }
.replay-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
#replayCv { image-rendering: pixelated; border-radius: 8px; max-width: 92vw; }
.replay-btns { display: flex; gap: 8px; } .replay-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; } .replay-share small { color: var(--muted); } .replay-share.hidden { display: none; }
#msg .rewards { margin: 10px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; background: #000b; border: 1px solid #ffcc0055; border-radius: 12px; padding: 8px 14px; font-size: 15px; font-weight: 700; text-shadow: none; max-width: 440px; animation: pop .5s ease-out; }
#msg .rewards small { flex-basis: 100%; font-size: 11px; color: var(--muted); font-weight: 500; }
#msg .rewards .rw-mission, #msg .rewards .rw-level { flex-basis: 100%; font-size: 13px; color: #b8f0c8; }
#msg .rewards .rw-level { color: var(--accent); animation: pulse .5s infinite alternate; }

/* ---------- missões e passe ---------- */
.pip-chip { font-size: 12px; font-weight: 700; color: var(--accent); background: #ffcc0018; border-radius: 10px; padding: 1px 7px; margin-left: 4px; }
.wallet { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, #ffcc0022, transparent), var(--field); border: 1px solid #ffcc0033; border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.wallet-n { font-size: 24px; } .wallet-n b { color: var(--accent); }
.wallet small { color: var(--muted); font-size: 12px; }
.seg { display: flex; gap: 6px; background: var(--field); padding: 4px; border-radius: 12px; margin-bottom: 10px; }
.seg button { margin: 0; background: transparent; color: var(--muted); padding: 10px; box-shadow: none; }
.seg button.on { background: #2c3445; color: #fff; }
.seg.small button { padding: 7px; font-size: 14px; }

/* evolução das ligas */
.lad-now { display: flex; gap: 12px; align-items: center; background: radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 60%), var(--field); border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); border-radius: 14px; padding: 12px; }
.lad-now .grow { flex: 1; min-width: 0; }
.lad-now small { color: var(--muted); font-size: 12px; }
.lad-next { margin-top: 6px; font-size: 13px; }
.lad-chart { background: var(--field); border: 1px solid #ffffff12; border-radius: 14px; padding: 10px 12px; margin: 10px 0; }
.lad-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.lad-chart-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.lad-chart-head .up { color: #3ddc84; font-weight: 800; } .lad-chart-head .down { color: #ff4d6a; font-weight: 800; }
.ladder { display: flex; flex-direction: column; gap: 6px; position: relative; }
.lad-row { display: flex; gap: 10px; align-items: flex-start; background: var(--field); border: 1px solid #ffffff10; border-left: 4px solid color-mix(in srgb, var(--tc) 40%, transparent); border-radius: 12px; padding: 9px 10px; opacity: .62; }
.lad-row.reached { opacity: 1; border-left-color: var(--tc); }
.lad-row.here { opacity: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 20%, transparent), transparent 70%), var(--field); border-color: color-mix(in srgb, var(--tc) 70%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--tc) 30%, transparent); }
.lad-row:not(.reached) .tier-badge { filter: grayscale(.8) brightness(.7); }
.lad-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.lad-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lad-top b { color: var(--tc); font-size: 15px; }
.lad-top small { color: var(--muted); font-size: 11px; }
.lad-top .lad-n { margin-left: auto; }
.lad-you { font-size: 11px; font-weight: 800; background: var(--tc); color: #14181f; border-radius: 8px; padding: 1px 7px; animation: pop .5s ease-out; }
.lad-divs { display: flex; gap: 4px; }
.lad-div { position: relative; flex: 1; height: 14px; background: #ffffff12; border-radius: 7px; overflow: hidden; }
.lad-div i { position: absolute; inset: 0 auto 0 0; background: var(--tc); opacity: .8; }
.lad-div em { position: relative; display: block; text-align: center; font-style: normal; font-size: 9px; font-weight: 800; line-height: 14px; color: #fff; text-shadow: 0 1px 2px #000; }
.lad-prizes { display: flex; gap: 6px; flex-wrap: wrap; }
.lad-prize { display: flex; align-items: center; gap: 4px; background: #ffffff0a; border-radius: 8px; padding: 2px 8px 2px 2px; }
.lad-prize .thumb { width: 26px; height: 26px; font-size: 16px; display: flex; align-items: center; justify-content: center; image-rendering: pixelated; filter: grayscale(1) brightness(.6); }
.lad-prize.got .thumb { filter: none; }
.lad-prize small { font-size: 10px; color: var(--muted); }
.lad-prize.got small::after { content: ' ✓'; color: #3ddc84; }
.m-head { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 2px 6px; }
.m-head small { color: var(--muted); font-size: 12px; }
.mission { background: var(--field); border: 1px solid #ffffff12; border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; }
.mission.done { border-color: #1fbf5a66; background: linear-gradient(90deg, #1fbf5a1a, transparent), var(--field); }
.m-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; }
.m-rew { color: var(--accent); font-size: 12px; white-space: nowrap; }
.m-bar { position: relative; height: 16px; background: #ffffff10; border-radius: 8px; overflow: hidden; margin-top: 7px; }
.m-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ffb800, #ffd96a); border-radius: 8px; transition: width .5s; }
.mission.done .m-bar i { background: linear-gradient(90deg, #1fbf5a, #6ee89a); }
.m-bar em { position: relative; display: block; text-align: center; font: 700 11px/16px system-ui; color: #fff; text-shadow: 0 1px 2px #000; }
.pass-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; background: var(--field); border-radius: 12px; padding: 10px 12px; }
.pass-head > div:first-child { display: flex; flex-direction: column; } .pass-head small { color: var(--muted); font-size: 11px; }
.pass-lv { flex: 1; max-width: 260px; } .pass-lv b { color: var(--accent); font-size: 18px; }
.premium-cta, .premium-on { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0; border-radius: 12px; padding: 10px 12px; background: linear-gradient(90deg, #b06aff33, #ffb02022); border: 1px solid #b06aff66; }
.premium-cta div { display: flex; flex-direction: column; } .premium-cta small { color: #d8c8ff; font-size: 12px; }
.premium-on { justify-content: center; font-weight: 700; color: #ffe27a; }
.track-legend { display: flex; flex-direction: column; gap: 0; float: left; margin-top: 30px; margin-right: 4px; }
.track-legend span { height: 92px; display: flex; align-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 700; color: var(--muted); }
.track-legend span:last-child { color: #c8a8ff; margin-top: 6px; }
.track { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; scrollbar-color: #ffcc0066 transparent; }
.track::-webkit-scrollbar { height: 6px; } .track::-webkit-scrollbar-thumb { background: #ffcc0066; border-radius: 3px; }
#lobbyReplay { margin-top: 6px; }
.pcol { flex: none; width: 84px; display: flex; flex-direction: column; gap: 6px; }
.plv { text-align: center; font: 700 12px system-ui; color: var(--muted); background: #ffffff0a; border-radius: 8px; padding: 3px 0; }
.pcol.reached .plv { background: var(--accent); color: #241c00; }
.pcol.next .plv { outline: 2px dashed var(--accent); }
.pcell { width: 100%; height: 92px; margin: 0; padding: 6px 4px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; background: var(--field); color: var(--text); border: 2px solid #ffffff10; box-shadow: none; }
.pcell.empty { opacity: .25; background: transparent; border-style: dashed; }
.pcell.premium { background: linear-gradient(180deg, #b06aff22, transparent), var(--field); border-color: #b06aff44; }
.pcell .pr-icon { width: 32px; height: 32px; font-size: 26px; line-height: 32px; image-rendering: pixelated; }
.pcell b { font-size: 11px; line-height: 1.15; text-align: center; }
.pcell small { font-size: 10px; color: var(--muted); }
.pcell.ready { border-color: var(--accent); box-shadow: 0 0 14px #ffcc0066; animation: pulse .7s infinite alternate; cursor: pointer; }
.pcell.ready small { color: var(--accent); font-weight: 800; }
.pcell.got { opacity: .55; } .pcell.got small { color: #6ee89a; }
.pcell.locked .pr-icon, .pcell.future .pr-icon { filter: grayscale(.7) brightness(.8); }
i.confetti { position: fixed; z-index: 60; width: 7px; height: 7px; border-radius: 2px; pointer-events: none; animation: confetti .9s ease-out forwards; }
@keyframes confetti { to { transform: translate(var(--dx), var(--dy)) rotate(540deg); opacity: 0; } }

/* ---------- fim de partida ---------- */
#postgame { position: fixed; inset: 0; z-index: 33; display: flex; align-items: flex-start; justify-content: center; padding: 12px; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--pgc) 22%, transparent), transparent 60%), #0b0d12f7; animation: pgfade .35s ease-out; overflow-y: auto; }
#postgame.win { --pgc: #ffcc00; } #postgame.lose { --pgc: #ff4d6a; } #postgame.draw { --pgc: #9aa4b8; }
@keyframes pgfade { from { opacity: 0; } }
.pg-box { width: min(980px, 100%); margin: auto; display: flex; flex-direction: column; gap: 12px; } /* sem teto de altura: conteúdo alto rola a tela em vez de ficar embaixo dos botões */
.pg-banner { text-align: center; animation: pgdrop .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pgdrop { from { transform: translateY(-40px) scale(1.3); opacity: 0; } }
.pg-title { font-family: 'Press Start 2P', monospace; font-size: clamp(30px, 7vw, 58px); color: var(--pgc); text-shadow: 0 4px 0 #000, 0 0 30px var(--pgc); letter-spacing: 2px; }
.pg-sub { margin-top: 10px; color: #d8dce6; font-size: 14px; font-weight: 600; }
#pgPodium { display: block; width: min(480px, 100%); height: auto; margin: 6px auto 0; }
.pg-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; min-height: 0; }
.pg-board, .pg-rew { background: var(--panel); border: 1px solid #ffffff18; border-radius: 16px; padding: 10px 12px; animation: rise .45s ease-out both; }
.pg-rew { animation-delay: .15s; }
.pg-board table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pg-board th { font-size: 13px; color: var(--muted); font-weight: 700; padding: 4px; text-align: center; }
.pg-board th:nth-child(2) { text-align: left; }
.pg-board td { padding: 6px 4px; text-align: center; border-top: 1px solid #ffffff0c; font-variant-numeric: tabular-nums; }
.pg-board tr.me td { background: #ffcc0012; }
.pg-board tr td:first-child { border-left: 3px solid var(--pc); font-size: 18px; width: 40px; }
.pg-board .who { display: flex; align-items: center; gap: 8px; text-align: left; }
.pg-board .who b { font-size: 14px; } .pg-board .who small { color: var(--accent); font-weight: 600; }
.pg-board .aw { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.pg-board .aw i { font-style: normal; font-size: 10px; font-weight: 700; background: #ffffff12; border-radius: 6px; padding: 1px 6px; color: #ffe9a0; }
.pg-board .gain { color: var(--accent); font-weight: 700; white-space: nowrap; }
.pg-rew h3 { margin: 2px 0 8px; }
.pg-card { display: flex; align-items: center; gap: 10px; background: var(--field); border-radius: 12px; padding: 9px 11px; margin-bottom: 7px; font-size: 13px; }
.pg-card .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pg-card small { color: var(--muted); font-size: 11px; }
.pg-card.rk { border: 1px solid color-mix(in srgb, var(--tc) 50%, transparent); }
.pg-card .big { font: 800 24px system-ui; font-variant-numeric: tabular-nums; } .pg-card .big.up { color: #6ee89a; } .pg-card .big.down { color: #ff8a8a; }
.pg-card.muted { color: var(--muted); } .pg-card.cta { flex-wrap: wrap; } .pg-card.cta button { width: auto; margin: 0; }
.pg-card.pass em { font-style: normal; color: #241c00; background: var(--accent); border-radius: 6px; padding: 0 6px; font-size: 11px; animation: pulse .5s infinite alternate; }
.pg-card.mission { background: linear-gradient(90deg, #1fbf5a22, transparent), var(--field); } .pg-card.mission b { color: var(--accent); white-space: nowrap; }
.pg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 7px; margin-bottom: 7px; }
.pg-stats div { background: var(--field); border-radius: 12px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; }
.pg-stats b { font: 800 24px system-ui; color: #fff; font-variant-numeric: tabular-nums; } .pg-stats .pip b { color: var(--accent); }
.pg-stats small { color: var(--muted); font-size: 11px; }
.spin { display: inline-block; animation: spin 1.2s linear infinite; }
.pg-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; animation: rise .45s ease-out .3s both; position: sticky; bottom: -12px; z-index: 2; padding: 10px 0 14px; background: linear-gradient(transparent, #0b0d12 30%); }
.pg-actions button { width: auto; margin: 0; padding: 12px 22px; }
.pg-actions button.big { min-width: 240px; font-size: 14px; }
.pg-actions button:disabled { opacity: 1; filter: saturate(.55) brightness(.8); cursor: default; } /* escolhido/esperando: opaco, sem deixar ver o painel atrás */
.pg-votes { flex-basis: 100%; text-align: center; color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .pg-body { grid-template-columns: 1fr; } .pg-actions button.big { min-width: 0; flex-basis: 100%; } }
/* ---- celular: fim de partida compacto ---- */
body.touch #postgame { padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 0; }
body.touch .pg-box { gap: 8px; margin: 0 auto; }
body.touch .pg-title { font-size: clamp(22px, 6.5vw, 34px); text-shadow: 0 3px 0 #000, 0 0 18px var(--pgc); }
body.touch .pg-sub { margin-top: 6px; font-size: 12px; }
body.touch #pgPodium { width: min(300px, 80%); margin-top: 2px; }
body.touch .pg-mascot { display: none; }
body.touch .pg-board, body.touch .pg-rew { padding: 8px 10px; border-radius: 12px; }
body.touch .pg-board table { font-size: 13px; }
body.touch .pg-board th { font-size: 11px; padding: 2px; }
body.touch .pg-board td { padding: 4px 3px; }
body.touch .pg-board tr td:first-child { width: 30px; }
body.touch .pg-board td canvas, body.touch .pg-board td img { max-width: 26px; max-height: 26px; }
body.touch .pg-board .who b { font-size: 13px; }
body.touch .pg-board .aw i { font-size: 9px; padding: 0 5px; }
body.touch .pg-rew h3 { font-size: 11px; margin: 0 0 6px; }
body.touch .pg-card { padding: 7px 9px; margin-bottom: 6px; font-size: 12px; }
body.touch .pg-card .big, body.touch .pg-stats b { font-size: 20px; }
/* botões: barra fixa e opaca no rodapé, uma linha só; o conteúdo rola por cima dela sem ficar escondido atrás */
body.touch .pg-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 34; flex-wrap: nowrap; gap: 6px; padding: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 8px);
  background: #0b0d12; border-top: 1px solid #ffffff14; animation: none; overflow-x: auto; }
body.touch .pg-actions button { flex: 0 0 auto; padding: 10px 12px; font-size: 13px; white-space: nowrap; }
body.touch .pg-actions button.big { flex: 1 1 0; min-width: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
body.touch .pg-actions:has(.pg-votes) { flex-wrap: wrap; }
body.touch .pg-votes { order: -1; flex-basis: 100%; font-size: 11px; }
body.touch .pg-box::after { content: ''; display: block; height: calc(env(safe-area-inset-bottom, 0px) + 70px); flex: none; } /* espaço para a barra de botões */
@media (orientation: portrait) {
  /* em pé: botão principal na largura toda e os outros em grade de 2, sem cortar o texto */
  body.touch .pg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  body.touch .pg-actions button.big, body.touch .pg-votes { grid-column: 1 / -1; font-size: 12px; }
  body.touch .pg-actions button:not(.big) { min-width: 0; padding: 9px 6px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
  body.touch .pg-box::after { height: calc(env(safe-area-inset-bottom, 0px) + 160px); }
}
/* celular deitado: pouca altura, então o título fica pequeno e o pódio some */
@media (orientation: landscape) and (max-height: 520px) {
  body.touch .pg-title { font-size: 22px; }
  body.touch #pgPodium { display: none; }
  body.touch .pg-body { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ==================== interface nova: conta, salas, lobby ==================== */
/* campos com ícone */
.field { position: relative; display: flex; align-items: center; }
.field .fi { position: absolute; left: 12px; font-size: 15px; opacity: .7; pointer-events: none; }
.field input { padding-left: 38px; padding-right: 42px; transition: border-color .15s, box-shadow .15s; }
.field input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px #ffcc0033; }
.field .eye, .field .fstate { position: absolute; right: 6px; width: 34px; height: 34px; margin: 0; padding: 0; background: transparent; box-shadow: none; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.fstate { font-weight: 900; font-size: 18px; } .fstate.ok { color: #6ee89a; } .fstate.bad { color: var(--red); }
.fhint { display: block; font-size: 11.5px; color: var(--muted); margin-top: 5px; min-height: 14px; transition: color .15s; }
.fhint.ok { color: #6ee89a; } .fhint.bad { color: #ff9a9a; }
.strength { height: 5px; background: #ffffff12; border-radius: 3px; margin-top: 7px; overflow: hidden; }
.strength i { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .25s, background .25s; }
.link-btn { background: transparent; color: var(--muted); box-shadow: none; font-weight: 600; font-size: 14px; }
.link-btn:hover { color: var(--text); }
button.loading { position: relative; color: transparent !important; }
button.loading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 3px solid #14181f55; border-top-color: #14181f; border-radius: 50%; animation: spin .7s linear infinite; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.enter { animation: rise .25s ease-out; }
button.sec:hover:not(:disabled) { filter: brightness(1.18); }

/* conta */
#auth { padding-top: 56px; }
.auth-card { display: grid; grid-template-columns: 300px 1fr; width: 100%; max-width: 780px; margin: auto; border-radius: 20px; overflow: hidden; border: 1px solid #ffffff18; box-shadow: 0 24px 60px #000c; animation: rise .3s ease-out; }
.auth-hero { position: relative; background: radial-gradient(circle at 50% 30%, #ffcc0033, transparent 60%), linear-gradient(160deg, #2a2412, #1a1626 70%); padding: 26px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.auth-hero canvas { width: 112px; height: 112px; filter: drop-shadow(0 8px 6px #000a); animation: bob 2.4s ease-in-out infinite; }
.mini-logo { font-size: 26px !important; animation: none !important; }
.perks { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 9px; text-align: left; width: 100%; }
.perks li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: #e6e8ee; background: #ffffff0a; border-radius: 10px; padding: 8px 10px; }
.perks i { font-style: normal; font-size: 20px; }
.auth-main { background: linear-gradient(180deg, var(--panel), var(--panel2)); padding: 22px 24px; }
.auth-tabs { margin-bottom: 14px; }
.auth-form h2 { font-size: 16px; margin: 4px 0 6px; }
.auth-form label { margin-top: 12px; }
.switch { text-align: center; color: var(--muted); font-size: 13.5px; margin: 14px 0 0; }
.pick.small { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pick.small canvas { width: 40px; height: 40px; }
.pick.small button { font-size: 11px; padding: 6px 2px; }
@media (max-width: 720px) {
  .auth-card { grid-template-columns: 1fr; max-width: 440px; }
  .auth-hero { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 14px; gap: 6px 12px; }
  .auth-hero canvas { width: 64px; height: 64px; }
  .perks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
  .perks li { font-size: 11.5px; padding: 6px 8px; gap: 6px; } .perks i { font-size: 16px; }
  .auth-main { padding: 16px; }
}

/* tela inicial: cartão da conta */
.account .acc-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; margin: 0; padding: 4px; background: transparent; box-shadow: none; color: var(--text); text-align: left; font-weight: 400; font-size: 14px; border-radius: 10px; }
.account .acc-main:hover { background: #ffffff0a; filter: none; }
.acc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0; }
.acc-chips .tier-chip { background: color-mix(in srgb, var(--tc) 16%, transparent); border-radius: 10px; padding: 1px 7px; font-size: 11px; }
.acc-chips .pip-chip { margin: 0; font-size: 11px; }
.pass-chip { font-size: 11px; font-weight: 700; color: #ffe27a; background: #ffffff10; border-radius: 10px; padding: 1px 7px; }
.account #signupBtn { margin-left: 0; }

/* salas */
.me-line { display: flex; align-items: center; gap: 10px; background: var(--field); border-radius: 12px; padding: 8px 12px; }
.me-line > span { display: flex; flex-direction: column; } .me-line small { color: var(--muted); font-size: 12px; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
button.qa { margin: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 14px; background: #2c3445; color: var(--text); box-shadow: 0 4px 0 #161b25; border-radius: 14px; }
button.qa .qa-ic { grid-row: span 2; font-size: 26px; }
button.qa b { font-size: 16px; } button.qa small { font-size: 11.5px; color: var(--muted); font-weight: 500; }
button.qa.qa-quick { background: linear-gradient(135deg, #ffd96a, #ffb800); color: #241c00; box-shadow: 0 4px 0 #a87400, 0 0 20px #ffcc0033; }
button.qa.qa-quick small { color: #5a4300; }
.switch-row { display: flex; align-items: center; gap: 10px; margin: 12px 2px 0; cursor: pointer; color: var(--text); font-size: 14px; }
.switch-row small { color: var(--muted); font-size: 12px; margin-left: 4px; }
.switch-row input { display: none; }
.toggle { position: relative; width: 40px; height: 22px; border-radius: 11px; background: #ffffff1c; flex: none; transition: background .2s; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch-row input:checked + .toggle { background: var(--accent); }
.switch-row input:checked + .toggle::after { transform: translateX(18px); }
.code-box { position: relative; display: flex; gap: 8px; margin-top: 12px; }
.code-box .fi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
.code-box input { flex: 1; min-width: 0; padding-left: 38px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; }
.code-box button { width: auto; margin: 0; padding: 0 20px; }
.rhead button { width: auto; margin: 0; padding: 4px 10px; font-size: 14px; }
.spinning { animation: spin .5s linear; }
.room-card { gap: 10px; }
.room-card .people { display: flex; gap: 2px; align-items: center; }
.room-card .people .seat { width: 12px; height: 12px; border-radius: 4px; background: #ffffff14; display: inline-block; margin: 0 2px; }
.room-card .go { font-weight: 800; color: var(--accent); font-size: 13px; white-space: nowrap; }
.pill.team { background: #4da6ff33; color: #9ccfff; margin-left: 4px; }
@media (max-width: 480px) { .room-card .people canvas { width: 22px !important; height: 22px !important; } .room-card .go { display: none; } }

/* lobby: duas colunas e barra de ação fixa embaixo */
.lobby-panel { max-width: 920px; padding: 18px 20px 0; }
.lobby-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lobby-top h2 { margin: 0; }
.lobby-top #codeCopy { margin-left: auto; }
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; } /* minmax(0): conteúdo largo não estoura a coluna */
.lobby-col { min-width: 0; }
.lobby-col h3:first-child { margin-top: 14px; }
.mode-pick { margin: 14px 0 0; }
.mode-pick button:disabled { opacity: 1; cursor: default; } .mode-pick button:disabled:not(.on) { opacity: .5; }
#plist li { border-left: 3px solid var(--pc, #ffffff22); transition: transform .15s; animation: rise .25s ease-out both; }
#plist li.empty-slot, #plist li.team-head { border-left-width: 1px; animation: none; }
#plist li.host { background: linear-gradient(90deg, #ffcc000a, transparent), var(--field); }
#plist .name { gap: 6px; } #plist .name small { color: var(--accent); font-size: 12px; }
#plist .w small { color: var(--muted); font-weight: 500; }
.ghost-slot { display: flex; align-items: center; justify-content: center; color: #ffffff30; font-weight: 800; animation: pulse 1.2s infinite alternate; }
.bot-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.bot-box #addBotBtn { margin: 0; }
.share-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.share-row button { margin: 0; padding: 10px 6px; font-size: 13px; }
.char-stage { display: flex; align-items: center; gap: 14px; background: radial-gradient(circle at 20% 50%, #ffcc0022, transparent 60%), var(--field); border-radius: 14px; padding: 8px 14px; margin-bottom: 8px; }
.char-stage canvas { width: 80px; height: 80px; filter: drop-shadow(0 6px 4px #0009); }
.char-stage div { display: flex; flex-direction: column; gap: 3px; } .char-stage b { font-size: 18px; } .char-stage small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
/* sala: cartão do visual (toque para trocar) e a janela com as abas */
button.look-card { width: 100%; margin: 0 0 8px; text-align: left; color: var(--text); border: 2px solid #ffffff14; cursor: pointer; transition: border-color .15s, transform .15s; box-shadow: none; }
button.look-card:hover { border-color: #ffcc0088; transform: translateY(-1px); filter: none; }
.look-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .look-txt b { font-size: 18px; } .look-txt small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.look-power { font-size: 12.5px; color: #c8cfda; } .look-power b { color: #ffd23f; font-size: 12.5px; }
.look-go { flex: none; font: 400 10px 'Press Start 2P', monospace; background: #ffcc00; color: #241c00; border-radius: 6px; padding: 8px 10px; box-shadow: 0 3px 0 #a88400; }
#lookModal { z-index: 40; }
.look-box { width: min(620px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 10px; }
.look-head { display: flex; align-items: center; gap: 10px; } .look-head .look-tabs { flex: 1; margin: 0; } .look-head .pm-x { position: static; flex: none; }
.look-pane { overflow-y: auto; min-height: 0; flex: 1; } .look-pane .skin-pick { max-height: none; }
button.look-done { margin: 0; }
.el-fases { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; } .el-act { display: flex; align-items: center; gap: 8px; } .el-act > small { flex: none; width: 44px; font-weight: 800; color: var(--muted); font-size: 11px; text-transform: uppercase; } .el-act .seg { flex: 1; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); } .el-act .seg button { padding: 7px 4px; }
@media (max-width: 520px) { button.look-card { padding: 6px 10px; gap: 10px; } button.look-card canvas { width: 56px; height: 56px; } .look-txt b { font-size: 15px; } .look-txt small, .look-power { font-size: 11.5px; } .look-go { padding: 7px 8px; font-size: 9px; } }
#plist li.empty-slot.call button { margin: 0 0 0 auto; width: auto; padding: 6px 10px; font-size: 12px; background: #25d366; color: #06280f; border: 0; }
#inviteList li.il-head { background: none; border: 0; padding: 0 2px; margin: 4px 0 2px; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.pick button { transition: transform .12s, border-color .15s; } .pick button:hover:not(.on) { transform: translateY(-2px); border-color: #ffffff30; }
.map-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
button.map-card { margin: 0; padding: 5px 5px 6px; background: var(--field); color: var(--text); border: 2px solid transparent; box-shadow: none; display: flex; flex-direction: column; gap: 4px; align-items: stretch; font-size: 12px; border-radius: 12px; transition: transform .12s, border-color .15s; position: relative; }
button.map-card canvas { width: 100%; height: auto; aspect-ratio: 7 / 5; image-rendering: pixelated; border-radius: 7px; }
button.map-card.on { border-color: var(--accent); box-shadow: 0 0 14px #ffcc0040; }
button.map-card:hover:not(:disabled):not(.on) { transform: translateY(-2px); border-color: #ffffff30; }
button.map-card:disabled { cursor: default; opacity: 1; } button.map-card:disabled:not(.on) { opacity: .45; }
button.map-card[data-theme=aleatorio]::after { content: '🎲'; position: absolute; top: 26%; left: 50%; transform: translateX(-50%); font-size: 26px; filter: drop-shadow(0 2px 3px #000); }
.lobby-bar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 16px -20px 0; padding: 12px 20px; background: linear-gradient(180deg, #181d27f0, #14181ff8); border-top: 1px solid #ffffff14; border-radius: 0 0 16px 16px; backdrop-filter: blur(4px); }
.lobby-bar button { width: auto; margin: 0; }
.lobby-status { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lobby-status .hint, .lobby-status .err { margin: 0; min-height: 0; font-size: 13px; }
#startBtn { min-width: 210px; font-size: 16px; padding: 14px 22px; }
#startBtn.ready { animation: glow 1.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 4px 0 var(--accent-dark), 0 0 26px #ffcc0088; } }
#lobbyReplay { margin-top: 0; }
/* botões da tela inicial: ícone e nome sempre do mesmo jeito */
.home .row button.sec { display: flex; align-items: center; justify-content: center; gap: 7px; transition: transform .12s, filter .15s; }
.home .row button.sec:hover:not(:disabled) { transform: translateY(-2px); }
.home .row button.sec i { font-style: normal; font-size: 18px; }
@media (max-width: 520px) {
  .home .row button.sec { flex-direction: column; gap: 3px; padding: 10px 4px; font-size: 14px; }
  .home .row button.sec i { font-size: 22px; }
}
.mode-pick button { font-size: 14px; padding: 10px 6px; }
.err:empty { min-height: 0; margin-top: 0; }
@media (max-width: 760px) {
  .lobby-top #codeCopy { display: none; }
  .lobby-grid { grid-template-columns: 1fr; gap: 0; } #lobby.exp-mode .lobby-grid > .lobby-col:last-child { order: -1; margin-bottom: 8px; } /* Expedição no celular: fase e dificuldade primeiro */
  .lobby-panel { padding: 14px 14px 0; }
  .lobby-bar { margin: 14px -14px 0; padding: 10px 14px; flex-wrap: wrap; }
  .lobby-status { order: -1; flex-basis: 100%; }
  #startBtn { flex: 1; min-width: 0; }
  .map-pick { grid-template-columns: repeat(3, 1fr); }
}

/* sorteio das posições */
#msg .shuffle-msg { display: inline-block; font-size: 26px; color: var(--accent); background: #000a; border-radius: 14px; padding: 8px 18px; animation: pulse .3s infinite alternate; }

/* avisos (convites) */
.toast { position: fixed; top: 48px; left: 50%; transform: translateX(-50%); z-index: 40; width: min(92vw, 420px); background: linear-gradient(180deg, #2a3242, #1d2330); border: 1px solid #ffcc0066; border-radius: 14px; padding: 12px 14px; box-shadow: 0 14px 40px #000c; }
.toast.show { animation: drop .3s ease-out; }
.toast .tmsg { font-size: 15px; line-height: 1.4; }
.toast .tact { display: flex; gap: 8px; margin-top: 10px; }
.toast .tact button { margin: 0; padding: 9px; font-size: 14px; }

@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes drop { from { opacity: 0; transform: translate(-50%, -16px); } }
@keyframes pop { from { transform: scale(2.2); opacity: 0; } 60% { transform: scale(.9); opacity: 1; } }
@keyframes hop { to { transform: translateY(-4px); } }
@keyframes pulse { to { opacity: .55; } }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes boom { 0%, 70%, 100% { transform: scale(1) rotate(0); } 80% { transform: scale(1.35) rotate(-8deg); } 90% { transform: scale(.95) rotate(6deg); } }

@media (max-width: 420px) {
  .pick { grid-template-columns: repeat(2, 1fr); }
  .rank .hide-sm { display: none; }
  #hud { padding: 44px 6px 4px; }
}
/* ---------- tela inicial (vitrine) ---------- */
body.guest .user-only { display: none !important; }
body.guest #home .hero { order: 1; } body.guest #home .cta { order: 2; } body.guest #home .account { order: 3; } body.guest #home .tiles { order: 4; }
#home .home { max-width: 760px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.screen.enter .home > * { animation: rise .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.screen.enter .home > :nth-child(2) { animation-delay: .06s; } .screen.enter .home > :nth-child(3) { animation-delay: .14s; } .screen.enter .home > :nth-child(4) { animation-delay: .22s; }
.hero { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#home .logo { font-size: clamp(34px, 10vw, 68px); line-height: 1.1; filter: drop-shadow(0 0 30px #ff7a1a40); }
#home .tag { margin: 0; font-size: 15px; color: #c8cfda; }
#home .tag b { color: #fff; font-weight: 700; }
.stage-wrap { position: relative; width: 100%; border-radius: 16px; padding: 4px; background: linear-gradient(135deg, #ffcc00aa, #ff4d6a88 45%, #4da6ff88); box-shadow: 0 18px 50px #000c, 0 0 40px #ffcc0022; }
#stage { display: block; width: 100%; aspect-ratio: 13 / 5; image-rendering: pixelated; border-radius: 12px; background: #0b0d12; }
.stage-wrap::after { content: ''; position: absolute; inset: 4px; border-radius: 12px; pointer-events: none; box-shadow: inset 0 0 40px #0009; }
.live-pill { position: absolute; left: 14px; top: 12px; z-index: 1; display: flex; align-items: center; gap: 7px; background: #000b; backdrop-filter: blur(4px); border: 1px solid #ffffff22; border-radius: 20px; padding: 5px 12px 5px 10px; font-size: 12.5px; color: #dfe5ee; }
.live-pill i { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 #3ddc84aa; animation: live 1.6s infinite; }
.live-pill b { color: #fff; }
@keyframes live { 70% { box-shadow: 0 0 0 8px #3ddc8400; } 100% { box-shadow: 0 0 0 0 #3ddc8400; } }

/* chamadas principais */
.cta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.guest .cta { grid-template-columns: 1fr; }
button.cta-btn { position: relative; overflow: hidden; margin: 0; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; text-align: left; transition: transform .15s, filter .15s, box-shadow .15s; }
button.cta-btn .cta-ic { flex: none; width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: #ffffff38; box-shadow: inset 0 -3px 0 #0002; }
button.cta-btn .cta-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
button.cta-btn b { font-family: 'Press Start 2P', monospace; font-size: clamp(13px, 2.6vw, 17px); letter-spacing: 1px; }
button.cta-btn small { font-size: 12.5px; font-weight: 600; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.cta-btn.ranked { background: linear-gradient(135deg, #ffe27a, #ffb800 55%, #ff9500); color: #2a1e00; box-shadow: 0 6px 0 #a86a00, 0 14px 30px #ffb80033; }
button.cta-btn.play { background: linear-gradient(135deg, #ff9a4a, #ff4d6a); color: #fff; box-shadow: 0 6px 0 #a3243a, 0 14px 30px #ff4d6a33; text-shadow: 0 2px 0 #0003; }
body.guest button.cta-btn.play { padding: 20px 22px; justify-content: center; }
body.guest button.cta-btn.play b { font-size: clamp(16px, 4vw, 22px); }
button.cta-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, transparent, #ffffff55, transparent); transform: skewX(-20deg); animation: shine 4.5s ease-in-out infinite; }
button.cta-btn.play::after { animation-delay: 2.2s; }
/* evento do mês (Noite do Saci): noite roxa com abóbora */
#shopGrid > .ev-intro, #shopGrid > .ev-grid, #shopGrid > .fag-note { grid-column: 1 / -1; } /* aba do evento ocupa a largura toda */
.pg-card.doce-card { background: linear-gradient(90deg, #5a1a6a55, transparent), var(--field); border: 1px solid #ff8ac866; } .pg-card.doce-card canvas { width: 32px; height: 32px; image-rendering: pixelated; } .pg-card.doce-card button { width: auto; margin: 0; }
#shopTabs .ev-tab.on { background: linear-gradient(180deg, #8a3ad0, #5a1a8a); color: #fff; }
.ev-intro { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 10px; background: linear-gradient(100deg, #2a1040, #4a1a5a 60%, #8a3a1a); border: 2px solid #0b0d12; margin-bottom: 10px; }
.ev-bal { display: flex; align-items: center; gap: 8px; } .ev-bal canvas { width: 32px; height: 32px; image-rendering: pixelated; } .ev-bal small { display: block; color: #e0c8ff; font-size: 11px; } .ev-bal b { font: 400 18px 'Press Start 2P', monospace; color: #ff8ac8; }
.ev-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ev-txt b { font: 400 13px 'Press Start 2P', monospace; color: #ffd23f; } .ev-txt small { color: #e8e0f0; font-size: 12px; line-height: 1.4; }
button.ev-play { width: auto; margin: 0; padding: 10px 16px; background: linear-gradient(180deg, #ffb030, #ff7a1a); color: #2a0a00; box-shadow: 0 4px 0 #a04a08; }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.ev-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 9px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 25%, transparent), transparent 70%), #1e1a2a; border: 2px solid color-mix(in srgb, var(--rc) 60%, #0b0d12); text-align: center; }
.ev-card .thumb { width: 64px; height: 64px; image-rendering: pixelated; } .ev-card b { font-size: 13px; } .ev-card button { width: auto; margin: 0; } .ev-own { color: #7bf0b8; font-weight: 700; }
.cur.doce canvas { width: 16px; height: 16px; image-rendering: pixelated; } .cur.doce b { color: #ff8ac8; }
.cta .cta-btn.event { grid-column: 1 / -1; background: linear-gradient(100deg, #2a1040, #5a1a6a 45%, #c8501a); color: #fff; text-shadow: 0 2px 0 #0006; box-shadow: inset 0 3px 0 #fff3, inset 0 -4px 0 #0004, 0 6px 0 #0b0d12; }
.cta-btn.event b em { font-family: system-ui; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0; background: #ff8a1a; color: #2a0a00; text-shadow: none; border-radius: 4px; padding: 2px 6px; margin-left: 8px; vertical-align: 3px; animation: pulse .8s infinite alternate; }
.event-art { flex: none; width: 110px; height: 52px; border-radius: 6px; background: radial-gradient(circle at 70% 30%, #ffe27a33, transparent 50%), #12081c; box-shadow: inset 0 0 0 2px #0b0d1266; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.event-art canvas { width: 96px; height: 40px; image-rendering: pixelated; }
.chip.doce-chip .st-pu b { color: #ff8ac8; } .dz-lead { font: 400 8px 'Press Start 2P', monospace; background: #ffd23f; color: #241c00; border-radius: 4px; padding: 2px 4px; }
/* Expedição em destaque: do sertão ao mangue, com os chefes andando */
.cta .cta-btn.exp { grid-column: 1 / -1; background: linear-gradient(100deg, #f08a2a, #c86a1c 32%, #2a8a6e 70%, #146058); color: #fff; text-shadow: 0 2px 0 #0005; box-shadow: inset 0 3px 0 #fff4, inset 0 -4px 0 #0003, 0 6px 0 #0b0d12; }
.cta .cta-btn.exp::after { animation-delay: 1.1s; }
.cta-btn.exp b em { font-family: system-ui; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0; background: #ffd23f; color: #241c00; text-shadow: none; border-radius: 4px; padding: 2px 6px; margin-left: 8px; vertical-align: 3px; animation: pulse .8s infinite alternate; }
.exp-hero-art { flex: none; width: 212px; height: 76px; border-radius: 6px; background: linear-gradient(180deg, #0b0d1230, #0b0d1270); box-shadow: inset 0 0 0 2px #0b0d1266; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.exp-hero-art canvas { width: 198px; height: 69px; image-rendering: pixelated; }
@media (max-width: 760px) { .exp-hero-art { width: 150px; height: 56px; } .exp-hero-art canvas { width: 145px; height: 50px; } }
@media (max-width: 420px) { .exp-hero-art { width: 116px; height: 46px; } .exp-hero-art canvas { width: 112px; height: 39px; } }
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
button.cta-btn:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.06); }
button.cta-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #0006; }

/* atalhos */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
button.tile { position: relative; margin: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 11px; row-gap: 2px; align-items: center; padding: 12px 14px; text-align: left; border-radius: 14px; color: var(--text); background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 55%), linear-gradient(180deg, #232b3a, #1a202b); border: 1px solid #ffffff14; box-shadow: 0 4px 0 #11151d, 0 10px 24px #0006; transition: transform .15s, border-color .15s; }
button.tile i { grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 22px; background: color-mix(in srgb, var(--tc) 22%, #11151d); border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); }
button.tile b { font-size: 15px; font-weight: 800; }
button.tile small { font-size: 11.5px; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.tile:hover:not(:disabled) { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tc) 60%, transparent); filter: none; }
button.tile:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #11151d; }
button.tile .badge { position: absolute; top: -6px; right: -6px; margin: 0; box-shadow: 0 2px 6px #0008; }

/* cartão da conta */
#home .account { margin: 0; padding: 10px 12px; border-radius: 16px; background: linear-gradient(180deg, #232b3aee, #1a202bee); backdrop-filter: blur(6px); }
.acc-av { position: relative; flex: none; width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, #ffcc0030, #11151d); border: 1px solid #ffcc0044; }
.acc-tier { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; background: color-mix(in srgb, var(--tc) 35%, #14181f); border: 2px solid var(--tc); }
.acc-xp { display: block; height: 5px; max-width: 220px; border-radius: 3px; background: #ffffff14; overflow: hidden; margin-top: 3px; }
.acc-xp i { display: block; height: 100%; background: linear-gradient(90deg, #ffe27a, #ffb800); border-radius: 3px; }
button.acc-out { flex: none; width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 50%; font-size: 17px; background: #2c3445; color: #cfd6e2; box-shadow: 0 3px 0 #161b25; }
.account.guest-card { flex-wrap: wrap; text-align: left; border: 1px solid #ffcc0055; background: radial-gradient(circle at 0% 0%, #ffcc0020, transparent 50%), linear-gradient(180deg, #232b3aee, #1a202bee); }
.guest-card .who small { display: block; margin: 3px 0 7px; }
.perk-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.perk-chips span { font-size: 11.5px; font-weight: 700; background: #ffffff10; border: 1px solid #ffffff18; border-radius: 10px; padding: 2px 8px; }
.guest-btns { display: flex; flex-direction: column; gap: 6px; }
#home .guest-btns button { width: auto; margin: 0; padding: 10px 16px; font-size: 14px; white-space: nowrap; }
@media (max-width: 620px) {
  .cta { grid-template-columns: 1fr; gap: 10px; }
  button.cta-btn { padding: 12px 14px; }
  button.cta-btn .cta-ic { width: 44px; height: 44px; font-size: 24px; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  body.guest .tiles { grid-template-columns: repeat(3, 1fr); }
  body.guest button.tile { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 10px 6px; }
  body.guest button.tile i { grid-row: auto; }
  body.guest button.tile small { display: none; }
  button.tile { padding: 10px; column-gap: 9px; }
  button.tile i { width: 36px; height: 36px; font-size: 19px; }
  .guest-btns { flex-direction: row; width: 100%; }
  #home .guest-btns button { flex: 1; }
  .live-pill { left: 8px; top: 8px; font-size: 11px; padding: 3px 9px 3px 8px; }
}

/* ---------- nível da conta e poderes ---------- */
.power-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
button.pw-btn { margin: 0; padding: 8px 4px 7px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--field); color: var(--text); border: 2px solid #ffffff12; box-shadow: none; border-radius: 12px; font-size: 12px; transition: transform .12s, border-color .15s; }
button.pw-btn .pw-ic canvas, .lv-power .pw-ic canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.lv-power .pw-ic canvas { width: 40px; height: 40px; }
button.pw-btn.locked .pw-ic canvas { opacity: .8; }
button.pw-btn b { font-size: 11px; line-height: 1.15; }
button.pw-btn small { font-size: 10px; color: var(--muted); font-weight: 600; }
button.pw-btn.on { border-color: var(--accent); background: radial-gradient(circle at 50% 0%, #ffcc0022, transparent 70%), var(--field); box-shadow: 0 0 12px #ffcc0033; }
button.pw-btn.on small { color: var(--accent); }
button.pw-btn.locked { opacity: .5; }
button.pw-btn:hover:not(.locked) { transform: translateY(-2px); }
.power-desc { font-size: 12.5px; color: #c8cfda; background: #ffffff08; border-radius: 10px; padding: 8px 10px; margin-top: 6px; line-height: 1.45; }
.power-desc .pw-key { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.power-desc kbd { font: 700 10px system-ui; background: #ffffff18; border-radius: 4px; padding: 1px 5px; }
.ranked-power { margin: 10px 0 4px; }
.ranked-power h3 small { display: block; font-weight: 500; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ranked-lock { display: flex; align-items: center; gap: 12px; background: radial-gradient(circle at 0% 50%, #ffcc0018, transparent 60%), var(--field); border: 1px dashed #ffcc0066; border-radius: 14px; padding: 12px; }
.ranked-lock .rl-ic { font-size: 30px; } .ranked-lock .grow { flex: 1; min-width: 0; } .ranked-lock small { color: var(--muted); font-size: 12px; }
.lv-badge { flex: none; width: 76px; height: 76px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(160deg, #7ad0ff, #6a3ad0); box-shadow: 0 6px 0 #3a1f80, 0 0 24px #7a5aff55; color: #fff; text-shadow: 0 2px 0 #0004; }
.lv-badge small { font-size: 10px; font-weight: 800; letter-spacing: 2px; opacity: .85; }
.lv-badge b { font-family: 'Press Start 2P', monospace; font-size: 24px; line-height: 1.2; }
.lv-badge.sm { width: 46px; height: 46px; border-radius: 12px; box-shadow: 0 3px 0 #3a1f80; } .lv-badge.sm b { font-size: 14px; } .lv-badge.sm small { font-size: 8px; letter-spacing: 1px; }
.lv-head { display: flex; gap: 14px; align-items: center; background: radial-gradient(circle at 0% 50%, #7a5aff22, transparent 60%), var(--field); border: 1px solid #7a5aff44; border-radius: 16px; padding: 14px; margin-bottom: 6px; }
.lv-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lv-bar { position: relative; height: 18px; border-radius: 9px; background: #ffffff12; overflow: hidden; }
.lv-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #7ad0ff, #b06aff); border-radius: 9px; }
.lv-bar em { position: relative; display: block; text-align: center; font-style: normal; font-size: 11px; font-weight: 800; line-height: 18px; text-shadow: 0 1px 2px #000; }
.lv-next { font-size: 13.5px; } .lv-how { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.lv-powers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lv-power { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; background: var(--field); border: 2px solid #ffffff10; border-radius: 14px; padding: 10px; opacity: .6; }
.lv-power .pw-ic { grid-row: span 3; font-size: 30px; filter: grayscale(1); }
.lv-power b { font-size: 14px; } .lv-power small { font-size: 11.5px; color: var(--muted); line-height: 1.35; } .lv-power em { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--muted); margin-top: 3px; }
.lv-power.open { opacity: 1; cursor: pointer; } .lv-power.open .pw-ic { filter: none; } .lv-power.open em { color: #7ee2a0; }
.lv-power.on { border-color: var(--accent); box-shadow: 0 0 14px #ffcc0033; } .lv-power.on em { color: var(--accent); }
.lv-road { display: flex; flex-direction: column; gap: 0; max-height: 46vh; overflow-y: auto; padding: 4px 4px 4px 2px; }
.lv-step { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 8px 7px 2px; }
.lv-step::before { content: ''; position: absolute; left: 17px; top: -50%; bottom: 50%; width: 3px; background: #ffffff18; z-index: 0; }
.lv-step:first-child::before { display: none; }
.lv-step.got::before { background: #7a5aff; }
.lv-num { position: relative; z-index: 1; flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background: #232b3a; border: 2px solid #ffffff22; color: var(--muted); }
.lv-step.got .lv-num { background: #6a3ad0; border-color: #b08aff; color: #fff; }
.lv-step.next .lv-num { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px #ffcc0022; animation: pulse .9s infinite alternate; }
.lv-step.big .lv-num { width: 40px; height: 40px; margin-left: -3px; }
.lv-body { flex: 1; min-width: 0; } .lv-body small { font-size: 11px; color: var(--muted); }
.lv-body > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.lv-chip { font-size: 12.5px; font-weight: 700; border-radius: 10px; padding: 3px 9px; background: #ffffff10; }
.lv-chip.power { background: linear-gradient(90deg, #7a5aff44, #7ad0ff33); border: 1px solid #b08aff66; }
.lv-chip.rk { background: #ffcc0022; border: 1px solid #ffcc0066; color: #ffe27a; }
.lv-step:not(.got) .lv-chip { opacity: .75; }
.lv-left { font-size: 11.5px; font-weight: 800; color: var(--accent); white-space: nowrap; }
/* nível no cartão da tela inicial */
.acc-lv { position: absolute; left: -6px; top: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(160deg, #7ad0ff, #6a3ad0); border: 2px solid #14181f; }
button.acc-level { flex: none; width: 170px; margin: 0; padding: 7px 10px; display: flex; flex-direction: column; gap: 5px; text-align: left; border-radius: 12px; background: radial-gradient(circle at 0% 0%, #7a5aff33, transparent 70%), #232b3a; border: 1px solid #7a5aff55; box-shadow: none; color: var(--text); font-weight: 400; }
.acc-lvtxt { display: flex; flex-direction: column; line-height: 1.2; } .acc-lvtxt b { font-size: 13px; } .acc-lvtxt small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.acc-level .acc-xp { max-width: none; margin: 0; } button.acc-level .acc-xp i { background: linear-gradient(90deg, #7ad0ff, #b06aff); }
@media (max-width: 620px) {
  #home .account.user { flex-wrap: wrap; }
  button.acc-level { order: 3; width: 100%; flex-direction: row; align-items: center; }
  button.acc-level .acc-lvtxt { flex-direction: row; gap: 8px; align-items: baseline; flex: none; }
  button.acc-level .acc-xp { flex: 1; }
  .power-pick { grid-template-columns: repeat(2, 1fr); }
  .lv-powers { grid-template-columns: 1fr; }
}
/* fim de partida: nível e poder novo */
.pg-card.lvl { display: flex; align-items: center; gap: 10px; }
.pg-card.lvl em { font-style: normal; color: #b08aff; font-weight: 800; }
.pg-card.unlock { display: flex; align-items: center; gap: 12px; background: radial-gradient(circle at 0% 50%, #b06aff44, transparent 70%), #232b3a; border: 1px solid #b08aff; animation: pop .6s ease-out; }
.pg-card.unlock .ul-ic { font-size: 32px; filter: drop-shadow(0 0 10px #b08aff); }
.pg-card.unlock small { display: block; color: #c8cfda; }

/* menu em pixel art: bordas e sombras duras, sem desfoque; títulos na fonte do logo; ícones de sprite */
canvas[data-icon] { display: block; image-rendering: pixelated; }
button.cta-btn { border-radius: 8px; border: 3px solid #0b0d12; }
button.cta-btn.ranked { box-shadow: inset 0 3px 0 #fff6, inset 0 -4px 0 #0002, 0 6px 0 #0b0d12; }
button.cta-btn.play { box-shadow: inset 0 3px 0 #fff5, inset 0 -4px 0 #0002, 0 6px 0 #0b0d12; }
button.cta-btn .cta-ic { border-radius: 6px; background: #0b0d1255; box-shadow: inset 0 0 0 2px #0b0d1266; }
button.cta-btn .cta-ic canvas { width: 36px; height: 36px; }
button.cta-btn:active:not(:disabled) { box-shadow: inset 0 3px 0 #fff4, 0 2px 0 #0b0d12; }
button.tile { border-radius: 8px; border: 3px solid #0b0d12; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 14%, #262e3d), #1b212c); box-shadow: inset 0 2px 0 #ffffff14, inset 0 -3px 0 #0003, 0 5px 0 #0b0d12; }
button.tile:hover:not(:disabled) { border-color: #0b0d12; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 70%, transparent), 0 8px 0 #0b0d12; }
button.tile:active:not(:disabled) { box-shadow: inset 0 2px 0 #ffffff14, 0 1px 0 #0b0d12; }
button.tile i { border-radius: 6px; border: 2px solid #0b0d12; background: color-mix(in srgb, var(--tc) 30%, #11151d); box-shadow: inset 0 2px 0 #ffffff1c; }
button.tile i canvas { width: 32px; height: 32px; }
button.tile b { font-family: 'Press Start 2P', monospace; font-size: 11px; font-weight: 400; letter-spacing: .5px; line-height: 1.5; }
button.tile .badge { border-radius: 4px; border: 2px solid #0b0d12; }
#home .account, .stage-wrap { border-radius: 10px; }
.stage-wrap { background: #0b0d12; box-shadow: 0 0 0 3px #ffcc00aa, 0 8px 0 #0b0d12, 0 18px 40px #000a; }
#stage { border-radius: 6px; }
@media (max-width: 620px) {
  button.tile i canvas { width: 26px; height: 26px; }
  button.tile b { font-size: 10px; }
  button.cta-btn .cta-ic canvas { width: 30px; height: 30px; }
}

/* ---------- loja de skins ---------- */
button.tile.shop-tile { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; background: linear-gradient(90deg, #ff4fa033, #7a5aff2a 60%, #1b212c), #1b212c; }
button.tile.shop-tile b em { font-style: normal; font-family: system-ui; font-size: 10px; font-weight: 800; background: #ff4fa0; color: #fff; border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 2px; animation: pulse .8s infinite alternate; }
#shopParade { grid-row: span 2; grid-column: 3; justify-self: end; width: 320px; max-width: 100%; height: 40px; image-rendering: pixelated; }
canvas.h-ic { display: inline-block; width: 26px; height: 26px; image-rendering: pixelated; vertical-align: -4px; }
.beta-tag { font-family: system-ui; font-size: 11px; font-weight: 800; color: #fff; background: #ff4fa0; border-radius: 4px; padding: 2px 6px; vertical-align: 6px; }
.shop-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* loja em duas colunas: vitrine à esquerda (fica parada), itens rolando à direita; no celular, uma embaixo da outra */
.panel.wide.shop-panel { max-width: 960px; }
.shop-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px; flex: 1 1 auto !important; min-height: 0; margin-top: 10px; } /* vitrine larga em cima, grade embaixo */
.shop-body .shop-hero { flex-direction: row; align-items: center; margin: 0; min-height: 0; overflow: visible; }
.shop-body .shop-hero.hidden { display: none; }
.shop-body .shop-hero.hidden + .shop-grid { grid-column: 1 / -1; }
.shop-body .sh-col { width: 150px; } .shop-body .sh-modes { flex-wrap: wrap; } .shop-body .sh-modes button { flex: 1 1 30%; font-size: 10px; padding: 4px 2px; } .shop-body .shop-hero { padding: 10px; } .shop-body .sh-stage { width: 100%; max-width: none; height: auto; aspect-ratio: 1; margin: 0 auto; }
.shop-body #shopBig { width: 100%; height: 100%; }
.shop-body .shop-grid { min-height: 0; overflow-y: auto; padding-right: 4px; }
.sh-col { flex: none; display: flex; flex-direction: column; }
.sh-modes { display: flex; gap: 4px; justify-content: center; margin: 8px 0 2px; }
.sh-modes button { width: auto; flex: 1; margin: 0; padding: 6px 4px; font-size: 11px; background: var(--field); color: var(--muted); box-shadow: none; border: 1px solid #ffffff14; }
.sh-modes button.on { background: color-mix(in srgb, var(--rc) 35%, #2f3a4d); color: #fff; border-color: var(--rc); }
@media (max-width: 760px) {
  .shop-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .shop-body .shop-hero { flex-direction: row; align-items: center; overflow: visible; }
  .shop-body .sh-col { width: 118px; } .shop-body .sh-stage { width: 100%; max-width: none; }
  .sh-modes { flex-wrap: wrap; } .sh-modes button { font-size: 10px; padding: 5px 2px; flex: 1 1 40%; }
  .shop-body .sh-info > small, .shop-body .sh-fx { display: none; }
  .shop-top .wallet { min-width: 0; flex: 1 1 130px; padding: 8px 10px; } .shop-top .wallet small { display: none; }
  .shop-panel > .hint { display: none; }
}
/* loja com uma rolagem só (a tela inteira rola): a grade não fica presa numa faixa pequena; o Voltar fica sempre à mão */
.panel.wide.shop-panel { max-height: none; } #shop { overflow-x: hidden; }
.shop-panel .shop-body { grid-template-rows: auto auto; flex: none !important; }
.shop-panel .shop-body .shop-grid { overflow: visible; max-height: none; }
.shop-panel .shop-body .sh-col { width: 124px; }
.shop-panel > .back { position: sticky; bottom: -22px; z-index: 3; box-shadow: 0 -10px 20px #11151dcc; }
.shop-top .wallet { flex: 1; margin: 0; }
.shop-top .seg { margin: 0; }
.shop-top { gap: 8px; } .shop-top .wallet { min-width: 150px; } .shop-top .wallet .wallet-n { font-size: 20px; display: flex; align-items: center; gap: 6px; } .shop-top .wallet canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.wallet.fag { background: linear-gradient(90deg, #ff7a1a2a, transparent), var(--field); border-color: #ff7a1a55; } .wallet.fag .wallet-n b { color: #ffb020; } .wallet.fag .mini { margin: 0 0 0 auto; width: auto; padding: 6px 10px; }
.shop-tabs .fag-tab.on { background: linear-gradient(180deg, #ff9a3a, #e8601a); color: #fff; }
.sh-price { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .sh-price em { font-style: normal; font-size: 12px; color: #ff9a9a; font-weight: 700; }
.sh-price.beta .was { opacity: .55; position: relative; } .sh-price.beta .was::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: #ff6a6a; transform: rotate(-6deg); }
.sh-price.beta em { color: #0b2a14; background: linear-gradient(180deg, #7bf0b8, #2fb87a); padding: 3px 8px; border-radius: 6px; font-weight: 800; }
.skin-card small em.free { font-style: normal; color: #7ee2a0; font-weight: 800; }
.sh-act button.buy.fag, .fag-pack button.buy { background: linear-gradient(180deg, #ffb020, #ff7a1a); color: #3a1a00; box-shadow: 0 4px 0 #a04a08; }
.fag-intro { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: #1b212c; border: 3px solid #0b0d12; border-radius: 10px; padding: 12px; box-shadow: inset 0 0 0 1px #ff7a1a55; }
.fag-intro p { margin: 0; flex: 1 1 260px; font-size: 13px; color: var(--muted); } .fag-intro p b { color: #e8ecf2; }
.fag-bal { display: flex; align-items: center; gap: 10px; background: #11151d; border-radius: 10px; padding: 8px 14px; } .fag-bal canvas { width: 40px; height: 40px; image-rendering: pixelated; } .fag-bal small { display: block; color: var(--muted); font-size: 11px; } .fag-bal b { font-family: 'Press Start 2P', monospace; font-size: 20px; color: #ffb020; }
.fag-packs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.fag-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 8px 10px; border-radius: 10px; border: 3px solid #0b0d12; background: radial-gradient(circle at 50% 30%, #ff7a1a33, transparent 65%), #1b212c; box-shadow: inset 0 0 0 1px #ff7a1a55, 0 4px 0 #0b0d12; }
.fag-pack.hot { box-shadow: inset 0 0 0 2px #ffb020, 0 0 18px #ffb02055, 0 4px 0 #0b0d12; }
.fag-pack .fp-ic { width: 72px; height: 72px; image-rendering: pixelated; } .fag-pack .fp-n { font-family: 'Press Start 2P', monospace; font-size: 18px; color: #ffb020; } .fag-pack small { color: var(--muted); font-size: 12px; font-weight: 700; }
.fag-pack button { width: 100%; margin: 6px 0 0; padding: 8px 6px; }
.fp-tag { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 0 0 8px 8px; background: #ffb020; color: #3a1a00; }
.fag-note { grid-column: 1 / -1; font-size: 13px; color: var(--muted); background: #ffffff08; border-radius: 8px; padding: 10px 12px; } .fag-note b { color: #ffb020; } .fag-note.small { font-size: 11px; background: none; padding: 0 4px; }
.shop-hero { display: flex; gap: 14px; align-items: center; margin: 10px 0; padding: 12px; border-radius: 10px; border: 3px solid #0b0d12; background: radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 60%), #1b212c; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 50%, transparent), 0 5px 0 #0b0d12; }
.sh-stage { flex: none; width: 160px; height: 160px; border-radius: 8px; background: repeating-conic-gradient(#ffffff08 0 25%, transparent 0 50%) 0 0 / 16px 16px, #11151d; display: flex; align-items: center; justify-content: center; border: 2px solid #0b0d12; }
#shopBig { width: 128px; height: 128px; image-rendering: pixelated; }
.sh-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sh-rar { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--rc); }
.sh-info b { font-family: 'Press Start 2P', monospace; font-size: 15px; font-weight: 400; line-height: 1.4; }
.sh-info small { color: #c8cfda; font-size: 12.5px; line-height: 1.4; }
.sh-act { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.sh-act button { width: auto; margin: 0; padding: 10px 18px; }
.sh-act button.buy { background: linear-gradient(180deg, #ff7ac0, #ff4fa0); color: #fff; box-shadow: 0 4px 0 #a02a68; }
.sh-act button[data-short] { filter: grayscale(.6) brightness(.85); }
.sh-act em { font-style: normal; font-size: 12px; color: #ff9a9a; font-weight: 700; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; grid-auto-rows: max-content; align-content: start; }
button.skin-card { position: relative; margin: 0; padding: 18px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--text); border-radius: 8px; border: 3px solid #0b0d12; background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 22%, #232b3a), #1b212c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 40%, transparent), 0 4px 0 #0b0d12; transition: transform .12s; }
button.skin-card:hover { transform: translateY(-2px); filter: none; }
button.skin-card.sel { box-shadow: inset 0 0 0 2px var(--accent), 0 0 14px #ffcc0044, 0 4px 0 #0b0d12; }
button.skin-card .sk-spr { width: 56px; height: 56px; image-rendering: pixelated; }
button.skin-card b { font-size: 12px; line-height: 1.2; }
button.skin-card small { font-size: 11px; font-weight: 700; color: #ffe27a; }
button.skin-card.own small { color: #7ee2a0; }
.sk-tag { position: absolute; top: 4px; right: 5px; font-size: 9px; font-weight: 800; color: #c8cfda; background: #0b0d1288; border-radius: 4px; padding: 1px 4px; }
.sk-rar { position: absolute; top: 4px; left: 6px; font-size: 9px; font-weight: 800; text-transform: uppercase; color: var(--rc); }
/* escada de raridade na loja */
.sk-row-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 8px 2px 0; padding-bottom: 4px; border-bottom: 2px solid color-mix(in srgb, var(--rc) 45%, transparent); }
.sk-row-head:first-child { margin-top: 0; }
.sk-row-head b { font-family: 'Press Start 2P', monospace; font-size: 11px; font-weight: 400; color: var(--rc); }
.sk-row-head span { font-size: 12px; font-weight: 800; color: #ffe27a; }
.cur { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: #ffe27a; } .cur.fag { color: #ffb020; } .cur canvas { width: 16px; height: 16px; image-rendering: pixelated; } .cur.big canvas { width: 24px; height: 24px; } .cur.big b { font-size: 22px; }
.sk-row-head small { font-size: 11px; color: var(--muted); margin-left: auto; }
button.skin-card .sk-spr { width: 72px; height: 72px; margin: -6px 0; }
button.skin-card.rar-epico { box-shadow: inset 0 0 0 1px #b06aff, 0 0 12px #b06aff44, 0 4px 0 #0b0d12; }
button.skin-card.rar-lendario { border-color: #0b0d12; background: linear-gradient(180deg, #ffb02033, #2a2236), #1b212c; box-shadow: inset 0 0 0 2px #ffb020, 0 0 18px #ffb02055, 0 4px 0 #0b0d12; overflow: hidden; }
button.skin-card.rar-lendario::after, .shop-hero.rar-lendario::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 35%; background: linear-gradient(90deg, transparent, #ffffff40, transparent); transform: skewX(-20deg); animation: shine 3.2s ease-in-out infinite; pointer-events: none; }
button.skin-card.rar-lendario .sk-rar { background: linear-gradient(90deg, #ffd23f, #ff8ac8, #7ad0ff, #ffd23f); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow 2s linear infinite; }
@keyframes rainbow { to { background-position: 200% 0; } }
.shop-hero { position: relative; overflow: hidden; }
.shop-tabs { margin: 6px 0 0; } .shop-tabs button { flex: 1; }
.shop-hero.rar-lendario { box-shadow: inset 0 0 0 2px #ffb020, 0 0 24px #ffb02055, 0 5px 0 #0b0d12; }
.shop-hero.rar-epico { box-shadow: inset 0 0 0 2px #b06aff, 0 0 18px #b06aff44, 0 5px 0 #0b0d12; }
.sh-fx { font-size: 12px; font-weight: 700; color: #ffe27a; }
.shop-hero.rar-epico .sh-fx { color: #d8b0ff; }
/* skin no lobby */
/* quebra em linhas; com muitas skins, no máximo 2 linhas visíveis e rola dentro (nunca empurra o layout) */
.skin-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; max-height: 172px; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 2px 0; scrollbar-width: thin; }
button.sk-mini { min-width: 0; margin: 0; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--field); color: var(--text); border: 2px solid #ffffff12; box-shadow: none; border-radius: 10px; }
button.sk-mini canvas { width: 40px; height: 40px; image-rendering: pixelated; }
button.sk-mini small { font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
button.sk-mini.on { border-color: var(--accent); background: radial-gradient(circle at 50% 0%, #ffcc0022, transparent 70%), var(--field); }
button.sk-mini.rar-lendario:not(.on) { border-color: #ffb02088; } button.sk-mini.rar-epico:not(.on) { border-color: #b06aff88; }
button.sk-mini.shop { border-style: dashed; }
@media (max-width: 620px) {
  #shopParade { display: none; }
  button.tile.shop-tile { grid-template-columns: auto 1fr; }
  .shop-hero { gap: 10px; padding: 10px; }
  .sh-stage, #shopBig { width: 88px; height: 88px; }
  .sh-info b { font-size: 12px; }
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
  button.skin-card .sk-spr { width: 44px; height: 44px; }
}

/* tela inicial em tela larga e baixa (notebook, navegador com barra): duas colunas, arena à esquerda e ações à direita */
@media (min-width: 1100px) and (max-height: 920px) {
  #home .home { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: 'hero acc' 'hero cta' 'hero tiles'; align-items: start; column-gap: 22px; row-gap: 12px; }
  #home .hero { grid-area: hero; align-self: center; }
  #home .account { grid-area: acc; }
  #home .cta { grid-area: cta; }
  #home .tiles { grid-area: tiles; grid-template-columns: repeat(2, 1fr); }
  body.guest #home .home { grid-template-areas: 'hero cta' 'hero acc' 'hero tiles'; }
  body.guest #home .tiles { grid-template-columns: repeat(3, 1fr); }
  #home .cta { grid-template-columns: 1fr; }
}

/* ---------- rolagem: o painel nunca passa da altura da tela; só a lista de dentro rola ----------
   (cabeçalho, abas e botão Voltar ficam parados; conteúdo novo não vira rolagem infinita) */
.panel.wide { max-height: calc(100dvh - 66px); display: flex; flex-direction: column; }
.panel.wide > *, .scroll-col > * { flex-shrink: 0; }
.scroll-col { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; flex-shrink: 1 !important; }
.scroll-y { flex: 1 1 auto; flex-shrink: 1 !important; min-height: 140px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  scrollbar-width: thin; scrollbar-color: #ffffff30 transparent; padding-right: 4px; margin-right: -4px; padding-bottom: 18px;
  mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); }
.scroll-y::-webkit-scrollbar { width: 6px; } .scroll-y::-webkit-scrollbar-thumb { background: #ffffff30; border-radius: 3px; }
.panel.wide > .back { margin-top: 12px; }
.rank-wrap.scroll-y, .lv-road { max-height: none; }
.cos-grid.scroll-y, .help-list.scroll-y { grid-auto-rows: max-content; align-content: start; }
@media (max-width: 520px) { /* perfil compacto no celular: sobra espaço para a coleção */
  #visual .profile-card { flex-direction: row; text-align: left; gap: 10px; padding: 10px; }
  #visual .profile-card canvas { width: 72px; height: 72px; }
  #visual .pc-name, #visual .pc-tiers { justify-content: flex-start; }
  #visual .pc-name b { font-size: 18px; }
  #visual .pc-stats { grid-template-columns: repeat(5, 1fr); }
  #visual .pc-stats small { font-size: 8.5px; }
  #visual .pc-tiers .tier-chip { font-size: 11px; }
}
.scroll-y .lv-road { overflow: visible; }

/* ---------- missões e passe (visual novo) ---------- */
.wallet.compact { padding: 6px 12px; margin-bottom: 8px; border-radius: 8px; border: 3px solid #0b0d12; }
.wallet.compact .wallet-n { font-size: 20px; display: flex; align-items: center; gap: 6px; }
.wallet.compact .h-ic { display: none; }
#passTabs button { position: relative; border-radius: 8px; }
#passTabs .badge { position: absolute; top: -7px; right: 10px; margin: 0; border: 2px solid #0b0d12; border-radius: 4px; }
/* missões */
.m-head { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 2px 6px; }
.m-head b { font-family: 'Press Start 2P', monospace; font-size: 11px; font-weight: 400; }
.m-head b em { font-family: system-ui; font-style: normal; font-size: 12px; font-weight: 800; color: var(--accent); margin-left: 6px; }
.m-head small { color: var(--muted); font-size: 11.5px; }
.mission { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border-radius: 8px; border: 3px solid #0b0d12; padding: 8px 10px; margin-bottom: 6px; background: linear-gradient(180deg, #232b3a, #1b212c); box-shadow: inset 0 2px 0 #ffffff12, 0 3px 0 #0b0d12; }
.mission.near { border-color: #0b0d12; box-shadow: inset 0 0 0 2px #ffcc0099, 0 0 12px #ffcc0033, 0 3px 0 #0b0d12; }
.mission.done { background: linear-gradient(90deg, #1fbf5a26, #1b212c 70%); box-shadow: inset 0 0 0 2px #1fbf5a88, 0 3px 0 #0b0d12; }
.m-ic { width: 40px; height: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: #11151d; border: 2px solid #0b0d12; }
.mission.done .m-ic { background: #1fbf5a33; }
.m-body { min-width: 0; }
.m-top { font-size: 13.5px; }
.m-rew { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.m-rew span { font-size: 11.5px; font-weight: 800; color: #ffe27a; background: #0b0d1288; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.m-rew span:last-child { color: #c8a8ff; }
.mission.done .m-rew { opacity: .6; }
/* passe: topo com nível, barra, próximo prêmio e botão de resgatar tudo */
.pass-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 3px solid #0b0d12; background: radial-gradient(circle at 0% 50%, #7a5aff33, transparent 55%), linear-gradient(180deg, #232b3a, #1b212c); box-shadow: inset 0 2px 0 #ffffff12, 0 4px 0 #0b0d12; }
.pass-hero .lv-badge.sm { width: 56px; height: 56px; }
.pass-hero .lv-badge.sm b { font-size: 18px; }
.ph-mid { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ph-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ph-title b { font-family: 'Press Start 2P', monospace; font-size: 11px; font-weight: 400; }
.ph-title small { color: var(--muted); font-size: 11px; }
.ph-next { color: #c8cfda; font-size: 12px; line-height: 1.35; }
.ph-next b { color: var(--accent); } .ph-next span { color: var(--muted); }
button.claim-all { flex: 1; width: auto; margin: 0; padding: 8px 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 8px; border: 3px solid #0b0d12; background: linear-gradient(180deg, #ffe27a, #ffb800); color: #2a1e00; box-shadow: inset 0 3px 0 #fff6, inset 0 -4px 0 #0002, 0 5px 0 #0b0d12, 0 0 20px #ffcc0055; animation: claimGlow 1.2s ease-in-out infinite alternate; }
button.claim-all .ca-big { font-family: 'Press Start 2P', monospace; font-size: 12px; }
button.claim-all small { font-size: 11.5px; font-weight: 800; color: #5a4300; }
button.claim-all:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 3px 0 #fff4, 0 2px 0 #0b0d12; }
button.claim-all.idle, button.claim-all:disabled { animation: none; background: #2c3445; color: #8a94a8; box-shadow: inset 0 2px 0 #ffffff10, 0 4px 0 #0b0d12; }
button.claim-all.idle small, button.claim-all:disabled small { color: #7ee2a0; }
@keyframes claimGlow { to { box-shadow: inset 0 3px 0 #fff6, inset 0 -4px 0 #0002, 0 5px 0 #0b0d12, 0 0 30px #ffcc0099; } }
.track-bar { display: flex; align-items: stretch; gap: 8px; margin: 10px 0 6px; }
.track-bar button.mini { margin: 0; width: 44px; font-size: 18px; padding: 0; }
/* trilha: rótulos fixos na esquerda; o resto rola para os lados */
.track { position: relative; scroll-snap-type: x proximity; padding: 4px 2px 12px; gap: 6px; }
.pcol { width: 92px; scroll-snap-align: center; }
.pcol.labels { position: sticky; left: 0; z-index: 3; width: 58px; scroll-snap-align: none; background: linear-gradient(90deg, var(--panel2) 85%, transparent); padding-right: 4px; }
.plabel { height: 92px; display: flex; align-items: center; justify-content: center; text-align: center; font: 800 11px system-ui; color: var(--muted); border-radius: 8px; background: #ffffff08; border: 2px solid #ffffff10; }
.plabel.prem { color: #d8b8ff; border-color: #b06aff55; background: #b06aff1a; }
.pcol .plv { border-radius: 6px; padding: 4px 0; font-size: 13px; }
.pcol.reached .plv { box-shadow: inset 0 -3px 0 #0003; }
.pcol.now .plv::after { content: ' ◀ você'; font-size: 9px; }
.pcol.next .plv { outline: 2px dashed var(--accent); animation: pulse .9s infinite alternate; }
.pcell { height: 92px; position: relative; border-radius: 8px; border: 3px solid #0b0d12; background: linear-gradient(180deg, #232b3a, #1b212c); box-shadow: inset 0 2px 0 #ffffff10, 0 3px 0 #0b0d12; }
.pcell.premium { background: linear-gradient(180deg, #b06aff33, #1b212c); }
.pcell.empty { height: 92px; opacity: .2; box-shadow: none; border-style: dashed; border-color: #ffffff30; }
.pcell .pr-icon { width: 36px; height: 36px; }
.pcell .pr-n { font-size: 14px; color: #ffe27a; }
.pcell small { font-weight: 700; }
.pcell .pc-ok { position: absolute; top: 3px; right: 4px; font-size: 11px; font-weight: 900; color: #6ee89a; }
.pcell.locked .pc-ok { color: #d8b8ff; }
.pcell.ready { border-color: #0b0d12; box-shadow: inset 0 0 0 2px var(--accent), 0 0 16px #ffcc0077, 0 3px 0 #0b0d12; background: radial-gradient(circle at 50% 30%, #ffcc0033, #1b212c 75%); }
.pcell.ready:hover { transform: translateY(-3px); }
.pcell.got { opacity: .5; box-shadow: inset 0 2px 0 #ffffff10, 0 3px 0 #0b0d12; }
.pcell.popping { animation: popOut .5s ease-out forwards; }
@keyframes popOut { 40% { transform: scale(1.18); filter: brightness(1.6); } 100% { transform: scale(.95); opacity: .5; filter: none; } }
@media (max-width: 620px) {
  .ph-title { flex-direction: column; gap: 2px; } .ph-title b { white-space: nowrap; font-size: 10px; }
  .pcol.labels { width: 50px; } .pcol.now .plv::after { display: none; }
  button.claim-all { padding: 6px 8px; } button.claim-all .ca-big { font-size: 10px; } button.claim-all small { font-size: 10.5px; }
  .mission { grid-template-columns: auto 1fr; }
  .m-rew { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
}

/* ---------- amigos (cartões) e perfil público ---------- */
#friendTabs button { position: relative; border-radius: 8px; font-size: 14px; }
#friendTabs i { font-style: normal; font-size: 12px; color: var(--accent); margin-left: 2px; }
#friendTabs .badge { position: absolute; top: -7px; right: 6px; margin: 0; border: 2px solid #0b0d12; border-radius: 4px; }
.f-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.f-tools input { flex: 1; min-width: 0; margin: 0; }
.f-tools .seg { margin: 0; flex: none; }
.f-tools .seg button { padding: 7px 10px; font-size: 13px; }
ul.flist li.fcard { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 7px; border-radius: 8px; border: 3px solid #0b0d12; background: linear-gradient(180deg, #232b3a, #1b212c); box-shadow: inset 0 2px 0 #ffffff10, 0 3px 0 #0b0d12; cursor: pointer; transition: transform .12s; }
ul.flist li.fcard:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px #ffffff22, 0 5px 0 #0b0d12; }
ul.flist li.fcard.off { opacity: .6; }
.f-av { position: relative; flex: none; width: 46px; height: 46px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #11151d; border: 2px solid #0b0d12; }
.f-dot { position: absolute; right: -4px; bottom: -4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #0b0d12; background: #5a6478; }
.f-dot.online { background: #3ddc84; } .f-dot.lobby { background: #ffcc00; } .f-dot.playing { background: #ff6b6b; }
ul.flist li.fcard .name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
ul.flist li.fcard .name b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.f-top .ftier { margin-left: 0; }
.f-lv { display: inline-block; flex: none; margin-left: 0; font-size: 10px; font-weight: 800; color: #fff; background: linear-gradient(160deg, #5aa8e8, #6a3ad0); border-radius: 4px; padding: 1px 5px; vertical-align: 1px; }
.f-go { margin-left: auto; font-size: 22px; color: var(--muted); padding-left: 4px; }
ul.flist li.fcard .name + button, ul.flist li.fcard .name ~ button { margin-left: auto; }
ul.flist li.fcard button + .f-go, ul.flist li.fcard .name ~ button ~ .f-go { margin-left: 0; }
/* janela do perfil */
#profileModal { position: fixed; inset: 0; z-index: 38; display: flex; align-items: center; justify-content: center; padding: 14px; background: #000b; animation: pgfade .2s ease-out; }
.pm-box { position: relative; width: min(720px, 100%); max-height: calc(100dvh - 28px); overflow-y: auto; overscroll-behavior: contain; border-radius: 12px; border: 3px solid #0b0d12; padding: 16px; background: radial-gradient(circle at 0% 0%, #7a5aff22, transparent 50%), linear-gradient(180deg, var(--panel), var(--panel2)); box-shadow: 0 0 0 1px #ffffff18, 0 20px 60px #000; touch-action: pan-y; scrollbar-width: thin; }
button.pm-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; margin: 0; padding: 0; border-radius: 8px; background: #2c3445; color: #fff; box-shadow: 0 3px 0 #161b25; font-size: 16px; }
.pm-loading { padding: 40px 10px; text-align: center; color: var(--muted); }
.pm-hero { display: flex; gap: 14px; align-items: center; padding-right: 40px; }
.pm-stage { flex: none; width: 132px; height: 132px; border-radius: 10px; border: 3px solid #0b0d12; background: repeating-conic-gradient(#ffffff08 0 25%, transparent 0 50%) 0 0 / 16px 16px, radial-gradient(circle at 50% 40%, #ffcc0022, #11151d); display: flex; align-items: center; justify-content: center; }
#pmCv { width: 120px; height: 120px; image-rendering: pixelated; }
.pm-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.pm-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-name b { font-family: 'Press Start 2P', monospace; font-size: 16px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.pm-pill { font-size: 11.5px; font-weight: 800; border-radius: 6px; padding: 2px 8px; background: #ffffff12; color: #c8cfda; border: 1px solid #ffffff1c; }
.pm-pill.online { color: #7ee2a0; border-color: #3ddc8466; } .pm-pill.lobby { color: #ffe27a; border-color: #ffcc0066; } .pm-pill.playing { color: #ff9a9a; border-color: #ff6b6b66; } .pm-pill.self { color: #d8b8ff; border-color: #b06aff66; }
.pm-lv { display: flex; align-items: center; gap: 8px; }
.pm-lv .lv-badge.sm { width: 40px; height: 40px; border-radius: 8px; } .pm-lv .lv-badge.sm b { font-size: 13px; }
.pm-lvbar, .pm-colbar { flex: 1; height: 10px; border-radius: 5px; background: #ffffff14; overflow: hidden; }
.pm-lvbar i { display: block; height: 100%; background: linear-gradient(90deg, #7ad0ff, #b06aff); } .pm-colbar i { display: block; height: 100%; background: linear-gradient(90deg, #ffcc00, #ff8a3a); }
.pm-tiers { display: flex; gap: 6px; flex-wrap: wrap; }
.pm-tiers .tier-chip { background: color-mix(in srgb, var(--tc, #4a5468) 18%, transparent); border: 1px solid color-mix(in srgb, var(--tc, #4a5468) 50%, transparent); border-radius: 6px; padding: 2px 8px; font-size: 11.5px; }
.pm-tiers .tier-chip.none { color: var(--muted); --tc: #4a5468; }
.pm-since { color: var(--muted); font-size: 11.5px; }
.pm-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 12px 0; }
.pm-stats div { display: flex; flex-direction: column; align-items: center; padding: 8px 2px; border-radius: 8px; background: #11151d; border: 2px solid #0b0d12; }
.pm-stats b { font-size: 17px; font-variant-numeric: tabular-nums; } .pm-stats small { font-size: 9.5px; color: var(--muted); text-align: center; line-height: 1.15; }
.pm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pm-sec { min-width: 0; background: #11151d; border: 2px solid #0b0d12; border-radius: 8px; padding: 10px; }
.pm-sec h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); display: flex; justify-content: space-between; } .pm-sec h4 small { text-transform: none; letter-spacing: 0; color: var(--accent); }
.pm-eqs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pm-eq { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; background: color-mix(in srgb, var(--rc) 20%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); color: var(--rc); }
.pm-muted { color: var(--muted); font-size: 12px; }
ul.pm-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
ul.pm-recent li { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; background: #ffffff08; font-size: 12px; }
ul.pm-recent li.win { background: linear-gradient(90deg, #ffcc0022, #ffffff06); }
.pm-pos { flex: none; width: 28px; text-align: center; font-weight: 800; }
.pm-mt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pm-mt b { font-size: 12.5px; } .pm-mt small { color: var(--muted); font-size: 10.5px; }
ul.pm-recent em { font-style: normal; font-weight: 800; font-size: 11.5px; } ul.pm-recent em.up { color: #3ddc84; } ul.pm-recent em.down { color: #ff6b6b; }
.pm-ago { color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.pm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pm-actions button { width: auto; margin: 0; padding: 9px 14px; font-size: 14px; border-radius: 8px; flex: 1 1 auto; }
.pm-actions button.ok { background: var(--green); color: #04240f; box-shadow: 0 4px 0 #0e7a36; }
.pm-actions button.sec.danger { color: #ff9a9a; background: #3a2228; box-shadow: 0 4px 0 #1c1014; flex: 0 0 auto; }
@media (max-width: 620px) {
  .pm-hero { flex-direction: column; text-align: center; padding-right: 0; padding-top: 6px; } .pm-name, .pm-tiers, .pm-lv { justify-content: center; }
  .pm-name b { font-size: 13px; }
  .pm-stats { grid-template-columns: repeat(3, 1fr); }
  .pm-cols { grid-template-columns: 1fr; }
  .f-tools { flex-wrap: wrap; } .f-tools .seg { width: 100%; } .f-tools .seg button { flex: 1; }
}

/* telas baixas (celular deitado): menos espaço vertical */
@media (max-height: 520px) {
  .screen { padding-top: 46px; align-items: flex-start; }
  .logo { font-size: 34px; }
  .tag { margin: 8px 0; font-size: 14px; }
  #home .home { gap: 8px; }
  #home .logo { font-size: 30px; }
  #stage { aspect-ratio: 13 / 4; object-fit: cover; }
  button.big { padding: 12px; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Expedição (Cordel do Pipoco) ---------- */
button.tile.exp-tile { grid-column: 1 / -1; background: linear-gradient(90deg, #e8661c38, #e9ad2c1f 55%, #1b212c), #1b212c; }
button.tile.exp-tile b em { font-style: normal; font-family: system-ui; font-size: 10px; font-weight: 800; background: #e8661c; color: #fff; border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 2px; animation: pulse .8s infinite alternate; }
.h2-ic { width: 22px; height: 22px; image-rendering: pixelated; vertical-align: -3px; }
.exp-panel h3 { margin-top: 16px; }
.exp-lede { margin: 0; font-size: 14px; line-height: 1.5; color: #e8dcc0; background: #efe2c412; border-left: 3px solid #e8661c; padding: 8px 10px; border-radius: 0 8px 8px 0; }
.exp-fases { display: flex; flex-direction: column; gap: 7px; }
button.exp-fase { margin: 0; display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 11px; background: #232b3a; color: var(--text); border: 3px solid #0b0d12; border-radius: 8px; box-shadow: 0 4px 0 #0b0d12; font-weight: 600; }
button.exp-fase.on { background: linear-gradient(90deg, #e8661c44, #232b3a 70%); border-color: #e8661c; }
button.exp-fase.off { opacity: .55; cursor: default; }
button.exp-fase:disabled { box-shadow: 0 4px 0 #0b0d12; }
.ef-n { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid #e9ad2c; border-radius: 50%; font-family: 'Press Start 2P', monospace; font-size: 13px; color: #e9ad2c; }
.exp-fase.boss .ef-n { border-color: #e8661c; }
.ef-n canvas { image-rendering: pixelated; }
.ef-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ef-txt b { font-size: 14px; }
.ef-txt small { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.35; }
.ef-st { flex: none; font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; text-align: right; }
.ef-st canvas { image-rendering: pixelated; }
.pill.ok { background: #1fbf5a33; color: #7ee2a0; } .pill.new { background: #e8661c44; color: #ffc49a; }
.exp-fols, .pg-fols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
button.exp-fol { margin: 0; padding: 7px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: linear-gradient(180deg, #efe2c4, #e4d3ae); color: #1e1712; border: 2px solid #1e1712; border-radius: 4px; box-shadow: 3px 3px 0 #0b0d12; font-weight: 700; }
button.exp-fol small { font-size: 10px; line-height: 1.2; text-align: center; }
button.exp-fol.off { background: #232b3a; color: var(--muted); border-color: #0b0d12; box-shadow: 3px 3px 0 #0b0d12; }
button.exp-fol.new { outline: 2px solid #e9ad2c; animation: pulse .7s infinite alternate; }
button.exp-fol canvas { image-rendering: pixelated; }
.exp-actions { display: flex; gap: 8px; margin-top: 12px; }
.exp-actions button { margin: 0; }
#expGo { background: #e8661c; color: #fff; box-shadow: 0 4px 0 #8a3a0e; }
.exp-lobby { background: linear-gradient(90deg, #e8661c2a, transparent), var(--field); border: 2px solid #e8661c66; border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.exp-lobby .el-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.exp-lobby .el-head div { display: flex; flex-direction: column; } .exp-lobby .el-head small { color: var(--muted); }
.exp-lobby canvas { image-rendering: pixelated; }
.exp-lobby .seg { margin-bottom: 4px; }
#lobby.exp-mode #modePick, #lobby.exp-mode #themePick, #lobby.exp-mode #themeHead, #lobby.exp-mode #teamBtn { display: none !important; }
#folModal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 14px; background: #000c; animation: pgfade .2s ease-out; }
#folModal.hidden { display: none; }
.fol-box { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 28px); overflow-y: auto; }
.fol-paper { background: linear-gradient(180deg, #efe2c4, #e4d3ae); color: #1e1712; border: 3px solid #1e1712; box-shadow: 6px 6px 0 #000; padding: 22px 20px 18px; }
.fol-paper h3 { color: #1e1712; font-family: 'Press Start 2P', monospace; font-size: 14px; text-transform: none; letter-spacing: 0; margin: 0 0 12px; padding-right: 36px; line-height: 1.4; }
.fol-new { font-size: 11px; font-weight: 800; color: #e8661c; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; }
.fol-verse { font: italic 17px/1.55 Georgia, serif; border-left: 4px solid #e8661c; padding: 2px 0 2px 14px; margin: 0 0 14px; }
.fol-fact { border: 2px dashed #3f7a46; background: #3f7a461a; padding: 10px 12px; font-size: 14px; line-height: 1.45; }
.fol-fact b { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #3f7a46; margin-bottom: 2px; }
/* cenas e bênçãos por cima do mapa */
#expStage { position: absolute; inset: 0; z-index: 8; display: flex; align-items: flex-end; justify-content: center; padding: 50px 12px 16px; background: linear-gradient(180deg, transparent 30%, #0a0c12cc); }
#expStage.hidden { display: none; }
.es-box { width: min(640px, 100%); background: linear-gradient(180deg, #efe2c4, #e4d3ae); color: #1e1712; border: 3px solid #1e1712; box-shadow: 6px 6px 0 #000; padding: 14px 16px 12px; animation: rise .2s ease-out; }
.es-title { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5b4a3a; margin-bottom: 10px; }
.es-line { display: flex; gap: 12px; align-items: flex-start; }
.es-pt { flex: none; width: 64px; height: 64px; image-rendering: pixelated; background: #1e171222; border: 2px solid #1e1712; }
.es-name { display: block; font-family: 'Press Start 2P', monospace; font-size: 11px; color: #c2410c; margin-bottom: 6px; }
.es-line p { margin: 0; font-size: 17px; line-height: 1.45; }
.es-narr { font: italic 16px/1.5 Georgia, serif; color: #5b4a3a; }
.es-verse { font: italic 18px/1.5 Georgia, serif; border-left: 4px solid #e8661c; padding-left: 14px; }
.es-who { display: block; margin-top: 6px; font-size: 11px; color: #5b4a3a; text-transform: uppercase; letter-spacing: .1em; }
.es-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.es-btns button { width: auto; margin: 0; padding: 9px 16px; }
.es-btns #esNext { background: #e8661c; color: #fff; box-shadow: 0 4px 0 #8a3a0e; }
.es-box.wait { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.es-box.wait small { color: #5b4a3a; }
.eb-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
button.eb-opt { margin: 0; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; background: #fbf5e6; color: #1e1712; border: 2px solid #1e1712; border-radius: 4px; box-shadow: 3px 3px 0 #1e1712; }
button.eb-opt canvas { image-rendering: pixelated; }
button.eb-opt b { font-size: 13px; } button.eb-opt small { font-size: 11px; color: #5b4a3a; font-weight: 600; line-height: 1.3; }
button.eb-opt.mine { border-color: #e8661c; background: #ffe6cc; }
button.eb-opt.picked { border-color: #3f7a46; background: #d8f0c8; animation: pop .4s ease-out; }
button.eb-opt.out { opacity: .45; }
.eb-votes { min-height: 18px; display: flex; gap: 2px; }
.eb-foot { display: block; margin-top: 10px; text-align: center; color: #5b4a3a; font-size: 12px; }
@media (max-width: 520px) { .eb-opts { grid-template-columns: 1fr; } button.eb-opt { flex-direction: row; text-align: left; } .es-pt { width: 48px; height: 48px; } .es-line p { font-size: 15px; } }
/* HUD e textos da sala */
.chip.exp-chip { gap: 6px; } .chip.exp-chip b { color: #e9ad2c; }
.chip.exp-chip.bl span { display: inline-flex; align-items: center; gap: 1px; font-size: 11px; font-weight: 800; }
.chip.exp-chip canvas { image-rendering: pixelated; }
.chip.boss-chip { gap: 8px; border-color: #e8661c; } .chip.boss-chip b { color: #ffb08a; }
.boss-bar { width: 120px; height: 10px; background: #0b0d12; border: 2px solid #0b0d12; border-radius: 2px; overflow: hidden; }
.boss-bar i { display: block; height: 100%; background: linear-gradient(90deg, #e8322a, #e8661c); transition: width .25s; }
#msg .exp-room-title { display: block; font-size: 18px; color: #e9ad2c; margin-bottom: 8px; }
#msg .pixel.exp-ok { color: #9af0b8; font-size: clamp(22px, 5vw, 40px); }
@media (max-width: 520px) { .boss-bar { width: 70px; } .chip.boss-chip { gap: 5px; } }
.exp-tips { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; font-size: 12.5px; color: #d8dce6; line-height: 1.4; }
.exp-tips span { display: flex; align-items: center; gap: 7px; }
.exp-tips canvas { flex: none; width: 18px; height: 18px; image-rendering: pixelated; }
.exp-tips b { color: #e9ad2c; white-space: nowrap; }
#msg .exp-ghost { display: inline-flex; flex-direction: column; gap: 3px; margin-top: -40%; background: #120e24d9; border: 2px solid #b08aff; border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 600; text-shadow: none; max-width: 420px; }
#msg .exp-ghost b { font-size: 18px; color: #d8c8ff; } #msg .exp-ghost em { font-style: normal; color: #ff9a9a; } #msg .exp-ghost small { color: var(--accent); font-size: 13px; }
button.eb-opt:disabled { cursor: default; } button.eb-opt.picked:disabled { opacity: 1; filter: none; }

/* ---------- celular: botão do poder, dicas e Expedição deitada ---------- */
#powerBtn.locked { background: radial-gradient(circle at 35% 30%, #5a6478, #2c3445) !important; opacity: .8; }
#powerBtn.locked span canvas { width: 28px; height: 28px; }
#powerTip { position: absolute; right: max(118px, calc(env(safe-area-inset-right) + 118px)); bottom: 120px; max-width: 200px; background: #ffd23f; color: #241c00; font-weight: 800; font-size: 13px; padding: 8px 12px; border: 3px solid #0b0d12; border-radius: 8px; box-shadow: 0 4px 0 #0008; pointer-events: none; animation: pulse .5s infinite alternate; z-index: 6; }
#powerTip::after { content: ''; position: absolute; right: -12px; bottom: 14px; border: 8px solid transparent; border-left-color: #0b0d12; }
body.touch-land #powerTip { right: max(130px, calc(env(safe-area-inset-right) + 130px)); bottom: calc(18% + 140px); }
.chip.ghost-chip { border-bottom-color: #b08aff; } .chip.ghost-chip b { color: #d8c8ff; }
#msg .exp-ghost { margin-top: 0; padding: 8px 12px; font-size: 13px; animation: rise .25s ease-out; }
#msg .exp-ghost b { font-size: 16px; }
body.touch-land #msg .exp-ghost { font-size: 11px; padding: 6px 10px; max-width: 300px; }
body.touch-land #msg .exp-ghost b { font-size: 13px; }
body.touch-land #msg { font-size: 26px; }
body.touch-land #msg .pixel { font-size: 34px; }
body.touch-land #msg .hint2 { font-size: 11px; margin-top: 6px; }
body.touch-land #msg .exp-room-title { font-size: 13px; margin-bottom: 4px; }
/* cenas e bodega no celular deitado: caixa baixa e estreita, sem cobrir o mapa todo */
body.touch-land #expStage { padding: 40px 150px 6px; background: linear-gradient(180deg, transparent 55%, #0a0c12aa); }
body.touch-land .es-box { width: min(520px, 100%); padding: 8px 12px 8px; box-shadow: 4px 4px 0 #000; }
body.touch-land .es-title { font-size: 9px; margin-bottom: 4px; }
body.touch-land .es-pt { width: 40px; height: 40px; }
body.touch-land .es-name { font-size: 9px; margin-bottom: 3px; }
body.touch-land .es-line { gap: 8px; }
body.touch-land .es-line p { font-size: 13px; line-height: 1.35; }
body.touch-land .es-narr { font-size: 13px; line-height: 1.35; }
body.touch-land .es-verse { font-size: 13px; line-height: 1.35; }
body.touch-land .es-btns { margin-top: 6px; }
body.touch-land .es-btns button { padding: 6px 12px; font-size: 13px; }
body.touch-land .eb-opts { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
body.touch-land button.eb-opt { flex-direction: column; padding: 5px 4px; gap: 2px; }
body.touch-land button.eb-opt canvas { width: 22px !important; height: 22px !important; }
body.touch-land button.eb-opt b { font-size: 11px; }
body.touch-land button.eb-opt small { font-size: 9px; }
body.touch-land .eb-foot { margin-top: 4px; font-size: 10px; }

/* ---------- convidar amigos (janela da sala) e Expedição na lista de salas ---------- */
#friendInviteBtn { display: inline-flex; align-items: center; gap: 6px; }
#friendInviteBtn canvas { width: 16px; height: 16px; image-rendering: pixelated; }
#inviteModal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 14px; background: #000b; animation: pgfade .2s ease-out; }
#inviteModal.hidden { display: none; }
.inv-box { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 28px); display: flex; flex-direction: column; border-radius: 12px; border: 3px solid #0b0d12; padding: 16px; background: linear-gradient(180deg, var(--panel), var(--panel2)); box-shadow: 0 20px 60px #000; }
.inv-box h2 { padding-right: 40px; }
#invModalList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-height: 80px; }
#invModalList li { display: flex; align-items: center; gap: 10px; background: var(--field); border-radius: 10px; padding: 7px 10px; }
#invModalList li.off { opacity: .55; }
.flist li.fl-empty { flex-direction: column; text-align: center; color: var(--muted); font-size: 13px; padding: 16px; gap: 10px; } .flist li.fl-empty button { width: auto; margin: 0; }
#invModalList li.empty { justify-content: center; text-align: center; color: var(--muted); font-size: 13px; padding: 16px; }
#invModalList .name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 700; }
#invModalList .name small { font-weight: 500; }
.inv-box .share-row { margin-top: 10px; }
.pill.exp { background: #e8661c44; color: #ffc49a; margin-left: 4px; }
.room-theme canvas { width: 26px; height: 26px; image-rendering: pixelated; }
#invModalList .name .f-lv { align-self: flex-start; }

/* ---------- Fale com a gente, tutorial, rodapé da home ---------- */
#fbBtn canvas { width: 18px; height: 18px; image-rendering: pixelated; display: block; margin: auto; }
#fbModal, #tutModal, #deModal { position: fixed; inset: 0; z-index: 41; display: flex; align-items: center; justify-content: center; padding: 14px; background: #000b; animation: pgfade .2s ease-out; }
#fbModal.hidden, #tutModal.hidden, #deModal.hidden { display: none; }
.fb-box { overflow-y: auto; gap: 4px; }
.fb-box label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.fb-box textarea { width: 100%; resize: vertical; min-height: 80px; background: var(--field); color: var(--text); border: 1px solid #ffffff1a; border-radius: 10px; padding: 10px; font: inherit; font-size: 15px; }
.fb-box input { width: 100%; }
.fb-kinds { margin-top: 2px; }
.fb-kinds button.on { border-color: var(--accent); color: var(--accent); }
.fb-box #fbSend { margin-top: 10px; }
.home-foot { font-size: 12px; color: var(--muted); text-align: center; }
.home-foot a { color: var(--muted); }
.switch.legal { font-size: 12px; color: var(--muted); }
.tut-box { text-align: center; width: min(400px, 100%); }
.tut-art { display: flex; justify-content: center; margin: 4px 0 6px; }
.tut-art canvas { width: 192px; height: 96px; image-rendering: pixelated; background: #ffffff08; border-radius: 8px; border: 2px solid #0b0d12; }
.tut-box h3 { font-family: 'Press Start 2P', monospace; font-size: 14px; color: var(--accent); text-transform: none; letter-spacing: 0; margin: 8px 0; }
.tut-box p { margin: 0 0 10px; line-height: 1.5; font-size: 15px; }
.tut-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.tut-dots i { width: 8px; height: 8px; border-radius: 2px; background: #ffffff30; }
.tut-dots i.on { background: var(--accent); }
.tut-btns { display: flex; gap: 8px; } .tut-btns button { margin: 0; }
.tut-again { margin: 0 0 10px; }
@media (max-height: 460px) { .tut-art canvas { width: 144px; height: 72px; } .tut-box p { font-size: 13px; } .tut-box { padding: 10px 14px; } }
.home-foot { order: 9; }

/* ---------- cadastro: dados opcionais, aceite dos termos, seus dados ---------- */
.r-more { margin-top: 12px; background: var(--field); border-radius: 10px; padding: 8px 12px; }
.r-more summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.r-more summary small { color: var(--accent); font-weight: 600; }
.acc-fields label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.acc-fields input[type=text], .acc-fields input[type=email], .acc-fields input[type=tel], .acc-fields input[type=date] { width: 100%; }
.acc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 520px) { .acc-row2 { grid-template-columns: 1fr; } }
label.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--text); margin: 12px 0 0; cursor: pointer; }
label.check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.acc-kid { font-size: 12px; color: #ffb08a; margin-top: 6px; }
#dataModal, #termsModal { position: fixed; inset: 0; z-index: 42; display: flex; align-items: center; justify-content: center; padding: 14px; background: #000c; animation: pgfade .2s ease-out; }
#dataModal.hidden, #termsModal.hidden { display: none; }
#termsModal p { font-size: 14px; line-height: 1.5; }
#termsModal button { margin-top: 8px; }
.pc-name #dataBtn { margin-left: 6px; }

/* ---------- modo espectador ---------- */
body.spectating #quitBtn, body.spectating #emoteBtn, body.spectating #emotePanel, body.spectating #touch, body.spectating #replayBtn, body.spectating #powerTip { display: none !important; }
#specBar { position: absolute; top: 6px; left: 8px; z-index: 7; display: flex; align-items: center; gap: 10px; background: #1f2633f0; border: 2px solid #ffcc00; border-radius: 10px; padding: 4px 6px 4px 12px; font-size: 14px; }
#specBar b { color: var(--accent); }
#specBar.hidden, #specWait.hidden { display: none; }
#specWait { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #0a0c12e6; text-align: center; padding: 20px; }
#specWait b { font-family: 'Press Start 2P', monospace; font-size: 14px; color: var(--accent); }
#specWait small { color: var(--muted); max-width: 360px; }
.chip.watch-chip { border-bottom-color: #ffcc00; }
.tester-badge { display: inline-block; background: linear-gradient(180deg, #7bf0b8, #2fb87a); color: #06301d; font-family: 'Press Start 2P', monospace; font-size: .62em; padding: .22em .45em .18em; border-radius: 4px; letter-spacing: .02em; vertical-align: middle; box-shadow: 0 1px 0 #17694a; }
.gm-badge { display: inline-block; background: linear-gradient(180deg, #ffe27a, #ffb020); color: #3a2400; font-family: 'Press Start 2P', monospace; font-size: .62em; padding: .22em .45em .18em; border-radius: 4px; letter-spacing: .02em; vertical-align: middle; box-shadow: 0 1px 0 #7a5200; }

/* ---------- guildas ---------- */
.g-tag { color: var(--gc, #ffd23f); font-weight: 800; font-family: 'Press Start 2P', monospace; font-size: .72em; letter-spacing: .02em; }
.g-tag.big { font-size: 13px; }
canvas.g-banner { image-rendering: pixelated; flex: none; }
.guild-panel .g-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.guild-panel .g-top h2 { margin: 0; }
.g-tabs { flex: 1 1 100%; min-width: 0; margin: 0; flex-wrap: wrap; } /* as abas ficam numa linha própria e quebram em duas se faltar espaço (antes rolavam escondidas e a última sumia) */
.g-tabs button { white-space: nowrap; width: auto; flex: 1 1 auto; padding: 7px 10px; }
.g-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: var(--field); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.g-row.me { outline: 2px solid #ffcc0066; }
.g-qbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .g-qbtns .mini { flex: 1 1 90px; }
.g-queue { border: 1px dashed #ffd23f88; animation: pulse 1.2s infinite alternate; }
.g-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.g-info small { color: var(--muted); font-size: 12px; }
.g-descr { font-style: italic; }
.g-pts { font-weight: 800; color: var(--accent); white-space: nowrap; font-size: 13px; }
.g-pos { font-weight: 800; width: 28px; text-align: center; }
.g-acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.g-search { display: flex; gap: 6px; margin-bottom: 8px; } .g-search input { flex: 1; min-width: 0; }
.g-search button, .g-row button.mini { white-space: nowrap; }
.g-head { display: flex; gap: 14px; align-items: center; background: linear-gradient(90deg, #ffffff10, transparent); border-radius: 12px; padding: 10px; margin-bottom: 8px; }
.g-hinfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.g-name { font-size: 18px; }
.g-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); } .g-stats b { color: var(--text); }
.g-create { background: var(--field); border-radius: 12px; padding: 12px; }
.g-create label, .g-config label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.g-create input, .g-config input { width: 100%; }
.g-preview { display: flex; align-items: center; gap: 12px; } .g-preview > div { display: flex; flex-direction: column; gap: 4px; }
.g-colors { display: flex; flex-wrap: wrap; gap: 6px; }
button.g-sw { width: 28px; height: 28px; margin: 0; padding: 0; border-radius: 6px; background: var(--sw); border: 3px solid #0b0d12; box-shadow: none; }
button.g-sw.on { outline: 3px solid #fff; }
.g-syms { display: flex; flex-wrap: wrap; gap: 6px; }
.g-syms button { width: auto; margin: 0; padding: 4px; background: #0b0d12; box-shadow: none; border: 2px solid transparent; border-radius: 6px; }
.g-syms button.on { border-color: var(--accent); }
.g-need { color: #ffb08a; }
.g-config { margin-top: 10px; background: var(--field); border-radius: 10px; padding: 8px 12px; } .g-config summary { cursor: pointer; font-weight: 700; }
.g-config button.mini { margin-top: 10px; }
.g-leave { margin-top: 12px; }
.g-mural div { background: var(--field); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; } .g-mural p { margin: 4px 0 0; } .g-mural small { color: var(--muted); }
.g-ch.aceito { outline: 2px solid #3ddc8466; }
.g-week { margin-bottom: 12px; } .g-week > small { color: var(--muted); }
.g-podium { display: flex; gap: 8px; align-items: flex-end; justify-content: center; }
.g-podium > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--field); border-radius: 10px; padding: 8px 4px; font-size: 12px; }
.g-podium .p1 { order: 2; background: linear-gradient(180deg, #ffd23f33, var(--field)); padding-top: 14px; } .g-podium .p2 { order: 1; } .g-podium .p3 { order: 3; }
.g-podium small { color: var(--muted); }
.guild-lobby { background: linear-gradient(90deg, #ff7a1a2a, transparent), var(--field); border: 2px solid #ff7a1a66; border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.gl-vs { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.gl-vs > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.gl-vs small { color: var(--muted); font-size: 12px; }
button.tile#guildBtn { grid-column: 1 / -1; background: linear-gradient(90deg, #ff7a1a30, #3a6ad024 55%, #1b212c), #1b212c; }
#guildIc { width: 18px !important; height: 24px !important; image-rendering: pixelated; }
.chip .g-tag { font-size: 9px; }


/* ---------- Novidades (patch notes) ---------- */
#notesModal { position: fixed; inset: 0; z-index: 41; display: flex; align-items: center; justify-content: center; padding: 14px; background: #000b; animation: pgfade .2s ease-out; }
#notesModal.hidden { display: none; }
.notes-box { width: min(520px, 100%); }
#notesBody { max-height: min(60dvh, 520px); padding-right: 4px; }
.nt { background: var(--field); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.nt.new { border: 2px solid #ffcc0066; background: linear-gradient(180deg, #ffcc0012, var(--field)); }
.nt-head { display: flex; align-items: center; gap: 8px; }
.nt-head b { font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--accent); }
.nt-head em { font-style: normal; font-size: 10px; font-weight: 800; background: #e8661c; color: #fff; border-radius: 4px; padding: 1px 5px; }
.nt-head small { margin-left: auto; color: var(--muted); font-size: 12px; }
.nt h3 { margin: 6px 0 4px; font-size: 14px; color: var(--text); text-transform: none; letter-spacing: 0; }
.nt ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.nt li { margin-bottom: 2px; }
.notes-link b { color: var(--accent); }
/* home mais enxuta: tudo em 2 colunas; Expedição e Guilda lado a lado (só a Loja ocupa a linha) */
.tiles, body.guest .tiles, #home .tiles, body.guest #home .tiles { grid-template-columns: repeat(2, 1fr) !important; }
button.tile.exp-tile, button.tile#guildBtn { grid-column: auto; }

/* ---------- ranking: temporada ---------- */
.rank-season { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--field); font-size: 13px; line-height: 1.7; color: var(--muted); } .rank-season:empty { display: none; }
.rank-season b { color: #ffe9a8; } .rank-season .tier-chip { white-space: nowrap; }

/* ---------- convite de amigos ---------- */
.ref-box { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--field); border: 1px dashed #ffd23f55; } .ref-box:empty { display: none; }
.ref-box > b { display: block; color: #ffe9a8; margin-bottom: 2px; } .ref-box small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; } .ref-box small b { color: #ffe9a8; }
.ref-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; } .ref-list li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ref-list em { font-style: normal; color: var(--muted); } .ref-list em.ok { color: #8ff0b8; }

/* ---------- seu dia: sequência diária e primeiros passos ---------- */
.daily-strip { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0 2px; }
.daily-strip:empty { display: none; }
.d-chip { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px; width: auto; border-radius: 12px; background: var(--field); border: 2px solid #ffffff14; color: var(--text); text-align: left; min-width: 0; box-shadow: 0 3px 0 #0b0d12; }
.d-chip canvas { image-rendering: pixelated; flex: none; }
.d-chip b { display: block; font-size: 14px; } .d-chip small { display: block; color: var(--muted); font-size: 12px; }
.d-chip.ready { border-color: #ffd23f; background: linear-gradient(180deg, #3a3418, var(--field)); animation: pulse 1.4s infinite alternate; } .d-chip.ready small { color: #ffe9a8; }
#dailyModal { position: fixed; inset: 0; z-index: 41; display: flex; align-items: center; justify-content: center; padding: 14px; background: #000b; animation: pgfade .2s ease-out; }
#dailyModal.hidden { display: none; }
.daily-box { width: min(560px, 100%); }
#dailyBody { max-height: min(74dvh, 660px); padding-right: 4px; }
.d-sec { margin: 12px 0 4px; } .d-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 16px; } .d-sec h3 small { color: var(--muted); font-weight: 700; }
.d-sec canvas { image-rendering: pixelated; }
.d-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 10px 0; }
.d-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 10px; background: var(--field); border: 2px solid #ffffff10; min-width: 0; }
.d-day small { color: var(--muted); font-size: 11px; } .d-day b { font-size: 16px; font-variant-numeric: tabular-nums; } .d-day i { width: 18px; height: 18px; }
.d-day.today { border-color: #ffd23f; background: #3a3418; } .d-day.done { background: #14301e; border-color: #3ddc8466; } .d-day.big b { color: #ffd23f; }
.d-goal { display: flex; align-items: center; gap: 10px; background: var(--field); padding: 8px 10px; border-radius: 10px; margin: 6px 0; }
.d-goal .d-gt { flex: 1; min-width: 0; font-size: 14px; } .d-goal em { color: #ffd23f; font-style: normal; font-weight: 800; font-size: 13px; } .d-goal small { color: #8ff0b8; font-size: 12px; min-width: 62px; text-align: right; }
.d-goal .d-tick { width: 22px; height: 22px; flex: none; border: 2px solid #ffffff2a; border-radius: 6px; display: grid; place-items: center; }
.d-goal.claimed { opacity: .65; } .d-goal.done { outline: 2px solid #ffd23f66; }
.d-sec .buy { width: 100%; margin-top: 6px; } .hint.ok { color: #8ff0b8; }

canvas.emo { width: 1.15em; height: 1.15em; vertical-align: -.2em; image-rendering: pixelated; display: inline-block; }

.wallet-n b.pop { display: inline-block; animation: numpop .35s ease-out; } @keyframes numpop { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: #fff; } 100% { transform: scale(1); } }

.sh-set { border-left: 3px solid var(--sc); background: color-mix(in srgb, var(--sc) 14%, transparent); border-radius: 0 6px 6px 0; padding: 4px 8px; margin-bottom: 4px; } .sh-set b { font: 800 11px system-ui; color: var(--sc); text-transform: uppercase; letter-spacing: .5px; display: block; } .sh-set small { font-size: 11.5px !important; color: #c8cfda; }
@media (max-width: 760px) { .shop-body .sh-set small { display: none; } }

/* troca de tela: a que sai desliza para cima e some, a que entra sobe com o brilho de entrada */
.screen.leaving { pointer-events: none; z-index: 11; animation: screenLeave .18s ease-in forwards; }
@keyframes screenLeave { to { opacity: 0; transform: translateY(-10px) scale(.985); } }
.screen.enter { animation: screenEnter .28s ease-out; }
@keyframes screenEnter { from { opacity: 0; } to { opacity: 1; } }

/* ---------- carregamento: versus (estilo seleção de campeões) e Expedição (estilo seleção de fase) ---------- */
#intro { padding: 0; background: #07090f; backdrop-filter: none; overflow: hidden; align-items: stretch; }
#expLoad { position: absolute; inset: 0; z-index: 9; background: #07090f; overflow: hidden; }
#expLoad.hidden { display: none; }
.ld, .el { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 54px clamp(12px, 3vw, 40px) 14px; overflow-y: auto; overflow-x: hidden; animation: ldFade .4s ease-out; }
@keyframes ldFade { from { opacity: 0; } to { opacity: 1; } }
.ld-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; filter: blur(2px) saturate(1.1); transform: scale(1.06); }
.ld-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, #0a0c1255, #07090fee 75%), linear-gradient(180deg, #07090fcc, #07090f55 35%, #07090fe6); }
.ld > *:not(.ld-bg):not(.ld-shade) { position: relative; z-index: 1; }
.ld-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; animation: ldDown .5s cubic-bezier(.2, 1, .3, 1) both; }
@keyframes ldDown { from { opacity: 0; transform: translateY(-14px); } }
.ld-top h2 { margin: 2px 0 4px; font-size: clamp(20px, 4vw, 34px); text-shadow: 0 3px 0 #000, 0 0 24px #ffcc0055; }
.ld-mapsub { color: var(--accent); font-weight: 800; }
.ld-rules { display: flex; flex-wrap: wrap; gap: 6px; } .ld-rules span { font-size: 12px; background: #ffffff14; border-radius: 20px; padding: 4px 10px; color: #e2e6ee; }
.ld-arena { flex: 1 0 auto; min-height: 170px; display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.6vw, 18px); flex-wrap: wrap; }
.ld-team { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px 10px; border-radius: 14px; } .ld-team > div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ld-team small { font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: 12px; }
.ld-team.team-0 { background: linear-gradient(180deg, #4da6ff30, #4da6ff08); box-shadow: inset 0 0 0 1px #4da6ff55; } .ld-team.team-0 small { color: #8ccaff; }
.ld-team.team-1 { background: linear-gradient(180deg, #ff4d4d30, #ff4d4d08); box-shadow: inset 0 0 0 1px #ff4d4d55; } .ld-team.team-1 small { color: #ff9a9a; }
.ld-vs { align-self: center; animation: ldPop .6s .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.ld-vs b { font-family: 'Press Start 2P', monospace; font-size: clamp(18px, 3.4vw, 34px); color: var(--accent); text-shadow: 0 4px 0 #000, 0 0 22px #ffcc0099; }
@keyframes ldPop { from { opacity: 0; transform: scale(2.4) rotate(-8deg); } }
.ld-card { --rc: var(--pc); position: relative; width: clamp(104px, 15vw, 150px); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px 9px; border-radius: 12px; border: 3px solid #0b0d12;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 26%, #1c2230), #12161f); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 55%, transparent), 0 6px 0 #0b0d12, 0 0 22px color-mix(in srgb, var(--rc) 20%, transparent); animation: ldIn .55s calc(var(--i) * .09s + .1s) cubic-bezier(.2, 1, .3, 1) both; }
.ld-card.from-r { animation-name: ldInR; }
@keyframes ldIn { from { opacity: 0; transform: translateX(-60px) scale(.9); } } @keyframes ldInR { from { opacity: 0; transform: translateX(60px) scale(.9); } }
.ld-card.me { box-shadow: inset 0 0 0 2px var(--accent), 0 6px 0 #0b0d12, 0 0 26px #ffcc0055; }
.ld-card.rar-epico { box-shadow: inset 0 0 0 2px #b06aff, 0 6px 0 #0b0d12, 0 0 24px #b06aff66; }
.ld-card.rar-lendario { box-shadow: inset 0 0 0 2px #ffb020, 0 6px 0 #0b0d12, 0 0 30px #ffb02088; overflow: hidden; }
.ld-card.rar-lendario::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 35%; background: linear-gradient(90deg, transparent, #ffffff40, transparent); transform: skewX(-20deg); animation: shine 3.2s ease-in-out infinite; pointer-events: none; }
.ld-stage { position: relative; width: 100%; aspect-ratio: 96 / 104; border-radius: 8px; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--rc) 40%, transparent), transparent 70%), #0e121a; }
.ld-stage canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.ld-stage .ok { display: none; position: absolute; top: 4px; right: 4px; background: var(--green); color: #04240f; border-radius: 50%; width: 22px; height: 22px; align-items: center; justify-content: center; font-style: normal; font-weight: 900; font-size: 13px; }
.ld-card.ready .ok { display: flex; animation: pop .3s ease-out; } .ld-card.ready { border-color: #1fbf5a; }
.ld-you { position: absolute; left: 4px; top: 4px; font: 400 8px 'Press Start 2P', monospace; background: var(--accent); color: #14181f; padding: 3px 5px; border-radius: 4px; }
.ld-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 13px; } .ld-tag { font-style: normal; color: var(--gc); }
.ld-sub { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); max-width: 100%; } .ld-sub span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-lv { white-space: nowrap; flex: none; background: #7a4fd0; color: #fff; border-radius: 6px; padding: 1px 6px; font-weight: 800; }
.ld-info { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; animation: ldUp .5s .3s both; }
@keyframes ldUp { from { opacity: 0; transform: translateY(14px); } }
.ld-map { display: flex; gap: 12px; align-items: center; background: #0b0e16cc; border: 1px solid #ffffff14; border-radius: 12px; padding: 8px; }
.ld-map canvas { width: 150px; height: 107px; flex: none; image-rendering: pixelated; border-radius: 8px; border: 3px solid #0b0d12; } .ld-map p { margin: 0; font-size: 13px; line-height: 1.45; color: #dfe4ec; }
.ld-items { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; justify-content: center; background: #0b0e16cc; border: 1px solid #ffffff14; border-radius: 12px; padding: 8px; }
.ld-items div { display: flex; align-items: center; gap: 5px; background: var(--field); border-radius: 20px; padding: 3px 10px 3px 5px; font-size: 11.5px; } .ld-items canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.ld-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; animation: ldUp .5s .45s both; } .ld-foot #readyBtn, .ld-foot #introReadyBtn, .ld-foot #elGo { margin: 0; }
.ld-foot .intro-bar { margin: 0; height: 24px; border-radius: 12px; } .ld-foot .intro-bar span { line-height: 24px; }
@media (max-width: 760px) {
  .ld, .el { padding-top: 50px; gap: 8px; }
  .ld-info { grid-template-columns: 1fr; } .ld-items { display: none; } .ld-map canvas { width: 96px; height: 69px; } .ld-map p { font-size: 12px; }
  .ld-rules { display: none; }
  .ld-card { width: calc(50% - 8px); max-width: 140px; } .ld-team .ld-card { width: calc(50% - 4px); }
  .ld-arena.n3 .ld-card, .ld-arena.n4 .ld-card { width: calc(50% - 12px); }
  .ld-vs { flex-basis: 100%; text-align: center; } .ld-arena:not(.teams) .ld-vs { display: none; }
  .ld-stage { aspect-ratio: 96 / 78; } .ld-name { font-size: 12px; }
}
@media (min-width: 761px) and (max-height: 700px) { .ld-items { display: none; } .ld-info { grid-template-columns: 1fr; } .ld-card { width: clamp(96px, 12vw, 130px); } }

/* Expedição */
.el { background: linear-gradient(180deg, #2a1608, #0b0e16 70%); }
.el[data-fase="2"] { background: linear-gradient(180deg, #2a1a0a, #0b0e16 70%); } .el[data-fase="3"] { background: linear-gradient(180deg, #1c2430, #0b0e16 70%); } .el[data-fase="4"] { background: linear-gradient(180deg, #3a1208, #0b0e16 70%); }
.el-sky { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 0%, #ff9a3a44, transparent 55%), repeating-linear-gradient(90deg, #ffffff05 0 2px, transparent 2px 24px); pointer-events: none; }
.el > *:not(.el-sky) { position: relative; z-index: 1; }
.el-top h2 { margin: 2px 0 4px; font-size: clamp(18px, 3.6vw, 30px); text-shadow: 0 3px 0 #000; } .el-top p { margin: 0 0 8px; color: #d6dbe4; max-width: 720px; font-size: 14px; }
.el-main { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; flex: 1 0 auto; }
.el h3 { margin: 0 0 8px; font: 400 11px 'Press Start 2P', monospace; color: var(--accent); }
.el-mobs, .el-team { background: #0b0e16bb; border: 1px solid #ffffff14; border-radius: 14px; padding: 10px 12px; }
.el-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: stretch; }
.el-grid:not(:has(.el-mob.big)) { grid-template-columns: 1fr; }
.el-small { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; align-content: start; }
.el-mob { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 8px; border-radius: 10px; background: linear-gradient(180deg, #232b3a, #171c27); border: 2px solid #0b0d12; animation: ldUp .5s both; }
.el-mob canvas { width: 100%; height: auto; image-rendering: pixelated; max-height: 96px; } .el-mob b { font-size: 13px; } .el-mob small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.el-mob.big { background: radial-gradient(circle at 50% 35%, #ff4d3a44, transparent 65%), linear-gradient(180deg, #2c1b1b, #171c27); border-color: #ff7a3a; box-shadow: 0 0 22px #ff7a3a44; } .el-mob.big canvas { max-height: 150px; } .el-mob.big b { font: 400 13px 'Press Start 2P', monospace; color: #ffcf9a; }
.el-tag { position: absolute; top: 6px; left: 6px; font: 400 8px 'Press Start 2P', monospace; background: #e8322a; color: #fff; padding: 3px 5px; border-radius: 4px; }
.el-cards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .el-cards .ld-card { width: clamp(92px, 10vw, 120px); }
@media (max-width: 760px) {
  .el-main { grid-template-columns: 1fr; } .el-grid { grid-template-columns: 1fr; } .el-small { grid-template-columns: repeat(2, 1fr); }
  .el-top p { font-size: 12.5px; } .el-cards .ld-card { width: calc(50% - 6px); max-width: 130px; } .el-mob canvas, .el-mob.big canvas { max-height: 80px; }
}

/* ---------- Expedição: mapa do Ato 1 ---------- */
.panel.wide.exp-panel { max-width: 960px; }
.exp-map { position: relative; margin: 10px 0 12px; border-radius: 12px; border: 3px solid #0b0d12; box-shadow: 0 5px 0 #0b0d12, inset 0 0 0 1px #ffb05a55; overflow: hidden; aspect-ratio: 320 / 110; background: #2b1a3a; }
.exp-map canvas#expMapCv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.exp-map-t { position: absolute; left: 10px; top: 8px; font: 400 9px 'Press Start 2P', monospace; color: #ffe9b8; text-shadow: 0 2px 0 #000; letter-spacing: 1px; }
button.exp-node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); margin: 0; padding: 0; width: clamp(64px, 11vw, 96px); display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; box-shadow: none; color: #fff; cursor: pointer; transition: transform .15s; z-index: 2; }
button.exp-node:hover:not(:disabled) { transform: translate(-50%, -54%) scale(1.06); filter: none; }
button.exp-node .en-ic { width: clamp(46px, 8.5vw, 70px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #3a2a48, #1b1424); border: 3px solid #e9ad2c; box-shadow: 0 3px 0 #0b0d12, 0 0 0 2px #0b0d12; }
button.exp-node .en-ic canvas { width: 86%; height: 86%; image-rendering: pixelated; }
button.exp-node.boss .en-ic { border-color: #e8661c; }
button.exp-node.on .en-ic { border-color: #fff27a; box-shadow: 0 3px 0 #0b0d12, 0 0 0 2px #0b0d12, 0 0 18px #ffd23f; animation: nodePulse 1.4s ease-in-out infinite; }
@keyframes nodePulse { 50% { transform: scale(1.08); } }
button.exp-node.done .en-ic { border-color: #3ddc84; }
button.exp-node.off { opacity: .6; cursor: default; }
button.exp-node .en-n { position: absolute; left: 2px; top: -2px; z-index: 1; font: 400 9px 'Press Start 2P', monospace; font-style: normal; background: #e9ad2c; color: #2a1a00; border: 2px solid #0b0d12; border-radius: 6px; padding: 3px 4px; }
button.exp-node .en-name { font-size: clamp(10px, 1.6vw, 12px); font-weight: 800; text-align: center; line-height: 1.15; text-shadow: 0 2px 0 #000, 0 0 6px #000; }
button.exp-node .en-st { font-style: normal; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; background: #0b0d12cc; border-radius: 8px; padding: 1px 7px; color: #ffcf9a; } button.exp-node .en-st.ok { color: #7ee2a0; } button.exp-node .en-st canvas { width: 12px; height: 12px; image-rendering: pixelated; }
.exp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.exp-detail, .exp-roster { background: #0b0e1699; border: 1px solid #ffffff14; border-radius: 12px; padding: 10px 12px; }
.exp-detail.swap { animation: edSwap .3s ease-out; } @keyframes edSwap { from { opacity: 0; transform: translateX(12px); } }
.ed-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .ed-head small { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 11px; }
.ed-head h3 { margin: 2px 0 0; font: 400 13px/1.5 'Press Start 2P', monospace; color: #ffe9b8; text-transform: none; letter-spacing: 0; }
.ed-text { margin: 8px 0 4px; font-size: 13.5px; line-height: 1.5; color: #e8dcc0; }
.exp-detail h4, .exp-roster h4 { margin: 10px 0 6px; font: 400 10px 'Press Start 2P', monospace; color: var(--accent); } .exp-detail h4 small { color: var(--muted); font-family: system-ui; font-size: 11px; }
.exp-roster h4 { margin-top: 0; }
.ed-rooms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ed-rooms li { display: flex; align-items: center; gap: 9px; background: #232b3a; border: 2px solid #0b0d12; border-radius: 9px; padding: 6px 9px; }
.ed-rooms li > i { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #e9ad2c; font: 400 10px 'Press Start 2P', monospace; font-style: normal; color: #ffe9b8; }
.ed-rooms li.challenge > i { border-color: #e8661c; background: #e8661c33; } .ed-rooms li.challenge { border-color: #e8661c88; }
.ed-rooms li > div { flex: 1; min-width: 0; } .ed-rooms b { display: block; font-size: 13px; } .ed-rooms small { color: var(--muted); font-size: 11.5px; line-height: 1.3; display: block; }
/* salas clicáveis: abrem a dica e onde está o cordel */
.ed-rooms li.ed-room { display: block; cursor: pointer; transition: border-color .15s, background .15s; }
.ed-rooms li.ed-room:hover { background: #2a3446; border-color: #e9ad2c88; }
.ed-row { display: flex; align-items: center; gap: 9px; }
.ed-row > i { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #e9ad2c; font: 400 10px 'Press Start 2P', monospace; font-style: normal; color: #ffe9b8; }
.ed-rooms li.challenge .ed-row > i { border-color: #e8661c; background: #e8661c33; }
.ed-row > div { flex: 1; min-width: 0; }
.ed-chev { font-style: normal; color: var(--muted); font-size: 18px; line-height: 1; transition: transform .15s; }
.ed-room.open .ed-chev { transform: rotate(90deg); color: #e9ad2c; }
.ed-more { display: none; margin: 6px 0 2px 33px; font-size: 12px; line-height: 1.4; color: #c8cfda; }
.ed-room.open .ed-more { display: block; animation: rise .2s ease-out; }
.ed-more p { margin: 0 0 4px; } .ed-more .ed-folline { color: #ffe9b8; }
button.fl-tile.off { cursor: pointer; } button.fl-tile.off:hover { opacity: .85; }
.fol-paper.locked h3 { letter-spacing: 4px; } .fol-paper.locked .fol-verse { font-style: normal; } .fol-paper.locked #folGo { margin-top: 10px; width: auto; }
.ed-tag { font: 400 8px 'Press Start 2P', monospace; background: #e8322a; color: #fff; padding: 3px 5px; border-radius: 4px; } .ed-fol { opacity: .4; filter: grayscale(1); } .ed-fol.got { opacity: 1; filter: none; } .ed-fol canvas { width: 16px; height: 16px; image-rendering: pixelated; }
.exp-roster .el-mob.big canvas { max-height: 130px; }
@media (max-width: 760px) {
  .exp-cols { grid-template-columns: 1fr; }
  .exp-map { aspect-ratio: 320 / 125; } button.exp-node { width: 60px; } button.exp-node .en-name { display: none; } button.exp-node .en-st { display: none; } button.exp-node .en-ic { width: 44px; } button.exp-node .en-n { font-size: 8px; padding: 2px 3px; }
  .exp-roster .el-grid { grid-template-columns: 1fr; } .exp-roster .el-small { grid-template-columns: repeat(2, 1fr); }
}

/* jogo rápido sem ninguém online: aviso e contagem para completar com bots */
.quick-banner { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: linear-gradient(90deg, #ffcc0022, #1c222d); border: 1px solid #ffcc0066; border-radius: 12px; padding: 10px 12px 14px; margin: 0 0 10px; }
.quick-banner .qb-txt { flex: 1 1 220px; } .quick-banner b { display: block; color: var(--accent); } .quick-banner small { color: #d6dbe4; font-size: 12.5px; }
.quick-banner .qb-act { display: flex; gap: 6px; } .quick-banner .qb-act .mini { margin: 0; width: auto; }
.quick-banner .qb-bar { position: absolute; left: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #c2410c, var(--accent)); transition: width .25s linear; }

/* ---------- redes sociais: perfis oficiais e janela de compartilhar ---------- */
.sn-ic { display: inline-grid; place-items: center; flex: none; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 7px; font: 400 8px 'Press Start 2P', monospace; font-style: normal; color: #14181f; background: var(--sc, #9aa4b8); box-shadow: inset 0 -3px 0 #0003, 0 2px 0 #0b0d12; }
.home-redes { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; } .home-redes small { color: var(--muted); font-weight: 700; margin-right: 2px; }
.sn-chip { display: inline-flex; align-items: center; gap: 6px; background: #1c222dd0; border: 1px solid #ffffff1a; border-radius: 20px; padding: 3px 10px 3px 4px; font-size: 12px; font-weight: 700; color: var(--text); text-decoration: none; }
a.sn-chip:hover { border-color: var(--accent); transform: translateY(-1px); } .sn-chip.soon { opacity: .6; cursor: default; } .sn-chip em { font-style: normal; font-size: 9px; color: var(--muted); font-weight: 800; text-transform: uppercase; }
#shareModal { position: fixed; inset: 0; z-index: 42; display: flex; align-items: center; justify-content: center; padding: 12px; background: #000b; animation: pgfade .2s ease-out; }
#shareModal.hidden { display: none; }
.sm-box { position: relative; width: min(460px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; border-radius: 14px; border: 3px solid #0b0d12; padding: 16px; background: linear-gradient(180deg, var(--panel), var(--panel2)); box-shadow: 0 20px 60px #000; }
.sm-box h2 { margin: 0 40px 10px 0; font-size: 15px; }
.sm-prev { display: grid; place-items: center; background: #0b0e16; border-radius: 10px; border: 2px solid #0b0d12; margin-bottom: 10px; overflow: hidden; max-height: 240px; } .sm-prev img, .sm-prev video { max-width: 100%; max-height: 240px; display: block; image-rendering: pixelated; }
#smBody h4 { margin: 12px 0 6px; font: 400 10px 'Press Start 2P', monospace; color: var(--accent); }
.sm-nets, .sm-follow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sm-net { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 10px; text-align: left; font-size: 13px; background: #232b3a; color: var(--text); border: 2px solid #0b0d12; border-radius: 10px; box-shadow: 0 3px 0 #0b0d12; }
.sm-net:hover { border-color: var(--accent); filter: none; }
.sm-native { display: block; width: 100%; margin: 0 0 4px; } .sm-native small { display: block; font: 500 11px system-ui; opacity: .75; margin-top: 2px; }
#smBody .big { width: 100%; margin: 4px 0 8px; } #smBody .hint { margin: 10px 0 0; font-size: 12px; }
.sm-follow .sn-chip { justify-content: flex-start; padding: 8px 10px 8px 6px; border-radius: 10px; font-size: 13px; }
.home-redes .sn-chip em { display: none; } .home-redes .sn-chip { padding-right: 9px; }

/* ---------- Expedição: tudo numa tela (mapa + fase + carrossel dos bichos + cordéis) ---------- */
.exp-map { aspect-ratio: 320 / 84; margin: 4px 0 8px; }
button.exp-node { width: clamp(60px, 9vw, 86px); } button.exp-node .en-ic { width: clamp(40px, 6.4vw, 58px); } button.exp-node .en-name { font-size: clamp(9.5px, 1.3vw, 11.5px); } button.exp-node .en-st { font-size: 9px; padding: 0 6px; }
.exp-cols3 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .95fr); gap: 10px; align-items: stretch; }
.exp-cols3 > section { background: #0b0e1699; border: 1px solid #ffffff14; border-radius: 12px; padding: 9px 11px; min-width: 0; }
.exp-cols3 h4 { margin: 0 0 6px; font: 400 10px 'Press Start 2P', monospace; color: var(--accent); } .exp-cols3 h4 small { color: var(--muted); font: 600 11px system-ui; margin-left: 4px; }
.exp-detail .ed-head h3 { font-size: 12px; } .exp-detail .ed-text { font-size: 12.5px; margin: 6px 0 2px; line-height: 1.4; }
.exp-detail h4 { margin-top: 8px; }
.ed-rooms { gap: 5px; } .ed-rooms li { padding: 5px 8px; } .ed-rooms b { font-size: 12.5px; } .ed-rooms small { font-size: 11px; }
.exp-roster { display: flex; flex-direction: column; }
.rs-stage { display: flex; align-items: center; gap: 4px; flex: 1; min-height: 0; }
.rs-card { flex: 1; min-width: 0; animation: rsIn .3s ease-out; } @keyframes rsIn { from { opacity: 0; transform: translateX(14px); } }
.rs-card .el-mob { padding: 6px; } .rs-card .el-mob canvas, .rs-card .el-mob.big canvas { max-height: 112px; width: 100%; } .rs-card .el-mob.big b { font-size: 12px; } .rs-card .el-mob small { font-size: 11px; }
button.rs-arrow { flex: none; width: 28px; height: 52px; margin: 0; padding: 0; font-size: 22px; line-height: 1; background: #232b3a; color: var(--accent); border: 2px solid #0b0d12; border-radius: 8px; box-shadow: 0 3px 0 #0b0d12; }
.rs-thumbs { display: flex; justify-content: center; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
button.rs-th { margin: 0; padding: 2px; width: 44px; height: 40px; background: #232b3a; border: 2px solid #0b0d12; border-radius: 8px; box-shadow: 0 2px 0 #0b0d12; opacity: .7; }
button.rs-th canvas { width: 100%; height: 100%; image-rendering: pixelated; } button.rs-th.on { opacity: 1; border-color: var(--accent); } button.rs-th.boss { border-color: #e8661c88; } button.rs-th.boss.on { border-color: #e8661c; box-shadow: 0 0 10px #e8661c88; }
.fl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
button.fl-tile { margin: 0; padding: 5px 2px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: #232b3a; color: var(--text); border: 2px solid #0b0d12; border-radius: 8px; box-shadow: 0 2px 0 #0b0d12; min-height: 56px; }
button.fl-tile small { font-size: 9px; line-height: 1.15; text-align: center; color: var(--muted); font-weight: 600; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
button.fl-tile.off { opacity: .55; cursor: default; } button.fl-tile.off canvas { filter: grayscale(1) brightness(.7); } button.fl-tile.here { opacity: 1; border-color: #e9ad2c; box-shadow: 0 0 10px #e9ad2c66, 0 2px 0 #0b0d12; animation: nodePulse 2s ease-in-out infinite; }
button.fl-tile canvas { image-rendering: pixelated; }
.exp-fol-box .hint { margin: 6px 0 0; font-size: 11.5px; }
.exp-actions { align-items: center; } .exp-actions > .back { flex: 0 0 auto; width: auto; padding-inline: 18px; } .exp-actions #expGo { flex: 1 1 auto; }
.exp-diff { display: flex; flex-direction: column; gap: 2px; flex: 0 1 330px; min-width: 0; } .exp-diff .seg { margin: 0; } .exp-diff small { font-size: 10.5px; color: var(--muted); line-height: 1.25; max-height: 2.5em; overflow: hidden; }
@media (max-width: 900px) {
  .exp-cols3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .exp-fol-box { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .exp-cols3 { grid-template-columns: 1fr; } .exp-map { aspect-ratio: 320 / 96; }
  .exp-actions { flex-wrap: wrap; } .exp-diff { order: -1; flex: 1 1 100%; } .exp-diff small { display: none; } .exp-actions #expGo { flex: 1 1 60%; }
  .rs-card .el-mob canvas, .rs-card .el-mob.big canvas { max-height: 96px; }
}

/* Expedição: o mapa respeita a altura da janela (mantém a proporção do pixel art) para os cordéis e os bichos aparecerem sem rolar */
@media (min-width: 761px) {
  .exp-map { width: min(100%, calc(24vh * 320 / 84)); margin-inline: auto; }
  .panel.wide.exp-panel { max-width: min(1100px, 100%); }
  .exp-panel h2 { margin-bottom: 4px; }
}

/* Expedição no celular deitado: sem o título (as abas dizem onde você está), abas na linha de cima ao lado dos botões
   do canto, mapa maior e as três caixas (fase, bichos, cordéis) lado a lado logo abaixo; a barra de baixo mais baixa */
@media (orientation: landscape) and (max-height: 520px) {
  #expedition { padding: 6px 8px; align-items: stretch; }
  #expedition .panel.wide.exp-panel { max-width: 100%; height: calc(100dvh - 12px); max-height: none; margin: 0; padding: 6px 10px 8px; display: flex; flex-direction: column; border-radius: 12px; }
  .exp-panel > h2 { display: none; }
  .exp-panel #expMain { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  #expedition .exp-acts { margin: 0 190px 4px 0; } #expedition .exp-acts button { padding: 5px 10px; font-size: 12px; }
  @media (max-width: 800px) { #expedition .exp-acts .ea-nm { display: none; } }
  #expedition .exp-map { width: min(100%, calc(30vh * 320 / 84)); margin: 2px auto 6px; }
  .exp-cols3 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; } .exp-fol-box { grid-column: auto; }
  .exp-cols3 > section { padding: 6px 8px; }
  .exp-detail .ed-head h3 { font-size: 11px; } .exp-detail .ed-text { font-size: 11.5px; }
  .rs-card .el-mob canvas, .rs-card .el-mob.big canvas { max-height: 72px; }
  .fl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } button.fl-tile { min-height: 46px; }
  .exp-actions { flex-wrap: nowrap; gap: 6px; margin-top: 6px; } .exp-actions > .back { padding: 8px 14px; } .exp-actions #expGo { padding: 10px; font-size: 15px; }
  #expedition .exp-diff { order: 0; flex: 0 0 auto; } #expedition .exp-actions #expGo { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #expedition .exp-diff small { display: none; } #expedition .exp-diff .seg button { padding: 6px 10px; font-size: 12px; }
}

/* redes: ícones em pixel art (Instagram, TikTok, YouTube, Discord) */
canvas.sn-px { width: 24px; height: 24px; flex: none; image-rendering: pixelated; }
.home-redes { gap: 8px; } .home-redes .sn-chip { padding: 4px; border-radius: 10px; background: #1c222dd0; } .home-redes .sn-chip span { display: none; } .home-redes canvas.sn-px { width: 30px; height: 30px; }
a.sn-chip:hover canvas.sn-px { filter: brightness(1.15); } .sn-chip.soon canvas.sn-px { filter: grayscale(.6); }
.sm-follow .sn-chip { gap: 10px; } .sm-follow canvas.sn-px { width: 28px; height: 28px; }
.sm-net canvas.sn-px { width: 22px; height: 22px; }

/* mascote: Pipoca, ao lado do logo da tela inicial */
.logo-row { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
button.mascot { position: relative; margin: 0; padding: 0; width: auto; background: none; border: 0; box-shadow: none; cursor: pointer; flex: none; animation: mascotBob 2.4s ease-in-out infinite; }
button.mascot:hover { filter: none; transform: scale(1.06); }
button.mascot canvas { display: block; width: clamp(44px, 11vw, 72px); aspect-ratio: 24 / 27; image-rendering: pixelated; filter: drop-shadow(0 4px 0 #0b0d12); }
.mascot-say { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-30%) scale(.8); transform-origin: 30% 100%; white-space: nowrap; background: #fff; color: #1a1020; font: 400 9px 'Press Start 2P', monospace; padding: 7px 9px; border-radius: 8px; border: 2px solid #0b0d12; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 3; }
.mascot-say.on { opacity: 1; transform: translateX(-30%) scale(1); }
.mascot-say::after { content: ''; position: absolute; left: 30%; top: 100%; border: 6px solid transparent; border-top-color: #fff; }
@keyframes mascotBob { 50% { transform: translateY(-4px); } }

/* Expedição: sem rolagem em telas normais, nós do mapa proporcionais à altura, dificuldade sem estourar a barra */
@media (min-width: 761px) {
  button.exp-node { width: clamp(60px, 10vh, 86px); } button.exp-node .en-ic { width: clamp(36px, 6.4vh, 56px); } button.exp-node .en-name { font-size: clamp(9px, 1.3vh, 11.5px); }
  .rs-card .el-mob canvas, .rs-card .el-mob.big canvas { max-height: clamp(70px, 11vh, 112px); }
  .exp-cols3 > section { padding: 7px 10px; } .fl-grid button.fl-tile { min-height: 48px; }
}
.exp-actions { margin-top: 8px; } .exp-diff { flex: 0 0 auto; max-width: 46%; }
.exp-diff .seg button { white-space: nowrap; flex: none; padding: 7px 12px; font-size: 13px; }
.exp-diff small { display: block; width: 0; min-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

/* Pipoca comemora ou lamenta no fim da partida */
.pg-mascot { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin-bottom: 6px; animation: pgdrop .6s cubic-bezier(.2, 1.4, .4, 1) .15s backwards; }
.pg-mascot canvas { width: clamp(40px, 9vh, 64px); aspect-ratio: 24 / 27; image-rendering: pixelated; filter: drop-shadow(0 4px 0 #000); }
#postgame.win .pg-mascot canvas { animation: mascotBob .7s ease-in-out infinite; } #postgame.lose .pg-mascot canvas { filter: drop-shadow(0 4px 0 #000) grayscale(.55) brightness(.85); transform: rotate(-6deg); }
.pg-mascot span { position: relative; margin-bottom: 18px; background: #fff; color: #1a1020; font: 400 10px 'Press Start 2P', monospace; padding: 8px 10px; border-radius: 8px; border: 2px solid #0b0d12; }
.pg-mascot span::before { content: ''; position: absolute; left: -10px; bottom: 6px; border: 5px solid transparent; border-right-color: #fff; border-left-width: 5px; }
.exp-diff { max-width: none; flex: 0 0 auto; } .exp-diff .seg { width: max-content; max-width: 100%; }
/* os botões herdam width:100% e, num contêiner que se ajusta ao conteúdo, empurravam "Arretado" e "Vixe Maria" para baixo do botão de começar */
.exp-diff .seg { width: auto; display: flex; flex-wrap: nowrap; } .exp-diff .seg button { width: auto; flex: 0 0 auto; }

/* Perfil maior no computador: boneco grande e cartas da coleção maiores */
@media (min-width: 761px) {
  #visual .panel.wide { max-width: min(1000px, 100%); }
  #visual .profile-card { padding: 14px 18px; gap: 20px; }
  #visual .profile-card canvas { width: 190px; height: 190px; }
  #visual .pc-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #visual .cos-tabs button { padding: 8px 15px; font-size: 14px; }
  #visual .cos-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  #visual button.cos-card { padding: 22px 8px 10px; gap: 4px; }
  #visual .cos-card .thumb { width: 72px; height: 72px; }
  #visual button.cos-card b { font-size: 14px; } #visual button.cos-card small { font-size: 11.5px; }
}

/* ---------- Perfil: liga e guilda em destaque, abas como filtro, coleção sem tremer ---------- */
.pc-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pb-card { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 9px; border-radius: 10px; background: color-mix(in srgb, var(--tc, #9aa4b8) 13%, #0b0e16); border: 1px solid color-mix(in srgb, var(--tc, #9aa4b8) 45%, transparent); }
.pb-card > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pb-card small { font-size: 10px; color: var(--muted); font-weight: 600; } .pb-card b { font-size: 13.5px; color: var(--tc, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pb-card em { font-style: normal; font-size: 10.5px; color: #d6dbe4; }
#visual .profile-card canvas.pb-ic { flex: none; width: 30px; height: 30px; image-rendering: pixelated; } #visual .profile-card canvas.pb-ic.ban { width: 24px; height: 32px; }
.pb-card.guild { cursor: pointer; } .pb-card.guild:hover { border-color: var(--tc, #9aa4b8); } .pb-card.guild.none { --tc: #9aa4b8; border-style: dashed; }
/* abas = filtros: uma linha, a escolhida bem marcada */
#visual .cos-tabs { flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } #visual .cos-tabs::-webkit-scrollbar { display: none; }
#visual .cos-tabs button { flex: 1 0 auto; position: relative; transition: background .15s, color .15s, border-color .15s; }
#visual .cos-tabs button:hover:not(.on) { filter: none; color: var(--text); border-color: #ffffff30; }
#visual .cos-tabs button.on { background: linear-gradient(180deg, #ffcc0030, #ffcc0012); color: var(--accent); border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
#visual .cos-tabs button.on small { opacity: 1; color: #ffe9a0; }
/* cartas: sem filtro no hover (o filtro recriava a camada e o pixel art tremia), só a borda acende */
#visual button.cos-card { transition: border-color .12s, background-color .12s; transform: none !important; }
#visual button.cos-card:hover:not(:disabled) { filter: none; border-color: color-mix(in srgb, var(--rc, #9aa4b8) 85%, #fff); }
#visual button.cos-card.on:hover { border-color: var(--accent); }
#visual .cos-card .thumb { transform: translateZ(0); }
/* rolagem: a grade ocupa o espaço que sobra, sem a máscara cortando carta e parando sempre no começo de uma linha */
#visual #cosGrid { mask-image: none; -webkit-mask-image: none; padding-bottom: 6px; scroll-snap-type: y proximity; scroll-padding-top: 2px; min-height: 200px; }
#visual #cosGrid > * { scroll-snap-align: start; }
@media (min-width: 761px) {
  #visual .profile-card canvas { width: 160px; height: 160px; }
  #visual button.cos-card { padding: 20px 8px 8px; } #visual .cos-card .thumb { width: 64px; height: 64px; }
}
@media (max-width: 760px) { .pc-badges { grid-template-columns: 1fr 1fr; } .pb-card.guild { grid-column: 1 / -1; } }

/* ---------- Missões & Passe: carteira dupla, vitrine do Premium, trilha cheia ---------- */
canvas.pic, canvas.tab-ic { image-rendering: pixelated; vertical-align: -3px; flex: none; }
canvas.tab-ic { width: 18px; height: 18px; margin-right: 4px; }
.pass-wallet { display: flex; gap: 18px; } .pass-wallet .wallet-n { display: flex; align-items: center; gap: 6px; } .pass-wallet .wallet-n canvas { width: 22px; height: 22px; image-rendering: pixelated; }
.pass-wallet .wallet-n small { font-size: 11px; color: var(--muted); font-weight: 600; margin-left: 2px; } .pass-wallet .wallet-n.fag b { color: #ffb020; }
#pass .panel.wide { max-width: min(980px, 100%); }
.prem-box { margin: 10px 0 4px; padding: 12px; border-radius: 12px; border: 3px solid #0b0d12; background: radial-gradient(circle at 100% 0%, #ffb02033, transparent 50%), linear-gradient(135deg, #3a2a10, #2a1d3e 60%, #1b212c); box-shadow: inset 0 0 0 1px #ffd23f55, 0 4px 0 #0b0d12; }
.pb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pb-title { display: flex; align-items: center; gap: 10px; } .pb-title > div { display: flex; flex-direction: column; }
.pb-title b { font: 400 13px 'Press Start 2P', monospace; color: #ffd23f; text-shadow: 0 2px 0 #000; } .pb-title small { color: #d8c8a8; font-size: 12px; margin-top: 3px; }
.pb-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .pb-buy small { font-size: 11.5px; color: #e8dcc0; } .pb-buy a { color: #ffb020; font-weight: 800; }
button.buy-prem { width: auto; margin: 0; padding: 10px 18px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; border: 3px solid #0b0d12; border-radius: 10px; background: linear-gradient(180deg, #ffe27a, #ffb000); color: #2a1e00; box-shadow: inset 0 3px 0 #fff6, 0 4px 0 #0b0d12, 0 0 18px #ffb02066; }
button.buy-prem.short { background: linear-gradient(180deg, #5a4a2a, #3a3020); color: #e8d8b0; box-shadow: inset 0 2px 0 #ffffff18, 0 4px 0 #0b0d12; }
.pb-items { display: flex; gap: 8px; margin: 12px 0 10px; overflow-x: auto; scrollbar-width: none; } .pb-items::-webkit-scrollbar { display: none; }
.pb-item { flex: 1 0 84px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: 10px; background: color-mix(in srgb, var(--rc) 16%, #12161f); border: 2px solid color-mix(in srgb, var(--rc) 60%, transparent); }
.pb-item canvas { width: 44px; height: 44px; image-rendering: pixelated; } .pb-item em { font-style: normal; font-size: 10.5px; font-weight: 700; text-align: center; line-height: 1.15; color: #f0f2f6; }
.pb-perks { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #f0e6cc; } .pb-perks span { display: inline-flex; align-items: center; gap: 5px; }
.prem-on { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 9px 12px; border-radius: 10px; border: 2px solid #ffd23f88; background: linear-gradient(90deg, #ffd23f22, transparent); }
.prem-on > div { display: flex; flex-direction: column; } .prem-on b { color: #ffd23f; } .prem-on small { color: #e8dcc0; font-size: 12px; }
button.buy-level { width: auto; margin: 0; padding: 4px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; line-height: 1.15; border: 3px solid #0b0d12; border-radius: 8px; background: linear-gradient(180deg, #ff9a3a, #e8661c); color: #2a1200; box-shadow: inset 0 2px 0 #fff5, 0 4px 0 #0b0d12; }
button.buy-level small { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 800; }
.track-bar button.mini canvas { width: 20px; height: 20px; vertical-align: middle; }
button.claim-all .ca-big { display: inline-flex; align-items: center; gap: 6px; }
.plabel.prem { flex-direction: column; gap: 3px; color: #ffd23f; border-color: #ffd23f66; background: #ffd23f14; }
.pcell.premium { background: linear-gradient(180deg, #ffd23f22, #1b212c 70%); }
.pcell .pr-icon { width: 36px; height: 36px; image-rendering: pixelated; } .pcell .pr-icon.item { width: 40px; height: 40px; }
.pcell .pr-n.fag { color: #ffb020; }
.pcell.is-item { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 70%, transparent), 0 3px 0 #0b0d12; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc) 30%, transparent), #1b212c 75%); }
.pcell.is-item.ready { box-shadow: inset 0 0 0 2px var(--accent), 0 0 16px #ffcc0077, 0 3px 0 #0b0d12; }
.pcell .pc-ok canvas { width: 12px; height: 12px; }
.pcell.locked { filter: saturate(.7); } .pcell.locked .pr-icon { filter: grayscale(.4) brightness(.85); }
.mission .m-ic canvas { width: 26px; height: 26px; } .m-rew span { display: inline-flex; align-items: center; gap: 4px; } .m-head b { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) { .pb-top { flex-direction: column; align-items: stretch; } .pb-buy { align-items: stretch; } button.buy-prem { justify-content: center; } .pb-item { flex-basis: 74px; } .track-bar { flex-wrap: wrap; } }
/* vitrine do Premium compacta: título, itens e compra numa faixa só (a trilha continua sendo o centro da tela) */
.prem-box { padding: 10px 12px; } .pb-top { flex-wrap: nowrap; }
.prem-box .pb-items { flex: 1 1 auto; margin: 0; justify-content: center; gap: 6px; min-width: 0; }
.prem-box .pb-item { flex: 0 0 auto; padding: 4px; border-radius: 8px; } .prem-box .pb-item canvas { width: 38px; height: 38px; }
.pb-perks { margin-top: 8px; font-size: 11.5px; }
@media (max-width: 760px) { .pb-top { flex-wrap: wrap; } .prem-box .pb-items { order: 3; flex-basis: 100%; justify-content: flex-start; } }
#passTabs button { display: flex; align-items: center; justify-content: center; gap: 6px; } #passTabs canvas.tab-ic { margin: 0; }

/* ---------- Ranqueada: faixa da temporada, filas, temporada e ligas ---------- */
#ranked .panel.wide.ranked-panel { max-width: min(980px, 100%); }
img.tier-img { image-rendering: pixelated; display: block; flex: none; }
.tier-badge.px { display: grid; place-items: center; background: none; border: 0; box-shadow: none; flex: none; filter: drop-shadow(0 3px 0 #0b0d12) drop-shadow(0 0 10px color-mix(in srgb, var(--tc) 45%, transparent)); }
.tier-badge.px img { width: 100%; height: 100%; }
#rankedTabs button { display: flex; align-items: center; justify-content: center; gap: 6px; } #rankedTabs canvas.tab-ic { margin: 0; }
/* faixa da temporada */
.season-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 10px; padding: 10px 14px; border-radius: 12px; border: 3px solid #0b0d12;
  background: radial-gradient(circle at 0% 50%, #ffd23f30, transparent 40%), linear-gradient(90deg, #2a2440, #1b212c); box-shadow: inset 0 2px 0 #ffffff12, 0 4px 0 #0b0d12; }
.sb-num { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 74px; padding: 6px 8px; border-radius: 8px; border: 3px solid #0b0d12; background: linear-gradient(180deg, #ffe27a, #ffb000); color: #2a1e00; box-shadow: inset 0 2px 0 #fff6, 0 3px 0 #0b0d12; }
.sb-num small { font: 400 7px 'Press Start 2P', monospace; letter-spacing: 1px; } .sb-num b { font: 400 22px 'Press Start 2P', monospace; line-height: 1.1; margin-top: 3px; }
.sb-mid { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .sb-top b { font-size: 15px; } .sb-top small { color: var(--muted); font-size: 12px; }
.sb-bar { height: 10px; border-radius: 6px; background: #ffffff14; overflow: hidden; border: 2px solid #0b0d12; } .sb-bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #ffd23f 0 8px, #ffb000 8px 16px); }
.sb-prize { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: #0b0e1699; border: 1px solid #ffffff14; } .sb-prize > div { display: flex; flex-direction: column; }
.sb-prize small { color: var(--muted); font-size: 10.5px; } .sb-prize b { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: #ffe27a; }
/* cartões das filas */
.queues { gap: 10px; }
.queue-card { padding: 12px; border-radius: 12px; border: 3px solid #0b0d12; background: linear-gradient(180deg, #232b3a, #1b212c); box-shadow: inset 0 2px 0 #ffffff10, 0 4px 0 #0b0d12; display: flex; flex-direction: column; gap: 10px; }
.qc-head { display: flex; align-items: center; gap: 8px; } .qc-head > div { display: flex; flex-direction: column; } .qc-head b { font: 400 13px 'Press Start 2P', monospace; } .qc-head small { color: var(--muted); font-size: 12px; margin-top: 3px; }
.qc-tier { display: flex; align-items: center; gap: 14px; } .qc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.qc-name { font-size: 18px; font-weight: 800; }
.div-pips { display: flex; gap: 4px; } .div-pips i { font-style: normal; font: 700 10px system-ui; padding: 2px 7px; border-radius: 6px; background: #ffffff10; color: var(--muted); border: 1px solid #ffffff14; }
.div-pips i.done { background: color-mix(in srgb, var(--accent) 30%, transparent); color: #ffe9a0; border-color: #ffcc0066; } .div-pips i.cur { background: var(--accent); color: #241c00; border-color: var(--accent); }
.div-pips.master { font: 700 11px system-ui; color: #ff8aa0; }
.queue-card .pp-bar { position: relative; height: 16px; border-radius: 8px; border: 2px solid #0b0d12; background: #ffffff10; overflow: hidden; } .queue-card .pp-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 0; }
.queue-card .pp-bar em { position: relative; display: block; text-align: center; font-style: normal; font: 800 10.5px system-ui; line-height: 12px; text-shadow: 0 1px 2px #000; }
.qc-stats { display: flex; gap: 12px; font-size: 12px; color: var(--muted); } .qc-stats b { color: var(--text); }
.qc-tags { display: flex; flex-wrap: wrap; gap: 6px; } .qc-tags:empty { display: none; }
.qc-tags span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 8px; background: #ffffff0d; }
.qc-tags .place i { display: inline-flex; gap: 3px; } .qc-tags .place i b { width: 8px; height: 8px; border-radius: 2px; background: #ffffff20; } .qc-tags .place i b.on { background: var(--accent); }
.qc-tags .shield { background: #3ddc8422; color: #7ee2a0; }
.queue-card > button { margin: 0; }
/* regras em blocos */
.rk-rules-head { margin: 14px 2px 6px; font: 400 10px 'Press Start 2P', monospace; color: var(--accent); }
.rk-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.rk-rules div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: #0b0e1699; border: 1px solid #ffffff12; }
.rk-rules b { font-size: 12.5px; color: var(--accent); } .rk-rules span { font-size: 12px; color: #c8cfda; line-height: 1.35; } .rk-rules .warn b { color: #ff8a8a; }
/* aba Temporada */
.rk-sec { margin-bottom: 12px; } .rk-sec h4 { margin: 4px 2px 8px; font: 400 10px 'Press Start 2P', monospace; color: var(--accent); } .rk-sec h4 small { font: 500 11px system-ui; color: var(--muted); margin-left: 6px; }
.tier-prizes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding-top: 8px; }
.tp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 10px; text-align: center; background: color-mix(in srgb, var(--tc) 12%, #12161f); border: 2px solid color-mix(in srgb, var(--tc) 40%, transparent); }
.tp b { font-size: 12px; color: var(--tc); line-height: 1.15; } .tp span { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 800; color: #ffe27a; }
.tp.you { border-color: var(--tc); box-shadow: 0 0 14px color-mix(in srgb, var(--tc) 55%, transparent); } .tp em { position: absolute; top: -8px; font-style: normal; font: 800 9.5px system-ui; padding: 1px 6px; border-radius: 6px; background: var(--tc); color: #14181f; }
.podium-prize { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: linear-gradient(90deg, #ffd23f22, transparent); border: 1px solid #ffd23f55; }
.podium-prize > div { flex: 1; display: flex; flex-direction: column; } .podium-prize b { color: #ffd23f; } .podium-prize small { color: #e8dcc0; font-size: 12px; } .podium-prize small b { color: #ffd23f; }
canvas.pp-emb { width: 36px; height: 36px; image-rendering: pixelated; }
.season-top { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-col { padding: 8px; border-radius: 10px; background: #0b0e1699; border: 1px solid #ffffff12; display: flex; flex-direction: column; gap: 4px; }
.st-head { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; margin: 0 2px 2px; }
.st-row, .hall-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; background: #ffffff06; font-size: 13px; }
.st-row.me { background: #ffcc0018; outline: 1px solid #ffcc0066; }
.st-row .nm, .hall-row .nm { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-row small { font-size: 11px; font-weight: 700; } .st-row b, .hall-row b { font-size: 12px; color: #ffe27a; }
em.pos { font-style: normal; width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 6px; font: 400 9px 'Press Start 2P', monospace; background: #ffffff14; color: var(--muted); }
em.pos.p1 { background: #ffd23f; color: #2a1e00; } em.pos.p2 { background: #d8dce6; color: #1a1d24; } em.pos.p3 { background: #c8834a; color: #1f1208; }
.hall { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hall-col { display: flex; flex-direction: column; gap: 4px; } .hall-col > small { color: var(--muted); font-weight: 700; margin-left: 2px; }
.rk-sec.reset { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 10px; background: #ffffff08; font-size: 12.5px; color: #c8cfda; line-height: 1.4; }
@media (max-width: 760px) {
  .season-bar { grid-template-columns: auto minmax(0, 1fr); } .sb-prize { grid-column: 1 / -1; }
  .tier-prizes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .season-top, .hall { grid-template-columns: 1fr; }
  .qc-tier { gap: 10px; } .qc-tier .tier-badge.px { width: 60px !important; height: 60px !important; }
}
#ladderModes button { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* ---------- Ranqueada: fim de partida, subiu de liga e histórico ---------- */
.pg-card.rk .tier-badge.px { width: 52px; height: 52px; }
.rk-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rk-chips span { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: #ffffff12; color: #d6dbe4; }
.rk-chips .up { background: #3ddc8426; color: #7ee2a0; } .rk-chips .down { background: #ff4d6a26; color: #ff9aaa; } .rk-chips .ok { background: #4da6ff26; color: #9ac8ff; } .rk-chips .fire { background: #ff7a1a26; color: #ffb070; }
#msg .rk-banner .rk-icon img { width: 26px; height: 26px; }
.rk-promo { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--tc) 35%, transparent), #000c 70%); animation: pgfade .25s ease-out; cursor: pointer; }
.rp-box { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; animation: rpPop .6s cubic-bezier(.2, 1.5, .4, 1); }
.rp-box small { font: 400 12px 'Press Start 2P', monospace; color: #fff; letter-spacing: 2px; text-shadow: 0 3px 0 #000; }
.rp-box b { font: 400 22px 'Press Start 2P', monospace; color: var(--tc); text-shadow: 0 3px 0 #000, 0 0 24px var(--tc); }
.rp-box span { color: #e8ecf2; font-size: 14px; }
.rp-box img.rp-badge { filter: drop-shadow(0 6px 0 #000) drop-shadow(0 0 30px var(--tc)); animation: rpSpin 2.4s ease-in-out infinite; }
@keyframes rpPop { from { transform: scale(.3); opacity: 0; } } @keyframes rpSpin { 50% { transform: scale(1.06) rotate(-4deg); } }
.mh-list { display: flex; flex-direction: column; gap: 4px; }
.mh-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; background: #0b0e1699; border-left: 3px solid #3ddc84; }
.mh-row.down { border-left-color: #ff4d6a; }
.mh-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mh-main b { font-size: 13px; } .mh-main small { font-size: 11px; color: var(--muted); }
.mh-when { font-size: 11px; color: var(--muted); } .mh-pp { font-size: 13px; min-width: 64px; text-align: right; } .mh-row.up .mh-pp { color: #7ee2a0; } .mh-row.down .mh-pp { color: #ff8a9a; }
.rk-promo { background: radial-gradient(circle, color-mix(in srgb, var(--tc) 30%, transparent) 0, transparent 45%), #05070cee; }

/* medalhas e ícones em tamanhos inteiros (nítidos em qualquer tela, inclusive no celular) */
canvas.tab-ic { width: 16px; height: 16px; }
.pass-wallet .wallet-n canvas { width: 16px; height: 16px; } .pass-wallet .wallet-n { gap: 8px; }
.pg-card.rk .tier-badge.px { width: 60px; height: 60px; }
.pb-card .pb-ic { width: 40px; height: 40px; }
.sb-prize img.tier-img { width: 20px; height: 20px; }
.tp img.tier-img { width: 40px; height: 40px; } .st-row img.tier-img { width: 20px; height: 20px; }
#msg .rk-banner .rk-icon img { width: 20px; height: 20px; }
@media (max-width: 760px) { .qc-tier .tier-badge.px { width: 60px !important; height: 60px !important; } .tier-prizes { gap: 5px; } }
#replayBtn i { font-style: normal; margin-left: 10px; padding: 0 7px; border-radius: 6px; background: #0003; font-size: 13px; } #replayBtn i:hover { background: #0006; }

/* ---------- Lobby: pronto, chamar a atenção e tirar da sala ---------- */
#plist .rdy { font: 800 11px system-ui; padding: 3px 9px; border-radius: 8px; background: #ffffff12; color: var(--muted); white-space: nowrap; }
#plist .rdy.on { background: #3ddc8426; color: #7ee2a0; }
#plist li button.mini { margin: 0 0 0 6px; width: auto; padding: 4px 10px; font-size: 12px; }
#plist li.nudged { animation: nudgeShake .5s ease-in-out 3; outline: 2px solid var(--accent); }
@keyframes nudgeShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
#readyBtn, #introReadyBtn { width: auto; margin: 0; padding: 12px 22px; font-size: 16px; background: linear-gradient(180deg, #3ddc84, #1fa85a); color: #04210f; border: 3px solid #0b0d12; border-radius: 10px; box-shadow: inset 0 3px 0 #fff5, 0 4px 0 #0b0d12; }
#readyBtn.on { background: #2c3445; color: #7ee2a0; box-shadow: inset 0 2px 0 #ffffff12, 0 4px 0 #0b0d12; }
#readyBtn.nudge:not(.on) { animation: readyPulse .5s ease-in-out 6; }
@keyframes readyPulse { 50% { transform: scale(1.08); box-shadow: inset 0 3px 0 #fff5, 0 4px 0 #0b0d12, 0 0 24px #3ddc84; } }
@media (max-width: 760px) {
  #plist li .w { display: none; }
  #plist li .name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #plist li button.mini { padding: 3px 8px; font-size: 11px; margin-left: 4px; }
  #plist .rdy { font-size: 10px; padding: 2px 6px; margin-left: 4px; }
  #startBtn, #readyBtn, #introReadyBtn { font-size: 14px; padding: 12px 10px; }
}

/* Traquinho (32x48): proporção do desenho nas telas onde ele aparece */
button.mascot canvas { width: clamp(40px, 8vw, 62px); aspect-ratio: 32 / 48; }
.pg-mascot canvas { width: clamp(44px, 10vh, 70px); aspect-ratio: 32 / 48; }
button.mascot canvas { width: clamp(54px, 11vw, 84px); }
.logo-row { margin-bottom: 4px; }

/* convite por link (?de=NICK) */
.de-box { position: relative; width: min(380px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 18px 18px; }
.de-box canvas { width: 80px; aspect-ratio: 32 / 48; image-rendering: pixelated; animation: mascotBob 2.4s ease-in-out infinite; }
.de-box h2 { margin: 4px 0 0; font-size: 20px; } .de-box p { margin: 0 0 6px; color: #c8cfda; font-size: 14px; line-height: 1.4; }
.de-box button.big { width: 100%; margin: 4px 0 0; padding: 14px; font-size: 18px; } .de-box button.sec { width: 100%; margin: 0; }

/* Super Pipoco e Super Pipoca (40x22): tamanhos em múltiplos inteiros do desenho (2x, 3x e 4x), para os pixels ficarem nítidos */
button.mascot canvas { width: 120px; height: 66px; aspect-ratio: auto; }
.logo-row { align-items: flex-end; gap: 8px; }
.pg-mascot canvas { width: 120px; height: 66px; aspect-ratio: auto; }
.de-box canvas { width: 160px; height: 88px; aspect-ratio: auto; }
@media (max-height: 720px) { .pg-mascot canvas { width: 80px; height: 44px; } .de-box canvas { width: 120px; height: 66px; } }
@media (max-width: 520px) { button.mascot canvas { width: 80px; height: 44px; } }
@media (max-width: 520px) { #home .logo { font-size: 8.6vw; } }
.de-box h2 { font-size: 15px; line-height: 1.5; text-align: center; margin: 8px 0 0; }

/* Expedição: abas dos atos e a prévia do Ato 2 (mangue) */
.exp-acts { display: flex; gap: 4px; margin: 0 auto 6px; width: fit-content; max-width: 100%; }
.exp-acts button { width: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.exp-acts em { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #1e3a5a; color: #9ad0ff; }
.exp-acts .ea-ok { display: inline-flex; }
@media (max-width: 480px) { .exp-acts .ea-nm { display: none; } .exp-acts button { padding-left: 12px; padding-right: 12px; } }
.exp-map.act2 { border-color: #2a5a7a; box-shadow: 0 0 0 2px #0a1830, 0 8px 24px rgba(10, 40, 80, .35); }
.exp-map.act2 .exp-map-t { color: #bfe0ff; }
.exp-node .en-lock { display: grid; place-items: center; background: #0e1a2c; }
.exp-node .en-lock canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.a2-threats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; }
.a2-th { background: #12243a; border: 1px solid #24486a; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.a2-th b { color: #9ad0ff; font-size: 13px; }
.a2-th small { color: #b8c4d4; font-size: 11px; line-height: 1.3; }

/* convite de sala (?sala=CODIGO): quem já está na sala e as vagas */
.de-room { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0 6px; }
.de-room span { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 62px; padding: 6px 2px; border-radius: 10px; background: #1a1f2c; border: 1px solid #2c3446; }
.de-room canvas { width: 32px; height: 32px; image-rendering: pixelated; animation: none; }
.de-room small { font-size: 10px; color: #c8cfda; max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.de-room .free { border-style: dashed; opacity: .7; } .de-room .free i { font: 400 14px 'Press Start 2P', monospace; color: #7a849a; height: 32px; display: grid; place-items: center; font-style: normal; }

/* barrinha de GM na Expedição (só conta GM) */
#expGmBar { position: fixed; left: 8px; bottom: 8px; z-index: 30; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: calc(100vw - 16px);
  padding: 6px 8px; border-radius: 10px; background: #1a1020e6; border: 1px solid #ffd23f66; font-size: 12px; }
#expGmBar b { color: #ffd23f; font-family: 'Press Start 2P', monospace; font-size: 9px; margin-right: 2px; }
#expGmBar button { width: auto; padding: 5px 9px; margin: 0; font-size: 12px; border-radius: 7px; background: #2a2236; color: #e8e4f0; border: 1px solid #4a3e5e; box-shadow: none; }
#expGmBar button.on { background: #ffd23f; color: #1a1020; border-color: #ffd23f; }
/* celular: vira um botão "GM" pequeno no canto de cima, abaixo do Sair; o menu só abre no toque (não cobre o direcional nem a bomba) */
body.touch #expGmBar { left: 8px; top: calc(env(safe-area-inset-top, 0px) + 58px); bottom: auto; flex-direction: column; align-items: stretch; max-width: 46vw; padding: 4px; }
body.touch #expGmBar > b { margin: 0; padding: 6px 8px; text-align: center; cursor: pointer; }
body.touch #expGmBar:not(.open) button { display: none; }
body.touch #expGmBar button { padding: 7px 10px; font-size: 13px; }

/* Expedição: nota da fase e speedrun */
.grade-card { align-items: flex-start; }
.grade-big { flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 14px; font: 400 34px 'Press Start 2P', monospace; color: var(--gc);
  background: #12101a; border: 3px solid var(--gc); box-shadow: 0 0 18px color-mix(in srgb, var(--gc) 45%, transparent); text-shadow: 0 3px 0 #000; animation: gradePop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes gradePop { from { transform: scale(.3) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.grade-card small { display: block; }
.sr-box { margin-top: 10px; }
.sr-box h4 { margin: 0 0 6px; }
.sr-top { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sr-top li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; background: #1a1f2c; font-size: 12px; }
.sr-top li.me { background: #3a2f10; outline: 1px solid #ffd23f; }
.sr-top li i { font-style: normal; width: 16px; color: #9aa4b8; font-weight: 700; }
.sr-top li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-top li b { font-variant-numeric: tabular-nums; }
.sr-g { font-style: normal; font: 400 9px 'Press Start 2P', monospace; padding: 3px 4px; border-radius: 4px; background: #12101a; }
.sr-g.gS { color: #ffd23f; } .sr-g.gA { color: #3ddc84; } .sr-g.gB { color: #4da6ff; } .sr-g.gC { color: #c8a0ff; } .sr-g.gD { color: #9aa4b8; }
.sr-top li .sr-d { color: #9aa4b8; font-size: 10px; white-space: nowrap; }

/* ícones de pixel art no lugar dos emojis: botões só de ícone, campos, olho da senha e a bolinha do time */
#emoteBtn .pi { width: 22px; height: 22px; } .field .fi .pi { width: 18px; height: 18px; } button.eye .pi { width: 20px; height: 20px; } button.eye.on .pi { opacity: .55; }
.qspin .pi { width: 34px; height: 34px; animation: spin 1.4s linear infinite; } .help-list .ic .pi, .qa-ic .pi { width: 22px; height: 22px; }
.team-head .tdot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: #4da6ff; box-shadow: 0 0 0 2px #0b0d12; vertical-align: 0; } .team-head.team-1 .tdot { background: #ff4d4d; }
#volPanel label.lowfx span { white-space: normal; }
#volPanel label.lowfx { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 4px; } #volPanel label.lowfx input { width: auto; margin: 0; }

/* aviso com os mascotes (conexão caiu, sem internet) */
.aviso { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 90; width: min(440px, calc(100vw - 32px)); display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: #171c26f7; border: 1px solid #ffcc0055; border-radius: 14px; box-shadow: 0 14px 34px #000b; color: var(--text); }
.aviso.show { animation: avIn .28s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes avIn { from { transform: translate(-50%, 30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.aviso .av-cv { width: 80px; height: 44px; flex: none; image-rendering: pixelated; }
.aviso .av-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aviso .av-txt b { font-size: 15px; color: #ffcc00; }
.aviso .av-txt span { font-size: 13px; color: var(--muted); line-height: 1.35; }
.aviso .av-act { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.aviso .av-act:empty { display: none; }
.aviso .av-act button { margin: 0; padding: 6px 12px; font-size: 13px; width: auto; }
.aviso .av-act button.sec { background: #2a3140; color: var(--text); box-shadow: none; }
.aviso .av-x { flex: none; width: 26px; height: 26px; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; color: var(--muted); font-size: 14px; }
body.in-game .aviso { bottom: auto; top: 54px; } /* na partida não cobre os controles do celular */

/* ===== tela inicial em formato de saguão (estilo jogos de celular): conta no topo, vitrine no meio,
   atalhos em ícone nas laterais, JOGAR grande com o modo acima ===== */
body #home .home.lobby { max-width: 1240px; width: 100%; margin: 0 auto; display: grid; gap: 14px 18px; text-align: left;
  grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr) 92px;
  grid-template-areas: 'acc acc acc acc' 'left hero hero right' 'strips strips play play' 'foot foot foot foot'; align-items: center; }
#home .lobby .account { grid-area: acc; justify-self: start; width: min(560px, 100%); }
#home .lobby .lb-left { grid-area: left; } #home .lobby .lb-right { grid-area: right; }
#home .lobby .lb-hero { grid-area: hero; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
#home .lobby .lb-strips { grid-area: strips; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; align-self: end; }
#home .lobby .lb-play { grid-area: play; display: flex; flex-direction: column; align-items: stretch; gap: 8px; justify-self: end; width: min(400px, 100%); align-self: end; }
#home .lobby .lb-foot { grid-area: foot; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#home .lobby .logo { font-size: clamp(30px, 5.4vw, 60px); }
#home .lobby .tag { font-size: 13.5px; }
#home .lobby .stage-wrap { width: 100%; max-width: min(760px, calc((100dvh - 400px) * 2.6)); min-width: 260px; }
#home .lobby .daily-strip { justify-content: flex-start; margin: 0; }

/* atalhos laterais: ícone grande, nome embaixo, selo vermelho quando tem algo esperando */
.lb-side { display: flex; flex-direction: column; gap: 12px; align-items: center; }
button.lb-ic { position: relative; width: 84px; margin: 0; padding: 8px 4px 7px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: linear-gradient(180deg, #2a3242f2, #1c222df2); border: 3px solid #0b0d12; border-radius: 10px; box-shadow: inset 0 2px 0 #ffffff1c, 0 5px 0 #0b0d12;
  color: #fff; transition: transform .12s, filter .15s; }
button.lb-ic:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); }
button.lb-ic:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 0 #ffffff1c, 0 2px 0 #0b0d12; }
button.lb-ic .ic { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: color-mix(in srgb, var(--tc) 28%, #0b0d12); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 60%, transparent); }
button.lb-ic .ic canvas { width: 32px; height: 32px; image-rendering: pixelated; }
button.lb-ic .ic canvas#guildIc { width: 24px; height: 32px; }
button.lb-ic b { font-size: 12px; font-weight: 800; line-height: 1.1; text-align: center; }
button.lb-ic .lb-tip { display: none; }
button.lb-ic .badge { position: absolute; top: -8px; right: -8px; margin: 0; border-radius: 6px; border: 2px solid #0b0d12; }

/* modo escolhido + JOGAR */
button.lb-mode { margin: 0; width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-align: left; color: #fff;
  background: linear-gradient(180deg, #2c3546f2, #1d2430f2); border: 3px solid #0b0d12; border-radius: 10px; box-shadow: inset 0 2px 0 #ffffff1c, 0 4px 0 #0b0d12; }
button.lb-mode:hover:not(:disabled) { filter: brightness(1.12); }
button.lb-mode .ic { flex: none; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #0b0d1288; }
button.lb-mode .ic canvas { width: 30px; height: 30px; image-rendering: pixelated; }
button.lb-mode .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
button.lb-mode .txt small { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
button.lb-mode .txt b { font-family: 'Press Start 2P', monospace; font-size: 13px; margin: 3px 0; }
button.lb-mode .txt i { font-style: normal; font-size: 12px; color: #c3cad6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.lb-mode .chg { flex: none; font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 6px; background: #ffffff14; color: #ffcc00; }
button.lb-go { position: relative; overflow: hidden; margin: 0; width: 100%; padding: 20px 16px; font-family: 'Press Start 2P', monospace; font-size: clamp(22px, 3vw, 30px); letter-spacing: 3px;
  color: #2a1e00; background: linear-gradient(180deg, #ffe27a, #ffbf1a 55%, #ff9a00); border: 3px solid #0b0d12; border-radius: 12px;
  box-shadow: inset 0 4px 0 #fff8, inset 0 -6px 0 #0002, 0 7px 0 #0b0d12, 0 16px 34px #ffb80044; text-shadow: 0 2px 0 #fff6; transition: transform .1s, filter .15s; }
button.lb-go:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
button.lb-go:active:not(:disabled) { transform: translateY(5px); box-shadow: inset 0 4px 0 #fff8, 0 2px 0 #0b0d12; }

/* faixa do evento (compacta) */
button.lb-event { margin: 0; width: auto; display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 8px; color: #fff; text-align: left;
  background: linear-gradient(100deg, #2a1040f2, #5a1a6af2 50%, #c8501af2); border: 3px solid #0b0d12; border-radius: 10px; box-shadow: 0 4px 0 #0b0d12; }
button.lb-event canvas { width: 28px; height: 28px; image-rendering: pixelated; }
button.lb-event span { display: flex; flex-direction: column; line-height: 1.2; } button.lb-event b { font-size: 13px; } button.lb-event small { font-size: 11.5px; opacity: .85; }
button.lb-event em { font-style: normal; font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 6px; background: #ff8a1a; color: #2a0a00; margin-left: 6px; }

/* escolha de modos */
#modesModal .modes-panel { max-width: 640px; width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; }
#modesModal .modes-panel h2 { margin-top: 0; }
#modesModal .modes-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
#modesModal .modes-list .cta-btn.exp, #modesModal .modes-list .cta-btn.event { grid-column: 1 / -1; }
button.cta-btn.quick { background: linear-gradient(135deg, #8fe3ff, #3a8ae0); color: #061a33; box-shadow: inset 0 3px 0 #fff6, inset 0 -4px 0 #0002, 0 6px 0 #0b0d12; }
button.cta-btn.train { background: linear-gradient(135deg, #3a4560, #252d3e); color: #fff; box-shadow: inset 0 3px 0 #fff2, 0 6px 0 #0b0d12; }

/* celular em pé / janela estreita: topo, vitrine, JOGAR e os atalhos numa fileira embaixo */
@media (max-width: 899px) {
  body #home .home.lobby { grid-template-columns: auto auto; justify-content: center; gap: 10px 6px; grid-template-areas: 'acc acc' 'hero hero' 'strips strips' 'play play' 'left right' 'foot foot'; }
  #home .home.lobby > .account, #home .home.lobby > .lb-hero, #home .home.lobby > .lb-strips, #home .home.lobby > .lb-play, #home .home.lobby > .lb-foot { width: min(560px, calc(100vw - 32px)); }
  #home .lobby .account { justify-self: stretch; width: 100%; }
  #home .lobby .lb-play { justify-self: stretch; width: 100%; }
  #home .lobby .lb-strips { align-items: stretch; } #home .lobby .daily-strip { justify-content: center; }
  .lb-side { flex-direction: row; justify-content: center; gap: 6px; }
  #home .lobby .lb-left { justify-self: end; } #home .lobby .lb-right { justify-self: start; }
  button.lb-ic { width: min(62px, calc((100vw - 70px) / 7)); padding: 5px 1px 4px; gap: 3px; border-width: 2px; } button.lb-ic .ic { width: 36px; height: 36px; } button.lb-ic .ic canvas { width: 26px; height: 26px; }
  button.lb-ic b { font-size: 10.5px; }
  #home .lobby .stage-wrap { max-width: 100%; min-width: 0; }
  #modesModal .modes-list { grid-template-columns: 1fr; }
}
/* celular deitado: vitrine baixa para caber tudo */
@media (max-height: 520px) and (min-width: 600px) {
  body #home .home.lobby { grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr) 76px; gap: 8px 12px; }
  button.lb-ic { width: 70px; } button.lb-ic .ic { width: 36px; height: 36px; } button.lb-ic .ic canvas { width: 26px; height: 26px; }
  .lb-side { gap: 6px; }
  #home .lobby .tag { display: none; }
  button.lb-go { padding: 12px; }
}

/* cofrinho do convidado (fim de partida, tela inicial e cadastro) */
.pg-card.cofrinho { align-items: center; gap: 12px; border: 2px solid #ffcc0088; background: linear-gradient(100deg, #3a2c08ee, #1f2633ee 60%); flex-wrap: wrap; }
.pg-card.cofrinho .cof-ic { flex: none; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #0b0d1288; box-shadow: inset 0 0 0 2px #ffcc0066; }
.pg-card.cofrinho .cof-ic .pi { width: 30px; height: 30px; }
.pg-card.cofrinho .grow { min-width: 180px; }
.pg-card.cofrinho b { color: #ffd84a; }
.pg-card.cofrinho .pp-bar { margin: 6px 0 4px; } .pg-card.cofrinho .pp-bar i { background: linear-gradient(90deg, #ffcc00, #ff9a00); }
.pg-card.cofrinho button { flex: none; }
.cof-line { display: block; margin: 3px 0 7px; font-size: 13.5px; color: #ffe9a8; } .cof-line b { color: #ffd84a; }
.r-piggy { display: block; padding: 9px 12px; margin-bottom: 10px; border-radius: 8px; background: #ffcc0018; border: 2px solid #ffcc0066; color: #ffe9a8; font-size: 14px; text-align: left; }
.r-piggy b { color: #ffd84a; }

/* Seus dados: mesmo visual do cadastro (campos com ícone), cabeçalho com ícone e preferência em chave liga/desliga */
#dataForm { width: min(440px, 100%); gap: 0; }
#dataForm .data-head { display: flex; align-items: center; gap: 12px; padding-right: 40px; margin-bottom: 6px; }
#dataForm .data-head h2 { margin: 0; font-family: 'Press Start 2P', monospace; font-size: 16px; }
#dataForm .data-head small { color: var(--muted); font-size: 12.5px; }
#dataForm .dh-ic { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #ffcc0022; box-shadow: inset 0 0 0 2px #ffcc0066; }
#dataForm .dh-ic .pi { width: 28px; height: 28px; }
.data-bonus { display: block; margin: 8px 0 2px; padding: 8px 12px; border-radius: 8px; background: #ffcc0018; border: 2px solid #ffcc0066; color: #ffe9a8; font-size: 13.5px; }
.data-bonus b { color: #ffd84a; }
#dataForm .field { margin: 0; }
#dataForm .acc-fields > label:not(.switch-row) { margin: 10px 0 4px; }
.acc-optin { margin-top: 14px !important; padding: 10px 12px; border-radius: 10px; background: #ffffff08; border: 1px solid #ffffff14; }
#dataForm label.acc-optin, .auth-form label.acc-optin { display: flex; font-size: 14px; color: var(--text); }
.acc-optin > span:last-child { display: flex; flex-direction: column; line-height: 1.3; } .acc-optin small { margin: 2px 0 0 !important; }
#dataForm #dataSave { margin-top: 14px; }
.data-foot { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--muted); } .data-foot a { color: var(--muted); }

/* ===== tela inicial no estilo de lobby clássico (Grand Chase): seu personagem grande na vitrine, os modos em
   botões grandes com nome, e uma barra de menu embaixo com ícone e nome ===== */
body #home .home.gc { max-width: 1240px; width: 100%; margin: 0 auto; display: grid; gap: 14px 22px; text-align: left; align-items: start;
  grid-template-columns: minmax(0, 1.3fr) minmax(330px, 1fr); grid-template-areas: 'top top' 'hero modes' 'dock dock' 'foot foot'; }
#home .gc .gc-top { grid-area: top; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#home .gc .account { margin: 0; width: min(560px, 100%); }
#home .gc .daily-strip { margin: 0; justify-content: flex-start; }
#home .gc .gc-hero { grid-area: hero; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
#home .gc .logo { font-size: clamp(28px, 4.6vw, 54px); }
.gc-show { position: relative; width: 100%; padding-bottom: 18px; }
.gc-show .stage-wrap { width: 100%; }
.gc-show #stage { filter: brightness(.82) saturate(.95); }
/* você, grande, na frente da arena */
button.gc-me { position: absolute; left: 1%; bottom: 0; width: 30%; max-width: 230px; aspect-ratio: 1; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; cursor: pointer; }
button.gc-me:hover { filter: brightness(1.08); transform: none; }
button.gc-me canvas { width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 6px 0 #0008) drop-shadow(0 0 18px #ffcc0030); }
.gc-plate { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); display: flex; align-items: baseline; gap: 6px; white-space: nowrap;
  padding: 4px 10px; border-radius: 8px; background: #0b0d12e8; border: 2px solid #ffcc0088; font-size: 13px; color: #fff; }
.gc-plate b { font-weight: 800; } .gc-plate i { font-style: normal; color: #ffd84a; font-size: 12px; font-weight: 700; }
/* modos: botões grandes, cada um com nome e para que serve */
#home .gc .gc-modes { grid-area: modes; display: flex; flex-direction: column; gap: 12px; }
button.gc-go { position: relative; overflow: hidden; margin: 0; width: 100%; padding: 18px 16px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #2a1e00; background: linear-gradient(180deg, #ffe27a, #ffbf1a 55%, #ff9a00); border: 3px solid #0b0d12; border-radius: 12px;
  box-shadow: inset 0 4px 0 #fff8, inset 0 -6px 0 #0002, 0 7px 0 #0b0d12, 0 16px 34px #ffb80044; transition: transform .1s, filter .15s; }
button.gc-go .gc-go-t { font-family: 'Press Start 2P', monospace; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: 2px; text-shadow: 0 2px 0 #fff6; }
button.gc-go small { font-size: 13px; font-weight: 700; opacity: .8; }
button.gc-go:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
button.gc-go:active:not(:disabled) { transform: translateY(5px); box-shadow: inset 0 4px 0 #fff8, 0 2px 0 #0b0d12; }
button.gc-go::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, transparent, #ffffff70, transparent); transform: skewX(-20deg); animation: shine 3.2s ease-in-out infinite; }
.gc-modes .cta-btn.exp { background: linear-gradient(100deg, #f08a2a, #c86a1c 32%, #2a8a6e 70%, #146058); color: #fff; text-shadow: 0 2px 0 #0005; box-shadow: inset 0 3px 0 #fff4, inset 0 -4px 0 #0003, 0 6px 0 #0b0d12; }
.gc-modes .cta-btn.event { background: linear-gradient(100deg, #2a1040, #5a1a6a 45%, #c8501a); color: #fff; text-shadow: 0 2px 0 #0006; box-shadow: inset 0 3px 0 #fff3, inset 0 -4px 0 #0004, 0 6px 0 #0b0d12; padding-top: 10px; padding-bottom: 10px; }
.gc-modes .exp-hero-art { width: 150px; height: 56px; } .gc-modes .exp-hero-art canvas { width: 145px; height: 50px; }
.gc-modes .event-art { width: 90px; height: 44px; } .gc-modes .event-art canvas { width: 86px; height: 36px; }
.gc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.guest .gc-duo { grid-template-columns: 1fr; }
.gc-duo .cta-btn { padding: 12px; gap: 10px; }
.gc-duo .cta-btn .cta-ic { width: 42px; height: 42px; } .gc-duo .cta-btn .cta-ic canvas { width: 28px; height: 28px; }
.gc-duo .cta-btn b { font-size: clamp(11px, 1.1vw, 14px); }
/* barra de menu embaixo: ícone grande e nome, selo vermelho quando tem algo esperando */
#home .gc .gc-dock { grid-area: dock; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px 12px; border-radius: 14px;
  background: linear-gradient(180deg, #1c2230ee, #12161fee); border: 3px solid #0b0d12; box-shadow: inset 0 2px 0 #ffffff14, 0 6px 0 #0b0d12; }
.gc-dock button.lb-ic { width: 86px; }
#home .gc .lb-foot { grid-area: foot; display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* celular em pé / janela estreita: em coluna, e a barra de menu numa fileira só */
@media (max-width: 899px) {
  body #home .home.gc { grid-template-columns: minmax(0, 1fr); gap: 10px; grid-template-areas: 'top' 'hero' 'modes' 'dock' 'foot'; }
  #home .gc > *, .gc-modes > *, .gc-duo > * { min-width: 0; }
  #home .gc .gc-top { flex-direction: column; align-items: stretch; margin-top: 16px; } #home .gc .account { width: 100%; }
  #home .gc .daily-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  #home .gc .d-chip { padding: 6px 8px; gap: 6px; min-width: 0; } #home .gc .d-chip b { font-size: 12px; } #home .gc .d-chip small { font-size: 11px; }
  button.gc-me { width: 34%; }
  #home .gc .gc-dock { gap: 4px; padding: 8px 6px; flex-wrap: nowrap; }
  .gc-dock button.lb-ic { flex: 1; min-width: 0; width: auto; padding: 5px 1px 4px; gap: 3px; border-width: 2px; }
  .gc-dock button.lb-ic .ic { width: 34px; height: 34px; } .gc-dock button.lb-ic .ic canvas { width: 24px; height: 24px; }
  .gc-dock button.lb-ic b { font-size: 10px; }
}
@media (max-width: 420px) { .gc-duo .cta-btn .cta-txt small { display: none; } }
/* celular deitado: pouca altura. Vitrine à esquerda e os modos à direita, tudo na primeira tela sem rolar */
@media (orientation: landscape) and (max-height: 520px) {
  body #home .home.gc { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 8px 12px; grid-template-areas: 'top top' 'hero modes' 'dock dock' 'foot foot'; padding-right: 0; }
  #home .gc .gc-top { flex-direction: row; align-items: stretch; margin-top: 0; gap: 8px; padding-right: 200px; } /* deixa o canto dos botões de som/tela cheia livre */
  #home .gc .account { width: auto; flex: 1 1 0; min-width: 0; padding: 6px 10px; }
  #home .gc .account .acc-level { display: none; } /* o nível já aparece no selo do avatar */
  #home .gc .daily-strip { flex: 1 1 0; display: grid; grid-template-columns: 1fr; gap: 4px; }
  #home .gc .d-chip { padding: 4px 8px; }
  #home .gc .logo-row { display: none; }
  .gc-show { padding-bottom: 12px; }
  button.gc-me { width: 32%; }
  #home .gc .gc-modes { gap: 8px; }
  button.gc-go { padding: 10px 12px 9px; gap: 3px; } button.gc-go .gc-go-t { font-size: 18px; } button.gc-go small { font-size: 11px; }
  .gc-modes .cta-btn { padding-top: 6px; padding-bottom: 6px; }
  .gc-modes .exp-hero-art { width: 110px; height: 40px; } .gc-modes .exp-hero-art canvas { width: 106px; height: 36px; }
  .gc-duo { gap: 8px; } .gc-duo .cta-btn { padding: 8px; } .gc-duo .cta-btn .cta-ic { width: 34px; height: 34px; }
  #home .gc .gc-dock { gap: 4px; padding: 6px; flex-wrap: nowrap; }
  .gc-dock button.lb-ic { flex: 1; min-width: 0; width: auto; padding: 4px 1px 3px; gap: 2px; border-width: 2px; }
  .gc-dock button.lb-ic .ic { width: 30px; height: 30px; } .gc-dock button.lb-ic .ic canvas { width: 22px; height: 22px; }
  .gc-dock button.lb-ic b { font-size: 10px; }
}

/* tela "Seu nível": vitrine dos poderes (lista ao lado, prévia animada grande e o que cada um faz) */
.pw-show { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
.pw-list { display: flex; flex-direction: column; gap: 6px; }
button.pw-item { margin: 0; width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; text-align: left; color: var(--text);
  background: var(--field); border: 2px solid #ffffff10; border-radius: 10px; box-shadow: none; }
button.pw-item:hover:not(:disabled) { filter: brightness(1.15); transform: none; }
button.pw-item .pw-ic { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #0b0d1266; }
button.pw-item .pw-ic canvas { width: 26px; height: 26px; image-rendering: pixelated; }
button.pw-item .pw-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
button.pw-item b { font-size: 13.5px; } button.pw-item small { font-size: 11.5px; color: var(--muted); }
button.pw-item.locked .pw-ic canvas { filter: grayscale(.8) brightness(.7); }
button.pw-item.mine small { color: #8ff0b8; }
button.pw-item.on { border-color: #ffd23f; background: linear-gradient(90deg, #3a3418, var(--field)); }
.pw-stage { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pw-prev { position: relative; border-radius: 10px; padding: 4px; background: #0b0d12; box-shadow: 0 0 0 3px #ffcc00aa, 0 6px 0 #0b0d12; }
.pw-prev canvas { display: block; width: 100%; aspect-ratio: 9 / 5; image-rendering: pixelated; border-radius: 6px; }
.pw-prev-tag { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: #000b; color: #ffd84a; }
.pw-info h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-family: 'Press Start 2P', monospace; font-size: 14px; }
.pw-info h4 .pw-ic canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.pw-info p { margin: 0 0 8px; color: #d4dae4; font-size: 14px; line-height: 1.45; }
.pw-tags { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; margin-bottom: 10px; }
.pw-tags span { display: flex; flex-direction: column; padding: 6px 9px; border-radius: 8px; background: var(--field); line-height: 1.25; }
.pw-tags small { font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .pw-tags b { font-size: 13px; }
button.pw-choose { margin: 0; width: 100%; }
.pw-mine { padding: 9px 12px; border-radius: 10px; background: #14301e; border: 2px solid #3ddc8466; color: #b8f5d0; font-size: 13.5px; font-weight: 700; }
.pw-locked { padding: 9px 12px; border-radius: 10px; background: var(--field); border: 2px dashed #ffffff22; color: var(--muted); font-size: 13.5px; font-weight: 700; }
@media (max-width: 640px) {
  .pw-show { grid-template-columns: 1fr; }
  .pw-list { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  button.pw-item { flex: none; width: auto; flex-direction: column; gap: 3px; padding: 6px 8px; text-align: center; }
  button.pw-item .pw-tx small { display: none; } button.pw-item b { font-size: 11px; }
}
#levels .panel { max-width: 860px; } /* espaço para a prévia dos poderes */

/* seletor de idioma (painel de som) */
#volPanel .lang-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
#volPanel .lang-row span { flex: 1 1 100%; }
#audio #volPanel .lang-row button { width: auto; height: 26px; padding: 0 10px; font-size: 12px; font-weight: 700; }
.lang-note { margin: 0 0 8px; font-size: 12px; color: var(--muted); text-align: center; }
#audio #volPanel .lang-row button.on { background: var(--accent); color: #2a1e00; }

/* trava do convidado: convite para criar a conta depois das partidas grátis */
#guestWallModal { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; padding: 14px; background: #000c; animation: pgfade .2s ease-out; }
#guestWallModal.hidden { display: none; }
.gw-box { text-align: center; gap: 8px; border-color: #ffcc00; box-shadow: 0 0 0 2px #0b0d12, 0 0 40px #ffcc0033; }
.gw-box h2 { margin: 2px 0 0; font-size: 18px; color: var(--accent); }
.gw-box p { margin: 0; color: #d8dce6; font-size: 14px; }
.gw-art canvas { width: 72px; height: 72px; image-rendering: pixelated; }
.gw-list { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.gw-list li { display: flex; align-items: center; gap: 10px; background: var(--field); border-radius: 10px; padding: 8px 10px; font-size: 13px; font-weight: 700; }
.gw-list .pi { width: 20px; height: 20px; flex: none; }
.gw-box button { margin: 0; }
button.gw-go { font-size: 16px; padding: 14px; background: linear-gradient(180deg, #ffe27a, #ffbf1a 55%, #ff9a00); color: #2a1e00; }
.gw-foot { color: var(--muted); font-size: 12px; }
.gw-box { overflow-y: auto; }
@media (orientation: landscape) and (max-height: 520px) {
  .gw-art { display: none; } .gw-box { padding: 12px 14px; gap: 6px; } .gw-box h2 { font-size: 14px; } .gw-box p { font-size: 12px; }
  .gw-list { flex-direction: row; } .gw-list li { flex: 1; font-size: 11px; padding: 6px 8px; gap: 6px; }
  button.gw-go { padding: 10px; font-size: 14px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* plaquinha da vitrine: no convidado o texto é longo; não deixa sair pela borda esquerda */
.gc-plate { width: max-content; }
body.guest .gc-plate { left: 0; transform: none; }

/* iPhone instalado na tela de início (tela cheia por baixo do relógio e do entalhe): respeita as áreas seguras */
#game { box-sizing: border-box; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
#quitBtn { top: calc(env(safe-area-inset-top, 0px) + 6px); left: calc(env(safe-area-inset-left, 0px) + 8px); }
#emoteBtn { top: calc(env(safe-area-inset-top, 0px) + 6px); left: calc(env(safe-area-inset-left, 0px) + 92px); }
body.touch-land #emoteBtn { left: calc(env(safe-area-inset-left, 0px) + 74px); }
#audio { top: calc(env(safe-area-inset-top, 0px) + 6px); right: calc(env(safe-area-inset-right, 0px) + 8px); }
.screen { padding-top: calc(env(safe-area-inset-top, 0px) + 50px); }
@media (max-height: 520px) { .screen { padding-top: calc(env(safe-area-inset-top, 0px) + 46px); } }
/* os cartões da barra de cima nunca esticam na altura */
#hud { flex: none; align-items: flex-start; align-content: flex-start; }
/* loja: o compromisso de só vender visual fica sempre à vista */
.shop-fair { margin: 0 0 8px; padding: 6px 10px; border-radius: 10px; background: #1fbf5a1a; border: 1px solid #1fbf5a55; color: #c8f0d4; font-size: 12.5px; text-align: center; }
.shop-fair b { color: #9af0b8; }
.notes-dc { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: #5865f222; border: 1px solid #7289ff66; color: #d6dcff; font-size: 13px; font-weight: 700; text-decoration: none; }
.notes-dc:hover { background: #5865f244; } .notes-dc canvas { width: 22px; height: 22px; flex: none; }

/* painel do balão na partida: abas Emotes / Frases; emotes em grade, animados no próprio botão */
#emotePanel .ep-tabs { grid-column: 1 / -1; display: flex; gap: 4px; }
#emotePanel .ep-tabs button { flex: 1; min-width: 0; text-align: center; padding: 5px 8px; font-size: 12px; font-weight: 800; background: #1a2030; color: var(--muted); }
#emotePanel .ep-tabs button.on { background: #ffcc00; color: #241c00; border-color: #ffcc00; }
#emotePanel .ep-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 52px); gap: 4px; justify-content: center; }
#emotePanel .ep-grid button { min-width: 0; width: 52px; height: 52px; padding: 4px; display: flex; align-items: center; justify-content: center; }
#emotePanel .ep-grid canvas { width: 40px; height: 40px; image-rendering: pixelated; }
#emotePanel .ep-more { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 11px; }

/* configurações (engrenagem) */
#cfgModal { position: fixed; inset: 0; z-index: 42; display: flex; align-items: center; justify-content: center; padding: 14px; background: #000b; animation: pgfade .2s ease-out; }
#cfgModal.hidden { display: none; }
.cfg-box { gap: 4px; overflow-y: auto; }
.cfg-sec { margin: 6px 0; padding: 10px 12px; border-radius: 12px; background: #ffffff08; border: 1px solid #ffffff12; }
.cfg-sec h4 { margin: 0 0 8px; font: 400 10px 'Press Start 2P', monospace; color: var(--accent); }
.cfg-sec .seg { margin: 0; } .cfg-sec > button { margin: 0; width: 100%; }
.cfg-note { display: block; margin-top: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.cfg-lang { display: flex; gap: 6px; } .cfg-lang button { flex: 1; margin: 0; }
.cfg-lang button.sec.on { background: var(--accent); color: #2a1e00; }
#cfgBtn canvas { width: 20px; height: 20px; image-rendering: pixelated; }
/* na partida o canto fica com 4 botões: a engrenagem toma o lugar do "Fale com a gente" */
body.in-game #fbBtn { display: none; }
/* gráfico baixo: animações de enfeite rodam uma vez só e param (botões que brilham, pulsos...) */
body.gfx-low *, body.gfx-low *::before, body.gfx-low *::after { animation-iteration-count: 1 !important; }
body.gfx-low .gc-go::after { display: none; }
/* loja no celular: 6 abas cabem com menos espaço */
@media (max-width: 480px) { .shop-tabs button { padding: 6px 8px; font-size: 12.5px; } }
/* som dentro das configurações (antes era um painel separado no botão de volume) */
.cfg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cfg-head h4 { margin: 0; }
.cfg-head button { width: auto; margin: 0; padding: 5px 10px; font-size: 12px; display: flex; align-items: center; gap: 5px; }
.cfg-sound label:not(.cfg-check) { display: grid; grid-template-columns: 96px 1fr 30px; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13px; color: var(--text); }
.cfg-sound label span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.cfg-sound input[type=range] { width: 100%; margin: 0; padding: 0; accent-color: var(--accent); background: transparent; border: 0; height: 24px; }
.cfg-sound label b { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.cfg-sound .volHint { display: block; margin: 4px 0 6px; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.cfg-check { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 12.5px; color: var(--text); }
.cfg-check input { width: auto; margin: 0; }
.cfg-check span { white-space: normal; line-height: 1.35; }
/* celular deitado: duas colunas (gráficos e idioma à esquerda, som à direita), sem precisar rolar */
@media (orientation: landscape) and (max-height: 520px) {
  .inv-box.cfg-box { width: min(780px, 100%); display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; align-content: start; padding: 10px 14px; }
  .cfg-box > h2, .cfg-box > #cfgOk, .cfg-box > .pm-x { grid-column: 1 / -1; }
  .cfg-box > h2 { margin: 0 0 14px; font-size: 15px; }
  .cfg-box > .cfg-sound { grid-column: 2; grid-row: 2 / span 2; }
  .cfg-box > #cfgOk { padding: 9px; }
  .cfg-sec { margin: 4px 0; padding: 8px 10px; }
}
/* idioma por bandeira (pixel art) */
.cfg-lang button canvas { width: 40px; height: 40px; image-rendering: pixelated; display: block; margin: 0 auto; }
.cfg-lang button { padding: 4px 10px; }
.cfg-lang button.sec:not(.on) canvas { opacity: .55; }
#langLink { display: inline-flex; vertical-align: middle; text-decoration: none; }
#langLink .lang-flag { width: 26px; height: 26px; image-rendering: pixelated; }
#cfgModal .cfg-sound label.cfg-check { display: flex; align-items: flex-start; } #cfgModal .cfg-check span { white-space: normal !important; min-width: 0; }
#langLink, #langLink:hover { text-decoration: none !important; border: 0; }

/* denunciar jogador */
#reportModal { position: fixed; inset: 0; z-index: 46; display: flex; align-items: center; justify-content: center; padding: 14px; background: #000c; }
#reportModal.hidden { display: none; }
.rp-box { gap: 8px; } .rp-box h2 { margin: 0; } .rp-who { margin: 0; color: var(--muted); font-size: 14px; } .rp-who b { color: var(--text); }
.rp-reasons { display: flex; flex-direction: column; gap: 6px; }
.rp-reasons label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--field); font-size: 14px; cursor: pointer; }
.rp-reasons input { width: auto; margin: 0; }
.rp-box textarea { width: 100%; margin: 0; } .rp-box > button { margin: 0; }
.rp-note { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
/* som: fica só nas configurações (os botões do canto eram duplicados) */
#musicBtn, #muteBtn { display: none !important; }
.cfg-admin { display: block; text-align: center; padding: 10px; border-radius: 10px; background: #ffd23f22; border: 1px solid #ffd23f66; color: #ffd23f; font-weight: 800; text-decoration: none; }
#reportModal .rp-who, #reportModal .rp-who b, #reportModal .rp-note, #reportModal .rp-reasons span { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0; text-shadow: none; }
#reportModal .rp-who { font-size: 14px; } #reportModal .rp-who b { font-size: 15px; font-weight: 800; }
#reportModal .rp-note { font-size: 11.5px; font-weight: 500; line-height: 1.35; text-align: left; }
#reportModal .rp-reasons label { justify-content: flex-start; text-align: left; }
@media (orientation: landscape) and (max-height: 520px) { .cfg-box > #cfgAdmin { grid-column: 2; } .cfg-admin { padding: 7px; } }
@media (orientation: landscape) and (max-height: 520px) {
  .cfg-box > .cfg-sound { grid-row: 2 / span 3; }
  .cfg-box > #cfgAdmin { grid-column: 1; grid-row: 4; padding: 6px 10px; } .cfg-box > #cfgAdmin h4 { display: none; }
}
/* emotes com o número da tecla no canto */
#emotePanel .ep-grid button { position: relative; }
#emotePanel .ep-grid kbd { position: absolute; top: 2px; left: 3px; font: 700 10px system-ui; color: #fff; background: #0b0d12cc; border-radius: 4px; padding: 0 4px; line-height: 14px; }
@media (pointer: coarse) { #emotePanel .ep-grid kbd { display: none; } }

/* atalhos de emote (1 a 9) */
#emotePanel .ep-edit { grid-column: 1 / -1; min-width: 0; text-align: center; font-size: 12px; padding: 6px 8px; background: #1a2030; color: var(--accent); }
.es-open { grid-column: 1 / -1; width: 100%; margin: 0 0 8px; }
#emoteSlotsModal { position: fixed; inset: 0; z-index: 46; display: flex; align-items: center; justify-content: center; padding: 14px; background: #000c; }
#emoteSlotsModal.hidden { display: none; }
.es-box { gap: 8px; overflow-y: auto; width: min(460px, 100%); } .es-box h2 { margin: 0; }
.es-hint { margin: 0; color: var(--muted); font-size: 13px; }
.es-sub { margin: 4px 0 0; font: 400 10px 'Press Start 2P', monospace; color: var(--accent); }
.es-slots { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
button.es-slot { position: relative; margin: 0; padding: 0; aspect-ratio: 1; min-width: 0; display: flex; align-items: center; justify-content: center; background: #232b3a; border: 2px solid #0b0d12; border-radius: 8px; box-shadow: none; }
button.es-slot.empty { background: #161b26; border-style: dashed; border-color: #ffffff22; }
button.es-slot.sel { border-color: var(--accent); box-shadow: 0 0 0 2px #ffcc0055; }
button.es-slot canvas { width: 72%; height: 72%; image-rendering: pixelated; }
button.es-slot kbd { position: absolute; top: 1px; left: 3px; font: 700 10px system-ui; color: var(--muted); }
.es-x { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: #e8322a; color: #fff; font: 700 9px/16px system-ui; font-style: normal; text-align: center; }
.es-all { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
button.es-emo { margin: 0; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: #232b3a; border: 2px solid #0b0d12; border-radius: 8px; box-shadow: none; color: var(--text); }
button.es-emo canvas { width: 36px; height: 36px; image-rendering: pixelated; }
button.es-emo small { font-size: 10px; line-height: 1.15; text-align: center; color: var(--muted); }
button.es-emo.used { opacity: .45; }
.es-box > button[data-es="save"] { margin: 0; }
@media (orientation: landscape) and (max-height: 520px) { .es-box { width: min(720px, 100%); padding: 10px 14px; } .es-all { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); } button.es-emo canvas { width: 28px; height: 28px; } }
.es-box h2 { color: #fff; }
/* atalhos de emote dentro da tela Visual */
#cosGrid:has(.es-inline) { display: block; }
.es-inline { display: flex; flex-direction: column; gap: 8px; }
.es-inline > button[data-es="save"] { margin: 0; }
/* atalhos de emote na tela Visual: ocupa a largura toda e cresce com o conteúdo */
#visual #cosGrid:has(.es-inline) { display: block !important; overflow-y: auto; scroll-snap-type: none; }
#visual .es-inline .es-slots { gap: 6px; }
#visual .es-inline button.es-slot { min-height: 34px; }
#visual .es-inline .es-all { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
/* grupos da coleção: cabem numa fileira com quebra, sem cortar */
@media (max-width: 520px) { #visual .cos-groups button { padding: 6px 8px; font-size: 12px; } #visual .cos-groups button small { font-size: 10px; } }
.es-summary { display: flex; flex-direction: column; gap: 8px; }
.es-summary .es-slots { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.es-summary div.es-slot { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: #232b3a; border: 2px solid #0b0d12; border-radius: 8px; }
.es-summary div.es-slot.empty { background: #161b26; border-style: dashed; border-color: #ffffff22; }
.es-summary div.es-slot canvas { width: 72%; height: 72%; image-rendering: pixelated; }
.es-summary div.es-slot kbd { position: absolute; top: 1px; left: 3px; font: 700 10px system-ui; color: var(--muted); }
.es-summary > button { margin: 0; }
#visual #cosGrid:has(.es-summary) { display: block !important; } .es-summary { width: 100%; padding-bottom: 70px; }

/* sala: botão principal grande no rodapé, emotes na sala e completar com bots */
.lobby-bar #readyBtn.big-play { min-width: 220px; font-size: 18px; padding: 14px 26px; background: linear-gradient(180deg, #ffe27a, #ffbf1a 55%, #ff9a00); color: #2a1e00; border: 3px solid #0b0d12; box-shadow: inset 0 3px 0 #fff8, 0 5px 0 #0b0d12; }
.lobby-bar #readyBtn.big-play.on { background: linear-gradient(180deg, #8ff0b8, #2fbf6a); color: #062a14; font-size: 14px; }
#fillBotsBtn { width: auto; }
.lobby-emotes { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 6px 0 2px; }
.lobby-emotes .le-t { font-size: 12px; font-weight: 800; color: var(--muted); margin-right: 4px; text-transform: uppercase; letter-spacing: .04em; }
.lobby-emotes button { width: 40px; height: 40px; margin: 0; padding: 4px; background: #232b3a; border: 2px solid #0b0d12; border-radius: 8px; box-shadow: none; }
.lobby-emotes button:active { transform: scale(.92); }
.lobby-emotes canvas { width: 100%; height: 100%; image-rendering: pixelated; }
#plist li { position: relative; }
#plist .lemo { position: absolute; left: 30px; top: -10px; width: 34px; height: 34px; image-rendering: pixelated; z-index: 2; animation: lemoPop .35s cubic-bezier(.2, 1.6, .4, 1); pointer-events: none; }
#plist .lemo-txt { position: absolute; left: 34px; top: -12px; z-index: 2; background: #fff; color: #1a1020; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 10px; border: 2px solid #1a1020; animation: lemoPop .35s cubic-bezier(.2, 1.6, .4, 1); pointer-events: none; white-space: nowrap; }
@keyframes lemoPop { from { transform: scale(.3) translateY(8px); opacity: 0; } }
/* faixa da sala rápida: só explica (o botão é o Jogar do rodapé) */
.quick-banner .qb-txt small { display: block; }
.room-filter { margin: 4px 0 8px; } .room-filter button { flex: 1; }
.lobby-emotes { flex-wrap: nowrap; overflow-x: auto; }
.lobby-emotes button { width: 34px; height: 34px; flex: none; padding: 3px; }
#fillBotsBtn { padding: 8px 12px; font-size: 13px; }

/* ===== saguão (Jogar): abas Amistoso / Ranqueada / Expedição ===== */
#rooms .panel.play-panel { max-width: 640px; }
.play-panel h2 { margin-bottom: 10px; }
.play-tabs { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 4px 0 12px; }
.play-tabs button { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 6px; font-size: 15px; }
.play-tabs .pt-n { font-style: normal; font-size: 11px; min-width: 18px; padding: 1px 5px; border-radius: 9px; background: #3ddc84; color: #04210f; font-weight: 800; }
.play-tabs .pt-n:empty { display: none; }
.play-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.play-body:has(.play-chat:not(.hidden)) { grid-template-columns: minmax(0, 1fr) 260px; }
.play-chat { background: #0b0e1699; border: 1px solid #ffffff14; border-radius: 12px; min-height: 240px; }
.ptab.hidden { display: none; }
.ptab .queues { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .ptab .queues { grid-template-columns: 1fr; } }
.play-more { width: 100%; margin: 10px 0 0; }
.play-note { text-align: center; padding: 18px 12px; background: var(--field); border-radius: 12px; }
.play-note b { display: block; font-size: 16px; margin-bottom: 4px; } .play-note p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.play-note button { margin: 0; }
.exp-play-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: linear-gradient(100deg, #6a3d12, #1c5a4c); margin-bottom: 8px; }
.exp-play-head .eph-txt { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .exp-play-head .eph-txt small { color: #e8e4f0; opacity: .85; }
.exp-play-head .play-note { flex: 1 1 100%; background: none; padding: 4px; }
button.big-go { margin: 0; width: auto; padding: 12px 20px; background: linear-gradient(180deg, #ffe27a, #ffbf1a 55%, #ff9a00); color: #2a1e00; border: 3px solid #0b0d12; box-shadow: inset 0 3px 0 #fff8, 0 4px 0 #0b0d12; }
/* cartão de sala com prévia do mapa */
.room-thumb { flex: none; width: 56px; height: 42px; border-radius: 8px; overflow: hidden; background: #0b0d12; display: flex; align-items: center; justify-content: center; }
.room-thumb canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.room-thumb.rnd { font: 400 18px 'Press Start 2P', monospace; color: var(--accent); }
.room-thumb.exp { background: #6a3d12; } .room-thumb.exp canvas { width: 28px; height: 28px; }
/* tela inicial: só o botão Jogar, o evento e o menu (os atalhos antigos ficam escondidos; o código ainda usa eles) */
.gc-modes.simple > .gc-duo { display: none; } /* Amistoso e Ranqueada agora são abas do saguão; Expedição e evento ficam na tela inicial, um embaixo do outro */
@media (max-width: 560px) {
  .play-panel .quick-actions { grid-template-columns: 1fr; }
  .play-tabs button { padding: 10px 2px; font-size: 13.5px; gap: 4px; }
  .play-tabs .pt-n { font-size: 10px; min-width: 16px; padding: 1px 4px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  #rooms .panel.play-panel { max-width: 760px; padding: 10px 14px; }
  .play-panel h2 { display: none; }
  .play-panel .me-line { display: none; }
  .play-tabs { margin: 0 0 8px; } .play-tabs button { padding: 8px 4px; }
}

/* convites recebidos: cartões que ficam na tela (90 s) */
#inviteTray { position: fixed; top: 58px; left: 50%; transform: translateX(-50%); width: min(440px, calc(100vw - 20px)); z-index: 44; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
#inviteTray.hidden { display: none; }
.inv-card { position: relative; overflow: hidden; pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(100deg, #17301f, #1b2433 70%); border: 2px solid #3ddc84; box-shadow: 0 10px 28px #000a; animation: invIn .3s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes invIn { from { transform: translateY(-16px) scale(.94); opacity: 0; } }
.inv-card > .pi { width: 26px; height: 26px; flex: none; }
.inv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; line-height: 1.25; }
.inv-txt small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-card button { margin: 0; width: auto; flex: none; padding: 8px 14px; }
.inv-card button.sec { padding: 8px 10px; }
.inv-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: #3ddc84; transition: width 1s linear; }
@media (orientation: landscape) and (max-height: 520px) { #inviteTray { top: 8px; left: 8px; transform: none; width: 340px; } }

/* ===== chat (sala de espera e saguão) ===== */
.chatbox { display: flex; flex-direction: column; gap: 6px; background: #0b0e1699; border: 1px solid #ffffff14; border-radius: 12px; padding: 8px 10px; min-width: 0; }
#lobbyChat { margin-top: 8px; }
body.chat-off .chatbox, body.chat-off #lobbyChat { display: none; }
.ch-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ch-head b { font: 400 9px 'Press Start 2P', monospace; color: var(--accent); }
.ch-err { color: #ff9a9a; font-size: 11.5px; text-align: right; }
.ch-list { height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; line-height: 1.35; overscroll-behavior: contain; padding-right: 2px; }
.play-chat .ch-list { height: 220px; }
.cm { word-break: break-word; }
.cm-n { font-weight: 800; color: #9ad0ff; cursor: pointer; } .cm.me .cm-n { color: var(--accent); }
.cm-lv { font-style: normal; font-size: 10px; font-weight: 800; background: #5a3ad0; color: #fff; border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
.cm-x { color: var(--text); }
.cm-act { display: inline-flex; gap: 6px; margin-left: 6px; }
.cm-act button { width: auto; margin: 0; padding: 2px 8px; font-size: 11.5px; background: #232b3a; border: 1px solid #ffffff22; border-radius: 6px; box-shadow: none; }
.cm-empty { color: var(--muted); font-size: 12.5px; padding: 6px 0; }
.ch-form { display: flex; gap: 6px; margin: 0; }
.ch-in { flex: 1; min-width: 0; margin: 0; padding: 8px 10px; font-size: 14px; }
.ch-send { width: auto; margin: 0; padding: 8px 14px; font-size: 13px; }
.chatbox .gm-badge { font-size: .6em; }
/* saguão: o chat fica ao lado da lista (tela larga) ou embaixo dela (celular) */
#rooms .panel.play-panel:has(.play-chat:not(.hidden)) { max-width: 940px; }
@media (max-width: 760px) { .play-body:has(.play-chat:not(.hidden)) { grid-template-columns: minmax(0, 1fr); } .play-chat .ch-list { height: 150px; } }
@media (orientation: landscape) and (max-height: 520px) { .ch-list { height: 90px; } .play-chat .ch-list { height: 130px; } }
/* sala de espera: o conteúdo rola por dentro e o rodapé com o botão Jogar/Começar fica sempre à vista */
.lobby-grid { max-height: calc(100dvh - 190px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
#lobbyChat .ch-list { height: 110px; }
.lobby-emotes button { width: 30px; height: 30px; padding: 2px; }
@media (max-width: 760px) { .lobby-grid { max-height: none; overflow: visible; } }
/* saguão: o corpo (listas e chat) rola dentro do painel */
.play-panel .play-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.play-panel .play-chat { min-height: 0; }
.ch-list { flex: 0 0 auto; }

/* conversa privada com amigo */
#dmModal { position: fixed; inset: 0; z-index: 46; display: flex; align-items: center; justify-content: center; padding: 14px; background: #000b; }
#dmModal.hidden { display: none; }
.dm-box { width: min(420px, 100%); gap: 6px; }
.dm-box .chatbox { background: none; border: 0; padding: 0; }
.dm-box .ch-list { height: 280px; }
.dm-box .ch-head { padding-right: 36px; }
.dm-n { font-style: normal; background: #e8322a; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; margin-left: 4px; }

/* ===== tela inicial no PC: tudo encaixado nas mesmas duas colunas (conta e faixas em cima, vitrine e modos no meio, menu e rodapé na largura toda) ===== */
@media (min-width: 900px) and (min-height: 521px) {
  body #home .home.gc { max-width: 1320px; grid-template-columns: minmax(0, 1.3fr) minmax(360px, 1fr); }
  #home .gc .gc-top { display: grid; grid-template-columns: subgrid; column-gap: 22px; align-items: stretch; flex-wrap: nowrap; }
  #home .gc .account { width: 100%; grid-area: auto; grid-column: 1; grid-row: 1; }
  #home .gc .daily-strip { grid-area: auto; grid-column: 2; grid-row: 1; display: flex; flex-wrap: nowrap; gap: 10px; align-items: stretch; justify-content: stretch; }
  #home .gc .daily-strip > * { flex: 1 1 0; min-width: 0; margin: 0; }
  /* a coluna dos modos acompanha a altura da vitrine: o fim dos botões fica alinhado com o fim da arena */
  body #home .home.gc { align-items: stretch; }
  #home .gc .gc-modes { justify-content: stretch; padding-bottom: 18px; }
  #home .gc .gc-modes > button { flex: 1 1 0; margin: 0; }
  #home .gc .gc-modes > button.gc-go { flex: 1.5 1 0; justify-content: center; }
  /* menu: oito botões dividem a largura toda */
  #home .gc .gc-dock { justify-content: stretch; flex-wrap: nowrap; }
  .gc-dock button.lb-ic { flex: 1 1 0; width: auto; min-width: 0; }
}

/* ===== sala de espera organizada: sala / conversa / visual e mapa ===== */
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mode-pick button { white-space: nowrap; font-size: 13px; padding: 9px 4px; }
#plist .empty-slot { padding: 5px 10px; } #plist .ghost-slot { width: 30px; height: 30px; }
.bot-box { gap: 6px; } .bot-box button { margin: 0; width: auto; padding: 8px 12px; font-size: 13px; }
.bot-box .chips { flex-basis: 100%; }
.lc-chat #lobbyChat { margin-top: 0; }
.lc-chat .lobby-emotes { margin-top: 8px; }
@media (min-width: 761px) and (max-width: 1099px) {
  .lobby-grid { grid-template-areas: 'room look' 'chat look'; grid-template-rows: auto 1fr; }
  .lc-room { grid-area: room; } .lc-chat { grid-area: chat; } .lc-look { grid-area: look; }
}
@media (min-width: 1100px) {
  .lobby-panel { max-width: 1240px; }
  .lobby-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; max-height: none; height: calc(100dvh - 300px); min-height: 280px; overflow: hidden; padding-right: 0; }
  .lobby-col { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding-right: 6px; }
  /* conversa ocupa a coluna do meio inteira: a caixa de escrever fica sempre embaixo, à vista */
  .lc-chat { display: flex; flex-direction: column; }
  .lc-chat #lobbyChat { flex: 1 1 auto; min-height: 0; display: flex; }
  .lc-chat .chatbox { flex: 1 1 auto; min-height: 0; width: 100%; }
  .lc-chat .ch-list { flex: 1 1 0; height: auto; min-height: 0; }
  .lc-chat .lobby-emotes { flex: none; flex-wrap: wrap; }
  .lc-chat .lobby-emotes button { width: 36px; height: 36px; }
}
#teamBtn { margin: 6px 0 0; padding: 8px 10px; font-size: 13px; }
.lc-chat .lobby-emotes { overflow: visible; }

/* ===== tela inicial no PC, versão final: logo no alto, e abaixo vitrine e botões dos modos começando na mesma linha ===== */
@media (min-width: 900px) and (min-height: 521px) {
  body #home .home.gc { grid-template-areas: 'top top' 'logo logo' 'hero modes' 'dock dock' 'foot foot'; align-items: start; row-gap: 12px; }
  #home .gc .gc-hero { display: contents; }
  #home .gc .logo-row { grid-area: logo; justify-content: center; }
  #home .gc .gc-show { grid-area: hero; }
  #home .gc .gc-modes { align-self: start; justify-content: flex-start; gap: 10px; padding-bottom: 0; }
  #home .gc .gc-modes > button, #home .gc .gc-modes > button.gc-go { flex: 0 0 auto; }
  button.gc-go { padding: 12px 16px 10px; gap: 3px; } button.gc-go .gc-go-t { font-size: clamp(18px, 1.8vw, 24px); } button.gc-go small { font-size: 12.5px; }
  .gc-modes .cta-btn { padding-top: 9px; padding-bottom: 9px; }
}

/* fim de partida: compartilhar, clipe e replay juntos num botão que abre uma lista */
.pg-more { position: relative; display: inline-block; }
.pg-pop { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; display: flex; flex-direction: column; gap: 6px; min-width: 250px; padding: 8px; background: #1a2030; border: 1px solid #ffffff22; border-radius: 14px; box-shadow: 0 12px 30px #000a; }
.pg-pop.hidden { display: none; }
.pg-pop button { width: 100%; margin: 0; padding: 11px 14px; text-align: left; white-space: nowrap; }
body.touch .pg-more { flex: 0 0 auto; }
body.touch .pg-pop { right: 0; }
/* avisos ficam por cima das janelas (compartilhar, replay...): antes "Copiado!" aparecia escondido atrás delas */
.toast { z-index: 80; }
.sh-price .brl, .buy-prem .brl { font-size: 11px; font-weight: 700; opacity: .75; margin-left: 6px; color: var(--text-dim, #c9b99a); }
.buy-prem .brl { display: block; margin: 2px 0 0; color: inherit; }
/* aviso fixo: você está numa sala e abriu outro menu */
.room-chip { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 2px solid #ffcc00; background: #1d2230; color: #fff; font: 700 14px system-ui; box-shadow: 0 6px 22px rgba(0,0,0,.5); cursor: pointer; animation: chipPop .35s ease-out; }
.room-chip b { color: #ffcc00; letter-spacing: 1px; }
.room-chip em { font-style: normal; background: #ffcc00; color: #241c00; border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.room-chip canvas { width: 16px; height: 16px; image-rendering: pixelated; }
.room-chip:hover { background: #262c40; }
@keyframes chipPop { from { transform: translate(-50%, 20px); opacity: 0; } }
/* perfil no celular (ou tela baixa): o conteúdo todo rola dentro do painel e o Voltar fica sempre visível embaixo; as abas cabem na largura */
@media (max-width: 640px), (max-height: 720px) {
  #visual .panel.wide { overflow: hidden; }
  #visual #visualMain { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; min-height: 0; touch-action: pan-y; }
  #visual .cos-grid.scroll-y { overflow: visible; min-height: 0; flex: none; mask-image: none; -webkit-mask-image: none; padding-bottom: 8px; }
  #visual .cos-tabs { overflow: visible; }
  #visual .cos-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #visual .cos-groups button { flex-direction: column; gap: 0; padding: 6px 4px; min-width: 0; }
  #visual .cos-slots button { flex: 1 0 auto; min-width: 0; }
  #visual .panel.wide > .back { flex: none; margin-top: 8px; position: relative; z-index: 2; }
  #visual .profile-card { flex-direction: column; align-items: stretch; text-align: center; gap: 8px; padding: 10px; }
  #visual .profile-card > canvas#visualCanvas { align-self: center; width: 104px; height: 104px; }
  #visual .pc-name { justify-content: center; flex-wrap: wrap; }
  #visual .pc-hint { text-align: center; }
  #visual .pc-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  #visual .pc-badges .pb-card.guild { grid-column: 1 / -1; }
  #visual .pc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .shop-panel > .back { bottom: 6px; } }