/* Shared eight-direction controls for advanced dice and postcard travel. */
html body .sidePanel .dirGrid{
  display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:7px !important;padding-bottom:0 !important;width:100%;min-width:0;
}
html body .sidePanel .dirBtn{
  box-sizing:border-box;width:100% !important;min-width:0 !important;
  height:42px !important;min-height:42px !important;padding:2px 6px !important;
  border:0 !important;border-radius:13px !important;
  background:#fff !important;color:#10224a !important;
  font-weight:var(--fwBtn) !important;font-size:20px !important;
  line-height:1 !important;letter-spacing:.02em !important;
  box-shadow:0 4px 0 rgba(160,170,185,.95),0 8px 14px rgba(0,0,0,.20);
  cursor:pointer;white-space:nowrap;
  transition:transform .08s ease,box-shadow .08s ease,filter .08s ease;
}
html body .sidePanel .dirBtn:is([data-dir="N"],[data-dir="E"],[data-dir="S"],[data-dir="W"]){font-size:22px !important;}
html body .sidePanel .dirBtn:is(:active,.is-pressed){
  transform:translateY(4px) !important;filter:brightness(.96);
  box-shadow:0 1px 0 rgba(160,170,185,.95),0 3px 8px rgba(0,0,0,.20) !important;
}
@media(max-width:700px){
  html body .sidePanel .dirBtn{height:34px !important;min-height:34px !important;font-size:16px !important;}
  html body .sidePanel .dirBtn:is([data-dir="N"],[data-dir="E"],[data-dir="S"],[data-dir="W"]){font-size:16px !important;}
}
@media(min-width:701px) and (max-width:1366px){
  html body .sidePanel .dirGrid{gap:6px !important;}
  html body .sidePanel .dirBtn{height:34px !important;min-height:34px !important;font-size:18px !important;border-radius:12px !important;}
  html body .sidePanel .dirBtn:is([data-dir="N"],[data-dir="E"],[data-dir="S"],[data-dir="W"]){font-size:18px !important;}
}
/* Dice route guidance and the opening airport hint share the same glow. */
html body.has-symbol-hint-setting .sidePanel .dirBtn.pulse,
html body.travel-postcard .sidePanel .dirBtn.airportIntroHint{
  animation:sharedTravelDirectionPulse 1.15s ease-in-out infinite !important;
  outline:none;
}
@keyframes sharedTravelDirectionPulse{
  0%{
    filter:brightness(1);
    box-shadow:
      0 4px 0 rgba(160,170,185,.95),
      0 8px 14px rgba(0,0,0,.20),
      0 0 0 rgba(255,216,61,0);
  }
  50%{
    filter:brightness(1.15);
    box-shadow:
      0 4px 0 rgba(160,170,185,.95),
      0 8px 14px rgba(0,0,0,.20),
      0 0 22px rgba(255,216,61,.82);
  }
  100%{
    filter:brightness(1);
    box-shadow:
      0 4px 0 rgba(160,170,185,.95),
      0 8px 14px rgba(0,0,0,.20),
      0 0 0 rgba(255,216,61,0);
  }
}
@media(prefers-reduced-motion:reduce){
  html body.has-symbol-hint-setting .sidePanel .dirBtn.pulse,
  html body.travel-postcard .sidePanel .dirBtn.airportIntroHint{
    animation:none !important;
    box-shadow:0 4px 0 rgba(160,170,185,.95),0 8px 14px rgba(0,0,0,.20),0 0 22px rgba(255,216,61,.82);
  }
}
/* Match the advanced dice panel spacing, including during the airport hint. */
html body.travel-postcard .sidePanel .routeArea{
  padding:10px !important;
  border:1px solid rgba(210,245,255,.18) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.08) !important;
}
html body.travel-postcard .sidePanel .dirGrid{gap:7px !important;}
@media(min-width:701px) and (max-width:1366px){
  html body.travel-postcard .sidePanel .routeArea{padding:7px !important;}
  html body.travel-postcard .sidePanel .dirGrid{gap:6px !important;}
}

/* Advanced dice: align eight compact directions with the route input cells. */
html.travel-advanced body .sidePanel .routeArea{container-type:inline-size;}
html.travel-advanced body .sidePanel :is(.dirGrid,.routeSlots){
  grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  gap:5px !important;
}
html.travel-advanced body .sidePanel .dirBtn{
  height:32px !important;min-height:32px !important;
  padding:2px 0 !important;border-radius:9px !important;
  font-size:13px !important;letter-spacing:0 !important;
}
html.travel-advanced body .sidePanel .dirBtn:is([data-dir="N"],[data-dir="E"],[data-dir="S"],[data-dir="W"]){font-size:18px !important;}
html.travel-advanced body .sidePanel .slot{
  box-sizing:border-box;height:32px !important;min-height:32px !important;
  border-radius:9px !important;
}
@container(max-width:299px){
  html.travel-advanced body .sidePanel .dirGrid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
}