/*
 * Scene fit: the CSS half of public/scene-fit-dom.js (plan
 * docs/plans/2026-10-09-scene-fit-port.md, section 5). Every rule is scoped to
 * #game-screen.dinosaur-scene-active.scene-fit, so the file is inert until the
 * module applies a layout: with no scene, or a size the fit cannot serve, the game
 * renders exactly as before. Positions come from the --sf-* custom properties the
 * module writes on #game-screen. No node moves and no rule here is important.
 * Static paint only: filter, backdrop-filter, animation and mask appear below only
 * as none, and this file declares no transition. The one transition left running is
 * the game's own hover and press feedback on .powerup-btn (game.html declares it
 * important, so no rule here could switch it off, and it moves no layout).
 *
 * The game's own nodes are the plates. The strip is .score-bar (its third row is
 * left empty for .target-progress, which is laid over it); the dock is
 * .powerup-bar over .bottom-bar, 5px apart (DOCK_GAP in the module, or the scene's
 * --sf-dock-air); the lane is
 * #status-pill-row and #free-chest-row. Plates are ink #0A0A1A: top bar .55,
 * chips .60, strip .62 (--sf-plate-strip, set per scene only where the text on it needs more), dock .58; the board plate is the scene's own alpha as a
 * vertical ramp (--sf-plate-top to --sf-plate-bottom).
 */

/* ---- Cell size and plate tokens ---------------------------------------------
   Stock declares --cell-size and --gap on :root, so declaring them here wins by
   inheritance. dinosaur-art.css declares each plate token with today's value. */
#game-screen.dinosaur-scene-active.scene-fit {
  --cell-size: var(--sf-cell);
  --gap: var(--sf-gap);
  --scene-plate-grid-top: var(--sf-plate-top);
  --scene-plate-grid-bottom: var(--sf-plate-bottom);
  --scene-plate-badge: rgba(10, 10, 26, 0.35);
  --scene-plate-topbar-top: rgba(10, 10, 26, 0.55);
  --scene-plate-topbar-bottom: rgba(10, 10, 26, 0.55);
  --scene-plate-hud-item: rgba(10, 10, 26, 0.6);
  --scene-plate-chip: transparent;
  --scene-plate-powerups: rgba(10, 10, 26, 0.58);
}

/* ---- The painting, as painted ------------------------------------------------
   The fill (behind the scene layer) and the seam (over its edges) are the
   module's paint plan: static gradients and tiny ramp images, drawn once. */
#game-screen.dinosaur-scene-active.scene-fit::before,
#game-screen.dinosaur-scene-active.scene-fit::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#game-screen.dinosaur-scene-active.scene-fit::before {
  z-index: -2;
  background: var(--sf-fill);
}
#game-screen.dinosaur-scene-active.scene-fit::after {
  z-index: -1;
  background: var(--sf-seam);
}
#game-screen.dinosaur-scene-active.scene-fit #dinosaur-scene-layer {
  background-size: var(--sf-art-w) var(--sf-art-h);
  background-position: var(--sf-art-left) var(--sf-art-top);
  background-repeat: no-repeat;
}

/* ---- The board, in the bowl ---------------------------------------------------
   The wrapper's 4px padding sits outside the board rect. The border is pinned at
   2px (the geometry counts it); the danger rules colour it. The ring replaces the
   stock glow and the game's square border-image. */
#game-screen.dinosaur-scene-active.scene-fit .grid-wrapper {
  position: absolute;
  z-index: 2;
  left: calc(var(--sf-board-left) - 4px);
  top: calc(var(--sf-board-top) - 4px);
  margin: 0;
  padding: 4px;
}
#game-screen.dinosaur-scene-active.scene-fit #game-grid {
  border-width: 2px;
  border-radius: 14px 14px 22px 22px;
  border-image: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.26);
}
#game-screen.dinosaur-scene-active.scene-fit #game-grid::before {
  border-radius: inherit;
}
#game-screen.dinosaur-scene-active.scene-fit #game-grid::after {
  border-radius: inherit;
  box-shadow: none;
}
/* The numbers row starts at the board's bottom edge (its 3px gap is padding, so the
   box is the 17px the geometry counts) and lines up with the cells. */
#game-screen.dinosaur-scene-active.scene-fit .grid-col-numbers {
  margin-top: 0;
  padding: 3px calc(var(--gap) + 2px) 0;
}

/* ---- Danger chip: an absolute 18px chip centred on the dock's top edge, so it
   never shifts the layout. The geometry keeps 11px above the dock for its upper half. */
#game-screen.dinosaur-scene-active.scene-fit #grid-danger-text {
  position: absolute;
  z-index: 7;
  left: calc(var(--sf-dock-left) + var(--sf-dock-w) / 2);
  top: var(--sf-dock-top);
  transform: translate(-50%, -50%);
  padding: 2px 12px;
  border-radius: 9px;
  font-size: 11.5px;
  line-height: 14px;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(10, 10, 26, 0.6);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.45);
}

/* ---- The strip: one slim plate at the chin ------------------------------------ */
#game-screen.dinosaur-scene-active.scene-fit .score-bar {
  position: absolute;
  z-index: 6;
  left: var(--sf-strip-left);
  top: var(--sf-strip-top);
  width: var(--sf-strip-w);
  max-width: none;
  margin: 0;
  padding: 3px 10px 2px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Rows: the badge, the target, then the empty row for .target-progress: 3 + 20 + 1 + 14
     + 1 + 6 + 2 = 47px. A level with a quest adds its row (1 + 14, 62px). The quest is set
     once at the level start, so the strip never changes height mid-level. */
  grid-template-rows: 20px 14px 6px;
  grid-auto-rows: 14px;
  grid-template-areas:
    'badge'
    'target'
    'bar';
  row-gap: 1px;
  align-items: center;
  text-align: center;
  border-radius: 14px;
  background: var(--sf-plate-strip, rgba(10, 10, 26, 0.62));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: #f4f1ff;
  animation: none;
}
#game-screen.dinosaur-scene-active.scene-fit .score-bar .level-info {
  grid-area: badge;
  margin: 0;
  min-width: 0;
  justify-content: center;
}
#game-screen.dinosaur-scene-active.scene-fit .score-bar .level-badge {
  max-width: 100%;
  min-width: 0;
  padding: 1px 10px 1px 5px;
  font-size: 12.5px;
  line-height: 16px;
  white-space: nowrap;
  box-shadow: none;
}
#game-screen.dinosaur-scene-active.scene-fit .score-bar .level-badge > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The score: its own chip at the top right of the painting, 6px under the top bar (art top
   is sat + 48 and the bar ends at sat + 58, sat + 62 below 360px wide), and
   out of the strip, so the strip keeps to the level, the target and the quest. Absolute,
   so the strip's measured height leaves it out. The rails keep it in the strip (below). */
#game-screen.dinosaur-scene-active.scene-fit .score-bar .score-chip {
  position: absolute;
  top: calc(var(--sf-art-top) - var(--sf-strip-top) + 16px);
  right: 0;
  align-items: baseline;
  gap: 6px;
  padding: 2px 10px;
  border: 0;
  border-radius: 12px;
  background: var(--scene-plate-hud-item);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}
#game-screen.dinosaur-scene-active.scene-fit .score-bar .score-caption {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#game-screen.dinosaur-scene-active.scene-fit .score-bar .score-value {
  font-size: 22px;
  line-height: 20px;
  letter-spacing: 0.5px;
}
#game-screen.dinosaur-scene-active.scene-fit .score-bar #level-target {
  grid-area: target;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-size: 12.5px;
  line-height: 14px;
  white-space: nowrap;
}
/* The quest: a fourth row under the bar, centred, one line with an ellipsis, only when present. */
#game-screen.dinosaur-scene-active.scene-fit .score-bar #quest-line {
  grid-row: 4;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: none;
  font-size: 11.5px;
  line-height: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The event pill (2x Gold, 2x Score, a chest) runs down the board's left side, from the
   top row (game.html pins it to the board wrapper, vertical). The module places it
   (--sf-event-left): in the margin where there is room, else over the first column. */
#game-screen.dinosaur-scene-active.scene-fit #event-pill {
  left: var(--sf-event-left);
  width: 20px;
  padding: 10px 0;
  border-radius: 10px;
  font-size: 10.5px;
  line-height: 20px;
  letter-spacing: 0.4px;
}
/* Progress: laid over the strip's empty third row (3 + 20 + 1 + 14 + 1 = 39px down). */
#game-screen.dinosaur-scene-active.scene-fit .target-progress {
  position: absolute;
  z-index: 7;
  left: calc(var(--sf-strip-left) + 16px);
  top: calc(var(--sf-strip-top) + 39px);
  width: calc(var(--sf-strip-w) - 32px);
  height: 6px;
  max-width: none;
  margin: 0;
  padding: 0;
}
#game-screen.dinosaur-scene-active.scene-fit .target-progress-bar {
  height: 6px;
}

/* ---- Persistent pills ---------------------------------------------------------
   One 26px lane under the strip. The module reserves it per level (it adds
   .scene-fit-lane), so a pill never moves the board. Where no lane is reserved
   (no .scene-fit-lane) a pill that shows mid-level is drawn just above the strip,
   over the painting's ledge, and moves nothing. The DOM layer publishes that band
   in --sf-lane-top and --sf-lane-h (strip top minus the room, and the room): 26px
   where the ledge allows, less on a small phone whose ledge is tighter (plan
   amendment 19), and the capsule shrinks to the band so it never covers the face.
   Rows have no height of their own:
   a pill is a 24px capsule with 1px above and below, so a row with a pill is exactly
   the 26px lane and an empty row is 0px tall. A long pill (the Tide current) wraps to
   two lines in its capsule rather than scrolling or growing. */
#game-screen.dinosaur-scene-active.scene-fit #status-pill-row,
#game-screen.dinosaur-scene-active.scene-fit #free-chest-row {
  position: absolute;
  z-index: 7;
  left: var(--sf-strip-left);
  top: var(--sf-lane-top);
  width: var(--sf-strip-w);
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0 6px;
  pointer-events: none;
}
/* In a column the row hangs from the bottom of its band, which is the top of the strip
   when no lane is reserved. A capsule taller than the room (the 20px floor below, or
   the 24px free-chest button) then grows upward over the painting's ledge and never
   down over the score strip. With a reserved lane the band is exactly the 26px a pill
   needs, so this lands where the top anchor does. */
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-column #status-pill-row,
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-column #free-chest-row {
  top: auto;
  bottom: calc(100% - var(--sf-lane-top) - var(--sf-lane-h));
}
#game-screen.dinosaur-scene-active.scene-fit #free-chest-row {
  justify-content: flex-end;
}
/* The status pills and the free-chest pill share the lane: the pills give way. The
   :has() rule needs Safari 15.4. Where :has() is unknown (or @supports selector() is),
   the pills always leave the chest's corner free, which only costs them width. */
#game-screen.dinosaur-scene-active.scene-fit #status-pill-row {
  padding-right: 168px;
}
@supports selector(:has(*)) {
  #game-screen.dinosaur-scene-active.scene-fit #status-pill-row {
    padding-right: 6px;
  }
  #game-screen.dinosaur-scene-active.scene-fit:has(#free-chest-pill.active) #status-pill-row {
    padding-right: 168px;
  }
}
#game-screen.dinosaur-scene-active.scene-fit #status-pill-row > *,
#game-screen.dinosaur-scene-active.scene-fit #free-chest-pill {
  height: max(20px, min(24px, calc(var(--sf-lane-h) - 2px)));
  min-height: 0;
  max-width: 100%;
  margin: 1px 0;
  padding: 0 10px;
  overflow: hidden;
  pointer-events: auto;
  font-size: 10.5px;
  line-height: 10px;
  letter-spacing: 0.2px;
  white-space: normal;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}
#game-screen.dinosaur-scene-active.scene-fit #status-pill-row > * {
  background: rgba(10, 10, 26, 0.6);
}
/* The Tide current in the lane (every scene without currentBelow): the lane's full width on
   one line (an ellipsis only on the narrowest phones; the aria-label keeps the sentence). */
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-column.campaign-currents #current-pill {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: max(20px, min(24px, calc(var(--sf-lane-h) - 2px)));
}
/* A currentBelow scene: under the board, above the power-ups, in the gap the module keeps
   for it (CURRENT_GAP) for the whole level. It hangs from the lane row, so its top is
   offset from the row's bottom edge (the lane band's bottom) to --sf-current-top. */
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-column.scene-fit-current-below #status-pill-row {
  overflow: visible;
}
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-column.scene-fit-current-below.campaign-currents #current-pill {
  position: absolute;
  left: 50%;
  top: calc(100% + var(--sf-current-top) - var(--sf-lane-top) - var(--sf-lane-h));
  transform: translateX(-50%);
  flex: none;
  width: max-content;
  max-width: calc(100% - 4px);
  height: 20px;
  margin: 0;
  line-height: 20px;
}
/* The free-chest pill is a button: it keeps the 24px target (WCAG 2.5.8) however tight the ledge. */
#game-screen.dinosaur-scene-active.scene-fit #free-chest-pill {
  height: 24px;
}
/* The rail has its own 26px band whether or not a lane is reserved (--sf-lane-h is 0 then). */
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails #status-pill-row > *,
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails #free-chest-pill {
  height: 24px;
}

/* ---- The dock: power-ups over the bottom row, two plates ------------------------
   The power-up plate is pinned at 52px (3 + 44 + 3 plus a 1px border each side), so
   the bottom plate sits 57px below the dock top (52px plus the scene's --sf-dock-air, 5px
   unless the scene sets it) and both hang from one anchor. */
#game-screen.dinosaur-scene-active.scene-fit .powerup-bar {
  position: absolute;
  z-index: 6;
  left: var(--sf-dock-left);
  top: var(--sf-dock-top);
  width: var(--sf-dock-w);
  height: 52px;
  max-width: none;
  margin: 0;
  gap: 6px;
  border-color: transparent;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* Compact buttons: the icon on the left across both rows, the label over the price
   on the right (MEGA sits beside the price). Same nodes, same order, 44px tall. */
#game-screen.dinosaur-scene-active.scene-fit .powerup-btn {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  justify-content: start;
  align-content: center;
  align-items: center;
  column-gap: 4px;
  row-gap: 0;
  flex: 0 0 auto;
  min-width: 62px;
  min-height: 44px;
  padding: 3px 8px 3px 6px;
  font-size: 11px;
  line-height: 14px;
  border-radius: 14px;
}
#game-screen.dinosaur-scene-active.scene-fit .powerup-btn.pu-mega {
  grid-template-columns: auto auto auto;
}
#game-screen.dinosaur-scene-active.scene-fit .powerup-btn > span:not(.pu-afford-dot) {
  white-space: nowrap;
}
#game-screen.dinosaur-scene-active.scene-fit .powerup-btn .pu-icon {
  grid-row: 1 / 3;
  grid-column: 1;
  margin: 0;
  font-size: 16px;
  line-height: 20px;
}
#game-screen.dinosaur-scene-active.scene-fit .powerup-btn > span:nth-child(2) {
  grid-row: 1;
  grid-column: 2 / -1;
  justify-self: start;
}
#game-screen.dinosaur-scene-active.scene-fit .powerup-btn .cost {
  grid-row: 2;
  grid-column: 2 / -1;
  justify-self: start;
  font-size: 11px;
  line-height: 14px;
}
#game-screen.dinosaur-scene-active.scene-fit .powerup-btn .pu-mega-badge {
  padding: 0 4px;
  line-height: 12px;
}
#game-screen.dinosaur-scene-active.scene-fit .powerup-btn.pu-mega .pu-mega-badge {
  grid-row: 2;
  grid-column: 2;
  margin: 0;
  justify-self: start;
}
#game-screen.dinosaur-scene-active.scene-fit .powerup-btn.pu-mega .cost {
  grid-column: 3;
}
/* One row that never wraps (a wrapped row made the dock's height depend on the move
   count): Next and the timer keep their size, the moves text takes the flexible middle. */
#game-screen.dinosaur-scene-active.scene-fit .bottom-bar {
  position: absolute;
  z-index: 6;
  left: var(--sf-dock-left);
  top: calc(var(--sf-dock-top) + 52px + var(--sf-dock-air, 5px));
  width: var(--sf-dock-w);
  max-width: none;
  margin: 0;
  padding: 3px 10px 3px 8px;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 6px;
  border: 0;
  border-radius: 20px;
  background: var(--scene-plate-powerups);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
#game-screen.dinosaur-scene-active.scene-fit .bottom-bar::before {
  content: none;
}
#game-screen.dinosaur-scene-active.scene-fit .bottom-bar > * {
  flex: 0 0 auto;
}
#game-screen.dinosaur-scene-active.scene-fit .bottom-bar > .drop-counter {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: clamp(11.5px, 3.4vw, 13px);
  font-weight: 700;
}
#game-screen.dinosaur-scene-active.scene-fit .bottom-bar .speed-timer {
  min-width: 0;
  font-size: clamp(11.5px, 3.4vw, 13px);
  font-weight: 700;
  white-space: nowrap;
}
/* The intro note (intros.js adds it after the power-up bar for 6 seconds) is an
   overlay above the dock, so it never changes a measured height. */
#game-screen.dinosaur-scene-active.scene-fit .intro-inline-note {
  position: absolute;
  z-index: 8;
  left: var(--sf-dock-left);
  bottom: calc(100% - var(--sf-dock-top) + 12px);
  width: var(--sf-dock-w);
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(10, 10, 26, 0.78);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

/* ---- Quick-access tab ----------------------------------------------------------
   The game's own mid-height position and size. Only when that position would reach
   into the strip (short phones) does the module move it down to the first clear spot. */
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-tab-moved .quick-drawer-tab {
  top: var(--sf-tab-top);
  transform: none;
}

/* ---- Quick-access drawer: closed means off screen ------------------------------
   The closed drawer is width: min(78vw, 300px) shifted by translateX(100%), so its left
   edge sits exactly on the right screen edge. Where 78vw is not a whole number of
   pixels (a 360px phone: 280.8px) float rounding leaves the edge a hair inside the
   screen, and Chromium paints one device-pixel column of the drawer's dark background
   on top of the scene there (measured 2026-10-10: Chromium only, 320 to 361 wide, the
   stock game too). Two more pixels out keeps it outside. Moves nothing visible: the
   drawer is aria-hidden and inert until it opens. */
#game-screen.dinosaur-scene-active.scene-fit .quick-drawer:not(.open) {
  transform: translateX(calc(100% + 2px));
}

/* ---- Wide windows: rails ---------------------------------------------------------
   The painting stands in the middle; the top bar and strip go in a left rail, the dock
   in a right rail, each --sf-rail-w wide. On windows taller than 900px the plates are
   drawn larger (--hs, at most 1.25): each is laid out at its rail width divided by the
   scale and scaled from the corner on its rail's edge, so the drawn box is exactly
   the rail box. A static transform: no filter, no animation, no transition. */
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails {
  --hs: var(--sf-hud-scale, 1);
  --radius: calc(var(--sf-cell) * 0.19);
}

/* Left rail, top: the top bar as a 2 x 2 plate (lives and gold, then sound and menu)
   with the item sizes of the game's own narrow-screen rule. */
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails .top-bar {
  position: absolute;
  z-index: 6;
  left: var(--sf-rail-l-x);
  top: var(--sf-rail-top);
  width: calc(var(--sf-rail-w) / var(--hs));
  max-width: none;
  margin: 0;
  padding: 5px 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  gap: 4px 6px;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform: scale(var(--hs));
  transform-origin: 0 0;
}
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails .top-bar .hud-item {
  padding: 4px 8px;
  gap: 2px;
}
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails .top-bar .heart {
  font-size: 0.8rem;
}
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails .top-bar .mute-btn {
  min-width: 40px;
  min-height: 40px;
  padding: 4px;
}

/* Left rail, below it: the strip. Badge, score and target get rows of their own, then
   the bar row (the progress is laid over it), then the quest row when the level has one. */
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails .score-bar {
  width: calc(var(--sf-strip-w) / var(--hs));
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 20px 22px 15px 6px;
  grid-auto-rows: 15px;
  grid-template-areas:
    'badge'
    'score'
    'target'
    'bar';
  column-gap: 6px;
  row-gap: 2px;
  padding: 4px 9px 5px 6px;
  transform: scale(var(--hs));
  transform-origin: 0 0;
}
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails .score-bar .level-badge {
  font-size: 11px;
  padding: 1px 7px 1px 4px;
}
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails .score-bar .score-chip {
  position: static;
  grid-area: score;
  justify-self: center;
  padding: 0;
  background: none;
  box-shadow: none;
}
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails .score-bar #quest-line {
  grid-row: 5;
}
/* Progress: over the strip's empty bar row (4 + 20 + 2 + 22 + 2 + 15 + 2 = 67px down). */
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails .target-progress {
  left: calc(var(--sf-strip-left) + 12px * var(--hs));
  top: calc(var(--sf-strip-top) + 67px * var(--hs));
  width: calc((var(--sf-strip-w) - 24px * var(--hs)) / var(--hs));
  transform: scale(var(--hs));
  transform-origin: 0 0;
}

/* Pills: the lane under the strip in the left rail (the same 26px band, also where no
   lane is reserved: nothing else is in the rail). When the free-chest pill shows too,
   the status pills sit below it. */
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails #status-pill-row,
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails #free-chest-row {
  left: var(--sf-strip-left);
  top: var(--sf-lane-top);
  width: calc(var(--sf-strip-w) / var(--hs));
  padding: 0;
  justify-content: flex-start;
  transform: scale(var(--hs));
  transform-origin: 0 0;
}
/* The stacking below needs :has() (Safari 15.4). Without it the status row always sits
   below the chest's band, so the two can never overlap (it only costs 28px of rail when
   no chest shows); with it, the row moves down only while the chest pill is active. */
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails #status-pill-row {
  top: calc(var(--sf-lane-top) + 28px * var(--hs));
}
@supports selector(:has(*)) {
  #game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails #status-pill-row {
    top: var(--sf-lane-top);
  }
  #game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails:has(#free-chest-pill.active) #status-pill-row {
    top: calc(var(--sf-lane-top) + 28px * var(--hs));
    padding-right: 0;
  }
}

/* Right rail: the dock at the bottom of the rail. The power-up bar's rows wrap so the
   whole set shows where the rail is wide enough; a narrower or shorter rail scrolls
   it vertically (its height leaves room for the bottom plate at its tallest, 100px:
   three rows). The bottom plate is anchored at the rail's bottom edge and the
   power-up plate hangs from the dock top, each scaled from its own outer corner. */
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails .powerup-bar {
  width: calc(var(--sf-dock-w) / var(--hs));
  height: auto;
  max-height: calc((var(--sf-rail-h) - 11px) / var(--hs) - 105px);
  flex-wrap: wrap;
  overflow-x: hidden;
  overflow-y: auto;
  justify-content: flex-start;
  row-gap: 4px;
  border-radius: 20px;
  transform: scale(var(--hs));
  transform-origin: 0 0;
}
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails .powerup-btn {
  flex: 1 1 auto;
  min-height: 40px;
  padding-top: 2px;
  padding-bottom: 2px;
}
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails .bottom-bar {
  top: auto;
  bottom: calc(100% - var(--sf-rail-top) - var(--sf-rail-h));
  width: calc(var(--sf-dock-w) / var(--hs));
  flex-wrap: wrap;
  row-gap: 3px;
  align-items: center;
  transform: scale(var(--hs));
  transform-origin: 0 100%;
}
/* Next and the timer share the first row when they fit; on a narrow rail the timer
   wraps under Next. The moves text always has a row of its own. */
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails .bottom-bar > .speed-timer {
  order: 1;
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 64px;
  white-space: nowrap;
}
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails .bottom-bar > .drop-counter {
  order: 2;
  flex: 1 1 100%;
}
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails .bottom-bar > .autoplay-indicator {
  order: 3;
}

/* Tiles in rails: text and corner radius follow the cell. The game sizes tile text
   from the screen width, and its 768px tablet rule also matches a window much wider
   than tall, so a big board's numbers need their own caps (1.35rem for one and two
   digits, the game's own tablet cap). Colours and shadows untouched. */
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails #game-grid .block {
  font-size: clamp(0.6rem, calc(var(--sf-cell) * 0.5), 1.35rem);
}
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails #game-grid .block.tile-digits-3 {
  font-size: clamp(0.5rem, calc(var(--sf-cell) * 0.42), 1.1rem);
}
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails #game-grid .block.tile-digits-4a {
  font-size: clamp(0.45rem, calc(var(--sf-cell) * 0.37), 1rem);
}
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails #game-grid .block.tile-digits-4b {
  font-size: clamp(0.45rem, calc(var(--sf-cell) * 0.35), 0.95rem);
}
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails #game-grid .block.tile-digits-5 {
  font-size: clamp(0.4rem, calc(var(--sf-cell) * 0.3), 0.85rem);
}
#game-screen.dinosaur-scene-active.scene-fit.scene-fit-rails #game-grid .block.tile-digits-6 {
  font-size: clamp(0.35rem, calc(var(--sf-cell) * 0.26), 0.75rem);
}