/* ============================================================
   词云留言墙 · 大屏样式
   方向：深空氛围舞台 —— 极光渐变 + 星尘颗粒 + 玻璃质感词块
   ============================================================ */
:root{
  --bg:#0b1020;
  --ink:#eaf4ff;
  --accent:#ffd166;          /* 唯一强调色：头名词与点睛元素 */
  --blue:#4f8cff;
  --hairline:rgba(234,244,255,.10);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
html,body{margin:0;height:100%;overflow:hidden;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  background:var(--bg);color:var(--ink);
  user-select:none;-webkit-user-select:none;}   /* 大屏展示页禁止选中：点空白不会选出蓝底文字 */
#msg{user-select:text;-webkit-user-select:text;} /* 留言输入框仍可正常选择 */
body.has-img{background-size:cover;background-position:center;background-repeat:no-repeat;}
/* 背景图暗色遮罩：压低图片亮度，保证词云文字可读（盖在图上、处于所有内容层之下） */
body.has-img::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:rgba(6,10,20,.45);}

/* —— 氛围层：极光渐变（压在背景色之上、画布之下），缓慢流动制造深空舞台感 —— */
.atmo{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60rem 42rem at 12% -10%, rgba(79,140,255,.20), transparent 60%),
    radial-gradient(52rem 40rem at 100% 0%,  rgba(140,96,255,.15), transparent 55%),
    radial-gradient(50rem 36rem at 50% 115%, rgba(38,208,206,.12), transparent 55%);
  background-size:150% 150%,140% 140%,160% 160%;
  background-position:0% 0%,100% 0%,50% 100%;
  animation:atmoFlow 26s ease-in-out infinite;}
@keyframes atmoFlow{
  0%  {background-position:0% 0%,100% 0%,50% 100%;}
  50% {background-position:8% 6%,94% 7%,44% 94%;}
  100%{background-position:0% 0%,100% 0%,50% 100%;}}
/* —— 颗粒层：细噪点，去掉"纯色平铺"的廉价感 —— */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

#wall{position:fixed;inset:0;display:block;z-index:2;}

/* —— 标题：左侧金色刻度条 + 克制字距 —— */
#wc-title{position:fixed;top:26px;left:34px;z-index:3;color:var(--ink);
  font-size:28px;font-weight:700;letter-spacing:.02em;
  text-shadow:0 2px 14px rgba(0,0,0,.55);pointer-events:none;
  user-select:none;-webkit-user-select:none;
  display:flex;align-items:center;gap:14px;max-width:70%;}
#wc-title::before{content:'';width:6px;height:30px;border-radius:3px;flex:none;
  background:linear-gradient(180deg,var(--accent),var(--blue));}

/* —— 二维码：可拖动、可缩放，右下角悬停显示缩放标记 —— */
#qr{position:fixed;left:26px;bottom:26px;z-index:4;background:rgba(255,255,255,.96);
  padding:8px;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.45);
  cursor:move;user-select:none;touch-action:none;width:126px;}
#qrbox canvas,#qrbox img{display:block;width:100%;height:auto;border-radius:6px;}
#qr .tip{margin-top:4px;font-size:12px;color:#333;text-align:center;letter-spacing:.08em;}
#rz{position:absolute;right:0;bottom:0;width:20px;height:20px;cursor:nwse-resize;
  opacity:.55;transition:opacity .15s;}   /* 常显（触屏没有 hover），悬停加深 */
#rz::before{content:'';position:absolute;right:2px;bottom:2px;width:0;height:0;
  border-bottom:12px solid var(--blue);border-left:12px solid transparent;border-radius:2px;}
#qr:hover #rz{opacity:1;}
#qrmin{position:absolute;left:2px;bottom:2px;width:auto;min-width:24px;padding:0 4px;height:16px;line-height:15px;cursor:pointer;
  color:#999;font-size:11px;text-align:center;opacity:.7;transition:opacity .15s;user-select:none;}
#qr:hover #qrmin{opacity:1;}
#qrmin:hover{color:#333;}
#qrshow{position:fixed;left:26px;bottom:26px;z-index:4;display:none;width:42px;height:42px;
  border-radius:10px;background:rgba(255,255,255,.92);border:none;cursor:pointer;
  font-size:20px;color:#333;box-shadow:0 6px 20px rgba(0,0,0,.4);}
#qrshow:hover{background:#fff;}

/* —— 底部固定表情栏 —— */
#emoji-bar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:5;
  display:flex;gap:6px;background:rgba(15,22,42,.72);border:1px solid var(--hairline);
  border-radius:999px;padding:6px 12px;backdrop-filter:blur(8px);}
#emoji-bar .emoji{background:transparent;border:none;font-size:24px;padding:4px 10px;
  cursor:pointer;transition:transform .15s var(--ease-out);}
#emoji-bar .emoji:hover{transform:scale(1.25);}
#emoji-bar .emoji:active{transform:scale(.9);}

/* —— 发布后中央闪动特效（位置/字号/透明度由 JS 内联驱动：中央放大 → 飞向落位融入） —— */
#flash{position:fixed;left:50%;top:50%;z-index:8;pointer-events:none;color:#fff;
  font-weight:700;text-shadow:0 0 34px rgba(255,209,102,.85),0 4px 18px rgba(0,0,0,.6);
  opacity:0;white-space:nowrap;transform:translate(-50%,-50%);}

/* —— 发布框操作提示 —— */
.hint{margin-top:8px;font-size:11px;color:rgba(234,244,255,.42);text-align:center;}

/* —— 右下角折叠发布框 + 全屏按钮 —— */
#fab{position:fixed;right:26px;bottom:26px;z-index:5;height:46px;padding:0 20px 0 15px;border-radius:999px;
  background:var(--blue);color:#fff;border:none;cursor:pointer;
  box-shadow:0 8px 26px rgba(79,140,255,.4);display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;letter-spacing:.06em;
  touch-action:none;user-select:none;-webkit-user-select:none;
  transition:transform .16s var(--ease-out),background .16s,box-shadow .15s;}
#fab.dragging{cursor:grabbing;box-shadow:0 0 0 3px rgba(255,209,102,.55),0 8px 26px rgba(79,140,255,.4);}
#fab svg{display:block;}
#fab:hover{background:#3d7bef;transform:translateY(-2px);}
#fsbtn{position:fixed;right:26px;top:26px;z-index:5;width:50px;height:50px;border-radius:50%;
  background:rgba(15,22,42,.72);border:1px solid var(--hairline);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.35);backdrop-filter:blur(8px);
  transition:transform .16s var(--ease-out),background .16s;}
#fsbtn svg{display:block;}
#fsbtn:hover{background:rgba(15,22,42,.92);transform:translateY(-2px);}

/* —— 背景音乐：全屏按钮旁一颗小圆钮，默认静默；播放中金色呼吸；▾ 选曲试听 —— */
#music-wrap{position:fixed;right:86px;top:26px;z-index:5;}
#music-btn{width:42px;height:42px;border-radius:50%;background:rgba(15,22,42,.72);
  border:1px solid var(--hairline);color:var(--ink);font-size:19px;line-height:1;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.35);backdrop-filter:blur(8px);
  transition:background .15s,transform .15s;display:block;padding:0;}
#music-btn:hover{background:rgba(15,22,42,.92);transform:translateY(-2px);}
#music-btn:active{transform:scale(.94);}
#music-btn.playing{background:rgba(255,209,102,.20);border-color:var(--accent);color:var(--accent);
  animation:musicPulse 1.8s ease-in-out infinite;}
@keyframes musicPulse{
  0%,100%{box-shadow:0 0 0 rgba(255,209,102,0);}
  50%{box-shadow:0 0 18px rgba(255,209,102,.6);}
}
#music-mini{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;
  background:rgba(15,22,42,.92);border:1px solid var(--hairline);color:rgba(234,244,255,.75);
  font-size:9px;line-height:1;cursor:pointer;padding:0;}
#music-mini:hover{color:#fff;}
#music-list{position:absolute;right:0;top:50px;min-width:136px;
  background:rgba(15,22,42,.94);border:1px solid var(--hairline);border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);backdrop-filter:blur(8px);display:none;overflow:hidden;}
#music-list.open{display:block;animation:pop .18s var(--ease-out);}
#music-list .mrow{padding:10px 14px;font-size:13px;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;gap:8px;transition:background .12s;}
#music-list .mrow:hover{background:rgba(255,255,255,.08);}
#music-list .mrow.on{color:var(--accent);font-weight:700;}
#music-list .mrow .mi{font-size:11px;width:13px;color:var(--accent);visibility:hidden;}
#music-list .mrow.on .mi{visibility:visible;}
/* 音量调节行 */
#music-list .mvolrow{border-top:1px solid var(--hairline);margin-top:4px;padding-top:10px;cursor:default;}
#music-list .mvolrow:hover{background:transparent;}
#music-list .mvolrow .mi{visibility:visible;}
#music-vol{flex:1;min-width:70px;height:4px;accent-color:var(--accent);cursor:pointer;}
#music-list .mvolrow b{font-size:11px;color:var(--accent);min-width:22px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}
#composer{position:fixed;right:26px;bottom:96px;z-index:5;width:330px;max-width:calc(100vw - 32px);
  background:rgba(15,22,42,.92);border:1px solid var(--hairline);border-radius:16px;
  padding:14px;box-sizing:border-box;display:none;backdrop-filter:blur(8px);
  box-shadow:0 16px 44px rgba(0,0,0,.5);}
#composer.open{display:block;animation:pop .22s var(--ease-out);}
/* 留言框右上角关闭按钮 */
#cclose{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.10);border:1px solid var(--hairline);color:var(--ink);
  font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s;}
#cclose:hover{background:rgba(255,255,255,.22);}

/* —— 表情栏：收起图标（长按拖动/点按展开） + 展开面板 —— */
#emoji-bar .barbtn{background:transparent;border:none;color:rgba(234,244,255,.55);
  font-size:15px;cursor:pointer;padding:4px 3px;line-height:1;}
#emoji-bar .barbtn:hover{color:#fff;}
#barshow{position:fixed;z-index:5;display:flex;width:46px;height:46px;border-radius:999px;
  background:rgba(15,22,42,.72);border:1px solid var(--hairline);color:var(--ink);
  font-size:20px;cursor:pointer;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.35);backdrop-filter:blur(8px);
  touch-action:none;user-select:none;-webkit-user-select:none;
  transition:background .15s,box-shadow .15s;}
#barshow:hover{background:rgba(15,22,42,.92);}
#barshow.active{background:rgba(15,22,42,.92);border-color:var(--blue);}
#barshow.dragging{cursor:grabbing;box-shadow:0 0 0 3px rgba(255,209,102,.55),0 6px 20px rgba(0,0,0,.35);}
#emoji-bar.openpop{animation:pop .22s var(--ease-out);}

/* —— 手机端适配：表情栏不挡发送按钮/二维码，控件缩小 —— */
@media (max-width: 768px){
  #fab{right:14px;bottom:18px;height:42px;padding:0 15px 0 12px;}
  #fab svg{width:16px;height:16px;}
  #fab span{font-size:13px;}
  #fsbtn{width:42px;height:42px;right:14px;top:18px;}
  #music-wrap{right:66px;top:18px;}
  #music-btn{width:40px;height:40px;font-size:17px;}
  #qrshow{left:14px;bottom:84px;width:40px;height:40px;font-size:17px;}
  #composer{left:14px;right:14px;width:auto;max-width:none;bottom:70px;}
  #emoji-bar{padding:5px 8px;}
  #emoji-bar .emoji{font-size:20px;padding:3px 8px;}
  #barshow{width:40px;height:40px;font-size:17px;}
  #wc-title{font-size:20px;top:16px;left:16px;max-width:60%;}
  /* 手机端二维码彻底隐藏（含展开入口）：手机不需要扫自己屏幕上的码 */
  #qr, #qrshow{display:none !important;}
}
@keyframes pop{from{transform:translateY(14px);opacity:0;}to{transform:none;opacity:1;}}
#msg{width:100%;min-height:84px;resize:none;border:none;outline:none;background:transparent;
  color:var(--ink);font-size:17px;line-height:1.55;font-family:inherit;box-sizing:border-box;}
#msg::placeholder{color:rgba(234,244,255,.4);}
.count{text-align:right;font-size:12px;color:rgba(234,244,255,.55);margin:4px 2px 10px;}
#send{width:100%;padding:11px;border:none;border-radius:10px;background:var(--blue);color:#fff;
  font-size:15px;font-weight:700;cursor:pointer;letter-spacing:.12em;transition:transform .15s;}
#send:active{transform:scale(.98);}
.emoji{flex:1;font-size:22px;background:rgba(255,255,255,.08);border:1px solid var(--hairline);
  border-radius:10px;padding:9px 0;cursor:pointer;text-align:center;transition:transform .15s;}
.emoji:hover{transform:scale(1.12);background:rgba(255,255,255,.14);}
#toast{position:fixed;left:50%;bottom:116px;transform:translateX(-50%);z-index:9;
  background:rgba(10,14,28,.85);border:1px solid var(--hairline);color:var(--ink);
  padding:12px 24px;border-radius:12px;font-size:15px;opacity:0;transition:opacity .3s;
  pointer-events:none;}
#toast.show{opacity:1;}

/* —— "+1 表情" 上浮气泡：从表情栏升起、随机漂移淡出（多个叠加时自然错开） —— */
.p1{position:fixed;z-index:60;pointer-events:none;white-space:nowrap;
  font:600 15px "Microsoft YaHei","PingFang SC",sans-serif;color:var(--ink);
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);
  padding:5px 12px;border-radius:999px;
  animation:p1rise 1.3s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes p1rise{
  0%  {opacity:0;transform:translate(-50%,10px) scale(.6);}
  18% {opacity:1;transform:translate(-50%,0) scale(1);}
  72% {opacity:1;}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-92px) scale(1.06);}
}

@media (prefers-reduced-motion: reduce){
  #fab,#send,.emoji{transition:none;}
  #composer.open{animation:none;}
  .atmo{animation:none;}
  .p1{animation-duration:.01s;}
}