/* =========================
   Layout / Wrapper
========================= */
.sat-achievement-form {
    margin-top: 24px;
}

/* =========================
   100% Completion Banner & Trophy
========================= */
.sat-completion-banner {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 30px 40px;
    margin: 20px 0 30px;
    background: linear-gradient(135deg, #667eea 0%, #a78bfa 50%, #f093fb 100%);
    background-size: 200% 200%;
    animation: sat-completion-gradient-shift 8s ease infinite;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(139, 123, 216, 0.3);
}

@keyframes sat-completion-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.sat-completion-icon {
    font-size: 70px;
    animation: sat-trophy-bounce 1.5s ease-in-out infinite;
}

@keyframes sat-trophy-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.sat-completion-content h3 {
    margin: 0 0 8px;
    color: white;
    font-size: 3rem;
    font-weight: 700;
}

.sat-completion-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.6rem;
}

.sat-completion-trophy {
    margin-left: 10px;
    font-size: 0.9em;
    display: inline-block;
    animation: sat-trophy-spin 3s ease-in-out infinite;
}

@keyframes sat-trophy-spin {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

@media (prefers-color-scheme: dark) {
    .sat-completion-banner {
        background: linear-gradient(135deg, #7c6bc4 0%, #9b8bdb 50%, #b5a5ed 100%);
        background-size: 200% 200%;
        animation: sat-gradient-shift 15s ease infinite;
        box-shadow: 0 4px 12px rgba(124, 107, 196, 0.4);
    }
}

/* =========================
   Game Progress Total
========================= */
.sat-game-progress-total {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    margin: 20px 0 30px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.sat-progress-count {
    font-size: 2rem;
    font-weight: 700;
    color: #667eea;
}

.sat-progress-label {
    font-size: 1rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (prefers-color-scheme: dark) {
    .sat-game-progress-total {
        background: #1e1e1e;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    
    .sat-progress-count {
        color: #8b9bdb;
    }
    
    .sat-progress-label {
        color: #aaa;
    }
}

/* =========================
   Achievement visibility + states
========================= */

/* Default hidden (completed are hidden until "show completed") */
.sat-achievement-item.is-completed {
    display: none;
}

/* Incomplete = black */
.sat-achievement-item:not(.is-completed),
.sat-achievement-item:not(.is-completed) label,
.sat-achievement-item:not(.is-completed) .sat-achievement-title {
    color: #000;
    opacity: 1;
    text-decoration: none;
}

/* Task entries (non-official steps) — only when NOT completed */
.sat-achievement-item.sat-entry-task:not(.is-completed) .sat-achievement-title {
    color: #3d926c;
    font-weight: 700;
}

/* Completed when shown = gray + line-through */
.sat-achievement-item.is-completed.sat-visible {
    display: list-item;
}

.sat-achievement-item.is-completed.sat-visible,
.sat-achievement-item.is-completed.sat-visible label,
.sat-achievement-item.is-completed.sat-visible .sat-achievement-title,
.sat-achievement-item.is-completed.sat-visible .sat-achievement-notes {
    color: #a4a4a4;
    opacity: 1;
    text-decoration: line-through;
}

/* =========================
   Row grid (Title | Description | Link)
========================= */
.sat-achievement-grid {
    display: grid;
    grid-template-columns: 320px 1fr 140px;
    gap: 16px;
    align-items: start;
}

/* Column 1 */
.sat-col-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sat-achievement-title {
    font-weight: 700;
}

/* Description spacing (kept tight) */
.sat-col-description p {
    margin: 0;
}

/* Link alignment */
.sat-col-link {
    text-align: right;
}

/* Remove list dots */
.sat-achievement-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

/* =========================
   Notes (under description)
========================= */
.sat-achievement-notes {
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.4;
    color: #4b5563;
    opacity: 1;
    position: relative;
    padding-left: 12px;
}

/* Dash before notes */
.sat-achievement-notes::before {
    content: "–";
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.9;
}

/* Tight WYSIWYG spacing */
.sat-achievement-notes p {
    margin: 0;
}

/* Remove accidental lines */
.sat-achievement-notes hr {
    display: none;
}
.sat-achievement-notes * {
    border-top: 0 !important;
}

/* =========================
   Categories (collapsible)
========================= */
.sat-achievement-list.sat-collapsed {
    display: none;
}

/* Hide whole category section when fully completed */
.sat-category-hidden {
    display: none;
}

/* Category heading base */
.sat-category-title {
    font-size: 1.7rem;
    font-weight: 600;
    margin: 30px 0 12px;
    color: #222;

    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-shadow: 0 2px 6px rgba(0,0,0,0.05);

    cursor: pointer;
    user-select: none;

    position: relative;
    padding-right: 28px; /* space for arrow */
}

/* 6-color rotating header backgrounds */
.sat-category-block:nth-child(6n+1) .sat-category-title { background: #ffe4f1; } /* pink */
.sat-category-block:nth-child(6n+2) .sat-category-title { background: #f0e4ff; } /* purple */
.sat-category-block:nth-child(6n+3) .sat-category-title { background: #e4f0ff; } /* blue */
.sat-category-block:nth-child(6n+4) .sat-category-title { background: #e4ffe9; } /* green */
.sat-category-block:nth-child(6n+5) .sat-category-title { background: #fff9e4; } /* yellow */
.sat-category-block:nth-child(6n+6) .sat-category-title { background: #ffeede; } /* orange */

/* Arrow indicator */
.sat-category-title::after {
    content: "▸";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
}

.sat-category-title.is-open::after {
    content: "▾";
}

.sat-category-count {
    font-size: 0.95em;
    font-weight: 600;
    opacity: 0.8;
    margin-left: 8px;
}

/* =========================
   Toggle Completed Button
========================= */
#sat-toggle-completed {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;

    border-radius: 999px;
    border: none;
    cursor: pointer;

    transition: all 0.2s ease;

    background-color: #5c6ac4;
    color: #fff;

    margin-bottom: 5px;
}

#sat-toggle-completed.sat-active {
    background-color: #3f4bb8;
}

#sat-toggle-completed:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(92,106,196,0.25);
}

/* =========================
   Dark Mode
========================= */
@media (prefers-color-scheme: dark) {

  /* Page background + default text */
  body {
    background: #0f172a;
    color: #e5e7eb;
  }

  /* Incomplete (black -> light) */
  .sat-achievement-item:not(.is-completed),
  .sat-achievement-item:not(.is-completed) label,
  .sat-achievement-item:not(.is-completed) .sat-achievement-title {
    color: #e5e7eb;
  }

  /* Completed shown (gray stays, but lighter) */
  .sat-achievement-item.is-completed.sat-visible,
  .sat-achievement-item.is-completed.sat-visible label,
  .sat-achievement-item.is-completed.sat-visible .sat-achievement-title,
  .sat-achievement-item.is-completed.sat-visible .sat-achievement-notes {
    color: #9ca3af;
  }

  /* Notes */
  .sat-achievement-notes {
    color: #9ca3af;
  }

  /* Category header: keep your pastel, but tone it down a bit */
  .sat-category-title {
    color: #111827;
    box-shadow: none;
  }
  
  /* Dark mode category header backgrounds - deeper tones */
  .sat-category-block:nth-child(6n+1) .sat-category-title { background: #5a3a4a; } /* deep pink */
  .sat-category-block:nth-child(6n+2) .sat-category-title { background: #4a3a5a; } /* deep purple */
  .sat-category-block:nth-child(6n+3) .sat-category-title { background: #3a4a5a; } /* deep blue */
  .sat-category-block:nth-child(6n+4) .sat-category-title { background: #3a5a4a; } /* deep green */
  .sat-category-block:nth-child(6n+5) .sat-category-title { background: #5a5a3a; } /* deep yellow */
  .sat-category-block:nth-child(6n+6) .sat-category-title { background: #5a4a3a; } /* deep orange */
  
  .sat-category-title {
    color: #e0e0e0; /* lighter text for dark backgrounds */
  }

  /* Button */
  #sat-toggle-completed {
    box-shadow: none;
  }
}

/* =========================
   Game Intro and Game Notes
========================= */
.sat-game-field {
  margin: 14px 0;
}

.sat-game-field-sat_game_intro {
  font-size: 1.05rem;
}

.sat-game-field-sat_game_notes {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,0.04);
}

/* Links inside Game Intro + Notes */
.sat-game-field a {
  text-decoration: underline;
  font-weight: 500;
  color: #5c6ac4;
}

.sat-game-field a:hover {
  text-decoration: none;
  opacity: 0.85;
  color: #3f4bb8;
}

@media (prefers-color-scheme: dark) {

  /* Regular links inside intro/notes */
  .sat-game-field a {
    color: #9db8ff;   /* soft lighter blue */
    text-decoration: underline;
  }

  .sat-game-field a:hover {
    color: #c6d6ff;
    text-decoration: none;
  }
}

/* Game title link (inside intro heading) */
.sat-game-field h1 a,
.sat-game-field h2 a,
.sat-game-field h3 a {
  text-decoration: none;
  font-weight: 700;
  color: #1f2937; /* dark neutral */
}

/* Hover effect */
.sat-game-field h1 a:hover,
.sat-game-field h2 a:hover,
.sat-game-field h3 a:hover {
  opacity: 0.8;
}

@media (prefers-color-scheme: dark) {

  .sat-game-field h1 a,
  .sat-game-field h2 a,
  .sat-game-field h3 a {
    color: #ffffff;
    text-decoration: none;
  }
}