/* ============================================================
   群服互通 · 界面
   Minecraft 原版 UI 风：硬边方块、立体边框、等宽字、无圆角
   ============================================================ */
:root{
  --bg:#1b1b1b;
  --panel:#3a3a3a;
  --panel-dark:#2b2b2b;
  --bevel-hi:rgba(255,255,255,.26);
  --bevel-lo:rgba(0,0,0,.5);
  --edge:#141414;
  --text:#f0f0f0;
  --dim:#a4a4a4;
  --dim-2:#757575;
  --grass:#5fa63c;
  --grass-dark:#3d7423;
  --dirt:#7a5133;
  --gold:#ffaa00;
  --emerald:#17c07a;
  --diamond:#4aedd9;
  --red:#ff5555;
  --mc-gray:#aaaaaa;
  --font:"Minecraft","Zpix","Fusion Pixel 12px",ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14.5px/1.7 var(--font);
  color:var(--text);
  background-color:var(--bg);
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.014) 0 9px,transparent 9px 18px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.16) 0 9px,transparent 9px 18px);
  display:flex;flex-direction:column;
  overflow:hidden;
  letter-spacing:.2px;
}
button{font:inherit;cursor:pointer}
input{font:inherit}
code{color:var(--diamond)}

/* ── 通用：方块立体边框 ─────────────────────────── */
.panel{
  background:var(--panel);
  border:2px solid var(--edge);
  box-shadow:inset -3px -3px 0 var(--bevel-lo), inset 3px 3px 0 var(--bevel-hi);
}
.mc-btn{
  padding:8px 16px;
  color:#fff;
  background:#6b6b6b;
  border:2px solid var(--edge);
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.42), inset 3px 3px 0 rgba(255,255,255,.26);
  text-shadow:2px 2px 0 rgba(0,0,0,.55);
  white-space:nowrap;
}
.mc-btn:hover{background:#7d8f7d;color:#ffffa0}
.mc-btn:active{
  box-shadow:inset 3px 3px 0 rgba(0,0,0,.42), inset -3px -3px 0 rgba(255,255,255,.22);
  transform:translateY(2px);
}
.mc-btn:disabled{color:#bdbdbd;background:#5a5a5a;cursor:not-allowed;transform:none}
.mc-btn.small{padding:5px 11px;font-size:13px}

input[type="text"],input:not([type]){
  background:#000;
  color:#eaeaea;
  border:2px solid var(--edge);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.75), inset -1px -1px 0 rgba(255,255,255,.09);
  padding:8px 10px;
  outline:none;
}
input:focus{outline:2px solid #8f8f8f}
input::placeholder{color:#6e6e6e}

/* ── 顶栏 ───────────────────────────────────────── */
.top{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 16px;
  background:linear-gradient(#454545,#333);
  border-bottom:3px solid var(--edge);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.08);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.grass{
  width:24px;height:24px;flex:0 0 auto;
  border:2px solid var(--edge);
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 3px,transparent 3px 6px),
    linear-gradient(#63b03f 0 45%,#4c8a2e 45% 55%,#7a5133 55% 100%);
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.35), inset 2px 2px 0 rgba(255,255,255,.25);
}
.brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.brand-text b{font-size:15px;text-shadow:2px 2px 0 rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-text i{font-style:normal;font-size:11.5px;color:var(--mc-gray)}
.top-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.stat{
  display:flex;align-items:center;gap:7px;
  padding:5px 10px;font-size:12.5px;color:#dcdcdc;
  background:rgba(0,0,0,.35);
  border:2px solid var(--edge);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.45);
}
.led{width:8px;height:8px;flex:0 0 auto;background:var(--red);border:1px solid #000}
.led.on{background:#55ff55}
.led.slow{background:var(--gold)}

/* ── 布局 ───────────────────────────────────────── */
.wrap{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:230px minmax(0,1fr);
  gap:12px;padding:12px 16px 14px;
  max-width:1180px;width:100%;margin:0 auto;
}
.panel-bar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;
  background:linear-gradient(#464646,#383838);
  border-bottom:2px solid var(--edge);
  font-size:12.5px;color:#e2e2e2;
  text-shadow:1px 1px 0 rgba(0,0,0,.6);
}
.panel-bar .num{color:var(--gold)}
.panel-bar .you{color:var(--emerald);font-size:12px}

.side{display:flex;flex-direction:column;min-height:0}
.players{list-style:none;margin:0;padding:8px;overflow:auto;flex:1 1 auto}
.players li{
  display:flex;align-items:center;gap:9px;
  padding:5px 7px;font-size:14px;
  text-shadow:1px 1px 0 rgba(0,0,0,.6);
}
.players li:hover{background:rgba(255,255,255,.06)}
.players li.empty{color:var(--dim-2);font-size:12.5px;text-shadow:none;justify-content:center;padding:14px}
.px{
  width:20px;height:20px;flex:0 0 auto;
  border:2px solid var(--edge);
  display:grid;place-items:center;
  font-size:11px;font-weight:700;color:#0d1a0d;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.28), inset 2px 2px 0 rgba(255,255,255,.3);
}
.side-tip{padding:9px 10px;border-top:2px solid var(--edge);background:rgba(0,0,0,.18)}
.side-tip p{margin:0 0 6px;font-size:11.5px;color:var(--dim);line-height:1.65}
.side-tip p:last-child{margin-bottom:0}

/* ── 聊天区（MC 聊天栏）──────────────────────────── */
.chat{position:relative;display:flex;flex-direction:column;min-height:0}
.feed{
  flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px 6px;
  background:rgba(0,0,0,.42);
  box-shadow:inset 3px 3px 0 rgba(0,0,0,.5);
  scroll-behavior:smooth;
}
.feed::-webkit-scrollbar,.players::-webkit-scrollbar{width:12px}
.feed::-webkit-scrollbar-track,.players::-webkit-scrollbar-track{background:#1e1e1e}
.feed::-webkit-scrollbar-thumb,.players::-webkit-scrollbar-thumb{
  background:#6b6b6b;border:2px solid #1e1e1e;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.4), inset 2px 2px 0 rgba(255,255,255,.24);
}

.line{
  display:block;padding:4px 9px;
  font-size:15px;line-height:1.85;
  text-shadow:2px 2px 0 rgba(0,0,0,.65);
  word-break:break-word;
  overflow-wrap:anywhere;
}
.line .t{color:#666;font-size:11px;margin-right:7px}
.line .tag{font-weight:700}
.line .tag.web{color:var(--diamond)}
.line .tag.game{color:var(--mc-gray)}
.line .msg{color:#fff}
.line.web{background:rgba(74,237,217,.07);border-left:3px solid rgba(74,237,217,.45)}
.line.me{background:rgba(23,192,122,.10);border-left:3px solid rgba(23,192,122,.6)}
.line:hover{background:rgba(255,255,255,.05)}

.sys{
  display:block;padding:4px 9px;
  font-size:13.5px;color:var(--mc-gray);font-style:italic;
  text-shadow:2px 2px 0 rgba(0,0,0,.6);
  word-break:break-word;
  overflow-wrap:anywhere;
}
.sys b{font-style:normal;font-weight:400}
.sys.join b{color:#55ff55}
.sys.leave b{color:#8f8f8f}
.sys.death b{color:var(--red)}
.sys.payment b{color:var(--gold)}
.sys.system b{color:#c77dff}
.sys::before{content:"» ";color:#5a5a5a}

.jump{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  padding:6px 14px;font:inherit;font-size:12.5px;color:#ffffa0;
  background:#6b6b6b;border:2px solid var(--edge);
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.42), inset 3px 3px 0 rgba(255,255,255,.26);
  text-shadow:2px 2px 0 rgba(0,0,0,.55);
}
.jump.at-me{
  background:linear-gradient(180deg,#ffd24a,#dda700);
  color:#2a1d00;border-color:#6b5200;text-shadow:none;
}

/* ── 细节：日期分隔 / @提及 / 未认证锁定 ─────────── */
.daysep{
  align-self:center;margin:9px 0 3px;
  font-size:11.5px;color:var(--dim-2);letter-spacing:1px;
  text-shadow:1px 1px 0 rgba(0,0,0,.6);
}
.line .at{
  color:#ffff55;background:rgba(255,255,0,.10);padding:0 3px;
}
.players li.clickable{cursor:pointer}
.players li.clickable:hover{background:rgba(255,255,255,.09)}
.players li.clickable:active{background:rgba(255,255,255,.15)}

.feed-empty{
  position:absolute;left:0;right:0;top:46%;
  text-align:center;font-size:13px;color:var(--dim-2);
  pointer-events:none;text-shadow:1px 1px 0 rgba(0,0,0,.6);
}
.feed-empty[hidden]{display:none}

/* ── 服务器状态面板 ─────────────────────────────── */
.perf{
  border-top:2px solid var(--edge);
  padding:8px 10px 9px;
  display:flex;flex-direction:column;gap:4px;
  background:rgba(0,0,0,.18);
}
.perf-row{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:var(--dim);
}
.perf-row b{color:var(--mc-gray);font-weight:400}
.perf-row b.good{color:#55ff55}
.perf-row b.mid{color:var(--gold)}
.perf-row b.bad{color:var(--red)}
.spark{
  display:flex;align-items:flex-end;gap:1px;
  height:24px;margin-top:4px;padding:2px;
  background:#000;border:2px solid var(--edge);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.7);
}
.spark i{flex:1 1 auto;min-width:0;display:block;background:#3d7423}
.spark i.hi{background:#5fa63c}

/* 通知按钮开着时的样子 */
.mc-btn.small.on{background:#3d7423;color:#eaffe0}

/* 被点名的消息 */
.line.at-me{background:rgba(255,255,0,.07);border-left:3px solid var(--gold)}
.line.at-me .msg{color:#ffffa0}

body.locked .composer{opacity:.5}
body.locked .composer input{color:#6b6b6b}

/* ── 发言栏 ─────────────────────────────────────── */
.composer{
  flex:0 0 auto;position:relative;
  display:flex;gap:8px;align-items:stretch;
  padding:10px;
  background:linear-gradient(#3f3f3f,#333);
  border-top:2px solid var(--edge);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.07);
}
.composer .name{width:96px;flex:0 0 auto;font-size:13.5px}
.composer .msg{flex:1 1 auto;min-width:0}
.composer .msg:disabled,.composer .name:disabled{color:#8f8f8f;background:#111}
.counter{
  position:absolute;right:96px;top:-1px;font-size:10.5px;color:var(--dim-2);
  opacity:0;transition:opacity .15s;
}
.counter.on{opacity:1}
.counter.warn{color:var(--gold)}

/* ── 认证对话框 ─────────────────────────────────── */
.gate{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px;
  overflow:auto;
  background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.28) 0 10px,transparent 10px 20px),
    rgba(12,12,12,.9);
}
.dialog{
  width:100%;max-width:470px;
  background:var(--panel);
  border:3px solid var(--edge);
  box-shadow:
    inset -3px -3px 0 rgba(0,0,0,.45), inset 3px 3px 0 rgba(255,255,255,.2),
    0 0 0 2px rgba(255,255,255,.06), 7px 9px 0 rgba(0,0,0,.45);
}
.dialog-bar{
  padding:9px 12px;font-size:14px;color:#eaeaea;
  background:linear-gradient(#505050,#3c3c3c);
  border-bottom:2px solid var(--edge);
  text-shadow:2px 2px 0 rgba(0,0,0,.6);
}
.dialog-body{padding:14px 14px 12px}
.step{display:flex;gap:11px;margin-bottom:14px}
.step-no{
  flex:0 0 auto;width:24px;height:24px;
  display:grid;place-items:center;
  font-size:13px;font-weight:700;color:#0d1a0d;
  background:var(--grass);
  border:2px solid var(--edge);
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.32), inset 2px 2px 0 rgba(255,255,255,.3);
}
.step-main{flex:1 1 auto;min-width:0}
.step-main p{margin:2px 0 7px;font-size:13.5px;color:#e6e6e6}
.step-main .mini{margin:6px 0 0;font-size:11.5px;color:var(--dim-2);line-height:1.6}
.keyword{
  display:inline-block;padding:9px 20px;
  font-size:17px;font-weight:700;color:#55ff55;letter-spacing:2px;
  background:#000;border:2px solid var(--edge);
  box-shadow:inset 3px 3px 0 rgba(0,0,0,.7);
  cursor:pointer;
  user-select:all;
}
.keyword:hover{color:#aaffaa}
.bind-list{margin:8px 0;min-height:38px}
.bind-empty{font-size:12.5px;color:var(--dim-2);padding:8px 2px}
.bind-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;margin-bottom:6px;padding:7px 10px;
  font:inherit;font-size:14px;color:#fff;text-align:left;
  background:#5f5f5f;border:2px solid var(--edge);
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.4), inset 3px 3px 0 rgba(255,255,255,.24);
  text-shadow:2px 2px 0 rgba(0,0,0,.55);
  animation:pop .18s steps(2);
}
.bind-item:hover{background:#6f9a6f;color:#ffffa0}
.bind-item .age{font-size:11px;color:#cfcfcf}
@keyframes pop{from{transform:translateY(3px)}to{transform:none}}
.row-inline{display:flex;gap:8px}
.row-inline input{flex:1 1 auto;min-width:0}
.fallback{margin-top:4px;border-top:2px solid var(--edge);padding-top:10px}
.fallback summary{font-size:12.5px;color:var(--dim);cursor:pointer;list-style:none}
.fallback summary::-webkit-details-marker{display:none}
.fallback summary::before{content:"▸ "}
.fallback[open] summary::before{content:"▾ "}
.fallback .row-inline{margin-top:9px}
.err{margin:11px 0 0;min-height:17px;font-size:12.5px;color:var(--red);text-shadow:1px 1px 0 rgba(0,0,0,.6)}

/* ── 提示 ───────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:60;
  transform:translate(-50%,14px);opacity:0;pointer-events:none;
  padding:9px 16px;font-size:13px;max-width:86vw;text-align:center;
  color:#ffffa0;background:#3c3c3c;border:2px solid var(--edge);
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.42), inset 3px 3px 0 rgba(255,255,255,.22), 5px 6px 0 rgba(0,0,0,.4);
  text-shadow:2px 2px 0 rgba(0,0,0,.6);
  transition:opacity .18s,transform .18s;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{color:#ffb0b0}

/* ── 分隔线 / 口令弹层 ──────────────────────────── */
.divider{
  display:flex;align-items:center;gap:10px;
  margin:14px 0 12px;font-size:11.5px;color:var(--dim-2);
}
.divider::before,.divider::after{
  content:"";flex:1 1 auto;height:2px;background:var(--edge);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.overlay{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;padding:18px;
  background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.28) 0 10px,transparent 10px 20px),
    rgba(12,12,12,.88);
}
/* 关键：这两个容器自己写了 display:grid，会盖掉浏览器对 [hidden] 的默认 display:none，
   不显式压一下的话 hidden=true 根本关不掉（认证框/口令卡片会一直糊在屏幕上）。 */
.gate[hidden],.overlay[hidden]{display:none !important}
.pass-box{
  margin:13px 0;padding:15px 10px;
  font-size:23px;font-weight:700;letter-spacing:4px;text-align:center;
  color:#55ff55;background:#000;
  border:2px solid var(--edge);
  box-shadow:inset 3px 3px 0 rgba(0,0,0,.75);
  user-select:all;
}
.mini b{color:#ffffa0}
.mini.dim{color:var(--dim-2);margin-bottom:0}

/* ── 移动端 ─────────────────────────────────────── */
@media (max-width:820px){
  /* 手机端第一原则：不许横向溢出（顶栏元素多，这里最容易撑破） */
  html,body{overflow-x:hidden;max-width:100vw}
  .wrap{grid-template-columns:minmax(0,1fr);padding:8px 8px 10px;gap:8px}
  .side{order:2;padding:7px 9px}
  .players{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding:4px 2px;max-height:none}
  .players li{font-size:13px;padding:4px 8px;flex:0 0 auto;background:rgba(255,255,255,.05)}
  .players li .px{width:17px;height:17px;font-size:10px}
  .side-tip{display:none}

  /* 顶栏：藏掉地址按钮、收紧间距、留换行兜底 */
  .top{padding:7px 9px;gap:6px;flex-wrap:wrap}
  .top-right{gap:5px;flex-wrap:wrap}
  #addrBtn{display:none}
  .brand{gap:8px}
  .brand-text b{font-size:14px}
  .brand-text i{display:none}
  .stat{padding:4px 8px;font-size:12px}
  .mc-btn.small{padding:4px 9px;font-size:12.5px}

  /* 聊天：字号略收、留足呼吸 */
  .feed{padding:8px 4px}
  .line{font-size:14.5px;line-height:1.8;padding:3px 7px}
  .sys{font-size:13px;padding:3px 7px}
  .chat,.side{border-radius:0}

  /* 输入区：贴底 + 适配 iPhone 底部横条 */
  .composer{padding:9px 9px calc(9px + env(safe-area-inset-bottom,0px));gap:6px;flex-wrap:wrap}
  .composer .name{width:100%;flex:0 0 100%;font-size:13px}
  .mc-btn.send{padding:9px 14px}
  .counter{right:12px;top:auto;bottom:2px}

  /* 认证框：小屏也要放得下 */
  .gate{padding:12px}
  .dialog{max-width:100%}
  .dialog-body{padding:12px}
  .step{gap:9px;margin-bottom:12px}
  .step-main p{font-size:13px}
  .keyword{font-size:15px;padding:7px 13px;letter-spacing:1px}
  .pass-box{font-size:19px;letter-spacing:2px;padding:12px 8px}

  /* 手机端纵向空间宝贵：状态面板压成一行，趋势图矮一点 */
  .perf{flex-direction:row;align-items:center;gap:9px;padding:6px 9px;flex-wrap:wrap}
  .perf-row{gap:4px;font-size:11.5px}
  .spark{flex:1 1 100%;height:18px;margin-top:2px}
  .side-tip{padding:6px 9px}
}