/* Player-specific vote status complements the existing compact vote cards. */
.player-votes { margin-top:18px; border-top:1px solid #b1daf01c; padding-top:18px; }
.player-votes-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.player-votes-heading h3 { font-family:'Manrope',Arial,sans-serif; font-size:1rem; line-height:1.4; letter-spacing:0; }
.votes-refresh { display:inline-flex; align-items:center; gap:5px; padding:5px 0; background:transparent; color:var(--cyan); font-size:.6875rem; font-weight:700; }
.votes-refresh .icon { width:14px; height:14px; }
.votes-refresh:hover { color:#b9e8fa; }
.votes-refresh:disabled { opacity:.55; cursor:wait; }
.vote-totals { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vote-totals > div { display:grid; justify-items:center; gap:4px; padding:13px 8px; border:1px solid #b1daf020; border-radius:9px; background:#080f17; }
.vote-totals strong { font-family:var(--font-display); font-size:1.75rem; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums; }
.vote-totals span { color:#b5c8d6; font-size:.75rem; font-weight:700; }
.vote-total-available strong { color:#69e2a4; }
.vote-total-waiting strong { color:#e9bc62; }
.votes-unverified { margin-top:9px; text-align:center; color:#829ead; font-size:.6875rem; }
.votes-status { margin:12px 0; color:#a4bac8; font-size:.75rem; line-height:1.6; }
.player-vote-list { display:grid; gap:0; list-style:none; padding:0; margin:0; }
.player-vote-list li { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px 0; border-top:1px solid #b1daf012; }
.player-vote-list img { width:24px; height:24px; object-fit:contain; border-radius:4px; }
.player-vote-list strong { display:block; font-size:.75rem; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
.player-vote-detail { display:block; margin-top:2px; color:#819eae; font-size:.6875rem; line-height:1.5; }
.player-vote-state { padding:3px 6px; border-radius:5px; background:#b1daf009; color:#91a8b7; font-size:.625rem; line-height:1.5; font-weight:700; white-space:nowrap; }
[data-vote-state="available"] .player-vote-state { background:#69e2a412; color:#69e2a4; }
[data-vote-state="cooldown"] .player-vote-state { background:#e9bc6212; color:#e9bc62; }
[data-vote-state="unavailable"] .player-vote-state { background:#ee6c6914; color:#f38b87; }
.vote-player-state { min-height:1.5em; margin-top:8px; color:#91a8b7; font-size:.75rem; line-height:1.5; text-align:center; }
.vote-card:first-child .vote-player-state { grid-column:1 / -1; }
.vote-player-state[data-vote-state="available"] { color:#69e2a4; }
.vote-player-state[data-vote-state="cooldown"] { color:#e9bc62; }
.voting-layout #vote-providers .vote-player-state[data-vote-state="unavailable"] { color:#f38b87; }
@media(max-width:400px) {
  .player-vote-list li { grid-template-columns:20px minmax(0,1fr); }
  .player-vote-list img { width:20px; height:20px; }
  .player-vote-state { grid-column:2; justify-self:start; }
}

/* Compact account panel. Status errors and useful cooldowns keep their space. */
#skin-panel { padding:18px; }
#skin-panel .skin-panel-heading { min-height:0; margin-bottom:10px; gap:10px; }
#skin-panel .skin-panel-heading .eyebrow { font-size:.625rem; margin-bottom:3px; }
#skin-panel .skin-panel-heading h2 { font-size:1.125rem; line-height:1.4; }
#skin-panel .skin-clear { width:34px; height:34px; }
#skin-panel .skin-stage {
  width:200px;
  height:200px;
  margin-inline:auto;
  overflow:visible;
  border:0;
  border-radius:0;
  background:none;
}
#skin-panel .skin-stage::before,
#skin-panel .skin-stage::after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-32px;
  border-radius:50%;
  background:radial-gradient(ellipse,#96b8fb70,#6fcde531 42%,transparent 70%);
  mask-image:none;
  filter:blur(12px);
  pointer-events:none;
}
#skin-panel .skin-stage::before { opacity:.26; animation:vote-skin-glow 4.8s ease-in-out infinite; }
#skin-panel .skin-stage::after { opacity:0; transform:scale(.9); transition:opacity 360ms ease,transform 360ms cubic-bezier(.2,.7,.2,1); }
@keyframes vote-skin-glow { 0%,100% { opacity:.4; transform:scale(.94); } 50% { opacity:.9; transform:scale(1.04); } }
#skin-panel .vote-skin-avatar {
  position:relative;
  display:grid;
  place-items:center;
  isolation:isolate;
  width:100%;
  height:100%;
  overflow:visible;
  clip-path:polygon(-24px -40px,calc(100% + 24px) -40px,calc(100% + 24px) calc(100% - 20px),100% calc(100% - 20px),calc(100% - 1.52px) calc(100% - 12.35px),calc(100% - 5.86px) calc(100% - 5.86px),calc(100% - 12.35px) calc(100% - 1.52px),calc(100% - 20px) 100%,20px 100%,12.35px calc(100% - 1.52px),5.86px calc(100% - 5.86px),1.52px calc(100% - 12.35px),0 calc(100% - 20px),-24px calc(100% - 20px));
  border:1px solid #c1d4f236;
  border-radius:20px;
  background:radial-gradient(ellipse at 50% 64%,#9cb5ce31,transparent 78%),linear-gradient(135deg,#394250b3,#232c3a90);
  box-shadow:inset 0 1px 0 #e3efff0a,0 8px 24px #0003;
  transition:border-color 360ms ease,box-shadow 360ms ease;
}
#skin-panel .vote-skin-avatar::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  border-radius:inherit;
  clip-path:inset(0 round 20px);
  background:radial-gradient(ellipse at 32% 65%,#71d9f59c,transparent 62%),radial-gradient(ellipse at 78% 30%,#aa83ff8c,transparent 65%);
  filter:blur(15px);
  opacity:.4;
  pointer-events:none;
  animation:vote-skin-inner-glow 4.8s ease-in-out infinite;
}
@keyframes vote-skin-inner-glow { 0%,100% { opacity:.3; } 50% { opacity:.85; } }
#skin-panel .skin-render,
#skin-panel .skin-default-character {
  position:absolute;
  z-index:1;
  inset:auto;
  top:0;
  left:-6%;
  width:112%;
  height:112%;
  max-width:none;
  object-fit:contain;
  image-rendering:auto;
  filter:drop-shadow(0 10px 12px #0008);
  transform:scale(1);
  transform-origin:center 60%;
  transition:transform 360ms cubic-bezier(.2,.7,.2,1);
}
#skin-panel .skin-image-slot,
#skin-panel .skin-placeholder { position:absolute; inset:0; padding-bottom:0; }
#skin-panel .skin-loading { z-index:2; border-radius:inherit; }
#skin-panel .skin-orbit { display:none; }
#skin-panel .skin-form { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:8px; margin-top:12px; position:relative; }
#skin-panel .skin-form > label,
#skin-submit-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
#skin-panel .skin-input-wrap > input { min-height:44px; padding-top:9px; padding-bottom:9px; font-size:.875rem; }
#skin-panel .skin-form > .button { width:44px; min-height:44px; padding:0; margin:0; }
#skin-panel .skin-status { min-height:0; margin-top:8px; font-size:.75rem; line-height:1.5; }
#skin-panel[data-state="empty"] > .skin-status,
#skin-panel[data-state="ready"] > .skin-status { display:none; }
#skin-panel .player-votes { margin-top:14px; padding-top:12px; }
#skin-panel .player-votes-heading { margin-bottom:8px; gap:8px; }
#skin-panel .player-votes-heading h3 { font-size:.875rem; }
#skin-panel .vote-totals { gap:8px; margin-bottom:8px; }
#skin-panel .vote-totals > div { display:flex; align-items:center; justify-content:center; gap:7px; padding:7px 8px; }
#skin-panel .vote-totals strong { font-size:1.25rem; }
#skin-panel .vote-totals span { font-size:.6875rem; }
#skin-panel .votes-unverified { display:none; }
#skin-panel .votes-status { margin:7px 0; font-size:.6875rem; line-height:1.5; }
#skin-panel .player-votes[data-state="empty"] .votes-status,
#skin-panel .player-votes[data-state="ready"] .votes-status { display:none; }
#skin-panel .player-vote-list li { grid-template-columns:20px minmax(0,1fr) auto; padding:6px 0; gap:7px; }
#skin-panel .player-vote-list img { width:20px; height:20px; }
#skin-panel .player-vote-list strong { font-size:.6875rem; line-height:1.5; }
#skin-panel .player-vote-state { grid-column:auto; justify-self:end; padding:3px 5px; }
#skin-panel .player-vote-list li:not([data-vote-state="cooldown"]) .player-vote-detail { display:none; }
#skin-panel .player-vote-detail { font-size:.625rem; margin-top:1px; }

@media(min-width:861px) {
  .voting-layout { row-gap:24px; }
  .voting-layout .voting-content { display:contents; }
  .voting-layout .voting-content > .page-heading { grid-column:1 / -1; grid-row:1; margin-bottom:0; }
  .voting-layout #vote-providers { grid-column:1; grid-row:2; align-self:stretch; margin:0; }
  .voting-layout #skin-panel { grid-column:2; grid-row:2; align-self:stretch; }
  .voting-layout .vote-help { grid-column:1 / -1; grid-row:3; margin-top:0; }
}
@media(hover:hover) {
  #skin-panel .skin-stage:hover::after { opacity:.85; transform:scale(1.05); }
  #skin-panel .skin-stage:hover .vote-skin-avatar { border-color:#b9cfff88; box-shadow:inset 0 1px 0 #e3efff12,0 0 30px #9fbaff35; }
  #skin-panel .skin-stage:hover .skin-render,
  #skin-panel .skin-stage:hover .skin-default-character { transform:scale(1.065); }
}
@media(max-width:650px) {
  #skin-panel .skin-stage { width:170px; height:170px; }
}
@media(max-width:380px) {
  #skin-panel .skin-stage { width:155px; height:155px; }
}
@media(prefers-reduced-motion:reduce) {
  #skin-panel .skin-stage::before,
  #skin-panel .skin-stage::after,
  #skin-panel .vote-skin-avatar,
  #skin-panel .vote-skin-avatar::before,
  #skin-panel .skin-render,
  #skin-panel .skin-default-character { animation:none; transition:none; }
  #skin-panel .skin-stage::before { opacity:.3; transform:none; }
  #skin-panel .vote-skin-avatar::before { opacity:.45; }
  #skin-panel .skin-stage:hover::after { transform:none; }
  #skin-panel .skin-stage:hover .skin-render,
  #skin-panel .skin-stage:hover .skin-default-character { transform:scale(1); }
}

/* Keep the keyboard/typing focus exactly inside the existing input border. */
#skin-panel .skin-input-wrap > input:focus {
  outline:none;
  outline-offset:0;
  border-color:var(--gold);
  box-shadow:inset 0 0 0 1px var(--gold);
}