:root {
  color-scheme: dark;
  --ink: #f8fafc;
  --muted: rgba(248, 250, 252, .63);
  --panel: rgba(8, 11, 18, .84);
  --line: rgba(255,255,255,.12);
  --accent: #f7c948;
  --money: #9fe870;
  --red: #ff4d5e;
  --host-safe-top: 0px;
  --host-safe-bottom: 0px;
  --host-safe-right: 0px;
  --ui-safe-top: max(16px, env(safe-area-inset-top), var(--host-safe-top));
  --ui-safe-bottom: max(14px, env(safe-area-inset-bottom), var(--host-safe-bottom));
  --ui-safe-right: max(14px, env(safe-area-inset-right), var(--host-safe-right));
  --hud-drop: 18px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-height: 100dvh; margin: 0; overflow: hidden; background: #06080d; }
body {
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; }

[hidden]{display:none!important}
#app { position: fixed; inset: 0; width: 100%; height: 100dvh; min-height: 100dvh; overflow: hidden; background: #06080d; isolation: isolate; }
#game { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; display: block; }

.hud {
  position: absolute;
  z-index: 8;
  top: calc(var(--ui-safe-top) + 10px + var(--hud-drop));
  left: 12px;
  right: 12px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 9px;
  align-items: stretch;
  pointer-events: none;
}
.hud-card {
  min-width: 126px;
  padding: 8px 11px 7px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(4, 7, 12, .64);
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
.hud-card--right { text-align: right; }
.hud-card--lives { min-width: 108px; text-align: center; }
.hud-card--lives strong { color: #ff7a8a; font-size: clamp(15px, 3.4vw, 19px); letter-spacing: .035em; white-space: nowrap; }
.hud-card strong { display: block; font-size: clamp(17px, 4.7vw, 23px); line-height: 1; letter-spacing: -.035em; }
.hud-card--budget strong { color: var(--money); }
.hud-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 8px; font-weight: 950; letter-spacing: .14em; }
.hud-record { display: block; margin-top: 5px; color: rgba(255,255,255,.42); font-size: 8px; font-weight: 850; letter-spacing: .06em; }
.hud-record b { color: rgba(255,255,255,.68); font-weight: 950; }
.hud-accum { display: block; margin-top: 4px; color: rgba(255,255,255,.58); font-size: 7.5px; font-weight: 900; letter-spacing: .055em; }
.hud-accum[hidden] { display: none; }
.hud-accum b { color: rgba(255,255,255,.88); font-weight: 1000; }


.scene-strip {
  transition: background-color .8s ease, color .8s ease, border-color .8s ease;
  position: absolute;
  z-index: 7;
  left: 12px;
  right: 12px;
  top: calc(var(--ui-safe-top) + 92px + var(--hud-drop));
  min-height: 24px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 0;
  padding: 5px 12px 6px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .11em;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  pointer-events: none;
}
.scene-strip span:first-child { line-height: 1.1; }
.scene-strip span:last-child:empty { display: none; }
.scene-strip span:last-child {
  opacity: .9;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}

.level-timer {
  position: absolute;
  z-index: 7;
  left: 12px;
  right: 12px;
  top: calc(var(--ui-safe-top) + 127px + var(--hud-drop));
  display: none;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.level-timer.is-visible { display: flex; }
.level-timer__track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.24);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.12);
}
.level-timer__fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8ef08c 0%, #f2d55c 55%, #ff7373 100%);
  transform-origin: left center;
  transform: scaleX(0);
}
.level-timer__text {
  min-width: 38px;
  text-align: right;
  color: rgba(255,255,255,.92);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.brand-corner {
  position: absolute;
  z-index: 4;
  right: var(--ui-safe-right);
  bottom: var(--ui-safe-bottom);
  width: 28px;
  height: 28px;
  opacity: .9;
  display: grid;
  place-items: center;
  padding: 0;
  pointer-events: none;
}
.brand-logo { width: 100%; height: 100%; display: block; object-fit: contain; filter: brightness(0) saturate(0%) opacity(.88); }
.brand-corner.is-light .brand-logo { filter: brightness(0) invert(1) opacity(.95); }

.icon-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: white;
  background: rgba(4, 7, 12, .50);
  cursor: pointer;
}
.icon-btn.is-off { opacity: .42; filter: grayscale(1); }

.overlay {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 5, 9, .56);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}
.overlay--visible { opacity: 1; visibility: visible; }
.panel {
  width: min(92vw, 480px);
  padding: 28px 23px 23px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 27px;
  background: var(--panel);
  box-shadow: 0 28px 80px rgba(0,0,0,.32);
}
.panel--compact { padding-top: 24px; }
.mascot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: white;
}
.mascot-emoji, .mascot-money {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  font-size: 25px;
  line-height: 1;
}
.mascot-money { font-size: 24px; }
.eyebrow { margin: 0 0 7px; color: var(--accent); font-size: 10px; font-weight: 950; letter-spacing: .17em; }
.eyebrow--gameover { font-size: 16px; margin-bottom: 10px; white-space: pre-line; line-height: 1.15; }
.gameover-title { font-size: clamp(24px, 6vw, 34px); line-height: .98; }
h1, h2 { margin: 0; line-height: .94; letter-spacing: -.055em; }
h1 { font-size: clamp(42px, 12vw, 66px); }
h2 { font-size: clamp(31px, 8.2vw, 46px); }
.lead { max-width: 355px; margin: 16px auto 21px; color: rgba(255,255,255,.76); line-height: 1.4; font-size: 14px; }
.primary-btn {
  width: 100%;
  min-height: 55px;
  border: 0;
  border-radius: 18px;
  background: var(--accent);
  color: #111318;
  font-weight: 1000;
  letter-spacing: .07em;
  box-shadow: 0 8px 0 #aa791c, 0 16px 30px rgba(0,0,0,.22);
  cursor: pointer;
}
.primary-btn:active { transform: translateY(4px); box-shadow: 0 4px 0 #aa791c, 0 11px 24px rgba(0,0,0,.2); }

.mode-buttons {
  display: grid;
  gap: 10px;
}
.mode-buttons--compact { margin-top: 6px; }
.mode-buttons--welcome {
  gap: 10px;
}
.mode-buttons--welcome .mode-btn-welcome {
  min-height: 55px;
  padding: 8px 10px;
  font-size: clamp(13.5px, 3.7vw, 15.5px);
  white-space: nowrap;
  border-color: rgba(247,201,72,.78);
  background: linear-gradient(180deg, #f9d35e, #eeb83d);
  color: #15171b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46), 0 7px 0 #a9781c, 0 14px 24px rgba(0,0,0,.19);
}
.mode-buttons--welcome .mode-btn-welcome:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 #a9781c, 0 10px 18px rgba(0,0,0,.18);
}
.mode-btn-alt {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(138, 195, 255, .28);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(72,105,153,.35), rgba(33,46,69,.32));
  color: rgba(255,255,255,.96);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .08em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.16);
}

.menu-sound-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 13px auto 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  color: white;
  font-size: 18px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.menu-sound-btn.is-off { opacity: .48; filter: grayscale(1); }
.menu-sound-btn:active { transform: translateY(2px); }

.mode-note {
  margin: 13px 6px 0;
  color: rgba(255,255,255,.64);
  font-size: 11px;
  line-height: 1.35;
}
.mode-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  min-width: 18px;
  font-size: 14px;
  line-height: 1;
}
.mode-buttons--welcome .mode-icon { font-size: 15px; }
.mode-btn-alt:active { transform: translateY(2px); }

.hint { margin: 17px 3px 0; color: rgba(255,255,255,.51); font-size: 11px; line-height: 1.4; }
.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 7px; }
.result { padding: 12px 6px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.035); }
.result strong { display: block; font-size: clamp(29px, 8vw, 43px); line-height: 1; letter-spacing: -.055em; }
.result--budget strong { color: var(--money); font-size: clamp(25px, 7vw, 39px); }
.result span { color: var(--muted); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .12em; }
.record-message { min-height: 31px; margin: 9px 2px 17px; color: var(--accent); font-weight: 900; font-size: 12px; line-height: 1.3; }

.tap-hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(max(22px, env(safe-area-inset-bottom) + 14px));
  transform: translateX(-50%);
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(4,7,12,.44);
  color: rgba(255,255,255,.72);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .13em;
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
  white-space: nowrap;
}
.tap-hint.is-visible { opacity: 1; }

@media (max-width: 420px) {
  .hud { grid-template-columns: 1fr auto 1fr; gap: 6px; }
  .scene-strip { top: calc(var(--ui-safe-top) + 88px + var(--hud-drop)); left: 10px; right: 10px; font-size: 8px; padding-left: 10px; padding-right: 10px; }
  .level-timer { left: 10px; right: 10px; top: calc(var(--ui-safe-top) + 120px + var(--hud-drop)); gap: 8px; }
  .level-timer__text { min-width: 34px; font-size: 9px; }
  .brand-corner { right: var(--ui-safe-right); bottom: var(--ui-safe-bottom); width: 26px; height: 26px; }
  .hud-card { min-width: 0; padding-left: 9px; padding-right: 9px; }
  .hud-card strong { font-size: 17px; }
  .hud-card--lives { min-width: 96px; }
  .results-grid { gap: 7px; }
}
@media (min-width: 760px) {
  .hud { left: 50%; right: auto; width: min(720px, calc(100% - 48px)); transform: translateX(-50%); grid-template-columns: 1fr 1fr 1fr; top: calc(var(--ui-safe-top) + 8px + var(--hud-drop)); }
  .scene-strip { left: 24px; right: 24px; top: calc(var(--ui-safe-top) + 96px + var(--hud-drop)); }
  .level-timer { left: 24px; right: 24px; top: calc(var(--ui-safe-top) + 132px + var(--hud-drop)); }
  .brand-corner { right: max(24px, var(--ui-safe-right)); bottom: max(20px, var(--ui-safe-bottom)); width: 30px; height: 30px; }
}

.secondary-btn {
  width: min(100%, 176px);
  min-height: 38px;
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .07em;
  cursor: pointer;
}
.panel--compact .primary-btn { margin-top: 4px; }
.secondary-btn:active { transform: translateY(2px); }

.panel--compact #resetRecordsBtn { margin-top: 24px; }

.menu-sound-btn--bottom {
  display: block;
  margin: 16px auto 0;
}
.panel--compact .menu-sound-btn--bottom {
  margin-top: 18px;
}

/* v12.52 · Eventos de rodaje + Rodaje Diario */
.special-event-status {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: calc(var(--ui-safe-top) + 151px + var(--hud-drop));
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 7px;
  max-width: calc(100vw - 34px);
  min-height: 27px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(5,8,14,.80);
  box-shadow: 0 7px 20px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.06);
  color: rgba(255,255,255,.96);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.special-event-status.is-visible { display: flex; }
#specialEventStatusText { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.special-event-status.is-film { top: calc(var(--ui-safe-top) + 124px + var(--hud-drop)); }
.special-event-status__dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  background: var(--event-accent, #f7c948);
  box-shadow: 0 0 10px var(--event-accent, #f7c948);
}
@media (max-width: 420px) {
  .special-event-status { top: calc(var(--ui-safe-top) + 144px + var(--hud-drop)); font-size: 10px; min-height: 28px; padding: 6px 9px; }
  .special-event-status.is-film { top: calc(var(--ui-safe-top) + 116px + var(--hud-drop)); }
}
@media (min-width: 760px) {
  .special-event-status { top: calc(var(--ui-safe-top) + 158px + var(--hud-drop)); }
  .special-event-status.is-film { top: calc(var(--ui-safe-top) + 132px + var(--hud-drop)); }
}

/* v13.32 · HUD más abajo, con la misma separación entre tarjetas, tira y estado */
/* v12.49 · menú limpio + Rodaje Diario */
#startScreen { background: #06080d; padding: calc(var(--ui-safe-top) + 10px) 16px calc(var(--ui-safe-bottom) + 8px); }
.overlay--solid { background: rgba(0,0,0,.96); }
#game { transition: filter .12s ease; }
#game.is-minibonus { filter: contrast(1.28) saturate(1.42) brightness(.90); }
.daily-actions {
  display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:11px;
}
.daily-btn {
  min-height:40px; border:1px solid rgba(255,255,255,.16); border-radius:14px;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.92); font-size:10px;
  font-weight:1000; letter-spacing:.07em; cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:7px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.daily-btn--ranking { border-color:rgba(247,201,72,.34); }
.daily-btn:active { transform:translateY(2px); }
.daily-btn:disabled { opacity:.38; cursor:default; }
.panel--daily-name { width:min(90vw,420px); }
.panel--daily-name h2 { font-size:clamp(27px,7vw,39px); }
.daily-name-form { margin-top:22px; }
.daily-name-form label { display:block; margin:0 0 7px; color:rgba(255,255,255,.54); font-size:9px; font-weight:1000; letter-spacing:.16em; }
.daily-name-form input {
  width:100%; height:52px; padding:0 15px; border-radius:16px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07); color:#fff; outline:none; text-align:center; font:900 18px/1 system-ui;
}
.daily-name-form input:focus { border-color:#f7c948; box-shadow:0 0 0 3px rgba(247,201,72,.10); }
.daily-error { min-height:26px; margin:8px 0 7px; color:#ff8994; font-size:11px; font-weight:850; line-height:1.25; }
.daily-name-form .secondary-btn { margin-top:14px; }
.panel--ranking { width:min(94vw,540px); max-height:min(90dvh,760px); display:flex; flex-direction:column; padding-bottom:20px; }
.panel--ranking h2 { font-size:clamp(29px,7vw,43px); }
.ranking-event { margin:10px 0 15px; color:#f7c948; font-size:11px; font-weight:1000; letter-spacing:.10em; text-transform:uppercase; }
.ranking-death { margin:12px 0 18px; padding:12px 14px; border:1px solid rgba(255,91,100,.5); border-radius:12px; background:rgba(255,91,100,.10); color:#ffe2d8; font-size:12px; font-weight:800; line-height:1.5; }
.ranking-death[hidden] { display:none; }
.ranking-podium { display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:7px; align-items:end; margin:3px 0 13px; }
.podium-card { min-width:0; padding:11px 6px 9px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.045); }
.podium-card--1 { padding-top:17px; border-color:rgba(247,201,72,.62); background:rgba(247,201,72,.10); }
.podium-rank { display:block; font-size:20px; line-height:1; }
.podium-name { display:block; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:1000; }
.podium-score { display:block; margin-top:4px; color:rgba(255,255,255,.70); font-size:9px; font-weight:900; }
.ranking-list { min-height:0; max-height:245px; overflow:auto; overscroll-behavior:contain; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.ranking-row { display:grid; grid-template-columns:38px 1fr auto; gap:8px; align-items:center; min-height:39px; padding:6px 4px; border-bottom:1px solid rgba(255,255,255,.055); text-align:left; }
.ranking-row:last-child { border-bottom:0; }
.ranking-row.is-me { background:rgba(99,243,216,.08); }
.ranking-pos { color:rgba(255,255,255,.44); font-size:10px; font-weight:1000; text-align:center; }
.ranking-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:950; }
.ranking-values { text-align:right; }
.ranking-values strong { display:block; font-size:11px; }
.ranking-values span { color:rgba(255,255,255,.48); font-size:8px; font-weight:850; }
.ranking-empty { margin:22px 8px; color:rgba(255,255,255,.54); font-size:11px; line-height:1.35; }
.ranking-actions { margin-top:14px; }
.ranking-actions .secondary-btn { margin-top:14px; }
.daily-attempt-badge { color:#f7c948; }
@media (max-width:420px) {
  .daily-actions { gap:7px; }
  .daily-btn { font-size:9.2px; letter-spacing:.055em; padding:0 7px; }
  .panel--ranking { max-height:92dvh; padding-left:16px; padding-right:16px; }
  .ranking-podium { gap:5px; }
}


/* v12.51 · estado del servicio de Rodaje Diario */
.daily-unavailable{
  margin:10px auto 0;
  max-width:560px;
  padding:8px 12px;
  border:1px solid rgba(255,112,112,.34);
  border-radius:12px;
  background:rgba(110,18,28,.2);
  color:#ff9c9c;
  font-size:clamp(10px,2.5vw,12px);
  font-weight:900;
  letter-spacing:.08em;
  line-height:1.35;
  text-align:center;
}
.daily-unavailable[hidden]{display:none!important;}


/* v12.51 · aire extra entre la tira y el estado diario en móvil */
.special-event-status.is-daily { top: calc(var(--ui-safe-top) + 151px + var(--hud-drop)); }
@media (max-width:420px) {
  .special-event-status.is-daily { top: calc(var(--ui-safe-top) + 164px + var(--hud-drop)); max-width: calc(100vw - 24px); }
  .scene-strip { min-height: 28px; }
}


/* v12.52 · menú y Game Over */
.mode-note--stacked { display:grid; gap:4px; text-align:left; width:min(100%,390px); margin-left:auto; margin-right:auto; }
.mode-note--stacked span { display:block; }
.mode-note--stacked b { color:rgba(255,255,255,.92); font-size:.94em; }
.start-brand-corner { position:absolute; z-index:12; right:var(--ui-safe-right); bottom:max(7px, calc(var(--ui-safe-bottom) - 7px)); width:30px; height:30px; opacity:.92; pointer-events:none; }
.start-brand-corner img { width:100%; height:100%; object-fit:contain; filter:brightness(0) invert(1) opacity(.9); }
.mode-btn-daily-over { border-color:rgba(247,201,72,.34); }
@media(max-width:420px){ .start-brand-corner{width:27px;height:27px;} }

/* Opciones y cuenta */
.options-menu-btn{display:block;width:100%;margin:16px auto 0;max-width:320px}
#startScreen .duo-menu-btn{display:block;width:min(100%,320px);min-height:42px;margin:13px auto 0;border:1px solid rgba(123,229,238,.54);border-radius:13px;background:rgba(71,133,143,.14);color:#c8f8fa;font:900 11px/1 system-ui;letter-spacing:.12em;cursor:pointer}
.panel--duo{width:min(92vw,440px);max-height:calc(100dvh - var(--ui-safe-top) - var(--ui-safe-bottom) - 24px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:26px 22px 22px;color:#f8f5e9}
.panel--duo h2{margin:4px 0 12px;font-size:clamp(28px,7vw,40px)}
.panel--duo label{display:block;margin:19px 0 7px;color:#ffe28a;font-size:10px;font-weight:950;letter-spacing:.1em}
.panel--duo input{width:100%;height:54px;border:1px solid #ffffff40;border-radius:13px;background:#0b111a;color:#fff;text-align:center;font:900 23px/1 ui-monospace,monospace;letter-spacing:.3em}
.panel--duo .primary-btn,.panel--duo .secondary-btn{width:100%;margin-top:12px}
.duo-copy,.duo-status{color:#cad6de;font-size:.88rem;line-height:1.45}
.duo-pin{display:block;margin:6px auto 10px;color:#ffe28a;font:1000 clamp(48px,15vw,72px)/1 ui-monospace,monospace;letter-spacing:.2em;text-indent:.2em;text-shadow:0 0 24px #f7c94850}
.duo-status{min-height:24px;color:#a9e7eb}
.duo-error{min-height:20px;color:#ff9292;font-size:.82rem}
.duo-countdown{margin:8px 0;color:#fff;font:1000 26px/1.1 system-ui}
.duo-race-status{position:absolute;z-index:9;top:calc(var(--ui-safe-top) + 178px + var(--hud-drop));left:50%;transform:translateX(-50%);max-width:calc(100vw - 28px);padding:6px 11px;border:1px solid #7be5ee55;border-radius:999px;background:#08131bd9;color:#c8f8fa;font-size:10px;font-weight:900;letter-spacing:.05em;text-align:center;white-space:nowrap;pointer-events:none}
.panel--compact{max-height:calc(100dvh - var(--ui-safe-top) - var(--ui-safe-bottom) - 22px);overflow-y:auto}
.duo-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.duo-results>div{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:12px 5px;border:1px solid #7be5ee77;border-radius:12px;background:#0e2027}
.duo-results span{font-size:11px;font-weight:900;letter-spacing:.12em;color:#a9e7eb}
.duo-results strong{font-size:clamp(19px,5vw,27px);color:#ffe28a}
.duo-results small{font-size:13px;color:#e7f5f5}
.result-actions{display:grid;gap:22px;margin-top:16px}
.result-actions button{width:100%;margin:0}
.duo-wide .scene-strip{left:50%;right:auto;width:min(var(--duo-stage-width),calc(100% - 24px));transform:translateX(-50%)}
.duo-wide .hud{width:min(540px,calc(100% - 24px))}

/* En pantallas bajas se conserva el menú entero sin obligar a buscar botones. */
#startScreen .panel{padding:clamp(13px,2.6dvh,28px) clamp(14px,4vw,23px)}
#startScreen h1{font-size:clamp(31px,min(11vw,5.5dvh),62px)}
#startScreen .mascot{margin-bottom:clamp(2px,1dvh,10px)}
#startScreen .lead{margin:clamp(5px,1.4dvh,16px) auto clamp(8px,1.8dvh,21px);font-size:clamp(11px,1.65dvh,14px)}
#startScreen .mode-buttons--welcome{gap:clamp(6px,1dvh,10px)}
#startScreen .mode-buttons--welcome .mode-btn-welcome{min-height:clamp(43px,6.4dvh,55px)}
#startScreen .career-menu-btn{min-height:clamp(49px,7dvh,61px);margin:clamp(6px,1.3dvh,12px) 0 3px;padding:clamp(6px,1dvh,10px) 12px}
#startScreen .daily-actions{margin-top:clamp(6px,1.3dvh,11px)}
#startScreen .daily-btn{min-height:clamp(35px,4.7dvh,40px)}
#startScreen .duo-menu-btn{min-height:clamp(36px,5dvh,42px);margin-top:clamp(6px,1.4dvh,13px)}
#startScreen .options-menu-btn{margin-top:clamp(8px,1.8dvh,16px);min-height:clamp(34px,4.5dvh,38px)}
#startScreen .mode-note{margin-top:clamp(6px,1.3dvh,13px);font-size:clamp(9px,1.25dvh,11px)}
#startScreen .hint{margin-top:clamp(5px,1.3dvh,17px);font-size:clamp(9px,1.2dvh,11px)}
@media(max-height:720px){
  #startScreen .mascot{display:none}
  #startScreen .lead{line-height:1.25}
  #startScreen .mode-note{gap:1px}
  #startScreen .hint{display:none}
}
@media(max-width:420px){.duo-race-status{top:calc(var(--ui-safe-top) + 172px + var(--hud-drop));font-size:9px}}
#optionsScreen{align-items:start;padding:calc(var(--ui-safe-top) + 14px) 12px calc(var(--ui-safe-bottom) + 14px)}
.panel--options{width:min(100%,500px);max-height:100%;overflow-y:auto;margin-inline:auto;padding:23px 19px;color:#f7f2df;text-align:left}
.panel--options .eyebrow,.panel--options h2{text-align:center}
.panel--options h2{font-size:1.9rem;margin-bottom:15px}
.options-status{color:#ffe28a;font-weight:800;text-align:center;line-height:1.4}
.options-account{padding:12px;border:1px solid #ffffff40;border-radius:12px;background:#1d2834;margin:12px 0}
.options-account p{font-size:.86rem;line-height:1.4;margin:0 0 12px}
.options-account label{display:block;margin:10px 0 4px;font-size:.72rem;font-weight:900;color:#ffe28a}
.options-account input{width:100%;box-sizing:border-box;border:1px solid #8193a0;border-radius:8px;background:#0a111b;color:white;font:inherit;font-size:1rem;padding:11px}
.options-account .primary-btn,.options-account .secondary-btn{margin-top:12px;width:100%}
.options-account .options-tip{font-size:.72rem;color:#abbcc8;margin:12px 0 0}
.panel--options>button.secondary-btn{width:100%;margin-top:10px}
.options-danger{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.options-danger button{min-width:0;padding:10px 5px;font-size:.76rem;color:#ffd0c6}
.options-confirm{padding:12px;margin-top:10px;border:1px solid #e6988c;border-radius:10px;background:#381e24}
.options-confirm p{margin:0 0 8px;font-size:.86rem;line-height:1.4}
.options-confirm button{width:49%;font-size:.8rem;padding:9px 2px}
.options-confirm #optionsConfirmYes{background:#a33d39;color:white}
.daily-account-offer{font-size:.8rem;line-height:1.4;color:#dbe8ec}
.daily-account-offer button{border:1px solid #ffe28a;border-radius:7px;background:#273342;color:#ffe28a;font:inherit;font-weight:800;padding:7px;margin:6px 0}
.daily-account-offer span{display:block;color:#aab9c4}

/* v13.35 · menú y autogestión de cuenta */
#startScreen .panel{max-height:100%;min-height:0}
.mode-buttons--welcome .mode-btn-welcome span:last-child{white-space:nowrap}
.options-account--active{text-align:center}
.options-account--active>p{text-align:center;margin:1px 0 9px}
.account-display-name{display:block;color:#ffe28a;font-size:clamp(1.2rem,5vw,1.65rem);line-height:1.15;overflow-wrap:anywhere;margin-bottom:13px}
.options-account--active>.secondary-btn{width:100%;margin-top:9px}
.account-subform{text-align:left;margin-top:12px;padding:12px;border:1px solid #8395a3;border-radius:10px;background:#101b27}
.account-subform label{margin-top:12px}
.account-subform .primary-btn,.account-subform .secondary-btn{width:100%;margin-top:11px}
.account-subform--danger{border-color:#d28b84;background:#281c23}
.account-subform--danger p{color:#f0c7c0;line-height:1.45}
.account-delete-btn,.account-subform--danger #accountDeleteYes{color:#ffbdb3!important;border-color:#c78880!important}

/* v13.45 · Pantallas completas: el contenido tiene ancho legible, sin tarjeta exterior. */
.overlay {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  padding:calc(var(--ui-safe-top) + 18px) clamp(16px,4vw,36px) calc(var(--ui-safe-bottom) + 24px);
  background:radial-gradient(ellipse 75% 42% at 50% 2%,#182433 0%,#0b111b 55%,#06080d 100%);
  transition:none;
}
.overlay .panel {
  flex:none;
  width:min(100%,520px);
  max-height:none;
  margin:auto;
  padding:clamp(8px,2vw,24px) 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
#startScreen,#careerScreen,#optionsScreen { background:radial-gradient(ellipse 75% 42% at 50% 2%,#182433 0%,#0b111b 55%,#06080d 100%); }
#startScreen { overflow:hidden; touch-action:none; justify-content:center; }
#startScreen .panel { width:min(100%,460px); max-height:none; overflow:visible; padding:clamp(5px,1.5dvh,18px) 0; margin:0; transform:scale(var(--menu-scale,1)); transform-origin:center; }
#careerScreen,#optionsScreen,#rankingScreen { justify-content:flex-start; }
#careerScreen .panel,#optionsScreen .panel,#rankingScreen .panel { margin-block:0; }
#careerScreen .panel { width:min(100%,680px); padding:4px 0 22px; }
#optionsScreen .panel { width:min(100%,560px); padding:4px 0 22px; }
#rankingScreen .panel { width:min(100%,600px); padding:4px 0 22px; }
#rankingScreen .ranking-list { max-height:none; }
#duoScreen .panel,#dailyNameScreen .panel,#gameOverScreen .panel { width:min(100%,460px); }
#gameOverScreen .panel { padding-block:14px; }
#startScreen .start-brand-corner { position:fixed; }
/* El detalle del cartel sigue siendo un diálogo; su superficie lo distingue de la página. */
.career-poster-dialog .career-poster-dialog-panel { background:#101923; border:2px solid #f7c948; border-radius:16px; padding:25px 20px; }
@media (max-height:720px) {
  .overlay { padding-top:calc(var(--ui-safe-top) + 8px); padding-bottom:calc(var(--ui-safe-bottom) + 12px); }
  #startScreen .panel { padding:0; }
  #startScreen .mode-buttons--welcome .mode-btn-welcome { min-height:42px; }
  #startScreen .daily-btn { min-height:36px; }
}
@media (max-width:370px) {
  .overlay { padding-left:12px; padding-right:12px; }
  #startScreen h1 { font-size:clamp(27px,9vw,36px); }
  .career-tabs { gap:5px; }
  .career-tabs button { font-size:.71rem; }
  .options-danger { grid-template-columns:1fr; }
}
.camera-car-test-btn { margin: 8px auto; display: block; background: #233341; color: #f7c948; border: 1px solid #f7c948; }
.camera-car-controls { position: absolute; z-index: 25; right: 12px; bottom: 12px; display: flex; gap: 7px; }
.camera-car-controls[hidden] { display: none; }
.camera-car-controls button { color: #fff; background: #142936; border: 1px solid #f7c948; border-radius: 9px; padding: 9px 12px; font: 800 11px system-ui; }
.camera-car-result { position: absolute; z-index: 24; top: 115px; left: 50%; transform: translateX(-50%); width: min(90%, 390px); padding: 10px; border-radius: 10px; text-align: center; color: #fff; background: #162b38e8; border: 1px solid #f7c948; font: 800 12px system-ui; pointer-events: none; }
.camera-car-result[hidden] { display: none; }

/* Pruebas de rodaje de Rodrigo. */
.special-preview-panel[hidden]{display:none;}
.special-preview-panel{margin:18px 0;padding:14px;border:1px solid rgba(247,201,72,.45);border-radius:12px;background:rgba(247,201,72,.04);text-align:left;}
.special-preview-panel h3{margin:0 0 8px;color:var(--accent);font-size:.85rem;letter-spacing:.08em;}
.special-preview-panel p{margin:0 0 12px;color:var(--muted);font-size:.8rem;line-height:1.5;}
.special-preview-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.special-preview-buttons button{width:100%;min-width:0;padding:10px 6px;font-size:.72rem;white-space:normal;}
@media(max-width:340px){.special-preview-buttons{grid-template-columns:1fr;}}

#specialPreviewOptions[hidden]{display:none;}
.rodaje-prototype-panel { margin: 10px 0; padding: 9px; border: 1px dashed #f7c94866; border-radius: 12px; }
.rodaje-prototype-panel[hidden] { display: none; }
.rodaje-prototype-panel small { display: block; font-size: 10px; letter-spacing: 1.5px; color: #f7c948; margin-bottom: 6px; }
.rodaje-prototype-panel > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rodaje-prototype-panel .secondary-btn { margin: 0; font-size: 10px; padding: 9px 5px; }
.rodaje-prototype-panel .secondary-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Kept away from the top HUD and the centre action; full touch target. */
.run-exit{position:absolute;left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));width:44px;height:44px;border:1px solid #ffffff35;border-radius:50%;background:#11182788;color:#fff;font-size:22px;z-index:12;cursor:pointer;touch-action:manipulation;}
.run-exit[hidden]{display:none;}


.production-report { white-space: pre-line; margin: 12px 0; padding: 12px 14px; border: 1px solid rgba(133,232,212,.22); border-radius: 12px; background: rgba(133,232,212,.05); color: #c6dbd5; font-size: clamp(11px,2.8vw,13px); line-height: 1.65; text-align: left; }

.production-report::before { content: attr(data-label); display: block; margin-bottom: 4px; color: #85e8d4; font-size: 10px; font-weight: 900; letter-spacing: .09em; }
:root { --halloween-orange:#f7a14a; }
.halloween-menu-btn {position:relative;overflow:hidden;width:100%;margin:10px 0;padding:13px;border:1px solid #bb7845;border-radius:14px;background:radial-gradient(circle at 91% 17%,#ae343b88 0 2px,transparent 3px),radial-gradient(circle at 8% 77%,#ae343b66 0 2px,transparent 3px),linear-gradient(135deg,#4e253b,#38253e);color:#ffd69e;font:800 15px system-ui;cursor:pointer;box-shadow:inset 0 0 25px #9b472022,inset 0 2px #ad343755;}
.halloween-menu-btn::before,.halloween-menu-btn::after {content:"";position:absolute;top:0;width:32px;height:17px;pointer-events:none;background:linear-gradient(#bd4549,#8e2437);clip-path:polygon(0 0,100% 0,100% 20%,85% 20%,85% 68%,76% 88%,67% 68%,67% 24%,44% 24%,44% 85%,33% 100%,23% 85%,23% 24%,0 24%);opacity:.9;}
.halloween-menu-btn::before {left:18px;transform:skew(-12deg);}
.halloween-menu-btn::after {right:18px;transform:scaleX(-1) skew(-12deg);}
.halloween-menu-btn small {display:block;font-size:10px;letter-spacing:.12em;margin-top:4px;color:#cfab98;}
.halloween-panel {background:linear-gradient(155deg,#261a30,#15161f);border-color:#9b654f;}
.halloween-panel .eyebrow {color:#ffb160;}
.is-halloween .hud-card {position:relative;border-color:#a94b42;background:radial-gradient(ellipse at 95% 0,#942d3444,transparent 48%),linear-gradient(145deg,#322033ed,#141622ed);box-shadow:0 5px 20px #210c28,inset 0 2px #ad343755;}
.is-halloween .hud-card::after {content:"";position:absolute;right:12px;top:0;width:26px;height:13px;pointer-events:none;background:#a42e3a;clip-path:polygon(0 0,100% 0,100% 35%,85% 35%,85% 83%,76% 100%,67% 83%,67% 35%,46% 35%,46% 56%,34% 77%,23% 56%,23% 28%,0 28%);opacity:.85;}
.is-halloween .hud{gap:11px;}
.is-halloween .hud-card{padding-top:9px;padding-bottom:8px;}
.is-halloween .level-timer{top:calc(var(--ui-safe-top) + 146px + var(--hud-drop));left:16px;right:16px;gap:12px;}
.is-halloween .hud-label,.is-halloween #lives {color:#ffab50;}
.is-halloween .scene-strip {top:calc(var(--ui-safe-top) + 98px + var(--hud-drop));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));gap:3px;padding:7px 18px 8px;color:#ffd2a3;border:1px solid #98624f;border-bottom:2px solid #ce894e;background:radial-gradient(ellipse at 0 0,#e99a4318,transparent 35%),linear-gradient(115deg,#211526f5,#301c2df0);box-shadow:0 4px 14px #110c2180,inset 0 1px #ffd29722;border-radius:14px 14px 10px 10px;letter-spacing:.09em;}
.is-halloween .scene-strip::before,.is-halloween .scene-strip::after{content:"";position:absolute;top:0;width:35px;height:18px;background:#a42e3a;clip-path:polygon(0 0,100% 0,100% 15%,85% 15%,85% 66%,76% 87%,67% 66%,67% 20%,44% 20%,44% 86%,33% 100%,23% 86%,23% 20%,0 20%);pointer-events:none;opacity:.85;}
.is-halloween .scene-strip::before{left:7px;transform:skew(-18deg);}
.is-halloween .scene-strip::after{right:7px;transform:scaleX(-1) skew(-18deg);}
@media(max-width:480px){.is-halloween .scene-strip{left:14px;right:14px;padding:6px 15px 7px;gap:3px;letter-spacing:.06em;}}
@media(max-width:420px){.is-halloween .hud{gap:8px;}.is-halloween .scene-strip{top:calc(var(--ui-safe-top) + 94px + var(--hud-drop));}.is-halloween .level-timer{top:calc(var(--ui-safe-top) + 136px + var(--hud-drop));left:14px;right:14px;gap:10px;}}
@media(min-width:760px){.is-halloween .scene-strip{top:calc(var(--ui-safe-top) + 102px + var(--hud-drop));}}
.is-halloween .level-timer__track {border-color:#b25f45;background:repeating-linear-gradient(135deg,#1f1626 0 8px,#532337 8px 10px);box-shadow:0 2px 6px #250b15;}
.is-halloween .level-timer__fill {background:linear-gradient(90deg,#73243d,#d94c43 64%,#ffae53);box-shadow:inset 0 1px #ffcb8866;}
.is-halloween #gameOverScreen .panel {border-color:#ab754c;background:linear-gradient(145deg,#332035,#14141e);}
#careerTabEvents {border-color:#97694c;color:#f4bb7f;}
.panel--career .career-tabs {grid-template-columns:repeat(4,minmax(0,1fr));}
#careerTabEvents[aria-selected="true"] {background:#683c42;}
.halloween-poster {max-width:330px;margin:12px auto;padding:20px 16px 25px;text-align:center;border:4px double #b67955;background:radial-gradient(ellipse at 50% 28%,#7f4b52,#291b32 60%,#14151e);color:#ffe1a6;box-shadow:0 14px 30px #0006;}
.halloween-poster svg {display:block;width:100%;height:auto;border:1px solid #a86c55;}
.halloween-poster--cinema {padding:7px 7px 12px;max-width:340px;background:#1b1728;border:1px solid #9c7c62;}
.halloween-poster-prize {width:min(100%,290px);margin:16px auto 24px;text-align:center;}
.halloween-poster-prize .career-poster-stage {height:190px;max-height:58%;}
.halloween-poster-prize p {color:#cfb792;font-size:12px;}
.halloween-poster p {font-size:10px;letter-spacing:.15em;color:#d5a27c;}
.halloween-poster h3 {font:900 27px/1.08 Georgia,serif;text-shadow:2px 3px #733144;}
.halloween-poster strong,.halloween-poster small {display:block;margin-top:16px;font-size:10px;letter-spacing:.08em;}


/* Production highlights and immediate replay: readable on narrow screens. */
#productionReport,#dailyProductionReport{line-height:1.6;white-space:pre-line;text-wrap:pretty;border-left:3px solid #85e8d4;padding-left:12px;}
#restartBtn{min-height:48px;}

.mechanic-preview-group{margin-top:14px}.mechanic-preview-group h4{margin:0 0 8px;font-size:.8rem;color:#e9e6d8}.mechanic-preview-group+.mechanic-preview-group{padding-top:12px;border-top:1px solid rgba(247,201,72,.18)}

/* Private preview selector and Christmas event. */
.preview-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0 8px}.preview-categories[hidden],.special-preview-panel[hidden]{display:none!important}.preview-categories button{min-width:0;min-height:44px;border:1px solid #667782;border-radius:10px;background:#172534;color:#e8f6fa;font:800 12px system-ui;padding:10px;cursor:pointer}.preview-categories button[aria-pressed="true"]{background:#ffe088;color:#172534;border-color:#ffe088}.navidad-panel{border:2px solid #dabb6b!important;background:linear-gradient(150deg,#092f37,#123b34 65%,#482b37)!important;max-height:90dvh;overflow:auto}.navidad-cover{font-size:55px;text-align:center;letter-spacing:12px}.navidad-panel h2{color:#ffe29a;letter-spacing:.1em}.navidad-panel progress{width:100%;height:14px;accent-color:#ffd97e}.navidad-actions{display:grid;gap:10px}.is-navidad .hud{gap:12px;background:linear-gradient(110deg,#103e3bf2,#26494ff2);border-color:#ecc975}.is-navidad .scene-strip{background:#143e3bee!important;color:#fff1bb!important;border-color:#d4bc78!important}.is-navidad .hud> *{min-width:0}@media(max-width:420px){.is-navidad .hud{gap:6px;padding:8px;font-size:11px}.navidad-panel{padding:18px!important}.navidad-cover{font-size:40px}}

.is-navidad .hud-card{min-width:0;border-color:#c0af7155;background:linear-gradient(135deg,#163f43f2,#192b38ee)}.is-navidad .hud-label{color:#e4d7ac}.is-navidad .scene-strip{top:calc(var(--ui-safe-top) + 100px + var(--hud-drop));padding:7px 12px}.is-navidad .level-timer{top:calc(var(--ui-safe-top) + 145px + var(--hud-drop))}.is-navidad .level-timer__fill{background:linear-gradient(90deg,#58b8a0,#f7d77b)}.navidad-actions button{width:100%;margin-top:0}@media(max-height:500px){.navidad-cover{font-size:28px}.navidad-panel h2{margin:5px 0}.navidad-panel p{margin:6px 0}.navidad-actions{gap:5px}}

/* Seasonal results use the same transparent, scrollable page as the other modes. */
.is-navidad #gameOverScreen .panel{background:transparent;border:0;border-radius:0;box-shadow:none;width:min(100%,460px);padding:14px 0 20px;overflow:visible}
.is-navidad #gameOverScreen .eyebrow{font-size:clamp(10px,2.6vw,13px);letter-spacing:.13em;line-height:1.4}
.is-navidad #gameOverScreen .gameover-title{font-size:clamp(21px,5.4vw,30px);line-height:1.15;text-wrap:balance}
.is-navidad #gameOverScreen .record-message{font-size:13px;line-height:1.5;font-weight:700}
.is-navidad #gameOverScreen .result-actions{gap:12px}.is-navidad #gameOverScreen .result-actions button{margin-top:0}