*{margin:0;padding:0;box-sizing:border-box}
body{
  background:radial-gradient(ellipse at 50% 0%,#2a1a08 0%,#0d0500 60%,#050200 100%);
  display:flex;justify-content:center;align-items:center;
  min-height:100vh;overflow:hidden;touch-action:none;
  font-family:'Outfit',Arial,sans-serif;
}
#gc{
  position:relative;width:400px;height:700px;
  overflow:hidden;border-radius:20px;
  box-shadow:
    0 0 0 1px rgba(255,160,60,0.25),
    0 0 40px rgba(180,90,20,0.5),
    0 0 100px rgba(100,40,10,0.6),
    0 30px 80px rgba(0,0,0,0.95);
}
canvas{display:block;width:400px;height:700px;}

/* ── PRELOADER ── */
#preloader{
  position:absolute;inset:0;
  background:linear-gradient(160deg,#2e1608 0%,#120600 50%,#050100 100%);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  z-index:200;gap:0;
}
.pre-logo{
  font-size:64px;margin-bottom:12px;
  filter:drop-shadow(0 0 24px rgba(255,160,50,0.8));
  animation:logoBounce 0.9s ease-in-out infinite alternate;
}
@keyframes logoBounce{from{transform:translateY(0) scale(1)}to{transform:translateY(-16px) scale(1.08)}}
.pre-title{
  font-family:'Orbitron',sans-serif;
  font-size:30px;font-weight:900;letter-spacing:4px;
  color:#fff;
  text-shadow:0 0 30px rgba(255,160,50,0.9),0 0 60px rgba(255,100,20,0.5);
  margin-bottom:4px;
}
.pre-sub{
  color:rgba(255,200,120,0.6);font-size:12px;letter-spacing:3px;text-transform:uppercase;
  margin-bottom:32px;font-weight:600;
}
.pre-balls{display:flex;gap:14px;margin-bottom:32px;}
.pre-ball{font-size:28px;filter:drop-shadow(0 0 8px rgba(255,180,80,0.6));animation:spinBall 1.2s linear infinite;}
.pre-ball:nth-child(2){animation-delay:-0.4s;animation-duration:1s;}
.pre-ball:nth-child(3){animation-delay:-0.8s;animation-duration:1.4s;}
@keyframes spinBall{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}
.pre-bar-wrap{
  width:240px;height:6px;
  background:rgba(255,255,255,0.08);
  border-radius:6px;
  overflow:hidden;margin-bottom:10px;
}
.pre-bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,#f5a623,#ffe066,#f5a623);
  background-size:200% 100%;
  border-radius:6px;transition:width 0.12s linear;
  animation:shimmer 1.5s linear infinite;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.pre-hint{color:rgba(255,200,80,0.5);font-size:11px;letter-spacing:2px;text-transform:uppercase;}

/* ── HUD ── */
#hud{
  position:absolute;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 10px;pointer-events:none;z-index:10;
}
.hud-pill{
  background:rgba(0,0,0,0.65);
  border:1px solid rgba(255,160,60,0.35);
  border-radius:24px;padding:5px 13px;
  color:#fff;font-size:12px;font-weight:600;
  display:flex;align-items:center;gap:5px;
  backdrop-filter:blur(8px);
  box-shadow:0 2px 12px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.06);
}
.hud-pill .icon{font-size:13px;}
.hud-pill .val{
  font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;
  color:#ffe066;text-shadow:0 0 10px rgba(255,210,50,0.6);
}

/* ── SPEED BADGE ── */
#speedBadge{
  position:absolute;right:10px;top:52px;
  background:linear-gradient(135deg,#ff5500,#cc1100);
  border:1px solid rgba(255,120,50,0.8);
  border-radius:16px;color:#fff;
  font-family:'Orbitron',sans-serif;
  font-size:9px;font-weight:700;
  padding:4px 10px;letter-spacing:1.5px;
  pointer-events:none;z-index:10;display:none;
  box-shadow:0 0 16px rgba(255,80,0,0.5),0 2px 8px rgba(0,0,0,0.4);
  animation:badgePulse 0.6s ease infinite alternate;
}
@keyframes badgePulse{from{transform:scale(1);box-shadow:0 0 16px rgba(255,80,0,0.5)}to{transform:scale(1.06);box-shadow:0 0 28px rgba(255,80,0,0.8)}}

/* ── COMBO ── */
#combo{
  position:absolute;left:50%;top:42%;
  transform:translate(-50%,-50%) scale(0);
  font-family:'Orbitron',sans-serif;
  font-size:34px;font-weight:900;
  color:#fff;
  text-shadow:0 0 20px rgba(255,180,50,1),0 0 50px rgba(255,100,0,0.8);
  pointer-events:none;z-index:20;
  transition:transform 0.18s cubic-bezier(.17,.67,.49,1.5),opacity 0.35s;
  opacity:0;white-space:nowrap;letter-spacing:2px;
}
#combo.show{transform:translate(-50%,-50%) scale(1);opacity:1;}

/* ── MODAL ── */
#modal{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.85);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  z-index:100;backdrop-filter:blur(10px);
}
.mbox{
  background:linear-gradient(160deg,rgba(50,22,5,0.98) 0%,rgba(18,8,2,0.99) 100%);
  border:1px solid rgba(220,130,50,0.4);
  border-radius:28px;padding:36px 44px;text-align:center;
  box-shadow:
    0 0 0 1px rgba(255,160,60,0.1),
    0 0 60px rgba(180,90,20,0.25),
    0 30px 80px rgba(0,0,0,0.8);
  min-width:280px;max-width:340px;
  animation:modalIn 0.4s cubic-bezier(.17,.67,.49,1.4) both;
}
@keyframes modalIn{from{transform:scale(0.65) translateY(24px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.mbox h2{
  font-family:'Orbitron',sans-serif;
  color:#fff;font-size:26px;margin-bottom:8px;
  text-shadow:0 0 20px rgba(255,180,50,0.7);letter-spacing:2px;
}
.mbox p{color:rgba(255,220,180,0.75);font-size:14px;line-height:1.7;margin-bottom:26px;}
.mbox .icon{font-size:54px;margin-bottom:14px;display:block;filter:drop-shadow(0 0 16px rgba(255,160,50,0.6));}
.mbtn{
  background:linear-gradient(180deg,#f09618 0%,#c47200 50%,#a05800 100%);
  border:none;border-radius:50px;color:#fff;
  font-family:'Orbitron',sans-serif;
  font-size:15px;font-weight:700;
  padding:14px 40px;cursor:pointer;
  box-shadow:0 6px 0 #6a3c00,0 8px 24px rgba(200,130,0,0.35);
  transition:transform 0.1s,box-shadow 0.1s;
  display:block;width:100%;margin-bottom:10px;
  letter-spacing:1px;
}
.mbtn:hover{background:linear-gradient(180deg,#ffaa20 0%,#d88010 50%,#b06200 100%);}
.mbtn:active{transform:translateY(5px);box-shadow:0 1px 0 #6a3c00;}
.mbtn.secondary{
  background:linear-gradient(180deg,rgba(80,80,80,0.4),rgba(40,40,40,0.4));
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 4px 0 rgba(0,0,0,0.4);
  font-size:13px;padding:11px 30px;letter-spacing:0.5px;
}
.mbtn.secondary:hover{background:linear-gradient(180deg,rgba(100,100,100,0.4),rgba(60,60,60,0.4));}
.score-final{
  font-family:'Orbitron',sans-serif;
  font-size:44px;font-weight:900;color:#ffe066;
  text-shadow:0 0 20px rgba(255,200,50,0.8),0 0 40px rgba(255,130,0,0.4);
  margin:8px 0 2px;letter-spacing:2px;
}
.best-label{color:rgba(255,200,100,0.5);font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;}
.new-best{
  display:inline-block;
  background:linear-gradient(135deg,#ff8800,#ffcc00);
  color:#000;font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:8px;margin-left:6px;
  vertical-align:middle;letter-spacing:1px;
}

/* ── HINT BAR ── */
#hint-bar{
  position:absolute;top:5.5%;left:50%;transform:translateX(-50%);
  color:rgba(255,220,140,0.9);font-size:12px;font-weight:600;
  pointer-events:none;z-index:5;
  background:rgba(0,0,0,0.6);
  border:1px solid rgba(200,140,60,0.3);
  padding:5px 16px;border-radius:20px;
  width:auto;white-space:nowrap;
  backdrop-filter:blur(6px);
  letter-spacing:0.3px;
}