@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap");

:root {
  --fun-bg: #0d1422;
  --fun-bg-soft: #152033;
  --fun-bg-pattern: rgba(132, 151, 181, 0.08);
  --fun-surface: rgba(21, 30, 46, 0.92);
  --fun-surface-soft: rgba(25, 37, 56, 0.9);
  --fun-border: #324563;
  --fun-border-strong: #4d6790;
  --fun-shadow: 0 18px 34px rgba(2, 7, 19, 0.46);
  --fun-shadow-hover: 0 24px 44px rgba(6, 13, 33, 0.58);
  --fun-title: #f2f6ff;
  --fun-body: #d9e3f5;
  --fun-muted: #aab8d1;
  --fun-link: #7bb6ff;
  --fun-link-hover: #c5dcff;
  --fun-cta-start: #4f8ff7;
  --fun-cta-mid: #6a9df6;
  --fun-cta-end: #8db0f2;
  --fun-cta-text: #f8fbff;
  --fun-accent-soft: rgba(104, 143, 205, 0.18);
  --fun-radius-lg: 20px;
  --fun-radius-md: 14px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0 !important;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  font-family: "Source Sans 3", "Segoe UI", sans-serif !important;
  color: var(--fun-body) !important;
  font-size: 17px !important;
  line-height: 1.72 !important;
  background:
    radial-gradient(circle at 10% -14%, rgba(115, 158, 221, 0.2), transparent 36%),
    radial-gradient(circle at 88% -10%, rgba(138, 168, 215, 0.16), transparent 38%),
    radial-gradient(circle at 65% 110%, rgba(111, 132, 168, 0.15), transparent 40%),
    linear-gradient(180deg, #0a111d 0%, var(--fun-bg) 46%, var(--fun-bg-soft) 100%) !important;
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(transparent 0 95%, var(--fun-bg-pattern) 95% 100%),
    linear-gradient(90deg, transparent 0 95%, var(--fun-bg-pattern) 95% 100%);
  background-size: 40px 40px;
  opacity: 0.32;
}

.site-shell,
.shell,
.container,
main,
article,
section[aria-label="main content"] {
  width: min(1280px, calc(100% - 2.2rem));
  margin-inline: auto !important;
}

.site-shell,
.shell,
.container,
main {
  padding-inline: 0 !important;
}

header,
.header,
.main-nav,
.topbar,
.hero,
.hero-panel,
.intro-content,
.featured-section,
.category-links,
.content,
.content-section,
.faq-section,
.tools-card,
.article-card,
.blog-card,
.card,
.panel,
.info-panel,
.related-games,
.related-tools,
.stats-panel,
.faq-item,
.type-card,
.update-card,
.insight,
.search-panel,
.portal-card,
.game-card,
.content-card,
.benefits-list,
.cta-section,
.scorecard,
.dice-container {
  background: var(--fun-surface) !important;
  border: 1px solid var(--fun-border) !important;
  border-radius: var(--fun-radius-lg) !important;
  box-shadow: var(--fun-shadow) !important;
}

header,
.header {
  width: min(1280px, calc(100% - 2.2rem));
  margin: 20px auto 18px !important;
  padding: clamp(20px, 3vw, 32px) clamp(16px, 3vw, 30px) !important;
  position: relative;
  overflow: hidden;
}

header::after,
.header::after {
  content: "";
  position: absolute;
  inset: auto -80px -96px auto;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(109, 152, 214, 0.28), transparent 72%);
  pointer-events: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.featured-title,
.game-title,
.card-title,
.section-head h2 {
  margin-top: 0;
  color: var(--fun-title) !important;
  line-height: 1.28 !important;
  letter-spacing: 0.02em;
  font-family: "Sora", "Source Sans 3", sans-serif !important;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 4.8vw, 3.25rem) !important;
}

h2 {
  font-size: clamp(1.45rem, 3vw, 2rem) !important;
}

h3 {
  font-size: clamp(1.08rem, 2vw, 1.32rem) !important;
}

p,
li,
td,
th,
label,
.subtitle,
.description,
.lead,
.info p,
.article-card p,
.game-card p,
.content-card p,
.intro,
.intro p,
.benefits-list li,
.faq-item p,
.type-card p {
  color: var(--fun-body) !important;
  line-height: 1.72 !important;
  font-size: 1.01rem !important;
}

small,
.meta,
.muted,
.tagline,
.breadcrumb,
.breadcrumbs,
.section-head p,
.update-card small {
  color: var(--fun-muted) !important;
}

a {
  color: var(--fun-link) !important;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 0.08em;
}

a:hover {
  color: var(--fun-link-hover) !important;
}

.games-grid,
.game-grid,
.blog-grid,
.cards-grid,
.related-grid,
.portal-grid,
.update-grid,
.list {
  gap: 16px !important;
}

.game-card,
.card,
.article-card,
.category-card,
.feature-card,
.blog-post,
.portal-card,
.type-card,
.update-card,
.list .card {
  background:
    linear-gradient(162deg, rgba(15, 27, 52, 0.95), rgba(20, 36, 66, 0.9)) !important;
  border: 1px solid var(--fun-border) !important;
  border-radius: var(--fun-radius-lg) !important;
  box-shadow: var(--fun-shadow) !important;
  transition: transform 190ms ease-out, box-shadow 230ms ease-out, border-color 220ms ease-out !important;
}

.game-card:hover,
.card:hover,
.article-card:hover,
.category-card:hover,
.feature-card:hover,
.blog-post:hover,
.portal-card:hover,
.type-card:hover,
.update-card:hover,
.list .card:hover {
  transform: translateY(-4px);
  border-color: var(--fun-border-strong) !important;
  box-shadow: var(--fun-shadow-hover) !important;
}

.game-thumb,
.thumb {
  width: 100%;
  border-radius: 12px !important;
  border: 1px solid #3f5f95 !important;
  background:
    linear-gradient(150deg, rgba(27, 53, 100, 0.82), rgba(11, 22, 42, 0.95)) !important;
  box-shadow: 0 10px 20px rgba(2, 8, 20, 0.42) !important;
  overflow: hidden;
}

.game-thumb,
.thumb {
  aspect-ratio: 16 / 9;
}

.thumb img,
.game-thumb img,
.thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb-fallback {
  display: grid !important;
  place-items: center;
  font-family: "Sora", "Source Sans 3", sans-serif;
  color: #dbecff;
  font-size: 1.3rem;
}

.game-icon,
.icon-pill,
.label-pill,
.game-tag,
.tag,
.game-badge {
  border-radius: 999px !important;
  border: 1px solid #42669f !important;
  background: linear-gradient(132deg, rgba(255, 122, 24, 0.22) 0%, rgba(38, 198, 255, 0.2) 100%) !important;
  color: #e9f6ff !important;
  font-weight: 700 !important;
}

button,
.btn,
a.btn,
.button,
.play-button,
.cta-button,
input[type="submit"],
input[type="button"],
.view-all-btn,
.read-more,
.hero-btn,
.search-btn,
.share-buttons a,
.share-buttons button,
#funora-feedback-widget button,
#funora-fb-btn,
.fb-send {
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(120deg, var(--fun-cta-start) 0%, var(--fun-cta-mid) 58%, var(--fun-cta-end) 100%) !important;
  color: var(--fun-cta-text) !important;
  font-family: "Source Sans 3", "Segoe UI", sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.96rem !important;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 20px rgba(255, 77, 79, 0.24) !important;
  transition: transform 180ms ease-out, filter 210ms ease-out, box-shadow 210ms ease-out !important;
  cursor: pointer;
}

button:hover,
.btn:hover,
a.btn:hover,
.button:hover,
.play-button:hover,
.cta-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.view-all-btn:hover,
.read-more:hover,
.hero-btn:hover,
.search-btn:hover,
.share-buttons a:hover,
.share-buttons button:hover,
#funora-feedback-widget button:hover,
#funora-fb-btn:hover,
.fb-send:hover {
  transform: translateY(-2px);
  filter: brightness(1.04) saturate(1.05);
}

button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(38, 198, 255, 0.48);
  outline-offset: 2px;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid #365486 !important;
  border-radius: 12px !important;
  background: rgba(8, 17, 34, 0.86) !important;
  color: #e7f3ff !important;
  font-family: "Source Sans 3", "Segoe UI", sans-serif !important;
  font-size: 1rem !important;
  padding: 10px 12px;
}

textarea {
  min-height: 120px;
}

input::placeholder,
textarea::placeholder {
  color: #8ca3cb;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #355585;
  background: rgba(10, 18, 34, 0.9);
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid #27436e;
}

th {
  background: rgba(24, 45, 80, 0.9);
  color: #eff8ff !important;
  font-weight: 700;
}

main .game-container,
main .content-section,
main .faq-section,
main .instructions,
main .how-to-play,
main .game-rules,
main .strategy-section,
main .related-games,
main .panel {
  border-radius: 18px !important;
  border: 1px solid #31507f !important;
  box-shadow: var(--fun-shadow) !important;
  background: rgba(13, 24, 45, 0.92) !important;
}

main canvas,
main .board,
main .game-board,
main .grid {
  border-radius: 14px !important;
  border: 1px solid #41659f !important;
  background: rgba(8, 18, 34, 0.94) !important;
}

footer {
  margin-top: 34px !important;
  background: linear-gradient(160deg, rgba(7, 14, 30, 0.98), rgba(13, 24, 44, 0.96)) !important;
  color: #d9e8ff !important;
  border-top: 1px solid rgba(120, 156, 220, 0.4);
}

footer a {
  color: #9be7ff !important;
}

footer a:hover {
  color: #edf9ff !important;
}

.quick-nav,
.signal-strip {
  width: min(1280px, calc(100% - 2.2rem));
  margin: 0 auto 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.quick-nav {
  padding: 10px 12px;
  border: 1px solid var(--fun-border);
  border-radius: 14px;
  background: rgba(10, 20, 38, 0.9);
  box-shadow: var(--fun-shadow);
}

.quick-nav a {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #365686;
  background: rgba(21, 39, 69, 0.92);
}

.signal-strip .chip {
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid #365686;
  background: rgba(16, 31, 58, 0.92);
  color: #d7e9ff;
  font-size: 0.88rem;
  font-weight: 700;
}

/* Kill legacy purple tone on inline styles */
[style*="#667eea"],
[style*="#764ba2"],
[style*="#6b5bff"],
[style*="#7C3AED"] {
  color: var(--fun-link) !important;
}

button[style*="#667eea"],
button[style*="#764ba2"],
a[style*="#667eea"],
a[style*="#764ba2"],
[style*="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"],
[style*="linear-gradient(135deg,#667eea 0%,#764ba2 100%)"],
[style*="linear-gradient(135deg, #667eea, #764ba2)"],
[style*="linear-gradient(135deg,#667eea,#764ba2)"] {
  background: linear-gradient(120deg, var(--fun-cta-start) 0%, var(--fun-cta-mid) 58%, var(--fun-cta-end) 100%) !important;
  color: var(--fun-cta-text) !important;
  border-color: #6c8fcf !important;
}

[style*="border-left: 4px solid #667eea"],
[style*="border-bottom: 3px solid #667eea"],
[style*="border: 2px solid #667eea"],
[style*="border:2px solid #667eea"],
[style*="border: 3px solid #667eea"] {
  border-color: #3f6db6 !important;
}

/* Keep game overlay dark when pages use .game-container outside <main> */
body > .game-container,
body .game-container.active {
  background: rgba(2, 10, 26, 0.9) !important;
}

@media (max-width: 980px) {
  .site-shell,
  .shell,
  .container,
  main,
  article,
  section[aria-label="main content"],
  header,
  .header,
  .quick-nav,
  .signal-strip {
    width: calc(100% - 1.3rem);
  }

  header,
  .header {
    margin-top: 10px !important;
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }

  h1 {
    font-size: clamp(1.82rem, 7.1vw, 2.48rem) !important;
  }

  h2 {
    font-size: clamp(1.28rem, 5.2vw, 1.8rem) !important;
  }

  p,
  li,
  td,
  th,
  .subtitle {
    font-size: 0.98rem !important;
    line-height: 1.7 !important;
  }

  .game-card,
  .card,
  .article-card,
  .content-section,
  .faq-item {
    border-radius: 14px !important;
  }
}

@media (max-width: 640px) {
  .quick-nav {
    gap: 8px;
    padding: 8px 10px;
  }

  .quick-nav a,
  .signal-strip .chip {
    font-size: 0.82rem;
    padding: 6px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}