.pg-avatar { --skin:#ffd2b7; --skin-shadow:#ecad91; --hair:#4b3029; --hair-hi:#68463c; --cloth:#e48a86; --cloth-dark:#b85d68; position:relative; display:inline-block; width:84px; height:108px; flex:0 0 auto; pointer-events:none; }
.pg-avatar-small { width:36px; height:46px; }
.pg-avatar-tiny { width:28px; height:36px; }
.pg-avatar-large { width:112px; height:144px; }
.pg-avatar[data-skin="warm"] { --skin:#efbd98; --skin-shadow:#d69675; }
.pg-avatar[data-skin="tan"] { --skin:#c98e68; --skin-shadow:#a76a50; }
.pg-avatar[data-skin="deep"] { --skin:#8d5c45; --skin-shadow:#6d4337; }
.pg-avatar[data-hair-color="chestnut"] { --hair:#764638; --hair-hi:#965d49; }
.pg-avatar[data-hair-color="midnight"] { --hair:#242638; --hair-hi:#3d4058; }
.pg-avatar[data-hair-color="berry"] { --hair:#68384f; --hair-hi:#884b69; }
.pg-avatar[data-outfit="outfit-sky"] { --cloth:#7fb4df; --cloth-dark:#527da7; }
.pg-avatar[data-outfit="outfit-mint"] { --cloth:#82c4b4; --cloth-dark:#4c8e82; }
.pg-avatar[data-outfit="outfit-lavender"] { --cloth:#aa91dc; --cloth-dark:#735faa; }
.pg-avatar-shadow { position:absolute; left:19%; right:19%; bottom:1%; height:8%; border-radius:50%; background:#02071266; filter:blur(2px); }
.pg-avatar-person { position:absolute; inset:0; transform-origin:50% 92%; animation:pg-avatar-idle 2.8s ease-in-out infinite; }
.pg-avatar-head { position:absolute; z-index:5; top:3%; left:23%; width:54%; height:36%; border:1px solid #4c293533; border-radius:47% 47% 44% 44%; background:var(--skin); box-shadow:inset 0 -4px 0 #9b526912; }
.pg-avatar-ear { position:absolute; top:48%; width:12%; height:19%; border:1px solid #4c293522; border-radius:50%; background:var(--skin); }
.pg-avatar-ear.left { left:-7%; }.pg-avatar-ear.right { right:-7%; }
.pg-avatar-eye { position:absolute; z-index:3; top:50%; width:12%; height:17%; border-radius:50%; background:#382a31; box-shadow:inset 0 -2px 0 #15131a, inset 2px 2px 0 #fff; }
.pg-avatar-eye.left { left:25%; }.pg-avatar-eye.right { right:25%; }
.pg-avatar-blush { position:absolute; z-index:3; top:68%; width:13%; height:6%; border-radius:50%; background:#ef819044; }
.pg-avatar-blush.left { left:14%; }.pg-avatar-blush.right { right:14%; }
.pg-avatar-mouth { position:absolute; z-index:3; left:45%; top:72%; width:10%; height:6%; border-bottom:2px solid #9a5360; border-radius:0 0 50% 50%; }
.pg-avatar-hair,.pg-hair-back,.pg-hair-cap,.pg-hair-fringe,.pg-hair-extra { position:absolute; display:block; }
.pg-avatar-hair { z-index:2; inset:-5% -5% 0; }
.pg-hair-back { z-index:1; inset:8% -3% -13%; border:0 solid var(--hair); border-right-width:8px; border-left-width:8px; border-radius:44% 44% 35% 35%; background:transparent; }
.pg-hair-cap { top:0; left:4%; width:92%; height:54%; border-radius:52% 52% 35% 35%; background:var(--hair); box-shadow:inset 7px 5px 0 var(--hair-hi); }
.pg-hair-fringe { top:31%; width:34%; height:29%; border-radius:8% 18% 70% 20%; background:var(--hair); transform:rotate(14deg); }
.pg-hair-fringe.one { left:8%; }.pg-hair-fringe.two { left:34%; top:27%; transform:rotate(-6deg); }.pg-hair-fringe.three { right:5%; transform:scaleX(-1) rotate(10deg); }
.pg-avatar[data-hair="hair-short"] .pg-hair-back { bottom:20%; border-right-width:6px; border-left-width:6px; }
.pg-avatar[data-hair="hair-short"] .pg-hair-cap { height:61%; }
.pg-avatar[data-hair="hair-bun"] .pg-hair-extra { top:-25%; left:35%; width:31%; height:30%; border:3px solid var(--hair-hi); border-radius:50%; background:var(--hair); }
.pg-avatar[data-hair="hair-bun"] .pg-hair-back { bottom:2%; }
.pg-avatar[data-hair="hair-wave"] .pg-hair-back { inset:5% -9% -25%; border-right-width:10px; border-left-width:10px; border-radius:46% 46% 32% 32%; box-shadow:-3px 6px 0 var(--hair),3px 6px 0 var(--hair); }
.pg-avatar-accessory { position:absolute; z-index:5; inset:0; }
.pg-avatar[data-accessory="accessory-glasses"] .pg-avatar-accessory::before,.pg-avatar[data-accessory="accessory-glasses"] .pg-avatar-accessory::after { content:""; position:absolute; top:46%; width:28%; height:25%; border:2px solid #d97883; border-radius:50%; }
.pg-avatar[data-accessory="accessory-glasses"] .pg-avatar-accessory::before { left:14%; }.pg-avatar[data-accessory="accessory-glasses"] .pg-avatar-accessory::after { right:14%; }
.pg-avatar[data-accessory="accessory-glasses"] .pg-avatar-accessory i { position:absolute; top:56%; left:42%; width:16%; height:2px; background:#d97883; }
.pg-avatar[data-accessory="accessory-clip"] .pg-avatar-accessory i,.pg-avatar[data-accessory="accessory-star"] .pg-avatar-accessory i { position:absolute; top:19%; right:10%; width:18%; height:8%; border-radius:8px; background:#ff8f9e; transform:rotate(-17deg); box-shadow:0 0 0 1px #8b425355; }
.pg-avatar[data-accessory="accessory-star"] .pg-avatar-accessory i { width:18%; height:18%; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%); background:#ffe078; }
.pg-avatar-torso { position:absolute; z-index:3; top:37%; left:29%; width:42%; height:31%; border-radius:28% 28% 22% 22%; background:var(--cloth); box-shadow:inset 0 -5px 0 var(--cloth-dark); }
.pg-avatar-collar { position:absolute; top:0; left:29%; width:42%; height:23%; border-radius:0 0 50% 50%; background:#fff5ea; }
.pg-avatar-arm { position:absolute; z-index:2; top:40%; width:17%; height:31%; border-radius:45% 45% 48% 48%; background:var(--cloth); transform-origin:50% 10%; }
.pg-avatar-arm i { position:absolute; left:19%; bottom:-5%; width:62%; height:24%; border-radius:50%; background:var(--skin); }
.pg-avatar-arm.left { left:21%; transform:rotate(8deg); }.pg-avatar-arm.right { right:21%; transform:rotate(-8deg); }
.pg-avatar-leg { position:absolute; z-index:2; top:65%; width:20%; height:28%; border-radius:0 0 35% 35%; background:#36405c; }
.pg-avatar-leg.left { left:29%; }.pg-avatar-leg.right { right:29%; }
.pg-avatar-leg i { position:absolute; left:-8%; bottom:-12%; width:116%; height:30%; border-radius:45% 50% 38% 32%; background:#f4ede8; box-shadow:inset 0 -2px 0 #b8aec0; }
.pg-avatar-bag { display:none; position:absolute; z-index:4; right:-19%; top:30%; width:30%; height:38%; border:2px solid #f0d2aa; border-radius:35%; background:#f5dfbe; }
.pg-avatar[data-accessory="accessory-bag"] .pg-avatar-bag { display:block; }
.pg-avatar[data-accessory="accessory-bag"] .pg-avatar-torso::before { content:""; position:absolute; z-index:5; left:15%; top:-8%; width:75%; height:75%; border-right:2px solid #f0d2aa; transform:rotate(24deg); }
.pg-avatar.mood-cheer .pg-avatar-person { animation:pg-avatar-cheer .8s ease-in-out infinite; }
.pg-avatar.mood-cheer .pg-avatar-arm.left { transform:rotate(145deg); }.pg-avatar.mood-cheer .pg-avatar-arm.right { transform:rotate(-145deg); }
.pg-avatar.mood-sad .pg-avatar-person { animation:pg-avatar-sad 1.5s ease-in-out infinite; }
.pg-avatar.mood-sad .pg-avatar-mouth { top:76%; border-top:2px solid #9a5360; border-bottom:0; border-radius:50% 50% 0 0; }
.pg-avatar.mood-play .pg-avatar-person { animation:pg-avatar-play .55s ease-in-out infinite alternate; }
@keyframes pg-avatar-idle { 0%,100%{transform:translateY(0) rotate(-.6deg)} 50%{transform:translateY(-2.5%) rotate(.6deg)} }
@keyframes pg-avatar-cheer { 0%,100%{transform:translateY(0) scaleY(1)} 45%{transform:translateY(-9%) scaleY(1.03)} }
@keyframes pg-avatar-sad { 0%,100%{transform:translateY(1%) rotate(-1deg)} 50%{transform:translateY(3%) rotate(1deg)} }
@keyframes pg-avatar-play { from{transform:translateY(0) rotate(-1.5deg)} to{transform:translateY(-3%) rotate(1.5deg)} }
@media (prefers-reduced-motion:reduce) { .pg-avatar-person { animation:none !important; } }

.lobby-avatar-card { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; min-height:132px; margin-bottom:10px; padding:10px 14px; overflow:hidden; border-color:#e4889850; background:radial-gradient(circle at 18% 26%,#e9879740,transparent 46%),linear-gradient(145deg,#22243f,#101829 74%); }
.lobby-avatar-preview { display:grid; height:112px; place-items:end center; }
.lobby-avatar-info { display:grid; min-width:0; gap:4px; }
.lobby-avatar-info > small { color:#e899a7; font-size:9px; font-weight:900; letter-spacing:.12em; }
.lobby-avatar-info > b { overflow:hidden; color:#f4f1f7; font-size:17px; text-overflow:ellipsis; white-space:nowrap; }
.lobby-avatar-info > span { color:#b9c3d4; font-size:11px; font-weight:800; }
.avatar-xp-track { height:5px; margin:2px 0; overflow:hidden; border-radius:99px; background:#ffffff13; }
.avatar-xp-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ef8c9d,#a992ec); transition:width .3s; }
.player { display:flex !important; align-items:center; gap:8px; min-height:48px; }.player .player-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.player-avatar-slot { display:grid; width:38px; height:43px; flex:0 0 38px; place-items:end center; overflow:hidden; border-radius:13px; background:#ffffff0b; }
.game-avatar-strip { display:flex; align-items:center; gap:3px; margin-left:auto; }.game-avatar-chip { position:relative; display:grid; width:34px; height:38px; place-items:end center; overflow:hidden; border:1px solid #ffffff14; border-radius:12px; background:#111d2f; }.game-avatar-chip.me { border-color:#ef95a466; background:#493249; }.game-avatar-chip.turn { box-shadow:0 0 0 2px #ffd66988,0 0 15px #ffd66944; }
.user-info-avatar.has-character { width:72px; height:82px; overflow:hidden; border-radius:18px; font-size:0; background:linear-gradient(145deg,#352f58,#17243a); }
@media (max-width:700px) {
  .lobby-avatar-card { grid-template-columns:90px minmax(0,1fr); min-height:112px; }.lobby-avatar-preview { height:92px; }.lobby-avatar-preview .pg-avatar { width:70px; height:90px; }
  .game-avatar-chip:nth-child(n+5) { display:none; }
}

/* Character placement pass: keep the avatar static and give it real visual weight. */
.pg-avatar-person,
.pg-avatar.mood-cheer .pg-avatar-person,
.pg-avatar.mood-sad .pg-avatar-person,
.pg-avatar.mood-play .pg-avatar-person { animation:none !important; transform:none !important; }
.pg-avatar-hero { width:158px; height:204px; }
.pg-avatar-roster { width:108px; height:140px; }
.game-avatar-strip { display:none !important; }

.lobby-avatar-card { grid-template-columns:174px minmax(0,1fr); min-height:218px; padding:8px 16px 10px; background:radial-gradient(circle at 28% 40%,#e9879738,transparent 49%),linear-gradient(145deg,#22243f,#101829 74%); }
.lobby-avatar-preview { height:196px; place-items:end center; }
.lobby-avatar-info { align-content:center; gap:7px; }
.lobby-avatar-info > b { font-size:20px; }
.lobby-avatar-info > span { font-size:12px; }

#room > aside.room-sidebar { display:flex; min-width:0; flex-direction:column; }
.room-avatar-stage { display:grid; flex:0 0 auto; min-height:250px; place-items:center; align-content:center; gap:2px; margin-bottom:10px; padding:10px 14px 12px; border-color:#8f7ce34d; background:radial-gradient(circle at 50% 42%,#8f76e632,transparent 48%),linear-gradient(160deg,#202744,#101827 78%); text-align:center; }
.room-avatar-stage-head { display:flex; width:100%; align-items:center; justify-content:space-between; color:#a99fff; font-size:10px; font-weight:900; letter-spacing:.09em; }
.room-avatar-stage-head span { color:#d4d9e5; letter-spacing:0; }
.room-avatar-preview { display:grid; width:180px; height:190px; place-items:end center; }
.room-avatar-stage > b { max-width:100%; overflow:hidden; color:#f2f5fb; font-size:17px; text-overflow:ellipsis; white-space:nowrap; }
.room-avatar-stage > span { color:#9ea9bb; font-size:10px; }
.room-chat-panel { min-height:0; }

.waiting-participants { padding:14px 16px 18px; }
.waiting-participants #players { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.waiting-participants .player { display:flex !important; min-height:196px; padding:12px 10px 14px; flex-direction:column; justify-content:flex-end; gap:5px; border:1px solid #ffffff10; border-radius:16px; background:linear-gradient(160deg,#172239,#0b1422); text-align:center; }
.waiting-participants .player.inspectable:hover { border-color:#8476e755; background:linear-gradient(160deg,#1c2942,#10192a); }
.waiting-participants .player-avatar-slot { display:grid; width:126px; height:146px; flex:0 0 146px; place-items:end center; overflow:visible; border:0; border-radius:0; background:transparent; }
.waiting-participants .player-label { width:100%; font-size:13px; font-weight:800; }

body.game-active #room > aside.room-sidebar { height:100%; }
body.game-active #room > aside > .room-avatar-stage { flex:0 0 276px; height:276px; min-height:276px; margin:0 0 8px; padding:7px 12px 9px; }
body.game-active .room-avatar-preview { height:205px; }
body.game-active #room > aside > .room-chat-panel { display:flex; height:auto; min-height:0; flex:1 1 auto; margin:0; flex-direction:column; }
body.game-active #room-chat { height:auto; min-height:90px; max-height:none; flex:1 1 auto; }

@media (max-width:850px) {
  .pg-avatar-hero { width:112px; height:145px; }
  .pg-avatar-roster { width:86px; height:112px; }
  .lobby-avatar-card { grid-template-columns:126px minmax(0,1fr); min-height:166px; padding:8px 14px; }
  .lobby-avatar-preview { height:148px; }
  .lobby-avatar-preview .pg-avatar { width:112px; height:145px; }
  #room > aside.room-sidebar, body.game-active #room > aside.room-sidebar { display:flex; width:100%; height:auto; flex-direction:column; }
  .room-avatar-stage, body.game-active #room > aside > .room-avatar-stage { display:grid; width:100%; height:154px; min-height:154px; margin:0 0 8px; padding:8px 16px; grid-template-columns:126px minmax(0,1fr); grid-template-rows:auto auto auto; grid-template-areas:"preview head" "preview name" "preview status"; place-items:center start; align-content:center; text-align:left; }
  .room-avatar-stage-head { grid-area:head; align-self:end; }
  .room-avatar-preview { width:118px; height:138px; grid-area:preview; place-items:end center; }
  body.game-active .room-avatar-preview { height:138px; }
  .room-avatar-stage > b { grid-area:name; align-self:center; font-size:18px; }
  .room-avatar-stage > span { grid-area:status; align-self:start; font-size:11px; }
  body.game-active #room > aside > .room-chat-panel { height:auto; min-height:310px; flex:none; }
  body.game-active #room-chat { height:180px; min-height:180px; max-height:180px; flex:none; }
  .waiting-participants #players { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .waiting-participants .player { min-height:160px; padding:8px 5px 10px; }
  .waiting-participants .player-avatar-slot { width:96px; height:116px; flex-basis:116px; }
  .waiting-participants .player-label { font-size:11px; white-space:normal; }
}

@media (max-width:380px) {
  .waiting-participants #players { grid-template-columns:1fr; }
}

/* Mobile keeps the original compact room presentation. */
@media (max-width:850px) {
  .lobby-avatar-card,
  .room-avatar-stage,
  body.game-active #room > aside > .room-avatar-stage,
  .player-avatar-slot,
  .game-avatar-strip,
  .lobby-user-avatar.has-character,
  .user-info-avatar.has-character { display:none !important; }
  body.game-active #room > aside > .room-chat-panel { display:flex; height:auto; min-height:0; flex:none; margin-bottom:8px; flex-direction:column; }
  body.game-active #room-chat { height:280px; min-height:140px; max-height:42vh; flex:none; }
  .waiting-participants #players { display:block; }
  .waiting-participants .player { display:flex !important; min-height:54px; padding:7px 9px; flex-direction:row; justify-content:flex-start; gap:9px; border:0; border-bottom:1px solid #ffffff0c; border-radius:9px; background:transparent; text-align:left; }
  .waiting-participants .player-label { width:auto; font-size:12px; white-space:nowrap; }
}

/* Sprite avatar v2: a compact arcade mascot with state-driven reactions. */
.pg-avatar { width:82px; height:123px; }
.pg-avatar-small { width:34px; height:51px; }
.pg-avatar-tiny { width:28px; height:42px; }
.pg-avatar-large { width:112px; height:168px; }
.pg-avatar-hero { width:106px; height:158px; }
.pg-avatar-side { width:104px; height:156px; }
.pg-avatar-roster { width:72px; height:108px; }
.pg-avatar-person {
  position:absolute;
  z-index:1;
  inset:0;
  overflow:visible;
  transform-origin:50% 88%;
}
.pg-avatar-art {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 5px 5px #02071275);
  user-select:none;
  -webkit-user-drag:none;
}
.pg-avatar-shadow {
  z-index:0;
  left:20%;
  right:20%;
  bottom:0;
  height:5%;
  background:#0207128c;
  filter:blur(4px);
}
.pg-avatar-state-face,
.pg-avatar-state-effect { position:absolute; z-index:3; inset:0; display:block; pointer-events:none; }
.pg-avatar-state-face > i,
.pg-avatar-state-face > b { display:none; }

.pg-avatar.state-ko .pg-avatar-person { transform:none !important; animation:pg-avatar-collapse .32s cubic-bezier(.2,.72,.32,1) both !important; }
.pg-avatar.state-ko .pg-avatar-art { transform:scale(1.06); transform-origin:50% 88%; filter:drop-shadow(0 5px 5px #02071275); }
.pg-avatar.state-ko .pg-avatar-state-face,
.pg-avatar.state-ko .pg-avatar-state-effect { display:none; }

.pg-avatar.state-win .pg-avatar-person { transform:scale(1.025) !important; animation:pg-avatar-win .42s cubic-bezier(.2,.9,.3,1.35) both !important; }
.pg-avatar.state-win .pg-avatar-state-effect::before,
.pg-avatar.state-win .pg-avatar-state-effect::after { position:absolute; color:#ffe36c; filter:drop-shadow(0 0 5px #ffc945); }
.pg-avatar.state-win .pg-avatar-state-effect::before { content:"★"; top:5%; left:0; font-size:18%; transform:rotate(-15deg); }
.pg-avatar.state-win .pg-avatar-state-effect::after { content:"✦"; top:18%; right:-2%; font-size:17%; }

.pg-avatar.state-ready .pg-avatar-state-effect::after,
.pg-avatar.state-active .pg-avatar-state-effect::after,
.pg-avatar.state-sad .pg-avatar-state-effect::after {
  position:absolute;
  top:4%;
  right:-5%;
  display:grid;
  width:25%;
  aspect-ratio:1;
  place-items:center;
  border:2px solid #ffffffaa;
  border-radius:50%;
  color:white;
  background:#263449;
  box-shadow:0 3px 9px #0008;
  font-size:15%;
  font-weight:1000;
}
.pg-avatar.state-ready .pg-avatar-state-effect::after { content:"✓"; background:#168a6c; }
.pg-avatar.state-active .pg-avatar-state-effect::after { content:"!"; color:#3c2700; background:#ffd75e; }
.pg-avatar.state-sad .pg-avatar-state-effect::after { content:"💧"; border:0; background:transparent; box-shadow:none; font-size:18%; }

@keyframes pg-avatar-collapse { from{transform:translateY(-7%) scale(1.04)} to{transform:translateY(0) scale(1)} }
@keyframes pg-avatar-win { from{transform:scale(.94)} to{transform:scale(1.025)} }

.lobby-avatar-card { grid-template-columns:126px minmax(0,1fr); min-height:174px; }
.lobby-avatar-preview { height:162px; }
.settings-character { display:grid; gap:5px; margin:16px 0 4px; padding:13px; border:1px solid #ffffff12; border-radius:13px; background:#0e1828; }
.settings-character > b { color:#eef1f8; font-size:13px; }
.settings-character > small { color:#8995a8; font-size:10px; line-height:1.5; }
.avatar-character-switch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-top:4px; }
.avatar-character-switch button { min-height:36px; padding:6px 8px; border-color:#ffffff16; color:#9ca7b9; background:#111b2b; font-size:11px; font-weight:900; }
.avatar-character-switch button.active { border-color:#9b8bff88; color:#fff; background:linear-gradient(135deg,#6253c8,#7350a8); box-shadow:0 0 12px #715ddb2d; }

.room-avatar-stage { min-height:204px; padding:9px 12px 10px; }
.room-avatar-stage-head { justify-content:flex-end; }
.room-avatar-preview { width:118px; height:158px; }
.room-avatar-stage > b { font-size:15px; }
body.game-active #room > aside > .room-avatar-stage { flex-basis:210px; height:210px; min-height:210px; }
body.game-active .room-avatar-preview { height:157px; }

.waiting-participants #players { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.waiting-participants .player { min-height:148px; padding:8px 7px 10px; gap:3px; border-radius:11px; }
.waiting-participants .player-avatar-slot { width:76px; height:111px; flex-basis:111px; }
.waiting-participants .player-label { font-size:11px; }
.waiting-participants .ace-player { border-color:#e9c35b66; background:radial-gradient(circle at 50% 34%,#dcae3424,transparent 46%),linear-gradient(160deg,#20253a,#0d1625); box-shadow:inset 0 0 20px #d9ad2611; }
.ace-avatar { position:relative; isolation:isolate; }
.ace-avatar > .pg-avatar { z-index:2; }
.ace-avatar::before,
.ace-avatar::after { content:""; position:absolute; z-index:1; pointer-events:none; opacity:0; }
.ace-avatar::before { inset:13% -18% 4%; border:2px solid #ffd76a; border-radius:50%; background:radial-gradient(circle,#ffe47d69 0 18%,#9d72f052 42%,transparent 69%); box-shadow:0 0 16px #f5c94fa8,0 0 32px #8069e27a,inset 0 0 14px #fff2a366; }
.ace-avatar::after { content:"✦  ✧  ✦"; z-index:3; top:9%; left:-24%; width:148%; color:#ffe278; font-size:13px; font-weight:1000; letter-spacing:9px; text-align:center; text-shadow:0 0 6px #fff2a8,0 0 12px #f1b936; }
.ace-aura-enter .ace-avatar::before { animation:ace-aura-burst 2s ease-out both; }
.ace-aura-enter .ace-avatar::after { animation:ace-star-rise 2s ease-out both; }
.ace-player .player-label { display:inline-flex; width:auto; max-width:100%; align-items:center; justify-content:center; gap:5px; padding:4px 8px; overflow:visible; border:1px solid #e9c35b73; border-radius:999px; color:#fff1b2; background:linear-gradient(110deg,#4d3716,#2c2544 62%,#152137); box-shadow:0 2px 10px #0007,inset 0 0 9px #ffdf6d17; text-shadow:0 1px 2px #000; }
.ace-player .player-label::before { content:"ACE"; flex:0 0 auto; padding:2px 5px; border:1px solid #ffe08088; border-radius:999px; color:#382200; background:linear-gradient(135deg,#fff0a0,#e5aa35); box-shadow:0 0 8px #f0c34c66; font-size:7px; font-weight:1000; letter-spacing:.09em; text-shadow:none; }
@keyframes ace-aura-burst { 0%{opacity:0;transform:scale(.55) rotate(-10deg)} 18%{opacity:1;transform:scale(1.12) rotate(3deg)} 65%{opacity:.72;transform:scale(1.02) rotate(0)} 100%{opacity:0;transform:scale(1.18) rotate(5deg)} }
@keyframes ace-star-rise { 0%{opacity:0;transform:translateY(14%) scale(.72)} 22%{opacity:1;transform:translateY(0) scale(1.08)} 72%{opacity:.82;transform:translateY(-8%) scale(1)} 100%{opacity:0;transform:translateY(-24%) scale(.9)} }
.waiting-participants .player-empty {
  width:100%;
  justify-content:center;
  appearance:none;
  border:1px dashed #53617780;
  color:#69758a;
  background:linear-gradient(160deg,#121d2e88,#0a122088);
  font:inherit;
  cursor:pointer;
}
.waiting-participants .player-empty:hover,.waiting-participants .player-empty:focus-visible { border-color:#7e70eeaa; color:#b7afff; background:linear-gradient(160deg,#1c27408f,#15162f99); box-shadow:0 0 0 2px #796bea20,0 0 24px #6859e92b; outline:0; }
.waiting-participants .player-empty:hover>span,.waiting-participants .player-empty:focus-visible>span { border-color:#8d81f0aa; color:#d7d2ff; transform:scale(1.08); }
.waiting-participants .player-empty > span { display:grid; width:42px; height:42px; place-items:center; border:1px solid #53617777; border-radius:50%; font-size:25px; font-weight:300; }
.waiting-participants .player-empty > small { font-size:9px; font-weight:800; letter-spacing:.04em; }

@media (max-width:1150px) and (min-width:851px) {
  .waiting-participants #players { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* On phones, characters stay out of the game UI and the room list remains compact. */
@media (max-width:850px) {
  .lobby-avatar-card,
  .room-avatar-stage,
  body.game-active #room > aside > .room-avatar-stage,
  .player-avatar-slot,
  .game-avatar-strip,
  .lobby-user-avatar.has-character,
  .user-info-avatar.has-character,
  .waiting-participants .player-empty { display:none !important; }
  .waiting-participants #players { display:block; }
  .waiting-participants .player { display:flex !important; min-height:54px; padding:7px 9px; flex-direction:row; justify-content:flex-start; gap:9px; border:0; border-bottom:1px solid #ffffff0c; border-radius:9px; background:transparent; text-align:left; }
}

/* The lobby and room sidebars prioritize chat; avatars remain available in My Room. */
#lobby-avatar-card,
#room-avatar-stage,
body.game-active #room > aside > #room-avatar-stage { display:none !important; }
#lobby > aside,
#room > aside.room-sidebar,
body.game-active #room > aside.room-sidebar { display:flex; min-height:0; align-self:stretch; flex-direction:column; }
#lobby > aside > .panel:not(#lobby-avatar-card),
#room > aside.room-sidebar > .room-chat-panel,
body.game-active #room > aside.room-sidebar > .room-chat-panel { display:flex; height:auto; min-height:0; flex:1 1 auto; margin-bottom:10px; flex-direction:column; }
#lobby-chat { height:auto; min-height:0; max-height:none; flex:1 1 0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
#room-chat,
body.game-active #room-chat { height:auto; min-height:0; max-height:none; flex:1 1 0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }

@media (min-width:851px) {
  #lobby > aside { height:min(860px,calc(100dvh - 120px)); min-height:0; overflow:hidden; align-self:flex-start; }
  #lobby > aside > .panel:not(#lobby-avatar-card) { min-height:0; overflow:hidden; }
  #lobby-chat { min-height:0; flex:1 1 0; overflow-y:auto; }
  body:not(.game-active) #room > aside.room-sidebar { height:min(860px,calc(100dvh - 120px)); min-height:0; overflow:hidden; align-self:flex-start; }
  body:not(.game-active) #room > aside.room-sidebar > .room-chat-panel { min-height:0; overflow:hidden; }
  body:not(.game-active) #room-chat { min-height:0; flex:1 1 0; overflow-y:auto; }
}

@media (max-width:850px) {
  #lobby-chat,#room-chat,body.game-active #room-chat { min-height:300px; max-height:55vh; }
}

@media (min-width:851px) and (max-height:850px) {
  #lobby-chat { min-height:260px; max-height:42vh; }
  .lobby-shortcuts button { min-height:70px; }
}