:root {
  --ink: #3c2a1b;
  --muted: #806b52;
  --parchment: #fffaf0;
  --parchment-deep: #ead5a7;
  --gold: #d7a83e;
  --gold-bright: #ffe58a;
  --gold-dark: #78501c;
  --blue: #168fc8;
  --blue-deep: #075581;
  --green: #4e9d5c;
  --green-deep: #245e38;
  --night: #071b1d;
  --night-soft: #102d2a;
  --danger: #a63d36;
  --success: #2e7c4a;
  --shadow: 0 22px 55px rgba(4, 20, 18, .2);
  --shell: min(1180px, calc(100% - 48px));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #f6eddb;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.dialog-open { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid rgba(69, 190, 239, .75);
  outline-offset: 3px;
}
a { color: inherit; text-decoration: none; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link {
  position: fixed;
  z-index: 1000;
  left: 18px;
  top: -60px;
  padding: 11px 18px;
  border-radius: 8px;
  color: white;
  background: var(--blue-deep);
  transition: top .2s ease;
}
.skip-link:focus { top: 14px; }

/* Header */
.site-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 82px;
  padding: 10px max(24px, calc((100vw - 1180px) / 2));
  color: #fffaf0;
  border-bottom: 1px solid rgba(255, 230, 148, .18);
  background: linear-gradient(180deg, rgba(4, 22, 22, .8), rgba(5, 26, 24, .48));
  backdrop-filter: blur(12px) saturate(1.2);
  transition: min-height .25s ease, background .25s ease, box-shadow .25s ease;
}
.site-header.scrolled {
  min-height: 68px;
  background: rgba(6, 29, 27, .94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}
.wordmark { display: inline-flex; align-items: center; gap: 11px; min-width: 170px; }
.wordmark-gem {
  position: relative;
  width: 29px;
  height: 39px;
  border: 3px solid #f3c65f;
  border-radius: 52% 48% 52% 48%;
  background: linear-gradient(145deg, #bcf4ff 0 17%, #39baf0 18% 52%, #086caa 53% 100%);
  box-shadow: 0 0 0 3px #6d4317, 0 0 17px rgba(65, 205, 255, .62), inset 0 0 5px white;
  transform: rotate(45deg) scale(.72);
}
.wordmark-gem::before, .wordmark-gem::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 8px;
  border-top: 3px solid #e7bb57;
}
.wordmark-gem::before { right: 25px; transform: rotate(-20deg); }
.wordmark-gem::after { left: 25px; transform: rotate(20deg); }
.wordmark-copy { display: grid; line-height: .9; text-align: center; }
.wordmark-copy strong {
  font: 700 30px/.82 Georgia, "Times New Roman", serif;
  letter-spacing: -.05em;
  text-shadow: 0 2px #573810, 0 0 14px rgba(255, 225, 127, .26);
}
.wordmark-copy small {
  margin-top: 6px;
  color: var(--gold-bright);
  font: 800 8px/1 sans-serif;
  letter-spacing: .42em;
  text-transform: uppercase;
}
.main-nav { display: flex; justify-content: center; gap: clamp(18px, 3vw, 40px); }
.main-nav a {
  position: relative;
  padding: 13px 2px;
  color: rgba(255, 250, 232, .82);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
}
.main-nav a::after {
  content: "";
  position: absolute;
  inset: auto 50% 5px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  transition: inset .2s ease;
}
.main-nav a:hover { color: white; }
.main-nav a:hover::after { inset-inline: 0; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.realm-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 227, 139, .24);
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(3, 18, 18, .38);
  font-size: 11px;
  white-space: nowrap;
}
.realm-pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #70dc75;
  box-shadow: 0 0 9px #70dc75;
  animation: status-pulse 2s ease-in-out infinite;
}
.realm-pill.offline i { background: #d35f55; box-shadow: 0 0 9px #d35f55; animation: none; }
.account-button, .compact-button {
  border: 1px solid #e1b653;
  border-radius: 9px;
  color: #fff9de;
  background: linear-gradient(#4b9ec2, #1b6c99);
  box-shadow: inset 0 1px rgba(255,255,255,.34), 0 3px 8px rgba(0,0,0,.2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}
.account-button { padding: 11px 16px; }
.account-button:hover, .compact-button:hover { filter: brightness(1.12); }
.nav-toggle { display: none; }

/* Hero */
.hero {
  position: relative;
  display: grid;
  min-height: 820px;
  overflow: hidden;
  color: white;
  isolation: isolate;
}
.hero-scene {
  position: absolute;
  z-index: -3;
  inset: -24px;
  background: #387f70 url('/portal-assets/canaan-portal-scene.png') center 48% / cover no-repeat;
  animation: hero-breathe 16s ease-in-out infinite alternate;
}
.hero-shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,20,19,.88) 0%, rgba(5,24,23,.58) 35%, rgba(7,27,24,.1) 61%, rgba(3,17,16,.38) 100%),
    linear-gradient(0deg, #0c2f29 0%, transparent 23%, rgba(0,0,0,.08) 100%);
}
.hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  align-items: center;
  gap: clamp(50px, 8vw, 110px);
  padding-block: 130px 95px;
}
.hero-copy { max-width: 660px; padding-top: 22px; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: #ffe592;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow span { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.eyebrow.dark { color: #9b6a27; }
.hero h1 {
  margin: 0;
  font: 700 clamp(58px, 7vw, 96px)/.88 Georgia, "Times New Roman", serif;
  letter-spacing: -.065em;
  text-shadow: 0 5px 20px rgba(0,0,0,.3);
}
.hero h1 em { color: #ffdf75; font-weight: inherit; }
.hero-lead {
  max-width: 550px;
  margin: 28px 0 0;
  color: rgba(255,255,255,.84);
  font: 400 17px/1.7 Georgia, "Times New Roman", serif;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.fantasy-button {
  position: relative;
  min-width: 196px;
  min-height: 56px;
  padding: 14px 24px;
  border: 2px solid #e8bc55;
  border-radius: 13px;
  color: white;
  cursor: pointer;
  font: 700 16px/1 Georgia, "Times New Roman", serif;
  text-shadow: 0 2px rgba(0,0,0,.35);
  box-shadow: inset 0 1px rgba(255,255,255,.45), 0 5px 0 #684414, 0 10px 24px rgba(0,0,0,.24);
  transition: transform .18s ease, filter .18s ease;
}
.fantasy-button::before, .fantasy-button::after {
  content: "◆";
  position: absolute;
  top: 18px;
  color: var(--gold-bright);
  font-size: 10px;
}
.fantasy-button::before { left: 12px; }
.fantasy-button::after { right: 12px; }
.fantasy-button.primary { background: linear-gradient(#6fbd79, #347d4a 58%, #225d38); }
.fantasy-button.secondary { background: linear-gradient(#4da9d0, #1c76a8 58%, #0b507b); }
.fantasy-button:hover { filter: brightness(1.12); transform: translateY(-2px); }
.fantasy-button:active { transform: translateY(3px); box-shadow: inset 0 1px rgba(255,255,255,.35), 0 2px 0 #684414; }
.realm-stats { display: flex; gap: 34px; margin: 44px 0 0; }
.realm-stats div { display: grid; gap: 5px; }
.realm-stats dt { color: #fff2b4; font: 700 22px/1 Georgia, serif; }
.realm-stats dd { margin: 0; color: rgba(255,255,255,.62); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.ornament-panel {
  position: relative;
  border: 2px solid #bc8534;
  border-radius: 22px;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255,255,255,.8), transparent 28%),
    linear-gradient(#fffdf7, #f5e5c2);
  box-shadow: 0 0 0 6px rgba(255,238,190,.15), 0 28px 70px rgba(0,0,0,.36), inset 0 0 0 4px rgba(159,104,36,.13);
}
.ornament-panel::before, .ornament-panel::after {
  content: "◆";
  position: absolute;
  top: 18px;
  color: #bc8534;
  font-size: 12px;
}
.ornament-panel::before { left: 17px; }
.ornament-panel::after { right: 17px; }
.account-card { padding: 68px 34px 28px; text-align: center; }
.panel-crest, .dialog-crest {
  position: absolute;
  left: 50%;
  top: -35px;
  width: 88px;
  height: 70px;
  border: 3px solid #c18b37;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle, #fff9e4 0 37%, #e9c36c 39% 47%, #715024 49% 52%, #f5e3b3 54%);
  box-shadow: 0 6px 14px rgba(76,46,14,.3);
  transform: translateX(-50%);
}
.panel-crest i, .dialog-crest span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 31px;
  border: 2px solid #f7dc87;
  border-radius: 45%;
  background: linear-gradient(135deg, #8de7ff, #0782c6 62%, #084d84);
  box-shadow: 0 0 12px rgba(35,173,232,.65);
  transform: translate(-50%,-50%) rotate(45deg) scale(.72);
}
.panel-kicker { margin: 0 0 7px; color: #a7742d; font-size: 10px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.account-card h2, .dialog-frame h2 { margin: 0; color: #54381f; font: 700 30px/1.08 Georgia, serif; }
.account-card > p:not(.panel-kicker):not(.trust-copy) { margin: 11px auto 22px; color: var(--muted); font: 14px/1.55 Georgia, serif; }
.guest-actions { display: grid; gap: 11px; }
.panel-action {
  width: 100%;
  min-height: 48px;
  border-radius: 11px;
  cursor: pointer;
  font-weight: 800;
  transition: transform .16s ease, filter .16s ease;
}
.panel-action.main { border: 2px solid #d9a83e; color: white; background: linear-gradient(#6dbb76, #367d4a); box-shadow: 0 4px 0 #744c18, inset 0 1px rgba(255,255,255,.45); text-shadow: 0 1px #31592f; }
.panel-action.quiet { border: 1px solid #c7a66e; color: #684723; background: rgba(255,255,255,.62); }
.panel-action:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.panel-action:disabled { cursor: wait; opacity: .68; }
.trust-copy { margin: 19px 0 0; color: #967651; font-size: 10px; }
.trust-copy span { color: #2f99c6; }
.player-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; text-align: left; }
.account-seal { display: grid; place-items: center; width: 46px; height: 46px; border: 3px double #bf8b38; border-radius: 50%; color: #fff8d8; background: linear-gradient(#49a8ce,#15658e); font: 700 23px Georgia,serif; }
.player-summary small { display: block; color: #967555; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.player-summary strong { display: block; color: #55381f; font: 700 17px Georgia,serif; }
.secure-badge { padding: 5px 7px; border-radius: 5px; color: #327342; background: #dcebd7; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.summary-balance { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 10px; padding: 13px 15px; border: 1px solid #d7be91; border-radius: 9px; background: rgba(255,255,255,.62); }
.summary-balance span { color: #806440; font-size: 12px; }
.summary-balance strong { color: #0f79aa; }
.player-summary .panel-action { grid-column: 1 / -1; margin-top: 5px; }
.text-button { grid-column: 1 / -1; justify-self: center; border: 0; color: #876849; background: none; cursor: pointer; font-size: 11px; text-decoration: underline; }
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 23px; display: grid; justify-items: center; gap: 7px; color: rgba(255,255,255,.7); font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; transform: translateX(-50%); }
.scroll-cue i { width: 18px; height: 27px; border: 1px solid rgba(255,255,255,.55); border-radius: 12px; }
.scroll-cue i::after { content: ""; display: block; width: 3px; height: 6px; margin: 5px auto; border-radius: 2px; background: #ffe08b; animation: scroll-dot 1.7s ease-in-out infinite; }
.hero-sparkles .spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fffbd0; box-shadow: 0 0 9px #8ddfff; animation: sparkle-float 7s ease-in-out infinite; }
.hero-sparkles .spark:nth-child(1) { left: 8%; top: 32%; }
.hero-sparkles .spark:nth-child(2) { left: 16%; top: 74%; animation-delay: -3s; }
.hero-sparkles .spark:nth-child(3) { left: 29%; top: 21%; animation-delay: -1s; }
.hero-sparkles .spark:nth-child(4) { left: 42%; top: 67%; animation-delay: -5s; }
.hero-sparkles .spark:nth-child(5) { left: 55%; top: 24%; animation-delay: -2s; }
.hero-sparkles .spark:nth-child(6) { left: 68%; top: 61%; animation-delay: -4s; }
.hero-sparkles .spark:nth-child(7) { left: 78%; top: 19%; animation-delay: -6s; }
.hero-sparkles .spark:nth-child(8) { left: 91%; top: 48%; animation-delay: -3s; }

/* Sections and news */
.section { position: relative; padding: 94px 0; scroll-margin-top: 68px; }
.news-section { background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.9), transparent 30%), #f7f0e2; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 35px; margin-bottom: 36px; }
.section-heading h2 { margin: 0; color: #50361e; font: 700 clamp(35px,4vw,50px)/1 Georgia,serif; letter-spacing: -.035em; }
.section-heading > p { max-width: 510px; margin: 0; color: rgba(255,255,255,.72); font: 14px/1.65 Georgia,serif; }
.section-heading.light h2 { color: #fff5d3; }
.news-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.news-filters button { padding: 8px 13px; border: 1px solid #ceb98d; border-radius: 999px; color: #80623f; background: rgba(255,255,255,.55); cursor: pointer; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.news-filters button.active { border-color: #298eb8; color: white; background: #298eb8; }
.featured-news { margin-bottom: 24px; }
.feature-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid #c5aa77;
  border-radius: 20px;
  background: #fffaf0;
  box-shadow: var(--shadow);
}
.feature-visual { min-height: 300px; background: #315f55 url('/portal-assets/canaan-portal-scene.png') center 54% / cover no-repeat; }
.feature-visual img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.feature-copy { display: flex; flex-direction: column; justify-content: center; padding: 40px; }
.news-meta { margin: 0 0 11px; color: #a0712d; font-size: 10px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.feature-copy h3 { margin: 0; color: #51371f; font: 700 29px/1.13 Georgia,serif; }
.feature-copy p:not(.news-meta) { color: #7e694f; font: 14px/1.62 Georgia,serif; }
.read-more { align-self: flex-start; border: 0; padding: 0; color: #147aa6; background: none; cursor: pointer; font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.read-more::after { content: "  →"; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 245px;
  padding: 25px;
  border: 1px solid #d3bd94;
  border-radius: 16px;
  background: rgba(255,253,247,.88);
  box-shadow: 0 13px 28px rgba(64,44,20,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.news-card::before { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 1px solid rgba(181,137,68,.15); border-radius: 11px; }
.news-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(64,44,20,.13); }
.news-card .news-icon { display: grid; place-items: center; width: 45px; height: 45px; margin-bottom: 24px; border: 1px solid #d1a850; border-radius: 50%; color: white; background: linear-gradient(#54afd0,#1c709b); box-shadow: 0 3px 0 #78501c; font: 700 20px Georgia,serif; }
.news-card h3 { margin: 0 0 9px; color: #51371f; font: 700 21px/1.16 Georgia,serif; }
.news-card > p:not(.news-meta) { margin: 0 0 20px; color: #806c54; font: 13px/1.55 Georgia,serif; }
.news-card .read-more { margin-top: auto; }
.empty-card { grid-column: 1/-1; padding: 55px; color: #806c54; text-align: center; }
.news-skeleton, .pack-card.loading { min-height: 245px; border-radius: 16px; background: linear-gradient(110deg,#eee1ca 20%,#fff8e9 40%,#eee1ca 60%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }

/* Shop */
.shop-section { overflow: hidden; color: white; background: radial-gradient(circle at 85% 10%, rgba(37,164,204,.22), transparent 27%), linear-gradient(145deg,#061c1d,#123e35 55%,#082729); }
.shop-section::before { content: ""; position: absolute; inset: 0; opacity: .08; background-image: radial-gradient(circle at center, #fff 0 1px, transparent 1.5px); background-size: 31px 31px; }
.shop-section .shell { position: relative; z-index: 1; }
.shop-account-bar { display: flex; align-items: center; gap: 15px; margin-bottom: 28px; padding: 15px 18px; border: 1px solid rgba(255,225,137,.25); border-radius: 14px; background: rgba(0,0,0,.18); }
.shop-account-bar > div { flex: 1; }
.shop-account-bar small { display: block; color: rgba(255,255,255,.56); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.shop-account-bar strong { color: #fff3bc; font: 700 17px Georgia,serif; }
.rune-stone {
  width: 31px;
  height: 41px;
  border: 3px solid #edc75d;
  border-radius: 50%;
  background: linear-gradient(135deg,#b8f5ff,#29b9ee 48%,#075b9f);
  box-shadow: 0 0 14px rgba(60,208,255,.65), inset 0 0 8px white;
  transform: rotate(35deg) scale(.78);
}
.compact-button { padding: 9px 14px; }
.pack-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.pack-card { position: relative; min-height: 310px; padding: 27px 23px 23px; overflow: hidden; border: 1px solid rgba(239,195,91,.48); border-radius: 18px; color: #4b361f; background: linear-gradient(#fffdf6,#ecddb8); box-shadow: 0 18px 35px rgba(0,0,0,.22); text-align: center; }
.pack-card.popular { transform: translateY(-10px); border-color: #ffe384; box-shadow: 0 20px 45px rgba(29,169,213,.22), 0 0 0 4px rgba(255,222,122,.1); }
.pack-ribbon { position: absolute; top: 15px; right: -33px; width: 125px; padding: 5px 0; color: white; background: #2a8eb8; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transform: rotate(35deg); }
.pack-stone { position: relative; display: block; width: 63px; height: 72px; margin: 8px auto 19px; filter: drop-shadow(0 8px 8px rgba(23,82,98,.25)); }
.pack-stone::before { content:""; position:absolute; inset:7px 13px; border:3px solid #e6bc58; border-radius:50%; background:linear-gradient(135deg,#d5fbff,#36c4ef 45%,#07629e); box-shadow:inset 0 0 12px white,0 0 16px rgba(28,181,225,.52); transform:rotate(36deg); }
.pack-card h3 { margin: 0; color: #50351d; font: 700 18px Georgia,serif; }
.pack-points { display: block; margin: 10px 0 3px; color: #147ba7; font: 700 32px/1 Georgia,serif; }
.pack-bonus { min-height: 16px; color: #3d874f; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.pack-price { display: block; margin: 18px 0; color: #68451e; font: 700 19px Georgia,serif; }
.pack-card button { width: 100%; min-height: 43px; border: 2px solid #d5a643; border-radius: 10px; color: white; background: linear-gradient(#61b871,#337948); cursor: pointer; box-shadow: 0 3px 0 #694416; font-size: 12px; font-weight: 900; }
.pack-card button:hover:not(:disabled) { filter: brightness(1.1); }
.pack-card button:disabled { cursor: not-allowed; filter: grayscale(.6); opacity: .62; }
.payment-note { margin: 26px auto 0; color: rgba(255,255,255,.55); font-size: 10px; text-align: center; }

/* Kingdom */
.kingdom-section { background: radial-gradient(circle at 80% 20%, white, transparent 31%), #f7f0df; }
.kingdom-layout { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 75px; }
.kingdom-map { position: relative; min-height: 480px; border: 2px solid #b88a44; border-radius: 44% 56% 47% 53%; background: #d9c69a url('/map-overviews/MAP02-lod.png') center / cover no-repeat; box-shadow: var(--shadow), inset 0 0 0 8px rgba(255,250,229,.4); transform: rotate(-2deg); }
.kingdom-map::before { content:""; position:absolute; inset:-12px; border:1px solid rgba(139,93,35,.27); border-radius:inherit; transform:rotate(4deg); }
.kingdom-map span { position:absolute; right:7%; bottom:9%; width:83px; height:83px; border:3px double #bd8534; border-radius:50%; background:radial-gradient(circle,#fff6d7 0 32%,#2390bb 34% 44%,#f3d37b 46%); box-shadow:0 6px 18px rgba(72,45,17,.28); }
.kingdom-copy h2 { margin: 0; color: #50361e; font: 700 clamp(37px,4vw,54px)/1 Georgia,serif; letter-spacing: -.04em; }
.kingdom-copy > p:not(.eyebrow) { color: #79664f; font: 16px/1.7 Georgia,serif; }
.kingdom-copy ul { display:grid; gap:13px; margin:28px 0 32px; padding:0; list-style:none; }
.kingdom-copy li { display:flex; align-items:center; gap:14px; color:#765f45; font-size:13px; }
.kingdom-copy li i { display:grid; place-items:center; flex:0 0 35px; width:35px; height:35px; border:1px solid #c09548; border-radius:50%; color:#167ca7; background:#fffaf0; font:700 10px Georgia,serif; }
.kingdom-copy li strong { color:#51371f; }

/* Footer */
.site-footer { padding: 42px 0; color: rgba(255,255,255,.62); background: #071d1d; border-top: 1px solid rgba(255,226,139,.18); }
.footer-layout { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:35px; }
.footer-brand { color:white; transform:scale(.82); transform-origin:left center; }
.site-footer p { margin:0; font-size:11px; }
.site-footer nav { display:flex; gap:22px; font-size:10px; font-weight:800; text-transform:uppercase; }
.site-footer nav a:hover { color:#ffe28a; }

/* Dialogs */
.portal-dialog { width: min(440px, calc(100% - 28px)); max-height: calc(100vh - 32px); padding: 0; overflow: visible; border: 0; color: var(--ink); background: transparent; }
.portal-dialog::backdrop { background: rgba(2,14,14,.76); backdrop-filter: blur(8px); }
.dialog-frame { position:relative; max-height:calc(100vh - 32px); overflow:auto; padding:65px 34px 30px; border:2px solid #bb8533; border-radius:22px; background:linear-gradient(#fffdf7,#f1dfb9); box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 0 5px rgba(160,105,36,.12); text-align:center; }
.dialog-close { position:absolute; z-index:3; right:14px; top:12px; width:34px; height:34px; border:1px solid #c59a58; border-radius:50%; color:#815a2c; background:#fff8e7; cursor:pointer; font-size:23px; line-height:30px; }
.dialog-frame > p:not(.panel-kicker):not(.form-message):not(.dialog-trust):not(.news-meta) { margin:10px 0 22px; color:#7d684d; font:13px/1.5 Georgia,serif; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:22px 0 17px; padding:4px; border:1px solid #d4bc91; border-radius:10px; background:rgba(137,88,25,.07); }
.auth-tabs button { min-height:37px; border:0; border-radius:7px; color:#7b603e; background:transparent; cursor:pointer; font-size:10px; font-weight:900; text-transform:uppercase; }
.auth-tabs button[aria-selected="true"] { color:white; background:linear-gradient(#51aed2,#1b74a4); box-shadow:inset 0 1px rgba(255,255,255,.4); }
.dialog-frame form { display:grid; gap:12px; }
.dialog-frame label { display:grid; gap:5px; color:#735735; font-size:9px; font-weight:900; letter-spacing:.09em; text-align:left; text-transform:uppercase; }
.dialog-frame input { width:100%; min-height:44px; border:1px solid #c9a873; border-radius:8px; padding:0 13px; color:#452f1e; background:rgba(255,255,255,.75); box-shadow:inset 0 2px 5px rgba(74,43,15,.08); outline:none; }
.dialog-frame input:focus { border-color:#2c98c6; box-shadow:0 0 0 3px rgba(44,152,198,.15); }
.form-message { min-height:18px; margin:12px 0 0; color:var(--danger); font-size:11px; font-weight:800; }
.form-message.success { color:var(--success); }
.dialog-trust { margin:3px 0 0; color:#967755; font-size:9px; }
.checkout-dialog { width:min(500px,calc(100% - 28px)); }
.dialog-crest.rune span { border-radius:50%; transform:translate(-50%,-50%) rotate(32deg) scale(.72); }
#characterChoices { display:grid; gap:8px; margin:0; padding:0; border:0; }
#characterChoices legend { margin-bottom:8px; color:#755937; font-size:9px; font-weight:900; letter-spacing:.09em; text-align:left; text-transform:uppercase; }
.character-option { display:grid!important; grid-template-columns:auto 1fr auto; align-items:center; gap:10px!important; padding:11px; border:1px solid #d2bb91; border-radius:9px; background:rgba(255,255,255,.55); cursor:pointer; text-transform:none!important; }
.character-option:has(input:checked) { border-color:#278db9; box-shadow:0 0 0 2px rgba(39,141,185,.12); }
.character-option input { width:16px; min-height:16px; accent-color:#268cb8; }
.character-option span { display:grid; gap:2px; }
.character-option strong { color:#55391e; font:700 14px Georgia,serif; }
.character-option small { color:#8a704f; font-size:9px; }
.character-option b { color:#117ca9; font:700 13px Georgia,serif; }
.article-dialog { width:min(670px,calc(100% - 28px)); }
.article-dialog .dialog-frame { padding-top:42px; text-align:left; }
.article-dialog h2 { font-size:34px; }
.article-body { display:grid; gap:13px; margin-top:22px; color:#695741; font:15px/1.72 Georgia,serif; }
.article-body p { margin:0; }
.toast { position:fixed; z-index:100; left:50%; bottom:25px; max-width:min(440px,calc(100% - 30px)); padding:13px 19px; opacity:0; pointer-events:none; border:1px solid #d0a853; border-radius:10px; color:#51361d; background:#fff7dd; box-shadow:0 12px 35px rgba(0,0,0,.24); font-size:12px; font-weight:800; transform:translate(-50%,20px); transition:opacity .25s ease,transform .25s ease; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
.toast.error { color:white; border-color:#e27b70; background:#9e4039; }

@keyframes status-pulse { 50% { opacity:.65; transform:scale(.8); } }
@keyframes hero-breathe { from { transform:scale(1.025) translate3d(-.2%,0,0); } to { transform:scale(1.065) translate3d(.3%,.2%,0); } }
@keyframes sparkle-float { 0%,100% { opacity:.1; transform:translateY(20px) scale(.5); } 45% { opacity:1; transform:translateY(-25px) scale(1.2); } }
@keyframes scroll-dot { 0%,100% { opacity:.2; transform:translateY(0); } 50% { opacity:1; transform:translateY(9px); } }
@keyframes shimmer { to { background-position:-200% 0; } }

@media (max-width: 1020px) {
  .main-nav { gap:16px; }
  .realm-pill { display:none; }
  .hero-content { grid-template-columns:1fr 350px; gap:35px; }
  .hero h1 { font-size:68px; }
  .pack-grid { grid-template-columns:repeat(2,1fr); }
  .kingdom-layout { gap:42px; }
  .kingdom-map { min-height:390px; }
}

@media (max-width: 780px) {
  :root { --shell:min(calc(100% - 30px), 620px); }
  .site-header { grid-template-columns:auto auto 1fr; min-height:68px; padding-inline:16px; }
  .wordmark { min-width:0; }
  .wordmark-copy strong { font-size:25px; }
  .nav-toggle { display:grid; justify-self:end; width:42px; height:38px; margin-left:auto; padding:8px; border:1px solid rgba(255,226,139,.3); border-radius:8px; background:rgba(0,0,0,.18); cursor:pointer; }
  .nav-toggle span { width:100%; height:2px; background:#fff4d2; }
  .nav-toggle b { position:absolute; clip:rect(0,0,0,0); }
  .main-nav { position:absolute; top:100%; left:15px; right:15px; display:none; padding:13px; border:1px solid rgba(255,226,139,.25); border-radius:12px; background:rgba(6,29,27,.98); box-shadow:0 16px 35px rgba(0,0,0,.3); }
  .main-nav.open { display:grid; }
  .main-nav a { padding:11px 14px; }
  .header-actions { justify-self:end; margin-left:9px; }
  .account-button { padding:10px 12px; font-size:10px; }
  .hero { min-height:auto; }
  .hero-scene { background-position:54% center; }
  .hero-shade { background:linear-gradient(180deg,rgba(3,20,19,.48),rgba(3,20,19,.87) 56%,#0b302a); }
  .hero-content { grid-template-columns:1fr; gap:75px; padding-block:125px 100px; }
  .hero-copy { max-width:560px; text-align:center; }
  .hero-copy .eyebrow, .hero-actions { justify-content:center; }
  .hero h1 { font-size:clamp(50px,14vw,76px); }
  .hero-lead { margin-inline:auto; }
  .realm-stats { justify-content:center; }
  .account-card { width:min(390px,100%); margin-inline:auto; }
  .scroll-cue { display:none; }
  .section { padding:70px 0; }
  .section-heading { display:grid; align-items:start; }
  .news-filters { justify-content:flex-start; }
  .feature-card { grid-template-columns:1fr; }
  .feature-visual { min-height:235px; }
  .news-grid { grid-template-columns:1fr 1fr; }
  .kingdom-layout { grid-template-columns:1fr; }
  .kingdom-map { min-height:390px; }
  .footer-layout { grid-template-columns:1fr; justify-items:center; text-align:center; }
}

@media (max-width: 520px) {
  .site-header { grid-template-columns:auto 1fr auto; }
  .wordmark-copy small { display:none; }
  .account-button { max-width:82px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hero-content { padding-top:110px; }
  .hero h1 { font-size:clamp(40px,12vw,48px); }
  .hero-lead { font-size:15px; }
  .hero-actions { display:grid; }
  .fantasy-button { width:100%; }
  .realm-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:8px; }
  .realm-stats div { min-width:0; }
  .realm-stats dt { font-size:18px; }
  .realm-stats dd { font-size:8px; }
  .account-card { padding-inline:22px; }
  .feature-copy { padding:28px; }
  .news-grid, .pack-grid { grid-template-columns:1fr; }
  .pack-card.popular { transform:none; }
  .shop-account-bar { align-items:flex-start; flex-wrap:wrap; }
  .shop-account-bar .compact-button { width:100%; }
  .kingdom-map { min-height:310px; }
  .dialog-frame { padding-inline:21px; }
}

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