/* Loaded only outside the original home screen. */
:root{--card-shadow:0 4px 18px #23496b0c,0 12px 32px #23496b06;--lift-shadow:0 8px 24px #23496b19;--ease-out:cubic-bezier(.22,1,.36,1)}
body,.workspace{background:#f5f8fc;color:#253748}
.workspace>header{background:#fff;border:0;box-shadow:0 3px 18px #244a6a08;gap:10px}
.classic-link{font-size:12px;color:#52728e;text-decoration:none;border-radius:8px;padding:8px 10px;background:#f3f7fb}
#menu{border:0;border-radius:10px;box-shadow:0 2px 8px #25456216;min-height:36px}
.game-switch{border:0;background:#f1f5fa;box-shadow:none;border-radius:10px;padding:4px}
.game-switch button{border-radius:7px;min-height:32px}.game-switch button.selected{box-shadow:0 3px 9px #244a6a16;background:#fff;color:#087ee7}
main#app:not(.training-main){padding:26px 28px 40px}
.page-heading{margin-bottom:22px}.page-heading h1{line-height:1.4}.page-heading p{line-height:1.7;color:#587087}
.panel,.data-card,.equipment-gallery-card{border:0!important;border-radius:14px;background:#fff;box-shadow:var(--card-shadow)}
.panel{padding:24px}.data-card{padding:22px}.data-card p{line-height:1.8;color:#4b6278}.data-card h3{line-height:1.5}
.data-grid{gap:18px}.augment-catalog-card{gap:16px}.augment-catalog-card>img{width:48px;height:48px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;width:fit-content;max-width:100%;padding:5px;border:0;background:#eaf0f7;border-radius:12px;margin-bottom:20px}
.tabs button{border:0!important;border-radius:9px;padding:10px 17px;color:#526c83;background:transparent;min-height:40px}
.tabs button.active{background:#fff;color:#087ee7;box-shadow:0 3px 12px #264c6b16;font-weight:700}
.filter-row{gap:10px;align-items:center;margin-bottom:22px}
.filter-row input,.filter-row select,.planner-tools input,.planner-tools select{border:0;background:#fff;border-radius:9px;box-shadow:0 2px 10px #244a6a0d;min-height:40px;font-size:13px}
.catalog-filters{gap:8px}.filter-chip{border:0;border-radius:8px;padding:9px 14px;background:#fff;color:#526c83;box-shadow:0 2px 8px #244a6a09;min-height:38px}
.filter-chip.active{background:#087ee7;color:#fff;box-shadow:0 4px 12px #087ee728}
.catalog-shop.shop{gap:16px;padding:4px!important}.catalog-shop .champ-card{border-radius:10px;box-shadow:0 5px 15px #152b4930;overflow:hidden}
.equipment-gallery{gap:16px}.equipment-gallery-card{padding:16px}.equipment-gallery-card:hover{box-shadow:var(--lift-shadow)}
.component-option{border:0;border-radius:12px;background:#fff;box-shadow:var(--card-shadow);padding:18px 8px}
.component-option.picked{background:#e4f1ff;box-shadow:inset 0 0 0 2px #087ee7,0 5px 15px #087ee71a}
.component-option.correct-component{background:#e0f5e8;box-shadow:inset 0 0 0 2px #329557}.component-option.wrong-component{background:#ffe9e8;box-shadow:inset 0 0 0 2px #d44}
.recipe-table-scroll{border-radius:14px;background:white;box-shadow:var(--card-shadow);padding:8px}.recipe-table th,.recipe-table td{border-color:#eaf0f5}.recipe-cell{border-radius:8px}
.planner-selection{border:0;gap:16px;padding-top:16px}.planner-selection .planner-roster{border:0;padding:16px;background:#18352b;border-radius:12px}.planner-selection .planner-equipment{padding:16px;background:#18352b;border-radius:12px}
.planner-tools{background:#fff;padding:16px;border-radius:12px;box-shadow:var(--card-shadow);gap:12px}
.planner-items button{border-radius:7px}.planner-items button:hover{filter:brightness(1.13)}
.training-main>.tactics-arena,.planner-layout{border-radius:14px;box-shadow:0 8px 24px #173b4020}
.training-main:not(.trait-builder) .training-settings{border-radius:10px;box-shadow:0 4px 12px #926b1517;overflow:hidden}
.training-main:not(.trait-builder) .training-settings>summary{border-radius:10px}
.settings-content .panel{border:0;box-shadow:var(--card-shadow)}
.arena-actions #start-roll,.arena-actions #end-roll{border-radius:8px;box-shadow:0 3px 10px #0002}
.arena-actions #start-roll:enabled{box-shadow:0 4px 14px #087ee72e}
button,a,summary,input,select{touch-action:manipulation}
button,a,summary{transition:background-color 160ms ease,color 160ms ease,box-shadow 220ms var(--ease-out),transform 160ms var(--ease-out),filter 160ms ease}
button:not(:disabled),summary{cursor:pointer}
button:not(:disabled):active{transform:scale(.97);transition-duration:70ms}
button:disabled{cursor:not-allowed}
input,select,textarea{transition:box-shadow 160ms ease,background-color 160ms ease}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px #087ee725}
:where(button,a,summary,input,select,textarea):focus-visible{outline:3px solid #087ee7;outline-offset:3px}
#help-dialog{border:0;border-radius:16px;box-shadow:0 20px 70px #17375430}
#help-dialog[open]{animation:dialog-arrive 220ms var(--ease-out)}
#help-dialog::backdrop{background:#17304b55}
#catalog-content>.data-grid,#catalog-content>.equipment-gallery,#catalog-content>.tactics-arena,.settings-content{animation:content-arrive 180ms var(--ease-out)}
@keyframes content-arrive{from{opacity:.65;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){
.data-card:hover{box-shadow:var(--lift-shadow)}
.catalog-shop .champ-card:hover,.component-option:hover,.equipment-gallery-card:hover{transform:translateY(-3px);box-shadow:var(--lift-shadow)}
button.primary:not(:disabled):hover{filter:brightness(1.08);box-shadow:0 5px 15px #087ee72b}
button.secondary:not(:disabled):hover{background:#edf6ff}
}
.data-card,.equipment-gallery-card,.component-option,.catalog-shop .champ-card{transition:box-shadow 220ms var(--ease-out),transform 220ms var(--ease-out),background-color 150ms ease}
@media(max-width:680px){main#app:not(.training-main){padding:20px 14px 30px}.panel,.data-card{padding:17px}.tabs{gap:3px;width:100%}.tabs button{flex:1;padding:9px 10px;font-size:12px;white-space:nowrap}.catalog-shop.shop{gap:9px}.data-grid{gap:12px}.filter-row{gap:8px}.catalog-filters{gap:6px}.filter-chip{padding:8px 11px;min-height:36px}.classic-link{padding:7px 5px;font-size:11px}.workspace>header{gap:6px}.planner-tools{padding:12px}.planner-selection .planner-roster,.planner-selection .planner-equipment{padding:10px}.component-option{padding:13px 4px}.equipment-gallery{gap:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Equipment matrix: airy tiles, shared blue selection, no ruled grid. */
.recipe-table-scroll{padding:12px;background:#eef3f9;border-radius:16px;box-shadow:var(--card-shadow);scrollbar-color:#a8bdd3 #e6edf5;scrollbar-width:thin;isolation:isolate}
.recipe-table{border-collapse:separate;border-spacing:7px;min-width:1050px;background:transparent}
.recipe-table th,.recipe-table td{border:0;background:transparent;box-shadow:none;padding:0;height:83px;transition:background-color 150ms ease,box-shadow 150ms ease;border-radius:10px}
.recipe-table thead th{background:#e4edf7;color:#3d6488;font-weight:600}
.recipe-table tbody th{position:sticky;left:0;z-index:2;background:#e4edf7;color:#3d6488;box-shadow:3px 0 8px #294d6d08}
.recipe-table thead th:first-child{position:sticky;left:0;z-index:3;background:#e4edf7;font-size:12px}
.recipe-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:83px;padding:9px 4px;background:#fff;color:#355572;border-radius:10px;box-shadow:0 3px 9px #2a50720c}
.recipe-table .recipe-cell small,.recipe-table .recipe-component small{font-size:11px;line-height:1.35;margin:0}
.recipe-component{min-height:83px;gap:7px;padding:9px 4px;border-radius:10px}
.recipe-table img{border-radius:8px;box-shadow:0 2px 5px #20354c20}
.recipe-table .recipe-path-horizontal,.recipe-table .recipe-path-vertical{background:#dfedfc;box-shadow:none}
.recipe-table .recipe-path-horizontal .recipe-cell,.recipe-table .recipe-path-vertical .recipe-cell{background:#f0f7ff}
.recipe-table .recipe-path-target{background:transparent;box-shadow:none}
.recipe-table .recipe-path-target .recipe-cell{background:#dceeff;color:#075fae;box-shadow:inset 0 0 0 2px #2689dd,0 4px 12px #087ee71c}
.recipe-table .recipe-path-endpoint{background:#cee5fc;box-shadow:inset 0 0 0 2px #2689dd;color:#075fae}
.recipe-cell:focus-visible,.recipe-component:focus-visible{outline:3px solid #087ee7;outline-offset:2px}
.recipe-detail:not(:empty){padding:16px 20px;background:#fff;border-radius:12px;box-shadow:var(--card-shadow);gap:12px}
@media(hover:hover) and (pointer:fine){.recipe-cell:hover{background:#eaf4ff;box-shadow:0 5px 12px #1c609425}.recipe-component:hover{background:#d7e9fb}}
@media(max-width:600px){.recipe-table-scroll{padding:7px}.recipe-table{min-width:990px;border-spacing:6px}}
@media(prefers-reduced-motion:reduce){.recipe-table th,.recipe-table td{transition:none}}
/* A complete matrix fits its viewport; detail names stay available on click. */
.recipe-table-scroll{padding:6px;overflow:visible}
.recipe-table{width:100%;min-width:0;border-spacing:clamp(2px,.5vw,6px);table-layout:fixed}
.recipe-table th,.recipe-table td{width:auto;height:clamp(23px,calc((100dvh - 290px)/11),65px)}
.recipe-cell,.recipe-component{height:100%;min-height:0;padding:4px 1px;gap:3px}
.recipe-table img{width:clamp(16px,2.8vw,32px);height:clamp(16px,2.8vw,32px);border-radius:5px}
.recipe-table .recipe-cell small,.recipe-table .recipe-component small{font-size:10px;line-height:1.2;overflow-wrap:anywhere}
#equipment-content:has(.recipe-table-scroll) .recipe-detail{display:none}
.quiz-prompt-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;margin:14px 0}
.equipment-quiz .equipment-question{margin:0;gap:12px;min-height:112px}.equipment-quiz .equipment-question>img{width:56px;height:56px}.equipment-quiz .equipment-question h3{font-size:18px}
.equipment-quiz #equipment-answer{min-height:112px;display:flex;align-items:stretch}.quiz-answer-placeholder{display:grid;place-items:center;width:100%;padding:12px;border-radius:10px;background:#f1f6fb;color:#60758a;font-size:13px}
.equipment-quiz .feedback{width:100%;margin:0;padding:12px;border:0;border-radius:10px;font-size:13px}.equipment-quiz .feedback p{margin:7px 0}.equipment-quiz .feedback img{width:26px;height:26px}.equipment-quiz #next-equipment{padding:7px 14px;min-height:32px}
.equipment-quiz .component-options{gap:10px;margin:12px 0}.equipment-quiz .component-option{padding:10px 5px;gap:5px}.equipment-quiz .component-option img{width:38px;height:38px}.equipment-quiz .hint{margin:8px 0 0}.equipment-quiz .section-title h2{font-size:18px}
@media(max-width:1100px),(max-height:760px){.recipe-table small{display:none!important}.recipe-table th,.recipe-table td{height:clamp(23px,calc((100dvh - 270px)/11),54px)}}
@media(max-width:600px){.recipe-table th,.recipe-table td{height:clamp(23px,calc((100dvh - 290px)/11),42px)}.recipe-table-scroll{padding:3px;border-radius:10px}.recipe-table thead th:first-child{font-size:9px}.quiz-prompt-row{grid-template-columns:1fr;gap:8px;margin:10px 0}.equipment-quiz .equipment-question{min-height:62px}.equipment-quiz .equipment-question>img{width:45px;height:45px}.equipment-quiz .equipment-question h3{font-size:16px}.equipment-quiz #equipment-answer{min-height:96px}.equipment-quiz .component-options{gap:5px;margin:8px 0}.equipment-quiz .component-option{padding:8px 2px;font-size:10px}.equipment-quiz .component-option img{width:30px;height:30px}.equipment-quiz .component-option small{font-size:9px}.equipment-quiz .feedback{padding:8px 10px}.equipment-quiz .feedback p{margin:4px 0}.equipment-quiz.panel{padding:14px}}
.recipe-table{--matrix-cell:clamp(22px,calc((100dvh - 300px)/11 - 6px),60px)}
.recipe-table th,.recipe-table td{height:var(--matrix-cell)}
.recipe-table .recipe-cell,.recipe-table .recipe-component{height:var(--matrix-cell);min-height:0;box-sizing:border-box;padding:2px 1px;gap:2px;overflow:hidden}
.recipe-table img{width:min(26px,calc(var(--matrix-cell)*.54));height:min(26px,calc(var(--matrix-cell)*.54));flex:none}
.recipe-table small{max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.recipe-table{--matrix-cell:clamp(22px,calc((100dvh - 340px)/11 - 6px),60px)}

/* Planner: independent cards instead of the legacy framed arena. */
.planner-layout.tactics-arena{padding:0;border:0;background:transparent;box-shadow:none;grid-template-columns:180px minmax(0,1fr);gap:18px}
.planner-layout .planner-traits,.planner-layout .battle-surface,.planner-selection .planner-equipment,.planner-selection .planner-roster{border:0;border-radius:16px;box-shadow:var(--card-shadow);padding:20px}
.planner-layout .planner-traits{background:#fff;min-height:170px;max-height:440px}
.planner-layout .planner-traits h3,.planner-selection .planner-equipment h3,.planner-selection .planner-roster h3{color:#253e55;font-size:15px;margin:0 0 16px}
.planner-layout .planner-traits .hint{color:#708395;font-size:12px;line-height:1.8}
.planner-layout .live-trait{border:0;border-radius:10px;background:#f0f5fa;padding:9px 7px;margin-bottom:7px;color:#355571;box-shadow:none}
.planner-layout .trait-description b{font-size:11px;color:#355571}.planner-layout .trait-description small{color:#8393a3}.planner-layout .trait-description .reached{color:#087ee7}.planner-layout .trait-tier-name{color:#637b90}
.planner-layout .battle-surface{background:radial-gradient(ellipse at 50% 35%,#59775b,#365444);padding:18px 24px 24px;box-shadow:0 8px 24px #173b401a}
.planner-layout .board-caption{font-size:12px;align-items:center;margin-bottom:12px;color:#eef5e8;text-shadow:none}.planner-layout .board-caption>span+span{font-size:11px;color:#c3d4c3}
.planner-layout .board-caption b{border:0;background:#ffffff1f;color:#fff;border-radius:8px;padding:6px 10px}
.planner-layout .hex-board{max-width:580px;margin:6px auto}
.planner-layout .hex-cell{background:transparent}.planner-layout .hex-cell:before{inset:2px;background:#ffffff10}.planner-layout .hex-cell:nth-child(even):before{background:#ffffff16}
.planner-layout .hex-cell.occupied{background:transparent}.planner-layout .hex-cell.occupied:before{background:#ffffff20}
.planner-layout .hex-cell.piece-selected,.planner-layout .hex-cell.plan-drop-target{background:transparent;filter:none;box-shadow:none}.planner-layout .hex-cell.piece-selected:before,.planner-layout .hex-cell.plan-drop-target:before{background:#c4d99b80}
.planner-layout .hex-cell .piece-portrait,.planner-layout .plan-cell-items img{border:0}.planner-layout .hex-cell .piece-portrait{box-shadow:0 4px 12px #132a2866}.planner-layout .piece-name{border-radius:5px}
.planner-layout .hex-cell:focus-visible:before{background:#d6e9aa}
.planner-layout .planner-selection{border:0;gap:18px;padding:0;margin:0}
.planner-selection .planner-equipment,.planner-selection .planner-roster{background:#fff;height:430px;min-height:430px}
.planner-layout #selected-plan-hero{color:#355571;font-size:13px;height:36px;min-height:36px}.planner-layout #selected-plan-hero label{font-size:12px}
.planner-layout #selected-plan-hero select,.planner-tools input,.planner-tools select,.planner-selection .filter-row input,.planner-selection .filter-row select{border:0;background:#f0f5fa;color:#355571;box-shadow:none;border-radius:9px}
.planner-selection .filter-row input,.planner-selection .filter-row select{height:38px;min-height:38px;font-size:12px;padding:8px 10px}
.planner-layout .planner-equipment .equipment-slot{border:0;border-radius:10px;background:#edf3f9;color:#7594b1;font-size:20px;box-shadow:0 3px 9px #244a6a0b}
.planner-layout .planner-equipment .equipment-slot:disabled{opacity:.65}
.planner-selection .planner-items{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));grid-auto-rows:78px;gap:8px;padding:3px 3px 8px;scrollbar-width:thin;scrollbar-color:#c7d6e3 transparent}
.planner-selection .planner-items button{height:78px;border:0;background:#f3f7fb;color:#355571;border-radius:10px;gap:5px;padding:6px;box-shadow:0 3px 8px #244a6a0b;font-size:11px}
.planner-selection .planner-items img{width:36px;height:36px;border:0;border-radius:8px;box-shadow:0 2px 5px #18344820}
.planner-selection .planner-items button>span{font-size:10px;line-height:1.4;max-height:28px}
.planner-selection .planner-hero-tile small{top:4px;right:4px;min-width:16px;line-height:16px;border-radius:5px;background:var(--unit-cost);color:#172e42;font-size:10px;font-weight:700}
.planner-tools{padding:18px;gap:14px;border:0;border-radius:16px}.planner-tools button,.planner-layout .secondary{border:0;border-radius:9px;min-height:36px}.planner-tools .secondary,.planner-layout .secondary{background:#edf4fa;color:#35698f}.planner-tools #clear-plan{margin-left:auto}
.planner-game-export{padding:4px 2px;margin:16px 0;color:#8191a1;font-size:11px}
@media(hover:hover) and (pointer:fine){.planner-selection .planner-items button:hover{background:#e4f0fc;box-shadow:0 5px 12px #1c60941c;transform:translateY(-2px);filter:none}.planner-layout .equipment-slot:not(:disabled):hover{background:#dcecfb}.planner-layout .hex-cell:not(.occupied):hover{background:transparent}.planner-layout .hex-cell:not(.occupied):hover:before{background:#ffffff30}}
@media(max-width:800px){.planner-layout.tactics-arena{grid-template-columns:130px minmax(0,1fr);gap:12px}.planner-layout .planner-traits{padding:14px}.planner-layout .battle-surface{padding:16px 12px}.planner-layout .board-caption>span+span{display:none}.planner-layout .planner-selection{gap:12px}.planner-selection .planner-equipment,.planner-selection .planner-roster{padding:14px}.planner-selection .filter-row,.planner-selection .planner-equipment .filter-row,.planner-selection .planner-roster .filter-row{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.planner-layout.tactics-arena{grid-template-columns:minmax(0,1fr)}.planner-layout .battle-surface{grid-row:1}.planner-layout .planner-traits{min-height:0;max-height:180px}.planner-layout #plan-traits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.planner-layout .live-trait{margin:0}.planner-layout .planner-traits h3{margin-bottom:10px}.planner-selection .planner-items{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}.planner-selection .planner-equipment,.planner-selection .planner-roster{padding:10px;height:470px;min-height:470px}.planner-layout #selected-plan-hero{height:66px;min-height:66px;flex-wrap:wrap;gap:4px}.planner-layout #selected-plan-hero>b{flex-basis:100%}.planner-tools{padding:14px}.planner-tools #clear-plan{margin-left:0}.planner-layout #plan-equipped{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.planner-layout .planner-equipment .equipment-slot{width:100%;max-width:44px}}

/* Equal-height editing row: traits / board / selected champion. */
.planner-layout.tactics-arena{--planner-row-height:370px;grid-template-columns:160px minmax(0,1fr) 250px;grid-template-rows:var(--planner-row-height) auto;align-items:stretch;gap:16px}
.planner-layout>.planner-traits,.planner-layout>.battle-surface,.planner-layout>.planner-hero-detail{height:100%;min-height:0;max-height:none;box-sizing:border-box;overflow:hidden}
.planner-layout>.planner-traits{display:flex;flex-direction:column;padding:16px 12px}.planner-layout #plan-traits{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#c7d6e3 transparent;padding-right:3px}
.planner-layout>.battle-surface{display:flex;flex-direction:column;justify-content:center;padding:16px 14px}.planner-layout .board-caption{flex:none;font-size:11px}.planner-layout .board-caption>span+span{display:none}.planner-layout .hex-board{width:100%;max-width:540px;margin:auto}
.planner-layout>.planner-hero-detail{display:flex;flex-direction:column;padding:18px;background:#fff;border:0;border-radius:16px;box-shadow:var(--card-shadow);min-width:0}
.planner-hero-detail>h3{margin:0 0 14px;color:#253e55;font-size:15px}
#plan-hero-summary{display:flex;align-items:center;gap:10px;flex:none;min-width:0;margin-bottom:12px}#plan-hero-summary>img{width:46px;height:46px;object-fit:cover;border-radius:10px;box-shadow:0 3px 9px #244a6a19}#plan-hero-summary>div{min-width:0}#plan-hero-summary strong{display:block;font-size:14px;color:#253e55}#plan-hero-summary small{display:block;color:#718599;font-size:10px;line-height:1.6;margin-top:4px}#plan-hero-summary .hint{font-size:12px;line-height:1.8;margin:0}
.planner-layout .planner-hero-detail #selected-plan-hero{height:36px;min-height:36px;flex-wrap:nowrap;gap:8px;font-size:12px}.planner-hero-detail #selected-plan-hero button{margin-left:auto}
.planner-layout .planner-hero-detail #plan-equipped{display:grid;grid-template-columns:repeat(3,44px);gap:8px;margin:10px 0 14px;height:44px;min-height:44px}
.planner-hero-detail .equipment-slot{width:44px;height:44px;margin:0;padding:3px;border:0;border-radius:10px;background:#edf3f9;color:#7594b1;font-size:20px;box-shadow:0 3px 9px #244a6a0b}.planner-hero-detail .equipment-slot img{border-radius:7px}.planner-hero-detail .equipment-slot:disabled{opacity:.55}
.plan-hero-description{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#c7d6e3 transparent;padding-right:4px;color:#526c83}.plan-hero-description h4{font-size:12px;margin:0 0 8px;color:#355571}.plan-hero-description .hero-skill{font-size:12px;line-height:1.85;margin:0}.plan-hero-description .hint{font-size:10px;line-height:1.6}
.planner-selection .planner-equipment,.planner-selection .planner-roster{height:350px;min-height:350px;padding:18px}
.planner-selection .planner-equipment .filter-row,.planner-selection .planner-roster .filter-row{grid-template-columns:minmax(0,1fr) 120px;margin-bottom:12px}
.planner-selection .planner-items{grid-auto-rows:70px;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:7px}.planner-selection .planner-items button{height:70px}.planner-selection .planner-items img{width:32px;height:32px}
@media(max-width:1000px) and (min-width:701px){.planner-layout.tactics-arena{--planner-row-height:340px;grid-template-columns:125px minmax(0,1fr) 210px;gap:12px}.planner-layout>.planner-hero-detail{padding:14px}.planner-layout>.battle-surface{padding:14px 9px}.planner-layout .planner-traits .trait-description b{font-size:10px}}
@media(max-width:700px){.planner-layout.tactics-arena{grid-template-columns:125px minmax(0,1fr);grid-template-rows:280px 280px auto;gap:12px}.planner-layout>.battle-surface{grid-column:1/-1;grid-row:1}.planner-layout>.planner-traits{grid-row:2;grid-column:1}.planner-layout>.planner-hero-detail{grid-row:2;grid-column:2;padding:14px}.planner-layout .hex-board{max-width:410px}.planner-layout #plan-traits{display:block}.planner-layout .live-trait{margin-bottom:6px}.planner-layout>.planner-selection{grid-row:3}.planner-selection .planner-equipment,.planner-selection .planner-roster{height:350px;min-height:350px;padding:12px}.planner-selection .planner-equipment .filter-row,.planner-selection .planner-roster .filter-row{grid-template-columns:minmax(0,1fr)}.planner-layout .planner-traits h3{margin-bottom:12px}}

/* Game training surfaces retain the original green/gold palette. */
.training-main:not(.trait-builder) .training-settings{overflow:visible}
.training-main .settings-content{border:0;border-radius:12px;background:#f5f8fc;box-shadow:0 16px 45px #10201e40;z-index:1}
.training-main>.tactics-arena{border:0;border-radius:14px;background:linear-gradient(145deg,#20362f,#142924);box-shadow:0 8px 24px #173b4026}
.training-main .battle-surface{border:0;border-radius:10px;background:radial-gradient(ellipse at 50% 35%,#617954,#3b5943);box-shadow:inset 0 2px 12px #132b2226,0 4px 12px #071d2426;padding:9px 12px}
.training-main .board-caption{color:#e1e5ce;text-shadow:none}.training-main .board-caption b{border:0;background:#1b342b70;border-radius:5px}
.training-main .hex-cell{background:transparent}.training-main .hex-cell:before{inset:1.5px;background:#9aac7c24}.training-main .hex-cell:nth-child(even):before{background:#b3bf9029}.training-main .hex-cell.occupied{background:transparent}.training-main .hex-cell.occupied:before{background:#aebd7e40}
.training-main .hex-cell.piece-selected,.training-main .hex-cell.drop-ready{background:transparent;filter:none}.training-main .hex-cell.piece-selected:before,.training-main .hex-cell.drop-ready:before{background:#d1c88199}.training-main .hex-cell:focus-visible{background:#eee0a5}
.training-main .hex-cell .piece-portrait{border:1px solid #ddc88a88;box-shadow:0 3px 8px #102b2370}.training-main .piece-name{border-radius:4px;background:#152c24dc}
.training-main .bench-slots{border:0;border-radius:8px;padding:4px;gap:5px;background:#10251f;box-shadow:inset 0 2px 7px #06181466,0 2px 7px #06181433}
.training-main .bench-cell,.training-main .bench-cell:nth-child(even),.training-main .bench-cell.occupied{border:0;border-radius:5px;background:linear-gradient(145deg,#657451,#435a42);box-shadow:inset 0 1px 0 #c3bd831c,0 2px 4px #071c2440}
.training-main .bench-cell.piece-selected{outline:0;background:#9c945e;box-shadow:inset 0 0 0 2px #deca87}.training-main .bench-cell.drop-ready{background:#acaa72}.training-main .bench-cell .piece-portrait{border:0}
.training-main .shop-toolbar{border:0}.training-main .shop-gold{border:0;background:#102820;border-radius:8px 8px 0 0;box-shadow:0 -2px 8px #06181422}
.training-main .tactics-arena .shop{background:#10251f;border:0;border-radius:8px;gap:6px;padding:5px;box-shadow:inset 0 2px 7px #06181466}
.training-main .tactics-arena .champ-card{border-radius:5px;box-shadow:0 3px 8px #05191366;overflow:hidden;transition:filter 150ms ease,transform 150ms ease,box-shadow 150ms ease}
.training-main .shop-main-row{grid-template-columns:76px minmax(0,1fr);gap:8px}
.training-main .shop-main-row>#refresh-roll{position:relative;border:1px solid #bca166;border-radius:8px;background:linear-gradient(145deg,#405344,#263d32);color:#f2dfac;font-size:12px;font-weight:600;gap:6px;padding:9px 6px;box-shadow:inset 0 1px 0 #e6d7a32b,0 4px 10px #06181455;text-shadow:0 1px 2px #10241b}
.training-main .shop-main-row>#refresh-roll:before{content:'';width:24px;height:24px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7v5h-5M4 17v-5h5M19 11a7 7 0 0 0-12-5L4 9m16 6-3 3A7 7 0 0 1 5 13' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;flex:none}
.training-main .shop-main-row>#refresh-roll span{font-size:12px;color:#ebcc79}.training-main .shop-main-row>#refresh-roll kbd{position:absolute;top:5px;right:5px;font-size:9px;line-height:14px;min-width:14px;padding:0 3px;margin:0;color:#c6d0b9;background:#10251f80;border:0;border-radius:3px;box-shadow:none}
.training-main .shop-main-row>#refresh-roll:disabled{opacity:1;color:#8d9783;border-color:#65725a;background:#2b3c30;box-shadow:none;text-shadow:none}.training-main .shop-main-row>#refresh-roll:disabled span{color:#8d9783}
@media(hover:hover) and (pointer:fine){.training-main .shop-main-row>#refresh-roll:not(:disabled):hover{background:linear-gradient(145deg,#58684b,#354e38);box-shadow:inset 0 1px 0 #f4df9c44,0 4px 12px #071b2499;filter:none}.training-main .tactics-arena .champ-card:not(:disabled):hover{filter:brightness(1.12);box-shadow:0 4px 12px #0008}.training-main .hex-cell:not(.occupied):hover{background:transparent}.training-main .hex-cell:not(.occupied):hover:before{background:#c6ce9260}}
.training-main .shop-main-row>#refresh-roll:not(:disabled):active{background:#243c2d;box-shadow:inset 0 2px 6px #071b2480;transform:scale(.97)}
@media(max-width:680px){.training-main .shop-main-row{grid-template-columns:50px minmax(0,1fr);gap:4px}.training-main .shop-main-row>#refresh-roll{font-size:10px;gap:3px;padding:7px 3px}.training-main .shop-main-row>#refresh-roll:before{width:19px;height:19px}.training-main .shop-main-row>#refresh-roll span{font-size:10px}.training-main .shop-main-row>#refresh-roll kbd{top:3px;right:3px;font-size:7px;line-height:10px;min-width:10px;padding:0 2px}.training-main .bench-slots{gap:3px;padding:3px}.training-main .tactics-arena .shop{gap:3px;padding:3px}.training-main .battle-surface{padding:6px}}
@media(prefers-reduced-motion:reduce){.training-main .tactics-arena .champ-card{transition:none}}

/* Original-style rectangular gold reroll control. */
.training-main .shop-main-row>#refresh-roll{border:1px solid #e7c570;border-radius:2px;background:linear-gradient(135deg,#e8ca78 0%,#d4b15c 55%,#b78d3d 100%);color:#392e19;text-shadow:none;box-shadow:inset 0 1px 0 #fff0b8, inset 0 -2px 0 #9d772f,0 3px 8px #071b2455}
.training-main .shop-main-row>#refresh-roll span{color:#493819}.training-main .shop-main-row>#refresh-roll kbd{color:#59431d;background:#fff1bd44;border-radius:2px}
.training-main .shop-main-row>#refresh-roll:disabled{color:#74623b;background:linear-gradient(135deg,#bda76a,#a38a50);border-color:#bda66b;box-shadow:inset 0 1px 0 #ddca8c55}.training-main .shop-main-row>#refresh-roll:disabled span{color:#74623b}
@media(hover:hover) and (pointer:fine){.training-main .shop-main-row>#refresh-roll:not(:disabled):hover{background:linear-gradient(135deg,#f4dc91,#e2bf6b 55%,#cba34f);box-shadow:inset 0 1px 0 #fff4ca,0 4px 12px #071b2466;filter:none}}
.training-main .shop-main-row>#refresh-roll:not(:disabled):active{background:linear-gradient(#b68d3e,#d5b262);box-shadow:inset 0 2px 5px #79591f55}

/* Match the client reference: horizontal bronze-gold button, text left, arrow right. */
.training-main .shop-main-row{grid-template-columns:128px minmax(0,1fr)}
.training-main .shop-main-row>#refresh-roll{height:64px;align-self:end;align-items:flex-start;justify-content:center;padding:9px 48px 9px 12px;gap:5px;border:2px solid #927c40;border-radius:0;background:linear-gradient(110deg,#292c1d,#484022);color:#e4dab8;font-size:13px;font-weight:500;box-shadow:inset 0 0 0 1px #c3a35a33;text-align:left}
.training-main .shop-main-row>#refresh-roll:before{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:32px;height:32px;color:#bda568;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3v7h-7l2.6-2.6A6.4 6.4 0 1 0 18 14h3a9.4 9.4 0 1 1-3.3-8z' fill='black'/%3E%3C/svg%3E")}
.training-main .shop-main-row>#refresh-roll span{display:flex;align-items:center;gap:5px;color:#eee5c6;font-size:14px}.training-main .shop-main-row>#refresh-roll kbd{display:none}
.training-main .shop-main-row>#refresh-roll:disabled{background:#2c2e22;color:#827e66;border-color:#626044;box-shadow:inset 0 0 0 1px #a69a5d18}.training-main .shop-main-row>#refresh-roll:disabled span,.training-main .shop-main-row>#refresh-roll:disabled:before{color:#827e66}
@media(hover:hover) and (pointer:fine){.training-main .shop-main-row>#refresh-roll:not(:disabled):hover{background:linear-gradient(110deg,#3e3e25,#62542c);box-shadow:inset 0 0 0 1px #e6c87a66;border-color:#c6a456}}
.training-main .shop-main-row>#refresh-roll:not(:disabled):active{background:#292c1d;box-shadow:inset 0 2px 6px #0005}
.training-main .settings-content{padding:14px 14px 0;scrollbar-width:thin;scrollbar-color:#b9cad7 transparent;scroll-padding-bottom:80px}
.settings-content .panel{border-radius:12px;padding:20px;box-shadow:0 4px 18px #23496b0a}
.settings-content .section-title{gap:12px;flex-wrap:wrap}.settings-content .section-title h2{font-size:16px;color:#27465e}.settings-content .section-title>span{color:#7b8fa1;font-size:11px}
.settings-content .fields.roll-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.settings-content .field{min-width:0}.settings-content .field label{font-size:12px;color:#567086;margin-bottom:8px}
.settings-content input,.settings-content select,.settings-content textarea{border:0;border-radius:9px;background:#edf3f8;color:#2d4b63;padding:11px 12px;min-height:42px;box-shadow:none;font-size:13px}.settings-content .field input,.settings-content .field select{width:100%}
.settings-content input:focus,.settings-content select:focus,.settings-content textarea:focus{box-shadow:0 0 0 3px #087ee724;background:#f4f9fe}
.settings-content .target-settings{border:0;padding:18px;margin-top:20px;background:#f5f8fc;border-radius:12px}.settings-content .hint{font-size:11px;line-height:1.8;color:#6c8296}.settings-content .target-hero-grid.planner-items{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));grid-auto-rows:78px;gap:8px;padding:4px;height:230px;max-height:230px;background:transparent}
.settings-content .target-hero-grid .planner-hero-tile{height:78px;border:0;border-radius:9px;background:#fff;color:#38546b;padding:6px;box-shadow:0 2px 7px #254b6d10;gap:5px}.settings-content .target-hero-grid .planner-hero-tile img{width:36px;height:36px;border:0;border-radius:7px}.settings-content .target-hero-grid .planner-hero-tile>span{font-size:10px}.settings-content .target-hero-grid .planner-hero-tile>small{border-radius:4px;background:var(--unit-cost);color:#172e42;min-width:15px;line-height:15px;top:4px;right:4px}
.settings-content .target-hero-grid .planner-hero-tile.is-selected{background:#e1effc;box-shadow:inset 0 0 0 2px #418ac3,0 3px 10px #087ee717}.settings-content .target-selected-mark{top:3px;left:4px;color:#087ee7;font-size:13px}
.settings-content .target-chip{border:0;border-radius:8px;background:#e5eff8;color:#386488;padding:6px 9px;min-height:36px}.settings-content button.secondary{border:0;background:#e8f0f7;color:#386488;border-radius:8px}.settings-content button.primary{border:0;border-radius:8px}.settings-content button:disabled{opacity:.5}
.settings-content .lineup-import{background:#f5f8fc;border:0;border-radius:12px;padding:12px;gap:10px;margin-top:16px}.settings-content .lineup-preview{gap:8px}.settings-content .lineup-preview>div{border:0;border-radius:8px;background:#edf3f8;padding:6px}
.settings-actions{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;padding:14px 6px;background:#f5f8cfee;background:#f5f8fc;box-shadow:0 -5px 16px #23496b08;z-index:2}.settings-actions>span{margin-right:auto;color:#768c9e;font-size:11px}.settings-actions button{min-height:40px;padding:10px 18px;white-space:nowrap}
.training-main .hex-cell,.training-main .bench-cell,.planner-layout .hex-cell{user-select:none;-webkit-user-select:none}.piece-portrait img{-webkit-user-drag:none;user-select:none}
@media(hover:hover) and (pointer:fine){.settings-content .target-hero-grid .planner-hero-tile:not(:disabled):hover{background:#eaf3fc;transform:translateY(-2px);filter:none}.settings-content .target-chip:not(:disabled):hover{background:#d7e8f7}}
@media(max-width:680px){.training-main .shop-main-row{grid-template-columns:78px minmax(0,1fr)}.training-main .shop-main-row>#refresh-roll{height:48px;font-size:11px;padding:6px 29px 6px 7px;gap:3px}.training-main .shop-main-row>#refresh-roll:before{width:22px;height:22px;right:5px}.training-main .shop-main-row>#refresh-roll span{font-size:11px}.settings-content .fields.roll-settings{grid-template-columns:1fr;gap:10px}.settings-content .panel{padding:14px}.settings-content .target-settings{padding:10px}.settings-actions{flex-wrap:wrap;gap:8px}.settings-actions>span{width:100%}.settings-actions button{flex:1}.settings-content .target-hero-grid.planner-items{grid-template-columns:repeat(auto-fill,minmax(54px,1fr))}}
.training-main .arena-actions{justify-content:flex-start;gap:14px}.training-main .arena-actions>.inline-actions{margin-left:auto}.shop-sound{display:flex;align-items:center;gap:5px;color:#c4cbb5;font-size:10px;white-space:nowrap;cursor:pointer}.shop-sound input{accent-color:#d7ba69;margin:0;cursor:pointer}
@media(max-width:680px){.training-main .arena-actions{gap:7px}.shop-sound{font-size:8px;gap:3px}}
.training-main .shop-target-marker{position:absolute;top:6px;right:7px;z-index:5;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#17382edb;color:#f6d476;box-shadow:0 2px 5px #0005;pointer-events:none}.shop-target-marker svg{width:18px;height:18px;filter:drop-shadow(0 1px 1px #0008)}
@media(max-width:680px){.training-main .shop-target-marker{top:3px;right:3px;width:19px;height:19px}.shop-target-marker svg{width:14px;height:14px}}

/* Training owns one scrollbar at the viewport edge; result cards cannot resize the arena. */
html:has(.training-workspace){overflow:hidden;scrollbar-gutter:auto}
.training-workspace{width:100%;height:100dvh;overflow:hidden}
main#app.training-main{max-width:none;width:100%;margin:0;overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:auto;overflow-anchor:none}
main#app.training-main:not(.trait-builder)>.tactics-arena{flex:0 0 auto;height:calc(100dvh - 167px);min-height:360px}
main#app.training-main>#roll-result{flex:none}
main#app.training-main>#roll-result:empty{display:none}
@media(max-width:680px){main#app.training-main:not(.trait-builder)>.tactics-arena{height:calc(100dvh - 149px);min-height:340px}}

/* Shop hints follow the supplied game-client references. */
.training-main .shop-target-marker{left:6px;right:auto;top:3px;width:23px;height:31px;border-radius:0;clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);background:linear-gradient(145deg,#e7cc86,#9b722b);color:#fff3be;box-shadow:none;padding:2px 2px 6px}
.training-main .shop-target-marker:before{content:'';position:absolute;inset:1px;clip-path:inherit;background:linear-gradient(130deg,#795321,#3f2c15);z-index:-1}.training-main .shop-target-marker svg{width:17px;height:17px}
.training-main .tactics-arena .champ-card .slot-key{left:auto;right:4px;top:4px}
.training-main .shop-upgrade-stars{position:absolute;z-index:5;left:5px;top:3px;font-size:17px;line-height:20px;letter-spacing:1px;color:#eff7ff;text-shadow:0 0 4px #fff,0 1px 3px #32475c;pointer-events:none}
.training-main .champ-card:has(.shop-target-marker) .shop-upgrade-stars{left:33px}
.training-main .tactics-arena .champ-card.shop-upgrade-2{box-shadow:0 0 7px #e5f3ff9c,inset 0 0 6px #edf7ff99}
.training-main .tactics-arena .champ-card.shop-upgrade-3{box-shadow:0 0 9px #ffd75fbb,inset 0 0 8px #ffdc7299}
.training-main .champ-card.shop-upgrade-3 .shop-upgrade-stars{color:#ffe68c;text-shadow:0 0 5px #ffcf4d,0 1px 3px #65421b}
.training-main .champ-card[class*="shop-upgrade-"]:after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 12px #eef7ff7a}
.training-main .champ-card.shop-upgrade-3:after{box-shadow:inset 0 0 15px #ffd85a9c}

@media(max-width:680px){.training-main .shop-target-marker{left:3px;top:2px;width:17px;height:23px;padding-bottom:4px}.training-main .shop-target-marker svg{width:13px;height:13px}.training-main .shop-upgrade-stars{font-size:11px;line-height:15px;left:3px;letter-spacing:0}.training-main .champ-card:has(.shop-target-marker) .shop-upgrade-stars{left:22px}.training-main .tactics-arena .champ-card:has(.shop-upgrade-stars) .slot-key{display:none}}
/* Three stars form the client's one-above-two triangle. */
.training-main .shop-upgrade-stars{display:flex;gap:1px;letter-spacing:0;align-items:center}
.training-main .shop-upgrade-stars i{font-style:normal;line-height:1;display:block}
.training-main .shop-upgrade-3 .shop-upgrade-stars{display:grid;grid-template-columns:repeat(2,14px);grid-template-rows:repeat(2,13px);gap:0;width:28px;height:26px;font-size:15px;justify-items:center}
.training-main .shop-upgrade-3 .shop-upgrade-stars i:first-child{grid-column:1/-1}
@media(max-width:680px){.training-main .shop-upgrade-3 .shop-upgrade-stars{grid-template-columns:repeat(2,10px);grid-template-rows:repeat(2,9px);width:20px;height:18px;font-size:11px}}

/* Strong lineups reuse the site's quiet cards and keep the homepage intact. */
.comp-filters{display:flex;align-items:end;flex-wrap:wrap;gap:14px;padding:22px;background:#fff;border-radius:18px;box-shadow:0 8px 28px #23445b0a}
.comp-filters label{display:grid;gap:7px;font-size:13px;font-weight:600;flex:1;min-width:135px}.comp-filters .comp-search{flex:2;min-width:220px}.comp-filters input,.comp-filters select{width:100%;height:44px;border:0;background:#eff5fa;border-radius:10px;padding:0 12px;color:#28455d;min-width:0}.comp-filters button{min-height:44px}.comp-summary{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:22px 2px 14px;color:#667d8f;font-size:12px}.comp-summary #comp-count{font-size:15px;font-weight:700;color:#28455d}.comp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.comp-card{min-width:0;padding:22px;background:#fff;border-radius:18px;box-shadow:0 9px 30px #26445f0c;display:flex;flex-direction:column;gap:18px}.comp-card-heading{display:flex;gap:12px;align-items:center}.comp-tier{display:grid;place-items:center;min-width:38px;height:38px;border-radius:11px;background:#eaf3ff;color:#176fb5;font-weight:800}.comp-card h2{font-size:17px;line-height:1.45;margin:0 0 5px;color:#263e55}.comp-card small{font-size:11px;color:#6b8193}.comp-units{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.comp-units button{position:relative;display:grid;justify-items:center;gap:5px;padding:8px 3px;background:#f1f6fa;border:0;border-radius:11px;min-width:0;color:#304e65}.comp-units img{width:42px;height:42px;object-fit:cover;border-radius:9px}.comp-units span{font-size:10px;line-height:1.3;overflow-wrap:anywhere}.comp-units b{position:absolute;top:2px;right:2px;background:#dcecff;color:#24639a;font-size:9px;padding:2px 3px;border-radius:4px}.comp-traits{display:flex;flex-wrap:wrap;gap:6px}.comp-traits button{background:#f0f5f9;border:0;border-radius:7px;padding:7px 9px;font-size:11px;color:#526d82}.comp-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:auto}.comp-actions .primary,.comp-actions .secondary{min-height:40px;padding:10px 13px;border-radius:9px;text-decoration:none;font-size:12px;display:inline-flex;align-items:center;justify-content:center}.comp-source{margin-left:auto;font-size:12px;color:#587b99}.comp-source-label{line-height:1.6}.comp-empty{grid-column:1/-1;text-align:center;padding:60px 20px;background:#fff;border-radius:18px;color:#61798d}.comp-note{margin-top:24px;line-height:1.8}.comp-grid button,.comp-grid a{transition:background .16s,box-shadow .16s,transform .16s}.comp-grid button:hover{background:#dfedf9}.comp-grid button:active,.comp-grid .primary:active{transform:translateY(1px)}.comp-grid :focus-visible,.comp-filters :focus-visible{outline:2px solid #1683dd;outline-offset:3px}
@media(max-width:780px){.comp-grid{grid-template-columns:1fr}.comp-card{padding:18px}.comp-filters{padding:16px;gap:10px}.comp-filters label{min-width:120px}.comp-filters .comp-search{flex-basis:100%}.comp-source{margin-left:0}}
@media(prefers-reduced-motion:reduce){.comp-grid button,.comp-grid a{transition:none}}

.rank-context{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#eaf3fb;border-radius:14px;padding:18px 22px;margin-bottom:22px;color:#355a77}.rank-context strong{font-size:15px}.rank-context p{font-size:12px;line-height:1.7;margin:6px 0 0}.rank-context a{white-space:nowrap;font-size:12px;color:#2677b4}
.rank-filters{display:flex;align-items:end;gap:14px;flex-wrap:wrap;background:white;padding:18px 22px;border-radius:16px;box-shadow:0 6px 24px #26445f09}.rank-filters label{display:grid;gap:7px;font-size:12px;min-width:180px}.rank-filters label:first-child{flex:1}.rank-filters input,.rank-filters select{height:44px;border:0;border-radius:9px;background:#eff5fa;color:#28455d;padding:0 12px;min-width:0}.rank-filters button{height:44px}
.rank-column-labels,.rank-row{display:grid;grid-template-columns:minmax(180px,1.4fr) 80px 80px 80px 105px minmax(260px,1.65fr);gap:14px;align-items:center}.rank-column-labels{padding:4px 20px 12px;font-size:11px;color:#74889b}.rank-row{padding:20px;background:white;border-radius:14px;margin-bottom:12px;box-shadow:0 5px 20px #26445f09;min-width:0}.rank-identity{display:flex;align-items:center;gap:12px;min-width:0}.rank-number{font-size:16px;color:#7c91a3;width:23px;flex-shrink:0;font-variant-numeric:tabular-nums}.rank-object{display:flex;align-items:center;gap:10px;padding:0;background:none;border:0;color:#27435b;text-align:left;min-width:0;cursor:pointer;border-radius:6px}.rank-object>img{width:48px;height:48px;object-fit:contain;border-radius:6px;flex-shrink:0}.rank-object[data-rank-hero]>img{border:2px solid var(--rank-cost);object-fit:cover}.rank-object>span{font-size:14px;line-height:1.5}.rank-object small{display:block;font-size:10px;color:#7a8c9b;line-height:1.6;margin-top:4px}.rank-metric strong{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;color:#365872}.rank-metric small{display:none;font-size:10px;color:#7c91a3}.rank-recommendations{min-width:0}.rank-recommendations>small{display:none}.rank-recommendations>div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.rank-pair{display:flex;flex-direction:column;justify-content:start;align-items:center;gap:5px;width:100%}.rank-pair>img{width:38px;height:38px}.rank-pair>span{font-size:10px;line-height:1.3;text-align:center;overflow-wrap:anywhere}.rank-object:hover{background:#edf5fc}.rank-object:focus-visible{outline:2px solid #1683dd;outline-offset:4px}.rank-method{font-size:12px;line-height:1.9;margin:24px 4px}.rank-filters [hidden]{display:none}
@media(max-width:1100px){.rank-column-labels{display:none}.rank-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.rank-identity{grid-column:1/3}.rank-recommendations{grid-column:3/5;grid-row:1/3}.rank-metric{grid-row:3}.rank-metric small{display:block;margin-bottom:4px}.rank-recommendations>small{display:block;font-size:11px;color:#7a8c9b;margin-bottom:12px}.rank-pair>img{width:42px;height:42px}}
@media(max-width:600px){.rank-context{display:block;padding:16px}.rank-context a{display:inline-block;margin-top:10px}.rank-filters{padding:16px;gap:10px}.rank-filters label{flex:1;min-width:130px}.rank-filters label:first-child{flex-basis:100%}.rank-filters input{width:100%}.rank-row{padding:16px;gap:16px 8px}.rank-identity{grid-column:1/-1}.rank-recommendations{grid-column:1/-1;grid-row:3}.rank-metric{grid-row:2}.rank-metric strong{font-size:13px}.rank-recommendations>small{margin-bottom:10px}.rank-object>span{font-size:13px}.rank-pair>span{font-size:10px}.rank-recommendations>div{gap:8px}.rank-pair>img{width:40px;height:40px}}
.comp-unit{min-width:0;background:#f1f6fa;border-radius:11px;padding-bottom:5px}.comp-unit>button{width:100%}.comp-unit-items{display:flex;justify-content:center;gap:3px;min-height:24px}.comp-units .comp-unit-items button{padding:0;border-radius:3px;background:none;display:block;min-width:0}.comp-units .comp-unit-items img{width:23px;height:23px;border-radius:2px;object-fit:contain}.comp-unit-items button:empty{display:none}
/* Keep equipment in a separate readable row, with hex clipping only on terrain. */
.planner-layout .hex-cell{clip-path:none;overflow:visible}
.planner-layout .hex-cell:before{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.planner-layout .hex-cell .piece-portrait{width:62%;left:19%;top:5%}
.planner-layout .hex-cell .piece-name{top:57%;bottom:auto;padding:2px 0;line-height:1.1;font-size:8px;z-index:3}
.planner-layout .plan-cell-items{top:74%;bottom:auto;gap:2px;z-index:5;height:22px;align-items:start}
.planner-layout .plan-cell-items img{width:22px;height:22px;max-width:29%;object-fit:contain;flex:none;border-radius:2px;box-shadow:0 1px 3px #0b1e26aa}
@media(max-width:680px){.planner-layout .hex-cell .piece-name{font-size:6px;top:53%}.planner-layout .plan-cell-items{top:73%;height:16px;gap:1px}.planner-layout .plan-cell-items img{width:16px;height:16px}.comp-units .comp-unit-items img{width:18px;height:18px}.comp-unit-items{gap:2px}}
.comp-units .comp-unit-stars{font-size:11px;line-height:12px;letter-spacing:1px;color:#8695a7}.comp-units .comp-unit-stars.stars-3{color:#bb8d24;text-shadow:0 1px #fff}.comp-actions button:disabled{opacity:.55;cursor:default;transform:none}.comp-units button{gap:4px}

/* Horizontal comp rows: existing visual language, source actions at the right. */
.comp-grid{grid-template-columns:minmax(0,1fr);gap:14px}
.comp-card{display:grid;grid-template-columns:210px minmax(0,1fr) 150px;grid-template-areas:"heading traits actions" "heading units actions" "source source source";column-gap:22px;row-gap:10px;padding:18px 20px;border-radius:16px;box-shadow:0 5px 22px #26445f0b}
.comp-card-heading{grid-area:heading;align-self:center;align-items:flex-start;gap:12px;min-width:0}
.comp-card h2{font-size:16px;line-height:1.5;margin-bottom:7px}
.comp-card-heading small{display:block;line-height:1.7}
.comp-tier{min-width:34px;height:34px;border-radius:9px;font-size:14px}
.comp-card[data-tier="S"] .comp-tier{background:#ffebe9;color:#b44952}
.comp-card[data-tier="A"] .comp-tier{background:#fff1d9;color:#946821}
.comp-card[data-tier="B"] .comp-tier{background:#e5f3ef;color:#34755e}
.comp-traits{grid-area:traits;gap:4px;align-self:end}
.comp-traits button{padding:4px 7px;font-size:10px;line-height:1.3;border-radius:5px}
.comp-units{grid-area:units;display:flex;gap:6px;align-items:flex-start;padding-top:13px}
.comp-unit{flex:1;max-width:68px;min-width:0;background:none;padding:0;border-radius:0;position:relative}
.comp-unit>button{padding:0 0 23px;background:none;border-radius:5px;display:flex;flex-direction:column;align-items:center;gap:0}
.comp-unit>button>img{width:100%;height:auto;aspect-ratio:1;max-width:58px;object-fit:cover;border:2px solid var(--comp-cost);border-radius:5px;box-sizing:border-box;box-shadow:0 2px 5px #20374d13}
.comp-unit .comp-unit-name{position:absolute;top:calc(100% + 1px);left:-3px;right:-3px;font-size:10px;line-height:1.3;white-space:normal;text-align:center;overflow-wrap:anywhere}
.comp-unit .comp-unit-stars{position:absolute;top:-13px;left:0;right:0;text-align:center;font-size:11px;line-height:12px;letter-spacing:0;color:#8493a4;pointer-events:none}
.comp-unit .comp-unit-stars.stars-3{color:#b88915;text-shadow:0 1px 0 #fff}
.comp-unit>button>b{top:auto;bottom:24px;right:2px;padding:1px 3px;font-size:8px;background:#173248db;color:white;border-radius:3px}
.comp-unit-items{position:absolute;bottom:1px;left:0;right:0;min-height:20px;gap:1px;align-items:center}
.comp-units .comp-unit-items button{flex:0 1 20px;min-width:0;max-width:calc((100% - 2px)/3);height:auto;aspect-ratio:1}
.comp-units .comp-unit-items img{width:100%;height:auto;aspect-ratio:1;border-radius:2px;display:block}
.comp-actions{grid-area:actions;align-self:center;display:flex;flex-direction:column;gap:8px;margin:0}
.comp-actions .primary,.comp-actions .secondary{width:100%;min-height:38px;padding:8px 10px;font-size:12px}
.comp-source{margin:0;padding:3px 6px}
.comp-source-label{grid-area:source;margin-top:22px;line-height:1.6}
.comp-no-gear{grid-area:source;justify-self:end;margin-top:22px}
.comp-card:has(.comp-no-gear) .comp-source-label{padding-right:110px}
#plan-position-status{font-size:12px;line-height:1.65;margin:10px 4px 16px;min-height:20px}
@media(max-width:1150px){.comp-card{grid-template-columns:180px minmax(0,1fr) 136px;column-gap:16px}.comp-units{gap:4px}.comp-card{padding:16px}.comp-card h2{font-size:15px}}
@media(max-width:1000px){.comp-card{grid-template-columns:175px minmax(0,1fr);grid-template-areas:"heading traits" "heading units" "actions actions" "source source"}.comp-actions{flex-direction:row;justify-content:flex-end;margin-top:22px}.comp-actions .primary,.comp-actions .secondary{width:auto}.comp-source-label,.comp-no-gear{margin-top:0}.comp-unit{max-width:62px}}
@media(max-width:680px){.comp-card{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "traits" "units" "actions" "source";row-gap:12px}.comp-card-heading{align-items:center}.comp-units{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:38px 10px;padding-top:15px}.comp-unit{max-width:none}.comp-unit>button>img{max-width:58px}.comp-unit-items{left:50%;transform:translateX(-50%);width:58px;max-width:100%}.comp-actions{margin-top:20px;justify-content:flex-start;gap:8px;flex-wrap:wrap}.comp-actions .primary,.comp-actions .secondary{flex:1;min-height:44px}.comp-card:has(.comp-no-gear) .comp-source-label{padding-right:0}.comp-no-gear{display:none}.comp-unit .comp-unit-name{font-size:10px}.comp-card h2{font-size:16px}}
@media(prefers-reduced-motion:reduce){.comp-grid button,.comp-grid a{transition:none}}
.planner-layout>.battle-surface{container-type:size}
.planner-layout .hex-board{flex:none;width:min(100%,calc((100cqh - 38px)*1.6238));margin:auto;max-width:540px}
.planner-layout .hex-row+.hex-row{margin-top:0}
.planner-layout .hex-cell .piece-portrait{width:52%;left:24%;top:4%}
.planner-layout .hex-cell .piece-name{top:50%;bottom:auto;font-size:8px;line-height:1;padding:2px 0}
.planner-layout .plan-cell-items{top:69%;bottom:auto;height:22px}
@media(max-width:680px){.planner-layout .hex-cell .piece-name{top:48%;font-size:6px}.planner-layout .plan-cell-items{top:69%;height:16px}}
.planner-selection .planner-roster .filter-row{grid-template-columns:minmax(100px,1fr) minmax(100px,140px) 90px;display:grid}
.planner-roster #plan-trait{min-width:0;width:100%;font-size:12px}
@media(max-width:1000px){.planner-selection .planner-roster .filter-row{grid-template-columns:minmax(0,1fr) 90px}.planner-roster #plan-search{grid-column:1/-1}}
.planner-layout .plan-cell-items img{width:22px;max-width:calc((100% - 4px)/3);height:auto;aspect-ratio:1;display:block}
@media(max-width:680px){.planner-layout .plan-cell-items img{width:16px;max-width:calc((100% - 2px)/3)}}
.comp-filters .comp-only-code{display:flex;align-items:center;flex:0 0 auto;min-width:0;gap:7px;height:44px;font-weight:400}.comp-only-code input{width:17px;height:17px}.comp-social-note{grid-column:1/-1;margin:0;color:#647d92;font-size:13px;line-height:1.8}.comp-view{margin-bottom:18px}.comp-filters select:disabled,.comp-only-code input:disabled{opacity:.45}
/* Restore interlocking hex rows while keeping labels and gear inside each unit. */
.planner-layout .hex-board{width:min(100%,calc((100cqh - 38px)*1.9985))}
.planner-layout .hex-row+.hex-row{margin-top:-3.8490017946%}
.planner-layout .hex-cell .piece-portrait{width:50%;left:25%;top:18%}
.planner-layout .hex-cell .piece-stars{top:6%}
.planner-layout .hex-cell .piece-name{top:57%;font-size:8px;line-height:1;padding:1px 0}
.planner-layout .plan-cell-items{top:70%;height:auto;gap:1px}
.planner-layout .plan-cell-items img{width:22px;max-width:24%;height:auto;aspect-ratio:1}
@media(max-width:680px){.planner-layout .hex-cell .piece-name{font-size:6px}.planner-layout .plan-cell-items img{width:18px;max-width:24%}}
.planner-drag-hint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:20;padding:7px 12px;border-radius:9px;background:#17392dec;color:#fff;font-size:12px;white-space:nowrap;pointer-events:none;box-shadow:0 3px 12px #142a2633}.planner-layout>.battle-surface.plan-removing{box-shadow:inset 0 0 0 2px #e4a19a}.plan-removing .planner-drag-hint{background:#873e35}
.planner-layout>.planner-hero-detail{overflow-y:auto;scrollbar-width:thin}.planner-hero-detail .plan-hero-description{flex:1 0 65px;max-height:110px}.planner-recommended{flex:none;margin-top:10px;order:10}.planner-recommended h4{display:flex;justify-content:space-between;gap:6px;margin:0 0 8px;font-size:12px;color:#355571}.planner-recommended h4 small{font-size:9px;color:#718599;font-weight:400}.planner-recommended-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.planner-recommended-list>div{min-width:0;display:grid;gap:4px}.planner-recommended-list button{padding:3px 0;border:0;border-radius:5px;background:#edf4fa;color:#355571;font-size:9px;min-width:0}.planner-recommended-list img{width:28px;height:28px;max-width:100%;object-fit:contain;display:block;margin:auto}.planner-recommended-list span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}.planner-recommended-list .recommend-equip{min-height:23px}.planner-recommended-list button:hover{background:#dbeafa}.planner-recommended-list button:disabled{opacity:.45}.planner-recommended-list button:focus-visible{outline:2px solid #1683dd;outline-offset:2px}
.planner-layout>.planner-hero-detail{padding:14px}.planner-hero-detail>h3{margin-bottom:8px}.planner-hero-detail #plan-hero-summary{margin-bottom:8px}.planner-hero-detail #plan-hero-summary>img{width:36px;height:36px}.planner-layout .planner-hero-detail #plan-equipped{grid-template-columns:repeat(3,36px);height:36px;min-height:36px;margin:6px 0 8px}.planner-hero-detail .equipment-slot{width:36px;height:36px}.planner-hero-detail .plan-hero-description{flex:1;min-height:38px}.planner-recommended{margin-top:8px}