@import url("./tokens.css");


/* =========================================
   MATTHEW JOKI - DRAGON KINGDOM
   FINAL DESIGN
========================================= */

:root {
  --bg: #100907;
  --panel: #1b100d;
  --panel-light: #28150f;
  --red: #a51d19;
  --red-light: #e43a20;
  --orange: #ff7628;
  --gold: #e9bd65;
  --text: #fff3e5;
  --muted: #d6c1af;
  --border: rgba(233, 189, 101, .3);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", sans-serif;
  line-height: 1.7;
  overflow-x: hidden;
}

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

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.container {
  width: min(1120px, 88%);
  margin-inline: auto;
}

/* BACKGROUND */

.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, #40180f 0%, transparent 55%),
    #100907;
}

/* Falling meteors: thin blue-white streaks, subtle glow and diagonal motion. */
.embers {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
#authScreen, #site { position: relative; z-index: 1; }
.meteor {
  position: absolute;
  top: -110px;
  display: block;
  width: var(--meteor-size, 1.5px);
  height: var(--meteor-length, 58px);
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(105,190,255,.08) 48%, rgba(153,220,255,.78) 88%, #e8f8ff 100%);
  box-shadow: 0 0 8px 1px rgba(71,166,255,.34), 0 0 18px rgba(71,166,255,.16);
  transform: rotate(-34deg);
  transform-origin: 50% 0;
  animation: meteorFall var(--meteor-duration, 8s) linear var(--meteor-delay, 0s) infinite;
  will-change: transform, opacity;
}
.meteor::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #eaf8ff;
  box-shadow: 0 0 7px 2px rgba(111,194,255,var(--meteor-glow,.7)), 0 0 17px 4px rgba(53,143,231,.3);
}
@keyframes meteorFall {
  0% { transform: translate3d(0,0,0) rotate(-34deg); opacity: 0; }
  8% { opacity: .7; }
  72% { opacity: .52; }
  100% { transform: translate3d(var(--meteor-drift,22vw),115vh,0) rotate(-34deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .embers { display: none; }
}

/* TYPOGRAPHY */

h1,
h2,
h3,
.brand,
.section-title {
  font-family: "Cinzel", serif;
}

.eyebrow {
  color: var(--orange);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* BUTTONS */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: .25s ease;
}

.btn:disabled {
  opacity: .6;
  cursor: wait;
}

.btn-gold {
  background: linear-gradient(135deg, #f0cf83, #b77a2d);
  color: #1b0d07;
}

.btn-gold:hover {
  box-shadow: 0 0 25px rgba(233, 189, 101, .45);
  transform: translateY(-3px);
}

.btn-outline {
  background: transparent;
  color: var(--gold);
}

.btn-outline:hover {
  background: var(--red);
  color: white;
}

.btn-full {
  width: 100%;
}

/* LOGIN AND REGISTER */

.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 18px;
  background:
    linear-gradient(rgba(10, 5, 4, .75), rgba(10, 5, 4, .92)),
    radial-gradient(ellipse at center, #672312, #100907 75%);
}

.auth-card {
  width: min(440px, 100%);
  padding: 38px;
  background: rgba(25, 13, 9, .96);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 20px 70px #0009;
  text-align: center;
}

.dragon-emblem {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: 0 auto 12px;
}
.dragon-emblem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.auth-card h1 {
  color: var(--gold);
  font-size: 27px;
  letter-spacing: 2px;
  margin-top: 8px;
}

.creator {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 2px;
}

.kicker {
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 3px;
  margin: 22px 0;
}

.field {
  margin-bottom: 17px;
  text-align: left;
}

.field label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 13px;
}

.field input {
  width: 100%;
  padding: 13px 14px;
  background: #0d0806;
  color: white;
  border: 1px solid var(--border);
  border-radius: 5px;
  outline: none;
}

.field input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 12px #ff762822;
}

.auth-switch {
  margin-top: 22px;
  color: var(--muted);
  font-size: 13px;
}

.auth-switch button {
  border: none;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  margin-left: 5px;
}

#authMessage {
  margin-top: 15px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

#authMessage.success {
  color: #8de0a0;
}

#authMessage.error {
  color: #ff8176;
}

/* HEADER AND NAVIGATION */

header {
  position: relative;
  z-index: 10;
  background: rgba(12, 7, 5, .96);
  border-bottom: 1px solid var(--border);
}

.nav {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 2px;
  white-space: nowrap;
}

.brand-icon {
  font-size: 32px;
}

.brand small {
  display: block;
  color: var(--muted);
  font-family: "Poppins", sans-serif;
  font-size: 9px;
  letter-spacing: 1px;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 17px;
}

.nav-links a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--text);
  transition: .2s;
}

.nav-links a:hover {
  color: var(--orange);
}

.nav-user {
  color: var(--gold);
  font-size: 12px;
}

/* =========================================
   DRAGON KINGDOM HERO
========================================= */

.hero {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 78% 45%, #54200f 0%, transparent 48%),
    #100907;
}

/* Dragon artwork */

.hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image:
    linear-gradient(
      90deg,
      rgba(10, 5, 4, .94) 0%,
      rgba(10, 5, 4, .78) 25%,
      rgba(10, 5, 4, .32) 52%,
      rgba(10, 5, 4, .04) 78%
    ),
    linear-gradient(
      0deg,
      #100907 0%,
      rgba(16, 9, 7, .15) 35%,
      transparent 70%
    );

  background-repeat: no-repeat;
  background-size:
    cover,
    cover,
    auto 118%;

  background-position:
    center,
    center,
    88% center;

  filter: saturate(1.12) contrast(1.06);
}

/* Warm dragon glow */

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 78% 48%,
      rgba(255, 91, 22, .15),
      transparent 38%
    );
  mix-blend-mode: screen;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  width: 88%;
  margin-inline: auto;
  padding-top: 75px;
  padding-bottom: 90px;
}

.hero .eyebrow {
  text-shadow: 0 2px 12px #000;
}

.welcome-text {
  margin-top: 20px;
  color: #e5cbb5;
  font-size: 15px;
  letter-spacing: 5px;
}

.hero h1 {
  margin: 12px 0 22px;
  color: var(--gold);
  font-size: clamp(55px, 9vw, 100px);
  line-height: 1.08;
  letter-spacing: 4px;
  text-shadow:
    0 5px 30px #000,
    0 0 35px rgba(233, 189, 101, .18);
}

.hero-description {
  max-width: 490px;
  margin-bottom: 30px;
  color: #fff0df;
  font-size: 16px;
  text-shadow: 0 2px 10px #000;
}

/* KINGDOM FEATURE CARDS */

.kingdom-section {
  padding-top: 75px;
  padding-bottom: 65px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;
}

.feature-card {
  display: block;
  padding: 32px;
  background: linear-gradient(145deg, #29160f, #160c09);
  border: 1px solid var(--border);
  border-radius: 7px;
  transition: .3s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  border-color: var(--orange);
  box-shadow: 0 12px 35px #a532182c;
}

.feature-icon {
  margin-bottom: 15px;
  color: var(--gold);
  font-size: 38px;
}

.feature-card h2 {
  margin-bottom: 12px;
  color: var(--gold);
  font-size: 19px;
}

.feature-card p {
  color: #dfc9b7;
  font-size: 14px;
}

.feature-link {
  display: inline-block;
  margin-top: 22px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* ABOUT, SERVICE AND CONTACT */

.section {
  padding-top: 75px;
  padding-bottom: 75px;
  text-align: center;
}

.section-title {
  margin-top: 12px;
  color: var(--gold);
  font-size: clamp(30px, 5vw, 44px);
  letter-spacing: 2px;
}

.line {
  width: 85px;
  height: 3px;
  margin: 20px auto 35px;
  background: linear-gradient(90deg, var(--red), var(--gold));
}

.royal-card {
  max-width: 850px;
  margin: auto;
  padding: 38px;
  background: linear-gradient(145deg, #29160f, #160c09);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 15px 45px #0003;
}

.royal-card h3 {
  margin-bottom: 17px;
  color: var(--gold);
  font-size: 21px;
}

.royal-card p {
  color: #dfc9b7;
  font-size: 15px;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
}

.pill {
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 30px;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 1px;
}

.wa {
  display: inline-block;
  margin-top: 24px;
  padding: 13px 23px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: linear-gradient(135deg, #8e1c15, #4a0c09);
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: .25s;
}

.wa:hover {
  background: var(--red-light);
  box-shadow: 0 0 20px #e43a2055;
}

/* REVEAL ANIMATION */

.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity .7s ease,
    transform .7s ease;
}

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

/* ADMIN DASHBOARD */

.admin-panel {
  padding-top: 50px;
  padding-bottom: 60px;
}

.admin-panel h2 {
  margin-bottom: 15px;
  color: var(--gold);
}

.admin-panel p {
  margin-bottom: 20px;
  color: var(--muted);
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
}

th,
td {
  padding: 13px 15px;
  border: 1px solid var(--border);
  text-align: left;
  font-size: 13px;
}

th {
  background: #32180f;
  color: var(--gold);
}

td {
  color: var(--text);
}

/* FOOTER */

footer {
  padding: 30px 15px;
  background: #090504;
  border-top: 1px solid var(--border);
  color: var(--muted);
  text-align: center;
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 2;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 850px) {
  .nav {
    flex-direction: column;
    padding-top: 17px;
    padding-bottom: 17px;
  }

  .nav-links {
    justify-content: center;
    gap: 12px 16px;
  }

  .hero {
    min-height: 760px;
    align-items: flex-start;
  }

  .hero-image {
    background-image:
      linear-gradient(
        0deg,
        #100907 0%,
        rgba(10, 5, 4, .25) 48%,
        rgba(10, 5, 4, .05) 100%
      );

    background-size:
      cover,
      auto 78%;

    background-position:
      center,
      65% top;
  }

  .hero::after {
    background:
      radial-gradient(
        ellipse at 65% 28%,
        rgba(255, 91, 22, .12),
        transparent 45%
      );
  }

  .hero-content {
    padding-top: 390px;
    padding-bottom: 70px;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {
  .container {
    width: 90%;
  }

  .brand {
    font-size: 15px;
  }

  .nav-links {
    gap: 10px 13px;
  }

  .nav-links a {
    font-size: 10px;
  }

  .nav-links .btn {
    padding: 7px 12px;
    font-size: 10px;
  }

  .hero {
    min-height: 700px;
  }

  .hero-image {
    background-image:
      linear-gradient(
        0deg,
        #100907 0%,
        rgba(10, 5, 4, .32) 48%,
        rgba(10, 5, 4, .02) 100%
      );

    background-size:
      cover,
      auto 68%;

    background-position:
      center,
      62% top;
  }

  .hero-content {
    padding-top: 335px;
    padding-bottom: 65px;
  }

  .hero .eyebrow {
    font-size: 10px;
    letter-spacing: 2px;
  }

  .welcome-text {
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: 4px;
  }

  .hero h1 {
    margin: 10px 0 17px;
    font-size: 58px;
  }

  .hero-description {
    font-size: 14px;
  }

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

  .feature-card,
  .royal-card {
    padding: 25px;
  }

  .section {
    padding-top: 55px;
    padding-bottom: 55px;
  }

  .auth-card {
    padding: 28px 22px;
  }
}

/* REDUCE MOTION ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* =========================================
   HERO CONCEPT A — CENTERED DRAGON POSTER
   Dragon + warrior centered, title beneath
========================================= */

.hero {
  min-height: 900px;
  align-items: flex-end;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(132, 30, 12, .42), transparent 52%),
    #100907;
}

.hero-image {
  background-image:
    linear-gradient(
      0deg,
      #100907 0%,
      rgba(16, 9, 7, .82) 12%,
      rgba(16, 9, 7, .14) 44%,
      rgba(10, 5, 4, .08) 75%,
      rgba(10, 5, 4, .4) 100%
    );
  background-repeat: no-repeat;
  background-size: cover, auto 112%;
  background-position: center, center 38%;
  filter: saturate(1.2) contrast(1.08);
}

.hero::after {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 73, 20, .18), transparent 42%),
    linear-gradient(0deg, rgba(10, 4, 3, .35), transparent 45%);
}

.hero-content {
  width: min(1000px, 90%);
  padding-top: 560px;
  padding-bottom: 75px;
  text-align: center;
}

.hero .eyebrow {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid rgba(233, 189, 101, .38);
  background: rgba(12, 6, 4, .62);
  border-radius: 2px;
  letter-spacing: 3px;
}

.welcome-text {
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 6px;
  text-shadow: 0 2px 14px #000;
}

.hero h1 {
  margin: 4px 0 12px;
  font-size: clamp(48px, 7vw, 82px);
  line-height: 1.02;
  letter-spacing: 5px;
  text-shadow:
    0 4px 5px #000,
    0 0 22px rgba(0, 0, 0, .95),
    0 0 35px rgba(233, 115, 38, .24);
}

.hero-description {
  max-width: 560px;
  margin: 0 auto 24px;
  font-size: 14px;
  text-shadow: 0 2px 12px #000;
}

.hero-content .btn {
  box-shadow: 0 5px 25px rgba(0, 0, 0, .45);
}

@media (max-width: 850px) {
  .hero {
    min-height: 820px;
    align-items: flex-end;
  }

  .hero-image {
    background-size: cover, auto 83%;
    background-position: center, center top;
  }

  .hero-content {
    padding-top: 480px;
    padding-bottom: 65px;
  }
}

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

  .hero-image {
    background-size: cover, auto 70%;
    background-position: center, center top;
  }

  .hero-content {
    width: 90%;
    padding-top: 395px;
    padding-bottom: 55px;
  }

  .hero .eyebrow {
    font-size: 9px;
    letter-spacing: 1.7px;
  }

  .welcome-text {
    margin-top: 10px;
    font-size: 11px;
    letter-spacing: 4px;
  }

  .hero h1 {
    margin: 7px 0 12px;
    font-size: clamp(44px, 13vw, 58px);
    letter-spacing: 3px;
  }

  .hero-description {
    max-width: 420px;
    margin-bottom: 20px;
    font-size: 13px;
  }
}


/* =========================================
   CRIMSON SERPENT REDESIGN
   Elegant red + premium gaming + royal fantasy
========================================= */
:root {
  --bg: #120305;
  --panel: #210609;
  --panel-light: #33090f;
  --red: #8f1020;
  --red-light: #df2438;
  --orange: #ff6b68;
  --gold: #e9c98a;
  --text: #fff4f1;
  --muted: #d8bfc0;
  --border: rgba(233, 201, 138, .28);
}
body {
  background: #120305;
}
.bg {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(155, 12, 32, .58), transparent 52%),
    radial-gradient(ellipse at 100% 65%, rgba(93, 5, 22, .32), transparent 42%),
    #120305;
}
.auth-screen {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(173, 14, 39, .62), transparent 48%),
    linear-gradient(145deg, #190306, #090103 78%);
}
.auth-card,
.royal-card,
.feature-card,
.admin-panel .table-wrapper {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.auth-card {
  border-color: rgba(233, 201, 138, .45);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(48, 7, 15, .97), rgba(17, 3, 7, .98));
  box-shadow: 0 28px 90px rgba(0,0,0,.55), 0 0 45px rgba(177, 12, 38, .14);
}
.auth-card::before,
.feature-card::before,
.royal-card::before {
  content: "蛇";
  position: absolute;
  z-index: -1;
  top: 7px;
  left: -30px;
  color: rgba(255, 88, 103, .8);
  font-family: serif;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255, 50, 76, .8);
  animation: serpentGlide 12s linear infinite;
  pointer-events: none;
}
.feature-card::before { top: 8px; animation-duration: 10s; }
.royal-card::before { top: 8px; animation-duration: 14s; }
@keyframes serpentGlide {
  0% { left: -24px; transform: rotate(0deg) scale(.85); opacity: 0; }
  8% { opacity: .95; }
  48% { transform: rotate(8deg) scale(1); }
  92% { opacity: .95; }
  100% { left: calc(100% + 12px); transform: rotate(0deg) scale(.85); opacity: 0; }
}
header {
  background: rgba(15, 2, 6, .94);
  border-bottom-color: rgba(233, 201, 138, .25);
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
}
.brand, .brand-icon, .auth-card h1, .section-title, .feature-card h2,
.royal-card h3, .admin-panel h2 {
  color: var(--gold);
}
.nav-links a:hover { color: #ff6674; }
.hero {
  min-height: 760px;
  align-items: center;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(207, 21, 48, .44), transparent 38%),
    radial-gradient(ellipse at 50% 100%, rgba(83, 5, 22, .7), transparent 56%),
    linear-gradient(145deg, #31050d 0%, #170307 55%, #090103 100%);
}
.hero-image { display: none; }
.hero::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(233, 201, 138, .17);
  border-radius: 4px;
  pointer-events: none;
}
.hero::after {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 70, 88, .14), transparent 42%),
    linear-gradient(90deg, transparent, rgba(233, 201, 138, .025), transparent);
}
.hero-content {
  width: min(900px, 90%);
  padding: 100px 0;
}
.hero .eyebrow {
  color: #ff9298;
  border-color: rgba(233, 201, 138, .38);
}
.welcome-text { color: #f0c7c7; }
.hero h1 {
  color: #fff0d9;
  font-size: clamp(58px, 10vw, 112px);
  text-shadow: 0 5px 0 #560817, 0 0 42px rgba(255, 45, 73, .35);
}
.hero-description { margin-inline: auto; }
.btn-gold {
  border-color: #f0d6a0;
  background: linear-gradient(135deg, #f2d8a2, #b77b45);
}
.feature-card, .royal-card {
  background:
    linear-gradient(145deg, rgba(64, 9, 19, .96), rgba(20, 3, 8, .98));
  border-color: rgba(233, 201, 138, .27);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.feature-card:hover, .royal-card:hover {
  border-color: rgba(255, 93, 111, .8);
  box-shadow: 0 16px 45px rgba(153, 9, 34, .22);
}
.feature-icon, .feature-link, .eyebrow { color: #ff7c87; }
.line { background: linear-gradient(90deg, transparent, #a8132c, #e9c98a, #a8132c, transparent); }
.pill { border-color: rgba(233, 201, 138, .35); }
.wa {
  background: linear-gradient(135deg, #a8122a, #570817);
  border-color: rgba(233, 201, 138, .65);
}
footer { background: #090103; }
.ember { background: #ff5268; box-shadow: 0 0 12px 3px rgba(255, 50, 80, .5); }
@media (max-width: 850px) {
  .hero { min-height: 650px; align-items: center; }
  .hero-content { padding: 100px 0; }
}
@media (max-width: 600px) {
  .hero { min-height: 620px; }
  .hero-content { padding: 75px 0; }
  .hero::before { inset: 12px; }
  .hero h1 { font-size: clamp(46px, 13vw, 66px); }
  .auth-card { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-card::before, .feature-card::before, .royal-card::before { animation: none; }
}


/* =========================================
   ANIMATED CRIMSON DRAGON HERO
   Lightweight CSS/SVG orbit animation
========================================= */
.dragon-hero {
  min-height: 850px;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  text-align: left;
  padding: 64px max(6%, calc((100vw - 1160px) / 2));
  gap: 2%;
  background:
    radial-gradient(ellipse at 72% 43%, rgba(183, 18, 47, .3), transparent 35%),
    radial-gradient(ellipse at 15% 20%, rgba(91, 7, 24, .65), transparent 45%),
    linear-gradient(135deg, #21030a, #0c0205 65%, #190309);
}
.dragon-hero::before { inset: 18px; border-color: rgba(233,201,138,.2); }
.dragon-hero .hero-content { width: 100%; max-width: 560px; margin: 0; padding: 30px 0; text-align: left; }
.dragon-hero .hero .eyebrow, .dragon-hero .eyebrow { font-size: 10px; letter-spacing: 2.5px; }
.dragon-hero .hero h1, .dragon-hero h1 { font-size: clamp(56px, 7.5vw, 94px); margin: 18px 0; letter-spacing: 2px; }
.dragon-hero h1 span { color: var(--gold); }
.dragon-hero .hero-description { margin: 0 0 27px; max-width: 440px; color: #f1dfe0; font-size: 15px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-secondary { color:#f8d8d9; border-color:rgba(233,201,138,.5); }
.hero-status { margin-top:26px; color:#c6a8aa; font-size:10px; letter-spacing:2px; }
.hero-status span { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#ef394e; box-shadow:0 0 12px #f22a45; }
.hero-art { position:relative; width:min(100%, 620px); aspect-ratio: 1.08 / 1; justify-self:center; isolation:isolate; }
.hero-aura { position:absolute; width:46vw; height:46vw; max-width:620px; max-height:620px; right:7%; top:10%; border-radius:50%; background:radial-gradient(circle,rgba(226,20,54,.18),rgba(119,5,27,.09) 40%,transparent 70%); pointer-events:none; }
.dragon-orbit { position:absolute; inset:0; z-index:2; transform-origin:50% 50%; pointer-events:none; }
.dragon-orbit svg { width:100%; height:100%; overflow:visible; }
.orbit-back { animation:dragonOrbit 18s linear infinite; }
.orbit-front { z-index:4; animation:dragonOrbitReverse 13s linear infinite; opacity:.85; }
.warrior-halo { position:absolute; z-index:1; width:44%; height:60%; top:17%; left:28%; border-radius:50%; background:radial-gradient(ellipse,rgba(242,35,60,.25),rgba(232,167,75,.08) 45%,transparent 72%); filter:blur(10px); animation:warriorPulse 4s ease-in-out infinite; }
.warrior-art { position:absolute; z-index:3; height:91%; width:58%; left:21%; bottom:0; filter:drop-shadow(0 0 18px rgba(235,38,62,.2)); animation:warriorFloat 5s ease-in-out infinite; }
.hero-art-label { position:absolute; z-index:5; bottom:0; left:50%; width:max-content; max-width:100%; transform:translateX(-50%); color:#e9c98a; font-size:9px; letter-spacing:2px; text-align:center; text-shadow:0 2px 12px #000; white-space:nowrap; }
.hero-art-label span { color:#ff4c61; padding:0 6px; }
.hero-sparks { position:absolute; inset:0; z-index:5; pointer-events:none; }
.hero-sparks i { position:absolute; width:4px; height:4px; border-radius:50%; background:#ffd38b; box-shadow:0 0 12px 3px rgba(255,57,78,.7); animation:sparkDrift 5s ease-in-out infinite; }
.hero-sparks i:nth-child(1){left:18%;top:35%;animation-delay:-1s}.hero-sparks i:nth-child(2){right:13%;top:25%;animation-delay:-3s}.hero-sparks i:nth-child(3){left:27%;bottom:22%;animation-delay:-2s}.hero-sparks i:nth-child(4){right:22%;bottom:29%;animation-delay:-4s}.hero-sparks i:nth-child(5){left:52%;top:12%;animation-delay:-1.5s}
@keyframes dragonOrbit { from{transform:rotate(0deg)}to{transform:rotate(360deg)} }
@keyframes dragonOrbitReverse { from{transform:rotate(360deg)}to{transform:rotate(0deg)} }
@keyframes warriorFloat { 0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)} }
@keyframes warriorPulse { 0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)} }
@keyframes sparkDrift { 0%,100%{transform:translate3d(0,0,0) scale(.6);opacity:.3}50%{transform:translate3d(8px,-18px,0) scale(1.3);opacity:1} }
.hero-scroll { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:#bda4a5; font-size:9px; letter-spacing:2px; white-space:nowrap; }
.hero-scroll span { color:var(--gold); margin-left:8px; font-size:14px; }
@media (max-width:850px) {
  .dragon-hero { grid-template-columns:1fr; gap:0; padding:38px 7% 65px; min-height:unset; text-align:center; }
  .dragon-hero .hero-content { order:2; text-align:center; padding:10px 0 30px; margin-inline:auto; }
  .dragon-hero .hero-art { order:1; width:min(100%,560px); margin:-10px auto 0; }
  .dragon-hero h1 { font-size:clamp(50px,10vw,78px); }
  .dragon-hero .hero-description { margin:0 auto 24px; }
  .hero-actions { justify-content:center; }
  .hero-status { margin-top:20px; }
  .hero-scroll { bottom:12px; }
}
@media (max-width:600px) {
  .dragon-hero { padding:22px 6% 55px; }
  .dragon-hero .hero-art { width:110%; margin-left:-5%; margin-top:-12px; }
  .dragon-hero .hero-content { padding-top:0; }
  .dragon-hero h1 { font-size:clamp(44px,12vw,64px); margin:12px 0; }
  .dragon-hero .eyebrow { font-size:8px; letter-spacing:1.6px; }
  .dragon-hero .hero-description { font-size:13px; }
  .hero-actions .btn { width:100%; }
  .hero-art-label { font-size:7px; letter-spacing:1px; }
  .hero-scroll { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .orbit-back,.orbit-front,.warrior-art,.warrior-halo,.hero-sparks i { animation:none !important; }
}


/* Cinematic realistic dragon-and-warrior scene */
.dragon-hero {
  position:relative;
  display:block;
  min-height:780px;
  padding:130px max(6%, calc((100vw - 1160px) / 2)) 230px;
  overflow:hidden;
  background:#130307;
  isolation:isolate;
}
.dragon-hero::before { z-index:1; inset:14px; pointer-events:none; }
.dragon-hero .hero-cinematic-art {
  position:absolute;
  z-index:-1;
  inset:0;
  overflow:hidden;
  background:#170309;
}
.dragon-hero .hero-cinematic-art::before {
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(20,2,7,.96) 0%,rgba(25,3,8,.84) 27%,rgba(24,2,6,.35) 49%,rgba(13,2,4,.08) 76%),
    linear-gradient(0deg,rgba(14,1,4,.95) 0%,transparent 30%,rgba(14,1,4,.12) 100%);
}
.dragon-hero .hero-cinematic-art img {
  position:absolute; width:100%; height:100%; inset:0;
  object-fit:cover; object-position:center 43%;
  animation:cinematicReveal 1.8s ease-out both;
}
.dragon-hero .hero-content {
  position:relative; z-index:2;
  width:min(52%,580px); max-width:580px;
  padding:40px 0; margin:0; text-align:left;
}
.dragon-hero .hero-content h1 {
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(58px,7vw,100px);
  line-height:.92; letter-spacing:-2px;
  color:#f6d58a;
  text-shadow:0 4px 25px rgba(0,0,0,.8),0 0 28px rgba(241,75,37,.28);
}
.dragon-hero .hero-content h1 span { color:#fff0c3; }
.dragon-hero .hero-description { color:#fff0d7; font-size:17px; text-shadow:0 2px 8px #000; }
.dragon-hero .eyebrow { color:#ffd887; }
.dragon-hero .hero-status { color:#e9cdb3; }
.dragon-hero .hero-sparks { z-index:2; }
.dragon-hero .hero-sparks i { animation:sparkDrift 3.5s ease-in-out infinite; }
.dragon-hero .hero-scroll { z-index:3; }
@keyframes cinematicReveal { from{transform:scale(1.06);opacity:.65}to{transform:scale(1);opacity:1} }
@media(max-width:850px) {
  .dragon-hero { min-height:780px; padding:110px 7% 230px; }
  .dragon-hero .hero-cinematic-art::before {
    background:linear-gradient(0deg,rgba(15,1,5,.98) 0%,rgba(18,2,6,.74) 42%,rgba(18,2,6,.12) 100%),
      linear-gradient(90deg,rgba(18,2,6,.35),transparent);
  }
  .dragon-hero .hero-cinematic-art img { object-position:58% center; }
  .dragon-hero .hero-content { width:100%; max-width:540px; padding:0; text-align:left; }
  .dragon-hero .hero-content h1 { font-size:clamp(52px,10vw,82px); }
  .dragon-hero .hero-actions { justify-content:flex-start; }
}
@media(max-width:600px) {
  .dragon-hero { min-height:760px; padding:100px 7% 220px; }
  .dragon-hero .hero-cinematic-art img { object-position:58% center; }
  .dragon-hero .hero-content h1 { font-size:clamp(46px,12vw,66px); }
  .dragon-hero .hero-description { font-size:14px; }
  .dragon-hero .hero-actions .btn { width:auto; }
}


/* =========================================
   RESPONSIVE THREE-DOT MENU + LAYOUT POLISH
   Shared site navigation; existing auth and page styles preserved.
========================================= */
header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(14px); }
.nav { position: relative; min-height: 76px; flex-direction: row; padding-top: 10px; padding-bottom: 10px; }
.menu-toggle {
  width: 46px; height: 46px; flex: 0 0 46px; display: inline-flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--border); border-radius: 12px; background: rgba(31, 13, 10, .9);
  color: var(--gold); cursor: pointer; transition: .2s ease;
}
.menu-toggle:hover, .menu-toggle:focus-visible { border-color: var(--gold); box-shadow: 0 0 18px rgba(233,189,101,.15); outline: none; }
.menu-toggle span { width: 4px; height: 4px; display: block; border-radius: 50%; background: var(--gold); }
.nav-links {
  display: none; position: absolute; top: calc(100% - 2px); right: 0; z-index: 120;
  width: min(340px, calc(100vw - 28px)); max-height: min(75vh, 560px); overflow-y: auto;
  padding: 12px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px;
  flex-wrap: nowrap; border: 1px solid var(--border); border-radius: 14px;
  background: rgba(18, 8, 6, .98); box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.nav-links.menu-open { display: flex; animation: menuDrop .16s ease-out; }
.nav-links a { display: block; padding: 12px 14px; border-radius: 8px; font-size: 12px; letter-spacing: .3px; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--gold); background: rgba(165,29,25,.22); outline: none; }
.nav-user { display: block; padding: 10px 14px; overflow-wrap: anywhere; border-top: 1px solid rgba(233,189,101,.15); }
.nav-links #logout { width: 100%; margin-top: 3px; }
@keyframes menuDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* More consistent sizing and readable spacing on narrow screens */
img, video, iframe { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.feature-card { min-width: 0; height: 100%; padding: clamp(20px, 2.4vw, 30px); overflow-wrap: anywhere; }
.feature-card h2 { font-size: clamp(15px, 1.5vw, 19px); }
.royal-card { width: 100%; }
.table-wrapper { max-width: 100%; overflow-x: auto; }
@media (max-width: 900px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav { min-height: 70px; }
  .dragon-hero { min-height: 740px; }
}
@media (max-width: 600px) {
  .container { width: min(92%, 540px); }
  .nav { min-height: 66px; gap: 12px; }
  .brand { max-width: calc(100% - 58px); white-space: normal; font-size: 13px; line-height: 1.35; letter-spacing: 1px; }
  .brand-icon { font-size: 27px; }
  .brand small { font-size: 8px; letter-spacing: .6px; }
  .menu-toggle { width: 42px; height: 42px; flex-basis: 42px; border-radius: 10px; }
  .nav-links { right: 0; width: min(320px, calc(100vw - 24px)); }
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-card, .royal-card { padding: 22px 18px; }
  .section-title { overflow-wrap: anywhere; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .hero-actions .btn { max-width: 100%; font-size: 11px; padding: 11px 14px; }
  .pills { gap: 8px; }
  .pill { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .nav-links.menu-open { animation: none; } }


/* =========================================================
   MYSTIC DRAGON REALM — CINEMATIC HOMEPAGE POLISH
   CSS-only refinement. Existing copy, links and JS untouched.
========================================================= */
:root {
  --bg: #090609;
  --panel: #160b10;
  --panel-light: #241017;
  --red: #8f1427;
  --red-light: #d93643;
  --orange: #ff8052;
  --gold: #e9c98a;
  --text: #fff4eb;
  --muted: #d8c2b6;
  --border: rgba(233, 201, 138, .3);
}
body {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(113, 13, 32, .28), transparent 48%),
    #090609;
}
.bg {
  background:
    radial-gradient(ellipse at 78% 12%, rgba(130, 22, 34, .22), transparent 42%),
    radial-gradient(ellipse at 8% 70%, rgba(80, 12, 30, .2), transparent 38%),
    #090609;
}
header {
  background: rgba(10, 5, 9, .86);
  border-bottom: 1px solid rgba(233, 201, 138, .22);
  box-shadow: 0 10px 36px rgba(0,0,0,.32);
  backdrop-filter: blur(18px);
}
.brand { letter-spacing: 2.4px; }
.brand-icon {
  color: #f0d69c;
  text-shadow: 0 0 20px rgba(232, 173, 83, .4);
}
.nav-links a {
  position: relative;
  padding: 8px 0;
  transition: color .22s ease, text-shadow .22s ease;
}
.nav-links a:hover {
  color: #f2cf91;
  text-shadow: 0 0 14px rgba(233, 201, 138, .35);
}
.menu-toggle {
  background: linear-gradient(145deg, rgba(65, 12, 27, .9), rgba(17, 7, 12, .95));
  border-color: rgba(233, 201, 138, .42);
}
.menu-toggle span {
  width: 15px; height: 1px; border-radius: 2px;
}
.dragon-hero {
  min-height: min(850px, calc(100svh - 76px));
  display: block;
  padding: clamp(95px, 13vh, 150px) max(6%, calc((100vw - 1160px) / 2)) 170px;
  background:
    radial-gradient(ellipse at 78% 42%, rgba(139, 23, 39, .22), transparent 38%),
    linear-gradient(135deg, #17070e, #090609 72%);
}
.dragon-hero::before {
  inset: 16px;
  border-color: rgba(233, 201, 138, .2);
  box-shadow: inset 0 0 80px rgba(0,0,0,.2);
}
.dragon-hero .hero-cinematic-art {
  z-index: 0;
  background: #13070c;
}
.dragon-hero .hero-cinematic-art::before {
  background:
    linear-gradient(90deg, rgba(9,4,8,.96) 0%, rgba(12,5,10,.86) 26%, rgba(12,5,10,.42) 52%, rgba(9,4,8,.06) 82%),
    linear-gradient(0deg, #090609 0%, rgba(9,6,9,.55) 13%, transparent 48%, rgba(9,6,9,.22) 100%);
}
.dragon-hero .hero-cinematic-art img {
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(1.12) contrast(1.06);
  transform-origin: 62% 48%;
  animation: realmImageReveal 1.8s cubic-bezier(.2,.7,.2,1) both, realmImageDrift 24s ease-in-out 1.8s infinite alternate;
}
.dragon-hero .hero-content {
  width: min(54%, 610px);
  max-width: 610px;
  padding: 24px 0;
  animation: realmContentEnter .9s .12s both;
}
.dragon-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f1cc8b;
  font-size: 10px;
  letter-spacing: 3px;
}
.dragon-hero .eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.dragon-hero .welcome-text {
  color: #ead5c6;
  font-size: 12px;
  letter-spacing: 6px;
}
.dragon-hero .hero-content h1 {
  margin: 18px 0;
  color: #f2d69c;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(62px, 7.5vw, 104px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: 1px;
  text-shadow: 0 5px 28px rgba(0,0,0,.88), 0 0 38px rgba(217,54,67,.2);
}
.dragon-hero .hero-content h1 span {
  color: #fff0d2;
  background: linear-gradient(180deg, #fff2cf, #d9a95d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dragon-hero .hero-description {
  max-width: 440px;
  color: #f5e4d9;
  font-size: 15px;
  line-height: 1.9;
  text-shadow: 0 2px 12px #000;
}
.dragon-hero .hero-actions { gap: 12px; }
.dragon-hero .hero-actions .btn {
  min-height: 48px;
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: 1.4px;
}
.dragon-hero .btn-gold {
  color: #1b0c0a;
  background: linear-gradient(135deg, #f4dda9, #c18a49);
  box-shadow: 0 8px 28px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.5);
}
.dragon-hero .btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(213,155,82,.25);
}
.dragon-hero .hero-secondary {
  background: rgba(16,6,11,.45);
  border-color: rgba(239,211,159,.62);
}
.dragon-hero .hero-status {
  color: #ddc4b3;
  font-size: 9px;
  letter-spacing: 2.3px;
}
.dragon-hero .hero-status span {
  background: #ed594e;
  box-shadow: 0 0 14px #ed594e;
}
.dragon-hero .hero-sparks i {
  background: #ffd99b;
  box-shadow: 0 0 13px 3px rgba(255,104,62,.7);
}
.dragon-hero .hero-scroll {
  color: #e0c8b7;
  letter-spacing: 2.5px;
}
.kingdom-section { padding-top: 76px; }
.feature-card {
  min-height: 250px;
  padding: 30px;
  border-radius: 5px;
  background:
    linear-gradient(145deg, rgba(43,13,24,.94), rgba(15,7,12,.98));
  border-color: rgba(233,201,138,.24);
  box-shadow: 0 16px 42px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.025);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;
}
.feature-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #a51b32, #e9c98a, transparent);
  transform: scaleX(.22);
  transform-origin: center;
  opacity: .5;
  transition: transform .35s, opacity .35s;
}
.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(233,201,138,.65);
  box-shadow: 0 22px 50px rgba(101,10,31,.24), 0 0 24px rgba(233,201,138,.06);
}
.feature-card:hover::after { transform: scaleX(1); opacity: 1; }
.feature-icon {
  color: #e9c98a;
  text-shadow: 0 0 20px rgba(233,201,138,.2);
}
.feature-card h2 { color: #f0d49b; }
.feature-card p { color: #d9c3bb; line-height: 1.8; }
.feature-link { color: #f08a78; letter-spacing: 1.5px; }
.section { padding-top: 88px; padding-bottom: 88px; }
.section-title { color: #f0d49b; }
.royal-card {
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(43,13,24,.94), rgba(15,7,12,.98));
  border-color: rgba(233,201,138,.25);
  box-shadow: 0 20px 55px rgba(0,0,0,.24);
}
.royal-card h3 { color: #f0d49b; }
.royal-card p { color: #dfcbc2; line-height: 1.95; }
.line {
  width: 110px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a51b32, #e9c98a, transparent);
}
.btn, .wa { transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid #f0d49b;
  outline-offset: 4px;
}
footer {
  background: linear-gradient(180deg, #0c060a, #070407);
  border-top-color: rgba(233,201,138,.22);
}
@keyframes realmImageReveal {
  from { opacity: .55; transform: scale(1.055); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes realmImageDrift {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}
@keyframes realmContentEnter {
  from { opacity: 0; transform: translate3d(0,18px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@media (max-width: 850px) {
  .dragon-hero {
    min-height: 780px;
    padding: 100px 7% 190px;
  }
  .dragon-hero .hero-cinematic-art::before {
    background:
      linear-gradient(0deg, #090609 0%, rgba(9,6,9,.94) 12%, rgba(9,6,9,.42) 53%, rgba(9,6,9,.1) 100%),
      linear-gradient(90deg, rgba(9,6,9,.35), transparent);
  }
  .dragon-hero .hero-cinematic-art img { object-position: 58% center; }
  .dragon-hero .hero-content {
    width: min(100%, 600px);
    padding-top: 300px;
  }
}
@media (max-width: 600px) {
  .dragon-hero {
    min-height: 760px;
    padding: 85px 7% 150px;
  }
  .dragon-hero::before { inset: 9px; }
  .dragon-hero .hero-cinematic-art img { object-position: 58% center; }
  .dragon-hero .hero-content { padding-top: 280px; }
  .dragon-hero .hero-content h1 {
    font-size: clamp(48px, 13vw, 68px);
    line-height: .98;
  }
  .dragon-hero .welcome-text { font-size: 10px; letter-spacing: 4px; }
  .dragon-hero .hero-description { font-size: 13px; line-height: 1.75; }
  .dragon-hero .hero-actions { align-items: stretch; }
  .dragon-hero .hero-actions .btn {
    flex: 1 1 auto;
    width: auto;
    padding-inline: 12px;
    font-size: 9px;
  }
  .feature-card { min-height: 0; }
  .section { padding-top: 62px; padding-bottom: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  .dragon-hero .hero-cinematic-art img,
  .dragon-hero .hero-content,
  .dragon-hero .hero-sparks i,
  .feature-card::before {
    animation: none !important;
  }
  .feature-card, .btn, .wa { transition: none !important; }
}


/* =========================================================
   HERO REPAIR — CLEAN ARTWORK / REAL UI LAYERS
   Removes decorative glyphs that can read as duplicate icons.
   Keeps all existing content, links, scripts and animations.
========================================================= */
.dragon-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #090609;
}
.dragon-hero .hero-cinematic-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.dragon-hero .hero-cinematic-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 42%;
  transform-origin: 64% 45%;
}
.dragon-hero .hero-cinematic-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(8, 3, 7, .99) 0%,
      rgba(8, 3, 7, .94) 22%,
      rgba(8, 3, 7, .72) 39%,
      rgba(8, 3, 7, .18) 68%,
      rgba(8, 3, 7, .08) 100%),
    linear-gradient(0deg,
      #090609 0%,
      rgba(9, 6, 9, .78) 10%,
      rgba(9, 6, 9, .12) 42%,
      rgba(9, 6, 9, .12) 100%);
}
.dragon-hero .hero-content {
  position: relative;
  z-index: 3;
}
.dragon-hero .hero-aura,
.dragon-hero .hero-sparks {
  z-index: 2;
  pointer-events: none;
}
.dragon-hero .hero-scroll {
  z-index: 4;
}
.dragon-hero .hero-actions,
.dragon-hero .hero-actions .btn {
  position: relative;
  z-index: 4;
}
.auth-card::before,
.feature-card::before,
.royal-card::before {
  content: none !important;
  animation: none !important;
}
@media (max-width: 850px) {
  .dragon-hero .hero-cinematic-art img {
    object-position: 66% 38%;
  }
  .dragon-hero .hero-cinematic-art::before {
    background:
      linear-gradient(0deg,
        #090609 0%,
        rgba(9, 6, 9, .94) 18%,
        rgba(9, 6, 9, .46) 58%,
        rgba(9, 6, 9, .08) 100%),
      linear-gradient(90deg,
        rgba(9, 6, 9, .42),
        transparent 72%);
  }
  .dragon-hero .hero-content {
    padding-top: 300px;
  }
}
@media (max-width: 600px) {
  .dragon-hero .hero-cinematic-art img {
    object-position: 67% 36%;
  }
  .dragon-hero .hero-content {
    padding-top: 275px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dragon-hero .hero-cinematic-art img {
    animation: none !important;
    transform: none !important;
  }
}


/* =========================================================
   DRAGON KINGDOM — HOMEPAGE REDESIGN 2026
   Clear hierarchy, quieter navigation, focused hero, responsive motion.
========================================================= */
:root {
  --realm-ink: #09070a;
  --realm-panel: #140d11;
  --realm-gold: #e7c58b;
  --realm-muted: #d7c7bd;
}
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { overflow-x: hidden; }
header {
  background: rgba(9, 7, 10, .9);
  border-bottom: 1px solid rgba(231,197,139,.16);
  box-shadow: 0 8px 34px rgba(0,0,0,.28);
}
.nav { min-height: 82px; }
.brand { gap: 12px; color: #fff4e5; font-size: 14px; }
.brand small { color: #bda99b; font-size: 8px; letter-spacing: 1.5px; }
.nav-links { gap: 12px; }
.nav-links a { font-size: 10px; letter-spacing: .8px; color: #e7d9cf; }
.nav-links a:hover { color: var(--realm-gold); }
.dragon-hero {
  min-height: min(820px, calc(100svh - 82px));
  display: flex;
  align-items: center;
  padding: clamp(88px, 12vh, 138px) max(7%, calc((100vw - 1160px)/2)) 150px;
  isolation: isolate;
  background: #09070a;
}
.dragon-hero::before { inset: 14px; border-color: rgba(231,197,139,.15); }
.dragon-hero .hero-cinematic-art { z-index: -2; }
.dragon-hero .hero-cinematic-art img {
  object-position: 64% 43%;
  filter: saturate(.94) contrast(1.08) brightness(.82);
  animation: realmImageReveal 1.5s ease-out both, realmImageDrift 28s ease-in-out 1.5s infinite alternate;
}
.dragon-hero .hero-cinematic-art::before {
  background:
    linear-gradient(90deg, rgba(8,5,8,.97) 0%, rgba(8,5,8,.91) 24%, rgba(8,5,8,.66) 43%, rgba(8,5,8,.10) 76%, rgba(8,5,8,.12) 100%),
    linear-gradient(0deg, #09070a 0%, rgba(9,7,10,.72) 9%, transparent 43%, rgba(9,7,10,.12) 100%);
}
.dragon-hero .hero-vignette {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 72% 42%, transparent 5%, rgba(0,0,0,.12) 62%, rgba(0,0,0,.42) 100%);
}
.dragon-hero .hero-content {
  width: min(56%, 620px); max-width: 620px; padding: 20px 0;
  text-align: left; animation: realmContentEnter .9s .1s both;
}
.dragon-hero .hero-kicker {
  display: flex; align-items: center; gap: 10px; margin: 0 0 24px;
  color: #f0d6aa; font-size: 9px; font-weight: 600; letter-spacing: 3px;
}
.dragon-hero .hero-kicker span {
  width: 26px; height: 1px; background: var(--realm-gold);
  box-shadow: 0 0 10px rgba(231,197,139,.65);
}
.dragon-hero .welcome-text {
  margin: 0 0 8px; color: #d8c5b7; font-size: 10px; letter-spacing: 5px;
}
.dragon-hero .hero-content h1 {
  margin: 0 0 22px; font-family: Cinzel, Georgia, serif;
  font-size: clamp(64px, 8vw, 108px); line-height: .98; letter-spacing: 1px;
  color: #f2d7a5; text-shadow: 0 6px 34px rgba(0,0,0,.8);
}
.dragon-hero .hero-content h1 span {
  color: #fff1d5; background: linear-gradient(180deg,#fff4d9,#d4a45e);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dragon-hero .hero-description {
  max-width: 440px; margin: 0 0 30px; color: #f0e2d8;
  font-size: 14px; line-height: 1.9; text-shadow: 0 2px 12px #000;
}
.dragon-hero .hero-actions { display: flex; align-items: center; justify-content: flex-start; gap: 26px; }
.dragon-hero .hero-actions .btn {
  min-height: 50px; padding: 0 24px; border-radius: 2px;
  font-size: 9px; letter-spacing: 1.5px;
}
.dragon-hero .btn-gold {
  color: #1a0d0a; background: linear-gradient(135deg,#f4dfb7,#c29352);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.55);
}
.dragon-hero .btn-gold:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(196,145,76,.24); }
.dragon-hero .hero-text-link {
  color: #f0d9b3; font-size: 9px; letter-spacing: 1.3px;
  border-bottom: 1px solid rgba(231,197,139,.42); padding: 0 0 8px;
  transition: color .2s, border-color .2s, transform .2s;
}
.dragon-hero .hero-text-link:hover { color: #fff; border-color: #fff; transform: translateX(3px); }
.dragon-hero .hero-trust {
  display: flex; align-items: center; gap: 12px; margin-top: 42px;
  color: #cdb9ab; font-size: 8px; letter-spacing: 1.6px;
}
.dragon-hero .hero-trust i { width: 3px; height: 3px; border-radius: 50%; background: #c99d60; }
.dragon-hero .trust-mark { color: var(--realm-gold); font-size: 13px; }
.dragon-hero .hero-scroll {
  bottom: 28px; color: #d5c1b2; font-size: 8px; letter-spacing: 2px;
}
.dragon-hero .hero-scroll span { color: var(--realm-gold); }
.dragon-hero .hero-index {
  position: absolute; right: max(7%, calc((100vw - 1160px)/2)); bottom: 30px;
  color: rgba(236,218,194,.7); font: 9px Cinzel,serif; letter-spacing: 2px;
}
.dragon-hero .hero-index span { color: #bd8e56; padding: 0 7px; }
.kingdom-section { padding-top: 58px; }
.feature-grid { gap: 18px; }
.feature-card {
  position: relative; min-height: 238px; padding: 28px 26px;
  border: 1px solid rgba(231,197,139,.18); border-radius: 3px;
  background: linear-gradient(145deg,rgba(35,17,24,.96),rgba(13,9,13,.98));
  box-shadow: 0 16px 42px rgba(0,0,0,.22);
  transition: transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.feature-card:hover {
  transform: translateY(-6px); border-color: rgba(231,197,139,.55);
  box-shadow: 0 22px 46px rgba(0,0,0,.36),0 0 24px rgba(164,35,49,.12);
}
.feature-card::after {
  content:""; position:absolute; left:20px; right:20px; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,#a72d3c,#e7c58b,transparent);
  transform:scaleX(.35); transition:transform .3s ease;
}
.feature-card:hover::after { transform:scaleX(1); }
.feature-icon { font-size: 27px; margin-bottom: 24px; }
.feature-card h2 { font-size: 14px; letter-spacing: 1px; line-height: 1.5; }
.feature-card p { font-size: 12px; line-height: 1.8; }
.section { max-width: 1160px; }
.royal-card { padding: clamp(28px,5vw,54px); border-radius: 3px; }
footer { padding: 38px 20px; color: #a9958b; font-size: 9px; letter-spacing: 1.8px; line-height: 2.2; }
@media (max-width: 900px) {
  .dragon-hero { min-height: 780px; padding: 80px 7% 140px; }
  .dragon-hero .hero-content { width: min(72%,620px); }
  .dragon-hero .hero-cinematic-art img { object-position: 66% center; }
  .nav-links { gap: 4px; }
}
@media (max-width: 600px) {
  .nav { min-height: 68px; }
  .dragon-hero { min-height: 760px; align-items: flex-end; padding: 0 8% 118px; }
  .dragon-hero .hero-cinematic-art img { object-position: 67% 35%; }
  .dragon-hero .hero-cinematic-art::before {
    background:
      linear-gradient(0deg,#09070a 0%,rgba(9,7,10,.96) 17%,rgba(9,7,10,.68) 48%,rgba(9,7,10,.12) 100%),
      linear-gradient(90deg,rgba(9,7,10,.25),transparent);
  }
  .dragon-hero .hero-content { width: 100%; padding: 0; }
  .dragon-hero .hero-kicker { margin-bottom: 14px; font-size: 8px; letter-spacing: 2px; }
  .dragon-hero .welcome-text { font-size: 9px; letter-spacing: 3px; }
  .dragon-hero .hero-content h1 { font-size: clamp(48px,14vw,68px); margin-bottom: 14px; }
  .dragon-hero .hero-description { font-size: 12px; line-height: 1.75; margin-bottom: 22px; }
  .dragon-hero .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .dragon-hero .hero-actions .btn { min-height: 46px; }
  .dragon-hero .hero-trust { flex-wrap: wrap; gap: 8px; margin-top: 25px; font-size: 7px; }
  .dragon-hero .hero-scroll { display: none; }
  .dragon-hero .hero-index { right: 8%; bottom: 24px; font-size: 8px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dragon-hero .hero-cinematic-art img,.dragon-hero .hero-content { animation: none !important; }
  .feature-card,.feature-card::after,.btn,.hero-text-link { transition: none !important; }
}



/* =========================================================
   MYSTIC DRAGON REALM V2 — NAVIGATION & MOTION POLISH
   Safe visual layer: preserves page structure and application logic.
========================================================= */
header { z-index: 1000; }
.nav { position: relative; }
.menu-toggle {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(233,201,138,.42);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(65,12,27,.92), rgba(17,7,12,.98));
  box-shadow: 0 8px 24px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.04);
  cursor: pointer;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.menu-toggle span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f0d49b;
  box-shadow: 0 0 9px rgba(233,201,138,.42);
  transition: transform .25s ease, opacity .25s ease;
}
.menu-toggle:hover {
  transform: translateY(-1px);
  border-color: #f0d49b;
  box-shadow: 0 10px 28px rgba(101,10,31,.28), 0 0 18px rgba(233,201,138,.1);
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(2px); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-2px); }
.nav-links {
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, calc(100vw - 28px));
  max-height: min(78svh, 620px);
  padding: 12px;
  border: 1px solid rgba(233,201,138,.28);
  border-radius: 8px;
  background: linear-gradient(155deg, rgba(31,12,20,.99), rgba(9,6,9,.99));
  box-shadow: 0 24px 65px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(18px);
}
.nav-links.menu-open { display: flex; }
.nav-links a {
  display: flex;
  align-items: center;
  min-height: 43px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #eadbd0;
  font-size: 11px;
  letter-spacing: .7px;
  transition: color .2s ease, background .2s ease, border-color .2s ease, padding .2s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible {
  padding-left: 18px;
  color: #f4d79f;
  background: rgba(165,29,50,.16);
  border-color: rgba(233,201,138,.13);
}
.nav-links .nav-user {
  margin-top: 6px;
  padding: 12px 14px;
  border-top: 1px solid rgba(233,201,138,.16);
  color: #e8c98f;
  font-size: 11px;
}
.nav-links #logout { min-height: 42px; margin-top: 4px; }
.feature-card { will-change: transform; }
.feature-card:focus-visible {
  outline: 2px solid #f0d49b;
  outline-offset: 4px;
}
.hero-text-link:focus-visible { outline-offset: 6px; }
@media (max-width: 600px) {
  .menu-toggle { width: 42px; height: 42px; flex-basis: 42px; }
  .nav-links { width: min(330px, calc(100vw - 24px)); }
  .nav-links a { min-height: 46px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-toggle,
  .menu-toggle span,
  .nav-links a { transition: none !important; }
}

/* ==========================================================
   MYSTIC DRAGON REALM V2 — SHARED TOKEN INTEGRATION
   ========================================================== */
:root{--bg:var(--ink);--panel:var(--raise);--panel-light:var(--raise-2);--red:var(--crimson-deep);--red-light:var(--crimson);--orange:var(--crimson);--gold:var(--gilt);--text:#f6eee9;--muted:#b4a5a6;--border:var(--line)}
body{font-family:var(--body);background-color:var(--ink);color:var(--text)}
h1,h2,h3,.brand,.section-title{font-family:var(--display)}
.btn,.hero-actions a,.feature-link{transition:transform .25s var(--ease),border-color .25s,background .25s,box-shadow .25s}
.feature-card,.royal-card,.auth-card{border-color:var(--line)}
.feature-card:hover,.royal-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-gold)}
:focus-visible{outline-color:var(--gilt)}
@media(prefers-reduced-motion:reduce){.ember,.hero-cinematic-art,.dragon-emblem{animation:none!important;transition:none!important}}


/* Voucher input controls — compact, translucent, and touch-friendly */
.joki-order-voucher-row{display:flex;align-items:center;gap:7px;}
.joki-order-voucher-row input{flex:1;min-width:0;}
.joki-voucher-toggle,.joki-voucher-check{flex:0 0 auto;min-height:40px;padding:8px 11px;border:1px solid rgba(220,180,105,.42);border-radius:10px;background:rgba(255,255,255,.055);color:#e8d4a8;font:inherit;font-size:.78rem;font-weight:600;line-height:1;cursor:pointer;transition:background .2s,border-color .2s,transform .2s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.joki-voucher-toggle{padding-inline:9px;color:rgba(255,236,202,.82);}
.joki-voucher-toggle:hover,.joki-voucher-check:hover{background:rgba(220,180,105,.15);border-color:rgba(220,180,105,.75);}
.joki-voucher-toggle:active,.joki-voucher-check:active{transform:scale(.97);}
.joki-voucher-toggle:focus-visible,.joki-voucher-check:focus-visible{outline:2px solid #e8c77e;outline-offset:2px;}
@media(max-width:420px){.joki-order-voucher-row{gap:5px}.joki-voucher-toggle,.joki-voucher-check{padding:8px 9px;font-size:.74rem;min-height:42px}}