/* 7-probability (plan 119): Olasılık Arenası (units/7-probability-boards.js) and the Hızlı Parmak figures (u7p-figure,
   units/7-probability-core.js). Theme tokens only, so light, dark and high contrast follow tokens.css and the world
   tokens of topic-games.css. A marble is a letter on its colour and a card is a rank beside its suit symbol, so no
   outcome rests on hue alone. */

/* ---------- Marbles and cards, in the boards and in the figures ---------- */
.u7p-marble { --marble-tint: var(--surface); --marble-edge: var(--ink); display: inline-grid; flex: none; place-items: center; width: 34px; height: 34px; color: var(--ink); background: var(--marble-tint); border: 3px solid var(--marble-edge); border-radius: 50%; font-size: 16px; font-weight: 900; line-height: 1; }
.u7p-marble--K { --marble-tint: var(--red-tint); --marble-edge: var(--red-base); }
.u7p-marble--M { --marble-tint: var(--brand-tint); --marble-edge: var(--brand); }
.u7p-marble--Y { --marble-tint: var(--green-tint); --marble-edge: var(--green-base); }
.u7p-marble--S { --marble-tint: var(--gold-tint); --marble-edge: var(--gold-base); }
.u7p-suit--red { color: var(--red-ink); }
.u7p-suit--black { color: var(--ink); }

.u7p-figure { display: block; width: min(100%, 360px); height: auto; margin-inline: auto; }
.u7p-bag-body, .u7p-card { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
svg .u7p-marble { fill: var(--marble-tint); stroke: var(--marble-edge); stroke-width: 3; width: auto; height: auto; background: none; border: 0; border-radius: 0; }
.u7p-mark, .u7p-rank { fill: var(--ink); font-size: 17px; font-weight: 900; text-anchor: middle; dominant-baseline: central; }
.u7p-rank { font-size: 19px; }
svg .u7p-suit { font-size: 22px; font-weight: 900; text-anchor: middle; dominant-baseline: central; }
svg .u7p-suit--red { fill: var(--red-ink); }
svg .u7p-suit--black { fill: var(--ink); }

/* ---------- Olasılık Arenası ---------- */
.u7p-board { width: min(100%, 1040px); }
.u7p-arena__work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); width: 100%; }
.u7p-arena__panel { display: grid; gap: 8px; width: min(100%, 620px); padding: 10px 14px 12px; background: var(--world-model); border: 3px solid var(--world-model-edge); border-radius: 18px; box-shadow: 0 4px 0 var(--world-band-edge); }
.u7p-arena__head { margin: 0; color: var(--world-ink); font-family: var(--font-display); font-size: clamp(17px, 1.6vw, 21px); font-weight: 900; letter-spacing: .04em; }
.u7p-arena__controls { display: grid; justify-items: center; gap: 10px; }
.u7p-arena__count { margin: 0; color: var(--ink); font-size: clamp(17px, 1.6vw, 20px); font-weight: 800; }

.u7p-outs { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.u7p-arena[data-scene="deck"] .u7p-outs { grid-template-columns: repeat(4, minmax(0, 84px)); justify-content: center; }
.u7p-out { display: grid; place-items: center; min-width: 0; min-height: var(--touch); padding: 2px; color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: 10px; }
.u7p-out[aria-pressed="true"] { background: var(--world-band); border-color: var(--world-model-edge); box-shadow: inset 0 0 0 2px var(--world-model-edge); }
.u7p-out[data-counted] { background: var(--gold-tint); border: 3px solid var(--gold-base); }
.u7p-out[data-missed] { border-color: var(--red-base); border-style: dashed; }
.u7p-out[data-answer] { background: var(--green-tint); border: 3px solid var(--green-base); opacity: 1; }
.u7p-face { display: inline-flex; align-items: baseline; justify-content: center; gap: 2px; font-size: clamp(20px, 1.9vw, 25px); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.u7p-face b { font-weight: 900; }
.u7p-face i { font-style: normal; }

.u7p-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; color: var(--ink); font-size: clamp(15px, 1.4vw, 18px); font-weight: 800; }
.u7p-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.u7p-legend__item .u7p-marble { width: 22px; height: 22px; border-width: 2px; font-size: 12px; }

.u7p-choices { display: grid; gap: 10px; width: min(100%, 460px); }
.u7p-choice { padding: 6px 16px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.u7p-choice[data-missed] { border-color: var(--red-base); border-style: dashed; }
.u7p-choice[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); opacity: 1; }

.u7p-check { min-height: var(--touch); font-size: clamp(18px, 1.7vw, 22px); }
.u7p-spark { min-height: 1.6em; margin: 0; padding: 2px 14px; color: var(--ink); background: var(--red-tint); border: 2px solid var(--red-base); border-left-width: 8px; border-radius: 12px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; text-align: center; overflow-wrap: anywhere; }
.u7p-spark:empty { visibility: hidden; }
.u7p-reason { margin: 0; padding: 6px 16px; color: var(--world-ink); background: var(--world-band); border: 2px solid var(--world-band-edge); border-radius: 14px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; text-align: center; overflow-wrap: anywhere; }

/* High contrast: no tints; the colour's letter and a thick border carry each marble, borders and weight the states. */
body.high-contrast .u7p-marble, body.high-contrast .u7p-legend__item .u7p-marble { --marble-tint: var(--surface); --marble-edge: var(--ink); }
body.high-contrast svg .u7p-marble { fill: var(--surface); stroke: var(--ink); }
body.high-contrast .u7p-out[data-counted], body.high-contrast .u7p-out[data-answer] { background: var(--surface); }
body.high-contrast .u7p-out[data-counted] { border-style: dotted; border-width: 4px; }
body.high-contrast .u7p-out[data-answer] { border-width: 4px; }
body.high-contrast .u7p-choice[data-answer] { background: var(--surface); }

/* A short landscape board (1366 x 768): the kicker goes, as on the units 1-2 boards, so the controls stand above the
   instruction bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has(.u7p-board) .question-kicker { display: none; }
  .question-card--topic:has(.u7p-board) .question-copy { margin-bottom: 8px; }
  .u7p-outs { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
  .u7p-arena[data-scene="deck"] .u7p-outs { gap: 6px; }
  .u7p-arena[data-scene="deck"] .u7p-out { min-height: 44px; }
  .u7p-arena[data-scene="deck"] .u7p-out--fixed { min-height: 34px; }
}

@media (max-width: 700px) {
  /* A 390 x 844 phone holds the whole round above the instruction bar: no head (the outcomes and the count say how
     many there are). In the fraction stage the outcomes are a picture, not buttons: shorter tiles in more columns
     (a deck of 16 is two rows of two suits); a deck is one suit per row, so the keypad stays clear of the bar. */
  .u7p-arena__panel { gap: 6px; padding: 6px 8px 8px; }
  .u7p-outs { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .u7p-arena[data-scene="deck"][data-task="pick"] .u7p-outs { grid-template-columns: repeat(4, 1fr); }
  .u7p-arena__controls { gap: 6px; }
  .u7p-arena .tg-pad, .u7p-arena .tg-pad__keys { width: 100%; }
  .u7p-arena .tg-pad__keys { grid-template-columns: repeat(var(--pad-columns, 6), minmax(0, 1fr)); gap: 6px; }
  .u7p-choices { gap: 8px; }
  .u7p-choice { padding: 4px 8px; font-size: 17px; }
  .u7p-arena__head { display: none; }
  .u7p-arena:not([data-task="pick"]) .u7p-outs { grid-template-columns: repeat(8, 1fr); gap: 4px; }
  .u7p-arena:not([data-task="pick"]) .u7p-out--fixed { min-height: 34px; }
  .u7p-arena:not([data-task="pick"]) .u7p-out .u7p-marble { width: 26px; height: 26px; border-width: 2px; font-size: 14px; }
  .u7p-arena:not([data-task="pick"]) .u7p-face { font-size: 17px; }
  .u7p-legend { gap: 2px 12px; font-size: 14px; }
}