.inventory-pair { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; margin: -10px -3px -5px 0; min-width: 0; }
.inventory-badge.water-inventory { position: relative; display: flex; flex: 0 0 138px; align-items: center; gap: 1px; width: 138px; min-width: 0; height: 68px; padding: 0 7px 1px 0; border: 1px solid #79a59a35; border-radius: 16px 16px 18px 18px; background: linear-gradient(120deg, #f1f6eae8, #deeee4ed); box-shadow: inset 0 1px #ffffff9c, 0 3px 9px #3d736106; color: #3d796f; font-variant-numeric: tabular-nums; }
.inventory-badge.water-inventory .water-inventory__drawing { display: block; flex: 0 0 62px; width: 62px; height: 62px; overflow: visible; fill: none; stroke: none; stroke-width: 0; transform: rotate(2deg); }
.water-inventory__copy { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; gap: 1px; }
.water-inventory__label { color: #698778; font-size: 9px; font-weight: 500; letter-spacing: -.035em; line-height: 1.3; white-space: nowrap; }
.water-inventory__amount { display: flex; align-items: center; min-height: 24px; max-width: 100%; line-height: 1.1; }
.water-inventory__amount b { color: #367f7a; font-family: "Iowan Old Style", Georgia, serif; font-size: 23px; font-weight: 600; letter-spacing: -.045em; }
.water-inventory__portions { position: absolute; right: 7px; top: -6px; padding: 1px 3px; border: 1px solid #c3d7c9; border-radius: 4px; background: #eef7e9f5; color: #4e8072; font-size: 7px; white-space: nowrap; }
.water-inventory__reserve { transition: opacity .25s ease; }
#water-refill { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 23px; padding: 2px 5px; border: 1px solid #77a99666; border-radius: 6px; background: #f5fbf1ce; color: #3d7968; font-size: 8px; white-space: nowrap; pointer-events: auto; }
#water-refill:hover { background: #fffef6; border-color: #69a18b; }
#water-refill:active { background: #cee6d7; }
#water-refill > span { font-size: 12px; line-height: 1; }
.water-inventory[data-water-state="empty"] #water-refill { background: #d2eadb; border-color: #69a18b; }
.water-inventory[data-water-digits="long"] .water-inventory__amount b { font-size: 19px; }
.water-inventory[data-water-digits="many"] .water-inventory__amount b { font-size: 16px; }
.dry-options { grid-column: 2; display: flex; gap: 5px; pointer-events: auto; }
#dry-all { display: flex; align-items: center; gap: 5px; min-height: 31px; padding: 4px 10px; border: 1px solid #b8a07770; border-radius: 8px; background: #faf0d8ed; color: #856936; font-size: 10px; white-space: nowrap; }
#dry-all:hover { background: #fff8e6; border-color: #b39458; }
#dry-all svg { width: 16px; height: 16px; }
.current-tool:has(.dry-options:not([hidden])) { display: grid; grid-template-columns: 5px minmax(0, 1fr); gap: 4px 8px; }
.current-tool:has(.dry-options:not([hidden])) #tool-hint { grid-column: 2; margin: 0; }

@media (max-width: 760px) {
  .inventory-pair { gap: 6px; margin: -5px -2px -3px 0; }
  .inventory-badge.water-inventory { flex-basis: 89px; width: 89px; height: 56px; padding: 0 4px 0 0; border-radius: 11px; }
  .inventory-badge.water-inventory .water-inventory__drawing { flex-basis: 41px; width: 41px; height: 49px; }
  .water-inventory__copy { gap: 0; }
  .water-inventory__label { font-size: 8px; }
  .water-inventory__amount { min-height: 19px; }
  .water-inventory__amount b { font-size: 18px; }
  .water-inventory[data-water-digits="long"] .water-inventory__amount b { font-size: 13px; }
  .water-inventory[data-water-digits="many"] .water-inventory__amount b { font-size: 10px; }
  .water-inventory__portions { right: 4px; top: -6px; font-size: 6px; }
  #water-refill { min-height: 22px; padding: 1px 2px; gap: 1px; font-size: 7px; border-radius: 5px; }
  #water-refill > span { font-size: 10px; }
  .tool-context { gap: 6px; }
  .current-tool #tool-hint { max-width: 100%; }
  .water-options { gap: 2px; padding: 2px; max-width: 100%; }
  .water-options button { min-height: 30px; padding: 3px 5px; font-size: 9px; gap: 0; }
  .water-options button svg { display: none; }
  #dry-all { min-height: 30px; padding: 3px 7px; font-size: 9px; }
  #dry-all svg { width: 13px; height: 13px; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .inventory-pair { gap: 5px; margin-top: -6px; margin-bottom: -4px; }
  .inventory-badge.water-inventory { flex-basis: 104px; width: 104px; height: 43px; padding: 0 5px 0 0; border-radius: 11px; }
  .inventory-badge.water-inventory .water-inventory__drawing { flex-basis: 45px; width: 45px; height: 43px; }
  .water-inventory__copy { gap: 0; }
  .water-inventory__label { font-size: 7px; }
  .water-inventory__amount { min-height: 16px; }
  .water-inventory__amount b { font-size: 15px; }
  #water-refill { min-height: 16px; padding: 0 3px; gap: 2px; font-size: 7px; }
  .current-tool:has(.dry-options:not([hidden])) { display: flex; gap: 6px; }
  #dry-all { min-height: 28px; padding: 3px 7px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) { .water-inventory__reserve { transition: none; } }