.sb-duel { --duel-panel: #082529; --duel-line: rgba(126,227,183,.3); display: grid; gap: 1.25rem; color: #eff8f0; }
.sb-duel *, .sb-duel *::before, .sb-duel *::after { box-sizing: border-box; }
.sb-duel__tool-header { display: flex; justify-content: flex-end; }
.sb-duel__hero, .sb-duel__panel, .sb-duel__result, .sb-duel__arena, .sb-duel__boundary { border: 1px solid var(--duel-line); border-radius: 1.25rem; background: rgba(5,31,34,.96); }
.sb-duel__hero { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(17rem,.75fr); overflow: hidden; border-color: rgba(231,190,81,.65); }
.sb-duel__hero-copy { padding: clamp(1.5rem,4vw,3.5rem); background: linear-gradient(135deg,rgba(11,55,58,.98),rgba(5,31,34,.95)); }
.sb-duel__hero h1 { margin: .2rem 0 .75rem; font-size: clamp(2.7rem,7vw,5.75rem); line-height: .92; }
.sb-duel__lede { max-width: 44rem; font-size: 1.15rem; }
.sb-duel__hero ul { display: grid; gap: .5rem; margin: 1.25rem 0 0; padding-left: 1.2rem; }
.sb-duel__eyebrow, .sb-duel__step { margin: 0 0 .35rem; color: #79efb4; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }
.sb-duel__battle-map { position: relative; min-height: 25rem; overflow: hidden; background: #071a1d; }
.sb-duel__battle-map img { width: 100%; height: 100%; min-height: 25rem; display: block; object-fit: cover; object-position: 52% center; }
.sb-duel__boundary { padding: 1rem 1.2rem; background: linear-gradient(90deg,rgba(77,61,20,.42),rgba(5,31,34,.96)); border-color: rgba(231,190,81,.52); }.sb-duel__boundary p { display: inline; margin-left: .5rem; }
.sb-duel__form { display: grid; gap: 1.25rem; }
.sb-duel__panel, .sb-duel__result, .sb-duel__arena { padding: clamp(1.25rem,3vw,2rem); }
.sb-duel__panel h2, .sb-duel__result h2, .sb-duel__arena h2 { margin: 0 0 .75rem; font-size: clamp(1.55rem,3vw,2.35rem); }
.sb-duel label { display: grid; gap: .4rem; font-weight: 700; }.sb-duel label small { font-weight: 400; opacity: .75; }
.sb-duel input, .sb-duel select { width: 100%; min-height: 3rem; border: 1px solid rgba(139,214,193,.45); border-radius: .55rem; background: #061c20; color: #fff; padding: .65rem .75rem; }
.sb-duel input:focus, .sb-duel select:focus, .sb-duel button:focus-visible, .sb-duel a:focus-visible { outline: 3px solid #f1c95b; outline-offset: 2px; }
.sb-duel__stage { max-width: 36rem; }
.sb-duel__catalog-summary { margin-top: 1rem; }
.sb-duel__catalog-meta { color: #f1cf6d; font-weight: 800; }
.sb-duel__carried-stage { margin: 1rem 0; padding: 1rem; border: 1px solid rgba(241,207,109,.5); border-radius: .8rem; background: linear-gradient(110deg,rgba(77,61,20,.36),rgba(20,61,65,.45)); }.sb-duel__carried-stage strong{display:block;color:#fff;font-size:1.15rem}.sb-duel__carried-stage p{margin:.4rem 0}.sb-duel__carried-stage a{color:#8ef0bd;font-weight:800}
.sb-duel__carried-stage.is-research{border-color:rgba(241,207,109,.72)}.sb-duel__screen-context{margin:.85rem 0;padding:.8rem 1rem;border-left:3px solid #f1cf6d;border-radius:.55rem;background:rgba(7,29,33,.55)}.sb-duel__screen-context>strong{font-size:1rem}.sb-duel__screen-context ul{margin:.5rem 0;padding-left:1.2rem}.sb-duel__screen-context li{margin:.25rem 0}.sb-duel__screen-context small{opacity:.78}
.sb-duel__catalog-list { display: grid; gap: .45rem; padding-left: 1.2rem; }
.sb-duel__catalog-heroes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; margin-top: 1rem; }
.sb-duel__catalog-hero { min-width: 0; border: 1px solid rgba(139,214,193,.25); border-radius: .8rem; padding: 1rem; background: rgba(20,61,65,.45); }
.sb-duel__development { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; margin-top: .75rem; }
.sb-duel__development[hidden] { display: none; }
.sb-duel__screenshot-note { margin: 1rem 0; padding: .9rem 1rem; border-left: .25rem solid #f1cf6d; background: rgba(77,61,20,.3); }
.sb-duel__roster-scan { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0; padding: 1rem; border: 1px solid rgba(241,207,109,.42); border-radius: .85rem; background: linear-gradient(110deg,rgba(77,61,20,.36),rgba(20,61,65,.45)); }.sb-duel__roster-scan p { margin: .3rem 0 0; }.sb-duel__link-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.8rem; padding: .65rem 1rem; border-radius: .55rem; text-decoration: none; white-space: nowrap; font-weight: 800; }
.sb-duel__scan-count { color: #8ef0bd; font-weight: 800; }.sb-duel__scanned-roster { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; margin-top: 1rem; }.sb-duel__scanned-hero { min-width: 0; padding: 1rem; border: 1px solid rgba(126,227,183,.36); border-radius: .85rem; background: rgba(20,61,65,.58); }.sb-duel__profile-pending, .sb-duel__profile-ready { margin: .8rem 0; padding: .7rem; border-radius: .55rem; }.sb-duel__profile-pending { color: #ffe7a5; background: rgba(91,67,18,.38); }.sb-duel__profile-ready { color: #a5f4cc; background: rgba(20,96,64,.35); }
.sb-duel__enemy-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .75rem; margin-top: 1rem; }
.sb-duel__enemy, .sb-duel__roster-row { min-width: 0; border: 1px solid rgba(139,214,193,.25); border-radius: .8rem; padding: .8rem; background: rgba(20,61,65,.45); }
.sb-duel__enemy { display: grid; align-content: start; gap: .75rem; }.sb-duel legend { padding: 0 .3rem; color: #f1cf6d; font-weight: 800; }
.sb-duel__panel-heading, .sb-duel__result-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.sb-duel__roster { display: grid; gap: .75rem; }
.sb-duel__roster-row { display: grid; grid-template-columns: minmax(11rem,1.3fr) minmax(9rem,.8fr) auto auto auto; align-items: end; gap: .75rem; }
.sb-duel__choice { display: flex!important; grid-template-columns: none!important; flex-direction: row; align-items: center; gap: .55rem!important; min-height: 3rem; }.sb-duel__choice input { width: 1.25rem; min-height: 1.25rem; flex: 0 0 auto; }
.sb-duel__choice--large { align-items: flex-start; padding: .9rem; border: 1px solid rgba(139,214,193,.25); border-radius: .7rem; margin-bottom: .75rem; }.sb-duel__choice--large span { display: grid; gap: .25rem; }
.sb-duel button { min-height: 2.8rem; border-radius: .55rem; padding: .65rem 1rem; font-weight: 800; cursor: pointer; }
.sb-duel button:disabled { opacity: .5; cursor: not-allowed; }
.sb-duel__button { border: 1px solid #ff786d; background: linear-gradient(#d84b43,#a82d28); color: #fff; margin-top: .5rem; }.sb-duel__secondary, .sb-duel__remove { border: 1px solid rgba(126,227,183,.5); background: transparent; color: #8ef0bd; }.sb-duel__remove:disabled { opacity: .35; cursor: not-allowed; }
.sb-duel__status { min-height: 1.5rem; margin-bottom: 0; color: #ffd1c7; font-weight: 700; }
.sb-duel__result { border-color: rgba(231,190,81,.65); background: linear-gradient(145deg,rgba(9,48,51,.98),rgba(5,29,32,.98)); }
.sb-duel__result-heading > span { display: inline-flex; border: 1px solid rgba(231,190,81,.55); border-radius: 999px; padding: .55rem .8rem; color: #f1cf6d; font-weight: 800; }
.sb-duel__candidate-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .85rem; margin: 1rem 0; }
.sb-duel__candidate { border: 1px solid rgba(126,227,183,.28); border-radius: .85rem; padding: 1rem; background: rgba(7,29,33,.72); }.sb-duel__candidate h3 { font-size: 1.05rem; line-height: 1.4; }.sb-duel__candidate-label { color: #f1cf6d; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; }
.sb-duel__lineup, .sb-duel__coverage, .sb-duel__receipt ul { display: grid; gap: .5rem; padding: 0; list-style: none; }.sb-duel__lineup li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; }.sb-duel__lineup small { opacity: .72; }
.sb-duel__color { display: inline-flex; align-items: center; justify-content: center; min-width: 4rem; border-radius: 999px; padding: .2rem .45rem; font-size: .7rem; font-weight: 900; color: #fff; text-transform: capitalize; }.sb-duel__color--red{background:#9c302b}.sb-duel__color--green{background:#176c45}.sb-duel__color--blue{background:#24658f}.sb-duel__color--purple{background:#673b8f}.sb-duel__color--yellow{background:#8a6d19;color:#fff7cc}.sb-duel__color--unknown{background:#44565a;color:#fff}
.sb-duel__coverage { padding-top: .75rem; border-top: 1px solid rgba(126,227,183,.2); }.sb-duel__coverage li { padding-left: 1.3rem; position: relative; }.sb-duel__coverage li::before { position: absolute; left: 0; }.sb-duel__coverage .is-covered::before { content:'✓';color:#79efb4 }.sb-duel__coverage .is-open::before { content:'!';color:#f1cf6d }
.sb-duel__receipt { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(126,227,183,.25); }.sb-duel__receipt p { margin: .25rem 0; }.sb-duel__receipt li::before { content:'— ';color:#f1cf6d }
.sb-duel__arena { background: linear-gradient(120deg,rgba(33,26,54,.92),rgba(5,31,34,.96)); }.sb-duel__disclaimer { font-size: .85rem; opacity: .78; }
.sb-duel__scan-dialog { width: min(58rem,calc(100vw - 2rem)); max-height: min(54rem,calc(100vh - 2rem)); overflow: auto; padding: clamp(1rem,3vw,2rem); border: 1px solid rgba(241,207,109,.7); border-radius: 1.1rem; background: #082529; color: #eff8f0; box-shadow: 0 1.5rem 5rem rgba(0,0,0,.65); }.sb-duel__scan-dialog::backdrop { background: rgba(0,10,12,.82); }.sb-duel__scan-dialog[hidden] { display: none; }.sb-duel__scan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }.sb-duel__scan-head h2 { margin: 0; font-size: clamp(1.65rem,4vw,2.5rem); }.sb-duel__scan-close { min-width: 2.9rem; border: 1px solid rgba(126,227,183,.5); background: transparent; color: #fff; font-size: 1.6rem; line-height: 1; }.sb-duel__scan-steps { display: grid; gap: .35rem; padding-left: 1.3rem; }.sb-duel__scan-preview { display: block; width: min(100%,34rem); max-height: 26rem; object-fit: contain; margin: 1rem auto; border: 1px solid rgba(126,227,183,.4); border-radius: .7rem; background: #031518; }.sb-duel__scan-preview[hidden] { display: none; }.sb-duel__scan-consent { margin: 1rem 0; padding: .85rem; border: 1px solid rgba(126,227,183,.3); border-radius: .7rem; }.sb-duel__scan-review-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; }.sb-duel__scan-card { min-width: 0; padding: 1rem; border: 1px solid rgba(126,227,183,.35); border-radius: .8rem; background: rgba(20,61,65,.55); }.sb-duel__scan-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .75rem; }.sb-duel__scan-card-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }.sb-duel__scan-card-fields > label:last-child { grid-column: 1/-1; }.sb-duel__scan-confirm { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid rgba(126,227,183,.2); }.sb-duel__scan-card-actions { margin-top: .65rem; }.sb-duel__scan-card-note { color: #ffe7a5; font-size: .9rem; }.sb-duel__scan-notes { margin-top: 1rem; color: #ffe7a5; }.sb-duel__scan-actions { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1rem; }.sb-duel__scan-status { min-height: 1.5rem; color: #a5f4cc; font-weight: 700; }.sb-duel__scan-status.is-error { color: #ffd1c7; }
.sb-duel__scan-sources{display:grid;grid-template-columns:1fr;gap:.75rem}.sb-duel__scan-sources details{padding:.8rem 1rem;border:1px dashed rgba(126,227,183,.4);border-radius:.7rem;background:#061c20}.sb-duel__scan-sources summary{color:#8ef0bd;font-weight:800;cursor:pointer}.sb-duel__scan-sources details p{margin:.7rem 0}.sb-duel__scan-sources .sb-duel__secondary{min-height:48px}
@media (max-width: 980px) { .sb-duel__hero { grid-template-columns: 1fr; }.sb-duel__battle-map, .sb-duel__battle-map img { min-height: 19rem; }.sb-duel__battle-map img { height: auto; aspect-ratio: 1672/941; }.sb-duel__enemy-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.sb-duel__roster-row { grid-template-columns: 1fr 1fr; }.sb-duel__candidate-grid { grid-template-columns: 1fr; } }
.sb-duel__scan-dialog.is-reviewing .sb-duel__scan-preview { max-height: 12rem; }
.sb-duel__scan-card .sb-duel__remove { min-height: 44px; font-size: .9rem; }
.sb-duel__scan-status:empty { display: none; }
@media (max-width: 700px) { .sb-duel__scan-review-grid, .sb-duel__scanned-roster,.sb-duel__scan-sources { grid-template-columns: 1fr; }.sb-duel__roster-scan, .sb-duel__scan-actions { align-items: stretch; flex-direction: column; }.sb-duel__scan-actions button,.sb-duel__scan-sources button { width: 100%; } }
@media (max-width: 560px) { .sb-duel__enemy-grid, .sb-duel__roster-row, .sb-duel__catalog-heroes, .sb-duel__development, .sb-duel__scan-card-fields { grid-template-columns: 1fr; }.sb-duel__scan-card-fields > label:last-child { grid-column: auto; }.sb-duel__panel-heading, .sb-duel__result-heading { display: grid; }.sb-duel__result-heading > span { justify-self: start; }.sb-duel__boundary p { display: block; margin: .4rem 0 0; }.sb-duel__scan-dialog { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); padding: 1rem; } }
@media (max-width: 1100px),(max-height: 850px) { .sb-duel__scan-dialog { inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; padding: calc(1rem + env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); overscroll-behavior: contain; }.sb-duel__scan-head { position: sticky; top: calc(-1rem - env(safe-area-inset-top)); z-index: 3; margin: calc(-1rem - env(safe-area-inset-top)) -1rem 1rem; padding: calc(1rem + env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) 1rem max(1rem,env(safe-area-inset-left)); border-bottom: 1px solid rgba(126,227,183,.25); background: #082529; }.sb-duel__scan-actions { position: sticky; bottom: calc(-1rem - env(safe-area-inset-bottom)); z-index: 2; margin: 1rem -1rem calc(-1rem - env(safe-area-inset-bottom)); padding: 1rem max(1rem,env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); border-top: 1px solid rgba(126,227,183,.25); background: #082529; } }
@media (prefers-reduced-motion: reduce) { .sb-duel * { scroll-behavior: auto!important; } }