/* Reusable cosmetics: the character stays full-body on every surface. */
.avatar-shell{display:inline-flex;align-items:center;justify-content:center;position:relative;isolation:isolate;flex:none;border-radius:22%;vertical-align:middle;overflow:visible}
.avatar-shell.has-aura:before{content:"";position:absolute;z-index:-1;inset:14%;border-radius:50%;background:radial-gradient(circle,var(--halo) 0, var(--halo) 36%,transparent 72%);filter:blur(3px);opacity:.85;box-shadow:0 0 12px var(--halo)}
.avatar-shell>.trainer-sprite{position:relative;z-index:1}
.top .me .avatar-shell{width:48px!important;height:48px!important}
.top .me .trainer-sprite{background-color:transparent!important;border-radius:0}
.profile-name{display:inline-flex;align-items:center;gap:3px;max-width:100%;vertical-align:middle;overflow-wrap:anywhere;line-height:1.5}
.name-ribbon{background:var(--tag);color:#253853;padding:1px 8px;border-radius:7px;box-shadow:0 2px 0 #23334b1a}
.name-icon{font-size:.95em}.top .me{gap:7px}.top .me b{min-width:0}.coin-button{display:flex!important;align-items:center;gap:3px;width:auto!important;white-space:nowrap;font-size:14px!important}
.nav{grid-template-columns:repeat(6,1fr)}.nav>button{min-width:0}
.shop-page{max-width:1160px;margin:0 auto;padding:32px 22px 110px;color:#263c4d}
.shop-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}.shop-heading small{font-weight:800;letter-spacing:.15em;color:#598674}.shop-heading h1{font-size:30px;margin:6px 0 10px}.shop-heading p{margin:0;color:#587268;font-size:14px}.shop-wallet{background:#fff4cf;border:2px solid #f0d995;border-radius:20px;padding:16px 25px;font-size:23px;text-align:center;white-space:nowrap}.shop-wallet small{display:block;font-size:12px;margin-top:5px}
.shop-layout{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}.shop-preview{background:#fffaf0;border:1px solid #e4dccb;border-radius:24px;padding:20px 12px;text-align:center;position:sticky;top:90px}.shop-stage{background:linear-gradient(#edf5f1,#e4eee8);border-radius:18px;min-height:250px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:16px}.shop-stage .profile-name{font-size:19px;font-weight:800}.shop-preview p{font-size:13px;color:#64766b}.shop-note{line-height:1.8}.pose-buttons{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}.pose-buttons button{padding:5px 8px!important}
.shop-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}.shop-tabs button{border:1px solid #b7d2c6;background:#fffaf1;color:#45665b;border-radius:12px;padding:11px 15px;font-weight:800;cursor:pointer}.shop-tabs button.on{background:#245c4c;color:white;border-color:#245c4c}.shop-tools{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#62766b;margin:0 0 14px;gap:8px}
.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.shop-item{border:1px solid #d5e3db;border-radius:18px;background:#fffdf7;padding:12px;display:flex;flex-direction:column;text-align:center;align-items:stretch;min-width:0}.shop-item.equipped{border:2px solid #2b8b68;background:#f0fff6}.shop-item-preview{border:0;background:#f0f5ee;border-radius:13px;min-height:126px;display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;padding:6px}.shop-item h3{font-size:14px;margin:12px 0 6px}.shop-item>small{font-size:12px;color:#657563;margin-bottom:12px}.shop-item>.btn{font-size:12px;padding:8px}.shop-rewards{background:#fff9e9;border:1px solid #e3dfca;border-radius:18px;margin-top:28px;padding:18px;line-height:1.8;font-size:13px}.shop-rewards summary{cursor:pointer;font-weight:800}.shop-rewards ul{padding-left:22px}.shop-rewards p{color:#6c7767}.legend-status{padding:16px;background:#eee8ff;border-radius:14px;color:#524472;font-weight:700;line-height:1.7}.legend-status small{font-weight:400}
.gym-owner-pair{display:flex;align-items:flex-end;justify-content:center;gap:6px}.gym-owner-pair>img{max-width:110px;max-height:115px;object-fit:contain}.gym-owner-profile{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-end;max-width:120px}.gym-owner-profile small{font-size:10px;line-height:1.3;max-width:100%;white-space:normal}.raid-owner{position:absolute;left:calc(50% + 80px);bottom:12px;z-index:3;pointer-events:none}.raid-owner .gym-owner-profile{color:#fff;text-shadow:0 1px 3px #000}.raid-owner .name-ribbon{text-shadow:none}.pvp-rr>.avatar-shell{margin-right:6px}.profile .avatar-shell{margin-inline:auto}.rank-list .av{overflow:visible}
@media(max-width:760px){.shop-page{padding:18px 12px 100px}.shop-heading h1{font-size:23px}.shop-heading p{font-size:12px}.shop-wallet{padding:12px;font-size:19px}.shop-layout{grid-template-columns:1fr;gap:16px}.shop-preview{position:static;display:grid;grid-template-columns:130px 1fr;align-items:center;gap:8px;padding:12px}.shop-stage{grid-row:span 4;min-height:165px;padding:6px}.shop-stage>.avatar-shell,.shop-stage .trainer-sprite{width:120px!important;height:120px!important}.shop-stage .profile-name{font-size:14px}.shop-preview p{margin:3px;font-size:11px}.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-tabs{gap:4px}.shop-tabs button{flex:1;padding:9px 5px;font-size:12px;white-space:nowrap}.shop-tools{font-size:10px}.top{gap:6px;flex-wrap:wrap;padding-inline:10px}.top .goal{order:3;flex-basis:100%;max-width:none}.top .res{margin-left:auto;gap:7px}.top .me{font-size:12px}.top .res>span{font-size:12px}.nav button{padding-inline:0;font-size:11px}.raid-owner{left:auto;right:6px}.pvp-rr{gap:4px}.pvp-rr>.avatar-shell{width:30px!important;height:30px!important}}
@media(prefers-reduced-motion:reduce){.avatar-shell:before{animation:none}}
.trainer-sprite.tn{background-image:url("../assets/shop/trainers-n.webp?v=3");background-size:400% calc(var(--rows,12)*100%);background-position:calc(var(--pose,0)*100%/3) calc(var(--trainer,0)*100%/(var(--rows,12) - 1))}
.shop-gender{display:flex;gap:6px;margin:0 0 12px}.shop-gender button{flex:1;padding:9px 6px;border:2px solid #e3ebe2;border-radius:999px;background:#f7f9f3;font:inherit;font-size:13px;font-weight:700;color:#4f6b64;cursor:pointer}.shop-gender button.on{border-color:#dc8654;background:#fff3dc;color:#b8622f}
.pvp-rr{grid-template-columns:26px 36px minmax(0,1fr) auto 36px;gap:7px;align-items:center}.pvp-rr>b{min-width:0;font-size:14px}.pvp-rr .wl{font-size:12px;white-space:nowrap}.pvp-rr>small{font-size:11px;text-align:right}
@media(max-width:760px){.pvp-rr{grid-template-columns:22px 30px minmax(0,1fr) auto 32px;gap:4px}.pvp-rr>b{font-size:12px}.pvp-rr .wl{font-size:11px}}

/* 야생 배틀 공격 버튼(3초 연타): 밝은 아래 칸에 맞게 작게 */
.wild-atk{padding:10px 8px;gap:8px;color:#26314a}
.wild-atk .pvp-atk-btn{width:min(140px,24vh);height:min(140px,24vh);font-size:1.35em;border-width:4px}
.wild-atk .pvp-atk-bar{background:#e3e8f2}
.wild-atk .wild-fast{color:#d8352a}

/* ================= 꾸미기 디자인 (10/3) ================= */
/* 배경: 게임 속 장소 그림 */
.avatar-shell.has-bg{box-shadow:inset 0 0 0 2px #ffffffb0,0 3px 8px #1d3b4a26;overflow:hidden}
.avatar-shell.has-bg.has-aura{overflow:visible}
.avatar-shell.has-bg:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#ffffff00 55%,#ffffff40);z-index:0;pointer-events:none}

/* 후광: 종류마다 다른 효과 */
.avatar-shell .aura-fx{position:absolute;inset:-6%;border-radius:50%;z-index:0;pointer-events:none}
.avatar-shell.has-aura:before{inset:10%;opacity:.9}
.aura-sun .aura-fx{background:repeating-conic-gradient(from 0deg,#ffd54fb0 0 9deg,#ffd54f00 9deg 22deg);-webkit-mask:radial-gradient(circle,#000 28%,#0000 68%);mask:radial-gradient(circle,#000 28%,#0000 68%);animation:auraSpin 16s linear infinite}
.aura-sun:before{background:radial-gradient(circle,#fff6c9 0,#ffd54f 35%,#ffd54f00 70%)!important}
.aura-moon .aura-fx{background:radial-gradient(circle at 18% 30%,#fff 0 2.2%,#0000 3%),radial-gradient(circle at 82% 22%,#e3efff 0 2.6%,#0000 3.4%),radial-gradient(circle at 75% 78%,#fff 0 1.8%,#0000 2.6%),radial-gradient(circle at 25% 80%,#cfe1ff 0 2.4%,#0000 3.2%),radial-gradient(circle at 50% 8%,#fff 0 1.6%,#0000 2.4%);animation:auraTwinkle 2.4s ease-in-out infinite}
.aura-moon:before{background:radial-gradient(circle,#eef4ff 0,#9fbfff 38%,#6f8fff00 72%)!important}
.aura-pink .aura-fx{background:radial-gradient(ellipse 7% 4.5% at 20% 35%,#ff8fc0 0 70%,#0000 72%),radial-gradient(ellipse 6% 4% at 80% 30%,#ffb3d4 0 70%,#0000 72%),radial-gradient(ellipse 6% 4% at 72% 80%,#ff8fc0 0 70%,#0000 72%),radial-gradient(ellipse 5% 3.5% at 28% 78%,#ffc6de 0 70%,#0000 72%),radial-gradient(ellipse 5% 3.5% at 50% 12%,#ffb3d4 0 70%,#0000 72%);animation:auraFloat 3.2s ease-in-out infinite}
.aura-pink:before{background:radial-gradient(circle,#fff0f7 0,#ffa9cf 36%,#ffa9cf00 72%)!important}
.aura-mint .aura-fx{inset:2%;border:3px dashed #43c487;-webkit-mask:none;mask:none;animation:auraSpin 10s linear infinite;box-shadow:0 0 10px #8ff0bd88,inset 0 0 10px #8ff0bd66}
.aura-mint:before{background:radial-gradient(circle,#effff6 0,#99e9b8 38%,#99e9b800 72%)!important}
@keyframes auraSpin{to{transform:rotate(360deg)}}
@keyframes auraTwinkle{0%,100%{opacity:.45;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
@keyframes auraFloat{0%,100%{transform:translateY(2%) rotate(0)}50%{transform:translateY(-3%) rotate(6deg)}}

/* 이름표: 종류마다 다른 모양 */
.name-ribbon{font-weight:800;line-height:1.45}
.name-ribbon.tag-sky{background:linear-gradient(180deg,#d9f0ff,#8fcdf7);color:#0f3a5c;padding:1px 16px;border-radius:3px;clip-path:polygon(0 0,100% 0,93% 50%,100% 100%,0 100%,7% 50%);box-shadow:none;text-shadow:0 1px 0 #ffffffaa}
.name-ribbon.tag-peach{background:linear-gradient(180deg,#ffe1d8,#ffb3c2);color:#7a2f3a;padding:1px 11px;border-radius:99px;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3.5px #ffb3c2,0 2px 4px #c45a6f33}
.name-ribbon.tag-mint{background:repeating-linear-gradient(176deg,#0000 0 5px,#00000010 5px 6px),linear-gradient(180deg,#d29a5f,#a8743f);color:#fff8e6;padding:1px 10px;border-radius:5px;border:2px solid #7c5229;box-shadow:inset 0 3px 0 #6cc070,0 2px 0 #5a3a1c55;text-shadow:0 1px 1px #5a3a1c}
.name-ribbon.tag-lavender{background:radial-gradient(circle at 15% 30%,#fff 0 1px,#0000 1.5px),radial-gradient(circle at 80% 70%,#ffe9a8 0 1px,#0000 1.5px),radial-gradient(circle at 55% 20%,#fff 0 .8px,#0000 1.3px),linear-gradient(135deg,#2b2a6b,#5b3f9c);color:#fff;padding:1px 11px;border-radius:8px;border:1.5px solid #ffd56b;box-shadow:0 0 8px #8f6bff88;text-shadow:0 0 6px #b9a2ff}

/* 이름 장식: 움직이는 작은 장식 */
.name-icon{display:inline-block;line-height:1;transform-origin:50% 60%}
.name-icon.tail{display:none}
.name-icon.tail.icon-star,.name-icon.tail.icon-flower{display:inline-block}
.name-icon.icon-star{animation:iconTwinkle 1.8s ease-in-out infinite;filter:drop-shadow(0 0 3px #ffd54f)}
.name-icon.icon-star.tail{animation-delay:.9s}
.name-icon.icon-flower{animation:auraSpin 6s linear infinite}
.name-icon.icon-flower.tail{animation-direction:reverse}
.name-icon.icon-leaf{animation:iconSway 2.4s ease-in-out infinite}
.name-icon.icon-crown{animation:iconBob 2s ease-in-out infinite;filter:drop-shadow(0 0 4px #ffcf40)}
@keyframes iconTwinkle{0%,100%{transform:scale(.85) rotate(0)}50%{transform:scale(1.15) rotate(15deg)}}
@keyframes iconSway{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes iconBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.avatar-shell .aura-fx,.name-icon{animation:none!important}}
/* 배경 그림 위에서는 후광 빛을 조금 옅게 해서 배경이 보이게 */
.avatar-shell.has-bg.has-aura:before{opacity:.55}
.avatar-shell.has-bg.aura-sun .aura-fx{opacity:.75}

/* 상점: 이름 장식 · 게임 아이템 */
.shop-grid.shop-icons{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.icon-item .shop-item-preview{min-height:80px}
.icon-item .ii-big{font-size:40px;line-height:1}
.icon-item h3{font-size:13px;margin:8px 0 4px}
.game-item{align-items:center}
.game-item .gi-icon{font-size:48px;line-height:1.2;margin-top:4px}
.gi-icon{font-size:48px;text-align:center}
.game-item h3{font-size:16px;margin:6px 0 4px}
.game-item .gi-desc{font-size:12.5px;color:#4e6359;margin:0 0 8px;line-height:1.5;min-height:3em}
.game-item .gi-on{color:#2b8b68}
.gi-btns{display:flex;gap:6px;width:100%}.gi-btns .btn{flex:1;font-size:13px;padding:8px}
.name-icon{margin-right:1px}
/* 슈퍼볼: 파란 볼 */
.act.super{grid-column:1/-1;background:linear-gradient(135deg,#4f8df5,#2d5fc4)!important;color:#fff!important}
.gi-img{width:56px;height:56px;image-rendering:pixelated}
.egg-hatch{position:relative;display:flex;justify-content:center;align-items:center}
.egg-hatch .egg-big{position:absolute;font-size:70px;animation:eggPop .9s ease-out forwards}
@keyframes eggPop{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.1) rotate(-12deg)}70%{transform:scale(1.15) rotate(12deg);opacity:1}100%{transform:scale(1.6);opacity:0}}