/*
 * Overrides for "Medidas" (medidas/). The shared look, the hud/stage/pad
 * grid, the keypad and the background live in shared/shell.css - only the
 * question, the bench (object + instrument), the result line and the three
 * pads (slider, reading, unit cards) are defined here.
 *
 * Same calm family as reloj/ and dinero/. The bench art is drawn by
 * objects.js + tools.js.
 */

:root {
  --md-ink: #553669;
  --md-frame: #6f4a86;
  --md-cream: #fbf2e2;
  --md-good: #2a9a3a;
  --md-guess: #e07a1f;
}

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

/* the stage can be taller than its row (ruler + line): scroll, never spill over the pad */
.game-screen { grid-template-rows: auto minmax(min-content, 1fr) auto; }

/* ---- 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;
}
.md-start-art { width: min(64vw, 240px); height: auto; }

/* ---- the question ---- */
.md-ask {
  flex: none;
  width: min(100%, 640px);
  text-align: center;
  border: 1px solid #fff;
  border-radius: 16px;
  background: #fff9ed;
  padding: 10px 16px;
}
.md-ask h2 {
  margin: auto;
  color: #40304b;
  font: 750 clamp(17px, 4.4vw, 26px)/1.45 var(--am-readable-font);
}
.md-ask .md-name:empty { display: none; }
.md-name {
  display: block;
  min-height: 1.2em;
  font-family: var(--am-readable-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--md-ink);
  opacity: .8;
}

/* ---- the bench ---- */
.md-bench {
  flex: none;
  width: min(100%, 640px);
  padding: 4px 6px;
  background: rgba(255, 255, 255, .55);
  border: 2px solid #fff;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  touch-action: pan-y;
}
.md-bench-svg { display: block; overflow: visible; }
.md-bench-svg.md-fixed { width: min(100%, 440px); height: auto; max-height: 42vh; }
.md-num { font-family: var(--am-readable-font); font-weight: 700; }

.md-ruler { transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), opacity .3s; }
.md-ruler.is-away { opacity: 0; pointer-events: none; }
.md-ruler.is-drag { cursor: grab; touch-action: none; }
.md-ruler.is-drag.is-held { cursor: grabbing; }
.md-ruler.is-drag .md-ruler-body { animation: mdNudge 1.6s ease-in-out .4s 2; }
.md-ruler.is-aligned .md-zero { stroke: var(--md-good); stroke-width: 4; }
.md-ruler.is-aligned .md-ruler-body { stroke: var(--md-good); }
.md-ruler-move { transition: transform .12s; }
.md-ruler.is-held .md-ruler-move { transition: none; }
@keyframes mdNudge { 0%, 100% { transform: none; } 30% { transform: translateX(5px); } 60% { transform: translateX(-4px); } }

.md-point { animation: mdPoint .9s ease-in-out infinite; }
@keyframes mdPoint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.md-thing { transition: transform .5s cubic-bezier(.4, 1.25, .6, 1); }
.md-contents { transition: opacity 1.1s ease-in; }

.md-unit-art { width: min(52vw, 190px); height: auto; max-height: 26vh; display: block; margin: 6px auto; }
.md-unit-thing { width: min(30vw, 120px); }

/* ---- the line: hints and results ---- */
.md-line {
  flex: none;
  margin: 0;
  font-family: var(--am-readable-font);   /* unit symbols keep their case: cm, mL */
  font-weight: 700;
  min-height: 3.6em;
  max-width: 38ch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: clamp(15px, 4vw, 19px);
  line-height: 1.2;
  text-align: center;
  color: var(--purple-dark);
  text-shadow: 1px 1px 0 #fff;
}
.md-line-row.is-why { color: #a0451c; }
.md-line-row.is-good { color: #2a7d35; }

/* ---- the pads ---- */
.md-pad {
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.md-pad[hidden] { display: none; }
.md-guess-val {
  min-width: 150px;
  padding: 6px 18px;
  background: #fff;
  border: 3px solid var(--md-guess);
  border-radius: 14px;
  font-family: var(--am-readable-font);
  font-weight: 800;
  font-size: 30px;
  text-align: center;
  color: var(--md-guess);
  font-variant-numeric: tabular-nums;
}
.md-slider { width: 100%; display: flex; align-items: center; gap: 10px; }
.md-slider input[type="range"] {
  flex: 1;
  height: 44px;
  margin: 0;
  background: none;
  accent-color: var(--md-guess);
  -webkit-appearance: none;
  appearance: none;
  touch-action: none;
}
.md-slider input[type="range"]::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; background: #fff; border: 2px solid var(--md-frame); }
.md-slider input[type="range"]::-moz-range-track { height: 12px; border-radius: 6px; background: #fff; border: 2px solid var(--md-frame); }
.md-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 34px; height: 34px; margin-top: -13px;
  border-radius: 50%;
  background: var(--md-guess);
  border: 3px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
.md-slider input[type="range"]::-moz-range-thumb {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--md-guess);
  border: 3px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
.md-step {
  flex: none;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--md-frame);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 3px 0 rgba(80, 50, 100, .25);
  cursor: pointer;
}
.md-step:active { transform: translateY(2px); box-shadow: none; }
.md-go { min-width: 220px; }

.md-answer { gap: 8px; min-width: 170px; }
.md-answer #answer.is-empty { color: rgba(85, 54, 105, .35); }
.md-answer-unit { font-family: var(--am-readable-font); font-size: .62em; font-weight: 700; color: var(--md-ink); }
.keypad.is-wait { opacity: .55; pointer-events: none; }
/* OK sits next to 0 (four rows of keys, not five): the bench needs the height */
.keypad button.md-ok { width: auto; background: #fff; color: var(--purple-dark); font-weight: bold; font-size: 22px; }

.md-cards { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; }
.md-card {
  min-width: 110px;
  padding: 18px 14px;
  border: 3px solid var(--md-frame);
  border-radius: 18px;
  background: #fff;
  color: var(--md-ink);
  font-family: var(--am-readable-font);
  font-size: 28px;
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(80, 50, 100, .3);
  cursor: pointer;
}
.md-card:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(80, 50, 100, .3); }
.md-card.is-good { background: #dff3e1; border-color: var(--md-good); color: #1f6b2a; }
.md-card.is-bad { background: #fbe1dd; border-color: #d8433e; opacity: .7; animation: mdShake .4s; }
.md-card:disabled { cursor: default; }
@keyframes mdShake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* phones (stacked layout): the scale/jug and the keypad share the height */
@media not ((min-width: 640px) and (orientation: landscape)) {
  .stage-area { gap: 8px; }
  .md-bench-svg.md-fixed { max-height: clamp(130px, calc(100dvh - 684px), 40vh); }
  .md-bench { padding: 2px 6px; }
  #keypad { padding: 10px; gap: 8px; }
  #keypad button { height: 52px; }
  .md-answer { min-height: 48px; font-size: 32px; }
  .md-name { font-size: 14px; min-height: 1.1em; }
  .md-ask h2 { font-size: clamp(20px, 5.2vw, 26px); }
}
/* short phones: tighter */
@media (max-height: 740px) {
  .stage-area { gap: 6px; }
  .md-ask h2 { font-size: 20px; }
  .md-line { min-height: 3.2em; font-size: 15px; }
  .md-pad { gap: 8px; }
  .md-guess-val { font-size: 24px; padding: 2px 14px; }
}
/* short landscape: compact everything */
@media (orientation: landscape) and (max-height: 500px) {
  .md-ask h2 { font-size: 18px; }
  .md-name { font-size: 13px; }
  .md-bench-svg.md-fixed { max-height: 46vh; }
  .md-line { min-height: 2.6em; font-size: 14px; }
  .md-card { min-width: 90px; padding: 10px; font-size: 22px; }
  .md-guess-val { font-size: 22px; }
  .stage-area { gap: 4px; }
  .md-name { display: none; }
  .md-pad { gap: 6px; }
  #keypad { padding: 8px; gap: 6px; }
  #keypad button { height: 42px; font-size: 22px; }
  .md-answer { min-height: 40px; font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .md-ruler, .md-ruler-move, .md-thing, .md-contents { transition: none; }
  .md-ruler.is-drag .md-ruler-body, .md-point, .md-card.is-bad { animation: none; }
}

/* ================= games 2 and 3 (balanza.js, area.js) =================
 * index.html serves all three games; <html data-game> is set in the head
 * so the right start picture shows from the first paint. */
.md-for-balanza, .md-for-area { display: none; }
[data-game="balanza"] .md-for-adivina, [data-game="area"] .md-for-adivina { display: none; }
[data-game="balanza"] .md-for-balanza, [data-game="area"] .md-for-area { display: block; }

/* La balanza y las jarras: a numpad-shaped keypad (OK two rows tall, a wide
 * 0) so the comma fits without a fifth row */
.keypad.md-keypad4 { grid-template-columns: repeat(4, 1fr); }
.keypad.md-keypad4 button.md-ok-tall { grid-row: span 2; height: auto; }
.keypad.md-keypad4 button.md-zero { grid-column: span 3; width: auto; }
.keypad.md-keypad4 button.md-comma { font-weight: 800; }
.keypad.md-keypad4 button:disabled { opacity: .3; cursor: default; }
.md-pad .keypad.is-wait { opacity: .55; pointer-events: none; }
.md-bench-svg.md-conv { width: min(100%, 470px); }

/* Medidas rounds */
.md-unit-pictogram { font-size: clamp(54px, 17vw, 94px); line-height: 1.35; }
.md-unit-art { filter: drop-shadow(0 4px 3px #55366922); }
[data-game="adivina"] .hud .score,
[data-game="adivina"] .hud-time,
[data-game="area"] .hud .score,
[data-game="area"] .hud-time,
[data-game="area"] .md-name { display: none; }
[data-game="balanza"] .md-ask h2 {
  max-width: 54ch;
  font: 650 clamp(16px, 4vw, 22px)/1.3 var(--am-readable-font);
  text-transform: none;
}

/* Calcula el área */
[data-game="area"] .md-ask { width: min(100%, 480px); }
[data-game="area"] .md-question-title h2 { margin: 0; }
[data-game="area"] .md-bench {
  width: min(100%, 480px);
  background: radial-gradient(#d8ccdf 1px, transparent 1px) center / 16px 16px, linear-gradient(145deg, #fffef8, #faf3e6);
  border-color: #fff;
  box-shadow: 0 4px 0 #72588138;
  --area-fill: #a9ddd0;
  --area-edge: #2a665d;
}
[data-game="area"] .md-bench[data-shape="triangle"] {
  --area-fill: #ffd6a5;
  --area-edge: #884723;
}
[data-game="area"] .md-bench[data-shape="square"],
[data-game="area"] .md-bench[data-shape="rectangle"] {
  --area-fill: #ddc5f3;
  --area-edge: #67438a;
}
[data-game="area"] .md-line[data-result] {
  min-height: auto;
  border-radius: 14px;
  padding: 6px 12px;
  background: #e5f5df;
  color: #26593d;
  text-shadow: none;
  font-weight: 750;
  animation: area-feedback-in .22s ease-out;
}
[data-game="area"] .md-line[data-result="incorrect"] {
  background: #fff0dc;
  color: #813b22;
}
@keyframes area-feedback-in {
  from { opacity: 0; transform: translateY(4px); }
}
.area-board { display: block; width: 100%; max-height: 46vh; touch-action: none; }
.area-figure { fill: var(--area-fill); stroke: var(--area-edge); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 3px 0 #4f3a5726); }
.area-guide { fill: none; stroke: var(--area-edge); stroke-dasharray: 3 3; stroke-width: 1.5; }
.area-dot { fill: #fff; stroke: #397567; stroke-width: 1.5; }
.area-tag { font: 700 14px var(--am-readable-font); fill: var(--area-edge); text-anchor: middle; dominant-baseline: central; }
.area-ruler { cursor: grab; touch-action: none; }
.area-ruler:active { cursor: grabbing; }
.area-ruler-body { fill: #ffe4a3; stroke: #8e6228; stroke-width: 1.5; filter: drop-shadow(0 2px 0 #8e622840); }
.area-ruler.is-snapped .area-ruler-body { fill: #fae7aa; stroke: #397567; stroke-width: 2.5; }
.area-ruler path { stroke: #563b24; stroke-width: 1.2; }
.area-ruler .area-ruler-grain { fill: none; stroke: #c88d3c; opacity: .6; pointer-events: none; }
.area-ruler .area-ruler-zero { stroke: #a84a41; stroke-width: 2; pointer-events: none; }
.area-ruler text { font: 700 10px var(--am-readable-font); text-anchor: middle; fill: #563b24; }
.area-form { width: min(100%, 600px); margin: auto; color: var(--md-ink); font: 700 16px var(--am-readable-font); }
[data-game="area"] .md-question-title { display: flex; justify-content: center; align-items: center; gap: 8px; }
.area-hint { position: relative; text-align: left; }
.area-hint summary {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; color: var(--md-ink); background: #fff9ed; border: 1px solid var(--md-frame);
  font: 800 16px var(--am-readable-font); list-style: none;
}
.area-hint summary::-webkit-details-marker { display: none; }
#area-symbolic {
  position: absolute; top: 100%; left: 50%; transform: translateX(-60%); z-index: 2;
  width: max-content; max-width: min(230px, 62vw); margin: 5px 0; padding: 9px 12px;
  background: #fff9ed; border: 1px solid var(--md-frame); border-radius: 10px;
  font: 700 15px/1.4 var(--am-readable-font); color: var(--md-ink);
}
.area-calculation {
  width: min(100%, 255px);
  margin: 0 auto;
  padding: 8px 12px 3px;
  background: #fff9ed;
  border: 1px solid #fff;
  border-radius: 14px;
  box-shadow: 0 3px 0 #72588126;
}
.area-result {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #e6d9e8;
}
.area-input { display: grid; grid-template-columns: 1fr 66px 35px; align-items: center; gap: 8px; margin-bottom: 5px; }
.area-input span { text-align: right; }
.area-input small { font-size: .8em; }
.area-input input { min-width: 0; width: 100%; font: inherit; text-align: center; color: var(--md-ink); border: 2px solid #a17cae; border-radius: 8px; padding: 4px 2px; }
.area-input input[aria-invalid="true"] { border-color: #a33142; background: #fff0f2; }
.area-input input[aria-invalid="false"] { border-color: #397567; background: #e7f6ee; }

/* Estimate and measure on the same bench. */
.md-guess-mark { fill: none; stroke: #b45408; stroke-width: 3; stroke-dasharray: 4 2; }
.md-stream { fill: none; stroke: #65b0d8; stroke-width: 4; opacity: .75; }
.md-stream[hidden] { display: none; }
.md-unit-ruler {
  transform-origin: 0 0;
  animation: md-grow-ruler .85s ease-out both;
}
.md-unit-ruler rect { fill: #ffe4a4; stroke: var(--md-frame); stroke-width: 1.4; }
.md-unit-ruler path { stroke: var(--md-frame); stroke-width: 1.5; }
@keyframes md-grow-ruler { from { transform: scaleX(0); } }
[data-kind="unit"] .md-bench { align-items: center; gap: 12px; }
[data-kind="unit"] .md-unit-art { margin-inline: 0; }

[data-game="balanza"] .md-conversion-ladders {
  display: grid;
  gap: 6px;
  width: min(92vw, 370px);
  font: 700 16px/1.25 var(--am-readable-font);
  color: #40304b;
}
.md-conversion-ladder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  background: #fff9ed;
  border-radius: 12px;
  padding: 8px 10px;
}
.md-conversion-steps { display: flex; align-items: center; justify-content: space-between; gap: 3px; }
.md-conversion-steps span { background: #f0e3f2; border-radius: 5px; padding: 2px 4px; }
.md-conversion-steps small { color: #754618; white-space: nowrap; font-size: .68em; }
.md-conversion-ladder strong { font-size: .82em; white-space: nowrap; }
[data-game="balanza"] .start-hint {
  font: 600 clamp(14px, 3.5vw, 18px)/1.4 var(--am-readable-font);
}
[data-game="balanza"] .md-ask h2 { max-width: 54ch; font-size: clamp(16px, 4vw, 22px); line-height: 1.55; }
[data-game="balanza"] .md-name { margin-top: 4px; opacity: 1; }
.md-quantity {
  padding: .06em .24em;
  border-radius: .25em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.md-quantity-target { color: #653682; background: #f0e3f7; }
.md-quantity-parts { color: #155d62; background: #dff2ef; }
.md-quantity-glass { color: #8b4609; background: #ffebcd; }

.area-rotate-side {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: min(45%, 215px);
  padding: 5px 9px;
  min-height: 38px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: #fdf6e9;
  color: var(--md-ink);
  font: 700 14px var(--am-readable-font);
  cursor: pointer;
}
.area-rotate-side[hidden] { display: none; }
.area-rotate-side svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.area-rotate-handle { cursor: pointer; }
.area-rotate-handle circle { fill: #fff5da; stroke: #8e6228; stroke-width: 1.5; }
.area-ruler .area-rotate-handle path { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.area-input input.is-active { outline: 2px solid #724795; outline-offset: 2px; }
.keypad.area-keypad { width: min(100%, 244px); margin: 8px auto 0; }
.keypad.area-keypad button { height: clamp(37px, 5.5vh, 52px); }
.keypad.area-keypad #area-check {
  grid-column: 1 / -1;
  width: 100%;
  background: var(--purple-dark);
  color: #fff;
  font-size: 18px;
  font-weight: 750;
}
.keypad.area-keypad button:disabled { opacity: .35; }
@media (prefers-reduced-motion: reduce) {
  .md-unit-ruler, [data-game="area"] .md-line[data-result] { animation: none; }
}

.md-unit-photo { width: min(100%, 270px); max-height: 28vh; overflow: visible; display: block; }
.md-unit-measure { fill: var(--md-ink); font-size: 12px; animation: md-show-measure .85s both; }
@keyframes md-show-measure { 0%, 65% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .md-unit-measure { animation: none; } }

@media (max-width: 520px) {
  [data-game="area"] .area-board { max-height: 22vh; }
  [data-game="area"] .md-line { min-height: 1.35em; }
}