.buff-slots { display: flex; align-items: flex-start; gap: 8px; position: relative; z-index: 101; }
.buff-slot { width: 42px; flex: 0 0 42px; text-align: center; position: relative; }
.buff-square { box-sizing: border-box; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(76, 209, 255, .55); background: rgba(5, 10, 18, .85); border-radius: 4px; }
.buff-square.is-empty { border-color: rgba(255, 255, 255, .3); }
summary.buff-square { cursor: pointer; list-style: none; }
summary.buff-square::-webkit-details-marker { display: none; }
.buff-square:focus-visible { outline: 2px solid #4cd1ff; outline-offset: 3px; }
.buff-square img, .buff-catalog-icon { width: 34px; height: 34px; object-fit: contain; }
.buff-time { display: block; min-height: 16px; margin-top: 3px; color: #d9f3ff; font: 11px/16px Arial, sans-serif; white-space: nowrap; }
.buff-description { position: absolute; z-index: 20; top: 48px; left: 50%; transform: translateX(-50%); width: 210px; padding: 12px; border: 1px solid #4cd1ff; border-radius: 6px; background: #0b1422; color: #fff; font: 13px/1.5 Arial, sans-serif; text-align: left; box-shadow: 0 8px 24px #0008; }
.buff-description p { margin: 5px 0 0; }
.buff-catalog { display: grid; gap: 10px; padding: 0; list-style: none; }
.buff-catalog li { padding: 10px 0; border-bottom: 1px solid #ffffff25; }
.buff-catalog-icon { vertical-align: middle; margin-right: 8px; }
@media (max-width: 420px) {
  .buff-slots { gap: 5px; }
  .buff-slot { width: 36px; flex-basis: 36px; }
  .buff-square { width: 36px; height: 36px; }
  .buff-square img { width: 30px; height: 30px; }
  .buff-description { position: fixed; top: auto; bottom: 16px; left: 16px; right: 16px; width: auto; transform: none; }
}