.hit-handling-debug-panel { --debug-accent: #ff9f63; }
.hit-handling-debug-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hit-handling-debug-panel > header > div { display: grid; gap: 1px; }
.hit-handling-debug-panel > header span { color: #aac4ca; font-size: 10px; }
.hit-handling-debug-panel > header button { width: 30px; height: 30px; border-radius: 8px; }
.hit-handling-runtime { margin: 10px; padding: 8px 10px; border: 1px solid rgba(255, 159, 99, .24); border-radius: 9px; background: rgba(255,255,255,.045); font-size: 11px; font-weight: 800; }
.hit-handling-runtime[data-state="damaged"] { color: #ffb17e; border-color: rgba(255, 92, 74, .48); background: rgba(92, 25, 20, .38); }
.hit-handling-test { margin: 0 10px 10px; padding: 9px; border: 1px solid rgba(255, 159, 99, .2); border-radius: 10px; background: rgba(5, 14, 18, .45); }
.hit-handling-test > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hit-handling-test button { padding: 6px 8px; border-radius: 7px; font-size: 10px; font-weight: 850; }
.hit-handling-test p, .hit-handling-test > small { margin: 6px 0 0; color: #9db9c0; font-size: 9px; line-height: 1.35; }
.hit-handling-test ol { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.hit-handling-test li { display: grid; grid-template-columns: 42px 1fr; gap: 6px; padding: 5px 6px; border-radius: 6px; background: rgba(255,255,255,.045); font-size: 8px; }
.hit-handling-test li[data-pass="true"] b { color: #83eda5; }
.hit-handling-test li[data-pass="false"] b { color: #ff7b68; }
.hit-handling-test li span { color: #bdd0d5; }
.hit-handling-test button:disabled { cursor: default; opacity: .48; }
.hit-handling-environment-test { margin-bottom: 0; }
.hit-handling-environment-test > small { display: block; padding: 5px 7px; border-radius: 6px; background: rgba(255,255,255,.04); font-weight: 800; }
.hit-handling-environment-test > small[data-state="passed"] { color: #8aefab; background: rgba(41, 128, 73, .2); }
.hit-handling-environment-test > small[data-state="failed"] { color: #ff8b76; background: rgba(137, 43, 31, .24); }
[data-hit-controls] { display: grid; gap: 7px; padding: 0 10px 10px; }
.hit-handling-level { border: 1px solid rgba(255, 159, 99, .16); border-radius: 10px; background: rgba(255,255,255,.025); overflow: hidden; }
.hit-handling-level summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; cursor: pointer; list-style: none; }
.hit-handling-level summary::-webkit-details-marker { display: none; }
.hit-handling-level summary strong { color: #ffd0ae; font-size: 12px; }
.hit-handling-level summary span { color: #86a4ab; font-size: 8px; }
.hit-handling-level[open] summary { border-bottom: 1px solid rgba(255, 159, 99, .14); background: rgba(255, 159, 99, .05); }
.hit-handling-level > div { display: grid; gap: 8px; padding: 9px; }
.hit-handling-level label { display: grid; gap: 4px; }
.hit-handling-level label > span { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; }
.hit-handling-level label output { font-weight: 800; }
.hit-handling-level label input { width: 100%; }
.hit-handling-level label small { color: #78969d; font-size: 8px; line-height: 1.3; }
.hit-handling-debug-panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hit-handling-debug-panel > footer > div { display: flex; gap: 6px; }
.hit-handling-debug-panel > footer button { padding: 6px 8px; border-radius: 7px; font-size: 9px; font-weight: 800; }
.hit-handling-debug-panel [data-state="error"] { color: #ff806e; }
.hit-handling-debug-panel [data-state="saved"] { color: #83eda5; }
.hit-handling-test-hud { position: fixed; top: 124px; left: 50%; z-index: 130; display: grid; width: min(214px, calc(100vw - 36px)); gap: 2px; padding: 7px 11px; transform: translateX(-50%); border: 1px solid rgba(255, 173, 105, .62); border-radius: 10px; background: rgba(8, 17, 21, .82); box-shadow: 0 6px 18px rgba(0, 0, 0, .24); color: #fff1d9; text-align: center; pointer-events: none; backdrop-filter: blur(5px); }
.hit-handling-test-hud.hidden { display: none; }
.hit-handling-test-hud strong { font-size: 11px; line-height: 1.15; letter-spacing: .055em; }
.hit-handling-test-hud small { color: #b9cbd0; font-size: 8px; line-height: 1.2; }
.hit-handling-test-hud[data-state="hit"] { border-color: rgba(255, 75, 54, .9); background: rgba(68, 17, 13, .88); }
.hit-handling-test-hud[data-state="hit"] strong { color: #ffb095; }
.hit-handling-test-hud[data-state="completed"] { border-color: rgba(103, 233, 152, .72); background: rgba(8, 48, 31, .84); }
.hit-handling-test-hud[data-state="completed"] strong { color: #9cf2b9; }
@media (max-width: 720px) { .hit-handling-test-hud { top: 138px; width: min(196px, calc(100vw - 28px)); padding: 6px 9px; } }
.hit-handling-zone { margin: 0 10px 9px; border: 1px solid rgba(255, 159, 99, .2); border-radius: 11px; background: rgba(5, 14, 18, .38); overflow: hidden; }
.hit-handling-zone > summary { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 9px 10px; cursor: pointer; list-style: none; }
.hit-handling-zone > summary::-webkit-details-marker { display: none; }
.hit-handling-zone > summary strong { font-size: 12px; color: #ffe0c4; }
.hit-handling-zone > summary span { color: #8ba7ae; font-size: 8px; }
.hit-handling-zone[open] > summary { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.hit-handling-zone-water { border-color: rgba(76, 199, 255, .28); }
.hit-handling-zone-water > summary strong { color: #88ddff; }
.hit-handling-zone-land { border-color: rgba(255, 181, 81, .28); }
.hit-handling-zone-land > summary strong { color: #ffc777; }
.hit-handling-zone-shark { border-color: rgba(120, 210, 230, .32); }
.hit-handling-zone-shark > summary strong { color: #8ee8ef; }
.hit-handling-zone-popcorn { border-color: rgba(255, 220, 98, .34); }
.hit-handling-zone-popcorn > summary strong { color: #ffe481; }
.hit-handling-zone-body { padding-top: 9px; }
.hit-handling-environment-controls { display: grid; gap: 9px; padding: 10px; }
.hit-handling-environment-controls label { display: grid; gap: 4px; }
.hit-handling-environment-controls label > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; }
.hit-handling-environment-controls label output { font-weight: 800; }
.hit-handling-environment-controls label input[type="range"] { width: 100%; }
.hit-handling-environment-controls label small { color: #78969d; font-size: 8px; line-height: 1.3; }
.hit-handling-toggle-row > span { min-height: 24px; }
.hit-handling-toggle-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--debug-accent); }

.hit-handling-collider-settings { display: grid; gap: 8px; margin: 10px 0; padding: 10px; border: 1px solid rgba(102, 218, 244, .22); border-radius: 10px; background: rgba(24, 50, 61, .58); }
.hit-handling-collider-settings > label { display: grid; gap: 5px; }
.hit-handling-collider-settings > label + label { padding-top: 8px; border-top: 1px solid rgba(236, 246, 248, .09); }
.hit-handling-collider-settings label > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hit-handling-collider-settings input[type="range"] { width: 100%; }
.hit-handling-collider-settings input[type="checkbox"] { width: auto; accent-color: #56d9ff; }
.hit-handling-collider-settings small { color: rgba(236, 246, 248, .62); font-size: 9px; line-height: 1.3; }
.hit-handling-collider-settings output { font-size: 11px; font-weight: 900; }
.hit-handling-collider-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: -1px; }
.hit-handling-collider-dot.body { background: #56d9ff; }
.hit-handling-collider-dot.head { background: #ffd45c; }