/* Realms of Elynia — Forge remaster.
   Scope on tarkoituksella .forge-remaster: tämä tiedosto voidaan cherry-pickata
   ilman että Characterin, Marketin tai wikin nykyiset pinnat muuttuvat. Tyyli on
   desktop-RPG: tumma metalli, patinoitu messinki ja hillitty runovalo. */

.forge-remaster {
  --fr-bg: #0d0905;
  --fr-panel: rgba(20, 14, 8, .92);
  --fr-panel-soft: rgba(31, 23, 13, .82);
  --fr-line: rgba(196, 146, 52, .30);
  --fr-line-soft: rgba(196, 146, 52, .16);
  --fr-gold: #d0a043;
  --fr-gold-bright: #edca79;
  --fr-cyan: #71b8b3;
  --fr-text: #dfd3b8;
  --fr-muted: #92846a;
  color: var(--fr-text);
}

/* 26.8. valittu pelin nauhanappi, rajattuna remasteriin. Näkyvä 32 px
   kaiverrusnauha jättää 44 px osuma-alueen, mutta ei rakenna näkymään
   mobiilipelin kaltaista täysien pronssilaattojen seinää. */
.forge-remaster .btn {
  --btn-inset: 6px;
  --btn-band-top: #57431f;
  --btn-band-bot: #3b2d14;
  --btn-edge: rgba(201, 162, 75, .55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px;
  color: #f2d98b;
  background:
    linear-gradient(var(--btn-edge), var(--btn-edge)) no-repeat center top var(--btn-inset) / 100% 1px,
    linear-gradient(var(--btn-edge), var(--btn-edge)) no-repeat center bottom var(--btn-inset) / 100% 1px,
    linear-gradient(180deg, var(--btn-band-top), var(--btn-band-bot)) no-repeat center / 100% calc(100% - var(--btn-inset) * 2);
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-shadow: 0 1px 2px rgba(20, 14, 8, .7);
  text-transform: uppercase;
}
.forge-remaster .btn:focus-visible { outline-offset: calc(var(--btn-inset) * -1); }
.forge-remaster .btn:hover:not(:disabled) {
  --btn-band-top: #6a5326;
  --btn-band-bot: #4a3919;
  --btn-edge: var(--gold);
}
.forge-remaster .btn:active {
  --btn-band-top: #3b2d14;
  --btn-band-bot: #2a2011;
  transform: translateY(1px);
}
.forge-remaster .btn:disabled {
  --btn-band-top: rgba(36, 28, 18, .55);
  --btn-band-bot: rgba(36, 28, 18, .55);
  --btn-edge: var(--night-line);
  color: #8a7a5f;
  cursor: not-allowed;
  text-shadow: none;
  transform: none;
}
.forge-remaster .btn-ghost {
  --btn-band-top: transparent;
  --btn-band-bot: transparent;
  --btn-edge: var(--bronze);
  color: var(--night-text);
  text-shadow: none;
}
.forge-remaster .btn-ghost:hover:not(:disabled) {
  --btn-band-top: rgba(201, 162, 75, .12);
  --btn-band-bot: rgba(201, 162, 75, .12);
  --btn-edge: var(--gold);
}
.forge-remaster .btn-primary {
  --btn-band-top: #e0bc6a;
  --btn-band-bot: #c9922c;
  --btn-edge: var(--bronze);
  color: var(--night);
  filter: none;
  text-shadow: none;
}
.forge-remaster .btn-primary:hover:not(:disabled) {
  --btn-band-top: #ebcc81;
  --btn-band-bot: #d4a038;
  --btn-edge: var(--bronze-deep);
}
.forge-remaster .btn-primary:active { --btn-band-top: #d4a038; --btn-band-bot: #b8841f; }
.forge-remaster .btn-primary:focus-visible { outline-color: #24180a; }

.forge-remaster .forge-scene {
  min-height: 0;
  background: #0b0704;
  isolation: isolate;
}

/* Full-bleed-rungon #app käyttää min-heightia, joten pitkä supply-lista voisi
   muuten kasvattaa koko sivun yli viewportin. Desktop-chromen korkeus on 108px
   (header + statusrivi); Forge saa loput ja omat raidat vierivät sisäisesti. */
@media (min-width: 900px) {
  body.map-fullpage .forge-remaster {
    flex: 0 0 calc(100dvh - 108px);
    height: calc(100dvh - 108px);
    min-height: 0;
  }
  body.map-fullpage .forge-remaster .forge-scene { height: 100%; }
}
.forge-remaster .forge-scene::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,4,2,.90), rgba(6,4,2,.16) 31%, rgba(6,4,2,.18) 68%, rgba(6,4,2,.91)),
    linear-gradient(180deg, rgba(5,3,1,.35), transparent 34%, rgba(5,3,1,.52));
}
.forge-remaster .backdrop-img {
  /* Taide luettiin tummana ja sumeana: suodatin vei kylläisyydestä 28 % ja
     kirkkaudesta 32 %, jolloin holvin pronssi painui ruskeaksi puuroksi ja
     rune-siniset kipinät katosivat. Nostettu lähemmäs lähdekuvaa. Tausta saa
     yhä väistyä, koska paneelit ovat sen päällä — mutta se ei ole enää
     tunnistamaton. */
  filter: saturate(.94) contrast(1.02) brightness(.88);
  object-position: center 36%;
}

.forge-remaster .forge-workshop {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: clamp(270px, 18vw, 320px) minmax(510px, 1fr) clamp(310px, 21vw, 370px);
  gap: 0;
  height: 100%;
  min-height: 0;
  padding: 18px;
  align-items: stretch;
}
.forge-remaster .forge-col {
  min-width: 0;
  min-height: 0;
  gap: 0;
}
.forge-remaster .forge-col-inv,
.forge-remaster .forge-col-shop {
  position: relative;
  z-index: 2;
  flex: none;
  overflow: hidden;
}
.forge-remaster .forge-col-inv { border-radius: 8px 0 0 8px; }
.forge-remaster .forge-col-shop { overflow: hidden; border-radius: 0 8px 8px 0; }
.forge-remaster .forge-col-slot {
  position: relative;
  z-index: 1;
  overflow: auto;
  background: linear-gradient(180deg, rgba(7,4,2,.09), rgba(7,4,2,.45));
  border-block: 1px solid var(--fr-line-soft);
}

.forge-remaster .imm-card {
  color: var(--fr-text);
  background:
    linear-gradient(180deg, rgba(32,23,12,.96), rgba(15,10,6,.96)),
    var(--fr-panel);
  border: 1px solid var(--fr-line);
  border-radius: 0;
  box-shadow: 0 14px 34px rgba(0,0,0,.48);
}
.forge-remaster .forge-inv,
.forge-remaster .forge-supplies {
  padding: 15px;
  overflow-y: auto;
  scrollbar-color: rgba(185,132,42,.46) rgba(0,0,0,.2);
}
.forge-remaster .forge-inv { height: 100%; }
.forge-remaster .forge-supplies { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.forge-remaster .forge-col-inv .imm-card { border-radius: 8px 0 0 8px; }
.forge-remaster .forge-col-shop .imm-card:first-child { border-radius: 0 8px 0 0; }

/* Armory rail */
.forge-remaster .forge-rail-heading,
.forge-remaster .forge-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--fr-line);
}
.forge-remaster .forge-eyebrow,
.forge-remaster .forge-panel-head h2,
.forge-remaster .forge-stage-title > span,
.forge-remaster .forge-stage-kicker,
.forge-remaster .forge-offering-label {
  color: var(--fr-gold);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.forge-remaster .forge-rail-count { color: var(--fr-muted); font-size: 11px; }
.forge-remaster .forge-search { display: block; margin: 12px 0 8px; }
.forge-remaster .forge-search input {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  color: var(--fr-text);
  background: rgba(5,3,2,.55);
  border: 1px solid var(--fr-line-soft);
  border-radius: 3px;
  font: 12px var(--font-body);
}
.forge-remaster .forge-search input:focus { outline: 1px solid var(--fr-gold); border-color: var(--fr-gold); }
.forge-remaster .forge-search input::placeholder { color: #716650; }
.forge-remaster .forge-filter-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 13px; }
.forge-remaster .forge-filter {
  min-height: 30px;
  padding: 5px 3px;
  color: #8f8064;
  background: rgba(9,6,3,.45);
  border: 1px solid var(--fr-line-soft);
  border-radius: 2px;
  font: 9px var(--font-display);
  letter-spacing: .03em;
  cursor: pointer;
}
.forge-remaster .forge-filter:hover,
.forge-remaster .forge-filter.is-active { color: var(--fr-gold-bright); border-color: rgba(208,160,67,.62); background: rgba(87,57,16,.30); }
.forge-remaster .forge-subhead { margin-top: 12px; }
.forge-remaster .forge-inv-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 7px; }
.forge-remaster .forge-cell {
  width: 100%;
  min-height: 62px;
  padding: 8px;
  color: var(--fr-text);
  background: rgba(42,31,18,.66);
  border: 1px solid var(--fr-line-soft);
  border-radius: 3px;
  text-align: left;
  transition: border-color .14s, background .14s;
}
.forge-remaster .forge-cell:hover { border-color: rgba(208,160,67,.48); background: rgba(57,41,21,.76); }
.forge-remaster .forge-cell[hidden] { display: none; }
.forge-remaster .forge-cell[aria-pressed="true"] {
  border-color: var(--fr-gold);
  background: linear-gradient(90deg, rgba(102,67,17,.55), rgba(39,28,16,.75));
  box-shadow: inset 3px 0 var(--fr-gold-bright);
}
.forge-remaster .forge-cell-art { width: 46px; height: 46px; border-radius: 2px; object-fit: contain; }
.forge-remaster .forge-glyph { object-fit: contain; }
.forge-remaster .gear-fallback-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.forge-remaster .gear-fallback-img { filter: grayscale(1) brightness(1.15); }
.forge-remaster .rarity-uncommon .gear-fallback-img { filter: sepia(.8) saturate(4) hue-rotate(70deg) brightness(.9); }
.forge-remaster .rarity-rare .gear-fallback-img { filter: sepia(1) saturate(5) hue-rotate(165deg) brightness(.95); }
.forge-remaster .rarity-epic .gear-fallback-img { filter: sepia(1) saturate(5) hue-rotate(235deg) brightness(.95); }
.forge-remaster .rarity-legendary .gear-fallback-img { filter: sepia(1) saturate(6) hue-rotate(350deg) brightness(1.05); }
.forge-remaster .rarity-mythic .gear-fallback-img { filter: sepia(1) saturate(6) hue-rotate(315deg) brightness(1); }
.forge-remaster .inv-name { font-size: 13px; }
.forge-remaster .inv-meta { margin-top: 2px; color: var(--fr-muted); font-size: 9px; line-height: 1.35; }
.forge-remaster .forge-fervor-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 5px;
  color: #d9bb7a;
  background: rgba(70, 42, 17, .72);
  border: 1px solid rgba(188, 126, 48, .55);
  border-radius: 2px;
  font: 700 9px/1.45 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.forge-remaster .forge-fervor-badge > i {
  width: 5px;
  height: 5px;
  background: #b96a2e;
  border: 1px solid #e0a14f;
  transform: rotate(45deg);
}

/* LISTASSA merkki on täytetty siru, ei ääriviiva. "Mihin jäin" on se kysymys
   jolla ahjolle palataan parin päivän tauon jälkeen, ja siihen vastataan
   silmäilemällä — ääriviivainen pronssi katosi rarity-värien ja metarivin
   sekaan, kun taas viereinen enchantin +N luki heti. Nämä kaksi ovat saman
   arvoisia (kertynyttä työtä esineessä), joten ne saavat saman painon.
   Alasimen otsikossa hiljaisempi versio jää voimaan: siellä merkki on yksin
   ison nimen vieressä eikä kilpaile mistään. */
.forge-remaster .forge-cell .forge-fervor-badge {
  margin-left: 5px;
  color: #2b1a07;
  background: #d59444;
  border-color: #f2c37a;
}
.forge-remaster .forge-cell .forge-fervor-badge > i {
  background: #6b3a12;
  border-color: #8a4f18;
}

/* Central item stage */
.forge-remaster .forge-stage-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.forge-remaster .forge-stage-title {
  padding: 13px 20px 0;
  text-align: center;
  text-shadow: 0 3px 8px #000;
}
.forge-remaster .forge-stage-title h1 {
  margin: 1px 0 0;
  color: #eed8a9;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 31px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* PYSTYSUUNNAN VARAUS VAIHTOI PAIKKAA (30.8.2026, omistajan pyyntö).
   Ennen alasin varasi kiinteän korkeuden ja ohjauspaneeli kasvoi siitä
   alaspäin. Perustelu oli oikea — välilehtirivi ei saa hypätä kun paneelin
   sisältö vaihtuu — mutta hinta oli että paneeli jäi keskelle ja taustataide
   näkyi vain kuolleena kaistaleena sen alla.

   Mitattu 2552x1226: paneeli on Reforgessa 334, Enchantissa 451, Ascendissa
   420 ja Runework auki 545. Kiinteä alasin jätti sille 518, joten Runework
   valui 28 px palstan ja 10 px IKKUNAN ulkopuolelle — pohja oli taitteen alla.

   Nyt varaus on paneelilla ja alasin joustaa. Sama lupaus pitää: paneelin
   yläreuna ei liiku, koska sen korkeus on varattu. Mutta paneeli on nyt
   palstan pohjassa ja liikkuva tila kertyy alasimen ympärille — ja koska kehä
   on läpinäkyvä, se tila NÄKYY taustataiteena. Runework auki syö varauksen yli
   ja lainaa alasimelta, joka kutistuu min-heightiinsa asti; ulos ruudusta ei
   enää valuta. */
.forge-remaster .forge-anvil {
  flex: 1 1 auto;
  min-height: clamp(310px, 34dvh, 440px);
  justify-content: center;
  gap: 8px;
  padding: 16px 12px 12px;
}
.forge-remaster .forge-anvil-empty { opacity: .8; }
.forge-remaster .forge-hero-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(210px, 24vw, 320px);
  aspect-ratio: 1;
  border: 1px solid rgba(105,184,179,.38);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,157,153,.13), rgba(6,4,2,.1) 52%, transparent 70%);
  box-shadow: inset 0 0 38px rgba(77,151,148,.07), 0 0 38px rgba(0,0,0,.34);
}
.forge-remaster .forge-hero-orbit::before,
.forge-remaster .forge-hero-orbit::after {
  content: "";
  position: absolute;
  inset: 11%;
  border: 1px dashed rgba(208,160,67,.28);
  border-radius: 50%;
}
.forge-remaster .forge-hero-orbit::after { inset: 25%; border-style: solid; border-color: rgba(105,184,179,.22); }
.forge-remaster .forge-hero-orbit > i {
  position: absolute;
  z-index: 2;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid var(--fr-cyan);
  background: #132523;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 8px rgba(113,184,179,.6);
}
.forge-remaster .forge-hero-orbit > i:nth-child(2) { inset: 50% -4px auto auto; }
.forge-remaster .forge-hero-orbit > i:nth-child(3) { inset: auto auto -4px 50%; }
.forge-remaster .forge-hero-orbit > i:nth-child(4) { inset: 50% auto auto -4px; }
.forge-remaster .forge-hero-aura { position: absolute; inset: 29%; border-radius: 50%; background: rgba(208,160,67,.14); filter: blur(12px); }
.forge-remaster .forge-hero-art {
  position: relative;
  z-index: 3;
  width: 68%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 15px 11px rgba(0,0,0,.9)) drop-shadow(0 0 11px rgba(113,184,179,.28));
}
.forge-remaster .forge-hero-fallback { position: relative; z-index: 3; display: grid; justify-items: center; gap: 9px; }
.forge-remaster .forge-hero-fallback img { width: 82px; height: 82px; }
.forge-remaster .forge-hero-fallback b { font: 11px var(--font-display); text-transform: uppercase; }
.forge-remaster .forge-anvil-id { gap: 2px; }
.forge-remaster .forge-slot-name { font-size: clamp(18px, 1.5vw, 24px); }
.forge-remaster .forge-slot-meta { color: #ad9c7b; }

/* Operation deck */
/* Varaus (ks. .forge-anvil): tämä min-height pitää paneelin YLÄREUNAN
   paikallaan välilehteä vaihdettaessa, ja koska alasin on flex: 1 1 auto,
   paneeli painuu palstan pohjaan. 38dvh kattaa mitatun korkeimman suljetun
   tilan (451 px @1226 -> varaus 466). */
.forge-remaster .forge-control-deck {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  min-height: clamp(340px, 38dvh, 470px);
  margin: 0 13px 14px;
  background: rgba(14,9,5,.94);
  border: 1px solid var(--fr-line);
  box-shadow: 0 13px 30px rgba(0,0,0,.48);
}
.forge-remaster .forge-operation-tabs { display: grid; flex: 0 0 auto; grid-template-columns: repeat(3, 1fr); }
.forge-remaster .forge-operation-tab {
  min-height: 58px;
  padding: 9px 10px;
  color: #897b62;
  background: rgba(28,20,11,.70);
  border: 0;
  border-bottom: 1px solid var(--fr-line-soft);
  cursor: pointer;
}
.forge-remaster .forge-operation-tab + .forge-operation-tab { border-left: 1px solid var(--fr-line-soft); }
.forge-remaster .forge-operation-tab b { display: block; color: #c9b78f; font: 700 12px var(--font-display); letter-spacing: .09em; text-transform: uppercase; }
.forge-remaster .forge-operation-tab small { display: block; margin-top: 3px; color: #786c57; font-size: 9px; }
.forge-remaster .forge-operation-tab:hover,
.forge-remaster .forge-operation-tab.is-active { background: linear-gradient(180deg, rgba(91,60,18,.43), rgba(35,24,12,.72)); border-bottom-color: var(--fr-gold); }
.forge-remaster .forge-operation-tab.is-active b { color: var(--fr-gold-bright); }
.forge-remaster .forge-control-body {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(280px, 1.8fr);
  gap: 12px;
  padding: 12px;
}
.forge-remaster .forge-control-item { padding-right: 12px; border-right: 1px solid var(--fr-line-soft); }
.forge-remaster .forge-item-details { margin: 0; padding: 0; border: 0; }
.forge-remaster .fi-affix { border-radius: 2px; }
.forge-remaster .forge-operation-focus { min-width: 0; }
.forge-remaster .forge-enchant-path,
.forge-remaster .forge-ascend-path {
  margin-bottom: 10px;
  padding: 9px 11px 8px;
  background: rgba(14, 11, 7, .72);
  border: 1px solid var(--fr-line-soft);
  box-shadow: inset 0 1px rgba(211, 165, 79, .06);
}
.forge-remaster .forge-enchant-path-head,
.forge-remaster .forge-ascend-path-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.forge-remaster .forge-enchant-path-head span,
.forge-remaster .forge-ascend-path-head span {
  color: var(--fr-gold);
  font: 700 11px var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.forge-remaster .forge-enchant-path-head b,
.forge-remaster .forge-ascend-path-head b {
  color: #bdae90;
  font-size: 11px;
  font-weight: 600;
}
.forge-remaster .forge-enchant-journey,
.forge-remaster .forge-ascend-journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--journey-count), minmax(0, 1fr));
  align-items: start;
}
.forge-remaster .forge-enchant-track,
.forge-remaster .forge-ascend-track {
  position: absolute;
  top: 17px;
  left: calc(50% / var(--journey-count));
  right: calc(50% / var(--journey-count));
  height: 2px;
  overflow: hidden;
  background: #342b1d;
  border-top: 1px solid #17110a;
  box-shadow: 0 1px rgba(119, 93, 48, .16);
}
.forge-remaster .forge-enchant-track > i,
.forge-remaster .forge-ascend-track > i {
  display: block;
  height: 100%;
  background: #a8792d;
  box-shadow: 0 0 5px rgba(194, 143, 55, .35);
}
.forge-remaster .forge-enchant-tier,
.forge-remaster .forge-ascend-tier {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 3px;
  color: #675d4d;
}
.forge-remaster .forge-enchant-tier > i,
.forge-remaster .forge-ascend-tier > i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #8c806c;
  background: #15110c;
  border: 1px solid #403522;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #0c0906;
  font: normal 700 13px var(--font-display);
}
.forge-remaster .forge-enchant-tier > small,
.forge-remaster .forge-ascend-tier > small {
  color: currentColor;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
}
.forge-remaster .forge-enchant-tier.is-complete,
.forge-remaster .forge-ascend-tier.is-complete { color: #9c7c45; }
.forge-remaster .forge-enchant-tier.is-complete > i,
.forge-remaster .forge-ascend-tier.is-complete > i {
  color: #d4b575;
  background: #2a2012;
  border-color: #755623;
}
.forge-remaster .forge-enchant-tier.is-current,
.forge-remaster .forge-ascend-tier.is-current { color: #e0bd71; }
.forge-remaster .forge-enchant-tier.is-current > i,
.forge-remaster .forge-ascend-tier.is-current > i {
  color: #f0d28c;
  background: #4a3314;
  border-color: #d19a37;
  box-shadow: inset 0 0 0 2px #171006, 0 0 8px rgba(193, 139, 46, .32);
}
.forge-remaster .forge-enchant-tier.is-target,
.forge-remaster .forge-ascend-tier.is-target { color: #84bab6; }
.forge-remaster .forge-enchant-tier.is-target > i,
.forge-remaster .forge-ascend-tier.is-target > i {
  color: #a9d6d2;
  background: #142321;
  border-color: #59938f;
  box-shadow: inset 0 0 0 2px #09100f, 0 0 7px rgba(90, 153, 148, .25);
}
/* Rarity-nimi portaan alla. Väri tulee pelin kanonisesta .rarity-*-luokasta,
   joten tämä sääntö ei aseta väriä lainkaan — se vain mitoittaa rivin. Nimi
   himmenee kun porras on vielä edessä, jotta ympyröiden tilakieli (tehty /
   tässä / seuraava) pysyy pääasiana eikä kuusi täyteläistä rarity-väriä
   kilpaile keskenään. */
.forge-remaster .forge-ascend-tier > b {
  max-width: 100%;
  overflow: hidden;
  font: 700 10px var(--font-display);
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .45;
}
/* Failstack-luku tavoiteympyrän kulmassa + sen tuoma nosto prosentin perässä.
   Sama pronssi kuin esineen nimen Fervor-merkissä, jotta ne luetaan samaksi
   asiaksi. Ympyrä tarvitsee position: relative -ankkurin, ks. > i alla. */
.forge-remaster .forge-ascend-tier > i { position: relative; }
.forge-remaster .forge-ascend-fervor {
  position: absolute;
  top: -3px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 2px;
  color: #f0cf8d;
  background: #52300f;
  border: 1px solid #c98c3c;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #120c05;
  font: 700 9px/1 var(--font-display);
  font-style: normal;
}
.forge-remaster .forge-ascend-boost {
  color: #d9bb7a;
  font-style: normal;
  font-weight: 700;
}
.forge-remaster .forge-ascend-tier.is-complete > b,
.forge-remaster .forge-ascend-tier.is-current > b,
.forge-remaster .forge-ascend-tier.is-target > b { opacity: 1; }
.forge-remaster .forge-ascend-tier.is-current > b { text-decoration: underline; text-underline-offset: 2px; }
.forge-remaster .forge-offering {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  margin-bottom: 9px;
  padding: 7px 10px;
  background: rgba(33,25,14,.58);
  border: 1px solid rgba(113,184,179,.30);
  box-shadow: inset 3px 0 rgba(113,184,179,.55);
}
.forge-remaster .forge-offering.is-missing { display: grid; gap: 1px; border-color: rgba(153,77,63,.36); box-shadow: inset 3px 0 rgba(153,77,63,.55); }
.forge-remaster .forge-offering > img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 4px 5px #000); }
.forge-remaster .forge-offering-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.forge-remaster .forge-offering b { color: var(--fr-text); font-size: 13px; }
.forge-remaster .forge-offering small { color: var(--fr-muted); font-size: 10px; }
.forge-remaster .forge-op {
  border-radius: 2px;
  background: rgba(24,18,11,.72);
  border-color: var(--fr-line-soft);
  border-left-color: var(--fr-gold);
}
.forge-remaster .forge-op-title { color: var(--fr-gold-bright); }
.forge-remaster .forge-op-btn { min-height: 44px; }
.forge-remaster .forge-op-certain {
  --btn-band-top: transparent;
  --btn-band-bot: transparent;
  --btn-edge: var(--fr-gold);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 198px;
  color: var(--fr-gold-bright);
  line-height: 1.05;
}
.forge-remaster .forge-op-certain-label { font: 700 11px var(--font-display); letter-spacing: .025em; }
.forge-remaster .forge-op-certain-cost { color: var(--fr-muted); font: 11px var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.forge-remaster .forge-op-certain:hover {
  --btn-band-top: rgba(201, 162, 75, .12);
  --btn-band-bot: rgba(201, 162, 75, .12);
}
.forge-remaster .forge-control-deck > .cap-note { flex: 0 0 auto; margin: 0; padding: 0 12px 12px; color: #796d58; font-size: 10px; }
.forge-remaster .forge-runework { margin-top: 8px; border-top: 1px solid var(--fr-line-soft); }
.forge-remaster .forge-runework summary { padding: 9px 2px 5px; color: var(--fr-gold); font: 11px var(--font-display); cursor: pointer; text-transform: uppercase; }
.forge-remaster .forge-runework summary span { margin-left: 5px; color: var(--fr-muted); font: 9px var(--font-body); text-transform: none; }
.forge-remaster .forge-runework .forge-op { margin-top: 6px; }

/* Supplies rail */
.forge-remaster .forge-panel-head { align-items: flex-start; }
.forge-remaster .forge-panel-head h2 { margin-top: 5px; font-size: 12px; }
.forge-remaster .gold-line { color: var(--fr-text); font-size: 11px; }
.forge-remaster .forge-info-btn { width: 28px; height: 28px; }
.forge-remaster .forge-cons-grid { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.forge-remaster .forge-rail-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 10px -15px 0;
  border-block: 1px solid var(--fr-line-soft);
}
.forge-remaster .forge-rail-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 5px;
  color: #82755f;
  background: rgba(20, 14, 8, .68);
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font: 700 9px var(--font-display);
  letter-spacing: .035em;
  text-transform: uppercase;
}
.forge-remaster .forge-rail-tab + .forge-rail-tab { border-left: 1px solid var(--fr-line-soft); }
.forge-remaster .forge-rail-tab:hover { color: #c7b58f; background: rgba(53, 38, 18, .66); }
.forge-remaster .forge-rail-tab.is-active {
  color: var(--fr-gold-bright);
  background: linear-gradient(180deg, rgba(83, 55, 17, .48), rgba(29, 20, 10, .78));
  border-bottom-color: var(--fr-gold);
}
.forge-remaster .forge-rail-tab:focus-visible { position: relative; z-index: 2; outline: 1px solid var(--fr-cyan); outline-offset: -3px; }
.forge-remaster .forge-rail-tab small {
  min-width: 17px;
  padding: 2px 4px;
  color: #a79573;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(130, 100, 48, .28);
  border-radius: 8px;
  font: 8px var(--font-body);
  letter-spacing: 0;
}
.forge-remaster .forge-rail-pane {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -15px -15px;
  padding: 0 15px 15px;
  overflow-y: auto;
  scrollbar-color: rgba(185,132,42,.46) rgba(0,0,0,.2);
}
.forge-remaster .forge-rail-pane[hidden] { display: none; }
.forge-remaster .forge-cons {
  gap: 0;
  padding: 0;
  overflow: hidden;
  color: var(--fr-text);
  background: rgba(41,30,17,.58);
  border-color: var(--fr-line-soft);
  border-radius: 3px;
  transition: border-color .14s, background .14s;
}
.forge-remaster .forge-cons.is-relevant {
  border-color: rgba(113,184,179,.62);
  background: rgba(27,54,51,.28);
  box-shadow: inset 3px 0 var(--fr-cyan);
}
.forge-remaster .fc-select {
  display: grid;
  grid-template-columns: 43px 1fr;
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 8px 9px;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.forge-remaster .fc-select:hover { background: rgba(88,62,25,.18); }
.forge-remaster .fc-select:focus-visible { outline: 1px solid var(--fr-cyan); outline-offset: -2px; }
.forge-remaster .fc-art { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 4px 5px #000); }
.forge-remaster .fc-copy { min-width: 0; }
.forge-remaster .fc-head { width: 100%; }
.forge-remaster .fc-name { color: #d7c8a8; font-size: 12px; }
.forge-remaster .fc-qty { color: var(--fr-gold); font-size: 11px; }
.forge-remaster .fc-blurb { display: block; min-height: 0; margin-top: 2px; color: var(--fr-muted); font-size: 9px; }
.forge-remaster .fc-foot { margin: 0; padding: 0 8px 8px 60px; gap: 6px; }
.forge-remaster .fc-buy { --btn-inset: 3px; flex: 1; min-width: 0; min-height: 31px; padding: 5px 7px; font-size: 10px; }
.forge-remaster .forge-supplies > .cap-note { font-size: 10px; line-height: 1.45; }
.forge-remaster .forge-guarantees { margin-top: 0; padding-top: 13px; border-top: 0; }
.forge-remaster .forge-guar {
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.forge-remaster .forge-guar:hover { background: rgba(67,48,24,.55); }
.forge-remaster .forge-spolia { height: auto; padding-top: 13px; border-top: 0; }
.forge-remaster .forge-spolia h2 { margin: 0 0 7px; color: var(--fr-gold); font-size: 13px; }
.forge-remaster .forge-spolia .forge-lead { color: #9d8e70; font-size: 11px; }
/* Spolia-paneelilla ei ollut kuvaa lainkaan, vaikka sealed-spolia.webp on
   levyllä — sama aukko kuin premium-kaupan Imperial Cache -kortissa. Kuva
   tekstin viereen, ei sen päälle: lead on täällä 11 px eikä kestä kavennusta
   kapeimmassa sarakkeessa. */
.forge-remaster .forge-spolia-lead { display: flex; align-items: flex-start; gap: 10px; }
.forge-remaster .forge-spolia-art { flex: 0 0 auto; width: 48px; height: 48px; object-fit: contain; }
@media (max-width: 1080px) {
  .forge-remaster .forge-spolia-art { width: 40px; height: 40px; }
}

@media (max-width: 1320px) {
  .forge-remaster .forge-workshop { grid-template-columns: 250px minmax(470px, 1fr) 310px; padding: 12px; }
  .forge-remaster .forge-control-body { grid-template-columns: 1fr; }
  .forge-remaster .forge-control-item { padding: 0 0 9px; border-right: 0; border-bottom: 1px solid var(--fr-line-soft); }
}

@media (max-width: 1080px) {
  .forge-remaster .forge-workshop { grid-template-columns: minmax(230px, 280px) 1fr; height: 100%; overflow-y: auto; }
  .forge-remaster .forge-col-slot { overflow: visible; }
  .forge-remaster .forge-col-shop { grid-column: 1 / -1; display: block; height: 540px; overflow: hidden; }
  .forge-remaster .forge-inv { overflow: auto; }
  .forge-remaster .forge-col-shop .imm-card { border-radius: 0; }
}

@media (max-width: 760px) {
  .forge-remaster .forge-workshop { display: block; height: auto; padding: 0; overflow: visible; }
  .forge-remaster .forge-col { width: 100%; overflow: visible; }
  /* YKSI VIERITYSAKSELI. Työpöydällä armory ja tarvikekisko ovat omia
     ikkunoitaan täyden korkuisessa pajassa, ja se on siellä oikein: paja
     mahtuu ruutuun kerralla. Puhelimessa samat säännöt tekivät niistä kaksi
     erillistä vieritintä 2 384 px:n sivun sisällä (mitattu 390×844:ssä:
     armory 430 px laatikko / 1 349 px sisältöä, kisko 439 / 613). Kosketuksella
     se on kaksi vikaa yhdessä: veto listan päällä liikuttaa laatikkoa eikä
     sivua, ja armoryn ensimmäiseen 430 pikseliin mahtui vain otsikko, haku,
     suodatinrivi ja arkkulokero — YHTÄÄN varustetta ei näkynyt ennen kuin
     laatikkoa vieritti erikseen. Kapealla molemmat virtaavat sivun mukana. */
  .forge-remaster .forge-inv { height: auto; max-height: none; overflow: visible; }
  .forge-remaster .forge-col-shop { display: block; height: auto; overflow: visible; }
  .forge-remaster .forge-supplies { height: auto; overflow: visible; }
  .forge-remaster .forge-rail-pane { overflow: visible; }
  .forge-remaster .forge-anvil { min-height: 310px; }
  .forge-remaster .forge-hero-orbit { width: min(260px, 76vw); }
  .forge-remaster .forge-control-deck { display: block; flex: none; height: auto; min-height: 0; }
  .forge-remaster .forge-operation-tab small { display: none; }
  .forge-remaster .forge-control-body { display: block; }
  .forge-remaster .forge-control-item { margin-bottom: 10px; }
  .forge-remaster .forge-op { align-items: stretch; flex-direction: column; }
  .forge-remaster .forge-op-acts { justify-content: stretch; }
  .forge-remaster .forge-op-btn { flex: 1; }
  .forge-remaster .forge-enchant-path-head,
  .forge-remaster .forge-ascend-path-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  /* Kuusi porrasta puhelimen leveydellä = ~43 px per porras, johon sana
     "LEGENDARY" ei mahdu millään luettavalla koolla; ellipsi teki siitä
     "LEGEN…". Nimi jää siis pois ja RARITY-VÄRI siirtyy ympyrään, jolloin
     porras tunnistuu yhä väristä ja alkukirjaimesta. Koko nimi on tallessa
     tooltipissa ja otsikon "Current X · Next Y" -rivillä. */
  .forge-remaster .forge-ascend-tier > b { display: none; }
  /* Työnjako kapealla: YMPYRÄN TAUSTA kertoo etenemisen (tehty / tässä /
     seuraava) ja KIRJAIMEN VÄRI rarityn. Valitsin on tarkoituksella yhtä
     tarkka kuin .is-complete/.is-current/.is-target -säännöt ja tulee
     tiedostossa niiden jälkeen, joten se voittaa niistä vain värin ja jättää
     taustan, reunan ja varjon tilan käyttöön. */
  .forge-remaster .forge-ascend-journey .forge-ascend-tier > i { color: var(--tier-rarity, #8c806c); }
}

@media (prefers-reduced-motion: no-preference) {
  .forge-remaster .forge-hero-orbit::before { animation: forge-remaster-turn 28s linear infinite; }
  .forge-remaster .forge-hero-orbit::after { animation: forge-remaster-turn 19s linear infinite reverse; }
  .forge-remaster .forge-hero-aura { animation: forge-remaster-breathe 3.2s ease-in-out infinite; }
  .forge-remaster .forge-enchant-tier.is-target > i { animation: forge-remaster-target 2.2s ease-in-out infinite; }
}
@keyframes forge-remaster-turn { to { transform: rotate(360deg); } }
@keyframes forge-remaster-breathe { 50% { opacity: .5; transform: scale(1.13); } }
@keyframes forge-remaster-target { 50% { border-color: #75b7b2; box-shadow: inset 0 0 0 2px #09100f, 0 0 11px rgba(90, 153, 148, .4); } }

@media (prefers-reduced-motion: reduce) {
  .forge-remaster *,
  .forge-remaster *::before,
  .forge-remaster *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}