@import 'fonts.css';

: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 */
    --green:         #A9D428; /* pale green */

    --blue:          hsl(from var(--gold) 216 s l);
    --blue-light:    hsl(from var(--gold-light) 216 s l);

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

* {
  box-sizing: border-box;
}

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

body {
  background: var(--midnight);
  font-family: var(--font-body);
  color: var(--sky);
  padding: 0.5rem;
  max-width: 600px;
  margin: 0 auto;
}

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0;

  h2 { flex-shrink: 0 }

  h3 {
    flex-shrink: 1;
    text-align: center;
  }
}

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

  color: var(--parchment);

  strong {
    font-style: normal;
  }
}

h2 {
  color: var(--parchment);
  text-align: center;
  margin: 0;
}

h3 {
  font-size: 12pt;
  font-weight: normal;
}

a, a:visited {
  color: var(--gold);
}

p {
  color: var(--parchment);
  margin: 0;
}

cite {
  display: block;
  text-align: right;
  font-style: normal;

  &::before {
    content: '—';
    margin-right: 2px;
  }
}

pre {
  margin: 0;
}

.interlude {
  border: 3px solid var(--sky);
  border-width: 3px 0;
  margin: 2rem 0;
  padding: 1rem 0;
}

nav {
  display: flex;
  justify-content: space-around;
  margin-top: 1rem;
}

footer {
  margin-top: 5rem;
}

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

.hidden { visibility: hidden }

.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;
}

.text-center { text-align: center }

#social-content {
  display: flex;
  flex-direction: column;
  margin: 2rem 0;

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

#board {
  touch-action: none;
  user-select: none;
  width: 100%;
  position: relative;
  aspect-ratio: 1 / 1;
}

#solution { z-index: -1 }

.layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 5px;
  bottom: 5px;
}

.grid {
  display: flex;
  flex-wrap: wrap;
}

.path {
  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);
  }
}
.path--progress {
  --color: var(--blue-light);

  transition: stroke 0.5s ease;
}
.path--solution { --color: var(--lapis) }

.tile {
  --resting-background: transparent;
  --resting-border: var(--lapis);
  --resting-border-size: 1;

  --background: transparent;
  --border: var(--lapis);
  --border-size: 1;

  --text: var(--sky);

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

  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);
  }
}
#stones {
  display: block;
  width: 100%;
  height: 100%;

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

.tile.tile--correct {
  --resting-background: var(--blue);
  --resting-border: var(--blue-light);
  --resting-border-size: 5;

  --background: var(--blue);
  --border: var(--blue-light);
  --border-size: 5;
  --text: var(--midnight);

  transition: fill 0.5s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

@keyframes flash {
  0% {
    --background: var(--resting-background);
    --border: var(--resting-border);
    --border-size: var(--resting-border-size);
  }
  15% {
    --background: var(--flash-background);
    --border: var(--flash-border);
    --border-size: var(--flash-border-size);
  }
  60% {
    --background: var(--flash-background);
    --border: var(--flash-border);
    --border-size: var(--flash-border-size);
  }
  100% {
    --background: var(--resting-background);
    --border: var(--resting-border);
    --border-size: var(--resting-border-size);
  }
}

.tile--word.tile--invalid {
  animation: shake 0.32s ease;
}

.tile--word.tile--wrong {
  --flash-background: var(--rubric);
  --flash-border: var(--rubric-light);
  --flash-border-size: 1;
  animation: shake 0.6s ease, flash 0.6s ease;
}
.tile--stone.tile--wrong {
  --flash-background: var(--rubric);
  --flash-border: var(--rubric-light);
  --flash-border-size: 1;
  animation: flash 0.6s ease;
}

.tile--word.tile--hint {
  --flash-background: var(--lapis);
  --flash-border: var(--sky);
  --flash-border-size: 1;
  animation: shake 0.6s ease, flash 0.6s ease;
}
.tile--stone.tile--hint {
  --flash-background: var(--lapis);
  --flash-border: var(--sky);
  --flash-border-size: 1;
  animation: flash 0.6s ease;
}

.board--solved {
  .path--progress { --color: var(--gold-light) }
  .tile--correct {
    --background: var(--gold);
    --border: var(--gold-light);
  }
}

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