:root{--purple:#087ee7;--lav:#eef6ff;--bg:#fff;--ink:#253748;--line:#e1e9f0}body{background:#fff;font-family:Arial,'Microsoft YaHei',sans-serif}[hidden]{display:none!important}.sidebar{transform:translateX(-100%);visibility:hidden;padding-top:76px;z-index:45;box-shadow:none;transition:transform .18s}.sidebar.open{transform:translateX(0);visibility:visible;box-shadow:8px 0 25px #0002}.workspace{margin-left:0;width:100%;background:#fff}.workspace>header{height:60px;background:#fff;padding:10px 20px;border:0}.workspace>header .crumb,.workspace>header .version-pill{display:none}#menu{display:block;position:relative;z-index:46;border:1px solid #666;border-radius:4px;background:#fff;color:#222;padding:8px 12px;font-size:14px;line-height:1.4;white-space:nowrap}.game-switch{margin-left:auto}.workspace>footer{display:none}.page-heading>.date-chip,.page-heading .eyebrow:empty{display:none}.page-heading h1{color:#087ee7;font-size:24px}.page-heading p{color:#708395}.panel{box-shadow:none;border:1px solid #dbe8f2;border-radius:8px}.tabs{border-color:#dbe8f2}.tabs button.active{color:#087ee7;border-color:#087ee7}.primary{background:#087ee7;box-shadow:none}.secondary{color:#306894;border-color:#b8d2e8;background:white}.training-workspace>header{padding:7px 20px}.training-main>.page-heading h1{font-size:20px}main#app:not(.training-main){max-width:1250px;margin:auto;width:100%;padding:20px 28px}.home-page main#app{max-width:640px;padding:12px 28px 24px}.home-training-link span{max-width:100%}.recipe-table-scroll{overflow:auto}.recipe-table{border-collapse:collapse;table-layout:fixed;min-width:1000px;width:100%;font-size:11px}.recipe-table th,.recipe-table td{text-align:center;padding:5px;border:1px solid #dfe8f0;vertical-align:middle;height:80px;width:85px}.recipe-table th{background:#f5f9fd;color:#52738f}.recipe-table img,.recipe-cell img{display:block;margin:auto;border-radius:5px}.recipe-table small{display:block;line-height:1.3;margin-top:4px;font-size:10px}.recipe-cell{border:0;background:none;color:#376184;padding:2px;width:100%;height:100%}.recipe-cell:hover{background:#e7f2ff}.recipe-detail{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:12px}.recipe-detail img{border-radius:5px}.equipment-quiz{max-width:900px;margin:auto}.equipment-question{display:flex;align-items:center;justify-content:center;gap:18px;margin:20px 0}.equipment-question>img{border-radius:9px}.equipment-question h3{margin:0;font-size:20px}.quiz-countdown{margin-left:auto;color:#087ee7;white-space:nowrap}.quiz-countdown b{font-size:30px;font-variant-numeric:tabular-nums}.component-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:15px 0}.component-option{border:1px solid #b7d6ef;border-radius:9px;background:#f8fbff;display:flex;flex-direction:column;align-items:center;gap:8px;padding:15px 5px;color:#285d86;font-size:12px}.component-option img{border-radius:5px}.component-option small{font-size:10px;color:#7893a8}.component-option.picked{background:#e3efff;border-color:#087ee7}.component-option.correct-component{background:#e1f3e6;border:2px solid #329557;opacity:1}.component-option.wrong-component{background:#ffe9e8;border-color:#d44;opacity:1}#equipment-answer .feedback img{vertical-align:middle}.feedback{color:#285e48;background:#eef8f1;border:1px solid #b9dfc6}.feedback.bad{color:#964c43;background:#fff2ed;border-color:#efc9be}.catalog-filters{display:flex;gap:5px;flex-wrap:wrap}.catalog-arena{padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important}.catalog-shop.shop{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:auto!important;padding:0!important;background:transparent;border:0;gap:10px}.catalog-shop .champ-card{height:190px!important;min-height:0;aspect-ratio:auto}.catalog-shop .champ-card>img{inset:0 0 25px;height:calc(100% - 25px);width:100%;object-fit:cover}.catalog-shop .champ-card .champ-name{height:25px;font-size:12px}.catalog-shop .champ-traits{bottom:31px!important}.catalog-shop .shop-trait b{font-size:10px}.augment-tier-section{margin-top:24px}.augment-tier-section>h2{font-size:17px}.augment-tier-section>h2>span{padding:5px 10px;border-radius:4px;margin-right:7px}.tier-1>h2>span{background:#b18b68;color:white}.tier-2>h2>span{background:#e6cc74;color:#604c10}.tier-3>h2>span{background:linear-gradient(120deg,#e0d2ff,#b8e9ef,#f7d4ea);color:#624d83}.augment-tier-section h2 small{font-size:12px;color:#8496a5}.augment-catalog-card{display:flex;gap:12px}.augment-catalog-card>img{width:44px;height:44px;object-fit:contain;flex:none}.augment-catalog-card h3{font-size:14px}.augment-catalog-card p{font-size:12px}.planner-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}.planner-tools label{display:flex;align-items:center;gap:6px;font-size:12px}.planner-tools input{max-width:180px}.planner-tools button{padding:8px 12px;font-size:12px}.planner-layout{display:grid;grid-template-columns:145px minmax(0,1fr) 250px;gap:14px;align-items:start}.planner-layout .battle-surface{padding:14px 10px 20px}.planner-layout .board-caption{font-size:10px;gap:4px;margin-bottom:15px}.planner-layout .board-caption>span+span{font-size:8px}.planner-layout .hex-board{margin:12px auto;width:100%;max-width:650px}.planner-traits h3,.planner-equipment h3{font-size:12px;color:#b8c7a2}.planner-traits .live-trait{font-size:9px}.planner-traits .trait-description b{font-size:10px}.planner-layout .piece-name{bottom:22%;font-size:8px}.planner-layout .piece-portrait{top:9%}.plan-cell-items{position:absolute;bottom:6%;left:0;right:0;display:flex;justify-content:center;gap:1px;pointer-events:none}.plan-cell-items img{width:14px;height:14px;border:1px solid #c3b06a}.planner-layout #selected-plan-hero{font-size:12px;color:#d2dbbf;display:flex;gap:7px;flex-wrap:wrap;align-items:center}.planner-layout #selected-plan-hero label{font-size:10px}.planner-layout #selected-plan-hero select{padding:4px;font-size:10px}.planner-equipment .filter-row{gap:5px;margin:12px 0}.planner-equipment .filter-row input,.planner-equipment .filter-row select{min-width:0;width:100%;font-size:10px;padding:6px;background:#fff}.planner-items{max-height:310px;overflow:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.planner-items button{border:1px solid #71825e;background:#233b2e;color:#c5d0b5;padding:4px;font-size:7px;display:flex;flex-direction:column;gap:3px;align-items:center}.planner-items img{width:30px;height:30px}.equipment-slot{width:44px;height:44px;background:#183126;border:1px solid #99a671;color:#d8d9a2;margin:10px 5px 0 0;padding:2px}.equipment-slot img{width:100%;height:100%;object-fit:contain}.planner-game-export{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:#6e7f8e;margin:12px 0}.planner-roster{margin-top:20px}#plan-output textarea{width:100%;max-width:100%;font-size:12px}#plan-output .inline-actions{margin-top:10px}
@media(max-width:1000px){.catalog-shop.shop{grid-template-columns:repeat(4,minmax(0,1fr))}.planner-layout{grid-template-columns:110px minmax(0,1fr)}.planner-equipment{grid-column:1/-1}.planner-items{grid-template-columns:repeat(10,minmax(0,1fr));max-height:140px}.planner-equipment .filter-row input,.planner-equipment .filter-row select{width:auto;flex:1}.planner-layout .battle-surface{min-width:0}}
@media(max-width:600px){main#app:not(.training-main){padding:16px}.home-page main#app{padding:15px 18px 24px}.workspace>header{padding:8px 14px;height:56px}.component-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.component-option{font-size:9px;padding:10px 3px;gap:5px}.component-option img{width:36px;height:36px}.component-option small{font-size:8px}.equipment-question{gap:10px}.equipment-question h3{font-size:16px}.equipment-question>img{width:56px;height:56px}.quiz-countdown b{font-size:23px}.quiz-countdown{font-size:10px}.catalog-shop.shop{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.catalog-shop .champ-card{height:150px!important}.catalog-shop .champ-name{font-size:10px!important}.catalog-shop .champ-traits{left:3px!important;gap:3px!important}.catalog-shop .shop-trait b{font-size:8px}.catalog-shop .shop-trait-icon{width:11px!important;height:11px!important;flex-basis:11px!important}.catalog-shop .shop-trait-icon img{width:11px!important;height:11px!important}.planner-layout{padding:10px;gap:7px;grid-template-columns:85px minmax(0,1fr)}.planner-layout .battle-surface{padding:7px 4px 12px;border-width:3px}.planner-layout .board-caption>span+span{display:none}.planner-items{grid-template-columns:repeat(6,minmax(0,1fr))}.planner-tools{gap:7px}.planner-tools button{font-size:10px;padding:7px}.planner-traits .trait-description>b{font-size:8px}.planner-traits .trait-badge{width:23px;height:25px;flex-basis:23px}.planner-traits .trait-tier-name{font-size:7px}.planner-layout .piece-name{font-size:6px}.plan-cell-items img{width:9px;height:9px}}

.training-workspace>header{height:52px}.sidebar{max-height:100dvh;overflow-y:auto}@media(max-width:680px){.training-workspace>header{height:48px}}
.planner-equipment{height:510px;min-height:510px;min-width:0;display:flex;flex-direction:column}.planner-equipment>h3{margin:0 0 8px;flex:none}.planner-layout #selected-plan-hero{height:36px;min-height:36px;flex:none;flex-wrap:nowrap}.planner-layout #selected-plan-hero>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.planner-layout #selected-plan-hero label,.planner-layout #selected-plan-hero button{flex:none;white-space:nowrap}.planner-layout #selected-plan-hero button{padding:6px 9px;font-size:10px}#plan-equipped{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:44px;gap:6px;align-items:stretch;flex:none;height:44px;min-height:44px;margin:10px 0 12px}.planner-equipment .equipment-slot{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:2px;vertical-align:top;box-sizing:border-box}.planner-equipment .equipment-slot img{display:block;width:100%;height:100%;object-fit:contain}.planner-equipment .filter-row{display:grid;grid-template-columns:minmax(0,1fr);flex:none;margin:0 0 10px;gap:6px}.planner-equipment .filter-row input,.planner-equipment .filter-row select{width:100%;height:30px}.planner-equipment .planner-items{flex:1;min-height:0;height:auto;max-height:none;align-content:start;grid-auto-rows:62px;overflow-anchor:none;scrollbar-gutter:stable}.planner-items button{min-width:0;overflow:hidden}.planner-items button>span{line-height:1.3;max-height:20px;overflow:hidden}.planner-traits{max-height:510px;overflow-y:auto;scrollbar-width:thin}.planner-layout .hex-cell.plan-drop-target{background:#c7ac4a66;box-shadow:inset 0 0 0 3px #ead37d}.planner-layout{overflow-anchor:none}@media(max-width:1000px){.planner-equipment{height:330px;min-height:330px}.planner-equipment .filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}.planner-traits{max-height:410px}.planner-equipment .planner-items{grid-auto-rows:62px}}
.planner-layout{grid-template-columns:145px minmax(0,1fr)}.planner-selection{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;border-top:1px solid #627359;padding-top:16px;margin-top:6px;min-width:0}.planner-selection .planner-equipment,.planner-selection .planner-roster{height:390px;min-height:390px;min-width:0;display:flex;flex-direction:column;margin:0}.planner-selection .planner-roster{border-left:1px solid #53644c;padding-left:20px}.planner-selection .planner-roster>h3{margin:0 0 12px;color:#b8c7a2;font-size:12px}.planner-selection .planner-roster .filter-row{display:grid;grid-template-columns:minmax(0,1fr) 94px;gap:6px;margin:0 0 10px;flex:none}.planner-selection .planner-roster .filter-row input,.planner-selection .planner-roster .filter-row select{height:30px;min-width:0;width:100%;font-size:10px;padding:6px}.planner-selection .planner-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(49px,1fr));grid-auto-rows:62px;align-content:start;gap:5px;flex:1;height:auto;max-height:none;min-height:0;overflow:auto;scrollbar-gutter:stable;overflow-anchor:none}.planner-selection .planner-items button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;height:62px;padding:4px;border:1px solid #71825e;background:#233b2e;color:#c5d0b5;font-size:8px;text-align:center;cursor:pointer}.planner-selection .planner-items img{display:block;width:30px;height:30px;object-fit:cover;flex:none}.planner-selection .planner-hero-tile{border-color:var(--unit-cost)!important}.planner-selection .planner-hero-tile img{border:1px solid var(--unit-cost)}.planner-selection .planner-hero-tile small{position:absolute;top:1px;right:2px;font-size:8px;line-height:12px;padding:0 2px;background:#10231f;color:#e9d68d}.planner-selection .planner-items button>span{font-size:8px;line-height:1.25;max-height:20px;overflow:hidden;max-width:100%}@media(max-width:1000px){.planner-layout{grid-template-columns:110px minmax(0,1fr)}.planner-selection .planner-equipment{grid-column:auto}.planner-selection .planner-equipment .filter-row{grid-template-columns:minmax(0,1fr)}}@media(max-width:600px){.planner-layout{grid-template-columns:85px minmax(0,1fr)}.planner-selection{gap:9px;padding-top:12px}.planner-selection .planner-roster{padding-left:9px}.planner-selection .planner-items{grid-template-columns:repeat(auto-fill,minmax(43px,1fr));gap:4px}.planner-selection .planner-roster .filter-row{grid-template-columns:minmax(0,1fr)}.planner-selection .planner-items button>span{font-size:7px}.planner-selection .planner-equipment,.planner-selection .planner-roster{height:420px;min-height:420px}}
.planner-selection .planner-equipment .filter-row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}.planner-selection .planner-equipment .filter-row input,.planner-selection .planner-equipment .filter-row select{min-width:0;width:100%;margin:0}

.data-card p{white-space:pre-line}
.wisp-catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:24px 16px;padding:18px 2px 8px;align-items:stretch}
.wisp-source{margin-bottom:8px}
.wisp-card{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;min-height:260px;padding:50px 18px 0;color:#eee4cf;background:radial-gradient(ellipse at 50% 0,#52432955,transparent 58%),linear-gradient(155deg,#2d251b,#1b1611 70%);border:2px solid #9a8054;border-radius:22px 22px 16px 16px;box-shadow:inset 0 0 0 2px #30271b,inset 0 0 18px #0009,0 3px 8px #30211420;transition:border-color 140ms ease,box-shadow 140ms ease}
.wisp-card:before{content:'';position:absolute;inset:5px;pointer-events:none;border:1px solid #b391525e;border-radius:17px 17px 11px 11px;z-index:-1}
.wisp-card:hover{border-color:#d5b77b;box-shadow:inset 0 0 0 2px #30271b,inset 0 0 18px #0009,0 3px 12px #30211430}
.wisp-emblem{position:absolute;top:-17px;left:50%;transform:translateX(-50%);width:72px;height:64px;display:grid;place-items:center;pointer-events:none}
.wisp-emblem img{display:block;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 2px 2px #0008)}
.wisp-card .wisp-effect{margin:0;padding:0 0 26px;font-size:14px;line-height:1.65;white-space:pre-line;color:#e1d5bf;text-shadow:0 1px 2px #0006;flex:1}
.wisp-card footer{display:flex;align-items:center;gap:8px;min-height:44px;margin:0 -10px;padding:8px 5px 10px;border-top:1px solid #a88b4c66;background:linear-gradient(90deg,transparent,#34403233,transparent)}
.wisp-card footer h3{flex:1;min-width:0;margin:0;color:#f3ead3;font-size:16px;line-height:1.35;font-weight:700;text-shadow:0 1px 2px #000}
.wisp-card .shop-price{font-size:15px;gap:5px;flex:none}.wisp-card .gold-coin{width:12px;height:9px}
@media(max-width:600px){.wisp-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 10px}.wisp-card{padding:44px 12px 0;min-height:240px}.wisp-card .wisp-effect{font-size:12px;padding-bottom:20px}.wisp-card footer{margin:0 -5px;gap:5px}.wisp-card footer h3{font-size:13px}.wisp-card .shop-price{font-size:13px}}
@media(prefers-reduced-motion:reduce){.wisp-card{transition:none}}
/* Home header controls share the inner-page control treatment. */
.home-page #menu{border:0;border-radius:10px;box-shadow:0 2px 8px #25456216;min-height:36px}
.home-page .game-switch{border:0;background:#f1f5fa;box-shadow:none;border-radius:10px;padding:4px}
.home-page .game-switch button{border-radius:7px;min-height:32px}
.home-page .game-switch button.selected{box-shadow:0 3px 9px #244a6a16;background:#fff;color:#087ee7}
.home-page #menu,.home-page .game-switch button{touch-action:manipulation;transition:background-color 160ms ease,color 160ms ease,box-shadow 220ms cubic-bezier(.22,1,.36,1),transform 160ms cubic-bezier(.22,1,.36,1)}
.home-page #menu:active,.home-page .game-switch button:active{transform:scale(.97);transition-duration:70ms}
.home-page #menu:focus-visible,.home-page .game-switch button:focus-visible{outline:3px solid #087ee7;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.home-page #menu,.home-page .game-switch button{transition:none}}

/* Reserve scrollbar space before dynamic content overflows. */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}}

.hero-skill{white-space:pre-line;line-height:1.7}

/* Reserve scrollbar space on every scrolling surface, including nested arenas. */
:where(html,main#app.training-main,.sidebar,.settings-content,#roll-traits,.pool-scroll,.planner-items,#plan-traits,.plan-hero-description,.recipe-table-scroll,#help-dialog,.equipment-popover){scrollbar-gutter:stable}
html{scrollbar-gutter:stable}
.workspace{min-width:0}
main#app.training-main{width:100%;min-width:0;scrollbar-gutter:stable}
.training-main .tactics-layout,.training-main>.tactics-arena{min-width:0}
@supports not (scrollbar-gutter:stable){
html,main#app.training-main,.settings-content,#roll-traits,.pool-scroll,.planner-items,#plan-traits,.plan-hero-description{overflow-y:scroll}
}
.table-wrap,.trait-panel,.arena-traits:not(:has(#roll-traits)),.training-main .pool-details[open]{scrollbar-gutter:stable}