/* 聆听天籁 · 深靛蓝声音游乐场。简单几何及原中空剑龙，无新增图片。 */
:root { --ink: #252442; --cyan: #00bed8; --cream: #fff3d3; --yellow: #ffdb79; --coral: #ff947f; --mint: #a3ded0; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  min-height: 100vh; min-height: 100dvh; overflow: hidden;
  font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  color: var(--cream); background: var(--ink);
  -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,243,211,.14) .7px, transparent .9px);
  background-size: 22px 22px; opacity: .24;
}
.ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; --ambient-energy: 0; }
.ambient-light {
  position: absolute; inset: -18%;
  background: radial-gradient(ellipse at 18% 20%, rgba(113,82,167,.43), transparent 45%),
              radial-gradient(ellipse at 84% 72%, rgba(68,133,135,.32), transparent 40%),
              radial-gradient(ellipse at 12% 92%, rgba(189,100,105,.23), transparent 42%);
  animation: ambient-flow 18s ease-in-out infinite alternate;
}
.ambient-light::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 52%, rgba(255,181,114,.20), transparent 42%);
  opacity: calc(.08 + var(--ambient-energy) * .85); scale: calc(1 + var(--ambient-energy) * .16);
}
.ambient-ring {
  position: absolute; border-radius: 50%; width: clamp(340px, 57vw, 820px); aspect-ratio: 1;
  border: 1px dashed rgba(255,211,150,.22);
  box-shadow: 0 0 0 24px rgba(255,219,121,.018), 0 0 0 56px rgba(255,219,121,.012);
  animation: ambient-orbit 16s ease-in-out infinite alternate;
}
.ambient-ring--upper { left: -27%; top: -27%; }
.ambient-ring--lower { right: -26%; bottom: -30%; border-color: rgba(163,222,208,.22); animation-delay: -8s; }
.ambient-motes { position: absolute; inset: 0; opacity: calc(.75 + var(--ambient-energy) * .25); }
.ambient-motes i {
  position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size);
  border: 1.5px solid var(--coral); border-radius: 50%;
  animation: ambient-mote 7s ease-in-out infinite alternate; animation-delay: var(--delay);
}
.ambient-motes i:nth-child(3n) { border-color: var(--mint); }
.ambient-motes i:nth-child(3n + 1) { border-color: var(--yellow); }
.ambient-motes i:nth-child(4n + 2) { background: var(--coral); border: none; }
.ambient-dino {
  position: absolute; width: clamp(96px, 13vw, 176px); opacity: .42;
  animation: dino-bob 9s ease-in-out infinite alternate;
}
.ambient-dino--one { left: 9%; top: 23%; --tilt: -18deg; }
.ambient-dino--two { right: 7%; top: 63%; --tilt: 18deg; animation-delay: -4s; }
.ambient-dino--three { left: 18%; bottom: 10%; width: clamp(72px, 9vw, 126px); --tilt: 12deg; opacity: .25; animation-delay: -7s; }
.stage { position: relative; z-index: 2; height: 100dvh; display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.button-wrap { position: relative; border-radius: 50%; padding: 14px; --audio-scale: 1; --audio-energy: 0; --audio-glow: 0px; scale: var(--audio-scale); }
.button-wrap::before {
  content: ''; position: absolute; inset: 0; border: 1px solid rgba(0,190,216,.40); border-radius: 50%; pointer-events: none;
}
.button-wrap::after {
  content: ''; position: absolute; inset: -20px; border: 1px dashed rgba(0,190,216,.25); border-radius: 50%; pointer-events: none;
  scale: calc(1 + var(--audio-energy) * .08); opacity: calc(.55 + var(--audio-energy) * .45);
}
.scream-btn {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: clamp(194px, 32vmin, 256px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(167,243,252,.65);
  background: linear-gradient(145deg, rgba(174,244,250,.10), rgba(0,190,216,.04)), rgba(0,190,216,.22); color: #f0fdff;
  backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%);
  box-shadow: inset 0 1px 2px rgba(224,255,255,.30), inset 0 -7px 20px rgba(0,77,97,.16), 0 18px 38px -12px rgba(0,0,0,.32), 0 0 var(--audio-glow) rgba(0,190,216,.22);
  font-family: inherit; font-size: clamp(18px, 2.8vmin, 23px); font-weight: 650;
  letter-spacing: .11em; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.scream-btn__text { display: block; padding-left: .11em; }
.scream-btn:hover { transform: translateY(-3px); }
.scream-btn:active { transform: scale(.97); background-color: rgba(0,190,216,.30); }
.scream-btn:focus-visible { outline: 3px solid var(--mint); outline-offset: 23px; }
.stego, .bubble, .star { position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none; will-change: transform; display: block; }
.stego { height: auto; opacity: .66; }
.bubble { border-radius: 50%; border: 1px solid rgba(163,222,208,.4); background: radial-gradient(circle at 28% 26%, rgba(233,255,244,.35), transparent 32%); }
.star { background: rgba(255,219,121,.47); clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.stego.shocked { filter: drop-shadow(0 0 5px #ffdb79) brightness(1.5); }
.bubble.shocked, .star.shocked { filter: brightness(2); box-shadow: 0 0 8px #ffdb79; }
.lightning-canvas { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 10; pointer-events: none; }
.note { position: fixed; z-index: 9; pointer-events: none; color: var(--yellow); font-size: clamp(18px,4vw,28px); animation: note-fly .85s cubic-bezier(.16,.84,.44,1) forwards; }
.note:nth-of-type(2n) { color: var(--coral); }
@keyframes note-fly { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1) rotate(var(--rot)); } }
@keyframes ambient-flow { from { transform: translate(-3%,-2%) rotate(-5deg); } to { transform: translate(4%,3%) rotate(6deg) scale(1.08); } }
@keyframes ambient-orbit { from { transform: translate(0,0) scale(.97); opacity: .65; } to { transform: translate(14px,18px) scale(1.03); opacity: 1; } }
@keyframes ambient-mote { from { transform: translateY(-7px); opacity: .5; } to { transform: translateY(9px); opacity: 1; } }
@keyframes dino-bob { from { transform: translateY(-6px) rotate(var(--tilt)); } to { transform: translateY(8px) rotate(calc(var(--tilt) + 5deg)); } }
/* 新画面从右侧水平射线向上逆时针扫入；轴心为视口左下角，边缘羽化20度。 */
@property --theme-sweep { syntax: '<angle>'; inherits: false; initial-value: -12deg; }
::view-transition-group(root) { animation: none; }
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) {
  mix-blend-mode: normal; --theme-sweep: -12deg;
  mask-image: conic-gradient(from 0deg at 0% 100%,
    transparent 0deg calc(90deg - var(--theme-sweep) - 10deg),
    #000 calc(90deg - var(--theme-sweep) + 10deg) 180deg,
    transparent 180deg 360deg);
  animation: theme-sweep 2.4s cubic-bezier(.4,0,.2,1) both;
}
@keyframes theme-sweep { to { --theme-sweep: 112deg; } }
/* 白天：暖白底与薄荷、淡紫环境光；结构和行为与夜间一致。 */
:root[data-theme="day"] { --ink: #d5edf6; --cream: #29474c; --yellow: #c89930; --coral: #d87553; --mint: #359f98; }
[data-theme="day"] body::after { background-image: radial-gradient(rgba(48,98,104,.20) .7px, transparent .9px); }
[data-theme="day"] .ambient-light {
  background: radial-gradient(ellipse at 12% 12%, rgba(255,247,211,.85), transparent 38%),
              radial-gradient(ellipse at 84% 72%, rgba(95,197,218,.35), transparent 46%),
              radial-gradient(ellipse at 38% 92%, rgba(236,250,255,.75), transparent 42%);
}
[data-theme="day"] .ambient-light::after { background: radial-gradient(ellipse at 50% 52%, rgba(255,255,236,.55), transparent 42%); }
[data-theme="day"] .ambient-ring { border-color: rgba(57,119,126,.24); box-shadow: 0 0 0 24px rgba(79,151,155,.03), 0 0 0 56px rgba(79,151,155,.02); }
[data-theme="day"] .ambient-dino, [data-theme="day"] .stego { filter: brightness(0) saturate(100%) invert(58%) sepia(65%) saturate(584%) hue-rotate(333deg) brightness(96%) contrast(90%); opacity: .85; }
[data-theme="day"] .ambient-dino--three { opacity: .5; }
[data-theme="day"] .scream-btn {
  background: linear-gradient(145deg, rgba(174,244,250,.13), rgba(0,190,216,.06)), rgba(0,190,216,.50);
  color: #174e59; border-color: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.55), inset 0 -7px 20px rgba(0,99,119,.06), 0 18px 38px -12px rgba(45,104,112,.17), 0 0 var(--audio-glow) rgba(0,190,216,.18);
}
[data-theme="day"] .scream-btn:active { background-color: rgba(0,190,216,.58); }
[data-theme="day"] .scream-btn:focus-visible { outline-color: #1b7c8a; }
[data-theme="day"] .bubble { border-color: rgba(42,130,130,.35); }
[data-theme="day"] .star { background: url('../assets/img/cloud-outline-v2.png') center / contain no-repeat; clip-path: none; filter: drop-shadow(0 1px 1px rgba(59,113,144,.12)); }
[data-theme="day"] .stego.shocked { filter: brightness(0) saturate(100%) invert(58%) sepia(65%) saturate(584%) hue-rotate(333deg) brightness(96%) contrast(90%) drop-shadow(0 0 4px #ffbf70); opacity: 1; }
@media (max-width: 640px) {
  .scream-btn { width: clamp(194px, 51vw, 224px); }
  .ambient-dino--one { left: 5%; top: 25%; }
  .ambient-dino--two { right: 2%; top: 69%; }
}
@media (max-height: 560px) {
  .scream-btn { width: 164px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button-wrap { scale: 1; }
}
/* 常驻背景更淡，动态前景保留清晰轮廓。 */
.ambient-sky { position:absolute; left:var(--x); top:var(--y); width:var(--size); height:var(--size); transform:rotate(var(--tilt)); background:rgba(255,219,121,.20); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.ambient-motes { opacity:.36; }
.ambient-dino { opacity:.25; }
.ambient-dino--three { opacity:.18; }
[data-theme="day"] .ambient-dino { opacity:.34; }
[data-theme="day"] .ambient-dino--three { opacity:.23; }
[data-theme="day"] .ambient-sky { background:url('../assets/img/cloud-outline-v2.png') center/contain no-repeat; clip-path:none; opacity:.38; }
[data-theme="day"] .star { opacity:.9; filter:none; }
/* 浅蓝天空中的云使用蓝紫轮廓，避免白线融入背景。 */
[data-theme="day"] .star, [data-theme="day"] .ambient-sky { filter:brightness(0) saturate(100%) invert(50%) sepia(18%) saturate(1100%) hue-rotate(182deg) brightness(96%) contrast(88%); }
[data-theme="day"] .star { opacity:1; }
[data-theme="day"] .ambient-sky { opacity:.58; }