:root{color-scheme:dark;--bg:#171317;--panel:#211b20;--ink:#f0e6d5;--muted:#b6a797;--gold:#d7b47e;--line:#d7b47e32;--serif:'Noto Serif CJK SC','Songti SC',SimSun,Georgia,serif;--sans:'Noto Sans CJK SC','Microsoft YaHei',system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 65% 0,#38242c77,transparent 46%),var(--bg);color:var(--ink);font:14px/1.65 var(--sans)}button,input,select{font:inherit;color:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #f4d39c;outline-offset:3px}button{background:#ffffff05;border:1px solid var(--line);border-radius:5px;padding:9px 13px;min-height:40px}button:hover:not(:disabled){background:#d7b47e15;border-color:var(--gold)}input,select{min-width:0;width:100%;background:#171317;border:1px solid var(--line);border-radius:5px;min-height:42px;padding:9px 12px}select{padding-right:26px}h1,h2,h3,p{margin:0}img{display:block;max-width:100%}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip{position:fixed;left:10px;top:-100px;z-index:10;background:var(--gold);color:#171317;padding:10px}.skip:focus{top:10px}.topbar,main,.page-footer{max-width:1480px;margin:auto;padding-inline:48px}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:14px;align-items:center;font:18px var(--serif);letter-spacing:.06em}.brand small{display:block;color:var(--muted);font:9px/2.3 var(--sans);letter-spacing:.18em}.seal{display:grid;place-content:center;width:31px;height:42px;border:1px solid var(--gold);color:var(--gold);font:28px Georgia;transform:rotate(-7deg)}.back-link{color:var(--muted);font-size:12px}.hero{position:relative;display:flex;justify-content:space-between;gap:28px;align-items:center;min-height:272px;padding-block:34px}.eyebrow{font-size:10px;letter-spacing:.19em;color:var(--gold)}h1{font:500 clamp(26px,2.8vw,40px)/1.4 var(--serif);letter-spacing:.025em;margin:14px 0 12px}.intro{color:var(--muted);font-size:13px}.rules{display:flex;align-items:center;gap:23px;margin-top:23px;color:var(--muted);font-size:11px}.rules b{font:25px Georgia;color:var(--gold);margin-right:4px}.rules>span+span{border-left:1px solid var(--line);padding-left:22px}.hero-cards{position:relative;width:320px;height:200px;flex-shrink:0;margin-right:22px}.hero-cards>div{position:absolute;top:13px;left:91px;width:128px;height:180px;border:1px solid #c49c61;border-radius:8px;background:#2a2027;box-shadow:0 12px 24px #0007;overflow:hidden;transform:rotate(-4deg)}.hero-cards>div:first-child{left:5px;transform:rotate(-19deg);top:30px}.hero-cards>div:last-child{left:180px;transform:rotate(16deg);top:29px}.hero-cards>div:nth-child(2){z-index:1}.hero-cards img{height:145px;width:100%;object-fit:cover}.hero-cards span{display:block;text-align:center;font:12px/32px var(--serif);letter-spacing:.15em;color:var(--gold)}.release-note{font-size:12px;color:#c8bda9;padding:12px 16px;border-left:2px solid #b38f59;background:#cfb57e07;margin-bottom:28px}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 338px;gap:32px;align-items:start}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px}.section-heading h2{font:500 23px var(--serif)}.section-heading>span{color:var(--muted);font-size:11px}.scope{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:18px}.scope button{border:0;border-radius:0;padding:0 0 12px;background:none;color:var(--muted);position:relative}.scope button[aria-pressed=true]{color:var(--gold)}.scope button[aria-pressed=true]::after{position:absolute;content:'';bottom:-1px;height:2px;background:var(--gold);left:0;right:0}.filters{display:flex;gap:12px}.search{flex:1}.filters>label:last-child{width:156px}.tones{display:flex;gap:7px;margin:15px 0 10px}.tones button{border-color:transparent;background:none;color:var(--muted);font-size:12px;padding:4px 13px;min-height:34px}.tones button[aria-pressed=true]{border-color:var(--line);background:#e2c29012;color:var(--ink)}.scope-note{min-height:22px;color:var(--muted);font-size:11px;margin-bottom:15px}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.catalog-card{--accent:#d7b47e;position:relative;border:1px solid var(--line);border-radius:7px;background:linear-gradient(160deg,#32272f,#211b20);overflow:hidden;display:flex;flex-direction:column;min-width:0}.catalog-card[data-tone=attack],.deck-row[data-tone=attack]{--accent:#e29889}.catalog-card[data-tone=defense],.deck-row[data-tone=defense]{--accent:#a4cbbb}.catalog-card[data-tone=utility],.deck-row[data-tone=utility]{--accent:#d7b47e}.art-button{position:relative;width:100%;border:0;border-radius:0;padding:0;display:block;overflow:hidden;aspect-ratio:1.8;background:#20191e}.art-button img{width:100%;height:100%;object-fit:cover;object-position:center 43%;object-fit:contain;opacity:.94}.art-button::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 52%,#211b20);pointer-events:none}.power-chip{position:absolute;top:10px;left:10px;z-index:1;display:flex;align-items:center;gap:5px;padding:3px 9px;border:1px solid #d7b47e60;background:#1a141bea;border-radius:3px;color:#f4d7a8;font-size:9px}.power-chip b{font:21px Georgia}.detail-hint{position:absolute;bottom:10px;right:12px;color:#e1c6a0;font-size:10px;z-index:1}.card-copy{padding:4px 15px 15px;flex:1;display:flex;flex-direction:column}.card-type{color:var(--accent);font-size:10px;letter-spacing:.04em}.card-copy h3{font:500 21px/1.4 var(--serif);margin:6px 0 9px}.card-effect{font-size:12px;color:#cbbdaf;line-height:1.85;flex:1;overflow-wrap:anywhere}.card-bottom{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-top:16px}.card-bottom>span{font-size:10px;color:var(--muted)}.add-card{font-size:11px;min-height:34px;padding:5px 10px;border-color:#d7b47e50;color:var(--gold)}.empty{padding:60px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:6px}.empty button{margin-top:14px}.deck-panel{position:sticky;top:20px;max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#816742 transparent;border:1px solid #d7b47e55;border-radius:8px;padding:22px;background:linear-gradient(145deg,#34273044,transparent),var(--panel);box-shadow:0 14px 40px #0002}.deck-panel .section-heading{margin-bottom:18px}.deck-panel h2{font-size:22px}.text-button{border:0;background:none;color:var(--muted);font-size:11px;padding:4px 0;min-height:32px}.text-button:hover:not(:disabled){background:none;color:var(--gold)}.deck-name{display:block;font-size:11px;color:var(--muted);margin:16px 0}.deck-name input{margin-top:7px;color:var(--ink)}.meters{display:grid;grid-template-columns:1fr 1fr;gap:18px}.meters span{font-size:10px;color:var(--muted)}.meters strong{display:block;font-weight:400;line-height:1.35;margin-top:4px}.meters b{font:34px Georgia}.meters small{font-size:11px;color:var(--muted)}progress{width:100%;height:3px;display:block;margin-top:10px;border:0;background:#ffffff12;accent-color:var(--gold)}progress::-webkit-progress-bar{background:#ffffff12}progress::-webkit-progress-value{background:var(--gold)}.over{color:#f6a396}.over progress{accent-color:#f6a396}.over progress::-webkit-progress-value{background:#f6a396}#deck-validity{color:#c8b895;font-size:12px;min-height:24px;margin:16px 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line)}#deck-validity.valid{color:#a9d3b7}#deck-validity.invalid{color:#f6a396}.deck-list{max-height:350px;overflow:auto;scrollbar-width:thin;scrollbar-color:#816742 transparent}.deck-empty{font:15px/1.8 var(--serif);color:var(--muted);padding:30px 10px;text-align:center}.deck-empty small{display:block;font:11px/2 var(--sans);margin-top:8px}.deck-row{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #d7b47e14;border-left:2px solid var(--accent);padding-left:9px;margin-bottom:6px}.row-info{flex:1;min-width:0}.row-info button{display:block;text-align:left;border:0;background:none;padding:0;min-height:24px;font-size:12px;overflow-wrap:anywhere}.row-info small{font-size:10px;color:var(--muted)}.quantity{display:flex;gap:6px;align-items:center}.quantity button{width:30px;min-height:32px;padding:0;font-size:16px}.quantity input{width:38px;min-height:32px;padding:3px 0;text-align:center;font-size:12px;appearance:textfield;-moz-appearance:textfield}.quantity input::-webkit-inner-spin-button,.quantity input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.save-status{font-size:10px;color:var(--muted);margin:16px 0 10px;min-height:16px}.deck-actions{display:flex;gap:8px}.deck-actions button{flex:1;font-size:12px}.deck-tools{display:flex;justify-content:space-between;margin-top:8px}.deck-footnote{border-top:1px solid var(--line);padding-top:12px;margin-top:10px;font-size:10px;color:var(--muted);line-height:1.8}.warning{padding:16px;background:#402922;border:1px solid #c28a63;border-radius:5px;color:#ffe2c6;margin-bottom:20px}.page-footer{margin-block:50px 30px;display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#f1dfbf;color:#2a2025;max-width:calc(100% - 32px);padding:12px 22px;border-radius:5px;box-shadow:0 6px 26px #0007;z-index:20;font-size:13px}dialog{position:fixed;inset:0;width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 48px);overflow:auto;border:1px solid #b69669;border-radius:9px;padding:26px;color:var(--ink);background:#211b20;box-shadow:0 25px 80px #0009}dialog::backdrop{background:#0b090bd9}.close{position:absolute;right:12px;top:12px;z-index:2;width:40px;height:40px;border-radius:50%;padding:0;font-size:26px;background:#181318d9}.detail-art{height:220px;width:100%;object-fit:contain;border-radius:4px;margin-bottom:20px}.detail-meta{font-size:12px;color:var(--gold)}#detail-title{font:28px var(--serif);margin:10px 0 16px}.detail-effect{line-height:1.95;color:#d8ccbb;font-size:15px}.detail-note{font-size:11px;color:var(--muted);margin-top:16px}.primary{background:var(--gold);color:#241b20;font-weight:600;width:100%;margin-top:22px}.primary:hover:not(:disabled){background:#ead0a4;color:#241b20}
@media(prefers-reduced-motion:no-preference){.catalog-card{transition:border-color .18s,box-shadow .18s}.catalog-card:hover{border-color:#d7b47e70;box-shadow:0 6px 18px #0003}.art-button img{transition:transform .25s}.art-button:hover img{transform:scale(1.04)}}
@media(min-width:1600px){.card-grid{gap:20px}.card-copy{padding:6px 18px 18px}}
@media(max-width:1180px){.topbar,main,.page-footer{padding-inline:28px}.workbench{grid-template-columns:minmax(0,1fr) 310px;gap:24px}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-cards{transform:scale(.85);transform-origin:right center;margin-right:0;width:340px}.deck-panel{padding:18px}}
@media(max-width:800px){.workbench{grid-template-columns:1fr}.deck-panel{position:static;grid-row:1;max-height:none;overflow:visible}.deck-list{max-height:230px}.hero-cards{display:none}.hero{min-height:235px}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.deck-tools{justify-content:flex-start;gap:22px}.deck-footnote{margin-top:5px}.deck-panel .meters{max-width:420px}.hero{padding-block:28px}.rules{gap:14px}.rules>span+span{padding-left:14px}}
@media(max-width:560px){.topbar,main,.page-footer{padding-inline:18px}.topbar{height:74px}.brand{font-size:16px;gap:10px}.brand small{font-size:8px}.back-link{font-size:11px}.hero h1{font-size:27px}.rules{flex-wrap:wrap;gap:12px}.rules b{font-size:22px}.rules>span+span{padding-left:12px}.rules>span:last-child{font-size:10px}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card-copy{padding:4px 11px 12px}.card-copy h3{font-size:19px}.card-effect{font-size:11px}.card-bottom{align-items:flex-start;flex-direction:column;gap:7px}.add-card{width:100%}.scope{gap:20px}.filters{gap:8px}.filters>label:last-child{width:136px}.filters input,.filters select{font-size:12px}.page-footer{gap:12px}.release-note{font-size:11px}.detail-art{height:185px}}
