/* Vote & Contribute (#/vote) — Facelift A · Forum Command. Rajattu .vf-juureen,
   ei vuoda muihin näkymiin. Talon tyyli omistajan päätöksellä (18.9.2026):
   tokens.css:n värit, Cinzel otsikoissa ja Georgia leipätekstissä, styles.css:n
   kaiverretut .btn-nauhat ja .imm-card-kortit sellaisinaan. Lukittu referenssi:
   Facelift/Shops/Vote/REFERENCE.html. */

.vf {
  position: relative;
  flex: 1 0 auto;
  min-height: 100%;
  color: var(--night-text);
  background: #0c0906;
  font-family: var(--font-body);
}
/* Taustakuva ruudun mittaisena eikä listan mittaisena: pitkä sivu jatkuu tummana,
   eikä sama maalaus ala uudestaan kesken (Marketin opetus 11.9.2026). */
.vf-backdrop {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(100vh, 980px);
  background:
    linear-gradient(180deg, rgba(12, 9, 6, .5) 0%, rgba(12, 9, 6, .82) 36%, rgba(12, 9, 6, 1) 100%),
    url('/assets/scenes/guild-banner-forum.jpg') center 30% / cover no-repeat;
  pointer-events: none;
}
.vf-inner {
  container: vf / inline-size;
  position: relative;
  z-index: 1;
  width: min(1360px, 100%);
  margin: 0 auto;
  padding: 24px 24px 40px;
}

.vf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.vf-eyebrow { margin: 0; font: 700 12px/1.3 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.vf-h1 { margin: 2px 0 0; font: 700 34px/1.12 var(--font-display); letter-spacing: .05em; color: var(--night-text); }
.vf-lede { margin: 8px 0 0; max-width: 62ch; color: #d8ccb2; font-size: 16px; }
.vf-cp { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 16px 6px 10px; background: rgba(36, 28, 18, .92); border: 1px solid var(--night-line); border-radius: var(--radius); white-space: nowrap; }
.vf-cp b { font: 700 24px/1 var(--font-body); color: var(--night-text); }
.vf-cp span { font: 700 11px/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }

.vf-tabs { display: flex; gap: 2px; margin: 22px 0 16px; border-bottom: 1px solid var(--night-line); }
.vf-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 20px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: #b9a88a; font: 700 13px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.vf-tab:hover { color: var(--night-text); background: rgba(0, 0, 0, .2); }
.vf-tab[aria-selected="true"] { color: #F2D98B; border-bottom-color: var(--gold); }
.vf-count { font: 700 12px/1 var(--font-body); letter-spacing: 0; padding: 3px 7px; border-radius: 999px; background: var(--gold); color: var(--night); }

.vf-grid { display: grid; grid-template-columns: 310px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.vf-grid-one { grid-template-columns: 1fr; }
.vf .imm-card { overflow: visible; background: rgba(36, 28, 18, .94); }
.vf .imm-card h2 { margin-bottom: 12px; }
.vf-h2-gap { margin-top: 18px !important; }

/* lähdelista */
.vf-list { padding: 10px; }
.vf-group { margin: 6px 8px 8px; }
.vf-group h3 { margin: 12px 0 2px; font: 700 12px/1.3 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.vf-group p, .vf-empty { margin: 0; font-size: 14px; font-style: italic; color: #8A7A5F; }
.vf-empty { padding: 4px 8px 8px; }
.vf-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 10px; margin: 0 0 4px; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; }
.vf-row:hover { background: rgba(201, 162, 75, .06); border-color: var(--night-line); }
.vf-row[aria-selected="true"] { background: rgba(201, 162, 75, .12); border-color: var(--bronze); }
.vf-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.vf-ico { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius); background: #1a140d; border: 1px solid var(--night-line); }
.vf-mono { font: 700 12px/1 var(--font-display); letter-spacing: .06em; color: var(--gold); }
/* Rivi pysyy enintään kahden nimi- ja kahden kuvausrivin korkuisena kaikilla
   leveyksillä; pitkä yksittäinen sana (BrowserGamesTop) katkeaa eikä valu sirun päälle. */
.vf-txt { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; min-width: 0; }
.vf-txt b, .vf-txt small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.vf-txt b { font: 700 15px/1.3 var(--font-body); color: var(--night-text); }
.vf-txt small { font-size: 13.5px; color: #8A7A5F; }
.vf-hint { display: none; font-size: 13px; font-style: italic; color: #b9a88a; }
.vf-row .vf-chip, .vf-row .vf-go, .vf-row .vf-dsk { flex: none; }
.vf-go { display: none; }

.vf-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 9px; border-radius: 999px; font: 700 11px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; }
.vf-chip-new { color: var(--night); background: var(--gold); }
.vf-chip-done { color: #b9cf97; border-color: #5d7240; background: rgba(74, 93, 51, .25); }
.vf-chip-wait { color: #b9a88a; border-color: var(--night-line); font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-size: 13px; }
.vf-chip-warn { color: #f0c4b8; border-color: #8e3a2f; background: rgba(122, 32, 32, .3); }
/* Odottava piste hohtaa listassa (omistaja 23.9.2026: "+1 ei oikein osu silmiin,
   nämä contributet on tärkeitä"). Kirkkaampi kulta ja kehä kantavat tilan
   paikallaankin; sykkivä hohde vain kiinnittää katseen ja jää pois, kun liike on
   pyydetty pois. Keyframe vf-point-waiting asuu styles.css:ssä, koska tämän
   tiedoston scope-testi lukee keyframe-pysäkit selektoreiksi. Vain listarivin
   siru: näyttämön kopio on jo ison otsikon vieressä, ja puhelimella sirun
   paikalla on kultainen Open/Vote-nappi. */
.vf-row .vf-chip-new { color: #1a120a; background: #F2D98B; border-color: #FFF1C4; box-shadow: 0 0 0 2px rgba(242, 217, 139, .18), 0 0 8px 0 rgba(242, 217, 139, .4); animation: vf-point-waiting 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .vf-row .vf-chip-new { animation: none; }
}

/* valitun kohteen näyttämö */
.vf-stage { padding: 18px; }
.vf-media { position: relative; }
.vf-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--night-line); background: #1a140d; }
.vf-thumb-fallback { background: linear-gradient(180deg, rgba(12, 9, 6, .35), rgba(12, 9, 6, .8)), url('/assets/scenes/guild-banner-forum.jpg') center 35% / cover no-repeat; }
.vf-media-badge { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius); background: rgba(12, 9, 6, .82); border: 1px solid var(--bronze); }
.vf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 0 6px; }
.vf-who { display: grid; }
.vf-who small { font-size: 13.5px; color: #8A7A5F; }
.vf-title { margin: 0; font: 700 25px/1.2 var(--font-display); letter-spacing: .03em; color: var(--night-text); }
.vf-quote { margin: 10px 0 14px; padding: 0 0 0 14px; border-left: 2px solid var(--bronze); color: #d8ccb2; font-style: italic; }
.vf-how { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 14px; background: rgba(201, 162, 75, .08); border: 1px solid var(--night-line); border-radius: var(--radius); }
.vf-how img { flex: none; }
.vf-how p { margin: 0; font-size: 16px; }
.vf-how b { color: #F2D98B; }
.vf-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.vf-help { margin: 10px 0 0; font-size: 14px; font-style: italic; color: #8A7A5F; }
.vf-cta .vf-help { margin: 0; }
.vf-srow { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(78, 63, 40, .6); font-size: 15px; }
.vf-srow span { color: #b9a88a; }
.vf-reward { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.vf-reward img { width: 72px; height: 72px; padding: 10px; background: #1a140d; border: 1px solid var(--night-line); border-radius: var(--radius); }
.vf-state { margin-top: 16px; padding: 12px 14px; background: rgba(0, 0, 0, .2); border: 1px solid var(--night-line); border-radius: var(--radius); }
.vf-state p { margin: 0 0 6px; font-size: 14px; color: #b9a88a; }
.vf-reason { margin: 10px 0 0; font-size: 14px; color: #f0c4b8; }
.vf-receipt { margin-top: 14px; padding: 12px 14px; border: 1px solid #5d7240; background: rgba(74, 93, 51, .22); border-radius: var(--radius); font-size: 15px; }
.vf-receipt b { color: #cfe3ad; }

/* oikea sarake */
.vf-big { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.vf-big b { font: 700 40px/1 var(--font-body); }
.vf-steps { margin: 12px 0 14px; padding: 0; list-style: none; counter-reset: vf-step; }
.vf-steps li { position: relative; margin: 0 0 12px; padding-left: 34px; font-size: 15px; color: #d8ccb2; }
.vf-steps li::before { counter-increment: vf-step; content: counter(vf-step); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--bronze); border-radius: 50%; font: 700 12px/1 var(--font-display); color: var(--gold); }
.vf-steps b { display: block; font: 700 12px/1.4 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #F2D98B; }

/* puhelimen kiinteä lunastuspalkki (vain Spend) */
.vf-sticky { display: none; }
.vf-sticky .btn:disabled { color: #8A7A5F; --btn-band-top: rgba(36, 28, 18, .55); --btn-band-bot: rgba(36, 28, 18, .55); --btn-edge: var(--night-line); }

/* Rajat mitataan pelin sisältä: kehys vie työpöydällä ~455 px, joten 1440 px:n
   ikkunassa näkymällä on ~985 px ja 1280:ssa ~825 px. Kahdessa sarakkeessa lista
   kulkee koko korkeudelta ja näyttämö + sivukortti pinoutuvat sen viereen. */
@container vf (max-width: 1100px) {
  .vf-grid { grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .vf-grid > .vf-list { grid-row: span 2; }
  .vf-side { grid-column: 2; }
}
@container vf (max-width: 760px) {
  .vf-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .vf-grid > .vf-list { grid-row: auto; }
  .vf-side { grid-column: auto; }
  .vf-earnstage, .vf-decision { display: none; }
  .vf-list { padding: 4px; }
  .vf-row { min-height: 64px; }
  .vf .vf-row .vf-go { display: inline-flex; padding: 10px 14px; }
  .vf .vf-row .vf-dsk { display: none; }
  .vf .vf-hint { display: block; }
  .vf-sticky { display: flex; position: sticky; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 8; margin-top: 12px; padding: 10px 12px; gap: 10px; align-items: center; background: #120d09; border: 1px solid var(--night-line); border-radius: var(--radius); box-shadow: 0 -8px 24px rgba(0, 0, 0, .45); }
  .vf-sticky-sum { flex: 1; font-size: 14px; color: #b9a88a; }
  .vf-sticky-sum b { color: var(--night-text); }
}
@container vf (max-width: 560px) {
  .vf-h1 { font-size: 27px; }
  .vf-tabs { margin-top: 16px; }
  .vf-tab { flex: 1; justify-content: center; padding: 8px 10px; }
}
@media (max-width: 899px) {
  .vf-inner { padding: 16px 12px 24px; }
  /* Alapalkki on fixed (z 30): kiinteä lunastuspalkki nousee sen yläpuolelle. */
  body.has-nav .vf-sticky { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}