:root{
  /* 背景优先顺序：本地 jpg -> 本地 svg -> 渐变 */
  --bg-url: url('https://www.illusory.cn/index/poster.webp'), url('/assets/poster.svg');
  --bg-fallback: radial-gradient(circle at 20% 10%, #0b0b0b 0%, #111 35%, #0a0a0a 60%, #000 100%);
  --white: #ffffff; --black: #000000; --gray: #cfcfcf; --accent: #e5e5e5;
  /* 交互变量 */
  --tiltX: 0deg; --tiltY: 0deg; --bgTX: 0px; --bgTY: 0px; --scanOffset: 0px; --noiseOpacity: .15;
  /* 彩色条带（斜向平分区块） */
  --stripeWidth: 160px; /* 单条带总宽度 */
  --stripeHalf: 80px;   /* 半宽，用于反相 */
  --stripePhase: 0px;   /* 通过 JS 在 0 与 half 之间切换，实现黑白/彩色互换 */
  /* 音乐抽屉尺寸 */
  --musicHandleW: 18px;
  --musicHeight: 86px;
}

*{ box-sizing: border-box; }
html,body{ height: 100%; overflow: hidden; }
body{
  margin: 0; background: var(--bg-fallback); color: var(--white);
  font-family: 'Montserrat','Noto Sans SC', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  line-height: 1.5; position: relative; user-select: none;
}

/* 背景层：海报 + 网点 + 扫描线 + 暗角 + 噪点 + 速度线 + 随机图标 */
.poster{ position: fixed; inset: 0; z-index: -5; pointer-events: none; }
.glitch-bg{
  position: absolute; inset: 0; z-index: -3;
  background-image: var(--bg-url), var(--bg-fallback);
  background-size: cover; background-repeat: no-repeat;
  background-position: calc(50% + var(--bgTX)) calc(50% + var(--bgTY));
  filter: grayscale(100%) contrast(1.28) brightness(0.9);
  transform: translateZ(0); will-change: background-position, transform, filter;
}
.color-reveal{
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: var(--bg-url), var(--bg-fallback);
  background-size: cover; background-repeat: no-repeat;
  background-position: calc(50% + var(--bgTX)) calc(50% + var(--bgTY));
  /* 展现真实颜色（可微调饱和/亮度） */
  filter: saturate(1.2) contrast(1.05) brightness(1.02);
  /* 单条从左上到右下的彩色斜带，较宽 */
  clip-path: polygon(29% 160%, 110% -100%, 35% 70%, 0% -50%);
}
.color-stripes{
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: var(--bg-url), var(--bg-fallback);
  background-size: cover; background-repeat: no-repeat;
  background-position: calc(50% + var(--bgTX)) calc(50% + var(--bgTY));
  filter: saturate(1.15) contrast(1.05) brightness(1.02);
  /* 使用遮罩实现左上→右下的等宽斜向区块，交替显示（白=可见，透明=隐藏） */
  -webkit-mask-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,1) 0 calc(var(--stripePhase) + var(--stripeHalf)),
    rgba(255,255,255,0) calc(var(--stripePhase) + var(--stripeHalf)) calc(var(--stripePhase) + var(--stripeWidth))
  );
  mask-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,1) 0 calc(var(--stripePhase) + var(--stripeHalf)),
    rgba(255,255,255,0) calc(var(--stripePhase) + var(--stripeHalf)) calc(var(--stripePhase) + var(--stripeWidth))
  );
}
.halftone{
  position: absolute; inset: 0; z-index: -2; opacity: .2; mix-blend-mode: multiply;
  background-image: radial-gradient(circle at center, rgba(255,255,255,.2) 0 1px, transparent 1px 100%),
                    radial-gradient(circle at center, rgba(255,255,255,.08) 0 1px, transparent 1px 100%);
  background-size: 3px 3px, 7px 7px;
}
.scanlines{
  position: absolute; inset: 0; z-index: -1; opacity: .12; mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 2px, transparent 2px 4px);
  background-position-y: var(--scanOffset); will-change: background-position;
}
.vignette{ position: absolute; inset: 0; box-shadow: inset 0 0 180px rgba(0,0,0,.9); z-index: 0; }
.noise{
  position: fixed; inset: 0; z-index: -2; pointer-events: none; mix-blend-mode: overlay;
  opacity: var(--noiseOpacity);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 2px);
}
.speedlines{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.speedlines .line{
  position:absolute; top:0; width:2px; height:40vh;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0));
  filter: blur(.4px); opacity:.25; transform: translate3d(0, var(--y, 0vh), 0); will-change: transform;
}
.sprinkles{ position:absolute; inset:0; z-index:-1; pointer-events:none; color:#fff; }
.sprinkle{
  position:absolute; width:clamp(12px, 2.5vw, 28px); height:auto; opacity:.35;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
  transform: translate3d(var(--sx,0), var(--sy,0), 0) rotate(var(--sr,0deg)) scale(var(--ss,1));
}

.stage{ min-height: 100svh; display: grid; place-items: center; padding: 2rem; }

/* 标题大字（无固定循环） */
.kanji{
  display: flex; gap: 1rem; align-items: center; justify-content: center;
  font-family: 'Noto Sans SC','Montserrat',sans-serif; font-weight: 900;
  font-size: clamp(5rem, 14vw, 14rem); letter-spacing: .1em; margin: 0;
  line-height: 1; text-shadow: 0 0 30px rgba(255,255,255,.12);
  -webkit-text-stroke: 2px rgba(255,255,255,.25);
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.5));
}
.kanji span{ position: relative; display: inline-block; color: transparent; }
.kanji span::before, .kanji span::after{
  content: attr(data-char);
  position:absolute; inset:0; pointer-events:none; mix-blend-mode: screen;
  opacity: var(--edgeOpacity, 0);
}
.kanji span::before{ transform: translate(var(--kBeforeX, 2px),0); color: #fffb; filter: blur(.6px); }
.kanji span::after{ transform: translate(var(--kAfterX, -2px),0); color: #00fffbaa; filter: blur(1px); }

/* 破碎切片 */
.kanji .slice{ position:absolute; inset:0; pointer-events:none; }
.kanji .slice::before{
  content: attr(data-char);
  position:absolute; inset:0; color:#fff; -webkit-text-stroke: 2px rgba(255,255,255,.25);
  clip-path: polygon(var(--clip));
  transform: translate(var(--dx,0px), var(--dy,0px)) rotate(var(--rot,0deg));
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.5));
  opacity: 0; transition: opacity .22s ease;
}
.kanji .slice.on::before{ opacity: 1; }
.kanji .slice.edge::before{
  /* 叠加三通道色散：白(正X)、青(负X)、红(正Y) */
  text-shadow:
    var(--edgeShadow, 3px 0 #fffb, -3px 0 #00fffbaa),
    var(--edgeShadowRed, 0 0 transparent);
}

.glyphs{ display:none; }

.hero{ text-align: center; }

.btn{ padding: .9rem 1.4rem; border-radius: .6rem; text-decoration: none; font-weight: 800; letter-spacing: .08em; }
.btn--hollow{ color: var(--white); border: 2px solid var(--white); }
.btn--solid{ color: var(--black); background: var(--white); }

/* 黑白贴图风贴纸 */
.sticker,
.sticker-rand{
  position: fixed; top: 50%; translate: 0 -50%; padding: .6rem 1rem; color: var(--black);
  background: var(--white); border: 2px solid var(--black); box-shadow: 6px 6px 0 var(--black);
  font-weight: 900; text-transform: uppercase; letter-spacing: .12em; user-select: none;
}
.sticker--left{ left: 1.2rem; rotate: -6deg; }
.sticker--right{ right: 1.2rem; rotate: 6deg; }

/* 随机贴纸：不固定位置，4秒渐变消失后换位重现 */
.sticker-rand{
  top: 20%; left: 20%; translate: 0 0; position: fixed; z-index: 999;
  pointer-events: none; opacity: 0; transition: opacity .35s ease-in-out;
  padding: .5rem .9rem; font-size: clamp(.8rem, 1.8vw, 1rem);
  background: #fff; color: #000; overflow: hidden;
  border: 4px solid #000; outline: 2px solid #000; outline-offset: 2px;
  box-shadow: 10px 10px 0 #000; white-space: nowrap; border-radius: 4px;
  /* 破损：用锯齿多边形裁切边缘（兼容性需现代浏览器） */
  clip-path: polygon(
    3% 0%, 12% 2%, 21% 0%, 30% 2%, 39% 0%, 48% 2%, 57% 0%, 66% 2%, 75% 0%, 84% 2%, 93% 0%, 100% 5%,
    98% 14%, 100% 23%, 98% 32%, 100% 41%, 98% 50%, 100% 59%, 98% 68%, 100% 77%, 98% 86%, 100% 95%,
    93% 100%, 84% 98%, 75% 100%, 66% 98%, 57% 100%, 48% 98%, 39% 100%, 30% 98%, 21% 100%, 12% 98%, 3% 100%, 0% 95%,
    2% 86%, 0% 77%, 2% 68%, 0% 59%, 2% 50%, 0% 41%, 2% 32%, 0% 23%, 2% 14%, 0% 5%
  );
}
.sticker-rand::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,.15) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.08) 0 6px, transparent 6px 12px);
  mix-blend-mode: normal; opacity: .25;
}

/* 3D 轻微倾斜 */
.stage{ transform-style: preserve-3d; transform: perspective(1000px) rotateX(var(--tiltY)) rotateY(var(--tiltX)); transition: transform .12s ease-out; }

/* 突发效果（glitch burst）——仅在 JS 随机时刻切换，无固定循环 */
body.burst .glitch-bg{ filter: grayscale(100%) contrast(1.45) brightness(0.95) blur(1px); }
body.burst .kanji span::before{ transform: translate(8px,0); filter: blur(1px); opacity: .85; }
body.burst .kanji span::after{ transform: translate(-8px,0); filter: blur(1.2px); opacity: .85; }
body.burst .scanlines{ opacity: .22; }
body.burst .noise{ opacity: .28; }

/* 响应式 */
@media (max-width: 640px){ .sticker{ display:none; } }

/* 小装饰：转角贴纸撕裂感 */
.hero{ position: relative; text-align: center; padding: 1rem 1rem 2rem; }

/* 音乐抽屉（左下角） */
.music-drawer{
  position: fixed; left: 0; bottom: 0; z-index: 1001; display: flex; align-items: center;
  transform: translateX(calc(-100% + var(--musicHandleW))); transition: transform .28s ease;
  pointer-events: auto;
}
.music-drawer:not(.collapsed){ transform: translateX(0); }
.music-handle{
  appearance: none; border: 2px solid #000; background: #fff; color:#000; cursor: pointer;
  width: var(--musicHandleW); height: var(--musicHeight); border-left: none; box-shadow: 6px 6px 0 #000; position: relative;
  border-radius: 0 10px 10px 0; z-index: 2;
}
.music-handle::before{
  content:""; position:absolute; left: 4px; top: 50%; translate: 0 -50%;
  border-left: 6px solid #000; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.music-drawer:not(.collapsed) .music-handle::before{ transform: rotate(180deg) translateX(-4px); transform-origin: center; }
.music-handle::after{
  /* 向外凸起的小半圆 */
  content:""; position:absolute; right: -6px; top: 50%; translate: 0 -50%;
  width: 10px; height: 28px; background:#fff; border: 2px solid #000; border-left: none;
  border-radius: 0 14px 14px 0; box-shadow: 6px 6px 0 #000;
}
.music-shell{ display:flex; align-items:center; background:#fff; height: var(--musicHeight); box-shadow: 6px 6px 0 #000; border: 2px solid #000; border-right: none; position: relative; width: 330px; }
.music-shell::after{
  /* 外壳上的小箭头饰件（靠近把手一侧） */
  content:""; position:absolute; right: -10px; top: 50%; translate: 0 -50%;
  border-left: 10px solid #000; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.music-frame{ display:block; border: none; background:#fff; }

/* 自定义播放器 */
.music-player{ width:100%; height:100%; display:flex; align-items:center; gap:12px; padding: 10px; color:#000; }
.mp-btn{ appearance:none; outline:none; cursor:pointer; width:44px; height:44px; border:2px solid #000; border-radius:12px; background:#fff; box-shadow: 4px 4px 0 #000; position: relative; flex: 0 0 auto; }
.mp-btn:active{ transform: translate(1px,1px); box-shadow: 3px 3px 0 #000; }
.mp-play::before{
  content:""; position:absolute; left: 16px; top: 50%; translate: 0 -50%;
  width: 0; height: 0; border-left: 14px solid #000; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.mp-play[data-state="playing"]::before{ content:""; width: 0; height: 0; border: none; }
.mp-play[data-state="playing"]::after{
  content:""; position:absolute; left: 14px; top: 12px; width: 16px; height: 20px;
  background: linear-gradient(90deg, #000 0 6px, transparent 6px 10px, #000 10px 16px);
}

.mp-meta{ display:flex; flex-direction: column; justify-content:center; gap:6px; min-width: 0; flex: 1 1 auto; }
.mp-title{ font-weight: 900; font-size: 14px; line-height: 1.1; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-time{ font-size: 12px; color:#222; display:flex; align-items:center; gap:6px; }
.mp-split{ opacity: .6; }

.mp-bar{ position: relative; height: 10px; border: 2px solid #000; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 0 #000; cursor: pointer; user-select: none; }
.mp-bar__track{ position:absolute; inset:0; background: #fff; border-radius: 16px; }
.mp-bar__fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 10px) #000; border-radius: 14px; opacity: .9; }
.mp-bar__knob{ position:absolute; top: 50%; translate: -50% -50%; width: 14px; height: 14px; border-radius: 50%; background:#fff; border: 2px solid #000; box-shadow: 2px 2px 0 #000; }

.mp-vol{ -webkit-appearance: none; appearance:none; width: 86px; height: 32px; background: transparent; flex: 0 0 auto; }
.mp-vol:focus{ outline: none; }
.mp-vol::-webkit-slider-runnable-track{ height: 10px; background:#fff; border:2px solid #000; border-radius: 16px; box-shadow: inset 0 0 0 0 #000; }
.mp-vol::-moz-range-track{ height: 10px; background:#fff; border:2px solid #000; border-radius: 16px; box-shadow: inset 0 0 0 0 #000; }
.mp-vol::-webkit-slider-thumb{ -webkit-appearance:none; width: 14px; height: 14px; background:#fff; border:2px solid #000; border-radius: 50%; margin-top: -3px; box-shadow: 2px 2px 0 #000; }
.mp-vol::-moz-range-thumb{ width: 14px; height: 14px; background:#fff; border:2px solid #000; border-radius: 50%; box-shadow: 2px 2px 0 #000; }

/* 进度条在小屏下不拥挤 */
@media (max-width: 420px){
  .music-shell{ width: 300px; }
  .mp-vol{ width: 70px; }
}