/* ============================================================
   Realms of Elynia — pelin ulkoasu (V1).
   Kanoniset tokenit tulevat tokens.css:stä (--sand, --parchment,
   --night, --bronze, --gold, ...). Ei ulkoisia fontteja/CDN:iä:
   'Cinzel' putoaa Georgiaan kunnes self-host myohemmassa vaiheessa.
   ============================================================ */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--sand);
  color: var(--ink);
  font: 16px/1.45 var(--font-body);
  min-height: 100vh;
}

img { max-width: 100%; }

a { color: var(--bronze); }
a:hover { color: var(--bronze-deep); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.icon-sm { width: 18px; height: 18px; }
.icon-xs { width: 13px; height: 13px; }

/* ---------------------------------------------------------- boot */

#app.loading {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------- header */

.hdr {
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: var(--shadow);
}

/* rivi 1 — night command band */
.hdr-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  background: var(--night);
  border-bottom: 2px solid var(--bronze);
}

/* Brändiryhmä: wordmark + chat-nappi vasemmassa laidassa vierekkäin.
   margin-right:auto siirtyi wordmarkilta tälle ryhmälle → työntää loput
   (työajastin, hahmochip, sound, logout) oikealle kuten ennen. */
.hdr-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .26em;
  color: var(--gold);
  white-space: nowrap;
}
/* Lyhyt wordmark-variantti (ELYNIA) näkyy vain mobiilissa — display:none
   pitää sen myös poissa saavutettavuuspuusta desktopilla. */
.wordmark .wm-short { display: none; }

.player-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 14px 3px 5px;
  border: 1px solid var(--bronze);
  border-radius: 999px;
  background: rgba(201, 162, 75, .10);
}

.player-chip .pname {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--night-text);
}

/* Työajastin: pilleri hahmochipin vasemmalla. Näyttää aktiivisen keikan jäljellä
   olevan ajan (data-deadline-tikkeri), "Ready" kun valmis, tai idle-pikakuvake
   ("Work") joka vie Work-sivulle. */
.work-timer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 3px 12px;
  border: 1px solid var(--bronze);
  border-radius: 999px;
  background: rgba(201, 162, 75, .10);
  color: var(--night-text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.work-timer:hover { background: rgba(201, 162, 75, .18); }
.work-timer .wt-time { font-variant-numeric: tabular-nums; }
.work-timer-ready { border-color: var(--laurel); color: var(--laurel); }
.work-timer-idle { opacity: .68; }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--bronze);
  border-radius: var(--radius);
  cursor: pointer;
}
.iconbtn:hover { background: rgba(201, 162, 75, .14); }
/* Musiikki mykistetty: himmennetty ikoni + diagonaalinen viiva (yliviivaus). */
.iconbtn.muted { opacity: .45; position: relative; }
.iconbtn.muted::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 50%;
  height: 2px; background: var(--gold); transform: rotate(-45deg); border-radius: 2px;
}
/* Header-linkkinapit (esim. kirjaikoni) — sama muoto kuin painikkeet, ei
   alleviivausta; aktiivinen reitti korostuu bronze-täytöllä. */
a.iconbtn { text-decoration: none; }
.iconbtn.active { background: rgba(201, 162, 75, .18); border-color: var(--gold); }

/* rivi 2 — parchment stat strip */
.hdr-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 9px 16px;
  background: var(--parchment);
  border-bottom: 1px solid var(--line);
}

.stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: .03em;
  white-space: nowrap;
}

.stat .sub, .sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------- bars & pips */

.bar {
  position: relative;
  height: 18px;
  flex: 1 1 140px;
  min-width: 140px;
  max-width: 240px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.bar .fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transition: width .4s;
}

.bar .lbl {
  position: relative;
  display: block;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: .03em;
}

.bar.hp .fill { background: var(--crimson); }
/* HP-label on vaaleaa tekstiä keskitettynä koko palkin päälle. Kun HP laskee,
   crimson-täyttö kutistuu vasemmalle ja keskikohta paljastaa vaalean radan
   (--parchment-deep) → vaalea teksti jäisi lukukelvottomaksi. Tumma ääriviiva
   (text-shadow) pitää labelin luettavana sekä täytöllä ETTÄ paljaalla radalla. */
.bar.hp .lbl {
  color: var(--parchment);
  text-shadow: 0 0 2px rgba(20, 14, 8, .95), 0 1px 2px rgba(20, 14, 8, .85);
}

/* Klikattava HP-palkki (avaa pikaparannus-dropdownin) + caret-affordanssi. */
.hp-clickable { cursor: pointer; }
.hp-clickable:hover { border-color: var(--gold); }
.hp-clickable:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.hp-caret {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--parchment);
  opacity: .9;
  filter: drop-shadow(0 1px 1px rgba(20, 14, 8, .95));
  pointer-events: none;
}

/* HP-pikaparannuksen dropdown (bodyyn liitetty, fixed — ei leikkaudu). */
.heal-menu {
  position: fixed;
  z-index: 80;
  min-width: 224px;
  max-width: 288px;
  background: var(--night);
  border: 1px solid var(--bronze);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(20, 14, 8, .55);
  overflow: hidden;
}
.heal-head {
  padding: 8px 12px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--night-line);
}
.heal-body { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.heal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: var(--night-soft);
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  color: var(--night-text);
  cursor: pointer;
  text-align: left;
}
.heal-row:hover:not(:disabled) { border-color: var(--bronze); background: rgba(201, 162, 75, .12); }
.heal-row:disabled { opacity: .5; cursor: default; }
.heal-icon { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.heal-art { width: 26px; height: 26px; object-fit: contain; border-radius: 3px; }
.heal-glyph { width: 22px; height: 22px; display: inline-flex; }
.heal-glyph svg { width: 100%; height: 100%; }
.heal-name { flex: 1 1 auto; font-weight: 700; font-size: 12.5px; }
.heal-amt { font-size: 11.5px; color: #A6C178; font-weight: 700; white-space: nowrap; }
.heal-qty { font-size: 12px; opacity: .8; min-width: 26px; text-align: right; }
.heal-empty, .heal-loading, .heal-note {
  margin: 0; padding: 10px 12px; font-size: 12px; color: var(--night-text); opacity: .8;
}
.heal-note { color: #A6C178; opacity: 1; }
.heal-empty a { color: var(--gold); }
.bar.xp .fill { background: var(--gold); }
.bar.xp .lbl { color: var(--ink); }
.bar.pe .fill { background: var(--gl-blue, #2E5A7A); }
.bar.pe .lbl { color: var(--parchment); text-shadow: 0 0 2px rgba(20, 14, 8, .95), 0 1px 2px rgba(20, 14, 8, .85); }
/* Expedition/Arena-poolit palkkeina (yhdenmukaiset HP/XP/PE:n kanssa, ei enää
   erillisiä pip-rivejä). ap = vihreä (kuten vanhat pipit), arena = pronssi. */
.bar.ap .fill { background: var(--laurel); }
.bar.ap .lbl, .bar.arena .lbl { color: var(--parchment); text-shadow: 0 0 2px rgba(20, 14, 8, .95), 0 1px 2px rgba(20, 14, 8, .85); }
.bar.arena .fill { background: var(--bronze); }

.pips { display: inline-flex; gap: 3px; }

.pip {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
}
.pip.on { background: var(--laurel); border-color: var(--laurel); }

.pips-lg .pip { width: 11px; height: 11px; }

.countdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}

.mini-bar {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 10px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
}
.mini-bar .fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--gl-blue, #2E5A7A);
}
.mini-bar-wide { width: 110px; }

/* ---------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  color: #F7F2E4;
  background: linear-gradient(180deg, #A47E3C, #7E5F29);
  border: 1px solid #5F4720;
  border-radius: var(--radius);
  cursor: pointer;
}
.btn:hover { background: linear-gradient(180deg, #B08A44, var(--bronze)); }
.btn:disabled {
  color: var(--ink-soft);
  background: var(--parchment-deep);
  border-color: var(--line);
  cursor: not-allowed;
}

.btn-block { width: 100%; }

.btn-ghost {
  color: var(--ink);
  background: var(--parchment);
  border: 1px solid var(--bronze);
}
.btn-ghost:hover { background: var(--parchment-deep); }

/* Korostettu pääkutsu (dungeonin Enter/Return, talenttien Save loadout).
   Merkintä oli jo näkymissä mutta sääntö puuttui, joten napit renderöityivät
   pelkkänä .btn:nä ilman painotusta. */
.btn-primary {
  background: linear-gradient(180deg, var(--bronze), var(--bronze-deep, #6E521F));
  border-color: var(--gold);
  color: var(--night);
  font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.08); }

.plusbtn {
  width: 44px;
  height: 44px;
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #F7F2E4;
  background: linear-gradient(180deg, #A47E3C, #7E5F29);
  border: 1px solid #5F4720;
  border-radius: var(--radius);
  cursor: pointer;
}
.plusbtn:hover { background: linear-gradient(180deg, #B08A44, var(--bronze)); }
.plusbtn:disabled {
  color: var(--ink-soft);
  background: var(--parchment-deep);
  border-color: var(--line);
  cursor: not-allowed;
}

/* ---------------------------------------------------------- view shell */

.view {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px;
}

.panel {
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.panel h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 3px double var(--line);
}

.error-panel { max-width: 460px; margin: 40px auto; text-align: center; }
.error-panel p { color: var(--crimson); margin: 0 0 14px; }

/* skeletonit */
.skel-stack { display: grid; gap: var(--gap); max-width: 720px; margin: 0 auto; }
.skel {
  background: var(--parchment-deep);
  border-radius: var(--radius);
  animation: skel-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes skel-pulse {
  from { opacity: .55; }
  to { opacity: .95; }
}

/* ---------------------------------------------------------- toasts */

#toasts {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 340px;
}

.toast {
  padding: 10px 14px;
  background: var(--parchment);
  border: 1px solid var(--line);
  border-left: 4px solid var(--bronze);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 14px;
}
.toast.success { border-left-color: var(--laurel); }
.toast.error { border-left-color: var(--crimson); }

/* ---------------------------------------------------------- auth landing (hero) */

/* body.auth-page (route() togglaa view.public-lipusta): header piiloon ja
   shell täysleveäksi, jotta .auth-hero täyttää koko viewportin. */
body.auth-page .hdr { display: none; }
body.auth-page .shell { max-width: none; margin: 0; }
body.auth-page .view { max-width: none; padding: 0; }

/* Hero-kuori: täysleveä taustakuva (login.jpg) + gradient-fallback + scrim.
   Sama additiivinen kuvakaava kuin scene-taustoissa (onerror poistaa imgn). */
.auth-hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: linear-gradient(160deg, #241C12 0%, #3A2E1D 45%, #6E521F 130%);
}
.auth-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.auth-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20, 14, 8, .84) 0%, rgba(20, 14, 8, .48) 38%, rgba(20, 14, 8, .12) 62%, rgba(20, 14, 8, .40) 100%),
    linear-gradient(180deg, rgba(20, 14, 8, .30) 0%, rgba(20, 14, 8, 0) 30%, rgba(20, 14, 8, .55) 100%);
}
.auth-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 48px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
}

/* Pitch-sarake: wordmark, tagline, myyntipointit, CTA, medaljongit, top-3. */
.auth-pitch {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  color: var(--night-text);
}
.auth-kicker {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}
.auth-wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 54px;
  line-height: 1.04;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--parchment);
  text-shadow: 0 2px 22px rgba(0, 0, 0, .65);
}
.auth-wordmark-sm { font-size: 34px; }
.auth-tagline {
  margin: 0;
  font-size: 17px;
  color: #D9CBA8;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.auth-features {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.auth-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15.5px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.auth-cta {
  min-height: 52px;
  padding: 14px 28px;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(201, 162, 75, .35), 0 2px 8px rgba(0, 0, 0, .5);
}
.auth-medallions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.auth-med {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bronze);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
.auth-legends {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #C9BCA0;
}
.auth-legends b { color: var(--gold); }
.auth-legend-sep { opacity: .6; }
.auth-social { margin: 0; font-size: 14px; }
.auth-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #C9BCA0;
  text-decoration: none;
}
.auth-social a:hover { color: var(--gold); }

/* Lasimainen night-lomakepaneeli (sama kieli kuin pelin map-panelit). */
.auth-panel-dark {
  flex: none;
  width: 360px;
  padding: 26px 26px 22px;
  background: rgba(22, 15, 8, .80);
  border: 1px solid rgba(201, 162, 75, .38);
  border-radius: 12px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
  color: var(--night-text);
}
.auth-panel-dark.auth-panel-wide { width: min(660px, 100%); }
.auth-panel-dark h2 {
  margin: 0 0 18px;
  padding-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--night-line);
}
.auth-panel-dark .field label { color: var(--night-text); }
.auth-panel-dark .field .optional { color: #B8A98C; }
.auth-panel-dark .field input {
  background: rgba(58, 46, 29, .65);
  border-color: var(--night-line);
  color: var(--night-text);
}
.auth-panel-dark .field input:focus { outline: none; border-color: var(--gold); }
.auth-panel-dark .field input.invalid { border-color: #F08A7A; }
.auth-panel-dark .hint { color: #B8A98C; }
.auth-panel-dark .ferr { color: #F08A7A; }

.auth-alt {
  margin: 16px 0 0;
  font-size: 14px;
  color: #C9BCA0;
}
.auth-alt a { color: var(--gold); }

.field { margin-bottom: 14px; }
/* Nimikenttä + Randomize-nappi vierekkäin rekisteröinnissä. */
.name-gen-row { display: flex; gap: 8px; align-items: stretch; }
.name-gen-row input { flex: 1 1 auto; min-width: 0; }
.name-gen-btn { flex: none; white-space: nowrap; padding: 0 14px; }

.field label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.field .optional {
  font-weight: 400;
  color: var(--ink-soft);
}

.field input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  font: 16px var(--font-body);
  color: var(--ink);
  background: #FBF7EC;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.field input.invalid { border-color: var(--crimson); }

.hint {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.ferr {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--crimson);
}

/* Rekisteröinnin valitsimet night-paneelissa. */
.pickset {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.pickset legend {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 0;
  margin-bottom: 8px;
  color: var(--gold);
}

/* muotokuvamedaljongit (g-fallback-teksti alla, taide .portrait-img päällä) */
/* auto-fill EIKÄ repeat(6): ruudukko oli kovakoodattu porttrettien määrään, joten
   7. porttretti olisi rikkonut sen. .medallion rajaa itsensä (max-width,
   margin auto), joten tämä ei tarvitse enää koskaan päivitystä — eikä erillistä
   mobiili-overridea.
   Raita 150px on valittu rekisteröintipanelin mitasta: .auth-panel-wide on
   min(660px, 100%) - 2*26px paddingia = 608px, jolloin auto-fill mahtuu tasan
   kolmeen sarakkeeseen ((608-20)/3 = 196px). Kuusi porttrettia asettuu siis
   siistiin 3+3-ruudukkoon 72px:n rivin sijaan. Valinta on koko rekisteröinnin
   pointti — hahmon kasvot pitää NÄHDÄ ennen kuin ne valitsee. Kapealla
   ruudulla auto-fill tippuu itse kahteen sarakkeeseen (~159px puhelimessa). */
.portraits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
/* Kapeimman ruudun suoja: alle ~360px:n leveydellä paneelin sisus jää alle
   310px:ään, jolloin 150px:n raita mahtuu enää YHTEEN sarakkeeseen — kuusi
   200px:n medaljonkia peräkkäin olisi yli 1200px pystyvieritystä pelkkää
   porttrettivalitsinta. 120px pitää rivillä kaksi (~139px kappale), mikä on
   yhä lähes kaksinkertainen entiseen 72px:ään. Tavalliset puhelimet (>=375px)
   eivät osu tähän, joten kysely on tarkoituksella kapea. */
@media (max-width: 380px) {
  .portraits { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

.medallion {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1;
  min-height: 44px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--night-soft), var(--night) 78%);
  border: 2px solid var(--bronze);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: box-shadow .14s ease, border-color .14s ease;
}
.medallion:hover { border-color: var(--gold); }
.medallion[aria-pressed="true"] {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold), 0 0 16px rgba(201, 162, 75, .5);
}

/* tyylikortit */
.stylecards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.stylecard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 44px;
  padding: 12px;
  font: inherit;
  color: var(--night-text);
  text-align: left;
  background: rgba(58, 46, 29, .5);
  border: 2px solid var(--night-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.stylecard:hover { border-color: var(--bronze); }
.stylecard[aria-pressed="true"] {
  border-color: var(--gold);
  background: rgba(201, 162, 75, .13);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.scname {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--gold);
}

.scblurb {
  font-size: 12.5px;
  color: #C9BCA0;
}

/* ---------------------------------------------------------- immersive cards (shared) */

/* Yleiskäyttöinen kortti-/pino-järjestelmä KAIKILLE immersiivisille näkymille
   (Overview, ja tästä eteenpäin loput ~12). Pino (.imm-stack) on flex-column
   .imm-scenen reunassa: ensimmäinen kortti saa luontaisen kokonsa,
   .imm-card-fill täyttää lopun ja vierittää sisäisesti jos sisältö ei mahdu —
   TÄMÄ estää korttien menemisen päällekkäin kun sisällön pituus vaihtelee
   (esim. Overviewin Attributes freePoints > 0 -tilassa). Yksi näkymä voi
   käyttää 1-4 pinoa (imm-stack-tl/tr/bl/br) riippuen tarpeesta. */
.imm-stack {
  position: absolute;
  z-index: 3;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.imm-stack-left { left: 16px; top: 16px; bottom: 16px; }
.imm-stack-right { right: 16px; top: 16px; bottom: 16px; }
.imm-stack-tl { left: 16px; top: 16px; }
.imm-stack-tr { right: 16px; top: 16px; }
.imm-stack-bl { left: 16px; bottom: 16px; }
.imm-stack-center { top: 16px; bottom: 16px; left: 50%; transform: translateX(-50%); }
/* Leveämmät kortit sisällölle joka ei mahdu 300px-sarakkeeseen (taulukot,
   suodattimet, isot ruudukot) — käytä .imm-stackin width-oletuksen sijaan. */
.imm-stack-wide { width: 460px; }
.imm-stack-xwide { width: 640px; }
/* Kaksi vierekkäistä pinoa: .imm-scene on kapeampi kuin koko viewport (kaksi
   190px-sivupalkkia syövät tilaa, jää usein alle 1000px), joten kiinteät
   leveydet (esim. xwide+wide) menevät helposti päällekkäin kapeammilla
   työpöytäleveyksillä. Nämä varianit jakavat tilan aina turvallisesti
   puoliksi + 16px väli — käytä TÄTÄ kahden pinon layouteissa .imm-stack-
   left/right+wide/xwide-yhdistelmän sijaan. */
.imm-stack-half-left { left: 16px; right: calc(50% + 8px); width: auto; }
.imm-stack-half-right { left: calc(50% + 8px); right: 16px; width: auto; }
.imm-stack-br { right: 16px; bottom: 16px; }
/* Lähes koko scenen leveyden täyttävä yksittäinen pino — ruudukko-/taulukkosivuille
   (Professions, Work, Leaderboard, Premium, Shop) jotka tarvitsevat enemmän tilaa kuin
   xwide (640px) antaa. Käytä yksinään, EI yhdistettynä -center/-xwide:hen. */
.imm-stack-full { left: 16px; right: 16px; top: 16px; bottom: 16px; width: auto; }

.imm-card {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 10px;
  color: var(--night-text);
  box-shadow: 0 8px 24px rgba(20, 14, 8, .55);
}
/* Täyttää pinon jäljellä olevan tilan ja vierittää sisäisesti. */
.imm-card-fill { flex: 1 1 auto; }
.imm-card-center { text-align: center; }
.imm-card h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 3px double var(--night-line);
}

/* Uudelleenkäytetyt elementit (.char-name, .sname, .rb-row, jne.) oletti aiemmin
   valoisaa .panel-kontekstia (tumma teksti vaalealla). Night-panelilla ne
   tarvitsevat vaalean tekstin — sama periaate kuin .scene-card .yield-tag.
   Tämä lista kasvaa sitä mukaa kun uusia näkymiä muunnetaan immersiivisiksi. */
.imm-card .style-label,
.imm-card .dlabel,
.imm-card .res-note,
.imm-card .sblurb,
.imm-card .cap-note,
.imm-card .trained-note,
.imm-card .rb-gains,
.imm-card .rb-time,
.imm-card .rb-empty,
.imm-card .hint-line { color: var(--night-text); opacity: .75; }
.imm-card .rb-row { color: var(--night-text); border-bottom-color: var(--night-line); }
.imm-card .rb-row:hover { background: var(--night-soft); color: var(--night-text); }
.imm-card .statrow, .imm-card .trainrow { border-bottom-color: var(--night-line); }
.imm-card .trained-tag { color: var(--night-text); opacity: .75; }
.imm-card .hint-line a, .imm-card .rb-empty a { color: var(--gold); }
.imm-card .hint-line a:hover, .imm-card .rb-empty a:hover { color: #fff; }
/* leaderboard.js */
.imm-card .lb-tab { color: var(--night-text); background: var(--night-soft); border-color: var(--night-line); }
.imm-card .lb-banner { background: var(--night-soft); border-color: var(--bronze); }
.imm-card .lb-table th, .imm-card .lb-table td { border-bottom-color: var(--night-line); }
.imm-card .lb-table th, .imm-card .lb-rank, .imm-card .lb-page, .imm-card .lb-empty { color: var(--night-text); opacity: .75; }
.imm-card .lb-name a { color: var(--night-text); }
.imm-card .lb-row.mine { background: var(--night-soft); }
/* quests.js */
.imm-card .quest-card { background: var(--night-soft); border-color: var(--night-line); }
.imm-card .q-chip { background: var(--night); border: 1px solid var(--night-line); }
.imm-card .q-chip.q-gold { color: var(--gold); }
.imm-card .q-chip.q-xp { color: var(--night-text); }
.imm-card .q-bar { background: var(--night); border-color: var(--night-line); }
.imm-card .q-progress-lbl, .imm-card .q-reroll-ask, .imm-card .q-reroll-no, .imm-card .dr-locked { color: var(--night-text); opacity: .75; }
.imm-card .dr-note { color: var(--night-text); }
/* arena.js */
.imm-card .opprow, .imm-card .hist-row { border-bottom-color: var(--night-line); }
.imm-card .opp-name, .imm-card .hist-row { color: var(--night-text); }
.imm-card .opp-name:hover { color: var(--gold); }
.imm-card .hist-row:hover { background: var(--night-soft); color: var(--night-text); }
.imm-card .opp-meta, .imm-card .delta-prev .d-sep, .imm-card .al-note { color: var(--night-text); opacity: .75; }
/* .d-win/.hd-pos ja .d-loss/.hd-neg olettivat vaaleaa taustaa (var(--laurel)/
   var(--crimson) ovat liian tummia night-kortilla) — samat vaaleat sävyt kuin
   .nt-win/.nt-loss (ar-record), jotka on jo suunniteltu night-kontekstiin. */
.imm-card .d-win, .imm-card .hd-pos { color: #A6C178; }
.imm-card .d-loss, .imm-card .hd-neg { color: #E07A6A; }
/* work.js */
.imm-card .wa-sub, .imm-card .wa-note { color: var(--night-text); opacity: .75; }
.imm-card .wa-bar { background: var(--night-soft); border-color: var(--night-line); }
/* professions.js overview */
.imm-card .pe-count { color: var(--gold); }
.imm-card .pe-track { background: var(--night-soft); border-color: var(--night-line); }
.imm-card .pe-note { color: var(--night-text); opacity: .75; }
/* Yleiset: .countdown/.sub esiintyvät melkein joka näkymässä (palkit,
   AP/PE-chipit) ja olettivat ink-soft-tekstiä — koskee kaikkia jo muunnettuja
   näkymiä retroaktiivisesti (Overview/Training/Work/Arena), ei vain uusia. */
.imm-card .countdown, .imm-card .sub { color: var(--night-text); opacity: .75; }
/* expeditions.js (zone detail) */
.imm-card .styletag { color: var(--night-text); opacity: .75; }
.imm-card .backlink { color: var(--gold); }
/* shop.js */
.imm-card .tabbtn { color: var(--night-text); background: var(--night-soft); border-color: var(--night-line); }
.imm-card .tabbtn:hover { background: var(--night); }
/* market.js */
.imm-card .mk-dash, .imm-card .mk-taxnote, .imm-card .mk-mine-sub, .imm-card .mk-lock-note, .imm-card .mk-lock-prog { color: var(--night-text); opacity: .75; }
/* ...paitsi .mk-mine-row'n sisällä: rivi tuo takaisin VAALEAN parchment-taustan
   tumman imm-cardin sisään, joten yllä oleva vaalennus jätti alarivin
   (slot · iLvl) vaalea-vaalealla lähes näkymättömäksi. Koskee sekä My listings-
   että History-välilehteä. */
.imm-card .mk-mine-row .mk-mine-sub { color: var(--ink-soft); opacity: 1; }
.imm-card .mk-lock-bar { background: var(--night-soft); }
.imm-card.mk-locked h2 { color: var(--gold); }
/* trades.js */
.imm-card .tr-who, .imm-card .tr-confirm-ask { color: var(--night-text); }
.imm-card .tr-back { color: var(--gold); }
/* character.js */
.imm-card .spell-chip { color: var(--night-text); background: var(--night-soft); border-color: var(--night-line); }
.imm-card .spell-chip:hover { background: var(--night); }
.imm-card .pouch-cell { background: var(--night-soft); border-color: var(--night-line); }
.imm-card .pouch-qty { color: var(--gold); }
.imm-card .pouch-kind, .imm-card .inv-count, .imm-card .mat-note { color: var(--night-text); opacity: .75; }
.imm-card .matrow { border-bottom-color: var(--night-line); }
.imm-card .gbonus { color: #A6C178; }
.imm-card .buff-name { color: var(--night-text); }
.imm-card .buff-time { color: var(--night-text); opacity: .75; }
.imm-card .buff-eff { color: #A6C178; }
.imm-card .buff-elixir .buff-eff { color: #C6D8EE; }
.imm-card .tr-taxnote, .imm-card .tr-lock-note, .imm-card .tr-lock-prog { color: var(--night-text); opacity: .75; }
.imm-card .tr-lock-bar { background: var(--night-soft); }
.imm-card.tr-locked h2 { color: var(--gold); }
/* Yleinen: .price-short olettaa vaaleaa taustaa (var(--crimson) on liian tumma
   night-kortilla) — koskee mitä tahansa näkymää joka käyttää priceTag()-tyylistä
   hintaa suoraan .imm-card:n lapsena (ensimmäinen tapaus: forge.js:n Spolia-osto). */
.imm-card .price-short { color: #E07A6A; }
/* forge.js */
.imm-card .forge-lead { color: var(--night-text); opacity: .75; }
/* professions.js detail (gather + workshop) */
.imm-card .pd-blurb, .imm-card .pd-skill-xp, .imm-card .node-req, .imm-card .rc-arrow, .imm-card .pe-cost, .imm-card .ws-tier-h { color: var(--night-text); opacity: .75; }
.imm-card .node-name, .imm-card .recipe-name { color: var(--night-text); }
.imm-card .pd-skill-lbl, .imm-card .bonus-chance, .imm-card .recipe-out { color: var(--gold); }
.imm-card .recipe-out-blurb { color: var(--night-text); opacity: .7; }
.imm-card .node-lock { color: #E07A6A; }
.imm-card .yield-tag, .imm-card .rc-input { background: var(--night-soft); border-color: var(--night-line); color: var(--night-text); }
.imm-card .rc-input b { color: #A6C178; }
.imm-card .rc-input.short b { color: #E07A6A; }
.imm-card .ws-tier-h { border-top-color: var(--night-line); }
/* report.js */
.imm-card .round { border-bottom-color: var(--night-line); }
.imm-card .round-h, .imm-card .rh-name, .imm-card .rh-num { color: var(--night-text); opacity: .75; }
.imm-card .rbar { background: var(--night-soft); border-color: var(--night-line); }
.imm-card .dmg { color: #E07A6A; }

.ov-br-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--night-line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.ov-br-foot .hint-line { margin: 0; font-size: 12.5px; }

/* ---------------------------------------------------------- overview (#/overview) */

.char-medallion {
  width: 96px;
  height: 96px;
  margin: 6px auto 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F3EAD3, var(--parchment-deep) 72%);
  border: 3px solid var(--bronze);
  color: var(--bronze-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  display: grid;
  place-items: center;
}

.char-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .08em;
  margin: 0 0 10px;
}

.char-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.lvl-badge {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--gold);
  background: var(--night);
  border: 1px solid var(--bronze);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

.style-label {
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink-soft);
}

.gold-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  margin-bottom: 16px;
}

/* palkkirivit */
.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.bar-row .bar { max-width: none; }

.res-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 36px;
  margin-bottom: 10px;
}
.res-row:last-child { margin-bottom: 0; }

.res-name {
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: .03em;
  min-width: 150px;
}

.res-note {
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* statipaneeli */
.fp-chip {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .03em;
  background: rgba(201, 162, 75, .22);
  border: 1px solid var(--gold);
  border-radius: 999px;
}

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

.statrow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.statrow:last-child { border-bottom: 0; }

.sname {
  flex: 1;
  font-variant: small-caps;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .04em;
}

.sval {
  width: 44px;
  text-align: right;
  font-weight: 700;
  font-size: 17px;
}

.cap-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------- guide (#/guide) */

.guide-view {
  display: grid;
  /* Yksi sarake, joka EI kasva sisällön max-contentiin: minmax(0, 1fr) sitoo
     sarakkeen kontin leveyteen, jotta leveä lapsi (material web -pre, taulukot)
     ei venytä koko ruudukkoa ja leikkaa kappaleiden tekstiä oikealta kapealla
     näytöllä. Leveät lapset vierittävät omissa overflow-x-kääreissään. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  max-width: 780px;
  margin: 16px auto;
  padding: 0 16px;
}
/* Ruudukon lapset saavat kutistua kontin alle (muuten min-width:auto pitää ne
   sisällön max-content-leveydessä ja teksti vuotaa reunan yli). */
.guide-view > * { min-width: 0; }
.guide-view .panel p { margin: 0 0 10px; line-height: 1.55; }
.guide-view .panel p:last-child { margin-bottom: 0; }

.guide-hero { text-align: center; }
.guide-lead { font-size: 15px; color: var(--ink); }
.guide-loop {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px;
}
.guide-loop span {
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.guide-note { font-size: 12.5px; color: var(--ink-soft); }
.guide-foot { margin-top: 12px; font-style: italic; }

/* Osion sisäinen väliotsikko (esim. "Brew your own healing") — kevyempi kuin h2. */
.guide-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 16px 0 8px;
}

.guide-list { margin: 4px 0 0; padding-left: 20px; }
.guide-list li { margin: 0 0 7px; line-height: 1.5; }

.guide-triangle {
  font-family: var(--font-display);
  letter-spacing: .1em;
  text-align: center;
  color: var(--gold);
  background: var(--night);
  border-radius: var(--radius);
  padding: 10px;
  margin: 4px 0 10px;
}

.guide-callout {
  border-left: 3px solid var(--gold);
  background: var(--parchment-deep);
  padding: 10px 12px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
}

.guide-web {
  background: var(--night);
  color: var(--parchment);
  border-radius: var(--radius);
  padding: 12px;
  margin: 0;
  overflow-x: auto;
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre;
}

.guide-table-wrap { overflow-x: auto; }
.guide-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.guide-table th, .guide-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.guide-table th {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.guide-table td.k { font-weight: 700; color: var(--ink); white-space: nowrap; }
.guide-table tbody tr:last-child td { border-bottom: none; }

/* ---- floating "book" window (guideBook.js) ---- */
/* Kelluva, raahattava opas: elää reitittimen ulkopuolella, ei backdropia →
   peli jää taustalle pelattavaksi. Sijainti/koko JS:stä (inline left/top). */
.guide-book {
  position: fixed;
  z-index: 60;
  width: min(640px, 94vw);
  height: min(80vh, 820px);
  min-width: 340px;
  min-height: 260px;
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--parchment);
  border: 1px solid var(--bronze);
  border-radius: var(--radius);
  box-shadow: 0 18px 54px rgba(20, 14, 8, .5);
  overflow: hidden;
  resize: both;
}
.guide-book.gb-dragging { user-select: none; box-shadow: 0 24px 64px rgba(20, 14, 8, .62); }

/* Otsikkopalkki = raahauskahva (kirjanselkä). */
.gb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px 9px 14px;
  background: var(--night);
  border-bottom: 2px solid var(--bronze);
  cursor: move;
  touch-action: none;
  flex: none;
}
.gb-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.gb-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--bronze);
  border-radius: var(--radius);
  cursor: pointer;
}
.gb-close:hover { background: rgba(201, 162, 75, .16); }

/* Pystyskrolli kirjassa; vaakaleveät lapset (taulukot, material web) skrollaavat
   omissa overflow-x-kääreissään, joten runko ei saa näyttää vaakapalkkia. */
.gb-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 14px; }
.guide-book .guide-table-wrap { max-width: 100%; }

/* Sisältö (guide-view) täyttää kirjan leveyden — ei omaa keskitystä/marginaalia. */
.guide-book .guide-view { margin: 0; padding: 0; max-width: none; }
/* scrollIntoView jättää pienen ilmavälin osion yläpuolelle. */
.gb-sec { scroll-margin-top: 6px; }

/* Sisällysluettelo: klikattavat osiolinkit (chip-napit). */
.gb-toc-list { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-toc-link {
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
}
.gb-toc-link:hover { background: rgba(201, 162, 75, .16); border-color: var(--bronze); }

/* Mobiili: kirja EI ole kelluva/raahattava ikkuna vaan näytölle ankkuroitu levy.
   !important yliajaa mahdolliset työpöydältä perityt inline left/top/width/height
   -arvot, joten levy ei voi valua oikean reunan yli ja leikata tekstiä. Leveys
   sidotaan viewportiin (94vw, keskitetty) ja korkeus dynaamiseen näkymäkorkeuteen
   (100dvh), jotta selaimen osoitepalkki ei jätä sisältöä piiloon. */
@media (max-width: 899px) {
  .guide-book {
    left: 50% !important;
    right: auto !important;
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    transform: translateX(-50%);
    width: 94vw !important;
    min-width: 0 !important;
    max-width: 94vw !important;
    height: auto !important;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    resize: none;
  }
  /* Sisällön vaakapehmuste tiukemmaksi kapealla näytöllä. */
  .guide-book .gb-body { padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------- mobile */

@media (max-width: 899px) {
  /* Globaali vaakavuoto-varmistin: yksikään leveä elementti (taulukko,
     nowrap-rivi) ei saa leventää koko sivua. clip ei luo scroll-kontekstia
     (sticky-header säilyy); hidden on fallback vanhemmille moottoreille. */
  html, body { overflow-x: hidden; overflow-x: clip; }

  /* Header 360px:iin: lyhyt wordmark (ELYNIA), rivitysvara ja kutistuva
     hahmochip — rivi ei saa koskaan vuotaa vaakasuunnassa. */
  .hdr-top { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .hdr-top .iconbtn { width: 40px; height: 40px; }
  .wordmark { font-size: 13px; letter-spacing: .12em; }
  .wordmark .wm-full { display: none; }
  .wordmark .wm-short { display: inline; }
  .player-chip { padding: 2px 10px 2px 4px; min-width: 0; flex: 0 1 auto; }
  .player-chip .pname {
    font-size: 12.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 92px;
  }
  /* Työajastin kompaktina mobiilissa; idle-pikakuvake piiloon (aktiivinen keikka
     ja Ready näkyvät edelleen). */
  .work-timer { height: 30px; padding: 3px 10px; font-size: 12px; gap: 5px; }
  .work-timer-idle { display: none; }

  /* tiivistetty, sivusuunnassa vieritettava stat strip */
  .hdr-strip {
    overflow-x: auto;
    gap: 16px;
    padding: 8px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .hdr-strip .bar { flex: none; width: 150px; min-width: 150px; }

  .ov { grid-template-columns: 1fr; }
  .stylecards { grid-template-columns: 1fr; }
  /* .portraits: ei overridea tällä leveydellä — auto-fill (:711) hoitaa sen
     itse (2 saraketta ~375px puhelimella). Kapeimman ruudun suoja on eriytetty
     omaan kyselyynsä (:728), koska 150px:n raita tippuisi siellä yhteen
     sarakkeeseen. */
  /* Auth-hero mobiilissa: pino (pitch -> paneeli), keskitetty pitch. */
  .auth-hero-inner {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 26px;
    padding: 32px 16px 44px;
  }
  .auth-pitch { max-width: none; align-items: center; text-align: center; }
  .auth-features { align-items: flex-start; text-align: left; }
  .auth-wordmark { font-size: 34px; }
  .auth-medallions { justify-content: center; }
  .auth-legends { justify-content: center; }
  .auth-panel-dark { width: 100%; padding: 20px 16px; }
  #toasts { left: 12px; right: 12px; max-width: none; }
}

/* ============================================================
   V2 — navigaatio, retket, taisteluraportti, treeni.
   Pysytaan kanonisissa tokeneissa; night-paneelit rarity.html-
   referenssin mukaan. Ei emojia, 44px-kohteet, mobiili 1 palsta.
   ============================================================ */

/* ---------------------------------------------------------- shell + nav */

.shell {
  display: flex;
  align-items: flex-start;
  max-width: 1210px;
  margin: 0 auto;
}
.shell > .view { flex: 1 1 auto; min-width: 0; }

.nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 190px;
  flex: none;
  margin: 16px 0 16px 16px;
}
.nav:empty { display: none; }

/* Toinen (oikea) sivupalkki — Economy-ryhmä. Perii .navin desktop-tyylin
   (parchment-napit, 190px pylväs), peilattu marginaali; ei mobiilisisältöä
   (ks. renderNav) — piilotetaan kokonaan alle 899px, alapalkki on edelleen
   yksin vasemman .nav-elementin (#nav) vastuulla. */
.nav-right { margin: 16px 16px 16px 0; }

/* Työpöytä (>=900px): sivupalkit ovat viewport-korkuisia sticky-pylväitä, jotta
   vasemman palkin meta-klusteri (News/Roadmap, margin-top:auto) pysyy näkyvissä
   palkin POHJALLA myös kun sivu skrollaa. overflow-y:auto → matalilla ruuduilla
   (esim. 13" läppäri) palkki skrollaa sisäisesti eikä mikään leikkaudu. --hdr-h
   = sticky-headerin (.hdr) korkeus, vakio työpöydällä (.hdr-strip/.hdr-top ei
   rivity >=900px). Mobiilissa (<=899px) .nav on fixed-alapalkki → tämä ei päde. */
@media (min-width: 900px) {
  .nav {
    --hdr-h: 101px;
    position: sticky;
    top: var(--hdr-h);
    align-self: flex-start;
    height: calc(100vh - var(--hdr-h) - 16px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 13px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .07em;
  color: var(--ink);
  text-decoration: none;
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.nav-item:hover { background: var(--parchment-deep); color: var(--ink); }
.nav-item.active {
  background: var(--night);
  border-color: var(--bronze);
  color: var(--gold);
}

/* Meta-klusteri (News/Roadmap): vaimennettu info-osio vasemman palkin pohjalla,
   erotinviivalla irti pelivalikoista. Oikea palkki jää chatille. */
.nav-sep { height: 1px; margin: auto 12px 3px; background: var(--line); border: 0; }
.nav-item.nav-meta {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--ink-soft);
  min-height: 38px;
  font-size: 12px;
}
.nav-item.nav-meta .icon { opacity: .72; }
.nav-item.nav-meta:hover { background: var(--parchment); border-color: var(--line); color: var(--ink); }
.nav-item.nav-meta:hover .icon { opacity: 1; }
.nav-item.nav-meta.active { background: var(--night); border-color: var(--bronze); color: var(--gold); }
.nav-item.nav-meta.active .icon { opacity: 1; }

/* ---------------------------------------------------------- portraits (forward-compat) */

/* Fallback-teksti alla, taidekuva absoluuttisesti päällä. Kuva on
   piilossa/tyhjä kunnes /assets/portraits/<id>.jpg on olemassa. */
.char-medallion, .medallion, .vs-medallion { position: relative; overflow: hidden; }

.portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
}

/* ---------------------------------------------------------- V26: kehykset */

/* Kehys on RENGAS, ei kuva. Se on CSS-muoto, joten se pysyy luettavana 48px:n
   medaljongissa (areenan vastustajalista) missä kasvot eivät — ja maksaa nolla
   rasteriassettia.

   Renkaan VÄRI ajetaan SÄILÖÖN :has():lla eikä tähän lapseen, koska säilöllä on
   jo `border` + `overflow: hidden`: lapsi joka yrittäisi piirtää sen renkaan
   päälle leikkautuisi pois. Lapsi kantaa siis vain sisemmät koristeet.

   border-radius: inherit on koko temppu — sama sääntö toimii sekä 50 %:n
   ympyröissä (medallion/opp/vs/char) että var(--radius)-neliössä
   (.doll-medallion :2453), ilman erillistä patchia kuten .portrait-img tarvitsee. */
/* Animoitava kulma kulta-kimallukselle (ilman @propertya --fr-angle ei
   interpoloituisi -> conic-fallback 216deg pitää renkaan ehjänä silti). */
@property --fr-angle { syntax: '<angle>'; inherits: false; initial-value: 216deg; }

.portrait-frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* Kiillotettu metallirengas. Per-kehys paletti: --fr-lo (varjo), --fr-mid
     (perus), --fr-hi (kiilto). "Gradient-border"-temppu: conic täyttää
     border-boxin, mask leikkaa padding-boxin pois -> VAIN rengas näkyy JA seuraa
     border-radiusta (ympyrä + pyöristetty neliö). --fr-band = paksuus, --fr-orn =
     koriste-taustakerros (isot pinnat), --fr-angle = animoitu kiillon kulma. */
  --fr-lo: #4A3814;
  --fr-mid: var(--bronze);
  --fr-hi: #E9CE8E;
  --fr-band: 3px;
  --fr-orn: linear-gradient(#0000, #0000);
  border: var(--fr-band) solid transparent;
  background:
    var(--fr-orn),
    conic-gradient(from var(--fr-angle, 216deg),
      var(--fr-lo) 0deg, var(--fr-hi) 52deg, var(--fr-mid) 104deg,
      var(--fr-lo) 168deg, var(--fr-hi) 232deg, var(--fr-mid) 300deg,
      var(--fr-lo) 360deg) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}

/* Per-kehys metallipaletit (bronze = oletukset yllä). */
.portrait-frame.frame-laurel { --fr-lo: #26331A; --fr-mid: var(--laurel); --fr-hi: #A6C077; }
.portrait-frame.frame-iron   { --fr-lo: #45453F; --fr-mid: #8A8577;       --fr-hi: #EEF1F6; }
.portrait-frame.frame-gold   { --fr-lo: #6E4E12; --fr-mid: var(--gold);   --fr-hi: #FBEBAE; }

/* "No Frame" — ei rengasta lainkaan. Metallikerros pois, ja taidekehys-
   konteksteissa portretti täyttää medaljongin (--fr-hole: 100 %) sen sijaan että
   kutistuisi kehyksen reiän kokoiseksi. Medaljongin oma ohut reunus on
   komponentin kromia (ei kehys), joten se saa jäädä pienissä konteksteissa. */
.portrait-frame.frame-none { background: none; border: 0; }
:is(.meta-onchair, .doll-medallion, .frame-preview):has(.frame-none) { --fr-hole: 100%; }

/* Säilön ohut ulkoreuna per kehys: 48px-fallback + valintarengas
   (.medallion[aria-pressed] :737) jää koskematta koska VAIN border-color. */
:is(.char-medallion, .medallion, .vs-medallion, .opp-medallion):has(.frame-laurel) { border-color: var(--laurel); }
:is(.char-medallion, .medallion, .vs-medallion, .opp-medallion):has(.frame-iron)   { border-color: #8A8577; }
:is(.char-medallion, .medallion, .vs-medallion, .opp-medallion):has(.frame-gold)   { border-color: var(--gold); }

/* ISOT PINNAT: paksumpi rengas + per-kehys koriste (repeating-conic pykälät,
   rajautuvat samaan maskiin kuin rengas). Pienet (48/50/64/72px) jäävät pelkäksi
   metallirenkaaksi -> areenalistan luettavuus säilyy (ei koristetta, ei liikettä). */
:is(.meta-onchair, .char-medallion) .portrait-frame { --fr-band: 7px; }
.meta-onchair .portrait-frame { --fr-band: 16px; }
:is(.meta-onchair, .char-medallion) .portrait-frame.frame-bronze { --fr-orn: repeating-conic-gradient(from 0deg, rgba(42, 28, 10, .40) 0deg 2deg, transparent 2deg 13deg) border-box; }
:is(.meta-onchair, .char-medallion) .portrait-frame.frame-laurel { --fr-orn: repeating-conic-gradient(from 0deg, rgba(18, 30, 10, .55) 0deg 8deg, rgba(166, 192, 119, .30) 8deg 11deg, transparent 11deg 22deg) border-box; }
:is(.meta-onchair, .char-medallion) .portrait-frame.frame-iron   { --fr-orn: repeating-conic-gradient(from 0deg, rgba(8, 8, 6, .60) 0deg 2.4deg, rgba(238, 241, 246, .32) 2.4deg 3.4deg, transparent 3.4deg 16deg) border-box; }
:is(.meta-onchair, .char-medallion) .portrait-frame.frame-gold   { --fr-orn: repeating-conic-gradient(from 0deg, rgba(110, 78, 18, .45) 0deg 1.4deg, transparent 1.4deg 7deg) border-box; }

/* Kulta-kimallus: pyöritä conic-kiiltoa VAIN isoilla pinnoilla + pehmeä ulkohehku. */
:is(.meta-onchair, .char-medallion):has(.frame-gold) .portrait-frame { animation: frame-sheen 7s linear infinite; }
.meta-onchair:has(.frame-gold) { box-shadow: 0 4px 18px rgba(0, 0, 0, .6), 0 0 28px rgba(201, 162, 75, .42); }
@keyframes frame-sheen { to { --fr-angle: 576deg; } }
@media (prefers-reduced-motion: reduce) { .portrait-frame { animation: none; } }

/* TAIDEKEHYKSET (design/assets/frames -> public/assets/frames, alfa poimittu
   taustavärin etäisyydellä). Valmis rengaskuva korvaa CSS-metallin siellä missä
   detalji oikeasti näkyy: iso on-chair-showcase + kaupan esikatselut. Areena
   (48px), paperinukke (PYÖRISTETTY NELIÖ) ja luonti pitävät CSS-renkaan —
   pyöreä taidekehys ei istu neliömedaljonkiin eikä lehtidetalji lue 48px:ssä.
   Kuvassa on oma alfa -> ei maskia, ei reunusta; säilön rima pois alta. */
:is(.meta-onchair, .doll-medallion, .frame-preview) { border: 0; }
:is(.meta-onchair, .doll-medallion, .frame-preview) .portrait-frame {
  border: 0;
  -webkit-mask: none;
          mask: none;
  background: center / 100% 100% no-repeat;
  animation: none;
}
:is(.meta-onchair, .doll-medallion, .frame-preview) .portrait-frame.frame-bronze { background-image: url('/assets/frames/bronze.png'); }
:is(.meta-onchair, .doll-medallion, .frame-preview) .portrait-frame.frame-laurel { background-image: url('/assets/frames/laurel.png'); }
:is(.meta-onchair, .doll-medallion, .frame-preview) .portrait-frame.frame-iron   { background-image: url('/assets/frames/iron.png'); }
:is(.meta-onchair, .doll-medallion, .frame-preview) .portrait-frame.frame-gold   { background-image: url('/assets/frames/gold.png'); }

/* Portretti rajataan kehyksen REIKÄÄN, muuten se vuotaa renkaan yli ja lehtien
   väleistä. --fr-hole = mitattu sisäreikä + ~4 % (livahtaa renkaan sisäreunan
   alle -> ei saumaa). Medaljongin oma tausta pois, ettei renkaan ULKOpuolelle
   jää tummaa kehää — siellä näkyy scene. */
:is(.meta-onchair, .doll-medallion, .frame-preview) {
  background: none;
  --fr-hole: 68%;
}
:is(.meta-onchair, .doll-medallion, .frame-preview):has(.frame-bronze) { --fr-hole: 75%; }
:is(.meta-onchair, .doll-medallion, .frame-preview):has(.frame-laurel) { --fr-hole: 68%; }
:is(.meta-onchair, .doll-medallion, .frame-preview):has(.frame-iron)   { --fr-hole: 66%; }
:is(.meta-onchair, .doll-medallion, .frame-preview):has(.frame-gold)   { --fr-hole: 66%; }
:is(.meta-onchair, .doll-medallion, .frame-preview) .portrait-img {
  inset: calc((100% - var(--fr-hole)) / 2);
  width: var(--fr-hole);
  height: var(--fr-hole);
}

/* ---------------------------------------------------------- stat blurbs */

.scol {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.scol .sname { flex: none; }

.sblurb {
  font-size: 12px;
  font-variant: normal;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
  line-height: 1.35;
}

/* ---------------------------------------------------------- pills */

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.res-win { background: var(--laurel); color: #F2EFE8; }
.res-loss { background: var(--crimson); color: #F2EFE8; }

.tier-easy { background: var(--parchment-deep); color: var(--ink-soft); border: 1px solid var(--line); }
.tier-normal { background: var(--bronze); color: #F7F2E4; }
.tier-hard { background: var(--crimson); color: #F2EFE8; }
.tier-boss { background: var(--night); color: var(--gold); border: 1px solid var(--bronze); }

.diff-easy { background: var(--laurel); color: #F2EFE8; }
.diff-fair { background: var(--bronze); color: #F7F2E4; }
.diff-dangerous { background: var(--crimson); color: #F2EFE8; }
.diff-deadly { background: var(--gl-red-deep, #571313); color: #F2EFE8; }

/* ---------------------------------------------------------- recent battles */

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

.rb-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 48px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.rb-list li:last-child .rb-row { border-bottom: 0; }
.rb-row:hover { background: var(--parchment-deep); color: var(--ink); }

.rb-opp {
  flex: 1;
  min-width: 120px;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: .03em;
}
.rb-gains { font-size: 13px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.rb-time { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.rb-empty { margin: 0; color: var(--ink-soft); font-size: 14.5px; }

/* ---------------------------------------------------------- expeditions */

.exp { display: grid; gap: var(--gap); }

.ap-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.ap-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.ap-big b { font-size: 30px; line-height: 1; }

.zone-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.zone-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 44px;
  padding: 16px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  box-shadow: none;
  color: var(--night-text);
  text-decoration: none;
}
a.zone-card:hover { border-color: var(--gold); background: var(--night-soft); color: var(--night-text); }
.zone-card.locked { opacity: .62; }

.zc-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .06em;
}
.zc-flavor { font-size: 13px; color: var(--night-text); opacity: .75; }
.zc-flavor-detail { margin: 0 0 12px; }
.zc-meta {
  font-size: 12.5px;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: .03em;
  color: var(--gold);
}
.zone-card.locked .zc-meta { color: #E07A6A; }

.backlink {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.moblist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* Monster card: art + name/level on the top row, risk pill + fight button on the
   bottom row. A two-row card (not one squeezed flex row) so the name never wraps
   awkwardly and the Fight button never collides with the meta inside the narrow
   300px map panel. Left border color = monster tier; bosses also get a Boss tag. */
.mobrow {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--night-line);
  border-left: 3px solid var(--night-line);
  border-radius: 10px;
  background: rgba(20, 15, 9, .34);
}
.mobrow.t-normal { border-left-color: var(--bronze); }
.mobrow.t-hard { border-left-color: var(--crimson); }
.mobrow.t-boss { border-left-color: var(--gold); }

.mob-top { display: flex; align-items: center; gap: 10px; }

.mob-ic {
  width: 50px;
  height: 50px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 8px;
  overflow: hidden;
}

.mob-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  grid-area: 1 / 1;
}

.mob-art + .mob-fallback { display: none; }
.mob-fallback { grid-area: 1 / 1; width: 24px; height: 24px; opacity: .8; }

.mob-headtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

/* Name + optional Boss tag share one line; the level line sits BELOW at full
   headtext width so the level is never squeezed/ellipsed by the Boss tag. */
.mob-nameline { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 7px; }

.mob-name {
  font-weight: 700;
  font-variant: small-caps;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.15;
}

.mob-sub {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--night-text);
  opacity: .72;
}

.mob-boss-tag {
  flex: none;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--bronze);
  border-radius: 999px;
  padding: 1px 7px;
  background: rgba(0, 0, 0, .3);
}

.mob-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mob-risk { flex: none; }

.mob-fight {
  flex: 0 1 auto;
  min-width: 120px;
  padding: 9px 14px;
  font-size: 12.5px;
}

.styletag {
  font-size: 12px;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: .04em;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ---------------------------------------------------------- battle report */

.report-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 10px;
  padding: 18px 16px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  color: var(--night-text);
}

.vs-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  min-width: 0;
}

.vs-medallion {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F3EAD3, var(--parchment-deep) 72%);
  border: 2px solid var(--bronze);
  color: var(--bronze-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  display: grid;
  place-items: center;
}
.vs-medallion.vs-mob { background: var(--night-soft); border-color: var(--night-line); }

.vs-medallion.vs-mob {
  width: 92px;
  height: 92px;
  border-radius: 10px;
  overflow: hidden;
}

.vs-monster-art {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: contain;
  object-position: center bottom;
}

.vs-monster-art + .vs-mob-fallback { display: none; }

.vs-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .06em;
  overflow-wrap: anywhere;
}

.vs-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  font-variant: small-caps;
  letter-spacing: .05em;
  color: #8A7A5F;
}

.adv-tag {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vs-sep {
  align-self: center;
  padding: 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .1em;
  color: var(--gold);
}

.nbar {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 12px;
  background: var(--night-soft);
  border: 1px solid var(--night-line);
  border-radius: 4px;
  overflow: hidden;
}
.nbar .fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--crimson);
  transition: width .9s ease;
}

.vs-hp { font-size: 12.5px; font-weight: 700; }

.verdict {
  padding: 14px 8px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .3em;
  text-indent: .3em; /* kompensoi viimeisen letter-spacingin */
  color: #F2EFE8;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.verdict.victory { background: var(--laurel); }
.verdict.defeat { background: var(--crimson); }

.reward-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-weight: 700;
  font-size: 13.5px;
  background: var(--parchment);
  border: 1px solid var(--bronze);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.chip-gold {
  background: rgba(201, 162, 75, .25);
  border-color: var(--gold);
  font-family: var(--font-display);
  letter-spacing: .08em;
}

.loss-note { margin: 0; text-align: center; color: var(--night-text); opacity: .75; }

.round { padding: 10px 0; border-bottom: 1px solid var(--line); }
.round:last-child { border-bottom: 0; }

.round-h {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.ev { margin: 0 0 4px; font-size: 14.5px; }
.dmg { color: var(--crimson); }

.round-hp {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 7px;
}

.rh-side {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 200px;
  min-width: 0;
}

.rh-name {
  max-width: 110px;
  font-size: 11.5px;
  font-weight: 700;
  font-variant: small-caps;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rbar {
  position: relative;
  flex: 1;
  min-width: 60px;
  height: 8px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.rbar .fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--crimson);
}

.rh-num {
  min-width: 26px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: right;
}

.more-rounds[hidden] { display: none; }
.show-rounds-wrap { text-align: center; padding-top: 10px; }

.report-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
a.btn { text-decoration: none; }
a.btn:hover { color: #F7F2E4; }
a.btn-ghost:hover { color: var(--ink); }

.report-meta {
  margin: 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--night-text);
  opacity: .75;
}

/* ---------------------------------------------------------- training */

.train-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}
.train-top .gold-line { margin: 0; }
.train-top .fp-chip { margin: 0; }

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

.trainrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.trainrow:last-child { border-bottom: 0; }

.tcost {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 74px;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.train-btn { min-width: 92px; }

.sval.flash {
  animation: laurel-flash 1s ease-out;
  border-radius: 4px;
}
@keyframes laurel-flash {
  from { background: rgba(74, 93, 51, .5); }
  to { background: transparent; }
}

/* ---------------------------------------------------------- V2 mobile */

@media (max-width: 899px) {
  .shell { display: block; }
  /* map-fullpage vaatii flex-ketjun .shell→.view→.imm-view→.imm-scene, jotta
     kartta saa viewport-korkeuden — block katkaisi sen ja kartta romahti 2px:iin
     (täysin tyhjä sivu mobiilissa). Sarake: sivupalkit eivät ole rivissä
     mobiilissa (nav on fixed-alapalkki, nav-right piilossa). */
  body.map-fullpage .shell { display: flex; flex-direction: column; }

  .nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    flex-direction: row;
    width: auto;
    margin: 0;
    gap: 4px;
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px));
    background: var(--night);
    border-top: 2px solid var(--bronze);
  }

  /* Oikea sivupalkki (Economy) on desktop-vain ilmiö — piilotetaan kokonaan;
     alapalkki (yllä, #nav) hoitaa mobiilinavigaation yksin kuten ennenkin. */
  .nav.nav-right { display: none; }

  .nav-item {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: 5px 4px;
    font-size: 10.5px;
    letter-spacing: .05em;
    color: var(--night-text);
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .nav-item:hover { background: var(--night-soft); color: var(--night-text); }
  .nav-item.active { background: var(--night-soft); color: var(--gold); border: 0; }

  body.has-nav .view { padding-bottom: 84px; }

  .zone-grid { grid-template-columns: 1fr; }
  .report-vs { grid-template-columns: 1fr; }
  .vs-sep { padding: 2px 0; }
  .trainrow { flex-wrap: wrap; }
  .train-btn { flex: 1 1 100%; }
}

/* ============================================================
   V3 — esineet: hahmosivu (paper-doll, item sheet), kauppa,
   dropit raportissa. Rarity VAIN nimivarilla (tokens.css-luokat),
   listat night-paneeleilla, ei kehyksia. CSS-kolmiot nuolina.
   ============================================================ */

/* ---------------------------------------------------------- character page */

/* paper-doll: night-ruudukko, keskella medaljonki */
.doll {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 10px;
}

.doll-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 74px;
  padding: 8px 6px;
  text-align: center;
  border-radius: var(--radius);
  font: inherit;
}

.doll-cell.empty {
  border: 1px dashed var(--night-line);
  color: #8A7A5F;
}

.doll-cell.filled {
  background: var(--night-soft);
  border: 1px solid var(--night-line);
  cursor: pointer;
  padding: 8px 6px;
}
.doll-cell.filled:hover { border-color: var(--bronze); }

.doll-slotname {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A7A5F;
}

.doll-iname {
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.doll-portrait { border: 0; }

/* ── Ragdoll — hahmofiguuri: iso muotokuva keskellä, varustesocketit reunapylväissä ── */
.doll-figure {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  justify-items: center;
  gap: clamp(8px, 1.6vw, 22px);
  padding: 18px clamp(8px, 1.6vw, 20px);
  background: radial-gradient(120% 85% at 50% 6%, #2e2214, var(--night) 70%);
  border: 1px solid var(--night-line);
  border-radius: 12px;
}
.doll-col { display: flex; flex-direction: column; gap: 10px; align-self: center; }
.doll-socket {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 82px; padding: 7px 4px 6px;
  background: var(--night-soft); border: 1px solid var(--night-line); border-radius: 10px;
  font: inherit; color: inherit;
}
.doll-socket.empty { background: rgba(0, 0, 0, .16); border-style: dashed; }
.doll-socket.filled { cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.doll-socket.filled:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.doll-socket-art {
  width: 48px; height: 48px; border-radius: 8px; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 32%, #3a2c1a, #17110a);
}
.doll-socket.empty .doll-socket-art { background: rgba(0, 0, 0, .22); }
.doll-socket-art img { width: 100%; height: 100%; object-fit: contain; }
.doll-socket-art .doll-glyph { display: grid; place-items: center; width: 30px; height: 30px; }
.doll-socket-art .doll-glyph svg { width: 100%; height: 100%; }
.doll-socket-lbl {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  line-height: 1; color: #8A7A5F;
}
.doll-socket.empty .doll-socket-lbl { color: #675a45; }
.doll-socket-ench { position: absolute; top: 5px; right: 6px; color: var(--gold); font-size: 12px; line-height: 1; }
.doll-socket.filled.rarity-uncommon { border-color: var(--rarity-uncommon, #4a9a52); }
.doll-socket.filled.rarity-rare { border-color: var(--rarity-rare, #3d7fd6); }
.doll-socket.filled.rarity-epic { border-color: var(--rarity-epic, #9a54c9); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), var(--glow-epic, 0 0 10px rgba(154, 84, 201, .5)); }
.doll-socket.filled.rarity-legendary { border-color: var(--rarity-legendary, #d98c2b); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), var(--glow-legendary, 0 0 10px rgba(217, 140, 43, .55)); }
.doll-socket.filled.rarity-mythic { border-color: var(--rarity-mythic, #d64b57); }
.doll-hero { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 4px; width: 100%; min-width: 0; }
/* Iso muotokuva: täyttää keskisarakkeen (ei ylivuoda), min()-katto rajaa. */
.char-medallion.doll-hero-med {
  width: min(100%, 220px); height: auto; aspect-ratio: 1;
  margin: 0 auto; border-width: 4px; font-size: 46px;
}
/* Character-sheetin ragdollissa iso kuva takaisin (vanha 234–312px henki). */
.char-equipment .char-medallion.doll-hero-med { width: min(100%, 300px); font-size: 60px; }
.doll-hero-derived { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.doll-d {
  display: flex; flex-direction: column; align-items: center; min-width: 62px;
  padding: 6px 9px; background: rgba(0, 0, 0, .3); border: 1px solid var(--night-line);
  border-radius: 9px; font-size: 15px; font-weight: 700; color: var(--night-text);
}
.doll-d i {
  font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--bronze); margin-bottom: 3px;
}
@media (max-width: 640px) {
  .doll-figure { grid-template-columns: 1fr 1fr; grid-template-areas: 'hero hero' 'left right'; row-gap: 14px; }
  .doll-hero { grid-area: hero; }
  .doll-col-left { grid-area: left; }
  .doll-col-right { grid-area: right; }
}

/* johdetut arvot */
.derived-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.derived-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.derived-item b { font-size: 17px; }

.dlabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.derived-lines {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-bottom: 14px;
}

/* gear-bonus sulut + trained-kontekstit */
.gbonus {
  font-size: 13px;
  font-weight: 700;
  color: var(--laurel);
  white-space: nowrap;
}

.trained-note {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-soft);
  white-space: nowrap;
}

.trained-tag {
  font-size: 10.5px;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: .05em;
  color: var(--ink-soft);
}

.statrow .sval { width: auto; min-width: 44px; }

.equip-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  margin-bottom: 14px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .03em;
  color: var(--ink);
  text-decoration: none;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.equip-chip:hover { border-color: var(--bronze); color: var(--ink); }

/* loitsuchipit (radio) */
.spell-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.spell-chip {
  min-height: 44px;
  padding: 9px 18px;
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .03em;
  color: var(--ink);
  background: var(--parchment);
  border: 2px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.spell-chip:hover { background: var(--parchment-deep); }
.spell-chip.active {
  color: var(--gold);
  background: var(--night);
  border-color: var(--bronze);
}

/* inventaario: night-solut, nimi rarity-varilla */
.inv-count {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  padding: 10px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 10px;
}

.inv-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 56px;
  padding: 9px 10px;
  text-align: left;
  font: inherit;
  background: var(--night-soft);
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  cursor: pointer;
}
.inv-cell:hover { border-color: var(--bronze); }

.inv-name {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.inv-meta {
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: .04em;
  color: #8A7A5F;
}

/* materiaalit */
.matlist { list-style: none; margin: 0; padding: 0; }

.matrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.matrow:last-child { border-bottom: 0; }

.mat-qty {
  min-width: 44px;
  text-align: right;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.mat-note {
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.mat-btn { min-width: 84px; padding: 8px 14px; font-size: 12.5px; }

.mat-acts {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

/* ---------------------------------------------------------- character sheet */

.character-sheet-view .imm-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.char-row {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}

.char-row:first-of-type { padding-top: 20px; }
.char-row-condition { margin-bottom: 16px; }

.char-hero-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.char-inventory-row {
  margin-bottom: 16px;
}

.char-extra-row {
  padding-bottom: 20px;
}

.char-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ------------------------------------------------------- equipment doll */

.char-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.char-panel-head h2 { margin: 0; }

.char-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 16px;
  margin-top: 4px;
}

.char-currency-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.char-currency-stack .gold-line,
.char-currency-stack .honor-line,
.char-currency-stack .aurei-line {
  margin: 0;
  justify-content: flex-end;
  font-size: 13px;
  white-space: nowrap;
}

.aurei-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Keskisarake on LEVEÄ (4fr) koska medaljonki on paperdollin pääkohde ja
   slottipaikat tarvitsevat vain 40px ikonin + lyhyen otsikon. Sivusarakkeet
   kapenivat ~126px -> ~82px, mikä on osa samaa siivousta kuin .doll-cellin
   align-self alla: ikonia ei ympäröi enää iso tyhjä laatikko.
   minmax(72px, ...) on lattia eikä koriste: pelkällä 1fr:llä laptop-leveyksillä
   sivusarake puristuu ~56px:ään. Pisin otsikko OFFHAND mittaa 61px (10px +
   .08em letter-spacing) ja on yksi sana -> se ei voi rivittyä, vaan vuotaisi
   solun yli. 61px + 6px vaakapadding = 67px, joten 72px jättää pienen varan.
   Lattian osuessa keskisarake joustaa, ja medaljongin min()-katto kutistaa
   portretin mukana ilman ylivuotoa. */
.char-equipment .doll {
  grid-template-columns: minmax(72px, 1fr) 4fr minmax(72px, 1fr);
  grid-template-areas:
    ".      helmet    ."
    "amulet portrait  ring"
    "weapon portrait  offhand"
    "gloves armor     boots";
  gap: 8px;
  padding: 12px;
}

.doll-slot-helmet  { grid-area: helmet; }
.doll-slot-amulet  { grid-area: amulet; }
.doll-slot-ring    { grid-area: ring; }
.doll-slot-weapon  { grid-area: weapon; }
.doll-slot-offhand { grid-area: offhand; }
.doll-slot-gloves  { grid-area: gloves; }
.doll-slot-armor   { grid-area: armor; }
.doll-slot-boots   { grid-area: boots; }

/* Kypärä ja haarniska istuvat LEVEÄSSÄ keskisarakkeessa (4fr, ~329px), mutta
   niiden sisältö on sama 40px ikoni + nimi kuin sivuslottien. Ilman kattoa ne
   venyisivät koko sarakkeen levyisiksi — eli sama iso tyhjä laatikko jonka
   align-self juuri poisti sivuilta, olisi vain siirtynyt keskelle.
   112px = pisin mitattu varusteen nimi (Legion Gauntlets, 97px) + 6px
   vaakapadding + vara, joten tavallinen nimi mahtuu yhdelle riville. */
.doll-slot-helmet,
.doll-slot-armor {
  justify-self: center;
  width: 100%;
  max-width: 112px;
}

/* align-self: center on TÄRKEIN rivi tässä lohkossa. Gridin oletus on stretch,
   ja medaljonki kattaa rivit 2-3 -> amulet/ring/weapon/offhand venyivät puoleen
   portretin korkeudesta (240px medaljongilla ~110px korkeat laatikot 40px
   ikonin ympärillä). Nyt jokainen solu on sisältönsä korkuinen ja keskittyy
   raitaansa. Helmet/gloves/armor/boots eivät muutu: ne ovat jo sisältövetoisia. */
.doll-cell {
  min-height: 56px;
  padding: 5px 3px;
  font-size: 10px;
  align-self: center;
}

.doll-iname {
  font-size: 11px;
}

.doll-portrait {
  grid-area: portrait;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

/* Isompi JA pyöreä: koristekehykset ovat renkaita, joten pyöristetty neliö ei
   istu niihin. Sama muoto kuin muodonmuutos-kaupan showcase.
   Katto 312px (= entinen 240 * 1.3), mutta min():llä eikä kiinteänä leveytenä:
   .char-hero-row antaa varustekortille vain 1.2/3.2 leveydestä, joten kiinteä
   312px vuotaisi sarakkeen yli kapeammilla ikkunoilla. Näin medaljonki ottaa
   sen mitä sarakkeessa on ja pysähtyy kattoon. aspect-ratio pitää sen neliönä
   (kehysten --fr-hole-prosentit :1594 skaalautuvat mukana). */
.doll-medallion {
  width: min(100%, 312px);
  height: auto;
  aspect-ratio: 1;
  font-size: 55px;
  border-radius: 50%;
}

.doll-medallion .portrait-img {
  border-radius: 50%;
}

/* ------------------------------------------------------- condition strip */

.condition-strip-card {
  padding: 14px 20px;
}

.condition-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.cond-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  min-width: 200px;
}

.cond-item .bar {
  flex: 1;
  max-width: none;
}

.cond-item-pips {
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}

/* ------------------------------------------------------- attributes combat block */

.derived-lines-compact {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.attr-cap-note {
  margin: 0;
  white-space: nowrap;
}

.attr-derived-row {
  justify-content: space-between;
  align-items: center;
}

.derived-lines-group {
  display: flex;
  gap: 22px;
}

.attr-fp-chip {
  margin: 0;
}

/* ------------------------------------------------------- inventory bag grid */

.inv-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.inv-panel-head h2 { margin: 0; }

/* "N listed on the market" -vihje repun yläpuolella (escrow'dut piilotettu). */
.inv-listed-link {
  display: inline-block;
  margin: 2px 0 8px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--gold);
  text-decoration: none;
}
.inv-listed-link:hover { color: #fff; }

.char-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.char-identity h2 {
  margin: 0;
}

.char-name-inline {
  margin: 0;
  font-size: 21px;
  color: var(--parchment);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.bag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 10px;
}

.bag-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 1;
  padding: 8px 6px;
  text-align: center;
  font: inherit;
  color: inherit;
  background: var(--night-soft);
  border: 1px solid var(--night-line);
  border-top: 3px solid currentColor;
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
}
.bag-cell:hover { border-color: var(--bronze); border-top-color: currentColor; }

/* Item cells wear their rarity on the button, but base .bag-cell resets color to
   inherit — and styles.css loads after tokens.css, so that reset beat the
   .rarity-* name colors and every weapon/armor rendered in the same parchment
   tone. Re-assert rarity here at higher specificity: the name + the currentColor
   top-border both tint, so legendary vs rare reads at a glance. (Epic+ keep the
   name glow from the token rule.) Material/empty cells carry no rarity class and
   stay neutral. */
.bag-cell.rarity-common { color: var(--rarity-common); }
.bag-cell.rarity-uncommon { color: var(--rarity-uncommon); }
.bag-cell.rarity-rare { color: var(--rarity-rare); }
.bag-cell.rarity-epic { color: var(--rarity-epic); }
.bag-cell.rarity-legendary { color: var(--rarity-legendary); }
.bag-cell.rarity-mythic { color: var(--rarity-mythic); }

/* Icon-only item cells (Items tab): the rarity frames the icon and the text is
   gone — the hover stat-card (or a tap → item sheet on touch) carries the
   details. A tighter grid packs more per row. Imageless items (armor/jewelry)
   fall back to a rarity-tinted shield glyph so no cell is ever blank. */
.bag-grid-items { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
.bag-cell-item {
  padding: 4px;
  border-top: 1px solid var(--night-line);   /* rarity lives on the icon frame, not a top strip */
  border-radius: 9px;
}
.bag-icon {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid currentColor;            /* currentColor = rarity (from .bag-cell.rarity-*) */
  border-radius: 7px;
  background: var(--night);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.bag-cell-item .bag-art { width: 100%; height: 100%; border: 0; border-radius: 0; }
.bag-glyph { display: grid; place-items: center; width: 58%; height: 58%; }
.bag-glyph svg { width: 100%; height: 100%; }
.bag-cell-item:hover .bag-icon { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 0 0 2px var(--bronze); }
/* Epic+ get a soft rarity halo on the tile */
.bag-cell-item.rarity-epic .bag-icon { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), var(--glow-epic); }
.bag-cell-item.rarity-legendary .bag-icon { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), var(--glow-legendary); }
.bag-cell-item.rarity-mythic .bag-icon { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), var(--glow-mythic); }
/* Empty slots in the item grid: small dashed placeholder, no icon frame */
.bag-cell-item.bag-cell-empty { border: 1px dashed var(--night-line); }

/* Materials/Supplies as the same icon grid as Items: a rarity-neutral (bronze)
   framed kind-glyph + a quantity badge in the corner. Hover carries the name/
   effect; actionable supplies (button) open a use-sheet, materials are static. */
.bag-cell-mat {
  position: relative;
  color: var(--bronze);
}
.bag-cell-mat.bag-cell-static { cursor: default; }
.bag-cell-mat.bag-cell-static:hover .bag-icon {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45);   /* ei bronze-hehkua staattiselle */
}
.bag-glyph-mat { width: 66%; height: 66%; color: inherit; }
.bag-qty-badge {
  position: absolute;
  right: 3px;
  bottom: 3px;
  min-width: 16px;
  padding: 0 3px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  color: var(--gold);
  background: rgba(12, 8, 4, .92);
  border: 1px solid var(--night-line);
  border-radius: 5px;
  pointer-events: none;
}
.is-supply-note { font-size: 12.5px; color: var(--ink-soft); margin-right: auto; }

.bag-cell-name {
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bag-cell-meta {
  font-size: 9.5px;
  color: #8A7A5F;
}

.bag-cell-empty {
  border-top-color: var(--night-line);
  border-style: dashed;
  cursor: default;
  background: transparent;
}

.bag-cell-static {
  cursor: default;
}
.bag-cell-static:hover { border-color: var(--night-line); }

.bag-cell-qty {
  font-weight: 700;
  font-size: 12px;
  color: var(--gold);
}

.bag-cell-supply {
  aspect-ratio: auto;
  min-height: 128px;
  justify-content: flex-start;
  padding-top: 10px;
  gap: 3px;
}

.bag-cell-sub {
  font-size: 9.5px;
  line-height: 1.25;
  color: var(--ink-soft);
}

.bag-cell-btn {
  margin-top: auto;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 4px 6px;
  font-size: 11px;
}

/* Esinetaide (aseet, /assets/items/<templateId>.jpg): pieni laatta jonka oma
   harmaa studiotausta toimii kilpimäisenä pohjana night-soluissa. Rarity EI
   koskaan näy taiteessa — nimiväri + glow kantaa sen (talon sääntö). Puuttuva
   taide (armor/offhand) = ei img-tagia lainkaan, layout ennallaan. */
.bag-art {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid var(--night-line);
}
.doll-art {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid var(--night-line);
}
.is-art {
  float: left;
  width: 56px;
  height: 56px;
  margin: 0 12px 4px 0;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--night-line);
}
.offer-art {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--night-line);
  margin-bottom: 2px;
}

/* Spells-paneeli (character-sheet): koko 5-loitsun katalogi edistymisruudukkona.
   Sama 3-kerroksinen night-korttivisuaali kuin .bag-gridissä, mutta leveämmät
   ruudut nimelle + efektiselitteelle. Aktiivinen = kultakorostus, locked = himmeä. */
:is(.spell-grid, .frame-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 10px;
}
/* Ikonivetoinen kompakti ruutu (V16): battle-art-kuva keskellä, nimi + tila alla. */
:is(.spell-cell, .frame-cell) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 0;
  padding: 10px 8px 9px;
  text-align: center;
  font: inherit;
  color: var(--night-text);
  background: var(--night-soft);
  border: 1px solid var(--night-line);
  border-top: 3px solid var(--bronze);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.spell-art {
  width: 64px; height: 64px; object-fit: contain; border-radius: 8px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .45));
}
.spell-cell.locked .spell-art { filter: grayscale(1) brightness(.62); }
.spell-cell.active .spell-art { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(201, 162, 75, .5); }
:is(.spell-cell, .frame-cell):hover { border-color: var(--bronze); }
:is(.spell-cell, .frame-cell):focus-visible { outline: none; border-color: var(--gold); }
.spell-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .03em;
  line-height: 1.15;
  color: var(--gold);
}
/* Desktopilla blurb on title-hoverissa (kompakti ruutu). Näytetään rivinä vain
   mobiilissa/kosketuksella (media-sääntö alempana). */
.spell-blurb {
  display: none;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--night-text);
}
.spell-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8A7A5F;
}
/* Lukitun artin unlock-polku (shop/craft/level). Kursivoitu ja himmeämpi kuin
   blurb, jotta efekti ja hankintatapa erottuvat toisistaan yhdellä silmäyksellä. */
.spell-src {
  font-size: 11px;
  line-height: 1.35;
  font-style: italic;
  color: var(--gold);
}
.spell-src.req-unmet { color: var(--crimson); font-style: normal; font-weight: 700; }
:is(.spell-cell, .frame-cell).active {
  border-color: var(--gold);
  border-top-color: var(--gold);
  background: rgba(201, 162, 75, .14);
  box-shadow: 0 0 0 1px var(--gold), 0 2px 10px rgba(201, 162, 75, .25);
}
:is(.spell-cell, .frame-cell).active .spell-tag { color: var(--gold); }
:is(.spell-cell, .frame-cell).locked {
  cursor: default;
  /* Ei .5 — unlock-rivin on pysyttävä luettavana; himmennys hoituu jo
     katkoviivakehyksellä + haalealla taustalla. */
  opacity: .68;
  border-top-color: var(--night-line);
  border-style: dashed;
}
:is(.spell-cell, .frame-cell).locked:hover { border-color: var(--night-line); }

/* ------------------------------------------- V26: muodonmuutos-kauppa */

/* Kehysruudun esikatselu on PELAAJAN OMA porttretti kussakin kehyksessä —
   ainoa esikatselu joka vastaa kysymykseen "miltä MINÄ näytän tässä".
   .medallion tuo renkaan + gradientin + position/overflow valmiina; tässä vain
   kutistetaan se ruutuun eikä toisteta mitään. */
.frame-preview {
  width: 64px;
  max-width: 64px;
  min-height: 0;
  cursor: inherit;      /* ruutu on nappi; medaljonki ei saa väittää omaa kursoria */
  margin-bottom: 2px;
}
/* Lukitun kehyksen esikatselu himmenee kuten lukittu battle-art (:2830) —
   mutta ruudun oma .68 opacity riittää tekstille, joten tämä koskee vain taidetta. */
:is(.spell-cell, .frame-cell).locked .frame-preview { filter: grayscale(.75) brightness(.72); }

.meta-lede {
  margin: 0 0 10px;
  color: var(--night-text);
  opacity: .82;
  font-size: 13px;
  line-height: 1.45;
}
/* Kauppa käyttää medaljonkeja tummalla panelilla: porttrettivalitsimen
   ruudukko tarvitsee hieman ilmaa reunoihin kortin sisällä. */
.meta-body .portraits { margin-top: 4px; }

/* ── Kasvojen ostoportti (V27) ────────────────────────────────────────────
   Lukittu KASVO on ostettavissa, toisin kuin lukittu kehys tai battle art:
   ruutu on esikatselun ja oston sisäänkäynti. .locked antaa oikean ilmeen
   ("ei sinun": katkoviiva + himmennys), mutta sen cursor: default (:3011)
   lupaisi umpikujaa vaikka ruutu on nappi -> palautetaan osoitin ja hover. */
.meta-choices .frame-cell.locked { cursor: pointer; }
.meta-choices .frame-cell.locked:hover { border-color: var(--bronze); }

/* Esikatseltava ruutu nostetaan takaisin täyteen kirkkauteen: kasvot ovat juuri
   nyt tuolilla, joten ruudun on näytettävä valitulta eikä torjutulta. */
.meta-choices .frame-cell.previewing {
  opacity: 1;
  border-style: solid;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 2px 10px rgba(201, 162, 75, .25);
}
.meta-choices .frame-cell.previewing .frame-preview { filter: none; }

/* Ostopalkki ankkuroidaan näyttämön YLÄREUNAAN, ei valitsimen sekaan. Mitattu
   syy: medaljonki kattaa pystysuunnassa 36-86 % näyttämöstä ja valitsin alkaa
   68 %:sta, joten valitsimen yläpuolella palkki leikkasi kasvot puolivälistä --
   juuri sen kuvan, jota esikatselun on tarkoitus näyttää. Yläkaista (otsikon
   alta 36 %:iin) on ainoa vyöhyke joka on vapaa KAIKISSA leveyksissä:
   medaljongin yläreuna on 0.61H - 0.1375W, joka pysyy 20 %:n alapuolella vasta
   yli 3:1 kuvasuhteella.
   Vaakarivi eikä kortti, ja läpikuultava tausta: palkin on kerrottava hinta
   peittämättä näyttämöä. */
.meta-buybar {
  position: absolute;
  top: 14px;              /* sama ankkuri kuin .meta-titlellä, joka väistää :3237 */
  left: 14px;
  right: 14px;
  z-index: 4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: rgba(22, 15, 8, .82);
  /* PAKOLLINEN eikä peritty: näkymän oma väri on tumma ruskea (43,33,24), joka
     tällä yhtä tummalla panelilla on käytännössä lukukelvoton. Rivin ruudut
     (.frame-cell) asettavat omansa, joten puute ei näy muualla — sama
     night-panel-konventio kuin .auth-panel-dark (:604). */
  color: var(--night-text);
}
.meta-buy-name { color: var(--gold); }
.meta-buy-price { font-weight: 700; }
.meta-buy-note { font-size: 12.5px; opacity: .85; }
/* Napit oikeaan reunaan; auto ensimmäisessä työntää molemmat, joten Cancel
   pysyy Buyn vieressä eikä karkaa omaan laitaansa. */
.meta-buybar .meta-buy, .meta-buybar .meta-buy-cancel:first-of-type { margin-left: auto; }
.meta-buybar .meta-buy ~ .meta-buy-cancel { margin-left: 0; }

/* Vahvistusmodaali lainaa .respec-modalin rakenteen; tässä vain iso esikatselu.
   160px on selvästi isompi kuin rivin 64px mutta mahtuu dialogiin ilman
   vieritystä — ostopäätös tehdään tästä kuvasta. */
.meta-buy-dialog { text-align: center; }
/* KAKSI luokkaa tarkoituksella: .frame-preview on määritelty kahdesti (:3026
   64px ja :3207 50px "kompaktimpi medaljonki kelluvassa valitsimessa"), ja
   jälkimmäinen on TÄMÄN jälkeen tiedostossa -> yhden luokan sääntö häviäisi
   sille pelkän järjestyksen takia. Modaali lainaa .frame-previewin
   taidekehyksen mutta ei sen valitsinkokoa: 160px on se kuva jonka perusteella
   ostopäätös tehdään, ei 50px:n peukalonkynsi. */
.meta-buy-dialog .meta-buy-preview {
  width: 160px;
  max-width: 160px;
  min-height: 0;
  margin: 0 auto 12px;
  cursor: default;
}
.meta-buy-sum { opacity: .9; }

/* Porttrettivälilehti: scene ON näyttämö. Pelaajan oma kasvo tuolissa olevan
   taulun kohdalla; valittavat kasvot vaakarivissä sen alla. */
/* Scene TÄYTTÄÄ näkymän (full-bleed cover) kuten muut immersive-taustat, ja
   valinnat KELLUVAT sen päällä -> kuva ei kutistu niiden takia. */
/* Näkymä täyttää saman korkeuden kuin muut immersive-taustat (nav ulottuu
   Roadmapiin: calc(100vh - hdr - 16px)). Flex-fill on kestävä ruudun korkeudelle:
   tabbar saa luontaisen korkeutensa, stage täyttää loput alas asti. */
.meta-view-portrait {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 120px);
  padding: 0;
}
.meta-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--night-line);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
}
.meta-stage-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}
/* Pelaajan oma kasvo tuolin ovaalilla. Cover fittaa leveyden -> x on täsmällinen
   (59 %), y ~55 % (keskitetty rajaus). width on % kuvan leveydestä -> skaalautuu
   kuvan mukana. Rajaus on leveällä työpöydällä pysty + keskitetty, joten
   overlay-% pysyy lähes vakiona näytön leveydestä riippumatta. */
.meta-onchair {
  position: absolute;
  left: 60%;
  top: 61%;
  transform: translate(-50%, -50%);
  width: 27.5%;
  max-width: none;
  min-height: 0;
  margin: 0;
  /* Ohut ulkoreuna: PAKSU metallirengas tulee nyt .portrait-framen
     --fr-band: 16px -asetuksesta (kiillotettu metalli), ei litteänä reunuksena.
     Säilön reuna jää vain ohueksi värilliseksi rimaksi (:has-väri) + kimalluksen
     ulkohehkun kantajaksi. */
  border-width: 2px;
  cursor: default;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .6);
}
/* Kelluva valintapalkki scenen alareunassa (absoluuttinen -> ei layout-tilaa). */
/* Kelluva valitsin scenen alareunassa: Frame- ja Face-rivit päällekkäin
   (absoluuttinen -> ei vie layout-tilaa kuvalta). */
.meta-picker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 10px;
  background: linear-gradient(to top, rgba(8, 6, 4, .94), rgba(8, 6, 4, .6) 55%, transparent);
}
.meta-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.meta-row-label {
  flex: 0 0 auto;
  align-self: center;
  width: 40px;
  font: 700 10px/1.2 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .85;
}
.meta-choice {
  flex: 0 0 auto;
  width: 96px;
  scroll-snap-align: start;
  background: rgba(20, 14, 8, .85);
}
/* Kompaktimpi medaljonki kelluvassa valitsimessa (kaksi riviä ei saa peittää
   liikaa scenestä). */
.frame-preview { width: 50px; max-width: 50px; border-width: 4px; }

/* Scenen tunnusplakaatti (kelluva, vasen yläkulma): masks-tunnus + wordmark.
   Antaa täys-scene-näkymälle näkyvän nimen ilman että vie tilaa kuvalta. */
.meta-title {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 10px;
  background: rgba(20, 14, 8, .72);
  border: 1px solid var(--night-line);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.meta-title .icon { width: 24px; height: 24px; }

/* Plakaatti VÄISTÄÄ ostopalkin. Molemmat haluavat saman yläkaistan (se on ainoa
   vyöhyke jota medaljonki ei peitä), ja niistä palkki on se joka odottaa
   vastausta — plakaatti vain nimeää näkymän, jonka oikea palkki kertoo jo
   korostetulla Masks-välilehdellä. Esikatselun päättyessä nimi palaa. */
.meta-stage:has(.meta-buybar) .meta-title { display: none; }

.tab-card .tabbar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--night-line);
}

.tabbtn {
  flex: 1;
  min-height: 44px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
  text-decoration: none;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.tabbtn:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.2);
}

.tabbtn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: transparent;
}

.profs-grid-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 11px;
}

.prof-card-mini {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 8px;
  text-decoration: none;
  background: var(--night-soft);
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  cursor: pointer;
  align-items: center;
}

.prof-card-mini:hover {
  border-color: var(--bronze);
  background: rgba(140, 107, 47, 0.15);
}

.prof-mini-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 2px;
}

.prof-mini-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.prof-mini-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.prof-mini-name {
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  color: var(--gold);
  /* Rivittyy kokonaan (ei ellipsis) — kapeassa 2-palstaisessa gridissä pitkät
     ammattinimet (Leatherworking, Woodcutting) typistyivät "Leathe...":ksi. */
  overflow-wrap: anywhere;
}

.prof-mini-skill {
  display: flex;
  align-items: center;
  gap: 4px;
}

.prof-skill-lbl {
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  min-width: 20px;
}

.skill-track-mini {
  flex: 1;
  height: 3px;
  background: var(--night);
  border-radius: 2px;
  overflow: hidden;
}

.skill-track-mini .fill {
  display: block;
  height: 100%;
  background: var(--bronze);
  border-radius: 2px;
}

.statlist-compact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.statrow-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.statrow-compact:last-child {
  border-bottom: none;
}

.statrow-compact .sname {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}

.statrow-compact .sval {
  font-weight: 700;
  font-size: 13px;
  text-align: right;
}

.statrow-compact .gbonus {
  font-size: 11px;
  margin-left: 4px;
}

/* ---- Attributes-kortin ala-välilehdet (Attributes | Combat) ---- */
.attr-tabs {
  display: flex;
  gap: 4px;
  margin: 2px 0 10px;
  border-bottom: 1px solid var(--line);
}
.attr-tab {
  flex: 1 1 0;
  padding: 7px 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.attr-tab:hover { color: var(--ink); }
.attr-tab.active { color: var(--ink); border-bottom-color: var(--gold); }

/* Combat-välilehden johdetut arvot */
.combat-details { display: flex; flex-direction: column; gap: 12px; }
.cgroup { display: flex; flex-direction: column; gap: 7px; }
.cgroup-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.cstat {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1px 10px;
}
.cstat-label { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.cstat-val { font-size: 13px; font-weight: 700; color: var(--ink); text-align: right; white-space: nowrap; }
.cstat-note { grid-column: 1 / -1; font-size: 11px; color: var(--ink-soft); line-height: 1.35; }

/* Est. DPS -otsikkorivi: korostettu (iso gold-arvo). */
.cstat-hero { padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.cstat-hero .cstat-val { font-size: 22px; line-height: 1; }

/* Combat-välilehti asuu tummassa imm-cardissa → vaalea night-paletti (kuten
   kortin muut tekstit); muuten --ink-tumma hukkuu taustaan. */
.imm-card .attr-tab { color: var(--night-text); opacity: .7; }
.imm-card .attr-tab.active { opacity: 1; border-bottom-color: var(--gold); }
.imm-card .attr-tabs { border-bottom-color: var(--night-line); }
.imm-card .cgroup-title { border-bottom-color: var(--night-line); }
.imm-card .cstat-label, .imm-card .cstat-val { color: var(--night-text); }
.imm-card .cstat-note { color: var(--night-text); opacity: .7; }
.imm-card .cstat-hero { border-bottom-color: var(--night-line); }
.imm-card .cstat-hero .cstat-val { color: var(--gold); }

/* Responsive: tablet 900-1199px */
@media(max-width: 1199px) {
  .char-row {
    padding: 0 16px;
  }

  .char-hero-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .char-col-professions {
    grid-column: 1 / -1;
  }

  .profs-grid-mini {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Responsive: mobile <900px */
@media(max-width: 899px) {
  .char-row {
    padding: 0 12px;
  }

  .char-row:first-of-type { padding-top: 12px; }
  .char-row-condition { margin-bottom: 12px; }
  .char-hero-row {
    grid-template-columns: 1fr;
    margin-bottom: 12px;
  }

  /* Mobiili: pidä nimi-identiteetti ja valuutta-/Achievements-pino RINNAKKAIN
     (nimi vasemmalle, kutistuu ellipsillä; pino oikeaan laitaan) sen sijaan että
     pino kietoutuisi omalle rivilleen ja söisi pystytilaa. */
  .char-panel-head {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 6px 10px;
  }
  .char-identity { flex: 1 1 auto; min-width: 0; }
  .char-name-inline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .char-currency-stack { flex: 0 0 auto; }
  .char-currency-stack .gold-line,
  .char-currency-stack .honor-line,
  .char-currency-stack .aurei-line { font-size: 12px; }
  /* .char-ach-btn-mobiilisääntö oli TÄSSÄ, mutta se oli kuollut: perussääntö
     tulee lähdekoodissa myöhemmin samalla spesifisyydellä. Siirretty
     perussäännön viereen ("Achievements shortcut"). */

  /* Mobiilissa ei ole hoveria -> näytä Battle Artin efekti (blurb) suoraan
     ruudussa, jottei kosketuskäyttäjä jää arvaamaan mitä art tekee. */
  .spell-blurb { display: block; margin-top: 2px; }
  .char-inventory-row { margin-bottom: 12px; }
  .char-extra-row { padding-bottom: 12px; }

  .char-column {
    gap: 12px;
  }

  .condition-strip {
    gap: 12px;
  }

  .cond-item {
    flex: 1 1 100%;
    min-width: 0;
  }

  .profs-grid-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Ammattitiili mobiilissa: nimi ylhäällä koko kortin leveydellä (ei enää
     kapea vaakakenttä jossa "Woodcutting" katkesi "Wood/cuttin/g":ksi),
     alla ikoni vasemmalla + skilltaso oikealla. */
  .prof-card-mini {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "name name"
      "icon skill";
    align-items: center;
    gap: 7px 8px;
    padding: 10px;
  }
  .prof-mini-head { grid-area: name; width: 100%; align-items: center; }
  .prof-mini-name { white-space: normal; text-align: center; }
  .prof-mini-icon { grid-area: icon; }
  .prof-mini-skill { grid-area: skill; }

  .char-equipment .doll {
    gap: 4px;
    padding: 8px;
  }

  .doll-cell {
    min-height: 50px;
    padding: 4px 3px;
    font-size: 9px;
  }

  .doll-medallion {
    width: min(100%, 156px);  /* 120→156 mobiili */
    font-size: 34px;
  }

  .bag-grid {
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  }
  /* Inventaario-/materiaalisolut pienemmiksi: ~360px:llä 4→5 saraketta
     (~50px solut), ikonit eivät dominoi. */
  .bag-grid-items {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  }
}

/* ============================================================
   Laptop-tiheystaso (13" ~900–1440px). Perus-desktoplayout on
   kalibroitu ~1600px+ näytöille → kannettavalla se ylivuotaa ja
   näyttää liian isolta (näytti hyvältä vasta 75% zoomilla). Tämä
   taso KUTISTAA tiheyttä (fontit, paddingit, iso paperdoll, ruudukot)
   säilyttäen sarakelayoutit. >1440px (iso monitori) ja <900px
   (mobiili) EIVÄT muutu. Sijoitettu char-sheet-queryjen jälkeen →
   arvot voittavat 900–1199px:n overlapissa.
   ============================================================ */
@media (min-width: 900px) and (max-width: 1440px) {
  /* Jaetut primitiivit — keventävät JOKAISTA fullBleed-välilehteä */
  .imm-card { padding: 12px 14px; }
  .imm-card h2 { margin-bottom: 10px; padding-bottom: 6px; }
  .imm-stack { gap: 12px; }

  /* Hahmosivu */
  .char-row { padding: 0 14px; }
  .char-row:first-of-type { padding-top: 14px; }
  .char-hero-row { gap: 12px; }
  .char-column { gap: 12px; }
  .condition-strip-card { padding: 12px 16px; }
  .condition-strip { gap: 12px 14px; }
  .cond-item { flex: 1 1 180px; min-width: 160px; }
  .doll-medallion { width: min(100%, 234px); font-size: 42px; }  /* 312→234 laptop */
  .char-equipment .doll { padding: 10px; }
  .doll-cell { min-height: 54px; font-size: 9.5px; }
  .statlist-compact { gap: 6px; }
  .statlist-compact .statrow { padding: 4px 0; }
  .profs-grid-mini { row-gap: 8px; }

  /* Kauppa */
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
  .offer-card { padding: 10px; gap: 4px; }
  .offer-icon { width: 42px; height: 42px; }
  .offer-buy { min-width: 72px; padding: 7px 12px; }
  .tabbtn { min-width: 76px; min-height: 40px; padding: 7px 14px; }
}

/* ---------------------------------------------------------- item sheet */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(36, 28, 18, .55);
}

.item-sheet {
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--parchment);
  border: 1px solid var(--bronze);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(43, 33, 24, .45);
}

.is-head {
  position: relative;
  padding: 14px 56px 12px 16px;
  background: var(--night);
  color: var(--night-text);
}

.is-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}

.is-meta {
  margin-top: 4px;
  font-size: 12px;
  font-variant: small-caps;
  letter-spacing: .05em;
  color: #8A7A5F;
}

.is-close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--night-text);
  font-size: 22px;
  line-height: 1;
}

.is-body { padding: 12px 16px; }

.is-cmpnote {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.is-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.is-line:last-child { border-bottom: 0; }

.is-label { font-variant: small-caps; font-weight: 700; letter-spacing: .03em; }
.is-val { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.is-sub { font-size: 12.5px; color: var(--ink-soft); }
.is-sub .is-label, .is-sub .is-val { font-weight: 700; }

.req-unmet { color: var(--crimson); }

.is-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--parchment-deep);
}

.sell-ask { font-size: 13.5px; font-weight: 700; margin-right: auto; }
.sell-ask b { font-weight: 700; }

/* vertailunuolet: CSS-kolmiot, ei emojia */
.cmp {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
}
.cmp-up {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--laurel);
}
.cmp-down {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--crimson);
}

/* Numeerinen vertailu (item-sheet + hover-kortti): paljonko damage/statti
   nousee tai laskee suhteessa slotin varusteeseen. Väri = suunta, merkki toistaa. */
.cmp-delta {
  margin-left: 6px;
  font-weight: 700;
  font-size: .92em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cmp-delta-up { color: var(--laurel); }
.cmp-delta-down { color: var(--crimson); }

/* hover-statskortti (character.js:bindView) — kelluva kortti itemin vieressä.
   position:fixed → ei leikkaudu paneelien overflowiin. pointer-events:none →
   ei nappaa hiirtä (mouseleave laukeaa oikein). Vasen reuna = rarity-aksentti. */
.item-tip {
  position: fixed;
  z-index: 60;
  width: 250px;
  max-width: calc(100vw - 24px);
  padding: 10px 13px;
  background: rgba(20, 14, 7, .97);
  border: 1px solid var(--night-line);
  border-left: 3px solid var(--rarity-common);
  border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
  color: var(--night-text);
  pointer-events: none;
}
.item-tip[hidden] { display: none; }
.item-tip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.item-tip-head .item-tip-icon {
  flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex;
  align-items: center; justify-content: center;
}
.item-tip-head .item-tip-art, .item-tip-head .item-tip-glyph {
  width: 36px; height: 36px; object-fit: contain;
}
.item-tip-head .item-tip-name { flex: 1 1 auto; }
.item-tip-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.2;
}
.item-tip-meta {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: #A08F72;
  text-transform: capitalize;
}
.item-tip-body {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--night-line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--night-text);
}
.item-tip-cmp { font-size: 10.5px; color: #A08F72; margin-bottom: 2px; }
.item-tip-cmp b { font-weight: 700; }
.item-tip-line { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; }
.item-tip-k { color: #B7A785; }
.item-tip-v { font-weight: 700; white-space: nowrap; min-width: 0; }
/* Lauseenmittainen sisältö (esim. Battle Artin efekti). Oma lohko k/v-rivin
   sijaan: .item-tip-v on nowrap lyhyille arvoille, joten lause valui kortin yli. */
.item-tip-prose {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--night-text);
  white-space: normal;
  overflow-wrap: anywhere;
}
.item-tip-none { font-size: 12px; color: #8A7A5F; font-style: italic; }
.item-tip-req { margin-top: 5px; font-size: 10.5px; color: #A08F72; }
.item-tip-req.req-unmet { color: var(--rarity-mythic); }

/* ---------------------------------------------------------- shop */
/* shop.jpg: kauppias + aserekki/juomahylly vasemmalla, kilvet/nuolet oikealla.
   Dokataan paneeli oikealle (sama kuvio kuin premium/forge) — kauppiaan kasvot
   + wares jäävät näkyviin vasemmalle. Vain työpöytä; mobiili = imm-scene-cards-reflow. */
@media (min-width: 900px) {
  .shop-panel { width: min(620px, 46vw); }
  .shop-scene .imm-card {
    background: rgba(22, 15, 8, .90);
    border-color: rgba(201, 162, 75, .38);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .6);
  }
  .shop-scene::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, rgba(20, 14, 8, 0) 40%, rgba(20, 14, 8, .30) 62%, rgba(20, 14, 8, .55) 100%);
  }
}

.shop-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
/* Head-kortti EI saa kutistua: .imm-card on flex: 0 1 auto + overflow-y: auto,
   joten kun välilehdet rivittyivät (5 shopissa, 4 marketissa), pino kutisti
   kortin ja napit leikkautuivat kesken — kortille ilmestyi oma vierityspalkki
   yhden nappirivin takia. Sama juurisyy kuin .map-panelin korteissa.
   Kulta on poistettu molemmista headeista (se on jo yläpalkissa), joten napit
   mahtuvat nyt yhdelle riville ja jakavat sen tasan. */
.shop-head, .mk-head, .mt-tab-card { flex: 0 0 auto; overflow-y: visible; }
.shop-head .tabbar,
.mk-head .mk-tabbar,
.mt-tab-card .mk-tabbar { margin-left: 0; flex: 1 1 auto; min-width: 0; }

.tabbar {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}

.tabbtn {
  /* Keskitä teksti vaaka- ja pystysuunnassa: flex-kontti on immuuni text-align-
     perinnölle ja napin ylimääräiselle leveydelle (flex:1-leviämä), joka jätti
     pisimmän labelin ("Odds & Wallet") vasemmalle. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 92px;
  padding: 9px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--ink);
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.tabbtn:hover { background: var(--parchment-deep); }
.tabbtn.active {
  color: var(--gold);
  background: var(--night);
  border-color: var(--bronze);
}

.shop-rot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 700;
}

.charm-note {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #A6C178;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.offer-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 10px;
  color: var(--night-text);
}

/* Kortin yläosa: ikoni + nimi/meta vierekkäin (kuten inventaarion doll-solut). */
.offer-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.offer-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* Ikonikehys: sama rarity-reunustettu laatta kuin bag-gridissä; currentColor =
   rarity (.offer-icon.rarity-*). Taidelaatta täyttää, glyyfi keskitetään. */
.offer-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid currentColor;
  border-radius: 8px;
  background: var(--night);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45);
  overflow: hidden;
  color: var(--rarity-common);
}
.offer-icon.rarity-common { color: var(--rarity-common); }
.offer-icon.rarity-uncommon { color: var(--rarity-uncommon); }
.offer-icon.rarity-rare { color: var(--rarity-rare); }
.offer-icon.rarity-epic { color: var(--rarity-epic); }
.offer-icon.rarity-legendary { color: var(--rarity-legendary); }
.offer-icon.rarity-mythic { color: var(--rarity-mythic); }
.offer-icon .offer-art { width: 100%; height: 100%; border: 0; border-radius: 0; margin: 0; }
.offer-glyph { display: grid; place-items: center; width: 62%; height: 62%; }
.offer-glyph svg { width: 100%; height: 100%; }

.offer-name {
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.offer-meta {
  font-size: 11.5px;
  font-variant: small-caps;
  letter-spacing: .04em;
  color: #8A7A5F;
}

/* Statit chippeinä jotka rivittyvät — ei typistystä ("+N more" poistettu). */
.offer-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 5px;
  min-height: 1.6em;
}
.offer-chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 7px;
  color: var(--night-text);
  background: var(--night-soft);
  border: 1px solid var(--night-line);
  border-radius: 999px;
  white-space: nowrap;
}

.offer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}
/* Potions/Ammo/Scrolls/Sell-laatat: hinta+nappirypäs pinottuna pystyyn (ei
   vierekkäin) — kapeassa ruudukkolaatassa ne eivät mahtuisi siististi riviin. */
.offer-foot-col { flex-direction: column; align-items: stretch; gap: 8px; }
.offer-foot-col .mat-acts { justify-content: flex-end; }

.offer-buy { min-width: 84px; padding: 8px 16px; font-size: 12.5px; }

.price {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 14.5px;
  white-space: nowrap;
}
.price-short { color: var(--crimson); opacity: .75; }
.offer-card .price-short { color: #E07A6A; }

/* ---------------------------------------------------------- warnings & drops */

.warn-banner {
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
  color: #F2EFE8;
  background: var(--crimson);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Training "olet töissä" -info: amber callout (ei crimson kuten .warn-banner),
   renderöityy .imm-card-yön päälle (kantaa oman taustan). */
.work-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--night-text);
  background: rgba(201, 162, 75, .16);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
}
.work-banner .icon { flex: none; }
.work-banner b { color: var(--gold); font-weight: 800; }
.work-banner a { color: var(--gold); text-decoration: underline; }
.work-banner .wt-time { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--gold); }
.work-banner-ready { background: rgba(74, 93, 51, .18); border-color: var(--laurel); }
.work-banner-ready b { color: var(--laurel); }

/* Respec: attribuuttiosion foot-nappi + keskitetty vahvistusmodaali. */
/* Attribuutti-paneelin header: Stat cap + Damage/Armor vasemmalla, kompakti
   Respec-nappi oikeassa yläkulmassa (säästää pystytilaa -> character-doll/stats/
   skills-ruutujen alareunat tasautuvat). Modaali selittää kulut; napin title
   toistaa hinnan. */
.attr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .15);
}
.attr-head-info { flex: 1 1 auto; min-width: 0; }
.attr-head-info .attr-cap-note { margin-bottom: 8px; }
.attr-head-info .attr-derived-row { margin-bottom: 0; }
.respec-btn-sm {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 6px 12px;
  white-space: nowrap;
}
.respec-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; }
.respec-backdrop { position: absolute; inset: 0; background: rgba(20, 15, 8, .6); }
.respec-dialog {
  position: relative;
  width: min(440px, 92vw);
  padding: 20px 22px;
  background: var(--night);
  border: 1px solid var(--bronze);
  border-radius: 14px;
  box-shadow: var(--shadow);
  color: var(--night-text);
}
.respec-dialog h3 { margin: 0 0 8px; font-family: var(--font-display); color: var(--gold); }
.respec-dialog p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; }
.respec-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.respec-pay { flex: 1 1 auto; min-width: 140px; }
.respec-cancel { margin-top: 10px; width: 100%; }

.drop-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.drop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 18px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 10px;
  text-align: center;
}

.drop-name {
  font-weight: 700;
  font-size: 14.5px;
  overflow-wrap: anywhere;
}

.drop-meta {
  font-size: 11.5px;
  font-variant: small-caps;
  letter-spacing: .05em;
  color: #8A7A5F;
}

.drop-sold {
  font-size: 11.5px;
  color: #C7B896;
}

/* ---------------------------------------------------------- V3 mobile */

@media (max-width: 899px) {
  /* item sheet muuttuu bottom sheetiksi */
  .sheet-backdrop {
    place-items: end stretch;
    padding: 0;
  }
  .item-sheet {
    max-width: none;
    max-height: 82vh;
    border-radius: 12px 12px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .matrow { flex-wrap: wrap; }
  .mat-acts { flex: 1 1 100%; justify-content: flex-end; }

  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .tabbar { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .tabbtn { flex: 1; }

  /* Inventaario 2 palstaan myos kapeilla puhelimilla (perus minmax(150px)
     antaisi vain 1 palstan alle ~330px sisallolla; vrt. .bag-grid). Parantaa
     samalla forge-inventaariokolumnia. */
  .inv-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; padding: 8px; }

  /* 5 valilehtea alapalkissa — tiivistetaan hieman */
  .nav-item { font-size: 9.5px; letter-spacing: .03em; padding: 5px 2px; }
}

/* ============================================================
   V4 — areena (PvP): Honor-plate, vastustajarivit, delta-chipit,
   historia hyokkays/puolustus-glyyfeilla, julkinen profiili.
   Ei emojia — glyyfit ovat ikoneita/inline-SVG:ta. 44px-kohteet.
   ============================================================ */

/* ---------------------------------------------------------- arena plate */

.arena-plate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 26px;
  padding: 16px 20px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  color: var(--night-text);
}

.ar-honor {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.ar-honor-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  color: var(--gold);
}

.ar-honor-lbl {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8A7A5F;
}

.ar-record {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .06em;
  white-space: nowrap;
}
.ar-rec-sep { color: #8A7A5F; padding: 0 3px; }

/* voitto/tappio night-pinnalla — laurel/crimson vaalennettuina */
.nt-win { color: #A6C178; }
.nt-loss { color: #E07A6A; }

.ar-pts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}
.arena-plate .sub { color: #C7B896; }
.arena-plate .countdown { color: #C7B896; }

/* ---------------------------------------------------------- locked */

.arena-locked {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.al-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.al-note { margin: 0; color: var(--ink-soft); font-size: 14.5px; }

.arena-locked .bar { width: 100%; max-width: 340px; flex: none; }

/* ---------------------------------------------------------- opponents */

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

.opprow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.opprow:last-child { border-bottom: 0; }
/* Ystävärivi (kiltakaveri): ei haastenappia, vaan rauhallinen "Guildmate"-merkki. */
.opp-ally-tag {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--gold); opacity: .8; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.opprow-friendly { opacity: .92; }

.opp-medallion {
  position: relative;
  overflow: hidden;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F3EAD3, var(--parchment-deep) 72%);
  border: 2px solid var(--bronze);
  color: var(--bronze-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
  text-decoration: none;
}
.opp-medallion:hover { border-color: var(--gold); }

.opp-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.opp-name {
  font-weight: 700;
  font-variant: small-caps;
  font-size: 16px;
  letter-spacing: .03em;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.opp-name:hover { color: var(--bronze-deep); text-decoration: underline; }

.opp-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.styletag-ic { display: inline-flex; align-items: center; gap: 4px; }

.delta-prev {
  flex: none;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
}
.delta-prev .d-sep { color: var(--ink-soft); padding: 0 3px; font-weight: 400; }
.d-win { color: var(--laurel); }
.d-loss { color: var(--crimson); }

.opp-attack {
  flex: none;
  min-width: 122px;
  padding: 9px 14px;
  font-size: 12.5px;
}

.ar-refresh { padding-top: 12px; text-align: center; }

/* ---------------------------------------------------------- history */

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

.hist-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 48px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.hist-list li:last-child .hist-row { border-bottom: 0; }
.hist-row:hover { background: var(--parchment-deep); color: var(--ink); }

.hist-glyph, .rb-glyph {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 50%;
}
.hist-glyph .icon, .rb-glyph .icon { width: 18px; height: 18px; }
.rb-glyph { width: 28px; height: 28px; }
.rb-glyph .icon { width: 15px; height: 15px; }

.hist-opp {
  flex: 1;
  min-width: 110px;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: .03em;
}

.hist-delta { font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.hd-pos { color: var(--laurel); }
.hd-neg { color: var(--crimson); }

/* ---------------------------------------------------------- pvp report */

.chip-honor-pos { border-color: var(--laurel); color: var(--laurel); }
.chip-honor-neg { border-color: var(--crimson); color: var(--crimson); }

/* ---------------------------------------------------------- overview honor */

.honor-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin: -8px 0 16px;
}

/* ---------------------------------------------------------- public profile */

.profile-honor {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-bottom: 16px;
}
.profile-honor .derived-item { align-items: center; }
.profile-honor b { font-size: 17px; }

.challenge-wrap {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.challenge-ask { font-size: 13.5px; font-weight: 700; }
.challenge-acts { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Pelaajaprofiili Character-välilehden tyyliin: portrait keskellä paper-dollia,
   varusteet ympärillä, attribuutit oikealla. Kaikki näkyvissä yhdellä
   silmäyksellä — kortit sisältökorkuisia, ei per-kortti-skrollia. Koko pino
   skrollaa vain jos ei millään mahdu (pieni ikkuna). */
.player-stack { overflow-y: auto; }
.player-view .imm-card { overflow: visible; }

.player-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.3fr; /* doll | attribuutit | skills (kuten Character-sheet) */
  gap: 16px;
  align-items: stretch; /* sarakkeet samaan korkeuteen → alareunat tasan */
}
/* Profession-kortit toisen pelaajan profiilissa ovat näyttö-vain (ei linkki). */
.prof-card-static { cursor: default; }
/* Molempien sarakkeiden pääkortti täyttää sarakkeen korkeuden, jotta doll- ja
   attribuuttikortin alareunat kohtaavat. (Attribuuttikortilla on jo imm-card-fill.) */
.char-col-equipment > .imm-card { flex: 1 1 auto; }
/* Challenge-kortti oikeassa sarakkeessa attribuuttien alla. */
.challenge-card { text-align: center; }

@media (max-width: 899px) {
  .player-hero { grid-template-columns: 1fr; }
}

.pe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 10px;
}

.pe-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 56px;
  padding: 9px 10px;
  background: var(--night-soft);
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
}
.pe-cell.empty {
  background: transparent;
  border-style: dashed;
}

.pe-slot {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A7A5F;
}

.pe-name {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.pe-meta {
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: .04em;
  color: #8A7A5F;
}

.pe-empty { color: #8A7A5F; font-size: 12.5px; }

/* Inspektoitava varuste: hover/focus näyttää stat-tooltipin (JS liittää sen
   bodyyn fixed-positioituna, koska .imm-card on overflow-y:auto ja leikkaisi). */
.pe-cell.has-tip { cursor: help; }
.pe-cell.has-tip:hover, .pe-cell.has-tip:focus-visible {
  border-color: var(--bronze);
  outline: none;
}
/* Geneerinen hover-vihje kaikille tooltip-triggereille (esim. guild stash). */
.has-tip { cursor: help; }
.guild-stash-cell.has-tip:hover, .guild-stash-cell.has-tip:focus-visible,
.guild-dep-cell.has-tip:hover, .guild-dep-cell.has-tip:focus-visible {
  border-color: var(--gold); outline: none;
}
.pe-tip {
  position: fixed;
  z-index: 9000; /* tooltip aina päällimmäisenä — myös raid-inspect-overlayn (200) yllä */
  width: max-content;
  max-width: 250px;
  padding: 10px 12px;
  background: var(--night);
  border: 1px solid var(--bronze);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(20, 14, 8, .6);
  pointer-events: none;
}
.pe-tip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.pe-tip-head .pe-tip-art, .pe-tip-head .pe-tip-glyph {
  flex: 0 0 auto; width: 34px; height: 34px; object-fit: contain;
}
.pe-tip-head .pe-tip-name { flex: 1 1 auto; }
.pe-tip-name { display: block; font-weight: 700; font-size: 13px; line-height: 1.2; }
.pe-tip-meta {
  display: block;
  font-size: 10.5px;
  font-variant: small-caps;
  letter-spacing: .04em;
  color: var(--night-text);
  opacity: .7;
  margin: 2px 0 7px;
}
.pe-tip-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.pe-tip-lines li { font-size: 12px; color: var(--night-text); }
.pe-tip-plain { font-size: 12px; color: var(--night-text); opacity: .7; }

/* ---------------------------------------------------------- V4 mobile */

@media (max-width: 899px) {
  .arena-plate { gap: 12px 18px; }
  .ar-pts { margin-left: 0; flex: 1 1 100%; }

  .opprow { flex-wrap: wrap; }
  .opp-attack { flex: 1 1 100%; min-width: 0; }
}

/* ============================================================
   V1.5 — chat dock. Aina mountattuna reitittimen ulkopuolella;
   desktop = oikean laidan night-paneeli, mobiili = koko leveyden
   bottom sheet alanavin päällä. Ei emojia, esc() kaikelle tekstille.
   ============================================================ */

/* headerin toggle + unread-badge */
.chat-toggle { position: relative; }

.chat-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--crimson);
  border: 1px solid var(--night);
  color: #F2EFE8;
  font: 700 11px/16px var(--gl-font-num, 'Segoe UI', system-ui, sans-serif);
  text-align: center;
}

/* dock-runko (desktop: kiinteä paneeli viewportin oikeassa laidassa) */
.chat-dock {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 40; /* alanavin (30) yllä, toastien (50) alla */
  display: none;
  flex-direction: column;
  width: 300px;
  height: min(540px, calc(100vh - 120px));
  background: var(--night);
  border: 1px solid var(--bronze);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--night-text);
  overflow: hidden;
}
.chat-dock.open {
  display: flex;
  animation: chat-in .16s ease-out;
}

@keyframes chat-in {
  from { transform: translateY(10px); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 8px 10px;
  border-bottom: 1px solid var(--night-line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--gold);
}

.chat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: #8A7A5F;
}
.chat-dot.online { background: var(--rarity-uncommon); }
.chat-dot.connecting { background: var(--gold); }
.chat-dot.offline { background: var(--crimson); }

.chat-presence {
  margin-left: auto;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: #8A7A5F;
  white-space: nowrap;
}

.chat-close {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  font: 700 16px/1 var(--font-body);
  color: var(--night-text);
  background: transparent;
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  cursor: pointer;
}
.chat-close:hover { background: var(--night-soft); }

/* viestilista */
.chat-msgs {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  scrollbar-width: thin;
}

.chat-msg {
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.chat-from {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
}
.chat-from:hover { color: var(--gold); text-decoration: underline; }

.chat-lvl {
  color: #8A7A5F;
  font-size: 11px;
  white-space: nowrap;
}

.chat-text { color: var(--night-text); }

.chat-sys {
  color: #8A7A5F;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* syöttörivi */
.chat-inputrow {
  flex: none;
  padding: 8px;
  border-top: 1px solid var(--night-line);
}

.chat-input {
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  font: 14px var(--font-body);
  color: var(--night-text);
  background: var(--night-soft);
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
}
.chat-input::placeholder { color: #8A7A5F; }
.chat-input:disabled { opacity: .55; cursor: not-allowed; }

/* mobiili: koko leveyden bottom sheet alanavin päällä */
@media (max-width: 899px) {
  .chat-dock {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: min(70vh, 480px);
    border: 0;
    border-top: 2px solid var(--bronze);
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* iOS zoomaa fokusoituun kenttään jos fontti < 16px — estetään. */
  .chat-input { font-size: 16px; }
}

/* ==========================================================
   V5 — Work, Daily quests, Leaderboard, nav badges, daily strip
   ========================================================== */

/* ---------------------------------------------------------- shared bits */

.link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--bronze);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}
.link-btn:hover { color: var(--bronze-deep); }

/* ---------------------------------------------------------- work: job cards */

.job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.job-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 10px;
  color: var(--night-text);
}
.job-card.locked { opacity: .6; }

.job-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.job-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--gold); }
.job-min { font-size: 11.5px; color: #8A7A5F; }
.job-lock { font-size: 11.5px; font-weight: 700; color: var(--crimson); }

.seg {
  display: inline-flex;
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  overflow: hidden;
  align-self: flex-start;
}
.seg-btn {
  min-height: 40px;
  min-width: 48px;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--night-text);
  background: var(--night-soft);
  border: 0;
  border-right: 1px solid var(--night-line);
  cursor: pointer;
}
.seg-btn:last-child { border-right: 0; }
.seg-btn.on { color: var(--night); background: var(--gold); }
.seg-btn:disabled { opacity: .5; cursor: not-allowed; }

.job-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}
.job-pay {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}
.job-pay b { color: var(--gold); }
.job-start { min-width: 96px; padding: 8px 16px; font-size: 12.5px; }

/* ---------------------------------------------------------- work: in progress */

.work-active { display: flex; flex-direction: column; gap: 14px; }

.wa-head { display: flex; align-items: center; gap: 12px; }
.wa-head .icon { width: 32px; height: 32px; }
.wa-title h2 { margin: 0; }
.wa-sub { font-size: 12.5px; color: var(--ink-soft); }

.wa-bar {
  position: relative;
  height: 18px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}
.wa-bar .fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--gold);
  transition: width 1s linear;
}

.wa-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.wa-pay {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 15px;
  color: var(--bronze-deep);
}

.wa-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wa-note { font-size: 12.5px; color: var(--ink-soft); }

/* ---------------------------------------------------------- quests */

.quests-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.quests-head h2 { margin: 0; }
.q-reset { font-size: 13px; }

/* ---- Work & Quests yhdistetty näkymä (jaettu backdrop quest.jpg) ----
   quest.jpg kuvaa job boardin (vasen) + scroll-pyhäkön (oikea). Keskitetty
   läpikuultava paneeli jättää molemmat teemaelementit reunoille näkyviin.
   Vain työpöytä; mobiili käyttää jaettua .imm-scene-cards-reflowia (<900px). */
@media (min-width: 900px) {
  .wq-scene .wq-panel { width: min(760px, 64vw); }
  .wq-scene .imm-card {
    background: rgba(22, 15, 8, .90);
    border-color: rgba(201, 162, 75, .34);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .6);
  }
  /* Sub-tab-kortti kompaktiksi; kaksi tabia täyttävät leveyden tasan. */
  .wq-scene .wq-tab-card { padding: 10px 12px; }
  .wq-scene .wq-tab-card .tabbar { margin: 0; width: 100%; }
  .wq-scene .wq-tab-card .tabbtn { flex: 1; }
  /* Luettavuus-scrim molempiin reunoihin (kuvan yli, panelin alle). */
  .wq-scene::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, rgba(20, 14, 8, .45) 0%, rgba(20, 14, 8, 0) 24%, rgba(20, 14, 8, 0) 76%, rgba(20, 14, 8, .45) 100%);
  }
}

.quest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.quest-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.quest-card.ready { border-color: var(--gold); }
.quest-card.claimed { opacity: .72; }

.q-top { display: flex; flex-direction: column; gap: 6px; }
.q-desc { font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.chain-step { font-weight: 600; font-size: 11px; color: var(--gold); letter-spacing: .02em; }
.quest-card.chain-card .q-desc { font-weight: 600; }

.q-rewards { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.q-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--parchment-deep);
}
.q-chip.q-gold { color: var(--bronze-deep); }
.q-chip.q-xp { color: var(--ink); }

.q-bar {
  position: relative;
  height: 16px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.q-bar .fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--laurel);
  transition: width .4s;
}
.quest-card.ready .q-bar .fill { background: var(--gold); }
.q-bar .lbl {
  position: relative;
  display: block;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  color: var(--ink);
}

.q-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  min-height: 40px;
}
.q-claim { min-width: 96px; padding: 8px 18px; font-size: 12.5px; }
.q-progress-lbl { font-size: 12.5px; color: var(--ink-soft); }
.q-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--laurel);
}

.q-reroll-wrap { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.q-reroll-ask { font-size: 12px; color: var(--ink-soft); }
.q-reroll-no { color: var(--ink-soft); }

/* laurel-pulse valmiin tehtävän Claim-napissa */
.quest-card.ready .q-claim { animation: q-pulse 1.8s ease-in-out infinite; }
@keyframes q-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(164, 126, 60, 0); }
  50% { box-shadow: 0 0 0 4px rgba(164, 126, 60, .35); }
}

/* daily reward */
.reward-panel { display: flex; flex-direction: column; gap: 10px; }
.reward-panel.reward-ready { border-color: var(--gold); }
.dr-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ink);
}
.dr-locked { color: var(--ink-soft); }
.dr-claim { align-self: flex-start; }

.reward-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 10px;
  color: var(--night-text);
}

/* ---------------------------------------------------------- leaderboard */

.lb-tabs { display: inline-flex; gap: 4px; margin-bottom: 12px; }
.lb-tab {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink);
  text-decoration: none;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.lb-tab.on { color: var(--gold); background: var(--night); border-color: var(--bronze); }

/* OSRS-hiscores: kaksipaneeli (vasen kategorialista + oikea taulu). */
.lb-2col { display: flex; flex-direction: row; gap: 14px; align-items: flex-start; width: min(940px, 76vw); }
.lb-row-empty td { color: transparent; }
.lb-cat-card { flex: none; width: 210px; }
.lb-cat-card h2 { margin-bottom: 10px; }
.lb-board-card { flex: 1 1 auto; min-width: 0; }
.lb-cats { display: flex; flex-direction: column; gap: 2px; }
.lb-cats-sep { height: 1px; margin: 6px 4px; background: var(--night-line); }
.lb-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--night-text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  border: 1px solid transparent;
}
.lb-cat:hover { background: var(--night-soft); color: var(--night-text); }
.lb-cat.on { background: var(--night); border-color: var(--bronze); color: var(--gold); }
.lb-cat-icon { width: 22px; height: 22px; flex: none; object-fit: contain; }
@media (max-width: 899px) {
  .lb-2col { flex-direction: column; width: 100%; }
  .lb-cat-card { width: 100%; }
  .lb-cats { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .lb-cats-sep { display: none; }
  .lb-cat { flex: 0 0 auto; }
}

.lb-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 13.5px;
  background: var(--parchment-deep);
  border: 1px solid var(--bronze);
  border-radius: var(--radius);
}
.lb-banner b { color: var(--bronze-deep); }

.lb-scroll { overflow-x: auto; }

/* ---- Hall of Champions -tausta (scenes/leaderboard.jpg): symmetrinen marmorihalli,
   mestarien rintakuvat molemmilla reunoilla. Keskitetty läpikuultava paneeli jättää
   rintakuvat kehystämään rankingia. Vain työpöytä; mobiili = imm-scene-cards-reflow. */
@media (min-width: 900px) {
  .leaderboard-scene .leaderboard-panel { width: min(940px, 76vw); }
  .leaderboard-scene .imm-card {
    background: rgba(22, 15, 8, .90);
    border-color: rgba(201, 162, 75, .34);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .6);
  }
  /* Paneeli on absoluuttinen (top/bottom:16) MUTTA .lb-2col on align-items:
     flex-start -> korttien korkeus tuli sisällöstä, joten täysi 25 rivin sivu
     kasvoi paneelin yli ja .imm-scene leikkasi lopun (rivit ~18+ JA pager jäivät
     saavuttamattomiksi; kortin oma overflow-y ei aktivoitunut koska mitään
     korkeusrajaa ei ollut). Kattona 100% pinon korkeudesta -> taulukko vierii
     kortin sisällä, otsikko/banneri/pager pysyvät paikallaan. Vain työpöytä:
     mobiilissa scene reflowaa staattiseksi ja sivu vierii normaalisti. */
  .leaderboard-scene .lb-cat-card { max-height: 100%; }
  .leaderboard-scene .lb-board-card {
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* sisäinen vieritys on .lb-scrollilla, ei kortilla */
  }
  .leaderboard-scene .lb-board-card > h2,
  .leaderboard-scene .lb-board-card .lb-banner,
  .leaderboard-scene .lb-board-card .lb-pager { flex: none; }
  .leaderboard-scene .lb-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
  .leaderboard-scene::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, rgba(20, 14, 8, .45) 0%, rgba(20, 14, 8, 0) 22%, rgba(20, 14, 8, 0) 78%, rgba(20, 14, 8, .45) 100%);
  }
}

.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.lb-table th, .lb-table td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.lb-table th {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.lb-table .lb-num { text-align: right; }
.lb-rank { color: var(--ink-soft); font-weight: 700; }
.lb-name a { color: var(--ink); font-weight: 700; text-decoration: none; }
.lb-name a:hover { color: var(--gold); text-decoration: underline; }

/* Online-status-dot nimen edessä (leaderboard ym.). Geneerinen: chat.js:n
   refreshOnlineDots togglaa is-online-luokan presence-frameista. Ontto ympyrä
   ennen kuin presence tunnetaan (is-known puuttuu) → ei väitetä offlinea;
   is-known ilman is-onlinea = harmaa täysi (offline); is-online = vihreä. Väri EI
   ole ainoa signaali — title/aria-label + täysi/ontto-muoto erottavat tilat. */
.online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: baseline;
  box-sizing: border-box;
  border: 1.5px solid var(--ink-soft);
  background: transparent;               /* is-known puuttuu = tuntematon → ontto */
}
.online-dot.is-known { border-color: transparent; background: #8A7A5F; } /* offline */
.online-dot.is-online { border-color: transparent; background: var(--rarity-uncommon); } /* online */
.lb-row.mine .online-dot.is-online { background: var(--rarity-uncommon); }
.lb-row.mine { background: var(--parchment-deep); }
.lb-row.mine .lb-name a { color: var(--gold); }
.lb-empty { text-align: center; color: var(--ink-soft); padding: 20px; }

.lb-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.lb-page { font-size: 13px; color: var(--ink-soft); }
.lb-pager .btn-ghost { min-width: 84px; padding: 8px 16px; font-size: 12.5px; }
.lb-pager .is-disabled {
  opacity: .45;
  pointer-events: none;
  cursor: default;
}

/* ---------------------------------------------------------- nav badge + more */

.nav-item { position: relative; }
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #F7F2E4;
  background: var(--crimson);
  border-radius: 999px;
}
/* desktop: badge sivupalkin rivin oikeaan reunaan */
.nav-full .nav-badge { margin-left: auto; }

/* desktop-sivupalkki näyttää nav-full-kohteet; mobiili- ja More-napit piiloon */
.nav-mobile, .nav-more { display: none; }

.more-sheet { position: fixed; inset: 0; z-index: 60; }
.ms-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 15, 8, .5);
}
.ms-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80vh;
  overflow-y: auto;
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--night);
  border-top: 2px solid var(--bronze);
  border-radius: 16px 16px 0 0;
  animation: ms-rise .18s ease-out;
}
.ms-grip {
  width: 40px;
  height: 4px;
  margin: 2px auto 10px;
  border-radius: 2px;
  background: var(--night-line);
}
.ms-list { display: flex; flex-direction: column; gap: 4px; }
.ms-item {
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  min-height: 52px;
  color: var(--night-text);
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: left;
}
.ms-item .icon { width: 22px; height: 22px; }
.ms-item.active { color: var(--gold); background: var(--night-soft); }
.ms-item .nav-badge { margin-left: auto; }
.ms-logout { width: 100%; cursor: pointer; }
/* Meta-kohteet (News/Roadmap) omana vaimennettuna ryhmänään, erotinviivan alla. */
.ms-sep { height: 1px; margin: 6px 6px 2px; background: var(--night-line); }
.ms-item.ms-meta { color: var(--night-text); opacity: .72; min-height: 46px; }
.ms-item.ms-meta .icon { opacity: .82; }
.ms-item.ms-meta.active { opacity: 1; color: var(--gold); }
@keyframes ms-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---------------------------------------------------------- overview: daily strip + job status */

.daily-strip, .job-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  padding: 6px 12px;
  min-height: 36px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.daily-strip:hover, .job-status:hover { border-color: var(--bronze); }
.daily-strip.has-todo { border-color: var(--bronze); }
.ds-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  color: #F7F2E4;
  background: var(--crimson);
  border-radius: 999px;
}
.ds-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 2px var(--parchment);
}
.job-status .countdown { font-weight: 700; color: var(--bronze-deep); }
.job-status .js-lbl { overflow-wrap: anywhere; }

/* ---------------------------------------------------------- professions (V6) */

/* PE-paneeli (overview + detail) */
.pe-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.pe-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pe-count { margin-left: auto; font-weight: 700; font-size: 15px; color: var(--bronze-deep); }
.pe-track {
  position: relative;
  height: 16px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.pe-track .fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, var(--gold), var(--bronze));
  transition: width .3s ease;
}
.pe-note { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); }

/* Ammattikortit */
.prof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.prof-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 10px;
  color: var(--night-text);
  text-decoration: none;
}
.prof-card:hover { border-color: var(--bronze); background: #2A2115; }
.prof-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.prof-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--gold);
}
.prof-kind {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.kind-gathering { color: #CDE3B6; background: rgba(74, 93, 51, .35); border: 1px solid var(--laurel); }
.kind-processing { color: #E4D2A6; background: rgba(140, 107, 47, .30); border: 1px solid var(--bronze); }
.kind-crafting { color: #C6D8EE; background: rgba(78, 144, 226, .22); border: 1px solid #3E6FA0; }

.prof-skill { display: flex; flex-direction: column; gap: 5px; }
.prof-skill-lbl { font-size: 12.5px; font-weight: 700; color: var(--night-text); }
.prof-skill-max { color: #8A7A5F; font-weight: 400; }
.skill-track {
  position: relative;
  display: block;
  height: 8px;
  background: var(--night-soft);
  border: 1px solid var(--night-line);
  border-radius: 4px;
  overflow: hidden;
}
.skill-track .fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: var(--gold);
}
.prof-blurb { margin: 0; font-size: 12.5px; line-height: 1.4; color: #B8A98C; }

/* Detail-pää */
.prof-detail-head { display: flex; flex-direction: column; gap: 10px; }
.pd-blurb { margin: 0; font-size: 14px; color: var(--ink-soft); }
.pd-skill { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-skill .skill-track {
  flex: 1;
  min-width: 140px;
  height: 10px;
  background: var(--parchment-deep);
  border-color: var(--line);
}
.pd-skill-lbl { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--bronze-deep); white-space: nowrap; }
.pd-skill-xp { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }

/* Node- ja recipe-rivit */
.node-list { display: flex; flex-direction: column; }
.node-row, .recipe-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.node-row:last-child, .recipe-row:last-child { border-bottom: 0; }
.node-row.locked, .recipe-row.locked { opacity: .55; }

.node-info, .recipe-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.node-head, .recipe-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.node-name, .recipe-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.node-req { font-size: 11.5px; color: var(--ink-soft); }
.node-lock { font-size: 11.5px; font-weight: 700; color: var(--crimson); }

.yield-line { display: flex; flex-wrap: wrap; gap: 6px; }
.yield-tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  color: var(--ink);
  white-space: nowrap;
}
.bonus-tag { border-style: dashed; color: var(--ink-soft); }
.bonus-chance { color: var(--bronze-deep); font-weight: 700; }

.recipe-io { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rc-inputs { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.rc-input {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.rc-input b { color: var(--laurel); font-weight: 700; }
.rc-input.short b { color: var(--crimson); }
.rc-arrow { color: var(--ink-soft); font-weight: 700; }
.recipe-out {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bronze-deep);
}
.recipe-out-art { width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain; }
.recipe-out-text { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; }
.recipe-out-name { white-space: nowrap; }
.recipe-out-blurb {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: normal;
}

.node-act { display: flex; align-items: center; gap: 10px; flex: none; }
.pe-cost {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.node-btn { min-width: 96px; padding: 8px 16px; font-size: 12.5px; }

/* ---------------------------------------------------------- profession scenes (V-scenes) */

/* Pinni-kerros scene-taustakuvan päällä (gather-ammatit + Expeditions). Itse
   scene-laatikko tulee jaetusta .imm-scene imm-scene-cards -kaavasta; tässä vain
   pinnien absoluuttinen ankkurikerros kuvan yllä. */
.scene-pins { position: absolute; inset: 0; z-index: 3; }

/* Node-pinni: teardrop-bronssimarkkeri, kultarengas, tier-numero. */
.node-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 34px;
  min-height: 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  background: radial-gradient(circle at 40% 35%, var(--gold), var(--bronze-deep));
  border: 2px solid var(--gold);
  box-shadow: 0 2px 6px rgba(20, 14, 8, .6), 0 0 0 1px rgba(20, 14, 8, .35);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
/* 44px kosketuskohde ilman että itse markkeri kasvaa. */
.node-pin::before {
  content: "";
  position: absolute;
  inset: -6px;
  rotate: 45deg;
  border-radius: 50%;
}
.pin-tier {
  rotate: 45deg;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: var(--night);
  text-shadow: 0 1px 0 rgba(249, 242, 228, .35);
}
.node-pin:hover, .node-pin:focus-visible {
  transform: translate(-50%, -50%) scale(1.14);
  box-shadow: 0 3px 10px rgba(20, 14, 8, .7), 0 0 12px var(--gold);
  outline: none;
}
.node-pin:focus-visible { border-color: #F2E4B8; }
/* Lukittu node: himmennetty, katkoviivarengas, lukkoglyfi. */
.node-pin.shrouded {
  background: radial-gradient(circle at 40% 35%, #6A5A44, #2C2418);
  border-style: dashed;
  border-color: #8A7A5F;
  opacity: .72;
}
.node-pin.shrouded .pin-tier { display: none; }

/* Monster-pinnit aluekartalla (V12): pyöreä hahmokuva + hover-label (.pin-label).
   Sama .scene-pins-layeri kuin muut pinnit; piilossa mobiilissa (media query). */
.mob-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--bronze);
  background: var(--night);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.mob-pin-art, .mob-pin-fallback { grid-area: 1 / 1; }
.mob-pin-art { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mob-pin-art + .mob-pin-fallback { display: none; }
.mob-pin-fallback { width: 26px; height: 26px; opacity: .85; }
.mob-pin:hover, .mob-pin:focus-visible { border-color: var(--gold); z-index: 6; outline: none; }
.mob-pin:hover .pin-label, .mob-pin:focus-visible .pin-label { opacity: 1; }
.mob-pin[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.mob-pin-boss { width: 68px; height: 68px; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201, 162, 75, .3), 0 2px 10px rgba(0, 0, 0, .6); }
/* Pin ring color = difficulty (risk) vs the viewer's level — same signal as the
   panel risk pill so threat reads at a glance on the map. Boss keeps its gold
   ring, and hover/focus always wins (both re-declared after the risk colors). */
.mob-pin.risk-easy { border-color: var(--laurel); }
.mob-pin.risk-fair { border-color: var(--bronze); }
.mob-pin.risk-dangerous { border-color: var(--crimson); }
.mob-pin.risk-deadly { border-color: var(--gl-red-deep, #571313); }
.mob-pin.mob-pin-boss { border-color: var(--gold); }
.mob-pin:hover, .mob-pin:focus-visible { border-color: var(--gold); }
.pin-lock {
  rotate: 45deg;
  width: 15px;
  height: 15px;
  fill: #D9CBA8;
}

/* Kelluva scene-kortti (desktop hover/focus): night-paneeli pinnin lähellä. */
.scene-card {
  position: absolute;
  z-index: 10;
  width: 230px;
  padding: 12px 14px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 10px;
  color: var(--night-text);
  box-shadow: 0 8px 24px rgba(20, 14, 8, .55);
}
.sc-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--gold);
  margin-bottom: 4px;
}
.sc-req { display: block; font-size: 11.5px; color: var(--night-text); margin-bottom: 8px; }
.sc-req.locked { color: var(--rarity-mythic); font-weight: 700; }
.sc-yields { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
/* Tummalla paneelilla yield-tagit kääntyvät vaaleiksi (peritty .yield-tag on
   parchment-taustainen; skopoidaan scene-korttiin/-sheetiin). */
.scene-card .yield-tag, .scene-sheet .yield-tag {
  background: var(--night-soft);
  border-color: var(--night-line);
  color: var(--night-text);
}
.scene-card .bonus-tag, .scene-sheet .bonus-tag { color: #C9BCA0; }
.scene-card .bonus-chance, .scene-sheet .bonus-chance { color: var(--gold); }
.sc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scene-card .pe-cost, .scene-sheet .pe-cost { color: #C9BCA0; }
.sc-gather { min-width: 92px; padding: 7px 14px; font-size: 12.5px; }
/* Mobiili/näppäimistö-sheet käyttää jaettua .sheet-backdropia; sisältö night-panelilla. */
.scene-sheet {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: 18px 16px 16px;
  background: var(--night);
  border: 1px solid var(--bronze);
  border-radius: 10px;
  color: var(--night-text);
  box-shadow: 0 8px 28px rgba(20, 14, 8, .6);
}
.scene-sheet .sc-name { font-size: 18px; }
.scene-sheet-close {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--night-text);
  font-size: 22px;
  line-height: 1;
}
.scene-sheet .sc-foot { margin-top: 4px; }

/* Sekundaarinen node-lista (gather-scenen alla): visuaalisesti kevyempi. */
.scene-list h2 { opacity: .95; }

/* Workshop-paneeli: tier-otsikot + reseptirivit teemoitetussa laatikossa. */
.ws-panel { display: flex; flex-direction: column; gap: 4px; }
.ws-tier { padding: 4px 0; }
.ws-tier-h {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 6px 0 2px;
  border-top: 1px solid var(--line);
}
.ws-tier:first-child .ws-tier-h { border-top: 0; }

/* Materials pouch (character-näkymä) */
.pouch-group { margin-bottom: 14px; }
.pouch-group:last-child { margin-bottom: 0; }
.pouch-kind {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.pouch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.pouch-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pouch-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pouch-qty { font-weight: 700; font-size: 13px; color: var(--bronze-deep); white-space: nowrap; }

/* Buffs strip (character-paneeli) */
.buffs-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.buff-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--line);
  background: var(--parchment-deep);
}
.buff-food { border-color: var(--laurel); background: rgba(74, 93, 51, .16); }
.buff-elixir { border-color: #3E6FA0; background: rgba(78, 144, 226, .14); }
.buff-name { font-weight: 700; color: var(--ink); }
.buff-eff { color: var(--laurel); font-weight: 700; }
.buff-elixir .buff-eff { color: #2E5A7A; }
.buff-time { color: var(--ink-soft); font-weight: 700; }

/* Buff-pisteet (overview PE-chip) */
.pe-chip .buff-dots { display: inline-flex; gap: 4px; margin-left: 6px; }
.buff-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.buff-dot-food { background: var(--laurel); }
.buff-dot-elixir { background: #4E90E2; }

/* ---------------------------------------------------------- immersive scenes (shared) */

/* Yhteinen kehys/vignette-kaava kaikille täysleveille scene-näkymille (World Map,
   Environs, Overview, ja tulevat). Jokainen näkymä lisää OMAN luokkansa (.world-scene
   jne.) samaan elementtiin pinni-/kortti-CSS:n ankkuriksi — .imm-scene hoitaa vain
   kehyksen niin ettei sitä tarvitse toistaa joka näkymässä erikseen. */
.imm-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  max-height: 560px;
  border: 1px solid var(--bronze);
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--night);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 60px rgba(36, 28, 18, .5), var(--shadow);
}
.imm-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--parchment);
  opacity: .07;
  mix-blend-mode: multiply;
  z-index: 2;
}
.imm-scene .backdrop-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* ---------------------------------------------------------- world map (#/map) */

/* Rakennuspinni: pelkkä linkki (ei action-nappia) — klikkaus navigoi suoraan
   hash-reittiin. Talomallinen (pyöristetty neliö) erottuu ammattikartaston
   teardrop-node-pinnistä. Nimilappu tulee esiin hover/focus/touch-fokuksella. */
.building-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  min-width: 26px;
  min-height: 26px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: radial-gradient(circle at 40% 35%, var(--gold), var(--bronze-deep));
  border: 2px solid var(--gold);
  box-shadow: 0 2px 6px rgba(20, 14, 8, .6), 0 0 0 1px rgba(20, 14, 8, .35);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
  text-decoration: none;
}
/* 44px kosketuskohde ilman että itse merkki kasvaa. */
.building-pin::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 10px;
}
.building-pin:hover, .building-pin:focus-visible {
  transform: translate(-50%, -50%) scale(1.14);
  box-shadow: 0 3px 10px rgba(20, 14, 8, .7), 0 0 12px var(--gold);
  outline: none;
}
.building-pin:focus-visible { border-color: #F2E4B8; }
.pin-label {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--night);
  border: 1px solid var(--night-line);
  color: var(--night-text);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 4;
}
.building-pin:hover .pin-label, .building-pin:focus-visible .pin-label { opacity: 1; }

/* Yläreunan pinnit (y < 15 %): nimilappu pinnin alapuolelle ettei se leikkaudu
   scenen overflow:hidden-yläreunaan — koskee myös desktop-hoveria (lappu
   leikkautui ennenkin). Luokan antaa pin-builderi (worldMap.js/environs.js). */
.building-pin.pin-flip .pin-label, .env-pin.pin-flip .pin-label {
  bottom: auto;
  top: calc(100% + 6px);
}

/* ---------------------------------------------------------- environs (#/environs) */

/* Esteettömyys-/tekstikäyttäjä-fallback: pieni kulma-overlay scenen päällä
   (ei enää iso otsikkopaneeli) — kartta alkaa suoraan headerista. */
.env-list-link {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(36, 28, 18, .75);
  border: 1px solid var(--night-line);
  color: var(--night-text);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.env-list-link:hover { color: var(--gold); }

/* Kehys/vignette-kaava tulee jaetusta .imm-scenestä (ks. yllä) — .environs-scene
   kantaa vain zone-tason erikoistuksia (ei mitään tässä toistaiseksi). */

/* Perus-pinni: 44px kosketuskohde, sama kaava kuin .building-pin/.node-pin. */
.env-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease;
}
.env-pin::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 10px;
}
.env-pin:hover, .env-pin:focus-visible {
  transform: translate(-50%, -50%) scale(1.14);
  outline: none;
}
.env-pin .pin-label {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--night);
  border: 1px solid var(--night-line);
  color: var(--night-text);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 4;
}
.env-pin:hover .pin-label, .env-pin:focus-visible .pin-label { opacity: 1; }

/* Keräyspaikka: teardrop kuten ammattikartaston node-pin, laurel-sävy erottaa
   sen retkizoneista. */
.env-pin-gather {
  min-width: 30px;
  min-height: 30px;
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  background: radial-gradient(circle at 40% 35%, #7C9A57, var(--laurel));
  border: 2px solid #9CB876;
  box-shadow: 0 2px 6px rgba(20, 14, 8, .6), 0 0 0 1px rgba(20, 14, 8, .35);
}
.env-pin-gather .pin-label { rotate: 45deg; }
.env-pin-gather:hover, .env-pin-gather:focus-visible {
  box-shadow: 0 3px 10px rgba(20, 14, 8, .7), 0 0 12px #9CB876;
}

/* Retkizone: kilpimuotoinen virstanpylväs, numeroitu järjestyksessä. */
.env-pin-zone {
  min-width: 34px;
  min-height: 34px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: radial-gradient(circle at 40% 35%, var(--gold), var(--bronze-deep));
  border: 2px solid var(--gold);
  box-shadow: 0 2px 6px rgba(20, 14, 8, .6), 0 0 0 1px rgba(20, 14, 8, .35);
}
.env-pin-zone:hover, .env-pin-zone:focus-visible {
  box-shadow: 0 3px 10px rgba(20, 14, 8, .7), 0 0 12px var(--gold);
}
.pin-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: var(--night);
  text-shadow: 0 1px 0 rgba(249, 242, 228, .35);
}
/* Lukittu zone: EI linkki (div), ei hover/focus-tilaa, tumma+katkoviiva kuten
   .zone-card.locked. */
.env-pin-zone.locked {
  cursor: default;
  background: radial-gradient(circle at 40% 35%, #6A5A44, #2C2418);
  border-style: dashed;
  border-color: #8A7A5F;
  opacity: .72;
}
.env-pin-zone.locked .pin-num { display: none; }
.env-pin-zone.locked:hover, .env-pin-zone.locked:focus-visible { transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(20, 14, 8, .6), 0 0 0 1px rgba(20, 14, 8, .35); }
.env-pin-zone.locked .pin-lock {
  rotate: 0deg;
  width: 16px;
  height: 16px;
  fill: #D9CBA8;
}
.env-pin-zone.locked .pin-label { white-space: normal; width: max-content; max-width: 160px; text-align: center; }

/* ---------------------------------------------------------- full-page maps */

/* body.map-fullpage asetetaan route()issa view.fullBleed-lipusta (World Map,
   Environs). Kartta täyttää koko näkymän reunasta reunaan kahden sivupalkin
   välissä sen sijaan että se olisi keskitetty 1000px-paneeliin. min-height:0
   jokaisessa lenkissä estää flexboxin oletus-min-height:autosta syntyvän
   kutistumislukon (lapsen luontainen sisältökorkeus estäisi muuten mahtumisen
   viewportiin). */
/* Header+shell elävät #app-wrapperin sisällä (ei suoraan bodyn lapsina) —
   flex-ketju pitää käynnistää #appista, ei bodysta, jotta se saa oikean
   korkeuden jaettavaksi (100vh) header+shellin kesken. */
body.map-fullpage #app { display: flex; flex-direction: column; min-height: 100vh; }
/* .shellin oma align-items:flex-start (yllä) estäisi .viewiä venymästä koko
   korkeuteen — stretch tarvitaan jotta flex:1-ketju kantautuu .world-scenelle.
   margin:0 auto (.shellin perussääntö) pitää nollata eksplisiittisesti: auto-
   marginaali poikittaisakselilla ohittaa align-items:stretchin flexbox-
   spekin mukaan ja keskittäisi shellin sisältöleveyteensä leveytenä
   venymisen sijaan. */
body.map-fullpage .shell { max-width: none; margin: 0; flex: 1 1 auto; min-height: 0; align-items: stretch; }
body.map-fullpage .view { max-width: none; padding: 0; margin: 0; display: flex; flex-direction: column; min-height: 0; }
body.map-fullpage .imm-view { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
body.map-fullpage .imm-scene {
  flex: 1 1 auto;
  aspect-ratio: auto;
  max-height: none;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

@media (max-width: 899px) {
  /* Alapalkin väistötila säilyy full-page-tilassakin. */
  body.map-fullpage.has-nav .view { padding-bottom: 84px; }

  /* World Map / Environs -kartat ovat 3:2 (1536x1024). Portrait-mobiilissa
     flex:1 venytti scenen viewport-korkuiseksi → object-fit:cover kroppasi
     ~63 % leveydestä pois (koko kartta ei näkynyt) ja %-pinnit eivät osuneet
     rakennuksiin. Pakotetaan scene kuvan 3:2-suhteeseen → cover ei kroppaa,
     koko kartta näkyy ja pinnit osuvat. Keskitetään pystysuunnassa jäljelle
     jäävään tilaan. Skoopattu .world-/.environs-sceneen (EI expeditions-scene,
     joka on imm-scene-cards-korttilayout). */
  /* Kartta täyttää korkeuden ja on kuvan 3:2-suhteessa → leveämpi kuin
     viewport puhelimella; view saa vaakascrollin (panorointi) niin ettei
     pystytila jää tyhjäksi ja reunapinnien laput mahtuvat. flex:1 antaa
     korkeuden (ei height:100% joka ei resolvoi flex-ketjussa), aspect-ratio
     johtaa leveyden; align-items:flex-start estää stretchin. */
  body.map-fullpage .world-map-view,
  body.map-fullpage .environs-view {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    background: var(--night);
  }
  body.map-fullpage .world-scene,
  body.map-fullpage .environs-scene {
    flex: 1 1 auto;
    width: auto;
    aspect-ratio: 3 / 2;
    max-height: none;
  }

  /* Expeditions-banneri (imm-scene-cards): 160px-kaistaleeseen absoluuttisesti
     asemoidut zone-/paluupinnit kelluivat irrallaan → piilotetaan mobiilissa.
     Navigointi hoituu alla olevilla zone-korteilla + alapalkin Map-napilla. */
  .expeditions-scene .scene-pins { display: none; }
}

/* ---------------------------------------------------------- mobile nav (V5) */

@media (max-width: 899px) {
  /* mobiilissa sivupalkin täysi lista piiloon; näytä primary + More */
  .nav-full { display: none; }
  .nav-mobile, .nav-more { display: flex; }

  .job-grid { grid-template-columns: 1fr; }
  .quest-grid { grid-template-columns: 1fr; }
  .lb-tabs { width: 100%; }
  .lb-tab { flex: 1; justify-content: center; }
  /* Leaderboard-taulukko kapealle: tiivistys — .lb-scroll nappaa silti
     ylivuodon jos 5 saraketta ei mahdu. */
  .lb-table { font-size: 13px; }
  .lb-table th, .lb-table td { padding: 7px 8px; }
  /* Tekstinappien kosketuskohde 44px:iin (perus 32px, mm. questien reroll). */
  .link-btn { min-height: 44px; padding: 8px 10px; }
  .prof-grid { grid-template-columns: 1fr; }
  .node-row, .recipe-row { flex-wrap: wrap; }
  .node-act { width: 100%; justify-content: space-between; }

  /* Scene-pinnit mobiilissa: isommat kosketuskohteet; hover-kortti ei ole
     käytössä (sheet kantaa kortin). Scene-laatikon koko tulee .imm-scenestä. */
  .node-pin { min-width: 38px; min-height: 38px; width: 38px; height: 38px; }
  .pin-tier { font-size: 15px; }

  /* Karttamerkit mobiilissa: hieman isommat kosketuskohteet, matalampi kuva. */
  .imm-scene { aspect-ratio: 4 / 3; max-height: 340px; }
  .building-pin { min-width: 30px; min-height: 30px; width: 30px; height: 30px; }
  .env-pin-gather { min-width: 34px; min-height: 34px; width: 34px; height: 34px; }
  .env-pin-zone { min-width: 38px; min-height: 38px; width: 38px; height: 38px; }

  /* Kosketuslaitteella hover-nimilappua ei ole ja pinnin tappaus navigoi
     heti → nimilaput aina näkyvissä, pienennettyinä ja rivittyvinä. Pienet
     (9px) koska 3:2-kartalle mahtuu 15 pinniä tiiviisti. */
  .building-pin .pin-label, .env-pin .pin-label {
    opacity: 1;
    font-size: 9px;
    padding: 1px 5px;
    bottom: calc(100% + 3px);
    white-space: normal;
    width: max-content;
    max-width: 38vw;
    text-align: center;
    line-height: 1.15;
  }

  /* Kortti-pohjaiset immersiiviset näkymät (kaikki paitsi %-pin-scenet kuten
     World Map/Environs, joilla on oma yllä oleva käsittely): nurkka-/pino-
     kortit menisivät päällekkäin kapealla näytöllä — kuva kutistuu matalaksi
     kaistaleeksi ylös (normaali dokumenttivirtaus, ei enää overflow:hidden-
     rajattu), kortit pinoutuvat sen alle täysleveinä night-paneeleina.
     Jaettu .imm-scene-cards-merkkiluokka kaikille korttipohjaisille scene-
     elementeille — uusi näkymä saa tämän ILMAN uutta mobiili-CSS:ää. */
  .imm-scene-cards {
    aspect-ratio: auto;
    max-height: none;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  .imm-scene-cards::after { display: none; }
  .imm-scene-cards .backdrop-img {
    position: relative;
    inset: auto;
    width: 100%;
    height: 160px;
    border-radius: 9px 9px 0 0;
  }
  /* Professions (overview/workshop/gather) + Expeditions: iso immersiivinen
     hero-banneri mobiilissa (perus 160px on kapea kaistale — käyttäjä halusi
     ison kuvan kuten kartassa). Sisältö (reseptit/vyöhykkeet) virtaa alle. */
  .profs-scene .backdrop-img,
  .prof-workshop-scene .backdrop-img,
  .prof-gather-scene .backdrop-img,
  .expeditions-scene .backdrop-img {
    height: clamp(220px, 42vh, 360px);
  }
  /* Gather-scenen node-pinnit kelluivat 160px-bannerilla (kuten expeditions) →
     piiloon; keräys hoituu alla olevalta node-listakortilta. */
  .prof-gather-scene .scene-pins { display: none; }
  .imm-stack {
    position: static;
    width: 100%;
    gap: 0;
    /* KRIITTINEN: position:static ohittaa left/top-offsetit mutta transform
       JÄÄ VOIMAAN — .imm-stack-centerin translateX(-50%) siirsi täysleveän
       pinon puoliksi ruudun vasemman reunan yli (arena/lb/market/work/
       training olivat mobiilissa rikki). */
    transform: none;
  }
  .imm-card {
    flex: none;
    width: 100%;
    max-height: none;
    overflow-y: visible;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }
  .imm-card + .imm-card { border-top: 0; }
}

/* ---------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
  .bar .fill { transition: none; }
  .nbar .fill { transition: none; }
  .sval.flash { animation: none; }
  .chat-dock.open { animation: none; }
  .wa-bar .fill { transition: none; }
  .q-bar .fill { transition: none; }
  .quest-card.ready .q-claim { animation: none; }
  .ms-panel { animation: none; }
  .pe-track .fill { transition: none; }
  .node-pin { transition: none; }
  .node-pin:hover, .node-pin:focus-visible { transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(20, 14, 8, .6), 0 0 0 1px rgba(20, 14, 8, .35); }
  .building-pin { transition: none; }
  .building-pin:hover, .building-pin:focus-visible { transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(20, 14, 8, .6), 0 0 0 1px rgba(20, 14, 8, .35); }
  .env-pin { transition: none; }
  .env-pin:hover, .env-pin:focus-visible { transform: translate(-50%, -50%); }
  .env-pin-gather:hover, .env-pin-gather:focus-visible,
  .env-pin-zone:hover, .env-pin-zone:focus-visible { box-shadow: 0 2px 6px rgba(20, 14, 8, .6), 0 0 0 1px rgba(20, 14, 8, .35); }
}

/* ============================================================
   V7 — The Forge (#/forge): casino-jalostus. Kanoniset tokenit,
   44px-kohteet, mobiili 1 palsta, ei emojia, prefers-reduced-motion.
   ============================================================ */

.forge-glyph { width: 26px; height: 26px; color: var(--bronze); }

.forge-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.forge-panel-head h2 { margin: 0; }
.forge-panel-head-acts { display: flex; align-items: center; gap: 14px; }

/* Otsikkoryhmä: pieni "i"-infonappi otsikon vasemmalla → avaa drop-rate-modaalin. */
.forge-panel-head-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.forge-info-btn {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--gold);
  border-color: var(--bronze);
}
.forge-info-btn svg { width: 17px; height: 17px; }
.forge-info-btn:hover { color: #fff; border-color: var(--gold); background: rgba(201, 162, 75, .12); }

/* Vasemman inventaarion aliotsikot (Unidentified / Identified). */
.forge-subhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--night-line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .85;
}
.forge-inv .forge-subhead:first-of-type { margin-top: 4px; }

.forge-lead {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------- forge workshop (3 columns) */
/* Yhden ruudun jalostuspaja forge.jpg-taustan päällä: VASEN inventaario, KESKELLÄ
   item-slot (alasin) toimintoineen, OIKEA supplies + Sealed Spolia. Forge on
   fullBleed (map-fullpage) → .imm-scene täyttää viewportin, joten workshop
   täyttää sen korkeuden ja sarakkeet vierittyvät sisäisesti. Mobiili (<900px):
   jaettu .imm-scene-cards-reflow pinoaa sarakkeet (kuvakaistale + kortit). */
.forge-workshop {
  position: relative;
  z-index: 3;
  height: 100%;
  min-height: 0;
  display: flex;
  gap: 16px;
  padding: 16px;
  align-items: stretch;
}
.forge-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  min-width: 0;
}
.forge-col-inv { flex: 0 0 clamp(240px, 22%, 300px); overflow-y: auto; }
.forge-col-slot { flex: 1 1 auto; overflow-y: auto; }
.forge-col-shop { flex: 0 0 clamp(300px, 27%, 360px); overflow-y: auto; }

@media (min-width: 900px) {
  /* Läpikuultavat night-kortit forge-taustan päällä (kuin premium/market-dock). */
  .forge-scene .imm-card {
    background: rgba(22, 15, 8, .90);
    border-color: rgba(201, 162, 75, .38);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .6);
  }
}

/* Vasemman inventaarion solulista (1 palsta). */
.forge-inv { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.forge-inv-grid { grid-template-columns: 1fr; margin-top: 8px; }
.forge-cell[aria-pressed="true"] {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), inset 0 0 16px rgba(201, 162, 75, .18);
}
/* Vaakasolu: ikoni vasemmalla + nimi/meta oikealla. */
.forge-cell { flex-direction: row; align-items: center; gap: 10px; }
.forge-cell-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.forge-cell-art {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--night-line);
}
.forge-cell-art-fallback { display: grid; place-items: center; background: var(--night); }
.forge-cell-glyph { width: 22px; height: 22px; }

/* Keskiö: EI korttia — pieni neliö-slot forge-taustan päällä (kuva näkyy
   ympärillä) ja sen alla kompakti ops-valikko. */
.forge-anvil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 12px 24px;
  text-align: center;
}
/* Leveällä 3-sarakenäkymällä neliö työnnetään alas alasimen päälle
   (forge.jpg:n alasin on pystysuunnassa keskellä). Kapeassa/pinotussa
   näkymässä pidetään maltillinen padding (ei isoa aukkoa). */
@media (min-width: 1281px) {
  .forge-anvil { padding-top: clamp(130px, 27vh, 250px); }
}
.forge-square {
  width: 132px;
  height: 132px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(20, 14, 8, .5);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}
.forge-square-empty { border: 2px dashed rgba(201, 162, 75, .5); }
.forge-square-filled {
  border: 2px solid var(--gold);
  background: rgba(20, 14, 8, .32);
  box-shadow: 0 0 0 1px var(--gold), 0 0 26px rgba(201, 162, 75, .4), 0 6px 24px rgba(0, 0, 0, .5);
}
.forge-square-glyph .forge-glyph { width: 40px; height: 40px; color: var(--gold); opacity: .75; }
.forge-square-art { width: 100%; height: 100%; object-fit: cover; }
.forge-square-slot {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}
.forge-anvil-hint {
  margin: 0;
  max-width: 300px;
  font-size: 13px;
  color: var(--night-text);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .85);
}
.forge-anvil-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .85);
}
.forge-slot-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .02em;
}
.forge-slot-meta { font-size: 12.5px; color: #D9CBA8; }

/* Ops-valikko: kompakti läpikuultava paneeli neliön alla (forge näkyy reunoilla). */
.forge-ops-panel {
  width: min(460px, 100%);
  margin-top: 4px;
  padding: 14px;
  background: rgba(22, 15, 8, .82);
  border: 1px solid rgba(201, 162, 75, .34);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
  text-align: left;
}
.forge-ops-panel .cap-note { margin: 10px 0 0; }

/* Valitun esineen täydet tiedot ops-paneelin yläosassa (stats + affiksit). */
.forge-item-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--night-line);
  font-size: 12.5px;
  color: var(--night-text);
}
.fi-line { display: flex; justify-content: space-between; gap: 12px; }
.fi-k { color: #B7A886; font-variant: small-caps; letter-spacing: .04em; }
.fi-v { font-weight: 700; }
.fi-affixes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.fi-affixes-h { color: #B7A886; font-variant: small-caps; letter-spacing: .04em; }
.fi-affix {
  padding: 2px 8px;
  background: var(--night-soft);
  border: 1px solid var(--night-line);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--rarity-uncommon);
}
.fi-noaffix { color: #8A7A5F; font-style: italic; }
.fi-req { color: #8A7A5F; font-size: 11.5px; }

/* Reroll-rituaalin reveal: uudet affiksit chippeinä. */
.ritual-affixes { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 6px; vertical-align: middle; }
.ritual-affixes span {
  padding: 2px 9px;
  background: rgba(58, 46, 29, .6);
  border: 1px solid var(--night-line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--rarity-uncommon);
}

/* Toimintorivit: otsikko + vaadittu matsi + lopputulos + nappi. */
.forge-ops { display: flex; flex-direction: column; gap: 10px; }
.forge-op {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--night-soft);
  border: 1px solid var(--night-line);
  border-left: 3px solid var(--bronze);
  border-radius: var(--radius);
}
.forge-op.is-disabled { opacity: .6; border-left-color: var(--night-line); }
.forge-op-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.forge-op-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .05em;
  color: var(--gold);
}
.forge-op-req { font-size: 12px; color: var(--night-text); }
.forge-op-own { color: #B7A886; }
.forge-op-own.short { color: #E07A6A; }
.forge-op-out { font-size: 12.5px; color: var(--night-text); }
.forge-op-na { color: #8A7A5F; font-style: italic; }
.forge-op-btn { flex: none; min-width: 96px; min-height: 40px; padding: 8px 16px; font-size: 12.5px; }

/* Junon statti-valitsin ensimmäistä lumoa varten (korvaa enchant-rivin sisällön). */
.forge-juno { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.forge-juno-ask { font-size: 12.5px; color: var(--night-text); }
.forge-juno-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.forge-juno-stat, .forge-juno-cancel { min-height: 36px; padding: 6px 12px; font-size: 12px; }

/* Kolme saraketta vaatii tilaa (2 sivupalkkia syövät ~380px). Alle ~1280px
   viewportissa slot-sarake kutistuisi olemattomiin → pinotaan sarakkeet. */
@media (max-width: 1280px) {
  .forge-workshop { flex-direction: column; gap: 14px; }
  .forge-col { flex: none; width: 100%; min-height: 0; }
  .forge-inv { overflow: visible; }
  .forge-slot-name { font-size: 16px; }
}
/* 900–1280px: scene on täyskorkea (map-fullpage) → workshop vierittää sisäisesti. */
@media (max-width: 1280px) and (min-width: 900px) {
  .forge-workshop { height: 100%; overflow-y: auto; padding: 16px; }
  .forge-col { overflow: visible; }
}
/* ≤899px: scene reflowaa banneriksi (.imm-scene-cards) → normaali dokumenttivirtaus. */
@media (max-width: 899px) {
  .forge-workshop { height: auto; overflow: visible; padding: 0; gap: 0; }
  .forge-col { overflow: visible; }
}

/* ---------------------------------------------------------- consumable cards */

.forge-cons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.forge-cons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 10px;
  color: var(--night-text);
}

.fc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.fc-name { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.fc-qty { font-size: 12.5px; color: #C7B896; white-space: nowrap; }

.fc-blurb { font-size: 12px; color: #B7A886; min-height: 2.2em; }

.fc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}
.fc-buy { min-width: 76px; min-height: 40px; padding: 8px 14px; font-size: 12.5px; }
.forge-cons .price-short { color: #E07A6A; }

/* ---------------------------------------------------------- sealed spolia */

.spolia-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 6px;
}

.spolia-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.spolia-flabel {
  font-size: 11.5px;
  font-variant: small-caps;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--ink-soft);
}

.forge-select {
  min-height: 44px;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.spolia-act {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.spolia-buy-btn { min-height: 44px; }

.linklike {
  border: 0;
  background: none;
  padding: 0;
  color: var(--bronze);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.linklike:hover { color: var(--bronze-deep); }

/* ---------------------------------------------------------- wax-seal caches */

.wax-tray {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.wax-cache {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  min-height: 44px;
  background: var(--night);
  border: 1px solid var(--bronze);
  border-radius: 10px;
  color: var(--night-text);
  cursor: pointer;
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
}
.wax-cache:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20, 14, 8, .4); }
.wax-cache:disabled { opacity: .55; cursor: default; }

.wax-seal {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--gold);
  background: radial-gradient(circle at 50% 40%, #5A2320, #3A1512);
  border: 1px solid var(--crimson);
}
.wax-seal .forge-glyph { width: 22px; height: 22px; }

.wax-slot {
  font-weight: 700;
  font-size: 13px;
  font-variant: small-caps;
  letter-spacing: .04em;
}
.wax-ilvl { font-size: 11px; color: #B7A886; }
.wax-hint { font-size: 11px; color: var(--gold); font-variant: small-caps; letter-spacing: .05em; }

.wax-cache.cracking .wax-seal { animation: wax-crack .35s ease forwards; }
@keyframes wax-crack {
  0% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.15) rotate(-6deg); }
  100% { transform: scale(.4) rotate(8deg); opacity: 0; }
}

/* ---------------------------------------------------------- reveal stage */

.reveal-backdrop { z-index: 60; }

.reveal-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 420px;
  padding: 8px;
}

.reveal-flash {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, currentColor 0%, transparent 62%);
  animation: reveal-flash .7s ease-out forwards;
}
.reveal-flash.rarity-common { color: var(--rarity-common); }
.reveal-flash.rarity-uncommon { color: var(--rarity-uncommon); }
.reveal-flash.rarity-rare { color: var(--rarity-rare); }
.reveal-flash.rarity-epic { color: var(--rarity-epic); }
.reveal-flash.rarity-legendary { color: var(--rarity-legendary); }
.reveal-flash.rarity-mythic { color: var(--rarity-mythic); }
@keyframes reveal-flash {
  0% { opacity: 0; transform: scale(.3); }
  35% { opacity: .85; }
  100% { opacity: 0; transform: scale(1.4); }
}

.reveal-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 22px 18px 18px;
  background: var(--night);
  border: 1px solid var(--bronze);
  border-radius: 12px;
  color: var(--night-text);
  text-align: center;
  box-shadow: 0 8px 28px rgba(20, 14, 8, .55);
  animation: reveal-pop .35s ease-out both;
  animation-delay: .18s;
}
@keyframes reveal-pop {
  0% { opacity: 0; transform: scale(.9); }
  100% { opacity: 1; transform: scale(1); }
}

.reveal-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}
.reveal-meta {
  font-size: 12px;
  font-variant: small-caps;
  letter-spacing: .05em;
  color: #8A7A5F;
}
.reveal-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  font-size: 13px;
}
.reveal-ok { margin-top: 6px; min-height: 44px; min-width: 120px; }

/* Vähennetty liike: ei välähdystä eikä pop-animaatiota — välitön paljastus. */
.reveal-backdrop.reduce .reveal-flash { display: none; }
.reveal-backdrop.reduce .reveal-card { animation: none; }

/* ---------------------------------------------------------- odds modal */

.forge-modal-backdrop { z-index: 55; }

.forge-modal {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--parchment);
  border: 1px solid var(--bronze);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(43, 33, 24, .45);
}

.fm-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--night);
  color: var(--night-text);
}
.fm-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .05em;
}
.fm-close { color: var(--night-text); font-size: 22px; line-height: 1; }

.fm-body { padding: 12px 16px 16px; }
.fm-h3 {
  margin: 14px 0 6px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
}
.fm-h3:first-child { margin-top: 2px; }
.fm-note { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); }

.odds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.odds-table td {
  padding: 7px 4px;
  border-bottom: 1px solid var(--line);
}
.odds-table tr:last-child td { border-bottom: 0; }
.odds-pct { text-align: right; font-weight: 700; white-space: nowrap; }
.odds-arrow { margin: 0 4px; color: var(--ink-soft); }

/* ---------------------------------------------------------- enchant badge */

.ench-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: .82em;
  font-weight: 700;
  color: var(--night);
  background: var(--gold);
  border-radius: 999px;
  vertical-align: middle;
}

/* Icon-only tiles (inventory bag cells) carry the enchant "+N" as a corner
   badge over the art instead of an inline pill after a name. */
.bag-cell-item { position: relative; }
.bag-cell-item .ench-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  margin-left: 0;
  padding: 0 4px;
  font-size: 10px;
  line-height: 15px;
  pointer-events: none;
}

/* ---------------------------------------------------------- item-sheet forge block */

.forge-block {
  margin-top: 12px;
  padding: 12px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.fb-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--ink);
}
.fb-glyph { width: 18px; height: 18px; color: var(--bronze); }

.fb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.fb-row:last-of-type { border-bottom: 0; }

.fb-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fb-label { font-weight: 700; font-size: 13.5px; font-variant: small-caps; letter-spacing: .03em; }
.fb-sub { font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
.fb-arrow { color: var(--ink-soft); }

.fb-btn { min-width: 84px; min-height: 40px; padding: 8px 14px; font-size: 12.5px; }

.fb-note { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-soft); }
.fb-note a { color: var(--bronze); }

/* Inline-varmistus + Juno-stativalinta forge-rivillä */
.fb-confirm { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.fb-ask { font-size: 12.5px; font-weight: 700; }
.fb-confirm-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
}
.fb-stat { min-height: 40px; padding: 8px 10px; font-size: 12px; }

/* Onnistumis-flash lakanan uudelleenavauksessa */
.item-sheet.forge-flash { animation: forge-flash .6s ease-out; }
@keyframes forge-flash {
  0% { box-shadow: 0 0 0 0 rgba(201, 162, 75, .0), 0 8px 28px rgba(43, 33, 24, .45); }
  30% { box-shadow: 0 0 0 3px rgba(201, 162, 75, .75), 0 8px 28px rgba(43, 33, 24, .45); }
  100% { box-shadow: 0 0 0 0 rgba(201, 162, 75, .0), 0 8px 28px rgba(43, 33, 24, .45); }
}

/* ---------------------------------------------------------- forge mobile */

@media (max-width: 899px) {
  .spolia-act { margin-left: 0; width: 100%; }
  .spolia-buy-btn { flex: 1; }
  .spolia-field { flex: 1; min-width: 140px; }
  /* Kosketuskohteet 44px:iin (perus 36/40px). */
  .forge-juno-stat, .forge-juno-cancel, .fc-buy { min-height: 44px; }
  /* Odds-modaalin taulukko kapealle: tiivistys + vaakascroll-varmistin. */
  .fm-body { overflow-x: auto; }
  .odds-table { font-size: 12.5px; }
  /* iOS-fokuszoomin esto — koskee myös premiumin Imperial Cache -valitsinta
     (sama .forge-select-luokka). */
  .forge-select { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .wax-cache { transition: none; }
  .wax-cache:hover { transform: none; }
  .wax-cache.cracking .wax-seal { animation: none; opacity: 0; }
  .reveal-flash { display: none; }
  .reveal-card { animation: none; }
  .item-sheet.forge-flash { animation: none; }
}

/* ============================================================
   V8 — MARKETPLACE (#/market): night-listauskortit (rarity-väri +
   glow tokens.css:stä), suodatinpalkki, sivutus, My listings,
   hintainput-popover (gear-lakana + materiaalilakana), locked-paneeli.
   Kanoniset tokenit, 44px-kohteet, mobiili, ei emojia.
   ============================================================ */

.mk-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.mk-tabbar { margin-left: auto; }

/* trades.js:n mtTabsHtml-kortti: sama .tabbar.mk-tabbar kuin market.js:ssä,
   mutta ilman gold-line-sisarta joka muualla tekee vanhemmasta flex-kontin.
   margin-left:auto ei työnnä mitään oikealle jollei vanhempi ole flex —
   ilman tätä riviä napit valuivat kortin vasempaan reunaan Marketin oikealle
   asemoitujen nappien sijaan. */
.mt-tab-card { display: flex; }

/* --- suodatinpalkki --- */
.mk-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}
.mk-kind {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mk-kindbtn {
  min-height: 38px;
  min-width: 88px;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.mk-kindbtn.active {
  color: var(--gold);
  background: var(--night);
}
.mk-fields, .mk-sort { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.mk-fields[hidden] { display: none; }
.mk-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.mk-field select, .mk-field input {
  min-height: 44px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mk-field select { min-width: 132px; }
.mk-lvlpair { display: inline-flex; align-items: center; gap: 6px; }
.mk-lvlpair input { width: 68px; }
.mk-dash { color: var(--ink-soft); }
.mk-apply { min-width: 96px; }

/* --- browse-ruudukko + kortit --- */
.mk-taxnote {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.mk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.mk-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 10px;
  color: var(--night-text);
}
.mk-card.mk-own { border-color: var(--bronze); }
/* Gear-kortin yläosa: rarity-kehystetty ikoni + nimi/meta-pino + own-badge.
   Sama laattakuvio kuin shopin .offer-icon (currentColor = rarity). */
.mk-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mk-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.mk-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid currentColor;
  border-radius: 8px;
  background: var(--night);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45);
  overflow: hidden;
  color: var(--rarity-common);
}
.mk-icon.rarity-common { color: var(--rarity-common); }
.mk-icon.rarity-uncommon { color: var(--rarity-uncommon); }
.mk-icon.rarity-rare { color: var(--rarity-rare); }
.mk-icon.rarity-epic { color: var(--rarity-epic); }
.mk-icon.rarity-legendary { color: var(--rarity-legendary); }
.mk-icon.rarity-mythic { color: var(--rarity-mythic); }
.mk-icon .mk-art { width: 100%; height: 100%; border: 0; border-radius: 0; margin: 0; }
.mk-glyph { display: grid; place-items: center; width: 62%; height: 62%; }
.mk-glyph svg { width: 100%; height: 100%; }

/* Materiaalikortin otsikkorivi (nimi + own-badge) — gear käyttää .mk-card-topia. */
.mk-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.mk-name {
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.mk-matname { color: var(--night-text); }
.mk-own-badge {
  flex: none;
  padding: 2px 8px;
  font-size: 10.5px;
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--gold);
  border: 1px solid var(--bronze);
  border-radius: 999px;
  white-space: nowrap;
}
.mk-meta {
  font-size: 11.5px;
  font-variant: small-caps;
  letter-spacing: .04em;
  color: #8A7A5F;
}
/* Statit chippeinä jotka rivittyvät — ei "+N more" -typistystä, joten ostaja
   näkee KAIKKI statit ennen ostoa (sama linja kuin shopin .offer-stats). */
.mk-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 5px;
  font-size: 12.5px;
  color: var(--night-text);
  min-height: 1.4em;
}
.mk-chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 7px;
  color: var(--night-text);
  background: var(--night-soft);
  border: 1px solid var(--night-line);
  border-radius: 999px;
  white-space: nowrap;
}
/* Materiaalikortin yksikköhinta on tekstiä, ei chippi — kumoa flex-rivitys. */
.mk-stats.mk-matunit { display: block; color: #C7B896; }
.mk-matunit { color: #C7B896; }
.mk-seller {
  font-size: 11.5px;
  color: #C7B896;
}
.mk-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}
.mk-card .price-short { color: #E07A6A; }
.mk-btn { min-width: 84px; padding: 8px 16px; font-size: 12.5px; }

/* --- sivutus --- */
.mk-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.mk-page-btn { min-width: 84px; padding: 8px 16px; font-size: 12.5px; }
.mk-page-lbl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

/* --- My listings --- */
.mk-count {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--bronze-deep);
  letter-spacing: 0;
  text-transform: none;
}
.mk-mine-list { display: grid; gap: 8px; }
.mk-mine-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mk-mine-item { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.mk-mine-item .mk-name { font-size: 14px; }
.mk-mine-sub {
  font-size: 11.5px;
  font-variant: small-caps;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.mk-mine-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 74px;
  justify-content: flex-end;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}
/* (.mk-sold-row / .mk-net / .mk-net-lbl poistettu: My listingsin "Recently sold"
   -osio korvattiin History-välilehdellä, eikä mikään renderöi näitä enää.) */

/* --- kauppahistoria (#/market/history) --- */
/* Jakaa .mk-mine-row'n flex-rivin; lisää roolimerkin (Sold/Bought), vastapuolen,
   ajan ja etumerkillisen kultasumman. Sold = kultaa sisään, Bought = ulos —
   suunta luetaan sekä merkistä (+/−) että väristä, ei pelkästä väristä. */
.mk-hist-role {
  flex: none;
  min-width: 58px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 10.5px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}
.mk-hist-role.is-sold { color: var(--bronze-deep, #6E521F); border-color: var(--gold); }
.mk-hist-role.is-bought { color: var(--ink-soft); }
.mk-hist-who,
.mk-hist-when {
  flex: none;
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.mk-hist-when { min-width: 68px; text-align: right; }
.mk-hist-gold {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 84px;
  justify-content: flex-end;
  font-weight: 700;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mk-hist-gold.is-in { color: var(--ink); }
.mk-hist-gold.is-out { color: var(--ink-soft); }
@media (max-width: 640px) {
  /* Kapealla: vastapuoli + aika siirtyvät toiselle riville (mk-mine-row on jo
     flex-wrap: wrap alle 900px), summa pysyy oikeassa laidassa. */
  .mk-hist-who, .mk-hist-when { font-size: 11px; }
  .mk-hist-role { min-width: 52px; }
}

/* --- locked-paneeli --- */
.mk-locked { text-align: center; padding: 32px 20px; }
.mk-lock-glyph { color: var(--bronze); display: flex; justify-content: center; margin-bottom: 6px; }
.mk-lock-glyph .mk-glyph { width: 44px; height: 44px; }
.mk-locked h2 {
  border: 0;
  padding: 0;
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--ink);
}
.mk-lock-note {
  max-width: 460px;
  margin: 0 auto 16px;
  font-size: 14px;
  color: var(--ink-soft);
}
.mk-lock-bar {
  max-width: 320px;
  height: 12px;
  margin: 0 auto 6px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.mk-lock-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bronze), var(--gold));
  border-radius: 999px;
  transition: width .4s ease;
}
.mk-lock-prog {
  margin: 0;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* --- listaus-popover (gear-lakana + materiaalilakana) --- */
.mk-list-pop {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 12px;
  background: var(--parchment);
  border: 1px solid var(--bronze);
  border-radius: var(--radius);
}
.mk-list-title { font-size: 13.5px; font-weight: 700; }
.mk-list-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.mk-list-field input {
  min-height: 44px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mk-list-preview { display: grid; gap: 4px; }
.mk-list-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
}
.mk-list-line span:first-child {
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--ink-soft);
}
.mk-list-fee { font-weight: 700; color: var(--crimson); }
.mk-list-recv { font-weight: 700; color: var(--laurel); }
.mk-list-fee.price-short { color: var(--crimson); }
.mk-list-hint {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}
.mk-list-acts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.mk-matsell .mk-list-field { margin-bottom: 10px; }

/* --- pouchin Sell on market -nappi --- */
.pouch-cell-sellable {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
}
.pouch-cell-sellable .pouch-name,
.pouch-cell-sellable .pouch-qty { align-self: flex-start; }
.pouch-sell {
  min-height: 32px;
  margin-top: 4px;
  padding: 5px 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--parchment);
  border: 1px solid var(--bronze);
  border-radius: 6px;
  cursor: pointer;
}
.pouch-sell:hover { background: var(--parchment-deep); }

/* --- market mobiili --- */
@media (max-width: 899px) {
  .mk-tabbar { margin-left: 0; width: 100%; }
  .mk-tabbar .tabbtn { flex: 1; }
  .mk-filters { align-items: stretch; }
  .mk-kind { width: 100%; }
  .mk-kindbtn { flex: 1; }
  .mk-fields, .mk-sort { width: 100%; }
  .mk-field, .mk-field select { width: 100%; }
  .mk-apply { width: 100%; }
  .mk-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .mk-card { padding: 10px; }
  .mk-icon { width: 38px; height: 38px; }
  .mk-card-top { gap: 8px; }
  .mk-mine-row { flex-wrap: wrap; }
  .mk-mine-time { min-width: 0; }
  /* iOS-fokuszoomin esto (16px) + level-parin kentät levenevät pykälän
     jotta 3 numeroa mahtuu isommalla fontilla. */
  .mk-field select, .mk-field input, .mk-list-field input { font-size: 16px; }
  .mk-lvlpair input { width: 76px; }
}

/* ============================================================
   V9 — Suorat kaupat (#/trades, #/trades/:id) + kaupankäyntikomposeri
   + chatin kuiskaukset ja kauppakutsukortit.
   Kanoniset tokenit, 44px-kohteet, mobiili 1 palsta, ei emojia,
   prefers-reduced-motion.
   ============================================================ */

.tr-headpanel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.tr-headpanel h2 { margin: 0; }
.tr-new { margin-left: auto; min-width: 130px; }

.tr-count {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--bronze-deep);
  letter-spacing: 0;
  text-transform: none;
}

/* --- tarjouskorttilista --- */
.tr-list { display: grid; gap: 10px; }
.tr-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.tr-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.tr-who { font-size: 14px; color: var(--ink); }
.tr-who b { color: var(--bronze-deep); }

.tr-status {
  padding: 2px 9px;
  font-size: 10.5px;
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: .05em;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.tr-status-pending { color: var(--bronze-deep); border-color: var(--bronze); }
.tr-status-accepted { color: var(--laurel); border-color: var(--laurel); }
.tr-status-declined, .tr-status-cancelled { color: var(--crimson); border-color: var(--crimson); }
.tr-status-expired { color: var(--ink-soft); }

.tr-expiry {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* --- give/want-palstat --- */
.tr-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tr-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 8px;
  color: var(--night-text);
}
.tr-side-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--gold);
}
.tr-side-empty {
  margin: 0;
  font-size: 12.5px;
  font-style: italic;
  color: #8A7A5F;
}
.tr-item { display: flex; flex-direction: column; gap: 1px; }
.tr-item-name { font-weight: 700; font-size: 13.5px; overflow-wrap: anywhere; }
.tr-item-meta {
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: .04em;
  color: #8A7A5F;
}
.tr-mat {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.tr-mat-name { font-size: 13px; color: var(--night-text); overflow-wrap: anywhere; }
.tr-mat-qty { font-weight: 700; font-size: 12.5px; color: #C7B896; }
.tr-goldrow { display: inline-flex; align-items: center; gap: 6px; }
.tr-coin { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--gold); }
.tr-goldlbl { font-size: 11.5px; color: #C7B896; }

.tr-item-gone { opacity: .5; }
.tr-gone-tag {
  font-size: 10.5px;
  font-variant: small-caps;
  letter-spacing: .04em;
  color: var(--rarity-mythic);
}

.tr-card-acts, .tr-detail-acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.tr-card-acts .btn, .tr-detail-acts .btn { min-width: 96px; padding: 8px 16px; font-size: 12.5px; }
.tr-share { text-decoration: none; }

/* --- accept-inline-varmistus --- */
.tr-confirm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}
.tr-confirm-ask { flex: 1 1 220px; font-size: 13px; font-weight: 700; color: var(--ink); }
.tr-confirm-acts { display: inline-flex; gap: 8px; }

/* --- history --- */
.tr-hist { display: grid; gap: 6px; }
.tr-hist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13.5px;
}
.tr-hist-who { margin-right: auto; }
.tr-hist-who b { color: var(--bronze-deep); }
.tr-hist-link {
  color: var(--bronze);
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none;
}
.tr-hist-link:hover { color: var(--bronze-deep); text-decoration: underline; }

/* --- detail --- */
.tr-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tr-back { color: var(--bronze); font-weight: 700; text-decoration: none; }
.tr-back:hover { color: var(--bronze-deep); text-decoration: underline; }
.tr-detail-who { margin: 0 0 12px; font-size: 15px; }
.tr-detail-who b { color: var(--bronze-deep); }
.tr-taxnote, .tr-detail .tr-taxnote {
  margin: 12px 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
}

/* --- locked --- */
.tr-locked { text-align: center; padding: 32px 20px; }
.tr-lock-wrap { color: var(--bronze); display: flex; justify-content: center; margin-bottom: 6px; }
.tr-lock-glyph { width: 44px; height: 44px; }
.tr-locked h2 {
  border: 0;
  padding: 0;
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--ink);
}
.tr-lock-note {
  max-width: 460px;
  margin: 0 auto 16px;
  font-size: 14px;
  color: var(--ink-soft);
}
.tr-lock-bar {
  max-width: 320px;
  height: 12px;
  margin: 0 auto 6px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.tr-lock-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bronze), var(--gold));
  border-radius: 999px;
  transition: width .4s ease;
}
.tr-lock-prog { margin: 0; font-weight: 700; font-size: 12.5px; color: var(--ink-soft); }

/* --- kaupankäyntikomposeri (jaettu item-sheet-lakana) --- */
.tc-sheet { max-width: 620px; }
.tc-head .is-name { display: inline-flex; align-items: center; gap: 8px; }
.tc-glyph { width: 20px; height: 20px; color: var(--gold); }
.tc-body { display: flex; flex-direction: column; gap: 14px; }

.tc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.tc-field input, .tc-field select {
  min-height: 44px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-variant: normal;
  letter-spacing: 0;
  color: var(--ink);
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tc-gold input { max-width: 180px; }

.tc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tc-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.tc-coltitle {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}
.tc-sublabel {
  font-size: 11px;
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.tc-empty { margin: 0; font-size: 12.5px; font-style: italic; color: var(--ink-soft); }

.tc-picklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.tc-pick {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 9px;
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.tc-pick-on { border-color: var(--bronze); background: #F0E6CB; }
.tc-pick input { margin-top: 3px; flex: none; width: 16px; height: 16px; }
.tc-pick-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tc-pick-name { font-weight: 700; font-size: 13.5px; overflow-wrap: anywhere; }
.on-light .tc-pick-name.rarity-common { color: var(--rarity-common-on-light); }
.tc-pick-meta {
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.tc-matlist { display: flex; flex-direction: column; gap: 6px; }
.tc-matrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tc-mat-name { flex: 1 1 auto; font-size: 13px; overflow-wrap: anywhere; }
.tc-mat-have { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.tc-matrow input {
  width: 74px;
  min-height: 40px;
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.tc-wantmat-add, .tc-wantgear-add {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tc-wantmat-add select { flex: 1 1 120px; min-height: 40px; }
.tc-wantmat-add input, .tc-wantgear-add input {
  width: 78px;
  min-height: 40px;
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tc-addbtn { min-height: 40px; min-width: 60px; padding: 6px 14px; font-size: 12px; }
.tc-wantmat-lines, .tc-wantgear-lines { display: flex; flex-direction: column; gap: 4px; }
.tc-added {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  font-size: 13px;
  background: var(--parchment);
  border: 1px solid var(--bronze);
  border-radius: var(--radius);
}
.tc-remove {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  font: 700 15px/1 var(--font-body);
  color: var(--crimson);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.tc-remove:hover { background: var(--parchment-deep); }
.tc-hint { margin: 4px 0 0; font-size: 11.5px; color: var(--ink-soft); }

.tc-summary { display: grid; gap: 3px; }
.tc-sum-line { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.tc-sum-warn { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: var(--crimson); }
.tc-sum-warn.tc-sum-info { color: var(--ink-soft); }

/* --- chat: kuiskaukset + kauppakutsukortti --- */
.chat-whisper {
  line-height: 1.35;
  overflow-wrap: anywhere;
  font-style: italic;
  color: #C7B896;
}
.chat-whisper-out { color: #A99A7A; }
.chat-w-name { color: var(--gold); font-weight: 700; font-style: normal; text-decoration: none; }
.chat-w-name:hover { text-decoration: underline; }
.chat-w-dir { font-variant: small-caps; letter-spacing: .03em; }
.chat-w-text { color: #DCCFAF; }

.chat-ti {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--night-soft);
  border: 1px solid var(--bronze);
  border-radius: var(--radius);
}
.chat-ti-icon { flex: none; color: var(--gold); }
.chat-ti-icon svg { width: 22px; height: 22px; }
.chat-ti-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat-ti-title { font-size: 12.5px; color: var(--night-text); overflow-wrap: anywhere; }
.chat-ti-link {
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}
.chat-ti-link:hover { text-decoration: underline; }

/* --- trades mobiili --- */
@media (max-width: 899px) {
  .tr-new { margin-left: 0; width: 100%; }
  .tr-cols { grid-template-columns: 1fr; }
  .tr-card-acts .btn, .tr-detail-acts .btn { flex: 1; min-width: 0; }
  .tc-sheet { max-width: 100%; }
  .tc-cols { grid-template-columns: 1fr; }
  .tc-gold input { max-width: none; }
  /* Poistonapin kosketuskohde 40px:iin negatiivimarginaaleilla — rivi (~34px)
     pysyy visuaalisesti ennallaan, osuma-alue nelinkertaistuu. */
  .tc-remove { width: 40px; height: 40px; margin: -8px -8px -8px 0; }
  /* iOS zoomaa fokusoituun kenttään jos fontti < 16px — estetään; qty-kentät
     levenevät pykälän jotta 4 numeroa mahtuu isommalla fontilla. */
  .tc-field input, .tc-field select, .tc-wantmat-add select { font-size: 16px; }
  .tc-matrow input, .tc-wantmat-add input, .tc-wantgear-add input { font-size: 16px; width: 84px; }
  .tc-matrow { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-lock-fill { transition: none; }
}

/* ============================================================ V10 PREMIUM (#/premium) */
/* Imperial Treasury -taustan (public/assets/scenes/premium.jpg) esiin jättävä
   asettelu: työpöydällä ohjauspaneeli dokataan oikeaan reunaan (imm-stack-right),
   jolloin treasury-sali (kupoli, aarrearkut, keskellä punnitseva rahastonhoitaja)
   näkyy vasemmalla/keskellä. Mobiilissa käytetään jaettua .imm-scene-cards-reflowia
   (kuva-kaistale + täysleveät kortit), joten nämä ovat vain min-width:900px. */
@media (min-width: 900px) {
  .premium-panel { width: min(660px, 46vw); }
  .premium-scene .imm-card {
    background: rgba(22, 15, 8, .90);
    border-color: rgba(201, 162, 75, .38);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .6);
  }
  /* Ei venytetä pakettikorttia koko korkeuteen — jättäisi ison tyhjän paneelin. */
  .premium-scene .aur-shop { flex: 0 1 auto; }
  /* Kapeampi paneeli → paketit 2 sarakkeeseen (auto-fitin sijaan). */
  .premium-scene .aur-pkg-grid { grid-template-columns: 1fr 1fr; }
  /* Luettavuus-scrim panelin taakse oikeaan reunaan (kuvan yli, panelin alle). */
  .premium-scene::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, rgba(20, 14, 8, 0) 40%, rgba(20, 14, 8, .30) 62%, rgba(20, 14, 8, .55) 100%);
  }
}

/* ============================================================ MAP SIDE PANEL (shared) */
/* Jaettu kelluva, piilotettava oikean reunan paneeli scene-taustakuvan päälle:
   Expeditions (#/expeditions) JA gather-ammatit (#/professions/*). Kun taustakuva
   on itse sisältöä (kartta + pinnit), paneeli on kapea + läpikuultava jotta kuva
   näkyy selvästi läpi; piilotusnappi liu'uttaa sen scenen oikean reunan taakse
   (kahva jää näkyviin), jolloin scene pysyy lähes kokonaan peittämättömänä. */
.map-panel {
  width: 300px;
  transition: transform .22s ease;
}
/* .imm-card on flex: 0 1 auto (kutistuva) + overflow-y: auto, joten kun pinon
   fill-kortti (node-/reseptilista) on pitkä, KAIKKI kortit kutistuivat ja
   identiteetti- + PE-kortti leikkautuivat kesken rivin omine vierityspalkkeineen.
   Se on vastoin .imm-stackin omaa sääntöä (ks. kommentti .imm-stackin luona):
   luontainen koko ensin, VAIN .imm-card-fill vierittää. Lukitaan se tässä:
   fill-kortti imee jäljelle jäävän tilan ja on pinon ainoa vierittäjä.
   (Tämä leikkautuminen oli syy jonka takia gather-sceneen oli alun perin
   lisätty .imm-flow — se korjasi vierityksen mutta rikkoi kartan.) */
.map-panel > .imm-card:not(.imm-card-fill) { flex: 0 0 auto; overflow-y: visible; }
.map-panel .zone-grid { grid-template-columns: 1fr; }
.map-panel-toggle {
  position: absolute;
  left: -18px;
  top: 16px;
  z-index: 4;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--night);
  border: 1px solid var(--bronze);
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.map-panel-toggle:hover { background: var(--night-soft); }
@media (prefers-reduced-motion: reduce) {
  .map-panel { transition: none; }
}
@media (min-width: 900px) {
  /* Piilotus vain työpöydällä — mobiilissa .imm-stack reflowaa staattiseksi
     täysleveäksi pinoksi, jossa vaakasiirto työntäisi paneelin ruudun ulos. */
  .map-panel.collapsed { transform: translateX(calc(100% - 40px)); }
  .expeditions-scene .imm-card,
  .prof-gather-scene .imm-card {
    background: rgba(22, 15, 8, .72);
    border-color: rgba(201, 162, 75, .34);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
  }
  .expeditions-scene::before,
  .prof-gather-scene::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, rgba(20, 14, 8, 0) 55%, rgba(20, 14, 8, .22) 74%, rgba(20, 14, 8, .42) 100%);
  }
}
@media (max-width: 899px) {
  /* Mobiilissa scene reflowaa banneriksi + staattiseksi täysleveäksi pinoksi
     (jaettu .imm-scene-cards-reflow): paneeli täyttää leveyden, eikä
     piilotusnappia tarvita (ei overlay-tilaa jota kätkeä). Tulee LÄHDEKOODISSA
     .map-panelin oletusleveyden JÄLKEEN → voittaa saman spesifisyyden. */
  .map-panel { width: 100%; }
  .map-panel-toggle { display: none; }
}

.stat-aurei { text-decoration: none; color: inherit; cursor: pointer; }
.stat-aurei:hover { color: var(--gold); }
.aur-coin, .aur-balance {
  display: inline-flex; align-items: center; gap: 5px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.aur-balance {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: var(--gold); letter-spacing: .04em;
}
.aur-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* view-title/view-sub eivät koskaan saaneet omaa tyyliä (perivät selaimen
   oletus-h1:n) — huomaamatonta täysleveällä sivulla, mutta rajaa nyt korkean
   oletusmarginaalin takia korttia kun se on kompakti .imm-card. */
.view-title { margin: 0 0 4px; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: .04em; }
.view-sub { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.imm-card .view-sub { color: var(--night-text); opacity: .8; }

.aur-notice {
  margin: 0 0 12px; padding: 9px 12px; border-radius: var(--radius);
  background: var(--night-soft); border: 1px solid var(--bronze);
  color: var(--night-text); font-size: 13.5px;
}
.aur-notice-bonus { border-color: var(--gold); }
.aur-notice-lock { border-color: var(--rarity-mythic); color: #F2C7C7; }

.aur-pkg-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
.aur-pkg {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 16px 12px; border: 1px solid var(--bronze); border-radius: var(--radius);
  background: var(--night); box-shadow: var(--shadow, 0 2px 6px rgba(43,33,24,.18));
}
.aur-pkg-amount { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--gold); }
.aur-pkg-amount .icon-sm { width: 20px; height: 20px; }
.aur-pkg-bonus { font-size: 11.5px; color: var(--night-text); opacity: .8; }
.aur-pkg-name { font-size: 12.5px; color: var(--night-text); letter-spacing: .03em; }
.aur-buy { width: 100%; margin-top: 4px; min-height: 44px; font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; }

.aur-cache {
  padding: 14px; border: 1px solid var(--bronze); border-radius: var(--radius);
  background: var(--night); margin-bottom: 16px;
}
.aur-cache-head h3 { margin: 0 0 4px; font-family: var(--font-display); color: var(--gold); letter-spacing: .05em; }
.aur-cache-head p { margin: 0 0 12px; font-size: 13px; color: var(--night-text); }
.aur-cache-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.aur-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--night-text); }
.aur-cache-controls .btn { min-height: 44px; }
.aur-imp-buy { display: inline-flex; align-items: center; gap: 7px; }
.aur-cache-note { margin: 10px 0 0; font-size: 12px; color: var(--night-text); opacity: .85; }
.aur-cache-note a, .aur-compliance-links a { color: var(--gold); }

.aur-sub { margin: 4px 0 10px; font-family: var(--font-display); color: var(--gold); letter-spacing: .05em; font-size: 15px; }
.aur-item-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.aur-item {
  display: flex; flex-direction: column; gap: 6px; padding: 12px;
  border: 1px solid var(--bronze); border-radius: var(--radius); background: var(--night);
}
.aur-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aur-item-name { font-weight: 700; color: var(--night-text); font-size: 13.5px; }
.aur-item-price { color: var(--gold); }
.aur-item-blurb { margin: 0; font-size: 12px; color: var(--night-text); opacity: .85; flex: 1; }
.aur-spend { min-height: 40px; }

.aur-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.aur-odds-table, .aur-history-table { width: 100%; border-collapse: collapse; }
.aur-odds-table th, .aur-odds-table td, .aur-history-table td {
  padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--bronze);
  font-size: 13px; color: var(--night-text);
}
.aur-odds-table th { font-family: var(--font-display); color: var(--gold); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.aur-odds-table td.rarity-common { color: var(--rarity-common); }
.aur-odds-table td.rarity-uncommon { color: var(--rarity-uncommon); }
.aur-odds-table td.rarity-rare { color: var(--rarity-rare); }
.aur-odds-table td.rarity-epic { color: var(--rarity-epic); }
.aur-odds-table td.rarity-legendary { color: var(--rarity-legendary); }
.aur-odds-table td.rarity-mythic { color: var(--rarity-mythic); font-weight: 700; }
.aur-compliance { margin: 12px 0 4px; font-size: 12px; color: var(--night-text); opacity: .9; line-height: 1.5; }
.aur-compliance-links { margin: 0; font-size: 12px; }
.aur-delta.aur-pos { color: var(--rarity-uncommon); font-variant-numeric: tabular-nums; }
.aur-delta.aur-neg { color: #C98B7A; font-variant-numeric: tabular-nums; }
.aur-history-table td:last-child { text-align: right; }

/* FIX: odds + history olivat vaaleita .panel-paneeleja mutta sisältö käytti
   vaaleaa --night-text -tekstiä + rarity-värejä (jotka on suunniteltu TUMMILLE
   night-paneeleille; common=valkoinen) → näkymätöntä. Tehdään näistä tummat kuten
   muutkin premium-kortit; otsikko vaaleaksi (kullaksi) tummalle taustalle. */
.aur-odds, .aur-history { background: var(--night); border-color: var(--bronze); }
.aur-odds h2, .aur-history h2 { color: var(--gold); border-bottom-color: var(--bronze); }

@media (max-width: 899px) {
  .aur-two-col { grid-template-columns: 1fr; }
  .aur-cache-controls { flex-direction: column; align-items: stretch; }
  .aur-cache-controls .btn { width: 100%; justify-content: center; }
  /* Kosketuskohde 44px:iin (perus 40px). */
  .aur-spend { min-height: 44px; }
  /* Odds/History-taulukot kapealle: tiivistys + vaakascroll-varmistin
     (.lb-scroll-kaava) — kortit eivät saa leventää sivua. */
  .aur-odds, .aur-history { overflow-x: auto; }
  .aur-odds-table th, .aur-odds-table td, .aur-history-table td {
    padding: 6px; font-size: 12.5px; overflow-wrap: anywhere;
  }
}

/* ============================================================ V11 auth footer + Turnstile */
.auth-legal {
  margin: 18px 0 0; text-align: center; font-size: 12.5px;
  display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap;
}
.auth-legal a { color: #B8A98C; text-decoration: none; }
.auth-legal a:hover { color: var(--gold); text-decoration: underline; }
.cf-turnstile-mount { margin: 4px 0 14px; min-height: 0; display: flex; justify-content: center; }

/* ============================================================ forge dual-currency (gold/aurei) */
.fc-foot-dual { display: flex; gap: 8px; }
.fc-foot-dual .fc-buy {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 40px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fc-buy .aur-ico { width: 16px; height: 16px; }
.aurword { color: var(--gold); font-weight: 600; }
.coinword { color: var(--bronze-deep, #6E521F); font-weight: 600; }

/* ============================================================ Ascension ritual */
.forge-ascend .ascend-info { margin: 4px 0 12px; font-size: 14px; color: var(--night-text, #EDE4CF); }
.ascend-fervor { color: var(--gold); font-weight: 700; }
.ascend-plus { color: var(--rarity-uncommon); font-weight: 700; }

.ascend-backdrop {
  display: flex; align-items: center; justify-content: center;
  /* forge.jpg näkyy himmeänä rituaalin takana (sama alttari mistä juuri
     klikkasit) — tumma radial-gradient scrim päällä pitää kortin luettavana. */
  background-image:
    radial-gradient(120% 90% at 50% 40%, rgba(20,14,6,.86), rgba(10,7,3,.95)),
    url('/assets/scenes/forge.jpg');
  background-size: cover, cover;
  background-position: center, center 30%;
}
.ascend-stage {
  position: relative; width: min(440px, 92vw); padding: 26px 22px 22px; text-align: center;
  border: 1px solid var(--bronze); border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, #2A2114, #1A140C);
  box-shadow: 0 10px 44px rgba(0,0,0,.6);
}
.ascend-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.ascend-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: .03em; }
.ascend-arrow { font-size: 14px; color: var(--night-text); }

.ascend-core { position: relative; width: 150px; height: 150px; margin: 4px auto; display: grid; place-items: center; }
.ascend-glow {
  position: absolute; width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,75,.95), rgba(201,162,75,.18) 60%, transparent 72%);
  filter: blur(2px); opacity: .45;
}
.ascend-ring { position: absolute; width: 118px; height: 118px; border-radius: 50%; border: 2px dashed rgba(201,162,75,.5); opacity: .5; }
.ascend-spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); opacity: 0; }

.ascend-bar { height: 8px; border-radius: 5px; margin: 14px auto 2px; width: 82%; background: rgba(0,0,0,.4); border: 1px solid var(--bronze); overflow: hidden; }
.ascend-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--bronze), var(--gold)); box-shadow: 0 0 10px var(--gold); }

.ascend-stage.charging .ascend-fill { animation: ascend-fill 1.8s cubic-bezier(.45,.05,.55,1) forwards; }
.ascend-stage.charging .ascend-glow { animation: ascend-pulse .55s ease-in-out infinite alternate; }
.ascend-stage.charging .ascend-ring { animation: ascend-spin 2.2s linear infinite; }
@keyframes ascend-fill { from { width: 0; } to { width: 100%; } }
@keyframes ascend-pulse { from { opacity: .45; transform: scale(.85); } to { opacity: 1; transform: scale(1.28); } }
@keyframes ascend-spin { to { transform: rotate(360deg); } }

.ascend-stage.reveal-success .ascend-glow { opacity: 1; animation: ascend-burst .7s ease-out forwards; }
.ascend-stage.reveal-success .ascend-ring { border-color: var(--gold); opacity: 1; box-shadow: 0 0 24px var(--gold); }
@keyframes ascend-burst { 0% { transform: scale(.6); opacity: 1; } 60% { transform: scale(2.4); opacity: .9; } 100% { transform: scale(3.3); opacity: 0; } }
.ascend-stage.reveal-success::after { content: ""; position: absolute; inset: 0; pointer-events: none; animation: ascend-flash .6s ease-out forwards; }
@keyframes ascend-flash { 0% { box-shadow: inset 0 0 0 rgba(201,162,75,0); } 25% { box-shadow: inset 0 0 70px rgba(201,162,75,.6); } 100% { box-shadow: inset 0 0 0 rgba(201,162,75,0); } }

.ascend-stage.reveal-fail .ascend-glow { opacity: .15; transform: scale(.6); background: radial-gradient(circle, rgba(150,60,50,.5), transparent 65%); transition: all .5s; }
.ascend-stage.reveal-fail .ascend-ring { border-color: rgba(150,70,60,.5); opacity: .3; }

.ascend-result { min-height: 40px; margin-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ascend-msg { margin: 0; font-size: 16px; }
.ascend-msg.success { font-family: var(--font-display); font-weight: 700; letter-spacing: .03em; }
.ascend-msg.fail { color: #D9B7A9; font-size: 14px; }
.ascend-done { min-width: 140px; min-height: 42px; }

/* Reroll keep/take -päätös: nykyiset vs uudet affiksit + kaksi valintaa. */
.reroll-decide { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.reroll-compare {
  display: flex; align-items: stretch; justify-content: center; gap: 12px;
  flex-wrap: wrap; width: 100%;
}
.reroll-col {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  padding: 8px 12px; border: 1px solid var(--night-line); border-radius: 8px;
  background: rgba(20, 15, 8, .4); min-width: 120px;
}
.reroll-col-title {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--night-muted, #b7a98c);
}
.reroll-col .ritual-affixes { margin-left: 0; flex-direction: column; gap: 4px; }
.reroll-none { opacity: .6; font-style: italic; }
.reroll-arrow { align-self: center; font-size: 20px; color: var(--bronze); }
.reroll-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.reroll-take, .reroll-keep { min-width: 140px; min-height: 42px; }
.reroll-note { margin: 0; font-size: 12px; color: var(--night-muted, #b7a98c); }
.reroll-err { margin: 4px 0 0; font-size: 13px; color: #D9B7A9; }
.ascend-mute {
  position: absolute; top: 8px; right: 10px; background: transparent; border: 1px solid var(--bronze);
  color: var(--night-text); border-radius: 4px; font-size: 11px; padding: 3px 8px; cursor: pointer;
}
.ascend-mute[aria-pressed="true"] { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .ascend-stage.charging .ascend-fill { animation: none; width: 100%; }
  .ascend-stage.charging .ascend-glow, .ascend-stage.charging .ascend-ring,
  .ascend-stage.reveal-success .ascend-glow, .ascend-stage.reveal-success::after { animation: none; }
}

/* ============================================================ profession action loader */
.prof-action-loader {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%);
  z-index: 50; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; max-width: min(92vw, 360px);
  background: var(--night); border: 1px solid var(--bronze); border-radius: 999px;
  box-shadow: 0 6px 22px rgba(0,0,0,.42);
  animation: pal-in .18s ease-out;
}
.prof-action-loader.pal-out { animation: pal-fade .2s ease-in forwards; }
@keyframes pal-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes pal-fade { to { opacity: 0; } }
.pal-label { flex: 1; min-width: 0; font-size: 13px; color: var(--night-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-bar { flex: none; width: 84px; height: 6px; border-radius: 4px; background: rgba(0,0,0,.4); border: 1px solid var(--bronze); overflow: hidden; }
.pal-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--bronze), var(--gold)); animation-name: pal-fill; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes pal-fill { from { width: 0; } to { width: 100%; } }
.pal-mute { flex: none; background: transparent; border: none; color: var(--gold); font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.pal-muted .pal-mute { color: var(--night-text); opacity: .5; text-decoration: line-through; }
@media (prefers-reduced-motion: reduce) {
  .prof-action-loader { animation: none; }
  .pal-fill { animation: none; width: 100%; }
}
@media (max-width: 899px) { .prof-action-loader { bottom: 76px; } }

/* Premium — purchase success banner (palataan Stripestä status=success) */
.aur-success { text-align: center; border: 1px solid var(--gold); }
.aur-success-title { font-family: 'Cinzel', Georgia, serif; color: var(--gold); margin: 0 0 .4rem; }
.aur-success-body { margin: 0 0 .8rem; }
.aur-success-pending .aur-success-title { color: var(--night-text); }

/* ============================================================ Patch notes + Roadmap
   Julkiset sivut news.js (aikajana) + roadmap.js (status-lauta). Sisältö on
   night-paletin .imm-card-paneelissa. Reuse .pill / .q-bar / .lvl-badge. */

/* Kategoriapillit (jaettu patch-item-tyyppien kesken) — sama kaava kuin .tier-*/.res-*. */
.pill.cat-new,
.pill.cat-feature { background: var(--laurel); color: #F2EFE8; }
.pill.cat-balance { background: var(--gold); color: var(--night); }
.pill.cat-fix { background: var(--crimson); color: #F2EFE8; }
.pill.cat-content { background: var(--bronze); color: #F7F2E4; }
.pill.cat-economy { background: var(--night-soft); color: var(--gold); border: 1px solid var(--bronze); }
.pill.cat-qol { background: var(--night-soft); color: var(--night-text); border: 1px solid var(--night-line); }

/* --- News: pystysuora aikajana --- */
.pn-timeline { position: relative; margin: 4px 0 0; padding-left: 26px; }
.pn-timeline::before { content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: linear-gradient(var(--bronze), var(--night-line)); border-radius: 2px; }
.pn-entry { position: relative; padding: 0 0 22px; }
.pn-entry:last-child { padding-bottom: 4px; }
.pn-node { position: absolute; left: -26px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--night); border: 2px solid var(--gold); box-shadow: 0 0 0 3px var(--night); }
.pn-head { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 4px; }
.pn-date { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--night-text); opacity: .75; }
.pn-version { font-size: 10.5px; }
.pn-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--gold); margin: 2px 0 3px; letter-spacing: .02em; }
.pn-summary { margin: 0 0 8px; color: var(--night-text); opacity: .85; font-size: 13.5px; }
.pn-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pn-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.4; }
.pn-item .pill { margin-top: 1px; flex: none; }
.pn-item-text { color: var(--night-text); }
.pn-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--night-line); }

/* --- Roadmap: status-sarakelauta --- */
.rm-intro { margin: 0 0 14px; color: var(--night-text); opacity: .8; font-size: 13.5px; }
.rm-intro a { color: var(--gold); }
.rm-board { display: grid; grid-template-columns: repeat(var(--rm-cols, 3), 1fr); gap: 14px; align-items: start; }
.rm-col { background: var(--night-soft); border: 1px solid var(--night-line); border-radius: 9px; padding: 10px; }
.rm-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding-bottom: 7px; border-bottom: 2px solid var(--night-line); }
.rm-col-label { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.rm-count { font-size: 11px; font-weight: 700; color: var(--night-text); opacity: .6; background: var(--night); border-radius: 999px; padding: 1px 8px; }
.rm-col-body { display: flex; flex-direction: column; gap: 10px; }
.rm-card { background: var(--night); border: 1px solid var(--night-line); border-left: 3px solid var(--bronze); border-radius: 7px; padding: 10px 11px; }
.rm-col-in-progress .rm-card { border-left-color: var(--gold); }
.rm-col-live .rm-card, .rm-card.status-live { border-left-color: var(--laurel); }
.rm-card-head { display: flex; align-items: center; gap: 8px; }
.rm-card-icon { width: 22px; height: 22px; flex: none; }
.rm-card-title { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--night-text); margin: 0; letter-spacing: .01em; }
.rm-card-blurb { margin: 6px 0 8px; color: var(--night-text); opacity: .8; font-size: 12.5px; line-height: 1.4; }
.rm-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rm-eta { font-size: 11px; font-weight: 700; color: var(--night-text); opacity: .65; }
.rm-bar { height: 8px; margin-top: 9px; background: var(--night-soft); border-color: var(--night-line); }
.rm-bar .fill { background: var(--gold); }
.rm-empty { margin: 4px 2px; color: var(--night-text); opacity: .5; font-size: 12.5px; font-style: italic; }

/* Ehdotuslohko roadmapin alla (views/roadmap.js). Nappi avaa lomakkeen samaan
   paikkaan (ei modaalia): sivu on lyhyt, joten inline pitää kontekstin näkyvissä. */
.rm-suggest {
  margin-top: 18px;
  padding: 14px;
  background: var(--night-soft);
  border: 1px solid var(--night-line);
  border-radius: 9px;
}
.rm-suggest-head { margin-bottom: 10px; }
.rm-suggest-title { margin: 0 0 3px; font-family: var(--font-display); font-size: 15px; color: var(--gold); }
.rm-suggest-blurb { margin: 0; font-size: 12.5px; color: var(--night-text); opacity: .75; }
a.rm-suggest-btn { display: inline-block; text-decoration: none; }
.rm-suggest-form { display: flex; flex-direction: column; gap: 8px; }
.rm-suggest-label {
  font-size: 11.5px; font-variant: small-caps; letter-spacing: .06em;
  color: var(--night-text); opacity: .7;
}
.rm-suggest-text {
  width: 100%; resize: vertical; min-height: 88px; padding: 9px 11px;
  background: var(--night); border: 1px solid var(--night-line); border-radius: 7px;
  color: var(--night-text); font-family: var(--font-body); font-size: 14px; line-height: 1.45;
}
.rm-suggest-text:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.rm-suggest-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.rm-suggest-count { font-size: 11.5px; color: var(--night-text); opacity: .55; font-variant: small-caps; }
.rm-suggest-count.rm-suggest-short { color: var(--gold); opacity: .9; }
.rm-suggest-actions { display: flex; gap: 8px; }
.rm-suggest-send:disabled { opacity: .5; cursor: not-allowed; }

/* Roadmap-tagipillit */
.pill.rmtag-combat { background: var(--crimson); color: #F2EFE8; }
.pill.rmtag-content { background: var(--bronze); color: #F7F2E4; }
.pill.rmtag-social { background: var(--laurel); color: #F2EFE8; }
.pill.rmtag-economy { background: var(--gold); color: var(--night); }
.pill.rmtag-retention { background: var(--night-soft); color: var(--gold); border: 1px solid var(--bronze); }
.pill.rmtag-qol { background: var(--night-soft); color: var(--night-text); border: 1px solid var(--night-line); }
.pill.rmtag-feature { background: var(--laurel); color: #F2EFE8; }

/* Desktop: leveämmät paneelit (kuten leaderboard). Mobiilissa .imm-scene-cards reflow. */
@media (min-width: 900px) {
  .news-scene .news-panel { width: min(760px, 62vw); }
  .roadmap-scene .roadmap-panel { width: min(1120px, 84vw); }
}
@media (max-width: 899px) {
  .rm-board { grid-template-columns: 1fr; }
  /* iOS-fokuszoomin esto (16px) — sama linja kuin market/auth-kentissä. */
  .rm-suggest-text { font-size: 16px; }
  .rm-suggest-foot { justify-content: flex-end; }
  .rm-suggest-count { width: 100%; }
}

/* ============================================================
   Guilds (#/guild) — hakemisto, profiili, bank, loki + kilta-tagi/crest.
   Uudelleenkäyttää imm-*-kuoren, .lb-table-tyylit ja rarity-tokenit.
   ============================================================ */

.btn-sm { padding: 5px 11px; font-size: 12px; min-height: 0; }

/* Vaakuna + tagi -identiteettisolu */
.guild-crest { display: inline-block; vertical-align: middle; flex: none; }
.guild-tag {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .04em;
  color: var(--gold);
}
.guild-idcell { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.guild-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Leaderboard-nimen kilta-tagi */
.lb-guild-tag { color: var(--gold); font-weight: 700; margin-right: 5px; font-size: 12.5px; }

/* Hakemistotaulu perii .lb-tablen; sallitaan crest solussa */
.guild-dir-table .lb-name a { display: inline-flex; align-items: center; }
.guild-policy-open { color: var(--rarity-uncommon); }
.guild-policy-apply { color: var(--gold); }
.guild-policy-invite { color: var(--ink-soft); }
.imm-card .guild-policy-open { color: var(--rarity-uncommon); }

/* Perustamiskortti */
.guild-create-card .guild-field { display: block; margin: 0 0 10px; }
.guild-field > span {
  display: block; margin: 0 0 4px; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); font-family: var(--font-display);
}
.guild-field input[type=text], .guild-field input[type=number], .guild-field select, .guild-field textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--parchment); color: var(--ink); font: inherit; box-sizing: border-box;
}
.guild-create-preview { text-align: center; margin: 0 0 12px; }
.guild-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.guild-pick, .guild-swatch {
  width: 40px; height: 40px; padding: 3px; border: 2px solid var(--line);
  border-radius: var(--radius); background: var(--parchment); cursor: pointer; line-height: 0;
}
.guild-swatch { width: 30px; height: 30px; }
.guild-pick.on, .guild-swatch.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,162,75,.3); }
.guild-create-cost { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.guild-create-note { margin: 4px 0 0; }

/* Ylätason kilta-välilehdet (Oma kilta / Hakemisto / Perusta): keskitetty rivi
   pinon yläpuolella. Linkkeinä (a.tabbtn) -> ei alleviivausta. */
.guild-top-tabbar {
  margin: 0 0 4px;
  align-self: center;
  flex-wrap: wrap;
  justify-content: center;
}
.guild-top-tabbar .tabbtn { text-decoration: none; }

/* Profiilin otsikko */
.guild-head { display: flex; align-items: center; gap: 14px; }
.guild-head-main { flex: 1 1 auto; min-width: 0; }
.guild-head-main h2 { margin: 0; border: 0; padding: 0; text-transform: none; letter-spacing: .02em; font-size: 20px; color: var(--night-text); }
.imm-card .guild-head-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: 12.5px; color: var(--night-text); opacity: .75; }
.guild-motd {
  margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--gold);
  background: var(--parchment-deep); color: var(--ink);
  border-radius: 0 var(--radius) var(--radius) 0; font-size: 13.5px;
}
.guild-motd-empty { color: var(--ink-soft); font-style: italic; }
.guild-note-inline { font-size: 12.5px; color: var(--ink-soft); align-self: center; }

.guild-settings { margin-top: 12px; }
.guild-settings summary { cursor: pointer; font-family: var(--font-display); font-size: 12.5px; color: var(--ink-soft); }
.guild-settings > * { margin-top: 8px; }
.guild-danger { color: var(--crimson); border-color: var(--crimson); }

/* Roster */
.guild-roster .lb-name a { display: inline-flex; align-items: center; }
.guild-rank { font-size: 12px; font-weight: 700; }
.guild-rank-leader { color: var(--gold); }
.guild-rank-officer { color: var(--bronze); }
.guild-rank-member { color: var(--ink-soft); }
.guild-actions { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; align-items: center; min-height: 34px; }
/* Yhtenäinen rivikorkeus: nappirivit eivät venytä osaa riveistä (poistaa
   näennäisen "viivabugin" tyhjien toimintosolujen kohdalla). */
.guild-roster td { vertical-align: middle; }
.guild-roster .guild-actions-th { width: 1%; }
.guild-invite-row { display: flex; gap: 8px; margin-top: 12px; }
.guild-invite-row input { flex: 1 1 auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--parchment); color: var(--ink); font: inherit; }

/* Bank */
.guild-bank-total { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 6px; margin: 4px 0 12px; }
.guild-bank-row { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.guild-bank-row > span { min-width: 72px; font-family: var(--font-display); font-size: 12.5px; color: var(--ink-soft); }
.guild-bank-row input { width: 120px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--parchment); color: var(--ink); font: inherit; }

/* Loki */
.guild-log { list-style: none; margin: 0; padding: 0; }
.guild-log li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.guild-log li:last-child { border-bottom: 0; }
.guild-log-actor { color: var(--ink-soft); white-space: nowrap; }

/* Chat-kanavatabit (Global | Guild) */
.chat-tabs { display: flex; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--night-line); background: var(--night); }
.chat-tab {
  flex: 1 1 auto; padding: 5px 8px; font-family: var(--font-display); font-size: 11.5px;
  letter-spacing: .06em; color: var(--night-text); background: var(--night-soft);
  border: 1px solid var(--night-line); border-radius: var(--radius); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.chat-tab.active { color: var(--gold); border-color: var(--bronze); }

/* Kanavatabin lukematon-badge (esim. Guild-tab kun on uusia killan viestejä). */
.chat-tabbadge {
  min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px;
  background: var(--crimson); color: #F2EFE8;
  font: 700 10px/16px var(--gl-font-num, 'Segoe UI', system-ui, sans-serif);
  text-align: center;
}
.chat-tabbadge[hidden] { display: none; }

@media (max-width: 899px) {
  .guild-head { flex-wrap: wrap; }
  .guild-actions { justify-content: flex-start; }
  .guild-bank-row input, .guild-invite-row input { width: 100%; }
}

/* Guild-näkymän kortit ovat tummia (imm-scene-cards) -> muted-tekstit vaalennetaan
   luettaviksi (ink-soft jäisi liian himmeäksi tummalla). Scoped .guild-view'iin. */
.guild-view .guild-field > span,
.guild-view .guide-note,
.guild-view .guild-note-inline,
.guild-view .guild-log-actor,
.guild-view .guild-settings summary { color: var(--night-text); opacity: .72; }
.guild-view .guild-bank-row > span { color: var(--night-text); opacity: .8; }

/* ---- Guild stash + buffit (Faasi 2) ---- */
.guild-stash-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.guild-stash-tabbtn { padding: 5px 12px; }
/* Guild stash + deposit picker: same rarity-framed icon tiles as the character
   inventory (.bag-grid-items / .bag-cell-item / .bag-icon — set in the markup).
   Withdraw is a small corner button revealed on hover; the item name + iLvl +
   depositor live in the hover tooltip / aria-label. */
.guild-stash-cell, .guild-dep-cell { position: relative; }
.guild-dep-cell { cursor: pointer; }
.guild-stash-wd {
  position: absolute; top: 3px; right: 3px; width: 19px; height: 19px;
  display: grid; place-items: center; padding: 0; line-height: 1; font-size: 13px; font-weight: 700;
  border: 1px solid var(--bronze); border-radius: 5px;
  background: var(--night); color: var(--parchment); cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.guild-stash-cell:hover .guild-stash-wd, .guild-stash-cell:focus-within .guild-stash-wd { opacity: 1; }
.guild-stash-wd:hover { border-color: var(--gold); color: var(--gold); }

.guild-buff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.guild-buff-card {
  padding: 12px; background: var(--parchment); border: 1px solid var(--line);
  border-radius: var(--radius); border-top: 3px solid var(--bronze);
}
.guild-buff-card.is-active { border-top-color: var(--rarity-uncommon); }
.guild-buff-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.guild-buff-head b { color: var(--ink); font-size: 14px; }
.guild-buff-timer { font-family: var(--font-display); font-size: 12px; color: var(--rarity-uncommon); font-weight: 700; }
.guild-buff-desc { margin: 6px 0 10px; font-size: 12.5px; color: var(--ink-soft); }
.guild-buff-on { font-family: var(--font-display); font-size: 11.5px; letter-spacing: .06em; color: var(--rarity-uncommon); }

/* ============================================================ Level-up celebration
   RuneScape-henkinen tasonnousun juhla (views/levelUpCelebration.js).
   Iso overlay hahmotasolle, kevyt banneri ammattitaidolle. Kunnioittaa
   prefers-reduced-motionia (.reduce poistaa animaatiot). */
.lvlup-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(36,28,18,.72), rgba(36,28,18,.92));
  animation: lvlup-fade-in .28s ease-out;
  cursor: pointer;
}
.lvlup-backdrop.closing { animation: lvlup-fade-out .26s ease-in forwards; }
.lvlup-card {
  position: relative; text-align: center; padding: 32px 40px;
  animation: lvlup-pop .5s cubic-bezier(.2,1.3,.5,1) both;
}
.lvlup-rays {
  position: absolute; left: 50%; top: 46%; width: 520px; height: 520px;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, rgba(201,162,75,.28) 0 6deg, transparent 6deg 18deg);
  border-radius: 50%;
  animation: lvlup-spin 9s linear infinite;
  pointer-events: none; z-index: 0;
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
          mask: radial-gradient(circle, #000 30%, transparent 70%);
}
.lvlup-laurel { position: relative; z-index: 1; width: 76px; height: 76px; margin: 0 auto 4px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.lvlup-eyebrow {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; font-size: 15px; color: var(--gold);
}
.lvlup-level {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 900; line-height: 1;
  font-size: clamp(72px, 18vw, 132px);
  color: #F5EEDD; text-shadow: 0 0 26px rgba(201,162,75,.75), 0 3px 8px rgba(0,0,0,.5);
  animation: lvlup-glow 1.6s ease-in-out infinite alternate;
}
.lvlup-sub { position: relative; z-index: 1; margin-top: 4px; color: #E7DBBC; font-size: 16px; }
.lvlup-bonus {
  position: relative; z-index: 1; margin-top: 12px; display: inline-block;
  padding: 6px 16px; border: 1px solid var(--gold); border-radius: 999px;
  color: var(--gold); font-family: var(--font-display); font-weight: 700; font-size: 13px;
  background: rgba(201,162,75,.1);
}
.lvlup-hint { position: relative; z-index: 1; margin-top: 20px; font-size: 12px; color: var(--ink-soft); letter-spacing: .05em; }
.lvlup-backdrop.reduce, .lvlup-backdrop.reduce .lvlup-card { animation: none; }
.lvlup-backdrop.reduce .lvlup-rays, .lvlup-backdrop.reduce .lvlup-level { animation: none; }

@keyframes lvlup-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lvlup-fade-out { to { opacity: 0; } }
@keyframes lvlup-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@keyframes lvlup-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes lvlup-glow {
  from { text-shadow: 0 0 18px rgba(201,162,75,.5), 0 3px 8px rgba(0,0,0,.5); }
  to   { text-shadow: 0 0 34px rgba(201,162,75,.95), 0 3px 8px rgba(0,0,0,.5); }
}

/* Taidon virstanpylväs (25/50/75/100): sama overlay-runko kuin hahmotasolla,
   mutta ammatin maisemataide taustana ja ikoni seppeleen tilalla. */
.lvlup-scene {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center;
  opacity: .3;
  -webkit-mask: radial-gradient(ellipse at center, #000 20%, transparent 78%);
          mask: radial-gradient(ellipse at center, #000 20%, transparent 78%);
  animation: lvlup-fade-in .5s ease-out both;
}
.lvlup-skill .lvlup-card { z-index: 1; }
.lvlup-prof-icon {
  position: relative; z-index: 1; display: block;
  width: 60px; height: 60px; margin: 0 auto 6px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.55));
}
.lvlup-backdrop.reduce .lvlup-scene { animation: none; }

/* Ammattitaidon nousu -banneri: ammatin ikoni, from -> to, progress seuraavaan. */
.skillup-banner {
  position: fixed; top: 74px; left: 50%; transform: translateX(-50%);
  z-index: 1150; display: flex; align-items: center; gap: 11px;
  padding: 10px 18px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, var(--night-soft), var(--night));
  border: 1px solid var(--gold); box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 16px rgba(201,162,75,.25);
  color: #F5EEDD; font-size: 14px;
  min-width: 232px; max-width: min(340px, calc(100vw - 24px));
  animation: skillup-in .32s cubic-bezier(.2,1.2,.5,1) both;
}
.skillup-banner .su-icon { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.skillup-banner .su-body { flex: 1; min-width: 0; }
.skillup-banner .su-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.skillup-banner .su-name {
  font-family: var(--font-display); font-weight: 700; color: var(--gold);
  letter-spacing: .12em; text-transform: uppercase; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.skillup-banner .su-levels { font-size: 13px; color: #C7B896; flex: none; }
.skillup-banner .su-levels b {
  font-family: var(--font-display); font-weight: 900; font-size: 17px; color: #F5EEDD;
  text-shadow: 0 0 10px rgba(201,162,75,.7);
}
.skillup-banner .su-arrow { color: #8A7A5F; margin: 0 1px; }
.skillup-banner .su-bar {
  height: 5px; margin-top: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(0,0,0,.4); border: 1px solid var(--night-line);
}
/* Palkin täyttö skaalataan (leveys tulee inline-tyylistä; !important ei toimi
   keyframeissa, joten scaleX on ainoa tapa animoida se auki). */
.skillup-banner .su-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--bronze), var(--gold));
  transform-origin: left center;
  animation: su-fill .5s ease-out both;
}
.skillup-banner .su-next { margin-top: 4px; font-size: 11px; color: #8A7A5F; font-variant: small-caps; letter-spacing: .05em; }
.skillup-banner .su-mastered { color: var(--gold); }
.skillup-banner.closing { animation: skillup-out .26s ease-in forwards; }
.skillup-banner.reduce, .skillup-banner.reduce .su-bar i { animation: none; }
@keyframes skillup-in { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes skillup-out { to { opacity: 0; transform: translate(-50%, -14px); } }
@keyframes su-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ============================================================ Rare-drop celebration
   views/dropCelebration.js. Porrastus: epic = banneri, legendary/mythic = koko
   ruudun overlay (mythic pisin + rajuin). VÄRI TULEE AINA rarity-luokasta
   currentColorin kautta — sama kuvio kuin .reveal-flashissa; tässä lohkossa ei
   ole yhtään kovakoodattua rarity-väriä. Kunnioittaa prefers-reduced-motionia. */

/* Rarity -> currentColor. Tämä on lohkon AINOA paikka jossa rarity-väri
   nimetään; kaikki alla oleva (reunat, säteet, hehkut) periytyy tästä. Nimen
   oma väri/hehku tulee erikseen .rarity-*-luokasta (tokens.css) — design-linja
   "rarity is conveyed by name color". */
.dropup-banner[data-rarity="epic"],
.dropup-backdrop[data-rarity="epic"] { color: var(--rarity-epic); }
.dropup-banner[data-rarity="legendary"],
.dropup-backdrop[data-rarity="legendary"] { color: var(--rarity-legendary); }
.dropup-banner[data-rarity="mythic"],
.dropup-backdrop[data-rarity="mythic"] { color: var(--rarity-mythic); }

/* ── Epic: banneri ───────────────────────────────────────────────────────── */
.dropup-banner {
  position: fixed; top: 74px; left: 50%; transform: translateX(-50%);
  z-index: 1160; display: flex; align-items: center; gap: 12px;
  padding: 11px 18px; border-radius: 12px; cursor: pointer; overflow: hidden;
  background: linear-gradient(180deg, var(--night-soft), var(--night));
  border: 1px solid currentColor;
  box-shadow: 0 6px 22px rgba(0,0,0,.4), 0 0 18px -2px currentColor;
  max-width: min(360px, calc(100vw - 24px));
  animation: dropup-in .36s cubic-bezier(.2,1.2,.5,1) both;
}
.dropup-banner .dropup-flash {
  position: absolute; inset: -50% -20%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, currentColor 0%, transparent 60%);
  animation: dropup-flash .8s ease-out forwards;
}
.dropup-banner .dropup-icon {
  position: relative; z-index: 1; width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
}
.dropup-banner .dropup-icon .item-art { width: 40px; height: 40px; }
.dropup-banner .dropup-icon .item-glyph { width: 30px; height: 30px; display: block; }
.dropup-banner .dropup-icon .item-glyph svg { width: 100%; height: 100%; }
.dropup-banner .dropup-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dropup-banner .dropup-eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: currentColor; opacity: .85;
}
.dropup-banner .dropup-name {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dropup-banner .dropup-meta { font-size: 11px; color: #8A7A5F; font-variant: small-caps; letter-spacing: .05em; }
.dropup-banner.closing { animation: dropup-out .26s ease-in forwards; }
.dropup-banner.reduce { animation: none; }
.dropup-banner.reduce .dropup-flash { display: none; }

@keyframes dropup-in { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes dropup-out { to { opacity: 0; transform: translate(-50%, -14px); } }
@keyframes dropup-flash { 0% { opacity: 0; } 30% { opacity: .5; } 100% { opacity: 0; } }

/* ── Legendary / Mythic: koko ruudun overlay ─────────────────────────────── */
.dropup-backdrop {
  position: fixed; inset: 0; z-index: 1210;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(24,18,12,.78), rgba(24,18,12,.95));
  animation: lvlup-fade-in .28s ease-out;
  cursor: pointer;
}
.dropup-backdrop.closing { animation: lvlup-fade-out .26s ease-in forwards; }
.dropup-card {
  position: relative; text-align: center; padding: 30px 40px;
  animation: dropup-pop .5s cubic-bezier(.2,1.3,.5,1) both;
}
/* Säteet + säde-palkki + purske periytyvät kortin rarity-väristä. */
.dropup-rays {
  position: absolute; left: 50%; top: 42%; width: 560px; height: 560px;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, currentColor 0 5deg, transparent 5deg 17deg);
  border-radius: 50%; opacity: .26;
  animation: lvlup-spin 11s linear infinite;
  pointer-events: none; z-index: 0;
  -webkit-mask: radial-gradient(circle, #000 26%, transparent 70%);
          mask: radial-gradient(circle, #000 26%, transparent 70%);
}
.dropup-beam {
  position: absolute; left: 50%; top: 42%; width: 180px; height: 620px;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, transparent, currentColor 45%, transparent);
  opacity: .16; pointer-events: none; z-index: 0;
  -webkit-mask: radial-gradient(ellipse 60% 50% at center, #000 10%, transparent 75%);
          mask: radial-gradient(ellipse 60% 50% at center, #000 10%, transparent 75%);
}
.dropup-burst {
  position: absolute; left: 50%; top: 42%; width: 280px; height: 280px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, currentColor 0%, transparent 62%);
  pointer-events: none; z-index: 0; opacity: 0;
  animation: dropup-burst .9s ease-out forwards;
}
.dropup-art { position: relative; z-index: 1; height: 132px; display: grid; place-items: center; margin-bottom: 4px; }
.dropup-art .dropup-art-img {
  width: 132px; height: 132px; object-fit: contain;
  filter: drop-shadow(0 0 22px currentColor) drop-shadow(0 4px 10px rgba(0,0,0,.6));
  animation: dropup-hover 2.8s ease-in-out infinite alternate;
}
.dropup-art .dropup-art-glyph { width: 96px; height: 96px; display: block; filter: drop-shadow(0 0 18px currentColor); }
.dropup-art .dropup-art-glyph svg { width: 100%; height: 100%; }
.dropup-card .dropup-eyebrow {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; font-size: 14px; color: currentColor;
}
.dropup-card .dropup-name {
  position: relative; z-index: 1; margin-top: 6px;
  font-family: var(--font-display); font-weight: 900; line-height: 1.1;
  font-size: clamp(30px, 7vw, 46px);
}
.dropup-card .dropup-meta {
  position: relative; z-index: 1; margin-top: 6px; color: #C7B896;
  font-size: 12.5px; font-variant: small-caps; letter-spacing: .06em;
}
.dropup-stats {
  position: relative; z-index: 1; margin-top: 12px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px;
  max-width: 380px;
}
.dropup-stats span {
  padding: 4px 12px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid var(--night-line); background: rgba(0,0,0,.35); color: #E7DBBC;
}
.dropup-hint { position: relative; z-index: 1; margin-top: 20px; font-size: 12px; color: var(--ink-soft); letter-spacing: .05em; }

/* Mythic: rajumpi kuin legendary — pulssi + tärähdys, muuten sama runko. */
.dropup-backdrop[data-rarity="mythic"] .dropup-card { animation: dropup-pop .5s cubic-bezier(.2,1.3,.5,1) both, dropup-shake 5s ease-in-out .5s infinite; }
.dropup-backdrop[data-rarity="mythic"] .dropup-rays { animation: lvlup-spin 7s linear infinite, dropup-pulse 2.4s ease-in-out infinite; }
.dropup-backdrop[data-rarity="legendary"] .dropup-card { animation: dropup-pop .5s cubic-bezier(.2,1.3,.5,1) both, dropup-shake 6s ease-in-out 1.2s infinite; }

@keyframes dropup-pop { 0% { transform: scale(.72); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); } }
@keyframes dropup-burst { 0% { opacity: .75; transform: translate(-50%, -50%) scale(.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
@keyframes dropup-hover { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
@keyframes dropup-pulse { 0%, 100% { opacity: .18; } 50% { opacity: .42; } }
@keyframes dropup-shake {
  0%, 92%, 100% { translate: 0 0; }
  94% { translate: -2px 1px; }
  96% { translate: 2px -1px; }
  98% { translate: -1px 0; }
}

/* Vähennetty liike: ei säteitä, purskeita, leijuntaa eikä tärinää — pelkkä
   välitön paljastus (sama linja kuin .reveal-backdrop.reduce). */
.dropup-backdrop.reduce,
.dropup-backdrop.reduce .dropup-card { animation: none; }
.dropup-backdrop.reduce .dropup-rays,
.dropup-backdrop.reduce .dropup-beam,
.dropup-backdrop.reduce .dropup-burst { display: none; }
.dropup-backdrop.reduce .dropup-art-img { animation: none; }

@media (max-width: 560px) {
  .dropup-art, .dropup-art .dropup-art-img { height: 96px; width: 96px; }
  .dropup-card { padding: 22px 18px; }
  .dropup-rays, .dropup-beam { width: 360px; }
}

/* Forgen cache-reveal (views/forge.js) kantaa jo data-rarityn: nostetaan sen
   intensiteettiä legendaryssa/mythicissä ILMAN toista modaalia päälle. */
.reveal-stage[data-rarity="legendary"] .reveal-card,
.reveal-stage[data-rarity="mythic"] .reveal-card {
  animation: reveal-pop .35s ease-out both, dropup-shake 6s ease-in-out 1.2s infinite;
}
.reveal-stage[data-rarity="legendary"] .reveal-name,
.reveal-stage[data-rarity="mythic"] .reveal-name { font-size: 21px; }
.reveal-stage[data-rarity="mythic"] .reveal-flash { animation: reveal-flash 1.1s ease-out forwards; }
.reveal-backdrop.reduce .reveal-stage .reveal-card { animation: none; }

/* ============================================================ Achievements
   Jaetut saavutusprimitiivit: kortti, ikoni, palkki, ryhmäotsikko + julkisen
   profiilin badge-ruudukko (views/achievements.js). Käyttää olemassa olevia
   design-tokeneita. Itse saavutusruudun layout on omassa lohkossaan alempana
   ("Achievements screen") — sen on tultava .lb-2col:n jälkeen. */
/* display:block molemmissa: palkkia käytetään myös <span>ina (Progress Overview
   -rivi on <a>, jonka sisällä ei saa olla <div>iä) — inline-elementti ei
   noudattaisi height/width-arvoja. */
.ach-bar { display: block; height: 8px; border-radius: 999px; background: var(--parchment-deep); overflow: hidden; margin-top: 8px; }
.ach-bar .fill { display: block; height: 100%; background: linear-gradient(90deg, var(--bronze), var(--gold)); border-radius: 999px; transition: width .4s ease; }

.ach-group { margin-top: 6px; }
.ach-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ach-group-head h3 { margin: 0; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.ach-group-count { font-size: 12px; color: var(--night-text); opacity: .6; font-family: var(--font-display); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }

.ach-card {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 10px; border: 1px solid var(--parchment-deep);
  background: var(--parchment);
}
.ach-card.locked { opacity: .5; filter: grayscale(0.7); }
.ach-card.unlocked { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(201,162,75,.25) inset; }
.ach-badge {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, var(--night-soft), var(--night));
  border: 1px solid var(--bronze);
}
.ach-card.unlocked .ach-badge { border-color: var(--gold); box-shadow: 0 0 10px rgba(201,162,75,.35); }
.ach-icon { width: 22px; height: 22px; filter: brightness(0) saturate(100%) invert(72%) sepia(38%) saturate(560%) hue-rotate(2deg) brightness(92%) contrast(88%); }
.ach-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ach-name { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink); }
.ach-desc { font-size: 12px; color: var(--ink-soft); }
.ach-check { position: absolute; top: 8px; right: 10px; color: var(--laurel); font-weight: 800; font-size: 15px; }

/* Julkinen profiili: kompakti badge-ruudukko. */
.ach-public { }
.ach-pub-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ach-pub-head h3 { margin: 0; font-size: 14px; }
.ach-pub-count { font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 13px; }
/* Toisen pelaajan avatut saavutukset: ohuet täysleveät rivit (ei isoja kortteja):
   ikoni + nimi + himmeä kuvaus, päällekkäin. */
.ach-pub-grid { display: flex; flex-direction: column; gap: 4px; }
.ach-pub-badge {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 10px;
  border-radius: 6px; border: 1px solid var(--line); background: var(--parchment);
}
.ach-pub-badge .ach-icon { width: 15px; height: 15px; flex: none; align-self: center; }
.ach-pub-name { font-size: 12px; font-weight: 700; color: var(--ink); flex: none; }
.ach-pub-desc {
  font-size: 11px; color: var(--ink-soft); flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ach-empty { color: var(--night-text); opacity: .65; font-size: 13px; margin: 0; }

/* ============================================================ Achievements screen
   #/character-sheet/achievements[/<kategoria>] — oma ruutu joka KORVAA
   hahmolakanan (views/achievements.js). Kaksipaneeli kuten hiscores, mutta
   paneelit venyvät täyteen korkeuteen (.imm-card vierittää sisäisesti) ->
   WoW-ikkunatuntuma.

   SIJAINTI ON MERKITSEVÄ: .ach-2col { flex-direction: row } kumoaa
   .imm-stackin columnin samalla spesifisyydellä (0,1,0) -> tämän lohkon on
   oltava lähdekoodissa sen JÄLKEEN.

   Kategorialista käyttää jaettuja .lb-cats/.lb-cat-primitiivejä sellaisenaan
   (kuten guild.js käyttää .lb-tablea) -> mobiilin chip-rivi tulee mukana.
   .lb-2col-ia EI uudelleenkäytetä: se on align-items:flex-start, koska
   leaderboard JS-täyttää taulunsa korttien korkeuteen — me haluamme stretchin.
   HUOM: juuriluokka on .ach-view, EI .character-sheet-view — jälkimmäisellä on
   sääntö .character-sheet-view .imm-stack { flex-direction: column } (0,2,0),
   joka romahduttaisi tämän layoutin. */
.ach-2col { display: flex; flex-direction: row; gap: 14px; width: min(1040px, 82vw); }
.ach-cat-card { flex: none; width: 210px; }
.ach-pane-card { min-width: 0; }

/* Pisteotsikko (WoW:n headline-luku) vasemman kortin yläosassa. */
.ach-points {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 0 12px; margin-bottom: 10px;
  border-bottom: 3px double var(--night-line);
}
.ach-points-icon { width: 26px; height: 26px; opacity: .9; }
.ach-points-num { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--gold); }
.ach-points-lbl { font-family: var(--font-display); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--night-text); opacity: .75; }
.ach-points-max { font-size: 11px; color: var(--night-text); opacity: .6; }

.ach-pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ach-pane-head h2 { flex: 1 1 auto; margin-bottom: 0; }
.ach-pane-count { flex: none; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--gold); }
.ach-pane-card > .ach-bar { margin-bottom: 16px; }
.ach-grid-pane { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Progress Overview: nimi | X/Y, palkki koko rivin leveydeltä. Rivi on linkki. */
.ach-prog { display: flex; flex-direction: column; gap: 2px; }
.ach-prog-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center;
  padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; text-decoration: none;
}
.ach-prog-row:hover { background: var(--night-soft); border-color: var(--night-line); }
.ach-prog-name { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--night-text); }
.ach-prog-count { font-family: var(--font-display); font-size: 12px; color: var(--gold); }
.ach-prog-row .ach-bar { grid-column: 1 / -1; margin-top: 2px; }

/* Pistemerkki kortin oikeassa ALAnurkassa — .ach-check varaa yläkulman. */
.ach-pts { position: absolute; right: 10px; bottom: 8px; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--bronze-deep); }
.ach-when { font-size: 11px; color: var(--ink-soft); opacity: .8; }

@media (max-width: 899px) {
  /* .imm-stack menee staattiseksi mobiilissa mutta flex-direction jää row:ksi. */
  .ach-2col { flex-direction: column; width: 100%; gap: 0; }
  .ach-cat-card { width: 100%; }
  .ach-points { flex-direction: row; align-items: baseline; justify-content: center; gap: 8px; }
  .ach-points-num { font-size: 22px; }
  .ach-points-icon { display: none; }
}

/* ============================================================ Vote (views/voting.js)
   Äänestyslinkit + Vote Shop. imm-card on tumma (night); tekstit vaaleita.

   LAYOUT: sisältösivu virtaa luonnollisesti (ei kiinteä 2/1-scene + nested-
   scrollit). Scene kasvaa sisällön mukaan, pino on normaali keskitetty sarake,
   kortit eivät vieritä sisäisesti -> shop-grid leviää useaan sarakkeeseen. */
/* Jaettu apuluokka sisältöraskaille kortti-listanäkymille: virtaa luonnollisesti
   (scene kasvaa sisällön mukaan, pino on normaali keskitetty sarake, kortit eivät
   vieritä sisäisesti) -> ei nested-scrollia, gridit leviävät. Sama kuvio kuin
   character-sheet-view. Lisää .imm-view-elementtiin. */
.imm-flow .imm-scene { aspect-ratio: auto; max-height: none; height: auto; overflow: visible; }
/* position: relative (EI static) jotta z-index pysyy voimassa ja pino piirtyy
   absoluuttisen backdrop-imgin (z-index 1) päälle; inset: auto nollaa peritetyt
   imm-stack-center-offsetit (left:50% ym.). */
.imm-flow .imm-stack { position: relative; inset: auto; transform: none; width: 100%; max-width: 960px; margin: 0 auto; padding: 20px; z-index: 3; }
.imm-flow .imm-card { overflow: visible; max-height: none; }

.vote-view .imm-scene { aspect-ratio: auto; max-height: none; height: auto; overflow: visible; }
.vote-view .imm-stack { position: static; transform: none; width: 100%; max-width: 940px; margin: 0 auto; padding: 20px; }
.vote-view .imm-card { overflow: visible; max-height: none; }

.vote-card, .vote-shop { display: flex; flex-direction: column; gap: 12px; }
.vote-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vote-head h2 { margin: 0; }
/* Recruit-tunnus: rivillä otsikon vieressä (link-tila) + iso keskitetty
   sankaritunnus (locked-tila, sama idiomi kuin .arena-locked). */
.vote-title { display: inline-flex; align-items: center; gap: 8px; }
.vote-title .icon { width: 26px; height: 26px; }
.vote-emblem { align-self: center; width: 46px; height: 46px; margin-bottom: 2px; }
.vote-balance { display: inline-flex; align-items: center; gap: 6px; color: var(--night-text); font-size: 14px; }
.vote-balance b { color: var(--gold); font-family: var(--font-display); font-size: 16px; }
.vote-note { color: var(--night-text); opacity: .7; font-size: 13px; margin: 6px 0; }

.vote-providers { display: flex; flex-direction: column; gap: 8px; }
.vote-provider {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--night-soft); border: 1px solid var(--night-line);
}
.vote-provider.on-cd { opacity: .7; }
.vp-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vp-name { font-family: var(--font-display); font-weight: 700; color: var(--night-text); font-size: 14px; }
.vp-sub { font-size: 12px; color: var(--gold); }
.vp-cd { font-size: 12.5px; color: var(--night-text); opacity: .8; }
.vp-cd span { font-family: var(--font-display); color: var(--gold); }
.vp-vote { white-space: nowrap; }

.vote-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.vote-shop-card {
  display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center;
  padding: 14px 12px; border-radius: 10px;
  background: var(--parchment); border: 1px solid var(--parchment-deep);
}
.vote-shop-card.locked { opacity: .6; }
.vsc-reward { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vsc-reward .icon { width: 30px; height: 30px; }
.vsc-name { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink); }
.vsc-desc { font-size: 12px; color: var(--ink-soft); }
.vote-buy { display: inline-flex; align-items: center; gap: 6px; }

/* Aktiivinen XP-buff -banneri Vote Shopissa. */
.vote-xpbuff {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 6px 14px; margin-bottom: 4px; border-radius: 999px;
  background: rgba(201,162,75,.12); border: 1px solid var(--gold);
  color: var(--night-text); font-size: 13px;
}
.vote-xpbuff span[data-deadline] { font-family: var(--font-display); color: var(--gold); font-weight: 700; }

/* ============================================================ Disenchant panel
   (views/professions.js, enchanting) — kortit paperitaustalla tummalla ws-panelilla,
   rarity-reunus + rarity-väritetty nimi + reagenttiesikatselu. */
.disenchant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.disenchant-card {
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border-radius: 10px; background: var(--parchment);
  border: 1px solid var(--parchment-deep); border-left-width: 3px;
}
.disenchant-card.rarity-uncommon { border-left-color: var(--rarity-uncommon); }
.disenchant-card.rarity-rare { border-left-color: var(--rarity-rare); }
.disenchant-card.rarity-epic { border-left-color: var(--rarity-epic); }
.disenchant-card.rarity-legendary { border-left-color: var(--rarity-legendary); }
.disenchant-card.rarity-mythic { border-left-color: var(--rarity-mythic); }
.dc-head { display: flex; align-items: center; gap: 10px; }
.dc-art { width: 40px; height: 40px; flex: 0 0 auto; }
.dc-meta { display: flex; flex-direction: column; min-width: 0; }
.dc-name { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-name.rarity-uncommon { color: var(--rarity-uncommon); }
.dc-name.rarity-rare { color: var(--rarity-rare); }
.dc-name.rarity-epic { color: var(--rarity-epic); }
.dc-name.rarity-legendary { color: var(--rarity-legendary); }
.dc-name.rarity-mythic { color: var(--rarity-mythic); }
.dc-sub { font-size: 11.5px; color: var(--ink-soft); }
.dc-yields { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.dc-yield-lbl { font-family: var(--font-display); font-weight: 700; color: var(--bronze-deep); text-transform: uppercase; letter-spacing: .05em; font-size: 10px; margin-right: 5px; }
.dc-btn { align-self: stretch; }

/* ============================================================ Achievements shortcut
   Character-sheetin varustekortin otsikossa (gold/honor-pinon päällä) — korvaa
   entisen inventory-välilehden. Vie saavutusruutuun (#/character-sheet/achievements).
   Mobiiliylikirjoitus on TÄSSÄ heti perussäännön jälkeen: media query ei nosta
   spesifisyyttä, joten aiempi ylikirjoitus responsive-lohkossa (~r. 3100) oli
   KUOLLUT — tämä perussääntö tuli lähdekoodissa sen jälkeen ja voitti aina. */
.char-ach-btn { margin-bottom: 6px; text-align: center; }
@media (max-width: 899px) {
  .char-ach-btn { margin-bottom: 4px; }
}

/* ============================================================ Update notice (patch notes)
   Kirjautuessa nouseva popup uudesta patch note -versiosta (views hook app.js:ssä).
   Ei-blokkaava bottom-center-kortti; News-navissa piste (nav-badge-dot). */
.update-notice {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 1100; max-width: min(460px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; background: var(--parchment); color: var(--ink);
  border: 1px solid var(--gold); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .4);
  animation: update-notice-in .3s ease-out;
}
@keyframes update-notice-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.update-notice-body { flex: 1 1 auto; min-width: 0; }
.update-notice-eyebrow {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.update-notice-title {
  display: block; font-weight: 700; font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.update-notice-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.update-notice-dismiss {
  background: transparent; border: 0; color: var(--ink-soft); cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0 2px;
}
.update-notice-dismiss:hover { color: var(--ink); }
/* News-navin piste kun on näkemätön päivitys (badgeHtml('news')). */
.nav-badge-dot { min-width: 0; width: 8px; height: 8px; padding: 0; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .update-notice { animation: none; } }

/* Myyntikuittaus (V25): sama ei-blokkaava kortti kuin patch note -popup, mutta
   kolmirivinen (mitä myytiin + paljonko kultaa tuli). Pinoutuu inline-styleen
   asetetulla bottomilla jos myyntejä on useita (app.js showSaleNotice).
   .update-notice-title on nowrap+ellipsis -> pitkä esineen nimi ei riko korttia. */
.sale-notice .update-notice-net,
.sale-notice-net {
  display: flex; align-items: center; gap: 5px;
  margin-top: 2px; font-size: 12px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.sale-notice-net b { color: var(--ink); }

/* Ladonin saapumisilmoitus (V27): sama ei-blokkaava kortti kuin patch/sale,
   mutta tumma ja punareunainen — tämä on hälytys, ei uutinen. Laukeaa johdetusta
   ikkunasta klientissä (app.js maybeShowLadonNotice), ei push-kanavasta. */
.ladon-notice {
  background: linear-gradient(180deg, #241608, #17100A);
  border-color: #8E3A2A;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .6), 0 0 22px rgba(150, 46, 30, .35);
}
.ladon-notice .update-notice-eyebrow { color: #D9846A; }
.ladon-notice .update-notice-title { color: #F2D98B; }
.ladon-notice .update-notice-dismiss { color: #9B8A6E; }
.ladon-notice .update-notice-dismiss:hover { color: #F2D98B; }

/* ------------------------------------------------ V27: maailmanpomo (Ladon) */

/* Ladon Environs-kartalla: renderöityy VAIN ikkunan ajan (environs.js johtaa
   sen vakioista), ja klikkaus vie taisteluun — kartta ON sisäänkäynti.
   %-sijainti kompensoitu cover-rajaukselle kuten pinnit (img ~42,30). */
.ladon-overlay {
  position: absolute;
  left: 42%;
  top: 26%;
  z-index: 4;
  /* Mittakaava: Ladonin pitää lukea pelottavana mutta ei peittää puolta
     maisemaa — n. kaksi vartiotornia leveä, ei viisi. */
  width: 10%;
  transform: translate(-50%, -50%);
  display: block;
  text-decoration: none;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .65));
  animation: ladon-stir 5.5s ease-in-out infinite;
}
.ladon-overlay img { display: block; width: 100%; height: auto; }
/* Nimilapun paljastus — .pin-label on oletuksena opacity:0 (styles.css:5658),
   ja jokainen muu pinnityyppi avaa sen omalla :hover-säännöllään. Ilman tätä
   Ladonin lappu ei näy KOSKAAN, eikä mikään kerro että kuva on klikattava. */
.ladon-overlay:hover .pin-label,
.ladon-overlay:focus-visible .pin-label { opacity: 1; }
.ladon-overlay .pin-label {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(20, 14, 8, .82);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
}
@keyframes ladon-stir {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.035); }
}

/* ===== Pomonäkymä: TÄYSNÄYTTÄMÖ (meta-stage-kuvio) =====================
   Ladon täyttää kuvan ja kaikki ohjaimet KELLUVAT sen päällä. Lähde on neliö
   jolla on oma maalattu tausta -> radiaalimaski sulattaa reunat murkkuun,
   jottei kuva näy irrallisena laatikkona. */
.wb-scene {
  background:
    radial-gradient(ellipse 70% 62% at 50% 44%, #3E3C22 0%, #211D11 58%, #12100A 100%);
}
.wb-dragon {
  position: absolute;
  left: 50%;
  top: 47%;
  height: 116%;
  width: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .75));
  /* Neliön reunat pois: pehmeä soikio jättää vain lohikäärmeen. */
  -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 52%, transparent 76%);
  mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 52%, transparent 76%);
  animation: ladon-breathe 7s ease-in-out infinite;
}
@keyframes ladon-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.018); }
}
/* Poissa ollessa: himmeä ja väritön — läsnä mutta saavuttamaton. */
.wb-scene.is-sleeping .wb-dragon { filter: grayscale(.7) brightness(.42) blur(1px); opacity: .8; }
.wb-scene.is-fled .wb-dragon { filter: grayscale(.5) brightness(.5); opacity: .85; }
.wb-scene.is-dead .wb-dragon {
  filter: grayscale(.85) brightness(.38);
  animation: none;
  transform: translate(-50%, -50%) rotate(4deg);
}

/* Osuma: nytkähdys + punainen välähdys + nouseva vahinkoluku. */
.wb-scene.is-hit .wb-dragon { animation: wb-lurch .42s ease-out; }
@keyframes wb-lurch {
  0%   { transform: translate(-50%, -50%) scale(1); }
  18%  { transform: translate(calc(-50% - 10px), -50%) scale(1.035) rotate(-1.2deg); }
  46%  { transform: translate(calc(-50% + 6px), -50%) scale(1.012) rotate(.6deg); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.wb-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 46% 46% at 50% 47%, rgba(196, 44, 30, .5), transparent 70%);
}
.wb-scene.is-hit .wb-flash { animation: wb-flash .42s ease-out; }
@keyframes wb-flash { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }
.wb-floats { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.wb-dmg {
  position: absolute;
  font: 700 30px/1 var(--font-display);
  color: #F2D98B;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9), 0 0 18px rgba(196, 44, 30, .7);
  animation: wb-rise 1.05s ease-out forwards;
}
@keyframes wb-rise {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(.75); }
  18%  { opacity: 1; transform: translate(-50%, -4px) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -58px) scale(1); }
}

/* Nimiplakaatti (vasen ylä) — sama kuvio kuin .meta-title. */
.wb-title {
  position: absolute;
  left: 16px;
  top: 14px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(14, 10, 6, .88), rgba(14, 10, 6, .66));
  border: 1px solid rgba(201, 162, 75, .38);
}
.wb-title-name {
  font: 700 22px/1.1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.wb-title-sub {
  font-size: 11.5px;
  font-style: italic;
  color: var(--night-text);
  opacity: .72;
}
.wb-title-count { margin-top: 3px; font-size: 12.5px; color: var(--night-text); }
.wb-title-count strong { color: var(--gold); font-variant-numeric: tabular-nums; }

/* Kärkilista (oikea ylä). */
.wb-board {
  position: absolute;
  right: 16px;
  top: 14px;
  z-index: 4;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(14, 10, 6, .82);
  border: 1px solid var(--night-line);
}
.wb-board-label {
  font: 700 10px/1.2 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A7A5F;
  margin-bottom: 3px;
}
.wb-board-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 12.5px;
  color: var(--night-text);
}
.wb-board-row strong { color: var(--gold); font-variant-numeric: tabular-nums; }

/* Kelluva toimintapalkki (alareuna) — .meta-pickerin sisar. */
.wb-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 14px clamp(16px, 6vw, 90px) 18px;
  background: linear-gradient(to top, rgba(8, 6, 4, .95), rgba(8, 6, 4, .72) 55%, transparent);
}
/* Jaettu pooli: leveä haava-palkki, näkymän dramaattinen keskipiste. */
.wb-pool {
  position: relative;
  height: 30px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(40, 12, 10, .85);
  border: 1px solid rgba(201, 162, 75, .45);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6);
}
.wb-pool-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(180deg, #B4372A, #7E1F16);
  box-shadow: 0 0 18px rgba(196, 44, 30, .55);
  transition: width .45s cubic-bezier(.2, .8, .3, 1);
}
.wb-pool-lbl {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 14px/1 var(--font-display);
  letter-spacing: .06em;
  color: #F6E7C0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .95);
  font-variant-numeric: tabular-nums;
}
.wb-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 34px);
  margin-top: 12px;
}
.wb-strike {
  flex: 0 0 auto;
  padding: 13px 34px;
  font-size: 15px;
  letter-spacing: .06em;
}
.wb-ap { opacity: .75; font-size: 12.5px; }
.wb-stat {
  flex: 1 1 0;
  font-size: 13px;
  color: var(--night-text);
  opacity: .9;
}
.wb-stat-left { text-align: right; }
.wb-stat-right { text-align: left; }
.wb-stat em { font-style: normal; color: var(--gold); font-weight: 700; }
.wb-stat strong { color: var(--gold); font-variant-numeric: tabular-nums; }
.wb-sep { opacity: .45; margin: 0 4px; }
.wb-first {
  margin: 0;
  text-align: center;
  font-size: 13.5px;
  font-style: italic;
  color: var(--night-text);
  opacity: .88;
}
.wb-note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--night-text);
  opacity: .7;
}

/* Keskitetty kortti tiloille joissa ei lyödä (nukkuu / ohi). */
.wb-center {
  position: absolute;
  left: 50%;
  bottom: 8%;
  z-index: 4;
  transform: translateX(-50%);
  width: min(560px, 82%);
  padding: 18px 24px 20px;
  text-align: center;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(14, 10, 6, .9), rgba(14, 10, 6, .8));
  border: 1px solid var(--night-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}
.wb-over-title {
  margin: 0 0 8px;
  font: 700 24px/1.15 var(--font-display);
  letter-spacing: .08em;
  color: var(--gold);
}
.wb-lede { margin: 0; color: var(--night-text); opacity: .86; font-size: 13.5px; line-height: 1.6; }
.wb-tally { margin: 12px 0 14px; font-size: 14px; color: var(--night-text); }
.wb-tally strong { color: var(--gold); font-variant-numeric: tabular-nums; }
.wb-claim { padding: 12px 30px; font-size: 15px; }

/* --- V28: iskusarja, vastaisku ja vaiheet ------------------------------- */

/* Oma HP heti pomon poolin alla: taistelun molemmat puolet yhdellä silmäyksellä. */
.wb-vitals {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 7px;
  font: 700 11px/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.wb-vitals-label { flex: none; color: #8A7A5F; }
.wb-vitals-bar {
  flex: 1 1 auto;
  position: relative;
  height: 9px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(0, 0, 0, .6);
  border: 1px solid rgba(201, 162, 75, .28);
}
.wb-vitals-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6E8A3C, #A6C077);
  transition: width .5s cubic-bezier(.2, .8, .3, 1);
}
.wb-vitals-num {
  flex: none;
  min-width: 42px;
  text-align: right;
  color: var(--night-text);
  font-variant-numeric: tabular-nums;
}
/* Nollilla: palkki punaisena ja nimi kertoo miksi nappi ei enää toimi. */
.wb-vitals.is-spent .wb-vitals-fill { background: linear-gradient(90deg, #7E1F16, #B4372A); }
.wb-vitals.is-spent .wb-vitals-num { color: #D9846A; }

/* Nousevien lukujen variantit: kritti isompi ja kultaisempi, huti harmaa ja
   pienempi, Ladonin vastaisku punainen ja se putoaa YLHÄÄLTÄ (eri suunta ->
   silmä erottaa kumpi löi kumpaa ilman että tekstiä tarvitsee lukea). */
.wb-dmg-crit {
  font-size: 42px;
  color: #FFE9A8;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .95), 0 0 26px rgba(255, 196, 60, .85);
}
.wb-dmg-miss {
  font-size: 22px;
  color: #9B8A6E;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}
.wb-dmg-counter {
  font-size: 34px;
  color: #FF8A72;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .95), 0 0 24px rgba(180, 40, 26, .8);
  animation-name: wb-fall;
}
/* Muiden gladiaattorien osuus: vaimeampi ja pienempi kuin omat lyöntisi —
   näet että kaupunki lyö mukanasi ilman että se kilpailee omien lukujesi kanssa. */
.wb-dmg-others {
  font-size: 20px;
  color: #A6C077;
  opacity: .85;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}
@keyframes wb-fall {
  0%   { opacity: 0; transform: translate(-50%, -46px) scale(.8); }
  20%  { opacity: 1; transform: translate(-50%, -6px) scale(1.14); }
  100% { opacity: 0; transform: translate(-50%, 34px) scale(1); }
}

/* Kritti nytkäyttää kovempaa kuin tavallinen osuma. */
.wb-scene.is-crit .wb-dragon { animation: wb-lurch-hard .5s ease-out; }
@keyframes wb-lurch-hard {
  0%   { transform: translate(-50%, -50%) scale(1); }
  14%  { transform: translate(calc(-50% - 18px), -50%) scale(1.06) rotate(-2.2deg); }
  44%  { transform: translate(calc(-50% + 11px), -50%) scale(1.02) rotate(1.1deg); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.wb-scene.is-crit .wb-flash { animation: wb-flash .5s ease-out; }

/* Vastaisku: Ladon syöksyy KATSOJAA kohti (skaalaus ulos, ei sivuun) ja
   näyttämön reunat leimahtavat punaisiksi — isku tulee sinuun, ei häneen. */
.wb-scene.is-mauled .wb-dragon { animation: wb-maul .62s ease-out; }
@keyframes wb-maul {
  0%   { transform: translate(-50%, -50%) scale(1); }
  22%  { transform: translate(-50%, calc(-50% + 10px)) scale(1.13); }
  55%  { transform: translate(-50%, calc(-50% + 4px)) scale(1.05); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.wb-scene.is-mauled::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  animation: wb-blood .62s ease-out;
  background: radial-gradient(ellipse 120% 120% at 50% 50%, transparent 42%, rgba(150, 22, 14, .72) 100%);
}
@keyframes wb-blood { 0% { opacity: 0; } 26% { opacity: 1; } 100% { opacity: 0; } }

/* Vaiheet: mitä enemmän verta, sitä punaisempi näyttämö ja levottomampi hengitys. */
.wb-scene[data-phase="1"] { background: radial-gradient(ellipse 70% 62% at 50% 44%, #453722 0%, #231A10 58%, #12100A 100%); }
.wb-scene[data-phase="2"] { background: radial-gradient(ellipse 70% 62% at 50% 44%, #4A2E1E 0%, #26160E 58%, #130C08 100%); }
.wb-scene[data-phase="3"] { background: radial-gradient(ellipse 70% 62% at 50% 44%, #55261B 0%, #2B120C 58%, #150807 100%); }
.wb-scene[data-phase="2"] .wb-dragon { animation-duration: 5s; }
.wb-scene[data-phase="3"] .wb-dragon { animation-duration: 3.2s; }

/* Vaihebanneri: skillup-bannerin runko, mutta pomon punainen rekisteri. */
.wb-phase-banner {
  border-color: #8E3A2A;
  background: linear-gradient(180deg, #241608, #17100A);
}
.wb-phase-banner .su-name { color: #F2D98B; }
.wb-phase-banner .su-next { color: #D9C7A3; }

/* Kaato- ja Draconarius-overlay (lvlup-koneisto, pomon värit). */
.lvlup-boss .lvlup-eyebrow { color: #D9846A; }
.lvlup-boss-name { font-size: clamp(38px, 7vw, 72px); letter-spacing: .14em; }
.lvlup-boss-face {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .7), 0 0 30px rgba(201, 162, 75, .5);
}

@media (max-width: 900px) {
  .wb-actions { flex-wrap: wrap; }
  .wb-stat { flex: 1 1 100%; text-align: center; order: 3; }
  .wb-board { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ladon-overlay,
  .wb-dragon,
  .wb-scene.is-hit .wb-dragon,
  .wb-scene.is-crit .wb-dragon,
  .wb-scene.is-mauled .wb-dragon,
  .wb-scene.is-mauled::after,
  .wb-scene.is-hit .wb-flash,
  .wb-scene.is-crit .wb-flash,
  .wb-dmg { animation: none; }
  /* Luvut on silti NÄHTÄVÄ: ilman animaatiota ne jäisivät opacity:0:aan. */
  .wb-dmg { opacity: 1; }
  .wb-pool-fill,
  .wb-vitals-fill { transition: none; }
}

/* ============================== Guild War (V29) ============================== */
/* Score-header */
.gw-header { display: flex; flex-direction: column; gap: 8px; }
.gw-phase-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.gw-phase-label { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze, #c9a24b); }
.gw-count b { font-variant-numeric: tabular-nums; }
.gw-scoreline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gw-score { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.gw-score-sep { margin: 0 .35em; opacity: .6; }
.gw-side { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.gw-resets { color: #b05252; letter-spacing: .12em; }
.gw-flagline { display: flex; align-items: center; gap: 8px; }

/* Claim-kortit */
.gw-claim-card { border-left: 3px solid var(--bronze, #c9a24b); }
.gw-claim-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gw-claim-eyebrow { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.gw-claim-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.gw-claim-reward { font-weight: 700; }
.verdict-mini { font-weight: 800; letter-spacing: .06em; }
.verdict-mini.victory { color: #7fbf6a; }
.verdict-mini.defeat { color: #c96a5a; }

/* Kenttäruudukot */
.gw-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.gw-def-card { background: rgba(20, 14, 8, .45); border: 1px solid rgba(201, 162, 75, .25); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.gw-def-card.gw-dead { opacity: .55; filter: grayscale(.7); }
.gw-def-head { display: flex; align-items: center; gap: 8px; }
.gw-def-medallion { width: 44px; height: 44px; flex: 0 0 auto; }
.gw-def-medallion .char-medallion, .gw-def-medallion svg, .gw-def-medallion img { width: 44px; height: 44px; }
.gw-def-id { display: flex; flex-direction: column; min-width: 0; }
.gw-def-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-fallen { margin-left: auto; color: #b05252; font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.gw-hp { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .45); overflow: hidden; }
.gw-hp .fill { display: block; height: 100%; background: linear-gradient(90deg, #8f2f2f, #c25b3a); transition: width .5s ease; }
.gw-hp-lbl { font-size: .8rem; opacity: .85; font-variant-numeric: tabular-nums; }
.gw-def-acts { display: flex; gap: 6px; margin-top: 2px; }

/* Scout-paneeli */
.gw-scout-panel { margin-top: 12px; padding: 12px; border: 1px solid rgba(201, 162, 75, .35); border-radius: 10px; background: rgba(20, 14, 8, .55); }
.gw-scout-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gw-scout-close { margin-left: auto; }
.gw-gear-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; }
.gw-slot { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 8px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 162, 75, .18); cursor: default; }
.gw-slot-empty { opacity: .5; }
.gw-slot-name { font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-slot-lbl { font-size: .72rem; opacity: .7; }
.gw-slot-art { width: 28px; height: 28px; }
.gw-statlist { columns: 2; }
.gw-panel-acts { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.gw-confirm { display: inline-flex; align-items: center; gap: 8px; }

/* Rekisteröinti */
.gw-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gw-roster-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 6px; border-radius: 6px; }
.gw-roster-row.is-set { background: rgba(127, 191, 106, .08); }
.gw-roster-dot { width: 1.1em; text-align: center; color: #7fbf6a; }
.gw-roster-state { margin-left: auto; }
.gw-warn { color: #c96a5a; font-weight: 600; }
.gw-drift-note { color: #c9a24b; font-weight: 600; }

/* Sotaloki + kontribuutiot */
.gw-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gw-log-row a { display: block; padding: 6px 8px; border-radius: 6px; text-decoration: none; color: inherit; background: rgba(0, 0, 0, .25); }
.gw-log-row.is-theirs a { background: rgba(140, 47, 47, .15); }
.gw-log-row a:hover { background: rgba(201, 162, 75, .12); }
.gw-kill { color: #c9a24b; font-weight: 800; }
.gw-reset-note { color: #b05252; font-style: italic; }
.gw-reset-banner { color: #c9a24b; font-weight: 700; text-align: center; }
.gw-contrib { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.gw-contrib li { display: flex; gap: 10px; align-items: baseline; }
.gw-contrib li b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* --- Guild War: Valor-kauppa, sarjataulukko ja sotakehykset (V29b) --- */
.valor-price { font-weight: 700; color: var(--bronze, #c9a24b); white-space: nowrap; }
.gw-standings-link { margin-left: auto; font-size: .85rem; text-decoration: none; border-bottom: 1px dotted currentColor; }
.lb-guild-cell { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.lb-guild-cell .guild-crest { flex: 0 0 auto; }

/* Sotakehykset ovat CSS-renkaita (ei rasteriassettia): jätetään ne pois
   taidekehysten background-image-säännöstä, muuten iso pinta jäisi tyhjäksi. */
.portrait-frame.frame-vexillum { --fr-lo: #4A1414; --fr-mid: #9E2B2B; --fr-hi: #E8A87C; }
.portrait-frame.frame-triumph  { --fr-lo: #6E4E12; --fr-mid: #C9A24B; --fr-hi: #FFF3C4; }
:is(.char-medallion, .medallion, .vs-medallion, .opp-medallion):has(.frame-vexillum) { border-color: #9E2B2B; }
:is(.char-medallion, .medallion, .vs-medallion, .opp-medallion):has(.frame-triumph)  { border-color: #C9A24B; }
:is(.meta-onchair, .char-medallion) .portrait-frame.frame-vexillum {
  --fr-orn: repeating-conic-gradient(from 0deg, rgba(74, 20, 20, .55) 0deg 6deg, rgba(232, 168, 124, .28) 6deg 8deg, transparent 8deg 18deg) border-box;
}
:is(.meta-onchair, .char-medallion) .portrait-frame.frame-triumph {
  --fr-orn: repeating-conic-gradient(from 0deg, rgba(110, 78, 18, .45) 0deg 3deg, rgba(255, 243, 196, .30) 3deg 5deg, transparent 5deg 11deg) border-box;
}
:is(.meta-onchair, .doll-medallion, .frame-preview)
  .portrait-frame:is(.frame-vexillum, .frame-triumph) {
  border: var(--fr-band) solid transparent;
  background:
    var(--fr-orn),
    conic-gradient(from var(--fr-angle, 216deg),
      var(--fr-lo) 0deg, var(--fr-hi) 52deg, var(--fr-mid) 104deg,
      var(--fr-lo) 168deg, var(--fr-hi) 232deg, var(--fr-mid) 300deg,
      var(--fr-lo) 360deg) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
/* Ei taidekehyksen reikää -> portretti täyttää medaljongin kuten frame-nonella. */
:is(.meta-onchair, .doll-medallion, .frame-preview):has(:is(.frame-vexillum, .frame-triumph)) { --fr-hole: 100%; }
.valor-line { display: inline-flex; align-items: center; gap: 4px; }
/* ── Talents (#/talents) — Rift-tyylinen kykypuu ──────────────────────────── */
/* Jaettu Character/Talents-ylätabipalkki (charTopTabs). Oma wrapper samalla
   max-widthilla kuin hahmolakanan .char-row (1600), jotta tabi on TÄSMÄLLEEN
   samassa vaakapositiossa molemmissa ruuduissa eikä hyppää tabia vaihtaessa. */
.char-tabs-wrap { max-width: 1600px; margin: 0 auto; padding: 16px 20px 4px; }
.char-top-tabbar { margin: 0; }

.talents-view .tal-slots,
.talents-view .tal-roles { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.tal-slot, .tal-role {
  padding: 8px 16px; border: 1px solid var(--night-line);
  background: linear-gradient(180deg, var(--night-soft), var(--night));
  color: var(--night-text);
  border-radius: 9px; cursor: pointer; font-weight: 600; font-size: 13px;
  transition: border-color .12s, background .12s, color .12s, box-shadow .12s;
}
.tal-slot:hover, .tal-role:hover { border-color: var(--bronze); color: #fff; }
.tal-role { font-family: var(--font-display); font-size: 14px; letter-spacing: .03em; }
.tal-slot-sel, .tal-slot-sel:hover, .tal-role-sel, .tal-role-sel:hover {
  border-color: var(--gold); color: var(--gold);
  background: linear-gradient(180deg, rgba(201, 162, 75, .22), rgba(201, 162, 75, .08));
  box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .35), 0 2px 10px rgba(201, 162, 75, .16);
}
.tal-slot-buy { border-style: dashed; color: var(--bronze); background: transparent; }
.tal-slot-buy:hover { border-color: var(--gold); color: var(--gold); }
.tal-active-dot { color: var(--gold); }

/* Puun otsikko: nimi + käytetyt pisteet + edistymispalkki. */
.tal-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px; margin: 10px 0 6px; }
.tal-treename { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--night-text); }
.tal-points { color: var(--night-text); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.tal-points b { color: var(--gold); font-size: 16px; }
.tal-over, .tal-over b { color: var(--crimson); }
.tal-dirty { grid-column: 1; color: var(--bronze); font-style: italic; font-size: 12px; }
.tal-spentbar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--parchment-deep); border: 1px solid var(--night-line); overflow: hidden; }
.tal-spentbar-fill { height: 100%; background: linear-gradient(90deg, var(--bronze), var(--gold)); transition: width .2s ease; }

/* Puu + SVG-yhdysviivaoverlay; per-rooli aksenttiväri (teräs/kulta/pronssi). */
.tal-tree { position: relative; margin: 8px 0 14px; --tal-accent: var(--gold); --tal-glow: rgba(201,162,75,.5); }
.tal-tree[data-role="tank"]   { --tal-accent: #9fb0c2; --tal-glow: rgba(122,32,32,.5); }
.tal-tree[data-role="healer"] { --tal-accent: #dcb85f; --tal-glow: rgba(201,162,75,.55); }
.tal-tree[data-role="dps"]    { --tal-accent: #cf9350; --tal-glow: rgba(178,53,53,.5); }
.tal-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.tal-link { stroke: var(--night-line); stroke-width: 2; opacity: .4; }
.tal-link-on { stroke: var(--tal-accent); stroke-width: 3; opacity: .95; filter: drop-shadow(0 0 3px var(--tal-glow)); }

.tal-rows { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.tal-row { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: stretch; }
.tal-row-rail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 0; border-right: 1px solid var(--night-line); }
.tal-row-tier { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bronze); text-align: center; line-height: 1.1; }
.tal-row-gate { font-size: 12px; font-weight: 700; color: var(--bronze); font-variant-numeric: tabular-nums; }
.tal-row-gate.met { color: var(--gold); }
.tal-row-gated .tal-row-tier { opacity: .55; }
.tal-row-nodes { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: center; align-content: center; padding: 4px 0; }

/* Ikonisolmu. */
.tal-node { position: relative; width: 84px; padding: 4px 2px 6px; border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink); }
.tal-icon {
  position: relative; width: 58px; height: 58px; border-radius: 13px;
  border: 2px solid var(--night-line);
  background: radial-gradient(120% 120% at 32% 24%, var(--night-soft), var(--night));
  display: grid; place-items: center;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.4);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.tal-icon-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
/* Fallback-initiaalit piilossa oletuksena: ikonit ovat LÄPINÄKYVIÄ PNG:itä, joten
   niiden takaa paistaisi muuten kirjaimet läpi. onerror näyttää ne (display:flex)
   vain jos kuva puuttuu. */
.tal-icon-fallback { display: none; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--night-text); opacity: .82; letter-spacing: .02em; user-select: none; }
.tal-node:hover .tal-icon { border-color: var(--tal-accent); transform: translateY(-1px); }
.tal-on .tal-icon { border-color: var(--tal-accent); box-shadow: 0 0 0 1px var(--tal-accent), 0 3px 12px var(--tal-glow); }
.tal-maxed .tal-icon { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 14px var(--tal-glow); }
.tal-locked .tal-icon { filter: grayscale(.55) brightness(.9); opacity: .72; }
.tal-excluded { cursor: not-allowed; }
.tal-excluded .tal-icon { filter: grayscale(.85) brightness(.75); opacity: .5; }

/* Keystone: pyöreä + kultarengas. */
.tal-key .tal-icon { width: 64px; height: 64px; border-radius: 50%; }
.tal-key .tal-icon-img { border-radius: 50%; }
.tal-key.tal-on .tal-icon { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold), 0 0 18px 3px var(--tal-glow); }

/* Rank-merkki ikonin alakulmassa (0/3 … 3/3). */
.tal-rank {
  position: absolute; right: -6px; bottom: -6px; z-index: 2;
  min-width: 22px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--night); color: var(--parchment);
  border: 1px solid var(--tal-accent);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
}
.tal-rank-max { background: var(--gold); color: var(--night); border-color: var(--gold); }

/* Ryhmätaisteluun nukkuva merkki. */
.tal-sleep-mark { position: absolute; left: -5px; top: -5px; z-index: 2; width: 16px; height: 16px; border-radius: 50%; background: var(--bronze); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.tal-node-label { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2; max-width: 82px; color: var(--night-text); }
.tal-locked .tal-node-label, .tal-excluded .tal-node-label { color: var(--bronze); }
.tal-sleeps .tal-node-label { color: var(--gold); }

.tal-preview { margin: 10px 0; padding: 10px; background: var(--parchment-deep); color: var(--ink); border-radius: 8px; font-size: 13px; }
.tal-chip { display: inline-block; padding: 2px 9px; margin: 2px; background: var(--parchment); color: var(--ink); border: 1px solid var(--night-line); border-radius: 12px; font-size: 12px; }
.tal-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.tal-active-note { color: var(--gold); font-weight: 600; font-size: 13px; }

/* Toimintopainikkeet sovitettu tummaan Rift-korttiin: globaalit .btn ovat
   vaaleita (etenkin .btn-ghost) ja rikkoivat tumman kortin. Vain värit
   skoopataan .tal-actionsiin — muoto (44px, font-display, letter-spacing)
   peritään globaalista, eikä muun sovelluksen painikkeisiin kosketa. */
.tal-actions .btn {
  background: linear-gradient(180deg, var(--night-soft), var(--night));
  border: 1px solid var(--night-line);
  color: var(--night-text);
  border-radius: 9px;
}
.tal-actions .btn:hover:not(:disabled) { border-color: var(--bronze); color: #fff; }
.tal-actions .btn:disabled { background: var(--night); border-color: var(--night-line); color: var(--night-text); opacity: .4; }
.tal-actions .btn-primary,
.tal-actions .btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #E0BA64, var(--bronze));
  border-color: var(--gold);
  color: var(--night);
  box-shadow: 0 2px 12px rgba(201, 162, 75, .30), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.tal-actions .btn-primary:hover:not(:disabled) { filter: brightness(1.06); }
.tal-actions .btn-ghost {
  background: transparent;
  border: 1px solid var(--night-line);
  color: var(--bronze);
  box-shadow: none;
}
.tal-actions .btn-ghost:hover:not(:disabled) { background: transparent; border-color: var(--gold); color: var(--gold); }

@media (max-width: 620px) {
  .tal-row { grid-template-columns: 40px 1fr; gap: 8px; }
  .tal-row-nodes { gap: 10px 12px; }
  .tal-node { width: 74px; }
  .tal-icon { width: 52px; height: 52px; }
  .tal-key .tal-icon { width: 56px; height: 56px; }
}

/* Layout: virtaava kaksipalsta (puu | Battle Arts -sivupalsta). Koko scene
   vierittyy luonnollisesti työpöydällä, joten puu näkyy kokonaan — EI enää
   ahdasta korttikohtaista scrollia (imm-stack-absolute + imm-card overflow-y:auto
   oli se ansa, joka katkaisi puun tier 3:een). */
.tal-page { position: relative; z-index: 3; width: 100%; max-width: 1280px; margin: 0 auto; padding: 12px 18px 28px; }
.tal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.talents-view .tal-main-card { overflow: visible; flex: none; }
.tal-cap { margin-bottom: 8px; }
.tal-side { min-width: 0; }
.tal-side .spells-card { overflow: visible; margin: 0; }
/* Battle Arts -sivupalsta: leveämpi 3-sarakkeinen ruudukko (arts levitetään
   riviin) + tasakorkuiset solut (min-height + gridin stretch) -> alareunat tasan.
   Pitkä unlock-lähdeteksti rajataan, ettei yksittäinen solu venytä riviään. */
.tal-side .spell-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
.tal-side .spell-cell { min-height: 152px; justify-content: flex-start; }
.tal-side .spell-src { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 900px) {
  body.map-fullpage .talents-scene { overflow-y: auto; overflow-x: hidden; }
}
@media (max-width: 1080px) {
  .tal-layout { grid-template-columns: 1fr; }
  .tal-side .spell-cell { min-height: 0; }
}

/* Hover-selite: rank-tikapuut (montako pistettä syötetty + mitä lisäys tekee).
   Kiinteä body-taso, sama henki kuin item-tip — EI selaimen omaa title-tooltipia. */
.tal-tip {
  position: fixed; z-index: 200; max-width: 300px; pointer-events: none;
  background: var(--night); border: 1px solid var(--gold); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55); padding: 11px 13px; color: var(--night-text);
}
.tal-tip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tal-tip-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--gold); }
.tal-tip-rank { font-size: 11px; color: var(--bronze); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tal-tip-blurb { font-size: 12px; line-height: 1.4; color: var(--night-text); opacity: .88; margin: 6px 0 0; }
.tal-tip-ladder { display: flex; flex-direction: column; gap: 3px; margin: 9px 0 0; border-top: 1px solid var(--night-line); padding-top: 8px; }
.tal-tip-rung { display: flex; gap: 8px; align-items: baseline; font-size: 12px; opacity: .55; }
.tal-tip-rk { min-width: 30px; font-weight: 700; color: var(--bronze); font-variant-numeric: tabular-nums; }
.tal-tip-eff { color: var(--night-text); }
.tal-tip-rung.next { opacity: .95; }
.tal-tip-rung.cur { opacity: 1; }
.tal-tip-rung.cur .tal-tip-rk { color: var(--gold); }
.tal-tip-rung.cur .tal-tip-eff { color: var(--gold); font-weight: 600; }
.tal-tip-sig { font-size: 11.5px; color: var(--bronze); border-top: 1px dashed var(--night-line); padding-top: 6px; margin-top: 8px; line-height: 1.35; }
.tal-tip-sig b { color: var(--gold); }
.tal-tip-sleeps { font-size: 11px; color: var(--gold); margin-top: 7px; }
.tal-tip-lock { font-size: 11.5px; color: #E08A6B; margin-top: 7px; font-weight: 600; }
.tal-tip-cost { font-size: 11px; color: var(--bronze); margin-top: 7px; }

/* ── Dungeonit (#/dungeons) — soolo-taktinen, isot korttikuvat + areena ─────── */
.dg-page { position: relative; z-index: 3; width: 100%; max-width: 2000px; margin: 0 auto; padding: 14px 20px 36px; }
@media (min-width: 900px) { body.map-fullpage .dungeons-scene { overflow-y: auto; overflow-x: hidden; } }
.dg-listhead h2 { font-family: var(--font-display); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 4px 0 8px; }
.dg-listhead .cap-note { color: var(--night-text); opacity: .82; }

/* Isot dungeon-kortit riviin (3), kuva ylhäällä + nimi/level/tarina alla. */
.dg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 16px; }
@media (max-width: 820px) { .dg-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } }
.dg-card { display: flex; flex-direction: column; border: 1px solid var(--night-line); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, var(--night-soft), var(--night)); box-shadow: 0 6px 22px rgba(0,0,0,.4);
  transition: border-color .12s, transform .12s, box-shadow .12s; }
.dg-card:not(.dg-card-locked):hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.dg-card-locked { opacity: .6; }
/* Iso pystykansi ("dungeon entrance" -juliste): 3/4-portretti täyttää kortin. */
.dg-card-art { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-bottom: 1px solid var(--night-line);
  background: radial-gradient(120% 120% at 40% 28%, #3a2a1a, #120d08); }
.dg-card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dg-card-lvl { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 4px 12px; border-radius: 999px;
  background: rgba(18,13,8,.85); border: 1px solid var(--gold); color: var(--gold); font-size: 13px; font-weight: 700; }
.dg-card-body { flex: 1 1 auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.dg-card-name { font-family: var(--font-display); font-size: 23px; color: var(--night-text); }
.dg-card-story { font-size: 14px; line-height: 1.5; color: var(--night-text); opacity: .82; font-style: italic; flex: 1 1 auto; }
.dg-card-boss { font-size: 12px; color: var(--bronze); }
.dg-card-boss b { color: var(--night-text); }
.dg-card-foot { padding: 0 14px 14px; }
.dg-card-foot .btn { width: 100%; }
.dg-locked-note { font-size: 12px; color: var(--bronze); }

/* Kuva-fallback (initiaalit): PIILOSSA oletuksena, näkyy vain jos kuva puuttuu
   (onerror -> display:flex). Läpinäkyvä boss (object-fit:contain) ei paista
   initiaaleja lävitseen. */
.dg-art-fb { position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; color: var(--night-text); }
.dg-card-art .dg-art-fb { font-size: 120px; color: rgba(201,162,75,.3); letter-spacing: .04em; }

/* ── Kohtaaminen: iso boss + HP ylhäällä, pelaaja + taidot alareunassa ─────── */
/* .dg-fight nostetaan absoluuttiseksi täyttämään scene-laatikko: näin kasvava
   lokiteksti EI työnnä #appia (min-height:100vh) pidemmäksi -> scene pysyy
   viewport-korkuisena ja boss/log skaalautuvat/vierittävät SISÄLLÄ (korjaa
   "ruutu venyy ylimittaiseksi", kun round-tekstejä kertyy). */
.dungeons-scene-fight { position: relative; display: flex; flex-direction: column; overflow: hidden; }
/* Vain työpöytä (>=900px): siellä scene on viewport-korkuinen (flex-ketju). Mobiili
   (<900px) reflowaa .imm-scene-cards -> height:auto normaali dokumenttivirtaus, jossa
   absoluuttinen dg-fight romahtaisi 0-korkuiseksi -> pidetään se siellä virrassa. */
@media (min-width: 900px) { .dungeons-scene-fight > .dg-fight { position: absolute; inset: 0; flex: none; } }
.dg-fight { position: relative; z-index: 3; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  gap: 12px; padding: 12px clamp(12px, 3vw, 44px) 14px; }

/* Immersiiviset osumaefektit: ruuduntärähdys + välähdys + nousevat vahinkoluvut. */
.dg-flash { position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: 0;
  background: radial-gradient(circle at 50% 38%, rgba(255,228,170,.5), transparent 62%); }
.dg-fight.dg-hit .dg-flash, .dg-fight.dg-crit .dg-flash { animation: dg-flash .34s ease-out; }
.dg-fight.dg-mauled .dg-flash { background: radial-gradient(circle at 50% 82%, rgba(200,46,34,.5), transparent 62%); animation: dg-flash .44s ease-out; }
@keyframes dg-flash { 0% { opacity: 0; } 24% { opacity: 1; } 100% { opacity: 0; } }
.dg-fight.dg-hit { animation: dg-shake .32s ease-out; }
.dg-fight.dg-crit, .dg-fight.dg-mauled { animation: dg-shake-hard .44s ease-out; }
@keyframes dg-shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-6px,3px); } 40% { transform: translate(5px,-3px); } 60% { transform: translate(-4px,2px); } 80% { transform: translate(3px,-1px); } }
@keyframes dg-shake-hard { 0%,100% { transform: translate(0,0); } 15% { transform: translate(-11px,6px); } 30% { transform: translate(10px,-6px); } 45% { transform: translate(-8px,4px); } 60% { transform: translate(7px,-4px); } 78% { transform: translate(-4px,2px); } }
.dg-floats { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.dg-dmg { position: absolute; font-family: var(--font-display); font-weight: 800; font-size: 36px;
  color: #f0d9a0; text-shadow: 0 2px 7px rgba(0,0,0,.85); animation: dg-rise 1.1s ease-out forwards; }
.dg-dmg-crit { font-size: 50px; color: #ffcf6b; }
.dg-dmg-hero { color: #ef8d7a; }
.dg-dmg-heal { color: #7fd88a; }
.dg-dmg-miss { color: #c9bfae; font-size: 26px; font-style: italic; }
@keyframes dg-rise { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 16% { opacity: 1; transform: translateY(0) scale(1.12); } 42% { transform: scale(1); } 100% { opacity: 0; transform: translateY(-52px); } }

/* Boss-portretti reagoi itse: nytkähdys taakse osumasta, syöksy eteen vastaiskussa
   (Ladon-lohikäärmeen wb-lurch/wb-maul -peili). Pivot lähellä jalkoja -> tukeva. */
.dg-boss-big img { transform-origin: 50% 90%; }
.dg-fight.dg-hit .dg-boss-big img { animation: dg-boss-recoil .34s ease-out; }
.dg-fight.dg-crit .dg-boss-big img { animation: dg-boss-recoil-hard .44s ease-out; }
.dg-fight.dg-mauled .dg-boss-big img { animation: dg-boss-lunge .46s ease-out; }
@keyframes dg-boss-recoil { 0% { transform: translate(0,0) rotate(0); } 32% { transform: translate(3px,-11px) rotate(-2.5deg); } 62% { transform: translate(-2px,4px) rotate(1deg); } 100% { transform: translate(0,0) rotate(0); } }
@keyframes dg-boss-recoil-hard { 0% { transform: translate(0,0) rotate(0) scale(1); } 20% { transform: translate(-7px,-18px) rotate(-4.5deg) scale(1.04); } 50% { transform: translate(5px,7px) rotate(2deg) scale(.99); } 76% { transform: translate(-2px,-4px) rotate(-1deg) scale(1); } 100% { transform: translate(0,0) rotate(0) scale(1); } }
@keyframes dg-boss-lunge { 0% { transform: translate(0,0) scale(1); } 34% { transform: translate(0,22px) scale(1.13); } 68% { transform: translate(0,-5px) scale(.98); } 100% { transform: translate(0,0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .dg-fight.dg-hit, .dg-fight.dg-crit, .dg-fight.dg-mauled,
  .dg-fight.dg-hit .dg-flash, .dg-fight.dg-crit .dg-flash, .dg-fight.dg-mauled .dg-flash,
  .dg-fight.dg-hit .dg-boss-big img, .dg-fight.dg-crit .dg-boss-big img, .dg-fight.dg-mauled .dg-boss-big img,
  .dg-dmg { animation: none; }
  .dg-dmg { opacity: 1; }
}

/* ── Raid party-palkki (rd-*; boss/stage/skills/floats jaettu dg-* dungeonista) ── */
.rd-bottom { gap: 10px; }
.rd-party { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: 1120px; margin: 0 auto; }
.rd-member { position: relative; display: flex; gap: 9px; align-items: center; padding: 8px 10px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(201,162,75,.22); border-radius: 12px;
  transition: border-color .2s, box-shadow .2s; }
.rd-member.rd-me { border-color: rgba(201,162,75,.72); background: rgba(40,28,18,.55);
  box-shadow: 0 0 0 1px rgba(201,162,75,.35), 0 4px 16px rgba(0,0,0,.4); }
.rd-member.rd-dead { opacity: .5; filter: grayscale(.7); }
.rd-member { cursor: pointer; text-align: left; }
.rd-member:hover { border-color: var(--gold); }
.rd-member:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Echot ovat haamuja sinusta: portretti sävytettynä */
.rd-mem-echo .rd-mem-portrait img { filter: grayscale(.5) brightness(.9) sepia(.28) hue-rotate(155deg); opacity: .8; }
/* Ragdoll-inspect-popup */
.rd-inspect { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .58); display: grid; place-items: center; padding: 16px; }
.rd-inspect-panel { position: relative; background: var(--night); border: 1px solid var(--bronze); border-radius: 14px;
  padding: 18px 20px 20px; width: min(560px, 94vw); max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.rd-inspect-x { position: absolute; top: 6px; right: 10px; background: none; border: none; color: var(--night-text); font-size: 26px; line-height: 1; cursor: pointer; }
.rd-inspect-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.rd-inspect-name { font-family: var(--font-display); font-size: 20px; color: var(--night-text); }
.rd-inspect-note { color: var(--bronze); font-size: 13px; margin: 2px 0 8px; }
.rd-inspect-figure { margin-top: 8px; }
.rd-mem-portrait { position: relative; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 9px;
  overflow: hidden; background: radial-gradient(circle at 50% 35%, #3a2c1a, #17110a); display: grid; place-items: center; }
.rd-mem-portrait img { width: 100%; height: 100%; object-fit: cover; }
.rd-mem-portrait .dg-art-fb { display: none; font-family: var(--font-display); font-weight: 700; color: var(--night-text); font-size: 15px; }
.rd-mem-skull { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; color: #e6d8b8; background: rgba(0,0,0,.5); }
.rd-mem-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rd-mem-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.rd-mem-name { font-size: 13px; color: var(--night-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-mem-role { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.rd-role-tank { color: #9fc0e8; }
.rd-role-healer { color: #8fe0a0; }
.rd-role-dps { color: #e8b26a; }
.rd-mem-hpbar { height: 10px; }
.rd-mem-hpnum { font-size: 10px; color: var(--night-text); opacity: .78; }
.rd-fallen { text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 6px; }
.rd-fallen p { color: var(--night-text); margin: 0; }
.rd-card-party { position: absolute; top: 10px; left: 10px; background: rgba(20,14,10,.82);
  color: var(--gold); border: 1px solid rgba(201,162,75,.5); border-radius: 999px;
  padding: 3px 9px; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
@media (max-width: 720px) { .rd-party { grid-template-columns: repeat(2, 1fr); } }

/* ── War-setit (rooli-loadout-hallinta raid-listalla) ─────────────────────── */
.rd-sets { max-width: 1120px; margin: 24px auto 0; }
.rd-sets h3 { color: var(--night-text); font-family: var(--font-display); margin: 0 0 10px; font-size: 18px; }
.rd-sets-hint { font-size: 12px; font-weight: 400; color: var(--bronze); }
.rd-sets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rd-set { background: rgba(0,0,0,.28); border: 1px solid rgba(201,162,75,.22); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.rd-set-current { border-color: rgba(201,162,75,.6); background: rgba(40,28,18,.5); }
.rd-set-head { display: flex; align-items: center; justify-content: space-between; }
.rd-set-head b { font-size: 15px; }
.rd-set-status { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; }
.rd-status-ready { color: #8fe0a0; background: rgba(60,160,90,.18); }
.rd-status-incomplete { color: #e8c46a; background: rgba(180,140,50,.18); }
.rd-status-broken { color: #e88a7a; background: rgba(180,60,50,.18); }
.rd-status-none { color: var(--bronze); background: rgba(140,107,47,.14); }
.rd-set-note { margin: 0; font-size: 12px; color: var(--bronze); }
.rd-set-worn { color: var(--gold); }
.rd-set-actions { display: flex; gap: 8px; margin-top: auto; }
.rd-set-btn { flex: 1; padding: 7px 8px; font-size: 13px; }
@media (max-width: 720px) { .rd-sets-grid { grid-template-columns: 1fr; } }

/* ── Kierroksen commit-palkki: valitse action, countdown, "Resolve now" ───── */
.rd-commit { width: 100%; max-width: 900px; margin: 4px auto 0; }
.rd-commit-track { height: 6px; border-radius: 999px; background: rgba(0, 0, 0, .38); overflow: hidden; margin-bottom: 7px; }
.rd-commit-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), var(--bronze)); transition: width .2s linear; }
.rd-commit-urgent .rd-commit-fill { background: linear-gradient(90deg, #e8804a, #c0392b); }
.rd-commit-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rd-commit-pick { flex: 1 1 200px; min-width: 0; color: var(--night-text); font-size: 13px; }
.rd-commit-timer { color: var(--bronze); font-size: 13px; white-space: nowrap; }
.rd-commit-timer b { color: var(--gold); font-size: 16px; font-variant-numeric: tabular-nums; }
.rd-commit-urgent .rd-commit-timer b { color: #e8804a; }
.rd-commit-go { padding: 7px 16px; white-space: nowrap; }
/* Valittu skill korostuu kunnes kierros ratkeaa */
.dg-skill { transition: border-color .15s, box-shadow .15s, transform .15s; }
.dg-skill.dg-skill-selected { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(201, 162, 75, .55), 0 8px 18px rgba(0, 0, 0, .45); }

/* Päätösseremonia keskelle näyttämöä (loot-roll / voitto / wipe): overlay
   kaatuneen bossin ylle. .dg-fight on position:relative -> ankkuroituu siihen.
   pointer-events vain kortille, jotta läpikuultava tausta ei nappaa klikkejä. */
.rd-ceremony { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vh, 34px); pointer-events: none; }
.rd-ceremony::before { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 72% 62% at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,.74)); }
.rd-ceremony > * { position: relative; pointer-events: auto; max-height: 100%; }
.rd-ceremony .rd-loot { background: linear-gradient(160deg, rgba(30,21,17,.95), rgba(18,12,10,.97));
  border: 1px solid var(--night-line); border-radius: 16px; padding: 18px 20px 20px; box-shadow: 0 26px 74px rgba(0,0,0,.62); }
.rd-ceremony .dg-result { width: min(520px, 94%); box-shadow: 0 26px 74px rgba(0,0,0,.55); }

/* ── Loot-roll (need/greed/pass) ─────────────────────────────────────────── */
.rd-loot { width: 100%; max-width: 660px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; max-height: 100%; overflow: auto; }
.rd-loot-top { text-align: center; }
.rd-loot-top h3 { margin: 0 0 2px; font-family: var(--font-display); color: var(--gold); font-size: 20px; }
.rd-loot-hint { font-size: 12px; color: var(--bronze); }
.rd-loot-track { height: 5px; border-radius: 999px; background: rgba(0, 0, 0, .4); overflow: hidden; }
.rd-loot-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), var(--bronze)); transition: width .2s linear; }
.rd-loot-items { display: flex; flex-direction: column; gap: 8px; }
.rd-loot-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(0, 0, 0, .28);
  border: 1px solid var(--night-line); border-left-width: 3px; border-radius: 10px; }
.rd-loot-row.rarity-uncommon { border-left-color: var(--rarity-uncommon, #4a9a52); }
.rd-loot-row.rarity-rare { border-left-color: var(--rarity-rare); }
.rd-loot-row.rarity-epic { border-left-color: var(--rarity-epic); }
.rd-loot-row.rarity-legendary { border-left-color: var(--rarity-legendary); }
.rd-loot-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 8px; overflow: hidden; cursor: help;
  display: grid; place-items: center; background: radial-gradient(circle at 50% 32%, #3a2c1a, #17110a); }
.rd-loot-icon img { width: 100%; height: 100%; object-fit: contain; }
.rd-loot-icon .doll-glyph { width: 26px; height: 26px; }
.rd-loot-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rd-loot-name { font-size: 14px; }
.rd-loot-name.rarity-rare { color: var(--rarity-rare); }
.rd-loot-name.rarity-epic { color: var(--rarity-epic); }
.rd-loot-name.rarity-legendary { color: var(--rarity-legendary); }
.rd-loot-name.rarity-uncommon { color: var(--rarity-uncommon, #4a9a52); }
.rd-loot-meta { font-size: 11px; color: var(--bronze); }
.rd-loot-choices { display: flex; gap: 5px; flex: 0 0 auto; }
.rd-loot-btn { padding: 5px 10px; font-size: 12px; font-weight: 700; border-radius: 8px; cursor: pointer;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--night-line); color: var(--night-text); }
.rd-loot-btn:hover { border-color: var(--bronze); }
.rd-loot-need.on { background: rgba(60, 160, 90, .3); border-color: #7fd88a; color: #bff0c8; }
.rd-loot-greed.on { background: rgba(201, 162, 75, .28); border-color: var(--gold); color: var(--gold); }
.rd-loot-pass.on { background: rgba(120, 120, 120, .25); border-color: #b0a89a; color: #d8d0c2; }
.rd-loot-go { align-self: center; padding: 9px 22px; }
.rd-loot-count { font-variant-numeric: tabular-nums; }
.rd-loot-results { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.rd-loot-res { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: rgba(0, 0, 0, .25);
  border: 1px solid var(--night-line); border-left-width: 3px; border-radius: 8px; }
.rd-loot-res.rarity-rare { border-left-color: var(--rarity-rare); }
.rd-loot-res.rarity-epic { border-left-color: var(--rarity-epic); }
.rd-loot-res.rarity-legendary { border-left-color: var(--rarity-legendary); }
.rd-loot-res-icon { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 32%, #3a2c1a, #17110a); }
.rd-loot-res-icon img { width: 100%; height: 100%; object-fit: contain; }
.rd-loot-res-icon .doll-glyph { width: 20px; height: 20px; }
.rd-loot-res-name { flex: 1 1 auto; min-width: 0; font-size: 13px; text-align: left; }
.rd-loot-res-roll { font-size: 12px; color: var(--bronze); white-space: nowrap; }
.rd-loot-res-out { font-size: 12px; font-weight: 700; white-space: nowrap; }
.rd-out-item { color: #7fd88a; }
.rd-out-gold { color: var(--gold); }
.rd-out-passed { color: #a89f8f; }
@media (max-width: 640px) { .rd-loot-row { flex-wrap: wrap; } .rd-loot-choices { width: 100%; justify-content: flex-end; } }

/* ── Raid-teatteri (immersio-M1) ─────────────────────────────────────────── */
/* Suuntakielioppi: bossin vahinko PUTOAA ylhäältä punaisena (wb-fall-peili). */
.dg-dmg-fall { color: #ef6b56; animation: dg-fall 1.0s ease-in forwards; }
@keyframes dg-fall { 0% { opacity: 0; transform: translate(-50%, -46px) scale(.85); } 18% { opacity: 1; transform: translate(-50%, -30px) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, 26px) scale(1); } }

/* Bossin idle-hengitys — kiihtyy phaseissa (7 s -> 5 s -> 3.2 s; Ladonin resepti).
   HUOM: raid-boss on FLEX-keskitetty (ei absoluuttinen kuten world-boss), joten
   oma skaalaus-vain-keyframe. ladon-breathen translate(-50%,-50%) on world-bossin
   KESKITYSmuunnos ja heittäisi flex-kuvan ruudun ylä-vasempaan ("boss katosi ylös"
   + scroll-overflow paisutti näyttämön). transform-origin 50% 90% -> jaloista. */
.dg-boss-big img.rd-boss-idle { animation: rd-boss-breathe 7s ease-in-out infinite; }
.dungeons-scene[data-phase="2"] .dg-boss-big img.rd-boss-idle { animation-duration: 5s; }
.dungeons-scene[data-phase="3"] .dg-boss-big img.rd-boss-idle { animation-duration: 3.2s; }
@keyframes rd-boss-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }

/* Phase-eskalaatio: huone mustelmoituu punaisemmaksi loppua kohden. */
.dungeons-scene[data-phase] { transition: box-shadow 1.2s ease; }
.dungeons-scene[data-phase="1"] { box-shadow: inset 0 0 120px rgba(120, 24, 12, .22); }
.dungeons-scene[data-phase="2"] { box-shadow: inset 0 0 160px rgba(140, 24, 12, .38); }
.dungeons-scene[data-phase="3"] { box-shadow: inset 0 0 210px rgba(160, 20, 10, .55); }

/* Bossin kuolema: vajoaa, harmaantuu ja haipuu (~900 ms) ennen seppelettä. */
.dg-boss-big img.rd-boss-death { animation: rd-boss-death .9s ease-in forwards !important; }
@keyframes rd-boss-death {
  0% { transform: none; filter: none; opacity: 1; }
  45% { transform: translateY(14px) rotate(3deg) scale(.98); filter: grayscale(.4) brightness(.85); opacity: .95; }
  100% { transform: translateY(46px) rotate(6deg) scale(.94); filter: grayscale(.95) brightness(.55); opacity: .35; }
}

/* Wipe: näyttämö painuu tuhkaan; kallot laskeutuvat porrastetusti. */
.dungeons-scene.rd-wipe .dg-fight { filter: grayscale(.55) brightness(.72); transition: filter .7s ease; }
.rd-wipe .rd-mem-skull { animation: rd-skull-drop .5s ease-out backwards; }
.rd-wipe .rd-member:nth-child(1) .rd-mem-skull { animation-delay: .1s; }
.rd-wipe .rd-member:nth-child(2) .rd-mem-skull { animation-delay: .3s; }
.rd-wipe .rd-member:nth-child(3) .rd-mem-skull { animation-delay: .5s; }
.rd-wipe .rd-member:nth-child(4) .rd-mem-skull { animation-delay: .7s; }
@keyframes rd-skull-drop { 0% { opacity: 0; transform: translateY(-14px) scale(1.5); } 100% { opacity: 1; transform: none; } }
.rd-dirge-tally { font-size: 15px; color: var(--night-text); margin: 4px 0 2px; }
.rd-dirge-tally b { color: #ef8d7a; font-size: 18px; }
.rd-dirge-epitaph { font-style: italic; color: var(--bronze); margin: 0 0 10px; }
.rd-dirge-actions { display: flex; gap: 10px; justify-content: center; }
.rd-dirge-noap { font-size: 12px; color: #a89f8f; margin: 8px 0 0; }
.rd-countup-line b { font-variant-numeric: tabular-nums; }

/* Aarrekätkön avaus: rivit kääntyvät esiin porrastetusti (inline animation-delay). */
.rd-loot-enter { animation: rd-loot-in .45s ease-out backwards; }
@keyframes rd-loot-in { 0% { opacity: 0; transform: translateY(10px) scale(.97); } 100% { opacity: 1; transform: none; } }
.rd-loot-res-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.rd-loot-res-rivals { font-size: 11px; color: var(--bronze); }
.rd-loot-res-roll b { font-variant-numeric: tabular-nums; }
.dg-log-bark { color: var(--gold); font-style: italic; }

/* Enrage-laskuri + bloodied (M2 §2.1) — kiinteä slotti, ei layout-siirtymää. */
.rd-status-strip { min-height: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 2px; text-align: center; }
.rd-enrage-count { font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: .02em; }
.rd-enrage-count b { font-variant-numeric: tabular-nums; }
.rd-status-soon .rd-enrage-count { color: #ef8d4a; }
.rd-enrage-on { font-size: 14px; font-weight: 800; color: #ef6b56; letter-spacing: .04em; text-transform: uppercase; animation: rd-enrage-pulse 1s ease-in-out infinite; }
@keyframes rd-enrage-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.dg-boss-hp-bloodied { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #fff; background: rgba(180, 30, 20, .82); border-radius: 4px; padding: 1px 6px; margin-left: 6px; align-self: center; animation: rd-bloodied-pulse 1.4s ease-in-out infinite; }
@keyframes rd-bloodied-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 40, 30, .5); } 50% { box-shadow: 0 0 8px 1px rgba(200, 40, 30, .7); } }
.dg-hpbar.dg-boss-bloodied { box-shadow: 0 0 0 1px rgba(220, 60, 40, .6), 0 0 10px rgba(200, 40, 30, .4); }

/* Telegraph (§2.2): kohotettu ase, 15 s vastata. Banneri samassa varatussa
   slotissa kuin enrage -> nolla layout-siirtymää. Puolustustaidot sykkivät. */
.rd-status-strip.rd-telegraph { min-height: 24px; }
.rd-telegraph-line { font-size: 13.5px; font-weight: 800; color: #ffcf6b; letter-spacing: .02em;
  text-shadow: 0 0 10px rgba(200, 120, 30, .5); animation: rd-tele-pulse 1.1s ease-in-out infinite; }
@keyframes rd-tele-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
.dg-skill.dg-skill-telegraph { border-color: #ffcf6b; box-shadow: 0 0 0 2px rgba(255, 207, 107, .5), 0 0 14px rgba(230, 150, 40, .5); animation: rd-skill-tele 1.1s ease-in-out infinite; }
@keyframes rd-skill-tele { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 207, 107, .5), 0 0 14px rgba(230, 150, 40, .45); } 50% { box-shadow: 0 0 0 2px rgba(255, 207, 107, .85), 0 0 20px rgba(230, 150, 40, .7); } }
@media (prefers-reduced-motion: reduce) { .rd-telegraph-line, .dg-skill.dg-skill-telegraph { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .dg-dmg-fall, .rd-loot-enter, .rd-wipe .rd-mem-skull { animation: none; opacity: 1; }
  .dg-boss-big img.rd-boss-idle { animation: none; }
  .dg-boss-big img.rd-boss-death { animation: none !important; filter: grayscale(.9) brightness(.6); opacity: .4; }
  .dungeons-scene[data-phase] { transition: none; }
  .rd-enrage-on, .dg-boss-hp-bloodied { animation: none; }
}

/* Boss-HP ihan yläreunassa */
.dg-boss-hp { flex: none; }
.dg-boss-hp-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.dg-boss-hp-name { font-family: var(--font-display); font-size: 21px; color: var(--night-text); }
.dg-boss-hp-tag { font-size: 12px; color: #d98a72; white-space: nowrap; }
.dg-boss-hp-num { margin-left: auto; font-size: 15px; color: var(--night-text); font-variant-numeric: tabular-nums; }
.dg-boss-hpbar { height: 18px; }

/* Näyttämö: iso boss keskellä + kierrosloki sivussa */
.dg-stage { flex: 1 1 auto; min-height: 0; display: flex; gap: 18px; align-items: stretch; }
.dg-boss-big { flex: 1 1 auto; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.dg-boss-big img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 14px 34px rgba(0,0,0,.55)); }
.dg-boss-big .dg-art-fb { font-size: 130px; color: rgba(201,162,75,.4); }
.dg-stage .dg-log { flex: none; width: 320px; max-height: 100%; border-left: 1px solid var(--night-line); padding-left: 14px; }
@media (max-width: 900px) {
  .dg-stage { flex-direction: column; }
  .dg-stage .dg-log { width: auto; max-height: 150px; border-left: 0; border-top: 1px solid var(--night-line); padding: 12px 0 0; }
}

/* Yhteiset: nimi/tagi/HP/momentum */
.dg-combatant-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dg-combatant-name { font-family: var(--font-display); font-size: 17px; color: var(--night-text); }
.dg-combatant-tag { font-size: 12px; white-space: nowrap; }
.dg-hero-tag { color: var(--gold); }
.dg-hp-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--night-text); margin-bottom: 3px; }
.dg-hp-lbl { color: var(--bronze); font-weight: 700; letter-spacing: .04em; }
.dg-hp-num { font-variant-numeric: tabular-nums; }
.dg-hpbar { height: 14px; background: rgba(0,0,0,.4); border-radius: 7px; overflow: hidden; border: 1px solid var(--night-line); }
.dg-hpfill { height: 100%; transition: width .3s ease; }
.dg-boss .dg-hpfill { background: linear-gradient(90deg, #7a2b2b, #b84a3a); }
.dg-hero .dg-hpfill { background: linear-gradient(90deg, #2f6b3a, #4aa85a); }
.dg-momentum { display: flex; align-items: center; gap: 8px; }
.dg-mom-label { font-size: 12px; color: var(--bronze); font-weight: 700; }
.dg-mom-pips { display: flex; gap: 5px; }
.dg-mom { width: 18px; height: 10px; border-radius: 3px; background: rgba(0,0,0,.4); border: 1px solid var(--night-line); }
.dg-mom-on { background: var(--gold); border-color: var(--gold); }

/* Alareuna: pelaajapalkki + taitorivi */
.dg-bottom { flex: none; display: flex; flex-direction: column; gap: 10px; }
.dg-hero-bar { display: flex; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(74,168,90,.35); background: rgba(0,0,0,.24); }
.dg-portrait { position: relative; width: 76px; height: 76px; flex: none; border-radius: 12px; overflow: hidden;
  border: 2px solid var(--gold); background: radial-gradient(120% 120% at 35% 25%, var(--night-soft), var(--night)); }
.dg-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dg-portrait .dg-art-fb { font-size: 26px; opacity: .8; }
.dg-hero-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* Taidot vaakarivinä alareunassa: ikoni + nimi + kustannus + AINA näkyvä kuvaus. */
.dg-skills-row { display: flex; flex-wrap: wrap; gap: 10px; }
.dg-skill { flex: 1 1 190px; min-width: 175px; display: flex; gap: 11px; align-items: flex-start; text-align: left; padding: 10px; border-radius: 11px;
  border: 1px solid var(--night-line); background: linear-gradient(180deg, var(--night-soft), var(--night)); color: var(--night-text); cursor: pointer;
  transition: border-color .12s, box-shadow .12s, filter .12s; }
.dg-skill:hover:not(:disabled) { border-color: var(--gold); box-shadow: 0 2px 10px rgba(201,162,75,.14); }
.dg-skill-dis, .dg-skill:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.35); }
.dg-skill-icon { position: relative; width: 44px; height: 44px; flex: none; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--night-line); background: radial-gradient(120% 120% at 32% 24%, var(--night-soft), var(--night)); }
.dg-skill-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dg-skill-icon .dg-art-fb { font-size: 15px; opacity: .85; }
.dg-skill-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dg-skill-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dg-skill-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--night-text); }
.dg-skill-cost { font-size: 11px; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dg-skill-desc { font-size: 12px; line-height: 1.4; color: var(--night-text); opacity: .78; }
.dg-skill-lock { font-size: 11px; color: #e0896b; }

.dg-log { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.dg-log-empty { color: var(--bronze); font-style: italic; font-size: 13px; }
.dg-log-round { border-left: 3px solid var(--gold); padding-left: 10px; }
.dg-log-n { display: block; font-size: 11px; font-weight: 700; color: var(--bronze); text-transform: uppercase; }
.dg-log-line { display: block; font-size: 13px; line-height: 1.5; color: var(--night-text); opacity: .9; }

.dg-result { text-align: center; padding: 14px; border-radius: 12px; }
.dg-result h3 { font-family: var(--font-display); margin: 0 0 6px; color: var(--night-text); }
.dg-won { background: rgba(74,168,90,.15); border: 1px solid rgba(74,168,90,.4); }
.dg-lost { background: rgba(184,74,58,.15); border: 1px solid rgba(184,74,58,.4); }
.dg-abandon { align-self: flex-start; }

@media (max-width: 620px) {
  .dg-hero-bar { flex-wrap: wrap; }
  .dg-skill { flex-basis: 100%; }
}