/* Line of Reasoning: the line (a slab with numbered spots between its two named ends), the cards still to place, the
   clue slab with its check and cross badges, and two big buttons. Skinned by the theme (slab and card textures, the
   stat icons, the logo). Carried over from the Nick Challenge library's games/hotdesk/game.css; js/game.js sizes the
   cards to the room the clues leave (fitLayout). A phone on its side gets two columns: the line and its cards on one
   side, the clues and the buttons on the other (in one column the clues had no room left at all). */
.stage.reason { justify-content: flex-start; padding: 8px 10px 10px; overflow: hidden; }
.reason, .reason button { font-family: var(--script-font, var(--skin-font)); }
.reason .column { gap: 6px; }
/* ---- top: the app's back button and the sign (the logo at the left), the sound button closing the row on the
   right; the stat plaques under them */
.head { flex: none; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.reason .topbar { gap: 8px; }
.topbar__btns { display: contents; }   /* a hidden back button leaves no gap */
.sign { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
.sign__logo { height: 80px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.sign__logo[hidden] { display: none; } .sign__logo:not([hidden]) + b { display: none; }
.sign b { font-size: clamp(1.3rem, 6vw, 2rem); font-weight: 900; line-height: 1.05; color: var(--skin-accent); -webkit-text-stroke: 1.5px rgba(0,0,0,.45); text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.5); text-align: center; font-family: var(--script-font, var(--skin-font)); }
.reason .splaque__icon { background: transparent; }
/* ---- a level comes in (js/game.js puts .enter on the column at every new level): the logo, the round buttons and the
   plaques one by one, then the line, its pool, the clues and the buttons. Opacity and a short lift only, filled
   backwards: the card sizing measures heights, which a lift leaves alone, and nothing lingers once it has played.
   The header row itself never fades: an ancestor below full opacity would cut the plaques' glass off the scene. */
@keyframes enterUp { from { opacity: 0; transform: translateY(18px); } }
.column.enter .sign, .column.enter .round-btn { animation: enterUp .45s var(--ease-out) backwards; }
.column.enter .statrow > .splaque { animation: enterUp .45s var(--ease-out) backwards; animation-delay: calc(.05s + var(--p, 0) * 45ms); }
.column.enter .statrow > :nth-child(2) { --p: 1; } .column.enter .statrow > :nth-child(3) { --p: 2; } .column.enter .statrow > :nth-child(4) { --p: 3; }
.column.enter > .play { animation: enterUp .45s var(--ease-out) .12s backwards; }
.column.enter .play > .pool-wrap { animation: enterUp .45s var(--ease-out) .2s backwards; }
.column.enter > .clues-slab { animation: enterUp .45s var(--ease-out) .2s backwards; }
.column.enter > .actions-row { animation: enterUp .45s var(--ease-out) .28s backwards; }
.column.enter > #lesson-host { animation: enterUp .45s var(--ease-out) .32s backwards; }
@media (prefers-reduced-motion: reduce) { .column.enter .sign, .column.enter .round-btn, .column.enter .statrow > .splaque, .column.enter > *, .column.enter .play > .pool-wrap { animation: none !important; } }
/* ---- the open layout: the board and the pool sit straight on the backdrop; only the clue list keeps a panel, a
   soft dark glass. The theme's slab texture lives on in the desktop platform and the pool title's plaque. */
.slab { position: relative; border-radius: 20px; border: 1.5px solid rgba(255,255,255,.14); background: rgba(5,10,8,.46); box-shadow: 0 12px 30px rgba(0,0,0,.35); overflow: hidden; }
.slab > * { position: relative; }
/* ---- the line and the cards still to place */
.play { flex: none; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.board { padding: 2px 2px 4px; display: flex; flex-direction: column; gap: 6px; flex: none; background: none; border: 0; box-shadow: none; overflow: visible; }
/* numbered spots along the line */
.seats { display: flex; gap: 6px; justify-content: center; align-items: flex-start; padding-bottom: 18px; }   /* room for the end captions in the tallest theme font (Kalam) */
/* the line's two ends, named under its first and last spots: the clues say "closer to the entrance" */
.seat__end { position: absolute; top: 100%; margin-top: 3px; white-space: nowrap; font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; line-height: normal; text-shadow: 0 1px 1px rgba(0,0,0,.7), 0 2px 5px rgba(0,0,0,.6); pointer-events: none; }
.seat__end--a { left: 0; color: #7dea8f; }
.seat__end--b { right: 0; color: #ffbf6b; }
.seat { position: relative; flex: none; width: var(--card-w, 80px); min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; touch-action: none; }
.seat__n { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #55606f, #2a323d); border: 2px solid #aab4c2; box-shadow: 0 3px 6px rgba(0,0,0,.5); font-family: var(--font); }
.seat:first-child .seat__n { background: linear-gradient(180deg, #4fd66a, #1f9a3c); border-color: #9dffb0; }
.seat:not(:first-child):not(:last-child):nth-child(even) .seat__n { background: linear-gradient(180deg, #58a6ff, #1d5fd0); border-color: #a9d1ff; }
.seat:last-child .seat__n { background: linear-gradient(180deg, #ffb347, #e07a12); border-color: #ffd9a0; }
.seat__box { width: 100%; height: var(--card-h, calc(var(--card-w, 80px) * 4 / 3)); border-radius: 16px; border: 1.5px solid rgba(255,255,255,.22); background: rgba(0,0,0,.45); display: grid; place-items: center; transition: border-color .15s, background .15s, box-shadow .15s; box-shadow: inset 0 2px 10px rgba(0,0,0,.45); container-type: inline-size; }
.seat__box span { font-size: 9.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); text-align: center; line-height: 1.2; padding: 0 3px; overflow-wrap: anywhere; }
/* the theme's wait icon (the clue badges' footprint) as a faint watermark over the words */
html.has-wait-icon .seat__box span::before { content: ''; display: block; width: 34px; height: 34px; margin: 0 auto 5px; background: var(--reason-wait) center / contain no-repeat; filter: grayscale(1) brightness(1.7); opacity: .32; }
/* a spot too narrow for the words shows a plus (or just a small watermark) instead */
@container (max-width: 58px) { .seat__box span { font-size: 0; } .seat__box span::after { content: '+'; font-size: 18px; letter-spacing: 0; }
  html.has-wait-icon .seat__box span::before { width: 20px; height: 20px; margin-bottom: 0; }
  html.has-wait-icon .seat__box span::after { content: none; } }
.seat.filled .seat__box { border: 0; background: transparent; box-shadow: none; display: block; }
.seat.target .seat__box { border-color: #ffd23f; background: rgba(255,210,63,.14); box-shadow: 0 0 0 3px rgba(255,210,63,.25), inset 0 2px 8px rgba(0,0,0,.5); animation: seatPulse 1.1s ease-in-out infinite; }
.seat.over .seat__box { border-color: #9dffb0; background: rgba(125,255,176,.18); box-shadow: 0 0 0 4px rgba(125,255,176,.35); }
.seat.selected .card { outline: 3px solid #38e4ff; box-shadow: 0 0 18px rgba(56,228,255,.6), 0 6px 14px rgba(0,0,0,.5); }
/* easy: the card the game placed for the child, pinned (it does not move) */
.seat.pinned { cursor: default; }
.seat.pinned .card { box-shadow: 0 0 0 2px #9dffb0, 0 6px 14px rgba(0,0,0,.5); }
.seat__pin { position: absolute; top: 18px; inset-inline-end: -4px; z-index: 2; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #1f9a3c; border: 2px solid #9dffb0; color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.5); }
.seat__pin svg { width: 11px; height: 11px; }
@keyframes seatPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,210,63,0), inset 0 2px 8px rgba(0,0,0,.5); } 50% { box-shadow: 0 0 0 5px rgba(255,210,63,.3), inset 0 2px 8px rgba(0,0,0,.5); } }
/* ---- the cards: the theme's picture over the theme's card backdrop, the name on a plate below; no frame, a soft
   glow sets them off the scene */
.card { width: 100%; height: 100%; container-type: inline-size; border-radius: 12px; border: 0; background: var(--reason-card, var(--skin-panelAlt, var(--skin-panel))) center / cover no-repeat, var(--skin-panel); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 0 16px rgba(255,255,255,.16), 0 8px 18px rgba(0,0,0,.45); user-select: none; -webkit-user-select: none; touch-action: none; }
.card__art { flex: 1; min-height: 35%; display: grid; place-items: center; padding: 6%; overflow: hidden; }
.card__art img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 4px 5px rgba(0,0,0,.55)); }
.card__art b { font-size: clamp(12px, 3vw, 22px); font-weight: 900; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.7); }
.card__name { flex: none; margin: 0 4px 4px; padding: 3px 4px; border-radius: 9px; background: rgba(8,12,18,.8); color: #fff; font-family: var(--script-font, var(--font)); font-size: clamp(7.5px, 12cqw, 12.5px); font-weight: 800; text-align: center; line-height: 1.15; overflow: hidden; overflow-wrap: normal; hyphens: auto; }
/* js/game.js sets a name smaller until it fits its card; only a word too long even then may break mid-word */
.card__name.squeeze { overflow-wrap: anywhere; }
html:is(:lang(he), :lang(ar)) .card__name { line-height: 1.3; }
/* a narrow card (many cards on a phone) wraps its name over up to four short lines, never cut short: js/game.js makes
   such a card taller when there is room, so the picture keeps its size */
@container (max-width: 64px) { .card__name { font-size: 8.5px; line-height: 1.1; margin: 0 2px 2px; padding: 2px 1px; border-radius: 6px; } }
html:is(:lang(he), :lang(ar)) .card__name { line-height: 1.25; }
/* ---- the pool: cards still to place; a placed card's slot stays as a hollow */
.pool-wrap { flex: none; position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 8px; container-type: inline-size; }
.pool-wrap[hidden] { display: none; }
.pool__title { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; padding: 1px 10px; color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 2px 5px rgba(0,0,0,.75); }
.pool { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 100%; padding: 16px 2px 2px; }
.chip { position: relative; width: calc(var(--card-w, 80px) * var(--pool-k, 1)); padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; touch-action: none; }
.chip .card { height: calc(var(--card-h, calc(var(--card-w, 80px) * 4 / 3)) * var(--pool-k, 1)); }
.chip .card { transition: transform .1s, box-shadow .15s; }
.chip:hover .card { transform: translateY(-2px); outline: 2.5px solid rgba(255,210,63,.75); }
/* a placed card's hollow: like the line's empty spots, a touch denser, and never interactive */
.chip--ghost { pointer-events: none; }
.card--ghost { border: 1.5px solid rgba(255,255,255,.13); background: rgba(0,0,0,.58); box-shadow: inset 0 2px 10px rgba(0,0,0,.5); display: grid; place-items: center; }
html.has-wait-icon .card--ghost::before { content: ''; width: 30px; height: 30px; background: var(--reason-wait) center / contain no-repeat; filter: grayscale(1) brightness(1.6); opacity: .18; }
.pool--row .card--ghost, .pool--row .chip--ghost .card { background: rgba(0,0,0,.5); border-color: rgba(255,255,255,.1); }
html.has-wait-icon .pool--row .card--ghost::before { width: 18px; height: 18px; }
.chip.selected .card { outline: 3px solid #ffd23f; box-shadow: 0 0 18px rgba(255,210,63,.7), 0 6px 14px rgba(0,0,0,.5); transform: translateY(-2px); }
.chip.lifted { opacity: .35; }
/* narrow spots (many items on a phone): the pool turns into readable name chips instead of tiny cards */
.pool--row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
@container (min-width: 330px) { .pool--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 470px) { .pool--row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pool--row .chip { width: 100%; }
.pool--row .card, .pool--row .chip .card { height: 100%; min-height: 30px; flex-direction: row; align-items: center; gap: 4px; padding-block: 2px; padding-inline: 3px 6px; border-radius: 16px; container-type: normal; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)), rgba(0,0,0,.62); }
.pool--row .card__art { flex: none; width: 22px; height: 22px; padding: 0; }
.pool--row .card__name { background: transparent; border: 0; margin: 0; padding: 0; font-size: 11px; line-height: 1.15; max-height: none; display: block; white-space: normal; flex: 1; min-width: 0; overflow: visible; overflow-wrap: normal; text-align: start; }
html:is(:lang(he), :lang(ar)) .pool--row .card__name { line-height: 1.3; }
html[data-mood="steel"] .pool--row .card { border-radius: 4px; }
/* the ghost that follows the pointer while dragging */
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; transform: translate(-50%, -55%) scale(1.06) rotate(-2deg); filter: drop-shadow(0 16px 20px rgba(0,0,0,.6)); }
.drag-ghost .card { animation: none; }
html.dragging, html.dragging * { cursor: grabbing !important; }
/* ---- clues */
.clues-slab { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px 11px 9px; }
.clues__head { display: flex; align-items: center; gap: 8px; min-height: 20px; }
/* the painted title (assets/clues-title.<lang>.png); the <b> under it is the fallback for a language without one */
.clues__art { height: 23px; width: auto; flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.clues__head b { flex: none; font-size: 16px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.6); font-style: italic; }
html:is(:lang(he), :lang(ar)) .clues__head b { font-style: normal; letter-spacing: 0; }
.clues { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.clue { display: flex; gap: 9px; align-items: center; padding-block: 3px; padding-inline: 5px 10px; border-radius: 14px; background: rgba(6,10,16,.5); border: 1.5px solid rgba(255,255,255,.1); font-size: 13px; line-height: 1.25; color: #fff; font-family: var(--script-font, var(--font)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
html:is(:lang(he), :lang(ar)) .clue { line-height: 1.4; }
.clue i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(180deg, #4a5462, #2a323d); border: 2px solid rgba(255,255,255,.35); box-shadow: 0 3px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3); }
.clue i svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.clue i img { width: 17px; height: 17px; object-fit: contain; opacity: .85; }
.clue.ok i { background: linear-gradient(180deg, #5ee07a, #1f9a3c); border-color: #b8ffc6; }
.clue.fail i { background: linear-gradient(180deg, #ff5f6d, #c0142a); border-color: #ffb3b8; }
.clue.ok { border-color: rgba(125,255,176,.4); } .clue.fail { border-color: rgba(255,95,109,.45); }
/* ---- the two big buttons */
.actions-row--two { grid-template-columns: 1fr 1.15fr; gap: 10px; }
.bigbtn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 10px; border-radius: 999px; border: 2.5px solid; color: #fff; font: inherit; cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,.35), 0 10px 20px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.35); text-align: start; min-width: 0; }
.bigbtn svg { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.bigbtn span { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.bigbtn b { font-size: 15px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; }
.bigbtn small { font-size: 9.5px; font-weight: 600; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--script-font, var(--font)); }
html:is(:lang(he), :lang(ar)) .bigbtn span { line-height: 1.25; } html:is(:lang(he), :lang(ar)) .bigbtn b { letter-spacing: 0; }
/* the line's own two colours: Clear wears the start's green, Check the end's orange */
.bigbtn--green { background: linear-gradient(180deg, #5fe07a 0%, #2eb14c 55%, #1a8a38 100%); border-color: #b4ffc4; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.bigbtn--orange { background: linear-gradient(180deg, #ffc266 0%, #ff9d33 55%, #e2720f 100%); border-color: #ffd9a0; color: #331a00; }
.bigbtn:not([disabled]):active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.35); }
/* Check waits for a full line in its own orange (greyed, it read as brown on dark scenes) */
.bigbtn[disabled] { cursor: default; }
#lesson-host { display: none; flex: none; }
#lesson-host .lesson { padding: 0 8px; font-size: 12px; line-height: 1.6; }   /* tall-script fonts (Kalam) set their letters within the line */
/* the clear card's four numbers side by side (two lines of label where a phone is narrow); in the app only the moves */
#clear-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 520px) and (orientation: portrait) { #clear-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html.hosted-play #clear-stats { grid-template-columns: minmax(0, 1fr); }
#clear-stats span, #ov-done .stats span { white-space: normal; overflow: visible; line-height: 1.25; }
.msg { top: auto; bottom: 74px; background: rgba(8,9,14,.95); text-transform: none; letter-spacing: 0; white-space: normal; max-width: min(92%, 560px); text-align: center; font-size: 13.5px; line-height: 1.35; }
/* moods */
html[data-mood="steel"] .slab, html[data-mood="steel"] .card, html[data-mood="steel"] .seat__box, html[data-mood="steel"] .pool, html[data-mood="steel"] .clue { border-radius: 4px; }
html[data-mood="steel"] .bigbtn { border-radius: 8px; }
/* ---- fitting the screen: tall screens get the lesson strip, short ones tighten step by step */
@media (min-height: 900px) { #lesson-host { display: block; } .sign__logo { height: 96px; } }
@media (min-width: 900px) { .reason .column { width: min(100%, 680px); } .clues.two { display: grid; grid-template-columns: 1fr 1fr; align-content: start; } }
@media (max-height: 760px) { .reason .column { gap: 5px; } .sign__logo { height: 54px; } .board { padding: 6px 8px 8px; gap: 4px; } .seats { gap: 5px; } .clue { padding-block: 4px; font-size: 12.5px; } .clue i { width: 22px; height: 22px; } .clue i svg { width: 13px; height: 13px; } .bigbtn { height: 46px; } .bigbtn b { font-size: 13.5px; } .bigbtn small { font-size: 9px; } html.hosted-play .topbar__spacer { width: 92px; } }
@media (max-height: 640px) { .sign__logo { height: 46px; } .bigbtn { height: 44px; } .bigbtn small { display: none; } }
@media (max-width: 420px) { .bigbtn { gap: 6px; padding: 0 8px; } .bigbtn svg { width: 18px; height: 18px; } .bigbtn b { font-size: 12.5px; } .bigbtn small { font-size: 8.5px; } }
/* tightening, in two steps, when the cards would be small or the clue list would not fit (js/game.js, before the
   clues scale): snug closes up the body (the spots' numbers sit on the cards' corners, the pool loses its title, the
   clue rows and the buttons draw in), dense the header too (the sign goes, the round buttons and the plaques share one
   row). Dense is always snug as well. A desktop tightens its own way (below). */
@media not all and (min-width: 1100px) and (min-height: 521px) {
  .column.dense .head { flex-direction: row; align-items: center; gap: 6px; }
  .column.dense .topbar { display: contents; } .column.dense .sign { display: none; } .column.dense #btn-mute { order: 1; }
  .column.dense .statrow { flex: 1; min-width: 0; grid-template-columns: 1.35fr 1fr 1fr; } .column.dense .statrow .splaque:nth-child(4) { display: none; }
  .column.dense .round-btn { width: 38px; height: 38px; } .column.dense .round-btn svg { width: 19px; height: 19px; }
  .column.snug .seats { gap: 4px; padding-top: 5px; } .column.snug .seat { gap: 0; }
  .column.snug .seat__n { position: absolute; top: -6px; inset-inline-start: -3px; z-index: 2; width: 17px; height: 17px; font-size: 9.5px; border-width: 1.5px; }
  .column.snug .pool { padding: 4px; gap: 4px; } .column.snug .pool__title { display: none; } .column.snug .pool-wrap { padding-top: 0; }
  .column.snug .clues-slab { padding: 5px 8px 6px; gap: 3px; } .column.snug .clues__head { min-height: 18px; } .column.snug .clues__head b { font-size: 14px; } .column.snug .clues__art { height: 17px; }
  .column.snug .clues { gap: 3px; } .column.snug .clue { padding-block: 2px; padding-inline: 4px 8px; font-size: 12px; line-height: 1.2; gap: 7px; border-radius: 9px; } .column.snug .clue i { width: 18px; height: 18px; border-width: 1.5px; } .column.snug .clue i svg { width: 11px; height: 11px; } .column.snug .clue i img { width: 13px; height: 13px; }
  html:is(:lang(he), :lang(ar)) .column.snug .clue { line-height: 1.3; }
  .column.dense .statrow { gap: 4px; } .column.dense .statrow .splaque { padding: 3px 6px; gap: 4px; border-radius: 9px; } .column.dense .splaque span { display: none; } .column.dense .splaque__icon { width: 22px; height: 22px; } .column.dense .splaque__icon img { width: 20px; height: 20px; } .column.dense .splaque__icon svg { width: 15px; height: 15px; } .column.dense .splaque b { font-size: .9rem; }
  .column.snug .bigbtn { height: 40px; } .column.snug .bigbtn small { display: none; }
  .column.snug .board { padding: 2px 2px 4px; gap: 4px; }
}

/* ---- a phone on its side: two columns. On the left the round buttons and the sign, the stat plaques, then the line
   and the cards still to place, which take what is left; on the right the clues, as tall as the screen, and the two
   buttons under them. (In one column the clue list shrank to its heading: none of the clues could be read.) */
@media (orientation: landscape) and (max-height: 520px) {
  .stage.reason { padding: 6px 10px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .reason .column { width: 100%; max-width: 980px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px 10px;
    grid-template-areas: "head clues" "play clues" "actions clues"; }
  .head { grid-area: head; gap: 5px; }
  .play { grid-area: play; min-height: 0; overflow: hidden; justify-content: flex-start; }
  .clues-slab { grid-area: clues; }
  .actions-row--two { grid-area: actions; }
  #lesson-host { display: none !important; }
  .round-btn { width: 38px; height: 38px; } .round-btn svg { width: 19px; height: 19px; }
  .sign__logo { height: 36px; }
  .statrow { gap: 5px; } .splaque { padding: 3px 6px; gap: 5px; border-radius: 10px; } .splaque__icon { width: 22px; height: 22px; } .splaque__icon img { width: 20px; height: 20px; } .splaque__icon svg { width: 15px; height: 15px; }
  .splaque span { font-size: 8px; letter-spacing: .06em; } .splaque b { font-size: .9rem; }
  .board { padding: 2px 2px 4px; gap: 4px; }
  .clues-slab { padding: 6px 8px 7px; gap: 3px; } .clues { gap: 3px; }
  .clue { font-size: 12px; line-height: 1.2; padding-block: 2px; gap: 7px; border-radius: 9px; } .clue i { width: 19px; height: 19px; border-width: 1.5px; } .clue i svg { width: 11px; height: 11px; } .clue i img { width: 13px; height: 13px; }
  html:is(:lang(he), :lang(ar)) .clue { line-height: 1.3; }
  .bigbtn { height: 40px; } .bigbtn small { display: none; } .bigbtn b { font-size: 12.5px; }
  .msg { bottom: auto; top: 50%; left: 30%; max-width: 54%; }
  /* tight: the round buttons and the plaques share a row (the sign goes) */
  .column.dense .head { flex-direction: row; }
}

/* ---- a wide desktop: one header row (the sign at the left, the glass plaques beside it, the sound button at the far
   right), the line on its stone platform on the left with the cards still to place right under it, the clues at its
   side and the two buttons under them. js/game.js sizes the cards with the same two-column math as a phone on its
   side; a line too long to grow wider grows its cards taller instead, up to a playing card's shape. */
@media (min-width: 1100px) and (min-height: 521px) {
  /* the mockup leaves scenery showing at the bottom, and a little more room on the left (the signpost side) */
  .stage.reason { padding: 20px 20px 64px 44px; }
  .reason .column { width: min(100%, 1560px); display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px 20px;
    grid-template-areas: "head head" "play clues" "actions actions"; }
  .reason .head { grid-area: head; flex-direction: row; align-items: center; gap: 26px; }
  .reason .topbar { display: contents; }
  #btn-mute { order: 1; margin-inline-start: auto; }
  .round-btn { width: 64px; height: 64px; } .round-btn svg { width: 30px; height: 30px; }
  .sign { flex: none; max-width: 460px; min-width: 0; align-items: flex-start; }
  .sign__logo { height: 130px; }
  .statrow { flex: none; display: flex; gap: 14px; }
  .splaque { min-width: 148px; padding: 8px 14px; gap: 9px; }
  .splaque__icon { width: 40px; height: 40px; }
  .splaque span { font-size: 10px; } .splaque b { font-size: 1.15rem; }
  .play { grid-area: play; min-height: 0; overflow: hidden; justify-content: flex-start; gap: 16px; }   /* the pool right under the line */
  .clues-slab { grid-area: clues; align-self: start; max-height: 100%; padding: 14px 16px; gap: 10px; }
  /* the clue panel in its mossy stone frame (art.panel, cropped to the frame: its bars lie within 54 px of each edge),
     the glass kept behind it; the clues stay inside the bars */
  html.has-panel .clues-slab { border: 0 solid transparent; border-width: 26px; border-image: var(--reason-panel) 54 fill / 26px stretch; border-radius: 0; background-clip: padding-box; padding: 8px 10px 10px; }
  /* the two buttons sit centred under everything, on their own full-width row */
  .actions-row--two { grid-area: actions; gap: 14px; width: min(560px, 46vw); justify-self: center; }
  #lesson-host { display: none !important; }
  .board { padding: 14px 20px 18px; gap: 10px; border-radius: 24px; border: 0; background: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)), var(--reason-slab, var(--skin-panel)) center / cover no-repeat, var(--skin-panel); box-shadow: 0 0 26px rgba(255,255,255,.12), 0 14px 34px rgba(0,0,0,.45); }
  .seats { padding-bottom: 25px; } .seat__end { font-size: 12.5px; margin-top: 5px; }
  .seats { gap: 28px; } .seats:has(.seat:nth-child(6)) { gap: 18px; } .seats:has(.seat:nth-child(8)) { gap: 12px; }   /* a long line keeps its cards wide */
  .seat { gap: 6px; }
  .seat__n { width: 28px; height: 28px; font-size: 14px; }
  /* each empty spot in its carved stone frame (art.spot); a target or hovered spot drops the frame for the glow */
  html.has-spot .seat:not(.filled) .seat__box { border: 0 solid transparent; border-width: 18px; border-image: var(--reason-spot) 46 fill / 18px stretch; border-radius: 0; background-clip: padding-box; }
  html.has-spot .seat.target .seat__box, html.has-spot .seat.over .seat__box { border-image: none; border-width: 2px; border-style: solid; border-radius: 16px; }
  .pool-wrap { padding-top: 14px; padding-bottom: 30px; }
  .pool { padding: 24px 2px 2px; gap: 12px; }
  .pool__title { padding: 5px 20px; font-size: 12px; border-radius: 10px; border: 0; background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), var(--reason-slab, var(--skin-panel)) center / cover no-repeat, var(--skin-panel); box-shadow: 0 0 12px rgba(255,255,255,.12), 0 4px 10px rgba(0,0,0,.4); }
  html.has-sign .pool__title { padding: 4px 10px; border: 0 solid transparent; border-width: 13px 34px; border-image: var(--reason-sign) 118 182 fill / 13px 34px stretch; border-radius: 0; background: none; box-shadow: 0 6px 14px rgba(0,0,0,.45); }
  /* each pool card on its stand (art.pedestal) */
  html.has-pedestal .pool:not(.pool--row) .chip::after { content: ''; position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); width: 112%; height: 68px; background: var(--reason-pedestal) center top / 100% auto no-repeat; z-index: -1; pointer-events: none; }
  .clues__head { min-height: 30px; }
  .clues__head b { font-size: 24px; }
  .clues__art { height: 34px; }
  .clues { gap: 10px; }
  .clue { font-size: 17.5px; padding-block: 11px; padding-inline: 9px 16px; gap: 13px; border-radius: 19px; }
  .clue i { width: 40px; height: 40px; } .clue i svg { width: 22px; height: 22px; } .clue i img { width: 27px; height: 27px; }
  /* a long clue list (8+) compacts itself instead of tipping the whole page into dense */
  .clues:has(.clue:nth-child(8)) { gap: 6px; }
  .clues:has(.clue:nth-child(8)) .clue { font-size: 15px; padding-block: 6px; gap: 10px; border-radius: 14px; }
  .clues:has(.clue:nth-child(8)) .clue i { width: 30px; height: 30px; } .clues:has(.clue:nth-child(8)) .clue i svg { width: 17px; height: 17px; } .clues:has(.clue:nth-child(8)) .clue i img { width: 20px; height: 20px; }
  /* tightening on a desktop (js/game.js, when the clues would not fit their panel): snug draws the clue rows in,
     shortens the buttons and lets the scenery under them go; dense also shrinks the header (the sign and the plaques
     stay, smaller) */
  .stage.reason:has(.column.snug) { padding-bottom: 24px; }
  .column.snug .clues-slab { gap: 6px; } .column.snug .clues__head { min-height: 24px; } .column.snug .clues__art { height: 27px; }
  .column.snug .clues { gap: 5px; }
  .column.snug .clue, .column.snug .clues:has(.clue:nth-child(8)) .clue { font-size: 14px; line-height: 1.25; padding-block: 4px; padding-inline: 8px 14px; gap: 9px; border-radius: 12px; }
  .column.snug .clue i, .column.snug .clues:has(.clue:nth-child(8)) .clue i { width: 26px; height: 26px; }
  .column.snug .clue i svg, .column.snug .clues:has(.clue:nth-child(8)) .clue i svg { width: 15px; height: 15px; }
  .column.snug .clue i img, .column.snug .clues:has(.clue:nth-child(8)) .clue i img { width: 18px; height: 18px; }
  .column.snug .bigbtn { height: 48px; } .column.snug .bigbtn b { font-size: 14px; } .column.snug .bigbtn small { display: none; }
  .column.dense .head { gap: 18px; }
  .column.dense .sign__logo { height: 74px; }
  .column.dense .splaque { min-width: 118px; padding: 5px 11px; gap: 7px; } .column.dense .splaque__icon { width: 30px; height: 30px; }
  .column.dense .round-btn { width: 50px; height: 50px; } .column.dense .round-btn svg { width: 24px; height: 24px; }
  .bigbtn { height: 70px; gap: 11px; }
  .bigbtn svg { width: 28px; height: 28px; }
  .bigbtn b { font-size: 16.5px; white-space: nowrap; } .bigbtn small { font-size: 11.5px; }
}

/* letter-spacing breaks Arabic joining and does nothing for Hebrew */
html:is(:lang(he), :lang(ar)) :is(.seat__end, .pool__title, .seat__box span, .bigbtn b, .clues__head b, .card__name) { letter-spacing: 0; }

/* ---- right to left (he, ar): the text and its reading order flip, the play area does not (Bible §5.5.5, rule 25).
   The line keeps spot 1 at its start on the left and its arrow pointing right (the clues name the start, so they
   read the same), the cards to place stay in their order, the round buttons, the sign and the two big buttons stay
   where they are, and a phone on its side keeps the line on the left. The stat plaques, the clue list, the words on
   the buttons and the cards read right to left; numbers that are one unit (3 / 16) stay left to right. */
html[dir="rtl"] .column, html[dir="rtl"] .topbar, html[dir="rtl"] .play, html[dir="rtl"] .actions-row { direction: ltr; }
html[dir="rtl"] .statrow, html[dir="rtl"] .clues-slab, html[dir="rtl"] .bigbtn, html[dir="rtl"] #lesson-host, html[dir="rtl"] .card__name, html[dir="rtl"] .seat__end, html[dir="rtl"] .pool__title, html[dir="rtl"] .seat__box span { direction: rtl; }
html[dir="rtl"] .pool--row .card { direction: rtl; }