:root {
  --v8-bg: #090b0c;
  --v8-panel: #111416;
  --v8-panel-soft: #171b1d;
  --v8-line: rgba(214, 187, 132, .18);
  --v8-line-strong: rgba(214, 187, 132, .34);
  --v8-ink: #eee8dc;
  --v8-muted: #a9aaa5;
  --v8-bronze: #d0a15a;
  --v8-bronze-soft: #8e6434;
  --v8-red: #9d4834;
  --v8-shadow: 0 24px 80px rgba(0,0,0,.42);
}

html, body {
  background: var(--v8-bg);
  color: var(--v8-ink);
}

body::before {
  background:
    radial-gradient(circle at 78% 6%, rgba(139, 81, 39, .12), transparent 28%),
    radial-gradient(circle at 20% 80%, rgba(58, 89, 82, .08), transparent 34%),
    linear-gradient(180deg, #090b0c, #0b0d0e);
}

.hidden { display: none !important; }

.app-shell {
  background: var(--v8-bg);
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(15,17,18,.98), rgba(8,9,10,.98)),
    url("assets/press/map-camp.webp") center/cover;
  border-right: 1px solid var(--v8-line);
}

.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6,7,8,.58), rgba(6,7,8,.92));
}

.sidebar > * {
  position: relative;
  z-index: 1;
}

.brand {
  border-bottom: 1px solid var(--v8-line);
}

.brand-rune {
  background: linear-gradient(145deg, #4b2b1b, #1b1613);
  border: 1px solid rgba(215, 155, 78, .45);
  color: #efb35f;
  box-shadow: inset 0 0 20px rgba(233, 130, 51, .12);
}

.primary-nav {
  gap: 8px;
}

.nav-link {
  border: 1px solid transparent;
  border-radius: 7px;
  color: #aaa69c;
}

.nav-link:hover {
  background: rgba(255,255,255,.035);
  color: var(--v8-ink);
}

.nav-link.active {
  color: #f4e4c8;
  background: linear-gradient(90deg, rgba(154, 93, 45, .22), rgba(154, 93, 45, .04));
  border-color: rgba(208, 161, 90, .28);
}

.nav-link.active::before {
  background: var(--v8-bronze);
}

.sync-card {
  border-color: var(--v8-line);
  background: rgba(10,11,12,.74);
}

.main {
  background:
    radial-gradient(circle at 80% 0%, rgba(109, 68, 39, .08), transparent 25%),
    var(--v8-bg);
}

.topbar {
  background: rgba(9,11,12,.88);
  border-bottom-color: var(--v8-line);
  backdrop-filter: blur(18px);
}

.crumbs,
.search-box,
.account-pill,
.icon-button {
  color: var(--v8-muted);
}

.search-box {
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.08);
}

.search-box:focus-within {
  border-color: rgba(208,161,90,.55);
}

.world-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 170px;
  max-width: 250px;
  border: 1px solid rgba(137, 173, 185, .24);
  border-radius: 8px;
  background: rgba(45, 72, 82, .14);
  color: #dbe8e9;
  padding: 7px 12px;
  text-align: left;
}

.world-status:hover {
  background: rgba(58, 92, 104, .22);
  border-color: rgba(137, 173, 185, .42);
}

.world-status-mark {
  font-size: 20px;
  color: #d7b96b;
}

.world-status span:last-child {
  display: grid;
  min-width: 0;
}

.world-status strong,
.world-status small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.world-status strong {
  font-size: 12px;
}

.world-status small {
  font-size: 10px;
  color: #9faeb0;
}

.app-view {
  max-width: none;
  padding: clamp(18px, 3vw, 44px);
}

/* Public entry */

.portal-view {
  min-height: 100vh;
  background: #080a0a;
}

.v8-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(390px, .72fr);
  background: #080a0a;
}

.v8-auth .auth-story {
  position: relative;
  min-height: 100vh;
  padding: clamp(34px, 5vw, 74px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background:
    linear-gradient(90deg, rgba(5,7,8,.16), rgba(5,7,8,.3) 58%, rgba(5,7,8,.96)),
    linear-gradient(180deg, rgba(5,7,8,.05), rgba(5,7,8,.7)),
    url("assets/press/landing-sail.webp") center/cover no-repeat;
}

.v8-auth .auth-story::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 40% 42%, transparent 20%, rgba(4,5,6,.18) 68%, rgba(4,5,6,.5));
}

.v8-auth .auth-story > * {
  position: relative;
  z-index: 1;
}

.valheim-logo {
  width: min(520px, 62vw);
  height: auto;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.55));
}

.auth-subtitle {
  margin-top: 10px;
  color: #e5c58e;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12px;
  font-weight: 800;
}

.v8-auth .auth-copy {
  margin-top: auto;
  max-width: 680px;
}

.v8-auth .auth-copy h1 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(38px, 6vw, 82px);
  line-height: .96;
  color: #f0eadf;
  text-shadow: 0 8px 36px rgba(0,0,0,.75);
}

.auth-public-footer {
  width: 100%;
  margin-top: 36px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.unofficial-notice {
  color: rgba(239,232,219,.66);
  font-size: 11px;
  text-decoration: none;
}

.unofficial-notice:hover {
  color: #f0d1a1;
}

.v8-auth .legal-links a {
  color: rgba(239,232,219,.66);
}

.v8-auth .auth-panel {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 56px);
  background:
    linear-gradient(180deg, rgba(16,19,20,.98), rgba(8,10,10,.99));
  border-left: 1px solid var(--v8-line);
}

.v8-auth .auth-card {
  width: min(430px, 100%);
  border: 1px solid var(--v8-line-strong);
  background: rgba(17,20,21,.92);
  border-radius: 10px;
  box-shadow: var(--v8-shadow);
}

.v8-auth .auth-card-heading h2 {
  font-size: 30px;
  color: var(--v8-ink);
}

.v8-auth .auth-tabs {
  border-bottom-color: var(--v8-line);
}

.v8-auth .auth-tabs button.active {
  color: #f2d6a8;
  border-bottom-color: var(--v8-bronze);
}

.v8-auth .portal-submit {
  background: linear-gradient(180deg, #b56d3e, #754127);
  border-color: #c6834d;
  color: #fff4e2;
}

/* Player home */

.portal-shell {
  max-width: 1480px;
}

.portal-welcome {
  padding: 20px 0 8px;
}

.portal-welcome h1 {
  font-size: clamp(34px, 5vw, 62px);
}

.campaign-home-grid {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.v8-world-card {
  position: relative;
  overflow: hidden;
  min-height: 410px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(210, 166, 101, .3);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(7,9,9,.08), rgba(7,9,9,.9)),
    var(--world-art) center/cover;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}

.v8-world-card::before {
  display: none;
}

.campaign-home-grid::before {
  display: none;
}

.world-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,5,6,.1), rgba(4,5,6,.84) 58%, rgba(4,5,6,.96));
}

.v8-world-card > *:not(.world-card-shade) {
  position: relative;
  z-index: 1;
}

.v8-world-card .campaign-card-identity {
  align-items: start;
}

.v8-world-card .campaign-card-identity span:first-child {
  display: block;
  color: #e7bd79;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.v8-world-card .campaign-card-identity h3 {
  margin-top: 6px;
  font-size: 32px;
  color: #f3eee5;
}

.world-progress {
  margin-top: auto;
  display: grid;
  gap: 9px;
}

.world-progress > strong {
  font-size: 48px;
  line-height: 1;
  color: #f0d49f;
}

.world-facts {
  display: flex;
  gap: 28px;
  margin: 20px 0;
}

.world-facts span {
  display: grid;
}

.world-facts strong {
  font-size: 24px;
  color: #fff;
}

.world-facts small {
  color: #b9b8b1;
}

.v8-world-card .compact-field {
  max-width: 280px;
}

.v8-world-card .campaign-card-actions {
  margin-top: 20px;
  align-items: center;
}

/* Adventure Map */

.adventure-map {
  max-width: 1700px;
  margin: 0 auto;
}

.map-masthead {
  min-height: 190px;
  padding: clamp(20px, 3vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  border: 1px solid var(--v8-line);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(8,10,11,.9), rgba(8,10,11,.48), rgba(8,10,11,.88)),
    url("assets/press/map-camp.webp") center 46%/cover no-repeat;
  box-shadow: var(--v8-shadow);
}

.map-kicker {
  color: #d1ac70;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.map-masthead h1 {
  margin: 7px 0 0;
  font-size: clamp(32px, 5vw, 66px);
  color: #f0ece4;
}

.boss-rail {
  display: flex;
  align-items: end;
  gap: clamp(7px, 1vw, 14px);
}

.boss-rail-trophy {
  width: clamp(54px, 5vw, 78px);
  display: grid;
  justify-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: #aaa;
}

.boss-rail-icon {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: .24;
  filter: grayscale(1) brightness(.55);
  transition: .22s ease;
}

.boss-rail-icon img,
.boss-rail-icon svg {
  max-width: 100%;
  max-height: 100%;
}

.boss-rail-trophy.illuminated .boss-rail-icon {
  opacity: 1;
  filter: drop-shadow(0 0 13px var(--trophy-accent));
}

.boss-rail-trophy small {
  font-size: 9px;
  color: #a9aaa5;
}

.act-road {
  position: relative;
  margin-top: 34px;
}

.act-road::before {
  content: "";
  position: absolute;
  top: 58px;
  bottom: 80px;
  left: 25px;
  width: 1px;
  background: linear-gradient(var(--v8-bronze), rgba(208,161,90,.08));
}

.act-section {
  position: relative;
  padding: 0 0 42px 62px;
}

.act-heading {
  margin-bottom: 18px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.act-heading::before {
  content: "";
  position: absolute;
  left: 18px;
  width: 15px;
  height: 15px;
  border: 2px solid #d0a15a;
  border-radius: 50%;
  background: #0d0f10;
  box-shadow: 0 0 0 7px rgba(208,161,90,.08);
}

.act-heading span {
  color: #c69754;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .16em;
}

.act-heading h2 {
  margin: 0;
  font-size: 30px;
  color: #ece5da;
}

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

.act-chapters.single {
  grid-template-columns: minmax(0, 1fr);
}

.map-chapter {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--chapter-accent) 38%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(8,10,11,.24), rgba(8,10,11,.84) 38%, rgba(8,10,11,.98)),
    var(--chapter-art) center/cover no-repeat;
}

.map-chapter::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--chapter-accent) 10%, transparent), transparent 36%);
}

.map-chapter > * {
  position: relative;
  z-index: 1;
}

.map-chapter > header {
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--chapter-accent) 38%, transparent);
}

.map-chapter h3 {
  margin: 0;
  font-size: 28px;
  color: #f3ede3;
}

.chapter-road {
  position: relative;
  display: grid;
  gap: 10px;
  padding-left: 25px;
}

.chapter-road::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: color-mix(in srgb, var(--chapter-accent) 52%, transparent);
}

.map-node {
  position: relative;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(9,11,12,.72);
  color: #d7d2c8;
  text-align: left;
  transition: .18s ease;
}

.map-node::before {
  content: "";
  position: absolute;
  left: -22px;
  width: 18px;
  height: 1px;
  background: color-mix(in srgb, var(--chapter-accent) 52%, transparent);
}

.map-node:hover {
  transform: translateX(3px);
  border-color: color-mix(in srgb, var(--chapter-accent) 52%, transparent);
  background: rgba(18,21,22,.9);
}

.map-node-mark {
  flex: 0 0 22px;
  color: var(--chapter-accent);
  text-align: center;
}

.map-node.locked {
  opacity: .42;
}

.map-node.complete {
  color: #aeb9a3;
  border-color: rgba(138,170,109,.18);
}

.map-node.recommended {
  border-color: color-mix(in srgb, var(--chapter-accent) 72%, transparent);
  box-shadow: inset 3px 0 0 var(--chapter-accent), 0 0 25px color-mix(in srgb, var(--chapter-accent) 12%, transparent);
}

.chapter-side-paths {
  margin: 20px 0 0 46px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255,255,255,.1);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.chapter-side-paths .map-node {
  min-height: 42px;
  font-size: 13px;
}

.chapter-side-paths .map-node::before {
  display: none;
}

/* Journal */

.journal-shell {
  max-width: 1680px;
  margin: 0 auto;
}

.journal-header {
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
}

.journal-header h1 {
  margin: 0;
  font-size: 46px;
}

.journal-header span {
  color: var(--v8-muted);
  font-size: 13px;
}

.journal-filters {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--v8-line);
  border-radius: 8px;
  background: #0d1011;
}

.journal-filters button {
  padding: 8px 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #8f918e;
}

.journal-filters button.active {
  background: rgba(181, 109, 62, .22);
  color: #f0d5aa;
}

.journal-book {
  min-height: 690px;
  display: grid;
  grid-template-columns: 178px 290px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(180, 139, 83, .3);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.018), transparent 12%, transparent 88%, rgba(0,0,0,.12)),
    #171512;
  box-shadow: var(--v8-shadow);
}

.journal-chapters {
  padding: 24px 15px;
  border-right: 1px solid rgba(184, 145, 91, .24);
  background:
    linear-gradient(180deg, rgba(43,31,22,.92), rgba(20,17,14,.98));
}

.journal-chapters > span,
.journal-act small {
  display: block;
  margin: 0 8px 8px;
  color: #a88a61;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.journal-act {
  margin-bottom: 20px;
}

.journal-chapters button {
  width: 100%;
  margin: 2px 0;
  padding: 9px 10px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: #b8b0a4;
  text-align: left;
}

.journal-chapters button:hover,
.journal-chapters button.active {
  color: #f0e1c9;
  border-left-color: var(--v8-bronze);
  background: rgba(208,161,90,.08);
}

.journal-index {
  padding: 25px 16px;
  border-right: 1px solid rgba(184, 145, 91, .2);
  background:
    linear-gradient(180deg, rgba(238,222,192,.035), transparent),
    #12110f;
}

.journal-index h2 {
  margin: 0 8px 18px;
  color: #dfcba8;
  font-size: 24px;
}

.journal-quest-list {
  display: grid;
  gap: 4px;
}

.journal-quest {
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #c3beb4;
  text-align: left;
}

.journal-quest small {
  color: #767873;
  font-size: 10px;
}

.journal-quest:hover,
.journal-quest.active {
  background: rgba(214, 180, 124, .07);
  border-color: rgba(214, 180, 124, .18);
  color: #f1eadf;
}

.journal-quest.complete {
  color: #9eb092;
}

.journal-quest.locked {
  opacity: .46;
}

.journal-page {
  position: relative;
  padding: clamp(28px, 4vw, 58px);
  background:
    radial-gradient(circle at 18% 20%, rgba(255,245,216,.045), transparent 34%),
    linear-gradient(90deg, rgba(54,39,24,.11), transparent 6%),
    #191714;
}

.journal-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(218,190,140,.08) 29px);
}

.journal-page > * {
  position: relative;
}

.quest-page-header {
  padding-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  border-bottom: 1px solid rgba(204,170,116,.25);
}

.quest-page-header span {
  color: #a4865e;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 10px;
}

.quest-page-header h1 {
  margin: 7px 0 0;
  font-size: clamp(30px, 4vw, 48px);
  color: #efe5d4;
}

.quest-state {
  padding: 7px 10px;
  border: 1px solid rgba(208,161,90,.24);
  border-radius: 999px;
  color: #d9b77d;
  font-size: 11px;
}

.quest-state.complete {
  color: #aaca9c;
  border-color: rgba(130,170,112,.28);
}

.quest-state.locked {
  color: #8e8f8c;
}

.quest-requirements,
.quest-recommended {
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #b4905d;
}

.quest-requirements button,
.quest-recommended button,
.unlock-section button {
  border: 1px solid rgba(208,161,90,.22);
  border-radius: 999px;
  background: rgba(208,161,90,.07);
  color: #d8c29c;
  padding: 6px 9px;
  font-size: 11px;
}

.quest-page-section {
  margin-top: 30px;
}

.quest-page-section h2 {
  margin: 0 0 13px;
  color: #cda66e;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.objective-list {
  display: grid;
  gap: 2px;
}

.objective-row {
  position: relative;
  min-height: 52px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px 8px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  color: #d8d2c8;
}

.objective-row input {
  position: absolute;
  opacity: 0;
}

.objective-box {
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border: 1px solid #8c7656;
  border-radius: 3px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.18);
}

.objective-row.complete .objective-box::after {
  content: "✓";
  color: #b9cf9b;
  font-weight: 900;
}

.objective-row.complete .objective-copy {
  color: #88927f;
  text-decoration: line-through;
  text-decoration-color: rgba(136,146,127,.42);
}

.objective-row.disabled {
  opacity: .45;
}

.objective-copy {
  display: grid;
  gap: 4px;
  line-height: 1.45;
}

.objective-copy small {
  color: #777b76;
  font-size: 9px;
  letter-spacing: .1em;
}

.optional-section {
  padding-top: 4px;
}

.optional-section .objective-box {
  border-radius: 50%;
}

.clan-work-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.clan-work-section li {
  padding: 11px 13px;
  border-left: 2px solid rgba(107, 145, 151, .45);
  background: rgba(75, 110, 116, .06);
  color: #b9c4c1;
}

.unlock-section > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Clan Hall */

.clan-hall {
  max-width: 1580px;
  margin: 0 auto;
}

.clan-hall-header {
  min-height: 130px;
  padding: 28px 30px 0;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  border: 1px solid var(--v8-line);
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(90deg, rgba(9,11,12,.92), rgba(9,11,12,.52)),
    url("assets/press/clan-hearth.webp") center 44%/cover;
}

.clan-hall-header h1 {
  margin: 0;
  font-size: 44px;
}

.clan-hall-header span {
  color: #bd9d6b;
}

.clan-tabs {
  display: flex;
  gap: 2px;
}

.clan-tabs button {
  padding: 12px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: rgba(8,10,10,.6);
  color: #989a96;
}

.clan-tabs button.active {
  color: #ecd7b6;
  border-bottom-color: var(--v8-bronze);
}

.war-table {
  padding: 26px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  border: 1px solid var(--v8-line);
  border-top: 0;
  background:
    linear-gradient(rgba(8,10,11,.93), rgba(8,10,11,.97)),
    var(--war-art) center/cover;
}

.work-column {
  min-width: 0;
}

.work-column > header {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(208,161,90,.25);
  color: #d2ac73;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 11px;
}

.work-card {
  width: 100%;
  margin-bottom: 7px;
  padding: 12px;
  display: grid;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 6px;
  background: rgba(19,22,23,.82);
  color: #d0cec8;
  text-align: left;
}

.work-card:hover {
  border-color: rgba(208,161,90,.34);
  transform: translateY(-1px);
}

.work-card small {
  color: #7c807d;
}

.work-empty {
  padding: 18px 12px;
  color: #666;
}

.saga-ledger {
  min-height: 580px;
  padding: 32px clamp(18px, 6vw, 90px);
  border: 1px solid var(--v8-line);
  border-top: 0;
  background:
    linear-gradient(90deg, rgba(95,64,32,.08), transparent 12%),
    #12110f;
}

.saga-entry {
  max-width: 930px;
  margin: 0 auto;
  padding: 18px 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 15px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.saga-mark {
  color: #c89a55;
  font-size: 18px;
}

.saga-entry p {
  margin: 0;
  color: #ddd5c8;
  font-size: 16px;
}

.saga-entry small {
  color: #7e817c;
}

.saga-empty {
  min-height: 420px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: #77756f;
  text-align: center;
}

.saga-empty span {
  font-size: 44px;
  color: #8f7046;
}

.hearth-view {
  min-height: 590px;
  padding: clamp(26px, 5vw, 70px);
  border: 1px solid var(--v8-line);
  border-top: 0;
  background:
    linear-gradient(90deg, rgba(8,10,11,.94), rgba(8,10,11,.62)),
    var(--hearth-art) center/cover;
}

.hearth-members {
  max-width: 760px;
  display: grid;
  gap: 9px;
}

.hearth-member {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(10,12,12,.76);
}

.hearth-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(208,161,90,.36);
  border-radius: 50%;
  color: #e0bb7c;
}

.hearth-member div {
  display: grid;
}

.hearth-member small,
.hearth-member > span:last-child {
  color: #858985;
  font-size: 11px;
  text-transform: capitalize;
}

.hearth-view > .button {
  margin-top: 22px;
}

.hearth-loading {
  color: #a8a7a0;
}

.stewardship {
  min-height: 520px;
  padding: 34px;
  border: 1px solid var(--v8-line);
  border-top: 0;
  background: #0e1011;
}

.stewardship-actions {
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.steward-card {
  min-height: 120px;
  padding: 22px;
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: #141719;
  color: #d9d5cc;
  text-align: left;
}

.steward-card span {
  color: #8c908c;
}

.steward-card.danger {
  border-color: rgba(166,72,55,.28);
}

/* Trophy Hall */

.trophy-carousel {
  max-width: 1600px;
  margin: 0 auto;
  overflow: hidden;
}

.trophy-carousel > header h1 {
  margin: 0 0 20px;
  font-size: 46px;
}

.trophy-stage {
  min-height: 690px;
  display: grid;
  grid-template-columns: .18fr 1fr .18fr;
  align-items: stretch;
  gap: 18px;
}

.trophy-chamber {
  min-width: 0;
  padding: clamp(24px, 4vw, 58px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--biome-accent) 35%, transparent);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--biome-accent) 13%, transparent), transparent 34%),
    linear-gradient(180deg, #161a19, #0b0e0d);
  box-shadow: inset 0 0 100px rgba(0,0,0,.48), var(--v8-shadow);
}

.trophy-chamber.previous,
.trophy-chamber.next {
  padding: 0;
  opacity: .36;
  filter: saturate(.65);
}

.trophy-chamber.previous > *,
.trophy-chamber.next > * {
  display: none;
}

.trophy-chamber.previous {
  background:
    linear-gradient(90deg, rgba(8,10,10,.2), rgba(8,10,10,.92)),
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--biome-accent) 20%, transparent), transparent 40%),
    #111413;
}

.trophy-chamber.next {
  background:
    linear-gradient(-90deg, rgba(8,10,10,.2), rgba(8,10,10,.92)),
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--biome-accent) 20%, transparent), transparent 40%),
    #111413;
}

.trophy-chamber.current > header {
  margin-bottom: 25px;
  text-align: center;
}

.trophy-chamber h2 {
  margin: 0;
  font-size: clamp(32px, 5vw, 58px);
  color: #efe9df;
}

.chamber-bosses {
  min-height: 245px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hall-boss,
.hall-relic {
  border: 0;
  background: transparent;
  color: #d9d5cc;
}

.hall-boss {
  width: min(300px, 70%);
  display: grid;
  justify-items: center;
  gap: 11px;
}

.hall-boss > span {
  width: min(230px, 100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.hall-boss img,
.hall-boss svg {
  max-width: 100%;
  max-height: 100%;
}

.hall-boss.unclaimed > span,
.hall-relic.unclaimed > span {
  opacity: .13;
  filter: grayscale(1) brightness(.45);
}

.hall-boss.claimed > span {
  filter: drop-shadow(0 0 24px var(--biome-accent));
}

.hall-boss strong {
  font-size: 24px;
}

.chamber-relics {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 16px;
}

.hall-relic {
  min-height: 150px;
  padding: 12px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  background: rgba(6,8,8,.33);
}

.hall-relic > span {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
}

.hall-relic img,
.hall-relic svg {
  max-width: 100%;
  max-height: 100%;
}

.hall-relic.claimed {
  border-color: color-mix(in srgb, var(--biome-accent) 34%, transparent);
}

.hall-relic strong {
  font-size: 12px;
  text-align: center;
}

.trophy-controls {
  margin-top: 15px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 10px;
}

.trophy-controls button {
  height: 48px;
  border: 1px solid var(--v8-line);
  border-radius: 7px;
  background: #121516;
  color: #d1af79;
  font-size: 22px;
}

.trophy-controls button:disabled {
  opacity: .2;
}

.trophy-controls span {
  text-align: center;
  color: #9e9f9b;
}

/* Forecast */

.world-forecast {
  max-width: 1450px;
  margin: 0 auto;
}

.world-forecast > header {
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.world-forecast h1 {
  margin: 0;
  font-size: 46px;
}

.world-forecast header span {
  color: #9ca3a2;
}

#forecastContent {
  min-height: 560px;
}

.forecast-loading,
.forecast-unavailable {
  display: grid;
  place-items: center;
  min-height: 460px;
  border: 1px solid var(--v8-line);
  border-radius: 12px;
  background: #101314;
  color: #9fa4a3;
}

.forecast-now {
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr minmax(180px, .5fr);
  gap: 16px;
  border: 1px solid rgba(124, 161, 171, .26);
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 10%, rgba(71, 120, 132, .17), transparent 36%),
    #101415;
}

.forecast-clock,
.forecast-compass {
  min-height: 170px;
  padding: 24px;
  display: grid;
  align-content: center;
  justify-items: center;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 9px;
  background: rgba(5,7,8,.38);
}

.forecast-clock strong {
  font-size: 66px;
  line-height: 1;
}

.forecast-clock span {
  color: #b8c4c5;
}

.forecast-compass i {
  display: block;
  font-size: 46px;
  color: #d6b96c;
  transform: rotate(var(--wind-angle));
  font-style: normal;
}

.forecast-compass strong {
  font-size: 26px;
}

.forecast-compass span {
  color: #aeb9b9;
}

.forecast-biome-select {
  align-self: center;
}

.forecast-biome-select span {
  display: block;
  margin-bottom: 7px;
  color: #a5aeae;
  font-size: 11px;
}

.forecast-biome-select select {
  width: 100%;
}

.forecast-timeline {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.forecast-period {
  min-height: 130px;
  padding: 16px;
  display: grid;
  align-content: space-between;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: #111516;
}

.forecast-period time,
.forecast-period div {
  display: grid;
  gap: 4px;
}

.forecast-period span {
  color: #929b9a;
  font-size: 11px;
}

/* Boss ceremony: only the door leaves move. */

.boss-ceremony {
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow: hidden;
  background: rgba(2,4,4,.12);
  perspective: 1800px;
  perspective-origin: 50% 50%;
  isolation: isolate;
}

.boss-ceremony-door {
  position: absolute;
  z-index: 4;
  top: -2%;
  bottom: -2%;
  width: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform .78s cubic-bezier(.2,.76,.18,1);
  filter: drop-shadow(0 0 38px rgba(0,0,0,.85));
}

.boss-ceremony-door.left {
  left: 0;
  background-image: url("assets/flametal-door-left.png");
  background-position: left center;
  transform-origin: left center;
  transform: rotateY(91deg);
}

.boss-ceremony-door.right {
  right: 0;
  background-image: url("assets/flametal-door-right.png");
  background-position: right center;
  transform-origin: right center;
  transform: rotateY(-91deg);
}

.boss-ceremony.closing .boss-ceremony-door,
.boss-ceremony.sealed .boss-ceremony-door,
.boss-ceremony.reveal .boss-ceremony-door,
.boss-ceremony.detonate .boss-ceremony-door {
  transform: rotateY(0deg);
}

.boss-ceremony.opening .boss-ceremony-door.left {
  transform: rotateY(91deg);
}

.boss-ceremony.opening .boss-ceremony-door.right {
  transform: rotateY(-91deg);
}

.boss-ceremony-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  opacity: 0;
  background: radial-gradient(circle, rgba(18,24,24,.1), rgba(2,3,3,.78));
  transition: opacity .35s ease;
}

.boss-ceremony.reveal .boss-ceremony-stage,
.boss-ceremony.detonate .boss-ceremony-stage,
.boss-ceremony.opening .boss-ceremony-stage {
  opacity: 1;
}

.boss-ceremony-stage > span {
  color: #d9b472;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12px;
}

.boss-ceremony-stage h2 {
  margin: 0;
  color: #fff0d5;
  font-size: clamp(38px, 7vw, 88px);
}

.boss-ceremony-trophy {
  width: min(280px, 38vw);
  height: min(280px, 38vw);
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 34px var(--trophy-accent));
}

.boss-ceremony-trophy img,
.boss-ceremony-trophy svg {
  max-width: 100%;
  max-height: 100%;
}

.boss-ceremony-particles {
  position: absolute;
  left: 50%;
  top: 50%;
}

.boss-ceremony-particles i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--trophy-accent);
  opacity: 0;
}

.boss-ceremony.detonate .boss-ceremony-particles i {
  animation: ceremony-particle .78s ease-out var(--particle-delay) forwards;
}

@keyframes ceremony-particle {
  from { opacity: 1; transform: rotate(var(--particle-angle)) translateX(0); }
  to { opacity: 0; transform: rotate(var(--particle-angle)) translateX(var(--particle-distance)); }
}

/* Search */

.search-results {
  border-color: var(--v8-line);
  background: #111416;
}

.search-results button:hover {
  background: rgba(208,161,90,.08);
}

/* Responsive */

@media (max-width: 1180px) {
  .v8-auth {
    grid-template-columns: 1.05fr minmax(360px, .8fr);
  }

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

  .journal-book {
    grid-template-columns: 150px 250px minmax(0, 1fr);
  }

  .trophy-stage {
    grid-template-columns: .09fr 1fr .09fr;
    gap: 10px;
  }
}

@media (max-width: 920px) {
  .v8-auth {
    display: block;
  }

  .v8-auth .auth-story {
    min-height: 48vh;
    padding: 28px;
  }

  .v8-auth .auth-panel {
    min-height: auto;
    padding: 28px 18px 52px;
    border-left: 0;
    border-top: 1px solid var(--v8-line);
  }

  .auth-public-footer {
    margin-top: auto;
  }

  .valheim-logo {
    width: min(430px, 84vw);
  }

  .act-chapters {
    grid-template-columns: 1fr;
  }

  .journal-book {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .journal-index {
    border-right: 0;
  }

  .journal-page {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(184,145,91,.2);
  }

  .forecast-now {
    grid-template-columns: 1fr 1fr;
  }

  .forecast-biome-select {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .app-view {
    padding: 14px;
  }

  .world-status {
    min-width: 0;
    max-width: 44px;
    padding: 8px 10px;
  }

  .world-status > span:last-child {
    display: none;
  }

  .search-box {
    display: none;
  }

  .map-masthead {
    min-height: 260px;
    padding: 20px;
    display: grid;
    align-content: space-between;
  }

  .boss-rail {
    width: 100%;
    justify-content: space-between;
  }

  .boss-rail-trophy {
    width: 42px;
  }

  .boss-rail-trophy small {
    display: none;
  }

  .act-road::before,
  .act-heading::before {
    display: none;
  }

  .act-section {
    padding-left: 0;
  }

  .act-heading {
    display: block;
  }

  .map-chapter {
    min-height: 0;
    padding: 18px;
  }

  .chapter-side-paths {
    margin-left: 0;
    grid-template-columns: 1fr;
  }

  .journal-header {
    display: grid;
    align-items: start;
  }

  .journal-filters {
    overflow-x: auto;
  }

  .journal-book {
    display: block;
    min-height: 0;
  }

  .journal-chapters {
    padding: 12px;
    display: flex;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(184,145,91,.24);
  }

  .journal-chapters > span {
    display: none;
  }

  .journal-act {
    display: flex;
    flex: 0 0 auto;
    margin: 0 12px 0 0;
  }

  .journal-act small {
    display: none;
  }

  .journal-chapters button {
    width: auto;
    white-space: nowrap;
    border-left: 0;
    border-bottom: 2px solid transparent;
  }

  .journal-chapters button.active {
    border-bottom-color: var(--v8-bronze);
  }

  .journal-index {
    padding: 18px 12px;
  }

  .journal-page {
    padding: 24px 18px;
  }

  .clan-hall-header {
    min-height: 190px;
    padding: 20px 16px 0;
    display: grid;
  }

  .clan-tabs {
    overflow-x: auto;
  }

  .clan-tabs button {
    white-space: nowrap;
  }

  .war-table {
    padding: 14px;
    grid-template-columns: 1fr;
  }

  .stewardship-actions {
    grid-template-columns: 1fr;
  }

  .trophy-stage {
    display: block;
    min-height: 0;
  }

  .trophy-chamber.previous,
  .trophy-chamber.next,
  .trophy-chamber-spacer {
    display: none;
  }

  .trophy-chamber {
    min-height: 610px;
    padding: 24px 15px;
  }

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

  .forecast-now {
    grid-template-columns: 1fr;
  }

  .forecast-biome-select {
    grid-column: auto;
  }

  .forecast-clock strong {
    font-size: 52px;
  }

  .boss-ceremony-door {
    width: 51%;
    background-size: 100% auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-node,
  .work-card,
  .boss-ceremony-door {
    transition: none !important;
  }

  .boss-ceremony-particles {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   Version 8.0.4 refinements
   -------------------------------------------------------------------------- */

/* Sign-in: the form floats on the page instead of sitting inside a second
   full-height gradient panel. */
.v8-auth .auth-panel {
  background: transparent;
  border-left: 0;
}

/* Campaign selection ribbon. */
.portal-welcome {
  align-items: center;
  padding: 28px 0 18px;
  border-bottom: 1px solid rgba(208,161,90,.18);
}
.portal-welcome h1 {
  margin: 0;
  font-size: clamp(34px, 4.5vw, 58px);
}
.new-campaign-button {
  min-height: 52px;
  padding: 0 24px;
  font-size: 15px;
}
.portal-main-column > .campaign-home-grid {
  margin-top: 18px;
}

/* Map: section titles stand on their own without act labels or timeline dots. */
.act-road::before,
.act-heading::before {
  display: none;
}
.act-section {
  padding-left: 0;
}
.act-heading {
  margin: 4px 0 20px;
}
.act-heading h2 {
  font-size: clamp(32px, 3.2vw, 42px);
  color: #d7aa64;
  letter-spacing: .015em;
}
.boss-rail {
  gap: clamp(10px, 1.25vw, 18px);
}
.boss-rail-trophy {
  width: clamp(70px, 6vw, 98px);
  gap: 7px;
}
.boss-rail-trophy small {
  font-size: clamp(10px, .8vw, 12px);
  color: #c2c1bb;
}

/* Progress: the selected biome supplies the atmosphere while the text remains
   consistently readable. */
.progress-shell {
  --progress-accent: #c38b4e;
  --progress-art: url("assets/press/map-camp.webp");
}
.progress-shell .journal-header h1 {
  color: #f1ece4;
}
.progress-shell .journal-header span {
  color: color-mix(in srgb, var(--progress-accent) 58%, #d7d4cc);
}
.progress-shell .journal-filters {
  border-color: color-mix(in srgb, var(--progress-accent) 24%, transparent);
  background: rgba(9,12,12,.82);
}
.progress-shell .journal-filters button.active {
  background: color-mix(in srgb, var(--progress-accent) 21%, transparent);
  color: color-mix(in srgb, var(--progress-accent) 55%, #fff3de);
}
.progress-shell .journal-book {
  position: relative;
  isolation: isolate;
  border-color: color-mix(in srgb, var(--progress-accent) 42%, transparent);
  background: #0b0e0e;
}
.progress-shell .journal-book::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,9,10,.94) 0 29%, rgba(7,9,10,.72) 48%, rgba(7,9,10,.88) 100%),
    linear-gradient(180deg, rgba(5,7,8,.12), rgba(5,7,8,.88)),
    var(--progress-art) center/cover no-repeat;
  filter: saturate(1.08);
}
.progress-shell .journal-book > * {
  position: relative;
  z-index: 1;
}
.progress-shell .journal-chapters {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--progress-accent) 13%, rgba(18,20,20,.9)), rgba(9,11,12,.96));
  border-right-color: color-mix(in srgb, var(--progress-accent) 26%, transparent);
}
.progress-shell .journal-act small {
  color: color-mix(in srgb, var(--progress-accent) 62%, #c9c5bb);
}
.progress-shell .journal-chapters button:hover,
.progress-shell .journal-chapters button.active {
  border-left-color: var(--progress-accent);
  background: color-mix(in srgb, var(--progress-accent) 13%, transparent);
  color: #f3eee5;
}
.progress-shell .journal-index {
  background: linear-gradient(180deg, rgba(13,17,17,.82), rgba(8,11,11,.93));
  border-right-color: color-mix(in srgb, var(--progress-accent) 23%, transparent);
}
.progress-shell .journal-index h2 {
  color: color-mix(in srgb, var(--progress-accent) 58%, #f2e7d4);
}
.progress-shell .journal-quest:hover,
.progress-shell .journal-quest.active {
  border-color: color-mix(in srgb, var(--progress-accent) 30%, transparent);
  background: color-mix(in srgb, var(--progress-accent) 13%, rgba(12,15,15,.75));
}
.progress-shell .journal-page {
  isolation: isolate;
  overflow: hidden;
  background: rgba(10,13,13,.78);
}
.progress-shell .journal-page::before {
  z-index: 0;
  opacity: 1;
  background:
    radial-gradient(circle at 78% 8%, color-mix(in srgb, var(--progress-accent) 23%, transparent), transparent 30%),
    linear-gradient(180deg, rgba(7,9,10,.3), rgba(7,9,10,.92) 280px),
    var(--progress-art) center top/cover no-repeat;
  mask-image: linear-gradient(180deg, #000 0 37%, transparent 77%);
}
.progress-shell .journal-page::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: repeating-linear-gradient(0deg, transparent 0 28px, color-mix(in srgb, var(--progress-accent) 23%, transparent) 29px);
}
.progress-shell .journal-page > * {
  position: relative;
  z-index: 2;
}
.progress-shell .quest-page-header {
  border-bottom-color: color-mix(in srgb, var(--progress-accent) 36%, transparent);
}
.progress-shell .quest-page-header span,
.progress-shell .quest-page-section h2,
.progress-shell .quest-requirements,
.progress-shell .quest-recommended {
  color: color-mix(in srgb, var(--progress-accent) 64%, #e4d8c4);
}
.progress-shell .quest-requirements button,
.progress-shell .quest-recommended button,
.progress-shell .unlock-section button {
  border-color: color-mix(in srgb, var(--progress-accent) 30%, transparent);
  background: color-mix(in srgb, var(--progress-accent) 11%, transparent);
}

/* Clan Hall: remove the repeated/cropped artwork from the common header and
   from Hearth's roster surface. */
.clan-hall-header {
  background:
    radial-gradient(circle at 18% 10%, rgba(208,161,90,.1), transparent 34%),
    linear-gradient(90deg, #171819, #0b0e0f);
}
.hearth-view {
  background:
    radial-gradient(circle at 20% 0, rgba(208,161,90,.09), transparent 38%),
    linear-gradient(145deg, #111516, #090c0d);
}

/* Trophy Hall: an endless, direct-manipulation rolodex with momentum. */
.trophy-carousel {
  overflow: visible;
}
.trophy-rolodex {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  perspective: 1550px;
  perspective-origin: 50% 48%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  outline: none;
  border-radius: 16px;
}
.trophy-rolodex:focus-visible {
  box-shadow: 0 0 0 2px rgba(208,161,90,.55);
}
.trophy-rolodex.dragging {
  cursor: grabbing;
}
.trophy-orbit {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.trophy-chamber {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1050px, 72vw);
  min-height: 650px;
  max-height: 680px;
  overflow: hidden auto;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: filter .18s ease, border-color .18s ease;
  pointer-events: none;
  filter: saturate(.66) brightness(.7);
}
.trophy-chamber.current {
  pointer-events: auto;
  filter: none;
  box-shadow: inset 0 0 100px rgba(0,0,0,.48), 0 28px 80px rgba(0,0,0,.58);
}
.trophy-chamber.nearby {
  filter: saturate(.76) brightness(.76);
}
.trophy-chamber > header {
  margin-bottom: 25px;
  text-align: center;
}
.trophy-chamber[aria-hidden="true"] > * {
  opacity: .48;
}
.trophy-chamber.current > * {
  opacity: 1;
}
.trophy-stage,
.trophy-controls,
.trophy-chamber-spacer {
  display: none !important;
}

/* Forsaken reveal: no gates. It waits for the matching chamber to settle, then
   lets the trophy and particles carry the moment. */
.boss-ceremony {
  background: radial-gradient(circle, rgba(10,15,16,.28), rgba(2,4,4,.76));
  backdrop-filter: blur(2px);
}
.boss-ceremony-stage {
  z-index: 2;
  opacity: 0;
  transform: scale(.84);
  background: transparent;
  transition: opacity .32s ease, transform .55s cubic-bezier(.2,.8,.18,1), filter .35s ease;
}
.boss-ceremony.reveal .boss-ceremony-stage,
.boss-ceremony.detonate .boss-ceremony-stage {
  opacity: 1;
  transform: scale(1);
}
.boss-ceremony.detonate .boss-ceremony-trophy {
  animation: ceremony-trophy-pulse .72s cubic-bezier(.16,.82,.25,1);
}
.boss-ceremony.departing {
  opacity: 0;
  transition: opacity .4s ease;
}
.boss-ceremony-door {
  display: none !important;
}
@keyframes ceremony-trophy-pulse {
  0% { transform: scale(.82); filter: brightness(.7); }
  58% { transform: scale(1.13); filter: brightness(1.35); }
  100% { transform: scale(1); filter: brightness(1); }
}

@media (max-width: 900px) {
  .new-campaign-button { width: 100%; }
  .trophy-rolodex { min-height: 650px; }
  .trophy-chamber { width: 84vw; min-height: 590px; max-height: 620px; }
}

@media (prefers-reduced-motion: reduce) {
  .trophy-chamber { transition: none; }
  .boss-ceremony-stage,
  .boss-ceremony { transition-duration: .01ms !important; }
}


/* 8.0.4: compact destructive confirmation without typed campaign-name input. */
#resetProgressDialog {
  width: min(430px, calc(100vw - 28px));
}
#resetProgressDialog .reset-confirmation {
  padding: 22px;
}
#resetProgressDialog .dialog-copy {
  margin: 18px 0 6px;
  color: #eee8dc;
  font-size: 16px;
}
#resetProgressDialog .dialog-actions {
  margin-top: 24px;
}
#resetProgressDialog .dialog-actions .button {
  min-width: 92px;
}

/* 8.0.4 desktop fit: keep the full application frame usable at browser zoom
   100% on common laptop and 1080p-height displays. Long campaign maps still
   scroll naturally, while Progress and Trophy Hall fit their working surface
   inside the viewport. */
@media (min-width: 1000px) and (max-height: 1100px) {
  :root { --sidebar: 232px; }
  .sidebar { padding: 17px 13px; }
  .brand { padding: 3px 6px 17px; }
  .brand-rune { width: 39px; height: 39px; }
  .nav-link { padding: 9px 10px; }
  .sync-card { margin-top: 10px; padding: 9px; }
  .topbar { height: 64px; padding: 0 20px; }
  .app-view { padding: 18px 22px 26px; }

  .portal-welcome { padding-top: 14px; }
  .portal-welcome h1 { font-size: clamp(32px, 4vw, 50px); }
  .v8-world-card { min-height: 360px; padding: 22px; }
  .v8-world-card .campaign-card-identity h3 { font-size: 28px; }
  .world-progress > strong { font-size: 42px; }
  .world-facts { margin: 14px 0; }

  .map-masthead { min-height: 150px; padding: 22px; }
  .map-masthead h1 { font-size: clamp(30px, 4vw, 52px); }
  .boss-rail { gap: clamp(8px, 1vw, 13px); }
  .boss-rail-trophy { width: clamp(58px, 4.7vw, 78px); }
  .boss-rail-trophy small { font-size: 10px; }
  .act-road { margin-top: 24px; }
  .act-section { padding-bottom: 28px; }
  .act-heading { margin-bottom: 14px; }
  .act-heading h2 { font-size: 32px; }
  .act-chapters { gap: 16px; }
  .map-chapter { min-height: 360px; padding: 18px; }
  .map-chapter > header { margin-bottom: 14px; padding-bottom: 9px; }
  .map-chapter h3 { font-size: 24px; }
  .chapter-road { gap: 7px; }
  .map-node { min-height: 42px; padding: 8px 11px; }
  .chapter-side-paths { margin-top: 14px; padding-top: 10px; }

  .journal-header { margin-bottom: 12px; }
  .journal-header h1 { font-size: 38px; }
  .journal-book { height: calc(100vh - 180px); min-height: 540px; }
  .journal-chapters,
  .journal-index,
  .journal-page { min-height: 0; overflow-y: auto; }
  .journal-page { padding: clamp(22px, 2.7vw, 38px); }
  .quest-page-header h1 { font-size: clamp(28px, 3.2vw, 40px); }
  .quest-page-section { margin-top: 22px; }
  .objective-row { min-height: 46px; padding: 10px 8px; }

  .clan-hall-header { min-height: 160px; }

  .trophy-rolodex { height: calc(100vh - 165px); min-height: 560px; }
  .trophy-chamber { height: calc(100% - 40px); min-height: 0; max-height: none; }
}