html,body{
  margin:0;
  padding:0;
  /* 使用 CSS 變數控制背景中心位置，實現 3D 效果 */
  --bg-x: 50%;
  --bg-y: 30%;
  background: radial-gradient(circle at var(--bg-x) var(--bg-y), #1a237e 0%, #0c1033 40%, #000000 100%);
  color:#fff;
  /* 優先使用*/
  font-family: "Varela Round", "Segoe UI", "Microsoft JhengHei", sans-serif;
  /* font-family: 'Archivo Black', 'Arial Black', 'Impact', sans-serif;  */
  height:100%;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: background 0.1s ease-out;
  /* 防止手機雙擊縮放 */
  touch-action: manipulation;
}

/* 全畫面背景閃光層 */
html::before{
  content:"";
  position:fixed;
  inset:0;
  background:var(--glow);
  opacity:0;
  pointer-events:none;
  z-index:999;
}

html.flash::before{
  animation:screenFlash 0.25s ease;
}

@keyframes screenFlash{
  from{ opacity:0.45; }
  to{ opacity:0; }
}

#app{
  display:flex;
  flex-direction:column;
  align-items:center;
  position: relative;
  min-height: 100vh;
  /* 手機版高度修正 */
  min-height: -webkit-fill-available;
  width: 100%;
  perspective: 1000px;
  /* 確保內容不會溢出 */
  overflow: hidden; 
}

/* --- 舞台燈光特效區 (前層：其他燈光) --- */
#stage-lights {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* 保持在前層，形成光霧穿透效果 */
  z-index: 15; 
  opacity: 0;
  transition: opacity 1.5s ease, transform 0.1s ease-out;
}

/* --- 舞台燈光特效區 (後層：中間主燈) --- */
#stage-light-center {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* 放在人物(z-index:10)的後面 */
  z-index: 1; 
  opacity: 0;
  transition: opacity 1.5s ease, transform 0.1s ease-out;
}

body.concert-mode #stage-lights,
body.concert-mode #stage-light-center {
  opacity: 1;
}

/* 上方燈光樣式 - 霧感光柱風格 */
.beam {
  position: absolute;
  top: -20%;
  width: 120px; /* 縮窄寬度，讓它像一道光柱 */
  height: 160%; 
  filter: blur(30px); /* 高模糊度製造霧感 */
  transform-origin: 50% 0%;
  mix-blend-mode: screen; 
  opacity: 1.0; /* 不透明度全開，靠漸層控制濃淡 */
}

/* 9盞燈配置 */
.beam-1 { left: 5%;  animation: wild-top-left 3.9s infinite ease-in-out alternate; background: linear-gradient(180deg, rgba(255, 0, 100, 0.6) 0%, rgba(255, 0, 100, 0.1) 50%, transparent 80%); }
.beam-2 { left: 15%; animation: wild-top-mid 4.7s infinite ease-in-out alternate-reverse; background: linear-gradient(180deg, rgba(0, 255, 255, 0.6) 0%, rgba(0, 255, 255, 0.1) 50%, transparent 75%); }
.beam-3 { left: 25%; animation: wild-top-right 3.6s infinite ease-in-out alternate; background: linear-gradient(180deg, rgba(255, 255, 0, 0.6) 0%, rgba(255, 255, 0, 0.1) 50%, transparent 70%); }
.beam-4 { left: 35%; animation: wild-top-left 4.1s infinite ease-in-out alternate; background: linear-gradient(180deg, rgba(255, 100, 0, 0.6) 0%, rgba(255, 100, 0, 0.1) 50%, transparent 70%); }
/* 中間主燈 */
.beam-5 { left: 50%; width: 180px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 60%, transparent 80%); animation: wild-top-center 3.3s infinite alternate; z-index: 2; } 
.beam-6 { left: 65%; animation: wild-top-right 4.0s infinite ease-in-out alternate; background: linear-gradient(180deg, rgba(0, 255, 100, 0.6) 0%, rgba(0, 255, 100, 0.1) 50%, transparent 70%); }
.beam-7 { left: 75%; animation: wild-top-mid 3.8s infinite ease-in-out alternate-reverse; background: linear-gradient(180deg, rgba(0, 100, 255, 0.6) 0%, rgba(0, 100, 255, 0.1) 50%, transparent 70%); }
.beam-8 { left: 85%; animation: wild-top-left 4.5s infinite ease-in-out alternate; background: linear-gradient(180deg, rgba(100, 0, 255, 0.6) 0%, rgba(100, 0, 255, 0.1) 50%, transparent 75%); }
.beam-9 { left: 95%; animation: wild-top-right 3.9s infinite ease-in-out alternate; background: linear-gradient(180deg, rgba(255, 0, 255, 0.6) 0%, rgba(255, 0, 255, 0.1) 50%, transparent 80%); }

/* 上方燈光動畫 - 狂野掃射 */
@keyframes wild-top-left {
  0% { transform: rotate(-20deg) scaleY(1); }
  100% { transform: rotate(40deg) scaleY(1.2); } 
}
@keyframes wild-top-right {
  0% { transform: rotate(20deg) scaleY(1); }
  100% { transform: rotate(-40deg) scaleY(1.2); } 
}
@keyframes wild-top-mid {
  0% { transform: rotate(-30deg) scaleY(1.1); }
  100% { transform: rotate(30deg) scaleY(1.1); } 
}
@keyframes wild-top-center {
  0% { transform: translateX(-50%) rotate(-15deg) scaleY(0.9); opacity: 0.6; }
  100% { transform: translateX(-50%) rotate(15deg) scaleY(1.3); opacity: 0.9; } 
}

/* PC 版可以掃得更開 */
@media (min-width: 1024px) {
  @keyframes wild-top-left { 0% { transform: rotate(-30deg) scaleY(1); } 100% { transform: rotate(50deg) scaleY(1.3); } }
  @keyframes wild-top-right { 0% { transform: rotate(30deg) scaleY(1); } 100% { transform: rotate(-50deg) scaleY(1.3); } }
}

@keyframes colorShift {
  0% { filter: hue-rotate(0deg) brightness(1.2); }
  100% { filter: hue-rotate(360deg) brightness(1.2); }
}

/* 隱藏地板聚光燈 */
.floor-spot {
  display: none;
}

/* --- Nice 模式的 5 盞掃射聚光燈 (下方往上) --- */
#nice-lights {
  position: absolute;
  bottom: 25%; 
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 120vh;
  pointer-events: none;
  z-index: 15; 
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 50px; 
  transition: opacity 1s ease;
}

#nice-lights.active {
  opacity: 1;
}

.nice-beam {
  width: 80px;
  height: 150%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 80%);
  transform-origin: bottom center;
  filter: blur(15px);
  mix-blend-mode: screen; 
}

@keyframes nice-sweep-left {
  0% { transform: rotate(-45deg) scaleY(1); }
  100% { transform: rotate(15deg) scaleY(1.1); }
}
@keyframes nice-sweep-right {
  0% { transform: rotate(45deg) scaleY(1); }
  100% { transform: rotate(-15deg) scaleY(1.1); }
}
@keyframes nice-sweep-mid {
  0% { transform: rotate(-25deg) scaleY(1); }
  100% { transform: rotate(25deg) scaleY(1.2); }
}

.nice-beam:nth-child(1) { animation: nice-sweep-left 2.5s infinite ease-in-out alternate; background: linear-gradient(to top, rgba(255, 0, 255, 0.3) 0%, transparent); }
.nice-beam:nth-child(2) { animation: nice-sweep-mid 3.0s infinite ease-in-out alternate-reverse; background: linear-gradient(to top, rgba(0, 255, 255, 0.3) 0%, transparent); }
.nice-beam:nth-child(3) { animation: nice-sweep-right 2.2s infinite ease-in-out alternate; background: linear-gradient(to top, rgba(255, 255, 0, 0.3) 0%, transparent); width: 100px; z-index: 2; }
.nice-beam:nth-child(4) { animation: nice-sweep-mid 2.8s infinite ease-in-out alternate; background: linear-gradient(to top, rgba(0, 255, 100, 0.3) 0%, transparent); }
.nice-beam:nth-child(5) { animation: nice-sweep-right 2.6s infinite ease-in-out alternate-reverse; background: linear-gradient(to top, rgba(255, 100, 0, 0.3) 0%, transparent); }

/* --- 31-60 分數專用的橫向雷射特效 --- */
#side-lasers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 14; /* 在人物(10)後面，但在背景前 */
  opacity: 0;
  transition: opacity 1s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#side-lasers.active {
  opacity: 1;
}

.laser {
  position: absolute;
  height: 6px; /* 雷射光束很細 */
  width: 120%; /* 超出畫面寬度 */
  background: rgba(0, 255, 128, 0.8); /* 螢光綠 */
  box-shadow: 0 0 10px #00ff80, 0 0 20px #00ff80; /* 發光暈 */
  mix-blend-mode: screen;
}

.laser.l-left {
  left: -10%;
  top: 15%; 
  transform-origin: left center;
  animation: laser-sweep-left 0.8s infinite alternate ease-in-out;
}

.laser.l-right {
  right: -10%;
  top: 45%; 
  transform-origin: right center;
  animation: laser-sweep-right 0.8s infinite alternate ease-in-out;
}

.laser.delay {
  opacity: 0.6;
  background: rgba(0, 255, 255, 0.8); /* 青色 */
  box-shadow: 0 0 10px #00ffff;
  animation-duration: 1.2s; /* 速度不同 */
}
.laser.l-left.delay { top: 35%; } 
.laser.l-right.delay { top: 25%; } 

@keyframes laser-sweep-left {
  0% { transform: rotate(-15deg) scaleX(1); opacity: 0.3; }
  100% { transform: rotate(25deg) scaleX(1.2); opacity: 1; }
}

@keyframes laser-sweep-right {
  0% { transform: rotate(15deg) scaleX(1); opacity: 0.3; }
  100% { transform: rotate(-25deg) scaleX(1.2); opacity: 1; }
}


.dust {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px #fff;
  opacity: 0;
  animation: floatDust linear infinite;
}

@keyframes floatDust {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: var(--max-opacity); }
  90% { opacity: var(--max-opacity); }
  100% { transform: translateY(-100vh) translateX(var(--drift)); opacity: 0; }
}

#shaky-wrapper {
  position: relative;
  margin-top:30px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content; 
  z-index: 10;
  transition: transform 0.1s ease-out;
}

#confetti-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50; 
}

#what-text {
  position: absolute;
  top: 70%;
  transform: translate(-85%, -50%) rotate(-15deg);
  font-size: 50px;
  font-weight: 900;
  color: #ffeb3b;
  text-shadow: 4px 4px 0px #e91e63, 8px 8px 0px rgba(0,0,0,0.3);
  opacity: 0; 
  z-index: 100;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.8s ease, transform 0.3s ease;
}

#what-text.active {
  opacity: 1;
}

@media (min-width: 2560px) {
  #combo-container {
    transform: translate(65%, -272%) scale(0.3) !important;
  }
  
  #combo-label {
    font-size: 7vmin !important; 
  }
}

@media (max-width: 1600px) {
  #combo-container {
    transform: translate(75%, -250%) scale(0.7) !important;
  }
}

@media (max-width: 1440px) {
  #combo-container {
    transform: translate(70%, -230%) scale(0.7) !important;
  }
}

@media (max-width: 1024px) {
  #combo-container {
    transform: translate(70%, -200%) scale(0.7) !important;
  }
}

@media (max-width: 768px) {
  #what-text {
    font-size: 5.2vw; 
    left: 12%;      
    transform: translate(-50%, -50%) rotate(-15deg);
  }

  /* 手機版 (768px以下) 修正跑版問題 */
  #combo-container {
    top: 25% !important; 
    left: 50% !important;
    transform: translate(28%, -5%) scale(0.7) !important;
    width: 300px !important;
  }

  #combo-label {
    font-size: 8vw !important; 
  }
}

@media (max-width: 430px) {
  /* 手機版佈局優化 */
  #app {
    height: 100vh !important;
    height: -webkit-fill-available !important;
    justify-content: flex-start;
    padding-bottom: 5px;
    box-sizing: border-box;
    overflow: hidden;
  }

  #combo-container {
    font-family: 'Archivo Black', 'Arial Black', 'Impact', sans-serif; 
    position: relative !important; 
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 40px !important; 
    width: 100% !important; 
    padding: 0 5px !important; 
    box-sizing: border-box !important; 
    min-height: 50px !important; 
    flex-shrink: 0;
    opacity: 0; 
    display: flex; 
    flex-direction: row !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 5px !important; 
  }

  #combo-container.initial-state #combo-label {
    display: none;
  }

  #combo-count {
    letter-spacing: 5px; 
    margin: 0 !important;
    font-size: 14vw !important; 
    text-shadow: 0 0 8px rgba(0,0,0,0.4), 0 0 16px rgba(0,0,0,0.4) !important;
    line-height: 1 !important; 
    display: block; 
  }

  #combo-label {
    margin: 0 !important; 
    font-size: 14vw !important; 
    line-height: 1 !important; 
    transform: none; 
    position: static; 
    margin-top: -1.5vw !important;  
    display: flex;
    align-items: center;
  }

  html.is-mobile #combo-label {
    margin-top: -3.5vw !important;
  }
  
  #shaky-wrapper {
    flex-grow: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    margin-top: 0 !important;
    width: 100%;
    position: relative;
  }

  #shaky {
    width: 100vw !important; 
    height: auto !important;
    margin: 0 0 10px 0;
    max-height: 45vh; 
    object-fit: contain;
  }

  #what-text {
    font-size: 6vw !important;
    top: 70% !important; 
    left: 20% !important;
  }

  #keyboard-container {
    flex-shrink: 0; 
    width: calc(100% - 20px) !important; 
    margin: 0 auto 5px auto !important; 
  }

  #start-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #start-title {
    position: fixed !important; 
    top: 60px !important; 
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    z-index: 9999 !important; 
    font-size: 10vw !important; 
    color: #fff !important;
    text-shadow: 0 4px 15px rgba(0,0,0,0.8) !important;
    pointer-events: none; 
  }

  .key {
    height: 12vh !important; 
    max-height: 150px;
    min-height: 90px;
  }
  
  #footer {
    flex-shrink: 0;
    margin: 5px 0 25px 0 !important;
    font-size: 14px !important; 
    opacity: 0.8 !important;
  }

  .rank-go #combo-count, .rank-nice #combo-count, .rank-amazing #combo-count {
    -webkit-text-stroke-width: 2px !important; 
    text-shadow: 0 0 8px rgba(0,0,0,0.4), 0 0 16px rgba(0,0,0,0.4) !important;
  }

  .rank-go #combo-label, .rank-nice #combo-label, .rank-amazing #combo-label {
    -webkit-text-stroke-width: 0px !important; 
    text-shadow: 0 0 8px rgba(0,0,0,0.6), 0 0 16px rgba(0,0,0,0.6) !important;
    font-family: sans-serif !important; 
    font-weight: 900 !important; 
    letter-spacing: 1px !important;
  }
}

/* --------------------------------------------------- */
/* Combo 系統樣式 */
/* --------------------------------------------------- */

#combo-container {
  position: absolute;
  top: 65%; 
  left: 50%;
  transform: translate(75%, -190%) scale(0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
  transform-style: preserve-3d;
  opacity: 0;
  transition: opacity 0.5s ease;
  width: 200px; 
}

#combo-container.initial-state #combo-label {
  visibility: hidden; 
}

#combo-count {
  font-size: 15vmin; 
  line-height: 0.8;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 4px #fff; 
  text-shadow: 0 0 20px rgba(255,255,255,0.5);
}

#combo-label {
  font-size: clamp(24px, 8vmin, 60px);
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 10px;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
  opacity: 0; 
  transition: all 0.3s ease;
  white-space: nowrap; 
}

@keyframes go-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* 狀態 1: 0-50 (Go!) */
.rank-go #combo-count {
  -webkit-text-stroke: 3px #00ffff; 
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}
.rank-go #combo-label {
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
  animation: go-pulse 1s infinite ease-in-out; 
}

/* 狀態 2: 51-70 (Nice!) */
.rank-nice #combo-count {
  -webkit-text-stroke: 3px #00e676; 
  text-shadow: 0 0 10px rgba(0, 230, 118, 0.5);
}
.rank-nice #combo-label {
  color: #00e676;
  text-shadow: 0 0 10px rgba(0, 230, 118, 0.8);
  animation: nice-shake 2s infinite ease-in-out;
}
@keyframes nice-shake {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

/* 狀態 3: 71+ (Amazing!) */
.rank-amazing #combo-count {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: transparent;
  -webkit-text-stroke: 3px #d500f9; 
  text-shadow: 0 0 15px rgba(213, 0, 249, 0.5);
  filter: none; 
}

.rank-amazing #combo-label {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #d500f9; 
  text-shadow: 0 0 10px rgba(213, 0, 249, 0.8);
  filter: none;
  animation: amazing-shake 0.1s infinite;
}

@keyframes amazing-shake {
  0% { transform: translate(2px, 2px) rotate(0deg); }
  25% { transform: translate(-2px, -2px) rotate(-2deg); }
  50% { transform: translate(-2px, 2px) rotate(0deg); }
  75% { transform: translate(2px, -2px) rotate(2deg); }
  100% { transform: translate(2px, 2px) rotate(0deg); }
}

body.screen-shake {
  animation: body-shake 0.1s linear;
}
@keyframes body-shake {
  0% { transform: translate(0,0); }
  25% { transform: translate(-5px, 5px); }
  50% { transform: translate(5px, -5px); }
  75% { transform: translate(-5px, -5px); }
  100% { transform: translate(0,0); }
}

#shaky{
  width: min(450px, 85vw);
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit:contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}

#keyboard-container {
  position: relative;
  margin: 20px auto;
  width: min(calc(100vw - 40px), 740px);
  border-radius: 48px; 
  overflow: hidden;
  box-sizing: border-box;
  z-index: 20;
  transition: opacity 0.3s ease;
}

#keyboard-container.disabled #keyboard {
  pointer-events: none;
  opacity: 1; 
  filter: none; 
  cursor: default;
}

#keyboard{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  transition: opacity 0.3s ease;
}

#finish-overlay, #start-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 30;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#finish-overlay {
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
}

#finish-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

#start-overlay {
  background: #fff; 
  z-index: 40;
  border: 5px solid #fff; 
  box-sizing: border-box; 
  border-radius: 48px;
  pointer-events: auto; 
}

#start-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#start-overlay::after {
  content: "";
  position: absolute;
  top: -150%;
  left: -250%;
  width: 200%;
  height: 500%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0.95) 50%, 
    rgba(255, 255, 255, 0) 58%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  animation: lightSweep 2.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  pointer-events: none;
}

#start-title {
  font-size: min(42px, 8vw);
  font-weight: 900;
  color: #fff;
  margin-bottom: 70px;
  text-shadow: 0 4px 15px rgba(0,0,0,0.3);
  letter-spacing: 2px;
  z-index: 1;
  text-align: center;
}

@keyframes btn-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

#start-btn, #next-btn {
  padding: 15px 50px;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(45deg, #ff4d6d, #c77dff);
  border: 4px solid #fff;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.5s ease;
  z-index: 1;
  animation: btn-pulse 1.8s infinite ease-in-out;
}

#start-btn:hover, #next-btn:hover {
  animation: none;
  transform: scale(1.15);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

#start-btn:active, #next-btn:active {
  transform: scale(0.95);
}

#next-btn {
  opacity: 0;
}

#footer {
  margin-top: 10px; 
  margin-bottom: 20px; 
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  width: 100%;
}

.row{
  display:flex;
  justify-content: center;
  gap: 15px;
  width: 100%;
}

.key{
  flex: 1;
  height: 160px;
  box-sizing:border-box;
  border: 5px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  background: var(--bg-color); 
  border-radius: 0px; 
  position: relative;
  overflow: hidden;
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.key:hover {
  transform: scale(1.01);
  z-index: 5;
}

.key:active{
  transform: translateY(2px) scale(0.99);
}

.row:first-child .key:first-child { border-top-left-radius: 48px; }
.row:first-child .key:last-child { border-top-right-radius: 48px; }
.row:last-child .key:first-child { border-bottom-left-radius: 48px; }
.row:last-child .key:last-child { border-bottom-right-radius: 48px; }

.key.active{
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, var(--active-color) 40%, var(--active-color) 70%, rgba(255, 255, 255, 0.9) 100%); 
  border: 5px solid #ffffff; 
  filter: saturate(1.7); 
  box-shadow: inset 0 10px 20px rgba(255, 255, 255, 0.5); 
}

.key.active::after {
  content: "";
  position: absolute;
  top: -150%;
  left: -250%;
  width: 200%;
  height: 500%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0.95) 50%, 
    rgba(255, 255, 255, 0) 58%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  animation: lightSweep 2.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  pointer-events: none;
}

@keyframes lightSweep {
  0% { left: -250%; }
  32%, 100% { left: 250%; } 
}

@keyframes hitFlash {
  0% { filter: brightness(1) saturate(1.7); transform: scale(1); }
  50% { filter: brightness(2.5) saturate(2); transform: scale(0.95); } 
  100% { filter: brightness(1) saturate(1.7); transform: scale(1); }
}

.key.hit {
  animation: hitFlash 0.2s ease-out;
}

.screen-ripple {
  position: fixed;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 15; 
  
  background: transparent;
  border: 8px solid currentColor; 
  box-shadow: 
    0 0 20px currentColor, 
    0 0 40px currentColor, 
    0 0 80px currentColor,
    inset 0 0 20px currentColor;
  mix-blend-mode: screen; 
  
  opacity: 0;
  animation: shockwaveAnim 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes shockwaveAnim {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
    border-width: 60px; 
  }
  100% {
    width: 40vmax; 
    height: 40vmax;
    opacity: 0;
    border-width: 10px; 
  }
}

.shake{
  animation:shake 0.35s ease;
}
@keyframes shake{
  0%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)}
  60%{transform:translateX(-6px)}
  80%{transform:translateX(6px)}
  100%{transform:translateX(0)}
}

@media (max-width: 430px) {

  .beam {
    width: 60px !important;       
    opacity: 0.9 !important;      
    filter: blur(20px) !important; 
  }

  @keyframes mobile-sweep-left {
    0% { transform: rotate(-45deg) scaleY(1); }
    100% { transform: rotate(-15deg) scaleY(1.2); } 
  }

  @keyframes mobile-sweep-right {
    0% { transform: rotate(45deg) scaleY(1); }
    100% { transform: rotate(15deg) scaleY(1.2); } 
  }

  .beam-1, .beam-2, .beam-3, .beam-4 {
    animation-name: mobile-sweep-left !important;
    animation-duration: 3s !important; 
  }
  .beam-2 { animation-duration: 4s !important; animation-direction: alternate-reverse !important; }
  .beam-3 { animation-duration: 3.5s !important; }

  .beam-6, .beam-7, .beam-8, .beam-9 {
    animation-name: mobile-sweep-right !important;
    animation-duration: 3.2s !important;
  }
  .beam-7 { animation-duration: 4.2s !important; animation-direction: alternate-reverse !important; }
  .beam-8 { animation-duration: 3.8s !important; }

  .beam-5 {
    width: 100px !important; 
    opacity: 0.3 !important; 
    animation: mobile-center-sway 3s infinite alternate !important; 
  }

  @keyframes mobile-center-sway {
    0% { transform: translateX(-50%) rotate(-5deg) scaleY(1); }
    100% { transform: translateX(-50%) rotate(5deg) scaleY(1.1); } 
  }
}