:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#0b0d14;color:#f6f6f2}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:32px;background:#121722;border-bottom:3px solid #efc744;padding:18px 28px}header>a{font-weight:900;font-size:30px;color:#efc744;text-decoration:none}nav,.actions{display:flex;gap:8px;flex-wrap:wrap}nav a{align-self:center;padding:10px;color:#fff}main{max-width:1600px;margin:auto;padding:26px}.title-row{display:flex;justify-content:space-between;gap:20px;align-items:center}h1{font-size:28px;margin:0 0 8px}h2{font-size:18px;color:#efc744}h3{font-size:13px;letter-spacing:1px;color:#b8c6d8}p{font-size:14px;line-height:1.5;color:#b8c6d8}button,.file-button{background:#202b40;color:#fff;border:1px solid #4e607c;border-radius:3px;padding:10px 13px;cursor:pointer;font-weight:700}button:hover,.selected{border-color:#efc744!important;background:#303949!important}#play,#assign{background:#efc744;color:#10141e}input{padding:10px;background:#0b0d14;border:1px solid #4e607c;border-radius:3px;color:#fff;max-width:100%}.file-button input{display:none}.workspace{display:grid;grid-template-columns:minmax(380px,1fr) minmax(450px,1fr);gap:22px}.panel{padding:20px;background:#141b29;border:1px solid #34425a;margin:16px 0}.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.slot{text-align:left;display:grid;gap:6px;min-height:86px}.slot b{font-size:12px;color:#efc744}.slot span{font-size:14px}.slot small{color:#b8c6d8}.fighters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:350px;overflow:auto;margin-top:14px}.fighter{display:flex;align-items:center;flex-direction:column;gap:6px;font-size:13px}.fighter img{width:44px;height:52px;image-rendering:pixelated;object-fit:contain}.fighter small{font-size:9px;color:#b8c6d8}.stats{display:flex;gap:8px;flex-wrap:wrap}.stats span{background:#202b40;padding:10px;text-align:center;font-size:11px}.stats b{display:block;font-size:22px;margin-top:8px;color:#efc744}table{border-collapse:collapse;width:100%;font-size:12px}td,th{padding:9px 6px;text-align:left;border-bottom:1px solid #34425a}th{color:#efc744}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;max-height:450px;overflow:auto;background:#0b0d14;padding:12px}.warning{background:#302814;color:#f4df9a;padding:12px;border-left:3px solid #efc744}#notice{color:#a6e8be;padding:10px 0}.unit-row{display:flex;gap:12px;flex-wrap:wrap}.unit-row>div{padding:14px;background:#202b40;flex:1}.unit-row span{font-size:28px;display:block;margin:8px 0}.unit-row small{display:block}summary{cursor:pointer;color:#efc744;margin:16px 0}@media(max-width:900px){.workspace{grid-template-columns:1fr}.title-row,header{align-items:flex-start;flex-direction:column}main{padding:14px}.slots{grid-template-columns:repeat(2,minmax(0,1fr))}.fighters{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Draft placement is a visual roster view, independent of live gameplay geometry. */
.draft-workspace{grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);align-items:start;gap:20px}.draft-field-panel{padding:14px}.field-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.field-heading h2{margin:0}.field-heading>span{font-size:10px;font-weight:700;letter-spacing:.6px;color:#c7d5c9}.draft-field{position:relative;aspect-ratio:1.45;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(10% - 1px),#ffffff25 calc(10% - 1px),#ffffff25 10%),repeating-linear-gradient(to bottom,#1f623b 0,#1f623b 10%,#225e38 10%,#225e38 20%);border:2px solid #cee5ce;border-radius:4px;overflow:hidden}.draft-field:before,.draft-field:after{content:"";position:absolute;top:0;bottom:0;border-left:1px dashed #ffffff30;left:33%}.draft-field:after{left:67%}.unit-label{position:absolute;left:12px;z-index:1;font-size:10px;letter-spacing:2px;font-weight:800;color:#e8f5e0a8;writing-mode:vertical-rl}.defense-label{top:8%}.offense-label{top:70%}.scrimmage-line{position:absolute;top:49%;left:0;right:0;border-top:2px solid #f4d260}.scrimmage-line span{position:absolute;top:3px;right:10px;font-size:8px;letter-spacing:1px;color:#ffe696}.field-slot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:10.4%;min-width:0;padding:5px 2px;border:1px dashed #d7e9d0aa;background:#103223e8;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;border-radius:5px;z-index:2;min-height:62px;font-weight:400}.field-slot b{font-size:11px;line-height:13px;color:#fff}.field-slot .place-mark{font-size:19px;line-height:22px;color:#d9e8d6}.field-slot small{font-size:8px;white-space:nowrap;color:#d4e7c4}.field-slot.open:hover,.field-slot.open:focus-visible{background:#e8c44c!important;border:1px solid #fff;color:#151c15;outline:2px solid #ffe997;outline-offset:2px}.field-slot.open:hover b,.field-slot.open:hover small,.field-slot.open:hover .place-mark{color:#172616}.field-slot.target{border-color:#ffe16a}.field-slot.filled{border:1px solid #f0d782;background:#132b24;opacity:1;cursor:default}.field-slot img{height:22px;width:24px;object-fit:contain;image-rendering:pixelated}.field-slot>span:not(.place-mark){font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;line-height:10px}.field-slot.filled small{font-size:7px}.special-draft{display:flex;align-items:center;gap:14px;margin-top:12px;padding:12px;background:#101722;border:1px solid #34425a}.special-draft>div{flex:1}.special-draft h3{margin:0 0 5px;color:#efc744}.special-draft p{margin:0;font-size:11px}.special-draft .field-slot{position:static;transform:none;width:85px;min-height:68px;flex:none}.field-tip{margin:12px 0 0;font-size:12px}.draft-workspace .fighters{max-height:none}.draft-workspace .fighter{padding:9px 5px}.draft-workspace .fighter small{font-size:8px}.draft-workspace .fighter.selected{outline:2px solid #efc744;outline-offset:-2px}.draft-workspace .inspector{padding:16px}.draft-workspace .stats{gap:5px}.draft-workspace .stats span{padding:7px;font-size:9px}.draft-workspace .stats b{font-size:18px;margin-top:4px}.draft-workspace>div:last-child{position:sticky;top:12px}.draft-data-note{font-size:12px}.draft-data-note summary{margin:4px 0 10px;color:#abb9cd}.draft-inspector-tip{border-left:2px solid #efc744;padding-left:10px;color:#f1d982}.draft-workspace .panel:first-child{margin-top:0}@media(max-width:1050px){.draft-workspace{grid-template-columns:minmax(0,1.4fr) minmax(270px,1fr)}.field-slot{min-height:55px}.field-slot small{font-size:7px}}@media(max-width:800px){.draft-workspace{display:flex;flex-direction:column}.draft-workspace>div{width:100%}.draft-workspace>div:last-child{position:static;order:-1}.draft-workspace .inspector{display:block}.draft-field{aspect-ratio:.95}.field-slot{width:10.7%;min-height:58px}.field-slot b{font-size:10px}.field-slot small{font-size:7px}.field-heading>span{max-width:140px;text-align:right}.special-draft .field-slot{width:70px}.draft-workspace .fighters{grid-template-columns:repeat(3,minmax(0,1fr))}}

.db-portrait{display:block;position:relative;overflow:hidden;background:#143d85;image-rendering:pixelated}.db-portrait-image{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.db-portrait.pending{position:relative}.db-portrait.pending>span{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-size:8px;color:#d1dcf0}.fighter>.db-portrait{width:76px;height:76px}.fighter .db-portrait-image{width:100%;height:100%}

.db-resources{position:absolute;bottom:3px;left:5px;right:5px;display:flex;flex-direction:column;gap:2px;pointer-events:none}.db-resources>span{display:block;height:2px;background:#071526;box-shadow:0 0 0 1px #06102099;overflow:hidden}.db-resources i{display:block;height:100%}.db-energy i{background:#85bc9b}.db-special i{background:#9f97d4}

.db-special.ready i{background:#c2b4ed;box-shadow:0 0 3px #c2b4ed}

/* Release UX: field first, clear assignment action, secondary audits. */
.assignment-action{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:1fr auto;gap:8px;background:#12273a;border:1px solid #607e94;padding:12px;margin-bottom:16px}.assignment-action>span{color:#f4d580;font-size:12px;grid-column:1}.assignment-action>strong{grid-column:1;overflow-wrap:anywhere}.assignment-action>button{grid-column:2;grid-row:1/3;background:#efc744;color:#10141e;min-height:44px}.data-notes,.team-audit{padding:0 12px;border:1px solid #34425a;margin:14px 0}.data-notes summary,.team-audit summary{font-size:12px}.workspace{grid-template-columns:minmax(0,1.15fr) minmax(320px,1fr);align-items:start}.workspace .fighters{max-height:58dvh;scroll-padding:8px}.fighter{min-height:130px}.fighter[aria-pressed=true]{outline:2px solid #efc744;outline-offset:-2px}.field-slot.filled:not(:disabled){cursor:pointer}.field-slot.target{outline:2px solid #68d7ff;outline-offset:2px}.field-slot.filled img{width:32px;height:32px}.workspace .draft-field{min-height:480px;aspect-ratio:1.15}.workspace .inspector{max-height:480px;overflow:auto}.draft-command .draft-instruction{line-height:1.8}.candidate-card{min-height:44px}@media(max-width:900px){.workspace{grid-template-columns:1fr}.workspace>div:last-child{order:-1}.workspace .fighters{max-height:38dvh}.workspace .draft-field{min-height:470px;aspect-ratio:1}.assignment-action{top:0}.field-slot{min-height:58px}.fighter small{line-height:1.5}}@media(max-width:420px){.assignment-action{grid-template-columns:1fr}.assignment-action>button{grid-column:1;grid-row:auto}.fighters{grid-template-columns:repeat(2,minmax(0,1fr))}}
.workspace .draft-field{min-height:760px;aspect-ratio:auto}.workspace .field-slot.filled img{height:var(--standing-height,48px)!important;width:auto;max-width:95%;object-fit:contain}.workspace .field-slot.filled{min-height:0}.defense-picker{display:flex;flex-direction:column;gap:6px;font-size:11px}.defense-picker select{min-height:44px;padding:8px;background:#14283e;color:#fff;border:1px solid #91a6b5}#team-picture-result{padding:14px;background:#122c40}#team-picture-result a{color:#9ce4ff}
/* Source-art presentation for team building; gameplay sprite rendering is independent. */
.draft-field-panel{overflow:auto}.workspace .draft-field{min-width:960px;min-height:1520px}.workspace .field-slot.filled img{image-rendering:auto!important;filter:drop-shadow(0 5px 3px #03160b88)}.workspace .field-slot{width:10.2%;padding:8px 2px;background:#102a2580;border-color:#8da99b66}.workspace .field-slot b{font-size:13px}.workspace .field-slot>span:not(.place-mark){font-size:11px;line-height:1.3;max-width:100%}.workspace .field-slot small{font-size:9px}.fighters{grid-template-columns:repeat(2,minmax(0,1fr))}.fighter{min-height:230px;padding:15px 8px}.fighter>.db-portrait.illustrated{width:100%;height:170px;background:radial-gradient(ellipse at 50% 85%,#446b86 0,#132a46 60%);border-radius:8px}.db-portrait.illustrated,.db-portrait.illustrated img{image-rendering:auto!important}.db-portrait.illustrated img{object-fit:contain!important;width:100%!important;height:100%!important}.fighter>span{font-size:14px}.workspace .fighters{max-height:65dvh}.workspace .field-heading:after{content:'Full-body artwork · scroll the field to explore';font-size:11px;color:#b7cdda}body:not(.butoden-draft) .db-portrait.illustrated{padding:8px}.field-heading{flex-wrap:wrap}

.workspace>div{min-width:0}.draft-field-panel{max-width:100%;overscroll-behavior-x:contain}.team-name-label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#e6cf90}.team-name-label input{min-height:44px;max-width:100%}#team-picture-result{overflow-wrap:anywhere}