/* v13.33.0: The Group Chat (KS3/KS4 Weekly Vocab Booster). A phone group chat with Sparky and Ray.
   Its own tokens, light and dark, scoped to .gc so nothing leaks into the rest of the site. */
.gc {
  --g-bg: #ECEEF6; --g-surface: #FFFFFF; --g-surface-2: #F5F6FB; --g-ink: #151A2C; --g-muted: #5A6081; --g-line: #D8DBE8;
  --g-sparky: #E8832F; --g-sparky-tint: #FFEBDA; --g-ray: #1E8FD0; --g-ray-tint: #DDEFFA; --g-you: #6A52CC; --g-accent: #6A52CC; --g-accent-soft: #ECE8FB;
  --g-good: #18915B; --g-good-soft: #DDF3E8; --g-bad: #CC3F3F; --g-bad-soft: #FBE3E3; --g-warn: #B7791F; --g-warn-soft: #FBF0DC; --g-chat: #F3F4FA;
  --g-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; --g-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  background: var(--g-bg); color: var(--g-ink); font-family: var(--g-body); border-radius: 16px; padding: 18px; min-height: 60vh;
}
@media (prefers-color-scheme: dark) {
  .gc {
    --g-bg: #0C0F1E; --g-surface: #151A2E; --g-surface-2: #1B2138; --g-ink: #ECEEF8; --g-muted: #9BA1BF; --g-line: #272D4A;
    --g-sparky: #F4A15C; --g-sparky-tint: #3A2817; --g-ray: #53B4EC; --g-ray-tint: #0F2A3D; --g-you: #8A73F0; --g-accent: #9A86F4; --g-accent-soft: #252046;
    --g-good: #3CC489; --g-good-soft: #123326; --g-bad: #F07575; --g-bad-soft: #3A1A1E; --g-warn: #E3AE5A; --g-warn-soft: #3A2C14; --g-chat: #10142A;
    color-scheme: dark;
  }
}
.gc * { box-sizing: border-box; }
.gc [hidden] { display: none !important; }
.gc a { color: var(--g-accent); }
.gc h1, .gc h3, .gc-ep-title, .gc-word { font-family: var(--g-display); letter-spacing: -.01em; text-wrap: balance; }
.gc-empty { padding: 30px; text-align: center; color: var(--g-muted); }
.gc-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.gc-back { font-weight: 700; text-decoration: none; }
.gc-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g-accent); }
.gc-head h1 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; margin: 2px 0 4px; }
.gc-head p { margin: 0 0 14px; color: var(--g-muted); max-width: 66ch; }
.gc-small { font-size: 13px; color: var(--g-muted); }
.gc-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gc-btn { display: inline-block; font: 600 14px var(--g-body); padding: 8px 16px; border-radius: 999px; border: 0; background: var(--g-accent); color: #fff !important; cursor: pointer; text-decoration: none; }
.gc-btn.gc-ghost { background: transparent; color: var(--g-accent) !important; border: 1.5px solid var(--g-accent); }
.gc-btn:disabled { opacity: .5; cursor: default; }
.gc-btn:focus-visible, .gc-opt:focus-visible, .gc-boxes input:focus-visible, .gc-gap:focus-visible, .gc-scenebtn:focus-visible { outline: 3px solid var(--g-accent); outline-offset: 2px; }

/* the set page */
.gc-eps { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.gc-ep { background: var(--g-surface); border: 1px solid var(--g-line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.gc-ep.is-locked { opacity: .65; }
.gc-ep-art { aspect-ratio: 16 / 7; max-width: 100%; display: flex; align-items: flex-end; padding: 12px 14px; color: #fff; font: 800 21px/1.1 var(--g-display); }
.gc-ep-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gc-ep-body p { margin: 0; color: var(--g-muted); font-size: 14px; }
.gc-ep-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--g-muted); font-weight: 600; }
.gc-state { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--g-surface-2); color: var(--g-muted); }
.gc-state.is-next { background: var(--g-accent-soft); color: var(--g-accent); }
.gc-state.is-done { background: var(--g-good-soft); color: var(--g-good); }
.gc-scenes { display: flex; gap: 4px; }
.gc-scenes i { flex: 1; height: 6px; border-radius: 9px; background: var(--g-line); }
.gc-scenes i.is-done { background: var(--g-good); }
.gc-quizrow { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: var(--g-surface); border: 1px solid var(--g-line); border-radius: 16px; padding: 12px 16px; }

/* the player */
.gc-stage { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .gc-stage { grid-template-columns: minmax(0, 1fr); } .gc-rail { order: 2; } }
.gc-phone { background: var(--g-surface); border: 1px solid var(--g-line); border-radius: 28px; box-shadow: 0 18px 50px rgba(30, 36, 70, .16); overflow: hidden;
  display: flex; flex-direction: column; height: min(760px, 82vh); min-height: 520px; width: 100%; max-width: 440px; margin: 0 auto; }
.gc-epbar { padding: 12px 16px 10px; border-bottom: 1px solid var(--g-line); background: var(--g-surface-2); }
.gc-ep-title { font-weight: 700; font-size: 16px; margin-top: 2px; }
.gc-bar { height: 5px; background: var(--g-line); border-radius: 9px; margin-top: 8px; overflow: hidden; }
.gc-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--g-sparky), var(--g-you), var(--g-ray)); border-radius: 9px; transition: width .4s; }
.gc-chathead { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--g-line); }
.gc-chathead b { display: block; font-size: 15px; }
.gc-chathead small { color: var(--g-muted); font-size: 12px; }
.gc-spacer { flex: 1; }
.gc-pill { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--g-accent-soft); color: var(--g-accent); white-space: nowrap; }
.gc-grp { display: flex; }
.gc-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--g-display); color: #fff; flex: none; }
.gc-av.s { background: var(--g-sparky); } .gc-av.r { background: var(--g-ray); } .gc-av.y { background: var(--g-you); }
.gc-grp .gc-av { border: 2px solid var(--g-surface); width: 30px; height: 30px; font-size: 12px; }
.gc-grp .gc-av + .gc-av { margin-left: -9px; }
.gc-feed { flex: 1; overflow-y: auto; background: var(--g-chat); padding: 14px 12px 18px; display: flex; flex-direction: column; gap: 6px; }
.gc-sys { align-self: center; font-size: 12px; color: var(--g-muted); background: var(--g-surface); border: 1px solid var(--g-line); padding: 3px 10px; border-radius: 999px; margin: 6px 0; text-align: center; }
.gc-msg { display: flex; gap: 7px; align-items: flex-end; max-width: 88%; animation: gc-pop .22s ease-out; }
.gc-msg .gc-av { width: 26px; height: 26px; font-size: 11px; }
.gc-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.gc-bub { padding: 8px 12px; border-radius: 18px; font-size: 14.5px; line-height: 1.42; min-width: 0; overflow-wrap: anywhere; }
.gc-msg.s .gc-bub { background: var(--g-sparky-tint); border-bottom-left-radius: 6px; }
.gc-msg.r .gc-bub { background: var(--g-ray-tint); border-bottom-left-radius: 6px; }
.gc-msg.me .gc-bub { background: var(--g-you); color: #fff; border-bottom-right-radius: 6px; }
.gc-who { font-size: 11px; font-weight: 700; margin-bottom: 1px; }
.gc-msg.s .gc-who { color: var(--g-sparky); } .gc-msg.r .gc-who { color: var(--g-ray); }
.gc-msg.cont .gc-av { visibility: hidden; } .gc-msg.cont .gc-who { display: none; }
.gc-react { display: inline-block; margin-top: 2px; font-size: 12px; background: var(--g-surface); border: 1px solid var(--g-line); border-radius: 999px; padding: 0 6px; }
.gc-typing { display: flex; gap: 4px; padding: 10px 12px; background: var(--g-surface); border-radius: 18px; }
.gc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--g-muted); animation: gc-blink 1s infinite; }
.gc-typing i:nth-child(2) { animation-delay: .15s; } .gc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes gc-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes gc-pop { from { transform: translateY(6px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes gc-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .gc-msg, .gc-card { animation: none; } .gc-typing i { animation: none; } }
.gc-media { background: var(--g-surface); border: 1px solid var(--g-line); border-radius: 14px; overflow: hidden; margin-top: 4px; max-width: 240px; }
.gc-thumb { aspect-ratio: 16 / 10; max-width: 100%; background: linear-gradient(135deg, var(--g-ray), var(--g-you)); display: grid; place-items: center; color: #fff; font-size: 30px; }
.gc-cap { font-size: 12px; padding: 6px 9px; color: var(--g-muted); }

.gc-card { align-self: stretch; background: var(--g-surface); border: 1px solid var(--g-line); border-radius: 18px; padding: 12px 14px; margin: 6px 4px; animation: gc-pop .22s ease-out; }
.gc-card p { margin: 4px 0; }
.gc-lab { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--g-muted); display: flex; gap: 6px; align-items: center; }
.gc-lab i { width: 7px; height: 7px; border-radius: 50%; background: var(--g-accent); }
.gc-word { font-size: 24px; font-weight: 800; margin: 2px 0 4px; }
.gc-card.is-veiled .gc-word { filter: blur(7px); user-select: none; }
.gc-eg { color: var(--g-muted); font-style: italic; }
.gc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.gc-chip { font-size: 12.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--g-line); background: var(--g-surface-2); }
.gc-chip.is-same { border-color: var(--g-good); color: var(--g-good); } .gc-chip.is-opp { border-color: var(--g-bad); color: var(--g-bad); }
.gc-chip.is-met { border-color: var(--g-accent); color: var(--g-accent); font-weight: 600; }
.gc-tip { font-size: 13.5px; color: var(--g-muted); }
.gc-flair { margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: var(--g-accent-soft); font-size: 13.5px; }
.gc-flair b { color: var(--g-accent); }
.gc-opts { display: grid; gap: 6px; margin-top: 8px; }
.gc-opt { font: inherit; text-align: left; padding: 9px 12px; border-radius: 12px; border: 1.5px solid var(--g-line); background: var(--g-surface-2); color: var(--g-ink); cursor: pointer; }
.gc-opt:hover:not(:disabled) { border-color: var(--g-accent); }
.gc-opt.is-right { border-color: var(--g-good); background: var(--g-good-soft); }
.gc-opt.is-wrong { border-color: var(--g-bad); background: var(--g-bad-soft); animation: gc-shake .3s; }
.gc-opt:disabled { cursor: default; }
.gc-boxes { display: flex; gap: 5px; flex-wrap: wrap; margin: 10px 0 6px; }
.gc-boxes input { width: 34px; height: 42px; text-align: center; font: 700 19px var(--g-display); text-transform: uppercase; border-radius: 9px; border: 1.5px solid var(--g-line); background: var(--g-surface-2); color: var(--g-ink); padding: 0; }
.gc-boxes input[readonly] { background: var(--g-accent-soft); border-color: transparent; color: var(--g-accent); }
.gc-boxes.is-wrong input { border-color: var(--g-bad); animation: gc-shake .3s; }
.gc-boxes.is-right input { border-color: var(--g-good); background: var(--g-good-soft); color: var(--g-good); }
.gc-passage { font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.7; background: var(--g-surface-2); border-radius: 12px; padding: 10px 12px; margin: 6px 0; }
.gc-gap { display: inline-block; min-width: 80px; border-bottom: 2px dashed var(--g-accent); text-align: center; font: 700 14px var(--g-body); color: var(--g-accent); cursor: pointer; padding: 0 4px; border-radius: 4px; }
.gc-gap.is-on { background: var(--g-accent-soft); } .gc-gap.is-ok { border-bottom: 2px solid var(--g-good); color: var(--g-good); cursor: default; }
.gc-gap.is-no { border-bottom-color: var(--g-bad); color: var(--g-bad); animation: gc-shake .3s; }
.gc-bank { display: flex; flex-wrap: wrap; gap: 6px; }
.gc-bank button { font: 600 13.5px var(--g-body); padding: 5px 11px; border-radius: 999px; border: 1.5px solid var(--g-accent); background: var(--g-surface); color: var(--g-accent); cursor: pointer; }
.gc-bank button:disabled { opacity: .35; cursor: default; }
.gc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.gc-stats div { background: var(--g-surface-2); border-radius: 12px; padding: 8px; text-align: center; }
.gc-stats b { display: block; font: 800 22px var(--g-display); font-variant-numeric: tabular-nums; }
.gc-stats span { font-size: 11.5px; color: var(--g-muted); }
.gc-composer { border-top: 1px solid var(--g-line); padding: 10px 12px; display: flex; gap: 8px; align-items: center; background: var(--g-surface); }
.gc-composer textarea { flex: 1; font: inherit; resize: none; border: 1.5px solid var(--g-line); border-radius: 18px; padding: 8px 12px; background: var(--g-surface-2); color: var(--g-ink); min-height: 40px; }
.gc-hint { flex: 1; font-size: 13px; color: var(--g-muted); }
.gc-toggle { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--g-muted); white-space: nowrap; }
.gc-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gc-panel { background: var(--g-surface); border: 1px solid var(--g-line); border-radius: 18px; padding: 14px 16px; display: grid; gap: 8px; }
.gc-scenelist { display: grid; gap: 6px; }
.gc-scenebtn { display: flex; gap: 10px; align-items: center; text-align: left; font: 600 14px var(--g-body); color: var(--g-ink); background: var(--g-surface-2); border: 1.5px solid transparent; border-radius: 12px; padding: 8px 10px; cursor: pointer; }
.gc-scenebtn span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--g-line); font-size: 12px; flex: none; }
.gc-scenebtn.is-on { border-color: var(--g-accent); }
.gc-scenebtn.is-done span { background: var(--g-good); color: #fff; }
.gc-wordlist { display: flex; flex-wrap: wrap; gap: 5px; }
.gc-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; }