/* Hex Settlers unified interface — 2026-11-09.
   Shared visual tokens and components; game rules, game-board rendering,
   HUD sizing, player colors and user-defined scaling remain untouched. */
:root {
  --bg: #070f18;
  --panel: #0d1924;
  --card: #122330;
  --text: #edf5fb;
  --muted: #9aafbf;
  --line: #2e4859;
  --btn: #172936;
  --btn2: #12212d;
  --accent: #72bde9;
  --gold: #efbd58;
  --shadow: 0 18px 50px rgba(0, 0, 0, .29);
  --radius: 15px;
}
body {
  background: radial-gradient(ellipse 920px 620px at 49% 1%, rgba(228,172,62,.092), transparent 66%),
    radial-gradient(ellipse 1000px 670px at 6% 86%, rgba(27,95,137,.14), transparent 70%), #07111a;
}
/* Across the game: the same low-gloss surfaces, strokes and buttons. */
.card, .modalBox, .accountMenu, .friendRow {
  border-color: var(--line);
  background-color: #101d27;
  box-shadow: var(--shadow);
}
.card {
  background-image: linear-gradient(155deg, rgba(94,154,192,.07), transparent 56%);
  border-radius: var(--radius);
}
.card h2, .cardTitleRow h2 {letter-spacing: .01em; font-weight: 800;}
.input, select.input, textarea.input {
  background: #0a151f;
  border: 1px solid #304757;
  border-radius: 10px;
  color: var(--text);
  min-height: 38px;
}
.input:focus-visible, select.input:focus-visible, textarea.input:focus-visible {
  outline: 2px solid rgba(114,189,233,.27);
  outline-offset: 1px;
  border-color: #6db0df;
  box-shadow: 0 0 0 3px rgba(83,155,204,.11);
}
.btn, .pgTab, .pgSubTab, .adminTab, .rulesTab {
  color: #e7f1f8;
  border: 1px solid #304757;
  border-radius: 10px;
  background: linear-gradient(180deg,#1a2d3c,#13222d);
  font-family: var(--sans);
  font-weight: 750;
  transition: background-color .16s, border-color .16s, box-shadow .16s, transform .16s;
}
.btn:not(:disabled):hover, .pgTab:not(:disabled):hover, .pgSubTab:not(:disabled):hover,
.adminTab:not(:disabled):hover, .rulesTab:not(:disabled):hover {
  border-color: #729eb8;
  background: linear-gradient(180deg,#263e50,#192c39);
  filter: none;
}
.btn.primary, .pgTab.active, .pgSubTab.active, .adminTab.active, .rulesTab.active {
  background: linear-gradient(180deg,#245175,#17344b);
  border-color: #579bcc;
  color: #f4faff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11);
}
.btn.primary:not(:disabled):hover {background: linear-gradient(180deg,#326b95,#1d4664);border-color:#84c4ea;}
button:focus-visible, a:focus-visible {outline:2px solid var(--gold);outline-offset:3px;}
.accountOrb {background:linear-gradient(170deg,#1a3443,#0c1c29);border-color:var(--gold);box-shadow:0 12px 30px rgba(0,0,0,.45);}
.accountMenu {border-radius:15px;}
.accountMenuItem:hover {background:#1c3547;}
/* Portal family: login, game-type selector, journey, ranked, and missing-lobby. */
.portalScreen {
  background: #08121b;
  padding:clamp(12px,2.2vw,28px) 16px calc(76px + var(--safe-bottom));
}
.portalScreen .portalBackdrop {
  background: radial-gradient(ellipse 740px 500px at 50% 16%, rgba(195,148,53,.14), transparent 75%),
    radial-gradient(ellipse 820px 650px at 2% 87%, rgba(32,92,136,.13), transparent 75%),
    linear-gradient(180deg,#09131c,#07111a);
}
.portalScreen .portalBackdrop::after {
  content:"";position:absolute;inset:0;opacity:.10;pointer-events:none;
  background-image: linear-gradient(rgba(160,198,223,.10) 1px,transparent 1px),
   linear-gradient(90deg,rgba(160,198,223,.10) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,transparent 5%,black 65%,transparent);
}
.portalCard {
  width:min(600px,100%);
  padding:clamp(24px,3vw,38px);
  border:1px solid #36566a;
  border-radius:22px;
  background:linear-gradient(155deg,rgba(23,41,54,.98),rgba(10,23,33,.985));
  box-shadow: 0 30px 85px rgba(0,0,0,.54),inset 0 1px 0 rgba(239,189,88,.11);
  color:#f1f7fc;
}
.portalCard h1 {font-size:clamp(25px,2.7vw,34px);font-weight:850;line-height:1.17;letter-spacing:-.035em;}
.portalCard h2 {font-weight:800;letter-spacing:-.022em;}
.portalCard .portalLead {color:#b3c8d6;font-size:14px;line-height:1.55;}
.portalCard .portalEyebrow, .uncreatedLobbyEyebrow {color:var(--gold);font-weight:900;letter-spacing:.17em;font-size:10px;text-transform:uppercase;}
.portalLogo {object-fit:contain;filter:drop-shadow(0 9px 19px rgba(0,0,0,.50));}
.portalCard .portalPrimary {min-height:43px;}
.modePortalCard {width:min(1050px,100%);text-align:center;padding:clamp(25px,3.5vw,40px);}
.modePortalCard .modeLogo {width:140px;margin:0 auto 9px;}
.modeChoices, .journeyOptions {gap:13px;margin-top:23px;}
.modeChoice, .journeyOptions .modeChoice {
  display:flex;flex-direction:column;justify-content:center;gap:7px;
  min-width:0; min-height:125px;height:auto;
  padding:20px;border:1px solid #345269;border-radius:15px;
  background:linear-gradient(145deg,rgba(28,49,63,.75),rgba(15,29,40,.92));
  color:#f4f9fc;text-align:left;
  transition:transform .17s,border-color .17s,background-color .17s,box-shadow .17s;
}
.modeChoice strong {font-size:clamp(17px,1.5vw,21px);font-weight:800;line-height:1.22;margin:0;}
.modeChoice span {font-size:13px;color:#b1c5d3;line-height:1.5;}
.modeChoice:not(:disabled):hover, .modeChoice:not(:disabled):focus-visible {
  transform:translateY(-2px);border-color:var(--gold);
  box-shadow:0 12px 27px rgba(0,0,0,.22),inset 0 2px 0 rgba(239,189,88,.14);
  background:linear-gradient(145deg,rgba(38,65,78,.89),rgba(16,35,47,.96));
}
.modeChoice:disabled {opacity:.46;filter:saturate(.65);cursor:not-allowed;}
.portalBackBtn, .journeyCard .journeyBack {
  position:absolute;top:17px;left:18px;min-height:34px;padding:7px 12px;
  font-size:12px;z-index:2;
}
.journeyCard {width:min(940px,100%);max-height:calc(100dvh - 112px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#395465 transparent;}
.journeyCard .journeyLogo {width:97px;margin:0 auto 13px;}
.journeyCard .portalEyebrow,.journeyCard h1,.journeyCard>.portalLead{text-align:center;}
.journeyOptions {margin:22px 0 12px;}
.journeyOptions .modeChoice {min-height:132px;}
.journeyBottomActions {margin-top:18px;}
.journeyBottomActions .btn {min-width:94px;}
.journeyPanel {margin:24px 0 12px;padding-top:19px;border-top:1px solid rgba(143,184,207,.14);}
.journeyActions .btn {min-height:39px;}
.publicLobbyFilters label {color:#bdd1dd;font-weight:650;font-size:11px;}
.publicLobbyItem {background:#102534;border-color:#355165;}
.publicLobbyItem:hover {border-color:#7aa9c8;}
.journeySettingsPanel {border-color:#355365;}
.notFoundCard {text-align:center;width:min(550px,100%);}
.notFoundCard .portalPrimary {max-width:240px;margin:22px auto 0;}
.rankedCard {width:min(560px,100%);text-align:center;padding-top:42px;}
.compactPortalLogo {display:block;width:88px;margin:0 auto 12px;}
.rankedCard .rankSummary {margin:21px 0 17px;padding:14px 16px;text-align:left;background:rgba(239,189,88,.09);border:1px solid rgba(239,189,88,.35);border-radius:12px;color:#ffd27c;}
.rankedCard .portalLead {margin:13px 0;}
.rankedCard #rankedStatus {padding:2px 0 0;min-height:20px;}
.authPortalCard {width:min(520px,100%);}
.authPortalCard .portalLogo {width:168px;margin:0 auto 8px;}
.portalForm {margin-top:23px;}
.portalOverlay .registerCard {border-color:#36566a;}
/* Same footer, same placement on every route before entering a lobby. */
.portalScreen > .appVersion,
#app .preLobbyAppFooter .appVersion {
  position:fixed;left:50%;bottom:calc(18px + var(--safe-bottom));
  transform:translateX(-50%);z-index:7;
  color:#9ab3c3;font:750 12px var(--sans);letter-spacing:.075em;
  text-shadow:0 1px 5px #060e16;white-space:nowrap;pointer-events:none;
}
.portalScreen > .portalLegalLinks,
#app .preLobbyAppFooter .portalLegalLinks {
  position:fixed;bottom:calc(12px + var(--safe-bottom));left:clamp(12px,1.5vw,25px);
  z-index:7;display:flex;gap:7px;align-items:center;max-width:calc(100% - 185px);
}
.portalLegalLink {border:1px solid transparent;color:#a8c1d2;background:transparent;text-decoration:none;padding:8px 6px;white-space:nowrap;}
.portalLegalLink:hover {color:var(--gold);border-color:rgba(239,189,88,.29);background:rgba(35,53,66,.72);}
.portalScreen .loginSupport,
#app .preLobbyAppFooter .loginSupport {position:fixed;z-index:7;right:clamp(12px,1.5vw,25px);bottom:calc(11px + var(--safe-bottom));}
.portalScreen .loginSupport img,
#app .preLobbyAppFooter .loginSupport img {height:34px;width:auto;}
.preLobbyAppFooter {display:none;}
body.uncreated-lobby:not(.in-game) #app .preLobbyAppFooter {display:block;}
/* Casual/unranked entry screens are the same centered card system. */
body.uncreated-lobby:not(.in-game):not(.ranked-lobby) .layout {
  align-items:center;justify-content:center;
  background:radial-gradient(ellipse 690px 440px at 50% 17%,rgba(196,151,58,.095),transparent 70%);
  padding:18px 14px calc(66px + var(--safe-bottom))!important;
}
body.uncreated-lobby:not(.in-game):not(.ranked-lobby) .layout > .panel {
  display:flex; flex-direction:column;gap:14px;
  width:min(680px,100%);max-width:680px;height:auto;
  max-height:calc(100dvh - 115px);
  margin:auto;padding:22px clamp(16px,3.1vw,32px) 24px!important;
  border:1px solid #36566a;border-radius:22px;
  background:linear-gradient(155deg,rgba(23,41,54,.97),rgba(10,23,33,.985));
  box-shadow:0 25px 76px rgba(0,0,0,.50),inset 0 1px 0 rgba(239,189,88,.11);
}
body.uncreated-lobby:not(.in-game) #uncreatedLobbyIntro {padding:0 4px 2px;}
.uncreatedLobbyNavigation {margin:0 0 10px;}
.uncreatedPortalLogo {display:block;width:100px;margin:0 auto 12px;}
.uncreatedLobbyIntro h1 {font-weight:850;letter-spacing:-.03em;margin:8px 0 6px;}
body.uncreated-lobby #lobbyCard {background:rgba(10,22,31,.48);border:1px solid #2b4354;border-radius:15px;box-shadow:none;margin:0;padding:18px;}
body.uncreated-lobby #lobbyCard>.lobbyCardHeading {padding-bottom:8px;border-bottom:1px solid #304859;}
#aiFillMaxBtn {padding:10px 14px;min-height:38px;white-space:nowrap;}
#aiFillRow .row {align-items:center;}
/* Summary layout: 7/8 players => a balanced 4+3 / 4+4 on wide desktop. */
@media (min-width:1100px) {
  .pgGameOverviewSection .pgOverviewPlayerGrid.pgOverviewEightPlayerGrid {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}
@media (min-width:720px) and (max-width:1099px) {
  .pgGameOverviewSection .pgOverviewPlayerGrid.pgOverviewEightPlayerGrid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
/* Cohesive game-over UI, while retaining each player's assigned color. */
.postgamePanel {background:rgba(7,16,24,.975);}
.postgameTop {background:linear-gradient(180deg,#111f2b,#0a1721);border-color:#2e4554;}
.postgameTabs {background:#101d27;border-color:#2e4554;}
.postgameBody {background:radial-gradient(ellipse 1000px 610px at 50% 0%,rgba(44,96,124,.09),transparent 75%);}
.pgOverviewPlayerCard {background-color:rgba(14,27,38,.83);border-radius:16px;}
.pgOverviewMetric {border-color:rgba(140,169,189,.16);background:rgba(8,19,29,.55);}
.pgMatchHighlight {border-color:#304758;background:rgba(16,33,45,.68);}
/* Touch targets, responsive cards and a footer that stays accessible. */
@media(max-width:760px) {
  .portalScreen {padding:12px 10px calc(112px + var(--safe-bottom));align-items:start;}
  .portalCard {margin:auto;padding:22px 18px;border-radius:18px;}
  .modePortalCard {padding:20px 15px;}
  #playModeScreen.portalScreen {padding:12px 10px calc(112px + var(--safe-bottom));align-items:start;}
  #playModeScreen .modePortaLCard {padding:20px 15px;}
  #playModeScreen .modeLogo {position:static;width:104px;max-width:100%;margin:0 auto 8px;}
  #playModeScreen .portalEyebrow {margin:0 0 6px;text-align:center;padding:0;}
  #playModeScreen .modePortalCard h1 {margin:0 0 16px;text-align:center;min-height:0;padding:0;font-size:clamp(22px,6vw,28px);}
  #playModeScreen .modeChoices {margin-top:14px;gap:10px;}
  #playModeScreen .modeChoice {min-height:84px;height:auto;padding:15px 17px;}
  #playModeScreen .modeChoice strong {font-size:18px;}
  .journeyCard {max-height:calc(100dvh - 132px);padding:22px 16px;}
  .journeyCard .journeyBack {top:13px;left:12px;}
  .journeyCard .journeyLogo {width:82px;margin:34px auto 11px;}
  .journeyOptions {grid-template-columns:1fr;gap:10px;}
  .journeyOptions .modeChoice {min-height:89px;}
  .rankedCard {margin:auto;padding-top:34px;}
  .rankedCard .portalBackBtn {top:12px;left:12px;}
  .rankedCard .compactPortalLogo {margin-top:32px;}
  .portalScreen > .portalLegalLinks, #app .preLobbyAppFooter .portalLegalLinks {
    left:10px;bottom:calc(44px + var(--safe-bottom));max-width:calc(100% - 20px);
  }
  .portalScreen > .appVersion, #app .preLobbyAppFooter .appVersion {
    left:11px;transform:none;bottom:calc(17px + var(--safe-bottom));font-size:11px;
  }
  .portalScreen .loginSupport, #app .preLobbyAppFooter .loginSupport {right:10px;bottom:calc(12px + var(--safe-bottom));}
  .portalScreen .loginSupport img, #app .preLobbyAppFooter .loginSupport img {height:29px;}
  body.uncreated-lobby:not(.in-game):not(.ranked-lobby) .layout {padding:11px 10px calc(92px + var(--safe-bottom))!important;}
  body.uncreated-lobby:not(.in-game):not(.ranked-lobby) .layout > .panel {max-height:calc(100dvh - 114px);padding:18px 14px!important;}
  #aiFillMaxBtn {width:100%;}
  .pgGameOverviewSection .pgOverviewPlayerGrid.pgOverviewEightPlayerGrid {grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce) {
  .btn,.modeChoice,.pgTab,.pgSubTab {transition:none!important;}
  .modeChoice:not(:disabled):hover {transform:none;}
}
/* Support link uses live text, not a third-party image asset. */
.portalScreen .loginSupport a,
#app .preLobbyAppFooter .loginSupport a,
#registerOverlay .loginSupport a {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;white-space:nowrap;
  font:800 12px var(--sans);color:#fff4e9;
  padding:8px 13px;border-radius:11px;
  border:1px solid #dd784e;
  background:linear-gradient(160deg,#e26b40,#b8492b);
  box-shadow:0 5px 22px rgba(0,0,0,.25);
}
.loginSupport .kofiIcon {display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#fff9ed;color:#ab5332;font-size:14px;}
.loginSupport .kofiText {display:inline;}
#registerOverlay .appVersion {
  position:fixed;left:50%;bottom:calc(18px + var(--safe-bottom));transform:translateX(-50%);
  color:#9ab3c3;z-index:9;font:750 12px var(--sans);letter-spacing:.075em;
}
#registerOverlay .portalLegalLinks {position:fixed;bottom:calc(12px + var(--safe-bottom));left:clamp(12px,1.5vw,25px);z-index:9;}
#registerOverlay .loginSupport {position:fixed;right:clamp(12px,1.5vw,25px);bottom:calc(11px + var(--safe-bottom));z-index:9;}
/* The existing entry-screen version rule used an ID selector; override it
   explicitly on mobile so it does not collide with the legal links. */
@media(max-width:760px){
  #authLanding.portalScreen>.appVersion,
  #playModeScreen.portalScreen>.appVersion,
  #registerOverlay>.appVersion {left:11px;bottom:calc(17px + var(--safe-bottom));transform:none;font-size:11px;}
  #registerOverlay .portalLegalLinks {left:10px;bottom:calc(44px + var(--safe-bottom));max-width:calc(100% - 20px);}
  #registerOverlay .loginSupport {right:10px;bottom:calc(12px + var(--safe-bottom));}
  .loginSupport .kofiText {font-size:11px;}
}
@media (max-width:760px) {
  /* Game-types page has an older ID-scoped mobile rule: keep legal and version separate. */
  #playModeScreen.portalScreen > .portalLegalLinks {
    bottom:calc(44px + var(--safe-bottom));left:10px;
    max-width:calc(100% - 20px);
  }
}


/* Weekly Scattered Tiles Challenge Maps — full-width, single-scenario workspace. */
#journeyScreen.challengeWideLayout {
  padding: clamp(12px, 1.4vw, 24px) clamp(12px, 1.4vw, 24px) calc(74px + var(--safe-bottom));
}
#journeyScreen.challengeWideLayout .journeyCard {
  width: 100%;
  max-width: none;
  max-height: calc(100dvh - 98px - var(--safe-bottom));
  padding: clamp(18px, 2.2vw, 34px);
}
#journeyScreen.challengeWideLayout .journeyLogo { width: 80px; margin-bottom: 8px; }
#journeyScreen.challengeWideLayout .challengeMapsPanel { margin-top: 16px; padding-top: 15px; }
.challengeMapTabs {
  display: flex; gap: 10px; overflow-x: auto; width: 100%;
  scrollbar-width: thin; scrollbar-color: #47637a transparent;
  padding: 3px 2px 11px; overscroll-behavior-x: contain;
}
.challengeMapTab {
  appearance: none; flex: 1 0 125px; min-height: 52px; padding: 11px 15px;
  border: 1px solid #3a5669; border-radius: 11px;
  background: rgba(11, 28, 42, .88); color: #b8cad6;
  font: 800 clamp(13px, 1vw, 16px) var(--sans); text-align: center;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.challengeMapTab:hover { border-color: #b38a43; color: #f6e0ad; background: #213849; }
.challengeMapTab.active, .challengeMapTab[aria-selected="true"] {
  border-color: #efbd58; color: #fff1c8;
  background: linear-gradient(155deg, #584521, #2f3540 87%);
  box-shadow: inset 0 2px 0 rgba(255, 219, 139, .30), 0 0 0 1px rgba(239, 189, 88, .14);
}
.challengeMapOverview {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(310px, 410px);
  align-items: stretch; gap: clamp(14px, 2vw, 26px); margin: 8px 0 15px;
}
.challengeMapNotes { align-self: center; }
.challengeMapNotes .smallNote { margin: 6px 0 10px; line-height: 1.55; }
.challengeTopPlayer {
  min-width: 0; border: 1px solid rgba(240, 186, 75, .58);
  border-radius: 13px; padding: 15px 18px;
  background: linear-gradient(125deg, rgba(83, 61, 24, .5), rgba(18, 39, 54, .92) 85%);
  box-shadow: inset 0 1px 0 rgba(255, 219, 142, .11);
}
.challengeTopPlayerLabel { color: #f7c766; font-size: 11px; font-weight: 900; letter-spacing: .09em; }
.challengeTopPlayerName {
  display: block; margin: 5px 0 11px; color: #fff1ce;
  font: 850 clamp(18px, 1.7vw, 23px) var(--sans);
  overflow-wrap: anywhere;
}
.challengeTopPlayerStats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.challengeTopPlayerMetric { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.challengeTopPlayerMetric b { color: #f6fbff; font-size: clamp(12px, 1.2vw, 17px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.challengeTopPlayerMetric span { color: #aebfca; font-size: 10px; line-height: 1.3; }
.challengeTopPlayerEmpty { margin: 5px 0 0; color: #c4ced4; font-size: 12px; line-height: 1.5; }
.challengeMapsList { display: block; min-width: 0; margin-top: 12px; }
.challengeMapCard {
  background: rgba(12, 24, 39, .85);
  border: 1px solid rgba(179, 151, 86, .29);
  border-radius: 14px; padding: clamp(14px, 1.65vw, 24px); min-width: 0;
}
.challengeMapCardHeading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(233, 211, 154, .14); }
.challengeMapCardHeading h2 { font-size: clamp(18px, 1.6vw, 24px); margin: 0; color: #eacb86; }
.challengeMapCardHeading button { font-size: 14px; min-height: 42px; }
.challengeMapContent {
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.45fr);
  gap: clamp(18px, 2vw, 32px); align-items: start; margin-top: 15px;
}
.challengeMapVisualization, .challengeMapRanking { min-width: 0; }
.challengeMapCard h3 { margin: 0 0 12px; font-size: 16px; color: #eacb86; }
.challengeMapPreview {
  display: block; width: 100%; height: auto; margin: 0;
  border-radius: 11px; background: #0a1928; aspect-ratio: 76 / 45;
}
.challengeMapLeaderboard { width: 100%; overflow-x: auto; }
.challengeMapLeaderboard table { width: 100%; min-width: 570px; border-collapse: collapse; font-size: clamp(13px, .95vw, 15px); white-space: nowrap; }
.challengeMapLeaderboard th { text-align: left; color: #c8b991; font-weight: 600; padding: 0; border-bottom: 1px solid rgba(233,211,154,.25); }
.challengeMapLeaderboard th .challengeLeaderboardSort { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; padding: 13px 12px; text-align: left; white-space: nowrap; }
.challengeMapLeaderboard th .challengeLeaderboardSort:hover, .challengeMapLeaderboard th .challengeLeaderboardSort:focus-visible { color: #f6df9c; text-decoration: underline; }
.challengeMapLeaderboard th .challengeSortActive { color: #f6df9c; }
.challengeMapLeaderboard th .challengeLeaderboardSort:focus-visible { outline: 2px solid #f6df9c; outline-offset: -2px; }
.challengeMapLeaderboard td { padding: 12px; border-bottom: 1px solid rgba(233,211,154,.11); font-variant-numeric: tabular-nums; }
.challengeMapLeaderboard td:first-child { overflow: hidden; max-width: 250px; text-overflow: ellipsis; font-weight: 650; }
.challengeMapLeaderboard .challengeLeaderRow { background: rgba(239, 189, 88, .09); color: #ffedc6; }
.challengeMapEmpty, .challengeMapNoResults { color: #a8b8c5; font-size: .88rem; padding: 16px 12px; }
@media (max-width: 1120px) {
  .challengeMapContent { grid-template-columns: minmax(0,1fr); }
  .challengeMapVisualization { width: min(100%, 700px); margin-inline: auto; }
}
@media (max-width: 760px) {
  #journeyScreen.challengeWideLayout { padding: 10px 8px calc(102px + var(--safe-bottom)); }
  #journeyScreen.challengeWideLayout .journeyCard { max-height: calc(100dvh - 124px - var(--safe-bottom)); padding: 19px 14px; }
  #journeyScreen.challengeWideLayout .journeyLogo { margin-top: 34px; }
  .challengeMapTab { flex-basis: 119px; min-height: 46px; padding: 9px 11px; }
  .challengeMapOverview { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .challengeMapCardHeading button { width: 100%; }
  .challengeMapCard { padding: 12px; }
  .challengeTopPlayer { padding: 13px; }
}
.challengeLobbyNote { padding: 9px 12px; border: 1px solid rgba(233,199,124,.35); border-radius: 9px; background: rgba(176,140,64,.09); color: #e5c88a; }
.challengeLockedSetup { position: relative; }
#journeyChallengeBtn span + span { margin-top: 4px; font-size: .8em; opacity: .75; }


/* Challenge Maps header: no logo, left-anchored title, right-anchored description. */
#journeyScreen.challengeWideLayout .journeyLogo,
#journeyScreen.challengeWideLayout .portalEyebrow { display:none; }
#journeyScreen.challengeWideLayout .journeyHeading {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px 24px; min-height:46px; padding-left:clamp(170px, 14vw, 235px);
}
#journeyScreen.challengeWideLayout .journeyHeading h1 {
  flex:0 1 auto; margin:0; text-align:left; white-space:nowrap;
}
#journeyScreen.challengeWideLayout .journeyHeading .portalLead {
  flex:1 1 340px; width:auto; max-width:760px; margin:0; text-align:right;
}
#journeyScreen.challengeWideLayout .challengeMapsPanel { margin-top:12px; }
@media (max-width:850px) {
  #journeyScreen.challengeWideLayout .journeyHeading {padding:42px 0 0; align-items:flex-start;}
  #journeyScreen.challengeWideLayout .journeyHeading h1 {white-space:normal;}
  #journeyScreen.challengeWideLayout .journeyHeading .portalLead {flex-basis:100%;text-align:left;}
}

/* Turnstile protection: use both the desktop and mobile account cards. */
.authCaptchaWrap { margin: 12px 0 14px; max-width: 100%; min-width: 0; }
.authCaptchaWidget { min-height: 65px; width: 100%; max-width: 100%; overflow: visible; }
.authCaptchaNotice { margin: 4px 0 0; font-size: .82rem; color: var(--muted, #b4bec7); }
.authCaptchaWrap.hidden { display: none !important; }