/* =========================================
   Avalon Heroes — Site + Updates Stylesheet
   Cartoon blue fantasy vibe (continuous background)
   Clean, centred, roomy spacing
   Lightbox + video modal (FIXED)
   ========================================= */

@font-face {
  font-family:'TitanOne';
  src: url('../assets/Fonts/TitanOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------
   Theme tokens
----------------------------- */
:root{
  --sky1: #2f7dff;
  --sky2: #246ae9;
  --sky3: #184fbf;
  --sky4: #0c2f7a;

  --panel: rgba(255,255,255,.14);
  --panel2: rgba(255,255,255,.10);

  --line: rgba(255,255,255,.22);
  --line2: rgba(255,255,255,.34);

  --text: #f6fbff;
  --muted: rgba(246,251,255,.78);

  --accent: #4ff6ff;
  --accent2:#2a7bff;

  --shadow: 0 18px 50px rgba(0,0,0,.22);
  --shadow2: 0 10px 28px rgba(0,0,0,.18);
  --radius: 22px;

  --section-gap: clamp(34px, 5vw, 64px);
  --card-pad: 22px;
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; height:100%; }
html{ overflow-x:hidden; background:#246ae9; }
body{
  min-height: 100vh;
  background: transparent;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  position: relative;
}


/* Paint the actual background on html so it always fills the viewport */
html{
  background:
    radial-gradient(1100px 700px at 50% -220px, rgba(255,255,255,.35), transparent 70%),
    radial-gradient(900px 600px at 18% 12%, rgba(79,246,255,.22), transparent 72%),
    radial-gradient(900px 600px at 82% 18%, rgba(42,123,255,.22), transparent 72%),
    linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 36%, var(--sky3) 70%, var(--sky4) 100%);
  background-attachment: fixed;
}

/* Soft “magic dust” sparkles */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .45;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(2px 2px at 28% 42%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(2px 2px at 44% 26%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(2px 2px at 62% 58%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(2px 2px at 78% 34%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(2px 2px at 90% 64%, rgba(255,255,255,.12), transparent 60%);
}

/* Gentle vignette */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1400px 900px at 50% 10%, rgba(0,0,0,.06), transparent 70%),
    radial-gradient(1600px 1200px at 50% 100%, rgba(0,0,0,.10), transparent 70%);
  opacity: 1;
}

/* Media / links */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ===============================
   HERO BANNER (TOP OF SITE)
================================ */
.site-hero{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #246ae9;
  padding: 0 !important;
  margin: 0;
}

.hero-banner{
  position: relative;
  height: clamp(260px, 38vw, 480px);
  width: 100%;
  background-image: url("../assets/Banner.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 -60px 120px rgba(36,106,233,.25);
  background-color: #246ae9;
  transform: translateZ(0);
  display:block;
  outline: 0;
  border: 0;
  backface-visibility: hidden;
}

.hero-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22));
}

.hero-banner::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-6px;
  height: 320px;
  background: linear-gradient(
    to bottom,
    rgba(36,106,233,0) 0%,
    rgba(36,106,233,0.15) 25%,
    rgba(36,106,233,0.45) 55%,
    rgba(36,106,233,0.75) 80%,
    rgba(36,106,233,1) 100%
  );
  pointer-events: none;
}

.hero-logo{
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  width: min(520px, 88vw);
  height: auto;
  z-index: 2;
  filter:
    drop-shadow(0 16px 36px rgba(0,0,0,.35))
    drop-shadow(0 0 24px rgba(79,246,255,.25));
}

.main-nav{
  display:flex;
  justify-content:center;
  gap:14px;
  padding: 18px 0 8px;
  position: relative;
  z-index: 3;
}

.main-nav a{
  padding: 10px 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(246,251,255,.95);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  backdrop-filter: blur(10px);
}
.main-nav a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.16);
}

/* -----------------------------
   Layout helpers
----------------------------- */
.container, .wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 18px 64px;
  position: relative;
  z-index: 1;
}

/* -----------------------------
   Header / Nav
----------------------------- */
header{ padding: 18px 0 10px; position: relative; z-index: 1; }
header.container, header.wrap{ padding: 0 18px; }

header h1{
  margin: 0 0 6px;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.3px;
  text-shadow: 0 10px 24px rgba(0,0,0,.22);
}
header p{
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.5;
  text-shadow: 0 8px 18px rgba(0,0,0,.16);
}

nav{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
nav a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: rgba(246,251,255,.92);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(0,0,0,.14);
  backdrop-filter: blur(10px);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
nav a:hover{
  text-decoration:none;
  transform: translateY(-2px);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.32);
}

/* Optional logo header */
.top-header{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 30px 18px 8px;
  position: relative;
  z-index: 1;
}
.main-logo{
  max-width: 420px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.28));
}

/* -----------------------------
   Core UI blocks (Hero / Cards)
----------------------------- */
.hero{
  margin-top: 26px;
  padding: var(--card-pad);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,.22);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.hero-title{
  margin: 0 0 10px;
  font-family: 'TitanOne', system-ui, sans-serif;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.02;
  letter-spacing: 1.15;

  /* Blooket-style outline */
  -webkit-text-stroke: 8px rgba(20, 55, 120, 0.85);
  paint-order: stroke fill;

  /* Blooket-style shadow (crisp, not blurry) */
  text-shadow:
  0 6px 0 rgba(10, 35, 85, 0.45),
  0 10px 16px rgba(0,0,0,0.25);
  color: #fff;
}

.hero-title span {
  display:block;
  font-size: 1.15em;
  -webkit-text-stroke: 9px rgba(20, 55, 120, 0.9);
}

.lead{
  margin: 0 18 18px;
  color: rgba(246,251,255,.90);
  font-size: 20px;
  line-height: 1.65;
  text-shadow: 0 8px 18px rgba(0,0,0,.14);
}

.cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 8px 0 10px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(246,251,255,.95);
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 12px 24px rgba(0,0,0,.14);
  backdrop-filter: blur(10px);
  transition: transform .12s ease, background .12s ease, filter .12s ease;
}
.btn:hover{
  text-decoration:none;
  transform: translateY(-2px);
  background: rgba(255,255,255,.14);
}
.btn.primary{
  border: none;
  color: #042436;
  background: linear-gradient(180deg, #73f7ff 0%, #2aa7ff 55%, #1f76ff 100%);
  box-shadow: 0 10px 0 rgba(0,0,0,.16), 0 18px 34px rgba(0,0,0,.20);
}
.btn.primary:hover{ filter: brightness(1.05); }
.btn.disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
  transform:none;
}

.note{
  margin-top: 12px;
  color: rgba(246,251,255,.80);
  font-size: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.20);
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: var(--section-gap) 0 0;
}
.card{
  padding: 18px;
  border-radius: var(--radius);
  background: var(--panel2);
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(12px);
}
.card h2{ margin:0 0 8px; font-size: 16px; letter-spacing: -0.2px; }
.card p{ margin:0; color: rgba(246,251,255,.82); line-height:1.5; font-size: 14px; }
.muted{ color: var(--muted); }

/* -----------------------------
   Updates Page — entry cards + meta pills
----------------------------- */
.update-entry{
  margin-top: 0;
  margin-bottom: var(--section-gap);
  padding: var(--card-pad);
  border: 2px solid rgba(255,255,255,.20);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
/* ===============================
   Updates Page Title (Styled)
================================ */

.updates-header h1{
  font-family: 'TitanOne', system-ui, sans-serif;
  font-size: clamp(34px, 4.2vw, 56px);
  letter-spacing: 0.8px;
  margin: 0 0 10px;

  /* bright readable fill */
  color: #f7fcff;

  /* clean depth (not puffy) */
  text-shadow:
    0 3px 0 rgba(6, 24, 58, 0.35),
    0 10px 24px rgba(0,0,0,0.28),
    0 0 18px rgba(79,246,255,0.22);
}

/* nice divider under title */
.updates-header h1::after{
  content:"";
  display:block;
  width: min(340px, 70%);
  height: 4px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(79,246,255,0.95), transparent);
  opacity: 0.7;
}

/* subtitle also a bit nicer */
.updates-header p{
  font-size: 1.05rem;
  color: rgba(246,251,255,.86);
  text-shadow: 0 10px 20px rgba(0,0,0,.20);
  text-align: center;
}

.update-entry h2{
  margin: 0 0 10px;
  font-size: 26px;
  letter-spacing: -0.2px;
  text-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.update-entry p{
  color: rgba(246,251,255,.92);
  line-height: 1.7;
  margin: 14px 0;
}
.update-entry ul{
  margin: 10px 0 28px 18px;
  line-height: 1.75;
  color: rgba(246,251,255,.88);
}
.update-entry h4{
  margin: 18px 0 10px;
  font-size: 16px;
  color: rgba(246,251,255,.95);
}

.update-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 0 0 12px;
  color: rgba(246,251,255,.84);
  font-size: 13px;
}
.update-meta span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 11px;
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
}

/* -----------------------------
   Dev gallery thumbnails (images + video preview)
   FIXED:
   - auto-fit grid so no empty column space
   - thumbnail can be small, without affecting modal
----------------------------- */
.dev-gallery{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  align-items: start;
}

.dev-gallery .thumb{
  position: relative;
  border: 2px solid rgba(255,255,255,.18);
  padding: 0;
  background: rgba(255,255,255,.10);
  border-radius: 18px;
  overflow:hidden;
  cursor: zoom-in;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, filter .12s ease;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}

.dev-gallery .thumb:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.14);
  filter: brightness(1.03);
}

.dev-gallery img{
  width:100%;
  height:240px;
  object-fit: cover;
}

/* Inline video preview (if you use <video class="inline-video">) */
.dev-gallery .thumb video.inline-video{
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  pointer-events: none;
  background: #000;
}

/* Video thumb button behaviour */
.dev-gallery .thumb.video-thumb{
  cursor: pointer;
}

/* Play overlay badge (bottom-right pill) */
.play-badge{
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0,0,0,.52);
  color: #fff;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  border: 2px solid rgba(255,255,255,.20);
  backdrop-filter: blur(8px);
}

/* Optional: smaller “button style” thumbnails (if your video thumb is a <button>) */
.video-thumb{
  position: relative;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  max-width: 380px;      /* thumbnail size */
  aspect-ratio: 16 / 9;  /* keeps it neat */
  margin-inline: auto;   /* center when alone */
}

/* Thumbnail image */
.video-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play icon overlay (center) */
.video-thumb .play-icon{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: white;
  background: rgba(0,0,0,0.28);
  opacity: 0;
  transition: opacity .25s ease;
}
.video-thumb:hover .play-icon{ opacity: 1; }
.video-thumb:hover img{
  transform: scale(1.05);
  transition: transform .3s ease;
}

/* -----------------------------
   Lightbox overlay (images)
----------------------------- */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.lightbox.open{ display:flex; }

.lightbox-content{
  position: relative;
  width: min(1100px, 96vw);
  max-height: 88vh;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
}

.lightbox-img{
  width: 100%;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
}

.lb-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  color: white;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 22px;
  user-select: none;
  backdrop-filter: blur(10px);
}
.lb-btn:hover{ background: rgba(255,255,255,.16); }

.lb-close{
  position: absolute;
  top: -54px;
  right: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  color: white;
  cursor: pointer;
  font-size: 22px;
  backdrop-filter: blur(10px);
}
.lb-close:hover{ background: rgba(255,255,255,.16); }

.lb-caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -38px;
  color: rgba(255,255,255,.90);
  font-size: 14px;
  text-align: center;
  text-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* -----------------------------
   Video Modal (pop-out player)
   FIXED:
   - modal sizing is independent from .video-thumb sizing
   - wrapper uses aspect-ratio: 16/9
   - iframe fills wrapper (no tiny video)
----------------------------- */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 10000;
}
.modal.is-open{ display:block; }

.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.68);
}

.modal__panel{
  position: relative;
  margin: 6vh auto;
  width: min(1100px, 96vw);     /* bigger than before */
  max-width: 1100px;
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 22px 70px rgba(0,0,0,.50);
  backdrop-filter: blur(14px);
}

.modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  border: 2px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 800;
  z-index: 2;
}
.modal__close:hover{ background: rgba(255,255,255,.16); }

/* IMPORTANT: wrapper controls size */
.modal__video{
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 2px solid rgba(255,255,255,.14);
  display: block;
}

/* iframe fills wrapper */
.modal__video iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* -----------------------------
   Footer
----------------------------- */
.footer{
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 18px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-top: 1px solid rgba(255,255,255,.18);
  position: relative;
  z-index: 1;
}
/* ===============================
   Avalon Heroes – Newsletter Card
================================ */

.newsletter-card {
  margin: 3rem auto 0;
  padding: 2rem;
  border-radius: 18px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.14),
      rgba(255,255,255,0.08)
    );
  border: 2px solid rgba(255,255,255,0.25);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  max-width: 520px;
}

.newsletter-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
  color: var(--text);
}

.newsletter-sub {
  margin-bottom: 1.2rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.newsletter-row {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.newsletter-row input {
  flex: 1;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  font-size: 0.95rem;
}

.newsletter-row input::placeholder {
  color: rgba(255,255,255,0.6);
}

.newsletter-row button {
  padding: 0.7rem 1.2rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;

  color: #0c2f7a;
  background: linear-gradient(
    180deg,
    var(--accent),
    #a9f7ff
  );

  box-shadow:
    0 4px 14px rgba(79,246,255,0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.newsletter-row button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 18px rgba(79,246,255,0.6);
}

.newsletter-note {
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.85;
}
/* ===============================
   Class Preview — MMO Tabs + Anim
================================ */

.class-preview {
  margin: 4rem auto;
  max-width: 980px;
  text-align: center;
}

.class-preview h2 {
  margin-bottom: 1.5rem;
  font-family: "Titan One", system-ui, sans-serif;
  font-size: 2.2rem;
  text-shadow: 0 4px 0 rgba(0,0,0,0.22);
}

/* Tabs */
.class-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.8rem;
}

.class-tab {
  --class: var(--accent);

  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.2px;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.class-tab:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.35);
}

.class-tab.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--class) 65%, white), var(--class));
  color: #0c2f7a;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

/* Panels */
.class-panels {
  position: relative;
}

.class-panel {
  --class: var(--accent);

  display: none;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  border-radius: 18px;

  /* main surface */
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
  border: 2px solid rgba(255,255,255,0.22);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);

  /* class-colour glow + top edge */
  outline: 1px solid rgba(255,255,255,0.10);
  position: relative;
  overflow: visible;
}

.class-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 500px at 20% 10%,
    color-mix(in srgb, var(--class) 25%, transparent),
    transparent 60%);
  pointer-events: none;
}

.class-panel::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 5px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--class), transparent);
  opacity: 0.85;
  pointer-events: none;
}

.class-panel.active {
  display: flex;
}

/* Character */
.class-art {
  position: relative;
  width: 360px;          /* bigger than before */
  max-width: none;
  flex-shrink: 0;
}

.class-art img {
  width: 420px;          /* bigger than panel */
  max-width: none;
  height: auto;
  z-index: 2;
  position: relative;
  left: -40px;           /* push outside panel */
  top: -20px;

  filter: drop-shadow(0 18px 36px rgba(0,0,0,0.45));

  opacity: 0;
  transform: translateX(-48px);
}

/* Info box tinted to class colour */
.class-info {
  text-align: left;
  flex: 1;
  z-index: 1;
  padding: 1.25rem 1.35rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--class) 18%, rgba(255,255,255,0.10)),
    rgba(0,0,0,0.18)
  );

  opacity: 0;
  transform: translateY(10px);
}

/* Title in Titan One */
.class-title {
  font-family: "Titan One", system-ui, sans-serif;
  font-size: 2rem;
  margin: 0 0 0.4rem;
  letter-spacing: 0.5px;
  text-shadow: 0 3px 0 rgba(0,0,0,0.25);
}

/* Optional: tint the title subtly to the class */
.class-title {
  color: color-mix(in srgb, var(--class) 70%, white);
}

.class-desc {
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Animations (staggered) */
@keyframes slideFadeInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* When panel becomes active, run animations */
.class-panel.animating .class-art img {
  animation: slideFadeInLeft 420ms ease-out forwards;
}

.class-panel.animating .class-info {
  animation: fadeUpIn 420ms ease-out forwards;
  animation-delay: 140ms; /* text follows character */
}

/* Mobile */
@media (max-width: 700px) {
  .class-panel.active {
    flex-direction: column;
    text-align: center;
  }
  .class-info { text-align: center; }
  .class-art { max-width: 85%; width: 340px; }
}

header, .site-hero {
  position: relative;
  overflow: hidden;
}

.header-fx{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.9;
}

.fx-orb{
  position:absolute;
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.35);
  filter: blur(.2px);
  animation: orbFloat 10s linear infinite;
}

.fx-orb:nth-child(1){ left:10%; top:20%; animation-duration: 12s; }
.fx-orb:nth-child(2){ left:25%; top:60%; animation-duration: 9s;  }
.fx-orb:nth-child(3){ left:40%; top:35%; animation-duration: 14s; }
.fx-orb:nth-child(4){ left:60%; top:25%; animation-duration: 11s; }
.fx-orb:nth-child(5){ left:75%; top:55%; animation-duration: 13s; }
.fx-orb:nth-child(6){ left:90%; top:30%; animation-duration: 10s; }

@keyframes orbFloat{
  0%   { transform: translateY(0) translateX(0); opacity:.15; }
  20%  { opacity:.45; }
  100% { transform: translateY(320px) translateX(-40px); opacity:.05; }
}
.devlog{
  position: relative;
  max-width: 980px;
  margin: 3rem auto;
  padding-left: 42px;
}

.devlog::before{
  content:"";
  position:absolute;
  left:16px; top:0; bottom:0;
  width:3px;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.05));
  border-radius:999px;
}

.update-entry{
  position: relative;
  margin: 0 0 2rem;
}

.update-entry::before{
  content:"";
  position:absolute;
  left:-42px;
  top:34px;
  width:16px; height:16px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--accent), #a9f7ff);
  box-shadow: 0 0 0 5px rgba(79,246,255,.18), 0 10px 25px rgba(0,0,0,.25);
}
.update-entry{
  padding: 1.6rem 1.6rem 1.3rem;
  border-radius: 22px;
  border: 2px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  box-shadow: 0 18px 50px rgba(0,0,0,.30);
  backdrop-filter: blur(7px);
  transition: transform .15s ease, box-shadow .15s ease;
}

.update-entry:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 65px rgba(0,0,0,.36);
}

.update-meta{
  display:flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .8rem 0 1rem;
}

.update-meta span{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.88);
  font-weight: 700;
  font-size: .92rem;
}

.chip.build{
  background: linear-gradient(180deg, rgba(79,246,255,.35), rgba(0,0,0,.18));
  border-color: rgba(79,246,255,.35);
}
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}

.reveal.show{
  opacity: 1;
  transform: translateY(0);
}



/* -----------------------------
   Responsive
----------------------------- */
@media (max-width: 860px){
  .grid{ grid-template-columns: 1fr; }
  .media-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .dev-gallery{ grid-template-columns: 1fr; }
  .dev-gallery img{ height: auto; }
  .dev-gallery .thumb video.inline-video{ height: auto; }
}

@media (max-width: 640px){
  .lightbox-content{ grid-template-columns: 36px 1fr 36px; }
  .lb-btn{ width:36px; height:36px; font-size:18px; }
  .lb-close{ top:-48px; width:36px; height:36px; font-size:18px; }

  .modal__panel{ margin: 4vh auto; padding: 10px; }
}

@media (max-width: 600px){
  .main-logo{ max-width: 300px; }
}

/* ===============================
   Class Panel Particles (per class)
================================ */

.class-panel{
  position: relative;
}

/* Particle layer sits ABOVE panel background */
.panel-particles{
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* keep your content above the particles */
.class-art,
.class-info{
  position: relative;
  z-index: 2;
}

/* individual particles */
.panel-particles .p{
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;

  /* match the class colour */
  background: color-mix(in srgb, var(--class) 85%, white);

  /* glow */
  box-shadow:
    0 0 10px color-mix(in srgb, var(--class) 65%, transparent),
    0 0 26px color-mix(in srgb, var(--class) 35%, transparent);

  opacity: 0;
  transform: translateY(60px);
  animation: panelSpark 4.8s linear infinite;
}

@keyframes panelSpark{
  0%   { transform: translateY(70px) scale(.6); opacity: 0; }
  15%  { opacity: .75; }
  70%  { opacity: .45; }
  100% { transform: translateY(-320px) scale(1.1); opacity: 0; }
}

/* random positions / sizes / speed */
.panel-particles .p:nth-child(1){ left: 10%; top: 92%; animation-duration: 4.2s; animation-delay: -1.0s; }
.panel-particles .p:nth-child(2){ left: 20%; top: 98%; animation-duration: 5.5s; animation-delay: -2.8s; width:9px; height:9px; }
.panel-particles .p:nth-child(3){ left: 32%; top: 86%; animation-duration: 4.7s; animation-delay: -1.8s; width:5px; height:5px; }
.panel-particles .p:nth-child(4){ left: 42%; top: 99%; animation-duration: 6.1s; animation-delay: -3.9s; width:4px; height:4px; }
.panel-particles .p:nth-child(5){ left: 52%; top: 88%; animation-duration: 5.0s; animation-delay: -2.0s; }
.panel-particles .p:nth-child(6){ left: 60%; top: 95%; animation-duration: 4.4s; animation-delay: -3.1s; width:6px; height:6px; }
.panel-particles .p:nth-child(7){ left: 68%; top: 90%; animation-duration: 6.4s; animation-delay: -4.0s; width:10px; height:10px; opacity:.55; }
.panel-particles .p:nth-child(8){ left: 76%; top: 98%; animation-duration: 5.2s; animation-delay: -2.3s; }
.panel-particles .p:nth-child(9){ left: 84%; top: 92%; animation-duration: 4.0s; animation-delay: -1.4s; width:4px; height:4px; }
.panel-particles .p:nth-child(10){ left: 92%; top: 96%; animation-duration: 5.9s; animation-delay: -3.2s; }
.panel-particles .p:nth-child(11){ left: 14%; top: 84%; animation-duration: 6.0s; animation-delay: -4.7s; width:4px; height:4px; }
.panel-particles .p:nth-child(12){ left: 88%; top: 82%; animation-duration: 4.6s; animation-delay: -2.6s; width:5px; height:5px; }