* { margin:0; padding:0; box-sizing:border-box; }  html,body { width:100%; height:100%; overflow:hidden; background:#101418;
    font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif; user-select:none; }
  .hidden { display:none !important; }

  #game { display:block; width:100vw; height:100vh; }

  /* ---------- 登录(摩尔庄园式账号选择) ---------- */
  #login { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 50% 30%, #2b3a47 0%, #101418 75%); }
  #login::before { content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 0%, rgba(255,215,94,.08), transparent 60%); }
  .login-box { position:relative; background:rgba(22,30,38,.92); border:1px solid rgba(255,255,255,.12);
    padding:30px 40px; border-radius:24px; text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.6);
    backdrop-filter:blur(6px); width:420px; max-width:94vw; }
  .login-box h1 { font-size:34px; color:#ffd75e; margin-bottom:4px; letter-spacing:2px; text-shadow:0 0 24px rgba(255,215,94,.35); }
  .login-box .sub { color:#8fa3b5; font-size:13px; margin-bottom:20px; }
  .login-box input { display:block; width:100%; margin:0 auto 10px; padding:11px 14px; font-size:15px;
    border:2px solid rgba(255,255,255,.14); border-radius:10px; outline:none; text-align:center;
    background:rgba(255,255,255,.07); color:#fff; box-sizing:border-box; }
  .login-box input::placeholder { color:#6c8092; }
  .login-box input:focus { border-color:#ffd75e; }
  .name-row { display:flex; gap:8px; width:100%; margin:0 auto 10px; }
  .name-row input { flex:1; margin:0; }
  .name-row button { flex:none; padding:0 14px; border:2px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08);
    color:#ffd75e; border-radius:10px; cursor:pointer; font-size:15px; }
  .name-row button:hover { background:rgba(255,255,255,.15); }
  .btn-row { display:flex; gap:10px; width:100%; margin:0 auto; }
  .btn-row button { flex:1; padding:12px 0; font-size:15px; font-weight:bold; color:#fff; border:none;
    border-radius:12px; cursor:pointer; transition:filter .15s, transform .1s; }
  .btn-row button:hover { filter:brightness(1.12); transform:translateY(-1px); }
  .btn-guest { background:linear-gradient(180deg,#5dae48,#3f8a30); }
  .btn-login { background:linear-gradient(180deg,#4a90d9,#2f6fb3); }
  .color-row { width:100%; margin:2px auto 0; }
  .swatch { width:30px; height:30px; border-radius:50%; display:inline-block; margin:4px; cursor:pointer;
    border:3px solid transparent; vertical-align:middle; transition:transform .12s; }
  .swatch:hover { transform:scale(1.15); }
  .swatch.sel { border-color:#fff; box-shadow:0 0 0 2px rgba(0,0,0,.4); transform:scale(1.2); }
  .color-rand { margin-top:6px; font-size:12px; color:#8fc47a; cursor:pointer; text-decoration:underline;
    background:none; border:none; display:inline-block; padding:0; }
  .color-tip { color:#6c8092; font-size:11px; margin:6px 0 14px; }
  .login-box .err { color:#ff8a8a; font-size:13px; min-height:18px; margin-top:10px; }
  .login-box .hint { color:#5f7385; font-size:11px; margin-top:12px; line-height:1.8; }
  .back-link { color:#8fa3b5; font-size:12px; cursor:pointer; margin-top:12px; display:inline-block; }
  .back-link:hover { color:#ffd75e; }
  /* 账号选择卡片 */
  #account-select { margin-bottom:6px; }
  .acc-grid { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-height:240px; overflow-y:auto; padding:4px; }
  .acc-card { position:relative; width:108px; padding:14px 8px 10px; border-radius:16px; cursor:pointer;
    background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.1); transition:all .15s; }
  .acc-card:hover { background:rgba(255,255,255,.12); border-color:#ffd75e; transform:translateY(-3px); }
  .acc-avatar { width:46px; height:46px; border-radius:50%; margin:0 auto 8px; border:3px solid rgba(255,255,255,.5);
    display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:bold; color:rgba(0,0,0,.55); }
  .acc-name { color:#fff; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .acc-sub { color:#6c8092; font-size:10px; margin-top:2px; }
  .acc-del { position:absolute; top:6px; right:8px; color:#6c8092; font-size:13px; opacity:0; transition:opacity .15s; }
  .acc-card:hover .acc-del { opacity:1; }
  .acc-del:hover { color:#ff8a8a; }
  .acc-add { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px;
    width:108px; padding:14px 8px; border-radius:16px; cursor:pointer; border:2px dashed rgba(255,255,255,.18); color:#8fa3b5; }
  .acc-add:hover { border-color:#ffd75e; color:#ffd75e; }
  .acc-add .plus { font-size:28px; line-height:1; }
  .login-tip { color:#6c8092; font-size:11px; margin-top:10px; }
  .mode-switch { display:flex; gap:8px; width:100%; margin:0 auto 12px; }
  .mode-switch button { flex:1; padding:10px 0; font-size:14px; font-weight:bold; border:2px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06); color:#8fa3b5; border-radius:10px; cursor:pointer; transition:all .15s; }
  .mode-switch button:hover { background:rgba(255,255,255,.12); }
  .mode-switch button.on { background:linear-gradient(180deg,#4a90d9,#2f6fb3); color:#fff; border-color:transparent; }
  .mode-switch.small button { padding:7px 0; font-size:13px; }
  .btn-enter { width:100%; padding:12px 0; margin-top:4px; font-size:16px; font-weight:bold; color:#fff;
    background:linear-gradient(180deg,#6db84a,#4e8a33); border:none; border-radius:12px; cursor:pointer; transition:filter .15s; }
  .btn-enter:hover { filter:brightness(1.1); }

  /* ---------- HUD ---------- */
  #stats { position:fixed; right:12px; top:36px; z-index:30; padding:4px 10px; border-radius:12px;
    background:rgba(0,0,0,.5); color:#fff; font-size:11px; font-family:Consolas,monospace; }
  #stats.ok { color:#8ef08e; } #stats.mid { color:#ffd75e; } #stats.bad { color:#ff8a8a; }

  #players-panel { position:fixed; right:12px; top:64px; z-index:30; min-width:150px; max-width:240px;
    background:rgba(0,0,0,.45); border-radius:12px; padding:8px 10px; color:#fff; font-size:13px; }
  #players-panel .title { color:#cfe3c5; font-size:12px; margin-bottom:5px; display:flex; justify-content:space-between; align-items:center; }
  #players-list { max-height:230px; overflow-y:auto; scrollbar-width:thin; }
  #players-min { background:none; border:none; color:#cfe3c5; font-size:14px; cursor:pointer; padding:0 2px; line-height:1; }
  #players-min:hover { color:#fff; }
  #players-panel.minimized { min-width:120px; cursor:pointer; }
  #players-panel.minimized #players-list { display:none; }
  #players-panel .prow { display:flex; align-items:center; gap:6px; padding:2px 0; overflow:hidden; white-space:nowrap; }
  #players-panel .dot { width:10px; height:10px; border-radius:50%; flex:none; }
  #players-panel .pname { flex:1; overflow:hidden; text-overflow:ellipsis; }
  #players-panel .plat { font-size:10px; font-family:Consolas,monospace; flex:none; }
  #players-panel .pprov { font-size:10px; color:#8fa3b5; background:rgba(255,255,255,.1);
    padding:1px 6px; border-radius:8px; flex:none; }

  /* ---------- 聊天 ---------- */
  #chat { position:fixed; left:12px; bottom:12px; z-index:30; width:340px; }
  #chat-head { display:flex; justify-content:space-between; align-items:center; padding:6px 12px;
    background:rgba(0,0,0,.55); color:#ffe9a8; font-size:13px; border-radius:10px 10px 0 0; }
  #chat-min { background:none; border:none; color:#ffe9a8; font-size:14px; cursor:pointer; padding:0 6px; }
  #chat-min:hover { color:#fff; }
  #chat.minimized { width:auto; }
  #chat.minimized #chat-body { display:none; }
  #chat.minimized #chat-head { border-radius:16px; cursor:pointer; }
  #chat.minimized #chat-head span { font-size:13px; }
  #chat-log { height:150px; overflow-y:auto; background:rgba(0,0,0,.4); border-radius:0;
    padding:8px 10px; font-size:13px; color:#eee; scrollbar-width:thin; }
  #chat-log .sys { color:#9aa5b1; }
  #chat-log .npc { font-style:italic; }
  #chat-log .line { margin:2px 0; word-break:break-all; }
  #chat-log .who { font-weight:bold; }
  #chat-input { width:100%; padding:9px 12px; font-size:13px; border:none; outline:none;
    background:rgba(0,0,0,.55); color:#fff; border-radius:0 0 10px 10px; }

  /* ---------- 钓鱼小游戏 ---------- */
  #fish-panel { position:fixed; right:14px; bottom:12px; z-index:35; width:200px;
    background:rgba(14,38,54,.95); border-radius:14px; padding:12px; color:#fff;
    border:1px solid rgba(255,255,255,.2); }
  #fish-panel .fp-title { text-align:center; color:#ffd75e; font-size:14px; margin-bottom:10px; }
  #fp-bar { position:relative; width:46px; height:200px; margin:0 auto; border-radius:10px;
    background:linear-gradient(180deg,#2e6f9e,#1d4a6b); overflow:hidden; border:2px solid rgba(255,255,255,.2); }
  #fp-zone { position:absolute; left:0; width:100%; background:rgba(255,215,94,.7); border-radius:4px; }
  #fp-marker { position:absolute; left:-4px; width:54px; height:6px; background:#fff; border-radius:3px;
    box-shadow:0 0 6px rgba(255,255,255,.8); }
  #fp-hint { text-align:center; color:#ffe9a8; font-size:12px; margin:10px 0 6px; min-height:16px; }
  #fp-stats { text-align:center; color:#8ef08e; font-size:12px; margin-bottom:8px; }
  #fp-exit { width:100%; padding:7px; border:none; border-radius:8px; background:rgba(255,255,255,.15);
    color:#ddd; font-size:12px; cursor:pointer; }

  /* ---------- 时间显示 ---------- */
  #clock { position:fixed; right:12px; top:10px; z-index:30;
    padding:5px 16px; border-radius:14px; background:rgba(0,0,0,.5); color:#ffd75e;
    font-size:13px; font-family:Consolas,monospace; }

  /* ---------- 管理员时间控制 ---------- */
  #time-ctrl { position:fixed; right:12px; top:128px; z-index:30; width:180px;
    background:rgba(30,24,14,.9); border:1px solid rgba(255,215,94,.4); border-radius:12px;
    padding:10px 12px; color:#fff; font-size:12px; }
  #time-ctrl .tc-title { color:#ffd75e; font-weight:bold; text-align:center; margin-bottom:6px; display:flex; justify-content:center; align-items:center; gap:6px; }
  #time-min { background:none; border:none; color:#ffd75e; font-size:14px; cursor:pointer; padding:0 2px; line-height:1; }
  #time-min:hover { color:#fff; }
  #time-ctrl.minimized { width:auto; cursor:pointer; padding:8px 12px; }
  #time-ctrl.minimized .tc-body { display:none; }
  #time-ctrl.minimized .tc-title { margin-bottom:0; }
  #time-ctrl input[type=range] { width:100%; accent-color:#ffd75e; }
  #time-val { text-align:center; color:#cfe3ff; margin:4px 0; font-family:Consolas,monospace; }
  #time-unlock, .time-unlock { width:100%; padding:6px; border:none; border-radius:8px; background:#2f6fb3; color:#fff;
    font-size:12px; cursor:pointer; }
  .time-unlock:hover { background:#3a82cc; }

  /* ---------- 物品栏 ---------- */
  #hotbar { position:fixed; left:50%; bottom:8px; transform:translateX(-50%); z-index:30;
    display:flex; gap:6px; background:rgba(0,0,0,.5); padding:6px 8px; border-radius:12px; }
  .hb-slot { width:58px; height:58px; background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.18);
    border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    cursor:pointer; transition:all .12s; }
  .hb-slot:hover { background:rgba(255,255,255,.16); }
  .hb-slot.armed { border-color:#ffd75e; background:rgba(255,215,94,.14); box-shadow:0 0 10px rgba(255,215,94,.35); }
  .hb-icon { font-size:22px; line-height:1.2; }
  .hb-name { font-size:10px; color:#cfe3ff; margin-top:2px; }
  /* 槽位左下角按键提示(小圆角矩形框 + 字母/数字) */
  .slot-key { position:absolute; left:2px; bottom:2px; z-index:4; pointer-events:none;
    min-width:14px; height:14px; padding:0 3px; border-radius:5px;
    background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.35);
    color:#ffe9a8; font-size:9px; line-height:14px; text-align:center; font-family:Consolas,monospace; }
  .hb-ammo { position:absolute; bottom:2px; right:4px; font-size:10px; font-family:Consolas,monospace;
    color:#ffe9a8; text-shadow:0 1px 2px rgba(0,0,0,.7); z-index:3; pointer-events:none; }
  .hb-ammo.empty { color:#ff8a8a; }
  .hb-ammo.reloading { color:#ffd75e; font-size:9px; }
  .hb-ammo.inf { color:#8ef08e; }

  /* ---------- 提示 / 通知 ---------- */
  /* ---------- 通知 ---------- */
  #toasts { position:fixed; left:50%; top:14px; transform:translateX(-50%); z-index:40;
    display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; }
  .toast { background:rgba(0,0,0,.7); color:#fff; padding:8px 18px; border-radius:16px; font-size:14px;
    animation:toastIn .25s ease; }
  .toast.npc { background:rgba(60,44,20,.92); color:#ffe9a8; }
  @keyframes toastIn { from{ transform:translateY(-12px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

  /* 设置齿轮(右下角) */
  #settings-btn { position:fixed; right:12px; bottom:12px; z-index:40; width:40px; height:40px; border-radius:50%;
    background:rgba(0,0,0,.55); color:#ffd75e; border:1px solid rgba(255,255,255,.25); cursor:pointer; font-size:19px;
    display:flex; align-items:center; justify-content:center; transition:transform .15s; }
  #settings-btn:hover { transform:rotate(30deg); background:rgba(0,0,0,.75); }
  #settings-menu { position:fixed; right:12px; bottom:60px; z-index:41; min-width:150px; background:rgba(18,26,34,.95);
    border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:6px; box-shadow:0 8px 24px rgba(0,0,0,.5); }
  .set-item { padding:9px 14px; border-radius:8px; font-size:14px; color:#e6eef5; cursor:pointer; transition:background .12s; }
  .set-item:hover { background:rgba(255,255,255,.12); color:#ffd75e; }
  /* 角色状态条(左上角: 头像 + 血/护甲/蓝/技能CD) —— 紧凑版 */
  #char-hud { position:fixed; left:12px; top:10px; z-index:30; display:flex; gap:8px; align-items:flex-start;
    background:rgba(0,0,0,.5); padding:7px 9px; border-radius:12px; }
  #hud-avatar { width:44px; height:44px; flex:none; border-radius:10px; background:rgba(255,255,255,.08); }
  #char-hud .bars { display:flex; flex-direction:column; gap:3px; width:136px; }
  #char-hud .bar { position:relative; height:13px; background:rgba(255,255,255,.12); border-radius:5px; overflow:hidden; }
  #char-hud .bar .bar-fill { position:absolute; left:0; top:0; bottom:0; width:100%; border-radius:5px; transition:width .1s; }
  #char-hud .bar-label { position:absolute; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:bold; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); z-index:2; }
  .bar.hp .bar-fill { background:linear-gradient(180deg,#ff7b6b,#e04a3a); }
  .bar.armor .bar-fill { background:linear-gradient(180deg,#c9d4de,#8fa3b5); }
  .bar.mana .bar-fill { background:linear-gradient(180deg,#5aa9e6,#2f7fd0); }
  /* 槽位CD进度环(围绕圆角矩形边缘) */
  .hb-slot { position:relative; overflow:hidden; }
  .slot-ring { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
  .slot-fill { position:absolute; left:0; right:0; bottom:0; height:0%; background:rgba(90,170,255,.35); z-index:0; pointer-events:none; transition:height .06s linear; }
  .hb-slot .hb-icon { z-index:1; }
  @keyframes slotFlash { 0% { box-shadow:0 0 0 rgba(255,255,255,0); } 30% { box-shadow:0 0 16px 4px rgba(255,255,255,.85); } 100% { box-shadow:0 0 0 rgba(255,255,255,0); } }
  .hb-slot.used { animation:slotFlash .3s ease; }
  #changelog-panel { position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.6); display:flex;
    align-items:center; justify-content:center; }
  .changelog-box { background:#10181f; border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:24px 30px;
    max-width:520px; width:92vw; max-height:76vh; display:flex; flex-direction:column; color:#dfe8ee; }
  .changelog-box h2 { color:#ffd75e; margin-bottom:12px; font-size:19px; }
  #changelog-body { overflow-y:auto; flex:1; font-size:13px; line-height:1.7; scrollbar-width:thin; }
  #changelog-body h3 { color:#8ef08e; font-size:15px; margin:10px 0 4px; }
  #changelog-body h4 { color:#ffd75e; font-size:13px; margin:8px 0 2px; }
  #changelog-body .cl-item { padding-left:14px; position:relative; color:#cfe3e8; }
  #changelog-body .cl-item::before { content:'•'; position:absolute; left:2px; color:#8fa3b5; }
  .changelog-box button { margin-top:14px; padding:8px 26px; font-size:14px; border:none; border-radius:8px;
    background:#2f6fb3; color:#fff; cursor:pointer; align-self:center; }
  #help-panel { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.55); display:flex;
    align-items:center; justify-content:center; }
  .help-box { background:#fff; border-radius:16px; padding:26px 34px; max-width:460px; font-size:14px; line-height:2; }
  .help-box h2 { margin-bottom:8px; color:#2f5d1e; }
  .help-box .k { display:inline-block; min-width:90px; color:#7a4a21; font-weight:bold; }
  .help-box button { margin-top:12px; padding:8px 26px; font-size:14px; border:none; border-radius:8px;
    background:#4e8a33; color:#fff; cursor:pointer; }

  /* ---------- NPC 气泡 ---------- */
  .npc-bubble { position:fixed; z-index:25; max-width:260px; background:rgba(20,26,32,.92); color:#fff;
    border:1px solid rgba(255,255,255,.25); border-radius:12px; padding:7px 12px; font-size:13px;
    pointer-events:none; transform:translate(-50%,-100%); }
  .npc-bubble::after { content:''; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
    border:7px solid transparent; border-top-color:rgba(20,26,32,.92); }