:root {
    /* Colors */
    --midnight:      #131B33; /* primary background — deep indigo night sky */
    --midnight-alt:  #1B2747; /* raised surface on midnight (cards, tiles) */
    --lapis:         #2C5697; /* structural blue — borders, secondary UI */
    --sky:           #7FA8D9; /* light blue — hints, inactive path, links */
    --gold:          #D4A828; /* primary gold-leaf accent — the "found path" color */
    --gold-light:    #F0D889; /* highlight gold — glow, active tile */
    --gold-deep:     #8A6A16; /* shadow gold — pressed states, borders on gold */
    --parchment:     #F3E9D2; /* light surface / text-on-dark */
    --ink:           #1A2238; /* dark text on parchment/light surfaces */
    --rubric:        #B0483C; /* brick red */
    --rubric-light:  #E3897C; /* light brick red */

    /* Fonts */
    --font-display: 'Fraunces', ui-serif, Georgia, serif;
    --font-body:    'Manrope', ui-sans-serif, system-ui, sans-serif;
}

@import url('fonts.css');

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--midnight);
  font-family: var(--font-body);
  color: var(--sky);
}

h1 {
  font-family: var(--font-display);
  font-style: italic;
  text-align: center;

  color: var(--parchment);

  strong {
    font-style: normal;
  }
}

.text-center { text-align: center }
.text-gold { color: var(--gold) }

.mb-1 { margin-bottom: 1rem }

.btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 13px 26px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--midnight), 0 0 0 6px var(--gold-light);
}

.btn--primary {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold-deep);
  box-shadow: 0 3px 0 var(--gold-deep), 0 6px 14px rgba(212,168,40,0.25);
}
.btn--primary:hover { background: var(--gold-light); }
.btn--primary:active {
  background: var(--gold);
  box-shadow: 0 1px 0 var(--gold-deep), 0 2px 6px rgba(212,168,40,0.2);
}

.btn--secondary {
  background: transparent;
  color: var(--sky);
  border-color: var(--lapis);
}
.btn--secondary:hover {
  background: rgba(127,168,217,0.08);
  color: var(--parchment);
  border-color: var(--sky);
}
.btn--secondary:active { background: rgba(127,168,217,0.14); }

.btn:disabled {
  background: var(--midnight-alt);
  color: rgba(243,233,210,0.35);
  border-color: rgba(127,168,217,0.15);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

#social-content {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  align-items: center;

  .btn {
    margin-top: 1rem;
  }
}

#board {
  width: 100%;
  position: relative;
  aspect-ratio: 1 / 1;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--column-count), 1fr);
  grid-template-rows: repeat(var(--row-count), 1fr);
  width: 100%;
}

.path {
  --color: var(--gold-light);

  color: var(--color);
  filter: drop-shadow(0 0 0.03px);

  path {
    fill: none;
    stroke: var(--color);
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  circle {
    fill: var(--color);
  }
}

.tile {
  --background: var(--midnight);
  --border: var(--lapis);
  --border-size: 1;
  --text: var(--sky);

  aspect-ratio: 1 / 1;
  display: block;
  position: relative;
  cursor: pointer;

  svg {
    display: block;
    width: 100%;
    height: 100%;

    path {
      fill: var(--background);
      stroke: var(--border);
      stroke-width: var(--border-size);
      vector-effect: non-scaling-stroke;
    }
  }

  div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text);
  }
}

.tile.tile--correct {
  --background: var(--gold);
  --border: var(--gold-light);
  --border-size: 5;
  --text: var(--midnight);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}
.tile.tile--invalid { animation: shake 0.32s ease }

@keyframes shake-flash {
  0%, 100% { transform: translateX(0); --background: var(--midnight); --border: var(--lapis); }
  15%      { transform: translateX(-5px); --background: var(--flash-background); --border: var(--flash-border); }
  30%      { transform: translateX(5px); }
  45%      { transform: translateX(-4px); }
  60%      { transform: translateX(4px); --background: var(--flash-background); }
  100%     { transform: translateX(0); --background: var(--midnight); --border: var(--lapis); }
}
.tile.tile--wrong {
  --flash-background: var(--rubric);
  --flash-border: var(--rubric-light);
  animation: shake-flash 0.6s ease
}
.tile.tile--hint {
  --flash-background: var(--lapis);
  --flash-border: var(--sky);
  animation: shake-flash 0.6s ease
}

@media (min-width: 600px) {
  #board { gap: 0.5rem }
}