/* reliquary.css - the walk-in room at /reliquary/ (v86, 2026-10-06), over site.css and k.css. The room (#reliquary-root, drawn by
   reliquary.js) fills the first screen; its bar, its card and its touch controls float over it, see-through; the plain list follows. */
.rq-stage { position: relative; height: 100vh; height: 100svh; min-height: 300px; overflow: hidden; background: var(--k); touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.rq-stage[hidden] { display: none; }
#rq-view { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: var(--k); }
#rq-view.hot { cursor: pointer; }
/* the game's CRT, lightly (as the front door's stand-in): a soft line per game row, the tube's dark corners */
#rq-crt { position: absolute; pointer-events: none; border-radius: 3% / 2.4%; box-shadow: 0 0 0 3px var(--k);
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 50%, rgba(0,0,0,.16) 100%), radial-gradient(ellipse 78% 72% at 50% 50%, rgba(0,0,0,0) 58%, rgba(0,0,0,.4) 100%); }

/* the bar: back to the front door, the room's name, down to the list */
#rq-bar { position: absolute; z-index: 3; top: max(6px, env(safe-area-inset-top)); left: 6px; right: 6px; display: flex; justify-content: space-between; align-items: center; gap: 6px; pointer-events: none; }
#rq-bar a { pointer-events: auto; min-height: 40px; display: inline-flex; align-items: center; padding: 0 10px; font: 600 13px/1 var(--pix); letter-spacing: .08em; text-transform: uppercase;
  color: var(--bn1); background: rgba(5, 4, 7, .62); border: 1px solid var(--gr1); text-decoration: none; }
#rq-bar a:hover, #rq-bar a:focus-visible { color: var(--r4); border-color: var(--r4); outline: none; }
.rq-title { font: 400 26px/1 var(--goth); color: var(--r4); letter-spacing: .03em; text-shadow: 0 2px 0 var(--k), 0 0 6px var(--k); white-space: nowrap; }

/* the card: what he stands at (name, tag, one line, OPEN), or how to walk */
#rq-card { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); top: calc(max(6px, env(safe-area-inset-top)) + 50px); width: min(calc(100% - 16px), 30rem); box-sizing: border-box;
  padding: 8px 10px; background: rgba(13, 11, 18, .88); border: 2px solid var(--gr1); box-shadow: 0 3px 0 var(--k); color: var(--bn1); font-size: 14px; line-height: 1.35; }
#rq-card:empty { display: none; }
#rq-card.low { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); }
html.rq-touch #rq-card.low { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 136px); }
#rq-card.on { border-color: var(--gd); }
#rq-card.idle { border-style: dashed; padding: 6px 10px; }
#rq-card .hd { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; }
#rq-card b { font: 600 18px/1.15 var(--pix); color: var(--w); }
#rq-card .t { margin: 3px 0 0; max-width: none; }
#rq-card.idle .t { margin: 0; color: var(--gr3); font-size: 13px; }
#rq-card .go { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
#rq-card .pxbtn { min-height: 42px; padding: .3rem 1rem; }
#rq-card kbd { font: 600 12px/1 var(--pix); padding: 3px 6px; border: 1px solid var(--gr3); border-bottom-width: 3px; color: var(--w); background: var(--d1); }

/* the touch controls: a see-through ring to steer (bottom left) and A to open (bottom right), only on a touch screen */
#rq-pad, #rq-a { display: none; }
html.rq-touch #rq-pad { display: block; position: absolute; z-index: 3; left: 14px; bottom: max(18px, env(safe-area-inset-bottom)); width: 120px; height: 120px; border-radius: 50%;
  border: 2px solid rgba(196, 179, 146, .38); background: rgba(5, 4, 7, .22); touch-action: none; }
#rq-pad i { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: rgba(196, 179, 146, .2); border: 2px solid rgba(238, 228, 204, .5); }
html.rq-touch #rq-a { display: flex; position: absolute; z-index: 3; right: 18px; bottom: max(34px, calc(env(safe-area-inset-bottom) + 16px)); width: 78px; height: 78px; border-radius: 50%;
  flex-direction: column; align-items: center; justify-content: center; padding: 0; touch-action: manipulation; cursor: pointer;
  background: rgba(142, 19, 24, .55); border: 2px solid rgba(255, 79, 58, .75); color: var(--w); font: 700 26px/1 var(--pix); }
#rq-a small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; }
#rq-a:disabled { background: rgba(26, 21, 32, .4); border-color: rgba(168, 160, 166, .35); color: rgba(238, 228, 204, .5); }

/* the plain list under the room: every keepsake, a link each */
.rq-items { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .7rem; }
.rq-items li { margin: 0; max-width: none; }
.rq-items a { display: block; height: 100%; box-sizing: border-box; padding: .6rem .8rem; text-decoration: none; background: var(--d1); border: 2px solid var(--gr1); box-shadow: 0 3px 0 var(--k); color: var(--bn1); }
.rq-items a:hover, .rq-items a:focus-visible { border-color: var(--r3); color: var(--w); outline: none; }
.rq-items b { font: 600 1.05rem/1.2 var(--pix); color: var(--w); }
.rq-items .t { display: block; font-size: .92rem; line-height: 1.4; margin-top: .2rem; color: var(--gr3); }
@media (max-width: 380px) { .rq-title { font-size: 21px; } #rq-bar a { padding: 0 8px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { #rq-card { transition: none; } }
/* a wide screen: the card sits at the foot, on the side away from the thing he is at */
@media (min-aspect-ratio: 1/1) {
  #rq-card.on { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); width: min(26rem, 44%); transform: none; }
  #rq-card.on.side-l { left: 14px; right: auto; }
  #rq-card.on.side-r { left: auto; right: 14px; }
  html.rq-touch #rq-card.on.side-l { left: 150px; }
  html.rq-touch #rq-card.on.side-r { right: 110px; }
}