* { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    /* dark-purple dune: sandy grain noise over a deep violet, with a soft
       glow pool and edge vignette — no more checkerboard */
    background:
      radial-gradient(ellipse 640px 620px at 50% 40%, rgba(196, 178, 255, 0.10), rgba(196, 178, 255, 0) 72%),
      radial-gradient(ellipse 90% 85% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(12, 8, 24, 0.38) 100%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.16'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
      #362d4c;
    overflow: hidden;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    color: #1a1a1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 100%;
  }
  #stage {
    /* scaled as one unit (zoom reflows) so small embeds never cut the UI */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  #wrap {
    display: flex;
    align-items: flex-start;
    gap: 18px;
  }
  #menuChip {
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 90;
    width: 44px;
    height: 44px;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    font-size: 20px;
    color: #1a1a1a;
    background: #fdfdf6;
    border: 3px solid #2b2b2b;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.35);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #menuChip:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0,0,0,0.35); }
  #menuOverlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(28, 22, 44, 0.82);
  }
  #menuOverlay.open { display: flex; }
  .menuPlaque {
    background: #fdfdf6;
    border: 4px solid #2b2b2b;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06), 6px 6px 0 rgba(0,0,0,0.45);
    padding: 30px 44px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }
  .menuTitle {
    font-size: clamp(30px, 7vw, 44px);
    letter-spacing: 6px;
    color: #1a1a1a;
  }
  .menuBar { width: 84px; height: 6px; background: #e8a53c; }
  .menuTag { font-size: 13px; color: #6b6255; letter-spacing: 1px; }
  .menuBtn {
    font-family: inherit;
    font-weight: bold;
    font-size: 19px;
    letter-spacing: 3px;
    color: #fdfdf6;
    background: #2b2b2b;
    border: none;
    padding: 14px 52px;
    margin-top: 8px;
    min-height: 44px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menuBtn:hover, .menuBtn:focus-visible { background: #4a4570; }
  .menuBtn:active { transform: translate(2px, 2px); }
  .menuBtnGhost {
    background: transparent;
    color: #2b2b2b;
    border: 3px solid #2b2b2b;
    padding: 10px 40px;
    font-size: 14px;
    display: none;
  }
  .menuBtnGhost.show { display: inline-block; }
  .menuBtnAlt {
    background: #fdfdf6; color: #2b2b2b; font-size: 13px; padding: 8px 14px;
    margin-top: 4px;
  }
  .menuBtnAlt:hover, .menuBtnAlt:focus-visible { background: #e8e6d8; color: #2b2b2b; }
  .menuBtnGhost:hover, .menuBtnGhost:focus-visible { background: #2b2b2b; color: #fdfdf6; }
  .menuHint { font-size: 11px; color: #8a8a8a; letter-spacing: 1px; margin-top: 6px; }
  /* metal pipe frame: brushed sheen + 4 corner rivets, layered as
     background-image on the static frame element (no per-frame cost) */
  #frame {
    position: relative;
    padding: 10px;
    border: 3px solid #4a4a4a;
    border-radius: 6px;
    background-color: #b0b0b0;
    background-repeat: no-repeat;
    background-image:
      radial-gradient(circle at 32% 32%, #ffffff 0%, #d4d4d4 28%, #787878 62%, rgba(90,90,90,0) 82%),
      radial-gradient(circle at 32% 32%, #ffffff 0%, #d4d4d4 28%, #787878 62%, rgba(90,90,90,0) 82%),
      radial-gradient(circle at 32% 32%, #ffffff 0%, #d4d4d4 28%, #787878 62%, rgba(90,90,90,0) 82%),
      radial-gradient(circle at 32% 32%, #ffffff 0%, #d4d4d4 28%, #787878 62%, rgba(90,90,90,0) 82%),
      linear-gradient(115deg, rgba(255,255,255,0) 28%, rgba(255,255,255,0.45) 41%, rgba(255,255,255,0) 55%),
      linear-gradient(180deg, #e4e4e4, #9a9a9a);
    background-position:
      2px 2px,
      right 2px top 2px,
      2px bottom 2px,
      right 2px bottom 2px,
      0 0,
      0 0;
    background-size:
      7px 7px, 7px 7px, 7px 7px, 7px 7px,
      100% 100%, 100% 100%;
    box-shadow:
      inset 0 0 0 2px #efefef,
      inset 0 0 0 4px #8f8f8f,
      4px 4px 0 rgba(0,0,0,0.25);
  }
  #overlay {
    position: absolute;
    left: 10px; right: 10px; top: 10px; bottom: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 6, 4, 0.7);
    text-align: center;
    letter-spacing: 1px;
  }
  /* bordered plaque: same hard-border + offset-shadow language as the side panel boxes */
  #overlay .plaque {
    background: #fdfdf6;
    color: #1a1a1a;
    border: 3px solid #2b2b2b;
    box-shadow:
      inset 0 0 0 2px rgba(0,0,0,0.06),
      5px 5px 0 rgba(0,0,0,0.4);
    padding: 22px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 18px;
  }
  #overlay .big { font-size: 28px; letter-spacing: 4px; }
  #overlay .dim { font-size: 12px; opacity: 0.65; letter-spacing: 2px; }
  .adOffer { margin: 14px 0 4px; }
  .adIcoBig { width: 46px; height: 46px; display: block; margin: 0 auto 6px; }
  .adIcoBig rect { fill: #2b2b2b; }
  .adIcoBig .tri { fill: #fdfdf6; }
  .adIcoBig .spark { fill: #e8a33a; }
  .adText { font-size: 13px; letter-spacing: 1px; }
  .overBtns { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
  .overBtn {
    font-family: "Courier New", Courier, monospace; font-weight: bold;
    font-size: 14px; letter-spacing: 2px; cursor: pointer;
    padding: 11px 18px; border: 3px solid #2b2b2b; background: #2b2b2b;
    color: #fdfdf6; box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
    display: inline-flex; align-items: center; gap: 7px;
  }
  .overBtn.ghost { background: #fdfdf6; color: #2b2b2b; }
  .overBtn:hover:not(:disabled) { filter: brightness(1.12); }
  .overBtn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
  .overBtn:disabled { opacity: 0.55; cursor: default; }
  .adIco { width: 17px; height: 17px; }
  .adIco rect { fill: #fdfdf6; }
  .adIco .tri { fill: #2b2b2b; }
  /* Shared visual actions: their shapes and accessible labels carry meaning,
     while green consistently marks the action that continues play. */
  .srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .actionIcon { width: 32px; height: 32px; flex: none; fill: none; stroke: currentColor;
    stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .actionIcon .solid { fill: currentColor; stroke: none; }
  button:focus-visible { outline: 3px solid #e9ab45; outline-offset: 5px; }
  .menuPlaque { width: min(380px, calc(100vw - 28px)); padding: 28px 24px 24px; gap: 17px;
    max-height: calc(100svh - 28px); overflow-y: auto; }
  .menuTitle { font-size: clamp(27px, 7vw, 39px); letter-spacing: 4px; }
  .menuIllustration { width: 172px; height: 61px; margin: 1px 0; }
  .menuActions { display: flex; align-items: center; justify-content: center; gap: 14px; }
  .menuBtn, .overBtn { justify-content: center; position: relative; border-radius: 12px;
    padding: 14px; min-width: 72px; min-height: 66px; gap: 0; margin: 0;
    border: 3px solid #30302d; box-shadow: 3px 4px 0 #0003; }
  .menuBtn { display: inline-flex; }
  .menuBtn.primary, .overBtn.primary { background: #287f4c; color: #fffef3;
    border-color: #1e5737; min-width: 112px; box-shadow: 3px 4px 0 #12362255; }
  .menuBtn.primary:hover, .menuBtn.primary:focus-visible { background: #35975d; }
  .menuBtn.primary.replay { min-width: 72px; background: #fdfdf6; color: #30302d;
    border-color: #30302d; box-shadow: 3px 4px 0 #0003; }
  .menuBtnGhost { display: none; }
  .menuBtnGhost.show { display: inline-flex; }
  .menuBtn:disabled { opacity: .6; cursor: wait; }
  .menuBtnAlt { border: 1px solid #d4d6c9; background: #f0f1e8; color: #555e4c;
    box-shadow: none; min-height: 44px; min-width: 100px; padding: 8px 14px; gap: 10px; }
  .menuBtnAlt .actionIcon { width: 25px; height: 25px; }
  .assistState { width: 25px; height: 16px; background: #b8bdb0; border-radius: 9px;
    padding: 3px; display: flex; align-items: center; }
  .assistState::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: white; }
  .menuBtnAlt[aria-pressed="true"] .assistState { background: #287f4c; justify-content: flex-end; }
  #overlay .plaque { width: min(280px, calc(100vw - 28px)); padding: 24px 18px;
    flex: none; gap: 19px; border-radius: 15px; }
  .resultMark { width: 45px; height: 45px; color: #3d4338; }
  .resultStats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .statTile { display: flex; align-items: center; justify-content: center; gap: 9px;
    background: #efefe5; border-radius: 9px; padding: 12px 8px; min-width: 0; }
  .statTile strong { font-size: 21px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
  .statTile .actionIcon { width: 22px; height: 22px; color: #95702c; stroke-width: 2; }
  .statTile.clears .actionIcon { color: #4775a3; }
  .statTile.time { grid-column: 1 / -1; padding: 9px; background: none; }
  .statTile.time strong { font-size: 15px; color: #75766a; }
  .statTile.time .actionIcon { width: 17px; height: 17px; color: #858779; }
  .overBtns { gap: 13px; margin: 0; flex-wrap: nowrap; }
  .overBtn .actionIcon { width: 31px; height: 31px; }
  .adBadge { position: absolute; right: -7px; top: -10px; display: flex; align-items: center;
    gap: 4px; padding: 4px 6px; border-radius: 7px; background: #ffd477; color: #46351b;
    border: 2px solid #fdfdf6; font: bold 9px system-ui, sans-serif; letter-spacing: .4px; }
  .adBadge .adIco { width: 14px; height: 14px; }
  .adBadge .adIco rect { fill: #46351b; }
  .adBadge .adIco .tri { fill: #ffd477; }
  .busyIcon { animation: actionSpin 1.2s linear infinite; }
  @keyframes actionSpin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .busyIcon { animation: none; } }
  @media (max-height: 430px) { .menuPlaque { gap: 10px; padding: 18px 22px; }
    .menuIllustration { height: 42px; }.menuBtn { min-height: 54px; padding: 9px; } }
  #popups {
    position: absolute;
    left: 10px; right: 10px; top: 10px; bottom: 10px;
    overflow: hidden;
    pointer-events: none;
  }
  .popup {
    position: absolute;
    transform: translate(-50%, -50%);
    color: #fdfdf6;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.7), -1px -1px 0 rgba(0,0,0,0.5);
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    white-space: nowrap;
    animation: popupFloat 700ms ease-out forwards;
  }
  .popup.combo { color: #f7c05e; font-size: 15px; }
  @keyframes popupFloat {
    0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.8); }
    20%  { opacity: 1; transform: translate(-50%, -60%) scale(1.05); }
    100% { opacity: 0; transform: translate(-50%, -130%) scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .popup { animation: popupFadeOnly 700ms ease-out forwards; }
  }
  @keyframes popupFadeOnly {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    100% { opacity: 0; }
  }
  #game {
    display: block;
    width: 320px;
    height: 640px;
    image-rendering: pixelated;
    background: #0a0a0a;
    border: 3px solid #333;
  }
  #panel {
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
  }
  .box {
    background: #fdfdf6;
    border: 3px solid #2b2b2b;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
    padding: 8px;
  }
  .box .label {
    font-size: 11px;
    letter-spacing: 2px;
    color: #8a8a8a;
    margin-bottom: 6px;
  }
  .box canvas {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto;
    image-rendering: pixelated;
    background: #0a0a0a;
    border: 2px solid #2b2b2b;
  }
  .stat { font-size: 17px; line-height: 1.2; }
  .stat .small {
    font-size: 11px;
    letter-spacing: 2px;
    color: #8a8a8a;
  }
  /* score is the hero stat: bigger value, warm accent label, heavier border */
  .box.hero {
    border-width: 4px;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
    padding: 9px 8px 11px;
  }
  .box.hero .small { color: #b4790f; letter-spacing: 3px; }
  .box.hero #score { font-size: 32px; letter-spacing: 0.5px; }
  #previewRow { display: flex; gap: 12px; }
  #previewRow .box { flex: 1; }
  #previewRow canvas { width: 60px; height: 60px; }
  #legend {
    font-size: 12px;
    background: rgba(253,253,246,0.9);
    border: 2px solid #2b2b2b;
    padding: 6px 14px;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
    max-width: 544px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
  }
  #legend .li { white-space: nowrap; }
  #legend .li:not(:last-child)::after {
    content: "\00b7";
    margin: 0 8px;
    opacity: 0.5;
  }
  #game { touch-action: none; }
  #overlay { touch-action: none; }
  /* touch bar + touch legend: hidden on desktop, shown for coarse pointers
     and narrow layouts */
  #touchbar {
    display: none;
    gap: 10px;
  }
  .tbtn {
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 1px;
    color: #1a1a1a;
    background: #fdfdf6;
    border: 3px solid #2b2b2b;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
    padding: 9px 12px;
    touch-action: manipulation;
  }
  .tbtn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 rgba(0,0,0,0.25);
  }
  #legendTouch { display: none; }
  @media (pointer: coarse), (max-width: 620px) {
    #touchbar { display: flex; }
    #legend { display: none; }
    #legendTouch {
      display: block;
      font-size: 11px;
      text-align: center;
      background: rgba(253,253,246,0.9);
      border: 2px solid #2b2b2b;
      padding: 4px 10px;
      box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
      max-width: calc(100vw - 20px);
    }
    #touchbar {
      flex-wrap: wrap;
      justify-content: center;
      max-width: calc(100vw - 12px);
    }
  }
  /* portrait / narrow: compact HUD below the field, buttons at thumb reach.
     Gated on real portrait — this layout reserves ~300px of vertical space for
     the HUD, which a short landscape viewport simply does not have, and the
     field would collapse to a sliver while the HUD stayed full size. */
  @media (max-width: 620px) and (orientation: portrait) {
    body {
      justify-content: flex-start;
      padding: 10px 0 16px;
      gap: 8px;
    }
    #wrap {
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    #game {
      /* floored: on a short viewport the height term can reach zero or go
         negative, and an unfloored min() then collapses the playfield */
      /* the reserve dropped from 300px to 215px when the six-box panel and the
         four-word button row were replaced by a status bar and an icon dock —
         that reclaimed space goes to the board */
      width: max(140px, min(calc((100svh - 215px) / 2), calc(100vw - 26px), 340px));
      height: auto;
      aspect-ratio: 1 / 2;
    }
    #panel {
      width: min(calc(100vw - 24px), 346px);
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      padding-top: 0;
    }
    #panel .box { min-width: 0; overflow: hidden; }
    #panel > .box:last-child { grid-column: span 2; }
    #previewRow {
      grid-column: span 2;
      gap: 6px;
      min-width: 0;
    }
    #previewRow canvas { width: 44px; height: 44px; }
    .box { padding: 5px 6px; }
    .box .label { font-size: 9px; margin-bottom: 3px; }
    .stat { font-size: 13px; line-height: 1.15; }
    .stat .small { font-size: 9px; letter-spacing: 1px; }
    .box.hero { grid-column: span 2; padding: 6px 8px; }
    .box.hero #score { font-size: 22px; }
  }
  /* The landscape layout used to live here and styled #panel / .box — the
     six-box side panel deleted in the HUD restructure. It is now a real
     three-column grid at the END of this stylesheet; see the note there for
     why the position matters. */
  /* ---------- reference layout: status bar / progress / board / dock ----------
     The old panel stacked six boxes beside the board and a four-word button
     row underneath, which ate vertical space and pushed the board small. This
     puts status above the board, controls below it, and lets the board own the
     middle. */
  #stage { width: min(420px, 100vw); }
  #topbar {
    display: flex; align-items: center; gap: 8px; width: 100%;
    margin-bottom: 6px;
  }
  #scoreWrap {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
    background: #fdfdf6; border: 3px solid #2b2b2b; box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
    padding: 5px 12px; font-size: 21px; letter-spacing: 1px;
  }
  #scoreWrap .crown { color: #e8a33a; font-size: 17px; }
  #clearsWrap {
    display: flex; align-items: center; gap: 6px;
    background: #fdfdf6; border: 3px solid #2b2b2b; box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
    padding: 5px 10px; font-size: 15px;
  }
  #clearsWrap .cbadge { color: #5aa9e6; }
  .ibtn {
    flex: 0 0 auto; width: 40px; height: 40px; padding: 0; cursor: pointer;
    background: #fdfdf6; border: 3px solid #2b2b2b; box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
    display: inline-flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .ibtn:hover { background: #fff; }
  .ibtn:active { transform: translate(2px, 2px); box-shadow: none; }
  .ico { width: 21px; height: 21px; fill: #2b2b2b; stroke: none; }
  #tMute .ico path#wave1, #tMute .ico path#wave2 {
    fill: none; stroke: #2b2b2b; stroke-width: 2; stroke-linecap: round;
  }
  .ibtn.muted .ico path#wave1, .ibtn.muted .ico path#wave2 { display: none; }
  .ibtn.muted .ico path:first-child { fill: #9a9a9a; }

  #progBar { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 8px; }
  .lvTag {
    font-size: 11px; letter-spacing: 1px; color: #fdfdf6; white-space: nowrap;
    background: #2b2b2b; padding: 4px 7px;
  }
  #progTrack {
    position: relative; flex: 1; height: 20px; background: #2b2b2b;
    border: 3px solid #2b2b2b; overflow: hidden;
  }
  #progFill {
    position: absolute; inset: 0 auto 0 0; width: 0%;
    background: linear-gradient(90deg, #6f8fe0, #8aa6ef);
    transition: width 0.25s linear;
  }
  #progLabel {
    position: relative; display: block; text-align: center; line-height: 20px;
    font-size: 11px; letter-spacing: 1px; color: #fdfdf6;
  }

  #dock { display: flex; align-items: stretch; gap: 8px; width: 100%; margin-top: 8px; }
  .slot {
    background: #fdfdf6; border: 3px solid #2b2b2b; box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
    padding: 5px 7px 6px; text-align: center; font-family: inherit;
  }
  .slot .label { font-size: 9px; letter-spacing: 2px; color: #6b6b6b; margin-bottom: 3px; }
  .slot canvas { display: block; width: 44px; height: 44px; image-rendering: pixelated; background: #0a0a0a; }
  .slotBtn { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .slotBtn:hover { background: #fff; }
  .slotBtn:active { transform: translate(2px, 2px); box-shadow: none; }
  .slot .swap { color: #5aa9e6; }
  #ctrlCol { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

  /* ---------- landscape: three columns ----------
     Any landscape viewport, not only short ones. The previous block was gated
     on `max-height: 620px` AND styled a panel that no longer exists, so a 16:9
     canvas fell through to the desktop column layout: every piece of chrome
     stacked vertically and the board letterboxed to a sliver between two dead
     margins. Height is the scarce axis in landscape, so the chrome moves into
     that margin and the board is sized off height.

     THIS BLOCK MUST STAY LAST. `#stage { width: min(420px, 100vw) }` above is
     the same specificity (one id), and at equal specificity the later rule
     wins — move this earlier and the stage snaps back to 420px wide, which is
     most of the bug being fixed here.

     Grid, not flex-plus-wrappers, so the markup is untouched and portrait
     cannot regress: the grid only exists inside this query. */
  @media (orientation: landscape) {
    body { justify-content: center; padding: 6px 0; gap: 0; }
    #stage {
      /* Fixed-size design, zoomed to fit by fitStage(). It used to size the
         board in svh and cap it at 900px, which meant that on a big screen the
         board stopped growing while the HUD text stayed at its authored 11-21px
         — the YouTube certification note "the text is small and hard to read,
         and the game is not full-screen in full-screen mode". Zoom scales the
         text with the board, so NOTHING in this block may use viewport units:
         they would feed back through zoom and oscillate on every resize. */
      --boardH: 760px;
      display: grid;
      width: auto;
      /* The side columns used to cap at 232/168px, which left the HUD and the
         dock as small islands in a sea of empty desk on any wide screen. The
         board is height-bound, so widening these costs nothing until the stage
         gets wider than the viewport — at 2560x1089 the stage is ~1160 design
         px against 1841 available at the height-bound zoom. */
      grid-template-columns: minmax(200px, var(--sideL, 232px)) auto
                             minmax(190px, var(--sideR, 168px));
      grid-template-rows: auto auto 1fr;
      grid-template-areas:
        "hud   board dock"
        "prog  board dock"
        "leg   board dock";
      align-items: start;
      column-gap: 34px;
      row-gap: 8px;
    }

    /* left column — readouts, stacked. Sized up with the column: at the
       height-bound zoom these are the only things a player reads besides the
       board, and at 21/15/11px they were unreadable across a large screen. */
    #topbar {
      grid-area: hud;
      flex-direction: column; align-items: stretch; gap: 9px; margin-bottom: 0;
    }
    #scoreWrap { flex: 0 0 auto; font-size: 30px; padding: 9px 16px; }
    #scoreWrap .crown { font-size: 24px; }
    #clearsWrap { justify-content: center; font-size: 23px; padding: 8px 14px; }
    #gearBtn { width: 52px; height: 52px; }
    #gearBtn .ico { width: 28px; height: 28px; }
    #progBar { grid-area: prog; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
    #progBar .lvTag { font-size: 15px; padding: 6px 10px; }
    #progBar #progTrack { height: 26px; }
    #progBar #progLabel { line-height: 26px; font-size: 14px; }
    /* LV and the clock share a line, the track drops to its own full-width row
       — a 3-across row does not survive a 148px column */
    #progBar .lvTag { flex: 0 0 auto; }
    #progBar #progTrack { flex: 1 0 100%; order: 2; }

    /* the keyboard legend soaks up the column's leftover height. Its default
       max-width is 544px, which would blow the column open. */
    #legend, #legendTouch { grid-area: leg; align-self: start; }
    #legend {
      max-width: 100%; font-size: 15px; padding: 9px 13px;
      justify-content: flex-start; row-gap: 6px; line-height: 1.55;
    }
    #legend .li:not(:last-child)::after { margin: 0 5px; }
    #legendTouch { max-width: 100%; }

    /* centre — the board owns the height */
    #wrap { grid-area: board; align-self: center; justify-self: center; gap: 0; }
    #frame { padding: 6px; }
    #game {
      /* design height, not a viewport measurement — see the #stage note */
      height: var(--boardH);
      width: auto;
      aspect-ratio: 1 / 2;
    }

    /* right column — NEXT above the controls */
    #dock {
      grid-area: dock; align-self: center;
      flex-direction: column; align-items: center; justify-content: center;
      width: auto; margin-top: 0; gap: 16px;
    }
    #dock .slot { padding: 9px 14px 11px; }
    #dock .slot .label { font-size: 13px; margin-bottom: 6px; }
    #dock .slot canvas { width: 84px; height: 84px; }
    #ctrlCol { flex: 0 0 auto; flex-wrap: wrap; justify-content: center; gap: 12px; }
    #ctrlCol .ibtn { width: 58px; height: 58px; }
    #ctrlCol .ibtn .ico { width: 31px; height: 31px; }
  }

/* --- Bioprepsolutions Games site chrome (added by build-site.mjs) --- */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px 0;
}
.hub-back {
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  font-size: 14px;
  color: #1a1a1a;
  text-decoration: none;
  background: #fdfdf6;
  border: 3px solid #2b2b2b;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
  padding: 6px 12px;
}
.hub-back:hover { background: #ffe9b3; }
.wordmark {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 22px;
  letter-spacing: 6px;
  color: #1a1a1a;
  text-shadow: 2px 2px 0 rgba(255,255,255,0.5);
}
@media (max-width: 620px) {
  .topbar { padding-top: 2px; gap: 10px; }
  .wordmark { font-size: 17px; letter-spacing: 4px; }
  /* the topbar costs ~44px of height: shrink the field budget to match */
  #game { width: min(calc((100svh - 344px) / 2), calc(100vw - 64px), 320px); }
}

/* Shared site utility; never position it over the playfield. */
[data-feedback-mount]{display:inline-flex;flex:none;pointer-events:auto}
.topbar [data-feedback-mount]{margin-left:auto}.topbar{flex-wrap:wrap}.topbar [data-feedback-mount],.topbar .hub-back{position:relative;z-index:110}