/* Word Loom. Luke Steuber, 2026. Code: MIT. The caption dialog is styled by ../poem-shell/modal.css. */
:root{color-scheme:dark;--ground:#0c0f12;--ink:#e6e8e0;--muted:#9aa39d;--gold:#e8c98c;--back:#6b747b;--ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--ground);color:var(--ink);font:14px/1.5 var(--ui)}
[hidden]{display:none!important}
main{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden}
canvas{display:block;width:100%;height:100%;cursor:default;touch-action:pinch-zoom;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
canvas:focus{outline:none}
canvas:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.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}

/* Reading card: shown only while a cell or word is read; app.js places it beside the cell. */
.readout{position:absolute;margin:0;padding:7px 10px;max-width:340px;pointer-events:none;color:var(--muted);background:#0c0f12eb;border:1px solid #e6e8e026;border-radius:2px;font:12.5px/1.45 var(--ui);font-variant-numeric:tabular-nums;z-index:3}
.readout strong{color:var(--ink);font-weight:600}

.explore{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:4;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid #e6e8e033;background:#0c0f12cc;color:#d9ddd5;font:500 16px/1 var(--ui);cursor:pointer}
.explore:hover,.explore:focus-visible{border-color:var(--gold);color:var(--gold)}

.status{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:min(460px,calc(100vw - 48px));margin:0;padding:14px;text-align:center;color:var(--muted);background:var(--ground);font:13px/1.7 var(--ui)}
.status p{margin:0 0 12px}
.status button{min-height:44px;padding:0 16px;font:inherit;color:var(--ink);background:transparent;border:1px solid var(--back);border-radius:2px;cursor:pointer}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (forced-colors:active){
  .explore,.status button{border-color:ButtonText;color:ButtonText;background:ButtonFace}
  canvas{forced-color-adjust:none}
  .readout{forced-color-adjust:none;background:#0c0f12;color:#e6e8e0}
}