/* Justice Online mode guides (Solo Arena, Chaos FFA). Same language as the roadmap:
   site colours and type, surfaces separated by tone steps, real pictures from the game. */
.jm-page {
    --jm-step: #0a161d; --jm-step-2: #0e1d26; --jm-accent: var(--v4-gold, #c49a5e); --jm-accent-2: var(--v4-gold-bright, #e2bf85);
    --jm-ink: var(--v4-ink, #eceae4); --jm-copy: var(--v4-copy, #adb7bb);
    color: var(--jm-ink); padding: 28px 18px 100px;
}
.jm-page--ffa { --jm-field: #1a0f12; }
.jm-page--solo { --jm-field: #0c1a22; }
.jm-shell { max-width: 1160px; margin: 0 auto; }
.jm-page h2, .jm-page h3 { text-wrap: balance; }

.jm-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 28px; color: var(--jm-copy); font-size: 13px; }
.jm-breadcrumb a { color: var(--jm-copy); text-decoration: none; }
.jm-breadcrumb a:hover, .jm-breadcrumb a:focus-visible { color: var(--jm-accent-2); }

/* Hero: words on the left, the mode's picture large on its own field */
.jm-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.jm-hero .jm-hero__title { margin: 0; color: #fff; font-family: var(--p-display, "Barlow Condensed", "Arial Narrow", sans-serif); font-size: clamp(38px, 5vw, 68px); font-weight: 400; line-height: 1.02; letter-spacing: -.03em; }
.jm-hero p { max-width: 54ch; margin: 22px 0 0; color: var(--jm-ink); font-size: 18px; line-height: 1.65; opacity: .9; }
.jm-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
.jm-action { display: inline-flex; align-items: center; padding: 15px 24px; background: var(--jm-accent); color: #10171b !important; font-size: 16px; font-weight: 700; text-decoration: none !important; transition: background-color .15s, transform .15s; }
.jm-action:hover, .jm-action:focus-visible { background: var(--jm-accent-2); }
.jm-action:active { transform: translateY(1px); }
.jm-link { color: var(--jm-accent-2) !important; font-size: 16px; text-decoration: none !important; }
.jm-link:hover, .jm-link:focus-visible { text-decoration: underline !important; text-underline-offset: 4px; }
.jm-hero__art { margin: 0; display: grid; place-items: center; background: var(--jm-field); aspect-ratio: 1 / 1; overflow: hidden; }
.jm-page--solo .jm-hero__art { aspect-ratio: 712 / 620; }
.jm-page--solo .jm-hero__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jm-page--ffa .jm-hero__art img { width: min(62%, 256px); height: auto; animation: jm-seal 9s ease-in-out infinite; }
@keyframes jm-seal { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.04); } }

/* Facts: three statements on one tonal band */
.jm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 56px; padding: 36px clamp(20px, 4vw, 48px); background: var(--jm-step); }
.jm-fact strong { display: block; color: var(--jm-accent-2); font-family: var(--p-display, "Barlow Condensed", "Arial Narrow", sans-serif); font-size: clamp(26px, 2.6vw, 34px); font-weight: 400; line-height: 1.1; }
.jm-fact span { display: block; margin-top: 8px; color: var(--jm-ink); font-size: 16px; line-height: 1.5; opacity: .85; }

/* Sections */
.jm-section { margin-top: 120px; scroll-margin-top: 24px; }
.jm-section h2 { margin: 0 0 36px; color: var(--jm-ink); font-family: var(--p-display, "Barlow Condensed", "Arial Narrow", sans-serif); font-size: clamp(32px, 3.8vw, 48px); font-weight: 400; line-height: 1.08; letter-spacing: -.02em; }
.jm-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 56px; margin: 0; padding: 0; list-style: none; }
.jm-step { display: flex; gap: 22px; align-items: flex-start; }
.jm-step__icon { flex: none; width: 76px; height: 76px; }
.jm-step h3 { margin: 0 0 8px; color: var(--jm-ink); font-family: var(--p-display, "Barlow Condensed", "Arial Narrow", sans-serif); font-size: 23px; font-weight: 400; line-height: 1.25; }
.jm-step p, .jm-result p { max-width: 60ch; margin: 0; color: var(--jm-ink); font-size: 16px; line-height: 1.65; opacity: .86; }

.jm-gallery { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-top: 64px; }
.jm-gallery figure { margin: 0; }
.jm-gallery__frame { overflow: hidden; background: var(--jm-step); }
.jm-gallery img { display: block; width: 100%; height: auto; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.jm-gallery figure:hover img { transform: scale(1.03); }
.jm-gallery figcaption { margin-top: 12px; color: var(--jm-copy); font-size: 15px; }

/* Result: copy beside the picture, on the mode's field */
.jm-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 56px; align-items: center; padding: 56px clamp(20px, 4vw, 56px); background: var(--jm-field); }
.jm-result h2 { margin-bottom: 18px; }
.jm-result__art { margin: 0; }
.jm-result__art img { display: block; width: 100%; height: auto; }
.jm-result__medals { display: flex; justify-content: center; align-items: flex-end; gap: 4%; margin: 0; }
.jm-result__medals img { width: 30%; height: auto; }
.jm-result__medals img:first-child { width: 36%; }

/* Questions: tone-step rows instead of ruled lines */
.jm-faq-list { max-width: 880px; }
.jm-faq { margin-top: 10px; background: var(--jm-step); }
.jm-faq summary { cursor: pointer; padding: 20px 24px; color: var(--jm-ink); font-family: var(--p-display, "Barlow Condensed", "Arial Narrow", sans-serif); font-size: 18px; transition: background-color .15s; }
.jm-faq summary:hover, .jm-faq summary:focus-visible { background: var(--jm-step-2); }
.jm-faq[open] summary { color: var(--jm-accent-2); }
.jm-faq p { max-width: 64ch; margin: 0; padding: 0 24px 22px; color: var(--jm-ink); font-size: 16px; line-height: 1.7; opacity: .86; }

.jm-bottom { margin-top: 100px; padding: 36px clamp(20px, 4vw, 48px); background: var(--jm-step-2); }
.jm-bottom > p { margin: 0; color: var(--jm-copy); font-size: 15px; line-height: 1.7; }
.jm-related { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 16px; }
.jm-related a { color: var(--jm-accent-2); font-size: 17px; text-decoration: none; }
.jm-related a:hover, .jm-related a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* Entrance (js/reveal.js) */
.js-reveal .jm-page [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--reveal-i, 0) * 75ms); }
.js-reveal .jm-page [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .jm-page--ffa .jm-hero__art img { animation: none; }
    .jm-gallery img, .jm-action, .jm-faq summary { transition: none; }
    .jm-gallery figure:hover img { transform: none; }
}

@media (max-width: 900px) {
    .jm-hero, .jm-result { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .jm-page--ffa .jm-hero__art { aspect-ratio: 16 / 9; }
    .jm-page--ffa .jm-hero__art img { width: min(40%, 200px); }
    .jm-steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
    .jm-page { padding: 18px 16px 70px; }
    .jm-facts { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 40px; }
    .jm-section { margin-top: 80px; }
    .jm-gallery { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 44px; }
    .jm-step__icon { width: 56px; height: 56px; }
    .jm-step { gap: 16px; }
    .jm-result { padding: 36px 20px; }
    .jm-bottom { margin-top: 70px; }
}