/* Pixel kit. 1 art pixel = var(--px) CSS pixels. Sprites stay on that grid. */

:root {
  --px: 2;
}

#hud-info,
#guest-banner,
#hud-menu,
.pixel-card,
.dress-card,
.map-overlay-card {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  color: #f2f2ee;
}

#hud-info {
  padding: calc(8px * var(--px)) calc(8px * var(--px)) calc(6px * var(--px));
}

#guest-banner,
#hud-menu,
.dress-card,
.map-overlay-card {
  padding: calc(10px * var(--px));
}

.pixel-card {
  position: relative;
  width: min(100%, calc(6 * 26px * var(--px) + 24px * var(--px)));
  padding: calc(24px * var(--px)) calc(10px * var(--px)) calc(10px * var(--px));
}

.pixel-card .pixel-bar,
.map-overlay-bar {
  position: absolute;
  top: calc(2px * var(--px));
  left: calc(8px * var(--px));
  right: calc(8px * var(--px));
  min-height: calc(16px * var(--px));
  height: calc(16px * var(--px));
  z-index: 2;
}

.pixel-card h2,
#map-overlay-caption {
  color: #f2f2ee;
  font-size: calc(12px * var(--px));
  line-height: calc(12px * var(--px));
  font-family: var(--ui);
  font-weight: 700;
}

#hud-info,
#hud-info p,
#moon-coords,
#guest-banner,
#guest-banner p,
#hud-menu,
#drill-bag-label,
#drill-color-label,
.dress-card,
.dress-note,
#dress-title,
.map-overlay-card {
  color: #f2f2ee;
}

#legal-links a {
  color: #f2f2ee;
}

.kit-btn,
#hud-menu a.kit-btn,
#hud-menu > button.kit-btn,
#hud-actions button.kit-btn,
#dress button.kit-btn,
#guest-banner button.kit-btn,
#ride-button.kit-btn {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  color: #2c2750;
  min-height: calc(24px * var(--px));
  height: calc(24px * var(--px));
  padding: 0 calc(8px * var(--px));
  font-size: calc(12px * var(--px));
  line-height: calc(12px * var(--px));
  font-family: var(--ui);
}

.kit-btn:active {
  padding-top: calc(2px * var(--px));
}

.kit-btn:disabled {
  color: #6a6480;
}

#hud-actions #hud-menu-open,
#kit-dock #bag-open,
#kit-dock #status-open,
#drill-button,
#title-volume {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  min-width: calc(24px * var(--px));
  width: calc(24px * var(--px));
  min-height: calc(24px * var(--px));
  height: calc(24px * var(--px));
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  color: transparent;
  font-size: 0;
  flex: 0 0 auto;
}

#hud-actions #hud-menu-open { background-image: url("/ui/icon/iconbtn_menu_normal.png"); }
#hud-actions #hud-menu-open:hover { background-image: url("/ui/icon/iconbtn_menu_hover.png"); }
#hud-actions #hud-menu-open:active,
#hud-actions #hud-menu-open[aria-expanded="true"] { background-image: url("/ui/icon/iconbtn_menu_pressed.png"); }

#bag-open { background-image: url("/ui/icon/iconbtn_bag_normal.png"); }
#bag-open:hover { background-image: url("/ui/icon/iconbtn_bag_hover.png"); }
#bag-open:active,
#bag-open[aria-expanded="true"] { background-image: url("/ui/icon/iconbtn_bag_pressed.png"); }

#status-open { background-image: url("/ui/icon/iconbtn_status_normal.png"); }
#status-open:hover { background-image: url("/ui/icon/iconbtn_status_hover.png"); }
#status-open:active,
#status-open[aria-expanded="true"] { background-image: url("/ui/icon/iconbtn_status_pressed.png"); }

#drill-button { background-image: url("/ui/icon/iconbtn_drill_normal.png"); }
#drill-button:hover { background-image: url("/ui/icon/iconbtn_drill_hover.png"); }
#drill-button:active { background-image: url("/ui/icon/iconbtn_drill_pressed.png"); }

.pixel-close,
#map-overlay-close {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("/ui/button/close_small_14.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  color: transparent;
  font-size: 0;
  min-width: calc(14px * var(--px));
  width: calc(14px * var(--px));
  min-height: calc(14px * var(--px));
  height: calc(14px * var(--px));
  padding: 0;
}

.pixel-close:active,
#map-overlay-close:active {
  background-image: url("/ui/button/close_small_14_pressed.png");
}

#vitals {
  border: 0;
  background: transparent;
  padding: calc(4px * var(--px)) 0 0;
  gap: calc(4px * var(--px));
}

.vital-name { display: none; }

.vital-track,
.skill-track {
  background: transparent;
  border: 0;
  height: auto;
  padding: 0;
}

.vital-fill,
.skill-fill { display: none; }

canvas.kit-gauge {
  display: block;
  width: 100%;
  height: calc(16px * var(--px));
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

canvas.kit-gauge.is-xp { height: calc(12px * var(--px)); }

.bag-slot {
  width: calc(26px * var(--px));
  height: calc(26px * var(--px));
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("/ui/slot/slot_empty.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.bag-slot.has-item { background-image: url("/ui/slot/slot_filled.png"); }
.bag-slot[aria-pressed="true"] { background-image: url("/ui/slot/slot_selected.png"); }

.bag-slot img {
  width: calc(16px * var(--px));
  height: calc(16px * var(--px));
}

.bag-count {
  font-size: calc(10px * var(--px));
  line-height: calc(10px * var(--px));
  font-family: var(--ui-sm);
  background: #f2f2ee;
  border: calc(1px * var(--px)) solid #22203a;
}

#bag-grid {
  grid-template-columns: repeat(6, calc(26px * var(--px)));
  gap: calc(2px * var(--px));
}

#map-enlarge {
  width: calc(72px * var(--px));
  height: calc(72px * var(--px));
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

#moon-map { width: calc(72px * var(--px)); }

#map-enlarge canvas {
  position: absolute;
  left: calc(8px * var(--px));
  top: calc(8px * var(--px));
  width: calc(56px * var(--px));
  height: calc(56px * var(--px));
}

#map-enlarge .kit-map-frame,
#map-overlay .kit-map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#map-overlay canvas {
  border: 0;
  position: relative;
  z-index: 0;
}

.kit-map-wrap {
  position: relative;
  display: block;
}

.kit-compass {
  position: absolute;
  top: calc(-4px * var(--px));
  left: 50%;
  width: calc(15px * var(--px));
  height: calc(13px * var(--px));
  transform: translateX(-50%);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  z-index: 2;
}

#title-screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: #100e26;
  cursor: pointer;
}

#title-screen[hidden] { display: none; }

#title-stage {
  position: relative;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: url("/ui/title/title_mockup_1x.png") 0 0 / 100% 100% no-repeat;
}

#title-prompt,
#title-prompt-off {
  position: absolute;
  left: calc(115 * var(--title-scale) * 1px);
  top: calc(177 * var(--title-scale) * 1px);
  width: calc(154 * var(--title-scale) * 1px);
  height: calc(24 * var(--title-scale) * 1px);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

#title-prompt { animation: kit-blink 1s steps(1, end) infinite; }
#title-prompt-off { animation: kit-blink 1s steps(1, end) infinite; animation-delay: -0.5s; }

@keyframes kit-blink {
  from { opacity: 1; }
  50% { opacity: 0; }
  to { opacity: 1; }
}

#title-volume {
  position: absolute;
  left: calc(354 * var(--title-scale) * 1px);
  top: calc(6 * var(--title-scale) * 1px);
  width: calc(24 * var(--title-scale) * 1px);
  height: calc(24 * var(--title-scale) * 1px);
  min-width: 0;
  min-height: 0;
  background-image: url("/ui/icon/iconbtn_sound_normal.png");
  cursor: pointer;
}

#title-volume:hover { background-image: url("/ui/icon/iconbtn_sound_hover.png"); }
#title-volume:active { background-image: url("/ui/icon/iconbtn_sound_pressed.png"); }
#title-volume.is-muted { opacity: 0.45; }

@media (prefers-reduced-motion: reduce) {
  #title-prompt,
  #title-prompt-off { animation: none; }
  #title-prompt-off { opacity: 0; }
}

#kit-dock {
  position: fixed;
  right: max(8px, env(safe-area-inset-right));
  bottom: calc(max(8px, env(safe-area-inset-bottom)) + 72px * var(--px) + 8px);
  z-index: 6;
  display: flex;
  gap: calc(4px * var(--px));
}

#hud-menu {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: #f2f2ee;
  width: min(280px, calc(100vw - 16px));
  padding: calc(10px * var(--px));
}

#hud-info {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: #f2f2ee;
  width: min(calc(168px * var(--px)), calc(100vw - 72px));
  padding: calc(22px * var(--px)) calc(8px * var(--px)) calc(6px * var(--px));
  font-size: calc(12px * var(--px));
  line-height: calc(12px * var(--px));
  font-family: var(--ui);
}

#moon-coords,
#zoom-readout,
#guest-banner,
#guest-banner p,
#bag-detail,
.status-vital,
.skill,
.skill-xp,
.dress-note {
  color: #f2f2ee;
  font-size: calc(12px * var(--px));
  line-height: calc(12px * var(--px));
  font-family: var(--ui);
}

.skill-xp,
.bag-detail-count,
#vitals {
  font-size: calc(10px * var(--px));
  line-height: calc(10px * var(--px));
  font-family: var(--ui-sm);
}

#guest-banner {
  border: 0;
  border-radius: 0;
  background-color: transparent;
}

.dress-card,
.map-overlay-card {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: #f2f2ee;
}

#map-overlay-close {
  border: 0;
  border-radius: 0;
  min-width: calc(14px * var(--px));
  width: calc(14px * var(--px));
  min-height: calc(14px * var(--px));
  height: calc(14px * var(--px));
  padding: 0;
  color: transparent;
  font-size: 0;
  background-color: transparent;
}

#map-overlay canvas {
  border: 0;
}

#map-overlay canvas.kit-map-frame,
#map-enlarge canvas.kit-map-frame {
  background: transparent;
}

#moon-map {
  width: calc(72px * var(--px));
}

.swatch {
  background-clip: padding-box;
}

#zoom-readout {
  width: min(calc(168px * var(--px)), calc(100vw - 72px));
  padding: calc(8px * var(--px)) calc(8px * var(--px)) 0;
}

.map-overlay-card {
  position: relative;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.map-overlay-card .map-overlay-bar {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  height: auto;
  min-height: calc(16px * var(--px));
  margin: 0 0 calc(4px * var(--px));
}

@media (min-width: 980px), (max-height: 480px) and (min-width: 640px) {
  #guest-notice {
    left: max(calc(168px * var(--px) + 24px), calc(env(safe-area-inset-left) + 360px));
  }
}

@media (max-width: 420px) {
  :root { --px: 2; }
}