@font-face{font-family:Pixelify;src:url('/fonts/pixelify-sans/PixelifySans.ttf') format('truetype');font-weight:400 700;font-display:swap}
.customization-screen{position:fixed;inset:0;z-index:220;background:#201914 url('/customization/castle-v1.webp') center/cover no-repeat;color:#dbd2c7;grid-template-columns:50% 50%;grid-template-rows:8% 77% 15%;isolation:isolate}
.customization-screen::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#170d0308,#0c0d114a),linear-gradient(#0003,transparent 35%,#0002)}
.customization-screen button,.customization-screen h1,.custom-count,.custom-card-label{font-family:Pixelify,monospace}
.customization-screen button{color:inherit;cursor:pointer;border:0;transition:background .12s,box-shadow .12s}
.customization-screen button:focus-visible{outline:3px solid #ffe19c;outline-offset:4px}
.customization-screen button:disabled{cursor:wait;opacity:.5}
.custom-header{grid-column:1/-1;display:flex;align-items:center;background:#111217c9;padding:0 2.8%;gap:2.6%;min-height:66px;z-index:2}
.custom-header h1{font-size:clamp(24px,2.8vw,46px);letter-spacing:2px;margin:0;font-weight:700}
.custom-back{background:transparent;font:40px/1 sans-serif!important;color:#b6aaa0!important;padding:0 7px}
.custom-classes{display:flex;gap:12px;margin-left:2%;align-self:stretch;align-items:center}
.custom-tab{position:relative;text-transform:uppercase;background:transparent;font-size:clamp(16px,1.5vw,24px);font-weight:600;letter-spacing:1px;padding:12px 26px;color:#8b8786!important;border-radius:5px}
.custom-tab[aria-selected=true]{background:#363537d9;color:#f8d991!important}
.custom-tab[aria-selected=true]::after{content:'';position:absolute;bottom:0;left:35%;right:35%;height:2px;background:linear-gradient(90deg,transparent,#f5d591,transparent)}
.custom-tab:hover{background:#39373780}
.custom-preview{grid-column:1;grid-row:2/4;position:relative;min-height:0;touch-action:none;cursor:grab;overflow:hidden;margin-top:-2%;padding-bottom:3%}
.custom-preview:active{cursor:grabbing}
.custom-preview canvas{width:100%;height:100%;display:block;position:absolute;inset:0}
.custom-hint{position:absolute;left:2.7%;top:45%;font-size:13px;white-space:pre-line;color:#c6b39caa;pointer-events:none;line-height:2}
.custom-panel{grid-column:2;grid-row:2;margin:2.5% 5% 1.5% .6%;padding:2.6% 3.2%;background:linear-gradient(135deg,#202124f5,#181a1bf5);border:3px solid #444343;box-shadow:inset 0 0 0 1px #171818,0 12px 40px #0005;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);display:flex;flex-direction:column;min-height:0}
.custom-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:10px}
.custom-slots{display:flex;gap:10px}
.custom-slots .custom-tab{font-size:clamp(19px,1.8vw,28px);padding:5px 10px}
.custom-count{font-size:18px;color:#777577;white-space:nowrap}
.custom-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 14px;align-content:start;overflow-y:auto;padding:3px;scrollbar-color:#65594b #1b1c1d}
.custom-card{padding:0;background:transparent!important;min-width:0;text-align:center}
.custom-card-art{display:block;position:relative;aspect-ratio:1;border:2px solid #3c3c40;border-radius:11px;background:radial-gradient(ellipse at 50% 80%,#454243,#28282c 80%);box-shadow:inset 0 1px 3px #ffffff09}
.custom-card img{width:100%;height:100%;object-fit:contain;display:block}
.custom-card[aria-pressed=true] .custom-card-art{border-color:#f7dd9b;box-shadow:0 0 12px #e9c37877,inset 0 0 10px #e9c37828}
.custom-card:hover .custom-card-art{background:#3b3939}
.custom-check{position:absolute;right:-2px;top:-2px;background:#f8dea0;color:#3d3224;font:700 22px/30px Pixelify;width:29px;height:30px;border-radius:0 7px 0 5px}
.custom-card-label{display:block;margin-top:8px;font-size:clamp(12px,1.13vw,18px);letter-spacing:.3px;line-height:1.25}
.custom-save{grid-row:3;grid-column:2;align-self:start;justify-self:end;width:66%;min-height:76px;margin:2% 5% 0 0;background:linear-gradient(120deg,#d3a367,#f1c986 45%,#cd9d61);border:4px solid #ba935e!important;box-shadow:inset 0 0 0 2px #f9d697,0 6px 12px #0005;color:#33230e!important;font-size:clamp(21px,2vw,33px);font-weight:700;text-transform:uppercase;letter-spacing:1.7px;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);z-index:2}
.custom-save:hover{filter:brightness(1.08)}
.custom-random{position:absolute;left:2.3%;bottom:4.1%;background:#202225ec;border:3px solid #444443!important;border-radius:5px;padding:14px 26px;font-size:20px;text-transform:uppercase;letter-spacing:1px}
.custom-message{position:absolute;left:52%;right:3%;bottom:1%;font:14px/1.5 Barlow,sans-serif;color:#f4d6a8;margin:0;pointer-events:none}
.custom-dirty{position:absolute;right:4%;bottom:14%;font:13px Barlow,sans-serif;color:#e3cda8}
@media(max-width:1100px){.custom-classes{gap:2px}.custom-tab{padding:10px 17px}.custom-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.custom-save{width:84%;min-height:60px}.custom-hint{top:60%;font-size:11px}.custom-panel{margin-top:5%}}
@media(max-width:760px){.customization-screen{grid-template-columns:1fr;grid-template-rows:104px minmax(180px,40vh) minmax(150px,1fr) 94px;overflow:auto}.custom-header{display:grid;grid-template-columns:32px 1fr;gap:0 12px;padding:8px 16px;min-height:0}.custom-header h1{font-size:27px}.custom-classes{grid-column:1/-1;margin:0;justify-content:center}.custom-tab{font-size:17px;padding:8px 20px}.custom-preview{grid-column:1;grid-row:2;margin:-5% 0 0;padding:0}.custom-panel{grid-column:1;grid-row:3;margin:0 14px;padding:12px 15px}.custom-panel-header{margin-bottom:10px}.custom-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.custom-card-art{max-height:126px}.custom-card-label{font-size:16px}.custom-save{grid-column:1;grid-row:4;width:57%;margin:12px 14px 0 0;min-height:52px;font-size:20px}.custom-random{left:14px;bottom:27px;padding:12px 14px;font-size:16px;max-width:35%}.custom-hint{left:18px;top:145px;font-size:10px}.custom-message{left:16px;right:16px;bottom:3px;font-size:11px}.custom-dirty{right:18px;bottom:95px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.customization-screen button{transition:none}}