.clearing-mode { margin:0; padding:0; background:#102e33; color:#eee5c7; overflow:auto; }
.clearing-mode .start-screen,.clearing-mode .stars { display:none!important; }
.clearing-app { width:min(1280px,100%); margin:auto; font-family:Georgia,'Times New Roman',serif; padding:24px 32px 14px; }
.clearing-app * { box-sizing:border-box; }
.clearing-header { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:0 0 18px; }
.clearing-logo { font:italic 900 36px Georgia,serif; color:#edd99d; text-decoration:none; line-height:1; }
.clearing-logo span { display:block; font:9px/2.4 monospace; letter-spacing:1.5px; color:#92aaa1; text-transform:uppercase; }
.clearing-heading { flex:1; padding-left:28px; border-left:1px solid #4a6558; }
.clearing-heading>span { font:10px monospace; color:#a2b9a5; letter-spacing:2px; text-transform:uppercase; }
.clearing-heading h1 { font:italic 30px/1.2 Georgia,serif; margin:5px 0 0; }
.clearing-controls { display:flex; align-items:center; gap:6px; }
.clearing-app button { border:1px solid #6e8367; background:#27483e; color:#e4e9cc; padding:10px 14px; cursor:pointer; font:12px monospace; border-radius:3px; }
.clearing-app button:hover { background:#416349; }
.clearing-app button[aria-pressed=true] { background:#e3d59b; color:#2b483d; border-color:#e3d59b; }
.clearing-controls .clearing-invite { margin-left:12px; border-color:#b8ac6c; color:#eadfb8; }
.clearing-stage { position:relative; border:1px solid #71805c; background:#193c45; box-shadow:0 15px 50px #041a2555,inset 0 0 0 4px #2a4b3c; overflow:hidden; }
.clearing-stage canvas { display:block; width:100%; height:auto; aspect-ratio:8/5; image-rendering:pixelated; outline:none; }
.clearing-stage canvas:focus-visible { outline:2px solid #e7cd7b; outline-offset:-4px; }
.clearing-caption { position:absolute; top:20px; left:22px; display:flex; gap:9px; align-items:center; font:11px monospace; color:#dbdfbf; text-shadow:1px 1px #173934; }
.clearing-dot { width:6px; height:6px; background:#e0d58d; box-shadow:0 0 9px #d6d88a80; }
.clearing-watermark { position:absolute; right:20px; bottom:17px; font:9px monospace; letter-spacing:2px; color:#c0d0b98a; }
.clearing-context { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); padding:8px 13px; background:#17372bdd; color:#eddfad; font:12px monospace; border:1px solid #869267; }
.clearing-context:empty { display:none; }
.clearing-footer { display:flex; align-items:center; gap:24px; padding:18px 0 13px; }
.clearing-player { display:flex; align-items:center; gap:11px; min-width:180px; }
.clearing-paw { font-size:25px; filter:sepia(1); }
.clearing-player strong { display:block; font-size:17px; }
.clearing-player small { font:10px monospace; color:#a9ba9e; margin-left:8px; }
.clearing-player [data-role=energy] { display:block; font:10px monospace; color:#b5c596; margin-top:4px; }
.clearing-footer>p { flex:1; font:11px/1.5 monospace; color:#9fb4a2; margin:0; }
.clearing-help { font:10px/1.8 monospace; color:#b2c2ae; text-align:right; }
.clearing-help kbd { padding:3px 5px; background:#29493b; border:1px solid #6e7f5e; color:#e9dfad; }
.clearing-help>span { display:block; font-size:9px; color:#7e9b8e; }
.clearing-diagnostics { border-top:1px solid #3f5d4a; font:10px/2 monospace; color:#a9b99c; }
.clearing-diagnostics summary { cursor:pointer; width:max-content; }
.clearing-diagnostics output { display:inline-block; margin-right:20px; }
.clearing-diagnostics label { margin-right:20px; }
.clearing-gate { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; flex-direction:column; background:#173c3eea; gap:16px; text-align:center; }
.clearing-gate[hidden] { display:none; }
.clearing-gate strong { font:italic 26px Georgia,serif; }
.clearing-gate p { font:12px monospace; max-width:80%; }
.clearing-gate a { color:#e7d7a4; font:12px monospace; }
.clearing-room { width:min(490px,90vw); border:2px solid #a99e68; border-radius:5px; background:#e8dcb5; color:#2d483e; padding:25px; box-shadow:0 20px 60px #071d2b80; }
.clearing-room::backdrop { background:#041e2b99; }
.clearing-room header { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.clearing-room h2 { font:italic 23px Georgia,serif; margin:0; }
.clearing-room p,.clearing-room label { font:12px/1.7 monospace; }
.clearing-room input { display:block; width:100%; padding:12px; margin:8px 0 14px; background:#f7edcf; border:1px solid #a99e68; color:#2d483e; font:11px monospace; }
@media(max-width:700px){.clearing-app{padding:15px 10px}.clearing-header{flex-wrap:wrap;gap:14px}.clearing-heading{padding-left:12px}.clearing-heading h1{font-size:24px}.clearing-logo{font-size:28px}.clearing-controls{width:100%;justify-content:flex-end}.clearing-footer{flex-wrap:wrap;gap:14px}.clearing-help{text-align:left;width:100%}.clearing-stage canvas{min-height:360px;object-fit:cover}.clearing-heading>span{font-size:8px}.clearing-diagnostics output{display:block}}