/* --- Base --- */
* { box-sizing: border-box; }
[hidden]{display:none !important;}
html, body { height: 100%; }
:root{
  --bg: #0e0c14;
  --text: #ffffff;
  --muted: #e8e8f0;
  --accent: #22c55e; /* green button */
  --accent-2: #86efac;
  --glass: rgba(255,255,255,0.06);
  --glass-strong: rgba(255,255,255,0.12);

  /* purple cursor (SVG data-URI) */
  --cursor-purple: url("data:image/svg+xml;utf8,  <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'>    <circle cx='6' cy='6' r='5' fill='%23aa00ff'/></svg>") 6 6, auto;
}
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  scroll-behavior: smooth;

  /* purple cursor by default */
  cursor: var(--cursor-purple);
}

body.no-scroll { overflow: hidden; }

/* show same purple cursor on interactive elements too */
a, button, .btn, [role="button"] { cursor: var(--cursor-purple); }

/* Keep hero visible below sticky topbar */
:root { --topbar-h: 56px; }
body { scroll-padding-top: calc(var(--topbar-h) + 12px); }

/* --- Background image layer --- */
.bg {
  position: fixed; inset: 0;
  background-image: url("background.png");
  background-size: cover;
  background-position: center 65%;
  filter: saturate(1.05) contrast(1.05);
  z-index: -4;
}
.join-wrap{ display:grid; place-items:center; gap:12px; }
.input-pass.btn.btn-join{
  appearance:none; border:none; outline:none;
  text-align:center; width:max-content;
}
.input-pass.btn.btn-join::placeholder{ color:#143525; opacity:.9; }
.join-msg{ min-height:1.2em; font-weight:700; }
.join-msg.error{ color:#ffb3b3; }
.join-msg.ok{ color:#b9ffcf; }

/* --- Animated color wash (very subtle) --- */
.overlay {
  position: fixed; inset: 0;
  background:
    radial-gradient(120vmax 120vmax at 15% 15%, rgba(170, 0, 255, 0.12), transparent 50%),
    radial-gradient(120vmax 120vmax at 85% 85%, rgba(0, 220, 255, 0.12), transparent 50%);
  animation: wash 18s ease-in-out infinite alternate;
  z-index: -3;
}
@keyframes wash {
  0%   { transform: translate3d(0,0,0) scale(1);    opacity: 0.65; }
  100% { transform: translate3d(-2%,1%,0) scale(1.05); opacity: 0.8; }
}

/* --- Floating dust (tiny dots drifting upward) --- */
.dust {
  position: fixed; inset: -20vh 0 0 0;
  pointer-events: none;
  z-index: -2;
  background-image:
    radial-gradient(2px 2px at 10% 90%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(2px 2px at 30% 95%, rgba(255,255,255,0.12), transparent 60%),
    radial-gradient(2px 2px at 55% 92%, rgba(255,255,255,0.16), transparent 60%),
    radial-gradient(2px 2px at 75% 97%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(2px 2px at 90% 93%, rgba(255,255,255,0.14), transparent 60%);
  animation: drift 22s linear infinite;
  opacity: .7;
  mix-blend-mode: screen;
}
@keyframes drift {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-20vh); }
}

/* Cursor sparkles canvas */
#cursorSparkles {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* --- Sticky top bar --- */
.topbar{
  position: sticky; top: 0; z-index: 10;
  height: var(--topbar-h);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  align-items: center;
  padding: 8px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.timer{ display:flex; gap:8px; align-items:center; justify-content:center; }
.timer .label{ opacity:.9; font-weight:600; }
.timer .value{ font-variant-numeric: tabular-nums; font-weight:800; }

/* --- Content --- */
.container {
  position: relative;
  min-height: calc(100dvh - var(--topbar-h));
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) 24px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 16px;
}

/* Logo + aura */
.logoWrap{
  position: relative;
  width: min(42vmin, 320px);
  aspect-ratio: 1/1;
}
.logo{
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  opacity: 0;
  transform: translateY(10px) scale(.98);
  animation: logoPop 800ms ease-out forwards;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.55));
  border-radius: 20px; /* rounded logo */
}
.logoAura {
  position: absolute;
  inset: -50%; /* 2x size of logo */
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(170, 0, 255, 0.85), rgba(170, 0, 255, 0) 75%),
    radial-gradient(closest-side, rgba(255, 0, 255, 0.6), rgba(255, 0, 255, 0) 90%);
  filter: blur(60px);
  animation: auraPulse 6s ease-in-out infinite alternate;
  z-index: -1;
}

/* Animated aura color shift */
@keyframes auraPulse{
  0% { transform: scale(0.98); opacity:.9;}
  100%{ transform: scale(1.06); opacity:1;}
}

/* Big title + tagline */
.guild-title{
  margin: 6px 0 0;
  font-size: clamp(2.2rem, 9vw, 5.5rem);
  letter-spacing: 2px;
  font-weight: 900;
  text-shadow: 0 3px 18px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(6px);
  animation: fadeUp 900ms 120ms ease-out forwards;
}
.tagline{
  margin: 0 0 10px;
  color: var(--muted);
  opacity: 0.95;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(6px);
  animation: fadeUp 900ms 220ms ease-out forwards;
}

/* Join button */
.btn{
  display: inline-block;
  border-radius: 14px;
  color: #0b1b12;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .2px;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  opacity: 0; transform: translateY(8px);
  animation: fadeUp 900ms 320ms ease-out forwards;
  user-select: none;
}
.btn-join{
  padding: clamp(16px, 3.3vw, 26px) clamp(26px, 6vw, 48px);
  font-size: clamp(1.15rem, 3.2vw, 2rem);
  background:
    radial-gradient(65% 100% at 50% 0%, rgba(255,255,255,.35), rgba(255,255,255,0)),
    linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow:
    0 18px 50px rgba(34,197,94,.45),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-join:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 24px 60px rgba(34,197,94,.6), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-join:active { transform: translateY(0) scale(0.995); filter: brightness(.96); }

/* Sections */
.section{ padding: clamp(36px, 6vw, 72px) 24px; }
.section-inner{ max-width: 1100px; margin: 0 auto; }
.section h2{
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  margin: 0 0 12px;
  letter-spacing: .5px;
}
.section-lore .section-inner{
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.2));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: clamp(18px, 3vw, 28px);
  backdrop-filter: blur(6px);
}
.section-lore p{
  line-height: 1.6;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: #eaf5ee;
}

/* Roster */
.section-roster .section-head{
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.legend{ display:flex; align-items:center; gap: 12px; opacity:.9; font-size:.95rem; }
.legend .dot{ vertical-align: middle; margin-right: 4px; }
.roster{
  min-height: 120px;
  background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.2));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: clamp(12px, 2.2vw, 18px);
  display: grid; gap: 8px;
}
.roster-loading{ opacity:.9; }
.roster-empty{ opacity:.8; font-style: italic; }

.member{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.member .name{ font-weight: 700; }
.member .game{ opacity:.8; font-style: italic; }
.role-badge{
  --role-color: #3BA55D;
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--role-color) 50%, #fff 0%);
  background: color-mix(in oklab, var(--role-color) 22%, transparent);
  color: #eafff3;
  font-size: .8rem; font-weight: 700; letter-spacing: .2px;
}

/* Status dots */
.dot{
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; margin-right: 2px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 12px rgba(0,0,0,.35);
}
.dot.online{ background:#3BA55D; }
.dot.idle{ background:#FEE75C; }
.dot.offline{ background:#ED4245; }

/* Map (normal) */
.section-map .map-frame{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  background: #000;
  aspect-ratio: 16/9;
}
.section-map iframe{
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0;
}

/* Map controls */
.map-controls{
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: flex; gap: 8px;
}
.map-btn{
  appearance: none; border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.55);
  color: #fff; font-weight: 900;
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.map-btn:hover{ transform: translateY(-1px); }
.map-btn:active{ transform: translateY(0); }

/* Map expanded (fills window without Fullscreen API) */
.section-map .map-frame.expanded{
  position: fixed;
  inset: 0;
  z-index: 999;
  border-radius: 0;
  aspect-ratio: auto;
  width: 100vw; height: 100dvh;
  box-shadow: none;
  background: #000;
}

/* Ambience toggle */
.sound-toggle{
  position: fixed; right: 16px; bottom: 16px; z-index: 20;
  padding: 10px 14px;
  font-weight: 800; border-radius: 12px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  color: #f1e4ff; /* slight purple tint */
  cursor: var(--cursor-purple);
}
.sound-toggle.on{ background: rgba(64,0,96,.65); border-color: rgba(170,0,255,.55); }

/* Footer */
.footer{ padding: 28px 16px 48px; opacity:.9; text-align:center; }

/* --- Animations --- */
@keyframes logoPop { from { opacity:0; transform: translateY(10px) scale(.96);} to{opacity:1; transform: translateY(0) scale(1);} }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* --- Responsive tweaks --- */
@media (max-width: 640px) {
  .topbar{ grid-template-columns: 1fr; height: auto; gap:4px; }
  :root { --topbar-h: 74px; }
}

/* Reusable hover zoom + focus */
@media (hover: hover) {
  .hover-zoom {
    transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
    transform-origin: center;
    will-change: transform, filter;
  }
  .hover-zoom:hover {
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.05);
    box-shadow: 0 16px 40px rgba(170, 0, 255, .20);
  }
  .hover-zoom:active {
    transform: translateY(0) scale(0.995);
    filter: brightness(1);
  }
}
.hover-zoom:focus-visible {
  outline: 2px solid rgba(170, 0, 255, .65);
  outline-offset: 3px;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 40px rgba(170, 0, 255, .20);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hover-zoom,
  .hover-zoom * {
    transition: none !important;
  }
}

/* Force the member + legend idle dot to be yellow everywhere */
.member .dot.idle,
.legend .dot.idle {
  background: rgb(254, 231, 92) !important; /* #FEE75C */
  mix-blend-mode: normal; /* avoid blend effects washing it out */
}

/* --- Map tweaks (no hover zoom + bigger purple buttons) --- */
.section-map .map-frame:hover {
  transform: none !important;
  filter: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.35) !important;
}
.map-controls { z-index: 5; }
.map-btn{
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  border: 1px solid rgba(170,0,255,.65) !important;
  background: rgba(64,0,96,.85) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.45) !important;
}
.map-btn:hover{
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 16px 40px rgba(170,0,255,.35) !important;
}
.map-btn:active{ transform: translateY(0) scale(0.99) !important; }