/* Match the existing ASCII palette and keep the silhouette beside the directory. */
body.is-character-menu { --hud-top:0px; --hud-bottom:0px; }
body.is-character-menu #scene { overflow:hidden !important; }
body.is-character-menu #scene-stage { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-width:0 !important; aspect-ratio:auto !important; transform:none !important; background: #000 url('../../assets/models/site-bing-poster.webp?v=20260925-perf') center / cover no-repeat !important; }
body.is-character-menu #scene-stage > canvas:not(.scene3d-canvas):not(.scene3d-ascii) { display:none; }
body.is-character-menu .scene3d-ascii { filter:none !important; }
body.is-character-menu .character-ascii { display:block !important; }
.character-still { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; z-index:2; }
body.is-character-menu .scene3d-ascii.is-in { opacity:1; }
body.is-character-menu #scene-stage::before { box-shadow: inset 0 0 100px #0009 !important; }
body.is-character-menu #scene-stage::after { opacity: .22 !important; }
.character-vignette { position:absolute; inset:0; z-index:5; pointer-events:none; background:linear-gradient(90deg,#000d 0%,#0008 24%,transparent 49%),linear-gradient(0deg,#000b,transparent 22%,transparent 88%,#0008); }
.character-controls { position:fixed; z-index:220; right:clamp(20px,3vw,46px); bottom:26px; display:grid; gap:10px; min-width:220px; padding:14px 16px; border-right:1px solid #71ff9a50; background:linear-gradient(270deg,#000b,transparent); color:#9bfdb7; font:10px/1.5 "IBM Plex Mono",Consolas,monospace; letter-spacing:.15em; }
.character-controls[hidden] { display:none; }
.character-controls p { margin:0; color:#71ff9a99; font-size:9px; }
.character-controls strong { font-size:12px; font-weight:500; letter-spacing:.22em; }
.character-controls-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; max-width:min(420px, calc(100vw - 64px)); }
.character-controls button { display:grid; place-items:center; min-width:36px; min-height:34px; padding:6px 8px; border:1px solid #71ff9a35; background:#031007cc; color:#71ff9aaa; font:inherit; letter-spacing:.06em; cursor:pointer; }
.character-controls button:hover,.character-controls button[aria-pressed="true"] { color:#d5ffe0; border-color:#71ff9ac0; background:#11321cd9; }
.character-controls .character-pause { margin-left:auto; min-width:66px; }
.character-progress { height:1px; background:#71ff9a25; }
.character-progress span { display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left; background:#71ff9a; }
@media(max-width:759px) {
  body.is-character-menu #scene-stage { background-position:67% center !important; }
  .character-still { object-position:67% center; }
  body.is-character-menu #site-nav { left:12px; width:calc(100vw - 24px); padding:12px; max-height:calc(100dvh - 104px); overflow-y:auto; }
  body.is-character-menu .site-nav-link { min-height:44px; font-size:12px; }
  body.is-character-menu .site-nav-brand { font-size:19px; letter-spacing:.03em; }
  .character-controls { right:12px; top:32px; bottom:auto; min-width:0; padding:10px; gap:7px; }
  .character-controls p,.character-progress { display:none; }
  .character-controls strong { display:block; font-size:11px; letter-spacing:.14em; color:#d5ffe0; }
  .character-controls button { min-width:0; min-height:44px; }
  /* 16 poses: two rows of 8. The current pose name is the strong above the numbers. */
  .character-controls-row { display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:4px; max-width:none; }
  .character-controls .character-pause { grid-column:span 3; margin-left:0; min-width:0; }
  /* a phone window fills the page column: the fixed pose bar (z 220, above #os) would cover its title bar */
  body:has(#panels .win:not(.is-min)) .character-controls { display:none; }
  .character-vignette { background:linear-gradient(90deg,#000c,transparent 75%),linear-gradient(0deg,#000a,transparent 30%); }
}
@media(max-width:380px) {
  .character-controls { padding:8px; }
  .character-controls-row { gap:4px; }
  .character-controls .character-pause { min-width:60px; }
}
@media(prefers-reduced-motion:reduce) { .character-controls { display:none; } }