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

html, body {
  width: 100%; height: 100%;
  background: #000;
  overflow: hidden;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #fff;
}

#video {
  position: absolute;
  visibility: hidden;
  width: 1px; height: 1px;
}

#mainCanvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
}

/* ── Erica One font ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Erica One';
  src: url('fonts/EricaOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ── Montserrat font ────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ── Tutorial ───────────────────────────────────────────────────────────────── */
#tutorial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 10;
  transition: opacity 0.6s ease;
}
#tutorial.hidden { opacity: 0; pointer-events: none; }

.tutorial-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 0 60px;
}

/* ── Scenes ── */
.tutorial-scene {
  display: none;
  width: 100%;
  flex: 1;
  animation: sceneFadeIn 0.35s ease;
}
.tutorial-scene.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes sceneFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tut-svg {
  width: 90vw;
  height: auto;
  max-height: 75vh;
  display: block;
}

.tutorial-inner h1 {
  font-size: 2.8rem;
  font-weight: 200;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}
.subtitle {
  font-size: 0.86rem;
  color: rgba(180,160,255,0.75);
  letter-spacing: 0.18em;
  margin-bottom: 26px;
}
.tutorial-section { margin-bottom: 18px; }
.tutorial-section h2 {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: #b0d0ff;
}
.tutorial-section p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.8;
  margin: 0 0 8px;
}
.tut-note {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.38) !important;
}

/* ── Scene 1: bar demos ── */
.tut-bars { margin: 14px 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.tut-bar-row { display: flex; align-items: center; gap: 14px; }
.tut-bar-demo {
  position: relative;
  width: 180px;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.tut-bar-fill { position: absolute; top:0; left:0; height:100%; border-radius:4px; }
.tut-fill-loop { background: rgba(60,200,120,0.70); }
.tut-fill-rec  { background: rgba(255,60,60,0.70); animation: recPulse 1.4s ease-in-out infinite; }
@keyframes recPulse {
  0%,100% { opacity: 0.55; } 50% { opacity: 0.95; }
}
.tut-bar-dot {
  position: absolute;
  top: 50%; transform: translate(-50%,-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
}
.tut-dot-loop { background: rgba(120,255,180,1); }
.tut-dot-rec  { background: rgba(255,120,120,1); }
.tut-bar-ticks {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    transparent,
    transparent calc(25% - 0.5px),
    rgba(255,255,255,0.18) calc(25% - 0.5px),
    rgba(255,255,255,0.18) 25%
  );
}
.tut-bar-caption { font-size: 0.72rem; color: rgba(255,255,255,0.48); }
.tut-green { color: rgba(80,220,140,0.9); }
.tut-red   { color: rgba(255,90,90,0.9); }

/* ── Scene 2: instruments & gestures ── */
.tut-instruments {
  display: flex; justify-content: center; gap: 10px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.tut-instruments span, .tut-fx-list span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(176,208,255,0.85);
  background: rgba(120,160,255,0.12);
  border: 1px solid rgba(120,160,255,0.25);
  padding: 4px 10px;
  border-radius: 3px;
}
.tut-submenu {
  display: flex; flex-direction: column; gap: 5px;
  margin: 10px 0;
  text-align: left;
}
.tut-submenu div {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.50);
  display: flex; align-items: center; gap: 8px;
}
.tut-tag {
  font-size: 0.60rem; font-weight: 700; letter-spacing: 0.10em;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  padding: 2px 7px; border-radius: 2px;
  white-space: nowrap; flex-shrink: 0;
}
.tut-tag-mute { border-color: rgba(255,100,100,0.40); color: rgba(255,120,120,0.85); }
.tut-tag-fx   { border-color: rgba(140,200,255,0.40); color: rgba(160,220,255,0.85); }
.tut-gestures { display: flex; flex-direction: column; gap: 10px; }
.tut-gesture-row {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 0.76rem; color: rgba(255,255,255,0.52);
  text-align: left; line-height: 1.6;
}
.tut-gesture-row strong { color: rgba(255,255,255,0.80); }
.tut-gesture-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.3; }

/* ── Scene 3: hands & instrument table ── */
.tut-hands {
  display: flex; justify-content: center; gap: 32px;
  margin: 12px 0;
}
.tut-hand-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tut-hand-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 2px;
}
.tut-hand-right { background: rgba(180,130,255,0.15); color: rgba(200,160,255,0.85); }
.tut-hand-left  { background: rgba(80,200,200,0.15);  color: rgba(100,220,220,0.85); }
.tut-hand-arrow { font-size: 1.6rem; color: rgba(255,255,255,0.25); line-height: 1; }
.tut-hand-desc  { font-size: 0.72rem; color: rgba(255,255,255,0.45); }
.tut-instr-table { display: flex; flex-direction: column; gap: 5px; text-align: left; }
.tut-instr-row  { display: flex; gap: 10px; align-items: baseline; font-size: 0.74rem; color: rgba(255,255,255,0.48); }
.tut-instr-name {
  font-size: 0.60rem; font-weight: 700; letter-spacing: 0.12em;
  color: rgba(176,208,255,0.80); width: 44px; flex-shrink: 0;
}

/* ── Scene 4: fx list ── */
.tut-fx-list { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }

/* ── Navigation ── */
.tutorial-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: absolute;
  bottom: 32px;
  left: 0; right: 0;
}
.tutorial-dots { display: flex; gap: 10px; }
.tutorial-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.20);
  transition: background 0.3s, transform 0.3s;
}
.tutorial-dot.active {
  background: rgba(255,255,255,0.85);
  transform: scale(1.4);
}
.tutorial-hint {
  font-family: 'Erica One', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.05em;
  margin: 0;
}
.tutorial-keys {
  display: flex; justify-content: center; gap: 20px;
  margin: 12px 0 4px;
  font-size: 0.68rem;
  color: rgba(255,220,90,0.55);
  letter-spacing: 0.06em;
}

/* ── HUD ────────────────────────────────────────────────────────────────────── */
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 56px 28px 0;   /* leave room for the loop bar */
  pointer-events: none;
  z-index: 5;
}

.hud-label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
}

.hud-atmo {
  font-size: 0.70rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  text-align: center;
}

/* ── Overlay: rotar dispositivo (solo en portrait en móvil) ─────────────────── */
#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#rotate-overlay svg {
  animation: rotateHint 2s ease-in-out infinite;
}

@keyframes rotateHint {
  0%, 100% { transform: rotate(0deg);   opacity: 1;   }
  40%       { transform: rotate(-90deg); opacity: 0.7; }
  60%       { transform: rotate(-90deg); opacity: 0.7; }
}

/* Mostrar solo en portrait en pantallas pequeñas */
@media (max-width: 900px) and (orientation: portrait) {
  #rotate-overlay { display: flex; }
}