:root { --neon-yellow: #ffff00; }
*, *::before, *::after { box-sizing: border-box; 
--green: #00ff00;
  --white: #ffffff;
  --pink: #ff33cc;
  --silver: #c0c0c0;
  --neon-yellow: #ffff00;
  --neon-blue: #00e5ff;
}

body {
  font-family: 'Orbitron', sans-serif;
  margin: 0;
  background: #111;
  color: white;
  display: flex; flex-direction: column; align-items: center;
  min-height: 100vh; overflow-x: hidden;
  user-select: none; -webkit-user-select: none;
}
.game-widget, .vote-button {
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

@keyframes swipeIn {
  from { left: -100%; }
  to   { left: 50%; transform: translateX(-50%); }
}
@keyframes rotateCCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes rotateCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes orbShine {
  0%   { transform: translate(-100%, -100%) rotate(45deg) scale(0.6); }
  50%  { transform: translate(100%, 100%)  rotate(45deg) scale(1.2); }
  100% { transform: translate(-100%, -100%) rotate(45deg) scale(0.6); }
}

header.widgetwheel-header {
  width:100%; padding:2rem; text-align:center;
  background:rgba(17,17,17,0.85);
  border:6px double var(--neon-yellow);
  box-shadow:0 0 20px var(--neon-yellow);
  position:relative; overflow:hidden;
  animation:borderCycle 8s linear infinite, strobeHeader 2s infinite;
}
.widgetwheel-title {
  margin:0;
  font-size:clamp(1.5rem,6vw,2.8rem);
  color:var(--neon-yellow);
  text-shadow:0 0 10px var(--neon-yellow);
  animation:colorCycle 8s linear infinite;
}
.widgetwheel-subtext {
  position:absolute; top:60%; left:-100%;
  font-size:clamp(1rem,4vw,1.6rem);
  white-space:nowrap;
  animation:swipeIn 2s forwards 1.5s, colorCycle 8s linear infinite;
}

.game-widget {
  margin:2rem auto;
  width:100%; max-width:600px;
  aspect-ratio:1/1;
  position:relative;
  border:4px dashed var(--neon-yellow);
  background:rgba(255,255,255,0.05);
  overflow:hidden;
}
.game-container {
  width:100%; height:100%; position:relative;
}

/* magic bloom pulse */
.pulse {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center,
    var(--pulse-color) 30%, transparent 70%);
  filter: blur(15px);
  animation: magicPulse 2.5s ease-in-out infinite;
  z-index: 0;
}
@keyframes magicPulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.6;
  }
}

.octagon {
  position:absolute; inset:0;
  clip-path:polygon(
    30% 0%, 70% 0%,
    100% 30%, 100% 70%,
    70% 100%, 30% 100%,
    0% 70%, 0% 30%
  );
  transform-origin:50% 50%;
  animation:rotateCCW 30s linear infinite;
  z-index:1;
}
.slice { position:absolute; inset:0; clip-path:inherit; }
.fill {
  position:absolute; inset:0;
  transform-origin:50% 50%;
  transform:scale(0);
  transition:transform 0.3s ease;
}
.slice:nth-child(1) .fill { background:#e74c3c; clip-path:polygon(50% 50%,30% 0%,70% 0%); }
.slice:nth-child(2) .fill { background:#f39c12; clip-path:polygon(50% 50%,70% 0%,100% 30%); }
.slice:nth-child(3) .fill { background:#f1c40f; clip-path:polygon(50% 50%,100% 30%,100% 70%); }
.slice:nth-child(4) .fill { background:#2ecc71; clip-path:polygon(50% 50%,100% 70%,70% 100%); }
.slice:nth-child(5) .fill { background:#1abc9c; clip-path:polygon(50% 50%,70% 100%,30% 100%); }
.slice:nth-child(6) .fill { background:#3498db; clip-path:polygon(50% 50%,30% 100%,0% 70%); }
.slice:nth-child(7) .fill { background:#9b59b6; clip-path:polygon(50% 50%,0% 70%,0% 30%); }
.slice:nth-child(8) .fill { background:#34495e; clip-path:polygon(50% 50%,0% 30%,30% 0%); }

.button-ring {
  position:absolute; inset:0;
  transform-origin:50% 50%;
  animation:rotateCW 30s linear infinite;
  z-index:2;
}

/* magic-orb buttons */
.vote-button {
  position:absolute;
  width:12%; aspect-ratio:1/1;
  border:none; border-radius:50%;
  overflow:hidden;
  background: radial-gradient(circle at 35% 35%,
    #fff 0%, var(--btn-color) 60%, #000 100%);
  box-shadow: 0 0 8px var(--btn-color), 0 0 16px var(--btn-color);
}
.vote-button::after {
  content:"";
  position:absolute; top:-150%; left:-150%;
  width:400%; height:400%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0.7) 0%, transparent 60%);
  transform: rotate(45deg);
  animation:orbShine 3s linear infinite;
}
.vote-button.red    { --btn-color: #e74c3c; }
.vote-button.orange { --btn-color: #f39c12; }
.vote-button.yellow { --btn-color: #f1c40f; }
.vote-button.green  { --btn-color: #2ecc71; }
.vote-button.teal   { --btn-color: #1abc9c; }
.vote-button.blue   { --btn-color: #3498db; }
.vote-button.purple { --btn-color: #9b59b6; }
.vote-button.gray   { --btn-color: #34495e; }

.counters {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:10px; width:100%; max-width:600px;
  margin:2rem auto;
}
.counter {
  padding:10px; text-align:center;
  border-radius:8px; font-weight:bold;
  color:white; box-shadow:0 0 10px rgba(0,0,0,0.5);
}
.counter.red    { background:#e74c3c; }
.counter.orange { background:#f39c12; }
.counter.yellow { background:#f1c40f; }
.counter.green  { background:#2ecc71; }
.counter.teal   { background:#1abc9c; }
.counter.blue   { background:#3498db; }
.counter.purple { background:#9b59b6; }
.counter.gray   { background:#34495e; }

.game-description {
  width:min(90%,800px);
  margin:2rem auto;
  padding:clamp(1rem,2vw,2rem);
  text-align:center;
  border:6px double var(--neon-yellow);
  background:rgba(17,17,17,0.85);
  box-shadow:0 0 20px var(--neon-yellow);
  text-shadow:0 0 10px var(--neon-yellow);
  animation:borderCycle 8s linear infinite, strobeHeader 2s infinite, colorCycle 8s linear infinite;
  font-size:clamp(1rem,2vw,1.2rem);
}
.game-description h2 { margin-bottom:1rem; }
.game-description a { color:var(--neon-yellow); text-decoration:underline; }

.home-button-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 2rem 0 3rem;
}

.home-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 1.2rem;
  padding: 1rem 2rem;
  margin: 2rem auto 0;
  font-weight: bold;
  border-radius: 10px;
  border: 3px solid var(--neon-yellow);
  background: var(--neon-blue);
  color: #0e1a2b;
  box-shadow: 0 0 20px var(--neon-yellow);
  text-decoration: none;
  transition: all 0.3s ease;
}
.home-button:hover {
  background: var(--neon-yellow);
  color: #000;
  box-shadow: 0 0 35px var(--neon-blue);
}
.home-button span.emoji {
  font-size: 2rem;
  line-height: 1;
}