.damage-view { --blue: #66879a; --blue-soft: #f2f6f7; --blue-line: #c5d3d9; --red: #ae6e78; --red-soft: #faf3f3; --red-line: #dec9cb; }
.damage-intro { margin-bottom: 24px; }
.damage-loading { min-height: 360px; display: grid; place-items: center; align-content: center; gap: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.68); color: var(--muted); font-size: 12px; }
.damage-loading-mark { width: 34px; height: 34px; border: 3px solid #dce5dc; border-top-color: var(--teal); border-radius: 50%; animation: damage-spin .8s linear infinite; }
@keyframes damage-spin { to { transform: rotate(360deg); } }
.damage-load-error { margin: 0; color: #a4565f; }
.damage-workspace { position: relative; display: grid; gap: 14px; }

.damage-toolbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 12px 10px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 3px 14px rgba(34,45,43,.035); }
.damage-toolbar-copy { min-width: 0; display: flex; align-items: center; gap: 10px; }
.damage-engine-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #72a17a; box-shadow: 0 0 0 4px rgba(114,161,122,.13); }
.damage-toolbar-copy div { display: grid; gap: 2px; }
.damage-toolbar-copy small { color: #89928d; font-family: "DM Mono", monospace; font-size: 7px; letter-spacing: .09em; }
.damage-toolbar-copy strong { font-size: 12px; }
.damage-toolbar-actions { display: flex; gap: 8px; }
.damage-button, .damage-side-mini, .damage-predict-button { min-height: 38px; padding: 0 14px; border: 1px solid var(--teal); border-radius: 9px; background: var(--teal); color: #fff; font-size: 10px; font-weight: 750; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.damage-button:hover, .damage-predict-button:hover { background: #416a4c; }
.damage-button.is-secondary, .damage-side-mini { border-color: #cbd8cc; background: #fff; color: #526059; }
.damage-button.is-secondary:hover, .damage-side-mini:hover { border-color: #a9bdaa; background: #f3f7f2; color: var(--teal); }

.damage-conditions-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,.72fr) minmax(0,1fr); gap: 10px; align-items: start; }
.damage-condition-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 3px 14px rgba(34,45,43,.03); }
.damage-condition-card.is-blue { border-color: var(--blue-line); }
.damage-condition-card.is-red { border-color: var(--red-line); }
.damage-condition-heading { width: 100%; min-height: 49px; display: grid; grid-template-columns: auto minmax(0,1fr) 18px; align-items: center; gap: 9px; padding: 0 13px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.damage-condition-heading > span { font-size: 10px; font-weight: 800; }
.is-blue .damage-condition-heading > span { color: var(--blue); }
.is-red .damage-condition-heading > span { color: var(--red); }
.damage-condition-heading small { overflow: hidden; color: #8b9590; font-size: 8.5px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.damage-condition-heading svg { width: 16px; fill: none; stroke: #84908a; stroke-width: 1.7; stroke-linecap: round; transition: transform .16s ease; }
.damage-condition-card.is-open .damage-condition-heading svg { transform: rotate(180deg); }
.damage-condition-body { display: grid; gap: 10px; padding: 10px 12px 12px; border-top: 1px solid #e5e9e3; }
.damage-select-field { min-width: 0; display: grid; gap: 4px; }
.damage-select-field > span, .damage-quick-fields label > span, .damage-build-head label > span, .damage-target-row label > span { color: #808a84; font-family: "DM Mono", monospace; font-size: 7px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.damage-select-field select, .damage-shared-selects select, .damage-quick-fields input, .damage-quick-fields select, .damage-build-head select, .damage-target-row select { min-width: 0; width: 100%; height: 31px; padding: 0 8px; border: 1px solid #d8dfd7; border-radius: 6px; outline: 0; background: #fff; color: #3f4b46; font-size: 9px; }
.damage-select-field select:focus, .damage-quick-fields input:focus, .damage-quick-fields select:focus, .damage-build-head select:focus, .damage-target-row select:focus { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(79,124,91,.1); }
.damage-check-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.damage-check-grid.is-shared { grid-template-columns: repeat(3,1fr); }
.damage-check-grid label { min-width: 0; min-height: 28px; display: flex; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid #e0e5de; border-radius: 6px; background: #fff; color: #5e6964; font-size: 8px; cursor: pointer; }
.damage-check-grid input { width: 11px; height: 11px; flex: 0 0 auto; accent-color: var(--teal); }
.damage-shared-selects { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }

.damage-stage { min-width: 0; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #c9d2ca transparent; }
.damage-board { min-width: 1120px; display: grid; grid-template-columns: minmax(0,1fr) 42px minmax(0,1fr); align-items: start; gap: 10px; }
.damage-versus { position: sticky; top: 16px; min-height: 180px; display: grid; justify-items: center; align-content: start; gap: 8px; padding-top: 22px; }
.damage-versus span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #d8ddd7; border-radius: 50%; background: #fff; color: #7c8781; font-family: "DM Mono", monospace; font-size: 8px; font-weight: 600; }
.damage-versus i { width: 1px; height: 112px; background: linear-gradient(to bottom,var(--blue-line),#dadfd8,var(--red-line)); }
.damage-side { min-width: 0; overflow: visible; border: 1px solid var(--line); border-radius: 15px; padding: 10px; background: rgba(255,255,253,.46); }
.damage-side.is-blue { border-color: var(--blue-line); }
.damage-side.is-red { border-color: var(--red-line); }
.damage-side-head { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 3px 11px; }
.damage-side-head > div:first-child { min-width: 128px; }
.damage-side-head small { color: #8e9792; font-family: "DM Mono", monospace; font-size: 7px; letter-spacing: .08em; }
.damage-side-head h2 { margin: 3px 0 0; font-size: 18px; letter-spacing: -.035em; }
.damage-side.is-blue .damage-side-head h2 { color: var(--blue); }
.damage-side.is-red .damage-side-head h2 { color: var(--red); }
.damage-side-head p { margin: 2px 0 0; color: #8b9490; font-size: 8px; }
.damage-side-mini { min-height: 32px; height: 32px; padding: 0 10px; font-size: 8.5px; }
.damage-roster { display: grid; gap: 10px; }
.damage-side-empty { min-height: 230px; display: grid; justify-items: center; align-content: center; padding: 28px; border: 1px dashed; border-radius: 11px; text-align: center; }
.is-blue .damage-side-empty { border-color: var(--blue-line); }
.is-red .damage-side-empty { border-color: var(--red-line); }
.damage-side-empty > span { width: 24px; height: 24px; margin-bottom: 10px; border: 2px solid currentColor; border-radius: 50%; opacity: .25; }
.damage-side-empty strong { font-size: 12px; }
.damage-side-empty p { max-width: 270px; margin: 5px 0 14px; color: var(--muted); font-size: 9px; line-height: 1.5; }

.damage-opponent-search { position: relative; width: min(310px,68%); }
.damage-opponent-search > label { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--red-line); border-radius: 8px; background: #fff; }
.damage-opponent-search svg { width: 15px; flex: 0 0 auto; fill: none; stroke: #8f9793; stroke-width: 1.7; stroke-linecap: round; }
.damage-opponent-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 9.5px; }
.damage-opponent-search kbd { padding: 2px 5px; border: 1px solid #e1e4df; border-radius: 4px; background: #f7f7f3; color: #929a96; font-size: 8px; }
.damage-suggestions { position: absolute; z-index: 90; top: 44px; left: 0; right: 0; overflow: hidden; border: 1px solid var(--red-line); border-radius: 8px; background: #fff; box-shadow: 0 15px 35px rgba(45,37,38,.16); }
.damage-suggestions button { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 9px; border: 0; border-bottom: 1px solid #eee9e7; background: transparent; text-align: left; cursor: pointer; }
.damage-suggestions button:last-child { border-bottom: 0; }
.damage-suggestions button:hover, .damage-suggestions button.is-active { background: var(--red-soft); }
.damage-suggestions button > span { min-width: 0; display: flex; align-items: center; gap: 4px; }
.damage-suggestions strong { min-width: 0; overflow: hidden; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.damage-suggestions small { flex: 0 0 auto; color: #8b9490; font-family: "DM Mono", monospace; font-size: 7px; }

.damage-pokemon-card { position: relative; z-index: 1; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 3px 14px rgba(34,45,43,.045); transition: border-color .18s ease, opacity .15s ease, box-shadow .18s ease, transform .15s ease; }
.damage-pokemon-card:hover { border-color: #c8cdc6; box-shadow: var(--shadow); }
.damage-pokemon-card.is-blue { box-shadow: inset 3px 0 0 rgba(102,135,154,.32), 0 3px 14px rgba(34,45,43,.045); }
.damage-pokemon-card.is-red { box-shadow: inset 3px 0 0 rgba(174,110,120,.28), 0 3px 14px rgba(34,45,43,.045); }
.damage-pokemon-card.is-dragging { opacity: .45; }
.damage-pokemon-card.is-drag-over { transform: translateY(3px); box-shadow: 0 -3px 0 var(--teal); }
.damage-pokemon-head { position: relative; min-height: 96px; display: grid; grid-template-columns: minmax(190px,1fr) minmax(268px,1.34fr); align-items: center; gap: 0; padding: 12px 0; border-bottom: 1px solid #e7e9e3; background: transparent; }
.damage-identity-group { min-width: 0; display: flex; align-items: center; gap: 5px; padding: 0 5px 0 11px; }
.damage-drag { width: 14px; height: 34px; flex: 0 0 14px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 0; border: 0; background: transparent; cursor: grab; opacity: .55; }
.damage-drag:active { cursor: grabbing; }
.damage-drag i { width: 10px; border-top: 1px solid #9da59f; }
.damage-slot { position: absolute; top: 8px; left: 9px; color: #a1a9a5; font-family: "DM Mono", monospace; font-size: 7px; letter-spacing: .07em; }
.damage-art-wrap { position: relative; width: 48px; height: 62px; flex: 0 0 48px; overflow: hidden; }
.damage-art-wrap img { position: absolute; width: 46px; height: 46px; inset: 50% auto auto 50%; object-fit: contain; transform: translate(-50%,-50%); filter: drop-shadow(0 5px 4px rgba(32,45,41,.1)); }
.damage-pokemon-name { min-width: 0; }
.damage-pokemon-name > small { display: block; max-width: 116px; overflow: hidden; color: #919995; font-family: "DM Mono", monospace; font-size: 7px; letter-spacing: .06em; text-overflow: clip; white-space: nowrap; }
.damage-pokemon-name > strong { display: block; overflow: hidden; margin-top: 1px; color: var(--ink); font-size: 16px; font-weight: 800; line-height: 22px; letter-spacing: -.03em; text-overflow: clip; white-space: nowrap; }
.damage-types { display: flex; gap: 3px; margin-top: 6px; }
.damage-type { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 3px 5px; border-radius: 3px; background: var(--type-color,#85847c); color: #fff; font-family: "DM Mono", monospace; font-size: 5.8px; font-weight: 500; line-height: 1; text-transform: uppercase; }
.damage-quick-fields { min-width: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 0 14px; }
.damage-quick-fields label { min-width: 0; display: grid; gap: 3px; }
.damage-quick-fields label > span { height: 18px; color: var(--ink); font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: .01em; line-height: 18px; text-transform: none; }
.damage-quick-fields input, .damage-quick-fields select { height: 32px; padding: 0 7px; border-color: #d5dfd6; border-radius: 7px; color: #34413d; font-size: 9.5px; font-weight: 650; text-overflow: clip; }
.damage-remove { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #8d9691; opacity: .38; cursor: pointer; }
.damage-remove:hover { background: #f8e9ed; color: #a8586b; opacity: 1; }
.damage-remove svg { width: 9px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.damage-pokemon-body { min-width: 0; display: grid; grid-template-columns: minmax(280px,1.35fr) minmax(210px,1fr); }
.damage-stat-panel, .damage-detail-panel { min-width: 0; }
.damage-stat-panel { padding: 13px 14px 14px; border-right: 1px solid #e8e9e4; }
.damage-detail-panel { padding: 13px 14px 14px; }
.damage-panel-tabs { min-width: 0; height: 18px; display: flex; align-items: center; gap: 5px; margin-bottom: 7px; }
.damage-panel-tabs > span { color: #c3c8c4; font-size: 10px; }
.damage-panel-tabs button { display: inline-flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: transparent; color: #9aa29e; font-size: 11px; font-weight: 600; letter-spacing: .01em; cursor: pointer; }
.damage-panel-tabs button::after { content: attr(data-tab-label); height: 0; overflow: hidden; visibility: hidden; font-weight: 800; }
.damage-panel-tabs button.is-active { color: var(--ink); font-weight: 800; }

.damage-battle-stats { display: grid; gap: 4px; }
.damage-change-settings { display: grid; grid-template-columns: 1fr 1fr 82px; gap: 5px; margin-bottom: 4px; }
.damage-change-settings label { min-width: 0; display: grid; gap: 3px; }
.damage-change-settings label > span { overflow: hidden; color: #78837e; font-size: 7px; font-weight: 700; text-overflow: clip; text-transform: uppercase; white-space: nowrap; }
.damage-change-settings select { min-width: 0; width: 100%; height: 26px; padding: 0 5px; border: 1px solid #d8dfd7; border-radius: 6px; background: #fff; color: #46524d; font-size: 8px; }
.damage-change-settings .damage-toggle-field { min-height: 26px; align-self: end; display: flex; align-items: center; gap: 5px; padding: 0 6px; border: 1px solid #d8dfd7; border-radius: 6px; background: #fff; }
.damage-toggle-field input { width: 10px; height: 10px; margin: 0; accent-color: var(--teal); }
.damage-toggle-field span { text-transform: none !important; }
.damage-hp-row, .damage-stage-row { min-width: 0; min-height: 25px; display: grid; align-items: center; }
.damage-hp-row { grid-template-columns: 28px 1fr auto; gap: 5px; padding: 0 3px; border-bottom: 1px solid #e9ece7; }
.damage-hp-row > span:first-child, .damage-stage-row > span { color: #66716c; font-family: "DM Mono", monospace; font-size: 7px; font-weight: 600; }
.damage-hp-row strong, .damage-stage-row strong { font-family: "DM Mono", monospace; font-size: 8.5px; font-weight: 600; }
.damage-hp-percent { display: flex; align-items: center; gap: 2px; color: #89928d; font-family: "DM Mono", monospace; font-size: 7px; }
.damage-hp-percent input { width: 32px; height: 20px; padding: 0 3px; border: 1px solid #dce1db; border-radius: 4px; outline: 0; background: #fff; font: inherit; text-align: right; }
.damage-stage-row { grid-template-columns: 24px 28px minmax(78px,1fr) 21px 21px; gap: 4px; }
.damage-stage-slots { min-width: 0; display: grid; grid-template-columns: repeat(6,1fr); gap: 2px; }
.damage-stage-slots i { height: 16px; display: grid; place-items: center; border: 1px solid #e0e4de; border-radius: 3px; background: #fafbf8; color: transparent; font-size: 7px; font-style: normal; }
.damage-stage-slots.is-up i.is-filled { border-color: #e1b17e; background: #f8e5cf; color: #cf7b34; }
.damage-stage-slots.is-down i.is-filled { border-color: #a8c4d5; background: #e5eff4; color: #4e82a0; }
.damage-stage-row > button { width: 21px; height: 21px; padding: 0; border: 1px solid #dce1db; border-radius: 5px; background: #fff; color: #68736e; font-size: 11px; cursor: pointer; }
.damage-stage-row > button:hover { border-color: #aab9ad; color: var(--teal); }

.damage-build-panel { position: relative; display: grid; gap: 0; }
.damage-sp-summary { position: absolute; top: -32px; right: 0; height: 18px; display: flex; align-items: center; gap: 3px; color: #89938e; font-family: "DM Mono", monospace; font-size: 7px; }
.damage-sp-summary .damage-sp-total { flex: 0 0 auto; padding: 0; color: var(--teal); font-size: 9px; font-weight: 600; }
.damage-build-head { display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.damage-build-head label { min-width: 0; flex: 1; display: grid; gap: 3px; }
.damage-build-head select { height: 28px; font-size: 8px; }
.damage-sp-total { flex: 0 0 auto; padding-bottom: 7px; color: var(--teal); font-family: "DM Mono", monospace; font-size: 7px; }
.damage-ability-state { display: grid; grid-template-columns: minmax(0,1fr) 92px; gap: 6px; }
.damage-ability-state label { min-width: 0; min-height: 25px; display: flex; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid #e0e5de; border-radius: 5px; background: #fff; color: #68736e; font-size: 6.8px; }
.damage-ability-state label:last-child { display: grid; grid-template-columns: 1fr 30px; }
.damage-ability-state input { width: 10px; height: 10px; margin: 0; accent-color: var(--teal); }
.damage-ability-state select { width: 30px; height: 20px; padding: 0 2px; border: 1px solid #dce2db; border-radius: 4px; background: #fff; color: var(--ink); font-size: 7px; }
.damage-sp-sliders { display: grid; }
.damage-spread-row { min-width: 0; min-height: 24px; display: grid; grid-template-columns: 31px minmax(60px,1fr) 31px minmax(58px,88px); align-items: center; gap: 6px; }
.damage-stat-name { padding-left: 3px; color: #5c6763; font-family: "DM Mono", monospace; font-size: 9px; font-weight: 650; }
.damage-spread-row input[type="range"] { min-width: 0; width: 100%; height: 12px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.damage-spread-row input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: #d6e1d7; }
.damage-spread-row input[type="range"]::-webkit-slider-thumb { width: 9px; height: 9px; margin-top: -3px; appearance: none; border: 0; border-radius: 50%; background: var(--teal); }
.damage-sp-value { width: 31px; height: 20px; padding: 0 3px; border: 1px solid transparent; border-radius: 5px; outline: 0; background: transparent; color: #65716d; font-family: "DM Mono", monospace; font-size: 10px; font-weight: 550; text-align: left; }
.damage-sp-value:hover, .damage-sp-value:focus { border-color: #d5dfd6; background: #fff; }
.damage-sp-value:focus { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(79,124,91,.10); }
.damage-final-stat { width: clamp(30px,var(--damage-stat-width,34%),100%); max-width: 100%; height: 16px; display: flex; align-items: center; justify-self: start; overflow: hidden; padding: 0 5px; border-radius: 4px; color: var(--card); font-family: "DM Mono", monospace; font-size: 9.5px; font-weight: 700; line-height: 16px; text-shadow: 0 1px 1px rgba(35,47,40,.16); transition: width .16s ease, background-color .16s ease; }
.damage-predict-button { min-height: 31px; height: 31px; justify-self: stretch; margin-top: 7px; font-size: 8px; }

.damage-moves-panel { min-width: 0; }
.damage-target-row { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.damage-target-row label { width: 52%; display: grid; gap: 3px; }
.damage-target-row select { height: 27px; font-size: 8px; }
.damage-target-row > small { max-width: 46%; padding-bottom: 5px; color: #8a938e; font-size: 6.5px; line-height: 1.3; text-align: right; }
.damage-live-result { min-height: 39px; display: grid; gap: 2px; margin-bottom: 6px; padding: 6px 8px; border: 1px solid #dde4dc; border-radius: 6px; background: #f8faf7; }
.damage-live-result strong { display: flex; justify-content: space-between; gap: 8px; font-size: 8.5px; }
.damage-live-result strong span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.damage-live-result > span { color: #7f8984; font-size: 6.7px; }
.damage-live-result p { margin: 2px 0 0; color: #64706a; font-size: 6.8px; line-height: 1.35; }
.damage-move-list { display: grid; gap: 6px; }
.dc-move-row { min-width: 0; min-height: 31px; display: grid; grid-template-columns: 14px minmax(72px,1fr) 30px auto 16px 24px minmax(48px,auto); align-items: center; gap: 4px; padding: 0 5px; border: 1px solid #d5dfd6; border-radius: 7px; background: #fff; transition: border-color .14s ease, background-color .14s ease; }
.dc-move-row.has-move { cursor: default; }
.dc-move-row.has-move:hover { border-color: #afc2b2; background: #f2f7f2; }
.damage-move-index { color: #a1a9a5; font-family: "DM Mono", monospace; font-size: 6px; }
.dc-move-row input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #3c4843; font-size: 8.5px; font-weight: 650; }
.damage-move-pp { color: #929a96; font-family: "DM Mono", monospace; font-size: 5.8px; text-align: right; white-space: nowrap; }
.damage-category { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 3px; color: #fff; font-size: 7px; }
.damage-category.is-physical { background: #bd655d; }
.damage-category.is-special { background: #5e8295; }
.damage-category.is-status { background: #7d8781; }
.damage-crit { width: 24px; height: 17px; padding: 0; border: 1px solid #e0e4de; border-radius: 4px; background: #fff; color: #9aa29e; font-family: "DM Mono", monospace; font-size: 5.5px; cursor: pointer; }
.damage-crit.is-active { border-color: #d29a68; background: #fae8d5; color: #b7672d; }
.damage-roll { color: var(--teal); font-family: "DM Mono", monospace; font-size: 7px; text-align: right; white-space: nowrap; }
.damage-move-type-empty { width: 20px; }
.damage-meta-moves { display: flex; align-items: center; gap: 4px; overflow-x: auto; margin-top: 6px; padding-bottom: 2px; scrollbar-width: none; }
.damage-meta-moves > span { flex: 0 0 auto; color: #8b9490; font-family: "DM Mono", monospace; font-size: 5.8px; letter-spacing: .05em; }
.damage-meta-moves button { flex: 0 0 auto; padding: 3px 5px; border: 1px solid #dce3db; border-radius: 4px; background: #fff; color: #65706b; font-size: 6.5px; cursor: pointer; }
.damage-meta-moves button:hover { border-color: #abc0af; color: var(--teal); }

.damage-matchups { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.damage-matchups > div { min-width: 0; padding: 5px 0; border-bottom: 1px solid #e8ece7; }
.damage-matchups > div > span { display: flex; justify-content: space-between; color: #69746f; font-family: "DM Mono", monospace; font-size: 6.8px; text-transform: uppercase; }
.damage-matchups p { display: flex; flex-wrap: wrap; gap: 3px; min-height: 15px; margin: 4px 0 0; color: #a1a8a4; font-size: 7px; }
.damage-traits { margin-top: 7px; padding-top: 6px; border-top: 1px solid #e3e8e1; }
.damage-traits .damage-panel-tabs { min-height: 17px; margin-bottom: 4px; }
.damage-trait-list { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.damage-trait-list button { flex: 0 0 auto; height: 23px; padding: 0 7px; border: 1px solid #dde3dc; border-radius: 5px; background: #fff; color: #66716c; font-size: 7px; cursor: pointer; }
.damage-trait-list button:hover, .damage-trait-list button.is-active { border-color: #a9bdac; background: #edf4ed; color: var(--teal); }
.damage-trait-list > span { color: #989f9b; font-size: 7px; }

.damage-notice { position: fixed; z-index: 160; left: 50%; bottom: 22px; max-width: min(420px,calc(100vw - 30px)); padding: 9px 14px; border: 1px solid #aec3b1; border-radius: 9px; background: #f8fcf7; box-shadow: 0 12px 30px rgba(37,52,42,.16); color: var(--teal); font-size: 9px; font-weight: 700; opacity: 0; pointer-events: none; transform: translate(-50%,8px); transition: opacity .16s ease, transform .16s ease; }
.damage-notice.is-visible { opacity: 1; transform: translate(-50%,0); }
.damage-notice.is-error { border-color: #ddb9c4; background: #fff8fa; color: #9c4f68; }

@media (max-width: 1180px) {
  .view-tabs { gap: 20px; }
  .damage-conditions-grid { min-width: 980px; }
  .damage-workspace { overflow-x: auto; }
}
@media (max-width: 760px) {
  .damage-toolbar { align-items: stretch; flex-direction: column; }
  .damage-toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .damage-conditions-grid { grid-template-columns: 1fr; min-width: 0; }
  .damage-board { min-width: 1040px; }
}