/* The spot tiles, redrawn by Astra in the Ticket kit (owner 16/10 on the coloured tags: "melhora isso ta feio"):
   ?tiles=a (the default) mini tickets framed in the phase colour, the "of" line on the stub under the perforation;
   ?tiles=b dark keys like the dock's, a lamp in the phase colour; ?tiles=old the tags from before.
   Cut by arcade-art/room-v2/spot_tiles_ui.py: printer/art/opt/spot-<set>-<phase>.png, saved at half, shown at a quarter.
   The text is HTML on top, all in Press Start 2P: the phase in its colour, the number in white, the "of" line in grey.
   Used by the door, the ticket block (and its phone sheet) and the how-to-join pop-up (rules.js, .rules-spot). */

body.hudskin.kit:is(.tiles-a, .tiles-b) :is(.door-spot, .product-spot, .rules-spot) {
  --tc: #ffd400;
  position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start;
  gap: 0 !important; min-width: 0; background: none !important; box-shadow: none !important; border-style: solid; border-color: transparent;
}
body.hudskin.kit:is(.tiles-a, .tiles-b) :is(.door-spot, .product-spot, .rules-spot)[data-k="gtd"] { --tc: #14e3d5; }
body.hudskin.kit:is(.tiles-a, .tiles-b) :is(.door-spot, .product-spot, .rules-spot)[data-k="fcfs"] { --tc: #74ec00; }

body.hudskin.kit:is(.tiles-a, .tiles-b) :is(.door-spot .ds-k, .product-spot .ps-k, .rules-spot .ds-k) {
  display: block !important; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important;
  font: 400 8px/1 "Press Start 2P", monospace !important; letter-spacing: 0 !important; text-transform: uppercase; white-space: nowrap;
  color: var(--tc) !important; text-shadow: 1px 1px 0 #04060b !important;
}
body.hudskin.kit:is(.tiles-a, .tiles-b) :is(.door-spot .ds-k, .product-spot .ps-k, .rules-spot .ds-k)::before { display: none !important; }
body.hudskin.kit:is(.tiles-a, .tiles-b) :is(.door-spot b, .product-spot b, .rules-spot b) {
  display: block; margin: 7px 0 0 !important; font: 400 16px/1 "Press Start 2P", monospace !important; letter-spacing: 0 !important; white-space: nowrap;
  color: #fff !important; text-shadow: 2px 2px 0 #04060b, -1px 0 0 rgba(255, 52, 76, 0.6), 1px 0 0 rgba(0, 232, 255, 0.55) !important;
}
body.hudskin.kit:is(.tiles-a, .tiles-b) :is(.door-spot .ds-of, .product-spot .ps-of, .rules-spot .ds-of) {
  font: 400 8px/1 "Press Start 2P", monospace !important; letter-spacing: 0 !important; white-space: nowrap; color: #a9b3c4 !important;
}
body.hudskin.kit:is(.tiles-a, .tiles-b) .door-spot .ds-bar { display: none !important; }
/* the ticket block is narrow: GTD's short words give their room to FREE MINT and to FCFS's four digits */
body.hudskin.kit:is(.tiles-a, .tiles-b) .product-spots { grid-template-columns: 1.08fr 0.84fr 1.08fr !important; }

/* a: the mini ticket. The perforation and the notches sit in the bottom slice (35px), the "of" line on the stub under it */
body.hudskin.kit.tiles-a :is(.door-spot, .product-spot, .rules-spot) {
  justify-items: center; text-align: center; border-width: 7px 7px 0; padding: 9px 0 40px !important;
  border-image: url(../printer/art/opt/spot-a-free.png) 14 23 70 23 fill / 7px 11.5px 35px 11.5px stretch;
}
body.hudskin.kit.tiles-a :is(.door-spot, .product-spot, .rules-spot)[data-k="gtd"] { border-image-source: url(../printer/art/opt/spot-a-gtd.png); }
body.hudskin.kit.tiles-a :is(.door-spot, .product-spot, .rules-spot)[data-k="fcfs"] { border-image-source: url(../printer/art/opt/spot-a-fcfs.png); }
body.hudskin.kit.tiles-a :is(.door-spot .ds-k, .product-spot .ps-k, .rules-spot .ds-k) { justify-self: center !important; text-align: center !important; }
body.hudskin.kit.tiles-a :is(.door-spot .ds-of, .product-spot .ps-of, .rules-spot .ds-of) {
  position: absolute; left: 0; right: 0; bottom: 6px; height: 18px; display: flex !important; align-items: center; justify-content: center;
}

/* b: the dark key. The lamp stays whole in the top-left corner (22px), the title sits right of it, on its line */
body.hudskin.kit.tiles-b :is(.door-spot, .product-spot, .rules-spot) {
  border-width: 4px 6px 0 8px; padding: 3px 0 12px !important;
  border-image: url(../printer/art/opt/spot-b-free.png) 34 12 18 44 fill / 17px 6px 9px 22px stretch;
}
body.hudskin.kit.tiles-b :is(.door-spot, .product-spot, .rules-spot)[data-k="gtd"] { border-image-source: url(../printer/art/opt/spot-b-gtd.png); }
body.hudskin.kit.tiles-b :is(.door-spot, .product-spot, .rules-spot)[data-k="fcfs"] { border-image-source: url(../printer/art/opt/spot-b-fcfs.png); }
body.hudskin.kit.tiles-b :is(.door-spot .ds-k, .product-spot .ps-k, .rules-spot .ds-k) { padding-left: 13px !important; }
body.hudskin.kit.tiles-b :is(.door-spot .ds-of, .product-spot .ps-of, .rules-spot .ds-of) { margin-top: 6px !important; }