.lesson-room{max-width:1320px;margin:auto;padding:28px 4% 56px;color:#263344}.room-heading,.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.room-heading h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:5px 0 20px}.room-heading .eyebrow{margin:0}.room-card{background:#fff;border:1px solid #d5deea;border-radius:22px;padding:22px;margin-bottom:18px;min-width:0}.room-card h2{font-size:1.35rem;margin:0 0 12px}.room-card p{line-height:1.6}.room-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:24px;align-items:start}.lesson-room button{font:inherit;font-size:1rem;min-height:44px;padding:10px 16px;border:1px solid #a9b7c5;border-radius:12px;background:#f3f6fa;color:#263344;cursor:pointer}.lesson-room button:hover:not(:disabled){background:#e5eaf5}.lesson-room button:disabled{opacity:.48;cursor:not-allowed}.lesson-room button.primary{background:#5944be;color:white;border-color:#5944be}.lesson-room button.danger{margin-top:20px;color:#a12b37;border-color:#a12b37;background:#fff}.lesson-room :focus-visible,dialog :focus-visible{outline:3px solid #775fe0;outline-offset:3px}.small{font-size:.875rem}.lesson-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));aspect-ratio:1;border:5px solid #244b3c;border-radius:10px;overflow:hidden;max-width:620px;margin:auto}.lesson-room .square{position:relative;min-height:0;aspect-ratio:1;padding:0;border:0;border-radius:0;background:#f4edda;display:grid;place-items:center}.lesson-room .square.dark{background:#608b70}.lesson-room .square:hover:not(:disabled){background:#cfd1a1}.square img{width:82%;height:82%;pointer-events:none}.square .coordinate{position:absolute;left:3px;bottom:1px;font-size:clamp(.65rem,1.1vw,.8rem);font-weight:700;color:#203d30}.square.dark .coordinate{color:#fff}.lesson-room .square.selected{box-shadow:inset 0 0 0 4px #e7b51d;background:#edda7f}.lesson-room .square.legal{box-shadow:inset 0 0 0 4px #f6d15c}.board-tools,.video-controls,.invite-row{display:flex;gap:9px;flex-wrap:wrap;margin:15px 0}.invite-row input{flex:1 1 240px;min-width:0}#invite-panel label{font-weight:700}.move-list{max-height:180px;overflow:auto;line-height:1.8;word-spacing:6px}.video-stage{position:relative;background:#142033;border-radius:16px;aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;color:#d9e3f5}.video-stage>p{position:absolute;text-align:center;padding:24px;max-width:75%}#remote-video{width:100%;height:100%;object-fit:contain}#local-video{position:absolute;bottom:12px;right:12px;width:27%;aspect-ratio:4/3;object-fit:cover;background:#253c54;border:2px solid white;border-radius:10px}details{margin:20px 0}summary{cursor:pointer;padding:10px 0}details label{display:block;font-size:.875rem}details textarea{width:100%;box-sizing:border-box;font:inherit;margin:10px 0}#notice{min-height:1.4em;color:#694914}.lesson-room [hidden]{display:none!important}dialog{border:1px solid #cbd2df;border-radius:20px;max-width:90vw;padding:25px}dialog::backdrop{background:#14203388}@media(max-width:850px){.room-grid{grid-template-columns:1fr}.lesson-room{padding:20px 3%}.room-card{padding:17px}.video-stage{max-height:400px}.square .coordinate{font-size:.7rem}}@media(min-width:851px){.video-panel{position:sticky;top:20px}}

/* Keep the shared board and video adjacent; secondary tools follow them. */
.room-grid{grid-template-areas:"board video" "tools help";row-gap:16px}
.board-panel{grid-area:board}.video-panel{grid-area:video}.board-extras{grid-area:tools}.call-extras{grid-area:help}
.room-grid>.room-card{margin-bottom:0}
@media(max-width:850px){
 .room-grid{grid-template-areas:"board" "video" "tools" "help";gap:8px}
 .room-grid>.board-panel,.room-grid>.video-panel{padding:8px;border-radius:12px}
 .board-panel .panel-heading{gap:8px;flex-wrap:nowrap}
 .board-panel h2{font-size:1rem;margin:0}
 .board-panel #flip-board{font-size:.875rem;padding:6px 10px}
 #board-status{font-size:.875rem;margin:4px 0 6px;line-height:1.3}
 .lesson-board{width:min(100%,48svh);box-sizing:border-box;border-width:3px}
 .video-panel h2{font-size:1rem;margin:0 0 5px}
 .video-stage{height:clamp(160px,28svh,260px);aspect-ratio:auto;border-radius:8px}
 #local-video{width:auto;height:42%;max-width:30%;bottom:6px;right:6px}
 .video-stage>p{font-size:.875rem;padding:8px;margin:0}
 #call-status{font-size:.875rem;line-height:1.3;margin:6px 0}
 .video-controls{gap:6px;margin:6px 0 0}
 .video-controls button{flex:1 1 auto;font-size:.875rem;padding:6px 8px}
 #notice:empty{display:none}
}

#remote-video{display:block;min-width:0;min-height:0;object-fit:cover}
/* Show a useful full-size camera preview while waiting for the other person. */
.video-stage:has(#local-video.camera-on):has(#video-placeholder:not([hidden])) #local-video{inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;border:0;border-radius:inherit;object-fit:cover}
.video-stage:has(#local-video.camera-on) #video-placeholder{display:none}
#local-video:not(.camera-on){visibility:hidden}