/* 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 */
.gf-members-layout { display: grid; grid-template-columns: minmax(0, 1fr) 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; }
.gf-member-who > a { color: #fff3ce; font-weight: 800; text-decoration: none; }
.gf-member-who > span,
.gf-member-who > em { color: var(--gf-muted); font-size: 10px; }
.gf-member-who > em { color: #d9c99f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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 PUHELIMEN elementti: työpöydällä 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; }
.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; }

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

@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; }
  .gf-member-who > em { flex: 1 1 100%; font-size: 10px; }
  .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; }
}