/* Profile cosmetics: composite transforms, clipped edges, no layout animation. */
.profile-showcase { position: relative; isolation: isolate; }
.profile-showcase.has-profile-background { margin: 0 -10px 14px; padding: 16px 10px 12px; border-radius: 24px; background: #0a1927; box-shadow: inset 0 0 0 1px #38556d66; }
.profile-showcase > :not(.profile-backdrop) { position: relative; z-index: 1; }
.profile-showcase.has-profile-background .profile-scoreboard { background-color: #112131e8; }
.profile-backdrop { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; user-select: none; z-index: 0; contain: paint; }
.backdrop-stars { position: absolute; inset: 0; opacity: .42; background-image: radial-gradient(circle at 10% 13%, #b5e5ff 0 1px, transparent 1.5px), radial-gradient(circle at 83% 21%, #b5e5ff 0 1px, transparent 1.5px), radial-gradient(circle at 61% 61%, #b5e5ff 0 .7px, transparent 1.5px); background-size: 121px 163px, 193px 211px, 89px 137px; }
.backdrop-frost { background: linear-gradient(135deg, #152432, #0c1823 55%, #162a36); }
.backdrop-frost .backdrop-stars { display: none; }
.frost-glass { position: absolute; inset: 0; box-shadow: inset 0 0 28px #b9ddea18; background: radial-gradient(ellipse at 0 100%, #9fcee41c, transparent 44%), radial-gradient(ellipse at 100% 0, #9fcee41c, transparent 43%); }
.window-frost { position: absolute; inset: 0; background: url('./assets/profile-window-frost-v2.png') center / 100% 100% no-repeat; opacity: .75; mask-image: linear-gradient(90deg, #000 55%, transparent), linear-gradient(270deg, #000 55%, transparent), linear-gradient(180deg, #000 55%, transparent), linear-gradient(0deg, #000 55%, transparent); mask-position: left, right, top, bottom; mask-repeat: no-repeat; mask-size: 52% 100%, 52% 100%, 100% 43%, 100% 43%; animation: window-freeze 13s cubic-bezier(.16,.4,.24,1) both; }
@keyframes window-freeze {
  from { opacity: .25; mask-size: 3% 100%, 3% 100%, 100% 3%, 100% 3%; }
  40% { opacity: .55; }
  to { opacity: .75; mask-size: 52% 100%, 52% 100%, 100% 43%, 100% 43%; }
}
.backdrop-floes { background: radial-gradient(ellipse at 60% 10%, #185c795c, transparent 65%); }
.floating-floe { position: absolute; width: 52px; height: 72px; opacity: .48; animation: floe-orbit 24s linear infinite; }
.floating-floe svg { width: 100%; height: 100%; filter: drop-shadow(0 0 7px #42b6df4d); }
.floe-0 { top: 4%; left: -2%; } .floe-1 { top: 25%; right: -3%; width: 80px; height: 104px; animation-delay: -9s; }
.floe-2 { top: 40%; left: 3%; width: 32px; animation-delay: -14s; } .floe-3 { bottom: 2%; right: 3%; animation-delay: -17s; }
.floe-4 { bottom: 4%; left: 24%; width: 23px; animation-delay: -4s; } .floe-5 { top: -4%; left: 59%; width: 30px; animation-delay: -20s; }
.floe-6 { top: 38%; right: 28%; width: 24px; opacity: .23; animation-delay: -12s; }
@keyframes floe-orbit { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(180deg); } 100% { transform: translateY(0) rotate(360deg); } }
.backdrop-aurora { background: linear-gradient(145deg, #081b25, #11142d); }
.aurora-ribbon { position: absolute; top: -30%; left: -35%; width: 160%; height: 86%; border-radius: 48%; transform: rotate(-22deg); background: repeating-linear-gradient(91deg, transparent 0 3%, #40d5b333 4%, transparent 6%), radial-gradient(ellipse at 50% 73%, transparent 46%, #52f4b667 52%, #28c3ce30 60%, transparent 69%); filter: blur(9px); opacity: .7; animation: aurora-drift 12s ease-in-out infinite alternate; }
.ribbon-two { top: -15%; left: -5%; transform: rotate(20deg); background: radial-gradient(ellipse at 50% 73%, transparent 46%, #9665f869 53%, #319fdf40 61%, transparent 69%); animation-delay: -7s; animation-duration: 15s; }
.ribbon-three { top: 33%; left: -50%; opacity: .36; animation-delay: -3s; }
@keyframes aurora-drift { from { translate: -3% -3%; scale: .92 1; opacity: .44; } to { translate: 5% 5%; scale: 1.06 1.12; opacity: .88; } }
.backdrop-icefire { background: linear-gradient(105deg, #082336, #121823 53%, #2e1819); }
.element-glow { position: absolute; top: 0; bottom: -8%; width: 48%; filter: blur(9px); animation: element-breathe 8s ease-in-out infinite alternate; }
.element-ice { left: -20%; background: radial-gradient(ellipse at 10% 60%, #49d8ffb0, #237fca47 43%, transparent 72%); }
.element-fire { right: -18%; background: radial-gradient(ellipse at 85% 60%, #ffab42b0, #ee592c4f 45%, transparent 74%); animation-delay: -4s; }
.element-spark { position: absolute; bottom: -10px; right: calc(2% + var(--i) * 3%); width: 3px; height: 7px; border-radius: 70%; background: #ffd68c; box-shadow: 0 0 9px #ff733c; opacity: 0; animation: element-rise 7s calc(var(--i) * -.85s) linear infinite; }
.element-spark:nth-child(even) { right: auto; left: calc(2% + var(--i) * 3%); background: #a9eeff; box-shadow: 0 0 9px #37bdff; }
@keyframes element-breathe { from { transform: scale(.9) translateY(8%); opacity: .6; } to { transform: scale(1.16) translateY(-6%); opacity: 1; } }
@keyframes element-rise { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 15% { opacity: .85; } 80% { opacity: .35; } 100% { transform: translate(12px, -340px) rotate(180deg); opacity: 0; } }
.background-fitting { margin-top: 16px; }
.background-fitting h3, .companion-fitting .appearance-title { margin: 0 0 8px; font-size: 19px; text-align: left; }
.appearance-description { font-size: 12px; color: #a7bdcd; line-height: 1.6; margin: 0 0 16px; }
.background-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.background-choice { position: relative; min-height: 76px; overflow: hidden; isolation: isolate; border: 1px solid #334b5f; border-radius: 12px; background: #122231; color: #c4d6e6; padding: 44px 8px 10px; text-align: left; font-size: 11px; }
.background-choice > span { position: relative; z-index: 1; background: #0b1926ba; padding: 3px 5px; border-radius: 5px; }
.background-choice[aria-pressed="true"] { border-color: #85dfff; box-shadow: 0 0 0 1px #85dfff; color: #e5f8ff; }
.background-choice:first-child { grid-column: 1 / -1; min-height: 44px; padding: 10px; }
.background-choice .profile-backdrop * { animation-play-state: paused; }
.background-choice .window-frost { animation: none; opacity: .85; }
.background-sample { position: relative; isolation: isolate; border-radius: 16px; padding: 22px; margin: 16px 0; min-height: 148px; display: flex; flex-direction: column; justify-content: center; gap: 8px; background: #102030; overflow: hidden; }
.background-sample > :not(.profile-backdrop) { position: relative; z-index: 1; }
.background-sample > small { color: #a8c8dc; } .background-sample > strong { font-size: 20px; color: #ecf9ff; }
.background-fitting > .primary-action { width: 100%; }
.is-animation-paused *, .appearance-paused .profile-backdrop * { animation-play-state: paused !important; }
/* Favorite hand shares the nickname's row, not the entire identity's height. */
.profile-name-line { flex-wrap: nowrap; gap: 6px; align-items: center; }
.profile-name-line h2 { min-width: 0; margin: 0; flex: 0 1 auto; }
.profile-name-line .status { margin: 0; font-size: 9px; padding: 3px 5px; }
.profile-name-line + .row-sub { margin-top: 6px; }
.fav-hand-nick { margin: 0; gap: 3px; min-height: 44px; align-items: center; }
.fav-hand-nick .card-chip { width: 20px; height: 29px; border-radius: 3px; box-shadow: 0 2px 5px #0005; }
.fav-hand-nick .card-chip b { font-size: 11px; } .fav-hand-nick .card-chip i { font-size: 10px; }
.fav-card-flip { perspective: 240px; }
.fav-card-rotor { display: block; position: relative; transform-style: preserve-3d; transform-origin: 50% 60%; }
.fav-card-front { display: flex; position: relative; transform: rotateY(0deg); }
.fav-card-front, .fav-card-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fav-card-front .card-chip { position: relative; overflow: hidden; }
.fav-card-back { position: absolute; inset: 0; border: 1px solid #91cdec; border-radius: 3px; transform: rotateY(180deg); background: repeating-linear-gradient(45deg, transparent 0 3px, #8bd5ff20 3px 4px), repeating-linear-gradient(-45deg, transparent 0 3px, #8bd5ff20 3px 4px), linear-gradient(145deg, #284965, #091d32); box-shadow: inset 0 0 0 2px #102c43, 0 2px 5px #0005; }
.fav-card-back::after { content: ''; position: absolute; width: 7px; height: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid #a9e9ff; background: #235778; box-shadow: 0 0 5px #81d4ff70; }
.fav-hand-nick.is-awaiting-reveal .fav-card-rotor { transform: rotateY(-180deg); }
.fav-hand-nick.is-revealing .fav-card-rotor { animation: favorite-hand-turn 900ms cubic-bezier(.22,.68,.2,1) both; animation-delay: calc(180ms + var(--card-index) * 150ms + var(--hand-reveal-elapsed, 0ms)); }
.fav-hand-nick.is-revealing .fav-card-front .card-chip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 22%, #c0eeffb3 50%, transparent 78%); pointer-events: none; animation: favorite-hand-shine 900ms ease-out both; animation-delay: calc(180ms + var(--card-index) * 150ms + var(--hand-reveal-elapsed, 0ms)); }
@keyframes favorite-hand-turn { 0% { transform: translateY(2px) rotateZ(-6deg) rotateY(-180deg); } 76% { transform: translateY(-1px) rotateZ(2deg) rotateY(7deg); } 100% { transform: translateY(0) rotateZ(0) rotateY(0); } }
@keyframes favorite-hand-shine { 0%, 45% { transform: translateX(-130%); opacity: 0; } 60% { opacity: .55; } 100% { transform: translateX(130%); opacity: 0; } }
.fav-hand-add { min-width: 44px; min-height: 44px; margin: 0; padding: 4px; border: 0; gap: 1px; font-size: 9px; }
.fav-hand-add svg { width: 17px; height: 17px; }
@media (max-width: 379px) { .profile-identity { gap: 10px; } .profile-identity .avatar, .profile-identity .avatarx { width: 58px; height: 58px; } .profile-identity h2 { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) {
  .fav-hand-nick .fav-card-rotor { animation: none !important; transform: none !important; }
  .fav-hand-nick .fav-card-front .card-chip::after { animation: none !important; opacity: 0; }
  .profile-backdrop * { animation: none !important; }
  .window-frost { opacity: .75; }
  .element-spark { opacity: 0; }
}

/* Poker-hand companions. The rating stays readable on the left. */
.profile-score-scene.has-companion-axes { margin-top: 164px; }
.profile-score-scene.has-companion-queens { margin-top: 150px; }
.profile-score-scene.has-companion-airliner { margin-top: 122px; }
.poker-companion { position:absolute; z-index:2; pointer-events:none; user-select:none; visibility:hidden; }
.poker-companion.is-ready { visibility:visible; }
.poker-companion img { display:block; width:100%; height:100%; object-fit:contain; }
.poker-axes { width:228px; height:180px; right:8px; top:-164px; clip-path:inset(-500px -500px 16px -500px); }
.poker-axe { position:absolute; width:176px; height:176px; top:0; transform-origin:39% 94%; }
.axe-0 { left:-12px; transform:rotate(-17deg); }
.axe-1 { left:66px; transform:rotate(17deg); }
.poker-axe-art { filter:drop-shadow(0 2px 3px #02111ecc); }
.is-ready .axe-0 { animation:axe-throw-left 1.3s cubic-bezier(.22,.68,.3,1) var(--companion-elapsed,0ms) both; }
.is-ready .axe-1 { animation:axe-throw-right 1.3s cubic-bezier(.22,.68,.3,1) calc(.36s + var(--companion-elapsed,0ms)) both; }
.axe-impact { position:absolute; width:52px; height:8px; left:25%; bottom:0; border-radius:50%; background:#92eaff; filter:blur(3px); opacity:0; }
.is-ready .axe-impact { animation:axe-impact .55s ease-out calc(.85s + var(--companion-elapsed,0ms)) both; }
.is-ready .axe-1 .axe-impact { animation-delay:calc(1.21s + var(--companion-elapsed,0ms)); }
@keyframes axe-throw-left {
  0% { transform:translate(-170px,-245px) rotate(-410deg); opacity:0; }
  12% { opacity:1; }
  70% { transform:translate(0,4px) rotate(-12deg); }
  81% { transform:translate(0,-2px) rotate(-21deg); }
  91% { transform:translate(0,0) rotate(-15deg); }
  100% { transform:translate(0,0) rotate(-17deg); opacity:1; }
}
@keyframes axe-throw-right {
  0% { transform:translate(190px,-260px) rotate(410deg); opacity:0; }
  12% { opacity:1; }
  70% { transform:translate(0,4px) rotate(12deg); }
  81% { transform:translate(0,-2px) rotate(21deg); }
  91% { transform:translate(0,0) rotate(15deg); }
  100% { transform:translate(0,0) rotate(17deg); opacity:1; }
}
@keyframes axe-impact { 0% { opacity:0; transform:scale(.1); } 15% { opacity:.9; } 100% { opacity:0; transform:scale(1.8); } }
.poker-queens { width:min(230px,58%); aspect-ratio:1; right:0; top:0; transform:translateY(-56%); }
.queens-arrival { display:block; position:absolute; inset:0; }
.queens-upper, .queen-leg { position:absolute; inset:0; }
.queens-upper { clip-path:inset(0 0 43.8% 0); z-index:2; }
.queen-leg { transform-origin:29% 55%; clip-path:polygon(23% 54.8%,34% 54.8%,34% 100%,23% 100%); }
.queen-leg-1 { transform-origin:39% 55%; clip-path:polygon(34% 54.8%,44% 54.8%,44% 100%,34% 100%); }
.queen-leg-2 { transform-origin:62% 55%; clip-path:polygon(56% 54.8%,67.5% 54.8%,67.5% 100%,56% 100%); }
.queen-leg-3 { transform-origin:72% 55%; clip-path:polygon(67.5% 54.8%,79% 54.8%,79% 100%,67.5% 100%); }
.is-ready .queens-arrival { animation:queens-settle .8s ease-out var(--companion-elapsed,0ms) both; }
.is-ready .queen-leg { animation:queen-leg-swing 3.2s ease-in-out calc(-.5s + var(--companion-elapsed,0ms)) infinite; }
.is-ready .queen-leg-1 { animation-delay:calc(-2s + var(--companion-elapsed,0ms)); }
.is-ready .queen-leg-2 { animation-duration:3.7s; animation-delay:calc(-1.3s + var(--companion-elapsed,0ms)); }
.is-ready .queen-leg-3 { animation-duration:3.7s; animation-delay:calc(-3s + var(--companion-elapsed,0ms)); }
@keyframes queens-settle { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
@keyframes queen-leg-swing { 0%,100% { transform:rotate(-3deg); } 50% { transform:rotate(3deg); } }
.poker-airliner { width:min(286px,78%); aspect-ratio:2; top:0; right:4px; transform:translateY(-82%); }
.airliner-arrival { position:absolute; inset:0; transform-origin:60% 82%; }
.is-ready .airliner-arrival { animation:airliner-land 3.5s cubic-bezier(.25,.5,.32,1) var(--companion-elapsed,0ms) both; }
.airliner-beacon { position:absolute; width:3px; height:3px; left:55%; top:44%; background:#ff6a58; border-radius:50%; box-shadow:0 0 6px #ff5944; }
.is-ready .airliner-beacon { animation:airliner-beacon 2s linear calc(3.5s + var(--companion-elapsed,0ms)) infinite; }
.airliner-touchdown { position:absolute; left:40%; right:20%; top:80%; height:8px; background:radial-gradient(ellipse,#b1e2fa99,transparent 70%); opacity:0; }
.is-ready .airliner-touchdown { animation:airliner-smoke .8s ease-out calc(2.15s + var(--companion-elapsed,0ms)) both; }
@keyframes airliner-land {
  0% { opacity:0; transform:translate(-110vw,-150px) rotate(8deg); }
  9% { opacity:1; }
  48% { transform:translate(-95px,-22px) rotate(-3deg); }
  64% { transform:translate(-48px,0) rotate(-3deg); }
  75% { transform:translate(-22px,1px) rotate(0deg); }
  100% { opacity:1; transform:translate(0,0) rotate(0deg); }
}
@keyframes airliner-smoke { 0% { opacity:0; transform:scaleX(.3); } 25% { opacity:.8; } 100% { opacity:0; transform:scaleX(1.4) translateX(-12px); } }
@keyframes airliner-beacon { 0%,8%,100% { opacity:.1; } 4% { opacity:1; } }
.companion-stage-axes, .companion-stage-queens, .companion-stage-airliner { height:258px; aspect-ratio:auto; overflow:hidden; }
.poker-preview-plaque { position:absolute; z-index:0; top:145px; left:8px; right:8px; height:96px; border-radius:16px; border:1px solid #3d728f; background:linear-gradient(110deg,#152a3b,#0b1825); box-shadow:inset 0 1px #9adcff55; color:#acd5e7; font-size:11px; text-align:left; padding:14px; }
.poker-preview-plaque strong { display:block; color:#f2f8ff; font-size:32px; margin-top:4px; }
.companion-stage .poker-axes { top:-19px; right:14px; }
.companion-stage .poker-queens { top:145px; width:218px; right:-3px; }
.companion-stage .poker-airliner { top:145px; width:260px; right:10px; }
.companion-stage-axes .poker-preview-plaque { z-index:3; }
.appearance-paused .poker-companion *, .poker-companion.is-animation-paused * { animation-play-state:paused !important; }
/* The panther rests on the card rim. Only the free tail moves; the paws stay planted. */
.profile-score-scene.has-companion-panther { margin-top: clamp(114px, 34vw, 159px); }
.poker-panther { width:min(370px,96%); aspect-ratio:3 / 2; top:0; right:2%; transform:translateY(-57.5%); }
.panther-arrival, .panther-body, .panther-tail, .panther-eyes { position:absolute; inset:0; width:100%; height:100%; }
.panther-arrival { display:block; }
.panther-body { clip-path:polygon(0 0,100% 0,100% 61%,78% 61%,78% 100%,0 100%); }
.panther-tail { clip-path:polygon(89% 59%,100% 59%,100% 100%,78% 100%,78% 79%,89% 79%); transform-origin:94% 60%; }
.panther-eyes { overflow:visible; }
.panther-eye-light { fill:#a8f8ff; filter:drop-shadow(0 0 5px #5de5ff); }
.panther-eyelids { fill:#080c12; opacity:0; }
.is-ready .panther-arrival { animation:panther-settle .9s ease-out var(--companion-elapsed,0ms) both; }
.is-ready .panther-tail { animation:panther-tail-sway 5.4s ease-in-out var(--companion-elapsed,0ms) infinite; }
.is-ready .panther-eye-light { animation:panther-eye-glow 7.4s ease-in-out var(--companion-elapsed,0ms) infinite; }
.is-ready .panther-eyelids { animation:panther-blink 7.4s linear var(--companion-elapsed,0ms) infinite; }
@keyframes panther-settle { from { opacity:0; } to { opacity:1; } }
@keyframes panther-tail-sway { 0%,100% { transform:rotate(-6deg); } 50% { transform:rotate(7deg); } }
@keyframes panther-eye-glow { 0%,30%,70%,100% { opacity:.48; } 45%,85% { opacity:.85; } 55%,58% { opacity:0; } }
@keyframes panther-blink { 0%,53%,60%,100% { opacity:0; } 55%,57% { opacity:1; } }
.companion-stage-panther { height:258px; aspect-ratio:auto; overflow:hidden; }
.companion-stage .poker-panther { top:145px; right:10px; width:260px; }
@media (prefers-reduced-motion:reduce) {
  .poker-companion * { animation:none !important; }
  .poker-companion .queens-arrival, .poker-companion .airliner-arrival { opacity:1; transform:none; }
  .panther-arrival { opacity:1; }
  .panther-eye-light { opacity:.6; }
  .panther-eyelids { opacity:0; }
}