@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');
:root{font-family:'Noto Sans SC','Microsoft YaHei',sans-serif;color:#f4e9d5;background:#10131c;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 48% -15%,#46352b 0,#1c1b23 36%,#10131c 70%)}button,select{font:inherit}button{cursor:pointer}.shell{max-width:1640px;margin:auto;padding:0 28px}.masthead{height:77px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #53483a}.brand{display:flex;align-items:center;gap:12px}.brand-gem{display:grid;place-items:center;width:42px;height:42px;border:2px solid #b99a60;transform:rotate(45deg);background:#292032;color:#e8bd69;font-size:24px;box-shadow:0 0 20px #b7894b55}.brand-gem::first-letter{transform:rotate(-45deg)}.brand div{display:flex;flex-direction:column}.brand small{font-size:11px;letter-spacing:.28em;color:#b49b77}.brand strong{font-size:20px;letter-spacing:.12em;color:#f3dbab}.mast-note{font-size:12px;letter-spacing:.13em;color:#a8a5a2}.intro{padding:47px 0 35px;max-width:960px}.eyebrow{margin:0 0 8px;color:#d2a569;font-size:11px;font-weight:800;letter-spacing:.25em}.intro h1{font-size:clamp(27px,3vw,42px);line-height:1.3;margin:0 0 14px;color:#fff5dd;letter-spacing:.035em}.intro>p:last-child{line-height:1.85;color:#b8b2a9;font-size:14px;margin:0}.workspace{display:grid;grid-template-columns:285px minmax(0,1fr);gap:18px;align-items:start}.panel{background:linear-gradient(145deg,#25232a,#1a1c23);border:1px solid #6b543b;border-radius:14px;box-shadow:0 18px 50px #06080db3, inset 0 1px #ffffff16}.source-panel{padding:19px;position:sticky;top:15px}.panel-title{display:flex;align-items:center;gap:12px}.step{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid #9e7b50;color:#ebc388;font-family:Georgia,serif;font-size:13px}.panel-title small,.sim-kicker{display:block;color:#a6967e;font-size:11px;letter-spacing:.14em}.panel-title h2{margin:1px 0 0;font-size:19px;color:#f4ddaf}.source-list{display:grid;gap:7px;margin-top:18px;max-height:860px;overflow:auto;padding-right:2px}.source-item{width:100%;display:flex;align-items:center;gap:11px;padding:7px;border:1px solid transparent;border-radius:9px;background:#2e2b2d;color:#ddd4c5;text-align:left;transition:.2s}.source-item:hover{background:#3c3530;border-color:#856540}.source-item.active{background:#503a2e;border-color:#c99954;box-shadow:inset 0 0 0 1px #e7c17e55}.source-item img{width:43px;height:55px;object-fit:contain}.source-name{font-size:13px;font-weight:700}.source-class{font-size:11px;color:#baa88d;margin-top:3px}.simulator{padding:22px 24px 20px}.sim-head{display:flex;justify-content:space-between;gap:18px;align-items:start}.sim-head>div:first-child{position:relative;padding-left:42px}.sim-head .step{position:absolute;left:0;top:0}.sim-head h2{font-size:23px;margin:2px 0 5px;color:#ffe6b6}.sim-head p{margin:0;color:#d0c3b5;font-size:13px;line-height:1.6}.sim-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.sim-controls label{color:#cbb899;font-size:12px}.sim-controls select{background:#201e23;color:#f8dfaf;border:1px solid #8b6b42;border-radius:7px;padding:8px 9px;max-width:135px}.gold-button,.outline-button{border-radius:8px;padding:9px 15px;font-weight:800;font-size:12px;letter-spacing:.05em;white-space:nowrap}.gold-button{color:#271910;background:linear-gradient(#f5d48d,#c89248);border:1px solid #e5b86c;box-shadow:inset 0 1px #fff4c0,0 3px 10px #0009}.gold-button:hover{filter:brightness(1.12)}.outline-button{color:#f5d7a6;background:#262126;border:1px solid #9a754a}.pool-stats{display:flex;gap:8px;flex-wrap:wrap;margin:17px 0 6px}.pool-stats span{font-size:11px;color:#b9aa95;padding:5px 9px;border:1px solid #554838;border-radius:100px;background:#191b20}.notice{padding:10px 13px;background:#392a27;color:#ffd0ae;border:1px solid #ad6e51;border-radius:7px;font-size:12px;margin-top:12px}.assembly-stage{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:15px;align-items:stretch;margin-top:18px;padding:20px 18px 18px;border:1px solid #8f4439;border-radius:14px;background:radial-gradient(circle at 50% 18%,#5a4d43 0,#2b2628 48%,#1b1b20 100%);box-shadow:inset 0 0 0 4px #301d20,inset 0 0 26px #0a0707}.stage-label{text-align:center;text-transform:uppercase;color:#d0aa75;font-size:11px;font-weight:700;letter-spacing:.11em}.stage-slot{min-width:0;display:flex;justify-content:center}.card{width:100%;max-width:280px;min-height:398px;position:relative;display:flex;flex-direction:column;padding:9px 10px 11px;color:#2a211c;border-radius:14px;border:3px solid #a1875f;background:linear-gradient(115deg,#c2a77a,#e9d8ae 40%,#9f865f 100%);box-shadow:0 7px 0 #4b3424,0 12px 18px #060403be,inset 0 0 0 2px #f5d8a1}.card.primary{max-width:325px;min-height:438px;border-color:#9ca7ae;background:linear-gradient(110deg,#4b5e69,#8999a4 40%,#35434b 100%);box-shadow:0 7px 0 #222b30,0 12px 24px #000c,inset 0 0 0 2px #d8e0dc}.card-head{height:206px;position:relative;overflow:hidden;border-radius:9px 9px 55% 55%;border:3px solid #796447;background:radial-gradient(circle,#877c75,#322c32)}.primary .card-head{height:228px;border-color:#526a75}.card-art{width:100%;height:100%;object-fit:cover;object-position:center 27%;display:block}.card-art.missing{display:none}.card-head:has(.missing)::after{content:'✦';position:absolute;inset:0;display:grid;place-items:center;color:#d2ba8d;font-size:85px;opacity:.35}.mana{position:absolute;top:5px;left:6px;width:42px;height:46px;display:grid;place-items:center;background:linear-gradient(135deg,#52b8f5,#063c9d 65%);border:3px solid #c0d7ed;box-shadow:0 2px 3px #001b4c;color:white;clip-path:polygon(50% 0,93% 18%,100% 64%,50% 100%,0 64%,7% 18%);font:900 29px Georgia,serif;text-shadow:2px 2px #00284d}.card-name{position:relative;margin:-15px 17px 3px;z-index:1;text-align:center;background:linear-gradient(#d9ba73,#977146);border:2px solid #5d472e;border-radius:40px;min-height:30px;padding:3px 5px;font-size:14px;font-weight:800;box-shadow:0 2px 5px #0009}.primary .card-name{background:linear-gradient(#c6cbd0,#727e87);border-color:#3f4e55}.card-meta{display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;color:#564335;min-height:18px}.card-text{flex:1;display:flex;flex-direction:column;gap:7px;padding:9px 6px 4px}.fragment{display:grid;place-items:center;flex:1;min-height:49px;padding:7px 9px;text-align:center;line-height:1.45;font-size:12px;font-weight:700;border:2px solid #b99157;border-radius:7px;background:linear-gradient(#f0e3c5,#e2ceaa);box-shadow:inset 0 0 0 2px #f9efd8}.primary .fragment{background:linear-gradient(#49545a,#252d33);border-color:#52616a;color:#f4e9d7;box-shadow:inset 0 0 0 2px #1e2529}.fragment-button{width:100%;color:#2a211c;cursor:pointer;transition:transform .15s,background .15s}.fragment-button:hover:not(:disabled){transform:scale(1.035);background:#fff0b5;border-color:#dca54f}.fragment-button:disabled{opacity:.46;cursor:not-allowed}.pick-hint{display:block;margin-top:3px;font-size:10px;color:#916638;font-weight:800}.card-stats{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.stat{width:34px;height:34px;display:grid;place-items:center;border:2px solid #4c3c30;border-radius:50%;color:white;font:900 22px Georgia,serif;text-shadow:1px 2px #34251d;background:linear-gradient(135deg,#deb13d,#865524)}.stat.health{background:linear-gradient(135deg,#e4593e,#801d1c)}.rarity-dot{width:13px;height:13px;transform:rotate(45deg);border:2px solid #e9dbbb;background:#8690a3}.rarity-dot.史诗{background:#a947c7}.rarity-dot.稀有{background:#328ec7}.rarity-dot.传说{background:#df9d24}.stage-footer{display:flex;justify-content:space-between;align-items:center;color:#aba092;font-size:11px;margin:17px 5px 0}.text-button{background:none;border:0;color:#eac083;font-weight:800;padding:5px}.text-button:hover{text-decoration:underline}.result-panel{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:20px 24px;margin-top:18px}.result-panel[hidden]{display:none}.result-panel .panel-title{min-width:170px}.result-content{flex:1;color:#f2e2cb;font-size:13px}.result-content strong{color:#ffdba5;font-size:17px}.result-content p{margin:6px 0}.result-content small{color:#a89a89}.result-actions{display:flex;gap:8px;flex-wrap:wrap}.method{margin:18px 0 20px;padding:22px 25px}.method h2{margin:0;color:#ead7b5;font-size:20px}.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-top:15px}.method-grid p{margin:0;padding-left:13px;border-left:2px solid #8e6944;color:#aea79f;font-size:12px;line-height:1.8}.method-grid b{color:#e9c795}.data-note{font-size:11px;color:#887f73;margin:20px 0 0;border-top:1px solid #4a4038;padding-top:12px}footer{padding:7px 0 28px;color:#827b74;text-align:center;font-size:11px}footer a{color:#c59b6d}@media(max-width:1200px){.workspace{grid-template-columns:235px minmax(0,1fr)}.card{min-height:370px}.card.primary{min-height:410px}.card-head{height:170px}.primary .card-head{height:190px}.assembly-stage{gap:9px;padding:15px 12px}.method-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:850px){.shell{padding:0 12px}.workspace{display:block}.source-panel{position:static;margin-bottom:12px}.source-list{display:flex;max-height:none;overflow-x:auto}.source-item{flex:0 0 145px}.sim-head{flex-direction:column}.sim-controls{justify-content:flex-start}.assembly-stage{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"center-label center-label" "primary primary" "left-label right-label" "left right";overflow:visible}.label-left{grid-area:left-label}.label-center{grid-area:center-label}.label-right{grid-area:right-label}#left-card{grid-area:left}#primary-card{grid-area:primary}#right-card{grid-area:right}.primary-slot{margin-bottom:14px}.result-panel{display:block}.result-content{margin:14px 0}.method-grid{grid-template-columns:1fr}.mast-note{display:none}.intro{padding:30px 0 25px}}@media(max-width:520px){.simulator{padding:15px 10px}.assembly-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"center-label" "primary" "left-label" "left" "right-label" "right"}.card{min-height:355px}.card.primary{min-height:390px}.card-head{height:155px}.primary .card-head{height:175px}.stage-footer{align-items:flex-start;gap:10px}}
.card.primary.assembled{border-color:#edc478;box-shadow:0 7px 0 #48351d,0 0 26px #f6c87875,inset 0 0 0 2px #fff0c9}
.mobile-source{display:none}
.component-kind{display:inline-block;margin:auto;color:#503b29;background:#ead7ae;border:1px solid #af8b54;border-radius:999px;padding:3px 12px;font-size:11px;font-weight:800}
@media(max-width:520px){
  .source-panel{padding:13px 15px}
  .source-panel .panel-title h2{font-size:16px}
  .source-list{display:none}
  .mobile-source{display:block;width:100%;margin-top:12px;padding:11px 13px;border:1px solid #ab8651;border-radius:8px;background:#2d2523;color:#f5d6a7;font-weight:700}
  .stage-slot:not(.primary-slot) .card{max-width:none;min-height:0;display:grid;grid-template-columns:78px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 8px;padding:8px}
  .stage-slot:not(.primary-slot) .card-head{grid-column:1;grid-row:1/3;width:78px;height:108px;border-radius:8px}
  .stage-slot:not(.primary-slot) .card-name{grid-column:2;grid-row:1;margin:0;min-height:25px;font-size:12px}
  .stage-slot:not(.primary-slot) .card-meta,.stage-slot:not(.primary-slot) .card-stats{display:none}
  .stage-slot:not(.primary-slot) .card-text{grid-column:2;grid-row:2;padding:0;gap:4px}
  .stage-slot:not(.primary-slot) .fragment{min-height:45px;padding:5px 6px;font-size:12px;line-height:1.3}
  .stage-slot:not(.primary-slot) .pick-hint{font-size:9px;margin-top:2px}
  .stage-slot:not(.primary-slot) .mana{width:30px;height:32px;font-size:18px;border-width:2px}
  .label-right{margin-top:6px}
}

/* Keep the rendered card beneath the two choice panels, as on the game board. */
.card{height:420px;min-height:0;padding:9px 10px 52px;overflow:hidden}
.card.primary{height:460px;max-width:307px;min-height:0}
.full-card-image{position:absolute;z-index:3;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.card.has-full-render{border-color:transparent;background:transparent;box-shadow:none}
.card.has-full-render .card-head,.card.has-full-render .card-name,.card.has-full-render .card-text,.card.has-full-render .card-meta,.card.has-full-render .card-stats{visibility:hidden}
.card.has-full-render .card-fragments{top:44%;bottom:12%;left:8%;right:8%}
.card.primary.has-full-render .card-fragments{top:44%;bottom:12%}
.card-head{height:53%;flex:none}
.primary .card-head{height:53%}
.card-name{flex:none}
.card-text{flex:1;display:block;min-height:0;padding:10px 13px;text-align:center;font-size:12px;line-height:1.45;background:#e6d4af;border:2px solid #a4875d;border-radius:8px;color:#382b21}
.primary .card-text{background:#424a4c;border-color:#687780;color:#eee4d1}
.card-meta{flex:none;padding-top:3px}
.card-stats{position:absolute;z-index:6;left:10px;right:10px;bottom:8px;margin:0;min-height:35px}
.card.type-weapon .stat.health{background:linear-gradient(135deg,#d2a24c,#76614b)}
.card-fragments{position:absolute;z-index:5;top:42%;bottom:12%;left:5%;right:5%;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.card-fragments .fragment{display:flex;justify-content:center;align-items:center;flex:1 1 0;min-height:0;overflow:auto;padding:5px 7px;font-size:11.5px;line-height:1.35;box-shadow:0 2px 7px #17100bc9,inset 0 0 0 2px #f9efd8}
.card-fragments .fragment-button{pointer-events:auto}
.card-fragments .pick-hint{font-size:9px;margin-top:2px}
.primary .card-fragments{top:42%;bottom:11%}
.primary .card-fragments .fragment{font-size:12px}
.card.type-spell .fragment,.card.type-hero .fragment{border-color:#8875a7;background:linear-gradient(#e8e0ee,#d2c5e3)}
.card.type-weapon .fragment{border-color:#9d866b;background:linear-gradient(#eee1cb,#d9c4a6)}
.card.type-spell .component-kind,.card.type-hero .component-kind{background:#ddd0e9;border-color:#9884b0}
.card.primary.assembled{border-color:#9ca7ae;box-shadow:0 7px 0 #222b30,0 12px 24px #000c,inset 0 0 0 2px #d8e0dc}
.card.primary.assembled.has-full-render{border-color:transparent;box-shadow:none}
.card-fragments .fragment-button.selected{border-color:#f7cb69;box-shadow:0 0 0 2px #f9df8d,0 0 15px #ffd269b0,inset 0 0 0 2px #fff6dc}
.card-fragments .fragment-button.selected .pick-hint{color:#684218}
.primary .card-fragments .fragment.replaced{pointer-events:auto;cursor:pointer;color:#2a211c;background:linear-gradient(#f0e3c5,#e2ceaa);border-color:#d4aa68;box-shadow:0 0 0 2px #f9df8d,0 0 15px #ffd269a0,inset 0 0 0 2px #fff3d4}
.primary .card-fragments .fragment.replaced.from-spell,.primary .card-fragments .fragment.replaced.from-hero{background:linear-gradient(#e8e0ee,#d2c5e3);border-color:#8875a7;color:#352743}
.primary .card-fragments .fragment.replaced.from-weapon{background:linear-gradient(#eee1cb,#d9c4a6);border-color:#9d866b}
.restore-hint{display:block;margin-top:2px;font-size:9px;color:#916638;font-weight:800}
.primary .card-fragments .fragment.replaced:hover{filter:brightness(1.08)}
.gold-button:disabled{opacity:.7;cursor:wait}
.notice.loading{background:#302b25;color:#f4d49e;border-color:#8e7650}
.assembly-stage.loading{opacity:.72;pointer-events:none}
.sim-controls .class-label{color:#cbb899;font-size:12px}
.sim-controls .fixed-class{color:#f8dfaf;font-weight:700;font-size:13px;padding:8px 2px}
#class-select[hidden],#fixed-class[hidden]{display:none}
.method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:850px){.method-grid{grid-template-columns:1fr}}
@media(max-width:520px){
  .stage-slot:not(.primary-slot) .card{display:flex;flex-direction:column;grid-template-columns:none;grid-template-rows:none;gap:0;max-width:280px;height:420px;min-height:0;padding:9px 10px 52px}
  .stage-slot:not(.primary-slot) .card-head{grid-column:auto;grid-row:auto;width:auto;height:53%;border-radius:9px 9px 55% 55%}
  .stage-slot:not(.primary-slot) .card-name{grid-column:auto;grid-row:auto;margin:-15px 17px 3px;min-height:30px;font-size:14px}
  .stage-slot:not(.primary-slot) .card-meta,.stage-slot:not(.primary-slot) .card-stats{display:flex}
  .stage-slot:not(.primary-slot) .card-text{grid-column:auto;grid-row:auto;display:block;flex:1;padding:10px 13px}
  .stage-slot:not(.primary-slot) .fragment{min-height:0;padding:5px 7px;font-size:11.5px;line-height:1.35}
  .stage-slot:not(.primary-slot) .mana{width:42px;height:46px;font-size:29px;border-width:3px}
  .card.primary{height:450px}
}
