/* ==========================================================================
   Host-article floor - prepended by scripts/scope-css.mjs
   ========================================================================== */

/* Geometry, on everything, because the prefix cannot win an argument the game
   never joined.

   Doubling the prefix beats a host rule that sets a property the game also
   sets. It does nothing about a host rule that sets a property the game is
   silent on - there is no rule to outrank, so the host's applies unopposed at
   whatever specificity it has. The site this was built for styles the picture
   of a finished grid in an article as `.board { max-width: 320px }`, and the
   game's board is also `.board`: measured, the live board stopped growing at
   320px in a 520px space and looked like a considered choice.

   Every value here is that property's INITIAL value, so this is not a design -
   it is "the host said nothing about this element". The game's own rules all
   carry at least three classes and win outright; `:where()` keeps this at the
   two the prefix brings, which ties the host's commonest shape (.prose .board)
   and wins on being the later stylesheet.

   Not display, and not font-size. Resetting display to its initial value makes
   every div inline - it would beat the UA sheet, which is one type selector -
   and the game does not name a display for every element it renders. Same
   reasoning for font-size against the UA's headings. */
.strands.strands :where(*) {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  gap: normal;
  grid-template-columns: none;
  grid-template-rows: none;
}

/* Typography, on the elements an article stylesheet actually names. */
.strands.strands :where(p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,figure,blockquote,table,th,td,a) {
  font-family: inherit;
  text-align: inherit;
  color: inherit;
}
.strands.strands{--bg: #f7f5f0;--surface: #fffefb;--surface-2: #edeae1;--surface-3: #e0dccf;--ink: #1c1b17;--ink-soft: #6b665b;--line: #d3cec0;--line-strong: #3a352b;--accent: #2a6ab5;--accent-soft: #dde8f6;--danger: #b4372c;--found: #9ac9f2;--found-line: #7fb8ea;--found-ink: #10345e;--span: #f5d95c;--span-line: #eccb3c;--span-ink: #4a3a02;--live: rgba(60, 56, 46, .22);--hint-ring: #b39ddb;--shadow-1: 0 1px 2px rgba(28, 27, 23, .14);--shadow-2: 0 8px 24px rgba(28, 27, 23, .14);--shadow-3: 0 18px 48px rgba(28, 27, 23, .26);--radius: 12px;--radius-lg: 20px;--font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}.strands.strands[data-theme=dark]{--bg: #14161c;--surface: #1c1f26;--surface-2: #242830;--surface-3: #2f343d;--ink: #f1eee7;--ink-soft: #a3a8b3;--line: #383e48;--line-strong: #cfd4dc;--accent: #6aa5e8;--accent-soft: #1d2c42;--danger: #ef6a5c;--found: #3a6ea6;--found-line: #4d84c0;--found-ink: #eef5fd;--span: #bd961f;--span-line: #d4a92c;--span-ink: #2b2100;--live: rgba(238, 236, 230, .2);--hint-ring: #9b7fd4;--shadow-1: 0 1px 2px rgba(0, 0, 0, .5);--shadow-2: 0 8px 24px rgba(0, 0, 0, .5);--shadow-3: 0 18px 48px rgba(0, 0, 0, .6)}.strands.strands[data-contrast=high]{--span: #ef8b2c;--span-line: #d97514;--span-ink: #2a1600}.strands.strands[data-contrast=high][data-theme=dark]{--span: #b5601a;--span-line: #d1731f;--span-ink: #fff1e2}.strands.strands,.strands.strands *,.strands.strands:before,.strands.strands *:before,.strands.strands:after,.strands.strands *:after{box-sizing:border-box}.strands.strands{-webkit-text-size-adjust:100%}.strands.strands{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior-y:contain}.strands.strands button{font:inherit;color:inherit}.strands.strands :focus-visible{outline:3px solid var(--accent);outline-offset:2px}.strands.strands .app{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(100%,34rem);min-height:100dvh;margin:0 auto;padding:8px 12px 20px;padding-bottom:max(20px,env(safe-area-inset-bottom))}.strands.strands .side{display:contents}.strands.strands .top{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 0 2px}.strands.strands .top__brand{display:flex;align-items:baseline;gap:10px}.strands.strands .top__title{font-size:1.35rem;font-weight:700;letter-spacing:-.01em}.strands.strands .clock{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.9rem}.strands.strands .top__actions{display:flex;gap:2px}.strands.strands .iconbtn{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--ink-soft);cursor:pointer}.strands.strands .iconbtn:hover{background:var(--surface-2);color:var(--ink)}.strands.strands .iconbtn svg{width:21px;height:21px}.strands.strands .modes{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-2)}.strands.strands .modes__tab{padding:6px 18px;border:0;border-radius:999px;background:transparent;color:var(--ink-soft);font-size:.92rem;font-weight:600;cursor:pointer}.strands.strands .modes__tab[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}.strands.strands .clue{text-align:center;margin:2px 0 0}.strands.strands .clue__kicker{margin:0;color:var(--ink-soft);font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase}.strands.strands .clue__text{margin:2px 0 0;font-size:clamp(1.25rem,5.4vw,1.6rem);font-weight:700;letter-spacing:-.01em}.strands.strands .tally{margin:0;color:var(--ink-soft);font-size:.88rem}.strands.strands .trace{min-height:30px;display:grid;place-items:center;font-size:1.05rem;font-weight:700;letter-spacing:.14em;color:var(--ink);opacity:0;transition:opacity .12s ease}.strands.strands .trace--on{opacity:1}.strands.strands .controls{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.strands.strands .chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-soft);font-size:.82rem;font-weight:600;cursor:pointer}.strands.strands .chip[hidden]{display:none}.strands.strands .chip:hover{background:var(--surface-2);color:var(--ink)}.strands.strands .chip--quiet{border-color:transparent;background:transparent}.strands.strands .chip--danger{border-color:var(--danger);color:var(--danger)}.strands.strands .chip__icon{display:grid;place-items:center;flex:none}.strands.strands .chip__icon svg{width:14px;height:14px}.strands.strands .chip__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strands.strands .boardhost{width:100%;flex:1 1 0;min-height:12rem;display:grid;place-items:center;container-type:size}.strands.strands .board{position:relative;width:min(100%,30rem,100cqh * var(--cols) / var(--rows));aspect-ratio:var(--cols) / var(--rows);touch-action:none;user-select:none;-webkit-user-select:none}.strands.strands .board__links{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.strands.strands .link{fill:none}.strands.strands .link--found{stroke:var(--found)}.strands.strands .link--span{stroke:var(--span)}.strands.strands .link--live{stroke:var(--live)}.strands.strands .board__grid{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-rows:repeat(var(--rows),1fr)}.strands.strands .board__row{display:grid;grid-template-columns:repeat(var(--cols),1fr)}.strands.strands .cell{display:grid;place-items:center;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.strands.strands .cell__letter{display:grid;place-items:center;width:78%;aspect-ratio:1;border-radius:999px;font-size:clamp(1.15rem,5.6vw,1.75rem);font-weight:700;line-height:1;color:var(--ink);transition:background-color .12s ease,color .12s ease,transform .12s ease}.strands.strands .cell:hover .cell__letter{background:var(--surface-2)}.strands.strands .cell--active .cell__letter{background:var(--live);transform:scale(1.06)}.strands.strands .cell--found .cell__letter{background:var(--found);color:var(--found-ink)}.strands.strands .cell--span .cell__letter{background:var(--span);color:var(--span-ink)}.strands.strands .cell--hinted .cell__letter{box-shadow:inset 0 0 0 3px var(--hint-ring);animation:pulse 1.8s ease-in-out infinite}@keyframes pulse{50%{box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--hint-ring) 45%,transparent)}}.strands.strands .board--wrong{animation:shake .4s ease}@keyframes shake{20%{transform:translate(-6px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}@media(prefers-reduced-motion:reduce){.strands.strands .board--wrong,.strands.strands .cell--hinted .cell__letter{animation:none}.strands.strands .cell__letter{transition:none}}.strands.strands .hintbar{display:flex;align-items:center;justify-content:space-between;gap:14px;width:min(100%,27rem);margin-top:4px}.strands.strands .hintbar__progress{flex:1;min-width:0}.strands.strands .meter{display:block;height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}.strands.strands .meter__fill{display:block;height:100%;width:100%;border-radius:999px;background:var(--accent);transform-origin:left center;transform:scaleX(var(--fill, 0));transition:transform .26s ease}.strands.strands .hintbar__note{display:block;margin-top:4px;color:var(--ink-soft);font-size:.8rem}.strands.strands .button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:.95rem;font-weight:600;cursor:pointer}.strands.strands .button:hover{background:var(--surface-2)}.strands.strands .button:disabled{opacity:.45;cursor:default}.strands.strands .button--primary{border-color:transparent;background:var(--accent);color:#fff}.strands.strands .button--primary:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}.strands.strands .button--quiet{border-color:transparent;background:transparent;color:var(--ink-soft)}.strands.strands .button--danger{color:var(--danger);border-color:var(--danger)}.strands.strands .button--ready{border-color:var(--accent);color:var(--accent)}.strands.strands .button__icon{display:grid;place-items:center}.strands.strands .button__icon svg{width:18px;height:18px}.strands.strands .modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;place-items:center;padding:16px;background:#14120e80;overflow-y:auto}.strands.strands .modal__panel{position:relative;width:min(100%,30rem);max-height:calc(100dvh - 32px);overflow-y:auto;padding:26px 22px 22px;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-3)}.strands.strands .modal__close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:999px;background:transparent;color:var(--ink-soft);cursor:pointer}.strands.strands .modal__close:hover{background:var(--surface-2)}.strands.strands .modal__close svg{width:19px;height:19px}.strands.strands .modal__title{margin:0;font-size:1.4rem;font-weight:700}.strands.strands .modal__sub{margin:4px 0 16px;color:var(--ink-soft)}.strands.strands .modal__note{margin:14px 0 0;color:var(--ink-soft);font-size:.87rem;text-align:center}.strands.strands .modal__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}.strands.strands .figures{display:flex;justify-content:space-around;gap:8px;margin-top:18px}.strands.strands .figures--minor .figure__value{font-size:1.25rem}.strands.strands .figure{display:flex;flex-direction:column;align-items:center;min-width:0}.strands.strands .figure__value{font-size:1.8rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}.strands.strands .figure__label{color:var(--ink-soft);font-size:.74rem;text-align:center}.strands.strands .rules{margin:0;padding:0;list-style:none}.strands.strands .rules__item{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-bottom:1px solid var(--line)}.strands.strands .rules__item:last-child{border-bottom:0}.strands.strands .rules__item span{color:var(--ink-soft);font-size:.92rem}.strands.strands .settings{display:flex;flex-direction:column}.strands.strands .switch,.strands.strands .setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}.strands.strands .switch{position:relative;cursor:pointer}.strands.strands .switch__text{display:flex;flex-direction:column;gap:1px;min-width:0}.strands.strands .switch__note{color:var(--ink-soft);font-size:.82rem}.strands.strands .switch__input{position:absolute;opacity:0;width:0;height:0}.strands.strands .switch__track{position:relative;flex:none;width:46px;height:27px;border-radius:999px;background:var(--surface-3);transition:background-color .14s ease}.strands.strands .switch__track:after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-1);transition:transform .14s ease}.strands.strands .switch__input:checked~.switch__track{background:var(--accent)}.strands.strands .switch__input:checked~.switch__track:after{transform:translate(19px)}.strands.strands .switch__input:focus-visible~.switch__track{outline:3px solid var(--accent);outline-offset:2px}.strands.strands .segmented{display:inline-flex;flex:none;padding:3px;border-radius:999px;background:var(--surface-2)}.strands.strands .segmented__button{padding:5px 13px;border:0;border-radius:999px;background:transparent;color:var(--ink-soft);font-size:.85rem;font-weight:600;cursor:pointer}.strands.strands .segmented__button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}.strands.strands .result__span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px;border-radius:var(--radius);background:var(--span);color:var(--span-ink)}.strands.strands .result__label{margin:0;font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;opacity:.75}.strands.strands .result__word{font-size:1.3rem;font-weight:700;letter-spacing:.02em}.strands.strands .result__words{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:14px 0 0;padding:0;list-style:none}.strands.strands .result__chip{padding:5px 12px;border-radius:999px;background:var(--found);color:var(--found-ink);font-size:.88rem;font-weight:600}.strands.strands .result__chip--hinted{background:transparent;color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--line)}.strands.strands .result__strip{margin:16px 0 0;font-family:inherit;font-size:1.4rem;line-height:1.35;text-align:center;white-space:pre-wrap}.strands.strands .toasts{position:fixed;top:58px;left:50%;z-index:60;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translate(-50%);pointer-events:none}.strands.strands .toast{padding:9px 16px;border-radius:999px;background:var(--line-strong);color:var(--bg);font-size:.9rem;font-weight:600;box-shadow:var(--shadow-2);animation:toast-in .18s ease}.strands.strands .toast--leaving{opacity:0;transition:opacity .3s ease}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}}.strands.strands .confetti{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;pointer-events:none}.strands.strands .page{width:min(100%,44rem);margin:24px auto 0;padding:0 18px 40px;color:var(--ink)}.strands.strands .page h1{font-size:1.5rem}.strands.strands .page h2{margin-top:30px;font-size:1.2rem}.strands.strands .page h3{margin-top:22px;font-size:1rem}.strands.strands .page p,.strands.strands .page li,.strands.strands .page dd{color:var(--ink-soft)}.strands.strands .page dt{margin-top:12px;font-weight:600;color:var(--ink)}.strands.strands .page dd{margin:2px 0 0}.strands.strands .page a{color:var(--accent)}.strands.strands .page__lead{font-size:1.05rem}.strands.strands .page__footer{padding:0 18px 32px;color:var(--ink-soft);font-size:.85rem;text-align:center}.strands.strands .cal__nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}.strands.strands .cal__month{margin:0;font-size:1rem;font-weight:600}.strands.strands .cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px}.strands.strands .cal__weekday{padding-bottom:4px;color:var(--ink-soft);font-size:.72rem;font-weight:600;text-align:center}.strands.strands .cal__day{display:grid;place-items:center;aspect-ratio:1;padding:0;border:1px solid transparent;border-radius:var(--radius);background:var(--surface-2);color:var(--ink);font-size:.85rem;font-weight:600;cursor:pointer}.strands.strands .cal__day:hover:not(:disabled){border-color:var(--accent)}.strands.strands .cal__day:disabled{background:transparent;color:var(--line);cursor:default}.strands.strands .cal__day--today{box-shadow:inset 0 0 0 2px var(--accent)}.strands.strands .cal__day[data-outcome=clean],.strands.strands .cal__dot[data-outcome=clean]{background:var(--span);color:var(--span-ink)}.strands.strands .cal__day[data-outcome=hinted],.strands.strands .cal__dot[data-outcome=hinted]{background:var(--found);color:var(--found-ink)}.strands.strands .cal__day[data-outcome=gaveup]{background:transparent;color:var(--ink-soft);border-color:var(--line);border-style:dashed}.strands.strands .cal__key{display:flex;justify-content:center;gap:16px;margin-top:14px;color:var(--ink-soft);font-size:.8rem}.strands.strands .cal__keyitem{display:inline-flex;align-items:center;gap:6px}.strands.strands .cal__dot{display:inline-block;width:12px;height:12px;border-radius:4px}.strands.strands .modal__heading{margin:20px 0 8px;font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}.strands.strands .modal__note--left{margin-top:10px;text-align:left}.strands.strands .segmented--wide{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.strands.strands .segmented__title{display:block;font-size:.9rem}.strands.strands .segmented__sub{display:block;font-size:.72rem;opacity:.7;font-variant-numeric:tabular-nums}.strands.strands .themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:6px}.strands.strands .themechip{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-align:left;cursor:pointer}.strands.strands .themechip:hover{border-color:var(--accent);background:var(--surface-2)}.strands.strands .themechip[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}.strands.strands .themechip__title{font-size:.88rem;font-weight:600;color:var(--ink)}.strands.strands .themechip__note{font-size:.74rem;color:var(--ink-soft)}.strands.strands[data-embed] .page,.strands.strands[data-embed] .page__footer{display:none}.strands.strands[data-embed] .app{min-height:100dvh}.strands.strands .app{row-gap:4px;padding-top:4px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.strands.strands .top{padding:0}.strands.strands .clue__kicker{display:none}.strands.strands .clue{margin:0}.strands.strands .clue__text{line-height:1.2}.strands.strands .tally{font-size:.82rem;line-height:1.3}.strands.strands .modes{padding:2px}.strands.strands .modes__tab{padding:5px 16px}.strands.strands .trace{min-height:22px;font-size:.95rem}.strands.strands .button--hint{padding:8px 16px;font-size:.9rem}.strands.strands .chip{padding:4px 11px}.strands.strands .hintbar{margin-top:0}

/* ==========================================================================
   Inline overrides - appended by scripts/scope-css.mjs
   ========================================================================== */

/* The query container, so the two-column rule below can ask how wide this
   block is rather than how wide the window is - which inline is a question
   about somebody else's page and has nothing to do with the space the game was
   actually given. The board already sizes itself from container units against
   .boardhost, so that part needs nothing.

   position:relative is what the overlays below are positioned against.

   It is NOT what contains them. container-type applies layout containment,
   and layout containment is specified to make an element the containing block
   for fixed-position descendants - but Chrome does not do that here: measured
   with container-type set and nothing else changed, .modal still came out at
   0,0 900x968, the whole viewport. Hence the explicit overrides. */
.strands.strands {
  position: relative;
  container-type: inline-size;
}

/* The three overlays, pinned to the block instead of the window.

   Standalone they are position:fixed, which is right when the game IS the page.
   Inline, fixed means the help modal dims the host's entire article - header,
   navigation and all - and the confetti falls across their whole site. Each
   keeps its own offsets; only the reference frame changes. */
.strands.strands .modal,
.strands.strands .confetti,
.strands.strands .toasts {
  position: absolute;
}

/* Same reason, one level down: the panel caps itself against the viewport, and
   inline the viewport is taller than the block it has to fit inside.

   overflow-y comes with the cap and is not optional. Standalone the panel does
   not need to scroll because the overlay around it does, against a viewport the
   panel was measured against anyway. Inline the cap is the block's height, and
   the help panel is taller than that on a phone - measured at 833px of content
   in a 576px panel - so without this the last rule of the game is simply cut
   off, with nothing to scroll and no sign anything is missing. */
.strands.strands .modal__panel {
  max-height: calc(100% - 32px);
  overflow-y: auto;
}

/* How tall the block is, which is the same question as how big the board is.

   The game's own model is not changed here, only the number fed into it:
   .app gets a definite height, .boardhost takes flex:1 of what the chrome
   leaves, and the board fits itself into that with 100cqh * cols / rows. The
   board is bound by HEIGHT, always - it is a portrait grid in a column that is
   never the scarce direction.

   Which is why 40rem was wrong. It was picked as "not a screenful", and the
   board that came out of it measured 238px across in a 636px column, with the
   slack reading as deliberate whitespace rather than as a board nobody had
   sized. The chrome above the board - title, mode tabs, clue, counter, two
   buttons - takes 257px of any height given, so what reaches the board is
   whatever is left, and 40rem leaves very little.

   88vh, because the honest bound is the window: the hint bar has to be on
   screen at the same time as the board, and the game is played with that
   button. Not 100vh - a block exactly as tall as the window gives the reader
   no sign there is an article underneath.

   The 52rem cap is for tall monitors, where 88vh is 900px of board and the
   game starts reading as the page rather than as something in it.

   Measured at the site's 636px column: 269px board at a 700px window, 401px at
   900, 431px at 1080. */
.strands.strands .app {
  min-height: 0;
  height: min(88vh, 52rem);
}

/* The two-column layout, asked of the block instead of the window.
   Standalone this is @media (min-width: 32rem) and (min-aspect-ratio: 5/4).
   The aspect ratio is gone because inline we set the height ourselves, so the
   only open question is whether the column is wide enough for two of them.
   44rem, not 32rem: 32rem of container against a 40rem height is taller than
   it is wide, which is the shape the stacked layout is for. */
@container (min-width: 44rem) {
  .strands.strands .app {
    display: grid;
    grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'top  top'
      'side board'
      'side hint';
    align-items: center;
    gap: 10px 24px;
    width: 100%;
    max-width: 56rem;
  }
  .strands.strands .top { grid-area: top; align-self: start; }
  .strands.strands .side {
    grid-area: side;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
  }
  .strands.strands .boardhost { grid-area: board; height: 100%; }
  .strands.strands .hintbar { grid-area: hint; justify-self: center; }
  .strands.strands .clue__text { font-size: clamp(1.05rem, 2.2vw, 1.45rem); }
}