/* =========================================================================
   Poster-Baukasten — Layout
   Eigenständige Sub-Seite (docs/spielzeug-konzept.md, Abschnitt F): eigenes
   Spielzeug, kein Server, kein Upload, kein Formular. Braucht
   assets/shared/tokens.css, assets/css/tokens.css und assets/css/site.css
   (.shell, .mono, .display, .note, Farben) — dort geladen, hier nur die
   Bühne, das Tablett und die Bedienelemente.
   ========================================================================= */

.ptop { border-bottom: var(--hair) solid var(--line); }
.ptop__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-block: var(--sp-3); }
.ptop__mark { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-variation-settings: var(--display-axes); font-size: var(--step-1); }
.ptop__back:hover { color: var(--accent); }

.poster { padding-block: var(--sp-6) var(--sp-7); }
.poster__head { max-width: 46rem; margin-bottom: var(--sp-6); }
.poster__head .head__p { margin-top: var(--sp-2); }

.poster__body { display: grid; gap: var(--sp-6); }
@media (min-width: 62rem) { .poster__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }

/* ---------------------------------------------------------- Bühne ---- */
.poster__stagewrap { display: grid; gap: var(--sp-3); }
/* Seitenverhältnis 4:5, wie das Hero-Poster — die Fläche, auf der alles liegt.
   Positionen der Teile stehen in % davon, unabhängig von der Bildschirmgröße. */
.poster__stage {
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  background: var(--paper); overflow: hidden; touch-action: none;
  border: var(--hair) solid var(--line);
}
.poster__stage[data-bg="ton"]    { background: var(--ton); }
.poster__stage[data-bg="ink"]    { background: var(--ink); }
.poster__stage[data-bg="kobalt"] { background: var(--kobalt); }
.poster__stage[data-bg="alpha"] {
  background-color: transparent;
  background-image: conic-gradient(#00000014 0 25%, transparent 0 25% 50%, #00000014 0 75%, transparent 0);
  background-size: 24px 24px;
}

.piece { position: absolute; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.piece:active { cursor: grabbing; }
.piece img { width: 100%; height: 100%; display: block; pointer-events: none; }
.piece.is-selected { outline: 1.5px dashed currentColor; outline-offset: 6px; }

.piece__del, .piece__resize, .piece__rotate {
  position: absolute; display: none; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border: 0; border-radius: 50%; padding: 0;
  background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 0.95rem; line-height: 1;
}
.piece.is-selected .piece__del,
.piece.is-selected .piece__resize,
.piece.is-selected .piece__rotate { display: flex; }
/* Griffe stehen aufrecht, egal wie das Teil gedreht ist — sonst wird aus dem × ein + */
.piece__del    { top: -0.85rem; right: -0.85rem; cursor: pointer; transform: rotate(calc(-1 * var(--rot, 0deg))); }
.piece__resize { bottom: -0.85rem; right: -0.85rem; cursor: nwse-resize; transform: rotate(calc(-1 * var(--rot, 0deg))); }
.piece__rotate { top: -2.5rem; left: 50%; cursor: grab; transform: translateX(-50%) rotate(calc(-1 * var(--rot, 0deg))); }
.piece__rotate:active { cursor: grabbing; }

.poster__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.poster__bg { display: flex; gap: var(--sp-2); }
.swatch { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: var(--hair) solid var(--line); padding: 0; cursor: pointer; }
.swatch--paper  { background: var(--paper); }
.swatch--ton    { background: var(--ton); }
.swatch--ink    { background: var(--ink); }
.swatch--kobalt { background: var(--kobalt); }
.swatch--alpha  { background-image: conic-gradient(#0002 0 25%, transparent 0 25% 50%, #0002 0 75%, transparent 0); background-size: 8px 8px; }
.swatch.is-active { outline: 2px solid var(--accent); outline-offset: 2px; }

.poster__actions { display: flex; gap: var(--sp-2); }
.btn {
  font-family: var(--font-mono); font-size: var(--mono-size); letter-spacing: var(--mono-track); text-transform: uppercase;
  padding: 0.7em 1.2em; border: var(--hair) solid currentColor; background: transparent; color: inherit; cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--accent { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.btn--accent:hover { background: var(--accent); color: var(--paper); opacity: 0.85; }

.poster__hint { margin-top: 0; }
.poster__empty { margin-top: 0; }

/* ---------------------------------------------------------- Tablett ---- */
.poster__tray { display: grid; gap: var(--sp-4); align-content: start; }
.tray__group { display: grid; gap: var(--sp-2); }
.tray__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); gap: var(--sp-1); }
.piecebtn { border: 0; background: none; padding: 0.3rem; cursor: pointer; }
.piecebtn img { width: 100%; height: auto; }
.piecebtn:hover, .piecebtn:focus-visible { outline: var(--hair) solid var(--accent); outline-offset: -2px; }

.poster__footer { padding-block: var(--sp-4); }