/*
  The in-game style item window (an item's Popup), built from the Legacy Site's
  window art: a 414px frame with a title bar, side ornaments and a footer.
*/
.item-window {
  position: fixed;
  z-index: 1000;
  width: 414px;
  font: 12px/1.4 Arial, Helvetica, sans-serif;
  color: #c0c0c0;
  text-align: left;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7));
}

.item-page .item-window {
  position: relative;
  margin: 24px auto;
}

.item-window__head {
  position: relative;
  height: 20px;
  background: url("/assets/item_window/head-eda4ab0c.png") no-repeat;
  cursor: move;
  touch-action: none;
  user-select: none;
}

.item-window__title {
  position: absolute;
  top: 3px;
  left: 46px;
  right: 46px;
  overflow: hidden;
  color: #e6e6e6;
  font-weight: bold;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sits over the X drawn in the title bar art. */
.item-window__close {
  position: absolute;
  top: 2px;
  right: 22px;
  width: 20px;
  height: 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.item-window__close:focus-visible {
  outline: 1px solid #e0b94f;
}

.item-window__body {
  position: relative;
  min-height: 58px;
  padding: 8px 24px 8px 22px;
  /* The art's fill is 75% black; a second 75% layer inside its borders (x 9–404) keeps
     text readable when windows overlap, leaving the gold frame untouched. */
  background:
    url("/assets/item_window/middle-5a230721.png") repeat-y,
    linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)) 9px 0 / 396px 100% no-repeat;
}

.item-window__body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 414px;
  height: 58px;
  background: url("/assets/item_window/ornaments-48f93222.png") no-repeat;
  pointer-events: none;
}

.item-window__foot {
  height: 7px;
  background: url("/assets/item_window/foot-48c775ff.png") no-repeat;
}

.item-window__header {
  display: flex;
  gap: 10px;
  color: #e6e6e6;
}

.item-window__icon {
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: 6px;
}

/* On the Item Page the window is part of the page, so it neither moves nor closes. */
.item-page .item-window__head {
  cursor: default;
}

.item-page .item-window__close {
  display: none;
}

.item-window__flags span + span {
  margin-left: 1em;
}

.item-window__name {
  color: #4ade3a;
}

.item-window__columns {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.item-window__pairs {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 10px;
  align-content: start;
  margin: 0;
}

.item-window__pairs dt {
  margin: 0;
}

.item-window__pairs dd {
  margin: 0;
  color: #ffffff;
  text-align: right;
}

.item-window__ratio {
  color: #c99090 !important;
}

.item-window__heroic {
  color: #e6c84d;
}

.item-window__section {
  margin: 10px 0 0;
}

.item-window__effect {
  color: #e6c84d;
}

.item-window__lore {
  color: #e6e6e6;
}

.item-window__link {
  color: #e8b923;
  text-decoration: underline;
}

/* The window art is 414px wide. In-page windows (the Item Page, generator results) shrink
   to fit narrow phones; clicked windows are scaled by the item-windows controller instead. */
@media (max-width: 460px) {
  .item-page .item-window { zoom: 0.9; }
}

@media (max-width: 410px) {
  .item-page .item-window { zoom: 0.82; }
}

@media (max-width: 370px) {
  .item-page .item-window { zoom: 0.74; }
}

@media (max-width: 330px) {
  .item-page .item-window { zoom: 0.66; }
}