/* ---------- game viewport-first layout ---------- */
  :root{--game-fit-width:min(820px, calc(104.5dvh - 225px))}

  /* Keep the playable surface as the visual priority on every game page. */
  .score-marquee{display:none!important}
  main{padding-top:10px!important}
  .stage{padding:12px 14px 16px!important}
  .stage-head{padding:0 2px 8px!important;gap:12px!important;align-items:center!important}
  .stage-head h1{margin:4px 0 4px!important;font-size:clamp(28px,2.55vw,42px)!important;line-height:1!important}
  .stage-head p{font-size:13px!important;line-height:1.4!important;max-width:72ch!important}
  .eyebrow{font-size:8px!important;line-height:1.35!important}
  .stage-head .btn{padding:8px 12px!important;font-size:11px!important;border-radius:9px!important}

  .hud{
    margin-bottom:9px!important;
    padding:8px 10px!important;
    gap:8px!important;
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(112px,1fr))!important;
    align-items:center!important;
  }
  .hud .stat,.hud .stat.spacer{min-width:0!important;margin-left:0!important;gap:2px!important}
  .hud .stat span{font-size:9px!important}
  .hud .stat strong{font-size:23px!important}
  .hud .stat strong.word{font-size:13px!important;padding-top:3px!important}
  .lives{min-height:18px!important}

  /* Remove the decorative cabinet crop. The canvas now owns the available viewport. */
  .screen-shell{width:100%!important;max-width:none!important;margin:0 auto!important}
  .cabinet{position:relative!important;width:100%!important;max-width:none!important;margin:0 auto!important;filter:none!important}
  .cab-art{display:none!important}
  .cab-screen{
    position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:100%!important;height:auto!important;display:block!important;
  }
  .cab-screen .board-wrap,.board-wrap{
    width:min(100%,var(--game-fit-width))!important;
    height:auto!important;
    aspect-ratio:auto!important;
    margin:0 auto!important;
  }
  .cab-screen canvas#board,canvas#board{
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
  }

  @media (min-width:721px){
    header.site-head{height:68px!important;min-height:68px!important}
    .brand img{height:48px!important}
    nav.main-nav{font-size:12px!important;gap:20px!important}
    .head-right .btn{padding:8px 12px!important;font-size:11px!important}
    .nav-toggle{width:38px!important;height:38px!important}
  }

  /* Wide screens put the game first; help / scores move below it instead of squeezing it. */
  @media (min-width:1121px){
    .page-shell{max-width:1540px!important}
    .layout{
      grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
      gap:16px 20px!important;
      align-items:start!important;
    }
    .stage{order:1!important;grid-column:1/-1!important}
    .legend-col{order:2!important;grid-column:1!important}
    .score-col{order:3!important;grid-column:2!important}
  }

  /* Browser zoom reduces CSS viewport dimensions, so these rules automatically shrink
     the play surface before it falls below the fold. */
  @media (max-height:850px){
    .stage-head p{display:none!important}
    .stage-head h1{font-size:clamp(25px,2.2vw,34px)!important}
    .stage-head{padding-bottom:6px!important}
    .hud{padding:6px 9px!important;margin-bottom:7px!important}
    .hud .stat strong{font-size:20px!important}
  }
  @media (max-width:720px){
    main{padding-top:4px!important}
    .stage-head p{display:none!important}
    .stage-head{padding-bottom:6px!important}
    .stage-head h1{font-size:clamp(23px,7.5vw,30px)!important}
    .hud{margin-bottom:7px!important}
  }


  /* ---------- restore desktop side panels ---------- */
  /* Keep the enlarged viewport-first game while restoring the original
     information columns on desktop. */
  @media (min-width:1121px){
    .page-shell{max-width:1880px!important}
    .layout{
      grid-template-columns:
        clamp(220px,15vw,270px)
        minmax(0,1fr)
        clamp(240px,17vw,300px)!important;
      gap:18px!important;
      align-items:start!important;
    }
    .legend-col{
      order:1!important;
      grid-column:auto!important;
    }
    .stage{
      order:2!important;
      grid-column:auto!important;
      min-width:0!important;
    }
    .score-col{
      order:3!important;
      grid-column:auto!important;
    }

    /* Keep side content useful but visually quieter than the playfield. */
    .legend-col,.score-col{gap:14px!important}
    .legend-col .card,.score-col .card{padding:14px!important;border-radius:16px!important}
    .legend-col .card h2,.score-col .card h2{font-size:12px!important}
    .legend-col .card .sub,.score-col .card .sub,
    .legend-col .tiny-note,.score-col .tiny-note,
    .legend-col .guide-copy span,.score-col .guide-copy span,
    .legend-col .rules,.score-col .rules{font-size:11.5px!important;line-height:1.48!important}
    .legend-col .guide-copy b,.score-col .guide-copy b{font-size:10px!important}
  }

  /* On narrower laptops, trim the side rails before allowing them to stack. */
  @media (min-width:1121px) and (max-width:1380px){
    .layout{
      grid-template-columns:210px minmax(0,1fr) 225px!important;
      gap:14px!important;
    }
    .legend-col .card,.score-col .card{padding:12px!important}
  }


  /* ---------- red gameplay outer frame ---------- */
  /* Tie the playfield into the red VROOM page chrome while keeping
     the existing blue/cyan arcade screen artwork intact inside. */
  .game-play-row .screen-shell{
    position:relative!important;
    padding:5px!important;
    border:1px solid rgba(255,72,72,.62)!important;
    border-radius:22px!important;
    background:linear-gradient(180deg,rgba(42,3,8,.30),rgba(11,1,4,.18))!important;
    box-shadow:
      0 0 0 1px rgba(255,86,86,.08) inset,
      inset 0 0 18px rgba(255,45,45,.08),
      0 0 22px rgba(255,42,42,.18),
      0 12px 30px rgba(0,0,0,.28)!important;
  }
  .game-play-row .screen-shell::before{
    content:"";
    position:absolute;
    inset:7px;
    z-index:4;
    pointer-events:none;
    border-radius:17px;
    background:
      linear-gradient(#ff4545,#ff4545) left top/62px 2px no-repeat,
      linear-gradient(#ff4545,#ff4545) left top/2px 48px no-repeat,
      linear-gradient(#ff4545,#ff4545) right top/62px 2px no-repeat,
      linear-gradient(#ff4545,#ff4545) right top/2px 48px no-repeat,
      linear-gradient(#ff4545,#ff4545) left bottom/62px 2px no-repeat,
      linear-gradient(#ff4545,#ff4545) left bottom/2px 48px no-repeat,
      linear-gradient(#ff4545,#ff4545) right bottom/62px 2px no-repeat,
      linear-gradient(#ff4545,#ff4545) right bottom/2px 48px no-repeat;
    filter:drop-shadow(0 0 5px rgba(255,47,47,.55));
    opacity:.74;
  }
  .game-play-row .screen-shell .board-wrap{
    border-color:rgba(255,255,255,.08)!important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.03) inset,
      inset 0 0 22px rgba(0,0,0,.74),
      0 10px 24px rgba(0,0,0,.22)!important;
  }
  @media(max-width:900px){
    .game-play-row .screen-shell{
      padding:3px!important;
      border-radius:18px!important;
      box-shadow:
        0 0 0 1px rgba(255,86,86,.07) inset,
        0 0 16px rgba(255,42,42,.15),
        0 9px 22px rgba(0,0,0,.25)!important;
    }
    .game-play-row .screen-shell::before{
      inset:5px;
      border-radius:14px;
      background:
        linear-gradient(#ff4545,#ff4545) left top/40px 2px no-repeat,
        linear-gradient(#ff4545,#ff4545) left top/2px 34px no-repeat,
        linear-gradient(#ff4545,#ff4545) right top/40px 2px no-repeat,
        linear-gradient(#ff4545,#ff4545) right top/2px 34px no-repeat,
        linear-gradient(#ff4545,#ff4545) left bottom/40px 2px no-repeat,
        linear-gradient(#ff4545,#ff4545) left bottom/2px 34px no-repeat,
        linear-gradient(#ff4545,#ff4545) right bottom/40px 2px no-repeat,
        linear-gradient(#ff4545,#ff4545) right bottom/2px 34px no-repeat;
    }
  }



/* Shared companion-game layout, based on the approved Breakout page. */
.game-topline{display:block!important}.game-topline .hud{width:100%!important;max-width:none!important}.goals{margin-bottom:9px!important}
.game-play-row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:14px;align-items:start;width:100%;min-width:0}
.game-play-row .screen-shell{min-width:0}
.game-play-row .board-wrap{box-sizing:border-box;display:block!important;padding:12px!important}
.game-play-row canvas#board{display:block;margin:0 auto;aspect-ratio:auto;touch-action:none}
.game-legend{min-width:0;padding:12px 10px;border:1px solid rgba(255,72,72,.52);border-radius:16px;background:linear-gradient(180deg,rgba(3,15,31,.96),rgba(2,8,20,.96));box-shadow:0 0 0 1px rgba(255,80,80,.07) inset,0 0 18px rgba(255,60,60,.12)}
.game-legend-header{padding:1px 4px 8px;border-bottom:1px solid rgba(255,86,86,.20);margin-bottom:6px}
.game-legend-header h2{margin:0 0 4px;font-family:var(--font-arcade);font-size:10px;line-height:1.35;text-transform:uppercase;letter-spacing:.07em}
.game-legend-header p{margin:0;color:#d8a3a3;font-size:9px;line-height:1.35}
.game-legend-body{max-height:var(--game-legend-body-height,min(520px,calc(100dvh - 290px)));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#86313d transparent}
.game-legend .card{padding:9px 3px!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.game-legend .card+.card{border-top:1px solid rgba(255,86,86,.20)!important}
.game-legend .card h2{font-family:var(--font-tech);font-size:10px!important;line-height:1.4;letter-spacing:.04em;color:#ffce76;margin:0 0 6px}
.game-legend .sub,.game-legend .rules,.game-legend .bots,.game-legend .legend,.game-legend .specials{font-size:10px!important;line-height:1.4!important;color:#c3d0e1}
.game-legend ul{margin:0;padding-left:14px}
.game-legend li{margin:0;padding-top:7px;padding-bottom:7px;border-bottom:1px solid rgba(255,86,86,.13);font-size:10px;line-height:1.4}
.game-legend li:last-child{border-bottom:0}
.game-legend li b,.game-legend li strong{color:#f5d58d;font-family:var(--font-tech);font-size:9px;line-height:1.35}
.game-legend #specialList,.game-legend #botList,.game-legend #dropList{padding:0;list-style:none}
.game-legend #specialList li,.game-legend #botList li,.game-legend #dropList li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:7px;align-items:center}
.game-legend li canvas,.game-legend li img{width:38px!important;height:38px!important;object-fit:contain;flex-shrink:0}
.game-legend li span{min-width:0;overflow-wrap:anywhere}
@media(max-width:1280px){.game-play-row{grid-template-columns:165px minmax(0,1fr);gap:10px}.game-legend{padding:10px 8px}}
@media(max-width:900px){.game-play-row{grid-template-columns:minmax(0,1fr)}.game-play-row .screen-shell{grid-row:1}.game-legend{grid-row:2}.game-legend-body{max-height:none;overflow:visible;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.game-legend .card+.card{border-top:0!important}.game-legend li,.game-legend .rules,.game-legend .sub{font-size:12px!important}.game-legend li b,.game-legend li strong{font-size:11px}.game-legend .card h2{font-size:12px!important}}
@media(max-width:480px){.game-legend-body{grid-template-columns:minmax(0,1fr);gap:4px}.game-legend .card+.card{border-top:1px solid rgba(255,86,86,.20)!important}}