/* Only portrait containers change; the surrounding chip keeps its own style. */
[data-player-portrait].has-player-portrait{overflow:hidden;border-radius:50%;background:#ffe18a}
[data-player-portrait].has-player-portrait>.player-face-image{display:block;width:100%;height:100%;max-width:none;object-fit:contain;border-radius:inherit;flex:none}
.score-profile-face,.finish-profile-photo{display:none}
.score-profile-face.has-player-portrait{display:inline-block;width:32px;height:32px;flex:0 0 32px;vertical-align:middle;margin-right:8px;box-shadow:0 0 0 2px #fff}
.finish-profile-photo.has-player-portrait{display:block;width:88px;height:88px;margin:0 auto 16px;box-shadow:0 0 0 4px #fff,0 7px 20px #19234220}
.podium-score .leader-player .score-profile-face,.podium-score .quiet-player .score-profile-face{display:none}
.quiet-player>strong:has(.has-player-portrait),.leader-player>strong:has(.has-player-portrait),.all-score-player>strong:has(.has-player-portrait),.topo-score-player>strong:has(.has-player-portrait){display:flex;align-items:center;gap:0;min-width:0}
.quiet-player>strong:has(.has-player-portrait){white-space:normal;overflow:visible;line-height:1.3}
.podium-player>strong>.score-profile-face.has-player-portrait{display:block;width:64px;height:64px;margin:0 auto 10px}
.xp-ranking-name>.score-profile-face.has-player-portrait{width:38px;height:38px;flex-basis:38px}
.game-topografie .topbar .mobile-player-chip{display:inline-flex;flex:0 0 auto;align-items:center;gap:9px;min-width:0;max-width:220px;padding:7px 13px 7px 7px;border:1px solid #ffffff26;border-radius:999px;color:#fff;background:#ffffff14;backdrop-filter:blur(12px);font-weight:800}
.game-topografie .topbar .mobile-player-chip>span{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:#ffdc48}
.game-topografie .topbar .mobile-player-chip strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){.score-profile-face.has-player-portrait{width:28px;height:28px;flex-basis:28px;margin-right:6px}.finish-profile-photo.has-player-portrait{width:72px;height:72px}.game-topografie .topbar .mobile-player-chip{max-width:145px;font-size:13px}.game-topografie .topbar .mobile-player-chip>span{width:32px;height:32px;flex-basis:32px}}
@media(max-width:760px){[data-game-theme="taal"] .podium-score .leader-player .score-profile-face.has-player-portrait{display:inline-block}}
.game-topografie .topbar .stop-icon{display:none}
@media(max-width:760px){.game-topografie .topbar .stop-label{display:none}.game-topografie .topbar .stop-icon{display:block;font-size:25px;line-height:1}}
@container ranking (max-width:660px){.leaderboard.hall-of-fame .podium-score :is(.quiet-player,.leader-player) .score-profile-face.has-player-portrait{display:inline-block}}

[data-player-portrait].has-player-portrait{cursor:pointer}
[data-player-portrait].has-player-portrait:focus-visible{outline:3px solid #ffdc48;outline-offset:4px}
.player-greeting{box-sizing:border-box;width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:28px;border:0;border-radius:28px;background:#fffaf4;color:#192342;text-align:center;font-family:Outfit,sans-serif;box-shadow:0 24px 80px #070e2966}
.player-greeting::backdrop{background:#080f25b3;backdrop-filter:blur(5px)}
.player-greeting h2{margin:8px 28px 12px;overflow-wrap:anywhere}
.player-greeting-close{position:absolute;right:12px;top:12px;width:44px;height:44px;border:0;border-radius:50%;background:#e9e3f3;color:#192342;font-size:28px;cursor:pointer}
.player-greeting-stage{height:min(330px,48dvh);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border-radius:24px;background:radial-gradient(ellipse at bottom,#ffdf7a55,transparent 70%)}
.player-greeting-art{height:90%;transform-origin:50% 90%}
.player-greeting-art svg{display:block;width:auto;height:100%;max-width:100%}
.player-greeting-replay{min-height:48px;border:0;border-radius:999px;padding:12px 24px;background:#34435f;color:white;font:800 15px Outfit,sans-serif;cursor:pointer}
/* Feet and shadow have separate motion: anticipation, hop, soft landing. */
.player-greeting-art svg>g{transform-box:view-box;transform-origin:50% 97%}
.player-greeting-art svg>ellipse{transform-box:fill-box;transform-origin:center}
.player-greeting-art.is-greeting svg>g{animation:player-hello 2.7s both;animation-timing-function:cubic-bezier(.4,0,.2,1)}
.player-greeting-art.is-greeting svg>ellipse{animation:player-hello-shadow 2.7s both;animation-timing-function:cubic-bezier(.4,0,.2,1)}
@keyframes player-hello{
 0%,8%{transform:translateY(0) rotate(0) scale(1)}
 20%{transform:translateY(2px) rotate(-2deg) scale(1.02,.97);animation-timing-function:cubic-bezier(.18,.65,.3,1)}
 36%{transform:translateY(var(--greeting-hop,-22px)) rotate(3deg) scale(.99,1.015);animation-timing-function:cubic-bezier(.55,0,.85,.4)}
 50%{transform:translateY(1px) rotate(1deg) scale(1.025,.975)}
 60%{transform:translateY(-4px) rotate(-2deg) scale(.995,1.005)}
 73%{transform:translateY(0) rotate(2deg) scale(1)}
 85%{transform:translateY(0) rotate(-1deg) scale(1)}
 100%{transform:translateY(0) rotate(0) scale(1)}
}
@keyframes player-hello-shadow{
 0%,20%,50%,100%{transform:scale(1);opacity:1}
 36%{transform:scale(.72,.85);opacity:.5}
 60%{transform:scale(.94);opacity:.9}
}
@media(prefers-reduced-motion:reduce){.player-greeting-art.is-greeting svg>g,.player-greeting-art.is-greeting svg>ellipse{animation:none}}

/* Keep one scroll area on the dialog; the character can move within its stage. */
.player-greeting{overflow-x:hidden;overflow-y:auto}
.player-greeting-stage{overflow:visible}
.player-greeting-art svg{overflow:visible}
.player-greeting-art{position:relative;z-index:1}
.player-greeting-close{z-index:2}

/* Profile content shares the dialog scroll area on every screen size. */
.player-greeting[open]{display:grid;grid-template-columns:minmax(160px,230px) minmax(0,1fr);column-gap:28px;width:min(820px,calc(100vw - 32px));align-items:start}
.player-greeting>h2,.player-greeting>.player-greeting-stage,.player-greeting>p,.player-greeting>.player-greeting-replay{grid-column:1}
.player-greeting>.player-greeting-replay{justify-self:center}
.player-greeting>.player-profile-overview{grid-column:2;grid-row:1/5;max-height:none;overflow:visible;text-align:left;padding:12px 4px;min-width:0}
.player-profile-level{margin:0 0 14px;color:#755294;font-weight:800}
.player-profile-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.player-profile-stats>div{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid #ded9eb;border-radius:16px;background:#f0edf7}
.player-profile-stats strong{font-size:24px;line-height:1.2;overflow-wrap:anywhere}
.player-profile-stats span{font-size:12px;color:#62708a}
.player-profile-overview h3{margin:20px 0 12px}
.player-profile-album{border:1px solid #ded9eb;border-radius:14px;margin:10px 0;background:white;overflow:hidden}
.player-profile-album summary{padding:15px;min-height:48px;box-sizing:border-box;font-weight:800;cursor:pointer}
.player-profile-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px}
.player-profile-cards>div{min-width:0;text-align:center}
.player-profile-cards img,.player-profile-cards .is-locked>span{display:block;width:100%;aspect-ratio:2/3;object-fit:contain;border-radius:10px;background:#f0edf7}
.player-profile-cards .is-locked>span{display:grid;place-items:center;font-size:32px;color:#aea2c5}
.player-profile-cards small{display:block;padding-top:5px;font-size:11px;overflow-wrap:anywhere}
@media(max-width:600px){
 .player-greeting[open]{display:block;padding:18px;width:min(420px,calc(100vw - 24px))}
 .player-greeting h2{font-size:22px;margin:4px 36px 8px}
 .player-greeting-stage{height:25dvh}
 .player-greeting>p{display:none}
 .player-greeting-replay{margin-top:8px;min-height:44px;padding:9px 20px}
 .player-greeting>.player-profile-overview{margin-top:12px;padding:4px}
 .player-profile-stats>div{padding:10px}
 .player-profile-stats strong{font-size:21px}
}

.has-profile-placeholder{cursor:pointer}
.score-profile-face.has-profile-placeholder{display:inline-grid;place-items:center;width:32px;height:32px;margin-right:8px;border-radius:50%;background:#e9e3f3;color:#755294;font-weight:800}
[data-player-profile]{cursor:pointer}
[data-player-profile]:focus-visible{outline:3px solid #ffdc48;outline-offset:3px}
.player-profile-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#8b81a2}
.player-profile-placeholder .gp-icon{width:100px;height:130px;flex:none}
.player-profile-placeholder small{font-size:13px}
.player-profile-album-button{display:flex;align-items:center;gap:12px;width:100%;padding:16px;text-align:left;color:#192342;font:inherit;cursor:pointer}
.player-profile-album-button>span:nth-child(2){flex:1;min-width:0}
.player-profile-album-button strong,.player-profile-album-button small{display:block}
.player-profile-album-button small{margin-top:5px;color:#62708a;font-size:12px}
.player-profile-album-button:hover{background:#f0edf7}

.player-profile-album-button{border:1px solid #a17ac3;background:linear-gradient(120deg,#eee5fc,#fffaf1);color:#56347d;padding:14px;gap:16px;border-radius:14px}
.player-profile-album-button strong{font-size:17px;color:#56347d}
.player-profile-album-button small{font-size:13px;color:#735488}
.profile-book-cover{box-sizing:border-box;flex:0 0 52px;min-height:68px;display:grid;align-content:center;justify-items:center;gap:5px;padding:6px;border:1px solid #a17ac3;border-left:6px solid #593879;border-radius:3px 7px 7px 3px;color:#ffe29a;background:linear-gradient(145deg,#9461bd,#573379);box-shadow:4px 4px 0 #d7c3a1;transform:rotate(-5deg)}
.profile-book-cover b{font-size:10px;line-height:1.2;text-align:center;max-width:40px}
.profile-book-cover .gp-icon{width:18px;height:18px}

/* The same saved gestures also play in public rooms and profile greetings. */
.avatar-arm-wave{transform-origin:171px 195px;animation:avatar-wave 1.8s ease-in-out 3}.avatar-dance{transform-origin:120px 410px;animation:avatar-dance 1.2s ease-in-out 5}@keyframes avatar-wave{0%,50%,100%{transform:rotate(0)}25%{transform:rotate(10deg)}75%{transform:rotate(-9deg)}}@keyframes avatar-dance{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}@media(prefers-reduced-motion:reduce){.avatar-arm-wave,.avatar-dance{animation:none!important}}