/* ==========================================================================
   app-arcade.css — the arcade and the remote volume.

   Both applications are native until a connection is open, and both say so
   visually: everything is drawn in the machine's own bevels, and the frame
   that arrives from somewhere else is inset behind a bar with a live dot on
   it, so it never stops being obvious which pixels are whose.
   ========================================================================== */

.ar-wrap > .ar-shelf { flex: 0 0 228px; }
.ar-row { display: block; padding: 4px 7px; line-height: 1.25; }
.ar-t { display: block; font-weight: 700; font-size: 11.5px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-meta { display: block; font-family: var(--mono); font-size: 9.5px; opacity: .55; }
.ar-row.sel .ar-meta { opacity: .85; }

.ar-slot {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  padding: 0; overflow: auto; background: var(--gray);
  direction: rtl; scrollbar-width: thin;
}
.ar-slot > * { direction: ltr; }

/* the cartridge: a thing this machine owns a picture of */
.ar-cart {
  margin: 16px auto 10px; width: 210px;
  background: #23201c; color: var(--bone);
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #4a443c, 0 5px 14px rgba(0,0,0,.4);
}
.ar-cart-top {
  display: flex; justify-content: space-between; gap: 6px;
  padding: 3px 7px; font-family: var(--mono); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--amber-dim);
  border-bottom: 1px solid #000;
}
.ar-cart-face {
  display: flex; align-items: center; justify-content: center;
  min-height: 92px; padding: 14px 12px; text-align: center;
  background: linear-gradient(160deg, #2d2823, #1a1714 70%);
}
.ar-cart-t { font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: .01em; }
.ar-cart-teeth { display: flex; gap: 3px; padding: 5px 9px; background: #15120f; }
.ar-cart-teeth i { flex: 1 1 auto; height: 7px; background: #6d6354; }

.ar-note { margin: 0 20px 12px; font-size: 12px; font-style: italic; color: #3d3a34; }
.ar-prov, .ob-decl, .lz-prov {
  margin: 0 20px 14px; display: grid; grid-template-columns: max-content 1fr;
  gap: 1px 12px; font-size: 11px;
}
.ar-prov dt, .ob-decl dt, .lz-prov dt {
  font-family: var(--mono); font-size: 10px; color: #55524a;
  text-transform: uppercase; letter-spacing: .05em;
}
.ar-prov dd, .ob-decl dd, .lz-prov dd { margin: 0; }
.ob-decl { margin: 0 0 10px; }
.ar-act, .lz-act {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0 20px 18px;
}

/* the guest */
.ar-live {
  display: flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 3px 7px; font-size: 11px;
  background: var(--gray-lt);
  border-bottom: 1px solid var(--lo); box-shadow: inset 0 1px 0 var(--hi);
}
.ar-live .spacer { flex: 1 1 auto; }
.ar-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 6px var(--amber);
  animation: ar-pulse 1.9s ease-in-out infinite;
}
@keyframes ar-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
body.no-fx .ar-dot { animation: none; }
.ar-frame, .lz-frame {
  flex: 1 1 auto; width: 100%; min-height: 380px; border: 0;
  background: #000; display: block;
}

/* the remote volume */
.lz-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
            overflow: auto; background: var(--gray); }
.lz-plate { display: flex; gap: 20px; padding: 20px 20px 10px; flex-wrap: wrap; }
.lz-disc {
  position: relative; flex: 0 0 132px; width: 132px; height: 132px;
  border-radius: 50%; background: #1b1916;
  box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 0 0 1px #000;
}
.lz-ring {
  position: absolute; inset: 7px; border-radius: 50%;
  background: conic-gradient(from 210deg, #6d6354, #2e2a25, #8a7f6c, #26231f, #5d5446, #6d6354);
  opacity: .85;
}
.lz-hub {
  position: absolute; inset: 47px; border-radius: 50%;
  background: var(--gray); box-shadow: inset 0 0 0 1px var(--lo);
}
.lz-sheen {
  position: absolute; inset: 7px; border-radius: 50%;
  background: linear-gradient(115deg, rgba(255,255,255,.35), transparent 42%);
}
.lz-label { flex: 1 1 260px; min-width: 240px; }
.lz-label h1 { margin: 0 0 2px; font-size: 19px; }
.lz-sub { margin: 0 0 10px; font-family: var(--mono); font-size: 10.5px;
          letter-spacing: .06em; color: #55524a; text-transform: uppercase; }
.lz-blurb { margin: 0 0 12px; font-size: 12px; max-width: 46ch; }
.lz-prov { margin: 0; }
.lz-no { color: #8a3a1a; }
.lz-fallback {
  flex: 0 0 auto; margin: 0; padding: 6px 9px; font-size: 11px; color: #3d3a34;
  background: var(--gray-lt); border-top: 1px solid var(--lo);
}

@media (max-width: 700px) {
  .ar-wrap > .ar-shelf { flex: 0 0 132px; }
  .lz-plate { padding: 14px; }
}