/* DECLINED's page: the shared skin and stage are ../module.css (site/public/module.css); this is only what's its own. The page is gold like every module's; only the panel's own lights keep their
   colour, and the cards keep theirs. */

/* 28 HP at the line's scale, the wider column (as VOX HUMANA's, HOPPER's and STECKER's 28 HP stages) */
.stage { --panel-ratio: 141.94 / 128.5; --panel-max: 784.5px; --panel-max-narrow: 728.5px; overflow-x: clip; }
.stage:focus { outline: none; }
.stage-inner { max-width: 1320px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.stage-hint { max-width: none; }
@media (max-width: 900px) {
  .stage-inner { grid-template-columns: minmax(0, 1fr); }
  .stage-hint { max-width: var(--panel-max-narrow); }
}

/* a card runs past the panel's foot, as a real one does */
.panel2d { overflow: visible; isolation: isolate; }
.stage-panel { position: relative; z-index: 2; }

/* the sign: each letter a clipped piece of the light's picture */
.p2-cell { position: absolute; pointer-events: none; opacity: 0; z-index: 1; background: #fff7e6; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.p2-halo { position: absolute; pointer-events: none; opacity: 0; z-index: 1; background: radial-gradient(closest-side, rgba(255, 244, 222, 0.6), rgba(255, 244, 222, 0)); }
.p2 { z-index: 2; }

/* the card: on top of everything, and only the card takes a hand */
.p2-cardbox { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.p2-card { position: absolute; top: 0; pointer-events: auto; touch-action: none; cursor: grab; will-change: transform; -webkit-tap-highlight-color: transparent; transform-origin: 0% 50%; }
.p2-card.held { cursor: grabbing; }
.p2-card:focus-visible { outline: 2px solid rgba(212, 175, 55, 0.7); outline-offset: 1px; }
.p2-card-img { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-select: none; }
.p2-card-shade { position: absolute; top: 0; background: rgba(0, 0, 0, 0.56); filter: blur(5px); border-radius: 4px; will-change: transform; pointer-events: none; }

/* the wallet: the cards in your hand, under the panel */
.wallet { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin: 0.9rem auto 0; width: min(100%, var(--panel-max, 784.5px)); }
.card-pick { display: grid; gap: 0.25rem; justify-items: center; padding: 0.3rem; background: none; border: 1px solid transparent; border-radius: 4px; color: var(--dim); font: 400 0.7rem/1.2 "Space Mono", ui-monospace, monospace; cursor: pointer; }
.card-pick img { display: block; width: 90px; height: auto; border-radius: 4px; }
.card-pick:hover { color: var(--ink); }
.card-pick[aria-pressed="true"] { border-color: rgba(212, 175, 55, 0.6); color: var(--ink); }
.card-pick:focus-visible { outline: 2px solid rgba(212, 175, 55, 0.7); outline-offset: 1px; }
@media (max-width: 560px) { .card-pick img { width: 62px; } .card-pick { font-size: 0.62rem; } .wallet { gap: 0.2rem; } }

/* beside the panel: the hand against what the terminal wants, and what's kept */
#scope { display: block; width: 100%; height: 230px; }
.status { min-height: 2.8em; }
.readout { min-height: 2.8em; font: 400 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); }
#patch-note { min-height: 9em; }