/* /css/qiros-house.css — Qiros House Atlas skin */

:root{
  --ceru:#2a7cff;
  --ceruDeep:#0a2a6b;
  --aster:#b9d7ff;
  --silver:#e8eeff;
  --glass:rgba(7,10,22,.62);
  --border:rgba(232,238,255,.18);
    --cer: 42 124 255;          /* RGB triple for rgba(var(--cer)/alpha) */
  --silRGB: 232 238 255;

  --glow: 1.0;                /* numeric glow strength (used in calc()) */
  --glowColor: rgba(42,124,255,.35);
  --glowColor2: rgba(160,225,255,.22);

  --ember:rgba(255, 196, 88, .85);
  --violet:rgba(126, 72, 255, .72);

  --radius:18px;
  --shadow:0 22px 70px rgba(0,0,0,.55);
}

/* Background: aurora veil + quiet scanlines */
body.layout--hub{
  color:var(--silver);
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(42,124,255,.18), transparent 60%),
    radial-gradient(820px 520px at 82% 22%, rgba(160,225,255,.10), transparent 58%),
    linear-gradient(180deg, #040615, #060818 55%, #040514);
  position:relative;
  overflow-x:hidden;
}

body.layout--hub::before,
body.layout--hub::after{
  content:"";
  position:fixed;
  inset:-40px;
  pointer-events:none;
  z-index:0;
}

body.layout--hub::before{
  background:
    conic-gradient(from 170deg at 50% 50%,
      rgba(42,124,255,.12),
      rgba(160,225,255,.06),
      rgba(255,255,255,.03),
      rgba(42,124,255,.10));
  filter:blur(26px);
  opacity:.9;
  animation:veil 14s ease-in-out infinite alternate;
}

body.layout--hub::after{
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 1px,
      transparent 2px,
      transparent 6px);
  opacity:.45;
  mix-blend-mode:overlay;
  animation:scan 10s linear infinite;
}

@keyframes veil{
  0%{transform:translate(-2%,-1%) scale(1.03) rotate(-1deg);}
  100%{transform:translate(2%,1%) scale(1.06) rotate(1deg);}
}
@keyframes scan{
  0%{transform:translateY(0);}
  100%{transform:translateY(18px);}
}

.header,.main{position:relative; z-index:1;}

.header{
  border-bottom:1px solid rgba(232,238,255,.12);
  backdrop-filter:blur(12px);
}

.header h1{
  margin:0;
  letter-spacing:.8px;
  font-weight:850;
  background:linear-gradient(90deg, var(--silver), var(--aster), rgba(42,124,255,1));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 22px rgba(42,124,255,.22);
}
.subtitle{color:rgba(232,238,255,.70);}

/* Panels become crystal-glass reliquaries */
.panel{
  background:linear-gradient(180deg, rgba(7,10,22,.72), rgba(5,7,16,.62));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  position:relative;
  overflow:hidden;
}
.panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 280px at 18% 0%, rgba(42,124,255,.16), transparent 60%),
    radial-gradient(820px 260px at 82% 0%, rgba(160,225,255,.10), transparent 58%);
  opacity:.9;
  pointer-events:none;
}
.panel > *{position:relative; z-index:1;}

.panel h2{
  margin:0 0 10px 0;
  padding:14px 16px;
  border-bottom:1px solid rgba(232,238,255,.12);
  letter-spacing:.6px;
  font-weight:750;
  color:rgba(232,238,255,.92);
}

/* Guest-marks watermark inside the map panel (star-sigil + thread + leaf) */
.panel--map #node-map{
  margin:0 16px 14px 16px;
  border-radius:16px;
  border:1px solid rgba(232,238,255,.14);
  background:
    radial-gradient(1000px 360px at 30% 0%, rgba(42,124,255,.14), transparent 62%),
    radial-gradient(980px 360px at 70% 0%, rgba(160,225,255,.08), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.18));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
  min-height:420px;
  position:relative;
  overflow:hidden;
}
.panel--map #node-map::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.20;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 18%, rgba(42,124,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 22% 22%, rgba(232,238,255,.65) 0 1px, transparent 2px),
    linear-gradient(90deg, transparent 0 48%, rgba(232,238,255,.10) 49%, transparent 50%),
    radial-gradient(140px 90px at 86% 18%, rgba(160,225,255,.18), transparent 65%);
}

/* Controls */
input{
  flex:1;
  background:rgba(0,0,0,.26);
  border:1px solid rgba(232,238,255,.18);
  color:rgba(232,238,255,.92);
  border-radius:12px;
  padding:11px 12px;
  outline:none;
}
input::placeholder{color:rgba(232,238,255,.45);}
input:focus{border-color:rgba(42,124,255,.55); box-shadow:0 0 0 3px rgba(42,124,255,.18);}

button{
  background:linear-gradient(180deg, rgba(42,124,255,.22), rgba(42,124,255,.08));
  border:1px solid rgba(232,238,255,.22);
  color:rgba(232,238,255,.92);
  border-radius:14px;
  padding:11px 14px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform 120ms ease, filter 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
button:hover{
  transform:translateY(-1px);
  border-color:rgba(160,225,255,.35);
  box-shadow:0 12px 34px rgba(0,0,0,.38), 0 0 22px rgba(42,124,255,.16);
  filter:brightness(1.06);
}
button:active{transform:translateY(0) scale(.99);}

/* Atlas UI injected by JS */
#node-map .atlas-ui{
  position:absolute;
  inset:12px 12px auto auto;
  width:min(340px, calc(100% - 24px));
  border-radius:16px;
  border:1px solid rgba(232,238,255,.16);
  background:rgba(6,8,18,.62);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(12px);
  padding:12px;
  z-index:5;
}
#node-map .atlas-ui h3{
  margin:0 0 6px 0;
  font-size:14px;
  letter-spacing:.4px;
}
#node-map .atlas-ui .meta{
  font-size:12px;
  color:rgba(232,238,255,.72);
  line-height:1.35;
}
#node-map .atlas-ui .badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
#node-map .badge{
  font-size:11px;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(232,238,255,.16);
  color:rgba(232,238,255,.86);
  background:rgba(0,0,0,.20);
}
#node-map .badge--ember{
  border-color:rgba(255,196,88,.28);
  box-shadow:0 0 18px rgba(255,196,88,.10);
}
#node-map .badge--violet{
  border-color:rgba(126,72,255,.28);
  box-shadow:0 0 18px rgba(126,72,255,.10);
}
#node-map .badge--locked{
  border-color:rgba(232,238,255,.22);
  background:rgba(0,0,0,.32);
}

#node-map .lockrow{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}
#node-map .lockbtn{
  flex:1;
  min-width:92px;
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  body.layout--hub::before,
  body.layout--hub::after{animation:none!important;}
}

/* ===== Nexus Div Map (Qiros style) ===== */
#node-map{
  position:relative;
}

/* The div-based map container */
#node-map #nexus{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px; /* matches your atlas space */
  border-radius: 16px;
}

/* Edges layer */
#node-map #nexus .edges{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}

/* Edge line */
#node-map #nexus .edge{
  position:absolute;
  height: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg,
    rgba(140,220,255,.05),
    rgba(140,220,255,.55),
    rgba(140,220,255,.05));
  filter: drop-shadow(0 0 10px rgba(80,160,255,.25));
  opacity: .85;
}

/* Node base */
#node-map #nexus .node{
  position:absolute;
  left: calc(var(--x) * 1%);
  top:  calc(var(--y) * 1%);
  transform: translate(-50%, -50%);
  padding: .55rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(180,220,255,.35);
  background: rgba(10,30,70,.55);
  color: rgba(235,248,255,.95);
  font: 700 12.5px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: .25px;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(80,160,255,.15),
    0 0 18px rgba(60,140,255,.25);
  z-index:3;
}

#node-map #nexus .node:hover,
#node-map #nexus .node:focus-visible{
  outline:none;
  border-color: rgba(160,225,255,.45);
  box-shadow:
    0 0 0 1px rgba(140,220,255,.35),
    0 0 28px rgba(60,140,255,.45);
}

/* Types */
#node-map #nexus .node.gate{ background: rgba(20,60,140,.62); }
#node-map #nexus .node.antechamber{ background: rgba(20,70,120,.55); }
#node-map #nexus .node.vows{
  background: rgba(40,40,20,.32);
  border-color: rgba(255,196,88,.28);
  box-shadow: 0 0 22px rgba(255,196,88,.12);
}
#node-map #nexus .node.containment{
  background: rgba(30,20,60,.38);
  border-color: rgba(126,72,255,.28);
  box-shadow: 0 0 22px rgba(126,72,255,.12);
}
#node-map #nexus .node.river{
  background: rgba(6,10,22,.55);
  border-color: rgba(232,238,255,.22);
}
#node-map #nexus .node.vault{
  background: rgba(18,22,40,.55);
  border-color: rgba(190,210,255,.22);
}

/* Locked / blood-resonance rooms */
#node-map #nexus .node.locked{
  opacity: .78;
  border-color: rgba(232,238,255,.22);
  background: rgba(0,0,0,.28);
  box-shadow: 0 0 18px rgba(232,238,255,.08);
}
#node-map #nexus .node.locked::after{
  content:"";
  display:inline-block;
  width:.55rem; height:.55rem;
  margin-left:.45rem;
  border-radius:50%;
  background: radial-gradient(circle, rgba(232,238,255,.7), rgba(232,238,255,.12));
}

/* Tooltip */
#node-map #nexus #tooltip{
  position:absolute;
  min-width: 220px;
  max-width: 340px;
  padding: .65rem .75rem;
  border-radius: 12px;
  background: rgba(5,10,20,.92);
  border: 1px solid rgba(180,220,255,.18);
  color: rgba(235,248,255,.95);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  pointer-events:none;
  opacity:0;
  transform: translate(-50%, -120%);
  transition: opacity .12s ease;
  z-index:4;
}
#node-map #nexus #tooltip strong{
  display:block;
  margin-bottom:.25rem;
  font-size: 13px;
}
#node-map #nexus #tooltip.show{ opacity:1; }

#canopy{
  position:absolute;
  inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.92;
  filter:saturate(1.35);
}
.glyph{
  position:absolute;
  transform: translate(-50%,-50%) scale(var(--s));
  opacity:.55;
  filter:
  grayscale(1)
  brightness(1.8)
  contrast(1.35)
  drop-shadow(0 0 calc(16px * var(--glow)) rgba(var(--cer)/.55))
  drop-shadow(0 0 calc(42px * var(--glow)) rgba(var(--cer)/.35))
  drop-shadow(0 0 calc(80px * var(--glow)) rgba(var(--cer)/.18));
  animation: float 14s ease-in-out infinite alternate, shimmer 5s ease-in-out infinite;
}
.glyph img{ width: 96px; height:auto; display:block; }
.glyph.tyari{ opacity:.35; }
@keyframes float{
  from{ transform: translate(-50%,-50%) translate(calc(var(--dx)*-1px), calc(var(--dy)* 1px)) rotate(calc(var(--r)*-1deg)) scale(var(--s)); }
  to  { transform: translate(-50%,-50%) translate(calc(var(--dx)* 1px), calc(var(--dy)*-1px)) rotate(calc(var(--r)* 1deg)) scale(var(--s)); }
}
@keyframes shimmer{
  0%,100%{
    filter:
      grayscale(1)
      brightness(1.7)
      contrast(1.3)
      drop-shadow(0 0 calc(16px * var(--glow)) rgba(var(--cer)/.55))
      drop-shadow(0 0 calc(42px * var(--glow)) rgba(var(--cer)/.35))
      drop-shadow(0 0 calc(80px * var(--glow)) rgba(var(--cer)/.18));
  }
  50%{
    filter:
      grayscale(1)
      brightness(2.05)
      contrast(1.4)
      drop-shadow(0 0 calc(22px * var(--glow)) rgba(var(--cer)/.70))
      drop-shadow(0 0 calc(56px * var(--glow)) rgba(var(--cer)/.42))
      drop-shadow(0 0 calc(110px * var(--glow)) rgba(var(--cer)/.22));
  }
}

/* ===== Hub add-on: Memories + Amari ===== */
.panel--memories .mem-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 980px){
  .panel--memories .mem-grid{
    grid-template-columns: 1fr;
  }
}

.mem-card{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  padding: 12px;
}

.mem-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 10px;
}
.mem-row > *{
  flex: 1 1 200px;
}

.panel--memories input,
.panel--memories select,
.panel--memories textarea{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(245,248,255,.92);
  outline:none;
}
.panel--memories textarea{
  resize: vertical;
}

.panel--memories button,
.panel--amari button{
  padding:10px 12px;
  border-radius:12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,79,168,.14);
  color: rgba(245,248,255,.92);
  cursor:pointer;
}
.panel--memories button:hover,
.panel--amari button:hover{
  background: rgba(11,79,168,.20);
  border-color: rgba(160,225,255,.22);
}

.mem-note{
  margin-top: 10px;
  opacity: .78;
  font-size: 12px;
  line-height: 1.35;
}

.mem-shelf{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-height: 180px;
  overflow:auto;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}

.mem-spine{
  flex: 0 0 auto;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  cursor:pointer;
  font-size: 12px;
  opacity: .92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mem-spine[data-status="sealed"]{
  border-color: rgba(160,225,255,.24);
}
.mem-spine[data-status="legend"]{
  border-color: rgba(255,255,255,.12);
  opacity: .84;
}
.mem-spine[data-status="quarantined"]{
  border-color: rgba(128,70,255,.26);
}

.mem-reader{
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}

.mem-reader-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  align-items:baseline;
  margin-bottom: 8px;
}

#mem-reader-body{
  margin: 0;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
  opacity: .9;
}

/* ===== Active room + traveler marker ===== */

#node-map #nexus .node.is-current{
  border-color: rgba(160,225,255,.95);
  background: rgba(24,78,170,.82);
  color: #f6fbff;
  box-shadow:
    0 0 0 1px rgba(200,240,255,.55),
    0 0 18px rgba(80,160,255,.55),
    0 0 34px rgba(120,210,255,.38);
  transform: translate(-50%, -50%) scale(1.06);
}

#node-map #nexus .node.is-current::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  border:1px solid rgba(160,225,255,.28);
  box-shadow: 0 0 24px rgba(160,225,255,.22);
  pointer-events:none;
}

#node-map #nexus #traveler{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  left:0;
  top:0;
  transform: translate(-50%, -50%);
  pointer-events:none;
  z-index:6;
  background:
    radial-gradient(circle at 35% 35%,
      rgba(255,255,255,1) 0 18%,
      rgba(180,235,255,.98) 19% 42%,
      rgba(74,162,255,.92) 43% 68%,
      rgba(74,162,255,0) 69%);
  box-shadow:
    0 0 10px rgba(180,235,255,.95),
    0 0 24px rgba(74,162,255,.72),
    0 0 42px rgba(74,162,255,.42);
  transition:
    left .55s cubic-bezier(.22,.61,.36,1),
    top .55s cubic-bezier(.22,.61,.36,1),
    opacity .2s ease;
}

#node-map #nexus #traveler::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background: radial-gradient(circle,
    rgba(160,225,255,.22) 0%,
    rgba(160,225,255,.08) 45%,
    rgba(160,225,255,0) 70%);
}

#node-map #nexus .edge.is-path{
  height:3px;
  background: linear-gradient(90deg,
    rgba(180,235,255,.10),
    rgba(180,235,255,.88),
    rgba(180,235,255,.10));
  filter:
    drop-shadow(0 0 10px rgba(120,210,255,.45))
    drop-shadow(0 0 18px rgba(74,162,255,.25));
}