/* gameweb shared theme — one set of vars every game and the hub read from. */
:root {
  --gw-bg-start: #ffe5f0;
  --gw-bg-mid:   #fff4e6;
  --gw-bg-end:   #e6f7ff;
  --gw-panel:    #ffffff;
  --gw-ink:      #2b2d42;
  --gw-primary:  #ff6b9d;
  --gw-primary-dark: #d94676;
  --gw-accent:   #4ecdc4;
  --gw-sun:      #ffd93d;
  --gw-grass:    #6bcb77;
  --gw-purple:   #b088f9;
  --gw-wrong:    #ff6b6b;
  --gw-shadow:   0 6px 0 var(--gw-ink);
  --gw-radius-lg: 22px;
  --gw-radius-md: 16px;
  --gw-font:     'Comic Sans MS', 'Marker Felt', system-ui, sans-serif;
}

html, body {
  font-family: var(--gw-font);
  color: var(--gw-ink);
  background: linear-gradient(135deg, var(--gw-bg-start) 0%, var(--gw-bg-mid) 50%, var(--gw-bg-end) 100%);
  -webkit-tap-highlight-color: transparent;
}

/* Shared coin pill (hub + games) */
.gw-coins {
  background: var(--gw-sun);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 22px;
  font-weight: bold;
  border: 3px solid #e8b800;
  box-shadow: 0 3px 0 #d4a600;
  white-space: nowrap;
  display: inline-block;
}

/* Shared celebration overlay */
.gw-celebrate {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 9999;
}
.gw-celebrate .msg {
  font-size: 64px;
  font-weight: bold;
  color: var(--gw-primary-dark);
  text-shadow: 3px 3px 0 var(--gw-sun);
  animation: gw-pop 0.9s ease-out forwards;
}
@keyframes gw-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  30%  { transform: scale(1.25); opacity: 1; }
  70%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* Star burst */
.gw-star {
  position: fixed;
  font-size: 28px;
  pointer-events: none;
  z-index: 9998;
  animation: gw-star 1s ease-out forwards;
}
@keyframes gw-star {
  0%   { transform: translate(0,0) scale(0.5); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.4); opacity: 0; }
}

.gw-btn {
  border: 4px solid var(--gw-ink);
  border-radius: var(--gw-radius-lg);
  padding: 20px 24px;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: var(--gw-shadow);
  background: var(--gw-panel);
  font-family: inherit;
  color: var(--gw-ink);
}
.gw-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--gw-ink); }
.gw-btn.primary { background: var(--gw-accent); }
.gw-btn.warm    { background: var(--gw-primary); color: white; }
.gw-btn.small   { padding: 10px 16px; font-size: 16px; border-radius: var(--gw-radius-md); box-shadow: 0 4px 0 var(--gw-ink); }