/* The game remains a full-height surface. Navigation never lives inside its iframe. */
body{--showcase-ink:#494338;--showcase-muted:#706859;--showcase-line:#b6a78b55}
#play-showcase{color:var(--showcase-ink);display:flex;flex-direction:column;gap:24px;min-width:0;width:100%;align-self:stretch}
#play-showcase h2{font-family:'Songti SC','Noto Serif CJK SC',serif;font-size:clamp(22px,1.65vw,28px);line-height:1.4;margin:10px 0}
.showcase-eyebrow{font-size:12px;font-weight:650;letter-spacing:.13em;color:#8a7659}
.showcase-note{font-size:14px;line-height:1.7;color:var(--showcase-muted);margin:0 0 16px}
#showcase-remixes{display:grid;gap:8px}
.remix-pick,.sample-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0;border:1px solid var(--showcase-line);border-radius:16px;background:#fffaf080;padding:9px 12px;transition:background .16s,border-color .16s}
.remix-pick:hover,.sample-link:hover{background:#fffcf5;border-color:#8d876f}
.remix-pick[aria-current=true]{background:#f4f5e8;border-color:#77896d;box-shadow:inset 3px 0 #77896d}
.remix-swatch{width:48px;height:58px;flex:0 0 48px;display:grid;place-items:center;border-radius:10px;background:#ede4cb;overflow:hidden}
.remix-swatch[data-theme=starpost_rooftop]{background:#424961}.remix-swatch[data-theme=rain_bookshop]{background:#c8d4c8}
.remix-swatch img,.sample-link img{width:48px;height:60px;object-fit:contain;flex-shrink:0}
.remix-pick-copy{display:grid;gap:4px;min-width:0;flex:1}.remix-pick strong,.sample-link strong{font-size:16px;line-height:1.4;font-weight:650}
.remix-pick-copy>span{font-size:13px;line-height:1.5;color:var(--showcase-muted)}
[data-remix-stat]{font-size:12px;color:#546a52;line-height:1.4;font-variant-numeric:tabular-nums}[data-remix-stat]:empty{display:none}
.sample-arrow{font-size:19px;color:#8c795e;flex:0 0 auto}
.showcase-list-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;font-size:12px;line-height:1.6;color:var(--showcase-muted)}
#showcase-all{flex-shrink:0;border:0;padding:8px 0;background:none;color:#586e55;text-decoration:underline;text-underline-offset:4px;font:600 14px system-ui}
.showcase-more{margin-top:auto;border-top:1px solid var(--showcase-line);padding-top:18px;display:grid;gap:8px}.showcase-more h2{margin:0 0 4px!important;font-size:21px!important}
.sample-link{padding:8px 12px;background:transparent}.sample-link>span:not(.sample-arrow){flex:1;min-width:0;display:grid;gap:4px}.sample-link small{font-size:13px;line-height:1.5;color:var(--showcase-muted)}
.showcase-coming{padding:22px 0}.showcase-coming p{font-size:16px;line-height:1.8;color:var(--showcase-muted);max-width:25em}.remix-coming-label{display:inline-block;border:1px dashed #b4a386;border-radius:12px;padding:12px 16px;margin:12px 0 0;font-size:15px;background:#fffaf080}.showcase-try{font-size:14px;line-height:1.8;color:#566c53;text-underline-offset:5px}
.showcase-coming-button{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:16px;z-index:8;padding:10px 16px;min-height:44px;border:1px solid #b4a38677;background:#fffaf0ed;border-radius:24px;color:#786b57;font:600 14px system-ui;cursor:default}
#play-showcase :focus-visible{outline:3px solid #b28a42;outline-offset:4px}
@media(min-width:1101px){
 body:not([data-view=landscape]){display:grid;grid-template-columns:minmax(220px,300px) auto minmax(285px,340px);gap:clamp(28px,3.3vw,64px);padding:32px;max-width:1400px;margin-inline:auto;justify-content:center;align-content:center}
 body:not([data-view=landscape]) .intro{width:auto;min-width:0}
 body:not([data-view=landscape]) #phone{height:min(90dvh,880px);width:auto;max-width:none}
}
@media(min-width:761px) and (max-width:1100px){
 body:not([data-view=landscape]){display:grid;grid-template-columns:auto minmax(280px,340px);gap:30px;padding:24px;align-content:center}
 body:not([data-view=landscape]) .intro{display:none}
 body:not([data-view=landscape]) #phone{height:min(90dvh,880px);max-width:none}
}
@media(max-width:760px){
 #play-showcase{max-width:520px;margin:0 auto;padding:32px 20px 36px;min-height:0;gap:28px;background:#ebe5d7}
 .showcase-coming{padding:0}.showcase-more{margin-top:0}#showcase-remixes{grid-template-columns:1fr}
}
body[data-view=landscape]{max-width:none;margin:0}
body[data-view=landscape] #play-showcase,body:fullscreen #play-showcase{display:none}
@media(prefers-reduced-motion:reduce){.remix-pick,.sample-link{transition:none}}