/* ===== CSS Reset & Base ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", sans-serif;
  background: #0a0a1a;
  color: #ffffff;
  user-select: none;
  -webkit-app-region: drag;
}

:root {
  --sc-select-bg: linear-gradient(180deg, rgba(28, 22, 58, 0.95) 0%, rgba(16, 16, 38, 0.96) 100%);
  --sc-select-border: rgba(139, 92, 246, 0.35);
  --sc-select-border-strong: rgba(6, 182, 212, 0.8);
  --sc-select-shadow: 0 10px 28px rgba(8, 8, 24, 0.35);
  --sc-select-text: rgba(255, 255, 255, 0.96);
  --sc-select-muted: rgba(255, 255, 255, 0.7);
  --sc-select-option-bg: #17172f;
  --sc-select-option-hover: #232347;
}

/* Allow interaction on buttons and interactive elements */
button,
input,
select,
textarea,
.country-card,
.country-container,
.countries-grid,
.control-btn,
.back-btn {
  -webkit-app-region: no-drag;
}

/* Main content containers must NOT be drag regions: on Windows a drag
   region behaves like the native title bar and swallows mouse wheel and
   scrollbar input, which broke scrolling whenever the app was not in
   fullscreen (fullscreen disables drag regions, hiding the bug).
   The window stays movable by grabbing page headers or empty edges. */
.container,
.settings-container,
.app-settings-container,
.prep-container,
.country-container,
.cq-container,
.cv-container,
.page-container,
.final-container,
.manual-page,
.picker-container,
.records-container,
.sf-container,
.results-container {
  -webkit-app-region: no-drag;
}

/* Page headers act as the window's grab handle (their buttons, inputs and
   selects stay interactive via the no-drag rules above). */
.page-header,
.settings-header,
.records-header,
.picker-header,
.manual-header,
.title-section {
  -webkit-app-region: drag;
}

/* ===== Background Effects ===== */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.stars {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(2px 2px at 50px 160px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2px 2px at 90px 40px, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(2px 2px at 130px 80px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(2px 2px at 160px 120px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 200px 50px, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 250px 140px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(2px 2px at 300px 30px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 350px 100px, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(2px 2px at 400px 60px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 450px 150px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(2px 2px at 500px 90px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 550px 40px, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(2px 2px at 600px 130px, rgba(255, 255, 255, 0.6), transparent);
  background-size: 650px 200px;
  animation: twinkle 8s ease-in-out infinite alternate;
}

@keyframes twinkle {

  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }
}

.gradient-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(236, 72, 153, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(6, 182, 212, 0.15) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10, 10, 26, 0.8) 0%, rgba(20, 10, 40, 0.9) 100%);
  animation: gradientPulse 10s ease-in-out infinite alternate;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25L6 6.25L11 1.25' fill='none' stroke='%2367e8f9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 0.85rem center;
  background-size: auto, 12px 8px;
  background-color: var(--sc-select-option-bg);
  color: var(--sc-select-text);
  border-color: var(--sc-select-border);
  box-shadow: var(--sc-select-shadow);
  padding-right: 2.35rem !important;
  color-scheme: dark;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

select:hover {
  border-color: rgba(139, 92, 246, 0.6);
}

select:focus {
  border-color: var(--sc-select-border-strong);
  box-shadow:
    0 0 0 2px rgba(6, 182, 212, 0.22),
    0 12px 28px rgba(8, 8, 24, 0.4);
}

select option,
select optgroup {
  background: var(--sc-select-option-bg);
  color: var(--sc-select-text);
}

select option:checked,
select option:hover,
select option:focus {
  background: var(--sc-select-option-hover);
  color: #ffffff;
}

/* ===== Global Scrollbar Styling ===== */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.5);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.7);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.5) rgba(255, 255, 255, 0.05);
}

@keyframes gradientPulse {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.85;
  }
}

/* ===== Main Container ===== */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* "safe" prevents the top of the menu being clipped when the content is
     taller than the viewport (centered flex overflow). */
  justify-content: safe center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
  position: relative;
  z-index: 1;
}

/* ===== Mobile / narrow window: stack page headers ===== */
@media (max-width: 640px) {
  body .page-header,
  body .settings-header,
  body .picker-header,
  body .records-header,
  body .manual-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  body .page-header .page-title,
  body .settings-header .page-title,
  body .picker-header .page-title {
    font-size: 1.45rem;
  }
}

/* ===== Title Section ===== */
.title-section {
  text-align: center;
  margin-bottom: 3rem;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
}

.heart-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
  animation: heartBeat 2s ease-in-out infinite;
}

.heart-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 20px rgba(236, 72, 153, 0.5));
}

@keyframes heartBeat {

  0%,
  100% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.1);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.05);
  }
}

.main-title {
  font-size: 4.5rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.title-euro {
  background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 60px rgba(139, 92, 246, 0.5);
}

.title-vision {
  background: linear-gradient(135deg, #ec4899 0%, #f59e0b 50%, #fbbf24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 1em;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
  margin-left: 1em;
}

.tagline {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-top: 1rem;
}

/* ===== Menu Buttons ===== */
.menu {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.menu-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 280px;
  padding: 1.25rem 2.5rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-icon {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.btn-text {
  position: relative;
  z-index: 2;
}

.btn-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

/* Play Button */
.play-btn {
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #f59e0b 100%);
  color: white;
  box-shadow:
    0 8px 32px rgba(139, 92, 246, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.play-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 12px 40px rgba(139, 92, 246, 0.5),
    0 0 60px rgba(236, 72, 153, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.play-btn:hover .btn-glow {
  left: 100%;
}

.play-btn:hover .btn-icon {
  transform: scale(1.2);
}

.play-btn:active {
  transform: translateY(-1px) scale(0.98);
}

/* Records Button */
.records-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #d97706 100%);
  color: white;
  box-shadow:
    0 8px 32px rgba(245, 158, 11, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.records-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 12px 40px rgba(245, 158, 11, 0.5),
    0 0 60px rgba(251, 191, 36, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.records-btn:hover .btn-glow {
  left: 100%;
}

.records-btn:hover .btn-icon {
  transform: scale(1.2);
}

.records-btn:active {
  transform: translateY(-1px) scale(0.98);
}

/* Picker Button */
.picker-btn {
  background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 45%, #22c55e 100%);
  color: white;
  box-shadow:
    0 8px 32px rgba(6, 182, 212, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.picker-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 12px 40px rgba(14, 165, 233, 0.45),
    0 0 60px rgba(34, 197, 94, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.picker-btn:hover .btn-glow {
  left: 100%;
}

.picker-btn:hover .btn-icon {
  transform: scale(1.12);
}

.picker-btn:active {
  transform: translateY(-1px) scale(0.98);
}

/* Manual Jury Button */
.manual-jury-btn {
  background: linear-gradient(135deg, #14b8a6 0%, #eab308 50%, #f97316 100%);
  color: white;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  box-shadow:
    0 8px 32px rgba(20, 184, 166, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.manual-jury-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 12px 40px rgba(20, 184, 166, 0.45),
    0 0 60px rgba(234, 179, 8, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.manual-jury-btn:hover .btn-glow {
  left: 100%;
}

.manual-jury-btn:hover .btn-icon {
  transform: scale(1.16);
}

.manual-jury-btn:active {
  transform: translateY(-1px) scale(0.98);
}

/* Settings Button */
.settings-btn {
  background: linear-gradient(135deg, #4b5563 0%, #6b7280 45%, #9ca3af 100%);
  color: white;
  box-shadow:
    0 8px 28px rgba(107, 114, 128, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.settings-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 12px 36px rgba(107, 114, 128, 0.45),
    0 0 52px rgba(156, 163, 175, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.settings-btn:hover .btn-glow {
  left: 100%;
}

.settings-btn:hover .btn-icon {
  transform: rotate(20deg);
}

.settings-btn:active {
  transform: translateY(-1px) scale(0.98);
}

/* Quit Button */
.quit-btn {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
}

.quit-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.quit-btn:hover .btn-glow {
  left: 100%;
}

.quit-btn:active {
  transform: translateY(0) scale(0.98);
}

/* ===== Footer ===== */
.footer {
  position: absolute;
  bottom: 2rem;
  text-align: center;
}

.footer p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.15em;
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.7;
  }
}

/* ===== Responsive ===== */
@media (max-height: 600px) {
  .container {
    padding: 1rem;
  }

  .title-section {
    margin-bottom: 1rem;
  }

  .logo-container {
    margin-bottom: 0.75rem;
  }

  .main-title {
    font-size: 3rem;
  }

  .subtitle {
    font-size: 1.5rem;
  }

  .heart-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 0.6rem;
  }

  .tagline {
    display: none;
  }

  .menu {
    gap: 0.55rem;
    margin-bottom: 1rem;
  }

  .menu-btn {
    padding: 0.75rem 1.8rem;
    width: 240px;
  }

  .footer {
    bottom: 0.75rem;
  }
}