/* Local UI polish on v70. Presentation only: no world geometry or save changes.
   Load last. Existing illustrated assets, translations and visibility states own
   their behavior; this layer owns the spacing and surface treatment. */
:root {
  --ui-ink: #173f48;
  --ui-muted: #42696d;
  --ui-paper: #e8f5ed;
  --ui-border: #8cbab3;
  --ui-deep: #164e53;
  --ui-shadow: 0 12px 32px #052e3a30;
}

/* Readable paper panels with consistent headings and restrained ornament. */
dialog {
  color: var(--ui-ink);
  border: 1px solid #cceadd;
  background: radial-gradient(ellipse at 100% 0, #fff6d875, transparent 48%),
    linear-gradient(145deg, #eff9f1, #c1ded9);
  box-shadow: 0 24px 80px #03232b70;
  scrollbar-width: thin;
  scrollbar-color: #619b95 transparent;
}
dialog::before { border-color: #ffffff85; }
dialog h2, .feature-dialog h2, .community-dialog h2 {
  line-height: 1.5;
  overflow-wrap: anywhere;
}
dialog .eyebrow { color: var(--ui-muted); }
dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) {
  border-color: var(--ui-border);
  border-radius: 12px;
  background-color: #f8fcf7;
  color: var(--ui-ink);
  max-width: 100%;
}
dialog :is(input, select, textarea):focus-visible {
  outline: 2px solid #28766c;
  outline-offset: 3px;
}
dialog .primary:not(.art-confirm), #settings-dialog #save-settings {
  border: 1px solid #438a7d;
  background: linear-gradient(#28786e, #195951);
  color: #f5ffef;
  box-shadow: 0 3px 8px #134c421a;
  border-radius: 12px;
}
dialog .primary:disabled {
  background: #bed2cc;
  border-color: #a0bdb4;
  color: #48665e;
  box-shadow: none;
}
#settings-dialog :is(#open-garden-tools, #edit-player-name) {
  background: #f0f8ef;
  border-color: #98bcb0;
  color: #235e55;
  box-shadow: none;
}
#settings-dialog .setting-row { border-bottom: 1px solid #5b928226; }
#settings-dialog input[role=switch] {
  accent-color: #267667;
  flex-shrink: 0;
  cursor: pointer;
}
.settings-note { border-top: 1px solid #5b928233; }
.settings-note p { color: var(--ui-muted); }
.hub-grid button, .goal-card, .progress-balances>div, .inbox-message {
  border-color: #96bfb580;
  box-shadow: 0 2px 6px #17473c08;
}
.hub-grid button { background: linear-gradient(#f8fff4cc, #d6e9dfb3); }
.feature-dialog .goal-ready { filter: none; border-color: #6b9a72; background-color: #edf7df; }
.selected-panel { box-shadow: var(--ui-shadow); }
.selected-panel .selected-heading h2 { line-height: 1.45; }
.selected-panel .selected-actions { gap: 8px; }
.selected-panel .selected-actions button { min-height: 44px; border-radius: 10px; }
.garden-guide { border-color: #b2d1b9; box-shadow: var(--ui-shadow); }

/* Shop: the artwork stays in the frame and cards, behind readable content. */
#game #shop {
  background: linear-gradient(145deg, #ecf8efeF, #b6dcd7fa);
  border: 1px solid #d6efdc;
  box-shadow: 0 24px 72px #032d3b66;
  overflow: hidden;
}
#game #shop::before {
  inset: 0;
  background-size: 100% 100%;
  opacity: .28;
}
#game #shop::after { opacity: .18; }
#game #shop .shop-surface { display: none; }
#game #shop .panel-heading {
  position: relative;
  grid-area: heading;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  z-index: 4;
}
#game #shop .panel-heading>div {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
  min-width: 0;
}
#game #shop .panel-heading h1 { color: var(--ui-ink); text-shadow: none; }
#game #shop .crystal-close {
  position: static;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  padding: 6px;
  border: 1px solid #74a49a66;
  border-radius: 12px;
  background: #f4fff480;
  filter: none;
}
#game #shop #categories {
  position: relative;
  inset: auto;
  grid-area: categories;
  margin: 0;
  width: 100%;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 6px;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: #84b3a5 transparent;
  scroll-padding-inline: 6px;
}
#game #shop #categories button {
  border-color: #8bb9ad77;
  background: #f3fcf099;
  color: #2b5955;
  box-shadow: none;
}
#game #shop #categories button[aria-pressed=true] {
  background: #235f59;
  color: #f4ffea;
  border-color: #235f59;
  box-shadow: inset 0 -3px #d5c888;
}
#game #shop .shop-list {
  position: relative;
  inset: auto;
  grid-area: items;
  min-height: 0;
  gap: 12px;
  padding: 2px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
#game #shop .shop-card {
  padding: 10px;
  gap: 6px;
  border: 1px solid #8ab6ac70;
  border-radius: 16px;
  background-color: #effbf2b3;
  box-shadow: 0 3px 8px #245b4610;
}
#game #shop .shop-card h2 {
  position: static;
  clip: auto;
  width: 100%;
  height: auto;
  min-height: 36px;
  margin: 0;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  font: 600 13px/18px Tahoma, Arial, sans-serif;
  text-align: center;
  color: var(--ui-ink);
  text-shadow: none;
  flex-shrink: 0;
}
#game #shop .shop-card>img { min-height: 64px; }
#game #shop .shop-card .price-button {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 6px 10px;
  gap: 6px;
  font-size: 16px;
  border-radius: 10px;
}
#game #shop .affordability-status {
  font-size: 12px;
  line-height: 1.5;
  background: #f1f9eecc;
  color: #325d47;
}
#game #shop .affordability-status.insufficient { background: #fff0d6; color: #78501d; }
#game #shop .shop-controls {
  position: relative;
  grid-area: controls;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid #78a69955;
}
#game #shop .shop-inventory {
  position: static;
  width: auto;
  min-width: 100px;
  max-width: 52%;
  min-height: 44px;
  height: auto;
  padding: 8px 12px;
  background: #235f59;
  border-color: #448c7e;
  border-radius: 12px;
  box-shadow: none;
  font-size: 14px;
  white-space: normal;
}
#game #shop .shop-pagination {
  position: static;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 200px;
  min-width: 0;
  pointer-events: auto;
  direction: ltr;
}
#game #shop .shop-pagination button {
  position: static;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  background: #f2fcf0b3;
  border: 1px solid #8bb9ad80;
  border-radius: 12px;
}
#game #shop #shop-page-label {
  position: static;
  width: auto;
  min-width: 40px;
  flex: 1;
  height: auto;
  line-height: 1.5;
  font-size: 14px;
  background: transparent;
  color: #305e54;
  border: 0;
}

/* Desktop HUD: compact illustrated controls, named tools, an open center. */
@media (min-width:701px) and (pointer:fine) {
  :root {
    --profile-width: clamp(200px,22vw,260px); --profile-height: 64px;
    --resource-width: clamp(106px,12vw,156px); --resource-height: 54px; --resource-icon: 36px;
    --side-size: 48px; --counter-font: 24px;
    --build-width: 110px; --build-height: 108px;
    --dhikr-height: 126px; --dhikr-button-height: 94px;
  }
  .topbar { inset: 18px 24px auto; align-items: center; gap: 24px; }
  .brand strong { font-size: 26px; }
  .brand-level { font-size: 19px; border-width: 1px; }
  .wallet { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 0; }
  .resource>div { flex-direction: column; padding: 5px 8px; gap: 2px; border-radius: 12px; }
  .resource-label {
    position: static; clip: auto; width: auto; height: auto;
    max-width: 100%; font: 11px/16px Tahoma, Arial, sans-serif;
    color: #d2e8db; text-overflow: ellipsis;
  }
  .resource strong { font-size: min(23px,calc((var(--resource-width) - 52px) / var(--number-chars,7) * 1.65)); line-height: 1.15; }
  .left-actions { top: 104px; left: 24px; flex-direction: row; gap: 8px; }
  .left-actions button { padding: 5px; background: #123f47dd; border: 1px solid #b4d6ba77; border-radius: 14px; }
  .garden-stats { left: 24px; top: 165px; font-size: 12px; }
  button.save-status { left: 24px; top: 199px; bottom: auto; max-width: 170px; min-height: 44px; font-size: 12px; }
  .island-quick { top: 94px; left: 50%; right: auto; transform: translateX(-50%); max-width: 260px; min-height: 40px; font-size: 14px; }
  .toolbar {
    top: 104px; right: 24px; bottom: auto; width: 156px;
    display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px;
    padding: 8px; background: #123f47ed; border: 1px solid #b4d6ba66;
    border-radius: 20px; box-shadow: var(--ui-shadow);
  }
  .toolbar .tool-divider { display: none; }
  .toolbar .tool:not(#open-shop), .toolbar #open-inventory {
    position: relative; display: flex; flex-direction: column; justify-content: center;
    align-items: center; width: 100%; height: auto; min-height: 74px;
    padding: 6px 3px; gap: 4px; border-radius: 12px; background: #d1edd40d;
  }
  .toolbar .tool:not(#open-shop)>img, .toolbar #open-inventory .inventory-art {
    position: static; display: block; clip: auto; overflow: visible; width: 34px; height: 34px;
  }
  .toolbar .tool:not(#open-shop)>span:not(.inventory-art) {
    position: static; clip: auto; width: auto; height: auto; overflow: visible;
    font: 12px/1.4 Tahoma, Arial, sans-serif; color: #edf7dd;
    white-space: normal; overflow-wrap: anywhere; text-align: center;
  }
  #open-shop { left: 20px; bottom: 18px; }
  #open-shop>span { display: none; }
  .camera-controls { left: 24px; bottom: 142px; gap: 6px; }
  .camera-controls button, .camera-controls #recenter {
    width: 44px; height: 44px; font-size: 26px; padding: 7px;
    border: 1px solid #b4d6ba77; border-radius: 12px; background: #123f47ed;
  }
  .camera-controls img { width: 28px; height: 28px; }
  .dhikr-dock {
    left: 50%; right: auto; transform: translateX(-50%); bottom: 16px;
    width: min(660px,calc(100vw - 320px)); padding: 0 12px;
    border: 1px solid #bfdcc45c; border-radius: 28px;
    background: url('/assets/ui/dhikr-vines.webp') center 5px/100% 85px no-repeat,
      linear-gradient(#113b47a8,#0e3440ed); box-shadow: var(--ui-shadow);
  }
  .dhikr small { display: none; }
  .dock-note { background: none; font-size: 12px; }
  .selected-panel { width: min(580px,calc(100vw - 64px)); padding: 22px; max-height: calc(100dvh - 220px); overflow-y: auto; }
  .selected-heading h2 { font-size: 24px; }
  .selected-image { width: 130px; height: 145px; }
  .item-description { font-size: 15px; }
  .selected-panel .primary, .selected-actions button { font-size: 15px; }
  .selected-actions img { width: 28px; height: 30px; }
  .placement-bar { width: min(760px,calc(100vw - 48px)); padding: 16px 20px; gap: 14px; }
  .placement-bar strong { font-size: 20px; }
  .placement-bar>div>span { font-size: 14px; }
  dialog { max-width: 760px; padding: 48px 32px 28px; }
  dialog h2 { font-size: 30px; }
  .setting-row { font-size: 16px; padding: 16px 0; }
  .settings-note strong { font-size: 18px; }
  .settings-note p, #progress-dialog p, #messages-dialog p { font-size: 15px; }
  dialog .primary { font-size: 16px; min-height: 48px; padding: 10px 18px; }
  #settings-dialog { max-width: 560px; }
  #game #shop {
    --shop-page-size: 8;
    inset: 50% auto auto 50%; transform: translate(-50%,-50%);
    width: min(900px,calc(100vw - 64px)); height: min(710px,calc(100dvh - 48px));
    aspect-ratio: auto; padding: 22px; border-radius: 28px;
    display: grid; grid-template-columns: minmax(0,1fr);
    grid-template-rows: 58px 78px minmax(0,1fr) 54px;
    grid-template-areas: 'heading' 'categories' 'items' 'controls'; gap: 12px;
  }
  #game #shop .panel-heading h1 { margin: 3px 0 0; font-size: 25px; }
  #game #shop .panel-heading .eyebrow { display: block; font-size: 12px; }
  #game #shop #categories { height: 78px; }
  #game #shop #categories button { flex: 1 0 72px; min-height: 64px; }
  #game #shop .shop-list { grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(220px,1fr)); grid-auto-rows: minmax(220px,1fr); }
  #game #shop .shop-card { min-height: 220px; }
  #toast { top: 96px; font-size: 15px; padding: 12px 18px; }
}

/* Phones keep the established safe areas, camera controls and short-landscape
   layout. Only surfaces, text and small interior spaces change here. */
@media (max-width:700px), (max-width:1400px) and (any-pointer:coarse) {
  #game #shop { border-radius: 22px; }
  #game #shop .shop-list { gap: 8px; }
  #game #shop .shop-card { padding: 8px; min-height: 210px; }
  #game #shop .shop-list { grid-template-rows: repeat(2,minmax(210px,1fr)); grid-auto-rows: minmax(210px,1fr); }
  #game #shop[data-page-size='2'] .shop-list { grid-template-rows: minmax(210px,1fr); }
  #game #shop .shop-controls { gap: 8px; padding-top: 0; border: 0; }
  #game #shop .shop-pagination { gap: 4px; }
  #game #shop .shop-inventory { padding: 6px 8px; }
  #settings-dialog h2 { padding-inline-end: 24px; }
  .dhikr-dock { border-color: #c4e4cc80; }
  .mobile-tools-toggle, .left-actions button { box-shadow: 0 3px 9px #123e3b20; }
}
@media (max-width:700px) and (max-height:650px) and (orientation:landscape), (max-width:1400px) and (any-pointer:coarse) and (max-height:650px) and (orientation:landscape) {
  #game #shop .shop-list { grid-template-rows: minmax(210px,1fr); }
  #game #shop #categories { overflow-x: hidden; overflow-y: auto; padding: 2px; }
}

/* Focus feedback works for keyboard and touch; no new perpetual animations. */
#game :is(.tool,.camera-controls button,.shop-inventory,.shop-pagination button):focus-visible,
dialog button:focus-visible {
  outline: 3px solid #f1d78f;
  outline-offset: 2px;
}
@media (hover:hover) and (pointer:fine) {
  .toolbar .tool:not(#open-shop):hover { background-color: #d1edd426; }
  .hub-grid button:hover { border-color: #518c76; box-shadow: 0 4px 10px #245b4620; }
  #game #shop .shop-card:hover { border-color: #609b86; filter: none; }
}