#readable-modal {
  width: 277px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  box-sizing: border-box;
  background: #444 url('../png/window/bg.png');
  border: 1px solid #171717;
  box-shadow: inset 1px 1px #777, inset -1px -1px #222;
  color: #bfbfbf;
  font: bold 11px/14px Verdana, sans-serif;
  letter-spacing: 0;
}
#readable-modal, #readable-modal * { text-shadow: none; }
#readable-modal .modal-header {
  padding: 1px 4px;
  background: #333 url('../png/window/bg2.png');
  line-height: 14px;
  color: #aaa;
}
#readable-modal .modal-body { padding: 10px 9px 4px; box-shadow: none; }
#readable-modal .readable-summary { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 9px; min-height: 54px; margin-bottom: 8px; }
#readable-item-icon { width: 32px; height: 32px; margin: 6px 0 0 4px; image-rendering: pixelated; }
#readable-description { white-space: pre-line; overflow-wrap: anywhere; }
#readable-modal #book-text-area-scroll-wrapper { height: 132px; border: 1px solid #151515; box-shadow: 1px 1px #777; background: #333; }
#readable-modal #book-text-area { width: 100%; height: 100%; box-sizing: border-box; padding: 1px 3px; border: 0; border-radius: 0; box-shadow: none; background: #333; color: #ddd; font: bold 11px/14px Verdana, sans-serif; resize: none; }
#readable-modal .tibia-scrollbar-v { visibility: visible !important; }
#readable-modal hr { margin: 17px 0 7px; border: 0; border-top: 1px solid #252525; border-bottom: 1px solid #777; }
#readable-modal .modal-footer { display: flex; justify-content: flex-end; gap: 16px; }
#readable-modal .modal-footer button { width: 43px; height: 21px; min-width: 0; padding: 0; font-size: 9px; }
body.mobile-layout #readable-modal { width: 300px; }
body.mobile-layout #readable-modal .modal-footer button { width: 64px; height: 36px; font-size: 11px; }
@media (max-height: 360px) {
  #readable-modal #book-text-area-scroll-wrapper { height: 85px; }
  #readable-modal hr { margin-top: 8px; }
}