/* ===========================================================================
   map.css — CHOOSE YOUR ROUTE
   ---------------------------------------------------------------------------
   Authored against the frame's own 952x427 landscape composition (the Pixel 10
   Pro size that decides this project) and expressed in percentages so it
   scales instead of being re-laid-out per viewport.

   Palette is shell2's, not the reference's: --s2-go is the one accent per
   frame, steel for anything that is not the primary, ivory for type. The map
   borrows the reference's STRUCTURE — wagon right, roads running away left,
   bright nodes for what you may take and grey for what lies past it — and none
   of its colours.
   =========================================================================== */

.bmWrap{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 90% at 78% 55%, #10202a 0%, #070c12 62%, var(--s2-asphalt) 100%);
  color:var(--s2-ivory);
  font-family:var(--s2-hwy);
  overflow:hidden;
}

/* ---- header ------------------------------------------------------------- */
.bmHead{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:0 14px; height:38px;
  background:linear-gradient(180deg,var(--s2-steel-a),var(--s2-steel-b));
  border-bottom:1px solid var(--s2-keyline);
}
.bmLeg{
  font-size:var(--s2-t-key); letter-spacing:.16em; text-transform:uppercase;
  color:var(--s2-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bmLeg b{
  display:inline-block; min-width:18px; margin-right:7px; padding:1px 5px;
  background:var(--s2-go); color:var(--s2-go-ink);
  border-radius:2px; font-size:var(--s2-t-key);
}
.bmTitle{
  font-size:var(--s2-t-label); letter-spacing:.13em; font-weight:700;
  color:var(--s2-ivory); white-space:nowrap;
}

/* ---- body --------------------------------------------------------------- */
.bmBody{ flex:1 1 auto; display:flex; min-height:0; }

/* ---- the preview panel -------------------------------------------------- */
.bmPanel{
  flex:0 0 34%; max-width:330px; min-width:210px;
  display:flex; flex-direction:column; gap:6px;
  padding:14px 14px 12px; margin:12px 0 12px 12px;
  background:linear-gradient(180deg,rgba(17,22,31,.94),rgba(8,11,17,.94));
  border:1px solid var(--s2-keyline); border-radius:4px;
}
.bmName{
  font-size:var(--s2-t-sign); line-height:1.05; font-weight:700;
  color:var(--s2-ivory);
}
.bmEta{
  align-self:flex-start; padding:3px 9px;
  background:var(--s2-sign-a); border:1px solid var(--s2-go);
  border-radius:2px; color:var(--s2-go-key);
  font-size:var(--s2-t-key); letter-spacing:.08em; text-transform:uppercase;
}
.bmMeta{ font-size:var(--s2-t-key); color:var(--s2-mute); }
.bmUnk{
  margin-top:2px; padding:8px 10px;
  background:rgba(255,255,255,.03);
  border-left:2px solid var(--s2-off-key);
  display:flex; flex-direction:column; gap:3px;
}
.bmUnk b{ font-size:var(--s2-t-key); letter-spacing:.14em; color:var(--s2-mute-hi); }
.bmUnk span{ font-size:var(--s2-t-key); color:var(--s2-off-tx); font-family:var(--s2-voice); }
.bmGo{
  margin-top:auto; min-height:44px;      /* the 44px touch floor, not a guess */
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--s2-go); color:var(--s2-go-ink);
  border:0; border-radius:3px; cursor:pointer;
  font-family:var(--s2-hwy); font-size:var(--s2-t-label); font-weight:700;
  letter-spacing:.1em;
}
.bmGo i{ font-style:normal; }
.bmGo:hover{ filter:brightness(1.08); }
.bmGo:active{ transform:translateY(1px); }

/* ---- the map ------------------------------------------------------------ */
.bmMap{ position:relative; flex:1 1 auto; min-width:0; margin:12px; }
.bmSvg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.bmLine{
  stroke:var(--s2-off-key); stroke-width:.7;
  stroke-dasharray:2.4 2.6; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.bmLine.bmLive{ stroke:var(--s2-go); stroke-width:1.1; opacity:.85; }

.bmNode{
  position:absolute; transform:translate(-50%,-50%);
  width:42px; height:42px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:2px solid transparent; background:transparent;
}
.bmQ{ font-family:var(--s2-hwy); font-size:24px; font-weight:700; line-height:1; }

.bmPickable{
  cursor:pointer;
  background:radial-gradient(circle,rgba(35,196,106,.30),rgba(35,196,106,0) 70%);
}
.bmPickable .bmQ{ color:var(--s2-go); }
.bmPickable:hover{ border-color:rgba(139,240,182,.5); }
.bmSel{ border-color:var(--s2-go-key); background:radial-gradient(circle,rgba(35,196,106,.45),rgba(35,196,106,0) 72%); }

.bmGrey{ background:radial-gradient(circle,rgba(92,102,117,.20),rgba(92,102,117,0) 70%); }
.bmGrey .bmQ{ color:var(--s2-off-tx); }
.bmEnd{ width:34px; height:34px; }
.bmEnd .bmQ{ font-size:19px; }

.bmTag{
  position:absolute; transform:translate(-50%,-50%);
  font-size:var(--s2-t-key); color:var(--s2-mute-hi);
  white-space:nowrap; pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.bmTagDim{ color:var(--s2-off-tx); }

.bmTruck{
  position:absolute; transform:translate(-50%,-50%);
  width:52px; line-height:0; pointer-events:none;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.85));
}
.bmTruck svg{ width:100%; height:auto; display:block; }
.bmT1{ fill:var(--s2-ivory); }      /* the body — the brightest thing on the map
                                       after the accent, because it is you     */
.bmT2{ fill:var(--s2-mute); }       /* the cab glass                           */
.bmT3{ fill:var(--s2-off-tx); }     /* wheels                                  */

/* ---- footer ------------------------------------------------------------- */
.bmFoot{
  flex:0 0 auto; padding:7px 14px 9px;
  font-family:var(--s2-voice); font-size:var(--s2-t-key);
  color:var(--s2-mute); border-top:1px solid rgba(63,71,83,.5);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---- portrait, the adaptation ------------------------------------------- */
/* Landscape is primary. Below this the panel cannot hold a 26px name beside a
   map, so the two stack and the map takes what is left. */
@media (max-aspect-ratio:1/1){
  .bmBody{ flex-direction:column; }
  .bmPanel{
    flex:0 0 auto; max-width:none; margin:10px 10px 0;
    order:2;
  }
  .bmMap{ order:1; flex:1 1 auto; margin:8px 10px 0; min-height:130px; }
  .bmName{ font-size:var(--s2-t-label); }
  .bmNode{ width:38px; height:38px; }
}
@media (max-height:400px){
  .bmHead{ height:32px; }
  .bmName{ font-size:var(--s2-t-label); }
  .bmPanel{ padding:10px 12px 10px; gap:4px; }
  .bmFoot{ display:none; }     /* the fork's own title is already in the head */
}

/* ===========================================================================
   JOURNEY MAP — the road ahead is a playable planning surface, not a legend.
   =========================================================================== */
.rmWrap{position:absolute;inset:0;z-index:40;display:grid;grid-template-rows:48px 142px 1fr 30px;
  overflow:hidden;color:var(--s2-ivory);font-family:var(--s2-hwy);
  background:
    linear-gradient(180deg,rgba(5,10,16,.88) 0,rgba(5,10,16,.48) 29%,rgba(5,9,14,.58) 72%,rgba(4,7,11,.9) 100%),
    url("assets/maps/journey-alberta.webp") center 52% / cover no-repeat,
    #070d13}
.rmHead{display:flex;align-items:center;gap:12px;padding:0 16px;
  background:linear-gradient(180deg,var(--s2-steel-a),var(--s2-steel-b));
  border-bottom:1px solid var(--s2-keyline)}
.rmBack{width:36px;height:36px;border:1px solid var(--s2-keyline);border-radius:4px;
  color:var(--s2-ivory);background:#111923;font:700 28px/1 var(--s2-hwy);cursor:pointer}
.rmHead>div{display:flex;flex-direction:column;gap:2px}.rmHead>div b{font-size:16px;letter-spacing:.13em}
.rmHead>div span{font-size:11px;color:var(--s2-mute);letter-spacing:.08em}
.rmHead p{margin:0 0 0 auto;font-size:12px;letter-spacing:.12em;color:var(--s2-mute)}
.rmHead p strong{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-right:7px;
  border-radius:2px;background:var(--s2-go);color:var(--s2-go-ink)}
.rmRoute{position:relative;margin:0 24px;border-bottom:1px solid rgba(112,130,148,.38);
  background:linear-gradient(180deg,rgba(5,10,16,.42),rgba(5,10,16,.12))}
.rmRoute svg{position:absolute;inset:0;width:100%;height:100%}.rmRoute line{stroke:#536474;stroke-width:1;
  stroke-dasharray:2 2;vector-effect:non-scaling-stroke}
.rmNode{position:absolute;top:50%;width:150px;min-height:100px;padding:2px 4px;
  transform:translate(-50%,-50%);border:0;background:transparent;color:var(--s2-mute);
  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}
.rmDot{display:grid;place-items:center;width:34px;height:34px;margin-bottom:7px;border-radius:50%;
  border:2px solid #718292;background:#0a1119;color:var(--s2-mute-hi);font-size:13px}
.rmNode b{max-width:146px;min-height:26px;overflow:hidden;
  color:var(--s2-mute-hi);font-size:12px;line-height:1.1;letter-spacing:.06em;text-transform:uppercase;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-wrap:balance}
.rmNode small{margin-top:3px;font-size:10px;letter-spacing:.04em;white-space:nowrap}
.rmNode small strong{color:var(--s2-go-key);font-weight:700;letter-spacing:.08em}
.rmNode.on .rmDot{border-color:var(--s2-go-key);background:var(--s2-go);color:var(--s2-go-ink);
  box-shadow:0 0 18px rgba(35,196,106,.32)}
.rmNode.on b{color:var(--s2-ivory)}
.rmDetail{min-height:0;display:grid;grid-template-columns:1.05fr 1fr .9fr;gap:18px;
  align-items:center;padding:14px 24px}
.rmPlace{padding:14px 16px 16px;border:1px solid rgba(112,130,148,.36);
  background:rgba(5,10,16,.76);
  box-shadow:inset 0 3px 0 var(--s2-go),0 12px 34px rgba(0,0,0,.28)}
.rmPlace span,.rmFacts span{display:block;margin-bottom:4px;color:var(--s2-mute);
  font-size:10px;letter-spacing:.14em}.rmPlace h2{margin:0;color:var(--s2-ivory);font-size:24px;
  line-height:1.02;letter-spacing:.02em}.rmPlace p{margin:7px 0 0;color:var(--s2-go-key);font-size:12px;letter-spacing:.08em}
.rmFacts{display:grid;gap:12px}.rmFacts div{padding:9px 11px;border:1px solid rgba(112,130,148,.32);
  background:rgba(5,10,16,.74);box-shadow:0 10px 28px rgba(0,0,0,.22)}.rmFacts b{display:block;color:var(--s2-ivory);font-size:12px;
  line-height:1.25;letter-spacing:.04em}.rmActions{display:grid;gap:8px}.rmActions button{min-height:42px;
  border-radius:3px;font:700 12px/1 var(--s2-hwy);letter-spacing:.07em;cursor:pointer}
.rmQuiet{border:1px solid var(--s2-keyline);color:var(--s2-mute-hi);background:var(--s2-steel-b)}
.rmDrive{border:1px solid var(--s2-go-key);color:var(--s2-go-ink);background:var(--s2-go)}
.rmFoot{padding:7px 24px;border-top:1px solid rgba(112,130,148,.28);color:var(--s2-mute);
  font:12px/1.25 var(--s2-voice);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rmBack:focus-visible,.rmNode:focus-visible,.rmActions button:focus-visible{outline:2px solid var(--s2-go-key);outline-offset:2px}
@media (max-height:400px){.rmWrap{grid-template-rows:42px 126px 1fr 26px}.rmHead{padding:0 12px}
  .rmRoute{margin:0 18px}.rmDetail{padding:9px 18px;gap:12px}.rmPlace h2{font-size:20px}
  .rmPlace{padding:8px 10px 9px}
  .rmNode{width:132px;min-height:88px}.rmNode b{max-width:128px}.rmDot{width:30px;height:30px;margin-bottom:5px}.rmFoot{padding:5px 18px;font-size:11px}}

/* ===========================================================================
   THE START ROW — founder screen
   ---------------------------------------------------------------------------
   Only rendered once a fort has been reached, so a first run never sees it.
   Same steel-and-go grammar as the route screen; nothing here reaches any
   other screen because every class is bf*.
   =========================================================================== */
.bfRow{
  display:flex; align-items:center; gap:12px;
  margin:0 0 12px; padding:9px 12px;
  background:linear-gradient(180deg,rgba(17,22,31,.9),rgba(8,11,17,.9));
  border:1px solid var(--s2-keyline); border-radius:4px;
  flex-wrap:wrap;
}
.bfLab{
  font-family:var(--s2-hwy); font-size:var(--s2-t-key);
  letter-spacing:.16em; text-transform:uppercase; color:var(--s2-mute);
  white-space:nowrap;
}
.bfCells{ display:flex; gap:8px; flex-wrap:wrap; flex:1 1 auto; }
.bfStart{
  min-height:44px;                      /* the touch floor, same as the route screen */
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  padding:5px 11px; cursor:pointer; text-align:left;
  background:var(--s2-steel-a); color:var(--s2-ivory);
  border:1px solid var(--s2-keyline); border-radius:3px;
  font-family:var(--s2-hwy);
}
.bfStart b{ font-size:var(--s2-t-key); letter-spacing:.04em; }
.bfStart span{ font-size:11px; color:var(--s2-off-tx); }
.bfStart:hover{ border-color:var(--s2-mute); }
.bfOn{
  background:var(--s2-sign-a); border-color:var(--s2-go);
}
.bfOn b{ color:var(--s2-go-key); }
.bfOn span{ color:var(--s2-mute-hi); }

/* A run that started at a fort says so on the screen people screenshot. */
.rec-part{
  margin:0 0 8px; padding:5px 10px;
  background:rgba(255,176,46,.10);
  border-left:2px solid var(--s2-amber);
  font-family:var(--s2-hwy); font-size:var(--s2-t-key);
  letter-spacing:.04em; color:var(--s2-amber);
}