/* Monopoly Arena — stage.css. The first screen (board + .portada), the dice, the token, the navigation
   and the deed shell (#card.deed) with its deck of pages.
   Owner: agent stage. Colours, faces and durations come from theme.css. Every rule that hides or moves
   anything lives under html.js (set by the first line of <head>); without JavaScript the top bar, the
   headline (.portada) and the four sections read as a plain document.
   Flat everywhere; the only realism is the dice (face and pip shading, contact shadow), each of those
   lines carrying the lint's ignore comment. */

:root {
  --stage-top: 56px;                 /* the top bar: wordmark + progress strip */
  --dice-y: 0.775;                   /* where the dice sit in the centre field when .portada does not hold them (0 top, 1 bottom): y ≈ 700 of 1000, the act row */
  --peek: clamp(88px, 13svh, 120px); /* sheet mode: the strip of board above the deed */
}
@media (min-width: 768px) { :root { --stage-top: 64px; } }
/* the replay (#partida) and the ten final boards (#partidas) in sheet mode: a tall strip that shows the whole
   board, at most 42 % of the screen's height, the sheet under it; never so tall that the sheet keeps less than
   420px (390×844: a 354px strip, a 434px sheet; a phone in landscape keeps the short strip) */
html.is-tall-peek {
  --peek: clamp(clamp(88px, 13vh, 120px), min(100vw, 42vh), 100vh - var(--stage-top) - 26.25rem);
  --peek: clamp(clamp(88px, 13svh, 120px), min(100vw, 42svh), 100svh - var(--stage-top) - 26.25rem);
}

/* ── top bar: readable with and without JS ─────────────────────────────────── */
.top {
  display: flex; align-items: center; gap: var(--gutter);
  min-height: var(--stage-top); padding: 0 var(--margin); box-sizing: border-box;
  background: var(--table); color: var(--paper);
  font-family: var(--text);
}
.top .wordmark {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 700 1.3125rem / 1 var(--display); letter-spacing: -0.01em;
  color: var(--paper); text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; white-space: nowrap;
  transition: text-decoration-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .top .wordmark:hover { text-decoration-color: currentColor; } }
.top .wordmark:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
#progress { display: flex; gap: 0.5rem; flex: 1 1 auto; min-width: 0; }
#progress a { color: var(--paper); font-family: var(--text); font-weight: 600; font-size: var(--step-small); }
/* «Artículo» (a.top__alt, after #progress): the page as a plain article; paper on the felt at every size,
   a ≥ 44px target, never wrapping the bar */
.top .top__alt {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap;
  color: var(--paper); font: 600 var(--step-small) / 1.2 var(--text);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--paper) 50%, transparent);
  text-underline-offset: 0.2em; text-decoration-thickness: 0.08em;
  transition: text-decoration-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .top .top__alt:hover { text-decoration-color: currentColor; } }
.top .top__alt:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
/* «spicy4tuna» rides in the bar only where the first screen sits in the board's field (no room there for a
   second link between the bottom pennants); elsewhere it is the second link under «Tirar los dados» */
.top .top__alt--spicy { display: none; }
@media (min-width: 600px) and (min-height: 700px) {
  html.js .top .top__alt--spicy { display: inline-flex; margin-left: 1.25rem; }
  html.js .portada__alt a + a { display: none; }
}
@media (max-width: 480px) {
  .top { gap: 0.75rem; }
  .top .wordmark { font-size: 1.1875rem; }
}
@media (max-width: 360px) { .top .wordmark { font-size: 1.0625rem; } }

/* ── the stage, once the script runs ──────────────────────────────────────── */
html.js, html.js body { height: 100%; }
html.js body { margin: 0; overflow: hidden; background: var(--table); }
html.js main { display: none; }                       /* the sections live in the deed */
html.js .top { position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--stage-top); }

/* Phone portrait (and anything that is neither in-field nor landscape): the board on top, the
   headline under it on the felt. The board leaves --portada-h of height for the headline. */
html.js #stage {
  --portada-h: 18.5rem;
  --col: calc(100vw - 2 * var(--margin));
  --board-size: min(var(--col), 100vh - var(--stage-top) - 3 * var(--margin) - var(--portada-h));
  --board-size: min(var(--col), 100svh - var(--stage-top) - 3 * var(--margin) - var(--portada-h));
  position: fixed; inset: 0; z-index: 0; overflow: hidden; box-sizing: border-box;
  display: grid; grid-template-columns: var(--col); grid-template-rows: var(--board-size) minmax(0, 1fr);
  justify-content: center; row-gap: var(--margin);
  padding: calc(var(--stage-top) + var(--margin)) 0 var(--margin);
  background: var(--table);
  transform-origin: var(--back-ox, 0px) var(--back-oy, 0px);
  transition: transform var(--t-back) var(--ease-in-out);
}
/* the board slides aside (split) or up into the peek strip (sheet): one transform, no blur, no dimming */
html.js #stage.is-back {
  transform: translate3d(var(--back-x, 0px), var(--back-y, 0px), 0) scale(var(--back-s, 1));
  background: transparent;           /* the body is the same felt; a moved edge would show as a seam */
}

html.js #stage .board-slot {
  grid-row: 1; grid-column: 1; justify-self: center; align-self: center;
  position: relative; width: var(--board-size); height: var(--board-size);
  background: var(--board-edge);
}
/* a board-shaped placeholder from the first frame, before board.js has drawn the SVG */
html.js #stage .board-slot::before { content: ""; position: absolute; inset: 1.4%; background: var(--board); }
html.js #stage .board-slot > svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }

html.js #stage .portada {
  grid-row: 2; grid-column: 1; min-height: 0; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 0.75rem;
  justify-content: flex-end; justify-content: safe flex-end;     /* the spare height sits between the board and the h1 */
  padding-bottom: max(0px, 2rem - var(--margin));               /* with the stage's own margin: 32px to the bottom edge */
  color: var(--paper);
}
html.js .portada__title {
  margin: 0; font: 700 clamp(2.75rem, min(22vw, 10svh), 6rem) / 0.9 var(--display);
  text-transform: uppercase; letter-spacing: -0.02em; color: var(--paper);
}
html.js .portada__sub { margin: 0; font: 500 max(18px, var(--step-body)) / 1.4 var(--text); max-width: 36ch; }
html.js .portada__act { margin: clamp(0.25rem, 7.5vh - 2.7rem, 1.25rem) 0 0; margin-top: clamp(0.25rem, 7.5svh - 2.7rem, 1.25rem); display: flex; align-items: center; gap: 0.75rem; }   /* + the 0.75rem gap: 32px under the statement on a phone */
html.js .portada__dados { --dd: 46px; flex: none; display: block; width: calc(var(--dd) * 3.2); height: var(--dd); }
html.js #stage .portada #tirar { flex: 1 1 auto; min-height: 56px; }
/* «Leer como artículo» (a.portada__alt): a quiet text link under «Tirar los dados», a ≥ 44px target; on the
   phone it takes the last line, so the headline keeps a little more of the felt. If it rides inside the act
   row it wraps to its own line under the button and the dice */
html.js .portada__alt {
  align-self: flex-start; margin: -0.5rem 0 0; padding: 0;
  color: inherit; font: 500 var(--step-small) / 1.2 var(--text); white-space: nowrap;
}
html.js .portada__alt:not(a) { display: flex; }               /* p.portada__alt > a: no line strut under the link */
html.js .portada__alt:not(a) { gap: 0 1.25em; }             /* «Leer como artículo» and «La partida de spicy4tuna» side by side */
html.js a.portada__alt, html.js .portada__alt a {
  display: inline-flex; align-items: center; min-height: 44px; color: inherit;
  text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em;
}
html.js a.portada__alt:focus-visible, html.js .portada__alt a:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
html.js .portada__act:has(.portada__alt) { flex-wrap: wrap; }
html.js .portada__act .portada__alt { order: 3; flex: 1 0 100%; justify-content: inherit; margin: 0; }
html.js #stage:has(.portada__alt) { --portada-h: 21rem; }
html.js #stage .portada:has(.portada__alt) { padding-bottom: max(0px, 1.25rem - var(--margin)); }

/* Landscape without the height for the in-field headline (short phones in landscape, low laptop
   windows): the headline beside the board; the dice sit in the board's centre field. */
@media (orientation: landscape) and (max-height: 699.98px) {
  html.js #stage {
    --side: clamp(15rem, 100vw - 3 * var(--margin) - (100svh - var(--stage-top) - 2 * var(--margin)), 26rem);
    --board-size: min(100vh - var(--stage-top) - 2 * var(--margin), 100vw - 3 * var(--margin) - var(--side));
    --board-size: min(100svh - var(--stage-top) - 2 * var(--margin), 100vw - 3 * var(--margin) - var(--side));
    grid-template-columns: var(--board-size) var(--side); grid-template-rows: var(--board-size);
    column-gap: var(--margin); align-content: center;
    padding: var(--stage-top) 0 0;
  }
  html.js #stage .portada { grid-row: 1; grid-column: 2; align-self: center; gap: 1rem; justify-content: flex-start; padding-bottom: 0; }
  html.js .portada__title { font-size: clamp(2.25rem, 5.4vw, 4rem); }
  html.js .portada__act { margin-top: 0.5rem; }
  html.js .portada__dados { display: none; }
  html.js #stage .portada #tirar { flex: 0 1 auto; }
  html.js .portada__alt { margin-top: -0.5rem; }
}

/* In-field (room for it): .portada lies over the board's centre field, sized in units of the board
   (1cqi = 10 of the board's 1000 units): the h1 on a flat red band where the classic logo sits
   (y 418–536), the sentence under it, the act row (button + the dice) at about y 675–775, so the
   dice can tumble in the free band without crossing the sentence. */
@media (min-width: 600px) and (min-height: 700px) {
  html.js #stage {
    --board-size: min(100vw - 2 * var(--margin), 100vh - var(--stage-top) - 2 * var(--margin));
    --board-size: min(100vw - 2 * var(--margin), 100svh - var(--stage-top) - 2 * var(--margin));
    grid-template-columns: var(--board-size); grid-template-rows: var(--board-size);
    align-content: center; padding: var(--stage-top) 0 0;
  }
  html.js #stage .portada {
    grid-area: 1 / 1; z-index: 2; position: relative; box-sizing: border-box;
    width: var(--board-size); height: var(--board-size); container-type: inline-size;
    align-items: center; justify-content: flex-start; gap: 0;
    padding: calc(var(--board-size) * 0.566) 0 0;   /* its own box in board units: cqi resolves against its content box, so no side padding */
    color: var(--ink); text-align: center; pointer-events: none;   /* the squares under the box stay clickable */
  }
  html.js .portada__title {
    position: absolute; left: 16cqi; right: 16cqi; top: 41.8cqi; height: 11.8cqi;
    display: grid; place-items: center; padding-top: 0.5cqi; box-sizing: border-box;
    background: var(--accent); color: var(--accent-ink);
    font-size: 8.8cqi; white-space: nowrap; pointer-events: auto;
  }
  html.js .portada__sub { width: 71cqi; max-width: none; font-size: max(18px, 2.5cqi); line-height: 1.3; pointer-events: auto; text-wrap: balance; }
  html.js .portada__act { margin: 4.4cqi 0 0; gap: 3cqi; justify-content: center; min-height: 10cqi; }   /* the dice' row ≈ y 675–775: room to tumble under the statement */
  html.js .portada__dados { --dd: clamp(34px, 7.65cqi, 76px); }
  html.js #stage .portada #tirar {      /* with the dice, the largest red-and-white thing in the field after the h1 band */
    flex: none; pointer-events: auto;
    min-height: clamp(56px, 6.8cqi, 64px); padding: 0 1.15em; font-size: clamp(1.3125rem, 2.5cqi, 1.5rem);
  }
  html.js .portada__alt { align-self: center; margin: 0.3cqi 0 0; font-size: max(0.9375rem, 1.9cqi); pointer-events: auto; }
  html.js a.portada__alt, html.js .portada__alt a { min-height: max(44px, 5cqi); padding: 0 1cqi; pointer-events: auto; }
  html.js a.portada__alt:focus-visible, html.js .portada__alt a:focus-visible { outline-color: var(--ink); }
  /* a board of at most 720px (1280×720: 592px, 1366×768: 640px): the 18px sentence takes three lines; it starts closer to
     the band, with tighter leading and a smaller step, so the act row (button + dice) and the article link
     stay in the free band, clear of the bottom pennants and the bottom row */
  @container (max-width: 720px) {
    html.js .portada__sub { margin-top: -2cqi; line-height: 1.2; }
    html.js .portada__act { margin-top: 1.8cqi; min-height: 0; }
    html.js .portada__alt { margin-top: 0; }
  }
}
/* ── a deed open ─────────────────────────────────────────────────────────────
   Whatever steps out is display:none, never left on the page invisible (opacity 0 / visibility hidden).
   Sheet: the board is only a strip under the deed; its headline and the dice step out. */
html.is-sheet.js #stage.is-back .portada, html.is-sheet.js #stage.is-back #dice { display: none; }
/* Split: the board is the page's figure. The sentence and «Tirar los dados» step out (the deed's
   «Siguiente» is the one red action); .portada lies over the board's field in every layout (also the
   short landscape one, where it sat beside the board); the h1 band shrinks to a logo at the top of the
   field, under the two top pennants and between the decks; the page's data-figure takes the middle. */
html.is-split.js #stage.is-back .portada__sub, html.is-split.js #stage.is-back .portada__act, html.is-split.js #stage.is-back .portada__alt { display: none; }
html.is-split.js #stage.is-back .portada {
  grid-area: 1 / 1; align-self: center; justify-self: center; position: relative; z-index: 2; box-sizing: border-box;
  width: var(--board-size); height: var(--board-size); padding: calc(var(--board-size) * 0.566) 0 0; container-type: inline-size;
  align-items: center; justify-content: flex-start; color: var(--ink); text-align: center; pointer-events: none;
}
html.is-split.js #stage.is-back .portada__title {
  position: absolute; left: 16cqi; right: 16cqi; top: 41.8cqi; height: 11.8cqi; margin: 0;
  display: grid; place-items: center; padding-top: 0.5cqi; box-sizing: border-box;
  background: var(--accent); color: var(--accent-ink); font-size: 8.8cqi; white-space: nowrap; pointer-events: auto;
  transform: translateY(-23.4cqi) scale(0.42);       /* 68 × 11,8 → 28,6 × 5 board units, y ≈ 218–268 of 1000 */
}
html.js #stage .portada__figure { display: none; }
html.is-split.js #stage.is-back .portada__figure:not([hidden]) {
  position: absolute; left: 50%; top: 50cqi; translate: -50% -50%; box-sizing: border-box;
  display: block; padding: 1.1cqi 3cqi 0.5cqi;
  background: var(--fig-bg, var(--accent)); color: var(--fig-ink, var(--white));
  border: var(--frame-w) solid var(--board-edge);
  font: 700 var(--fig-size, 15cqi) / 0.92 var(--display); letter-spacing: -0.02em; text-transform: uppercase;
  white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none;
}
html.js #stage .portada__figure-num { display: inline-block; }
/* buttons and links on the felt take a paper focus ring */
html.js .top, html.js #stage { --focus-ring: var(--paper); }
/* a square's mini deed open (stage.js: #stage.has-mini): only the parts of the first screen it overlaps (the h1
   band, the sentence, the button, the article link, the dice, the figure plate) fade out under it, so no word of
   the title shows around the card; everything else stays at full strength, and all come back when it closes */
html.js #stage.has-mini .is-under-mini { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .portada__figure, html.js #dice { transition: opacity var(--t-ui) var(--ease-out); }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .portada__title { transition: transform var(--t-back) var(--ease-in-out), opacity var(--t-ui) var(--ease-out); }
}
/* in the in-field layout the sentence and the act row fade where they are as they step out and back in
   (display waits for the fade); elsewhere they would cross the board, so they just go */
@media (prefers-reduced-motion: no-preference) and (min-width: 600px) and (min-height: 700px) {
  html.js .portada__sub, html.js .portada__act, html.js .portada__alt {
    transition: opacity var(--t-ui) var(--ease-out), display var(--t-ui) allow-discrete;
  }
  html.is-split.js #stage.is-back .portada__sub, html.is-split.js #stage.is-back .portada__act, html.is-split.js #stage.is-back .portada__alt { opacity: 0; }
  @starting-style {
    html.js #stage.was-back:not(.is-back) .portada__sub, html.js #stage.was-back:not(.is-back) .portada__act, html.js #stage.was-back:not(.is-back) .portada__alt { opacity: 0; }
  }
}

/* the one action on the first screen: flat red, square */
html.js #tirar {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 56px; padding: 0 1.4em; border: 0; border-radius: var(--radius-btn);
  background: var(--accent); color: var(--accent-ink); text-decoration: none; cursor: pointer;
  font: 600 1.3125rem / 1.2 var(--text); white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
html.js #tirar:active { transform: scale(0.97); }
html.js #tirar:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
@media (min-width: 600px) and (min-height: 700px) { html.js #tirar:focus-visible { outline-color: var(--ink); } }
html.js #tirar[aria-disabled="true"] { opacity: 1; background: var(--accent-2); cursor: progress; }   /* rolling: pressed, not greyed out */
@media (hover: hover) and (pointer: fine) { html.js #tirar:hover { background: var(--accent-2); } }

/* ── load sequence, settled by 1.2 s (motion.md «Load sequence in 1.2 seconds») ──
   The h1, the sentence and «Tirar los dados» are painted on the first frame: their entrances move them
   (transform / translate only), nothing starts clipped or transparent. The headline settles with the
   board (same keyframes, same box in the in-field layout); the sentence and the act row rise into place. */
@media (prefers-reduced-motion: no-preference) {
  html.js #stage .board-slot, html.js #stage .portada { animation: ma-settle 700ms var(--ease-expo) backwards; }
  html.js .portada__sub { animation: ma-rise 500ms var(--ease-out) 300ms backwards; }
  html.js .portada__act { animation: ma-rise 500ms var(--ease-out) 380ms backwards; }
  html.js #dice.is-arriving { animation: ma-dice-in 450ms var(--ease-out) var(--arrive, 600ms) backwards; }
  html.js #token.is-arriving { animation: ma-token-in 450ms var(--ease-out) var(--arrive, 700ms) backwards; }
}
@keyframes ma-settle { from { transform: translateY(-18px) scale(1.03); } to { transform: none; } }
@keyframes ma-rise { from { translate: 0 12px; } to { translate: 0 0; } }
@keyframes ma-dice-in { from { opacity: 0; translate: 0 calc(var(--d) * -1.4); } to { opacity: 1; translate: 0 0; } }
@keyframes ma-token-in { from { opacity: 0; translate: 0 -110px; } to { opacity: 1; translate: 0 0; } }

/* ── the dice: two CSS cubes (the one real object here) ─────────────────── */
html.js #dice {
  --d: 56px; --hd: calc(var(--d) / 2);
  position: absolute; left: 0; top: 0; z-index: 10;
  width: calc(var(--d) * 3.2); height: var(--d);
  perspective: calc(var(--d) * 11); perspective-origin: 50% 20%;
  cursor: pointer; border-radius: var(--radius-card); outline-offset: 10px;
}
html.js #dice:focus-visible { outline: 3px solid var(--ink); }
html.js #dice[aria-disabled="true"] { cursor: progress; }
html.js .die { position: absolute; top: 0; width: var(--d); height: var(--d); transform-style: preserve-3d; }
html.js .die:nth-child(1) { left: calc(var(--d) * 0.22); }
html.js .die:nth-child(2) { left: calc(var(--d) * 1.98); }
html.js .die__contact {
  position: absolute; left: -14%; right: -14%; bottom: -24%; height: 40%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 40%, rgba(0, 0, 0, 0) 72%); /* taste-skill-ignore: real object (dice) */
  transform-origin: 50% 50%; opacity: 0.9;
}
html.js .die__jump, html.js .die__cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
html.js .die__cube { will-change: transform; transform: rotateX(14deg) rotateY(-10deg) rotateZ(0deg) rotateX(0deg) rotateY(0deg); }
html.js .die__face, html.js .die__inner {
  position: absolute; inset: 0; box-sizing: border-box; backface-visibility: hidden;
}
html.js .die__face {
  border-radius: 17%;
  background: linear-gradient(145deg, #ffffff 0%, #f4f3ee 52%, #dedcd3 100%); /* taste-skill-ignore: real object (dice) */
  box-shadow: inset 0 0 0 1px rgba(40, 40, 30, 0.08), inset 0 -3px 5px rgba(40, 40, 30, 0.10), inset 0 2px 3px rgba(255, 255, 255, 0.8); /* taste-skill-ignore: real object (dice) */
}
/* per-face shading: the light comes from the top left */
html.js .die__face.f1 { filter: brightness(1); }
html.js .die__face.f2 { filter: brightness(1.05); }
html.js .die__face.f3 { filter: brightness(0.93); }
html.js .die__face.f4 { filter: brightness(0.90); }
html.js .die__face.f5 { filter: brightness(0.84); }
html.js .die__face.f6 { filter: brightness(0.88); }
html.js .die__inner { inset: 6%; border-radius: 10%; background: #e9e8e2; }
/* face placement: 1 opposite 6, 2 opposite 5, 3 opposite 4 */
html.js .f1 { transform: translateZ(var(--hd)); }
html.js .f6 { transform: rotateY(180deg) translateZ(var(--hd)); }
html.js .f2 { transform: rotateX(90deg) translateZ(var(--hd)); }
html.js .f5 { transform: rotateX(-90deg) translateZ(var(--hd)); }
html.js .f3 { transform: rotateY(90deg) translateZ(var(--hd)); }
html.js .f4 { transform: rotateY(-90deg) translateZ(var(--hd)); }
html.js .die__inner.i1 { transform: translateZ(calc(var(--hd) * 0.88)); }
html.js .die__inner.i6 { transform: rotateY(180deg) translateZ(calc(var(--hd) * 0.88)); }
html.js .die__inner.i2 { transform: rotateX(90deg) translateZ(calc(var(--hd) * 0.88)); }
html.js .die__inner.i5 { transform: rotateX(-90deg) translateZ(calc(var(--hd) * 0.88)); }
html.js .die__inner.i3 { transform: rotateY(90deg) translateZ(calc(var(--hd) * 0.88)); }
html.js .die__inner.i4 { transform: rotateY(-90deg) translateZ(calc(var(--hd) * 0.88)); }
/* pips, 3 × 3 grid */
html.js .pip {
  position: absolute; width: 19%; height: 19%; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 36% 34%, #45474a 0%, #0e0f10 62%); /* taste-skill-ignore: real object (dice) */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.15); /* taste-skill-ignore: real object (dice) */
}
html.js .pip.tl { left: 26%; top: 26%; } html.js .pip.tr { left: 74%; top: 26%; }
html.js .pip.ml { left: 26%; top: 50%; } html.js .pip.mr { left: 74%; top: 50%; }
html.js .pip.bl { left: 26%; top: 74%; } html.js .pip.br { left: 74%; top: 74%; }
html.js .pip.c  { left: 50%; top: 50%; }

/* the total: display:none while idle (never parked over the title, not even at opacity 0). Away from the first
   screen a flat ink plate in the middle of the centre field (stage.js puts its centre there and sizes it to the
   field), where the page's figure plate lands afterwards, never over the squares the token is about to hop. On
   the first screen (.is-band) the h1 band's own red box, at the h1's size and face: the band shows the roll in
   place of the title for a moment */
html.js #dice-total {
  position: absolute; left: 50%; top: 50%; z-index: 14; transform: translate(-50%, -50%); box-sizing: border-box;
  display: grid; place-items: center; gap: 0; pointer-events: none;
  padding: 0.12em 0.4em 0.16em; border-radius: 0;
  background: var(--ink); color: var(--paper);
  font: 700 var(--total-size, clamp(2.25rem, 11vmin, 6.5rem)) / 1 var(--display); letter-spacing: -0.02em;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
html.js #dice-total[hidden] { display: none; }
html.js #dice-total .dice-total__in { display: grid; justify-items: center; }
html.js #dice-total small { font: 600 0.34em / 1.1 var(--text); color: var(--g-amarillo); letter-spacing: 0; margin-top: 0.1em; }
html.js #dice-total small:empty { display: none; }
html.js #dice-total.is-band { padding-left: 0; padding-right: 0; padding-bottom: 0; background: var(--accent); color: var(--accent-ink); line-height: 0.9; text-transform: uppercase; }
html.js #dice-total.is-band .dice-total__in { display: inline-flex; align-items: baseline; gap: 0.3em; }
html.js #dice-total.is-band small { margin: 0; color: var(--accent-ink); font-size: 0.4em; }

/* ── the token (lives inside the board SVG; its shine is drawn there) ───── */
html.js .token { pointer-events: none; }
html.js .token__contact { fill: rgba(0, 0, 0, 0.42); }
html.js .token__base { fill: var(--accent-2); }
html.js .token__cone { fill: url(#ma-tok-grad); }
html.js .token__head { fill: url(#ma-tok-head); }
html.js .token__shine { fill: rgba(255, 255, 255, 0.55); }
html.js .token__rim { fill: none; stroke: rgba(0, 0, 0, 0.35); stroke-width: 1; }

/* ── confetti when the token lands on a stop ─────────────────────────────── */
html.js .burst { position: absolute; width: 0; height: 0; z-index: 12; pointer-events: none; }
html.js .burst i {
  position: absolute; left: 0; top: 0; display: block; border-radius: 2px;
  animation: ma-burst 400ms var(--ease-out) forwards;
}
@keyframes ma-burst {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to   { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rz)) scale(0.3); opacity: 0; }
}

/* ── progress strip: square bars, sentence-case labels ───────────────────── */
html.js #progress { gap: 0.6rem; align-items: stretch; }
html.js #progress a {
  --fill: 0; --seg: var(--accent);
  flex: 1 1 0; min-width: 0; min-height: 44px; display: grid; gap: 0.35rem; align-content: center;
  text-decoration: none; color: color-mix(in srgb, var(--paper) 72%, transparent);
  transition: color var(--t-hover) ease;
}
html.js #progress a:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
html.js #progress a.is-done, html.js #progress a.is-active { color: var(--paper); }
@media (hover: hover) and (pointer: fine) { html.js #progress a:hover { color: var(--paper); } }
html.js .progress__bar { display: block; height: 6px; overflow: hidden; background: color-mix(in srgb, var(--paper) 22%, transparent); }
html.js .progress__bar::after {
  content: ""; display: block; height: 100%; background: var(--seg);
  transform: scaleX(var(--fill)); transform-origin: 0 50%;
  transition: transform var(--t-ui) var(--ease-out);
}
html.js .progress__label, html.js .progress__short {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 var(--step-small) / 1.2 var(--text);
}
html.js .progress__short { display: none; }
/* narrow: only the active stop shows its label, or at rest the next one (the stops' short = label: «Estrategia»,
   «Cómo se llegó», «Una partida», «Diez partidas»), whole from 360px up next to «Artículo» */
@media (max-width: 760px) {
  html.js .progress__label { display: none; }
  html.js #progress a.is-active .progress__short { display: block; }
  html.js #progress a { min-width: 8px; }
  html.js #progress a.is-active { flex: 0 1 auto; }   /* as wide as its label; the other three share what is left */
  /* at rest (no deed open) the stop the dice go to next shows its label, so the strip reads as four sections */
  html.js #progress a.is-next .progress__short { display: block; }
  html.js #progress a.is-next { flex: 0 1 auto; }
}
@media (max-width: 480px) { html.js #progress { gap: 0.375rem; } }

/* ── the deed: a white title deed with a printed ink frame ────────────────── */
/* the strip of board above a sheet deed is a button back to the board */
html.js #card-backdrop {
  position: fixed; left: 0; right: 0; top: var(--stage-top); height: var(--peek); z-index: 19;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer;
}
html.js #card-backdrop:focus-visible { outline: 3px solid var(--paper); outline-offset: -6px; }
html.js #card-backdrop[hidden] { display: none !important; }

html.js #card.deed {
  --band: var(--accent); --band-ink: var(--white); --deed-pad: clamp(6px, 0.8vw, 12px);
  --page-pad: clamp(1rem, 4.5cqi, 2rem);     /* content.css's page padding; stage.js sets the measured value inline */
  position: fixed; z-index: 20; box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: var(--deed-pad); border-radius: var(--radius-card);
  background: var(--paper); color: var(--ink); font-family: var(--text);
  container-type: inline-size;
}
html.js #card.deed[hidden] { display: none !important; }
html.js #card.deed:focus, html.js #card.deed:focus-visible { outline: none; }   /* the dialog takes focus on open; its controls show theirs */

/* split: the right column. The board is as tall as the column (100svh − top − 2 margins, square); the deed
   takes what is left of the width after three margins, so the gutter between them is one margin; when
   the clamp binds, stage.js centres the board in its column. Top-aligned with the board, the deed is as
   tall as the tallest page of its section (stage.js sets the height: at least ≈ 55 % of the column, at most
   all of it; the CSS height is the full column until it does), the same on every page turn, its foot pinned
   to its bottom. Enters from the right. */
html.is-split.js #card.deed {
  top: calc(var(--stage-top) + var(--margin)); bottom: auto; right: var(--margin);
  height: calc(100vh - var(--stage-top) - 2 * var(--margin));
  height: calc(100svh - var(--stage-top) - 2 * var(--margin));
  max-height: calc(100vh - var(--stage-top) - 2 * var(--margin));
  max-height: calc(100svh - var(--stage-top) - 2 * var(--margin));
  width: clamp(34rem, 100vw - 3 * var(--margin) - (100vh - var(--stage-top) - 2 * var(--margin)), 56vw);
  width: clamp(34rem, 100vw - 3 * var(--margin) - (100svh - var(--stage-top) - 2 * var(--margin)), 56vw);
  transform: translate3d(calc(100% + var(--margin) + 1rem), 0, 0);
  transition: transform calc(var(--t-card) * 0.7) var(--ease-exit);
}
/* sheet: below the peek strip, full-bleed up to 40rem; enters from the bottom */
html.is-sheet.js #card.deed {
  top: calc(var(--stage-top) + var(--peek)); bottom: 0; left: 0; right: 0; margin: 0 auto;
  width: 100%; max-width: 40rem;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding-bottom: calc(var(--deed-pad) + env(safe-area-inset-bottom, 0px));
  transform: translate3d(0, 104%, 0);
  transition: transform calc(var(--t-card) * 0.7) var(--ease-exit);
}
html.js #card.deed.is-open { transform: none; transition: transform var(--t-card) var(--ease-out); }
/* sheet, «Una partida» and «Diez partidas»: the tall strip gives way to the short one while the visitor reads, and
   comes back for a chapter, the replay's controls or a row (stage.js toggles html.is-tall-peek): the sheet's top
   moves with the board */
html.is-sheet.js #card.deed.is-open { transition: transform var(--t-card) var(--ease-out), top var(--t-back) var(--ease-in-out); }

html.js #card .deed__frame {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  border: var(--frame-w) solid var(--board-edge); background: var(--paper);
}
html.js #card .deed__band {
  flex: none; text-align: center;
  padding: clamp(0.65rem, 2.6cqi, 1.25rem) 1rem clamp(0.7rem, 2.8cqi, 1.35rem);
  background: var(--band); color: var(--band-ink);
  border-bottom: var(--frame-w) solid var(--board-edge);
}
html.js #card .deed__title { margin: 0; display: grid; gap: 0.3rem; justify-items: center; }
html.js #card .deed__street {
  display: block; max-width: 100%;
  font: 700 min(var(--step-head), 10cqi) / 0.9 var(--display); text-transform: uppercase; letter-spacing: -0.02em;
  text-wrap: balance;
}
html.js #card .deed__name { display: block; font: 600 var(--step-lead) / 1.15 var(--text); }
html.js #card .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* focus lands on the heading when a deed opens (stage.js): a ring in the band's ink when a key opened it */
html.js #card .deed__title:focus { outline: none; }
html.js #card .deed__title:focus-visible, html.js #card .deed__title.is-ring:focus { outline: 3px solid var(--band-ink); outline-offset: 0.3rem; }
/* a short screen (1280×720, a laptop window, a phone in landscape): the band on one line, the street and the
   section side by side (≈ 88px with the frame), so the page keeps the height its chart needs */
@media (max-height: 760px) {
  html.js #card .deed__band { padding: 0.8rem 0.75rem 0.85rem; }
  html.js #card .deed__title { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 0.6em; row-gap: 0.15rem; }
  html.js #card .deed__street { font-size: min(2.5rem, 8cqi); }
  html.js #card .deed__name { font-size: var(--step-lead); line-height: 1; }
}
/* a phone in landscape (≤ 500px tall): a lower strip, a thinner band and foot, so a press of «Seguir leyendo»
   still moves four lines or more */
@media (max-height: 500px) and (orientation: landscape) {
  html.js { --stage-top: 52px; }                      /* the bar's links keep their 44px */
  html.js, html.js.is-tall-peek { --peek: 64px; }
  html.js #card .deed__band { padding: 0.4rem 0.75rem 0.45rem; }
  html.js #card .deed__street { font-size: min(1.75rem, 7cqi); }
  html.js #card .deed__name { font-size: var(--step-body); }
  html.js #card .deed__foot { padding-block: 0.25rem; }
  html.js #card .deed__next { min-height: 44px; }
}

/* the deck: the section's pages stacked in one place; only the page that is up (and one leaving) shows */
html.js #card .deed__deck { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; overflow: clip; }
html.js #card .deed__deck:focus { outline: none; }
html.js #card .deed__deck > section {
  position: absolute; inset: 0; margin: 0; padding: 0; width: auto; max-width: none;
  border: 0; border-radius: 0; background: none; transform: none;
}
html.js #card .deed__deck > section > .stop__head, html.js #card .deed__deck > section > header:first-child { display: none; }
html.js #card .deed__deck .card-page {
  position: absolute; inset: 0; box-sizing: border-box;
  width: auto; height: auto; min-height: 0; max-height: none; margin: 0;
  display: none; flex-direction: column;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  scroll-snap-align: none;
}
html.js #card .deed__deck .card-page.is-up, html.js #card .deed__deck .card-page.is-leaving { display: flex; }
/* a page reads from the top (no centring spacers; content.css pins the card to the bottom). In split it is as
   tall as the deck (--deck-h, the section's tallest page); stage.js measures every page's own height with
   .is-measure, in a single layout, put back within the same frame */
html.is-split.js #card .deed__deck .card-page { bottom: auto; height: var(--deck-h, 100%); }
html.js #card .deed__deck .card-page.is-measure { display: flex !important; bottom: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; }
html.js #card .deed__deck .card-page.is-measure:not(.is-up):not(.is-leaving) { visibility: hidden; }
/* the deck's last visible line is never sliced by the foot: a strip of the deed's own paper (stage.js sets its
   height) covers the line, or the card or row, that the deck's bottom edge would cut; it scrolls into view whole */
html.js #card .deed__fold { position: absolute; left: 0; right: var(--fold-sb, 0px); bottom: 0; z-index: 3; height: var(--fold, 0px); background: var(--paper); pointer-events: none; }
html.js #card .deed__deck .card-page.is-leaving { overflow: hidden; }
html.js #card .deed__deck .card-page.is-up { z-index: 1; }
html.js #card .deed__deck .card-page.is-leaving { z-index: 2; pointer-events: none; }
html.js #card .deed__deck .card-page:focus { outline: none; }
/* each page's own «Siguiente» link: the foot carries the one next button */
html.js #card .card-page .next { display: none; }
/* in split the board's figure plate carries the page's verdict: the page's own one-line copy is for the sheet */
html.is-split .card-page .verdict { display: none; }

/* the foot: back to the board · k de n · the next step. Its two ends sit on the page's content edges
   (--page-pad: the up page's inline padding, measured by stage.js; the fallback is content.css's). */
html.js #card .deed__foot {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  column-gap: 0.75rem; padding: 0.5rem var(--page-pad);
  background: var(--paper); border-top: var(--frame-w) solid var(--board-edge);
}
html.js #card .deed__back {
  justify-self: start; appearance: none; margin: 0; border: 0; border-radius: var(--radius-btn); background: none; cursor: pointer;
  min-height: 44px; padding: 0; color: var(--ink); text-align: left;
  font: 600 var(--step-small) / 1.2 var(--text);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.08em;
  transition: text-decoration-color var(--t-hover) ease;
}
html.js #card .deed__back[hidden] { display: block !important; visibility: hidden; }
html.js #card .deed__back:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
html.js #card .deed__count { justify-self: center; font: 600 var(--step-small) / 1 var(--text); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
html.js #card .deed__next {
  justify-self: end; appearance: none; margin: 0; border: 0; border-radius: var(--radius-btn); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 48px; padding: 0 1.25em; max-width: 100%;
  background: var(--accent); color: var(--accent-ink);
  font: 600 var(--step-body) / 1.2 var(--text); white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
html.js #card .deed__next:active { transform: scale(0.97); }
html.js #card .deed__next:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  html.js #card .deed__next:hover { background: var(--accent-2); }
  html.js #card .deed__back:hover { text-decoration-color: currentColor; }
}

html.js .sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── reduced motion: the dice show the result, the token jumps, the deed fades, pages crossfade ── */
@media (prefers-reduced-motion: reduce) {
  html.js #stage { transition: none; }
  html.is-split.js #card.deed, html.is-sheet.js #card.deed { transform: none; opacity: 0; transition: opacity 120ms linear; }
  html.is-sheet.js #card.deed.is-open { transition: opacity 120ms linear; }   /* the strip changes at once */
  html.js #card.deed.is-open { opacity: 1; }
  html.js .progress__bar::after, html.js #tirar, html.js #card .deed__next { transition: none; }
  html.js #tirar:active, html.js #card .deed__next:active { transform: none; }
  html.js .burst i { animation: none; display: none; }
}