/* A cropped elliptical orbit; the cards themselves remain flat. */
[data-page="playground"] .portfolio-hero { overflow: hidden; }
.orbit-gallery { position: absolute; inset: clamp(210px,29svh,330px) 0 0; grid-area: auto; overflow: hidden; display: block; margin: 0; z-index: 0; }
.orbit-gallery:focus-visible { outline: 1px solid #7e9abd; outline-offset: -4px; }
[data-page="playground"] .hero-name, [data-page="playground"] .hero-information, [data-page="playground"] .hero-contact, [data-page="playground"] .hub-footer { position: relative; z-index: 2; }
[data-page="playground"] .hero-navigation { z-index: 3; }
[data-page="playground"] .hero-contact, [data-page="playground"] .hub-footer { background: rgb(17 17 17 / .85); }
.orbit-viewport { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; touch-action: pan-y; isolation: isolate; display: flex; gap: 18px; align-items: center; }
.orbit-gallery .gallery-float { position: relative; inset: auto; flex: 0 0 24%; width: 24%; max-width: none; margin: 0; }
.orbit-gallery .gallery-float .gallery-button { transform: scale(1); transition: transform 320ms cubic-bezier(.2,.75,.2,1); }
.orbit-gallery .gallery-float:focus-within .gallery-button { transform: scale(1); }
.orbit-gallery .gallery-caption { display: none; }
.orbit-gallery .gallery-tile { aspect-ratio: 4 / 5; box-shadow: 0 12px 28px rgb(0 0 0 / .22); }
.orbit-gallery .tile-word { font-size: clamp(1.5rem,3vw,3rem); }
.orbit-gallery .tile-poster .tile-word { font-size: clamp(1.25rem,2.4vw,2.25rem); }
.orbit-gallery .tile-status { font-size: .75rem; }
.orbit-gallery .gallery-button:hover .gallery-tile { border-color: #f0f0ed; }
.orbit-gallery .gallery-button:focus-visible { outline: 2px solid #a9cfff; outline-offset: 5px; }
.orbit-gallery.is-ready .orbit-viewport { display: block; cursor: grab; }
.orbit-gallery.is-dragging .orbit-viewport { cursor: grabbing; }
.orbit-gallery.is-ready .gallery-float { position: absolute; left: 0; top: 0; width: var(--card-width,220px); transform-origin: center; will-change: transform; }
.orbit-gallery.is-ready .gallery-button { user-select: none; -webkit-user-select: none; }
.orbit-gallery.is-ready img { pointer-events: none; -webkit-user-drag: none; }
@media (hover: hover) {
  .orbit-gallery .gallery-float:hover .gallery-button { transform: translateY(-5px) scale(1.065); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-gallery .gallery-float .gallery-button { transition: none; }
}
@media (max-width: 760px) {
  .orbit-gallery { inset: 70px 0 80px; margin: 0; }
  .orbit-gallery .tile-word { font-size: 1.75rem; }
  .orbit-gallery .tile-poster .tile-word { font-size: 1.375rem; }
  .orbit-gallery .tile-status { font-size: .75rem; }
}

.gallery-morph { position: fixed; z-index: 2; pointer-events: none; margin: 0; }
.gallery-morph .gallery-tile { width: 100%; height: 100%; aspect-ratio: auto; }
.gallery-morph img { width: 100%; height: 100%; object-fit: contain; }
.is-preview-source { visibility: hidden; }
.explore-dialog { border: 0; background: transparent; box-shadow: none; overflow-y: auto; }
.explore-dialog::backdrop { background: rgb(0 0 0 / .68); backdrop-filter: blur(8px); animation: gallery-backdrop-in 520ms ease-in-out both; }
.explore-dialog.is-closing::backdrop { animation: gallery-backdrop-out 440ms ease-in-out both; }
.explore-dialog.is-morphing { overflow: visible; }
.explore-dialog.is-morphing .detail-preview { visibility: hidden; }
.explore-dialog.is-morphing .explore-close,.explore-dialog.is-morphing .hub-detail > :not(.detail-preview) { opacity: 0; }
.gallery-detail.tile-poster .detail-preview { width: min(65%,300px,calc((100svh - 320px) * .6667)); }
.gallery-detail.tile-object .detail-preview { width: min(75%,390px); }
@keyframes gallery-backdrop-in { from { background: rgb(0 0 0 / 0); backdrop-filter: blur(0); } to { background: rgb(0 0 0 / .68); backdrop-filter: blur(8px); } }
@keyframes gallery-backdrop-out { from { background: rgb(0 0 0 / .68); backdrop-filter: blur(8px); } to { background: rgb(0 0 0 / 0); backdrop-filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .explore-dialog::backdrop,.explore-dialog.is-closing::backdrop { animation: none; } }

.explore-close { width: 44px; min-height: 44px; justify-content: center; }

/* A shared top line for the title and close control; description stays with the title. */
.explore-dialog { padding-top: 24px; }
.explore-close { position: absolute; top: 24px; right: 36px; margin: 0; }
.explore-dialog .hub-detail h2 { min-height: 44px; display: flex; align-items: center; margin: 0 56px 0 0; font-size: 16px; line-height: 22px; }
.explore-dialog .gallery-detail > p { margin: 0 56px 28px 0; }
.explore-dialog .detail-preview { margin-bottom: 0; }
@media (max-width: 760px) {
  .explore-dialog { padding-top: 16px; }
  .explore-close { top: 16px; right: 20px; }
  .explore-dialog .hub-detail h2 { font-size: 16px; line-height: 22px; }
  .explore-dialog .gallery-detail > p { margin-right: 0; margin-bottom: 24px; }
}
/* Artwork previews stay separate from the game runtime until opened. */
.floating-stage .tile-real-game .gallery-tile img,.tile-real-game .detail-preview img{mix-blend-mode:normal;object-fit:contain;mask-image:none}.tile-real-game .gallery-tile{background:#202020}.tile-real-game .tile-status{color:#f0f0ed;max-width:calc(100% - 24px);font-size:12px}.game-launch{display:inline-flex;align-items:center;min-height:44px;margin-left:12px;color:#f0f0ed;font-weight:500;text-decoration:none}.tile-real-game .detail-preview{display:block}

[data-page="playground"] .hero-about { grid-column: 2; }
@media(max-width:760px){[data-page="playground"] .hero-about { grid-column: 1 / -1; max-width: 32ch; }}
.orbit-gallery .tile-real-game .gallery-tile img{object-fit:cover;width:100%;height:100%}.orbit-gallery .tile-real-game .tile-status{display:none}
.gallery-morph.tile-real-game img,.tile-real-game .detail-preview img{object-fit:cover}
.tile-real-game .game-image-cat{background:#fef4de}.tile-real-game .game-image-kaya{background:#e1e9d4}
.floating-stage .tile-real-game .game-image-contained img,.tile-real-game .game-image-contained img{object-fit:contain;padding:6%;mix-blend-mode:normal}

/* Frame the original photograph to its poster edges without recreating the artwork. */
.tile-poster .poster-preview { background: #730c10; border-color: #730c10; }
.poster-art { display: block; width: 100%; height: 100%; overflow: hidden; }
.gallery-detail.tile-poster .poster-preview { aspect-ratio: 1614 / 2286; width: min(80%,360px,calc((100svh - 230px) * .706)); }

.game-launch{gap:7px}.game-launch .link-arrow{box-sizing:content-box;flex:none;width:10px;height:10px;padding:3px;border:1px solid #686864;vertical-align:-.05em;transition:background-color .16s ease,color .16s ease,border-color .16s ease}.game-launch:hover{text-decoration:none}.game-launch:hover .link-arrow,.game-launch:focus-visible .link-arrow{border-color:#f0f0ed;background:#f0f0ed;color:#111}

.tile-real-game .game-image-kasane { background: #747f3d; }

.tile-real-game .chang-ho-preview{background:#fff}
.chang-ho-slideshow{width:min(100%,1000px);margin:24px auto 0;touch-action:pan-y}
.chang-ho-slideshow>img{display:block;width:100%;height:min(58svh,620px);object-fit:contain;mix-blend-mode:normal;background:#fff}
.slide-controls{display:flex;justify-content:center;align-items:center;gap:22px;padding-top:14px}
.slide-controls button{background:transparent;color:#eee;border:1px solid #555;min-width:44px;min-height:44px;font-size:20px;cursor:pointer}
.slide-controls span{font-size:12px;color:#bbb;min-width:38px;text-align:center}
.project-slideshow{width:min(100%,1000px);margin:24px auto 0;touch-action:pan-y}
.tile-real-game .project-slideshow>img{display:block;width:100%;height:min(58svh,620px);object-fit:contain;mix-blend-mode:normal;background:transparent}
.portrait-slideshow{max-width:520px}
.orbit-gallery .tile-creative .creative-preview img{object-fit:contain;background:#fff}

.orbit-gallery .tile-creative .gallery-tile{aspect-ratio:1000 / 1426}
.orbit-gallery .tile-creative .creative-preview img{padding:0;object-fit:cover}

.quoted-title{margin-inline:.14em}


.slide-controls{gap:8px;padding-top:10px}
.slide-controls button{display:grid;place-items:center;position:relative;border:0;width:44px;height:44px;min-width:44px;background:transparent}
.slide-controls button svg{width:24px;height:24px;padding:5px;border:1px solid #686866;box-sizing:border-box;transition:background 180ms ease,border-color 180ms ease}
.slide-controls button:hover svg{background:#343434;border-color:#ddd}
.slide-controls [data-slide-count]{display:none}
@media(max-width:760px){[data-page="playground"] .hero-contact{display:none}}

@media(max-width:760px){
 .explore-dialog .hub-detail h2 { display:block; min-height:44px; padding:8px 0; font-size:18px; line-height:25px; letter-spacing:-.02em; text-wrap:balance; }
 .explore-dialog #chang-ho-heading .title-second-line { display:block; }
 .explore-dialog .quoted-title { white-space:nowrap; margin-inline:.08em; }
 .explore-dialog .gallery-detail > p { font-size:14px; line-height:21px; margin-top:8px; }
 .game-launch { min-width:64px; min-height:48px; gap:8px; font-size:14px; padding:0 4px; }
 .game-launch .link-arrow { width:14px; height:14px; padding:5px; }
 .slide-controls { gap:16px; padding-top:12px; }
 .slide-controls button { width:48px; height:48px; min-width:48px; min-height:48px; }
 .slide-controls button svg { width:32px; height:32px; padding:7px; }
 .tile-real-game .tile-status,.gallery-caption { font-size:14px; line-height:21px; }
}

@media(max-width:360px){.explore-dialog #chang-ho-heading{font-size:16px;line-height:23px;letter-spacing:-.025em}}

@media(max-width:760px){.explore-close{width:48px;min-height:48px}.explore-close span{font-size:28px}}