/* Shared visual refresh for older tool/game pages.
   Tokens mirror the production homepage; layout and JS hooks stay page-owned. */
:root {
  --legacy-bg: #09090f;
  --legacy-panel: rgba(15, 15, 26, 0.7);
  --legacy-panel-strong: rgba(22, 22, 38, 0.82);
  --legacy-border: rgba(255, 255, 255, 0.07);
  --legacy-text: #f0f0f8;
  --legacy-muted: #9a9ab4;
  --legacy-purple: #667eea;
  --legacy-cyan: #4facfe;
  --legacy-pink: #f093fb;
  --legacy-blue: #764ba2;
  --legacy-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  --legacy-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh !important;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(102, 126, 234, 0.13), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 100%, rgba(240, 147, 251, 0.09), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(79, 172, 254, 0.05), transparent 70%),
    var(--legacy-bg) !important;
  color: var(--legacy-text) !important;
  font-family: "Inter", "Segoe UI", Tahoma, Arial, sans-serif !important;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.08), transparent),
    linear-gradient(120deg, transparent, rgba(240, 147, 251, 0.06), transparent);
  filter: blur(36px);
  opacity: 0.55;
  animation: legacyDrift 18s ease-in-out infinite alternate;
}

body > * {
  position: relative;
  z-index: 1;
}

.container,
.main-container,
.game-container,
.page-container,
.tool-container,
.wrapper {
  width: min(1080px, calc(100% - 28px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.glass-card,
.card,
.panel,
.settings-panel,
.game-panel,
.controls,
.result-box,
.modal-content,
.menu-card,
.form-card,
.tool-card,
.content-card {
  background: var(--legacy-panel) !important;
  border: 1px solid var(--legacy-border) !important;
  border-radius: 1.25rem !important;
  box-shadow: var(--legacy-shadow) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: var(--legacy-text) !important;
}

.header-section,
.hero,
.game-header,
.page-header {
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 1.5rem;
}

.main-title,
.page-title,
.game-title,
h1 {
  color: transparent !important;
  background: linear-gradient(135deg, #ffffff 30%, #667eea 60%, #f093fb 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  letter-spacing: 0 !important;
  font-weight: 900 !important;
}

.subtitle,
.page-subtitle,
.description,
p,
small,
label {
  color: var(--legacy-muted);
}

.glass-input,
.form-control,
input,
select,
textarea {
  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: var(--legacy-text) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

.glass-input:focus,
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(102, 126, 234, 0.65) !important;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.14) !important;
}

select option {
  background: #120d2c;
  color: var(--legacy-text);
}

.btn-primary,
.btn-secondary,
.btn-copy,
.btn,
button:not(.btn-close):not(.hamburger):not(.cell):not(.square):not(.dotbox-edge):not(.lang-btn):not(.language-btn):not(.lang-button) {
  min-height: 42px;
  border-radius: 0.75rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: var(--legacy-gradient) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.14) !important;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-copy:hover,
.btn:hover,
button:not(.btn-close):not(.hamburger):not(.cell):not(.square):not(.dotbox-edge):not(.lang-btn):not(.language-btn):not(.lang-button):hover {
  transform: translateY(-2px);
  filter: saturate(1.12);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35) !important;
}

.back-home,
.back-button,
.btn-back,
.quiz-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--legacy-text) !important;
  text-decoration: none !important;
  font-weight: 800;
}

.lang-switcher,
.language-switcher,
.language-selector,
.lang-selector {
  display: flex !important;
  gap: 0.25rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.625rem !important;
  padding: 0.2rem !important;
  flex-wrap: nowrap !important;
}

.lang-btn,
.language-btn,
.lang-button {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  padding: 0.25rem 0.6rem !important;
  border-radius: 0.45rem !important;
  min-width: unset !important;
  min-height: unset !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  transform: none !important;
}

.lang-btn:hover,
.language-btn:hover,
.lang-button:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.lang-btn.active,
.language-btn.active,
.lang-button.active {
  background: rgba(102, 126, 234, 0.7) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.result-box,
.url-display,
.info-box,
.alert {
  border-color: rgba(102, 126, 234, 0.28) !important;
}

.particles .particle,
.particle {
  background: rgba(167, 139, 250, 0.55) !important;
  box-shadow: 0 0 24px rgba(102, 126, 234, 0.32);
}

canvas {
  max-width: 100%;
}

@media (max-width: 720px) {
  .container,
  .main-container,
  .game-container,
  .page-container,
  .tool-container,
  .wrapper {
    width: min(100% - 22px, 1080px) !important;
  }

  .glass-card,
  .card,
  .panel,
  .settings-panel,
  .game-panel,
  .controls,
  .result-box,
  .modal-content {
    border-radius: 20px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .lang-switcher,
  .language-switcher,
  .language-selector,
  .lang-selector {
    border-radius: 20px;
  }
}

@keyframes legacyDrift {
  from {
    transform: translate3d(-3%, -2%, 0) rotate(-4deg);
  }
  to {
    transform: translate3d(3%, 2%, 0) rotate(4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before { animation: none !important; }
}


/* Shared keyboard focus treatment for refreshed legacy pages. */
:is(a, button, [role="button"]):focus-visible {
  outline: 3px solid #c4b5fd !important;
  outline-offset: 3px;
}