:root {
  color-scheme: light;
  --ink: #281b13;
  --muted: #59483a;
  --paper: #fff9ed;
  --paper-deep: #f1e2c8;
  --line: #d8b48c;
  --red: #940d2d;
  --green: #405044;
  --serif: "Times New Roman", Times, "Liberation Serif", serif;
  --sans: var(--serif);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  min-height: 100vh;
  color: var(--ink);
  background-color: #281b13;
  background-image: linear-gradient(rgba(20, 12, 8, 0.38), rgba(20, 12, 8, 0.38)), var(--chess-background-image, url("../ajedrez/assets/fondo%20reto%201%20katadoku%20ajedrez%20el%20recorrido%20del%20caballo.webp"));
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  font-family: var(--sans);
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.page { min-height: 100vh; }

.game-header {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  min-height: 78px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(93, 64, 35, 0.7);
  background: rgba(248, 233, 207, 0.96);
}

.game-heading { display: grid; justify-items: center; gap: 5px; min-width: 0; }

.game-heading h1 {
  margin: 0;
  font: 700 clamp(1.1rem, 2.5vw, 1.8rem)/1.1 var(--serif);
  text-align: center;
}

.game-timer {
  margin: 0;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  font: 600 12px/1.2 var(--sans);
  font-variant-numeric: tabular-nums;
}

.back-button, .paint-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 1px solid #c3a17b;
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.back-button svg, .paint-button svg { display: block; width: 24px; height: 24px; }
.back-button:hover, .paint-button:hover { color: var(--red); border-color: var(--red); }
.back-button:focus-visible, .paint-button:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #2677be; outline-offset: 3px; }

.paint-controls { position: relative; z-index: 5; justify-self: end; }

.paint-button[aria-expanded="true"] { background: var(--red); color: white; }

.paint-tools {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(276px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(20, 12, 8, 0.35);
  font-size: 13px;
}

.paint-close { display: none; }
.paint-width { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.paint-width input { min-width: 0; accent-color: var(--red); }
.paint-width output { font-variant-numeric: tabular-nums; }
.paint-colors { display: flex; gap: 8px; margin-top: 12px; }

.paint-color {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--paint-color);
  box-shadow: 0 0 0 1px #91775b;
  cursor: pointer;
}

.paint-color[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--red); }
.paint-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.paint-action {
  padding: 7px 9px;
  border: 1px solid #a78b6d;
  border-radius: 4px;
  background: white;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.paint-action:hover, .paint-action[aria-pressed="true"] { border-color: var(--red); background: var(--red); color: white; }

.game-layout {
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(320px, 560px) minmax(250px, 310px);
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.7vw, 24px);
  max-width: 1500px;
  min-height: calc(100vh - 78px);
  margin: 0 auto;
  padding: 24px;
}

.panel {
  border: 2px solid var(--line);
  border-radius: 9px;
  background: linear-gradient(115deg, #fff9ed, #f7ead8);
  box-shadow: 0 8px 26px rgba(36, 16, 7, 0.4), inset 0 0 0 4px #fff8eb, inset 0 0 0 5px #e8c9a6;
  color: var(--ink);
}

.challenge-panel { position: relative; padding: 8px 22px 18px; }
.chess-brand { margin: 0 auto 20px; text-align: center; }
.chess-brand-logo { display: block; width: min(100%, 190px); height: auto; margin: auto; }

.chess-brand-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #765f48;
  font: 600 13px/1.2 var(--sans);
  letter-spacing: 0.12em;
}

.chess-brand-label::before, .chess-brand-label::after { height: 1px; flex: 1; background: #c3a17b; content: ""; }
.mission-heading { margin: 0 20px 12px; font: 700 22px/1.15 var(--serif); text-align: center; }

.challenge-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.challenge-nav-arrow, .challenge-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border: 1px solid #d4ad76;
  border-radius: 4px;
  background: #faf1e3;
  color: #765f48;
}

.challenge-nav-arrow {
  width: 34px;
  padding: 0 0 2px;
  font: 27px/1 var(--serif);
  cursor: pointer;
}

.challenge-nav-arrow:hover:not(:disabled), .challenge-nav-arrow:focus-visible:not(:disabled) {
  border-color: var(--red);
  background: var(--red);
  color: white;
}

.challenge-nav-arrow:disabled { opacity: 0.4; cursor: default; }

.challenge-counter {
  min-width: 126px;
  padding: 0 12px;
  font: 700 12px/1 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.challenge-difficulty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  color: #765f48;
  font: 13px/1 var(--sans);
}

.challenge-difficulty strong { font-weight: 600; }
.challenge-dots { display: inline-flex; align-items: center; gap: 5px; }
.challenge-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(118, 95, 72, 0.28); }
.challenge-dots i.is-active { background: var(--red); }

.mission-info-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid var(--red);
  border-radius: 50%;
  background: var(--paper);
  color: var(--red);
  font: 700 16px/1 var(--serif);
  cursor: pointer;
}

.mission-info-toggle:hover, .mission-info-toggle[aria-expanded="true"] { background: var(--red); color: white; }

/* «Imprimir ficha»: icono bajo el de información, con el mismo tamaño y
   estilo (a su izquierda tocaría el logotipo). La zona pulsable se amplía sin
   cambiar su aspecto. */
.mission-print-toggle {
  position: absolute;
  top: 45px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid var(--red);
  border-radius: 50%;
  background: var(--paper);
  color: var(--red);
  cursor: pointer;
}
.mission-print-toggle::before { position: absolute; inset: -6px -8px; content: ""; }
.mission-print-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mission-print-toggle:hover { background: var(--red); color: white; }
.mission-print-toggle[aria-busy="true"] { cursor: progress; opacity: 0.6; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.mission-info-popover {
  position: absolute;
  top: 44px;
  right: 10px;
  z-index: 4;
  width: min(310px, calc(100% - 20px));
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 6px 20px rgba(36, 16, 7, 0.32);
  font-size: 14px;
  line-height: 1.45;
}

.mission-info-popover h3 { margin: 0 0 8px; font: 700 15px/1.2 var(--serif); }
.mission-info-popover ul { margin: 0; padding-left: 20px; }
.mission-info-popover li + li { margin-top: 6px; }
.intro { margin: 16px 0 0; color: var(--ink); font: 15px/1.5 var(--serif); }

.challenge-question {
  margin: 17px 0 0;
  padding: 12px 13px;
  border: 1px solid #d4ad76;
  border-radius: 6px;
  background: #faf1e3;
  font: 700 15px/1.45 var(--serif);
}

.board-shell { display: grid; place-items: center; min-width: 0; }
.board-frame { position: relative; width: min(100%, 560px); }
.board-frame img { display: block; width: 100%; height: auto; border-radius: 3px; user-select: none; }

#paintCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
}

.board-shell.is-painting #paintCanvas { pointer-events: auto; cursor: crosshair; }
.answer-panel { padding: 20px; }
.panel-title { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 700 20px/1.15 var(--sans); }
.answer-panel > p { margin: 0 0 15px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.answer-form { display: flex; gap: 9px; }

.heading-icon {
  display: inline-flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #765f48;
}

.heading-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.answer-form input {
  width: 76px;
  min-width: 0;
  min-height: 46px;
  border: 1px solid rgba(51, 42, 36, 0.55);
  border-radius: 6px;
  background: #fffdf8;
  color: var(--ink);
  text-align: center;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.answer-form button {
  flex: 1;
  min-height: 46px;
  padding: 7px 12px;
  border: 1px solid #344237;
  border-radius: 5px;
  background: var(--green);
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
}

.answer-form button:hover { background: #344237; }
.feedback { margin-top: 16px; padding: 12px 14px; border: 1px solid #6d8c6f; border-radius: 10px; background: #e9eddd; color: #281b13; font-size: 14px; line-height: 1.4; }
.error-message { display: block; border-color: var(--red); background: rgba(148, 13, 45, 0.1); color: var(--red); }
/* Tarjeta de victoria: mismo diseño en todas las modalidades (papel, título
   granate y «Compartir resultado» como acción principal). */
.success-message { display: block; width: 100%; max-width: 380px; margin: 16px auto 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: 0 4px 14px rgba(40, 27, 19, 0.12); text-align: center; }
.success-icon { display: none; }
.success-copy { display: block; }
.success-copy strong { display: block; color: #931d30; font: 400 24px/1.15 var(--serif); }
.success-detail { display: block; margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.4; }
.success-message .share-result { margin-top: 12px; }
.success-more { display: inline-block; margin-top: 4px; padding: 8px 6px; color: var(--green); font: 600 15px/1.2 var(--sans); text-decoration: underline; text-decoration-color: rgba(64, 80, 68, 0.4); text-underline-offset: 3px; }
.success-more:hover { color: #931d30; text-decoration-color: currentColor; }
.success-more:focus-visible { outline: 2px solid #931d30; outline-offset: 2px; }
.solution-box { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(102, 76, 52, 0.4); }
.solution-header { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; }
.solution-heading { display: inline-flex; align-items: center; gap: 8px; }
.solution-content { margin: 0; color: #243448; font: 14px/1.35 var(--sans); }
.solution-track { margin-top: 14px; padding: 10px 12px; border: 1px solid rgba(50, 38, 31, 0.3); border-radius: 10px; background: rgba(255, 255, 255, 0.18); }
.solution-track > strong { display: block; margin-bottom: 8px; color: #243448; font: 14px/1.35 var(--sans); }
.solution-number-grid { display: grid; grid-template-columns: repeat(3, 44px); gap: 5px; justify-content: start; }
.solution-board-cell { position: relative; display: grid; place-items: center; width: 44px; aspect-ratio: 1; border: 1px solid #d4ad76; border-radius: 4px; background: #fff9ed; color: #281b13; font: 700 14px/1 var(--sans); }
.solution-board-cell.is-occupied, .solution-board-cell.is-route { background: #faf1e3; }
.solution-piece, .solution-route-step { position: absolute; top: 1px; right: 3px; }
.solution-piece { color: #765f48; font: 13px/1 var(--serif); }
.solution-route-step {
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid #fff9ed;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 1px 3px rgba(20, 12, 8, 0.45);
  color: #fff9ed;
  font: 700 11px/1 var(--sans);
  font-variant-numeric: tabular-nums;
}
.solution-grid-result { margin: 8px 0 0; color: #243448; font: 14px/1.35 var(--sans); }
.solution-paths { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.solution-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.solution-step { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid #d4ad76; border-radius: 50%; background: #fff9ed; color: #281b13; font: 700 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.solution-arrow { color: #765f48; font: 14px/1 var(--sans); }

.countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: rgba(14, 9, 7, 0.78);
  color: #fff9ed;
}

.countdown-overlay.is-hidden { display: none; }
.countdown-value { font: 700 clamp(3.5rem, 12vw, 8rem)/1 var(--serif); text-shadow: 0 3px 20px rgba(0, 0, 0, 0.35); }

@media (max-width: 1120px) {
  .game-layout { grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr); align-items: start; max-width: 900px; min-height: 0; }
  .board-shell { grid-column: 1 / -1; grid-row: 2; }
  .board-frame { width: min(100%, 560px); }
  .answer-panel { grid-column: 2; grid-row: 1; }
}

@media (min-width: 1121px) {
  :root { --chess-title-size: max(16px, min(4.15vw, 6.2vh, 66px)); }

  .game-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 10;
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
  }

  .game-heading {
    position: absolute;
    top: max(env(safe-area-inset-top), 1.2vh);
    left: 50%;
    width: min(58vw, 920px);
    padding: 7px 1.2vw;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(248, 233, 207, 0), rgba(248, 233, 207, 0.94) 8%, #f7ead5 50%, rgba(248, 233, 207, 0.94) 92%, rgba(248, 233, 207, 0));
  }

  .game-heading h1 {
    font: 700 var(--chess-title-size)/1 var(--sans);
    letter-spacing: 0;
  }

  .back-button {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    pointer-events: auto;
  }

  .paint-controls {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: 44px;
    pointer-events: auto;
  }

  /* El título flota sobre el fondo y cambia de tamaño con la pantalla. El
     espacio superior se calcula con ese mismo tamaño (título + cronómetro +
     margen), así los paneles nunca se montan sobre él. El tablero crece hasta
     ocupar la altura disponible y el conjunto se centra en vertical. */
  .game-layout {
    --chess-top-space: calc(max(env(safe-area-inset-top), 1.2vh) + var(--chess-title-size) + 66px);
    grid-template-columns: minmax(250px, 310px) minmax(320px, 680px) minmax(250px, 310px);
    align-items: start;
    align-content: center;
    min-height: 100svh;
    margin: 0 auto;
    padding: var(--chess-top-space) 26px 32px;
  }

  .board-shell { align-items: start; padding-top: 0; }

  .board-frame { width: min(100%, 680px, max(320px, calc(100svh - var(--chess-top-space) - 32px))); }
}

@media (max-width: 680px) {
  /* Móvil: el logotipo es más pequeño y queda sitio a la izquierda del icono
     de información (debajo tocaría la línea de «AJEDREZ»). La zona pulsable
     llega a unos 44 × 44 px. */
  .mission-print-toggle { top: 12px; right: 52px; }
  .mission-print-toggle::before { inset: -10px; }
  body { background-attachment: scroll; }
  .game-header { grid-template-columns: 42px minmax(0, 1fr) 42px; min-height: 68px; padding: 8px; }
  .back-button, .paint-button { width: 40px; height: 40px; }
  .game-heading h1 { font-size: 17px; }
  .game-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px 12px 22px; }
  .challenge-panel, .answer-panel { grid-column: 1; grid-row: auto; padding: 16px; }
  .board-shell { grid-column: 1; grid-row: auto; padding: 0 2px; }
  .chess-brand-logo { width: min(100%, 165px); }
  .mission-heading { font-size: 20px; }
  .paint-tools { position: fixed; top: 8px; right: 8px; z-index: 8; max-height: calc(100dvh - 16px); padding-top: 46px; overflow-y: auto; }
  .paint-close { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--red); color: white; font: 700 26px/1 var(--sans); cursor: pointer; }
  .answer-form input { width: 82px; }
}

/* Móviles estrechos: el logotipo llega casi al borde; el icono de imprimir
   pasa a la esquina superior izquierda, simétrico al de información. */
@media (max-width: 380px) {
  .mission-print-toggle { right: auto; left: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  .panel, .board-frame { animation: arrive 450ms ease-out both; }
  .board-frame { animation-delay: 80ms; }
  @keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}
/* Descarga secundaria en el panel de respuesta. */
.chess-download-sheet { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; margin-top:16px; padding:12px 0 0; border:0; border-top:1px solid var(--line); background:transparent; color:var(--muted); font:14px var(--sans); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.chess-download-sheet img { display:block; width:18px; height:18px; object-fit:contain; }
.chess-download-sheet:hover, .chess-download-sheet:focus-visible { color:var(--red); }
.chess-download-sheet:disabled { opacity:.5; cursor:default; }
.chess-download-status { font-size:14px; color:var(--red); }
.chess-download-status:empty { display:none; }
@media(max-width:680px){ #successMessage, #errorMessage { scroll-margin-top:16px; } }

/* Fondos y paleta sin estilos en línea. */
body[data-challenge-id="2"] { --chess-background-image:url("/ajedrez/assets/fondo%20reto%202%20katadoku%20ajedrez%20las%20reinas%20pacificas.webp"); }
body[data-challenge-id="1"] { --chess-background-image:url("/ajedrez/assets/fondo%20reto%201%20katadoku%20ajedrez%20el%20recorrido%20del%20caballo.webp"); }
body[data-challenge-id="3"] { --chess-background-image:url("/ajedrez/assets/fondo%20reto%203%20katadoku%20ajedrez%20la%20formacion%20de%20torres.webp"); }
body[data-challenge-id="4"] { --chess-background-image:url("/ajedrez/assets/fondo%20reto%204%20katadoku%20ajedrez%20el%20dominio%20del%20alfil.webp"); }
body[data-challenge-id="5"] { --chess-background-image:url("/ajedrez/assets/fondo%20reto%205%20katadoku%20ajedrez%20el%20muro%20de%20peones.webp"); }
body[data-challenge-id="6"] { --chess-background-image:url("/ajedrez/assets/fondo%20reto%206%20katadoku%20ajedrez%20la%20trayectoria%20del%20rey.webp"); }
body[data-challenge-id="7"] { --chess-background-image:url("/ajedrez/assets/fondo%20reto%203%20katadoku%20ajedrez%20la%20formacion%20de%20torres.webp"); }
body[data-challenge-id="8"] { --chess-background-image:url("/ajedrez/assets/fondo%20reto%201%20katadoku%20ajedrez%20el%20recorrido%20del%20caballo.webp"); }
.paint-color-1 { --paint-color:#931d30; }
.paint-color-2 { --paint-color:#2677be; }
.paint-color-3 { --paint-color:#405044; }
.paint-color-4 { --paint-color:#c58a28; }
.paint-color-5 { --paint-color:#1e1e1b; }
.paint-color-6 { --paint-color:#ffffff; }