/* /Styles/Puzzles/StandardPuzzle.css */

/* =========================
   Design tokens / theme (puzzle scope)
   ========================= */
:root {
  /* Puzzle stage scalar (set by LayoutScaler; default = 1) */
  --puzzle-stage-scale: 1;

  /* Grid geometry (base + scaled) */
  --tile-size-base: 64px;
  --tile-size: calc(var(--tile-size-base) * var(--puzzle-stage-scale));

  /* (moved bases live in Site.css :root) */
  --gap-column-base: var(--tile-gap-column-base); /* horizontal spacing between tiles */
  --gap-row-base: var(--tile-gap-row-base);       /* vertical spacing between tiles */
  --gap-column: calc(var(--gap-column-base) * var(--puzzle-stage-scale));
  --gap-row: calc(var(--gap-row-base) * var(--puzzle-stage-scale));

  /* Common deck metrics */
  --deck-width: 92.5%;

  /* Stage vertical spacing (title ↔ board ↔ lower deck) */
  --puzzle-stage-row-gap-base: 32px;
  --puzzle-stage-row-gap: calc(var(--puzzle-stage-row-gap-base) * var(--puzzle-stage-scale));

  /* Lower deck geometry */
  --lower-deck-column-gap-base: 16px;
  --lower-deck-column-gap: calc(var(--lower-deck-column-gap-base) * var(--puzzle-stage-scale));

  --stats-row-gap-base: 6.5px;
  --stats-row-gap: calc(var(--stats-row-gap-base) * var(--puzzle-stage-scale));

  --stat-icon-size-base: 21.5px;
  --stat-icon-size: calc(var(--stat-icon-size-base) * var(--puzzle-stage-scale));

  --stat-label-font-size-base: 22.5px;
  --stat-label-font-size: calc(var(--stat-label-font-size-base) * var(--puzzle-stage-scale));

  --actions-gap-base: 11.5px;
  --actions-gap: calc(var(--actions-gap-base) * var(--puzzle-stage-scale));

  /* Game title size (puzzle-only) */
  --game-title-font-size-base: 67.5px;
  --game-title-font-size: calc(var(--game-title-font-size-base) * var(--puzzle-stage-scale));

  /* Game button metrics (puzzle-only) */
  --game-button-height-base: 52px;
  --game-button-font-size-base: 20px;
  --game-button-height: calc(var(--game-button-height-base) * var(--puzzle-stage-scale));
  --game-button-font-size: calc(var(--game-button-font-size-base) * var(--puzzle-stage-scale));

  /* Puzzle upper-deck message sizing */
  --puzzle-message-font-size-base: var(--baseline-font-size);
  --puzzle-message-font-size: calc(var(--puzzle-message-font-size-base) * var(--puzzle-stage-scale));
  --puzzle-lock-message-multiplier: 1.25;

  /* Popouts + drop sign typography (puzzle design space; stage-scaled) */
  --puzzle-popout-font-size-base: var(--baseline-font-size);
  --puzzle-popout-font-size: calc(var(--puzzle-popout-font-size-base) * var(--puzzle-stage-scale));
  --puzzle-popout-line-height: var(--narrative-line-height);

  --puzzle-drop-sign-font-size-base: var(--baseline-font-size);
  --puzzle-drop-sign-font-size: calc(var(--puzzle-drop-sign-font-size-base) * var(--puzzle-stage-scale));

  /* Anchored popout geometry (base + scaled, puzzle-only) */
  --puzzle-popout-padding-x-base: 18px;
  --puzzle-popout-padding-y-base: 12px;
  --puzzle-popout-corner-radius-base: 12px;
  --puzzle-popout-arrow-size-base: 12px;
  --puzzle-popout-gap-base: 0px;
  --puzzle-popout-border-width-base: 1px;

  --puzzle-popout-padding-x: calc(var(--puzzle-popout-padding-x-base) * var(--puzzle-stage-scale));
  --puzzle-popout-padding-y: calc(var(--puzzle-popout-padding-y-base) * var(--puzzle-stage-scale));
  --puzzle-popout-corner-radius: calc(var(--puzzle-popout-corner-radius-base) * var(--puzzle-stage-scale));
  --puzzle-popout-arrow-size: calc(var(--puzzle-popout-arrow-size-base) * var(--puzzle-stage-scale));
  --puzzle-popout-gap: calc(var(--puzzle-popout-gap-base) * var(--puzzle-stage-scale));
  --puzzle-popout-border-width: calc(var(--puzzle-popout-border-width-base) * var(--puzzle-stage-scale));

  /* Drop sign geometry (base + scaled, puzzle-only) */
  --puzzle-drop-sign-padding-x-base: 18px;
  --puzzle-drop-sign-padding-y-base: 12px;
  --puzzle-drop-sign-corner-radius-base: 12px;
  --puzzle-drop-sign-frame-thickness-base: 1px;
  --puzzle-drop-sign-rope-thickness-base: 3px;
  --puzzle-drop-sign-rope-rest-length-base: 120px;

  --puzzle-drop-sign-padding-x: calc(var(--puzzle-drop-sign-padding-x-base) * var(--puzzle-stage-scale));
  --puzzle-drop-sign-padding-y: calc(var(--puzzle-drop-sign-padding-y-base) * var(--puzzle-stage-scale));
  --puzzle-drop-sign-corner-radius: calc(var(--puzzle-drop-sign-corner-radius-base) * var(--puzzle-stage-scale));
  --puzzle-drop-sign-frame-thickness: calc(var(--puzzle-drop-sign-frame-thickness-base) * var(--puzzle-stage-scale));
  --puzzle-drop-sign-rope-thickness: calc(var(--puzzle-drop-sign-rope-thickness-base) * var(--puzzle-stage-scale));
  --puzzle-drop-sign-rope-rest-length: calc(var(--puzzle-drop-sign-rope-rest-length-base) * var(--puzzle-stage-scale));

  /* Spare lock indicator geometry (base + scaled for component vars) */
  --puzzle-spare-size-base: 49px;
  --puzzle-spare-stroke-width-base: 3px;
  --puzzle-spare-label-size-base: 22.5px;

  --puzzle-spare-size: calc(var(--puzzle-spare-size-base) * var(--puzzle-stage-scale));
  --puzzle-spare-stroke-width: calc(var(--puzzle-spare-stroke-width-base) * var(--puzzle-stage-scale, var(--puzzle-stage-scale)));
  --puzzle-spare-label-size: calc(var(--puzzle-spare-label-size-base) * var(--puzzle-stage-scale));

  /* Lock-picker overlay tokens */
  --lock-pattern-color: hsl(318 71% 76%);
  --lock-dot-thickness-base: 2px;
  --lock-dot-thickness: calc(var(--lock-dot-thickness-base) * var(--puzzle-stage-scale));
  --lock-pattern-period: 20s;

  /* Countdown (puzzle page wrapper label metrics) */
  --puzzle-countdown-label-row-gap-base: 6px;
  --puzzle-countdown-label-font-size-base: 19px;
  --puzzle-countdown-label-row-gap: calc(var(--puzzle-countdown-label-row-gap-base) * var(--puzzle-stage-scale));
  --puzzle-countdown-label-font-size: calc(var(--puzzle-countdown-label-font-size-base) * var(--puzzle-stage-scale));

  /* Donation callout */
  --puzzle-donation-gap-base: 16px;
  --puzzle-donation-gap: calc(var(--puzzle-donation-gap-base) * var(--puzzle-stage-scale));
}

/* =========================
   Standard Puzzle (page-specific)
   ========================= */

/* Full-viewport sizing only for puzzle page */
html,
body {
  height: 100%;
  overflow: hidden;
}

/* Page (puzzle) */
body {
  display: grid;
  place-items: center;
}

/* Game title (inherits visual styling from Site.css: .game-title, .site-title-text) */
.game-title {
  font-size: var(--game-title-font-size);
}

/* =========================
   App container
   ========================= */
#swapscotch-app {
  position: relative;
  z-index: 1;
  width: min-content;
  max-width: 100%;
}

/* Stage frame = block that we lock to the pre-solve height */
.stage-frame {
  display: grid;
  justify-items: center;
  /* height is set/locked by JS at solve time to keep top pinned */
}

/* Stage stack = original puzzle stack (title + upper deck + grid + lower deck) */
.stage-stack {
  display: grid;
  justify-items: center;
  row-gap: var(--puzzle-stage-row-gap);
}

/* =========================
   Upper Deck
   ========================= */
.upper-deck {
  width: var(--deck-width);
  display: grid;
}
.upper-deck > * {
  grid-area: 1 / 1;
  align-self: center;
  width: 100%;
  min-width: 0;
  visibility: hidden;
}
.upper-deck[data-view="general"] #message-general,
.upper-deck[data-view="lock"] #message-lock,
.upper-deck[data-view="countdown"] #message-countdown,
.upper-deck[data-view="play"] #message-play {
  visibility: visible;
}

/* General instructions */
#message-general .game-instructions {
  font-size: var(--puzzle-message-font-size);
  text-align: left;
  line-height: var(--narrative-line-height);
}
#message-general .game-instructions .highlighted {
  color: var(--color-highlight);
  font-weight: var(--font-weight-bold);
}

/* Lock-picking message */
#message-lock .lock-instructions {
  font-size: calc(var(--puzzle-message-font-size) * var(--puzzle-lock-message-multiplier));
  text-align: left;
  line-height: var(--narrative-line-height);
}
#message-lock .lock-instructions .highlighted {
  color: var(--color-highlight);
  font-weight: var(--font-weight-bold);
}

/* Center the Play New Game view in the upper deck */
#message-play {
  display: grid;
  place-content: center;
}

/* =========================
   SwapGrid spacing + cells
   ========================= */
#game-board .sg-grid {
  justify-content: center;
  align-content: start;
  column-gap: var(--gap-column);
  row-gap: var(--gap-row);
}

#game-board {
  --cell-w: var(--tile-size);
  --cell-h: var(--tile-size);
}
#game-board .sg-item {
  width: var(--cell-w);
  height: var(--cell-h);
  position: relative;
  touch-action: none;
}

/* The tile host (component) fills the cell */
#game-board .sg-content {
  position: relative;
}
#game-board .sg-content > puzzle-tile {
  display: block;
  /* Make sure the component scales itself to the cell via its CSS custom props */
  --puzzle-tile-width: var(--cell-w);
  --puzzle-tile-height: var(--cell-h);
}

/* Overlay puzzle-tiles used for crossfades sit above the base */
#game-board .sg-content > puzzle-tile.overlay-tile {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* =========================
   Lock-picker overlay (pattern-border)
   ========================= */
#game-board .sg-item .lock-overlay {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  border: var(--lock-dot-thickness) solid transparent;
  color: var(--lock-pattern-color);
  --pattern-gap: var(--lock-pattern-gap);
  pointer-events: none;
  transform: none;
  transform-origin: 50% 50%;
}
#game-board[data-locking="true"] .lock-overlay {}

/* =========================
   Lower Deck
   ========================= */
.lower-deck {
  width: var(--deck-width);
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: var(--lower-deck-column-gap);
}
.lower-deck > .stats,
.lower-deck > .actions {
  align-self: center;
}

/* Stats */
.stats {
  position: relative;
  display: grid;
  row-gap: var(--stats-row-gap);
  justify-items: start;
}
.stat {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  column-gap: var(--stats-row-gap);
}
.stat .icon {
  width: var(--stat-icon-size);
  height: var(--stat-icon-size);
  display: inline-block;
}
.stat .stat-label {
  font-weight: var(--font-weight-bold);
  font-size: var(--stat-label-font-size);
  color: var(--color-narrative);
}

/* Actions */
.actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--actions-gap);
}

/* Anchors for help popouts (center their contents) */
.actions .spare-anchor,
.actions .lock-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* =========================
   Help popout widths
   ========================= */
#stats-popout,
#lock-popout {
  --width: 30ch;
}

/* =========================
   Popouts and drop sign (puzzle scope)
   ========================= */
#swapscotch-app anchored-popout {
  font-size: var(--puzzle-popout-font-size);
  line-height: var(--puzzle-popout-line-height);
  z-index: 3;
  --padding-horizontal: var(--puzzle-popout-padding-x);
  --padding-vertical: var(--puzzle-popout-padding-y);
  --corner-radius: var(--puzzle-popout-corner-radius);
  --arrow-size: var(--puzzle-popout-arrow-size);
  --gap: var(--puzzle-popout-gap);
  --border-width: var(--puzzle-popout-border-width);
}

#swapscotch-app drop-sign {
  font-size: var(--puzzle-drop-sign-font-size);
  line-height: var(--puzzle-popout-line-height);
  z-index: 3;
  --padding-horizontal: var(--puzzle-drop-sign-padding-x);
  --padding-vertical: var(--puzzle-drop-sign-padding-y);
  --corner-radius: var(--puzzle-drop-sign-corner-radius);
  --frame-thickness: var(--puzzle-drop-sign-frame-thickness);
  --rope-thickness: var(--puzzle-drop-sign-rope-thickness);
  --rope-rest-length: var(--puzzle-drop-sign-rope-rest-length);
}

/* Spare lock indicator theming */
#spare-indicator {
  --spare-size: var(--puzzle-spare-size);
  --spare-stroke-width: var(--puzzle-spare-stroke-width);
  --spare-start-angle: -90deg;
  --spare-linecap: round;

  --spare-base-stroke: hsl(236 50% 24%);
  --spare-base-opacity: 1;
  --spare-indicator-stroke: hsl(324 100% 70%);
  --spare-indicator-opacity: 1;

  --spare-label-color: var(--color-highlight);
  --spare-label-size: var(--puzzle-spare-label-size);
  --spare-label-weight: var(--font-weight-bold);
}

/* =========================
   Countdown (puzzle page only)
   ========================= */
#message-countdown.countdown-unit {
  display: grid;
  place-items: center;
  row-gap: var(--puzzle-countdown-label-row-gap);
}
#message-countdown .countdown-label {
  font-family: var(--countdown-labels-font);
  font-weight: var(--font-weight-medium);
  font-size: var(--puzzle-countdown-label-font-size);
  color: var(--color-narrative);
  text-align: center;
}

#countdown {
  color: var(--color-highlight);
  --digits-font: var(--countdown-digits-font);
  --digits-weight: var(--countdown-digits-weight);
  --digit-size: calc(var(--countdown-digit-size) * var(--puzzle-stage-scale));
  --card-padding-x: calc(var(--countdown-card-padding-x) * var(--puzzle-stage-scale));
  --labels-font: var(--countdown-labels-font);
  --labels-weight: var(--countdown-labels-weight);
  --label-size: calc(var(--countdown-label-size) * var(--puzzle-stage-scale));
  --slot-gap: calc(var(--countdown-slot-gap) * var(--puzzle-stage-scale));
  --unit-gap: calc(var(--countdown-unit-gap) * var(--puzzle-stage-scale));
  --digit-gap: calc(var(--countdown-digit-gap) * var(--puzzle-stage-scale));
  --corner-radius-proportion: var(--countdown-corner-radius-proportion);
  --edge-thickness-scale: var(--countdown-edge-thickness-scale);
  --seam-thickness-scale: var(--countdown-seam-thickness-scale);
}

/* =========================
   Pushbuttons
   ========================= */
.game-button {
  --push-button-font-size: var(--game-button-font-size);
  --push-button-height: var(--game-button-height);
}

#button-lock {
  --push-button-width: var(--game-button-height);
  --push-button-label-color: var(--lock-button-label-color);
  --push-button-top-color: var(--lock-button-top-color);
  --push-button-bottom-color: var(--lock-button-bottom-color);
}

#button-share {
  position: absolute;
  right: 0;
  top: 50%;
  line-height: 1.1;
  transform: translateY(-50%);
  --push-button-font-size: calc(var(--game-button-font-size) * 0.8);
  --push-button-default-label-justification: left;
  --push-button-label-color: var(--share-button-label-color);
  --push-button-top-color: var(--share-button-top-color);
  --push-button-bottom-color: var(--share-button-bottom-color);
  --push-button-default-icon-size: 1.5lh;
}

.actions.share-mode #button-share {}
.actions.share-mode #button-lock,
.actions.share-mode #spare-indicator {}

/* =========================
   Donation callout
   ========================= */
.puzzle-donation {
  /* common callout look comes from .callout-panel in Site.css */
  width: min-content;
  margin-inline: auto;
  margin-top: var(--puzzle-donation-gap);
  --callout-panel-padding: calc(var(--callout-panel-padding-base) * var(--site-layout-metric-scale) * 2/3);/* 🔼 temporary hack */
  --callout-panel-radius: calc(var(--callout-panel-radius-base) * var(--site-layout-metric-scale) * 2/3);/* 🔼 temporary hack */
}

.puzzle-donation .donation-line {
  display: inline-flex;
  align-items: center;
  gap: 2ch;
}

.puzzle-donation .donation-message {
  font-size: var(--puzzle-message-font-size); /* stage-scaled */
  line-height: var(--narrative-line-height);
}

.puzzle-donation push-button {
  /* metrics match puzzle game buttons; colors come from shared class(es) */
  --push-button-font-size: calc(var(--game-button-font-size) * 0.8);/* 🔼 temporary hack */
  --push-button-height: calc(var(--game-button-height) * 0.8);/* 🔼 temporary hack */
}