:root {
  --void: #06081a;
  --text: #f2f3fa;
  --dim: rgba(242, 243, 250, 0.62);
  --focus: #f4cf45;
  --line: rgba(255, 255, 255, 0.32);
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--void); color: var(--text); font: 14px/1.5 var(--mono); overflow: hidden; }
[hidden] { display: none !important; }

#camerafeed { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

.screen {
  position: fixed; inset: 0; z-index: 2;
  display: grid; align-content: center; justify-items: center; gap: 14px;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  text-align: center; background: var(--void);
}
.screen h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.screen p { margin: 0; color: var(--dim); max-width: 32ch; }
.eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

button {
  margin-top: 10px; font: 600 15px var(--mono); color: var(--void); background: var(--focus);
  border: 0; padding: 14px 26px; cursor: pointer;
}
button:focus-visible, .alt:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.alt { color: var(--dim); font-size: 12px; }

.hint {
  position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: 1;
  transform: translateX(-50%); margin: 0; padding: 8px 14px;
  background: rgba(6, 8, 26, .6); border: 1px solid var(--line); color: var(--text);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}

/* AR controls: shown in place of the hint while a piece is up */
.controls {
  position: fixed; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 1;
  display: flex; justify-content: center; align-items: center; gap: 8px; pointer-events: none;
}
.controls button {
  pointer-events: auto; margin: 0; width: 44px; height: 44px; padding: 0;
  background: rgba(6, 8, 26, .6); color: var(--text); border: 1px solid var(--line);
  font: 500 18px/1 var(--mono); -webkit-tap-highlight-color: transparent;
}
.controls button:active { border-color: var(--focus); color: var(--focus); }

/* tap to read: the cartel as a flat card, grown from where it hangs on the wall */
.tip {
  position: fixed; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 1;
  margin: 0; text-align: center; pointer-events: none; color: var(--text);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 6px rgba(6, 8, 26, .9);
  opacity: 0; transition: opacity .4s ease;
}
.tip.on { opacity: .85; }
.reader {
  position: fixed; inset: 0; z-index: 3; display: grid; place-items: center; padding: 16px;
  background: rgba(6, 8, 26, 0); transition: background .45s ease; cursor: pointer;
}
.reader.open { background: rgba(6, 8, 26, .55); }
.card {
  width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 26px;
  background: #ecece8; color: #10121f; text-align: left; font-family: var(--mono);
  transform-origin: 0 0; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s ease;
}
.card-title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.card-rows { display: grid; grid-template-columns: 142px 1fr; margin: 0; font-size: 14px; line-height: 22px; }
.card-rows dt { color: #6e7082; }
.card-rows dd { margin: 0; font-weight: 500; }
.card-text { margin: 12px 0 0; font-size: 15px; line-height: 21px; color: #282a3c; }