/* The native select remains the game's state source; these cards are its UI. */
#route-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  width: 100%;
  min-width: 0;
  margin: 12px 0;
  order: 4;
}
#route-picker .route-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
  min-height: 110px;
  padding: 12px;
  text-align: left;
  font: inherit;
  line-height: 1.2;
  color: #dbe5f5;
  background: #122138;
  border: 1px solid #526078;
  border-radius: 10px;
  opacity: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
#route-picker .route-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  color: #b0c1d9;
  font-size: 10px;
  letter-spacing: .7px;
  text-transform: uppercase;
}
#route-picker .route-card-number { font-weight: 800; font-variant-numeric: tabular-nums; }
#route-picker .route-card-difficulty { font-weight: 700; }
#route-picker .route-card-name { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
#route-picker .route-card-best { color: #c3cfe1; font-size: 11px; font-variant-numeric: tabular-nums; }
#route-picker .route-card-status { margin-top: auto; color: #a9bdd7; font-size: 10px; line-height: 1.3; }
#route-picker .route-card[aria-checked="true"] {
  color: #fff4ab;
  background: linear-gradient(135deg, #393622, #1f2830);
  border-color: #ffe430;
  box-shadow: inset 0 0 0 1px #ffe430, 0 0 18px #ffe43012;
}
#route-picker .route-card[aria-checked="true"] .route-card-header,
#route-picker .route-card[aria-checked="true"] .route-card-status { color: #ffe430; }
#route-picker .route-card[aria-checked="true"] .route-card-status::before { content: '✓ '; }
#route-picker .route-card:not(:disabled):hover { background-color: #203149; border-color: #ffe430; }
#route-picker .route-card:focus-visible { outline: 3px solid #fff4ab; outline-offset: 3px; }
#route-picker .route-card:disabled { cursor: default; }
#route-picker .route-card[data-locked="true"] { background: #101b2d; border-style: dashed; }
#route-picker .route-card[data-locked="true"] .route-card-status { color: #d1c3a4; }
#route-picker[aria-disabled="true"] { opacity: .65; }
#overlay[data-screen="title"] #route-picker { grid-column: 1 / -1; grid-row: 5; margin: 0; }
#overlay[data-screen="result"] #route-picker { margin: 10px 0; order: 6; }
#overlay[data-screen="pause"] #route-picker { display: none; }
@media (max-width: 380px) {
  #route-picker { gap: 7px; }
  #route-picker .route-card { padding: 10px 8px; }
  #route-picker .route-card-name { font-size: 15px; }
  #route-picker .route-card-header { font-size: 9px; letter-spacing: .3px; }
}
@media (max-height: 600px) and (orientation: landscape) {
  #overlay[data-screen="title"] #route-picker { grid-column: 3; grid-row: 2; }
  #route-picker { gap: 7px; margin: 7px 0; }
  #route-picker .route-card { min-height: 91px; gap: 3px; padding: 8px; border-radius: 8px; }
  #route-picker .route-card-name { font-size: 14px; }
  #route-picker .route-card-header { font-size: 8px; letter-spacing: .3px; }
  #route-picker .route-card-best, #route-picker .route-card-status { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #route-picker .route-card { transition: none; }
}
@media (forced-colors: active) {
  #route-picker .route-card[aria-checked="true"] { outline: 2px solid Highlight; outline-offset: -3px; }
}

@media(max-width:540px){#route-picker{grid-template-columns:1fr;gap:6px}#route-picker .route-card{min-height:68px;display:grid;grid-template-columns:1fr auto;gap:3px 8px;padding:8px 10px}#route-picker .route-card-header{grid-column:2;grid-row:1}#route-picker .route-card-number{display:none}#route-picker .route-card-name{grid-column:1;grid-row:1;font-size:15px}#route-picker .route-card-best{grid-column:2;grid-row:2;text-align:right}#route-picker .route-card-status{grid-column:1;grid-row:2;align-self:center}}

#route-future{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;text-align:left}#overlay[data-screen="title"] #route-future{display:grid;grid-column:1/-1;grid-row:6}.route-future-card{padding:8px 10px;border:1px dashed #434835;border-radius:3px;background:#0e150dde;color:#a3aa8d}.route-future-card strong,.route-future-card span,.route-future-card small{display:block}.route-future-card strong{font-size:12px;line-height:1.3;color:#c0c5a8}.route-future-card span{font:10px/1.5 DaCATMono,'Courier New',monospace;color:#a99f73}.route-future-card small{font-size:10px;line-height:1.3;color:#929b80}#overlay[data-screen="title"] .title-secondary{grid-row:7}#overlay[data-screen="title"] #tutorial{grid-row:8}
@media(max-height:600px) and (orientation:landscape){#overlay[data-screen="title"] #route-future{grid-column:3;grid-row:3}#overlay[data-screen="title"] .title-secondary{grid-column:1/3;grid-row:4}.route-future-card{padding:5px}.route-future-card small{display:none}}