/* ============================================================
   随禾 · 主题变量
   这里是你以后唯一需要改的地方。
   颜色、字号、间距、画布比例，全部在下面这一段里。
   ============================================================ */

:root{
  /* 画布 */
  --ratio-w: 9;          /* 画布宽比  */
  --ratio-h: 19.5;       /* 画布高比  */

  /* 颜色 */
  --outer:   #141519;    /* 画布外面（电脑端两侧） */
  --canvas:  #DDE9F1;    /* 画布底色：浅蓝甲 */
  --text:    #3C4952;    /* 正文 */
  --text-2:  #5A666E;    /* 次要文字 */
  --text-3:  #96A4AE;    /* 提示、时间 */
  --text-4:  #A6B4BE;    /* 更淡的提示 */
  --line:    rgba(60,73,82,.16);
  --line-2:  rgba(60,73,82,.30);
  --media-bg:#C8D8E4;    /* 视频占位底色 */

  /* 图标微光（想调亮度只改这两行）
     soft   = 平时所有图标的默认微光
     strong = 悬停、点赞选中、主操作按钮的强一档
     参数是实测选出来的：白边提亮 + 近距冷光 + 远距扩散，
     三层叠加才有「亮着」的感觉，只有白色或只有蓝色都会变成脏阴影。
     不想要微光就把整段换成 none */
  --ico-glow-soft:
    drop-shadow(0 0 1.4px rgba(255,255,255,1))
    drop-shadow(0 0 2px rgba(120,168,208,.90))
    drop-shadow(0 0 7px rgba(120,168,208,.55));
  --ico-glow-strong:
    drop-shadow(0 0 1.6px rgba(255,255,255,1))
    drop-shadow(0 0 2.4px rgba(112,164,206,.95))
    drop-shadow(0 0 9px rgba(112,164,206,.62));

  /* 字号（嫌大嫌小改这里） */
  --fs-brand: 11px;      /* 首页顶部小「随禾」 */
  --fs-login-brand: 30px;/* 登录屏大「随禾」，必须比「进入」大 */
  --fs-enter: 19px;      /* 登录屏「进入」按钮，比提示大字、比品牌字小 */
  --fs-tip:   10px;      /* 登录屏提示 / 忘记密码，故意压到最小 */
  --fs-state: 13px;      /* 状态文字 */
  --fs-msg:   12px;      /* 留言正文 */
  --fs-time:  11px;      /* 时间戳，比正文小一点点 */
  --fs-hint:  12px;      /* 输入框提示 */

  /* 间距 */
  --pad:      18px;      /* 画布左右留白 */
  --pad-feed: 14px;      /* 弹幕区上下留白（上下等距） */
  --gap-msg:  9px;       /* 留言之间的间距 */
  --bar-h:    56px;      /* 输入栏高度（固定，打字时不跳动） */

  /* 动效 */
  --fade: .45s;          /* 弹幕渐入渐出时长 */
}

/* ============================================================
   以下不要改
   ============================================================ */

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  background:var(--outer);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

#stage{
  position:relative;
  height:100vh;height:100dvh;
  width:calc(100vh * var(--ratio-w) / var(--ratio-h));
  width:min(calc(100dvh * var(--ratio-w) / var(--ratio-h)), 100vw);
  background:var(--canvas);
  display:flex;flex-direction:column;
  overflow:hidden;
}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--canvas)}
.hidden{display:none !important}

/* 登录屏 */
.login-inner{
  margin:auto;
  width:100%;
  padding:0 calc(var(--pad) + 22px);
  display:flex;flex-direction:column;align-items:center;
}
.brand{
  font-size:var(--fs-login-brand);
  letter-spacing:.5em;
  text-indent:.5em;
  color:var(--text-2);
  margin-bottom:52px;
  font-weight:600;
}
.code-input{
  width:100%;
  background:transparent;border:none;border-bottom:.5px solid var(--line-2);
  padding:8px 2px;
  font-size:var(--fs-msg);
  letter-spacing:.12em;
  color:var(--text);
  text-align:center;
  outline:none;
  font-family:inherit;
}
.code-input::placeholder{color:var(--text-4);letter-spacing:.2em}
.nick-input{margin-top:24px;font-size:var(--fs-time)}
#pwd{margin-top:24px;font-size:var(--fs-time);letter-spacing:.06em}
.login-tip{
  margin-top:14px;font-size:var(--fs-tip);color:var(--text-4);
  text-align:center;letter-spacing:.02em;line-height:1.8;
}
.forget{margin-top:12px;font-size:var(--fs-tip);color:var(--text-4);text-align:center;letter-spacing:.06em}
.forget span{cursor:pointer}
.forget span:active{color:var(--text-3)}
.guest-entry{margin-top:14px;font-size:var(--fs-tip);color:var(--text-4);text-align:center;letter-spacing:.06em}
.guest-entry span{cursor:pointer}
.guest-entry span:active{color:var(--text-3)}
.err{height:20px;font-size:var(--fs-tip);color:#B4736A;letter-spacing:.04em;margin-top:8px}
.enter{
  margin-top:30px;
  background:transparent;border:none;padding:10px 4px;
  font-size:var(--fs-enter);letter-spacing:.5em;text-indent:.5em;
  color:var(--text);cursor:pointer;font-family:inherit;font-weight:600;
}
.test-hint{
  margin-top:44px;font-size:var(--fs-time);color:var(--text-4);
  line-height:1.9;text-align:center;letter-spacing:.04em;
}

/* 顶栏 */
.head{
  flex:0 0 auto;height:calc(46px + env(safe-area-inset-top));
  display:flex;align-items:center;justify-content:space-between;
  padding:env(safe-area-inset-top) var(--pad) 0;
}
.brand-sm{font-size:var(--fs-brand);letter-spacing:.42em;text-indent:.42em;color:var(--text-3)}
/* 右上角：全部留言入口。用统一图标，不再垫灰色方块 */
.dot{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-2);
}
.dot:active{color:var(--text)}
.close{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-width:24px;height:24px;
  font-size:var(--fs-time);color:var(--text-3);cursor:pointer;
  letter-spacing:.08em;text-decoration:none;
}
.close:active{color:var(--text-2)}
.head-right{display:flex;align-items:center;gap:14px}
.head-link{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-brand);color:var(--text-3);
  letter-spacing:.16em;text-decoration:none;
}
.head-link:active{color:var(--text-2)}

.offline{
  flex:0 0 auto;
  text-align:center;
  font-size:var(--fs-time);
  color:#8C7A6B;
  background:rgba(180,115,106,.09);
  padding:6px 0;
  letter-spacing:.14em;
}

/* 小人区 */
.figure{
  flex:0 0 44%;
  position:relative;
  overflow:hidden;
}
.ph{
  position:absolute;inset:0;background:var(--media-bg);
  display:flex;align-items:center;justify-content:center;
}
.ph span{font-size:var(--fs-time);color:#93A3AF;letter-spacing:.28em;text-indent:.28em}
.vstack{position:absolute;inset:0}
.vstack video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s ease;
}
.vstack video.active{opacity:1}
.state-text{
  position:absolute;left:0;right:0;bottom:14px;
  text-align:center;
  font-size:var(--fs-state);
  letter-spacing:.26em;text-indent:.26em;
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.32);
  pointer-events:none;
}

/* 置顶条（固定在弹幕区最上方） */
.pin-bar{
  flex:0 0 auto;
  padding:2px var(--pad) 8px;
  display:flex;flex-direction:column;gap:4px;
  border-bottom:.5px solid var(--line);
}
.pin-item{
  display:flex;align-items:center;gap:5px;
  font-size:var(--fs-time);color:var(--text-2);
  white-space:nowrap;overflow:hidden;
}
.pin-ico{flex:0 0 auto;color:var(--text-4)}
.pin-tag{flex:0 0 auto;color:var(--text-3)}
.pin-name{flex:0 0 auto;color:var(--text-3)}
.pin-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 弹幕流 */
.feed{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  padding:var(--pad-feed) var(--pad);
  scrollbar-width:none;
}
.feed::-webkit-scrollbar{display:none}
.feed .msg:first-child{margin-top:0}

.msg{
  margin-top:var(--gap-msg);
  opacity:0;transform:translateY(8px);
  max-height:0;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  transition:opacity var(--fade) ease,transform var(--fade) ease,max-height var(--fade) ease,margin var(--fade) ease;
}
.msg.in{opacity:1;transform:translateY(0);max-height:800px}
.msg.far{opacity:.2}
.msg.gone{opacity:0;transform:translateY(-6px);max-height:0;margin-top:0}
.msg-line{
  font-size:var(--fs-msg);
  line-height:var(--lh);
  color:var(--text);
  word-break:break-word;
  letter-spacing:.02em;
}
.msg-tag{color:var(--text-3);margin-right:3px}
.msg-name{color:var(--text-2);margin-right:5px}
.msg-time{
  font-size:var(--fs-time);
  color:var(--text-4);
  margin-left:6px;
  letter-spacing:.02em;
  white-space:nowrap;
}
.msg-priv{
  font-size:var(--fs-time);color:var(--text-4);
  margin-left:5px;letter-spacing:.02em;
}
.msg-like{
  display:inline-flex;align-items:center;gap:3px;
  margin-left:8px;padding:2px 1px;
  font-size:var(--fs-time);color:var(--text-3);
  cursor:pointer;letter-spacing:.02em;vertical-align:baseline;
}
.msg-like .like-ico{display:block;transform:translateY(1px)}
.msg-like .like-n{font-variant-numeric:tabular-nums}
.msg-like.on{color:var(--text-2)}
.msg-like.on .like-ico path{fill:currentColor}
.msg.mine .msg-line{color:var(--text-2)}
.empty-tip{
  font-size:var(--fs-time);color:var(--text-4);
  text-align:center;margin-top:18px;letter-spacing:.1em;
}

/* 输入栏 */
.bar{
  flex:0 0 var(--bar-h);
  height:var(--bar-h);
  border-top:.5px solid var(--line);
  display:flex;align-items:center;
  padding:0 var(--pad);
  overflow:hidden;
}
.ph-bar{
  display:flex;align-items:center;gap:8px;
  width:100%;height:100%;
  font-size:var(--fs-hint);color:var(--text-3);
  letter-spacing:.1em;cursor:pointer;
}
.ph-bar .ico-wrap{color:var(--text-4)}
.editor{display:flex;width:100%;height:100%;align-items:center;gap:10px}
.inp{
  flex:1;min-width:0;
  background:transparent;border:none;border-bottom:.5px solid var(--line-2);
  padding:6px 0;font-size:var(--fs-hint);color:var(--text);outline:none;font-family:inherit;
}
.inp::placeholder{color:var(--text-4)}
.priv-label{
  display:flex;align-items:center;gap:4px;
  font-size:var(--fs-time);color:var(--text-3);white-space:nowrap;cursor:pointer;letter-spacing:.02em;
}
.priv-label input{width:11px;height:11px;accent-color:#8C9BA6;margin:0}
.send{
  background:transparent;border:none;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;min-height:30px;
  color:var(--text-2);cursor:pointer;padding:4px 2px;font-family:inherit;
}
.send:active{color:var(--text)}

/* 游客栏（替换输入栏） */
.guest-bar{
  flex:0 0 var(--bar-h);
  height:var(--bar-h);
  border-top:.5px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
}
.guest-tip{font-size:var(--fs-time);color:var(--text-4);letter-spacing:.06em}
.guest-link{font-size:var(--fs-time);color:var(--text-2);letter-spacing:.1em;cursor:pointer}

/* 版本号 */
.ver-wrap{flex:0 0 auto;text-align:center;padding:4px 0 calc(10px + env(safe-area-inset-bottom))}
.ver{font-size:10px;color:var(--text-4);letter-spacing:.1em;cursor:default;user-select:none}
.guest-hint{
  flex:0 0 auto;text-align:center;
  font-size:var(--fs-tip);color:var(--text-4);
  letter-spacing:.04em;line-height:1.7;
  padding:0 var(--pad) 4px;
}

/* 长按菜单 */
.sheet{
  position:absolute;inset:0;background:rgba(20,21,25,.28);
  display:flex;align-items:flex-end;z-index:20;
}
.sheet-body{
  width:100%;background:var(--canvas);
  border-top:.5px solid var(--line-2);
  padding:6px var(--pad) calc(6px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
}
.sheet-btn{
  background:transparent;border:none;
  display:flex;align-items:center;gap:12px;
  padding:15px 0;font-size:var(--fs-hint);color:var(--text);text-align:left;
  letter-spacing:.1em;cursor:pointer;font-family:inherit;
  border-bottom:.5px solid var(--line);
}
.sheet-btn .ico-wrap{width:18px;justify-content:flex-start;color:var(--text-3)}
.sheet-btn.danger .ico-wrap{color:#B4736A}
/* 危险项用同色系红光，别让红描边配蓝光晕（会显脏） */
.sheet-btn.danger svg.ico{
  filter:drop-shadow(0 0 1.4px rgba(255,255,255,1))
         drop-shadow(0 0 2px rgba(180,115,106,.85))
         drop-shadow(0 0 7px rgba(180,115,106,.50));
}
.sheet-btn:last-child{border-bottom:none}
.sheet-btn.cancel{color:var(--text-3);font-size:var(--fs-time)}
.sheet-btn.danger{color:#B4736A}
.nick-title{
  font-size:var(--fs-time);color:var(--text-3);
  letter-spacing:.12em;padding:16px 0 10px;
}
.admin-hint{
  font-size:var(--fs-time);color:var(--text-3);
  line-height:1.8;margin:0 0 10px;word-break:break-all;
}

/* 轻提示 */
.toast{
  position:absolute;left:50%;bottom:96px;transform:translateX(-50%);
  background:rgba(60,73,82,.92);color:#fff;
  font-size:var(--fs-time);letter-spacing:.04em;
  padding:8px 14px;border-radius:3px;z-index:60;
  max-width:82%;text-align:center;line-height:1.6;
  transition:opacity .2s ease;
}
.toast.hidden{display:none;opacity:0}

/* 覆盖层 */
.panel{
  position:absolute;inset:0;background:var(--canvas);
  display:flex;flex-direction:column;z-index:30;
}
.all-list{
  flex:1;overflow-y:auto;padding:4px var(--pad) 24px;scrollbar-width:none;
}
.all-list::-webkit-scrollbar{display:none}
.all-search{
  flex:0 0 auto;padding:2px var(--pad) 6px;
  border-bottom:.5px solid var(--line);
  display:flex;align-items:center;gap:9px;
}
.all-search .ico-wrap{color:var(--text-4)}
.all-input{
  flex:1;min-width:0;
  background:transparent;border:none;border-bottom:.5px solid var(--line-2);
  padding:9px 2px;font-size:var(--fs-hint);color:var(--text);outline:none;
  font-family:inherit;letter-spacing:.06em;
}
.all-input::placeholder{color:var(--text-4);letter-spacing:.16em}
.all-item{padding:11px 0;border-bottom:.5px solid var(--line)}
.all-item .all-top{font-size:var(--fs-msg);color:var(--text);line-height:var(--lh);word-break:break-word}
.all-item .all-foot{
  font-size:var(--fs-time);color:var(--text-4);margin-top:3px;letter-spacing:.02em;
}
.all-item .all-del{
  font-size:var(--fs-time);color:var(--text-4);margin-left:10px;cursor:pointer;
}
.state-list{padding:12px var(--pad);display:flex;flex-direction:column}
.state-item{
  background:transparent;border:none;border-bottom:.5px solid var(--line);
  display:flex;align-items:center;gap:11px;
  padding:14px 0;font-size:var(--fs-hint);color:var(--text);text-align:left;
  letter-spacing:.1em;cursor:pointer;font-family:inherit;
}
.state-item .ico-wrap{width:18px;justify-content:flex-start;color:var(--text-3)}

/* 玩法总详情页 */
.play-search{
  flex:0 0 auto;padding:2px var(--pad) 6px;
  display:flex;align-items:center;gap:9px;
}
.play-search .ico-wrap{color:var(--text-4)}
.play-input{
  flex:1;min-width:0;
  background:transparent;border:none;border-bottom:.5px solid var(--line-2);
  padding:9px 2px;font-size:var(--fs-msg);color:var(--text);outline:none;
  font-family:inherit;letter-spacing:.06em;
}
.play-input::placeholder{color:var(--text-4);letter-spacing:.16em}
.play-wrap{position:relative;flex:1 1 auto;min-height:0}
.play-list{
  height:100%;overflow-y:auto;
  padding:8px var(--pad) 20px;scrollbar-width:none;
}
.play-list::-webkit-scrollbar{display:none}
/* 右侧定位条：默认很淡，可拖动 */
.play-scroll{
  position:absolute;top:6px;bottom:6px;right:1px;
  width:14px;display:none;touch-action:none;
}
.play-scroll.show{display:block}
.play-thumb{
  position:absolute;right:3px;width:3px;border-radius:2px;
  background:var(--text-3);opacity:.7;
  transition:opacity .18s ease,width .18s ease;
}
.play-scroll:hover .play-thumb,
.play-scroll.drag .play-thumb{opacity:.95;width:4px}
.play-item{
  display:flex;gap:12px;
  padding:15px 0;border-bottom:.5px solid var(--line);
}
.play-item:last-child{border-bottom:none}
.play-no{
  flex:0 0 1.6em;text-align:right;
  font-size:var(--fs-time);color:var(--text-4);
  font-variant-numeric:tabular-nums;line-height:1.7;
}
.play-body{flex:1;min-width:0}
.play-title{
  font-size:var(--fs-state);color:var(--text);letter-spacing:.04em;line-height:1.5;
}
.play-desc{
  font-size:var(--fs-time);color:var(--text-3);line-height:1.8;
  margin-top:6px;letter-spacing:.02em;
}
.play-empty{
  font-size:var(--fs-time);color:var(--text-4);
  text-align:center;padding:34px 0;letter-spacing:.1em;
}

/* ============================================================
   手机微调（仅窄屏 / 触屏生效，电脑端完全不受影响）
   真机验证发现：10–12px 在手机高分屏偏小、点按区偏小。
   只在这里放大，桌面端尺寸保持原样。
   ============================================================ */
@media (max-width:560px){
  :root{
    --fs-brand:12px;
    --fs-state:14px;
    --fs-msg:14px;
    --fs-time:12px;
    --fs-hint:14px;
    --fs-tip:11px;
  }
  .head{height:calc(50px + env(safe-area-inset-top))}
  .dot{width:26px;height:26px}
  .code-input{font-size:14px}
  .inp{font-size:14px}
  .send{min-width:36px;min-height:36px}
  .sheet-btn{padding:17px 0}
  .msg-like{margin-left:10px}
}