:root {
  --wall: #d9d4cc; --base: #bdb6ab; --tile: #4b4a63; --beam: #5b6a8a; --plaque: #2f3a5c; --gold: #d8b25a; --wood: #6b4a36;
  --bg: #f3ede2; --ink: #23232e; --muted: #555566;
  font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { min-height: 100vh; padding-bottom: 64px; }
[hidden] { display: none !important; }
.btn { min-width: 44px; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--beam); background: #fff; color: var(--plaque); font: inherit; font-size: 16px; cursor: pointer; }
.btn.primary { background: var(--plaque); color: #fff; border-color: var(--plaque); }
.btn:disabled { opacity: .55; cursor: default; }
.btn:focus-visible, .linklike:focus-visible, .seat-nav button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.linklike { background: none; border: 0; color: var(--plaque); text-decoration: underline; font: inherit; min-height: 44px; cursor: pointer; padding: 0 6px; }

.notes { position: fixed; z-index: 30; left: 8px; bottom: 52px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 6px 10px; border-radius: 10px; background: rgba(47, 58, 92, .92); color: #f2efe8; font-size: 13px; max-width: calc(100vw - 16px); pointer-events: none; }
.sample-tag { background: var(--gold); color: #23232e; border-radius: 6px; padding: 1px 6px; font-weight: 700; }
.sample-tag:empty { display: none; }

.hero { padding: 28px 20px 8px; max-width: 1100px; margin: 0 auto; }
.hero h1 { margin: 0 0 12px; font-size: clamp(22px, 5vw, 32px); }
.enter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.hint { color: var(--muted); font-size: 14px; }
.status { margin: 14px 0 0; padding: 10px 14px; border-radius: 8px; background: #fff3d6; color: #5a4300; font-weight: 700; }
.list { max-width: 1100px; margin: 0 auto; padding: 8px 20px 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.island { background: #fffaf2; border: 1px solid #e3dccf; border-radius: 12px; padding: 10px 14px; }
.island h3 { margin: 4px 0 8px; font-size: 16px; color: var(--plaque); }
.island ul { list-style: none; margin: 0; padding: 0; }
.person { padding: 8px 0; border-top: 1px dashed #e3dccf; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.person:first-child { border-top: 0; }
.pname { font-weight: 700; font-size: 16px; }
.ptitle, .pweek { font-size: 14px; color: var(--muted); }
.dims { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.dim { display: inline-flex; align-items: center; gap: 3px; }
.ico { display: inline-block; vertical-align: middle; flex: none; }
.halo-ico { background: var(--plaque); border-radius: 50%; }

.stage { position: fixed; inset: 0; z-index: 10; background: #e9e3d8; touch-action: none; }
.stage canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
.stage-bar { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 8px; right: 8px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.stage-bar > * { pointer-events: auto; }
.zoom-btns { display: flex; gap: 6px; }
.seat-nav { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; }
.seat-nav:focus-within { width: auto; height: auto; overflow: visible; top: 60px; left: 8px; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; max-width: 60vw; }
.seat-nav button { min-width: 44px; min-height: 44px; font: inherit; background: #fff; border: 1px solid var(--beam); border-radius: 8px; padding: 0 10px; }
.debug { position: absolute; left: 8px; top: 60px; padding: 6px 8px; background: rgba(0,0,0,.7); color: #9f9; font: 12px/1.4 monospace; white-space: pre; border-radius: 6px; pointer-events: none; }
body.in3d { overflow: hidden; }
body.in3d #listView { display: none; }

.card { position: fixed; z-index: 40; top: 64px; right: 12px; width: 360px; max-height: calc(100vh - 140px); overflow: auto; background: #fffaf2; border: 2px solid var(--gold); border-radius: 14px; padding: 14px 16px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.card .grip { display: none; }
.card .close { position: absolute; top: 6px; right: 6px; background: none; border: 0; font-size: 20px; min-width: 44px; min-height: 44px; cursor: pointer; color: var(--plaque); }
.card-head { display: flex; align-items: center; gap: 10px; padding-right: 40px; }
.card-head h2 { margin: 0; font-size: 20px; }
.card-sub { color: var(--muted); font-size: 14px; margin: 4px 0 10px; }
.card-row { display: grid; grid-template-columns: 22px 1fr auto; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; padding: 6px 0; border-top: 1px dashed #e3dccf; }
.card-row .bar { grid-column: 2 / 4; }
.card-row .lab { font-size: 14px; }
.card-row .num { font-size: 14px; color: var(--muted); }
.bar { position: relative; height: 8px; border-radius: 4px; background: #e3dccf; overflow: hidden; }
.bar > span { position: absolute; top: 0; bottom: 0; }
.bar .base { left: 0; background: #b08d4a; }
.bar .wk { background: #f0c23c; }
.card-foot { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

.footer { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 0 12px env(safe-area-inset-bottom); background: rgba(243, 237, 226, .96); border-top: 1px solid #e3dccf; font-size: 13px; color: var(--muted); }
.notices { width: min(760px, 94vw); max-height: 86vh; border: 2px solid var(--gold); border-radius: 12px; padding: 12px; }
.notices pre { white-space: pre-wrap; font-size: 12px; margin: 0; max-height: 74vh; overflow: auto; }
.notices form { text-align: right; }

@media (max-width: 640px) {
  .notes { bottom: 84px; font-size: 12px; }
  .card { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 60vh; border-radius: 16px 16px 0 0; border-width: 2px 0 0; padding-top: 22px; padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .card .grip { display: block; position: absolute; top: 0; left: 0; right: 0; height: 26px; touch-action: none; cursor: grab; }
  .card .grip::after { content: ""; position: absolute; top: 8px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: #c9c0b0; }
  .list { padding: 8px 12px 120px; }
}

/* 详情卡：本周亮段载入时闪一次（0.8 秒）；减少动态效果时不闪 */
.bar .wk { animation: wkflash 0.8s ease-in-out 1; }
@keyframes wkflash { 50% { background: #fff6d8; box-shadow: 0 0 6px #f0c23c; } }
@media (prefers-reduced-motion: reduce) { .bar .wk { animation: none; } }