/* Explore-mode shell: the canvas, the HUD frame, the overlays. Kit-local chrome —
   primitives come from the design system, this file only positions them. */
.ag-world{position:relative;width:100%;height:100%;overflow:hidden;background:var(--bg-void)}
.ag-world__cv{display:block;image-rendering:pixelated}
.ag-world__scan{position:absolute;inset:0;pointer-events:none;background:var(--tex-scanline);opacity:.35;mix-blend-mode:overlay}
.wk{position:fixed;inset:0;display:grid;grid-template-rows:1fr;background:var(--bg-void);overflow:hidden}
.wk__stage{position:relative;inset:0}
.wk__top{position:absolute;top:var(--sp-4);left:var(--sp-4);right:var(--sp-4);display:flex;align-items:flex-start;gap:var(--sp-3);z-index:20;pointer-events:none}
.wk__top>*{pointer-events:auto}
.wk__id{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:color-mix(in oklab,var(--ink-1000) 76%,transparent);border:var(--bw-hair) solid var(--line);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);clip-path:var(--clip-notch-4)}
.wk__face{width:36px;height:36px;image-rendering:pixelated;border:var(--bw-hair) solid var(--line-strong)}
.wk__name{font:var(--type-pixel-title);font-size:var(--fs-caption);letter-spacing:var(--ls-pixel);color:var(--text-strong);line-height:1.2}
.wk__role{font:var(--type-hud);letter-spacing:var(--ls-hud);text-transform:uppercase;color:var(--accent);margin-top:3px}
.wk__stats{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);background:color-mix(in oklab,var(--ink-1000) 76%,transparent);border:var(--bw-hair) solid var(--line);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);clip-path:var(--clip-notch-4)}
.wk__spacer{flex:1 1 auto}
.wk__right{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-3)}
.wk__hint{position:absolute;bottom:var(--sp-4);left:50%;transform:translateX(-50%);display:flex;gap:var(--sp-5);align-items:center;padding:var(--sp-2) var(--sp-4);background:color-mix(in oklab,var(--ink-1000) 72%,transparent);border:var(--bw-hair) solid var(--line);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);clip-path:var(--clip-notch-4);z-index:20;transition:opacity var(--t-hover)}
.wk__prompt{position:absolute;bottom:calc(var(--sp-4) + 56px);left:50%;transform:translateX(-50%);z-index:22;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4);background:var(--surface-raised);border:var(--bw) solid var(--accent);clip-path:var(--clip-notch-4);box-shadow:var(--glow-accent);animation:ag-pop var(--dur-3) var(--ease-spring)}
.wk__prompt b{font-family:var(--font-mono);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--text-strong);font-weight:var(--fw-medium)}
/* The area announcement. It used to sit at 44% — dead centre, so it landed on the player
   and had to compete with whatever tile was behind it. Same floating treatment as before,
   just lifted clear of the action, with a tight dark halo around the glyphs so they read
   over grass, stone, clay or water without needing a panel behind them. */
.wk__zone{position:absolute;top:20%;left:0;right:0;text-align:center;z-index:15;pointer-events:none;animation:ag-zone var(--dur-scene) var(--ease-out) forwards}
.wk__zone span{display:inline-block;font-family:var(--font-pixel);font-size:clamp(22px,3.4vw,38px);letter-spacing:var(--ls-pixel);color:var(--text-strong);text-shadow:4px 4px 0 var(--ink-1000),0 2px 0 var(--ink-1000),2px 0 0 var(--ink-1000),-2px 0 0 var(--ink-1000),0 -2px 0 var(--ink-1000),0 0 40px color-mix(in oklab,var(--accent) 60%,transparent)}
.wk__zone i{display:block;font:var(--type-hud);letter-spacing:var(--ls-hud);text-transform:uppercase;color:var(--accent);margin-top:var(--sp-3);font-style:normal;text-shadow:0 2px 0 var(--ink-1000),2px 0 0 var(--ink-1000),-2px 0 0 var(--ink-1000),0 -2px 0 var(--ink-1000)}
@keyframes ag-zone{0%{opacity:0;transform:translateY(10px) scale(.98)}18%{opacity:1;transform:none}72%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
.wk__dpad{position:absolute;bottom:var(--sp-6);left:var(--sp-6);z-index:24;display:none}
@media (pointer:coarse){.wk__dpad{display:block}.wk__hint{display:none}}
/* boot */
.wk__boot{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--bg-void);transition:opacity var(--dur-5) var(--ease-swift)}
.wk__boot[data-gone="true"]{opacity:0;pointer-events:none}
.wk__bootin{width:min(520px,86vw);display:grid;gap:var(--sp-6);justify-items:center;text-align:center}
.wk__wordmark{font-family:var(--font-pixel);font-size:34px;letter-spacing:var(--ls-pixel);color:var(--text-strong);line-height:1.3}
.wk__wordmark em{color:var(--accent);font-style:normal}
.wk__bootin .ag-progress{width:100%}
.wk__sub{font:var(--type-hud);letter-spacing:var(--ls-hud);text-transform:uppercase;color:var(--text-muted);line-height:1.9}
.wk__press{font-family:var(--font-pixel);font-size:var(--fs-caption);letter-spacing:var(--ls-pixel);color:var(--accent);animation:ag-blink 1.1s steps(2,end) infinite;text-transform:uppercase}
/* modal content */
.wk__body{display:grid;gap:var(--sp-6)}
.wk__lede{font:var(--type-prose);color:var(--text-body);max-width:var(--measure-prose)}
.wk__lede+.wk__lede{margin-top:calc(var(--sp-4) * -1)}
.wk__grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4)}
.wk__list{display:grid;gap:var(--sp-3);margin:0;padding:0;list-style:none}
.wk__list li{display:flex;gap:var(--sp-3);font-size:var(--fs-body-s);color:var(--text-body);line-height:var(--lh-body)}
.wk__list li::before{content:"";flex:0 0 auto;width:6px;height:6px;background:var(--accent);margin-top:9px}
.wk__note{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-faint);border-top:var(--border-hair);padding-top:var(--sp-3)}
.wk__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:var(--sp-4);justify-items:start}
.wk__foot{display:flex;gap:var(--sp-3);flex-wrap:wrap}

/* --- navigation HUD: identity, checklist, minimap --- */
.wk__face{display:block;width:32px;height:32px;overflow:hidden;border:var(--bw-hair) solid var(--line-strong);image-rendering:pixelated;flex:0 0 auto}
.wk__face>*{display:block}
.wk__quests{background:color-mix(in oklab,var(--ink-1000) 82%,transparent);border:var(--bw-hair) solid var(--line);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);clip-path:var(--clip-notch-4);display:grid;grid-template-rows:auto 1fr;max-height:44vh;overflow:hidden}
.wk__questbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-bottom:var(--bw-hair) solid var(--line);font:var(--type-hud);letter-spacing:var(--ls-hud);text-transform:uppercase;color:var(--accent)}
.wk__x{background:none;border:0;color:var(--text-muted);font-family:var(--font-mono);font-size:15px;cursor:pointer;line-height:1;padding:2px 4px}
.wk__x:hover{color:var(--accent)}
.wk__questbody{overflow-y:auto;padding:var(--sp-2)}
.wk__qgroup{display:grid;gap:2px;margin-bottom:var(--sp-3)}
.wk__qzone{font:var(--type-hud);letter-spacing:var(--ls-hud);text-transform:uppercase;color:var(--text-faint);padding:var(--sp-2) var(--sp-2) 4px}
.wk__q{display:flex;align-items:center;gap:var(--sp-2);width:100%;text-align:left;background:none;border:0;padding:5px var(--sp-2);cursor:pointer;font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-body);clip-path:var(--clip-notch-4);transition:background-color var(--t-hover),color var(--t-hover)}
.wk__q i{width:6px;height:6px;flex:0 0 auto;display:block}
.wk__q span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk__q em{font-style:normal;font-size:var(--fs-hud);letter-spacing:var(--ls-hud);text-transform:uppercase;color:var(--text-faint)}
.wk__q:hover{background:var(--surface-hover);color:var(--text-strong)}
.wk__q[data-done="true"] span{color:var(--text-muted)}
.wk__q[data-active="true"]{background:var(--accent-wash);color:var(--accent)}
.wk__how{display:grid;grid-template-columns:minmax(120px,160px) 1fr;gap:var(--sp-4);align-items:baseline;padding-bottom:var(--sp-3);border-bottom:var(--border-hair)}
.wk__how b{font-family:var(--font-mono);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--accent);font-weight:var(--fw-medium);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.wk__how span{font-size:var(--fs-body-s);color:var(--text-body);line-height:var(--lh-body)}
.wk__promptor{font:var(--type-hud);letter-spacing:var(--ls-hud);text-transform:uppercase;color:var(--text-faint)}
@media (max-width:760px){.wk__quests{display:none}}

/* --- artifact cards: bespoke pixel plates instead of a single sprite --- */
.wk__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:var(--sp-4);justify-items:start}
.wk__card{position:relative;display:grid;width:252px;text-align:left;background:var(--surface-panel);border:2px solid var(--line);clip-path:var(--clip-notch-8);cursor:pointer;overflow:hidden;padding:0;transition:transform var(--dur-4) var(--ease-spring),border-color var(--t-hover),box-shadow var(--dur-4) var(--ease-swift)}
.wk__card:hover{transform:translate3d(0,-6px,0) rotate(-.6deg);box-shadow:var(--shadow-3)}
.wk__card[data-rarity="published"]{border-color:color-mix(in oklab,var(--violet-400) 60%,transparent)}
.wk__card[data-rarity="ongoing"],.wk__card[data-rarity="exact"]{border-color:color-mix(in oklab,var(--accent) 48%,transparent)}
.wk__card[data-rarity="private"]{border-style:dashed;border-color:var(--line-strong)}
.wk__card[data-found="false"]{opacity:.6}
.wk__cardtop{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 11px;font:var(--type-hud);letter-spacing:var(--ls-hud);text-transform:uppercase;color:var(--text-faint)}
.wk__well{position:relative;height:132px;background:var(--ink-1000);border-top:1px solid var(--line-hairline);border-bottom:1px solid var(--line-hairline);overflow:hidden}
.wk__well canvas{display:block;image-rendering:pixelated}
.wk__well::after{content:"";position:absolute;inset:0;background:var(--tex-scanline);opacity:.22;pointer-events:none}
.wk__shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.14) 48%,transparent 61%);background-size:230% 100%;background-position:-45% 0;pointer-events:none;transition:background-position .75s var(--ease-swift)}
.wk__card:hover .wk__shine{background-position:150% 0}
.wk__cardbody{display:grid;gap:7px;padding:12px 12px 10px}
.wk__cardtitle{font-family:var(--font-ui);font-weight:500;font-size:15px;letter-spacing:-.02em;line-height:1.25;color:var(--text-strong)}
.wk__cardline{font-size:12.5px;line-height:1.55;color:var(--text-muted)}
.wk__cardfoot{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-top:1px solid var(--line-hairline);font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--fg-4)}

/* --- the figure inside an artifact panel --- */
.wk__fig{margin:0;display:grid;gap:0;border:var(--bw-hair) solid var(--line);clip-path:var(--clip-notch-8);background:var(--ink-1000);box-shadow:var(--shadow-2)}
.wk__fig .wk__well{height:auto;border:0;display:grid;place-items:center;padding:var(--sp-5) var(--sp-4);background:radial-gradient(circle at 50% 62%,color-mix(in oklab,var(--accent) 9%,transparent),transparent 70%),var(--ink-1000);width:auto!important}
.wk__fig canvas{max-width:100%;height:auto}
.wk__fig figcaption{font-family:var(--font-mono);font-size:11px;line-height:1.6;letter-spacing:.03em;color:var(--fg-4);padding:var(--sp-3) var(--sp-4);border-top:var(--bw-hair) solid var(--line-hairline);background:var(--surface-sunken)}

/* --- explanatory figures: crisp vector, real labels, sitting beside the text --- */
.wk__figrow{display:flex;flex-wrap:wrap;gap:var(--sp-6);align-items:flex-start}
.wk__figrow>.wk__svg{flex:1 1 320px;min-width:0;max-width:440px;height:auto;background:var(--ink-1000);border:var(--bw-hair) solid var(--line);clip-path:var(--clip-notch-8)}
.wk__figtext{flex:1 1 270px;min-width:0;display:grid;gap:var(--sp-4);align-content:start}
.wk__svg text{font-family:var(--font-mono);fill:#8b8494}
.wk-cutnode{animation:wk-cutnode 7s linear infinite}
.wk-cutedge{animation:wk-cutedge 7s linear infinite}
.wk-x{animation:wk-x 7s linear infinite}
.wk-ring{animation:wk-ring 7s linear infinite;transform-origin:52px 95px}
.wk-bar{animation:wk-bar 7s linear infinite}
.wk-eq{animation:wk-eq 7s linear infinite;transform-origin:center}
.wk-flow{stroke-dasharray:4 5;animation:wk-flow 1.4s linear infinite}
@keyframes wk-cutnode{0%,26%{fill:#d7d2dd}28%,32%{fill:#ff7a90}34%,44%{fill:#ff7a90}46%,86%{fill:transparent}88%,100%{fill:#cbb0e6}}
@keyframes wk-cutedge{0%,30%{stroke:#4a4552;opacity:1}32%,44%{stroke:#ff7a90;opacity:1}46%,86%{opacity:0}88%,100%{stroke:#4a4552;opacity:1}}
@keyframes wk-x{0%,30%{opacity:0}34%,44%{opacity:1}46%,100%{opacity:0}}
@keyframes wk-ring{0%,44%{opacity:0;transform:scale(.4)}48%{opacity:.8;transform:scale(1)}62%,100%{opacity:0;transform:scale(2.1)}}
@keyframes wk-bar{0%,54%{opacity:.35}58%{opacity:1;fill:#efeaee}64%,100%{opacity:1}}
@keyframes wk-eq{0%,66%{opacity:.35}70%{opacity:1;transform:scale(1.18)}76%,100%{opacity:1;transform:scale(1)}}
@keyframes wk-flow{to{stroke-dashoffset:-18}}
.wk-shim{animation:wk-shim 4.4s linear infinite}
@keyframes wk-shim{0%,70%{stroke:#5c6b80}78%{stroke:#a8bdd6}86%,100%{stroke:#5c6b80}}
.wk-grow{transform-origin:150px 50%;animation:wk-grow 4.4s cubic-bezier(.16,1,.3,1) infinite}
@keyframes wk-grow{0%{transform:scaleX(0)}22%,100%{transform:scaleX(1)}}
.wk__svg text{font-family:var(--font-mono)}