/* Champions M-C damage calculator: compact workspace for 100% browser zoom.
   Styles are isolated to the calculator on Web and Desktop. */
.damage-lab{display:grid;gap:10px;min-width:0}
.damage-head{padding:0}
.damage-head h2{font-size:17px;line-height:1.2;margin:0 0 4px}
.damage-head p,.damage-popular p{font-size:11px;line-height:1.45;margin:0;color:var(--muted)}
.damage-panel,.damage-field,.damage-results,.damage-popular{
 border:1px solid var(--line);border-radius:9px;background:var(--panel);min-width:0
}
.damage-panel,.damage-field,.damage-results{padding:11px 12px}
.damage-panel h3,.damage-field h3,.damage-results h3{margin:0 0 6px;font-size:14px}
.damage-panel h3{padding-bottom:7px;border-bottom:1px solid var(--line)}
.damage-panel h4{margin:3px 0 0;font-size:11px;line-height:1.3}
.damage-panel h4 small{color:var(--muted)}
.damage-switch{display:flex;align-items:center;justify-content:flex-start;gap:10px;color:var(--muted);font-size:11px}
.damage-switch button{white-space:nowrap;padding:6px 10px;font-size:11px}
.damage-scroll-hint{display:none;color:var(--muted);font-size:10px;margin:0}
.damage-matchup-scroll{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:3px}
.damage-sides{display:grid;grid-template-columns:repeat(2,minmax(330px,1fr));gap:10px;min-width:680px;align-items:start}
.damage-panel{display:grid;gap:7px;align-content:start;height:auto!important}
.damage-panel label,.damage-field label{display:grid;gap:3px;min-width:0;font-size:10px;line-height:1.3}
.damage-panel input:not([type=checkbox]),.damage-panel select,.damage-field select,.damage-defender-picker input[type=search]{
 display:block;box-sizing:border-box;width:100%;min-width:0;height:29px;min-height:29px;
 padding:4px 7px;border:1px solid var(--line);border-radius:6px;
 background:var(--surface,#111a18);color:var(--text);font-size:11px;line-height:1.2
}
.damage-panel select{overflow:hidden;text-overflow:ellipsis}
.damage-panel input:focus-visible,.damage-panel select:focus-visible,.damage-defender-picker input:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.damage-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.damage-shortcuts select{max-width:100%}
.damage-stat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.damage-stat-grid label{text-align:center;font-size:9px}
.damage-stat-grid input{padding:3px 2px!important;height:27px!important;min-height:27px!important;text-align:center;font-size:11px}
.damage-check{display:flex!important;flex-direction:row;align-items:center;gap:6px!important;color:var(--text);font-size:11px}
.damage-check input{width:auto!important;accent-color:var(--green)}
.damage-defender-picker,.damage-advanced,.damage-popular{min-width:0;overflow:hidden}
.damage-defender-picker{border:1px solid var(--green);border-radius:8px;background:rgba(127,175,92,.05)}
.damage-advanced{border:1px solid var(--line);border-radius:7px;background:rgba(127,175,92,.035)}
.damage-defender-picker summary,.damage-advanced summary,.damage-popular summary{
 display:flex;align-items:center;justify-content:space-between;gap:10px;
 cursor:pointer;user-select:none;list-style:none;padding:8px 10px;
 font-size:11px;font-weight:700;line-height:1.3;color:var(--text)
}
.damage-defender-picker summary::-webkit-details-marker,.damage-advanced summary::-webkit-details-marker,.damage-popular summary::-webkit-details-marker{display:none}
.damage-defender-picker summary::after,.damage-advanced summary::after,.damage-popular summary::after{content:'▾';font-size:12px;color:var(--green);flex:0 0 auto}
.damage-defender-picker[open]>summary::after,.damage-advanced[open]>summary::after,.damage-popular[open]>summary::after{content:'▴'}
.damage-defender-picker summary span,.damage-popular summary span{color:var(--muted);font-size:10px;font-weight:400}
.damage-defender-picker[open] summary,.damage-advanced[open] summary,.damage-popular[open] summary{border-bottom:1px solid var(--line)}
.damage-defender-picker .details-body,.damage-popular .details-body{display:grid;gap:7px;padding:9px 10px}
.damage-defender-picker p{margin:0;font-size:10px;color:var(--muted);line-height:1.4}
.damage-advanced .damage-stat-grid{padding:9px 10px}
.damage-chooser-results{max-height:148px;min-height:42px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:6px}
.damage-chooser-list{display:grid}
.damage-chooser-option{
 display:flex;align-items:center;gap:7px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);
 border-radius:0;background:transparent;color:var(--text);padding:5px 7px
}
.damage-chooser-option:last-child{border-bottom:0}
.damage-chooser-option:hover,.damage-chooser-option:focus-visible{background:rgba(162,200,118,.14)}
.damage-chooser-option img{width:30px;height:30px;flex:0 0 30px;object-fit:contain}
.damage-chooser-option span{display:grid;gap:2px;min-width:0}
.damage-chooser-option strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.damage-chooser-option small{font-size:9px;color:var(--muted)}
.damage-chooser-empty{padding:9px;color:var(--muted);font-size:10px}
.damage-chooser-caption{font-size:10px}
.damage-chooser-chips{display:flex;flex-wrap:wrap;gap:4px}
.damage-chooser-chips button{padding:5px 7px;font-size:10px;background:rgba(125,163,115,.12);border:1px solid var(--line);border-radius:6px;color:var(--text)}
.damage-chooser-chips button:hover{border-color:var(--green);color:var(--green)}
.damage-field .damage-options{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.damage-field .damage-options>label:not(.damage-check){min-width:130px;flex:1}
.damage-results #damage-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 9px}
.damage-results #damage-results>.damage-help{grid-column:1/-1;margin:0;font-size:10px;line-height:1.4}
.damage-roll{border:1px solid var(--line);border-radius:7px;padding:9px;display:grid;gap:5px;min-width:0;margin:0;font-size:11px}
.damage-roll-head{display:flex;align-items:center;justify-content:space-between;gap:7px;font-size:12px}
.damage-roll-head strong:last-child{white-space:nowrap}
.damage-roll small{font-size:10px;color:var(--muted);line-height:1.3}
.damage-meter{height:6px;border-radius:99px;background:rgba(128,145,136,.18);overflow:hidden;width:100%}
.damage-meter span{display:block;height:100%;border-radius:99px;background:var(--green)}
.damage-popular summary{padding:9px 11px;font-size:12px}
.damage-popular-scroller{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:7px;max-height:220px;overflow-y:auto;padding-right:3px}
.damage-popular-item{min-width:0;max-width:none;border:1px solid var(--line);border-radius:7px;padding:8px;background:rgba(15,24,26,.4);display:grid;gap:5px}
.damage-popular-item strong{font-size:11px}
.damage-popular-item small{font-size:9px;color:var(--muted);line-height:1.3}
.damage-popular-item>div{display:flex;gap:5px}
.damage-popular-item button{font-size:10px;padding:5px 6px;flex:1;min-width:0}
@media(min-width:1200px){.damage-matchup-scroll{overflow-x:visible}.damage-sides{min-width:0}}
@media(max-width:1199px){.damage-scroll-hint{display:block}}
@media(max-width:690px){.damage-results #damage-results{grid-template-columns:1fr}.damage-defender-picker summary span,.damage-popular summary span{display:none}}
@media(prefers-reduced-motion:reduce){.damage-lab *{scroll-behavior:auto}}

/* The same three selection methods are available on attacker and defender. */
.damage-panel .damage-shortcuts{align-items:end}
.damage-defender-picker summary span{white-space:normal;text-align:right}
.damage-clear-build{
  justify-self:start;max-width:100%;
  padding:6px 9px;font-size:10px;line-height:1.3;
  border:1px solid var(--line);border-radius:6px;
  background:rgba(125,163,115,.12);color:var(--text)
}
.damage-clear-build:hover{border-color:var(--green);color:var(--green)}
@media(max-width:690px){.damage-defender-picker summary span{display:none}}

/* Calculation-only type and base-stat editor; collapsed until needed. */
.damage-custom{border:1px solid var(--line);border-radius:7px;background:rgba(127,175,92,.035);min-width:0;overflow:hidden}
.damage-custom summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;user-select:none;padding:8px 10px;font-size:11px;font-weight:700;line-height:1.3}
.damage-custom summary::-webkit-details-marker{display:none}
.damage-custom summary::after{content:'▾';font-size:12px;color:var(--green);flex:0 0 auto}
.damage-custom[open] summary::after{content:'▴'}
.damage-custom summary span{font-size:10px;color:var(--muted);font-weight:400}
.damage-custom[open] summary{border-bottom:1px solid var(--line)}
.damage-custom-body{display:grid;gap:8px;padding:10px}
.damage-custom-body p,.damage-custom-body small{color:var(--muted);font-size:10px;line-height:1.45;margin:0}
.damage-custom-body h4{margin:2px 0 0;font-size:11px}
.damage-custom-body button{justify-self:start;background:rgba(125,163,115,.12);border:1px solid var(--line);padding:6px 9px;border-radius:6px;color:var(--text);font-size:10px}
.damage-custom-body button:hover{border-color:var(--green);color:var(--green)}

/* IV controls: always visible and distinct from Champions Stat Points and battle boosts. */
.damage-iv-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.damage-iv-heading h4{margin:0}
.damage-iv-heading h4 small{font-weight:400;color:var(--muted)}
.damage-iv-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.damage-iv-actions button{border:1px solid var(--line);border-radius:6px;background:rgba(125,163,115,.12);color:var(--text);font-size:10px;padding:4px 7px;line-height:1.2}
.damage-iv-actions button:hover,.damage-iv-actions button:focus-visible{border-color:var(--green);color:var(--green)}
.damage-iv-grid label{font-weight:600}

.damage-iv-note{color:var(--muted);font-size:10px;line-height:1.35}