/* The pixel kit of Gold Digger: the final art's frames
   (gold-digger/tools/extract-final.py) on the 360-wide logical screen. */
:root {
  --px-lime: #CDFF00; --px-yellow: #FFF200; --px-maroon: #600130; --px-wine: #8B0039; --px-pink: #FF0074;
  --px-ink: #5E0328; --px-red: #B20137; --px-brown: #311B0E;
  --px-font: 'Pikselator Wide', 'Arial Black', system-ui, sans-serif;
}
/* The art's own lettering (licensed for the web; written by
   gold-digger/tools/extract-final.py). Its capitals are half the font size:
   sizes here are 4/3 of the stand-in's (Rubik Mono One), which keeps every
   line's width and its capitals' height, and the line heights 3/4. */
@font-face { font-family: 'Pikselator Wide'; src: url(../fonts/pikselator-wide.woff2) format('woff2'); font-display: swap; }
.px-img { image-rendering: pixelated; image-rendering: crisp-edges; }

/* The designer's frames (shared/final/kit-*.webp, 3x art: a slice of n
   source px is n/3 CSS px). shared/pixelframes.js paints each element as one
   image; these border-images are the fallback until it has. */

/* Yellow pill button ("NEXT", "DIG AGAIN") */
.px-btn {
  pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 2px; border-style: solid; border-width: 10px 28px 11px;
  border-image: url(../final/kit-btn.webp) 30 84 33 84 fill / 10px 28px 11px stretch;
  background: none; color: var(--px-ink);
  font: 400 20px/.75 var(--px-font); text-transform: uppercase; white-space: nowrap;
  transition: transform .08s;
}
.px-btn:active, .px-btn.down { transform: translateY(2px); }
.px-btn.small { font-size: 15px; line-height: .86; white-space: normal; text-align: center; border-width: 10px 22px 11px; }

/* Yellow title bar */
.px-banner {
  border-style: solid; border-width: 18px 14px 22px 17px;
  border-image: url(../final/kit-banner.webp) 54 42 66 51 fill / 18px 14px 22px 17px stretch;
  color: #1A0008; text-align: center;
  font: 400 17px/.92 var(--px-font); text-transform: uppercase;
}
.px-banner > * { margin: -6px 0 -8px; }

/* Speech bubble: the gold screen's headline box, drawn at two thirds */
.px-bubble {
  border-style: solid; border-width: 14.67px 24.89px 16.44px 30.22px;
  border-image: url(../final/kit-bubble.webp) 66 112 74 136 fill / 14.67px 24.89px 16.44px 30.22px stretch;
  color: #1A0008;
}

/* Wine panel with the pink pixel trim; the explainer's nuggets sit on its
   lower corners. */
.px-panel {
  position: relative; border-style: solid; border-width: 36.67px;
  border-image: url(../final/kit-panel.webp) 110 fill / 36.67px stretch;
  color: #FFF8FF;
}
.px-panel::before, .px-panel::after { content: ''; position: absolute; bottom: -30px; width: 56px; height: 46px; pointer-events: none;
  background: url(../final/kit-nuggetL.webp) no-repeat 0 0 / 100% 100%; }
.px-panel::before { left: -40px; }
.px-panel::after { right: -40px; background-image: url(../final/kit-nuggetR.webp); }

/* Yellow CTA bar */
.px-cta { border-style: solid; border-width: 8px 17.33px 8.67px;
  border-image: url(../final/kit-cta.webp) 24 52 26 52 fill / 8px 17.33px 8.67px stretch; background: none; }

.px-h { font: 400 20px/.94 var(--px-font); text-transform: uppercase; }
.px-shadow { text-shadow: 3px 3px 0 #3A0015; }

/* Pixel icon buttons (mute, close), top right */
.px-icons { position: absolute; right: 10px; display: flex; gap: 6px; z-index: 9; }
.px-icons button { pointer-events: auto; width: 36px; height: 36px; border: 0; padding: 7px; cursor: pointer;
  background: rgba(34, 0, 16, 0.55); box-shadow: inset 0 0 0 2px rgba(255, 242, 0, 0.55); }
.px-icons svg { width: 22px; height: 22px; display: block; shape-rendering: crispEdges; fill: var(--px-yellow); }
.px-icons .x { display: none; } .px-icons .off .x { display: inline; } .px-icons .off .wave { display: none; }

/* Painted by shared/pixelframes.js: one image per element, no slice seams. */
.px-btn.painted, .px-banner.painted, .px-panel.painted, .px-cta.painted, .px-bubble.painted { border-image: none; border-color: transparent;
  background-repeat: no-repeat; background-size: 100% 100%; background-origin: border-box; background-clip: border-box; }