@import url("/collection-art.css");
.cosmetic-card{box-sizing:border-box;position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:340px;min-height:408px;margin:auto;padding:29px 25px 22px;border:1px solid #d0bfd8;border-radius:20px;text-align:center;background:linear-gradient(145deg,#f4edf6,#e6dced);box-shadow:0 10px 0 -5px #e3d9e7,0 18px 35px #69547613;color:#6b5478;font-family:'Apple SD Gothic Neo','Malgun Gothic',sans-serif}
.cosmetic-card::before{content:'';position:absolute;inset:10px;border:1px solid #fffc;border-radius:12px;pointer-events:none}
.cosmetic-card-heading{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;z-index:1;color:#776282}
.cosmetic-card-heading img{width:25px;height:30px;object-fit:contain;flex-shrink:0}.cosmetic-card-heading b{display:block;font:600 15px/1.5 Georgia,'Batang',serif;letter-spacing:-.3px}.cosmetic-card-heading small{display:block;margin-top:4px;font-size:6px;letter-spacing:1.5px;color:#a18bab;line-height:1.5}
.cosmetic-card-portrait{display:block;margin:15px auto 3px;position:relative;z-index:1;max-width:100%;height:auto!important}
.cosmetic-card-eyebrow{display:block;font-size:7px;letter-spacing:2.4px;color:#a08aab;position:relative}
.cosmetic-card-name{position:relative;margin:8px 0 10px;font:600 24px/1.4 'Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:#70557f;letter-spacing:-.7px;overflow-wrap:anywhere}
.cosmetic-title{display:table;position:relative;z-index:1;max-width:calc(100% - 20px);margin:9px auto 0;padding:5px 12px;border:1px solid #b7a1bc5c;border-radius:20px;background:#fffbf17d;color:#81628f;font:10px/1.5 'Apple SD Gothic Neo','Malgun Gothic',sans-serif;letter-spacing:.1px;overflow-wrap:anywhere}
.cosmetic-card-familiar{position:relative;margin:11px 0 20px;font-size:10px;line-height:1.6;color:#9c87a5}
.cosmetic-card-footer{position:relative;display:inline-block;padding-top:11px;border-top:1px solid #b5a0bb4d;font-size:9px;letter-spacing:.6px;color:#a28cab}
.cosmetic-card-role{position:absolute;right:24px;top:79px;padding:4px 9px;border-radius:12px;background:#fffaf0b3;border:1px solid #d7bd8575;font:9px/1.3 'Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:#a3874e}
.cosmetic-kingdom{background:linear-gradient(145deg,#fffdf5,#f5edda);border-color:#dfcca1}.cosmetic-kingdom .cosmetic-card-heading{color:#9c8044}.cosmetic-kingdom .cosmetic-card-name{color:#8f7139}.cosmetic-kingdom .cosmetic-card-heading small,.cosmetic-kingdom .cosmetic-card-eyebrow,.cosmetic-kingdom .cosmetic-card-familiar,.cosmetic-kingdom .cosmetic-card-footer{color:#ac996e}
.cosmetic-card.cosmetic-castle[data-cosmetic-theme="candle"]{background:linear-gradient(145deg,#f4eadd,#ead8c7);border-color:#d8c0a3}.cosmetic-card.cosmetic-castle[data-cosmetic-theme="garden"]{background:linear-gradient(145deg,#e8eee0,#d5e0d2);border-color:#bfcfb7}
.cosmetic-decorated{isolation:isolate}.cosmetic-decorated[data-cosmetic-background="bg-cream"]{background:radial-gradient(ellipse at 40% 16%,#fffdf6,#f5ead1 95%)!important}
.cosmetic-decorated[data-cosmetic-background="bg-strawberry"]{background:linear-gradient(90deg,#fff7 50%,transparent 50%),linear-gradient(#fff7 50%,transparent 50%),#f5e0e9!important;background-size:28px 28px!important}
.cosmetic-decorated[data-cosmetic-background="bg-lavender"]{background:url('/assets/cosmetic-cloud.svg') -24px 22% / 54% auto no-repeat,url('/assets/cosmetic-cloud.svg') calc(100% + 34px) 76% / 70% auto no-repeat,linear-gradient(150deg,#f6f0fc,#e6dcf2)!important}
.cosmetic-decorated[data-cosmetic-background="bg-moonlight"]{background:radial-gradient(circle at 83% 27%,#fff7cf 0 6%,transparent 6.5%),url('/assets/cosmetic-cloud.svg') -24px 70% / 65% auto no-repeat,linear-gradient(145deg,#f7f7ff,#e3e9f6)!important}
.cosmetic-decorated[data-cosmetic-background="bg-night"]{background:radial-gradient(circle at 13% 23%,#fff8 0 1px,transparent 2px),radial-gradient(circle at 87% 75%,#fff9 0 1.5px,transparent 2.5px),radial-gradient(circle at 76% 29%,#fff9 0 1px,transparent 2px),radial-gradient(circle at 24% 68%,#fff9 0 1px,transparent 2px),linear-gradient(145deg,#e6e3f3,#d2d8ec)!important}
.cosmetic-decorated[data-cosmetic-frame="frame-gold"]{border-color:#c7a867!important;box-shadow:inset 0 0 0 5px #fff9, inset 0 0 0 6px #dac28a,0 12px 28px #8d704c12!important}
.cosmetic-decorated[data-cosmetic-frame="frame-pearl"]{border:1px solid #d4c5b4!important;box-shadow:inset 0 0 0 4px #fff8,inset 0 0 0 15px #faf2e338,0 12px 28px #8e759c14!important}
.cosmetic-decorated[data-cosmetic-frame="frame-lace"]{border:2px solid #dac4a8!important;box-shadow:inset 0 0 0 6px #fff7e9,0 12px 28px #8e759c14!important}
.cosmetic-decorated[data-cosmetic-frame="frame-ribbon"]{border:2px solid #d9afc1!important;box-shadow:inset 0 0 0 6px #fff6,0 12px 28px #a37a8d15!important}
.cosmetic-decorated[data-cosmetic-frame="frame-garden"]{border:2px solid #acc3a6!important;box-shadow:inset 0 0 0 6px #fff8,0 12px 28px #74886a14!important}
.cosmetic-ornaments{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;box-sizing:border-box}
.cosmetic-edge{position:absolute;display:block;pointer-events:none}
.cosmetic-decorated[data-cosmetic-frame="frame-pearl"]{--pearl:url('/assets/cosmetic-pearl.svg')}
.cosmetic-decorated[data-cosmetic-frame="frame-pearl"] .cosmetic-edge{background-image:var(--pearl);background-size:12px 12px}
.cosmetic-decorated[data-cosmetic-frame="frame-pearl"] .cosmetic-edge-top,.cosmetic-decorated[data-cosmetic-frame="frame-pearl"] .cosmetic-edge-bottom{left:27px;right:27px;height:12px;background-repeat:round no-repeat}
.cosmetic-decorated[data-cosmetic-frame="frame-pearl"] .cosmetic-edge-top{top:3px}.cosmetic-decorated[data-cosmetic-frame="frame-pearl"] .cosmetic-edge-bottom{bottom:3px}
.cosmetic-decorated[data-cosmetic-frame="frame-pearl"] .cosmetic-edge-left,.cosmetic-decorated[data-cosmetic-frame="frame-pearl"] .cosmetic-edge-right{top:27px;bottom:27px;width:12px;background-repeat:no-repeat round}
.cosmetic-decorated[data-cosmetic-frame="frame-pearl"] .cosmetic-edge-left{left:3px}.cosmetic-decorated[data-cosmetic-frame="frame-pearl"] .cosmetic-edge-right{right:3px}
.cosmetic-pearl-turn{position:absolute;width:28px;height:28px;background-image:var(--pearl),var(--pearl),var(--pearl),var(--pearl);background-size:12px 12px;background-repeat:no-repeat;background-position:1px 17px,3px 8px,8px 3px,17px 1px}
.cosmetic-pearl-turn.cosmetic-tl{top:2px;left:2px}.cosmetic-pearl-turn.cosmetic-tr{top:2px;right:2px}.cosmetic-pearl-turn.cosmetic-bl{bottom:2px;left:2px}.cosmetic-pearl-turn.cosmetic-br{bottom:2px;right:2px}
.cosmetic-decorated[data-cosmetic-frame="frame-lace"] .cosmetic-edge-top,.cosmetic-decorated[data-cosmetic-frame="frame-lace"] .cosmetic-edge-bottom{left:22px;right:22px;height:18px;background:url('/assets/cosmetic-lace.svg') 0 0 / 24px 18px repeat-x}
.cosmetic-decorated[data-cosmetic-frame="frame-lace"] .cosmetic-edge-top{top:5px}.cosmetic-decorated[data-cosmetic-frame="frame-lace"] .cosmetic-edge-bottom{bottom:5px;transform:scaleY(-1)}
.cosmetic-decorated[data-cosmetic-frame="frame-lace"] .cosmetic-edge-left,.cosmetic-decorated[data-cosmetic-frame="frame-lace"] .cosmetic-edge-right{top:22px;bottom:22px;width:18px;background:url('/assets/cosmetic-lace-side.svg') 0 0 / 18px 24px repeat-y}
.cosmetic-decorated[data-cosmetic-frame="frame-lace"] .cosmetic-edge-left{left:5px}.cosmetic-decorated[data-cosmetic-frame="frame-lace"] .cosmetic-edge-right{right:5px;transform:scaleX(-1)}
.cosmetic-decorated[data-cosmetic-frame="frame-lace"] .cosmetic-corner{width:33px;height:33px}
.cosmetic-corner{position:absolute;display:block;width:39px;height:39px}.cosmetic-corner svg{display:block;width:100%;height:100%}.cosmetic-tl{top:5px;left:5px}.cosmetic-tr{top:5px;right:5px;transform:scaleX(-1)}.cosmetic-bl{bottom:5px;left:5px;transform:scaleY(-1)}.cosmetic-br{bottom:5px;right:5px;transform:scale(-1)}
.cosmetic-decorated[data-cosmetic-frame="frame-ribbon"]>.cosmetic-ornaments .cosmetic-tr,.cosmetic-decorated[data-cosmetic-frame="frame-ribbon"]>.cosmetic-ornaments .cosmetic-bl{display:none}
.cosmetic-decorated[data-cosmetic-frame="frame-ribbon"]>.cosmetic-ornaments .cosmetic-br{transform:none}
.resident-card.cosmetic-decorated>.cosmetic-title{margin-bottom:3px}.resident-card.cosmetic-decorated>.cosmetic-title+p{margin-top:8px}.resident-card.cosmetic-decorated>.cosmetic-ornaments{margin:0}
@media(max-width:600px){.cosmetic-card{min-height:335px;padding:23px 20px 18px}.cosmetic-card-portrait{width:130px!important;margin:10px auto 1px}.cosmetic-card-heading b{font-size:14px}.cosmetic-card-heading small{font-size:5.5px;letter-spacing:1.1px}.cosmetic-card-name{font-size:22px;margin:5px 0 7px}.cosmetic-card-familiar{margin:8px 0 13px;font-size:9px}.cosmetic-card-footer{font-size:8px;padding-top:8px}.cosmetic-title{font-size:9px;padding:4px 10px;margin-top:6px}.cosmetic-card-role{top:69px;right:21px;font-size:8px}.cosmetic-corner{width:35px;height:35px}}
.cosmetic-decorated[data-cosmetic-frame="frame-starlight"]{border:2px solid #cbae76!important;box-shadow:inset 0 0 0 7px #fff8df,inset 0 0 0 9px #e7d1a2,0 9px 30px #d4b9dd30!important}.cosmetic-decorated[data-cosmetic-frame="frame-starlight"] .cosmetic-corner{width:55px;height:55px}.cosmetic-decorated[data-cosmetic-background="bg-aurora"]{background:radial-gradient(ellipse at 18% 25%,#c9e9e3a8,transparent 55%),radial-gradient(ellipse at 80% 65%,#f1c9de90,transparent 55%),linear-gradient(140deg,#f5eaf9,#ddd7f0 50%,#e6f2ee)!important}
.cosmetic-sky{position:absolute;inset:0;overflow:hidden;border-radius:inherit;z-index:0;pointer-events:none}.cosmetic-sky[hidden]{display:none}.cosmetic-sky-star{position:absolute;color:#fff7d3;line-height:1;text-shadow:0 0 4px #fff8,0 1px 1px #a58aaf70;transform:translate(-50%,-50%)}
.cosmetic-decorated[data-cosmetic-background="bg-night"]{background:linear-gradient(145deg,#ded8ee,#c7cce5)!important}
.cosmetic-decorated[data-cosmetic-background="bg-aurora"]{background:radial-gradient(ellipse at 17% 25%,#c5e9daac,transparent 55%),radial-gradient(ellipse at 85% 65%,#edbcd9a8,transparent 57%),linear-gradient(135deg,#e4d5f0,#c9c7e8 50%,#d5e9e5)!important}
.cosmetic-decorated[data-cosmetic-background="bg-rose-dream"]{background:url('/assets/cosmetic-cloud.svg') -25px 25%/65% auto no-repeat,url('/assets/cosmetic-cloud.svg') calc(100% + 20px) 80%/60% auto no-repeat,radial-gradient(ellipse at 75% 20%,#ffece3,transparent 65%),linear-gradient(140deg,#efd1e1,#e0d2ed)!important}.cosmetic-decorated[data-cosmetic-background="bg-rose-dream"] .cosmetic-sky-star{color:#b58aac;text-shadow:0 0 5px #fff}
.cosmetic-decorated[data-cosmetic-background="bg-moon-lake"]{background:radial-gradient(circle at 82% 25%,#d6e7ec 0 5%,transparent 5.4%),radial-gradient(circle at 80% 26%,#fff8da 0 6%,transparent 6.4%),repeating-linear-gradient(0deg,transparent 0 28px,#ffffff22 29px 30px),linear-gradient(155deg,#e1e8f1,#b8d6dd)!important}
.cosmetic-decorated[data-cosmetic-frame="frame-moon-vine"]{border:2px solid #b7ad84!important;box-shadow:inset 0 0 0 6px #fff8e4,inset 0 0 0 8px #c7c7a8,0 10px 28px #9caa8c25!important}.cosmetic-decorated[data-cosmetic-frame="frame-moon-vine"] .cosmetic-corner{width:57px;height:57px}
.cosmetic-decorated[data-cosmetic-frame="frame-crystal"]{border:2px solid #ac9cbe!important;box-shadow:inset 0 0 0 5px #f6edff,inset 0 0 0 7px #c7b8dc,inset 0 0 0 10px #ffffff6b,0 10px 28px #baacd62b!important}.cosmetic-decorated[data-cosmetic-frame="frame-crystal"] .cosmetic-corner{width:49px;height:49px}

/* Royal identity stays visible while purchased frames and backgrounds can still be worn. */
.royal-card[data-cosmetic-background="bg-original"]{background:radial-gradient(ellipse at 50% 32%,#fffcf5 0%,#f3e9f7 55%,#e1d0ed 100%)!important}
.royal-card[data-cosmetic-frame="frame-basic"]{border:1px solid #c9aa6c!important;box-shadow:inset 0 0 0 6px #fff8ed,inset 0 0 0 7px #dfc796,0 14px 32px #9274a022!important}
.royal-card .resident-card-heading,.royal-card .cosmetic-card-heading{color:#917044}.royal-card .resident-number,.royal-card .cosmetic-card-eyebrow{color:#a17b3f;font-size:11px;font-weight:700;letter-spacing:1.6px}.royal-card .card-corner{color:#c49d59;font-size:22px}.royal-card .resident-role,.royal-card .cosmetic-card-role{background:#fff6df;border-color:#d4b778;color:#99723c;letter-spacing:1px}.royal-card .card-stamp{border-color:#d7bc88;color:#9b7949}.royal-card .cosmetic-title{background:#fff9eb;color:#987549;border-color:#d9bf8c}.royal-card .cosmetic-card-role{position:relative;display:table;right:auto;top:auto;margin:12px auto 0}.royal-card .cosmetic-card-role+.cosmetic-card-portrait{margin-top:2px}

/* Both the catalogue and the worn label use drawTitleFrame, including every petal and star point. */
.cosmetic-title.title-framed{display:table;position:relative;min-width:132px;max-width:calc(100% - 8px);min-height:44px;padding:14px 34px;margin:4px auto 0;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;color:#75537e;font:600 10px/16px 'Apple SD Gothic Neo','Malgun Gothic',sans-serif;white-space:nowrap;overflow:visible}
.cosmetic-title.title-framed::before,.cosmetic-title.title-framed::after{content:none!important;display:none!important}
.cosmetic-title.title-framed .title-frame-art{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;pointer-events:none}
.cosmetic-title.title-framed .title-frame-label{position:relative;display:block;z-index:1;line-height:16px;font-size:inherit;color:inherit;text-align:center}
.cosmetic-title.title-framed[data-title-frame="titleframe-leaf"]{color:#526c48}.cosmetic-title.title-framed[data-title-frame="titleframe-pearl"]{color:#806542}.cosmetic-title.title-framed[data-title-frame="titleframe-royal"]{color:#89566e}
@media(max-width:600px){.cosmetic-title.title-framed{font-size:10px;max-width:100%;padding-inline:31px}}

/* Reserve equal space on both sides so the words, not logo plus words, are centered. */
.resident-card-heading,.cosmetic-card-heading{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;align-items:center;justify-content:normal;gap:5px;width:100%;text-align:center}.resident-card-heading>img,.cosmetic-card-heading>img{width:25px;height:30px;object-fit:contain;justify-self:center}.resident-card-heading>div,.cosmetic-card-heading>div{min-width:0}.resident-card-heading b,.cosmetic-card-heading b{display:block;line-height:1.4;white-space:nowrap}.resident-card-heading small,.cosmetic-card-heading small{margin-top:5px;line-height:1.4;letter-spacing:1px}
@media(max-width:400px){.resident-card-heading,.cosmetic-card-heading{grid-template-columns:24px minmax(0,1fr) 24px;gap:3px}.resident-card-heading>img,.cosmetic-card-heading>img{width:22px;height:27px}.cosmetic-card-heading b{font-size:13px}}

/* The issued number is plain text, only on resident-card surfaces. */
:is(.resident-card,.cosmetic-card) .resident-number-badge{position:relative;z-index:4;display:table;width:max-content;max-width:100%;margin:7px auto 12px;padding:0;border:0;border-radius:0;background:none;color:#604471;font:600 13px/1.5 'Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:1.3px;white-space:nowrap;box-shadow:none}
:is(.hero-card,.cosmetic-kingdom,.royal-card) .resident-number-badge{color:#755321}
:is(.resident-card,.cosmetic-card) .resident-number-badge[hidden]{display:none}