/* Demos (/demos/): the index and the demos themselves. Loaded after site.css, which brings the header, footer and buttons. */

/* ---- index ---- */
.demos { padding-block: var(--space-12) var(--space-20); }
.demos-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-10); }
.demos-head h1 { font-size: var(--text-4xl); font-weight: 650; letter-spacing: var(--tracking-tighter); line-height: 1.05; }
.demo-list { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .demo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.demo-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-6); height: 100%; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm); transition: translate var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.demo-card:hover { translate: 0 -2px; box-shadow: var(--shadow-md); }
.demo-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.demo-faces { position: relative; width: 132px; height: 112px; }
.demo-faces img { position: absolute; top: 8px; width: 66px; height: auto; border-radius: var(--radius-md); border: 3px solid var(--paper); box-shadow: var(--shadow-md); transition: rotate var(--dur-base) var(--ease-spring), translate var(--dur-base) var(--ease-spring); }
.demo-faces img:nth-child(1) { left: 0; rotate: -9deg; }
.demo-faces img:nth-child(2) { left: 33px; top: 0; z-index: 1; }
.demo-faces img:nth-child(3) { left: 66px; rotate: 9deg; }
.demo-card:hover .demo-faces img:nth-child(1) { rotate: -15deg; translate: -6px 2px; }
.demo-card:hover .demo-faces img:nth-child(3) { rotate: 15deg; translate: 6px 2px; }
.demo-art { display: grid; place-items: center; width: 132px; }
.thumb { position: relative; display: block; width: 92px; aspect-ratio: 3 / 4; overflow: hidden; border: 3px solid var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-md); transition: rotate var(--dur-base) var(--ease-spring); }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo-card:hover .thumb { rotate: -3deg; }
.thumb-avg img { filter: blur(0.6px); }
.thumb-odd { display: grid; grid-template-columns: repeat(2, 52px); gap: 5px; }
.thumb-odd > span { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.thumb-odd img { position: absolute; inset: 0; width: 100%; height: 100%; }
.thumb-odd .is-odd { box-shadow: 0 0 0 3px var(--accent), var(--shadow-sm); }
.demo-text { display: grid; gap: var(--space-2); }
.demo-title { font-size: var(--text-2xl); font-weight: 650; letter-spacing: var(--tracking-tight); }
.demo-desc { color: var(--ink-2); }
.demo-go { color: var(--accent); font-weight: 600; }
@media (max-width: 480px) {
  .demo-card { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); }
}

/* ---- a demo page: a title row and a stage that fits the screen (faces.js fitStage sets --stage-h) ---- */
.demo-page { padding-block: var(--space-5) var(--space-12); }
.stage { position: relative; height: var(--stage-h, calc(100dvh - 16px)); min-height: 300px; max-height: 1100px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(to bottom, var(--paper-2), color-mix(in srgb, var(--paper-2) 40%, var(--paper))); box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.8); }
:where(.stage) p { max-width: none; } /* base.css keeps paragraphs to a reading width; a stage lays out its own */
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper); }
.seg button { min-height: 32px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-2); font: inherit; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button:focus-visible, .stage .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stage .btn { font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }

/* ---- Hunch ---- */
.demo-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-4); }
.demo-head h1 { font-size: clamp(1.75rem, 3vmin + 0.75rem, 2.5rem); font-weight: 700; letter-spacing: var(--tracking-tighter); line-height: 1; }
.tagline { color: var(--ink-2); }
.head-end { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
.hunch-score { padding: 2px var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper); color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.back { color: var(--ink-2); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.back:hover { color: var(--ink); }

/* The table always fits the screen: hunch.js sets --table-h to the room under the title, or to the whole screen when
   that room is too small (the deal then scrolls the table into view). Three arrangements:
   - portrait: opponent, board and your tray stacked;
   - landscape: the opponent across the top, the board and your side next to each other;
   - short landscape (phones on their side): the board on the left, the opponent and your side on the right.
   The faces take whatever room the board gets (container query units), so nothing spills out at any size. */
.table {
  --pad: clamp(var(--space-2), 1.8vmin, var(--space-6));
  --gap: clamp(var(--space-2), 1.6vmin, var(--space-6));
  --face-w: clamp(48px, 9vh, 92px);
  --card-w: clamp(52px, 13vw, 104px);
  display: grid; gap: var(--gap); padding: var(--pad);
  height: var(--table-h, calc(100dvh - 16px)); min-height: 300px; max-height: 1100px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "opp" "board" "side";
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  background: linear-gradient(to bottom, var(--paper-2), color-mix(in srgb, var(--paper-2) 40%, var(--paper)));
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.8);
}
.play { display: contents; }
.opp { grid-area: opp; }
.board-wrap { grid-area: board; }
.side { grid-area: side; }
@media (orientation: landscape) {
  .table { --card-w: clamp(60px, 10vh, 110px); grid-template-columns: minmax(0, 1fr) clamp(240px, 28vw, 330px); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "opp opp" "board side"; }
}
@media (orientation: landscape) and (max-height: 559px) {
  .table { --face-w: 44px; --card-w: 44px; grid-template-columns: minmax(0, 1fr) clamp(220px, 44vw, 360px); grid-template-areas: "board opp" "board side"; }
}

/* across the table: their face, what they say, the back of their board */
.opp { display: grid; grid-template-columns: var(--face-w) minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-width: 0; }
.opp-face { position: relative; align-self: start; }
.opp-face img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-md); animation: breathe 4.2s ease-in-out infinite; transition: rotate 500ms var(--ease-out), translate 500ms var(--ease-out), filter 500ms var(--ease-out); }
.opp-face.is-in { animation: opp-in 600ms var(--ease-out); }
.opp-name { position: absolute; left: 50%; bottom: 4px; translate: -50% 0; max-width: calc(100% - 4px); padding: 1px 5px; overflow: hidden; text-overflow: ellipsis; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font-size: clamp(9px, calc(var(--face-w) * 0.2), 11px); font-weight: 600; white-space: nowrap; }
@keyframes opp-in { from { opacity: 0; translate: 0 10px; scale: 0.94; } }
@keyframes breathe { 50% { transform: translateY(-1.5px) scale(1.012); } }
@keyframes sway { 0%, 100% { rotate: -3deg; } 50% { rotate: 2deg; } }
@keyframes hop { 0%, 100% { translate: 0 0; } 30% { translate: 0 -10px; } 55% { translate: 0 0; } 75% { translate: 0 -4px; } }
.opp-face[data-mood="think"] img { animation: breathe 4.2s ease-in-out infinite, sway 2.4s ease-in-out infinite; }
.opp-face[data-mood="happy"] img { animation: breathe 4.2s ease-in-out infinite, hop 700ms var(--ease-out); }
.opp-face[data-mood="sad"] img { translate: 0 3px; rotate: 2deg; filter: saturate(0.8) brightness(0.96); }
.opp-face[data-mood="smug"] img { rotate: 4deg; }

.opp-say { position: relative; min-width: 0; padding-left: 6px; }
.bubble { position: relative; display: flex; align-items: center; gap: var(--space-3); width: fit-content; max-width: 100%; min-height: 2.6em; padding: 0.55em 0.95em; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-md); font-size: clamp(var(--text-sm), 0.9vh + 0.55rem, var(--text-lg)); font-weight: 500; line-height: var(--leading-snug); overflow-wrap: anywhere; }
.bubble:empty { visibility: hidden; }
.bubble::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; translate: 0 -50%; rotate: 45deg; background: var(--paper); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bubble.is-pop { animation: pop 320ms var(--ease-spring); transform-origin: left center; }
@keyframes pop { from { scale: 0.92; opacity: 0.4; } }
.bubble-face { flex: none; width: 2.2em; height: auto; border-radius: var(--radius-sm); }
.dots { display: inline-flex; gap: 5px; padding-block: 6px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: dot 1.1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 150ms; }
.dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes dot { 0%, 60%, 100% { translate: 0 0; opacity: 0.4; } 30% { translate: 0 -5px; opacity: 1; } }

/* the back of their board: one chip per face, laid down as they rule people out */
.opp-board { display: grid; justify-items: center; gap: 4px; }
/* how many people they have left: the number jumps when it drops */
.opp-left { display: grid; justify-items: center; max-width: 6.5em; line-height: 1.15; text-align: center; }
.opp-left strong { font-size: clamp(var(--text-lg), 2.6vh, var(--text-2xl)); font-weight: 700; font-variant-numeric: tabular-nums; }
.opp-left strong.is-bump { animation: bump 520ms var(--ease-spring); }
@keyframes bump { from { scale: 1.4; color: var(--accent); } }
.opp-left span { color: var(--ink-3); font-size: var(--text-xs); }
.is-over .opp-left { display: none; }
@media (orientation: landscape) and (max-height: 559px), (max-width: 459px) { .opp-left-more { display: none; } }
.left { color: var(--ink-3); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.theirs { display: none; }
.theirs.is-shown { display: block; width: calc(var(--face-w) * 0.8); animation: card-in 600ms var(--ease-spring); }
/* their turn: a ring around them */
.opp-face img { outline: 3px solid transparent; outline-offset: 3px; transition: outline-color 300ms var(--ease-out), rotate 500ms var(--ease-out), translate 500ms var(--ease-out), filter 500ms var(--ease-out); }
[data-turn="them"] .opp-face img { outline-color: var(--accent); }
.theirs .card-name { font-size: 10px; }

/* your board: the faces are as big as the room allows, at most 160 px wide */
.board-wrap { position: relative; container-type: size; display: grid; align-content: center; justify-items: center; min-width: 0; min-height: 0; }
.board-wrap > * {
  --g: clamp(3px, 1.3cqw, 12px);
  --nh: clamp(13px, 4cqh, 20px);
  --bar: 22px;
  --w: min(calc((100cqw - 5 * var(--g)) / 6), calc(((100cqh - var(--bar) - 3 * var(--g)) / 4 - var(--nh) - 2px) * 0.75), 160px);
}
.board-bar { display: flex; justify-content: space-between; align-items: center; width: calc(6 * var(--w) + 5 * var(--g)); height: var(--bar); color: var(--ink-2); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.board { display: grid; grid-template-columns: repeat(6, var(--w)); gap: var(--g); }
.board-start { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.board-start:empty { display: none; }
.board-start .btn { pointer-events: auto; min-height: 52px; padding-inline: var(--space-8); font: inherit; font-size: var(--text-lg); font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: var(--shadow-lg); animation: rise 360ms var(--ease-out) both; }

.tile { display: block; width: var(--w); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; perspective: 700px; animation: tile-in 520ms var(--ease-spring) calc(var(--i) * 18ms) both; }
@keyframes tile-in { from { opacity: 0; translate: 0 14px; scale: 0.92; } }
/* before the deal every face lies down; dealing stands them up in a wave */
.hunch:not(.is-dealt) .tile-in { transform: rotateX(-180deg); }
.tile:focus-visible { outline: none; }
.tile:focus-visible .tile-in { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-md); }
.tile-in { position: relative; display: block; transform-style: preserve-3d; transition: transform 560ms var(--ease-in-out) var(--d, 0ms); }
.tile[aria-pressed="true"] .tile-in { transform: rotateX(-180deg); }
.tile-front, .tile-back { display: block; border-radius: clamp(4px, calc(var(--w) * 0.08), 10px); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tile-front { overflow: hidden; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out); }
.tile-front img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; }
.tile-name { display: block; height: var(--nh); padding: 0 2px; overflow: hidden; font-size: clamp(9px, calc(var(--nh) - 7px), 12px); font-weight: 600; line-height: var(--nh); text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.tile-back { position: absolute; inset: 0; transform: rotateX(180deg); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); background: repeating-linear-gradient(135deg, transparent 0 6px, hsl(220 14% 86% / 0.6) 6px 7px), var(--paper-3); }
@media (hover: hover) and (pointer: fine) {
  .tile:not([aria-pressed="true"]):hover .tile-front { translate: 0 -2px; box-shadow: var(--shadow-md); }
}
.tile.is-last .tile-front { box-shadow: 0 0 0 3px var(--accent), var(--shadow-md); animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow-md); } }
.is-guessing .tile:not([aria-pressed="true"]) .tile-front { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent); }
.is-guessing .tile:not([aria-pressed="true"]):hover .tile-front { box-shadow: 0 0 0 3px var(--accent), var(--shadow-md); }
.tile.is-picked .tile-front { box-shadow: 0 0 0 3px var(--ink), var(--shadow-md); }
.tile.is-theirs .tile-front { box-shadow: 0 0 0 3px var(--accent), var(--shadow-md); }
.bit { position: absolute; top: 45%; z-index: 3; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; }

/* your side: your secret card (the one they try to guess), then whose turn it is, what you said, and your choices */
.side { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-3); align-content: start; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.secret { display: grid; grid-template-columns: var(--card-w) minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent) 5%, var(--paper)); }
.secret-text { display: grid; gap: var(--space-1); min-width: 0; }
.side-label { color: color-mix(in srgb, var(--accent) 65%, var(--ink)); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; line-height: 1.3; text-transform: uppercase; }
.secret-help { color: var(--ink-2); font-size: var(--text-sm); line-height: var(--leading-snug); }
.act { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.act-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.turn { padding: 3px var(--space-3); border-radius: var(--radius-pill); background: var(--paper-3); color: var(--ink-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; transition: background 300ms var(--ease-out), color 300ms var(--ease-out); }
.turn:empty { display: none; }
[data-turn="you"] .turn { background: var(--accent); color: #fff; }
[data-turn="over"] .turn { background: var(--ink); color: var(--paper); }
/* what you said: a chat bubble from your side, tagged "You" */
.you-say { display: inline-flex; align-items: baseline; gap: var(--space-2); max-width: 100%; margin-left: auto; padding: var(--space-1) var(--space-3); border-radius: 14px 14px 4px 14px; background: var(--ink); color: var(--paper); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-snug); overflow-wrap: anywhere; }
.you-say[hidden] { display: none; }
.you-tag { flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
.you-say.is-pop { animation: pop 300ms var(--ease-spring); transform-origin: right bottom; }
/* portrait and short landscape: a tray (as tall in every state, so the board above never changes size) with your card
   on the left, labelled under it, and the rest beside it */
@media (orientation: portrait), (orientation: landscape) and (max-height: 559px) {
  .side { grid-template-columns: var(--card-w) minmax(0, 1fr); grid-template-rows: none; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-sm); }
  .secret { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-1); padding: 0; border: 0; background: none; }
  .secret-help { display: none; }
  .side-label { font-size: 9px; letter-spacing: 0.04em; text-align: center; }
  .you-say { margin-left: 0; }
}
@media (orientation: portrait) { .side { min-height: 180px; } }
.mine { position: relative; aspect-ratio: 3 / 4.6; border-radius: var(--radius-md); background: repeating-linear-gradient(135deg, transparent 0 6px, hsl(220 14% 86% / 0.6) 6px 7px), var(--paper-3); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.mine.is-flipped { aspect-ratio: auto; border: 0; background: none; animation: card-in 650ms var(--ease-spring); }
.mine.is-check .card-face { animation: check 1.4s ease-in-out infinite; }
@keyframes card-in { from { transform: perspective(600px) rotateY(90deg); opacity: 0.3; } }
@keyframes check { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow-md); } }
.card-face { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-md); }
.card-face img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; }
.card-name { display: block; padding: 2px; overflow: hidden; font-size: var(--text-xs); font-weight: 650; text-align: center; white-space: nowrap; text-overflow: ellipsis; }

.over { padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); animation: over-in 520ms var(--ease-spring); }
.over-title { font-size: clamp(var(--text-lg), 2.4vh, var(--text-2xl)); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.15; }
.over[data-winner="you"] .over-title { color: var(--accent); }
.over-text { color: var(--ink-2); font-size: var(--text-sm); }
@keyframes over-in { from { opacity: 0; scale: 0.9; } }

.controls { container-type: inline-size; display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.controls:empty { display: none; }
.controls-note { min-width: 0; color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-snug); }
.controls > * { animation: rise 360ms var(--ease-out) both; }
@keyframes rise { from { opacity: 0; translate: 0 6px; } }
.chip { flex: none; min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.chip:hover:not(:disabled) { border-color: var(--ink-3); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.chip:disabled { color: var(--ink-3); background: transparent; text-decoration: line-through; cursor: default; }
.controls .btn { min-width: 0; cursor: pointer; font: inherit; font-weight: 600; white-space: nowrap; }
.answer { display: flex; gap: var(--space-2); }
.answer .btn { flex: 1; min-height: clamp(40px, 6vh, 52px); padding-inline: var(--space-3); font-size: var(--text-md); }
.guess-btn.is-ready { border-color: var(--accent); color: var(--accent); animation: rise 360ms var(--ease-out) both, ready 1.6s ease-in-out 400ms infinite; }
@keyframes ready { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent); } }
/* the questions wrap, a line per group, with the guess button under them. hunch.js checks that they fit your side and
   steps down when they do not: is-tight drops the group lines, is-rows (always in portrait, where the tray's height
   must not change) puts them on two lines that scroll sideways, with the guess button beside the label */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-line { display: contents; }
.chips-break { flex-basis: 100%; height: 2px; }
.is-tight .chips-break { display: none; }
.controls[data-kind="ask"] .guess-btn { justify-self: start; min-height: 36px; padding: 0 var(--space-4); font-size: var(--text-sm); }
.controls.is-rows { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.is-rows .chips { grid-column: 1 / -1; display: grid; gap: 5px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  /* the far edge fades out, so a cut chip reads as "more this way"; the lines end with room to scroll clear of it */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.is-rows .chips::-webkit-scrollbar { display: none; }
.is-rows .chips-line { display: flex; gap: 5px; width: max-content; padding-right: 28px; }
.is-rows .chips-break { display: none; }
.controls.is-rows .guess-btn { grid-row: 1; grid-column: 2; min-height: 32px; padding: 0 var(--space-3); }
/* no room for the label beside the guess button: the button alone */
@container (max-width: 250px) { .is-rows .controls-note { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .opp-face img, .opp-face[data-mood] img { animation: none; }
  .tile { animation: none; }
  .tile-in { transition-duration: 1ms; transition-delay: 0ms; }
  .bubble.is-pop, .you-say.is-pop, .opp-left strong.is-bump, .mine.is-flipped, .theirs.is-shown, .over, .controls > *, .board-start .btn, .tile.is-last .tile-front, .mine.is-check .card-face, .guess-btn.is-ready { animation: none; }
}