/* ==========================================================================
   shell.css — the frame around the game.

   The landing, the header pulse strip, the leaderboard, the beta dock, the
   swipe sheet and the wide-screen layout. Loaded after the page's own <style>
   so it can extend it; it redefines no game component except the sheet, whose
   old rules were deleted from index.html in the same change (design §21).

   Same spine as design/tokens.css, spoken in index.html's token names: dark
   ground, one ember (--accent), brass (--gold) spent on trophies only, and
   hierarchy from type rather than boxes.
   ========================================================================== */

:root {
  --display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --e-out: cubic-bezier(.2, .9, .3, 1);
  --e-in-out: cubic-bezier(.6, 0, .4, 1);
  --d-sheet-in: 300ms;
  --d-sheet-out: 210ms;
  --d-sheet-spring: 260ms;
  --sheet-dismiss-frac: 0.28;
  --sheet-flick-vel: 0.55;
  --sheet-rubber: 0.32;
  --sheet-rubber-max: 44px;
  --dock-chip-h: 36px;
  --wide: 1120px;
}

/* ---------------------------------------------------------------- header */
button.mark {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--fg); display: inline-flex; align-items: baseline; gap: 1px; flex: 0 0 auto;
  font: 700 20px/1 var(--display); letter-spacing: -.02em; text-transform: none;
  font-variation-settings: "opsz" 60;
}
button.mark .x { color: var(--accent); }
button.mark .tld { font: 600 9.5px/1 var(--mono); letter-spacing: .08em; color: var(--dim); margin-left: 1px; }
/* On a phone the date beside the mark matters more than the TLD. */
@media (max-width: 400px) {
  button.mark .tld { display: none; }
  .top-row { gap: 6px; }
}
button.mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* The pulse. Runs, players, today, and the door to the leaderboard. Always in
   the sticky header, so it is one tap from anywhere. */
.pulse {
  display: flex; align-items: center; gap: 10px; min-height: 30px;
  margin: -2px 0 0; padding: 0 0 8px;
  font: 600 10.5px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--dim);
}
.pulse[hidden] { display: none; }
.pulse .pn { display: flex; gap: 12px; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.pulse .pn span { overflow-wrap: normal; flex: 0 0 auto; }
.pulse .pn b { color: var(--fg); font-weight: 700; }
.pulse .live { width: 6px; height: 6px; border-radius: 50%; background: var(--good); flex: 0 0 auto;
               box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent);
               animation: live 2.4s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); }
                  70%, 100% { box-shadow: 0 0 0 6px transparent; } }
.pulse .lb {
  flex: 0 0 auto; appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--fg);
  border-radius: 999px; padding: 6px 10px 6px 9px; min-height: 28px;
  font: 700 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.pulse .lb .cup { color: var(--gold); font-size: 11px; }
.pulse .lb:hover { border-color: var(--accent); }
.pulse .lb:active { transform: scale(.97); }
@media (max-width: 380px) { .pulse .pn .opt { display: none; } }

/* ------------------------------------------------------------- the sheet
   design/sheet.js + the tokens.css block. .sheet MOVES, .sheet-body SCROLLS:
   that split is the whole swipe fix. */
.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(8, 8, 10, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: scrim-in var(--d-sheet-in) linear both;
  opacity: var(--scrim-o, 1);
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: var(--scrim-o, 1); } }
.sheet {
  position: relative; width: 100%; max-width: 600px; max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg);
  border-top: 1px solid var(--line-2); border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .9);
  transform: translate3d(0, var(--dy, 0px), 0);
  animation: sheet-in var(--d-sheet-in) var(--e-out) both;
  outline: none;
}
@keyframes sheet-in { from { transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } }
.sheet.is-dragging { animation: none; transition: none; }
.sheet.is-settling { animation: none; transition: transform var(--d-sheet-spring) var(--e-out); }
.sheet.is-leaving  { animation: none; transition: transform var(--d-sheet-out) var(--e-in-out); transform: translate3d(0, 100%, 0); }
.scrim.is-leaving  { animation: none; transition: opacity var(--d-sheet-out) linear; opacity: 0; }
.sheet-grip { flex: 0 0 auto; display: grid; place-items: center; height: 26px; padding-top: 8px;
              cursor: grab; touch-action: none; }
.sheet-grip:active { cursor: grabbing; }
.sheet .grab { display: block; width: 40px; height: 4px; border-radius: 2px; margin: 0; background: var(--line-2);
               transition: background .12s linear, width .12s var(--e-out); }
.sheet.is-dragging .grab { background: var(--dim); width: 52px; }
.sheet.is-dragging .sheet-body { overflow: hidden; touch-action: none; }
.sheet-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; touch-action: pan-y;
  padding: 10px calc(16px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
.sheet-x { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; display: grid; place-items: center;
           background: none; border: 0; cursor: pointer; color: var(--dim); font-size: 17px; line-height: 1; z-index: 1; }
.sheet-x:hover { color: var(--fg); }
.sheet-body > h3:first-child, .sheet-body > .kick:first-child + h3 { padding-right: 34px; }
@media (min-width: 700px) {
  /* On a wide screen a sheet is a card that rises off the floor, not a strip
     glued to both edges. Same element, same drag. */
  .scrim { align-items: flex-end; }
  .sheet { max-width: 620px; border: 1px solid var(--line-2); border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scrim, .sheet { animation: none; }
  .sheet.is-settling, .sheet.is-leaving, .scrim.is-leaving { transition: none; }
  .sheet .grab, .pulse .live { transition: none; animation: none; }
}

/* A small mono kicker above a sheet heading. */
.kick { display: block; margin: 0 0 8px; font: 700 10px/1 var(--mono); letter-spacing: .16em;
        text-transform: uppercase; color: var(--dim); }
.kick.ember { color: var(--accent); }

/* ---------------------------------------------------------------- the dock
   The beta chip. On the board it rides in the Run bar's fade (.in-bar), above
   the button, so it never sits on a seat or on Run. Everywhere else it is in
   this fixed lane and the page reserves the lane's height (body.has-dock). */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; pointer-events: none; }
.dock-chiplane {
  display: flex; align-items: center; height: var(--dock-chip-h);
  max-width: 600px; margin: 0 auto calc(6px + env(safe-area-inset-bottom));
  padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
  pointer-events: none;
}
.dock-chiplane > * { pointer-events: auto; }
body.has-dock { padding-bottom: calc(var(--dock-chip-h) + 10px + env(safe-area-inset-bottom)); }
body.has-dock footer { padding-bottom: 12px; }
.beta-chip.in-bar { position: absolute; left: 0; top: -2px; z-index: 1; height: 24px; padding: 0 9px; }
.beta-chip.in-bar .say { display: none; }
@media (min-width: 420px) { .beta-chip.in-bar .say { display: inline; } }

.beta-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px;
  border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--dim); font: 700 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  transition: color .12s linear, border-color .12s linear;
}
.beta-chip:hover { color: var(--fg); border-color: var(--dim); }
.beta-chip:active { transform: scale(.97); }
.beta-chip b { color: var(--accent); font-weight: inherit; }
.beta-chip .say { letter-spacing: .04em; text-transform: none; font-weight: 500; font-size: 11px; }
.beta-chip .held { color: var(--gold); letter-spacing: .04em; text-transform: none; }

/* ---------------------------------------------------------------- composer */
.fb-say { width: 100%; min-height: 112px; resize: vertical; display: block;
          padding: 12px 13px; font: 16px/1.45 var(--sans); color: var(--fg);
          background: var(--sunk); border: 1px solid var(--line-2); border-radius: 11px; }
.fb-say:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.fb-say:disabled { opacity: .6; }
.fb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 14px; }
.fb-row .lab { font-size: 13px; color: var(--dim); margin-right: auto; }
.fb-thumb { appearance: none; cursor: pointer; border: 1px solid var(--line-2); background: none; color: var(--dim);
            border-radius: 999px; padding: 8px 13px; min-height: 36px; font: 600 13px/1 var(--sans); }
.fb-thumb[aria-pressed="true"] { color: var(--fg); border-color: var(--accent); background: var(--accent-soft); }
.fb-foot { display: flex; align-items: center; gap: 12px; }
.fb-foot .big { flex: 1 1 auto; }
.fb-count { flex: 0 0 auto; font: 600 12px/1 var(--mono); color: var(--dim); min-width: 3ch; text-align: right; }
.fine, .sheet .fine { font-size: 12.5px; line-height: 1.5; color: var(--dim); margin: 12px 0 0; }

.filed { border: 1px dashed var(--line-2); border-radius: 12px; padding: 16px 14px 14px; margin: 4px 0 14px;
         background: var(--sunk); position: relative; }
.filed .stamp { display: inline-block; font: 800 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
                color: var(--good); border: 2px solid currentColor; border-radius: 5px; padding: 5px 8px;
                transform: rotate(-3deg); margin-bottom: 12px; }
.filed .stamp.held { color: var(--gold); }
.filed blockquote { margin: 0 0 12px; font: 500 17px/1.4 var(--display); color: var(--fg); overflow-wrap: anywhere; }
.filed .ln { display: flex; gap: 10px; font-size: 12.5px; color: var(--dim); padding-top: 8px; border-top: 1px solid var(--line); }
.filed .ln .k { font: 700 9.5px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; flex: 0 0 auto; }

/* ------------------------------------------------------------ leaderboard */
.lb-tabs { display: flex; gap: 4px; background: var(--sunk); border: 1px solid var(--line); border-radius: 11px;
           padding: 4px; margin: 4px 0 12px; }
.lb-tabs button { flex: 1; border: 0; background: none; color: var(--dim); cursor: pointer; border-radius: 8px;
                  padding: 9px 4px; font: 650 13px/1.1 var(--sans); }
.lb-tabs button[aria-pressed="true"] { background: var(--card); color: var(--fg); box-shadow: var(--shadow); }
.lb-head { display: flex; justify-content: space-between; gap: 10px; margin: 0 2px 8px;
           font: 700 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.lb { border: 1px solid var(--line); border-radius: 13px; background: var(--card); overflow: hidden; margin-bottom: 12px; }
.lb-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center;
          padding: 11px 13px; border-top: 1px solid var(--line); }
.lb-row:first-child { border-top: 0; }
.lb-row .rk { font: 700 13px/1 var(--mono); color: var(--dim); text-align: right; }
.lb-row .who { min-width: 0; font-weight: 640; font-size: 15px; overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; overflow-wrap: normal; }
.lb-row .who small { display: block; font: 500 11.5px/1.35 var(--sans); color: var(--dim); white-space: nowrap;
                     overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.lb-row .sc { font: 700 20px/1 var(--mono); letter-spacing: -.03em; }
.lb-row.top1 .rk, .lb-row.top1 .sc { color: var(--gold); }
.lb-row.top2 .rk, .lb-row.top3 .rk { color: var(--fg); }
.lb-row .tag { display: inline-block; margin-left: 7px; padding: 3px 6px; border-radius: 4px; vertical-align: 2px;
               font: 700 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
               background: var(--sunk); color: var(--dim); border: 1px solid var(--line); }
.lb-row.me { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.lb-row.me .tag { background: var(--accent); color: #1a0f0c; border-color: transparent; }
:root[data-theme="light"] .lb-row.me .tag { color: #fff; }
.lb-why, .sheet .lb-why { grid-column: 2 / -1; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--dim); }
.lb-why button { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 650; cursor: pointer; }
.lb-gap { padding: 6px 13px; text-align: center; color: var(--dim); font: 700 12px/1 var(--mono); border-top: 1px solid var(--line); }
.lb-empty { padding: 22px 16px; text-align: center; color: var(--dim); font-size: 14px; }
.lb-empty b { display: block; color: var(--fg); font-size: 16px; margin-bottom: 4px; }
.lb-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.lb-totals div { border: 1px solid var(--line); border-radius: 11px; background: var(--card); padding: 10px 8px; text-align: center; }
.lb-totals b { display: block; font: 700 20px/1 var(--mono); letter-spacing: -.03em; overflow-wrap: normal; }
.lb-totals span { display: block; margin-top: 5px; font: 600 9px/1.2 var(--mono); letter-spacing: .1em;
                  text-transform: uppercase; color: var(--dim); }
.skel-row { height: 46px; border-top: 1px solid var(--line); }

/* To-beat line on the board: the competition, one line, before you type. */
.tobeat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -8px 0 18px;
          font-size: 13px; color: var(--dim); }
.tobeat[hidden] { display: none; }
.tobeat b { color: var(--fg); font-weight: 650; }
.tobeat .n { font: 700 13px/1 var(--mono); color: var(--gold); }
.tobeat button { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 620; cursor: pointer; }

/* ------------------------------------------------------------- name sheet */
.namefield { display: flex; gap: 8px; margin: 4px 0 8px; }
.namefield input { flex: 1 1 auto; min-width: 0; }
.namefield .big { width: auto; flex: 0 0 auto; padding: 0 18px; }
.gsi { min-height: 44px; margin-top: 10px; }
.choice { display: grid; gap: 9px; margin-top: 6px; }

/* ---------------------------------------------------------------- landing */
.landing { padding: 22px 0 8px; }
.landing .pitch h1 {
  margin: 0 0 14px; font: 600 clamp(34px, 10vw, 58px)/1.0 var(--display);
  letter-spacing: -.035em; font-variation-settings: "opsz" 144;
}
.landing .pitch h1 em { font-style: italic; color: var(--accent); font-weight: 500; }
.landing .what { margin: 0 0 22px; max-width: 36ch; color: var(--dim); font-size: 16px; line-height: 1.55; }
.landing .what b { color: var(--fg); font-weight: 620; }
.halves { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden;
          margin-bottom: 12px; box-shadow: var(--shadow); }
.halves-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line);
               font: 700 10px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.halves-head .hh { flex: 1; }
.halves-grid { display: grid; grid-template-columns: 1fr 1px 1fr; }
.halves-rule { background: var(--line); }
.half { display: block; width: 100%; text-align: left; padding: 14px 14px 16px; background: none; border: 0;
        cursor: pointer; color: var(--dim); font: inherit; transition: background .12s linear; }
.half .hn { display: block; font: 600 21px/1.1 var(--display); letter-spacing: -.02em; color: var(--fg); margin-bottom: 4px; }
.half .hd { display: block; font-size: 13px; line-height: 1.4; }
.half[aria-pressed="true"] { background: var(--accent-soft); }
.half[aria-pressed="true"] .hn { color: var(--accent); }
.half:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.eg { display: flex; gap: 9px; align-items: baseline; margin: 0 2px 20px; font-size: 14px; color: var(--dim); }
.eg .xx { color: var(--accent); font-weight: 800; flex: 0 0 auto; }
.eg b { color: var(--fg); font-weight: 650; }
.eg .swap { transition: opacity .15s linear; }
.eg.is-swapping .swap { opacity: 0; }
.landing .play .big { display: flex; align-items: baseline; justify-content: center; gap: 10px; font-size: 17px; padding: 17px; }
.landing .play .in { font: 700 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.routes { border-top: 1px solid var(--line); margin-top: 20px; }
.route { display: flex; align-items: baseline; gap: 14px; width: 100%; text-align: left; padding: 13px 2px;
         background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; color: var(--fg);
         font: inherit; text-decoration: none; }
.route .rn { flex: 0 0 auto; font: 600 18px/1.2 var(--display); letter-spacing: -.01em; }
.route .rd { flex: 1; min-width: 0; font-size: 13px; color: var(--dim); }
.route .ra { flex: 0 0 auto; color: var(--dim); }
.route:hover .rn, .route:hover .ra { color: var(--accent); }
.pulsecard { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 14px; margin-top: 22px; }
.pulsecard .kick { display: flex; align-items: center; gap: 8px; }
.pulsecard .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 12px; }
.pulsecard .grid b { display: block; font: 700 26px/1 var(--mono); letter-spacing: -.04em; overflow-wrap: normal; }
.pulsecard .grid span { display: block; margin-top: 5px; font: 600 9.5px/1.2 var(--mono); letter-spacing: .1em;
                        text-transform: uppercase; color: var(--dim); }
.pulsecard .big { margin-top: 2px; }
.pulsecard .live, .kick .live { width: 6px; height: 6px; border-radius: 50%; background: var(--good); display: inline-block;
                                   animation: live 2.4s ease-out infinite; }
.pulsecard .beat { margin: 0 0 12px; font-size: 13px; color: var(--dim); }
.pulsecard .beat b { color: var(--gold); font-family: var(--mono); }
.why3 { margin: 0 0 16px; padding-left: 1.1em; color: var(--dim); font-size: 14.5px; line-height: 1.5; }
.why3 li + li { margin-top: 4px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; font-weight: 620; }
.floor { padding: 26px 0 8px; }
.floor p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--dim); }
.floor .no { color: var(--fg); opacity: .8; }
.floor button { background: none; border: 0; padding: 0; font: inherit; color: var(--fg); cursor: pointer;
                border-bottom: 1px solid var(--line-2); }
.floor button:hover { color: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------------ board layout
   Phone: exactly the old single column (.board-grid is a plain block). */
.board-grid { display: block; }

/* ======================================================================
   Wide screens. Eli: "desktop web layout is poor". Phone-first still: none
   of this applies under 960px, and nothing here changes a phone pixel.
   ====================================================================== */
@media (min-width: 960px) {
  /* The header spans a wider column; the live strip sits on the wordmark's
     line instead of under it. */
  .top .wrap { max-width: var(--wide); display: flex; align-items: center; gap: 22px; }
  .top .top-row { flex: 1 1 auto; min-width: 0; padding: 14px 0 12px; gap: 10px; }
  .top .pulse { flex: 0 1 auto; margin: 0; padding: 0; order: 2; }
  button.mark { font-size: 23px; }

  body[data-view="board"] > .wrap, body[data-view="landing"] > .wrap { max-width: var(--wide); }
  body[data-view="archive"] > .wrap, body[data-view="profile"] > .wrap { max-width: 760px; }
  body[data-view="result"] > .wrap { max-width: 720px; }
  .dock-chiplane { max-width: var(--wide); }

  /* The board: the brief on the left, pinned while you work down the seats
     on the right. The eye goes back and forth between them all game. */
  .board-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
  .board-head { position: sticky; top: 76px; padding-top: 6px; }
  .board-head h2 { font: 600 44px/1.04 var(--display); letter-spacing: -.03em; margin-bottom: 14px; }
  .board-head .blurb { font-size: 17px; line-height: 1.6; max-width: 46ch; }
  .board-seats .slot { padding: 15px 16px 14px; }
  body[data-view="board"] .modes { max-width: 520px; }

  /* The landing: the pitch and the choice on the left, the ways in and the
     live numbers on the right. Play stays above the fold. */
  .landing { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px;
             align-items: start; padding-top: 56px; }
  .landing .pitch h1 { font-size: 76px; }
  .landing .what { font-size: 18px; }
  .landing .side { padding-top: 12px; }
  .landing .routes { margin-top: 0; }
  .landing .pulsecard { margin-top: 22px; }
  .landing .floor { grid-column: 1 / -1; padding-top: 10px; }

  .sheet { border-radius: 20px 20px 0 0; }
}

/* A toast clears the beta chip instead of landing on it. */
body.has-dock .toast { bottom: calc(var(--dock-chip-h) + 18px + env(safe-area-inset-bottom)); }
.lb-totals[hidden] { display: none; }

/* ======================================================================
   Every device. Checked at 320, 375, 768, 812x375 landscape, 1440, 1920.
   ====================================================================== */

/* 320-class phones (SE, mini, small Androids): the mode taglines were cut to
   "Judged on ca…". Let them wrap to two short lines instead of clipping. */
@media (max-width: 360px) {
  .modes button { padding: 8px 4px 7px; }
  .modes button .mt { white-space: normal; overflow: visible; text-overflow: clip; font-size: 10px; }
  .top .top-row { gap: 6px; }
}

/* Landscape phones: the fixed header and Run bar would eat most of a 375px-tall
   screen. Let the header scroll away and slim the bar. */
@media (max-height: 480px) and (orientation: landscape) {
  .top { position: static; }
}

/* Big monitors: at 1920 the app was a small island in the middle. Widen the
   column and lift the type a notch; nothing below 1600 changes. */
@media (min-width: 1600px) {
  :root { --wide: 1320px; }
  .board-grid { gap: 80px; }
  body { font-size: 17px; }
  body[data-view="result"] > .wrap { max-width: 820px; }
  body[data-view="archive"] > .wrap, body[data-view="profile"] > .wrap { max-width: 880px; }
}
@media (min-width: 2200px) {
  :root { --wide: 1520px; }
}