.studio-playbox{max-width:900px;margin:30px auto;padding:clamp(20px,4vw,40px);border:1px solid #9e9bae;border-radius:10px;background:#f6efe4;color:#202b42;font:1rem/1.6 system-ui,sans-serif;overflow-wrap:anywhere}.studio-playbox h2,.studio-playbox h3{font-family:Georgia,serif;color:#202b42;line-height:1.15}.studio-playbox h2{font-size:clamp(1.875rem,5vw,2.625rem)}.pb-kicker{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#5d5370;font-weight:700}.pb-note,.pb-replace{background:#e8e7ee;border-left:3px solid #867a98;padding:14px}.pb-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pb-fields label{display:grid;gap:6px;font-weight:650}.pb-fields :is(input,select){box-sizing:border-box;min-width:0;width:100%;min-height:48px;padding:10px;font:inherit;color:#202b42;background:white;border:1px solid #8b8999;border-radius:5px}.pb-place{display:flex;flex-wrap:wrap;gap:16px;border:0;padding:8px 0}.pb-place label{display:flex;align-items:center;gap:6px;min-height:44px}.pb-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:min(100%,420px);gap:5px;touch-action:manipulation}.pb-square{aspect-ratio:1;min-width:0;padding:0!important;background:#e2d9ca!important;color:#7c7584!important;border:1px solid #a9a1a1!important;font:2rem/1 system-ui!important}.pb-square.pb-player{color:#1c5590!important}.pb-square.pb-star{color:#8d620d!important}.pb-square.pb-wall{color:#424151!important}.pb-actions,.pb-directions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.studio-playbox button,.pb-file{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 15px;border:1px solid #41516d;border-radius:5px;background:#1b304a;color:white;font:600 .9375rem/1.3 system-ui;cursor:pointer}.studio-playbox button:hover{background:#304660}.pb-directions button{min-width:76px}.pb-file{display:grid;gap:6px;background:#e9e5dd;color:#202b42}.pb-file input{max-width:100%;font:inherit}.studio-playbox a{color:#234c77;text-decoration:underline}.studio-playbox [hidden]{display:none!important}.studio-playbox :is(button,a,input,select,.pb-board):focus-visible{outline:3px solid #b17c20;outline-offset:3px}.pb-status{min-height:1.5em;font-weight:600}.pb-projects article{margin:12px 0;padding:16px;background:#fffaf2;border:1px solid #b6aab7;border-radius:5px}.pb-projects h3{margin:0}.pb-pip{display:flex;align-items:flex-start;gap:18px}.pb-pip img{object-fit:contain;flex:none}@media(max-width:650px){.pb-fields{grid-template-columns:1fr}.studio-playbox{padding:20px 14px}.pb-pip{display:block}.pb-square{font-size:1.6rem!important}}@media(forced-colors:active){.studio-playbox,.pb-projects article{background:Canvas;color:CanvasText;border-color:CanvasText}.studio-playbox :is(h2,h3,p){color:CanvasText}.pb-square{background:ButtonFace!important;color:ButtonText!important}.studio-playbox button{border-color:ButtonText}}

.rw-dialog[data-studio-view="studio-playbox"] #room-activity>:not(#studio-playbox),.rw-dialog[data-studio-view="studio-learn"] #room-activity>:not(#studio-learn),.rw-dialog[data-studio-view="studio-projects"] #room-activity>:not(#studio-projects),.rw-dialog[data-studio-view="studio-pip-workshop"] #room-activity>:not(#studio-pip-workshop){display:none!important}

.pb-leave{max-width:min(36rem,calc(100% - 32px));padding:24px;border:1px solid #827a87;border-radius:9px;background:#f6efe4;color:#202b42;font:1rem/1.6 system-ui}.pb-leave::backdrop{background:#07101dd9}.pb-leave h2{font-family:Georgia,serif}.pb-leave button{min-height:48px;padding:10px 15px;background:#1b304a;color:#fff;border:1px solid #41516d;border-radius:5px;font:600 1rem system-ui}.pb-leave button:focus-visible{outline:3px solid #b17c20;outline-offset:3px}
.rw-dialog[data-studio-view] .studio-playbox button:not(.pb-square){font-size:.9375rem}
.rw-dialog[data-studio-view] .rw-panel-heading h2{font-size:1.375rem}
.rw-dialog[data-studio-view] .rw-panel-heading button{font-size:.875rem}
@media(max-width:450px){.rw-dialog[data-studio-view] .rw-panel-heading h2{font-size:1.25rem}}
.rw-dialog:not([data-studio-view]) #room-activity>:is(#studio-playbox,#studio-learn,#studio-projects,#studio-pip-workshop){display:none!important}

/* The room stays visible, while the working board has more space on a phone. */
@media(max-width:650px){.rw-dialog[data-studio-view="studio-playbox"] .rw-scene{max-height:72px;overflow:hidden}.rw-dialog[data-studio-view="studio-playbox"] .rw-scene-visual>img{width:100%;height:72px;object-fit:cover;object-position:center 48%}.pb-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pb-fields label:first-child{grid-column:1/-1}.studio-playbox{padding:16px 14px}.studio-playbox h2{margin:4px 0 8px}.studio-playbox>p{margin:8px 0}.pb-place{gap:10px}}
.rw-dialog[data-studio-view] .rw-tool-return{display:none}

.pb-board.pb-complete{outline:3px solid #ba8b3e;outline-offset:6px;border-radius:5px}.pb-board.pb-complete .pb-player{background:#f4d88f!important;color:#203f64!important}

.rw-dialog[data-studio-view="studio-play"] #room-activity>:not(#studio-playbox){display:none!important}
@media(max-width:650px){.rw-dialog[data-studio-view="studio-play"] .rw-scene{max-height:72px;overflow:hidden}.rw-dialog[data-studio-view="studio-play"] .rw-scene-visual>img{width:100%;height:72px;object-fit:cover;object-position:center 48%}}

/* Short landscape: keep the complete board visible and place controls beside it. */
@media (orientation:landscape) and (max-height:500px) and (min-width:480px){
 .rw-dialog:is([data-studio-view="studio-play"],[data-studio-view="studio-playbox"]):has(.studio-playbox[data-playing="true"]) .rw-scene{display:none}
 .rw-dialog.rw-room-frame:is([data-studio-view="studio-play"],[data-studio-view="studio-playbox"]):has(.studio-playbox[data-playing="true"])[open]{grid-template-columns:minmax(0,1fr)}
 .rw-dialog:is([data-studio-view="studio-play"],[data-studio-view="studio-playbox"]):has(.studio-playbox[data-playing="true"]) .rw-panel-heading{padding:4px 12px}
 .rw-dialog:is([data-studio-view="studio-play"],[data-studio-view="studio-playbox"]):has(.studio-playbox[data-playing="true"]) .rw-panel-body{padding:0;max-height:calc(100dvh - 72px)}
 .studio-playbox[data-playing="true"]{display:grid;grid-template-columns:248px minmax(0,1fr);column-gap:18px;align-items:start;margin:0;padding:8px 12px;max-width:none}
 .studio-playbox[data-playing="true"] > *{grid-column:2;margin:0 0 5px}
 .studio-playbox[data-playing="true"] .pb-board{grid-column:1;grid-row:1 / span 8;width:248px;gap:2px}
 .studio-playbox[data-playing="true"] .pb-square{min-height:48px}
 .studio-playbox[data-playing="true"] h2{font-size:1.45rem;margin:0}
 .studio-playbox[data-playing="true"] .pb-kicker{font-size:.7rem}
 .studio-playbox[data-playing="true"] .pb-actions,.studio-playbox[data-playing="true"] .pb-directions{gap:5px;margin:4px 0}
 .studio-playbox[data-playing="true"] .pb-directions button{min-width:64px}
 .studio-playbox[data-playing="true"] .pb-note,.studio-playbox[data-playing="true"] .pb-save,.studio-playbox[data-playing="true"] [data-save-status],.studio-playbox[data-playing="true"] .pb-replace{grid-column:1 / -1}
}
/* Simple toy pieces are working controls, not representations of Garden characters. */
.pb-square.pb-player{position:relative}.pb-square.pb-player[data-piece=diamond]{color:#95630d!important}.pb-square.pb-player::after{content:'••';position:absolute;left:50%;top:50%;transform:translate(-50%,-62%);font:700 .52rem/1 system-ui;letter-spacing:.1rem;color:#fff;pointer-events:none}
@media(forced-colors:active){.pb-square.pb-player[data-piece=diamond]{color:ButtonText!important}.pb-square.pb-player::after{color:Canvas}}
@media (orientation:landscape) and (max-height:360px) and (min-width:480px){
 .rw-dialog:is([data-studio-view="studio-play"],[data-studio-view="studio-playbox"]):has(.studio-playbox[data-playing="true"]) .rw-panel-heading{padding:0 8px}
 .rw-dialog:is([data-studio-view="studio-play"],[data-studio-view="studio-playbox"]):has(.studio-playbox[data-playing="true"]) .rw-panel-body{max-height:calc(100dvh - 60px)}
 .studio-playbox[data-playing="true"]{padding:0 8px}
}
/* Keep the native file control within the work surface when text is enlarged. */
.studio-playbox .pb-file{box-sizing:border-box;min-width:0;max-width:100%;flex:1 1 100%}
.studio-playbox .pb-file input{box-sizing:border-box;min-width:0;width:100%;max-width:100%}