@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
:root {
    --lor: #ff4500; --lb: #00ccff; --lg: #ffd700;
    --ng: #00ff88; --nb: #00f2ff; --combo-pink: #ff00ff;
    --shield-cyan: #00ffff; --speed-green: #00ff66;
}
#game-wrapper { background:transparent; padding:10px 0; font-family:'Orbitron',sans-serif; user-select:none; touch-action:auto !important; }
.main-game-layout { display:flex; flex-direction:row; justify-content:center; align-items:flex-start; gap:20px; max-width:1600px; margin:0 auto; padding:0 10px; }
#game-container { flex:3; width:100%; max-width:1250px; position:relative; background:#000; border:2px solid #222; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.8); aspect-ratio:16/8; border-radius:20px; }
canvas { touch-action:none; display:block; width:100%; height:100%; }

 
.game-ui { position:absolute; top:15px; width:100%; display:flex; justify-content:center; color:white; pointer-events:none; z-index:10; flex-wrap:wrap; gap:8px; padding:0 8px; box-sizing:border-box; }
.ui-box { background:rgba(0,0,0,0.8); padding:8px 12px; border-radius:10px; border:1px solid #444; font-size:11px; backdrop-filter:blur(5px); text-transform:uppercase; font-family:'Orbitron',sans-serif; }
@media (min-width:768px) { .ui-box { font-size:14px; padding:10px 18px; } .game-ui { justify-content:space-around; } }

 
#leaderboard-side { flex:1; min-width:260px; background:rgba(15,15,20,0.9); border:2px solid #333; border-radius:20px; padding:20px; backdrop-filter:blur(10px); display:flex; flex-direction:column; max-height:565px; }
.lb-header { color:var(--lor); font-size:16px; font-weight:bold; text-align:center; margin-bottom:15px; border-bottom:1px solid #444; padding-bottom:10px; flex-shrink:0; letter-spacing:2px; }
.lb-online { font-size:10px; color:var(--ng); text-align:center; margin-bottom:8px; letter-spacing:1px; padding:4px 8px; background:rgba(0,255,136,0.06); border-radius:6px; flex-shrink:0; }
#lb-list { overflow-y:auto; flex:1; scrollbar-width:thin; scrollbar-color:#ff4500 #111; }
#lb-list::-webkit-scrollbar { width:4px; }
#lb-list::-webkit-scrollbar-track { background:#111; border-radius:2px; }
#lb-list::-webkit-scrollbar-thumb { background:#ff4500; border-radius:2px; }
#lb-my-area { flex-shrink:0; border-top:1px dashed #333; margin-top:4px; padding-top:4px; }
.lb-row { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-radius:10px; margin-bottom:6px; background:rgba(255,255,255,0.05); font-size:13px; position:relative; transition:0.3s; }
.lb-row.top3 { background:rgba(255,69,0,0.08); }
.lb-row.top3::before { content:""; position:absolute; left:0; top:15%; height:70%; width:4px; background:linear-gradient(to bottom,#ff4500,#ff0000); border-radius:0 4px 4px 0; box-shadow:2px 0 10px rgba(255,69,0,0.5); }
.lb-row .lb-rank { font-weight:bold; width:28px; z-index:1; color:#888; }
.lb-row.rank1 .lb-rank { color:var(--lg); }
.lb-row.rank2 .lb-rank { color:#00ccff; }
.lb-row.rank3 .lb-rank { color:#00ff66; }
.lb-row .lb-name { flex-grow:1; text-align:left; margin-left:8px; color:#eee; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-row.is-me .lb-name { color:var(--lor); }
.lb-row .lb-score { color:var(--lb); font-weight:bold; font-family:monospace; }
@keyframes lbPulse {
    0%,100% { border:1px solid rgba(255,69,0,0.2); box-shadow:none; }
    50% { border:1px solid #ff4500; box-shadow:0 0 10px rgba(255,69,0,0.6),inset 0 0 6px rgba(255,69,0,0.1); }
}
.lb-row.is-me { border:1px solid rgba(255,69,0,0.2); }
.lb-row.is-me.pulsing { animation:lbPulse 1s ease-in-out infinite; }

 
.game-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.92); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:100; backdrop-filter:blur(10px); padding:20px; gap:14px; }
.btn-action { background:var(--lor); color:white; border:none; padding:16px 0; width:90%; max-width:420px; font-family:'Orbitron',sans-serif; font-size:17px; font-weight:900; text-transform:uppercase; border-radius:10px; cursor:pointer; transition:0.3s ease; letter-spacing:8px; box-shadow:0 4px 15px rgba(0,0,0,0.4); }
.btn-action:hover { transform:translateY(-2px); box-shadow:0 15px 40px -5px rgba(255,69,0,0.5); filter:brightness(1.1); }
#walletWarning { display:none; font-size:11px; color:#ff4500; letter-spacing:2px; margin-top:4px; }
#menuWalletNotice { font-size:10px; letter-spacing:2px; color:rgba(0,255,136,0.7); display:none; }

 
#ad-popup { position:absolute; bottom:5px; right:5px; width:160px; background:rgba(0,0,0,0.8); border:1px solid var(--lg); padding:8px; border-radius:12px; text-align:center; font-family:'Orbitron',sans-serif; z-index:100; backdrop-filter:blur(5px); }
#ad-popup img { width:100%; border-radius:6px; margin-top:5px; }

 
.game-title-container { text-align:center; width:100%; max-width:1250px; margin:18px auto 8px auto; pointer-events:none; }
h2.game-title { display:inline-block !important; margin:0 !important; font-weight:800 !important; letter-spacing:12px !important; text-transform:uppercase !important; font-size:1.8rem !important; text-shadow:0 0 15px rgba(255,255,255,0.2) !important; color:#fff !important; }
h2.game-title span { color:var(--nb) !important; text-shadow:0 0 20px rgba(0,242,255,0.7) !important; letter-spacing:5px !important; margin-left:8px; }
h2.game-title::after { content:""; display:block; width:220px; height:2px; background:linear-gradient(90deg,transparent,var(--lor),transparent); margin:5px auto 0 !important; box-shadow:0 0 10px var(--lor); }
.apex-pulse { animation:apexFlash 2s infinite alternate; }
@keyframes apexFlash { from { box-shadow:inset 0 0 20px rgba(255,69,0,0); } to { box-shadow:inset 0 0 60px rgba(255,69,0,0.4); } }

 
@media (max-width:1099px) {
    .main-game-layout { flex-direction:column; align-items:center; }
    #game-container { aspect-ratio:1/1.1; width:100%; }
    #leaderboard-side { width:95%; margin-top:10px; max-height:420px; }
    h2.game-title { font-size:1.3rem !important; letter-spacing:4px !important; }
    .game-title-container { margin:10px auto 6px auto; }
    .btn-action { font-size:14px; padding:13px 0; letter-spacing:4px; }
    .ui-box { font-size:9px; padding:5px 8px; }
    #ad-popup { width:55px; max-height:55px; padding:4px 2px; border-radius:6px 18px 6px 6px; overflow:hidden; }
    #ad-popup div { font-size:3.5px !important; }
    #ad-popup img { max-height:45px; object-fit:fill; margin-top:0; }
}

@media (max-width:480px) {
    h2.game-title { font-size:0.95rem !important; letter-spacing:2px !important; }
    .game-ui { gap:3px; top:6px; }
    .ui-box { font-size:7px; padding:4px 5px; border-radius:6px; letter-spacing:0; }
    .btn-action { font-size:13px; letter-spacing:3px; padding:12px 0; max-width:280px; }
    #leaderboard-side { padding:12px; max-height:350px; }
    .lb-header { font-size:13px; margin-bottom:10px; padding-bottom:8px; }
    .lb-row { padding:8px 10px; font-size:11px; margin-bottom:4px; }
    .lb-row .lb-rank { width:22px; }
    .lb-online { font-size:8px; }
    #menuWalletNotice { font-size:9px; }
    #walletWarning { font-size:9px; }
}