:root{--paper: #f2ede1;--paper2: #e7e0cf;--ink: #1c1a17;--ink-dim: #7a7263;--line: #c9c0ad;--accent: #a23b2e;--safe-b: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:Iowan Old Style,Palatino Linotype,Georgia,serif;touch-action:none;overscroll-behavior:none}#stage{position:fixed;inset:0}#osd{position:absolute;inset:0;background:var(--paper)}#osd canvas{image-rendering:auto}#dof{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.1;background:radial-gradient(circle at 50% 46%,transparent 46%,rgba(28,26,23,.22) 100%);will-change:opacity;background:radial-gradient(ellipse at center,transparent 45%,rgba(46,40,30,.5) 100%)}#depth-vignette{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .5s ease;background:radial-gradient(circle at 50% 48%,transparent 42%,rgba(28,26,23,.55) 100%)}.hotspot{position:relative;width:96px;height:96px;border:0;background:transparent;padding:0;cursor:pointer;transition:opacity .3s ease;pointer-events:auto}.hotspot[data-visible=false]{pointer-events:none}.aff.glow{position:absolute;inset:12px;border-radius:50%;border:3px solid var(--ink);background:radial-gradient(circle,color-mix(in srgb,var(--ink) 12%,transparent) 0%,transparent 68%);animation:breathe-glow 3s ease-in-out infinite}.hotspot[data-explored=true] .aff.glow{border-color:var(--ink-dim);border-style:dashed;background:none;animation:none;opacity:.55}.hotspot[data-explored=true]:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:26px;color:var(--ink-dim);opacity:.8}.aff.mark{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%) rotate(45deg);border:4px solid var(--ink);background:var(--paper);animation:breathe-mark 2.6s ease-in-out infinite}.hotspot[data-kind=context] .aff.mark{border-color:var(--ink-dim);border-style:dashed}.hotspot[data-state=found] .aff.mark{background:var(--ink);animation:none}.hotspot.relight .aff.mark{animation:relight 1.1s ease-in-out 2}.hotspot-label{position:absolute;left:50%;top:calc(100% - 6px);transform:translate(-50%);white-space:nowrap;font-size:13px;letter-spacing:.03em;color:var(--ink);background:color-mix(in srgb,var(--paper) 82%,transparent);padding:3px 9px;border-radius:3px;opacity:0;transition:opacity .2s ease;pointer-events:none}.hotspot[data-visible=true]:hover .hotspot-label{opacity:.95}@keyframes breathe-glow{0%,to{transform:scale(.82);opacity:.55}50%{transform:scale(1.06);opacity:1}}@keyframes breathe-mark{0%,to{opacity:.55;filter:blur(1px)}50%{opacity:1;filter:blur(0)}}@keyframes relight{0%,to{box-shadow:0 0 0 transparent;border-color:var(--ink)}50%{box-shadow:0 0 26px var(--accent);border-color:var(--accent);transform:translate(-50%,-50%) rotate(45deg) scale(1.4)}}#grain-lock{position:absolute;inset:0;pointer-events:none;z-index:5;background:repeating-linear-gradient(45deg,transparent 0 8px,color-mix(in srgb,var(--ink) 22%,transparent) 8px 10px),repeating-linear-gradient(-45deg,transparent 0 8px,color-mix(in srgb,var(--ink) 16%,transparent) 8px 10px);animation:shimmer .6s steps(3) infinite;opacity:.7}#grain-lock:after{content:"◹ locked";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font-size:15px;letter-spacing:.35em;color:var(--ink);text-transform:uppercase;background:color-mix(in srgb,var(--paper) 80%,transparent);padding:6px 14px}@keyframes shimmer{0%{background-position:0 0,0 0}to{background-position:6px 0,-6px 0}}.hint{position:absolute;left:50%;top:22px;transform:translate(-50%);z-index:8;font-size:15px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);opacity:0;transition:opacity .5s ease;pointer-events:none;text-align:center}.hint[data-show=true]{opacity:.9;animation:breathe 2.6s ease-in-out infinite}@keyframes breathe{0%,to{opacity:.45}50%{opacity:.9}}.toast{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%) scale(.96);z-index:9;max-width:min(80vw,560px);text-align:center;font-size:clamp(20px,4.4vw,34px);line-height:1.25;color:var(--ink);padding:20px 26px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:color-mix(in srgb,var(--paper) 92%,transparent);box-shadow:0 8px 40px #1c1a172e;opacity:0;transition:opacity .4s ease,transform .4s ease}.toast[data-show=true]{opacity:1;transform:translate(-50%,-50%) scale(1)}.finale{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--paper) 40%,transparent) 40%,var(--paper) 100%);pointer-events:none;animation:fadein 1.2s ease forwards}.finale-title{font-size:clamp(30px,9vw,82px);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);border:3px solid var(--accent);padding:22px 34px;background:color-mix(in srgb,var(--paper) 70%,transparent)}@keyframes fadein{0%{opacity:0}to{opacity:1}}.breadcrumbs{position:absolute;left:0;right:0;bottom:0;z-index:7;display:flex;align-items:center;gap:10px;padding:10px 14px calc(10px + var(--safe-b));background:linear-gradient(0deg,var(--paper) 22%,transparent);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.breadcrumbs::-webkit-scrollbar{display:none}.bc-frames{display:flex;align-items:center;gap:6px;flex:0 0 auto}.bc-thumb{position:relative;width:58px;height:58px;flex:0 0 auto;border:1px solid var(--line);border-radius:4px;background-size:260%;background-position:center;cursor:pointer;opacity:.7;transition:opacity .2s,border-color .2s,transform .2s;overflow:hidden}.bc-thumb[data-active=true]{opacity:1;border-color:var(--ink);transform:translateY(-2px)}.bc-thumb span{position:absolute;left:0;right:0;bottom:0;font-size:9px;letter-spacing:.02em;text-align:center;color:var(--ink);background:color-mix(in srgb,var(--paper) 82%,transparent);padding:1px 0}.bc-sep{flex:0 0 auto;align-self:center;color:var(--ink-dim);opacity:.7;font-size:18px}.bc-tag{flex:0 0 auto;font-size:10px;letter-spacing:.3em;color:var(--ink-dim);padding:0 2px 0 8px;border-left:1px solid var(--line)}.bc-clues{display:flex;gap:8px;flex:1 1 auto}.bc-chip{flex:0 0 auto;font-family:inherit;font-size:13px;color:var(--ink);background:var(--paper2);border:1px solid var(--ink-dim);border-radius:20px;padding:8px 14px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}.bc-chip[data-state=selected]{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 12%,var(--paper2));transform:translateY(-2px)}.bc-chip[data-state=linked]{border-color:var(--accent);color:var(--ink-dim);text-decoration:line-through;cursor:default}.bc-chip[data-kind=context]{border-style:dashed;border-color:var(--line);color:var(--ink-dim);font-style:italic;cursor:default;opacity:.85}.hidden{display:none!important}
