/* The final UX/UI audit (Fable, 16/10; owner: "ok faça tudo"). Loaded last by the room and by the desk (terminal/index.html).
   Each block names the audit item it answers. */

/* ---- P1-11: no violet. Blue next to pink blended through purple in every rainbow rim; now blue stops and pink starts. ---- */
:root {
  --rb-loop: linear-gradient(90deg, #ff453a 0%, #ff9f0a 14%, #ffe900 28%, #64ff00 42%, #00eadb 56%, #008cff 68%, #008cff 75%, #ff49cf 75%, #ff49cf 87%, #ff453a 100%);
  --hud-rainbow: conic-gradient(from 30deg, #50d7ef 0%, #008cff 16.7%, #008cff 24%, #ff49cf 24%, #ff6278 50%, #f4c65a 66.7%, #75e5a5 83.3%, #50d7ef 100%);
}
.hype-rim { background-image: var(--rb-loop); }
body.hudskin .product.hud-panel::before, body.hudskin .door-card.hud-panel::before { background-image: var(--rb-loop); }

/* ---- P1-5 + C1: the door. One clear way in for people who already follow; every key 44 px tall. ---- */
body.hudskin .door-row { display: grid; gap: 10px; }
body.hudskin .door-btn { min-height: 48px; display: flex; align-items: center; justify-content: center; text-align: center; }
body.hudskin .door-btn.in { background: var(--hud-fill-hover) !important; color: var(--hud-ink) !important; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.32), inset -2px -2px 0 rgba(0, 0, 0, 0.6) !important; cursor: pointer; }
body.hudskin .door-btn.in:hover, body.hudskin .door-btn.in:focus-visible { background: rgba(255, 255, 255, 0.2) !important; outline: none; }
body.hudskin .door-lead { margin: 12px 0 14px !important; font-size: 15px; line-height: 1.45; }
body.hudskin .door-lead b { color: var(--hud-accent); }
body.hudskin .door-rules { min-height: 44px; display: inline-flex; align-items: center; padding: 0 2px; }
/* P1-6: who sent them, and the +1 they start with */
body.hudskin .door-card .door-invite, body.hudskin .product .product-invite { margin: 8px 0 0 !important; padding: 7px 10px; font: 600 14px/1.35 var(--hud-font); color: #101722 !important; background: #ffe900; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.25); text-shadow: none; }
body.hudskin .door-invite[hidden], body.hudskin .product-invite[hidden] { display: none; }

/* ---- P2-2: nothing under 12 px in the ticket block ---- */
body.hudskin .product-spot .ps-of { font-size: 12px; }
body.hudskin .product-spot .ps-k { font-size: 10px; }
body.hudskin .product-count { font-size: 12px; }
body.hudskin .product-rules { font-size: 13.5px; }

/* ---- P2-7: Share on X right in the member block, next to Copy my link ---- */
body.hudskin .product-shares { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.hudskin .product-share, body.hudskin .product-shares .product-copy { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; font: 600 14px/1 var(--hud-font); }
body.hudskin .product-share { color: #101722 !important; background: #edf4f2 !important; box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #9aabb8 !important; }
body.hudskin .product-share::before { content: ""; width: 13px; height: 13px; flex: none; background: currentColor;
  -webkit-mask: url(art/logos/x.svg) center / contain no-repeat; mask: url(art/logos/x.svg) center / contain no-repeat; }

/* ---- P1-4: the label is never under the dock ---- */
.hint { z-index: 18; }

/* ---- P2-8: something on screen while the room's pictures load ---- */
body[data-lights]:not(.room-ready) #stage::after {   /* the room only (the desk page has no data-lights) */
  content: "Loading the room…"; position: fixed; left: 50%; top: 46%; translate: -50% 0; z-index: 2; padding: 8px 14px;
  font: 400 22px/1 VT323, monospace; color: #8ffcff; background: rgba(5, 7, 12, 0.8); box-shadow: inset 0 0 0 1px rgba(143, 252, 255, 0.4); pointer-events: none; }

/* ---- P1-10: 44 px for everything a finger touches ---- */
@media (pointer: coarse), (max-width: 760px) {
  body.hudskin .hud-btn { min-width: 44px; min-height: 44px; }
  body.hudskin .product-btn { min-height: 46px; }
  body.hudskin .product-rules { min-height: 44px; display: flex; align-items: center; justify-content: center; margin-top: 4px !important; padding: 0; border: 1px dashed rgba(143, 252, 255, 0.45); text-decoration: none; }
  body.hudskin .product-count { display: block !important; grid-column: 1 / -1; margin: 6px 0 0 !important; padding-top: 0; border-top: 0; text-align: center; }   /* P2-7: the counter on phones too */
  .lb-link { min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; }
  .holo-arrow { width: 44px !important; height: 48px !important; }
}

/* ---- P2-1: the dim lines and the 0x placeholder on the green screen read at 4.5:1 ---- */
.crt-out .dim { color: #62c03e !important; }
.crt-input::placeholder, .prompt input::placeholder { color: #4f9a2d !important; }



/* ---- Phones (owner 16/10: "o menu inicial é muito grande e tampa toda visualização"): the ticket block is a slim bar over
   the dock; "Spots left · how to join" opens the rest as a sheet. The room is framed between the top bar and the slim bar. ---- */
.product-more { display: none; }
.pan-cue { display: none; }
@media (max-width: 760px) {
  body.hudskin .product { bottom: calc(78px + env(safe-area-inset-bottom)); padding: 7px 8px 7px 12px; grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  body.hudskin .product-title { font-size: 15px; }
  body.hudskin .product-more { display: block; margin: 2px 0 0; padding: 4px 0 2px; min-height: 30px; border: 0; background: none; text-align: left; cursor: pointer;
    font: 600 12.5px/1.2 var(--hud-font); color: var(--hud-accent); text-decoration: underline; text-underline-offset: 3px; }
  body.hudskin .product-more::after { content: " ▴"; text-decoration: none; display: inline-block; margin-left: 4px; }
  body.hudskin .product.open .product-more::after { content: " ▾"; }
  body.hudskin .product-btn { min-height: 44px; padding: 8px 14px; }
  /* closed: only the title, the line that opens the rest and the main key */
  body.hudskin .product:not(.open) .product-spots, body.hudskin .product:not(.open) .product-count, body.hudskin .product:not(.open) .product-rules,
  body.hudskin .product:not(.open) .product-invite, body.hudskin .product:not(.open) .product-member { display: none !important; }
  body.hudskin .product.open { max-height: calc(100dvh - 150px); overflow-y: auto; box-shadow: var(--hud-shadow), 0 -18px 40px -10px rgba(0, 0, 0, 0.75) !important; }
  body.hudskin .product.open .product-spots { grid-column: 1 / -1; }
  body.hudskin .product.open .product-invite, body.hudskin .product.open .product-member, body.hudskin .product.open .product-rules, body.hudskin .product.open .product-count { grid-column: 1 / -1; }
  /* the dock: a little lower */
  body.hudskin.ui4 .dock > * { padding: 3px 2px 2px; gap: 1px; }
  /* the hint sits under the top bar (room.js placeHint) */
  body.hudskin[data-lights] .hint { translate: -50% 0; left: 50%; max-width: calc(100vw - 24px); white-space: normal; text-align: center; }   /* the room only: the desk places its own hint */
  /* the room pans: a small arrow at each edge while there is more to see that way */
  .pan-cue { display: grid; place-items: center; position: fixed; z-index: 14; top: 50%; width: 30px; height: 64px; margin-top: -32px; padding: 0; border: 0; cursor: pointer;
    background: rgba(8, 11, 18, 0.55); color: #8ffcff; font: 400 26px/1 VT323, monospace; text-shadow: 0 0 8px rgba(0, 234, 219, 0.9); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
  .pan-cue.on { opacity: 1; pointer-events: auto; animation: pan-nudge 1.6s ease-in-out infinite; }
  .pan-cue.l { left: 0; border-radius: 0 6px 6px 0; } .pan-cue.r { right: 0; border-radius: 6px 0 0 6px; }
  body.in-terminal .pan-cue { display: none; }
}
@keyframes pan-nudge { 50% { translate: var(--nudge, 0) 0; } }
.pan-cue.l { --nudge: -3px; } .pan-cue.r { --nudge: 3px; }
@media (prefers-reduced-motion: reduce) { .pan-cue.on { animation: none; } }

/* Weird Cats TV with sound (owner 16/10): the bar's Sound key; when the browser wants a tap on the desk first, it asks for it */
#tv-sound .ts-i { display: inline-block; min-width: 1ch; }
#tv-sound.ask { color: #ffe900 !important; animation: tv-ask 1.1s steps(2) infinite; }
@keyframes tv-ask { 50% { filter: brightness(1.35); } }
@media (prefers-reduced-motion: reduce) { #tv-sound.ask { animation: none; } }

/* phones: the docs link follows How to join (hidden in the slim bar, under it in the open sheet) */
@media (pointer: coarse), (max-width: 760px) {
  body.hudskin .product:not(.open) .product-doc { display: none !important; }
  body.hudskin .product.open .product-doc { grid-column: 1 / -1; }
}

/* the desk's HOW TO EARN note opens the Weirdlist docs */
.notes .note-doc { pointer-events: auto; cursor: pointer; text-decoration: none; }
.notes .note-doc:is(:hover, :focus-visible) { filter: brightness(1.08); outline: none; }
.notes .note-doc:focus-visible { outline: 2px dashed #ffe900; outline-offset: 3px; }
.lightbox a.lb-link { text-decoration: underline; text-underline-offset: 3px; }
/* the open sheet scrolls, so its stub clips: How to join and Docs sit in the sheet itself, side by side, finger-sized */
@media (pointer: coarse), (max-width: 760px) {
  body.hudskin.kit.skin-ticket .product.open .product-rules, body.hudskin.kit.skin-ticket .product.open .product-doc {
    position: static !important; grid-column: auto !important; min-height: 44px; margin: 6px 0 0 !important; padding: 0 8px !important;
    display: flex; align-items: center; justify-content: center; text-align: center !important; border: 1px dashed rgba(255, 233, 0, 0.4) !important; }
  body.hudskin.kit.skin-ticket .product.open .product-doc::before { display: none; }
  body.hudskin.kit.skin-ticket .product.open :is(.product-rules, .product-doc) { display: inline-flex !important; width: calc(50% - 4px) !important; min-height: 44px !important; vertical-align: top; }
  body.hudskin.kit.skin-ticket .product.open .product-rules { margin-right: 8px !important; }
}

/* ---- short screens (a laptop at 1280x720 or 1366x768, a phone turned sideways; audit 16/10): the full ticket block covered
   the arcade cabinet and slid under the dock. It becomes the slim bar, like on a phone held upright; the rest opens as a sheet
   (the spots, the steps, How to join and the docs). At 900 px and taller nothing changes. ---- */
@media (max-height: 820px) and (min-width: 761px) {
  body.hudskin .product { width: 320px; padding: 6px 8px 6px 12px; }
  body.hudskin .product-more { display: block; margin: 2px 0 0; padding: 4px 0 2px; min-height: 30px; border: 0; background: none; text-align: left; cursor: pointer;
    font: 600 12.5px/1.2 var(--hud-font); color: var(--hud-accent); text-decoration: underline; text-underline-offset: 3px; }
  body.hudskin .product-more::after { content: " ▴"; text-decoration: none; display: inline-block; margin-left: 4px; }
  body.hudskin .product.open .product-more::after { content: " ▾"; }
  body.hudskin .product:not(.open) :is(.product-spots, .product-count, .product-rules, .product-doc, .product-invite, .product-member, .product-steps, .product-sub) { display: none !important; }
  body.hudskin .product.open { max-height: calc(100dvh - 120px); overflow-y: auto; }
  /* the sheet scrolls, so its stub would clip: How to join and Docs sit in the sheet, side by side */
  body.hudskin.kit.skin-ticket .product.open :is(.product-rules, .product-doc) { position: static !important; display: inline-flex !important; width: calc(50% - 4px) !important; min-height: 40px !important;
    margin: 8px 0 0 !important; padding: 0 8px !important; align-items: center; justify-content: center; text-align: center !important; vertical-align: top; border: 1px dashed rgba(255, 233, 0, 0.4) !important; }
  body.hudskin.kit.skin-ticket .product.open .product-rules { margin-right: 8px !important; }
  body.hudskin.kit.skin-ticket .product.open .product-doc::before { display: none; }
}
/* sideways phones: the dock spans the bottom there, so the bar sits above it and the sheet stays under the logo */
@media (max-height: 500px) and (min-width: 761px) {
  body.hudskin .product { width: 300px; bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
  body.hudskin .product.open { max-height: calc(100dvh - 92px - 58px); }
  body.hudskin .product.open .product-steps { display: none; }
}
/* the door on a short screen (a phone turned sideways, a small laptop): it scrolls, so the keys are always reachable */
body.hudskin .door { overflow-y: auto; overscroll-behavior: contain; }
@media (max-height: 560px) {
  body.hudskin .door { place-items: start center; padding-block: 12px 24px; }
  body.hudskin .door-spots-note { display: none; }
}

/* ---- phone polish from the usage audit (16/10) ---- */
@media (max-width: 760px) {
  /* the edge arrows step aside while the ticket sheet or the socials menu is open (they sat on its corners) */
  body:has(.product.open) .pan-cue, body:has(#socials-menu:not([hidden])) .pan-cue { display: none !important; }
  /* a member's link gets its own line over Share on X / Copy my link (it was squeezed to "127.0..."); the keys say it all */
  body.hudskin .product.open .product-member { display: grid !important; grid-template-columns: 1fr; gap: 6px; }
  body.hudskin .product.open .product-member .product-link { margin: 0 !important; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the ticket window clears the room's back key at the top */
  .lightbox { padding-top: 64px !important; }
}
@media (pointer: coarse) {
  body.hudskin .door-doc { min-height: 44px; display: inline-flex; align-items: center; margin-top: 0; }
}

/* the desk inside the room: the room's back key (top left, "Back to the desk") closes a social card; the card's own back key
   sat right under it (audit 16/10), so it steps aside there. The card's ✕ and Esc still close it too. */
.embedded .social-back { display: none !important; }
/* a focused thing in the room shows its rainbow outline (aura.js); the straight polygon ring on top read as a stray box */
.hot polygon:focus-visible { stroke: transparent !important; }