/* ==========================================================================
   Swift AI Academy - activity frame upgrade layer (family A: Deck games)
   Loaded AFTER style.css. Non-destructive: remove the two tags to roll back.
   - Full-width two-column cards (head left, activity right), bigger type
   - One option look for every choice; hover/press/selected states
   - Text lock (typed fields excepted), idle nudge glow, phone single column
   ========================================================================== */

/* ---- 1. full-width card, two columns: .head left, everything else right ---- */
.slide { padding-inline: clamp(8px, 2vw, 32px); }
.card, .card.narrow, .card.quiz, .card.wide { max-width: min(1280px, 100%); width: 100%; }
.card.saa-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-inline: clamp(24px, 4vw, 56px);
}
.card.saa-split > .saa-lead,
.card.saa-split > .saa-work { min-width: 0; display: flex; flex-direction: column; gap: inherit; }
.card.saa-split .title { font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.12; }
.card.saa-split .lede  { font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.55; max-width: none; }

/* ---- 2. one option look ---- */
.opts { gap: clamp(8px, 1.4vh, 12px); }
.opt, button.tile, .tile.pick, .select {
  min-height: clamp(46px, 7.2vh, 64px);
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.opt:hover:not([disabled]):not(.locked), button.tile:hover { transform: translateY(-1px); border-color: var(--blue, #5B76FF); }
.opt:active:not([disabled]), button.tile:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); }

/* ---- 3. text lock ---- */
html, body, body * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; }

/* ---- 4. idle nudge ---- */
@keyframes saaGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(143, 160, 255, 0), 0 0 0 rgba(143, 160, 255, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(143, 160, 255, 0.5), 0 0 26px rgba(143, 160, 255, 0.6); border-color: #8FA0FF; }
}
@keyframes saaGlowAmber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 104, 0); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 193, 104, 0.55), 0 0 34px rgba(255, 193, 104, 0.85); }
}
.saa-nudge { animation: saaGlow 1.3s ease-in-out infinite !important; position: relative; z-index: 1; }
.btn-primary.saa-nudge, #primary.saa-nudge { animation: saaGlowAmber 1.3s ease-in-out infinite !important; }
@media (prefers-reduced-motion: reduce) { .saa-nudge { animation: none !important; outline: 2px solid #8FA0FF; } }

/* ---- 5. phones and narrow windows: single column ---- */
@media (max-width: 900px) {
  .card.saa-split { display: flex; flex-direction: column; align-items: stretch; }
}

/* phones: both columns use the card's full width (the desktop rule centres them, which squeezed the activity) */
@media (max-width: 760px) { .card.saa-split > .saa-lead, .card.saa-split > .saa-work { align-self: stretch; width: auto; } }

/* ==========================================================================
   COMMON (all games): start screen, "Your task" line, one-amber guard
   ========================================================================== */
/* ---- start screen (handoff: Module Opening Premium) ---- */
.saa-start{position:fixed;inset:0;z-index:9999;overflow:hidden;background:#020306;color:#FAFAF8;
  font-family:'Instrument Sans',system-ui,sans-serif;
  background-image:radial-gradient(ellipse 55% 60% at 22% 8%,rgba(91,118,255,.22) 0,rgba(91,118,255,0) 60%),radial-gradient(ellipse 48% 55% at 82% 96%,rgba(243,171,49,.09) 0,rgba(243,171,49,0) 60%);
  transition:opacity .5s,visibility .5s;-webkit-user-select:none;user-select:none}
.saa-start.gone{opacity:0;visibility:hidden}
.saa-start .saa-ghost{position:absolute;left:50%;top:-30vh;transform:translateX(-50%);font-size:min(46vw,58vh);font-weight:600;color:#fff;opacity:.035;letter-spacing:-.05em;line-height:1;pointer-events:none}
.saa-start .saa-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:clamp(24px,7vh,60px) clamp(20px,6vw,72px)}
.saa-start .saa-brand{display:flex;align-items:center;gap:14px}
.saa-start .saa-brand img,.saa-start .saa-brand .brand-mark{width:40px;height:36px;object-fit:contain;background-size:contain}
.saa-start .saa-brand span{font-size:clamp(16px,2.6vh,22px);letter-spacing:.24em;color:#AEB6D4;font-weight:600}
.saa-start .saa-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3.6vh,30px);text-align:center}
.saa-start .saa-eb{font-size:clamp(13px,2vh,17px);letter-spacing:.36em;color:#6B7396;font-weight:500;text-transform:uppercase}
.saa-start h1{margin:0;font-size:clamp(30px,min(6vw,11vh),76px);font-weight:700;line-height:1.06;letter-spacing:-.01em;max-width:14em;color:#FAFAF8}
.saa-start .saa-tag{margin:0;font-size:clamp(15px,2.4vh,20px);font-weight:400;color:#7C86AE;max-width:40em;line-height:1.5}
.saa-start .saa-go{display:flex;align-items:center;gap:10px;margin-top:clamp(4px,1.6vh,14px);padding:17px 40px;border-radius:999px;border:none;cursor:pointer;font:inherit;font-size:16px;font-weight:700;color:#241300;
  background:linear-gradient(135deg,#FFC168,#F3AB31);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 34px rgba(243,171,49,.35);transition:transform .15s}
.saa-start .saa-go:hover{transform:translateY(-2px)}
.saa-start .saa-go:focus-visible{outline:2px solid #FFC168;outline-offset:3px}
@media print{.saa-start{display:none}}

/* ---- "Your task" line: the game's own instruction, shown the same way everywhere ---- */
.saa-do{display:block!important;margin:10px 0!important;padding:12px 16px!important;border-radius:14px!important;background:rgba(91,118,255,.16)!important;border:1px solid rgba(91,118,255,.6)!important;
  color:#F6F4EF!important;font-weight:600!important;line-height:1.45!important;text-align:left!important}
.saa-do .saa-do-label{color:#8FA0FF;font-weight:700;margin-right:.3em}

/* ---- one amber action per screen: Next turns blue while the screen has its own amber action ---- */
.saa-demote{background:transparent!important;background-image:none!important;color:#F6F4EF!important;border:1.5px solid rgba(143,160,255,.6)!important;box-shadow:none!important}
.saa-demote svg{stroke:currentColor}

/* ---- one progress indicator everywhere: thin bar + "N / T" in the bottom bar ---- */
:is(footer, .deck-foot, .nav-row, .foot, .slide-footer, .chat-footer) :is(.dashes, #deck-dots, .deck-dots, #progressDots, .progress-track, #segBar, .seg-bar, .page-dots, #pageDots, #progress-dots, #progress.progress, .progress, .deck-count, #deck-count, #pageNum, #pageName, #pageCount, .page-count, #counter, .counter, .count, #stepCount, .step-count, #stageName, .stage-name, #sectionName, .section-name, .page-label, .deck-meta):not(.saa-prog):not(.saa-prog *) { display: none !important; }
footer.bar > .track { display: none !important; }
.saa-prog { display: flex !important; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 140px; max-width: 380px; margin: 0 auto; }
.saa-prog-bar { flex: 1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.saa-prog-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: #5B76FF; transition: width .3s ease; }
.saa-prog-n { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: #AEB6D4; white-space: nowrap; font-variant-numeric: tabular-nums; }
:is(.deck-progress, .footer-progress, .bar-mid, .page-meta, .foot-left, .progress-wrap) { display: flex !important; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; }
/* same bottom-bar order everywhere: Back | progress | Next */
footer.foot { display: flex !important; align-items: center; }
footer.foot > .nav { display: contents !important; }
footer.foot #back { order: 0; }
footer.foot > .foot-left { order: 1; flex: 1 1 auto; justify-content: center !important; }
footer.foot #primary { order: 2; }
/* same bar length everywhere */
.saa-prog { min-width: min(260px, 42vw); }
.saa-prog-bar { min-width: 120px; }
/* Back is a pill everywhere */
#navBack.back-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: #F6F4EF; text-decoration: none; }
/* progress always centred on the bottom bar, whatever the button widths */
:is(footer, .deck-foot, .nav-row, .foot, .slide-footer, .chat-footer):has(.saa-prog) { position: relative !important; }
:is(footer, .deck-foot, .nav-row, .foot, .slide-footer, .chat-footer) :is(.deck-progress, .footer-progress, .bar-mid, .page-meta, .foot-left, .progress-wrap, .foot-row):has(.saa-prog) { position: static !important; }
.saa-prog { position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, 40vw); max-width: none; margin: 0 !important; }
@media (max-width: 600px) { .saa-prog { width: min(170px, 38vw); min-width: 0; } .saa-prog-bar { min-width: 50px; } }
/* phones: the progress gets its own centred line above Back / Next, in every game */
@media (max-width: 600px) {
  :is(footer, .deck-foot, .nav-row, .foot, .slide-footer, .chat-footer):has(.saa-prog) { flex-wrap: wrap !important; row-gap: 8px; }
  :is(.deck-progress, .footer-progress, .bar-mid, .page-meta, .foot-left, .progress-wrap, .foot-row):has(.saa-prog) { order: -1 !important; flex: 1 1 100% !important; }
  .saa-prog { position: static !important; transform: none !important; width: 100% !important; order: -1; flex: 1 1 100%; }
  footer.foot > .foot-left { flex: 1 1 100% !important; }
  footer.foot #back { margin-right: auto; }
}
@media (max-width: 600px) {
  :is(.bar-row, .foot-row):has(.saa-prog) { display: flex !important; flex-wrap: wrap !important; row-gap: 8px; justify-content: space-between; }
  :is(.bar-row, .foot-row) > :is(.bar-mid, .saa-prog) { order: -1 !important; flex: 1 1 100% !important; }
}

/* staff codes are hidden from learners (see common.js) */
.saa-staff { display: none !important; }

/* ==========================================================================
   SKIN: make every dark game look like game 1 (reference: Applied-AI-MC1)
   Only active when the page is dark (html.saa-skin). Sizes are divided by --z so a
   zoomed page ends up at the same on-screen size as game 1.
   ========================================================================== */
html.saa-skin { --zz: var(--z, 1); }

/* ---- frame: same outer gutters as game 1 ---- */
html.saa-skin .app {
  padding: calc(clamp(8px, 1.6vh, 16px) / var(--zz)) calc(clamp(16px, 3vw, 48px) / var(--zz)) !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* ---- header: logo + "Swift AI / Academy" + eyebrow and title, controls on the right ---- */
html.saa-skin :is(.saa-header, header.top) {
  display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: calc(clamp(16px, 3vw, 48px) / var(--zz)) !important;
  padding: 0 !important; margin: 0 0 calc(clamp(6px, 1.4vh, 14px) / var(--zz)) !important;
  min-height: 0 !important; height: auto !important; border: 0 !important; background: none !important; box-shadow: none !important;
}
html.saa-skin :is(.saa-header, header.top) > :is(.saa-brand, .brand, .top-meta) { display: none !important; }
html.saa-skin .saa-hd-brand { display: flex; align-items: center; gap: calc(12px / var(--zz)); flex: 0 0 auto; }
html.saa-skin .saa-hd-brand img, html.saa-skin .saa-hd-brand .brand-mark { width: calc(30px / var(--zz)) !important; height: calc(27px / var(--zz)) !important; object-fit: contain; background-size: contain !important; display: block; }
html.saa-skin .saa-wm { line-height: 1; }
html.saa-skin .saa-wm .n { display: block; font-size: calc(21px / var(--zz)); font-weight: 700; letter-spacing: -.02em; color: #F6F4EF; text-transform: none; }
html.saa-skin .saa-wm .s { display: block; font-size: calc(9px / var(--zz)); font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: #7C86AE; margin-top: calc(3px / var(--zz)); }
html.saa-skin .saa-hd-ttl { flex: 0 1 auto; min-width: 0; }
/* one header row, like game 1: the title gives way first, then extra tools shrink */
html.saa-skin :is(.saa-header, header.top) { flex-wrap: nowrap !important; }
html.saa-skin .saa-hd-ttl > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.saa-skin .saa-hd-brand { flex: 0 0 auto; }
html.saa-skin .topbar-tools { flex: 0 1 auto; min-width: 0; }
html.saa-skin .topbar-tools > * { min-width: 0; flex-shrink: 1; }
html.saa-skin .topbar-tools ~ .saa-header-actions { margin-left: calc(8px / var(--zz)) !important; flex: 0 0 auto; }
html.saa-skin .saa-hd-eb { margin: 0 0 calc(2px / var(--zz)); font-size: calc(11.5px / var(--zz)); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #8FA0FF; line-height: 1.3; }
html.saa-skin .saa-hd-h { margin: 0; font-size: calc(clamp(16px, 2.6vh, 22px) / var(--zz)); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: #F6F4EF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.saa-skin :is(.saa-header-actions, .topbar-tools) { margin-left: auto !important; display: flex; align-items: center; gap: calc(8px / var(--zz)); }
html.saa-skin .saa-icon-btn { width: calc(38px / var(--zz)) !important; height: calc(38px / var(--zz)) !important; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; display: grid !important; place-items: center; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.16) !important; color: #F6F4EF !important; }
html.saa-skin .saa-ghost-pill { min-height: calc(38px / var(--zz)) !important; height: auto !important; padding: 0 calc(14px / var(--zz)) !important; border-radius: 999px !important; display: inline-flex !important; align-items: center; gap: calc(8px / var(--zz)); font-size: calc(13px / var(--zz)) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.16) !important; color: #F6F4EF !important; }

/* ---- the current page fills the space between header and footer ---- */
html.saa-skin .saa-cur { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; }
html.saa-skin :is(.stage, main.stage, #slides, .slides) { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; }

/* ---- one card look: full width, fills the height, glass, 20px corners, content centred ---- */
html.saa-skin .saa-surface {
  flex: 1 1 auto !important; min-height: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important;
  border-radius: 20px !important; background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: none !important; backdrop-filter: blur(10px);
  padding: calc(clamp(14px, 3vh, 32px) / var(--zz)) calc(clamp(20px, 3.5vw, 56px) / var(--zz)) !important;
  box-sizing: border-box !important;
}
html.saa-skin .saa-surface:not(.saa-split) { display: flex !important; flex-direction: column !important; justify-content: center !important; }
html.saa-skin .saa-surface.saa-split, html.saa-skin .saa-surface > .saa-split, html.saa-skin .saa-surface > .saa-inner.saa-split { align-content: center !important; align-items: center !important; column-gap: calc(clamp(24px, 4vw, 72px) / var(--zz)) !important; }
/* Deck games: the slide holds the card edge to edge */
html.saa-skin .slide { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
html.saa-skin .slide > .card.saa-surface { height: 100% !important; }

/* ---- type: eyebrow, heading, body, task line exactly like game 1 ---- */
html.saa-skin :is(.saa-cur, .saa-surface) :is(.kicker, .eyebrow, .saa-eyebrow, .q-kicker, .hero-kicker) {
  font-size: calc(11.5px / var(--zz)) !important; font-weight: 600 !important; letter-spacing: .22em !important; text-transform: uppercase !important;
  color: #8FA0FF !important; margin: 0 0 calc(6px / var(--zz)) !important; padding: 0 !important; background: none !important;
}
html.saa-skin :is(.saa-cur, .saa-surface) :is(.kicker, .eyebrow, .saa-eyebrow, .q-kicker, .hero-kicker)::before { display: none !important; }
html.saa-skin :is(.saa-lead, .head) :is(h1, h2, .title) {
  font-size: calc(clamp(22px, 4.4vh, 54px) / var(--zz)) !important; font-weight: 700 !important; letter-spacing: -.035em !important;
  line-height: 1.14 !important; color: #F6F4EF !important; margin: 0 0 calc(14px / var(--zz)) !important;
}
html.saa-skin :is(.saa-lead, .head) p:not(.do):not(.saa-do):not(.kicker):not(.eyebrow):not(.saa-eyebrow):not(.q-kicker):not(.caution-note):not(.typed) {
  font-size: calc(clamp(14px, 2.3vh, 24px) / var(--zz)) !important; font-weight: 500 !important; line-height: 1.6 !important; color: #F6F4EF !important;
  margin: 0 0 calc(clamp(8px, 1.6vh, 14px) / var(--zz)) !important; max-width: 82ch;
}
html.saa-skin :is(.do, .saa-do) {
  font-size: calc(clamp(14px, 2.3vh, 24px) / var(--zz)) !important; font-weight: 600 !important; line-height: 1.45 !important;
  padding: calc(clamp(10px, 1.8vh, 14px) / var(--zz)) calc(16px / var(--zz)) !important; border-radius: calc(14px / var(--zz)) !important;
  margin: calc(clamp(10px, 2vh, 18px) / var(--zz)) 0 0 !important;
  background: rgba(91,118,255,.16) !important; border: 1px solid rgba(91,118,255,.6) !important; color: #F6F4EF !important;
}

/* ---- footer buttons: Back and Next exactly like game 1 ---- */
html.saa-skin :is(footer, .deck-foot, .nav-row, .foot, .slide-footer) { margin-top: calc(10px / var(--zz)) !important; }
html.saa-skin button.saa-navtxt {
  min-height: calc(52px / var(--zz)) !important; height: auto !important; padding: 0 calc(30px / var(--zz)) !important;
  font-size: calc(15.5px / var(--zz)) !important; font-weight: 700 !important; letter-spacing: -.01em !important; border-radius: 999px !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 0 !important;
}
html.saa-skin button.saa-navtxt svg, html.saa-skin button.saa-navtxt .ic { display: none !important; }
html.saa-skin button.saa-navtxt.saa-back { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #F6F4EF !important; box-shadow: none !important; }
html.saa-skin button.saa-navtxt.saa-back:disabled, html.saa-skin button.saa-navtxt.saa-back.is-hidden { opacity: .35; }
html.saa-skin button.nav-circle { width: calc(52px / var(--zz)) !important; height: calc(52px / var(--zz)) !important; }

/* phones: like game 1, the title is hidden */
@media (max-width: 900px) { html.saa-skin .saa-hd-ttl { display: none; } }

/* footer order exactly like game 1: Back on the left, progress in the centre, Next on the right edge;
   any extra button (Start over, Back to Build) sits just before Next */
html.saa-skin .saa-navrow { display: flex !important; align-items: center !important; width: 100%; box-sizing: border-box; }
html.saa-skin .saa-navrow > button.saa-back { order: 0; margin-right: auto !important; }
html.saa-skin .saa-navrow > :is(#primary, #deck-next, #navNext, #nav-next, #nextBtn, #next-btn, .btn-next, .nav-btn.primary, .nav-circle.primary, .primary) { order: 99 !important; margin-left: 0 !important; }
/* no visible Back: Next still goes to the right edge */
html.saa-skin .saa-navrow:not(:has(> button.saa-back:not([hidden]):not(.is-hidden):not(.hidden))) > :is(#primary, #deck-next, #navNext, #nav-next, #nextBtn, #next-btn, .btn-next, .nav-btn.primary, .nav-circle.primary, .primary) { margin-left: auto !important; }
html.saa-skin .saa-navrow > :is(#deck-restart, #navRestart, #nav-restart, .btn-restart, .back-to-build, [data-action="restart"]) { order: 98 !important; margin-left: auto !important; margin-right: calc(10px / var(--zz)) !important; }
/* never show a nav button that the game has hidden */
html.saa-skin button.saa-navtxt[hidden], html.saa-skin button.saa-navtxt.is-hidden, html.saa-skin button.saa-navtxt.hidden { display: none !important; }

/* games with a light/dark switch: in light mode the game keeps its own header, so hide the dark-frame brand */
html[data-saa-themes]:not(.saa-skin) .saa-hd-brand, html[data-saa-themes]:not(.saa-skin) .saa-hd-ttl { display: none; }
html[data-theme="light"] .saa-vo-b { color: #1B2A6B; background: #fff; border-color: rgba(27,42,107,.18); }
/* a game that hides its nav button with an inline style keeps it hidden */
html.saa-skin button.saa-navtxt[style*="display: none"], html.saa-skin button.saa-navtxt[style*="display:none"] { display: none !important; }

/* ---- frame spacing exactly like game 1: header, 10px gap, card fills the rest, 10px gap, footer (52px pills), page padding below ---- */
html.saa-skin .app { display: flex !important; flex-direction: column !important; }
html.saa-skin .app > :is(main, .stage, .slides) { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; flex: 1 1 auto !important; min-height: 0 !important; }
html.saa-skin .app > .saa-navrow, html.saa-skin .app > :is(footer, nav).saa-navrow {
  margin: calc(10px / var(--zz)) 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; flex: 0 0 auto !important; }
html.saa-skin button.saa-navtxt { min-height: calc(52px / var(--zz)) !important; padding: 0 calc(30px / var(--zz)) !important; font-size: calc(15.5px / var(--zz)) !important; }
html.saa-skin .app { gap: 0 !important; row-gap: 0 !important; }
/* the Back / Next row wrapped in a footer of its own: the wrapper takes game 1's spacing instead */
html.saa-skin .app > :is(footer, nav, div):has(> .saa-navrow) { margin: calc(10px / var(--zz)) 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; flex: 0 0 auto !important; }
/* Practice Bot style footers (.slide-footer holds the buttons directly) get the same spacing */
html.saa-skin .app > footer.slide-footer { margin: calc(10px / var(--zz)) 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
/* Back / Next are sized by their label, like game 1 (no game minimum widths) */
html.saa-skin button.saa-navtxt { min-width: 0 !important; }
/* header block as tall as game 1's (eyebrow + title), so the card starts at the same place */
html.saa-skin .app > :is(.saa-header, header.top) { min-height: calc(41px / var(--zz)) !important; }
/* progress: same on-screen size as game 1 in zoomed games */
html.saa-skin .saa-prog { gap: calc(12px / var(--zz)); width: calc(min(380px, 40vw) / var(--zz)); }
html.saa-skin .saa-prog-n { font-size: calc(12px / var(--zz)); }
html.saa-skin .saa-prog-bar { height: calc(4px / var(--zz)); }

/* Back keeps its word when a game hides both label and icon on phones */
html.saa-skin button.saa-back.saa-back-blank::after { content: "Back"; }

/* very narrow phones: the logo alone, so the header keeps room for its tools */
@media (max-width: 400px) { html.saa-skin .saa-hd-brand .saa-wm { display: none; } }

/* ---- light mode, branded like the dark frame: logo, "Swift AI / ACADEMY", section eyebrow and title in navy ---- */
@media (min-width: 701px) { html[data-saa-themes][data-theme="light"] :is(.saa-header, header.top) { display: flex !important; align-items: center !important; gap: calc(clamp(16px, 3vw, 48px) / var(--z, 1)) !important; flex-wrap: nowrap !important; } }   /* phones keep the game's own wrapping header */
html[data-saa-themes][data-theme="light"] :is(.saa-header, header.top) > .brand { display: none !important; }
html[data-saa-themes][data-theme="light"] .saa-hd-brand { display: flex !important; align-items: center; gap: calc(12px / var(--z, 1)); flex: 0 0 auto; }
html[data-saa-themes][data-theme="light"] .saa-hd-brand img, html[data-saa-themes][data-theme="light"] .saa-hd-brand .brand-mark { width: calc(30px / var(--z, 1)) !important; height: calc(27px / var(--z, 1)) !important; object-fit: contain; display: block; }
html[data-saa-themes][data-theme="light"] .saa-wm { line-height: 1; }
html[data-saa-themes][data-theme="light"] .saa-wm .n { display: block; font-size: calc(21px / var(--z, 1)); font-weight: 700; letter-spacing: -.02em; color: #0E1A4F; }
html[data-saa-themes][data-theme="light"] .saa-wm .s { display: block; font-size: calc(9px / var(--z, 1)); font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: #6B76A0; margin-top: calc(3px / var(--z, 1)); }
html[data-saa-themes][data-theme="light"] .saa-hd-ttl { display: block !important; flex: 1 1 auto; min-width: 0; }   /* takes the free space, so the tools sit on the right */
html[data-saa-themes][data-theme="light"] .saa-hd-eb { margin: 0 0 calc(2px / var(--z, 1)); font-size: calc(11.5px / var(--z, 1)); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #3C59F6; }
html[data-saa-themes][data-theme="light"] .saa-hd-h { margin: 0; font-size: calc(18.72px / var(--z, 1)); font-weight: 700; letter-spacing: -.01em; color: #0E1A4F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { html[data-saa-themes][data-theme="light"] .saa-hd-brand .saa-wm { display: none; } }
@media (max-width: 700px) { html[data-saa-themes][data-theme="light"] .saa-hd-eb { display: none; } html[data-saa-themes][data-theme="light"] .saa-hd-h { font-size: 15px; } }
/* ==========================================================================
   NARRATION controls + word highlight (same look as game 1's header buttons)
   ========================================================================== */
.saa-vo { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
/* a screen with no clip hides only Replay: the sound on/off (it also mutes the effects) and the theme switch stay */
.saa-vo.none > .saa-vo-listen { display: none !important; }
html .saa-vo + :is(.saa-header-actions, .topbar-tools, .top-actions, .header-actions, .actions), html.saa-skin .saa-vo + :is(.saa-header-actions, .topbar-tools, .top-actions, .header-actions, .actions) { margin-left: calc(8px / var(--zz, 1)) !important; }
.saa-vo-b { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  color: #F6F4EF; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  padding: 8px 14px; min-height: 38px; cursor: pointer; transition: background .15s, border-color .15s; -webkit-user-select: none; user-select: none; }
.saa-vo-b.icon { padding: 0; width: 38px; justify-content: center; }
.saa-vo-b:hover { border-color: #5B76FF; }
.saa-vo-b:focus-visible { outline: 2px solid #FFC168; outline-offset: 3px; }
.saa-vo-b .i-pause, .saa-vo-b .i-off { display: none; }
.saa-vo-b.playing { background: rgba(91,118,255,.16); border-color: #5B76FF; }
.saa-vo-b.playing .i-play { display: none; }
.saa-vo-b.playing .i-pause { display: block; }
.saa-vo-voice[aria-pressed="false"] .i-on { display: none; }
.saa-vo-voice[aria-pressed="false"] .i-off { display: block; }
.saa-vo-voice[aria-pressed="false"] { color: #AEB6D4; }
html.saa-skin .saa-vo-b { min-height: calc(38px / var(--zz, 1)); font-size: calc(13px / var(--zz, 1)); padding: calc(8px / var(--zz, 1)) calc(14px / var(--zz, 1)); }
html.saa-skin .saa-vo-b.icon { width: calc(38px / var(--zz, 1)); padding: 0; }
/* light games */
html:not(.saa-skin) .saa-vo-b { color: #0E1A4F; background: #fff; border-color: #D9DEEE; }
html:not(.saa-skin) .saa-vo-b.playing { background: #EAEEFF; border-color: #3C59F6; }
html:not(.saa-skin) .saa-vo-voice[aria-pressed="false"] { color: #5C6690; }
@media (max-width: 560px) { .saa-vo-listen span { display: none; } .saa-vo-listen { padding: 0; width: 38px; justify-content: center; } }
@media print { .saa-vo { display: none !important; } }

/* word highlight while the clip plays: words not yet read are dimmed, the current word is lit */
::highlight(saa-vo-todo) { color: rgba(246,244,239,.45); }
::highlight(saa-vo-on) { background-color: rgba(143,160,255,.34); color: #fff; }
html:not(.saa-skin) ::highlight(saa-vo-todo) { color: rgba(14,26,79,.45); }
html:not(.saa-skin) ::highlight(saa-vo-on) { background-color: rgba(60,89,246,.18); color: #0E1A4F; }
@media (max-width: 560px) { html.saa-skin .saa-vo-listen { padding: 0; width: calc(38px / var(--zz, 1)); justify-content: center; } }

/* phones: header narration buttons at least 44px */
@media (max-width: 700px), (pointer: coarse) { .saa-vo-b, html.saa-skin .saa-vo-b, html.saa-skin .saa-vo-b.icon { min-height: 44px !important; min-width: 44px !important; } }