/* Shared travel layout: size symbols from the board that is actually visible. */
html body .mapWrap .point{
  width:var(--travel-point-fit, var(--pointSize, 12%)) !important;
  height:var(--travel-point-fit, var(--pointSize, 12%)) !important;
  border-radius:calc(var(--travel-point-fit, var(--pointSize, 12%)) * .25) !important;
}
@media (orientation:landscape) and (min-width:701px){
  html body.travel-postcard .stage{
    grid-template-columns:minmax(0,1fr) minmax(0,.78fr) !important;
    justify-content:stretch !important;
  }
  html body.travel-postcard .mapPanel{width:100% !important;min-width:0 !important;}
  html body.travel-postcard .sidePanel{width:100% !important;min-width:0 !important;}
  html body.travel-postcard .mapBody{padding-top:6px !important;align-items:start !important;}
  html body.travel-postcard .mapWrap{
    width:min(100%,calc(var(--mapSize) * 1.12)) !important;
    height:var(--mapSize) !important;
    aspect-ratio:auto !important;
  }
}

/* Stable instruction slot: text fits naturally without moving controls. */
html body:not(.travel-postcard) .sidePanel .routeTitle{
  box-sizing:border-box;
  display:block !important;
  flex:0 0 auto !important;
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  padding-top:6px !important;
  padding-bottom:4px !important;
  line-height:1.6 !important;
  white-space:normal !important;
  overflow:visible !important;
  -webkit-overflow-scrolling:touch;
}

html body.has-symbol-hint-setting .mapPanel .headRow{
  grid-template-columns:auto minmax(0,1fr) auto !important;
  gap:8px !important;
}
html body.has-symbol-hint-setting .bigTitle{
  display:flex !important;flex-direction:column;align-items:flex-start;gap:3px;
  min-width:0;line-height:1.2;
}
.symbolHintLabel{font-size:11px;font-weight:600;color:#e8f3ff;white-space:nowrap;}
.symbolHintToggle{
  font:600 12px/1.2 system-ui,sans-serif;padding:4px 12px;min-height:28px;
  border:1px solid #91b9dd;border-radius:7px;color:#fff;background:#132f59;cursor:pointer;
}
.symbolHintToggle[aria-pressed="true"]{color:#ffe078;border-color:#ffe078;}
.symbolHintToggle:focus-visible{outline:2px solid #ffe078;outline-offset:2px;}
html body.has-symbol-hint-setting .goalInHead{min-width:0 !important;}

/* Beneath the flip panel, stack the roll button above the instructions. */
html body.has-symbol-hint-setting .diceArea{
  align-items:start !important;
}
html body.has-symbol-hint-setting .dicePrompt{
  min-width:0;display:grid;grid-template-columns:minmax(0,1fr);
  align-content:start;align-items:start;gap:4px;
}
html body.has-symbol-hint-setting .dicePrompt #rollBtn{
  display:block !important;min-width:0 !important;
}
html body.has-symbol-hint-setting .dicePrompt .routeTitle{
  display:block !important;margin:0 !important;width:100%;font-size:14px !important;
}
@media(orientation:landscape) and (max-height:520px){
  html body.has-symbol-hint-setting .dicePrompt .routeTitle{font-size:12px !important;}
}

/* Keep the instruction slot stable while making the dice controls smaller. */
html body.has-symbol-hint-setting :is(#rollBtn,#moveBtn,#undoBtn){
  width:70% !important;
  min-width:0 !important;
  justify-self:center;
}

/* Move guidance and movement controls down together by half a roll-button height. */
html body.has-symbol-hint-setting .dicePrompt .routeTitle,
html body.has-symbol-hint-setting .sidePanel .routeArea{
  position:relative;
  top:max(0px,calc(var(--dice-instruction-drop,48px) * .5 - 12px));
}

/* Bring the roll control and instructions closer to the dice. */
html body.has-symbol-hint-setting .diceArea{column-gap:4px !important;}
html body.has-symbol-hint-setting .dicePrompt #rollBtn{justify-self:start;}
html body.has-symbol-hint-setting .dicePrompt .routeTitle{text-align:left !important;}

/* A selected final goal keeps both its gold emphasis and the red selection border. */
html body.has-symbol-hint-setting .flipItem.is-goal.is-selected{
  color:#c40000;
  box-shadow:inset 0 0 0 5px #c40000,0 0 18px rgba(255,232,74,.9);
}

html body.has-symbol-hint-setting .bigTitle{text-align:left !important;}

/* Reserve separate rows for the heading, map and navigation on every dice screen. */
html body.has-symbol-hint-setting > .stage{
  display:grid !important;grid-template-columns:minmax(0,1fr) minmax(260px,.78fr) !important;
  grid-template-rows:minmax(0,1fr) !important;gap:8px !important;
  padding:calc(8px + var(--safeT)) calc(8px + var(--safeR)) calc(8px + var(--safeB)) calc(8px + var(--safeL)) !important;
  min-height:0 !important;overflow:hidden !important;
}
html body.has-symbol-hint-setting .mapPanel{
  display:grid !important;grid-template-rows:auto minmax(0,1fr) auto !important;
  min-width:0 !important;min-height:0 !important;height:100% !important;width:100% !important;
  overflow:hidden !important;
}
html body.has-symbol-hint-setting .mapPanel .panelHead{
  position:static !important;display:block !important;height:auto !important;
  min-height:0 !important;overflow:visible !important;padding:6px 8px !important;
}
html body.has-symbol-hint-setting .mapPanel .headRow{
  display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-rows:auto !important;gap:6px !important;
}
html body.has-symbol-hint-setting .bigTitle{display:none !important;}
html body.has-symbol-hint-setting .mapPanel .goalInHead{
  display:flex !important;position:static !important;grid-column:1 !important;grid-row:1 !important;
  align-items:baseline;justify-self:start !important;flex-wrap:wrap;gap:4px;
  width:auto !important;max-width:100% !important;min-width:0 !important;
  height:auto !important;overflow:visible !important;padding:0 0 4px !important;
}
html body.has-symbol-hint-setting .mapPanel .status{
  display:block !important;position:static !important;grid-column:2 !important;grid-row:1 !important;
  justify-self:end !important;font-size:clamp(12px,1.8vw,20px) !important;padding:4px 6px !important;
}
html body.has-symbol-hint-setting .mapPanel .goalLabel{display:inline !important;font-size:clamp(12px,1.8vw,18px) !important;}
html body.has-symbol-hint-setting .mapPanel #goalName{display:inline !important;font-size:clamp(18px,2.5vw,30px) !important;overflow-wrap:anywhere;}
html body.has-symbol-hint-setting .mapPanel .is-long-goal #goalName{font-size:clamp(16px,2vw,24px) !important;}
html body.has-symbol-hint-setting .mapPanel .mapBody{
  display:grid !important;place-items:center !important;height:100% !important;
  min-width:0 !important;min-height:0 !important;padding:10px !important;overflow:hidden !important;
}
html body.has-symbol-hint-setting .mapPanel .mapWrap{
  top:0 !important;left:auto !important;margin:0 !important;
  width:var(--dice-board-fit,100%) !important;height:var(--dice-board-fit,auto) !important;
  max-width:100% !important;max-height:100% !important;aspect-ratio:1 / 1 !important;
}
html body.has-symbol-hint-setting .mapPanel .mapFooter{
  position:static !important;inset:auto !important;transform:none !important;
  display:flex !important;flex-wrap:wrap;gap:8px !important;align-items:center;
  width:auto !important;height:auto !important;min-height:40px;
  margin:0 8px 6px !important;padding:0 !important;z-index:auto !important;
}
html body.has-symbol-hint-setting .sidePanel{
  width:100% !important;height:100% !important;min-width:0 !important;min-height:0 !important;
  overflow:auto !important;grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:auto minmax(0,1fr) !important;
}
html body.has-symbol-hint-setting .sidePanel > div{
  min-width:0 !important;min-height:0 !important;height:auto !important;
  grid-column:1 !important;grid-row:auto !important;overflow:visible !important;
}
.symbolHintSetting{
  display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:6px;
  position:relative;top:max(0px,calc(var(--dice-instruction-drop,48px) * .5 - 12px));
  margin:10px 10px 14px;padding:4px 0;
}
.symbolHintSetting .symbolHintToggle{min-height:32px;padding:5px 12px;}
.symbolHintSetting .symbolHintToggle[aria-pressed="true"]{background:#ffe078;color:#10224a;}
@media(orientation:portrait){
  html body.has-symbol-hint-setting > .stage{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:minmax(0,1.15fr) minmax(0,1fr) !important;
  }
  html body.has-symbol-hint-setting .sidePanel{
    display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-rows:minmax(0,1fr) !important;gap:6px !important;
  }
  html body.has-symbol-hint-setting .sidePanel > div:first-child{grid-column:1 !important;grid-row:1 !important;}
  html body.has-symbol-hint-setting .sidePanel > div:nth-child(2){grid-column:2 !important;grid-row:1 !important;}
  html body.has-symbol-hint-setting .sidePanel .routeArea{margin:0 !important;padding:5px !important;}
  html body.has-symbol-hint-setting .sidePanel .diceArea{
    grid-template-columns:64px minmax(0,1fr) !important;padding:4px !important;
  }
  html body.has-symbol-hint-setting .sidePanel .dice3d{width:60px !important;height:64px !important;}
  html body.has-symbol-hint-setting .sidePanel .dicePrompt .routeTitle{font-size:12px !important;}
  html body.has-symbol-hint-setting .sidePanel .symbolHintSetting{margin:8px 4px 12px;}
}
@media(orientation:landscape) and (max-width:700px){
  html body.has-symbol-hint-setting > .stage{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  }
}

/* Older tablet rules used display:contents and fixed flip heights. */
html body.has-symbol-hint-setting .sidePanel > div{
  display:flex !important;flex-direction:column !important;align-items:stretch;
}
html body.has-symbol-hint-setting .sidePanel .flip{
  height:auto !important;min-height:0 !important;flex:0 0 auto !important;
  grid-column:auto !important;grid-row:auto !important;
}
html body.has-symbol-hint-setting .sidePanel .diceArea{
  flex:0 0 auto !important;grid-column:auto !important;grid-row:auto !important;
}
html body.has-symbol-hint-setting .sidePanel .routeArea{
  height:auto !important;max-height:none !important;flex:0 0 auto !important;
  grid-column:auto !important;grid-row:auto !important;
}

/* Center the goal independently of the remaining-time indicator. */
html body.has-symbol-hint-setting .mapPanel .headRow{
  grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr) !important;
  align-items:center;
}
html body.has-symbol-hint-setting .mapPanel .goalInHead{
  grid-column:2 !important;justify-self:center !important;
  grid-row:1 !important;width:100% !important;
  flex-wrap:nowrap;white-space:nowrap;justify-content:center;text-align:center;
}
html body.has-symbol-hint-setting .mapPanel .status{
  grid-column:3 !important;grid-row:1 !important;
  width:100%;min-width:0;box-sizing:border-box;
  white-space:nowrap;text-align:right;
}

/* Match the JAPAN title's rounded language selector and sliding gold selection. */
.symbolHintSwitch{
  --hint-index:0;position:relative;display:inline-grid;grid-template-columns:1fr 1fr;
  gap:3px;padding:4px;border-radius:999px;overflow:hidden;
  background:rgba(8,24,58,.44);border:1px solid rgba(255,255,255,.30);
  box-shadow:0 10px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.symbolHintSwitch.is-on{--hint-index:1;}
.symbolHintSwitch::before{
  content:"";position:absolute;left:4px;top:4px;bottom:4px;
  width:calc((100% - 11px) / 2);border-radius:999px;
  background:linear-gradient(180deg,#ead27a 0%,#c99f36 58%,#9b741f 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.28);
  transform:translateX(calc(var(--hint-index) * (100% + 3px)));
  transition:transform .22s cubic-bezier(.2,.7,.2,1);
}
.symbolHintSetting .symbolHintSwitch .symbolHintToggle{
  position:relative;z-index:1;min-width:48px;min-height:32px;padding:0 10px;
  border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.82);
  box-shadow:none;font-family:inherit;font-size:12px;font-weight:800;line-height:1;
  touch-action:manipulation;transition:color .18s ease;
}
.symbolHintSetting .symbolHintSwitch .symbolHintToggle[aria-pressed="true"]{
  background:transparent;color:#241900;border:0;
}
@media(prefers-reduced-motion:reduce){.symbolHintSwitch::before{transition:none;}}

/* Slim down the hint selector while keeping the JAPAN-style gold switch. */
.symbolHintSetting .symbolHintSwitch{padding:3px;}
.symbolHintSetting .symbolHintSwitch::before{
  left:3px;top:3px;bottom:3px;width:calc((100% - 9px) / 2);
}
.symbolHintSetting .symbolHintSwitch .symbolHintToggle{
  min-height:24px;padding:0 10px;font-weight:600;
}
.symbolHintSetting .symbolHintLabel{font-weight:500;}

/* Keep name hints secondary, using the remaining-time indicator's pale tone. */
.symbolHintSetting .symbolHintSwitch{
  background:rgba(12,32,70,.45);border-color:rgba(255,241,168,.20);
  box-shadow:none;
}
.symbolHintSetting .symbolHintSwitch::before{
  background:rgba(255,241,168,.12);box-shadow:none;
}
.symbolHintSetting .symbolHintSwitch .symbolHintToggle{color:rgba(255,241,168,.45);}
.symbolHintSetting .symbolHintSwitch .symbolHintToggle[aria-pressed="true"]{color:#fff1a8;}
.symbolHintSetting .symbolHintLabel{color:rgba(255,241,168,.65);}
.symbolHintSetting .symbolHintToggle:focus-visible{outline-color:#fff1a8;}

/* Postcard hints sit below the movement panel without dice layout offsets. */
html body.travel-postcard .symbolHintSetting{top:0;margin:8px 10px 12px;}

/* Bring postcard movement controls closer to the travelers' feet. */
@media(orientation:landscape) and (min-width:701px){
  html body.travel-postcard .sidePanel{row-gap:0 !important;}
  html body.travel-postcard .postcardTravelers{margin-bottom:0 !important;}
}

/* Portrait dice: flip on the left, dice/prompt/movement/hints together on the right. */
@media(orientation:portrait){
  html body.has-symbol-hint-setting .sidePanel .dicePrompt .routeTitle,
  html body.has-symbol-hint-setting .sidePanel .routeArea,
  html body.has-symbol-hint-setting .sidePanel .symbolHintSetting{
    top:0 !important;
  }
  html body.has-symbol-hint-setting .sidePanel > div:nth-child(2){
    gap:8px;
  }
  html body.has-symbol-hint-setting .mapPanel .status .fullOnly{display:inline !important;}
  html body.has-symbol-hint-setting .mapPanel .status .phoneOnly{display:none !important;}
}

/* Keep the portrait restart icon and label in one compact horizontal button. */
@media(orientation:portrait){
  html body.has-symbol-hint-setting .mapPanel .mapFooter #resetBtn{
    display:inline-flex !important;flex-direction:row !important;
    align-items:center !important;justify-content:center !important;
    flex:0 0 auto !important;gap:6px !important;
    height:40px !important;min-height:40px !important;
    padding:5px 10px !important;white-space:nowrap !important;
  }
  html body.has-symbol-hint-setting .mapFooter #resetBtn .diceRestartIcon{
    display:block !important;width:20px !important;height:20px !important;
    min-width:20px !important;flex:0 0 20px !important;
  }
  html body.has-symbol-hint-setting .mapFooter #resetBtn .floatIconText{
    display:inline !important;white-space:nowrap !important;
    font-size:13px !important;line-height:1.2 !important;
  }
}

/* Both dice levels share the corrected portrait movement width and order. */
@media(orientation:portrait){
  html body.has-symbol-hint-setting .sidePanel .routeArea{
    width:100% !important;box-sizing:border-box !important;
    align-self:stretch !important;order:1 !important;
  }
  html body.has-symbol-hint-setting .sidePanel .diceArea{
    width:100% !important;box-sizing:border-box !important;
    align-self:stretch !important;order:0 !important;
  }
  html body.has-symbol-hint-setting .sidePanel .symbolHintSetting{
    order:2 !important;
  }
}

/* Remove the legacy portrait restart glyph and label displacement. */
@media(orientation:portrait){
  html body.has-symbol-hint-setting .mapFooter #resetBtn .floatIconText{
    min-width:0 !important;transform:none !important;
    margin:0 !important;padding:0 !important;
    border:0 !important;border-radius:0 !important;
    background:transparent !important;box-shadow:none !important;
  }
  html body.has-symbol-hint-setting .mapFooter #resetBtn .floatIconText::before,
  html body.has-symbol-hint-setting .mapFooter #resetBtn .floatIconText::after{
    content:none !important;display:none !important;
  }
}

/* Portrait dice: bottom controls use their content height; the map takes the rest. */
@media(orientation:portrait){
  html body.has-symbol-hint-setting > .stage{
    grid-template-rows:minmax(0,1fr) auto !important;
  }
  html body.has-symbol-hint-setting .sidePanel{
    height:auto !important;align-self:end !important;
    grid-template-rows:auto !important;
  }
}

/* Portrait postcard: photo on the left, travelers and movement controls on the right. */
@media(orientation:portrait){
  html body.travel-postcard > .stage{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:minmax(0,1fr) auto !important;
  }
  html body.travel-postcard .sidePanel{
    display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:auto !important;gap:8px !important;
    height:auto !important;min-height:0 !important;width:100% !important;
  }
  html body.travel-postcard .sidePanel > div{
    display:flex !important;flex-direction:column !important;
    min-width:0 !important;min-height:0 !important;height:auto !important;
    grid-row:1 !important;overflow:visible !important;
  }
  html body.travel-postcard .sidePanel > div:first-child{grid-column:1 !important;}
  html body.travel-postcard .sidePanel > div:nth-child(2){grid-column:2 !important;gap:8px;}
  html body.travel-postcard .sidePanel .postcardTravelers{
    width:100% !important;box-sizing:border-box;order:0;
  }
  html body.travel-postcard .sidePanel .routeArea{
    width:100% !important;box-sizing:border-box !important;
    align-self:stretch !important;margin:0 !important;order:1;
  }
  html body.travel-postcard .sidePanel .symbolHintSetting{order:2;top:0 !important;}
  html body.travel-postcard .sidePanel .eventArea{order:3;}
}

/* Postcard portrait: use the space below the date bar instead of centering the map. */
@media(orientation:portrait){
  html body.travel-postcard .mapPanel .mapBody{
    align-items:start !important;align-content:start !important;
    padding-top:0 !important;
  }
  html body.travel-postcard .mapPanel .mapWrap{
    top:0 !important;margin-top:0 !important;align-self:start !important;
  }
}

/* Keep postcard speech and remaining time inside the portrait right column. */
@media(orientation:portrait){
  html body.travel-postcard .sidePanel .postcardTravelers{
    margin-left:0 !important;margin-right:0 !important;
    width:100% !important;max-width:100% !important;min-width:0 !important;
    box-sizing:border-box !important;
  }
  html body.travel-postcard .sidePanel .postcardTravelers .timeSpeech{
    width:100% !important;max-width:100% !important;min-width:0 !important;
    height:auto !important;max-height:none !important;
    box-sizing:border-box !important;white-space:normal !important;
    overflow-wrap:anywhere;overflow:visible !important;
  }
  html body.travel-postcard .sidePanel .postcardTravelers .timeProgressRemain{
    max-width:100% !important;min-width:0 !important;
    box-sizing:border-box !important;white-space:nowrap !important;
    margin-right:0 !important;justify-self:end !important;
  }
}

/* Portrait postcard movement panel ends just below its instruction text. */
@media(orientation:portrait){
  html body.travel-postcard .sidePanel .routeArea{
    height:auto !important;min-height:0 !important;max-height:none !important;
    flex:0 0 auto !important;padding-bottom:7px !important;
  }
  html body.travel-postcard .sidePanel .routeTitle{
    flex:0 0 auto !important;height:auto !important;
    min-height:0 !important;margin-bottom:0 !important;padding-bottom:0 !important;
  }
}

/* Portrait postcard navigation spans the map panel, like the dice games. */
@media(orientation:portrait){
  html body.travel-postcard .mapPanel{
    width:100% !important;max-width:none !important;min-width:0 !important;
    box-sizing:border-box;
  }
  html body.travel-postcard .mapPanel .mapFooter{
    left:14px !important;right:14px !important;
    width:auto !important;max-width:none !important;
  }
  html body.travel-postcard .mapFooter #resetBtn{margin-left:auto !important;}
}

/* Fit text independently of the fixed instruction slot and action buttons. */
html body.has-symbol-hint-setting .dicePrompt .routeTitle{
  font-size:var(--dice-instruction-font,14px) !important;
}
html body:not(.travel-postcard) .dicePrompt .routeTitle rt{
  font-size:.5em !important;
}
html body:not(.travel-postcard) :is(#rollBtn,#undoBtn,#moveBtn){
  white-space:nowrap !important;
}
html body:not(.travel-postcard) :is(#rollBtn,#undoBtn,#moveBtn) rt{
  font-size:.5em !important;
}
html body:not(.travel-postcard) .flipTitle.flipBrand > span{
  display:block;flex:1 1 0;min-width:0;white-space:nowrap !important;
}
html body:not(.travel-postcard) .flipTitle.flipBrand > img{
  flex-shrink:0;
}
html body:not(.travel-postcard) .flipList .flipName{
  min-width:0;white-space:nowrap !important;
}
html body:not(.travel-postcard) .flipList .flipName rt{
  font-size:.5em !important;
}
html body:not(.travel-postcard) .mapPanel :is(.goalInHead,.status) rt{
  font-size:.5em !important;
}
/* Results reuse the usual trip-return artwork and restart control. */
html body:not(.travel-postcard) #resultOverlay .resultButtons{
  display:flex !important;flex-direction:row !important;
  align-items:center;justify-content:space-between;gap:16px;
  width:min(340px,100%);margin:18px auto 0;
}
html body:not(.travel-postcard) #resultOverlay .resultMenuReturn{
  display:flex;align-items:center;justify-content:center;
  width:88px;min-width:88px;min-height:44px;padding:0;
  border:0;background:transparent;box-shadow:none;
}
.resultMenuReturn img{display:block;width:88px;height:40px;object-fit:contain;}
html body:not(.travel-postcard) #resultOverlay .resultRestart{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:auto;min-width:0;min-height:44px;padding:5px 10px;
  background:rgba(16,36,78,.75);color:#fff;
  border:1px solid rgba(255,255,255,.7);border-radius:10px;
  font-size:13px;line-height:1.2;white-space:nowrap;
  box-shadow:none !important;text-shadow:none !important;
}
.resultRestart .diceRestartIcon{
  width:20px;height:20px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
html body:not(.travel-postcard) #resultOverlay .resultCard{
  max-height:calc(100dvh - 28px);overflow:auto;
}
.resultVisits{margin:16px 0;color:#fff;}
.resultVisits h3{margin:0 0 8px;font-size:14px;line-height:1.5;color:#fff1aa;}
.resultVisits ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;}
.resultVisits li{padding:4px 9px;border:1px solid rgba(255,255,255,.35);border-radius:8px;font-size:14px;line-height:1.5;overflow-wrap:anywhere;}
.resultVisits .resultVisitedSymbol{
  display:grid;place-items:center;width:56px;height:56px;padding:6px;
  box-sizing:border-box;background:#fff;border:1px solid #d8e3f1;
}
.resultVisitedSymbol img{display:block;width:100%;height:100%;object-fit:contain;}
.diceConfetti{
  position:fixed;top:-40px;z-index:350;pointer-events:none;
  animation:dice-confetti-fall linear both;
}
@keyframes dice-confetti-fall{
  0%{transform:translate(0,-35px) rotate(0deg);opacity:0;}
  8%{opacity:1;}
  85%{opacity:1;}
  100%{transform:translate(var(--dice-drift),calc(100dvh + 80px)) rotate(var(--dice-spin));opacity:0;}
}
.symbolConfetti{box-sizing:border-box;padding:4px;background:#fffaf0;border:1px solid #182438;border-radius:6px;}
.symbolConfetti img{display:block;width:100%;height:100%;object-fit:contain;}

/* Phone controls take their natural height; the board fills the remaining canvas. */
@media(orientation:portrait) and (max-width:600px),
      (orientation:landscape) and (max-height:520px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel .mapFooter > :is(a,button){
    box-sizing:border-box !important;min-width:0 !important;
    height:40px !important;min-height:40px !important;margin:0 !important;
    padding:3px 5px !important;transform:none !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapFooter #resetBtn{
    display:flex !important;flex-direction:row !important;gap:4px !important;
    align-items:center !important;justify-content:center !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapFooter #resetBtn .diceRestartIcon{width:16px !important;height:16px !important;flex:0 0 16px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapFooter #resetBtn .floatIconText{font-size:11px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) :is(#undoBtn,#moveBtn) rt{display:none !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel :is(#undoBtn,#moveBtn){
    width:100% !important;height:36px !important;min-height:36px !important;
    padding:4px !important;font-size:14px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .routeArea{
    top:0 !important;height:auto !important;min-height:0 !important;max-height:none !important;
    overflow:visible !important;flex:0 0 auto !important;padding:6px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .symbolHintSetting{top:0 !important;margin:4px 0 !important;padding:0 !important;gap:4px;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .symbolHintSetting .symbolHintToggle{min-height:22px;}
}
@media(orientation:portrait) and (max-width:600px){
  html body.has-symbol-hint-setting:not(.travel-postcard) > .stage > .mapPanel{
    grid-template-rows:40px auto minmax(0,1fr) !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel > .mapFooter{
    grid-row:1 !important;display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px !important;margin:0 !important;align-content:start;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel .mapFooter > :is(a,button){width:100% !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapFooter a img{width:100% !important;max-width:88px !important;height:40px !important;object-fit:contain;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel > .panelHead{grid-row:2 !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel > .mapBody{grid-row:3 !important;height:auto !important;padding:6px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel{
    grid-template-rows:auto auto !important;row-gap:4px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel > div:nth-child(2){gap:6px !important;display:flex !important;flex-direction:column !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel > #routeTitle{
    grid-column:1 / -1 !important;grid-row:2 !important;order:3;
    width:100% !important;height:auto !important;min-height:0 !important;max-height:none !important;
    margin:0 !important;padding:2px 6px 4px !important;top:0 !important;
    font-size:12px !important;line-height:1.6 !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flip{margin:4px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipTitle{min-height:30px !important;padding:3px 5px !important;gap:5px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipBrand img{width:24px !important;height:24px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipBrand > span{font-size:12px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipList{display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:3px !important;padding:4px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipItem{min-height:26px !important;padding:2px 4px !important;grid-template-columns:22px minmax(0,1fr) !important;gap:5px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .miniDice{width:22px !important;height:22px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipName{font-size:12px;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .diceArea{grid-template-columns:50px minmax(0,1fr) !important;min-height:66px !important;padding-top:12px !important;align-items:center !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dice3d{width:46px !important;height:54px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dicePrompt #rollBtn{width:100% !important;height:40px !important;min-height:40px !important;padding:4px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dirBtn{height:38px !important;min-height:38px !important;padding:2px !important;font-size:20px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .routeSlots{margin-top:6px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .judgeRow{margin-top:6px !important;}
}
@media(orientation:landscape) and (max-height:520px){
  html body.has-symbol-hint-setting:not(.travel-postcard) > .stage > .mapPanel{
    grid-template-columns:88px minmax(0,1fr) !important;
    grid-template-rows:auto minmax(0,1fr) !important;column-gap:4px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel > .mapFooter{
    grid-column:1 !important;grid-row:1 / -1 !important;
    display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important;
    width:88px !important;margin:0 !important;padding:0 !important;
    justify-content:center !important;align-items:stretch !important;gap:8px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel .mapFooter > :is(a,button){width:88px !important;flex:0 0 40px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel > .panelHead{grid-column:2 !important;grid-row:1 !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel > .mapBody{grid-column:2 !important;grid-row:2 !important;height:auto !important;padding:4px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel{
    grid-template-rows:auto auto !important;align-content:start !important;overflow:auto !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel > div{display:flex !important;flex-direction:column !important;gap:4px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dicePrompt .routeTitle{top:0 !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flip{margin:0 4px 4px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipTitle{min-height:28px !important;padding:2px 4px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipBrand img{width:24px !important;height:24px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipList{gap:3px !important;padding:3px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipItem{min-height:24px !important;padding:1px 4px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .miniDice{width:22px !important;height:22px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dirBtn{height:32px !important;min-height:32px !important;padding:2px !important;}
}
@media(orientation:portrait) and (max-width:600px),
      (orientation:landscape) and (max-height:520px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapFooter #resetBtn .floatIconText{
    min-width:0 !important;transform:none !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapFooter #resetBtn .floatIconText::before,
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapFooter #resetBtn .floatIconText::after{content:none !important;display:none !important;}
}
@media(orientation:portrait) and (max-width:600px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel .status .fullOnly{display:inline !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel .status .phoneOnly{display:none !important;}
}
/* The horizontal instruction row contributes its real height before movement keys. */
@media(orientation:landscape) and (max-height:520px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .diceArea{
    display:grid !important;grid-template-columns:50px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;align-items:center !important;gap:4px !important;
    height:auto !important;min-height:0 !important;max-height:none !important;padding:4px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dicePrompt{display:contents !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dice3d{grid-column:1;grid-row:1;width:46px !important;height:48px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dicePrompt #rollBtn{grid-column:2;grid-row:1;height:36px !important;min-height:36px !important;padding:3px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dicePrompt .routeTitle{
    grid-column:1 / -1;grid-row:2;
    height:auto !important;min-height:0 !important;max-height:none !important;
    padding:0 !important;margin:0 !important;font-size:12px !important;
  }
}
/* Return artwork and text controls share the same visible button rectangle. */
@media(orientation:portrait) and (max-width:600px),
      (orientation:landscape) and (max-height:520px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel .mapFooter > a{
    display:flex !important;position:static !important;inset:auto !important;
    padding:0 !important;border:0 !important;transform:none !important;
    align-items:center !important;justify-content:center !important;
    max-width:none !important;align-self:stretch !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapFooter a > img{
    display:block !important;width:100% !important;height:100% !important;
    max-width:none !important;object-fit:fill !important;
  }
}
@media(orientation:landscape) and (max-height:520px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel > .mapFooter{
    height:100% !important;align-self:stretch !important;justify-content:flex-start !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel .mapFooter #resetBtn{margin-top:auto !important;}
}
@media(orientation:portrait) and (max-width:600px),
      (orientation:landscape) and (max-height:520px){
  html body.has-symbol-hint-setting:not(.travel-postcard) > .stage > .mapPanel{
    border-radius:0 !important;overflow:visible !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel .status .fullOnly{display:inline !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel .status .phoneOnly{display:none !important;}
}
@media(orientation:landscape) and (max-height:520px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel > .mapFooter{
    padding:6px 0 !important;box-sizing:border-box !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel{
    row-gap:4px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel > div{min-height:min-content !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipTitle{height:28px !important;min-height:28px !important;max-height:28px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipList{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(3,24px) !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipItem{
    height:24px !important;min-height:0 !important;max-height:24px !important;
    padding:1px 4px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .routeSlots{margin-top:4px !important;gap:4px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .slot{min-height:20px !important;height:20px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .judgeRow{margin-top:4px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .symbolHintSetting{
    flex-wrap:nowrap !important;justify-content:flex-end !important;margin:3px 0 !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .symbolHintLabel{font-size:10px !important;}
}
/* Portrait movement uses the whole phone width below the flip and roll controls. */
@media(orientation:portrait) and (max-width:600px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel > .routeArea{
    grid-column:1 / -1 !important;grid-row:2 !important;order:3 !important;
    width:100% !important;margin:0 !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .diceArea{
    display:grid !important;grid-template-columns:50px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;height:auto !important;min-height:0 !important;
    padding:8px 4px 4px !important;gap:6px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dicePrompt{display:contents !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dice3d{grid-column:1;grid-row:1;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dicePrompt #rollBtn{grid-column:2;grid-row:1;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dicePrompt .routeTitle{
    grid-column:1 / -1;grid-row:2;
    top:0 !important;width:100% !important;height:auto !important;
    min-height:0 !important;max-height:none !important;
    margin:0 !important;padding:2px 0 !important;font-size:12px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel > .routeArea .dirBtn{
    height:40px !important;min-height:40px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel > .routeArea .slot{
    height:26px !important;min-height:26px !important;font-size:14px !important;
  }
}
/* Shared language-independent slots: fit text, never resize its panel. */
html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipTitle{
  box-sizing:border-box !important;height:44px !important;min-height:44px !important;max-height:44px !important;
}
html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipList{
  display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:repeat(3,40px) !important;
}
html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipItem{
  box-sizing:border-box !important;height:40px !important;min-height:0 !important;max-height:40px !important;
}
html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel > .panelHead{
  box-sizing:border-box !important;height:60px !important;min-height:60px !important;
}
html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel .headRow{height:48px !important;min-height:48px !important;}
html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel .goalInHead{flex-wrap:nowrap !important;white-space:nowrap !important;}
html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel .goalInHead > span{white-space:nowrap !important;}
html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel .status{
  box-sizing:border-box !important;width:clamp(88px,12vw,128px) !important;
  min-width:0 !important;height:36px !important;min-height:36px !important;
  white-space:nowrap !important;line-height:1.2 !important;
}
html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dicePrompt .routeTitle{
  box-sizing:border-box !important;font-size:var(--dice-instruction-font,14px) !important;
  height:48px !important;min-height:48px !important;max-height:48px !important;
}
html body.has-symbol-hint-setting:not(.travel-postcard) .symbolHintLabel{
  display:block;box-sizing:border-box;width:80px;min-width:80px;height:14px;line-height:14px;
}
html body.has-symbol-hint-setting:not(.travel-postcard) .symbolHintSwitch{
  box-sizing:border-box;width:116px;min-width:116px;flex:0 0 116px;
}
@media(orientation:portrait) and (max-width:600px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel.panel{
    border:0 !important;background:transparent !important;box-shadow:none !important;overflow:visible !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .routeArea{
    border:0 !important;background:transparent !important;box-shadow:none !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dice3d{
    transform:none !important;margin:0 !important;overflow:visible !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipTitle{
    height:32px !important;min-height:32px !important;max-height:32px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipList{
    grid-template-columns:minmax(0,1fr) !important;grid-template-rows:repeat(6,28px) !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipItem{
    height:28px !important;max-height:28px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dicePrompt .routeTitle{
    height:96px !important;min-height:96px !important;max-height:96px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .symbolHintSetting{
    display:grid !important;grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:14px 28px !important;gap:4px !important;
    width:100% !important;height:46px !important;min-height:46px !important;
    margin:4px 0 !important;flex:0 0 46px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .symbolHintSwitch{justify-self:end;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapFooter > :is(a,button){
    width:100% !important;min-width:0 !important;max-width:none !important;
  }
}
@media(orientation:landscape) and (max-height:520px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel{
    display:flex !important;flex-direction:column !important;gap:4px !important;overflow:visible !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel > div{
    flex:0 0 auto !important;height:auto !important;min-height:min-content !important;max-height:none !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipTitle{
    height:28px !important;min-height:28px !important;max-height:28px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipList{grid-template-rows:repeat(3,24px) !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipItem{height:24px !important;max-height:24px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dice3d{height:42px !important;transform:none !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dicePrompt #rollBtn{height:32px !important;min-height:32px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dicePrompt .routeTitle{padding:0 !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .routeArea{margin-top:0 !important;margin-bottom:0 !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .symbolHintSetting{height:28px !important;min-height:28px !important;}
}
@media(orientation:landscape) and (max-height:520px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dirGrid:has(.dirBtn[data-dir="NE"]){
    grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  }
}
/* Intrinsic English text cannot widen the flip panel. */
html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flip{
  box-sizing:border-box !important;width:calc(100% - 20px) !important;
  max-width:calc(100% - 20px) !important;min-width:0 !important;
}
@media(orientation:portrait) and (max-width:600px),
      (orientation:landscape) and (max-height:520px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flip{
    width:calc(100% - 8px) !important;max-width:calc(100% - 8px) !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel.panel{
    border:0 !important;background:transparent !important;box-shadow:none !important;overflow:visible !important;
  }
}
@media(orientation:landscape) and (max-height:520px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flip{border-width:2px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipTitle{
    height:24px !important;min-height:24px !important;max-height:24px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipBrand img{width:20px !important;height:20px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dice3d{height:38px !important;}
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dicePrompt .routeTitle{
    height:40px !important;min-height:40px !important;max-height:40px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .symbolHintSetting{margin:0 !important;}
}
/* Restore the established six-row flip. Two columns belong only to short landscape phones. */
html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipTitle{
  height:58px !important;min-height:58px !important;max-height:58px !important;
}
html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipList{
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:repeat(6,40px) !important;gap:4px !important;padding:6px 10px 10px !important;
}
@media(orientation:portrait) and (max-width:600px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipTitle{
    height:32px !important;min-height:32px !important;max-height:32px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipList{
    grid-template-rows:repeat(6,28px) !important;gap:3px !important;padding:4px !important;
  }
}
@media(orientation:landscape) and (max-height:520px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipTitle{
    height:24px !important;min-height:24px !important;max-height:24px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipList{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(3,24px) !important;gap:3px !important;padding:3px !important;
  }
}

/* Remaining time sits between navigation and restart on landscape phones. */
@media(orientation:landscape) and (max-height:520px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel .mapFooter > .status{
    position:static !important;inset:auto !important;transform:none !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    flex:0 0 40px !important;width:88px !important;min-width:0 !important;max-width:88px !important;
    height:40px !important;min-height:40px !important;margin:auto 0 0 !important;
    padding:6px 4px !important;font-size:12px !important;line-height:1.5 !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .mapPanel .mapFooter #resetBtn{
    margin-top:0 !important;
  }
}

/* Portrait phones: map, direction input, then flip and dice/action columns. */
@media(orientation:portrait) and (max-width:600px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel{
    grid-template-rows:auto minmax(0,1fr) !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel > .routeArea{
    grid-column:1 / -1 !important;grid-row:1 !important;order:0 !important;
    padding:0 4px !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel > div:first-child,
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel > div:nth-child(2){
    grid-row:2 !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel > div:nth-child(2) > .routeActionRow{
    display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:6px !important;
    order:-1 !important;flex:0 0 auto !important;width:100% !important;
    margin:4px 0 !important;padding:0 4px !important;box-sizing:border-box !important;
  }
}

/* Portrait phone hints immediately follow the roll control. */
@media(orientation:portrait) and (max-width:600px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .diceArea{
    grid-template-rows:auto auto auto !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .diceArea > .symbolHintSetting{
    grid-column:1 / -1 !important;grid-row:2 !important;order:0 !important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .dicePrompt .routeTitle{
    grid-row:3 !important;
  }
}
/* Opaque route inputs, with direction labels fitted inside each slot. */
html body:not(.travel-postcard) .sidePanel :is(.routeSlots .slot,#undoBtn){
  background:#4b6491;
  color:#fff;
  border-color:#8299bc;
}
html body:not(.travel-postcard) .sidePanel .routeSlots .slot{
  container-type:size;
}
html body:not(.travel-postcard) .slotDirection{
  display:block;
  white-space:nowrap;
  line-height:1;
  letter-spacing:0;
  font-size:22px;
  font-size:min(43cqw,82cqh,26px);
}
html body:not(.travel-postcard) .slot[data-direction-length="1"] .slotDirection{
  font-size:26px;
  font-size:min(76cqw,82cqh,30px);
}

/* Phone portrait: shrink the flip's pips together with its 22px dice frame. */
@media (orientation:portrait) and (max-width:600px){
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipList .miniDice{
    box-sizing:border-box!important;
    width:22px!important;height:22px!important;
    min-width:22px!important;min-height:22px!important;
    padding:2px!important;border-width:1px!important;border-radius:4px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:repeat(3,minmax(0,1fr))!important;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipList .miniDice > span{
    min-width:0;min-height:0;
  }
  html body.has-symbol-hint-setting:not(.travel-postcard) .sidePanel .flipList .miniDice .pip{
    width:3px!important;height:3px!important;
  }
}