.drafter{max-width:1440px;margin:30px auto 45px;padding:0 24px}.drafter-title{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.drafter-title h1{font:36px/1.2 Critters,sans-serif;margin:0 0 10px}.drafter-title p:not(.eyebrow){margin:0;font-size:14px}.draft-toolbar{display:flex;gap:16px;align-items:flex-end;margin-bottom:8px;flex-wrap:wrap}.draft-toolbar>.field{flex:1;min-width:200px}.mode-switch{min-width:170px}.draft-status{font-size:12px;color:var(--muted);min-height:32px;padding:6px 0}.drafter-layout{display:grid;grid-template-columns:minmax(320px,1fr) minmax(350px,1.1fr) minmax(300px,.95fr);gap:18px;align-items:start}.panel{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:18px;min-width:0;box-shadow:0 4px 0 #00000008}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.panel h2{font:24px/1.2 Critters,sans-serif;margin:0}.panel-title p{margin:6px 0 0}.board-legend{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}.player-label{font:600 11px Poppins,sans-serif;border-radius:5px;padding:3px 8px}.p1{background:#d5eafa;color:#225b92}.p2{background:#fbe2ee;color:#963b6b}.board{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:6px;padding:10px;background:#e7dec7;border:1px solid #b7aa8c;border-radius:10px;max-width:360px;margin:0 auto}.board.duo{gap:4px}.board-cell{min-width:0;aspect-ratio:1;border:1px solid #c6b992;border-radius:6px;background:#fbf5e2;padding:3px;position:relative;display:flex;align-items:center;justify-content:center}.board-cell.p2-cell{background:#f3edf2}.board-cell:hover,.board-cell:focus-visible{background:var(--highlight)}.board-cell img{width:85%;height:85%;object-fit:contain;pointer-events:none}.cell-level{position:absolute;bottom:0;right:1px;font:600 10px Poppins,sans-serif;color:white;background:#282625;border-radius:3px;padding:0 3px;pointer-events:none}.cell-coord{font:10px Poppins,sans-serif;color:#9b9078}.board-help{font-size:11px;margin:12px 0}.selected-candidate{display:flex;align-items:center;gap:10px;background:var(--highlight);padding:10px;border-radius:8px;font-size:12px;margin-top:12px}.selected-candidate[hidden]{display:none}.selected-candidate img{width:40px;height:40px;object-fit:contain}.selected-candidate button{margin-left:auto;min-height:44px;background:none;border:0;color:var(--accent-ink);font-size:12px}.board-help-details{border-top:1px solid var(--line);padding-top:8px;margin-top:14px;font-size:11px;line-height:1.8}.board-help-details summary{min-height:40px;cursor:pointer;font-size:12px}.picker-filters{display:grid;grid-template-columns:1fr .85fr 1fr;gap:8px;margin:12px 0}.picker-filters select{font-size:12px;padding:8px}.picker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:525px;overflow:auto;padding:4px}.pick{position:relative;border:1px solid var(--line);border-radius:8px;padding:15px 3px 6px;background:var(--soft);color:var(--ink);min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:94px}.pick img{width:49px;height:49px;object-fit:contain}.pick span{font:12px Critters,sans-serif;text-align:center;line-height:1.2}.pick[aria-pressed=true]{background:var(--highlight);border-color:var(--accent-edge);box-shadow:inset 0 0 0 1px var(--accent-edge)}.pick .tiny-element{position:absolute;top:3px;left:3px;width:14px;height:14px}.pick .tiny-tier{position:absolute;top:3px;right:4px;font:9px Poppins,sans-serif;color:var(--muted)}.player-summary+.player-summary{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}.summary-group{margin-top:10px}.summary-group>strong{display:block;font:600 10px Poppins,sans-serif;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-bottom:5px}.chips{display:flex;flex-wrap:wrap;gap:5px}.effect-chip{font:11px/1.5 Poppins,sans-serif;min-height:30px;border:1px solid var(--accent-edge);background:var(--highlight);color:var(--accent-ink);padding:4px 7px;border-radius:6px}.effect-chip.future{border-style:dashed;background:var(--soft);color:var(--muted)}.effect-chip.debuff{background:#faeaea;border-color:#bd7878;color:#823b3b}.effect-chip.heal{background:#eaf4eb;border-color:#75a583;color:#315c3c}.effect-chip.future.debuff,.effect-chip.future.heal{opacity:.75}.summary-help{margin:14px 0 0;font-size:11px}.effect-detail{margin-top:12px;padding:12px;border-radius:8px;background:var(--soft);font-size:12px}.effect-detail strong{display:block;margin-bottom:8px}.effect-detail p{margin:5px 0;font-size:11px}.priority-panel{grid-column:1/-1}.priority-panel #priority-player{max-width:220px;margin-bottom:12px}.priority-units{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.priority-unit{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:5px 9px;display:flex;align-items:center;gap:7px;min-height:44px;font-size:12px}.priority-unit img{width:30px;height:30px;object-fit:contain}.priority-unit[aria-pressed=true]{background:var(--highlight);border-color:var(--accent-edge)}.priority-inputs{display:grid;grid-template-columns:130px 1fr auto;gap:14px;align-items:end}.steps{padding:0;margin:16px 0 0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}.step{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);background:var(--soft);border-radius:10px;padding:12px}.step-index{font:24px Critters,sans-serif;min-width:24px;color:var(--accent-edge)}.step-content{flex:1;min-width:0}.step-content strong{font-size:12px}.step-content p{font-size:12px;margin:6px 0 0;color:var(--muted)}.step .row{gap:4px}.step-controls{display:flex;gap:3px}.step-controls button{border:1px solid var(--line);background:var(--paper);width:32px;height:40px;border-radius:5px;font-size:14px}.local-note{margin-top:16px;font-size:11px}#unit-preview{display:flex;align-items:center;gap:12px;margin-bottom:16px}#unit-preview img{width:70px;height:70px;object-fit:contain}.empty-summary{font:12px Poppins,sans-serif;color:var(--muted)}[hidden]{display:none!important}
@media(max-width:1150px){.drafter-layout{grid-template-columns:1fr 1fr}.summary-panel{grid-column:1/-1}.summary-panel #summaries{display:grid;grid-template-columns:1fr 1fr;gap:16px}.player-summary+.player-summary{border:0;padding:0;margin:0}.picker-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.drafter{padding:0 14px;margin-top:24px}.drafter-title{align-items:flex-start;flex-direction:column}.drafter-title h1{font-size:30px}.draft-toolbar>.field{width:100%;flex:auto}.draft-toolbar .row{width:100%}.drafter-layout{grid-template-columns:1fr;gap:14px}.panel{padding:16px}.summary-panel{grid-column:auto}.summary-panel #summaries{grid-template-columns:1fr}.player-summary+.player-summary{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}.board{max-width:340px}.picker-grid{max-height:330px}.priority-panel{grid-column:auto}.priority-inputs{grid-template-columns:1fr}.priority-inputs .btn{justify-self:start}.steps{grid-template-columns:1fr}.board-help{font-size:12px}.effect-chip{min-height:44px}.step-controls button{min-width:40px;min-height:44px}}
.mode-context{margin-top:20px}.mode-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.mode-buttons button{min-height:44px;background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:8px 14px;font:600 12px Poppins,sans-serif;color:var(--ink)}.mode-buttons button[aria-pressed=true]{background:var(--accent);border-color:var(--accent-edge);color:var(--accent-ink)}.context-grid{display:flex;flex-wrap:wrap;gap:14px;align-items:end}.context-grid>.field{flex:1;min-width:145px;max-width:280px}.context-grid>p{align-self:center;flex:1;min-width:180px;margin:0}.dojo-stages{flex-basis:100%}.dojo-stages>span{display:block;margin:8px 0}.dojo-stages .row{gap:8px;margin-bottom:12px}.dojo-stages button:not(.btn){width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:13px Poppins,sans-serif}.dojo-stages button[aria-pressed=true]{background:var(--accent);border-color:var(--accent-edge)}.share-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px}.share-panel h2{font:24px Critters,sans-serif;margin:0}.share-panel p{margin:8px 0 0}.mobile-draft-nav{display:none}
@media(max-width:700px){body{padding-bottom:80px}.mode-context{padding:16px}.context-grid>.field{max-width:none;min-width:130px}.share-panel{flex-direction:column;align-items:stretch}.share-panel .row{flex-wrap:wrap}.mobile-draft-nav{display:flex;justify-content:space-around;position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--paper);border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom))}.mobile-draft-nav a{min-height:44px;padding:8px 14px;font:600 12px/1.7 Poppins,sans-serif;text-decoration:none;color:var(--accent-ink);display:flex;align-items:center}.drafter section{scroll-margin-top:16px}.drafter-layout{padding-bottom:12px}}
.board-cell.p2-cell{background:#fbf5e2}.cell-player{position:absolute;top:1px;left:1px;z-index:1;font:600 9px Poppins,sans-serif;border-radius:3px;padding:1px 3px}.board.duo .board-cell:has(.p1){box-shadow:inset 0 0 0 1px #447eb0}.board.duo .board-cell:has(.p2){box-shadow:inset 0 0 0 1px #b96289}#picker-player{margin-bottom:12px}.board-cell img{width:95%;height:95%}.pick img:not(.tiny-element){width:56px;height:56px}
.share-dialog{width:min(1100px,calc(100vw - 28px));max-height:90svh}.share-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr);gap:20px;padding:20px}.share-preview{background:var(--soft);border:1px solid var(--line);border-radius:10px;overflow:auto;max-height:70svh;padding:12px}.share-preview canvas{width:100%;height:auto;display:block}.share-controls{display:flex;flex-direction:column;gap:14px}.share-controls p{margin:0}.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.share-controls .field input{border:1px solid var(--line)}@media(max-width:700px){.share-layout{grid-template-columns:1fr;padding:16px}.share-preview{max-height:45svh}.share-controls{gap:12px}}
.priority-step-heads{display:flex;gap:5px;margin-bottom:7px}.priority-step-heads img{width:30px;height:30px;object-fit:contain}
.mode-switch{height:44px;min-height:44px;box-sizing:border-box;padding:3px;align-items:center}.mode-switch button{height:36px;min-height:36px;padding:6px 12px}.draft-main-actions{align-items:center}.saved-link{font:500 12px Poppins,sans-serif;min-height:44px;display:inline-flex;align-items:center;padding:8px;color:var(--accent-ink)}.draft-more{position:relative}.draft-more summary{list-style:none;cursor:pointer}.draft-more summary::-webkit-details-marker{display:none}.draft-more-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:160px;border:1px solid var(--line);padding:8px;background:var(--paper);border-radius:10px;z-index:25;box-shadow:0 8px 20px #0002;display:grid;gap:6px}.share-publishing{border-top:1px solid var(--line);margin-top:6px;padding-top:16px;display:grid;gap:10px}.share-publishing>strong{font:600 13px Poppins,sans-serif}.share-publishing>.btn{justify-self:start}
.board{width:min(100%,var(--board-width,338px));max-width:none}.board.duo{gap:6px}.coop-field{min-width:170px}.context-grid>.coop-field{flex:0 1 190px}.boss-picker{position:relative;flex:1;min-width:145px;max-width:280px}.boss-select{height:44px;min-height:44px;max-height:44px;width:100%;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);padding:0 12px;font:14px Poppins,sans-serif;text-align:left}.boss-select img{width:26px;height:26px;object-fit:contain;flex:none}.boss-arrow{margin-left:auto}.boss-options{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--paper);border:1px solid var(--line);padding:6px;border-radius:9px;z-index:25;box-shadow:0 8px 20px #0002}.boss-option{width:100%;height:44px;display:flex;align-items:center;gap:10px;padding:6px 8px;border:0;border-radius:6px;background:transparent;font:13px Poppins,sans-serif;text-align:left;color:var(--ink)}.boss-option img{width:28px;height:28px;object-fit:contain}.boss-option:hover,.boss-option[aria-selected=true]{background:var(--highlight)}@media(max-width:700px){.board{max-width:none}.context-grid>.coop-field{flex:1;max-width:none}.boss-picker{max-width:none}}
/* Keep Horde difficulty and mode on the same label/control baseline. */
.context-grid:has(.coop-field){align-items:start}.context-grid:has(.coop-field)>.field{gap:6px}.context-grid:has(.coop-field)>.field>span{font:500 12px/18px Poppins,sans-serif;min-height:18px}.context-grid:has(.coop-field)>.field>input{height:44px;min-height:44px;padding:8px 12px}.context-grid:has(.coop-field)>.coop-field>.mode-switch{height:44px;margin:0}.context-grid:has(.coop-field)>p{align-self:center;margin-top:24px}
.context-grid>.stage-type-field{flex:0 1 250px;min-width:220px}.context-grid>.dojo-element-field{flex:0 1 200px;min-width:170px}.context-grid>.dojo-level-field{flex:0 1 140px;min-width:125px}.context-grid:has(.dojo-level-field){align-items:flex-start}.context-grid:has(.dojo-level-field)>.dojo-stages{flex:1 1 430px;min-width:300px}.context-grid .dojo-stages>span{margin:0 0 6px;font:500 12px/18px Poppins,sans-serif;color:var(--ink)}.context-grid .dojo-stages .row{margin-bottom:8px}.context-grid:has(.stage-type-field)>.field>span,.context-grid:has(.dojo-level-field)>.field>span{font:500 12px/18px Poppins,sans-serif;min-height:18px}.context-grid:has(.stage-type-field)>.field,.context-grid:has(.dojo-level-field)>.field{gap:6px}.context-grid:has(.stage-type-field)>.field input,.context-grid:has(.dojo-level-field)>.field select{height:44px;min-height:44px;padding:8px 12px}@media(max-width:700px){.context-grid>.stage-type-field{flex:1 1 100%}.context-grid:has(.dojo-level-field)>.dojo-stages{min-width:0;flex-basis:100%}.context-grid>.dojo-element-field{flex:1 1 170px}.context-grid>.dojo-level-field{flex:0 1 130px}}
.context-grid:has(.stage-type-field){align-items:flex-start}.stage-type-field .mode-switch{margin:0}.stage-type-field>span{line-height:18px;min-height:18px}
/* One typography/spacing contract for every mode setting. */
#mode-context-fields .field{font-family:Poppins,system-ui,sans-serif;font-size:12px;font-weight:500;line-height:18px;gap:6px}
#mode-context-fields .field>span,#mode-context-fields .dojo-stages>span{font:500 12px/18px Poppins,system-ui,sans-serif;min-height:18px}
#mode-context-fields :is(input,select,.boss-select){font:400 14px/20px Poppins,system-ui,sans-serif;height:44px;min-height:44px;box-sizing:border-box}
#mode-context-fields .boss-select>span:not(.boss-arrow){font:400 14px/20px Poppins,system-ui,sans-serif}
#mode-context-fields .segmented button{font:600 13px/20px Poppins,system-ui,sans-serif}
#mode-context-fields .context-grid{align-items:flex-start}
/* Align custom div fields and native label fields to an identical two-row grid. */
#mode-context-fields .context-grid>.field{display:flex;flex-direction:column;align-items:stretch;gap:6px;font:500 12px/18px Poppins,system-ui,sans-serif}
#mode-context-fields .context-grid>.field>span:first-child,#mode-context-fields .dojo-stages>span{display:block;height:18px;min-height:18px;line-height:18px;margin:0 0 0;padding:0}
#mode-context-fields .context-grid>.field :is(input,select,.boss-select,.mode-switch){height:44px;min-height:44px;margin:0;box-sizing:border-box}
#mode-context-fields .dojo-stages>.row:first-of-type{margin-top:6px}
#mode-context-fields select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23282625' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
#mode-context-fields .boss-select .boss-arrow{font-size:0;flex:0 0 12px;width:12px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23282625' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat}
/* Local checkerboard color trial, matching the game field greens. */
.board{background:#718a2d;border-color:#607528}.board .board-cell{background:#8ba738;border-color:#6d842e}.board .board-cell.tile-light{background:#9bae3a}.board .cell-coord{color:#334414}.board .board-cell:hover{filter:brightness(1.1)}.board .board-cell:focus-visible{outline:2px dashed #fff;outline-offset:-5px}
.board,.board.duo{gap:2px}
.board .board-cell{border-radius:0}.board{border-radius:10px;overflow:hidden}
.board[data-mode=dojo]{background:#456bac;border-color:#3e609a}.board[data-mode=dojo] .board-cell{background:#6b96dd;border-color:#5277bb}.board[data-mode=dojo] .board-cell.tile-light{background:#5d83cf}
#unit-dialog .field+.field{margin-top:14px}
#unit-dialog #close-unit{width:44px;min-width:44px;height:44px;min-height:44px;padding:10px;display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
#unit-dialog #close-unit img{width:22px;height:22px;max-width:22px;max-height:22px;object-fit:contain;flex:none}
:root{--player-one:#1ea5fe;--player-two:#f72a57}.player-label.p1,.cell-player.p1{background:var(--player-one);color:#282625}.player-label.p2,.cell-player.p2{background:var(--player-two);color:#282625}.board.duo .board-cell:has(.p1){box-shadow:inset 0 0 0 2px var(--player-one)}.board.duo .board-cell:has(.p2){box-shadow:inset 0 0 0 2px var(--player-two)}#picker-player [data-picker-player="1"][aria-pressed=true],#priority-player [data-player="1"][aria-pressed=true]{background:var(--player-one);color:#282625}#picker-player [data-picker-player="2"][aria-pressed=true],#priority-player [data-player="2"][aria-pressed=true]{background:var(--player-two);color:#282625}
.board.duo .board-cell:has(.p1),.board.duo .board-cell:has(.p2){box-shadow:none}
.energizer-cost{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:14px}.energizer-heading{display:flex;align-items:center;gap:8px;font:500 12px Poppins,sans-serif}.energizer-heading img{width:24px;height:24px;object-fit:contain}.energizer-heading strong{margin-left:auto;font:22px Critters,sans-serif}.energizer-cost>.row{margin-top:8px}.energizer-cost>p{font-size:10px;line-height:1.6;margin:6px 0 0}.energizer-cost .p1{color:#145483}.energizer-cost .p2{color:#963b6b}
.energizer-cost{display:flex;flex-direction:column;gap:8px;background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 0 0;margin:12px 0 0}.energizer-player-row{display:flex;align-items:center;gap:8px}.energizer-player-row img{width:24px;height:24px;object-fit:contain}.energizer-player-row strong{font:600 13px Poppins,sans-serif}
.legend-player,.legend-energy{display:inline-flex;align-items:center;gap:5px;flex-shrink:0}.legend-energy img{width:22px;height:22px;object-fit:contain}.legend-energy strong{font:600 12px Poppins,sans-serif}.board-legend #placement-hint{text-align:center;flex:1;min-width:0;font-size:10px}.board-legend{gap:8px}@media(max-width:380px){.board-legend{flex-wrap:wrap}.board-legend #placement-hint{order:3;flex-basis:100%}.board-legend #p2-legend{margin-left:auto}}
.local-note a{color:inherit}
.effect-info-heading{display:flex;align-items:center;gap:8px;margin-bottom:8px}.effect-info-heading>strong{margin:0}.effect-detail .effect-info-description{font-size:12px;line-height:1.7;margin:0 0 10px}.effect-detail .effect-info-provider{font-size:12px;line-height:1.7;margin:5px 0}

.share-dialog{width:min(1380px,calc(100vw - 28px))}.share-layout{grid-template-columns:minmax(0,1fr) 290px}.share-preview{background:#fffef1}.share-preview canvas{min-width:680px}@media(max-width:700px){.share-layout{grid-template-columns:1fr}.share-preview canvas{min-width:600px}}

/* Scale the share image to its panel; retain native resolution for downloads. */
.share-layout{grid-template-columns:minmax(0,1fr) 290px;align-items:start}
.share-preview{min-width:0;max-height:70svh;overflow-x:hidden;overflow-y:auto;padding:12px}
.share-preview canvas{display:block;width:100%;max-width:100%;min-width:0;height:auto}
@media(max-width:700px){.share-layout{grid-template-columns:minmax(0,1fr)}.share-preview{max-height:50svh;padding:8px}.share-preview canvas{min-width:0}}

.share-preview[data-format="grid"] canvas{max-height:calc(70svh - 26px);object-fit:contain}@media(max-width:700px){.share-preview[data-format="grid"] canvas{max-height:calc(50svh - 18px)}}

/* Approved container shell and modal width. */
.drafter{box-sizing:border-box;max-width:1180px;margin:22px auto 48px;padding:0 24px;color:#282625}
.drafter dialog,.share-dialog{box-sizing:border-box;max-width:1180px;width:min(1180px,calc(100vw - 32px));color:#282625}
@media(max-width:700px){.drafter{padding:0 24px}.share-dialog{width:calc(100vw - 24px)}}

.drafter-layout>.priority-panel{grid-column:auto}.drafter-layout>.summary-panel{grid-column:1/-1}
details.panel>summary{cursor:pointer;list-style:none;min-height:44px;margin-bottom:0}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary::after{content:'⌄';font:22px Poppins,sans-serif;margin-left:auto;transition:transform .15s}
details.panel[open]>summary::after{transform:rotate(180deg)}
details.panel[open]>.collapsible-content{margin-top:14px}
.priority-panel .priority-inputs{grid-template-columns:1fr}.priority-panel .steps{grid-template-columns:1fr}
details.panel>summary:focus-visible{outline:2px solid var(--accent-edge);outline-offset:4px;border-radius:4px}

/* Formation and picker occupy the approved one-third / two-thirds row. */
.drafter-layout{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.drafter-layout>.panel:not(details){box-sizing:border-box;height:600px;min-height:0;overflow:auto}
#tatari-section{display:flex;flex-direction:column;overflow:hidden}
#tatari-section .picker-grid{flex:1;min-height:0;max-height:none;overflow-y:auto;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));align-content:start}
.drafter-layout>.summary-panel,.drafter-layout>.priority-panel{grid-column:1/-1}
.priority-panel .priority-inputs{grid-template-columns:130px minmax(0,1fr) auto}.priority-panel .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.drafter-layout{grid-template-columns:minmax(0,1fr)}.priority-panel .priority-inputs,.priority-panel .steps{grid-template-columns:minmax(0,1fr)}}

details.panel>summary::after{content:'';display:block;width:16px;height:16px;flex:none;margin-left:auto;background:center/16px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23746b5b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");transition:none;transform:none}
details.panel[open]>summary::after{transform:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23746b5b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 14 5-5 5 5'/%3E%3C/svg%3E")}

.board-cell:has(img){touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.board-cell img{pointer-events:none}.touch-moving{opacity:.45}.touch-drop-target{outline:3px solid #ffd337;outline-offset:-3px}.touch-drag-art{position:fixed;width:64px;height:64px;object-fit:contain;transform:translate(-50%,-50%);pointer-events:none;z-index:1000;filter:drop-shadow(0 3px 3px #0005)}

.priority-panel .steps{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.priority-panel .step{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:14px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:13px 0}
.priority-panel .step-content{display:grid;grid-template-columns:auto minmax(0,1fr) 90px;align-items:center;gap:12px}
.priority-panel .priority-step-heads{margin:0;flex-wrap:wrap;max-width:160px}
.priority-panel .step-content strong{font:600 13px Poppins,sans-serif}
.priority-panel .step-target{justify-self:start;white-space:nowrap}
.priority-panel .step-content p{grid-column:2/-1;margin:0}
.priority-panel .step-controls{gap:4px}.priority-panel .step-controls button{width:36px;height:44px}
@media(max-width:700px){.priority-panel .step{grid-template-columns:22px minmax(0,1fr);gap:10px}.priority-panel .step-content{grid-template-columns:minmax(0,1fr) auto;gap:8px}.priority-panel .priority-step-heads{grid-column:1/-1}.priority-panel .step-content p{grid-column:1/-1}.priority-panel .step-controls{grid-column:2;justify-self:end}}

.formation-advanced{position:relative;margin-bottom:12px;width:max-content;font:12px Poppins,sans-serif}
.formation-advanced>summary{cursor:pointer;list-style:none;border:1px solid var(--line);border-radius:7px;padding:8px 12px;background:var(--soft)}
.formation-advanced>summary::-webkit-details-marker{display:none}
.advanced-options{position:absolute;top:calc(100% + 5px);left:0;z-index:20;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:12px;min-width:150px;box-shadow:0 5px 15px #0002}
.advanced-options label{display:flex;align-items:center;gap:8px;min-height:28px}.advanced-options input{width:16px;height:16px;accent-color:#ffd337}
.enemy-field{box-sizing:border-box;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:2px;width:min(100%,var(--board-width));margin:0 auto;padding:10px 10px 2px;background:#777c81;border:1px solid #656a70;border-bottom:0;border-radius:10px 10px 0 0}
.enemy-cell{aspect-ratio:1;background:#a5a9ad}.enemy-field+.board.full-field{border-radius:0 0 10px 10px;padding-top:2px}

.enemy-field{background:#6d842e;border-color:#6d842e}

.drafter-layout>.panel:not(details):has(#full-field:checked){height:850px}

.board,.enemy-field{box-sizing:border-box;background:#718a2d;border-color:#607528}
.enemy-field{gap:2px}.enemy-cell{min-width:0;aspect-ratio:1;opacity:.5}

.enemy-cell{box-sizing:border-box;border:1px solid #6d842e;border-radius:0;padding:3px}

.enemy-cell{opacity:1;background:rgb(165 169 173 / 50%)}

.drafter-layout{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.drafter-layout>.panel:not(details),.drafter-layout>.panel:not(details):has(#full-field:checked){height:auto;overflow:visible}
#tatari-section{height:var(--formation-height,600px);max-height:var(--formation-height,600px);overflow:hidden}
@media(max-width:700px){.drafter-layout{grid-template-columns:minmax(0,1fr)}}

.picker-tabs{margin-bottom:14px}.zobo-pick img{width:56px;height:56px}.enemy-cell{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}.enemy-cell img{width:95%;height:95%;object-fit:contain;pointer-events:none}.zobo-cell{cursor:pointer}
#picker.chip-picker{display:flex;flex-direction:column;gap:0}.chip-picker-row{padding:12px 0;border-bottom:1px solid var(--line)}.chip-select{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:7px;min-height:44px;padding:5px;color:var(--ink)}.chip-select[aria-pressed=true]{background:var(--highlight);border-color:var(--accent-edge)}.chip-select img{width:40px;height:40px;object-fit:contain}.chip-select strong{font:600 14px Poppins,sans-serif}.chip-picker-row p{margin:7px 5px}.chip-targets{display:flex;flex-wrap:wrap;gap:6px;padding:5px}.chip-targets img{width:32px;height:32px;object-fit:contain}

.zobo-cell{touch-action:none;user-select:none;-webkit-touch-callout:none}

.effect-chip{font-size:11px;padding:5px 8px;min-height:30px;border-radius:5px}
#effect-dialog{box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-height:85svh;color:#282625}
#effect-dialog .effect-detail{padding:0;margin:0;background:transparent}
#effect-dialog .effect-detail p{font-size:13px;line-height:1.6;margin:9px 0}
#effect-dialog .effect-detail strong{font-size:16px}
#close-effect img{width:22px;height:22px;object-fit:contain}
@media(pointer:coarse){.effect-chip{min-height:36px}}

/* Orange theme shared by every drafter modal. */
dialog{--paper:#fff4df;--soft:#ffecd0;--highlight:#ffe0ab;--line:#d6a260;--accent:#ffad32;--accent-edge:#bc741c;--ink:#282625;--muted:#775939;background:#fff4df;color:#282625;border-color:#d6a260}
dialog .modal-head{background:#ffe1b1;border-bottom-color:#d6a260}
dialog .modal-body,dialog .modal-actions,dialog .share-layout{background:#fff4df}
dialog .btn:not(.secondary){background:#ffad32;border-color:#bc741c;color:#282625}
dialog .segmented button[aria-pressed=true]{background:#ffad32;border-color:#bc741c}
dialog .share-preview{background:#ffecd0;border-color:#d6a260}
#effect-dialog .effect-info-provider{display:flex;align-items:center;gap:8px}
.effect-info-provider img{width:30px;height:30px;flex:none;object-fit:contain}

#zobo-type{margin-bottom:12px;max-width:300px}

.share-preview-column{min-width:0}.share-preview-toolbar{display:flex;justify-content:flex-end;margin-bottom:10px}.share-preview-toolbar .segmented{width:150px}.share-close-row{display:flex;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line)}.share-controls textarea{resize:vertical;min-height:104px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:13px Poppins,sans-serif}.share-preview[data-format="grid"] canvas{max-height:calc(66svh - 26px)}

.share-dialog[open]{display:flex;flex-direction:column;overflow:hidden}.share-dialog>.modal-head,.share-dialog>.share-close-row{flex:none}.share-dialog>.share-layout{min-height:0;overflow-y:auto}.share-close-row .btn{min-width:90px}

.share-preview canvas,.share-preview[data-format="grid"] canvas{width:75%;max-width:100%;min-width:0;max-height:none;height:auto;object-fit:contain;margin:0 auto}
.share-preview[data-theme="dark"]{background:#2f3136}.share-preview[data-theme="light"]{background:#f2f3f4}

.board{overflow:visible}.zobo-cell.boss-zobo{z-index:3;overflow:visible}
.zobo-cell.boss-zobo img{position:absolute;left:50%;top:50%;width:200%;height:200%;max-width:none;max-height:none;transform:translate(-50%,-50%);object-fit:contain;pointer-events:none}

.zobo-cell.boss-zobo img{top:auto;bottom:0;transform:translateX(-50%)}

.share-dialog{width:min(960px,calc(100vw - 32px));max-width:960px;max-height:82svh}
.share-dialog .share-layout{grid-template-columns:minmax(0,1fr) 280px;gap:16px;padding:18px}
.share-preview-column{position:relative}
.share-preview-toolbar{position:absolute;right:10px;top:10px;z-index:1;margin:0}
.share-preview-toolbar .segmented{width:116px;padding:3px;min-height:34px}
.share-preview-toolbar .segmented button{font-size:11px;min-height:28px;padding:4px 8px}
.share-preview{max-height:60svh;padding:12px;min-height:340px}
.share-controls{gap:12px}.share-close-row{padding:12px 18px}
@media(max-width:700px){.share-dialog{width:calc(100vw - 24px);max-height:90svh}.share-dialog .share-layout{grid-template-columns:minmax(0,1fr);padding:14px}.share-preview{min-height:0;max-height:48svh}}

.share-preview{box-sizing:border-box;height:60svh;min-height:0;max-height:60svh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:12px}
.share-preview canvas,.share-preview[data-format="grid"] canvas{display:block;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;object-fit:contain;margin:0}
@media(max-width:700px){.share-preview{height:48svh;max-height:48svh}}

.formation-actions{display:flex;align-items:center;gap:8px;flex:none}.formation-actions .formation-advanced{margin:0}.formation-actions .formation-advanced>summary{box-sizing:border-box;width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center}.formation-actions .advanced-options{left:auto;right:0}.formation-actions #clear-board{min-height:44px;text-decoration:none;white-space:nowrap}

.formation-actions .formation-advanced>summary svg{display:block;flex:none;margin:0}

.summary-panel #summaries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.summary-panel #summaries>.player-summary:only-child{grid-column:1/-1}
.summary-panel #summaries>.player-summary+.player-summary{border-top:0;margin-top:0;padding-top:0}
.effect-chip{font-size:10px;padding:2px 4px;min-height:10px;border-radius:5px}
@media(max-width:600px){.summary-panel #summaries{gap:12px}}

#unit-effects{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}



.board[data-mode="dojo"]{background:#456bac;border-color:#456bac}

/* Artwork must not contribute intrinsic height to grid tiles. */
.board .board-cell{min-width:0;min-height:0;aspect-ratio:1;box-sizing:border-box;position:relative}
.board .board-cell>img{position:absolute;left:50%;top:50%;width:95%;height:95%;max-width:95%;max-height:95%;object-fit:contain;transform:translate(-50%,-50%)}
.board .board-cell.boss-zobo>img{top:auto;bottom:0;width:200%;height:200%;max-width:none;max-height:none;transform:translateX(-50%)}

.picker-tabs,#picker-player{padding:3px;gap:3px}.picker-tabs button,#picker-player button{min-height:34px;padding:5px 10px;font-size:12px;line-height:20px}.picker-tabs{margin-bottom:10px}#picker-player{margin-bottom:10px}@media(max-width:700px){.picker-tabs button,#picker-player button{min-height:40px}}

.enemy-field{position:relative}.collapse-full-field{position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:3;width:28px;height:24px;min-height:24px;padding:0;display:grid;place-items:center;border:0;border-radius:6px;background:#718a2d;color:#fff;font:18px/1 sans-serif;cursor:pointer}.collapse-full-field:hover{background:#607528}.collapse-full-field:focus-visible{outline:2px solid #ffad32;outline-offset:2px}

.board .board-cell.chip-hover-target{outline:3px solid #ffdf71;outline-offset:-3px;box-shadow:inset 0 0 0 5px rgba(255,223,113,.3)}.chip-picker-row{padding:7px 0}.chip-select{min-height:34px;padding:3px 5px;gap:8px}.chip-select img{width:28px;height:28px}.chip-select strong{font-size:13px}.chip-picker-row p{margin:4px 5px}.chip-targets{gap:4px;padding:3px 5px}.chip-targets img{width:26px;height:26px}

.formation-notes-panel{margin:18px 0}.formation-notes-panel h2{margin:0 0 12px}.formation-notes-panel textarea{box-sizing:border-box;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:13px/1.6 Poppins,sans-serif;resize:vertical}.formation-notes-panel .visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}

.formation-actions .formation-advanced>summary{border:1px solid var(--line);border-radius:8px;background:var(--paper);display:grid;place-items:center}.formation-actions .formation-advanced>summary img{display:block;width:25px;height:25px;object-fit:contain;margin:0}

#priority-player{padding:3px;gap:3px}#priority-player button{min-height:34px;padding:5px 10px;font-size:12px;line-height:20px}.priority-unit{box-sizing:border-box;width:44px;height:44px;min-height:44px;padding:5px;display:flex;align-items:center;justify-content:center}.priority-unit img{width:30px;height:30px;object-fit:contain}@media(max-width:700px){#priority-player button{min-height:40px}}

.formation-actions .formation-advanced>summary::after{display:none}

.share-close-icon{width:44px;height:44px;min-height:44px;padding:0;font-size:22px;flex:none}
/* Keep Solo/Duo controls inside their context field on narrow phones. */
#mode-context-fields .context-grid>.field{min-width:0}
#mode-context-fields .mode-switch{min-width:0;width:100%;max-width:100%}
#mode-context-fields .mode-switch button{min-width:0;flex:1;padding-left:8px;padding-right:8px}
@media(max-width:380px){.board-panel>.panel-title{flex-wrap:wrap}.board-panel .formation-actions{margin-left:auto;max-width:100%}}

/* Range layers do not capture input or alter the formation/chip target state. */
.advanced-options{min-width:180px}.advanced-options label{min-height:44px;white-space:nowrap}
.range-help{font-size:11px;margin:0 0 10px;line-height:1.6}
.board-cell.range-attack::after,.enemy-cell.range-attack::after,.board-cell.range-skill::after,.enemy-cell.range-skill::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;box-sizing:border-box}
.board-cell.range-attack::after,.enemy-cell.range-attack::after{background:url('/tatari-companion/assets/attack-range-tile.png') center/100% 100% no-repeat;border:0;opacity:.7;z-index:0}
.board-cell.range-attack>img,.enemy-cell.range-attack>img{z-index:1}
.board-cell.range-skill::after,.enemy-cell.range-skill::after{background:#ff991f44;border:2px dashed #db6500}
.board-cell.range-attack.range-skill::after,.enemy-cell.range-attack.range-skill::after{background:linear-gradient(135deg,#159ce344 50%,#ff991f44 50%);border:2px solid #1479bf;outline:2px dashed #db6500;outline-offset:-5px}
.enemy-cell{position:relative}.board-cell .cell-player,.board-cell .cell-level{z-index:3}
.board .board-cell:focus:not(:focus-visible){outline:none}

/* Match the guide's game chip artwork, including quality frame and icon alignment. */
.chip-select .drafter-chip-art{display:block;position:relative;flex:0 0 44px;width:44px;height:44px;background-size:100% 100%;background-repeat:no-repeat;overflow:hidden}
.chip-select .drafter-chip-art img{position:absolute;max-width:none;max-height:none;object-fit:contain;transform:translate(-50%,-50%)}
.chip-picker-row .chip-select{min-height:52px;gap:10px}

/* Selected chips flank the player selector, outside the scrolling chip list. */
.chip-selection-toolbar{flex:none;margin-bottom:10px}.chip-selection-toolbar #picker-player{margin-bottom:0}.chip-selection-toolbar.has-chip-slots{--chip-slot-size:40px;--chip-slot-gap:6px;--chip-art-scale:1;display:flex;align-items:center;gap:10px}.chip-selection-toolbar.has-chip-slots #picker-player{flex:1;min-width:0}.chip-selection-toolbar.has-chip-slots #picker-player button{flex:1;min-width:0;white-space:normal}.chip-slot-group{display:flex;gap:var(--chip-slot-gap);flex:none}.chip-slot{position:relative;display:grid;place-items:center;flex:none;width:var(--chip-slot-size);height:var(--chip-slot-size);padding:0;border:2px dotted #baaa82;border-radius:7px;background:var(--paper);color:var(--muted);cursor:pointer}.chip-slot-plus{font:24px/1 Poppins,sans-serif}.chip-slot.occupied{background:var(--highlight)}.chip-slot-group[data-player="1"].active-player .chip-slot{border-color:#4484ad}.chip-slot-group[data-player="2"].active-player .chip-slot{border-color:#c06482}.chip-slot .drafter-chip-art{display:block;position:absolute;left:50%;top:50%;width:32px;height:32px;background-size:100% 100%;overflow:hidden;transform:translate(-50%,-50%) scale(var(--chip-art-scale));pointer-events:none}.chip-slot .drafter-chip-art img{position:absolute;max-width:none;max-height:none;transform:translate(-50%,-50%);object-fit:contain}.chip-slot-x{position:absolute;right:-5px;top:-6px;display:grid;place-items:center;width:16px;height:16px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);font:600 13px/1 Poppins,sans-serif;pointer-events:none}.chip-selection-toolbar.solo-chip-slots{justify-content:center}.chip-slot:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:700px){.chip-selection-toolbar.has-chip-slots{--chip-slot-size:30px;--chip-slot-gap:3px;--chip-art-scale:.75;gap:5px}.chip-selection-toolbar.has-chip-slots #picker-player{min-width:64px;padding:2px;gap:2px}.chip-selection-toolbar.has-chip-slots #picker-player button{font-size:11px;padding:4px 2px;min-height:40px}.has-chip-slots .picker-player-verb{display:none}.chip-slot-plus{font-size:22px}.chip-slot-x{width:14px;height:14px;font-size:11px;right:-4px;top:-5px}}
@media(max-width:360px){.chip-selection-toolbar.has-chip-slots{--chip-slot-size:24px;--chip-slot-gap:2px;--chip-art-scale:.5625;gap:4px}.chip-selection-toolbar.has-chip-slots #picker-player{min-width:52px}.chip-selection-toolbar.has-chip-slots #picker-player button{font-size:10px}}

.chip-picker-row.is-unavailable .chip-select{filter:grayscale(1);opacity:.48;cursor:not-allowed}.chip-picker-row.is-unavailable>p.caption{opacity:.65}.chip-claimed-note{font:600 11px/1.6 Poppins,sans-serif;color:var(--muted);padding:4px 5px}

.mobile-picker-dialog:not([open]){display:none!important}.mobile-picker-dialog{width:calc(100vw - 16px);max-width:680px;height:90vh;height:90dvh;max-height:calc(100dvh - 24px);padding:0;border:2px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);overflow:hidden}.mobile-picker-dialog[open]{display:flex;flex-direction:column}.mobile-picker-dialog::backdrop{background:#17171799}.mobile-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;padding:12px 14px;border-bottom:1px solid var(--line);background:#ffe4ae}.mobile-picker-head h3{font:600 17px/1.4 Poppins,sans-serif;margin:0}.mobile-picker-close{flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:600 24px Poppins,sans-serif;cursor:pointer}.mobile-picker-feedback{flex:none;font:12px/1.5 Poppins,sans-serif;margin:0;padding:8px 14px;background:var(--paper)}.mobile-picker-dialog #tatari-section{flex:1;min-height:0;height:auto!important;max-height:none!important;margin:0;padding:10px 12px;border:0;border-radius:0;box-shadow:none;overflow:hidden}.mobile-picker-dialog #tatari-section>.panel-title{display:none}.mobile-picker-dialog #picker{flex:1;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.mobile-picker-dialog #search{font-size:16px}.mobile-picker-dialog .pick{touch-action:pan-y}.mobile-picker-open{overflow:hidden}.mobile-replace-tatari{display:none}.mobile-picker-close:focus-visible{outline:3px solid var(--accent);outline-offset:2px}@media(max-width:700px){.mobile-replace-tatari{display:inline-flex}.mobile-picker-dialog .picker-tabs{flex:none}.mobile-picker-dialog .picker-filters{flex:none}}

@media(max-width:700px){#unit-dialog .modal-actions{flex-wrap:wrap}}