/*
 * Cardz the Duel landing page styles.
 *
 * Quick tuning guide:
 * - Search for "HERO COMPOSITION" to reposition Belnoss, Victor, the crest,
 *   motto, and trailer carousel.
 * - Search for "RESPONSIVE" for tablet and phone overrides.
 * - Colors shared across the page live in :root.
 */
@font-face {
  font-family: Henny;
  src: url('/assets/game/fonts/HennyPenny-Regular.ttf');
}

@font-face {
  font-family: DMSerif;
  src: url('/assets/game/fonts/DMSerifText-Regular.ttf');
}

@font-face {
  font-family: SourceSans;
  src: url('/assets/game/fonts/SourceSansPro-SemiBold.ttf');
}

@font-face {
  font-family: Roboto;
  src: url('/assets/game/fonts/Roboto-Regular.ttf');
}

:root {
  --ink: #f7fbf8;
  --muted: #a9bdc2;
  --gold: #f0c36c;
  --cyan: #55e7df;
  --ember: #e9652a;
  --ember-gold: #ffb44f;
  --navy: #040d16;
  --panel: #091b26;
  --line: rgba(85,231,223,.26);
  --max: 1280px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: Roboto,Arial,sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.wrap {
  width: min(var(--max),calc(100% - 42px));
  margin: auto;
}

.skip {
  position: fixed;
  left: 12px;
  top: -60px;
  background: white;
  color: #000;
  padding: 10px 14px;
  z-index: 100;
}

.skip:focus {
  top: 12px;
}

/* ==========================================================================
   HEADER AND NAVIGATION
   ========================================================================== */

header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: linear-gradient(#02080df5,#02080dc8);
  border-bottom: 1px solid #ffffff12;
  backdrop-filter: blur(12px);
}

nav {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.brand {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand img {
  width: 57px;
  height: 57px;
  object-fit: contain;
}

.brand-name {
  min-width: 190px;
  font: 25px/1 Henny,serif;
  color: #f8ffff;
  text-shadow: 0 0 7px rgba(66,255,242,.58);
}

.brand-name small {
  display: block;
  margin: 5px 0 0 2px;
  color: var(--gold);
  font: 9px SourceSans,sans-serif;
  letter-spacing: .31em;
  text-transform: uppercase;
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 24px;
  font: 14px SourceSans,sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.navlinks a {
  padding: 25px 0;
  border-bottom: 2px solid transparent;
}

.navlinks a:hover,.navlinks a:focus {
  color: var(--cyan);
  border-color: var(--cyan);
}

.nav-cta {
  padding: 10px 16px!important;
  border: 1px solid #5de4dc88!important;
  background: #0b2a36;
}

.menu {
  display: none;
  border: 1px solid var(--line);
  background: #081923;
  color: white;
  padding: 8px 12px;
}

/* ==========================================================================
   ORIGINAL LANDING-PAGE FOUNDATION
   (kept for shared utility classes used elsewhere: .kicker, .btn, .lead,
   .actions, .scroll-cue. The hero-specific rules below are superseded by
   the unified composition further down this file.)
   ========================================================================== */

.hero-copy {
  position: relative;
  z-index: 2;
}

.kicker {
  color: var(--cyan);
  font: 12px SourceSans,sans-serif;
  text-transform: uppercase;
  letter-spacing: .3em;
}

.lead {
  max-width: 600px;
  font: clamp(17px,1.8vw,22px)/1.6 DMSerif,serif;
  color: #dceceb;
}

.actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
  border: 1px solid #75fff4;
  background: linear-gradient(135deg,#148b99,#0a5368);
  font: 13px SourceSans,sans-serif;
  text-transform: uppercase;
  letter-spacing: .13em;
  box-shadow: 0 0 18px #31e6dd33,inset 0 0 14px #8cfff733;
  transition: .2s;
}

.btn.alt {
  background: #030d14bd;
  border-color: #d9b567aa;
  color: #f2db9b;
}

.btn:hover,.btn:focus {
  transform: translateY(-2px);
  filter: brightness(1.2);
}

.scroll-cue {
  position: absolute;
  bottom: 24px;
  left: 50%;
  translate: -50% 0;
  color: #bad0d1;
  font: 10px SourceSans,sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.scroll-cue:after {
  content: "";
  display: block;
  width: 1px;
  height: 28px;
  margin: 7px auto 0;
  background: linear-gradient(var(--cyan),transparent);
}

section {
  padding: 95px 0;
}

/* ==========================================================================
   BEGINNER INTRODUCTION
   ========================================================================== */

.prologue {
  position: relative;
  background: radial-gradient(circle at 50% 0,#113845,#041018 48%);
  overflow: hidden;
  border-top: 0;
}

.prologue:before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  top: -110px;
  height: 260px;
  pointer-events: none;
  background: radial-gradient(ellipse at 22% 100%,rgba(0,206,210,.18),transparent 48%),radial-gradient(ellipse at 78% 100%,rgba(221,83,22,.16),transparent 48%),linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px),linear-gradient(to bottom,transparent,#061723 82%);
  background-size: auto,auto,70px 70px,70px 70px,auto;
  filter: blur(1px);
  mask-image: linear-gradient(black,transparent 72%);
}

.prologue .wrap,
.prologue > .wrap {
  position: relative;
  z-index: 1;
}

.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}

.section-head h2 {
  font: clamp(43px,6vw,72px)/1 Henny,serif;
  margin: 8px 0;
  text-shadow: 0 0 10px #42eee4;
}

.section-head p {
  color: var(--muted);
  font-size: 17px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}

.step {
  position: relative;
  padding: 31px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg,#0b2431de,#06141de8);
  min-height: 225px;
}

.step-num {
  font: 52px/1 DMSerif,serif;
  color: #47e8df42;
  position: absolute;
  right: 20px;
  top: 16px;
}

.step h3 {
  font: 26px DMSerif,serif;
  color: #e8cd89;
  margin: 28px 0 8px;
}

.step p {
  color: var(--muted);
  margin: 0;
}

.guide-callout {
  margin-top: 32px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  border: 1px solid #d9b56755;
  background: #030d14;
}

.guide-callout strong {
  display: block;
  font: 29px DMSerif,serif;
}

.guide-callout span {
  color: var(--muted);
}

/* ==========================================================================
   DOWNLOAD SECTION
   ========================================================================== */

.download {
  position: relative;
  text-align: center;
  background: #030b10 url('/assets/game/Miscellaneous/Battle_Table.jpg') center/cover;
  scroll-margin-top: 72px;
}

.download:before {
  content: "";
  position: absolute;
  inset: 0;
  background: #02080de9;
}

.download .wrap {
  position: relative;
}

.download .kicker {
  display: block;
  margin-bottom: 18px;
}

.download h2 {
  font: clamp(45px,6vw,74px)/1 Henny,serif;
  margin: 0 0 8px;
  text-shadow: 0 0 13px #42eee4;
}

.download p {
  max-width: 640px;
  margin: 28px auto 30px;
  color: #c5d6d7;
}

.stores {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.store {
  min-width: 220px;
  padding: 12px 20px;
  text-align: left;
  border: 1px solid #ffffff66;
  background: #02070b;
  color: white;
  border-radius: 8px;
}

.store small {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
}

.store strong {
  font-size: 20px;
}

.store em {
  display: block;
  color: #e2c26f;
  font-style: normal;
  font-size: 9px;
  letter-spacing: .12em;
}

.facts {
  max-width: 820px;
  margin: 45px auto 0;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border: 1px solid var(--line);
}

.fact {
  padding: 17px;
  border-right: 1px solid var(--line);
}

.fact:last-child {
  border: 0;
}

.fact small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.fact b {
  font: 16px SourceSans,sans-serif;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
  padding: 38px 0;
  background: #02070b;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
}

.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links a:hover {
  color: white;
}

.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%,120px);
  background: #f6fbfa;
  color: #05131b;
  padding: 12px 18px;
  font-weight: bold;
  transition: .25s;
}

.toast.show {
  transform: translate(-50%,0);
}

@media(max-width:850px) {
  .menu {
    display: block;
  }

  .navlinks {
    display: none;
    position: absolute;
    top: 72px;
    left: 20px;
    right: 20px;
    padding: 18px;
    background: #020b11f8;
    border: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
  }

  .navlinks.open {
    display: flex;
  }

  .navlinks a {
    padding: 8px;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .guide-callout {
    align-items: flex-start;
    flex-direction: column;
  }

  .facts {
    grid-template-columns: 1fr 1fr;
  }

}

@media(max-width:520px) {
  .wrap {
    width: min(var(--max),calc(100% - 28px));
  }

  .brand-name {
    font-size: 20px;
  }

  .brand img {
    width: 43px;
    height: 43px;
  }

  .actions .btn {
    width: 100%;
  }

  .facts {
    grid-template-columns: 1fr;
  }

  .fact {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .footer-row {
    display: block;
  }

  .footer-links {
    margin-top: 20px;
  }

}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior: auto!important;
    transition: none!important;
  }

}

/* ==========================================================================
   HERO — UNIFIED COMPOSITION

   Design goal: every piece of the opening scene (crest, title, Lucky mark,
   motto, trailer carousel) lives on ONE coordinate system so it can never
   drift apart when the viewport is resized, zoomed, or has an unusual
   aspect ratio. That system is `.hero-content`, a plain flex column — no
   absolute positioning, no independently-scaled vw/vh mixes. The crest +
   title + Lucky mark are additionally locked to each other inside
   `.hero-brand-lockup`, a fixed-aspect-ratio box sized only from viewport
   WIDTH, so they scale as a single rigid unit (this is what ShadowVerse-
   style hero banners do to keep logo lockups crisp at any size).

   Quick edits:
   - Hero portrait placement: use the "Layout" button (bottom-right) to
     drag Belnoss/Victor and copy out new --x/--y/--h/--s/--z values, or
     edit the defaults on the <img class="hero-figure"> tags in index.html.
   - Crest/title size: `.hero-brand-lockup` width.
   - Motto position: it is simply a flex child of `.hero-center` — move it
     by re-ordering the elements in index.html or adjusting `gap`.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  height: 100svh;
  min-height: 720px;
  overflow: hidden;
  background: #031018 url('/assets/game/Miscellaneous/Hero_Selection_BG.jpg') center 34%/cover;
}

.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,rgba(0,22,33,.86),rgba(7,52,62,.28) 34%,rgba(3,13,22,.18) 50%,rgba(75,26,14,.24) 66%,rgba(25,8,8,.86)),
    radial-gradient(ellipse at 50% 36%,rgba(19,61,90,.18),rgba(0,7,14,.48) 78%),
    linear-gradient(0deg,#030b14 0%,transparent 50%);
}

.faction-wash {
  position: absolute;
  z-index: 2;
  inset: 0 50% 0 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .52;
}

.faction-wash-alliance {
  background: radial-gradient(ellipse at 8% 76%,rgba(40,218,203,.27),transparent 62%);
}

.faction-wash-pact {
  inset-inline: 50% 0;
  background: radial-gradient(ellipse at 92% 76%,rgba(225,79,26,.25),transparent 62%);
}

.hero-stage {
  position: relative;
  /* Keep child layers in the hero's stacking context with full-height VFX. */
  z-index: auto;
  width: 100%;
  height: 100%;
  padding-top: 72px;
}

/* -- Hero portraits (Belnoss / Victor) ------------------------------------ */

.hero-flank {
  position: absolute;
  z-index: 3;
  inset: 72px 0 0;
  pointer-events: none;
}

.hero-figure {
  position: absolute;
  left: var(--x);
  bottom: var(--y);
  height: var(--h);
  width: var(--w,auto);
  z-index: var(--z);
  object-fit: contain;
  object-position: center bottom;
  transform: scale(var(--s,1));
  transform-origin: center bottom;
  filter: drop-shadow(0 20px 22px rgba(0,0,0,.68));
  transition: filter .3s,opacity .3s;
}

.hero-figure.mirror {
  transform: scaleX(-1) scale(var(--s,1));
}

.hero-figure.rank-2,.hero-figure.rank-3,.hero-figure.rank-4 {
  opacity: .8;
  filter: saturate(.82) brightness(.74) drop-shadow(0 18px 18px rgba(0,0,0,.72));
}

.hero-figure.rank-3 { opacity: .64; }
.hero-figure.rank-4 { opacity: .48; }

.faction-crest {
  position: absolute;
  z-index: 0;
  top: 8%;
  width: clamp(150px,11.5vw,220px);
  height: auto;
  object-fit: contain;
  opacity: .62;
  filter: drop-shadow(0 0 18px rgba(78,235,231,.34)) drop-shadow(0 16px 24px rgba(0,0,0,.58));
  transform: translate(var(--faction-crest-x,0px),var(--faction-crest-y,0px)) scale(var(--faction-crest-scale,1));
  transform-origin: center;
}

.faction-crest-alliance { left: clamp(12px,1.7vw,34px); }

.faction-crest-pact {
  right: clamp(12px,1.7vw,34px);
  filter: drop-shadow(0 0 18px rgba(255,112,38,.38)) drop-shadow(0 16px 24px rgba(0,0,0,.62));
}

.faction-label {
  position: absolute;
  z-index: 8;
  top: 51%;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 190px;
  padding: 6px 15px 6px 7px;
  border: 1px solid rgba(103,239,231,.28);
  background: linear-gradient(90deg,rgba(4,30,39,.82),rgba(3,18,27,.42));
  box-shadow: 0 8px 28px rgba(0,0,0,.32),inset 0 0 18px rgba(50,222,211,.06);
  color: rgba(233,255,252,.92);
  font: 12px SourceSans,sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px #000;
  backdrop-filter: blur(5px);
  transform: translate(var(--faction-label-x,0px),var(--faction-label-y,0px)) scale(var(--faction-label-scale,1));
  transform-origin: center;
}

.faction-label img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: contain;
  opacity: .96;
  filter: drop-shadow(0 0 8px rgba(74,241,234,.62));
}

.faction-label span { white-space: nowrap; }
.faction-label strong { color: #75fff4; font-weight: inherit; }
.faction-label-alliance { left: 4%; }
.faction-label-pact {
  right: 4%;
  flex-direction: row-reverse;
  padding: 6px 7px 6px 15px;
  border-color: rgba(255,178,79,.3);
  background: linear-gradient(270deg,rgba(48,20,12,.84),rgba(24,11,12,.42));
  box-shadow: 0 8px 28px rgba(0,0,0,.32),inset 0 0 18px rgba(255,133,48,.07);
}

.faction-label-pact img {
  filter: drop-shadow(0 0 8px rgba(255,118,39,.68));
}

.faction-label-pact strong { color: #ffc164; }

/* -- Faction FX: falling leaves (left, Belnoss) / ember + ash (right, Victor) */

.hero-fx {
  position: absolute;
  z-index: 4;
  inset: 72px 0 0;
  pointer-events: none;
  overflow: hidden;
}

.faction-flow-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .94;
  mix-blend-mode: screen;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom,rgba(0,0,0,.72),#000 32%,#000 88%,transparent);
  mask-image: linear-gradient(to bottom,rgba(0,0,0,.72),#000 32%,#000 88%,transparent);
}

/* Faction ribbon editor: add ?fx2Debug=1 to the page URL. */
.fx2-debug-toggle {
  position: fixed;
  z-index: 136;
  left: 16px;
  bottom: 16px;
  padding: 9px 13px;
  border: 1px solid #a879ff;
  background: #0b1020ed;
  color: white;
  cursor: pointer;
}

.fx2-debug-panel {
  display: none;
  position: fixed;
  z-index: 137;
  left: 16px;
  bottom: 60px;
  width: 340px;
  max-height: calc(100vh - 90px);
  overflow: auto;
  padding: 16px;
  border: 1px solid #a879ff;
  background: #050817f2;
  box-shadow: 0 12px 40px #000,0 0 26px #713cff28;
  color: white;
  font: 12px SourceSans,sans-serif;
}

.fx2-debug-panel.open { display: block; }
.fx2-debug-panel h3,.fx2-debug-panel p { margin: 0 0 10px; }
.fx2-debug-panel h3 { color: #c9afff; }
.fx2-debug-panel h4 {
  margin: 14px 0 7px;
  padding-top: 10px;
  border-top: 1px solid rgba(201, 175, 255, .22);
  color: #d9ccff;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fx2-debug-panel label {
  display: grid;
  grid-template-columns: 104px 1fr 58px;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.fx2-debug-panel input { width: 100%; }
.fx2-debug-panel input[type="color"] {
  height: 28px;
  padding: 1px;
  border: 1px solid #ffffff44;
  background: transparent;
}
.fx2-debug-panel button {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid #a879ff77;
  background: #1a1233;
  color: white;
  cursor: pointer;
}

.hero-fx.flow-fallback:before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 7% -8% 4%;
  opacity: .48;
  background:
    radial-gradient(ellipse at 17% 66%,rgba(65,255,226,.24),transparent 38%),
    radial-gradient(ellipse at 83% 66%,rgba(255,91,25,.25),transparent 38%),
    conic-gradient(from 100deg at 50% 68%,transparent,rgba(61,210,255,.12),transparent 27%,rgba(255,125,37,.13),transparent 55%);
  filter: blur(24px);
  mix-blend-mode: screen;
}

.particle-field {
  position: absolute;
  inset-block: 0;
  width: 56%;
  overflow: visible;
}

.particle-field.leaves {
  left: 0;
}

.particle-field.embers {
  right: 0;
}

.particle-field.atmosphere {
  inset: 0;
  width: 100%;
}

.particle-field.leaves:before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: radial-gradient(ellipse at 30% 100%,rgba(53,255,240,.16),transparent 65%);
  filter: blur(6px);
}

.particle-field.embers:before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: radial-gradient(ellipse at 70% 100%,rgba(255,120,40,.18),transparent 65%);
  filter: blur(6px);
}

.leaf {
  position: absolute;
  left: var(--lx);
  top: -10%;
  width: var(--lw);
  height: calc(var(--lw) * 1.6);
  background: linear-gradient(135deg,#e6fff9,#55e7ca 42%,#0f796d);
  clip-path: polygon(50% 0,86% 24%,96% 56%,70% 88%,48% 100%,37% 62%,6% 44%,28% 14%);
  opacity: 0;
  animation: leaf-fall var(--ld) linear var(--delay) infinite;
  filter: drop-shadow(0 0 4px rgba(53,255,240,.45));
}

.leaf:after {
  content: "";
  position: absolute;
  left: 48%;
  top: 9%;
  width: 1px;
  height: 82%;
  background: rgba(236,255,250,.75);
  transform: rotate(8deg);
}

.ember-mote {
  position: absolute;
  left: var(--ex);
  bottom: 2%;
  width: var(--es);
  height: var(--es);
  border-radius: 50%;
  background: #ffb35c;
  box-shadow: 0 0 8px #ff8a3e;
  opacity: 0;
  animation: ember-rise var(--ed) linear var(--delay) infinite;
}

.ash-mote {
  position: absolute;
  left: var(--ax);
  bottom: 2%;
  width: var(--aw);
  height: var(--aw);
  border-radius: 40% 60% 55% 45%;
  background: rgba(90,78,68,.82);
  box-shadow: 0 0 3px rgba(255,150,70,.35);
  opacity: 0;
  animation: ash-rise var(--ad) ease-in var(--delay) infinite;
}

.ambient-mote {
  position: absolute;
  left: var(--mx);
  top: var(--my);
  width: var(--ms);
  height: var(--ms);
  border-radius: 50%;
  background: var(--mc);
  box-shadow: 0 0 10px var(--mc);
  opacity: 0;
  animation: ambient-drift var(--md) ease-in-out var(--delay) infinite;
}

.ember-bed {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  width: 100%;
  height: clamp(276px,42vh,450px);
  opacity: .96;
  filter:
    drop-shadow(0 -8px 12px rgb(var(--ember-glow-near,38 239 232) / .22))
    drop-shadow(0 -18px 34px rgb(var(--ember-glow-far,17 166 181) / .14));
  pointer-events: none;
}

/* Ember shader editor: add ?fxDebug=1 to the page URL. */
.fx-debug-toggle {
  position: fixed;
  z-index: 130;
  right: 16px;
  bottom: 16px;
  padding: 9px 13px;
  border: 1px solid var(--cyan);
  background: #06131ded;
  color: white;
  cursor: pointer;
}

.fx-debug-panel {
  display: none;
  position: fixed;
  z-index: 131;
  right: 16px;
  bottom: 60px;
  width: 320px;
  padding: 16px;
  border: 1px solid var(--cyan);
  background: #02090df2;
  box-shadow: 0 12px 40px #000;
  color: white;
  font: 12px SourceSans,sans-serif;
}

.fx-debug-panel.open { display: block; }

.fx-debug-panel h3,
.fx-debug-panel p { margin: 0 0 10px; }

.fx-debug-panel label {
  display: grid;
  grid-template-columns: 90px 1fr 48px;
  align-items: center;
  gap: 8px;
  margin: 9px 0;
}

.fx-debug-panel input { width: 100%; }

.fx-debug-panel .fx-color-row input[type="color"] {
  height: 28px;
  padding: 1px;
  border: 1px solid #ffffff44;
  background: transparent;
}

.fx-debug-panel button {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid #ffffff55;
  background: #0d2a36;
  color: white;
  cursor: pointer;
}

@keyframes leaf-fall {
  0% {
    translate: 0 0;
    rotate: 0deg;
    opacity: 0;
  }

  8% {
    opacity: .95;
  }

  92% {
    opacity: .8;
  }

  100% {
    translate: var(--sway) 105vh;
    rotate: var(--spin);
    opacity: 0;
  }

}

@keyframes ember-rise {
  0% {
    translate: 0 0;
    opacity: 0;
  }

  14% {
    opacity: 1;
  }

  100% {
    translate: var(--drift) -100vh;
    opacity: 0;
  }

}

@keyframes ash-rise {
  0% {
    translate: 0 0;
    opacity: 0;
    scale: 1;
  }

  16% {
    opacity: .85;
  }

  100% {
    translate: var(--adrift) -105vh;
    opacity: 0;
    scale: .6;
  }

}

@keyframes ambient-drift {
  0%,100% { translate: 0 14px; opacity: 0; scale: .7; }
  22%,76% { opacity: var(--mo); }
  50% { translate: var(--drift) -34px; scale: 1.2; }
}

@media(prefers-reduced-motion:reduce) {
  .leaf,.ember-mote,.ash-mote,.ambient-mote {
    animation: none;
    opacity: 0;
  }

  .faction-flow-canvas { opacity: .48; }

}

/* -- Centered content column: crest lockup, motto, carousel --------------- */

.hero-center {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(18px,4.2vh,64px) 24px clamp(28px,5vh,64px);
  gap: clamp(10px,1.8vh,22px);
  text-align: center;
  /* This box spans the whole stage so its empty flex gaps don't swallow
     clicks meant for the hero portraits/layout editor underneath — only
     the actual interactive pieces (crest lockup children, carousel) opt
     back in to pointer-events. */
  pointer-events: none;
}

.trailer-shell {
  pointer-events: auto;
}

.hero-brand-lockup {
  position: relative;
  width: clamp(280px,32vw,440px);
  aspect-ratio: 1.48 / 1;
  flex: none;
  /* Lift only the crest/title lockup above the chandelier. */
  transform: translate(var(--crest-lockup-x,0px),var(--crest-lockup-y,-138px)) scale(var(--crest-lockup-scale,1));
}

.hero-brand-lockup>* {
  pointer-events: auto;
}

.crest-lightning-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  transform-origin: 50% 35.5%;
  animation: crest-turn var(--crest-rotation-seconds,36s) linear infinite;
  /* The crest occupies the upper 48% square of this wide lockup. */
  clip-path: ellipse(24% 35.5% at 50% 35.5%);
}

.game-logo {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: var(--crest-size,55%);
  height: auto;
  aspect-ratio: 1/1;
  object-fit: contain;
  opacity: var(--crest-opacity,.45);
  filter: none;
  animation: crest-turn var(--crest-rotation-seconds,36s) linear infinite,crest-breathe 8s ease-in-out infinite;
}

@keyframes crest-turn {
  to { rotate: 360deg; }
}

@keyframes crest-breathe {
  0%,100% {
    transform: scale(1);
    opacity: calc(var(--crest-opacity,.45) - .08);
  }

  50% {
    transform: scale(1.018);
    opacity: calc(var(--crest-opacity,.45) + .08);
  }

}

.hero-brand-lockup h1 {
  position: absolute;
  top: calc(43% + var(--crest-title-y,0px));
  left: calc(50% + var(--crest-title-x,0px));
  translate: -50% -50%;
  width: 100%;
  margin: 0;
  font-family: Henny,serif;
  font-size: var(--crest-title-size,clamp(34px,3.35vw,52px));
  line-height: 1;
  color: #f6ffff;
  text-shadow: 0 0 4px #fff,0 0 var(--crest-title-glow,16px) #22ddd8,0 6px 18px #000c;
  white-space: nowrap;
  animation: crest-title-jump 10.125s ease-in-out infinite;
}

.lucky-banner {
  position: absolute;
  z-index: 5;
  top: calc(13% + var(--lucky-y,0px));
  left: calc(72% + var(--lucky-x,0px));
  width: var(--lucky-size,19%);
  height: auto;
  transform-origin: 18% 78%;
  rotate: var(--lucky-rotation,60deg);
  filter: drop-shadow(0 0 5px rgba(255,255,255,.8)) drop-shadow(0 0 12px rgba(0,255,255,.7));
  animation: lucky-banner-pulse 3s ease-in-out infinite;
}

@keyframes crest-title-jump {
  0%,13.4%,100% { transform: translateY(0); }
  5% { transform: translateY(-8px); }
  9% { transform: translateY(0); }
}

@keyframes lucky-banner-pulse {
  0%,100% { rotate: var(--lucky-rotation,60deg); opacity: .53; }
  25%,50% { rotate: calc(var(--lucky-rotation,60deg) - 30deg); opacity: .92; }
}

@media(prefers-reduced-motion:reduce) {
  .game-logo {
    animation: none;
  }

  .hero-brand-lockup h1,.lucky-banner { animation: none; }

}

.motto {
  flex: none;
  margin: 0;
  width: min(720px,86vw);
  font: clamp(20px,2.1vw,33px)/1.16 DMSerif,Georgia,serif;
  color: #f1fbfa;
  letter-spacing: .01em;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.motto span:first-child {
  color: #eafffd;
  text-shadow: 0 0 3px #fff,0 0 10px #2be7dd;
}

.motto span:last-child {
  color: #ffd267;
  font-size: 1.3em;
  font-weight: 400;
  letter-spacing: .018em;
  -webkit-text-stroke: .4px #fff0a1;
  text-shadow: 0 0 3px #fff8dc,0 0 12px #ffb632,0 0 25px rgba(218,92,13,.82),0 5px 15px #000;
}

.trailer-shell {
  position: relative;
  flex: none;
  margin-top: auto;
  width: min(620px,58vw);
  height: clamp(150px,22vh,220px);
  perspective: 1100px;
}

.trailer-viewport {
  position: relative;
  height: 100%;
  overflow: visible;
}

.trailer-track {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
}

.trailer-card {
  position: absolute;
  inset: 0;
  width: 72%;
  height: 100%;
  left: 14%;
  overflow: hidden;
  border: 1px solid #7bfff3;
  background: #06131c;
  box-shadow: 0 0 0 4px #031018,0 12px 34px #000b;
  opacity: 0;
  pointer-events: none;
  transform: translateZ(-260px) scale(.72);
  transition: transform .65s cubic-bezier(.2,.8,.2,1),opacity .45s,filter .45s;
  cursor: pointer;
}

.trailer-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trailer-card:after {
  content: "";
  position: absolute;
  inset: 48% 0 0;
  background: linear-gradient(transparent,#02090de8);
}

.trailer-card.is-focus {
  z-index: 4;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0,0,80px) scale(1);
}

.trailer-card.is-left {
  z-index: 2;
  opacity: .72;
  pointer-events: auto;
  transform: translate3d(-46%,6px,-120px) rotateY(31deg) scale(.82);
  filter: brightness(.72);
}

.trailer-card.is-right {
  z-index: 2;
  opacity: .72;
  pointer-events: auto;
  transform: translate3d(46%,6px,-120px) rotateY(-31deg) scale(.82);
  filter: brightness(.72);
}

.trailer-card:focus-visible {
  outline: 2px solid white;
  outline-offset: 5px;
}

.trailer-label {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 10px;
  font: clamp(18px,2.2vw,30px)/1 Henny,serif;
  text-shadow: 0 0 8px #38e0ca,0 2px 4px #000;
}

.play-icon {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 46%;
  translate: -50% -50%;
  width: 52px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: #f7fbfa;
  color: #02090d;
  font-size: 22px;
  box-shadow: 0 4px 20px #0008;
}

.trailer-hint {
  position: absolute;
  z-index: 6;
  right: 14%;
  top: 10px;
  padding: 4px 7px;
  background: #02080dc7;
  color: #bcd2d3;
  font: 9px SourceSans,sans-serif;
  letter-spacing: .1em;
}

.trailer-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  translate: 0 -50%;
  width: 38px;
  height: 58px;
  border: 0;
  background: #06131cbb;
  color: #7bfff3;
  font-size: 36px;
  cursor: pointer;
  text-shadow: 0 0 10px #38e0ca;
}

.trailer-arrow.prev {
  right: 92%;
}

.trailer-arrow.next {
  left: 92%;
}

.trailer-dots {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: -20px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.trailer-dot {
  width: 7px;
  height: 7px;
  border: 1px solid var(--cyan);
  background: transparent;
  transform: rotate(45deg);
  padding: 0;
}

.trailer-dot.active {
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

/* ==========================================================================
   RESPONSIVE — HERO (tablet / phone)
   Only the shared coordinate boxes change size here; nothing is repositioned
   independently, so crest/title/motto/carousel stay locked together.
   ========================================================================== */

@media(max-width:900px) {
  .hero-brand-lockup {
    width: clamp(210px,46vw,340px);
  }

  .trailer-shell {
    width: min(520px,74vw);
  }

  .hero-figure {
    opacity: .55;
    width: 34vw;
  }

  .hero-figure[data-hero="1000001"] {
    --x: -15%;
    --h: 46%;
  }

  .hero-figure[data-hero="1000002"] {
    --x: 81%;
    --h: 46%;
  }

  .particle-field {
    width: 50%;
  }

}

@media(max-width:560px) {
  .hero {
    min-height: 680px;
  }

  .hero-center {
    padding: 14px 16px 26px;
    gap: 14px;
  }

  .hero-brand-lockup {
    width: 72vw;
  }

  .hero-brand-lockup h1 {
    font-size: clamp(28px,9vw,42px);
  }

  .motto {
    width: 92vw;
    font-size: clamp(18px,5.6vw,24px);
  }

  .trailer-shell {
    width: 82vw;
    height: 150px;
  }

  .hero-figure {
    opacity: .35;
    width: 26vw;
  }

  .hero-figure[data-hero="1000001"] {
    --x: -30%;
    --h: 36%;
  }

  .hero-figure[data-hero="1000002"] {
    --x: 88%;
    --h: 36%;
  }

  .particle-field {
    width: 58%;
    height: 36%;
  }

}

@media(max-height:640px) and (max-width:900px) {
  .hero {
    height: auto;
    min-height: 100svh;
  }

  .hero-center {
    padding-top: clamp(14px,6vh,40px);
  }

  .trailer-shell {
    margin-top: 12px;
  }

}

/* ==========================================================================
   HERO LAYOUT EDITOR (drag-and-drop hero placement)
   Hidden on the public page. Add ?heroDebug=1 to reveal the small
   "Layout" button, then drag a hero portrait directly or
   use the sliders; "Copy values" gives you the --x/--y/--h/--s/--z to paste
   back into index.html as the new defaults.
   ========================================================================== */

.debug-toggle {
  display: none;
  position: fixed;
  z-index: 120;
  right: 14px;
  bottom: 14px;
  border: 1px solid var(--line);
  background: #06131db3;
  color: #cfe9e8;
  padding: 9px 13px;
  font: 11px SourceSans,sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: .55;
  transition: opacity .2s,border-color .2s;
}

.layout-debug-available .debug-toggle {
  display: block;
}

.debug-toggle:hover,.debug-toggle:focus-visible {
  opacity: 1;
  border-color: var(--cyan);
}

.hero-debug {
  display: none;
  position: fixed;
  z-index: 121;
  right: 14px;
  bottom: 58px;
  width: 300px;
  padding: 14px;
  background: #02090df2;
  border: 1px solid var(--cyan);
  box-shadow: 0 12px 40px #000;
  color: white;
  font: 12px SourceSans,sans-serif;
}

.hero-debug.open {
  display: block;
}

.debug-enabled .hero-figure {
  pointer-events: auto;
  cursor: move;
  outline: 1px dashed transparent;
}

.debug-enabled .hero-figure.debug-selected {
  outline-color: #fff;
  filter: drop-shadow(0 0 15px #ffcf62);
}

.hero-debug h3 {
  margin: 0 0 10px;
  color: var(--cyan);
}

.hero-debug label {
  display: grid;
  grid-template-columns: 65px 1fr 42px;
  align-items: center;
  gap: 7px;
  margin: 7px 0;
}

.hero-debug input {
  width: 100%;
}

.debug-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.debug-actions button {
  flex: 1;
  background: #0d2a36;
  color: white;
  border: 1px solid #ffffff44;
  padding: 7px;
  cursor: pointer;
}

.debug-output {
  margin-top: 9px;
  max-height: 90px;
  overflow: auto;
  white-space: pre-wrap;
  color: #a9c5c7;
  font-family: monospace;
  font-size: 9px;
}

/* Crest and faction placement tools (?crestDebug=1 / ?factionDebug=1). */
.designer-toggle {
  position: fixed;
  right: 16px;
  z-index: 134;
  min-width: 142px;
  padding: 9px 12px;
  border: 1px solid #52e8f6aa;
  background: rgba(2,13,21,.94);
  color: #dffcff;
  font: 700 11px/1.1 Cinzel,serif;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 0 0 18px #00d9ff22;
}

.designer-panel {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 58px;
  z-index: 135;
  width: min(350px,calc(100vw - 32px));
  max-height: min(76vh,720px);
  overflow: auto;
  padding: 14px;
  border: 1px solid #52e8f688;
  background: rgba(2,10,17,.97);
  color: #e9fbff;
  box-shadow: 0 12px 45px #000c,0 0 24px #00d9ff18;
}

.designer-panel.open { display: block; }
.designer-panel [hidden] { display: none !important; }

.designer-panel h3 {
  margin: 0 0 11px;
  color: #75eff8;
  font: 700 15px/1.2 Cinzel,serif;
  letter-spacing: .06em;
}

.designer-panel label {
  display: grid;
  grid-template-columns: 95px minmax(100px,1fr) 46px;
  align-items: center;
  gap: 8px;
  margin: 7px 0;
  font: 600 10px/1.2 Inter,sans-serif;
  letter-spacing: .02em;
}

.designer-panel input[type="range"] { width: 100%; }

.designer-panel output {
  color: #79edf5;
  font: 10px/1 monospace;
  text-align: right;
}

.designer-panel select,
.designer-panel input[type="text"] {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #ffffff35;
  background: #071822;
  color: #fff;
  font: 11px/1.2 Inter,sans-serif;
}

.designer-source { grid-template-columns: 95px minmax(0,1fr) !important; }

.designer-actions {
  display: flex;
  gap: 7px;
  margin-top: 12px;
}

.designer-actions button {
  flex: 1;
  padding: 8px;
  border: 1px solid #ffffff38;
  background: #0d2a36;
  color: #fff;
  cursor: pointer;
}

.settings-export-toggle {
  position: fixed;
  z-index: 140;
  left: 50%;
  bottom: 16px;
  translate: -50% 0;
  padding: 10px 18px;
  border: 1px solid #ffd267;
  background: rgba(3,13,22,.96);
  box-shadow: 0 0 22px rgba(255,190,72,.24),0 8px 28px #000b;
  color: #fff3c5;
  font: 700 11px/1 Cinzel,serif;
  letter-spacing: .08em;
  cursor: pointer;
}

/* ==========================================================================
   COMMUNITY / DISCORD
   ========================================================================== */

.community {
  position: relative;
  padding: 42px 0;
  scroll-margin-top: 72px;
  background:
    linear-gradient(90deg,rgba(13,94,100,.2),transparent 45%,rgba(137,51,21,.2)),
    #030b12;
  border-block: 1px solid var(--line);
}

.community-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.community h2 {
  margin: 4px 0 5px;
  font: clamp(30px,4vw,48px)/1.1 Henny,serif;
}

.community p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
}

.discord-link svg {
  width: 22px;
  height: 22px;
  margin-right: 10px;
  fill: currentColor;
}

.social-panel {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(119, 199, 201, .18);
}

.social-panel-label {
  flex: none;
  color: #a9dfe2;
  font: 700 11px/1.3 Cinzel, serif;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.social-links { display: flex; flex-wrap: wrap; gap: 10px; }

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 8px 15px;
  border: 1px solid rgba(131, 219, 222, .28);
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(34, 104, 113, .23), rgba(4, 16, 26, .7));
  color: #e5f6f6;
  font: 700 11px/1 Cinzel, serif;
  letter-spacing: .06em;
  text-decoration: none;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}

.social-link svg { width: 19px; height: 19px; fill: currentColor; }
.social-link:hover, .social-link:focus-visible {
  transform: translateY(-2px);
  border-color: #80ebeb;
  background: rgba(28, 106, 114, .55);
  box-shadow: 0 0 18px rgba(91, 229, 225, .19);
  outline: none;
}

@media(max-width:900px) {
  .hero-figure.rank-3,.hero-figure.rank-4 { display: none; }
  .hero-figure.rank-2 { opacity: .48; }
  .faction-crest { width: clamp(115px,15vw,155px); }
  .faction-label { top: 51%; }
}

@media(max-width:650px) {
  .brand-name { min-width: 0; }
  .community-card { align-items: flex-start; flex-direction: column; }
  .community .btn { width: 100%; }
  .social-panel { align-items: flex-start; flex-direction: column; gap: 12px; }
  .social-link { flex: 1 1 auto; }
  .hero-figure.rank-2 { display: none; }
  .faction-label { display: none; }
  .faction-crest { width: clamp(92px,23vw,125px); opacity: .48; }
  .ember-bed { height: clamp(220px,36vh,340px); }
}