body { --chess-background-image: url("assets/un-trazo-el-laberinto-de-lineas-fondo.webp"); }
#routeBoard { position:absolute; inset:0; width:100%; height:100%; touch-action:manipulation; user-select:none; }
.route-hit { fill:transparent; stroke:transparent; }
.route-line { stroke:#b51f43; stroke-width:14; stroke-linecap:round; pointer-events:none; }
.route-current { fill:none; pointer-events:none; }
.reset-route { margin-top:12px; min-height:44px; }
#routeStatus { margin-top:12px; }
#rulesList { padding-left:20px; color:#185270; line-height:1.45; }
.collection { width:min(520px,calc(100% - 32px)); margin:10vh auto; padding:30px; text-align:center; }

.route-node { fill:transparent; stroke:transparent; pointer-events:all; cursor:default; }
.route-node.is-available { cursor:pointer; stroke:#b8d5a7; stroke-width:5; }
.route-node.is-available:hover, .route-node:focus-visible { fill:#fff3; stroke:#fff0a1; stroke-width:9; outline:none; }
.route-current { stroke:#e4be68; stroke-width:3; filter:drop-shadow(0 0 5px #e4be6880); }

/* Indicación de inicio: desaparece al completar el primer segmento. */
.route-start-pulse {
  fill: #ffe6a3;
  stroke: #fff0b7;
  stroke-width: 10;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: start-pulse 3s ease-in-out infinite;
}
@keyframes start-pulse {
  0%, 12%, 48%, 100% { opacity: 0; transform: scale(.96); }
  27% { opacity: .85; transform: scale(1.12); }
  37% { opacity: .25; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .route-start-pulse { animation: none; fill: none; opacity: 1; }
}

/* La zona táctil invisible crece; el contorno conserva el radio del punto. */
.route-node.is-available { stroke: transparent; }
.route-node.is-available:hover, .route-node:focus-visible { fill: transparent; stroke: transparent; }
.route-node:focus-visible { outline: 2px solid #fff0a1; outline-offset: 2px; }

.route-available-mark { fill:none; stroke:#b8d5a7; stroke-width:5; pointer-events:none; }

.mission-print-toggle img { display:block; width:20px; height:20px; object-fit:contain; }

/* La descarga ocupa el lugar del antiguo control de aclaraciones. */
.mission-print-toggle { top:12px; right:12px; left:auto; }
#resetTop svg { width:27px; height:27px; }
#routeStatus { color:var(--muted); font-size:14px; line-height:1.4; }

.mission-print-toggle:hover img,
.mission-print-toggle:focus-visible img { filter: brightness(0) invert(1); }
.mission-print-toggle:focus-visible { background: var(--red); color: white; }

.grouped-instructions strong { font-weight:700; }

.secondary-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; font-size:14px; }
.secondary-action:hover, .secondary-action:focus-visible { background:var(--paper-deep); color:var(--ink); border-color:#765f48; }
.secondary-action:disabled { opacity:.5; cursor:default; }
.secondary-action img { width:18px; height:18px; object-fit:contain; }
.download-sheet { margin-top:18px; font-size:13px; }
.game-header { grid-template-columns:48px minmax(0,1fr) 48px; }
@media(min-width:1121px){
  :root { --chess-title-size:max(16px,min(3.6vw,5.2vh,56px)); }
  .game-heading { gap:3px; padding-top:5px; padding-bottom:5px; }
  .game-layout { --chess-top-space:calc(max(env(safe-area-inset-top),1.2vh) + var(--chess-title-size) + 52px); }
}

#resetRoute { display:flex; width:auto; gap:6px; min-height:44px; padding:6px 10px; scroll-margin-top:12px; border:1px solid #ad9879; background:#fffaf0; color:var(--green); font-size:15px; font-weight:600; }
#resetRoute svg { width:20px; height:20px; flex:0 0 20px; }
#resetRoute:hover, #resetRoute:focus-visible { border-color:var(--green); background:#eee5d4; }
#resetRoute.needs-restart { border-color:var(--red); color:var(--red); background:#f9e8e4; box-shadow:0 0 0 2px #940d2d18; }
#routeStatus:empty { display:none; }
#routeStatus.is-blocked { margin:14px 0 0; padding:12px; border-left:3px solid var(--red); background:#940d2d08; color:var(--red); line-height:1.45; }
.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); border-radius:0; background:transparent; color:var(--muted); font-size:14px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.download-sheet img { width:18px; height:18px; object-fit:contain; }
.download-sheet:hover, .download-sheet:focus-visible { color:var(--red); background:transparent; }
.download-sheet:disabled { opacity:.5; cursor:default; }

@media (hover:hover) and (pointer:fine) {
  .route-node.is-available { cursor:url("assets/cursor-plumilla.svg") 4 28, pointer; }
}

@media(max-width:680px){ #successMessage { scroll-margin-top:16px; } }

body[data-challenge-id="1"] { --chess-background-image:url("assets/un-trazo-el-laberinto-de-lineas-fondo.webp"); }
body[data-challenge-id="2"] { --chess-background-image:url("assets/un-trazo-la-casa-imposible-fondo.webp"); }

body[data-challenge-id="3"] { --chess-background-image:url("assets/un-trazo-el-castillo-de-los-caminos-fondo.webp"); }

path.route-line { fill:none; stroke-linejoin:round; }

body[data-challenge-id="4"] { --chess-background-image:url("assets/un-trazo-cuadrados-cruzados-fondo.webp"); }
.solution-subtitle { margin:12px 0 7px; font-size:16px; }
.solution-curiosity { margin-top:15px; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.45; }
.solution-curiosity h4 { margin:0 0 5px; font-size:14px; }
.solution-curiosity p { margin:0; }

/* Conexiones dibujadas sobre la imagen original del quinto reto. */
body[data-challenge-id="5"] { --chess-background-image:url("assets/un-trazo-la-estrella-atrapada-fondo.webp"); }
.route-connection { stroke:#281b13; stroke-width:12; stroke-linecap:round; pointer-events:none; }

/* Párrafos más legibles sin cambiar los tamaños de botones o navegación. */
.answer-panel > p,
#routeStatus,
.solution-content { font-size:15px; }
.solution-curiosity { font-size:14px; }

/* Herramienta del tablero en el flujo normal, compartida por todos los retos. */
.board-shell{align-content:start;row-gap:2px;}
.board-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;width:min(100%,560px);}
#routeStatusMobile{display:none;}
@media(min-width:1121px){
  .board-controls{width:min(100%,680px,max(320px,calc(100svh - var(--chess-top-space) - 32px)));}
}
@media(max-width:680px){
  .challenge-panel{padding-top:12px;padding-bottom:12px;}
  .challenge-panel .chess-brand{margin-bottom:12px;}
  .challenge-panel .challenge-difficulty{margin-top:10px;}
  .challenge-panel .mission-heading{margin-bottom:8px;}
  .challenge-panel .intro{margin-top:10px;}
  #routeStatusMobile.is-blocked{display:block;flex-basis:100%;margin:0;padding:10px 12px;border-left:3px solid var(--red);background:#fff9ed;color:var(--red);font-size:15px;line-height:1.4;}
}

/* Ajustes de composición exclusivos de escritorio; tablet y móvil conservan su layout. */
@media(min-width:1121px){
  .game-heading{padding-top:5px;padding-bottom:5px;}
  .game-heading h1{font-size:calc(var(--chess-title-size) * .9);}
  .board-shell{row-gap:0;}
  .board-controls{margin-bottom:-8px;}
  .answer-panel{position:relative;left:-8px;}
}