.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:not(.imp-button) {
  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:not(.imp-button)::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:not(.imp-button):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;
}

/* Wiki asuu yläpalkin oikeassa laidassa (imp-nav-wiki), koska se on ainoa
   linkki joka vie pois tältä sivustolta. Kapealla ruudulla se laita katoaa
   (.imp-nav-actions display:none 820 px:ssä), joten valikossa on sitä varten
   oma rivi — sama kuvio kuin kirjautumispoluilla. */
.imp-menu-aside { display: none; }
.imp-menu-cta { display: none; }

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

/* Yläpalkin tekstit eivät rivity. Kahdelle riville katkennut "Sign in" ja
   "Play free" näytti rikkinäiseltä, ja rivitys kavensi laitaa niin, että
   Wiki painui kiinni Roadmapiin (mitattu 13.9.2026, 1401–1500 px). */
.imp-menu a,
.imp-nav-actions > a { white-space: nowrap; }

.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);
  color: inherit;
  text-decoration: none;
}

.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%; }
.imp-pin-aegyptus { right: 10%; bottom: 16%; }

.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-aegyptus { margin-right: 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; }
/* Alalaidan kymmenen linkkiä ovat kaksi viiden sarakkeen riviä: ylhäällä
   sivuston sivut, alhaalla Discord ja somekanavat. Yhdellä flex-rivillä ne
   vaativat 622 px, eikä 1fr-sarake anna sitä ennen noin 1600 px:n ikkunaa.
   Kapeammalla ruudukko vinoutui (copyright 219 px sivussa keskeltä 1024
   px:llä), ja 600 px:llä sivu vieritti vaakasuunnassa. Vapaa rivitys taas
   jätti "TikTok X" -orporivin 1440 px:llä. Yli 560 px:n leveyksillä ruudukko
   on aina 340 px. nowrap pitää "Patch notes" -tekstin yhdellä rivillä myös
   900 ja 1024 px:llä, joilla se katkesi jo ennen somelinkkejä. Mitattu
   13.9.2026 headless-Edgellä 320–1920 px. Kuudes linkki rivillä aloittaa
   uuden rivin. */
.imp-footer nav { display: grid; grid-template-columns: repeat(5, auto); justify-content: end; justify-self: end; gap: 24px; }
.imp-footer nav a { text-decoration: none; white-space: nowrap; }
.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; }
}

/* 1401–1600 px: koko rivi mahtuu vain tiiviimpänä. Keskitetyssä 1fr auto 1fr
   -ruudukossa valikon ja oikean laidan väliin jäi 0 px (laita on brändiä
   leveämpi, joten keskitetty valikko ahtautui oikealta), ja 2,8vw:n välit
   veivät loput. Tällä kaistalla valikko keskittyy brändin ja laidan väliin,
   ja sen välit ovat tiiviimmät. Mitattu 13.9.2026: vähintään 56 px kummallakin
   puolella eikä rivittyviä tekstejä. Leveämmällä ruudulla rivi on ennallaan. */
@media (min-width: 1401px) and (max-width: 1600px) {
  .imp-nav { grid-template-columns: auto 1fr auto; column-gap: 28px; }
  .imp-menu { justify-self: center; gap: clamp(22px, 2.2vw, 34px); }
}

@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-aside { display: block; }
  .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; }
  /* Viisi saraketta (340 px) ei mahdu kapeimpiin puhelimiin: rivitys keskelle. */
  .imp-footer nav { display: flex; 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 {
  position: relative;
  width: min(900px, calc(100vw - 32px));
  max-height: min(94vh, 920px);
  padding: 0;
  overflow: auto;
  color: var(--imp-bone);
  background:
    radial-gradient(circle at 50% -10%, rgba(176,111,42,.2), transparent 26rem),
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 42%),
    #100a06;
  border: 1px solid rgba(213,170,84,.5);
  border-radius: 2px;
  box-shadow: 0 45px 110px rgba(0,0,0,.78), 0 0 0 1px rgba(0,0,0,.8);
  scrollbar-color: #705026 #120c08;
}

.imp-auth::before {
  position: absolute;
  z-index: 2;
  inset: 8px;
  border: 1px solid rgba(213,170,84,.13);
  content: '';
  pointer-events: none;
}

.imp-auth::backdrop {
  background: rgba(5,3,2,.86);
  backdrop-filter: blur(4px);
}

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

.imp-auth-herald {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 58px;
  padding-right: 42px;
}

.imp-auth-herald img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border: 1px solid rgba(226,187,102,.45);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.38), 0 0 22px rgba(213,170,84,.1);
}

.imp-auth-herald span {
  display: block;
  margin-bottom: 6px;
  color: var(--imp-gold);
  font: 700 8px/1 Arial, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.imp-auth-herald strong {
  display: block;
  color: #eee2cd;
  font: 500 clamp(19px, 2vw, 25px)/1.15 var(--font-display);
  letter-spacing: .01em;
}

.imp-auth-close {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: #9d917f;
  background: rgba(0,0,0,.14);
  border: 1px solid transparent;
  border-radius: 50%;
  font: 400 25px/1 Georgia, serif;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.imp-auth-close:hover {
  color: var(--imp-gold-pale);
  background: rgba(213,170,84,.08);
  border-color: rgba(213,170,84,.28);
}

.imp-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 24px 0 22px;
  padding: 5px;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(213,170,84,.17);
}

.imp-auth-tabs button {
  min-height: 40px;
  padding: 11px 16px;
  color: #8d8271;
  background: transparent;
  border: 1px solid transparent;
  font: 600 11px/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.imp-auth-tabs button[aria-selected='true'] {
  color: #f0d99e;
  background: linear-gradient(180deg, rgba(213,170,84,.14), rgba(213,170,84,.055));
  border-color: rgba(213,170,84,.36);
  box-shadow: inset 0 1px rgba(255,231,174,.06);
}
.imp-auth-tabs button:hover { color: #e7dcc7; }

.imp-auth-register-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.imp-auth-panel {
  position: relative;
  min-width: 0;
  padding: 22px;
  background:
    linear-gradient(150deg, rgba(213,170,84,.055), transparent 38%),
    rgba(8,5,3,.46);
  border: 1px solid rgba(213,170,84,.24);
  box-shadow: inset 0 0 30px rgba(0,0,0,.18);
}

.imp-auth-panel::before,
.imp-auth-panel::after {
  position: absolute;
  width: 16px;
  height: 16px;
  content: '';
  pointer-events: none;
}

.imp-auth-panel::before {
  top: 6px;
  left: 6px;
  border-top: 1px solid rgba(232,193,109,.38);
  border-left: 1px solid rgba(232,193,109,.38);
}

.imp-auth-panel::after {
  right: 6px;
  bottom: 6px;
  border-right: 1px solid rgba(232,193,109,.25);
  border-bottom: 1px solid rgba(232,193,109,.25);
}

.imp-auth-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 50px;
  margin-bottom: 19px;
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(213,170,84,.16);
}

.imp-auth-section-head > span {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #d9b663;
  background: rgba(213,170,84,.08);
  border: 1px solid rgba(213,170,84,.32);
  border-radius: 50%;
  font: 500 13px/1 var(--font-display);
}

.imp-auth-section-head h2 {
  margin: 0 0 5px;
  color: #e7d8bf;
  font: 500 16px/1.15 var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.imp-auth-section-head p {
  margin: 0;
  color: #8f826f;
  font-size: 12px;
  line-height: 1.45;
}

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

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

.imp-auth-form input {
  display: block;
  width: 100%;
  margin-top: 8px;
  min-height: 46px;
  padding: 12px 13px;
  color: #f1e7d2;
  background: rgba(27,20,13,.88);
  border: 1px solid rgba(188,143,72,.38);
  box-shadow: inset 0 1px 8px rgba(0,0,0,.32);
  font: 400 15px/1.3 Georgia, serif;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.imp-auth-form input:focus {
  outline: none;
  background: rgba(32,23,14,.96);
  border-color: var(--imp-gold);
  box-shadow: inset 0 1px 8px rgba(0,0,0,.28), 0 0 0 2px rgba(213,170,84,.08);
}

/* Kaksi salasanakenttää rinnakkain; kapealla allekkain. min-width:0 estää
   grid-lapsen luontaista min-content-leveyttä levittämästä dialogia. */
/* Nimikenttä ja Randomize samalla rivillä. Nappi on kentän korkuinen ja
   pitää tekstinsä yhdellä rivillä, jotta rivi ei hyppää arvonnan aikana (napin
   teksti vaihtuu hetkeksi kolmeksi pisteeksi). */
.imp-auth-namerow { display: flex; gap: 10px; align-items: flex-end; }
.imp-auth-namerow > label { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }

.imp-auth-roll {
  /* Mitattu tuotannossa: kentän korkeus on 45,5 px (12+12 padding + 19,5 rivi +
     2 reunus). Napin oma padding antoi 35 px, jolloin se kellui kentän vieressä
     matalampana. min-height sitoo napin kentän korkuiseksi; align-self: stretch
     ei kelpaa, koska rivin korkeuteen kuuluu myös labelin teksti. */
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  color: var(--imp-gold);
  background: linear-gradient(180deg, rgba(213,170,84,.11), rgba(213,170,84,.035));
  border: 1px solid rgba(213,170,84,.36);
  font: 600 10px/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.imp-auth-roll:hover { background: rgba(213,170,84,.14); border-color: var(--imp-gold); }
.imp-auth-roll[disabled] { opacity: .6; cursor: default; }

.imp-auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.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 16px; color: #817563; font-size: 12px; line-height: 1.55; }
.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: 3px 0 11px;
  color: #cfc2a9;
  font: 700 8.5px/1 Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.imp-auth-faces {
  display: grid;
  grid-template-columns: repeat(3, 82px);
  justify-content: center;
  gap: 13px;
  margin-bottom: 21px;
}

.imp-auth-face {
  position: relative;
  width: 82px;
  height: 82px;
  padding: 0;
  overflow: hidden;
  background: rgba(255,255,255,.035);
  border: 2px solid rgba(169,127,61,.4);
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(0,0,0,.32), inset 0 0 0 3px rgba(8,5,3,.75);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.imp-auth-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.imp-auth-face:hover { border-color: rgba(232,193,109,.74); transform: translateY(-2px); }
.imp-auth-face[aria-pressed='true'] {
  border-color: #e1bb64;
  box-shadow: 0 0 0 3px rgba(213,170,84,.16), 0 9px 20px rgba(0,0,0,.38), inset 0 0 0 3px rgba(8,5,3,.68);
}

.imp-auth-face[aria-pressed='true']::after {
  position: absolute;
  right: 1px;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  color: #171006;
  background: #dbb45e;
  border: 2px solid #1b1008;
  border-radius: 50%;
  content: '\2713';
  font: 800 11px/1 Arial, sans-serif;
}

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

.imp-auth-kits button {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 96px;
  padding: 14px 12px 12px;
  color: #a39682;
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(0,0,0,.08));
  border: 1px solid rgba(213,170,84,.25);
  text-align: left;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.imp-auth-kits button:hover { border-color: rgba(213,170,84,.52); transform: translateY(-1px); }
.imp-auth-kits b { color: #ddd1bc; font: 600 12px/1.2 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.imp-auth-kits span { font-size: 11px; line-height: 1.45; }
.imp-auth-kits button[aria-pressed='true'] {
  color: #d7c8ab;
  background: linear-gradient(160deg, rgba(213,170,84,.15), rgba(213,170,84,.045));
  border-color: var(--imp-gold);
  box-shadow: inset 0 0 18px rgba(213,170,84,.045);
}

.imp-auth-kits button[aria-pressed='true']::after {
  position: absolute;
  top: 7px;
  right: 8px;
  color: #e0ba63;
  content: '\25c6';
  font-size: 7px;
}

.imp-auth-classless {
  margin: 0;
  padding: 11px 12px;
  color: #8e826f;
  background: rgba(213,170,84,.045);
  border-left: 2px solid rgba(213,170,84,.42);
  font-size: 11.5px;
  line-height: 1.5;
}

.imp-auth-classless b { color: #baa989; }

.imp-auth-submit-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(213,170,84,.2);
}

.imp-auth-submit-row [data-auth-turnstile]:empty { display: none; }
.imp-auth-submit-row [data-auth-turnstile]:not(:empty) { flex: 0 0 300px; }
.imp-auth-submit-actions { flex: 1 1 auto; min-width: 0; }

.imp-auth-submit-actions .imp-auth-err { margin: 0 0 8px; }

.imp-auth-form:not([data-auth-form='register']) {
  width: min(470px, 100%);
  margin: 0 auto;
  padding: 16px 0 4px;
}

.imp-auth-form button[type='submit'] {
  width: 100%;
  min-height: 54px;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .16em;
}
.imp-auth-form button[type='submit'][data-busy='1'] { opacity: .6; cursor: progress; }

@media (max-width: 780px) {
  .imp-auth { width: min(620px, calc(100vw - 20px)); max-height: 95vh; }
  .imp-auth-register-grid { grid-template-columns: 1fr; }
  .imp-auth-submit-row { align-items: stretch; flex-direction: column; }
  .imp-auth-submit-row [data-auth-turnstile]:not(:empty) { flex-basis: auto; align-self: center; }
}

@media (max-width: 560px) {
  .imp-auth { width: calc(100vw - 12px); }
  .imp-auth-inner { padding: 22px 16px 20px; }
  .imp-auth-herald { gap: 11px; padding-right: 38px; }
  .imp-auth-herald img { width: 44px; height: 44px; border-radius: 10px; }
  .imp-auth-herald strong { font-size: 17px; }
  .imp-auth-tabs { margin-top: 18px; }
  .imp-auth-tabs button { padding-right: 8px; padding-left: 8px; font-size: 9px; }
  .imp-auth-panel { padding: 18px 16px; }
  .imp-auth-row { grid-template-columns: 1fr; gap: 0; }
  .imp-auth-kits { grid-template-columns: 1fr; }
  .imp-auth-kits button { min-height: 0; }
  .imp-auth-faces { grid-template-columns: repeat(3, 72px); gap: 12px; }
  .imp-auth-face { width: 72px; height: 72px; }
}

/* 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; }
}