/* ═══════════════════════════════════
   RESET & BASE
════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --yellow:   #FFE000;
  --blue:     #00BFFF;
  --red:      #ff2222;
  --green:    #00cc44;
  --bg:       #0A0A0A;
  --bg2:      #111111;
  --bg3:      #1A1A1A;
  --bg4:      #242424;
  --border:   #2A2A2A;
  --border-blue: rgba(0, 191, 255, 0.22);
  --text:     #FFFFFF;
  --text-dim: #888888;
  --font: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* AAA Design System */
  --color-bg:          #050505;
  --color-primary:     #FFD300;
  --color-accent-blue: #00D4FF;
  --color-accent-red:  #FF1A1A;
  --color-accent-green:#00FF66;
  --glow-primary:      0 0 30px rgba(255,211,0,0.5), 0 0 60px rgba(255,211,0,0.2);
  --glow-blue:         0 0 25px rgba(0,212,255,0.4);
  --glow-red:          0 0 25px rgba(255,26,26,0.5);
  --transition-fast:   0.15s ease;
  --transition-screen: 0.2s ease;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════
   SCREENS
════════════════════════════════════ */
.screen {
  position: fixed;
  inset: 0;
  background: transparent;
  overflow-y: auto;
  overflow-x: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.screen.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
}

.screen-inner {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 16px;
  padding-bottom: 32px;
  max-width: 480px;
  margin: 0 auto;
}

/* screen-inner with bottom nav space */
.screen-inner-nav {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

.center-content {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}

/* ═══════════════════════════════════
   LOGO
════════════════════════════════════ */
.logo-img {
  height: 120px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  mix-blend-mode: screen;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
  display: block;
  margin: 4px auto 8px;
  filter: none;
}

.logo-menu {
  margin: 0 auto 20px;
}

.logo-fallback {
  font-size: 6rem;
  line-height: 1;
  text-align: center;
  display: block;
  margin: 4px auto 8px;
}

/* ═══════════════════════════════════
   TYPOGRAPHY
════════════════════════════════════ */
.app-title {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--yellow);
  text-shadow: 0 0 30px rgba(255, 224, 0, 0.4);
}

.subtitle {
  font-size: 1rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}

/* ═══════════════════════════════════
   BUTTONS
════════════════════════════════════ */
button {
  cursor: pointer;
  border: none;
  outline: none;
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: 0.8px;
  border-radius: 12px;
  transition: all 0.15s ease;
  user-select: none;
  text-transform: uppercase;
}

button:active {
  transform: scale(0.97);
}

.btn-primary {
  width: 100%;
  padding: 18px;
  font-size: 1.15rem;
  background: var(--yellow);
  color: #000000;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(255, 224, 0, 0.3);
  margin-top: 8px;
  letter-spacing: 1px;
}

.btn-primary:active {
  background: #ccb300;
  box-shadow: 0 2px 10px rgba(255, 224, 0, 0.2);
}

.btn-primary:disabled {
  background: var(--bg4);
  color: var(--text-dim);
  box-shadow: none;
}

.btn-start-big {
  padding: 20px;
  font-size: 1.2rem;
  margin-top: 16px;
}

.btn-secondary {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
  background: var(--bg4);
  color: var(--text);
  border-radius: 14px;
  border: 1px solid var(--border);
  margin-top: 8px;
}

.btn-secondary:active {
  background: var(--bg3);
}

.icon-btn {
  background: transparent;
  color: var(--text);
  font-size: 1.4rem;
  padding: 8px;
  border-radius: 8px;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  letter-spacing: 0;
}

.icon-btn:active {
  background: var(--bg3);
}

.btn-stop {
  background: var(--red);
  color: white;
  font-size: 1.2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  flex-shrink: 0;
}

/* ═══════════════════════════════════
   TOPBAR
════════════════════════════════════ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 16px;
}

.topbar h2 {
  font-size: 1.05rem;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
}

/* ═══════════════════════════════════
   BOTTOM NAVIGATION — 4 items, relativa
════════════════════════════════════ */
.bottom-nav {
  position: relative;
  background: #0A0A0A;
  border-top: 1px solid #1A1A1A;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  padding: 8px 4px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  color: #666666;
  padding: 4px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  transition: color 0.15s;
}

.nav-btn.active {
  color: #FFD300;
}

.nav-btn.active .nav-icon-wrap {
  filter: drop-shadow(0 0 8px #FFD300);
}

.nav-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 36px;
  background: #111111;
  border-radius: 10px;
  flex-shrink: 0;
}

.nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1;
}

/* ═══════════════════════════════════
   ROUND BADGE
════════════════════════════════════ */
.round-badge {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--text);
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 20px;
  text-transform: uppercase;
}

/* ═══════════════════════════════════
   MENU SCREEN
════════════════════════════════════ */
.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.btn-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  border-radius: 20px;
  gap: 6px;
  flex: 1;
  min-height: 150px;
  transition: all 0.15s;
}

.btn-striking {
  background: linear-gradient(135deg, #191500, #2e2700);
  border: 2px solid var(--yellow);
  box-shadow: 0 4px 24px rgba(255, 224, 0, 0.12);
}

.btn-striking:active {
  box-shadow: 0 2px 40px rgba(255, 224, 0, 0.45);
  background: linear-gradient(135deg, #262000, #3d3300);
}

.btn-reaction {
  background: linear-gradient(135deg, #001a2e, #002a44);
  border: 2px solid var(--blue);
  box-shadow: 0 4px 24px rgba(0, 191, 255, 0.12);
}

.btn-reaction:active {
  box-shadow: 0 2px 40px rgba(0, 191, 255, 0.45);
  background: linear-gradient(135deg, #00253f, #003a5a);
}

.mode-icon {
  font-size: 2.5rem;
  line-height: 1;
}

.mode-label {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--text);
}

.mode-desc {
  font-size: 0.85rem;
  color: var(--text-dim);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* ═══════════════════════════════════
   PROFILE / SETTINGS FORM
════════════════════════════════════ */
.form-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.82rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
}

.form-group input {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 1.2rem;
  padding: 14px 16px;
  font-family: var(--font);
  width: 100%;
  transition: border-color 0.2s;
}

.form-group input:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(255, 224, 0, 0.12);
}

#profile-form-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sex-toggle {
  display: flex;
  gap: 8px;
}

.sex-btn {
  flex: 1;
  padding: 14px;
  font-size: 1rem;
  background: var(--bg3);
  border: 2px solid var(--border);
  color: var(--text-dim);
  border-radius: 10px;
  transition: all 0.2s;
}

.sex-btn.active {
  background: var(--bg4);
  border-color: var(--yellow);
  color: var(--yellow);
}

/* ═══════════════════════════════════
   CONFIG SCREEN
════════════════════════════════════ */
.config-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.config-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 14px 16px;
}

.config-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.config-label-row label {
  font-size: 0.9rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.config-value {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--yellow);
}

.slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg3);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--yellow);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(255, 224, 0, 0.5);
}

.slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--yellow);
  cursor: pointer;
  border: none;
}

.slider-range {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.config-summary {
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-dim);
  line-height: 1.6;
}

.ios-permission {
  background: var(--bg3);
  border: 1px solid var(--yellow);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ios-permission p {
  font-size: 0.9rem;
  color: var(--yellow);
}

.permission-status {
  font-size: 0.85rem !important;
  color: var(--yellow) !important;
}

/* ── Combo config extras ───────── */
.config-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.config-section-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  display: block;
}

.stepper-row {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}

.stepper-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--yellow);
  color: var(--yellow);
  background: transparent;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.stepper-btn:active {
  background: rgba(255, 224, 0, 0.12);
  transform: scale(0.95);
}

.stepper-value {
  font-size: 3rem;
  font-weight: 900;
  color: var(--yellow);
  min-width: 60px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.option-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.option-pill {
  padding: 10px 14px;
  border-radius: 20px;
  border: 2px solid var(--border);
  background: var(--bg3);
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  transition: all 0.15s;
  flex-shrink: 0;
}

.option-pill.selected {
  border-color: var(--yellow);
  color: var(--yellow);
  background: #1A1500;
}

.option-pill:active {
  transform: scale(0.95);
}

.mode-toggle {
  display: flex;
  gap: 8px;
}

.mode-toggle-btn {
  flex: 1;
  padding: 14px;
  font-size: 0.95rem;
  background: var(--bg3);
  border: 2px solid var(--border);
  color: var(--text-dim);
  border-radius: 12px;
  transition: all 0.15s;
}

.mode-toggle-btn.active {
  border-color: var(--yellow);
  color: var(--yellow);
  background: #1A1500;
}

/* ── Per-mode color theming (config screen) ── */
#screen-config {
  --mode-color: var(--yellow);
  --mode-bg:    #1A1500;
  background: transparent;
}

/* Background image layer — sits above particles (z-index 0), below content */
#screen-config::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--config-overlay), var(--config-bg-image);
  background-size: cover;
  background-position: var(--config-bg-position, center);
  pointer-events: none;
}

#screen-config .screen-inner {
  position: relative;
  z-index: 2;
}

/* Title */
#screen-config #config-mode-title {
  color: var(--mode-color);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Back arrow */
#screen-config .icon-btn { color: #FFFFFF; }

/* Labels dim */
#screen-config .config-label-row label,
#screen-config .config-section-label {
  color: #AAAAAA;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Slider values */
#screen-config .config-value { color: var(--mode-color); font-weight: 900; }

/* Slider thumb — track fill done via JS */
#screen-config .slider { border-radius: 4px; }
#screen-config .slider::-webkit-slider-thumb {
  background: var(--mode-color);
  box-shadow: 0 0 6px var(--mode-color);
  width: 22px;
  height: 22px;
}
#screen-config .slider::-moz-range-thumb { background: var(--mode-color); }

/* Summary card */
#screen-config .config-summary {
  background: var(--mode-summary-bg, rgba(0,0,0,0.65));
  border: 1px solid var(--mode-summary-border, rgba(255,255,255,0.2));
  border-radius: 14px;
  padding: 14px 12px;
}

/* Summary metrics grid */
.csm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.csm-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.csm-val {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--mode-color);
  line-height: 1;
}
.csm-lbl {
  font-size: 0.6rem;
  letter-spacing: 1px;
  color: #777;
  text-transform: uppercase;
}

/* Start button */
#screen-config .btn-primary {
  background: var(--mode-color);
  color: #000000 !important;
  font-size: 1.05rem;
  font-weight: 900;
  border-radius: 16px;
  box-shadow: var(--mode-shadow, none);
  letter-spacing: 1px;
}
#screen-config .btn-primary::before { content: '▶  '; }
#screen-config .btn-primary:active  { background: var(--mode-color); filter: brightness(0.82); }

/* Submode / pills / toggles / steppers */
#screen-config .submode-card.active       { border-color: var(--mode-color); color: var(--mode-color); background: var(--mode-bg); }
#screen-config .submode-card.active .submode-card-desc { color: var(--mode-color); opacity: 0.65; }
#screen-config .option-pill.selected      { border-color: var(--mode-color); color: var(--mode-color); background: var(--mode-bg); }
#screen-config .mode-toggle-btn.active    { border-color: var(--mode-color); color: var(--mode-color); background: var(--mode-bg); }
#screen-config .stepper-btn               { border-color: var(--mode-color); color: var(--mode-color); }
#screen-config .stepper-btn:active        { background: var(--mode-bg); }
#screen-config .stepper-value             { color: var(--mode-color); }

/* ═══════════════════════════════════
   WORKOUT SCREENS
════════════════════════════════════ */
.workout-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 4px;
}

/* TIMER — grande y amarillo */
.timer-big {
  font-size: clamp(4.5rem, 22vw, 7rem);
  font-weight: 900;
  text-align: center;
  letter-spacing: -3px;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin: 4px 0;
}

.timer-big.warning {
  color: var(--yellow);
  animation: pulse-warn 0.5s ease infinite alternate;
}

.timer-big.danger {
  color: var(--red);
  animation: pulse-warn 0.3s ease infinite alternate;
}

@keyframes pulse-warn {
  from { opacity: 1; }
  to   { opacity: 0.55; }
}

/* ═══════════════════════════════════
   METRICS GRID
════════════════════════════════════ */
.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0;
}

.metric-card {
  background: var(--bg3);
  border: 1px solid var(--border-blue);
  border-radius: 14px;
  padding: 14px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.metric-value {
  font-size: clamp(2.8rem, 12vw, 4rem);
  font-weight: 900;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--yellow);
  transition: all 0.15s;
}

.metric-value.red   { color: var(--red); }
.metric-value.green { color: var(--yellow); }

.metric-label {
  font-size: 0.65rem;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}

.metric-value.flash {
  color: #ffffff !important;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.9);
}

/* ═══════════════════════════════════
   PUNCH CHART
════════════════════════════════════ */
.chart-container {
  background: var(--bg3);
  border: 1px solid var(--border-blue);
  border-radius: 14px;
  padding: 10px 12px;
}

.chart-label {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
  font-weight: 600;
}

canvas {
  display: block;
  width: 100%;
  height: auto;
}

/* ═══════════════════════════════════
   REST SCREEN
════════════════════════════════════ */
.rest-label {
  font-size: 0.95rem;
  letter-spacing: 5px;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
}

.rest-countdown {
  font-size: clamp(5rem, 30vw, 8rem);
  font-weight: 900;
  color: var(--yellow);
  letter-spacing: -4px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: color 0.3s;
}

.rest-countdown.ending {
  color: var(--red);
  animation: pulse-warn 0.5s ease infinite alternate;
}

.rest-next {
  font-size: 1.1rem;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

.rest-stats {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rest-stat-item { text-align: center; }

.rest-stat-value {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--yellow);
}

.rest-stat-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* ═══════════════════════════════════
   PANTALLA: PENALIZACIÓN POR ABANDONO
════════════════════════════════════ */
#screen-abandon-penalty {
  /* Translúcido para que se vean las partículas globales por debajo */
  background: rgba(26, 0, 0, 0.85);
}

.abandon-penalty-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: #FF1A1A;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 20px rgba(255,26,26,0.5);
}

.abandon-penalty-xp {
  font-size: clamp(3rem, 18vw, 5rem);
  font-weight: 900;
  color: #FF1A1A;
  letter-spacing: -2px;
  animation: abandonXpBlink 0.5s ease-in-out infinite;
}

@keyframes abandonXpBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* ═══════════════════════════════════
   COMBO SCREEN BASE
════════════════════════════════════ */
#screen-combo {
  overflow: hidden;
}

.combo-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: rgba(10, 10, 10, 0.92);
  z-index: 20;
  border-bottom: 1px solid var(--bg3);
}

.combo-session-timer {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

.combo-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* fallback sticks to bottom via margin-top:auto */
  padding: 16px;
  padding-top: calc(80px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  gap: 12px;
}

/* ═══════════════════════════════════
   COMBO: PANEL ESPERA
════════════════════════════════════ */
#combo-panel-wait {
  background: #0A0A0A;
  position: relative;
  overflow: hidden;
}

.combo-logo-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.combo-logo-tenue {
  width: 75%;
  max-width: 300px;
  opacity: 0.04;
  filter: grayscale(1);
}

.combo-wait-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: center;
}

.combo-wait-label {
  font-size: 1.05rem;
  color: var(--text-dim);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
}

.combo-hits-big {
  font-size: clamp(3rem, 16vw, 5rem);
  font-weight: 900;
  color: var(--yellow);
  letter-spacing: -1px;
  text-align: center;
  text-shadow: 0 0 40px rgba(255, 224, 0, 0.3);
  text-transform: uppercase;
  line-height: 1;
}

.combo-max-time {
  font-size: 1rem;
  color: var(--text-dim);
  letter-spacing: 1.5px;
  font-weight: 600;
  text-transform: uppercase;
}

.combo-wait-footer {
  font-size: 0.88rem;
  color: #444444;
  letter-spacing: 0.5px;
  margin-top: 20px;
  text-align: center;
}

/* ═══════════════════════════════════
   COMBO: PANEL SEÑAL HIT
════════════════════════════════════ */
#combo-panel-signal {
  background: #1A0000;
  position: relative;
  overflow: hidden;
  gap: 8px;
  justify-content: center; /* center signal content; fallback goes to bottom via margin-top:auto */
}

.signal-bg-effect {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(200, 0, 0, 0.5) 0%, transparent 70%);
  animation: signal-pulse 0.35s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes signal-pulse {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}

.signal-lightning {
  font-size: 2.5rem;
  position: relative;
  z-index: 1;
  animation: flash-anim 0.25s ease infinite alternate;
  filter: drop-shadow(0 0 16px rgba(255, 200, 0, 0.9));
}

@keyframes flash-anim {
  from { transform: scale(0.9) rotate(-8deg); opacity: 0.7; }
  to   { transform: scale(1.2) rotate(8deg);  opacity: 1; }
}

.signal-hit-text {
  font-size: clamp(5.5rem, 30vw, 10rem);
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 6px;
  text-transform: uppercase;
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.35), 0 0 120px rgba(200, 0, 0, 0.7);
  position: relative;
  z-index: 1;
  line-height: 0.85;
}

.signal-counter {
  font-size: 2.2rem;
  font-weight: 900;
  color: #ff3333;
  letter-spacing: 3px;
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
}

.signal-sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1.5px;
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  font-weight: 700;
}

/* ═══════════════════════════════════
   COMBO: PANEL ACTIVO
════════════════════════════════════ */
#combo-panel-active {
  background: #0A0A0A;
  justify-content: center;
  gap: 10px;
}

.combo-active-counter {
  font-size: clamp(4.5rem, 25vw, 8rem);
  font-weight: 900;
  color: var(--yellow);
  letter-spacing: -2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 40px rgba(255, 224, 0, 0.3);
}

.combo-hits-progress-wrap {
  width: 100%;
  height: 8px;
  background: var(--bg3);
  border-radius: 4px;
  overflow: hidden;
}

.combo-hits-progress-bar {
  height: 100%;
  background: var(--yellow);
  border-radius: 4px;
  transition: width 0.12s ease;
}

.combo-time-remaining-label {
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 4px;
}

.combo-time-remaining {
  font-size: clamp(2.5rem, 12vw, 4rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.combo-time-remaining.urgent {
  color: var(--red);
  animation: pulse-warn 0.25s ease infinite alternate;
}

.combo-active-metrics {
  display: flex;
  gap: 10px;
  width: 100%;
}

.combo-metric-sm {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border-blue);
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
}

.combo-metric-label {
  font-size: 0.58rem;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  margin-bottom: 4px;
}

.combo-metric-value {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════
   COMBO: PANEL RESULTADO
════════════════════════════════════ */
#combo-panel-result {
  background: #0A0A0A;
  justify-content: center;
  gap: 14px;
}

.result-verdict {
  font-size: clamp(4rem, 22vw, 7.5rem);
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  line-height: 1;
}

.result-verdict.ok {
  color: var(--yellow);
  text-shadow: 0 0 60px rgba(255, 224, 0, 0.5);
  animation: ok-pop 0.3s ease;
}

@keyframes ok-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  65%  { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

.result-verdict.fail {
  color: var(--red);
  text-shadow: 0 0 60px rgba(255, 34, 34, 0.4);
}

.result-count {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.result-cards {
  display: flex;
  gap: 12px;
  width: 100%;
}

.result-card {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border-blue);
  border-radius: 14px;
  padding: 16px 8px;
  text-align: center;
}

.result-card-label {
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 6px;
}

.result-card-value {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

.result-next-label {
  font-size: 0.82rem;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

.result-progress-wrap {
  width: 100%;
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  overflow: hidden;
}

.result-progress-bar {
  height: 100%;
  background: var(--yellow);
  border-radius: 2px;
}

/* ═══════════════════════════════════
   SUMMARY SCREEN
════════════════════════════════════ */
.summary-header {
  text-align: center;
  padding: 16px 0 12px;
}

.summary-icon {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 8px;
}

.summary-header h2 {
  font-size: 1.4rem;
  letter-spacing: 2px;
  color: var(--yellow);
  font-weight: 900;
  text-transform: uppercase;
}

.summary-date {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 4px;
}

.summary-mode {
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
}

.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.summary-item {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}

.summary-item.calories-big {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #1a1500, #2b2300);
  border-color: var(--yellow);
}

.summary-value {
  font-size: 1.8rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text);
}

.summary-value.green  { color: var(--yellow); }
.summary-value.red    { color: var(--red); }
.summary-value.orange { color: var(--yellow); }

.summary-label {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
  font-weight: 600;
}

.summary-message {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--yellow);
  padding: 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summary-comparison {
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-dim);
  min-height: 24px;
  padding: 0 4px;
}

.summary-body { flex: 1; }

.summary-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

/* ═══════════════════════════════════
   HISTORY SCREEN
════════════════════════════════════ */
.history-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hist-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hist-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 60px 24px;
}

.hist-empty-icon {
  font-size: 3rem;
}

.hist-empty-text {
  font-size: 1rem;
  color: var(--text-dim);
  font-weight: 600;
  max-width: 260px;
  line-height: 1.4;
}

.hist-section h3 {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  font-weight: 700;
}

.records-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.record-item {
  background: var(--bg3);
  border: 1px solid var(--border-blue);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}

.record-value {
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  color: var(--yellow);
}

.record-value.green { color: var(--yellow); }
.record-value.red   { color: var(--red); }

.record-label {
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.totals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.total-item {
  background: var(--bg3);
  border: 1px solid var(--border-blue);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.total-value {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--yellow);
}

.total-value.orange { color: var(--yellow); }

.total-label {
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 600;
}

.streak-display {
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--yellow);
  padding: 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  letter-spacing: 0.3px;
}

/* ═══════════════════════════════════
   MODAL
════════════════════════════════════ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  transition: opacity 0.25s;
}

.modal.hidden {
  opacity: 0;
  pointer-events: none;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.modal-content {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 24px 24px 0 0;
  padding: 24px 20px 40px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: translateY(0);
  transition: transform 0.25s;
}

.modal.hidden .modal-content {
  transform: translateY(100%);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: var(--yellow);
  font-weight: 900;
  text-transform: uppercase;
}

/* ═══════════════════════════════════
   LANGUAGE SCREEN
════════════════════════════════════ */
.lang-subtitle {
  font-size: 1.1rem;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.lang-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* 12 idiomas en 2 columnas: en una sola columna no caben sin scroll */
.lang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-lang {
  width: 100%;
  padding: 20px 24px;
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--bg3);
  border: 2px solid var(--border);
  color: var(--text);
  border-radius: 16px;
  text-align: left;
  letter-spacing: 0.3px;
  transition: all 0.15s;
  text-transform: none;
}

/* En rejilla las celdas son más estrechas: texto centrado y algo más compacto */
.lang-grid .btn-lang {
  padding: 16px 10px;
  font-size: 1rem;
  border-radius: 14px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-lang.active {
  border-color: var(--yellow);
  background: var(--bg4);
  color: var(--yellow);
}

.btn-lang:active {
  border-color: var(--yellow);
  background: var(--bg4);
  color: var(--yellow);
  transform: scale(0.98);
  box-shadow: 0 0 20px rgba(255, 224, 0, 0.2);
}

/* 12 chips: se reparten en filas en vez de apretarse en una sola */
.lang-toggle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.btn-lang-sm {
  flex: 1;
  padding: 12px 4px;
  font-size: 0.82rem;
  font-weight: 700;
  background: var(--bg3);
  border: 2px solid var(--border);
  color: var(--text-dim);
  border-radius: 10px;
  transition: all 0.15s;
  text-transform: none;
  letter-spacing: 0;
}

.btn-lang-sm.active {
  background: var(--bg4);
  border-color: var(--yellow);
  color: var(--yellow);
}

.btn-lang-sm:active {
  transform: scale(0.95);
}

/* ═══════════════════════════════════
   RTL — ÁRABE
   Con dir="rtl" en <html> el navegador ya invierte el orden de los flex y
   el alineado por defecto. Aquí sólo se corrige lo que está fijado a la
   izquierda de forma explícita y no se voltea solo.
════════════════════════════════════ */
body.rtl {
  direction: rtl;
}

body.rtl .help-section-header,
body.rtl .calib-cur-card,
body.rtl .hmc,
body.rtl .btn-measure-opt,
body.rtl .sd-item,
body.rtl .lang-grid .btn-lang,
body.rtl .form-group label,
body.rtl .calib-manual,
body.rtl .help-section-content {
  text-align: right;
}

body.rtl .hit-popup-card {
  text-align: right !important;
}

/* Nav inferior y barras de cabecera: orden invertido */
body.rtl .bottom-nav,
body.rtl .workout-topbar,
body.rtl .header-actions,
body.rtl .settings-sound-row,
body.rtl .hist-tabs {
  flex-direction: row-reverse;
}

/* Los números, el cronómetro y las lecturas en G se leen igual en RTL:
   se dejan LTR para que no se reordenen los signos ni las unidades. */
body.rtl .timer-big,
body.rtl .metric-value,
body.rtl .calib-cur-value,
body.rtl .calib-manual-label,
body.rtl .csm-val,
body.rtl .slider-range {
  direction: ltr;
  unicode-bidi: isolate;
}

/* El slider de sensibilidad mantiene 0.01G a la izquierda y 3.00G a la
   derecha: invertirlo confundiría al arrastrar */
body.rtl .calib-manual-slider {
  direction: ltr;
}

/* ═══════════════════════════════════
   UTILITIES
════════════════════════════════════ */
.hidden {
  display: none !important;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .screen-inner {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
    padding-top: calc(16px + env(safe-area-inset-top));
  }
  .screen-inner-nav {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ═══════════════════════════════════
   HEADER ACTIONS (mute + stop)
════════════════════════════════════ */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mute-btn {
  background: transparent;
  color: var(--text-dim);
  font-size: 1.2rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  text-transform: none;
  transition: all 0.15s;
  flex-shrink: 0;
}

.mute-btn:active {
  background: var(--bg3);
  transform: scale(0.92);
}

.mute-btn.muted {
  color: #444;
}

/* ═══════════════════════════════════
   SETTINGS — SOUND ROW
════════════════════════════════════ */
.settings-sound-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
}

.settings-sound-label {
  font-size: 0.82rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
}

.sound-toggle-btn {
  background: var(--bg4);
  border: 2px solid var(--border);
  color: var(--text);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  transition: all 0.15s;
  font-weight: 700;
}

.sound-toggle-btn.muted {
  border-color: #333;
  color: #555;
}

.sound-toggle-btn:active {
  transform: scale(0.95);
}

.btn-calibrate-settings {
  width: 100%;
  margin-top: 0;
  font-size: 0.95rem;
  padding: 12px;
}

/* ═══════════════════════════════════
   MENU — CALIBRAR BUTTON
════════════════════════════════════ */
.btn-calibrate-menu {
  width: 100%;
  padding: 14px 20px;
  background: transparent;
  border: 1px solid #333;
  color: var(--text-dim);
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  transition: all 0.15s;
  text-transform: none;
}

.btn-calibrate-menu:active {
  border-color: var(--yellow);
  color: var(--yellow);
  background: rgba(255,224,0,0.05);
}

/* ═══════════════════════════════════
   SUBMODE CARDS — 3 columnas
════════════════════════════════════ */
.submode-cards {
  flex-wrap: wrap;
}

.submode-cards .submode-card {
  min-width: calc(50% - 5px);
  flex: 1 1 calc(50% - 5px);
}

/* ═══════════════════════════════════
   COLOR MODE CONFIG
════════════════════════════════════ */
.color-labels-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.12);
}

.color-label-input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 1rem;
  padding: 10px 14px;
  font-family: var(--font);
  font-weight: 600;
  transition: border-color 0.2s;
}

.color-label-input:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(255, 224, 0, 0.12);
}

/* ═══════════════════════════════════
   CALIBRACIÓN NOTICE
════════════════════════════════════ */
.calib-notice {
  background: rgba(255, 224, 0, 0.06);
  border: 1px solid rgba(255, 224, 0, 0.25);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  color: rgba(255, 224, 0, 0.7);
}

.btn-calib-link {
  background: transparent;
  border: 1px solid rgba(255, 224, 0, 0.4);
  color: var(--yellow);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ═══════════════════════════════════
   PANTALLA AYUDA — ACORDEÓN
════════════════════════════════════ */
.help-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 32px;
}

.help-section {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.help-section.open {
  border-color: rgba(255, 224, 0, 0.35);
}

.help-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font);
  color: var(--text);
  border-radius: 0;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  transition: background 0.15s;
}

.help-section-header:active {
  background: var(--bg4);
  transform: none;
}

.help-section-icon {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}

.help-section-title {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--yellow);
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.help-section-arrow {
  font-size: 0.75rem;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: transform 0.28s ease;
  display: inline-block;
}

.help-section.open .help-section-arrow {
  transform: rotate(180deg);
}

.help-section-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease;
}

.help-section.open .help-section-body {
  max-height: 800px;
}

.help-section-content {
  padding: 0 16px 16px;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.65;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.help-section-content p {
  margin-bottom: 8px;
}

.help-section-content p:last-child {
  margin-bottom: 0;
}

.help-section-content ul {
  list-style: none;
  margin: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.help-section-content li {
  padding-left: 12px;
  position: relative;
  color: var(--text);
  line-height: 1.5;
}

.help-section-content li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--yellow);
  font-weight: 900;
}

.help-section-content strong {
  color: var(--yellow);
  font-weight: 800;
}

.help-section-content .help-faq-q {
  color: var(--yellow);
  font-weight: 800;
  margin-bottom: 2px;
}

.help-section-content .help-faq-a {
  color: var(--text-dim);
  margin-bottom: 10px;
  padding-left: 10px;
}

/* ═══════════════════════════════════
   PANTALLA CALIBRACIÓN
════════════════════════════════════ */
.calib-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  transition: background 0.4s;
}

.calib-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 16px;
  text-align: center;
  flex: 1;
  justify-content: center;
}

.calib-intro-icon {
  font-size: 4rem;
  line-height: 1;
}

.calib-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--yellow);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.calib-desc {
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 320px;
}

.calib-steps-preview {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: center;
}

.calib-preview-step {
  flex: 1;
  padding: 10px 4px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.1);
}

.calib-step-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 16px;
  flex: 1;
  text-align: center;
  justify-content: center;
}

.calib-step-num {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
}

.calib-step-label {
  font-size: clamp(2rem, 12vw, 3.5rem);
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(255,255,255,0.2);
  line-height: 1;
}

.calib-step-instruction {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
}

.calib-live-peak {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  min-height: 22px;
  font-variant-numeric: tabular-nums;
}

/* Lectura del sensor en vivo (magnitud total con gravedad) */
.calib-sensor-live {
  font-size: 1.35rem;
  font-weight: 900;
  color: rgba(255,255,255,0.85);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  min-height: 30px;
  transition: color 0.1s linear;
}

.calib-sensor-live.calib-sensor-hot {
  color: #00FF66;
  text-shadow: 0 0 14px rgba(0, 255, 102, 0.5);
}

.calib-sensor-status {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  min-height: 20px;
}

.calib-sensor-status.calib-sensor-ok  { color: #00FF66; }
.calib-sensor-status.calib-sensor-bad { color: #FF4444; }

.calib-step-status {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  letter-spacing: 0.5px;
  min-height: 24px;
}

.calib-step-status.calib-error {
  color: #FF4444;
}

.calib-step-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  align-items: center;
}

.btn-calib-ready {
  width: 100%;
  max-width: 280px;
  padding: 16px;
  font-size: 1.1rem;
  background: var(--yellow);
  color: #000;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(255, 224, 0, 0.3);
  font-weight: 900;
  letter-spacing: 1.5px;
}

.btn-calib-ready:disabled {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.4);
  box-shadow: none;
}

#calib-graph {
  border-radius: 10px;
  width: 100%;
  max-width: 300px;
  height: 80px;
}

/* Fallback SOLO de calibración: registrar el golpe con un toque */
.btn-calib-tap {
  width: 100%;
  max-width: 280px;
  margin-top: 14px;
  padding: 18px 14px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.3;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
  border: 1px dashed rgba(255,255,255,0.35);
  border-radius: 14px;
  cursor: pointer;
}

.btn-calib-tap:active {
  background: rgba(255,255,255,0.18);
}

.calib-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 16px;
  text-align: center;
  flex: 1;
  justify-content: center;
}

.calib-results-icon {
  font-size: 3.5rem;
  color: var(--yellow);
  line-height: 1;
}

.calib-result-values {
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 16px 20px;
  width: 100%;
  max-width: 280px;
  border: 1px solid rgba(255,255,255,0.1);
}

.calib-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.calib-result-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

.calib-result-value {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

.calib-results-error .calib-title {
  color: #FF4444;
}

/* ── Resumen "CALIBRACIÓN ACTUAL" ── */
/* 6 tarjetas + 2 botones no caben en pantallas bajas: se permite scroll */
.calib-results.calib-cur-screen {
  justify-content: flex-start;
  gap: 12px;
  overflow-y: auto;
}

.calib-cur-title {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--yellow);
  text-transform: uppercase;
}

.calib-cur-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 300px;
}

.calib-cur-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  text-align: left;
}

.calib-cur-icon {
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
}

.calib-cur-label {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}

.calib-cur-value {
  font-size: 1rem;
  font-weight: 900;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Botón outline blanco — "RECALIBRAR" sobre el resumen guardado */
.btn-calib-outline {
  width: 100%;
  max-width: 280px;
  padding: 14px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 14px;
  cursor: pointer;
}

.btn-calib-outline:active {
  background: rgba(255,255,255,0.12);
}

/* ── Ajuste manual de sensibilidad (slider de umbral) ── */
.calib-manual {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,224,0,0.25);
  border-radius: 14px;
}

.calib-manual-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}

.calib-manual-label {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

.calib-manual-slider {
  margin: 4px 0;
}

.calib-manual-desc {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.3;
}

/* ═══════════════════════════════════
   PANTALLA MODO COLORES
════════════════════════════════════ */
#screen-colors {
  overflow: hidden;
}

.colors-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Estado en reposo translúcido: deja ver las partículas globales.
     Los colores del estímulo sí son opacos (ver setColorsStage) — el
     destello a pantalla completa es justo lo que mide este modo. */
  background: rgba(10, 10, 10, 0.92);
  transition: background 0.12s ease;
  z-index: 1;
}

.colors-center-text {
  font-size: clamp(2.8rem, 14vw, 6rem);
  font-weight: 900;
  text-align: center;
  padding: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.1;
  text-shadow: 0 2px 24px rgba(0,0,0,0.25);
  z-index: 2;
  max-width: 90vw;
}

/* ═══════════════════════════════════
   SUMMARY — COLOR STATS
════════════════════════════════════ */
.color-stats-section {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 12px;
  margin-top: 4px;
}

.color-stats-title {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 10px;
  text-align: center;
}

.color-stats-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-stat-swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

.color-stat-name {
  font-size: 0.8rem;
  font-weight: 700;
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.color-stat-values {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════
   SUBMODE SELECTOR CARDS
════════════════════════════════════ */
.submode-cards {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.submode-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 10px;
  background: var(--bg3);
  border: 2px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-dim);
  text-align: center;
}

.submode-card.active {
  border-color: var(--yellow);
  background: #1A1500;
  color: var(--yellow);
}

.submode-card:active {
  transform: scale(0.97);
}

.submode-card-icon {
  font-size: 2rem;
  line-height: 1;
}

.submode-card-title {
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
}

.submode-card-desc {
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.2px;
  line-height: 1.3;
}

.submode-card.active .submode-card-desc {
  color: rgba(255, 224, 0, 0.6);
}

/* ═══════════════════════════════════
   REACTION SIMPLE SCREEN
════════════════════════════════════ */
#screen-reaction {
  overflow: hidden;
}

.reaction-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  padding-top: calc(80px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  gap: 12px;
}

.reaction-stimulus-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.reaction-stimulus {
  width: min(220px, 55vw);
  height: min(220px, 55vw);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 3px solid var(--border);
  background: var(--bg3);
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.reaction-stimulus.state-wait {
  background: #111;
  border-color: #333;
}

.reaction-stimulus.state-hit {
  background: #002200;
  border-color: var(--green);
  box-shadow: 0 0 50px rgba(0, 204, 68, 0.35);
  animation: reaction-pulse 0.3s ease infinite alternate;
}

@keyframes reaction-pulse {
  from { box-shadow: 0 0 30px rgba(0, 204, 68, 0.3); }
  to   { box-shadow: 0 0 70px rgba(0, 204, 68, 0.6); }
}

.reaction-stimulus.state-result-ok {
  background: #1A1500;
  border-color: var(--yellow);
  box-shadow: 0 0 40px rgba(255, 224, 0, 0.25);
}

.reaction-stimulus.state-miss {
  background: #1a0000;
  border-color: var(--red);
}

.stimulus-icon {
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1;
}

.stimulus-text {
  font-size: clamp(1.3rem, 5vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stimulus-sub {
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
}

.reaction-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   NUEVO HOME — pantalla principal rediseñada
   Solo afecta a #screen-menu y clases con prefijo .home-
════════════════════════════════════════════════════════════════ */

/* ── Variables de color del nuevo home ── */
#screen-menu {
  --h-yellow: #FF0000;
  --h-blue:   #00D4FF;
  --h-green:  #FFD300;
  --h-purple: #9B59B6;
  --h-black:  #050505;
  --h-bg1:    #0D0D0D;
  --h-bg2:    #141414;
  --h-border: #1E1E1E;
}

/* ── HEADER SUPERIOR ── */
.home-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 8px 14px;
  background: rgba(5, 5, 5, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  gap: 10px;
}

/* ── IZQUIERDA: avatar ── */
.home-header-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  min-width: 0;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 0;
}

.home-header-avatar:active {
  transform: scale(0.95);
}

.home-avatar-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1A1A1A;
  border: 2px solid #2A2A2A;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.home-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.home-avatar-initials {
  font-size: 1.1rem;
  font-weight: 900;
  color: #FFD300;
  text-transform: uppercase;
  line-height: 1;
}

.home-avatar-level {
  font-size: 10px;
  font-weight: 700;
  color: #FFD300;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* ── CENTRO: brand ── */
.home-header-brand {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.home-header-brand::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  border: 1.5px solid rgba(255,211,0,0.35);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  animation: brandEnergyRing 3s ease-out infinite;
}
@keyframes brandEnergyRing {
  0%   { transform: translate(-50%,-50%) scale(0.6); opacity: 0.6; }
  70%  { opacity: 0; }
  100% { transform: translate(-50%,-50%) scale(3); opacity: 0; }
}

.home-brand-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
  animation: brandGlowPulse 2s ease-in-out infinite;
}
@keyframes brandGlowPulse {
  0%, 100% { text-shadow: 0 0 6px rgba(255,211,0,0.3); }
  50%      { text-shadow: 0 0 16px rgba(255,211,0,0.7), 0 0 30px rgba(255,211,0,0.3); }
}

.home-brand-impact { color: #FFFFFF; }
.home-brand-lab    { color: #FFD300; }

.home-brand-tagline {
  display: flex;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-wrap: nowrap;
}

/* Colores compartidos tagline (header + intro) */
.tagline-blue   { color: #00D4FF; }
.tagline-white  { color: #FFFFFF; }
.tagline-yellow { color: #FFD300; }

/* ── DERECHA: settings ── */
.home-settings-btn {
  flex-shrink: 0;
  color: #666666;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
}

.home-settings-btn .nav-icon-wrap {
  color: #666666;
}

.home-settings-btn:active .nav-icon-wrap {
  color: #FFD300;
  filter: drop-shadow(0 0 6px #FFD300);
}

/* ── #screen-menu usa layout flex-col para que el nav sea relativo ── */
#screen-menu {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#screen-menu .home-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── CONTENIDO PRINCIPAL (scrollable) ── */
.home-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 16px 24px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

/* ── INTRO: título + tagline ── */
.home-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  padding: 4px 0 0;
}

.home-intro-title {
  font-size: 28px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  line-height: 1.1;
}

.home-intro-sub {
  display: flex;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── WRAP: borde eléctrico + chispas ── */
.calib-btn-wrap {
  position: relative;
  border-radius: 22px;
}
@property --calib-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.calib-btn-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 22px;
  background: conic-gradient(from var(--calib-angle), #FFD300, #00D4FF, #FF1A1A, #FFD300);
  animation: borderSpin 3s linear infinite;
  z-index: 0;
  opacity: 0.85;
  filter: blur(1.5px);
}
.calib-btn-wrap .home-measure-btn { position: relative; z-index: 1; }
@keyframes borderSpin { to { --calib-angle: 360deg; } }

.calib-spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 10px 2px rgba(255,255,255,0.9);
  z-index: 2;
  animation: calibSparkPulse 1.6s ease-in-out infinite;
}
.calib-spark.tl { top: -2px;    left: -2px;   animation-delay: 0s; }
.calib-spark.tr { top: -2px;    right: -2px;  animation-delay: 0.4s; }
.calib-spark.bl { bottom: -2px; left: -2px;   animation-delay: 0.8s; }
.calib-spark.br { bottom: -2px; right: -2px;  animation-delay: 1.2s; }
@keyframes calibSparkPulse {
  0%, 80%, 100% { opacity: 0; transform: scale(0.5); }
  90%           { opacity: 1; transform: scale(1.4); }
}

/* ── BOTÓN PRINCIPAL ── */
.home-measure-btn {
  width: 100%;
  padding: 26px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #FFD300;
  color: #050505;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  animation: home-measure-pulse 2s ease-in-out infinite;
  will-change: box-shadow;
  transition: transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.home-measure-ecg {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.home-measure-text {
  flex: 1;
  font-size: clamp(1.2rem, 5.5vw, 1.55rem);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #050505;
  text-align: center;
}

.home-measure-arrow {
  font-size: 2.2rem;
  font-weight: 300;
  color: #050505;
  flex-shrink: 0;
  line-height: 1;
}

@keyframes home-measure-pulse {
  0%, 100% { box-shadow: 0 6px 28px rgba(255, 211, 0, 0.35), 0 2px 8px rgba(255, 211, 0, 0.20); }
  50%       { box-shadow: 0 12px 64px rgba(255, 211, 0, 0.80), 0 4px 20px rgba(255, 211, 0, 0.40); }
}

.home-measure-btn:active {
  transform: scale(0.96);
  box-shadow: 0 2px 12px rgba(255, 211, 0, 0.25) !important;
  animation: none;
}

/* ── HINT TEXT CALIBRACIÓN ── */
.home-calib-hint {
  text-align: center;
  font-size: 0.78rem;
  color: #666;
  margin-top: -6px;
  cursor: pointer;
}
.home-calib-hint.home-calib-hint-ok {
  color: #00FF66;
}
.home-calib-hint.home-calib-hint-warn {
  color: #FF9500;
}
.home-calib-hint-link {
  color: #888;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── 3 MÉTRICAS: UNA TARJETA HORIZONTAL ── */
.home-metrics-bar {
  display: flex !important;
  background: #111;
  border: 1px solid #1E1E1E;
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
}

.home-metric-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px 12px;
  gap: 3px;
  min-width: 0;
}

.home-metric-sep {
  width: 1px;
  background: #1E1E1E;
  flex-shrink: 0;
  margin: 12px 0;
}

.home-metric-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  width: 40px;
  height: 40px;
  background: transparent;
}

.home-metric-icon-wrap img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  mix-blend-mode: screen;
  background: transparent;
  display: block;
}

.home-metric-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #555;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.home-metric-val {
  font-size: 24px;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.home-metric-unit {
  font-size: 0.5rem;
  color: #3A3A3A;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ── 4 TARJETAS DE MODOS (columna vertical) ── */
.home-modes-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hmc {
  position: relative;
  width: 100%;
  height: 150px;
  background: #050505;
  border: 1.5px solid #1E1E1E;
  border-radius: 16px;
  padding: 0;
  display: flex;
  overflow: hidden;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

@keyframes hmcSlideIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hmc.hmc-enter { animation: hmcSlideIn 0.4s ease-out both; }

.hmc:active {
  transform: scale(0.97);
  opacity: 0.9;
}

.hmc--blue   { border-color: rgba(0, 212, 255, 0.25); }
.hmc--green  { border-color: rgba(255, 211, 0, 0.25); }
.hmc--yellow { border-color: rgba(255, 0, 0, 0.25); }
.hmc--purple { border-color: rgba(155, 89, 182, 0.25); }

/* Left panel (45%) */
.hmc-left {
  width: 45%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 10px 14px 14px;
  background: #050505;
  gap: 3px;
  position: relative;
  z-index: 1;
}

.hmc-icon {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.hmc-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
  display: block;
}

.hmc-desc {
  font-size: 14px;
  color: #666;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  display: block;
}

.hmc-record {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
}

.hmc-record-label {
  font-size: 14px;
  color: #444;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.hmc-record-val {
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Right panel (55%) — image */
.hmc-right {
  width: 55%;
  flex-shrink: 0;
  height: 150px;
  position: relative;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}

.hmc-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #0A0A0A 0%, transparent 30%);
  z-index: 1;
}

/* ── Imágenes de cada tarjeta de modo ── */
.hmc-img-reaction {
  background-color: #050505;
  background-image: url('assets/Card-reacci%C3%B3n3.png') !important;
  background-blend-mode: normal;
  background-position: 70% center !important;
}
.hmc-img-combo {
  background-color: #050505;
  background-image: url('assets/card-combo4.png') !important;
  background-blend-mode: normal;
  background-size: cover !important;
  background-position: center center !important;
}
.hmc-img-colors {
  background-color: #050505;
  background-image: url('assets/card-colores5.jpg') !important;
  background-blend-mode: normal;
  background-size: cover !important;
  background-position: center right !important;
}
.hmc-img-power {
  background-color: #050505;
  background-image: url('assets/card-potencia3.png') !important;
  background-position: 65% center !important;
}

.hmc-arrow {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 1.5rem;
  color: rgba(255,255,255,0.45);
  z-index: 2;
  line-height: 1;
  font-weight: 300;
}

/* ── FOOTER HINT ── */
.home-footer-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 16px;
  cursor: pointer;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.home-footer-text {
  font-size: 0.7rem;
  color: #3A3A3A;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.home-footer-down {
  font-size: 1rem;
  color: #3A3A3A;
  animation: home-footer-bounce 1.5s ease-in-out infinite;
}

@keyframes home-footer-bounce {
  0%, 100% { transform: translateY(0);   opacity: 0.5; }
  50%       { transform: translateY(5px); opacity: 1; }
}

.home-footer-hint:hover .home-footer-text,
.home-footer-hint:hover .home-footer-down,
.home-footer-hint:focus .home-footer-text,
.home-footer-hint:focus .home-footer-down { color: #666; }

/* ═══════════════════════════════════════════════════════════════
   NUEVO HOME — LANDSCAPE (móvil apaisado sobre el saco)
════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 520px) {

  .home-header {
    min-height: 52px;
    padding: 4px 10px;
  }

  .home-avatar-circle   { width: 36px; height: 36px; }
  .home-avatar-level    { display: none; }
  .home-brand-title     { font-size: 16px; }
  .home-brand-tagline   { display: flex !important; font-size: 9px; }
  .home-intro           { display: none; }

  .home-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 14px 14px;
    max-width: none;
  }

  .home-measure-btn {
    padding: 14px 14px;
  }

  .home-measure-text { font-size: 1rem; }

  .home-metrics {
    display: flex !important;
    flex-direction: row !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .home-metric-card .home-metric-val { font-size: 15px; }
  .home-metric-lbl                   { font-size: 9px; }

  .home-modes-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .hmc-title  { font-size: 14px; }
  .hmc-desc   { font-size: 12px; }
  .hmc-record-label { font-size: 11px; }
  .hmc-record-val   { font-size: 13px; }
  .hmc-arrow  { display: none; }

  #screen-menu .home-content {
    overflow-y: auto;
  }
}

/* ═══════════════════════════════════
   PERFIL — AVATAR + NIVEL
════════════════════════════════════ */
.profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0 4px;
  width: 100%;
}

.profile-avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #1A1A1A;
  border: 2px solid #2A2A2A;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.profile-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile-avatar-initials {
  font-size: 1.8rem;
  font-weight: 900;
  color: #FFD300;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -1px;
}

.btn-avatar-upload {
  font-size: 0.72rem;
  font-weight: 700;
  color: #888;
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  border-radius: 20px;
  padding: 5px 14px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.15s;
  text-transform: uppercase;
}

.btn-avatar-upload:active {
  background: #222;
  color: #FFD300;
  border-color: #FFD300;
}

.profile-level-badge {
  font-size: 0.78rem;
  font-weight: 900;
  color: #FFD300;
  background: rgba(255, 211, 0, 0.1);
  border: 1px solid rgba(255, 211, 0, 0.35);
  border-radius: 20px;
  padding: 4px 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.profile-level-progress-wrap {
  width: 100%;
  max-width: 240px;
  height: 6px;
  background: #1A1A1A;
  border-radius: 3px;
  overflow: hidden;
}

.profile-level-progress-bar {
  height: 100%;
  background: #FFD300;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.profile-level-points {
  font-size: 0.68rem;
  color: #555;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Oculta la sección de avatar cuando el perfil aún no existe (primer arranque) */
.profile-avatar-section.setup-mode {
  display: none;
}

/* Oculta el logo STRIKE IQ cuando ya hay perfil y estamos desde nav */
.profile-setup-logo.hidden-nav {
  display: none;
}

/* ═══════════════════════════════════
   AUTH SCREENS
════════════════════════════════════ */
.auth-logo-big {
  height: 100px;
  width: auto;
  object-fit: contain;
  margin-bottom: 48px;
}

.auth-logo-sm {
  height: 64px;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 28px auto 32px;
}

.auth-logo-wrap {
  text-align: center;
  width: 100%;
}

.btn-auth-welcome {
  max-width: 320px;
  width: 100%;
  background: #FFD300;
  color: #000000;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

.btn-auth-outline {
  max-width: 320px;
  width: 100%;
  padding: 16px;
  background: transparent;
  border: 2px solid #FFFFFF;
  border-radius: 14px;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  transition: opacity 0.15s;
  text-transform: uppercase;
}

.btn-auth-outline:active {
  opacity: 0.7;
}

.auth-error {
  color: #FF4444;
  font-size: 13px;
  min-height: 18px;
  text-align: center;
  width: 100%;
}

.auth-link {
  color: var(--text-dim);
  font-size: 14px;
  text-align: center;
  width: 100%;
  margin-top: 4px;
}

.auth-link a {
  color: #FFD300;
  cursor: pointer;
  text-decoration: underline;
}

.btn-logout {
  width: 100%;
  padding: 14px;
  background: transparent;
  border: 2px solid #FF4444;
  border-radius: 14px;
  color: #FF4444;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  margin-top: 8px;
  text-transform: uppercase;
  transition: background 0.15s;
}

.btn-logout:active {
  background: rgba(255, 68, 68, 0.1);
}

/* ═══════════════════════════════════
   GAMIFICACIÓN — MODO POTENCIA
════════════════════════════════════ */

/* Hit rating popup */
.gam-hit-rating {
  text-align: center;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.gam-hit-rating.gam-hit-anim {
  animation: gamHitAnim 0.8s ease forwards;
}
@keyframes gamHitAnim {
  0%   { opacity: 0; transform: translateY(-10px); }
  20%  { opacity: 1; transform: translateY(0); }
  65%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}
.gam-hit-label {
  font-size: clamp(1.5rem, 7vw, 2rem);
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1;
}
.gam-hit-xp {
  font-size: 1rem;
  font-weight: 700;
  color: #FFD300;
  margin-top: 2px;
  letter-spacing: 1px;
}

/* Combo streak badge */
.gam-streak-badge {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1.5px solid currentColor;
  white-space: nowrap;
}
.gam-streak-badge.hidden { display: none; }
.gam-s2  { color: #FFFFFF; border-color: rgba(255,255,255,0.35); }
.gam-s5  { color: #FFD300; border-color: rgba(255,211,0,0.45); }
.gam-s10 { color: #FF8800; border-color: rgba(255,136,0,0.5); font-size: 15px; }
.gam-s20 { color: #FF3333; border-color: rgba(255,51,51,0.5); font-size: 16px; }
.gam-s50 {
  color: #FF0000;
  border-color: rgba(255,0,0,0.6);
  font-size: 16px;
  animation: gamStreakPulse 0.8s ease-in-out infinite;
}
@keyframes gamStreakPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.65; transform: scale(1.06); }
}

/* XP Bar */
.gam-xp-bar-wrap {
  margin: 6px 0 4px;
  padding: 0 2px;
}
.gam-xp-level-label {
  font-size: 10px;
  font-weight: 700;
  color: #FFD300;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 4px;
}
.gam-xp-bar-track {
  height: 6px;
  background: #1A1A1A;
  border-radius: 3px;
  overflow: hidden;
}
.gam-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD300, #FF8C00);
  border-radius: 3px;
  transition: width 0.45s ease;
}
.gam-xp-bar-progress {
  font-size: 10px;
  color: #555;
  text-align: right;
  margin-top: 2px;
}
.gam-xp-flash {
  animation: gamXpFlash 0.7s ease-in-out;
}
@keyframes gamXpFlash {
  0%, 100% { background: linear-gradient(90deg, #FFD300, #FF8C00); }
  50%       { background: linear-gradient(90deg, #FFFFFF, #FFD300); }
}

/* Milestone overlay */
.gam-milestone {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 200;
  background: transparent;
}
.gam-milestone.hidden { display: none; }
.gam-milestone-show {
  background: rgba(0, 0, 0, 0.75);
  animation: gamMilestoneOverlay 1.5s ease-out forwards;
}
@keyframes gamMilestoneOverlay {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}
.gam-milestone-text {
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  font-weight: 900;
  color: #FFD300;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 24px 20px;
  animation: gamMilestoneZoom 1.5s ease-out forwards;
}
@keyframes gamMilestoneZoom {
  0%   { transform: scale(0.4); opacity: 0; }
  15%  { transform: scale(1.08); opacity: 1; }
  28%  { transform: scale(1.0); }
  75%  { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(0.92); opacity: 0; }
}

/* Screen flash for x20+ combo */
#screen-training.gam-screen-flash::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(255, 51, 51, 0.35);
  pointer-events: none;
  animation: gamScreenFlash 0.4s ease-out forwards;
  z-index: 199;
}
@keyframes gamScreenFlash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* Gamification summary section */
.gam-summary-section {
  background: linear-gradient(135deg, #160f00, #0d0d0d);
  border: 1px solid rgba(255, 211, 0, 0.22);
  border-radius: 16px;
  padding: 20px 16px;
  margin: 12px 0;
  text-align: center;
}
.gam-summary-xp {
  font-size: clamp(2.8rem, 14vw, 4rem);
  font-weight: 900;
  color: #FFD300;
  letter-spacing: 2px;
  line-height: 1;
}
.gam-summary-xp-label {
  font-size: 10px;
  color: #666;
  letter-spacing: 2px;
  margin: 4px 0 16px;
  text-transform: uppercase;
}
.gam-summary-details {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
}
.gam-summary-detail {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 10px 6px;
}
.gam-summary-detail-label {
  font-size: 9px;
  color: #555;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.gam-summary-detail-val {
  font-size: 1rem;
  font-weight: 800;
  color: #FFD300;
  letter-spacing: 1px;
}
.gam-summary-level {
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.gam-summary-level-name {
  font-size: 13px;
  font-weight: 700;
  color: #FFD300;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.gam-summary-level-progress {
  font-size: 10px;
  color: #555;
  margin-top: 4px;
}
.gam-summary-levelup {
  margin-top: 14px;
  padding: 10px 16px;
  background: rgba(255, 211, 0, 0.12);
  border: 1px solid rgba(255, 211, 0, 0.35);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  color: #FFD300;
  letter-spacing: 2px;
  animation: gamLevelUpPulse 1.2s ease-in-out infinite;
}
@keyframes gamLevelUpPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* ═══════════════════════════════════
   AAA — HIT POPUP CONTAINER (top-right)
════════════════════════════════════ */
#hit-popup-container {
  position: fixed;
  top: 68px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 9999;
  pointer-events: none;
  align-items: flex-end;
}

.hit-popup-card {
  background: rgba(0,0,0,0.78);
  border: 2px solid var(--tc, #FFFFFF);
  border-radius: 8px;
  padding: 6px 14px;
  box-shadow: 0 0 18px var(--tc, #FFFFFF);
  animation: hitPopIn 0.22s cubic-bezier(0.34,1.56,0.64,1) forwards;
  transform-origin: top right;
  min-width: 120px;
  text-align: right;
}

.hit-popup-sifu-level {
  animation: hitPopIn 0.22s cubic-bezier(0.34,1.56,0.64,1) forwards,
             hitShake 0.45s ease 0.25s forwards;
}

.hit-popup-out {
  animation: hitPopOut 0.22s ease forwards !important;
}

.hit-popup-label {
  font-size: 22px;
  font-weight: 900;
  color: var(--tc, #FFFFFF);
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 0 10px var(--tc, #FFFFFF);
}

.hit-popup-xp {
  font-size: 11px;
  font-weight: 700;
  color: #FFD300;
  letter-spacing: 1px;
  margin-top: 2px;
  opacity: 0.9;
}

@keyframes hitPopIn {
  0%   { opacity: 0; transform: translateY(-16px) scale(0.82); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hitPopOut {
  0%   { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(50px) scale(0.85); }
}
@keyframes hitShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-5px); }
  40%     { transform: translateX(5px); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(5px); }
}

/* ═══════════════════════════════════
   AAA — GLOBAL STREAK COUNTER (top-left)
════════════════════════════════════ */
#global-streak-counter {
  position: fixed;
  top: 68px;
  left: 10px;
  z-index: 9999;
  pointer-events: none;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,0.78);
  border: 2px solid currentColor;
  white-space: nowrap;
  line-height: 1;
}
#global-streak-counter.hidden { display: none; }
.gsc-s2  { color: #FFFFFF; font-size: 14px; box-shadow: 0 0 8px rgba(255,255,255,0.2); }
.gsc-s5  { color: #FFD300; font-size: 17px; box-shadow: 0 0 14px rgba(255,211,0,0.45); }
.gsc-s10 { color: #FF8C00; font-size: 20px; box-shadow: 0 0 18px rgba(255,140,0,0.55); }
.gsc-s20 { color: #FF3333; font-size: 24px; box-shadow: 0 0 22px rgba(255,51,51,0.65); }
.gsc-s50 {
  color: #FF0000; font-size: 28px;
  box-shadow: 0 0 28px rgba(255,0,0,0.75);
  animation: gscPulse 0.65s ease-in-out infinite;
}
@keyframes gscPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.1); }
}

/* ═══════════════════════════════════
   AAA — HIT PARTICLES CANVAS
════════════════════════════════════ */
.hit-particle-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 499;
  width: 100%;
  height: 100%;
}

/* ═══════════════════════════════════
   AAA — SCREEN FLASH / SHAKE
════════════════════════════════════ */
.screen-flash-body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 498;
  animation: sfBodyFlash 0.2s ease-out forwards;
}
@keyframes sfBodyFlash {
  0%   { background: rgba(255,255,255,0.35); }
  100% { background: transparent; }
}
.screen-flash-red-body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 498;
  animation: sfBodyFlashRed 0.35s ease-out forwards;
}
@keyframes sfBodyFlashRed {
  0%   { background: rgba(255,26,26,0.5); }
  100% { background: transparent; }
}
.screen-shake-body {
  animation: bodyShake 0.32s ease;
}
@keyframes bodyShake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-9px); }
  36% { transform: translateX(9px); }
  54% { transform: translateX(-6px); }
  72% { transform: translateX(6px); }
}

/* ═══════════════════════════════════
   AAA — GLOBAL XP OVERLAY (all modes)
════════════════════════════════════ */
.global-xp-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 400;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.global-xp-overlay.hidden { display: none; }
.global-xp-level-lbl {
  font-size: 9px;
  font-weight: 800;
  color: #FFD300;
  letter-spacing: 2px;
  text-align: center;
  padding-bottom: 2px;
  opacity: 0.8;
}
.global-xp-track {
  height: 8px;
  background: rgba(0,0,0,0.65);
  position: relative;
  overflow: hidden;
}
.global-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD300, #FF8C00);
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.global-xp-shimmer {
  position: absolute;
  top: 0; left: -60%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
  animation: gxpShimmer 2.4s ease-in-out infinite;
}
@keyframes gxpShimmer {
  0%   { left: -60%; }
  100% { left: 110%; }
}

/* ═══════════════════════════════════
   AAA — HOME PARTICLES CANVAS
════════════════════════════════════ */
.home-particles-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════
   AAA — MAIN BUTTON RIPPLE
════════════════════════════════════ */
.home-measure-btn {
  overflow: hidden;
  position: relative;
}
.btn-ripple-el {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: btnRippleAnim 0.55s linear;
  background: rgba(255,255,255,0.22);
  pointer-events: none;
}
@keyframes btnRippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ═══════════════════════════════════
   AAA — RESULT SPLASH SCREEN
════════════════════════════════════ */
#screen-result-splash {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Translúcido para que se vean las partículas globales por debajo */
  background: rgba(5, 5, 5, 0.85);
  z-index: 10;
}
.result-splash-inner {
  text-align: center;
  position: relative;
  padding: 20px;
  width: 100%;
}
.result-grade {
  font-size: clamp(7rem, 32vw, 11rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -4px;
  animation: gradePopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes gradePopIn {
  0%   { transform: scale(0.2); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
.rg-S { color: #FFD300; text-shadow: 0 0 60px rgba(255,211,0,0.7); }
.rg-A { color: #00FF66; text-shadow: 0 0 60px rgba(0,255,102,0.6); }
.rg-B { color: #00D4FF; text-shadow: 0 0 60px rgba(0,212,255,0.5); }
.rg-C { color: #FFFFFF; text-shadow: 0 0 40px rgba(255,255,255,0.3); }
.result-grade-label {
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 5px;
  color: rgba(255,255,255,0.6);
  margin-top: 8px;
  text-transform: uppercase;
}
.result-xp-count {
  font-size: 2.6rem;
  font-weight: 900;
  color: #FFD300;
  letter-spacing: 3px;
  margin-top: 20px;
  text-shadow: 0 0 20px rgba(255,211,0,0.5);
  min-height: 3rem;
}
#result-confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 11;
}

/* ═══════════════════════════════════
   AAA — LEVEL UP FULLSCREEN OVERLAY
════════════════════════════════════ */
.level-up-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 600;
  pointer-events: none;
  animation: luFadeInOut 2.5s ease forwards;
}
@keyframes luFadeInOut {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}
.lu-tag {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 5px;
  color: #FFD300;
  margin-bottom: 16px;
}
.lu-name {
  font-size: clamp(2rem, 10vw, 3.5rem);
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 2px;
  text-shadow: var(--glow-primary);
  text-align: center;
  padding: 0 20px;
  animation: luNamePop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.15s both;
}
@keyframes luNamePop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ═══════════════════════════════════
   AAA — RÉCORD HISTÓRICO OVERLAY (flash dorado)
════════════════════════════════════ */
.record-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(255,211,0,0.45) 0%, rgba(255,140,0,0.15) 45%, transparent 75%);
  animation: recordOverlayFade 2s ease forwards;
}
.record-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,215,0,0.9);
  animation: recordFlashPop 0.35s ease-out forwards;
}
@keyframes recordOverlayFade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  20%  { opacity: 0.85; }
  80%  { opacity: 0.85; }
  100% { opacity: 0; }
}
@keyframes recordFlashPop {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
.record-overlay-text {
  font-size: clamp(1.8rem, 9vw, 3.2rem);
  font-weight: 900;
  color: #FFD300;
  text-shadow: 0 0 20px #FFD300, 0 0 40px #FF8C00;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  padding: 0 20px;
  animation: recordTextPop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.15s both,
             recordTextPulse 0.6s ease-in-out 0.65s infinite;
}
@keyframes recordTextPop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes recordTextPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ═══════════════════════════════════
   AAA — XP BAR SHIMMER (training bar)
════════════════════════════════════ */
.gam-xp-bar-track {
  position: relative;
}
.gam-xp-bar-fill {
  position: relative;
  overflow: hidden;
}
.gam-xp-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: gxpShimmer 2.4s ease-in-out infinite;
}

/* ═══════════════════════════════════
   HMC CARD TAP ANIMATION
════════════════════════════════════ */
.hmc.tapped {
  transform: scale(1.03) !important;
  opacity: 1 !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.hmc--blue.tapped   { box-shadow: 0 0 20px rgba(0,212,255,0.55); }
.hmc--green.tapped  { box-shadow: 0 0 20px rgba(255,211,0,0.55); }
.hmc--yellow.tapped { box-shadow: 0 0 20px rgba(255,0,0,0.55); }
.hmc--purple.tapped { box-shadow: 0 0 20px rgba(155,89,182,0.55); }

.dom-particle {
  position: fixed;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 500;
  animation: domParticleBurst 0.5s ease-out forwards;
}
@keyframes domParticleBurst {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}

/* ═══════════════════════════════════
   MODAL: MEDIR MI GOLPE — ELECCIÓN
════════════════════════════════════ */
.modal-measure-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px 20px;
}

.modal-measure-title {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-align: center;
  color: var(--text);
  margin-bottom: 4px;
}

.btn-measure-opt {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
}

.btn-measure-opt:active { transform: scale(0.97); }

.btn-measure-calib {
  background: rgba(255,211,0,0.1);
  border-color: #FFD300;
}

.btn-measure-train {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.18);
}

.btn-measure-opt-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.btn-measure-opt-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.btn-measure-calib .btn-measure-opt-label {
  font-size: 0.95rem;
  font-weight: 900;
  color: #FFD300;
  letter-spacing: 0.5px;
}

.btn-measure-train .btn-measure-opt-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.btn-measure-opt-desc {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.btn-measure-cancel {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 0.88rem;
  padding: 8px;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════
   GLOBAL BG PARTICLES CANVAS
════════════════════════════════════ */
.bg-particles-global {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* 0.4 dejaba las partículas al 12-32% efectivo (esta opacidad por el alfa
     0.3-0.8 de cada partícula). En el home se notaban por lo despejado del
     layout; en las pantallas interiores, llenas de tarjetas, desaparecían. */
  opacity: 0.75;
}

/* ═══════════════════════════════════
   SETTINGS DROPDOWN
════════════════════════════════════ */
.settings-wrap {
  position: relative;
}

.settings-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #111111;
  border: 1px solid #FFD300;
  border-radius: 12px;
  min-width: 200px;
  z-index: 99999;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  padding: 8px;
}
.settings-dropdown.hidden { display: none; }

.sd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.sd-item:last-child { border-bottom: none; }
.sd-item:active { background: rgba(255,211,0,0.08); }
.sd-logout { color: #FF4444; }

/* 12 idiomas: rejilla de 4 columnas (3 filas) dentro del desplegable */
.sd-lang-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.sd-lang-row .btn-lang-sm {
  padding: 9px 2px;
  font-size: 0.75rem;
}

/* ═══════════════════════════════════
   HISTORY — TABS
════════════════════════════════════ */
.hist-tabs {
  display: flex;
  gap: 6px;
}

.hist-tab {
  padding: 5px 14px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
}
.hist-tab-active {
  border-color: var(--yellow);
  color: var(--yellow);
  background: rgba(255,211,0,0.08);
}

/* ═══════════════════════════════════
   RANKING TAB
════════════════════════════════════ */
.rank-subtabs {
  display: flex;
  gap: 8px;
  padding: 12px 0 8px;
}
.rank-subtab {
  flex: 1;
  padding: 8px 4px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rank-subtab-active {
  border-color: var(--yellow);
  color: var(--yellow);
  background: rgba(255,211,0,0.08);
}
.rank-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
}
.rank-row-me {
  background: rgba(255,211,0,0.08);
  border-color: rgba(255,211,0,0.3);
}
.rank-pos { font-size: 1.1rem; font-weight: 900; color: var(--yellow); width: 28px; }
.rank-name { flex: 1; font-size: 0.9rem; font-weight: 700; }
.rank-val { font-size: 1.1rem; font-weight: 900; }
.rank-coming-soon {
  text-align: center; color: #444; font-size: 0.75rem;
  margin-top: 24px; padding: 16px;
  border: 1px dashed #333; border-radius: 10px;
}
.rank-empty { text-align: center; color: #444; font-size: 0.85rem; padding: 24px 0; }

/* ═══════════════════════════════════
   REACTION — HIT SPECTACULAR
════════════════════════════════════ */
.reaction-stimulus.state-hit {
  background: rgba(60,0,0,0.95) !important;
  border-color: #FF1A1A !important;
  box-shadow: 0 0 60px rgba(255,26,26,0.5), inset 0 0 30px rgba(255,26,26,0.15) !important;
  animation: reaction-hit-pulse 0.25s ease infinite alternate !important;
}
@keyframes reaction-hit-pulse {
  from { box-shadow: 0 0 40px rgba(255,26,26,0.4), inset 0 0 20px rgba(255,26,26,0.1); }
  to   { box-shadow: 0 0 90px rgba(255,26,26,0.75), inset 0 0 40px rgba(255,26,26,0.25); }
}
.reaction-stimulus.state-hit .stimulus-text {
  color: #FF1A1A;
  font-size: clamp(2rem, 10vw, 3.5rem) !important;
  letter-spacing: 6px;
  text-shadow: 0 0 20px #FF1A1A, 0 0 40px rgba(255,26,26,0.5);
}
.reaction-stimulus.state-hit .stimulus-icon {
  font-size: clamp(2.5rem, 10vw, 4rem);
  animation: hitBolt 0.4s ease-in-out infinite alternate;
}
@keyframes hitBolt {
  from { transform: scale(1) rotate(-5deg); filter: drop-shadow(0 0 8px #FF1A1A); }
  to   { transform: scale(1.2) rotate(5deg); filter: drop-shadow(0 0 20px #FFD300); }
}

/* Reaction hit result overlay */
.reaction-hit-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  text-align: center;
  pointer-events: none;
  z-index: 500;
  opacity: 0;
  transition: none;
}
.reaction-hit-overlay.rho-show {
  animation: rhoIn 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards,
             rhoOut 0.3s ease 1.1s forwards;
}
.reaction-hit-overlay.rho-perfect .rho-rank {
  color: #FFD300;
  text-shadow: 0 0 20px #FFD300, 0 0 40px rgba(255,211,0,0.5);
}
.rho-rank {
  font-size: clamp(2rem, 10vw, 3rem);
  font-weight: 900;
  letter-spacing: 4px;
  color: #00FF66;
  text-shadow: 0 0 16px #00FF66;
  line-height: 1;
}
.rho-time {
  font-size: 1.3rem;
  font-weight: 800;
  color: rgba(255,255,255,0.85);
  letter-spacing: 2px;
  margin-top: 4px;
}
@keyframes rhoIn {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.5); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes rhoOut {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-56%) scale(0.9); }
}

/* ═══════════════════════════════════
   LANDSCAPE RESPONSIVE
════════════════════════════════════ */
/* En horizontal la barra del navegador se comía parte del round: la pantalla
   se ata al viewport dinámico (dvh), que sí descuenta esa barra. */
@media (orientation: landscape) {
  .screen {
    height: 100dvh;
    max-height: 100dvh;
  }

  /* Sin scroll sólo en las pantallas de sesión — su contenido está pensado
     para caber entero. Los menús (home, historial, ajustes…) siguen
     scrolleando: en landscape no caben y bloquearlos los dejaría cortados. */
  #screen-training,
  #screen-reaction,
  #screen-combo,
  #screen-colors,
  #screen-rest {
    overflow: hidden;
  }

  .workout-topbar {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* El notch queda a un lado al girar el móvil */
  .screen-inner {
    padding-left:  max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .screen-inner { overflow-y: auto; }

  /* Training screen */
  #screen-training .screen-inner,
  #screen-reaction .screen-inner { gap: 6px; }

  .timer-big { font-size: 2rem; }
  .workout-topbar { padding: 4px 0; }

  .training-metrics { gap: 6px; }
  .metric-card { padding: 6px 8px; }
  .metric-value { font-size: 1.1rem; }

  .reaction-content { flex-direction: row; gap: 12px; align-items: center; }
  .reaction-stimulus-wrap { flex: 0 0 40%; }
  .reaction-metrics { flex: 1; grid-template-columns: 1fr 1fr; }

  /* Home */
  .home-content { overflow-y: auto; }
  .home-metrics-bar { overflow-x: auto; }
  .home-intro { padding: 4px 0 8px; }
  .home-hmc-section { gap: 8px; }
  .hmc { min-height: 80px; }
}

/* ═══════════════════════════════════
   REACTION SCREEN — COMPLETE REDESIGN
════════════════════════════════════ */

#screen-reaction {
  /* Translúcido para que se vean las partículas globales por debajo.
     0.92 sólo dejaba pasar un 8%: prácticamente invisible. */
  background: rgba(5, 5, 5, 0.85);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rsc-bg-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  width: 100%;
  height: 100%;
}

/* ── HEADER ── */
.rsc-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  background: rgba(0,0,0,0.7);
  border-bottom: 1px solid rgba(255,211,0,0.15);
  flex-shrink: 0;
}

.rsc-hdr-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 80px;
}

.rsc-round-lbl {
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: #FFD300;
  text-transform: uppercase;
}

.rsc-round-dots {
  display: flex;
  gap: 5px;
}

.rsc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,211,0,0.4);
}

.rsc-dot--filled {
  background: #FFD300;
  border-color: #FFD300;
  box-shadow: 0 0 6px rgba(255,211,0,0.6);
}

.rsc-hdr-center {
  text-align: center;
  flex: 1;
}

.rsc-timer {
  font-size: clamp(2rem, 8vw, 2.8rem);
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rsc-timer-sub {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
  text-transform: uppercase;
}

.rsc-hdr-right {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 80px;
  justify-content: flex-end;
}

.rsc-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.18);
  color: #FFFFFF;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}
.rsc-icon-btn:active { background: rgba(255,255,255,0.15); }

/* ── MAIN ── */
.rsc-main {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  gap: 10px;
  padding: 10px 10px 0;
  overflow: hidden;
  min-height: 0;
}

/* Portrait layout */
@media (orientation: portrait) {
  .rsc-main { flex-direction: column; }
  .rsc-left-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex-shrink: 0;
  }
  .rsc-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
  }
}

/* Landscape layout */
@media (orientation: landscape) {
  .rsc-main { flex-direction: row; }
  .rsc-left-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 150px;
    flex-shrink: 0;
  }
  .rsc-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
  }
}

/* ── METRIC CARDS ── */
.rsc-card {
  background: #0D0D0D;
  border-radius: 12px;
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  border: 1px solid rgba(255,255,255,0.06);
}

.rsc-card-icon {
  font-size: 0.95rem;
  line-height: 1;
  margin-bottom: 1px;
}

.rsc-card-lbl {
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
}

.rsc-card-val {
  font-size: 1.4rem;
  font-weight: 900;
  color: #FFD300;
  letter-spacing: 1px;
  line-height: 1.1;
}

.rsc-combo-num { font-size: 1.5rem; }

.rsc-combo-bars {
  display: flex;
  gap: 3px;
  margin-top: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.rsc-bar {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.rsc-bar-on  { background: #FFD300; box-shadow: 0 0 4px rgba(255,211,0,0.6); }
.rsc-bar-off { background: rgba(255,255,255,0.1); }

.rsc-card--split {
  flex-direction: row;
  align-items: center;
  padding: 8px 6px;
  gap: 0;
}

.rsc-split-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.rsc-split-sep {
  width: 1px;
  height: 30px;
  background: rgba(255,255,255,0.1);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ── CIRCLE WRAP ── */
.rsc-circle-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rsc-spark-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: rscSparkSpin 12s linear infinite;
}

.rsc-spark-1 {
  width: calc(min(70vmin, 280px) + 44px);
  height: calc(min(70vmin, 280px) + 44px);
  border: 2px dashed rgba(255,211,0,0.12);
  animation-duration: 14s;
}

.rsc-spark-2 {
  width: calc(min(70vmin, 280px) + 80px);
  height: calc(min(70vmin, 280px) + 80px);
  border: 1px solid rgba(255,211,0,0.06);
  animation-duration: 22s;
  animation-direction: reverse;
}

@keyframes rscSparkSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── MAIN CIRCLE ── */
.rsc-circle {
  width: min(70vmin, 280px);
  height: min(70vmin, 280px);
  border-radius: 50%;
  border: 6px solid #FFD300;
  box-shadow: 0 0 30px rgba(255,211,0,0.4), 0 0 60px rgba(255,211,0,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  background: rgba(5,5,0,0.8);
  padding: 16px;
  text-align: center;
  gap: 2px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

/* State: wait */
.rsc-circle.state-wait {
  border-color: rgba(255,211,0,0.4);
  box-shadow: 0 0 20px rgba(255,211,0,0.15);
  animation: rscWaitPulse 2.2s ease-in-out infinite;
}
@keyframes rscWaitPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255,211,0,0.15); }
  50%       { box-shadow: 0 0 45px rgba(255,211,0,0.35); }
}

/* State: hit */
.rsc-circle.state-hit {
  border-color: #FF1A1A !important;
  background: rgba(35,0,0,0.9) !important;
  animation: rscHitPulse 0.22s ease infinite alternate !important;
}
@keyframes rscHitPulse {
  from { box-shadow: 0 0 40px rgba(255,26,26,0.4), inset 0 0 20px rgba(255,26,26,0.08); }
  to   { box-shadow: 0 0 90px rgba(255,26,26,0.8), inset 0 0 40px rgba(255,26,26,0.2); }
}

/* State: result-ok */
.rsc-circle.state-result-ok {
  border-color: #FFD300;
  background: rgba(8,6,0,0.85);
  box-shadow: 0 0 50px rgba(255,211,0,0.5), 0 0 100px rgba(255,211,0,0.18);
  animation: rscResultPop 0.28s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes rscResultPop {
  0%   { transform: scale(0.93); }
  100% { transform: scale(1); }
}

/* State: miss */
.rsc-circle.state-miss {
  border-color: #444;
  background: rgba(15,0,0,0.8);
  box-shadow: 0 0 20px rgba(80,0,0,0.3);
}

/* ── CIRCLE INNER ELEMENTS ── */
.rsc-circle-check {
  font-size: 1.6rem;
  line-height: 1;
  color: #FFD300;
}

/* check icon hidden in wait/miss states */
.state-wait .rsc-circle-check { display: none; }

/* hit: big lightning bolt */
.state-hit .rsc-circle-check {
  font-size: clamp(2.5rem, 12vmin, 3.8rem);
  color: #FF1A1A;
  text-shadow: 0 0 20px #FF1A1A, 0 0 40px rgba(255,26,26,0.5);
  animation: rscBolt 0.35s ease-in-out infinite alternate;
}
@keyframes rscBolt {
  from { transform: scale(1) rotate(-6deg); }
  to   { transform: scale(1.18) rotate(6deg); }
}

/* result: check in gold mini-circle */
.state-result-ok .rsc-circle-check {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,211,0,0.12);
  border: 2px solid rgba(255,211,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #FFD300;
  flex-shrink: 0;
}

/* miss: X */
.state-miss .rsc-circle-check {
  font-size: clamp(1.8rem, 8vmin, 2.8rem);
  color: #555;
}

.rsc-circle-rank {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: #FFD300;
  text-transform: uppercase;
  line-height: 1.2;
}
.state-wait .rsc-circle-rank,
.state-hit  .rsc-circle-rank,
.state-miss .rsc-circle-rank { display: none; }

.rsc-circle-ms {
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: 1px;
}

/* wait: "PREPÁRATE" */
.state-wait .rsc-circle-ms {
  font-size: clamp(0.85rem, 4vmin, 1.3rem);
  color: rgba(255,255,255,0.45);
  letter-spacing: 3px;
  font-weight: 700;
}

/* hit: big "HIT" con choque eléctrico rojo/blanco */
.state-hit .rsc-circle-ms {
  font-size: clamp(2.5rem, 12vmin, 4rem) !important;
  letter-spacing: 8px;
  animation: hitTextFlicker 0.12s steps(1) infinite;
}
@keyframes hitTextFlicker {
  0%, 100% { color: #FF1A1A; text-shadow: 0 0 20px #FF1A1A, 0 0 50px rgba(255,26,26,0.5); }
  50%      { color: #FFFFFF; text-shadow: 0 0 20px #FFFFFF, 0 0 50px rgba(255,255,255,0.6); }
}

.hit-ray {
  position: fixed;
  width: 70vmax;
  height: 3px;
  pointer-events: none;
  z-index: 303;
  background: linear-gradient(to right, rgba(255,26,26,0.7), transparent 70%);
  transform-origin: 0 50%;
  animation: hitRayAnim 0.35s ease-out forwards;
}
@keyframes hitRayAnim {
  0%   { opacity: 1; transform: rotate(var(--ray-rot)) scaleX(0); }
  60%  { opacity: 1; transform: rotate(var(--ray-rot)) scaleX(1); }
  100% { opacity: 0; transform: rotate(var(--ray-rot)) scaleX(1); }
}

/* result: big ms number */
.state-result-ok .rsc-circle-ms {
  font-size: clamp(2.2rem, 10vmin, 3.5rem) !important;
  color: #FFFFFF !important;
  letter-spacing: 2px;
}

/* miss: FALLO */
.state-miss .rsc-circle-ms {
  font-size: clamp(1.2rem, 5vmin, 1.8rem);
  color: #777;
  letter-spacing: 4px;
}

.rsc-circle-sub {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
  line-height: 1;
}
.state-wait .rsc-circle-sub,
.state-hit  .rsc-circle-sub,
.state-miss .rsc-circle-sub { display: none; }

.rsc-circle-xp {
  font-size: 0.88rem;
  font-weight: 800;
  color: #FFD300;
  letter-spacing: 2px;
  margin-top: 4px;
}
.state-wait .rsc-circle-xp,
.state-hit  .rsc-circle-xp,
.state-miss .rsc-circle-xp { display: none; }

/* ── FOOTER ── */
.rsc-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(0,0,0,0.75);
  border-top: 1px solid rgba(255,211,0,0.1);
  flex-shrink: 0;
  gap: 14px;
}

.rsc-footer-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.rsc-footer-level {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}

.rsc-footer-xp-track {
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.rsc-footer-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD300, #FF8C00);
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  overflow: hidden;
}

.rsc-xp-shimmer {
  position: absolute;
  top: 0; left: -60%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: rscXpShimmer 2s ease-in-out infinite;
}
@keyframes rscXpShimmer {
  0%   { left: -60%; }
  100% { left: 110%; }
}

.rsc-footer-xp-badge {
  background: #FFD300;
  color: #000000;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Landscape compact adjustments for reaction screen */
@media (orientation: landscape) and (max-height: 520px) {
  .rsc-header { padding: 6px 12px 5px; }
  .rsc-timer  { font-size: 1.7rem; }
  .rsc-circle {
    width: min(52vmin, 200px);
    height: min(52vmin, 200px);
  }
  .rsc-spark-1, .rsc-spark-2 { display: none; }
  .rsc-left-col { width: 120px; gap: 4px; }
  .rsc-card { padding: 5px 8px 4px; border-radius: 8px; }
  .rsc-card-val { font-size: 1.1rem; }
  .rsc-footer { padding: 4px 10px; }
  .rsc-icon-btn { width: 30px; height: 30px; font-size: 0.85rem; }
}

/* ═══════════════════════════════════
   PARTE 2 — VISUAL & GAMIFICATION
════════════════════════════════════ */

/* Item 1 — Particles on ALL screens (see base rule above: fixed, z-index 0, opacity 0.4) */

/* Item 2 — Hit rings expanding from circle */
.hit-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #FFD300;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  animation: hitRingExpand 0.65s ease-out forwards;
}
@keyframes hitRingExpand {
  0%   { transform: scale(1);   opacity: 0.85; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* Item 2 — Epic fullscreen reaction-hit-overlay */
.reaction-hit-overlay {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important;
  transform: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 600;
  background: transparent;
}
.reaction-hit-overlay.rho-show {
  animation: rhoEpicIn 0.18s ease-out forwards,
             rhoEpicOut 0.35s ease 1.55s forwards;
}
.reaction-hit-overlay.rho-show::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,211,0,0.12) 0%, rgba(0,0,0,0) 65%);
  animation: rhoGlowBurst 0.4s ease-out forwards;
  pointer-events: none;
}
.reaction-hit-overlay.rho-perfect.rho-show::before {
  background: radial-gradient(ellipse at center, rgba(255,211,0,0.28) 0%, rgba(0,0,0,0) 65%);
}
@keyframes rhoEpicIn  { 0% { opacity:0; } 100% { opacity:1; } }
@keyframes rhoEpicOut { 0% { opacity:1; } 100% { opacity:0; } }
@keyframes rhoGlowBurst {
  0%   { transform: scale(0.4); opacity:0; }
  100% { transform: scale(1);   opacity:1; }
}
.rho-rank {
  font-size: clamp(3.5rem, 18vw, 6rem) !important;
  font-weight: 900 !important;
  letter-spacing: 5px !important;
  color: #00FF66;
  text-shadow: 0 0 30px #00FF66, 0 0 80px rgba(0,255,102,0.4) !important;
  line-height: 1;
  position: relative; z-index: 1;
  animation: rhoBounce 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.rho-time {
  font-size: clamp(1.8rem, 9vw, 3rem) !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.9) !important;
  letter-spacing: 3px !important;
  margin-top: 8px;
  position: relative; z-index: 1;
  animation: rhoBounce 0.3s cubic-bezier(0.34,1.56,0.64,1) 0.06s both;
}
.reaction-hit-overlay.rho-perfect .rho-rank {
  color: #FFD300 !important;
  text-shadow: 0 0 40px #FFD300, 0 0 100px rgba(255,211,0,0.6) !important;
}
@keyframes rhoBounce {
  0%   { transform: scale(0.3) translateY(10px); opacity:0; }
  100% { transform: scale(1)   translateY(0);    opacity:1; }
}

/* Item 3 — Slide-from-right feedback cards (140x50px, left border) */
.hit-popup-card {
  width: 140px !important;
  height: 50px !important;
  background: rgba(0,0,0,0.88) !important;
  border: none !important;
  border-left: 4px solid var(--tc, #FFD300) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 6px 10px !important;
  box-shadow: 3px 3px 14px rgba(0,0,0,0.6), -3px 0 14px var(--tc, #FFD300) !important;
  animation: hitSlideIn 0.22s cubic-bezier(0.34,1.56,0.64,1) forwards !important;
  transform-origin: right center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
  min-width: unset !important;
}
.hit-popup-out {
  animation: hitSlideOut 0.22s ease forwards !important;
}
@keyframes hitSlideIn {
  0%   { opacity:0; transform: translateX(80px); }
  100% { opacity:1; transform: translateX(0); }
}
@keyframes hitSlideOut {
  0%   { opacity:1; transform: translateX(0); }
  100% { opacity:0; transform: translateX(80px); }
}
.hit-popup-label {
  font-size: 14px !important;
  letter-spacing: 1px !important;
}
.hit-popup-xp {
  font-size: 11px !important;
  margin-top: 2px !important;
}

.hit-popup-penalty {
  height: 60px !important;
  background: rgba(60, 0, 0, 0.9) !important;
}
.hit-popup-penalty .hit-popup-label {
  font-size: 11px !important;
  color: var(--tc, #FF1A1A) !important;
  text-shadow: 0 0 8px var(--tc, #FF1A1A) !important;
}
.hit-popup-penalty .hit-popup-xp {
  color: var(--tc, #FF1A1A) !important;
}

/* Item 4 — Tier visual effects */
.edge-wave {
  position: fixed;
  pointer-events: none;
  z-index: 300;
  animation: edgeWaveAnim 0.55s ease-out forwards;
}
.edge-wave-top    { top:0;    left:0; right:0;  height:5px; background: linear-gradient(to right,  transparent, #00D4FF 40%, transparent); }
.edge-wave-bottom { bottom:0; left:0; right:0;  height:5px; background: linear-gradient(to right,  transparent, #00D4FF 40%, transparent); }
.edge-wave-left   { left:0;  top:0;  bottom:0;  width:5px;  background: linear-gradient(to bottom, transparent, #00D4FF 40%, transparent); }
.edge-wave-right  { right:0; top:0;  bottom:0;  width:5px;  background: linear-gradient(to bottom, transparent, #00D4FF 40%, transparent); }
@keyframes edgeWaveAnim {
  0%   { opacity:0.9; }
  100% { opacity:0; }
}

.border-flash-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 301;
  border: 5px solid #FFD300;
  animation: borderFlashAnim 0.55s ease-out forwards;
}
.border-flash-overlay.bf-master { border-color: #FF1A1A; }
@keyframes borderFlashAnim {
  0%   { opacity:1; box-shadow: inset 0 0 40px rgba(255,211,0,0.2); }
  100% { opacity:0; }
}

.sifu-center-text {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  z-index: 302;
  font-size: clamp(1.4rem, 8vw, 2.5rem);
  font-weight: 900;
  letter-spacing: 6px;
  color: #FFD300;
  text-shadow: 0 0 20px #FFD300, 0 0 60px rgba(255,211,0,0.5);
  animation: sifuTextAnim 1.4s ease-out forwards;
  white-space: nowrap;
}
@keyframes sifuTextAnim {
  0%   { opacity:0; transform: translate(-50%,-50%) scale(0.5); }
  18%  { opacity:1; transform: translate(-50%,-50%) scale(1.08); }
  55%  { opacity:1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform: translate(-50%,-62%) scale(0.85); }
}

.combo-edge-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 290;
  opacity: 0;
  transition: opacity 0.25s ease, box-shadow 0.25s ease;
}
.combo-edge-glow.cg-5  { opacity: 1; box-shadow: inset 0 0 30px 4px rgba(255,211,0,0.35); }
.combo-edge-glow.cg-10 { opacity: 1; box-shadow: inset 0 0 50px 8px rgba(255,140,0,0.5); }
.combo-edge-glow.cg-20 {
  opacity: 1;
  box-shadow: inset 0 0 70px 12px rgba(255,51,51,0.65);
  animation: comboGlowPulse 0.9s ease-in-out infinite;
}
@keyframes comboGlowPulse {
  0%, 100% { box-shadow: inset 0 0 70px 12px rgba(255,51,51,0.65); }
  50%      { box-shadow: inset 0 0 100px 18px rgba(255,51,51,0.9); }
}

.impact-text {
  position: fixed;
  pointer-events: none;
  z-index: 305;
  font-size: clamp(1.8rem, 10vw, 3.2rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 1px;
  white-space: nowrap;
  animation: impactTextAnim 0.5s ease-out forwards;
}
@keyframes impactTextAnim {
  0%   { transform: translate(-50%,-50%) rotate(var(--rot)) scale(0);   opacity: 0; }
  30%  { transform: translate(-50%,-50%) rotate(var(--rot)) scale(1.2); opacity: 1; }
  60%  { transform: translate(-50%,-50%) rotate(var(--rot)) scale(1);   opacity: 1; }
  100% { transform: translate(-50%,-50%) rotate(var(--rot)) scale(0);   opacity: 0; }
}

/* Item 5 — Result stats row */
.result-stats-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 18px;
}
.result-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 72px;
}
.result-stat-val {
  font-size: 1.35rem;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 1px;
}
.result-stat-lbl {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  text-align: center;
}

/* ═══════════════════════════════════
   HOME METRICS — SIEMPRE VISIBLES
════════════════════════════════════ */
.home-metrics-bar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (orientation: landscape) {
  .home-calib-hint { display: none !important; }
}

/* ═══════════════════════════════════
   HOME METRICS — REDISEÑO CARDS
════════════════════════════════════ */
.home-metrics {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 12px 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.home-metric-card {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  background: #0D0D0D !important;
  border: 1px solid #222 !important;
  border-radius: 12px !important;
  padding: 10px 6px !important;
  text-align: center !important;
}

.home-metric-lbl {
  color: #888888;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
}

.home-metric-card .home-metric-val {
  font-size: 18px !important;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.5px;
}

/* ═══════════════════════════════════
   QUIZ FUNNEL — 10 PREGUNTAS
════════════════════════════════════ */
#screen-quiz,
#screen-quiz-result {
  background: #050505;
}

.quiz-inner {
  justify-content: flex-start;
  gap: 16px;
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
}

/* ── Barra de progreso ── */
.quiz-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz-progress-track {
  width: 100%;
  height: 6px;
  background: #1A1A1A;
  border-radius: 3px;
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  background: #FFD300;
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(255, 211, 0, 0.55);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-progress-row {
  display: flex;
  align-items: center;
}

.quiz-step {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #FFD300;
  font-variant-numeric: tabular-nums;
}

/* ── Cuerpo + animación slide entre preguntas ── */
.quiz-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quiz-slide-in      { animation: quizSlideIn 0.28s cubic-bezier(0.2, 0, 0.2, 1) both; }
.quiz-slide-in-back { animation: quizSlideInBack 0.28s cubic-bezier(0.2, 0, 0.2, 1) both; }

@keyframes quizSlideIn {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes quizSlideInBack {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Pregunta ── */
.quiz-question {
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: -0.2px;
  color: #FFFFFF;
}

/* ── Opciones ── */
.quiz-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 14px;
  background: #0D0D0D;
  border: 2px solid #333333;
  border-radius: 14px;
  color: #FFFFFF;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.quiz-opt.selected {
  border-color: #FFD300;
  background: #141200;
}

.quiz-opt:active { transform: scale(0.985); }

.quiz-opt-emoji {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  width: 30px;
  text-align: center;
}

.quiz-opt-label {
  flex: 1;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.25;
}

/* ── SMIQ: respuesta libre ── */
.quiz-textarea {
  width: 100%;
  padding: 14px;
  background: #0D0D0D;
  border: 2px solid #333333;
  border-radius: 14px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.45;
  resize: vertical;
  outline: none;
}

.quiz-textarea:focus { border-color: #FFD300; }
.quiz-textarea::placeholder { color: #555555; }

.quiz-charcount {
  font-size: 0.78rem;
  font-weight: 600;
  color: #777777;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.quiz-charcount.ok { color: #00FF66; }

/* ── Captura de lead ── */
.quiz-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #888888;
  text-transform: uppercase;
  margin-top: 6px;
}

.quiz-input {
  width: 100%;
  padding: 14px;
  background: #0D0D0D;
  border: 2px solid #333333;
  border-radius: 12px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 1rem;
  outline: none;
}

.quiz-input:focus { border-color: #FFD300; }
.quiz-input::placeholder { color: #555555; }

.quiz-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  font-size: 0.85rem;
  line-height: 1.35;
  color: #AAAAAA;
  cursor: pointer;
}

.quiz-check input {
  width: 20px;
  height: 20px;
  accent-color: #FFD300;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── "Otro país": campo libre bajo la lista ── */
.quiz-other-wrap {
  margin-top: -2px;
  animation: quizOtherIn 0.2s ease both;
}

@keyframes quizOtherIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Botón SIGUIENTE ── */
.quiz-next {
  width: 100%;
  margin-top: auto;
  margin-bottom: 4px;
  padding: 17px;
  background: #FFD300;
  border: none;
  border-radius: 14px;
  color: #000000;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.quiz-next:active:not(:disabled) { transform: scale(0.98); }

.quiz-next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.quiz-back {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: #777777;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 8px 2px;
  margin-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  cursor: pointer;
}

.quiz-back:active { color: #FFD300; }

/* ═══════════════════════════════════
   QUIZ — PERFIL DE LUCHADOR
════════════════════════════════════ */
.quiz-result-inner {
  justify-content: center;
  align-items: center;
}

.quiz-res-card {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 20px;
  background: #0D0D0D;
  border: 2px solid var(--bc, #FFD300);
  border-radius: 22px;
  box-shadow: 0 0 40px color-mix(in srgb, var(--bc, #FFD300) 22%, transparent);
  text-align: center;
  animation: quizResIn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.quiz-res-kicker {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #777777;
  text-transform: uppercase;
}

.quiz-res-emoji {
  font-size: 3.6rem;
  line-height: 1;
  filter: drop-shadow(0 0 18px var(--bc, #FFD300));
}

.quiz-res-name {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--bc, #FFD300);
  line-height: 1.1;
}

.quiz-res-desc {
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}

.quiz-res-tips {
  width: 100%;
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #333333;
  border-radius: 12px;
  text-align: left;
}

.quiz-res-tips-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: var(--bc, #FFD300);
  margin-bottom: 8px;
}

.quiz-res-tips ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.quiz-res-tips li {
  font-size: 0.86rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

.quiz-res-cta { margin-top: 4px; }

@keyframes quizResIn {
  from { opacity: 0; transform: scale(0.9) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Landscape: contenido más compacto y con scroll */
@media (orientation: landscape) and (max-height: 520px) {
  .quiz-inner        { gap: 10px; }
  .quiz-body         { overflow-y: auto; }
  .quiz-question     { font-size: 1.05rem; }
  .quiz-opt          { padding: 10px 12px; }
  .quiz-opt-emoji    { font-size: 1.1rem; width: 24px; }
  .quiz-opt-label    { font-size: 0.86rem; }
  .quiz-next         { padding: 12px; }
  .quiz-res-emoji    { font-size: 2.4rem; }
  .quiz-res-name     { font-size: 1.35rem; }
  .quiz-result-inner { overflow-y: auto; }
}