/* Daily Games Hub — base styles */

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

[x-cloak] {
  display: none !important;
}

/* ─── Design tokens (default / hub theme) ──────────────────── */
:root {
  --color-base:      #030712;
  --color-surface:   #111827;
  --color-surface-2: #1f2937;
  --color-surface-3: #374151;
  --color-border:    #1f2937;
  --color-border-2:  #374151;
  --color-text-muted:#9ca3af;
  --color-text-dim:  #6b7280;
  --color-accent: #468be5;
  --color-accent-h: #63aaf1;

  --tile-absent-bg:      #4b5563;
  --tile-absent-border:  #4b5563;
  --tile-present-bg:     #b45309;
  --tile-present-border: #d97706;
  --tile-correct-bg:     #065f46;
  --tile-correct-border: #059669;

  --key-unused-bg: #374151;
  --key-unused-h:  #4b5563;
  --key-absent-bg: #1f2937;
}

/* ─── stdlible theme: black / space-purple / bright orange ─── */
[data-theme="stdlible"] {
  --color-base:      #000000;
  --color-surface: #0f1010;
  --color-surface-2: #042e1c;
  --color-surface-3: #374151;
  --color-border:    #1f2937;
  --color-border-2: #0d6331;
  --color-text-muted:#9ca3af;
  --color-text-dim:  #6b7280;
  --color-accent: #108844;
  --color-accent-h: #0ed564;

  --tile-absent-bg:      #4b5563;
  --tile-absent-border:  #4b5563;
  --tile-present-bg: #b49809;
  --tile-present-border: #d9c706;
  --tile-correct-bg:     #065f46;
  --tile-correct-border: #059669;

  --key-unused-bg: #374151;
  --key-unused-h:  #4b5563;
  --key-absent-bg: #1f2937;
}

/* ─── Component classes ─────────────────────────────────────── */

body {
  background-color: var(--color-base);
}

.nav-header {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.btn-accent {
  background-color: var(--color-accent);
  color: #ffffff;
}
.btn-accent:hover {
  background-color: var(--color-accent-h);
}

.btn-outline {
  border-color: var(--color-border-2);
}
.btn-outline:hover {
  border-color: var(--color-text-muted);
}

.btn-key-action {
  background-color: var(--color-surface-3);
  color: #ffffff;
}
.btn-key-action:hover {
  background-color: var(--color-surface-2);
}

/* ─── Tile states ───────────────────────────────────────────── */
.tile-empty {
  border-color: var(--color-border);
}
.tile-active {
  border-color: var(--color-border-2);
  color: #f3f4f6;
}
.tile-active-filled {
  border-color: var(--color-text-muted);
  color: #f3f4f6;
  transform: scale(1.05);
}
.tile-absent {
  background-color: var(--tile-absent-bg);
  border-color:     var(--tile-absent-border);
  color: #f3f4f6;
}
.tile-present {
  background-color: var(--tile-present-bg);
  border-color:     var(--tile-present-border);
  color: #ffffff;
}
.tile-correct {
  background-color: var(--tile-correct-bg);
  border-color:     var(--tile-correct-border);
  color: #ffffff;
}

/* ─── Keyboard key states ───────────────────────────────────── */
.key-unused {
  background-color: var(--key-unused-bg);
  color: #f3f4f6;
}
.key-unused:hover {
  background-color: var(--key-unused-h);
}
.key-absent {
  background-color: var(--key-absent-bg);
  color: #6b7280;
  cursor: default;
}
.key-present {
  background-color: var(--tile-present-bg);
  color: #ffffff;
}
.key-present:hover {
  background-color: var(--tile-present-border);
}
.key-correct {
  background-color: var(--tile-correct-bg);
  color: #ffffff;
}
.key-correct:hover {
  background-color: var(--tile-correct-border);
}