:root{font-family:'Microsoft JhengHei',system-ui,sans-serif;color:#253d31;background:#eee9dc}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:1px solid #b8bea8;background:#f8f5e9;border-radius:6px;min-height:40px;padding:8px 12px}button:disabled{cursor:default;opacity:.48}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b88739;outline-offset:2px}[hidden]{display:none!important}.app{height:100dvh;max-width:1100px;margin:auto;display:flex;flex-direction:column;overflow:hidden}.top{padding:16px 22px 10px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.brand{display:flex;gap:12px;align-items:center}.seal{background:#8b4937;border:1px solid #aa7056;outline:1px solid #8b4937;outline-offset:2px;color:#fff2d8;font:18px/1.2 serif;writing-mode:vertical-rl;letter-spacing:3px;padding:5px}.brand small{font-size:9px;letter-spacing:2px;color:#7a836d}.brand h1{font:600 23px/1.3 'PMingLiU','Songti TC',serif;letter-spacing:2px;margin:3px 0}.top>button{width:38px;min-height:38px;border-radius:50%;font-size:21px;background:transparent;padding:0}.modebar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 20px 9px}.segmented{display:flex;background:#dfE3d5;border-radius:6px;padding:3px}.segmented button{min-height:30px;font-size:12px;padding:4px 18px;border:0;background:none}.segmented .active{background:#2d503b;color:#f9efd3}.modebar>span{font-size:11px;color:#7d826c}.resources{display:flex;justify-content:space-between;gap:8px;padding:9px 22px;border-top:1px solid #d2d3bf;border-bottom:1px solid #d2d3bf;font-size:11px}.resources b{font-size:15px;font-weight:500;margin-left:5px}.resources small{color:#8c917c;font-size:10px}main{flex:1;min-height:0;overflow:auto;padding:16px 20px;scrollbar-width:thin}h2{font:600 22px/1.4 'PMingLiU','Songti TC',serif;margin:0 0 8px}h3{font-size:15px;margin:0 0 8px}p{font-size:13px;line-height:1.75;margin:8px 0;color:#64725d}.eyebrow{font-size:10px;letter-spacing:3px;color:#8f7a4e}.hero{position:relative;min-height:245px;overflow:hidden;border:1px solid #b7bda3;border-radius:4px 4px 24px 4px;padding:22px;background:linear-gradient(150deg,#d5d6bc,#c4cdb4 52%,#8da28b);isolation:isolate}.hero:before,.hero:after{content:'';position:absolute;z-index:-1;bottom:-90px;left:-50px;width:340px;height:210px;background:#768f75;border-radius:48% 64% 0 0;transform:rotate(-12deg)}.hero:after{background:#425e47;left:150px;bottom:-110px;width:380px;transform:rotate(10deg)}.hero h2{font-size:32px;font-weight:500;line-height:1.5;letter-spacing:4px;margin:13px 0}.hero p{font-size:11px;max-width:230px}.flag{position:absolute;right:25px;top:30px;border-left:3px solid #756546;padding-left:7px;height:125px}.flag span{display:block;padding:12px 8px 22px;background:#824e37;color:#fceac3;font:30px serif;clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%)}.hero small{position:absolute;bottom:17px;left:22px;color:#f5ead0;letter-spacing:2px}.primary{display:block;width:100%;background:#294e38;color:#fff0d5;border-color:#294e38;text-align:left;padding:14px 17px;margin:14px 0 10px}.primary strong{font-size:20px;font-weight:500;letter-spacing:2px}.primary small{display:block;font-size:11px;color:#ccdac0;margin-top:5px}.panel{background:#f8f4e8;border:1px solid #c9ceb7;border-radius:8px;padding:14px;margin:12px 0}.panel small{color:#7a846b}.row{display:flex;align-items:center;gap:8px;justify-content:space-between}.row h2{margin:0}.small{font-size:11px}.muted{color:#7c856f}.quiet{border:0;background:none;padding:5px 0;font-size:12px;text-decoration:underline}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.two button{text-align:left;padding:14px}.two strong{display:block;font-weight:500}.two small{font-size:10px;display:block;margin-top:5px}.factions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:12px 0}.factions button{font-size:13px;padding:7px 2px;min-width:0}.factions .active{background:#2b5039;color:#fff1d0;border-color:#2b5039}.subtabs{display:flex;gap:6px;align-items:center;margin:10px 0}.subtabs button{min-height:32px;font-size:12px;padding:4px 12px}.subtabs .active{background:#d9dcc7;border-color:#8d9d7e}.search{width:100%;padding:10px;background:#faf7ed;border:1px solid #c4cbb4;border-radius:6px;margin:5px 0 12px;color:#283e2e}.collection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.officer{position:relative;min-width:0;min-height:94px;padding:12px 6px 7px;border:1px solid #121b14;box-shadow:inset 0 0 0 3px #fffdf2,inset 0 0 0 4px #121b14;background:var(--quality,#67bbc0);border-radius:7px}.nameplate{display:block;max-width:100%;width:76px;margin:3px auto;background:#fff;border:1px solid #000;color:#000;white-space:nowrap;text-align:center;font:400 17px/1.7 'PMingLiU',serif;padding:1px 2px}.officer small{display:block;font-size:10px;line-height:1.4;color:#253828;margin-top:7px}.notice{padding:10px 12px;background:#e5e8d7;border-left:3px solid #8b9d75;font-size:12px;line-height:1.7;margin:10px 0}.formation{display:flex;align-items:center;justify-content:space-between;gap:8px}.formation select{min-width:0;max-width:65%;background:#f8f5e8;border:1px solid #a3b193;border-radius:5px;padding:7px}.slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:17px 0}.slot{grid-column:span 2;min-height:98px;padding:7px 3px;min-width:0;border:1px dashed #9ca98b;background:#e5e8d8;touch-action:manipulation}.slot:nth-child(1){grid-column:2/span 2}.slot:nth-child(2){grid-column:4/span 2}.slot:nth-child(6){grid-column:1/span 3}.slot:nth-child(7){grid-column:4/span 3}.slot.required{border:1px solid #9c834c;background:#efe6cf}.slot small{font-size:10px;display:block}.slot .plus{font:28px serif;display:block;color:#899a7b}.slot .nameplate{width:calc(100% - 8px);font-size:16px}.slot.drag-over{outline:3px solid #b38338}.slot.selected{outline:3px solid #476c4b}.slots .slot[draggable=true]{cursor:grab}.metrics{display:grid;gap:7px;font-size:12px}.metrics div{display:flex;justify-content:space-between;gap:8px}.actions{display:flex;gap:8px;margin:15px 0}.actions button{flex:1}.confirm{background:#2d523a;color:#fff0d2;border-color:#2d523a}.journey-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.journey-grid button{min-height:110px;text-align:left;background:#e0e6d4}.journey-grid strong{font:32px serif;display:block}.journey-grid small{font-size:11px;display:block;margin-top:6px}.boxlist{display:grid;grid-template-columns:1fr 1fr;gap:12px}.boxlist button{min-height:120px;text-align:left}.box-icon{font:28px serif;color:#96733d;display:block;margin-bottom:10px}.intro{text-align:center;padding:18px 0}.intro h2{font-size:30px;margin:18px 0}.intro .big-seal{display:grid;place-items:center;width:84px;height:84px;border:1px solid #8f754a;outline:1px solid #b6aa82;outline-offset:5px;margin:20px auto;font:42px serif;color:#8b4b35;background:#e7dcc0}.intro .primary{text-align:center}.intro .choice{padding:16px;border:1px solid #c0c7af;border-radius:8px;margin-top:14px;background:#f8f4e7}.intro .choice button{width:100%}.steps{display:flex;gap:5px;margin:16px 0}.steps span{flex:1;height:5px;background:#cdd4bc}.steps .done{background:#426448}.tutorial-card{text-align:center;padding:25px 12px;background:#dce4cf;border:1px solid #bac8a8;border-radius:12px;margin:18px 0}.tutorial-card .nameplate{font-size:26px;width:105px}.tutorial-card p{font-size:14px}.bottom-note{font-size:10px;text-align:center;color:#8a907c}nav{display:flex;flex-shrink:0;background:#faf7ec;border-top:1px solid #ccd0ba;padding:6px 10px;gap:5px}nav button{flex:1;border:0;background:none;font-size:11px;min-height:52px;padding:5px}nav span{display:block;font:21px serif;margin-bottom:4px}nav button.active{background:#e4e9d7;color:#2d5136}.preview-label{flex-shrink:0;background:#faf7ec;color:#8a907d;text-align:center;font-size:9px;padding:0 5px 5px}dialog{width:min(410px,calc(100% - 24px));max-height:85dvh;overflow:auto;border:1px solid #a8b18e;background:#f7f2e4;color:#283c2d;border-radius:12px;padding:17px}dialog::backdrop{background:#12251bc9}dialog header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}dialog header h2{font-size:21px;margin:0}dialog header button{font-size:24px;border:0;background:none;min-width:40px;padding:0}dialog .collection{grid-template-columns:repeat(3,minmax(0,1fr))}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stats div{background:#e4e9d8;padding:9px;text-align:center;font-size:12px}.stats b{display:block;font-size:22px;font-weight:500}.danger{background:#8d4938;color:#fff0d8;border-color:#8d4938}.wide{width:100%}#toast{position:fixed;bottom:90px;left:20px;right:20px;padding:12px;background:#243f30;color:#fff4d9;z-index:10;border-radius:6px;font-size:13px;text-align:center}@media(min-aspect-ratio:3/2){.top{padding:8px 20px}.brand h1{font-size:19px}.brand small{font-size:8px}.seal{font-size:14px}.modebar{position:absolute;right:85px;top:14px;padding:0}.modebar>span{display:none}.resources{padding:5px 22px;justify-content:flex-start;gap:32px}main{padding:12px 22px}.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.hero{min-height:240px}.hero h2{font-size:28px}.home-right .primary{margin-top:0}.home-right .panel{margin:8px 0}.collection{grid-template-columns:repeat(6,minmax(0,1fr))}.intro{max-width:700px;margin:auto;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.intro>header{grid-row:span 3}.intro .big-seal{margin:14px auto}.intro h2{font-size:26px}.intro .choice{margin-top:4px;padding:10px}.intro .primary{margin-top:0}.intro>p.bottom-note{grid-column:1/-1}.team-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}.slots{margin:10px 0;gap:7px}.slot{min-height:75px}.slot .plus{font-size:20px}.boxlist,.journey-grid{grid-template-columns:repeat(4,minmax(0,1fr))}nav{padding:3px 10px}nav button{min-height:34px}nav span{display:inline;margin-right:8px;font-size:17px}.preview-label{font-size:8px}.tutorial-wrap{max-width:680px;margin:auto}.tutorial-card{margin:10px 0;padding:12px}}@media(max-width:370px){main{padding:12px}.top{padding:12px}.brand h1{font-size:20px}.collection{gap:6px}.nameplate{font-size:15px;width:70px}.slot .nameplate{font-size:14px}.factions button{font-size:12px}.modebar{padding-left:12px;padding-right:12px}}
:root .hero:before{height:110px;bottom:-65px}
:root .hero:after{height:100px;bottom:-65px}
@media(min-aspect-ratio:3/2){.home-right .primary{padding:10px 15px;margin-bottom:7px}.home-right .primary strong{font-size:18px}.home-right .primary small{margin-top:3px}.home-right .panel{padding:10px;margin:7px 0}.home-right .panel p{margin:4px 0;font-size:12px}.home-right .metrics{gap:4px;font-size:11px}.home-right .two button{padding:9px 12px;min-height:50px}.home-right .bottom-note{margin:5px 0;font-size:9px}}

.intro .big-seal{font-size:30px;letter-spacing:2px;white-space:nowrap}

.training-active .top,.training-active .resources,.training-active .preview-label{display:none}.training-active #content{padding:0;overflow:hidden}.training-active #tutorialFrame{display:block;width:100%;height:100%;border:0}

/* 五將可選前二後三或前三後二；末排兩職位固定。 */
.slots.layout-322 .slot:nth-child(1){grid-column:1/span 2}
.slots.layout-322 .slot:nth-child(2){grid-column:3/span 2}
.slots.layout-322 .slot:nth-child(3){grid-column:5/span 2}
.slots.layout-322 .slot:nth-child(4){grid-column:2/span 2}
.slots.layout-322 .slot:nth-child(5){grid-column:4/span 2}

.gm-tools{display:flex;flex-wrap:wrap;gap:5px;align-items:center}.gm-tools button{font-size:12px;padding:5px 8px}.gm-preview{display:block;width:100%;height:calc(100% - 115px);min-height:460px;border:1px solid #9ca98b;border-radius:8px}#gmError{color:#9a3430}

.officer.locked-officer{background:#e4e5db;border-color:#adb4a2}.officer.locked-officer small{color:#68705f}.officer.locked-officer .nameplate{background:#f1f1e9;color:#56604f}

/* GM 教學作為完整頁面切換，不在內容區內再縮一層。 */
.gm-testing>.top,.gm-testing>.resources,.gm-testing>.preview-label{display:none}.gm-testing #content{display:flex;flex-direction:column;padding:0;overflow:hidden}.gm-testing .gm-tools{flex:0 0 auto;padding:5px 8px;border-bottom:1px solid #c9ceb7;background:#e5e8d8;gap:5px}.gm-testing .gm-tools b{font-size:11px;margin-right:auto}.gm-testing .gm-tools button{min-height:28px;padding:3px 6px;font-size:11px}.gm-testing .gm-preview{flex:1 1 0;min-height:0;height:0;width:100%;border:0;border-radius:0}

#content progress{width:100%;height:8px;border:0;border-radius:4px;overflow:hidden;accent-color:#48694c}#content progress::-webkit-progress-bar{background:#dddccb}#content progress::-webkit-progress-value{background:#48694c}

.reward-badge{display:inline-block;border-radius:12px;background:#8a482e;color:#fff8e9;font-size:12px;padding:2px 8px}.reward-tabs{display:flex;gap:6px}.reward-tabs button{flex:1;min-width:0;padding:8px 4px}

/* 開箱獎勵沿用字卡庫造型，紀錄獨立捲動。 */
.chest-rewards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0 20px}.reward-card{display:flex;align-items:center;justify-content:center;min-height:126px;padding:24px 12px}.reward-card .nameplate{width:100%;max-width:120px;font-size:24px}.fragment-mark{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:25px;height:25px;border:1px solid #695538;border-radius:4px;background:#faf1d9;color:#4e3920;font-size:17px;box-shadow:0 1px 3px #0003}.reward-caption{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px;font-size:12px}.reward-caption b{font-size:18px;font-weight:500}.reward-notes{border-top:1px solid #d2d3bf;padding-top:8px}.reward-notes p{margin:4px 0}.shop-section-title{margin:24px 0 12px}.chest-history{max-height:300px;max-height:min(300px,42dvh);overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;padding-right:7px;scrollbar-width:thin;scrollbar-color:#9aa78b #e5e8d8}.chest-history .panel:first-child{margin-top:0}.chest-history .panel:last-child{margin-bottom:0}.chest-history:focus-visible{outline:2px solid #8b9d75;outline-offset:3px}

/* 主城：草地、城池與植栽背景，保留可讀文字區。 */
.hero{min-height:300px;background:#c4cdb4 url('./主城草地背景-v1.png') center bottom/cover no-repeat}.hero::before,.hero::after{display:none}.hero h2{position:relative;z-index:1;text-shadow:0 1px 8px #f5f1dc99}.hero>p{position:relative;z-index:1;max-width:65%;color:#405b49;background:#eee9dcbd;border-radius:4px;padding:3px 6px;margin-left:-6px}.hero>small{color:#fff7df;background:#294333cc;padding:4px 8px;border-radius:4px;left:16px;bottom:12px}.hero .flag{top:22px;right:22px;height:110px}.hero .flag span{font-size:28px}@media(min-aspect-ratio:3/2){.hero{min-height:290px}}

/* 旗桿落在城樓屋頂，不懸空。 */
.hero .flag{top:auto;bottom:44%;right:22px;height:110px}


.officer-skills{margin-top:20px}.officer-skills h3{font-size:18px;margin:0 0 10px}.officer-skills article{padding:12px 0;border-top:1px solid #c8cdb8}.officer-skill-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.officer-skill-title small{color:#77816a;white-space:nowrap}.officer-skills article p{margin:8px 0 0;line-height:1.8;overflow-wrap:anywhere}

.bag-item{display:flex;align-items:center;gap:14px;width:100%;text-align:left}.bag-item-mark{display:grid;place-items:center;width:48px;height:56px;border:2px solid #a58b58;border-radius:6px;background:#ebe0bd;font-size:26px;flex-shrink:0}.bag-item>span:nth-child(2){flex:1}.bag-item strong,.bag-item small{display:block}.bag-item small{margin-top:7px;line-height:1.6}.bag-item>b{white-space:nowrap}

.officer-meta{display:flex;align-items:center;gap:10px;justify-content:space-between}.officer-meta p{flex:1;min-width:0}.officer-equipment-button{flex-shrink:0;white-space:nowrap;padding:5px 10px;min-height:34px}.equipment-top{display:flex;justify-content:space-between;align-items:center}.equipment-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:15px 0}.equipment-slot{min-height:110px;min-width:0;background:#e8ebd9;padding:12px 8px}.equipment-slot b,.equipment-slot span,.equipment-slot small{display:block}.equipment-slot b{font-size:18px}.equipment-slot span{margin:12px 0 8px;overflow-wrap:anywhere}.equipment-slot small{font-size:11px;color:#798169}.equipment-options{display:grid;gap:8px;margin:14px 0;max-height:45dvh;overflow:auto}.equipment-options button{text-align:left;overflow-wrap:anywhere}.equipment-filters{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.equipment-filters button{padding:5px 10px;min-height:34px}.equipment-filters .active{background:#d9dcc7;border-color:#8d9d7e}.weapon-filter{display:flex;align-items:center;gap:12px;margin:12px 0}.weapon-filter select{padding:8px;border:1px solid #abb496;border-radius:5px;background:#faf5e7;color:inherit;font:inherit}.bag-equipment-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.bag-equipment{text-align:left;padding:14px;min-width:0;overflow-wrap:anywhere}.bag-equipment strong,.bag-equipment small{display:block}.bag-equipment small{font-size:12px;color:#77816a;margin-top:8px}

.officer-combat-info{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:10px 12px;margin:0 0 14px;background:#e9ecdd;border-left:3px solid #94a581;font-size:13px;line-height:1.6}.officer-combat-info b{font-weight:normal;color:#31523c}

.equipment-compare{display:grid;gap:7px;margin-top:10px;font-size:14px;line-height:1.6}.equipment-power{display:inline-block;font-size:14px;font-variant-numeric:tabular-nums}.equipment-power.higher{color:#b3322d}.equipment-power.lower{color:#245eac}.equipment-power.equal{color:#73736b}.equipment-slot .equipment-power{margin:0 0 6px}.bag-equipment>.equipment-power{margin-top:8px}