@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Nunito:wght@700;800;900&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --cream:  #FEF0E2;
  --pink:   #FF85A1;
  --pink2:  #FFB3C8;
  --pink3:  #FFD6E4;
  --plum:   #2D1830;
  --plum2:  #5A3060;
  --skin:   #F2C49B;
  --skin2:  #D4906A;
  --gold:   #FFB020;
  --text:   #2D1830;
  --soft:   #A07080;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  color: var(--text);

  /* Warm cream with subtle repeating scissors */
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ctext x='40' y='52' font-size='28' text-anchor='middle' fill='%23F2B4C8' opacity='0.3'%3E%E2%9C%82%3C/text%3E%3C/svg%3E");
  background-size: 80px 80px;

  /* Shampoo bottle cursor */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect x='6' y='5' width='8' height='2.5' rx='1.2' fill='%23FF85A1'/%3E%3Crect x='12' y='4' width='2.5' height='8' rx='1' fill='%23E83070'/%3E%3Crect x='11' y='9' width='9' height='4' rx='2' fill='%23FF85A1'/%3E%3Crect x='9' y='13' width='13' height='15' rx='3.5' fill='%23FF85A1'/%3E%3Crect x='10' y='16' width='11' height='8' rx='2' fill='white' opacity='0.45'/%3E%3Crect x='18' y='14' width='2' height='11' rx='1' fill='white' opacity='0.35'/%3E%3Crect x='11' y='18' width='5' height='1.2' rx='0.6' fill='%23FF85A1' opacity='0.7'/%3E%3Crect x='11' y='21' width='7' height='1.2' rx='0.6' fill='%23FF85A1' opacity='0.5'/%3E%3Cellipse cx='5.5' cy='7' rx='1.8' ry='2.2' fill='%23FFB3D1'/%3E%3C/svg%3E") 5 3, crosshair;
}

/* ── Floating deco ─────────────────────────────────────────────────────── */
.bg-deco {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.deco {
  position: absolute;
  font-size: 30px;
  opacity: 0.25;
  animation: floatDeco ease-in-out infinite;
}

.d1 { top: 8%;  left: 3%;   animation-duration: 18s; animation-delay:  0s;  }
.d2 { top: 72%; left: 5%;   animation-duration: 24s; animation-delay: -6s;  }
.d3 { top: 30%; right: 4%;  animation-duration: 20s; animation-delay: -11s; }
.d4 { top: 80%; right: 6%;  animation-duration: 16s; animation-delay: -3s;  }
.d5 { top: 50%; left: 1%;   animation-duration: 22s; animation-delay: -8s;  }
.d6 { top: 18%; right: 12%; animation-duration: 26s; animation-delay: -14s; }
.d7 { top: 60%; left: 12%;  animation-duration: 19s; animation-delay: -2s;  }

@keyframes floatDeco {
  0%   { transform: translateY(0px)   rotate(0deg);   }
  30%  { transform: translateY(-14px) rotate(12deg);  }
  70%  { transform: translateY(8px)   rotate(-8deg);  }
  100% { transform: translateY(0px)   rotate(0deg);   }
}

/* ── App shell ─────────────────────────────────────────────────────────── */
#app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  gap: 12px;
}

/* ── Header ────────────────────────────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.logo {
  font-family: 'Pacifico', cursive;
  font-size: 30px;
  color: var(--plum);
  letter-spacing: 1px;
  text-shadow: 3px 3px 0 var(--pink3);
}

.logo-hair {
  color: var(--pink);
  text-shadow: 3px 3px 0 #FFD6E4;
}

#player-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  background: white;
  color: var(--soft);
  padding: 7px 16px;
  border-radius: 999px;
  border: 2.5px solid var(--pink2);
  box-shadow: 3px 3px 0 var(--pink2);
}

#player-tag .shade-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1.5px currentColor;
  flex-shrink: 0;
}

/* ── Main ──────────────────────────────────────────────────────────────── */
main {
  display: flex;
  gap: 18px;
  flex: 1;
  min-height: 0;
  align-items: flex-start;
}

/* ── Canvas wrap ───────────────────────────────────────────────────────── */
#canvas-wrap {
  position: relative;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 4px solid var(--skin2);
  box-shadow:
    6px 8px 0 var(--skin2),
    0 0 0 7px white,
    0 0 0 10px var(--pink2),
    12px 14px 0 rgba(0,0,0,0.12);
}

#canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ── Win overlay ───────────────────────────────────────────────────────── */
#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(254, 240, 226, 0.88);
  backdrop-filter: blur(2px);
  z-index: 10;
  animation: fadeIn 0.35s ease;
  border-radius: 14px;
}

#overlay.hidden { display: none; }

#overlay-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 40px;
  background: white;
  border-radius: 24px;
  border: 3px solid var(--pink2);
  box-shadow: 6px 6px 0 var(--pink2);
}

#win-scissors {
  font-size: 48px;
  animation: spinScissors 0.5s ease infinite alternate;
}

@keyframes spinScissors {
  from { transform: rotate(-15deg) scale(1);   }
  to   { transform: rotate(15deg)  scale(1.1); }
}

#win-title {
  font-family: 'Pacifico', cursive;
  font-size: 32px;
  color: var(--plum);
  text-shadow: 3px 3px 0 var(--pink3);
  animation: blink 0.9s step-end infinite;
}

@keyframes blink { 50% { opacity: 0.3; } }

#win-name {
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#win-cells {
  font-size: 12px;
  color: var(--soft);
  font-weight: 700;
}

#win-countdown {
  font-size: 11px;
  color: var(--pink);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1);    }
}

/* ── Scoreboard ────────────────────────────────────────────────────────── */
#scoreboard {
  width: 170px;
  flex-shrink: 0;
  background: white;
  border-radius: 18px;
  border: 2.5px solid var(--pink2);
  box-shadow: 5px 5px 0 var(--pink2);
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px dashed var(--pink3);
  padding-bottom: 10px;
}

.sb-title {
  font-family: 'Pacifico', cursive;
  font-size: 16px;
  color: var(--plum);
}

.sb-icon { font-size: 16px; }

#player-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#player-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 7px;
  border-radius: 10px;
  transition: background 0.2s;
}

#player-list li.you {
  background: var(--cream);
  border: 1.5px solid var(--pink3);
}

#player-list li .swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid white;
}

#player-list li .sb-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}

#player-list li .sb-bar-wrap {
  width: 28px;
  height: 6px;
  background: var(--pink3);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

#player-list li .sb-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

#player-list li .sb-pct {
  font-size: 9px;
  color: var(--soft);
  font-weight: 700;
  width: 22px;
  text-align: right;
  flex-shrink: 0;
}

#spectator-notice {
  font-size: 11px;
  font-weight: 800;
  color: var(--soft);
  text-align: center;
  padding: 10px;
  background: var(--cream);
  border-radius: 10px;
  border: 1.5px dashed var(--pink2);
  line-height: 1.8;
  letter-spacing: 0.5px;
}

/* ── Footer hint ───────────────────────────────────────────────────────── */
#hint {
  font-size: 10px;
  font-weight: 700;
  color: var(--pink2);
  text-align: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Death banner ──────────────────────────────────────────────────────── */
#death-banner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-family: 'Pacifico', cursive;
  font-size: 18px;
  border-radius: 14px;
  animation: fadeIn 0.2s ease;
  z-index: 5;
}

/* ── Mobile D-pad ──────────────────────────────────────────────────────── */
#dpad {
  display: none;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(2, 48px);
  gap: 6px;
  justify-content: center;
  flex-shrink: 0;
}

@media (pointer: coarse) {
  #dpad { display: grid; }
}

.dpad-btn {
  background: white;
  border: 2.5px solid var(--pink2);
  border-radius: 12px;
  font-size: 18px;
  color: var(--plum);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0 var(--pink2);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.dpad-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pink2);
}

.hidden { display: none !important; }