.duel-portraits{display:none}
.personal-details{margin:24px 0;padding:22px;border:1px solid #ffe83f85;border-radius:16px;background:linear-gradient(140deg,#ffe83f10,transparent 70%),#222425;box-shadow:0 8px 28px #0002}
.details-step{font-size:10px;font-weight:700;letter-spacing:1.6px;color:#ffe83f}
.personal-details h3{font:700 24px/1.2 'DM Sans',sans-serif;letter-spacing:-.8px;margin:9px 0;color:#fff}
.personal-details .details-help{font-size:13px;color:#d2d2cf;line-height:1.5;margin:0 0 22px}
.personal-details .field-label{font-size:16px;font-weight:700;color:#fff;margin-bottom:10px}
.personal-details .field-label span{font-size:12px;font-weight:400;color:#c8c9c4}
.personal-details #name{background:#fff9e9;color:#1c1d1c;border:2px solid #e2d9b6;padding:16px;font-size:16px;font-weight:600;min-height:56px;margin-bottom:22px;box-shadow:0 2px 0 #0003}
.personal-details #name::placeholder{color:#6b695e;font-weight:400;opacity:1}
.personal-details #name:focus{outline:3px solid #ffe83f;outline-offset:3px;border-color:#fff}
.personal-details .upload{position:relative;padding:17px 14px 17px 54px;min-height:76px;background:#ffe83f;color:#171717;border:2px solid #ffe83f;border-radius:10px;font-size:16px;font-weight:700;box-shadow:0 4px 0 #a48b1a55;transition:background .15s}
.personal-details .upload:before{content:'+';position:absolute;left:16px;top:17px;width:27px;height:27px;border:1px solid #17171765;border-radius:7px;display:grid;place-items:center;font-size:24px;font-weight:400;line-height:1}
.personal-details .upload:hover{background:#fff085}.personal-details .upload span{color:#464124;font-weight:400;font-size:11px;margin-top:5px}
.personal-details #feedback{color:#d0d1ca;font-size:11px;line-height:1.5;margin:13px 0 0}
@media(max-width:760px){.personal-details{padding:18px;margin:18px 0}.personal-details h3{font-size:23px}.personal-details .details-help{margin-bottom:18px}.personal-details .field-label{font-size:16px}}
@media(max-width:760px){
 /* Independent crops bring the portraits together without changing their proportions. */
 .hero-cinematic .duel{height:clamp(390px,85vw,520px)}
 .duel-art{visibility:hidden}
 .duel-portraits{display:block;position:absolute;inset:32px 0 68px;z-index:0;overflow:hidden}
 .duel-portraits:before,.duel-portraits:after{content:'';position:absolute;top:0;bottom:0;width:50%;background-image:url('assets/duel-cinematic-v2.png');background-repeat:no-repeat;background-size:auto 100%}
 .duel-portraits:before{left:0;background-position:12% center;mask-image:linear-gradient(90deg,#000 85%,transparent)}
 .duel-portraits:after{right:0;background-position:88% center;mask-image:linear-gradient(270deg,#000 85%,transparent)}
 .hero-cinematic .duel:after{background:linear-gradient(180deg,#10111320 20%,transparent 45%,#10111355 65%,#101113 87%)}
 .poster-title{top:52%;padding:6px 9px;background:#10111370;z-index:3}
 .poster-title>span{font-size:16px}.poster-title>strong{font-size:27px}
 .duel-score{bottom:89px;gap:4px}.duel-score>strong{font-size:clamp(38px,10vw,58px);letter-spacing:-1px}
 .duel-score>span{font-size:19px}.duel-score small{font-size:9px}
 .hero-cinematic .duel-bottom{padding:0 5% 12px}.hero-cinematic .duel-bottom p{font-size:10px;line-height:1.4;margin-top:9px}
 .art-credit{top:35px}.hero-cinematic .duel-kicker{top:12px}
 /* The preview stays in view while the customer changes style, name and photo. */
 body:not(.delivery-mode) #personalizar{display:flex;flex-direction:column;padding:0 4% 30px;gap:16px;isolation:isolate;scroll-margin-top:0}
 body:not(.delivery-mode) #personalizar>.viewer{position:sticky;top:0;z-index:8;order:-1;flex:none;height:clamp(225px,40svh,320px);min-height:0;border-radius:0 0 18px 18px;background:radial-gradient(ellipse at center,#303231,#17191a 80%);box-shadow:0 12px 22px #0006;overflow:hidden}
 body:not(.delivery-mode) .viewer-top{padding:10px 14px;font-size:9px;letter-spacing:1px}
 body:not(.delivery-mode) .stage{min-height:0;flex:1}
 body:not(.delivery-mode) .tilt{width:76%;max-width:340px;max-height:calc(40svh - 100px);container-type:inline-size}
 body:not(.delivery-mode) .viewer .face.front .card-top>.support-title{font-size:4cqw!important;line-height:1.08;-webkit-text-stroke-width:.7px;text-shadow:1px 1px #0005}
 body:not(.delivery-mode) .viewer .card-top .party-logo{width:6.5cqw;height:6.5cqw}
 body:not(.delivery-mode) .viewer .card-top .edition{font-size:1.1cqw!important;padding:1cqw!important;letter-spacing:.3px}
 body:not(.delivery-mode) .viewer .card-body{min-height:0}
 body:not(.delivery-mode) .viewer .identity .candidate{font-size:4.5cqw!important;letter-spacing:-.5px!important}
 body:not(.delivery-mode) .viewer .identity .person{font-size:3cqw!important;padding:1cqw 1.5cqw;margin-top:1.5cqw}
 body:not(.delivery-mode) .viewer .identity .member{font-size:1.5cqw!important;letter-spacing:.4px;margin-top:2cqw}
 body:not(.delivery-mode) .viewer .initials{font-size:6cqw}
 body:not(.delivery-mode) .viewer .leader-caption{font-size:1.5cqw;padding:1cqw 0;letter-spacing:0}
 body:not(.delivery-mode) .viewer .front>.party-number{font-size:11cqw!important}
 body:not(.delivery-mode) .viewer .card-bottom{font-size:1.6cqw!important}
 body:not(.delivery-mode) .viewer .card-ribbon{font-size:1.4cqw;letter-spacing:.7px;padding:1cqw}
 body:not(.delivery-mode) .viewer .back-mark{font-size:8cqw!important}
 body:not(.delivery-mode) .viewer .back-label,body:not(.delivery-mode) .viewer .back-sticker,body:not(.delivery-mode) .viewer .back-footer p{font-size:1.7cqw}
 body:not(.delivery-mode) .viewer .back-footer .person{font-size:3cqw}
 body:not(.delivery-mode) .viewer-bottom{padding:5px 12px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
 body:not(.delivery-mode) .viewer-bottom>p{font-size:10px;margin:0;max-width:150px;text-align:left}
 body:not(.delivery-mode) #flip{min-height:40px;padding:8px 14px;font-size:12px;white-space:nowrap}
 body:not(.delivery-mode) #flip span{font-size:16px;margin-left:5px}
 body:not(.delivery-mode) .mobile-review{display:none}
 body:not(.delivery-mode) .editor>.eyebrow,body:not(.delivery-mode) .editor>h2,body:not(.delivery-mode) .editor>.intro{display:none}
 body:not(.delivery-mode) .editor fieldset{margin-bottom:18px}
 body:not(.delivery-mode) .editor legend{margin-bottom:10px}
 body:not(.delivery-mode) .themes{gap:8px}
 body:not(.delivery-mode) .theme{min-height:76px;padding:9px;display:grid;grid-template-columns:26px 1fr;gap:4px 8px;align-items:center}
 body:not(.delivery-mode) .swatch{grid-row:1 / 3;width:26px;height:42px;padding-left:5px;font-size:20px}
 body:not(.delivery-mode) .theme strong{font-size:12px;align-self:end}
 body:not(.delivery-mode) .theme small{font-size:10px;align-self:start}
 body:not(.delivery-mode) .editor input,body:not(.delivery-mode) .editor .upload{scroll-margin-top:330px}
}
@media(max-height:600px) and (max-width:760px){
 body:not(.delivery-mode) #personalizar>.viewer{height:210px}
 body:not(.delivery-mode) .tilt{max-width:235px;max-height:none}
 body:not(.delivery-mode) .viewer-top{padding:6px 12px}
 body:not(.delivery-mode) .viewer-bottom>p{display:none}
 body:not(.delivery-mode) .viewer-bottom{justify-content:center}
}