/* relic.css — relic.html only. The flippable floor-credential card. */

body{display:flex;flex-direction:column;min-height:100svh;overflow:hidden;user-select:none}

.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:60px 16px 16px;perspective:1100px}

/* the lanyard stub poking out from behind the card */
.strap{width:44px;height:56px;flex:none;margin-bottom:-70px;z-index:0;
  background:repeating-linear-gradient(0deg,#1a221e 0 7px,#0f1412 7px 9px);
  border:2px solid #080a09;border-bottom:none}

.scene{width:min(86vw,380px);aspect-ratio:3/3.6;position:relative;z-index:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.scene:focus-visible{outline:2px solid var(--tape);outline-offset:8px}
.card{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.idle .card{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:rotateX(2deg) rotateY(-3deg)}50%{transform:rotateX(-2.5deg) rotateY(3deg)}}

.face{position:absolute;inset:0;backface-visibility:hidden;background:var(--paper);color:var(--iop);
  border:4px solid #000;border-radius:18px;box-shadow:10px 14px 0 rgba(0,0,0,.6);
  padding:20px 18px 16px 30px;display:flex;flex-direction:column;overflow:hidden}
.face::before{content:"";position:absolute;left:8px;top:14px;bottom:14px;width:8px;
  background-image:radial-gradient(circle,var(--ink) 3px,transparent 3.5px);
  background-size:8px 15px;background-repeat:repeat-y}
.back{transform:rotateY(180deg)}

/* the holographic sweep — its position is driven by relic.js on pointer move */
.sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.55;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.9) 47%,rgba(120,255,200,.5) 53%,transparent 68%);
  background-size:220% 220%;background-position:var(--shx,20%) 50%}

/* --- front face --- */
.slot{width:96px;height:20px;background:var(--ink);border:3px solid #000;border-radius:9px;margin:0 auto 14px}
.ex{font-weight:800;font-size:13px;letter-spacing:.34em;text-align:center;color:#54503f}
.sub{font-size:10px;letter-spacing:.22em;text-align:center;color:var(--faded);margin-top:5px}
.rule{border-bottom:2.5px solid var(--iop);margin:13px 8px 0}
.acro{font-weight:800;text-align:center;letter-spacing:.01em;line-height:1;
  font-size:clamp(72px,24vw,104px);margin:auto 0}
.seat{font-weight:800;font-size:15.5px;letter-spacing:.16em;text-align:center}
.band{background:var(--loss);color:#140808;font-weight:800;font-size:13px;letter-spacing:.1em;
  text-align:center;padding:9px 4px;margin:12px -18px 10px -30px}
.brow{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.08em;color:var(--faded)}

/* --- back face: house rules --- */
.back h3{font-size:12px;letter-spacing:.3em;text-align:center;color:#54503f;margin:4px 0 2px}
.back .rule{margin-bottom:6px}
ol{list-style:none;counter-reset:r;flex:1;display:flex;flex-direction:column;justify-content:space-evenly}
ol li{counter-increment:r;display:flex;gap:10px;font-size:12px;line-height:1.45}
ol li::before{content:"0" counter(r);font-weight:800;color:#a89f85;flex:none}
ol b{font-weight:800}
/* ink-on-paper variants of the signal colours */
.g{color:#0e7a4a}.r{color:#c22525}.a{color:#a86a00}
.stat{border-top:2.5px solid var(--iop);padding-top:8px;font-size:9.5px;letter-spacing:.06em;
  color:var(--faded);text-align:center}

.cap{font-size:10px;letter-spacing:.26em;color:#5d6a64;text-align:center}
.cap b{color:var(--tape);font-weight:600}
.foot{font-size:9px;letter-spacing:.14em;color:#41504a;text-align:center;padding-bottom:10px}

@media (prefers-reduced-motion: reduce){
  .idle .card{animation:none}
  .card{transition:none}
  .sheen{display:none}
}