/* Page chrome for the /hex3d prototype: the same full-width layout Jihanki
   uses (see the matching block in jihanki.css). This file ships on every page,
   so every rule is gated on the board being present (body:has(.h3-scene)).
   These target the shared layout's elements, which the component's scoped
   .razor.css can't reach. */

/* Lift the 600px cap so the 3D stage gets the whole content column. */
.puzzle-container:has(> .h3-scene) {
  max-width: none;
  width: 100%;
}

/* Rails overlay the page edges instead of splitting the row, so the content
   column is full width; .h3-bounds then gives back a rail's width each side. */
body:has(.h3-scene) .page-with-ads-layout { display: block; position: relative; }
body:has(.h3-scene) .left-rail,
body:has(.h3-scene) .right-rail { position: absolute; top: 0; z-index: 10; }
body:has(.h3-scene) .left-rail { left: 0; }
body:has(.h3-scene) .right-rail { right: 0; }
body:has(.h3-scene) .main-content-wrapper { width: 100%; max-width: none; }

.h3-scene { --h3-rail: 0px; }
@media (min-width: 1246px) {           /* where .desktop-only stops hiding the rails */
  .h3-scene { --h3-rail: 320px; }      /* 300px ad + a 20px gutter */
}
/* Paid members never see ads, so there's nothing to reserve. */
body.pm-premium .h3-scene { --h3-rail: 0px; }