:root {
  --bg: #f3eee5; --ink: #16325c; --muted: #6b7c99; --card: #fff;
  --line: #e4eaf2; --teal: #1aa6a0; --waiting: #e08a2c; --idle: #8a93a3;
}
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font-family: Inter, "Segoe UI", system-ui, sans-serif; }
.top {
  display:flex; justify-content:space-between; align-items:flex-end;
  max-width:1200px; margin:0 auto; padding:14px 16px 6px;
}
h1 { margin:0; font-size:1.25rem; font-weight:800; }
.sub { color:var(--muted); font-size:.82rem; margin-top:2px; }
.meta { font-size:.8rem; color:var(--muted); font-weight:650; }
.live-card {
  max-width:420px; margin:0 16px 8px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:10px 12px; box-shadow:0 10px 28px rgba(22,50,92,.08);
}
.live-card[hidden] { display:none !important; }
.live-card .kicker { font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); }
.live-card .line { margin-top:3px; font-size:.92rem; font-weight:650; }
.stage-wrap { padding:4px 12px 10px; display:flex; justify-content:center; }
.stage {
  position:relative; width:min(1200px,100%); aspect-ratio:16/9;
  border-radius:16px; overflow:hidden; background:#1a1a1a;
  box-shadow:0 18px 50px rgba(22,50,92,.14);
}
.stage img.scene {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .7s ease; pointer-events:none; user-select:none;
}
.stage img.scene.show { opacity:1; }
.people { position:absolute; inset:0; z-index:5; }
.person {
  position:absolute; width:11%;
  transform: translate(-50%, -88%);
  cursor:pointer; border:0; background:transparent; padding:0;
  z-index:6;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.35));
}
.person img.char {
  width:100%; height:auto; display:block;
  pointer-events:none;
  transform-origin: 50% 90%;
  border-radius: 8px;
}
.person .namechip {
  position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
  font-size:.58rem; font-weight:800; color:#fff;
  background:rgba(22,50,92,.75); padding:2px 6px; border-radius:6px;
  white-space:nowrap; pointer-events:none; letter-spacing:.02em;
}
.person.idle img.char { opacity: .92; }
.person.working img.char { opacity: 1; }
.person.waiting img.char { opacity: 1; outline: 2px solid rgba(224,138,44,.65); outline-offset: 1px; border-radius: 8px; }
.person.working .namechip { background: rgba(26,166,160,.9); }
.person.waiting .namechip { background: rgba(224,138,44,.92); }

.legend {
  max-width:1200px; margin:0 auto 8px; padding:0 16px;
  display:flex; gap:14px; flex-wrap:wrap; font-size:.78rem; font-weight:600;
}
.legend .row { display:flex; align-items:center; gap:7px; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot.working { background:var(--teal); }
.dot.waiting { background:var(--waiting); }
.dot.idle { background:var(--idle); }
.panel {
  position:fixed; right:14px; bottom:14px; z-index:30; width:min(320px, calc(100vw - 28px));
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px;
  box-shadow:0 16px 40px rgba(22,50,92,.14); display:none;
}
.panel.open { display:block; }
.panel .close { position:absolute; right:10px; top:8px; border:0; background:transparent; font-size:1.2rem; cursor:pointer; color:var(--muted); }
.panel-row { display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.avatar { width:56px; height:56px; border-radius:12px; object-fit:cover; border:1px solid var(--line); }
.panel .name { margin:0; font-size:1.05rem; font-weight:800; }
.panel .role { color:var(--muted); font-size:.8rem; }
.badge {
  display:inline-block; font-size:.65rem; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; padding:3px 8px; border-radius:999px; background:#eef2f6; color:var(--idle);
}
.badge.working { background:#e5f7f5; color:var(--teal); }
.badge.waiting { background:#fff1e0; color:var(--waiting); }
.panel .task { margin-top:10px; font-size:.88rem; }
.panel .task label { display:block; font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:3px; font-weight:700; }
footer { max-width:1200px; margin:0 auto 16px; padding:0 16px; color:var(--muted); font-size:.7rem; }