/* VERDICT Mode Drum — preview. Tema gelap ala mini game VERDICT. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: #0a0612;
  color: #fff;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
#app { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; }
.screen[hidden] { display: none; }
button { font-family: inherit; }

/* ---------- layar awal & hasil ---------- */
#startScreen, #resultScreen {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 20%, #1c0b33 0%, #0a0612 65%);
  padding: 16px; overflow-y: auto;
}
/* Aturan [hidden] eksplisit per layar — .screen[hidden] saja kalah
   spesifisitas dari selector ID di atas, jadi layar hasil sempat
   langsung tampil saat halaman dibuka. */
#startScreen[hidden], #resultScreen[hidden] { display: none; }
.card {
  background: rgba(20, 10, 35, .94);
  border: 1px solid rgba(168, 85, 247, .4);
  border-radius: 20px;
  padding: 24px 28px;
  text-align: center;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  max-width: 560px; width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.badge {
  font-size: 11px; font-weight: 800; letter-spacing: 3px;
  color: #0a0612; background: linear-gradient(90deg, #ec4899, #f59e0b);
  padding: 4px 12px; border-radius: 999px;
}
h1 { font-size: 30px; font-weight: 900; letter-spacing: 2px; }
.sub { color: #c4b5fd; font-size: 14px; font-weight: 700; letter-spacing: 1px; }
.howto { text-align: left; font-size: 14px; line-height: 1.55; color: #e6def7; width: 100%; }
.howto ul { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.judge-line { margin-top: 8px; text-align: center; color: #ffd166; font-weight: 700; }
.note { color: #9a8bbd; font-size: 12px; }
.bigbtn {
  background: linear-gradient(180deg, #ec4899, #be185d);
  border: none; color: #fff; font-weight: 800; font-size: 17px;
  padding: 14px 44px; border-radius: 999px; cursor: pointer; letter-spacing: 1px;
  box-shadow: 0 6px 24px rgba(236, 72, 153, .45);
}
.bigbtn:active { transform: scale(.97); }
.ghostbtn {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; font-size: 14px; font-weight: 700; padding: 10px 24px;
  border-radius: 999px; cursor: pointer;
}
#rank {
  font-size: 64px; font-weight: 900; line-height: 1;
  background: linear-gradient(180deg, #fde68a, #f59e0b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#resScore { font-size: 28px; font-weight: 800; }
.rrow {
  display: flex; justify-content: space-between; width: 100%; max-width: 320px;
  font-size: 14px; color: #d8ccf0; padding: 4px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.rrow b { color: #fff; }

/* ---------- layar main: note di atas, drum di bawah (portrait) ---------- */
#gameScreen { display: flex; flex-direction: column; background: #0a0612; }
#gameScreen[hidden] { display: none; }
#laneArea { position: relative; flex: 1 1 42%; min-height: 0; background: linear-gradient(180deg, #12081f, #0a0612); }
#laneCv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
#hud { position: absolute; inset: 0; pointer-events: none; }
#prog { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: rgba(255, 255, 255, .1); }
#progFill { height: 100%; width: 0%; background: linear-gradient(90deg, #ec4899, #22d3ee); }
#score { position: absolute; top: 10px; left: 14px; font-size: 22px; font-weight: 800; text-shadow: 0 2px 8px #000; }
#combo { position: absolute; top: 40px; left: 14px; font-size: 15px; font-weight: 700; color: #ffd166; text-shadow: 0 2px 8px #000; }
#judge {
  position: absolute; top: 30%; width: 100%; text-align: center;
  font-size: 30px; font-weight: 900; letter-spacing: 2px;
  text-shadow: 0 0 18px currentColor, 0 2px 4px #000;
  opacity: 0; transition: opacity .08s; color: #fff; pointer-events: none;
}
#countdown {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 84px; font-weight: 900; color: #fff;
  text-shadow: 0 0 30px rgba(236, 72, 153, .8), 0 2px 6px #000;
}
#quitBtn {
  position: absolute; top: 10px; right: 12px; pointer-events: auto;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- pad drum: foto drum asli, bentuk bulat ---------- */
#padArea {
  flex: 1 1 58%; min-height: 0; padding: 8px 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, #150a26, #0a0612);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.pad-row { flex: 1; display: flex; gap: 8px; min-height: 0; justify-content: space-evenly; align-items: center; }
.pad {
  flex: 1 1 0; aspect-ratio: 1; max-height: 100%; border: none; cursor: pointer; position: relative;
  border-radius: 50%; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform .05s, filter .05s, box-shadow .05s;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8%;
  background-size: cover; background-position: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.pad-name {
  font-size: 12px; font-weight: 800; letter-spacing: .5px; color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9); text-transform: uppercase;
  pointer-events: none;
}
.pad.cymbal { background-image: url('drums/cymbal-gold.jpg'); border: 2px solid rgba(255, 255, 255, .25); }
.pad.cymbal[data-lane="3"] { background-image: url('drums/cymbal-blue.jpg'); }
.pad.drum { background-image: url('drums/drumhead-white.jpg'); border: 3px solid #475569; }
.pad.drum[data-lane="4"] { border-color: #db2777; }
.pad.drum[data-lane="5"] { border-color: #9333ea; }
.pad.drum[data-lane="6"] { border-color: #16a34a; }
.pad.drum .pad-name { color: #1e293b; text-shadow: none; }
.pad.hit { transform: scale(.94); filter: brightness(1.6); box-shadow: 0 0 24px rgba(255, 255, 255, .7), 0 0 40px currentColor; }