/* scenes/loom.js: the game's 16 patterns x 16 dyes on a curtain, a cushion and a rug. */
.gscene-loom .gscene-stage { height: auto; min-height: 0; padding: clamp(16px, 3vw, 28px);
  background: radial-gradient(ellipse 80% 70% at 30% 30%, color-mix(in srgb, var(--loom-ground, #3a2030) 70%, #1a1428), #0e1020 75%); }
.gscene-loom .gscene-stage:not(.loom-ready) { min-height: 240px; }
.loom { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: center; }
.loom-view { position: relative; }
.loom-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); }
.loom-name { margin: 10px 0 0; text-align: center; font: 800 1.05rem/1.4 var(--display); color: #fff; }
.loom-label { margin: 0 0 6px; font: 800 0.78rem/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: #c9d2ea; }
.loom-patterns, .loom-dyes { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.loom-pattern, .loom-dye { appearance: none; border: 0; padding: 0; cursor: pointer; border-radius: 8px; aspect-ratio: 1; min-height: 28px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.loom-pattern canvas { display: block; width: 100%; height: 100%; border-radius: 8px; image-rendering: pixelated; }
.loom-dye { background: var(--dye); border-radius: 50%; }
.loom-pattern:hover, .loom-dye:hover { transform: translateY(-2px); }
.loom-pattern[aria-pressed="true"], .loom-dye[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold, #ffcc4d); }
.loom-pattern:focus-visible, .loom-dye:focus-visible { outline: 3px solid var(--gold, #ffcc4d); outline-offset: 2px; }
.loom-shuffle { margin-top: 2px; }
@media (max-width: 760px) {
  .loom { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .loom-pattern, .loom-dye { transition: none; }
}