@font-face {
  font-family: Pixel;
  src: url("/assets/pixel.woff2") format("woff2");
  font-display: swap;
}
:root {
  /* Sin esto, el navegador del celular agranda el texto por su cuenta al girarlo a horizontal. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: #173e35;
  background: #f6f8f2;
  --ink: #173e35;
  --green: #c6ed86;
  --line: #d6ded5;
  --paper: #fff;
  --muted: #506259;
  letter-spacing: 0;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
summary {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: wait;
  opacity: 0.6;
}
a {
  color: inherit;
  text-underline-offset: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid #08768a;
  outline-offset: 4px;
}
::selection {
  background: #c6ed86;
  color: #173e35;
}
input {
  caret-color: #173e35;
}
body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-thumb {
  background: #768e7d;
}
h1,
h2,
h3,
p {
  margin: 0;
}
p {
  line-height: 1.6;
}
svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar {
  height: 94px;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
}
.brand svg {
  width: 38px;
  height: 42px;
}
.edition {
  font-size: 14px;
  color: var(--muted);
}
.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.icon-button:hover {
  background: #e6ecdf;
}
main {
  min-height: calc(100svh - 155px);
}
footer {
  padding: 20px 5%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.welcome {
  position: relative;
  min-height: 640px;
  display: grid;
  grid-template-columns: 1fr 390px;
  align-items: center;
  padding: 48px 6%;
  gap: 40px;
  overflow: hidden;
  background: #b5ddd1;
}
.world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.welcome-copy {
  position: relative;
  align-self: start;
  padding-top: 12px;
  max-width: 580px;
  pointer-events: none;
}
.welcome h1 {
  font-family: Pixel, monospace;
  font-size: 52px;
  line-height: 1.24;
  font-weight: 400;
  text-wrap: balance;
  max-width: 570px;
}
.welcome-copy p {
  max-width: 405px;
  margin-top: 20px;
  font-size: 18px;
  color: #173e35;
  background: #b5ddd1;
  padding: 6px 0;
}
.start-panel {
  position: relative;
  background: #fff;
  padding: 28px;
  border: 1px solid #173e35;
  border-radius: 6px;
  box-shadow: 0 12px 30px #173e3520;
}
.start-panel h2 {
  font-size: 23px;
  margin-bottom: 8px;
}
.subtle {
  font-size: 14px;
  color: var(--muted);
}
.avatars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 22px 0;
}
.avatar-option {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  background: #f3f5ee;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 10px 4px;
  font-size: 12px;
  color: var(--ink);
}
.avatar-option[aria-pressed="true"] {
  border-color: var(--ink);
  background: #e4f3d1;
}
.avatar-option:hover {
  background: #e4f3d1;
}
.sprite {
  width: 56px;
  height: 72px;
  image-rendering: pixelated;
}
.uniforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: -10px 0 18px;
}
.uniform-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px 8px;
  background: #f3f5ee;
  border: 2px solid transparent;
  border-radius: 4px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
  text-align: left;
}
.uniform-option small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.uniform-option[aria-pressed="true"] {
  border-color: var(--ink);
  background: #e4f3d1;
}
.uniform-option:hover {
  background: #e4f3d1;
}
.swatch {
  flex: 0 0 18px;
  height: 22px;
  border: 1px solid #173e35;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent 58%, #f85000 58% 70%, #fdb31e 70% 82%, #15bed6 82% 94%, transparent 94%) 0 5px / 100% 3px no-repeat;
}
.swatch-blanca {
  background-color: #f2f4f1;
}
.swatch-marino {
  background-color: #1f2f55;
}
.swatch-gris {
  background-color: #8d949a;
}
.field {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin: 14px 0;
}
.field input,
.field select {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #899d91;
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
}
/* Sin `appearance: none` cada navegador le da su propio alto y el selector no alinea con los
   campos de texto de arriba y de abajo. La flecha se dibuja con dos degradados. */
.field select {
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, #173e35 50%), linear-gradient(135deg, #173e35 50%, transparent 50%);
  background-position: right 16px top 18px, right 11px top 18px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.field select:invalid {
  color: #506259;
}
.field small {
  font-weight: 400;
  color: var(--muted);
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  line-height: 1.5;
  margin: 18px 0;
}
.consent input {
  accent-color: #173e35;
  min-width: 17px;
  height: 17px;
  margin: 1px 0;
}
.primary,
.secondary {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 4px;
  font-weight: 700;
  border: 1px solid var(--ink);
  text-decoration: none;
}
.primary {
  background: var(--ink);
  color: #fff;
}
.primary:hover {
  background: #285849;
}
.secondary {
  background: transparent;
  color: var(--ink);
}
.secondary:hover {
  background: #e7eedf;
}
.wide {
  width: 100%;
}
.error {
  color: #a32b29;
  font-size: 14px;
  line-height: 1.5;
  margin: 12px 0;
}
.journey-note {
  padding: 24px 6%;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.journey-note span {
  font-size: 14px;
}
.journey-note strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
}
.play {
  max-width: 1400px;
  margin: auto;
  padding: 30px 4% 42px;
}
.play-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.play-top h1 {
  font-size: 23px;
}
.progress {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}
.progress i {
  width: 38px;
  height: 5px;
  background: #d5dfd0;
}
.progress i.done {
  background: #29754c;
}
.score {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: Pixel, monospace;
  font-size: 17px;
  text-align: right;
}
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 30px;
  align-items: start;
}
.scene {
  position: relative;
  height: 480px;
  overflow: hidden;
  background: #b5ddd1;
  border-radius: 4px;
}
.scene canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.scene-label {
  position: absolute;
  left: 18px;
  top: 18px;
  background: #fff;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
}
.hotspot {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 14px 18px;
  font-weight: 700;
  box-shadow: 0 6px 20px #173e3540;
  animation: float 2.4s ease-in-out infinite;
}
.hotspot:hover {
  background: var(--green);
}
.scene-caption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.mission {
  padding: 8px 0;
}
.mission h2 {
  font-size: 28px;
  line-height: 1.15;
  margin-bottom: 16px;
}
.mission > p {
  margin-bottom: 20px;
}
.message {
  background: #fff;
  border: 1px solid #b8c9bc;
  border-radius: 4px;
  padding: 20px;
  margin: 20px 0;
  white-space: pre-line;
  line-height: 1.6;
  font-size: 15px;
}
.choices {
  display: grid;
  gap: 10px;
}
.choice {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  min-height: 66px;
  border: 1px solid #a4b7a8;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  padding: 14px;
  font-size: 15px;
  line-height: 1.35;
}
.choice:hover {
  background: #edf5e1;
  border-color: var(--ink);
}
.choice .choice-number {
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  height: 25px;
  background: #e9efe5;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
}
.feedback {
  border-top: 3px solid #30774f;
  padding: 22px 0;
  margin-top: 18px;
}
.feedback h3 {
  font-size: 22px;
  margin-bottom: 12px;
}
.feedback p {
  margin-bottom: 20px;
}
.feedback.learn {
  border-color: #a76829;
}
.floor {
  background: #1b222b;
  border-radius: 4px;
  padding: 10px;
}
.floor:focus-visible {
  outline: 3px solid #08768a;
  outline-offset: 4px;
}
.floor-hud {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 8px;
  color: #e8edf0;
  font-family: Pixel, monospace;
  font-size: 15px;
}
.floor-hud b {
  color: var(--green);
  font-weight: 400;
}
.floor canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  cursor: pointer;
}
.map-stage {
  position: relative;
  overflow: hidden;
}
.minimap-wrap {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 7px 9px 9px;
  color: #e8edf0;
  background: #1b222bea;
  border: 1px solid #b9cfb4;
  pointer-events: none;
}
.minimap-wrap span {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
}
.floor .minimap {
  display: block;
  width: 104px;
  height: 60px;
  image-rendering: pixelated;
  cursor: default;
}
.floor .minimap svg { display: block; width: 100%; height: 100%; stroke: none; }
.floor-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.keys {
  flex: 1 1 260px;
  font-size: 13px;
  color: var(--muted);
}
.act {
  flex: 1 0 190px;
  max-width: 100%;
}
.act:disabled {
  cursor: default;
}
.pad {
  display: none;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(2, 48px);
  gap: 4px;
  flex: 0 0 auto;
}
.pad button {
  background: #e9efe5;
  border: 1px solid #a4b7a8;
  border-radius: 4px;
  color: var(--ink);
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.pad .up {
  grid-column: 2;
}
.pad .left {
  grid-row: 2;
}
.pad .down {
  grid-row: 2;
}
.pad .right {
  grid-row: 2;
}
.shortcuts {
  margin-top: 20px;
}
.shortcuts-title {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
#shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.shortcut {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #a4b7a8;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
}
.shortcut:hover {
  border-color: var(--ink);
}
.shortcut.done {
  background: #e4f3d1;
  border-color: #29754c;
}
.place {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.mission .subtle {
  margin-top: 12px;
}
.mission .ask {
  font-weight: 700;
  margin: 18px 0 10px;
}
.mission .leave {
  margin-top: 18px;
}
.mail {
  display: grid;
  gap: 6px;
  background: #fff;
  border: 1px solid #b8c9bc;
  border-radius: 4px;
  padding: 16px 18px;
  margin: 14px 0 8px;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.incident-prop {
  overflow: hidden;
  margin: 18px 0 10px;
  border: 2px solid #344b45;
  border-radius: 8px;
  background: #f8fbf5;
}
.prop-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 15px;
  color: #fff;
  background: #173e35;
  font-family: Pixel, monospace;
  font-size: 15px;
}
.prop-body {
  padding: 20px;
}
.prop-body strong {
  display: block;
  font-size: 16px;
}
.prop-body p {
  margin-top: 17px;
  padding: 15px;
  border: 1px solid #b8c9bc;
  background: #fff;
  line-height: 1.55;
}
.prop-body small {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.prop-prompt {
  margin: 22px 0 10px;
  font-size: 16px;
}
.prop-body .choices { gap: 8px; }
.prop-body .choice { min-height: 58px; }
.prop-body .choice-number { flex-basis: 25px; }
.prop-body .reveal {
  margin-top: 20px;
  min-height: 48px;
}
.incident-prop.phone {
  border-radius: 22px;
  background: #202a35;
  color: #fff;
}
.phone .prop-head {
  background: #202a35;
  border-bottom: 1px solid #5c7080;
}
.phone .prop-body {
  padding: 26px 20px;
}
.phone .prop-body p {
  max-width: 30ch;
  margin-left: auto;
  border-radius: 16px 16px 3px 16px;
  color: #173e35;
}
.phone .prop-body small {
  color: #d6e3df;
}
.phone .prop-prompt { color: #fff; }
.phone .choice {
  background: #dce8e6;
  color: #173e35;
  border-color: #9ab6ae;
}
.phone .choice:hover { background: #c6ed86; }
.phone .reveal {
  background: #c6ed86;
  color: #173e35;
}
.usb .prop-head { background: #46505b; }
.usb .prop-body { background: #ecece4; }
.usb .choice { background: #fffef7; border-color: #a5aaa2; }
.wifi .prop-body { background: #e8f0ef; }
.wifi .prop-body p { border-radius: 8px; }
.wifi .choice { background: #fff; border-color: #95b6bb; }
.password .prop-head { background: #314c6d; }
.password .prop-body { background: #eef3f8; }
.password .choice { background: #fff; }
.choices.phone .choice { border-radius: 12px; }
.choices.wifi .choice { border-radius: 8px; }
.choices.password .choice { border-color: #7890a8; }
@media (max-width: 720px) {
  .minimap-wrap { right: 7px; bottom: 7px; padding: 5px; }
  .minimap-wrap span { display: none; }
  .floor .minimap { width: 78px; height: 45px; }
}
.clue {
  display: inline;
  background: none;
  border: 0;
  border-bottom: 2px dotted #8aa093;
  padding: 0 2px;
  color: inherit;
  text-align: left;
  line-height: inherit;
}
.clue:hover {
  background: #f1f5ec;
}
.clue.found {
  background: #ffe0da;
  border-bottom-color: #a32b29;
}
.clue.fine {
  background: #e4f3d1;
  border-bottom-color: #29754c;
}
.clue-count {
  font-size: 14px;
  color: var(--muted);
}
.floor-caption {
  margin: 8px 0 0;
  padding: 8px 2px 0;
  border-top: 1px solid #3a4654;
  color: #e8edf0;
  font-size: 15px;
  line-height: 1.45;
}
.beats {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding-left: 22px;
  line-height: 1.5;
}
.mission .skip {
  margin-top: 6px;
}
.consequence {
  margin: 16px 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.consequence h3 {
  font-size: 18px;
}
.consequence .beats {
  margin-bottom: 0;
}
.feedback .actions {
  margin-top: 4px;
}
.end .tower {
  display: block;
  width: 100%;
  height: 280px;
  margin: 8px 0 26px;
  border-radius: 4px;
  image-rendering: pixelated;
}
/* Palanca y boton A: solo en pantallas tactiles; con raton se usan teclas o clic en el piso. */
.stick,
.act-letter,
.act-caption {
  display: none;
}
@media (hover: none), (pointer: coarse) {
  .stick {
    display: block;
  }
  .keys {
    display: none;
  }
  .act-letter {
    display: block;
  }
}
.end {
  max-width: 1000px;
  margin: auto;
  padding: 50px 6%;
}
.end h1 {
  font-family: Pixel, monospace;
  font-size: 36px;
  line-height: 1.4;
  margin: 18px 0;
}
.end-banner {
  background: #dcefcc;
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 30px;
}
.end-banner .sprite {
  width: 84px;
  height: 108px;
}
.end-banner strong {
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
}
/* Tira de cinco marcas junto al puntaje: de un vistazo se ve donde se acerto y donde no. */
.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
}
.strip li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.strip .right span {
  color: #29754c;
  font-weight: 700;
}
.strip .wrong span {
  color: #a32b29;
  font-weight: 700;
}
.end-sub {
  margin-top: 36px;
  font-size: 22px;
}
.lessons {
  display: grid;
  gap: 14px;
  margin: 18px 0 30px;
}
/* Cada decision se cuenta entera: que elegiste, que convenia, que paso y que te llevas. Antes
   era un desplegable con una sola linea y no se recordaba ni la propia respuesta. */
.lesson {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.lesson header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.lesson-mark {
  flex: 0 0 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-weight: 700;
  border-radius: 50%;
  background: #e4f3d1;
  color: #29754c;
}
.lesson.wrong .lesson-mark {
  background: #ffe0da;
  color: #a32b29;
}
.lesson h3 {
  font-size: 19px;
}
.lesson dl {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0;
}
.lesson dt {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.lesson dd {
  margin: 0;
  line-height: 1.5;
}
.lesson dd.better {
  color: #29754c;
  font-weight: 700;
}
@media (max-width: 720px) {
  .lesson dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .lesson dt {
    margin-top: 10px;
  }
}
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.admin {
  max-width: 1100px;
  padding: 40px 5%;
  margin: auto;
}
.admin h1 {
  margin-bottom: 24px;
}
.admin .field {
  max-width: 440px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 20px 24px;
  padding: 26px 0;
}
.stats strong {
  font-size: 30px;
  display: block;
}
.table-wrap {
  overflow: auto;
  margin: 22px 0;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  text-align: left;
}
td,
th {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
th {
  background: #e9efe5;
}
.loading {
  padding: 80px 6%;
  font-size: 20px;
}
.privacy {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
}
.empty {
  padding: 30px 0;
  color: var(--muted);
}
/* Panel de organizadores: el numero que se compara es el del tema; el detalle por caso se abre aparte. */
.hint {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
details.variants {
  margin: 0 0 22px;
}
details.variants summary {
  padding: 8px 0;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
details.variants .table-wrap {
  margin: 8px 0 0;
}
/* ---------- Panel de organizadores: graficas ---------- */
/* Las barras son cajas, no SVG ni libreria: la politica de contenido del sitio no permite
   scripts de fuera, y una barra horizontal con su cifra al lado se lee mejor que un grafico
   de pastel para comparar. El dato siempre va escrito; la barra solo lo hace visible. */
#report section {
  margin: 38px 0;
}
#report h2 {
  font-size: 22px;
  margin-bottom: 6px;
}
.bar {
  display: block;
  height: 10px;
  border-radius: 4px;
  background: #e9efe5;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: #29754c;
}
.bar.bad i {
  background: #e0564f;
}
.themes {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}
.theme {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.theme header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.theme h3 {
  font-size: 17px;
}
.place-note {
  font-size: 13px;
  color: var(--muted);
}
.theme-score {
  text-align: right;
  white-space: nowrap;
}
.theme-score strong {
  display: block;
  font-size: 26px;
  line-height: 1.1;
}
.theme-score span {
  font-size: 12px;
  color: var(--muted);
}
.options,
.units,
.funnel {
  list-style: none;
  margin: 0;
  padding: 0;
}
.options li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 34px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 14px;
}
.options .wrong .opt-name {
  color: var(--muted);
}
.opt-name {
  overflow-wrap: anywhere;
}
.opt-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.units {
  margin-top: 18px;
}
.units li,
.funnel li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.unit-num,
.funnel-num {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.unit-note {
  grid-column: 1 / -1;
  margin-top: -6px;
  font-size: 12px;
  color: var(--muted);
}
.funnel {
  margin-top: 18px;
}
.funnel li {
  grid-template-columns: 116px minmax(0, 1fr) 52px;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  margin: 16px 0 4px;
}
.filters label {
  display: grid;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
}
.filters select {
  min-width: 170px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.filter-count {
  padding-bottom: 9px;
  font-size: 13px;
  color: var(--muted);
}
td.num {
  font-variant-numeric: tabular-nums;
}
/* Lo que eligio cada persona, decision por decision: antes solo decia la letra de la opcion. */
.picks {
  margin: 10px 0 4px;
  padding-left: 18px;
  font-size: 13px;
}
.picks li {
  padding: 3px 0;
}
.picks li b {
  display: block;
  font-weight: 700;
}
.picks li span {
  white-space: normal;
}
.picks .wrong span {
  color: #a32b29;
}
.picks .right span {
  color: #29754c;
}
/* La celda de decisiones es la unica que envuelve texto: si no, al abrir el detalle la tabla
   crece a lo ancho, aparece barra horizontal y la primera columna queda fuera de la vista. */
#report td details {
  white-space: normal;
}
#report td:last-child {
  max-width: 330px;
  white-space: normal;
}
/* Siete columnas dejan de caber bastante antes que el resto del panel, asi que la tabla de
   recorridos tiene su propio punto de quiebre: por debajo, cada recorrido es una tarjeta con
   sus etiquetas al lado. El HTML sigue siendo una tabla, para no mantener dos marcados. */
@media (max-width: 900px) {
  #report table,
  #report tbody,
  #report tr,
  #report td {
    display: block;
  }
  #report thead {
    display: none;
  }
  #report tbody tr {
    margin-bottom: 12px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  #report tbody td {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    max-width: none;
    padding: 7px 0;
    white-space: normal;
    border-bottom: 0;
  }
  #report tbody td + td {
    border-top: 1px solid var(--line);
  }
  #report tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 13px;
  }
}
.cases {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.cases li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px 46px;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.case-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.case-note {
  grid-column: 1 / -1;
  margin-top: -5px;
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 720px) {
  .themes {
    grid-template-columns: 1fr;
  }
  .cases li {
    grid-template-columns: minmax(0, 1fr) 70px 42px;
  }

  .units li,
  .funnel li {
    grid-template-columns: 104px minmax(0, 1fr) 46px;
    gap: 9px;
    font-size: 13px;
  }
  .options li {
    grid-template-columns: minmax(0, 1fr) 56px 30px;
  }
  .filters select {
    min-width: 0;
    width: 100%;
  }
  .filters label {
    flex: 1 1 140px;
  }
}
/* Vaciar recorridos: va al final, plegado y con su propia palabra de confirmacion, para que
   nadie borre la actividad de un grupo buscando el boton de exportar. */
details.wipe {
  margin: 34px 0 10px;
  padding: 14px 16px;
  border: 1px solid #a32b29;
  border-radius: 8px;
  background: #ffe0da;
}
details.wipe summary {
  font-weight: 700;
  color: #a32b29;
  cursor: pointer;
}
details.wipe p {
  margin: 10px 0 14px;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.5;
}
details.wipe form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
details.wipe label {
  font-size: 14px;
}
/* Cada etiqueta pegada a su campo. El formulario es una fila que envuelve, y en el de borrar
   una parte hay tres campos: sueltas, a 390 px las etiquetas caian al lado del campo de
   al lado y parecia que "Desde" nombraba al numero de empleado. */
details.wipe .campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
details.wipe #cuantos {
  flex-basis: 100%;
}
details.wipe #cuantos p {
  margin: 4px 0 10px;
}
details.wipe input {
  min-width: 10ch;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
button.danger {
  min-height: 44px;
  padding: 10px 16px;
  color: #fff;
  font-weight: 700;
  background: #a32b29;
  border: 1px solid #8a2a24;
  border-radius: 6px;
  cursor: pointer;
}
button.danger:hover {
  background: #8a2a24;
}
button.danger:disabled {
  opacity: 0.6;
  cursor: default;
}
@keyframes float {
  50% {
    translate: 0 -6px;
  }
}
@media (min-width: 1500px) {
  .welcome {
    min-height: 710px;
    padding-left: 10%;
    padding-right: 10%;
  }
  .welcome-copy {
    padding-top: 30px;
  }
}
@media (max-width: 1000px) {
  .welcome {
    grid-template-columns: 1fr 350px;
    padding: 35px 4%;
    gap: 20px;
  }
  .welcome h1 {
    font-size: 38px;
  }
  .game-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
@media (max-width: 720px) {
  .topbar {
    height: 76px;
    padding: 0 5%;
  }
  .edition {
    display: none;
  }
  .welcome {
    display: block;
    padding: 30px 5%;
    min-height: auto;
  }
  .welcome-copy {
    padding: 0 0 170px;
  }
  .welcome h1 {
    font-size: 34px;
    max-width: 430px;
  }
  .welcome-copy p {
    font-size: 16px;
    max-width: 340px;
  }
  .start-panel {
    max-width: 440px;
    margin: 0 auto;
    padding: 23px;
  }
  .welcome > .world {
    height: 440px;
  }
  .journey-note {
    flex-wrap: wrap;
    gap: 20px;
  }
  .journey-note span {
    flex: 1 1 130px;
    font-size: 12px;
  }
  .journey-note strong {
    font-size: 14px;
  }
  footer {
    font-size: 11px;
    flex-wrap: wrap;
  }
  .play {
    padding: 24px 5%;
  }
  .play-top h1 {
    font-size: 18px;
  }
  .game-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .scene {
    height: 265px;
  }
  .mission h2 {
    font-size: 26px;
  }
  .scene-caption {
    margin-top: 10px;
  }
  .mission-index {
    display: none;
  }
  .score {
    font-size: 13px;
  }
  .end {
    padding: 25px 5%;
  }
  .end h1 {
    font-size: 27px;
  }
  .end-banner {
    padding: 20px;
    gap: 18px;
  }
  .end-banner strong {
    font-size: 26px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
/* El recorrido es una unica pantalla: mundo, controles y decisiones comparten el marco. */
body.in-game {
  overflow: hidden;
  background: #1b222b;
}
body.in-game .topbar {
  height: 54px;
  padding: 0 24px;
  color: #e8edf0;
  background: #172029;
  border-color: #34434d;
}
body.in-game .brand { font-size: 11px; }
body.in-game .brand svg { width: 29px; height: 32px; }
body.in-game .edition { color: #d3dfdc; }
body.in-game .icon-button { border-color: #52646b; color: #e8edf0; }
body.in-game main { height: calc(100dvh - 54px); min-height: 0; }
body.in-game footer { display: none; }
body.in-game .play,
body.in-game .game-layout { width: 100%; height: 100%; max-width: none; padding: 0; display: block; }
body.in-game .floor {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  padding: 0;
  background: #1b222b;
}
body.in-game .map-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #1b222b;
}
body.in-game .floor-map { max-width: none; }
/* Acercamiento de la consecuencia. Va sobre el Canvas ya dibujado y solo mientras dura
   (clase `zooming`), asi el juego normal no arrastra ninguna capa ni transformacion.
   El factor y el punto los pone world.js; cada ancho repite aqui su propio transform
   porque el acercamiento tiene que componerse con el centrado, no sustituirlo. */
body.in-game .floor-map.zooming {
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
  transform: translateY(var(--pan-y, 0px)) scale(var(--zoom, 1));
}
body.in-game .play-top {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  margin: 0;
  padding: 10px 24px;
  color: #e8edf0;
  background: #172029ed;
  border-bottom: 1px solid #52646b;
}
body.in-game .play-top h1 { font-size: 17px; color: #e8edf0; }
body.in-game .progress { margin-top: 6px; }
body.in-game .progress i { background: #51605f; height: 4px; width: 30px; }
body.in-game .progress i.done { background: #c6ed86; }
body.in-game .floor-hud { display: flex; flex-direction: column; gap: 2px; padding: 0; text-align: center; }
body.in-game .floor-hud b { color: #c6ed86; }
body.in-game .score { color: #e8edf0; }
body.in-game .minimap-wrap { z-index: 3; right: 20px; top: 84px; bottom: auto; }
body.in-game .floor-controls {
  position: absolute;
  z-index: 3;
  left: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  max-width: min(600px, calc(100% - 40px));
  margin: 0;
  padding: 11px;
  background: #172029ed;
  border: 1px solid #52646b;
  border-radius: 6px;
}
body.in-game .keys { color: #e8edf0; font-size: 13px; }
body.in-game .touch-keys { display: none; }
body.in-game .act { flex: 0 1 230px; min-height: 48px; white-space: normal; }
body.in-game .shortcuts {
  position: absolute;
  z-index: 4;
  right: 20px;
  bottom: 20px;
  max-width: min(470px, calc(100% - 40px));
  margin: 0;
  color: #e8edf0;
  background: #172029ed;
  border: 1px solid #52646b;
  border-radius: 6px;
}
body.in-game .shortcuts summary { padding: 13px 16px; cursor: pointer; font-weight: 700; }
body.in-game #shortcuts { padding: 0 12px 12px; }
body.in-game .shortcut { min-height: 40px; }
body.in-game .floor[data-mode]:not([data-mode="explore"]) .floor-controls,
body.in-game .floor[data-mode]:not([data-mode="explore"]) .shortcuts,
body.in-game .floor[data-mode]:not([data-mode="explore"]) .minimap-wrap { display: none; }
/* Velo que apaga el piso cuando se lee algo encima. En "watch" no va: la consecuencia se
   ve en el piso y el panel ya es opaco. Se excluye aqui, no con un override posterior:
   [data-mode]:not(...) pesa mas que [data-mode="watch"] y el override nunca ganaba. */
body.in-game .floor[data-mode]:not([data-mode="explore"]):not([data-mode="watch"])::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 72px 0 0;
  background: #111b23a8;
  pointer-events: none;
}
body.in-game .mission[hidden] { display: none; }
body.in-game .mission {
  position: absolute;
  z-index: 5;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 28px;
  color: #173e35;
  background: #f6f8f2;
  border: 2px solid #a4b7a8;
  border-radius: 8px;
  box-shadow: 0 12px 35px #0c1519a3;
}
body.in-game .mission > h2 { font-size: clamp(23px, 2vw, 31px); margin-bottom: 8px; }
body.in-game .mission > p { margin-bottom: 10px; }
body.in-game .mission .leave { margin-top: 8px; }
body.in-game .floor[data-mode="incident"] .mission {
  top: 50%;
  right: 24px;
  bottom: auto;
  width: min(900px, 70vw);
  max-height: calc(100% - 110px);
  transform: translateY(-50%);
}
body.in-game .email-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
body.in-game .email-inspect,
body.in-game .email-decide { min-width: 0; }
body.in-game .mail { margin-top: 8px; padding: 12px; font-size: 14px; line-height: 1.45; }
body.in-game .clue-count { margin: 8px 0; }
body.in-game .email-wait { padding: 20px; background: #e9efe5; line-height: 1.45; }
body.in-game .incident-prop { margin: 14px 0 0; }
body.in-game .prop-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: start; padding: 18px; }
body.in-game .prop-body p { margin-top: 12px; padding: 12px; font-size: 14px; }
body.in-game .prop-body small { margin-top: 8px; }
body.in-game .prop-body .choice { min-height: 54px; padding: 10px; font-size: 14px; }
body.in-game .prop-prompt { margin: 0 0 10px; }
body.in-game .floor[data-mode="talk"] .mission {
  left: 50%;
  bottom: 25px;
  width: min(760px, calc(100% - 48px));
  transform: translateX(-50%);
}
body.in-game .floor[data-mode="watch"] .mission {
  left: 50%;
  bottom: 20px;
  width: min(950px, calc(100% - 48px));
  min-height: 140px;
  transform: translateX(-50%);
  color: #e8edf0;
  background: #172029f2;
  border-color: #52646b;
}
body.in-game .floor[data-mode="watch"] .mission h2,
body.in-game .floor[data-mode="watch"] .mission .place { color: #e8edf0; }
body.in-game .floor[data-mode="watch"] .beats { margin: 10px 0; }
body.in-game .floor[data-mode="watch"] .skip {
  position: absolute;
  right: 20px;
  top: 20px;
  color: #e8edf0;
  background: #23333b;
  border-color: #a4b7a8;
}
body.in-game .floor[data-mode="watch"] .skip:hover { background: #345048; }
body.in-game .floor[data-mode="result"] .mission {
  left: 50%;
  top: 50%;
  width: min(1060px, calc(100% - 48px));
  max-height: calc(100% - 130px);
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  align-items: start;
}
body.in-game .floor[data-mode="result"] .mission > .place,
body.in-game .floor[data-mode="result"] .mission > h2 { grid-column: 1 / -1; }
body.in-game .floor[data-mode="result"] .consequence,
body.in-game .floor[data-mode="result"] .feedback { margin-top: 6px; }
@media (max-width: 1000px) {
  body.in-game .floor[data-mode="incident"] .mission { width: min(650px, 70vw); }
  body.in-game .floor-controls { max-width: 55%; }
}
@media (max-width: 720px) {
  body.in-game .topbar { padding: 0 14px; }
  body.in-game .play-top { height: 66px; min-height: 66px; gap: 8px; padding: 7px 12px; }
  body.in-game .play-top h1 { font-size: 14px; }
  body.in-game .progress i { width: 20px; }
  body.in-game .floor-hud { font-size: 11px; }
  body.in-game .score { font-size: 11px; }
  body.in-game .map-stage { inset: 66px 0 0; display: block; }
  body.in-game .floor-map { position: absolute; top: 0; left: 50%; margin: 0; transform: translateX(-50%); }
  body.in-game .floor-map.zooming { transform: translateX(-50%) translateY(var(--pan-y, 0px)) scale(var(--zoom, 1)); }
  body.in-game .minimap-wrap { top: 75px; right: 8px; }
  body.in-game .floor-controls {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 12px;
    padding: 8px;
  }
  body.in-game .floor-controls .keys { display: block; grid-column: 1 / -1; font-size: 12px; }
  body.in-game .desktop-keys { display: none; }
  body.in-game .touch-keys { display: inline; }
  body.in-game .pad { display: grid; }
  body.in-game .pad { grid-column: 1; grid-row: 2; }
  body.in-game .act { grid-column: 2; grid-row: 2; width: 100%; align-self: stretch; }
  body.in-game .shortcuts { right: 10px; bottom: 184px; }
  body.in-game .floor[data-mode]:not([data-mode="explore"]):not([data-mode="watch"])::before { inset: 66px 0 0; }
  body.in-game .mission,
  body.in-game .floor[data-mode="incident"] .mission,
  body.in-game .floor[data-mode="result"] .mission,
  body.in-game .floor[data-mode="talk"] .mission {
    left: 0;
    right: 0;
    top: min(32vh, 270px);
    bottom: 0;
    width: auto;
    max-height: none;
    transform: none;
    display: block;
    padding: 18px;
    border-radius: 16px 16px 0 0;
  }
  body.in-game .mission > h2 { font-size: 23px; }
  body.in-game .email-layout,
  body.in-game .prop-body { display: block; }
  body.in-game .email-decide { margin-top: 14px; }
  body.in-game .prop-decision { margin-top: 18px; }
  body.in-game .floor[data-mode="watch"] .mission {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    min-height: 0;
    max-height: 35vh;
    transform: none;
    padding: 14px 18px;
    border-radius: 12px 12px 0 0;
  }
  body.in-game .floor[data-mode="watch"] .skip { position: static; margin-top: 4px; }
}
/* El reconocimiento no se ve en pantalla: existe solo para la hoja impresa. */
.award {
  display: none;
}
@media print {
  .topbar,
  footer,
  .actions,
  .icon-button,
  .end {
    display: none;
  }
  /* Al imprimir se invierte: fuera el recorrido, dentro la hoja. Asi lo que sale no es la
     pagina recortada sino un reconocimiento pensado para una hoja. */
  .award {
    display: block;
  }
  @page {
    margin: 14mm;
  }
  .award-sheet {
    padding: 26mm 20mm;
    text-align: center;
    border: 2px solid #173e35;
    border-radius: 4mm;
  }
  .award-brand {
    font-size: 11pt;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #506259;
  }
  .award h2 {
    margin: 10mm 0 6mm;
    font-family: Pixel, monospace;
    font-size: 30pt;
    font-weight: 400;
  }
  .award-to {
    font-size: 22pt;
    font-weight: 700;
    line-height: 1.25;
  }
  .award-who {
    margin-top: 2mm;
    font-size: 12pt;
    color: #506259;
  }
  .award-why {
    margin: 8mm auto 0;
    max-width: 125mm;
    font-size: 11pt;
    line-height: 1.6;
  }
  .award-score {
    margin: 9mm 0 7mm;
  }
  .award-score strong {
    display: block;
    font-family: Pixel, monospace;
    font-size: 26pt;
  }
  .award-score span {
    font-size: 11pt;
    color: #506259;
  }
  .award-list {
    margin: 0 auto;
    padding: 0;
    max-width: 125mm;
    list-style: none;
    text-align: left;
    font-size: 10.5pt;
  }
  .award-list li {
    display: grid;
    grid-template-columns: 7mm 46mm minmax(0, 1fr);
    gap: 3mm;
    padding: 2mm 0;
    border-bottom: 1px solid #d6ded5;
  }
  .award-list b {
    font-weight: 700;
  }
  .award-date {
    margin-top: 9mm;
    font-size: 11pt;
  }
  .award-foot {
    margin-top: 4mm;
    font-size: 9pt;
    color: #506259;
  }
}

/* ---------- Piso nitido y monitor de incidentes ---------- */
/* El piso ocupa el espacio bajo el HUD; world.js lo amplia por un entero (resize). */
body.in-game .map-stage { inset: 72px 0 0; }
body.in-game .floor-map { height: auto; }
body.in-game .monitor-shell { display: contents; }
/* Los incidentes se leen en la pantalla de un monitor de sobremesa: marco con CSS y pedestal de SpriteLab. */
body.in-game .floor[data-mode="incident"] .monitor-shell {
  display: block;
  position: absolute;
  z-index: 5;
  top: calc(50% - 35px);
  left: 50%;
  width: min(900px, 70vw);
  padding: 6px 6px 12px;
  background: #20262e;
  border: 2px solid #0b0f13;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #3a4452, 0 18px 40px #0c1519b3;
  transform: translate(-50%, -50%);
}
body.in-game .floor[data-mode="incident"] .monitor-shell::before {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c6ed86;
  box-shadow: 0 0 6px #c6ed86;
}
body.in-game .floor[data-mode="incident"] .monitor-shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  /* Pedestal proporcional al monitor (17 % del ancho, sprite 3:2); el cuello queda detras del marco. */
  top: calc(100% - 34px);
  left: 50%;
  width: 17%;
  aspect-ratio: 3 / 2;
  background: url("/assets/entorno/base-monitor.png") center bottom / 100% 100% no-repeat;
  image-rendering: pixelated;
  transform: translateX(-50%);
}
body.in-game .floor[data-mode="incident"] .monitor-shell .mission {
  position: static;
  width: auto;
  max-height: calc(100dvh - 54px - 16px - 70px - 22px - 4px);
  padding: 8px 20px;
  border: 2px solid #0b0f13;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #d6ded5;
  transform: none;
}
body.in-game .floor[data-mode="incident"] .monitor-shell .mission > .place { margin-bottom: 2px; }
body.in-game .floor[data-mode="incident"] .monitor-shell .mission > h2 { font-size: clamp(22px, 1.8vw, 28px); margin-bottom: 4px; }
body.in-game .floor[data-mode="incident"] .monitor-shell .mission > p { margin-bottom: 6px; line-height: 1.45; }
body.in-game .floor[data-mode="incident"] .monitor-shell .incident-prop { margin-top: 8px; }
@media (max-width: 720px) {
  body.in-game .floor[data-mode="incident"] .monitor-shell {
    top: min(32vh, 270px);
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    padding: 10px 10px 0;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    transform: none;
  }
  body.in-game .floor[data-mode="incident"] .monitor-shell::before { top: 4px; right: 50%; bottom: auto; transform: translateX(3px); }
  body.in-game .floor[data-mode="incident"] .monitor-shell::after { display: none; }
  body.in-game .floor[data-mode="incident"] .monitor-shell .mission {
    height: 100%;
    max-height: none;
    padding: 16px;
    overflow-y: auto;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
  }
}

/* ---------- Tutorial de primera vez ---------- */
body.in-game .tour {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
}
body.in-game .tour-ring {
  position: absolute;
  border: 3px solid #c6ed86;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px #0b0f1394;
  animation: tour-pulse 1.6s ease-in-out infinite;
}
body.in-game .tour.no-target .tour-ring {
  inset: 0;
  width: auto !important;
  height: auto !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #0b0f1394;
  animation: none;
}
body.in-game .tour.practicing .tour-ring {
  display: none;
}
@keyframes tour-pulse {
  50% {
    border-color: #f6f8f2;
  }
}
body.in-game .tour-card {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: min(460px, calc(100% - 32px));
  padding: 18px 20px 14px;
  color: #173e35;
  background: #f6f8f2;
  border: 2px solid #0b0f13;
  border-radius: 8px;
  box-shadow: 0 14px 36px #0c1519b3;
  pointer-events: auto;
  transform: translateX(-50%);
}
body.in-game .tour.no-target .tour-card {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}
body.in-game .tour-card.at-top {
  top: 84px;
  bottom: auto;
}
body.in-game .tour-count {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #506259;
}
body.in-game .tour-card h2 {
  margin-bottom: 6px;
  font-size: 22px;
  line-height: 1.2;
}
body.in-game .tour-card h2:focus {
  outline: none;
}
body.in-game .tour-check {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  background: #e4f3d1;
  font-weight: 700;
}
body.in-game .tour-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
}
body.in-game .tour-actions span {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
body.in-game .tour-skip {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: #506259;
  text-decoration: underline;
  text-underline-offset: 4px;
}
body.in-game .tour-card .primary,
body.in-game .tour-card .secondary {
  min-height: 44px;
  padding: 8px 16px;
}
body.in-game .shortcuts .tour-replay {
  width: 100%;
  margin-top: 8px;
}
@media (max-width: 720px) {
  body.in-game .tour-card {
    bottom: 12px;
    padding: 14px 14px 10px;
  }
  body.in-game .tour-card.at-top {
    top: 74px;
  }
  body.in-game .tour-card h2 {
    font-size: 19px;
  }
  body.in-game .tour-card p {
    font-size: 15px;
    line-height: 1.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.in-game .tour-ring {
    animation: none;
  }
}

/* ---------- Orden de lectura del incidente ---------- */
/* Una sola columna numerada: lo que pasa, lo que ves y tu decision. */
.read-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.read-top .leave {
  flex: 0 0 auto;
  min-height: 40px;
  margin: 2px 0 0;
  padding: 6px 14px;
  font-size: 14px;
}
body.in-game .mission .read-top .leave { margin-top: 2px; }
.reading {
  display: grid;
  gap: 9px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: read;
}
.read-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  counter-increment: read;
}
.read-step::before {
  content: counter(read);
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #173e35;
  color: #c6ed86;
  font: 700 13px Arial, Helvetica, sans-serif;
}
.read-step > * {
  grid-column: 2;
}
.read-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #506259;
}
.read-intro {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}
body.in-game .mission .reading p { margin-bottom: 0; }
.read-decide.waiting::before {
  background: #d6ded5;
  color: #506259;
}
.read-wait {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed #a4b7a8;
  border-radius: 4px;
  color: #506259;
  font-size: 14px;
}
.read-question {
  margin: 0 0 6px;
  font-size: 17px;
}
.read-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
body.in-game .read-choices .choice {
  align-items: flex-start;
  min-height: 54px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.35;
}
.read-hint {
  margin: 0 0 6px;
  font-size: 14px;
  color: #506259;
}
.artifact {
  overflow: hidden;
  border: 2px solid #344b45;
  border-radius: 8px;
  background: #fff;
  color: #173e35;
}
.artifact:focus {
  outline: 3px solid #08768a;
  outline-offset: 2px;
}
.artifact-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 12px;
  color: #fff;
  background: #173e35;
  font: 14px Pixel, monospace;
}
.artifact-body {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 12px 14px;
}
.artifact-headline {
  font-size: 18px;
  line-height: 1.3;
}
.artifact-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
.artifact small {
  color: #506259;
  font-size: 13px;
  line-height: 1.4;
}
.artifact .reveal {
  min-height: 44px;
  margin-top: 4px;
}
.artifact .mail {
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  gap: 0;
  font-size: 14px;
  line-height: 1.5;
}
.artifact.inbox .artifact-body {
  gap: 4px;
  padding: 8px 12px;
}
.artifact .clue-count {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.4;
}
.artifact.popup .artifact-head { background: #8a2a24; }
.artifact.popup .artifact-headline { color: #a32b29; }
.artifact.phone {
  border-radius: 16px;
  background: #202a35;
  color: #fff;
}
.artifact.phone .artifact-head {
  background: #202a35;
  border-bottom: 1px solid #5c7080;
}
.artifact.phone .artifact-text {
  padding: 8px 12px;
  border-radius: 14px 14px 14px 3px;
  background: #fff;
  color: #173e35;
}
.artifact.phone small { color: #d6e3df; }
.artifact.phone .reveal { background: #c6ed86; color: #173e35; }
.artifact.usb .artifact-head { background: #46505b; }
.artifact.usb .artifact-body { background: #ecece4; }
.artifact.wifi .artifact-body { background: #e8f0ef; }
.artifact.password .artifact-head { background: #314c6d; }
.artifact.password .artifact-body { background: #eef3f8; }
@media (max-width: 720px) {
  .read-top { gap: 10px; }
  .read-top .leave { padding: 6px 10px; font-size: 13px; }
  .read-step { grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; }
  .read-step::before { width: 24px; height: 24px; }
  .read-label { line-height: 24px; }
  .read-choices { grid-template-columns: 1fr; }
  .artifact-headline { font-size: 17px; }
}

/* ---------- Celular: el juego se juega en horizontal ---------- */
.rotate-notice { display: none; }
@media (orientation: portrait) and (max-width: 720px) {
  body.in-game .rotate-notice {
    position: fixed;
    z-index: 50;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    color: #e8edf0;
    background: #1b222b;
  }
  body.in-game .rotate-notice h2 { font-size: 24px; color: #e8edf0; }
  body.in-game .rotate-notice p { max-width: 30ch; font-size: 16px; line-height: 1.5; color: #c9d4d8; }
  body.in-game .rotate-notice .primary { background: #c6ed86; border-color: #c6ed86; color: #173e35; }
  body.in-game .rotate-phone {
    width: 46px;
    height: 78px;
    margin-bottom: 6px;
    border: 4px solid #c6ed86;
    border-radius: 9px;
    box-shadow: inset 0 -8px 0 -4px #c6ed86;
    animation: rotate-hint 2.4s ease-in-out infinite;
  }
  body.in-game .game-layout { visibility: hidden; }
}
@keyframes rotate-hint {
  0%, 25% { transform: rotate(0deg); }
  55%, 100% { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) {
  body.in-game .rotate-phone { animation: none; transform: rotate(-90deg); }
}

/* Celular en horizontal (o ventana muy baja): barra compacta, controles a los lados y monitor casi a pantalla completa. */
@media (orientation: landscape) and (max-height: 500px) {
  body.in-game .topbar { display: none; }
  body.in-game main { height: 100dvh; }
  body.in-game .play-top { height: 44px; min-height: 44px; gap: 10px; padding: 4px 12px; }
  body.in-game .play-top h1 { font-size: 13px; }
  body.in-game .progress { margin-top: 3px; }
  body.in-game .progress i { width: 18px; height: 3px; }
  body.in-game .floor-hud { font-size: 11px; }
  body.in-game .score { font-size: 11px; }
  body.in-game .map-stage { inset: 44px 0 0; display: grid; place-items: center; }
  body.in-game .floor-map { position: static; margin: 0; transform: none; }
  body.in-game .floor-map.zooming { transform: translateY(var(--pan-y, 0px)) scale(var(--zoom, 1)); }
  body.in-game .minimap-wrap { top: 52px; right: 8px; bottom: auto; padding: 5px; }
  body.in-game .minimap-wrap span { display: none; }
  body.in-game .floor .minimap { width: 78px; height: 45px; }
  body.in-game .floor-controls {
    left: 8px;
    right: auto;
    bottom: 8px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: none;
    padding: 6px;
  }
  body.in-game .floor-controls .keys { display: none; }
  body.in-game .shortcuts { top: 52px; right: auto; left: 8px; bottom: auto; }
  body.in-game .floor[data-mode]:not([data-mode="explore"]):not([data-mode="watch"])::before { inset: 44px 0 0; }
  body.in-game .floor[data-mode]:not([data-mode="explore"]):not([data-mode="incident"]) .mission {
    top: auto;
    right: auto;
    bottom: 8px;
    left: 50%;
    width: min(760px, calc(100vw - 24px));
    max-height: calc(100dvh - 60px);
    padding: 12px 16px;
    overflow-y: auto;
    border-radius: 8px;
    transform: translateX(-50%);
  }
  body.in-game .floor[data-mode="incident"] .monitor-shell {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(900px, calc(100vw - 20px));
    padding: 5px 5px 9px;
    border-bottom: 2px solid #0b0f13;
    border-radius: 10px;
    transform: translate(-50%, -50%);
  }
  body.in-game .floor[data-mode="incident"] .monitor-shell::before { top: auto; right: 12px; bottom: 2px; transform: none; }
  body.in-game .floor[data-mode="incident"] .monitor-shell::after { display: none; }
  body.in-game .floor[data-mode="incident"] .monitor-shell .mission {
    height: auto;
    max-height: calc(100dvh - 34px);
    padding: 8px 14px;
    overflow-y: auto;
    border-bottom: 2px solid #0b0f13;
    border-radius: 4px;
  }
  body.in-game .floor[data-mode="incident"] .monitor-shell .mission > .read-top h2,
  body.in-game .mission > h2 { font-size: 19px; }
  /* Poca altura: pasos 1 y 2 a la izquierda y la decision a la derecha, para ver las respuestas sin desplazar. */
  .reading { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 18px; row-gap: 8px; align-items: start; }
  .read-step:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: 0; z-index: 1; padding-bottom: 4px; background: #f6f8f2; }
  .read-choices { grid-template-columns: 1fr; gap: 6px; }
  body.in-game .read-choices .choice { min-height: 44px; padding: 6px 8px; font-size: 13px; line-height: 1.3; }
  .read-question { margin-bottom: 4px; font-size: 15px; }
  .read-label { font-size: 11px; }
  .read-intro { font-size: 14px; line-height: 1.4; }
  .artifact-head { padding: 3px 10px; font-size: 12px; }
  .artifact-body { gap: 4px; padding: 8px 10px; }
  .artifact-headline { font-size: 15px; }
  .artifact-text { font-size: 13px; line-height: 1.4; }
  .artifact small { font-size: 12px; }
  .artifact .mail { padding: 6px 8px; font-size: 12px; line-height: 1.4; }
  .artifact.phone .artifact-text { padding: 6px 10px; }
  .read-top .leave { min-height: 36px; padding: 4px 10px; font-size: 12px; }
  body.in-game .floor[data-mode="incident"] .monitor-shell .mission > .read-top h2 { font-size: 17px; margin-bottom: 0; }
  body.in-game .floor[data-mode="incident"] .monitor-shell .mission .place { font-size: 11px; margin-bottom: 0; }
  body.in-game .tour-card { bottom: 8px; width: min(440px, calc(100vw - 24px)); padding: 10px 14px 8px; }
  body.in-game .tour-card.at-top { top: 52px; }
  body.in-game .tour-card h2 { font-size: 17px; }
  body.in-game .tour-card p { font-size: 14px; line-height: 1.4; }
  body.in-game .tour-actions { margin-top: 8px; }
}

/* Pantalla baja y acostada (celular, y tambien un tablet de 600 px de alto): el panel de la
   consecuencia tapaba casi la mitad del piso, justo cuando hay que mirarlo. Va aparte del
   bloque de 500 px porque el panel compacto conviene siempre que sobre poco alto, aunque el
   resto de la interfaz todavia tenga sitio.

   Se queda con lo imprescindible: el titulo y la frase del momento. El lugar se omite porque
   ya esta arriba, en la barra. El boton de saltar se sube a la esquina en vez de ocupar fila
   propia, y se queda en 44 px de alto, que es el minimo comodo para el dedo. */
@media (orientation: landscape) and (max-height: 700px) {
  body.in-game .floor[data-mode="watch"] .mission {
    /* La regla base reserva 140 px de alto minimo para que el panel no baile entre frases.
       Con poco alto eso ya es media pantalla, asi que aqui se suelta. */
    min-height: 0;
    max-height: 40vh;
    padding: 8px 12px 10px;
  }
  body.in-game .floor[data-mode="watch"] .mission > .place { display: none; }
  body.in-game .floor[data-mode="watch"] .mission > h2 {
    margin: 0 116px 3px 0;
    font-size: 15px;
    line-height: 1.25;
  }
  body.in-game .floor[data-mode="watch"] .beats {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.35;
  }
  body.in-game .floor[data-mode="watch"] .skip {
    position: absolute;
    top: 8px;
    right: 12px;
    min-height: 44px;
    margin: 0;
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* ---------- Palanca (joystick) y boton A en pantallas tactiles ---------- */
.stick-base {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #172029c4;
  border: 2px solid #52646b;
  touch-action: none;
}
.stick-base.active {
  border-color: #c6ed86;
}
.stick-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: #c6ed86;
  box-shadow: inset 0 -4px 0 #9cc56b;
}
.act-zone {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.act-caption {
  max-width: 150px;
  color: #e8edf0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 3px #0b0f13;
}
@media (hover: none), (pointer: coarse) {
  body.in-game .stick .pad,
  body.in-game .act-text {
    display: none;
  }
  body.in-game .act {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    font: 700 30px Pixel, monospace;
    box-shadow: inset 0 -5px 0 #0d2a22;
  }
  body.in-game .floor-controls {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    background: none;
    border: 0;
  }
}
/* Pantalla baja y horizontal (celular girado): mismos controles de pulgar, sin depender de la deteccion tactil. */
@media (orientation: landscape) and (max-height: 500px) {
  .stick,
  .act-letter,
  .act-caption {
    display: block;
  }
  .keys,
  body.in-game .stick .pad,
  body.in-game .act-text {
    display: none;
  }
  body.in-game .act {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    font: 700 26px Pixel, monospace;
    box-shadow: inset 0 -5px 0 #0d2a22;
  }
  body.in-game .floor-controls {
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0;
    background: none;
    border: 0;
  }
  .stick-base { width: 92px; height: 92px; }
  .stick-knob { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  body.in-game .act { width: 74px; height: 74px; font-size: 26px; }
  body.in-game .shortcuts { top: 52px; left: 8px; right: auto; bottom: auto; }
}