/* V4 light game window. Load after the existing result styles.
   The input wizard, preset strips, static calculator and shared footer are
   intentionally outside this scope. Details state and playback order stay in HTML.
   Result typography follows the shared UI scale; input and SVG coordinates have explicit exceptions. */
body#top .v4-simulation-panel {
  --v4-ui-text: #49321f;
  --v4-ui-label: #594128;
  --v4-ui-muted: #796047;
  --v4-ui-line: #bc9060;
  --v4-ui-surface: #fffaf0;
  --v4-ui-rule: #e4d3b7;
  --v4-ui-green: #27663d;
  --v4-ui-purple: #674599;
  --v4-ui-orange: #a94818;
  --v4-ui-gold: #805014;
  color-scheme: light;
  padding: 14px;
  color: var(--v4-ui-text);
  border: 2px solid var(--v4-ui-line);
  border-radius: 18px;
  background: linear-gradient(135deg, #fff5de, #f8e6c5);
  box-shadow: inset 0 0 0 2px #fff9ec, 0 3px 0 #d4b07d;
  font-size: var(--ui-type-l4-size, 14px) !important;
  line-height: var(--ui-type-l4-line, 1.65) !important;
}

body#top .v4-simulation-panel .v4-simulation-head {
  gap: 10px;
  margin: -14px -14px 12px;
  padding: 12px 14px;
  border-bottom: 2px solid #c49b62;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(#ffeac0, #efcb8f);
  box-shadow: inset 0 2px #fff7e6, 0 1px #fff9ed;
}
body#top .v4-simulation-panel .v4-simulation-head h3 { font-size: var(--ui-type-l2-size, 22px) !important; line-height: var(--ui-type-l2-line, 1.4) !important; color: #593416; font-weight: var(--ui-type-l2-weight, 700) !important;}
body#top .v4-simulation-panel .v4-preparing { padding: 5px 8px; font-size: var(--ui-type-note-size, 12px) !important; line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-battle-settings { border-color: var(--v4-ui-line); background: var(--v4-ui-surface); }
body#top .v4-simulation-panel .v4-battle-settings > summary {
  min-height: 44px;
  padding: 10px 12px;
  gap: 8px;
  box-sizing: border-box;
  font-size: var(--ui-type-l3-size, 16px) !important;
  line-height: var(--ui-type-l3-line, 1.4) !important; font-weight: var(--ui-type-l3-weight, 700) !important;}
body#top .v4-simulation-panel .v4-battle-settings > summary small { color: var(--v4-ui-muted); font-size: var(--ui-type-note-size, 12px) !important; line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-settings-body { padding: 10px 12px; gap: 10px; }
body#top .v4-simulation-panel .v4-settings-body .v4-input-fields { gap: 10px; align-content: start; }
body#top .v4-simulation-panel .v4-settings-body .v4-input-field,
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-field { gap: 5px; color: var(--v4-ui-label); font-size: var(--ui-type-l4-size, 14px) !important; line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-input-field > select,
body#top .v4-simulation-panel .v4-duration-input,
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-field > select,
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-field > input {
  min-height: 44px;
  box-sizing: border-box;
  border-color: #b99567;
  background: #fffdf7;
  color: var(--v4-ui-text);
  font-size: var(--ui-type-input-size, 16px) !important;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;}
body#top .v4-simulation-panel .v4-input-field > select,
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-field > select,
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-field > input { padding: 9px 10px; }
body#top .v4-simulation-panel .v4-duration-input input { min-height: 44px; padding: 8px 0; box-sizing: border-box; font-size: var(--ui-type-input-size, 16px) !important; font-variant-numeric: tabular-nums;}
body#top .v4-simulation-panel .v4-duration-input > span { color: var(--v4-ui-muted); font-size: var(--ui-type-l4-size, 14px) !important;  line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-field > small { font-size: var(--ui-type-note-size, 12px) !important; color: var(--v4-ui-muted); line-height: var(--ui-type-l4-line, 1.65) !important;}
/* The label is the touch target; never enlarge all inputs, checkbox icons or steppers. */
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-dummy-immunity { min-height: 44px; gap: 8px; font-size: var(--ui-type-l4-size, 14px) !important; color: var(--v4-ui-label);  line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-dummy-immunity input { flex: 0 0 18px; width: 18px; height: 18px; }
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-dummy-immunity span { flex: 0 0 auto; white-space: nowrap; }
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-dummy-immunity small { min-width: 0; word-break: keep-all; overflow-wrap: break-word; color: var(--v4-ui-muted); font-size: var(--ui-type-note-size, 12px) !important; line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-simulation-start { min-height: 44px; margin: 10px 0 6px; padding: 10px 12px; font-size: var(--ui-type-l4-size, 14px) !important; line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-simulation-status,
body#top .v4-simulation-panel .v4-playback-status,
body#top .v4-simulation-panel .v4-static-boundary { color: var(--v4-ui-muted); font-size: var(--ui-type-note-size, 12px) !important; line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-simulation-status { margin-bottom: 10px; }
body#top .v4-simulation-panel .v4-static-boundary { margin-top: 12px; padding-top: 10px; }
body#top .v4-connection-check p { font-size: var(--ui-type-l4-size, 14px) !important; line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top #v4CheckConnection { min-height: 44px; font-size: var(--ui-type-l4-size, 14px) !important;  line-height: var(--ui-type-l4-line, 1.65) !important;}

/* Compact cards keep their existing mobile two-up layout and full-width time. */
body#top .v4-simulation-panel .v4-result-summary { gap: 8px; margin-bottom: 10px; }
body#top .v4-simulation-panel .v4-result-summary article { padding: 10px 12px; border-color: var(--v4-ui-line); background: var(--v4-ui-surface); }
body#top .v4-simulation-panel .v4-result-summary h4 { color: var(--v4-ui-label); font-size: var(--ui-type-l3-size, 16px) !important; line-height: var(--ui-type-l3-line, 1.4) !important; font-weight: var(--ui-type-l3-weight, 700) !important;}
body#top .v4-simulation-panel .v4-result-summary strong { margin: 6px 0 0; color: #27663d; font-size: var(--ui-type-l2-size, 22px) !important; line-height: var(--ui-type-l2-line, 1.4) !important; letter-spacing: -.025em; text-align: right; font-variant-numeric: tabular-nums;}
/* Elapsed time is supporting data, kept at L3 so the three-card row stays compact. */
body#top .v4-simulation-panel .v4-result-summary article:last-child strong { color: var(--v4-ui-text); font-size: var(--ui-type-l3-size, 16px) !important; letter-spacing: -.02em; line-height: var(--ui-type-l3-line, 1.4) !important;}
body#top .v4-simulation-panel .v4-encounter-summary { margin-bottom: 10px; color: var(--v4-ui-label); font-size: var(--ui-type-l4-size, 14px) !important; line-height: var(--ui-type-l4-line, 1.65) !important; overflow-wrap: anywhere;}
body#top .v4-simulation-panel .v4-encounter-summary[data-clear-result="possible"] { color: #27663d; font-size: var(--ui-type-l4-size, 14px) !important;  line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-encounter-summary[data-clear-result="impossible"] { color: #a94818; font-size: var(--ui-type-l4-size, 14px) !important;  line-height: var(--ui-type-l4-line, 1.65) !important;}

body#top .v4-simulation-panel .v4-damage-breakdown,
body#top .v4-simulation-panel .v4-timeline-panel { padding: 12px; border-color: var(--v4-ui-line); background: var(--v4-ui-surface); }
body#top .v4-simulation-panel .v4-share-heading { gap: 4px 12px; }
body#top .v4-simulation-panel .v4-share-heading strong,
body#top .v4-simulation-panel .v4-damage-chart h4,
body#top .v4-simulation-panel .v4-timeline-panel h4 { color: var(--v4-ui-text); font-size: var(--ui-type-l3-size, 16px) !important; line-height: var(--ui-type-l3-line, 1.4) !important; font-weight: var(--ui-type-l3-weight, 700) !important;}
body#top .v4-simulation-panel .v4-share-heading span { color: var(--v4-ui-muted); font-size: var(--ui-type-note-size, 12px) !important; line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-share-bar { height: 9px; margin: 8px 0; }
body#top .v4-simulation-panel .v4-share-legend { gap: 5px 10px; font-size: var(--ui-type-l4-size, 14px) !important; line-height: var(--ui-type-l4-line, 1.65) !important; font-variant-numeric: tabular-nums;}
body#top .v4-simulation-panel .v4-damage-skill-list { grid-template-columns: minmax(0, 1fr); column-gap: 18px; margin-top: 9px; }
body#top .v4-simulation-panel .v4-damage-skill { grid-template-columns: minmax(0, 1fr) auto 54px; gap: 7px; min-height: 28px; line-height: 1.35; border-bottom-color: #e4d3b7; }
body#top .v4-simulation-panel .v4-damage-skill .v4-lane-label strong { font-size: var(--ui-type-l4-size, 14px) !important;  line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-skill-amount { color: #49321f; font-size: var(--ui-type-l4-size, 14px) !important; text-align: right; font-variant-numeric: tabular-nums;  line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-skill-share { font-size: var(--ui-type-l4-size, 14px) !important; line-height: var(--ui-type-l4-line, 1.65) !important; white-space: nowrap;}

body#top .v4-simulation-panel .v4-analysis-grid { gap: 10px; }
body#top .v4-simulation-panel .v4-damage-chart { padding: 12px 10px 0; border-color: var(--v4-ui-line); background: var(--v4-ui-surface); }
body#top .v4-simulation-panel .v4-damage-chart > header > span,
body#top .v4-simulation-panel .v4-graph-empty { color: var(--v4-ui-muted); font-size: var(--ui-type-note-size, 12px) !important; line-height: var(--ui-type-l4-line, 1.65) !important;}
/* SVG labels use the existing viewBox; its layout and pointer coordinates stay intact. */
body#top .v4-simulation-panel .v4-graph-axis-label { fill: #745638; font-size: 20px; font-variant-numeric: tabular-nums;}
/* Keep long Korean-unit totals inside the viewBox, above the first grid line. */
body#top .v4-simulation-panel #v4GraphYMax { text-anchor: start; transform: translate(12px, -8px); }
body#top .v4-simulation-panel .v4-graph-grid { stroke: #dec8a5; }
body#top .v4-simulation-panel .v4-graph-tooltip { padding: 10px; border-color: #ad8047; background: #fff8e5; }
body#top .v4-simulation-panel .v4-tooltip-head { font-size: var(--ui-type-l4-size, 14px) !important; line-height: var(--ui-type-l4-line, 1.65) !important; font-variant-numeric: tabular-nums;}
body#top .v4-simulation-panel .v4-graph-tooltip > small { color: #796047; font-size: var(--ui-type-note-size, 12px) !important; line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-tooltip-skills p { font-size: var(--ui-type-l4-size, 14px) !important; line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-graph-tooltip .v4-damage-skill { min-height: 28px; }

/* Only real playback controls get a 44px target, never the hover-only marks. */
body#top .v4-simulation-panel .v4-playback-controls { gap: 6px; margin-top: 8px; }
body#top .v4-simulation-panel .v4-playback-controls button,
body#top .v4-simulation-panel .v4-playback-controls select { min-height: 44px; padding: 8px 10px; box-sizing: border-box; border-color: #bd9862; color: #594128; font-size: var(--ui-type-l4-size, 14px) !important; line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-playback-controls select { font-size: var(--ui-type-input-size, 16px) !important; font-variant-numeric: tabular-nums;}
body#top .v4-simulation-panel .v4-playback-controls label,
body#top .v4-simulation-panel .v4-playback-position label { color: var(--v4-ui-muted); font-size: var(--ui-type-note-size, 12px) !important;  line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-playback-position { gap: 10px; margin-top: 4px; }
body#top .v4-simulation-panel .v4-playback-position input { min-height: 44px; }
body#top .v4-simulation-panel .v4-playback-status { margin: 3px 0 10px; }

/* Preserve the 28px / 24px timeline contract. No internal scrolling or seeking.
   Row labels use L4 UI text with a 20px line box to fit this icon-sized geometry. */
body#top .v4-simulation-panel .v4-timeline-panel > p { margin: 6px 0; color: var(--v4-ui-muted); font-size: var(--ui-type-note-size, 12px) !important; line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-lanes-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
body#top .v4-simulation-panel .v4-lanes-grid h5 { flex-wrap: wrap; gap: 3px 8px; font-size: var(--ui-type-l3-size, 16px) !important; line-height: var(--ui-type-l3-line, 1.4) !important; font-weight: var(--ui-type-l3-weight, 700) !important;}
body#top .v4-simulation-panel .v4-lanes-grid h5 small { color: var(--v4-ui-muted); font-size: var(--ui-type-note-size, 12px) !important; line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-timeline-scroll { max-height: none; overflow: visible; }
body#top .v4-simulation-panel .v4-lane-axis,
body#top .v4-simulation-panel .v4-timeline-lane { grid-template-columns: minmax(148px, 46%) minmax(0, 1fr); gap: 8px; }
body#top .v4-simulation-panel .v4-lane-axis { padding: 6px 0; color: var(--v4-ui-muted); font-size: var(--ui-type-note-size, 12px) !important; line-height: var(--ui-type-l4-line, 1.65) !important; font-variant-numeric: tabular-nums;}
body#top .v4-simulation-panel .v4-lane-axis > span { font-size: var(--ui-type-note-size, 12px) !important;  line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-timeline-lane { height: 28px; min-height: 0; padding: 1px 0; box-sizing: border-box; border-top-color: #e4d3b7; }
body#top .v4-simulation-panel .v4-timeline-lane .v4-lane-label img { width: 24px; height: 24px; }
body#top .v4-simulation-panel .v4-timeline-lane .v4-lane-label strong { color: #594128; font-size: var(--ui-type-l4-size, 14px) !important; line-height: 20px;}
body#top .v4-simulation-panel .v4-timeline-lane .v4-lane-label small { color: #796047; font-size: var(--ui-type-l4-size, 14px) !important; line-height: 20px; text-align: right;}
body#top .v4-simulation-panel .v4-timeline-lane.is-companion .v4-lane-label small { color: #805014; }
body#top .v4-simulation-panel .v4-timeline-lane.is-buff.is-active .v4-lane-label strong { color: #674599; }
body#top .v4-simulation-panel .v4-timeline-lane.is-debuff.is-active .v4-lane-label strong { color: #a94818; }
body#top .v4-simulation-panel .v4-state-empty { color: var(--v4-ui-muted); font-size: var(--ui-type-note-size, 12px) !important; line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-peak-summary { gap: 6px; margin: 7px 0 9px; }
body#top .v4-simulation-panel .v4-peak-info { padding: 5px 7px; font-size: var(--ui-type-note-size, 12px) !important; line-height: var(--ui-type-l4-line, 1.65) !important; font-variant-numeric: tabular-nums;}

/* Hit records retain their own existing 210px scroller, closed by default in HTML. */
body#top .v4-simulation-panel .v4-hit-record { border-color: var(--v4-ui-line); background: var(--v4-ui-surface); }
body#top .v4-simulation-panel .v4-hit-record > summary { min-height: 44px; padding: 10px 12px; box-sizing: border-box; }
body#top .v4-simulation-panel .v4-hit-record > summary strong { color: var(--v4-ui-label); font-size: var(--ui-type-l3-size, 16px) !important;  line-height: var(--ui-type-l3-line, 1.4) !important; font-weight: var(--ui-type-l3-weight, 700) !important;}
body#top .v4-simulation-panel .v4-hit-record > summary > span { color: var(--v4-ui-muted); font-size: var(--ui-type-note-size, 12px) !important;  line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-hit-record p { color: var(--v4-ui-muted); font-size: var(--ui-type-note-size, 12px) !important; line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel #v4SequenceLog .v4-sequence-row { grid-template-columns: 52px auto minmax(0, 1fr) auto; gap: 7px; font-size: var(--ui-type-l4-size, 14px) !important;  line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel #v4SequenceLog time { color: var(--v4-ui-muted); font-size: var(--ui-type-note-size, 12px) !important;  line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel #v4SequenceLog .v4-event-kind { padding: 1px 5px; font-size: var(--ui-type-note-size, 12px) !important;  line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel #v4SequenceLog .v4-event-label { color: var(--v4-ui-label); }
body#top .v4-simulation-panel #v4SequenceLog strong { font-size: var(--ui-type-l4-size, 14px) !important; font-variant-numeric: tabular-nums;  line-height: var(--ui-type-l4-line, 1.65) !important;}


/* Warm window trim. This stable result wrapper survives connection unlock. */
body#top [aria-labelledby="v4ValidationTitle"] {
  color-scheme: light;
  color: #49321f;
  border: 2px solid #a97a48;
  border-radius: 22px;
  background: linear-gradient(135deg, #fff8e7, #f5e3c0);
  box-shadow: inset 0 0 0 3px #fff3d6, 0 5px 0 #d0aa75, 0 12px 24px #71481d18;
}
body#top .v4-locked-content > .damage-tree-head { border-color: #e4d3b7; }
body#top .v4-locked-content > .damage-tree-head h2 { color: #49321f; text-shadow: 0 2px #fff9ea;  font-size: var(--ui-type-l2-size, 22px) !important; line-height: var(--ui-type-l2-line, 1.4) !important; font-weight: var(--ui-type-l2-weight, 700) !important;}
body#top .v4-locked-content .damage-tree-summary > span { color: #594128; border-color: #c4a16d; background: #fff7e4; box-shadow: inset 0 1px #fff, 0 2px #dbc39b; }
body#top .v4-locked-content #treeProfileState { color: #2f6741; border-color: #9fb386; background: #edf4df; }
body#top .v4-validation-cover { color: #805014; border-color: #b68136; background: linear-gradient(145deg, #fff6d9, #f0d5a0); box-shadow: inset 0 0 0 3px #fff7e2, 0 4px 0 #b98f55; }
body#top .v4-validation-cover h2 { color: #704019; text-shadow: 0 2px #fff9ec;  font-size: var(--ui-type-l2-size, 22px) !important; line-height: var(--ui-type-l2-line, 1.4) !important; font-weight: var(--ui-type-l2-weight, 700) !important;}
body#top .v4-validation-cover p,
body#top .v4-validation-cover strong { color: #654c30; font-size: var(--ui-type-l4-size, 14px) !important; line-height: var(--ui-type-l4-line, 1.65) !important; }
body#top .v4-connection-check { color: #796047; border-color: #cbae79; }
body#top .v4-connection-check p { color: #796047; }
body#top #v4CheckConnection { border-color: #b06c29; background: linear-gradient(#ffd78c, #f6ad4e); color: #552d0e; box-shadow: inset 0 1px #fff1c9, 0 2px #bd803b; }
body#top #v4CheckConnection:hover:not(:disabled) { background: linear-gradient(#ffe2a5, #ffbb5b); }
body#top #v4ConnectionStatus[data-state="error"] { color: #8b302c; border-color: #c18a75; background: #fff0e7; }
body#top .v4-simulation-panel .v4-simulation-head h3 { text-shadow: 0 2px #fff7e4; }
body#top .v4-simulation-panel .v4-simulation-lead { color: var(--v4-ui-muted); font-size: var(--ui-type-l4-size, 14px) !important;  line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-preparing { border: 1px solid #c09658; border-radius: 8px; background: #fff5d9; color: #79531d; box-shadow: inset 0 1px #fff, 0 2px #c69d61; }
body#top .v4-simulation-panel .v4-battle-settings { border-radius: 13px; box-shadow: 0 2px #ddc39a; }
body#top .v4-simulation-panel .v4-battle-settings > summary { color: var(--v4-ui-text); background: linear-gradient(#fff9e9, #f7e8cc); border-radius: 12px; }
body#top .v4-simulation-panel .v4-battle-settings[open] > summary { border-radius: 12px 12px 0 0; }
body#top .v4-simulation-panel .v4-battle-settings > summary::after,
body#top .v4-simulation-panel .v4-hit-record > summary::after { color: #8a5c2c; }
body#top .v4-simulation-panel .v4-settings-body,
body#top .v4-simulation-panel .v4-setting-row,
body#top .v4-simulation-panel .v4-settings-help,
body#top .v4-simulation-panel .v4-static-boundary { border-color: var(--v4-ui-rule); }
body#top .v4-simulation-panel .v4-setting-row h4 { color: var(--v4-ui-label); font-size: var(--ui-type-l3-size, 16px) !important;  line-height: var(--ui-type-l3-line, 1.4) !important; font-weight: var(--ui-type-l3-weight, 700) !important;}
body#top .v4-simulation-panel .v4-setting-row p,
body#top .v4-simulation-panel .v4-setting-row span,
body#top .v4-simulation-panel .v4-settings-help { color: var(--v4-ui-muted); font-size: var(--ui-type-note-size, 12px) !important;  line-height: var(--ui-type-l4-line, 1.65) !important;}
body#top .v4-simulation-panel .v4-input-field > select,
body#top .v4-simulation-panel .v4-duration-input,
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-field > select,
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-field > input { border-radius: 9px; box-shadow: inset 0 2px 3px #8b602415, 0 1px #fff; }
body#top .v4-simulation-panel .v4-input-field option { background: #fffdf7; color: var(--v4-ui-text); }
body#top .v4-simulation-panel .v4-input-field option:disabled { color: #8b7863; }
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-field > input::placeholder { color: #88725a; }
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-field > input[aria-invalid="true"] { border-color: #b15138; background: #fff1e7; box-shadow: 0 0 0 1px #b15138; }
body#top .v4-simulation-panel .v4-duration-input input { background: transparent; color: var(--v4-ui-text); }
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-dummy-immunity input { accent-color: var(--v4-ui-green); }
body#top .v4-simulation-panel .v4-simulation-start { border-radius: 11px; border-color: #b69162; background: #ebdec8; color: #79664f; box-shadow: inset 0 1px #fff6e5, 0 2px #c6ad86; }
body#top .v4-simulation-panel .v4-simulation-start:not(:disabled) { border-color: #ad6625; background: linear-gradient(#ffcf7c, #f49b3c); color: #53290b; box-shadow: inset 0 2px #ffebb7, 0 3px #b47433, 0 5px 9px #93602419; text-shadow: 0 1px #ffd99c; }
body#top .v4-simulation-panel .v4-simulation-start:not(:disabled):hover { background: linear-gradient(#ffdc99, #ffaa4c); }
body#top .v4-simulation-panel .v4-simulation-start:not(:disabled):active { background: linear-gradient(#f6b254, #f5a64b); box-shadow: inset 0 2px 3px #8d50152b, 0 2px #b47433; }
body#top .v4-simulation-panel .v4-result-summary article { border: 1px solid #c6a06a; border-radius: 13px; background: linear-gradient(#fffef8, #fff3d9); box-shadow: inset 0 2px #fff, 0 3px #ddc195; }
body#top .v4-simulation-panel .v4-result-summary article > span { color: var(--v4-ui-muted); }
body#top .v4-simulation-panel .v4-damage-breakdown,
body#top .v4-simulation-panel .v4-timeline-panel { border-radius: 13px; box-shadow: inset 0 1px #fff, 0 2px #dfc7a1; }
body#top .v4-simulation-panel .v4-share-bar { background: #805aae; box-shadow: inset 0 1px 2px #40205b29; }
body#top .v4-simulation-panel .v4-share-basic { background: #438050; }
body#top .v4-simulation-panel .v4-share-legend span:first-child { color: var(--v4-ui-green); }
body#top .v4-simulation-panel .v4-share-legend span:nth-child(2) { color: var(--v4-ui-purple); }
body#top .v4-simulation-panel .v4-share-legend strong { color: var(--v4-ui-gold); }
body#top .v4-simulation-panel .v4-damage-skill-list { border-color: var(--v4-ui-rule); }
body#top .v4-simulation-panel .v4-lane-label strong { color: var(--v4-ui-label); }
body#top .v4-simulation-panel .v4-skill-share { color: var(--v4-ui-purple); }
body#top .v4-simulation-panel .v4-damage-skill.is-basic .v4-skill-share { color: var(--v4-ui-green); }
body#top .v4-simulation-panel .v4-damage-skill.is-companion .v4-skill-share,
body#top .v4-simulation-panel .v4-damage-skill.is-companion .v4-lane-label strong { color: var(--v4-ui-gold); }
body#top .v4-simulation-panel .v4-icon-placeholder { background: #f0dfbc; color: #785831; box-shadow: inset 0 0 0 1px #c7a877; font-size: var(--ui-type-l4-size, 14px) !important; line-height: 20px; }
body#top .v4-simulation-panel .v4-damage-chart { border-radius: 13px; background: #fffdf5; box-shadow: inset 0 1px #fff, 0 2px #dfc7a1; }
body#top .v4-simulation-panel #v4DamageSeries { stroke: #327546; }
body#top .v4-simulation-panel #v4GraphCursor { stroke: #7a613e; }
body#top .v4-simulation-panel #v4GraphHoverCursor { stroke: #b54e1c; }
body#top .v4-simulation-panel .v4-graph-tooltip { border-width: 2px; border-radius: 11px; color: var(--v4-ui-text); box-shadow: inset 0 0 0 1px #fff, 0 3px 0 #d4b276, 0 8px 20px #63401930; }
body#top .v4-simulation-panel .v4-tooltip-head { color: var(--v4-ui-text); }
body#top .v4-simulation-panel .v4-tooltip-skills p { color: var(--v4-ui-label); }
body#top .v4-simulation-panel .v4-playback-controls button,
body#top .v4-simulation-panel .v4-playback-controls select { border-radius: 9px; background: linear-gradient(#fff9e9, #f1ddb7); box-shadow: inset 0 1px #fff, 0 2px #d0ae79; }
body#top .v4-simulation-panel .v4-playback-controls button:hover:not(:disabled) { background: #ffe6b4; border-color: #a87838; }
/* Legacy inline input styles use !important. Limit the necessary reset to
   result controls; wizard fields, preset editors and steppers are unaffected. */
body#top .v4-simulation-panel #v4PlaybackSpeed,
body#top .v4-simulation-panel .v4-input-field > select,
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-field > select,
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-field > input {
  color-scheme: light;
  background: #fffdf7 !important;
  color: var(--v4-ui-text) !important;
  border-color: #b99567 !important;
}
body#top .v4-simulation-panel #v4PlaybackSpeed option,
body#top .v4-simulation-panel .v4-input-field > select option,
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-field > select option { background: #fffdf7; color: var(--v4-ui-text); }
body#top .v4-simulation-panel .v4-input-field > select option:disabled { color: #8b7863; }
body#top .v4-simulation-panel #v4PlaybackSpeed:disabled { background: #efe5d2 !important; border-color: #caba9f !important; color: #897962 !important; }
body#top .v4-simulation-panel .v4-duration-input input,
body#top .v4-simulation-panel .v4-playback-position input,
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-dummy-immunity input { color-scheme: light; background: transparent !important; color: var(--v4-ui-text) !important; border-color: #b99567 !important; }
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-field > input[aria-invalid="true"] { background: #fff1e7 !important; border-color: #b15138 !important; }
body#top .v4-simulation-panel .v4-playback-controls :disabled { opacity: 1; background: #efe5d2; border-color: #caba9f; color: #897962; box-shadow: none; }
body#top .v4-simulation-panel .v4-playback-position input { accent-color: var(--v4-ui-green); }
body#top .v4-simulation-panel :is(.v4-battle-settings > summary, .v4-hit-record > summary, .v4-simulation-start, .v4-playback-controls button, .v4-playback-controls select, .v4-playback-position input, .v4-graph-stage svg):focus-visible,
body#top .v4-simulation-panel .v4-input-field > select:focus-visible,
body#top .v4-simulation-panel #v4ScenarioInputs .v4i-field > :is(input, select):focus-visible,
body#top #v4CheckConnection:focus-visible { outline: 2px solid #855421; outline-offset: 2px; }
body#top .v4-simulation-panel .v4-duration-input:focus-within { outline: 2px solid #855421; outline-offset: 2px; }
body#top .v4-simulation-panel .v4-lanes-grid h5 { color: var(--v4-ui-label); }
body#top .v4-simulation-panel .v4-buff-details h5 { color: var(--v4-ui-purple); }
body#top .v4-simulation-panel .v4-debuff-details h5 { color: var(--v4-ui-orange); }
body#top .v4-simulation-panel .v4-lane-track { background: repeating-linear-gradient(90deg, transparent, transparent calc(25% - 1px), #e2ceb0 calc(25% - 1px), #e2ceb0 25%); }
body#top .v4-simulation-panel .v4-lane-track::after { border-left-color: #8b6538; }
body#top .v4-simulation-panel .v4-cast-mark { background: #438050; }
body#top .v4-simulation-panel .is-companion .v4-cast-mark { background: #ad741e; }
body#top .v4-simulation-panel .v4-buff-band { background: #8863b7; }
body#top .v4-simulation-panel .v4-debuff-band { background: #c96d38; }
body#top .v4-simulation-panel .v4-cast-mark:hover,
body#top .v4-simulation-panel .v4-buff-band:hover { outline-color: #593e25; }
body#top .v4-simulation-panel .v4-peak-info { border-color: #c9a362; border-radius: 7px; background: #fff1cb; color: #795017; box-shadow: inset 0 1px #fff9e8, 0 2px #e1c894; }
body#top .v4-simulation-panel .v4-hit-record { border-radius: 13px; box-shadow: 0 2px #dfc7a1; }
body#top .v4-simulation-panel .v4-hit-record > summary { border-radius: 12px; background: linear-gradient(#fff9e9, #f7e8cc); }
body#top .v4-simulation-panel .v4-hit-record[open] > summary { border-radius: 12px 12px 0 0; }
body#top .v4-simulation-panel #v4SequenceLog { color: var(--v4-ui-label); scrollbar-color: #bb9665 #f0e4ce; }
body#top .v4-simulation-panel #v4SequenceLog li { border-color: var(--v4-ui-rule); }
body#top .v4-simulation-panel #v4SequenceLog .v4-event-kind { border-color: #cfb385; background: #f6e9cc; color: #71502c; }
body#top .v4-simulation-panel #v4SequenceLog strong { color: var(--v4-ui-green); }
body#top .v4-simulation-panel #v4SequenceLog .v4-event-damageTaken { color: #a34032; }
body#top .v4-simulation-panel #v4SequenceLog .v4-event-heal { color: var(--v4-ui-green); }
body#top .v4-simulation-panel #v4SequenceLog .v4-event-buff { color: var(--v4-ui-purple); }
body#top .v4-simulation-panel #v4SequenceLog .v4-event-miss { color: #7c6e5b; }

@container (min-width: 640px) {
  body#top .v4-simulation-panel .v4-lanes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  body#top .v4-simulation-panel .v4-damage-skill-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 430px) {
  body#top .v4-simulation-panel .v4-graph-axis-label { font-size: 25px;}
}

@media (max-width: 600px) {
  body#top .v4-simulation-panel { padding: 10px; }
  body#top .v4-simulation-panel .v4-simulation-head { margin: -10px -10px 10px; padding: 10px; }
  body#top .v4-simulation-panel .v4-battle-settings > summary { flex-wrap: wrap; gap: 3px 8px; }
  body#top .v4-simulation-panel .v4-battle-settings > summary small { max-width: 70%; }
  body#top .v4-simulation-panel .v4-settings-body { padding: 10px; }
  body#top .v4-simulation-panel #v4ScenarioInputs .v4i-dummy-immunity { flex-wrap: wrap; row-gap: 2px; }
  body#top .v4-simulation-panel #v4ScenarioInputs .v4i-dummy-immunity small { flex-basis: calc(100% - 26px); margin-left: 26px; }
  body#top .v4-simulation-panel .v4-result-summary article { padding: 9px 10px; }
  body#top .v4-simulation-panel .v4-result-summary article:last-child strong { margin: 0; }
  body#top .v4-simulation-panel .v4-damage-breakdown,
  body#top .v4-simulation-panel .v4-timeline-panel { padding: 10px; }
  body#top .v4-simulation-panel .v4-hit-record > summary { flex-wrap: wrap; gap: 3px 8px; }
  body#top .v4-simulation-panel #v4SequenceLog .v4-sequence-row { grid-template-columns: 48px auto minmax(0, 1fr) auto; gap: 5px; }
}

/* Distinguish the boss receiver from debuffs received by the player. */
body#top .v4-simulation-panel .v4-boss-effect-details h5 { color: var(--v4-ui-gold); }
body#top .v4-simulation-panel .v4-boss-buff-band { background: #a57a28; }
body#top .v4-simulation-panel .v4-player-debuff-band { background: #b75d49; }
body#top .v4-simulation-panel .v4-timeline-lane.is-boss-buff.is-active .v4-lane-label strong { color: var(--v4-ui-gold); }
body#top .v4-simulation-panel .v4-timeline-lane.is-player-debuff.is-active .v4-lane-label strong { color: #973e2e; }

@media (max-width: 520px) {
  #v4ScenarioInputs .v4i-scenario-fields:has(> .v4i-field > [data-action="companion-summon-mode"]) { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  body#top .v4-simulation-panel .v4-input-fields:has(#v4ContentSelect option:is([value="guildBoss"], [value="guildLeague"]):checked) { grid-template-columns: minmax(0, 1fr); }
}

body#top .v4-simulation-panel .v4-guild-score:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin: 10px 0; padding: 16px; border: 2px solid #799850; border-radius: 14px; background: #e9f3d8; color: #31551e; }
body#top .v4-simulation-panel .v4-guild-score > span { font-weight: 700; word-break: keep-all; }
body#top .v4-simulation-panel .v4-guild-score > strong { font-size: clamp(28px, 3vw, 40px); line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body#top .v4-simulation-panel .v4-guild-score > small { grid-column: 1 / -1; color: #526842; word-break: keep-all; }
@media (max-width: 520px) { body#top .v4-simulation-panel .v4-guild-score:not([hidden]) { grid-template-columns: minmax(0, 1fr); } }

/* Startup thumbnails only for small V4 job/companion cards. Large selected art
   and every original shared/gallery source retain their full-resolution files. */
body#top #profileWizard .wizard-job-card .job-art-hero{background-image:url('/assets/startup/hero-h420-fb90d457db4f.webp')}
body#top #profileWizard .wizard-job-card .job-art-paladin{background-image:url('/assets/startup/paladin-h420-0a06c215d9c4.webp')}
body#top #profileWizard .wizard-job-card .job-art-dark-knight{background-image:url('/assets/startup/dark-knight-h420-a64c435aca8a.webp')}
body#top #profileWizard .wizard-job-card .job-art-archmage-il{background-image:url('/assets/startup/archmage-ice-lightning-h420-72c0914e0f71.webp')}
body#top #profileWizard .wizard-job-card .job-art-archmage-fp{background-image:url('/assets/startup/archmage-fire-poison-h420-dc471810ede5.webp')}
body#top #profileWizard .wizard-job-card .job-art-bishop{background-image:url('/assets/startup/bishop-h420-7bad1e4c6924.webp')}
body#top #profileWizard .wizard-job-card .job-art-bowmaster{background-image:url('/assets/startup/bowmaster-h420-449fea23b7be.webp')}
body#top #profileWizard .wizard-job-card .job-art-marksman{background-image:url('/assets/startup/marksman-h420-ceb10cbc2e8b.webp')}
body#top #profileWizard .wizard-job-card .job-art-night-lord{background-image:url('/assets/startup/night-lord-h420-3e9815083219.webp')}
body#top #profileWizard .wizard-job-card .job-art-shadower{background-image:url('/assets/startup/shadower-h420-463d499bfa4e.webp')}
body#top #profileWizard .wizard-job-card .job-art-viper{background-image:url('/assets/startup/viper-h420-0a7cbe2f1fcc.webp')}
body#top #profileWizard .wizard-job-card .job-art-captain{background-image:url('/assets/startup/captain-h420-2eb5a300580b.webp')}
body#top #profileWizard .wizard-job-card .job-art-wind-breaker{background-image:url('/assets/startup/wind-breaker-h420-5dc18b18b337.webp')}
body#top #profileWizard .wizard-job-card .job-art-night-walker{background-image:url('/assets/startup/night-walker-h420-8a3dd5923bdb.webp')}