/* KiraZone reference-art homepage polish. */
:root {
  --kz-scene: url("../assets/kingdoms/scenes/scene-neon.jpg");
  --kz-crystals: url("../assets/kingdoms/scenes/crystals.jpg");
  --kz-characters: url("../assets/kingdoms/scenes/characters.jpg");
}

html[data-theme="ignis"] { --kz-scene: url("../assets/kingdoms/scenes/scene-ignis.jpg"); }
html[data-theme="aquor"] { --kz-scene: url("../assets/kingdoms/scenes/scene-aquor.jpg"); }
html[data-theme="terra"] { --kz-scene: url("../assets/kingdoms/scenes/scene-terra.jpg"); }
html[data-theme="zephyr"] { --kz-scene: url("../assets/kingdoms/scenes/scene-zephyr.jpg"); }
html[data-theme="light"] { --kz-scene: url("../assets/kingdoms/scenes/scene-lumen.jpg"); }
html[data-theme="nox"] { --kz-scene: url("../assets/kingdoms/scenes/scene-nox.jpg"); }
html[data-theme="solaris"] { --kz-scene: url("../assets/kingdoms/scenes/scene-solaris.jpg"); }
html[data-theme="moon"] { --kz-scene: url("../assets/kingdoms/scenes/scene-moon.jpg"); }
html[data-theme="kyuchome"] { --kz-scene: url("../assets/kingdoms/scenes/scene-kyuchome.jpg"); }
html[data-theme="makoto"] { --kz-scene: url("../assets/kingdoms/scenes/scene-makoto.jpg"); }

html[data-theme="ignis"] { --kz-accent: #ff5a2e; --kz-accent-2: #ffc93b; --kz-panel-glow: rgba(255,90,46,.24); }
html[data-theme="aquor"] { --kz-accent: #3d8bff; --kz-accent-2: #bfe3ff; --kz-panel-glow: rgba(61,139,255,.24); }
html[data-theme="terra"] { --kz-accent: #9bcc3f; --kz-accent-2: #57e89b; --kz-panel-glow: rgba(155,204,63,.22); }
html[data-theme="zephyr"] { --kz-accent: #b8f0ce; --kz-accent-2: #ffffff; --kz-panel-glow: rgba(184,240,206,.20); }
html[data-theme="light"] { --kz-accent: #ffc93b; --kz-accent-2: #fff6da; --kz-panel-glow: rgba(255,201,59,.20); }
html[data-theme="nox"] { --kz-accent: #a855f7; --kz-accent-2: #ff5cf0; --kz-panel-glow: rgba(168,85,247,.25); }
html[data-theme="solaris"] { --kz-accent: #ffffff; --kz-accent-2: #5cffd1; --kz-panel-glow: rgba(255,255,255,.22); }
html[data-theme="moon"] { --kz-accent: #e4e5e8; --kz-accent-2: #9ca0ac; --kz-panel-glow: rgba(228,229,232,.18); }
html[data-theme="kyuchome"] { --kz-accent: #e8c17e; --kz-accent-2: #9b6a37; --kz-panel-glow: rgba(201,138,75,.26); }
html[data-theme="makoto"] { --kz-accent: #bde985; --kz-accent-2: #e8a54a; --kz-panel-glow: rgba(140,191,98,.25); }

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 0%, var(--kz-panel-glow, rgba(157, 92, 255, .18)), transparent 34rem),
    radial-gradient(circle at 90% 8%, rgba(92, 255, 209, .10), transparent 28rem),
    linear-gradient(180deg, #04030a 0%, #090414 44%, #04030a 100%);
}

.nk-wrap {
  max-width: 1680px;
  padding: 0 28px;
}

.nk-top {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 -28px;
  padding: 10px 28px;
  gap: 16px;
  background: rgba(4, 3, 10, .86);
  border-color: rgba(255, 92, 240, .24);
  box-shadow: 0 1px 0 rgba(92, 255, 209, .13), 0 0 30px rgba(157, 92, 255, .12);
  backdrop-filter: blur(14px);
}

.nk-brand {
  flex: 0 0 auto;
}

.nk-nav {
  gap: clamp(10px, 1.2vw, 18px);
  flex-wrap: nowrap;
  min-width: 0;
}

.nk-nav a {
  min-width: 68px;
  text-align: center;
  font-size: clamp(10px, .78vw, 12px);
  letter-spacing: .10em;
}

.nk-cur {
  flex: 0 0 auto;
}

.nk-brand-ic {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 0 12px rgba(92, 255, 209, .44));
}

.nk-brand-ic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nk-brand-tx b {
  font-size: clamp(22px, 2vw, 28px);
  color: #f7fbff;
  text-shadow: 0 0 10px rgba(255,255,255,.42), 0 0 22px rgba(92, 255, 209, .24);
}

.nk-brand-tx span {
  color: #d8c8ff;
}

.nk-nav a::before {
  content: "✦";
  display: block;
  width: 26px;
  height: 20px;
  margin: 0 auto 4px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: .85;
  text-align: center;
  font-size: 18px;
  line-height: 20px;
}

.nk-nav a:nth-child(1)::before { content: "♕"; }
.nk-nav a:nth-child(2)::before { content: "▤"; }
.nk-nav a:nth-child(3)::before { content: "♪"; }
.nk-nav a:nth-child(4)::before { content: "◇"; }
.nk-nav a:nth-child(5)::before { content: "▧"; }
.nk-nav a:nth-child(6)::before { content: "✧"; }

.nk-pill {
  min-width: 150px;
  background: linear-gradient(180deg, rgba(20, 9, 38, .96), rgba(7, 5, 20, .92));
  border-color: rgba(255, 92, 240, .24);
}

.nk-hero {
  min-height: clamp(430px, 38vw, 560px);
  margin-top: 0;
  border-radius: 0;
  border-color: rgba(255, 92, 240, .25);
  padding: clamp(34px, 4vw, 72px) clamp(28px, 6vw, 82px);
  background: #06020f;
  box-shadow: inset 0 -90px 80px rgba(3, 2, 9, .70), 0 0 34px rgba(92, 139, 255, .16);
}

.nk-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  z-index: -2;
  background: radial-gradient(ellipse at 50% 100%, var(--kz-panel-glow, rgba(157,92,255,.25)), transparent 70%);
  pointer-events: none;
}

.nk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  background-image:
    linear-gradient(90deg, rgba(2, 1, 7, .84) 0%, rgba(2, 1, 7, .48) 35%, rgba(2, 1, 7, .10) 66%, rgba(2, 1, 7, .42) 100%),
    linear-gradient(180deg, rgba(2, 1, 7, .10) 0%, rgba(2, 1, 7, .28) 58%, rgba(2, 1, 7, .86) 100%),
    var(--kz-scene);
  background-position: center;
  background-size: cover;
  filter: saturate(1.18) contrast(1.08);
}

.nk-sky,
.nk-spires,
.nk-orb {
  display: none !important;
}

.nk-stars {
  z-index: -1;
  opacity: .55;
}

.nk-hero-eyebrow {
  color: #fff1ff;
  text-shadow: 0 0 12px #ff5cf0;
}

.nk-hero-title {
  font-size: clamp(54px, 6.8vw, 104px);
  color: #f9d7ff;
  background: linear-gradient(180deg, #fff5ff 0%, var(--kz-accent, #ff72f5) 42%, var(--kz-accent-2, #87fff0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .18);
  filter: drop-shadow(0 0 8px rgba(255, 92, 240, .95)) drop-shadow(0 0 24px rgba(92, 139, 255, .82));
}

.nk-hero-sub {
  color: #f2ddff;
  text-shadow: 0 0 12px rgba(157, 92, 255, .7);
}

.nk-enter {
  position: relative;
  border-radius: 0;
  border-color: var(--kz-accent, #d782ff);
  color: #fff0ff;
  background: linear-gradient(90deg, rgba(72, 25, 118, .86), rgba(19, 7, 44, .78), rgba(72, 25, 118, .86));
  box-shadow: 0 0 18px var(--kz-panel-glow, rgba(255, 92, 240, .7)), inset 0 0 20px rgba(157, 92, 255, .38);
}

.nk-mascots,
.nk-hero-banner {
  display: none !important;
}

.nk-mascots span,
.nk-venue .msc,
.nk-kt .msc {
  background: transparent !important;
}

.nk-mascots img {
  width: clamp(42px, 3.8vw, 58px) !important;
  height: clamp(46px, 4.2vw, 64px) !important;
  object-fit: cover !important;
  object-position: center 42% !important;
  clip-path: polygon(26% 4%, 74% 4%, 90% 34%, 76% 100%, 24% 100%, 10% 34%);
  image-rendering: pixelated;
  mix-blend-mode: screen;
  filter: saturate(1.35) contrast(1.14) drop-shadow(0 4px 7px #000) drop-shadow(0 0 8px rgba(255,92,240,.5));
}

.nk-venue .msc img,
.nk-kt .msc img {
  clip-path: polygon(26% 4%, 74% 4%, 90% 34%, 76% 100%, 24% 100%, 10% 34%);
  mix-blend-mode: screen;
  filter: saturate(1.28) contrast(1.12) drop-shadow(0 2px 5px #000);
}

.nk-news.on {
  display: grid;
}

.nk-news {
  margin-top: 0;
  border-radius: 12px;
  border-color: rgba(92, 139, 255, .28);
  background: linear-gradient(180deg, rgba(7, 10, 24, .94), rgba(5, 6, 16, .90));
}

.nk-main {
  grid-template-columns: repeat(5, minmax(150px, 1fr)) 380px;
  gap: 14px;
}

.nk-venue {
  min-height: 184px;
  justify-content: flex-start;
  padding-top: 20px;
  background-image:
    radial-gradient(ellipse 110% 70% at 50% 0%, var(--vglow, rgba(92,139,255,.14)), transparent 68%),
    linear-gradient(180deg, rgba(7, 10, 24, .96), rgba(4, 5, 14, .92)),
    var(--venue-scene, none);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 -42px 48px rgba(0, 0, 0, .82);
}

.nk-venue-library,
.nk-venue-music,
.nk-venue-arcade,
.nk-venue-gallery,
.nk-venue-guild { --venue-scene: none; }

.nk-venue .ic {
  display: none;
}

.nk-venue .nm {
  margin-top: auto;
  margin-bottom: 24px;
  text-align: center;
  font-size: 18px;
  text-shadow: 0 0 12px var(--vc), 0 2px 8px #000;
}

.nk-venue .msc {
  opacity: .9;
}

.nk-feat {
  position: relative;
  min-height: 156px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 90% at 100% 0%, rgba(92,139,255,.14), transparent 70%),
    linear-gradient(135deg, rgba(8, 10, 24, .96), rgba(5, 5, 14, .92)),
    var(--feat-scene, none);
  background-position: center;
  background-size: cover;
}

#nk-feat-story,
#nk-feat-artist,
#nk-feat-game,
#nk-feat-wall { --feat-scene: none; }

.nk-feat .ft {
  font-size: 24px;
  text-shadow: 0 0 12px rgba(255, 92, 240, .58);
}

.nk-travel,
.nk-box,
.nk-feat {
  border-color: rgba(255, 92, 240, .25);
  background-color: rgba(5, 4, 16, .86);
  box-shadow: inset 0 0 0 1px rgba(92, 255, 209, .05), 0 0 22px rgba(157, 92, 255, .08);
}

.nk-travel-grid {
  grid-template-columns: repeat(4, 1fr);
}

.kz-crystal-img {
  display: block;
  width: var(--kz-crystal-size, 28px);
  height: var(--kz-crystal-size, 28px);
  object-fit: cover;
  border-radius: 7px;
  box-shadow: 0 0 14px var(--kz-panel-glow, rgba(157,92,255,.35));
  filter: saturate(1.18) contrast(1.05);
}

.kz-crystal-wrap {
  --kz-crystal-size: 28px;
}

.nk-pill .kz-crystal-img {
  --kz-crystal-size: 34px;
  border-radius: 8px;
}

.nk-pill .kz-crystal-wrap {
  --kz-crystal-size: 34px;
  width: 34px;
  height: 34px;
}

.nk-bal .kz-crystal-img {
  --kz-crystal-size: 28px;
}

.nk-bal .kz-crystal-wrap {
  --kz-crystal-size: 28px;
  width: 28px;
  height: 28px;
}

.nk-kt {
  min-height: 110px;
  border: 1px solid transparent;
}

.nk-kt.on {
  border-color: var(--kz-accent, #ff5cf0);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 18px var(--kz-panel-glow, rgba(157,92,255,.20));
}

.nk-kt > span:first-child {
  display: block;
  width: 68px;
  height: 48px;
  overflow: hidden;
  border-radius: 8px;
}

.nk-kt .kz-crystal-img {
  width: 68px;
  height: 48px;
  border-radius: 8px;
}

.nk-kt .kz-crystal-wrap {
  --kz-crystal-size: 68px;
  width: 68px;
  height: 48px;
}

.nk-kt .nm {
  color: #f1ccff;
}

.nk-about {
  background-image:
    linear-gradient(90deg, rgba(5, 4, 16, .94), rgba(5, 4, 16, .64)),
    url("../assets/kingdoms/scenes/crystals.jpg");
  background-position: center;
  background-size: cover;
}

.nk-foot {
  border-color: rgba(255, 92, 240, .20);
}

/* Real homepage realm changes: composition, not only colors. */
html[data-theme="ignis"] .nk-main { gap: 10px; }
html[data-theme="ignis"] .nk-venue,
html[data-theme="ignis"] .nk-feat,
html[data-theme="ignis"] .nk-box {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 18px) 100%, 0 100%);
}
html[data-theme="ignis"] .nk-hero-title { letter-spacing: .015em; }
html[data-theme="ignis"] .nk-enter::before,
html[data-theme="ignis"] .nk-enter::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffc93b);
}
html[data-theme="ignis"] .nk-enter::before { right: 100%; }
html[data-theme="ignis"] .nk-enter::after { left: 100%; transform: rotate(180deg); }

html[data-theme="aquor"] .nk-main,
html[data-theme="aquor"] .nk-news {
  gap: 18px;
}
html[data-theme="aquor"] .nk-venue,
html[data-theme="aquor"] .nk-feat,
html[data-theme="aquor"] .nk-box,
html[data-theme="aquor"] .nk-travel {
  border-radius: 24px 10px 24px 10px !important;
  backdrop-filter: blur(18px) saturate(1.25);
}
html[data-theme="aquor"] .nk-hero::after {
  height: 58%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(61,139,255,.24), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(191,227,255,.08) 14px 15px);
}

html[data-theme="terra"] .nk-main {
  gap: 18px;
}
html[data-theme="terra"] .nk-venue,
html[data-theme="terra"] .nk-feat,
html[data-theme="terra"] .nk-box,
html[data-theme="terra"] .nk-travel {
  border-width: 2px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 0 rgba(30,47,12,.34) !important;
}
html[data-theme="terra"] .nk-hero {
  border-bottom-width: 5px;
}

html[data-theme="zephyr"] .nk-top,
html[data-theme="zephyr"] .nk-news,
html[data-theme="zephyr"] .nk-venue,
html[data-theme="zephyr"] .nk-feat,
html[data-theme="zephyr"] .nk-box {
  border-style: dashed !important;
}
html[data-theme="zephyr"] .nk-mascots span {
  animation: kzZephyrFloat 2.6s ease-in-out infinite;
}
@keyframes kzZephyrFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

html[data-theme="light"] .nk-wrap,
html[data-theme="solaris"] .nk-wrap {
  color: #161721;
}
html[data-theme="light"] .nk-top,
html[data-theme="solaris"] .nk-top {
  background: rgba(255,255,255,.78) !important;
}
html[data-theme="light"] .nk-hero::before,
html[data-theme="solaris"] .nk-hero::before {
  filter: saturate(1.05) contrast(1.02) brightness(1.08);
}
html[data-theme="light"] .nk-hero-sub,
html[data-theme="light"] .nk-hero-eyebrow,
html[data-theme="solaris"] .nk-hero-sub,
html[data-theme="solaris"] .nk-hero-eyebrow {
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.42);
}

html[data-theme="nox"] .nk-hero,
html[data-theme="nox"] .nk-feat,
html[data-theme="nox"] .nk-venue {
  filter: saturate(1.05) contrast(1.08);
}
html[data-theme="nox"] .nk-stars {
  opacity: .85;
}
html[data-theme="nox"] .nk-enter {
  border-style: double;
}

html[data-theme="moon"] .nk-wrap {
  letter-spacing: .01em;
}
html[data-theme="moon"] .nk-hero-title {
  letter-spacing: .06em;
  -webkit-text-stroke: 0;
}
html[data-theme="moon"] .nk-venue,
html[data-theme="moon"] .nk-feat,
html[data-theme="moon"] .nk-box,
html[data-theme="moon"] .nk-travel {
  filter: grayscale(.18) contrast(1.12);
}

@media (max-width: 1100px) {
  .nk-brand-tx b { font-size: 22px; }
  .nk-pill { min-width: 132px; }
  .nk-main { grid-template-columns: repeat(5, 1fr); }
  .nk-travel { grid-column: 1 / -1; grid-row: auto; }
  .nk-feat { grid-row: auto; }
}

@media (max-width: 899px) {
  .nk-wrap {
    padding: 0 14px;
  }

  .nk-top {
    margin: 0 -14px;
    padding: 8px 10px;
    gap: 8px;
  }

  .nk-top::before {
    content: "";
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 6px;
    background:
      linear-gradient(#fff, #fff) 9px 10px / 16px 2px no-repeat,
      linear-gradient(#fff, #fff) 9px 16px / 16px 2px no-repeat,
      linear-gradient(#fff, #fff) 9px 22px / 16px 2px no-repeat,
      rgba(255, 255, 255, .03);
    box-shadow: 0 0 12px rgba(255, 92, 240, .35);
  }

  .nk-brand {
    gap: 6px;
    min-width: 0;
  }

  .nk-brand-ic {
    width: 34px;
    height: 34px;
  }

  .nk-brand-tx b {
    font-size: clamp(19px, 5vw, 28px);
  }

  .nk-brand-tx span {
    font-size: 7px;
    letter-spacing: .18em;
  }

  .nk-cur {
    gap: 6px;
  }

  .nk-pill {
    min-width: 96px;
    padding: 5px 6px;
  }

  .nk-pill .lbl {
    font-size: 7px;
  }

  .nk-pill .num {
    font-size: 13px;
  }

  .nk-pill a.plus {
    width: 26px;
    height: 26px;
  }

  .nk-ava {
    display: none;
  }

  .nk-hero {
    min-height: 316px;
    padding: 42px 18px 58px;
    align-items: flex-start;
    text-align: left;
  }

  .nk-hero::before {
    background-image:
      linear-gradient(90deg, rgba(2, 1, 7, .80) 0%, rgba(2, 1, 7, .25) 56%, rgba(2, 1, 7, .32) 100%),
      linear-gradient(180deg, rgba(2, 1, 7, .08) 0%, rgba(2, 1, 7, .80) 100%),
      var(--kz-scene);
    background-position: center top;
  }

  .nk-hero-title {
    font-size: clamp(45px, 12vw, 72px);
  }

  .nk-hero-sub {
    max-width: 260px;
    font-size: 11px;
    letter-spacing: .14em;
  }

  .nk-enter {
    padding: 11px 24px;
    font-size: 12px;
    letter-spacing: .12em;
  }

  .nk-mascots {
    justify-content: flex-start;
    left: 18px;
    right: 18px;
    gap: 8px;
    overflow: hidden;
  }

  .nk-mascots img {
    width: 40px !important;
    height: 40px !important;
  }

  .nk-news {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .nk-news-item .t2 {
    white-space: normal;
    font-size: 11px;
  }

  .nk-main {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }

  .nk-venue {
    min-height: 170px;
    padding: 14px 5px 8px;
    order: 1;
  }

  .nk-venue .ic {
    font-size: 9px;
    min-width: 34px;
    min-height: 28px;
    padding: 0 5px;
  }

  .nk-venue .nm {
    font-size: clamp(12px, 3.3vw, 18px);
    letter-spacing: .06em;
    line-height: 1.05;
    margin-bottom: 18px;
    overflow-wrap: anywhere;
  }

  .nk-feat {
    grid-column: 1 / -1;
    min-height: 128px;
    order: 2;
  }

  .nk-feat .ft {
    font-size: 22px;
  }

  .nk-travel {
    grid-column: 1 / -1;
    order: 3;
  }

  .nk-travel-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .nk-bottom {
    grid-template-columns: 1fr;
  }

  .nk-comp-row {
    align-items: center;
  }
}

@media (max-width: 560px) {
  /* Was display:none on the second pill (Solaris Crystal) -- silently
     dropping a whole currency from the header on every phone-width screen
     because the header didn't have room for both, rather than making
     room. Real fix is in index.html's own style block: the header wraps
     to two rows on narrow screens now, so both crystals stay visible. */

  .nk-news {
    grid-template-columns: 1fr;
  }

  .nk-main {
    grid-template-columns: repeat(5, minmax(62px, 1fr));
  }

  .nk-venue {
    min-height: 164px;
  }

  .nk-venue .nm {
    font-size: 9.5px;
    letter-spacing: 0;
    line-height: 1.08;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* Neon reference lock: final homepage layer after the older polish rules. */
.nk-nav a::before,
.nk-venue .ic {
  display: none !important;
}

.nk-nav a {
  padding-top: 10px;
}

.nk-venue {
  justify-content: flex-end;
  padding: 18px 14px 24px;
}

.nk-enter::before,
.nk-enter::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 28px;
  height: 28px;
  border: 1px solid var(--kz-accent, #ff5cf0);
  transform: translateY(-50%) rotate(45deg);
  background: rgba(8,3,24,.72);
  box-shadow: 0 0 14px var(--kz-panel-glow, rgba(255,92,240,.45));
}

.nk-enter::before { right: calc(100% - 12px); }
.nk-enter::after { left: calc(100% - 12px); }

.nk-hero-banner {
  position: absolute;
  right: clamp(22px, 4vw, 74px);
  top: 118px;
  width: clamp(52px, 4.6vw, 78px);
  height: clamp(168px, 16vw, 250px);
  z-index: 2;
  display: grid;
  place-items: center;
  color: #f4b6ff;
  font-family: "Cinzel", serif;
  font-size: clamp(32px, 3vw, 52px);
  border: 1px solid rgba(255,201,59,.55);
  background: linear-gradient(180deg, rgba(42,14,72,.78), rgba(15,5,34,.86));
  box-shadow: inset 0 0 26px rgba(255,92,240,.22), 0 0 24px rgba(255,92,240,.22);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
}

.nk-hero-banner {
  display: none !important;
}

.nk-hero-banner::before {
  content: "";
  position: absolute;
  inset: 16px 13px auto;
  height: 46px;
  border: 1px solid rgba(255,201,59,.65);
  border-radius: 50%;
  box-shadow: inset 0 0 0 9px rgba(255,201,59,.07), 0 0 15px rgba(255,201,59,.24);
}

.nk-news {
  position: relative;
  padding: 18px;
  padding-top: 38px;
  box-shadow: inset 0 0 22px rgba(92,139,255,.07), 0 0 18px rgba(92,139,255,.08);
}

.nk-news::before {
  content: "KINGDOM NEWS";
  position: absolute;
  left: 18px;
  top: -1px;
  padding: 7px 18px;
  border: 1px solid rgba(92,139,255,.34);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  font: 700 11px/1 "Cinzel", serif;
  letter-spacing: .12em;
  color: #e7f0ff;
  background: rgba(6,10,24,.94);
  text-shadow: 0 0 10px rgba(92,139,255,.45);
}

.nk-news::after {
  content: "VIEW ALL NEWS";
  position: absolute;
  right: 18px;
  top: 10px;
  font: 700 10px/1 "Space Grotesk", sans-serif;
  letter-spacing: .08em;
  color: #9fd8ff;
}

.nk-venue,
.nk-feat,
.nk-travel,
.nk-box {
  position: relative;
}

.nk-venue::before,
.nk-feat::before,
.nk-travel::before,
.nk-box::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border: 1px solid rgba(92,139,255,.22);
  clip-path: polygon(0 18px, 18px 18px, 18px 0, calc(100% - 18px) 0, calc(100% - 18px) 18px, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 18px calc(100% - 18px), 0 calc(100% - 18px));
  opacity: .78;
}

html[data-theme="solaris"] {
  --kz-accent: #f8fbff;
  --kz-accent-2: #8af7ff;
  --kz-panel-glow: rgba(118, 232, 255, .20);
}

html[data-theme="solaris"] body {
  color: #f8fbff !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.28), transparent 30rem),
    linear-gradient(180deg, #f4fbff, #dffbf5 48%, #f4fbff) !important;
}

html[data-theme="solaris"] .nk-wrap {
  color: #f8fbff !important;
}

html[data-theme="solaris"] .nk-top {
  background: rgba(8, 11, 28, .88) !important;
  color: #f8fbff !important;
}

html[data-theme="solaris"] .nk-news,
html[data-theme="solaris"] .nk-travel,
html[data-theme="solaris"] .nk-box,
html[data-theme="solaris"] .nk-feat {
  background-color: rgba(8, 11, 28, .84) !important;
  color: #f8fbff !important;
  border-color: rgba(175, 244, 255, .46) !important;
}

html[data-theme="solaris"] .nk-news-item .t1,
html[data-theme="solaris"] .nk-feat .fl,
html[data-theme="solaris"] .nk-feat .fs,
html[data-theme="solaris"] .nk-box p,
html[data-theme="solaris"] .nk-bal .nm,
html[data-theme="solaris"] .nk-ql a {
  color: #d9f7ff !important;
}

html[data-theme="solaris"] .nk-news::before {
  background: rgba(8, 11, 28, .94) !important;
  color: #f8fbff !important;
  border-color: rgba(175, 244, 255, .46) !important;
}

html[data-theme="solaris"] .nk-news::after {
  color: #1a2140 !important;
  text-shadow: 0 1px 10px rgba(255,255,255,.85) !important;
}

html[data-theme="solaris"] .nk-hero::before {
  filter: saturate(1.02) contrast(.96) brightness(1.03) !important;
}

html[data-theme="solaris"] .nk-hero-title {
  filter: drop-shadow(0 2px 12px rgba(15,20,44,.45)) drop-shadow(0 0 16px rgba(118,232,255,.35)) !important;
}

/* Lumen's hero title gradient (near-white -> gold -> cream, see .nk-hero-title
   base rule) is entirely light-toned, same as Solaris's problem above, but
   Lumen never got the equivalent fix: the scene-lumen.jpg backdrop is itself
   bright gold, so light text on light photo reads as nearly flat with no
   separation. Same technique as Solaris -- a dark halo via drop-shadow --
   tuned warm/brown instead of navy to match Lumen's gold identity instead of
   introducing an unrelated cool tone. */
html[data-theme="light"] .nk-hero-title {
  filter: drop-shadow(0 2px 14px rgba(40,24,4,.55)) drop-shadow(0 0 18px rgba(255,201,59,.45)) !important;
}

/* Zephyr isn't one of the theme system's two "light" themes (--void is a
   normal dark #0A0F0D, same class as Neon/Ignis/Aquor/Terra) -- but its
   own hero reference art (scene-zephyr.jpg, an airy sky/cloud scene) is
   unusually bright for a "dark theme" background, same problem Lumen and
   Solaris have for a different reason. The hero title/subtitle text is
   the default light-gradient-with-blue-glow treatment made for a dark
   photo backdrop; against Zephyr's pale one it read as nearly flat.
   Same dark-halo technique as the Lumen/Solaris fixes above, tuned to
   Zephyr's own dark green-black void color instead of introducing an
   unrelated tone. */
html[data-theme="zephyr"] .nk-hero-title {
  filter: drop-shadow(0 2px 14px rgba(4,20,12,.6)) drop-shadow(0 0 18px rgba(184,240,206,.5)) !important;
}
html[data-theme="zephyr"] .nk-hero-sub,
html[data-theme="zephyr"] .nk-hero-eyebrow {
  text-shadow: 0 2px 16px rgba(2,10,7,.6), 0 0 10px rgba(2,10,7,.45) !important;
}

/* Makoto now has dedicated mountain-village art. Keep its hero readable
   with a softer forest-gold halo instead of inheriting Zephyr's sky fix. */
html[data-theme="makoto"] .nk-hero-title {
  filter: drop-shadow(0 2px 14px rgba(8,20,6,.62)) drop-shadow(0 0 18px rgba(232,165,74,.35)) !important;
}
html[data-theme="makoto"] .nk-hero-sub,
html[data-theme="makoto"] .nk-hero-eyebrow {
  text-shadow: 0 2px 16px rgba(2,10,7,.6), 0 0 10px rgba(2,10,7,.45) !important;
}

@media (min-width: 1101px) {
  .nk-main {
    grid-template-columns: repeat(4, minmax(170px, 1fr)) 390px !important;
  }

  .nk-travel {
    grid-column: 5 !important;
    grid-row: 1 / span 2 !important;
  }

  .nk-venue-guild {
    display: none !important;
  }
}

@media (max-width: 899px) {
  .nk-hero-banner {
    right: 18px;
    top: 90px;
    height: 136px;
    width: 44px;
    font-size: 28px;
    opacity: .88;
  }

  .nk-venue-guild {
    display: flex;
  }

  .nk-news::after {
    display: none;
  }
}