/* client/style.css All UI chrome for the game: menus, HUD, minimap, joystick. The canvas fills the viewport; every overlay is absolutely positioned on top of it. Theming is driven by CSS custom properties so "dark mode" is a single class toggle on . */ :root { --bg: #0a0e18; --bg2: #10182b; --panel: rgba(16, 24, 43, 0.92); --text: #e8eefc; --muted: #8ea0c8; --accent: #4dd2ff; --accent2: #6bffb0; --border: rgba(120, 160, 255, 0.18); } body.light { --bg: #dfe8fb; --bg2: #eef3ff; --panel: rgba(255, 255, 255, 0.94); --text: #16233f; --muted: #5a6a8c; --border: rgba(30, 60, 130, 0.15); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; user-select: none; -webkit-tap-highlight-color: transparent; } #game { display: block; width: 100vw; height: 100vh; cursor: crosshair; } .hidden { display: none !important; } /* ---- Overlays (menu / death) ---------------------------------------------- */ .overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, var(--bg2), var(--bg) 70%); z-index: 20; } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 40px 44px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); min-width: 320px; } .panel h1 { font-size: 52px; letter-spacing: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .tag { color: var(--muted); margin: 6px 0 22px; } #nick { width: 100%; padding: 12px 16px; font-size: 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); outline: none; text-align: center; } #nick:focus { border-color: var(--accent); } #skins { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0; } .skin { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: transform 0.12s; } .skin:hover { transform: scale(1.15); } .skin.selected { border-color: var(--text); transform: scale(1.15); } button { width: 100%; padding: 13px; font-size: 18px; font-weight: 600; border: none; border-radius: 10px; background: linear-gradient(90deg, var(--accent), var(--accent2)); color: #06121f; cursor: pointer; transition: filter 0.12s, transform 0.08s; } button:hover { filter: brightness(1.08); } button:active { transform: translateY(1px); } .toggles { display: flex; justify-content: center; gap: 20px; margin-top: 16px; } .toggle { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 14px; cursor: pointer; } /* ---- HUD ------------------------------------------------------------------- */ #hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; } #stats { position: absolute; top: 16px; left: 16px; display: flex; gap: 18px; } .stat { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; display: flex; flex-direction: column; align-items: center; min-width: 64px; } .stat .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; } .stat span:last-child { font-size: 20px; font-weight: 700; } #boost-wrap { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: 240px; height: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } #boost-meter { height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transform-origin: left; transition: width 0.1s linear; } #leaderboard { position: absolute; top: 16px; right: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; min-width: 180px; } #leaderboard h3 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } #lb-list { list-style: none; } #lb-list li { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; } #lb-list li.me { color: var(--accent2); font-weight: 700; } #lb-list li .rank { color: var(--muted); margin-right: 8px; } #minimap { position: absolute; bottom: 16px; right: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; } #hint { position: absolute; bottom: 16px; left: 16px; color: var(--muted); font-size: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; } /* ---- Touch joystick -------------------------------------------------------- */ #joystick { position: fixed; bottom: 40px; left: 40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(120, 160, 255, 0.10); border: 2px solid var(--border); z-index: 15; touch-action: none; } #joystick-knob { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; border-radius: 50%; transform: translate(-50%, -50%); background: linear-gradient(90deg, var(--accent), var(--accent2)); opacity: 0.85; } @media (max-width: 640px) { .panel { padding: 28px; min-width: 280px; } .panel h1 { font-size: 40px; } #leaderboard { min-width: 130px; padding: 8px 10px; } #minimap { width: 120px; height: 120px; } #hint { display: none; } }