/* Mirror Room. Layout only; the room, lamp, walls, mirrors, normal lines and beam are drawn on the canvas. */
.ao-stage{display:grid;gap:14px}
.kg-levels.ao-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:4px}
.ao-level-name{display:block;font-size:.8em;opacity:.8}

.ao-status{margin:0}
.ao-tip{margin:0;opacity:.9}

.ao-scene{width:100%;max-width:640px;margin:0 auto;padding:6px;border-radius:20px;background:rgba(255,255,255,.06);box-sizing:border-box}
.ao-canvas{display:block;width:100%;height:auto;border-radius:14px;cursor:pointer;touch-action:manipulation}
.ao-canvas:focus-visible{outline:4px solid #ffd54f;outline-offset:3px}

.ao-panel{display:grid;gap:8px;width:100%;max-width:640px;margin:0 auto;padding:12px;border-radius:16px;background:rgba(255,255,255,.06);box-sizing:border-box}
.ao-panel[hidden]{display:none}
.ao-angle-label{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.ao-angle{width:100%;accent-color:#b3e5fc}
.ao-readout{margin:0}

.ao-actions{justify-content:center}
.ao-win-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

.ao-howto ol{padding-left:1.2em}
.ao-howto li+li{margin-top:6px}

@media (max-width:519px){
 .kg-levels.ao-levels{gap:4px}
 .ao-level-name{font-size:.7em}
}