/* ── Adventurer Plate: pointer by the name + old-TV lightbox ── */
.ap-trigger { font: inherit; color: inherit; letter-spacing: inherit; text-shadow: inherit; background: none; border: none; padding: 0; margin: 0; cursor: pointer; transition: color 0.2s, text-shadow 0.2s; }
.ap-trigger:hover { color: #b8943f; text-shadow: 0 0 24px rgba(184,148,63,0.45); }
.ap-trigger:focus:not(:focus-visible) { outline: none; }

/* glove pointing at the name, swinging a little left and right */
.ap-pointer { position: absolute; right: calc(100% + 10px); top: 50%; width: clamp(32px, 4vw, 50px); height: auto; pointer-events: none;
  transform: translateY(-50%); animation: ap-swing 1.1s ease-in-out infinite; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
@keyframes ap-swing { 0%, 100% { transform: translate(-6px, -50%); } 50% { transform: translate(4px, -50%); } }

/* lightbox */
.ap-box { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; padding: 20px; }
.ap-box.open, .ap-box.closing { display: flex; }
.ap-back { position: absolute; inset: 0; background: rgba(6,6,8,0.86); opacity: 0; transition: opacity 0.35s; }
.ap-box.open .ap-back { opacity: 1; }
.ap-box.closing .ap-back { opacity: 0; transition-delay: 0.3s; }

/* the screen: switches on like an old CRT (dot → line → picture), off in reverse */
.ap-screen { position: relative; width: min(883px, 100%); aspect-ratio: 883 / 507; border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06); transform-origin: center; }
.ap-screen img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ap-box.open .ap-screen { animation: ap-on 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ap-box.closing .ap-screen { animation: ap-off 0.5s cubic-bezier(0.6, 0, 0.8, 0.4) both; }
@keyframes ap-on {
  0%   { transform: scale(0.01, 0.004); filter: brightness(12) saturate(0); }
  30%  { transform: scale(1, 0.006);    filter: brightness(8) saturate(0); }
  60%  { transform: scale(1, 1.04);     filter: brightness(2.2) saturate(0.6); }
  78%  { transform: scale(1, 0.98);     filter: brightness(1.2); }
  100% { transform: scale(1, 1);        filter: none; }
}
@keyframes ap-off {
  0%   { transform: scale(1, 1);        filter: none; }
  45%  { transform: scale(1, 0.006);    filter: brightness(6) saturate(0); }
  80%  { transform: scale(0.02, 0.006); filter: brightness(12) saturate(0); }
  100% { transform: scale(0, 0);        filter: brightness(12) saturate(0); opacity: 0; }
}
/* scanlines, a faint rolling band and a slight flicker on top of the picture */
.ap-screen::before, .ap-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.ap-screen::before { background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.13) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; animation: ap-flicker 0.12s steps(2) infinite; }
.ap-screen::after { background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.07) 48%, transparent 56%); background-size: 100% 260%; animation: ap-roll 5s linear infinite;
  box-shadow: inset 0 0 90px rgba(0,0,0,0.45); border-radius: inherit; }
@keyframes ap-flicker { 0% { opacity: 0.9; } 100% { opacity: 1; } }
@keyframes ap-roll { from { background-position: 0 100%; } to { background-position: 0 -160%; } }

.ap-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
  background: rgba(20,20,22,0.7); color: #fff; font: 600 1.2rem/1 'Nunito', sans-serif; cursor: pointer; opacity: 0; transition: opacity 0.25s 0.5s, border-color 0.2s; }
.ap-box.open .ap-close { opacity: 1; }
.ap-box.closing .ap-close { opacity: 0; transition-delay: 0s; }
.ap-close:hover { border-color: #b8943f; }

@media (max-width: 560px) { .ap-pointer { right: calc(100% + 4px); } }
@media (prefers-reduced-motion: reduce) {
  .ap-pointer { animation: none; }
  .ap-box.open .ap-screen, .ap-box.closing .ap-screen, .ap-screen::before, .ap-screen::after { animation: none; }
}