* { 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 130px 4px; min-height: 40px; }
.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.clock.warn { color: var(--red); border-bottom-color: var(--red); animation: pulse .6s infinite alternate; }
.chip.mine { background: #2a2a1aee; border-color: #ffcc0066; }
.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; }
#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: #000c; padding: 8px 14px; border-radius: 20px; font-size: 13px; z-index: 4; white-space: nowrap; }

#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 label { display: grid; grid-template-columns: 78px 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; }
#pad { position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: 20px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, #ffffff10, #ffffff1c); border: 2px solid #ffffff2a; pointer-events: auto; }
#knob { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: #ffffff55; box-shadow: 0 4px 10px #0006; left: 45px; top: 45px; }
#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; }
#iceBtn { background: radial-gradient(circle at 35% 30%, #9ae0ff, #2a8ad0); }
#elecBtn { background: radial-gradient(circle at 35% 30%, #c8a0ff, #6a2ab0); }
#specialBtns b { position: absolute; top: -4px; right: -4px; background: #14181f; color: #fff; font-size: 12px; border-radius: 10px; padding: 1px 6px; }
body.touch-land #specialBtns { bottom: auto; top: calc(50% + 62px); right: max(30px, env(safe-area-inset-right)); flex-direction: row; }
/* celular deitado: mapa no meio, controles nas laterais */
body.touch-land #touch { top: 0; height: auto; }
body.touch-land #pad { bottom: 50%; transform: translateY(50%); width: 140px; height: 140px; }
body.touch-land #knob { left: 40px; top: 40px; }
body.touch-land #bombBtn { bottom: 50%; transform: translateY(50%); }
body.touch-land #bombBtn:active { transform: translateY(calc(50% + 4px)); }
body.touch-land #hud { padding: 3px 120px 2px; min-height: 0; }
body.touch-land .chip { font-size: 11px; padding: 2px 6px; }

/* ---------- 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, #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; }
.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 { 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; }
.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 { 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 { 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 { 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-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; }
.cos-card .prog { position: relative; width: 100%; height: 12px; background: #ffffff10; border-radius: 6px; overflow: hidden; margin-top: 2px; }
.cos-card .prog i { position: absolute; inset: 0 auto 0 0; background: var(--rc); opacity: .55; }
.cos-card .prog em { position: relative; font-style: normal; font-size: 9px; font-weight: 700; line-height: 12px; }
@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: 6px; background: #14181ff2; border: 1px solid #ffffff22; border-radius: 14px; padding: 8px; box-shadow: 0 12px 30px #000a; animation: rise .15s ease-out; }
#emotePanel button { width: auto; margin: 0; padding: 9px 10px; font-size: 14px; background: #2c3445; color: #fff; box-shadow: none; text-align: left; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
#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; }
#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; }
.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: center; 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%); max-height: 100%; display: flex; flex-direction: column; gap: 12px; }
.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; }
.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; }
.pg-actions button { width: auto; margin: 0; padding: 12px 22px; }
.pg-actions button.big { min-width: 240px; font-size: 16px; }
.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%; } }

/* ==================== 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: 1fr 1fr; gap: 20px; }
.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; }
.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-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; }
}
/* 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; }
  .cast { margin-bottom: 8px; }
  .cast canvas { width: 48px; height: 48px; }
  button.big { padding: 12px; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}