:root{--pink:#f6b9d1;--pink2:#ffdbe9;--ink:#6f3f55;--line:#df92b3}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#5b3a49;background:linear-gradient(#ffffff73,#ffffff73),repeating-linear-gradient(0deg,#fbd9e6 0 18px,#f6cbdc 18px 36px)}a{color:inherit;text-decoration:none}.site{width:min(1180px,96vw);margin:18px auto 32px}.header{border:2px dashed var(--line);background:#fff8fcf0;border-radius:14px;padding:20px 18px 16px;text-align:center;box-shadow:0 5px 15px #854d6626}.header h1{margin:0;font:clamp(38px,7vw,72px) Georgia,serif;color:#db739f;text-shadow:2px 2px #fff}.header p{margin:8px 0 0;font-size:15px}.nav{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin:12px 0}.nav a{padding:10px 6px;text-align:center;background:linear-gradient(#fff,#ffe1ec);border:2px solid var(--line);border-radius:10px;font-weight:700;color:var(--ink)}.layout{display:grid;grid-template-columns:220px minmax(0,1fr) 250px;gap:12px;align-items:start}.stack{display:flex;flex-direction:column;gap:12px}.card,.blog-post,.comments{background:#fffafcf5;border:2px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 4px 10px #7d486118}.card-title{padding:9px 12px;background:linear-gradient(#ffe8f1,#f8c8da);border-bottom:1px dashed var(--line);font:700 18px Georgia,serif;color:var(--ink)}.card-body{padding:12px}.profile-photo,.placeholder{background:linear-gradient(135deg,#ffe1ed,#fff7fb);border:2px dashed var(--line);border-radius:10px;min-height:165px;display:grid;place-items:center;text-align:center;color:#af708c}.profile-photo img,.closet-grid img,.stamp-grid img{max-width:100%;max-height:100%;object-fit:cover}.profile-photo{margin-bottom:12px}.status-list{display:grid;gap:8px;font-size:14px}.status-list div{border-bottom:1px dashed #e6b1c7;padding-bottom:6px}.links a{display:block;padding:7px 9px;margin-bottom:6px;background:#fff0f6;border:1px solid #e4abc2;border-radius:7px}.post-meta{padding:8px 12px;background:#fde3ed;border-bottom:1px dashed var(--line);color:#9c647e;font-size:12px}.post-content{padding:14px}.post-content h2{margin:0 0 10px;font:700 22px Georgia,serif;color:var(--ink)}.post-body{font-size:14px;line-height:1.65}.post-image{float:left;width:175px;min-height:130px;margin:0 14px 10px 0;object-fit:cover;border-radius:8px}.clear{clear:both}.comment-link{text-align:right;margin-top:10px;font-size:13px;font-weight:700}.comment{padding:12px 14px;border-top:1px solid #efc2d3;font-size:13px}.comment strong{color:#b0507b}.closet-grid,.stamp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.closet-grid div,.stamp-grid div{aspect-ratio:1;display:grid;place-items:center;text-align:center;border:1px dashed var(--line);border-radius:6px;background:#fff0f6;font-size:11px;padding:4px}.playlist{text-align:center}.playlist p{margin:0 0 12px;line-height:1.45}.playlist-button{display:inline-block;width:100%;padding:11px 12px;background:linear-gradient(#ffd5e5,#f4aeca);border:2px solid #d780a5;border-radius:10px;color:#743d56;font-weight:700}.footer{margin-top:14px;text-align:center;padding:22px 10px;border-top:2px dashed var(--line);color:#8a526b}@media(max-width:900px){.layout{grid-template-columns:1fr}.nav{grid-template-columns:repeat(4,1fr)}.post-image{float:none;width:100%;margin:0 0 12px}}@media(max-width:520px){.nav{grid-template-columns:repeat(2,1fr)}}
.links a small{color:#af708c;margin-left:6px;font-size:12px}
.perfume-grid{grid-template-columns:repeat(2,1fr)}.perfume-grid img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 2px;color:var(--ink)}.pager a{padding:9px 14px;background:linear-gradient(#fff,#ffe1ec);border:2px solid var(--line);border-radius:10px;font-weight:700}.pager span{font-size:13px}
.profile-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px}.closet-grid img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.stamp-grid img{width:100%;height:100%;object-fit:cover;border-radius:4px}
/* perfume box: the box stays the same size; 1 picture fills it, 2 split it in half, 3 in thirds, 4 make a 2x2 */
.perfume-n1,.perfume-n2,.perfume-n3{aspect-ratio:1;grid-template-rows:1fr}
.perfume-n1{grid-template-columns:1fr}.perfume-n2{grid-template-columns:repeat(2,1fr)}.perfume-n3{grid-template-columns:repeat(3,1fr)}
.perfume-grid.perfume-n1 div,.perfume-grid.perfume-n2 div,.perfume-grid.perfume-n3 div{aspect-ratio:auto;height:100%;padding:0;overflow:hidden}
/* big pictures must never stretch their box: every picture cell may shrink to fit its column */
.closet-grid>div,.stamp-grid>div{min-width:0;overflow:hidden}
.closet-grid img,.stamp-grid img,.profile-photo img{display:block}
/* pictures are laid over their tile and centre-cropped, so tall and wide photos both fill it evenly */
.closet-grid>div,.stamp-grid>div{position:relative;padding:0}
.closet-grid img,.stamp-grid img,.perfume-grid img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:cover;border-radius:4px}
.perfume-n1 img,.perfume-n2 img,.perfume-n3 img{inset:0;width:100%;height:100%;border-radius:0}
/* banner across the top: a wide picture, centre-cropped; the name/tagline (if kept) sit on a soft panel over it */
.header.has-banner{position:relative;padding:0;overflow:hidden}
.header .banner{display:block;width:100%;height:230px;object-fit:cover}
.header.has-banner .header-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:92%;padding:12px 28px 14px;border-radius:14px;background:rgba(255,248,252,.86);box-shadow:0 4px 14px #854d6626}
.header.has-banner .header-text h1{font-size:clamp(28px,5vw,54px)}
@media(max-width:520px){.header .banner{height:150px}.header.has-banner .header-text{padding:8px 16px 10px}}
/* the 4-button menu */
.nav{grid-template-columns:repeat(4,1fr)}
.nav a.here{background:linear-gradient(#ffd5e5,#f4aeca);border-color:#d780a5}
@media(max-width:520px){.nav{grid-template-columns:repeat(2,1fr)}}
/* inner pages */
.page-card{display:block}
.empty-note{color:#9d7688;font-size:14px;text-align:center;margin:14px 0}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.gallery a{display:block;aspect-ratio:3/4;border-radius:10px;overflow:hidden;border:2px solid var(--line);background:#fff0f6;transition:.15s}
.gallery a:hover{transform:translateY(-3px);box-shadow:0 8px 18px #7d486133}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(40,15,30,.93);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:90vh;border-radius:8px;box-shadow:0 10px 40px #000a}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:999px;width:46px;height:46px;font-size:26px;line-height:1;cursor:pointer}
.lb-close{top:16px;right:16px}.lb-prev{left:16px;top:50%;margin-top:-23px}.lb-next{right:16px;top:50%;margin-top:-23px}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.32)}
body.lb-open{overflow:hidden}
.songs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.songs li{display:flex;align-items:center;gap:12px;padding:11px 12px;background:#fff0f6;border:1px solid #e4abc2;border-radius:10px}
.song-no{flex:0 0 30px;height:30px;border-radius:50%;background:linear-gradient(#ffd5e5,#f4aeca);border:2px solid #d780a5;display:grid;place-items:center;font-weight:700;font-size:13px;color:#743d56}
.song-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow-wrap:anywhere}
.song-main b{color:var(--ink);font-size:15px}.song-main span{color:#9c647e;font-size:13px}
.song-link{flex:0 0 auto;padding:7px 14px;border:2px solid #d780a5;border-radius:999px;background:linear-gradient(#fff,#ffe1ec);font-weight:700;font-size:13px;color:#743d56}
.gb-form{display:flex;flex-direction:column;gap:12px;max-width:620px;margin:0 auto}
.gb-form label{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:13px;color:var(--ink)}
.gb-form em{font-weight:400;color:#9d7688}
.gb-form input,.gb-form textarea{padding:10px 12px;font:inherit;font-size:15px;color:#5b3a49;background:#fff;border:2px solid #e8b3c9;border-radius:9px;outline:none;width:100%}
.gb-form input:focus,.gb-form textarea:focus{border-color:#db739f}
.gb-form button{align-self:flex-start;cursor:pointer}
.gb-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gb-msg{margin:0 auto 14px;max-width:620px;padding:11px 14px;border-radius:10px;background:#e9f9ee;border:2px solid #9bd8ae;color:#2f6b45;font-weight:700;text-align:center}
.gb-msg.bad{background:#ffe9ee;border-color:#e8a0b3;color:#9c3050}
.gb-entry{padding:13px 4px;border-top:1px dashed #efc2d3}.gb-entry:first-of-type{border-top:0}
.gb-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px}
.gb-head b{color:#b0507b;font-size:15px}.gb-head span{color:#9d7688}
.gb-entry p{margin:6px 0 0;line-height:1.6;font-size:14px;overflow-wrap:anywhere}
/* dress-up game page: itch.io's own widget card, centred */
.dress-intro{text-align:center;margin:4px 0 14px;line-height:1.6}
.widget-wrap{max-width:552px;margin:0 auto}
.widget-wrap iframe{display:block;width:100%;height:167px;border:0}
.plain-link{text-decoration:underline;color:var(--ink);font-weight:700}
