:root{color-scheme:dark;--bg-top: #89c7ff;--bg-bottom: #dfe8ff;--hud-surface: rgba(12, 18, 28, .66);--hud-border: rgba(255, 255, 255, .18);--hud-shadow: 0 16px 42px rgba(6, 12, 20, .32);--text-strong: #f8fbff;--text-muted: rgba(235, 242, 255, .78);--accent: #ffd66f;--accent-strong: #ff9b52;--crosshair: rgba(255, 248, 230, .95);font-family:Space Grotesk,Aptos,Segoe UI Variable Display,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:radial-gradient(circle at top,rgba(255,255,255,.5),transparent 36%),linear-gradient(180deg,var(--bg-top),var(--bg-bottom))}body{color:var(--text-strong)}canvas{display:block;width:100%;height:100%;outline:none}#app,#hud{position:fixed;inset:0}#hud{pointer-events:none}#fps{position:absolute;top:1rem;right:1rem;min-width:5.75rem;padding:.55rem .85rem;border:1px solid var(--hud-border);border-radius:999px;background:var(--hud-surface);box-shadow:var(--hud-shadow);text-align:center;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}#center-crosshair{position:absolute;top:50%;left:50%;width:22px;height:22px;transform:translate(-50%,-50%)}#center-crosshair:before,#center-crosshair:after{content:"";position:absolute;background:var(--crosshair);border-radius:999px;box-shadow:0 0 0 1px #0a0f187a,0 0 12px #ffd66f47}#center-crosshair:before{top:50%;left:4px;right:4px;height:2px;transform:translateY(-50%)}#center-crosshair:after{left:50%;top:4px;bottom:4px;width:2px;transform:translate(-50%)}#status-card{position:absolute;left:1rem;top:1rem;width:min(28rem,calc(100vw - 7.5rem));padding:1rem 1.1rem 1.1rem;border:1px solid var(--hud-border);border-radius:1.25rem;background:linear-gradient(135deg,rgba(255,214,111,.18),transparent 38%),var(--hud-surface);box-shadow:var(--hud-shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:opacity .18s ease,transform .18s ease}#status-card.hidden{opacity:0;transform:translateY(-10px)}.eyebrow{margin:0 0 .35rem;color:var(--accent);font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}#status-card h1{margin:0 0 .45rem;font-size:clamp(1.2rem,2vw,1.65rem);line-height:1.1}#status-card p{margin:0;color:var(--text-muted);font-size:.95rem;line-height:1.4}#hotbar{position:absolute;left:50%;bottom:1.15rem;display:flex;gap:.7rem;transform:translate(-50%);padding:.85rem 1rem;border:1px solid var(--hud-border);border-radius:1.35rem;background:#090e18b8;box-shadow:var(--hud-shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.slot{width:min(15vw,4.8rem);min-width:3.8rem;padding:.55rem .45rem .5rem;border:1px solid rgba(255,255,255,.12);border-radius:1rem;background:#ffffff0d;text-align:center;transition:transform .14s ease,border-color .14s ease,background .14s ease}.slot.active{border-color:#ffd66fdb;background:#ffd66f33;transform:translateY(-5px)}.slot-key{display:block;margin-bottom:.3rem;color:var(--text-muted);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}.slot-color{width:100%;height:1rem;margin:0 auto .45rem;border:1px solid rgba(255,255,255,.22);border-radius:999px}.slot-label{display:block;font-size:.82rem;line-height:1.2}@media(max-width:720px){#status-card{top:auto;bottom:7.1rem;width:calc(100vw - 2rem)}#hotbar{width:calc(100vw - 1.2rem);gap:.45rem;padding:.75rem}.slot{min-width:0}.slot-label{font-size:.72rem}}