/* =================================================================
 * 回声墙：全屏沉浸式 · 一次一句 · 纯手动
 * ================================================================= */
.wall-body{
  margin:0;background:#0a0f15;color:#d7e2ec;
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;
  overflow:hidden;
}
.wall-body a{color:#9fc6de}

.wall{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:
    radial-gradient(1100px 560px at 50% 42%,rgba(102,158,190,.14),rgba(102,158,190,0) 70%),
    #0a0f15;
}

/* ---------- 背景残句：翻过的句子留在墙上 ---------- */
.wall-dust{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.dust{
  position:absolute;white-space:nowrap;user-select:none;
  font-size:var(--fs,14px);line-height:1.4;letter-spacing:.02em;
  color:#9dbdd4;opacity:0;transform:rotate(var(--r,0deg));
  transition:opacity 1.1s ease;
  text-shadow:0 0 22px rgba(140,190,220,.12);
}
.dust.on{opacity:var(--op,.1)}
@media(prefers-reduced-motion:reduce){
  .dust{transition:none;transform:none}
}

/* ---------- 顶部 ---------- */
.wall-top{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 26px;
}
.wall-back{
  font-size:13px;color:#7c93a6;text-decoration:none;padding:6px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.09);transition:.18s;
}
.wall-back:hover{color:#e6f0f7;background:rgba(255,255,255,.07);text-decoration:none}
.wall-title{
  font-size:12px;letter-spacing:.34em;color:#6d8296;text-align:center;flex:1;
}
.wall-title span{
  display:block;font-size:9.5px;letter-spacing:.24em;color:#4c5f6f;margin-top:2px;
}
.wall-stat{font-size:11.5px;color:#55697b;text-align:right;font-variant-numeric:tabular-nums;min-width:96px}

/* ---------- 舞台 ---------- */
.wall-stage{
  position:relative;z-index:2;flex:1;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 22px;text-align:center;
  outline:none;
}
.wall-stage:focus-visible{box-shadow:inset 0 0 0 1px rgba(159,198,222,.28)}
.wall-line{
  margin:0;max-width:920px;min-height:1.7em;
  font-size:clamp(23px,4.4vw,46px);line-height:1.62;font-weight:600;letter-spacing:.01em;
  color:#e4eef5;overflow-wrap:anywhere;
}
.wall-line .ch{
  display:inline-block;white-space:pre;will-change:transform,opacity,filter;
  opacity:0;transform:translateY(.6em) scale(.92);filter:blur(11px);
  animation:wi .8s cubic-bezier(.18,.75,.24,1) forwards;
  animation-delay:calc(var(--i,0) * 38ms);
}
@keyframes wi{
  0%{opacity:0;transform:translateY(.6em) scale(.92);filter:blur(11px)}
  55%{opacity:1}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
.wall-stage.out .wall-line .ch{
  animation:wo .5s cubic-bezier(.5,.02,.7,.35) forwards;
  animation-delay:calc(var(--i,0) * 14ms);
}
@keyframes wo{
  0%{opacity:1;transform:translate(0,0) scale(1);filter:blur(0)}
  100%{
    opacity:0;
    transform:translate(calc(var(--dx,0) * 26px),-.5em) scale(1.07);
    filter:blur(9px);
  }
}
/* ---------- 底部 ---------- */
.wall-foot{position:relative;z-index:2;padding:0 26px 22px;text-align:center}
.wall-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.wbtn{
  font-family:inherit;font-size:12.5px;line-height:1;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:#c2d2de;border-radius:999px;padding:8px 16px;transition:.18s;
}
.wbtn:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22)}
.wall-hint{font-size:12px;color:#55697b;letter-spacing:.06em}
.wall-count{
  margin-top:14px;font-size:11.5px;color:#4e6070;font-variant-numeric:tabular-nums;letter-spacing:.1em;
}
.wall-note{
  margin:16px auto 0;max-width:720px;font-size:12.5px;line-height:1.9;color:#6b8092;
}
.wall-note b{color:#a2b8c8;font-weight:600}

@media(max-width:640px){
  .wall-top{padding:14px 16px}
  .wall-title{letter-spacing:.24em;font-size:11px}
  .wall-stat{min-width:0;font-size:10.5px}
  .wall-stage{padding:16px 16px}
  .wall-line{line-height:1.66}
  .wall-line .ch{animation-delay:calc(var(--i,0) * 30ms)}
  .wall-foot{padding:0 16px 18px}
  .wall-hint{display:none}
  .wall-ctrl{gap:10px}
  .wbtn{flex:1;max-width:150px;padding:11px 14px}   /* 触控目标 ≥40px */
  .wall-note{font-size:12px;margin-top:14px}
}

/* 减少动态效果：只淡入淡出，不位移不模糊 */
@media(prefers-reduced-motion:reduce){
  .wall-line .ch{
    animation:wf .45s ease forwards!important;animation-delay:0s!important;
    transform:none!important;filter:none!important;
  }
  .wall-stage.out .wall-line .ch{animation:wg .3s ease forwards!important;animation-delay:0s!important}
  .dust{opacity:var(--op,.1)}
}
@keyframes wf{from{opacity:0}to{opacity:1}}
@keyframes wg{from{opacity:1}to{opacity:0}}

/* =================================================================
 * 投稿：浮动按钮 + 投稿面板
 * ================================================================= */
.submit-fab{
  position:fixed;right:22px;bottom:22px;z-index:20;
  font-family:inherit;font-size:14px;font-weight:600;letter-spacing:.04em;cursor:pointer;
  color:#06121b;background:linear-gradient(135deg,#7fd1ee,#5fb3d6);
  border:none;border-radius:999px;padding:12px 20px;
  box-shadow:0 8px 26px rgba(40,120,160,.42);transition:transform .18s,box-shadow .18s;
}
.submit-fab:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(40,120,160,.55)}
.submit-fab:active{transform:translateY(0)}

.submit-mask{
  position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(5,9,13,.62);backdrop-filter:blur(3px);
}
.submit-mask[hidden]{display:none}

.submit-panel{
  position:relative;width:min(440px,100%);
  background:#101820;border:1px solid rgba(255,255,255,.1);border-radius:18px;
  padding:24px 22px 18px;box-shadow:0 24px 70px rgba(0,0,0,.5);
  animation:spIn .22s cubic-bezier(.18,.75,.24,1) both;
}
@keyframes spIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.submit-x{
  position:absolute;top:12px;right:14px;width:30px;height:30px;border:none;cursor:pointer;
  background:transparent;color:#6f8497;font-size:22px;line-height:1;border-radius:50%;transition:.16s;
}
.submit-x:hover{color:#e6f0f7;background:rgba(255,255,255,.08)}
.submit-h{margin:0 0 6px;font-size:17px;font-weight:600;color:#e4eef5;letter-spacing:.02em}
.submit-sub{margin:0 0 14px;font-size:12.5px;line-height:1.7;color:#7d93a5}
.submit-ta{
  width:100%;box-sizing:border-box;resize:vertical;font-family:inherit;font-size:15px;line-height:1.7;
  color:#e4eef5;background:#0a1118;border:1px solid rgba(255,255,255,.12);border-radius:12px;
  padding:12px 13px;outline:none;transition:.16s;
}
.submit-ta:focus{border-color:rgba(127,209,238,.5);box-shadow:0 0 0 3px rgba(127,209,238,.14)}
.submit-ta::placeholder{color:#4f6373}
.submit-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.submit-count{font-size:12px;color:#5a6e7e;font-variant-numeric:tabular-nums}
.submit-go{
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  color:#06121b;background:linear-gradient(135deg,#7fd1ee,#5fb3d6);
  border:none;border-radius:999px;padding:10px 26px;transition:transform .16s,opacity .16s;
}
.submit-go:hover{transform:translateY(-1px)}
.submit-go:disabled{opacity:.5;cursor:default;transform:none}
.submit-status{margin:12px 0 0;font-size:12.5px;line-height:1.6;padding:9px 12px;border-radius:10px}
.submit-status[hidden]{display:none}
.submit-ok{background:rgba(110,200,150,.14);color:#a9e6c4}
.submit-no{background:rgba(220,140,140,.14);color:#f0bcbc}
.submit-wait{background:rgba(220,190,120,.14);color:#ecd9a6}
.submit-note{margin:12px 0 0;font-size:11.5px;line-height:1.7;color:#5f7384}

@media(max-width:640px){
  .submit-fab{right:14px;bottom:14px;padding:11px 17px;font-size:13px}
  .submit-panel{padding:20px 16px 16px}
}