/* R7: the Play Room. Actual game previews, one live sandbox, ten worlds. */
#panel-playable,#panel-playable:has(.landscape){display:block;padding:0;min-height:0;border:1px solid #ded5e6;border-radius:32px;background:#f9f5fc;overflow:hidden}
#panel-playable .playable-intro,#panel-playable:has(.landscape) .playable-intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.7fr);align-items:end;gap:0 60px;padding:44px 49px 40px}
#panel-playable .playable-intro .eyebrow{grid-column:1/-1;color:#8b719d;font-size:12px;letter-spacing:.075em}
#panel-playable .playable-intro h3,#panel-playable:has(.landscape) .playable-intro h3{grid-column:1;grid-row:2;font:800 clamp(3.1rem,4.5vw,4.8rem)/1.02 'Bricolage Grotesque',sans-serif;letter-spacing:-.055em;margin:20px 0 0;color:#302538;max-width:660px}
#panel-playable .playable-intro h3>span{color:#9265b1;display:inline}
#panel-playable .playable-intro h3 br{display:block}
#panel-playable .playroom-intro-note{grid-column:2;grid-row:2;padding-bottom:5px}
#panel-playable .playroom-intro-note>p{font:400 16px/1.7 'DM Sans',sans-serif;color:#8b7698;max-width:310px;margin:0}
#panel-playable .playroom-intro-note .text-button{display:flex;gap:17px;align-items:center;justify-content:space-between;width:100%;margin-top:23px;padding-top:20px;border-top:1px solid #dfd2e8;font:600 15px 'DM Sans',sans-serif;color:#624372;text-align:left;background:none;border-radius:0}
#panel-playable .playroom-intro-note .text-button>span{font-size:24px}
#panel-playable .playroom-theatre{display:grid;grid-template-columns:minmax(0,1fr) 304px;margin:0 19px 19px;border:1px solid #66547526;border-radius:23px;overflow:hidden;background:#eee7f4;min-width:0}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen){grid-column:1;grid-row:1;position:relative;align-self:stretch;min-height:735px;padding:63px 35px 28px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#28232c;overflow:hidden;isolation:isolate}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen):before{inset:0;content:'';border:0;border-radius:0;transform:none;box-shadow:none;z-index:-1;background:linear-gradient(150deg,#34283a66,#211c26db 90%);pointer-events:none}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen):after{content:none}
.playroom-backdrop{position:absolute;inset:-8%;width:116%;height:116%;max-width:none;object-fit:cover;filter:blur(45px) saturate(.6);opacity:.42;z-index:-2;pointer-events:none}
.playroom-stage-top{position:absolute;left:25px;right:25px;top:22px;display:flex;align-items:center;justify-content:space-between;gap:18px;font:500 10px/1.4 'DM Sans',sans-serif;letter-spacing:.1em;color:#d4c4df;z-index:2}
.playroom-stage-top>span:first-child{display:flex;gap:9px;align-items:center}.playroom-stage-top i{height:6px;width:6px;border-radius:50%;background:#c8f796;box-shadow:0 0 11px #b0ee7844}
.playroom-stage-top>span:last-child{font-size:11px;letter-spacing:.025em;color:#bba7c9}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .playable-phone{width:288px;height:570px;max-width:100%;padding:8px;border:2px solid #b4a6b7;border-radius:42px;background:linear-gradient(135deg,#b4a7bd,#4a404f 18%,#312b37 80%,#9c90a4);transform:rotate(-2deg);box-shadow:0 23px 55px #0c051f70,0 3px 0 #17141e,0 0 0 1px #302634;transition:transform .3s ease}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .playable-phone.is-playing{transform:none}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-screen{border-radius:30px;clip-path:inset(0 round 30px)}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-idle{padding:0}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-idle img{object-position:center;filter:brightness(.78)}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-idle:after{background:linear-gradient(180deg,transparent 15%,#18122533 65%,#1b0f2e77)}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-idle>span,#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-idle>b,#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-idle>small{display:none}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-play{bottom:43px;min-height:48px;padding:14px 24px;background:#ceff91;color:#324521;border:1px solid #e3ffbd;font-size:14px;box-shadow:0 6px 25px #140e2966}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-demo-controls{margin:23px 0 0;padding:0;max-width:620px;position:relative}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-demo-controls strong{font:650 23px/1.2 'Bricolage Grotesque',sans-serif;color:#f2e9fa;letter-spacing:-.035em}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-demo-controls>p{font:13px/1.55 'DM Sans',sans-serif;color:#b6a3c6;max-width:430px;margin:8px auto 14px}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-demo-controls>div{flex-wrap:wrap;gap:8px}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-demo-controls button{min-height:42px;padding:10px 16px;border:1px solid #786886;border-radius:30px;background:#332c3c;color:#d6c5e3;font-size:12px}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-demo-controls #phoneExpand{background:#eee4f7;border-color:#eee4f7;color:#5c3d76}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-demo-controls button:hover{background:#564163;border-color:#a088b3;color:#fff}
#panel-playable .playroom-theatre .playable-selector,#panel-playable:has(.landscape) .playroom-theatre .playable-selector{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:25px 19px 18px;border:0;border-left:1px solid #dbcee3;background:#f1eaf7;min-width:0;align-self:stretch}
.playroom-shelf-heading{display:flex;align-items:center;justify-content:space-between;gap:13px;margin:1px 4px 22px}
.playroom-shelf-heading .eyebrow{font-size:8px;letter-spacing:.065em;color:#a18aad}.playroom-shelf-heading h4{font:650 28px/1.02 'Bricolage Grotesque',sans-serif;letter-spacing:-.035em;color:#6e4e84;margin-top:11px}
.playroom-total{font:500 52px/.9 'Bricolage Grotesque',sans-serif;letter-spacing:-.065em;color:#c1a5d1}
#panel-playable .playroom-theatre .phone-game-list{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:72px;gap:8px;max-height:604px;overflow:auto;overscroll-behavior:contain;padding:3px 5px 6px 3px;scrollbar-width:thin;scrollbar-color:#bfa7ce transparent}
#panel-playable .playroom-theatre .phone-game-list button{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:11px;min-height:72px;min-width:0;padding:8px;background:#f8f4fb;border:1px solid #e3d7ec;border-radius:13px;box-shadow:none;transition:background .2s,border-color .2s,transform .2s}
#panel-playable .playroom-theatre .phone-game-list button:hover{background:#ece0f5;border-color:#c9afda;transform:translateX(-2px)}
#panel-playable .playroom-theatre .phone-game-list button[aria-pressed=true]{background:#dae9c4;border-color:#aec789;box-shadow:0 0 0 2px #bfd79755}
#panel-playable .playroom-theatre .phone-game-list i{width:48px;height:54px;flex-basis:48px;border-radius:8px}
#panel-playable .playroom-theatre .phone-game-list i img{filter:none;object-fit:cover;object-position:center}.phone-game-list i>span{display:none}
#panel-playable .playroom-theatre .phone-game-list b{font:600 13px/1.3 'DM Sans',sans-serif;color:#735687;white-space:normal}
#panel-playable .playroom-theatre .phone-game-list small{font-size:10px;line-height:1.3;color:#a78eb7;margin-top:5px}
#panel-playable .playroom-theatre .phone-game-list em{display:block;position:static;letter-spacing:.04em;color:#ad97bc;font:600 8px/1 'DM Sans',sans-serif;margin:0}
#panel-playable .playroom-theatre .phone-game-list button[aria-pressed=true] b{color:#536b37}#panel-playable .playroom-theatre .phone-game-list button[aria-pressed=true] small{color:#839967}
#panel-playable .playroom-theatre .demo-note{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 3px 0;margin:0;font:11px/1.5 'DM Sans',sans-serif;color:#a68ab7;transform:none;text-align:left}
#panel-playable .playroom-theatre .demo-note>span{font-size:26px;color:#bea2cd}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .playable-phone.landscape{width:100%;max-width:850px;height:auto;aspect-ratio:1.84;padding:9px;border-radius:32px;transform:rotate(-1deg)}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .playable-phone.landscape.is-playing{transform:none}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .playable-phone.landscape .phone-screen{border-radius:21px;clip-path:inset(0 round 21px)}
#panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .playable-phone.landscape .phone-play{bottom:29px;min-height:43px}
.phone-expanded-dialog .playroom-backdrop,.phone-expanded-dialog .playroom-stage-top{display:none}

/* Prototype tells one simple story: the brief, then the playable result. */
#panel-prototype{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);background:#f6f2e8;border-color:#e4ddcc;padding:0;gap:0;align-items:stretch}
#panel-prototype .prototype-intro{grid-column:1;grid-row:1;padding:49px 44px;display:flex;align-items:flex-start;justify-content:center}
#panel-prototype .prototype-intro .eyebrow{font-size:11px;color:#8a8d61}
#panel-prototype .prototype-intro h3{font:800 clamp(3.1rem,4.5vw,4.8rem)/1.02 'Bricolage Grotesque',sans-serif;letter-spacing:-.055em;margin:20px 0 24px;color:#333628}
#panel-prototype .prototype-intro h3>span{color:#8b984e}
#panel-prototype .prototype-intro>p{font-size:16px;line-height:1.7;max-width:355px;color:#838068}
.prototype-short-steps{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin:30px 0 33px;color:#8b916d;font:12px 'DM Sans',sans-serif}
.prototype-short-steps>span{display:flex;align-items:center;gap:8px}.prototype-short-steps b{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#e7ebd3;color:#8c9b60;font-weight:500;font-size:10px}.prototype-short-steps i{font-size:21px;font-style:normal;color:#b0b494}
#panel-prototype .prototype-disclosure{font-size:11px;line-height:1.6;color:#a09e88;margin-top:18px;max-width:285px}
#panel-prototype .prototype-workbench{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-self:stretch;padding:30px 33px;background:#e6ead8;border:0;border-left:1px solid #dde1cb;border-radius:0;box-shadow:none;transform:none;max-width:none;width:100%}
#panel-prototype .prototype-workbench-top{font-size:10px;letter-spacing:.065em;color:#8c9970;padding-bottom:17px;border-color:#d0d8bd}.prototype-workbench-top i{color:#a7b58b!important}
#panel-prototype .prototype-workbench-top>span:last-child{font-size:8px;color:#a3ac8c;display:inline}
#panel-prototype .prototype-choices{gap:8px;padding:18px 0}
#panel-prototype .prototype-choices button{font-size:12px;min-height:43px;padding:10px 13px;border-radius:25px;color:#89946e;background:#f1f3e9;border-color:#d7dfc4}
#panel-prototype .prototype-choices button[aria-pressed=true]{background:#465237;color:#eaf2d8;border-color:#465237;box-shadow:none}
#panel-prototype .prototype-choices button>span{color:#a3b187;font-size:16px}
.prototype-example-brief{position:relative;padding:24px 27px;background:#fffef5;border:1px solid #dddcc9;border-radius:3px 19px 19px 19px;box-shadow:0 5px 0 #d1d6c277;transform:rotate(-1deg)}
.prototype-example-brief:before{content:'';position:absolute;left:37px;top:-9px;width:75px;height:20px;background:#d9e3b9a6;transform:rotate(4deg)}
.prototype-example-brief>span{font:600 9px 'DM Sans',sans-serif;letter-spacing:.11em;color:#a0a588;display:block;margin-bottom:13px}
.prototype-example-brief>p{font:500 19px/1.45 'Bricolage Grotesque',sans-serif;letter-spacing:-.025em;color:#778057;max-width:440px}
.prototype-example-brief>i{position:absolute;right:14px;bottom:11px;font:25px 'Bricolage Grotesque',sans-serif;color:#c3c9ac;transform:rotate(-12deg)}
.prototype-to-play{display:flex;align-items:center;justify-content:center;gap:13px;margin:17px 0 13px;color:#9bab77;font-size:28px;line-height:1}
.prototype-to-play>span{font:11px/1.4 'DM Sans',sans-serif;color:#9ba584;letter-spacing:.015em}
#panel-prototype .prototype-scene{height:300px;min-height:300px;flex:none;position:relative;border-radius:18px;overflow:hidden;background:#29351e;isolation:isolate}
#panel-prototype .prototype-cover{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;rotate:0;object-fit:cover;object-position:center 35%;box-shadow:none;z-index:0;filter:brightness(.85)}
#panel-prototype .prototype-scene:after{inset:0;background:linear-gradient(#17261955,transparent 55%,#132313bb);z-index:1}
.prototype-output-label{position:absolute;left:22px;top:21px;z-index:2;color:#fff}
.prototype-output-label>span{font:500 9px 'DM Sans',sans-serif;letter-spacing:.085em;color:#edf7d4b3}.prototype-output-label h4{font:600 29px/1.05 'Bricolage Grotesque',sans-serif;letter-spacing:-.035em;margin-top:9px;color:#f5fae8}
#panel-prototype .prototype-try{position:absolute;left:50%;bottom:24px;translate:-50% 0;z-index:3;min-height:46px;white-space:nowrap;background:#d6f297;border:1px solid #e3ffae;color:#4e642d;border-radius:30px;font-size:13px;gap:10px;padding:14px 23px}
#panel-prototype .prototype-try:hover{background:#e0ffa3;transform:translateY(-2px)}
#panel-prototype .prototype-live{font-size:10px;color:#9aa583;line-height:1.5;margin-top:17px;min-height:15px}
@media(max-width:1100px){
 #panel-playable .playroom-theatre{grid-template-columns:minmax(0,1fr) 268px}
 #panel-playable .playable-intro,#panel-playable:has(.landscape) .playable-intro{gap:0 35px;padding:35px 37px}
 #panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen){padding-inline:23px}
 #panel-playable .playroom-theatre .playable-selector{padding-inline:14px}
 #panel-playable .playroom-theatre .phone-game-list button{gap:9px;grid-template-columns:43px minmax(0,1fr) auto}
 #panel-playable .playroom-theatre .phone-game-list i{width:43px;height:51px}
 #panel-playable .playroom-theatre .phone-game-list b{font-size:12px}
 #panel-prototype .prototype-intro{padding:37px}#panel-prototype .prototype-workbench{padding:25px}
 #panel-prototype .prototype-workbench-top>span:last-child{display:none}
 .prototype-example-brief{padding:22px}.prototype-example-brief>p{font-size:18px}
}
@media(max-width:950px){
 #panel-playable .playable-intro h3,#panel-playable:has(.landscape) .playable-intro h3,#panel-prototype .prototype-intro h3{font-size:3.5rem}
 #panel-playable .playroom-theatre{grid-template-columns:minmax(0,1fr) 250px;margin:0 15px 15px}
 #panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen){padding:60px 16px 25px;min-height:715px}
 #panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .playable-phone{width:265px;height:541px}
 #panel-playable .playroom-intro-note>p{font-size:15px}.playroom-stage-top{left:20px;right:20px;font-size:8px}.playroom-stage-top>span:last-child{display:none}
 #panel-prototype .prototype-intro{padding:32px}#panel-prototype .prototype-choices button{font-size:11px;padding-inline:10px}
 #panel-prototype .prototype-choices button>span{display:none}.prototype-example-brief>p{font-size:17px}
}
@media(max-width:760px){
 #panel-playable,#panel-playable:has(.landscape){border-radius:24px}
 #panel-playable .playable-intro,#panel-playable:has(.landscape) .playable-intro{display:block;padding:33px 28px 29px}
 #panel-playable .playable-intro h3,#panel-playable:has(.landscape) .playable-intro h3,#panel-prototype .prototype-intro h3{font-size:3.6rem;margin:18px 0 22px;line-height:1.02}
 #panel-playable .playroom-intro-note{padding:0}#panel-playable .playroom-intro-note>p{font-size:16px;max-width:100%}
 #panel-playable .playroom-intro-note .text-button{margin-top:21px;padding-top:18px;font-size:14px}
 #panel-playable .playroom-theatre{display:flex;flex-direction:column;margin:0 12px 12px;border-radius:20px}
 #panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen){padding:57px 22px 23px;min-height:0;width:100%}
 #panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .playable-phone{width:276px;height:548px}
 .playroom-stage-top{font-size:9px;top:21px}.playroom-stage-top>span:last-child{display:block;font-size:10px}
 #panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-demo-controls strong{font-size:22px}
 #panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-demo-controls>p{font-size:12px;line-height:1.6;max-width:330px}
 #panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-demo-controls button{font-size:11px;padding:10px 13px}
 #panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .playable-phone.landscape{width:100%;height:auto;aspect-ratio:1.84;padding:6px;border-radius:23px}
 #panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .playable-phone.landscape .phone-screen{border-radius:14px;clip-path:inset(0 round 14px)}
 #panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .playable-phone.landscape .phone-play{min-height:36px;padding:10px 19px;bottom:24px;font-size:12px}
 #panel-playable .playroom-theatre .playable-selector,#panel-playable:has(.landscape) .playroom-theatre .playable-selector{border:0;padding:22px 16px 17px;min-width:0;max-width:100%}
 .playroom-shelf-heading{margin:0 3px 16px;align-items:end}.playroom-shelf-heading h4{font-size:27px;line-height:1.1}.playroom-shelf-heading h4 br{display:none}.playroom-shelf-heading .eyebrow{font-size:8px}.playroom-total{font-size:40px}
 #panel-playable .playroom-theatre .phone-game-list{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:3px 3px 12px;max-width:100%;max-height:none}
 #panel-playable .playroom-theatre .phone-game-list button{min-width:194px;flex:0 0 194px;scroll-snap-align:start;grid-template-columns:43px minmax(0,1fr) auto;min-height:74px}
 #panel-playable .playroom-theatre .phone-game-list button:hover{transform:none}
 #panel-playable .playroom-theatre .demo-note{padding-top:6px;font-size:10px}
 #panel-prototype{grid-template-columns:minmax(0,1fr);border-radius:24px}
 #panel-prototype .prototype-intro{grid-column:1;grid-row:1;padding:33px 28px}
 #panel-prototype .prototype-workbench{grid-column:1;grid-row:2;border:0;border-top:1px solid #dbe0c8;padding:24px}
 #panel-prototype .prototype-workbench-top{font-size:10px}#panel-prototype .prototype-workbench-top>span:last-child{display:inline;font-size:7px}
 #panel-prototype .prototype-choices button{font-size:12px;min-height:44px;padding:11px 12px}
 .prototype-example-brief{padding:23px}.prototype-example-brief>p{font-size:19px}
 #panel-prototype .prototype-scene{height:320px;min-height:320px}#panel-prototype .prototype-try{min-width:0;font-size:13px}
 #panel-prototype .prototype-live{font-size:10px}.prototype-short-steps{font-size:12px;margin:26px 0 29px}
}
@media(max-width:420px){
 #panel-playable .playable-intro,#panel-playable:has(.landscape) .playable-intro,#panel-prototype .prototype-intro{padding:30px 23px}
 #panel-playable .playable-intro h3,#panel-playable:has(.landscape) .playable-intro h3,#panel-prototype .prototype-intro h3{font-size:3.2rem}
 #panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen){padding:55px 15px 23px}
 #panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .playable-phone{width:258px;height:517px}
 #panel-playable .playroom-theatre .phone-demo-stage:not(:fullscreen) .phone-demo-controls button{font-size:10px;padding-inline:10px}
 .playroom-stage-top{left:17px;right:17px;font-size:8px}.playroom-stage-top>span:last-child{font-size:9px}
 #panel-prototype .prototype-workbench{padding:21px}#panel-prototype .prototype-choices button{font-size:11px;padding-inline:10px}
 .prototype-example-brief>p{font-size:18px}#panel-prototype .prototype-try{min-width:0;font-size:12px;padding:13px 21px}.prototype-output-label h4{font-size:28px}
}
@media(prefers-reduced-motion:reduce){#panel-playable .playroom-theatre .playable-phone,#panel-playable .playroom-theatre .phone-game-list button{transition:none}}