:root{
  --bg1: #070714;
  --bg2: #0f1227;
  --accent1: #ff5c7c;
  --accent2: #7c3aed;
  --accent3: #00e0a1;
  --card: rgba(255,255,255,0.04);
  --glass: rgba(255,255,255,0.03);
}

@keyframes bgShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Orbitron', system-ui, sans-serif;
  background: linear-gradient(120deg,#071032 0%, #0b1a3a 35%, #2b0f4a 70%, #04293a 100%);
  background-size: 400% 400%;
  animation: bgShift 20s ease infinite;
  color: #eaf2ff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.app{
  width:980px;
  max-width:95%;
  border-radius:16px;
  padding:18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008));
  box-shadow: 0 18px 50px rgba(2,6,23,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
  position:relative;
}

header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.title{
  font-family: 'Press Start 2P', 'Orbitron', sans-serif;
  font-size:18px;
  margin:0;
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--accent3);
  text-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
.controls{display:flex;align-items:center;gap:10px}
button{
  border:none;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700;
  background: linear-gradient(90deg,var(--accent2), #3b82f6);
  color:white; box-shadow: 0 8px 24px rgba(124,58,237,0.18);
}
.hint{font-size:12px;opacity:0.9}

.center{display:flex; gap:18px}
.left{flex:1}
.right{width:300px}

.word-area{background:var(--card);padding:16px;border-radius:12px;margin-bottom:14px; text-align:center; position:relative}
.word{font-size:40px;letter-spacing:3px;margin-bottom:8px;color: #fff7; text-shadow: 0 6px 30px rgba(0,0,0,0.6)}
.typed{font-size:20px;height:26px;color: #aee7d0}

.piano{display:flex; gap:6px; justify-content:center; margin-top:8px; flex-wrap:wrap}
.key{
  width:46px; height:120px; border-radius:8px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  display:flex;align-items:flex-end;justify-content:center;color:#fff;font-weight:800; box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 -8px 18px rgba(0,0,0,0.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s;
  user-select:none; position:relative; overflow:hidden;
}
.key::before{
  content:''; position:absolute; left:0; right:0; top:0; height:40%; background:linear-gradient(90deg, rgba(255,92,124,0.08), rgba(124,58,237,0.08), rgba(0,224,161,0.06)); pointer-events:none;
}
.key-label{padding:8px 6px; font-size:14px; z-index:2;}

.key.active{
  transform: translateY(6px) scale(0.98);
  box-shadow: 0 18px 48px rgba(0,0,0,0.6), 0 0 18px rgba(124,58,237,0.22);
  filter: saturate(1.2) brightness(1.12);
}

.status-bar{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.status{font-weight:700; min-height:22px}
.score{font-weight:700;color: #ffd98a}

.panel{background:var(--glass);padding:12px;border-radius:12px}
.panel h3{margin:0 0 8px 0;font-size:14px;color:#ffe}
.panel ul{padding-left:18px;margin:8px 0}
.options{display:flex;flex-direction:column;gap:8px;margin-top:8px}

.fx-layer{position:fixed;left:0;top:0;right:0;bottom:0;pointer-events:none;overflow:hidden; z-index:40}
.particle{
  position:absolute; width:10px; height:10px; border-radius:50%;
  opacity:0.95; transform:translate(-50%,-50%) scale(1);
  animation:partMove 700ms cubic-bezier(.15,.9,.4,1);
  will-change: transform, opacity;
}
@keyframes partMove{
  0%{ transform: translate(-50%,-50%) scale(1); opacity:1 }
  100%{ transform: translate(var(--dx), var(--dy)) scale(0.3); opacity:0 }
}

.fall-note{ position:absolute; font-size:13px; animation:fall 1.4s linear forwards; opacity:0.95; text-shadow:0 6px 18px rgba(0,0,0,0.6) }
@keyframes fall {
  0%{ transform: translateY(-6px); opacity:1 }
  100%{ transform: translateY(420px); opacity:0 }
}

@media (max-width:820px){
  .center{flex-direction:column}
  .right{width:100%}
  .key{width:36px;height:88px}
}