/* Daily Games Hub — base styles */

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

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

/* ─── Design tokens (default / hub theme) ──────────────────── */
:root {
  --color-base: #111a29;
  --color-surface:   #17283F;
  --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: #10B2F4;
  --color-accent-h: #80deff;

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

[data-theme="flagle"] {
  --color-base: #02172f;
  --color-surface: #092d53;
  --color-accent: #10B2F4;
  --color-accent-h: #80deff;
}

/* ─── 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;
}

/* ─── Google Sign-In button (Light theme, per Google brand guidelines) ─── */
.gsi-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  gap: 10px;
  background-color: #FFFFFF;
  border: 1px solid #747775;
  border-radius: 4px;
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: #1F1F1F;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.gsi-button:hover {
  background-color: #F8F9FA;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}
.gsi-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--color-accent);
}
.gsi-button-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.gsi-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-dim);
}
.gsi-divider::before,
.gsi-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-border-2);
}

/* ─── Ko-fi button ─────────────────────────────────────────── */
@keyframes kofi-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1);    }
  20%       { transform: rotate(-14deg) scale(1.15); }
  45%       { transform: rotate(12deg) scale(1.15);  }
  65%       { transform: rotate(-8deg) scale(1.1);   }
  82%       { transform: rotate(5deg) scale(1.05);   }
}
.kofi-btn:hover .kofi-icon {
  animation: kofi-wiggle 0.55s ease;
}

/* ─── 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);
}