* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #101418; font-family: "Segoe UI", Roboto, Arial, sans-serif; color: #fff; touch-action: none; user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; display: block; }
#touchZone { position: fixed; inset: 0; z-index: 2; }
#joy { position: fixed; z-index: 3; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.4); display: none; pointer-events: none; }
#joyKnob { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.55); }
.hidden { display: none !important; }
#hud { position: fixed; inset: 0; z-index: 4; pointer-events: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#hud button { pointer-events: auto; }
#hudTop { position: absolute; left: 10px; top: 10px; display: flex; gap: 8px; align-items: flex-start; }
.hudBox { background: rgba(0,0,0,0.55); border-radius: 8px; padding: 6px 10px; font-size: 13px; line-height: 1.35; text-shadow: 0 1px 2px #000; }
.hudBox.center { text-align: center; }
#hudClan { font-weight: bold; color: #ffd54f; }
#hudStars { font-size: 18px; letter-spacing: 2px; color: #ffeb3b; min-height: 22px; }
#hudStars .off { color: rgba(255,255,255,0.25); }
#hudTimer { font-size: 12px; color: #ff8a65; }
#hudBars { position: absolute; left: 10px; top: 72px; width: 170px; }
.bar { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 13px; text-shadow: 0 1px 2px #000; }
.bar .track { flex: 1; height: 10px; background: rgba(0,0,0,0.6); border-radius: 5px; overflow: hidden; }
.bar .fill { height: 100%; width: 100%; transition: width 0.15s; }
.fill.car { background: linear-gradient(90deg, #ff5722, #ffc107, #4caf50); }
.fill.hp { background: #e53935; }
#hudWeapon { font-size: 12px; background: rgba(0,0,0,0.55); border-radius: 6px; padding: 3px 8px; display: inline-block; margin-top: 2px; }
#hudObj { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; max-width: 70%; text-align: center; background: rgba(0,0,0,0.6); border-radius: 10px; padding: 8px 14px; font-size: 14px; }
#hudHint { color: #ffeb3b; font-weight: bold; font-size: 13px; margin-top: 3px; }
#hudHint:empty { display: none; }
#hudToast { position: absolute; left: 50%; transform: translateX(-50%); top: 72px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
#hudToast div { background: rgba(20,20,30,0.85); border-left: 4px solid #ffd54f; padding: 6px 12px; border-radius: 6px; font-size: 13px; animation: toast 5s forwards; max-width: 80vw; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-8px); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
#btnsTop { position: absolute; right: 10px; top: 190px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.tbtn { background: rgba(0,0,0,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; padding: 7px 10px; font-size: 12px; font-weight: bold; min-width: 70px; }
.tbtn.on, .abtn.on { background: rgba(255,255,255,0.35); }
#btns { position: absolute; right: 12px; bottom: 16px; display: grid; grid-template-columns: 64px 64px; gap: 10px; }
.abtn { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); background: rgba(0,0,0,0.55); color: #fff; font-weight: bold; font-size: 12px; }
.abtn.act { background: rgba(255,214,0,0.55); border-color: #ffd600; grid-column: 2; }
.abtn.fire { background: rgba(229,57,53,0.6); border-color: #ef5350; }
#btnNitro.ready { border-color: #00e5ff; color: #00e5ff; }
body.desktop #btns, body.desktop #btnsTop { opacity: 0.55; }
/* menus */
#menu { position: fixed; inset: 0; z-index: 10; background: rgba(8,10,14,0.88); overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 16px; }
#menuBox { width: 100%; max-width: 720px; background: #1b2028; border: 1px solid #334; border-radius: 12px; padding: 18px; margin: auto; box-shadow: 0 10px 40px #000; }
#menuBox h1 { margin: 0 0 4px; font-size: 30px; color: #ffd54f; letter-spacing: 1px; }
#menuBox h2 { margin: 0 0 10px; font-size: 20px; color: #ffd54f; }
#menuBox h3 { margin: 14px 0 6px; font-size: 15px; color: #90caf9; }
#menuBox p { margin: 6px 0; font-size: 14px; color: #cfd8dc; line-height: 1.4; }
.btn { display: inline-block; background: #2c3e50; color: #fff; border: 1px solid #4a6; border-radius: 8px; padding: 10px 16px; font-size: 15px; font-weight: bold; margin: 4px 4px 4px 0; cursor: pointer; }
.btn.primary { background: #1e88e5; border-color: #64b5f6; }
.btn.danger { background: #c62828; border-color: #ef5350; }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn:disabled { opacity: 0.45; }
.card { background: #232a35; border: 1px solid #3a4454; border-radius: 10px; padding: 10px 12px; margin: 8px 0; cursor: pointer; }
.card:hover { border-color: #ffd54f; }
.card.sel { border-color: #ffd54f; background: #2d3340; }
.card .t { font-weight: bold; font-size: 15px; }
.card .d { font-size: 13px; color: #b0bec5; }
.card .r { font-size: 13px; color: #a5d6a7; margin-top: 3px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.tabs .btn { padding: 7px 12px; font-size: 13px; }
.tabs .btn.on { background: #ffd54f; color: #222; border-color: #ffd54f; }
table.rank { width: 100%; border-collapse: collapse; font-size: 14px; }
table.rank td { padding: 6px 4px; border-bottom: 1px solid #334; }
table.rank tr.mine td { color: #ffd54f; font-weight: bold; }
.kbd { font-size: 12px; color: #90a4ae; }
.result.ok h2 { color: #66bb6a; } .result.bad h2 { color: #ef5350; }
#mapPanel { position: fixed; right: 10px; top: 10px; bottom: 10px; width: 290px; z-index: 6; background: rgba(15,18,24,0.92); border: 1px solid #456; border-radius: 10px; padding: 12px; font-size: 13px; overflow: auto; }
#mapPanel h3 { margin: 0 0 6px; color: #ff8a65; }
#mapPanel .log div { border-bottom: 1px solid #333; padding: 3px 0; color: #cfd8dc; }
@media (max-width: 700px) { #mapPanel { display: none !important; } #hudObj { bottom: 100px; max-width: 55%; left: 10px; transform: none; text-align: left; font-size: 12px; } #btns { grid-template-columns: 56px 56px; gap: 8px; } .abtn { width: 56px; height: 56px; font-size: 11px; } #btnsTop { top: 185px; } #hudBars { width: 130px; } }