/* 美食塔防 · 网页前端基础样式（W1：舞台、图层、命中区、弹窗、toast、加载框、设置、按钮）。
   舞台坐标系 = 原作 950×600，整体 transform 缩放；HUD 层用 --ui（小屏放大到 ≥0.8，触控目标够大）。 */
:root {
  --td-font: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", sans-serif;
  --td-song: "SimSun", "宋体", "NSimSun", "Songti SC", "Noto Serif CJK SC", var(--td-font);
  --td-blue-dark: #0e3f78;
  --td-blue: #2379c2;
  --td-blue-light: #84c9f4;
  --td-ink: #0b2e57;
}
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: #081426; color: #fff; font-family: var(--td-font);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none; touch-action: none; overscroll-behavior: none;
}
button { font-family: inherit; -webkit-appearance: none; appearance: none; }
.td-selectable, .td-selectable * { -webkit-user-select: text; user-select: text; }
.td-noscript { padding: 40px; font-size: 18px; text-align: center; }

#td-root {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #16335c 0%, #0b1b33 60%, #050c18 100%);
}
#td-view { position: absolute; left: 0; top: 0; overflow: hidden; --s: 1; }
/* 两侧留边：本屏背景放大、压暗铺满（不做模糊，X5 跑模糊太慢） */
#td-bleed { position: absolute; left: 0; top: 0; background: no-repeat center / cover; filter: brightness(.55); opacity: 0; transition: opacity .2s; }
#td-bleed.on { opacity: 1; }
.td-stage-layer { position: absolute; left: 0; top: 0; width: 950px; height: 600px; transform-origin: 0 0; }
#td-screens { overflow: hidden; background: #000; z-index: 1; box-shadow: 0 0 24px rgba(0, 0, 0, .6); }
#td-hud { position: absolute; z-index: 40; pointer-events: none; --ui: 1; }
#td-modal-back { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 50; background: rgba(0, 0, 0, .45); display: none; }
#td-modal-back.on, #td-modal-back.on-set { display: block; }
#td-modal { z-index: 60; pointer-events: none; }
#td-set { z-index: 70; pointer-events: none; }
#td-toast { z-index: 80; pointer-events: none; }
#td-load { z-index: 90; display: none; }
#td-load.on { display: block; }

.td-layer { position: absolute; left: 0; top: 0; width: 950px; height: 600px; overflow: hidden; }
.td-layer-base { z-index: 1; }
.td-layer-overlay { z-index: 10; }
.td-layer.td-in { animation: td-fade .16s ease-out; }
@keyframes td-fade { from { opacity: 0; } to { opacity: 1; } }

.td-img { position: absolute; background-repeat: no-repeat; pointer-events: none; }
img.td-img { -webkit-user-drag: none; }
.td-text { position: absolute; overflow: hidden; white-space: nowrap; font-family: var(--td-song); pointer-events: none; }

/* 命中区：整层透明，只有多边形接收事件 */
.td-hit { position: absolute; left: 0; top: 0; width: 950px; height: 600px; pointer-events: none; overflow: visible; }
.td-hit-g > * { fill: rgba(0, 0, 0, 0); stroke: none; pointer-events: all; cursor: pointer; }
.td-hit-g:focus { outline: none; }
html.td-debug-hit .td-hit-g > * { fill: rgba(255, 0, 0, .22); stroke: #f00; stroke-width: 1; }

/* ---------- 按钮 ---------- */
.td-imgbtn {
  position: absolute; border: 0; padding: 0; margin: 0; background: transparent no-repeat center / 100% 100%;
  cursor: pointer; pointer-events: auto; outline: none;
}
.td-imgbtn:active { filter: brightness(.92); }
.td-btn {
  position: relative; pointer-events: auto; cursor: pointer; outline: none;
  min-width: 96px; height: 40px; padding: 0 18px; border-radius: 9px;
  font-size: 18px; font-weight: bold; color: #fff; letter-spacing: 1px; white-space: nowrap;
  text-shadow: 1px 1px 0 rgba(90, 37, 3, .9), -1px -1px 0 rgba(90, 37, 3, .9), 1px -1px 0 rgba(90, 37, 3, .9), -1px 1px 0 rgba(90, 37, 3, .9);
  background: linear-gradient(180deg, #ffc860 0%, #fb9a26 48%, #ee7a0e 52%, #f28d1c 100%);
  border: 2px solid #8a3a05; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 #5a2503;
}
.td-btn-blue {
  background: linear-gradient(180deg, #7fd3fb 0%, #3a9be0 48%, #2379c2 52%, #2f8ad4 100%);
  border-color: #0e4580; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 #0a2f5a;
  text-shadow: 1px 1px 0 #0b3d73, -1px -1px 0 #0b3d73, 1px -1px 0 #0b3d73, -1px 1px 0 #0b3d73;
}
.td-btn-gray { background: linear-gradient(180deg, #d9dde2, #9aa2ab); border-color: #4b535c; box-shadow: 0 3px 0 #2d3238; text-shadow: 0 1px 0 #333; }
.td-btn:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 1px 0 #5a2503; }
.td-btn:disabled { filter: grayscale(.9); opacity: .6; cursor: default; }

/* ---------- 原作蓝框弹窗（widgets/confirm_dialog） ---------- */
.td-dlg {
  position: absolute; pointer-events: auto; box-sizing: border-box; border-radius: 12px;
  background: linear-gradient(180deg, #45b6e8 0, #2a86cc 30px, #2172bb 44px, #1c64ab 100%);
  border: 3px solid var(--td-blue-dark);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.td-dlg-title {
  position: absolute; left: 44px; right: 44px; top: 0; height: 42px; line-height: 42px; text-align: center;
  font-size: 19px; font-weight: bold; color: #fff; letter-spacing: 2px; white-space: nowrap; overflow: hidden;
  text-shadow: 1px 1px 0 #0b3d73, -1px -1px 0 #0b3d73, 1px -1px 0 #0b3d73, -1px 1px 0 #0b3d73, 0 0 4px #0b3d73;
}
.td-dlg-body {
  position: absolute; left: 7px; right: 7px; top: 44px; bottom: 7px; box-sizing: border-box; overflow: hidden;
  background: linear-gradient(180deg, #9ad5f8, var(--td-blue-light) 40%, #78c0ef);
  border: 2px solid #2d7cc2; border-radius: 8px; color: var(--td-ink); font-size: 16px;
}
.td-dlg-msg { padding: 22px 22px 60px; text-align: center; line-height: 1.6; font-size: 17px; font-weight: bold; white-space: pre-wrap; }
.td-dlg-btns { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; gap: 26px; pointer-events: none; }
.td-dlg-btns > * { pointer-events: auto; }
.td-dlg-form { padding: 16px 22px 60px; }
.td-dlg-form .td-dlg-msg { padding: 0 0 10px; }
.td-input {
  display: block; width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px; border-radius: 8px;
  border: 2px solid #2d7cc2; background: #fff; color: #0b2e57; font-size: 18px; font-family: inherit; outline: none;
  -webkit-user-select: text; user-select: text; touch-action: manipulation;
}
.td-input:focus { border-color: #ff9d1f; }

/* ---------- 提示条（原作 showTip：tip_bg 九宫格，舞台 y=120 居中，白字 14 px，手机上不小于 11 CSS px） ---------- */
.td-toasts { position: absolute; left: 0; top: 120px; width: 950px; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.td-toast {
  max-width: 760px; box-sizing: border-box; padding: 8px 20px; text-align: center; border-radius: 6px;
  font-size: max(14px, calc(11px / var(--s))); font-weight: bold; line-height: 1.45; color: #fff; text-shadow: 0 1px 1px #000;
  background-color: rgba(10, 26, 48, .9); border: 1px solid rgba(160, 200, 240, .5);
  opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s;
}
.td-tip-ok .td-toast {
  background-color: transparent; border: 0; border-radius: 0; background-image: var(--tip-bg); background-repeat: no-repeat;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%, 7px 0, 7px 100%, 0 7px, 100% 7px, 7px 7px;
  background-size: 7px 7px, 7px 7px, 7px 7px, 7px 7px, calc(100% - 14px) 7px, calc(100% - 14px) 7px, 7px calc(100% - 14px), 7px calc(100% - 14px), calc(100% - 14px) calc(100% - 14px);
}
.td-toast.on { opacity: 1; transform: none; }
.td-toast-warn { color: #ffb8a8; }
.td-toast-ok { color: #b8ffb0; }

/* ---------- 原作加载框 LoadDialog ---------- */
.td-loading { position: absolute; left: 0; top: 0; width: 950px; height: 600px; pointer-events: auto; }
.td-loading-mask { background-size: 100% 100% !important; pointer-events: auto; }
.td-loading-fill { position: absolute; overflow: hidden; }
.td-loading-fill > .td-img { left: 0; top: 0; }
.td-loading-text, .td-loading-pct { text-shadow: 0 0 2px #00162e; }

/* ---------- 游戏设置（battle_hud settings） ---------- */
.td-settings { position: absolute; left: 0; top: 0; width: 950px; height: 600px; pointer-events: none; }
.td-settings .td-img { background-size: 100% 100%; }
.td-settings-mask { position: absolute; background: rgba(6, 26, 56, .93); border-radius: 6px; pointer-events: none; }
.td-settings-track { position: absolute; cursor: pointer; pointer-events: auto; touch-action: none; }
.td-settings-star { pointer-events: auto !important; cursor: grab; touch-action: none; }
.td-settings .td-imgbtn { pointer-events: auto; }