/* tokens (sampled off assets/avatar.png)
   void: #050505, the near-black background the lettering sits on
   white: #f4f2ec, the lettering itself (already baked into the art)
   amber: #ffb347, a single bare bulb left burning after the house lights cut -
   theatre crews call this a ghost light, it is the only thing on this page that glows
   type: Red Hat Mono only, no display face needed, the art already carries the type
   corner radius: 0 everywhere, panel corners are square-cut like a call-board plate
   motion: the ghost light flickers unevenly, like a bulb about to give out
*/

@font-face {
  font-family: "Red Hat Mono";
  src: url("assets/fonts/red-hat-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("assets/fonts/red-hat-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #050505;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 2.5vh 4vw;
  font-family: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #f4f2ec;
}

.hall {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 640px;
}

.frame {
  position: relative;
  width: min(72vw, 62vh);
}

.scene {
  display: block;
  width: 100%;
  height: auto;
}

.ghost {
  position: absolute;
  left: 4%;
  bottom: 6%;
  width: 26%;
  height: 22%;
  background: radial-gradient(ellipse at 30% 70%, rgba(255, 179, 71, 0.5), rgba(255, 179, 71, 0) 72%);
  mix-blend-mode: screen;
  opacity: 0.3;
  animation: ghost-flicker 6.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ghost-flicker {
  0%, 31%, 35%, 63%, 68%, 100% { opacity: 0.3; }
  33% { opacity: 0.1; }
  65% { opacity: 0.48; }
  90% { opacity: 0.22; }
}

.panel {
  margin-top: 2.6vh;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 14px;
  background: #101010;
  border: 1px solid #2b2b2b;
  min-width: min(84vw, 360px);
}

.panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tk {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ca {
  appearance: none;
  border: 1px dashed #3a3a3a;
  background: transparent;
  font-family: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(10px, 1.6vw, 12px);
  color: #f4f2ec;
  padding: 4px 7px;
  cursor: pointer;
  word-break: break-all;
  text-align: right;
}
.ca:hover { border-color: #ffb347; color: #ffb347; }

.status {
  padding-top: 4px;
  border-top: 1px solid #222;
}

.status-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #ffb347;
  text-transform: uppercase;
}

.status-time {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #6f6a5e;
}

.caption {
  margin: 3vh 0 0;
  max-width: 30rem;
  font-size: clamp(12px, 1.9vw, 14px);
  line-height: 1.5;
  text-align: center;
  color: #9a9689;
}

.links {
  margin-top: 1.8vh;
  display: flex;
  gap: 1.8em;
}
.links a {
  font-family: "Red Hat Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #6f6a5e;
  text-decoration: none;
}
.links a:hover { color: #f4f2ec; }

@media (prefers-reduced-motion: reduce) {
  .ghost { animation: none; opacity: 0.3; }
}

@media (max-width: 480px) {
  .frame { width: min(84vw, 52vh); }
  .panel { margin-top: 2vh; padding: 8px 11px; }
  .caption { margin-top: 2vh; }
}

@media (max-height: 620px) {
  .caption { margin-top: 1.6vh; }
  .links { margin-top: 1vh; }
}