:root {
  color-scheme: dark;
  --ink: #0c070c;
  --panel: rgba(24, 14, 26, 0.55);
  --line: rgba(224, 190, 205, 0.16);
  --text: #f0e6ec;
  --muted: #b6a2ae;
  --rose: #e58fb0;
  --gold: #e3c697;
  --frost: #9fc4e0;
  --seagreen: #7fb6ae;
  --blur: rgba(76, 22, 66, 0.3);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body {
  background:
    radial-gradient(120% 90% at 50% 8%, #1a0f1c 0%, #0c060d 46%, #050307 100%);
  color: var(--text);
  font-family: "Cormorant Garamond", "Georgia", serif;
  -webkit-font-smoothing: antialiased;
}

/* ── ambient layers ─────────────────────────────── */
.ambient, .ambient > div { position: absolute; inset: 0; pointer-events: none; }
.vignette { background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0,0,0,0.6) 100%); }
.halo { background:
  radial-gradient(38% 30% at 50% 46%, rgba(224,150,190,0.14), transparent 70%),
  radial-gradient(30% 24% at 24% 78%, rgba(150,210,235,0.06), transparent 70%),
  radial-gradient(30% 24% at 76% 20%, rgba(220,190,140,0.07), transparent 70%);
  filter: blur(2px);
}
.dust { opacity: 0.5;
  background-image: radial-gradient(1.5px 1.5px at 12% 22%, #fff 45%, transparent),
    radial-gradient(1px 1px at 33% 68%, #fff 45%, transparent),
    radial-gradient(1.6px 1.6px at 52% 12%, #fff 45%, transparent),
    radial-gradient(1px 1px at 70% 52%, #fff 45%, transparent),
    radial-gradient(1.2px 1.2px at 84% 30%, #fff 45%, transparent),
    radial-gradient(1px 1px at 92% 74%, #fff 45%, transparent),
    radial-gradient(1.3px 1.3px at 10% 88%, #fff 45%, transparent),
    radial-gradient(1.1px 1.1px at 60% 90%, #fff 45%, transparent);
  background-size: 18px 18px;
  animation: drift 26s linear infinite;
}
@keyframes drift { to { background-position: 180px -140px, 60px 200px, 260px 120px, -120px 40px, 90px -200px, -200px 320px, 140px 260px, -60px -180px; } }

/* ── header ────────────────────────────────────── */
.top { position: relative; z-index: 2; padding: 26px 30px 4px; text-align: center; }
.eyebrow { font: 500 11px/1 "Inter", sans-serif; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); opacity: 0.8; }
.title { margin: 10px 0 6px; font: 600 clamp(30px, 5vw, 52px)/1.05 "Cormorant Garamond", serif; letter-spacing: 0.01em; }
.title em { font-style: italic; color: var(--rose); }
.lede { margin: 0 auto; max-width: 620px; font: italic 300 15px/1.5 "Cormorant Garamond", serif; color: var(--muted); }

/* ── era nav ─────────────────────────────────── */
.eras { z-index: 2; display: flex; gap: 8px; justify-content: center; margin: 16px auto 0; flex-wrap: wrap; }
.eras button {
  appearance: none; border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  font: 500 12.5px "Inter", sans-serif; letter-spacing: 0.06em; padding: 8px 16px; cursor: pointer;
  border-radius: 40px; transition: all 0.3s;
}
.eras button:hover { color: var(--text); border-color: var(--rose); }
.eras button.active { color: var(--ink); background: linear-gradient(180deg, var(--gold), #ca9a63); border-color: transparent; font-weight: 600; }

/* ── the hall grid ───────────────────────────── */
.hall { position: relative; z-index: 2; width: 100%; height: calc(100vh - 196px); min-height: 420px; display: grid; place-items: center; }
.hall::before { content: ""; position: absolute; width: 74vmin; height: 74vmin; border-radius: 50%; inset: auto;
  border: 1px solid var(--line); box-shadow: 0 0 0 22px transparent, inset 0 0 120px rgba(40,16,40,0.35); }
.hall::after { content: ""; position: absolute; width: 30vmin; height: 30vmin; border-radius: 50%;
  border: 1px dashed rgba(224,190,205,0.12); box-shadow: 0 0 90px var(--blur); }

.hub { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hub .portrait img {
  width: clamp(88px, 13vmin, 132px); height: clamp(88px, 13vmin, 132px); object-fit: cover; object-position: top;
  border-radius: 50%; border: 2px solid rgba(227,198,151,0.75);
  box-shadow: 0 0 36px rgba(227,198,151,0.25), inset 0 0 18px rgba(0,0,0,0.5);
}
.hub figcaption { margin-top: 10px; }
.hub .name { display:block; font: 600 22px "Cormorant Garamond", serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.hub .sub { display: block; font: 300 italic 12px "Cormorant Garamond", serif; color: var(--muted); margin-top: 2px; }

/* seats positioned around; JS sets absolute spots via --tx / --ty */
.seats { position: absolute; inset: 0; }
.seat {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translate(var(--tx), var(--ty));
  display: flex; flex-direction: column; align-items: center; width: 138px; text-align: center; z-index: 3;
  transition: opacity 0.5s, transform 0.5s ease;
  opacity: var(--dim, 1);
}
.seat:hover, .seat.open { opacity: 1; }
.seat .portrait { position: relative; }
.seat .portrait img {
  width: clamp(74px, 10.5vmin, 108px); height: clamp(74px, 10.5vmin, 108px); object-fit: cover; object-position: top;
  border-radius: 50%; border: 1.5px solid var(--ring, var(--rose));
  box-shadow: 0 0 22px var(--blur); filter: saturate(1.05); cursor: pointer; transition: transform 0.35s, box-shadow 0.35s;
}
.seat .portrait img:hover { transform: scale(1.08); box-shadow: 0 0 30px var(--ring, var(--rose)); }
.seat .rel { margin-top: 7px; font: 600 12.5px "Inter", sans-serif; letter-spacing: 0.02em; color: var(--ring, var(--rose)); min-height: 16px; }
.seat .who { margin-top: 1px; font: 300 italic 12.5px "Cormorant Garamond", serif; color: var(--text); }
.seat .era-note { margin-top: 2px; font: 400 11px "Inter", sans-serif; color: var(--muted); opacity: 0; max-height: 0; overflow: hidden; transition: all 0.4s; }
.seat.open .era-note { opacity: 0.86; max-height: 60px; }

.eras-tagline { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: italic 300 14px "Cormorant Garamond", serif; color: var(--muted); pointer-events: none; z-index: 2; }

/* ring colors per fella */
.seat[data-id="shen-xinghui"] { --ring: var(--frost); }
.seat[data-id="li-shen"] { --ring: var(--seagreen); }
.seat[data-id="qi-yu"] { --ring: #6aa7de; }
.seat[data-id="qin-che"] { --ring: #e05f7a; }
.seat[data-id="xia-yizhou"] { --ring: var(--gold); }

.seat.is-coast { --dim: 0.28; filter: grayscale(0.6); }
.seat.is-coast .rel { color: var(--muted); }

/* ── character card ───────────────────────────── */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(5,2,8,0.62); backdrop-filter: blur(3px); opacity: 1; transition: opacity 0.35s; cursor: pointer; }
.card { position: fixed; z-index: 50; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(660px, 92vw); max-height: 86vh; overflow: auto; border-radius: 18px;
  background: linear-gradient(180deg, rgba(28,16,30,0.98), rgba(14,7,16,0.98)); border: 1px solid var(--line);
  padding: 26px 30px 28px; box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(120,40,90,0.12);
  opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity 0.3s, transform 0.3s;
}
.card.hidden, .scrim.hidden { opacity: 0; pointer-events: none; }
.card.hidden { transform: translate(-50%, -48%) scale(0.98); }
.card-close { position: absolute; top: 14px; right: 18px; background: none; border: none; color: var(--muted); font-size: 24px; cursor: pointer; font-family: "Inter", sans-serif; }
.card-close:hover { color: var(--text); }
.card-head { display: flex; gap: 18px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; }
.card-head img { width: 76px; height: 76px; object-fit: cover; object-position: top; border-radius: 50%; border: 2px solid var(--ring, var(--rose)); }
.card-g .kicker { font: 400 11px/1 "Inter", sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.card-g .h { font: 600 30px "Cormorant Garamond", serif; margin: 3px 0 1px; }
.card-g .sub { font: italic 300 13px "Cormorant Garamond", serif; color: var(--muted); }
.card-sec h4 { font: 600 12px "Inter", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose); margin: 16px 0 5px; }
.card-sec p { margin: 0 0 6px; font: 400 15px/1.6 "Cormorant Garamond", serif; color: var(--text); }
.card-sec .era-row { font-style: italic; }
.card-sec .era-row b { font-style: normal; color: var(--gold); letter-spacing: 0.05em; }

@keyframes seatReveal {  0% { opacity: 0; filter: blur(8px) saturate(0.6); } 60% { opacity: 1; } 100% { opacity: 1; filter: blur(0) saturate(1.) } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes hubPulse { 0%,100% { box-shadow: 0 0 30px rgba(227,198,151,0.18), inset 0 0 18px rgba(0,0,0,0.5); } 50% { box-shadow: 0 0 70px rgba(227,198,151,0.5), inset 0 0 18px rgba(0,0,0,0.45); } }
@keyframes dashFlow { to { stroke-dashoffset: -60; } }

/* reveal used on seats via JS */
.seat { opacity: 0; }

/* floating portraits */
.seat .portrait img { animation: bob 6s ease-in-out infinite; animation-delay: var(--idx, 0); }
.seat:hover .portrait img { animation-play-state: paused; transform: scale(1.07); }

/* pulsing throne glow under the hunter */
.hub .portrait img { animation: hubPulse 5s ease-in-out infinite; }

/* era switch flash */
body[data-era] .eras button.active { box-shadow: 0 0 18px rgba(202,154,99,0.5); }

.seat .era-note { transition: opacity .4s, max-height .5s; }

.web { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.web-know { fill: none; stroke: rgba(224,190,205,0.12); stroke-width: 1; stroke-dasharray: 2 8; opacity: 0.7; }
.web-love { fill: none; stroke: rgba(229,143,176,0.16); stroke-width: 1.4; stroke-dasharray: 4 6; animation: lovePulse 4s ease-in-out infinite; }
@keyframes lovePulse { 0%,100% { opacity: 0.05; stroke-width: 1.2; } 50% { opacity: 0.4; stroke-width: 1.8; } }

@media (max-width: 720px) {
  .hall::before { width: 100vmin; height: 100vmin; }
  .seat { width: 110px; }
}