/* Portal skin for the inner pages (2026-10 redesign, phase 2).
   Loaded after the page stylesheets on every page except the homepage. It remaps the v4 colour tokens to the
   portal palette and dresses the shared components (page hero, section heads, panels, tables, buttons, forms)
   in the homepage's gold-framed look. Page-specific fixes are at the end. */

body.site-v4 {
  --v4-bg: #07090e;
  --v4-bg-soft: #0b0e15;
  --v4-panel: rgba(13, 17, 26, 0.94);
  --v4-panel-2: #121722;
  --v4-panel-3: #171d2a;
  --v4-line: rgba(217, 173, 87, 0.2);
  --v4-line-strong: rgba(217, 173, 87, 0.5);
  --v4-gold: #d9ad57;
  --v4-gold-bright: #f7dd9b;
  --v4-ink: #e9e3d2;
  --v4-copy: #c4bdab;
  --v4-muted: #8a8577;
  --v4-green: #78d48a;
  --v4-red: #ff8a6b;
  --v4-blue: #6db8ff;
  --pp-frame: linear-gradient(180deg, #a98235, #4d3a17 50%, #a98235);
  --pp-head: linear-gradient(180deg, #1c2333, #11161f);
  background: #07090e linear-gradient(180deg, rgba(7, 9, 14, 0.8), rgba(7, 9, 14, 0.94) 60%) fixed;
  background-image: linear-gradient(180deg, rgba(7, 9, 14, 0.8), rgba(7, 9, 14, 0.94) 60%), url("../assets/home-v5/page-bg.webp");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  color: var(--v4-ink);
  font-family: var(--p-body);
}
body.site-v4 > main { background: transparent; }

/* ---------- Page hero ---------- */
body.site-v4 .jo-page-hero { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--p-gold) 20%, var(--p-gold-hi) 50%, var(--p-gold) 80%, transparent) 1; }
body.site-v4 .jo-page-hero h1 { font-family: var(--p-display); font-weight: 700; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: #fbf3dc; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6), 0 4px 30px rgba(0, 0, 0, 0.95); text-wrap: balance; }
body.site-v4 .jo-page-hero h1::before { content: ""; display: block; width: 210px; height: 12px; margin: 0 auto 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='12' viewBox='0 0 210 12'%3E%3Cdefs%3E%3ClinearGradient id='a'%3E%3Cstop offset='0' stop-color='%23d9ad57' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d9ad57'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='5.5' width='90' height='1' fill='url(%23a)'/%3E%3Crect x='120' y='5.5' width='90' height='1' fill='url(%23a)' transform='rotate(180 165 6)'/%3E%3Crect x='100' y='1' width='10' height='10' fill='%23d9ad57' transform='rotate(45 105 6)'/%3E%3C/svg%3E") center / 210px 12px no-repeat; }

/* ---------- Section heads ---------- */
body.site-v4 .v4-home-section-head h2 { display: flex; align-items: center; gap: 10px; font-family: var(--p-display); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-gold-hi); }
body.site-v4 .v4-home-section-head h2::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--p-gold); transform: rotate(45deg); box-shadow: 0 0 8px var(--p-gold); }
body.site-v4 .v4-home-section-head > span { height: 1px; background: linear-gradient(90deg, var(--p-gold), rgba(217, 173, 87, 0.05)); opacity: 0.7; }
body.site-v4 .v4-home-section-head > a { font-family: var(--p-display); font-weight: 600; letter-spacing: 0.08em; color: var(--p-gold); }
body.site-v4 .v4-home-section-head > a:hover { color: var(--p-gold-hi); }
body.site-v4 main :is(h2, h3) { text-wrap: balance; }

/* ---------- Frames ---------- */
body.site-v4 :is(.v4-status-panel, .jo-card, .guild-card, .drop-sidebar-card, .sg-zone, .nw-item, .jo-info-status-card,
  .jo-info-feature-card, .v4-image-link-card, .v4-empty-inline, .alpha-brief, .alpha-warning, .alpha-final, .register-gate,
  .guide-table-wrap, .guide-role, .about-cta, .jm-facts, .jm-result, .roadmap-cta, .ab-built__item, .ab-cta, .jo-map__list,
  .jp-card, .content-area-box, .boss-table-container, .guide-page .about-grid, .jac-panel) {
  position: relative;
  background-color: var(--v4-panel);
  border: 1px solid transparent;
  border-image: var(--pp-frame) 1;
  border-radius: 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(247, 221, 155, 0.05);
}
body.site-v4 :is(.v4-status-panel, .jo-card, .guild-card, .drop-sidebar-card, .sg-zone, .jo-info-status-card,
  .jo-info-feature-card, .v4-image-link-card, .v4-empty-inline, .alpha-brief, .alpha-final, .guide-table-wrap, .guide-role,
  .about-cta, .jm-facts, .jm-result, .roadmap-cta, .ab-built__item, .ab-cta, .jo-map__list, .jp-card, .content-area-box,
  .boss-table-container, .guide-page .about-grid, .jac-panel)::before,
body.site-v4 :is(.v4-status-panel, .jo-card, .guild-card, .drop-sidebar-card, .sg-zone, .jo-info-status-card,
  .jo-info-feature-card, .v4-image-link-card, .v4-empty-inline, .alpha-brief, .alpha-final, .guide-table-wrap, .guide-role,
  .about-cta, .jm-facts, .jm-result, .roadmap-cta, .ab-built__item, .ab-cta, .jo-map__list, .jp-card, .content-area-box,
  .boss-table-container, .guide-page .about-grid, .jac-panel)::after {
  content: ""; position: absolute; z-index: 3; width: 14px; height: 14px; border: 2px solid var(--p-gold); pointer-events: none;
}
body.site-v4 :is(.v4-status-panel, .jo-card, .guild-card, .drop-sidebar-card, .sg-zone, .jo-info-status-card,
  .jo-info-feature-card, .v4-image-link-card, .v4-empty-inline, .alpha-brief, .alpha-final, .guide-table-wrap, .guide-role,
  .about-cta, .jm-facts, .jm-result, .roadmap-cta, .ab-built__item, .ab-cta, .jo-map__list, .jp-card, .content-area-box,
  .boss-table-container, .guide-page .about-grid, .jac-panel)::before { top: -4px; left: -4px; right: auto; bottom: auto; border-right: 0; border-bottom: 0; background: none; }
body.site-v4 :is(.v4-status-panel, .jo-card, .guild-card, .drop-sidebar-card, .sg-zone, .jo-info-status-card,
  .jo-info-feature-card, .v4-image-link-card, .v4-empty-inline, .alpha-brief, .alpha-final, .guide-table-wrap, .guide-role,
  .about-cta, .jm-facts, .jm-result, .roadmap-cta, .ab-built__item, .ab-cta, .jo-map__list, .jp-card, .content-area-box,
  .boss-table-container, .guide-page .about-grid, .jac-panel)::after { bottom: -4px; right: -4px; top: auto; left: auto; border-left: 0; border-top: 0; background: none; }

/* Picture frames: gold border, no panel fill */
body.site-v4 :is(.v4-feature-art, .jo-info-showcase, .jm-hero__art, .jm-gallery__frame, .roadmap-shot__frame, .ab-lead__shot,
  .ab-built__frame, .alpha-fit__art, .jo-map__stage, .sg-zone__hero) {
  border: 1px solid transparent; border-image: var(--pp-frame) 1; border-radius: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
body.site-v4 .v4-feature-art__content h2 { font-family: var(--p-display); font-weight: 700; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.02; letter-spacing: 0.01em; text-transform: uppercase; color: #fbf3dc; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6), 0 4px 24px rgba(0, 0, 0, 0.9); }
body.site-v4 .v4-feature-art__content small { display: inline-block; padding: 4px 10px; font: 700 0.75rem/1 var(--p-display); letter-spacing: 0.14em; text-transform: uppercase; color: #2b1a03; background: linear-gradient(180deg, #f7dd9b, #c9913b); }
body.site-v4 .v4-feature-art__content p { color: #ddd5c0; font-size: 1rem; }

/* Status panel rows */
body.site-v4 .v4-status-panel__top { margin: -1px -1px 0; padding-inline: 18px; background: var(--pp-head); border-bottom: 1px solid var(--p-gold-lo); }
body.site-v4 .v4-status-panel__top small { font-family: var(--p-display); letter-spacing: 0.12em; color: var(--p-gold); }
body.site-v4 .v4-status-panel__top strong { font-family: var(--p-display); font-weight: 700; font-size: 1.6rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--p-gold-hi); }
body.site-v4 .v4-status-panel dt { font-family: var(--p-body); letter-spacing: 0.02em; text-transform: none; color: var(--v4-muted); }
body.site-v4 .v4-status-panel dd { color: var(--v4-ink); }
body.site-v4 .v4-status-panel dl > div { border-bottom: 1px dashed #2a2418; }

/* ---------- Tables ---------- */
body.site-v4 :is(.ranking-table, .table, .guide-table-wrap table) { border-collapse: collapse; background: transparent; }
body.site-v4 :is(.ranking-table, .table, .guide-table-wrap table) thead th { padding-block: 12px; font: 600 0.88rem/1.2 var(--p-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--p-gold); background: var(--pp-head); border-bottom: 1px solid var(--p-gold-lo); }
body.site-v4 :is(.ranking-table, .table, .guide-table-wrap table) tbody td { border-bottom: 1px dashed #2a2418; background: transparent; }
body.site-v4 :is(.ranking-table, .table, .guide-table-wrap table) tbody tr:hover td { background: rgba(217, 173, 87, 0.05); }
body.site-v4 .ranking-table tbody tr { border-left: 0; box-shadow: none; }

/* ---------- Buttons ---------- */
body.site-v4 :is(.btn-primary, .alpha-btn--primary, .jo-btn--gold, .v4-btn--gold, .register-gate button[type="submit"], .jp-card__buy, .hv4-btn--gold) {
  color: #2b1a03; background: linear-gradient(180deg, #fbe39f 0%, #e4ad4c 48%, #b8792a 100%); border: 1px solid #6f4f17; border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, 0.8), 0 0 18px rgba(228, 173, 76, 0.2);
  font-family: var(--p-display); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-shadow: none;
  transition: filter 150ms ease, transform 100ms ease;
}
body.site-v4 :is(.btn-primary, .alpha-btn--primary, .jo-btn--gold, .v4-btn--gold, .register-gate button[type="submit"], .jp-card__buy, .hv4-btn--gold):hover { filter: brightness(1.1); color: #2b1a03; }
body.site-v4 :is(.btn-primary, .alpha-btn--primary, .register-gate button[type="submit"], .jp-card__buy):active { transform: translateY(1px); }

/* ---------- Forms ---------- */
body.site-v4 main :is(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], select, textarea) {
  color: var(--v4-ink); background-color: #06080c; border: 1px solid #3a2f1a; border-radius: 2px; font-family: var(--p-body);
}
body.site-v4 main :is(input, select, textarea):focus { border-color: var(--p-gold); outline: none; box-shadow: 0 0 0 2px rgba(217, 173, 87, 0.2); }

/* ---------- Notices ---------- */
body.site-v4 .jo-flash { border-radius: 0; border-left-width: 3px; }

@media (max-width: 640px) {
  body.site-v4 { background-attachment: scroll; }
}

/* ---------- Page palettes: the teal step fills become portal panels ---------- */
body.site-v4 .page-about-v2 { --ab-step: #10141e; --ab-step-2: #171d2a; }
body.site-v4 .page-roadmap { --rm-step: #10141e; --rm-step-2: #171d2a; }
body.site-v4 .page-news-v2 { --nw-step: #10141e; --nw-step-2: #171d2a; }
body.site-v4 .jm-page { --jm-step: #10141e; --jm-step-2: #171d2a; }
body.site-v4 .jm-page--solo { --jm-field: #121722; }
body.site-v4 :is(.ab-stage, .roadmap-group--planned, .jm-bottom) { border: 1px solid transparent; border-image: var(--pp-frame) 1; }
body.site-v4 :is(.ab-faq details, .jm-faq, .ab-journal nav a, .guide-page details) { border-left: 2px solid var(--p-gold-lo); }