/* Contracts: dark document, ten slots and matching rarity-lit catalogs. */
#contract-view{max-width:1760px;margin:auto;padding:20px clamp(12px,3vw,48px) 32px}
#contract-view .feature-title{text-align:center;margin:0 0 28px}
#contract-view .feature-title h1{font:500 clamp(30px,3vw,44px)/1.2 Georgia,serif;color:#edca88;text-transform:none;margin:0 0 10px}
#contract-view .feature-title p{font-size:13px;line-height:1.6;color:#939faf;margin:auto;max-width:680px}
#contract-view .contract-console{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);margin:0;gap:18px;align-items:stretch}
#contract-view .contract-selection,#contract-view .contract-theater{border:1px solid #c5a16b88;border-radius:13px;background:#0b0e13;box-shadow:none;min-width:0}
#contract-view .contract-selection{padding:22px;display:flex;flex-direction:column;gap:20px}
#contract-view .selection-title{font:500 25px/1.3 Georgia,serif;color:#edca88;letter-spacing:0;display:flex;align-items:center;justify-content:space-between;gap:10px}
#contract-view .selection-title span{font:12px/1.4 var(--font-ui,sans-serif);color:#9ca7b6}
#contract-view #contract-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0;flex:1;align-content:center}
#contract-view .contract-slot{height:133px;border:1px solid #64708040;border-radius:9px;background:linear-gradient(145deg,#10151c,#0a0e13);gap:8px;overflow:hidden;min-width:0}
#contract-view .contract-slot>span:not(.slot-remove){width:35px;height:35px;border:1px solid #7e879c44;border-radius:50%;font:25px/32px sans-serif;color:#778290}
#contract-view .contract-slot small{color:#778290;font-size:10px}
#contract-view .contract-slot.filled{border-color:#c5a16b99;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--tone,#b390df) 25%,transparent),transparent 75%),#0b0f15}
#contract-view .contract-slot img{height:85px;width:100%;object-fit:contain;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--tone,#b390df) 25%,transparent))}
#contract-view .contract-slot.filled small{color:#edca88;font-size:12px}
#contract-view .contract-slot .slot-remove{border:1px solid #99a5b84d;border-radius:50%;width:19px;height:19px;font:16px/16px sans-serif;right:5px;top:5px;color:#b7bfcc}
#contract-view .contract-bar{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin:0;padding:18px 0 0;border:0;border-top:1px solid #66708038;border-radius:0;background:none;box-shadow:none}
#contract-view #contract-total{font-size:13px;line-height:1.7;color:#e7cb97;flex:1;min-width:150px}
#contract-view #do-contract{min-height:50px;min-width:230px;margin:0;padding:12px 22px;background:linear-gradient(115deg,#f7d79d,#d9a654);border:1px solid #f9d4a473;border-radius:9px;color:#302216;font:700 16px/1.4 var(--font-ui,sans-serif)}
#contract-view #do-contract:disabled{opacity:.4;cursor:not-allowed}
#contract-view .contract-theater{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;min-height:420px;margin:0;padding:18px;gap:12px;overflow:hidden}
#contract-view #contract-paper{width:100%;min-height:285px;flex:1;margin:0;padding:28px;border:1px solid #bd955b73;border-radius:5px;background:radial-gradient(ellipse at 80% 50%,#9273410d,transparent 70%),#0c1015;color:#929dac;transform:none;box-shadow:inset 0 0 0 5px #090c11,inset 0 0 0 6px #bd955b24}
#contract-view #contract-paper:before{content:'';position:absolute;right:22px;bottom:25px;width:135px;height:175px;background:url('/images/brand-dragon-gold-v2.png') center/contain no-repeat;opacity:.1;pointer-events:none}
#contract-view #contract-paper .paper-heading{font:500 24px/1.35 Georgia,serif;letter-spacing:.5px;color:#edca88;border-bottom:1px solid #b9996040;padding-bottom:16px}
#contract-view #contract-paper .paper-heading span{display:block;font:10px/1.4 var(--font-ui,sans-serif);letter-spacing:2px;color:#9b8e76;margin-top:7px}
#contract-view #contract-paper .paper-lines{opacity:.16;margin:20px 0}
#contract-view #contract-paper>p{font:12px/1.8 var(--font-ui,sans-serif);color:#aab2be;opacity:1;max-width:300px}
#contract-view #contract-paper.awaiting-signature{box-shadow:inset 0 0 0 5px #090c11,inset 0 0 0 6px #bd955b24,0 0 20px #d4ae5610}
#contract-view #contract-paper .full-paper-signature path{stroke:#edc67e;stroke-width:2.2}
#contract-view .contract-stamp{color:#edc67e;border-color:#edc67e}
#contract-view #contract-theater .signature-tools{position:static;width:100%;max-width:none;flex:0;margin:0;padding:0 8px;border:0;background:none;box-shadow:none;gap:5px}
#contract-view .signature-instruction{font-size:9px;letter-spacing:1px;color:#bb9c63}
#contract-view #signature-hint{font-size:10px;line-height:1.5;color:#8e9baa}
#contract-view #signature-clear{min-height:30px;font-size:10px;padding:6px 12px;background:#10161e;color:#c4b493;border:1px solid #b79b6344;border-radius:6px}
#contract-view .contract-reward strong{color:#edca88;font-size:26px}
#contract-view .dual-pickers{display:grid;grid-template-columns:1fr 1fr;width:100%;margin:20px 0 0;gap:18px;align-items:stretch}
#contract-view .skin-panel{background:#0b0f15;border:1px solid #a893694f;border-radius:13px;overflow:hidden;min-width:0}
#contract-view .skin-panel-heading{padding:15px;min-height:54px;gap:12px;flex-wrap:wrap;border-bottom:0}
#contract-view .skin-panel-heading h2{font:500 23px/1.3 Georgia,serif;color:#e9d4aa}
#contract-view .skin-panel-heading>span{font-size:11px;color:#919cab}
#contract-view .quick-targets{gap:6px}
#contract-view .quick-targets button{min-height:32px;padding:6px 10px;font-size:11px;color:#d6bc8c;background:#131820;border:1px solid #ac915941;border-radius:6px}
#contract-view .skin-tools{padding:0 12px 12px;gap:8px}
#contract-view .skin-tools input,#contract-view .skin-tools select{min-width:0;height:36px;padding:8px 10px;font-size:11px;background:#090e15;border:1px solid #34404c;border-radius:7px;color:#bcc7d6}
#contract-view #contract-inputs,#contract-view #contract-outcomes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:196px;gap:9px;padding:0 12px 12px;min-height:405px;max-height:610px;overflow:auto;align-content:start;scrollbar-width:thin;scrollbar-color:#665637 #0b0f15}
#contract-view .choice{display:flex;flex-direction:column;height:196px;padding:0;min-width:0;border:1px solid #65718044;border-radius:9px;background:#0b1016;overflow:hidden;position:relative}
#contract-view .choice.selected{border-color:#e7bf77;box-shadow:inset 0 0 0 1px #e7bf7733}
#contract-view .choice>.item,#contract-view #contract-outcomes>.item{display:flex;flex-direction:column;align-items:stretch;min-width:0;min-height:0;height:196px;padding:22px 10px 12px;border-radius:9px;margin:0;box-sizing:border-box;background:radial-gradient(ellipse at 50% 36%,color-mix(in srgb,var(--tone) 24%,transparent),transparent 70%),#0b1016;box-shadow:none;position:relative;text-align:left}
#contract-view .choice>.item{border:0;flex:1}
#contract-view #contract-outcomes>.item{border:1px solid #65718044}
#contract-view .item img{width:100%;height:85px;min-height:85px;object-fit:contain;margin:0 0 7px;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--tone) 22%,transparent))}
#contract-view .item small{display:block;font-size:9px;line-height:1.3;color:#91a0b5}
#contract-view .item small:last-of-type{display:none}
#contract-view .item h3{font:700 11px/1.3 var(--font-ui,sans-serif);min-height:28px;margin:3px 0;color:#e4eaf3;overflow-wrap:anywhere}
#contract-view .item p{position:static;font-size:13px;color:#edca88;margin:auto 0 0}
#contract-view .choice-label,#contract-view .item .chance{position:absolute;top:5px;left:6px;right:auto;font-size:8px;padding:3px 5px;border-radius:4px;background:#18202bcc;color:#a7b1c2}
#contract-view .choice.selected .choice-label{background:#e9bf79;color:#211b12}
#contract-view #contract-outcomes>.muted,#contract-view #contract-inputs>.empty{grid-column:1/-1;display:grid;place-content:center;text-align:center;margin:0;min-height:360px;padding:25px;font-size:13px;line-height:1.7;color:#8e9baa;border:0}
#contract-view button:focus-visible{outline:2px solid #f0cc88;outline-offset:3px}
#contract-view .result-banner:empty{display:none}
@media(max-width:1100px){#contract-view .contract-console{grid-template-columns:1.15fr 1fr;gap:12px}#contract-view .contract-selection{padding:15px}#contract-view #contract-slots{gap:6px}#contract-view .contract-slot{height:112px}#contract-view .contract-slot img{height:65px}#contract-view #do-contract{width:100%}#contract-view #contract-paper{padding:22px}#contract-view .skin-panel-heading h2{font-size:21px}#contract-view #contract-inputs,#contract-view #contract-outcomes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){#contract-view{padding:18px 12px 24px}#contract-view .contract-console,#contract-view .dual-pickers{grid-template-columns:1fr;gap:16px;margin-left:0;margin-right:0}#contract-view .selection-title{font-size:23px}#contract-view .selection-title span{font-size:10px}#contract-view .contract-selection{padding:14px;gap:16px}#contract-view .contract-slot{height:83px;gap:4px}#contract-view .contract-slot img{height:48px}#contract-view .contract-slot.filled small{font-size:9px}#contract-view .contract-slot small{font-size:8px}#contract-view .contract-slot>span:not(.slot-remove){width:26px;height:26px;font-size:20px;line-height:24px}#contract-view .contract-bar{padding-top:12px;gap:10px}#contract-view .contract-theater{min-height:370px;padding:14px}#contract-view #contract-paper{min-height:250px}#contract-view .skin-tools{flex-wrap:wrap}#contract-view .skin-tools input,#contract-view .skin-tools select{flex:1;width:100%}#contract-view #contract-inputs,#contract-view #contract-outcomes{grid-template-columns:repeat(2,minmax(0,1fr));max-height:620px}#contract-view .feature-title p{font-size:12px}}
#contract-view .skin-panel-heading{background:none}
#contract-view .result-banner{margin:14px 0 0;background:#0c1017;border:1px solid #b4935844;border-radius:9px;color:#edca88}