/* 活泼版：作品窗口、错落和角色互动。 */
:root{--profile:#FFFBE5}
body{background-size:100% auto;background-position:center bottom;background-color:#adebfa}
.topbar{padding-top:35px}.brand{display:inline-block;transform:rotate(-4deg);font-size:46px}
.welcome{margin-top:0;padding-top:145px}
.intro-board{width:92%;margin:auto;transform:rotate(-1deg);padding:26px 38px;aspect-ratio:auto;min-height:205px;gap:9px}
.welcome .welcome-friends{width:96%;left:2%;bottom:calc(100% - 174px);transform:translateY(36px) rotate(1deg)}
.profile-row{gap:20px}.avatar-placeholder{transform:rotate(-7deg);width:80px;height:80px;border-radius:14px;box-shadow:4px 5px 0 #edc755}
.profile-name h1{font-size:42px}.identity{font-size:15px}
.platforms{display:block;position:relative;z-index:4;font-size:15px}.platforms summary{cursor:pointer;list-style:none;width:fit-content;line-height:1.5}.platforms summary::-webkit-details-marker{display:none}.platforms summary span{display:inline-block;transition:transform .2s}.platforms[open] summary span{transform:rotate(90deg)}
.platform-list{position:absolute;top:32px;left:0;max-width:calc(100vw - 105px);width:420px;display:grid;grid-template-columns:1fr 1fr;background:#fffbea;padding:18px;border-radius:8px;box-shadow:3px 5px 0 #26332e20;gap:14px;font-size:14px}.platform-list button,.account-pending{font-size:14px}.platform-list button span,.account-pending span{display:block}
.rooms{padding-top:65px}.room-grid{gap:20px;align-items:start}
.room{--lean:-3deg;--lift:0px;transform:translateY(var(--lift)) rotate(var(--lean));transition:transform .18s ease}
.room[data-room=goods]{--lean:3deg;--lift:26px}.room[data-room=wallpapers]{--lean:-2deg;--lift:-9px}
.room:not(.reserved):hover{transform:translateY(var(--lift)) rotate(var(--lean))}
.room.is-active,.room:not(.reserved).is-active:hover{transform:translateY(calc(var(--lift) - 7px)) rotate(0deg) scale(1.045)}
.room h2{position:absolute;top:13%;left:12%;font-size:clamp(30px,4vw,44px);letter-spacing:1px;transform:rotate(-3deg)}
.tile-art{position:absolute;inset:0;display:block;pointer-events:none}
.sticker-print{position:absolute;width:70%;aspect-ratio:1;bottom:5%;left:18%;background:#fff url('assets/manatee-sheet.png') 66.6667% 0/400% 400%;border-radius:48% 45% 20% 25%;transform:rotate(9deg);transition:transform .3s}
.peek-friend{position:absolute;z-index:2;width:32%;aspect-ratio:1;right:-3%;top:-16%;background:white url('assets/manatee-sheet.png') 66.6667% 66.6667%/400% 400%;border-radius:48% 48% 44% 44%;transform:rotate(13deg);transition:transform .3s;pointer-events:none}
.room.is-active .peek-friend{transform:translateY(-9px) rotate(-12deg)}
.room.is-active .sticker-print{transform:translateY(-5px) rotate(-5deg)}
.little-star{position:absolute;right:12%;top:38%;color:#F06868;font-size:42px;transform:rotate(12deg)}
.merch-tag{position:absolute;display:block;width:57%;aspect-ratio:1;left:23%;bottom:9%;border-radius:13px;background:#fff;padding:9px;transform:rotate(-12deg);box-shadow:5px 6px 0 #d4b961;transition:transform .3s;transform-origin:50% 0}
.merch-tag::before{content:'';position:absolute;width:27px;height:36px;border:4px solid #26332e;border-radius:50%;left:calc(50% - 14px);top:-27px;z-index:-1}
.merch-tag img{width:100%;height:100%;object-fit:cover;border-radius:6px}.room.is-active .merch-tag{animation:tag-swing .7s ease-in-out infinite alternate}
.art-goods .little-star{right:12%;top:26%;font-size:32px;color:#41a6cf}
.wallpaper-print{position:absolute;inset:0;}
.room[data-room=wallpapers] h2{z-index:2;background:#fffbea;padding:7px 13px;top:auto;bottom:12%;left:auto;right:10%;transform:rotate(5deg)}
.bottom-row{margin-top:34px;grid-template-columns:1fr 2fr;gap:24px;align-items:center}.more-square{width:69%;justify-self:center;--lean:5deg}.more-square h2{position:static;font-size:55px;letter-spacing:8px;transform:none}
.footer-friend{grid-column:2;width:82%;justify-self:center;transform:rotate(-3deg)}
.site-footer{padding-top:15px;padding-bottom:25px}
@keyframes tag-swing{from{transform:rotate(-12deg)}to{transform:rotate(8deg)}}
@media(max-width:700px){.topbar{padding-top:25px}.brand{font-size:35px}.welcome{padding-top:95px}.welcome .welcome-friends{bottom:calc(100% - 118px);transform:translateY(13px)}.intro-board{width:100%;min-height:205px;padding:24px;transform:rotate(-1deg)}.profile-name h1{font-size:34px}.avatar-placeholder{width:68px;height:68px}.identity{font-size:12px}.platforms{font-size:13px}.rooms{padding-top:46px}.room-grid{gap:15px}.room h2{font-size:29px}.little-star{font-size:28px}.platform-list{grid-template-columns:1fr;max-width:270px;gap:9px}.platform-list button span,.account-pending span{display:inline}.bottom-row{margin-top:25px;gap:8px}.footer-friend{width:100%}.more-square{width:85%}.more-square h2{font-size:40px}.merch-tag{padding:6px}.merch-tag::before{width:20px;height:28px;left:calc(50% - 10px);top:-20px;border-width:3px}}
@media(max-width:520px){.room-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:35px}.room[data-room=goods]{--lift:23px}.room[data-room=wallpapers]{--lift:0px}.bottom-row{margin-top:-120px;margin-left:51%;display:flex;flex-direction:column;gap:15px;min-height:180px}.more-square{width:72%;align-self:center}.footer-friend{width:140%;max-width:none;align-self:flex-end;margin-top:10px}.site-footer{padding-top:25px}.room h2{font-size:27px}.art-goods .little-star{font-size:24px}}
@media(prefers-reduced-motion:reduce){.room,.room:not(.reserved):hover,.room.is-active,.room:not(.reserved).is-active:hover{transform:none}.room.is-active .merch-tag{animation:none}.room.is-active .peek-friend,.room.is-active .sticker-print{transform:none}html{scroll-behavior:auto}}
body{min-height:100vh}
.wallpaper-print{inset:12% 12% 13%;border:7px solid #fffbea;border-bottom-width:24px;transform:rotate(6deg);box-shadow:4px 5px 0 #48a4c5;background-position:center 72%;background-size:cover}
.room[data-room=wallpapers] h2{bottom:8%;right:8%;font-size:38px}
@media(max-width:700px){.room[data-room=wallpapers] h2{font-size:27px}.wallpaper-print{border-width:5px;border-bottom-width:16px}}
/* 角色暂时藏在信息牌后，之后可替换为作者的拿牌图层。 */
.welcome .welcome-friends{transform:translateY(72px) rotate(1deg);z-index:1}
.welcome .intro-board{z-index:2}
@media(max-width:700px){.welcome .welcome-friends{transform:translateY(31px)}}
.brand{font-size:60px}
@media(max-width:700px){.brand{font-size:45px}}

/* 拼贴纸卡保留原来的形状，GIF 在纸片内完整显示。 */
.sticker-print{background:#fff;overflow:hidden}
.peek-friend{background:#fff;overflow:hidden}
.sticker-motion,.peek-animation{display:block;width:100%;height:100%;object-fit:contain}


.profile-contacts{display:flex;align-items:baseline;gap:25px;position:relative;z-index:4}
.contact-option summary{cursor:pointer;list-style:none;font-size:15px;line-height:1.5;width:fit-content}
.contact-option summary::-webkit-details-marker{display:none}
.contact-option summary span{display:inline-block;transition:transform .2s}
.contact-option[open] summary span{transform:rotate(90deg)}
.contact-panel{position:absolute;left:0;top:32px;width:350px;max-width:100%;background:#fffbea;padding:18px;border-radius:8px;box-shadow:3px 5px 0 #26332e20;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.contact-email{display:block;width:100%;font-size:14px;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:4px}
.contact-panel button{font-size:12px;background:#fff2a9;padding:7px 11px;border:0;border-radius:4px;cursor:pointer}
#contact-copy-status{font-size:11px;line-height:1.4;overflow-wrap:anywhere}
@media(max-width:700px){.contact-option summary{font-size:13px}.contact-panel{padding:15px}.contact-email{font-size:13px}}


/* 周边直接复用收藏册 .pack 纸卡，两张始终并排。 */
.shop-dialog{width:min(680px,calc(100% - 24px));background:#adebfa;border:0;border-radius:8px 14px 10px 12px;box-shadow:5px 6px 0 #26332e40;max-height:94dvh;}
.shop-dialog .dialog-top{background:transparent;border:0;padding:9px 18px 0;}
.shop-dialog .dialog-top button{min-width:36px;min-height:36px;}
.shop-dialog .dialog-body{padding:0 24px 14px;}
.shop-dialog .dialog-body h2{font-size:30px;margin:0 0 6px;}
.shop-dialog .shop-intro{font-size:11px;line-height:1.4;margin:0 0 22px;}
.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:0 2px;}
.shop-card.pack{--paper:#fffbea;--tab:#f06868;gap:7px;min-width:0;}
.shop-card.pack:nth-child(2){--tab:#80d6ff;}
.shop-qr{width:min(200px,29dvh,100%);aspect-ratio:1;align-self:center;margin:0 0 4px;display:grid;place-items:center;background:white;border-radius:8px;}
.shop-dialog .shop-qr img{width:min(200px,29dvh,100%);aspect-ratio:1;height:auto;margin:0;object-fit:contain;}
.shop-card h3{font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif!important;font-weight:400!important;font-size:22px;line-height:1.25;margin:0;min-height:48px;overflow-wrap:anywhere;}
.shop-platform{display:block;font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif!important;font-weight:700!important;font-size:11px;line-height:1.4;margin-bottom:4px;}
.shop-dialog .shop-search{font-size:11px;line-height:1.4;margin:0 0 4px;overflow-wrap:anywhere;}
.shop-actions{display:flex;flex-direction:column;gap:6px;margin-top:auto;}
.shop-link,.shop-copy{display:block;width:100%;text-align:center;min-height:36px;padding:8px 5px;font-size:12px;line-height:1.5;border:0;border-radius:4px;}
.shop-link{background:#fff2a9;}
.shop-copy{background:transparent;text-decoration:underline;text-underline-offset:3px;}
.shop-link:hover{box-shadow:2px 2px 0 #26332e;}
.shop-copy:hover{text-decoration-thickness:2px;}
.shop-dialog .shop-copy-status{min-height:28px;font-size:10px;line-height:1.4;margin:0;overflow-wrap:anywhere;}
.shop-dialog .close-return{margin-top:10px;padding:5px 0;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
@media(max-width:560px){
 .shop-dialog .dialog-body{padding:0 14px 12px;}
 .shop-dialog .dialog-body h2{font-size:26px;}
 .shop-dialog .shop-intro{font-size:10px;margin-bottom:20px;}
 .shop-grid{gap:12px;padding:0;}
 .shop-card.pack{padding:12px 10px 8px;gap:6px;}
 .shop-card.pack::before{width:27px;height:14px;right:12px;}
 .shop-card h3{font-size:17px;min-height:59px;}
 .shop-platform{font-size:10px;}
 .shop-dialog .shop-search{font-size:10px;min-height:28px;}
 .shop-link,.shop-copy{font-size:11px;padding:8px 2px;}
 .shop-dialog .shop-copy-status{font-size:9px;min-height:26px;}
}

/* 壁纸画框：背景向下滑，原画憨猫跳入后停在中央。 */
.wallpaper-scene{position:absolute;inset:0;overflow:hidden;isolation:isolate;}
.wallpaper-landscape{position:absolute;inset:-18% 0;background:url('assets/landscape-background.jpg') center 72%/cover;transform:translateY(-6%);transition:transform 700ms cubic-bezier(.22,.65,.3,1);transition-delay:0ms;}
.wallpaper-cat{position:absolute;z-index:1;left:50%;top:50%;width:94%;height:auto;aspect-ratio:1;object-fit:contain;opacity:0;transform:translate(-50%,85%);pointer-events:none;}
.room.is-active .wallpaper-landscape{transform:translateY(6%);transition-delay:var(--wallpaper-motion-delay,180ms);}
.room.is-active .wallpaper-cat{animation:wallpaper-cat-jump 650ms cubic-bezier(.22,.65,.3,1) var(--wallpaper-motion-delay,180ms) both;}
@keyframes wallpaper-cat-jump{
  0%{opacity:1;transform:translate(-50%,85%) rotate(-8deg);}
  62%{opacity:1;transform:translate(-50%,-68%) rotate(3deg);}
  82%{opacity:1;transform:translate(-50%,-50%) rotate(-1deg);}
  100%{opacity:1;transform:translate(-50%,-55%) rotate(0deg);}
}
@media(prefers-reduced-motion:reduce){
 .wallpaper-landscape,.room.is-active .wallpaper-landscape{transform:none;transition:none;}
 .room.is-active .wallpaper-cat{animation:none;}
}

/* 顶部憨猫：复用原图的左右区域，只让憨猫回应点击。 */
.welcome .welcome-friends{aspect-ratio:2172/724;}
.welcome-cat{position:absolute;left:0;top:0;width:55%;height:100%;padding:0;background:transparent;overflow:hidden;pointer-events:auto;transform-origin:45% 83%;transition:transform 180ms ease;}
.welcome-cat-art{position:absolute;left:0;top:0;display:block;width:181.818182%;height:100%;max-width:none;transform-origin:25% 75%;pointer-events:none;}
.welcome-manatee{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(0 0 0 55%);pointer-events:none;}
@media(hover:hover){.welcome-cat:hover{transform:scale(1.035);}}
.welcome-cat:focus-visible{transform:scale(1.035);outline-offset:-6px;}
.welcome-cat.is-talking .welcome-cat-art{animation:cat-talk-shiver 160ms steps(2,end) infinite;}
.cat-bubble{position:absolute;z-index:3;left:45%;bottom:75%;width:29%;min-width:155px;max-width:260px;min-height:96px;padding:20px 22px 20px 43px;display:grid;align-items:center;pointer-events:none;}
.cat-bubble[hidden]{display:none;}
.cat-bubble-shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.cat-bubble-shape path{fill:#fffbea;stroke:#26332e;stroke-width:2.5;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
#cat-bubble-text{position:relative;font-size:18px;line-height:1.45;overflow-wrap:anywhere;transform:rotate(-1deg);}
@keyframes cat-talk-shiver{
  0%,100%{transform:translate(0,0) rotate(-.35deg);}
  50%{transform:translate(1px,-1px) rotate(.35deg);}
}
@media(max-width:700px){
 .cat-bubble{min-height:80px;padding:16px 14px 16px 30px;}
 #cat-bubble-text{font-size:13px;}
}
@media(prefers-reduced-motion:reduce){
 .welcome-cat,.welcome-cat:hover,.welcome-cat:focus-visible{transform:none;transition:none;}
 .welcome-cat.is-talking .welcome-cat-art{animation:none;}
}

/* 二维码便签轻轻抬起、放大，键盘操作时也有相同反馈。 */
.shop-card.pack{transition:transform 180ms cubic-bezier(.22,.65,.3,1);transform-origin:center;}
@media(hover:hover){.shop-card.pack:hover{transform:translateY(-3px) scale(1.025);z-index:1;}}
.shop-card.pack:focus-within{transform:translateY(-3px) scale(1.025);z-index:1;}
@media(prefers-reduced-motion:reduce){.shop-card.pack,.shop-card.pack:hover,.shop-card.pack:focus-within{transform:none;transition:none;}}

/* 与收藏册呼应的左上角胶带，置于手绘蒙版外。 */
.room{--tape-color:#fff2a9;}
.room[data-room=stickers]{--tape-color:#80d6ff;}
.room[data-room=goods]{--tape-color:#8ea9ff;}
.room[data-room=wallpapers]{--tape-color:#f06868;}
.room-grid>.room::after{content:'';position:absolute;z-index:2;top:1%;left:12%;width:22%;height:9%;background:var(--tape-color);transform:rotate(-6deg);pointer-events:none;}

/* 页眉小便签与简介右上角胶带，沿用现有纸面和胶带配色。 */
.topbar .brand{position:relative;isolation:isolate;}
.topbar .brand::before{content:'';position:absolute;inset:-8px -13px -10px;z-index:-1;background:#fffbea;border-radius:4px 9px 5px 7px;box-shadow:3px 4px 0 #26332e24;pointer-events:none;}
.topbar .brand::after{content:'';position:absolute;top:-18px;left:4px;width:56px;height:21px;background:#f06868;transform:rotate(7deg);pointer-events:none;}
.welcome .intro-board::after{content:'';position:absolute;z-index:1;top:-9px;right:24px;width:70px;height:26px;background:#a3de83;transform:rotate(5deg);pointer-events:none;}
@media(max-width:700px){
 .topbar .brand::before{inset:-6px -10px -8px;box-shadow:2px 3px 0 #26332e24;}
 .topbar .brand::after{top:-14px;width:43px;height:17px;}
 .welcome .intro-board::after{right:16px;top:-8px;width:52px;height:21px;}
}

/* Tape follows the visible edge of the original paper mask. */
.welcome .intro-board::after{top:var(--profile-tape-top,-9px)}