* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; }
html, body, :fullscreen, :-webkit-full-screen { width: 100%; height: 100%; overflow: hidden; background: #1f6f54; font-family: 'Segoe UI', system-ui, sans-serif; color: #f8fafc; }
#game-container { position: relative; width: 100vw; height: 100vh; }
#webgl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
#slice-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
#hud-top { position: absolute; top: 18px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; pointer-events: none; z-index: 10; }
.stats-row { display: flex; gap: 14px; }
.stat-card { background: rgba(15, 23, 30, 0.82); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.18); padding: 8px 18px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; min-width: 120px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.stat-label { font-size: 10px; font-weight: 700; color: #cbd5e1; letter-spacing: 0.8px; }
.stat-value { font-size: 22px; font-weight: 800; color: #ffffff; margin-top: 2px; }
#hud-bottom { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 10; width: max-content; max-width: 96vw; }
.controls-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; background: rgba(15, 23, 30, 0.84); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.18); padding: 10px 16px; border-radius: 18px; pointer-events: auto; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4); }
.action-btn { background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.16); color: #f1f5f9; padding: 10px 18px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.15s ease; }
.action-btn:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-1px); }
.action-btn.active { background: linear-gradient(135deg, #ff7b00, #ff2a6d); border-color: #ffb066; color: #fff; box-shadow: 0 4px 14px rgba(255, 123, 0, 0.45); }
.action-btn.primary { background: linear-gradient(135deg, #10b981, #059669); border-color: #34d399; color: #ffffff; font-weight: 800; }
.action-btn.danger { background: rgba(239, 68, 68, 0.25); border-color: rgba(239, 68, 68, 0.5); color: #fecaca; }
.action-btn.danger:hover { background: rgba(239, 68, 68, 0.4); }
.help-bar { display: flex; gap: 10px; background: rgba(15, 23, 30, 0.75); backdrop-filter: blur(8px); padding: 6px 16px; border-radius: 999px; font-size: 12px; color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.12); }
#combo-toast { position: absolute; top: 92px; left: 50%; transform: translateX(-50%) scale(0.8); background: linear-gradient(135deg, #10b981, #ff7b00); color: #fff; font-weight: 900; font-size: 19px; padding: 8px 22px; border-radius: 999px; opacity: 0; pointer-events: none; transition: all 0.2s ease; z-index: 20; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); }
#combo-toast.show { opacity: 1; transform: translateX(-50%) scale(1); }