:root{ --brand:#1777ff; --accent:#0b5ed7; --card-green:#e6f4d9;
         --hero-image:url('https://media.discordapp.net/attachments/792917653617639454/1348995312576102471/279761862_165173552569643_7554625234156252618_n.jpg?ex=68fcc1c9&is=68fb7049&hm=334b9f0466c883127c2dabd174c6b0f29fa6bddab88da2f692b2444cafa93dc1&');
         --hero-image-main:url('https://www.wwds.online/assets/images/img/background.jpg'); }
  @media (prefers-color-scheme: dark){
    :root{ --dm-surface:#0f1626; --dm-elev:#121b2d; --dm-text:#e6e8ee; --dm-muted:#b8c2cf; --dm-border:#22314d; --card-green:#17301a; }
    body{background:var(--dm-surface);color:var(--dm-text)}
    .navbar{background-color:#0d1b34!important}
    .text-muted{color:var(--dm-muted)!important}
    .form-control,.form-select{background:#0f1a2b;color:var(--dm-text);border-color:var(--dm-border)}
    .panelish{background:var(--dm-elev)!important;border-color:var(--dm-border)!important}
    .list-group-item{background:var(--dm-elev);color:var(--dm-text);border-color:var(--dm-border)}
  }
  body{font-family:"Lato",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
  .hero-parallax{ position:relative; width:100%; min-height:85vh; color:#fff;
    background: var(--hero-image) center/cover no-repeat; background-position-y:0;
    display:flex; justify-content:center; align-items:center; overflow:hidden; }
  .hero-parallax .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.65) }
  @media (prefers-color-scheme: dark){ .hero-parallax .overlay{ background:rgba(0,0,0,.55) } }
  .hero-parallax h1,.hero-parallax p{ position:relative; z-index:1; text-shadow:0 2px 6px rgba(0,0,0,.4) }
  .callout{background:var(--card-green);border:1px solid rgba(0,0,0,.06);border-radius:.75rem;padding:1.25rem 1.25rem .5rem}

/* 1) Never let the layout exceed the viewport width */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;   /* horizontal */
}

/* 2) Don’t force body to 100vw; let it be fluid */
body {
  min-width: 0;         /* override your earlier min-width:100vw */
  max-width: 100%;      /* override your earlier max-width:100vw */
  /* keep your font-family etc. */
}

/* 3) Navbar should just be 100% width, not 100vw, and no y-overflow rule */
.navbar {
  width: 100%;
  max-width: 100%;
  overflow: visible;     /* was overflow-y; hidden (not needed) */
}

.hero-parallax.main {
  position: relative;
  isolation: isolate;
  contain: paint;        /* prevents transformed pseudo from affecting scrollbox */
}
.hero-parallax.main::before {
  inset: 0;              /* was inset:-2px; which created horizontal overflow */
}

.hero-parallax {
  overflow: hidden;    
}
.hero-parallax.main{
    background: var(--hero-image-main) center/cover no-repeat; 
}

/*
.hero-parallax.main {
  position: relative;
  isolation: isolate;
}

.hero-parallax.main::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: var(--hero-image-main) center / cover no-repeat;
  pointer-events: none;
  opacity: 0;
  animation:
    hero-glitch 450ms steps(12) 1s    2 both,
    hero-glitch 450ms steps(12) 1.75s 2 both;
}

.hero-parallax.main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/images/img/halloween_banner.png") center / cover no-repeat;
  pointer-events: none;
  opacity: 0;
  animation: hero-swap-in 220ms linear 4.25s 1 forwards;
}

.hero-parallax .overlay { position: absolute; inset: 0; z-index: 1; }
.hero-parallax h1,
.hero-parallax p,
.hero-parallax .container { position: relative; z-index: 2; }

@keyframes hero-glitch {
  0%   { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  5%   { opacity: .9; transform: translate(-2px,-2px); clip-path: inset(0 0 82% 0); }
  12%  { transform: translate(3px,2px);  clip-path: inset(75% 0 0 0); }
  20%  { transform: translate(-3px,1px); clip-path: inset(10% 0 70% 0); }
  28%  { transform: translate(2px,-1px) skewX(1deg); clip-path: inset(60% 0 20% 0); }
  36%  { transform: translate(-1px,2px) skewY(.5deg); clip-path: inset(35% 0 45% 0); }
  60%  { opacity: .6; transform: translate(1px,0) }
  80%  { opacity: .25; transform: none; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; transform: none; }
}

@keyframes hero-swap-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-parallax.main::before { animation: none; opacity: 0; }
  .hero-parallax.main::after  { animation: none; opacity: 1; }
}
*/
/*END HALLOWEEN GLITCH BG */

/* Banner */
.halloween-banner{
  background: linear-gradient(90deg,#ff7a00,#ffb347);
  color:#2a1600;
  text-shadow:0 1px 1px rgba(255,255,255,.25);
  box-shadow:0 0 10px rgba(255,120,0,.4);
  font-family:"Montserrat",sans-serif;
  letter-spacing:.3px;
  cursor:pointer;
  z-index:1031;
}
@media (prefers-color-scheme: dark){
  .halloween-banner{
    background: linear-gradient(90deg,#ff8800,#cc5500);
    color:#fff3e0;
    text-shadow:0 1px 2px rgba(0,0,0,.4);
  }
}

/* Modal theme */
.halloween-modal .modal-content{
  background: radial-gradient(120% 120% at 0% 0%, #2b1200 0%, #0f0a0a 60%, #090909 100%);
  color:#ffe7cc;
  border:1px solid rgba(255,136,0,.25);
  position:relative;
}
.halloween-modal .modal-content::before{
  /* subtle top “drip” edge */
  content:"";
  position:absolute; inset:0 0 auto 0; height:8px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,140,0,.9) 0 20px,
      rgba(255,206,120,.9) 20px 40px);
  filter:blur(.5px) opacity(.85);
}
.halloween-modal .modal-header{
  background: linear-gradient(180deg, rgba(255,140,0,.25), rgba(0,0,0,0));
  color:#fff2e0;
}
.halloween-modal .modal-footer{
  color:#ffcfa1;
}

.halloween-modal .btn-close{
  filter: invert(1) grayscale(1) brightness(1.8);
}

/* Fun bullets */
.candy-list{ padding-left:1.25rem; }
.candy-list li{
  margin:.25rem 0 .25rem .25rem;
  list-style:none;
  position:relative;
  padding-left:1.2rem;
}
.candy-list li::before{
  content:"🍬";
  position:absolute; left:0; top:.05rem;
}

/* Title emoji pop */
.pumpkin-emoji{ filter: drop-shadow(0 0 6px rgba(255,140,0,.6)); }

.pumpkin-code {
  color: #ff8c00;
  font-family: "Courier New", monospace;
  letter-spacing: 2px;
  text-shadow:
    0 0 6px #ff6a00,
    0 0 12px #ffae42,
    0 0 24px #ff7b00;
  animation:
    glowPulse 3s ease-in-out infinite,
    flicker 4s infinite,
    glitchMove 3s infinite;
  position: relative;
  display: inline-block;
}

/* Subtle orange fade glow */
@keyframes glowPulse {
  0%,100% { text-shadow: 0 0 6px #ff6a00,0 0 12px #ffae42,0 0 24px #ff7b00; }
  50%     { text-shadow: 0 0 12px #ffb347,0 0 24px #ffcc70,0 0 48px #ff7b00; }
}

/* Randomized flicker */
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.2; }
}

/* Glitch side shifts */
@keyframes glitchMove {
  0%   { transform: none; }
  10%  { transform: translate(2px,-1px) skew(0.5deg,0.5deg); }
  20%  { transform: translate(-2px,1px) skew(-0.5deg,-0.5deg); }
  30%  { transform: translate(3px,0); }
  40%  { transform: translate(-1px,2px); }
  50%  { transform: none; }
  60%  { transform: translate(2px,1px); }
  70%  { transform: translate(-3px,-1px); }
  100% { transform: none; }
}

/* Optional ghost duplicate layers for richer glitch effect */
.pumpkin-code::before,
.pumpkin-code::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  width: 100%;
  color: #ff4500;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.pumpkin-code::before {
  animation: glitchBefore 2s infinite linear alternate-reverse;
  text-shadow: -2px 0 #ff4500;
}
.pumpkin-code::after {
  animation: glitchAfter 2s infinite linear alternate;
  text-shadow: 2px 0 #ffa500;
}

@keyframes glitchBefore {
  0% { clip-path: inset(0 0 80% 0); transform: translate(-2px,-2px); }
  25%{ clip-path: inset(20% 0 55% 0); transform: translate(2px,2px); }
  50%{ clip-path: inset(60% 0 25% 0); transform: translate(-3px,1px); }
  75%{ clip-path: inset(10% 0 70% 0); transform: translate(1px,-1px); }
  100%{ clip-path: inset(0 0 80% 0); transform: none; }
}
@keyframes glitchAfter {
  0% { clip-path: inset(10% 0 65% 0); transform: translate(2px,2px); }
  25%{ clip-path: inset(40% 0 35% 0); transform: translate(-2px,-1px); }
  50%{ clip-path: inset(70% 0 10% 0); transform: translate(3px,0); }
  75%{ clip-path: inset(0 0 80% 0); transform: translate(-1px,1px); }
  100%{ clip-path: inset(10% 0 65% 0); transform: none; }
}




      .reveal-up {
  transform: translateY(40px);
}
.reveal-up.is-visible {
  transform: none;
  opacity: 1;
}
      
/* Layout */
.section-xl { padding: 6rem 0; }
.section-dark { background: #0b1220; color: #e6e8ee; }    /* optional alt */
.section-light { background: #f7fbff; }                   /* optional alt */

/* Card-ish containers */
.block {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 6px 30px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark) {
  .block { background: #121b2d; border-color: #22314d; }
}

/* Reveal animation base */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: transform .700s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
  will-change: transform, opacity;
}

/* Directions */
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px);  }

/* When visible */
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger helpers (add to siblings) */
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }

/* Images */
.frame {
  border-radius: .75rem;
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  .frame { border-color:#22314d; box-shadow: 0 10px 34px rgba(0,0,0,.35); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* --- Dark-mode tightening for near-black surfaces --- */
@media (prefers-color-scheme: dark) {
  :root{
    /* keep your existing tokens, add a couple more */
    --dm-surface:#0a0f1a;        /* base app surface (near black) */
    --dm-elev:#0d1322;           /* raised surface */
    --dm-elev-2:#0f1626;         /* higher elevation */
    --dm-text:#e6e8ee;
    --dm-muted:#b8c2cf;
    --dm-border:#22314d;
  }

  /* The light section should not stay light in dark mode */
  .section-light {
    background: var(--dm-surface) !important;
    color: var(--dm-text);
  }

  /* “Panelish” welcome block */
  .panelish{
    background: var(--dm-elev-2) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.5);
  }

  /* Card-ish blocks in Staff Expectations — make them almost black */
  .block{
    background: var(--dm-elev) !important;      /* near-black card */
    border-color: var(--dm-border) !important;
    box-shadow: 0 10px 34px rgba(0,0,0,.55);
  }

  /* Perks box currently uses .bg-light — darken it */
  .block .bg-light,
  .bg-light{
    background: #0b1220 !important;             /* darker chip/surface */
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
  }

  /* In case you used .bg-secondary anywhere */
  .bg-secondary,
  .text-bg-secondary{
    background: #121b2d !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
  }

  /* Muted text, code chips, list items stay readable */
  .text-muted{ color: var(--dm-muted) !important; }
  code{ background: #0b1220; color: var(--dm-text); border: 1px solid var(--dm-border); }
  .list-group-item{ background: var(--dm-elev); color: var(--dm-text); border-color: var(--dm-border); }
}
      
      /* --- Material-style Buttons --- */
.btn {
  border-radius: 9999px; /* fully rounded, "pill" shape */
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: all .2s cubic-bezier(.2,.8,.4,1);
}

.btn:active {
  transform: scale(.97);
  box-shadow: 0 1px 3px rgba(0,0,0,.3) inset;
}

/* Primary button - matches Material 3 blue tones */
.btn-primary {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-primary:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 10px rgba(23,119,255,.35);
}
.btn-primary:focus-visible {
  outline: 2px solid rgba(23,119,255,.6);
  outline-offset: 2px;
}

/* Secondary / outline variant */
.btn-outline-primary {
  border: 2px solid var(--brand);
  color: var(--brand);
  background: transparent;
}
.btn-outline-primary:hover {
  background-color: var(--brand);
  color: #fff;
  box-shadow: 0 3px 8px rgba(23,119,255,.25);
}

/* Dark-mode refinement */
@media (prefers-color-scheme: dark) {
  .btn-primary {
    background-color: #1e88ff;
    border-color: #1e88ff;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.7);
  }
  .btn-primary:hover {
    background-color: #3b9cff;
    border-color: #3b9cff;
    box-shadow: 0 4px 14px rgba(30,136,255,.4);
  }
  .btn-outline-primary {
    border-color: #3b9cff;
    color: #3b9cff;
  }
  .btn-outline-primary:hover {
    background-color: #3b9cff;
    color: #fff;
  }
}
     
/* --- Panelish modifier: no border, no shadow, blended background --- */
.panelish.no-border {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;  /* blend with parent section */
}

/* Optional variant: if you still want subtle elevation, not transparent */
@media (prefers-color-scheme: light) {
  .panelish.no-border {
    background: transparent !important; 
  }
}

@media (prefers-color-scheme: dark) {
  .panelish.no-border {
    background: var(--dm-surface) !important; /* same as page bg */
  }
}


/* Material-ish modal look */
.material-modal {
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* Tweak header/title weight */
.material-modal .modal-title { font-weight: 700; }

/* Dark mode modal surface */
@media (prefers-color-scheme: dark) {
  .material-modal {
    background: #0f1626;                 /* matches your near-black scheme */
    color: #e6e8ee;
    border: 1px solid #22314d;
    box-shadow: 0 30px 80px rgba(0,0,0,.65);
  }
}

/* Timer badge: slightly thicker look */
#countdown {
  font-weight: 700;
  letter-spacing: .3px;
  padding: .45rem .75rem;
}

/* Kill native markers and add our own */
#quizForm ol { list-style: none; padding-left: 0; }
.question-step { position: relative; padding-left: 2.25rem; }
.question-step .q-num {
  position: absolute; left: 0; top: .15rem;
  font-weight: 700; opacity: .9;
}

/* --- Minimal, Material-ish tone system for the Guide --- */
#howto .step{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:.75rem;
  padding:1.25rem 1.25rem 1rem;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  #howto .step{
    background:var(--dm-elev);
    border-color:var(--dm-border);
    box-shadow:0 10px 26px rgba(0,0,0,.45);
  }
}

/* Number chip—quieter, less “badge-y” */
#howto .step-num{
  display:inline-grid; place-items:center;
  width:32px; height:32px; margin-right:.6rem;
  border-radius:999px; font-weight:700; line-height:1;
  color:#fff; background:var(--brand);
  box-shadow:0 2px 6px rgba(0,0,0,.14);
}

/* Section header rhythm */
#howto h2{ font-weight:800; }
#howto .step h3{ font-weight:700; margin:0; }
#howto p, #howto ul{ margin-bottom:.5rem; }

/* Tonal card (for pro tips / info / notes) – single look, brand-accented divider */
.tonal{
  background:#f5f9ff;             /* soft, not flashy */
  border:1px solid rgba(0,0,0,.06);
  border-radius:.75rem;
  padding:1rem 1rem;
}
.tonal .kicker{
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; text-transform:none;
  margin-bottom:.25rem;
}
.tonal .kicker .ico{
  width:28px; height:28px; border-radius:999px;
  display:inline-grid; place-items:center;
  background:rgba(23,119,255,.12);
  color:var(--brand);
}
.tonal .body{ margin-top:.25rem; }
.tonal .divider{
  height:1px; background:rgba(23,119,255,.18);
  margin:.5rem 0 .5rem;
}

@media (prefers-color-scheme: dark){
  .tonal{
    background:var(--dm-surface);
    border:1px solid var(--dm-border);
  }
  .tonal .kicker .ico{
    background:rgba(63,131,248,.18);
    color:#9fc0ff;
  }
  .tonal .divider{
    background:rgba(159,192,255,.25);
  }
}

/* Images stay quiet */
#howto .img-frame{
  border-radius:.75rem;
  border:1px solid rgba(0,0,0,.08);
  overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  #howto .img-frame{ border-color:var(--dm-border); box-shadow:0 10px 34px rgba(0,0,0,.35); }
}

/* Auto stagger within the guide */
#howto .reveal-seq > .reveal{ transition-delay:.06s; }
#howto .reveal-seq > .reveal:nth-child(2){ transition-delay:.12s; }
#howto .reveal-seq > .reveal:nth-child(3){ transition-delay:.18s; }
#howto .reveal-seq > .reveal:nth-child(4){ transition-delay:.24s; }
#howto .reveal-seq > .reveal:nth-child(5){ transition-delay:.30s; }
#howto .reveal-seq > .reveal:nth-child(6){ transition-delay:.36s; }


/* Lightbox modal tweaks (additive) */
.img-lightbox { border-radius: .75rem; overflow: hidden; }
.img-lightbox .modal-body { background: #000; } /* neutral backdrop for images */
#lightboxImg { max-height: calc(100vh - 8rem); object-fit: contain; background:#000; }

/* Dark mode keeps the same neutral canvas */
@media (prefers-color-scheme: dark){
  .img-lightbox .modal-body { background: #000; }
  #lightboxCap { color: var(--dm-muted) !important; }
}

/* Optional: nicer close button contrast over dark image */
.img-lightbox .btn-close {
  filter: invert(1) grayscale(100%);
  opacity: .8;
}
.img-lightbox .btn-close:hover { opacity: 1; }

#lightboxImg {
  cursor: zoom-out; /* visually hints “click to close” */
  transition: opacity .2s ease;
}
#lightboxImg:active { opacity: .85; }


/* --- Equal-height image cards with contained thumbnails --- */
.equal-cards {
  display: flex;
  flex-wrap: wrap;            
}

/* Center images inside the frame */
.equal-cards .img-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  margin: auto;                 /* ensures centered vertical alignment */
  display: block;
  transition: transform .2s ease;
}

@media (prefers-color-scheme: dark) {
  .equal-cards .img-frame { background: var(--dm-elev); border-color: var(--dm-border); }
}

/* Lightbox thumbnail box: maintains uniform size */
.equal-cards .img-frame > .lightbox-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;         /* uniform card height */
  border-radius: .5rem;
  overflow: hidden;
  background: #000;
  position: relative;
}


@media (prefers-color-scheme: dark) {
  .equal-cards .img-frame > .lightbox-trigger {
    background: var(--dm-elev);
  }
}

/* Subtle hover effect for interactivity */
.equal-cards .img-frame:hover img {
  transform: scale(1.025);
}

/* Caption stays subtle and aligned */
.thumb-caption {
  font-size: .875rem;
  color: #6c757d;
  text-align: center;
  line-height: 1.4;
  min-height: 1.4em;          /* stable height even if empty */
  margin-top: .5rem;
}

@media (prefers-color-scheme: dark) {
  .thumb-caption { color: var(--dm-muted); }
}

/* --- Dark-mode pass for the Role-Play Simulator only --- */
@media (prefers-color-scheme: dark) {
  #edu-sim .card {
    background: var(--dm-elev);          /* near-black card */
    color: var(--dm-text);
    border-color: var(--dm-border);
    box-shadow: 0 10px 34px rgba(0,0,0,.55);
  }
  #.card .panelish .card-title { color: var(--dm-text); }
  #edu-sim .small.text-muted { color: var(--dm-muted) !important; }

  /* Inputs inside cards */
  #edu-sim .form-control,
  #edu-sim .form-select {
    background: #0f1a2b;
    color: var(--dm-text);
    border-color: var(--dm-border);
  }
  #edu-sim .input-group-text {
    background: #0f1a2b;
    color: var(--dm-muted);
    border-color: var(--dm-border);
  }

  /* Outcome alerts (if shown) */
  #edu-sim .alert {
    background: #0b1220;
    color: var(--dm-text);
    border-color: var(--dm-border);
  }

  /* Badges look a bit bright on deep surfaces—soften outlines */
  #edu-sim .badge {
    border: 1px solid rgba(255,255,255,.08);
  }
}