/* Layout: one full-bleed character canvas; slate top-left; reveal and sound top-right; scene strip pinned to the bottom edge. Each scene sets its own ground: paper by day, night by night. */
:root{
  --bg:#081115;
  --fg:#dbe5e2;
  --soft:rgba(219,229,226,.45);
  --accent:#39ff6e;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:dark;
}
:root[data-mode="day"]{--bg:#f2f1ec;--fg:#1b2130;--soft:rgba(27,33,48,.5);--accent:#9a3b30;color-scheme:light}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--fg)}
canvas#c{position:fixed;inset:0;display:block;cursor:pointer}
.slate{position:fixed;font:11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);pointer-events:none;background:var(--bg);padding:4px 8px;
  left:calc(12px + env(safe-area-inset-left,0px));top:calc(12px + env(safe-area-inset-top,0px));white-space:pre}
.strip{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;gap:4px;align-items:stretch;
  background:var(--bg);padding:4px;border:1px solid var(--soft);max-width:calc(100vw - 32px);overflow-x:auto;scrollbar-width:none}
.strip button{font:11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);background:transparent;border:0;padding:6px 12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;white-space:nowrap}
.strip button small{font-size:9px;opacity:.75}
.strip button[aria-pressed="true"]{color:var(--bg);background:var(--fg)}
/* reveal and sound: top right, set like the slate */
.ctrl{position:fixed;right:calc(12px + env(safe-area-inset-right,0px));top:calc(12px + env(safe-area-inset-top,0px));display:flex;gap:2px;background:var(--bg)}
.ctrl button{font:11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);background:transparent;border:0;padding:4px 8px;cursor:pointer}
.ctrl button:hover{color:var(--fg)}
.ctrl #reveal[aria-pressed="true"]{color:var(--accent)}
.ctrl #sound[aria-pressed="true"]{color:var(--fg)}
.ctrl button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.strip button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
@media (max-width:520px){.strip button{padding:6px 8px}}
[hidden]{display:none!important}