/* Pixel UI: web replicas of in-game windows.

   Everything inside .pui-panel is laid out in game pixels. The panel's own size
   comes from --pui-w / --pui-h and the whole thing is scaled by --pui-scale, so
   the art stays on the pixel grid at any integer zoom. pixelui.js sets all three
   from the system descriptor and drops the scale to 1 when the column is narrow. */

.pui {
  --pui-w: 200;
  --pui-h: 280;
  --pui-scale: 2;
  margin: 28px auto;
  width: calc(var(--pui-w) * var(--pui-scale) * 1px);
  display: block;
}

.pui.pui-ready .pui-stage {
  position: relative;
  width: calc(var(--pui-w) * var(--pui-scale) * 1px);
  height: calc(var(--pui-h) * var(--pui-scale) * 1px);
}

.pui-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--pui-w) * 1px);
  height: calc(var(--pui-h) * 1px);
  transform: scale(var(--pui-scale));
  transform-origin: top left;
  font-family: Tahoma, Verdana, 'DejaVu Sans', sans-serif;
  font-size: 8px;
  line-height: 1;
  color: #c8c8c8;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: calc(var(--pui-w) * 1px) calc(var(--pui-h) * 1px);
}

.pui-panel,
.pui-panel * {
  box-sizing: border-box;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* absolutely positioned art layer, sized by its own box */
.pui-panel .pui-l {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Panel chrome ------------------------------------------------------------ */

.pui-title {
  z-index: 2;
  position: absolute;
  left: 6px;
  top: 4px;
  font-weight: bold;
  color: #ffff00;
  white-space: nowrap;
}

/* sits just left of the close button; the game computes the same spot from a
   fixed glyph width, which does not survive the switch to a web font */
.pui-count {
  z-index: 2;
  position: absolute;
  top: 4px;
  right: 17px;
  color: #969696;
  white-space: nowrap;
}

.pui-close {
  z-index: 2;
  position: absolute;
  color: #c8b4b4;
  text-align: center;
  padding-top: 1px;
  cursor: default;
}
.pui-close:hover { color: #ff5050; }

/* full-panel layer, so it must sit under the title bar and the tabs */
.pui-content {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--pui-w) * 1px);
  height: calc(var(--pui-h) * 1px);
  z-index: 1;
}

/* Tabs -------------------------------------------------------------------- */

/* the strip spans the panel so tabs can be placed by x; only the tabs
   themselves are interactive, or the empty run would swallow clicks on the
   window behind it */
.pui-tabs {
  z-index: 2;
  position: absolute;
  left: 0;
  width: calc(var(--pui-w) * 1px);
  pointer-events: none;
}

.pui-tab {
  position: absolute;
  pointer-events: auto;
  top: 0;
  padding: 1px 0 0;
  margin: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font: inherit;
  font-weight: bold;
  color: var(--pui-tab-fg, #c8c8c8);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
}

/* a system whose tabs use a different palette restates these three custom
   properties through tabStrip.textStyle rather than one flat inline colour */
.pui-tab:hover { color: var(--pui-tab-hover, #ffff64); }
.pui-tab[aria-selected='true'] { color: var(--pui-tab-on, #ffdc50); }
.pui-tab:focus-visible { outline: 1px solid #ffdc50; outline-offset: 0; }

/* Slot grid --------------------------------------------------------------- */

.pui-cell {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.pui-cell[data-key] { cursor: pointer; }

.pui-icon {
  position: absolute;
  background-repeat: no-repeat;
}

.pui-qty {
  position: absolute;
  right: 1px;
  color: #ffdc50;
  text-align: right;
  white-space: nowrap;
}

/* Tooltip and popup -------------------------------------------------------- */

.pui-tip,
.pui-popup {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 5;
}
.pui-popup { pointer-events: auto; }

.pui-tip-name { position: absolute; left: 4px; top: 2px; color: #ffdc50; white-space: nowrap; }
.pui-tip-sub  { position: absolute; left: 4px; top: 14px; color: #c8c8c8; white-space: nowrap; }
/* rows of a multi-line tooltip; the system places and colours each one */
.pui-tip-line { position: absolute; white-space: nowrap; }


/* Buttons and text --------------------------------------------------------- */

.pui-btn {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #ffffc8;
  text-align: center;
  white-space: nowrap;
  cursor: default;
}

/* pre, not nowrap: the client draws its runs literally, so a label the Lua
   spaces out by hand keeps that spacing here */
.pui-txt { position: absolute; white-space: pre; }
.pui-txt.b { font-weight: bold; }

/* Game palette ------------------------------------------------------------- */

.pui-good { color: #64dc64; }
.pui-bad  { color: #dc6464; }
.pui-gold { color: #ffdc50; }

/* Scrolling list ----------------------------------------------------------- */

.pui-list { position: absolute; overflow: hidden; }
.pui-list-rows { position: absolute; left: 0; top: 0; width: 100%; }

.pui-list-row {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.pui-list-row.good { color: #78ff78; }
.pui-list-row.bad  { color: #ff7878; }

.pui-track {
  position: absolute;
  background-repeat: repeat-y;
  cursor: pointer;
}

.pui-thumb {
  position: absolute;
  left: 0;
  background-repeat: repeat-y;
}

/* Caption ------------------------------------------------------------------ */

.pui-caption {
  margin: 10px auto 0;
  max-width: calc(var(--pui-w) * var(--pui-scale) * 1px);
  font-size: 0.8em;
  line-height: 1.5;
  color: #8d8d8d;
  text-align: center;
  font-style: italic;
}