/* Demolition Derby 3D */
.ddz-top { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 210px; display: grid; gap: 4px; pointer-events: none; font: 800 13px system-ui, sans-serif; color: #fff; }
.ddz-title { display: flex; justify-content: space-between; gap: 8px; padding: 3px 10px; border-radius: 10px; background: rgba(8,16,28,.8); font-variant-numeric: tabular-nums; }
.ddz-bar { position: relative; height: 18px; border-radius: 9px; overflow: hidden; background: rgba(8,16,28,.8); border: 1px solid rgba(255,255,255,.3); }
.ddz-bar i { position: absolute; inset: 0 auto 0 0; display: block; background: linear-gradient(90deg,#16a34a,#4ade80); }
.ddz-boost { height: 13px; }
.ddz-boost i { background: linear-gradient(90deg,#ea580c,#fb923c); }
.ddz-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: .08em; text-shadow: 0 1px 2px #000; }
.ddz-hp.is-low i { background: linear-gradient(90deg,#b91c1c,#ef4444); }
.ddz-hp.is-low { animation: ck-blink .6s steps(2) infinite; }
.ddz-board { position: absolute; left: 10px; top: 10px; width: 118px; padding: 6px 8px; border-radius: 10px; background: rgba(8,16,28,.72); pointer-events: none; font: 700 11px system-ui, sans-serif; color: #fff; display: grid; gap: 3px; }
.ddz-board div.is-out { opacity: .5; }
.ddz-board u { display: block; height: 4px; margin-top: 1px; border-radius: 2px; overflow: hidden; background: rgba(255,255,255,.2); text-decoration: none; }
.ddz-board i { display: block; height: 100%; }
.ck-touch .sim-tbtn[data-id="hb"] { background: rgba(234,88,12,.82); }
@container (max-width: 560px) {
  .ddz-board { display: none; }
  .ddz-top { top: 92px; left: 8px; transform: none; width: 176px; }
  .ck-touch .sim-tbtn[data-id="hb"] { font-size: 12px; }
}