*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:#0a0502; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; user-select:none; -webkit-user-select:none; touch-action:none; }

#game-container { position:relative; width:100vw; height:100vh; background: radial-gradient(circle at 50% 30%, #2a1508 0%, #0a0300 100%); overflow:hidden; }
#gameCanvas { display:block; width:100%; height:100%; cursor:crosshair; }
#ui-overlay { position:absolute; inset:0; pointer-events:none; z-index:10; }
#ui-overlay > * { pointer-events:auto; }

.top-bar { position:absolute; top:max(12px, env(safe-area-inset-top)); left:16px; right:16px; display:flex; justify-content:space-between; align-items:flex-start; }
.score-box { color:#f39c12; text-shadow:0 2px 8px rgba(0,0,0,.7); }
.score-label { display:block; font-size:11px; letter-spacing:2px; color:#aaa; font-weight:700; }
#score { font-size:44px; font-weight:900; line-height:1; background:linear-gradient(#ffe066,#f39c12); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.best { display:block; font-size:11px; color:#888; margin-top:2px; }
.best span { color:#f39c12; }

.lives { display:flex; gap:4px; font-size:20px; }
.life { opacity:.25; transition:all .3s; }
.life.active { opacity:1; transform:scale(1.15); filter:drop-shadow(0 0 6px #e74c3c); }

#comboDisplay { position:absolute; top:90px; left:50%; transform:translateX(-50%); font-size:30px; font-weight:900; font-style:italic; color:#ff3366; text-shadow:0 0 12px #ff0055, 2px 2px 0 #000; pointer-events:none; opacity:0; transition:opacity .15s; }

#swipeHint { position:absolute; bottom:100px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.65); font-size:15px; font-weight:600; pointer-events:none; opacity:0; transition:opacity .4s; animation:float 1.6s ease-in-out infinite; }
#swipeHint.show { opacity:1; }
@keyframes float { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-10px); } }

.modal { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none !important; transition:opacity .35s; z-index:100; }
.modal.active { opacity:1; pointer-events:auto !important; }
.modal-card { background:linear-gradient(145deg,#1f1008,#0d0602); border:2px solid #8e44ad; border-radius:18px; padding:32px 36px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.8), 0 0 24px rgba(243,156,18,.25); max-width:400px; width:90%; }
.modal-card h1 { font-size:30px; color:#f1c40f; margin-bottom:8px; text-shadow:0 0 16px rgba(241,196,15,.5); }
.modal-card p { color:#ccc; font-size:14px; margin-bottom:16px; }
.tips { background:rgba(0,0,0,.35); border-radius:10px; padding:14px; margin-bottom:22px; text-align:left; font-size:12px; color:#bbb; display:flex; flex-direction:column; gap:6px; }
.go-title { font-size:36px; color:#e74c3c !important; text-shadow:0 0 20px rgba(231,76,60,.7) !important; }
.stats { display:flex; justify-content:space-around; margin-bottom:22px; }
.stats div { display:flex; flex-direction:column; }
.stats div span:first-child { font-size:11px; color:#999; }
.stats div span:last-child { font-size:26px; font-weight:800; color:#f1c40f; }

.btn { border:none; outline:none; padding:14px 40px; font-size:17px; font-weight:700; border-radius:30px; cursor:pointer; background:linear-gradient(135deg,#e67e22,#c0392b); color:#fff; box-shadow:0 5px 0 #7b241c, 0 8px 18px rgba(0,0,0,.45); transition:all .15s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 7px 0 #7b241c, 0 12px 22px rgba(0,0,0,.5); }
.btn:active { transform:translateY(3px); box-shadow:0 2px 0 #7b241c, 0 4px 8px rgba(0,0,0,.4); }