:root {
  font-family: "Malgun Gothic", system-ui, sans-serif;
  color: #26304e;
  background: #1f2943;
}
[hidden] { display: none !important; }

#tutorial-options { margin: 12px 0; padding: 12px; background: #e8e4d8; border-radius: 12px; }
#tutorial-options label { display: inline-grid; gap: 5px; margin: 4px 8px; font-size: 13px; text-align: left; }
#tutorial-options select { max-width: 100%; min-height: 34px; }
#tutorial-options p { font-size: 12px; margin: 8px 0 0; }
#tutorial-result-actions button { font-weight: 800; }
#tutorial-coach { position: absolute; z-index: 3; left: 53%; right: 2.5%; top: 41%; padding: 1.2cqw 1.6cqw; border: 2px solid #f6db9c; border-radius: 1.4cqw; background: #26334ff5; color: #fff5df; box-shadow: 0 .4cqw 0 #17233f; pointer-events: none; }
.lesson-heading { display: flex; gap: 1cqw; align-items: center; font-size: 1.65cqw; }
#lesson-number { color: #ffd16c; font-weight: 900; white-space: nowrap; }
#lesson-hint { font-size: 1.1cqw; line-height: 1.5; margin: .6cqw 0; }
.timing-call { display: flex; gap: 1cqw; align-items: center; min-height: 4cqw; }
.timing-call kbd { width: 3.5cqw; height: 3.5cqw; font-size: 2cqw; border-width: 2px; flex-shrink: 0; }
#timing-call { font-size: 1.75cqw; color: #ffe29c; }
#timing-action { margin-left: auto; font-size: 1.25cqw; }
#timing-track { position: relative; height: 1.3cqw; margin: 1cqw 0 .5cqw; background: #ffffff22; border-radius: 1cqw; }
#timing-window { position: absolute; right: 10%; height: 100%; background: #aee5bd66; }
#timing-marker { position: absolute; top: -.25cqw; height: 1.8cqw; width: .65cqw; border-radius: .3cqw; background: #ffe9aa; transform: translateX(-50%); }
#timing-track b { position: absolute; left: 90%; top: -.5cqw; height: 2.3cqw; width: .2cqw; background: #fff6de; }
.timing-caption { display: flex; justify-content: space-between; font-size: .9cqw; padding-right: 2%; }
#tutorial-feedback { min-height: 3.1cqw; margin: .7cqw 0 .1cqw; line-height: 1.5; font-size: 1.15cqw; color: #e7f1ff; }
#tutorial-progress { font-size: .9cqw; color: #c8d5e5; }
#tutorial-coach.now { border-color: #a8f1bd; }
#tutorial-coach.now #timing-call { color: #a8f1bd; }
#controls button.expected { box-shadow: 0 0 0 .5cqw #ffe398; }
#controls button.on-time { background: #83e8a8cc; box-shadow: 0 0 0 .6cqw #a8f1bd; }
#ending { white-space: pre-line; }
@media (max-width: 800px) {
  #tutorial-coach { left: 48%; top: 41%; padding: 1cqw 1.3cqw; }
  #lesson-hint, #tutorial-feedback { font-size: 1.45cqw; }
  .lesson-heading, #timing-call { font-size: 1.9cqw; }
  #tutorial-progress, .timing-caption { font-size: 1.2cqw; }
}
dialog { width: min(760px,94vw); max-height: 90dvh; overflow: auto; border: 3px solid #344563; border-radius: 20px; background: #fff7e5; color: #26304e; padding: 22px; }
dialog::backdrop { background: #182237bd; }
dialog button, .menu-actions button, #pause button, .file-label { border: 1px solid #aca3a0; border-radius: 9px; padding: 8px 12px; background: #ffecd1; color: #26304e; }
dialog input, dialog select { font: inherit; max-width: 100%; }
.menu-actions, .selection { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 10px 0; }
.selection label { display: grid; gap: 4px; font-size: 12px; }
.selection select { min-height: 32px; max-width: 260px; }
#song-detail, #record-detail { font-size: 12px; margin: 7px 0; }
#menu .card { max-height: 94%; overflow: auto; width: min(880px,94%); }
#menu .card h1 { font-size: clamp(25px,3.3cqw,52px); }
#pause { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; background: #1d2b47cc; }
#pause .card { width: min(750px,90%); max-height: 94%; overflow: auto; }
#pause .card p { font-size: clamp(11px,1.5cqw,20px); }
#rewind { position: absolute; z-index: 5; inset: 35% 20%; display: grid; place-content: center; text-align: center; border: 2px solid #ffe8b5; border-radius: 20px; background: #263550ee; color: #fff2d9; pointer-events: none; }
#rewind strong { font-size: 3cqw; }
#rewind-count { display: block; margin: 8px; }
#save-status { font-size: 12px; }
#ending { background: #ffe0a7; padding: 12px; border-radius: 12px; line-height: 1.6; }
.high-contrast #controls button { background: #101830e6; border-color: #ffffff; }
#calibration-beat { width: 30px; height: 30px; margin: 10px auto; border: 2px solid #29334c; border-radius: 50%; background: #ced3d9; }
#calibration-beat.beat { background: #f79a55; box-shadow: 0 0 0 10px #f79a5544; }
.file-label { cursor: pointer; }
#import-file { max-width: 190px; }
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow: hidden;
}
button,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
button:focus-visible,
select:focus-visible {
  outline: 3px solid #ffd66f;
}
button:disabled {
  opacity: 0.5;
}
#viewport {
  position: fixed;
  inset: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: grid;
  place-items: center;
  background: #26304c;
}
#stage {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: #b2c5ed;
  isolation: isolate;
}
canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#background {
  z-index: 0;
}
#actors {
  z-index: 1;
}
#rive-actors { z-index: 1; }
#graphics-notice { position:absolute;z-index:4;top:42%;left:3%;right:3%;margin:0;padding:6px 10px;background:#fff7e5ed;color:#773f2e;font-size:clamp(10px,1cqw,15px);border:1px solid #b88564;border-radius:6px; }
#cues {
  z-index: 2;
}
/* The four note lanes take the top 29% of the stage; the HUD sits right under them. */
#hud {
  position: absolute;
  top: 30.5%;
  left: 2.5%;
  right: 2.5%;
  height: 9%;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1%;
}
#health {
  display: flex;
  gap: 5px;
  background: #293552ed;
  border: 2px solid #d3eaff;
  border-radius: 999px;
  padding: 5px 12px;
}
#health svg {
  width: 3cqw;
  height: 3cqw;
  max-height: 45px;
  filter: drop-shadow(0 2px 0 #b95055);
}
#combo {
  position: absolute;
  left: 50%;
  top: -10%;
  transform: translateX(-50%) rotate(-6deg);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 1000;
  font-style: italic;
  color: #fff9df;
  text-shadow:
    3px 3px #26304e,
    -2px -2px #26304e;
  white-space: nowrap;
}
#combo strong {
  font-size: 5.6cqw;
  line-height: 1;
  color: #ffd36e;
  -webkit-text-stroke: 1px #29304e;
}
#combo span {
  font-size: 2.4cqw;
}
#transport {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
#time,
#stop {
  background: #293552ed;
  color: #fff9e7;
  border: 2px solid #d4e9ff;
  border-radius: 999px;
  padding: 0.65cqw 1.3cqw;
  font-size: 2.2cqw;
  font-weight: 900;
  white-space: nowrap;
}
#time span {
  color: #97d9f2;
}
#stop {
  border-radius: 10px;
  font-size: 1.6cqw;
  padding: 1cqw;
}
/* Thumb buttons: guard/evade in the bottom-left corner, light/heavy in the bottom-right corner.
   Diameter 24% of the stage height (13.5cqw at 16:9) times the touch-scale setting. */
#controls {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  --btn: calc(13.5cqw * var(--touch-scale, 1));
  --pair-gap: calc(1.2cqw + var(--touch-spacing, 0) * 5cqw);
  --edge: 2.5cqw;
}
#controls button {
  position: absolute;
  bottom: 2.2cqw;
  width: var(--btn);
  height: var(--btn);
  padding: 0;
  pointer-events: auto;
  border-radius: 50%;
  background: #1d2440b8;
  border: 0.35cqw solid #fff7e566;
  box-shadow: 0 0.4cqw 0 #0006;
  color: #fff5df;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.2cqw;
  touch-action: none;
  user-select: none;
}
#controls [data-action="GUARD"] { left: var(--edge); }
#controls [data-action="EVADE"] { left: calc(var(--edge) + var(--btn) + var(--pair-gap)); }
#controls [data-action="LIGHT"] { right: calc(var(--edge) + var(--btn) + var(--pair-gap)); }
#controls [data-action="HEAVY"] { right: var(--edge); }
/* Mirrored: attacks on the left, defence on the right, outer buttons stay outer. */
#controls.mirrored [data-action="HEAVY"] { right: auto; left: var(--edge); }
#controls.mirrored [data-action="LIGHT"] { right: auto; left: calc(var(--edge) + var(--btn) + var(--pair-gap)); }
#controls.mirrored [data-action="EVADE"] { left: auto; right: calc(var(--edge) + var(--btn) + var(--pair-gap)); }
#controls.mirrored [data-action="GUARD"] { left: auto; right: var(--edge); }
#controls button .icon {
  width: calc(var(--btn) * 0.52);
  height: calc(var(--btn) * 0.52);
}
#controls button span {
  text-align: center;
  font-size: calc(var(--btn) * 0.14);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 0 2px #27334f;
}
/* The lane key caps show the keys, so the buttons carry only icon and name. */
#controls kbd { display: none; }
kbd {
  font-family: inherit;
  font-size: 3.3cqw;
  font-weight: 900;
  display: grid;
  place-items: center;
  width: 5.7cqw;
  height: 5.7cqw;
  border: 3px solid #afb5d5;
  border-radius: 14%;
  background: linear-gradient(135deg, #66718e, #323f64);
  box-shadow:
    inset 0 0 0 3px #293452,
    0 5px #1b253f;
}
.icon {
  display: block;
  width: 5.8cqw;
  height: 5.8cqw;
  background-image: url("/assets/game/icons.png");
  background-size: 400% 100%;
  filter: drop-shadow(0 0 7px #ffffff66);
}
.light {
  background-position: 0 0;
}
.heavy {
  background-position: 33.333% 0;
}
.guard {
  background-position: 66.666% 0;
}
.evade {
  background-position: 100% 0;
}
#controls button.pressed {
  background: #6ff0c4d9;
  color: #1d2440;
  border-color: #ffffff;
  transform: translateY(0.3cqw);
}
#demo-tag {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  font-size: clamp(10px, 1cqw, 15px);
  color: #f9ead0a6;
  z-index: 4;
  pointer-events: none;
}
#menu {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #29365070;
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
}
#menu[hidden],
#result[hidden] {
  display: none;
}
.card {
  width: min(72%, 720px);
  max-height: 96%;
  overflow: auto;
  text-align: center;
  background: #fff7e7f5;
  border: 3px solid #293552;
  border-radius: 24px;
  padding: clamp(14px, 2.1cqw, 32px);
  box-shadow: 8px 10px 0 #26334c66;
}
.eyebrow {
  font-size: clamp(11px, 1.1cqw, 17px);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #976550;
  margin: 0 0 6px;
}
h1 {
  font-size: clamp(25px, 4.3cqw, 65px);
  font-style: italic;
  line-height: 1.1;
  letter-spacing: -0.06em;
  margin: 0;
  font-weight: 1000;
  color: #253450;
}
h1 em {
  color: #ed885d;
}
.intro {
  font-weight: 700;
  color: #936b65;
  font-size: clamp(12px, 1.4cqw, 20px);
  margin: 12px 0 20px;
}
#guide {
  font-size: clamp(12px, 1.2cqw, 18px);
  line-height: 1.8;
}
label {
  font-size: clamp(12px, 1.2cqw, 18px);
  font-weight: 700;
}
select {
  border: 1px solid #9d9b9a;
  border-radius: 8px;
  padding: 7px 10px;
  background: #fffbed;
}
.primary {
  margin-left: 14px;
  border: 2px solid #293552;
  border-radius: 10px;
  background: #ef8862;
  color: #26334e;
  font-size: clamp(14px, 1.6cqw, 23px);
  font-weight: 900;
  padding: 10px 30px;
  box-shadow: 0 4px #293552;
}
.primary:hover {
  background: #ffc270;
}
#status,
small {
  font-size: clamp(10px, 1cqw, 14px);
  color: #716d74;
}
#result-title {
  margin: 14px 0 8px;
}
pre {
  font-family: inherit;
  white-space: pre-wrap;
  line-height: 1.65;
  font-size: clamp(11px, 1.1cqw, 16px);
  margin: 8px 0 14px;
}
#rotate {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: #28334c;
  color: #fff2d8;
  text-align: center;
  display: none;
  place-content: center;
  padding: 24px;
}
#rotate b {
  font-size: 60px;
  color: #f7bd70;
}
@media (orientation: portrait) {
  #rotate {
    display: grid;
  }
}
@media (max-height: 450px) {
  .card {
    padding: 12px 24px;
    border-radius: 16px;
  }
  .intro {
    margin: 6px 0;
  }
  #guide {
    margin: 6px 0;
  }
  #status {
    margin: 8px 0 2px;
  }
  #combo span {
    font-size: 16px;
  }
  #time {
    font-size: 16px;
  }
  #stop {
    font-size: 12px;
  }
  #demo-tag {
    font-size: 9px;
  }
  .card h1 {
    font-size: 30px;
  }
  #result-title {
    font-size: 20px;
    margin: 6px;
  }
  #result-text {
    line-height: 1.35;
    font-size: 11px;
  }
  .card:has(#result:not([hidden])) .eyebrow,
  .card:has(#result:not([hidden])) .intro,
  .card:has(#result:not([hidden])) #guide {
    display: none;
  }
}