/* The new room surrounds the same deterministic tray and controls. */
.logic-page{background-color:#14352f;background-image:linear-gradient(#14352fb8,#14352fb8),url('/assets/puzzle-room-v4.webp');background-position:center bottom;background-size:cover;background-attachment:fixed;color:#f6ecd4}.logic-page .page{background:transparent}.logic-page .masthead{border-color:#91a18d55}.logic-page .masthead a,.logic-page .intro h1,.logic-page .pitch,.logic-page .intro-rules p,.logic-page .rule-number,.logic-page .tray-select,.logic-page .text-button,.logic-page .puzzle-objective,.logic-page .under-tray,.logic-page .puzzle-bottom{color:#f6ecd4}.logic-page .rule-number{border-color:#d5d8be}.logic-page .icon-button{color:#f6ecd4}.logic-page .gesture-guide{background:#f2e9d8;padding:7px 12px;border-radius:2px;color:#25352a}.logic-page .gesture-guide figcaption{color:#344637}.logic-page .under-tray,.logic-page .puzzle-bottom,.logic-page footer{color:#e0dfc8}.logic-page .under-tray p{color:#f5ecd5}.logic-page .puzzle-result,.logic-page .puzzle-hint{background:#f1e7d1;color:#26382b}.logic-page .puzzle-result .text-button{color:#26382b}.logic-page .save-note{color:#f0d6ba}.logic-page .intro h1 b{color:#ed9e70}.logic-page #panel{color:#272922;background:#f2eada}.logic-page #panel .icon-button{color:#272922}.logic-page ::selection{background:#e9b37b;color:#18372d}.logic-page a:focus-visible,.logic-page button:focus-visible{outline-color:#f0ba81}.logic-page .puzzle-result .secondary{color:#26382b;border-color:#65705c}.logic-page #board:focus-visible{outline-color:#f3c192}.logic-page .tray-number{color:#dfdfc9}.logic-page footer{border-color:#99a28b55}.logic-page #objects-left{color:#e6e2c9}.logic-page .tray-list button{color:#272922}.logic-page .tray-list .best{color:#52604c}
@media(max-width:900px){.logic-page{background-attachment:scroll;background-size:auto 100%;background-position:center top}.logic-page .intro .gesture-guide{padding:0 10px;margin-top:8px}.logic-page .gesture-guide figcaption{font-size:12px}.logic-page .masthead .studio{font-size:12px;letter-spacing:.12em}}

.logic-page #restart,.logic-page .strokes .micro{color:#f6ecd4}.logic-page #pips i{background:#f6ecd4;border-color:#f6ecd4}.logic-page #pips i.spent{background:transparent;border-color:#c4cfb8}.logic-page .icon-button:hover{background:#00000025}

/* One clear gesture explanation gives the phone playfield more room. */
@media(max-width:900px){
 .logic-page .intro{display:block;width:100%;min-width:0}
 .logic-page .intro h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0}
 .logic-page .intro .pitch,.logic-page .intro-rules{display:none}
 .logic-page .intro .gesture-guide{display:flex;align-items:center;justify-content:center;gap:10px;max-width:100%;min-height:70px;padding:6px 10px;margin:0}
 .logic-page .gesture-guide picture{width:clamp(148px,48vw,188px);flex:none}
 .logic-page .gesture-guide figcaption{flex:1;min-width:0;max-width:136px;text-align:left;font:14px/1.35 Barlow,sans-serif}
 .logic-page .gesture-guide figcaption small{font-size:12px;margin-top:3px}
 .logic-page .tray-number,.logic-page .strokes .micro,.logic-page .under-tray>span,.logic-page .puzzle-bottom,.logic-page footer,.logic-page footer .text-button{font-size:12px}
 .logic-page .layout{gap:12px;padding-top:10px}
 .logic-page .puzzle-objective h2{font-size:28px;margin-bottom:10px}
}
@media(max-width:900px) and (min-height:501px){.logic-page .tray-stage{width:min(100%,calc((100svh - 370px)*var(--cols)/var(--rows)))}.logic-page .puzzle-difficulty{margin:8px 4px 0}}
@media(max-width:360px){.logic-page .intro .gesture-guide{padding-inline:8px;gap:8px}.logic-page .gesture-guide figcaption{font-size:13px}.logic-page .gesture-guide figcaption small{font-size:12px}.logic-page .puzzle-objective h2{font-size:26px}}
@media(max-height:500px) and (min-width:600px) and (max-width:900px){
 .logic-page .layout{grid-template-columns:minmax(160px,.6fr) minmax(0,2fr);gap:16px;align-items:start;padding-top:8px}
 .logic-page .intro .gesture-guide{display:block;padding:10px 12px}
 .logic-page .gesture-guide picture{display:block;width:170px;max-width:100%}
 .logic-page .gesture-guide figcaption{max-width:none;margin-top:6px}
 .logic-page .play{max-width:none;grid-template-columns:minmax(136px,1fr) minmax(0,1.5fr);grid-template-rows:auto auto auto auto;gap:4px 12px;align-items:start}
 .logic-page .puzzle-top{grid-column:1;grid-row:1;display:grid;gap:4px;padding:0}
 .logic-page .puzzle-difficulty{grid-column:1;grid-row:2;margin:0}.logic-page .difficulty-options button{padding-inline:2px;font-size:13px}.logic-page .puzzle-difficulty p{text-align:left;font-size:12px}
 .logic-page .puzzle-objective{grid-column:1;grid-row:3;text-align:left;margin:4px 0}
 .logic-page .puzzle-objective h2{font-size:26px;margin-bottom:8px}
 .logic-page .strokes{justify-content:flex-start}
 .logic-page .tray-stage{grid-column:2;grid-row:1/6;align-self:center;width:min(100%,calc((100svh - 100px)*var(--cols)/var(--rows)));max-width:none}
 .logic-page .under-tray{grid-column:1;grid-row:4;display:block;padding:0;min-height:0}
 .logic-page .puzzle-bottom{grid-column:1;grid-row:5;flex-wrap:wrap;padding:0}
 .logic-page .puzzle-result,.logic-page .puzzle-hint,.logic-page .save-note{grid-column:1/-1}
}