/* ============================================
   RITHM - Shared inline game-guide styles
   Used by game index templates to render an
   educational "About this game" section beneath
   the interactive area.
   ============================================ */

.game-guide {
  max-width: 1100px;
  margin: 2.5rem auto 3rem;
  padding: 0 1.5rem;
}

.game-guide-header {
  text-align: center;
  margin-bottom: 2rem;
}

.game-guide-header h2 {
  font-family: var(--font-sans);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.game-guide-header p {
  color: var(--text-secondary);
  font-size: 1rem;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

.game-guide .guide-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.25rem;
}

.game-guide .guide-section h3 {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.game-guide .guide-section h4 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 1.25rem 0 0.4rem;
}

.game-guide .guide-section p,
.game-guide .guide-section li {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.95rem;
}

.game-guide .guide-section p {
  margin: 0 0 0.75rem;
}

.game-guide .guide-section p:last-child {
  margin-bottom: 0;
}

.game-guide .guide-section ul,
.game-guide .guide-section ol {
  padding-left: 1.25rem;
  margin: 0 0 0.75rem;
}

.game-guide .guide-section li {
  margin-bottom: 0.35rem;
}

.game-guide .guide-section strong {
  color: var(--text-primary);
  font-weight: 600;
}

.game-guide .guide-section a {
  color: var(--color-primary-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.game-guide .guide-section a:hover {
  color: var(--text-primary);
}

.game-guide .section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  color: var(--color-primary-light);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.game-guide .section-icon--success { background: var(--surface-success); color: var(--color-success); }
.game-guide .section-icon--warning { background: var(--surface-warning); color: var(--color-warning); }
.game-guide .section-icon--info { background: var(--surface-info); color: var(--color-info); }

.game-guide .gg-callout {
  background: var(--surface-primary);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 0.875rem 1.125rem;
  margin: 1rem 0;
}

.game-guide .gg-callout p {
  margin: 0;
}

.game-guide .gg-callout--tip {
  border-left-color: var(--color-success);
  background: var(--surface-success);
}

.game-guide .gg-callout--tip strong {
  color: var(--color-success);
}

.game-guide .gg-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1rem 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
  font-size: 0.9rem;
}

.game-guide .gg-table th {
  background: var(--input-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  font-size: 0.78rem;
  padding: 0.65rem 0.875rem;
}

.game-guide .gg-table td {
  color: var(--text-secondary);
  border-top: 1px solid var(--border-color);
  padding: 0.55rem 0.875rem;
}

.game-guide .gg-table tr:hover td {
  background: var(--input-bg);
}

.game-guide .learn-more-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.game-guide .learn-more-row a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.game-guide .learn-more-row a:hover {
  background: var(--surface-primary);
  border-color: var(--color-primary);
  color: var(--text-primary);
}

@media (max-width: 576px) {
  .game-guide {
    padding: 0 1rem;
  }
  .game-guide .guide-section {
    padding: 1.25rem;
  }
  .game-guide-header h2 {
    font-size: 1.4rem;
  }
  /* Auto table layout lets long reference text (song titles)
     force the table past the viewport on phones. Fixed layout
     plus word wrapping keeps every guide table inside its
     section at small widths. */
  .game-guide .gg-table {
    table-layout: fixed;
    font-size: 0.82rem;
  }
  .game-guide .gg-table th,
  .game-guide .gg-table td {
    padding: 0.5rem 0.5rem;
    overflow-wrap: break-word;
  }
}