/* Visual Sin — téma: Metal · 2026-10-15
   Tokenek: fekete alap, semleges törtfehér hangsúly (közös sárga nincs — DONTESEK 2026-10-14, 237. sor),
   a nyomdai jel itt piros. A négy világ saját színe a zenekarok hivatalos oldalairól (DONTESEK 2026-10-14, 247. sor;
   böngészővel leolvasva 2026-10-14: hanabie.jp · bandmaid.tokyo · lovebites.jp · nemophila.tokyo). */
.theme-metal {
  --bg: #0b0b0b;
  --bg-2: #141414;
  --card: #101010;
  --ink: #e8e6df;
  --ink-soft: #c9c7c0;
  --muted: #9d9d9a;
  --line: rgba(232, 230, 223, .16);
  --line-strong: rgba(232, 230, 223, .34);
  --accent: #e8e6df;
  --accent-2: #ce2029;
  --on-accent: #0b0b0b;
  --eyebrow: #b3b0a8;
  --print-shadow: rgba(206, 32, 41, .9);
  /* a négy világ: fő szín (szöveg) + második szín (csík, eltolt árnyék) */
  --hana: #b44ce8; --hana-2: #78ef48;   /* lila + savzöld */
  --maid: #fff301; --maid-2: #f2f2f2;   /* sárga + fehér */
  --bite: #ededed; --bite-2: #5a6e85;   /* fehér + viharkék */
  --night: #e0566a; --night-2: #c8c8c8; /* piros + ezüst */
}
.theme-metal [lang="ja"] { font-family: var(--font-jp); }

/* Hero */
.theme-metal .vs-hero { background: radial-gradient(circle at 75% 45%, rgba(232, 230, 223, .06), transparent 30%), linear-gradient(120deg, var(--bg) 0 58%, #141414); }
.bands { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: 6px; font: 400 22px/1.35 var(--font-display); letter-spacing: .04em; }
.bands li { display: flex; align-items: center; gap: var(--sp-3); }
.bands li::before { content: ""; width: 28px; height: 2px; background: var(--c, var(--ink)); flex-shrink: 0; }
.bands [lang="ja"] { font: 500 19px var(--font-jp); color: var(--muted); }
.bands .hana { --c: var(--hana); } .bands .maid { --c: var(--maid); } .bands .bite { --c: var(--bite); } .bands .night { --c: var(--night); }

/* Legyező: a négy világ angol mintája */
.theme-metal .vs-fan img { width: 40%; }
.theme-metal .vs-fan .f1 { left: 0; top: 2%; transform: rotate(-6deg); }
.theme-metal .vs-fan .f2 { right: 2%; top: 0; transform: rotate(5deg); }
.theme-metal .vs-fan .f3 { left: 14%; top: 40%; transform: rotate(-2deg); z-index: 2; }
.theme-metal .vs-fan .f4 { right: 8%; top: 42%; transform: rotate(4deg); z-index: 3; }
@media (max-width: 900px) { .theme-metal .vs-fan { aspect-ratio: 1 / 1.05; } .theme-metal .vs-fan img { width: 40%; } }

/* Futószalag */
.theme-metal .marquee-track > span { color: var(--ink); }
.theme-metal .marquee [lang="ja"] { font: 700 22px var(--font-jp); }

/* Négy világ: kártyák a világ fő színével, alul a második szín csíkja */
.world { --c: var(--ink); --c2: var(--muted); position: relative; display: flex; flex-direction: column; gap: var(--sp-3); }
.world::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--c) 0 60%, var(--c2) 60%); }
.world .num { font: 400 var(--fs-label) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vs .card-grid .world strong { color: var(--c); font-size: 40px; margin: 0; }
.world.hana { --c: var(--hana); --c2: var(--hana-2); }
.world.maid { --c: var(--maid); --c2: var(--maid-2); }
.world.bite { --c: var(--bite); --c2: var(--bite-2); }
.world.night { --c: var(--night); --c2: var(--night-2); }

/* Színcímkék: két színpötty a világ palettájából */
.vilag-szinek .tag { display: inline-flex; align-items: center; gap: 6px; }
.vilag-szinek .tag i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); }
.vilag-szinek .tag i + i { margin: 0 6px 0 -4px; }
.vilag-szinek .hana i:first-child { background: var(--hana); } .vilag-szinek .hana i + i { background: var(--hana-2); }
.vilag-szinek .maid i:first-child { background: var(--maid); } .vilag-szinek .maid i + i { background: var(--maid-2); }
.vilag-szinek .bite i:first-child { background: var(--bite); } .vilag-szinek .bite i + i { background: var(--bite-2); }
.vilag-szinek .night i:first-child { background: var(--night); } .vilag-szinek .night i + i { background: var(--night-2); }

/* Galéria: 4 hasáb, mobilon 2; zenekar-szűrő (2026-10-16) */
.theme-metal { --mintak-cols: 4; --mintak-cols-phone: 2; }
.theme-metal .minta.hana { --c: var(--hana); --c2: var(--hana-2); }
.theme-metal .minta.maid { --c: var(--maid); --c2: var(--maid-2); }
.theme-metal .minta.bite { --c: var(--bite); --c2: var(--bite-2); }
.theme-metal .minta.night { --c: var(--night); --c2: var(--night-2); }
.theme-metal .minta-zoom img { box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .9); }
.theme-metal .minta-szoveg span { font-family: var(--font-body); color: var(--ink-soft); }
.theme-metal .minta-szoveg span[lang="ja"] { font-family: var(--font-jp); }
@media (max-width: 520px) { .theme-metal .minta-szoveg strong { font-size: 18px; } .theme-metal .minta-vilag { font-size: 10px; } }

/* Mondatlista a világ színeivel */
.statement.hana strong { color: var(--hana); }
.statement.maid strong { color: var(--maid); }
.statement.bite strong { color: var(--bite); text-shadow: .04em .035em 0 var(--bite-2); }
.statement.night strong { color: var(--night); }

/* Az első darab: a valódi minta, nem sziluett */
.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: center; }
.product-visual { margin: 0; aspect-ratio: 1 / 1; display: grid; place-items: center; border: 1px solid var(--line); background: #000; }
.product-visual img { width: 62%; display: block; }
.theme-metal .quote { border-left-color: var(--accent-2); }
@media (max-width: 900px) { .product { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } }

/* Zenekar-szűrő: JS nélkül rejtve (hidden), akkor minden kép látszik */
.szuro { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.szuro[hidden] { display: none; }
.szuro button {
  --c: var(--ink);
  min-height: 44px; padding: 10px 18px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font: 400 15px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.szuro button:hover { border-color: var(--c); }
.szuro button[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: var(--bg); }
.szuro button:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.szuro .hana { --c: var(--hana); } .szuro .maid { --c: var(--maid); } .szuro .bite { --c: var(--bite); } .szuro .night { --c: var(--night); }
.szuro + .szuro-allapot + .mintak { margin-top: var(--sp-5); }
.mintak .minta[hidden] { display: none; }