:root { color-scheme: dark; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; color: #fff8e8; background: #18212b; }
@font-face { font-family: "海边手书"; src: url("assets/shore-handwriting.ttf") format("truetype"); font-display: swap; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
[hidden] { display: none !important; }
#experience { position: relative; width: 100%; height: 100%; isolation: isolate; }
.poster, #scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster { object-fit: cover; z-index: -2; }
#scene { z-index: -1; opacity: 0; }
.is-ready #scene { opacity: 1; }
.place-mark { position: absolute; z-index: 2; top: 5.5%; left: 4%; display: flex; flex-direction: column; align-items: center; gap: 16px; color: #fff8e8; pointer-events: none; text-shadow: 0 2px 10px rgba(31, 24, 24, .65); }
.place-mark span:first-child { writing-mode: vertical-rl; font-family: "海边手书", "STKaiti", serif; font-size: clamp(25px, 2.3vw, 35px); letter-spacing: .18em; }
.place-mark span:last-child { writing-mode: vertical-rl; text-orientation: upright; font-size: 11px; line-height: 1; letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.scene-copy { position: absolute; z-index: 2; left: 6.8%; top: 60%; max-width: 33%; pointer-events: none; color: #fff8e8; text-shadow: 0 2px 10px rgba(31, 24, 24, .8), 0 8px 30px rgba(31, 24, 24, .35); }
.scene-copy h1 { font-family: "海边手书", "STKaiti", serif; font-size: clamp(38px, 4.7vw, 72px); font-weight: 400; line-height: 1.18; margin: 0; }
.scene-copy p { font-size: clamp(12px, 1.05vw, 16px); line-height: 1.8; margin: 22px 0 0; letter-spacing: .06em; }
.character-hit { position: absolute; z-index: 2; left: 37%; top: 18%; width: 55%; height: 82%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.character-hit:disabled { cursor: default; }
.character-hit:focus-visible { outline: 2px dashed #fff0b2; outline-offset: -28px; border-radius: 45% 38% 18% 30%; }
.character-cue { position: absolute; left: 60%; top: 52.44%; width: 44px; height: 44px; transform: translate(-50%, -50%); color: #fff8e8; }
.character-cue::before, .character-cue::after { content: ""; position: absolute; border-radius: 50%; animation: character-breathe 2.8s ease-in-out infinite; }
.character-cue::before { inset: 15px; background: currentColor; box-shadow: 0 2px 7px rgba(24, 33, 43, .35); }
.character-cue::after { inset: 7px; border: 1px solid currentColor; }
.character-hit:disabled .character-cue { visibility: hidden; }
.character-hit:disabled .character-cue::before, .character-hit:disabled .character-cue::after,
.is-background .character-cue::before, .is-background .character-cue::after { animation-play-state: paused; }
.character-cue:hover::before, .character-cue:hover::after,
.character-hit:focus-visible .character-cue::before, .character-hit:focus-visible .character-cue::after { animation-play-state: paused; opacity: 1; }
.character-hit:active .character-cue { transform: translate(-50%, -50%) scale(.92); }
@keyframes character-breathe { 0%, 100% { transform: scale(.86); opacity: .55; } 50% { transform: scale(1.08); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .character-cue::before, .character-cue::after { animation: none; opacity: .85; } }
.loading { position: absolute; inset: 0; pointer-events: none; }
.is-ready .loading { display: none; }
.error-panel { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; flex-direction: column; background: rgba(15, 22, 32, .86); }
.error-panel p { max-width: 38ch; text-align: center; line-height: 1.7; padding: 0 20px; }
.error-panel button { font: inherit; background: #fff8e8; color: #27303b; padding: 11px 23px; border: 0; border-radius: 4px; cursor: pointer; }
.error-panel button:focus-visible { outline: 2px solid #fff0b2; outline-offset: 5px; }
.media-source { position: fixed; width: 1px; height: 1px; left: -10px; top: -10px; overflow: hidden; pointer-events: none; }
.media-source video { width: 1px; height: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 备案信息：固定在页面底部中央，ICP 备案与公安联网备案共用一行。 */
.site-legal{
  position:fixed;
  left:50%;
  bottom:max(14px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:30;
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(17,24,32,.34);
  color:rgba(255,248,232,.8);
  font-family:ui-sans-serif,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:11.5px;
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
  text-shadow:0 1px 4px rgba(24,33,43,.5);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  backdrop-filter:blur(10px) saturate(1.1);
  box-sizing:border-box;
}
.site-legal a{color:inherit;text-decoration:none;padding:2px 0}
.site-legal a:hover,.site-legal a:focus-visible{color:#fff8e8;text-decoration:underline;text-underline-offset:2px}
.site-legal a:focus-visible{outline:2px solid rgba(255,248,232,.7);outline-offset:3px;border-radius:4px}
.site-legal-dot{opacity:.5}
@media (max-width:520px){
  .site-legal{bottom:calc(52px + env(safe-area-inset-bottom));font-size:11px;gap:8px;padding:4px 10px}
}
@media print{.site-legal{position:static;background:none;border:0;color:#000;transform:none}}