:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
html, body, #app { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #101713; }
.hud { position: fixed; z-index: 20; top: 0; left: 0; right: 0; min-height: calc(64px + var(--safe-top)); padding: calc(10px + var(--safe-top)) 14px 9px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(180deg, rgba(10,17,13,.96), rgba(10,17,13,.64), transparent); pointer-events: none; }
.hud strong { display: block; font-size: 16px; }.hud small { color: #aab9b0; font-size: 11px; }.stats { display: flex; gap: 8px; }.stats span { padding: 8px 10px; border: 1px solid #42564a; border-radius: 12px; background: rgba(21,35,28,.85); }
#game, #game canvas { width: 100%; height: 100%; display: block; }
#joystick { position: fixed; z-index: 30; left: 22px; bottom: calc(24px + var(--safe-bottom)); width: 112px; height: 112px; border: 2px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(4,8,6,.35); touch-action: none; }
#stick { position: absolute; width: 50px; height: 50px; left: 29px; top: 29px; border-radius: 50%; background: rgba(255,255,255,.7); box-shadow: 0 4px 20px rgba(0,0,0,.35); }
#action { position: fixed; z-index: 30; right: 20px; bottom: calc(30px + var(--safe-bottom)); min-width: 132px; height: 58px; border: 0; border-radius: 18px; background: #f4a340; color: #24180b; font-weight: 900; font-size: 15px; box-shadow: 0 8px 24px rgba(244,163,64,.28); }
#action:active { transform: scale(.97); }
#leaders { position: fixed; z-index: 30; right: 16px; top: calc(70px + var(--safe-top)); width: 44px; height: 44px; border: 1px solid #52675a; border-radius: 14px; background: rgba(17,29,23,.9); font-size: 20px; }
#toast { position: fixed; z-index: 50; left: 50%; top: calc(82px + var(--safe-top)); transform: translateX(-50%) translateY(-10px); opacity: 0; padding: 10px 14px; max-width: 80%; border-radius: 13px; background: rgba(8,12,10,.92); color: white; text-align: center; transition: .2s; pointer-events: none; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.panel { position: fixed; z-index: 60; inset: 12% 7%; padding: 18px; overflow: auto; border: 1px solid #455c4e; border-radius: 22px; background: rgba(14,24,18,.97); box-shadow: 0 30px 80px rgba(0,0,0,.5); }.hidden { display: none; }
.panel-title { display: flex; align-items: center; justify-content: space-between; }.panel-title button { border: 0; background: transparent; color: white; font-size: 32px; }
#leaderList { padding-left: 30px; } #leaderList li { padding: 8px; border-bottom: 1px solid #293a30; } #leaderList b { float: right; color: #ffc069; }
@media (min-width: 900px) { #joystick { display: none; } #action { bottom: 24px; } }