/* 灾难沙盒 2.0 · 设计令牌与通用组件（theme-2）
 * 只定义 --d2-* 变量和 .d2-* 类，不给裸元素加样式，引入后不影响未使用这些类的页面。
 * 颜色语言：攻 = 暖色（琥珀、橙红）；守 = 冷色（青、蓝绿）；核爆 = 收敛色（灰琥珀 / 灰青）。
 * 说明见 work/round2/theme-2.md。 */
:root{
  /* —— 基础面 —— */
  --d2-paper:#f3f0e7;        /* 浅色页面底 */
  --d2-paper-2:#e8e3d6;      /* 下沉面、分隔区 */
  --d2-card:#fffdf8;         /* 浅色卡片 */
  --d2-ink:#151a20;          /* 深色面（首屏、试玩区、游戏面板） */
  --d2-ink-2:#1d242c;        /* 深色卡片 */
  --d2-ink-3:#2a333d;        /* 深色描边/悬停 */
  /* —— 文字 —— */
  --d2-text:#1a2127;         /* 浅底正文 */
  --d2-text-2:#545e67;       /* 浅底次要 */
  --d2-text-3:#858c93;       /* 浅底弱化（≥14px 使用） */
  --d2-on-ink:#f2eee4;       /* 深底正文 */
  --d2-on-ink-2:#a7b0b8;     /* 深底次要 */
  --d2-line:#dbd5c6;         /* 浅底描边 */
  --d2-line-ink:rgba(255,255,255,.12); /* 深底描边 */
  /* —— 攻：暖色 —— */
  --d2-atk:#ec7a2f;          /* 主色：按钮、能量条、选中态 */
  --d2-atk-strong:#b9481a;   /* 浅底上的文字/图标（对比度≥4.5） */
  --d2-atk-glow:#ffb35c;     /* 深底上的高光、渐变末端 */
  --d2-atk-soft:#fbe5d2;     /* 浅色底衬 */
  --d2-atk-edge:#b4511c;     /* 按钮底边（按压感） */
  /* —— 守：冷色 —— */
  --d2-def:#1d9b98;
  --d2-def-strong:#0e6b69;
  --d2-def-glow:#5fd8d0;
  --d2-def-soft:#d4eeeb;
  --d2-def-edge:#12706d;
  /* —— 核爆：收敛色（不用高饱和、不用庆祝式金色） —— */
  --d2-nu:#9c8a6c;           /* 强化观察（灰琥珀） */
  --d2-nu-strong:#6b5c45;
  --d2-nu-soft:#ebe5d8;
  --d2-nu-edge:#75664f;
  --d2-nu-def:#6c8a88;       /* 核爆防护模式（灰青） */
  --d2-nu-def-strong:#46605e;
  --d2-nu-def-soft:#dfe7e5;
  --d2-nu-def-edge:#506967;
  /* —— 状态 —— */
  --d2-ok:#3f8f55;           /* 达标、完好 */
  --d2-warn:#d79c22;         /* 接近线、提醒 */
  --d2-bad:#c9443a;          /* 失败、倒塌 */
  --d2-star:#f4b52f;         /* 星级（仅海啸、地震） */
  /* —— 字体 —— */
  --d2-font:"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;
  --d2-font-num:"Bahnschrift","DIN Alternate","Roboto Condensed","Arial Narrow",var(--d2-font);
  --d2-font-mono:"JetBrains Mono","Cascadia Mono",Consolas,"Courier New",monospace;
  /* —— 字号阶梯（约 1.25 倍） —— */
  --d2-fs-xs:12px;  --d2-fs-sm:13px;  --d2-fs-base:15px; --d2-fs-md:17px;
  --d2-fs-lg:20px;  --d2-fs-xl:25px;  --d2-fs-2xl:32px;
  --d2-fs-3xl:clamp(30px,4.2vw,46px);
  --d2-fs-4xl:clamp(38px,6.4vw,74px);
  --d2-lh-tight:1.15; --d2-lh:1.65;
  /* —— 间距（4 的倍数） —— */
  --d2-s1:4px; --d2-s2:8px; --d2-s3:12px; --d2-s4:16px; --d2-s5:24px; --d2-s6:32px; --d2-s7:48px; --d2-s8:64px; --d2-s9:96px;
  --d2-gutter:clamp(16px,4vw,48px);   /* 页面左右留白 */
  --d2-maxw:1200px;                    /* 内容最大宽度 */
  /* —— 圆角 —— */
  --d2-r-xs:6px; --d2-r-sm:10px; --d2-r-md:14px; --d2-r-lg:20px; --d2-r-xl:28px; --d2-r-pill:999px;
  /* —— 阴影 —— */
  --d2-sh-sm:0 1px 2px rgba(20,26,32,.08),0 2px 6px rgba(20,26,32,.06);
  --d2-sh-md:0 4px 12px rgba(20,26,32,.10),0 12px 28px rgba(20,26,32,.08);
  --d2-sh-lg:0 18px 48px rgba(10,14,18,.28);
  --d2-glow-atk:0 0 0 1px rgba(236,122,47,.45),0 8px 28px rgba(236,122,47,.35);
  --d2-glow-def:0 0 0 1px rgba(29,155,152,.45),0 8px 28px rgba(29,155,152,.32);
  /* —— 动效 —— */
  --d2-ease:cubic-bezier(.2,.8,.2,1);
  --d2-dur-1:120ms; --d2-dur-2:200ms; --d2-dur-3:360ms;
  /* —— 焦点 —— */
  --d2-focus:0 0 0 3px var(--d2-paper),0 0 0 5px var(--d2-atk);
}

/* 根容器：需要 2.0 基础排版的区域加 .d2-root（不直接改 body） */
.d2-root{font:400 var(--d2-fs-base)/var(--d2-lh) var(--d2-font);color:var(--d2-text);background:var(--d2-paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* 深色语境：内部文字、描边改用深底令牌 */
.d2-on-ink{--d2-text:var(--d2-on-ink);--d2-text-2:var(--d2-on-ink-2);--d2-text-3:#7e8790;--d2-line:var(--d2-line-ink);--d2-card:var(--d2-ink-2);--d2-focus:0 0 0 3px var(--d2-ink),0 0 0 5px var(--d2-atk-glow);background:var(--d2-ink);color:var(--d2-text)}

/* —— 排版工具 —— */
.d2-eyebrow{font:600 var(--d2-fs-xs)/1.4 var(--d2-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--d2-text-2)}
.d2-h1{font:900 var(--d2-fs-4xl)/var(--d2-lh-tight) var(--d2-font);letter-spacing:-.01em;margin:0}
.d2-h2{font:800 var(--d2-fs-3xl)/1.2 var(--d2-font);letter-spacing:-.005em;margin:0}
.d2-h3{font:800 var(--d2-fs-lg)/1.3 var(--d2-font);margin:0}
.d2-lead{font-size:var(--d2-fs-md);line-height:1.7;color:var(--d2-text-2)}
.d2-num{font-family:var(--d2-font-num);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.d2-atk-text{color:var(--d2-atk-strong)} .d2-def-text{color:var(--d2-def-strong)} .d2-nu-text{color:var(--d2-nu-strong)}
.d2-on-ink .d2-atk-text{color:var(--d2-atk-glow)} .d2-on-ink .d2-def-text{color:var(--d2-def-glow)} .d2-on-ink .d2-nu-text{color:#cdbb9a}

/* —— 按钮 ——
 * 默认是中性实心按钮；.d2-btn--atk / --def / --nu / --nu-def 切换攻守色；--ghost 描边；--lg / --sm 尺寸。
 * 底边 3px 深色模拟实体按键，按下时下沉。 */
.d2-btn{--b-bg:var(--d2-ink);--b-fg:#fff;--b-edge:#000;display:inline-flex;align-items:center;justify-content:center;gap:var(--d2-s2);min-height:44px;padding:0 var(--d2-s5);border:0;border-radius:var(--d2-r-sm);background:var(--b-bg);color:var(--b-fg);box-shadow:inset 0 -3px 0 var(--b-edge),var(--d2-sh-sm);font:700 var(--d2-fs-base)/1 var(--d2-font);letter-spacing:.02em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform var(--d2-dur-1) var(--d2-ease),box-shadow var(--d2-dur-2) var(--d2-ease),filter var(--d2-dur-2);-webkit-tap-highlight-color:transparent}
.d2-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.d2-btn:active{transform:translateY(2px);box-shadow:inset 0 -1px 0 var(--b-edge)}
.d2-btn:focus-visible{outline:0;box-shadow:inset 0 -3px 0 var(--b-edge),var(--d2-focus)}
.d2-btn[disabled],.d2-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.d2-btn--atk{--b-bg:var(--d2-atk);--b-edge:var(--d2-atk-edge)}
.d2-btn--atk:hover{box-shadow:inset 0 -3px 0 var(--b-edge),var(--d2-glow-atk)}
.d2-btn--def{--b-bg:var(--d2-def);--b-edge:var(--d2-def-edge)}
.d2-btn--def:hover{box-shadow:inset 0 -3px 0 var(--b-edge),var(--d2-glow-def)}
.d2-btn--nu{--b-bg:var(--d2-nu);--b-edge:var(--d2-nu-edge)}
.d2-btn--nu-def{--b-bg:var(--d2-nu-def);--b-edge:var(--d2-nu-def-edge)}
.d2-btn--light{--b-bg:var(--d2-card);--b-fg:var(--d2-text);--b-edge:var(--d2-line)}
.d2-btn--ghost{--b-bg:transparent;--b-fg:var(--d2-text);box-shadow:inset 0 0 0 1.5px var(--d2-line)}
.d2-btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--d2-text-2)}
.d2-btn--ghost:active{box-shadow:inset 0 0 0 1.5px var(--d2-text-2)}
.d2-btn--lg{min-height:52px;padding:0 var(--d2-s6);font-size:var(--d2-fs-md);border-radius:var(--d2-r-md)}
.d2-btn--sm{min-height:34px;padding:0 var(--d2-s4);font-size:var(--d2-fs-sm);border-radius:var(--d2-r-xs);box-shadow:inset 0 -2px 0 var(--b-edge)}
.d2-btn--block{display:flex;width:100%}

/* —— 卡片 —— */
.d2-card{background:var(--d2-card);border:1px solid var(--d2-line);border-radius:var(--d2-r-lg);box-shadow:var(--d2-sh-sm);overflow:hidden}
.d2-card--raised{box-shadow:var(--d2-sh-md)}
.d2-card--atk{border-top:4px solid var(--d2-atk)}
.d2-card--def{border-top:4px solid var(--d2-def)}
.d2-card--nu{border-top:4px solid var(--d2-nu)}
.d2-card-body{padding:var(--d2-s5)}

/* —— 标签 —— */
.d2-tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--d2-r-pill);font:700 var(--d2-fs-xs)/1 var(--d2-font);letter-spacing:.04em;background:var(--d2-paper-2);color:var(--d2-text-2);white-space:nowrap}
.d2-tag--atk{background:var(--d2-atk-soft);color:var(--d2-atk-strong)}
.d2-tag--def{background:var(--d2-def-soft);color:var(--d2-def-strong)}
.d2-tag--nu{background:var(--d2-nu-soft);color:var(--d2-nu-strong)}
.d2-tag--nu-def{background:var(--d2-nu-def-soft);color:var(--d2-nu-def-strong)}
.d2-on-ink .d2-tag{background:rgba(255,255,255,.08);color:var(--d2-on-ink-2)}
.d2-on-ink .d2-tag--atk{background:rgba(236,122,47,.18);color:var(--d2-atk-glow)}
.d2-on-ink .d2-tag--def{background:rgba(29,155,152,.2);color:var(--d2-def-glow)}

/* —— 分段按钮 ——
 * <div class="d2-seg" role="group"><button aria-pressed="true" class="d2-seg-atk">破坏模式</button><button aria-pressed="false" class="d2-seg-def">防护模式</button></div>
 * 选中项用 aria-pressed="true"（或 .is-on）；.d2-seg-atk / -def / -nu / -nu-def 决定选中色，不加则为中性深色。 */
.d2-seg{--seg-on:var(--d2-ink);display:inline-flex;gap:3px;padding:3px;border-radius:var(--d2-r-md);background:var(--d2-paper-2);box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.d2-seg>button,.d2-seg>a{--seg-on-c:var(--seg-on);flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 var(--d2-s4);border:0;border-radius:calc(var(--d2-r-md) - 3px);background:transparent;color:var(--d2-text-2);font:700 var(--d2-fs-sm)/1.2 var(--d2-font);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--d2-dur-2),color var(--d2-dur-2),box-shadow var(--d2-dur-2)}
.d2-seg>button:hover,.d2-seg>a:hover{color:var(--d2-text)}
.d2-seg>[aria-pressed="true"],.d2-seg>.is-on{background:var(--seg-on-c);color:#fff;box-shadow:var(--d2-sh-sm)}
.d2-seg>button:focus-visible,.d2-seg>a:focus-visible{outline:0;box-shadow:var(--d2-focus)}
.d2-seg>.d2-seg-atk{--seg-on-c:var(--d2-atk)} .d2-seg>.d2-seg-def{--seg-on-c:var(--d2-def)}
.d2-seg>.d2-seg-nu{--seg-on-c:var(--d2-nu)} .d2-seg>.d2-seg-nu-def{--seg-on-c:var(--d2-nu-def)}
.d2-on-ink .d2-seg{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--d2-line-ink)}
.d2-on-ink .d2-seg{--seg-on:#eae5da} .d2-on-ink .d2-seg>[aria-pressed="true"]:not([class*="d2-seg-"]),.d2-on-ink .d2-seg>.is-on:not([class*="d2-seg-"]){color:var(--d2-ink)}

/* —— 进度条（能量 / 预算 / 完好度） ——
 * <div class="d2-meter d2-meter--atk" style="--v:.62;--cost:.18;--line:.7"><i></i></div>
 * --v 当前值 0–1；--cost 可选，显示「本发花费」的闪烁段（从当前值末端往回扣）；--line 可选，目标线位置（需加 .d2-meter--line）。 */
.d2-meter{--fill:var(--d2-text-2);--v:0;position:relative;height:12px;border-radius:var(--d2-r-pill);background:var(--d2-paper-2);box-shadow:inset 0 1px 2px rgba(0,0,0,.12);overflow:hidden}
.d2-meter>i{position:absolute;inset:0 auto 0 0;width:calc(var(--v)*100%);border-radius:inherit;background:var(--fill);transition:width var(--d2-dur-3) var(--d2-ease)}
.d2-meter--atk{--fill:linear-gradient(90deg,var(--d2-atk-edge),var(--d2-atk) 55%,var(--d2-atk-glow))}
.d2-meter--def{--fill:linear-gradient(90deg,var(--d2-def-edge),var(--d2-def) 55%,var(--d2-def-glow))}
.d2-meter--nu{--fill:var(--d2-nu)}
.d2-meter--nu-def{--fill:var(--d2-nu-def)}
.d2-meter[style*="--cost"]::after{content:"";position:absolute;top:0;bottom:0;left:calc((var(--v) - var(--cost))*100%);width:calc(var(--cost)*100%);background:repeating-linear-gradient(135deg,rgba(255,255,255,.75) 0 4px,rgba(255,255,255,.25) 4px 8px);animation:d2-blink 1.1s steps(2,start) infinite}
.d2-meter--line::before{content:"";position:absolute;z-index:1;top:-2px;bottom:-2px;left:calc(var(--line,.5)*100%);width:2px;margin-left:-1px;background:var(--d2-text)}
.d2-meter--lg{height:18px}
.d2-on-ink .d2-meter{background:rgba(255,255,255,.1)}
@keyframes d2-blink{to{opacity:.35}}

/* —— 星级（仅海啸、地震；核爆不评星） —— */
.d2-stars{display:inline-flex;gap:2px;font-size:var(--d2-fs-lg);line-height:1;color:var(--d2-paper-2);letter-spacing:0}
.d2-stars>.on{color:var(--d2-star);text-shadow:0 1px 0 #c98a12}
.d2-on-ink .d2-stars{color:rgba(255,255,255,.18)}

/* —— 状态提示（命中薄弱点 / 达到目标 / 未达到目标） —— */
.d2-toast{display:inline-flex;align-items:center;gap:var(--d2-s2);padding:var(--d2-s2) var(--d2-s4);border-radius:var(--d2-r-pill);background:var(--d2-ink);color:var(--d2-on-ink);font:700 var(--d2-fs-sm)/1.3 var(--d2-font);box-shadow:var(--d2-sh-md)}
.d2-toast--atk{background:var(--d2-atk);color:#fff}
.d2-toast--def{background:var(--d2-def);color:#fff}
.d2-toast--nu{background:var(--d2-nu-soft);color:var(--d2-nu-strong);box-shadow:none}

/* —— 抽屉 / 面板（游戏页侧栏、底部抽屉） —— */
.d2-panel{background:color-mix(in srgb,var(--d2-ink) 88%,transparent);color:var(--d2-on-ink);border:1px solid var(--d2-line-ink);border-radius:var(--d2-r-lg);box-shadow:var(--d2-sh-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.d2-panel--light{background:color-mix(in srgb,var(--d2-card) 92%,transparent);color:var(--d2-text);border-color:var(--d2-line)}

@media (prefers-reduced-motion:reduce){
  .d2-btn,.d2-meter>i,.d2-seg>button,.d2-seg>a{transition:none}
  .d2-meter[style*="--cost"]::after{animation:none}
}