/* Match identity and reference data share the workspace's theme and spacing. */
.editor-header {
  display: flex; flex-direction: column; align-items: stretch;
  height: auto; min-height: 0; gap: 12px; padding: 14px 20px;
}
.workspace-title-row, .workspace-title-group, .workspace-session-state {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.workspace-title-row { justify-content: space-between; }
.workspace-title-group { flex: 1; }
.editor-header #header-recording-name { flex: 0 1 auto; min-width: 0; max-width: 55vw; }
.editor-header .review-context { flex-shrink: 0; width: auto; margin: 0; }
.workspace-subject { display: none; }
.workspace-session-state { flex-shrink: 0; }
.editor-header #project-save-state { margin: 0; }
.analysis-header-tools {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto;
  width: 100%; gap: 20px; align-items: center;
}
.workspace-view-controls, .workspace-analysis-actions {
  display: flex; align-items: center; gap: 6px;
}
.workspace-view-controls {
  padding: 3px; border: 1px solid var(--line); border-radius: 8px;
}
.workspace-view-controls button { min-height: 32px; border-radius: 5px; }
.workspace-view-controls button[aria-expanded=true] { background: var(--selection); color: var(--accent); }
.workspace-analysis-actions > button, .workspace-analysis-actions summary { min-height: 36px; white-space: nowrap; }
.workspace-analysis-actions .product-menu { margin: 0; }
#player-header {
  display: grid; grid-template-columns: repeat(2,minmax(0,164px)) 88px;
  gap: 14px; align-items: center; min-width: 0;
}
.header-player { display: flex; align-items: center; gap: 10px; min-width: 0; }
.player-avatar { position: relative; flex: 0 0 48px; }
.player-avatar-button {
  width: 48px; height: 48px; padding: 0; border: 1px solid var(--line);
  border-radius: 50%; display: grid; place-items: center; background: var(--surface);
}
.stock-sprite {
  display: inline-block; background-repeat: no-repeat; flex-shrink: 0;
  font-size: 28px; text-align: center;
}
.player-name { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; font-size: 11px; color: var(--muted); }
.player-name input { width: 100%; min-width: 0; height: 28px; padding: 4px 7px; font-size: 12px; color: var(--text); border-radius: 5px; }
.costume-button {
  position: absolute; bottom: -2px; left: -4px; width: 26px; height: 26px;
  padding: 5px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel);
}
.costume-button svg { fill: none; stroke: currentColor; stroke-width: 1.5; width: 100%; height: 100%; }
.player-slot { width: 88px; height: 32px; padding: 4px 6px; font-size: 12px; border-radius: 5px; }
.player-feedback { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.player-feedback.is-error { position: static; grid-column: 1/-1; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; font-size: 12px; line-height: 1.4; color: var(--danger); }
.player-avatar-button:hover:enabled, .costume-button:hover:enabled { background: var(--hover); }
.player-avatar-button:focus-visible, .costume-button:focus-visible, .costume-choice:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.costume-tray {
  position: fixed; display: flex; gap: 6px; width: max-content; max-width: calc(100vw - 24px);
  padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  z-index: 70; overflow-x: auto; box-shadow: 0 8px 28px #0004;
}
.costume-choice { display: grid; place-items: center; min-width: 46px; min-height: 46px; padding: 3px; border-radius: 7px; animation: alt-rise .22s both; flex-shrink: 0; }
.costume-choice:hover { background: var(--hover); }
.costume-choice[aria-pressed=true] { background: var(--selection); box-shadow: inset 0 0 0 2px var(--accent); }
@keyframes alt-rise { from { opacity: 0; transform: translateY(10px) scale(.65); } to { opacity: 1; transform: none; } }

/* The select screen preserves the game's roster positions. */
.fighter-modal { z-index: 75; padding: 12px; }
.fighter-dialog {
  position: relative; width: min(1100px,100%); max-height: calc(100dvh - 24px); overflow: auto;
  padding: 24px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px;
}
.fighter-dialog h2 { margin: 0 44px 20px 0; font-size: 20px; }
.fighter-close { position: absolute; right: 14px; top: 14px; min-width: 36px; min-height: 36px; border-radius: 7px; font-size: 20px; }
.fighter-close:hover { background: var(--hover); }
.fighter-grid-scroll { overflow-x: auto; padding: 3px; }
.fighter-grid { display: grid; grid-template-columns: repeat(13,minmax(62px,1fr)); min-width: 850px; gap: 4px; }
.fighter-cell { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 6px 2px; min-height: 76px; background: var(--surface); border-radius: 4px; }
.fighter-cell span:last-child { font-size: 10px; line-height: 1.15; max-width: 76px; }
.fighter-cell:hover:enabled, .fighter-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--hover); }
.fighter-forms { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.fighter-forms:empty { margin: 0; }
.fighter-forms button { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 7px; }
.stock-flight { position: fixed; z-index: 100; pointer-events: none; }

/* Measure this toolbar after layout; the anchor logic uses its real bounds. */
.box-review {
  height: auto; min-height: 44px; gap: 10px; padding: 4px 6px; border-radius: 8px;
  background: #171b23f5; border: 1px solid #ffffff24; border-bottom: 2px solid #ff596b;
  box-shadow: 0 4px 12px #0003;
}
.box-review[data-edge=below] { border-top: 1px solid #ffffff24; border-bottom: 2px solid #ff596b; border-radius: 8px; }
.box-review .box-label { min-width: 0; flex: 1; }
.box-review #move-search { min-height: 34px; height: auto; font-size: 13px; padding: 6px 4px; border: 0; border-radius: 5px; background: transparent; }
.box-review .box-quick { gap: 2px; padding-left: 6px; }
.box-review .box-quick button { min-height: 34px; min-width: 32px; padding: 5px; border-radius: 5px; }
.move-timing { display: flex; align-items: center; align-self: center; flex-shrink: 0; gap: 5px; border: 0; background: transparent; padding: 0 !important; border-radius: 7px; }
.move-timing span { border-radius: 16px; padding: 5px 7px; font-size: 12px; line-height: 1.3; white-space: nowrap; background: #85858f26; }
.move-timing .active { background: #ff596b26; color: #ff7182; }
.box-review.compact { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; }
.box-review.compact .box-label { grid-column: 1/-1; }
.box-review.compact .move-timing { justify-self: start; }
.box-review.compact .box-quick { justify-self: end; }
.box-review.compact:has(.move-timing[hidden]) { display: flex; }

/* One component renders compact inspector data and the larger reference dialog. */
.move-reference { padding: 16px 0 4px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; }
.move-reference-heading { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 17px; font-weight: 600; }
.move-reference-heading > div { min-width: 0; overflow-wrap: anywhere; }
.move-reference .muted { color: var(--muted); font-size: 12px; margin: 8px 0 12px; }
.move-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 16px 0; }
.move-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px 6px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.move-card small { text-transform: uppercase; font-size: 9px; letter-spacing: .04em; color: var(--muted); }
.move-card strong { font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.move-card.active { border-color: var(--danger); color: var(--danger); background: #ff596b08; }
.move-strip { display: flex; gap: 2px; min-height: 22px; overflow: hidden; }
.move-strip span { flex: 1; min-width: 1px; border: 1px solid #60606c; border-radius: 2px; background: #60606c33; }
.move-strip .startup { background: #60606c; }
.move-strip .active { background: #ef4657; border-color: #ef4657; }
.move-range-caption { font-size: 11px; color: var(--muted); line-height: 1.6; margin: 8px 0 12px; }
.move-reference-footer { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin-top: 16px; }
.move-reference-footer a { grid-column: 1/-1; color: var(--accent); text-decoration: none; }
.move-reference-footer a:hover { text-decoration: underline; }
.move-variant { width: 100%; max-width: 100%; margin-top: 8px; font-size: 12px; }
#inspector-move-data .move-card strong { font-size: 20px; }
.fighter-dialog:has(.move-reference) { width: min(740px,100%); padding: 28px; }
.fighter-dialog .move-reference { padding-top: 20px; }
.fighter-dialog .move-reference-heading { font-size: 28px; }
.fighter-dialog .move-cards { gap: 16px; margin: 24px 0; }
.fighter-dialog .move-card { padding: 18px; border-radius: 10px; }
.fighter-dialog .move-card small { font-size: 12px; }
.fighter-dialog .move-card strong { font-size: 40px; }
.fighter-dialog .move-strip { height: 30px; }
.fighter-dialog .move-range-caption { font-size: 12px; }
.fighter-dialog .move-reference-footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; }

@media (max-width: 1150px) {
  .analysis-header-tools { grid-template-columns: 1fr auto; gap: 12px; }
  #player-header { grid-column: 1/-1; }
  .workspace-view-controls { justify-self: start; }
  .workspace-analysis-actions { justify-self: end; }
}
@media (max-width: 650px) {
  .editor-header { gap: 10px; padding: 12px; }
  .editor-header #workspace-heading { font-size: 16px; }
  .workspace-title-group { gap: 8px; }
  .editor-header #header-recording-name { max-width: none; font-size: 11px; }
  .editor-header #project-save-state { font-size: 11px; }
  .editor-header .review-context { display: none; }
  #player-header { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .player-slot { grid-column: 1/-1; }
  .analysis-header-tools { grid-template-columns: 1fr; gap: 12px; margin: 0; }
  .workspace-analysis-actions { justify-self: stretch; flex-wrap: wrap; gap: 8px; }
  .workspace-analysis-actions #setup { padding-left: 0; margin-right: auto; }
  .workspace-view-controls { justify-self: start; }
  .fighter-dialog { padding: 16px; }
  .fighter-dialog:has(.move-reference) { padding: 20px; }
  .fighter-dialog .move-reference-heading { font-size: 23px; }
  .fighter-dialog .move-cards { gap: 8px; }
  .fighter-dialog .move-card { padding: 12px 8px; }
  .fighter-dialog .move-card small { font-size: 10px; }
  .fighter-dialog .move-card strong { font-size: 28px; }
  .move-timing span { font-size: 11px; padding: 5px 6px; }
}
@media (prefers-reduced-motion: reduce) { .costume-choice { animation: none; } }

/* Scroll the move reference together with editable fields; keep commit controls visible. */
.action-details-form > * { flex-shrink: 0; }
#inspector-move-data:empty { display: none; }
.action-details-footer { margin-top: 0; padding-top: 12px; }
.workspace-inspector .panel-heading { min-height: 32px; flex-shrink: 0; }
@media (max-width: 720px) {
  .workspace-inspector, .highlight-details, .workspace-list {
    top: var(--workspace-header-bottom,112px); bottom: 12px;
    border-radius: 10px; box-shadow: 0 12px 32px #0004;
  }
  .panel-dismiss {
    position: fixed; inset: var(--workspace-header-bottom,112px) 8px 12px 72px;
    background: #0006; border-radius: 10px;
  }
}

.box-review.tight .move-timing { grid-column: 1/-1; }
.box-review.tight .box-quick { grid-column: 1/-1; }
@media (max-width: 720px) {
  #editor:not(.editing-workspace) #analysis-host { flex-direction: column; }
  #editor:not(.editing-workspace) #analysis-host > .video-stage { flex: 0 0 auto; width: 100%; }
  #editor:not(.editing-workspace) #analysis-rail {
    position: static !important; inset: auto !important; flex: 0 0 auto; width: 100% !important;
    padding: 10px 12px; background: var(--panel); border-top: 1px solid var(--line);
  }
  #editor:not(.editing-workspace) #analysis-rail:has(#live-crop[hidden]) { display: none; }
  #analysis-crop-slot { width: 100%; }
  #analysis-rail #live-crop { display: grid; grid-template-columns: 88px 1fr; gap: 6px 16px; align-items: center; }
  #analysis-rail #live-crop-header { grid-column: 2; grid-row: 1; justify-content: center; }
  #analysis-rail #live-crop-body { display: contents; }
  #analysis-rail #live-crop-canvas { grid-column: 1; grid-row: 1 / span 2; width: 88px; height: 88px; }
  #analysis-rail .live-crop-transport { grid-column: 2; grid-row: 2; justify-content: center; }
  #analysis-rail #live-crop-status { grid-column: 2; }
}

/* Header identity, chip toggles, and panel reopen controls. */
.workspace-title-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#workspace-mode-icon { display: grid; place-items: center; flex: 0 0 28px; color: var(--accent); }
#workspace-mode-icon svg { width: 26px; height: 26px; }
.editor-header #header-recording-name { display: block; font-size: 12px; max-width: 70vw; }
.editor-header .review-context, #project-save-state { display: none !important; }
.analysis-header-tools { grid-template-columns: minmax(0,1fr) auto; }
#player-header { grid-template-columns: repeat(2,minmax(0,180px)); gap: 24px; }
.player-avatar { isolation: isolate; }
.costume-button { left: auto; right: -4px; bottom: -3px; }
.player-chip {
  position: absolute; z-index: 2; top: -5px; left: -7px; min-width: 27px;
  height: 22px; padding: 2px 5px; border: 1px solid #ffffff66; border-radius: 8px;
  color: #fff; font-size: 10px !important; font-weight: 800; line-height: 1;
  text-shadow: 0 1px 1px #0008; box-shadow: 0 2px 4px #0003;
}
.player-chip-p1 { background: #ef3942; }
.player-chip-p2 { background: #3278db; }
.player-chip:disabled { opacity: 1; cursor: default; }
.player-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.player-avatar:has(.costume-tray) { z-index: 80; }
.costume-tray { position: absolute; transform-origin: top left; animation: costume-peel .18s both; }
.costume-choice { transform-origin: bottom center; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
@keyframes costume-peel { from { opacity: 0; transform: perspective(400px) rotateX(-18deg) translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes alt-rise { from { opacity: 0; transform: perspective(200px) rotateX(-40deg) translateY(10px) scale(.65); } to { opacity: 1; transform: none; } }
.panel-fab {
  position: absolute; top: 10px; z-index: 19; width: 38px; height: 38px; padding: 10px;
  display: grid; place-items: center; color: var(--accent); background: var(--panel);
  border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 3px 12px #0003;
}
.panel-fab-left { left: 10px; }
.panel-fab-right { right: 10px; }
.panel-fab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.panel-fab:hover { background: var(--surface); }
.editing-workspace .panel-fab { display: none; }
@media (max-width:1150px) {
  .analysis-header-tools { grid-template-columns: minmax(0,1fr) auto; }
  #player-header { grid-column: auto; }
}
@media (max-width:900px) {
  .analysis-header-tools { grid-template-columns: 1fr; }
  #player-header { grid-template-columns: repeat(2,minmax(0,180px)); }
  .workspace-analysis-actions { justify-self: stretch; }
}
@media (max-width:650px) {
  #player-header { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  .editor-header #header-recording-name { max-width: calc(100vw - 128px); font-size: 11px; }
  .panel-fab { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion:reduce) { .costume-tray, .costume-choice { animation: none; } }.library-toolbar{margin-bottom:10px!important}
#library-recordings[data-view=list] .recording-upload{min-height:100px;flex-direction:row;padding:12px}#library-recordings[data-view=list] .upload-skeleton{width:150px;flex:none}.editor-header{padding-top:10px!important;padding-bottom:10px!important}.workspace-title-row{margin-bottom:6px!important}.analysis-header-tools{gap:8px!important}

/* Keep analysis chrome quiet and give footage the available height. */
@media(min-width:1000px){
 .editor-header{flex-direction:row;align-items:center;gap:24px;padding:8px 18px!important;min-height:64px}
 .workspace-title-row{flex:0 1 270px;margin:0!important;min-width:160px}
 .analysis-header-tools{display:flex;flex:1;width:auto;justify-content:space-between;gap:20px!important;min-width:0}
 #player-header{grid-template-columns:repeat(2,minmax(0,160px));gap:18px}
 .header-player{gap:8px}.player-avatar{flex-basis:40px}.player-avatar-button{width:40px;height:40px}
 .player-name{gap:2px}.player-name input{height:25px;padding:2px 5px;background:transparent;border-color:transparent}.player-name input:hover,.player-name input:focus{border-color:var(--line);background:var(--surface)}
 .player-chip{font-size:9px;min-width:22px;width:22px;height:20px;min-height:20px}.costume-button{width:23px;height:23px;padding:4px}
 .workspace-analysis-actions>button,.workspace-analysis-actions summary{min-height:32px;font-size:11px;padding:5px 9px}
 #editor:not(.editing-workspace) .workspace-body{min-height:360px}
}
.workspace-title-copy{gap:2px}.editor-header #header-recording-name{max-width:240px;font-size:10px}.editor-header #workspace-heading{font-size:16px}
#editor:not(.editing-workspace) .prediction-strip{height:22px;min-height:22px;font-size:10px;padding:2px 10px}.prediction-strip b{font-size:11px}
#editor:not(.editing-workspace) .media-toolbar{padding:3px 8px;gap:0}
.transport-main{gap:4px;align-items:center;flex-wrap:nowrap}
.transport-main>button{height:36px;min-height:36px;padding:5px 9px;align-self:center}.transport-main>button span{display:none}
.transport-main .transport-pair{display:flex;gap:6px;align-items:center}
.transport-main .transport-pair #play{width:38px;height:38px;min-width:38px;min-height:38px;max-width:38px;max-height:38px}
.transport-main .transport-pair #replay{width:32px;height:32px;min-width:32px;min-height:32px;max-width:32px;max-height:32px}
.transport-main .transport-pair .playhead-label{font-size:10px;width:auto;min-width:48px;margin:0 3px;text-align:left}
.transport-main .transport-pair #playback-options{align-self:center}
#analysis-rail:not(.in-margin){flex-basis:118px;width:118px;padding:6px}#analysis-rail.in-margin{width:118px!important}#analysis-rail #live-crop-canvas{max-width:88px}#live-crop-header{font-size:10px}.live-crop-transport{gap:3px}
@media(max-width:999px){.editor-header{gap:6px;padding:7px 12px!important}.workspace-title-row{margin:0!important}.analysis-header-tools{gap:10px!important}.player-avatar{flex-basis:40px}.player-avatar-button{width:40px;height:40px}}
@media(pointer:coarse){.transport-main>button{min-width:44px;min-height:44px}.transport-main .transport-pair #play,.transport-main .transport-pair #replay{min-width:44px;min-height:44px;width:44px;height:44px;max-width:44px;max-height:44px}}
/* Keep the avatar center clear of its corner controls on compact screens. */
@media(max-width:999px){.player-avatar{flex-basis:48px}.player-avatar-button{width:48px;height:48px}}
@media(min-width:1000px){.costume-button{min-width:23px;min-height:23px}.player-chip{min-width:22px;min-height:20px}}
/* Smash-style player chips: round face, raised rim, white lettering. */
.player-chip{width:28px;height:28px;min-width:28px;min-height:28px;padding:0;border-radius:50%;border:2px solid #ffffff70;display:grid;place-items:center;font-size:10px;font-weight:850;line-height:1;color:#fff;text-shadow:0 1px 1px #0009;box-shadow:inset 0 2px 2px #ffffff60,inset 0 -3px 3px #0005,0 1px 3px #0008}
.player-chip-p1{background:radial-gradient(circle at 40% 30%,#ff555b,#ed202c 65%,#b91422)}
.player-chip-p2{background:radial-gradient(circle at 40% 30%,#5ba3ff,#2672d9 65%,#174b9f)}
@media(min-width:1000px){.player-chip{width:26px;height:26px;min-width:26px;min-height:26px;font-size:9px}}
/* Compact cards with fighters and counts sharing the same column centers. */
#library-recordings[data-view=grid]{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:12px}
@media(max-width:600px){#library-recordings[data-view=grid]{grid-template-columns:1fr}}
@media(pointer:coarse){.recording-mode-toggle .recording-mode{width:44px;height:44px;min-height:44px}}
@media(pointer:coarse){.recording-preview-controls .recording-mode-toggle .recording-mode,.recording-preview-controls .recording-delete{width:36px;height:36px;min-height:36px}}
#library-recordings[data-view=list] .recording-preview-controls{top:6px;right:6px}
.stage-column>.media-toolbar{flex:none;background:var(--bg);border-top:1px solid var(--line);padding:5px 8px!important;align-items:center}.transport-main .transport-pair{display:grid;grid-template-columns:32px 38px 32px;grid-template-rows:38px 14px;gap:1px 6px}.transport-main .transport-pair .playhead-label{grid-column:2;grid-row:2;width:100%;min-width:0;text-align:center;font-size:9px;white-space:nowrap;margin:0}.transport-pair #playback-options{grid-column:3;grid-row:1}.transport-main>button{align-self:start;margin-top:1px}
@media(min-width:1101px){.workspace-list,.workspace-inspector{position:relative}}.workspace-resizer{position:absolute;z-index:20;touch-action:none}.workspace-resizer.vertical{top:0;bottom:0;width:8px;cursor:col-resize;right:-4px}.workspace-inspector>.workspace-resizer.vertical{left:-4px;right:auto}.workspace-resizer.horizontal{left:0;right:0;bottom:-4px;height:8px;cursor:row-resize}.workspace-resizer:hover,.workspace-resizer:focus-visible{background:var(--primary);opacity:.6;outline:0}
@media(min-width:1101px){body:not(.focus-player-active) .workspace-list:not(.is-minimized),body:not(.focus-player-active) .workspace-inspector{width:var(--custom-panel-width)!important;flex-basis:var(--custom-panel-width)!important}#editor:not(.editing-workspace) .workspace-body{flex:1 0 var(--custom-video-height);min-height:var(--custom-video-height)}}
@media(max-width:1100px){.workspace-resizer.vertical{display:none}}
.action-comment-display{padding:10px 16px 20px;box-sizing:border-box;border-radius:8px;overflow:auto}.comment-resizer{position:absolute;bottom:2px;right:2px;width:18px;height:18px;cursor:nwse-resize;touch-action:none;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);opacity:.5}.comment-resizer:hover,.comment-resizer:focus-visible{opacity:1;outline:2px solid var(--primary)}.comment-appearance{width:100%}.comment-appearance>div{position:static!important;box-shadow:none!important;min-width:0!important}.comment-appearance label{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}.comment-appearance select{max-width:130px}
.move-head-stats{margin-left:auto;display:flex;gap:20px;align-items:center;flex-shrink:0}.move-head-stat{display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:400}.move-head-stat>small{font-size:10px;color:var(--muted);white-space:nowrap}.move-head-stat strong{font-size:22px;font-weight:700;white-space:nowrap}.move-damage-values{display:flex;align-items:center;gap:6px}.move-damage-slash{font-size:16px;color:var(--muted)}.move-damage-hit{position:relative}.damage-hit-label{display:none;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);padding:3px 6px;border-radius:4px;font-size:10px;font-weight:500;background:var(--bg);color:var(--text);box-shadow:0 1px 6px #0005}.move-damage-hit:hover .damage-hit-label,.move-damage-hit:focus .damage-hit-label{display:block}.move-strip span.phase-highlight{filter:brightness(1.5);box-shadow:inset 0 0 0 1px #ffffffc0}.move-strip span.phase-dim{opacity:.25}.move-card:focus-visible{outline:2px solid var(--primary);outline-offset:3px}.move-hit-windows{display:grid;gap:2px;margin:7px 0 14px;font-size:10px;color:var(--muted)}.move-hit-windows>span{text-align:center;border-top:2px solid #ef465780;padding-top:4px;white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip}.move-hit-windows>span>small,.move-hit-windows>span>strong{display:block;font-size:inherit;line-height:1.4}.move-hit-windows>span>strong{color:var(--text);font-weight:600}.workspace-inspector .move-reference-heading{flex-wrap:wrap}.workspace-inspector .move-head-stats{width:100%;justify-content:space-around;margin:8px 0 0}.move-reference-footer{justify-content:flex-end}
@media(max-width:600px){.move-reference-heading{flex-wrap:wrap}.move-head-stats{width:100%;justify-content:space-around;margin:8px 0 0}}
.move-reference-heading .move-name{margin:0;font:inherit;line-height:1.2;min-width:0;overflow-wrap:anywhere}.fighter-modal[data-kind=move] .fighter-dialog{padding-top:24px}.fighter-modal[data-kind=move] .move-reference-heading{min-height:40px;padding-right:40px}.fighter-modal[data-kind=move] .fighter-close{top:26px;right:14px;width:36px;height:36px;padding:0;display:grid;place-items:center}.fighter-modal[data-kind=move] .move-reference>p.muted:first-of-type{margin-top:8px}
.move-hitbox-button{white-space:nowrap;font-size:12px;min-height:34px}.move-hit-windows>span{cursor:default}.move-hit-windows>span:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.hitbox-lightbox{z-index:100}.hitbox-dialog{width:min(760px,calc(100vw - 24px));display:flex;flex-direction:column;gap:16px}.hitbox-image{width:100%;max-height:65vh;object-fit:contain;border-radius:6px;background:#0b1019}.hitbox-dialog>a{align-self:flex-end;font-size:13px}
.player-chip.tracking-dot{width:18px;height:18px;min-width:18px;min-height:18px;border-radius:50%;background:var(--panel);border:2px solid var(--muted);box-shadow:0 1px 3px #0006;text-shadow:none}.player-chip.tracking-dot.is-tracked{background:#f43c4c;border-color:#ffc1c7;box-shadow:0 0 0 2px #ef394225,0 1px 3px #0006}.tracking-dot:not(.is-tracked):hover:enabled{border-color:#f43c4c;background:#ef394225}
.fighter-modal[data-kind=move] .move-reference{border-top:0;padding-top:0}

.move-subtitle{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:8px 0 18px;font-size:12px}
.move-autocancel-timing{white-space:normal;overflow-wrap:anywhere}
.move-landing-data{display:grid;gap:8px;margin:14px 0}
.move-landing-data:empty{display:none}
.move-landing-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.move-landing-row>small{color:var(--muted);font-size:11px}
.move-hop-badges{display:flex;flex-wrap:wrap;gap:5px}
.move-hop-badge{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:12px;padding:3px 8px;font-size:11px;font-weight:600;line-height:1.3;background:var(--surface);color:var(--text)}

/* Action tools belong to the video workspace without covering match footage. */

.custom-action-tag{margin:12px 0 20px}.custom-action-tag>div{display:flex;gap:8px;margin:6px 0}.custom-action-tag input{flex:1;min-width:0}.custom-action-tag small{color:var(--muted)}

#stage .box-review{position:absolute;transform:none;max-width:calc(100% - 16px);min-height:30px;padding:0 3px;gap:4px;border:0;border-bottom:1px solid #ff596b99;border-radius:0;background:transparent;box-shadow:none;box-sizing:border-box;color:#fff;text-shadow:0 1px 3px #000,0 0 6px #000}
#stage .box-review[hidden]{display:none}
#stage .box-review #move-search{min-height:30px;padding:3px 4px;font-size:12px;color:#fff;text-shadow:0 1px 3px #000,0 0 5px #000;background:transparent}
#stage .box-review .box-quick{gap:1px;padding-left:3px;border:0}
#stage .box-review .box-quick button{min-width:28px;min-height:30px;padding:4px;background:transparent;color:#fff;border:0;filter:drop-shadow(0 1px 2px #000)}
#stage .box-review .box-quick #skip{color:#ff7282}
#stage .box-review .box-quick button:hover,#stage .box-review #move-search:hover{background:#10172088;border-radius:4px}
#stage .box-review .move-timing span{font-size:10px;padding:3px 4px;background:#11182055;box-shadow:0 1px 3px #0005}
#stage .box-review.compact{gap:0 4px}
#stage .box-review.compact .box-label{grid-column:1/-1}

.player-avatar-button.needs-character{box-shadow:0 0 0 2px #78aaff55;animation:opponent-invite 2.4s ease-in-out infinite}
@keyframes opponent-invite{0%,100%{box-shadow:0 0 0 2px #78aaff33,0 0 5px #78aaff11}50%{box-shadow:0 0 0 2px #78aaff88,0 0 14px #78aaff44}}
.workspace-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:32px 16px;color:var(--muted)}
.workspace-empty strong{font-size:14px;color:var(--text);font-weight:600}
.workspace-empty p{font-size:12px;line-height:1.6;margin:0;max-width:220px}
.workspace-empty-icon{display:grid;place-items:center;opacity:.5;margin-bottom:3px}
.workspace-empty-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5}
@media(prefers-reduced-motion:reduce){.player-avatar-button.needs-character{animation:none}}

.player-avatar-button.needs-character{position:relative;overflow:visible;border:2px solid #8bb9ff!important;box-shadow:0 0 12px #589bff99;animation:opponent-invite 1.6s ease-in-out infinite}
.player-avatar-button.needs-character:after{content:"";position:absolute;inset:-5px;border:2px solid #77adff;border-radius:50%;pointer-events:none;animation:opponent-ring 1.6s ease-out infinite}
@keyframes opponent-invite{0%,100%{box-shadow:0 0 10px #589bff88}50%{box-shadow:0 0 20px #589bffdd,0 0 6px #b8d4ff;filter:brightness(1.2)}}
@keyframes opponent-ring{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.45);opacity:0}}
@media(prefers-reduced-motion:reduce){.player-avatar-button.needs-character,.player-avatar-button.needs-character:after{animation:none}.player-avatar-button.needs-character:after{opacity:.6}}

.custom-move-reference{width:100%;margin-bottom:12px}#custom-move-summary{font-size:12px;color:var(--primary);margin:8px 0}.action-choice[aria-pressed=true]{border-color:var(--primary);background:#327cff22}

#stage .box-review .box-label{flex:0 1 auto}#stage .box-review #move-search{width:auto;max-width:100%}#stage .box-review .box-quick{flex:none}#stage .box-review .move-timing{flex:none}

.action-pick-settings{display:flex;align-items:center;flex-wrap:wrap;gap:16px;font-size:12px;margin:12px 0}.action-pick-settings label{display:flex;align-items:center;gap:7px}.action-pick-settings input{width:15px;height:15px;min-height:0;margin:0}.merge-drop-target{outline:2px solid var(--primary);background:#327cff22!important}

.selected-custom-moves{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}.selected-custom-moves[hidden]{display:none}.selected-custom-move{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:5px;background:var(--surface);font-size:12px}.selected-custom-move strong{flex:1}.selected-custom-move label{display:flex;align-items:center;gap:6px;white-space:nowrap}.selected-custom-move input{width:14px;height:14px;min-height:0;margin:0}.selected-custom-move button{min-height:24px;padding:2px 6px}

.move-facing{width:auto;max-width:100%;margin:0 0 12px;font-size:12px;min-height:30px}

/* Active-frame bar: alternate tint per hit, inline version picker, raw fallback. */
.move-strip .active.hit-alt{background:#ff8f9b;border-color:#ff8f9b}
.move-version{width:auto;min-height:26px;height:26px;padding:0 8px;font-size:12px;border-radius:13px}
.move-raw-frames{margin:4px 0 12px;font-size:12px;color:var(--muted)}

.selected-moves-heading{font-size:11px;color:var(--muted);margin:0 0 3px}
#custom-move-summary .selected-custom-move{gap:10px;padding:6px 10px 6px 4px;border:1px solid var(--line);background:#ffffff03;border-radius:6px;color:var(--text)}
.selected-custom-move strong{font-size:12px;font-weight:500;min-width:0;overflow-wrap:anywhere}
.selected-custom-move label{font-size:11px;color:var(--muted)}
.selected-custom-move .selected-move-handle{cursor:grab;background:transparent;border:0;min-height:28px;width:24px;padding:3px;color:var(--muted);flex:none}
.selected-move-handle svg{width:16px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.selected-custom-move .selected-move-remove{background:transparent;border:0;color:var(--muted);font-size:18px;line-height:1;min-height:28px;width:24px;padding:3px}
.selected-move-remove:hover{color:#ff7282!important;background:#ff596b15!important}
#custom-move-summary .reorder-target{border-color:var(--primary);background:#327cff15}
#custom-move-summary .reordering{opacity:.45}

.custom-move-reference{width:auto;max-width:min(320px,calc(100% - 48px));display:block;margin-bottom:10px}
.fighter-modal[data-kind=move] .custom-move-reference{max-width:min(320px,calc(100% - 48px))}
.fighter-modal[data-kind=move] .fighter-close{top:20px;right:16px}

.selected-custom-move .true-input-toggle{position:relative;display:block;cursor:pointer;flex:none}
.selected-custom-move .true-input-toggle input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.true-input-toggle>span{display:flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--line);border-radius:20px;font-size:11px;color:var(--muted);background:transparent;transition:background .15s,border-color .15s,color .15s}
.true-input-toggle>span:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45}
.true-input-toggle input:checked+span{background:#327cff20;border-color:#6ca5ff88;color:#9bc1ff}
.true-input-toggle input:checked+span:before{opacity:1;box-shadow:0 0 5px #6ca5ff55}
.true-input-toggle input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}
.true-input-toggle:hover>span{border-color:#6ca5ff66}

#confirm-action-box{position:absolute;z-index:12;min-height:28px;padding:4px 10px;border:1px solid #adb7c1;border-radius:3px;background:#17212ddd;color:#fff;font-size:12px;box-shadow:0 2px 6px #0006}#confirm-action-box[hidden]{display:none}
.action-picker-header{margin-bottom:20px}.action-picker-header p{display:none}.custom-action-tag{margin:0 0 18px;padding:14px;background:#ffffff03;border:1px solid var(--line);border-radius:8px}.custom-action-tag>label{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}.multi-move-badge{font-size:10px;color:#9cbfff;background:#387bdf18;border-radius:12px;padding:3px 8px}.selected-custom-move{min-height:48px!important;padding:8px 10px!important;gap:10px!important}.selected-custom-move strong{flex:1}.picker-frame-data{font-size:11px;color:#9cbfff;background:transparent;border:0;padding:4px;white-space:nowrap}.picker-frame-data:hover{background:#387bdf18}.action-dialog #move-query{margin:10px 0 14px}.action-dialog #move-options{scrollbar-width:thin;scrollbar-color:#435366 transparent}.action-choice{border-radius:5px}
.hitbox-frame-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:12px;color:var(--muted);font-size:12px}.hitbox-step{width:34px;min-height:30px;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--text);font-size:20px}.hitbox-step:disabled{opacity:.35}.hitbox-dialog canvas.hitbox-image{max-width:100%;height:auto}.hitbox-dialog .hitbox-image[hidden]{display:none}
.move-identity{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}.move-inline-inputs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;font-weight:400}.move-inline-inputs .custom-move-reference,.move-inline-inputs .move-facing{display:inline-block;width:auto;max-width:180px;margin:0;min-height:28px;height:28px;padding:3px 8px;font-size:11px}.fighter-modal[data-kind=move] .move-inline-inputs .custom-move-reference{max-width:180px}.move-inline-inputs .move-facing{max-width:80px}.move-reference-heading{align-items:center}
.hitbox-dialog{gap:10px;padding-bottom:16px}.hitbox-dialog h2{margin:0;padding-right:32px}.hitbox-dialog>a.hitbox-source{align-self:flex-start;font-size:11px;margin:-4px 0 6px;text-decoration:none;color:var(--muted)}.hitbox-dialog>a.hitbox-source:hover{color:var(--primary)}.hitbox-dialog .hitbox-frame-controls{margin-top:0;gap:14px}.hitbox-dialog .hitbox-frame-controls span{min-width:80px;text-align:center}
.inline-hitbox{margin:12px 0;display:flex;flex-direction:column;gap:8px}.inline-hitbox .hitbox-image{max-height:42vh;width:100%;object-fit:contain}.inline-hitbox canvas{height:auto}.inline-hitbox .hitbox-image[hidden]{display:none}.inline-hitbox .hitbox-frame-controls{margin:0}.fighter-modal[data-kind=move] .move-cards{gap:10px;margin:12px 0}.fighter-modal[data-kind=move] .move-card{padding:10px 14px;min-height:0}.fighter-modal[data-kind=move] .move-card strong{font-size:26px}.fighter-modal[data-kind=move] .move-card small{font-size:10px}.move-strip span.current-frame{outline:2px solid #edf3f8;outline-offset:2px;filter:brightness(1.4);position:relative;z-index:1}.move-card.current-phase{box-shadow:inset 0 0 0 2px var(--primary);background:#387bdf15}.inline-hitbox-source{font-size:11px;font-weight:400;color:var(--muted);text-decoration:none}.inline-hitbox-source:hover{color:var(--primary)}
.move-head-stats{gap:18px}.move-head-stat strong{font-size:20px}.move-head-stat:last-child strong{font-size:18px}.move-reference-footer:empty{display:none}@media(max-width:600px){.move-head-stats{gap:12px;flex-wrap:wrap}.move-head-stat strong{font-size:18px}}
.move-strip,.fighter-dialog .move-strip{height:17px;min-height:17px;overflow:visible}.move-hit-windows{margin:5px 0 0;height:2px;gap:2px}.move-hit-windows>span{border-top:2px solid var(--hit-color);padding:0;height:0}.move-hit-legend{display:flex;flex-wrap:wrap;gap:7px 16px;margin:9px 0 12px;color:var(--muted);font-size:11px}.move-hit-legend-entry{display:inline-flex;align-items:center;gap:6px;line-height:1.4}.move-hit-legend-entry i{width:6px;height:6px;border-radius:50%;background:var(--hit-color);flex:none}.move-hit-legend-entry:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

.fighter-grid{position:relative}.fighter-forms{position:absolute;z-index:5;display:block;margin:0;padding:12px;background:var(--panel,#17212c);border:1px solid var(--line);border-radius:5px;box-shadow:0 8px 24px #0006;max-width:100%;width:max-content}.fighter-forms[hidden]{display:none}.inline-picker-title{margin:0 0 10px;color:var(--muted);font-size:12px}.inline-picker-choices{display:flex;gap:6px;flex-wrap:wrap;max-width:440px}.fighter-forms .costume-choice{padding:4px;border:0;min-width:48px}.fighter-forms .inline-form-choice{flex-direction:column;padding:8px;border:0;border-radius:4px;font-size:12px}

/* Shared picker motion: quick entrance, soft settling, no layout bounce. */
.fighter-modal{animation:picker-shade-in 160ms ease-out}.fighter-modal .fighter-dialog{animation:picker-dialog-in 240ms cubic-bezier(.2,.8,.2,1)}
.fighter-forms{transform-origin:bottom left;overflow:hidden}.fighter-forms button{transition:background 140ms ease,color 140ms ease,box-shadow 140ms ease}.fighter-cell{transition:background 140ms ease}
@keyframes picker-shade-in{from{opacity:0}to{opacity:1}}@keyframes picker-dialog-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.fighter-modal,.fighter-modal .fighter-dialog{animation:none}.fighter-forms button,.fighter-cell{transition:none}}
.fighter-search{display:block;width:100%;box-sizing:border-box;margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);font:inherit}
.fighter-search:focus{outline:2px solid var(--primary);outline-offset:1px}
.fighter-search-empty{text-align:center;color:var(--muted);padding:24px}
.fighter-cell[hidden],.fighter-search-empty[hidden]{display:none!important}

.player-account{align-self:flex-start;font-size:10px;padding:2px 5px;margin-top:2px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:4px}