/* Production Toy Box: one equal-square 3 × 3 grid fits the available page.
   Keep the shelf and Back controls outside its flexible viewport. This file is
   loaded last by index.html, so game-specific banner rules must not change
   a tile's grid span, minimum height or aspect ratio. */
.toy-box-dialog{
 height:min(900px,96dvh);max-height:96dvh;overflow:hidden;
 grid-template-rows:auto clamp(64px,14dvh,126px) minmax(0,1fr);
}
.toy-box-dialog[open]{display:grid}
.toy-box-header{padding:8px 12px;gap:12px;min-height:60px}
.toy-box-header h2{font-size:clamp(25px,5vw,38px)}
.toy-box-hero{height:auto;min-height:0}
.toy-box-body{
 min-height:0;display:flex;flex-direction:column;overflow:hidden;
 padding:10px 12px max(12px,env(safe-area-inset-bottom));
}
.toy-box-grid-viewport{
 position:relative;flex:1;min-width:0;min-height:0;container-type:size;
}
.toy-box-grid{
 position:absolute;inset:0;margin:auto;padding:0;
 width:min(100%,calc(96dvh - 260px));height:auto;aspect-ratio:1;
 min-width:0;min-height:0;max-width:100%;max-height:100%;
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 grid-template-rows:repeat(3,minmax(0,1fr));gap:7px;
 overflow:visible;flex:none;
}
@supports(width:1cqh){
 .toy-box-grid{width:min(100cqw,100cqh);height:min(100cqw,100cqh)}
}
.toy-box-grid>.toy-box-tile{
 grid-column:auto;grid-row:auto;min-width:0;min-height:0;
 width:100%;height:100%;aspect-ratio:1;border-radius:13px;
}
.toy-box-tile span{
 position:absolute;bottom:0;left:0;width:100%;
 font-size:clamp(12px,2.8vw,19px);line-height:1.1;
 padding:24px 6px 7px;background:linear-gradient(transparent,#152e30e8);
}
.toy-box-shelf{flex:none;min-height:40px;padding:8px;margin:8px 0 0}
.toy-box-back{position:relative;flex:none;min-height:44px;padding:8px;margin-top:8px;font-size:18px}
@media(max-height:420px) and (orientation:landscape){
 .toy-box-dialog{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:44px minmax(0,1fr)}
 .toy-box-header{grid-column:1;min-height:0;padding:0 8px;gap:8px}
 .toy-box-header h2{font-size:24px}
 .toy-box-hero{grid-column:2;grid-row:1}
 .toy-box-body{grid-column:1/-1;grid-row:2;padding:6px 12px max(6px,env(safe-area-inset-bottom))}
 .toy-box-shelf{min-height:36px;padding:5px;margin-top:4px;font-size:14px}
 .toy-box-back{min-height:40px;padding:6px;margin-top:4px;font-size:16px}
 .toy-box-tile span{font-size:11px;padding:16px 4px 4px}
}

/* Existing banner art stays unchanged; the focus target tracks its center-cover crop. */
.toy-box-hero{position:relative}.toy-box-rally-car{position:absolute;padding:0;min-width:0;border:0;background:transparent;border-radius:10px;cursor:pointer}.toy-box-rally-car:focus-visible{outline:3px solid #214f3e;outline-offset:2px;box-shadow:0 0 0 5px #fff2cb}.toy-box-rally-car[aria-busy="true"]{cursor:progress;outline:2px dashed #fff2cb}.toy-box-rally-status{font:14px/1.4 system-ui;margin:0 0 8px;color:#244b4c}

.toy-box-tile[data-toy-game=toy-box-rally]{background-color:#c6a778;background-size:contain;background-position:center 38%;background-repeat:no-repeat}

/* Private turn attention appears on its one destination, never in a room header. */
.toy-box-tile[data-toy-game=rps] .toy-box-rps-waiting{
 position:absolute;z-index:2;top:8px;right:8px;display:grid;place-items:center;
 min-width:27px;height:27px;padding:0 6px;border:2px solid #fff6df;border-radius:999px;
 background:#a62c35;color:#fff;font:800 13px/1 system-ui,sans-serif;
 box-shadow:0 2px 5px #35231955;pointer-events:none;
}
.toy-box-tile[data-toy-game=rps].has-rps-waiting .toy-box-new{left:8px;right:auto}