/* 横屏提示（JS 控制，不用 media query，避免误判） */
.rotate-tip { display:none; position:absolute; inset:0; z-index:9999;
  align-items:center; justify-content:center; flex-direction:column; gap:3vh;
  background:#0a0e0a; color:#c8a24a; }
.rotate-tip.show { display:flex; }
.rotate-tip .rt-text { font-size:6vw; letter-spacing:.3em; }
.rotate-tip .rt-btn { padding:1.4vh 3vw; background:rgba(200,162,74,.18);
  border:1px solid #c8a24a; border-radius:.8vh; color:#e6cd83; font-size:3.2vw; cursor:pointer; }
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; background:#0a0e0a;
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; color:#e8dcc0;
  user-select:none; }
#app { width:100%; height:100%; position:relative; }

/* 强制横屏（竖屏时旋转提示） */

.screen { display:none; position:absolute; inset:0; overflow:hidden; }
.screen.active { display:flex; }
.bg-cover { position:absolute; inset:0;
  background:url(assets/背景.png) center/cover no-repeat;
  filter:brightness(.5) saturate(.85); z-index:0; }
.bg-cover::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,14,10,.55),rgba(10,14,10,.85)); }

/* ============ 加载页 ============ */
#scr-load { align-items:center; justify-content:center; flex-direction:column; }
.load-bg { position:absolute; inset:0; background:#0a0e0a; z-index:0; }
.load-center { position:relative; z-index:1; text-align:center; animation:fadeIn 1.2s ease; }
#load-logo { width:26vh; max-width:44vw; filter:drop-shadow(0 0 30px rgba(200,162,74,.5)); }
.brand { margin-top:2.2vh; font-size:5.2vh; letter-spacing:.5em; color:#d9c27a;
  text-shadow:0 0 20px rgba(200,162,74,.6); font-weight:700; }
.version { position:fixed; right:3vh; bottom:2.5vh; font-size:2vh; color:#7a7050; letter-spacing:.1em; }
.load-bar { position:absolute; bottom:12vh; width:46vw; height:.7vh; background:rgba(200,162,74,.15);
  border-radius:1vh; overflow:hidden; z-index:1; }
.load-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#8a6d2a,#e0c060);
  animation:load 2.4s ease forwards; }
@keyframes load { to { width:100%; } }
@keyframes fadeIn { from{opacity:0; transform:scale(.94);} to{opacity:1; transform:scale(1);} }

/* ============ 登录页 ============ */
#scr-login { align-items:center; justify-content:center; }
.auth-card { position:relative; z-index:2; width:44vw; max-width:560px; min-width:340px;
  background:rgba(18,22,16,.82); border:1px solid rgba(200,162,74,.35); border-radius:1.4vh;
  padding:3.2vh 3.6vw; backdrop-filter:blur(4px); box-shadow:0 10px 40px rgba(0,0,0,.6); }
.game-title { text-align:center; font-size:4.4vh; letter-spacing:.18em; color:#e6cd83; margin-bottom:2.4vh; }
.game-title span { color:#a33; }
.tabs { display:flex; border-bottom:1px solid rgba(200,162,74,.25); margin-bottom:2.2vh; }
.tab { flex:1; background:none; border:none; color:#8a8060; font-size:2.4vh; padding:1.2vh 0;
  cursor:pointer; letter-spacing:.1em; border-bottom:3px solid transparent; transition:.2s; }
.tab.active { color:#e6cd83; border-bottom-color:#c8a24a; }
.tab-body { display:flex; flex-direction:column; gap:1.6vh; }
.tab-body.hide { display:none; }
input { width:100%; padding:1.6vh 1.4vw; background:rgba(255,255,255,.06);
  border:1px solid rgba(200,162,74,.3); border-radius:.8vh; color:#efe6c8; font-size:2.1vh; outline:none; }
input:focus { border-color:#c8a24a; background:rgba(255,255,255,.1); }
.btn-primary { width:100%; padding:1.7vh; background:linear-gradient(180deg,#8a6d2a,#5c4718);
  border:1px solid #c8a24a; border-radius:.8vh; color:#ffe9a8; font-size:2.4vh; letter-spacing:.2em;
  cursor:pointer; font-weight:700; transition:.15s; }
.btn-primary:active { transform:translateY(1px); filter:brightness(1.15); }
.btn-code { position:absolute; right:.4vw; top:50%; transform:translateY(-50%);
  padding:0 1.2vw; height:100%; background:rgba(200,162,74,.2); border:1px solid rgba(200,162,74,.4);
  color:#e6cd83; border-radius:.6vh; font-size:1.8vh; cursor:pointer; white-space:nowrap; }
.code-row { position:relative; display:flex; align-items:center; }
.code-row input { padding-right:26%; }
.link { color:#b09a60; font-size:1.8vh; cursor:pointer; text-align:right; }
.link:hover { color:#e6cd83; }
.msg { margin-top:1.4vh; min-height:2vh; text-align:center; font-size:1.9vh; color:#e07a5f; }

/* ============ 大厅 ============ */
#scr-lobby { flex-direction:column; }
.lobby-top { position:relative; z-index:2; display:flex; align-items:center;
  padding:2vh 2.4vw; gap:2vw; }
.me-card { display:flex; align-items:center; gap:1.2vw; padding:.8vh 1.4vw;
  background:rgba(18,22,16,.75); border:1px solid rgba(200,162,74,.35); border-radius:1vh; cursor:pointer; }
.me-card img { width:5.4vh; height:5.4vh; border-radius:50%; border:2px solid #c8a24a; object-fit:cover; }
.me-info #me-name { font-size:2.2vh; color:#e6cd83; }
.me-info .lv { font-size:1.7vh; color:#a89870; }
.lobby-title { margin:auto; font-size:3.4vh; color:#e6cd83; letter-spacing:.3em; text-shadow:0 0 18px rgba(200,162,74,.5); }
.lobby-center { position:relative; z-index:2; flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2.4vh; }
.btn-big { width:40vw; max-width:440px; padding:2vh; background:linear-gradient(180deg,#8a6d2a,#5c4718);
  border:1px solid #c8a24a; border-radius:1vh; color:#ffe9a8; font-size:2.8vh; letter-spacing:.25em;
  cursor:pointer; font-weight:700; }
.btn-big.ghost { background:rgba(18,22,16,.7); color:#c8b890; font-size:2.2vh; }
.btn-big:active { transform:translateY(1px); }
.lobby-bottom { position:relative; z-index:2; padding:0 2.4vw 2vh; }
.chatbox { width:46vw; max-width:620px; background:rgba(12,16,12,.8); border:1px solid rgba(200,162,74,.3);
  border-radius:1vh; overflow:hidden; }
.chat-msgs { height:16vh; overflow-y:auto; padding:1vh 1.2vw; font-size:1.8vh; line-height:1.6; }
.chat-msgs .m { color:#bfae82; }
.chat-msgs .m b { color:#e6cd83; }
.chat-input { display:flex; border-top:1px solid rgba(200,162,74,.25); }
.chat-input input { border:none; border-radius:0; background:rgba(255,255,255,.05); font-size:1.9vh; }
.chat-input button { padding:0 2vw; background:#5c4718; border:none; color:#ffe9a8; font-size:1.9vh; cursor:pointer; }

/* ============ 通用标题/返回 ============ */
.scr-title { position:relative; z-index:2; text-align:center; font-size:4vh; color:#e6cd83;
  letter-spacing:.3em; margin-top:6vh; }
.btn-back { position:absolute; z-index:3; left:3vw; bottom:3vh; padding:1.2vh 2.4vw;
  background:rgba(18,22,16,.8); border:1px solid rgba(200,162,74,.4); border-radius:.8vh;
  color:#c8b890; font-size:2vh; cursor:pointer; }

/* ============ 模式选择 ============ */
#scr-mode { flex-direction:column; align-items:center; }
.mode-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,1fr);
  gap:2.4vh 3vw; margin-top:5vh; width:52vw; max-width:760px; }
.mode-card { padding:3.4vh 2vw; background:rgba(18,22,16,.8); border:1px solid rgba(200,162,74,.4);
  border-radius:1.2vh; color:#e6cd83; font-size:3.4vh; font-weight:700; cursor:pointer;
  display:flex; flex-direction:column; gap:.6vh; transition:.2s; }
.mode-card small { font-size:1.8vh; color:#a89870; font-weight:400; letter-spacing:.1em; }
.mode-card:hover, .mode-card:active { background:rgba(138,109,42,.5); border-color:#e0c060; transform:scale(1.03); }

/* ============ 选势力 ============ */
#scr-nation { flex-direction:column; align-items:center; }
.nation-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr);
  gap:2vh 2vw; margin-top:4vh; width:70vw; max-width:1000px; }
.nation-card { padding:2vh 1.4vw; background:rgba(18,22,16,.82); border:1px solid rgba(200,162,74,.35);
  border-radius:1vh; cursor:pointer; text-align:center; transition:.2s; }
.nation-card:hover, .nation-card.sel { background:rgba(138,109,42,.45); border-color:#e0c060; transform:scale(1.03); }
.nation-card .n-name { font-size:2.6vh; color:#e6cd83; font-weight:700; }
.nation-card .n-terr { font-size:1.9vh; color:#a89870; margin-top:.4vh; }
.nation-card .n-plus { font-size:1.6vh; color:#7fae7f; margin-top:.8vh; line-height:1.4; }
.nation-card .n-minus { font-size:1.6vh; color:#c07a6a; line-height:1.4; }

/* ============ 对战桌 ============ */
.game-screen { flex-direction:column; }
.opponents { position:relative; z-index:2; display:flex; justify-content:center; gap:1.6vw;
  padding:1.4vh 2vw 0; flex-wrap:wrap; }
.opp-card { width:15vw; min-width:130px; background:rgba(18,22,16,.82);
  border:1px solid rgba(200,162,74,.3); border-radius:.8vh; padding:.8vh 1vw; position:relative; }
.opp-card.active { border-color:#e0c060; box-shadow:0 0 14px rgba(224,192,96,.5); }
.opp-card.dead { opacity:.4; filter:grayscale(1); }
.opp-card .o-name { font-size:1.8vh; color:#e6cd83; display:flex; justify-content:space-between; }
.opp-card .o-terr { font-size:2.2vh; color:#d9c27a; font-weight:700; }
.opp-hand { display:flex; gap:2px; margin-top:.6vh; }
.opp-hand img { width:2.2vh; height:3.2vh; border-radius:3px; object-fit:cover; }
.opp-equips { display:flex; gap:2px; margin-top:.4vh; }
.opp-equips img { width:3vh; height:4vh; border-radius:3px; object-fit:cover; border:1px solid rgba(200,162,74,.5); }

.battlefield { position:relative; z-index:2; flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1vh; }
.bf-log { position:absolute; top:.6vh; left:2vw; font-size:1.7vh; color:#9a8f68; max-width:30vw; }
.bf-center { display:flex; align-items:center; justify-content:center; gap:2vw; min-height:20vh; }
.bf-center img { height:22vh; border-radius:.8vh; box-shadow:0 0 20px rgba(0,0,0,.6); }
.bf-center .vs { font-size:4vh; color:#a33; font-weight:900; }

.self-area { position:relative; z-index:2; padding:1vh 2vw 1.6vh;
  background:linear-gradient(0deg,rgba(8,10,8,.92),rgba(8,10,8,.4)); }
.self-info { display:flex; align-items:center; gap:2vw; font-size:2vh; color:#d9c27a; margin-bottom:.8vh; }
.self-info .terr b { color:#ffe9a8; font-size:2.6vh; }
.self-info .phase { margin-left:auto; color:#8fae8f; font-size:1.9vh; }
.self-equips { display:flex; gap:.6vw; margin-bottom:.8vh; min-height:5vh; }
.self-equips img { height:5vh; border-radius:.5vh; border:1px solid rgba(200,162,74,.5); }
.hand { display:flex; gap:.8vw; overflow-x:auto; padding:.6vh 0; min-height:16vh; }
.hand img { height:15vh; border-radius:.6vh; border:2px solid transparent; cursor:pointer; transition:.15s;
  flex-shrink:0; }
.hand img:hover { border-color:#e0c060; transform:translateY(-1vh); }
.hand img.selected { border-color:#e0c060; transform:translateY(-1.4vh); box-shadow:0 0 16px rgba(224,192,96,.7); }
.self-actions { display:flex; gap:1.4vw; justify-content:center; margin-top:.6vh; }
.self-actions button { padding:1.2vh 3vw; background:rgba(18,22,16,.85); border:1px solid rgba(200,162,74,.4);
  border-radius:.8vh; color:#e6cd83; font-size:2.1vh; cursor:pointer; min-width:14vw; }
.self-actions button:active { background:rgba(138,109,42,.6); }
.self-actions button:disabled { opacity:.35; cursor:default; }

/* 卡牌详情弹窗 */
.card-pop { display:none; position:absolute; z-index:20; right:2vw; bottom:3vh; width:30vw; max-width:420px;
  background:rgba(14,18,14,.96); border:1px solid #c8a24a; border-radius:1vh; padding:1.6vh 1.6vw;
  box-shadow:0 10px 40px rgba(0,0,0,.7); }
.card-pop.show { display:block; }
.card-pop h3 { color:#e6cd83; font-size:2.4vh; margin-bottom:.6vh; }
.card-pop .cp-type { font-size:1.7vh; color:#a89870; margin-bottom:1vh; }
.card-pop .cp-desc { font-size:1.9vh; line-height:1.6; color:#d0c6a6; }

/* 模态弹窗 */
.modal { display:none; position:absolute; inset:0; z-index:30; background:rgba(0,0,0,.7);
  align-items:center; justify-content:center; }
.modal.show { display:flex; }
.modal-box { background:rgba(18,22,16,.97); border:1px solid #c8a24a; border-radius:1vh;
  padding:2.6vh 2.6vw; min-width:36vw; max-width:70vw; max-height:80vh; overflow-y:auto; }
.modal-box h3 { color:#e6cd83; font-size:2.6vh; margin-bottom:1.6vh; text-align:center; }
.modal-box .m-list { display:flex; flex-direction:column; gap:1vh; }
.modal-box .m-item { padding:1.2vh 1.4vw; background:rgba(255,255,255,.05); border:1px solid rgba(200,162,74,.3);
  border-radius:.7vh; cursor:pointer; color:#d9c27a; font-size:2vh; text-align:center; }
.modal-box .m-item:hover { background:rgba(138,109,42,.4); }
.modal-box .m-item.dis { opacity:.4; cursor:default; }

/* ============ 房间列表 ============ */
#scr-rooms { flex-direction:column; align-items:center; }
.rooms-panel { position:relative; z-index:2; width:64vw; max-width:900px; margin-top:3vh;
  background:rgba(14,18,14,.85); border:1px solid rgba(200,162,74,.3); border-radius:1vh; padding:2.4vh 2vw; }
.rooms-tools { display:flex; gap:1.4vw; align-items:center; margin-bottom:2vh; flex-wrap:wrap; }
.rooms-tools .btn-primary.compact { width:auto; padding:1.2vh 2vw; font-size:2vh; flex:0 0 auto; }
.join-row { display:flex; gap:.6vw; flex:1; min-width:240px; }
.join-row input { flex:1; font-size:2vh; }
.join-row button { padding:0 2vw; background:#5c4718; border:1px solid #c8a24a; color:#ffe9a8;
  border-radius:.6vh; font-size:2vh; cursor:pointer; white-space:nowrap; }
.ghost2 { background:rgba(18,22,16,.7)!important; color:#c8b890!important; }
.rooms-list { max-height:42vh; overflow-y:auto; display:flex; flex-direction:column; gap:1vh; }
.room-item { display:flex; align-items:center; justify-content:space-between; padding:1.4vh 1.6vw;
  background:rgba(255,255,255,.05); border:1px solid rgba(200,162,74,.3); border-radius:.7vh; }
.room-item .ri-info { font-size:2vh; color:#d9c27a; }
.room-item .ri-info b { color:#e6cd83; }
.room-item button { padding:.8vh 2vw; background:#5c4718; border:1px solid #c8a24a;
  color:#ffe9a8; border-radius:.6vh; font-size:1.9vh; cursor:pointer; }
.rooms-empty { text-align:center; color:#7a7050; padding:3vh 0; font-size:2vh; }

/* ============ 房间等待 ============ */
#scr-room { flex-direction:column; align-items:center; }
.room-panel { position:relative; z-index:2; width:66vw; max-width:960px; margin-top:2vh;
  background:rgba(14,18,14,.85); border:1px solid rgba(200,162,74,.3); border-radius:1vh; padding:2.4vh 2.4vw; }
.room-players { display:flex; gap:1.6vw; margin-bottom:2vh; flex-wrap:wrap; }
.rp-card { flex:1; min-width:160px; background:rgba(255,255,255,.05);
  border:1px solid rgba(200,162,74,.3); border-radius:.8vh; padding:1.4vh 1.2vw; text-align:center; }
.rp-card .rpc-name { font-size:2.2vh; color:#e6cd83; }
.rp-card .rpc-nation { font-size:1.9vh; color:#a89870; margin-top:.5vh; }
.rp-card .rpc-ready { font-size:1.8vh; margin-top:.6vh; color:#8fae8f; }
.rp-card .rpc-ready.no { color:#c07a6a; }
.rp-card.empty { opacity:.35; }
.room-nation-pick .rp-title { font-size:2.2vh; color:#d9c27a; margin-bottom:1.2vh; }
.nation-grid.small { width:100%; grid-template-columns:repeat(6,1fr); gap:1vh; margin-top:0; }
.nation-grid.small .nation-card { padding:1.2vh .4vw; }
.nation-grid.small .n-name { font-size:1.9vh; }
.nation-grid.small .n-terr { font-size:1.5vh; }
.nation-grid.small .n-plus, .nation-grid.small .n-minus { display:none; }
.nation-grid.small .nation-card.taken { opacity:.35; cursor:not-allowed; }
.room-actions { display:flex; gap:1.6vw; justify-content:center; margin-top:2.4vh; }
.room-actions #btn-room-ready { width:22vw; max-width:260px; }
.btn-back-inline { padding:1.6vh 2.4vw; background:rgba(18,22,16,.8);
  border:1px solid rgba(200,162,74,.4); border-radius:.8vh; color:#c8b890; font-size:2.1vh; cursor:pointer; }
.room-hint { text-align:center; margin-top:1.4vh; font-size:1.9vh; color:#a89870; min-height:2vh; }

/* ============ 设置 ============ */
#scr-settings { flex-direction:column; align-items:center; }
.settings-panel { position:relative; z-index:2; width:44vw; max-width:560px; margin-top:3vh;
  background:rgba(14,18,14,.9); border:1px solid rgba(200,162,74,.35); border-radius:1vh; padding:2.6vh 2.4vw; }
.set-row { display:flex; align-items:center; justify-content:space-between; padding:1.4vh 0;
  font-size:2.2vh; color:#d9c27a; }
.set-row.volume-row { gap:1.4vw; }
.set-row input[type=range] { flex:1; accent-color:#c8a24a; }
.switch { position:relative; display:inline-block; width:7vh; height:3.8vh; }
.switch input { display:none; }
.switch i { position:absolute; inset:0; background:#333; border-radius:3vh; transition:.2s; }
.switch i::after { content:""; position:absolute; width:3vh; height:3vh; left:.4vh; top:.4vh;
  background:#888; border-radius:50%; transition:.2s; }
.switch input:checked + i { background:#5c4718; }
.switch input:checked + i::after { transform:translateX(3.2vh); background:#e0c060; }
.set-sep { height:1px; background:rgba(200,162,74,.25); margin:2vh 0; }
.set-info { font-size:2vh; color:#a89870; line-height:2; }
.set-info b { color:#e6cd83; }
.btn-primary.danger { background:linear-gradient(180deg,#8a2a2a,#5c1818)!important;
  border-color:#a33!important; color:#ffb0b0!important; margin-top:2vh; }
.settings-panel .btn-back-inline { width:100%; margin-top:1.2vh; }

/* ================= v1.1.0 新增样式 ================= */

/* --- 个人主页放大（左上角） --- */
.me-card { padding: 1.2vh 1.8vw !important; gap: 1.6vw !important; transform: scale(1.12); transform-origin: top left; }
.me-card img { width: 7vh !important; height: 7vh !important; border-width: 3px !important; }
.me-info #me-name { font-size: 2.8vh !important; }
.me-info .lv { font-size: 2vh !important; }
.me-badges { display:flex; align-items:center; gap:.8vw; margin-top:.3vh; }
.vip-badge { display:inline-block; padding:.25vh 1vw; border-radius:999px; font-size:1.6vh;
  color:#3a2a00; font-weight:700; background:linear-gradient(180deg,#ffe07a,#c8a24a);
  box-shadow:0 0 6px rgba(255,215,120,.7); }
.vip-badge.hide { display:none; }
.me-title { font-size:1.7vh; color:#ffd970; margin-left:1vw; }

/* --- 设置：下拉选择 --- */
.set-select { background:rgba(255,255,255,.06); color:#e6cd83; border:1px solid rgba(200,162,74,.45);
  border-radius:.7vh; padding:.9vh 1.2vw; font-size:2vh; outline:none; min-width:14vw; }
.set-select option { background:#12160e; color:#e6cd83; }

/* --- 登录页：小德社区一键登录按钮 --- */
.btn-xiaode { display:flex; align-items:center; justify-content:center; gap:1vw; width:100%;
  padding:1.5vh 0; margin:.4vh 0 1vh; border:none; border-radius:.9vh; cursor:pointer;
  font-size:2.2vh; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#2b8a3e,#38a169); box-shadow:0 3px 10px rgba(0,0,0,.35); }
.btn-xiaode:active { transform:scale(.98); }
.btn-xiaode .xd-logo { display:inline-flex; align-items:center; justify-content:center;
  width:3.4vh; height:3.4vh; border-radius:50%; background:#fff; color:#2b8a3e; font-weight:900; font-size:2vh; }
.xd-sep { position:relative; text-align:center; margin:1.2vh 0; }
.xd-sep span { position:relative; z-index:2; background:transparent; padding:0 1vw; font-size:1.7vh; color:#8a7f5c; }
.xd-sep::before { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(200,162,74,.25); }

/* --- 聊天室（局内 + 同阵营） --- */
.chat-wrap { position:relative; z-index:2; width:56vw; max-width:720px; margin:2vh auto 0;
  background:rgba(14,18,14,.92); border:1px solid rgba(200,162,74,.35); border-radius:1vh; overflow:hidden; }
.chat-tabs { display:flex; border-bottom:1px solid rgba(200,162,74,.25); }
.chat-tab { flex:1; padding:1.4vh 0; background:transparent; border:none; cursor:pointer;
  font-size:2.1vh; color:#a89870; }
.chat-tab.active { color:#e6cd83; background:rgba(138,109,42,.22); font-weight:700; }
.chat-wrap .chat-msgs { height:42vh; padding:1.4vh 1.6vw; }
.chat-wrap .chat-msgs .chat-empty { color:#7a7358; text-align:center; margin-top:6vh; font-size:1.9vh; }
.chat-wrap .chat-msgs .m.mine b { color:#8fd18f; }
.chat-wrap .chat-input { display:flex; border-top:1px solid rgba(200,162,74,.25); }
.chat-wrap .chat-input input { flex:1; border:none; background:rgba(255,255,255,.05); color:#e6cd83;
  padding:1.4vh 2vw; font-size:2vh; outline:none; }
.chat-wrap .chat-input button { padding:0 3vw; background:#5c4718; border:none; color:#ffe9a8;
  font-size:2vh; cursor:pointer; }

/* --- 局内聊天入口按钮 --- */
.btn-inroom-chat { position:absolute; right:1.5vw; top:1.5vh; z-index:6;
  padding:.9vh 2vw; border-radius:.8vh; border:1px solid rgba(200,162,74,.5);
  background:rgba(18,22,16,.85); color:#e6cd83; font-size:2vh; cursor:pointer; }

/* --- 通用弹窗（替代 alert/prompt） --- */
.dlg-mask { display:none; position:fixed; inset:0; z-index:900; background:rgba(0,0,0,.72);
  align-items:center; justify-content:center; }
.dlg-mask.show { display:flex; }
.dlg-box { width:52vw; max-width:620px; background:rgba(16,20,14,.98);
  border:1px solid #c8a24a; border-radius:1.2vh; padding:2.6vh 2.6vw;
  box-shadow:0 10px 40px rgba(0,0,0,.6); }
.dlg-title { font-size:2.8vh; color:#e6cd83; text-align:center; font-weight:700; margin-bottom:1.6vh; }
.dlg-body { font-size:2.1vh; color:#d9c27a; line-height:1.7; white-space:pre-wrap;
  max-height:52vh; overflow-y:auto; text-align:left; }
.dlg-label { font-size:1.9vh; color:#a89870; margin:1vh 0 .5vh; }
.dlg-input { width:100%; padding:1.3vh 1.4vw; font-size:2vh; color:#e6cd83;
  background:rgba(255,255,255,.06); border:1px solid rgba(200,162,74,.4); border-radius:.7vh; outline:none; }
.dlg-actions { display:flex; gap:1.4vw; margin-top:2.2vh; }
.dlg-btn { flex:1; padding:1.4vh 0; border-radius:.8vh; font-size:2.1vh; cursor:pointer; border:none; }
.dlg-btn.primary { background:linear-gradient(180deg,#c8a24a,#8a6d2a); color:#1a1408; font-weight:700; }
.dlg-btn.ghost { background:rgba(255,255,255,.06); color:#c8b890; border:1px solid rgba(200,162,74,.35); }

/* --- 轻提示 --- */
.toast-tip { position:fixed; left:50%; bottom:8vh; transform:translate(-50%,20px);
  background:rgba(20,24,16,.96); color:#e6cd83; border:1px solid rgba(200,162,74,.5);
  padding:1.2vh 3vw; border-radius:999px; font-size:2vh; z-index:999;
  opacity:0; pointer-events:none; transition:.25s; }
.toast-tip.show { opacity:1; transform:translate(-50%,0); }

/* --- 画质档位（视觉近似：低画质轻降锐度/色彩） --- */
body.q-low img { filter:saturate(.82) contrast(.95); }
body.q-high img { filter:none; }

/* 低分辨率设备/小屏适配 */
@media (max-width: 760px) {
  .dlg-box { width:80vw; }
  .chat-wrap { width:88vw; }
  .settings-panel { width:82vw; }
}

/* scr-chat 纵向布局 */
#scr-chat { flex-direction:column; align-items:center; }
/* ===== v1.2 对战桌布局优化 ===== */
.self-area { display:flex; flex-direction:column; align-items:center; }
.self-info { width:100%; max-width:92vw; }
.hand { justify-content:center !important; align-items:flex-end; flex-wrap:wrap; gap:1vw !important; min-height:22vh !important; width:100%; max-width:94vw; margin:0 auto; }
.hand img { height:20vh !important; min-height:120px; flex-shrink:0; object-fit:contain; background:rgba(0,0,0,.25); border-radius:.8vh; transition:.18s; }
.hand img:hover { transform:translateY(-1.2vh); }
.hand img.selected { transform:translateY(-1.8vh); }
.self-equips { justify-content:center; }
.self-equips img { height:6vh !important; }
.btn-inroom-chat { position:fixed !important; right:1.5vw !important; top:1.5vh !important; z-index:50 !important; padding:1.1vh 2.6vw !important; font-size:2.1vh !important; background:rgba(200,162,74,.92) !important; color:#1a1408 !important; font-weight:700 !important; border:2px solid #ffe9a8 !important; border-radius:.8vh; box-shadow:0 3px 14px rgba(0,0,0,.6) !important; }
.bf-center img { height:26vh !important; }
.opp-hand img { width:2.8vh !important; height:4vh !important; }
/* 当前回合：该玩家区域放大发光 */
.opp-card.active { transform:scale(1.08); box-shadow:0 0 18px rgba(224,192,96,.85) !important; }
.opp-card.active .opp-hand img { width:3.4vh !important; height:4.8vh !important; }
.self-area.my-turn .hand img { height:24vh !important; }
/* 对手头像 */
.opp-card .o-head { display:flex; align-items:center; gap:.6vw; margin-bottom:.4vh; }
.opp-card .o-avatar { width:4.4vh; height:4.4vh; border-radius:50%; border:2px solid #c8a24a; object-fit:cover; background:rgba(0,0,0,.4); }
.opp-card .o-nick { font-size:1.9vh; color:#e6cd83; font-weight:700; }
/* 创建房间模式弹窗 */
.mode-mask { display:none; position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.78); align-items:center; justify-content:center; }
.mode-mask.show { display:flex; }
.mode-box { width:64vw; max-width:680px; background:rgba(16,20,14,.98); border:1px solid #c8a24a; border-radius:1.2vh; padding:3vh 3vw; }
.mode-box h3 { color:#e6cd83; font-size:3vh; text-align:center; margin-bottom:2.4vh; }
.mode-list { display:grid; grid-template-columns:1fr 1fr; gap:1.6vh 1.6vw; }
.mode-item { padding:2.4vh 0; text-align:center; background:rgba(255,255,255,.05); border:1px solid rgba(200,162,74,.35); border-radius:1vh; color:#e6cd83; font-size:2.4vh; cursor:pointer; transition:.2s; }
.mode-item:hover { background:rgba(138,109,42,.5); transform:translateY(-3px); }
.mode-item small { display:block; font-size:1.6vh; color:#a89870; margin-top:.6vh; }

/* ===== v1.3 头像/昵称/聊天样式 ===== */
/* 房间玩家头像 */
.rp-card { display:flex; flex-direction:column; align-items:center; }
.rpc-avatar { width:6vh; height:6vh; border-radius:50%; border:2px solid #c8a24a; object-fit:cover; background:rgba(0,0,0,.4); margin-bottom:.6vh; }
.rpc-vip { display:inline-block; padding:0 .6vw; border-radius:999px; font-size:1.4vh; color:#3a2a00; font-weight:700; background:linear-gradient(180deg,#ffe07a,#c8a24a); }
/* 自己区头像 */
.self-info .self-avatar { width:5vh; height:5vh; border-radius:50%; border:2px solid #c8a24a; object-fit:cover; background:rgba(0,0,0,.4); }
.self-info .self-nick { font-size:2vh; color:#e6cd83; font-weight:700; }
/* 聊天消息带头像 */
.chat-wrap .chat-msgs .m { display:flex; align-items:flex-start; gap:.8vw; margin-bottom:.8vh; }
.chat-wrap .chat-msgs .m-avatar { width:4vh; height:4vh; border-radius:50%; border:2px solid #c8a24a; object-fit:cover; flex:none; background:rgba(0,0,0,.4); }
.chat-wrap .chat-msgs .m-body { font-size:1.9vh; line-height:1.5; color:#d0c6a6; word-break:break-all; }
.chat-wrap .chat-msgs .m-body b { color:#e6cd83; display:block; font-size:1.8vh; }
.chat-wrap .chat-msgs .m.mine .m-body b { color:#8fd18f; }

/* ============ v1.4 对战特效 / 国家属性 ============ */
.fly-card{position:fixed;z-index:9998;border-radius:6px;pointer-events:none;
  transition:transform .5s cubic-bezier(.4,.1,.3,1),opacity .5s;box-shadow:0 8px 30px rgba(200,162,74,.6);}
.impact{position:fixed;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;z-index:9999;
  background:radial-gradient(circle,#ffd970,rgba(200,80,40,0) 70%);animation:boom .7s ease-out forwards;pointer-events:none;}
@keyframes boom{0%{transform:scale(.3);opacity:1;}100%{transform:scale(7);opacity:0;}}
.dmg-float{position:fixed;z-index:9999;margin:-10px 0 0 -20px;color:#ff6b6b;font-weight:800;font-size:5vh;
  text-shadow:0 2px 8px rgba(0,0,0,.8);pointer-events:none;animation:dmgUp 1.1s ease-out forwards;}
@keyframes dmgUp{0%{transform:translateY(0) scale(.6);opacity:0;}20%{transform:translateY(-1vh) scale(1.2);opacity:1;}100%{transform:translateY(-6vh) scale(1);opacity:0;}}
.opp-card{transition:box-shadow .25s,transform .25s;cursor:default;}
.opp-card.targetable{box-shadow:0 0 0 3px rgba(255,120,80,.9),0 0 22px rgba(255,120,80,.7);cursor:pointer;animation:tgtPulse 1s infinite;}
@keyframes tgtPulse{50%{box-shadow:0 0 0 3px rgba(255,160,80,1),0 0 32px rgba(255,160,80,.95);}}
.nation-card .n-merit{color:#7ee0a0;font-size:1.5vh;line-height:1.35;margin-top:.4vh;}
.nation-card .n-flaw{color:#e08a7e;font-size:1.5vh;line-height:1.35;margin-top:.3vh;}
.nation-info-block{background:rgba(10,20,15,.6);border-radius:12px;padding:14px 16px;margin:10px 0;}
.ni-title{font-size:15px;font-weight:700;margin:8px 0 4px;}
.ni-merit{color:#7ee0a0;}
.ni-flaw{color:#e08a7e;}
.ni-text{color:#c8d4d0;font-size:13.5px;line-height:1.7;}

/* ============ v1.5 属性 / 特效 / 倒计时 ============ */
.card-pop .cp-row{font-size:1.7vh;color:#b8c4c0;margin-bottom:.5vh;}
.card-pop .cp-row b{color:#9fb0a8;font-weight:600;}
.cp-god{display:inline-block;margin-left:.8vh;padding:.15vh .8vh;border-radius:.8vh;font-size:1.5vh;
  color:#2a1e08;background:linear-gradient(90deg,#ffe08a,#c8a24a);font-weight:700;vertical-align:middle;
  box-shadow:0 0 12px rgba(255,210,120,.7);}
/* 神锦囊金光特效 */
.god-fx{position:fixed;inset:0;z-index:99990;pointer-events:none;display:flex;align-items:center;justify-content:center;
  flex-direction:column;background:radial-gradient(circle,rgba(255,220,130,.28),rgba(255,180,60,0) 60%);}
.god-fx.out{opacity:0;transition:opacity .6s;}
.god-fx-icon{font-size:14vh;color:#ffd970;text-shadow:0 0 40px #ffb347,0 0 80px #ff8a00;
  animation:godPulse .9s ease-out;}
@keyframes godPulse{0%{transform:scale(.2) rotate(-30deg);opacity:0;}50%{transform:scale(1.15) rotate(6deg);opacity:1;}100%{transform:scale(1) rotate(0);opacity:1;}}
.god-fx-name{margin-top:1.5vh;font-size:4vh;font-weight:800;color:#ffe9b0;
  text-shadow:0 0 20px #ffb347,0 2px 10px rgba(0,0,0,.8);letter-spacing:.4vh;animation:godName .9s ease-out;}
@keyframes godName{0%{opacity:0;transform:translateY(2vh);}100%{opacity:1;transform:translateY(0);}}
.god-fx-ray{position:absolute;width:2px;height:60vh;left:50%;top:20%;transform-origin:top center;
  background:linear-gradient(rgba(255,220,140,.9),rgba(255,180,60,0));animation:godRay 1s ease-out;}
@keyframes godRay{0%{opacity:0;height:0;}40%{opacity:.9;}100%{opacity:0;height:70vh;}}
/* 获取/销毁机密 扫描特效 */
.scan-fx{position:fixed;inset:0;z-index:99990;pointer-events:none;background:rgba(6,20,14,.55);}
.scan-line{position:absolute;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,#4dffb0,transparent);
  box-shadow:0 0 24px #4dffb0;animation:scanMove 1.3s ease-in-out;}
.scan-fx.destroy .scan-line{background:linear-gradient(90deg,transparent,#ff5c5c,transparent);box-shadow:0 0 24px #ff5c5c;}
@keyframes scanMove{0%{top:0;opacity:0;}10%{opacity:1;}50%{top:50%;}90%{opacity:1;}100%{top:100%;opacity:0;}}
.scan-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:4vh;font-weight:800;color:#8ff5c0;
  text-shadow:0 0 20px rgba(77,255,176,.8);animation:scanLabel 1.3s ease-out;}
.scan-fx.destroy .scan-label{color:#ff8f8f;text-shadow:0 0 20px rgba(255,92,92,.8);}
@keyframes scanLabel{0%{opacity:0;transform:translate(-50%,-50%) scale(.6);}30%{opacity:1;transform:translate(-50%,-50%) scale(1.1);}100%{opacity:0;transform:translate(-50%,-50%) scale(1);}}
/* 回合倒计时 */
.turn-timer{position:absolute;left:50%;top:1.2vh;transform:translateX(-50%);z-index:30;display:none;
  align-items:center;gap:1vh;padding:.8vh 2vh;border-radius:2vh;background:rgba(10,20,15,.72);
  border:1px solid rgba(200,162,74,.4);}
.turn-timer.show{display:flex;}
.turn-timer .tt-label{font-size:1.8vh;color:#9fb0a8;}
.turn-timer .tt-num{font-size:3.2vh;font-weight:800;color:#e6cd83;min-width:3.2vh;text-align:center;}
.turn-timer .tt-sec{font-size:1.6vh;color:#9fb0a8;margin-left:-.4vh;}
.turn-timer .tt-bar{width:18vh;height:.9vh;border-radius:.5vh;background:rgba(255,255,255,.12);overflow:hidden;}
.turn-timer .tt-fill{height:100%;width:100%;border-radius:.5vh;background:linear-gradient(90deg,#7ee0a0,#c8a24a);transition:width .9s linear;}
.turn-timer.urgent{border-color:rgba(255,90,90,.7);animation:urgentBlink .7s infinite;}
.turn-timer.urgent .tt-num{color:#ff6b6b;}
.turn-timer.urgent .tt-fill{background:linear-gradient(90deg,#ff6b6b,#ff3b3b);}
@keyframes urgentBlink{50%{box-shadow:0 0 22px rgba(255,80,80,.8);}}