/* 3D 玩法（js/modes-3d.js）：舞台 / 计分条 / 心跳暗角 / 任务浮层 / 2D 备用棋盘 */
.g3-hud { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; }
.g3-vs { font: 600 12px var(--latin, serif); letter-spacing: .2em; color: var(--gold3, #a87a3c); }
.g3-chip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--line, #3a1a24);
  background: #0d0709; color: var(--mute); transition: all .3s; }
.g3-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.g3-chip.on { color: var(--gold2); border-color: #d9b26f88; background: linear-gradient(180deg, #3a0f1e, #1a0710); box-shadow: 0 0 0 1px #d9b26f33, 0 8px 24px -10px #e0566f88; }
.g3-t { font: 700 18px var(--latin, serif); color: var(--gold2); min-width: 22px; text-align: right; }
.g3-stone { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-block;
  background: radial-gradient(circle at 35% 30%, #5a5560, #0b0a0d 60%); box-shadow: 0 2px 4px #000a, inset 0 -2px 3px #0008; }
.g3-stone.w { background: radial-gradient(circle at 35% 30%, #fff, #efe4d4 55%, #c9b9a2); }
.g3-wrap { position: relative; margin: 0 -14px; }
.g3-stage { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 74vh; border-radius: 18px; overflow: hidden;
  background: radial-gradient(80% 70% at 50% 45%, #2a0a17, #0d0509 75%); }
.g3-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--gold2); font: 500 15px var(--serif); letter-spacing: .3em; animation: g3pulse 1.4s ease-in-out infinite; }
@keyframes g3pulse { 50% { opacity: .35; } }
.g3-vig { position: absolute; inset: 0; border-radius: 18px; pointer-events: none; opacity: 0; transition: opacity .3s;
  box-shadow: inset 0 0 80px 10px #ff1f4f; }
.g3-vig.on { animation: g3beat 1s ease-in-out infinite; }
@keyframes g3beat { 0%, 100% { opacity: .15; } 15% { opacity: .85; } 30% { opacity: .3; } 45% { opacity: .7; } }
.g3-hint b { color: var(--gold2); }
.g3-alert { color: #ff7a96; font-weight: 600; animation: g3pulse .9s ease-in-out infinite; }
.g3-sheet { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 14px;
  background: radial-gradient(80% 60% at 50% 50%, #0b0508cc, #0b0508f2); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: g3in .35s ease-out; }
.g3-sheet.low { align-items: flex-end; background: linear-gradient(180deg, transparent 35%, #0b0508ee 70%); backdrop-filter: none; -webkit-backdrop-filter: none; }
.g3-sheet-in { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.g3-sheet .card { margin: 0; }
.g3-why { color: #ff7a96; font: 600 15px var(--serif); letter-spacing: .3em; margin: 0; }
@keyframes g3in { from { opacity: 0; transform: translateY(10px); } }
/* 2D 备用棋盘 */
.g3-flat { display: flex; align-items: center; justify-content: center; padding: 12px; }
.g2-board { --n: 13; width: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(var(--n), 1fr); border-radius: 10px; padding: 3%;
  background: linear-gradient(145deg, #4a1226, #2a0a16); box-shadow: inset 0 0 0 1px #d9b26f55, 0 20px 40px -20px #000; }
.g2-c { position: relative; padding: 0; border: 0; background: none; box-shadow: none; display: flex; align-items: center; justify-content: center; min-height: 0; }
.g2-c::before, .g2-c::after { content: ''; position: absolute; background: #d9b26f88; }
.g2-c::before { left: 0; right: 0; top: 50%; height: 1px; } .g2-c::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.g2-c .g3-stone { position: relative; z-index: 1; width: 82%; height: 82%; }
.g2-c .ghost { opacity: .55; }
.g2-c .drop { animation: g2drop .25s ease-out; }
.g2-c.hot { background: radial-gradient(circle, #ff2a5588, transparent 70%); }
.g2-c.win .g3-stone { box-shadow: 0 0 0 2px #ffd27a, 0 0 14px #ffd27a; }
.g3-flat.alert .g2-board { animation: g2alert 1s ease-in-out infinite; }
@keyframes g2drop { from { transform: scale(1.6); opacity: 0; } }
@keyframes g2alert { 50% { box-shadow: inset 0 0 0 2px #ff2a55, 0 0 30px #ff2a5566; } }
