* { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { font-family: 'Segoe UI', monospace; font-size: 13px; background: #e8e8e8; }
    /* --board-pad is the sheet inset: the overlay reads it (left/right, and
       the JS overflow calc writes calc(var(--board-pad) + Npx) back here) */
    #board { --board-pad: 0.923em; padding: var(--board-pad); min-height: 100vh; box-sizing: border-box; position: relative; }
    /* Control help + settings overlay (2026-10-30, planned 2026-10-28): the
       instruction block (old cells A/B rows 12-27) and the read-only rules
       panel (old cells F/G rows 12-21) float over the sheet as ONE element.
       Transparent so the grid shows through; pointer-events: none so clicks
       and taps fall through to the table's delegated handlers; .hidden is the
       c toggle; body.boss-hide hides it with the rest of the disguise.
       positionHelpOverlay() writes style.top (dataset.topRow = the row it
       targets) so split hands on rows 11+ push the top edge down, and grows
       #board's bottom padding when the block would run past sheet row 30. */
    #help-overlay {
      position: absolute;
      top: 0;
      /* +3em = the row-label gutter (td.label), so the panels line up on
         column A exactly where the old cell-based blocks sat */
      left: calc(var(--board-pad, 0.923em) + 3em);
      right: var(--board-pad, 0.923em);
      display: flex;
      flex-wrap: wrap;
      gap: 0.25em 3em;          /* row-gap; column-gap separates the two panels */
      align-content: flex-start;
      pointer-events: none;
      white-space: nowrap;
      z-index: 1;
      line-height: 2.2em;       /* one overlay line per sheet row (mirrors td height) */
    }
    #help-overlay.hidden { display: none; }
    body.boss-hide #help-overlay { display: none; }
    #help-overlay .oh-block { flex: none; }
    #help-overlay .oh-row { display: flex; }
    /* label: 7em centered (the old cell), value: grey settings / black help */
    #help-overlay .oh-k { flex: none; width: 7em; text-align: center; color: #666; }
    #help-overlay .oh-v { color: #666; }
    #help-overlay .oh-controls { width: 14em; }   /* A+B: long values spill into the gap (intended) */
    #help-overlay .oh-controls .oh-k, #help-overlay .oh-controls .oh-v { color: #000; }
    #help-overlay .oh-settings .oh-v { width: 7em; text-align: center; } /* old col G was centered */
    /* DDM split patch (old setCell(INSTR_ORIGIN_ROW+6, ... 'N/A(DDM)')) */
    #help-overlay .oh-row.oh-na .oh-k, #help-overlay .oh-row.oh-na .oh-v { color: #ccc; }
    table { border-collapse: collapse; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.12); table-layout: fixed; width: calc(3em + 22 * 7em); }
    td, th {
      width: 7em; height: 2.2em;
      border: 1px solid #d4d4d4;
      text-align: center;
      vertical-align: middle;
      cursor: default;
      user-select: none;
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(51, 102, 255, 0.2);
      font-size: 1em;
      white-space: nowrap;
      overflow: visible;
    }
    th { background: #f0f0f0; color: #666; font-weight: normal; font-size: 0.846em; }
    td.label { width: 3em; background: #f0f0f0; color: #666; font-size: 0.846em; }
    /* thin divider between the Dealer section (rows 2 + its row-3 wrap spacer) and the Player section (row 4+); spans the game columns C–G only (label + 4 card slots = a complete hand fitting
       the C–H game grid beside the A/B info panel), the panel and row-label gutter
       keep the plain gridline; suppressed while the boss-key disguise is active */
    body:not(.boss-hide) tr[data-game-row="3"] td:nth-child(n+4):nth-child(-n+8) { border-bottom-color: #999; }
    body:not(.boss-hide) tr[data-game-row="4"] td:nth-child(n+4):nth-child(-n+8) { border-top-color: #999; }
    th.label { width: 3em; background: #f0f0f0; }
    td.cursor, th.cursor { outline: 2px solid #3366ff; outline-offset: -2px; }
    #modal-overlay {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.4); z-index: 2000;
      display: flex; align-items: center; justify-content: center;
    }
    #modal-overlay.hidden { display: none; }
    #modal-box {
      background: #fff; border-radius: 8px; padding: 1.231em 1.538em;
      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
      text-align: center; font-family: 'Segoe UI', sans-serif;
    }
    #modal-box p { margin: 0 0 1.231em; font-size: 1.077em; color: #333; }
    #modal-box button {
      font-size: 1em; padding: 0.462em 1.231em; margin: 0.308em;
      border: 1px solid #aaa; border-radius: 4px; cursor: pointer;
      background: #f5f5f5;
    }
    #modal-box button:hover { background: #e0e0e0; }
    #modal-box button.yes { background: #4caf50; color: #fff; border-color: #388e3c; }
    #modal-box button.yes:hover { background: #388e3c; }
    #modal-box input[type=number] {
      font-size: 1em; padding: 0.231em 0.308em;
      border: 1px solid #aaa; border-radius: 3px;
    }
    #seo-content {
      max-width: calc(3em + 22 * 7em);
      margin: 1.5em auto 2em;
      padding: 0 0.923em;
      font-family: 'Segoe UI', sans-serif;
      font-size: 13px;
      color: #555;
      line-height: 1.6;
    }
    #seo-content h2 { font-size: 1.15em; color: #333; margin: 0 0 0.6em; }
    #seo-content h3 { font-size: 1.08em; color: #333; margin: 1.2em 0 0.5em; }
    #seo-content h4 { font-size: 1em; color: #444; margin: 0.8em 0 0.2em; }
    #seo-content p  { margin: 0 0 0.6em; }
    #seo-content kbd {
      display: inline-block;
      padding: 0.1em 0.4em;
      font-family: monospace;
      font-size: 0.92em;
      background: #f0f0f0;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-shadow: 0 1px 0 #bbb;
    }
    .visually-hidden {
      position: absolute; width: 1px; height: 1px;
      margin: -1px; padding: 0; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    #site-footer {
      max-width: calc(3em + 22 * 7em);
      margin: 0 auto 2em;
      padding: 1em 0.923em 0;
      border-top: 1px solid #d4d4d4;
      font-family: 'Segoe UI', sans-serif;
      font-size: 12px;
      color: #888;
    }
    #site-footer a { color: #666; text-decoration: none; }
    #site-footer a:hover { color: #333; text-decoration: underline; }
    /* Skinny mode: compact the gameplay columns (A–M only; N+ never carry
       gameplay content). Toggled with [t]; auto on touch/narrow screens.
       Desktop skinny: only A–M shrink, N+ keep normal width.
       .fit (auto contexts): N+ hidden entirely and A–M sized to the screen. */
    body.skinny { font-size: 9px; }
    body.skinny #board { --board-pad: 0.231em; padding: var(--board-pad); }
    body.skinny #help-overlay { line-height: 2em; }   /* mirror skinny td height */
    body.skinny table { width: calc(2.4em + 8 * 1.8em + 1092px); }
    body.skinny td, body.skinny th { width: 1.8em; height: 2em; }
    body.skinny td.label, body.skinny th.label { width: 2.4em; }
    /* desktop skinny: columns N+ stay normal size (91px cells, 13px text) */
    body.skinny td:nth-child(n+10), body.skinny th:nth-child(n+10) { width: 91px; font-size: 13px; }
    /* fit (mobile/touch): gameplay area only — hide columns N–T and let
       A–M fill the full screen width. With table-layout:fixed the first
       row sets widths: the row-label column stays narrow, and the 13
       gameplay columns are width:auto so they split the rest evenly. */
    body.skinny.fit { font-size: 12px; }
    body.skinny.fit #board { --board-pad: 0.15em; padding: var(--board-pad); }
    body.skinny.fit #help-overlay { line-height: 2.4em; }
    body.skinny.fit table { width: 100%; margin: 0; }
    body.skinny.fit td, body.skinny.fit th { width: auto; height: 2.4em; }
    body.skinny.fit td.label, body.skinny.fit th.label { width: 2.2em; }
    body.skinny.fit td:nth-child(n+10), body.skinny.fit th:nth-child(n+10) { display: none; }
    @media (min-width: 600px) {
      body.skinny.fit { font-size: 13px; }
      body.skinny.fit td, body.skinny.fit th { height: 2.8em; }
      body.skinny.fit #help-overlay { line-height: 2.8em; }
      body.skinny.fit td.label, body.skinny.fit th.label { width: 2.4em; }
    }