/* Scene preview and operating data use the shell's theme tokens. */
.scene-workspace:not([hidden]){display:flex;align-items:stretch;justify-content:center;overflow:auto;min-height:0;padding:0 6px;scrollbar-width:thin}.scene-workspace #scenePreview{width:min(100%,370px);display:flex;flex-direction:column;align-items:stretch;min-height:0}.scene-kicker{font-size:10px;font-weight:700;letter-spacing:.09em;color:var(--p-500)}.scene-demo{font-size:10px;color:var(--n-500);border:1px solid var(--n-200);background:color-mix(in srgb,var(--n-0) 60%,transparent);padding:5px 8px;border-radius:20px;white-space:nowrap}.scene-hint{font-size:11px;color:var(--n-500);text-align:center;margin:10px 0}.scene-phone{width:min(100%,300px);height:min(570px,calc(100dvh - 280px));min-height:340px;align-self:center;border:6px solid #19212e;border-radius:28px;background:#fff;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 15px 35px #152d4930;color:#1b2738;font-family:Arial,sans-serif}.scene-phone-top{height:24px;flex:none;padding:6px 13px 2px;display:flex;justify-content:space-between;font-size:9px;background:#fff}.scene-phone-scroll{overflow:auto;scrollbar-width:none;flex:1;background:#f7f8fb}.scene-phone-scroll::-webkit-scrollbar{display:none}.scene-phone-bar{width:80px;height:3px;border-radius:4px;background:#20252d;margin:5px auto 4px;flex:none}.categories{padding:7px;background:#fff}.search{background:#edf0f4;color:#909aa9;display:flex;align-items:center;gap:8px;font-size:10px;padding:7px}.search b{margin-left:auto;color:#627083}.anchor{background:white;padding:8px}.game-banner{background:linear-gradient(120deg,#5a38b3,#e87568);color:white;padding:10px}.game-banner strong,.game-banner small{display:block}.game-banner strong{font-size:11px}.game-banner small{font-size:8px;margin-top:4px}
.scene-result-row{margin-top:15px}.scene-result-card{min-width:0;width:min(100%,760px);border:1px solid var(--n-200);border-radius:16px;background:var(--n-0);color:var(--n-600);overflow:hidden;box-shadow:0 5px 20px color-mix(in srgb,var(--n-500) 6%,transparent)}.scene-detail-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:20px 20px 16px;background:color-mix(in srgb,var(--p-50) 38%,transparent)}.scene-detail-top h3{font-size:17px;margin:7px 0 5px}.scene-detail-top p,.scene-section-note{font-size:11px;line-height:1.6;color:var(--n-500);margin:0}.scene-detail-section{padding:17px 20px;border-top:1px solid var(--n-150)}.scene-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:11px}.scene-section-head h4{font-size:13px;margin:0}.scene-section-head small{font-size:10px;color:var(--n-500)}.scene-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}.scene-metrics>div{background:color-mix(in srgb,var(--n-150) 38%,transparent);border-radius:9px;padding:10px 11px;min-width:0}.scene-metrics span,.scene-metrics strong{display:block}.scene-metrics span{font-size:10px;color:var(--n-500)}.scene-metrics strong{font-size:17px;margin-top:6px;white-space:nowrap}.scene-component-list{margin-top:11px;border:1px solid var(--n-200);border-radius:10px;overflow:hidden}.scene-component-list button{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:transparent;color:var(--n-600);border:0;border-bottom:1px solid var(--n-150);padding:10px}.scene-component-list button:last-child{border-bottom:0}.scene-component-list button:hover{background:var(--p-50)}.scene-component-icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:8px;background:var(--p-50);color:var(--p-500)}.scene-component-list button>span:nth-child(2){flex:1;min-width:0}.scene-component-list b,.scene-component-list small{display:block}.scene-component-list b{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scene-component-list small{font-size:10px;color:var(--n-500);margin-top:3px}.scene-component-number{text-align:right}.scene-chevron{color:var(--n-400);font-size:19px}.scene-back{border:0;background:transparent;color:var(--p-500);font-size:11px;padding:13px 20px 0}.scene-strategy{border:1px solid var(--n-200);border-radius:10px;padding:12px;background:color-mix(in srgb,var(--n-150) 23%,transparent)}.scene-strategy>div{display:flex;justify-content:space-between;gap:8px;font-size:12px}.scene-strategy>div span{font-size:10px;color:#2b9a70}.scene-strategy p,.scene-strategy small,.scene-disclaimer{font-size:10px;color:var(--n-500);line-height:1.6}.scene-strategy p{margin:7px 0 2px}.scene-strategy p span{padding:0 4px}.scene-empty{text-align:center;padding:22px;border:1px dashed var(--n-200);border-radius:10px;font-size:11px;color:var(--n-500)}.scene-disclaimer{margin:12px 0 0}
@media(max-width:760px){.scene-workspace #scenePreview{width:100%}.scene-phone{height:min(500px,calc(100dvh - 250px));min-height:300px}.scene-detail-top,.scene-detail-section{padding:13px}.scene-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.scene-metrics strong{font-size:15px}}
@media(max-width:580px){.scene-workspace:not([hidden]){overflow:auto}.scene-phone{min-height:280px;height:320px}.scene-hint{margin:5px}.scene-result-row{margin-top:8px}}
@media(max-width:900px){.workspace.scene-mode{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(220px,52%) minmax(0,1fr);gap:12px;padding:12px}.workspace.scene-mode>.interaction-area{overflow:auto}.workspace.scene-mode>.conversation{padding-top:0}.workspace.scene-mode .scene-workspace #scenePreview{max-width:420px}.workspace.scene-mode .scene-phone{height:350px;min-height:300px}.workspace.scene-mode .composer-mascot{display:none}}
@media(max-width:900px){html #appShell .workspace.scene-mode{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(220px,52%) minmax(0,1fr)!important;gap:12px!important;padding:12px!important}}
/* BingoPlus preview: phone navigation is the only page switcher. */
.scene-workspace:not([hidden]){align-items:center}.scene-workspace #scenePreview{align-items:center;justify-content:center}.scene-phone{width:min(100%,330px);height:min(690px,calc(100dvh - 150px));min-height:360px}.scene-phone-scroll{background:#f6f6f8}.scene-reference{position:relative;width:100%;line-height:0}.scene-reference img{display:block;width:100%;height:auto}.scene-region{position:absolute;display:block;margin:0;padding:0;border:2px solid transparent;border-radius:5px;background:transparent;cursor:pointer}.scene-region:hover,.scene-region:focus-visible{outline:none;border-color:#4b8af1}.scene-region.is-selected{border-color:#3479e8;box-shadow:0 0 0 2px #3479e855}.scene-app-nav{position:relative;flex:none;width:100%;line-height:0;background:#69429e}.scene-app-nav>img{display:block;width:100%;height:auto}.scene-app-nav>div{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr)}.scene-app-nav button{width:100%;height:100%;padding:0;border:0;background:transparent;border-radius:0}.scene-app-nav button:focus-visible{outline:2px solid white;outline-offset:-3px}.scene-phone-bar{margin:4px auto}
@media(max-width:900px){.workspace.scene-mode .scene-phone{height:min(570px,calc(100dvh - 140px));min-height:340px}}

/* Keep the assistant identity clear of the adjacent message. */
#appShell .conversation .assistant-row .identity{flex:0 0 80px;width:80px}
@media(max-width:760px){#appShell .conversation .assistant-row .identity{flex-basis:70px;width:70px}}
/* Size the scene column around the preview, and let the phone grow with the window. */
@media(min-width:901px){
 html #appShell .workspace.scene-mode{grid-template-columns:clamp(320px,31vw,500px) minmax(0,1fr)!important;gap:clamp(20px,2.5vw,40px)!important}
 .scene-workspace #scenePreview{width:100%;max-width:none}
 .scene-workspace .scene-phone{height:auto;aspect-ratio:13/25;width:min(100%,426.4px,calc((100dvh - 160px)*.52));min-height:0}
}

@media(max-width:900px){
 .workspace.scene-mode .scene-phone{height:auto;aspect-ratio:13/25;width:min(100%,296.4px,calc((100dvh - 100px)*.2704 - 15.6px));min-height:0;flex-shrink:0}
}

/* Use complete source sections so no screenshot crop can split a game card. */
.scene-phone-scroll{min-height:0}
.scene-home-page{width:100%;background:#f6f6f8;line-height:0}
.scene-home-page img{display:block;width:100%;height:auto}
.scene-home-recent{position:relative;margin-top:.37%}

.scene-home-page .scene-home-banner,.scene-home-page .scene-home-featured{box-sizing:border-box;padding:0 1.86%;margin-top:1.86%}
.scene-home-categories{display:flex;align-items:stretch;gap:1.12%;padding:1.49% 2.24%;margin-top:1.86%}
.scene-home-categories .scene-home-slots{width:25.5%;flex:none}.scene-home-slots img{height:100%;object-fit:fill}
.scene-home-categories>div:not(.scene-home-slots){flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}

/* Align the scene card with the shared tokens: 11px minimum type, token radii, semantic colours. */
.scene-hint{margin:12px 0 0;font-size:var(--fs-xs);color:var(--n-500);text-align:center}
.scene-phone{box-shadow:var(--shadow-lg)}
.scene-region:hover,.scene-region:focus-visible{border-color:var(--p-400)}
.scene-region.is-selected{border-color:var(--p-600);box-shadow:0 0 0 2px color-mix(in srgb,var(--p-600) 30%,transparent)}
.scene-result-card{width:min(100%,680px);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);color:var(--n-700)}
.scene-detail-top{padding:16px 18px 14px;background:transparent}
.scene-detail-top h3{font-size:var(--fs-lg);font-weight:600;color:var(--n-800);margin:6px 0 4px}
.scene-detail-top p,.scene-section-note{font-size:var(--fs-xs);color:var(--n-500)}
.scene-kicker{font-size:var(--fs-xs);font-weight:500;letter-spacing:0;color:var(--n-500)}
.scene-demo{font-size:var(--fs-xs);color:var(--a-700);background:var(--a-50);border:1px solid var(--a-200);border-radius:999px;padding:2px 10px}
.scene-detail-section{padding:14px 18px;border-top:1px solid var(--n-150)}
.scene-section-head{margin-bottom:10px}
.scene-section-head h4{font-size:var(--fs-md);font-weight:600;color:var(--n-700)}
.scene-section-head small{font-size:var(--fs-xs)}
.scene-metrics>div{background:var(--n-50);border:1px solid var(--n-200);border-radius:var(--radius-md);padding:10px 12px}
.scene-metrics span{font-size:var(--fs-xs)}
.scene-metrics strong{font-size:var(--fs-xl);font-weight:600;color:var(--n-800);margin-top:4px;font-variant-numeric:tabular-nums}
.scene-component-list,.scene-strategy,.scene-empty{border-radius:var(--radius-md)}
.scene-component-list b{font-size:var(--fs-sm);font-weight:600;color:var(--n-700)}
.scene-component-list small{font-size:var(--fs-xs)}
.scene-component-number b{font-variant-numeric:tabular-nums}
.scene-component-icon{border-radius:var(--radius-sm);color:var(--p-600)}
.scene-back{font-size:var(--fs-sm);color:var(--p-600);padding:12px 18px 0}
.scene-back:hover{color:var(--p-700)}
.scene-strategy{background:var(--n-50)}
.scene-strategy>div{font-size:var(--fs-sm);align-items:center}
.scene-strategy>div span{font-size:var(--fs-xs);color:var(--g-700);background:var(--g-50);border:1px solid var(--g-100);border-radius:999px;padding:1px 8px}
.scene-strategy p,.scene-strategy small,.scene-disclaimer,.scene-empty{font-size:var(--fs-xs)}
@media(max-width:760px){.scene-detail-top,.scene-detail-section{padding:12px}.scene-metrics strong{font-size:var(--fs-lg)}}

.scene-shot{position:relative;line-height:0}

/* Wide screens: keep the phone column and the chat column together in the middle, card as wide as the composer. */
@media(min-width:901px){html #appShell .workspace.scene-mode{grid-template-columns:clamp(320px,31vw,500px) minmax(0,960px)!important;justify-content:center!important}}
.scene-result-card{width:100%}