:root {
  --bg: #0d1117; --panel: rgba(18, 24, 33, 0.92); --line: #2a3442; --txt: #e8edf3; --mut: #8b97a7;
  --acc: #ffb020; --acc2: #ff7a18; --A: #3d9bff; --B: #ff4a4a; --ok: #34d17a;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--txt);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; }

/* ---------- MENUS ---------- */
#menuRoot { position: fixed; inset: 0; background: radial-gradient(ellipse at 70% 40%, #263449 0%, #0d1117 70%); }
#preview { position: absolute; right: 0; top: 0; width: 55%; height: 100%; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; overflow: hidden; }
.screen.show { display: flex; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; gap: 10px; background: linear-gradient(#0008, #0000); position: relative; z-index: 2; }
.topbar h2 { margin: 0; letter-spacing: 3px; font-size: 20px; }
.who b { display: block; font-size: 18px; }
.who small { color: var(--mut); }
.coins { background: #0008; border: 1px solid var(--line); padding: 6px 14px; border-radius: 30px; display: flex; gap: 6px; align-items: center; font-size: 18px; }
.coins b { color: var(--acc); }
.logo { font-size: 46px; font-weight: 900; letter-spacing: 3px; margin: 0; line-height: 1; font-style: italic; text-shadow: 0 4px 0 #000a; }
.logo span { display: block; color: var(--acc); font-size: 1.15em; }
.logo.small { font-size: 30px; margin-bottom: 18px; }
.sub { color: var(--mut); margin: 10px 0 24px; }
.loginBox { margin: auto; width: min(92vw, 380px); display: flex; flex-direction: column; gap: 12px; text-align: center; position: relative; z-index: 2; background: var(--panel); padding: 28px; border-radius: 16px; border: 1px solid var(--line); }
.loginBox input, .panel input:not([type]), .row input { padding: 13px; border-radius: 10px; border: 1px solid var(--line); background: #0b1018; color: var(--txt); font-size: 17px; text-align: center; width: 100%; }
.btn { background: #1c2533; border: 1px solid var(--line); padding: 12px 18px; border-radius: 10px; font-weight: 700; letter-spacing: 1px; text-align: left; transition: transform .08s, background .15s; }
.btn:active { transform: scale(0.97); }
.btn:hover { background: #253043; }
.btn.big { font-size: 19px; padding: 16px 22px; text-align: center; }
.btn.primary { background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #1a1000; border: none; }
.btn.ghost { background: transparent; }
.btn.back { padding: 8px 12px; }
.btn:disabled { opacity: .45; }
.mainGrid { flex: 1; display: flex; align-items: center; padding: 0 5vw; position: relative; z-index: 2; pointer-events: none; }
.mainGrid .left { display: flex; flex-direction: column; gap: 10px; width: min(380px, 44vw); pointer-events: auto; }
.panel { position: relative; z-index: 2; padding: 10px 18px 30px; overflow: auto; flex: 1; }
.panel.narrow { max-width: 480px; display: flex; flex-direction: column; gap: 18px; }
.panel.narrow label { display: flex; flex-direction: column; gap: 6px; }
.panel.narrow select { padding: 10px; border-radius: 8px; background: #0b1018; color: var(--txt); border: 1px solid var(--line); }
.playPanel { display: flex; gap: 16px; flex-wrap: wrap; max-width: 52%; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 260px; }
.card h3 { margin: 0; } .card p { margin: 0; color: var(--mut); font-size: 14px; }
.row { display: flex; gap: 8px; }
.teamPick .btn { flex: 1; text-align: center; opacity: .55; }
.teamPick .btn.sel { opacity: 1; }
.btn.teamA { border-color: var(--A); } .btn.teamA.sel { background: #173a66; }
.btn.teamB { border-color: var(--B); } .btn.teamB.sel { background: #5c1a1a; }
.chk { display: flex; gap: 8px; align-items: center; color: var(--mut); }
.side { position: relative; z-index: 2; width: min(46%, 560px); padding: 8px 18px 24px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button { background: #151c27; border: 1px solid var(--line); padding: 8px 14px; border-radius: 30px; font-weight: 600; }
.tabs button.sel { background: var(--acc); color: #1a1000; border-color: var(--acc); }
.itemGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.item { background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.item.sel { border-color: var(--acc); }
.item .sw { height: 34px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.item b { font-size: 14px; } .item small { font-size: 12px; }
.item .act { font-size: 13px; font-weight: 700; padding: 6px; border-radius: 6px; text-align: center; background: #222c3a; }
.item .act.buy { background: var(--acc); color: #1a1000; }
.item .act.eq { background: var(--ok); color: #002010; }
.hint { color: var(--mut); font-size: 13px; margin: 0; }
.weaponList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.weaponList button { background: #151c27; border: 2px solid var(--line); border-radius: 10px; padding: 8px 4px; font-size: 13px; font-weight: 700; }
.weaponList button small { display: block; font-weight: 400; color: var(--mut); font-size: 11px; }
.weaponList button.sel { border-color: var(--acc); background: #2a2210; }
.stats { display: grid; grid-template-columns: 90px 1fr; gap: 4px 10px; font-size: 12px; color: var(--mut); align-items: center; }
.stats .bar { height: 6px; background: #1d2633; border-radius: 3px; overflow: hidden; }
.stats .bar i { display: block; height: 100%; background: var(--acc); }
.attRow { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.attRow > b { font-size: 12px; color: var(--mut); letter-spacing: 1px; }
.attOpts { display: flex; gap: 5px; flex-wrap: wrap; }
.attOpts button { background: #151c27; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: 12px; }
.attOpts button.sel { background: var(--acc); color: #1a1000; border-color: var(--acc); }
.camoList { display: flex; gap: 6px; flex-wrap: wrap; }
.camoList button { width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--line); }
.camoList button.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--acc); }
.camoList button.locked { opacity: .25; }
h4 { margin: 6px 0 0; color: var(--mut); letter-spacing: 1px; font-size: 13px; }
.caseRow { display: flex; gap: 14px; flex-wrap: wrap; max-width: 52%; }
.caseCard { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 16px; flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; }
.caseCard .crate { font-size: 52px; text-align: center; }
.caseCard .odds { font-size: 12px; color: var(--mut); display: flex; flex-wrap: wrap; gap: 6px; }
.reel { position: relative; height: 96px; overflow: hidden; border: 2px solid var(--line); border-radius: 12px; background: #080b10; margin-top: 14px; max-width: 52%; }
.reelStrip { position: absolute; left: 0; top: 0; height: 100%; display: flex; gap: 6px; padding: 6px; will-change: transform; }
.reelItem { width: 110px; flex: 0 0 110px; height: 84px; border-radius: 8px; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px; font-size: 11px; font-weight: 700; border-bottom: 4px solid; text-shadow: 0 1px 2px #000; }
.reelMark { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: var(--acc); transform: translateX(-50%); box-shadow: 0 0 10px var(--acc); }
.caseResult { margin-top: 12px; font-size: 18px; min-height: 30px; max-width: 52%; }
.ownedCamos { display: flex; flex-wrap: wrap; gap: 6px; max-width: 52%; font-size: 12px; }
.ownedCamos span { background: #151c27; border-left: 4px solid; padding: 4px 8px; border-radius: 6px; }
.creditos { font-size: 12px; color: var(--mut); line-height: 1.6; border-top: 1px solid var(--line); padding-top: 10px; }
.loadBar { position: relative; height: 22px; background: #0b1018; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.loadBar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--acc), var(--acc2)); transition: width .2s; }
.loadBar span { position: relative; font-size: 12px; line-height: 22px; color: #fff; text-shadow: 0 1px 2px #000; }
.loadBar.done { display: none; }
#toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); background: #000d; padding: 10px 18px; border-radius: 10px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 99; }
#toast.show { opacity: 1; }

/* ---------- PARTIDA ---------- */
#gameRoot { position: fixed; inset: 0; }
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hud { position: absolute; inset: 0; pointer-events: none; font-weight: 700; text-shadow: 0 1px 3px #000c; }
#scoreTop { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; font-size: 20px; }
#scoreTop span { padding: 4px 12px; border-radius: 6px; background: #000a; min-width: 48px; text-align: center; }
#scoreTop .sA { background: #1d4f8acc; } #scoreTop .sB { background: #8a1d1dcc; }
#timer { font-size: 16px; }
#minimap { position: absolute; top: 10px; left: 10px; width: 130px; height: 130px; border-radius: 50%; border: 2px solid #fff4; background: #0009; }
#killfeed { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; font-size: 13px; }
#killfeed div { background: #000a; padding: 3px 8px; border-radius: 4px; }
#killfeed .A { color: #7cc0ff; } #killfeed .B { color: #ff8a8a; } #killfeed .w { color: #ccc; font-weight: 400; margin: 0 6px; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transition: opacity .1s; }
#crosshair i { position: absolute; background: #fff; box-shadow: 0 0 2px #000; }
#crosshair i:nth-child(1), #crosshair i:nth-child(2) { width: 2px; height: 9px; left: -1px; }
#crosshair i:nth-child(3), #crosshair i:nth-child(4) { height: 2px; width: 9px; top: -1px; }
#crosshair b { position: absolute; width: 3px; height: 3px; left: -1.5px; top: -1.5px; background: #fff; border-radius: 50%; }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px; opacity: 0; transition: transform .08s; }
#hitmarker polygon { stroke: #fff; opacity: 0; } #hitmarker path { stroke: #fff; }
#hitmarker.head path { stroke: #ffd34a; }
#hitmarker.kill polygon { stroke: #ff2a2a; opacity: 1; } #hitmarker.kill path { stroke: #ff2a2a; }
#holoRet { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px; opacity: 0; filter: drop-shadow(0 0 3px #ff2a2a); }
#holoRet.dot polygon, #holoRet.dot path { display: none; }
#dmgNums { position: absolute; inset: 0; overflow: hidden; }
#dmgNums b { position: absolute; font-size: 26px; font-weight: 900; color: #fff; -webkit-text-stroke: 2px #000; text-shadow: 0 3px 0 #000; animation: dmgUp .9s ease-out forwards; white-space: nowrap; }
#dmgNums b.head { color: #ffd34a; font-size: 32px; } #dmgNums b.kill { color: #ff4a3a; font-size: 36px; }
@keyframes dmgUp { 0% { transform: translate(-50%, 0) scale(1.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -70px) scale(1); opacity: 0; } }
#streak { position: absolute; left: 50%; top: 52px; width: 96px; height: 96px; margin-left: -48px; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .25s cubic-bezier(.3,1.6,.5,1); }
#streak.show { opacity: 1; transform: scale(1); }
#streak svg { width: 100%; height: 100%; }
#streak b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #ffd34a; -webkit-text-stroke: 2px #4a0a05; }
/* luneta: lente com aro escuro, mas o resto da tela continua visível (só um leve escurecido), como no vídeo de referência */
#scopeOverlay { --R: min(40vh, 40vw); position: absolute; inset: 0; display: none; pointer-events: none;
  background: radial-gradient(circle at center, transparent 0, transparent calc(var(--R) - 10px), rgba(0,0,0,.35) calc(var(--R) - 1px), #0d0d0d var(--R), #3a3a3a calc(var(--R) + 5px), #1a1a1a calc(var(--R) + 11px), #050505 calc(var(--R) + 16px), rgba(0,0,0,.30) calc(var(--R) + 17px), rgba(0,0,0,.14) calc(var(--R) + 70px), rgba(0,0,0,.06) 100%); }
#scopeOverlay .ret { position: absolute; left: 50%; top: 50%; width: calc(var(--R) * 2); height: calc(var(--R) * 2); transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden;
  background:
    linear-gradient(#000, #000) left center/34% 4px no-repeat, linear-gradient(#000, #000) right center/34% 4px no-repeat, linear-gradient(#000, #000) center bottom/4px 34% no-repeat,
    linear-gradient(#111, #111) center/100% 1px no-repeat, linear-gradient(#111, #111) center/1px 100% no-repeat; }
#scopeOverlay .ret::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; background: #ff2a2a; border-radius: 50%; box-shadow: 0 0 3px #ff5050; }
#dmgVignette { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, #b00000cc 100%); transition: opacity .3s; }
#dmgArrows { position: absolute; left: 50%; top: 50%; }
#dmgArrows i { position: absolute; width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 30px solid #ff2a2acc; left: -18px; top: -150px; transform-origin: 18px 150px; transition: opacity .6s; }
#prompt { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); background: #000b; padding: 8px 16px; border-radius: 8px; display: none; text-align: center; font-size: 16px; }
#prompt .k { background: #fff; color: #000; padding: 0 6px; border-radius: 4px; margin-right: 6px; text-shadow: none; }
#promptBar { height: 4px; background: #fff3; margin-top: 6px; border-radius: 2px; display: none; }
#promptBar i { display: block; height: 100%; width: 0; background: var(--acc); }
#centerMsg { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); font-size: 22px; color: var(--acc); opacity: 0; transition: opacity .3s; text-align: center; white-space: nowrap; }
#lootMsg { position: absolute; left: 50%; top: 70%; transform: translateX(-50%); color: var(--ok); font-size: 18px; opacity: 0; transition: opacity .3s; }
#bottomLeft { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
#hpBar { width: 200px; height: 22px; background: #000a; border-radius: 4px; overflow: hidden; position: relative; }
#hpBar i { position: absolute; inset: 0; width: 100%; background: linear-gradient(90deg, #2ecc71, #7be495); transition: width .15s; }
#hpBar i.low { background: linear-gradient(90deg, #e74c3c, #ff7b6b); }
#hpBar b { position: relative; padding-left: 8px; line-height: 22px; font-size: 14px; }
#cash { font-size: 22px; color: var(--ok); }
#weaponBox { position: absolute; right: 16px; bottom: 14px; text-align: right; }
#wName { font-size: 16px; color: #dfe6ee; }
#wAmmo { font-size: 20px; color: #bbb; } #wAmmo b { font-size: 36px; color: #fff; } #wAmmo b.low { color: #ff5252; }
#wSlots { display: flex; gap: 4px; justify-content: flex-end; margin-top: 4px; }
#wSlots span { font-size: 11px; padding: 2px 7px; border-radius: 4px; background: #000a; color: #999; border-bottom: 2px solid transparent; }
#wSlots span.cur { color: #fff; border-color: var(--acc); }
#dropHint { position: absolute; right: 16px; bottom: 110px; font-size: 13px; color: var(--mut); text-align: right; }
#dropHint.ready { color: var(--acc); }
#deathScreen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(transparent 30%, #300000aa); }
#deathScreen h2 { font-size: 46px; margin: 0; color: #ff4a4a; letter-spacing: 6px; }
#scoreboard, #endScreen { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: none; min-width: min(640px, 94vw); max-height: 86vh; overflow: auto; pointer-events: auto; }
.sbCols { display: flex; gap: 12px; }
.sbCols > div { flex: 1; }
.sbCols h3 { margin: 0 0 6px; } .sbCols .tA { color: var(--A); } .sbCols .tB { color: var(--B); }
.sbCols table { width: 100%; border-collapse: collapse; font-size: 13px; font-weight: 500; }
.sbCols td { padding: 3px 4px; border-bottom: 1px solid #ffffff10; }
.sbCols tr.me td { color: var(--acc); font-weight: 800; }
#endScreen h1 { margin: 0 0 6px; text-align: center; font-size: 36px; }
#endScreen .coinsWon { text-align: center; color: var(--acc); font-size: 20px; margin: 8px 0; }
#endScreen .btns { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
#pauseMenu { position: absolute; inset: 0; background: #000a; display: none; align-items: center; justify-content: center; pointer-events: auto; }
.pauseBox { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; width: min(340px, 90vw); display: flex; flex-direction: column; gap: 10px; text-align: center; }
.pauseBox h2 { margin: 0; letter-spacing: 4px; } .pauseBox .btn { text-align: center; }
.pauseBox label { display: flex; flex-direction: column; font-size: 13px; color: var(--mut); gap: 4px; }
#clickToPlay { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); background: #000c; padding: 18px 26px; border-radius: 12px; text-align: center; font-size: 22px; display: none; pointer-events: none; }
#clickToPlay small { font-size: 12px; color: var(--mut); font-weight: 400; display: block; margin-top: 8px; max-width: 420px; }

/* habilidades (arremessáveis) com tempo de recarga */
#abilBar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 10px; }
#abilBar div, .tbtn.abil { position: relative; width: 54px; height: 54px; border-radius: 50%; background: #0009; border: 2px solid #ffffff66; display: flex; align-items: center; justify-content: center; font-size: 26px; overflow: hidden; }
#abilBar i, .tbtn.abil i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#000c var(--cd, 0deg), transparent 0); pointer-events: none; }
#abilBar small { position: absolute; bottom: -1px; right: 4px; font-size: 11px; color: #ffd34a; text-shadow: 0 1px 2px #000; }
#abilBar div.ready, .tbtn.abil.ready { border-color: #ffd34a; box-shadow: 0 0 10px #ffd34a88; }
body.touch #abilBar { display: none; }
.tbtn.abil { display: none; position: absolute; }
body.touch .tbtn.abil { display: flex; }
.tbtn.a1 { right: 14px; top: 130px; } .tbtn.a2 { right: 14px; top: 192px; } .tbtn.a3 { right: 14px; top: 254px; }

/* ---------- TOQUE ---------- */
#touch { position: absolute; inset: 0; display: none; touch-action: none; }
body.touch #touch { display: block; }
body.touch #clickToPlay { display: none !important; }
#joyBase { position: absolute; width: 110px; height: 110px; border-radius: 50%; background: #ffffff18; border: 2px solid #ffffff40; display: none; pointer-events: none; }
#joyKnob { position: absolute; left: 30px; top: 30px; width: 50px; height: 50px; border-radius: 50%; background: #ffffff70; }
.tbtn { position: absolute; width: 58px; height: 58px; border-radius: 50%; background: #0007; border: 2px solid #ffffff50; font-size: 24px; display: flex; align-items: center; justify-content: center; pointer-events: auto; touch-action: none; color: #fff; padding: 0; }
.tbtn.on { background: #ffb02088; border-color: var(--acc); }
.tbtn.small { width: 40px; height: 40px; font-size: 18px; display: none; }
body.touch .tbtn.small { display: flex; }
#btnMenuTouch { top: 148px; left: 12px; } #btnScoreTouch { top: 148px; left: 58px; }
.tbtn.fire { right: 90px; bottom: 120px; width: 84px; height: 84px; font-size: 34px; background: #b0303066; }
.tbtn.fire2 { left: 22px; top: 42%; width: 56px; height: 56px; background: #b0303055; }
.tbtn.ads { right: 18px; bottom: 210px; }
.tbtn.jump { right: 18px; bottom: 130px; }
.tbtn.crouch { right: 18px; bottom: 50px; }
.tbtn.reload { right: 196px; bottom: 150px; width: 48px; height: 48px; font-size: 20px; }
.tbtn.swap { right: 110px; bottom: 30px; width: 54px; height: 54px; }
.tbtn.interact { right: 186px; bottom: 230px; display: none; background: #2a8a4a99; }
.tbtn.interact.show { display: flex; }
.tbtn.drop { right: 106px; bottom: 228px; width: 46px; height: 46px; font-size: 20px; }
body.touch #weaponBox { bottom: auto; top: 4px; right: 10px; }
body.touch #wName { font-size: 12px; }
body.touch #wAmmo { font-size: 14px; }
body.touch #weaponBox #wAmmo b { font-size: 22px; }
body.touch #wSlots { display: none; }
body.touch #dropHint { display: none; }
body.touch #killfeed { top: 46px; right: auto; left: 130px; align-items: flex-start; font-size: 11px; }
body.touch #killfeed div:nth-child(n+4) { display: none; }
body.touch #scoreTop { font-size: 16px; top: 4px; }
body.touch #minimap { width: 110px; height: 110px; }
body.touch #hpBar { width: 150px; }
body.touch #prompt { top: 56%; }

@media (max-width: 760px) and (orientation: portrait) {
  #preview { width: 100%; opacity: .55; }
  .mainGrid .left, .playPanel, .side, .caseRow, .reel, .caseResult, .ownedCamos { width: 100%; max-width: 100%; }
  .logo { font-size: 36px; }
}
/* celular deitado */
@media (max-height: 500px) {
  .topbar { padding: 6px 12px; }
  .topbar h2 { font-size: 16px; }
  .who b { font-size: 15px; } .who small { font-size: 11px; }
  .coins { font-size: 14px; padding: 4px 10px; }
  .logo { font-size: 28px; } .logo.small { font-size: 20px; margin-bottom: 4px; }
  .sub { margin: 4px 0 10px; }
  .loginBox { padding: 16px; gap: 8px; }
  .mainGrid { align-items: flex-start; overflow-y: auto; padding-top: 4px; }
  .mainGrid .left { gap: 6px; width: 44vw; }
  .btn.big { padding: 10px; font-size: 15px; }
  .btn { padding: 8px 12px; font-size: 13px; }
  .playPanel { max-width: 56%; gap: 8px; }
  .card { padding: 10px; gap: 6px; flex-basis: 220px; }
  .card p { font-size: 12px; }
  .loginBox input, .row input { padding: 9px; font-size: 15px; }
  .side { width: 56%; padding: 4px 12px 16px; gap: 6px; }
  #preview { width: 44%; }
  .itemGrid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .weaponList button { padding: 5px 2px; font-size: 12px; }
  .caseRow, .reel, .caseResult, .ownedCamos { max-width: 56%; }
  .caseCard .crate { font-size: 32px; }
  .tbtn { width: 52px; height: 52px; font-size: 21px; }
  .tbtn.fire { width: 76px; height: 76px; bottom: 100px; right: 84px; }
  .tbtn.ads { bottom: 180px; } .tbtn.jump { bottom: 112px; } .tbtn.crouch { bottom: 44px; }
  .tbtn.drop { bottom: 190px; right: 100px; width: 42px; height: 42px; }
  .tbtn.interact { bottom: 196px; right: 170px; }
  .tbtn.reload { right: 172px; bottom: 120px; }
  .tbtn.swap { right: 100px; bottom: 26px; width: 48px; height: 48px; }
  #btnMenuTouch { top: 124px; } #btnScoreTouch { top: 124px; }
}

/* ---------- CELULAR EM PÉ (retrato) ---------- */
@media (orientation: portrait) {
  body.touch #minimap { width: 92px; height: 92px; top: 40px; left: 8px; }
  body.touch #scoreTop { top: 6px; font-size: 15px; }
  body.touch #weaponBox { top: 40px; right: 10px; }
  body.touch #killfeed { top: 92px; left: auto; right: 8px; align-items: flex-end; }
  body.touch #btnMenuTouch { top: 140px; left: 108px; } body.touch #btnScoreTouch { top: 140px; left: 154px; }
  body.touch #bottomLeft { left: 10px; bottom: auto; top: 186px; }
  body.touch #hpBar { width: 120px; height: 18px; } body.touch #hpBar b { line-height: 18px; font-size: 12px; }
  body.touch #cash { font-size: 16px; }
  .tbtn.fire { right: 22px; bottom: 120px; width: 96px; height: 96px; font-size: 38px; }
  .tbtn.fire2 { left: auto; right: 26px; top: auto; bottom: 330px; width: 54px; height: 54px; }
  .tbtn.ads { right: 128px; bottom: 150px; width: 58px; height: 58px; }
  .tbtn.jump { right: 132px; bottom: 76px; width: 50px; height: 50px; }
  .tbtn.crouch { right: 186px; bottom: 112px; width: 50px; height: 50px; }
  .tbtn.reload { right: 130px; bottom: 222px; }
  .tbtn.swap { right: 30px; bottom: 36px; width: 52px; height: 52px; }
  .tbtn.drop { right: 196px; bottom: 50px; }
  .tbtn.interact { right: 110px; bottom: 290px; }
  .tbtn.a1 { right: 14px; top: auto; bottom: 400px; } .tbtn.a2 { right: 14px; top: auto; bottom: 466px; } .tbtn.a3 { right: 14px; top: auto; bottom: 532px; }
  #prompt { top: 46%; }
  #centerMsg { font-size: 16px; white-space: normal; width: 90%; }
}


/* ---------- LOJA PREMIUM, BRINDES, CARTEIRA ---------- */
.wallet { display: flex; gap: 8px; }
.coins.gems b { color: #7fe3ff; }
.coins.gems { cursor: pointer; }
.btn.premium { border-color: #5fc6ff; background: linear-gradient(135deg, #12263d, #1f1440); }
.btn.ads { border-color: #34d17a; background: linear-gradient(135deg, #10301f, #13261a); }
.btn.ads small { color: var(--ok); font-weight: 600; margin-left: 6px; }
.gemPacks { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.gemPack { background: linear-gradient(160deg, #142a44, #1d1440); border: 1px solid #5fc6ff66; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; align-items: center; color: var(--txt); }
.gemPack .g { font-size: 26px; font-weight: 800; color: #7fe3ff; }
.gemPack small { color: var(--ok); min-height: 16px; }
.gemPack .price { margin-top: 6px; background: #5fc6ff; color: #04121f; padding: 6px 12px; border-radius: 20px; font-weight: 800; }
.adBox { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.adCount { font-size: 20px; font-weight: 800; }
.adBox .bar { height: 10px; background: #0b1018; border-radius: 6px; overflow: hidden; }
.adBox .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), #9cf2c0); width: 0; transition: width .4s; }
.adBox small { color: var(--mut); }
.adLadder { display: flex; flex-direction: column; gap: 6px; }
.adLadder div { display: flex; justify-content: space-between; gap: 10px; background: #121924; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.adLadder div.got { border-color: var(--ok); color: var(--ok); }
.adLadder div b { color: var(--acc); white-space: nowrap; }
.adOverlay { position: fixed; inset: 0; background: #000d; z-index: 50; display: flex; align-items: center; justify-content: center; }
.adOverlay.hidden { display: none; }
.adFrame { width: min(90vw, 420px); background: #10151d; border: 1px solid var(--line); border-radius: 14px; padding: 22px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.adTimer { font-size: 54px; font-weight: 900; color: var(--acc); }
.item .act.gem { background: #5fc6ff; color: #04121f; }
.item .act.gift { background: #1d3b2a; color: var(--ok); }

/* =====================================================================
   VISUAL NOVO (fonte de jogo, painéis em ângulo, placar, menu com a vila)
   ===================================================================== */
@font-face { font-family: 'Rajdhani'; src: url('/client/assets/fontes/rajdhani-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Rajdhani'; src: url('/client/assets/fontes/rajdhani-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Rajdhani'; src: url('/client/assets/fontes/rajdhani-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
html, body, button, input, select { font-family: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
body { font-size: 17px; font-weight: 600; }

/* ---------- MENU ---------- */
#menuRoot { background: #0a0e14 url('/client/assets/ui/fundo.jpg') center / cover no-repeat; }
#menuRoot::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #0a0e14f5 0%, #0a0e14d9 30%, #0a0e1455 58%, #0a0e1400 100%), linear-gradient(0deg, #0a0e14cc 0%, #0a0e1400 35%); }
.logo { font-weight: 700; font-style: normal; letter-spacing: 4px; transform: skewX(-8deg); text-shadow: 0 3px 0 #0009, 0 0 24px #0008; }
.logo span { color: var(--acc); text-shadow: 0 3px 0 #6a3a00, 0 0 22px #ff9a2066; }
.mainGrid .left .btn { font-weight: 700; font-size: 19px; letter-spacing: 2px; padding: 13px 18px; border-radius: 3px;
  background: linear-gradient(90deg, #111925ee, #11192599); border: 1px solid #ffffff14; border-left: 3px solid #ffffff40;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); transition: transform .12s, border-color .12s, background .12s; }
.mainGrid .left .btn:hover { transform: translateX(5px); border-left-color: var(--acc); background: linear-gradient(90deg, #18233390, #182333cc); }
.mainGrid .left .btn.primary { background: linear-gradient(100deg, #ffb020, #ff7a18); color: #1a0f00; border: none; font-size: 24px; padding: 16px 20px; }
.mainGrid .left .btn.premium { border-left-color: #5fc6ff; }
.mainGrid .left .btn.ads { border-left-color: #34d17a; }
.topbar { background: linear-gradient(#0a0e14e6, #0a0e1400); }
.topbar h2 { font-weight: 700; letter-spacing: 4px; font-size: 24px; }
.coins { font-weight: 700; border-radius: 4px; background: #0a0e14cc; border-color: #ffffff1c; }
.side { background: linear-gradient(90deg, #0a0e14f2 70%, #0a0e1400); }
.panel { background: linear-gradient(180deg, #0a0e14cc, #0a0e14ee); }
.card { background: #101722e6; border-radius: 6px; border-color: #ffffff18; }
.item { border-radius: 6px !important; }
.tabs button { font-weight: 700; letter-spacing: 1px; border-radius: 3px; }
.who b { font-size: 20px; letter-spacing: 1px; }

/* ---------- HUD ---------- */
#hud { font-weight: 700; }
#scoreTop { gap: 0; filter: drop-shadow(0 3px 8px #0009); }
#scoreTop span { border-radius: 0; padding: 3px 14px; font-size: 26px; line-height: 1.1; min-width: 0; }
#scoreTop .sA { background: linear-gradient(90deg, #17508f, #2f7fd6); clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); padding-left: 20px; }
#scoreTop .sB { background: linear-gradient(90deg, #d23a3a, #8f1a1a); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-right: 20px; }
#scoreTop .sA::before { content: 'ALFA'; font-size: 12px; letter-spacing: 2px; margin-right: 8px; opacity: .85; vertical-align: 4px; }
#scoreTop .sB::after { content: 'BRAVO'; font-size: 12px; letter-spacing: 2px; margin-left: 8px; opacity: .85; vertical-align: 4px; }
#timer { background: #0a0e14eb !important; font-size: 20px !important; color: #ffe2a8; padding: 6px 12px !important; }
#minimap { border: 3px solid #ffffff38; box-shadow: 0 0 0 2px #0007, 0 4px 14px #0008; }
#killfeed div { background: linear-gradient(270deg, #0a0e14d9, #0a0e1460); border-right: 3px solid #ffffff55; border-radius: 0; padding: 3px 10px; font-size: 15px; }
#bottomLeft { padding: 10px 26px 10px 12px; background: linear-gradient(90deg, #0a0e14d9, #0a0e1400); border-left: 3px solid #47e08a;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); }
#hpBar { width: 210px; height: 12px; margin-left: 56px; margin-top: 8px; background: #ffffff1c; border-radius: 1px; overflow: visible; }
#hpBar i { background: linear-gradient(90deg, #2fcf72, #8af0b3); border-radius: 1px; }
#hpBar i.low { background: linear-gradient(90deg, #e2402f, #ff8a6e); }
#hpBar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 19px, #0a0e14 19px 21px); pointer-events: none; }
#hpBar b { position: absolute; left: -56px; top: -13px; padding: 0; font-size: 34px; line-height: 1; letter-spacing: -1px; text-shadow: 0 2px 4px #000a; }
#hpBar b::before { content: '✚'; font-size: 13px; color: #47e08a; margin-right: 4px; vertical-align: 12px; }
#cash { font-size: 21px; margin: 6px 0 0 56px; color: #6cf0a0; text-shadow: 0 2px 4px #000a; }
#weaponBox { padding: 8px 14px 8px 30px; background: linear-gradient(270deg, #0a0e14d9, #0a0e1400); border-right: 3px solid var(--acc);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%); }
#wName { font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: #ffd27a; }
#wAmmo { font-size: 22px; color: #aeb8c4; line-height: 1; } #wAmmo b { font-size: 50px; letter-spacing: -1px; text-shadow: 0 2px 6px #000a; }
#wSlots span { font-size: 12px; border-radius: 2px; background: #ffffff12; letter-spacing: 1px; text-transform: uppercase; }
#dropHint { font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
#abilBar div { background: radial-gradient(circle at 50% 35%, #26303f, #0a0e14e6); border-color: #ffffff55; }
#centerMsg, #lootMsg, #prompt { font-weight: 700; letter-spacing: 1px; }
#deathScreen h2 { font-size: 54px; letter-spacing: 8px; transform: skewX(-8deg); }

/* celular: mantém os tamanhos compactos */
body.touch #bottomLeft { padding: 6px 18px 6px 8px; }
body.touch #hpBar { width: 140px; margin-left: 44px; }
body.touch #hpBar b { left: -44px; top: -10px; font-size: 26px; }
body.touch #cash { margin-left: 44px; font-size: 16px; }
body.touch #weaponBox { padding: 4px 10px 4px 22px; }
body.touch #wAmmo b { font-size: 28px; }
body.touch #scoreTop span { font-size: 19px; }

.logo.small { font-size: 46px; margin-bottom: 22px; }
body.touch .logo.small { font-size: 34px; margin-bottom: 12px; }

#dropHint { bottom: 136px; }

/* ---------- correr (trava) e editor de botões ---------- */
.tbtn.sprint { right: 196px; bottom: 56px; width: 50px; height: 50px; font-size: 22px; }
#joyBase.corre { border-color: #ffd84a; box-shadow: 0 0 0 3px #ffd84a55; }
#joyBase.corre::after { content: '🏃'; position: absolute; left: 50%; top: -34px; transform: translateX(-50%); font-size: 22px; }
body.hudEdit #touch { display: block !important; z-index: 60; background: radial-gradient(circle at 50% 40%, #4c7a3a, #1d2a1a); }
body.hudEdit #touch .tbtn { display: flex !important; }
body.hudEdit #touch .tbtn.heSel { border-color: #ffd84a; box-shadow: 0 0 0 4px #ffd84a88; }
#hudEditor { position: fixed; z-index: 70; left: 50%; top: 8px; transform: translateX(-50%); width: min(420px, 92vw); background: #0d1418ee; border: 1px solid #ffffff30; border-radius: 12px; padding: 8px 12px; color: #fff; font-size: 13px; display: flex; flex-direction: column; gap: 4px; touch-action: none; }
#hudEditor .he-top { display: flex; flex-direction: column; align-items: center; } #hudEditor .he-top small { opacity: .75; }
#hudEditor .he-row { text-align: center; color: #ffd84a; font-weight: 700; }
#hudEditor label { display: flex; align-items: center; gap: 8px; } #hudEditor label input { flex: 1; }
#hudEditor .he-btns { display: flex; gap: 6px; justify-content: center; } #hudEditor .he-btns .btn { padding: 6px 12px; font-size: 13px; }
#hudEditor.embaixo { top: auto; bottom: 8px; }
@media (max-height: 420px) { #hudEditor { top: 4px; padding: 4px 10px; gap: 0; font-size: 12px; width: min(360px, 60vw); } #hudEditor.embaixo { top: auto; bottom: 4px; } #hudEditor .he-top small { display: none; } #hudEditor .he-btns .btn { padding: 3px 10px; } #hudEditor label input { height: 18px; } }

/* ---------- botões de toque: vidro escuro + ícone em linha ---------- */
.tbtn {
  background: radial-gradient(circle at 50% 30%, rgba(52,62,72,.70), rgba(10,14,18,.80) 72%);
  border: 1.5px solid rgba(255,255,255,.34); color: #f3f6f8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -6px 12px rgba(0,0,0,.25), 0 3px 10px rgba(0,0,0,.35);
  transition: transform .06s ease-out, background-color .1s; -webkit-tap-highlight-color: transparent; user-select: none;
}
.tbtn svg { width: 50%; height: 50%; pointer-events: none; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.7)); overflow: visible; }
.tbtn:active { transform: scale(.92); }
.tbtn.on { background: radial-gradient(circle at 50% 30%, rgba(255,196,70,.75), rgba(150,90,10,.80) 75%); border-color: #ffd36a; color: #fff; box-shadow: 0 0 0 3px rgba(255,200,80,.25), 0 3px 10px rgba(0,0,0,.35); }

.tbtn.fire svg { width: 46%; height: 46%; }
.tbtn.fire, .tbtn.fire2 { background: radial-gradient(circle at 50% 30%, rgba(52,62,72,.70), rgba(10,14,18,.80) 72%); border-color: rgba(255,255,255,.34); }
.tbtn.fire.on, .tbtn.fire2.on { background: radial-gradient(circle at 50% 30%, rgba(90,104,118,.80), rgba(20,26,32,.85) 72%); border-color: #fff; }
.tbtn.interact { background: radial-gradient(circle at 50% 30%, rgba(80,200,120,.75), rgba(16,90,44,.85) 74%); border-color: rgba(160,255,190,.7); }
.tbtn.drop.on { animation: dropPisca 1.2s ease-in-out infinite; }
@keyframes dropPisca { 50% { box-shadow: 0 0 0 5px rgba(255,200,80,.35), 0 3px 10px rgba(0,0,0,.35); } }
.tbtn.abil span { display: flex; width: 58%; height: 58%; position: relative; z-index: 1; }
.tbtn.abil span svg { width: 100%; height: 100%; }
.tbtn.abil.ready { border-color: #ffd36a; box-shadow: 0 0 10px rgba(255,211,106,.55), inset 0 1px 0 rgba(255,255,255,.16); }
.tbtn.small { border-radius: 12px; }
.tbtn.small svg { width: 60%; height: 60%; }
#joyBase { background: radial-gradient(circle, rgba(255,255,255,.04) 40%, rgba(255,255,255,.13) 72%); border: 2px solid rgba(255,255,255,.38); box-shadow: inset 0 0 18px rgba(0,0,0,.25), 0 2px 10px rgba(0,0,0,.3); }
#joyKnob { background: radial-gradient(circle at 45% 35%, rgba(255,255,255,.95), rgba(210,218,226,.75) 70%); box-shadow: 0 3px 8px rgba(0,0,0,.45); border: 1.5px solid rgba(255,255,255,.8); }

.setTit { margin: 10px 0 2px; font-size: 13px; letter-spacing: 1px; color: #ffd84a; }
label.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; }
label.chk input { width: 20px; height: 20px; flex: none; }
#fpsBox { position: fixed; left: 50%; top: 40px; transform: translateX(-50%); z-index: 40; font: 600 11px/1 monospace; color: #cfe; background: #0008; padding: 3px 6px; border-radius: 4px; pointer-events: none; }

/* ---------- lista de abates: pequena, fosca, na lateral (não tapa a mira) ---------- */
#killfeed { gap: 1px; pointer-events: none; opacity: .72; }
#killfeed div { background: none !important; border: 0 !important; padding: 0 2px !important; font-size: 12px !important; font-weight: 600; line-height: 1.25;
  text-shadow: 0 1px 2px #000, 0 0 4px #000a; white-space: nowrap; animation: kfSome 5s linear forwards; }
#killfeed .w { font-size: 11px; opacity: .8; margin: 0 4px !important; }
@keyframes kfSome { 0% { opacity: 0; transform: translateX(-6px); } 6% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
/* celular: coluna estreita no canto esquerdo, abaixo do menu, no máximo 3 linhas */
body.touch #killfeed { top: 178px !important; left: 8px !important; right: auto !important; align-items: flex-start !important; max-width: 34vw; opacity: .62; }
body.touch #killfeed div { font-size: 10px !important; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
body.touch #killfeed .w { font-size: 9px; }
body.touch #killfeed div:nth-child(n+4) { display: none; }
@media (max-height: 420px) { body.touch #killfeed { top: 172px !important; } }

/* ================= LOBBY (personagem no centro, cenário do mapa atrás) ================= */
#menuRoot.emLobby { background: #6aa0d8 url('/client/assets/ui/lobby_fundo.jpg') center 40% / cover no-repeat; }
#menuRoot.emLobby::before { background: linear-gradient(180deg, #0007 0%, #0000 22%, #0000 62%, #000a 100%) !important; }
#menuRoot.emLobby #preview { left: 0; right: 0; width: 100%; opacity: 1; }
.lobby { color: #fff; pointer-events: none; }
.lobby button { font-family: inherit; cursor: pointer; pointer-events: auto; }
.lobby svg { width: 22px; height: 22px; }
.lbTopo { position: absolute; top: 8px; left: 10px; right: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lbPerfil { display: flex; gap: 10px; align-items: center; pointer-events: auto; }
.lbAvatar { position: relative; width: 56px; height: 56px; border-radius: 6px; background: linear-gradient(135deg, #ffb020, #c2571a); border: 2px solid #ffe08a; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; box-shadow: 0 2px 8px #0008; }
.lbAvatar i { position: absolute; right: -8px; bottom: -8px; min-width: 22px; height: 22px; border-radius: 11px; background: #15181c; border: 2px solid #ffe08a; font-size: 12px; font-style: normal; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.lbNome { display: flex; flex-direction: column; text-shadow: 0 1px 3px #000; }
.lbNome b#lblName { font-size: 20px; letter-spacing: 1px; }
.lbNome small { font-size: 11.5px; opacity: .85; }
.lbPatente { font-size: 11.5px; margin-top: 2px; background: #0007; padding: 1px 8px; border-radius: 3px; width: fit-content; }
.lbAbas { display: flex; gap: 2px; background: #0006; border: 1px solid #ffffff30; border-radius: 3px; pointer-events: auto; }
.lbAbas button { width: 58px; height: 34px; background: none; border: 0; color: #dfe4e9; display: flex; align-items: center; justify-content: center; }
.lbAbas button.sel { background: linear-gradient(#ffffffd0, #c8ced5d0); color: #15181c; box-shadow: inset 0 -3px 0 #ffb020; }
.lbMoedas { display: flex; gap: 6px; pointer-events: auto; }
.lbMoeda { display: flex; align-items: center; gap: 6px; background: #0008; border: 1px solid #ffffff30; padding: 4px 8px 4px 6px; border-radius: 3px; cursor: pointer; font-size: 16px; }
.lbMoeda i { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 900; font-size: 12px; color: #2a1800; background: linear-gradient(#ffe48a, #e0a21c); }
.lbMoeda i.g { background: linear-gradient(#a8e6ff, #3a8fe0); color: #06233f; }
.lbMais svg { width: 16px; height: 16px; background: #ffb020; color: #1a1205; border-radius: 3px; padding: 1px; }
.lbEsq { position: absolute; left: 10px; top: 82px; display: flex; flex-direction: column; gap: 8px; }
.lbQuad { width: 54px; height: 54px; background: #0009; border: 1px solid #ffffff35; border-left: 3px solid #ffb020; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.lbQuad small { font-size: 10px; }
.lbModo { position: absolute; left: 10px; bottom: 10px; width: min(260px, 34vw); display: flex; flex-direction: column; gap: 6px; }
.lbMapa { position: relative; height: 104px; border: 2px solid #ffffffb0; overflow: hidden; cursor: pointer; pointer-events: auto; box-shadow: 0 2px 10px #0009; }
.lbMapa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lbMapa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 40%, #000c); }
.lbTag { position: absolute; right: 6px; top: 5px; font-size: 11px; font-weight: 700; background: #000a; padding: 2px 6px; z-index: 1; }
.lbMapaTxt { position: absolute; left: 8px; bottom: 5px; z-index: 1; display: flex; flex-direction: column; text-shadow: 0 1px 2px #000; }
.lbMapaTxt b { font-size: 15px; } .lbMapaTxt small { font-size: 11.5px; opacity: .9; }
.lbTroca { position: absolute; right: 7px; bottom: 6px; z-index: 1; font-size: 11px; opacity: .85; }
.lbIniciar { height: 58px; background: linear-gradient(180deg, #ffd23a, #f2a915); color: #1a1205; border: 2px solid #fff3b8; font-size: 26px; font-weight: 900; letter-spacing: 4px; box-shadow: 0 0 16px #ffc23a99, 0 3px 10px #0009; text-shadow: 0 1px 0 #fff6; }
.lbIniciar:active { transform: scale(.97); }
.lbDir { position: absolute; right: 10px; top: 32%; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.lbIcones { display: flex; gap: 10px; margin-bottom: 4px; }
.lbRedondo { width: 54px; height: 54px; border-radius: 6px; background: #0008; border: 1px solid #ffffff35; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lbRedondo svg { width: 26px; height: 26px; } .lbRedondo small { font-size: 10px; }
.lbCard { min-width: 168px; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 0; font-size: 18px; font-weight: 800; text-align: left; background: #f1f3f5e8; color: #15181c; box-shadow: 0 2px 8px #0007; }
.lbCard small { font-size: 11px; font-weight: 600; opacity: .7; margin-left: auto; }
.lbOfertas { background: linear-gradient(90deg, #ffffffee, #dfe6eeee); }
.lbOfertas svg { color: #e0402a; }
.lbBarra { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 2px; }
.lbBarra button { display: flex; align-items: center; gap: 6px; background: #000a; border: 0; border-top: 2px solid #ffffff30; color: #fff; padding: 9px 12px; font-size: 13.5px; font-weight: 800; letter-spacing: 1px; }
.lbBarra button:active, .lbBarra button:hover { border-top-color: #ffb020; }
.lbBarra svg { width: 18px; height: 18px; }
@media (max-height: 460px) {
  .lbAvatar { width: 46px; height: 46px; font-size: 24px; } .lbNome b#lblName { font-size: 16px; }
  .lbEsq { top: 66px; } .lbQuad { width: 46px; height: 46px; }
  .lbMapa { height: 82px; } .lbIniciar { height: 48px; font-size: 22px; }
  .lbCard { min-width: 140px; height: 38px; font-size: 15px; } .lbRedondo { width: 46px; height: 46px; }
  .lbBarra button { padding: 7px 8px; font-size: 11px; letter-spacing: .5px; } .lbBarra svg { width: 15px; height: 15px; }
  .lbAbas button { width: 46px; height: 30px; }
}
@media (orientation: portrait) {
  .lbAbas { display: none; } .lbDir { top: 90px; } .lbModo { width: calc(100% - 20px); bottom: 56px; } .lbBarra { left: 10px; right: 10px; justify-content: space-between; } .lbBarra button { flex: 1; padding: 8px 4px; font-size: 10px; flex-direction: column; }
}

/* proteção (capacete e colete) no HUD e na loja */
#armBox { display: flex; gap: 10px; margin-left: 56px; margin-bottom: 2px; font-size: 12px; color: #dfe8f2; }
#armBox span { display: flex; align-items: center; gap: 4px; } #armBox span.off { opacity: .35; }
#armBox svg { width: 16px; height: 16px; } #armBox b { font-weight: 700; }
#armBox i { width: 34px; height: 4px; background: #ffffff26; border-radius: 2px; overflow: hidden; display: block; } #armBox u { display: block; height: 100%; background: #6fc3ff; }
body.touch #armBox { margin-left: 0; }
.protInfo { color: var(--mut); font-size: 13px; margin: 0 0 12px; max-width: 760px; }
.protCard .crate svg { width: 56px; height: 56px; color: #9fd0ff; }
.protCard .niveis { display: flex; gap: 6px; } .protCard .niveis i { flex: 1; height: 6px; border-radius: 3px; background: #ffffff1c; } .protCard .niveis i.on { background: #6fc3ff; }
.protCard small { color: var(--mut); }

/* cartão do mapa no lobby: a foto muda de clima conforme o mapa escolhido */
.lbMapa[data-mapa="doca"] img { filter: brightness(.42) saturate(.7) hue-rotate(185deg) contrast(1.15); }
.lbMapa[data-mapa="cemiterio"] img { filter: grayscale(.75) brightness(.8) contrast(.95) sepia(.15); }
.lbMapa[data-mapa="ruinas"] img { filter: sepia(.75) saturate(1.5) brightness(1.08) hue-rotate(-12deg); }
.lbMapa[data-mapa="sorteio"] img { filter: saturate(1.4) hue-rotate(60deg); }

/* celular: nada de zoom do navegador — toque duplo não amplia e campo de texto com letra de 16px não dispara o zoom do iPhone */
button, a, label, .btn, [data-go] { touch-action: manipulation; }
body.touch input, body.touch select, body.touch textarea { font-size: 16px; }
@media (pointer: coarse) { input, select, textarea { font-size: 16px !important; } }
#conviteLink { width: 100%; font-size: 13px; padding: 8px; background: #0d1318; color: #fff; border: 1px solid #ffffff30; border-radius: 6px; }

/* corrida travada: cadeado acima do direcional (arrastar até ele e soltar) e botão que mostra a trava ligada (tocar para parar) */
#joyBase .joyCadeado { position: absolute; left: 50%; top: -92px; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; display: none;
  background: rgba(0,0,0,.42) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/24px no-repeat; border: 2px solid rgba(255,255,255,.55); }
#joyBase.corre .joyCadeado { display: block; }
#joyBase.corre::after { top: -40px; }
#joyBase.trava .joyCadeado { background-color: #ffd84a; border-color: #fff; box-shadow: 0 0 0 5px #ffd84a66; transform: scale(1.18); filter: invert(0); }
#joyTrava { position: absolute; left: 62px; bottom: 150px; width: 58px; height: 58px; border-radius: 50%; display: none; pointer-events: auto; padding: 0;
  background: #ffd84a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/26px no-repeat;
  border: 2px solid #fff; box-shadow: 0 0 0 5px #ffd84a55, 0 3px 10px #0008; animation: travaPulsa 1.1s ease-in-out infinite; }
#joyTrava.on { display: block; }
body.hudEdit #joyTrava { display: none !important; }
@keyframes travaPulsa { 50% { box-shadow: 0 0 0 10px #ffd84a22, 0 3px 10px #0008; } }

/* amigos, convite recebido e conta com e-mail */

.meuCod { align-items: center; gap: 10px; } .meuCod span { color: var(--mut); font-size: 13px; } .meuCod b { font-size: 22px; letter-spacing: 3px; color: #ffd84a; flex: 1; }
.listaAmigos { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; touch-action: pan-y; }
.amigo { display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: #0b1018; border: 1px solid var(--line); border-radius: 8px; }
.amigo > i { width: 10px; height: 10px; border-radius: 50%; background: #5a6472; flex: none; } .amigo.on > i { background: #34d17a; box-shadow: 0 0 6px #34d17a; }
.amigo > div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .amigo b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .amigo small { color: var(--mut); font-size: 11.5px; }
.amigo .btn { padding: 7px 10px; font-size: 12.5px; flex: none; } .semAmigos { color: var(--mut); font-size: 13px; margin: 4px 0; }
#convitePop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: #000a; } #convitePop.hidden { display: none; }
.cvCaixa { width: min(92vw, 380px); background: var(--panel); border: 2px solid #ffd84a; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 10px; text-align: center; box-shadow: 0 10px 40px #000c; }
.cvCaixa b { font-size: 19px; } .cvCaixa small { color: var(--mut); } .cvCaixa .row { justify-content: center; }
.cfgEmail { display: flex; flex-direction: column; gap: 8px; max-width: 420px; margin: 8px 0; } .cfgEmail input { padding: 10px; border-radius: 6px; border: 1px solid #ffffff30; background: #0d1014; color: #fff; }

/* equipe no lobby */
.lbEquipe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 8px; margin-bottom: 6px; background: #0b1018d9; border: 1px solid #ffd84a80; border-radius: 6px; pointer-events: auto; font-size: 12.5px; }
.lbEquipe.hidden { display: none; }
.lbEquipe > b { color: #ffd84a; margin-right: 2px; } .lbEquipe span { background: #ffffff18; padding: 3px 8px; border-radius: 10px; } .lbEquipe span.cap { background: #ffd84a; color: #1a1300; font-weight: 700; }
.lbEquipe .btn { padding: 4px 9px; font-size: 12px; margin-left: auto; } .lbEquipe .btn + .btn { margin-left: 0; }
.lbIniciar.espera { filter: grayscale(.85) brightness(.75); font-size: 15px !important; }
.amigo .naEq { color: #ffd84a; font-size: 12px; font-weight: 700; padding: 0 6px; }

/* camadas da partida: a camada de toque (direcional/câmera) vem depois do HUD na página e cobria o menu de pausa, o ☰ e o placar.
   Tudo que precisa receber toque fica acima dela. */
#btnMenuTouch, #btnScoreTouch { z-index: 6; }
#scoreboard, #deathScreen { z-index: 20; }
#endScreen { z-index: 25; }
#pauseMenu { z-index: 30; }
/* menu de pausa cabe em tela baixa (celular deitado, com a barra do navegador): duas colunas e rolagem se precisar */
.pauseBox { max-height: calc(100dvh - 16px); overflow-y: auto; touch-action: pan-y; }
@media (max-height: 460px) {
  .pauseBox { width: min(560px, 94vw); padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pauseBox h2 { grid-column: 1 / -1; font-size: 17px; } .pauseBox p { grid-column: 1 / -1; margin: 0; font-size: 12px; }
  .pauseBox label { grid-column: 1 / -1; } .pauseBox .btn { padding: 10px 8px; font-size: 13.5px; }
}

/* dica de tela cheia (celular, quando aberto pelo navegador) */
#dicaTela { position: fixed; left: 50%; top: 8px; transform: translateX(-50%); z-index: 85; width: min(94vw, 560px); display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #0d1318f2; border: 1px solid #ffd84a; border-radius: 10px; font-size: 12.5px; line-height: 1.35; box-shadow: 0 6px 20px #000a; }
#dicaTela.hidden { display: none; } #dicaTela span { flex: 1; } #dicaTela button { flex: none; padding: 7px 14px; border-radius: 8px; border: 0; background: #ffd84a; color: #1a1300; font-weight: 700; }
#gameRoot:not(.hidden) ~ #dicaTela { display: none; }

/* voz no time: botão do microfone e a lista de quem está na conversa (acende quem fala) */
#btnMic { top: 148px; left: 104px; z-index: 6; color: #fff; pointer-events: auto; } #btnMic.hidden { display: none; }
#btnMic svg { width: 54%; height: 54%; opacity: .55; } #btnMic.on { background: #1f9d55; border-color: #b8ffd6; } #btnMic.on svg { opacity: 1; }
#btnMic:not(.on)::after { content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; background: #ff6b6b; transform: rotate(-45deg); }
@media (max-height: 520px) { #btnMic { top: 124px; } }
#vozBox { position: absolute; left: 12px; top: 200px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; z-index: 5; }
/* celular: a lista do time fica ao lado do minimapa (embaixo dos botões fica o registro de abates) */
body.touch #vozBox { top: 10px; left: 130px; }
#vozBox div { display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 6px; border-radius: 12px; background: #0008; color: #fff; font-size: 12.5px; font-weight: 600; opacity: .5; transition: opacity .12s, background .12s; }
#vozBox svg { width: 14px; height: 14px; flex: none; }
#vozBox div.mudo svg { opacity: .35; } #vozBox div.mudo span { text-decoration: none; }
#vozBox div.fala { opacity: 1; background: #1f9d55; box-shadow: 0 0 0 2px #b8ffd6aa; }
/* celular em pé: os botões de menu ficam ao lado do minimapa e o microfone vai junto; a lista do time fica ao lado do minimapa; o registro de abates desce para baixo da vida */
@media (orientation: portrait) { body.touch #btnMic { top: 140px; left: 200px; } body.touch #vozBox { top: 46px; left: 108px; } body.touch #killfeed { top: 286px !important; } }

/* entrar com o Google */
.gLogin { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 2px 0 4px; } .gLogin.hidden { display: none; }
.gLogin > span { font-size: 12px; opacity: .6; letter-spacing: .08em; text-transform: uppercase; } /* só o "ou": o botão do Google tem textos próprios lá dentro */
#gBtn { min-height: 40px; color-scheme: light; } .cfgGoogle [data-cgoogle] { min-height: 40px; margin: 6px 0 10px; color-scheme: light; }

.loginBox .legal { margin: 10px 0 0; font-size: 12px; opacity: .65; text-align: center; } .loginBox .legal a { color: inherit; }

/* ---------- entrada: e-mail -> nome -> jogando ---------- */
#scrLogin { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 0; } /* com o teclado aberto dá para rolar até o botão */
.lgForm { display: flex; flex-direction: column; gap: 12px; }
.lgPasso { display: none; flex-direction: column; gap: 10px; }
.lgForm[data-passo="email"] .lgPasso[data-p="email"], .lgForm[data-passo="nome"] .lgPasso[data-p="nome"], .lgForm[data-passo="senha"] .lgPasso[data-p="senha"],
.lgForm[data-passo="aviso"] .lgPasso[data-p="aviso"], .lgForm[data-passo="visitante"] .lgPasso[data-p="visitante"] { display: flex; }
.lgInfo { margin: 0; font-size: 14px; line-height: 1.4; color: var(--txt); } .lgInfo b { color: var(--acc); overflow-wrap: anywhere; } .lgInfo.fraco { font-size: 12px; color: var(--mut); }
.lgLink { text-align: center; font-size: 13px; padding: 9px 12px; letter-spacing: .3px; font-weight: 600; }
/* o Google aparece no começo e nos avisos; "sem cadastro" só no começo; "outro e-mail" nos passos seguintes */
/* (o botão do Google é um quadro do próprio Google: esconder com display:none faz ele voltar sem o texto — por isso sai da tela em vez de sumir) */
.lgForm { position: relative; }
.lgForm:not([data-passo="email"]):not([data-passo="aviso"]) #gLogin { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
.lgForm[data-passo="aviso"] #gLogin > span { display: none; }
.lgForm:not([data-passo="email"]) #btnSemCadastro { display: none; }
.lgForm[data-passo="email"] #btnLgVolta { display: none; }
.lgForm[data-passo="visitante"] #btnLgVolta { order: 9; }
/* quem já tem conta neste aparelho: nada de formulário piscando enquanto confere a conta e baixa os modelos */
.temConta #scrLogin .lgForm, .temConta #scrLogin .legal { display: none; }
@media (max-height: 520px) {
  .lgForm { gap: 8px; } .lgPasso { gap: 8px; } .lgInfo { font-size: 13px; } .lgLink { padding: 6px 10px; font-size: 12px; }
  #scrLogin .sub { display: none; } #scrLogin .logo { font-size: 24px; } #scrLogin .logo span { display: inline; margin-left: 8px; font-size: 1em; }
  #scrLogin .loginBox .legal { margin-top: 2px; }
}
/* na tela de entrada a dica de tela cheia não aparece (cobria o topo da caixa com o celular deitado); ela volta no lobby */
body:has(#scrLogin.show) #dicaTela { display: none; }

/* excluir conta (Configurações > Conta) */
.cfgExcluir { margin: 14px 0 6px; } .cfgExcluir [data-cexcluirbox] { margin-top: 8px; } .cfgExcluir .hidden { display: none; }
.cfgExcluir input { width: 100%; max-width: 260px; margin: 4px 8px 8px 0; padding: 10px; border-radius: 6px; border: 1px solid #ff8a8060; background: #0d1014; color: #fff; } .btn.perigo { background: #c62828; color: #fff; border-color: #ff8a80; }

/* completar perfil */
#scrPerfil .loginBox input[type=number] { -moz-appearance: textfield; } #scrPerfil .loginBox input::-webkit-inner-spin-button { -webkit-appearance: none; }