/*
 * Styles for the parody V‑Bucks generator.
 * The look and feel draws inspiration from bright, sky‑blue games UIs with neon accents.
 */

/* Reset and base styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* Colour palette */
  --color-bg: #5ad9ff; /* fallback base background colour */
  --color-accent: #ffd500; /* bright yellow for chevrons/buttons */
  --color-pink: #ff2f8b; /* hot pink highlight */
  --color-dark: #012f53; /* dark blue for text and panels */
  --color-panel: #001d38; /* darker panel for verification */
  --radius: 12px;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", "Arial", sans-serif;
  color: var(--color-dark);
  /* Use our generated sky as the backdrop. Add a gradient fallback for browsers that cannot load images. */
  background: url("../img/sky-bg.png") center/cover no-repeat fixed, linear-gradient(to bottom, #70d3ff 0%, #53c6ff 100%);
  min-height: 100vh;
}

a {
  color: inherit;
}

.site-header {
  text-align: center;
  padding: 1.5rem 1rem 0.5rem;
}
.site-title {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-dark);
}
.subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--color-dark);
  opacity: 0.8;
}

/* Sound toggle button */
.sound-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-dark);
  padding: 0.25rem;
}
.sound-toggle:hover {
  color: var(--color-pink);
}
.sound-toggle .icon-sound-on,
.sound-toggle .icon-sound-on,
.sound-toggle .icon-sound-off {
  display: none;
}
.sound-toggle.sound-on .icon-sound-on {
  display: inline-block;
}
.sound-toggle.sound-on .icon-sound-off {
  display: none;
}
.sound-toggle.sound-off .icon-sound-off {
  display: inline-block;
}
.sound-toggle.sound-off .icon-sound-on {
  display: none;
}

.site-main {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

/* Step sections */
.step-section {
  margin-top: 2rem;
}
.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.input-group {
  margin-bottom: 1rem;
}
.input-label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.text-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-dark);
  border-radius: var(--radius);
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-dark);
}
.text-input:focus {
  outline: 2px solid var(--color-accent);
}

/* Platform chips */
.platforms {
  margin-top: 1rem;
}
.platform-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.platform-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.platform-chip {
  padding: 0.5rem 1rem;
  border: 2px solid var(--color-dark);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-dark);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  user-select: none;
}
.platform-chip:hover {
  background: var(--color-accent);
  color: var(--color-dark);
}
.platform-chip.selected {
  background: var(--color-accent);
  color: var(--color-dark);
}
.platform-chip:focus {
  outline: 2px dashed var(--color-accent);
}

/* Amount selection */
.bundle-header {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.callout {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-dark);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1.25rem;
}
.callout-arrow {
  color: var(--color-pink);
  font-size: 1.5rem;
  line-height: 1;
  transform: translateY(3px);
}

.amount-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
.amount-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--color-dark);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-dark);
  transition: transform 0.15s ease, background 0.15s ease;
  user-select: none;
}
.amount-tile .coin-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 0.25rem;
}
.amount-tile:hover {
  transform: translateY(-3px);
}
.amount-tile.selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-dark);
}
.amount-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 1;
}
.amount-overlay.hidden {
  display: none;
}

/* CTA button */
.cta-section {
  margin-top: 1.5rem;
  text-align: center;
}
.cta-generate {
  padding: 1rem 2.5rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-dark);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease;
  user-select: none;
}
.cta-generate:hover:not(:disabled) {
  transform: translateY(-2px);
}
.cta-generate:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Last Activity section */
.activity-section {
  margin-top: 2rem;
  text-align: center;
}
.activity-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.activity-subtitle {
  font-size: 0.875rem;
  margin-bottom: 1rem;
  color: var(--color-dark);
  opacity: 0.8;
}
.activity-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.activity-item {
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius);
  padding: 0.5rem;
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-dark);
}
.activity-item .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  font-weight: 700;
}
.activity-item .name {
  font-weight: 600;
}
.activity-item .amount {
  font-size: 0.75rem;
  color: var(--color-dark);
  opacity: 0.8;
}

/* Footer */
.site-footer {
  text-align: center;
  padding: 1.5rem 1rem;
  font-size: 0.75rem;
  color: var(--color-dark);
  opacity: 0.7;
}

/* Generator overlay */
.generator-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
}
.generator-overlay.active {
  display: block;
}
.overlay-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  animation: fadeIn 0.3s forwards;
}
.generator-dialog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(90, 217, 255, 0.95);
  /* subtle backdrop blur for nicer effect */
  backdrop-filter: blur(4px);
}
.close-overlay {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--color-dark);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.generator-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  color: var(--color-dark);
  font-weight: 600;
  font-size: 0.875rem;
}
.status-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.status-icon {
  width: 24px;
  height: 24px;
}
.platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-dark);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-dark);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.step-bar {
  display: flex;
  width: 100%;
  overflow: hidden;
}
.step-chev {
  position: relative;
  flex: 1;
  text-align: center;
  background: var(--color-accent);
  color: var(--color-dark);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  user-select: none;
}
.step-chev:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  width: 0;
  height: 0;
  border-top: 1.25rem solid transparent;
  border-bottom: 1.25rem solid transparent;
  border-left: 20px solid var(--color-accent);
  z-index: 1;
}
.step-chev.active {
  background: var(--color-pink);
  color: #ffffff;
}
.step-chev.active:not(:last-child)::after {
  border-left-color: var(--color-pink);
}
.generator-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  text-align: center;
}
.count-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.coin-large {
  width: 72px;
  height: 72px;
}
.count-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-dark);
}
.verify-panel {
  background: var(--color-panel);
  color: #ffffff;
  padding: 1.25rem;
  border-radius: var(--radius);
  width: 90%;
  max-width: 420px;
  margin-top: 1.5rem;
  position: relative;
}
.verify-header {
  background: var(--color-accent);
  color: var(--color-dark);
  font-weight: 700;
  padding: 0.5rem;
  border-radius: var(--radius) var(--radius) 0 0;
  margin: -1.25rem -1.25rem 1rem -1.25rem;
  text-align: center;
}
.verify-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.verify-steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.verify-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.step-number {
  background: var(--color-accent);
  color: var(--color-dark);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.verify-button {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background: var(--color-accent);
  color: var(--color-dark);
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.verify-button:hover {
  background: var(--color-pink);
  color: #ffffff;
}
.verify-footer {
  margin-top: 1rem;
  font-size: 0.75rem;
  opacity: 0.6;
}

/* Animations */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .step-chev {
    font-size: 0.75rem;
    padding: 0.5rem 0.5rem;
  }
  .step-chev:not(:last-child)::after {
    right: -15px;
    border-top-width: 1rem;
    border-bottom-width: 1rem;
    border-left-width: 15px;
  }
  .cta-generate {
    font-size: 1.25rem;
    padding: 0.75rem 2rem;
  }
  .count-number {
    font-size: 2.5rem;
  }
}
/* ===== POLISH START: generation experience ===== */

/* Glass overlay + vignette */
#generatorOverlay { backdrop-filter: blur(10px) saturate(1.1); }
.generator-body { position: relative; isolation: isolate; }
.generator-body::after{
  content:""; position:absolute; inset:-6%; pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(255,255,255,0.08) 0%, transparent 60%),
    radial-gradient(120% 80% at 50% 120%, rgba(0,0,0,0.35) 0%, transparent 60%);
  z-index:-1; filter: blur(4px);
}

/* Status message pill */
.status-message{
  font-weight:700; font-size:0.95rem; margin:12px auto 6px; text-align:center;
  color:#0b1524; background: rgba(255,255,255,0.85);
  border:2px solid rgba(11,21,36,0.3); border-radius: 12px; padding:6px 10px;
  max-width:520px; box-shadow: 0 6px 14px rgba(0,0,0,.2);
}

/* Terminal-like log */
.gen-log{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px; line-height:1.25; background: rgba(0,0,0,.35); color:#e6f1ff;
  border-radius:10px; padding:10px 12px; max-width:520px; margin:8px auto 0;
  box-shadow: inset 0 8px 22px rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08);
  height:120px; overflow:hidden;
}
.gen-log .line{ opacity:.9; white-space:nowrap; overflow:hidden; }
.gen-log .line.new{ animation: type 900ms steps(24,end) forwards; }
@keyframes type { from{ width:0 } to { width:100% } }

/* Progress bar */
.gen-progress{ position:relative; margin:12px auto 4px; width:520px; max-width:92%;
  height:10px; background: rgba(255,255,255,.15); border-radius:999px; overflow:hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
}
.gen-progress .bar{ height:100%; width:0%; background: linear-gradient(90deg,#2dd4ff,#60a5fa,#a78bfa,#facc15); animation: sheen 2s linear infinite; }
@keyframes sheen{ from{ filter:brightness(1) } 50%{ filter:brightness(1.25) } to{ filter:brightness(1) } }
.gen-marks{ display:flex; justify-content:space-between; font-size:11px; opacity:.85; color:#fff; max-width:520px; margin:4px auto 0; }

/* Odometer kick */
#countNumber{ font-variant-numeric: tabular-nums; letter-spacing:.5px; text-shadow:0 2px 10px rgba(0,0,0,.35); transform-origin:center; }
.flip-kick{ animation: flipkick .35s ease; }
@keyframes flipkick{ 0%{ transform: rotateX(0) scale(1) } 50%{ transform: rotateX(22deg) scale(1.05) } 100%{ transform: rotateX(0) scale(1) } }

/* Shake & confetti */
.shake{ animation: shake .35s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake{ 10%,90%{ transform: translateX(-1px) } 20%,80%{ transform: translateX(2px) } 30%,50%,70%{ transform: translateX(-3px) } 40%,60%{ transform: translateX(3px) } }
.confetti{ position: fixed; inset:0; pointer-events:none; overflow:hidden; }
.confetti i{ position:absolute; width:6px; height:10px; opacity:.95; transform: translateY(-20px) rotate(0deg); animation: fall 900ms linear forwards; }
@keyframes fall{ to { transform: translateY(110vh) rotate(360deg); opacity: 0.95; } }

/* Aura behind number */
.count-aura{ position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(50% 40% at 50% 50%, rgba(250,204,21,.45), transparent 60%),
              radial-gradient(50% 25% at 50% 55%, rgba(96,165,250,.35), transparent 65%);
  filter: blur(16px); border-radius: 24px; opacity:.85;
}

/* ===== POLISH END ===== */