/* ===== Palette (colorful) ===== */
:root{
  --bg:#07090f; --ink:#f2f4ff; --muted:#b8bdd9; --panel:#0f1320; --panel2:#12182a;
  --fire:#ff8a8a; --water:#6fd3ff; --earth:#aaff6a; --wind:#dfe8ff;
  --light:#ffd86a; --shadow:#b58cff; --blood:#ff6a6a; --ice:#8ed7ff; --storm:#72baff;
  --pixel:6px;
}
/* Reset */
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;color:var(--ink);background:var(--bg);font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:32px 20px}

/* Ambient layers */
.bg{position:fixed;inset:0;pointer-events:none;z-index:-2}
.nebula{
  background:
    radial-gradient(1000px 600px at 20% -10%, rgba(255,138,138,.18), transparent),
    radial-gradient(1100px 800px at 90% 20%, rgba(174,255,106,.16), transparent),
    radial-gradient(1200px 800px at 30% 110%, rgba(111,211,255,.18), transparent);
  filter:saturate(120%);
}
.stars{
  background-image:
    radial-gradient(2px 2px at 20% 40%, #fff8  , transparent 60%),
    radial-gradient(2px 2px at 60% 10%, #fff6  , transparent 60%),
    radial-gradient(2px 2px at 80% 70%, #fff9  , transparent 60%),
    radial-gradient(2px 2px at 35% 85%, #fff7  , transparent 60%);
  animation: twinkle 8s linear infinite;
}
.motes{
  background-image:
    radial-gradient(4px 4px at 10% 20%, #ff8a8a99, transparent 60%),
    radial-gradient(4px 4px at 70% 50%, #6fd3ff99, transparent 60%),
    radial-gradient(4px 4px at 30% 80%, #aaff6a99, transparent 60%);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes twinkle{50%{opacity:.6}} @keyframes drift{0%{transform:translateY(-8px)}100%{transform:translateY(8px)}}

/* Pixel panel */
.pix{position:relative;background:linear-gradient(180deg,var(--panel),var(--panel2))}
.pix:before{content:"";position:absolute;inset:0;border:var(--pixel) solid #000;filter:drop-shadow(0 0 0 #000)}
.pad{padding:16px}

/* Buttons */
.btn{display:inline-grid;place-items:center;padding:14px 18px;text-transform:uppercase;letter-spacing:.06em;font-weight:900}
.btn.-primary{background:linear-gradient(#1b1e33,#121527);outline:var(--pixel) solid #000;border:var(--pixel) solid var(--light);color:#fff;box-shadow:0 0 0 0 rgba(255,216,106,.6);animation:btnPulse 2.6s ease-in-out infinite}
.btn.-ghost{background:transparent;outline:var(--pixel) solid #000;border:var(--pixel) solid #334}
.btn:hover{filter:brightness(1.1)}
@keyframes btnPulse{50%{box-shadow:0 0 18px 0 rgba(255,216,106,.25)}}

/* Top Nav */
.topnav{position:sticky;top:0;z-index:50}
.topnav .nav-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:10px;align-items:center;font-weight:1000;letter-spacing:.06em}
.brand-logo{width:32px;height:32px}
.links{display:flex;gap:14px;flex-wrap:wrap}
.links a{opacity:.92}
.links a:hover{opacity:1;filter:drop-shadow(0 0 6px #fff3)}

/* Hero */
.hero{padding:64px 0 24px;position:relative}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center}
@media (max-width:960px){.hero-inner{grid-template-columns:1fr}}
.title{margin:0 0 6px}
.grad{
  font-size:54px;line-height:1.02;font-weight:1000;letter-spacing:.04em;
  background:linear-gradient(90deg,var(--fire),var(--light),var(--earth),var(--water),var(--shadow));
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(4px 4px 0 #000)
}
.subtitle{display:block;font-style:normal;color:#e4e8ff;opacity:.9;font-weight:700}
.lead{color:var(--muted);max-width:40ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-emblem{justify-self:center;padding:8px}
.pulse{animation:pulse 4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.05)}}
.sparks rect{animation:blink 1.6s steps(1,end) infinite}
.sparks rect:nth-child(2){animation-delay:.4s}.sparks rect:nth-child(3){animation-delay:.9s}.sparks rect:nth-child(4){animation-delay:1.2s}
@keyframes blink{50%{opacity:.4}}

/* NEW: hero video & essence break */
.hero-video{margin-top:14px;display:flex;justify-content:center}
.hero-video video{
  width:420px;max-width:80%;border-radius:12px;border:3px solid #000;
  box-shadow:0 0 30px rgba(0,255,200,.35);image-rendering:pixelated
}
.essence-break{margin:70px auto 10px;text-align:center}
.essence-break img{
  width:480px;max-width:95%;border-radius:10px;border:3px solid #000;
  box-shadow:0 0 20px rgba(0,255,200,.28);image-rendering:pixelated
}

/* Element ribbons */
.ribbons{position:absolute;inset:auto 0 -12px 0;display:flex;justify-content:center;gap:10px;pointer-events:none}
.rib{display:block;width:20%;height:8px;filter:blur(.2px);animation:slide 10s linear infinite}
.rib.r-fire {background:repeating-linear-gradient(90deg,#5a1111 0 6px,#ff8a8a 6px 12px)}
.rib.r-water{background:repeating-linear-gradient(90deg,#0f2a4a 0 6px,#6fd3ff 6px 12px)}
.rib.r-earth{background:repeating-linear-gradient(90deg,#16330f 0 6px,#aaff6a 6px 12px)}
.rib.r-wind {background:repeating-linear-gradient(90deg,#1b2147 0 6px,#dfe8ff 6px 12px)}
@keyframes slide{to{transform:translateX(40px)}}

/* Sections */
.section{padding:42px 0}
.section-title{font-size:28px;margin:0 0 14px;text-align:center;text-shadow:4px 4px 0 #000}
.muted{color:var(--muted)}
.mb{margin-bottom:18px}
.center{text-align:center}
.mt{margin-top:18px}
.tiny{font-size:.9rem}

/* Fade-in on scroll */
.fade{opacity:0;transform:translateY(12px);transition:600ms ease}
.fade.in{opacity:1;transform:none}

/* Grids */
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid.two,.grid.three{grid-template-columns:1fr}}

/* Bullets */
.bullets{margin:0;padding-left:18px}
.bullets li{margin:.35rem 0}

/* Chips (colorful) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-grid;place-items:center;padding:6px 10px;border:var(--pixel) solid #000;background:#0f1120;font-weight:900}
.chip.fire{color:#ffb1b1;border-color:var(--fire)}
.chip.water{color:#bfe9ff;border-color:var(--water)}
.chip.earth{color:#d7ffb7;border-color:var(--earth)}
.chip.wind{color:#f2f5ff;border-color:#b9c6ff}
.chip.blood{color:#ffc0c0;border-color:var(--blood)}
.chip.ice{color:#e4f6ff;border-color:var(--ice)}
.chip.light{color:#ffefb3;border-color:var(--light)}
.chip.shadow{color:#e0d2ff;border-color:var(--shadow)}
.chip.storm{color:#d5ebff;border-color:var(--storm)}
.chip.unique{color:#fff;border-color:#fff}

/* Divider */
.divider{display:grid;place-items:center;padding:10px 0}
.divider span{display:block;width:220px;height:8px;background:repeating-linear-gradient(90deg,#000 0 8px,#fff 8px 16px);filter:drop-shadow(0 0 8px #fff4)}

/* Dungeon Select */
.portal-wrap{position:relative;display:grid;place-items:center}
.portals{display:block;width:100%;max-width:980px;image-rendering:pixelated;border:var(--pixel) solid #000}
.portals-large{max-width:1080px}
.glow{box-shadow:0 0 22px 0 rgba(111,211,255,.25), 0 0 32px 0 rgba(174,255,106,.15)}

/* Steps */
.step{position:relative}
.step-num{position:absolute;top:-10px;right:-10px;background:#10142a;border:var(--pixel) solid #000;padding:6px 10px;font-weight:900}

/* HUD bars (kept for color flavor in Elements) */
.bars{display:flex;gap:16px;flex-wrap:wrap}
.bar{display:grid;gap:8px;padding:8px}
.bar-label{padding:10px 12px 0}

/* Team */
.avatar{width:100%;height:260px;object-fit:cover;object-position:center;background:#0f1120;border:var(--pixel) solid #000}
.pixelated{image-rendering: pixelated;}
.glow-pulse{animation:glow 3.6s ease-in-out infinite}
@keyframes glow{50%{filter:brightness(1.07) drop-shadow(0 0 14px #fff2)}}

/* Footer */
footer{padding-bottom:40px;text-align:center}

/* Pixel panel chrome */
.pix{background:linear-gradient(180deg,var(--panel),var(--panel2))}
.pix:before{content:"";position:absolute;inset:0;border:var(--pixel) solid #000;filter:drop-shadow(0 0 0 #000)}
/* Let clicks pass through the pixel border layer */
.pix::before { pointer-events: none; }

/* ===== FAQ: clean alignment, clickable, and pretty ===== */
/* Kill the pixel-overlay border ONLY for FAQ items so it doesn't offset/capture clicks */
#faq details.pix::before { content: none; }

/* Details container */
#faq details {
  margin: 14px 0;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: var(--pixel) solid #000;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 22px #0008;
}

/* Summary (header row) */
#faq details summary {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; cursor: pointer; font-weight: 900; color: #fff; user-select: none;
  list-style: none;
}

/* Remove default markers */
#faq details summary::marker,
#faq details summary::-webkit-details-marker { display: none; }

/* Custom arrow */
#faq details summary::before {
  content: "▶"; font-size: 14px; opacity: .9; transform: translateY(1px);
  transition: transform .2s ease; margin-right: 6px; color: var(--light);
}
#faq details[open] summary::before { transform: rotate(90deg); }

/* Divider when open */
#faq details[open] summary { border-bottom: var(--pixel) solid #000; }

/* Body content */
#faq details > *:not(summary) {
  padding: 14px 18px; margin: 0; color: var(--muted);
  background: linear-gradient(180deg, #0f1320aa, #12182aaa);
}

/* Optional: keep FAQ centered on very wide screens */
@media (min-width: 1200px) {
  #faq .wrap, #faq .section { max-width: 1000px; }
}
/* Hide any ghost controls (Chrome/Safari/Edge) */
.hero-video video::-webkit-media-controls-enclosure,
.hero-video video::-webkit-media-controls,
.hero-video video::-webkit-media-controls-start-playback-button,
.hero-video video::-webkit-media-controls-overlay-play-button,
.hero-video video::-webkit-media-controls-panel,
.hero-video video::-webkit-media-controls-pip-button,
.hero-video video::-webkit-media-controls-cast-button {
  display: none !important;
}

/* Firefox overlay play button */
.hero-video video::-moz-media-controls,
.hero-video video::-moz-media-controls-playbutton,
.hero-video video::-moz-media-controls-overlay-play-button {
  display: none !important;
}

/* Just in case a default control is still reserving space */
.hero-video video { background:#000; -webkit-appearance:none; }