/* Each frame, portrait, emblem and control is an independent UI element. */
#character-slots{position:fixed;inset:0;z-index:900;box-sizing:border-box;display:grid;grid-template-rows:22% 61% 17%;padding:0 8.5%;font-family:Georgia,serif;color:#efdec0;background:#121813 url('character-menu/background-v2.png') center/cover;isolation:isolate}
#character-slots::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#0001,transparent 40%,#0005)}
#character-slots[hidden],#character-exit[hidden]{display:none!important}body.in-character-menu{overflow:hidden}
.slots-title{text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}.slots-title h1{margin:0;height:70%;width:min(540px,537.6px)}.slots-title h1 img{width:100%;height:100%;object-fit:contain}.slots-title h2{width:100%;margin:0;font-size:clamp(14px,18.56px,25px);font-weight:normal;letter-spacing:.12em;display:flex;align-items:center;gap:15px}.slots-title h2::before,.slots-title h2::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,#b49a60)}.slots-title h2::after{transform:rotate(180deg)}.slots-title h2 span{padding:8px 24px;border-block:1px solid #b79b6266;background:#111714cf}
.slot-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15.36px;min-height:0;padding:8.64px 0 3.6px}.hero-slot{position:relative;min-width:0;min-height:0;border:0;padding:0;box-shadow:none;border-radius:0;overflow:visible;color:#f0e0bf;background:#161c18 url('character-menu/interior-v2.png') center/100% 100%;font-family:Georgia,serif;text-shadow:0 2px 4px #000;transition:filter .2s,transform .2s;isolation:isolate}.hero-slot:hover{background:#161c18 url('character-menu/interior-v2.png') center/100% 100%;border:0;filter:brightness(1.12)}.hero-slot:focus-visible{outline:2px solid #ffe0a0;outline-offset:5px}.slot-frame{position:absolute;inset:-1.2% -2%;width:104%;height:102.4%;pointer-events:none;z-index:5}.hero-slot.selected{filter:drop-shadow(0 0 8px #d8a04b66)}.slot-hero-art{position:absolute;left:3%;top:1.5%;width:94%;height:76%;object-fit:contain;object-position:center bottom;pointer-events:none}.hero-slot[data-hero-class]:not([data-hero-class="empty"])::after{content:'';position:absolute;inset:72% 3% 2%;z-index:1;background:linear-gradient(#101611b8,#080c0aef);border-top:1px solid #aa884d88;clip-path:polygon(0 10%,42% 0,58% 0,100% 10%,100% 100%,0 100%)}.slot-emblem{position:absolute;top:71.5%;left:calc(50% - 15px);width:30px;height:30px;color:#d5b271;z-index:3;transform:rotate(45deg);border:1px solid #b7914d;background:#101510}.slot-emblem svg{width:24px;height:24px;transform:rotate(-45deg);margin:2px}.hero-slot strong{position:absolute;top:79%;left:7%;width:86%;font-size:clamp(16px,19.2px,27px);font-weight:normal;z-index:3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slot-detail{position:absolute;top:88%;left:4%;width:92%;font-size:clamp(11px,14.08px,18px);z-index:3}.slot-level{position:absolute;top:93%;left:4%;width:92%;font-size:clamp(10px,12.8px,16px);z-index:3}.hero-slot small{position:absolute;bottom:5%;left:4%;width:92%;font-size:clamp(10px,12.8px,17px);z-index:3;color:#d2bd92}.slot-plus{position:absolute;top:29%;left:26%;width:48%;height:24%;object-fit:contain;pointer-events:none}.hero-slot[data-hero-class="empty"] strong{top:54%;left:15%;width:70%;white-space:normal;font-size:clamp(14px,19.2px,26px);line-height:1.15}.hero-slot[data-hero-class="empty"] .slot-emblem{display:none}
.slot-actions{display:flex;align-items:center;justify-content:center;gap:12.8px;min-height:0}.slot-actions button,.slot-secondary{border:0;box-shadow:none;padding:0;position:relative;background:transparent url('character-menu/secondary-v2.png') center/100% 100%;color:#edd8ac;font-family:Georgia,serif;text-shadow:0 2px 3px #000;transition:filter .2s}.slot-actions button:hover,.slot-secondary:hover{border:0;background:transparent url('character-menu/secondary-v2.png') center/100% 100%;filter:brightness(1.2)}#slot-play{width:320px;max-width:430px;height:79.2px;max-height:115px;background-image:url('character-menu/primary-v2.png');font-size:clamp(22px,32px,42px);letter-spacing:.06em}#slot-play:hover{background-image:url('character-menu/primary-v2.png')}#slot-create{width:256px;height:57.6px;max-height:80px;font-size:clamp(12px,14.72px,21px)}#slot-create span{font-size:1.3em;margin-right:8px}.slot-actions button:disabled{filter:grayscale(.6);opacity:.45;cursor:default}.slot-secondary{position:absolute;bottom:3.5%;width:166.4px;height:46.8px;font-size:clamp(12px,14.08px,19px)}.slot-secondary span{margin-right:10px;font-size:1.35em}#slot-settings{left:1.5%}#slot-exit{right:1.5%}
body.in-character-menu>#world,body.in-character-menu>header,body.in-character-menu>aside,body.in-character-menu>footer,body.in-character-menu>#trail-travel,body.in-character-menu>#minimap,body.in-character-menu>#game-menu,body.in-character-menu>#toast{visibility:hidden}#new-character-name{display:block;width:min(400px,90%);margin:20px auto;padding:14px;background:#10170f;border:1px solid #ac8d51;color:#eeddb6;font:20px Georgia;text-align:center}#character-exit{position:fixed;inset:0;z-index:910;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#0005,#0009),url('character-menu/background-v2.png') center/cover;color:#e1c18a;font-family:Georgia}#character-exit h1{font-size:76.8px;letter-spacing:.12em}#character-exit button{padding:20px 40px}#inventory{z-index:950}
@media(max-width:0px){#character-slots{padding-inline:3%;grid-template-rows:20% 61% 19%}.slot-cards{gap:12.8px}.slots-title h1{width:768px}.slots-title h2{font-size:12px}.slots-title h2 span{padding:6px 12px}.slot-secondary{bottom:1%;width:281.6px;height:36px}.slot-actions{align-items:flex-start;padding-top:14.4px}#slot-play{width:409.6px;height:57.6px}#slot-create{width:384px;height:50.4px}.slot-emblem{width:22px;height:22px;left:calc(50% - 11px)}.slot-emblem svg{width:18px;height:18px;margin:1px}.hero-slot strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hero-slot,.slot-actions button,.slot-secondary{transition:none}}
.slot-level{top:91%}.hero-slot small{bottom:7%}.slot-detail{top:86%}
/* A single frame image preserves exact alignment across all interaction states. */
.slot-frame{inset:0;width:100%;height:100%;object-fit:fill;filter:brightness(.8);transition:filter .35s ease}
.hero-slot{background-size:94% 94%;background-repeat:no-repeat;background-color:transparent;transition:filter .3s ease;overflow:visible}
.hero-slot:hover{background-size:94% 94%;background-repeat:no-repeat;background-color:transparent;filter:brightness(1.06)}
.hero-slot.selected{filter:none}.hero-slot.selected .slot-frame{filter:brightness(1.4) drop-shadow(0 0 5px #eab650) drop-shadow(0 0 12px #db952655)}
.hero-slot:hover .slot-frame{filter:brightness(1.2) drop-shadow(0 0 4px #d5ad65)}.hero-slot.selected:hover .slot-frame{filter:brightness(1.5) drop-shadow(0 0 6px #eab650)}
.slot-hero-art{left:7%;top:6%;width:86%;height:69%;animation:hero-breath 5.5s ease-in-out infinite;transform-origin:center bottom}.hero-slot:nth-child(even) .slot-hero-art{animation-delay:-2s}
.slot-plus{transition:transform .35s ease,filter .35s ease}.hero-slot:hover .slot-plus{transform:scale(1.07);filter:drop-shadow(0 0 8px #dca85577)}
.slot-actions button,.slot-secondary{transition:filter .25s ease,transform .25s ease}.slot-actions button:not(:disabled):hover,.slot-secondary:hover{transform:translateY(-2px)}.slot-actions button:not(:disabled):active,.slot-secondary:active{transform:translateY(1px) scale(.98)}
#slot-play:not(:disabled){animation:play-light 4s ease-in-out infinite}
.menu-ambience{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}.menu-ambience i{position:absolute;left:var(--x);bottom:-15px;width:3px;height:3px;border-radius:50%;background:#ffe1a0;box-shadow:0 0 7px 2px #e5ae5488;animation:menu-mote var(--duration) linear var(--delay) infinite}
@keyframes menu-mote{0%{opacity:0;transform:translate(0,0)}15%{opacity:.7}75%{opacity:.45}100%{opacity:0;transform:translate(var(--drift),-540px)}}
@keyframes hero-breath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.008)}}
@keyframes play-light{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15) drop-shadow(0 0 6px #c8943644)}}
@media(prefers-reduced-motion:reduce){.slot-hero-art,#slot-play:not(:disabled),.menu-ambience i{animation:none}.slot-frame,.slot-plus,.slot-actions button,.slot-secondary{transition:none}}
/* The painted interior starts below the top rail; the ornament remains outside. */
.hero-slot,.hero-slot:hover{background-image:none}
.hero-slot::before{content:'';position:absolute;inset:5% 4% 5%;background:#161c18 url('character-menu/interior-v2.png') center/100% 100%;border-radius:16px;z-index:-1;pointer-events:none}
.slot-actions button[hidden]{display:none!important}
#slot-create{width:320px;max-width:430px;height:79.2px;max-height:115px;background-image:url('character-menu/primary-v2.png');font-size:clamp(16px,20.48px,28px)}
#slot-create:hover{background-image:url('character-menu/primary-v2.png')}
@media(max-width:0px){#slot-create{width:512px;height:57.6px}}
/* Living gold: continuous light, a traveling sheen and responsive press. */
#slot-play{isolation:isolate;overflow:visible;animation:play-gold 3.8s ease-in-out infinite;transform-origin:center;transition:transform .25s ease}
#slot-play::before,#slot-play::after{content:'';position:absolute;pointer-events:none;z-index:-1}
#slot-play::before{inset:20% 8%;border-radius:50%;background:radial-gradient(ellipse,#ffcf7155,transparent 72%);filter:blur(12px);animation:play-aura 3.8s ease-in-out infinite}
#slot-play::after{inset:18% 9% 20%;clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%);background:linear-gradient(110deg,transparent 35%,#ffe7ad12 43%,#fff0c967 49%,#ffe2a42b 54%,transparent 63%);background-size:300% 100%;mix-blend-mode:screen;animation:play-sheen 5s linear infinite}
#slot-play:not(:disabled):hover{transform:translateY(-3px) scale(1.025);animation:play-gold-hover 2s ease-in-out infinite}
#slot-play:hover::after{animation-duration:2.8s}#slot-play:not(:disabled):active{transform:translateY(1px) scale(.975);filter:brightness(1.3)}
@keyframes play-gold{0%,100%{filter:brightness(1) drop-shadow(0 0 4px #e1a54040)}50%{filter:brightness(1.18) drop-shadow(0 0 12px #e1a54077)}}
@keyframes play-gold-hover{0%,100%{filter:brightness(1.2) drop-shadow(0 0 10px #efb94c77)}50%{filter:brightness(1.35) drop-shadow(0 0 17px #efb94caa)}}
@keyframes play-aura{0%,100%{opacity:.4;transform:scale(.92)}50%{opacity:.9;transform:scale(1.12)}}
@keyframes play-sheen{0%{background-position:100% 0}65%,100%{background-position:0% 0}}
@media(prefers-reduced-motion:reduce){#slot-play,#slot-play:not(:disabled):hover,#slot-play::before,#slot-play::after{animation:none}#slot-play{transition:none}}
#slot-play:not(:disabled){animation:play-gold 3.8s ease-in-out infinite}
#slot-play:not(:disabled):hover{animation:play-gold-hover 2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#slot-play:not(:disabled),#slot-play:not(:disabled):hover{animation:none}}
#slot-create{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1;margin:0;padding:0 9%;white-space:nowrap;box-sizing:border-box}
#slot-create{padding:0 12px}
/* Counter-rotate only the artwork, keeping the ornamental diamond upright. */
.slot-emblem img.class-icon{transform:rotate(-45deg);padding:2px;box-sizing:border-box}
#slot-delete{right:2%;top:3%;bottom:auto;width:clamp(140px,179.2px,220px);height:48px;font-size:14px;z-index:8}
#slot-delete[hidden]{display:none!important}
#slot-delete-dialog{width:min(430px,1100.8px);box-sizing:border-box;border:1px solid #c3a05d;border-radius:9px;background:linear-gradient(145deg,#20271e,#0c120f);color:#efdbb4;padding:28px;font-family:Georgia,serif;box-shadow:0 12px 70px #000b}
#slot-delete-dialog::backdrop{background:#030705b8;backdrop-filter:blur(5px)}
#slot-delete-dialog h2{font-weight:normal;margin:0 0 18px;color:#ffe0a1}
#slot-delete-dialog p{line-height:1.5;font-size:15px}
#slot-delete-dialog>div{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
#slot-delete-dialog button{padding:10px 20px;border:1px solid #9c7c44;border-radius:4px;background:#182019;color:#efdbb4;font:15px Georgia;cursor:pointer}
#slot-delete-dialog #slot-delete-confirm{background:#592b24;border-color:#ba7758}
#slot-delete-dialog button:focus-visible{outline:2px solid #ffe0a1;outline-offset:3px}
/* The delete action follows the selected occupied card, outside its click target. */
#character-slots{--delete-center:16.3%}
#character-slots[data-selected-slot="1"]{--delete-center:33.15%}
#character-slots[data-selected-slot="2"]{--delete-center:50%}
#character-slots[data-selected-slot="3"]{--delete-center:66.85%}
#character-slots[data-selected-slot="4"]{--delete-center:83.7%}
#character-slots #slot-delete{left:var(--delete-center);right:auto;top:25%;bottom:auto;transform:translateX(-50%);width:clamp(105px,153.6px,175px);max-width:14%;height:32px;padding:0 6px;border:1px solid #ad7855;border-radius:4px;background:#281a15ed;color:#f1d4ae;font-size:clamp(10px,10.88px,14px);box-shadow:0 2px 7px #0009;z-index:8}
#character-slots #slot-delete:hover{transform:translateX(-50%);background:#492820;filter:brightness(1.15)}
#character-slots #slot-delete:focus-visible{outline:2px solid #ffe0a1;outline-offset:3px}
@media(max-width:0px){#character-slots{--delete-center:12%}#character-slots[data-selected-slot="1"]{--delete-center:31%}#character-slots[data-selected-slot="2"]{--delete-center:50%}#character-slots[data-selected-slot="3"]{--delete-center:69%}#character-slots[data-selected-slot="4"]{--delete-center:88%}#character-slots #slot-delete{top:23%;min-width:0;max-width:17%;font-size:9px;height:28px}}
/* Preserve the painted button's original 502:195 proportions. */
#character-slots #slot-play{flex:none;width:min(358.4px,calc(93.6px * 502 / 195),340px);height:auto;max-height:none;aspect-ratio:502 / 195;background-size:contain;background-position:center;background-repeat:no-repeat;display:grid;place-items:center;padding:0;font-size:clamp(20px,25.6px,32px);line-height:1;letter-spacing:.035em}
#character-slots #slot-play:hover{background-size:contain;background-repeat:no-repeat}
@media(max-width:0px){#character-slots #slot-play{width:min(486.4px,calc(93.6px * 502 / 195));font-size:clamp(16px,38.4px,24px)}}
/* Place deletion directly below the selected card. */
#character-slots #slot-delete{top:84.5%;height:30px}
@media(max-width:0px){#character-slots #slot-delete{top:82.5%;height:26px}}
/* Keep the level label inside the clear plate above the lower ornament. */
#character-slots .hero-slot .slot-detail{top:86%}
#character-slots .hero-slot .slot-level{top:90%;line-height:1.2}
#character-slots #slot-delete{top:83.5%}
@media(max-width:0px){#character-slots #slot-delete{top:81.5%}}
.slot-model{position:absolute;left:5%;top:3%;width:90%;height:69%;overflow:hidden;pointer-events:none;z-index:2;border-radius:12px}
.slot-model canvas{display:block;width:100%;height:100%}
.slot-hero-art[hidden]{display:none!important}
#character-slots .slot-model canvas{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none}
/* Lower the model slightly without changing its scale or overlapping the labels. */
#character-slots .slot-model{top:6%}

/* Shared aged bronze, forest green and carved leafwork from the game HUD. */
#character-slots{color:#ecdfc3}
#character-slots .slots-title h1 img{filter:saturate(.65)}
#character-slots .slots-title h2{color:#e7d6b4;letter-spacing:.1em}
#character-slots .slots-title h2:before,#character-slots .slots-title h2:after{background:linear-gradient(90deg,transparent,#ae956b)}
#character-slots .slots-title h2 span{border:0;padding:12px 40px;background:url('character-menu/button-hud-v3.png') center/100% 100% no-repeat}
#character-slots .hero-slot:before{inset:5% 8%;border-radius:20px;background:#161c18 var(--slot-scene,url('character-menu/interior-v2.png')) center/cover no-repeat;box-shadow:none;overflow:hidden;clip-path:inset(0 round 20px)}
#character-slots .hero-slot[data-hero-class='0']{--slot-scene:url('character-menu/card-swordsman-v2.png')}
#character-slots .hero-slot[data-hero-class='1']{--slot-scene:url('character-menu/card-archer-v2.png')}
#character-slots .hero-slot[data-hero-class='2']{--slot-scene:url('character-menu/card-mage-v2.png')}
#character-slots .hero-slot[data-hero-class='3']{--slot-scene:url('character-menu/card-thief-v2.png')}
#character-slots .hero-slot[data-hero-class='empty']:before{background-size:100% 100%}
#character-slots .hero-slot[data-hero-class]:not([data-hero-class='empty']):before{background-size:cover;background-position:center;filter:blur(.5px)}
#character-slots .slot-frame{filter:brightness(.9);transition:filter .25s ease}
#character-slots .hero-slot:hover .slot-frame{filter:brightness(1.12) drop-shadow(0 0 4px #c2aa7855)}
#character-slots .hero-slot.selected .slot-frame{filter:brightness(1.16) drop-shadow(0 0 6px #d6bf8c66)}
#character-slots .hero-slot.selected:hover .slot-frame{filter:brightness(1.22) drop-shadow(0 0 7px #d6bf8c77)}
#character-slots .hero-slot:focus-visible{outline-color:#d8c295}
#character-slots .hero-slot[data-hero-class]:not([data-hero-class='empty']):after{inset:73% 8% 5%;border-top:1px solid #b49a6c77;clip-path:inset(0 round 0 0 20px 20px);background:linear-gradient(#15231bd9,#0a160fee);border-radius:0 0 20px 20px}
#character-slots .slot-emblem{top:calc(73% - 20px);left:calc(50% - 20px);width:40px;height:40px;border:0;background:url('hud-class-frame-v1.png') center/contain no-repeat;transform:none;display:grid;place-items:center}
#character-slots .slot-emblem{isolation:isolate;background:none}
#character-slots .slot-emblem:before{content:'';position:absolute;inset:3px;border-radius:50%;background:radial-gradient(circle at 38% 28%,#354438,#101d15 72%);box-shadow:inset 0 1px 3px #0009;z-index:-2}
#character-slots .slot-emblem:after{content:'';position:absolute;inset:0;background:url('hud-class-frame-v1.png') center/contain no-repeat;filter:blur(.3px) saturate(.72) brightness(.95);pointer-events:none;z-index:-1}
#character-slots .slot-emblem svg,#character-slots .slot-emblem img.class-icon{width:24px;height:24px;margin:0;padding:0;transform:none}
#character-slots .hero-slot[data-hero-class='empty'] .slot-emblem{display:none}
#character-slots .hero-slot strong{color:#f0e3c8}
#character-slots .hero-slot:not([data-hero-class='empty']) strong{left:18%;width:64%;top:78%}
#character-slots .hero-slot .slot-detail{top:83%}
#character-slots .hero-slot .slot-level{top:86.5%}
#character-slots .hero-slot small{bottom:12%}
#character-slots .slot-detail,#character-slots .slot-level,#character-slots .hero-slot small{color:#cbbd9f}
#character-slots .hero-slot:hover .slot-plus{filter:drop-shadow(0 0 6px #c6ad7955)}
#character-slots .slot-actions button,#character-slots .slot-secondary,#character-slots .slot-actions button:hover,#character-slots .slot-secondary:hover{border:0;border-radius:0;background:transparent url('character-menu/button-hud-v3.png') center/100% 100% no-repeat;color:#ecdfc3;box-shadow:none}
#character-slots #slot-play,#character-slots #slot-create{width:min(358.4px,340px);height:auto;aspect-ratio:500/150;max-height:none;padding:0;display:grid;place-items:center;font-size:clamp(18px,25.6px,32px);line-height:1;animation:none}
#character-slots .slots-title h2 span,#character-slots .slot-secondary,#character-slots .slot-secondary:hover{background-size:100% 175%}
#character-slots #slot-play:before,#character-slots #slot-play:after{display:none}
#character-slots #slot-play:hover,#character-slots #slot-create:hover{animation:none;filter:brightness(1.16) drop-shadow(0 0 5px #c7b18255)}
#character-slots #slot-delete,#character-slots #slot-delete:hover{padding:0 16px;border:0;background:transparent url('character-menu/button-hud-v3.png') center/100% 100% no-repeat;color:#d7c5a3;box-shadow:none;height:36px}
#character-slots #slot-delete,#character-slots #slot-delete:hover{background-size:100% 180%}
#slot-delete-dialog{border-color:#ad9468;background:linear-gradient(145deg,#233328,#0c180f);box-shadow:inset 0 0 0 3px #0a130d,inset 0 0 0 4px #8e785544,0 12px 70px #000b}
#slot-delete-dialog h2{color:#e9d8b8}
#slot-delete-dialog button{border:0;border-radius:0;background:transparent url('character-menu/button-hud-v3.png') center/100% 100% no-repeat;color:#e6d6b8;padding:14px 28px}
#slot-delete-dialog #slot-delete-confirm{background:transparent url('character-menu/button-hud-v3.png') center/100% 100% no-repeat;color:#e0af94;border:0}
#slot-delete-dialog>div{gap:10px;justify-content:center;margin-top:20px}
#slot-delete-dialog button,#slot-delete-dialog button:hover{position:relative;isolation:isolate;overflow:hidden;flex:1;min-width:0;height:62px;padding:0 12px;border:0;border-radius:0;box-shadow:none;outline:none;appearance:none;background:transparent url('character-menu/play-hud-v4.png') center/100% 100% no-repeat;color:#f0dfbc;font:16px Georgia;text-shadow:0 1px 3px #000;transition:transform .2s,filter .2s}
#slot-delete-dialog button:focus,#slot-delete-dialog button:focus-visible,#slot-delete-dialog button:active{outline:none;box-shadow:none;border:0}
#slot-delete-dialog #slot-delete-confirm,#slot-delete-dialog #slot-delete-confirm:hover{background:transparent url('character-menu/play-hud-v5.png') center/100% 100% no-repeat;color:#fff0dc;border:0}
#slot-delete-dialog button::after{content:'';position:absolute;inset:15px 9px;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#fff1c64d 50%,transparent 60%);background-size:300% 100%;background-position:100% 0;opacity:0;mix-blend-mode:screen}
#slot-delete-dialog button:hover,#slot-delete-dialog button:focus-visible{transform:translateY(-2px) scale(1.03);filter:brightness(1.2) drop-shadow(0 0 5px #d4af6266)}
#slot-delete-dialog #slot-delete-confirm:hover,#slot-delete-dialog #slot-delete-confirm:focus-visible{filter:brightness(1.25) drop-shadow(0 0 7px #da4b3880)}
#slot-delete-dialog button:hover::after,#slot-delete-dialog button:focus-visible::after{opacity:1;animation:delete-ruby-shine 1.6s ease-in-out infinite}
#slot-delete-dialog button:active{transform:translateY(1px) scale(.95);filter:brightness(1.35)}
@media(prefers-reduced-motion:reduce){#slot-delete-dialog button{transition:none}#slot-delete-dialog button::after{display:none}}
#character-exit #slot-return{border:0;background:transparent url('character-menu/button-hud-v3.png') center/100% 100% no-repeat;color:#e9d9b9;font-family:Georgia,serif}
@media(max-width:0px){#character-slots .slots-title h2 span{padding:10px 22px}#character-slots #slot-play,#character-slots #slot-create{width:486.4px;font-size:clamp(16px,38.4px,24px)}#character-slots .slot-emblem{width:30px;height:30px;left:calc(50% - 15px)}#character-slots .slot-emblem svg,#character-slots .slot-emblem img.class-icon{width:18px;height:18px}}
#character-slots #slot-play,#character-slots #slot-play:hover,#character-slots #slot-create,#character-slots #slot-create:hover{width:min(384px,360px);aspect-ratio:360/130;background-image:url('character-menu/play-hud-v4.png');background-size:100% 100%;background-repeat:no-repeat;font-size:clamp(22px,28.16px,34px)}
#character-slots #slot-create,#character-slots #slot-create:hover{font-size:clamp(16px,20.48px,25px);letter-spacing:.035em}
@media(max-width:0px){#character-slots #slot-play,#character-slots #slot-create{width:512px;font-size:clamp(18px,38.4px,26px)}#character-slots #slot-create,#character-slots #slot-create:hover{font-size:clamp(13px,25.6px,18px)}}
@media(max-width:0px){#character-slots .slot-emblem:before{inset:5px}}
#character-slots #slot-settings,#character-slots #slot-exit,
#character-slots #slot-settings:hover,#character-slots #slot-exit:hover{background-image:url('character-menu/secondary-hud-v4.png');background-size:contain;background-position:center;background-repeat:no-repeat;width:clamp(190px,256px,260px);height:auto;aspect-ratio:2072/759;padding:0;font-size:clamp(13px,14.08px,18px)}
#character-slots #slot-settings,#character-slots #slot-exit{bottom:0;display:flex;align-items:center;justify-content:center;gap:8px;line-height:1;text-align:center}
#character-slots #slot-settings span,#character-slots #slot-exit span{margin:0;line-height:1}
#character-slots #slot-delete,#character-slots #slot-delete:hover{top:79.8%;width:clamp(120px,166.4px,185px);max-width:none;height:auto;aspect-ratio:2072/759;background-image:url('character-menu/secondary-hud-v4.png');background-size:contain;background-repeat:no-repeat;padding:0 14px;font-size:clamp(9px,9.984px,12px);line-height:1;white-space:nowrap;box-sizing:border-box}
@media(max-width:0px){#character-slots #slot-delete,#character-slots #slot-delete:hover{top:78.8%;width:clamp(105px,217.6px,130px);font-size:9px}}
#character-slots .slots-title h2 span{position:relative;isolation:isolate;border:0;background:none;padding:12px 40px;text-shadow:0 2px 5px #000}
#character-slots .slots-title h2 span:before{content:'';position:absolute;inset:-5px -35px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,#080b0de6 0%,#090c0dc9 35%,#090c0d66 63%,transparent 82%);filter:blur(4px)}
@media(max-width:0px){#character-slots .slots-title h2 span{padding:10px 22px}}

/* Uniform 1280 x 720 design canvas, centered inside any window shape. */
#character-slots{inset:auto;left:50%;top:50%;width:1280px;height:720px;padding:0 48px;background:transparent;transform:translate(-50%,-50%) scale(var(--menu-scale,1));transform-origin:center}
#character-slots{--delete-center:13.1%}
#character-slots[data-selected-slot='1']{--delete-center:31.55%}
#character-slots[data-selected-slot='2']{--delete-center:50%}
#character-slots[data-selected-slot='3']{--delete-center:68.45%}
#character-slots[data-selected-slot='4']{--delete-center:86.9%}
#character-slots::before{display:none}
body.in-character-menu{background:linear-gradient(#0001,transparent 40%,#0004),url("character-menu/background-v3.png") center/cover fixed}
body.in-character-menu::before{content:'';position:fixed;inset:-4%;pointer-events:none;z-index:899;background:radial-gradient(ellipse at 72% 18%,#ffe4a320,transparent 48%),radial-gradient(ellipse at 25% 65%,#b8edd012,transparent 45%);animation:menu-light-haze 22s ease-in-out infinite alternate}
@keyframes menu-light-haze{from{transform:translateX(-1.5%);opacity:.45}to{transform:translateX(1.5%);opacity:.9}}
@media(prefers-reduced-motion:reduce){body.in-character-menu::before{animation:none}}
#character-slots #slot-play,#character-slots #slot-play:hover{background-image:url('character-menu/play-hud-v5.png')}
#character-slots #slot-play,#character-slots #slot-play:hover,#character-slots #slot-create,#character-slots #slot-create:hover{width:min(360px,calc(360px / var(--menu-scale,1)))}
#character-slots #slot-play,#character-slots #slot-play:hover{font-size:min(28.16px,calc(28.16px / var(--menu-scale,1)))}
#character-slots #slot-create,#character-slots #slot-create:hover{font-size:min(20.48px,calc(20.48px / var(--menu-scale,1)))}
#character-slots #slot-create,#character-slots #slot-create:hover{background-image:url('character-menu/create-hud-v1.png')}
#character-slots #slot-delete,#character-slots #slot-delete:hover{top:calc(76.8% + 4px);width:155px;height:27px;aspect-ratio:auto;padding:0 8px;background-image:url('character-menu/delete-hud-v1.png');background-size:100% 300%;background-position:center;color:#f0d0c5;font-size:10px;line-height:1;display:flex;align-items:center;justify-content:center;transform:translateX(-50%);text-shadow:0 1px 2px #000;z-index:8}
#character-slots #slot-delete{overflow:hidden;transition:filter .22s ease,transform .22s ease;color:#f0d0c5}
#character-slots #slot-delete::after{content:'';position:absolute;inset:3px 7px;pointer-events:none;border-radius:3px;background:linear-gradient(110deg,transparent 35%,#ffdfc330 47%,#fff2d466 50%,#ffdfc330 53%,transparent 65%);background-size:300% 100%;background-position:100% 0;opacity:0;mix-blend-mode:screen}
#character-slots #slot-delete:hover,#character-slots #slot-delete:focus-visible{transform:translateX(-50%);color:#fff0d7;animation:delete-ruby-glow 1.6s ease-in-out infinite}
#character-slots #slot-delete:hover::after,#character-slots #slot-delete:focus-visible::after{opacity:1;animation:delete-ruby-shine 1.8s ease-in-out infinite}
#character-slots #slot-delete:active{transform:translateX(-50%);animation:none;filter:brightness(1.3)}
@keyframes delete-ruby-glow{0%,100%{filter:brightness(1.12) drop-shadow(0 0 3px #ba352b66)}50%{filter:brightness(1.3) drop-shadow(0 0 7px #e4604088)}}
@keyframes delete-ruby-shine{from{background-position:100% 0}70%,100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){#character-slots #slot-delete{transition:none}#character-slots #slot-delete:hover,#character-slots #slot-delete:focus-visible{animation:none;filter:brightness(1.2)}#character-slots #slot-delete::after{display:none}}
#character-slots .hero-slot.selected .slot-frame{animation:selected-slot-glow 3.6s ease-in-out infinite}
@keyframes selected-slot-glow{0%,100%{filter:brightness(1.1) drop-shadow(0 0 3px #f0ca7880) drop-shadow(0 0 8px #b9883540)}50%{filter:brightness(1.3) drop-shadow(0 0 6px #ffe3a9b3) drop-shadow(0 0 17px #dba94a77)}}
#character-slots .hero-slot.selected,#character-slots .hero-slot.selected:hover{box-shadow:none;border:0;background:none;filter:none}
/* Original implementation inspired by Matt Popovich's layered golden-card demo. */
@property --slot-foil-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.slot-gold-fx{display:none;position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden;border-radius:12px}
#character-slots .hero-slot.selected .slot-gold-fx{display:block}
.slot-gold-fx i{position:absolute;left:var(--spark-x);bottom:7%;width:var(--spark-size);height:var(--spark-size);border-radius:50%;background:#fff0b7;box-shadow:0 0 4px 1px #ffd575aa,0 0 9px #d9993c77;opacity:0;animation:slot-ember-rise var(--spark-duration) linear var(--spark-delay) infinite}
@keyframes slot-ember-rise{0%{opacity:0;transform:translate(0,0) scale(.5)}12%{opacity:.85}35%{opacity:.45}55%{opacity:.9;transform:translate(var(--spark-drift),-190px) scale(.75)}85%{opacity:.35}100%{opacity:0;transform:translate(calc(var(--spark-drift)*-.4),-390px) scale(.25)}}
#character-slots .hero-slot.selected:not([data-hero-class='empty']):before{background-size:cover;background-position:center;animation:none}
@media(prefers-reduced-motion:reduce){.slot-gold-fx i{display:none}.slot-gold-foil{animation:none;opacity:.25}#character-slots .hero-slot.selected:not([data-hero-class='empty']):before{animation:none}}
@media(prefers-reduced-motion:reduce){#character-slots .hero-slot.selected .slot-frame{animation:none;filter:brightness(1.2) drop-shadow(0 0 6px #e9c27c88)}}
.menu-weather{display:none;position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:898}
body.in-character-menu .menu-weather{display:block}
.menu-weather i{position:absolute;animation-delay:var(--delay);animation-duration:var(--duration);animation-iteration-count:infinite;pointer-events:none}
.menu-firefly{left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#fff1a9;box-shadow:0 0 5px 2px #e9c55b99,0 0 14px 4px #cce48433;animation-name:menu-firefly-drift;animation-timing-function:ease-in-out}
@keyframes menu-firefly-drift{0%,100%{opacity:0;transform:translate(0,0)}20%{opacity:.8}45%{opacity:.25;transform:translate(var(--drift),-40px)}70%{opacity:.85;transform:translate(calc(var(--drift)*.4),-65px)}}
.menu-leaf{left:var(--x);top:-30px;width:9px;height:5px;border-radius:90% 0 90% 0;background:linear-gradient(35deg,#7e6c2b,#c29f4c);box-shadow:0 0 2px #e6b15b55;animation-name:menu-leaf-fall;animation-timing-function:linear}
@keyframes menu-leaf-fall{0%{opacity:0;transform:translate(0,0) rotate(0deg)}12%{opacity:.65}85%{opacity:.5}100%{opacity:0;transform:translate(var(--drift),105vh) rotate(300deg)}}
.menu-mist{left:-30%;top:var(--y);width:160%;height:24%;background:radial-gradient(ellipse,#ebeadb22,transparent 65%);filter:blur(22px);animation-name:menu-mist-drift;animation-direction:alternate;animation-timing-function:ease-in-out}
@keyframes menu-mist-drift{from{opacity:.25;transform:translateX(-8%)}to{opacity:.8;transform:translateX(8%)}}
body.in-character-menu::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:898;background:conic-gradient(from 125deg at 23% 12%,transparent 0deg,#ffe7a318 7deg,transparent 16deg,#ffe4aa12 26deg,transparent 35deg);animation:menu-rays 18s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes menu-rays{from{opacity:.2;transform:scale(1.04) rotate(-1deg)}to{opacity:.7;transform:scale(1.08) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){.menu-weather i,body.in-character-menu::after{animation:none}.menu-leaf{display:none}.menu-firefly{opacity:.3}.menu-mist{opacity:.25}}