/* ImploseLabs skin override for the 4028 fork.
   Loaded AFTER style/main.css so these rules win the cascade.
   Intent: dark slate field, cyan-violet bloom on accents, painterly contrast.
   Tile colour escalation is intentionally untouched — readability wins. */

html, body {
  background: radial-gradient(ellipse at 50% 0%, #11172a 0%, #060810 70%) fixed;
  color: #e6e8f0;
  font-family: "Clear Sans", "Helvetica Neue", system-ui, sans-serif;
}

h1.title {
  color: #e6e8f0;
  text-shadow: 0 0 28px rgba(108, 207, 246, 0.18);
  letter-spacing: -2px;
}

.game-intro {
  color: rgba(230, 232, 240, 0.78);
}

.game-intro strong {
  color: #6ccff6;
  font-weight: 600;
}

.score-container, .best-container {
  background: #1a2236;
  color: #e6e8f0;
  box-shadow: 0 0 0 1px rgba(108, 207, 246, 0.18);
}

.score-container:after { content: "score"; color: rgba(108, 207, 246, 0.7); }
.best-container:after { content: "best"; color: rgba(196, 132, 252, 0.7); }

a.restart-button,
a.keep-playing-button,
a.retry-button {
  background: linear-gradient(180deg, #6ccff6 0%, #5ab4dd 100%);
  color: #060810;
  box-shadow: 0 0 18px rgba(108, 207, 246, 0.25);
}

a.restart-button:hover,
a.keep-playing-button:hover,
a.retry-button:hover {
  filter: brightness(1.1);
}

.grid-container {
  background: #11172a;
  box-shadow: inset 0 0 0 1px rgba(108, 207, 246, 0.10);
}

.grid-cell {
  background: rgba(108, 207, 246, 0.06);
}

.game-explanation,
.game-explanation a,
.il-credit,
.il-credit a {
  color: rgba(230, 232, 240, 0.55);
}

.il-credit a {
  color: rgba(108, 207, 246, 0.85);
  text-decoration: underline;
  text-decoration-color: rgba(108, 207, 246, 0.35);
  text-underline-offset: 3px;
}

.il-credit a:hover { color: #6ccff6; }

hr {
  border: none;
  border-top: 1px solid rgba(108, 207, 246, 0.12);
  margin: 24px 0;
}

.game-message {
  background: rgba(11, 14, 26, 0.92);
  color: #e6e8f0;
}

.game-message p {
  color: #e6e8f0;
}