/* Room Tones / Another Room / Word Tides. Luke Steuber, MIT.
   Full-bleed field, a small caption opener, an exact readout outside the caption.
   Caption dialogs are styled by ../poem-shell/modal.css; the rules below are fallbacks only. */
:root{color-scheme:dark;--bg:#101311;--ink:#e8e6dc;--muted:#aab4a8;--gold:#f0cf8a;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--ui:system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:14px/1.5 var(--ui)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
main,.canvas-wrap{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden}
canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
canvas:focus{outline:none}
canvas:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}

.explore-button{position:fixed;top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));z-index:5;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #a8b8a640;border-radius:50%;background:#0a100c80;color:#d2dccbcc;font:16px/1 var(--mono);cursor:pointer;-webkit-tap-highlight-color:transparent}
.explore-button:hover,.explore-button:focus-visible{color:var(--ink);border-color:#c6d0b8aa;background:#0a100cd0}
.explore-button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.tooltip{position:absolute;z-index:3;max-width:min(300px,calc(100vw - 16px));padding:9px 12px;border:1px solid #6c7a6480;background:#111b17f0;color:var(--ink);font:11px/1.65 var(--mono);white-space:pre-line;pointer-events:none;box-shadow:0 5px 20px #0004}
.key{position:absolute;z-index:2;left:max(14px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));margin:0;max-width:min(620px,calc(100vw - 28px));color:#d8d2bcd9;font:11px/1.5 var(--mono);pointer-events:none;text-shadow:0 0 4px var(--bg),0 0 2px var(--bg),0 0 1px var(--bg)}

.loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:13px;width:min(480px,calc(100vw - 72px));padding:20px;color:var(--muted);font:12px var(--mono);text-align:center}
.loading>span{width:22px;height:1px;background:var(--gold)}
.loading p{max-width:60ch;margin:0;line-height:1.8}
.loading button{min-height:44px;padding:0 15px;border:1px solid #4c5d50;background:transparent;color:inherit;font:inherit;cursor:pointer}
.loading button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Fallback caption styling if modal.css fails to load. */
dialog{max-width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:0;border:1px solid #52634e;background:#f7f6f1;color:#252722}
dialog::backdrop{background:#0006}
dialog .close{min-width:40px;min-height:40px;border:0;background:transparent;color:inherit;font:24px/1 var(--ui);cursor:pointer}

@media (max-width:600px){
  .explore-button{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
  .key{font-size:10px;max-width:calc(100vw - 24px);left:max(12px,env(safe-area-inset-left))}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (forced-colors:active){canvas{border:1px solid CanvasText}.explore-button{color:ButtonText;border-color:ButtonText;background:ButtonFace}.tooltip{border-color:CanvasText}}