/* Layout / padding / max-width inherited from `.app-content > .screen`. */
.sc-body { display: flex; flex-direction: column; gap: 1.5rem; }
@media (max-width: 640px) {
  .sc-body { gap: 1rem; }
}

.sc-group  {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%;
}
.sc-group-hdr {
  font-size: 0.82rem; font-weight: 700; color: var(--accent-gold);
  margin: 0; padding-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--accent-gold) 18%, transparent);
  text-transform: uppercase; letter-spacing: 0.6px;
}

.sc-group-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}

.sc-card {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px;
  padding: 14px 16px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
  display: flex; flex-direction: column; gap: 4px;
}
.sc-card:hover { border-color: var(--accent-gold); background: color-mix(in srgb, var(--accent-gold) 7%, transparent); transform: translateY(-1px); }
.sc-card-name  { font-weight: 700; font-size: 0.9rem; }
.sc-card-desc  { font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; }

.sc-card-hero {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-gold) 8%, transparent), color-mix(in srgb, var(--accent-gold) 2%, transparent));
  border-color: color-mix(in srgb, var(--accent-gold) 35%, transparent);
  padding: 14px 16px;
}
.sc-card-hero .sc-card-name { font-size: 1.02rem; }
.sc-card-hero .sc-card-desc { font-size: 0.82rem; }

@media (max-width: 600px) {
  .sc-group-cards { grid-template-columns: 1fr; }
  .sc-card-hero { padding: 12px; }
  .sc-card-hero .sc-card-name { font-size: 0.96rem; }
}

.sc-hint-card {
  background: color-mix(in srgb, var(--accent-gold) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent-gold) 25%, transparent);
  border-radius: 8px; padding: 10px 12px;
  max-height: 150px; overflow-y: auto;
}
.sc-hint-hdr { font-weight: 700; font-size: 0.82rem; color: var(--accent-gold); margin-bottom: 6px; }
.sc-hint-list { display: flex; flex-direction: column; gap: 3px; }
.sc-hint-item { font-size: 0.72rem; color: var(--text-light); line-height: 1.4; }
.sc-hint-sep { border: none; border-top: 1px solid color-mix(in srgb, var(--accent-gold) 25%, transparent); margin: 8px 0 4px; }

@media (max-width: 1100px) {
  .game-main { flex-wrap: wrap; justify-content: center; align-items: flex-start; }
  .game-panel { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .game-panel > * { flex: 1; min-width: 200px; }
  .left-col-wrap { overflow: visible; }
  .left-panel { flex: none; min-height: auto; }
  .right-panel { height: auto; max-height: none; overflow: visible; }
  .actions-card { flex: initial; min-height: auto; overflow-y: visible; }
  .log-scroll { max-height: 300px; }
}

/* Mobile overrides MUST appear after base styles for specificity. */
@media (max-width: 600px) {
  .right-panel { width: 100%; height: auto; max-height: none; }
  /* flex-direction:column overrides the ≤1100px rule above (which forces
     flex-row) — source order matters: this block must sit AFTER. */
  .game-panel { width: 100%; flex-direction: column; gap: 10px; }
  .game-panel > * { flex: initial; min-width: 0; width: 100%; }
  .gameover-buttons { min-width: auto; }
  .popup-card { min-width: 0; width: 90%; max-width: calc(100% - 16px); }
  /* Drop desktop 85vh cap on mobile — would clip bottom of board-axis. */
  .board-area { max-height: none; }
  /* Drop desktop 16px indent — combined with width:100% below it would
     push bars past the right edge and force a horizontal scrollbar. */
  .play-board-header { margin-left: 0; }
  .group-status-bar { margin-inline-start: 0; }
}