/* Three directions for the panels, to choose (owner 16/10: the paper "não me agradou, nem o inicial"). Each one is a panel and
   a main button Astra drew in the room's style (arcade-art/room-v2/opt_ui.py -> printer/art/opt/). Preview: ?skin=monitor |
   neon | ticket (room.js). Applied to the door and the ticket block; the chosen one then goes to every menu. */

/* ---- Monitor: the room's beige computer, a phosphor screen inside ---- */
body.hudskin.kit.skin-monitor :is(.door-card, .product) {
  border-image: url(../printer/art/opt/monitor-panel.png) 54 75 58 56 fill / 27px 37.5px 29px 28px stretch !important;
  border-width: 27px 37.5px 29px 28px !important; padding: 2px 6px 4px !important;
  --hud-ink: #b8ff9a; --hud-muted: #7fd862; --hud-faint: #5fae47; --hud-accent: #ffe900; color: #b8ff9a; text-shadow: 0 0 6px rgba(120, 255, 80, 0.35);
}
body.hudskin.kit.skin-monitor :is(.product-title, #door-title) { color: #d8ffc4 !important; }
body.hudskin.kit.skin-monitor .product-title::before { color: #ffe900 !important; }
body.hudskin.kit.skin-monitor :is(.product-sub, .product-count, .door p, .door .door-spots-note, .door .door-note, .product-link) { color: #7fd862 !important; }
body.hudskin.kit.skin-monitor :is(.door-rules, .product-rules, .product-more, .door-lead b) { color: #ffe900 !important; }
body.hudskin.kit.skin-monitor .door-x { filter: invert(1) sepia(1) saturate(4) hue-rotate(60deg) !important; }
body.hudskin.kit.skin-monitor :is(.door-spot, .product-spot) { border: 1px solid rgba(140, 255, 100, 0.5) !important; border-image: none !important; background: rgba(0, 0, 0, 0.22) !important; padding: 5px 6px 6px !important; }
body.hudskin.kit.skin-monitor :is(.door-spot b, .product-spot b) { color: #d8ffc4 !important; }
body.hudskin.kit.skin-monitor :is(.door-spot .ds-k, .product-spot .ps-k, .door-spot .ds-of, .product-spot .ps-of) { color: #7fd862 !important; }
body.hudskin.kit.skin-monitor :is(.door-spot .ds-k, .product-spot .ps-k)::before { box-shadow: none; }
body.hudskin.kit.skin-monitor .product-steps li { color: #b8ff9a; }
body.hudskin.kit.skin-monitor .product-steps li b { color: #ffe900; }
body.hudskin.kit.skin-monitor :is(#print-btn, .door-btn.follow, .product-share) {
  border-image: url(../printer/art/opt/monitor-btn.png) 20 21 21 20 fill / 10px 10.5px 10.5px 10px stretch !important; border-width: 10px 10.5px !important; color: #0c2a06 !important; text-shadow: none !important; }

/* ---- Neon: the arcade's marquee, a rainbow tube around a black panel ---- */
body.hudskin.kit.skin-neon :is(.door-card, .product) {
  border-image: url(../printer/art/opt/neon-panel.png) 31 31 32 31 fill / 15.5px 15.5px 16px 15.5px stretch !important;
  border-width: 15.5px 15.5px 16px 15.5px !important; padding: 8px 10px 10px !important;
  --hud-ink: #f6f7f5; --hud-muted: #b3bcc9; --hud-faint: #8a93a1; --hud-accent: #00eadb; color: #f6f7f5;
  filter: drop-shadow(0 0 10px rgba(255, 73, 207, 0.35)) drop-shadow(0 0 18px rgba(0, 234, 219, 0.25)) !important;
}
body.hudskin.kit.skin-neon :is(.product-title, #door-title) { color: #ffffff !important; }
body.hudskin.kit.skin-neon .product-title::before { color: #64ff00 !important; text-shadow: 0 0 6px rgba(100, 255, 0, 0.5) !important; }
body.hudskin.kit.skin-neon :is(.product-sub, .product-count, .door p, .door .door-spots-note, .door .door-note, .product-link) { color: #b3bcc9 !important; }
body.hudskin.kit.skin-neon :is(.door-rules, .product-rules, .product-more, .door-lead b) { color: #00eadb !important; }
body.hudskin.kit.skin-neon .door-x { filter: invert(1) !important; }
body.hudskin.kit.skin-neon :is(.door-spot, .product-spot) { border: 1px solid rgba(0, 234, 219, 0.45) !important; border-image: none !important; background: rgba(255, 255, 255, 0.04) !important; padding: 5px 6px 6px !important; }
body.hudskin.kit.skin-neon :is(.door-spot b, .product-spot b) { color: #ffffff !important; }
body.hudskin.kit.skin-neon :is(.door-spot .ds-k, .product-spot .ps-k) { color: var(--c) !important; }
body.hudskin.kit.skin-neon :is(.door-spot .ds-of, .product-spot .ps-of) { color: #b3bcc9 !important; }
body.hudskin.kit.skin-neon :is(.door-spot .ds-k, .product-spot .ps-k)::before { display: none; }
body.hudskin.kit.skin-neon .product-steps li { color: #f6f7f5; }
body.hudskin.kit.skin-neon .product-steps li b { color: #ffe900; }
body.hudskin.kit.skin-neon :is(#print-btn, .door-btn.follow, .product-share) {
  border-image: url(../printer/art/opt/neon-btn.png) 22 24 18 24 fill / 11px 12px 9px 12px stretch !important; border-width: 11px 12px 9px !important; color: #ffffff !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) !important; }

/* ---- Ticket: the printed ticket itself, navy with the rainbow frame, notches and a perforated stub at the bottom ---- */
body.hudskin.kit.skin-ticket :is(.door-card, .product) {
  border-image: url(../printer/art/opt/ticket-panel.png) 20 42 107 42 fill / 10px 21px 53.5px 21px stretch !important;
  border-width: 10px 21px 53.5px 21px !important; padding: 8px 4px 2px !important;
  --hud-ink: #f6f7f5; --hud-muted: #aab4c4; --hud-faint: #8792a4; --hud-accent: #ffe900; color: #f6f7f5;
}
body.hudskin.kit.skin-ticket .door-card { position: relative; }
body.hudskin.kit.skin-ticket :is(.product-title, #door-title) { color: #ffffff !important; }
body.hudskin.kit.skin-ticket .product-title::before { color: #64ff00 !important; text-shadow: none !important; }
body.hudskin.kit.skin-ticket :is(.product-sub, .product-count, .door p, .door .door-spots-note, .product-link) { color: #aab4c4 !important; }
body.hudskin.kit.skin-ticket :is(.door-rules, .product-rules, .product-more, .door-lead b) { color: #ffe900 !important; }
body.hudskin.kit.skin-ticket .door-x { filter: invert(1) !important; }
body.hudskin.kit.skin-ticket .product-steps li { color: #f6f7f5; }
body.hudskin.kit.skin-ticket .product-steps li b { color: #ffe900; }
body.hudskin.kit.skin-ticket :is(#print-btn, .door-btn.follow, .product-share) {
  border-image: url(../printer/art/opt/ticket-btn.png) 8 14 16 12 fill / 4px 7px 8px 6px stretch !important; border-width: 4px 7px 8px 6px !important; color: #121826 !important; text-shadow: none !important; }
/* the stub under the perforation carries one line: "How to join" on the block, the house line on the door */
body.hudskin.kit.skin-ticket .product .product-rules { position: absolute; left: 0; right: 0; bottom: -40px; margin: 0 !important; min-height: 0 !important; border: 0 !important; text-align: center; }
body.hudskin.kit.skin-ticket .door .door-note { position: absolute; left: 0; right: 0; bottom: -38px; margin: 0 !important; text-align: center; color: #aab4c4 !important; }

/* phones: the slim bar keeps each frame thinner */
@media (max-width: 760px) {
  body.hudskin.kit.skin-monitor .product:not(.open) { border-width: 15px 21px 16px 16px !important; border-image-width: 15px 21px 16px 16px !important; padding: 0 2px !important;
    border-image-source: url(../printer/art/opt/monitor-panel.png) !important; border-image-slice: 54 75 58 56 fill !important; }
  body.hudskin.kit.skin-neon .product:not(.open) { border-width: 12px !important; border-image-width: 12px !important; padding: 2px 4px !important;
    border-image-source: url(../printer/art/opt/neon-panel.png) !important; border-image-slice: 31 31 32 31 fill !important; }
  body.hudskin.kit.skin-ticket .product:not(.open) { border-width: 6px 12.5px 32px 12.5px !important; border-image-width: 6px 12.5px 32px 12.5px !important; padding: 2px 2px 0 !important;
    border-image-source: url(../printer/art/opt/ticket-panel.png) !important; border-image-slice: 20 42 107 42 fill !important; }
  body.hudskin.kit.skin-ticket .product:not(.open) .product-more { position: absolute; left: 0; right: 0; bottom: -25px; margin: 0; padding: 0; min-height: 0; text-align: center; }
}

/* ===== Ticket (owner 16/10 chose C): every other menu in the same style. Navy ticket keys for any key, white ticket keys for
   the main and the way back, the ticket strip for the bars (bottom menu, the desk's hint, the TV bar), the ticket panel for the
   bubbles and the socials menu. Pieces: arcade-art/room-v2/ticketkit_ui.py -> printer/art/opt/tk-*.png ===== */
body.hudskin.kit.skin-ticket :is(.hud-btn-d, .hud-btn-p, .door-btn.in, .product-copy, .socials-menu button, .toast) {
  border-image: url(../printer/art/opt/tk-key.png) 10 14 15 14 fill / 5px 7px 7.5px 7px stretch !important;
  border-width: 5px 7px 7.5px 7px !important; color: #f6f7f5 !important; text-shadow: none !important; }
body.hudskin.kit.skin-ticket :is(.term-back, .social-back, .hud-key, .lights[aria-pressed="true"], .hud-btn[aria-pressed="true"], .bubble a) {
  border-image: url(../printer/art/opt/ticket-btn.png) 8 14 16 12 fill / 4px 7px 8px 6px stretch !important;
  border-width: 4px 7px 8px 6px !important; color: #121826 !important; text-shadow: none !important; }
body.hudskin.kit.skin-ticket :is(#print-btn, #share-x, .door-btn.follow, .product-share) {
  border-image: url(../printer/art/opt/ticket-btn.png) 8 14 16 12 fill / 4px 7px 8px 6px stretch !important; border-width: 4px 7px 8px 6px !important; color: #121826 !important; text-shadow: none !important; }

/* the bottom menu: one ticket strip; the items sit on it and become a key under the finger or the mouse */
body.hudskin.kit.skin-ticket.ui4 .dock { border-style: solid !important; border-image: url(../printer/art/opt/tk-strip.png) 16 48 16 48 fill / 8px 24px 8px 24px stretch !important;
  border-width: 8px 24px 8px 24px !important; padding: 0 !important; gap: 2px !important; }
body.hudskin.kit.skin-ticket.ui4 .dock > * { border-image: none !important; border-color: transparent !important; border-width: 5px 7px 7.5px 7px !important; color: #f6f7f5 !important; min-height: 46px; }
body.hudskin.kit.skin-ticket.ui4 .dock > *:is(:hover, :focus-visible) { border-image: url(../printer/art/opt/tk-key.png) 10 14 15 14 fill / 5px 7px 7.5px 7px stretch !important; }
body.hudskin.kit.skin-ticket.ui4 .dock > [aria-expanded="true"] { border-image: url(../printer/art/opt/ticket-btn.png) 8 14 16 12 fill / 4px 7px 8px 6px stretch !important; color: #121826 !important; }

/* the labels: the room's cursor label is a navy key; the desk's hint bar and the TV bar are ticket strips */
body.hudskin.kit.skin-ticket[data-lights] .hint {
  border-image: url(../printer/art/opt/tk-key.png) 10 14 15 14 fill / 5px 7px 7.5px 7px stretch !important; border-width: 5px 7px 7.5px 7px !important;
  color: #f6f7f5 !important; padding: 0 6px !important; }
body.hudskin.kit.skin-ticket[data-lights] .hint .social-chip { color: #f6f7f5; }
body.hudskin.kit.skin-ticket:not([data-lights]) .hint, body.hudskin.kit.skin-ticket .tv-controls {
  border-image: url(../printer/art/opt/tk-strip.png) 16 48 16 48 fill / 8px 24px 8px 24px stretch !important; border-width: 8px 24px 8px 24px !important;
  color: #f6f7f5 !important; padding: 2px 4px !important; }
body.hudskin.kit.skin-ticket .tv-controls .tv-now { color: #f6f7f5 !important; }

/* the bubbles and the socials menu: the ticket panel; a bubble's link sits in the stub, under the perforation */
body.hudskin.kit.skin-ticket :is(.bubble, .socials-menu) {
  border-image: url(../printer/art/opt/ticket-panel.png) 20 42 107 42 fill / 10px 21px 53.5px 21px stretch !important;
  border-width: 10px 21px 53.5px 21px !important; padding: 6px 4px 0 !important;
  --hud-ink: #f6f7f5; --hud-muted: #aab4c4; --hud-faint: #8792a4; --hud-accent: #ffe900; color: #f6f7f5; }
body.hudskin.kit.skin-ticket .bubble b { color: #ffe900 !important; }
body.hudskin.kit.skin-ticket .bubble a { position: absolute; left: 50%; bottom: -47px; translate: -50% 0; margin: 0 !important; min-height: 30px; white-space: nowrap; }
body.hudskin.kit.skin-ticket .socials-menu { padding: 4px 2px 0 !important; }

/* the edge keys (phones): small navy ticket keys */
@media (max-width: 760px) {
  body.hudskin.kit.skin-ticket .pan-cue { border-image: url(../printer/art/opt/tk-sq.png) 10 14 16 12 fill / 5px 7px 8px 6px stretch; border-width: 5px 7px 8px 6px; color: #00eadb; }
  body.hudskin.kit.skin-ticket .pan-cue .t { color: #f6f7f5; }
  body.hudskin.kit.skin-ticket.ui4 .dock { border-width: 7px 16px 7px 16px !important; border-image-width: 7px 16px 7px 16px !important; }
  body.hudskin.kit.skin-ticket.ui4 .dock > * { min-height: 50px; }
}

/* the ticket block's stub carries two links now: How to join (the pop-up) · Docs (the Weirdlist page) */
body.hudskin.kit.skin-ticket .product .product-rules { right: 50% !important; text-align: right !important; padding: 0 10px 0 0 !important; width: auto !important; }
body.hudskin.kit.skin-ticket .product .product-doc { position: absolute; left: 50%; right: 0; bottom: -40px; margin: 0; padding: 0 0 0 10px; text-align: left; color: #ffe900 !important; }
body.hudskin.kit.skin-ticket .product .product-doc::before { content: "·"; position: absolute; left: -2px; color: #aab4c4; text-decoration: none; }
body.hudskin.kit.skin-ticket :is(.door-doc, .wl-doc) { color: #ffe900 !important; }

/* the white keys read before their art arrives (audit 16/10: right after the first print, Share on X showed dark on dark
   while the server was still busy with the card): a flat white under the border-image, which covers it once loaded */
body.hudskin.kit.skin-ticket :is(#print-btn, #share-x, .door-btn.follow, .product-share) { background-color: #f6f7f5 !important; background-clip: padding-box !important; }