/* Image-only project rooms. Pool positioning and motion remain in the original room engine. */
.yz-case { width: 100%; max-width: var(--story-max, 1100px); height: auto; box-sizing: border-box; padding: 8px 0 32px; color: var(--bg); }
.yg-gallery, .yg-gallery *, .yg-more, .yg-more * { box-sizing: border-box; }
.yg-work { padding-top: 4px; }
.yg-gallery { display: flex; flex-direction: column; gap: 24px; width: 100%; min-width: 0; color: var(--bg); }
.room .yg-title { margin: 0; padding: 0; font: 500 clamp(42px, 5.7cqw, 72px)/1.2 var(--display), var(--sans); letter-spacing: -.035em; }
.yg-stage { position: relative; flex: none; width: 100%; height: min(60vh, 600px); min-height: 360px; overflow: hidden; border-radius: 24px; background: color-mix(in srgb, var(--bg) 3%, transparent); }
.yg-frame { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; pointer-events: none; }
.yg-frame.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.yg-frame img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; user-select: none; }
.yg-controls { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px 40px; gap: 10px; align-items: center; width: min(100%, 620px); align-self: center; }
.yg-control { appearance: none; display: grid; place-items: center; width: 40px; height: 44px; padding: 10px; border: 0; border-radius: 50%; background: transparent; color: var(--bg); cursor: pointer; }
.yg-control:hover { background: color-mix(in srgb, var(--bg) 7%, transparent); }
.yg-control svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.yg-control:disabled { opacity: .35; cursor: default; }
.yg-tabs { display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; }
.yg-dot { appearance: none; position: relative; display: grid; place-items: center; flex: 1 1 30px; min-width: 0; max-width: 38px; height: 44px; padding: 0; border: 0; border-radius: 8px; color: var(--ink-muted); background: transparent; cursor: pointer; font: 500 11px/1.2 var(--display), var(--sans); }
.yg-dot::after { content: ""; position: absolute; width: 16px; height: 2px; bottom: 4px; left: calc(50% - 8px); transform: scaleX(0); background: currentColor; transition: transform .25s ease; }
.yg-dot.is-active { color: var(--bg); }
.yg-dot.is-active::after { transform: scaleX(1); }
.yg-dot:hover { color: var(--bg); background: color-mix(in srgb, var(--bg) 5%, transparent); }
.yg-gallery button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.yg-single-tab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.side.yg-more { height: 100%; align-items: stretch; gap: 64px; }
.yg-more > .yg-more-project { flex: none; width: min(82vw, 660px); height: 100%; }
.yg-compact { height: 100%; gap: 20px; }
.room .yg-compact .yg-title { font-size: 42px; }
.yg-compact .yg-stage { flex: 1 1 auto; height: auto; min-height: 0; }
.yg-compact .yg-controls { flex: none; }
@container (max-width: 650px) {
  .yg-gallery { gap: 20px; }
  .room .yg-title { font-size: clamp(34px, 10cqw, 52px); }
  .yg-stage { min-height: 0; height: min(65vh, 620px); border-radius: 18px; }
  .yg-controls { grid-template-columns: 34px minmax(0, 1fr) 34px 34px; gap: 3px; }
  .yg-control { width: 34px; padding: 8px; }
  .yg-tabs { gap: 0; }
  .yg-dot { font-size: 10px; }
}
@media (max-width: 600px) {
  .side.yg-more { gap: 32px; }
  .room .yg-compact .yg-title { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .yg-frame, .yg-frame.is-active, .yg-dot::after { transition: none; }
}