/* Guild Facelift — Brand v0.1 / system:guild-command / B — Vexillum Hall.
   Scope every rule to the Guild surface; legacy/global primitives stay intact. */
@font-face {
  font-family: "Inter Guild";
  src: url("/assets/fonts/inter-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

.guild-facelift {
  --gf-ink: #f4ead1;
  --gf-muted: #b8a681;
  --gf-gold: #e2b84f;
  --gf-gold-hi: #f4d980;
  --gf-line: rgba(202, 151, 55, .28);
  --gf-line-strong: rgba(226, 184, 79, .62);
  --gf-panel: rgba(15, 10, 7, .94);
  --gf-panel-soft: rgba(25, 15, 9, .88);
  color: var(--gf-ink);
  font-family: "Inter Guild", Inter, system-ui, sans-serif;
  overflow-x: clip;
}

.guild-facelift h1,
.guild-facelift h2,
.guild-facelift h3,
.guild-facelift .gf-eyebrow,
.guild-facelift .guild-rank,
.guild-facelift .section-nav-item,
.guild-facelift .tabbtn {
  font-family: var(--font-display), Cinzel, Georgia, serif;
}

.guild-facelift .guild-scene::after {
  background: linear-gradient(180deg, rgba(5, 3, 2, .18), rgba(8, 5, 3, .72) 48%, rgba(5, 3, 2, .96));
}

.guild-facelift .imm-stack-xwide { width: min(1270px, calc(100% - 28px)); }
.guild-facelift .imm-card {
  color: var(--gf-ink);
  background: linear-gradient(180deg, rgba(20, 13, 8, .97), rgba(9, 6, 4, .98));
  border-color: var(--gf-line);
  border-radius: 0;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .34);
}
.guild-facelift .imm-card h2,
.guild-facelift .imm-card h3 { color: var(--gf-gold-hi); }
.guild-facelift .btn { min-height: 44px; border-radius: 0; }
.guild-facelift .btn-primary {
  color: #251506;
  background: linear-gradient(180deg, #dba63e, #9e5e1e);
  border-color: #efc65d;
}

.guild-facelift .guild-top-tabbar {
  margin: 0;
  border: 1px solid var(--gf-line);
  background: rgba(5, 3, 2, .96);
  border-radius: 0;
}
.guild-facelift .guild-top-tabbar .tabbtn,
.guild-facelift .guild-top-tabbar .section-nav-item {
  min-height: 48px;
  padding: 10px 30px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: 11px;
}
.guild-facelift .guild-top-tabbar [aria-current="page"],
.guild-facelift .guild-top-tabbar [aria-selected="true"] {
  color: var(--gf-gold-hi);
  box-shadow: inset 0 -2px var(--gf-gold);
  background: rgba(99, 53, 16, .24);
}

.gf-eyebrow,
.guild-facelift .gw-eyebrow {
  display: block;
  color: var(--gf-gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* Guild identity hero.
   Tausta on KOLME kerrosta eikä yksi background-lyhenne, koska kilta valitsee
   kuvan ja sävyn erikseen (migraatio 0133):

     1 scrim  (päällimmäisenä)  tummennus jonka päällä teksti lepää
     2 hue    (blend: color)    killan väri — ottaa kuvan VALOISUUDEN ja antaa
                                sille oman sävynsä, joten väri näkyy vahvana
                                mutta kontrasti ei muutu
     3 scene                    itse maalaus

   MIKSI blend eikä vahvempi läpinäkyvä väri: .55-alfainen värilasi maalatun
   auringonlaskun päällä katosi lähes näkymättömiin (mitattu 9.9.2026), ja
   alfan nostaminen olisi haudannut taiteen. 'color'-blend vaihtaa sävyn
   säilyttäen valoisuuden — juuri se mitä "killan oma väri" tarkoittaa.

   Oletus 'ember' on TÄYSIN LÄPINÄKYVÄ hue-kerros, joten oletusbanneri on
   pikselintarkasti tuotannon nykyinen ulkoasu. Sama koskee attribuutitonta
   banneria (vanha rivi, ajamaton migraatio). */
.gf-guild-banner {
  --gf-banner-scene: url("/assets/scenes/guild.jpg");
  --gf-banner-hue: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  --gf-banner-tint: linear-gradient(90deg, rgba(7, 4, 3, .9), rgba(36, 18, 7, .55) 48%, rgba(7, 4, 3, .88));
  position: relative;
  min-height: 260px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 42px 54px;
  overflow: hidden;
  text-align: center;
  background-image: var(--gf-banner-tint), var(--gf-banner-hue), var(--gf-banner-scene);
  background-blend-mode: normal, color, normal;
  background-position: center 44%;
  background-size: cover;
  border: 1px solid var(--gf-line-strong);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .7), 0 16px 44px rgba(0, 0, 0, .45);
}
/* Killan valitsema taustakuva. ID:T OVAT DB-DATAA (worker/lib/validate.js:n
   GUILD_BANNER_SCENES) ja tiedostonimet peilaavat public/assets/guildBanner.js:ää
   — guild-banner-parity.test.js vaatii kaikki kolme identtisiksi ja tiedostot
   levylle. 'castra' on nykyinen guild.jpg eli oletus, joten sillä ei ole omaa
   sääntöä: se on jo .gf-guild-bannerin lähtöarvo. */
.gf-guild-banner[data-banner="forum"] { --gf-banner-scene: url("/assets/scenes/guild-banner-forum.jpg"); }
.gf-guild-banner[data-banner="limes"] { --gf-banner-scene: url("/assets/scenes/guild-banner-limes.jpg"); }
.gf-guild-banner[data-banner="portus"] { --gf-banner-scene: url("/assets/scenes/guild-banner-portus.jpg"); }
.gf-guild-banner[data-banner="silva"] { --gf-banner-scene: url("/assets/scenes/guild-banner-silva.jpg"); }
.gf-guild-banner[data-banner="harena"] { --gf-banner-scene: url("/assets/scenes/guild-banner-harena.jpg"); }
.gf-guild-banner[data-banner="deserta"] { --gf-banner-scene: url("/assets/scenes/guild-banner-deserta.jpg"); }

/* Sävy = hue-kerros (killan väri) + scrim (tummennus).
   SCRIM KÄYTTÄÄ JOKAISELLA SÄVYLLÄ TÄSMÄLLEEN SAMOJA LÄPINÄKYVYYKSIÄ kuin
   oletus (.9 reunoilla, .55 keskellä, .88 oikealla). Se on koko
   kontrastilupaus: tekstin taakse jäävä tummennus on sama riippumatta siitä
   minkä kilta valitsee, joten yksikään sävy ei voi haudata kiltansa nimeä.
   Uutta sävyä lisättäessä ÄLÄ nosta scrimin keskikohdan kirkkautta tai laske
   sen alfaa — ja mittaa aina scripts/guild-banner-contrast.mjs:llä.
   Hue-kerroksen alfa saa vaihdella: 'color'-blend ei muuta valoisuutta. */
.gf-guild-banner[data-tint="crimson"] {
  --gf-banner-hue: linear-gradient(rgba(158, 43, 43, .82), rgba(158, 43, 43, .82));
  --gf-banner-tint: linear-gradient(90deg, rgba(9, 3, 3, .9), rgba(58, 12, 14, .55) 48%, rgba(9, 3, 3, .88));
}
.gf-guild-banner[data-tint="azure"] {
  --gf-banner-hue: linear-gradient(rgba(46, 94, 158, .82), rgba(46, 94, 158, .82));
  --gf-banner-tint: linear-gradient(90deg, rgba(3, 5, 9, .9), rgba(10, 28, 54, .55) 48%, rgba(3, 5, 9, .88));
}
.gf-guild-banner[data-tint="verdigris"] {
  --gf-banner-hue: linear-gradient(rgba(42, 107, 99, .82), rgba(42, 107, 99, .82));
  --gf-banner-tint: linear-gradient(90deg, rgba(3, 7, 6, .9), rgba(10, 42, 38, .55) 48%, rgba(3, 7, 6, .88));
}
.gf-guild-banner[data-tint="violet"] {
  --gf-banner-hue: linear-gradient(rgba(110, 58, 140, .82), rgba(110, 58, 140, .82));
  --gf-banner-tint: linear-gradient(90deg, rgba(7, 4, 9, .9), rgba(38, 16, 52, .55) 48%, rgba(7, 4, 9, .88));
}
/* Ash on värin poisto, ei väri: harmaa hue-kerros vie kylläisyyden ja jättää
   valoisuuden — kaiverrettu kivi maalatun auringonlaskun sijaan. */
.gf-guild-banner[data-tint="ash"] {
  --gf-banner-hue: linear-gradient(rgba(128, 128, 128, .9), rgba(128, 128, 128, .9));
  --gf-banner-tint: linear-gradient(90deg, rgba(5, 5, 5, .9), rgba(26, 26, 26, .55) 48%, rgba(5, 5, 5, .88));
}

.gf-banner-crest { display: grid; place-items: center; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .8)); }
.gf-banner-crest .guild-crest { width: 118px; height: 118px; }
.gf-banner-copy { min-width: 0; }
.gf-banner-copy h2 {
  margin: 4px 0 8px;
  color: #fff6df;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: .09em;
  line-height: 1.08;
  text-transform: uppercase;
  text-shadow: 0 3px 15px #000;
}
.gf-banner-copy h2 span { color: var(--gf-gold); font-size: .52em; white-space: nowrap; }
.gf-banner-copy p { max-width: 62ch; margin: 0 auto; color: #e8d5ad; line-height: 1.55; }
/* Killan julkinen kuvaus on bannerissa sankaritekstiä, ei lomakekenttä:
   .guild-desc maalaa styles.css:ssä oman PERGAMENTTIpintansa tummaa korttia
   varten, ja bannerissa se näkyi vaaleana laattana jonka päällä vaalea
   hero-teksti katosi (omistajan staging-kuva 6.9.2026). */
.gf-banner-copy .guild-desc {
  padding: 0; background: none; border-radius: 0;
  color: #e8d5ad; font-size: 13.5px;
}
.gf-banner-copy strong { display: block; margin-top: 12px; color: var(--gf-gold-hi); font: 700 10px/1.3 var(--font-display), serif; letter-spacing: .12em; text-transform: uppercase; }
/* TUNNUSLUVUT KUVAN PÄÄLLÄ, EI LAATIKOSSA (omistajan kuva 9.9.2026). Musta
   laatta istui bannerin keskikorkeudella ja peitti juuri sen kaistan johon
   kuvien soihdut, kaaret ja horisontti osuvat — se on kuvan luetuin osa.

   OIKEA ALANURKKA ON VALITTU KONTRASTIN VUOKSI, EI SOMMITTELUN: scrim on
   reunoilla .88-.90 ja keskellä .55, joten laatan poisto maksaa vähiten juuri
   siellä. `node scripts/guild-banner-contrast.mjs` mittaa tämän nurkan omana
   alueenaan (x 0.72-0.97, y 0.62-1.0, ink #fff0c0). Mitattu 9.9.2026
   seitsemältä kuvalta ja kuudelta sävyltä: huonoin p05 7.82 (forum/verdigris),
   paras 14.84, kun raja on 3.0. Aja mittaus uudelleen jos tähän tulee uutta
   taidetta — laatta ei ole enää turvaverkkona. */
.gf-banner-stats {
  position: absolute;
  right: 54px;
  bottom: 26px;
  display: flex;
  gap: 26px;
  min-width: 0;
  margin: 0;
  text-align: right;
}
.gf-banner-stats div { padding: 0; border-left: 0; }
.gf-banner-stats dt { color: var(--gf-muted); font: 700 8px/1.2 var(--font-display), serif; letter-spacing: .14em; text-transform: uppercase; }
.gf-banner-stats dt { text-shadow: 0 2px 8px #000; }
.gf-banner-stats dd {
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  margin: 4px 0 0; color: #fff0c0; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
  text-shadow: 0 2px 10px #000;
}
/* Tunnuslukujen ikonit. Members, Honor ja kassa ovat kolme eri asiaa samassa
   numeroasussa, ja niiden otsikko on 8 px — mobiilissa se katoaa kokonaan.
   Kuvamerkki erottaa luvut yhdellä silmäyksellä ja korvaa kullan "G"-kirjaimen. */
.gf-stat-icon { flex: none; width: 15px; height: 15px; object-fit: contain; vertical-align: -3px; }
.gf-banner-action { position: absolute; right: 18px; top: 18px; }

.gf-command-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 18px;
  background: rgba(8, 5, 3, .94);
  border: solid var(--gf-line);
  border-width: 0 1px 1px;
}
.gf-command-strip p { margin: 3px 0 0; color: #ddc79c; }
/* Manage guild: kentät kahteen sarakkeeseen ja yksi tallennus (omistaja
   5.9.2026 "tämän manage guildin voisi optimoida"). Pystyjono vei koko
   ruudun korkeuden viidelle kentälle, ja jokaisella oli oma nappinsa.
   auto-fit putoaa yhteen sarakkeeseen kun tilaa on alle 330 px. */
.guild-facelift .guild-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: start;
  gap: 0 26px;
  margin-top: 10px;
}
.guild-facelift .gs-col { display: flex; flex-direction: column; min-width: 0; }
.guild-facelift .gs-col > * { margin: 0; }
/* NIMILAPUT VASEMPAAN LAITAAN, KENTÄT PINOON (omistaja 6.9.2026). Nimilappu
   kentän yläpuolella pakotti silmän hyppimään: jokainen rivi luettiin kahdesti,
   ensin otsikko ja sitten kenttä. Omassa sarakkeessaan nimilaput muodostavat
   yhden pystyrivin, ja rivien väliin riittää hiusviiva laatikoiden sijaan. */
.guild-facelift .gs-col .guild-field {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: start;
  gap: 4px 14px;
  padding: 9px 0;
  border-top: 1px solid rgba(201, 151, 68, .16);
}
.guild-facelift .gs-col > .guild-field:first-child { padding-top: 2px; border-top: 0; }
.guild-facelift .gs-col .guild-field > span { margin: 0; padding-top: 8px; font-size: 11px; }
/* Grid-osan automaattinen minimi on sen min-content: ilman tätä talon valikko
   levisi nimeään pitkän vaihtoehdon mittaiseksi ja työntyi sarakkeensa yli. */
.guild-facelift .gs-col .guild-field > * { min-width: 0; }
/* Kenttä ei levene tarpeettomasti: valikko ja tasoluku ovat lyhyitä arvoja,
   ja koko sarakkeen levyisinä ne näyttivät tekstikentiltä. */
.guild-facelift .gs-col .hsel { max-width: 240px; }
.guild-facelift .gs-col input[type=number] { max-width: 104px; }
.guild-facelift .gs-crest-row { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.guild-facelift .gs-crest-row .guild-create-preview { flex: none; margin: 0; }
/* Valitsin kääriytyy ITSE eikä työnnä esikatselua omalle rivilleen: vaakuna ja
   se mistä vaakuna tehdään kuuluvat vierekkäin. */
.guild-facelift .gs-crest-row .guild-picker { flex: 1 1 200px; min-width: 0; }
/* Bannerivalitsin. Näyte on SE KAISTA JONKA PELAAJA SAA eikä pikkuruutu koko
   kuvasta: banneri rajaa 1536x1024:stä vain keskikaistan (center 44% / cover),
   joten neliönäyte lupaisi taivasta ja maata joita ei koskaan näy. Sävy piirtyy
   näytteen päälle samana gradienttina kuin bannerissa. */
.guild-facelift .gs-banner-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
  width: 100%;
}
.guild-facelift .gs-banner-pick {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 0;
  overflow: hidden;
  color: var(--gf-ink);
  background: rgba(7, 4, 2, .8) center 44% / cover no-repeat;
  border: 1px solid var(--gf-line);
  border-radius: 0;
  cursor: pointer;
}
/* aspect-ratio EIKÄ kiinteä korkeus: 1536x315 on tasan se kaista jonka banneri
   rajaa työpöydällä (center 44% / cover), joten näyte pysyy rehellisenä myös
   kun sarakkeen leveys muuttuu. Sama luku on scripts/gen-thumbs.mjs:ssä. */
.guild-facelift .gs-banner-pick img {
  display: block;
  width: 100%;
  aspect-ratio: 1536 / 315;
  object-fit: cover;
  object-position: center;
}
/* Nimi kaistan päälle omalla tummennuksellaan: taide on eri kirkkauksista eikä
   pelkkä text-shadow riitä joka kuvalla. */
.guild-facelift .gs-banner-pick span {
  display: block;
  padding: 4px 6px;
  background: rgba(6, 4, 2, .86);
  border-top: 1px solid var(--gf-line);
  font: 700 10px/1.3 var(--font-display), serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guild-facelift .gs-banner-pick:hover { border-color: var(--gf-line-strong); }
.guild-facelift .gs-banner-pick.on { border-color: var(--gf-gold-hi); box-shadow: inset 0 0 0 1px var(--gf-gold); }
.guild-facelift .gs-banner-pick.on span { color: #251506; background: linear-gradient(180deg, #dba63e, #9e5e1e); }
/* Sävynäyte: sama pyöreä-ei-vaan-kaiverrettu kieli kuin vaakunan väreillä. */
.guild-facelift .gs-tint-swatch {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--gf-line);
  border-radius: 0;
  cursor: pointer;
}
.guild-facelift .gs-tint-swatch:hover { border-color: var(--gf-line-strong); }
.guild-facelift .gs-tint-swatch.on { border-color: var(--gf-gold-hi); box-shadow: inset 0 0 0 2px rgba(6, 4, 2, .8), 0 0 0 1px var(--gf-gold); }

.guild-facelift .guild-settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(201, 151, 68, .24);
}
.guild-facelift .gs-note { color: #a99a7a; font-size: 12px; }
/* Hajotus on peruuttamaton, joten se ei istu tallennusnapin vieressä. */
.guild-facelift .guild-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(154, 60, 46, .5);
  border-radius: 6px;
  background: rgba(60, 20, 16, .28);
}
.guild-facelift .guild-danger-zone > span { color: #d8b3a6; font-size: 12.5px; }
.gf-command-strip .guild-settings { margin-left: auto; }
/* AUKI OLEVA PANEELI ON OMA TÄYSLEVEÄ RIVINSÄ. Ennen se oli nauhan toinen
   flex-osa, jolle annettiin min(620px, 100%): päivän viestille ei jäänyt
   leveyttä, ja teksti valui auki olevan lomakkeen päälle (omistajan kuva
   6.9.2026). Suljettuna otsikko pysyy nauhan oikeassa laidassa. */
.gf-command-strip .guild-settings[open] {
  flex: 1 0 100%;
  width: auto;
  margin-left: 0;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gf-line);
}

.guild-facelift .guild-tabbar {
  margin: 0;
  border: solid var(--gf-line);
  border-width: 0 1px 1px;
  border-radius: 0;
  background: rgba(8, 5, 3, .98);
}
.guild-facelift .guild-tabbar .tabbtn,
.guild-facelift .guild-tabbar .section-nav-item {
  min-height: 52px;
  border-radius: 0;
  color: #d5c39d;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.guild-facelift .guild-tabbar [aria-selected="true"] { color: var(--gf-gold-hi); box-shadow: inset 0 -3px var(--gf-gold); }
.guild-facelift .guild-profile-panel { margin-top: 14px; }

/* Members */
/* Sivupalkki on 350 px vain kun sille on tilaa. Pelin kehys vie työpöydällä
   noin 455 px ikkunasta, joten 1280 px:n ikkunassa tälle asettelulle jää 825 px,
   ja kiinteä 350 px:n palkki jätti listalle 407 px (1100 px:n ikkunassa 227 px,
   vähemmän kuin palkille itselleen). Prosentti lasketaan asettelun omasta
   leveydestä, joten palkki kapenee listan mukana eikä tarvitse ikkunan
   mittaista breakpointia: 985 px:stä (1440 px:n ikkuna) ylöspäin se on yhä
   350 px. */
.gf-members-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 36%, 350px); gap: 14px; align-items: start; }
/* Ilman sivupalkkia lista on yhtä leveä kuin sen yllä oleva banneri
   (omistaja 5.9.2026). */
.gf-members-layout.is-single { grid-template-columns: minmax(0, 1fr); }
.gf-panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 18px; padding: 15px 17px; border-bottom: 1px solid var(--gf-line); }
.gf-panel-heading h2 { margin: 3px 0; font-size: 16px; letter-spacing: .07em; text-transform: uppercase; }
.gf-panel-heading p { margin: 0; color: var(--gf-muted); font-size: 12px; }
.gf-status-pill { flex: none; padding: 8px 11px; border: 1px solid var(--gf-line); color: #d8e89d; font-size: 11px; }
.gf-status-pill::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #a7c85a; box-shadow: 0 0 8px rgba(167, 200, 90, .5); }
.gf-roster { padding: 0 12px 12px; }
/* Sarakkeet ovat kapeat myös työpöydällä: Honor ja Donated ovat neljä-viisi
   numeroa, eivät otsikkoja, ja jokainen niiltä säästetty piste menee nimelle ja
   hallintanapeille — kolme nappia kahdella rivillä oli johtajan rosterissa
   rivin korkein osa (omistaja 6.9.2026). */
.gf-member {
  display: grid;
  grid-template-columns: 58px minmax(150px, 1fr) 96px 76px 76px 66px auto;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  border-bottom: 1px solid rgba(202, 151, 55, .2);
}
.gf-member.is-you { background: linear-gradient(90deg, rgba(135, 40, 24, .16), transparent 70%); }
.gf-member-med { position: relative; width: 50px; height: 50px; border-radius: 50%; }
.gf-member-med .char-medallion,
.gf-member-med .portrait-img,
.gf-member-med img,
.gf-member-med svg { width: 50px; height: 50px; }
.gf-member-med .online-dot { position: absolute; right: 0; bottom: 2px; }
.gf-member-who { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
/* overflow-wrap: nimessä saa olla 24 merkkiä ilman välilyöntiä, ja sellainen
   nimi jatkui sarakkeestaan arvomerkin ja lukujen päälle (puhelimessa rivin
   ohi). Välilyönnillinen nimi rivittyy yhä sanojen välistä. */
.gf-member-who > a { color: #fff3ce; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.gf-member-who > span { color: var(--gf-muted); font-size: 10px; }
/* MUISTIINPANO NÄKYY KOKONAAN (omistaja 1.10.2026). Se oli nimisarakkeen lapsi
   ja yhden rivin ellipsi: 150 px:n sarakkeeseen mahtui ~30 merkkiä 120:stä,
   eikä loppua saanut luettua mistään. Nyt se on rivin oma ruutu nimen alla ja
   kulkee tunnuslukujen alta hallintanappeihin asti, joten pisinkin viesti on
   yksi tai kaksi riviä. Rivi ilman muistiinpanoa on yhä sama yhden rivin
   ruudukko kuin ennen.
   Kasvot JA hallintanapit kattavat molemmat rivit: johtajan rosterissa napit
   ovat rivin korkein osa (kaksi nappiriviä, 92 px), ja niiden alle pudotettu
   viesti kasvatti rivin ja jäi 28 px:n päähän nimestä. Nyt viesti mahtuu
   nappien viereen eikä rivi kasva. align-content pitää nimen, tason ja viestin
   yhtenä nippuna 68 px:n rivin keskellä, kun nappeja ei ole. */
.gf-member.has-note { row-gap: 2px; align-content: center; }
.gf-member.has-note .gf-member-med,
.gf-member.has-note .guild-actions { grid-row: 1 / span 2; }
.gf-member.has-note .gf-member-who { align-self: end; }
/* Leveys mitataan LISTASTA eikä sarakkeista: kapealla työpöydällä kiinteät
   sarakkeet ovat riviä leveämmät (1440 px:n ikkunassa rivi on ~570 px ja
   sarakkeet vähintään 582 px + napit), ja sarakkeiden levyinen viesti jatkuisi
   paneelin reunan yli. 68 px = kasvosarake 58 px + väli 10 px.
   Sama säiliö ratkaisee myös rivin asettelun (ks. ROSTERI PELIN KEHYKSESSÄ
   alempana), joten sillä on nimi. */
.gf-roster { container: gf-roster / inline-size; }
.gf-member-note {
  grid-column: 2 / -2; grid-row: 2; align-self: start;
  min-width: 0; max-width: calc(100cqw - 68px);
  color: #d9c99f; font-size: 10px; line-height: 1.35;
  overflow-wrap: anywhere;
}
.gf-member .guild-rank { padding: 5px 9px; border: 1px solid var(--gf-line); color: var(--gf-gold-hi); font-size: 9px; text-align: center; }
/* Kolme tunnuslukua ovat työpöydällä rosterin omat sarakkeensa: display:contents
   pitää kääreen poissa gridistä, jotta sarakkeet pysyvät riviltä toiselle
   linjassa. Mobiilissa sama kääre muuttuu yhdeksi tiiviiksi riviksi. */
.gf-member-stats { display: contents; }
.gf-member-honor,
.gf-member-donated { display: flex; flex-direction: column; }
.gf-member-honor b,
.gf-member-donated b {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--gf-gold-hi); font-size: 12px; font-variant-numeric: tabular-nums;
}
.gf-member small { color: #866f49; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.gf-member-last { color: var(--gf-muted); font-size: 10px; }
.gf-member-last.is-idle { color: #c87a64; }
.gf-member .guild-actions { justify-self: end; }
.gf-member .guild-actions-in { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.gf-member .guild-actions .btn { min-height: 44px; }
/* Rivin kolmen pisteen valikko on KAPEAN listan elementti (puhelin, ja
   työpöydällä pelin kehyksen kaventama lista): leveällä listalla napit
   mahtuvat riville sellaisenaan, eikä klikkiä kannata lisätä väliin. */
.gf-row-menu { display: none; }
.gf-member-side { display: grid; gap: 14px; }
.gf-note-card,
.gf-invite-card { padding: 17px; }
.gf-note-card h2,
.gf-invite-card h2 { margin: 4px 0 7px; font-size: 16px; text-transform: uppercase; }
.gf-note-card > p { color: var(--gf-muted); font-size: 12px; }
.gf-note-card textarea { min-height: 98px; }
.gf-note-meta { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0 10px; color: #8d7651; font-size: 10px; font-variant-numeric: tabular-nums; }
.gf-note-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gf-invite-card .guild-invite-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

/* Chronicle — päiväotsikko on lokin ainoa kiintopiste, joten se saa kullan
   eikä muun metatekstin himmennystä. Rivin rakenne (aika / tapahtuma / tekijä)
   asuu styles.css:ssä lokin muiden sääntöjen kanssa. */
.guild-facelift .guild-log-day span { color: var(--gf-gold-hi); }

/* Vault and shop retain their production commands but adopt the command-hall scale. */
.guild-facelift .guild-bank,
.guild-facelift .guild-stash,
.guild-facelift .guild-buffs { padding: 17px; }
.guild-facelift .guild-stash-grid,
.guild-facelift .guild-dep-grid { grid-template-columns: repeat(auto-fill, 52px); gap: 6px; }
.guild-facelift .guild-stash-cell,
.guild-facelift .guild-dep-cell,
.guild-facelift .guild-stash-empty { width: 52px; height: 52px; min-width: 52px; min-height: 52px; padding: 3px; border-radius: 0; }
.guild-facelift .guild-stash-cell .bag-icon,
.guild-facelift .guild-dep-cell .bag-icon { width: 44px; height: 44px; }
.guild-facelift .shop-card-grid { grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); }
/* Ostonapit samalle korkeudelle (omistaja 5.9.2026). Kuvaukset ovat eri
   mittaisia ja osalla korteista on vain yksi maksutapa, joten napit
   asettuivat eri korkeuksille. Yläosa venyy, maksurivit painuvat pohjaan. */
.guild-facelift .shop-card { height: 100%; }
.guild-facelift .shop-card-top { flex: 1 1 auto; }
.guild-facelift .shop-card-foot,
.guild-facelift .shop-card-pays { margin-top: auto; }
/* Tilateksti ("Owned", "Active · 3 h") samalle linjalle viereisten korttien
   nappien kanssa (omistaja 18.9.2026): jalka on vähintään napin korkuinen, ja
   sen align-items: center keskittää tekstin napin keskilinjalle. 8 px on
   styles.css:n .shop-card-foot padding-top (border-box), 44 px yllä oleva
   .guild-facelift .btn min-height. Huomautus on jalan yläpuolella (shopCard),
   joten jalka on joka kortissa viimeinen rivi. */
.guild-facelift .shop-card-foot { min-height: calc(8px + 44px); }
.guild-facelift .shop-card-pays { display: flex; flex-direction: column; gap: 6px; }
.guild-facelift .shop-card-pay { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.guild-facelift .shop-card-pay .shop-card-btn { flex: none; min-width: 116px; }
/* Kortin tietorivit (omistaja 18.9.2026): mitä ostos tekee ja kauanko se
   kestää, ja PE-täytön koko killan yhteinen tila. Omilla riveillään eikä
   tooltipissa, koska kesto ja cooldown ovat osa päätöstä (BRAND §6.10). */
.guild-facelift .shop-card-meta { margin: 5px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--gf-gold-hi); }
.guild-facelift .guild-refill-status {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--gf-muted);
  font-variant-numeric: tabular-nums;
}
.guild-facelift .guild-refill-status b { color: var(--gf-ink); font-weight: 600; }
/* Laskuri on osa lausetta: aktiivisen buffin vihreä ajastintyyli (styles.css
   .guild-buff-timer) sanoisi cooldownista "valmis". */
.guild-facelift .guild-refill-status .guild-buff-timer { font: inherit; color: var(--gf-gold-hi); font-weight: 600; }
.guild-facelift .guild-refill-status.is-ready { color: var(--rarity-uncommon); }
.guild-facelift .guild-refill-status.is-cooldown { color: var(--gf-ink); }
/* Voimassa olevan buffin jaettu tila (buffStatusHtml): sama rivi kuin täytöllä,
   mutta laskuri pitää aktiivisen buffin vihreän — tässä se tarkoittaa "päällä". */
.guild-facelift .guild-buff-status {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--gf-ink);
  font-variant-numeric: tabular-nums;
}
.guild-facelift .guild-buff-status b { color: var(--gf-ink); font-weight: 600; }
.guild-facelift .guild-buff-status .guild-buff-timer { font: inherit; font-weight: 600; }

/* Directory */
.gf-directory-hero {
  min-height: 190px;
  display: grid;
  align-content: center;
  padding: 32px 46px;
  background: linear-gradient(90deg, rgba(8, 5, 3, .92), rgba(31, 16, 7, .52), rgba(8, 5, 3, .9));
  border: 1px solid var(--gf-line);
}
.gf-directory-hero h2 { margin: 5px 0; color: #fff2cf; font-size: clamp(25px, 4vw, 42px); letter-spacing: .09em; text-transform: uppercase; }
.gf-directory-hero p { max-width: 67ch; margin: 0; color: #d7c39c; line-height: 1.5; }
.gf-directory-tools,
.gf-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; color: var(--gf-muted); background: rgba(8, 5, 3, .96); border: 1px solid var(--gf-line); }
.gf-sort-tabs { display: flex; gap: 4px; }
.gf-sort-tabs button { min-height: 44px; padding: 8px 18px; color: var(--gf-muted); background: transparent; border: 1px solid transparent; font: 700 10px/1 var(--font-display), serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.gf-sort-tabs button[aria-selected="true"] { color: var(--gf-gold-hi); border-color: var(--gf-line-strong); background: rgba(117, 66, 19, .2); }
.gf-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gf-directory-card { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 12px; padding: 18px; background: var(--gf-panel); border: 1px solid var(--gf-line); }
.gf-directory-card.is-first { border-color: var(--gf-line-strong); box-shadow: inset 0 3px var(--gf-gold); }
.gf-directory-rank { position: absolute; right: 12px; top: 10px; color: #7b6542; font-weight: 800; }
.gf-directory-name h3 { margin: 3px 0; color: #fff0c4; font-size: 17px; }
.gf-directory-card > p { grid-column: 1 / -1; min-height: 40px; margin: 0; color: var(--gf-muted); font-size: 12px; }
.gf-directory-card dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border: 1px solid var(--gf-line); }
.gf-directory-card dl div { padding: 8px; border-left: 1px solid var(--gf-line); }
.gf-directory-card dl div:first-child { border-left: 0; }
.gf-directory-card dt { color: #806b48; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.gf-directory-card dd { display: flex; align-items: center; gap: 5px; min-height: 16px;
  margin: 3px 0 0; color: var(--gf-gold-hi); font-weight: 800; }
/* min-height varaa tunnuksen kaistan MYOS Entry-solulle, jolla tunnusta ei ole —
   ilman sita kolmen solun arvot istuisivat eri viivoilla. */
.gf-dir-stat-ico { flex: none; width: 16px; height: 16px; }
.gf-directory-card .btn { grid-column: 1 / -1; }
.gf-directory-ledger { padding: 0; }
.gf-pagination { border-width: 1px 0 0; }

/* ============================================================
   TAUSTAMAALAUS EI KATKEA
   ============================================================
   Sotasivu on pitkä: kenttä, sotakäsky, War effort ja loki vievät
   kaksi-kolme ruutua. Maalaus sen takana oli 100vh korkea nauha
   (.imm-flow .imm-scene > .backdrop-img, styles.css) jonka alle jäi
   paljas viininpunainen liukuväri — terävä vaakaviiva keskellä sivua,
   jonka alta peli loppui ja CSS alkoi. Juuri sitä omistaja katsoi.

   RATKAISU: maalaus ei lopu, se SEURAA RUUTUA. position: sticky pitää
   sen ruudun ylälaidassa niin kauan kuin lavaa riittää — pelaaja vierittää
   kortteja pysyvän lavasteen yli kuin teatterissa, eikä alareunaa tule
   koskaan vastaan. Sivun pituus ei enää vaikuta siihen mitä taustalla on.

   KOLME YKSITYISKOHTAA, jotka tekevät tästä toimivan:

   - margin-bottom: -100vh nollaa kuvan oman korkeuden virtauksesta. Sticky
     vaatii normaalivirtauksen (absoluuttiselle ei ole tarttumista), mutta
     kuva ei saa työntää pinoa 100vh alaspäin. Negatiivinen marginaali antaa
     molemmat: laatikko on virtauksessa, korkeus on nolla. .imm-stack on
     position:relative + z-index:3, joten se piirtyy kuvan päälle.

   - VIRTAUKSESSA OLEVA KUVA EI VOI PEITTÄÄ SIVUPALKKIA. Tämä oli syy hylätä
     position: fixed -kuva: se olisi levinnyt koko ruudulle .navin päälle.
     Sticky pysyy oman lohkonsa leveydessä.

   - Sticky toimii myös iOS/iPadOS:llä, toisin kuin background-attachment:
     fixed (jonka Safari kohtelee scrollina -> cover venyttäisi maalauksen
     sivun korkuiseksi, sama 3-4x ansa jota styles.css varoittaa).

   MASKIHÄIVYTYSTÄ EI OLE — se olisi virhe tässä. Häivytys on oikea lääke
   KATKEAVALLE nauhalle, mutta tarttuva kuva ei katkea: sen alareuna on aina
   ruudun alareuna, joten maski olisi pysyvä tumma kaista joka ruudussa.

   Lavan pohjaväri vaihtuu silti: vanha viininpunainen (#2B2418 -> #5D2A2A,
   ennen inline-tyylinä guildWar.js:ssä) oli se mitä katkon alta paljastui,
   eikä se ollut sukua maalaukselle millään sävyllä. Uusi pohja on tumma
   lämmin multa. Se näkyy enää kahdessa tilanteessa — jos maalaus ei lataudu,
   ja mobiilissa raoissa .gw-stagen ympärillä — ja molemmissa sen kuuluu olla
   hiljainen, ei kilpaileva väri.

   Mobiili (<900px) ei koske tarttumiseen: siellä .backdrop-img on piilotettu
   ja maalaus on .gw-stagen oma tausta (ks. styles.css). */
.guild-war-facelift .gw-field-scene {
  background-color: #0b0705;
  background-image: linear-gradient(180deg, #2a1d12, #150e09 60%, #0b0705);
}
@media (min-width: 900px) {
  .guild-war-facelift .gw-field-scene > .backdrop-img {
    position: sticky;
    display: block;
    inset: 0 auto auto;
    height: 100vh;
    max-height: none;
    margin-bottom: -100vh;
  }
}

/* War hero and timeline */
.guild-war-facelift .gw-field-scene::after { background: linear-gradient(180deg, rgba(5, 3, 2, .15), rgba(5, 3, 2, .7) 48%, #050302 100%); }
.gwf-war-hero { position: relative; min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid var(--gf-line-strong); background: linear-gradient(180deg, rgba(8, 5, 3, .34), rgba(8, 5, 3, .78)); box-shadow: inset 0 0 90px rgba(0, 0, 0, .55); }
.guild-war-facelift .gw-ribbon { margin: 22px; border-radius: 0; background: rgba(8, 5, 3, .84); backdrop-filter: blur(3px); }
.gwf-phase-track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: auto 0 0; padding: 0 34px; list-style: none; background: rgba(5, 3, 2, .93); border-top: 1px solid var(--gf-line); }
.gwf-phase-track::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 25px; height: 1px; background: #5c4526; }
.gwf-phase-track li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 13px 2px 10px; color: #746448; text-align: center; }
.gwf-phase-track i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #100b07; border: 1px solid #604b29; color: #876f43; font: normal 700 9px/1 var(--font-display), serif; }
.gwf-phase-track b { font: 700 8px/1.2 var(--font-display), serif; letter-spacing: .1em; text-transform: uppercase; }
.gwf-phase-track small { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gwf-phase-track .is-past,
.gwf-phase-track .is-current { color: var(--gf-gold-hi); }
.gwf-phase-track .is-past i,
.gwf-phase-track .is-current i { background: #754514; border-color: var(--gf-gold); color: #fff1c3; }
.gwf-phase-track .is-current { background: linear-gradient(180deg, rgba(158, 94, 30, .28), transparent); box-shadow: inset 0 -3px var(--gf-gold); }

/* 10 versus 10 battlefield */
.gwf-field { min-height: 0; margin: 0 !important; }
.gwf-battle-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; align-items: start; }
.gwf-battlefield { min-width: 0; overflow: hidden; background: linear-gradient(180deg, rgba(18, 10, 6, .93), rgba(7, 4, 3, .98)); border: 1px solid var(--gf-line); }
.gwf-field-heading { display: flex; justify-content: space-between; align-items: start; gap: 14px; padding: 15px 17px; border-bottom: 1px solid var(--gf-line); }
.gwf-field-heading h2 { margin: 3px 0; color: #fff0bf; font-size: 17px; text-transform: uppercase; }
.gwf-field-heading p { margin: 0; color: var(--gf-muted); font-size: 12px; }
.gwf-field-heading > strong { color: var(--gf-gold-hi); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; text-align: right; }
.gwf-formation { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; min-width: 0; padding: 10px; }
.gwf-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: start; min-width: 0; min-height: 142px; padding: 7px 4px; overflow: hidden; color: var(--gf-ink); background: rgba(10, 6, 4, .78); border: 1px solid rgba(199, 146, 44, .2); border-radius: 0; font-family: "Inter Guild", sans-serif; text-align: center; cursor: pointer; }
.gwf-slot:hover,
.gwf-slot:focus-visible { border-color: var(--gf-gold); background: rgba(82, 42, 13, .42); transform: translateY(-2px); outline: none; }
.gwf-slot.is-selected { border-color: var(--gf-gold-hi); box-shadow: inset 0 0 0 1px var(--gf-gold), 0 0 22px rgba(226, 184, 79, .2); background: rgba(104, 54, 15, .43); }
.gwf-slot.is-fallen { filter: grayscale(.75); opacity: .63; }
.gwf-slot.is-empty { justify-content: center; border-style: dashed; color: #5b4a32; cursor: default; }
.gwf-slot.is-empty i { width: 34px; height: 48px; border: 1px dashed #4f3c25; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); }
.gwf-slot-order { min-height: 14px; color: #8f7446; font: 700 7px/1.2 var(--font-display), serif; letter-spacing: .08em; text-transform: uppercase; }
.gwf-slot.is-selected .gwf-slot-order { color: var(--gf-gold-hi); }
.gwf-slot-med { position: relative; width: 58px; height: 58px; margin: 3px 0; border-radius: 50%; filter: drop-shadow(0 5px 6px #000); }
.gwf-slot-med .char-medallion,
.gwf-slot-med .portrait-img,
.gwf-slot-med img,
.gwf-slot-med svg { width: 58px; height: 58px; }
.gwf-slot > b { max-width: 100%; color: #fff1c7; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gwf-slot > small { max-width: 100%; color: #9c8865; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gwf-slot-hp { width: 86%; height: 5px; margin: 6px 0 2px; overflow: hidden; background: #210b09; border: 1px solid #4e261d; }
.gwf-slot-hp i { display: block; height: 100%; background: linear-gradient(90deg, #8e2d24, #d77345); transition: width .3s ease; }
.gwf-slot-state { max-width: 100%; color: #a08d6d; font-size: 7px; white-space: nowrap; }
.gwf-field-marker { display: grid; justify-items: center; gap: 3px; padding: 12px; color: #b9a17a; background: radial-gradient(ellipse, rgba(116, 54, 17, .34), transparent 70%); border-block: 1px solid var(--gf-line); }
.gwf-field-marker span { color: var(--gf-gold); font: 700 8px/1.2 var(--font-display), serif; letter-spacing: .14em; text-transform: uppercase; }
.gwf-field-marker b { color: #fff0c5; font-size: 13px; }
.gwf-field-marker em { margin: 0 8px; color: #a98b5e; font-weight: 400; }
.gwf-own-front { background: linear-gradient(180deg, rgba(28, 17, 9, .8), rgba(9, 6, 4, .96)); }
.gwf-own-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px 0; }
.gwf-own-heading > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gwf-own-heading b,
.gwf-own-heading small { display: block; }
.gwf-own-heading b { color: #f5e4bb; font: 700 11px/1.3 var(--font-display), serif; text-transform: uppercase; }
.gwf-own-heading small { color: var(--gf-muted); font-size: 9px; }
.gwf-formation.mine .gwf-slot { min-height: 94px; display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto 5px auto; align-content: center; text-align: left; }
.gwf-formation.mine .gwf-slot-order { display: none; }
.gwf-formation.mine .gwf-slot-med { grid-row: 1 / 5; width: 40px; height: 40px; margin: 0; }
.gwf-formation.mine .gwf-slot-med .char-medallion,
.gwf-formation.mine .gwf-slot-med .portrait-img,
.gwf-formation.mine .gwf-slot-med img,
.gwf-formation.mine .gwf-slot-med svg { width: 40px; height: 40px; }
.gwf-formation.mine .gwf-slot-hp { width: 100%; margin: 3px 0; }

.gwf-war-order { position: sticky; top: 12px; min-width: 0; padding: 17px; border-top: 3px solid var(--gf-gold); }
.gwf-order-portrait { position: relative; width: 170px; height: 170px; margin: 13px auto 8px; border-radius: 50%; filter: drop-shadow(0 12px 15px #000); }
.gwf-order-portrait .char-medallion,
.gwf-order-portrait .portrait-img,
.gwf-order-portrait img,
.gwf-order-portrait svg { width: 170px; height: 170px; }
/* Fallback-kirjaimet ("G1") kuuluvat medaljongin KESKELLE taiteen alle, eivät
   sen viereen. Virrassa ne asettuivat säiliön vasempaan ylänurkkaan, jota
   pyöreä .portrait-img ei peitä — 170px:n sotamääräyksessä kasvojen vieressä
   luki siis "G1" vaikka taide oli ladattu. Säiliöt ovat jo containing blockeja
   (filter/position: relative), joten absoluuttinen keskitys ei muuta
   asettelusta mitään; se vain siirtää tekstin kuvan alle, missä se näkyy vasta
   kun .jpg puuttuu (onerror piilottaa kuvan). */
.gwf-order-portrait .portrait-fallback,
.gwf-slot-med .portrait-fallback,
.gf-member-med .portrait-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #c9bfa8; font-family: var(--font-display), serif; line-height: 1;
}
.gwf-order-portrait .portrait-fallback { font-size: 44px; }
.gwf-slot-med .portrait-fallback { font-size: 15px; }
.gf-member-med .portrait-fallback { font-size: 13px; }
.gwf-war-order h2 { margin: 6px 0 3px; text-align: center; font-size: 19px; text-transform: uppercase; }
.gwf-order-rank { margin: 0 0 9px; color: var(--gf-muted); font-size: 10px; text-align: center; }
.gwf-war-order blockquote,
.gwf-dossier-desc { margin: 10px 0; padding: 10px 12px; color: #ddc69b; border-left: 2px solid var(--gf-gold); background: rgba(105, 58, 17, .14); font: italic 13px/1.45 Georgia, serif; }
/* Patron-merkki istuu nimen perässä, ei omana lohkonaan: sotakäskykortissa
   pystytila on se mistä kilpaillaan, ja oma laatikko ("P / PATRON / 1 seals")
   vei siitä ~50 px. Rivin sisäinen merkki ei vie yhtään korkeutta — nimi on
   uppercase-otsikko, joten merkki laskee koon omaan mittaansa ja antaa
   sinettimäärän vihjeenä (data-hint). Timantti tulee talon .patron-medalista,
   samasta joka on chatin nimien ja monumentin title-rivin vieressä. */
.gwf-patron {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 9px; vertical-align: 3px;
  color: var(--gf-gold); font: 700 10px/1 var(--font-display), serif;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  cursor: help;
}
/* Timantti on 45 astetta kierretty 8 px neliö: sen kärki yltää ~1,7 px oman
   laatikkonsa ulkopuolelle, joten flexin gap yksin jättäisi sen koskettamaan
   P-kirjainta. Oikea marginaali maksaa ylityksen takaisin. */
.gwf-patron .patron-medal { margin: 0 3px 0 0; vertical-align: 0; }
/* Dossier-laatikossa nimi on <b> leipäkoossa, ei 19 px otsikko: merkki
   laskeutuu samaan linjaan eikä tarvitse yhtä paljon nostoa. */
.gw-drawer-who .gwf-patron { margin-left: 8px; vertical-align: 1px; }
.gwf-order-stats { display: grid; grid-template-columns: repeat(2, 1fr); margin: 12px 0; border: 1px solid var(--gf-line); }
.gwf-order-stats div { padding: 8px 10px; border: solid var(--gf-line); border-width: 0 0 1px 1px; }
.gwf-order-stats div:nth-child(odd) { border-left: 0; }
.gwf-order-stats div:nth-last-child(-n+2) { border-bottom: 0; }
.gwf-order-stats dt,
.gwf-decision-list dt { color: var(--gf-muted); font-size: 9px; }
.gwf-order-stats dd,
.gwf-decision-list dd { margin: 2px 0 0; color: #fff0c1; font-weight: 800; font-variant-numeric: tabular-nums; }
.gwf-inspect { width: 100%; }
.gwf-decision-list { margin: 12px 0; border-block: 1px solid var(--gf-line); }
.gwf-decision-list div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(202, 151, 55, .16); }
.gwf-decision-list div:last-child { border-bottom: 0; }
.gwf-decision-list dd { font-size: 11px; }
.gwf-order-note,
.gwf-order-muted { color: var(--gf-muted); font-size: 10px; line-height: 1.45; }
.gwf-war-order .gw-drawer-acts .btn { width: 100%; }

.guild-war-facelift .gw-field.has-drawer { margin-right: 0; }
.guild-war-facelift .gw-drawer {
  position: fixed;
  inset: 72px 18px 18px auto;
  z-index: 80;
  width: min(560px, calc(100vw - 36px));
  max-height: calc(100dvh - 90px);
  padding: 18px;
  border-radius: 0;
  border-color: var(--gf-line-strong);
  background: rgba(10, 6, 4, .985);
}
.guild-war-facelift .gw-drawer-hd .gw-med,
.guild-war-facelift .gw-drawer-hd .gw-med .char-medallion,
.guild-war-facelift .gw-drawer-hd .gw-med .portrait-img,
.guild-war-facelift .gw-drawer-hd .gw-med img,
.guild-war-facelift .gw-drawer-hd .gw-med svg { width: 92px; height: 92px; }
.guild-war-facelift .gw-drawer-hd .gw-med { height: 92px; }

@media (max-width: 1080px) {
  .gf-guild-banner { grid-template-columns: 105px minmax(0, 1fr); padding: 34px; }
  /* Kapeammalla banneri on kaksi saraketta ja luvut oma rivinsä sen alla:
     nurkkaan ankkuroitu laatikko menisi otsikon päälle. Laatikottomuus jää,
     vain paikka vaihtuu. */
  .gf-banner-stats {
    position: static; grid-column: 1 / -1; justify-self: center;
    justify-content: center; text-align: center;
  }
  .gf-banner-stats dd { justify-content: center; }
  .gf-members-layout,
  .gwf-battle-grid { grid-template-columns: 1fr; }
  .gf-member-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gwf-war-order { position: static; display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 18px; }
  .gwf-war-order > .gw-eyebrow,
  .gwf-war-order > .gwf-order-portrait { grid-column: 1; }
  .gwf-war-order > h2,
  .gwf-war-order > .gwf-order-rank,
  .gwf-war-order > blockquote { grid-column: 2; }
  .gwf-war-order > h2 { align-self: end; text-align: left; }
  .gwf-order-rank { text-align: left; }
  .gwf-order-stats,
  .gwf-inspect,
  .gwf-decision-list,
  .gwf-order-note,
  .gwf-war-order > .gw-drawer-acts { grid-column: 1 / -1; }
}

/* ROSTERI PELIN KEHYKSESSÄ. Työpöydän sarakerivi tarvitsee 582 px ja
   hallintanapit päälle (johtajalla 217 px kahdella nappirivillä), mutta pelin
   kehys vie ikkunasta noin 455 px ja sivupalkki 350 px: 1440 px:n ikkunassa
   riville jää 567 px, 1366:ssa 493 ja 1280:ssa 407. Ikkunan leveydestä
   kysyvät breakpointit (1080 / 780 / 420) eivät näe kehystä, joten sarakkeet
   jäivät voimaan: oma Leave-nappi piirtyi paneelin ulkopuolelle Field note
   -kortin alle, ja johtajan Promote / Make leader / Kick pinoutuivat kolmeen
   kerrokseen sivupalkin päälle (rivit 141 px). Mitattu pelissä 1.10.2026.

   Siksi asettelu kysytään LISTAN leveydestä. Alle 800 px:n lista käyttää
   samaa tiivistä riviä kuin puhelin (omistaja 6.9.2026: mahdollisimman monta
   jäsentä näkyviin, Honor ja Donated pienellä): nimi ja taso rivillä yksi,
   tunnusluvut pienellä sen alla, toiminnot kolmen pisteen takana. 800 px on
   raja, josta ylöspäin johtajan napit mahtuvat riville kahdessa kerroksessa
   (582 + 217), eli leveä lista on täsmälleen entisensä.

   Lohko on min-width: 781px:n sisällä, koska puhelimen säännöt asuvat omassa
   lohkossaan alempana ja lista on puhelimessa aina alle 800 px: ilman
   rajausta kaksi lohkoa kilpailisivat samoista riveistä. Kun muutat tiivistä
   riviä, muuta molempia. */
@media (min-width: 781px) {
  @container gf-roster (width < 800px) {
    .gf-member {
      grid-template-columns: 40px minmax(0, 1fr) auto;
      gap: 0 10px;
      min-height: 0;
      padding: 7px 0;
    }
    .gf-member-med { grid-row: 1 / span 2; }
    .gf-member-med,
    .gf-member-med .char-medallion,
    .gf-member-med .portrait-img,
    .gf-member-med img,
    .gf-member-med svg { width: 40px; height: 40px; }
    .gf-member-who { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
    .gf-member.has-note { row-gap: 0; }
    .gf-member.has-note .guild-actions { grid-row: auto; }
    .gf-member.has-note .gf-member-who { align-self: center; }
    .gf-member-note { grid-column: 2 / -1; max-width: none; }
    .gf-member:has(.gf-row-menu) .gf-member-note { grid-column: 2 / 4; }
    .gf-member .guild-rank { padding: 3px 8px; font-size: 8px; }
    .gf-member-stats {
      display: flex;
      grid-column: 2 / -1;
      flex-wrap: nowrap;
      align-items: baseline;
      gap: 0 12px;
      font-size: 10px;
    }
    .gf-member-honor,
    .gf-member-donated { position: relative; flex-direction: row; align-items: baseline; gap: 4px; min-width: 0; }
    /* nowrap: fmtInt erottaa tuhannet ohuella välillä, ja luku katkesi siitä
       kahdelle riville ("1 234 / 567"). */
    .gf-member-stats b { font-size: 10px; font-weight: 600; color: #b0925c; white-space: nowrap; }
    .gf-member-last { white-space: nowrap; }
    /* Ikoni sanoo saman kuin otsikko. Otsikko jää ruudunlukijalle: ikonilla
       ei ole nimeä, ja pelkkä luku ei kerro onko se kunniaa vai kultaa. */
    .gf-member-stats small {
      position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap;
    }
    .gf-member-stats .gf-stat-icon { width: 11px; height: 11px; opacity: .8; }
    /* Kolmen pisteen sarake on 44 px: hiirellekin sama kohde kuin sormelle. */
    .gf-member:has(.gf-row-menu) { grid-template-columns: 40px minmax(0, 1fr) auto 44px; }
    .gf-member:has(.gf-row-menu) .gf-member-stats { grid-column: 2 / 4; }
    .gf-row-menu {
      display: flex; grid-column: 4; grid-row: 1 / span 2;
      align-items: center; justify-content: center; align-self: stretch;
      min-height: 44px; padding: 0;
      border: 1px solid var(--gf-line); background: rgba(0, 0, 0, .25);
      color: var(--gf-gold); font-size: 17px; line-height: 1; cursor: pointer;
    }
    .gf-row-menu:hover,
    .gf-row-menu[aria-expanded="true"] {
      border-color: var(--gf-line-strong); background: rgba(226, 184, 79, .14); color: var(--gf-gold-hi);
    }
    .gf-member .guild-actions { grid-column: 2 / -1; justify-self: start; }
    .gf-member .guild-actions-in { justify-content: flex-start; min-height: 0; }
    /* Piiloon vain kun pisteet ovat olemassa avaamassa ne takaisin; avattu
       rivi on jälkimmäinen sääntö, sama tarkkuus. */
    .gf-member:has(.gf-row-menu) .guild-actions { display: none; }
    .gf-member.is-acting .guild-actions { display: block; grid-column: 2 / -1; justify-self: stretch; padding-top: 6px; }
  }
}

@media (max-width: 780px) {
  .guild-facelift .imm-stack-xwide { width: calc(100% - 14px); }
  .guild-facelift .guild-top-tabbar { overflow-x: auto; }
  .guild-facelift .guild-top-tabbar .tabbtn,
  .guild-facelift .guild-top-tabbar .section-nav-item { padding-inline: 18px; white-space: nowrap; }
  .gf-guild-banner { grid-template-columns: 76px minmax(0, 1fr); min-height: 220px; gap: 14px; padding: 24px 18px; text-align: left; }
  .gf-banner-crest .guild-crest { width: 76px; height: 76px; }
  .gf-banner-copy h2 { font-size: 25px; }
  .gf-banner-copy p { font-size: 12px; }
  .gf-banner-stats { width: 100%; min-width: 0; gap: 18px; }
  .gf-banner-stats div { padding: 0; text-align: center; }
  .gf-command-strip { align-items: stretch; flex-direction: column; }
  .gf-member-side { grid-template-columns: 1fr; }
  /* ROSTERI PUHELIMESSA (omistaja 6.9.2026: "pelaajalistaus on liian iso ja
     näkyy vähän pelaajia yhdellä silmäyksellä").

     Ennen: Honor, Donated ja Last seen putosivat kukin OMAKSI riviksi sarakkeeseen
     2, ja jokainen niistä oli pystypino (iso luku + 8 px otsikko) — kolme lukua
     söivät riviltä ~165 px, joten 390 px:n ruudulle mahtui puolitoista jäsentä.

     Nyt rivi on kaksi lyhyttä riviä: kasvot + nimi + arvomerkki, ja niiden alla
     yksi tunnuslukurivi jossa ikoni korvaa otsikon. Kasvot kattavat molemmat
     rivit, joten 44 px:n medaljonki ei enää yksin määrää rivin korkeutta.
     Toiminnot (Promote/Kick/Leave) saavat oman rivinsä vain kun niitä on:
     tyhjän kääreen 27 px:n min-height nollataan. */
  .gf-roster { padding: 0 10px 10px; }
  .gf-member {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 0 9px;
    min-height: 0;
    padding: 7px 0;
  }
  .gf-member-med { grid-row: 1 / span 2; }
  .gf-member-med,
  .gf-member-med .char-medallion,
  .gf-member-med .portrait-img,
  .gf-member-med img,
  .gf-member-med svg { width: 40px; height: 40px; }
  /* NIMI JA TASO SAMALLE RIVILLE. Nämä kaksi ovat se mitä listasta haetaan
     (kuka, minkä tasoinen, onko paikalla), joten ne saavat rivin ykkösen.
     Taso omalla rivillään maksoi 16 px jokaisesta jäsenestä. */
  .gf-member-who { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
  .gf-member-who > a { font-size: 14px; }
  .gf-member-who > span { font-size: 10.5px; }
  /* Muistiinpano on nimen ja tunnuslukujen välissä oma rivinsä. Kolmen
     pisteen nappi kattaa rivit 1–2 sarakkeessa 4, joten viesti pysähtyy sen
     viereen samoin kuin tunnusluvut. */
  .gf-member.has-note { row-gap: 0; }
  .gf-member.has-note .guild-actions { grid-row: auto; }
  .gf-member.has-note .gf-member-who { align-self: center; }
  .gf-member-note { grid-column: 2 / -1; max-width: none; }
  .gf-member:has(.gf-row-menu) .gf-member-note { grid-column: 2 / 4; }
  .gf-member .guild-rank { font-size: 7px; padding: 3px 5px; }
  /* TUNNUSLUVUT PIENELLÄ (omistaja 6.9.2026: "honorit/kullat vie ihan liikaa
     tilaa, niiden pitäisi olla ihan pienellä"). Honor ja lahjoitettu kulta ovat
     taustatietoa, ei se mitä listasta silmäillään — ne kulkevat yhtenä matalana
     alarivinä nimen alla, samaa kokoa kuin "2 h ago". Nowrap: kolme lukua
     mahtuvat 390 px:lle, eikä yksikään niistä saa lisätä riviä. */
  .gf-member-stats {
    display: flex;
    grid-column: 2 / -1;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0 10px;
    font-size: 10px;
  }
  .gf-member-honor,
  .gf-member-donated { flex-direction: row; align-items: baseline; gap: 4px; min-width: 0; }
  .gf-member-stats b { font-size: 10px; font-weight: 600; color: #b0925c; }
  /* Ikoni sanoo saman kuin otsikko, ja se mahtuu riville. */
  .gf-member-stats small { display: none; }
  .gf-member-stats .gf-stat-icon { width: 11px; height: 11px; opacity: .8; }
  .gf-member-last { font-size: 10px; }
  /* KOLMEN PISTEEN VALIKKO PER RIVI (omistaja 6.9.2026: "kiltarosterin
     painikkeet mobiililla voisi laittaa kolmen pisteen taakse per rivi =
     säästää tilaa"). Promote / Make leader / Kick vei jokaiselta riviltä oman
     kolmannen rivinsä — johtajan rosterissa yli kolmanneksen listan
     korkeudesta — ja niistä painetaan yhtä kertaa kuukaudessa. Nyt rivi on
     kaksi riviä ja napit odottavat pisteiden takana.

     Napit pysyvät DOM:issa: display:none pitää ne poissa myös tabjärjestyksestä
     ja ruudunlukijalta, joten aria-expanded kertoo totta eikä työpöydän
     rosteri tarvitse omaa renderöintipolkuaan.

     Nappi on OLEMASSA vain kun rivillä on toiminto, joten :has() ratkaisee
     myös ruudukon: ilman nappia rivi pysyy entisenä kolmen sarakkeen rivinä. */
  .gf-member:has(.gf-row-menu) { grid-template-columns: 40px minmax(0, 1fr) auto 34px; }
  .gf-member:has(.gf-row-menu) .gf-member-stats { grid-column: 2 / 4; }
  .gf-row-menu {
    display: flex; grid-column: 4; grid-row: 1 / span 2;
    align-items: center; justify-content: center; align-self: stretch;
    min-height: 44px; padding: 0;
    border: 1px solid var(--gf-line); background: rgba(0, 0, 0, .25);
    color: var(--gf-gold); font-size: 17px; line-height: 1; cursor: pointer;
  }
  .gf-row-menu[aria-expanded="true"] {
    border-color: var(--gf-line-strong); background: rgba(226, 184, 79, .14); color: var(--gf-gold-hi);
  }
  .gf-member .guild-actions { grid-column: 2 / -1; justify-self: start; }
  .gf-member .guild-actions-in { justify-content: flex-start; gap: 4px; min-height: 0; }
  /* Piiloon vain kun pisteet ovat olemassa avaamassa ne takaisin. Sama
     tarkkuusluokka kuin is-acting-säännöllä, joten järjestys ratkaisee:
     avattu rivi on jälkimmäinen. */
  .gf-member:has(.gf-row-menu) .guild-actions { display: none; }
  .gf-member.is-acting .guild-actions { display: block; grid-column: 2 / -1; justify-self: stretch; padding-top: 6px; }
  /* Kolme hallintanappia (Promote / Make leader / Kick) mahtuvat yhdelle
     riville vasta kapeampina — kahdelle riville levittäytyneinä ne olivat
     johtajan rosterissa rivin korkein osa. 44 px:n kosketuskohde säilyy. */
  .gf-member .guild-actions .btn { padding: 6px 9px; font-size: 9.5px; letter-spacing: .03em; }
  /* Paneelin alaotsikko on työpöydän koristetta: puhelimessa se työnsi
     ensimmäisen jäsenen taitteen alle. */
  .gf-panel-heading { gap: 10px; padding: 12px 13px; }
  .gf-panel-heading p { display: none; }
  .gf-directory-grid { grid-template-columns: 1fr; }
  .gf-directory-grid .gf-directory-card:nth-child(n+3) { display: none; }
  .gf-directory-hero { min-height: 150px; padding: 24px 18px; }
  .gf-directory-tools { align-items: stretch; flex-direction: column; }
  .gf-sort-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
  .gf-sort-tabs button { padding-inline: 8px; }
  .guild-war-facelift .gw-ribbon { grid-template-columns: 1fr 1fr; margin: 10px; padding: 10px; }
  .guild-war-facelift .gw-ribbon-mid { grid-column: 1 / -1; grid-row: 2; }
  .gwf-war-hero { min-height: 350px; }
  .gwf-phase-track { padding-inline: 4px; }
  .gwf-phase-track b { font-size: 7px; letter-spacing: .05em; }
  .gwf-phase-track small { font-size: 7px; }
  .gwf-field-heading { flex-direction: column; }
  .gwf-field-heading > strong { text-align: left; }
  .gwf-formation { gap: 2px; padding: 7px 4px; }
  .gwf-slot { min-height: 112px; padding: 4px 2px; }
  .gwf-slot-med { width: 44px; height: 44px; }
  .gwf-slot-med .char-medallion,
  .gwf-slot-med .portrait-img,
  .gwf-slot-med img,
  .gwf-slot-med svg { width: 44px; height: 44px; }
  .gwf-slot-order { font-size: 5.5px; }
  .gwf-slot > b { font-size: 7px; }
  .gwf-slot > small { display: none; }
  .gwf-slot-state { font-size: 6px; }
  .gwf-formation.mine .gwf-slot { display: flex; min-height: 66px; text-align: center; }
  .gwf-formation.mine .gwf-slot-med { width: 36px; height: 36px; }
  .gwf-formation.mine .gwf-slot-med .char-medallion,
  .gwf-formation.mine .gwf-slot-med .portrait-img,
  .gwf-formation.mine .gwf-slot-med img,
  .gwf-formation.mine .gwf-slot-med svg { width: 36px; height: 36px; }
  .gwf-formation.mine .gwf-slot-state,
  .gwf-formation.mine .gwf-slot-hp { display: none; }
  .gwf-war-order { display: block; }
  .gwf-order-portrait { width: 150px; height: 150px; }
  .gwf-order-portrait .char-medallion,
  .gwf-order-portrait .portrait-img,
  .gwf-order-portrait img,
  .gwf-order-portrait svg { width: 150px; height: 150px; }
  .gwf-war-order h2,
  .gwf-order-rank { text-align: center; }
}

@media (max-width: 420px) {
  .gf-guild-banner { grid-template-columns: 58px minmax(0, 1fr); padding: 18px 10px; }
  .gf-banner-crest .guild-crest { width: 58px; height: 58px; }
  .gf-banner-copy h2 { font-size: 19px; letter-spacing: .04em; }
  .gf-banner-copy p { display: none; }
  .gf-banner-stats dd { font-size: 11px; }
  /* Puhelimessa nimilapulle riittää kapeampi sarake: kentälle on jätettävä
     tilaa, ja "Message of the day" mahtuu kahdelle riville. */
  .guild-facelift .gs-col .guild-field { grid-template-columns: 104px minmax(0, 1fr); gap: 4px 10px; }
  .gf-member { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0 7px; }
  .gf-member:has(.gf-row-menu) { grid-template-columns: 36px minmax(0, 1fr) auto 32px; }
  .gf-member-med,
  .gf-member-med .char-medallion,
  .gf-member-med .portrait-img,
  .gf-member-med img,
  .gf-member-med svg { width: 36px; height: 36px; }
  .gf-member-who > a { font-size: 13px; }
  .gf-member-stats { column-gap: 8px; }
  .gf-member-stats .gf-stat-icon { width: 10px; height: 10px; }
  .gf-stat-icon { width: 13px; height: 13px; }
  .gf-directory-ledger .guild-nm { max-width: 95px; }
  .gwf-war-hero { min-height: 380px; }
  .guild-war-facelift .gw-side .guild-crest { width: 34px; height: 34px; }
  .guild-war-facelift .gw-side-name { font-size: 9px; }
  .guild-war-facelift .gw-score { font-size: 21px; }
  .guild-war-facelift .gw-press { width: 190px; }
  .gwf-phase-track::before { top: 23px; }
  .gwf-phase-track li { padding-inline: 1px; }
  .gwf-phase-track i { width: 20px; height: 20px; }
  .gwf-phase-track b { font-size: 6px; }
  .gwf-field-heading { padding: 12px 9px; }
  .gwf-slot { min-height: 105px; }
  .gwf-slot-med { width: 38px; height: 38px; }
  .gwf-slot-med .char-medallion,
  .gwf-slot-med .portrait-img,
  .gwf-slot-med img,
  .gwf-slot-med svg { width: 38px; height: 38px; }
  .gwf-slot-order { min-height: 11px; font-size: 4.8px; }
  .gwf-slot-state { font-size: 5.5px; }
  .gwf-field-marker b { font-size: 10px; }
  .gwf-own-heading .guild-crest { display: none; }
  .guild-war-facelift .gw-drawer { inset: 7px; width: auto; max-height: calc(100dvh - 14px); }
}

@media (prefers-reduced-motion: reduce) {
  .guild-facelift *,
  .guild-facelift *::before,
  .guild-facelift *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}