/* Journey UI is scoped to its three mount points; it must not rebrand the HUD. */
#progressJourneys, #homeJourney, #matchJourney { color: var(--text, #dfe9ff); }
#progressJourneys { margin-top: 16px; }
.journey-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.journey-heading span { color: var(--cyan, #00e5ff); font-size: 11px; letter-spacing: .16em; }
.journey-heading strong { font-family: Orbitron, sans-serif; font-size: 16px; }
.journey-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.journey-card { min-width: 0; padding: 11px; border: 1px solid rgba(0,229,255,.18); border-radius: 9px; background: rgba(5,13,25,.62); }
.journey-card.complete { border-color: rgba(119,255,221,.55); }
.journey-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.journey-card h3 { margin: 0; font-size: 14px; }
.journey-card p { min-height: 30px; margin: 6px 0; color: rgba(223,233,255,.65); font-size: 12px; }
.journey-kind { padding: 2px 5px; border: 1px solid currentColor; border-radius: 4px; color: var(--cyan, #00e5ff); font-size: 11px; letter-spacing: .08em; white-space: nowrap; }
.journey-kind.raid { color: #ffb36b; }
.journey-kind.squad { color: #b59aff; }
.journey-kind.camo { color: #7cff4d; }
.journey-card-reward, .journey-reward { display: inline-flex; align-items: center; gap: 5px; color: rgba(223,233,255,.8); font-size: 11px; }
.journey-swatch { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.journey-steps { display: grid; gap: 3px; margin: 9px 0; padding: 0; list-style: none; color: rgba(223,233,255,.78); font-size: 11px; }
.journey-status { margin-top: 7px; color: var(--gold, #f5a623); font-size: 11px; }
.journey-card.complete .journey-status { color: #77ffdd; }
.journey-pin, .journey-retry { min-height: 44px; margin-top: 8px; padding: 5px 9px; border: 1px solid rgba(0,229,255,.35); border-radius: 5px; color: var(--text, #dfe9ff); background: rgba(0,229,255,.08); cursor: pointer; }
.journey-pin:disabled { opacity: .55; cursor: default; }
.journey-camo-select { display: flex; align-items: center; gap: 9px; margin-top: 11px; color: rgba(223,233,255,.72); font-size: 12px; }
.journey-camo-select select { min-width: 0; max-width: 100%; min-height: 44px; color: var(--text, #dfe9ff); background: #091525; border: 1px solid rgba(0,229,255,.3); border-radius: 5px; }
.journey-message { color: rgba(223,233,255,.65); font-size: 12px; }
/* Objectif épinglé sous JOUER : une pastille compacte d'une ligne plutôt qu'une
   boîte qui concurrence la zone de statut (retour menu 2026-09-21, P3-1). */
#homeJourney { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; max-width: 300px; margin-top: 8px; padding: 4px 11px; border: 1px solid rgba(0,229,255,.14); border-radius: 999px; background: rgba(5,13,25,.45); }
#homeJourney .journey-heading { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; }
.deployment-console #homeJourney { display: flex; max-width: none; } /* same width as the Écho pill below */
#homeJourney .journey-heading span { font-size: 9.5px; letter-spacing: .14em; }
#homeJourney .journey-heading strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
#homeJourney .journey-compact-progress { font-size: 11px; color: rgba(223,233,255,.75); white-space: nowrap; }
#matchJourney { margin: 8px 0; padding: 9px; border: 1px solid rgba(0,229,255,.2); border-radius: 8px; background: rgba(5,13,25,.55); }
.journey-rewards { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 11px; }
/* End-screen reward read-out (plan point 5): the match's gain toward the
   pinned goal, then one card per unlocked item with a direct action. */
.journey-delta { margin: 2px 0 8px; color: #7fe4b0; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.unlock-cards { display: grid; gap: 7px; margin-bottom: 8px; }
.unlock-cards:empty { display: none; }
.unlock-card { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid rgba(255,210,61,.45); border-radius: 8px; background: linear-gradient(90deg, rgba(255,210,61,.12), rgba(5,13,25,.4)); animation: unlock-in .5s cubic-bezier(.2,1.4,.4,1) both; }
.unlock-swatch { width: 28px; height: 28px; flex: none; border-radius: 6px; background: #ffd23d; box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset; }
.unlock-card[data-kind="weapon"] .unlock-swatch { background: linear-gradient(135deg, #2c3446, #6b7690); }
.unlock-text { display: grid; flex: 1 1 140px; min-width: 0; line-height: 1.15; }
.unlock-text small { color: #ffd23d; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; }
.unlock-text strong { overflow: hidden; color: #f2f6ff; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.unlock-action { min-height: 34px; padding: 0 12px; border: 1px solid rgba(0,229,255,.55); border-radius: 6px; background: rgba(0,229,255,.12); color: #dff9ff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.unlock-action:hover, .unlock-action:focus-visible { background: rgba(0,229,255,.24); outline: none; box-shadow: 0 0 0 1px #00f0ff, 0 0 14px -2px #00f0ff; }
.unlock-action:disabled { border-color: rgba(127,228,176,.5); background: rgba(127,228,176,.12); color: #7fe4b0; cursor: default; }
@keyframes unlock-in { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .unlock-card { animation: none; } }
@media (pointer: coarse) { .unlock-action { min-height: 44px; } }
.journey-live-status { min-height: 16px; margin-top: 7px; color: #ffb36b; font-size: 11px; }
.surcharge-status { position: fixed; left: 50%; top: 90px; transform: translateX(-50%); z-index: 30; max-width: min(360px, calc(100vw - 28px)); padding: 9px 12px; font-size: 12px; color: #dfe9ff; background: rgba(6,11,20,.94); border: 1px solid rgba(0,229,255,.4); border-radius: 7px; pointer-events: none; }
/* Surcharge toggle: a neon pill switch instead of a bare OS checkbox. The
   <input> keeps the semantics (checked/disabled logic in main.js) but is
   visually replaced by the .pr-switch track — same language as the map/mode
   chips, so the row reads as one control block instead of a stray form widget.
   :has() is already relied on in hub.css (browser baseline of this PWA). */
.private-rooms .pr-surcharge { min-height: 44px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 9px; cursor: pointer; }
.pr-surcharge input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.pr-switch {
  position: relative; flex: 0 0 auto; width: 42px; height: 23px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.pr-switch::after {
  content: ''; position: absolute; top: 2.5px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #93aabd; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s ease, background 0.18s;
}
.pr-switch:has(input:checked) { background: rgba(0, 229, 255, 0.28); border-color: var(--cyan, #00e5ff); box-shadow: 0 0 12px -3px var(--cyan, #00e5ff); }
.pr-switch:has(input:checked)::after { transform: translateX(19px); background: var(--cyan, #00e5ff); }
.pr-switch:has(input:focus-visible) { outline: 2px solid #b7f7ff; outline-offset: 3px; }
.pr-switch:has(input:disabled) { opacity: 0.4; }
.private-rooms .pr-surcharge:has(input:disabled) { cursor: not-allowed; }
.pr-surcharge-name { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px; color: rgba(223, 233, 255, 0.9); }
.pr-surcharge-name em {
  font-style: normal; margin-left: 7px; padding: 1px 6px; border-radius: 4px;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold, #f5a623); border: 1px solid rgba(245, 166, 35, 0.4);
}
.pr-surcharge small { flex-basis: 100%; font-family: 'Rajdhani', sans-serif; font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; text-transform: none; line-height: 1.4; color: rgba(223, 233, 255, 0.55); }
#matchJourney .journey-card p, #matchJourney .journey-steps { display: none; }
#matchJourney .journey-heading { margin-bottom: 4px; }
#matchJourney .journey-card { padding: 6px; }
@media (pointer: coarse) {
  .surcharge-status { top: 80px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); max-width: calc(100vw - 220px); padding: 5px 8px; font-size: 11px; text-align: center; }
  #matchJourney { margin: 3px 0; padding: 5px; }
  #matchJourney .journey-heading, #matchJourney .journey-kind, #matchJourney .journey-card-reward { display: none; }
  #matchJourney .journey-card h3 { font-size: 12px; }
}
@media (max-width: 760px) {
  .journey-grid { grid-template-columns: 1fr; }
  .journey-card p { min-height: 0; }
  #progressJourneys { margin-top: 10px; }
  #homeJourney { max-width: calc(100vw - 30px); }
  .journey-camo-select { flex-wrap: wrap; }
}
/* Career readability pass: every step gets its own bar, pins step back */
.journey-steps { gap: 7px; }
.journey-steps li { position: relative; padding-bottom: 7px; }
.journey-steps li::before, .journey-steps li::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 2px; }
.journey-steps li::before { right: 0; background: rgba(255,255,255,.08); }
.journey-steps li::after { width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, #36d6ff, #73f6e1); box-shadow: 0 0 6px rgba(0,229,255,.45); }
.journey-steps li[data-done] { color: #77ffdd; }
.journey-steps li[data-done]::after { background: #77ffdd; }
#progressJourneys .journey-card { display: flex; flex-direction: column; }
#progressJourneys .journey-pin { align-self: flex-start; min-height: 34px; margin-top: auto; padding: 6px 14px; font-size: 11px; font-weight: 700; letter-spacing: .14em; background: transparent; border-color: rgba(0,229,255,.28); }
#progressJourneys .journey-pin:hover:not(:disabled) { background: rgba(0,229,255,.1); border-color: var(--cyan, #00e5ff); }
#progressJourneys .journey-pin:disabled { opacity: 1; color: #02131a; background: var(--cyan, #00e5ff); border-color: var(--cyan, #00e5ff); }
#progressJourneys .journey-status { margin-bottom: 10px; }
@media (pointer: coarse) { #progressJourneys .journey-pin { min-height: 44px; } }

/* Optional guided first run (plan point 7): a compact card under the match
   timer — what to do now, progress dots, a skip button. */
.first-steps { position: fixed; left: 50%; top: 118px; z-index: 40; transform: translateX(-50%); display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; width: min(440px, calc(100vw - 32px)); padding: 10px 14px; border: 1px solid rgba(0,229,255,.45); border-radius: 9px; background: rgba(5,12,22,.9); color: #e6f4ff; box-shadow: 0 8px 26px -10px rgba(0,229,255,.45); pointer-events: auto; }
.first-steps.hidden { display: none; }
.first-steps small { color: #00e5ff; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.first-steps strong { grid-column: 1 / -1; font-size: 14px; line-height: 1.25; }
.first-steps-hint { grid-column: 1 / -1; color: rgba(223,233,255,.72); font-size: 12px; }
.first-steps-hint:empty { display: none; }
.first-steps-dots { grid-column: 1 / -1; color: #00e5ff; font-size: 11px; letter-spacing: .2em; }
.first-steps-skip { grid-row: 1; grid-column: 2; min-height: 30px; padding: 0 10px; border: 1px solid rgba(223,233,255,.3); border-radius: 6px; background: transparent; color: #dfe9ff; font: inherit; font-size: 11px; cursor: pointer; }
.first-steps-skip[hidden] { display: none; }
@media (pointer: coarse) { .first-steps-skip { min-height: 44px; } .first-steps { top: 104px; } }

/* Point 11: "Rester en contact" on the end screen, and a group invitation
   that arrives mid-match (the hub card is hidden then). */
#matchEndSocial { margin: 8px 0; padding: 9px; border: 1px solid rgba(255,45,120,.28); border-radius: 8px; background: rgba(5,13,25,.55); color: var(--text, #dfe9ff); }
#matchEndSocial .journey-heading { margin-bottom: 6px; }
#matchEndSocial .journey-heading span { color: #ff5fa2; }
#matchEndSocial .journey-heading strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ms-hint { margin: 0 0 6px; color: rgba(223,233,255,.72); font-size: 12px; }
.ms-peer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.06); }
.ms-peer:first-of-type { border-top: 0; }
.ms-peer .player-avatar { flex: none; }
.ms-text { display: grid; flex: 1 1 120px; min-width: 0; line-height: 1.15; text-align: left; }
.ms-text small { color: #ff8cbc; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ms-peer[data-kind="echo"] .ms-text small { color: #b39cff; }
.ms-text strong { overflow: hidden; color: #f2f6ff; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.ms-invite-card { position: fixed; left: 16px; right: 16px; top: 72px; z-index: 95; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 440px; margin: 0 auto; padding: 10px 12px; border: 1px solid rgba(255,45,120,.5); border-radius: 9px; background: rgba(5,12,22,.985); backdrop-filter: blur(6px); color: #e6f4ff; box-shadow: 0 8px 26px -10px rgba(255,45,120,.5); animation: unlock-in .5s cubic-bezier(.2,1.4,.4,1) both; }
.ms-invite-card .ms-text small { color: #ff5fa2; }
.ms-invite-card .ms-text strong { white-space: normal; }
.ms-dismiss { border-color: rgba(223,233,255,.3); background: transparent; }
@media (prefers-reduced-motion: reduce) { .ms-invite-card { animation: none; } }