/* 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;
  --color-danger: #f87171;

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

/* ─── flagpie theme: deep red / gold ────────────────────────── */
[data-theme="flagpie"] {
  --color-base: #3A0D12;
  --color-surface: #521419;
  --color-surface-2: #6B1C24;
  --color-border: #6B1C24;
  --color-border-2: #7F2A33;
  --color-text-muted: #F3D3D6;
  --color-text-dim: #DCA3A9;
  --color-accent: #FFC933;
  --color-accent-h: #FFDC73;
  --color-danger: #FFD6D6;
}
[data-theme="flagpie"] .btn-accent {
  color: #4A0A10;
}

/* ─── cluble theme: pitch green / lime ──────────────────────── */
[data-theme="cluble"] {
  --color-base: #071A0F;
  --color-surface: #0B3D23;
  --color-surface-2: #14532D;
  --color-border: #14532D;
  --color-border-2: #1F6B3B;
  --color-text-muted: #D1E7D9;
  --color-text-dim: #8FBF9F;
  --color-accent: #A3E635;
  --color-accent-h: #BEF264;
  --color-danger: #FCA5A5;
}
[data-theme="cluble"] .btn-accent {
  color: #113311;
}

/* ─── globex theme: deep space purple / electric violet ── */
[data-theme="globex"] {
  --color-base: #100f2e;
  --color-surface: #1c1b4c;
  --color-surface-2: #28266b;
  --color-surface-3: #35338b;
  --color-border: #28266b;
  --color-border-2: #35338b;
  --color-text-muted: #cfcbf2;
  --color-text-dim: #8b86c9;
  --color-accent: #9d5cff;
  --color-accent-h: #c6a3ff;
  --color-danger: #ff7e9b;
}
[data-theme="globex"] .btn-accent {
  color: #22104a;
}

/* ─── duel theme: hub navy / coral ──────────────────────────── */
[data-theme="duel"] {
  --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: #FF6B57;
  --color-accent-h: #FF8F7F;
  --color-danger: #f87171;
  --duel-me: #FF6B57;
  --duel-me-text: #2a0d09;
}
[data-theme="duel"] .btn-accent {
  color: #2a0d09;
}
[data-theme="duel"] .btn-accent:hover {
  color: #2a0d09;
}

/* Wheel spin: the target angle is set inline per round. */
.duel-wheel {
  transition: transform 2.2s cubic-bezier(0.12, 0.7, 0.1, 1);
  transform: rotate(0deg);
}
.duel-wheel.spun {
  transform: rotate(var(--wheel-rotation));
}
@media (prefers-reduced-motion: reduce) {
  .duel-wheel { transition: opacity 0.4s ease; opacity: 0; }
  .duel-wheel.spun { opacity: 1; }
}

/* Transparency checkerboard behind flagle/cluble reveal images. Unrevealed
   pixels are transparent in the PNG, so this is what shows through — a
   neutral grey checker reads as "nothing here yet", whereas a solid black
   box was indistinguishable from black that is actually part of the flag
   or badge. */
.reveal-checker {
  background-color: #383838;
  background-image: repeating-conic-gradient(#4b4b4b 0 25%, transparent 0 50%);
  background-size: 24px 24px;
}

/* Percentage labels inside flagpie slices — readable on any slice colour. */
.pie-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 6.5px;
  font-weight: 700;
  fill: #ffffff;
  stroke: rgba(0, 0, 0, 0.65);
  stroke-width: 1.4px;
  paint-order: stroke fill;
  pointer-events: none;
}

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