/* MONSTER MASH MOTORS — Make a Poster. Builds on paint.css (the shared .mk-*
   tokens, buttons, tabs and tiles), which poster.js also loads. */

.pz-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) {
  .pz-layout { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); align-items: start; }
  .pz-side { position: sticky; top: 12px; }
}
.pz-main, .pz-side { min-width: 0; }

/* The poster: A4 landscape. Everything inside is placed in poster units
   (1754 x 1240) as percentages, so it scales with the screen. */
.pz-poster {
  position: relative; width: 100%; aspect-ratio: 1754 / 1240; margin: 0 auto;
  /* Short landscape screens: keep the whole poster in view while dragging. */
  max-width: calc((100vh - 40px) * 1.4145); max-width: calc((100svh - 40px) * 1.4145);
  background: var(--mk-paper); border: 4px solid var(--mk-key); border-radius: 12px;
  box-shadow: 6px 6px 0 var(--mk-key); overflow: hidden;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.pz-scene {
  position: absolute; left: calc(24 / 1754 * 100%); top: calc(236 / 1240 * 100%);
  width: calc(1706 / 1754 * 100%); height: calc(842 / 1240 * 100%); pointer-events: none;
}
.pz-frame, .pz-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pz-items { position: absolute; inset: 0; touch-action: pan-y; }
.pz-item { position: absolute; touch-action: none; cursor: grab; border-radius: 10px; }
.pz-item img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.pz-item.pz-sel { outline: 3px dashed var(--mk-key); outline-offset: 1px; background: rgba(255, 249, 238, 0.22); }
.pz-item:focus-visible { outline: 4px solid var(--mk-focus); outline-offset: 3px; }
.pz-item.pz-drag { cursor: grabbing; }
/* A corner handle for mouse users (touch has two-finger pinch and the
   Bigger/Smaller buttons; keyboards have + and -). It sits outside the corner
   so it never covers a small sticker. */
.pz-handle { display: none; position: absolute; right: -26px; bottom: -26px; width: 34px; height: 34px; touch-action: none; cursor: nwse-resize; }
.pz-handle::after { content: ''; position: absolute; inset: 5px; background: var(--mk-yellow); border: 3px solid var(--mk-key); border-radius: 50%; }
@media (pointer: fine) { .pz-item.pz-sel .pz-handle { display: block; } }

.pz-selrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 12px 0 0; }
.pz-selname, .pz-empty { margin: 0; font-weight: 700; font-size: 16px; }
.pz-empty { color: #3D3935; }
.pz-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.pz-keys { margin: 6px 0 0; font-size: 14px; color: #3D3935; }
.pz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0 4px; }

/* Trays */
.pz-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pz-tabs .ps-tab { font-size: 14px; padding: 6px 0; }
@media (min-width: 420px) { .pz-tabs .ps-tab { font-size: 15px; } }
.pz-add { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: center; touch-action: manipulation; }
.pz-add:active .ps-tile-face { transform: translate(2px, 2px); }
.pz-add:hover .ps-tile-face { background: #FFF3DC; }
.pz-places .ps-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.pz-places .ps-tile-art img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; border: 2px solid var(--mk-key); border-radius: 6px; }
.pz-words .ps-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.pz-words .ps-tile-art svg { height: 48px; max-width: 120px; }
.pz-titles .ps-tile-word { font-family: var(--mk-title); font-weight: 400; font-size: 17px; letter-spacing: 0.5px; }
.pz-titles .ps-tile-face { text-align: left; }