/* Domiki v1.12.0.9 — responsive, fully visible action dock.
   Keeps original buttons (and their game listeners); only the layout changes. */
html body .living-settings {
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  box-sizing:border-box !important;
  align-items:center !important;
}
html body .living-settings .domiki-action-dock,
html body .living-settings .domiki-action-dock > button {
  box-sizing:border-box !important;
}

/* A pair of actual rows: display options + action buttons. The earlier
   fixed 38px height clipped both rows and made actions float over the map. */
@media (max-width:800px) {
  html body .living-settings {
    display:grid !important;
    grid-template-columns:max-content minmax(0, 1fr) !important;
    grid-template-rows:auto auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    flex:0 0 auto !important;
    gap:6px 8px !important;
    padding:7px 9px 8px !important;
    margin:0 !important;
    max-width:100% !important;
    overflow:visible !important;
  }
  html body .living-settings label {
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:center !important;
    margin:0 !important;
    font-size:clamp(11px, 3vw, 13px) !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }
  html body .living-settings #livingQuality {
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:start !important;
    box-sizing:border-box !important;
    width:104px !important;
    min-width:0 !important;
    max-width:100% !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    padding:4px 7px !important;
    margin:0 !important;
    font-size:14px !important;
    line-height:1.15 !important;
  }
  html body .living-settings .domiki-action-dock {
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow:row !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    padding:0 !important;
    margin:0 !important;
    -webkit-overflow-scrolling:auto !important;
    scrollbar-width:none !important;
  }
  html body .living-settings .domiki-action-dock > button {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-content:center !important;
    align-items:center !important;
    justify-content:center !important;
    gap:1px 3px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    min-height:38px !important;
    max-height:none !important;
    margin:0 !important;
    padding:4px 5px !important;
    font-size:clamp(9.5px, 2.35vw, 11px) !important;
    font-weight:800 !important;
    line-height:1.08 !important;
    letter-spacing:0 !important;
    text-align:center !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
    overflow:visible !important;
    text-overflow:clip !important;
    border-radius:14px !important;
  }
  html body .living-settings .domiki-action-dock > #collectAllMapCoins span,
  html body .living-settings .domiki-action-dock > #tractorShortcut #tractorShortcutText {
    display:inline !important;
    min-width:0 !important;
    max-width:100% !important;
    font-size:inherit !important;
    font-weight:inherit !important;
    line-height:inherit !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    text-overflow:clip !important;
  }
  html body .living-settings .domiki-action-dock > #tractorShortcut .tractor-shortcut-icon,
  html body .living-settings .domiki-action-dock > #towerEntry .button-icon,
  html body .living-settings .domiki-action-dock > .wonder-shop-button .button-icon {
    font-size:14px !important;
    line-height:1 !important;
    flex:0 0 auto !important;
  }
  html body .living-settings .domiki-action-dock > #towerEntry,
  html body .living-settings .domiki-action-dock > .wonder-shop-button {
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    line-height:1.08 !important;
  }
  html body .living-settings .domiki-action-dock > #towerEntry small {
    display:none !important;
  }
}
@media (max-width:360px) {
  html body .living-settings {
    gap:6px 6px !important;
    padding:7px 7px 9px !important;
  }
  html body .living-settings .domiki-action-dock {
    gap:5px !important;
  }
  html body .living-settings .domiki-action-dock > button {
    padding:4px 3px !important;
    min-height:36px !important;
    font-size:9.5px !important;
  }
  html body .living-settings #livingQuality {
    width:98px !important;
    font-size:13px !important;
  }
}

/* Keep the desktop dock on one row but don't clip it to the old 40px bar. */
@media (min-width:801px) {
  html body .living-settings {
    min-height:49px !important;
    padding-top:7px !important;
    padding-bottom:7px !important;
  }
  html body .living-settings .domiki-action-dock > button {
    line-height:1.2 !important;
  }
}

/* The fourth action is essential on phones: wonders are not hidden behind
   collapsed map tools, and are always as reachable as the tower and garage. */
html body .living-settings .domiki-action-dock > .wonder-shop-button {
  display:inline-flex !important;
  visibility:visible !important;
  background:linear-gradient(135deg,#f0e6ff,#e4d5fb) !important;
  color:#563c7a !important;
  border-color:#bea0d9 !important;
  white-space:normal !important;
  min-width:0 !important;
  overflow-wrap:normal !important;
  text-align:center !important;
}
@media(max-width:800px){
  html body .living-settings .domiki-action-dock > .wonder-shop-button{
    min-height:38px !important;
    max-height:none !important;
  }
  html body .living-settings .domiki-action-dock > #towerEntry{
    min-height:38px !important;
  }
}
@media(max-width:360px){
  html body .living-settings .domiki-action-dock > .wonder-shop-button{
    min-height:36px !important;
  }
}

/* A medium desktop has a narrow map column: keep actions inside it rather
   than letting the desktop flex row overflow over the city or side panels. */
@media (min-width:801px) and (max-width:1200px) {
  html body .living-settings {
    display:grid !important;
    grid-template-columns:max-content minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    gap:7px 10px !important;
    height:auto !important;
    min-height:0 !important;
    padding:9px 11px !important;
  }
  html body .living-settings label {grid-column:1 !important;grid-row:1 !important;}
  html body .living-settings #livingQuality {grid-column:2 !important;grid-row:1 !important;}
  html body .living-settings .domiki-action-dock {
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    padding:0 !important;
    overflow:visible !important;
    width:100% !important;
    max-width:100% !important;
  }
  html body .living-settings .domiki-action-dock > button {
    white-space:normal !important;
    width:100% !important;
    max-width:100% !important;
    min-height:43px !important;
    height:auto !important;
    max-height:none !important;
  }
}