:root{font-family:Impact,'Arial Black',system-ui,sans-serif;color:#f7faff;background:#09070f}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 15% 10%,#51136b77,transparent 45%),radial-gradient(ellipse at 85% 75%,#007dbe55,transparent 50%),repeating-linear-gradient(135deg,transparent 0 24px,#ffffff06 25px 26px),#09070f}main{max-width:750px;margin:auto;text-align:center;padding:26px 14px}.eyebrow{letter-spacing:6px;color:#39dcff;font-size:13px}h1{font-size:clamp(42px,9vw,88px);margin:8px 0;text-shadow:4px 4px #7022a9;transform:skew(-4deg)}h1 span{color:#35ddff}#title{font-family:system-ui,sans-serif;color:#e2d5ed}.stage{position:relative;width:min(90vw,560px);aspect-ratio:1;margin:26px auto}canvas{width:100%;height:100%;filter:drop-shadow(0 0 24px #692bff99)}.pointer{position:absolute;z-index:4;left:calc(50% - 16px);top:-9px;border-left:16px solid transparent;border-right:16px solid transparent;border-top:38px solid #fff;filter:drop-shadow(0 0 8px #30dbff)}.center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16%;aspect-ratio:1;border-radius:50%;background:#090914;border:4px solid #3de6ff;display:grid;place-items:center;font-size:clamp(18px,5vw,34px);box-shadow:0 0 20px #3de6ff}#result{font-size:26px;color:#40e4ff;min-height:32px}button{background:#741cbd;color:white;border:2px solid #45e2ff;padding:14px 25px;font:inherit;cursor:pointer}small{display:block;font:12px system-ui,sans-serif;color:#aaa;margin:22px auto;max-width:440px}

/* PepPlug numbered spot grid */
.spot-panel {
  margin: 22px auto;
  padding: 20px;
  max-width: 760px;
  background: linear-gradient(145deg, #160b29, #080b17);
  border: 2px solid #7c32ce;
  border-radius: 16px;
  box-shadow: 0 0 22px #7c32ce33;
}

.spot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.spot-header h2 {
  margin: 0;
  color: #54eaff;
  font-size: 1.15rem;
}

#spot-count, #spot-summary, #spot-description {
  color: #e4dcf4;
  font-size: .9rem;
}

.spot-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}

.spot {
  min-width: 0;
  padding: 11px 3px;
  border-radius: 8px;
  border: 1px solid #4ee8ff;
  background: #112b43;
  color: #fff;
  font-weight: 800;
  text-align: center;
}

.spot.occupied {
  background: #38233e;
  color: #a7a0ae;
  border-color: #695772;
  opacity: .75;
}

.spot.draft {
  cursor: default;
}

@media (min-width: 650px) {
  .spot-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}

/* PepPlug responsive numbered spot grid */
#spot-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100%;
  margin: 18px 0;
}

#spot-grid .spot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 42px;
  padding: 8px 2px;
  box-sizing: border-box;
}

@media (min-width: 650px) {
  #spot-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  }
}