/**
 * Custom styles for Scient
 * Monokai Pro inspired theme
 */

/* Monokai Pro Color Palette */
:root {
  --monokai-bg: #2d2a2e;
  --monokai-surface: #403e41;
  --monokai-overlay: #5b595c;
  --monokai-text: #fcfcfa;
  --monokai-subtle: #939293;
  --monokai-red: #ff6188;
  --monokai-orange: #fc9867;
  --monokai-yellow: #ffd866;
  --monokai-green: #a9dc76;
  --monokai-cyan: #78dce8;
  --monokai-blue: #ab9df2;
  --monokai-purple: #c792ea;
  --monokai-pink: #ff6188;
  --monokai-purple-dim: rgba(199, 146, 234, 0.12);
  --monokai-border: #4a4750;
  --monokai-border-hover: #6a6770;
}

/* Override DaisyUI dark theme with Monokai colors */
[data-theme="dark"] {
  --b1: #2d2a2e;
  --b2: #403e41;
  --b3: #5b595c;
  --bc: #fcfcfa;
  --p: #ab9df2;
  --pf: #9580e8;
  --pc: #2d2a2e;
  --s: #78dce8;
  --sf: #5ec9dd;
  --sc: #2d2a2e;
  --a: #ffd866;
  --af: #ffc933;
  --ac: #2d2a2e;
  --n: #403e41;
  --nf: #2d2a2e;
  --nc: #fcfcfa;
  --in: #78dce8;
  --su: #a9dc76;
  --wa: #fc9867;
  --er: #ff6188;
}

body {
  background: var(--monokai-bg);
  color: var(--monokai-text);
}

/* Smooth transitions for all interactive elements */
* {
  transition-property: background-color, border-color, color, fill, stroke, transform, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Answer buttons */
.answer-btn {
  min-height: 120px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  word-wrap: break-word;
  white-space: normal;
  background: var(--monokai-surface);
  border: 2px solid var(--monokai-border);
  color: var(--monokai-text);
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .answer-btn {
    min-height: 200px;
    padding: 1.5rem;
    font-size: 1.75rem;
  }
}

.answer-btn:hover:not(.btn-disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(171, 157, 242, 0.3);
  border-color: var(--monokai-blue);
  background: var(--monokai-overlay);
}

.answer-btn:active:not(.btn-disabled) {
  transform: translateY(0);
  border-color: var(--monokai-cyan);
}

/* Remove active/focus state that causes buttons to stay highlighted */
.answer-btn:focus {
  outline: none;
}

.answer-btn.btn-disabled {
  background: var(--monokai-surface);
  border-color: var(--monokai-border);
  opacity: 0.6;
}

/* Flag emoji display in question */
.flag-emoji {
  font-size: 16rem;
  line-height: 1;
  margin: 0 auto;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", "EmojiOne Color", "Twemoji Mozilla", sans-serif;
  font-variant-emoji: emoji;
}

/* Twemoji images in flag-emoji */
.flag-emoji img.emoji {
  width: 16rem;
  height: 16rem;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .flag-emoji {
    font-size: 8rem;
  }

  .flag-emoji img.emoji {
    width: 8rem;
    height: 8rem;
  }
}

/* Emoji display in answer buttons */
.answer-emoji {
  font-size: 10rem;
  margin-bottom: 5%;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", "EmojiOne Color", "Twemoji Mozilla", sans-serif;
  font-variant-emoji: emoji;
}

/* Twemoji images in answer-emoji */
.answer-emoji img.emoji {
  width: 10rem;
  height: 10rem;
  vertical-align: middle;
  margin-bottom: 5%;
}

@media (max-width: 768px) {
  .answer-emoji {
    font-size: 5rem;
  }

  .answer-emoji img.emoji {
    width: 5rem;
    height: 5rem;
  }
}

/* Default Twemoji size for general content (like game over screen) */
img.emoji {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;
  display: inline-block;
}

/* Ensure emoji container takes up proper space */
.answer-btn > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Game over modal */
.modal-box {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Progress bar animation */
#timer-progress {
  transition: width 0.1s linear, background-color 0.3s ease;
}

.bg-success {
  background-color: var(--monokai-green) !important;
}

.bg-warning {
  background-color: var(--monokai-yellow) !important;
}

.bg-error {
  background-color: var(--monokai-red) !important;
}

/* Lives hearts animation */
#lives-container {
  animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Loading spinner centering */
.loading-spinner {
  margin: 0 auto;
}

/* Score badge animation */
.badge {
  animation: scaleIn 0.3s ease-out;
}

@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Ensure touch targets are at least 48px */
button, input[type="checkbox"], input[type="radio"] {
  min-height: 30px;
  min-width: 48px;
}

label {
  min-height: 30px;
  display: flex;
  align-items: center;
}

/* Custom scrollbar for modal */
.modal-box::-webkit-scrollbar {
  width: 8px;
}

.modal-box::-webkit-scrollbar-track {
  background: transparent;
}

.modal-box::-webkit-scrollbar-thumb {
  background: var(--monokai-overlay);
  border-radius: 4px;
}

.modal-box::-webkit-scrollbar-thumb:hover {
  background: var(--monokai-subtle);
}

/* Card styling */
.card {
  background: var(--monokai-surface);
  border: 1px solid var(--monokai-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.card-title {
  color: var(--monokai-cyan);
}

/* Badge styling */
.badge-primary {
  background: var(--monokai-blue);
  color: var(--monokai-bg);
  border: none;
  font-weight: 600;
}

/* Button styling */
.btn-primary {
  background: var(--monokai-blue);
  border: none;
  color: var(--monokai-bg);
}

.btn-primary:hover {
  background: var(--monokai-purple);
  box-shadow: 0 4px 12px rgba(171, 157, 242, 0.4);
}

.btn-outline {
  border: 2px solid var(--monokai-border);
  color: var(--monokai-text);
}

.btn-outline:hover {
  border-color: var(--monokai-border-hover);
}

/* Checkbox and Radio */
.checkbox:checked,
.radio:checked {
  background: var(--monokai-cyan);
  border-color: var(--monokai-cyan);
}

/* Alert styling */
.alert-error {
  background: rgba(255, 97, 136, 0.15);
  border: 1px solid rgba(255, 97, 136, 0.4);
  color: var(--monokai-red);
}

.alert-success {
  background: rgba(169, 220, 118, 0.15);
  border: 1px solid rgba(169, 220, 118, 0.4);
  color: var(--monokai-green);
}

/* Header styling */
h1, h2, h3 {
  color: var(--monokai-text);
}

/* Links */
a {
  color: var(--monokai-cyan);
}

a:hover {
  color: var(--monokai-blue);
}

/* Loading spinner */
.loading {
  color: var(--monokai-blue);
}

/* Modal backdrop */
#game-over-modal {
  background: rgba(45, 42, 46, 0.85);
  backdrop-filter: blur(4px);
}

.modal-box {
  background: var(--monokai-surface);
  border: 1px solid var(--monokai-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Secondary cards */
.bg-base-200 {
  background: var(--monokai-bg) !important;
}

/* Divider */
.divider {
  border-color: var(--monokai-border);
}

/* Border utility classes */
.border-monokai-border {
  border-color: var(--monokai-border) !important;
}

.border-monokai-overlay {
  border-color: var(--monokai-border) !important;
}

.hover\:border-monokai-border:hover {
  border-color: var(--monokai-border-hover) !important;
}

/* Timer bar container */
.bg-base-300 {
  background: var(--monokai-overlay) !important;
}

/* Gradient text support */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-monokai-blue {
  --tw-gradient-from: var(--monokai-blue);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(171, 157, 242, 0));
}

.via-monokai-purple {
  --tw-gradient-stops: var(--tw-gradient-from), var(--monokai-purple), var(--tw-gradient-to, rgba(199, 146, 234, 0));
}

.to-monokai-cyan {
  --tw-gradient-to: var(--monokai-cyan);
}

.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

.text-transparent {
  color: transparent;
}

/* Custom game/difficulty option styling */
.game-option,
.difficulty-option {
  cursor: pointer;
  user-select: none;
}

.game-option:active,
.difficulty-option:active {
  transform: scale(0.98);
}

/* Custom scrollbar for high scores */
#high-scores-list::-webkit-scrollbar {
  width: 6px;
}

#high-scores-list::-webkit-scrollbar-track {
  background: transparent;
}

#high-scores-list::-webkit-scrollbar-thumb {
  background: var(--monokai-overlay);
  border-radius: 3px;
}

#high-scores-list::-webkit-scrollbar-thumb:hover {
  background: var(--monokai-subtle);
}

/* Icon color classes */
.text-monokai-yellow {
  color: var(--monokai-yellow);
}

.text-monokai-cyan {
  color: var(--monokai-cyan);
}

/* Alert icon styling */
.alert svg {
  flex-shrink: 0;
}

/* ============================================
   ENHANCED MAIN MENU STYLES
   ============================================ */

/* Hero Section - Animated Gradient Title */
.animate-gradient {
  background-size: 200% auto;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Game Card Enhancements */
.game-card {
  position: relative;
}

.game-option {
  min-height: 70px;
  will-change: transform, box-shadow;
}

@media (min-width: 768px) {
  .game-option {
    min-height: 80px;
  }
}

.game-option:hover {
  transform: translateY(-2px);
}

.game-option.selected {
  background: var(--monokai-purple-dim) !important;
}

/* Background utility classes */
.bg-monokai-bg {
  background: var(--monokai-bg) !important;
}

.bg-monokai-overlay {
  background: var(--monokai-overlay) !important;
}

.bg-monokai-surface {
  background: var(--monokai-surface) !important;
}

.bg-monokai-purple-dim {
  background: var(--monokai-purple-dim) !important;
}

/* Checkmark Indicator */
.checkmark-indicator {
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-color: var(--monokai-border);
}

.checkmark-indicator.opacity-100 {
  animation: checkmark-pop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes checkmark-pop {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Shadow Glow Effects */
.shadow-glow {
  box-shadow: 0 4px 14px rgba(171, 157, 242, 0.3);
}

.shadow-glow-purple {
  box-shadow: 0 4px 20px rgba(171, 157, 242, 0.4), 0 0 40px rgba(171, 157, 242, 0.1);
}

.shadow-glow-blue {
  box-shadow: 0 4px 20px rgba(120, 220, 232, 0.4), 0 0 40px rgba(120, 220, 232, 0.1);
}

/* Difficulty Card Enhancements */
.difficulty-card {
  flex: 1 1 0;
  min-width: 0;
}

.difficulty-option {
  will-change: transform, box-shadow;
  min-height: 130px;
  padding: 1rem;
  width: 100%;
  height: 100%;
}

.difficulty-option .text-5xl {
  font-size: 2.5rem;
  line-height: 1;
}

.difficulty-option .text-xl {
  font-size: 1.125rem;
  white-space: nowrap;
}

.difficulty-option .text-xs {
  font-size: 0.75rem;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .difficulty-option {
    min-height: 145px;
    padding: 1.25rem;
  }

  .difficulty-option .text-5xl {
    font-size: 3rem;
  }

  .difficulty-option .text-xl {
    font-size: 1.25rem;
  }

  .difficulty-option .text-xs {
    font-size: 0.75rem;
  }
}

.difficulty-option:hover {
  transform: translateY(-2px);
}

.difficulty-option.selected {
  background: var(--monokai-purple-dim) !important;
}

/* DaisyUI Badge Color Overrides for Monokai Theme */
.badge-success {
  background: rgba(169, 220, 118, 0.2);
  color: var(--monokai-green);
  border: 1px solid rgba(169, 220, 118, 0.4);
}

.badge-warning {
  background: rgba(252, 152, 103, 0.2);
  color: var(--monokai-orange);
  border: 1px solid rgba(252, 152, 103, 0.4);
}

.badge-error {
  background: rgba(255, 97, 136, 0.2);
  color: var(--monokai-red);
  border: 1px solid rgba(255, 97, 136, 0.4);
}

/* Difficulty Dots in High Scores */
.difficulty-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.difficulty-dot[data-difficulty="easy"] {
  background: var(--monokai-green);
}

.difficulty-dot[data-difficulty="medium"] {
  background: var(--monokai-orange);
}

.difficulty-dot[data-difficulty="hard"] {
  background: var(--monokai-red);
}

/* Start Button - Enhanced */
.btn-start {
  background: var(--monokai-surface);
  border: 2px solid var(--monokai-border);
  color: var(--monokai-text);
  opacity: 0.5;
  cursor: not-allowed;
  position: relative;
  overflow: hidden;
}

.btn-start.enabled {
  background: linear-gradient(135deg, var(--monokai-blue) 0%, var(--monokai-purple) 100%);
  border-color: var(--monokai-purple);
  opacity: 1;
  cursor: pointer;
  animation: pulse-button 2s ease-in-out infinite;
}

.btn-start.enabled:hover {
  background: linear-gradient(135deg, var(--monokai-purple) 0%, var(--monokai-blue) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(171, 157, 242, 0.5);
}

.btn-start.enabled:active {
  transform: translateY(0);
}

@keyframes pulse-button {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(171, 157, 242, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(171, 157, 242, 0.6), 0 0 30px rgba(171, 157, 242, 0.2);
  }
}

/* Shake Animation for Validation Error */
.shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% {
    transform: translateX(-2px);
  }
  20%, 80% {
    transform: translateX(4px);
  }
  30%, 50%, 70% {
    transform: translateX(-6px);
  }
  40%, 60% {
    transform: translateX(6px);
  }
}

/* Toggle Switch Styling */
.toggle {
  --tglbg: var(--monokai-surface);
  border-color: var(--monokai-border);
  width: 3rem;
  height: 1.5rem;
}

.toggle:checked {
  --tglbg: var(--monokai-cyan);
  border-color: var(--monokai-cyan);
  background-image: none;
}

/* High Score Card Enhancements */
.high-score-card {
  transition: all 0.2s ease;
}

/* High score list items */
.high-score-card .menu li > div {
  cursor: default;
  user-select: none;
}

.high-score-card .menu li > div:active {
  background: var(--monokai-surface) !important;
}

/* Score value prominence */
.score-value {
  line-height: 1;
  letter-spacing: -0.02em;
  min-width: 3ch;
  text-align: right;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  /* Reduce overall spacing on mobile */
  .container {
    max-width: 100%;
  }

  /* Compact card padding */
  .game-option {
    padding: 0.75rem !important;
  }

  .difficulty-option {
    padding: 0.75rem !important;
  }

  /* Smaller text on mobile */
  .game-option .text-4xl {
    font-size: 2.5rem !important;
  }

  .difficulty-option .text-4xl {
    font-size: 2.5rem !important;
  }

  /* High score section adjustments */
  #high-scores-list {
    max-height: 300px !important;
  }
}

/* Focus Indicators for Accessibility */
.game-card:focus-within .game-option,
.difficulty-card:focus-within .difficulty-option {
  outline: none;
}

.game-option:focus,
.difficulty-option:focus {
  outline: none;
}

.btn-start:focus {
  outline: none;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-gradient {
    background-position: 0% 50%;
    animation: none;
  }

  .game-option:hover,
  .difficulty-option:hover {
    transform: none;
  }

  .btn-start.enabled {
    animation: none;
  }
}

/* Loading State Enhancements */
.loading {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Smooth Scroll Behavior */
html {
  scroll-behavior: smooth;
}

/* Selection Styling */
::selection {
  background: var(--monokai-purple);
  color: var(--monokai-bg);
}

/* Responsive Typography */
@media (max-width: 640px) {
  h1 {
    font-size: 2.5rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }
}

/* Grid Responsive Adjustments */
@media (max-width: 1024px) {
  #games-list {
    grid-template-columns: 1fr;
  }

  .difficulty-option {
    padding: 1.25rem;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .grid.grid-cols-1.sm\\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Question slide transitions */
@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50px);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-out {
  animation: slideOutLeft 0.15s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

.slide-in {
  animation: slideInRight 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Container slide animations for question and answers together */
.question-answers-container.slide-out > * {
  animation: slideOutLeft 0.15s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

.question-answers-container.slide-in > * {
  animation: slideInRight 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}