/* Monopoly Arena — spicy4tuna/partida.css
   The viewer of the spicy4tuna game. Same product as the bot games' viewer (arena/viewer/game.html): the felt
   bar, one deed per player, the transport bar over the board, the side sheet with its tabs. An app screen
   (tasteskill references/app-screens.md): quiet panels split by tone, aligned figures, colour spent on the
   data (the seats, the colour groups, the current event). Variables come from ../theme.css. */

:root {
  /* viewer-local names, as in the bot games' viewer */
  --paper-3: #e2e2dc;          /* a second neutral step under --paper-2 (hover) */
  --paper-4: #d2d2cb;          /* a third (the scrubber's rail) */
  --good: #177a42; --bad: var(--accent-2);
  --felt-ink: #cfdbd3;         /* text on the felt bar */
  --future: #74746e;           /* log rows after the current time */
  --cur: #fbe6e4;              /* the current event's row: a pale step of the accent */
  --mk-trade: var(--ink);      /* the scrubber's marks */
  --mk-dec: var(--g-azul);
  --mk-moment: var(--accent);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper-2); color: var(--ink); font: 15px/1.45 var(--text); font-variant-numeric: tabular-nums; -webkit-text-size-adjust: 100%; }
button, input, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- the felt bar */
.bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding: 10px 22px; background: var(--table); color: var(--felt-ink); }
.mark { display: inline-block; padding: 7px 10px 6px; background: var(--accent); color: var(--accent-ink); font: 700 26px/0.9 var(--display); text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.mark:hover { background: var(--accent-2); }
.bar__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; min-width: 0; }
.bar h1 { margin: 0; font: 600 18px/1.25 var(--text); color: var(--white); }
.bar__meta { margin: 0; font-size: 16px; color: var(--felt-ink); }
.bar__meta b { color: var(--white); font-weight: 600; }
.bar__links { display: flex; flex-wrap: wrap; gap: 0 16px; margin-left: auto; }
.hlink { display: inline-flex; align-items: center; min-height: 36px; color: var(--white); font: 600 14px/1 var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hlink:hover { color: var(--paper-3); }

/* ---------------------------------------------------------------- the plain document (no JavaScript) */
html.js #doc { display: none; }
.doc { max-width: 76ch; margin: 0 auto; padding: 24px 22px 48px; }
.doc__lead { font-size: var(--step-body); margin: 0 0 10px; }
.doc__links { margin: 0 0 28px; }
.doc a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc h2 { margin: 32px 0 12px; font: 700 var(--step-head)/1 var(--display); text-transform: uppercase; }
.doc h3 { margin: 0 0 4px; font: 600 18px/1.3 var(--text); }
.doc__list { margin: 0; padding: 0; list-style: none; }
.doc__list > li { margin: 0 0 12px; padding: 14px 16px; background: var(--paper); border-radius: var(--radius-card); }
.doc__list p { margin: 6px 0; }
.doc__meta { color: var(--ink-2); font-size: 14px; }
.doc__sides, .doc__verdicts { margin: 6px 0; padding-left: 18px; }
.doc__alts { width: 100%; margin: 10px 0; border-collapse: collapse; font-size: 14px; }
.doc__alts caption { text-align: left; color: var(--ink-2); padding-bottom: 4px; }
.doc__alts th, .doc__alts td { text-align: right; padding: 5px 8px; background: var(--paper-2); border-bottom: 2px solid var(--paper); vertical-align: top; }
.doc__alts th:first-child { text-align: left; font-weight: 400; }
.doc__alts thead th { background: none; color: var(--ink-2); font-weight: 500; }
.doc__alts td span { color: var(--ink-2); }
.doc__alts tr.is-real th, .doc__alts tr.is-real td { background: var(--cur); font-weight: 600; }
.doc__method { color: var(--ink-2); font-size: 14px; }
.doc .clip { margin-top: 10px; }

/* ---------------------------------------------------------------- the viewer's grid */
.loading, .fail { width: calc(100% - 44px); max-width: calc(76ch - 44px); margin: 24px auto 0; padding: 14px 18px; background: var(--paper); border-radius: var(--radius-card); }
.fail b { font-weight: 600; }
.fail a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.v { display: grid; grid-template-columns: minmax(520px, 760px) minmax(380px, 1fr); grid-template-areas: "players players" "transport side" "board side" "below side"; grid-template-rows: auto auto auto 1fr; align-items: start; gap: 12px 16px; padding: 16px 22px 24px; }
#players { grid-area: players; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#transport { grid-area: transport; min-width: 0; }
#boardwrap { grid-area: board; position: relative; min-width: 0; }
#below { grid-area: below; min-width: 0; }

/* ---------------------------------------------------------------- seats: one deed per player */
.pcard { --pc-ink: var(--white); display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius-card); overflow: hidden; min-width: 0; }
.pcard.ink { --pc-ink: var(--ink); }   /* the green and yellow seats take ink */
.pcard .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 38px; padding: 8px 14px 7px; background: var(--pc); color: var(--pc-ink); }
.pcard .nm { font: 700 21px/0.95 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .place { font: 600 14px/1 var(--text); white-space: nowrap; }
.pcard .place.win { padding: 4px 7px; background: var(--paper); color: var(--ink); }
.pcard .nums { display: flex; flex-wrap: wrap; gap: 0 16px; padding: 8px 14px 0; font-size: 14px; color: var(--ink-2); }
.pcard .nums b { font-size: 19px; font-weight: 600; color: var(--ink); }
.pcard .small { padding: 2px 14px 10px; font-size: 13.5px; color: var(--ink-2); }
.pcard .pacts { margin: 0; padding: 0 10px 10px; list-style: none; }
.pcard .pacts li.none { background: none; color: var(--ink-2); padding-left: 4px; }
.pcard .pacts li { margin-top: 4px; padding: 4px 8px; background: var(--paper-2); border-radius: 4px; font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.pcard.out .top { background: var(--paper-3); color: var(--ink-2); }
.pcard.out .nums b { color: var(--ink-2); }

/* ---------------------------------------------------------------- transport */
#controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px; background: var(--paper); border-radius: var(--radius-card); }
#controls button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-btn); background: var(--paper-2); color: var(--ink); cursor: pointer; font: 600 15px/1 var(--text); }
#controls button:hover { background: var(--paper-3); }
#controls button:active { transform: translateY(1px); }
#controls button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; flex: none; }
#controls #bPlay { min-width: 118px; background: var(--accent); color: var(--accent-ink); }
#controls #bPlay:hover { background: var(--accent-2); }
#speed { min-height: 44px; border: 0; border-radius: var(--radius-btn); background: var(--paper-2); color: var(--ink); padding: 0 10px; font: 500 15px var(--text); cursor: pointer; }
#clock { flex: none; min-width: 132px; padding: 0 8px 0 4px; font: 600 15px/1 var(--text); white-space: nowrap; text-align: right; }
#clock span { color: var(--ink-2); font-weight: 400; }

/* the scrubber: a native range over a drawn rail, with the trades, decisions and moments marked on it;
   the rail and the marks are inset by half the thumb so a mark sits where the thumb stops */
.scrub { --thumb: 18px; position: relative; flex: 1 1 200px; min-width: 160px; height: 44px; margin: 0 4px; }
.scrub__rail, .scrub__marks { position: absolute; left: calc(var(--thumb) / 2); right: calc(var(--thumb) / 2); pointer-events: none; }
.scrub__rail { top: 19px; height: 6px; background: var(--paper-4); }
.scrub__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ink); }
.scrub__marks { top: 10px; height: 24px; }
.scrub__marks i { position: absolute; top: 0; width: 3px; height: 7px; margin-left: -1.5px; background: var(--mk-trade); }
.scrub__marks i.k-dec { top: auto; bottom: 0; background: var(--mk-dec); }
.scrub__marks i.k-moment { top: 0; height: 24px; width: 2px; margin-left: -1px; background: var(--mk-moment); }
#scrub { position: relative; z-index: 1; display: block; width: 100%; height: 44px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
#scrub::-webkit-slider-runnable-track { height: 44px; background: none; border: 0; }
#scrub::-moz-range-track { height: 44px; background: none; border: 0; }
#scrub::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--thumb); height: 26px; margin-top: 9px; border: 3px solid var(--paper); border-radius: 3px; background: var(--accent); }
#scrub::-moz-range-thumb { width: 12px; height: 20px; border: 3px solid var(--paper); border-radius: 3px; background: var(--accent); }
#scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

#now { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; padding: 6px 6px 6px 14px; background: var(--paper); border-radius: var(--radius-card); min-height: 56px; }
#now .t { flex: 1 1 260px; font-weight: 600; }
#now .t .sub { display: block; font-weight: 400; font-size: 14px; color: var(--ink-2); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; flex: none; }
.quiet { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-btn); background: var(--paper-2); color: var(--ink); font: 600 14px/1.2 var(--text); cursor: pointer; text-align: left; }
.quiet:hover { background: var(--paper-3); }
.quiet svg { width: 12px; height: 12px; fill: var(--accent); flex: none; }
#nowclip { margin-top: 8px; padding: 10px; background: var(--paper); border-radius: var(--radius-card); }
#nowclip .dock__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

/* ---------------------------------------------------------------- the board */
#board.board-host { position: relative; display: block; }
.p-clock { font-family: var(--display); font-weight: 700; fill: var(--ink); text-anchor: middle; letter-spacing: 0.01em; }
.p-sub { font-family: var(--text); font-weight: 500; fill: #3d5a44; text-anchor: middle; }
.p-win { font-family: var(--display); font-weight: 700; fill: var(--accent); text-anchor: middle; }

/* ---------------------------------------------------------------- charts (hand-drawn SVG) */
.chart { display: block; width: 100%; background: var(--paper); border-radius: var(--radius-card); cursor: crosshair; touch-action: pan-y; }
.chart text { font: 500 11.5px var(--text); fill: var(--ink-2); }
.chart .grid { stroke: var(--paper-2); stroke-width: 1; }
.chart .cursor { stroke: var(--ink); stroke-width: 1; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; }
#cashchart { height: 150px; margin-top: 12px; }
#probchart { height: 260px; }
.legend { font-size: 14px; color: var(--ink-2); margin: 8px 0 0; max-width: 72ch; }
.legend .sw { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 2px; vertical-align: -1px; }
.keys { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; }
.keys b { font-weight: 600; }

/* ---------------------------------------------------------------- side sheet */
aside.side { grid-area: side; display: flex; flex-direction: column; min-height: 600px; height: calc(100svh - 28px); position: sticky; top: 14px; background: var(--paper); border-radius: var(--radius-card); overflow: hidden; }
.dock { flex: none; padding: 10px 12px 12px; background: var(--paper); border-bottom: 3px solid var(--paper-2); }
.dock__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dock__title { flex: 1; min-width: 0; font: 600 15px/1.3 var(--text); }
.dock__title span { color: var(--ink-2); font-weight: 400; }
.xbtn { flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--radius-btn); background: var(--ink); color: var(--white); font: 600 14px/1 var(--text); cursor: pointer; }
.xbtn:hover { background: var(--accent); }
.tabs { display: flex; flex-wrap: wrap; flex: none; background: var(--paper); }
.tabs button { flex: 1 0 auto; min-height: 46px; border: 0; border-bottom: 3px solid var(--paper-2); background: none; padding: 0 10px; cursor: pointer; font: 600 15px/1 var(--text); color: var(--ink-2); white-space: nowrap; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tabs .n { font-size: 13px; color: var(--ink-2); font-weight: 400; }
.pane { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.pane[hidden] { display: none; }
.pane__intro { margin: 0; padding: 10px 12px 2px; font-size: 14px; color: var(--ink-2); }

/* the log */
.log { padding: 4px 0 12px; }
.row { display: flex; gap: 8px; padding: 4px 12px; font-size: 14px; line-height: 1.45; cursor: pointer; border-left: 3px solid transparent; }
.row:hover { background: var(--paper-2); }
.row.cur { background: var(--cur); border-left-color: var(--accent); }
.row.future { color: var(--future); }
.row .r { flex: none; min-width: 56px; color: var(--ink-2); text-align: right; }
.row.future .r { color: var(--future); }
.row .dots { flex: none; display: inline-flex; gap: 3px; width: 21px; padding-top: 6px; }
.row .dots .dot { margin: 0; }
.row .tx { min-width: 0; }
.row .tx .sub { display: block; color: var(--ink-2); }
.row.future .tx .sub { color: var(--future); }
.row.k-trade .tx > b, .row.k-out .tx, .row.k-end .tx { font-weight: 700; }
.row.k-dec .tx > b { color: var(--g-azul); font-weight: 600; }
.row.k-start { margin-bottom: 4px; font-weight: 600; }
.insp { display: inline-flex; align-items: center; min-height: 24px; margin-left: 6px; padding: 0 8px; border: 0; border-radius: var(--radius-btn); background: var(--paper-3); color: var(--ink); font: 600 13px/1 var(--text); cursor: pointer; vertical-align: 1px; }
.insp:hover { background: var(--ink); color: var(--white); }
@media (pointer: coarse) { .insp { min-height: 36px; } }
.moment { margin: 8px 12px; padding: 10px 12px 12px; background: var(--paper-2); border-radius: var(--radius-card); border-left: 4px solid var(--mk-moment); cursor: pointer; }
.moment.cur { background: var(--cur); }
.moment.future { color: #62625c; }   /* --future, one step darker for the grey card */
.moment .mt { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); }
.moment h3 { margin: 0 0 4px; font: 600 16px/1.3 var(--text); color: inherit; }
.moment p { margin: 0 0 8px; font-size: 14px; }
.moment .clip__play { background: var(--paper); }
.moment .clip__play:hover { background: var(--paper-3); }

/* trades: a deed-like card per trade */
.cards { padding: 2px 0 12px; }
.card { margin: 10px 12px; border-radius: var(--radius-card); overflow: hidden; background: var(--paper-2); scroll-margin-top: 10px; }
.card { border-left: 4px solid transparent; }
.card.is-sel { border-left-color: var(--accent); }
.card .th { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 12px 0; font-size: 14px; color: var(--ink-2); }
.card .th b { color: var(--ink); font-weight: 600; }
.card h3 { margin: 2px 12px 8px; font: 600 16px/1.3 var(--text); }
.card .sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px; }
.card .side { background: var(--paper); border-radius: 4px; padding: 6px 9px; font-size: 14px; }
.card .side b { font-weight: 600; }
.card .pact { margin: 8px 12px 0; font-size: 14px; }
.card .pact b { font-weight: 600; }
.card .body { margin: 0 12px 8px; font-size: 14.5px; }
.card .acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 10px 12px 12px; }
.card .acts .clip { flex: 1 1 240px; }
.card .acts .clip__play { background: var(--paper); }
.card .acts .clip__play:hover { background: var(--paper-3); }
.gobtn { flex: none; min-height: 56px; padding: 0 14px; border: 0; border-radius: var(--radius-btn); background: var(--ink); color: var(--white); font: 600 14px/1.2 var(--text); cursor: pointer; }
.gobtn:hover { background: var(--accent); }
.card .clip__close, .moment .clip__close { background: var(--paper); }
.verdicts { margin: 0 12px 8px; padding: 0; list-style: none; font-size: 14px; }
.verdicts li { padding: 2px 0; }
.verdicts b { font-weight: 600; }

/* a decision's alternatives: win % per decider, the real one marked */
.alts { width: calc(100% - 24px); margin: 4px 12px 0; border-collapse: separate; border-spacing: 0 2px; font-size: 14px; }
.alts caption { caption-side: top; text-align: left; padding: 0 0 4px; font-size: 13.5px; color: var(--ink-2); }
.alts th, .alts td { padding: 5px 8px; background: var(--paper); vertical-align: top; }
.alts thead th { background: none; padding-bottom: 2px; color: var(--ink-2); font-weight: 500; text-align: right; white-space: nowrap; }
.alts thead th:first-child { text-align: left; }
.alts tbody th { text-align: left; font-weight: 400; }
.alts td { text-align: right; white-space: nowrap; width: 1%; }
.alts td b { font-weight: 600; }
.alts td span { display: block; color: var(--ink-2); font-size: 13px; }
.alts tr.is-real th, .alts tr.is-real td { background: var(--cur); }
.alts tr.is-real th { border-left: 3px solid var(--accent); }
.alts .tag { display: inline-block; margin-left: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent-2); white-space: nowrap; }

/* probability */
.prob { padding: 12px; }
.prob h3 { margin: 18px 0 4px; font: 600 15px/1.3 var(--text); }
.prob p { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }

/* a square's sheet */
#modal { position: fixed; inset: 0; z-index: 10; background: rgba(13, 43, 34, .62); }
#modal .box { position: absolute; left: 50%; top: 50%; width: min(460px, calc(100vw - 32px)); max-height: calc(100svh - 48px); transform: translate(-50%, -50%); display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius-card); overflow: hidden; }
#modal .mh { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; background: var(--paper-2); }
#modal .mh b { font: 700 23px/1.05 var(--display); text-transform: uppercase; }
#modal .mb { overflow: auto; padding: 12px 18px 18px; }
#modal .mb p { margin: 0 0 10px; }
.hist { display: flex; gap: 10px; width: 100%; padding: 6px 0; border: 0; background: none; text-align: left; font: 400 14px/1.45 var(--text); color: var(--ink); cursor: pointer; }
.hist:hover { color: var(--accent-2); }
.hist span { flex: none; min-width: 56px; color: var(--ink-2); }

/* ---------------------------------------------------------------- one column (tablet and phone) */
@media (max-width: 1100px) {
  .v { grid-template-columns: minmax(0, 1fr); grid-template-areas: "transport" "board" "players" "below" "side"; grid-template-rows: none; }
  #players { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  aside.side { position: static; height: 78svh; min-height: 480px; }
  .dock { display: none; }
}
@media (max-width: 560px) {
  .bar { padding: 10px 16px; gap: 6px 12px; }
  .mark { font-size: 22px; }
  .bar h1 { font-size: 17px; }
  .bar__meta { font-size: 15px; }
  .bar__links { margin-left: 0; }
  .v { padding: 10px 16px 16px; gap: 12px; }
  #players { gap: 8px; }
  .pcard .top { flex-wrap: wrap; row-gap: 3px; padding: 7px 10px 6px; }
  .pcard .nm { flex: none; max-width: 100%; font-size: 19px; }
  .pcard .nums, .pcard .small { padding-left: 10px; padding-right: 10px; }
  .pcard .nums { gap: 0 10px; }
  .pcard .pacts { padding: 0 6px 8px; }
  .pcard .pacts li { font-size: 13px; }
  #controls { gap: 4px; padding: 4px; }
  #controls button { padding: 0 9px; }
  #controls #bPlay { flex: 1 1 auto; min-width: 0; }
  .scrub { flex: 1 1 100%; order: 5; margin: 0 2px; }
  #clock { min-width: 0; margin-left: auto; }
  #now { padding-left: 10px; }
  .card .sides { grid-template-columns: 1fr; }
  .tabs { display: grid; grid-template-columns: repeat(2, 1fr); }
  .tabs button { padding: 0 4px; font-size: 14.5px; }
  .row .r { min-width: 52px; }
}
@media (max-width: 340px) { #players { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: no-preference) {
  .mark, #controls button, .quiet, .tabs button, .insp, .gobtn, .xbtn, .row, .hist {
    transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
  }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* the dock and the clip under the transport bar close from their own head */
.dock .clip__close, #nowclip .clip__close { display: none !important; }