/* The homepage's Suggest next beat (#suggest-fx): the page (Sepia, the kit
 * in /home-page.css) with the app's Suggest modal over it — its three
 * directions in their kinds' colours (src/lib/ui/suggest-beat.css: Close
 * sky, Progress green, Twist orchid). /home-suggest.js plays it.
 */
.sg-stage { position: relative; }
.sg-stage .pm { min-height: 430px; }
.sg-stage .pm-paras { position: relative; }
.sg-stage .pm-text.is-empty { color: var(--fg-3); font-style: italic; }
.sg-stage .pm-para.is-born .pm-text::before { background: #8b5cf6; box-shadow: 0 0 8px rgba(139, 92, 246, 0.6); }

/* The margin's Suggest: the two dice. */
.sg-dice { width: 18px; height: 16px; flex: none; }
.sg-dice rect { fill: none; stroke: currentColor; stroke-width: 1.7; }
.sg-dice .d-front rect { fill: var(--surface); }
.sg-dice circle { fill: currentColor; }
.pm-btn.is-press .sg-dice { transform: rotate(-20deg) scale(1.1); transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1); }
.pm-btn.sg-suggest { color: #6a3fc4; border-color: rgba(106, 63, 196, 0.38); }

/* Expand, shining once the pick is in (lib/ui/beat-glow's shineExpand). */
.pm-btn.sg-shine {
  position: relative;
  overflow: hidden;
  color: var(--accent-text);
  border-color: var(--accent-border);
  background: #fde9f1;
  animation: sg-ring 1.6s ease-out 0.2s infinite;
}
.pm-btn.sg-shine .pm-btn-label { max-width: 120px; opacity: 1; margin: 0 4px 0 6px; }
.pm-btn.sg-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.7) 48%, transparent 66%);
  background-size: 250% 100%;
  background-position: 160% 0;
  animation: sg-sheen 1.6s ease-in-out 0.2s infinite;
}
@keyframes sg-ring { 0% { box-shadow: 0 0 0 0 rgba(240, 106, 155, 0.5); } 100% { box-shadow: 0 0 0 10px rgba(240, 106, 155, 0); } }
@keyframes sg-sheen { to { background-position: -60% 0; } }

/* The modal: the app's dark card over the page, which dims. */
.sg-veil {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  background: rgba(20, 14, 24, 0.42);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.sg-veil.is-on { opacity: 1; }
.sg-modal {
  --kind-close: #7cc4f0;
  --kind-progress: #86d29a;
  --kind-twist: #f0a3e8;
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  z-index: 7;
  padding: 16px 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(167, 139, 250, 0.14), transparent 60%),
    linear-gradient(180deg, #1d1a22, #141218);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 70px -24px rgba(0, 0, 0, 0.9), 0 0 60px -20px rgba(167, 139, 250, 0.6);
  color: #ede6ef;
  font-family: var(--font-ui);
  transform: translateY(-50%) translateY(14px) scale(0.96);
  opacity: 0;
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  pointer-events: none;
}
@supports not (color: color-mix(in srgb, red, blue)) {
 .sg-modal { --kind-close__r: 124; --kind-close__g: 196; --kind-close__b: 240; --kind-close__a: 1; --kind-progress__r: 134; --kind-progress__g: 210; --kind-progress__b: 154; --kind-progress__a: 1; --kind-twist__r: 240; --kind-twist__g: 163; --kind-twist__b: 232; --kind-twist__a: 1; } }
.sg-modal.is-open { opacity: 1; transform: translateY(-50%); }
.sg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sg-head .sg-dice { color: #c4b5fd; }
.sg-head b { font-size: calc(14px / var(--tz, 1)); font-weight: 700; }
.sg-state { margin-left: auto; font-size: calc(11px / var(--tz, 1)); font-weight: 600; color: #c4b5fd; display: flex; align-items: center; gap: 6px; transition: opacity 0.3s; }
.sg-state i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.18); border-top-color: #a78bfa; animation: pm-spin 0.8s linear infinite; }
.sg-modal.is-dealt .sg-state { opacity: 0; }
.sg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.sg-card {
  --kind: var(--kind-close);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 168px;
  padding: 11px 11px 28px;
  border-radius: 12px;
  border: 1px solid #353040;
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--kind) 10%, transparent), transparent 70%),
    #0f0d12;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.3s, filter 0.3s;
}
@supports not (color: color-mix(in srgb, red, blue)) {
 .sg-card { --kind__r: var(--kind-close__r); --kind__g: var(--kind-close__g); --kind__b: var(--kind-close__b); --kind__a: var(--kind-close__a); background: radial-gradient(120% 70% at 50% 0%, rgba(var(--kind__r), var(--kind__g), var(--kind__b), calc(var(--kind__a) * 0.1)), transparent 70%),
    #0f0d12; } }
.sg-card.is-progress { --kind: var(--kind-progress); }
@supports not (color: color-mix(in srgb, red, blue)) {
 .sg-card.is-progress { --kind__r: var(--kind-progress__r); --kind__g: var(--kind-progress__g); --kind__b: var(--kind-progress__b); --kind__a: var(--kind-progress__a); } }
.sg-card.is-twist { --kind: var(--kind-twist); }
@supports not (color: color-mix(in srgb, red, blue)) {
 .sg-card.is-twist { --kind__r: var(--kind-twist__r); --kind__g: var(--kind-twist__g); --kind__b: var(--kind-twist__b); --kind__a: var(--kind-twist__a); } }
.sg-kind { display: inline-flex; align-items: center; gap: 6px; font-size: calc(9.5px / var(--tz, 1)); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kind); }
.sg-kind i { width: 6px; height: 6px; border-radius: 50%; background: var(--kind); box-shadow: 0 0 8px var(--kind); }
.sg-hint { margin-top: -2px; font-size: calc(10.5px / var(--tz, 1)); color: #8a828f; }
.sg-skel { height: 7px; border-radius: 4px; background: linear-gradient(90deg, #221e28 0%, color-mix(in srgb, var(--kind) 22%, #221e28) 50%, #221e28 100%); background-size: 200% 100%; animation: sg-shimmer 1.4s linear infinite; }
@supports not (color: color-mix(in srgb, red, blue)) {
 .sg-skel { background: linear-gradient(90deg, #221e28 0%, rgba(calc(var(--kind__r) * 0.22 + 26.52), calc(var(--kind__g) * 0.22 + 23.4), calc(var(--kind__b) * 0.22 + 31.2), calc(var(--kind__a) * 0.22 + 0.78)) 50%, #221e28 100%); } }
.sg-skel:nth-of-type(1) { width: 62%; height: 9px; margin-top: 4px; }
.sg-skel:last-of-type { width: 74%; }
@keyframes sg-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sg-title { margin-top: 3px; font-size: calc(12.5px / var(--tz, 1)); font-weight: 700; line-height: 1.3; color: #fff; }
.sg-beat { font-family: var(--font-display); font-size: calc(11.5px / var(--tz, 1)); line-height: 1.5; color: #cfc6d3; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.sg-pick { position: absolute; right: 10px; bottom: 9px; font-size: calc(10px / var(--tz, 1)); font-weight: 700; color: #8a828f; transition: color 0.2s; }
.sg-card.is-lit { border-color: color-mix(in srgb, var(--kind) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kind) 14%, transparent), 0 14px 30px -18px var(--kind); }
@supports not (color: color-mix(in srgb, red, blue)) {
 .sg-card.is-lit { border-color: rgba(var(--kind__r), var(--kind__g), var(--kind__b), calc(var(--kind__a) * 0.6)); box-shadow: 0 0 0 3px rgba(var(--kind__r), var(--kind__g), var(--kind__b), calc(var(--kind__a) * 0.14)), 0 14px 30px -18px var(--kind); } }
.sg-card.is-in { animation: sg-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
@keyframes sg-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
.sg-card.is-hover { border-color: color-mix(in srgb, var(--kind) 55%, transparent); transform: translateY(-3px); }
@supports not (color: color-mix(in srgb, red, blue)) {
 .sg-card.is-hover { border-color: rgba(var(--kind__r), var(--kind__g), var(--kind__b), calc(var(--kind__a) * 0.55)); } }
.sg-card.is-picked {
  border-color: var(--kind);
  background:
    radial-gradient(130% 90% at 50% 0%, color-mix(in srgb, var(--kind) 24%, transparent), transparent 75%),
    color-mix(in srgb, var(--kind) 8%, #0f0d12);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kind) 26%, transparent), 0 18px 38px -16px var(--kind);
  transform: translateY(-3px);
}
@supports not (color: color-mix(in srgb, red, blue)) {
 .sg-card.is-picked { background: radial-gradient(130% 90% at 50% 0%, rgba(var(--kind__r), var(--kind__g), var(--kind__b), calc(var(--kind__a) * 0.24)), transparent 75%),
    rgba(calc(var(--kind__r) * 0.08 + 13.8), calc(var(--kind__g) * 0.08 + 11.96), calc(var(--kind__b) * 0.08 + 16.56), calc(var(--kind__a) * 0.08 + 0.92)); box-shadow: 0 0 0 3px rgba(var(--kind__r), var(--kind__g), var(--kind__b), calc(var(--kind__a) * 0.26)), 0 18px 38px -16px var(--kind); } }
.sg-card.is-picked .sg-pick { color: var(--kind); }
.sg-card.is-dim { opacity: 0.3; filter: saturate(0.4); transform: scale(0.97); }

@media (max-width: 720px) {
  .sg-stage .pm { min-height: 470px; }
  .sg-modal { left: 8px; right: 8px; padding: 13px 12px 12px; }
  .sg-cards { grid-template-columns: 1fr; gap: 7px; }
  .sg-card { min-height: 0; padding: 9px 11px 10px; }
  .sg-card .sg-hint, .sg-card .sg-pick { display: none; }
  .sg-card .sg-beat { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sg-skel { display: none; }
  .sg-card:not(.is-filled) { min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-btn.sg-shine, .pm-btn.sg-shine::after, .sg-skel { animation: none; }
}