/* ========= DressUp (clean) ========= */

/* ========= DressUp (clean) ========= */

/* Viewport */
html, body {
  margin: 0;
  padding: 0;
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
}

/* Theme */
:root {
  --panel-bg: rgba(18, 20, 26, 0.86);
  --panel-br: 18px;
  --ink: #e9eaec;
  --ink-dim: #b9bec7;
  --accent: #2b66ff;
}

.dressup-body, .dressup-body * { box-sizing: border-box; }
.dressup-body {
  background: #0c0e12;
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* 9:16 centered app container (match Suitcase behavior) */
.app-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 9 / 16;
  width: min(100vw, calc(100vh * 9 / 16), 1080px);
  height: min(100vh, calc(100vw * 16 / 9), 1920px);
  background: #000;
  overflow: hidden;
}

/* Background portrait image fills container */
.hero {
  position: absolute;
  inset: 0;
  background: #0a0c10 center/cover no-repeat;
  z-index: 1;
}

/* Top banner (inside the container) */
.banner {
  position: absolute;
  left: 3%;
  right: 3%;
  top: 3%;
  z-index: 4;
  background: rgba(235, 238, 244, 0.9);
  color: #111;
  border-radius: 14px;
  padding: 14px 18px;
  font-weight: 600;
  letter-spacing: 0.1px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

/* Right overlay panel */

.panel-card {
  background: var(--panel-bg);
  border-radius: var(--panel-br);
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}


.panel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(14,26,58,0.95), rgba(10,18,40,0.9));
  border-radius: 12px;
  margin-bottom: 12px;
  width: 100%;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.02);
}

.panel-plus {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: #0e1a3a;
  border-radius: 8px;
  color: #bcd0ff;
  font-size: 26px;
  font-weight: 700;
  border: none; /* removed border to keep only the plus glyph */
}

.panel-title {
  font-size: 13px;
  line-height: 1.05;
  color: #d7deff;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
}

.panel-instruction {
  font-size: 13px;
  color: rgba(220, 225, 240, 0.9);
  line-height: 1.2;
  padding: 10px 6px;
  text-align: center;
  max-width: 220px;
  margin-inline: auto;
}

/* Garment preview */
.thumb-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #0b0d12;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Empty placeholder state: faint dashed border + camera icon and hint text */
.thumb-wrap.empty {
 
  position: relative;
}

/*  border-style: dashed;
  border-color: rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); */

/* small camera SVG as a faint decorative mark */
.thumb-wrap.empty::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' width='96' height='96' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><g id='Layer_5'><path d='M245.12,67.9c-.04-.17-.27-.17-.35-.31-.81-1.51-1.5-1.37-2.89-1.9-11.3-4.32-22.99-7.31-34.3-11.63-1.91-.18-2.54,3.04-3.54,4.64-4.73,7.61-14.98,7.56-19.85.13-.93-1.42-1.69-4.79-3.26-4.78-11.48,4.13-23.2,7.43-34.66,11.63-3.04,1.11-3.35.97-2.65,4.93,1.36,7.66,3.1,15.97,4.9,23.39.36,1.47.42,2.66,1.95,2.74l11.74-1.67c.21-.04.56.1.62.34v54.47c0,.26.94,1.58,1.34,1.42h59.62c.48.29,1.52-1.09,1.52-1.42v-54.58c.34-.1.59-.22.96-.2,3.52.16,7.99,1.77,11.4,1.64,1.29-.05,1.57-.48,1.95-1.87,2.2-8.03,3.17-17.49,5.12-25.73.1-.42.57-.3.37-1.25ZM240.75,73.44c-.72,3.8-1.71,7.74-2.5,11.32-.58,2.62-.93,5.33-1.61,7.92l-13.19-1.65c-.47.06-1.37,1.28-1.37,1.78v54.47l-.27.33h-55.46l-.27-.33v-54.47c-.1-.74-.71-1.7-1.37-1.78l-13.19,1.64-4.63-23.21,33.15-11.21c1.55,2.78,3.23,5.47,5.67,7.19,7.83,5.51,17.9,2.48,22.35-7l.23-.06,32.87,10.98c.45.41-.27,3.31-.42,4.07Z'/></g><g id='Layer_4'><path d='M141.39,237.78c-.23-6.06-1.24-36.83-1.66-42.9l-3.88-56.69c-.21-1.71-.87-2.55-2.69-2.57h-53c-.59.08-1.3.15-1.76.56-1.06.95-.83,3.94-.94,5.32-1.96,24.68-3.23,73.92-4.83,98.62.33,1.41,1.03,1.78,2.4,1.88,6.3.47,13.16-.36,19.52,0,1.02-.08,1.48-.29,2.06-1.12l10.11-46.06,10.67,46.06c.58.84,1.04,1.04,2.06,1.12,6.34-.33,13.09.42,19.38,0,.36-.02,1.44-.15,1.68-.33.2-.14.79-1.15.84-1.44.12-.64.06-1.77.03-2.46ZM120.29,237.02l-11.78-48.28c-.99-1.55-2.59-1.55-3.58,0l-11.22,48.28h-16.95l2.65-66.59c2.27-3.07,4.67-6.05,7.03-9.02,1.28-1.61,3.41-3.72,4.43-5.4.55-.91.7-1.75.26-2.75-.37-.85-.73-.78-1.4-1.06-.17-.07-.03-.34-.59-.28l-.89.5-8.17,10.02,1.52-21.99h23.11v27.86c0,.19.78,1.35.98,1.51.38.3,1.57.32,1.98.06.26-.17,1.05-1.26,1.05-1.58v-27.86h23.11l1.52,21.85c-2.82-3.08-5.21-6.52-7.97-9.66-1.18-.34-2.13-.36-2.71.86-.79,1.66-.06,2.65.93,3.96,3.34,4.41,7.25,8.44,10.38,13l3.25,66.55h-16.95Z'/></g><g id='Layer_3'><path d='M231.05,206.3c-.7-4.68-3.17-8.43-7.59-10.27-1.09-.45-2.16-.71-3.28-1.09-5.99-2.03-14.28-7.76-18.88-12.18-2.64-2.54-4.35-6.1-8.73-5.27-2.22.42-5.19,2.88-6.19,4.92-.39.78-.51,1.65-.7,2.48-.39-.03-.79.03-1.18,0-2.87-.24-2.81-2.25-4.46-3.97-4.21-4.36-10.24-1.66-10.77,4.12v32.5h61.81c-.19-3.75.53-7.5-.03-11.24ZM218.43,198.62c1.17.43,2.58.6,3.69,1.12.34.16,1.07.61,1.44.84,2.38,1.46,3.74,4.38,3.84,7.13h-14.58c-.04-1.94.38-3.96,1.35-5.65.94-1.64,2.41-2.92,4.26-3.44ZM191.55,182.32c1.29-.93,2.6-1.38,3.91-.17,1.61,1.49,2.91,3.12,4.63,4.65,3.51,3.12,7.93,6.5,12.01,8.79.87.49,1.8.88,2.7,1.3.01.11.02.2-.04.3-.08.13-1.13.82-1.39,1.09-.57.6-1.1,1.44-1.53,2.14-.06.03-.84-.35-.97-.43-6.83-3.84-14.59-8.02-20.5-13.19-.32-.28-.8-.4-.86-.87-.21-1.55.88-2.76,2.05-3.61ZM173.04,185.14c.02-.17.33-.98.42-1.16.8-1.57,2.86-1.39,3.95-.23.48.52.81,1.34,1.19,1.89,2.26,3.27,5.59,3.71,9.32,3.08.37.33.79.6,1.18.91,5.21,4.03,10.59,7.52,16.31,10.77,1.16.66,2.35,1.19,3.51,1.85.57.33,1.08.72,1.68,1.01-.39,1.45-.64,2.96-.65,4.47h-22.22c-.03-.34-.13-.67-.25-.99-1.78-5.12-6.46-8.55-11.81-9.13-.87-.09-1.76-.11-2.63-.1v-12.35ZM173.04,200.57c1.51-.06,2.93,0,4.39.43,2.95.85,5.72,2.92,7.01,5.79.13.28.29.62.31.93h-11.71v-7.14ZM227.31,213.47h-54.27v-2.68h54.47l-.2,2.68Z'/></g><g id='Layer_2'><path d='M126.66,88.78c-4.75.22-9.79-.3-14.51,0-2.27.15-4,1.18-5.14,3.16-.13.22-.19.51-.3.75-1.06-.16-2.06-.22-3.12.02-.36-.69-.8-1.59-1.34-2.15-.39-.41-1.55-1.16-2.04-1.38-.5-.23-1.63-.37-2.2-.4-4.7-.28-9.69.22-14.42,0-4.72.42-6.79,4.43-6.33,8.88.25,2.42.68,5.17,1.1,7.57.74,4.26,3.08,7.82,7.69,8.09,2.15.13,5.15.13,7.3,0,3.87-.23,6.76-3.05,7.92-6.68.84-2.62,1.44-5.4,2.28-8.03.86-.76,2.15-.74,3.08-.09l2.35,8.21c1.18,3.52,4.16,6.36,7.92,6.59,2.14.13,5.16.13,7.3,0,3.73-.23,6.74-3.15,7.5-6.82.55-2.63,1.02-6.23,1.29-8.93.44-4.39-1.67-8.4-6.33-8.79ZM99.3,96.01c-1.06,2.93-1.58,6.31-2.67,9.19-.32.84-.83,1.45-1.56,1.96-.61.42-1.13.62-1.91.69-1.83.15-5.1.15-6.94,0-1.63-.13-2.67-1.15-3.04-2.7-.67-2.73-.67-5.89-1.29-8.66.03-1.02.35-2.03,1.5-2.14h14.88c1.05.1,1.13.72,1.02,1.67ZM127.13,104.77c-.35,1.74-1.26,2.94-3.12,3.08-1.56.12-6.43.19-7.79-.16-.28-.07-.76-.26-.99-.42-.94-.65-1.52-1.67-1.88-2.72-.77-2.23-1.86-5.72-2.32-7.99-.21-1.04-.42-2.08.93-2.21l15.2.05c.9.28,1.13,1.15,1.19,2-.57,2.75-.66,5.62-1.21,8.37Z'/></g></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.18;
  pointer-events: none;
}
.thumb-wrap.empty::before {
  content: '';
  position: absolute;
  bottom: 8px; 
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.3px;
  pointer-events: none;
}

.panel-caption {
  text-align: center;
  margin: 10px 0 8px;
  color: var(--ink-dim);
  font-size: 12px;
  letter-spacing: 0.8px;
}

/* Recent slots */
.slot-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.slot {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  position: relative;
}
.slot[data-empty="true"]::after {
  content: "+";
  color: rgba(255,255,255,0.35);
  font-weight: 700;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* Actions */
.panel-actions {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}
.btn {
  height: 42px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(180deg, #2b66ff, #1a3db4);
  border-color: rgba(43,102,255,0.6);
}
.btn.ghost:hover { background: rgba(255,255,255,0.12); }

.status {
  min-height: 18px;
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 6px;
}

/* Watermark */
.watermark {
  position: absolute;
  left: 2%;
  bottom: 2%;
  z-index: 3;
  font-size: 11px;
  line-height: 0.8; /* tighter lines */
  color: rgba(255,255,255,0.75);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.panel {

  position: absolute;
  right: 2px;
  top: 5vh;
  z-index: 4;
  width: auto;
  max-width: 40%;
}

/* Mobile: dock the panel at bottom center */
@media (max-width: 860px) {
  .panel {
    width:auto;
  }
  .banner { left: 4%; right: 4%; }
}

/* ---------- Thin secondary action row ---------- */
.panel-subactions {
  display: grid;
  /* grid-template-columns: repeat(2, 1fr); */
  gap: 8px;
  margin-top: 6px;
  
}

.btn.thin {

  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: var(--ink);
  font-weight: 300;
  letter-spacing: 0.2px;
  font-size: 8px;
  cursor: pointer;
}

.btn.thin:hover {
  background: rgba(255,255,255,0.12);
}


/* Player badge in top-left */
.player-info-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;

  background: rgba(0,0,0,0.6);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 8px;
  border-radius: 6px;
  display: flex;
  gap: 6px;
  align-items: center;
  pointer-events: none; /* just display for now */
}
.player-info-badge #playerNameLabel {
  font-weight: 600;
  letter-spacing: 0.03em;
}
.player-info-badge #playerIdLabel {
  opacity: 0.7;
  font-weight: 400;
}


/* ====== Credit HUD (bottom-right) ====== */

.credit-hud {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 20;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;

  pointer-events: none; /* UI-only for now */
}

/* Personal booster pill ("+3 personal") */
.personal-pill {
  display: none; /* hidden when 0 */
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(40, 186, 120, 0.18);
  border: 1px solid rgba(40, 186, 120, 0.65);
  color: #bfffe0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Community block for text-based bar */
.community-block {
  padding: 0;
  margin: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  pointer-events: none;
}

.community-line {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 7px;
  color: #f2f2f2;
}

/* "COMMUNITY" label */
.community-label {
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* "[████░░░░░░] 14 left" */
.community-bar-text {
  white-space: pre;
  opacity: 0.9;
}



/* text-based personal credit styling override */
#personalCreditPill {
  align-self: flex-end;
  text-align: right;
  min-width: 60px;
}


/* ====== Skin selector (under player badge) ====== */
.skin-selector {
  position: absolute;
  top: 56px;             /* just under the player badge */
  left: 14px;
  z-index: 12;

  display: flex;
  align-items: center;
  gap: 4px;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 9px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 6px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}

.skin-label {
  opacity: 0.8;
}

.skin-selector select {
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: inherit;
  font-size: inherit;
  padding: 0 2px;
  outline: none;
  cursor: pointer;
}

.skin-selector select option {
  color: #000000; /* native dropdown background is light */
}



/* ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji" */