#damage-animation {border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#damage-animation label {display:block;font-size:14px;line-height:1.5;margin:12px 0 6px;color:var(--ink)}
#damage-animation select,#damage-animation input[type="range"] {width:100%;max-width:100%}
#damage-animation button,#damage-animation select {min-height:40px;font-size:14px}
#damage-animation p,#damage-animation a {font-size:14px;line-height:1.55}
#damage-animation [hidden],#damage-source-view[hidden],#damage-view-note[hidden] {display:none!important}
#damage-animation .damage-small {font-size:13px;color:var(--muted)}
#damage-frame-label {font-weight:600;color:var(--accent)}
.damage-playback {display:grid;grid-template-columns:48px 1fr 48px;gap:8px}
.damage-marker-key {display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:14px;margin:16px 0}
.damage-marker-key i,.damage-swatch {display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px}
.damage-swatch.cyan {background:#55d3e2}
.damage-time-limit {border-left:3px solid #e8b25a;padding-left:10px;color:#f0cb89}
#damage-layer-shortcut {position:absolute;left:24px;top:82px;padding:8px 12px;font-size:14px;z-index:5;background:#142935}
#damage-view-note {position:absolute;left:24px;right:76px;top:128px;padding:8px 12px;background:#10212df5;color:#c8e6ef;font-size:14px;line-height:1.5;pointer-events:none;z-index:7}
#damage-source-view {position:absolute;inset:70px 12px 68px;z-index:6;background:#101c25;display:flex;flex-direction:column;border:1px solid #476371;border-radius:6px;overflow:hidden}
.damage-source-head {display:flex;align-items:center;gap:12px;padding:10px 14px;flex:0 0 auto;background:#142935;color:#dce8ed}
.damage-source-head p {flex:1;font-size:14px;line-height:1.45;margin:0}
.damage-source-head button {font-size:14px;min-height:40px;flex-shrink:0}
#damage-source-image {display:block;min-height:0;flex:1;width:100%;object-fit:contain;background:#fff}
#damage-source-image[hidden] {visibility:hidden;display:block}
#damage-animation button:focus-visible,#damage-animation summary:focus-visible,#damage-layer-shortcut:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
#damage-animation button:disabled {opacity:.45;cursor:default}
body:has(#damage-source-view:not([hidden])) #damage-view-note,body:has(#damage-source-view:not([hidden])) #damage-layer-shortcut {display:none}
@media(max-width:700px){
 #damage-layer-shortcut {left:12px;top:58px;min-height:40px;font-size:14px}
 #damage-view-note {left:12px;right:12px;top:104px;font-size:13px;max-width:none}
 #damage-source-view {inset:52px 4px 48px}
 .damage-source-head {padding:8px;gap:6px;align-items:flex-start;flex-direction:column}
 .damage-source-head p {font-size:13px}
 .damage-source-head button {min-height:36px}
}
#damage-viewport-controls {position:absolute;z-index:8;bottom:76px;left:50%;transform:translateX(-50%);display:flex;gap:6px;background:#142935;padding:6px;border:1px solid #476371;border-radius:5px;max-width:calc(100% - 16px)}
#damage-viewport-controls[hidden] {display:none!important}
#damage-viewport-controls button {min-height:40px;white-space:nowrap;font-size:14px;padding:6px 12px}
#scene-wrap:has(#damage-viewport-controls:not([hidden])) #damage-source-view {bottom:136px}
@media(max-width:700px){#damage-viewport-controls {bottom:54px;width:max-content;gap:4px;padding:4px}#damage-viewport-controls button {padding:6px 9px;font-size:13px}#scene-wrap:has(#damage-viewport-controls:not([hidden])) #damage-source-view {bottom:110px}}