/* 海啸沙盒 · 第三轮统一布局（在 game-2.css 之后加载）
 * 顶栏：名牌 → 场景 → 模式 …… 状态 → 挑战 → ⋯（DSKit.menu）。
 * 左上：#ds-hud = 目标卡（DSKit.goal，详情里是原来的过水 / 完好建筑 / 防御点数等）+ 薄弱点列表。
 * 底部从左到右：本局档位 .ds-lv（破坏「强化」/ 防护「灾害」）→ 防护托盘 → 参数（成因、方向、浪高 / 震级）
 *   → 操作组 [撤销][重新开始][暂停][倍速][跳过] → 召唤海啸（最右）。运行前后保留参数与播放控件占位。
 * 要冲毁的房屋头顶：.ds-tg-pins 橙色菱形（最后一座闪动）。 */

/* ---------- 顶栏 ---------- */
.d2g-ts .tag{padding:0 12px;height:32px;border-radius:999px;background:var(--ds-chip);box-shadow:inset 0 0 0 1px var(--ds-chip-l);color:var(--d2-on-ink-2);font:700 var(--d2-fs-xs)/32px var(--d2-font);letter-spacing:.02em}
.d2g-ts .top-actions .dsk-menu-btn{width:44px;padding:0;font-size:18px}
.d2g-ts body .dsk-hud{display:none}

/* ---------- 左上 HUD：目标卡 + 薄弱点 ---------- */
.d2g-ts .ds-hud{position:fixed;z-index:12;left:calc(26px + env(safe-area-inset-left));top:calc(72px + env(safe-area-inset-top));
  display:grid;gap:8px;width:min(340px,calc(100vw - 24px));pointer-events:none}
.d2g-ts .ds-hud>*{pointer-events:auto}
.d2g-ts .ds-hud .dsk-goal{width:100%}
.d2g-ts .ds-hud .ds-weak{position:static;max-width:none;margin:0;pointer-events:none}
.d2g-ts .ds-hud-more .ds-detail{grid-template-columns:auto 1fr;gap:3px 14px;font-size:12px}
.d2g-ts .ds-hud-more .ds-detail dd{text-align:right}
.d2g-ts .ds-hud-more .ds-detail dd em{font-style:normal;font-size:10px}
.d2g-ts .ds-hud-more .ds-detail b{font-weight:inherit}
.d2g-ts .dsk-goal-r .a button[hidden]{display:none}
.focus-view .ds-hud{display:none}

/* ---------- 底部控制区 ---------- */
.d2g-ts .bottom{left:calc(20px + env(safe-area-inset-left));right:calc(20px + env(safe-area-inset-right));transform:none;max-width:none;
  flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px;pointer-events:none}
.d2g-ts .bottom>*{pointer-events:auto}
.d2g-ts .ds-dock{align-items:flex-end;gap:8px;flex-wrap:nowrap}
.d2g-ts .ds-dock .ds-lv{align-self:flex-end}
.d2g-ts body[data-mode="destroy"] .ds-lv-def,.d2g-ts body[data-mode="protect"] .ds-lv-atk{display:none}
.d2g-ts .ds-lv.pulse{animation:ts-lv-pulse 1.1s var(--d2-ease) 2}
@keyframes ts-lv-pulse{50%{box-shadow:inset 0 0 0 2px var(--ds-m-hi),0 0 0 6px color-mix(in srgb,var(--ds-m) 30%,transparent)}}
.d2g-ts .ds-act{margin-left:auto;gap:8px;min-width:0;max-width:100%}
.d2g-ts .ds-params{display:flex;align-items:center;gap:8px;min-width:0}
.d2g-ts .ds-act .ds-ops .ds-op{min-height:52px}
.d2g-ts .ds-act .ds-ops .ds-restart{min-height:52px;padding:0 12px}
.d2g-ts #summon{min-height:52px;padding-top:5px;padding-bottom:5px}
/* 为「引发海底地震」及考验状态文案保留同一按钮宽度，文字变化不挤动操作组。 */
.d2g-ts .ds-act #summon{flex:0 0 208px;width:208px;min-width:208px;justify-content:center}
.d2g-ts .ds-op.on{background:var(--ds-m-soft);box-shadow:inset 0 0 0 1.5px var(--ds-m);color:var(--ds-m-hi)}
/* 守护挑战 / 灾害等级：浪是预设的，参数整组收起（不是置灰堆着） */
.d2g-ts body.ds-chal .ds-params{display:none}
/* 防护的自由布防也能选来浪方向（实测两侧与正面差别很大）；挑战 / 灾害等级的浪是预设的 */
.d2g-ts body[data-mode="protect"]:not(.ds-chal) .ds-act .ds-dir-btn:not([hidden]){display:grid!important}
.d2g-ts .ds-src-btn small,.d2g-ts .ds-dir-btn small{font-size:10px}
.d2g-ts .ds-dir-btn[aria-pressed="true"]{color:var(--ds-m-hi)}

/* 吐司：底部操作区上方居中（不再压住左上的目标卡） */
.d2g-ts #toast,.d2g-ts body.ds-chal #toast{top:auto;bottom:calc(var(--ui-bottom,120px) + 14px)}
.d2g-ts body:not([data-tool="view"]) #toast{bottom:calc(var(--ui-bottom,120px) + 66px)}

/* ---------- 目标标记 ---------- */
.ds-tg-pins{position:fixed;left:0;top:0;z-index:9;pointer-events:none}
.ds-tg-pins i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;transform-origin:center;will-change:transform}
.ds-tg-pins i::before{content:"";position:absolute;inset:0;transform:rotate(45deg);border-radius:3px;background:var(--d2-atk,#ec7a2f);
  box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.35)}
.ds-tg-pins i.last::before{animation:ts-tg-last .9s ease-in-out infinite alternate}
@keyframes ts-tg-last{to{box-shadow:0 0 0 3px #fff,0 0 0 9px rgba(236,122,47,.35),0 2px 6px rgba(0,0,0,.35)}}
@media (prefers-reduced-motion:reduce){.ds-tg-pins i.last::before,.d2g-ts .ds-lv.pulse{animation:none}}

/* ---------- 中等宽度：档位 / 托盘一行，参数 + 操作 + 召唤一行，居中 ---------- */
@media (min-width:761px) and (max-width:1220px){
  .d2g-ts .bottom{flex-direction:column;align-items:center;gap:8px}
  .d2g-ts .ds-act{margin-left:0}
  .d2g-ts .ds-power{width:180px}
}
@media (min-width:761px) and (max-width:1360px){
  .d2g-ts .ds-act{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .d2g-ts .ds-params{grid-column:1/-1}
  .d2g-ts .ds-params .ds-power{flex:1;min-width:0}
  .d2g-ts .ds-ops{justify-self:end}
}

/* ---------- 手机 ---------- */
@media (max-width:760px){
  .d2g-ts .ds-hud{left:calc(8px + env(safe-area-inset-left));right:calc(8px + env(safe-area-inset-right));top:calc(58px + env(safe-area-inset-top));width:auto;gap:6px}
  .d2g-ts .ds-hud .ds-weak{padding:5px 10px}
  .d2g-ts .bottom{left:0;right:0;flex-direction:column;align-items:stretch;gap:6px;flex-wrap:nowrap}
  .d2g-ts .ds-dock{flex-direction:column;align-items:stretch;gap:6px}
  .d2g-ts .ds-dock .ds-lv{align-self:stretch}
  .d2g-ts .ds-dock .ds-lv button{flex:1}
  .d2g-ts .ds-act{display:grid;grid-template-columns:minmax(0,1fr) 120px;margin-left:0;gap:6px;padding:6px}
  .d2g-ts .ds-params{grid-column:1/-1}
  .d2g-ts .ds-params .ds-power{flex:1;width:auto;min-width:0}
  .d2g-ts .ds-act .ds-ops{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;min-width:0}
  .d2g-ts .ds-act .ds-ops .ds-op,.d2g-ts .ds-act .ds-ops .ds-restart{min-height:48px;min-width:0;padding:0 4px}
  .d2g-ts .ds-act .ds-ops .ds-restart{height:48px;box-sizing:border-box;padding-left:1px;padding-right:1px;letter-spacing:0}
  /* Chrome 最小字号为 12px 时四字也完整放入两行，按钮本身不变宽或变高。 */
  .d2g-ts .ds-act .ds-ops .ds-restart span,.d2g-ts .ds-act .ds-ops .ds-restart.arm::after{
    width:2em;max-width:100%;font-size:12px;line-height:1.05;white-space:normal;word-break:break-all;text-align:center}
  .d2g-ts .ds-act .summon{flex:1 1 auto;justify-content:center;min-height:48px}
  .d2g-ts .ds-act #summon{width:120px;min-width:120px;padding-left:12px;padding-right:12px}
  .d2g-ts .ds-act #summon .wave-symbol{display:none}
  .d2g-ts .ds-src-btn small,.d2g-ts .ds-dir-btn small{display:none}
  .d2g-ts #toast,.d2g-ts body.ds-chal #toast{bottom:calc(var(--ui-bottom,120px) + 8px)}
}
@media (max-width:380px){
  .d2g-ts .ds-act .ds-ops{gap:4px}
  .d2g-ts .ds-act .ds-ops,.d2g-ts .ds-act .summon{grid-column:1/-1}
  .d2g-ts .ds-act #summon{width:100%;min-width:0}
}
/* 矮横屏：一行 */
@media (min-width:761px) and (max-height:520px){
  .d2g-ts .bottom{flex-direction:row;flex-wrap:nowrap;align-items:flex-end;left:calc(6px + env(safe-area-inset-left));right:calc(6px + env(safe-area-inset-right))}
  .d2g-ts .ds-hud{top:calc(52px + env(safe-area-inset-top))}
  .d2g-ts .ds-act .ds-ops .ds-op,.d2g-ts .ds-act .ds-ops .ds-restart{min-height:46px}
  .d2g-ts .ds-power{width:140px}
}

/* ⌂ 恢复视角：画面右下角、操作区上方（转动 / 缩放过才出现） */
.d2g-ts .ds-home{right:calc(26px + env(safe-area-inset-right));bottom:calc(var(--ui-bottom,120px) + 14px)}
@media (max-width:760px){.d2g-ts .ds-home{right:calc(10px + env(safe-area-inset-right));bottom:calc(var(--ui-bottom,120px) + 10px)}}
.focus-view .ds-home{display:none!important}
/* 手机：吐司只按底部定位（game-2 里按薄弱点面板设的 top 会把它拉成一长条） */
@media (max-width:760px){
  .d2g-ts body #toast,.d2g-ts body[data-mode="destroy"]:has(#ds-weak:not([hidden])) #toast{top:auto}
  .d2g-ts .ds-act .summon{flex:1 1 0;min-width:96px}
  .d2g-ts body.ds-chal .ds-act .summon .wave-symbol{display:none}
}
/* 海底地震的浪总从外海正面涌来：选地震时隐藏来浪方向（JS 设 hidden），压过上面的 display:grid!important。 */
.d2g-ts .ds-act .ds-dir-btn[hidden],.d2g-ts .ds-dir-btn[hidden]{display:none!important}