/* 2026-10-27: submit-play and hero-single play-banner, adapted from rpx. */
:root{color-scheme:dark;--orange:#ff9a50;--muted:#b3bbcd;--rpx:.8px}*{box-sizing:border-box}body{margin:0;background:#0d0e15;color:#f5f5fa;font:15px/1.6 'STKaiti','KaiTi','楷体','Microsoft YaHei',sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit;border:0;transition:opacity .12s,transform .12s}button:active{transform:scale(.97)}button:disabled{cursor:default;opacity:.6}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #ffb077;outline-offset:4px}input,select,textarea{background:#111524;color:#fff;border:1px solid #ffffff35;border-radius:9px;padding:10px 12px;outline:0}input:focus,textarea:focus{border-color:#ffb077}textarea{width:100%;resize:vertical;min-height:80px}input::placeholder,textarea::placeholder{color:#a0a3b1}h1,h2,p{margin:0}h2{font-size:21px}.sp-page-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#07091166,#0a0d1899);filter:brightness(.7)}.topbar{height:66px;background:#111524b3;backdrop-filter:blur(18px);border-bottom:1px solid #ffffff20;display:flex;justify-content:space-between;align-items:center;padding:0 max(24px,calc((100vw - 910px)/2))}.brand{color:#ffc49a;font-size:21px;font-weight:700;white-space:nowrap}.topbar nav{display:flex;gap:24px;height:100%}.nav-button{background:transparent;font-size:16px;color:#c7cad8;border-bottom:2px solid transparent}.nav-button.active{color:#ffb077;border-color:#ff9a50}main{max-width:930px;margin:0 auto;padding:24px 24px 120px}.type-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:22px}.type-tabs button{background:#25314fa6;border:1px solid #ffffff24;padding:9px 30px;border-radius:30px;font-size:17px;color:#d0d4e2}.type-tabs button.selected{color:#ffd9bf;border-color:#ffb077;background:#9c4b2366}.ios16-glass{background:rgba(46,58,92,.55);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(15px)}.contrib-hint{margin:0 7px 14px;padding:18px 22px;border-radius:15px}.contrib-hint h1{font-size:22px;font-weight:700;color:#ffb077;letter-spacing:1px;margin-bottom:5px}.contrib-hint p{font-size:15px;line-height:1.7;color:#ffffffd1}.hero-select{display:flex;align-items:center;justify-content:space-between;padding:0 9px 16px}.hero-button{display:flex;align-items:center;gap:10px;background:#242e4966;border:1px solid #ffffff30;border-radius:10px;padding:7px 12px;font-size:15px;text-align:left}.hero-button img{width:34px;height:34px;border-radius:50%}.hero-button small{display:block;font-size:11px;color:#c3c9dc}.hero-button b{font-size:13px;margin-left:14px}.hero-placeholder{font-size:20px;color:#ffb077}.text-button{background:none;color:#d0d7e7;font-size:13px;padding:5px 9px}.text-button:hover{color:#ffb077}.sp-banner-snap{margin:0 2px}.play-banner{padding:calc(28 * var(--rpx)) calc(28 * var(--rpx)) calc(24 * var(--rpx));border-radius:calc(36 * var(--rpx));background:linear-gradient(180deg,#151a2c 0%,#111524 45%,#0d1020 100%);color:#ffffffeb;box-shadow:inset 0 0 0 1.5px #becde899,inset 0 1.5px 0 #ecf3ffe6,0 0 20px #96b4ff4d,0 0 50px #7896dc29,0 6px 18px #0008;position:relative;overflow:hidden;min-height:300px}.play-banner-innerline{position:absolute;inset:calc(8 * var(--rpx));border:1px solid #b4c4e159;border-radius:calc(28 * var(--rpx));z-index:3;pointer-events:none}.play-banner-head{position:relative;z-index:2;display:flex;align-items:center;margin-bottom:calc(20 * var(--rpx))}.play-banner-hero{display:flex;align-items:center;gap:calc(14 * var(--rpx));flex:1;min-width:0}.play-banner-hero-avatar{width:calc(88 * var(--rpx));height:calc(88 * var(--rpx));border-radius:50%;overflow:hidden;background:#2a2b3d;border:1.5px solid #785ab473;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center}.play-banner-avatar-img{position:absolute;width:110%;height:110%;top:50%;left:50%;transform:translate(-50%,-50%);object-fit:cover}.play-banner-hero-sublabel{font-size:calc(28 * var(--rpx));color:#ffb077;white-space:nowrap;font-weight:700}.play-banner-hero-name{background:transparent;font-size:calc(31 * var(--rpx));line-height:1.5;text-align:left;word-break:break-all;color:#ffe0be;min-width:0;padding:4px 0;font-weight:700}.play-banner-row{display:flex;align-items:center;margin-top:calc(14 * var(--rpx));padding-top:calc(14 * var(--rpx));border-top:1px solid #ffffff29;position:relative;z-index:2;width:100%;background:transparent;text-align:left}.play-banner-row-label{display:inline-block;width:calc(34 * var(--rpx));padding:calc(4 * var(--rpx)) 0;margin-right:calc(8 * var(--rpx));align-self:center;border-radius:calc(16 * var(--rpx));background:#ff7a1fe0;color:#fff;font-size:calc(22 * var(--rpx));line-height:1.3;font-weight:700;text-align:center;flex-shrink:0;letter-spacing:1px;word-break:break-all}.play-banner-row-label.is-optional{background:#4d5a74e0}.play-banner-row-label .row-req{font-style:normal;font-size:calc(13 * var(--rpx));font-weight:400;letter-spacing:0;opacity:.95}.play-banner-row-items{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;column-gap:calc(6 * var(--rpx));row-gap:calc(22 * var(--rpx));padding:6px 0}.play-banner-chip{display:flex;flex-direction:column;align-items:center;width:calc(76 * var(--rpx));position:relative}.play-banner-chip-touch{background:transparent;padding:0;display:flex;flex-direction:column;align-items:center;width:100%}.play-banner-chip-img-wrap{width:calc(60 * var(--rpx));height:calc(60 * var(--rpx));border-radius:28%;position:relative;background:#0006;border:1.5px solid #d4af37;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px #0005;overflow:hidden}.play-banner-chip-img-wrap img{width:100%;height:100%;border-radius:20%;object-fit:contain}.play-banner-chip-name{margin-top:calc(4 * var(--rpx));font-size:calc(14 * var(--rpx));color:#e8eef5;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 4px #0008}.play-banner-skill-key{position:absolute;bottom:0;right:0;background:#000a;color:#fff;font:700 12px/1.3 system-ui;padding:0 3px}.play-banner-add-text{font-size:calc(23 * var(--rpx));color:#ffb077;background:#ff7a1f14;border-radius:9px;padding:8px 14px;border:1px dashed #ff7a1f60;margin:5px}.chip-controls{display:flex;margin-top:4px;opacity:0;transition:opacity .15s}.play-banner-chip:hover .chip-controls,.play-banner-chip:focus-within .chip-controls{opacity:1}.chip-controls button{background:#0a102099;font-family:system-ui;font-size:12px;padding:0 4px;color:#ccd5e5}.play-banner-principle-text{flex:1;min-width:0;font-size:calc(22 * var(--rpx));line-height:1.7;color:#ffffffeb;white-space:pre-wrap;word-break:break-all;text-shadow:0 1px 2px #0006}.placeholder{color:#ffffff73}.play-banner-row-principle{padding-bottom:9px;min-height:65px}.sp-author-row{margin:18px 7px 0;padding:18px 21px;border-radius:15px;display:flex;align-items:center;width:calc(100% - 14px);text-align:left}.sp-author-label{font-size:18px;font-weight:700;color:#ffb077;margin-right:17px;white-space:nowrap}.sp-author-req{font-style:normal;font-size:12px;font-weight:400;color:#ffb077;border:1px solid #ff9a5066;border-radius:6px;padding:1px 7px;margin-left:8px}.sp-author-value{flex:1;font-size:18px}.sp-author-arrow{color:#ffffff80;font-size:25px;line-height:1}.draft-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 10px;font-size:11px;color:#c0c8dc}.submit-bar{position:fixed;right:max(24px,calc((100vw - 910px)/2));bottom:0;display:flex;align-items:center;gap:18px;padding:20px 8px calc(20px + env(safe-area-inset-bottom));pointer-events:none;z-index:10}.submit-bar>span{font-size:14px;color:#ffe0be;text-shadow:0 1px 4px #000b}.submit-fab{pointer-events:auto;padding:17px 40px;border-radius:99px;background:linear-gradient(135deg,#ff7a1f,#ff9a50);color:#fff;font-size:22px;font-weight:700;letter-spacing:2px;border:1px solid #ffb077;box-shadow:0 6px 20px #ff7a1f8c}footer{text-align:center;font-size:12px;color:#b0bacd;margin:30px 0 10px}.muted,.hint{color:#b3bbcd;font-size:13px}.hint{font-size:12px;margin:8px 0 15px}.primary,.secondary{padding:10px 18px;border-radius:8px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:15px}.primary{background:linear-gradient(135deg,#ff7a1f,#ff9a50);color:#fff}.secondary{background:#2e3a5b;color:#e4e8f3;border:1px solid #ffffff35}.full{width:100%}dialog{color:#f5f5fa;background:#151e33eb;backdrop-filter:blur(25px);border:1px solid #bdcce099;border-radius:22px;width:min(850px,94vw);max-height:88vh;padding:25px;box-shadow:0 0 30px #96b4ff4d,0 30px 80px #0009}dialog::backdrop{background:#050715b3;backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.eyebrow{font-size:12px;color:#ffb077;margin-bottom:5px}.close{font-size:25px;background:transparent;color:#ced6e8}.search{width:100%;margin-bottom:12px}.filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.filters button{background:#25324a;padding:5px 11px;border-radius:20px;color:#c4ccdc;font-size:12px;border:1px solid #ffffff26}.filters button.selected{color:#ffbc8c;border-color:#ff9a50;background:#57331b}.pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;max-height:43vh;overflow:auto;padding:2px;align-content:start}.pool-button{background:#202c45;border:1px solid #43516a;border-radius:9px;padding:10px 5px;position:relative;display:flex;flex-direction:column;align-items:center;gap:5px}.pool-button:hover{background:#334057;border-color:#ffb077}.pool-button.selected{border-color:#ff9a50;background:#49311f}.pool-button.selected:after{content:'✓';position:absolute;right:6px;top:2px;color:#ffbc8c}.pool-button img{height:46px;width:46px;border-radius:28%;border:1px solid #d4af37}.pool-button span{font-size:12px}.pool-button small{font-size:11px;color:#bac4d5}.dialog-foot{display:flex;justify-content:flex-end;gap:12px;margin-top:18px;border-top:1px solid #ffffff29;padding-top:17px}.deck-content{position:relative;z-index:2}.deck-head{display:flex;gap:9px;align-items:center;margin:17px 0 10px}.deck-head input{font-size:16px;padding:7px;width:200px}.deck-head select{font-size:13px;width:85px;padding:7px}.deck-head .text-button{font-size:11px}.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:12px 8px}.equipment-slot{border:none;border-radius:0;padding:0;background:transparent;min-height:0;text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px}.equipment-slot:hover img{border-color:#ffb077}.equipment-slot img{width:56px;height:56px;aspect-ratio:auto;border-radius:26%;border:1.5px solid #d4af37a0;object-fit:cover;display:block;margin:0;background:#0b1220}.equipment-slot small{display:block;font-size:11.5px;line-height:1.35;color:#e8eef5;overflow-wrap:anywhere;max-width:100%;text-shadow:0 1px 3px #0008}.equipment-slot em{position:absolute;color:#ffd767;right:1px;top:-6px;font-size:14px;font-style:normal}
.empty-plus{width:56px;height:56px;border:1.5px dashed #d4af37a0;border-radius:26%;display:flex;align-items:center;justify-content:center;font-size:22px;color:#ffb077;line-height:1}.slot-number{position:absolute;left:1px;top:-4px;font-size:9.5px;color:#a8b5cf}.deck-add{margin-top:15px;width:100%;padding:11px;background:#ff7a1f14;border:1px dashed #ff7a1f70;color:#ffb077;border-radius:10px;font-size:15px}.slot-choices{display:flex;gap:12px;align-items:center;margin:10px 0}.slot-choices button{min-width:100px;border:1px solid #526078;background:#253044;border-radius:10px;padding:9px}.slot-choices button.selected{border-color:#ffb077;color:#ffb077}.slot-choices img{width:35px;height:35px;display:block;margin:auto}.slot-note{display:flex;align-items:center;gap:12px;margin:10px 0}.slot-note input[type=checkbox]{width:auto}.slot-note input:not([type=checkbox]){flex:1;min-width:0}.slot-note label{font-size:14px}.slot-toolbar{display:flex;flex-wrap:wrap;gap:8px}#preview{width:min(920px,94vw)}#previewCard button:disabled{opacity:1}#previewCard .chip-controls,#previewCard .play-banner-add-text,#previewCard .deck-add,#previewCard .deck-remove{display:none}#handoff{max-width:480px;text-align:center}.code{letter-spacing:8px;font-size:38px;color:#ffb077;padding:20px 0;font-weight:700}#handoffStatus{font-size:14px;color:#a8dec4}.play-edit-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.play-edit-header h2{font-size:21px;color:#ffb077}.play-edit-header button{font-size:17px;color:#ffb077}#editDialog{max-width:620px}#editCount{text-align:right}#toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:#32394ff5;border:1px solid #ffffff40;color:#fff;max-width:90vw;padding:12px 24px;border-radius:12px;font-size:14px;box-shadow:0 5px 30px #0006;opacity:0;pointer-events:none;transition:opacity .2s;z-index:99}#toast.show{opacity:1}.history-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:20px 0}.history-head h2{font-size:23px}.history-card{border:1px solid #b4c4e159;background:#111524cc;border-radius:20px;padding:24px;margin-bottom:16px}.history-card h3{margin:5px 0;font-size:22px;color:#ffd9b7}.history-status{float:right;border:1px solid #ff9a50;border-radius:8px;padding:3px 10px;color:#ffb077;font-size:13px}.history-body{color:#d3d9e7;font-size:15px;white-space:pre-wrap}.history-empty{border:1px dashed #68799c;padding:45px;text-align:center;border-radius:18px;color:#bdc7db}.safe-note{color:#ffd6c0;background:#67362b44;border-radius:8px;padding:10px}[hidden]{display:none!important}
@media(max-width:600px){:root{--rpx:.55px}body{font-size:13px}.topbar{height:54px;padding:0 18px}.brand{font-size:18px}.topbar nav{gap:20px}.nav-button{font-size:15px}main{padding:18px 10px 110px}.type-tabs{margin-bottom:14px}.type-tabs button{font-size:15px;padding:7px 24px}.contrib-hint{padding:13px 15px;margin:0 2px 12px;border-radius:13px}.contrib-hint h1{font-size:18px}.contrib-hint p{font-size:13px}.hero-select{padding:0 3px 12px}.hero-button{font-size:13px}.hero-button small{font-size:10px}.hero-button img{height:28px;width:28px}.play-banner{min-height:250px}.play-banner-hero-name{font-size:19px}.play-banner-hero-sublabel{font-size:17px}.play-banner-add-text{font-size:14px}.play-banner-row-label{font-size:13px;width:21px}.play-banner-row-label .row-req{font-size:9px}.play-banner-principle-text{font-size:14px}.play-banner-chip{width:50px}.play-banner-chip-name{font-size:10px}.play-banner-chip-img-wrap{height:38px;width:38px}.chip-controls{opacity:1}.play-banner-skill-key{font-size:10px}.sp-author-row{padding:14px;margin:14px 2px 0;width:calc(100% - 4px)}.sp-author-label,.sp-author-value{font-size:15px}.sp-author-req{font-size:10px;padding:0 6px}.draft-tools{flex-direction:column;align-items:flex-start;gap:5px;font-size:10px;margin:14px 4px}.draft-tools button{font-size:11px;padding-left:0;margin-right:15px}.submit-bar{right:12px;left:12px;gap:9px;justify-content:flex-end;padding:12px 0 calc(14px + env(safe-area-inset-bottom))}.submit-fab{padding:13px 26px;font-size:18px}.submit-bar>span{font-size:11px}.deck-grid{gap:5px}.equipment-slot{min-height:0;border-radius:0;padding:0}.equipment-slot img{width:48px;height:48px}.equipment-slot small{font-size:10px}.slot-number{font-size:8px}.empty-plus{width:48px;height:48px;font-size:19px}.deck-head{gap:6px}.deck-head input{font-size:14px;width:130px}.deck-head select{font-size:11px;width:70px}.deck-head .text-button{font-size:11px}.deck-add{font-size:13px}.pool{grid-template-columns:repeat(3,minmax(0,1fr))}.pool-button span{font-size:11px}.slot-choices{gap:6px}.slot-choices button{min-width:85px;padding:7px;font-size:12px}.slot-choices small{font-size:10px}.slot-note{flex-wrap:wrap}.slot-note label{font-size:12px}dialog{padding:18px}#handoff .code{font-size:30px;letter-spacing:5px}footer{font-size:10px;padding:0 20px}}

/* ===== 2026-10-27 装备格编辑弹窗（不做副装备）
   结构：标题 → 清空本格/前移后移 → 已选槽位区（宽屏每行 12 格、窄屏 6 格 + 行末清空本行）
        → 搜索 → 双栏（左侧属性竖排复选 | 右侧装备库）→ 完成选择 */
/* 弹窗给确定高度而不是只给 max-height：flex 子项（尤其装备库）靠它分配真实高度，
   否则容器高度靠内容撑、滚动区拿不到确定尺寸，图标懒加载会判断成「不在视口」而不加载 */
#picker.picker-slot[open]{display:flex;flex-direction:column;width:min(1000px,96vw);height:min(880px,92vh);max-height:92vh;overflow:hidden;gap:10px}
#picker.picker-slot .dialog-head{margin-bottom:0}

/* —— 已选槽位区 —— */
.slot-section{display:flex;flex-direction:column;gap:9px;flex:0 0 auto}
.slot-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px}
.slot-head-title{font-size:15px;font-weight:700;color:#fff;letter-spacing:1px}
.slot-head-count{font-size:13px;font-weight:700;color:#ffb077}
.slot-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:7px 10px;border-radius:12px;background:#ffffff0a;border:1px solid #ffffff1a}
.slot-tools{display:flex;flex-wrap:wrap;gap:1px;margin-left:auto}
.slot-tools button{background:transparent;font-size:13px;color:#b9c3d6;padding:5px 8px;border-radius:8px;white-space:nowrap}
.slot-tools button:hover{color:#ffb077;background:#ff9a5014}
.slot-rows{display:flex;flex-direction:column;gap:12px;flex:0 1 auto;min-height:76px;max-height:32vh;overflow:auto;padding:10px 6px 4px}
.slot-row{display:flex;align-items:stretch;gap:10px}
.slot-row-items{flex:1;min-width:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.slot-cell{position:relative;aspect-ratio:1;min-width:0;border-radius:10px;background:#0e1626;border:1.5px dashed #ffffff26;display:flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;transition:border-color .12s,box-shadow .12s,transform .12s,background .12s}
.slot-cell:hover{border-color:#ffb07799}
.slot-cell.filled{border-style:solid;border-color:#d4af3759;background:#141d2f}
.slot-cell.selected{border:2px solid #ff9d4a;background:#ff9d4a1a;box-shadow:0 0 12px #ff9d4a59;transform:translateY(-1px)}
.slot-cell.drop{border-color:#ff9d4a;background:#ff9d4a2e}
.slot-cell>img{width:100%;height:100%;border-radius:10px;object-fit:cover;display:block;pointer-events:none}
.slot-cell .slot-star{position:absolute;left:4px;top:0;font-size:13px;color:#ffd767;font-style:normal;text-shadow:0 1px 3px #000;pointer-events:none}
.slot-idx{font-size:12px;font-weight:700;color:#ffffff3d;letter-spacing:1px}
.slot-del{position:absolute;top:-8px;right:-8px;width:20px;height:20px;padding:0;border-radius:50%;background:#ff3c3ce6;border:1.5px solid #ffffff80;color:#fff;font:700 11px/1 system-ui;display:flex;align-items:center;justify-content:center;z-index:2;cursor:pointer;opacity:0;transition:opacity .12s}
.slot-cell:hover .slot-del,.slot-cell.selected .slot-del{opacity:1}
.slot-clear-row{flex:0 0 38px;align-self:stretch;padding:2px;border-radius:9px;background:#ff3c3c1f;border:1.5px solid #ff3c3c66;color:#ff8a8ae6;font-size:10px;line-height:1.35;font-weight:700;cursor:pointer}
.slot-clear-row:hover{background:#ff3c3c4d;color:#fff}
.slot-note{display:flex;align-items:center;gap:12px;margin:0}
.slot-note label{display:flex;align-items:center;gap:6px;font-size:13px;color:#dbe2f0;white-space:nowrap;cursor:pointer}
.slot-note label b{color:#ffd767;font-weight:700;font-size:14px}
.slot-note input[type=checkbox]{appearance:auto;width:16px;height:16px;margin:0;padding:0;border:0;border-radius:3px;accent-color:#ff7a1f;cursor:pointer}
.slot-note input:not([type=checkbox]){flex:1;min-width:0;padding:8px 12px;font-size:13px;border-radius:9px}

/* —— 双栏：左属性筛选（竖排复选）+ 右装备库 —— */
.picker-main{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-height:210px}
#picker.picker-slot .picker-main{flex-direction:row;align-items:stretch}
.attr-wrap{flex:0 0 auto;min-height:0}
#picker.picker-slot .attr-wrap{width:212px;flex:0 0 212px;display:flex;flex-direction:column;gap:6px;min-height:0;padding:10px;box-sizing:border-box;border:1px solid #ffffff1f;border-radius:12px;background:#0f1728}
.attr-head{display:none;align-items:center;justify-content:space-between;padding:0 2px 6px;border-bottom:1px solid #ffffff14}
#picker.picker-slot .attr-head{display:flex}
.attr-head span{font-size:13.5px;color:#b6c0d2;font-weight:700}
.attr-clear{background:#ff8a3d1f;border:1px solid #ff8a3d4d;color:#ff9d4a;font-size:12.5px;padding:4px 12px;border-radius:99px;cursor:pointer}
#picker.picker-slot #filters{flex:1 1 auto;min-height:0;overflow:auto;flex-direction:column;flex-wrap:nowrap;gap:1px;margin:0;padding-right:2px}
#picker.picker-slot #filters button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 7px;border:0;border-radius:8px;background:transparent;font-size:14px;color:#ccd4e4;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#picker.picker-slot #filters button::before{content:'';flex:0 0 17px;width:17px;height:17px;border-radius:5px;border:2px solid #ffffff59;box-sizing:border-box;transition:background .12s,border-color .12s}
#picker.picker-slot #filters button:hover{background:#ffffff0f}
#picker.picker-slot #filters button.selected{color:#ff9d4a;font-weight:700;background:#ff9a501f}
#picker.picker-slot #filters button.selected::before{background:#ff7a1f;border-color:#ff7a1f}
.picker-pool{flex:1 1 auto;min-width:0;min-height:190px;display:flex;flex-direction:column}
.picker-pool .hint{flex:0 0 auto;margin:0 0 6px}
#picker.picker-slot .pool{flex:1 1 auto;min-height:160px;max-height:none;grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}

@media(max-width:820px){
  #picker.picker-slot .picker-main{flex-direction:column}
  #picker.picker-slot .attr-wrap{width:100%;flex:0 0 auto}
  #picker.picker-slot #filters{flex-direction:row;flex-wrap:wrap;overflow:visible;gap:5px}
  #picker.picker-slot #filters button{width:auto;padding:4px 10px;border:1px solid #ffffff26;border-radius:99px}
  #picker.picker-slot #filters button::before{display:none}
  .slot-rows{max-height:none}
  .slot-row-items{gap:6px}
  .slot-tools{margin-left:0}
  .slot-tools button{font-size:12px;padding:4px 6px}
}

/* 矮屏（笔记本 768 高这类）压缩槽位区与双栏的保底高度，避免把底部「完成选择」挤出可视区 */
@media(max-height:780px){
  #picker.picker-slot{height:min(760px,94vh)}
  .slot-rows{min-height:56px;max-height:26vh}
  .picker-main{min-height:150px}
  .picker-pool{min-height:130px}
}

/* ===== 2026-10-29 英雄选择器职业分类条
   对齐小程序 pages/hero-list 的「综合/坦克/战士/法师/刺客/射手/辅助」：搜索框下方一排胶囊，
   选中态用与 .filters 一致的橙色描边（同一个视觉 token，不引入新色）。
   只占自身高度（flex:0 0 auto），矮屏时压缩纵向间距，避免挤出底部「完成选择」。 */
.cat-bar{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 10px;flex:0 0 auto}
.cat-bar[hidden]{display:none}
.cat-bar button{background:#25324a;padding:5px 12px;border-radius:20px;color:#c4ccdc;font-size:12.5px;border:1px solid #ffffff26;line-height:1.5;white-space:nowrap}
.cat-bar button:hover{background:#334057;border-color:#ffb07799}
.cat-bar button.selected{color:#ffbc8c;border-color:#ff9a50;background:#57331b;font-weight:700}
.cat-bar small{margin-left:5px;font-size:11px;font-weight:400;opacity:.62;font-variant-numeric:tabular-nums}
@media(max-height:780px){
  .cat-bar{margin-bottom:7px}
  .cat-bar button{padding:4px 10px;font-size:12px}
}
@media(max-width:600px){
  .cat-bar{gap:5px;margin-bottom:8px}
  .cat-bar button{padding:4px 10px;font-size:12px}
}

/* 2026-10-30 投稿权益说明卡片：放在编辑器最上方，不抢卡片的视觉但一眼能看到 */
.benefit-card {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(24, 32, 52, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.benefit-card[hidden] { display: none; }
#inviteBanner {
  background: linear-gradient(135deg, rgba(61, 49, 22, 0.9), rgba(26, 34, 54, 0.85));
  border-color: rgba(201, 162, 74, 0.5);
}
.benefit-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(246, 223, 176, 0.72);
  text-transform: uppercase;
}
.benefit-main {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #ffe9a8;
}
.benefit-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.75;
  color: rgba(226, 234, 248, 0.82);
}
.benefit-list li { margin: 0 0 4px; }
.benefit-list b { color: #ffe9a8; font-weight: 600; }