/* Final premium light theme; loaded last to prevent dark-theme leakage. */
body.light {
  --lbg: #f7f8fc;
  --ls: #fff;
  --lsoft: #eef3ff;
  --link: #111827;
  --ltext: #334155;
  --lmuted: #64748b;
  --lline: rgba(51, 65, 85, 0.14);
  --lblue: #4f6ef7;
  background: var(--lbg) !important;
  color: var(--link) !important;
}
body.light::before {
  opacity: 1 !important;
  background:
    radial-gradient(
      circle at 88% 5%,
      rgba(99, 102, 241, 0.13),
      transparent 29rem
    ),
    radial-gradient(
      circle at 8% 46%,
      rgba(14, 165, 168, 0.09),
      transparent 28rem
    ),
    radial-gradient(
      circle at 76% 82%,
      rgba(244, 114, 182, 0.08),
      transparent 25rem
    ),
    var(--lbg) !important;
}
body.light .showcase-ambient {
  background: linear-gradient(
    145deg,
    #fbfdff 0%,
    #f0f4ff 48%,
    #faf7ff 100%
  ) !important;
}
body.light .showcase-grid {
  opacity: 0.38 !important;
  background-image:
    linear-gradient(rgba(79, 110, 247, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 110, 247, 0.07) 1px, transparent 1px) !important;
}
body.light .showcase-codeword {
  color: rgba(48, 70, 120, 0.075) !important;
}
body.light nav,
body.light nav.scrolled {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(70, 85, 125, 0.15) !important;
  box-shadow:
    0 18px 55px rgba(50, 65, 105, 0.14),
    inset 0 1px #fff !important;
}
body.light nav::after {
  background:
    radial-gradient(circle at 12% 0, rgba(14, 165, 168, 0.09), transparent 30%),
    radial-gradient(
      circle at 88% 100%,
      rgba(139, 92, 246, 0.08),
      transparent 30%
    ) !important;
}
body.light .logo {
  color: #172033 !important;
  background: linear-gradient(
    135deg,
    rgba(79, 110, 247, 0.1),
    rgba(14, 165, 168, 0.08)
  ) !important;
  border-color: rgba(70, 94, 150, 0.14) !important;
}
body.light .nav-links a {
  color: #536078 !important;
}
body.light .nav-links a:hover,
body.light .nav-links a.active {
  color: #111827 !important;
  background: linear-gradient(
    135deg,
    rgba(79, 110, 247, 0.13),
    rgba(139, 92, 246, 0.09)
  ) !important;
  border-color: rgba(79, 110, 247, 0.2) !important;
}
body.light .theme-toggle,
body.light .menu-toggle,
body.light .nav-quick {
  color: #172033 !important;
  background: #eef2f8 !important;
  border-color: rgba(51, 65, 85, 0.12) !important;
  box-shadow:
    inset 0 1px #fff,
    0 8px 20px rgba(53, 69, 109, 0.08) !important;
}
body.light .theme-toggle i,
body.light .menu-toggle i {
  color: #172033 !important;
}
body.light section,
body.light section:nth-of-type(even),
body.light #about,
body.light #highlights,
body.light #skills,
body.light #projects,
body.light #experience,
body.light #education,
body.light #certifications,
body.light #contactFormSection {
  color: var(--link) !important;
  background: transparent !important;
  border-color: var(--lline) !important;
}
body.light #about,
body.light #skills,
body.light #experience,
body.light #certifications {
  background: linear-gradient(
    180deg,
    rgba(238, 243, 255, 0.72),
    rgba(249, 250, 255, 0.86)
  ) !important;
  border-block: 1px solid rgba(62, 82, 125, 0.1) !important;
}
body.light .hero-content h1,
body.light .section-header h2,
body.light h1,
body.light h2,
body.light h3,
body.light h4,
body.light strong {
  color: var(--link) !important;
}
body.light .hero-content p,
body.light .section-header p,
body.light .small-note,
body.light p,
body.light li {
  color: var(--ltext) !important;
}
body.light .small-note {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.92),
    rgba(238, 242, 255, 0.92)
  ) !important;
  border: 1px solid var(--lline) !important;
  box-shadow: 0 16px 38px rgba(61, 75, 112, 0.08) !important;
}
body.light .hero-label,
body.light .section-label {
  color: #925308 !important;
  background: rgba(255, 247, 227, 0.94) !important;
  border-color: rgba(184, 106, 8, 0.24) !important;
}
body.light .hero-stats,
body.light .stat {
  border-color: var(--lline) !important;
}
body.light .stat-number {
  color: var(--link) !important;
}
body.light .stat-label {
  color: var(--lmuted) !important;
}
body.light .btn-secondary {
  color: #172033 !important;
  background: #fff !important;
  border-color: rgba(51, 65, 85, 0.18) !important;
}
body.light .btn-secondary:hover {
  color: #3048b7 !important;
  background: #f4f6ff !important;
  border-color: rgba(79, 110, 247, 0.34) !important;
}
body.light .portrait-caption {
  color: #172033 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(51, 65, 85, 0.14) !important;
  box-shadow: 0 14px 35px rgba(54, 69, 108, 0.13) !important;
}
body.light .portrait-caption strong {
  color: #111827 !important;
}
body.light .portrait-caption span {
  color: #5b6880 !important;
}
body.light
  :is(
    .highlight-card,
    .skill-card,
    .project-card,
    .experience-card,
    .education-item,
    .cert-item,
    .form-card,
    .quick-contact-shell,
    .quick-contact-card,
    .game-shell,
    .memory-shell
  ) {
  color: var(--link) !important;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(242, 246, 255, 0.96)
  ) !important;
  border-color: rgba(55, 74, 117, 0.14) !important;
  box-shadow:
    0 18px 48px rgba(62, 78, 117, 0.1),
    inset 0 1px #fff !important;
}
body.light
  :is(
    .highlight-card,
    .skill-card,
    .project-card,
    .experience-card,
    .education-item,
    .cert-item
  ):hover {
  border-color: rgba(79, 110, 247, 0.36) !important;
  box-shadow: 0 22px 55px rgba(74, 87, 130, 0.15) !important;
}
body.light
  :is(
    .highlight-card h3,
    .skill-card h3,
    .project-card h3,
    .experience-card h3,
    .education-item h3,
    .cert-content strong,
    .quick-contact-heading h3
  ) {
  color: #162033 !important;
}
body.light
  :is(
    .highlight-card p,
    .project-card ul,
    .project-card li,
    .experience-card p,
    .experience-card li,
    .cert-content,
    .education-meta time
  ) {
  color: #536178 !important;
}
body.light .highlight-card h3 i,
body.light .skill-card h3 i {
  color: #8a5509 !important;
}
body.light .skill-card li,
body.light .skill-name,
body.light .experience-tags span,
body.light .education-result b,
body.light .badges span {
  color: #344157 !important;
  background: rgba(238, 242, 250, 0.96) !important;
  border-color: rgba(51, 65, 85, 0.13) !important;
}
body.light .project-number {
  color: #68758d !important;
}
body.light .project-tech,
body.light .project-link {
  color: #3955d4 !important;
}
body.light .project-card li::before {
  color: #5a6ff0 !important;
}
body.light .experience-type,
body.light .experience-date {
  color: #3d55c7 !important;
  background: #edf1ff !important;
  border-color: rgba(79, 110, 247, 0.18) !important;
}
body.light .experience-company {
  color: #526178 !important;
}
body.light .experience-logo {
  background: #fff !important;
  border-color: var(--lline) !important;
}
body.light .education-timeline-v2::before {
  opacity: 0.78 !important;
}
body.light .education-timeline-v2 .education-item {
  color: #172033 !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--edu-accent) 6%, white),
    #f8faff
  ) !important;
  border-color: color-mix(in srgb, var(--edu-accent) 25%, #dce2ef) !important;
  box-shadow:
    0 18px 48px rgba(57, 72, 108, 0.1),
    inset 0 1px #fff !important;
}
body.light .education-timeline-v2 .education-item::before {
  background: #fff !important;
  color: color-mix(in srgb, var(--edu-accent) 78%, #1e293b) !important;
  box-shadow:
    0 0 0 7px #f7f8fc,
    0 10px 30px color-mix(in srgb, var(--edu-accent) 18%, transparent) !important;
}
body.light .education-icon {
  background: color-mix(in srgb, var(--edu-accent) 10%, white) !important;
  border-color: color-mix(in srgb, var(--edu-accent) 25%, #d9dfec) !important;
}
body.light .education-timeline-v2 h3,
body.light .education-timeline-v2 h3 span {
  color: #172033 !important;
}
body.light .education-timeline-v2 .education-school {
  color: #334155 !important;
}
body.light .education-school span,
body.light .education-meta time {
  color: #65738b !important;
}
body.light .education-status {
  background: color-mix(in srgb, var(--edu-accent) 9%, white) !important;
}
body.light .cert-item > i {
  color: #8057d7 !important;
}
body.light .form-group label {
  color: #3f4c62 !important;
}
body.light .form-group input,
body.light .form-group textarea,
body.light .ai-input {
  color: #172033 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(51, 65, 85, 0.17) !important;
}
body.light .form-group input::placeholder,
body.light .form-group textarea::placeholder,
body.light .ai-input::placeholder {
  color: #8792a6 !important;
  opacity: 1;
}
body.light .status {
  color: #526079 !important;
  background: #eef2f8 !important;
  border-color: var(--lline) !important;
}
body.light footer,
body.light footer#contact {
  color: #172033 !important;
  background: linear-gradient(180deg, #eaf0fb 0%, #f7f8fc 100%) !important;
  border-top-color: rgba(55, 72, 112, 0.13) !important;
}
body.light .footer-content {
  color: #172033 !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(55, 72, 112, 0.14) !important;
  box-shadow: 0 22px 60px rgba(64, 78, 116, 0.12) !important;
}
body.light .footer-content p {
  color: #536178 !important;
}
body.light .social-link {
  color: #273247 !important;
  background: #fff !important;
  border-color: rgba(43, 59, 94, 0.14) !important;
}
body.light .backtop {
  color: #fff !important;
  background: linear-gradient(135deg, #4f6ef7, #7958e8) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 32px rgba(79, 110, 247, 0.25) !important;
}
body.light .modal-card {
  color: #172033 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: var(--lline) !important;
  box-shadow: 0 30px 90px rgba(55, 68, 103, 0.22) !important;
}
body.light .modal-top {
  border-color: var(--lline) !important;
}
body.light .modal-close {
  color: #172033 !important;
  background: #eef2f8 !important;
}
body.light .modal-info p {
  color: #526178 !important;
}
body.light .ai-panel {
  color: #172033 !important;
  background: #fff !important;
  border-color: rgba(51, 65, 85, 0.15) !important;
  box-shadow: 0 30px 90px rgba(52, 65, 100, 0.22) !important;
}
body.light .ai-head,
body.light .ai-form {
  border-color: var(--lline) !important;
}
body.light .ai-head span {
  color: #64748b !important;
}
body.light .ai-close {
  color: #172033 !important;
  background: #eef2f8 !important;
}
body.light .ai-messages {
  background: #f5f7fc !important;
}
body.light .ai-msg.bot {
  color: #243047 !important;
  background: #fff !important;
  border-color: rgba(51, 65, 85, 0.13) !important;
}
body.light .ai-msg.user {
  color: #fff !important;
  background: #4f6ef7 !important;
}
body.light .ai-send {
  color: #fff !important;
  background: #4f6ef7 !important;
}
body.light .contact-rail-label {
  color: #536178 !important;
}
body.light .rail-link::after {
  color: #172033 !important;
  background: #fff !important;
  border-color: var(--lline) !important;
  box-shadow: 0 10px 30px rgba(54, 69, 106, 0.17) !important;
}
body.light .mobile-cta {
  background: rgba(255, 255, 255, 0.95) !important;
  border-top-color: var(--lline) !important;
  box-shadow: 0 -14px 38px rgba(55, 70, 106, 0.12) !important;
}
body.light .mobile-cta a {
  color: #172033 !important;
  background: #f2f5fb !important;
  border-color: var(--lline) !important;
}
@media (max-width: 900px) {
  body.light .nav-links {
    color: #172033 !important;
    background: rgba(252, 253, 255, 0.99) !important;
    border-color: rgba(38, 55, 91, 0.13) !important;
    box-shadow: 18px 0 55px rgba(58, 72, 108, 0.18) !important;
  }
  body.light .nav-links a {
    color: #46536a !important;
  }
  body.light .education-timeline-v2 .education-item::before {
    box-shadow: 0 0 0 5px #f7f8fc !important;
  }
}
/* Light mode is the primary presentation: crisp contrast across every section. */
html:has(body.light) {
  background: #f4f6f9 !important;
  color-scheme: light;
}
body.light {
  --lbg: #f4f6f9;
  --ls: #fff;
  --lsoft: #edf1f5;
  --link: #111315;
  --ltext: #303840;
  --lmuted: #59636d;
  --lline: rgba(17, 24, 39, 0.17);
  --lblue: #364152;
}
body.light .hero-content h1 .gradient-text {
  display: block;
  color: #111315 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #111315 !important;
  text-shadow: none !important;
  transition:
    color 0.28s ease,
    letter-spacing 0.28s ease !important;
}
body.light .hero-content h1 .gradient-text:hover {
  color: #626971 !important;
  -webkit-text-fill-color: #626971 !important;
  letter-spacing: -0.068em !important;
}
body.light
  :is(
    .section-header p,
    .hero-content p,
    .about-text p,
    .highlight-card p,
    .skill-card p,
    .project-card p,
    .project-card li,
    .experience-card p,
    .experience-card li,
    .education-school,
    .education-year,
    .cert-content,
    .small-note
  ) {
  color: #3f4953 !important;
}
body.light
  :is(
    .highlight-card,
    .skill-card,
    .project-card,
    .experience-card,
    .education-item,
    .cert-item,
    .form-card,
    .projects-toolbar,
    .opportunity-card,
    .quick-contact-shell,
    .quick-contact-card,
    .game-shell,
    .memory-shell
  ) {
  background: linear-gradient(145deg, #fff, #f5f7fa) !important;
  border-color: rgba(17, 24, 39, 0.18) !important;
  box-shadow:
    0 16px 42px rgba(31, 41, 55, 0.1),
    inset 0 1px #fff !important;
}
body.light
  :is(.project-card, .experience-card, .education-item, .cert-item)
  :is(
    p,
    li,
    span:not(.project-number):not(.experience-type):not(.experience-date)
  ) {
  opacity: 1 !important;
}
body.light
  :is(
    .skill-name,
    .experience-tags span,
    .education-result b,
    .badges span,
    .chip
  ) {
  color: #28323c !important;
  background: #e8edf2 !important;
  border-color: rgba(17, 24, 39, 0.16) !important;
}
body.light
  :is(.project-tech, .project-link, .experience-type, .experience-date) {
  color: #263b63 !important;
}
body.light
  :is(.searchbox input, .form-group input, .form-group textarea, .ai-input) {
  color: #111315 !important;
  background: #fff !important;
  border-color: rgba(17, 24, 39, 0.2) !important;
}
body.light
  :is(
    .searchbox input,
    .form-group input,
    .form-group textarea,
    .ai-input
  )::placeholder {
  color: #68727d !important;
  opacity: 1 !important;
}
body.light .section-video-bg video {
  opacity: 0.4 !important;
  filter: saturate(0.72) contrast(1.08) brightness(1.08) !important;
}
body.light .section-video-shade {
  background: linear-gradient(
    180deg,
    rgba(244, 246, 249, 0.63),
    rgba(244, 246, 249, 0.78)
  ) !important;
}
body.light #projects .section-video-bg video {
  opacity: 0.5 !important;
  filter: saturate(0.78) contrast(1.08) brightness(1.03) !important;
}
body.light #projects .section-video-shade {
  background:
    linear-gradient(
      115deg,
      rgba(244, 246, 249, 0.64),
      rgba(244, 246, 249, 0.46) 52%,
      rgba(244, 246, 249, 0.7)
    ),
    linear-gradient(
      180deg,
      rgba(244, 246, 249, 0.38),
      rgba(244, 246, 249, 0.72)
    ) !important;
}
body.light
  :is(
    .ai-panel,
    .ai-messages,
    .ai-msg.bot,
    .chat-history-sidebar,
    .chat-conversation
  ) {
  color: #17202a !important;
}
body.light .contact-rail-label {
  color: #303943 !important;
}
@media (max-width: 900px) {
  body.light .hero-content h1 .gradient-text:hover {
    letter-spacing: -0.06em !important;
  }
  body.light .section-video-bg video {
    opacity: 0.26 !important;
  }
  body.light #projects .section-video-bg video {
    opacity: 0.36 !important;
  }
}
/* Final light-mode authority: monochrome, professional, and high contrast. */
body.light {
  --professional-ink: #14171a;
  --professional-slate: #4b5560;
  --professional-soft: #e8ecef;
  --professional-accent: #b7772b;
}
body.light nav,
body.light nav.scrolled {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(20, 23, 26, 0.16) !important;
  box-shadow: 0 16px 42px rgba(20, 23, 26, 0.14) !important;
}
body.light nav::before {
  height: 2px !important;
  background: #343a40 !important;
  background-size: auto !important;
  animation: none !important;
  box-shadow: none !important;
}
body.light nav::after {
  background: none !important;
}
body.light .logo {
  color: var(--professional-ink) !important;
  background: #eef1f3 !important;
  border-color: #d2d8dd !important;
}
body.light .logo::after {
  background: #68727b !important;
  box-shadow: none !important;
  animation: none !important;
}
body.light .nav-links a {
  color: #4b5661 !important;
}
body.light .nav-links a:hover,
body.light .nav-links a.active {
  color: #111315 !important;
  background: #e8ecef !important;
  border-color: #cdd3d8 !important;
  box-shadow: none !important;
}
body.light .nav-links a.active::before {
  background: #515961 !important;
  box-shadow: none !important;
}
body.light .showcase-progress {
  background: #343a40 !important;
  box-shadow: none !important;
}
body.light .showcase-ambient {
  background: #f4f6f8 !important;
}
body.light .showcase-ambient::before,
body.light .showcase-ambient::after {
  background: #cdd3d8 !important;
  opacity: 0.16 !important;
  animation: none !important;
}
body.light::before {
  background:
    radial-gradient(
      circle at 82% 16%,
      rgba(73, 82, 91, 0.08),
      transparent 34rem
    ),
    #f4f6f8 !important;
}
body.light .hero::before {
  border-color: rgba(43, 50, 57, 0.12) !important;
  box-shadow:
    0 0 0 70px rgba(43, 50, 57, 0.018),
    0 0 0 140px rgba(43, 50, 57, 0.012) !important;
  animation: none !important;
}
body.light .stat-number,
body.light .stat:nth-child(n) .stat-number {
  color: #20252a !important;
  background: none !important;
  -webkit-text-fill-color: #20252a !important;
}
body.light .btn-primary {
  color: #fff !important;
  background: #20252a !important;
  border: 1px solid #20252a !important;
  box-shadow: 0 12px 28px rgba(32, 37, 42, 0.18) !important;
}
body.light .btn-primary:hover {
  background: #555e66 !important;
  border-color: #555e66 !important;
}
body.light .btn-warning,
body.light .opportunity-action,
body.light .hire-me-fixed {
  color: #17191b !important;
  background: #d6a25f !important;
  border-color: #c68e46 !important;
  box-shadow: 0 12px 28px rgba(128, 84, 31, 0.16) !important;
}
body.light .btn::after {
  display: none !important;
  animation: none !important;
}
body.light .profile-card::before {
  background: #8b949c !important;
  opacity: 0.18 !important;
  filter: blur(9px) !important;
  animation: none !important;
}
body.light .showcase-ribbon {
  background: #edf0f2 !important;
  border-color: #d5dade !important;
  animation: none !important;
}
body.light .showcase-ribbon::before {
  background: linear-gradient(90deg, #edf0f2, transparent) !important;
}
body.light .showcase-ribbon::after {
  background: linear-gradient(-90deg, #edf0f2, transparent) !important;
}
body.light .showcase-ribbon span {
  color: #323a42 !important;
  background: #f9fafb !important;
  border-color: #cbd2d8 !important;
  box-shadow: none !important;
}
body.light .showcase-ribbon span::before {
  background: #69737c !important;
  box-shadow: none !important;
}
body.light .highlight-icon,
body.light .skill-icon,
body.light .highlight-card:nth-child(n) .highlight-icon,
body.light .skill-card:nth-child(n) .skill-icon {
  color: #303840 !important;
  background: #e5e9ec !important;
  border-color: #cbd2d8 !important;
}
body.light .project-card::before {
  background: #59626b !important;
}
body.light .timeline::before,
body.light .education-timeline-v2::before {
  background: #78828b !important;
  box-shadow: none !important;
}
body.light .timeline-dot {
  background: #fff !important;
  border-color: #59626b !important;
  box-shadow: 0 0 0 5px #dfe3e6 !important;
}
body.light .backtop {
  background: #4f5860 !important;
  box-shadow: 0 12px 26px rgba(38, 44, 49, 0.2) !important;
}
body.light footer#contact::before,
body.light footer::before {
  background: #69727a !important;
  box-shadow: none !important;
}
body.light :is(#about, #projects) {
  background: #eef1f3 !important;
}
body.light :is(#about, #projects) .section-video-bg video {
  opacity: 0.25 !important;
  filter: grayscale(0.2) saturate(0.55) contrast(1.02) brightness(1.14) !important;
}
body.light :is(#about, #projects) .section-video-shade {
  background: rgba(244, 246, 248, 0.78) !important;
}
body.light :is(#about, #projects) :is(.section-header h2, .section-header p) {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
body.light #about .section-header p,
body.light #projects .section-header p {
  color: #303941 !important;
}
body.light .opportunity-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: #cbd2d8 !important;
}
body.light .opportunity-card::before {
  background: radial-gradient(
    circle,
    rgba(91, 100, 109, 0.1),
    transparent 68%
  ) !important;
}
body.light .opportunity-kicker {
  color: #46515a !important;
}
body.light .opportunity-status {
  color: #287449 !important;
}
body.light .cert-item > i,
body.light .cert-icon {
  color: #695c4e !important;
  filter: none !important;
}
@media (max-width: 900px) {
  body.light :is(#about, #projects) .section-video-bg video {
    opacity: 0.18 !important;
  }
  body.light :is(#about, #projects) .section-video-shade {
    background: rgba(244, 246, 248, 0.86) !important;
  }
}
/* Smooth native page navigation with fixed-header clearance. */
html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 112px;
}
body {
  -webkit-overflow-scrolling: touch;
}
section[id],
footer[id] {
  scroll-margin-top: 112px;
}
@media (max-width: 900px) {
  html {
    scroll-padding-top: 88px;
  }
  section[id],
  footer[id] {
    scroll-margin-top: 88px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}
/* Light-mode games: visible, tactile, and aligned with the professional palette. */
body.light #mini-game {
  background: #f1f3f5 !important;
}
body.light .game-shell,
body.light .memory-shell {
  color: #171a1d !important;
  background: #fff !important;
  border: 1px solid #cbd1d6 !important;
  box-shadow: 0 18px 45px rgba(26, 32, 37, 0.1) !important;
}
body.light .game-info h3,
body.light .memory-head h3 {
  color: #171a1d !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #171a1d !important;
  text-shadow: none !important;
}
body.light .game-info p,
body.light .memory-head p,
body.light .memory-message {
  color: #4c5660 !important;
}
body.light .game-kicker {
  color: #a9621f !important;
}
body.light .game-stat,
body.light .memory-pill {
  background: #eef1f3 !important;
  border-color: #cdd3d8 !important;
  box-shadow: none !important;
}
body.light .game-stat strong,
body.light .memory-pill strong {
  color: #171a1d !important;
}
body.light .game-stat span,
body.light .memory-pill span {
  color: #596570 !important;
}
body.light .game-start {
  color: #17191b !important;
  background: #d6a25f !important;
  box-shadow: 0 10px 24px rgba(128, 84, 31, 0.16) !important;
}
body.light .game-arena {
  border-color: #58616a !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    #242a2f !important;
  background-size: 30px 30px !important;
}
body.light .game-arena::before {
  display: none !important;
  animation: none !important;
}
body.light .game-arena::after {
  color: rgba(214, 162, 95, 0.58) !important;
}
body.light .game-ready {
  color: #d8dde1 !important;
}
body.light .game-ready i {
  color: #d6a25f !important;
  animation: none !important;
  filter: none !important;
}
body.light .game-result {
  background: rgba(29, 34, 39, 0.9) !important;
}
body.light .game-result-card h4 {
  color: #fff !important;
}
body.light .game-result-card p {
  color: #d4d9dd !important;
}
body.light .memory-shell::before {
  display: none !important;
  animation: none !important;
}
body.light .memory-icon {
  color: #fff !important;
  background: #59626a !important;
  border-color: #59626a !important;
  box-shadow: 0 10px 24px rgba(36, 42, 47, 0.18) !important;
}
body.light .memory-head {
  border-color: #d5dade !important;
}
body.light .memory-back {
  background: linear-gradient(145deg, #3e464d, #292f34) !important;
  border-color: #59636b !important;
  box-shadow: 0 9px 20px rgba(25, 30, 34, 0.14) !important;
}
body.light .memory-back::before {
  color: #e4c08f !important;
  text-shadow: none !important;
}
body.light .memory-back::after {
  background: none !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
}
body.light .memory-card:hover .memory-back {
  filter: brightness(1.08) !important;
  border-color: #b77a35 !important;
}
body.light .memory-front {
  color: #fff !important;
  background: #353c42 !important;
  border-color: #59636b !important;
}
body.light .memory-front span {
  color: #f2f4f5 !important;
}
body.light .memory-progress {
  background: #dfe3e6 !important;
  box-shadow: inset 0 1px 3px rgba(20, 25, 29, 0.12) !important;
}
body.light .memory-progress span {
  background: #b87830 !important;
  box-shadow: none !important;
}
body.light .memory-reset {
  color: #20252a !important;
  background: #e8ecef !important;
  border-color: #c5ccd1 !important;
  box-shadow: none !important;
}
body.light .memory-reset:hover {
  color: #fff !important;
  background: #59626a !important;
  box-shadow: none !important;
}
body.light .memory-reset:disabled {
  color: #7a838b !important;
  background: #edf0f2 !important;
  border-color: #d5dade !important;
  opacity: 1 !important;
}

/* Compact, balanced footer layout on desktop and mobile. */
footer#contact {
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(3.5rem, 5vw, 5rem) clamp(1.25rem, 6vw, 6rem)
    calc(2rem + var(--safe-bottom)) !important;
}
footer#contact::after {
  display: none !important;
}
.footer-content {
  width: min(100%, 1280px) !important;
  max-width: 1280px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr) !important;
  align-items: center !important;
  column-gap: clamp(3rem, 7vw, 7rem) !important;
  row-gap: clamp(2rem, 4vw, 3rem) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.footer-title {
  max-width: 760px !important;
  margin: 0 0 1rem !important;
  font-size: clamp(2.8rem, 4.8vw, 4.9rem) !important;
  line-height: 0.98 !important;
}
.footer-brand > p {
  max-width: 620px !important;
  margin: 0 !important;
}
.footer-connect {
  align-self: center !important;
  min-width: 0 !important;
}
.footer-email {
  width: 100% !important;
}
.footer-content .social-links {
  justify-content: flex-start !important;
  margin: 0 !important;
}
.footer-meta {
  grid-column: 1/-1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
  margin-top: 0 !important;
  padding-top: 1.2rem !important;
}
.footer-meta p {
  margin: 0 !important;
}
body.light footer#contact {
  background: #eef1f3 !important;
}
body.light footer#contact::before {
  background: #69727a !important;
}
body.light .footer-title span {
  color: #596f5d !important;
}
body.light .footer-email {
  color: #20252a !important;
  border-color: #c6ccd1 !important;
}
body.light .footer-brand > p,
body.light .footer-connect > p,
body.light .footer-meta p {
  color: #505b64 !important;
}
body.light .footer-content .social-link {
  color: #252a2f !important;
  background: #fff !important;
  border-color: #c8ced3 !important;
}
body.light .footer-content .social-link:hover {
  color: #fff !important;
  background: #59626a !important;
  border-color: #59626a !important;
  transform: translateY(-3px) !important;
}
@media (max-width: 760px) {
  footer#contact {
    padding: 3rem 1rem calc(5.5rem + var(--safe-bottom)) !important;
  }
  .footer-content {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .footer-title {
    font-size: clamp(2.55rem, 12vw, 3.8rem) !important;
  }
  .footer-connect {
    align-self: auto !important;
  }
  .footer-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.4rem !important;
    padding-top: 1rem !important;
  }
  .footer-email {
    font-size: 0.82rem !important;
  }
  .memory-head {
    align-items: flex-start !important;
  }
}
/* Full-width footer surface: no inset or half-width card appearance. */
footer#contact {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.footer-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
body.light footer#contact,
body.light .footer-content {
  background: #fff !important;
}
body.light footer#contact {
  border-top: 1px solid #cbd1d6 !important;
}
footer#contact::before {
  left: 0 !important;
  right: 0 !important;
}
@media (max-width: 760px) {
  .footer-content {
    width: 100% !important;
    max-width: none !important;
  }
}
.hero-stats .stat-number {
  min-width: 3ch;
  font-variant-numeric: tabular-nums;
}