/*
 * Overrides for "La hora" (reloj/). The shared look, the hud/stage/pad grid
 * and the background live in shared/shell.css - only the clock, the answer
 * cards and the question line are defined here.
 *
 * Same calm family as puzles/ and minisudoku/: a cream face in a deep
 * purple rim. The hands differ by length, width AND colour (short thick
 * purple hour hand, long thin pink minute hand), never by colour alone.
 */

:root {
  --rl-frame: #6f4a86;
  --rl-ink: #553669;
  --rl-face: #fbf2e2;
  --rl-minute: #e74b61;
  --rl-good: #3cb54a;
  --rl-bad: #d8433e;
  --rl-hint: #e8912e;
}

/* the site-wide feedback bubble (fixed bottom-left) would sit on the cards */
body:has(#screen-game:not([hidden])) .am-fb-fab { display: none; }

/* ---- start screen ---- */
.start-hint {
  margin: -6px 0 0;
  max-width: 34ch;
  font-size: clamp(15px, 3.6vw, 19px);
  line-height: 1.25;
  color: var(--purple-dark);
  opacity: .9;
}
.rl-start-clock { width: min(150px, 34vw, 22vh); }
.rl-start-clock .rl-clock { display: block; width: 100%; height: auto; }

/* ---- the clock ---- */
.rl-clock-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rl-clock-main {
  /* sized to a square by game.js fitClock() */
  display: block;
  flex: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.rl-clock.is-draggable { cursor: grab; }
.rl-clock[class*="is-dragging"] { cursor: grabbing; }
.rl-face { fill: var(--rl-face); }
.rl-rim { fill: none; stroke: var(--rl-frame); stroke-width: 6; }
.rl-rim.is-good { animation: rlRim .9s ease-out; stroke: var(--rl-good); }
.rl-rim.is-bad { animation: rlRim .9s ease-out; stroke: var(--rl-bad); }
.rl-band { fill: rgba(60, 181, 74, .1); }
.rl-tick { stroke: rgba(111, 74, 134, .45); stroke-width: 1.2; stroke-linecap: round; }
.rl-tick-long { stroke: var(--rl-frame); stroke-width: 2.6; }
.rl-num { font-size: 21px; fill: var(--rl-ink); font-weight: bold; }
.rl-ring-num { font-size: 10px; fill: rgba(111, 74, 134, .75); font-family: var(--am-readable-font); font-weight: 700; }
.rl-hand line { stroke-linecap: round; }
.rl-hand-hour line { stroke: var(--rl-ink); stroke-width: 9; }
.rl-hand-minute line { stroke: var(--rl-minute); stroke-width: 5; }
.rl-hub { fill: var(--rl-ink); stroke: #fff; stroke-width: 2; }
.rl-hand { transform-box: view-box; }
/* "move me": the hands that can move wiggle a little at the start of a
   set round, a short burst every couple of seconds, until the child
   touches the clock (Clock.hint). The minute hand starts a beat later so
   the two read as separate things to grab. */
.rl-wiggle { transform-box: view-box; transform-origin: 120px 120px; }
.rl-clock.is-hinting .rl-hand:not(.is-locked) .rl-wiggle { animation: rlWiggle 2.4s ease-in-out infinite; }
.rl-clock.is-hinting .rl-hand:not(.is-locked) .rl-wiggle-late { animation-delay: .5s; }
@keyframes rlWiggle {
  0%, 40%, 100% { transform: rotate(0); }
  8% { transform: rotate(-7deg); }
  16% { transform: rotate(6deg); }
  24% { transform: rotate(-4deg); }
  32% { transform: rotate(2deg); }
}
.rl-hand.is-pulse line { animation: rlHand 1.1s ease-in-out; }
.rl-clock.is-dragging-hour .rl-hand-hour line,
.rl-clock.is-dragging-minute .rl-hand-minute line { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)); }
.rl-clock.is-dragging-hour .rl-hand-hour line { stroke-width: 11; }
.rl-clock.is-dragging-minute .rl-hand-minute line { stroke-width: 7; }

@keyframes rlRim { 0% { stroke-width: 6; } 30% { stroke-width: 11; } 100% { stroke-width: 6; } }
@keyframes rlHand {
  0%, 100% { stroke-opacity: 1; }
  25%, 75% { stroke-opacity: .35; }
  50% { stroke-opacity: 1; }
}

/* ---- the question line (swaps to say why after an answer) ---- */
.rl-line {
  flex: none;
  margin: 0;
  /* room for the longest "why" line (3 lines), so the clock never resizes */
  min-height: 3.7em;
  max-width: 34ch;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(18px, 4.4vw, 24px);
  line-height: 1.2;
  color: var(--purple-dark);
  text-shadow: 1px 1px 0 #fff;
}
.rl-line.is-why { color: #a0451c; font-size: clamp(16px, 4vw, 21px); }
.rl-line.is-good { color: #2a7d35; }

/* ---- pad: COMPROBAR, or four answer cards ---- */
.rl-pad {
  width: min(100%, 520px);
  /* the cards' height, also kept for COMPROBAR rounds: the clock stays put */
  min-height: 142px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.rl-check { min-width: 220px; }
.rl-check[hidden], .rl-cards[hidden], .rl-keys-hint[hidden] { display: none; }
.rl-keys-hint {
  margin: 0;
  font-family: var(--am-readable-font);
  font-size: 12px;
  color: var(--purple-dark);
  opacity: .75;
}
@media (hover: none) { .rl-keys-hint { display: none; } }

.rl-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
/* the same four colours as the race's 4-choice answers (carrera/) */
.rl-card {
  min-height: 64px;
  padding: 8px 10px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: transform .1s, opacity .2s;
}
.rl-card:nth-child(1) { background: #e2574f; box-shadow: 0 5px 0 #a93228; }
.rl-card:nth-child(2) { background: #3f86c9; box-shadow: 0 5px 0 #275e93; }
.rl-card:nth-child(3) { background: #f2b630; box-shadow: 0 5px 0 #b9821a; color: #3a2a05; }
.rl-card:nth-child(4) { background: #3cae4f; box-shadow: 0 5px 0 #26803a; }
.rl-card:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.rl-card-words { font-size: clamp(15px, 3.8vw, 19px); line-height: 1.1; }
.rl-card-digital { font-family: var(--am-readable-font); font-weight: 700; font-size: 13px; opacity: .85; }
.rl-card:disabled { cursor: default; opacity: .45; }
.rl-card.is-right { opacity: 1; outline: 4px solid #fff; outline-offset: 2px; animation: rlCheer .5s ease-out; }
.rl-card.is-wrong { opacity: .75; outline: 4px dashed #fff; outline-offset: -6px; }
@keyframes rlCheer { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.06); } }

/* phones: give the clock the room - shorter line, tighter gaps */
@media (max-height: 700px) {
  .stage-area { gap: 6px; }
  .rl-line { min-height: 3.6em; font-size: 16px; }
  .rl-card { min-height: 52px; }
  .rl-pad { min-height: 118px; }
}

/* landscape: the cards stack in the side column */
@media (min-width: 640px) and (orientation: landscape) {
  .rl-cards { grid-template-columns: 1fr; }
  .rl-pad { align-self: center; min-height: 0; }
}

/* phone on its side: the line + feedback live in the side column (game.js
   placeLine), the clock fills the stage */
@media (orientation: landscape) and (max-height: 500px) {
  .rl-clock-wrap { min-height: 150px; }
  .rl-pad { min-height: 0; }
  .rl-pad .rl-line { min-height: 0; font-size: 15px; max-width: 26ch; }
  .rl-pad .feedback { min-height: 34px; margin: -4px 0; }
  .rl-pad .feedback img { width: 28px; }
  .rl-pad .feedback span { font-size: 20px; }
  .rl-cards { gap: 6px; }
  .rl-card { min-height: 40px; padding: 4px 8px; }
  .rl-card-digital { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rl-rim.is-good, .rl-rim.is-bad, .rl-hand.is-pulse line, .rl-card.is-right { animation: none; }
  /* no wiggle: a still glow says the same thing */
  .rl-clock.is-hinting .rl-hand:not(.is-locked) .rl-wiggle { animation: none; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #fff); }
}

/* =====================================================================
 * Games 2 and 3 share index.html with Pon la hora: game.js sets
 * <html data-rl-game="ponlahora|gemelos|parejas"> and each game's own
 * markup is shown only under its name.
 * ===================================================================== */
html:not([data-rl-game="gemelos"]) .rl-gm-only,
html:not([data-rl-game="parejas"]) .rl-pj-only,
html[data-rl-game="gemelos"] .rl-ph-only,
html[data-rl-game="parejas"] .rl-ph-only { display: none !important; }

html[data-rl-game="gemelos"] .rl-line,
html[data-rl-game="parejas"] .rl-line {
  min-height: 2.5em;
  font-size: clamp(15px, 3.8vw, 19px);
  max-width: 36ch;
}
html[data-rl-game="gemelos"] .rl-line.is-why,
html[data-rl-game="parejas"] .rl-line.is-why { font-size: clamp(15px, 3.8vw, 19px); }

/* ---- Relojes gemelos: clocks + digital in the stage, words in the pad ---- */
.gm-board {
  flex: none;
  width: min(100%, 470px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gm-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.gm-card {
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: var(--rl-ink);
  box-shadow: 0 4px 0 rgba(111, 74, 134, .28);
  font: inherit;
  cursor: pointer;
  outline: 4px solid transparent;
  outline-offset: 0;
  transition: transform .1s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.gm-card-clocks { aspect-ratio: 1; padding: 4px; }
.gm-card-clocks .rl-clock { display: block; width: 100%; height: 100%; pointer-events: none; }
.gm-card-digital {
  min-height: 52px;
  font-family: var(--am-readable-font);
  font-weight: 800;
  font-size: clamp(22px, 6vw, 30px);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.gm-words {
  width: min(100%, 520px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gm-card-words {
  min-height: 50px;
  padding: 6px 12px;
  font-size: clamp(15px, 3.9vw, 18px);
  line-height: 1.15;
}
.gm-card:active { transform: translateY(2px); }
.gm-card.is-picked { outline-color: var(--rl-frame); background: #f3e9fa; transform: translateY(-2px); }
.gm-card.is-right { outline-color: var(--rl-good); background: #e8f7ea; }
.gm-card.is-wrong { outline: 4px dashed var(--rl-bad); background: #fdeceb; }
.gm-card:disabled { cursor: default; }

/* ---- Parejas de tiempo: the interval directly above the choices ---- */
html[data-rl-game="parejas"] .game-screen {
  grid-template-areas: "hud" "stage";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}
html[data-rl-game="parejas"] .pad-area { display: none; }
.pj-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.pj-ask {
  margin: 0;
  font-size: clamp(16px, 4vw, 20px);
  color: var(--purple-dark);
  text-shadow: 1px 1px 0 #fff;
}
.pj-target {
  font-family: var(--am-readable-font);
  font-weight: 800;
  font-size: clamp(28px, 8vw, 40px);
  color: #fff;
  background: var(--rl-frame);
  border-radius: 16px;
  padding: 2px 20px 4px;
  box-shadow: 0 4px 0 #4b2f5c;
  white-space: nowrap;
}
.pj-note[hidden] { display: none; }
.pj-note {
  margin: 0;
  font-family: var(--am-readable-font);
  font-size: 14px;
  color: var(--purple-dark);
}
.pj-grid {
  flex: none;
  width: min(100%, 470px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.pj-tile {
  min-height: 54px;
  padding: 4px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: var(--rl-ink);
  box-shadow: 0 4px 0 rgba(111, 74, 134, .28);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  outline: 4px solid transparent;
  transition: transform .1s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.pj-grid.has-parts .pj-tile { min-height: 62px; }
.pj-time {
  font-family: var(--am-readable-font);
  font-weight: 800;
  font-size: clamp(20px, 5.4vw, 26px);
  font-variant-numeric: tabular-nums;
}
.pj-part {
  font-family: var(--am-readable-font);
  font-size: 12px;
  line-height: 1.1;
  color: #7a5a8e;
}
.pj-part:empty { display: none; }
.pj-tile:active { transform: translateY(2px); }
.pj-tile.is-picked { outline-color: var(--rl-frame); background: #f3e9fa; transform: translateY(-2px); }
.pj-tile.is-right { outline-color: var(--rl-good); background: #e8f7ea; }
.pj-tile.is-wrong { outline: 4px dashed var(--rl-bad); background: #fdeceb; }
.pj-tile:disabled { cursor: default; }
.pj-tile.is-hinted {
  background: #fbd7d9;
  transition: background 1.6s ease-in-out;
  animation: pj-hint-wiggle 1.6s ease-in-out 2;
}
@keyframes pj-hint-wiggle {
  0%, 34%, 66%, 100% { transform: translateX(0); }
  43% { transform: translateX(-3px) rotate(-1deg); }
  56% { transform: translateX(3px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pj-tile.is-hinted { animation: none; transition: none; }
}

/* start screen: a worked example instead of the little clock */
.pj-example { display: flex; align-items: center; gap: 8px; }
.pj-ex-tile {
  font-family: var(--am-readable-font); font-weight: 800; font-size: 22px;
  background: #fff; color: var(--rl-ink); border-radius: 12px; padding: 6px 12px;
  box-shadow: 0 3px 0 rgba(111, 74, 134, .28);
}
.pj-ex-gap {
  font-family: var(--am-readable-font); font-weight: 800; font-size: 15px;
  color: #fff; background: var(--rl-frame); border-radius: 999px; padding: 3px 10px;
}

@media (min-width: 640px) and (orientation: landscape) {
  .pj-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 560px); }
  .gm-words { align-self: center; }
}

/* phone on its side: smaller cards, tighter rows */
@media (orientation: landscape) and (max-height: 500px) {
  html[data-rl-game="gemelos"] .stage-area,
  html[data-rl-game="parejas"] .stage-area { gap: 6px; }
  html[data-rl-game="gemelos"] .feedback,
  html[data-rl-game="parejas"] .feedback { min-height: 34px; }
  html[data-rl-game="gemelos"] .feedback img,
  html[data-rl-game="parejas"] .feedback img { width: 28px; }
  html[data-rl-game="gemelos"] .feedback span,
  html[data-rl-game="parejas"] .feedback span { font-size: 20px; }
  html[data-rl-game="gemelos"] .rl-line,
  html[data-rl-game="parejas"] .rl-line { font-size: 14px; min-height: 2.4em; }
  .gm-board { width: min(100%, 290px); gap: 6px; }
  .gm-row { gap: 6px; }
  .gm-card-digital { min-height: 40px; font-size: 22px; }
  .gm-card-words { min-height: 42px; font-size: 14px; padding: 4px 10px; }
  .gm-words { gap: 6px; }
  .pj-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .pj-tile, .pj-grid.has-parts .pj-tile { min-height: 46px; }
  .pj-time { font-size: 19px; }
  .pj-part { font-size: 10.5px; }
  .pj-target { font-size: 28px; }
  .pj-ask { font-size: 15px; }
}

/* end screen on a phone on its side: no room for the mascot */
@media (orientation: landscape) and (max-height: 500px) {
  #screen-end { gap: 10px; }
  #screen-end .mascot { display: none; }
  #screen-end .results p { font-size: 18px; margin: 4px 0; }
}

/* Parejas: the tiles sit right under the line on a tall phone; the line
   carries "1 h 25 min", so it is set in the readable font (claire is
   capitals only) */
html[data-rl-game="parejas"] .stage-area { justify-content: flex-start; }
html[data-rl-game="parejas"] .rl-line:empty { display: none; }
html[data-rl-game="parejas"] .rl-line { font-family: var(--am-readable-font); font-weight: 700; text-shadow: none; }

/* The same cream question card used by Medidas. */
.rl-line:not(:empty), .pj-ask:not(:empty) {
  background: #fff9ed;
  border: 1px solid #fff;
  border-radius: 16px;
  padding: 6px clamp(9px, 3vw, 16px);
  color: #40304b;
  font-family: var(--am-readable-font);
  font-weight: 750;
  line-height: 1.4;
  text-shadow: none;
}

.rl-line.is-why:not(:empty) { color: #a0451c; }
.rl-line.is-good:not(:empty) { color: #2a7d35; }