.imperium-page {
  --imp-gold: #d5aa54;
  --imp-gold-pale: #efdbac;
  --imp-bone: #eee4cf;
  --imp-ash: #a79a87;
  --imp-night: #0d0a07;
  --imp-night-soft: #17110c;
  --imp-red: #7f211c;
  color: var(--imp-bone);
  background: var(--imp-night);
  font-family: Georgia, "Times New Roman", serif;
}

.imperium-page::selection {
  color: #16100a;
  background: var(--imp-gold);
}

.imp-nav {
  --imp-nav-h: 96px;
  position: absolute;
  z-index: 50;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: var(--imp-nav-h);
  padding: 0 clamp(24px, 4vw, 70px);
  color: #f1e8d6;
  border-bottom: 1px solid rgba(255,255,255,.13);
}

.imp-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 12px;
  width: max-content;
  color: #f2e8d3;
  font: 600 14px/1 var(--font-display);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
}

.imp-brand small {
  display: block;
  margin-bottom: 4px;
  color: var(--imp-gold);
  font: 700 7px/1 Arial, sans-serif;
  letter-spacing: .35em;
}

.imp-brand-sigil {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: cover;
  border: 1px solid rgba(239,207,132,.58);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.24);
}

.imp-menu {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.8vw, 46px);
}

.imp-menu a,
.imp-nav-actions > a:first-child {
  position: relative;
  color: rgba(242,232,211,.78);
  font: 700 9px/1 Arial, sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
}

.imp-menu a::after,
.imp-nav-actions > a:first-child::after {
  position: absolute;
  right: 100%;
  bottom: -8px;
  left: 0;
  height: 1px;
  content: "";
  background: var(--imp-gold);
  transition: right .2s ease;
}

.imp-menu a:hover::after,
.imp-nav-actions > a:first-child:hover::after {
  right: 0;
}

.imp-menu-page::before {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 8px;
  background: var(--imp-gold);
  border-radius: 50%;
  content: "";
  vertical-align: 2px;
}

.imp-menu-cta { display: none; }

.imp-nav-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 24px;
}

.imp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 58px;
  padding: 0 26px;
  color: #1c140a;
  background: #d8b164;
  border: 1px solid #dfba69;
  box-shadow: 0 8px 22px rgba(96,56,13,.24);
  font: 800 10px/1 Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.imp-button:hover {
  background: #e2c37f;
  box-shadow: 0 11px 28px rgba(118,73,17,.3);
  transform: translateY(-2px);
}

.imp-button-small {
  min-height: 40px;
  padding: 0 20px;
  font-size: 8px;
}

.imp-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #17120d;
  isolation: isolate;
}

.imp-hero-art,
.imp-hero-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.imp-hero-art {
  z-index: -3;
  object-fit: cover;
  object-position: 55% center;
  opacity: .72;
  /* Viisto sauma MASKINA eikä clip-pathina: clip-path katkaisee kuvan kovaan
     suoraan, joka kulki otsikon kirjainten läpi eikä linjautunut mihinkään.
     Sama kallistus, mutta reuna häivähtää 18 %:n matkalla. */
  -webkit-mask-image: linear-gradient(96deg, transparent 20%, #000 38%);
  mask-image: linear-gradient(96deg, transparent 20%, #000 38%);
  filter: saturate(.58) contrast(.96);
}

.imp-hero-veil {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(8,6,4,.86) 0%, rgba(11,7,4,.62) 32%, rgba(12,8,5,.18) 66%, rgba(8,5,3,.12) 100%),
    linear-gradient(180deg, rgba(6,4,2,.2) 0%, transparent 28%, transparent 68%, rgba(7,5,3,.62) 100%);
}

.imp-hero::after {
  display: none;
}

.imp-hero-copy {
  width: min(760px, 54vw);
  padding: clamp(155px, 18vh, 220px) 0 clamp(190px, 22vh, 260px) clamp(30px, 8vw, 132px);
}

.imp-kicker,
.imp-section-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  color: var(--imp-gold);
  font: 800 9px/1.4 Arial, sans-serif;
  letter-spacing: .27em;
  text-transform: uppercase;
}

.imp-kicker > span {
  width: 48px;
  height: 1px;
  background: var(--imp-gold);
}

.imp-hero h1 {
  max-width: 830px;
  margin: 0;
  color: #f2e9d7;
  font: 500 clamp(48px, 5.3vw, 86px)/.98 var(--font-display);
  letter-spacing: -.045em;
  text-shadow: 0 6px 20px rgba(0,0,0,.3);
  text-transform: uppercase;
}

.imp-hero h1 em {
  color: var(--imp-gold-pale);
  font-weight: 500;
  font-style: normal;
}

.imp-lede {
  max-width: 580px;
  margin: 32px 0 0;
  color: #c5b9a3;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.7;
}

.imp-hero-actions {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 38px;
}

.imp-text-link,
.imp-signin {
  color: #e5d8bf;
  font: 700 9px/1 Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}

.imp-text-link span {
  display: inline-block;
  margin-left: 10px;
  color: var(--imp-gold);
  transition: transform .2s ease;
}

.imp-text-link:hover span {
  transform: translateY(4px);
}

.imp-hero-note {
  max-width: 520px;
  margin: 38px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.16);
  color: #9d917f;
  font-size: 14px;
  line-height: 1.7;
}

.imp-scroll {
  position: absolute;
  bottom: 0;
  left: clamp(30px, 4vw, 70px);
  display: flex;
  align-items: center;
  gap: 18px;
  height: 76px;
  color: #9c8f7d;
  font: 700 8px/1 Arial, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
}

.imp-scroll i {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.27);
  border-radius: 50%;
}

.imp-scroll i::after {
  position: absolute;
  top: 10px;
  left: 15px;
  width: 1px;
  height: 12px;
  content: "";
  background: var(--imp-gold);
}

.imp-manifesto {
  position: relative;
  padding: clamp(110px, 13vw, 210px) clamp(30px, 9vw, 150px);
  background: #0c0907;
}

.imp-rule {
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(18px, 4vw, 68px);
  width: 1px;
  background: linear-gradient(transparent, rgba(213,170,84,.45) 16%, rgba(213,170,84,.12) 84%, transparent);
}

.imp-manifesto-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(60px, 10vw, 170px);
  max-width: 1360px;
  margin: 0 auto;
}

.imp-manifesto h2,
.imp-section-head h2,
.imp-world-intro h2,
.imp-warband h2,
.imp-final h2 {
  margin: 0;
  color: #eee3cf;
  font: 500 clamp(38px, 5vw, 72px)/1.04 var(--font-display);
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.imp-manifesto-copy {
  padding-top: 34px;
  color: #a89b88;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.85;
}

.imp-manifesto-copy > p { margin: 0; }

.imp-manifesto h2 {
  font-size: clamp(30px, 3.1vw, 46px);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: none;
}

.imp-manifesto-aside {
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(213,170,84,.3);
  color: #8d8271;
  font-size: 14px;
  line-height: 1.75;
}

.imp-life {
  padding: clamp(90px, 10vw, 160px) clamp(18px, 4vw, 68px) clamp(100px, 12vw, 190px);
  background: #140f0b;
}

.imp-section-head {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: end;
  gap: 9vw;
  max-width: 1360px;
  margin: 0 auto clamp(52px, 6vw, 90px);
}

.imp-section-head .imp-section-kicker { grid-column: 1 / -1; margin-bottom: -3vw; }

.imp-section-head > p:last-child,
.imp-world-intro > p:last-child {
  max-width: 570px;
  margin: 0 0 .35em;
  color: #9f9382;
  font-size: 16px;
  line-height: 1.8;
}

.imp-life-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.5vw, 24px);
  max-width: 1560px;
  margin: 0 auto;
}

.imp-life-card {
  position: relative;
  grid-column: span 4;
  min-height: clamp(430px, 38vw, 570px);
  overflow: hidden;
  border: 1px solid rgba(213,170,84,.18);
  isolation: isolate;
}

.imp-life-card-wide { grid-column: span 8; }
.imp-life-card-tall { grid-column: span 8; min-height: clamp(500px, 43vw, 650px); }

.imp-life-card::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(to top, rgba(8,6,4,.9) 0%, rgba(8,6,4,.4) 48%, rgba(8,6,4,.03) 80%);
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow .3s ease;
}

.imp-life-card:hover::after { box-shadow: inset 0 0 0 1px rgba(213,170,84,.64); }

.imp-life-card > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1), filter .8s ease;
}

.imp-life-card:hover > img { transform: scale(1.045); }

.imp-life-card > div {
  position: absolute;
  right: clamp(24px, 3vw, 42px);
  bottom: clamp(28px, 4vw, 55px);
  left: clamp(24px, 3vw, 42px);
}

.imp-life-card div > span {
  margin: 0 0 13px;
  color: var(--imp-gold);
  font: 700 8px/1 Arial, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.imp-life-card h3 {
  max-width: 700px;
  margin: 12px 0 14px;
  color: #f0e6d2;
  font: 500 clamp(25px, 2.4vw, 39px)/1.06 var(--font-display);
  text-transform: uppercase;
}

.imp-life-card p {
  max-width: 650px;
  margin: 0;
  color: #a89b88;
  font-size: 14px;
  line-height: 1.7;
}

.imp-life-card a {
  display: inline-block;
  margin-top: 20px;
  padding-bottom: 5px;
  color: #ead6a9;
  border-bottom: 1px solid #94774d;
  font: 750 8px/1 Arial, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
}

.imp-life-card a span { margin-left: 8px; color: var(--imp-gold); }

.imp-record {
  display: flex;
  grid-column: span 12;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(330px, 26vw, 420px);
  padding: clamp(38px, 5vw, 76px);
  background: #100c08;
  border: 1px solid rgba(213,170,84,.26);
}

.imp-record > img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  opacity: .85;
  filter: sepia(.5) saturate(.85);
}

.imp-record .imp-section-kicker { margin: 26px 0 0; }

.imp-record h3 {
  max-width: 700px;
  margin: 14px 0 0;
  color: #eee3cf;
  font: 500 clamp(26px, 2.6vw, 40px)/1.12 var(--font-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.imp-record dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
  margin: clamp(30px, 3.5vw, 52px) 0 0;
  padding-top: clamp(24px, 2.6vw, 38px);
  border-top: 1px solid rgba(255,255,255,.12);
}

.imp-record dt {
  color: #dbcfb9;
  font: 600 14px/1.45 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.imp-record dd {
  margin: 10px 0 0;
  color: #918576;
  font-size: 14px;
  line-height: 1.7;
}

.imp-world {
  padding: clamp(110px, 12vw, 190px) 0;
  overflow: hidden;
  background: #090705;
}

.imp-world-intro {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: end;
  gap: 9vw;
  width: min(1360px, calc(100% - 60px));
  margin: 0 auto clamp(58px, 7vw, 105px);
}

.imp-world-intro .imp-section-kicker { grid-column: 1 / -1; margin-bottom: -3vw; }

/* The same parchment map the game ships, kept bright and legible on the night page. */
.imp-map {
  max-width: 1180px;
  margin: clamp(56px, 7vw, 104px) auto clamp(60px, 8vw, 120px);
  padding: 0 clamp(18px, 4vw, 68px);
}

.imp-map-frame {
  position: relative;
  padding: clamp(10px, 1.2vw, 18px);
  background: #d8c197;
  border: 1px solid rgba(117,91,48,.48);
  box-shadow: 0 20px 45px rgba(0,0,0,.28);
}

.imp-map-frame > img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(.9) brightness(1.08) contrast(.96) sepia(.03);
}

/* Keep the original parchment legible; the frame carries the separation. */
.imp-map-frame::after {
  position: absolute;
  inset: clamp(10px, 1.2vw, 18px);
  content: '';
  pointer-events: none;
  background: rgba(255,248,225,.035);
}

.imp-pin {
  position: absolute;
  z-index: 1;
  display: grid;
  grid-template-columns: 14px auto;
  grid-template-rows: 1fr 1fr;
  gap: 0 8px;
  padding: 7px 11px 7px 8px;
  color: #f2e8d3;
  background: rgba(12,9,6,.86);
  border: 1px solid rgba(213,170,84,.5);
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
}

.imp-pin i {
  grid-row: 1 / 3;
  align-self: center;
  width: 10px;
  height: 10px;
  background: var(--imp-gold);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(213,170,84,.22);
}

.imp-pin b { align-self: end; font: 600 10px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.imp-pin small { align-self: start; margin-top: 4px; color: #9d917f; font: 700 7px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }

.imp-pin-latium { top: 43%; left: 44%; }
.imp-pin-britannia { top: 20%; left: 12%; }

/* Aegyptus is on the parchment but not in the game: grey pin, no gold. */
.imp-pin-aegyptus { right: 10%; bottom: 16%; border-color: rgba(92,76,54,.5); opacity: 1; }
.imp-pin-aegyptus i { background: #6d6459; box-shadow: none; }

.imp-map figcaption {
  margin-top: 18px;
  max-width: 920px;
  color: #b9ad99;
  font-size: 15px;
  line-height: 1.8;
}

.imp-map figcaption span {
  display: inline-block;
  margin-right: 12px;
  color: var(--imp-gold);
  font: 700 10px/1.4 Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.imp-world-spread {
  position: relative;
  width: min(1500px, 91vw);
  min-height: clamp(520px, 54vw, 790px);
  overflow: hidden;
  isolation: isolate;
}

.imp-world-spread + .imp-world-spread { margin-top: clamp(42px, 7vw, 110px); }
.imp-world-latium { margin-right: auto; }
.imp-world-britannia { margin-left: auto; }

.imp-world-spread > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imp-world-spread::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(90deg, rgba(8,6,4,.92), rgba(8,6,4,.26) 48%, transparent 72%);
}

.imp-world-britannia::after {
  background: linear-gradient(270deg, rgba(5,7,9,.94), rgba(5,7,9,.26) 48%, transparent 72%);
}

.imp-world-label {
  position: absolute;
  top: 50%;
  left: clamp(35px, 8vw, 132px);
  width: min(470px, 42vw);
  transform: translateY(-50%);
}

.imp-world-britannia .imp-world-label { right: clamp(35px, 8vw, 132px); left: auto; }

.imp-world-label > span {
  color: var(--imp-gold);
  font: 750 8px/1 Arial, sans-serif;
  letter-spacing: .23em;
  text-transform: uppercase;
}

.imp-world-label h3 {
  margin: 15px 0 22px;
  color: #f1e7d3;
  font: 500 clamp(48px, 6vw, 90px)/.9 var(--font-display);
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.imp-world-label p {
  max-width: 420px;
  margin: 0;
  color: #c2b7a3;
  font-size: 17px;
  line-height: 1.7;
}

.imp-world-label ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 27px 0 0;
  padding: 19px 0 0;
  color: #908474;
  border-top: 1px solid rgba(255,255,255,.18);
  list-style: none;
  font: 700 8px/1.3 Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.imp-world-label li::before { margin-right: 7px; color: var(--imp-gold); content: "◆"; font-size: 5px; vertical-align: 2px; }

.imp-warband {
  position: relative;
  min-height: 850px;
  overflow: hidden;
  isolation: isolate;
}

.imp-warband > img,
.imp-warband-veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.imp-warband > img { object-fit: cover; object-position: center; }

.imp-warband-veil {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5,5,5,.96) 0%, rgba(7,7,7,.75) 42%, rgba(7,7,7,.16) 70%),
    linear-gradient(to top, rgba(5,5,5,.72), transparent 60%);
}

.imp-warband-copy {
  width: min(650px, 52vw);
  padding: clamp(120px, 11vw, 180px) 0 140px clamp(32px, 9vw, 150px);
}

.imp-warband-copy > p:nth-of-type(2) {
  max-width: 550px;
  margin: 28px 0 0;
  color: #b2a797;
  font-size: 17px;
  line-height: 1.75;
}

.imp-warband-copy .imp-button {
  margin-top: 34px;
}

.imp-button-ghost {
  color: var(--imp-gold-pale);
  background: rgba(18,13,8,.28);
  border-color: rgba(213,170,84,.65);
  box-shadow: none;
}

.imp-raid-list {
  position: absolute;
  right: clamp(25px, 5vw, 85px);
  bottom: 80px;
  width: min(400px, 32vw);
  padding: 10px 0;
  background: rgba(9,9,9,.48);
  border-top: 1px solid rgba(213,170,84,.45);
}

.imp-raid-list span {
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  color: #a99d8d;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font: 700 8px/1 Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.imp-raid-list span:last-child { border-bottom: 0; }
.imp-raid-list b { color: var(--imp-gold); font: 700 8px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }

.imp-chronicle {
  padding: clamp(110px, 12vw, 190px) clamp(28px, 7vw, 120px);
  background:
    linear-gradient(rgba(12,9,6,.84), rgba(12,9,6,.9)),
    url('/assets/scenes/leaderboard.webp') center 25%/cover;
}

/* Elävä rivi otsikon alla: sama muotokieli kuin muullakin selittävällä
   tekstillä, kultainen aloitusviiva erottaa sen palvelimen luvuksi. */
/* Tasaväliset numerot: count-up ei saa hytkyttää lausetta leveyssuunnassa. */
.imp-live-num { font-variant-numeric: tabular-nums; font-weight: 600; color: #cfc2a9; }

.imp-live {
  max-width: 640px;
  margin: 22px 0 0;
  padding-left: 18px;
  color: #a39784;
  border-left: 2px solid rgba(213,170,84,.55);
  font-size: 15px;
  line-height: 1.75;
}

.imp-chronicle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: clamp(18px, 2vw, 30px);
  max-width: 1460px;
  margin: 0 auto;
}

.imp-patches,
.imp-feed,
.imp-leaderboard,
.imp-discord {
  border: 1px solid rgba(213,170,84,.28);
  background: rgba(14,10,7,.83);
  box-shadow: 0 16px 36px rgba(0,0,0,.2);
}

/* Acta Diurna: kronikkarivit patch-listan kielellä. Rivi on grid, jotta
   pitkä teksti rivittyy leiman ja aikaleiman väliin repimättä palstaa. */
.imp-feed { padding: clamp(26px, 3vw, 42px); }

.imp-feed-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.imp-feed-list li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.imp-feed-list li:last-child { border-bottom: 0; }

.imp-feed-kind {
  color: var(--imp-gold);
  font: 700 7.5px/1.5 Arial, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.imp-feed-list p {
  margin: 0;
  color: #c9bda9;
  font-size: 14px;
  line-height: 1.55;
}

.imp-feed-list time {
  color: #7e7365;
  font: 700 8px/1.5 Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.imp-panel-foot {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: #7e7365;
  font-size: 13px;
  line-height: 1.6;
}

.imp-patches { min-height: 640px; padding: clamp(28px, 4vw, 58px); }

.imp-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(213,170,84,.3);
}

.imp-panel-head span,
.imp-discord > div > span {
  color: var(--imp-gold);
  font: 800 8px/1 Arial, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.imp-panel-head h3,
.imp-discord h3 {
  margin: 10px 0 0;
  color: #eadfca;
  font: 500 clamp(23px, 2.2vw, 34px)/1.05 var(--font-display);
  text-transform: uppercase;
}

.imp-panel-head > a {
  flex: none;
  padding-bottom: 4px;
  color: #d8c49a;
  border-bottom: 1px solid #806638;
  font: 750 8px/1 Arial, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
}

.imp-patch-list { display: grid; }

.imp-patch-entry {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: clamp(18px, 3vw, 42px);
  padding: 32px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.imp-patch-entry:last-child { border-bottom: 0; }
.imp-patch-meta { margin: 3px 0 0; color: #776c5d; font: 700 8px/1.65 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.imp-patch-meta b { display: block; color: var(--imp-gold); font-size: 10px; }
.imp-patch-entry h4 { margin: 0 0 10px; color: #dfd3bf; font: 600 clamp(17px, 1.6vw, 23px)/1.2 var(--font-display); text-transform: uppercase; }
.imp-patch-entry p:last-child { display: -webkit-box; overflow: hidden; margin: 0; color: #958978; font-size: 14px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.imp-leaderboard { min-height: 360px; padding: clamp(26px, 3vw, 42px); }
.imp-leaderboard .imp-panel-head { padding-bottom: 20px; }
.imp-leaderboard .imp-panel-head h3 { font-size: clamp(20px, 1.8vw, 28px); }

.imp-leader-list { margin: 0; padding: 0; list-style: none; counter-reset: champions; }
.imp-leader-list li:not(.imp-panel-status) { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; min-height: 68px; border-bottom: 1px solid rgba(255,255,255,.09); counter-increment: champions; }
.imp-leader-list li:not(.imp-panel-status)::before { color: #79633e; content: counter(champions, upper-roman); font: 600 15px/1 var(--font-display); }
.imp-leader-list li:first-child::before { color: var(--imp-gold); }
.imp-leader-name { overflow: hidden; color: #ddd1bc; font: 600 13px/1.2 var(--font-display); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.imp-leader-level { color: #867a69; font: 700 8px/1.35 Arial, sans-serif; letter-spacing: .1em; text-align: right; text-transform: uppercase; }
.imp-leader-level b { display: block; color: #d6b56d; font: 600 18px/1 var(--font-display); }

.imp-discord {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 250px;
  padding: clamp(28px, 3vw, 42px);
  overflow: hidden;
  background: #17130f;
}

.imp-discord > div > img { float: right; width: 48px; height: 48px; margin: -5px 0 16px 24px; opacity: .74; filter: sepia(.3) saturate(.8); }
.imp-discord h3 { font-size: clamp(21px, 2vw, 30px); }
.imp-discord p { max-width: 430px; margin: 15px 0 24px; color: #918575; font-size: 14px; line-height: 1.65; }
.imp-discord .imp-button { align-self: flex-start; min-height: 48px; }

.imp-panel-status { margin: 28px 0 0; color: #7e7365; font: italic 14px/1.6 Georgia, serif; }
.imp-leader-list .imp-panel-status { padding: 24px 0; list-style: none; }

/* FAQ: natiivit details-rivit paneelien kielellä. summaryn oma marker
   piilotetaan ja tilalle piirretään +/− — kolmio näyttäisi vieraalta tällä
   sivulla, ja avotila kuuluu näkyä ilman selainkohtaista oletusta. */
.imp-faq {
  padding: clamp(90px, 10vw, 160px) clamp(18px, 4vw, 68px);
  background:
    radial-gradient(circle at 18% 20%, rgba(117,70,24,.12), transparent 30rem),
    #0d0a07;
}

.imp-faq-list {
  max-width: 880px;
  margin: 0 auto;
}

.imp-faq-list details {
  border-bottom: 1px solid rgba(213,170,84,.22);
}

.imp-faq-list summary {
  position: relative;
  padding: 22px 44px 22px 0;
  color: #dbcfb9;
  font: 600 clamp(15px, 1.4vw, 18px)/1.4 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.imp-faq-list summary::-webkit-details-marker { display: none; }

.imp-faq-list summary::after {
  position: absolute;
  top: 50%;
  right: 4px;
  color: var(--imp-gold);
  content: '+';
  font: 400 22px/1 Georgia, serif;
  transform: translateY(-50%);
}

.imp-faq-list details[open] summary::after { content: '−'; }
.imp-faq-list summary:hover { color: #f1e7d2; }
.imp-faq-list summary:focus-visible { outline: 1px solid var(--imp-gold); outline-offset: 2px; }

.imp-faq-list details > p {
  max-width: 760px;
  margin: 0;
  padding: 0 0 24px;
  color: #a39682;
  font-size: 15px;
  line-height: 1.8;
}

.imp-final-sigil {
  width: clamp(84px, 8vw, 118px);
  height: clamp(84px, 8vw, 118px);
  margin: 0 auto 30px;
  object-fit: cover;
  border: 1px solid rgba(239,207,132,.55);
  border-radius: 20px;
  box-shadow: 0 20px 54px rgba(0,0,0,.45), 0 0 44px rgba(213,170,84,.13);
}

.imp-final {
  position: relative;
  display: grid;
  min-height: 760px;
  place-items: center;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

.imp-final > img,
.imp-final-veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

/* Loppukuva sai olla areenan väreissä: aiempi saturate(.42) brightness(.55)
   jauhoi sen mustaksi tahraksi. Luettavuus tulee nyt kohdistetusta huntusta
   ja otsikon varjosta, ei koko kuvan sammuttamisesta. */
.imp-final > img { object-fit: cover; object-position: center 38%; filter: saturate(.78) brightness(.9) contrast(1); }
.imp-final-veil {
  z-index: -1;
  background: linear-gradient(rgba(9,6,4,.78), rgba(9,6,4,.38) 38%, rgba(9,6,4,.82));
}
.imp-final > div { padding: 90px 24px 130px; }
.imp-final h2 { text-shadow: 0 3px 26px rgba(6,4,2,.85), 0 1px 4px rgba(6,4,2,.7); }
.imp-final .imp-section-kicker,
.imp-final > div > p:nth-of-type(2) { text-shadow: 0 2px 12px rgba(6,4,2,.9); }
.imp-final .imp-section-kicker { justify-content: center; }
.imp-final > div > p:nth-of-type(2) { margin: 26px 0 34px; color: #b0a28f; font-size: 17px; }
.imp-final .imp-button { margin: 0 auto; }
.imp-signin { display: block; width: max-content; margin: 24px auto 0; padding-bottom: 5px; color: #d6c9b1; border-bottom: 1px solid rgba(213,170,84,.5); text-shadow: 0 2px 10px rgba(6,4,2,.9); }
.imp-signin:hover { color: var(--imp-gold-pale); }

.imp-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  min-height: 150px;
  padding: 24px clamp(24px, 5vw, 80px) 86px;
  color: #746a5d;
  background: #080604;
  border-top: 1px solid rgba(213,170,84,.2);
  font: 700 8px/1 Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.imp-footer p { margin: 0; }
.imp-footer nav { display: flex; justify-self: end; gap: 24px; }
.imp-footer nav a { text-decoration: none; }
.imp-footer nav a:hover { color: var(--imp-gold); }

/* Valikkorivi mahtuu yhdelle riville vasta 1400 pikselissä: linkkejä on
   yhdeksän (viisi osiota + neljä sivua), ja kapeammalla ne kietoutuivat
   kahdelle riville. Mitattu, ei arvattu.

   HAMPURILAINEN TULEE SAMASSA RAJASSA. Ennen tätä valikko katosi 1100
   pikselissä mutta hampurilainen ilmestyi vasta 820:ssa, joten välissä oli
   280 pikselin kaista jolla laskeutumissivulla EI OLLUT NAVIGAATIOTA
   LAINKAAN — juuri se leveys jolla useimpia kannettavia luetaan. Nyt joka
   leveydellä on joko rivi tai valikko. */
@media (max-width: 1400px) {
  .imp-nav { grid-template-columns: 1fr auto auto; }
  .imp-nav .menu-toggle { display: block; justify-self: end; color: #f0e5d0; }
  .imp-menu {
    position: absolute;
    top: var(--imp-nav-h);
    right: 14px;
    left: auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(320px, calc(100vw - 28px));
    padding: 14px 20px;
    background: rgba(11,8,5,.96);
    border: 1px solid rgba(213,170,84,.34);
  }
  .imp-menu[data-open] { display: flex; }
  .imp-menu a { padding: 15px 4px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .imp-menu a:last-child { border-bottom: 0; }
}

@media (max-width: 1140px) {
  .imp-hero-copy { width: 68vw; }

  .imp-chronicle-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .imp-nav { --imp-nav-h: 76px; position: absolute; grid-template-columns: 1fr auto; }
  .imp-nav-actions { display: none; }
  /* Kirjautumispolut siirtyvät valikkoon vasta täällä: yläpalkin omat napit
     ovat piilossa vasta tästä leveydestä alaspäin. */
  .imp-menu { right: 14px; left: 14px; width: auto; }
  .imp-menu-cta { display: block; }
  .imp-menu a.imp-menu-cta:last-child { color: var(--imp-gold); }

  .imp-hero { min-height: 880px; }
  .imp-hero-art {
    object-position: 64% center;
    opacity: .66;
    -webkit-mask-image: linear-gradient(96deg, transparent 2%, #000 16%);
    mask-image: linear-gradient(96deg, transparent 2%, #000 16%);
    filter: saturate(.72) contrast(.94);
  }
  .imp-hero-veil { background: linear-gradient(90deg, rgba(8,6,4,.9), rgba(8,6,4,.4)), linear-gradient(to top, rgba(8,6,4,.95) 8%, transparent 58%); }
  .imp-hero-copy { width: 100%; padding: 150px 24px 270px; }
  .imp-hero h1 { font-size: clamp(44px, 12vw, 70px); }
  .imp-lede { max-width: 520px; }
  .imp-scroll { display: none; }

  .imp-manifesto { padding-right: 30px; padding-left: 48px; }
  .imp-manifesto-grid,
  .imp-section-head,
  .imp-world-intro { grid-template-columns: 1fr; gap: 36px; }
  .imp-section-head .imp-section-kicker,
  .imp-world-intro .imp-section-kicker { margin-bottom: -8px; }
  .imp-manifesto-copy { padding-top: 0; }

  .imp-life-card,
  .imp-life-card-wide,
  .imp-life-card-tall { grid-column: span 6; min-height: 510px; }
  .imp-record { grid-column: span 12; min-height: 0; }
  .imp-record dl { grid-template-columns: 1fr; gap: 22px; }

  .imp-world-spread { width: calc(100% - 24px); min-height: 620px; }
  .imp-world-label,
  .imp-world-britannia .imp-world-label { right: 28px; bottom: 42px; left: 28px; top: auto; width: auto; transform: none; }
  .imp-world-spread::after,
  .imp-world-britannia::after { background: linear-gradient(to top, rgba(7,5,3,.98), rgba(7,5,3,.18) 75%); }

  .imp-warband { min-height: 980px; }
  .imp-warband > img { object-position: 58% center; }
  .imp-warband-veil { background: linear-gradient(to top, rgba(4,4,4,.98) 0%, rgba(4,4,4,.72) 58%, rgba(4,4,4,.1)); }
  .imp-warband-copy { position: absolute; right: 26px; bottom: 210px; left: 26px; width: auto; padding: 0; }
  .imp-raid-list { right: 26px; bottom: 45px; left: 26px; width: auto; }


  .imp-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .imp-footer nav { justify-self: center; }
}

@media (max-width: 560px) {
  .imp-brand { font-size: 11px; }
  .imp-brand-sigil { width: 36px; height: 36px; }
  .imp-hero { min-height: 970px; }
  .imp-hero-copy { padding-top: 132px; }
  .imp-kicker { align-items: flex-start; font-size: 8px; }
  .imp-kicker > span { width: 25px; margin-top: 5px; }
  .imp-hero h1 { font-size: clamp(39px, 12.5vw, 59px); }
  .imp-lede { margin-top: 25px; font-size: 15px; }
  .imp-hero-actions { align-items: stretch; flex-direction: column; gap: 19px; }
  .imp-text-link { align-self: center; }

  .imp-manifesto h2,
  .imp-section-head h2,
  .imp-world-intro h2,
  .imp-warband h2,
  .imp-final h2 { font-size: clamp(32px, 10.5vw, 48px); }
  .imp-manifesto h2 { font-size: clamp(26px, 7.5vw, 34px); }
  .imp-record h3 { font-size: clamp(24px, 7vw, 32px); }
  .imp-manifesto { padding-top: 90px; padding-bottom: 90px; }
  .imp-life { padding-right: 12px; padding-left: 12px; }
  .imp-section-head { padding: 0 12px; }
  .imp-life-card,
  .imp-life-card-wide,
  .imp-life-card-tall,
  .imp-record { grid-column: span 12; }
  .imp-life-card { min-height: 500px; }
  .imp-record { padding: 34px 22px; }
  .imp-feed-list li { grid-template-columns: 1fr auto; }
  .imp-feed-list p { grid-column: 1 / -1; }
  .imp-map { padding: 0 12px; }
  .imp-map figcaption span { display: block; margin-bottom: 6px; }
  .imp-pin { grid-template-columns: 9px auto; padding: 5px 7px 5px 6px; }
  .imp-pin i { width: 7px; height: 7px; }
  .imp-pin b { font-size: 8px; }
  /* 6px on lukukelvoton, ja kolme pinniä ei mahdu 280px:n karttaan
     alateksteineen. Tasovälit lukevat alempana mannerlohkoissa. */
  .imp-pin small { display: none; }
  .imp-world-intro { width: calc(100% - 40px); }
  .imp-world-spread { min-height: 570px; }
  .imp-world-label h3 { font-size: 48px; }
  .imp-world-label p { font-size: 15px; }
  .imp-world-label ul { display: none; }

  .imp-warband-copy { bottom: 214px; }
  .imp-warband-copy > p:nth-of-type(2) { font-size: 15px; }
  .imp-raid-list span { padding: 11px 12px; font-size: 7px; }

  .imp-chronicle { padding-right: 20px; padding-left: 20px; }
  .imp-patches { min-height: 0; padding: 28px 22px; }
  .imp-panel-head { align-items: flex-start; flex-direction: column; gap: 15px; }
  .imp-patch-entry { grid-template-columns: 1fr; gap: 10px; }
  .imp-patch-meta b { display: inline; margin-right: 8px; }
  .imp-leaderboard,
  .imp-discord { padding: 28px 22px; }

  .imp-final { min-height: 680px; }
  .imp-footer nav { flex-wrap: wrap; justify-content: center; }
}

/* ---------------------------------------------------------------- auth-dialogi

   Kirjautuminen ja hahmonluonti laskeutumissivulla: vieras ei poistu sivulta.
   Natiivi <dialog> hoitaa fokusansan, Escin ja taustan inertiksi — ei omaa
   näppäinkäsittelyä. Napit ovat yhä <a href="/play#/...">, joten ilman JS:ää
   sivu käyttäytyy täsmälleen kuten ennen. */

.imp-auth {
  width: min(560px, calc(100vw - 32px));
  max-height: min(90vh, 900px);
  padding: 0;
  overflow: auto;
  color: var(--imp-bone);
  background: #100c08;
  border: 1px solid rgba(213,170,84,.34);
  box-shadow: 0 40px 90px rgba(0,0,0,.62);
}

.imp-auth::backdrop { background: rgba(6,4,2,.78); }

.imp-auth-inner { position: relative; padding: clamp(24px, 4vw, 40px); }

.imp-auth-close {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 6px 10px;
  color: #9d917f;
  background: none;
  border: 0;
  font: 400 26px/1 Georgia, serif;
  cursor: pointer;
}

.imp-auth-close:hover { color: var(--imp-gold-pale); }

.imp-auth-tabs {
  display: flex;
  gap: 0;
  margin: 0 0 26px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.imp-auth-tabs button {
  padding: 12px 16px;
  color: #8d8271;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font: 700 8.5px/1 Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.imp-auth-tabs button[aria-selected='true'] { color: var(--imp-gold); border-bottom-color: var(--imp-gold); }
.imp-auth-tabs button:hover { color: #e7dcc7; }

.imp-auth-form label {
  display: block;
  margin: 0 0 8px;
  color: #cfc2a9;
  font: 700 8px/1 Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.imp-auth-form label span { color: #7f7566; }

.imp-auth-form input {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 13px;
  color: #f1e7d2;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(213,170,84,.28);
  font: 400 15px/1.3 Georgia, serif;
  letter-spacing: normal;
  text-transform: none;
}

.imp-auth-form input:focus { outline: none; border-color: var(--imp-gold); }

/* Kaksi salasanakenttää rinnakkain; kapealla allekkain. min-width:0 estää
   grid-lapsen luontaista min-content-leveyttä levittämästä dialogia. */
.imp-auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.imp-auth-row > label { min-width: 0; }

.imp-auth-lede { margin: 0 0 20px; color: #a39682; font-size: 14.5px; line-height: 1.7; }

.imp-auth-hint { margin: 0 0 18px; color: #7f7566; font-size: 12.5px; line-height: 1.6; }
.imp-auth-hint b { color: #a39682; }
.imp-auth-hint a { color: var(--imp-gold); }

.imp-auth-err { margin: -10px 0 16px; color: #e08e7e; font-size: 13px; line-height: 1.55; }

.imp-auth-note {
  margin: 0 0 20px;
  padding: 12px 14px;
  color: #cfc2a9;
  background: rgba(213,170,84,.08);
  border-left: 2px solid var(--imp-gold);
  font-size: 13px;
  line-height: 1.65;
}

.imp-auth-legend {
  margin: 4px 0 10px;
  color: #cfc2a9;
  font: 700 8px/1 Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.imp-auth-faces { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }

.imp-auth-face {
  width: 52px;
  height: 52px;
  padding: 0;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(213,170,84,.3);
  border-radius: 50%;
  cursor: pointer;
}

.imp-auth-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.imp-auth-face[aria-pressed='true'] { border-color: var(--imp-gold); box-shadow: 0 0 0 2px rgba(213,170,84,.35); }

.imp-auth-kits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }

.imp-auth-kits button {
  display: grid;
  gap: 5px;
  padding: 13px 12px;
  color: #a39682;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(213,170,84,.22);
  text-align: left;
  cursor: pointer;
}

.imp-auth-kits b { color: #ddd1bc; font: 600 13px/1.2 var(--font-display); text-transform: uppercase; }
.imp-auth-kits span { font-size: 12px; line-height: 1.5; }
.imp-auth-kits button[aria-pressed='true'] { color: #cfc2a9; border-color: var(--imp-gold); background: rgba(213,170,84,.1); }

.imp-auth-form [data-auth-turnstile]:not(:empty) { margin: 4px 0 18px; }

.imp-auth-form button[type='submit'] { width: 100%; margin-top: 6px; }
.imp-auth-form button[type='submit'][data-busy='1'] { opacity: .6; cursor: progress; }

@media (max-width: 560px) {
  .imp-auth-row { grid-template-columns: 1fr; gap: 0; }
  .imp-auth-kits { grid-template-columns: 1fr; }
}

/* Teemanappi. Kelluu kiinteästi oikeassa alakulmassa, koska navi on jo
   kahdeksan linkin levyinen eikä siihen mahdu yhdeksättä — ja koska kelluva
   paikka on ainoa joka on olemassa myös kapealla ruudulla, jossa navin
   toimintopainikkeet ovat piilossa.

   Nappi on data-attribuutilla piilossa kunnes music.js herättää sen: ilman
   JS:ää sen painaminen ei tekisi mitään. */
.imp-music {
  position: fixed;
  z-index: 60;
  right: clamp(14px, 2.2vw, 28px);
  bottom: clamp(14px, 2.2vw, 28px);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #cbbb96;
  background: rgba(11,8,5,.82);
  border: 1px solid rgba(213,170,84,.34);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.imp-music:hover { color: var(--imp-gold-pale); background: rgba(20,14,8,.92); border-color: rgba(213,170,84,.6); }
.imp-music:focus-visible { outline: 1px solid var(--imp-gold); outline-offset: 3px; }
.imp-music[data-playing='on'] { color: var(--imp-gold); border-color: rgba(213,170,84,.62); }

.imp-music svg { display: block; width: 18px; height: 18px; fill: currentColor; }

/* Kaksi glyfiä samassa napissa, toinen kerrallaan: aallot kun soi, poikkiviiva
   kun on hiljaa. Nappi kertoo mitä TAPAHTUU NYT, ei mitä painallus tekee.
   Odottava tila (painettu, ääntä ei vielä kuulu) näyttää jo aallot mutta
   sykkii, jottei painallus näytä siltä ettei mitään tapahtunut. */
.imp-music .imp-music-on { display: none; }
.imp-music[data-playing='on'] .imp-music-on,
.imp-music[data-playing='pending'] .imp-music-on { display: block; }
.imp-music[data-playing='on'] .imp-music-off,
.imp-music[data-playing='pending'] .imp-music-off { display: none; }

.imp-music[data-playing='pending'] { color: var(--imp-gold); animation: imp-music-wait 1.1s ease-in-out infinite; }

@keyframes imp-music-wait {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .imp-music { transition: none; }
  .imp-music[data-playing='pending'] { animation: none; opacity: .6; }
}