/* La isla ocupa la pantalla. Los controles del turno viven en el embarcadero. */
:root {
  --lagoon-ink: #123d3c;
  --lagoon-dark: #092f34;
  --lagoon-foam: #d9ebe0;
  --parchment: #fdf7e9;
}

#gameScreen {
  --dock-size: clamp(66px, 10dvh, 88px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) var(--dock-size);
  background: var(--lagoon-dark);
}
#gameScreen.choosing-route { --dock-size: 126px; }
.game-header {
  display: flex;
  justify-content: space-between;
  min-height: 56px;
  gap: 8px;
  padding: 5px clamp(9px, 2.3vw, 24px);
  background: #123c40;
  border-bottom: 1px solid #bbddc445;
}
.game-header .world-title { flex: 1; min-width: 0; gap: 0; line-height: 1.22; }
.world-title #worldName { font-size: clamp(13px, 2.3vw, 20px); letter-spacing: -.025em; }
.game-header .header-right { gap: clamp(4px, 1.2vw, 12px); flex-shrink: 0; }
.game-header .header-right .icon-btn { width: 42px; height: 42px; border-radius: 13px; }
.game-header .piece-meter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 42px;
  border: 1px solid #f9df9548;
  border-radius: 24px;
  background: #062b3188;
  gap: 2px;
  padding: 1px 7px 1px 3px;
  color: #ffeac1;
  cursor: default;
}
.game-header .piece-meter > svg { width: 36px; height: 36px; }
.game-header .compass-count { color: inherit; background: none; border: 0; padding: 0; font-size: 11px; }
.board-area { min-height: 0; isolation: isolate; }
.board-area .turn-bubble { font-size: 14px; }
.board-area .camera-button {
  position: absolute;
  top: 10px;
  right: clamp(8px, 2vw, 20px);
  left: auto;
  bottom: auto;
  min-height: 40px;
  padding: 4px 11px;
  color: #f3fff4;
  background: #123c40ed;
  border: 1px solid #d3eacf76;
  box-shadow: 0 3px 7px #052e3d45;
}
.board-area .camera-button svg { width: 19px; height: 19px; }
.board-area .camera-button span { font-size: 12px; }
.game-dock {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(6px, 2vw, 18px);
  padding: 4px clamp(9px, 2.8vw, 34px) 9px;
  background: #123c40;
  border-top: 1px solid #92c4b069;
  box-shadow: 0 -6px 20px #06283028;
}
.game-dock .roll-wrap { grid-column: 2; }
.game-dock .roll-main {
  padding-block: 4px;
  margin: 0;
  min-height: 50px;
  min-width: min(44vw, 200px);
  justify-content: center;
  border-radius: 18px;
}
.game-dock #rollLabel { font-size: clamp(14px, 2.8vw, 19px); min-width: 0; }
.dock-tools { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.dock-tool {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 9px;
  background: #0b2f34;
  border: 1px solid #c4e5d55c;
  border-radius: 13px;
  color: #ebf7ed;
  font-weight: 800;
  font-size: 13px;
}
.dock-tool svg { width: 24px; height: 24px; }
.dock-mission {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffdf91;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
.dock-mission svg { width: 20px; height: 20px; }
.kit-popover { margin-top: 12px; }
.kit-popover .event-option small { font-size: 12px; }
.rival-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.rival-list li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  text-align: left;
  padding: 4px 10px;
  gap: 7px;
  border-radius: 10px;
  background: #eaf0df;
}
.rival-list .avatar-sprite { height: 37px; }
.rival-list small { font-weight: 800; }

.overlay {
  background: #082f38ad;
  backdrop-filter: blur(2px);
}
.overlay.route-overlay {
  align-items: flex-end;
  padding: 0 8px 8px;
  background: none;
  backdrop-filter: none;
}
.route-overlay .modal {
  width: min(620px, 100%);
  max-height: none;
  border: 1px solid #eed6aa;
  border-radius: 20px;
  background: #fff7e4;
  box-shadow: 0 7px 16px #051d26a8;
  animation: none;
}
.route-tray { padding: 9px clamp(8px, 2.5vw, 17px) 11px; }
.route-tray h2 {
  margin: 0 0 7px;
  font-size: clamp(15px, 3vw, 19px);
  text-align: center;
  color: var(--lagoon-ink);
}
.route-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.route-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(5px, 1.7vw, 10px);
  min-height: 58px;
  padding: 5px 8px;
  border: 1px solid #c7d8cc;
  border-radius: 12px;
  background: #ecf3e5;
  text-align: left;
  color: #1a473d;
  box-shadow: 0 2px 0 #bad0bb;
}
.route-action.forward {
  color: #533814;
  border-color: #e4bb5b;
  background: #ffdf8b;
  box-shadow: 0 2px 0 #d8ae51;
}
.route-action:hover { filter: brightness(1.035); }
.route-action svg { width: clamp(19px, 4.2vw, 30px); height: clamp(19px, 4.2vw, 30px); }
.route-action b { display: block; font-size: clamp(12px, 2.9vw, 17px); }
.route-action small { display: block; font-size: clamp(10px, 2.45vw, 13px); line-height: 1.15; margin-top: 3px; }
.choosing-route .game-dock { visibility: hidden; }
.choosing-route .camera-button { visibility: hidden; }

.modal:has(.field-trial) {
  width: min(880px, 100%);
  background: var(--parchment);
  border-radius: 22px;
  box-shadow: 0 4px 0 #223e33, 0 22px 80px #031a29a1;
}
.modal:has(.field-trial) > .modal-inner { padding: 0; }
.field-trial {
  --sea: #76bdbb;
  --land: #cddf9f;
  --land-edge: #a0bf89;
  --land-light: #e6eac0;
  --tile-ink: #274b3d;
  display: grid;
  grid-template-columns: minmax(170px, .75fr) minmax(250px, 1.25fr);
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
  padding: clamp(24px, 5vw, 46px) clamp(18px, 4vw, 40px);
  color: #174743;
}
.field-trial.terrain-1 { --sea: #8fc5bb; --land: #e7ca8a; --land-edge: #c6a768; --land-light: #f4dfa9; }
.field-trial.terrain-2 { --sea: #74bbb9; --land: #b4d6a7; --land-edge: #81ad8e; --land-light: #d6e7bb; }
.field-trial.terrain-3 { --sea: #80b6c2; --land: #cde5db; --land-edge: #94bdb8; --land-light: #e7efdf; }
.field-brief { min-width: 0; text-align: left; }
.field-brief h2#modalTitle { font-size: clamp(24px, 4.4vw, 38px); margin: 0; line-height: 1.04; text-wrap: balance; }
.field-brief p { margin: 9px 0; font-size: clamp(14px, 2.2vw, 18px); line-height: 1.35; color: #375f55; }
.field-stage { display: block; font-size: 12px; font-weight: 850; color: #6d5b37; margin-bottom: 6px; }
.field-map {
  display: grid;
  grid-template: "top top" auto "left map" 1fr / auto minmax(0, 1fr);
  width: min(100%, 420px);
  margin: auto;
  padding: 8px;
  background: #286d70;
  border: 2px solid #49908a;
  border-radius: 18px;
  box-shadow: 0 4px 0 #164b4b;
}
.field-grid {
  grid-area: map;
  display: grid;
  grid-template-columns: repeat(var(--cells), minmax(0, 1fr));
  gap: 3px;
}
.field-axis-x, .field-axis-y {
  color: #ffefd5;
  font-size: clamp(12px, 2.1vw, 15px);
  font-weight: 900;
  display: grid;
  align-items: center;
  text-align: center;
}
.field-axis-x { grid-area: top; grid-template-columns: repeat(var(--cells), minmax(0, 1fr)); padding: 1px 0 4px 18px; }
.field-axis-y { grid-area: left; grid-template-rows: repeat(var(--cells), minmax(0, 1fr)); padding-right: 6px; min-width: 18px; }
.field-cell {
  aspect-ratio: 1;
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--land-edge);
  border-bottom-width: 3px;
  border-radius: clamp(6px, 1.8vw, 13px);
  background: radial-gradient(ellipse at 14% 15%, #ffffff45 0 9%, transparent 10%),
    linear-gradient(140deg, var(--land-light), var(--land));
  color: var(--tile-ink);
  isolation: isolate;
}
.field-cell:disabled { opacity: .86; }
.field-cell:not(:disabled):hover { filter: brightness(1.09); }
.field-cell.current, .field-cell.visited, .field-cell.guided, .field-cell.water, .field-cell.mistaken { opacity: 1; }
.field-cell.current { border-color: #f2c261; box-shadow: inset 0 0 0 2px #ffeaad; }
.field-cell.visited { background: #e5d3a2; }
.field-cell.destination { background: #e3e9ad; box-shadow: inset 0 0 0 2px #f8f0bf; }
.field-cell.guided { border-color: #f3cc65; box-shadow: inset 0 0 0 3px #ffe69c; }
.field-cell.mistaken { border-color: #ab674f; background: #e7bca1; }
.field-cell.water {
  border-color: #4c929c;
  background: repeating-linear-gradient(-15deg, #99d5d299 0 2px, transparent 2px 12px), var(--sea);
}
.field-cell .study-sprite { width: 74%; height: auto; aspect-ratio: 1; border-radius: 0; }
.field-player { position: absolute; width: 88%; height: 88%; z-index: 2; filter: drop-shadow(0 2px 2px #2b5130aa); }
.field-player .avatar-sprite { filter: none; }
.field-mark { width: 25%; aspect-ratio: 1; border-radius: 50%; background: #996d39aa; box-shadow: 0 0 0 4px #fff2c08c; }
.field-symbol { font-size: clamp(20px, 5vw, 35px); font-weight: 900; line-height: 1; }
.field-footprints { position: absolute; inset: 10%; display: grid; place-items: center; pointer-events: none; }
.field-footprints i { position: absolute; width: 19%; height: 30%; border-radius: 65%; background: #6b4e28; transform: rotate(18deg); }
.field-footprints i:first-child { left: 24%; top: 24%; }
.field-footprints i:last-child { right: 24%; bottom: 20%; }
.field-cell.destination .field-footprints { inset: 0 55% 60% 0; }
.field-cell.contour {
  background: repeating-radial-gradient(ellipse at 70% 12%, transparent 0 8px, #946c3c36 9px 10px, transparent 11px 15px),
    hsl(calc(84 - var(--height-tone) * 19) 45% calc(81% - var(--height-tone) * 6%));
}
.field-cell.contour .study-sprite { align-self: start; width: 62%; }
.field-height {
  position: absolute;
  z-index: 3;
  inset: auto 0 2px;
  width: fit-content;
  margin: auto;
  padding: 1px 3px;
  border-radius: 5px;
  background: #fff6dce8;
  color: #3c4129;
  font-size: clamp(11px, 2.7vw, 15px);
  font-weight: 900;
}
.field-legend, .field-itinerary, .field-measure {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  list-style: none;
  margin: 9px 0 0;
}
.field-legend > span, .field-itinerary > li, .field-measure {
  background: #e8f0df;
  border: 1px solid #cedec8;
  border-radius: 10px;
}
.field-legend > span { display: inline-flex; gap: 5px; align-items: center; padding: 4px 6px; font-size: clamp(11px, 2.2vw, 14px); }
.field-legend b { font-size: 18px; }
.field-itinerary > li {
  display: inline-grid;
  justify-items: center;
  min-width: 37px;
  padding: 3px 7px;
  font-weight: 850;
}
.field-itinerary b { font-size: 23px; line-height: 1; }
.field-itinerary small { margin-top: 3px; font-size: 11px; }
.field-itinerary .now { background: #ffe7a4; border-color: #dbb757; }
.field-itinerary .done { opacity: .52; }
.field-measure { width: fit-content; padding: 5px 9px; font-size: clamp(12px, 2.5vw, 15px); gap: 10px; }
.field-scale { border-bottom: 3px solid #557c5f; padding-bottom: 2px; }
.field-landmark-cue { display: flex; align-items: center; gap: 6px; }
.field-landmark-cue .study-sprite { width: 60px; height: 60px; }
.field-landmark-cue b { font-size: 32px; }
.field-progress { display: flex; gap: 6px; margin-top: 12px; }
.field-progress i { width: 19px; height: 5px; border-radius: 5px; background: #d8dfcb; }
.field-progress i.done { background: #558b6b; }
.field-brief .field-feedback { color: #6c481c; font-weight: 800; font-size: 13px; }
.field-actions { display: flex; justify-content: center; margin-top: 8px; }
.field-actions .secondary { min-height: 41px; font-size: 13px; padding: 6px 10px; }

.modal:has(.picture-trial) { width: min(550px, 100%); }
.picture-trial h2#modalTitle { font-size: clamp(21px, 5vw, 33px); margin-top: 0; padding: 0 24px; }
.picture-clue { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 5px auto 9px; }
.picture-clue > .study-sprite { width: clamp(63px, 17vw, 112px); height: clamp(63px, 17vw, 112px); }
.picture-clue > b { font-size: 27px; color: #426d57; }
.picture-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; width: min(100%, 390px); margin: auto; }
.picture-choices button {
  min-width: 0;
  min-height: 64px;
  aspect-ratio: 1.15;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 2px solid #ceddcb;
  border-radius: 16px;
  background: #f4fae9;
  box-shadow: 0 3px 0 #d8e5cc;
}
.picture-choices button .study-sprite { width: 90%; height: auto; aspect-ratio: 1; }
.picture-choices button.wrong { background: #f0d9c4; opacity: .62; }
.picture-choices button.suggested { outline-offset: -3px; }
.quick-reward { display: grid; justify-items: center; gap: 8px; }
.quick-reward .reward-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: #875d21; background: #ffe5a4; }
.quick-reward .reward-icon svg { width: 36px; height: 36px; }
.quick-reward h2#modalTitle { margin: 0; }
.quick-reward .reward-fact { margin: 0; line-height: 1.35; }
.quick-reward .reward-next { margin-top: 3px; }

@media (max-width: 650px) and (orientation: portrait) {
  .game-header { min-height: 49px; }
  .game-header .header-right .icon-btn { width: 40px; height: 40px; }
  .game-dock { grid-template-columns: minmax(40px, 1fr) auto minmax(34px, 1fr); }
  .dock-tools { gap: 5px; }
  .dock-tool { padding: 4px; }
  .dock-tool span { display: none; }
  .dock-mission { font-size: 12px; }
  .overlay:not(.route-overlay) { padding: 10px; }
  .modal { max-height: calc(100dvh - 20px); }
  .field-trial { grid-template-columns: minmax(0, 1fr); padding: 15px 12px 14px; gap: 10px; }
  .field-brief { padding-right: 32px; }
  .field-brief h2#modalTitle { font-size: clamp(21px, 5.8vw, 28px); }
  .field-brief p { font-size: 14px; margin: 5px 0; }
  .field-trial .field-map { max-width: 365px; }
  .trial-tracks .field-brief { text-align: center; padding-left: 24px; }
  .trial-tracks .field-progress { justify-content: center; }
}
@media (max-width: 370px) {
  .game-dock .roll-main { min-width: 127px; }
  .dock-tool { min-width: 39px; }
  .dock-tools { gap: 3px; }
  .game-dock .roll-arrow { display: none; }
}
@media (max-height: 530px) and (orientation: landscape) {
  #gameScreen { --dock-size: 62px; }
  #gameScreen.choosing-route { --dock-size: 100px; }
  .game-header { min-height: 43px; }
  .game-header .header-right .icon-btn { width: 36px; height: 36px; }
  .game-header .piece-meter { height: 35px; }
  .game-header .piece-meter > svg { width: 30px; height: 30px; }
  .game-dock .roll-main { min-height: 42px; }
  .route-tray { padding-top: 5px; padding-bottom: 7px; }
  .route-tray h2 { margin-bottom: 3px; }
  .route-action { min-height: 49px; }
  .field-trial { gap: 17px; padding: 15px 23px; }
  .field-map { width: min(100%, calc(100dvh - 106px), 310px); padding: 5px; }
  .field-trial.trial-scale .field-map, .field-trial.trial-relief .field-map { width: min(100%, calc(100dvh - 132px), 290px); }
  .field-actions { margin-top: 5px; }
  .field-actions .secondary { min-height: 37px; }
  .picture-clue > .study-sprite { width: 70px; height: 70px; }
  .picture-choices { width: min(100%, 245px); }
}

#setupRace {
  margin-top: 14px;
  padding: 8px 10px;
  border: 1px solid #d4e0cc;
  border-radius: 13px;
  background: #f2f4e4;
}
#setupRace summary { padding: 3px; cursor: pointer; font-size: 14px; font-weight: 850; }
#setupRace .banter-toggle { margin-block: 7px 0; }
.field-landmark-cue { display: grid; grid-template: ". up ." 24px "left camp right" 60px ". down ." 24px / 24px 60px 24px; align-items: center; justify-items: center; gap: 0; }
.field-landmark-cue .study-sprite { grid-area: camp; }
.field-landmark-cue[data-direction="0"] b { grid-area: up; }
.field-landmark-cue[data-direction="1"] b { grid-area: right; }
.field-landmark-cue[data-direction="2"] b { grid-area: down; }
.field-landmark-cue[data-direction="3"] b { grid-area: left; }
.field-itinerary strong { font-size: clamp(11px, 2.5vw, 16px); }
.field-compass {
  display: grid;
  grid-template: ". n ." auto "o rose e" auto ". s ." auto / repeat(3, 1fr);
  width: 67px;
  margin-top: 8px;
  align-items: center;
  justify-items: center;
  color: #2d6d65;
  font-size: 12px;
  line-height: 1.1;
}
.field-compass > :nth-child(1) { grid-area: n; }
.field-compass > :nth-child(2) { grid-area: o; }
.field-compass > :nth-child(3) { grid-area: rose; font-size: 25px; }
.field-compass > :nth-child(4) { grid-area: e; }
.field-compass > :nth-child(5) { grid-area: s; }
.picture-clue svg { width: 54px; height: 54px; color: #477867; }
.pairs-trial .picture-choices { max-width: 324px; }
.pairs-trial .picture-choices button { position: relative; aspect-ratio: 1.35; }
.pairs-trial .picture-choices .study-sprite { width: 70%; }
.pairs-trial .picked { border-color: #cb9a3a; box-shadow: inset 0 0 0 2px #f1c865; }
.pairs-trial .paired { opacity: .76; background: #e1efcd; }
.pairs-trial .paired > b { position: absolute; right: 7px; top: 5px; color: #20603c; }
@media (max-width: 650px) and (orientation: portrait) {
  .field-landmark-cue { grid-template: ". up ." 15px "left camp right" 38px ". down ." 15px / 20px 38px 20px; }
  .field-landmark-cue .study-sprite { width: 38px; height: 38px; }
  .field-landmark-cue b { font-size: 24px; }
  .field-compass { position: absolute; right: 14px; top: 65px; width: 48px; font-size: 10px; }
  .field-compass > :nth-child(3) { font-size: 18px; }
  .trial-bearings .field-brief { padding-right: 60px; }
}
@media (max-height: 530px) and (orientation: landscape) {
  .pairs-trial .picture-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 415px); max-width: none; }
}
.field-cell.river {
  border-radius: 5px;
  border-color: #5b9f9f;
  background: repeating-linear-gradient(-16deg, #e4fbeb72 0 1px, transparent 2px 11px), var(--sea);
}
.field-cell.river.mistaken { border-color: #d18468; background-color: #c8937f; }
.field-cell.place-bridge .field-symbol {
  padding: 4px 9px;
  border-radius: 5px;
  background: #f6dda3;
  box-shadow: 0 2px 0 #9a774c;
}
.field-cell.place-tree {
  background: radial-gradient(ellipse at 35% 34%, #8aad7770 0 11%, transparent 12%),
    radial-gradient(ellipse at 62% 64%, #78a77660 0 13%, transparent 14%),
    linear-gradient(140deg, var(--land-light), #b4d29c);
}
.field-cell.place-tree.mistaken { background: #e7bca1; }