/* Shared layout for standalone games. Boards retain their own geometry. */
.puzzle-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 28px 42px; align-items: start; width: 100%; margin: 0; }
.puzzle-workspace > .puzzle-play { grid-column: 1; grid-row: 1; min-width: 0; width: min(100%, 540px); margin: 0 auto; }
.puzzle-sidebar { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.puzzle-panels { position: relative; z-index: 30; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.puzzle-panel { min-width: 0; }
.puzzle-panel-toggle, .puzzle-page .puzzle-panel-toggle { width: 100%; min-height: 44px; list-style: none; font-weight: 400; }
.puzzle-panel-toggle::-webkit-details-marker { display: none; }
.puzzle-panel-toggle::marker { content: ''; }
.puzzle-panel-toggle .icon { width: 18px; height: 18px; }
.puzzle-panel[open] > summary { border-color: #b6c7b0; background: var(--tint); }
.puzzle-panel-body { position: absolute; top: calc(100% + 8px); left: 0; z-index: 1; width: 100%; max-height: min(680px, calc(100dvh - 240px)); overflow-y: auto; overscroll-behavior: contain; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: 0 5px 20px #282e2914; color: var(--muted); font: 13px/1.7 var(--sans); }
.puzzle-panel:not([open]) > .puzzle-panel-body { display: none; }
.puzzle-panel-body p { margin: 0 0 12px; }
.puzzle-panel-body p:last-child { margin-bottom: 0; }
.puzzle-panel-body .puzzle-remember { margin-top: 12px; }
.puzzle-panel-body .puzzle-panel-done { width: 100%; margin-top: 16px; }
.puzzle-details { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--tint) 35%, var(--paper)); font: 13px/1.7 var(--sans); }
.puzzle-details h2 { margin: 0 0 14px; font: 25px/1.2 var(--serif); letter-spacing: -.5px; }
.puzzle-details p { margin: 12px 0; color: var(--muted); }
.puzzle-details p:last-child { margin-bottom: 0; }
.puzzle-facts { margin: 16px 0 0; }
.puzzle-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); }
.puzzle-facts dt { color: var(--muted); }
.puzzle-facts dd { margin: 0; color: var(--green); font: 12px/1.7 var(--mono); text-align: right; }
.puzzle-detail-tip { padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; }
.puzzle-workspace .panel-actions { margin-top: 0; margin-bottom: 16px; gap: 8px; }
.puzzle-workspace .hex-actions { display: flex; }
.puzzle-workspace .hex-status { min-height: 1.7em; margin: 0 0 12px; color: var(--green); font: 14px/1.7 var(--sans); }
.puzzle-workspace .hex-board-viewport { min-width: 0; padding: 4px; }
.puzzle-workspace .hex-board { margin: 12px auto 18px; }
.puzzle-workspace .hex-players { grid-template-columns: 1fr; gap: 8px; }
.puzzle-workspace .hex-player { padding: 8px 0; }
.puzzle-workspace .hex-player[data-active='true'] .hex-player-name { color: var(--green); font-weight: 600; }
.puzzle-workspace .hex-mode-options { margin-top: 18px; }
.puzzle-workspace .hex-size-heading { gap: 12px; }
.puzzle-workspace .hex-size-heading label { display: block; flex: initial; }
.puzzle-workspace .hex-mode-option { flex-wrap: nowrap; justify-content: flex-start; }
.puzzle-workspace .tiling-settings { display: block; width: 100%; margin: 0; }
.puzzle-workspace .tiling-pieces { display: block; width: 100%; }
.puzzle-workspace .tiling-tray-heading { gap: 16px; }
.puzzle-workspace .glo-settings { display: block; margin: 0; }
.puzzle-workspace .glo-info { justify-content: flex-start; }
.puzzle-workspace .glo-preview { margin-top: 12px; }
.puzzle-workspace .glo-completed { margin: 12px 0 0; }
.puzzle-workspace .klotski-status { color: var(--green); font: 14px/1.7 var(--sans); }
@media (max-width: 899px) {
  .puzzle-workspace { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .puzzle-sidebar { display: contents; }
  .puzzle-panels { grid-column: 1; grid-row: 1; width: min(100%, 540px); margin: 0 auto; }
  .puzzle-workspace > .puzzle-play { grid-column: 1; grid-row: 2; }
  .puzzle-details { grid-column: 1; grid-row: 3; width: min(100%, 540px); margin: 0 auto; }
  .puzzle-workspace .hex-players { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .puzzle-workspace.tiling-game > .tiling-play { grid-row: 3; margin-top: 0; }
  .puzzle-workspace .tiling-pieces { grid-column: 1; grid-row: 2; width: min(100%, 540px); margin: 0 auto; padding: 0; border: 0; background: var(--paper); }
  .puzzle-workspace .tiling-tray-heading { margin-bottom: 8px; }
  .puzzle-workspace .tiling-tray { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 5px 3px 10px; position: static; }
  .puzzle-workspace .tiling-piece, .puzzle-workspace .tiling-tray.has-few-types .tiling-piece { flex: 0 0 104px; flex-direction: column; justify-content: center; min-height: 112px; padding: 12px 9px; gap: 10px; scroll-snap-align: start; touch-action: pan-x; }
}
@media (max-width: 380px) {
  .puzzle-workspace .panel-actions { gap: 6px; }
}