:root{font-family:system-ui,sans-serif;color:#372849;background:#f2eafa;color-scheme:light}*{box-sizing:border-box}body{margin:0}main{max-width:560px;margin:auto;padding:12px max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}header{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}h1{font-size:23px;margin:0}header span{font-size:12px;color:#655570}nav{display:flex;align-items:center;gap:8px}nav div{flex:1}nav small{display:block;font-size:12px;margin-top:3px}button{font:inherit;border:2px solid #a391b4;background:#fffafb;color:inherit;border-radius:13px;min-height:48px;min-width:48px;cursor:pointer;padding:7px}button:focus-visible,summary:focus-visible{outline:3px solid #321966;outline-offset:2px}button:disabled{cursor:default;opacity:.5}button[aria-pressed=true]{outline:3px solid #583478;outline-offset:1px}#lesson{font-size:14px;line-height:1.4;margin:8px 0;min-height:39px}#board{display:grid;gap:3px;background:#c7b5d4;padding:6px;border-radius:16px;max-width:370px;margin:auto}.tile{aspect-ratio:1;display:grid;place-items:center;background:#e2d5ee;border-radius:7px;position:relative;font-size:clamp(12px,4vw,20px)}.tile.wall{background:#877193;color:white}.tile.goal{outline:2px dashed #7b5e8d;outline-offset:-4px}.tile.goal::after{content:attr(data-goal);position:absolute;right:3px;bottom:3px;font-size:11px;font-weight:800}.tile.sofa{background:#f7cd81;box-shadow:inset 0 0 0 2px #c19853}.tile.handle-a{background:#a9d7ed;color:#173d55;font-weight:800}.tile.handle-b{background:#f5bccc;color:#64283c;font-weight:800}.tile.clearance{outline:3px solid #277c66;outline-offset:-4px}.tile.blocked{background:#fb8e96;outline:3px solid #8e1b38;outline-offset:-4px}.tile.target::before{content:'·';font-size:24px;color:#277c66;position:absolute;left:3px;top:-4px}#status{font-size:14px;line-height:1.35;min-height:38px;margin:8px 0}.roles{display:grid;grid-template-columns:1fr 1fr;gap:8px}.roles section{padding:8px;border-radius:14px;border:2px solid #a391b4}.roles .blue{background:#deeff8}.roles .pink{background:#fde5ed}h2{font-size:15px;margin:0}.roles p{font-size:12px;margin:4px 0 8px}.buttons{display:grid;grid-template-columns:1fr 1fr;gap:5px}.buttons button{font-size:24px;line-height:1}.roles section:has(button[aria-pressed=true]){border-color:#563377}#execute{width:100%;margin:10px 0 8px;min-height:50px;background:#fff0bd;font-size:14px;font-weight:650}footer{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}footer button{font-size:14px}details{font-size:14px;line-height:1.45;margin-top:12px}summary{cursor:pointer;min-height:48px;padding:12px 0}details p{margin:4px 0 8px}@media(min-width:650px){main{padding-top:24px}.buttons{grid-template-columns:repeat(4,1fr)}#board{max-width:370px}}@media(max-height:740px) and (max-width:600px){#board{max-width:260px}#lesson{min-height:0}.buttons{grid-template-columns:repeat(4,1fr)}.roles{grid-template-columns:1fr}.roles section{display:grid;grid-template-columns:1fr 1.5fr;gap:4px;align-items:center}.roles p{grid-column:1;margin:0}.buttons{grid-column:2;grid-row:1/3}.roles button{min-width:0}.roles section{padding:5px}.roles p{font-size:11px}}
:root .roles button{min-width:48px}
/* SystemBars may expose either CSS variables or native WebView env() insets.
   Old WebViews already inset the viewport and report zero: never add a guessed bar height. */
main{--coop-top-gap:12px;padding-top:calc(var(--safe-area-inset-top,env(safe-area-inset-top,0px)) + var(--coop-top-gap));padding-right:calc(var(--safe-area-inset-right,env(safe-area-inset-right,0px)) + 12px);padding-bottom:calc(var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)) + 16px);padding-left:calc(var(--safe-area-inset-left,env(safe-area-inset-left,0px)) + 12px)}
@media(min-width:650px){main{--coop-top-gap:24px}}
@media(max-height:740px) and (max-width:600px){.roles section{grid-template-columns:1fr 1fr}.roles p{grid-column:2;grid-row:1}.buttons{grid-column:1/-1;grid-row:2}}