/* ===== HOME — lobby (referência ref/home.jpeg, base 1600×900) ===== */
:root {
  --h-navy: #07101f; --h-navy2: #0b1629; --h-navy3: #111d33; --h-navy4: #192844;
  --h-blue: #008cff; --h-blue2: #0d67ff; --h-blue3: #00a8ff;
  --h-red: #ff304f; --h-red2: #dc1747; --h-red3: #ff475d;
  --h-yellow: #ffd323; --h-yellow2: #ffc400; --h-yellow3: #ffae00;
  --h-green: #35e56f; --h-gray: #aab5c5; --h-line: rgba(130,160,210,.4);
  --h-font: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --h-shadow: 0 4px 0 rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.25);
}
#menu { padding: 0; overflow: hidden; background: transparent; }
.home { position: absolute; inset: 0; overflow: hidden; font-family: var(--h-font); color: #fff; text-transform: uppercase; }
.home-box { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; transform: translate(-50%, -50%); transform-origin: center; }
.home button { font-family: var(--h-font); text-transform: uppercase; cursor: pointer; border: 0; color: #fff; }
.home svg { display: block; }
.home::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, rgba(7,16,31,0) 40%, rgba(7,16,31,.55) 100%), linear-gradient(rgba(7,16,31,.35), rgba(7,16,31,0) 22%, rgba(7,16,31,0) 70%, rgba(7,16,31,.6)); }
.home h2, .home h3 { font-family: 'Anton', var(--h-font); }
.home .ic svg { width: 100%; height: 100%; }
.home .dot { position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--h-red); border: 2px solid var(--h-navy); box-shadow: 0 0 10px var(--h-red); animation: hb-pulse 1.4s infinite; }
.home .dot.gold { background: var(--h-yellow); box-shadow: 0 0 10px var(--h-yellow); }
@keyframes hb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes hb-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
@keyframes hb-flag { 0%, 100% { transform: skewY(0deg) translateY(0); } 50% { transform: skewY(-2.5deg) translateY(-3px); } }
@keyframes hb-xp { from { width: 0; } }
@keyframes hb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* --- engrenagem --- */
.hb-gear { position: absolute; left: 28px; top: 24px; width: 62px; height: 62px; border-radius: 14px; background: var(--h-navy3); border: 2px solid var(--h-line); box-shadow: var(--h-shadow); color: var(--h-gray); padding: 12px; transition: transform .15s; }
.hb-gear:hover { transform: rotate(25deg) scale(1.06); color: #fff; }

/* --- logo --- */
.hb-logo { position: absolute; left: 50%; top: 10px; width: 520px; height: 240px; transform: translateX(-50%); text-align: center; pointer-events: none; }
.lg-crown { position: absolute; left: 50%; top: 0; width: 84px; transform: translateX(-50%); animation: hb-float 3s ease-in-out infinite; filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)); }
.lg-flag { position: absolute; left: 50%; top: 42px; width: 470px; height: 150px; transform: translateX(-50%); transform-origin: left center; animation: hb-flag 2.6s ease-in-out infinite; filter: drop-shadow(0 8px 0 rgba(0,0,0,.35)); }
.lg-t1, .lg-t2 { position: relative; font-family: 'Anton', var(--h-font); font-weight: 900; font-style: italic; line-height: .86; letter-spacing: 3px; }
.lg-t1 { margin-top: 56px; font-size: 92px; color: #fff; background: linear-gradient(#fff 55%, #c9d3e6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(3px 3px 0 #0a0a14) drop-shadow(0 10px 8px rgba(0,0,0,.6)); -webkit-text-stroke: 0; }
.lg-t2 { font-size: 92px; color: var(--h-yellow); text-shadow: 3px 3px 0 #1a1200, 6px 6px 0 #0a0a14, 0 10px 12px rgba(0,0,0,.6); }
.lg-tag { margin-top: 12px; font-size: 22px; font-weight: 700; letter-spacing: 3px; color: #fff; text-shadow: 0 2px 0 #000, 0 0 12px rgba(0,0,0,.8); }

/* --- jogador (topo direito) --- */
.hb-player { position: absolute; right: 28px; top: 22px; height: 64px; width: 560px; display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 6px; border-radius: 14px; background: var(--h-navy2); border: 2px solid var(--h-line); box-shadow: var(--h-shadow); }
.pl-av { width: 52px; height: 52px; border-radius: 10px; background: var(--h-navy4); border: 2px solid var(--h-yellow); object-fit: cover; }
.pl-nv { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 50px; border-radius: 10px; background: var(--h-navy4); border: 1px solid var(--h-line); line-height: 1; }
.pl-nv small { font-size: 12px; color: var(--h-gray); font-weight: 700; }
.pl-nv b { font-size: 26px; color: var(--h-yellow); }
.pl-mid { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pl-name { font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.pl-xp, .ss-bar { height: 12px; border-radius: 6px; background: var(--h-navy); border: 1px solid var(--h-line); overflow: hidden; }
.pl-xp i, .ss-bar i { display: block; height: 100%; border-radius: 6px; background: var(--h-blue3); box-shadow: 0 0 10px var(--h-blue3); animation: hb-xp 1.1s ease-out; }
.pl-mid small { font-size: 12px; color: var(--h-gray); font-weight: 700; letter-spacing: 1px; }
.pl-coins { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--h-navy4); border: 1px solid var(--h-line); font-size: 24px; color: var(--h-yellow); }
.pl-coins .ic { width: 26px; height: 26px; }
.pl-plus { width: 40px; height: 40px; border-radius: 10px; background: var(--h-green); color: #062; padding: 8px; box-shadow: 0 3px 0 #1a8f43; }

/* --- temporada --- */
.hb-season { position: absolute; left: 28px; top: 104px; width: 310px; height: 116px; display: flex; gap: 10px; padding: 8px; border-radius: 14px; background: var(--h-navy2); border: 2px solid var(--h-line); box-shadow: var(--h-shadow); cursor: pointer; }
.ss-img { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; border: 1px solid var(--h-line); }
.ss-t { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.ss-t small { font-size: 13px; color: var(--h-gray); font-weight: 700; letter-spacing: 1px; }
.ss-t b { font-size: 24px; color: var(--h-yellow); font-weight: 900; font-style: italic; line-height: 1; text-shadow: 0 2px 0 #000; }
.ss-bar i { background: linear-gradient(90deg, var(--h-yellow3), var(--h-yellow)); box-shadow: 0 0 10px var(--h-yellow3); }
.ss-row { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; }
.ss-star { width: 20px; height: 20px; }
.ss-pass { margin-left: auto; padding: 4px 12px; border-radius: 8px; background: var(--h-yellow); color: #221a00; font-size: 15px; font-weight: 900; box-shadow: 0 3px 0 #a67800; animation: hb-glow 2s infinite; }

/* --- botões laterais esquerdos --- */
.hb-side { position: absolute; left: 28px; top: 238px; width: 310px; display: flex; flex-direction: column; gap: 12px; }
.sb { position: relative; display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 16px; border-radius: 14px; background: var(--h-navy3); border: 2px solid var(--h-line); box-shadow: var(--h-shadow); font-size: 26px; font-weight: 800; letter-spacing: 1px; text-align: left; transition: transform .12s, border-color .12s; }
.sb:hover { transform: translateX(4px); border-color: var(--h-blue3); }
.sb .dot { top: 8px; right: 10px; }
.sb-ic { width: 34px; height: 34px; color: var(--h-yellow); }
.sb-ic svg { width: 100%; height: 100%; }

/* --- cartões de modo --- */
.hb-modes { position: absolute; left: 50%; top: 418px; transform: translateX(-50%); display: flex; gap: 40px; }
.mode { position: relative; width: 420px; height: 310px; border-radius: 18px; background: var(--h-navy2); overflow: hidden; box-shadow: var(--h-shadow); cursor: pointer; transition: transform .15s; display: flex; flex-direction: column; }
.mode:hover { transform: translateY(-4px) scale(1.01); }
.mode-ctf { border: 4px solid var(--h-blue); box-shadow: var(--h-shadow), 0 0 22px rgba(0,140,255,.35); }
.mode-solo { border: 4px solid var(--h-red); box-shadow: var(--h-shadow), 0 0 22px rgba(255,48,79,.35); }
.md-img { width: 100%; height: 150px; object-fit: cover; display: block; }
.md-body { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8px 14px 8px; gap: 4px; }
.md-body h2 { margin: 0; font-size: 36px; font-weight: 900; font-style: italic; letter-spacing: 1px; line-height: 1; text-shadow: 0 3px 0 #000; }
.mode-ctf h2 { color: #fff; } .mode-solo h2 { color: #fff; }
.md-body p { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 1px; color: var(--h-gray); }
.md-play { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 30px; border-radius: 10px; background: var(--h-yellow); color: #221a00; font-size: 26px; font-weight: 900; font-style: italic; box-shadow: 0 4px 0 #a67800; transition: transform .1s; animation: hb-glow 2.2s infinite; }
.md-play span { width: 20px; height: 20px; } .md-play svg { width: 100%; height: 100%; }
.md-play:active { transform: translateY(3px); box-shadow: 0 1px 0 #a67800; }
.md-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: 13px; font-weight: 700; color: var(--h-gray); text-transform: none; }
.md-foot .ic { width: 16px; height: 16px; color: var(--h-blue3); }

/* --- amigos --- */
.hb-friends { position: absolute; right: 28px; top: 104px; width: 300px; padding: 10px 12px; border-radius: 14px; background: var(--h-navy2); border: 2px solid var(--h-line); box-shadow: var(--h-shadow); display: flex; flex-direction: column; gap: 8px; }
.fr-head { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; letter-spacing: 1px; }
.fr-head b { margin-left: auto; padding: 0 10px; border-radius: 8px; background: var(--h-navy4); color: var(--h-green); font-size: 18px; }
.on-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--h-green); box-shadow: 0 0 8px var(--h-green); }
.fr { display: flex; align-items: center; gap: 10px; }
.fr-av { width: 40px; height: 40px; border-radius: 10px; background: var(--h-navy4); border: 1px solid var(--h-line); }
.fr-t { flex: 1; display: flex; flex-direction: column; line-height: 1.05; text-transform: none; }
.fr-t b { font-size: 19px; }
.fr-t small { font-size: 13px; font-weight: 700; } .fr-t small.on { color: var(--h-green); } .fr-t small.busy { color: var(--h-yellow); }
.fr-add { width: 32px; height: 32px; border-radius: 8px; background: var(--h-blue2); padding: 6px; box-shadow: 0 3px 0 #073a99; }
.fr-all { display: flex; align-items: center; justify-content: center; gap: 4px; height: 36px; border-radius: 10px; background: var(--h-navy4); border: 1px solid var(--h-line); font-size: 16px; font-weight: 800; color: var(--h-gray); }
.fr-all span { width: 16px; height: 16px; } .fr-all svg { width: 100%; height: 100%; }

/* --- vitrine da loja --- */
.hb-shop { position: absolute; right: 28px; top: 458px; width: 300px; height: 150px; display: flex; border-radius: 14px; background: var(--h-navy2); border: 3px solid var(--h-yellow2); box-shadow: var(--h-shadow), 0 0 18px rgba(255,196,0,.3); overflow: hidden; cursor: pointer; }
.sh-t { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px; }
.sh-t b { font-size: 26px; font-weight: 900; font-style: italic; line-height: .95; } .sh-t em { color: var(--h-yellow); font-style: italic; }
.sh-t small { font-size: 14px; color: var(--h-gray); font-weight: 700; letter-spacing: 1px; }
.sh-btn { margin-top: 6px; align-self: flex-start; padding: 5px 14px; border-radius: 8px; background: var(--h-yellow); color: #221a00; font-size: 15px; font-weight: 900; box-shadow: 0 3px 0 #a67800; }
.sh-img { width: 140px; height: 100%; object-fit: cover; }

/* --- menu inferior --- */
.hb-menu { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 14px; }
.mb { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 130px; height: 105px; border-radius: 14px; background: var(--h-navy3); border: 2px solid var(--h-line); box-shadow: var(--h-shadow); font-size: 18px; font-weight: 800; letter-spacing: .5px; transition: transform .12s; }
.mb:hover { transform: translateY(-4px); }
.mb-ic { width: 46px; height: 46px; padding: 8px; border-radius: 12px; background: var(--h-navy4); }
.mb-ic svg { width: 100%; height: 100%; }
.mb-green .mb-ic { color: var(--h-green); } .mb-yellow .mb-ic { color: var(--h-yellow); } .mb-red .mb-ic { color: var(--h-red3); } .mb-blue .mb-ic { color: var(--h-blue3); } .mb-gold .mb-ic { color: var(--h-yellow2); } .mb-silver .mb-ic { color: var(--h-gray); }
.mb-green { border-color: rgba(53,229,111,.55); } .mb-yellow { border-color: rgba(255,211,35,.55); } .mb-red { border-color: rgba(255,71,93,.55); } .mb-gold { border-color: rgba(255,196,0,.55); }
.mb .dot { top: 8px; right: 8px; }

/* --- rodapé --- */
.hb-quote { position: absolute; left: 28px; bottom: 30px; display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; font-style: italic; color: var(--h-gray); text-shadow: 0 2px 0 #000; }
.q-crown { width: 40px; }
.hb-conn { position: absolute; right: 28px; bottom: 30px; display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: var(--h-gray); text-shadow: 0 2px 0 #000; }
.hb-conn .ic { width: 22px; height: 22px; }
.hb-friends-btn { display: none; }

/* ===== painéis novos ===== */
.ev-list { display: flex; flex-direction: column; gap: 10px; }
.ev { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px; background: var(--h-navy3); border: 1px solid var(--h-line); }
.ev.on { border-color: var(--h-green); box-shadow: 0 0 12px rgba(53,229,111,.3); }
.ev-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 10px; background: var(--h-navy4); font-size: 26px; font-weight: 900; color: var(--h-yellow); }
.ev b { font-size: 20px; } .ev p { margin: 0; color: var(--h-gray); font-size: 14px; }
.ev-when { margin-left: auto; font-weight: 800; color: var(--h-blue3); } .ev.on .ev-when { color: var(--h-green); }
.shop-h { margin: 14px 0 6px; font-size: 18px; color: var(--h-yellow); }
.shop-card.locked h3 { color: var(--h-gray); }
.rw-daily { padding: 14px; border-radius: 12px; background: var(--h-navy3); border: 2px solid var(--h-yellow); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rw-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 12px 0; }
.rw-day { padding: 10px 4px; text-align: center; border-radius: 10px; background: var(--h-navy3); border: 1px solid var(--h-line); display: flex; flex-direction: column; gap: 4px; }
.rw-day small { color: var(--h-gray); } .rw-day b { color: var(--h-yellow); font-size: 20px; }
.rw-day.done { opacity: .5; } .rw-day.cur { border-color: var(--h-green); box-shadow: 0 0 10px rgba(53,229,111,.4); }
.ss-big { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .ss-bar.big { flex: 1; height: 18px; }
.pass-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pt { padding: 12px; border-radius: 12px; background: var(--h-navy3); border: 1px solid var(--h-line); display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.pt small { color: var(--h-gray); } .pt b { font-size: 18px; } .pt span { font-size: 13px; font-weight: 800; color: var(--h-gray); }
.pt.ok { border-color: var(--h-yellow); } .pt.ok span { color: var(--h-yellow); } .pt.done { opacity: .55; } .pt.done span { color: var(--h-green); }
.fr-big { display: flex; flex-direction: column; gap: 10px; } .fr-big .fr { padding: 8px 12px; border-radius: 12px; background: var(--h-navy3); }

/* ===== MOBILE: lobby próprio ===== */
.home-touch .home-box { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; transform: none; display: block; padding: 0; }
.home-touch .hb-gear { display: none; }
.home-touch .hb-logo { top: 4px; width: 300px; height: 130px; transform: translateX(-50%) scale(.62); transform-origin: top center; }
.home-touch .hb-player { right: 8px; top: 8px; width: auto; max-width: 46vw; height: 48px; gap: 6px; padding: 4px 6px 4px 4px; }
.home-touch .pl-av { width: 38px; height: 38px; } .home-touch .pl-nv { width: 40px; height: 38px; } .home-touch .pl-nv b { font-size: 18px; } .home-touch .pl-nv small { font-size: 10px; }
.home-touch .pl-name { font-size: 15px; } .home-touch .pl-mid small { display: none; } .home-touch .pl-xp { height: 8px; }
.home-touch .pl-coins { height: 32px; font-size: 17px; padding: 0 8px; } .home-touch .pl-coins .ic { width: 18px; height: 18px; } .home-touch .pl-plus { width: 30px; height: 30px; padding: 6px; }
.home-touch .hb-season { left: 8px; top: 8px; width: 46vw; max-width: 260px; height: 64px; padding: 5px; }
.home-touch .ss-img { width: 52px; height: 52px; } .home-touch .ss-t b { font-size: 15px; } .home-touch .ss-t small { font-size: 10px; } .home-touch .ss-bar { height: 8px; } .home-touch .ss-row { font-size: 11px; } .home-touch .ss-star { width: 13px; height: 13px; } .home-touch .ss-pass { font-size: 11px; padding: 2px 8px; }
.home-touch .hb-side { left: 8px; top: 82px; width: auto; flex-direction: row; gap: 6px; }
.home-touch .sb { height: 36px; padding: 0 10px; font-size: 15px; gap: 6px; border-radius: 10px; } .home-touch .sb-ic { width: 18px; height: 18px; } .home-touch .sb .dot { top: -4px; right: -4px; width: 10px; height: 10px; }
.home-touch .hb-modes { left: 0; right: 0; top: auto; bottom: 92px; transform: none; gap: 10px; padding: 0 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; justify-content: flex-start; }
.home-touch .hb-modes::-webkit-scrollbar { display: none; }
.home-touch .mode { flex: 0 0 auto; width: 46vw; min-width: 250px; height: 168px; scroll-snap-align: center; border-width: 3px; border-radius: 14px; }
.home-touch .md-img { height: 74px; } .home-touch .md-body { padding: 4px 8px; gap: 2px; } .home-touch .md-body h2 { font-size: 21px; } .home-touch .md-body p { font-size: 10px; letter-spacing: .5px; }
.home-touch .md-play { padding: 3px 18px; font-size: 17px; margin-top: 2px; } .home-touch .md-foot { display: none; }
.home-touch .hb-shop { right: 8px; top: 64px; width: 46vw; max-width: 260px; height: 62px; border-width: 2px; }
.home-touch .sh-t { padding: 4px 8px; gap: 1px; } .home-touch .sh-t b { font-size: 15px; } .home-touch .sh-t small { display: none; } .home-touch .sh-btn { margin-top: 2px; font-size: 11px; padding: 2px 8px; } .home-touch .sh-img { width: 70px; }
.home-touch .hb-friends { display: none; }
.home-touch .hb-friends-btn { display: flex; position: absolute; right: 8px; top: 132px; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 10px; background: var(--h-navy3); border: 2px solid var(--h-line); box-shadow: var(--h-shadow); color: var(--h-green); font-size: 16px; font-weight: 800; }
.home-touch .hb-friends-btn svg { width: 20px; height: 20px; }
.home-touch .hb-menu { left: 0; right: 0; bottom: 0; transform: none; gap: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--h-navy); border-top: 2px solid var(--h-line); }
.home-touch .mb { flex: 1; height: 62px; width: auto; border-radius: 10px; font-size: 11px; gap: 2px; border-width: 1px; box-shadow: none; margin: 0 2px; }
.home-touch .mb-ic { width: 30px; height: 30px; padding: 5px; border-radius: 8px; }
.home-touch .hb-quote, .home-touch .hb-conn { display: none; }
.home-touch .lg-tag { display: none; }
.home-touch .mode { width: 40vw; min-width: 230px; height: 150px; }
.home-touch .md-img { height: 66px; }