.portal-grid.journey-active{display:block}.journey-shell{width:100%;min-width:0;color:#eef7f7}.journey-gamebar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.journey-switcher{display:flex;flex-wrap:wrap;gap:8px}.journey-game,.journey-stage{border:1px solid rgba(var(--accent-rgb),.28);background:rgba(3,10,13,.72);color:rgba(238,248,248,.75);cursor:pointer}.journey-game{min-height:38px;padding:0 14px;border-radius:4px;font-weight:800;letter-spacing:.1em}.journey-game.selected,.journey-game:hover,.journey-stage.selected{border-color:rgb(var(--accent-rgb));color:rgb(var(--accent-rgb));background:rgba(var(--accent-rgb),.14)}.journey-date{display:grid;justify-items:end;gap:4px}.journey-date small,.journey-head small,.journey-clock>small,.journey-cardhead small,.journey-selected>small,.journey-mastery small,.journey-overall small{color:rgba(226,238,239,.52);font-size:10px;font-weight:800;letter-spacing:.14em}.journey-date b{color:rgb(var(--accent-rgb));font-size:12px;letter-spacing:.08em}.journey-hero{position:relative;overflow:hidden;min-height:720px;border:1px solid rgba(var(--accent-rgb),.2);border-radius:6px;background:linear-gradient(135deg,#0b1418,#030708)}.journey-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 72% 28%,rgba(var(--accent-rgb),.13),transparent 34%),linear-gradient(90deg,rgba(2,5,7,.82),rgba(2,5,7,.38));}.journey-top,.journey-stages,.journey-overall,.journey-selected,.journey-cards{position:relative}.journey-top{display:flex;justify-content:space-between;gap:28px;padding:28px 30px 18px}.journey-head{max-width:720px}.journey-head h2{margin:7px 0 8px;font-size:clamp(28px,4vw,52px);line-height:.96}.journey-head p,.journey-selected p,.journey-mastery p{margin:0;color:rgba(224,235,236,.62);font-size:13px;line-height:1.5}.journey-clock{min-width:350px;padding:13px 15px;border:1px solid rgba(var(--accent-rgb),.18);background:rgba(2,8,10,.64)}.journey-clockgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:9px}.journey-time{display:grid;justify-items:center;gap:4px}.journey-time b{color:rgb(var(--accent-rgb));font-size:28px}.journey-time small{font-size:8px;letter-spacing:.12em;color:rgba(230,241,241,.48)}.journey-stages{max-width:950px;padding:10px 30px 22px}.journey-stagehdr{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;color:rgba(238,247,247,.82);font-size:11px;font-weight:800}.journey-stagehdr small{color:rgba(var(--accent-rgb),.62);font-size:9px;letter-spacing:.1em}.journey-stagebuttons{display:flex;flex-wrap:wrap;gap:7px}.journey-stage{width:42px;height:42px;border-radius:3px;font-weight:800}.journey-overall,.journey-selected,.journey-card{margin-left:30px;margin-right:30px;border:1px solid rgba(var(--accent-rgb),.15);background:rgba(5,11,14,.8)}.journey-overall{display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding:15px 16px}.journey-overall>div{display:grid;gap:4px}.journey-overall>span{align-self:end;color:rgba(226,237,238,.55);font-size:10px;font-weight:800}.journey-track{grid-column:1/-1;height:7px;border:1px solid rgba(var(--accent-rgb),.18);background:rgba(255,255,255,.03)}.journey-fill{display:block;width:0;height:100%;background:rgb(var(--accent-rgb))}.journey-selected{margin-top:14px;padding:17px 18px}.journey-selected h3{margin:5px 0 6px;color:rgb(var(--accent-rgb));font-size:21px}.journey-cards{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:14px;margin:14px 30px 30px}.journey-card{margin:0;padding:17px}.journey-cardhead{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(var(--accent-rgb),.12)}.journey-cardhead b{font-size:10px;color:rgba(239,247,247,.72)}.journey-list{display:grid;gap:8px;padding-top:12px}.journey-row{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:10px;min-height:50px;padding:8px 10px;border:1px solid rgba(255,255,255,.055)}.journey-diamond{width:12px;height:12px;border:1px solid rgba(var(--accent-rgb),.38);transform:rotate(45deg)}.journey-rowcopy{display:flex;justify-content:space-between;gap:12px}.journey-rowcopy b{font-size:12px}.journey-rowcopy small{color:rgba(var(--accent-rgb),.68);font-size:9px;font-weight:800}.journey-reward{display:flex;justify-content:space-between;gap:12px;padding:10px;border:1px solid rgba(255,255,255,.055)}.journey-reward small{color:rgba(224,235,236,.48);font-size:9px;letter-spacing:.1em}.journey-reward b{color:rgb(var(--accent-rgb));font-size:11px}.journey-mastery{margin-top:14px;padding:15px;border:1px solid rgba(var(--accent-rgb),.24);background:rgba(var(--accent-rgb),.06)}.journey-mastery b{display:block;margin:5px 0 7px}@media(max-width:960px){.journey-gamebar,.journey-top{align-items:stretch;flex-direction:column}.journey-date{justify-items:start}.journey-clock{min-width:0}.journey-cards{grid-template-columns:1fr}}@media(max-width:640px){.journey-top,.journey-stages{padding-left:16px;padding-right:16px}.journey-overall,.journey-selected,.journey-cards{margin-left:16px;margin-right:16px}.journey-stage{width:38px;height:38px}}

/* HERMES_JOURNEY_BACKGROUNDS_S1_BEGIN */
/* Season 1 Journey artwork. The selected game is already exposed by journey.js
   on .journey-shell[data-game], so backgrounds remain tied to the real game view. */
.journey-shell[data-game="ark"] {
    --journey-bg: url("/static/journey-backgrounds/s1/ark-s1.webp");
    --journey-bg-position: 50% 0%;
}

.journey-shell[data-game="palworld"] {
    --journey-bg: url("/static/journey-backgrounds/s1/palworld-s1.webp");
    --journey-bg-position: 50% 0%;
}

.journey-shell[data-game="conan"] {
    --journey-bg: url("/static/journey-backgrounds/s1/conan-s1.webp");
    --journey-bg-position: 50% 0%;
}

.journey-shell[data-game="scum"] {
    --journey-bg: url("/static/journey-backgrounds/s1/scum-s1.webp");
    --journey-bg-position: 50% 0%;
}

.journey-hero {
    background-color: #030708;
    background-image: var(--journey-bg), linear-gradient(135deg, #0b1418, #030708);
    background-size: 100% auto, cover;
    background-position: var(--journey-bg-position, 50% 0%), center;
    background-repeat: no-repeat, no-repeat;
}

/* Preserve the artwork at the top, then progressively darken the lower Journey UI. */
.journey-hero::before {
    background:
        linear-gradient(180deg,
            rgba(2,5,7,.06) 0%,
            rgba(2,5,7,.12) 18%,
            rgba(2,5,7,.30) 38%,
            rgba(2,5,7,.68) 68%,
            rgba(2,5,7,.92) 100%),
        linear-gradient(90deg,
            rgba(2,5,7,.58) 0%,
            rgba(2,5,7,.14) 45%,
            rgba(2,5,7,.18) 67%,
            rgba(2,5,7,.42) 100%),
        radial-gradient(circle at 72% 28%, rgba(var(--accent-rgb),.08), transparent 34%);
}

.journey-top,
.journey-stages {
    text-shadow: 0 2px 8px rgba(0,0,0,.78);
}

.journey-clock,
.journey-overall,
.journey-selected,
.journey-card {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

@media (max-width: 640px) {
    .journey-hero {
        background-size: auto 520px, cover;
        background-position: 50% 0%, center;
    }
}
/* HERMES_JOURNEY_BACKGROUNDS_S1_END */

/* HERMES_JOURNEY_VISIBILITY_V1_BEGIN */

/*
    JOURNEY VISIBILITY PASS

    - Let the game artwork show through the UI.
    - Keep actual information panels readable.
    - Anything printed directly onto the artwork uses full white.
*/

/* ---------- Major translucent cards ---------- */

.journey-clock,
.journey-overall,
.journey-selected,
.journey-card {
    background: rgba(3, 9, 12, .48) !important;
    border-color: rgba(var(--accent-rgb), .20) !important;

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Countdown can be a touch stronger because it sits over bright sky. */
.journey-clock {
    background: rgba(3, 8, 11, .55) !important;
}

/* ---------- Inner rows ---------- */

.journey-row,
.journey-reward {
    background: rgba(2, 7, 9, .24) !important;
    border-color: rgba(255,255,255,.075) !important;
}

.journey-mastery {
    background: rgba(var(--accent-rgb), .055) !important;
    border-color: rgba(var(--accent-rgb), .24) !important;
}

.journey-track {
    background: rgba(0,0,0,.30) !important;
}

/* ---------- Text sitting DIRECTLY on the artwork ---------- */

.journey-head h2,
.journey-head p,
.journey-head small,

.journey-stages,
.journey-stagehdr,
.journey-stagehdr small,

.journey-date small,
.journey-date b,

.journey-clock > small {
    color: #ffffff !important;
    opacity: 1 !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,.95),
        0 2px 8px rgba(0,0,0,.90),
        0 0 14px rgba(0,0,0,.55);
}

/* Main Journey title gets maximum clarity. */
.journey-head h2 {
    text-shadow:
        0 2px 3px rgba(0,0,0,1),
        0 4px 14px rgba(0,0,0,.92);
}

/* Milestone header itself is direct-on-art text. */
.journey-stagehdr {
    color: #fff !important;
}

/* Unselected milestone numbers remain clearly readable. */
.journey-stage {
    color: #fff !important;
    background: rgba(2,8,10,.46) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.95);
}

.journey-stage:hover,
.journey-stage.selected {
    color: rgb(var(--accent-rgb)) !important;
    background: rgba(var(--accent-rgb),.16) !important;
}

/* ---------- Game selector ---------- */

.journey-game {
    color: #fff !important;
    background: rgba(2,8,10,.48) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.95);
}

.journey-game.selected,
.journey-game:hover {
    color: rgb(var(--accent-rgb)) !important;
    background: rgba(var(--accent-rgb),.14) !important;
}

/* ---------- Text INSIDE cards ---------- */
/* Still slightly hierarchical, but no washed-out 50%-opacity copy. */

.journey-overall small,
.journey-overall > span,
.journey-selected > small,
.journey-cardhead small,
.journey-cardhead b,
.journey-mastery small,
.journey-mastery p,
.journey-selected p {
    color: rgba(245,250,250,.84) !important;
}

.journey-rowcopy b {
    color: #fff !important;
}

.journey-rowcopy small,
.journey-reward b {
    opacity: 1 !important;
}

.journey-reward small {
    color: rgba(245,250,250,.76) !important;
}

/* Preserve aqua as the functional highlight. */
.journey-selected h3,
.journey-date b,
.journey-time b,
.journey-rowcopy small,
.journey-reward b {
    color: rgb(var(--accent-rgb)) !important;
}

/* HERMES_JOURNEY_VISIBILITY_V1_END */

/* HERMES_JOURNEY_COMPACT_SEASON_V1_BEGIN */

/* Game selector now owns the whole row. */
.journey-gamebar {
    justify-content: flex-start !important;
}

/*
    One compact season card:
    CURRENT SEASON | ENDS 31 JAN 2027
    DAYS / HRS / MIN / SEC
*/
.journey-clock {
    min-width: 270px !important;
    width: 270px;
    padding: 9px 11px !important;
    background: rgba(3,8,11,.46) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

.journey-clockhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.journey-clockhead small {
    margin: 0;
    color: #fff !important;
    opacity: 1 !important;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    white-space: nowrap;
    text-shadow:
        0 1px 3px rgba(0,0,0,1),
        0 2px 8px rgba(0,0,0,.85);
}

.journey-clockhead b {
    color: rgb(var(--accent-rgb)) !important;
    font-size: 10px;
    letter-spacing: .08em;
    white-space: nowrap;
    text-shadow:
        0 1px 3px rgba(0,0,0,1),
        0 2px 7px rgba(0,0,0,.8);
}

.journey-clockgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px !important;
    margin-top: 6px !important;
}

.journey-time {
    gap: 1px !important;
}

.journey-time b {
    font-size: 20px !important;
    line-height: 1 !important;
}

.journey-time small {
    color: rgba(255,255,255,.82) !important;
    opacity: 1 !important;
    font-size: 7px !important;
    line-height: 1;
    letter-spacing: .10em !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.95);
}

/* Recover more of the artwork around the title area. */
.journey-top {
    align-items: flex-start;
    padding-top: 20px !important;
    padding-bottom: 10px !important;
}

/* Old standalone date is obsolete if any stale copy survives. */
.journey-date {
    display: none !important;
}

@media (max-width: 960px) {
    .journey-clock {
        width: min(100%, 320px);
        min-width: 0 !important;
    }
}

@media (max-width: 640px) {
    .journey-clock {
        width: 100%;
    }

    .journey-clockhead {
        gap: 8px;
    }
}

/* HERMES_JOURNEY_COMPACT_SEASON_V1_END */

/* HERMES_JOURNEY_STAGE_LOCKS_V3_BEGIN */

.journey-stage {
    position: relative;
    overflow: hidden;
}

.journey-stage-number {
    position: relative;
    z-index: 1;
}

/*
    Real Game-icons repository asset:
    lorc/padlock.svg
*/
.journey-stage-lock {
    position: absolute;

    right: 3px;
    bottom: 3px;

    width: 10px;
    height: 10px;

    object-fit: contain;

    opacity: .92;

    filter:
        drop-shadow(0 1px 2px rgba(0,0,0,.95));

    pointer-events: none;
    z-index: 2;
}

.journey-stage.locked {
    cursor: not-allowed !important;

    color:
        rgba(255,255,255,.44) !important;

    background:
        rgba(1,5,7,.32) !important;

    border-color:
        rgba(255,255,255,.10) !important;
}

.journey-stage.locked .journey-stage-number {
    opacity: .56;
}

.journey-stage.locked:hover {
    color:
        rgba(255,255,255,.44) !important;

    background:
        rgba(1,5,7,.32) !important;

    border-color:
        rgba(255,255,255,.10) !important;
}

/* Previously completed stage. */
.journey-stage.completed {
    background:
        rgba(var(--accent-rgb),.09) !important;

    border-color:
        rgba(var(--accent-rgb),.62) !important;
}

.journey-stage.completed .journey-stage-number {
    color:
        rgb(var(--accent-rgb)) !important;

    opacity: 1;
}

/* Current available stage. */
.journey-stage.selected:not(.locked) {
    background:
        rgba(var(--accent-rgb),.14) !important;

    border-color:
        rgba(var(--accent-rgb),.92) !important;
}

/* HERMES_JOURNEY_STAGE_LOCKS_V3_END */

/* HERMES_JOURNEY_ARK_S1_STAGES_01_03_BETA_V1_BEGIN */

.journey-row.complete {
    border-color: rgba(var(--accent-rgb),.28);
    background: rgba(var(--accent-rgb),.055);
}

.journey-diamond.complete {
    border-color: rgb(var(--accent-rgb));
    background: rgba(var(--accent-rgb),.58);
    box-shadow: 0 0 9px rgba(var(--accent-rgb),.22);
}

.journey-rowcopy.journey-stepgroup-copy {
    display: grid;
    grid-template-columns: minmax(120px,.72fr) minmax(0,1.28fr);
    align-items: center;
    gap: 10px 16px;
}

.journey-stepmetrics {
    display: grid;
    gap: 4px;
    justify-items: end;
    min-width: 0;
}

.journey-stepmetrics small {
    width: 100%;
    color: rgba(255,255,255,.82) !important;
    font-size: 9px !important;
    font-weight: 800;
    letter-spacing: .06em;
    text-align: right;
    opacity: 1 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.95);
}

.journey-stepmetrics small.complete {
    color: rgb(var(--accent-rgb)) !important;
}

@media (max-width: 720px) {
    .journey-rowcopy.journey-stepgroup-copy {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .journey-stepmetrics {
        justify-items: start;
    }

    .journey-stepmetrics small {
        text-align: left;
    }
}

/* HERMES_JOURNEY_ARK_S1_STAGES_01_03_BETA_V1_END */