/* Jarvis Academy — page styles. Reuses tokens from style.css; adds a cyan Jarvis accent. */
:root { --ja-cyan:#22d3ee; --ja-cyan-glow:rgba(34,211,238,.22); --ja-glass:rgba(13,17,23,.62); --ja-line:rgba(34,211,238,.22); }
.ja-page section[id] { scroll-margin-top: 90px; }
.ja-cyan { color: var(--ja-cyan); }
.ja-grad { background: linear-gradient(90deg,#22d3ee,#2979ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ja-glass { background: var(--ja-glass); border:1px solid var(--ja-line); border-radius: var(--radius-lg); backdrop-filter: blur(14px); box-shadow: 0 0 40px rgba(34,211,238,.06) inset; }
.ja-tag { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; padding:3px 8px; border-radius:5px; border:1px solid; }
.ja-tag.live { color:var(--green); border-color:rgba(0,230,118,.35); background:rgba(0,230,118,.08); }
.ja-tag.soon { color:#fbbf24; border-color:rgba(251,191,36,.35); background:rgba(251,191,36,.08); }
.ja-tag.sample { color:var(--white-60); border-color:var(--border); background:var(--white-10); }
.ja-btn-cyan { background:linear-gradient(90deg,#22d3ee,#2979ff); color:#031018; font-weight:700; border:0; }
.ja-btn-cyan:hover { box-shadow:0 0 28px var(--ja-cyan-glow); transform:translateY(-2px); }
.ja-btn-outline { background:transparent; color:var(--ja-cyan); border:1px solid var(--ja-line); }
.ja-btn-outline:hover { background:rgba(34,211,238,.08); }

/* Hero */
.ja-hero { position:relative; z-index:1; padding:150px 0 90px; overflow:hidden; text-align:center; }
.ja-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 50% 20%, rgba(34,211,238,.16), transparent 70%), radial-gradient(ellipse 50% 40% at 80% 80%, rgba(41,121,255,.14), transparent 70%); pointer-events:none; }
.ja-hero .container { position:relative; }
.ja-orb { position:relative; width:104px; height:104px; margin:0 auto 28px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #a5f3fc, #22d3ee 40%, #1a56db 100%); box-shadow:0 0 50px var(--ja-cyan-glow), 0 0 120px rgba(41,121,255,.25); animation:jaPulse 3.2s ease-in-out infinite; }
.ja-orb::after { content:''; position:absolute; inset:-14px; border-radius:50%; border:1px solid var(--ja-line); animation:jaRing 3.2s ease-in-out infinite; }
@keyframes jaPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes jaRing { 0%,100%{opacity:.7; transform:scale(1)} 50%{opacity:.15; transform:scale(1.12)} }
.ja-hero h1 { font-family:var(--font-head); font-size:clamp(40px,8vw,84px); font-weight:700; letter-spacing:-1px; line-height:1.02; color:#fff; }
.ja-hero .ja-sub1 { font-family:var(--font-head); font-size:clamp(18px,3vw,26px); color:var(--ja-cyan); margin-top:14px; }
.ja-hero .ja-quote { font-style:italic; color:var(--white-60); margin-top:6px; }
.ja-hero p.ja-lead { max-width:680px; margin:22px auto 0; color:var(--white-60); font-size:17px; }
.ja-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }

/* Level cards */
.ja-levels { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ja-level { padding:30px; display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s, border-color .25s; text-decoration:none; color:inherit; }
.ja-level:hover, .ja-level:focus-visible { transform:translateY(-6px); border-color:var(--ja-cyan); box-shadow:0 14px 50px var(--ja-cyan-glow); outline:none; }
.ja-level .ja-age { color:var(--ja-cyan); font-size:13px; font-weight:600; letter-spacing:.5px; }
.ja-level h3 { font-family:var(--font-head); font-size:28px; margin:6px 0 8px; color:#fff; }
.ja-level p.ja-desc { color:var(--white-60); font-size:15px; margin-bottom:18px; }
.ja-level ul { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin-bottom:24px; font-size:14px; color:var(--white-90); }
.ja-level li::before { content:'›'; color:var(--ja-cyan); margin-right:6px; }
.ja-level .btn { margin-top:auto; justify-content:center; }

/* Mode tabs */
.ja-tabs { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
.ja-tab { background:var(--black-3); color:var(--white-60); border:1px solid var(--border); padding:10px 22px; border-radius:999px; font:600 14px var(--font-main); cursor:pointer; transition:all .2s; }
.ja-tab:hover { color:#fff; border-color:var(--ja-line); }
.ja-tab[aria-selected="true"] { color:#031018; background:linear-gradient(90deg,#22d3ee,#2979ff); border-color:transparent; }
.ja-panel { padding:34px; }
.ja-panel[hidden] { display:none; }
.ja-panel h3 { font-family:var(--font-head); font-size:26px; color:#fff; }
.ja-panel .ja-intro { color:var(--white-60); margin:6px 0 22px; }
.ja-chips { display:flex; flex-wrap:wrap; gap:10px; }
.ja-chip { padding:9px 15px; border-radius:999px; border:1px solid var(--ja-line); background:rgba(34,211,238,.06); font-size:14px; }
.ja-feat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.ja-feat { padding:18px; border:1px solid var(--border); border-radius:var(--radius-md); background:rgba(255,255,255,.02); }
.ja-feat strong { display:block; color:var(--ja-cyan); font-size:12px; letter-spacing:.8px; margin-bottom:4px; }
.ja-feat span { color:var(--white-60); font-size:14px; }

/* Learning brain */
.ja-split { display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:center; }
.ja-brain { padding:28px; }
.ja-brain-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; font-size:12px; letter-spacing:1px; color:var(--ja-cyan); font-weight:700; }
.ja-bar-row { display:grid; grid-template-columns:110px 1fr 44px; gap:12px; align-items:center; margin:11px 0; font-size:14px; }
.ja-bar { height:8px; background:var(--white-10); border-radius:6px; overflow:hidden; }
.ja-bar i { display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,#22d3ee,#2979ff); transition:width 1.2s cubic-bezier(.2,.8,.2,1); }
.ja-bar i.warn { background:linear-gradient(90deg,#fbbf24,#f97316); }
.ja-brain-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; font-size:14px; }
.ja-brain-cols h4 { font-size:11px; letter-spacing:.8px; color:var(--white-60); margin-bottom:6px; }
.ja-ok { color:var(--green); } .ja-warn { color:#fbbf24; }
.ja-next { margin-top:20px; padding:14px 16px; border-radius:var(--radius-md); border:1px dashed var(--ja-line); font-size:14px; }
.ja-checks { list-style:none; margin-top:20px; display:grid; gap:10px; color:var(--white-60); }
.ja-checks li::before { content:'✓'; color:var(--ja-cyan); margin-right:10px; font-weight:700; }

/* Tutor chat */
.ja-chat { padding:0; overflow:hidden; max-width:880px; margin:0 auto; }
.ja-chat-head { display:flex; align-items:center; gap:12px; padding:16px 22px; border-bottom:1px solid var(--ja-line); }
.ja-chat-head .ja-mini-orb { width:34px; height:34px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #a5f3fc, #22d3ee 45%, #1a56db); box-shadow:0 0 18px var(--ja-cyan-glow); flex-shrink:0; }
.ja-chat-head.speaking .ja-mini-orb { animation:jaPulse 1.1s ease-in-out infinite; }
.ja-chat-head b { color:#fff; letter-spacing:1px; } .ja-chat-head small { display:block; color:var(--white-60); font-size:12px; }
.ja-level-pick { margin-left:auto; display:flex; gap:6px; }
.ja-level-pick button { background:none; border:1px solid var(--border); color:var(--white-60); border-radius:999px; padding:5px 12px; font:600 12px var(--font-main); cursor:pointer; }
.ja-level-pick button[aria-pressed="true"] { color:var(--ja-cyan); border-color:var(--ja-cyan); background:rgba(34,211,238,.08); }
.ja-lang-pick { display:flex; gap:4px; padding-left:10px; border-left:1px solid var(--border); }
.ja-lang-pick button { background:none; border:1px solid var(--border); color:var(--white-60); border-radius:999px; padding:5px 10px; font:700 11px var(--font-main); letter-spacing:.06em; cursor:pointer; }
.ja-lang-pick button[aria-pressed="true"] { color:var(--ja-cyan); border-color:var(--ja-cyan); background:rgba(34,211,238,.08); }
.ja-msgs { padding:22px; display:flex; flex-direction:column; gap:14px; min-height:260px; max-height:460px; overflow-y:auto; }
.ja-msg { max-width:86%; padding:12px 16px; border-radius:16px; font-size:15px; line-height:1.55; white-space:pre-wrap; }
.ja-msg.user { align-self:flex-end; background:rgba(41,121,255,.2); border:1px solid rgba(41,121,255,.35); border-bottom-right-radius:4px; }
.ja-msg.bot { align-self:flex-start; background:rgba(34,211,238,.07); border:1px solid var(--ja-line); border-bottom-left-radius:4px; }
.ja-msg.bot .ja-who { display:block; font-size:11px; letter-spacing:1px; color:var(--ja-cyan); font-weight:700; margin-bottom:3px; }
.ja-steps { list-style:none; margin-top:10px; display:grid; gap:6px; }
.ja-steps li { padding:8px 12px; border-radius:8px; background:rgba(255,255,255,.04); font-size:14px; }
.ja-steps b { color:var(--ja-cyan); font-size:11px; letter-spacing:.8px; margin-right:8px; }
.ja-typing { display:inline-flex; gap:4px; } .ja-typing i { width:6px; height:6px; border-radius:50%; background:var(--ja-cyan); animation:jaDot 1s infinite; } .ja-typing i:nth-child(2){animation-delay:.15s} .ja-typing i:nth-child(3){animation-delay:.3s}
@keyframes jaDot { 0%,100%{opacity:.25} 50%{opacity:1} }
.ja-quick { display:flex; flex-wrap:wrap; gap:8px; padding:0 22px 14px; }
.ja-quick button { background:rgba(34,211,238,.06); color:var(--ja-cyan); border:1px solid var(--ja-line); padding:8px 14px; border-radius:999px; font:700 11px var(--font-main); letter-spacing:.7px; cursor:pointer; transition:background .2s; }
.ja-quick button:hover:not(:disabled) { background:rgba(34,211,238,.16); }
.ja-quick button:disabled, .ja-form button:disabled, .ja-form input:disabled { opacity:.45; cursor:not-allowed; }
.ja-form { display:flex; gap:10px; padding:0 22px 20px; }
.ja-form input { flex:1; min-width:0; background:var(--black-2); border:1px solid var(--border); border-radius:12px; padding:13px 16px; color:#fff; font:15px var(--font-main); }
.ja-form input:focus { outline:none; border-color:var(--ja-cyan); box-shadow:0 0 0 3px var(--ja-cyan-glow); }
.ja-chat-foot { padding:0 22px 18px; font-size:12px; color:var(--white-30); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.ja-gate { margin:0 22px 20px; padding:18px; border-radius:var(--radius-md); background:rgba(34,211,238,.07); border:1px solid var(--ja-cyan); text-align:center; }
.ja-gate[hidden] { display:none; }
.ja-loop { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; align-items:center; margin-top:34px; font-size:12px; letter-spacing:.8px; color:var(--white-60); }
.ja-loop span { padding:6px 12px; border:1px solid var(--border); border-radius:999px; } .ja-loop em { font-style:normal; color:var(--ja-cyan); }

/* Cards grids */
.ja-four { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.ja-card { padding:26px; transition:transform .25s, border-color .25s; }
.ja-card:hover { transform:translateY(-5px); border-color:var(--ja-cyan); }
.ja-card h3 { font-family:var(--font-head); color:var(--ja-cyan); letter-spacing:1px; font-size:15px; margin-bottom:8px; }
.ja-card p { color:var(--white-60); font-size:15px; }

/* Exam */
.ja-exam { padding:34px; max-width:760px; margin:0 auto; }
.ja-exam-top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; align-items:baseline; }
.ja-exam h3 { font-family:var(--font-head); font-size:22px; color:#fff; }
.ja-days { font:700 clamp(40px,7vw,64px) var(--font-head); color:var(--ja-cyan); line-height:1; }
.ja-days small { font-size:14px; letter-spacing:1px; color:var(--white-60); margin-left:6px; }
.ja-progress { margin:22px 0 6px; } .ja-progress .ja-bar { height:12px; }
.ja-today { margin-top:26px; padding:20px; border-radius:var(--radius-md); background:rgba(255,255,255,.03); border:1px solid var(--border); }
.ja-today h4 { font-size:11px; letter-spacing:1px; color:var(--ja-cyan); } .ja-today ul { margin:10px 0 0 18px; color:var(--white-60); display:grid; gap:4px; }

/* Voice */
.ja-voice { padding:40px 28px; text-align:center; }
.ja-wave { display:flex; align-items:center; justify-content:center; gap:5px; height:90px; margin:0 0 26px; }
.ja-wave i { width:5px; border-radius:4px; background:linear-gradient(to top,#2979ff,#22d3ee); height:14px; animation:jaWave 1.2s ease-in-out infinite; }
@keyframes jaWave { 0%,100%{height:12px;opacity:.55} 50%{height:78px;opacity:1} }
.ja-mic { width:64px; height:64px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--ja-cyan); background:rgba(34,211,238,.08); box-shadow:0 0 30px var(--ja-cyan-glow); }
.ja-says { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:760px; margin:0 auto; text-align:left; }
.ja-says div { padding:14px 18px; border-radius:var(--radius-md); border:1px solid var(--ja-line); background:rgba(34,211,238,.05); font-size:15px; }
.ja-says div::before { content:'\201C'; color:var(--ja-cyan); } .ja-says div::after { content:'\201D'; color:var(--ja-cyan); }

/* Dashboards */
.ja-dash { padding:28px; }
.ja-dash h4 { font-size:12px; letter-spacing:1px; color:var(--ja-cyan); margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.ja-stat-row { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:16px; }
.ja-stat { padding:14px; border-radius:var(--radius-md); background:rgba(255,255,255,.03); border:1px solid var(--border); }
.ja-stat b { display:block; font:700 26px var(--font-head); color:#fff; } .ja-stat span { font-size:12px; color:var(--white-60); }
.ja-line { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:14px; }
.ja-line:last-child { border:0; }
.ja-up { color:var(--green); } .ja-dev { color:#fbbf24; } .ja-bad { color:#f87171; }
.ja-privacy { margin-top:18px; font-size:13px; color:var(--white-60); padding:12px 14px; border-radius:var(--radius-md); background:rgba(34,211,238,.05); border:1px solid var(--ja-line); }

/* Availability + safety + pricing */
.ja-avail { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.ja-avail .ja-glass { padding:26px; } .ja-avail h3 { font-size:14px; letter-spacing:1px; margin-bottom:14px; }
.ja-avail ul { list-style:none; display:grid; gap:9px; font-size:15px; color:var(--white-90); }
.ja-avail ul.live li::before { content:'●'; color:var(--green); margin-right:10px; font-size:10px; } .ja-avail ul.soon li::before { content:'○'; color:#fbbf24; margin-right:10px; }
.ja-safety { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ja-safety .ja-card h3 { color:#fff; letter-spacing:0; font-size:17px; }
.ja-price { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.ja-plan { padding:30px; display:flex; flex-direction:column; }
.ja-plan.hot { border-color:var(--ja-cyan); box-shadow:0 0 50px var(--ja-cyan-glow); }
.ja-plan h3 { font-family:var(--font-head); font-size:20px; color:#fff; }
.ja-plan .ja-amt { font:700 38px var(--font-head); margin:10px 0 2px; color:var(--ja-cyan); } .ja-plan .ja-amt small { font-size:14px; color:var(--white-60); font-weight:400; }
.ja-plan ul { list-style:none; margin:18px 0 22px; display:grid; gap:9px; font-size:14px; color:var(--white-90); }
.ja-plan li::before { content:'✓'; color:var(--ja-cyan); margin-right:9px; }
.ja-plan .btn { margin-top:auto; justify-content:center; }
.ja-note { text-align:center; color:var(--white-30); font-size:13px; margin-top:20px; }

/* Final CTA */
.ja-cta { text-align:center; padding:60px 28px; }
.ja-cta h2 { font-family:var(--font-head); font-size:clamp(28px,5vw,44px); color:#fff; }
.ja-cta p { color:var(--white-60); margin:12px 0 0; }

/* Responsive */
@media (max-width:1024px) { .ja-four { grid-template-columns:repeat(2,1fr); } .ja-split { grid-template-columns:1fr; } }
@media (max-width:900px) { .ja-levels, .ja-safety, .ja-price { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) {
  .ja-hero { padding:120px 0 60px; }
  .ja-levels, .ja-four, .ja-safety, .ja-price, .ja-avail, .ja-says, .ja-feat-grid, .ja-brain-cols { grid-template-columns:1fr; }
  .ja-bar-row { grid-template-columns:90px 1fr 40px; }
  .ja-level-pick { margin-left:0; width:100%; } .ja-chat-head { flex-wrap:wrap; }
  .ja-lang-pick { padding-left:0; border-left:0; }
  .ja-panel, .ja-exam { padding:24px 18px; } .ja-form { flex-direction:column; }
  .ja-msg { max-width:94%; }
}
@media (prefers-reduced-motion: reduce) {
  .ja-orb, .ja-orb::after, .ja-wave i, .ja-chat-head.speaking .ja-mini-orb, .ja-typing i { animation:none !important; }
  .ja-wave i { height:36px; } .ja-bar i { transition:none; } .ja-level, .ja-card { transition:none; }
}

/* Accounts */
.ja-authbar { max-width:880px; margin:0 auto 12px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--white-60); }
.ja-link { background:none; border:0; color:var(--white-60); font:600 13px var(--font-main); cursor:pointer; padding:4px 8px; }
.ja-link:hover { color:#fff; } .ja-link-strong { color:var(--ja-cyan); } .ja-link[hidden] { display:none; }
.ja-dialog { margin:auto; width:min(440px,92vw); padding:0; background:var(--black-2); color:var(--white-90); border:1px solid var(--ja-cyan); border-radius:var(--radius-lg); box-shadow:0 0 70px var(--ja-cyan-glow); }
.ja-dialog::backdrop { background:rgba(2,4,10,.75); backdrop-filter:blur(4px); }
.ja-dialog form { padding:30px 26px 24px; position:relative; }
.ja-dialog h3 { font-family:var(--font-head); color:#fff; margin-bottom:16px; }
.ja-x { position:absolute; top:10px; right:14px; background:none; border:0; color:var(--white-60); font-size:26px; cursor:pointer; }
.ja-fields { display:grid; gap:12px; margin-bottom:14px; }
.ja-fields label { display:grid; gap:5px; font-size:13px; color:var(--white-60); }
.ja-fields input:not([type=checkbox]), .ja-fields select { background:var(--black-3); border:1px solid var(--border); border-radius:10px; padding:11px 13px; color:#fff; font:15px var(--font-main); }
.ja-fields input:focus, .ja-fields select:focus { outline:none; border-color:var(--ja-cyan); box-shadow:0 0 0 3px var(--ja-cyan-glow); }
.ja-fields .ja-check { display:flex; gap:10px; align-items:flex-start; line-height:1.4; } .ja-check input { margin-top:3px; accent-color:#22d3ee; }
.ja-err { color:#f87171; font-size:13px; margin-bottom:12px; } .ja-err[hidden] { display:none; }
.ja-live .ja-bar-row { grid-template-columns:minmax(120px,190px) 1fr 44px; }
.ja-live .ja-bar-row small { color:var(--white-30); display:block; font-size:11px; }
@media (max-width:640px) { .ja-live .ja-bar-row { grid-template-columns:110px 1fr 40px; } }

/* Parent view + sharing */
.ja-share { margin-top:18px; padding:14px 16px; border:1px dashed var(--ja-line); border-radius:var(--radius-md); font-size:14px; }
.ja-share p { color:var(--white-60); font-size:13px; margin:4px 0 10px; }
.ja-share-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.ja-share code { font:700 22px var(--font-head); letter-spacing:3px; color:var(--ja-cyan); background:rgba(34,211,238,.08); padding:6px 14px; border-radius:8px; user-select:all; }
.ja-share code[hidden], .ja-share button[hidden] { display:none; }
.ja-child { padding:18px 0; border-top:1px solid var(--border); }
.ja-child:first-child { border-top:0; }
.ja-child-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.ja-child-head b { font:700 20px var(--font-head); color:#fff; } .ja-child-head small { color:var(--white-60); margin-left:8px; }
.ja-child .ja-stat-row { grid-template-columns:repeat(3,1fr); }
.ja-child .ja-stat b { font-size:22px; }
.ja-child ul { list-style:none; font-size:14px; display:grid; gap:4px; margin-top:6px; }
.ja-child h5 { font-size:11px; letter-spacing:.8px; color:var(--white-60); margin-top:12px; }
.ja-empty { color:var(--white-60); font-size:14px; padding:6px 0 14px; }
@media (max-width:640px) { .ja-child .ja-stat-row { grid-template-columns:1fr 1fr; } }

/* Maths Challenge game (assets/js/academy-game.js) */
.ja-game { position:relative; max-width:760px; margin:0 auto; padding:30px; overflow:hidden; }
.jg-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:16px; }
.jg-label { min-width:56px; font-size:12px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--ja-cyan); }
.jg-choices { display:flex; flex-wrap:wrap; gap:8px; }
.jg-choices .ja-tab { padding:9px 16px; }
.jg-topic { background:var(--black-3); color:var(--white-90); border:1px solid var(--border); padding:9px 15px; border-radius:999px; font:600 14px var(--font-main); cursor:pointer; transition:all .2s; }
.jg-topic:hover { border-color:var(--ja-line); }
.jg-topic[aria-pressed="true"] { border-color:var(--ja-cyan); color:var(--ja-cyan); background:rgba(34,211,238,.1); }
.jg-best { color:var(--white-60); margin:8px 0 18px; }
.jg-go { min-width:200px; justify-content:center; }
.jg-note { margin-top:14px; text-align:left; }

.jg-hud { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; font-size:15px; color:var(--white-60); }
.jg-hud b { color:#fff; font-size:20px; font-variant-numeric:tabular-nums; }
.jg-mult { font-weight:800; color:var(--white-60); padding:3px 10px; border-radius:999px; border:1px solid var(--border); }
.jg-mult.hot { color:#031018; background:linear-gradient(90deg,#fbbf24,#f97316); border-color:transparent; animation:jgPop .3s; }
.jg-diff { font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:var(--ja-cyan); }
.jg-hud .ja-link:first-of-type { margin-left:auto; }
.jg-timebar { height:6px; border-radius:6px; background:var(--black-3); margin:12px 0 20px; overflow:hidden; }
.jg-timebar i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#22d3ee,#2979ff); transition:width .1s linear; }
.jg-timebar.low i { background:linear-gradient(90deg,#f87171,#fbbf24); }
.jg-q { text-align:center; font-family:var(--font-head); font-size:clamp(34px,7vw,58px); font-weight:700; color:#fff; line-height:1.15; min-height:1.2em; }
.jg-q.good { animation:jgGood .35s; }
.jg-q.bad { animation:jgBad .35s; }
.jg-answer { text-align:center; font-size:clamp(30px,6vw,44px); font-weight:700; color:var(--ja-cyan); min-height:1.3em; margin:6px auto 4px; max-width:260px; border-bottom:2px solid var(--ja-line); font-variant-numeric:tabular-nums; }
.jg-feedback { text-align:center; min-height:3em; margin:10px auto 14px; max-width:560px; font-size:15px; color:var(--white-60); line-height:1.5; }
.jg-feedback.good { color:var(--green); }
.jg-feedback.bad { color:#fca5a5; }
.jg-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:360px; margin:0 auto; }
.jg-key { padding:14px 0; font:700 22px var(--font-main); color:#fff; background:var(--black-3); border:1px solid var(--border); border-radius:var(--radius-md); cursor:pointer; touch-action:manipulation; user-select:none; transition:background .12s, transform .08s; }
.jg-key:hover { border-color:var(--ja-line); }
.jg-key:active { transform:scale(.96); background:rgba(34,211,238,.12); }
.jg-ok { grid-column:1 / -1; color:#031018; background:linear-gradient(90deg,#22d3ee,#2979ff); border:0; }

.jg-end { text-align:center; }
.jg-stars { font-size:44px; letter-spacing:6px; color:#fbbf24; text-shadow:0 0 22px rgba(251,191,36,.45); }
.jg-score { font-family:var(--font-head); font-size:clamp(30px,6vw,46px); color:#fff; margin:4px 0; }
.jg-newbest { color:var(--green); font-weight:700; }
.jg-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0; }
.jg-statbox { padding:12px 6px; border:1px solid var(--border); border-radius:var(--radius-md); background:rgba(255,255,255,.02); }
.jg-statbox b { display:block; color:#fff; font-size:20px; }
.jg-statbox span { color:var(--white-60); font-size:12px; }
.jg-jarvis { font-style:italic; color:var(--white-90); max-width:560px; margin:6px auto 20px; }
.jg-btns { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; }
.jg-save { margin-top:16px; }

.jg-confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.jg-confetti i { position:absolute; top:-12px; width:8px; height:14px; border-radius:2px; animation:jgFall 2.6s ease-in forwards; }
@keyframes jgFall { to { top:110%; transform:rotate(720deg); } }
@keyframes jgGood { 50% { transform:scale(1.08); color:var(--green); } }
@keyframes jgBad { 20%,60% { transform:translateX(-8px); } 40%,80% { transform:translateX(8px); } }
@keyframes jgPop { 50% { transform:scale(1.25); } }
@media (max-width:600px) {
  .ja-game { padding:20px 14px; }
  .jg-stats { grid-template-columns:repeat(2,1fr); }
  .jg-hud { font-size:13px; gap:8px 12px; }
}
@media (prefers-reduced-motion: reduce) { .jg-q.good, .jg-q.bad, .jg-mult.hot { animation:none; } .jg-confetti { display:none; } }
/* While a Maths Challenge round is running, the sales chat bubble would cover the keypad. */
body.jg-playing #ah-chat-launcher { display:none !important; }

/* Spelling Bee (assets/js/academy-spelling.js); shares .jg-* game styles with the Maths Challenge */
#jaGameTabs { margin-bottom:18px; }
.ja-game[hidden] { display:none; }
.js-practise { margin-left:8px; }
.js-listen { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:16px 0 6px; }
.js-flash { text-align:center; font-family:var(--font-head); font-size:clamp(34px,7vw,56px); font-weight:700; color:var(--ja-cyan); letter-spacing:2px; margin:10px 0 2px; animation:jgPop .4s; }
.js-clue { text-align:center; color:var(--white-90); font-size:18px; margin:10px auto 14px; max-width:560px; }
.js-tiles { display:flex; flex-wrap:nowrap; justify-content:center; gap:6px; margin:6px auto 4px; max-width:100%; }
.js-tile { flex:0 1 44px; min-width:0; width:clamp(30px,7vw,44px); height:clamp(38px,8.5vw,52px); display:grid; place-items:center; font:700 clamp(20px,4.5vw,28px) var(--font-main); color:#fff; text-transform:lowercase; background:var(--black-3); border:2px solid var(--border); border-radius:8px; }
.js-tile.js-cursor { border-color:var(--ja-cyan); box-shadow:0 0 12px var(--ja-cyan-glow); }
.js-tile.js-extra { border-style:dashed; }
.js-tile.js-right { background:rgba(0,230,118,.18); border-color:var(--green); }
.js-tile.js-wrong { background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.5); color:#fca5a5; }
.js-kb { max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:7px; }
.js-kbrow { display:flex; gap:6px; justify-content:center; }
.js-k { flex:1 1 0; max-width:48px; padding:12px 0; font-size:19px; text-transform:lowercase; }
.js-back { max-width:64px; }
.js-check { width:100%; }
.js-kb.js-wait { opacity:.35; pointer-events:none; }
.js-words { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:-6px 0 14px; }
.js-word { padding:6px 12px; border-radius:999px; border:1px solid rgba(251,191,36,.4); background:rgba(251,191,36,.08); color:#fde68a; font-weight:600; }
@media (max-width:600px) { .js-tiles { gap:4px; } .js-kbrow { gap:4px; } .js-k { padding:11px 0; font-size:17px; } .js-clue { font-size:16px; } }

/* Science Quiz (assets/js/academy-science.js); shares .jg-* game styles */
.sq-tag { text-align:center; font-size:12px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--ja-cyan); margin:4px 0 6px; }
.sq-q { text-align:center; font-family:var(--font-head); font-size:clamp(20px,3.6vw,28px); font-weight:700; color:#fff; line-height:1.3; max-width:620px; margin:0 auto 18px; }
.sq-opts { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:640px; margin:0 auto; }
.sq-opt { display:flex; align-items:center; gap:10px; text-align:left; padding:14px 16px; min-height:58px; font:600 15px var(--font-main); color:#fff; background:var(--black-3); border:1px solid var(--border); border-radius:var(--radius-md); cursor:pointer; transition:border-color .15s, background .15s, opacity .2s; touch-action:manipulation; }
.sq-opt:hover:not(:disabled) { border-color:var(--ja-cyan); background:rgba(34,211,238,.06); }
.sq-opt:disabled { cursor:default; }
.sq-key { flex:none; width:26px; height:26px; display:grid; place-items:center; border-radius:6px; font-size:13px; color:var(--ja-cyan); border:1px solid var(--ja-line); }
.sq-opt.sq-right { border-color:var(--green); background:rgba(0,230,118,.14); }
.sq-opt.sq-wrong { border-color:rgba(248,113,113,.7); background:rgba(248,113,113,.12); animation:jgBad .35s; }
.sq-opt.sq-gone { opacity:.25; }
.sq-fact { max-width:640px; margin:16px auto 0; padding:14px 16px; border-radius:var(--radius-md); font-size:15px; line-height:1.55; color:var(--white-90); border:1px solid var(--border); background:rgba(255,255,255,.03); }
.sq-fact.good b { color:var(--green); }
.sq-fact.bad b { color:#fca5a5; }
.sq-next { display:flex; margin:16px auto 0; min-width:200px; justify-content:center; }
.sq-fifty { font-weight:700; color:#fbbf24 !important; }
.sq-fifty:disabled { opacity:.45; cursor:default; }
.sq-review { text-align:left; max-width:640px; margin:0 auto 18px; border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 16px; background:rgba(255,255,255,.02); }
.sq-review summary { cursor:pointer; font-weight:700; color:#fde68a; }
.sq-rev-item { display:flex; flex-direction:column; gap:3px; padding:10px 0; border-top:1px solid var(--border); margin-top:10px; font-size:14px; }
.sq-rev-item b { color:#fff; }
.sq-rev-a { color:var(--green); }
.sq-rev-f { color:var(--white-60); }
@media (max-width:600px) { .sq-opts { grid-template-columns:1fr; } .sq-opt { min-height:52px; } }
/* Game parts hidden with the hidden attribute must stay hidden even when their class sets display. */
.ja-game [hidden] { display:none !important; }

/* Link to GCSE Literature Games (gcse-literature.html) under the Play & learn games */
.ja-lit-promo { display:flex; align-items:center; gap:18px; max-width:760px; margin:18px auto 0; box-sizing:border-box; padding:18px 22px; text-decoration:none; color:inherit; transition:transform .2s, border-color .2s, box-shadow .2s; }
.ja-lit-promo:hover { transform:translateY(-3px); border-color:var(--ja-cyan); box-shadow:0 12px 40px var(--ja-cyan-glow); }
.ja-lit-ic { font-size:34px; flex:none; }
.ja-lit-txt { display:flex; flex-direction:column; gap:4px; flex:1; }
.ja-lit-txt b { color:#fff; font-family:var(--font-head); font-size:17px; }
.ja-lit-txt span { color:var(--white-60); font-size:14px; }
.ja-lit-go { flex:none; color:var(--ja-cyan); font-weight:700; white-space:nowrap; }
@media (max-width:600px) { .ja-lit-promo { flex-wrap:wrap; } .ja-lit-go { width:100%; } }

/* ===== Homework Help (assets/js/academy-homework.js) ===== */
.ja-hw-cta { max-width:880px; margin:18px auto 0; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ja-hw-cta span { color:var(--white-60); font-size:14px; }
.ja-hw { max-width:880px; margin:16px auto 0; padding:22px; }
.ja-hw h3 { margin:0; color:#fff; font-family:var(--font-head); font-size:20px; }
.ja-hw h4 { margin:18px 0 8px; color:var(--ja-cyan); font-size:13px; letter-spacing:1px; text-transform:uppercase; }
.ja-hw-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.ja-hw-quota { font-size:12px; color:var(--ja-cyan); border:1px solid var(--ja-line); border-radius:999px; padding:4px 10px; }
.ja-hw-quota.none { color:#ffb547; border-color:rgba(255,181,71,.4); }
.ja-hw-src { display:flex; gap:10px; flex-wrap:wrap; }
.ja-hw-tip { color:var(--white-60); font-size:13px; margin:10px 0; }
.ja-hw-text, .ja-hw-note, .ja-hw-pin { width:100%; box-sizing:border-box; background:var(--black-3); color:var(--white); border:1px solid var(--border); border-radius:12px; padding:11px 13px; font:15px/1.5 var(--font-main); margin-top:8px; }
.ja-hw-text:focus, .ja-hw-note:focus, .ja-hw-pin:focus { outline:none; border-color:var(--ja-cyan); }
.ja-hw-pin { width:130px; margin-top:0; letter-spacing:4px; }
.ja-hw-actions { display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; }
.ja-hw-pages { display:flex; gap:12px; flex-wrap:wrap; margin:10px 0; }
.ja-hw-page { margin:0; background:var(--white-10); border:1px solid var(--border); border-radius:12px; padding:8px; }
.ja-hw-thumb { display:block; max-width:150px; max-height:190px; border-radius:6px; }
.ja-hw-page figcaption { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--white-60); margin-top:6px; }
.ja-hw-page figcaption button { background:none; border:1px solid var(--border); color:var(--white-90); border-radius:8px; width:30px; height:30px; cursor:pointer; }
.ja-hw-pdf { padding:10px 14px; border-radius:12px; background:var(--white-10); color:var(--white-90); display:flex; gap:12px; align-items:center; }
.ja-hw-limit { color:#ffb547; }
.ja-hw-recent { margin-top:18px; border-top:1px solid var(--border); padding-top:6px; }
.ja-hw-row { display:flex; gap:10px; align-items:baseline; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--border); padding:10px 2px; color:var(--white-90); cursor:pointer; font:inherit; flex-wrap:wrap; }
.ja-hw-row:hover b { color:var(--ja-cyan); }
.ja-hw-row b { color:#fff; } .ja-hw-row span { color:var(--white-60); font-size:13px; } .ja-hw-row em { color:#ffb547; font-size:12px; }
.ja-hw-jarvis { background:rgba(34,211,238,.06); border:1px solid var(--ja-line); border-radius:14px; padding:12px 14px; color:var(--white-90); white-space:pre-wrap; line-height:1.6; }
.ja-hw-jarvis .ja-who { display:block; margin-bottom:4px; }
.ja-hw-test { color:#ffb547; font-size:14px; }
.ja-hw-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin-top:12px; }
.ja-hw-card { display:flex; flex-direction:column; gap:8px; text-align:left; background:var(--white-10); border:1px solid var(--border); border-radius:14px; padding:14px; color:var(--white-90); cursor:pointer; font:inherit; transition:transform .15s, border-color .15s; }
.ja-hw-card:hover { transform:translateY(-3px); border-color:var(--ja-cyan); }
.ja-hw-num { font:700 12px var(--font-main); color:var(--ja-cyan); letter-spacing:1px; }
.ja-hw-q { font-size:14px; line-height:1.45; }
.ja-hw-chip { align-self:flex-start; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--white-10); color:var(--white-90); }
.ja-hw-chip.ok { background:rgba(0,230,118,.12); color:#00e676; } .ja-hw-chip.dim { color:var(--white-60); }
.ja-hw-qbox { background:var(--white-10); border-radius:14px; padding:14px 16px; }
.ja-hw-qbox p { margin:6px 0 0; color:#fff; font-size:16px; line-height:1.55; white-space:pre-wrap; }
.ja-hw-qbox .ja-hw-ctx { color:var(--white-60); font-size:14px; }
.ja-hw-row2 { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.ja-hw-lesson { margin-top:10px; }
.ja-hw-result { margin-top:10px; padding:10px 12px; border-radius:12px; background:var(--white-10); color:var(--white-90); }
.ja-hw-result.correct { background:rgba(0,230,118,.1); } .ja-hw-result.correct b { color:#00e676; }
.ja-hw-result.partial b { color:#ffb547; } .ja-hw-result.incorrect b { color:#ff5c7a; }
.ja-hw-answer { border:1px dashed var(--ja-line); border-radius:14px; padding:14px; color:var(--white-90); }
.ja-hw-answer.open { border-style:solid; border-color:rgba(0,230,118,.5); background:rgba(0,230,118,.06); }
.ja-hw-answer p { margin:6px 0 0; white-space:pre-wrap; line-height:1.6; }
.ja-hw-lockline { font-weight:700; color:#fff; }
.ja-hw-unlock { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.ja-hw-unlock > .btn { align-self:flex-start; }
.ja-hw-pinrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--white-60); font-size:14px; }
.ja-hw-note-from { color:#ffb547; }
.ja-hw-busy { display:flex; align-items:center; gap:10px; color:var(--white-60); padding:12px 0; }
.ja-hw-spin { width:18px; height:18px; border-radius:50%; border:2px solid var(--white-10); border-top-color:var(--ja-cyan); animation:jaHwSpin .8s linear infinite; }
@keyframes jaHwSpin { to { transform:rotate(360deg); } }
.ja-crop { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.75); display:grid; place-items:center; padding:16px; }
.ja-crop-card { background:var(--black-2); border:1px solid var(--ja-line); border-radius:16px; padding:16px; max-width:min(94vw,720px); }
.ja-crop-card p { color:var(--white-90); margin:0 0 10px; font-size:14px; }
.ja-crop-stage { position:relative; display:inline-block; max-width:100%; touch-action:none; user-select:none; }
.ja-crop-stage canvas { display:block; max-width:100%; max-height:65vh; height:auto; }
.ja-crop-box { position:absolute; border:2px solid var(--ja-cyan); box-shadow:0 0 0 9999px rgba(0,0,0,.45); cursor:move; touch-action:none; }
.ja-crop-box i { position:absolute; width:22px; height:22px; background:var(--ja-cyan); border-radius:50%; }
.ja-crop-box i[data-h="nw"] { left:-11px; top:-11px; cursor:nwse-resize; } .ja-crop-box i[data-h="ne"] { right:-11px; top:-11px; cursor:nesw-resize; }
.ja-crop-box i[data-h="sw"] { left:-11px; bottom:-11px; cursor:nesw-resize; } .ja-crop-box i[data-h="se"] { right:-11px; bottom:-11px; cursor:nwse-resize; }
/* parent */
.ja-hwp { margin-top:22px; border-top:1px solid var(--border); padding-top:6px; }
.ja-hwp h4 { margin:14px 0 8px; }
.ja-hwp-card { background:var(--white-10); border:1px solid rgba(255,181,71,.35); border-radius:14px; padding:14px; margin-bottom:12px; color:var(--white-90); }
.ja-hwp-card p { margin:8px 0; white-space:pre-wrap; }
.ja-hwp-top { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; } .ja-hwp-top b { color:#fff; } .ja-hwp-top small { color:var(--white-60); }
.ja-hwp-card details summary, .ja-hwp-hw summary { cursor:pointer; color:var(--ja-cyan); }
.ja-hwp-pin { display:flex; flex-direction:column; gap:6px; background:var(--white-10); border-radius:14px; padding:14px; margin:12px 0; color:var(--white-90); }
.ja-hwp-hw { border-bottom:1px solid var(--border); padding:10px 0; color:var(--white-90); }
.ja-hwp-hw ul { margin:8px 0; padding-left:18px; } .ja-hwp-hw li { margin:4px 0; } .ja-hwp-hw small { color:var(--white-60); }
@media (max-width:600px) { .ja-hw { padding:16px 14px; } .ja-hw-cards { grid-template-columns:1fr; } }
.ja-hw-cta[hidden], .ja-hw[hidden] { display:none; }
.ja-hw-small { color:var(--white-60); font-size:13px; }