/* src/components/jr/spelling-games/spelling-games.css — Sort It and Fill the Blank (DECISIONS #169).
   No SJ2 frame exists for this screen; every value is lifted from her Spelling stop
   (spelling.css) so the two games sit in the same room as the night they follow. */

.jr-sg { position: absolute; inset: 0; overflow: hidden; }
.jr-sg-pane { position: absolute; left: 0; right: 0; top: 72px; bottom: 0; box-sizing: border-box; }
.jr-sg-pane-intro { padding: 38px 56px 34px; display: flex; gap: 34px; align-items: center; }
.jr-sg-pane-work { padding: 24px 40px 26px; display: flex; gap: 22px; }

.jr-sg-card {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  background: var(--sj-card); border: 1px solid var(--sj-line); border-radius: 30px;
  padding: 34px 40px; box-shadow: 0 18px 40px rgba(35, 50, 44, .12);
}
.jr-sg-kicker {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; margin-bottom: 14px;
  border-radius: 12px; background: var(--sj-sun-tint); border: 1px solid #f6d98a;
  font-weight: 600; font-size: 13px; letter-spacing: .13em; text-transform: uppercase; color: var(--sj-sun-ink, #b26f0a);
}
.jr-sg-title { margin: 0 0 12px; font-weight: 700; font-size: 46px; line-height: 1.05; letter-spacing: -.015em; color: var(--sj-ink); text-wrap: pretty; }
.jr-sg-blurb { margin: 0 0 18px; font-family: var(--sj-font-story); font-size: 23px; line-height: 1.45; color: var(--sj-ink); max-width: 48ch; text-wrap: pretty; }
.jr-sg-counts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.jr-sg-count {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 14px;
  background: var(--sj-sun-tint); border: 1px solid #f6d98a; font-weight: 600; font-size: 17px; color: var(--sj-sun-ink, #b26f0a);
}
.jr-sg-count-plain { background: var(--sj-card); border-color: var(--sj-line); color: var(--sj-ink); }

.jr-sg-start {
  width: 100%; box-sizing: border-box; appearance: none; cursor: pointer; min-height: 82px; padding: 0 26px;
  border-radius: 22px; border: none; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  background: var(--sj-orange); color: var(--sj-card);
  box-shadow: 0 5px 0 var(--sj-orange-deep), 0 12px 24px rgba(150, 56, 10, .2);
}
.jr-sg-start:active { transform: translateY(5px); box-shadow: 0 0 0 var(--sj-orange-deep); }
.jr-sg-start-head { display: block; font-weight: 600; font-size: 26px; line-height: 1.1; }
.jr-sg-start-sub { display: block; font-size: 17px; font-weight: 600; }

.jr-sg-guide { flex: none; width: 300px; display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* ---- the round ---- */
.jr-sg-work {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px;
  background: var(--sj-card); border: 1px solid var(--sj-line); border-radius: 26px; padding: 26px 30px;
  box-shadow: 0 18px 40px rgba(35, 50, 44, .12);
}
.jr-sg-work .jr-sg-kicker { margin-bottom: 0; align-self: flex-start; }
.jr-sg-prompt { margin: 0; flex: 1 1 auto; display: flex; align-items: center; font-family: var(--sj-font-story); color: var(--sj-ink); text-wrap: pretty; }
.jr-sg-prompt-sort { font-size: 64px; line-height: 1.05; font-weight: 700; letter-spacing: .01em; }
.jr-sg-prompt-blank { font-size: 34px; line-height: 1.35; max-width: 30ch; }
.jr-sg-chip {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border-radius: 999px; font-weight: 600; font-size: 18px; border: 1px solid;
}
.jr-sg-chip-green { background: #e8f5d9; border-color: #c3dda9; color: #246c3c; }
.jr-sg-chip-sun { background: #fff0b5; border-color: #f6d98a; color: #b26f0a; }

.jr-sg-choices { display: grid; gap: 12px; }
.jr-sg-choices-sort { grid-template-columns: 1fr; }
.jr-sg-choices-blank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jr-sg-choice {
  appearance: none; cursor: pointer; min-height: 72px; padding: 12px 22px; border-radius: 18px; text-align: left;
  background: var(--sj-stage, #fff9e9); border: 1.5px solid var(--sj-line); box-shadow: 0 4px 0 #e2d8c5;
  font-family: var(--sj-font-story); font-size: 24px; line-height: 1.25; color: var(--sj-ink); text-wrap: pretty;
}
.jr-sg-choices-blank .jr-sg-choice { text-align: center; font-size: 28px; }
.jr-sg-choice:active { transform: translateY(4px); box-shadow: none; }
/* Landed: green. Came out other than asked: warm sand and a dashed line, never red. */
.jr-sg-choice-yes { background: #e8f5d9; border-color: #246c3c; box-shadow: 0 4px 0 #c3dda9; }
.jr-sg-choice-again { background: #fff9e9; border: 2px dashed #13251f; box-shadow: none; }

.jr-sg-actions { display: flex; align-items: center; gap: 12px; }
.jr-sg-spacer { flex: 1 1 auto; }
.jr-sg-secondary {
  appearance: none; cursor: pointer; min-height: 56px; padding: 0 20px; border-radius: 16px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--sj-card); border: 1.5px solid var(--sj-line); box-shadow: 0 4px 0 #e2d8c5;
  font-weight: 600; font-size: 18px; color: var(--sj-ink);
}
.jr-sg-secondary:active { transform: translateY(4px); box-shadow: none; }
.jr-sg-secondary-tall { min-height: 76px; padding: 0 28px; font-size: 22px; }
.jr-sg-primary {
  appearance: none; border: none; cursor: pointer; min-height: 66px; padding: 0 32px; border-radius: 18px;
  display: inline-flex; align-items: center; gap: 10px; background: var(--sj-orange); color: var(--sj-card);
  font-weight: 700; font-size: 22px; box-shadow: 0 5px 0 var(--sj-orange-deep);
}
.jr-sg-primary:active { transform: translateY(5px); box-shadow: none; }
.jr-sg-side { flex: none; width: 300px; display: flex; flex-direction: column; align-items: center; gap: 14px; }

.jr-sg-done-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.jr-sg-back {
  appearance: none; border: none; cursor: pointer; min-height: 76px; padding: 0 38px; border-radius: 22px;
  display: inline-flex; align-items: center; gap: 12px; background: var(--sj-orange); color: var(--sj-card);
  font-weight: 700; font-size: 25px; box-shadow: 0 5px 0 var(--sj-orange-deep), 0 12px 24px rgba(150, 56, 10, .2);
}
.jr-sg-back:active { transform: translateY(5px); box-shadow: none; }