/* Монолит — world site. Design tokens: art/3-ops/design-system.md (palette from Olya's paintings). */
/* Fonts: fallback stacks for now; drop Spectral + IBM Plex Mono .woff2 into fonts/ and enable @font-face later. */

:root{
  --bg:#14100D; --bg-void:#0C0A08; --surface:#1F1813; --surface-2:#291F18;
  --text:#EDE4D6; --text-muted:#B4A48D; --border:#3A2E24;
  --accent:#F04A23; --accent-cyan:#5AC8D8; --accent-magenta:#E0468A;
  --oxblood:#7A2B26; --teal:#3E6B62;
  --font-serif:"Spectral",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular","PT Mono",ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-serif);
  -webkit-font-smoothing:antialiased;overflow:hidden}

.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:6vh 24px;
  background:radial-gradient(120% 90% at 50% 40%,var(--surface) 0%,var(--bg) 45%,var(--bg-void) 100%)}
[hidden]{display:none!important}

/* ── Monolith ── */
.monolith{position:relative;width:180px;height:200px;display:grid;place-items:center;margin-bottom:40px}
.monolith--small{width:120px;height:132px;position:absolute;top:6vh;margin:0}
.gem{width:120px;height:150px;background:
    linear-gradient(150deg,rgba(90,200,216,.22),rgba(12,10,8,.9) 55%,rgba(240,74,35,.18));
  border:1px solid var(--border);
  clip-path:polygon(50% 0,78% 12%,96% 40%,96% 66%,78% 92%,50% 100%,22% 92%,4% 66%,4% 40%,22% 12%);
  box-shadow:inset 0 0 40px rgba(90,200,216,.15),0 0 60px rgba(12,10,8,.8)}
.monolith--small .gem{width:80px;height:100px}
.wave{position:absolute;width:180px;height:180px;border:1px solid var(--accent-cyan);border-radius:50%;
  opacity:0;animation:radiate 9s ease-out infinite}
.wave:nth-child(2){animation-delay:3s}.wave:nth-child(3){animation-delay:6s}
@keyframes radiate{0%{transform:scale(.4);opacity:.12}70%{opacity:.04}100%{transform:scale(2.6);opacity:0}}

/* ── Cover ── */
#logline{font-size:clamp(2.2rem,6vw,3.8rem);font-weight:800;line-height:1.05;
  letter-spacing:-.02em;max-width:14ch}
#sub{font-size:clamp(1rem,2.4vw,1.25rem);color:var(--text-muted);margin-top:18px;max-width:36ch;line-height:1.5}

/* ── Buttons ── */
.btn{font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);background:transparent;border:1px solid var(--border);padding:14px 26px;
  margin-top:40px;cursor:pointer;transition:border-color .16s,color .16s,background .16s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-primary{border-color:var(--accent);color:var(--accent)}
.btn-primary:hover{background:var(--accent);color:var(--bg-void)}
.glitch:hover{text-shadow:-1.5px 0 var(--accent),1.5px 0 var(--accent-cyan)}
:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:3px}

/* ── City / orbit ── */
.orbit{position:relative;width:min(78vmin,640px);height:min(78vmin,640px)}
.node{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;width:120px;
  background:none;border:0;color:inherit;cursor:pointer;font-family:inherit}
.node img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--border);
  filter:saturate(.9);transition:transform .2s,border-color .2s,box-shadow .2s}
.node .label{font:500 11px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);opacity:0;transition:opacity .2s;max-width:130px}
.node:hover .img-wrap,.node:focus-visible .img-wrap{transform:translateY(-3px)}
.node:hover img,.node:focus-visible img{border-color:var(--accent);
  box-shadow:-2px 0 0 rgba(240,74,35,.5),2px 0 0 rgba(90,200,216,.5)}
.node:hover .label,.node:focus-visible .label{opacity:1}
.node--coming{cursor:default}
.node--coming .dot{width:64px;height:64px;border-radius:50%;border:1px dashed var(--border);
  display:grid;place-items:center;color:var(--text-muted);font:400 22px/1 var(--font-mono);opacity:.5}
.node--coming:hover .label{opacity:1}
.idle{animation:drift var(--dur,7s) ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 5px))}}
.tail{position:absolute;bottom:5vh;font:400 13px/1.5 var(--font-mono);color:var(--text-muted);
  letter-spacing:.04em;max-width:32ch;text-align:center}

/* ── NPC card ── */
.card{position:fixed;inset:0;z-index:10;display:flex;background:rgba(12,10,8,.86);
  backdrop-filter:blur(6px);animation:fade .3s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.card-art{flex:0 0 58%;margin:0;position:relative}
.card-art::after{content:"";position:absolute;top:0;right:0;bottom:0;width:2px;
  background:linear-gradient(var(--accent-cyan),var(--accent-magenta));opacity:.2}
.card-art img{width:100%;height:100%;object-fit:cover;display:block}
.card-body{flex:1;padding:min(7vh,64px) min(5vw,48px);display:flex;flex-direction:column;
  justify-content:center;background:var(--surface);overflow-y:auto}
.card-name{font:700 clamp(1.5rem,3vw,2.4rem)/1.1 var(--font-serif);color:var(--accent)}
.card-loop{font:500 12px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);margin-top:10px}
.card-monologue{margin-top:28px;display:flex;flex-direction:column;gap:16px}
.card-monologue p{font:400 clamp(1.05rem,1.6vw,1.25rem)/1.62 var(--font-serif);font-style:italic;
  max-width:62ch;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.card-monologue p.on{opacity:1;transform:none}
.card-close{position:absolute;top:20px;right:24px;z-index:11;background:none;border:0;
  color:var(--text-muted);font-size:22px;cursor:pointer;font-family:var(--font-mono)}
.card-close:hover{color:var(--accent)}

@media (max-width:720px){
  .card{flex-direction:column;overflow-y:auto}
  .card-art{flex:none;aspect-ratio:3/4;width:100%}
  .card-art::after{display:none}
  .orbit{width:92vw;height:auto;min-height:70vh}
}
@media (prefers-reduced-motion:reduce){
  .wave,.idle{animation:none}
  .glitch:hover{text-shadow:none;color:var(--accent)}
  .card-monologue p{transition:none}
}