/* O-GAME r4: 70% portraits, two visible console rows, fixed stage scale. */
:root{--dock:345px;--avatar-size:112px;--card-width:126px;--card-height:142px}
.dock{grid-template-rows:20px minmax(0,1fr);gap:8px;padding:12px 22px;box-shadow:0 -3px 20px #100d2529}
.emotion-panel{display:none!important}
.library-rail{display:grid;grid-template-columns:minmax(0,1fr) 12px;gap:8px;min-height:0;min-width:0}
.library-arrow{display:none!important}
.library{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-width),1fr));grid-auto-rows:var(--card-height);align-content:start;justify-items:center;gap:8px;height:100%;width:100%;overflow-x:hidden;overflow-y:scroll;padding:0;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-y}
.library::-webkit-scrollbar{display:none;width:0;height:0}
.console-scrollbar{position:relative;height:100%;border:1px solid #8c6d9d6b;border-radius:9px;background:#15111e;touch-action:none;cursor:pointer}
.console-scroll-thumb{position:absolute;left:2px;right:2px;top:0;min-height:28px;border-radius:7px;background:linear-gradient(90deg,#9f86b0,#c3a9d0);pointer-events:none}
.console-scrollbar:hover .console-scroll-thumb,.console-scrollbar:focus-visible .console-scroll-thumb{background:#e0c5eb}
.console-scrollbar[aria-disabled=true]{opacity:.3;cursor:default}
.console-scrollbar:focus-visible{outline:2px solid #f2d099;outline-offset:3px}
.character-card{width:var(--card-width);min-width:var(--card-width);height:var(--card-height);padding:4px 6px;gap:4px;border-radius:13px;font-size:11px}
.character-card .thumb,.character-card .thumb canvas{width:var(--avatar-size);height:var(--avatar-size);aspect-ratio:1}
.character-card .thumb{border-radius:10px}
.character-card>span:nth-child(2){font-size:11px;line-height:16px;min-height:16px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.character-card .thumb svg{width:24px;height:24px;left:calc(50% - 12px);top:calc(50% - 12px)}
.character-card .dot{right:8px;top:8px;width:5px;height:5px}
.scene{background:#6c94bf}
.scene .backdrop,.scene [data-sky-v13],#skyCanvas,.scene>.atmosphere{display:none!important}
.scene-art{position:absolute;inset:-12px;background:url('assets/alpha-3336/day-no-rainbow.png') center top/cover no-repeat;filter:brightness(.96) saturate(.94);z-index:0;pointer-events:none;will-change:transform}
.scene-grade{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#fcdaa408,transparent 48%,#273b4220 85%);transition:background 1s}
.scene-art:after{content:'';position:absolute;inset:0;background-image:url('assets/alpha-3336/night-no-rainbow.png');background-size:cover;background-position:inherit;opacity:0;transition:opacity .8s ease;pointer-events:none}
.scene.night .scene-art{filter:brightness(1) saturate(1)}
.scene.night .scene-art:after{opacity:1}
.scene.night .scene-grade{background:linear-gradient(180deg,#101c3908,transparent 55%,#17294c1a)}
@media(prefers-reduced-motion:reduce){.scene-art:after{transition:none}}
.scene canvas.ambient-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.stage-deck{position:absolute;left:0;right:0;top:88.75%;bottom:0;z-index:0;pointer-events:none;background:#438c35 url('assets/alpha-3348/lawn-sparse-flowers-lossless.webp') center top/100% 100% no-repeat;box-shadow:0 -5px 18px #1b522526;transition:filter 1s}
.stage-deck:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#152e1b05,#182e2612 55%,#0b152d38)}
.scene.night .stage-deck{filter:brightness(.68) saturate(.75)}
.stage-viewport{z-index:1}
.scene-caption{top:16px;left:18px;background:#19283c9c;backdrop-filter:none;font-size:10px;letter-spacing:.2px}
.scene-caption #activeCount{color:#e4e5efb8}
.actor-target .tiny.perform{display:none!important}
.actorLabels{overflow:clip}
/* Selection alone never makes the name or remove control visible. */
.actor-target .actor-label,.actor-target.focused .actor-label,.actor-target.touch-open .actor-label{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,visibility .15s}
.actor-target:hover .actor-label,.actor-target:has(:focus-visible) .actor-label{opacity:1;visibility:visible;pointer-events:auto}
.actor-target:hover .actor-label .remove,.actor-target:has(:focus-visible) .actor-label .remove{opacity:1}
.topbar .lore-button{min-height:40px;padding:8px 13px;border:1px solid #ebcf9e5c;border-radius:11px;background:linear-gradient(135deg,#59495c99,#353344b0);box-shadow:none;animation:none;gap:7px;font-size:12px;color:#f2dfbb;white-space:nowrap}
.topbar .transport{gap:9px}.topbar .lore-button b{font-size:18px}.topbar .lore-button:disabled{opacity:.4}
.stage-effects-option{display:flex!important;align-items:center;justify-content:space-between;gap:10px}
.stage-effects-option #effects{width:auto;padding:6px 10px;border:1px solid #ffffff20;border-radius:9px}
.stage-effects-option #effects[aria-pressed=false]{opacity:.5}
.welcome{display:none}
@media(min-width:2400px){:root{--dock:405px;--avatar-size:140px;--card-width:154px;--card-height:170px}.dock{grid-template-rows:24px minmax(0,1fr);gap:8px;padding:12px 22px}}
@media(max-width:650px){
 :root{--dock:calc(328px + env(safe-area-inset-bottom));--avatar-size:103.6px;--card-width:118px;--card-height:134px}
 .dock{grid-template-rows:23px minmax(0,1fr);gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
 .topbar{gap:5px;padding:0 8px}.topbar .transport{gap:3px}.topbar .tools{gap:1px}
 .topbar .lore-button{min-height:34px;padding:5px 7px;gap:4px;font-size:10px}.topbar .lore-button b{font-size:14px}
 .topbar .iconbutton{width:27px;height:34px}.topbar .tool{padding:4px;width:27px}.topbar .tooltext{display:none}
 .topbar .play{min-width:35px;padding:8px}.topbar .beatclock{display:none}.topbar #reset{display:none}
 .brand{gap:0}.brand strong{font-size:11px}.brand i{font-size:10px}.brand small,.brandmark{display:none!important}
 .scene-caption{top:11px;left:10px;font-size:9px;padding:6px 9px}
 .stage-deck{background-size:cover;background-position:center}
 .scene-art{background-position:100% top}
 .actor-target .actor-label{gap:2px;padding:2px;max-width:140px}
 .actor-target .actor-label .tiny{width:22px;height:23px}
}
@media(hover:none){.actor-target.touch-open .actor-label{opacity:1;visibility:visible;pointer-events:auto}.actor-target.touch-open .actor-label .remove{opacity:1}}
@media(max-width:370px){.topbar #record{display:none}.topbar .lore-button{padding:5px}.brand strong{font-size:10px}}
@media(max-height:550px) and (min-width:651px){:root{--dock:271px;--avatar-size:84px;--card-width:98px;--card-height:114px}.dock{grid-template-rows:16px minmax(0,1fr);gap:6px;padding:6px 12px}}