* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #fff; overflow: hidden; }
body { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; -webkit-tap-highlight-color: transparent; }

/* video stage (double-buffered) */
#stage { position: fixed; inset: 0; background: #fff; pointer-events: auto; cursor: pointer; }
.stage {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #fff;
  opacity: 0; transition: opacity .14s ease; pointer-events: none;
}
.stage.show { opacity: 1; }
.poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; transition: opacity .14s ease;
  pointer-events: none; z-index: 2;
}
.poster.show { opacity: 1; }

/* content rect + hit zones */
#stage-content { position: absolute; pointer-events: none; }

/* State 3 screen wall — media overlaid on the black screens */
#screens { position: absolute; inset: 0; pointer-events: none; }
.scr {
  position: absolute; object-fit: cover; overflow: hidden;
  background: #000; border-radius: 2px; opacity: 0; transition: opacity .35s ease;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); transform-origin: center;
}
.scr.on { opacity: 1; }
/* side screens: black panel + placeholder label (no imagery) */
.scr-ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: #050608; padding: 4%;
}
.scr-ph span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(5px, 0.72vw, 12px); letter-spacing: .08em; line-height: 1.35;
  text-transform: uppercase; color: rgba(111,208,255,.72);
}
body.debug .scr { outline: 1px dashed rgba(255,60,140,.9); }

#zones { position: absolute; inset: 0; }
.zone { position: absolute; pointer-events: auto; cursor: pointer; border-radius: 10px; }
body.debug .zone { outline: 2px dashed rgba(30,144,255,.9); background: rgba(30,144,255,.12); }
body.debug .zone::after { content: attr(data-label); position: absolute; top: 3px; left: 6px; font-size: 12px; color: #1E90FF; }

/* top-right pinned links — plain, subtle, same graphic family as the HUD */
#pins { position: fixed; top: 16px; right: 20px; z-index: 25; display: flex; gap: 18px; align-items: center; }
.pin {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  background: none; border: none; padding: 0; box-shadow: none; text-shadow: none;
  transition: opacity .18s ease; cursor: pointer; white-space: nowrap;
}
.pin:hover { opacity: .6; }
.pin-store { color: #9096a0; }
.pin-join { color: #6fd0ff; }

/* bottom-right sound toggle — subtle, same family */
#sound-toggle {
  position: fixed; right: 20px; bottom: 16px; z-index: 25;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #9096a0;
  transition: opacity .18s ease;
}
#sound-toggle:hover { opacity: .6; }

/* bottom HUD */
#hud { position: fixed; left: 18px; bottom: 16px; z-index: 20; pointer-events: none; user-select: none; line-height: 1.5; }
.hud-title { font-size: 10.5px; letter-spacing: .2em; color: #9096a0; }
.hud-state { font-size: 12px; letter-spacing: .16em; color: #9096a0; font-weight: 700; }
#hud-num { color: #6fd0ff; font-weight: 700; font-variant-numeric: tabular-nums; }

/* info / academy panel — dark translucent, feels part of the scene */
#panel { position: fixed; inset: 0; z-index: 30; display: none; background: transparent; cursor: pointer; }
#panel.open { display: block; }
.panel-inner {
  position: fixed; left: 50%; bottom: var(--panel-bottom, 22vh); transform: translateX(-50%);
  width: min(660px, 80vw); background: rgba(18,22,28,.82);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  padding: 20px 24px 15px; color: #eef3f7; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); animation: panelIn .22s ease;
}
.panel-inner p { font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 15.5px; line-height: 1.55; }
.panel-close { display: block; margin-top: 12px; font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #8fa0ac; }
@keyframes panelIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }