/* A game URL is the play destination. The WASM runtime still lives in its isolated /play frame. */
.playable-game{padding-block:22px 36px}
.playable-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:10px 0 20px}
.playable-heading h1{font-size:clamp(28px,4vw,44px);line-height:1.14;margin:4px 0}
.playable-heading .eyebrow{margin:0}
.playable-favorite{font-size:30px;border:1px solid var(--line);border-radius:50%;height:46px;width:46px;flex:none}
.inline-layout{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:22px;align-items:start}
.inline-primary,.inline-game-aside{min-width:0}
.inline-player-shell{position:relative;width:100%;height:clamp(380px,68dvh,755px);overflow:hidden;background:#080e13;color:#fff;border:1px solid #32443a;border-radius:14px;isolation:isolate}
.inline-play-poster,.inline-player-frame-host{position:absolute;inset:0}
.inline-player-shell [hidden]{display:none!important}
.inline-preview-background{position:absolute;inset:-7%;overflow:hidden;background:#17251e;z-index:0}
.inline-preview-background::after{content:"";position:absolute;inset:0;background:#07110db3}
.inline-preview-background-video{width:100%;height:100%;object-fit:cover;filter:blur(34px) brightness(.7);transform:scale(1.12);opacity:0;transition:opacity .45s ease}
.inline-preview-background.preview-playing .inline-preview-background-video{opacity:.85}
.inline-play-poster{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:28px;padding:28px}
.inline-play-poster .cover-art{position:relative;width:100%;aspect-ratio:4/3;border-radius:9px;z-index:2}
.inline-play-poster .cover-art img,.inline-play-poster .cover-art video{object-fit:contain}
.inline-play-scrim{position:absolute;inset:0;background:linear-gradient(90deg,#0b151233,#0a1511cc);z-index:1}
.inline-play-prompt{position:relative;display:flex;align-items:flex-start;flex-direction:column;gap:16px;text-align:left;z-index:3;min-width:0}
.inline-platform{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#c1d8bd}
.inline-play-prompt .inline-play-title{font-size:clamp(24px,2.5vw,36px);font-weight:700;line-height:1.22;color:#fff;overflow-wrap:anywhere;text-wrap:balance}
.inline-player-shell[data-phase="idle"]{height:auto}
.detail-resume-info{display:flex;align-items:center;gap:12px;font-size:11px;color:#cad8ca;line-height:1.5}
/* Keep one accessible page heading while its visible title sits beside the
 * preview. Restore the page heading when the poster gives way to gameplay. */
.playable-game:has(.inline-layout:not(.inline-layout-active))>.playable-heading{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.inline-play-prompt .playable-heading{width:100%;margin:0;align-items:flex-start}
.inline-play-prompt .playable-heading>div{min-width:0}
.inline-play-prompt .playable-favorite{color:#d2e3bb;border-color:#637d68}
.inline-play-actions{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:12px}
.inline-play-actions .button{font-weight:700;min-height:48px;padding:12px 24px;border-radius:9px;white-space:normal}
.inline-play-actions #detail-continue{background:#d2e3bb;color:#16221a}
.inline-play-actions #play-link{background:#d2e3bb;color:#16221a}
.inline-play-actions:has(#detail-continue:not([hidden])) #play-link{background:#253c2f;color:#e8f4df;border:1px solid #819b7b}
.inline-play-promise{max-width:460px;color:#cad8ca;font-size:12px;line-height:1.5}
.inline-play-prompt .detail-continue-preview{width:76px;flex:none;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:2px solid #d2e3bb}
.inline-player-frame-host iframe{display:block;width:100%;height:100%;border:0;background:#0a1115}
.inline-player-after{min-height:26px;display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:10px;color:var(--muted);font-size:12px;flex-wrap:wrap}
.inline-player-after p{margin:0}
.inline-player-after a{font-weight:600}
.inline-game-description{margin-top:28px}
.inline-game-description h2,.inline-game-notes h2{font-size:22px;margin-bottom:10px}
.inline-game-description .detail-description{max-height:none;overflow:visible;font-size:14px;line-height:1.8;margin:0}
.inline-game-aside{display:grid;gap:18px}
.inline-information,.inline-game-hint{padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.inline-information .eyebrow{margin:0 0 12px}
.inline-information .detail-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.inline-information .detail-badges span{font-size:11px;padding:6px 9px}
.inline-information select{max-width:100%;width:100%;min-width:0}
.inline-information .source-details{font-size:11px;margin-top:14px;overflow-wrap:anywhere}
.inline-information .source-details strong{overflow-wrap:anywhere}
.inline-information .support-summary{display:grid;grid-template-columns:1fr;gap:3px;margin:16px 0 8px}
.inline-information .support-summary>div{display:flex;align-items:start;justify-content:space-between;gap:8px}
.inline-information .support-summary dt,.inline-information .support-summary dd{font-size:11px;margin:0}
.inline-information .support-summary dd{text-align:right;max-width:55%;overflow-wrap:anywhere}
.inline-information #capability-note{font-size:10px;line-height:1.5}
.inline-game-hint h2{font-size:17px;line-height:1.3;margin:0 0 10px}
.inline-game-hint p{font-size:12px;line-height:1.6;color:var(--muted)}
.inline-game-hint a{display:inline-block;font-size:12px;margin-top:8px}
.inline-game-notes{padding-bottom:28px}
.inline-game-notes .multiline{white-space:pre-line;line-height:1.7}
.unsupported-detail .detail-copy{display:grid;gap:16px}
.inline-immersive-exit{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));z-index:10;width:44px;height:44px;border:1px solid #869a88;border-radius:50%;background:#14251ce0;color:white;font-size:26px;cursor:pointer}
body.inline-playing-immersive{overflow:hidden}
body.inline-playing-immersive .inline-player-shell{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-height:none!important;border:0;border-radius:0;z-index:3000}
body.inline-playing-immersive .inline-player-frame-host{inset:0}
@media(max-width:1040px){.inline-layout{grid-template-columns:minmax(0,1fr) 225px;gap:16px}.inline-information,.inline-game-hint{padding:15px}}
@media(max-width:820px){.inline-layout{grid-template-columns:minmax(0,1fr)}.inline-game-aside{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.inline-player-shell{height:min(67dvh,660px)}}
@media(max-width:650px){.playable-game{padding-block:14px 25px}.playable-heading{margin:8px 0 12px}.inline-player-shell{height:clamp(340px,68dvh,700px);border-radius:8px}.inline-play-poster{grid-template-columns:1fr;gap:20px;padding:16px}.inline-play-prompt{padding:0 4px 8px}.inline-game-aside{grid-template-columns:1fr}.inline-play-prompt .inline-play-title{font-size:clamp(23px,7vw,34px)}.inline-game-description{margin-top:20px}.inline-play-prompt{gap:12px}.inline-player-after{font-size:11px}}
@media(orientation:landscape) and (max-height:540px){.inline-player-shell{height:calc(100dvh - 55px);min-height:210px}.inline-play-prompt{gap:7px}.inline-play-prompt .inline-play-title{font-size:22px}}
@media(prefers-reduced-motion:reduce){.inline-play-actions .button{transition:none}}

/* Closing returns to the playable poster on the same URL. Hidden in immersive
 * mode where the child player already owns a single visible Exit control. */
.inline-close-game{position:absolute;top:max(9px,env(safe-area-inset-top));left:max(9px,env(safe-area-inset-left));z-index:12;width:44px;height:44px;border:1px solid #869a88;border-radius:50%;background:#14251ce0;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.inline-close-game,.inline-immersive-exit{display:grid;place-items:center;padding:0;line-height:1}
.inline-close-icon{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.inline-close-game:hover,.inline-close-game:focus-visible{background:#365e46;outline:2px solid #d2e3bb;outline-offset:2px}


/* Once playback starts, the game surface becomes the detail page's only primary
 * object. Metadata stays available through the game page, but should not squeeze
 * the canvas into a side column while a player is active. */
.inline-layout.inline-layout-active{display:block}
.inline-layout.inline-layout-active .inline-game-aside{display:none}
.inline-layout.inline-layout-active .inline-player-after,.inline-layout.inline-layout-active .inline-game-description{display:none}