:root {
  --bg: #060914;
  --panel: #0d1426;
  --panel2: #111b31;
  --line: rgba(255, 255, 255, .11);
  --text: #f4f7ff;
  --muted: #9aa7c7;
  --blue: #4d7cff;
  --red: #ff3d58;
  --gold: #e1b659;
  --green: #5ef0a8;
  --shadow: 0 20px 80px rgba(0, 0, 0, .45);
  --input-bg: #111b31;
  --input-text: #ffffff;
  --topbar-bg: rgba(6, 9, 20, .86);
  --statusbar-bg: rgba(17, 27, 49, .66);
  --card-bg: linear-gradient(180deg, rgba(17, 27, 49, .94), rgba(10, 16, 31, .94));
  --hero-glow: radial-gradient(circle at 50% 0%, rgba(225, 182, 89, .18), transparent 28rem);
}

:root[data-theme="day"] {
  --bg: #edf2ff;
  --panel: #ffffff;
  --panel2: #f6f8ff;
  --line: rgba(15, 23, 42, .14);
  --text: #111827;
  --muted: #5f6d86;
  --blue: #315eea;
  --red: #d92f48;
  --gold: #a77718;
  --green: #138f5c;
  --shadow: 0 20px 60px rgba(15, 23, 42, .10);
  --input-bg: #ffffff;
  --input-text: #111827;
  --topbar-bg: rgba(246, 248, 255, .92);
  --statusbar-bg: rgba(255, 255, 255, .72);
  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(245, 248, 255, .96));
  --hero-glow: radial-gradient(circle at 50% 0%, rgba(49, 94, 234, .14), transparent 28rem);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

:root[data-theme="day"] {
  color-scheme: light;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(77, 124, 255, .22), transparent 34rem),
    radial-gradient(circle at top right, rgba(255, 61, 88, .13), transparent 30rem),
    linear-gradient(180deg, var(--bg), #0a0f1d 55%, #05070e);
}

:root[data-theme="day"] body {
  background:
    radial-gradient(circle at top left, rgba(49, 94, 234, .15), transparent 34rem),
    radial-gradient(circle at top right, rgba(217, 47, 72, .10), transparent 30rem),
    linear-gradient(180deg, var(--bg), #f8fbff 60%, #e8eefc);
}

a {
  color: #93b1ff;
  text-decoration: none;
}

a:hover {
  color: #ffffff;
}

:root[data-theme="day"] a:hover {
  color: var(--blue);
}

.ci-topbar {
  position: sticky;
  top: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 3vw, 2.5rem);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.ci-brand {
  color: var(--text);
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
}

.ci-brand span {
  color: var(--red);
}

.ci-menu-btn {
  display: none;
}

.ci-nav {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-wrap: wrap;
  gap: .45rem;
}

.ci-network-nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.ci-nav-group {
  position: relative;
  display: inline-flex;
}

.ci-nav a,
.ci-btn,
.ci-nav-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    color:#fff;
    border-radius:999px;
    padding:.85rem 1.25rem;
    font-weight:800;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
    cursor:pointer;
    min-height:48px;
}

.ci-nav a:hover,
.ci-btn:hover,
.ci-nav-btn:hover {
  border-color: rgba(147, 177, 255, .65);
  transform: translateY(-1px);
}

.ci-btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue), #784dff);
  border-color: rgba(255, 255, 255, .24);
}

.ci-nav-btn {
  gap: .45rem;
}

.ci-nav-btn::after {
  content: "v";
  color: var(--gold);
  font-size: .75rem;
}

.ci-nav-menu {
  display: none;
  position: absolute;
  top: calc(100% + .7rem);
  left: 0;
  z-index: 999;
  min-width: 260px;
  padding: .65rem;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.ci-nav-group:hover .ci-nav-menu,
.ci-nav-group:focus-within .ci-nav-menu {
  display: grid;
  gap: .4rem;
}

.ci-nav-menu a {
  width: 100%;
  justify-content: flex-start;
  padding: .65rem .8rem;
  border-radius: 14px;
  box-shadow: none;
}

.ci-nav-menu a:hover {
  background: rgba(77, 124, 255, .18);
  border-color: rgba(147, 177, 255, .55);
}

.ci-nav-direct {
  display: inline-flex;
}

.ci-statusbar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .7rem 1rem;
  color: var(--muted);
  font-weight: 800;
  background: var(--statusbar-bg);
  border-bottom: 1px solid var(--line);
}

.ci-statusbar span {
  padding: .35rem .7rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.ci-shell {
  width: min(1240px, calc(100% - 2rem));
  margin: 2.4rem auto;
}

.ci-card {
  padding: 1.4rem;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
}

.ci-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 7vw, 5rem);
  text-align: center;
}

.ci-hero--world {
  min-height: clamp(34rem, 68vh, 48rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  background:
    linear-gradient(90deg, rgba(4, 8, 16, .96) 0%, rgba(4, 8, 16, .76) 35%, rgba(4, 8, 16, .14) 72%),
    linear-gradient(0deg, rgba(4, 8, 16, .94), transparent 52%),
    url('/assets/images/world/covenantisle-hero.webp') center center / cover no-repeat;
}

.ci-hero--world::before {
  background: radial-gradient(circle at 22% 28%, rgba(225, 182, 89, .2), transparent 30rem);
}

.ci-hero--world > * {
  max-width: 720px;
}

.ci-hero--world .ci-hero-mark {
  margin: 0 0 1.25rem;
}

.ci-hero--world h1 {
  letter-spacing: 0;
}

.ci-hero--world p {
  margin-left: 0;
  color: #e3e9f6;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .8);
}

.ci-hero--world .ci-actions {
  justify-content: flex-start;
}

.ci-hero::before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background: var(--hero-glow);
}

.ci-hero > * {
  position: relative;
}

.ci-hero h1 {
  margin: .4rem 0 1rem;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.08em;
}

.ci-hero p {
  max-width: 760px;
  margin: 0 auto 1.5rem;
  color: var(--muted);
  font-size: 1.18rem;
  line-height: 1.7;
}

.ci-kicker {
  color: var(--gold);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ci-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.ci-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ci-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ci-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ci-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
}

.ci-muted {
  color: var(--muted);
}

.ci-stack-xs > * + * {
  margin-top: .5rem;
}

.ci-stack-sm > * + * {
  margin-top: 1rem;
}

.ci-stack-md > * + * {
  margin-top: 1.5rem;
}

.ci-stack-lg > * + * {
  margin-top: 2rem;
}

.ci-section {
  margin-bottom: 2rem;
}

.ci-section:last-child {
  margin-bottom: 0;
}

.ci-section-gap {
  margin-top: 1rem;
}

.ci-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.ci-stat {
  padding: 1rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.ci-stat span {
  display: block;
  color: var(--muted);
  font-size: .82rem;
}

.ci-stat strong {
  font-size: 1.8rem;
}

.ci-dashboard-command {
  position: relative;
  overflow: hidden;
  border-color: rgba(244, 207, 119, .2);
}

.ci-dashboard-command::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 18%, rgba(244, 207, 119, .13), transparent 18rem),
    linear-gradient(120deg, rgba(77, 124, 255, .11), transparent 42%);
}

.ci-dashboard-command > * {
  position: relative;
}

.ci-dashboard-command-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.ci-dashboard-level {
  min-width: 7rem;
  padding: 1rem;
  text-align: center;
  border: 1px solid rgba(244, 207, 119, .24);
  border-radius: 22px;
  background: rgba(0, 0, 0, .22);
  box-shadow: 0 0 32px rgba(244, 207, 119, .08);
}

.ci-dashboard-level span,
.ci-standing-grid span {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ci-dashboard-level strong {
  display: block;
  color: var(--text);
  font-size: 2.35rem;
  line-height: 1;
}

.ci-dashboard-vitals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.35rem;
}

.ci-dashboard-next {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.35rem;
}

.ci-next-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: .85rem;
  row-gap: .15rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--text);
  background: rgba(255, 255, 255, .045);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.ci-next-action:hover {
  transform: translateY(-2px);
  border-color: rgba(244, 207, 119, .45);
  background: rgba(255, 255, 255, .07);
}

.ci-next-action .ci-icon-md {
  grid-row: 1 / span 2;
}

.ci-next-action span {
  font-weight: 900;
}

.ci-next-action small {
  color: var(--muted);
  line-height: 1.35;
}

.ci-next-action-primary {
  border-color: rgba(116, 96, 255, .55);
  background: linear-gradient(135deg, rgba(77, 124, 255, .18), rgba(120, 77, 255, .16));
}

.ci-standing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.ci-standing-grid div {
  padding: .95rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
}

.ci-standing-grid strong {
  display: block;
  margin-top: .25rem;
  font-size: 1.18rem;
}

.ci-feed-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.ci-feed-item:last-child {
  border-bottom: 0;
}

.ci-form {
  display: grid;
  gap: 1rem;
}

.ci-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ci-form label {
  display: grid;
  gap: .4rem;
  color: var(--muted);
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  padding: .9rem 1rem;
  color: var(--input-text);
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
}

select {
  color-scheme: dark;
}

:root[data-theme="day"] select {
  color-scheme: light;
}

select option,
select optgroup {
  color: var(--input-text);
  background: var(--input-bg);
}

textarea {
  min-height: 120px;
}

.ci-form-card {
  max-width: 560px;
  margin: auto;
}

.ci-alert {
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.ci-alert-good {
  background: rgba(94, 240, 168, .12);
  border-color: rgba(94, 240, 168, .35);
}

.ci-alert-bad {
  background: rgba(255, 61, 88, .12);
  border-color: rgba(255, 61, 88, .35);
}

.ci-table {
  width: 100%;
  border-collapse: collapse;
}

.ci-table th,
.ci-table td {
  padding: .9rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.ci-table th {
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ci-earned {
  border-color: rgba(94, 240, 168, .45);
}

.ci-footer {
  padding: 2rem;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  .ci-grid-2,
  .ci-grid-3,
  .ci-grid-4,
  .ci-form-grid {
    grid-template-columns: 1fr;
  }

  .ci-menu-btn {
    display: inline-flex;
    padding: .6rem .8rem;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 14px;
  }

  .ci-nav {
    display: none;
    position: absolute;
    top: 4.5rem;
    left: 1rem;
    right: 1rem;
    padding: 1rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 22px;
  }

  .ci-nav.open {
    display: grid;
    gap: .5rem;
  }

  .ci-nav a,
  .ci-nav-btn {
    justify-content: flex-start;
  }

  .ci-nav-group {
    display: grid;
  }

  .ci-nav-btn {
    width: 100%;
    justify-content: space-between;
  }

  .ci-nav-menu {
    position: static;
    display: grid;
    gap: .4rem;
    margin-top: .4rem;
    background: rgba(255, 255, 255, .04);
    box-shadow: none;
  }

  .ci-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ci-dashboard-command-head,
  .ci-dashboard-vitals,
  .ci-dashboard-next {
    grid-template-columns: 1fr;
  }

  .ci-dashboard-command-head {
    display: grid;
  }

  .ci-dashboard-level {
    width: 100%;
  }
}
.ci-world-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}

.ci-world-row:last-child {
  border-bottom: 0;
}

.ci-command-links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.ci-paper-doll {
  display: grid;
  gap: .75rem;
}

.ci-equipment-slot {
  display: grid;
  gap: .25rem;
  padding: 1rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.ci-equipment-slot span {
  color: var(--gold);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ci-equipment-slot small {
  color: var(--muted);
}



.ci-footer-pro {
  margin-top: 3rem;
  padding: 2.5rem clamp(1rem, 3vw, 2.5rem) 1.25rem;
  color: var(--muted);
  background:
    radial-gradient(circle at top left, rgba(77, 124, 255, .14), transparent 26rem),
    linear-gradient(180deg, rgba(17, 27, 49, .72), rgba(6, 9, 20, .96));
  border-top: 1px solid var(--line);
}

.ci-footer-inner {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) minmax(220px, .85fr) minmax(220px, .85fr);
  column-gap: clamp(3rem, 7vw, 6.5rem);
  row-gap: 1.5rem;
  align-items: start;
}

.ci-footer-logo {
  display: inline-flex;
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.ci-footer-logo span {
  color: var(--red);
}

.ci-footer-brand p {
  max-width: 430px;
  line-height: 1.7;
}

.ci-footer-links {
  display: grid;
  gap: .55rem;
  align-content: start;
}

.ci-footer-links-title {
  margin: 0 0 .15rem;
  color: var(--muted);
  font-size: .95rem;
  font-weight: 900;
}

.ci-footer-links a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  column-gap: .45rem;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.2;
}

.ci-footer-links a.ci-footer-links-title {
  display: block;
}

.ci-footer-links a:hover {
  color: var(--text);
}

.ci-footer-admin {
  padding: 1rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.ci-footer-bottom {
  width: min(1240px, 100%);
  margin: 1.5rem auto 0;
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  font-size: .9rem;
}

@media (max-width: 900px) {
  .ci-footer-inner {
    grid-template-columns: 1fr;
  }

  .ci-footer-bottom {
    flex-direction: column;
  }
}
/* CovenantIsle Final Launch Navigation */
.ci-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  gap: .45rem;
  flex-wrap: wrap;
}

.ci-network-nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.ci-nav-group {
  position: relative;
  display: inline-flex;
}

.ci-nav a,
.ci-nav-btn {
  min-height: 42px;
  white-space: nowrap;
}

.ci-nav-btn {
  gap: .45rem;
  font-family: inherit;
}

.ci-nav-btn::after {
  content: "v";
  color: var(--gold);
  font-size: .72rem;
  line-height: 1;
  transform: translateY(1px);
}

.ci-nav-group.is-active > .ci-nav-btn,
.ci-nav-direct.is-active,
.ci-nav a.is-active {
  border-color: rgba(225, 182, 89, .65);
  box-shadow: 0 0 0 1px rgba(225, 182, 89, .16), 0 10px 30px rgba(0, 0, 0, .18);
}

.ci-nav-menu {
  display: none;
  position: absolute;
  top: calc(100% + .7rem);
  left: 0;
  z-index: 999;
  min-width: 260px;
  padding: .65rem;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.ci-nav-menu-wide {
  min-width: 420px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ci-nav-group:hover .ci-nav-menu,
.ci-nav-group:focus-within .ci-nav-menu {
  display: grid;
  gap: .4rem;
}

.ci-nav-menu a {
  width: 100%;
  min-height: 38px;
  justify-content: flex-start;
  padding: .65rem .8rem;
  border-radius: 14px;
  box-shadow: none;
}

.ci-nav-menu a:hover {
  background: rgba(77, 124, 255, .18);
  border-color: rgba(147, 177, 255, .55);
}

@media (max-width: 1100px) {
  .ci-topbar {
    align-items: center;
  }

  .ci-nav {
    justify-content: flex-start;
    margin-left: auto;
  }
}

@media (max-width: 900px) {
  .ci-nav {
    display: none;
    position: absolute;
    top: 4.5rem;
    left: 1rem;
    right: 1rem;
    max-height: calc(100vh - 6rem);
    overflow: auto;
    padding: 1rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
  }

  .ci-nav.open {
    display: grid;
    gap: .55rem;
  }

  .ci-nav-group {
    display: grid;
  }

  .ci-nav-btn,
  .ci-nav a {
    width: 100%;
    justify-content: space-between;
  }

  .ci-nav-menu,
  .ci-nav-menu-wide {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: .4rem;
    min-width: 0;
    margin-top: .4rem;
    background: rgba(255, 255, 255, .04);
    box-shadow: none;
  }

  .ci-nav-menu a {
    justify-content: flex-start;
  }
}








.ci-section{
    margin-top:2rem;
}

.ci-section-lg{
    margin-top:3rem;
}

.ci-section-xl{
    margin-top:4rem;
}

@media (max-width: 900px) {
  .ci-topbar {
    justify-content: flex-start;
  }

  .ci-menu-btn {
    margin-left: auto;
  }

  .ci-network-nav {
    margin-left: 0;
  }
}


















.ci-realm-map{
    display:grid;
    gap:1rem;
    margin-top:1.5rem;
    grid-template-columns:repeat(5,minmax(0,1fr));
    padding:clamp(18rem,38vw,31rem) 1rem 1rem;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:22px;
    background:
      linear-gradient(0deg,rgba(4,8,16,.96),rgba(4,8,16,.08) 62%),
      url('/assets/images/world/covenantisle-map.webp') center center / cover no-repeat;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.ci-region-node{
    display:flex;
    flex-direction:column;
    gap:.4rem;
    padding:1.25rem;
    border-radius:20px;
    border:1px solid var(--line);
    background:rgba(7,12,22,.82);
    backdrop-filter:blur(10px);
    transition:.2s;
}

.ci-region-node:hover{
    transform:translateY(-3px);
    border-color:rgba(225,182,89,.45);
}

.ci-region-node strong{
    color:#fff;
    font-size:1.05rem;
}

.ci-region-node span{
    color:var(--muted);
    font-size:.9rem;
}

@media(max-width:900px){
    .ci-realm-map{
        grid-template-columns:1fr;
    }
}
.ci-actions{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    justify-content:center;
    margin-top:1.5rem;
}

.ci-actions-lg{
    display:flex;
    gap:1.25rem;
    flex-wrap:wrap;
    justify-content:center;
    margin-top:2rem;
}





.ci-section{
    margin-top:2rem;
}

.ci-section-lg{
    margin-top:3rem;
}

.ci-section-xl{
    margin-top:4rem;
}

.ci-content{
    max-width:900px;
    margin:auto;
}



.ci-realm-map{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:1rem;
    margin-top:1.5rem;
}

.ci-region-node{
    display:flex;
    flex-direction:column;
    gap:.4rem;
    padding:1.25rem;
    border-radius:20px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    transition:.2s ease;
}

.ci-region-node:hover{
    transform:translateY(-3px);
    border-color:rgba(225,182,89,.45);
}

.ci-region-node strong{
    color:#fff;
    font-size:1.05rem;
}

.ci-region-node span{
    color:var(--muted);
    font-size:.9rem;
}

.ci-realm-map + .ci-actions{
    margin-top:2rem;
}

@media(max-width:900px){
    .ci-realm-map{
        grid-template-columns:1fr;
    }
}

/* CovenantIsle Icon Integration */
.ci-icon{
  width:1.92rem;
  height:1.92rem;
  object-fit:contain;
  flex:0 0 auto;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

.ci-icon-sm{
  width:1.5rem;
  height:1.5rem;
}

.ci-icon-md{
  width:2.325rem;
  height:2.325rem;
}

.ci-icon-lg{
  width:3.225rem;
  height:3.225rem;
}

.ci-icon-xl{
  width:6.9rem;
  height:6.9rem;
  object-fit:contain;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.42));
}

.ci-icon-block{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:8.4rem;
  height:8.4rem;
  margin-bottom:1rem;
  border:1px solid rgba(225,182,89,.22);
  border-radius:24px;
  background:radial-gradient(circle at 50% 25%, rgba(225,182,89,.16), rgba(255,255,255,.045) 58%, rgba(0,0,0,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 18px 50px rgba(0,0,0,.22);
}

.ci-card-icon{
  display:flex;
  align-items:flex-start;
  gap:1rem;
}

.ci-card-icon .ci-icon-block{
  flex:0 0 auto;
  margin-bottom:0;
}

.ci-card-icon-body{
  min-width:0;
}

.ci-nav a,
.ci-nav-btn,
.ci-btn{
  gap:.52rem;
}

.ci-nav-menu a{
  gap:.55rem;
}

.ci-brand{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
}

.ci-brand .ci-icon{
  width:2.625rem;
  height:2.625rem;
}

.ci-hero-mark{
  margin:0 auto 1.25rem;
  width:10.8rem;
  height:10.8rem;
}

.ci-hero-mark .ci-icon-xl{
  width:8.85rem;
  height:8.85rem;
}

.ci-stat{
  position:relative;
  overflow:hidden;
}

.ci-stat .ci-icon{
  position:absolute;
  right:.8rem;
  top:.75rem;
  width:3rem;
  height:3rem;
  opacity:.72;
}

.ci-region-node{
  position:relative;
  overflow:hidden;
}

.ci-region-node .ci-icon{
  width:3.525rem;
  height:3.525rem;
  margin-bottom:.25rem;
}

.ci-world-meter{
  position:relative;
  height:.55rem;
  margin-top:1rem;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
}

.ci-world-meter span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--gold),var(--red));
}

.ci-mission-result{
  position:relative;
  overflow:hidden;
  border-color:rgba(94,240,168,.28);
}

.ci-mission-result::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 0%, rgba(94,240,168,.18), transparent 24rem),
    radial-gradient(circle at 88% 10%, rgba(225,182,89,.16), transparent 22rem);
}

.ci-mission-result > *{
  position:relative;
  z-index:1;
}

.ci-mission-result-head{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
}

.ci-mission-result-head h2{
  margin:.25rem 0 .4rem;
}

.ci-mission-result-mark{
  width:6.2rem;
  height:6.2rem;
  margin:0;
  border-color:rgba(94,240,168,.35);
}

.ci-mission-result-mark .ci-icon-xl{
  width:4.6rem;
  height:4.6rem;
}

.ci-reward-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.85rem;
  margin:1rem 0;
}

.ci-reward-card{
  position:relative;
  min-height:116px;
  padding:1rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
}

.ci-reward-card .ci-icon-md{
  position:absolute;
  right:.85rem;
  top:.85rem;
  opacity:.72;
}

.ci-reward-card span{
  display:block;
  color:var(--muted);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.ci-reward-card strong{
  display:block;
  margin-top:1.7rem;
  color:var(--text);
  font-size:clamp(1.55rem,3vw,2.2rem);
  line-height:1;
}

.ci-reward-card-score{
  border-color:rgba(225,182,89,.34);
  background:
    radial-gradient(circle at 100% 0%,rgba(225,182,89,.18),transparent 7rem),
    linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
}

.ci-result-visual-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-top:1rem;
}

.ci-result-meter{
  padding:1rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(0,0,0,.16);
}

.ci-result-meter > div:first-child{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  color:var(--muted);
  font-weight:800;
}

.ci-result-meter strong{
  color:var(--text);
}

.ci-result-bar span{
  background:linear-gradient(90deg,#5ef0a8,var(--gold),var(--blue));
}

.ci-result-bar-energy span{
  background:linear-gradient(90deg,var(--red),var(--gold),#5ef0a8);
}

.ci-mission-consequence{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.9rem;
  margin-top:1rem;
}

.ci-mission-consequence > div{
  min-height:128px;
  padding:1rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(94,240,168,.08),transparent 48%),
    rgba(0,0,0,.16);
}

.ci-mission-consequence span{
  display:block;
  color:var(--gold);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.ci-mission-consequence strong{
  display:block;
  margin:.55rem 0 .35rem;
  color:var(--text);
  font-size:1.05rem;
}

.ci-mission-consequence p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
}

.ci-result-flow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.7rem;
  margin-top:1rem;
  color:var(--muted);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ci-result-flow span{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
}

.ci-result-flow span + span::before{
  content:"";
  width:2.4rem;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--gold),rgba(94,240,168,.7));
}

.ci-result-actions{
  margin-top:1.15rem;
}

.ci-mission-card{
  position:relative;
  overflow:hidden;
}

.ci-mission-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.88;
  background:radial-gradient(circle at 100% 0%,rgba(102,126,234,.1),transparent 16rem);
}

.ci-mission-card > *{
  position:relative;
  z-index:1;
}

.ci-mission-card.is-ready{
  border-color:rgba(94,240,168,.22);
}

.ci-mission-card.is-locked{
  border-color:rgba(255,255,255,.09);
  opacity:.78;
}

.ci-mission-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.ci-mission-card-head h2{
  margin:.3rem 0 .6rem;
}

.ci-mission-score{
  min-width:96px;
  padding:.75rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  text-align:center;
  background:rgba(0,0,0,.18);
}

.ci-mission-score span{
  display:block;
  color:var(--muted);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.ci-mission-score strong{
  display:block;
  margin-top:.25rem;
  color:var(--gold);
  font-size:1.35rem;
  line-height:1;
}

.ci-mission-rewards{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin:1rem 0;
}

.ci-mission-rewards span{
  padding:.38rem .58rem;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  color:var(--text);
  background:rgba(255,255,255,.045);
  font-size:.78rem;
  font-weight:900;
}

.ci-mission-lock{
  margin:.75rem 0 1rem;
  color:#ffd3d3;
  font-weight:800;
}

.ci-mission-card button[disabled]{
  cursor:not-allowed;
  opacity:.58;
  filter:saturate(.5);
}

.ci-region-travel-result{
  display:flex;
  align-items:center;
  gap:1rem;
  border-color:rgba(94,240,168,.28);
  background:
    radial-gradient(circle at 8% 0%,rgba(94,240,168,.14),transparent 20rem),
    linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
}

.ci-region-result-mark{
  width:5.8rem;
  height:5.8rem;
  margin:0;
}

.ci-region-card{
  position:relative;
  overflow:hidden;
}

.ci-region-art {
  position: relative;
  z-index: 2;
  aspect-ratio: 16 / 7;
  margin: -1.4rem -1.4rem 1.25rem;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.ci-region-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 8, 16, .82), transparent 58%);
  pointer-events: none;
}

.ci-region-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s ease;
}

.ci-region-card:hover .ci-region-art img {
  transform: scale(1.025);
}

.ci-region-art span {
  position: absolute;
  z-index: 1;
  left: 1.25rem;
  bottom: 1rem;
  color: #fff;
  font-weight: 900;
  font-size: 1.1rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
}

@media (max-width: 720px) {
  .ci-hero--world {
    min-height: 38rem;
    background-position: 62% center;
  }

  .ci-realm-map {
    padding-top: 18rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ci-region-art img,
  .ci-faction-art img {
    transition: none;
  }
}

.ci-region-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 100% 0%,rgba(102,126,234,.12),transparent 17rem),
    radial-gradient(circle at 0% 100%,rgba(225,182,89,.08),transparent 18rem);
}

.ci-region-card > *{
  position:relative;
  z-index:1;
}

.ci-region-card.is-current{
  border-color:rgba(94,240,168,.3);
}

.ci-region-card.is-gated{
  opacity:.78;
}

.ci-region-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.ci-region-card-head h2{
  margin:.25rem 0 .65rem;
}

.ci-region-pulse{
  min-width:94px;
  padding:.7rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  text-align:center;
  background:rgba(0,0,0,.18);
}

.ci-region-pulse span{
  display:block;
  color:var(--muted);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.ci-region-pulse strong{
  display:block;
  margin-top:.25rem;
  color:var(--gold);
  font-size:1.35rem;
  line-height:1;
}

.ci-region-state-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.65rem;
  margin:1rem 0;
}

.ci-region-state-grid div{
  min-height:76px;
  padding:.75rem;
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  background:rgba(0,0,0,.14);
}

.ci-region-state-grid span,
.ci-region-meter-set span{
  display:block;
  color:var(--muted);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ci-region-state-grid strong{
  display:block;
  margin-top:.45rem;
  color:var(--text);
  font-size:1.02rem;
}

.ci-region-meter-set{
  display:grid;
  gap:.6rem;
  margin:1rem 0;
}

.ci-region-meter-set .ci-world-meter{
  margin-top:.35rem;
}

.ci-region-security span{
  background:linear-gradient(90deg,#5ef0a8,var(--blue));
}

.ci-region-pressure span{
  background:linear-gradient(90deg,var(--gold),var(--red));
}

.ci-region-travel-note{
  color:var(--muted);
  font-weight:800;
}

.ci-world-pulse{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}

.ci-world-pulse-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:.85rem;
  min-height:150px;
  overflow:hidden;
}

.ci-world-pulse-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 100% 0%,rgba(225,182,89,.13),transparent 13rem);
}

.ci-world-pulse-card > *{
  position:relative;
  z-index:1;
}

.ci-world-pulse-icon{
  width:4.8rem;
  height:4.8rem;
  margin:0;
  flex:0 0 auto;
}

.ci-world-pulse-card span,
.ci-world-list-item span{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ci-world-pulse-card strong{
  display:block;
  margin:.28rem 0;
  color:var(--text);
  font-size:clamp(1.8rem,3.4vw,2.65rem);
  line-height:1;
}

.ci-world-pulse-card p{
  margin:.35rem 0 0;
  color:var(--muted);
  font-size:.92rem;
}

.ci-status-card{
  position:relative;
  overflow:hidden;
}

.ci-status-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 100% 0%,rgba(102,126,234,.1),transparent 15rem);
}

.ci-status-card.is-high{
  border-color:rgba(255,82,130,.28);
}

.ci-status-card.is-low{
  border-color:rgba(94,240,168,.22);
}

.ci-status-card > *{
  position:relative;
  z-index:1;
}

.ci-status-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.ci-status-card-head h2{
  margin:.25rem 0 .5rem;
}

.ci-status-card-head strong{
  min-width:56px;
  padding:.48rem .55rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  color:var(--gold);
  text-align:center;
  background:rgba(0,0,0,.18);
}

.ci-world-list-item{
  position:relative;
  padding:1rem 0 1.15rem;
}

.ci-world-list-item > div{
  padding-right:5rem;
}

.ci-world-list-item strong{
  display:block;
  color:var(--text);
}

.ci-world-list-item b{
  position:absolute;
  top:1rem;
  right:0;
  padding:.34rem .52rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:var(--gold);
  background:rgba(0,0,0,.18);
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
}

.ci-world-list-item p{
  margin:.5rem 0 0;
  color:var(--muted);
}

.ci-create-character-hero{
  position:relative;
  overflow:hidden;
  min-height:clamp(22rem,40vw,34rem);
  align-items:flex-end;
  border-color:rgba(225,182,89,.28);
  background:
    linear-gradient(90deg,rgba(5,8,16,.96),rgba(5,8,16,.58) 50%,rgba(5,8,16,.14)),
    linear-gradient(0deg,rgba(5,8,16,.9),transparent 55%),
    url('/assets/images/world/character-paths.webp') center 32% / cover no-repeat;
}

.ci-create-character-mark{
  width:7rem;
  height:7rem;
  margin:0;
}

.ci-faction-card {
  overflow: hidden;
}

.ci-faction-art {
  aspect-ratio: 16 / 7;
  margin: -1.4rem -1.4rem 1.15rem;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.ci-faction-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s ease;
}

.ci-faction-card:hover .ci-faction-art img {
  transform: scale(1.025);
}

.ci-raid-hero {
  min-height: clamp(24rem, 44vw, 38rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background:
    linear-gradient(90deg,rgba(5,8,16,.94),rgba(5,8,16,.38) 58%,rgba(5,8,16,.08)),
    linear-gradient(0deg,rgba(5,8,16,.94),transparent 62%),
    url('/assets/images/world/raid-stone-sentinel.webp') center center / cover no-repeat;
}

.ci-raid-hero h1,
.ci-raid-hero p {
  max-width: 680px;
  text-shadow: 0 2px 16px rgba(0,0,0,.9);
}

.ci-raid-hero p {
  color: #e3e9f6;
}

.ci-create-preview .ci-card{
  min-height:230px;
}

.ci-create-character-form{
  max-width:none;
  margin-top:1rem;
  scroll-margin-top:7rem;
}

.ci-choice-section{
  display:grid;
  gap:1rem;
  margin-bottom:1.35rem;
}

.ci-choice-section h2{
  margin:.2rem 0 .35rem;
}

.ci-path-grid,
.ci-faction-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.85rem;
}

.ci-faction-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.ci-choice-card{
  position:relative;
  display:block;
  min-height:190px;
  padding:1rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:
    radial-gradient(circle at 100% 0%,rgba(102,126,234,.12),transparent 11rem),
    rgba(0,0,0,.14);
  cursor:pointer;
}

.ci-choice-card input{
  position:absolute;
  inset:.8rem .8rem auto auto;
  width:1.1rem;
  height:1.1rem;
  accent-color:var(--gold);
}

.ci-choice-card .ci-icon-md{
  margin-bottom:.8rem;
}

.ci-choice-card strong{
  display:block;
  color:var(--text);
  font-size:1.08rem;
}

.ci-choice-card span{
  display:block;
  margin:.35rem 0;
  color:var(--gold);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ci-choice-card p{
  margin:.45rem 0 0;
  color:var(--muted);
  font-size:.93rem;
}

.ci-choice-card:has(input:checked){
  border-color:rgba(94,240,168,.42);
  box-shadow:0 0 0 1px rgba(94,240,168,.15), 0 18px 44px rgba(0,0,0,.2);
}

.ci-choice-card:has(input:focus-visible){
  outline:2px solid var(--gold);
  outline-offset:3px;
}

.ci-create-submit{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(0,0,0,.16);
}

.ci-create-submit strong{
  display:block;
  color:var(--text);
}

.ci-create-submit p{
  margin:.25rem 0 0;
}

.ci-onboarding-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,320px);
  align-items:center;
  gap:1.2rem;
  overflow:hidden;
  border-color:rgba(225,182,89,.28);
  background:
    radial-gradient(circle at 8% 0%,rgba(225,182,89,.16),transparent 21rem),
    radial-gradient(circle at 88% 30%,rgba(94,240,168,.12),transparent 22rem),
    linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
}

.ci-onboarding-page-hero{
  margin-bottom:1rem;
  background:
    linear-gradient(90deg,rgba(6,10,12,.9) 0%,rgba(6,10,12,.7) 52%,rgba(6,10,12,.44) 100%),
    linear-gradient(0deg,rgba(6,10,12,.82) 0%,transparent 65%),
    url('/assets/images/world/onboarding-hero.webp') center / cover no-repeat;
}

.ci-onboarding-mark{
  width:6.5rem;
  height:6.5rem;
}

.ci-onboarding-progress{
  padding:1rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(0,0,0,.18);
}

.ci-onboarding-progress span{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ci-onboarding-progress strong{
  display:block;
  margin:.35rem 0;
  color:var(--text);
  font-size:clamp(2rem,4vw,3rem);
  line-height:1;
}

.ci-onboarding-progress p{
  margin:.55rem 0 0;
  color:var(--muted);
  font-weight:800;
}

.ci-next-step-card{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
  border-color:rgba(94,240,168,.28);
  background:
    radial-gradient(circle at 100% 0%,rgba(94,240,168,.13),transparent 18rem),
    rgba(255,255,255,.035);
}

.ci-next-step-mark{
  width:5.8rem;
  height:5.8rem;
  margin:0;
}

.ci-next-step-card h2{
  margin:.25rem 0 .45rem;
}

.ci-onboarding-card{
  position:relative;
  overflow:hidden;
}

.ci-onboarding-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 100% 0%,rgba(102,126,234,.11),transparent 14rem);
}

.ci-onboarding-card > *{
  position:relative;
  z-index:1;
}

.ci-onboarding-card.is-complete{
  border-color:rgba(94,240,168,.24);
}

.ci-onboarding-card.is-open{
  border-color:rgba(225,182,89,.22);
}

.ci-onboarding-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.ci-onboarding-card-head h2{
  margin:.25rem 0 .65rem;
}

.ci-onboarding-card-head strong{
  min-width:72px;
  padding:.45rem .55rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:var(--gold);
  text-align:center;
  background:rgba(0,0,0,.18);
  font-size:.78rem;
  text-transform:uppercase;
}

.ci-profile-hero{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(320px,.72fr);
  align-items:center;
  gap:1.5rem;
  min-height:320px;
  overflow:hidden;
  border-color:rgba(225,182,89,.2);
  background:
    radial-gradient(circle at 10% 10%,rgba(225,182,89,.13),transparent 18rem),
    radial-gradient(circle at 82% 30%,rgba(77,124,255,.12),transparent 22rem),
    var(--card-bg);
}

.ci-profile-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:8.6rem;
  height:8.6rem;
  overflow:hidden;
  border:1px solid rgba(225,182,89,.25);
  border-radius:24px;
  background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.08),rgba(0,0,0,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 50px rgba(0,0,0,.28);
}

.ci-profile-mark img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.ci-profile-main h1{
  margin:.25rem 0 .35rem;
  font-size:clamp(2.2rem,5vw,4rem);
  line-height:1;
}

.ci-profile-title{
  display:inline-flex;
  margin-bottom:.45rem;
  color:var(--gold);
  font-weight:900;
}

.ci-profile-actions{
  justify-content:flex-start;
  margin-top:1rem;
}

.ci-profile-stats{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.ci-profile-settings-card{
  max-width:980px;
  margin-inline:auto;
}

.ci-profile-form{
  margin-top:1.35rem;
}

.ci-profile-form textarea{
  min-height:150px;
}

.ci-profile-form .ci-actions{
  justify-content:flex-start;
}

.ci-onboarding-hero{
  grid-template-columns:auto minmax(0,1fr) minmax(240px,330px);
}

.ci-onboarding-hero .ci-card-icon-body{
  max-width:520px;
}

.ci-onboarding-hero h1{
  margin:.25rem 0 .75rem;
  font-size:clamp(2.25rem,5vw,4rem);
  line-height:1;
}

.ci-onboarding-progress{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.ci-card-icon:first-child{
  scroll-margin-top:7rem;
}

.ci-table a{
  font-weight:900;
}

.ci-territory-card{
  align-items:center;
}

.ci-territory-card h2{
  margin:.3rem 0 .75rem;
}

.ci-territory-stats{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin:.55rem 0 .75rem;
}

.ci-territory-stats span{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .65rem;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:rgba(0,0,0,.14);
  font-weight:800;
}

.ci-territory-stats strong{
  color:var(--gold);
}

.ci-system-hero{
  position:relative;
  display:flex;
  min-height:clamp(18rem,32vw,28rem);
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  isolation:isolate;
  background-position:center;
  background-size:cover;
  color:#fff;
  margin-bottom:1rem;
}

.ci-system-hero::before{
  position:absolute;
  inset:0;
  z-index:-1;
  content:"";
  background:linear-gradient(90deg,rgba(6,10,12,.94) 0%,rgba(6,10,12,.67) 48%,rgba(6,10,12,.2) 100%),linear-gradient(0deg,rgba(6,10,12,.92) 0%,transparent 60%);
}

.ci-system-hero h1,
.ci-system-hero h2,
.ci-system-hero p{
  max-width:42rem;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}

.ci-system-hero .ci-muted{
  color:rgba(255,255,255,.84);
}

.ci-quest-hero{
  background-image:url('/assets/images/world/quest-encounter-banner.webp');
}

.ci-dungeon-hero{
  background-image:url('/assets/images/world/dungeon-banner.webp');
}

.ci-economy-hero{
  background-image:url('/assets/images/world/economy-crafting-banner.webp');
}

.ci-holdings-hero{
  background-image:url('/assets/images/world/holdings-travel-banner.webp');
}

.ci-world-state-hero{
  background-image:url('/assets/images/world/covenantisle-map.webp');
}

.ci-conflict-hero{
  background-image:url('/assets/images/world/dungeon-banner.webp');
}

.ci-raid-system-hero{
  background-image:url('/assets/images/world/raid-stone-sentinel.webp');
}

.ci-lore-hero{
  background-image:url('/assets/images/world/covenantisle-hero.webp');
}

.ci-governance-hero{
  background-image:url('/assets/images/world/faction-covenant-keepers.webp');
}

.ci-progression-hero{
  background-image:url('/assets/images/world/character-paths.webp');
}

.ci-communication-hero{
  background-image:url('/assets/images/world/covenant-harbor.webp');
}

.ci-regions-page-hero{
  background-image:url('/assets/images/world/regions-hero.webp');
}

.ci-factions-page-hero{
  background-image:url('/assets/images/world/factions-hero.webp');
}

.ci-notifications-page-hero{
  background-image:url('/assets/images/world/notifications-hero.webp');
}

.ci-world-feed-page-hero{
  background-image:url('/assets/images/world/world-feed-hero.webp');
}

.ci-leaderboard-page-hero{
  background-image:url('/assets/images/world/leaderboard-hero.webp');
}

.ci-title-with-icon{
  display:flex;
  align-items:center;
  gap:.65rem;
}

.ci-title-with-icon .ci-icon-md{
  flex:0 0 auto;
}

.ci-npc-card{
  overflow:hidden;
}

.ci-npc-art{
  aspect-ratio:16 / 10;
  margin:-1.4rem -1.4rem 1.1rem;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:#080b0d;
}

.ci-npc-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 24%;
  transition:transform .45s ease;
}

.ci-npc-card:hover .ci-npc-art img{
  transform:scale(1.025);
}

@media(prefers-reduced-motion:reduce){
  .ci-npc-art img{
    transition:none;
  }

  .ci-npc-card:hover .ci-npc-art img{
    transform:none;
  }
}

@media(max-width:700px){
  .ci-card-icon{
    display:block;
  }

  .ci-card-icon .ci-icon-block{
    margin-bottom:1rem;
  }

  .ci-mission-result-head,
  .ci-result-meter > div:first-child{
    display:block;
  }

  .ci-reward-grid,
  .ci-mission-consequence,
  .ci-result-visual-grid{
    grid-template-columns:1fr;
  }

  .ci-mission-card-head{
    display:block;
  }

  .ci-mission-score{
    margin-bottom:1rem;
  }

  .ci-result-flow{
    display:grid;
  }

  .ci-result-flow span + span::before{
    width:2px;
    height:1.2rem;
  }

  .ci-region-travel-result,
  .ci-region-card-head{
    display:block;
  }

  .ci-region-result-mark{
    margin-bottom:1rem;
  }

  .ci-region-state-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ci-world-pulse{
    grid-template-columns:1fr;
  }

  .ci-world-pulse-card,
  .ci-status-card-head{
    display:block;
  }

  .ci-world-pulse-icon{
    margin-bottom:.85rem;
  }

  .ci-world-list-item > div{
    padding-right:0;
  }

  .ci-world-list-item b{
    position:static;
    display:inline-flex;
    margin-top:.55rem;
  }

  .ci-path-grid,
  .ci-faction-grid{
    grid-template-columns:1fr;
  }

  .ci-create-submit{
    display:block;
  }

  .ci-create-submit .ci-btn{
    width:100%;
    margin-top:1rem;
  }

  .ci-onboarding-hero{
    display:block;
  }

  .ci-profile-hero{
    grid-template-columns:1fr;
    min-height:0;
  }

  .ci-profile-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ci-profile-mark{
    width:7.2rem;
    height:7.2rem;
  }

  .ci-onboarding-progress{
    margin-top:1rem;
  }

  .ci-next-step-card,
  .ci-onboarding-card-head{
    display:block;
  }

  .ci-next-step-mark{
    margin-bottom:1rem;
  }

  .ci-onboarding-card-head strong{
    display:inline-flex;
    margin-bottom:.75rem;
  }
}