/* Запись своего урока на весь экран. Окно ниже игры (50): игра с листа открывается поверх и попадает в ролик. */
.so { --r-bg:#0f131c; --r-panel:#181d29; --r-panel2:#242b39; --r-line:#2f3748; --r-text:#e8ecf4; --r-mute:#9aa4b8; --r-accent:#3b7bff; position:fixed; inset:0; z-index:45; display:flex; align-items:center; justify-content:center; background:#0f131c; color:#e8ecf4; overflow:auto }
.so-setup { width:min(560px,calc(100% - 24px)); margin:auto; padding:22px 24px; border-radius:16px; background:#fff; color:var(--ink) }
.so-setup header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px }
.so-setup h2 { margin:0; font-size:20px }
.so-x { border:0; background:none; font-size:18px; color:var(--muted); cursor:pointer }
.so-modes { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.so-mode { display:flex; flex-direction:column; gap:4px; padding:14px; border:2px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); font:inherit; text-align:left; cursor:pointer }
.so-mode .icon { color:var(--brand) }
.so-mode span { color:var(--muted); font-size:13px; line-height:1.3 }
.so-mode.on { border-color:var(--brand); background:#f4f7ff }
.so-mode:disabled { opacity:.5; cursor:default }
.so-opts { display:flex; gap:18px; margin-top:14px }
.so-done video { display:block; width:100%; max-height:52vh; border-radius:10px; background:#000 }
.so-done { width:min(760px,calc(100% - 24px)) }
.so-acts { display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.so-acts .btn { flex:1; width:auto; margin:0 }
.so-b2 { padding:9px 13px; border:1px solid #39435a; border-radius:9px; background:#232a3a; color:#e8ecf4; font:inherit; font-size:14px; text-decoration:none; cursor:pointer }
.so-done .so-b2 { border-color:var(--line); background:#fff; color:var(--ink) }
.so-run { position:relative; display:flex; flex-direction:column; width:100%; height:100%; min-height:0 }
.so-area { position:relative; flex:1; min-height:0; display:flex; gap:6px; padding:6px; background:#0f131c }
.so-area > .r-stage { flex:1; width:100% }
.so-note { padding:24px; font-size:20px }
.so-none { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; height:100%; color:var(--muted); font-size:14px; text-align:center }
.so-none b { color:var(--ink); font-size:16px }
.so-rib { display:flex; align-items:center; gap:10px }
.so-rib .ribbon button.on { outline:2px solid #3b7bff }
.so-pick { display:flex; align-items:center; gap:8px; width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font:inherit; text-align:left; cursor:pointer }
.so-pick .icon { color:var(--brand) }
.so .pk { position:fixed; z-index:46 }
.so-cam { position:absolute; right:18px; bottom:74px; z-index:5; width:220px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; background:#000; box-shadow:0 6px 20px rgba(0,0,0,.45) }
/* Большая картинка только для самого учителя, как зеркало. Маленькая попадает в ролик, она не отражена. */
.so-cam.big { transform:scaleX(-1); inset:6px 6px 62px; width:calc(100% - 12px); height:calc(100% - 68px); aspect-ratio:auto; object-fit:contain; border-radius:8px }
.so-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-height:56px; padding:8px 12px; background:#181d29 }
.so-lay, .so-nav { display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:10px; background:#232a3a }
.so-lay button, .so-nav button { padding:6px 11px; border:0; border-radius:8px; background:none; color:#c5cde0; font:inherit; font-size:14px; cursor:pointer }
.so-lay button.on { background:#2a3f73; color:#fff }
.so-nav span { padding:0 6px; font-size:13px; color:#c5cde0 }
.so-go { display:flex; align-items:center; gap:8px; margin-left:auto }
.so-r { display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border:0; border-radius:9px; background:#d23c3c; color:#fff; font:inherit; font-weight:600; cursor:pointer }
.so-r:disabled { opacity:.6 }
.so-time { font-variant-numeric:tabular-nums; color:#ff8a8a; font-weight:600 }
.so-err { position:absolute; left:50%; bottom:66px; transform:translateX(-50%); color:#ffb4b4; font-size:14px }
@media (max-width:640px) { .so-modes { grid-template-columns:1fr } }