/* lowkey party games: board engine (team trivia, سين جيم style). Only board- classes. */

/* team colours: calm tints, one per team */
.board-t0 { --team: #1f5279; --team-soft: #c6d8e6; }
.board-t1 { --team: #8a2f1b; --team-soft: #efd2c4; }
.board-t2 { --team: #6a4700; --team-soft: #f0dfae; }
.board-t3 { --team: #5d3a6a; --team-soft: #ddcfe3; }

.board-dot { width: .7em; height: .7em; border-radius: 50%; background: var(--team, var(--muted)); flex: none; }

/* the board wants more room than a card when the group goes full screen */
.party-root.is-full .party-stage:has(.board-wide) { max-width: 1400px; }

/* party.css sets `font: 600 1.05rem/1.2 inherit`, which browsers drop (inherit cannot sit in a shorthand); restate it here */
.board-screen .party-btn, .board-setup .party-btn { font-size: 1.05rem; font-weight: 600; line-height: 1.2; }
.board-screen .party-btn.is-small, .board-setup .party-btn.is-small { font-size: .95rem; }
.board-screen .party-btn.is-big, .board-setup .party-btn.is-big { font-size: 1.15rem; }
.board-setup .party-chip { font-size: .98rem; font-weight: 500; line-height: 1.2; }
.board-setup .party-chip.is-on, .board-setup .party-chip.is-level { font-weight: 600; }

.board-screen { display: flex; flex-direction: column; gap: .9rem; flex: 1; min-width: 0; }

/* ---------- setup ---------- */
.board-continue { display: grid; gap: .4rem; text-align: center; }
.board-team-list { display: grid; gap: .5rem; }
.board-team-row { display: flex; align-items: center; gap: .6rem; }
.board-team-row input { flex: 1; min-width: 0; min-height: 56px; font: inherit; font-size: 1.1rem; font-weight: 600; padding: .6rem 1rem; border: 0; border-radius: 14px; background: var(--field, #f6f6f8); color: var(--ink, #1d1d1f); box-shadow: inset 0 0 0 1px var(--box-edge, rgb(0 0 0 / .06)); }
.board-team-row input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--team); }
.board-team-row .party-x { width: 56px; height: 56px; flex: none; }
.board-add-team { justify-self: start; }
.board-cat-hint { margin-top: -.5rem; }
.board-tv { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .8rem 1rem; border-radius: 16px; background: var(--box, #f5f5f7); }
.board-tv .party-hint { flex: 1 1 14rem; }

/* ---------- scoreboard, always on top ---------- */
.board-scores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: .5rem; }
.board-score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem; min-width: 0; padding: .45rem .6rem; border-radius: 14px; background: var(--box, #f5f5f7); box-shadow: inset 0 0 0 1px var(--box-edge, rgb(0 0 0 / .06)); }
.board-score.is-now { background: var(--team-soft); box-shadow: inset 0 0 0 2px var(--team); }
.board-score-name { font-size: .9rem; font-weight: 600; color: var(--ink-2, #3a3a3d); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-score-num { font-family: var(--display, inherit); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.4rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
html[lang="ar"] .board-score-num { letter-spacing: 0; }

.board-turn { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0; font-size: 1.1rem; font-weight: 650; text-align: center; }

/* ---------- the grid ---------- */
.board-scroll { overflow-x: auto; margin-inline: -.25rem; padding: .25rem; -webkit-overflow-scrolling: touch; }
.board-grid { --gap: clamp(4px, .9vw, 10px); display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(50px, 1fr)); gap: var(--gap); min-width: min-content; }
.board-row { display: contents; }
.board-head { display: flex; align-items: flex-end; justify-content: center; min-height: 2.9em; padding: 0 2px .15rem; text-align: center; font-size: clamp(.72rem, .55rem + .75vw, 1.15rem); font-weight: 650; line-height: 1.15; color: var(--ink-2, #3a3a3d); }
html[lang="ar"] .board-head { line-height: 1.35; }
.board-head span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; overflow-wrap: normal; word-break: normal; }
.board-head span.is-squeezed { overflow-wrap: anywhere; }
.board-grid > .board-row > div { display: flex; min-width: 0; }
.board-cell { flex: 1; min-width: 0; min-height: clamp(56px, 8vh, 112px); display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 12px; background: var(--forest, #3a683e); color: var(--cream, #fff6e6); box-shadow: 0 3px 0 #254526; font-family: var(--display, inherit); font-weight: 800; font-size: clamp(1rem, .7rem + 1.3vw, 2rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .12s ease, background-color .12s ease; }
html[lang="ar"] .board-cell { letter-spacing: 0; font-size: clamp(1.15rem, .8rem + 1.5vw, 2.3rem); }
.board-cell:hover:not(:disabled) { filter: brightness(1.1); }
.board-cell:active:not(:disabled) { transform: scale(.96); }
.board-cell:focus-visible { outline: 3px solid var(--focus, #0071e3); outline-offset: 2px; }
.board-cell.is-used { cursor: default; background: rgb(28 41 37 / .08); color: color-mix(in srgb, var(--muted, #5e5e63) 55%, transparent); box-shadow: none; }
.board-cell.is-used .board-cell-pts { text-decoration: line-through; text-decoration-thickness: 2px; }
.board-cell.is-won { background: color-mix(in srgb, var(--team-soft) 70%, var(--band, #e4e4e8)); color: color-mix(in srgb, var(--team) 60%, transparent); }
.board-cell.is-empty { flex: 1; min-height: clamp(56px, 8vh, 112px); border-radius: 12px; background: transparent; border: 1px dashed var(--line, #d2d2d7); }

.board-foot .party-btn, .board-setup .party-btn.is-small { min-height: 56px; padding-inline: 1.2rem; }
.board-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: auto; padding-top: .25rem; }
.board-end.is-armed { color: var(--bad, #b3261e); }

/* ---------- question ---------- */
.board-card { min-height: 14rem; }
.board-kicker { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .9rem; }
.board-kicker-pts { font-variant-numeric: tabular-nums; }
.board-x2 { display: inline-block; padding: 0 .45em; border-radius: 999px; background: var(--blue-btn, #0068d6); color: #fff; font-weight: 700; }
.board-q { font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.6rem); }
.board-card.is-revealed .board-q { font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.8rem); }
.board-answer { margin-top: .4rem; padding-top: .9rem; border-top: 1px solid var(--line, #d2d2d7); }
.board-answer-label { margin: 0; font-size: .95rem; font-weight: 600; color: var(--good, #1a7f4b); }
.board-answer-text { margin: .1rem 0 0; font-size: clamp(1.75rem, 1.1rem + 2vw, 3rem); font-weight: 700; line-height: 1.25; color: var(--ink, #1d1d1f); overflow-wrap: anywhere; }
.board-qmeta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem 1rem; }
.board-tools { display: flex; flex-direction: column; gap: .9rem; }
.board-tools:empty, .board-clock[hidden] { display: none; }
.board-active { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.board-active li { padding: .25rem .8rem; border-radius: 999px; background: var(--blue-soft, #dbe8fb); font-size: .95rem; font-weight: 600; }

.board-clock { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem 1rem; min-height: 56px; }
.board-clock-label { font-size: .95rem; font-weight: 600; color: var(--muted, #5e5e63); }
.board-clock-num { min-width: 2ch; line-height: 1; }
.board-clock-btns { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.board-clock-btns .party-btn { min-height: 56px; }

.board-lifelines { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; }
.board-life { min-height: 56px; padding: .45rem .8rem; border-radius: 16px; border: 0; background: var(--field, #f6f6f8); color: var(--ink, #1d1d1f); box-shadow: inset 0 0 0 1px var(--box-edge, rgb(0 0 0 / .06)); font-family: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2; cursor: pointer; touch-action: manipulation; overflow-wrap: break-word; }
.board-life.is-on { background: var(--blue-soft, #dbe8fb); box-shadow: inset 0 0 0 2px var(--blue-btn, #0068d6); }
.board-life:disabled { cursor: default; }
.board-life:disabled:not(.is-on) { opacity: .5; }

.board-actions .board-back { flex: 0 1 auto; }
.board-actions .board-reveal { flex: 1 1 12rem; width: auto; }
.board-award { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
.board-award .board-award-btn.is-quiet { grid-column: 1 / -1; min-height: 56px; }
.board-award-btn { flex-direction: column; gap: 0; min-height: 64px; line-height: 1.2; }
.board-award-btn[class*="board-t"] { background: var(--team-soft); box-shadow: inset 0 0 0 2px var(--team); color: var(--ink, #1d1d1f); }
.board-award-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-award-btn b { font-variant-numeric: tabular-nums; color: var(--team); font-size: 1.1rem; }

/* ---------- end ---------- */
.board-final { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.board-final li { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; border-radius: 16px; background: var(--box, #f5f5f7); font-size: 1.15rem; }
.board-final li.is-win { background: var(--team-soft); box-shadow: inset 0 0 0 2px var(--team); }
.board-final-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.board-final b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.board-endscreen .party-actions > .party-btn.is-primary { flex-basis: 100%; }

@media (min-width: 900px) {
  .board-tools { flex-direction: row; align-items: center; }
  .board-tools .board-clock { flex: 0 0 auto; justify-content: flex-start; }
  .board-tools .board-lifelines { flex: 1; }
  .party-root.is-full .board-card { padding-block: 1.4rem; }
}
/* full screen on a laptop or TV: the whole board fits without scrolling */
.party-root.is-full .board-cell, .party-root.is-full .board-cell.is-empty { min-height: clamp(56px, calc((100vh - 28.5rem) / 6), 120px); }
@media (max-width: 600px) { .board-award[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) {
  .board-grid { --gap: 4px; grid-template-columns: repeat(var(--cols, 6), minmax(46px, 1fr)); }
  .board-cell { border-radius: 10px; }
  .board-score { padding: .35rem .4rem; }
  .board-score-name { font-size: .8rem; }
  .board-head { font-size: .68rem; letter-spacing: -.01em; }
  html[lang="ar"] .board-head { font-size: .72rem; letter-spacing: 0; }
  .board-life { font-size: .92rem; padding: .4rem .5rem; }
}
@media (prefers-reduced-motion: reduce) { .board-cell { transition: none; } .board-cell:active:not(:disabled) { transform: none; } }