:root{

  --bg-h: 210;           /* 背景色相 */

  --bg-s: 40%;           /* 背景饱和 */

  --bg-l: 96%;           /* 背景亮度（会随 combo 提升） */

  --gamebg: hsl(var(--bg-h), var(--bg-s), var(--bg-l));

  --note-left: linear-gradient(180deg,#7bd7ff,#3bb6ff);

  --note-right: linear-gradient(180deg,#ffd166,#ffb347);

  --hit: #e9eef8;

  --text: #111;

  --accent: #ffb347;

}



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

html,body{width:100%;height:100%;overflow:hidden}

body{

  font-family:"Helvetica Neue", Arial, sans-serif;

  background:var(--gamebg);

  color:var(--text);

  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;

}



/* HUD */

#hud{width:100%;padding:10px 24px;display:flex;align-items:center;gap:12px;position:absolute;top:0;left:0;z-index:90}

#title{font-weight:700}

#controls{display:flex;align-items:center;gap:8px;margin-left:16px}

#score{margin-left:auto;font-weight:700}

#hint{opacity:0.7;font-size:13px}



/* 游戏区全屏 */

#gameArea{

  width:100vw;height:100vh;

  background:url('assets/6.png') center/cover no-repeat;

  position:relative;overflow:hidden;

  display:flex;align-items:flex-start;justify-content:space-between;

  padding:18px 60px;z-index:1

}



.lane{width:45%;height:100%;position:relative;pointer-events:none}



.hit-zone{

  position:absolute;bottom:28px;width:260px;height:260px;border-radius:50%;

  background:var(--hit);opacity:0.5;

  display:flex;align-items:center;justify-content:center;

  box-shadow:0 10px 30px rgba(0,0,0,0.12);

  user-select:none;touch-action:manipulation;cursor:pointer;

  transform: translateX(-50%);

}

.hit-zone.left{ left:28%; }

.hit-zone.right{ left:72%; }

.hit-zone .key{ font-weight:800;color:#222;font-size:18px }



.note{

  position:absolute;width:180px;height:180px;border-radius:50%;

  left:50%;transform:translateX(-50%);top:-120px;

  display:flex;align-items:center;justify-content:center;

  font-weight:700;pointer-events:none;

  box-shadow:0 8px 18px rgba(0,0,0,0.18);

  background-size:contain;

  background-repeat:no-repeat;

  background-position:center;

}

.note.left{background-image:url('assets/5.png');}

.note.right{background-image:url('assets/4.png');}



#judgeText{ position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:46px;font-weight:900;text-shadow:0 6px 30px rgba(0,0,0,0.12);pointer-events:none;opacity:0;transition:opacity 0.12s ease, font-size 0.3s ease, transform 0.3s ease;z-index:85}

.judge-glow { text-shadow: 0 0 12px rgba(255,255,255,0.9), 0 6px 24px rgba(0,0,0,0.16); }

.judge-glow.enhanced {

  font-size:72px !important;

  text-shadow: 

    0 0 20px rgba(255,0,128,0.8),

    0 0 40px rgba(128,0,255,0.6),

    0 0 60px rgba(0,255,255,0.4),

    0 0 80px rgba(255,255,0,0.3),

    0 6px 30px rgba(0,0,0,0.3);

  animation: perfectPulse 0.6s ease-out;

}

@keyframes perfectPulse {

  0% { transform: translate(-50%,-50%) scale(0.8); opacity:0; }

  50% { transform: translate(-50%,-50%) scale(1.15); }

  100% { transform: translate(-50%,-50%) scale(1); opacity:1; }

}



/* START 层 */

#startOverlay{

  position:absolute;inset:0;

  /* 开始界面时将除 8.png 外的区域整体压暗到约 40% 亮度 */

  background:rgba(0,0,0,0.6);

  display:flex;align-items:center;justify-content:center;

  z-index:100;cursor:pointer;

}

#startOverlay.hidden{opacity:0;pointer-events:none}

#startImg{

  /* 原始宽度放大为 3.5 倍：260 * 3.5 = 910 */

  width:880px;

  transition:transform 0.2s ease;

  user-select:none;

  pointer-events:auto;

}

#startImg:hover{

  transform:scale(1.3);

}



/* 摄像头窗口（右上角，小窗，轻微下移 top:60px） */

#camWrap{position:absolute;top:60px;right:12px;width:260px;height:200px;z-index:95;border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.16);background:rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;backdrop-filter: blur(4px);}

#input_video{width:260px;height:200px;object-fit:cover;transform:scaleX(-1);display:block}

#camLabel{position:absolute;bottom:6px;left:8px;font-size:12px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.6);pointer-events:none}



/* 粒子容器（用于爆炸效果） */

#particleLayer{position:absolute;inset:0;pointer-events:none;z-index:80}



/* 屏幕四周边框（根据连击变色） */

#comboBorder{

  position:fixed;inset:0;pointer-events:none;z-index:70;

  border:0 solid transparent;

  transition:border-color 0.3s ease, border-width 0.3s ease;

  box-shadow:inset 0 0 0 0 rgba(255,255,255,0);

}

#comboBorder.active{

  border-width:8px;

  box-shadow:inset 0 0 60px 20px rgba(255,255,255,0.15);

}



/* 12秒后的渐变彩色光效 */

#rainbowGlow{

  position:fixed;inset:0;pointer-events:none;z-index:69;

  opacity:0;

  transition:opacity 0.8s ease;

  background:transparent;

  border:12px solid;

  border-image:linear-gradient(45deg, #ff0080, #ff8000, #80ff00, #00ff80, #0080ff, #8000ff, #ff0080) 1;

  animation:rainbowRotate 3s linear infinite;

  box-shadow:

    inset 0 0 80px 30px rgba(255,255,255,0.1),

    inset 0 0 120px 50px rgba(255,0,128,0.15),

    0 0 100px 40px rgba(255,0,128,0.2),

    0 0 150px 60px rgba(128,0,255,0.15),

    0 0 200px 80px rgba(0,255,255,0.1);

}

#rainbowGlow.active{

  opacity:1;

}

@keyframes rainbowRotate{

  0%{ 

    filter:hue-rotate(0deg);

    border-image-source:linear-gradient(45deg, #ff0080, #ff8000, #80ff00, #00ff80, #0080ff, #8000ff, #ff0080);

  }

  100%{ 

    filter:hue-rotate(360deg);

    border-image-source:linear-gradient(225deg, #ff0080, #ff8000, #80ff00, #00ff80, #0080ff, #8000ff, #ff0080);

  }

}



/* 结束结算层 */

#endOverlay{

  position:absolute;inset:0;

  background:rgba(0,0,0,0.55);

  display:flex;align-items:center;justify-content:center;

  flex-direction:column;z-index:110;

  color:#fff;text-align:center;

}

#endOverlay.hidden{display:none;}

#endPanel{

  background:rgba(255,255,255,0.92);

  color:#111;

  padding:24px 32px;

  border-radius:18px;

  box-shadow:0 14px 40px rgba(0,0,0,0.25);

  max-width:420px;width:90%;

}

#endPanel h2{

  margin-bottom:12px;

  font-size:26px;

}

#finalScoreText{font-size:20px;margin-bottom:10px;font-weight:700;}

#rankList{margin:10px 0 4px;padding-left:18px;text-align:left;max-height:260px;overflow:auto;font-size:14px;}

#rankList li{margin-bottom:4px;}

#restartHint{margin-top:10px;font-size:14px;color:#666;}



/* 小 UI */

.btn{padding:6px 10px;border-radius:8px;background:#fff;border:1px solid rgba(0,0,0,0.06);cursor:pointer;font-weight:600}

.slider{width:160px}



@media (max-width:640px){

  .hit-zone{width:160px;height:160px;bottom:18px}

  .note{width:128px;height:128px}

  #judgeText{font-size:32px}

  .hit-zone.left{ left:32%; }.hit-zone.right{ left:68%; }

  #startText{font-size:50px;} #startHint{font-size:16px;}

  #camWrap{width:160px;height:120px;top:48px;right:8px}

  #input_video{width:160px;height:120px}

  #hud{padding:8px}

}



/* 判定动画细节 */

.judge-anim-scale {

  animation: judgePop 420ms cubic-bezier(.22,.9,.36,1);

}

@keyframes judgePop {

  0% { transform: translate(-50%,-50%) scale(0.8); opacity:0 }

  40% { transform: translate(-50%,-50%) scale(1.12); opacity:1 }

  100% { transform: translate(-50%,-50%) scale(1); opacity:0 }

}



/* 粒子样式（动态创建） */

.particle {

  position:absolute;

  width:10px;height:10px;border-radius:50%;pointer-events:none;z-index:80;opacity:1;

  transform-origin:center center;

  will-change:transform,opacity;

  box-shadow:0 0 8px currentColor;

}

.particle.large {

  width:20px;height:20px;

  box-shadow:0 0 16px currentColor;

}

.particle.small {

  width:6px;height:6px;

  box-shadow:0 0 4px currentColor;

}

.particle.star {

  border-radius:0;

  background:transparent;

  width:16px;height:16px;

  clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

}