/* ===================== 学战王者 · 全局通用 Common 组件样式 ===================== */
/* 来源：csscommon.html，提取为 .css 供 index.html 全局引入 */
/* 注意：全局重置（* / html,body overflow）由 index.html 负责，本文件只管主题变量 + 组件类 */

/* ==================== 系统默认字体 ==================== */
/* 各平台使用各自系统默认无衬线字体（HarmonyOS Sans / 微软雅黑 / 苹方 等），零网络下载 */

/* ===================== 全局统一变量 ==================== */
:root{
  --fast:0.22s ease;
  --normal:0.34s ease;
  --slow:0.48s ease;
  --long:0.8s ease;
  --border-radius-base:6px;
  --stroke-width:1.8px;
  --gap-sm:8px;
  --gap-md:16px;
  --gap-lg:24px;
  --shadow-light:0 0 6px var(--ink-mist);
  /* DOM UI 层等比缩放因子（uiScaleManager.ts 动态注入，默认 1 保证启动前不异常） */
  --ui-scale:1;
  /* 字体族（对齐 phaserTheme.ts 的 UI_FONT / UI_FONT_BODY） */
  /* 系统默认优先：system-ui → -apple-system → Segoe UI → Microsoft YaHei → HarmonyOS Sans SC → PingFang SC → sans-serif */
  --font-title:system-ui,-apple-system,"Segoe UI","Microsoft YaHei","HarmonyOS Sans SC","PingFang SC","Helvetica Neue",Arial,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI","Microsoft YaHei","HarmonyOS Sans SC","PingFang SC","Helvetica Neue",Arial,sans-serif;
  /* Vue 子页面别名变量 → 映射到主题变量，使子页面参与主题切换 */
  --bg-page:var(--paper-bg,#f5f0e6);
  --bg-card:var(--paper-base,#FAF6ED);
  --ink-border:var(--ink-border-mist,rgba(60,80,75,0.25));
}
/* DOM 层国风字体（对齐 Phaser 层 UI_FONT） */
body{font-family:var(--font-body);}
.ink-popup__title,.ink-card__title{font-family:var(--font-title);}
/* 6套主题 */
html[data-theme="bamboo"]{
  --ink-primary:#3F6A5F;--ink-deep:#274B41;--ink-mild:#538074;
  --paper-base:#FAF6ED;--paper-bg:#F7F3E8;
  --ink-mist:rgba(63,106,95,0.18);--ink-border-mist:rgba(63,106,95,0.3);
  --text-secondary:#34584E;--disable:#849E96;
  --danger:#c84040;--success:#428a6c;
  /* [T2] 玉色/VIP金/好友状态三色主题变量 */
  --jade:#bfa268;--jade-bg:rgba(191,162,104,0.12);--vip-gold:#c9971c;
  --status-room:#3a7ca5;--status-match:#d9822b;--status-practice:#c84040;
}
html[data-theme="cinnabar"]{
  --ink-primary:#a83232;--ink-deep:#752020;--ink-mild:#c25050;
  --paper-base:#FAF6ED;--paper-bg:#f3ece0;
  --ink-mist:rgba(168,50,50,0.18);--ink-border-mist:rgba(168,50,50,0.3);
  --text-secondary:#5c2c2c;--disable:#b98888;
  --danger:#992222;--success:#408058;
  /* [T2] 玉色/VIP金/好友状态三色主题变量 */
  --jade:#c9a96e;--jade-bg:rgba(201,169,110,0.15);--vip-gold:#d4a017;
  --status-room:#3a7ca5;--status-match:#d9822b;--status-practice:#c84040;
}
html[data-theme="smoke"]{
  --ink-primary:#3a3a3a;--ink-deep:#222222;--ink-mild:#585858;
  --paper-base:#f4f2ee;--paper-bg:#ebe8e2;
  --ink-mist:rgba(58,58,58,0.18);--ink-border-mist:rgba(58,58,58,0.3);
  --text-secondary:#444444;--disable:#888888;
  --danger:#b83838;--success:#387058;
  /* [T2] 玉色/VIP金/好友状态三色主题变量（墨色主题降饱和） */
  --jade:#a89878;--jade-bg:rgba(168,152,120,0.14);--vip-gold:#b8961e;
  --status-room:#3a7ca5;--status-match:#d9822b;--status-practice:#c84040;
}
html[data-theme="moss"]{
  --ink-primary:#638c7b;--ink-deep:#3e5c4f;--ink-mild:#82a899;
  --paper-base:#faf8f1;--paper-bg:#f0ede4;
  --ink-mist:rgba(99,140,123,0.18);--ink-border-mist:rgba(99,140,123,0.3);
  --text-secondary:#4c6b5f;--disable:#94b0a3;
  --danger:#b04444;--success:#468c72;
  /* [T2] 玉色/VIP金/好友状态三色主题变量 */
  --jade:#b8a06a;--jade-bg:rgba(184,160,106,0.12);--vip-gold:#c09016;
  --status-room:#3a7ca5;--status-match:#d9822b;--status-practice:#c84040;
}
html[data-theme="stoneblue"]{
  --ink-primary:#2d5f80;--ink-deep:#1c3d54;--ink-mild:#477ca0;
  --paper-base:#f5f8fc;--paper-bg:#eef3f9;
  --ink-mist:rgba(45,95,128,0.18);--ink-border-mist:rgba(45,95,128,0.3);
  --text-secondary:#2c4c60;--disable:#7898ad;
  --danger:#c23c3c;--success:#3a7c66;
  /* [T2] 玉色/VIP金/好友状态三色主题变量（石青主题状态蓝加深以区分主题色） */
  --jade:#c2a875;--jade-bg:rgba(194,168,117,0.14);--vip-gold:#c79c22;
  --status-room:#1a5276;--status-match:#d9822b;--status-practice:#c84040;
}
html[data-theme="ochre"]{
  --ink-primary:#965a2e;--ink-deep:#6b401e;--ink-mild:#b87c48;
  --paper-base:#fbf3e8;--paper-bg:#f4e9d8;
  --ink-mist:rgba(150,90,46,0.18);--ink-border-mist:rgba(150,90,46,0.3);
  --text-secondary:#5c3c22;--disable:#b89678;
  --danger:#b94242;--success:#488468;
  /* [T2] 玉色/VIP金/好友状态三色主题变量 */
  --jade:#c9a15e;--jade-bg:rgba(201,161,94,0.12);--vip-gold:#cc9b1d;
  --status-room:#3a7ca5;--status-match:#d9822b;--status-practice:#c84040;
}
/* 主题应用：body 背景与文字色（不覆盖 index.html 的 overflow:hidden） */
body{background:var(--paper-bg);color:var(--ink-deep);transition:background .4s ease,color .4s ease;}
::selection{background:var(--ink-mist);}

/* ===================== 全局动画库 ===================== */
@keyframes cloudSlow{0%{transform:translateX(-10%) translateY(-5%);opacity:0.08;}50%{transform:translateX(10%) translateY(5%);opacity:0.12;}100%{transform:translateX(-10%) translateY(-5%);}}
@keyframes cloudFast{0%{transform:translateX(5%) translateY(3%);opacity:0.05;}50%{transform:translateX(-15%) translateY(-8%);opacity:0.09;}100%{transform:translateX(5%) translateY(3%);}}
@keyframes inkPulse{0%{box-shadow:var(--shadow-light);}50%{box-shadow:0 0 12px var(--ink-border-mist);}100%{box-shadow:var(--shadow-light);}}
@keyframes cloudFloat{0%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-4px) rotate(1deg);}100%{transform:translateY(0) rotate(-2deg);}}
@keyframes sealPress{0%{scale:1;}30%{scale:0.94;}100%{scale:1;}}
@keyframes inkWrite{from{opacity:0;transform:translateY(10px);filter:blur(3px);}to{opacity:1;transform:translateY(0);filter:blur(0);}}
@keyframes strokeFlow{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}
@keyframes dotBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes spin{to{transform:rotate(360deg);}}
/* 全局流云背景 */
.ink-bg-cloud{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.ink-bg-cloud::before{content:"";position:absolute;width:120%;height:120%;top:-10%;left:-10%;background:radial-gradient(circle at 30% 20%,var(--ink-primary) 0%,transparent 60%);animation:cloudSlow 22s linear infinite;}
.ink-bg-cloud::after{content:"";position:absolute;width:140%;height:140%;top:-20%;left:-20%;background:radial-gradient(circle at 70% 80%,var(--ink-primary) 0%,transparent 65%);animation:cloudFast 30s linear infinite;}

/* ===================== 纯CSS云纹通用装饰 ===================== */
.ink-cloud-divider{
  width:100%;height:2px;background:var(--ink-mist);margin:var(--gap-lg) 0;position:relative;
}
.ink-cloud-divider::before,.ink-cloud-divider::after{
  content:"";position:absolute;width:18px;height:18px;border:var(--stroke-width) solid var(--ink-primary);
  border-top:transparent;border-left:transparent;border-radius:0 100% 0 0;top:-8px;animation:cloudFloat 3s ease-in-out infinite;
}
.ink-cloud-divider::before{left:24px;transform:rotate(45deg);}
.ink-cloud-divider::after{right:24px;transform:rotate(-135deg);}
.ink-cloud-wrap{position:relative;padding:var(--gap-lg);}
.ink-cloud-wrap::before{
  content:"";position:absolute;top:8px;left:8px;width:24px;height:24px;
  border-top:var(--stroke-width) solid var(--ink-primary);border-left:var(--stroke-width) solid var(--ink-primary);
  border-radius:12px 0 0 0;
}
.ink-cloud-wrap::after{
  content:"";position:absolute;bottom:8px;right:8px;width:24px;height:24px;
  border-bottom:var(--stroke-width) solid var(--ink-primary);border-right:var(--stroke-width) solid var(--ink-primary);
  border-radius:0 0 12px 0;
}

/* ===================== 1. 按钮全套 ===================== */
.ink-btn{
  min-width:96px;padding:10px 20px;border:var(--stroke-width) solid var(--ink-primary);
  border-radius:var(--border-radius-base);background:var(--paper-base);color:var(--ink-deep);
  font-family:inherit;font-size:calc(15px * var(--ui-scale));letter-spacing:1.2px;cursor:pointer;outline:none;
  transition:var(--fast);box-shadow:var(--shadow-light);
}
.ink-btn:hover{background:var(--ink-primary);color:var(--paper-base);box-shadow:0 0 10px var(--ink-border-mist);}
.ink-btn:active{transform:translateY(1px);box-shadow:0 0 3px var(--ink-mist);}
.ink-btn:focus-visible{outline:1px solid var(--ink-deep);}
.ink-btn:disabled{border-color:var(--disable);color:var(--disable);cursor:not-allowed;box-shadow:none;transform:none;background:var(--paper-base);}
.ink-btn--primary{background:var(--ink-primary);color:var(--paper-base);}
.ink-btn--primary:hover{background:var(--ink-deep);}
.ink-btn--danger{border-color:var(--danger);color:var(--danger);}
.ink-btn--danger:hover{background:var(--danger);color:#fff;}
.ink-btn--thin{border-width:1px;box-shadow:none;min-width:80px;padding:8px 16px;}
.ink-btn--text{border:none;box-shadow:none;padding:8px 12px;min-width:auto;}
.ink-btn--text:hover{background:var(--ink-mist);}
.ink-btn--seal{width:72px;height:72px;min-width:auto;border:none;background:var(--ink-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:calc(14px * var(--ui-scale));}
.ink-btn--seal:hover{background:var(--ink-deep);}
.ink-btn--seal:active{animation:sealPress var(--fast);}
.ink-btn--lg{padding:14px 30px;font-size:calc(16px * var(--ui-scale));min-width:120px;}
.ink-btn--sm{padding:8px 14px;font-size:calc(14px * var(--ui-scale));min-width:76px;letter-spacing:1px;}
.ink-btn--icon{display:flex;gap:6px;align-items:center;justify-content:center;}
.ink-btn--answer{width:auto;min-width:110px;padding:10px 16px;text-align:left;}
.ink-btn--answer:hover{animation:inkPulse 1.5s infinite;}
.ink-btn--success{border-color:var(--success);color:var(--success);}
.ink-btn--success:hover{background:var(--success);color:#fff;}

/* ===================== 2. 通用卡片 ===================== */
.ink-card{
  width:100%;padding:var(--gap-lg);background:var(--paper-base);border:var(--stroke-width) solid var(--ink-primary);
  border-radius:var(--border-radius-base);box-shadow:var(--shadow-light);
}
.ink-card__title{font-size:calc(17px * var(--ui-scale));letter-spacing:3px;color:var(--ink-deep);margin-bottom:var(--gap-md);font-weight:normal;}
.ink-card__desc{color:var(--text-secondary);line-height:1.8;}
.ink-card-row{display:flex;gap:var(--gap-md);flex-wrap:wrap;margin-top:var(--gap-lg);}

/* ===================== 3. 弹窗组件 ===================== */
.ink-mask{
  position:fixed;inset:0;background:rgba(30,50,45,0.2);z-index:9998;
  display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:var(--slow);
}
.ink-mask.active{opacity:1;visibility:visible;}
.ink-popup{
  width:min(440px,calc(100vw - 24px));padding:var(--gap-lg);background:var(--paper-base);
  border:var(--stroke-width) solid var(--ink-primary);border-radius:var(--border-radius-base);
  box-shadow:0 0 14px var(--ink-border-mist);position:relative;transform:translateY(-12px);transition:var(--normal);
}
.ink-mask.active .ink-popup{transform:translateY(0);}
.ink-popup__close{position:absolute;top:12px;right:14px;font-size:calc(20px * var(--ui-scale));color:var(--ink-primary);cursor:pointer;transition:var(--fast);}
.ink-popup__close:hover{transform:scale(1.12);color:var(--ink-deep);}
.ink-popup__title{text-align:center;font-size:calc(20px * var(--ui-scale));letter-spacing:4px;margin-bottom:var(--gap-md);animation:inkWrite .6s forwards;}
.ink-popup__content{color:var(--text-secondary);line-height:2;margin-bottom:var(--gap-lg);font-size:calc(15px * var(--ui-scale));}
.ink-popup__btns{display:flex;gap:var(--gap-md);justify-content:center;flex-wrap:wrap;}
.ink-popup__btns .ink-btn{padding:8px 16px;min-width:86px;}
.ink-popup__btns--vertical{display:flex;flex-direction:column;gap:12px;margin-top:16px;align-items:stretch;}
.ink-popup__btns--vertical .ink-btn{width:100%;}
.ink-popup--scroll{
  background:linear-gradient(180deg,var(--paper-base) 0%,var(--paper-bg) 50%,var(--paper-base) 100%);
  border-color:var(--ink-mild);
}
.ink-popup--scroll::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:6px;
  background:var(--ink-mist);border-radius:0 0 6px 6px;
}
.ink-popup--scroll::after{
  content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60%;height:6px;
  background:var(--ink-mist);border-radius:6px 6px 0 0;
}
.ink-select-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.ink-select-item{
  display:flex;align-items:center;gap:12px;padding:10px 6px;cursor:pointer;border-radius:4px;
  transition:background var(--fast);
}
.ink-select-item:hover{background:var(--ink-mist);}
.ink-select-item.is-selected{background:var(--ink-mist);}
.ink-select-mark{width:22px;height:22px;border:2px solid var(--ink-border-mist);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:calc(14px * var(--ui-scale));transition:all var(--fast);}
.ink-select-mark--radio{border-radius:50%;}
.ink-select-mark--checkbox{border-radius:3px;}
.ink-select-mark.is-selected{background:var(--ink-primary);border-color:var(--ink-primary);color:var(--paper-base);}
.ink-select-mark--radio.is-selected{box-shadow:inset 0 0 0 4px var(--paper-base);}
.ink-select-label{font-size:calc(15px * var(--ui-scale));color:var(--ink-deep);transition:color var(--fast);}
.ink-select-label.is-selected{color:var(--ink-primary);font-weight:600;}

/* ===================== 4. 加载组件 ===================== */
.loader-ring{width:46px;height:46px;border:3px solid var(--ink-mist);border-top-color:var(--ink-primary);border-radius:50%;animation:spin 1s linear infinite;}
.loader-dots{display:flex;gap:6px;}
.loader-dots span{width:12px;height:12px;background:var(--ink-primary);border-radius:50%;animation:dotBounce 1.3s infinite;}
.loader-dots span:nth-child(2){animation-delay:0.2s;}
.loader-dots span:nth-child(3){animation-delay:0.4s;}
.loader-bar{width:160px;height:5px;background:var(--ink-mist);overflow:hidden;border-radius:4px;}
.loader-bar__inner{height:100%;width:35%;background:var(--ink-primary);animation:strokeFlow 1.2s infinite;}

/* ===================== 5. 学科标签、PVP职业标识 ===================== */
.ink-tag{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:110px;height:44px;padding:0 10px;border-radius:999px;
  font-size:calc(16px * var(--ui-scale));letter-spacing:2px;border:2px solid;
}
.ink-tag-math{border-color:#2e7020;background-color:#39882c;color:#ffffff;}
.ink-tag-chinese{border-color:#a83232;background-color:#d65050;color:#ffffff;}
.ink-tag-english{border-color:#2266bb;background-color:#3478d8;color:#ffffff;}
.ink-tag-science{border-color:#779911;background-color:#92bb26;color:#ffffff;}

.ink-job-wrap{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;}
.ink-job{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:110px;height:44px;border-radius:var(--border-radius-base);
  border:2px solid;font-size:calc(16px * var(--ui-scale));letter-spacing:2px;
}
.ink-job-atk{border-color:#2d7270;background:rgba(45,114,112,0.85);color:#fff;}
.ink-job-def{border-color:#a83232;background:rgba(168,50,50,0.85);color:#fff;}
.ink-job-break{border-color:#2d5f80;background:rgba(45,95,128,0.85);color:#fff;}
.ink-job-heal{border-color:#3e7c6b;background:rgba(62,124,107,0.85);color:#fff;}

/* ===================== 6. 连段/超神 ===================== */
.ink-combo{
  padding:6px 16px;border-radius:20px;background:var(--ink-primary);color:#fff;text-align:center;animation:inkPulse 1.8s infinite;
  width:fit-content;font-size:calc(14px * var(--ui-scale));letter-spacing:1px;
}
.ink-combo-super{background:#d4a046;}

/* 排位段位徽章（对齐 constants.ts GRADE_COLORS） */
.ink-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  font-size:calc(16px * var(--ui-scale));font-weight:bold;color:#fff;
  border:2px solid;box-shadow:var(--shadow-light);
}
.ink-badge-bronze{border-color:#CD7F32;background:rgba(205,127,50,0.85);}
.ink-badge-silver{border-color:#C0C0C0;background:rgba(192,192,192,0.85);color:#333;}
.ink-badge-gold{border-color:#FFD700;background:rgba(255,215,0,0.85);color:#333;}
.ink-badge-platinum{border-color:#E5E4E2;background:rgba(229,228,226,0.85);color:#333;}
.ink-badge-diamond{border-color:#B9F2FF;background:rgba(185,242,255,0.85);color:#333;}
.ink-badge-king{border-color:#FF4500;background:rgba(255,69,0,0.85);}

/* ===================== 7. 输入框、Toast ===================== */
.ink-input{width:100%;padding:10px 14px;border:var(--stroke-width) solid var(--ink-primary);border-radius:var(--border-radius-base);background:var(--paper-base);color:var(--ink-deep);font-family:inherit;transition:var(--fast);outline:none;font-size:calc(15px * var(--ui-scale));}
.ink-input:focus{box-shadow:0 0 8px var(--ink-border-mist);}
.ink-input::placeholder{color:var(--disable);}
.ink-toast{position:fixed;left:50%;top:50%;transform:translateX(-50%) translateY(-50%) scale(0.92);padding:12px 26px;background:var(--paper-base);border:var(--stroke-width) solid var(--ink-primary);border-radius:var(--border-radius-base);opacity:0;visibility:hidden;transition:var(--normal);z-index:100000;font-size:calc(15px * var(--ui-scale));max-width:calc(100vw - 48px);text-align:center;}
.ink-toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(-50%) scale(1);}

/* ===================== 8. 业务组件：怪物面板、职业、装备、背包 ===================== */
.ink-monster-panel{display:flex;gap:var(--gap-sm);flex-wrap:wrap;margin-top:var(--gap-md);}
.ink-monster-item{padding:6px 12px;border:1px solid var(--ink-mist);border-radius:4px;}
.ink-monster-label{font-size:calc(14px * var(--ui-scale));color:var(--text-secondary);}
.ink-monster-val{font-size:calc(15px * var(--ui-scale));color:var(--ink-deep);letter-spacing:1px;}

.ink-equip-wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap-md);}
.ink-equip-slot{
  aspect-ratio:1/1;border:2px dashed var(--ink-mist);border-radius:var(--border-radius-base);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--disable);font-size:calc(14px * var(--ui-scale));position:relative;
}
.ink-equip-slot.active{border-style:solid;border-color:var(--ink-primary);background:var(--ink-mist);color:var(--ink-deep);}
.ink-star{color:#d4a046;font-size:calc(14px * var(--ui-scale));position:absolute;bottom:4px;}

.ink-bag-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;}
.ink-bag-item{
  width:100%;aspect-ratio:1/1;background:var(--paper-base);border:1px solid var(--ink-mist);border-radius:var(--border-radius-base);
  display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
}
.ink-bag-empty{border:1px dashed var(--ink-mist);color:var(--disable);}
.ink-bag-worn{border-color:var(--ink-primary);box-shadow:0 0 4px var(--ink-mist);}
.ink-bag-glam::after{content:"彩";position:absolute;bottom:4px;left:4px;font-size:calc(14px * var(--ui-scale));background:#d4a042;color:#fff;padding:1px 4px;border-radius:2px;}
.ink-bag-star{position:absolute;bottom:4px;right:4px;font-size:calc(14px * var(--ui-scale));color:#d4a046;}

.ink-task-item{padding:14px;border:1px solid var(--ink-mist);border-radius:var(--border-radius-base);display:flex;justify-content:space-between;align-items:center;gap:var(--gap-md);}
.ink-task-text{flex:1;}
.ink-task-title{font-size:calc(16px * var(--ui-scale));margin-bottom:3px;}
.ink-task-desc{font-size:calc(14px * var(--ui-scale));color:var(--text-secondary);}
.ink-realm-progress{width:100%;height:8px;background:var(--ink-mist);border-radius:8px;overflow:hidden;}
.ink-realm-progress__inner{height:100%;background:var(--ink-primary);transition:var(--normal);}
.theme-control{display:flex;gap:var(--gap-md);flex-wrap:wrap;justify-content:center;margin-bottom:40px;}
.theme-btn{padding:9px 18px;border:var(--stroke-width) solid var(--ink-primary);border-radius:var(--border-radius-base);background:var(--paper-base);cursor:pointer;transition:var(--fast);font-size:calc(14px * var(--ui-scale));}
.theme-btn.active{background:var(--ink-primary);color:var(--paper-base);}

/* ===================== 9. 性能优化：独立合成层（will-change 提示合成，不触发重排） ===================== */
.ink-mask,.ink-popup,.ink-toast,.ink-btn,.theme-btn{will-change:transform,opacity;}