/* ============================================================
   EVERSIM PLATFORM — app shell, screens, HUD
   ============================================================ */
@import url("./tokens.css");
@import url("./inworld.css");

#world-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; display: block;
}
.grain, .scanlines {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
}
.grain {
  opacity: var(--fx-grain);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.scanlines {
  opacity: var(--fx-scanlines);
  mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 3px);
}

/* screens stack on top of the world */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  padding: var(--pad-x);
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease-out-expo), visibility .6s;
}
.screen.is-on { opacity: 1; visibility: visible; }
.screen.veil { background: radial-gradient(60% 60% at 50% 40%, rgba(5,6,11,.4), rgba(5,6,11,.86)); backdrop-filter: blur(6px); }

/* ---------- BOOT ---------- */
#boot .orb {
  width: clamp(120px, 18vw, 200px); aspect-ratio: 1; border-radius: 50%;
  background: var(--g-plasma-aqua);
  filter: blur(2px);
  animation: breathe 2.6s var(--ease-in-out-expo) infinite;
  box-shadow: 0 0 80px color-mix(in srgb, var(--c-plasma) 60%, transparent);
}
@keyframes breathe { 0%,100%{transform:scale(.86);opacity:.7} 50%{transform:scale(1.06);opacity:1} }
#boot .pre-kicker { margin-top: 1.6rem; }
#boot h1 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.2rem,3vw,2rem); margin:.4rem 0; }
#boot .bar { width: min(420px, 70vw); height: 3px; background: var(--c-line); border-radius: 4px; overflow: hidden; margin-top: 1rem; }
#boot .bar i { display:block; height:100%; width:0; background: var(--g-plasma-aqua); transition: width .25s linear; }
#boot .pct { font-family: var(--f-mono); font-size: .8rem; color: var(--c-muted); margin-top:.6rem; }

/* ---------- generic glass card ---------- */
.card {
  width: min(560px, 92vw);
  background: var(--c-glass);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
}
.card.wide { width: min(880px, 94vw); }
.card h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.04; margin:.6rem 0 1rem; }
.card p.lead { color: var(--c-muted); line-height: 1.6; }

/* buttons */
.btn {
  position: relative; display:inline-flex; align-items:center; gap:.5rem;
  padding: .9rem 1.4rem; border-radius: 999px;
  border: 1px solid var(--c-line); background: rgba(255,255,255,.04);
  font-weight: 700; letter-spacing:.01em;
  transition: transform .3s var(--ease-out-expo), background .3s, border-color .3s, box-shadow .3s;
}
.btn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c-aqua) 60%, transparent); }
.btn.solid { background: var(--g-plasma-aqua); border: none; color: #07070e; box-shadow: 0 14px 40px -14px color-mix(in srgb, var(--c-plasma) 80%, transparent); }
.btn.solid:hover { box-shadow: 0 18px 50px -12px color-mix(in srgb, var(--c-aqua) 80%, transparent); }
.btn.ghost { background: transparent; }
.btn.block { width: 100%; justify-content:center; }
.btn[disabled] { opacity:.4; pointer-events:none; }

.field { display:grid; gap:.4rem; margin:.8rem 0; }
.field label { font-family: var(--f-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c-muted); }
.field input {
  background: rgba(0,0,0,.3); border:1px solid var(--c-line); border-radius: var(--radius-sm);
  padding: .85rem 1rem; color:var(--c-white); font-size:1rem;
}
.field input:focus { outline:none; border-color: var(--c-aqua); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-aqua) 18%, transparent); }
.row { display:flex; gap:.8rem; flex-wrap:wrap; }
.row.end { justify-content:flex-end; }
.divider { height:1px; background: var(--c-line); margin: 1.2rem 0; }
.center { text-align:center; }

/* ---------- ONBOARDING QUIZ ---------- */
#quiz .qstep { display:none; }
#quiz .qstep.is-on { display:block; animation: rise .5s var(--ease-out-expo); }
@keyframes rise { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
#quiz .progress { display:flex; gap:.4rem; margin-bottom:1.4rem; }
#quiz .progress i { flex:1; height:3px; border-radius:3px; background:var(--c-line); transition:background .4s; }
#quiz .progress i.done { background: var(--g-plasma-aqua); }
.choices { display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:.7rem; margin-top:1.2rem; }
.choice {
  display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; text-align:left;
  padding: 1rem; border-radius: var(--radius-sm); border:1px solid var(--c-line);
  background: rgba(255,255,255,.03); transition: all .25s var(--ease-out-expo);
}
.choice .ic { font-size:1.4rem; }
.choice strong { font-weight:700; }
.choice small { color:var(--c-muted); font-size:.78rem; }
.choice:hover { transform: translateY(-3px); border-color: color-mix(in srgb,var(--c-plasma) 60%, transparent); }
.choice.sel { border-color: var(--c-aqua); background: color-mix(in srgb, var(--c-plasma) 14%, transparent); box-shadow: inset 0 0 0 1px var(--c-aqua); }

/* ============================================================
   HUD — отображается когда юзер «в мире»
   ============================================================ */
#hud { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity:0; visibility:hidden; transition: opacity .6s; }
#hud.is-on { opacity:1; visibility:visible; }
#hud > * { pointer-events: auto; }

/* topbar */
.hud-top {
  position: absolute; top: 0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem var(--pad-x);
  background: linear-gradient(180deg, rgba(5,6,11,.6), transparent);
}
.hud-brand { font-family: var(--f-display); font-weight: 900; letter-spacing:.02em; font-size:1.05rem; }
.hud-brand sup { color: var(--c-aqua); }
.hud-era-name { font-family: var(--f-mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c-muted); }
.hud-tools { display:flex; gap:.5rem; align-items:center; flex-wrap:nowrap; justify-content:flex-end; max-width:74vw; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px; }
.hud-tools::-webkit-scrollbar { display:none; }
.hud-tools .chip-btn { flex:0 0 auto; }
/* в 2D-режиме прячем 3D-HUD-контролы, чтобы они не крали клики у 2D-поля (топбар оставляем для возврата) */
body.m2d-on .hud-rail, body.m2d-on .voice-orb, body.m2d-on #hud-text, body.m2d-on .hud-left, body.m2d-on .assistant-dock { display:none !important; }
.chip-btn {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .8rem; border-radius:999px; border:1px solid var(--c-line);
  background: var(--c-glass); backdrop-filter: blur(10px);
  font-family: var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  transition: border-color .25s, transform .25s;
}
.chip-btn:hover { border-color: var(--c-aqua); transform: translateY(-1px); }
.chip-btn .dot { width:7px;height:7px;border-radius:50%;background:var(--c-aqua);box-shadow:0 0 8px var(--c-aqua); }
.chip-btn.is-rec .dot { background: var(--c-err); box-shadow:0 0 10px var(--c-err); animation: blink 1s infinite; }
@keyframes blink { 50%{opacity:.3} }

/* resource meter */
.res-meter { display:flex; align-items:center; gap:.6rem; }
.res-meter .bar { width: 120px; height:6px; border-radius:6px; background: var(--c-line); overflow:hidden; }
.res-meter .bar i { display:block; height:100%; background: var(--g-plasma-aqua); transition: width .4s; }
.res-meter span { font-family:var(--f-mono); font-size:.72rem; color:var(--c-muted); }

/* era rail (bottom) */
.hud-rail {
  position:absolute; left:50%; bottom: 1.2rem; transform: translateX(-50%);
  display:flex; gap:.4rem; padding:.5rem; border-radius:999px;
  background: var(--c-glass); border:1px solid var(--c-line); backdrop-filter: blur(14px);
  max-width: calc(100vw - 2rem); overflow-x:auto;
}
.era-pill {
  display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
  padding:.5rem .85rem; border-radius:999px; border:1px solid transparent; background:transparent;
  font-size:.8rem; font-weight:600; transition: all .25s;
}
.era-pill em { font-family:var(--f-mono); font-style:normal; font-size:.62rem; color:var(--c-muted); }
.era-pill .gl { font-size:.95rem; }
.era-pill:hover { background: rgba(255,255,255,.05); }
.era-pill.is-on { background: color-mix(in srgb,var(--c-plasma) 22%, transparent); border-color: var(--c-aqua); }

/* left dock: role + realism */
.hud-left {
  position:absolute; left: var(--pad-x); top:50%; transform: translateY(-50%);
  display:grid; gap:.8rem; width: 220px;
}
.dock {
  background: var(--c-glass); border:1px solid var(--c-line); border-radius: var(--radius);
  padding: 1rem; backdrop-filter: blur(14px);
}
.dock h4 { margin:0 0 .7rem; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--c-muted); }
.role-line { font-size:.82rem; color:var(--c-muted); margin-top:.5rem; min-height: 2.4em; }
.seg { display:flex; flex-wrap:wrap; gap:.3rem; }
.seg button {
  padding:.32rem .55rem; border-radius:8px; border:1px solid var(--c-line); background:transparent;
  font-size:.72rem; transition: all .2s;
}
.seg button.is-on { background: var(--g-plasma-aqua); color:#07070e; border:none; }
.realism input[type=range] { width:100%; accent-color: var(--c-aqua); }
.realism .lbl { display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:.62rem; color:var(--c-muted); margin-top:.3rem; }
.realism .now { color: var(--c-aqua); font-weight:700; }

/* voice orb (floating, bottom-right) */
.voice-orb {
  position:absolute; right: var(--pad-x); bottom: 1.4rem;
  width: 84px; height:84px; border-radius:50%;
  display:grid; place-items:center;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb,var(--c-plasma) 80%,transparent), color-mix(in srgb,var(--c-aqua) 40%, transparent));
  border:1px solid rgba(255,255,255,.2);
  box-shadow: 0 0 40px -6px color-mix(in srgb,var(--c-plasma) 70%, transparent);
  transition: transform .3s var(--ease-bounce), box-shadow .3s;
}
.voice-orb:hover { transform: scale(1.06); }
.voice-orb.is-rec { box-shadow: 0 0 60px -2px var(--c-err); animation: orbpulse 1.1s infinite; }
@keyframes orbpulse { 50%{ box-shadow: 0 0 80px 4px var(--c-err);} }
.voice-orb .ic { font-size:1.6rem; }
.voice-orb .ring { position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--c-aqua); opacity:0; }
.voice-orb.is-rec .ring { animation: ringout 1.4s infinite; }
@keyframes ringout { from{opacity:.6; transform:scale(.9)} to{opacity:0; transform:scale(1.5)} }

/* assistant transcript dock (above orb) */
.assistant-dock {
  position:absolute; right: var(--pad-x); bottom: calc(1.4rem + 100px);
  width: min(380px, 80vw); max-height: 46vh; display:flex; flex-direction:column; gap:.5rem;
  opacity:0; transform: translateY(10px); transition: all .4s var(--ease-out-expo); pointer-events:none;
}
.assistant-dock.is-on { opacity:1; transform:none; pointer-events:auto; }
.msg { padding:.7rem .9rem; border-radius: var(--radius-sm); font-size:.86rem; line-height:1.5; max-width:90%; }
.msg.you { align-self:flex-end; background: color-mix(in srgb,var(--c-plasma) 22%, transparent); border:1px solid var(--c-line); }
.msg.ai { align-self:flex-start; background: var(--c-glass); border:1px solid var(--c-line); backdrop-filter: blur(10px); }
.msg .who { font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c-muted); display:block; margin-bottom:.25rem; }

/* command hint that floats in center on era change */
.world-flash {
  position:absolute; left:50%; top: 30%; transform: translate(-50%,-50%);
  text-align:center; opacity:0; pointer-events:none;
}
.world-flash.is-on { animation: flashIn 2.6s var(--ease-out-expo); }
@keyframes flashIn { 0%{opacity:0;transform:translate(-50%,-40%) scale(.96)} 12%{opacity:1} 80%{opacity:1} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.02)} }
.world-flash .gl { font-size: clamp(3rem,10vw,7rem); line-height:1; filter: drop-shadow(0 0 30px var(--c-plasma)); }
.world-flash h3 { font-family:var(--f-display); font-weight:800; font-size: clamp(1.4rem,5vw,3rem); margin:.4rem 0 .2rem; }
.world-flash p { color:var(--c-muted); font-family:var(--f-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }

#voice-partial.is-on { opacity: 1 !important; }

/* toasts */
#toasts { position: fixed; top: 5rem; left:50%; transform:translateX(-50%); z-index: 50; display:grid; gap:.5rem; pointer-events:none; }
.toast {
  background: var(--c-glass); border:1px solid var(--c-line); border-radius:999px;
  padding:.6rem 1.1rem; font-size:.82rem; backdrop-filter: blur(12px);
  animation: rise .4s var(--ease-out-expo); box-shadow:0 14px 40px -16px rgba(0,0,0,.7);
}
.toast.warn { border-color: color-mix(in srgb,var(--c-warn) 60%, transparent); }
.toast.err { border-color: color-mix(in srgb,var(--c-err) 60%, transparent); }

/* ============================================================
   KILLER FEATURES — пресеты, paywall, плавающая панель
   ============================================================ */
.side-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(420px, 92vw); z-index: 30;
  background: color-mix(in srgb, var(--c-ink) 88%, transparent);
  border-left: 1px solid var(--c-line); backdrop-filter: blur(20px);
  padding: 1.4rem; transform: translateX(105%); transition: transform .5s var(--ease-out-expo);
  overflow-y: auto;
}
.side-panel.is-on { transform: none; }
.sp-head { display:flex; align-items:center; justify-content:space-between; }
.sp-head h3 { font-family:var(--f-display); font-weight:800; font-size:1.2rem; margin:0; }
.sp-close { width:34px; height:34px; border-radius:50%; border:1px solid var(--c-line); background:transparent; font-size:1.2rem; line-height:1; }
.sp-close:hover { border-color: var(--c-err); color: var(--c-err); }
.sp-sub { color: var(--c-muted); font-size:.85rem; margin:.6rem 0 1.2rem; line-height:1.5; }

.presets-grid { display:grid; grid-template-columns: 1fr 1fr; gap:.7rem; }
.preset { display:flex; flex-direction:column; gap:.25rem; align-items:flex-start; text-align:left;
  padding: 1rem; border-radius: var(--radius-sm); border:1px solid var(--c-line); background: rgba(255,255,255,.03); transition:.25s; }
.preset:hover { transform: translateY(-3px); border-color: var(--c-aqua); box-shadow: 0 16px 40px -22px var(--c-plasma); }
.preset .pg { font-size:1.5rem; }
.preset strong { font-size:.92rem; }
.preset small { color: var(--c-muted); font-size:.74rem; }

.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 1.5rem;
  background: rgba(5,6,11,.7); backdrop-filter: blur(8px); opacity:0; visibility:hidden; transition:.4s; }
.modal.is-on { opacity:1; visibility:visible; }
.modal-card { width: min(720px, 96vw); max-height: 90vh; overflow-y:auto; background: var(--c-ink);
  border:1px solid var(--c-line); border-radius: var(--radius); padding: 1.6rem; box-shadow:0 40px 100px -30px #000; }
.pw-plans { display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:.8rem; margin: 1rem 0 1.4rem; }
.pw-plan { position:relative; padding:1.2rem; border:1px solid var(--c-line); border-radius:var(--radius-sm); background: rgba(255,255,255,.03); }
.pw-plan.pop { border-color: var(--c-plasma); box-shadow: inset 0 0 0 1px var(--c-plasma); }
.pw-tag { position:absolute; top:-9px; right:12px; background:var(--g-plasma-aqua); color:#06070e; font-family:var(--f-mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.12em; padding:.2rem .55rem; border-radius:999px; }
.pw-plan h4 { font-family:var(--f-display); margin:0 0 .2rem; }
.pw-price { font-size:1.5rem; font-weight:800; margin-bottom:.3rem; }
.pw-price small { font-size:.78rem; color:var(--c-muted); font-weight:400; }
.pw-plan .btn { margin-top:.8rem; }
.pw-topups { border-top:1px solid var(--c-line); padding-top:1rem; }
.pw-topup-row { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.7rem; }

.float-panel { position: fixed; top: 5rem; right: var(--pad-x); z-index: 35; width: 280px;
  background: var(--c-glass); border:1px solid var(--c-line); border-radius: var(--radius);
  backdrop-filter: blur(18px); box-shadow:0 30px 80px -30px #000; opacity:0; visibility:hidden;
  transform: translateY(10px); transition: opacity .35s, transform .35s, visibility .35s; }
.float-panel.is-on { opacity:1; visibility:visible; transform:none; }
.fp-head { display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem;
  border-bottom:1px solid var(--c-line); cursor: grab; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted); }
.fp-head:active { cursor: grabbing; }
.fp-body { padding: 1rem; display:grid; gap:1.1rem; }
.fp-group { display:grid; gap:.5rem; }
.tgl { display:flex; align-items:center; gap:.5rem; font-size:.85rem; cursor:pointer; }
.tgl input { accent-color: var(--c-aqua); width:16px; height:16px; }
.fp-select { width:100%; background: rgba(0,0,0,.3); border:1px solid var(--c-line); border-radius: var(--radius-sm); padding:.6rem .8rem; color:var(--c-white); }

/* responsive */
@media (max-width: 860px) {
  .hud-left { display:none; }
  .hud-top { padding:.7rem 1rem; }
  .res-meter .bar { width: 70px; }
  .assistant-dock { left: 1rem; right:1rem; width:auto; bottom: 7.5rem; }
  .voice-orb { right: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
}