:root {
  --safe-top: env(safe-area-inset-top, 20px);
  --safe-bottom: env(safe-area-inset-bottom, 20px);
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  background:#000;
  display:flex;justify-content:center;align-items:center;
  min-height:100vh;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
}

#game-container{
  position:relative;
  width:100vw;max-width:430px;
  height:100vh;max-height:932px;
  overflow:hidden;
  background:#1a1a2e;
}

.screen{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  display:none;flex-direction:column;
  overflow:hidden;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.screen.active{display:flex;}

/* Top bar */
.top-bar{
  position:absolute;top:var(--safe-top);
  left:0;right:0;display:flex;
  align-items:center;justify-content:space-between;
  padding:8px 16px;z-index:100;pointer-events:none;
}
.time-display{
  background:rgba(0,0,0,0.75);border:2px solid #FFD700;
  border-radius:24px;padding:8px 20px;
  color:#FFD700;font-size:26px;font-weight:bold;letter-spacing:2px;
}
.risk-indicator{
  display:flex;align-items:center;gap:6px;
  background:rgba(0,0,0,0.75);border-radius:20px;padding:4px 14px;
}
.risk-dot{width:10px;height:10px;border-radius:50%;background:#4CAF50;transition:background .3s;}
.risk-dot.mid{background:#FF9800;}
.risk-dot.high{background:#f44336;animation:riskPulse .5s infinite;}
.risk-text{color:#fff;font-size:12px;}
@keyframes riskPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}

/* Level header */
.level-header{
  position:absolute;top:60px;left:0;right:0;text-align:center;z-index:50;pointer-events:none;
  transform: translateY(-100%);
  opacity: 0;
}
.level-header.slide-in{
  animation: slideDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes slideDown {
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.level-title{
  display:inline-block;background:rgba(0,0,0,.75);color:#FFD700;
  padding:6px 20px;border-radius:20px;font-size:16px;font-weight:bold;
  letter-spacing:1px;border:1px solid rgba(255,215,0,.3);
}
.level-subtitle{
  color:#fff;font-size:12px;margin-top:4px;text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.level-obj{
  position:absolute;top:105px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.6);color:#fff;padding:4px 16px;border-radius:14px;
  font-size:11px;z-index:50;pointer-events:none;
}

/* Boss indicator */
.boss-indicator{
  position:absolute;top:55px;right:16px;
  background:rgba(244,67,54,.85);color:#fff;
  padding:6px 14px;border-radius:16px;font-size:12px;font-weight:bold;
  z-index:80;pointer-events:none;display:none;
}

/* Countdown */
.countdown-display{
  position:absolute;top:95px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.7);color:#FFD700;padding:4px 16px;
  border-radius:14px;font-size:14px;font-weight:bold;z-index:50;pointer-events:none;
}
.countdown-display.urgent{color:#f44336;animation:countdownPulse .5s infinite;}
@keyframes countdownPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.08)}}

@keyframes scanVision {
  0% { transform: rotate(-75deg); }
  100% { transform: rotate(75deg); }
}

@keyframes bossWalk {
  0% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(1.5deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-4px) rotate(-1.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* Progress bar */
.progress-container{
  position:absolute;bottom:140px;left:50%;transform:translateX(-50%);
  width:75%;max-width:300px;z-index:60;pointer-events:none;
}
.progress-bar-track{width:100%;height:10px;background:rgba(255,255,255,.2);border-radius:5px;overflow:hidden;}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,#4CAF50,#8BC34A);border-radius:5px;width:0%;transition:width .2s;}
.progress-label{text-align:center;color:#fff;font-size:11px;margin-top:4px;text-shadow:0 1px 3px rgba(0,0,0,.8);}

/* Buttons */
.game-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:85%;max-width:320px;padding:16px 30px;
  border:none;border-radius:50px;font-size:20px;font-weight:bold;
  color:#fff;cursor:pointer;letter-spacing:2px;
  transition:transform .15s,box-shadow .15s;
  animation:btnBreathe 1.5s ease-in-out infinite;
}
.game-btn:active{transform:scale(.94);}
.game-btn.primary{
  background:linear-gradient(135deg,#FF6B35,#f44336,#FF6B35);background-size:200% 200%;
  box-shadow:0 6px 25px rgba(244,67,54,.4);
  font-size:22px;padding:18px 30px;
  animation:btnBreathe 1.5s ease-in-out infinite,btnShimmer 2s ease infinite;
}
.game-btn.secondary{
  background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.4);
  font-size:16px;padding:12px 30px;animation:none;
}
.game-btn.small{font-size:14px;padding:10px 20px;animation:none;width:auto;}
@keyframes btnBreathe{0%,100%{box-shadow:0 6px 25px rgba(244,67,54,.4)}50%{box-shadow:0 8px 35px rgba(244,67,54,.7)}}
@keyframes btnShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Toast */
.toast{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);
  background:rgba(0,0,0,.88);color:#fff;padding:14px 26px;
  border-radius:24px;font-size:15px;font-weight:bold;z-index:300;
  pointer-events:none;
  transition:transform .3s cubic-bezier(.175,.885,.32,1.275);
}
.toast.show{transform:translate(-50%,-50%) scale(1);}

/* Boss popup */
.boss-popup{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);
  background:rgba(0,0,0,.92);border:3px solid #f44336;border-radius:20px;
  padding:30px 24px;text-align:center;z-index:200;pointer-events:none;
  transition:transform .3s cubic-bezier(.175,.885,.32,1.275);
}
.boss-popup.show{transform:translate(-50%,-50%) scale(1);}
.boss-popup-icon{font-size:48px;margin-bottom:10px;}
.boss-popup-text{color:#fff;font-size:18px;font-weight:bold;margin-bottom:6px;}
.boss-popup-sub{color:#f44336;font-size:14px;}

/* Speech bubble */
.speech-bubble{
  position:absolute;background:#fff;border-radius:16px;
  padding:10px 16px;font-size:13px;color:#333;
  box-shadow:0 3px 12px rgba(0,0,0,.25);z-index:55;pointer-events:none;
  max-width:200px;text-align:center;animation:bubbleIn .3s ease-out;
}
.speech-bubble::after{
  content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  width:0;height:0;
  border-left:8px solid transparent;border-right:8px solid transparent;
  border-top:8px solid #fff;
}
@keyframes bubbleIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

/* Transition screens */
.transition-clock-area{position:relative;text-align:center;}
.transition-title{
  font-size:28px;font-weight:900;color:#fff;
  text-shadow:0 3px 8px rgba(0,0,0,.6);margin-bottom:12px;
  letter-spacing:2px;-webkit-text-stroke:1px #000;
}
.transition-time-flip{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0;}
.transition-time-from,.transition-time-to{
  background:rgba(0,0,0,.8);color:#FFD700;padding:10px 20px;
  border-radius:12px;font-size:22px;font-weight:bold;
  border:2px solid rgba(255,215,0,.4);
}
.transition-arrow{color:#fff;font-size:24px;animation:arrowPulse .8s infinite;}
@keyframes arrowPulse{0%,100%{opacity:1}50%{opacity:.3}}
.transition-subtitle{color:rgba(255,255,255,.85);font-size:15px;margin-top:8px;text-shadow:0 1px 3px rgba(0,0,0,.7);}

/* Drag element */
.draggable-item{
  position:absolute;z-index:45;cursor:grab;touch-action:none;
  -webkit-user-drag:none;
}
.draggable-item:active{cursor:grabbing;}
.draggable-item.dragging{z-index:200 !important;opacity:.9;transform:scale(1.08);filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));}

/* Drop zone */
.drop-zone{
  position:absolute;z-index:30;
  border:2px dashed transparent;border-radius:12px;
  transition:border-color .2s,background .2s;
}
.drop-zone.active{border-color:#4CAF50;background:rgba(76,175,80,.15);}
.drop-zone.hover{border-color:#FFD700;background:rgba(255,215,0,.25);}

/* Clickable hotspot */
.hotspot{
  position:absolute;z-index:40;cursor:pointer;
  transition:transform .15s,filter .15s;
}
.hotspot:active{transform:scale(.92);}
.hotspot.highlight{animation:hotspotPulse 1s ease-in-out infinite;}
@keyframes hotspotPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}

/* Fail overlay */
.fail-overlay{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.85);display:none;
  flex-direction:column;align-items:center;justify-content:center;z-index:200;
}
.fail-overlay.show{display:flex;}
.fail-card{
  background:#fff;border-radius:20px;padding:28px 24px;text-align:center;
  width:85%;max-width:340px;
  animation:shakeIn .5s ease-out;
}
@keyframes shakeIn{
  0%{transform:translateX(-30px);opacity:0}
  25%{transform:translateX(20px)}
  50%{transform:translateX(-10px)}
  75%{transform:translateX(5px)}
  100%{transform:translateX(0);opacity:1}
}
.fail-icon{font-size:52px;margin-bottom:10px;}
.fail-title{font-size:22px;font-weight:900;color:#f44336;margin-bottom:6px;}
.fail-text{font-size:14px;color:#666;margin-bottom:16px;line-height:1.5;}

/* Success card */
.success-card{
  width:88%;max-width:370px;background:rgba(255,255,255,.93);
  border-radius:24px;padding:24px;text-align:center;
  box-shadow:0 12px 48px rgba(0,0,0,.35);
  animation:panelSlideUp .6s ease-out;
}
@keyframes panelSlideUp{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
.success-title{font-size:26px;font-weight:900;color:#1a1a2e;margin-bottom:4px;}
.success-subtitle{font-size:15px;color:#f44336;margin-bottom:16px;font-weight:bold;}
.grade-display{
  display:inline-block;padding:10px 28px;border-radius:30px;
  font-size:20px;font-weight:900;margin-bottom:14px;
}
.grade-display.s{background:linear-gradient(135deg,#FFD700,#FFA000);color:#1a1a2e;}
.grade-display.a{background:linear-gradient(135deg,#4CAF50,#2E7D32);color:#fff;}
.grade-display.b{background:linear-gradient(135deg,#2196F3,#1565C0);color:#fff;}
.grade-display.c{background:linear-gradient(135deg,#9E9E9E,#616161);color:#fff;}

.stats-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-bottom:20px;text-align:left;
}
.stat-item{background:#f5f5f5;border-radius:10px;padding:10px 12px;}
.stat-label{font-size:11px;color:#999;margin-bottom:2px;}
.stat-value{font-size:16px;font-weight:bold;color:#1a1a2e;}
.success-buttons{display:flex;flex-direction:column;gap:10px;align-items:center;}

/* Rules panel */
.rules-panel{
  width:88%;max-width:380px;
  background:rgba(255,255,255,.95);border-radius:20px;
  padding:28px 24px;box-shadow:0 10px 40px rgba(0,0,0,.3);
  position:relative;animation:panelSlideUp .5s ease-out;
}
.rules-title{font-size:24px;font-weight:900;text-align:center;color:#1a1a2e;margin-bottom:4px;}
.rules-subtitle{font-size:14px;text-align:center;color:#f44336;font-weight:bold;margin-bottom:18px;}
.rules-list{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;}
.rule-item{
  display:flex;align-items:flex-start;gap:12px;padding:10px 14px;
  background:#f8f8f8;border-radius:12px;border-left:4px solid #FFD700;
  animation:ruleStamp .3s ease-out forwards;opacity:0;
}
.rule-item:nth-child(1){animation-delay:.1s}
.rule-item:nth-child(2){animation-delay:.2s}
.rule-item:nth-child(3){animation-delay:.3s}
.rule-item:nth-child(4){animation-delay:.4s}
.rule-item:nth-child(5){animation-delay:.5s}
@keyframes ruleStamp{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.rule-num{
  width:28px;height:28px;border-radius:50%;
  background:#1a1a2e;color:#FFD700;
  display:flex;align-items:center;justify-content:center;
  font-weight:bold;font-size:14px;flex-shrink:0;
}
.rule-text{font-size:13px;color:#333;line-height:1.5;flex:1;}
.rule-text strong{color:#f44336;}

/* Loading */
.loading-content{
  position:relative;width:92%;max-width:400px;
  margin-bottom:40px;display:flex;flex-direction:column;align-items:center;
  z-index:60;
}
.loading-panel{
  background:rgba(18,18,36,.94);border:2px solid rgba(100,200,255,.25);
  border-radius:18px;padding:28px 24px 24px;width:100%;text-align:center;
  backdrop-filter:blur(12px);
  box-shadow:0 0 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
}
.loading-title{color:#e0e0e0;font-size:20px;margin-bottom:16px;letter-spacing:2px;font-weight:500;}
/* File-transfer style progress bar */
.loading-bar-track{
  width:100%;height:26px;
  background:rgba(0,0,0,.5);
  border-radius:13px;overflow:hidden;
  margin-bottom:8px;
  position:relative;
  border:1px solid rgba(255,255,255,.12);
}
.loading-bar-fill{
  height:100%;
  background:linear-gradient(90deg,#1a6fb5,#2196F3,#4db6e0);
  background-size:300% 100%;
  border-radius:13px;
  width:0%;transition:width .25s;
  position:relative;
  animation:barShimmer 2s linear infinite;
}
@keyframes barShimmer{
  0%{background-position:100% 0}
  100%{background-position:0 0}
}
/* Segmented tick marks on the bar */
.loading-bar-fill::after{
  content:'';
  position:absolute;right:0;top:0;bottom:0;
  width:3px;background:rgba(255,255,255,.6);
  border-radius:2px;
}
/* File blocks inside the bar */
.loading-bar-blocks{
  position:absolute;top:0;left:0;right:0;bottom:0;
  display:flex;align-items:stretch;gap:3px;
  padding:4px 6px;pointer-events:none;z-index:2;
}
.loading-bar-block{
  flex:1;background:rgba(255,255,255,0);
  border-radius:3px;
  transition:background .3s;
}
.loading-bar-block.filled{background:rgba(255,255,255,.25);}

.loading-percent{
  color:#4db6e0;font-size:28px;font-weight:900;margin-bottom:4px;
  letter-spacing:2px;text-shadow:0 0 10px rgba(77,182,224,.4);
}
.loading-tip{color:#999;font-size:14px;min-height:18px;transition:opacity .3s;margin-bottom:2px;}
.loading-subtip{position:absolute;bottom:-35px;width:100%;text-align:center;color:rgba(255,255,255,.8);font-size:13px;pointer-events:none;}
.loading-file-icon{display:inline-block;font-size:18px;margin-right:8px;vertical-align:middle;}
.loading-speed{color:#888;font-size:11px;margin-top:2px;}

/* Home */
#screen-home{align-items:center;padding-top:60px;padding-bottom:40px;}
.home-title-area{display:flex;flex-direction:column;align-items:center;margin-top:20px;}
.home-bottom{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;padding:0 30px;margin-bottom:30px;}
.home-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;}

/* Confetti */
.confetti-container{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:160;overflow:hidden;}
.confetti-piece{
  position:absolute;width:10px;height:10px;border-radius:2px;
  animation:confettiFall linear forwards;
}
@keyframes confettiFall{0%{transform:translateY(-100px) rotate(0deg);opacity:1}100%{transform:translateY(105vh) rotate(720deg);opacity:0}}

/* Warning flash */
.boss-warning-flash{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(244,67,54,.3);pointer-events:none;z-index:85;display:none;
  animation:warningFlash .5s ease-in-out;
}
@keyframes warningFlash{0%,100%{opacity:0}50%{opacity:1}}

/* Inventory */
.inventory-indicator{
  position:absolute;top:10px;right:60px;
  background:rgba(76,175,80,.85);color:#fff;
  padding:4px 10px;border-radius:12px;font-size:11px;
  z-index:80;pointer-events:none;display:none;
}

/* Image overlays - common */
.img-overlay{
  position:absolute;pointer-events:none;z-index:20;
}
.img-clickable{
  position:absolute;cursor:pointer;z-index:40;
  transition:transform .15s,filter .15s;
}
.img-clickable:active{transform:scale(.92);}

/* Level action area */
.level-actions{
  position:absolute;bottom:30px;left:0;right:0;
  display:flex;flex-direction:column;align-items:center;
  gap:10px;z-index:70;padding:0 20px;
}

/* ============ LEVEL 2 SPECIFIC ============ */
/* Drawer shake + glow */
@keyframes drawerShake {
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(-3deg)}
  30%{transform:rotate(3deg)}
  45%{transform:rotate(-2deg)}
  60%{transform:rotate(2deg)}
  75%{transform:rotate(-1deg)}
  90%{transform:rotate(1deg)}
}
@keyframes drawerGlow {
  0%,100%{box-shadow:inset 0 0 10px rgba(255,255,255,0.2), 0 0 5px rgba(255,215,0,0.2);}
  50%{box-shadow:inset 0 0 20px rgba(255,255,255,0.5), 0 0 15px rgba(255,215,0,0.6);}
}
.l2-drawer-anim {
  animation: drawerShake .6s ease-in-out infinite, drawerGlow 1.2s ease-in-out infinite;
  cursor:pointer;
}

/* Sparkle particles */
.l2-sparkle {
  position:absolute;pointer-events:none;z-index:150;
  width:8px;height:8px;background:#FFD700;border-radius:50%;
  animation: sparkleBurst .7s ease-out forwards;
}
@keyframes sparkleBurst {
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--sx),var(--sy)) scale(0);opacity:0}
}

/* Arrow hint */
.l2-arrow-hint {
  position:absolute;z-index:60;pointer-events:none;
  color:#FFD700;font-size:16px;font-weight:bold;
  animation: arrowBounce .7s ease-in-out infinite;
  text-shadow:0 0 8px rgba(255,215,0,.6);
}
@keyframes arrowBounce {
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* Drag trail (dashed path from snack to finger) */
.l2-drag-trail {
  position:absolute;pointer-events:none;z-index:130;
  border-left:2px dashed rgba(255,215,0,.7);
  transform-origin:top center;
  display:none;
}

/* Green checkmark on successful hide */
.l2-green-check {
  position:absolute;z-index:140;pointer-events:none;
  font-size:36px;display:none;
  animation: checkPop .4s cubic-bezier(.175,.885,.32,1.275) forwards;
}
@keyframes checkPop {
  0%{transform:scale(0) rotate(-30deg);opacity:0}
  100%{transform:scale(1) rotate(0deg);opacity:1}
}

/* Mouth animation for eating */
.l2-mouth-icon {
  display:inline-block;font-size:24px;
  animation: mouthChomp .3s ease-in-out infinite;
  vertical-align:middle;margin-right:4px;
}
@keyframes mouthChomp {
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(.3)}
}

/* Boss position card */
.l2-boss-card {
  position:absolute;top:52px;right:12px;z-index:85;
  background:rgba(0,0,0,.8);color:#fff;
  padding:6px 14px;border-radius:16px;
  font-size:12px;font-weight:bold;
  pointer-events:none;
  border:2px solid rgba(255,255,255,.3);
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.l2-boss-card.danger {
  border-color:#f44336;background:rgba(244,67,54,.7);
  box-shadow:0 0 16px rgba(244,67,54,.5);
  animation: cardFlash .5s ease-in-out infinite;
}
@keyframes cardFlash {
  0%,100%{box-shadow:0 0 16px rgba(244,67,54,.5)}
  50%{box-shadow:0 0 30px rgba(244,67,54,1)}
}

/* Snack pop animation */
@keyframes snackPop {
  0%{transform:scale(0);opacity:0}
  60%{transform:scale(1.15)}
  100%{transform:scale(1);opacity:1}
}
.l2-snack-pop {
  animation: snackPop .4s cubic-bezier(.175,.885,.32,1.275) forwards;
}

/* Eat zone (hiding spot becomes long-press area) */
.l2-eat-zone {
  position:absolute;z-index:140;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  border-radius:50%;
  /* positioned over the hiding spot */
}
.l2-eat-zone.active { display:flex; }

/* Circular progress ring */
.l2-circular-progress {
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;
}
.l2-circular-bg {
  fill:none;stroke:rgba(255,255,255,.2);stroke-width:4;
}
.l2-circular-fill {
  fill:none;stroke:#4CAF50;stroke-width:4;
  stroke-linecap:round;
  transition:stroke-dashoffset .15s;
  transform:rotate(-90deg);transform-origin:center;
}

/* Eat hint pulsing on the hiding spot */
.l2-eat-hint {
  position:absolute;z-index:142;pointer-events:none;
  color:#fff;font-size:14px;font-weight:bold;
  text-align:center;
  animation:eatHintPulse .8s ease-in-out infinite;
  text-shadow:0 0 10px rgba(255,215,0,.6);
}
@keyframes eatHintPulse {
  0%,100%{transform:scale(1);opacity:.8}
  50%{transform:scale(1.1);opacity:1}
}

/* Snack image shown inside the hiding spot (dimmed, as a reminder) */
.l2-hidden-snack-icon {
  font-size:36px;pointer-events:none;
  animation: snackWiggle 1.5s ease-in-out infinite;
}
@keyframes snackWiggle {
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-5deg)}
  75%{transform:rotate(5deg)}
}

/* ============ LEVEL 3 SPECIFIC ============ */
/* Boss vision cone */
.l3-vision-cone {
  position:absolute;pointer-events:none;z-index:42;
  background: conic-gradient(from 0deg, rgba(244,67,54,.35) 0deg, rgba(244,67,54,.08) 40deg, transparent 40deg, transparent 320deg, rgba(244,67,54,.08) 320deg, rgba(244,67,54,.35) 360deg);
  border-radius:50%;
  border:2px solid rgba(244,67,54,.2);
  transition:transform .3s;
}

/* Safe path (SVG overlay) */
.l3-safe-path {
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:38;
}
.l3-safe-path line,
.l3-safe-path path {
  stroke:#4CAF50;stroke-width:5;stroke-dasharray:10,8;stroke-linecap:round;
  opacity:0;transition:opacity .5s;
  animation: pathFlow 1s linear infinite;
}
@keyframes pathFlow {
  to { stroke-dashoffset: -18; }
}
@keyframes waterFlow {
  0% { transform: translateY(-5px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}
.l3-safe-path.visible line,
.l3-safe-path.visible path {
  opacity:.8;
}

/* Cup glow when held */
@keyframes cupGlow {
  0%,100%{filter:drop-shadow(0 0 4px rgba(76,175,80,.6))}
  50%{filter:drop-shadow(0 0 14px rgba(76,175,80,1))}
}
.l3-cup-held {
  animation:cupGlow .8s ease-in-out infinite;
}

/* Dispenser glow when cup nearby */
@keyframes dispenserGlow {
  0%,100%{box-shadow:0 0 8px rgba(33,150,243,.4)}
  50%{box-shadow:0 0 20px rgba(33,150,243,.8)}
}

/* Drink progress ring (around dispenser) */
.l3-drink-ring {
  position:absolute;pointer-events:none;z-index:48;display:none;
}
.l3-drink-ring svg { width:100%;height:100%; }
.l3-drink-ring-bg { fill:none;stroke:rgba(255,255,255,.15);stroke-width:5; }
.l3-drink-ring-fill { fill:none;stroke:#2196F3;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .1s;transform:rotate(-90deg);transform-origin:center; }

/* Bathroom icon states */
.l3-bathroom-icon {
  position:absolute;z-index:46;pointer-events:none;
  font-size:32px;text-align:center;
  filter:grayscale(1);opacity:.5;
  transition:filter .4s,opacity .4s,transform .3s;
}
.l3-bathroom-icon.active {
  filter:grayscale(0) drop-shadow(0 0 8px #4CAF50);opacity:1;
  animation: bathroomPulse .7s ease-in-out infinite;
}
@keyframes bathroomPulse {
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}

/* Character (draggable) */
.l3-character {
  position:absolute;z-index:55;cursor:grab;touch-action:none;
  width:40px;height:40px;border-radius:50%;
  background:rgba(33,150,243,.35);border:2px solid rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;transition:box-shadow .3s;
}
.l3-character:active{cursor:grabbing;}
.l3-character.on-path{box-shadow:0 0 12px rgba(76,175,80,.6);}
.l3-character.off-path{box-shadow:0 0 14px rgba(244,67,54,.6);}

/* Danger zone indicator when near boss vision */
.l3-danger-flash {
  position:absolute;pointer-events:none;z-index:150;
  background:rgba(244,67,54,.25);border-radius:50%;
  animation:dangerZonePulse .5s ease-in-out infinite;
  display:none;
}
@keyframes dangerZonePulse {
  0%,100%{transform:scale(1);opacity:.3}
  50%{transform:scale(1.2);opacity:.7}
}

/* ============ LEVEL 5 BOSS POPUP ============ */
.l5-boss-popup{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) scale(0);background:rgba(0,0,0,.93);border:3px solid #f44336;border-radius:20px;padding:24px 22px;text-align:center;z-index:200;pointer-events:none;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);min-width:260px;}
.l5-boss-popup.show{transform:translate(-50%,-50%) scale(1);}
.l5-boss-popup-icon{font-size:42px;margin-bottom:6px;}
.l5-boss-popup-title{color:#fff;font-size:18px;font-weight:900;margin-bottom:4px;}
.l5-boss-popup-sub{color:#f44336;font-size:13px;font-weight:bold;}
.l5-boss-popup-finger{font-size:36px;animation:fingerPoint .6s ease-in-out infinite;}
@keyframes fingerPoint{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Backpack inhale particles */
@keyframes inhaleParticle{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--ix),var(--iy)) scale(0);opacity:0}}
.l5-inhale-particle{position:absolute;z-index:145;pointer-events:none;width:6px;height:6px;background:#FFD700;border-radius:50%;animation:inhaleParticle .5s ease-in forwards;}

/* Green check / Red X markers on items */
.l5-item-marker{position:absolute;z-index:39;pointer-events:none;font-size:16px;font-weight:bold;}
.l5-item-marker.ok{color:#4CAF50}
.l5-item-marker.no{color:#f44336}

/* Computer screen region flash during work transition */
@keyframes screenSwitch{0%{background:rgba(33,150,243,.2)}40%{background:rgba(33,150,243,.5)}100%{background:rgba(76,175,80,.2)}}
.l5-screen-switch{position:absolute;z-index:60;pointer-events:none;border-radius:10px;animation:screenSwitch .8s ease-out forwards;}

/* Bottom classification panel */
.l5-classify-panel{position:absolute;bottom:52px;left:3%;right:3%;display:flex;gap:8px;z-index:58;pointer-events:none;}
.l5-classify-box{flex:1;border-radius:12px;padding:8px 10px;text-align:center;font-size:10px;font-weight:bold;}
.l5-classify-box.packable{background:rgba(76,175,80,.15);border:1px solid rgba(76,175,80,.45);color:#4CAF50}
.l5-classify-box.forbidden{background:rgba(244,67,54,.12);border:1px solid rgba(244,67,54,.4);color:#f44336}

/* ============ LEVEL 5 SPECIFIC ============ */
/* Door warning before boss probe */
.l5-door-warning {
  position:absolute;top:8px;right:8px;z-index:82;
  background:rgba(255,152,0,.9);color:#fff;
  padding:5px 12px;border-radius:12px;font-size:11px;font-weight:bold;
  pointer-events:none;display:none;
  animation:doorShake .3s ease-in-out infinite;
}
@keyframes doorShake {
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}

/* Computer status indicator */
.l5-computer-status {
  position:absolute;bottom:80px;left:50%;transform:translateX(-50%);
  z-index:65;pointer-events:none;
  background:rgba(0,0,0,.7);color:#4CAF50;
  padding:4px 14px;border-radius:12px;font-size:11px;
  border:1px solid #4CAF50;
}
.l5-computer-status.off {
  color:#f44336;border-color:#f44336;
}

/* Backpack glow */
@keyframes backpackGlow {
  0%,100%{box-shadow:0 0 10px rgba(255,215,0,.3)}
  50%{box-shadow:0 0 25px rgba(255,215,0,.7)}
}
.l5-backpack-glow {
  animation:backpackGlow 1.2s ease-in-out infinite;
}

/* Item label (forbidden tag) */
.l5-forbidden-tag {
  position:absolute;z-index:36;pointer-events:none;
  font-size:10px;color:#f44336;font-weight:bold;
  background:rgba(0,0,0,.6);padding:2px 6px;border-radius:6px;
}

/* Packed item checkmark */
.l5-packed-check {
  position:absolute;z-index:37;pointer-events:none;
  font-size:14px;color:#4CAF50;font-weight:bold;display:none;
}

/* Item vibrancy when draggable */
.draggable-item.l5-packable {
  filter:drop-shadow(0 2px 4px rgba(76,175,80,.4));
}
.draggable-item.l5-forbidden-drag {
  filter:drop-shadow(0 2px 4px rgba(244,67,54,.4));
}

/* Pretend work flash */
@keyframes workFlash {
  0%,100%{opacity:1}
  50%{opacity:.7}
}
.l5-working {
  animation:workFlash .3s ease-in-out 3;
}

/* Character Running Animation */
@keyframes playerRunAnim {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(5deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-4px) rotate(-5deg); }
}

.running-char {
  background-image: url('./images/13/主角.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: playerRunAnim 0.3s linear infinite;
}

/* Static Character */
.static-char {
  background-image: url('./images/13/主角.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ============ LOADING PAGE ============ */
/* Clock shake in top-left */
@keyframes clockShake {
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(-2deg)}
  30%{transform:rotate(2deg)}
  45%{transform:rotate(-1.5deg)}
  60%{transform:rotate(1.5deg)}
  75%{transform:rotate(-1deg)}
  90%{transform:rotate(1deg)}
}
.l1-clock{position:absolute;z-index:50;animation:clockShake .5s ease-in-out infinite;}

/* Zzz float + fade */
@keyframes zzzFloat {
  0%{transform:translateY(0);opacity:1}
  60%{transform:translateY(-18px);opacity:.8}
  100%{transform:translateY(-28px);opacity:0}
}
.l1-zzz{position:absolute;z-index:45;pointer-events:none;font-size:18px;color:#fff;font-weight:bold;text-shadow:0 0 6px rgba(255,255,255,.5);animation:zzzFloat 2s ease-out forwards;}

/* Level 1 animations */
/* Boss walking from door to desk */
@keyframes bossWalk {
  0%{left:85%;opacity:0;}
  10%{opacity:1;}
  100%{left:25%;opacity:1;}
}
.l1-boss-walking{
  position:absolute;
  bottom:12%;
  width:15%;
  height:auto;
  z-index:60;
  animation:bossWalk 42s linear forwards;
}

/* Window flash animations */
@keyframes windowFlashRed {
  0%,100%{box-shadow:0 0 0 transparent;}
  50%{box-shadow:0 0 15px rgba(255,0,0,0.8), inset 0 0 10px rgba(255,0,0,0.3);}
}
@keyframes windowFlashGreen {
  0%,100%{box-shadow:0 0 0 transparent;}
  25%{box-shadow:0 0 12px rgba(0,255,0,0.6);}
  50%{box-shadow:0 0 0 transparent;}
  75%{box-shadow:0 0 12px rgba(0,255,0,0.6);}
}
.window-flash-red{animation:windowFlashRed 0.4s ease-out 2;}
.window-flash-green{animation:windowFlashGreen 0.6s ease-out 1;}

/* Window close/snap animation */
@keyframes windowClose {
  0%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.1);}
  100%{transform:scale(0);opacity:0;}
}
.window-closing{animation:windowClose 0.3s ease-out forwards;}

/* Typing progress ring */
@keyframes typingGlow {
  0%,100%{box-shadow:0 0 20px rgba(0,255,100,0.3);}
  50%{box-shadow:0 0 40px rgba(0,255,100,0.6);}
}
.typing-progress-ring{
  position:absolute;
  width:60px;
  height:60px;
  border-radius:50%;
  border:4px solid rgba(0,255,100,0.3);
  border-top-color:#00ff64;
  animation:typingGlow 1s ease-in-out infinite;
}
.typing-keyboard-glow{
  position:absolute;
  bottom:15%;
  left:30%;
  width:40%;
  height:8%;
  background:rgba(0,255,100,0.15);
  border-radius:8px;
  animation:typingGlow 1s ease-in-out infinite;
  pointer-events:none;
  z-index:35;
}

/* Typing hands animation */
.l1-typing-hands{
  /* JS-driven animation, no CSS transition */
}

/* Edge warning intensity based on boss distance */
.edge-warning{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  pointer-events:none;
  z-index:100;
  box-shadow:inset 0 0 0 transparent;
  transition:box-shadow 0.3s;
}
.edge-warning.level1{box-shadow:inset 0 0 80px rgba(255,0,0,0);}
.edge-warning.level2{box-shadow:inset 0 0 60px rgba(255,0,0,0.2);}
.edge-warning.level3{box-shadow:inset 0 0 40px rgba(255,0,0,0.4);}
.edge-warning.level4{box-shadow:inset 0 0 20px rgba(255,0,0,0.6);}
.edge-warning.level5{box-shadow:inset 0 0 10px rgba(255,0,0,0.8);}

/* Level screen flicker overlay - starts invisible, brief subtle brightening */
@keyframes lvScreenFlicker {
  0%,100%{opacity:0}
  3%{opacity:.045}
  5%{opacity:0}
  12%{opacity:.035}
  13%{opacity:0}
  19%{opacity:.05}
  21%{opacity:0}
  28%{opacity:.03}
  29%{opacity:0}
  35%{opacity:.04}
  37%{opacity:0}
  51%{opacity:.045}
  53%{opacity:0}
  67%{opacity:.038}
  69%{opacity:0}
  76%{opacity:.042}
  77%{opacity:0}
  90%{opacity:.035}
  92%{opacity:0}
}
.lv-screen-flicker{animation:lvScreenFlicker 6s steps(1) infinite;}

/* Phone breathing glow */
@keyframes phoneBreathe {
  0%,100%{filter:brightness(.6)}
  50%{filter:brightness(.9)}
}
.l1-phone-glow{animation:phoneBreathe 2s ease-in-out infinite;}



/* Screen darken overlay when boss passes */
.l1-darken-overlay{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.3);z-index:41;pointer-events:none;
  opacity:0;transition:opacity .3s;
}
.l1-darken-overlay.active{opacity:1;}

/* Page 2 Title smash animation */
@keyframes titleSmash {
  0%{transform:translateY(-300px) rotate(-5deg);opacity:0;}
  60%{transform:translateY(0) rotate(1deg);opacity:1;}
  75%{transform:translateY(-15px) rotate(-0.5deg);}
  90%{transform:translateY(-3px) rotate(0.3deg);}
  100%{transform:translateY(0) rotate(0);}
}
@keyframes titleDropIn {
  0% { transform: translateX(-50%) translateY(-150%); opacity: 0; }
  60% { transform: translateX(-50%) translateY(5%); opacity: 1; }
  70% { transform: translateX(-50%) translateY(-3%) rotate(-2deg); }
  80% { transform: translateX(-50%) translateY(1%) rotate(1.5deg); }
  90% { transform: translateX(-50%) translateY(-0.5%) rotate(-0.5deg); }
  100% { transform: translateX(-50%) translateY(0) rotate(0); }
}
@keyframes titleShake {
  0%,100%{text-shadow:none;}
  10%{text-shadow:-2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;}
  20%{text-shadow:2px -2px 0 #fff, -2px -2px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff;}
  30%{text-shadow:-2px 2px 0 #fff, 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff;}
  40%{text-shadow:none;}
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.home-title-area img{
  animation:titleSmash 0.8s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
.home-title-area img:first-child{
  animation:titleSmash 0.8s cubic-bezier(0.25,0.46,0.45,0.94) forwards, titleShake 0.3s ease-out 0.6s;
}

/* Button breathing highlight */
@keyframes btnBreath {
  0%,100%{box-shadow:0 0 10px rgba(255,215,0,0.3);transform:scale(1);}
  50%{box-shadow:0 0 25px rgba(255,215,0,0.6), 0 0 40px rgba(255,215,0,0.3);transform:scale(1.02);}
}
.home-bottom .game-btn,
.home-bottom .home-btn-img{
  animation:btnBreath 1.5s ease-in-out infinite;
}

/* Fish icon swing */
@keyframes fishSwing {
  0%,100%{transform:rotate(-5deg);}
  50%{transform:rotate(5deg);}
}
.home-bottom .game-btn span:first-child{
  display:inline-block;
  animation:fishSwing 1s ease-in-out infinite;
}

/* Phone screen flicker */
@keyframes homePhoneFlicker {
  0%,100%{opacity:1;}
  48%{opacity:0.95;}
  50%{opacity:1;}
  52%{opacity:0.92;}
  54%{opacity:1;}
}
.home-phone-flicker{
  animation:homePhoneFlicker 3s steps(1) infinite;
}

/* Eye scan left-right */
@keyframes eyeScan {
  0%,100%{transform:scaleX(1);}
  50%{transform:scaleX(-1);}
}
.home-eye-scan{
  animation:eyeScan 2s ease-in-out infinite;
}

/* Boss door creak */
@keyframes bossDoorCreak {
  0%,100%{transform:scaleY(1);opacity:0.8;}
  50%{transform:scaleY(1.02);opacity:0.9;}
}
.home-boss-door{
  animation:bossDoorCreak 4s ease-in-out infinite;
}

/* Boss eyebrow twitch */
@keyframes bossEyebrow {
  0%,100%{transform:translateY(0);}
  2%{transform:translateY(-2px);}
  4%{transform:translateY(0);}
  6%{transform:translateY(-1px);}
  8%{transform:translateY(0);}
}
.home-boss-eyebrow{
  animation:bossEyebrow 8s ease-in-out infinite;
}

/* Colleague drinking */
@keyframes colleagueDrink {
  0%,100%{transform:rotate(0);}
  10%{transform:rotate(-10deg);}
  20%{transform:rotate(0);}
}
.home-colleague-drink{
  animation:colleagueDrink 6s ease-in-out infinite;
}

/* Hamburger eating */
@keyframes hamburgerEat {
  0%,100%{transform:scale(1);}
  5%{transform:scale(0.95);}
  10%{transform:scale(1);}
}
.home-hamburger{
  animation:hamburgerEat 5s ease-in-out infinite;
}

.home-btn-img{
  cursor:pointer;
  transition:transform 0.15s, filter 0.15s;
}
.home-btn-img:active{
  transform:scale(0.95);
  filter:brightness(0.9);
}

/* Dog tail wag */
@keyframes dogTailWag {
  0%,100%{transform:rotate(-10deg);}
  50%{transform:rotate(10deg);}
}
.home-dog-tail{
  animation:dogTailWag 0.5s ease-in-out infinite;
}

/* White flash transition */
@keyframes whiteFlash {
  0%{opacity:0}
  30%{opacity:1}
  100%{opacity:0}
}
.l1-white-flash{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:#fff;z-index:300;pointer-events:none;
  opacity:0;
}

/* Tap to start overlay */
.tap-to-start{
  position:absolute;top:0;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  background:rgba(0,0,0,.5);z-index:250;
  transition:opacity .5s;
}
.tap-to-start.hidden{opacity:0;pointer-events:none;}
.tap-icon{font-size:56px;animation:tapBounce 1.5s ease-in-out infinite;}
.tap-text{color:#fff;font-size:20px;font-weight:bold;margin-top:12px;text-shadow:0 2px 8px rgba(0,0,0,.8);letter-spacing:2px;}
@keyframes tapBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* Loading bar stutter */
@keyframes barStutter {
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(1px)}
  75%{transform:translateX(-1px)}
}
.l1-bar-stutter{animation:barStutter .15s ease-in-out 2;}

/* Loading panel image background */
.l1-loading-panel-img{
  position:relative;width:100%;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;
  padding:28px 24px;
}

/* Sound indicator pulse */
@keyframes soundPulse {
  0%,100%{box-shadow:0 0 0 0 rgba(255,215,0,.4)}
  50%{box-shadow:0 0 0 8px rgba(255,215,0,0)}
}
.l1-sound-dot{
  position:absolute;width:6px;height:6px;
  background:#FFD700;border-radius:50%;
  animation:soundPulse .6s ease-out forwards;
  pointer-events:none;z-index:50;
}

/* ============ SHARE POSTER ============ */
.l5-share-poster {
  width:92%;max-width:380px;
  display:flex;flex-direction:column;align-items:center;
  padding:24px 18px;
  border-radius:24px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 8px 36px rgba(0,0,0,.4);
}

/* Responsive */
@media(max-width:360px){
  .rules-title{font-size:20px}
  .rule-text{font-size:11px}
  .game-btn{font-size:16px;padding:12px 24px}
  .game-btn.primary{font-size:18px}
}
@media(min-width:431px){
  #game-container{border-radius:20px;margin:10px 0}
}