:root {
  --memorest-bg: #edf3f8;
  --memorest-bg-2: #dfeaf2;
  --memorest-ink: #172033;
  --memorest-muted: #5b6575;
  --memorest-border: rgba(30, 41, 59, 0.13);
  --memorest-surface: rgba(255, 255, 255, 0.76);
  --memorest-surface-strong: rgba(255, 255, 255, 0.9);
  --memorest-primary: #5b5ff0;
  --memorest-teal: #18b7a3;
}

html {
  color-scheme: light;
}

body.bg-ink {
  background:
    radial-gradient(circle at 14% 0%, rgba(94, 234, 212, 0.28), transparent 34rem),
    radial-gradient(circle at 86% 8%, rgba(129, 140, 248, 0.24), transparent 30rem),
    linear-gradient(180deg, #f8fbfd 0%, var(--memorest-bg) 48%, var(--memorest-bg-2) 100%) !important;
  color: var(--memorest-ink) !important;
}

body.bg-ink header:has(nav) {
  background: rgba(248, 251, 253, 0.86) !important;
  border-bottom: 1px solid var(--memorest-border) !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.08);
}

body.bg-ink .card,
body.bg-ink aside.card,
body.bg-ink .rounded-2xl.border,
body.bg-ink .rounded-xl.border,
body.bg-ink .bg-white\/5,
body.bg-ink .bg-white\/10,
body.bg-ink .bg-slate-900\/30 {
  background-color: var(--memorest-surface) !important;
  border-color: var(--memorest-border) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  color: var(--memorest-ink) !important;
}

body.bg-ink .text-white,
body.bg-ink .text-white\/90,
body.bg-ink .text-white\/80 {
  color: rgba(23, 32, 51, 0.94) !important;
}

body.bg-ink .text-white\/70,
body.bg-ink .text-white\/60,
body.bg-ink .text-white\/50,
body.bg-ink .text-white\/40 {
  color: var(--memorest-muted) !important;
}

body.bg-ink .border-white\/10,
body.bg-ink .border-white\/15,
body.bg-ink .border-white\/20,
body.bg-ink .border-white\/25 {
  border-color: var(--memorest-border) !important;
}

body.bg-ink .ring-white\/10,
body.bg-ink .ring-white\/15,
body.bg-ink .ring-white\/20,
body.bg-ink .ring-white\/60,
body.bg-ink .ring-white\/90 {
  --tw-ring-color: rgba(30, 41, 59, 0.14) !important;
}

body.bg-ink .btn,
body.bg-ink .btn-ghost,
body.bg-ink label:has(input[type="radio"]),
body.bg-ink .badge,
body.bg-ink .category-title {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: var(--memorest-border) !important;
  color: var(--memorest-ink) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

body.bg-ink .btn:hover,
body.bg-ink .btn-ghost:hover,
body.bg-ink label:has(input[type="radio"]):hover {
  background: var(--memorest-surface-strong) !important;
  border-color: rgba(91, 95, 240, 0.26) !important;
  opacity: 1 !important;
}

body.bg-ink .btn-primary,
body.bg-ink .bg-primary,
body.bg-ink .bg-primary\/90,
body.bg-ink .bg-fuchsia-600,
body.bg-ink label:has(input[type="radio"]:checked),
body.bg-ink label:has(input[name="pairs-theme"]:checked) {
  background: linear-gradient(135deg, var(--memorest-primary), var(--memorest-teal)) !important;
  border-color: rgba(255, 255, 255, 0.56) !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(91, 95, 240, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

body.bg-ink .text-primary {
  color: #4f46e5 !important;
}

body.bg-ink .bg-primary.text-ink,
body.bg-ink .bg-primary\/90.text-white,
body.bg-ink .btn-primary .text-ink {
  color: #fff !important;
}

body.bg-ink select,
body.bg-ink input,
body.bg-ink textarea {
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(30, 41, 59, 0.16) !important;
  color: var(--memorest-ink) !important;
}

body.bg-ink table thead {
  background: rgba(248, 251, 253, 0.86);
}

body.bg-ink button[aria-label="Carte masquée"] {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}

body.bg-ink button[aria-label^="Carte"] {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}

section:has(button[aria-label="Vert"]):has(button[aria-label="Jaune"]) .card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.7)),
    radial-gradient(circle at 50% 0%, rgba(91, 95, 240, 0.12), transparent 26rem) !important;
}

div:has(> button[aria-label="Vert"]):has(> button[aria-label="Rouge"]):has(> button[aria-label="Bleu"]):has(> button[aria-label="Jaune"]) {
  background: conic-gradient(from 180deg, #22c55e, #3b82f6, #eab308, #ef4444, #22c55e) !important;
  border: 10px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow:
    0 26px 58px rgba(15, 23, 42, 0.18),
    inset 0 0 0 1px rgba(15, 23, 42, 0.12),
    inset 0 0 44px rgba(15, 23, 42, 0.18) !important;
  isolation: isolate;
  overflow: hidden;
}

div:has(> button[aria-label="Vert"]):has(> button[aria-label="Rouge"]):has(> button[aria-label="Bleu"]):has(> button[aria-label="Jaune"])::after {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.86), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(226, 232, 240, 0.9));
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  content: "";
  height: 32%;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32%;
  z-index: 5;
}

button[aria-label="Vert"],
button[aria-label="Rouge"],
button[aria-label="Bleu"],
button[aria-label="Jaune"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -16px 32px rgba(15, 23, 42, 0.18) !important;
}

button[aria-label="Vert"] {
  background: radial-gradient(circle at 28% 22%, #bbf7d0, transparent 30%), linear-gradient(145deg, #34d399, #16a34a) !important;
}

button[aria-label="Rouge"] {
  background: radial-gradient(circle at 72% 22%, #fecaca, transparent 30%), linear-gradient(145deg, #fb7185, #dc2626) !important;
}

button[aria-label="Bleu"] {
  background: radial-gradient(circle at 28% 72%, #bfdbfe, transparent 30%), linear-gradient(145deg, #60a5fa, #2563eb) !important;
}

button[aria-label="Jaune"] {
  background: radial-gradient(circle at 72% 72%, #fef3c7, transparent 30%), linear-gradient(145deg, #fde047, #d97706) !important;
}

button[aria-label][style*="brightness"] {
  animation: simonPadLit 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: brightness(1.22) saturate(1.22) !important;
}

html.simon-watch div:has(> button[aria-label="Vert"]):has(> button[aria-label="Jaune"]) {
  animation: simonBoardWatch 900ms ease-in-out infinite alternate;
}

html.simon-starting div:has(> button[aria-label="Vert"]):has(> button[aria-label="Jaune"]) {
  animation: simonBoardStart 520ms ease-out;
}

@keyframes simonPadLit {
  0% { transform: scale(1); }
  52% { transform: scale(1.036); }
  100% { transform: scale(1.01); }
}

@keyframes simonBoardWatch {
  from { box-shadow: 0 22px 48px rgba(15, 23, 42, 0.16), 0 0 0 0 rgba(91, 95, 240, 0.18); }
  to { box-shadow: 0 28px 62px rgba(15, 23, 42, 0.19), 0 0 0 8px rgba(91, 95, 240, 0.08); }
}

@keyframes simonBoardStart {
  0% { transform: scale(0.96); }
  62% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@media (max-width: 640px) {
  body.bg-ink .card {
    padding: 1rem;
  }

  main section:has(button[aria-label="Vert"]) header {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 0.8rem !important;
  }

  main section:has(button[aria-label="Vert"]) header > div:last-child,
  main section:has(button[aria-label="Vert"]) header > div:last-child > div {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: 100%;
  }

  main section:has(button[aria-label="Vert"]) h2 {
    font-size: 1.65rem !important;
    line-height: 1.15 !important;
  }

  main section:has(button[aria-label="Vert"]) .md\:w-3\/4,
  main section:has(button[aria-label="Vert"]) .md\:w-1\/4 {
    width: 100% !important;
  }

  div:has(> button[aria-label="Vert"]):has(> button[aria-label="Jaune"]) {
    border-width: 8px !important;
    height: min(86vw, 320px) !important;
    width: min(86vw, 320px) !important;
  }
}