/* Reset & base */
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  width:100%;height:100%;overflow:hidden;
  font-family:'Georgia','Times New Roman',serif;
  background:#1a0a2e;color:#fff;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
}
#game-container{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;position:relative;
  max-width:480px;margin:0 auto;
}

/* Title screen */
#title-screen{text-align:center;padding:2rem 1rem}
#title-screen h1{
  font-size:2.4rem;color:#ffcc00;
  text-shadow:0 0 20px rgba(255,204,0,.6);
  margin-bottom:.6rem;
}
.subtitle{font-size:1.1rem;color:#e8b4f8;font-style:italic;margin-bottom:1.4rem}
.instructions{font-size:.95rem;color:#ccc;line-height:1.5;margin-bottom:2rem}

/* Buttons */
.big-btn{
  font-family:inherit;font-size:1.4rem;font-weight:bold;
  padding:1rem 2.5rem;border:none;border-radius:16px;cursor:pointer;
  background:linear-gradient(135deg,#ff6b35,#ff2e63);color:#fff;
  box-shadow:0 6px 20px rgba(255,46,99,.4);
  transition:transform .08s,box-shadow .08s;
}
.big-btn:active{transform:scale(.93);box-shadow:0 2px 8px rgba(255,46,99,.3)}

.tap-btn{
  width:90%;max-width:360px;padding:1.6rem 1rem;
  font-size:1.6rem;border-radius:24px;
  background:linear-gradient(135deg,#00c853,#00e676);
  box-shadow:0 6px 24px rgba(0,200,83,.4);
  position:relative;overflow:hidden;
}
.tap-btn:active{
  background:linear-gradient(135deg,#00e676,#69f0ae);
  transform:scale(.94);
}
.tap-btn.flash{animation:tapFlash .15s ease-out}
@keyframes tapFlash{
  0%{box-shadow:0 0 40px rgba(0,230,118,.8)}
  100%{box-shadow:0 6px 24px rgba(0,200,83,.4)}
}

/* Action buttons */
#action-row{
  display:flex;gap:.8rem;justify-content:center;
  margin-top:.8rem;width:90%;max-width:360px;
}
.action-btn{
  flex:1;padding:.7rem .4rem;border:none;border-radius:14px;
  background:linear-gradient(135deg,#3d5afe,#651fff);color:#fff;
  font-family:inherit;font-size:.8rem;font-weight:bold;cursor:pointer;
  position:relative;overflow:hidden;
  box-shadow:0 4px 12px rgba(101,31,255,.3);
  transition:transform .08s;
}
.action-btn:active{transform:scale(.92)}
.action-btn:disabled{opacity:.5;pointer-events:none}
.action-icon{font-size:1.5rem;display:block;margin-bottom:.2rem}
.action-label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.5px}
.cooldown-overlay{
  position:absolute;bottom:0;left:0;width:100%;height:0;
  background:rgba(0,0,0,.55);border-radius:14px;
  transition:height .1s linear;pointer-events:none;
}

/* HUD */
#hud{
  position:absolute;top:0;left:0;right:0;
  display:flex;justify-content:space-between;
  padding:.6rem 1rem;font-size:.9rem;
  background:rgba(0,0,0,.5);z-index:10;
}
#combo-display{color:#ffcc00}
#level-display{color:#e8b4f8}

/* Stage */
#stage{
  flex:1;width:100%;position:relative;
  background:linear-gradient(180deg,#2d1b69 0%,#1a0a2e 60%,#0d0520 100%);
  overflow:hidden;min-height:200px;
}
.curtain{
  position:absolute;top:0;width:18%;height:100%;
  z-index:5;
}
#curtain-left{left:0;background:linear-gradient(90deg,#8b0000,#b22222 60%,transparent)}
#curtain-right{right:0;background:linear-gradient(270deg,#8b0000,#b22222 60%,transparent)}
#spotlight{
  position:absolute;top:-20%;left:50%;transform:translateX(-50%);
  width:200px;height:200px;
  background:radial-gradient(ellipse,rgba(255,255,200,.15) 0%,transparent 70%);
  border-radius:50%;z-index:1;pointer-events:none;
  transition:opacity .3s, width .3s, height .3s;
}
#spotlight.pulse{animation:spotlightPulse .6s ease-out}
@keyframes spotlightPulse{
  0%{width:200px;height:200px;opacity:1}
  50%{width:280px;height:280px;opacity:1}
  100%{width:200px;height:200px;opacity:1}
}
#spotlight.danger{
  background:radial-gradient(ellipse,rgba(255,60,60,.2) 0%,transparent 70%);
  animation:spotlightDanger 1s ease-in-out infinite;
}
@keyframes spotlightDanger{
  0%,100%{opacity:.7}
  50%{opacity:1}
}
#floor{
  position:absolute;bottom:0;left:0;right:0;height:20%;
  background:linear-gradient(180deg,#3e2723,#1b0000);
  border-top:3px solid #5d4037;z-index:2;
}

/* Performer */
#performer-wrap{
  position:absolute;bottom:20%;left:50%;
  transform:translateX(-50%);
  z-index:3;transition:transform .3s ease;
}
#performer{
  width:80px;position:relative;
  transform-origin:bottom center;
  transition:transform .15s ease-out;
}
#performer.bounce{animation:performerBounce .25s ease-out}
@keyframes performerBounce{
  0%{transform:rotate(var(--angle)) translateY(0)}
  40%{transform:rotate(var(--angle)) translateY(-8px)}
  100%{transform:rotate(var(--angle)) translateY(0)}
}
#performer.jolt{animation:performerJolt .2s ease-out}
@keyframes performerJolt{
  0%{filter:brightness(1)}
  30%{filter:brightness(1.6)}
  100%{filter:brightness(1)}
}

/* Head */
#head{
  width:44px;height:48px;
  background:#fdbcb4;border-radius:50% 50% 45% 45%;
  margin:0 auto;position:relative;z-index:4;
}
#hair{
  position:absolute;top:-8px;left:-6px;right:-6px;height:28px;
  background:#4a2800;border-radius:50% 50% 30% 30%;z-index:3;
}
#eyes{
  display:flex;justify-content:space-around;
  padding:20px 8px 0;position:relative;z-index:5;
}
.eye{
  width:10px;height:10px;background:#fff;border-radius:50%;
  position:relative;overflow:hidden;
}
.pupil{
  width:5px;height:5px;background:#2d1b69;border-radius:50%;
  position:absolute;top:3px;left:3px;
  transition:transform .2s;
}
.eyelid{
  position:absolute;top:0;left:-1px;right:-1px;height:0;
  background:#fdbcb4;transition:height .2s;z-index:1;
}
#mouth{
  width:12px;height:6px;background:#d32f2f;
  border-radius:0 0 50% 50%;margin:4px auto 0;
  position:relative;z-index:5;transition:all .2s;
}

/* Zzz */
#zzz{
  position:absolute;top:-10px;right:-20px;
  font-size:1.2rem;font-weight:bold;color:#aaf;z-index:10;
}
#zzz span{font-size:.9rem}
#zzz.visible{display:block;animation:floatZzz 1.5s ease-in-out infinite}
@keyframes floatZzz{
  0%,100%{transform:translateY(0) rotate(-5deg);opacity:.7}
  50%{transform:translateY(-12px) rotate(5deg);opacity:1}
}

/* Body */
#body{position:relative;z-index:3}
#dress{
  width:50px;height:55px;margin:0 auto;
  background:linear-gradient(180deg,#e91e63,#c2185b);
  border-radius:8px 8px 25px 25px;
  position:relative;
}
.arm{
  position:absolute;top:8px;width:12px;height:40px;
  background:#fdbcb4;border-radius:6px;
  transform-origin:top center;transition:transform .3s;
}
#arm-left{left:4px;transform:rotate(5deg)}
#arm-right{right:4px;transform:rotate(-5deg)}

/* Legs */
#legs{display:flex;justify-content:center;gap:4px;z-index:2;position:relative}
.leg{width:12px;height:35px;background:#fdbcb4;border-radius:4px 4px 6px 6px}

/* Speech bubble */
#speech-bubble{
  position:absolute;top:15%;left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,.95);color:#333;padding:.5rem .8rem;
  border-radius:12px;font-size:.85rem;font-style:italic;
  z-index:20;max-width:70%;text-align:center;
  box-shadow:0 3px 10px rgba(0,0,0,.3);
  transition:opacity .15s, transform .15s;
}
#speech-bubble.pop-in{animation:speechPop .25s ease-out}
@keyframes speechPop{
  0%{transform:translateX(-50%) scale(.6);opacity:0}
  70%{transform:translateX(-50%) scale(1.05)}
  100%{transform:translateX(-50%) scale(1);opacity:1}
}
#speech-bubble::after{
  content:'';position:absolute;bottom:-8px;left:50%;
  transform:translateX(-50%);
  border:8px solid transparent;border-top-color:rgba(255,255,255,.95);
}

/* Meter */
#meter-container{
  width:90%;max-width:360px;padding:.3rem 0;
}
#meter-label{font-size:.7rem;text-align:center;color:#aaa;margin-bottom:.2rem;letter-spacing:1px}
#meter-bar-bg{
  width:100%;height:18px;background:#333;border-radius:9px;
  overflow:hidden;border:2px solid #555;
  transition:border-color .3s, box-shadow .3s;
}
#meter-bar-bg.danger{
  border-color:#ff1744;
  box-shadow:0 0 12px rgba(255,23,68,.5);
  animation:meterPulse .8s ease-in-out infinite;
}
@keyframes meterPulse{
  0%,100%{box-shadow:0 0 8px rgba(255,23,68,.4)}
  50%{box-shadow:0 0 18px rgba(255,23,68,.7)}
}
#meter-bar{
  height:100%;width:100%;border-radius:7px;
  background:linear-gradient(90deg,#ff1744,#ff9100,#00e676);
  transition:width .1s ease-out;
}

/* Controls */
#controls{
  display:flex;flex-direction:column;align-items:center;
  padding:.8rem 0 1.2rem;width:100%;
}

/* Particles */
#particles{
  position:absolute;top:0;left:0;right:0;bottom:0;
  pointer-events:none;z-index:15;overflow:hidden;
}
.particle{
  position:absolute;border-radius:50%;
  pointer-events:none;
  animation:particleFly var(--dur, .8s) ease-out forwards;
}
@keyframes particleFly{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}
}
.particle.star{
  width:8px;height:8px;
  background:radial-gradient(circle,#ffcc00,#ff9100);
  box-shadow:0 0 6px rgba(255,204,0,.6);
}
.particle.spark{
  width:4px;height:4px;
  background:#fff;
  box-shadow:0 0 4px rgba(255,255,255,.8);
}
.particle.droplet{
  width:6px;height:8px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:radial-gradient(circle,#64b5f6,#1e88e5);
}
.particle.coffee-bean{
  width:6px;height:6px;
  background:radial-gradient(circle,#8d6e63,#4e342e);
}
.particle.heart{
  width:0;height:0;background:none;border-radius:0;
  box-shadow:none;
}
.particle.heart::before,.particle.heart::after{
  content:'';position:absolute;width:8px;height:12px;
  background:#e91e63;border-radius:8px 8px 0 0;
}
.particle.heart::before{left:4px;transform:rotate(-45deg);transform-origin:0 100%}
.particle.heart::after{left:0;transform:rotate(45deg);transform-origin:100% 100%}

/* Stage flash overlay */
#stage-flash{
  position:absolute;top:0;left:0;right:0;bottom:0;
  pointer-events:none;z-index:14;opacity:0;
  transition:opacity .05s;
}
#stage-flash.flash-gold{
  background:radial-gradient(ellipse at center,rgba(255,204,0,.3),transparent 70%);
  animation:stageFlash .4s ease-out forwards;
}
#stage-flash.flash-blue{
  background:radial-gradient(ellipse at center,rgba(100,181,246,.3),transparent 70%);
  animation:stageFlash .4s ease-out forwards;
}
#stage-flash.flash-red{
  background:radial-gradient(ellipse at center,rgba(255,23,68,.25),transparent 70%);
  animation:stageFlash .3s ease-out forwards;
}
#stage-flash.flash-green{
  background:radial-gradient(ellipse at center,rgba(0,230,118,.25),transparent 70%);
  animation:stageFlash .3s ease-out forwards;
}
@keyframes stageFlash{
  0%{opacity:1}
  100%{opacity:0}
}

/* Screen shake */
#stage.shake{animation:screenShake .15s ease-out}
@keyframes screenShake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  50%{transform:translateX(3px)}
  75%{transform:translateX(-2px)}
  100%{transform:translateX(0)}
}

/* Level-up banner */
#stage.level-up-flash{animation:levelUpFlash .6s ease-out}
@keyframes levelUpFlash{
  0%{background-color:rgba(255,204,0,0)}
  30%{background-color:rgba(255,204,0,.15)}
  100%{background-color:rgba(255,204,0,0)}
}

/* Dress shimmer on high alertness */
#dress.shimmer{animation:dressShimmer .5s ease-out}
@keyframes dressShimmer{
  0%{filter:brightness(1)}
  40%{filter:brightness(1.4) saturate(1.3)}
  100%{filter:brightness(1)}
}

/* Game over */
#game-over{
  text-align:center;padding:2rem 1rem;
}
#game-over h2{font-size:2rem;color:#ffcc00;margin-bottom:.8rem;
  text-shadow:0 0 15px rgba(255,204,0,.5)}
#go-quip{color:#e8b4f8;font-style:italic;margin-bottom:1rem;font-size:1rem}
#game-over p{margin-bottom:.5rem;font-size:1.1rem}
#restart-btn{margin-top:1.2rem}

/* Utility */
.hidden{display:none!important}

/* Responsive tweaks */
@media (max-height:600px){
  #performer{transform:scale(.8);transform-origin:bottom center}
  .tap-btn{padding:1rem;font-size:1.3rem}
  #stage{min-height:160px}
}
@media (min-height:800px){
  #stage{min-height:300px}
}