/* Pigeon O.U.T. — ACTIVE PUBLIC LAYOUT (Issue #27, provisional).
 * WALLS: native "o-original" renderer in game.js, unchanged.
 * FRAME: user's saved configuration, 2026-10-10.
 * Change ONLY the custom properties below to try a different frame.
 * The separate Developer/Layout Labs retain every experimental candidate.
 * No changes to canvas internal resolution, maze cells or gameplay.
 */
:root {
  --layout-frame-color-a: #f6f5f4;
  --layout-frame-color-b: #b60576;
  --layout-frame-angle: 135deg;
  --layout-frame-thickness: 3px;
  --layout-frame-gap: 10px;
  --layout-frame-radius: 20px;
  --layout-frame-glow: 28px;
  --layout-frame-glow-color: rgba(246, 245, 244, .28);
}

/* Keep the game canvas at 680 CSS pixels where space permits; only the
 * decoration is outside it. On smaller viewports the canvas scales fluidly.
 * The first background fills the gap; the second paints ONLY the border.
 */
.game-wrap {
  width: min(100%, calc(680px + var(--layout-frame-thickness) + var(--layout-frame-thickness) + var(--layout-frame-gap) + var(--layout-frame-gap)));
  padding: var(--layout-frame-gap);
  border: var(--layout-frame-thickness) solid transparent;
  border-radius: var(--layout-frame-radius);
  background: linear-gradient(#070006, #070006) padding-box,
    linear-gradient(var(--layout-frame-angle), var(--layout-frame-color-a), var(--layout-frame-color-b)) border-box;
  box-shadow: 0 0 var(--layout-frame-glow) var(--layout-frame-glow-color);
}

.game-wrap #game,
.game-wrap .overlay {
  border-radius: max(0px, calc(var(--layout-frame-radius) - var(--layout-frame-thickness) - var(--layout-frame-gap)));
}

.game-wrap .overlay {
  inset: calc(var(--layout-frame-thickness) + var(--layout-frame-gap));
}