html body.has-travel-sound .mapFooter #travelSoundToggle {
  position:static!important;
  display:inline-flex!important;
  flex:0 0 64px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  width:64px!important;
  min-width:48px!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:4px!important;
  box-sizing:border-box!important;
  border:1px solid rgba(210,225,245,.65)!important;
  border-radius:10px!important;
  background:rgba(15,35,78,.75)!important;
  color:#d5e0ef!important;
  box-shadow:none!important;
  transform:none!important;
  font:700 10px/1 system-ui,sans-serif!important;
  cursor:pointer;
  pointer-events:auto;
  z-index:1000;
}
html body.has-travel-sound .mapFooter #travelSoundToggle.is-on {
  color:#ffe9a6!important;
  border-color:#ffe078!important;
}
#travelSoundToggle svg {
  display:block;
  flex:0 0 20px;
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#travelSoundToggle:not(.is-on) .travelSoundWaves,
#travelSoundToggle.is-on .travelSoundMute {display:none;}
#travelSoundToggle:focus-visible {outline:3px solid #ffe078;outline-offset:2px;}
@media (max-width:600px) and (orientation:portrait) {
  html body.has-travel-sound:is(.has-symbol-hint-setting,.travel-postcard) .mapPanel .mapFooter {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,.9fr) 48px!important;
    gap:4px!important;
    height:40px!important;
    min-height:40px!important;
  }
  html body.has-travel-sound:is(.has-symbol-hint-setting,.travel-postcard) .mapPanel .mapFooter > * {
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:4px!important;
    box-sizing:border-box!important;
  }
  html body.has-travel-sound:is(.has-symbol-hint-setting,.travel-postcard) .mapFooter :is(.diceMapReturn,.backInMap) {
    padding:0!important;
  }
  html body.has-travel-sound .mapFooter :is(.diceMapReturn,.backInMap) img {
    width:100%!important;
    height:40px!important;
    object-fit:contain;
  }
  html body.has-travel-sound:is(.has-symbol-hint-setting,.travel-postcard) .mapFooter #resetBtn {
    padding:4px!important;
    gap:2px!important;
  }
  html body.has-travel-sound:is(.has-symbol-hint-setting,.travel-postcard) .mapFooter #resetBtn .diceRestartIcon {
    flex:0 0 14px!important;
    min-width:14px!important;
    width:14px!important;
    height:14px!important;
  }
  html body.has-travel-sound:is(.has-symbol-hint-setting,.travel-postcard) .mapFooter #resetBtn .floatIconText {
    font-size:11px!important;
  }
  html body.has-travel-sound .mapFooter :is(.diceLangToggle,.postcardLangToggle) {
    font-size:11px!important;
  }
  html body.has-travel-sound .mapFooter #travelSoundToggle {width:48px!important;}
}
@media (orientation:portrait) and (min-width:601px) {
  html body.has-travel-sound .mapFooter #travelSoundToggle {width:88px!important;}
}
@media (max-width:600px) and (orientation:portrait) {
  html body.has-travel-sound .mapFooter #resetBtn .floatIconText {
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
    flex:0 1 auto!important;
  }
}
@media (max-width:350px) and (orientation:portrait) {
  html body.has-travel-sound:is(.has-symbol-hint-setting,.travel-postcard) .mapFooter #resetBtn .floatIconText {
    font-size:10px!important;
  }
}
@media (orientation:portrait) and (min-width:601px), (orientation:landscape) and (max-height:520px) {
  html body.has-travel-sound .mapFooter #travelSoundToggle {
    flex:0 0 40px!important;
    width:88px!important;
    min-width:88px!important;
    max-width:88px!important;
    height:40px!important;
    min-height:40px!important;
  }
}
/* Keep the original navigation row: sound uses space saved by restart. */
@media (min-width:601px) and (min-height:521px) {
  html body.has-travel-sound:is(.has-symbol-hint-setting,.travel-postcard) .mapPanel .mapFooter {
    display:grid!important;
    grid-template-columns:minmax(0,88px) minmax(0,88px) minmax(0,112px) minmax(0,68px) 56px!important;
    justify-content:space-between!important;
    align-items:center!important;
    gap:4px!important;
    height:40px!important;
    min-height:40px!important;
  }
  html body.has-travel-sound:is(.has-symbol-hint-setting,.travel-postcard) .mapPanel .mapFooter > :is(a,button) {
    position:static!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:40px!important;
    min-height:40px!important;
    margin:0!important;
    box-sizing:border-box!important;
  }
  html body.has-travel-sound:is(.has-symbol-hint-setting,.travel-postcard) .mapPanel .mapFooter #resetBtn {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:4px!important;
    gap:4px!important;
  }
  html body.has-travel-sound .mapFooter #resetBtn .diceRestartIcon {
    width:16px!important;
    height:16px!important;
    min-width:16px!important;
    flex:0 0 16px!important;
  }
  html body.has-travel-sound .mapFooter #resetBtn .floatIconText {
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    font-size:12px!important;
    transform:none!important;
    white-space:nowrap!important;
  }
  html body.has-travel-sound .mapFooter #resetBtn .floatIconText::before,
  html body.has-travel-sound .mapFooter #resetBtn .floatIconText::after {
    content:none!important;
    display:none!important;
  }
  html body.has-travel-sound .mapPanel .mapFooter #travelSoundToggle {
    width:56px!important;
    min-width:0!important;
    max-width:none!important;
  }
}
/* Tablet portrait keeps its established board height and side navigation. */
@media (orientation:portrait) and (min-width:601px) and (min-height:521px) {
  html body.has-travel-sound.travel-postcard .mapPanel .mapFooter {
    display:grid!important;
    grid-template-columns:88px 56px!important;
    grid-template-rows:40px 40px minmax(0,1fr) 40px 40px!important;
    align-content:stretch!important;
    justify-content:start!important;
    width:88px!important;
    height:100%!important;
    gap:8px 4px!important;
    padding:6px 0!important;
  }
  html body.has-travel-sound.travel-postcard .mapPanel .mapFooter > :is(a,button) {
    width:88px!important;
  }
  html body.has-travel-sound.travel-postcard .mapPanel .mapFooter > a:nth-child(1) {grid-column:1;grid-row:1;}
  html body.has-travel-sound.travel-postcard .mapPanel .mapFooter > a:nth-child(2) {grid-column:1;grid-row:2;}
  html body.has-travel-sound.travel-postcard .mapPanel .mapFooter #resetBtn {grid-column:1;grid-row:4;}
  html body.has-travel-sound.travel-postcard .mapPanel .mapFooter #travelSoundToggle {grid-column:2;grid-row:4;width:56px!important;}
  html body.has-travel-sound.travel-postcard .mapPanel .mapFooter #postcardLangToggle {grid-column:1;grid-row:5;}
}
/* Narrow portrait tablets retain the side rail without covering the board. */
@media (orientation:portrait) and (min-width:601px) and (max-width:739px) and (min-height:521px) {
  html body.has-travel-sound.travel-postcard .mapPanel .mapFooter {
    grid-template-columns:88px!important;
    grid-template-rows:40px 40px minmax(0,1fr) 40px 40px 40px!important;
  }
  html body.has-travel-sound.travel-postcard .mapPanel .mapFooter #travelSoundToggle {
    grid-column:1;grid-row:6;width:88px!important;
  }
}

/* Wide board footers keep returns together on the left and controls on the right. */
@media (orientation:landscape) and (min-width:601px) and (min-height:521px){
  html body.has-travel-sound:is(.has-symbol-hint-setting,.travel-postcard) .mapPanel .mapFooter{
    grid-template-columns:minmax(0,88px) minmax(0,88px) minmax(0,1fr) minmax(0,112px) minmax(0,68px) 56px!important;
    justify-content:stretch!important;
    column-gap:4px!important;
  }
  html body.has-travel-sound:is(.has-symbol-hint-setting,.travel-postcard) .mapPanel .mapFooter > .diceMapReturn{grid-column:1;grid-row:1;}
  html body.has-travel-sound:is(.has-symbol-hint-setting,.travel-postcard) .mapPanel .mapFooter > .backInMap{grid-column:2;grid-row:1;}
  html body.has-travel-sound:is(.has-symbol-hint-setting,.travel-postcard) .mapPanel .mapFooter > #resetBtn{grid-column:4;grid-row:1;}
  html body.has-travel-sound:is(.has-symbol-hint-setting,.travel-postcard) .mapPanel .mapFooter > :is(.diceLangToggle,.postcardLangToggle){grid-column:5;grid-row:1;}
  html body.has-travel-sound:is(.has-symbol-hint-setting,.travel-postcard) .mapPanel .mapFooter > #travelSoundToggle{grid-column:6;grid-row:1;}
}

/* Portrait dice tablets use the same grouped footer as wide screens. */
@media (orientation:portrait) and (min-width:601px) and (min-height:521px){
  html body.has-travel-sound.has-symbol-hint-setting:not(.travel-postcard) .mapPanel .mapFooter{
    grid-template-columns:minmax(0,88px) minmax(0,88px) minmax(0,1fr) minmax(0,112px) minmax(0,68px) 56px!important;
    justify-content:stretch!important;
    column-gap:4px!important;
  }
  html body.has-travel-sound.has-symbol-hint-setting:not(.travel-postcard) .mapFooter > .diceMapReturn{grid-column:1;grid-row:1;}
  html body.has-travel-sound.has-symbol-hint-setting:not(.travel-postcard) .mapFooter > .backInMap{grid-column:2;grid-row:1;}
  html body.has-travel-sound.has-symbol-hint-setting:not(.travel-postcard) .mapFooter > #resetBtn{grid-column:4;grid-row:1;}
  html body.has-travel-sound.has-symbol-hint-setting:not(.travel-postcard) .mapFooter > .diceLangToggle{grid-column:5;grid-row:1;}
  html body.has-travel-sound.has-symbol-hint-setting:not(.travel-postcard) .mapFooter > #travelSoundToggle{grid-column:6;grid-row:1;}
}