/* ==========================================================================
   XARANGA HERO • Estètica Serigrafia / Paper i Tinta
   Paleta Editorial: Paper (#F3EFE6), Tinta Carbó (#16181D), Blau Cobalt (#1E5EFF),
   Vermelló (#E6321F) i Ocre Sol (#EEA000). Zero emojis, zero brillantors IA.
   ========================================================================== */

:root {
  --paper: #F3EFE6;
  --paper-light: #FAF8F3;
  --ink: #16181D;
  --ink-muted: #5A5F6D;
  --cobalt: #1E5EFF;
  --vermilion: #E6321F;
  --ochre: #EEA000;

  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

#webcam-video {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 64px;
  height: 48px;
  opacity: 0;
  pointer-events: none;
}

#highway-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  z-index: 1;
  display: block;
}

.hidden {
  display: none !important;
}

/* Barra de progrés de la cançó */
#hud-song-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(22, 24, 29, 0.14);
  z-index: 25;
}

#hud-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--vermilion);
  transition: width 0.15s linear;
}

/* ==========================================================================
   HUD SUPERIOR (Fila 1: Puntuació, Botons)
   ========================================================================== */
#game-hud-top {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  z-index: 22;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.hud-left, .hud-right {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.hud-btn {
  background: var(--paper-light);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 2px 2px 0px var(--ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.hud-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px var(--ink);
}

.hud-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--ink);
}

.hud-btn-alert {
  background: var(--vermilion);
  color: var(--paper-light);
}

.hud-btn-short {
  display: none;
}
.hud-btn-full {
  display: inline;
}

.hud-center-title {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: var(--paper-light);
  color: var(--ink);
  padding: 4px 10px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: 2px 2px 0px var(--ink);
}

.score-box {
  background: var(--paper-light);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 3px 10px;
  box-shadow: 2px 2px 0px var(--ink);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.score-label {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.score-val {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
}

.multiplier-badge {
  background: var(--ink);
  color: var(--paper-light);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 5px 9px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 800;
  box-shadow: 2px 2px 0px var(--ink);
}

.multiplier-badge.fire {
  background: var(--vermilion);
  color: var(--paper-light);
}

/* ==========================================================================
   GUIA D'ACCIONS DALT (NETA, RESPONSIVA, SENSE OFEGAR)
   ========================================================================== */
.expression-dock-top {
  position: fixed;
  top: calc(max(8px, env(safe-area-inset-top)) + 48px);
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 540px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  z-index: 20;
  pointer-events: none;
}

.expr-pad {
  pointer-events: auto;
  position: relative;
  background: rgba(250, 248, 243, 0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 2px solid var(--ink);
  border-radius: 5px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 2px 2px 0px var(--ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.08s ease;
  color: var(--ink);
}

.expr-lane-0.active {
  background: #DCE8FF;
  transform: translate(-1px, 2px);
  box-shadow: 1px 1px 0px var(--ink);
}

.expr-lane-1.active {
  background: #FFE2DE;
  transform: translate(-1px, 2px);
  box-shadow: 1px 1px 0px var(--ink);
}

.expr-lane-2.active {
  background: #FFF1C9;
  transform: translate(-1px, 2px);
  box-shadow: 1px 1px 0px var(--ink);
}

.expr-glyph {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.expr-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.expr-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}

/* ==========================================================================
   SEGELL TIPOGRÀFIC D'ENCERT / ERRADA
   ========================================================================== */
.hit-rating {
  position: fixed;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  z-index: 18;
  pointer-events: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 3.2vw, 1.9rem);
  font-weight: 900;
  padding: 5px 16px;
  border-radius: 4px;
  border: 2px solid var(--ink);
  opacity: 0;
  transition: opacity 0.08s ease, transform 0.12s ease;
}

.hit-rating.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.hit-rating.tone-gold {
  background: var(--ochre);
  color: var(--ink);
  box-shadow: 4px 4px 0px var(--ink);
}

.hit-rating.tone-cyan {
  background: var(--cobalt);
  color: var(--paper-light);
  box-shadow: 4px 4px 0px var(--ink);
}

.hit-rating.tone-crimson {
  background: var(--vermilion);
  color: var(--paper-light);
  box-shadow: 4px 4px 0px var(--ink);
}

/* ==========================================================================
   PANTALLES EDITORIALS (#F3EFE6)
   ========================================================================== */
.screen-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  z-index: 30;
  background: var(--paper);
  color: var(--ink);
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.screen-overlay.active {
  display: flex;
}

.poster-container {
  width: 100%;
  max-width: 800px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.poster-header {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 14px;
}

.poster-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.poster-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper-light);
  padding: 4px 10px;
  border-radius: 3px;
}

.poster-switch-link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--ink);
}

.poster-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.8vw, 4rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.poster-title em {
  font-style: italic;
  color: var(--vermilion);
}

.poster-subtitle {
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 640px;
}

.gesture-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.legend-card {
  background: var(--paper-light);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 3px 3px 0px var(--ink);
}

.legend-svg {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.legend-card div {
  display: flex;
  flex-direction: column;
}

.legend-card strong {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink);
}

.legend-card span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-muted);
}

.song-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.song-card {
  background: var(--paper-light);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 16px 20px;
  box-shadow: 4px 4px 0px var(--ink);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.song-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--ink);
}

.song-card:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0px var(--ink);
}

.song-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
}

.song-num {
  background: var(--ochre);
  color: var(--ink);
  padding: 2px 7px;
  border-radius: 3px;
  border: 1.5px solid var(--ink);
}

.song-tag {
  color: var(--vermilion);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.song-bpm {
  margin-left: auto;
  color: var(--ink-muted);
}

.song-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.song-title {
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 900;
  color: var(--ink);
}

.song-author {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.btn-play-song {
  background: var(--ink);
  color: var(--paper-light);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s ease;
}

.song-card:hover .btn-play-song {
  background: var(--vermilion);
}

.song-desc {
  font-size: 0.84rem;
  color: var(--ink-muted);
  line-height: 1.35;
}

/* Modal */
.modal-card {
  width: 100%;
  max-width: 460px;
  background: var(--paper-light);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 30px 24px;
  box-shadow: 6px 6px 0px var(--ink);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--ink);
}

.modal-desc {
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.45;
}

.cal-ring-box {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-ring-box svg {
  transform: rotate(-90deg);
}

.cal-ring-bg {
  fill: none;
  stroke: #DED8C8;
  stroke-width: 9;
}

.cal-ring-fg {
  fill: none;
  stroke: var(--vermilion);
  stroke-width: 9;
  stroke-linecap: butt;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 0.15s ease;
}

.cal-pct {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
}

.stats-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 6px 0;
}

.stat-item {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-num {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--ink);
}

.stat-lbl {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--ink-muted);
}

.report-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-solid, .btn-outline {
  width: 100%;
  padding: 12px 16px;
  border-radius: 4px;
  border: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 3px 3px 0px var(--ink);
}

.btn-solid {
  background: var(--vermilion);
  color: var(--paper-light);
}

.btn-outline {
  background: var(--paper-light);
  color: var(--ink);
}

@media (min-width: 681px) {
  .expression-dock-top {
    top: calc(max(8px, env(safe-area-inset-top)) + 52px);
    width: min(92vw, 540px);
    gap: 10px;
  }
}

@media (max-width: 680px) {
  #game-hud-top {
    top: max(6px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    gap: 4px;
  }

  .hud-center-title {
    display: none !important; /* Allibera espai per a no ofegar la pantalla */
  }

  .hud-left {
    gap: 4px;
  }

  .hud-right {
    gap: 4px;
  }

  .hud-btn {
    padding: 5px 8px;
    font-size: 0.68rem;
    box-shadow: 2px 2px 0px var(--ink);
  }

  .crowd-box {
    min-width: 54px;
    gap: 2px;
  }

  .crowd-track {
    height: 7px;
    border-width: 1.5px;
  }

  .score-box {
    padding: 2px 7px;
    box-shadow: 2px 2px 0px var(--ink);
  }

  .score-label {
    font-size: 0.52rem;
  }

  .score-val {
    font-size: 1.05rem;
  }

  .multiplier-badge {
    padding: 4px 6px;
    font-size: 0.8rem;
    box-shadow: 2px 2px 0px var(--ink);
  }

  .expression-dock-top {
    top: calc(max(6px, env(safe-area-inset-top)) + 40px);
    width: min(96vw, 360px);
    gap: 5px;
  }

  .expr-pad {
    padding: 4px 4px;
    gap: 4px;
    border-radius: 4px;
    box-shadow: 2px 2px 0px var(--ink);
  }

  .expr-glyph {
    width: 16px;
    height: 16px;
  }

  .expr-title {
    font-size: 0.62rem;
    letter-spacing: 0;
  }

  .gesture-legend {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .legend-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 4px;
    gap: 4px;
  }

  .legend-svg {
    width: 26px;
    height: 26px;
  }

  .legend-card strong {
    font-size: 0.68rem;
    line-height: 1.15;
  }

  .legend-card span {
    font-size: 0.58rem;
  }

  .poster-container {
    gap: 12px;
  }

  .poster-title {
    font-size: 2.2rem;
  }

  .poster-subtitle {
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .song-main {
    flex-direction: row;
    align-items: center;
  }

  .song-title {
    font-size: 1.15rem;
  }

  .btn-play-song {
    padding: 7px 11px;
    font-size: 0.72rem;
  }
}

@media (max-width: 440px) {
  .hud-btn-short { display: inline; }
  .hud-btn-full { display: none; }
}

@media (max-height: 720px) {
  .screen-overlay.active {
    align-items: flex-start;
  }
}

.song-main .song-card-top {
  margin-bottom: 6px;
}

/* Ànim de la falla (barra de vida) */
.crowd-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 92px;
}

.crowd-track {
  height: 10px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--paper-light);
  overflow: hidden;
}

.crowd-fill {
  height: 100%;
  width: 60%;
  background: var(--cobalt);
  transition: width 0.18s ease, background 0.18s ease;
}

.crowd-fill.warn {
  background: var(--ochre);
}

.crowd-fill.danger {
  background: var(--vermilion);
  animation: crowd-blink 0.5s steps(2) infinite;
}

@keyframes crowd-blink {
  50% { opacity: 0.35; }
}

/* Flaix en fallar */
#miss-flash {
  position: fixed;
  inset: 0;
  z-index: 17;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 0 0 var(--vermilion);
  transition: opacity 0.35s ease, box-shadow 0.35s ease;
}

#miss-flash.on {
  opacity: 1;
  box-shadow: inset 0 0 0 14px var(--vermilion);
  transition: none;
}

#miss-flash.danger {
  opacity: 1;
  box-shadow: inset 0 0 0 6px rgba(230, 50, 31, 0.55);
}

.hit-rating.tone-crimson {
  animation: rating-shake 0.28s ease;
}

@keyframes rating-shake {
  0%, 100% { margin-left: 0; }
  20% { margin-left: -10px; }
  40% { margin-left: 9px; }
  60% { margin-left: -6px; }
  80% { margin-left: 4px; }
}