/* Monopoly Arena — board.css
   Every style of the SVG board drawn by board.js: the frame, the squares, the two decks in the
   centre field, the stop pennants, the hover/focus pop, the tooltip and the base styles of the
   pieces layer. Colours, faces and timings come from theme.css. The board is a printed object:
   its own lines and edges are its print; the one effect outside it is its thickness on the table.
   Stop selectors are scoped to .board (the page has section.stop too). */

.board {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  overflow: visible;
  font-family: var(--text);
  box-shadow: 0 clamp(3px, 0.7vmin, 6px) 0 #1e2022, 0 clamp(8px, 1.6vmin, 16px) clamp(10px, 2vmin, 22px) -6px rgb(0 0 0 / .5); /* taste-skill-ignore: real object (board thickness) */
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.board text, .glyph, .sq__band, .sq__tint, .sq__state, .sq__ring { pointer-events: none; }
/* .sq .f-display also reaches the pop clone: the tree a <use> clones has no .board ancestor */
.board .f-display, .sq .f-display { font-family: var(--display); font-weight: 700; }

/* frame and field */
.board-edge { fill: var(--board-edge); }
.board-field { fill: var(--board); }
.board-fieldline { fill: none; stroke: var(--square-line); stroke-width: 1.2; opacity: .55; }
.board-grain { pointer-events: none; }
.board-grain__rect { opacity: .085; mix-blend-mode: multiply; }

/* centre field: the two decks, face down (filled like the page's cards) */
.board-deck__card { stroke: var(--board-edge); stroke-width: 2; }
.board-deck--chest .board-deck__card { fill: var(--caja); }
.board-deck--chance .board-deck__card { fill: var(--suerte); }
.board-deck__t, .board-deck__q { fill: var(--ink); }
.board-deck .glyph { stroke-width: 2.4; }

/* a square */
.sq { cursor: pointer; outline: none; }
.sq__paper { fill: var(--square); stroke: var(--square-line); stroke-width: 1.6; }
.sq__tint { pointer-events: none; }
.sq__band { stroke: var(--square-line); stroke-width: 1.6; }
.sq__name { fill: var(--ink); letter-spacing: .01em; }
.sq__price { font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; }
.sq__question { fill: var(--red); }
.sq__cornertitle { fill: var(--ink); }
.sq__cornernote { fill: var(--ink); letter-spacing: .02em; }
.sq__arrow { fill: var(--red); stroke: var(--board-edge); stroke-width: 1.1; stroke-linejoin: round; }
.sq__cellpaper { fill: var(--g-naranja); fill-opacity: .55; stroke: var(--square-line); stroke-width: 1.6; }
.sq__celltitle { fill: var(--ink); }
.sq__visit { fill: var(--ink); letter-spacing: .04em; }
.glyph { fill: none; stroke: var(--ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

/* owners, houses, mortgage */
.sq__dot { stroke: var(--board-edge); stroke-width: 1; }
.sq__house { fill: var(--g-verde); stroke: var(--board-edge); stroke-width: .9; }
.sq__hotel { fill: var(--red); stroke: var(--board-edge); stroke-width: .9; }
.sq__roof { fill: none; stroke: var(--board-edge); stroke-width: .9; stroke-linejoin: round; }
/* a mortgage: the game's red rubber stamp, tilted across the name; its box knocks the print back so
   the word reads (board.js sizes it to the square) */
.sq__stamp-box { fill: var(--square); fill-opacity: .9; stroke: var(--red); stroke-width: 2.2; }
.sq__stamp { fill: var(--red); letter-spacing: .04em; }

/* the ring of a square that is pointed at (ink) or keyboard-focused / just landed on (red); it is
   drawn last in the square, so the pop clone carries it whole */
.sq__ring { fill: none; stroke: none; }
.sq.is-hover .sq__ring, .sq.is-hot .sq__ring { stroke: var(--ink); stroke-width: 3; }
.sq.is-focus .sq__ring, .sq.is-landed .sq__ring { stroke: var(--red); stroke-width: 3; }

/* the pop: a <use> clone of the square on a layer above its neighbours, scaled 1.05 */
.board-pop, .board-pop .pop { pointer-events: none; }
.board-pop .pop {
  transform: scale(1); transform-box: view-box;
  transition: transform var(--t-press) var(--ease-out);
}
.board-pop .pop.is-on { transform: scale(1.05); }
.board-pop .pop.is-landed { animation: ma-land 300ms var(--ease-out); }
@keyframes ma-land {
  0% { transform: scale(1.05); }
  40% { transform: scale(1.13); }
  100% { transform: scale(1.05); }
}

/* stop pennants: group colour, display-face label, ink or white by contrast (board.js sets .stop--ink) */
.board-stops { pointer-events: none; }
.board .stop { pointer-events: all; cursor: pointer; transform-box: view-box; }
.board .stop__in { transform-box: view-box; transition: transform var(--t-press) var(--ease-out); }
.board .stop.is-hot .stop__in { transform: scale(1.06); }
.board .stop.is-landed .stop__in { animation: ma-flag 320ms var(--ease-out); }
@keyframes ma-flag {
  0% { transform: scale(1); }
  45% { transform: scale(1.16); }
  100% { transform: scale(1.06); }
}
.board .stop__flag { stroke: var(--board-edge); stroke-width: 1.6; stroke-linejoin: round; }
.board .stop__label { fill: var(--white); }
.board .stop--ink .stop__label { fill: var(--ink); }

/* load: the four pennants pop out of their squares one after the other, done by about 1 s after
   the board is mounted (board.js sets --i = the stop's order and the origin at its point) */
@media (prefers-reduced-motion: no-preference) {
  html.js .board .stop { animation: ma-flag-in 320ms var(--ease-out) calc(460ms + var(--i, 0) * 70ms) both; }
}
@keyframes ma-flag-in {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: none; }
}

/* tooltip (a real overlay: ink plate, white text) */
.board-tiplayer { pointer-events: none; }
.tip .tip__in { opacity: 0; transform: scale(.94) translateY(4px); transform-box: view-box; transition: opacity var(--t-press) var(--ease-out), transform var(--t-press) var(--ease-out); }
.tip.is-on .tip__in { opacity: 1; transform: none; }
.tip__bg { fill: var(--ink); }
.tip__pointer { fill: var(--ink); }
.tip__text { fill: var(--white); }
.tip__name { font-weight: 600; }
.tip__more { font-weight: 500; opacity: .85; }

/* pieces layer: base styles the pawn and the seat discs may share */
.board-pieces { pointer-events: none; }
.board-pieces .piece { transition: transform var(--t-hop) var(--ease-out); }

/* focus: the squares a page talks about are lit (full strength, lifted a little); the rest of the
   board steps its print back, as if printed faint: only the colour band and the type of an unlit
   square fade (.sq__ink), never its paper, so no veil of the field shows through. One class on the
   svg (board.js focus()); the stop square of the open section stays readable. Owners' tints, houses
   and the mortgage stamp sit outside the print and keep their strength; flags and pieces sit on their
   own layers and never dim. */
.board .sq__ink { transition: opacity var(--t-ui) var(--ease-out); }
.board.has-focus .sq:not(.is-lit):not(.is-kept) .sq__ink { opacity: .32; }
.board.has-focus .sq.is-kept .sq__ink { opacity: .8; }
.sq__body { transform-box: fill-box; transform-origin: 50% 50%; transition: transform var(--t-ui) var(--ease-out); }
.sq.is-lit .sq__body { transform: scale(1.045); }
.sq.is-lit .sq__paper { stroke-width: 2.4; }
/* the square whose deed is open wears the ink ring, like a pointed-at square */
.sq.is-deed .sq__ring { stroke: var(--ink); stroke-width: 3; }

/* the mini title deed: a white card with the printed ink frame of the page's deed, the group's
   colour band with the street name, the price and the square's facts. board.js lays it in the
   board's slot beside its square and scales it back to its own size when the stage scales the board. */
.board-deed {
  position: absolute; left: 0; top: 0; z-index: 16; box-sizing: border-box; width: 19rem;
  transform-origin: 0 0;
  font-family: var(--text); color: var(--ink); text-align: left; line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
}
.board-deed[hidden] { display: none !important; }
.board-deed__card { box-sizing: border-box; padding: 6px; border-radius: var(--radius-card); background: var(--paper); }
.board-deed__frame { border: var(--frame-w) solid var(--board-edge); background: var(--paper); }
.board-deed__band {
  margin: 0; padding: 0.7rem 0.75rem 0.65rem; text-align: center;
  background: var(--band, var(--ink)); color: var(--band-ink, var(--white));
  border-bottom: var(--frame-w) solid var(--board-edge);
  font: 700 1.75rem / 0.92 var(--display); letter-spacing: -0.02em; text-transform: uppercase;
  text-wrap: balance; overflow-wrap: break-word;
}
.board-deed__body { padding: 0.75rem 0.875rem 0.25rem; font-size: 1rem; }
.board-deed__line { margin: 0 0 0.75rem; text-wrap: pretty; }
.board-deed__rows { margin: 0; padding: 0; }
.board-deed__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.1rem 0; }
.board-deed__row dt { margin: 0; min-width: 0; }
.board-deed__row dd { margin: 0; flex: none; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-deed__price { margin-bottom: 0.75rem; font-size: 1.1875rem; font-weight: 600; }
.board-deed__intro { margin: 0 0 0.35rem; font-size: var(--step-small); color: var(--ink-2); text-wrap: balance; }
.board-deed__foot { display: flex; justify-content: flex-end; padding: 0.5rem; }
.board-deed__close {
  appearance: none; margin: 0; border: 0; border-radius: var(--radius-btn); cursor: pointer;
  min-height: 44px; min-width: 44px; padding: 0 1.1em;
  background: var(--paper-2); color: var(--ink); font: 600 1rem / 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, transform var(--t-press) var(--ease-out);
}
.board-deed__close:active { transform: scale(0.97); }
.board-deed__close:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .board-deed__close:hover { text-decoration-color: currentColor; } }

/* it is handed over from its square: a short rise out of the side that faces the square */
.board-deed__card { --dx: 0px; --dy: 6px; transform-origin: 50% 100%; }
.board-deed[data-place="below"] .board-deed__card { --dy: -6px; transform-origin: 50% 0; }
.board-deed[data-place="right"] .board-deed__card { --dx: -6px; --dy: 0px; transform-origin: 0 50%; }
.board-deed[data-place="left"] .board-deed__card { --dx: 6px; --dy: 0px; transform-origin: 100% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .board-deed:not([hidden]) .board-deed__card { animation: ma-deed-in 200ms var(--ease-out) both; }
}
@keyframes ma-deed-in {
  from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.97); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .board-pop .pop, .board .stop__in, .tip .tip__in, .board-pieces .piece, .board .sq, .board .sq__ink, .sq__body, .board-deed__close { transition: none; }
  .board-pop .pop.is-landed, .board .stop.is-landed .stop__in { animation: none; }
}