/* Color legend */
    .color-legend {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin: 16px 0;
    }

    .legend-item {
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 0.875rem;
      font-weight: 600;
    }

    .legend-green  { background: rgba(22,163,74,0.15);  border: 1px solid #16a34a; color: #4ade80; }
    .legend-yellow { background: rgba(202,138,4,0.15);  border: 1px solid #ca8a04; color: #facc15; }
    .legend-grey   { background: rgba(107,114,128,0.15);border: 1px solid #4b5563; color: #9ca3af; }
    .legend-item .leg-emoji { font-size: 1.2rem; display: block; margin-bottom: 4px; }
    .legend-item .leg-label { display: block; font-weight: 800; margin-bottom: 2px; }
    .legend-item .leg-desc  { font-size: 0.78rem; font-weight: 400; opacity: 0.85; }

    /* Tips */
    .tips-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 12px;
      margin: 16px 0;
    }

    .tip-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      transition: border-color 0.2s, transform 0.2s;
    }

    .tip-card:hover { border-color: #4ade80; transform: translateY(-2px); }
    .tip-card .tip-icon  { font-size: 1.4rem; margin-bottom: 8px; }
    .tip-card .tip-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--text); margin-bottom: 5px; }
    .tip-card .tip-desc  { font-size: 0.85rem; color: var(--text2); line-height: 1.55; }

    .word-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
    .word-chip {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 7px 14px;
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: 0.9rem;
      color: #4ade80;
      letter-spacing: 0.06em;
    }

    /* Benefits */
    .benefits-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
    .benefits-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 0.95rem;
      color: var(--text2);
      line-height: 1.6;
    }
    .benefits-list li::before { content: "✦"; color: #4ade80; font-size: 0.85rem; flex-shrink: 0; margin-top: 3px; }
    .benefits-list li strong { color: var(--text); }

    /* Internal links */
    .game-links-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 12px;
      margin: 16px 0;
    }

    .game-link-card {
      display: flex;
      align-items: center;
      gap: 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px 18px;
      text-decoration: none;
      transition: all 0.2s;
    }

    .game-link-card:hover { border-color: #4ade80; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(74,222,128,0.1); }
    .glc-icon { font-size: 1.8rem; flex-shrink: 0; }
    .glc-body { display: flex; flex-direction: column; }
    .glc-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--text); }
    .glc-desc { font-size: 0.78rem; color: var(--text3); margin-top: 2px; }
    .glc-arrow { margin-left: auto; color: var(--text3); font-size: 0.9rem; flex-shrink: 0; }

    @media (max-width: 600px) {
      .color-legend { grid-template-columns: 1fr; }
      .tips-grid    { grid-template-columns: 1fr; }
      .game-links-grid { grid-template-columns: 1fr; }
    }


.footer-logo-link {
  text-decoration: none; 
  color: inherit;        
  display: inline-flex;
  align-items: center;
}

.footer-logo-link:hover {
  opacity: 0.8;          
}