/* IELTS practice pages in the Vidi game style (vidi-game.css): Writing check, Speaking room, Listening lab, Reading lab,
   Exam predictions, Flashcards and the mock exam's screens outside the timed sections.
   Loaded last on each page, after the page's own CSS, with body.pg-game. The shared components come from vidi-game.css;
   this file only (1) re-asserts them over the older page rules, which are often more specific, (2) lays out the night
   hero panels with the motion art in a light bevelled "portrait" window, and (3) swaps the pages' rounded cards and
   pastel tiles for bevels. Reading content (essays, passages, transcripts, questions) stays on light .vg-card surfaces.
   The mock exam rules are all scoped to :not([data-mock-status="running"]): the running exam screen imitates the real
   computer-delivered test and must not change. Motion stops under prefers-reduced-motion. */

/* ══ Shared ══════════════════════════════════════════════════════════════════════════════════════════════════ */
html body.pg-game[data-study-mode]:not([data-mock-status="running"]) { background: #f1eff9; }
body.pg-game { --pg-ease: cubic-bezier(.2, .8, .2, 1); --pg-bevel: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --pg-bevel-lg: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }

/* The components win over the pages' own (more specific) card, title and button rules. */
body.pg-game :is(#main, #mock-main) .vg-panel {
  background: radial-gradient(700px 260px at 80% -20%, rgba(138, 114, 246, .45), transparent 60%), radial-gradient(520px 240px at 0% 120%, rgba(86, 218, 220, .28), transparent 60%), var(--vg-night) !important;
  color: var(--vg-text) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
body.pg-game :is(#main, #mock-main) .vg-card { background: #fff !important; color: var(--vg-ink); border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
body.pg-game :is(#main, #mock-main) .vg-card.accent { background: linear-gradient(180deg, #fff, var(--vg-paper)) !important; }
body.pg-game :is(#main, #mock-main) .vg-title { margin: 0; padding-top: 2px; font: 800 clamp(26px, 3vw, 36px)/1.35 var(--vg-display) !important; letter-spacing: .3px; text-transform: none;
  background: linear-gradient(180deg, #fff 30%, var(--vg-gold)) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
body.pg-game :is(#main, #mock-main) .vg-title span { color: transparent !important; }
body.pg-game :is(#main, #mock-main) .vg-num { font-family: var(--vg-display) !important; font-weight: 800; font-variant-numeric: tabular-nums; }
body.pg-game :is(#main, #mock-main) .vg-btn { border-radius: 0 !important; }
body.pg-game .vg-btn { border-radius: 0 !important; font-family: 'Be Vietnam Pro', system-ui, sans-serif; letter-spacing: 0; }
body.pg-game .vg-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
body.pg-game .vg-btn svg { stroke: currentColor; }
@keyframes pg-rise { from { opacity: 0; transform: translateY(10px); } }

/* Hero: night panel, title, chips; the art sits in a light bevelled portrait window on the right. */
body.pg-game .pg-hero { position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 28px;
  min-height: 0; padding: 26px 30px 24px !important; overflow: visible; animation: pg-rise .5s var(--pg-ease) backwards; }
body.pg-game .pg-hero > :first-child { position: relative; z-index: 1; min-width: 0; }
body.pg-game .pg-hero :is(.wc-kicker, .sr-kicker, .ll-kicker, .ielts-kicker, .mk-kicker, .vf-eyebrow, .prediction-eyebrow) { margin: 0 0 6px; padding: 0; background: none !important; color: var(--vg-aqua) !important;
  font: 800 12.5px/1.4 'Be Vietnam Pro', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; box-shadow: none !important; }
body.pg-game .pg-hero :is(.wc-kicker, .sr-kicker, .ll-kicker, .ielts-kicker, .mk-kicker) svg { stroke: var(--vg-aqua); }
body.pg-game .pg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
body.pg-game .pg-chips > li { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 12px 4px 6px; color: var(--vg-text) !important; background: rgba(255, 255, 255, .09) !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 0 0 1px rgba(185, 168, 255, .22) !important; clip-path: var(--pg-bevel); font: 700 13.5px/1.3 'Be Vietnam Pro', system-ui, sans-serif;
  transition: background-color .2s, transform .2s var(--pg-ease); }
body.pg-game .pg-chips > li:hover { background: rgba(255, 255, 255, .16) !important; transform: translateY(-2px); }
body.pg-game .pg-chips > li > svg, body.pg-game .pg-chips > li > .wc-step-icon { flex: none; }
body.pg-game .pg-chips > li > svg { width: 18px; height: 18px; margin-left: 4px; stroke: var(--vg-aqua); fill: none; }
body.pg-game .pg-chips > li > strong { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin: 0; padding: 0 6px; color: var(--vg-night) !important; background: var(--vg-aqua) !important;
  border-radius: 0 !important; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); font: 800 13px/1 var(--vg-display); }
body.pg-game .pg-chips > li:nth-child(3n+2) > strong { background: var(--vg-violet-lite) !important; }
body.pg-game .pg-chips > li:nth-child(3n) > strong { background: var(--vg-gold) !important; }
/* A gold "status" chip (checks left, sessions left) with a pulsing dot */
body.pg-game .pg-status { display: inline-flex !important; align-items: center; gap: 8px; min-height: 34px; margin: 0; padding: 4px 14px 4px 12px !important; color: var(--vg-night) !important;
  background: var(--vg-gold) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; clip-path: var(--pg-bevel); font: 800 13.5px/1.3 'Be Vietnam Pro', system-ui, sans-serif; }
body.pg-game .pg-status::before { content: ''; flex: none; width: 9px; height: 9px; background: var(--vg-night) !important; border-radius: 50% !important; animation: vg-pulse 1.8s ease-in-out infinite; }
body.pg-game .pg-status:empty { display: none !important; }

body.pg-game .pg-portrait { position: relative; z-index: 1; display: block; flex: none; width: 210px; aspect-ratio: 4 / 3; isolation: isolate; pointer-events: none;
  filter: drop-shadow(0 0 16px rgba(86, 218, 220, .45)) drop-shadow(0 16px 20px rgba(0, 0, 0, .45)); }
body.pg-game .pg-portrait::before { content: ''; position: absolute; inset: 0; z-index: -1; border: 3px solid transparent;
  background: radial-gradient(circle at 50% 44%, #fff 0 36%, #f1edff 66%, #d6f5f5 100%) padding-box, linear-gradient(135deg, var(--vg-aqua), var(--vg-violet) 60%, var(--vg-gold)) border-box;
  clip-path: var(--pg-bevel-lg); }
body.pg-game .pg-portrait > :is(img, video) { position: relative !important; inset: auto !important; display: block; width: 100% !important; height: 100% !important; max-width: none !important;
  margin: 0 !important; object-fit: contain; mix-blend-mode: multiply; transform: none !important; filter: none !important; opacity: 1; }
body.pg-game .pg-portrait.vg-otter { animation: vg-bob 3.2s ease-in-out infinite; }
body.pg-game .pg-mascot { align-self: end; width: 150px; height: auto; margin: -8px 0 -18px; }

/* Bevels instead of rounded corners for small boxes and controls */
body.pg-game .pg-bevel { border-radius: 0 !important; clip-path: var(--pg-bevel); }

/* Paywall cards: a night panel with a gold button */
body.pg-game .pg-paywall { position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 16px 24px; padding: 24px 28px !important; }
body.pg-game .pg-paywall :is(h2) { color: #fff !important; font-family: var(--vg-display) !important; font-weight: 800; line-height: 1.35; }
body.pg-game .pg-paywall .ielts-kicker, body.pg-game .pg-paywall :is(.sr-paywall-kicker) { color: var(--vg-gold) !important; }
body.pg-game .pg-paywall ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
body.pg-game .pg-paywall ul > li { padding: 6px 12px; color: var(--vg-text) !important; background: rgba(255, 255, 255, .1) !important; border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .pg-paywall ul > li strong { color: var(--vg-gold) !important; font-family: var(--vg-display); }
body.pg-game .pg-paywall img { width: 150px; height: auto; }

@media (max-width: 640px) {
  /* Phones: the text takes the full width; the portrait sits in the top-right corner beside the kicker and title. */
  body.pg-game .pg-hero { display: block !important; padding: 18px 16px !important; }
  body.pg-game .pg-hero > :is(.pg-portrait, .pg-mascot) { position: absolute; top: 14px; right: 12px; width: 86px; margin: 0; }
  body.pg-game .pg-hero :is(.vg-title, .wc-kicker, .sr-kicker, .ll-kicker, .ielts-kicker, .mk-kicker, .vf-eyebrow, .prediction-eyebrow) { padding-right: 94px !important; }
  body.pg-game :is(#main, #mock-main) .vg-title { font-size: 24px !important; }
  body.pg-game .pg-chips > li { font-size: 12.5px; }
  body.pg-game .pg-paywall { grid-template-columns: minmax(0, 1fr); padding: 20px 18px !important; }
  body.pg-game .pg-paywall img { position: absolute; top: 14px; right: 12px; width: 76px; }
  body.pg-game .pg-paywall h2 { padding-right: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  body.pg-game :is(.pg-hero, .pg-portrait, .pg-status::before) { animation: none !important; }
  body.pg-game .pg-chips > li { transition: none; }
}

/* ══ Writing check ═══════════════════════════════════════════════════════════════════════════════════════════ */
body.pg-game .wc-v2 { --w: #6a4fe0; --w-soft: #efebff; --w-deep: #4b33b8; }
body.pg-game .wc-v2 .wc-head-card .wc-head-row { margin-top: 14px; }
body.pg-game .wc-v2 .wc-head-card .wc-steps li { background: rgba(255, 255, 255, .09); color: var(--vg-text); border-radius: 0 !important; box-shadow: inset 0 0 0 1px rgba(185, 168, 255, .22);
  clip-path: var(--pg-bevel); }
body.pg-game .wc-v2 .wc-head-card .wc-steps li:hover { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(185, 168, 255, .4); }
body.pg-game .wc-v2 .wc-step-icon { border-radius: 0 !important; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); color: var(--vg-night); }
body.pg-game .wc-v2 .wc-steps [data-step="write"] { --step: var(--vg-aqua); }
body.pg-game .wc-v2 .wc-steps [data-step="band"] { --step: var(--vg-violet-lite); }
body.pg-game .wc-v2 .wc-steps [data-step="rewrite"] { --step: var(--vg-gold); }
body.pg-game .wc-v2 .wc-allowance { color: var(--vg-night); background: var(--vg-gold); border-radius: 0 !important; box-shadow: none; clip-path: var(--pg-bevel); }
body.pg-game .wc-v2 .wc-allowance::before { background: var(--vg-night); }
body.pg-game .wc-v2 .wc-head-art { mix-blend-mode: multiply; }

body.pg-game .wc-v2 .wc-panel.vg-card { animation: pg-rise .5s .06s var(--pg-ease) backwards; }
body.pg-game .wc-v2 .wc-task { background: var(--vg-paper); border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .wc-v2 .wc-task label > span { border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .wc-v2 .wc-task input:checked + span { color: #fff; background: var(--vg-night); box-shadow: none; }
body.pg-game .wc-v2 .wc-task input:checked + span strong { color: var(--vg-aqua); }
body.pg-game .wc-v2 .wc-timer { background: var(--vg-paper); border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .wc-v2 .wc-timer output { color: var(--vg-night); font-family: var(--vg-display); font-size: 20px; }
body.pg-game .wc-v2 .wc-timer .text-link { color: var(--vg-night); background: var(--vg-aqua); border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .wc-v2 .wc-timer .text-link:hover { color: var(--vg-night); background: var(--vg-gold); }
body.pg-game .wc-v2 .wc-label-n { color: var(--vg-night); background: var(--vg-aqua); border-radius: 0 !important; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); font-family: var(--vg-display); }
body.pg-game .wc-v2 :is(.wc-essay-box, .wc-prompt-text, .wc-note, .wc-status:not(:empty), .wc-revising, .wc-checklist li, .wc-warning) { border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .wc-v2 .wc-panel :is(select, textarea) { border-radius: 0 !important; }
body.pg-game .wc-v2 .wc-ring-track { stroke: #e7e2fb; }
body.pg-game .wc-v2 .wc-history-icon { color: var(--vg-night); background: var(--vg-violet-lite); border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .wc-v2 .wc-history h2 { font-family: var(--vg-display); }
body.pg-game .wc-v2 #wc-history > .wc-hint { border-radius: 0 !important; border-color: #ddd6f6; }
body.pg-game .wc-v2 .wc-chains > li { background: var(--vg-paper); border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .wc-v2 .wc-chains > li:hover { box-shadow: none; background: #ece8fb; }
body.pg-game .wc-v2 .wc-draft { border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .wc-v2 .wc-draft strong { font-family: var(--vg-display); }
body.pg-game .wc-v2 .wc-chip:not([class*="wc-cat-"]) { background: var(--vg-night); }
body.pg-game .wc-v2 .wc-chip { border-radius: 0 !important; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }

/* Paywall */
body.pg-game .wc-v2 .wc-paywall-card.vg-panel { animation: pg-rise .5s var(--pg-ease) backwards; }
body.pg-game .wc-v2 .wc-paywall .ielts-kicker { color: var(--vg-gold); }
body.pg-game .wc-v2 .wc-paywall h2 { font-family: var(--vg-display); line-height: 1.35; }
body.pg-game .wc-v2 .wc-paywall-perks li { border-radius: 0 !important; clip-path: var(--pg-bevel); }

/* The result: the band in a night number panel, then light cards to read */
body.pg-game .wc-v2 .wc-score.vg-panel { padding: 24px 30px !important; animation: pg-rise .5s var(--pg-ease) backwards; }
body.pg-game .wc-v2 .wc-score h2 { color: #fff; font-family: var(--vg-display); line-height: 1.35; }
body.pg-game .wc-v2 .wc-score-text p { color: var(--vg-text-2); }
body.pg-game .wc-v2 .wc-band strong.vg-num { color: var(--vg-gold); font-size: 52px; text-shadow: 0 0 18px rgba(255, 200, 61, .7); }
body.pg-game .wc-v2 .wc-band span { color: #fff; }
body.pg-game .wc-v2 .wc-band small { color: var(--vg-text-3); }
body.pg-game .wc-v2 .wc-gauge .wc-gauge-track { stroke: rgba(150, 170, 255, .16); }
body.pg-game .wc-v2 .wc-gauge .wc-gauge-fill { stroke: var(--vg-aqua); filter: drop-shadow(0 0 6px var(--vg-aqua)); }
body.pg-game .wc-v2 .wc-gauge-tick { stroke: rgba(234, 247, 255, .28); }
body.pg-game .wc-v2 .wc-progress { color: var(--vg-night); background: var(--vg-aqua); border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .wc-v2 .wc-progress.wc-up { color: var(--vg-night); background: var(--vg-gold); }
body.pg-game .wc-v2 .wc-score .wc-warning { color: #ffe6a3; background: rgba(255, 200, 61, .12); box-shadow: inset 4px 0 0 var(--vg-gold); }
body.pg-game .wc-v2 .wc-criterion.vg-card { --c: #6a4fe0; padding: 18px 18px 18px; background: linear-gradient(var(--c), var(--c)) top / 100% 4px no-repeat, #fff !important; }
body.pg-game .wc-v2 .wc-criterion[data-crit="CC"] { --c: #0a8a91; }
body.pg-game .wc-v2 .wc-criterion[data-crit="LR"] { --c: #b07a00; }
body.pg-game .wc-v2 .wc-criterion[data-crit="GRA"] { --c: #2459c9; }
body.pg-game .wc-v2 .wc-criterion:hover { box-shadow: none; }
body.pg-game .wc-v2 .wc-criterion-head strong.vg-num { color: var(--c) !important; font-size: 42px; line-height: 1.1; }
body.pg-game .wc-v2 .wc-meter { border-radius: 0 !important; background: var(--vg-line); }
body.pg-game .wc-v2 .wc-meter i { border-radius: 0 !important; background: var(--c); }
body.pg-game .wc-v2 .wc-criterion blockquote { border-radius: 0 !important; }
body.pg-game .wc-v2 .wc-next-band { background: var(--vg-paper); border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .wc-v2 :is(.wc-box, .wc-marked-wrap) h2, body.pg-game .wc-v2 .wc-box h3 { font-family: var(--vg-display); line-height: 1.35; }
body.pg-game .wc-v2 :is(.wc-upgrade-pair > div, .wc-issue-row, .wc-priorities-box li, .wc-strengths-box li, .wc-legend li, .wc-detail del) { border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .wc-v2 .wc-upgrade-pair > div { background: var(--vg-paper); }
body.pg-game .wc-v2 .wc-upgrade-pair > div + div { background: #e3f8f8; }
body.pg-game .wc-v2 .wc-upgrade-pair::after { border-radius: 0 !important; background: var(--vg-night); color: var(--vg-aqua); }
body.pg-game .wc-v2 .wc-upgrade h3::before { border-radius: 0 !important; color: var(--vg-night); background: var(--vg-aqua); }
body.pg-game .wc-v2 .wc-issue-row { background: var(--vg-paper); }
body.pg-game .wc-v2 .wc-issue-row:hover { background: #ece8fb; box-shadow: none; }
@media (min-width: 1001px) {
  body.pg-game .wc-v2 .wc-detail { border-radius: 0 !important; clip-path: var(--pg-bevel-lg); box-shadow: inset 0 0 0 1px var(--vg-line) !important; }
  body.pg-game .wc-v2 .wc-detail.wc-detail-open { box-shadow: inset 0 6px 0 var(--wc-c, var(--vg-night)), inset 0 0 0 1px var(--vg-line) !important; }
}
body.pg-game .wc-v2 .wc-detail-empty-icon { border-radius: 0 !important; clip-path: var(--pg-bevel); }
@media (max-width: 640px) {
  body.pg-game .wc-v2 .wc-score.vg-panel { padding: 20px 18px !important; }
}

/* Paper sections drop their white so the page colour shows between the cards (not on the mock exam, see below) */
body.pg-game:not(.mk-v2) #main .paper { background: transparent; }
body.pg-game:not(.mk-v2) #main .study-split { border-radius: 0 !important; }

/* ══ Speaking room (Alice's video-call stage, .sr-stage, is left exactly as it was) ════════════════════════════ */
body.pg-game .sr-v2 .sr-title-card { grid-template-columns: minmax(0, 1fr) auto; }
body.pg-game .sr-v2 .sr-title-card h1 { margin: 6px 0 4px; }
body.pg-game .sr-v2 .sr-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
body.pg-game .sr-v2 .sr-facts { margin: 8px 0 0; }
body.pg-game .sr-v2 .sr-facts li svg { color: var(--vg-aqua); }
body.pg-game .sr-v2 .sr-allowance { margin-top: 8px; }
body.pg-game .sr-v2 .sr-room.vg-card { animation: pg-rise .5s .05s var(--pg-ease) backwards; }
/* Part tracker: three night tiles; the part in progress glows violet, finished parts turn aqua */
body.pg-game .sr-v2 .sr-step { color: var(--vg-text); background: var(--vg-night-2); border: 0; border-radius: 0 !important; clip-path: var(--pg-bevel); box-shadow: none !important; }
body.pg-game .sr-v2 .sr-step-text strong { color: #fff; font-family: var(--vg-display); font-size: 16px; letter-spacing: .3px; }
body.pg-game .sr-v2 .sr-step-text small, body.pg-game .sr-v2 .sr-step-count { color: var(--vg-text-2); }
body.pg-game .sr-v2 .sr-step-n { color: var(--vg-night); background: var(--vg-aqua); border-radius: 0 !important; box-shadow: none;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); font-family: var(--vg-display); font-size: 16px; }
body.pg-game .sr-v2 .sr-step-now { background: radial-gradient(260px 90px at 85% -30%, rgba(138, 114, 246, .7), transparent 70%), var(--vg-night); box-shadow: inset 0 0 0 2px var(--vg-violet-lite) !important; }
body.pg-game .sr-v2 .sr-step-now .sr-step-n { color: var(--vg-night); background: var(--vg-gold); animation: vg-pulse 1.8s ease-in-out infinite; }
body.pg-game .sr-v2 .sr-step-done { background: linear-gradient(100deg, rgba(86, 218, 220, .28), transparent 70%), var(--vg-night-2); }
body.pg-game .sr-v2 .sr-step-done .sr-step-n { color: var(--vg-night); background: var(--vg-aqua); }
body.pg-game .sr-v2 .sr-track-q { background: rgba(185, 168, 255, .35); }
body.pg-game .sr-v2 .sr-track-q.sr-done { background: var(--vg-aqua); box-shadow: 0 0 6px var(--vg-aqua); }
body.pg-game .sr-v2 .sr-track-q.sr-now { background: var(--vg-gold); box-shadow: 0 0 8px var(--vg-gold); }
body.pg-game .sr-v2 .sr-step:hover { box-shadow: none; }
/* Cue card, notes and the take: bevels */
body.pg-game .sr-v2 :is(.sr-card, .sr-notes textarea, .sr-take, .sr-status:not(:empty)) { border-radius: 0 !important; }
body.pg-game .sr-v2 .sr-card { border: 0; background: linear-gradient(var(--vg-violet), var(--vg-violet)) top / 100% 4px no-repeat, var(--vg-paper); clip-path: var(--pg-bevel-lg); }
body.pg-game .sr-v2 .sr-card-kicker { color: var(--vg-night) !important; background: var(--vg-gold) !important; border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .sr-v2 .sr-prep { background: var(--vg-paper); border-radius: 0 !important; clip-path: var(--pg-bevel-lg); }
body.pg-game .sr-v2 .sr-score .sr-basis { color: var(--vg-text-2) !important; background: rgba(255, 255, 255, .08) !important; box-shadow: none !important; clip-path: var(--pg-bevel); }
body.pg-game .sr-v2 .sr-words > li { background: var(--vg-paper); }
body.pg-game .sr-v2 .sr-words .btn:not(.vg-btn) { border-radius: 0 !important; clip-path: var(--pg-bevel); }
/* Side cards */
body.pg-game .sr-v2 .sr-side-card h2 { font-family: var(--vg-display); font-size: 21px; line-height: 1.35; }
body.pg-game .sr-v2 .sr-tips li { color: var(--vg-ink); background: var(--vg-paper); border-radius: 0 !important; box-shadow: none !important; clip-path: var(--pg-bevel); }
body.pg-game .sr-v2 .sr-tips li:hover { background: #ece8fb; }
body.pg-game .sr-v2 .sr-tip-icon { color: var(--vg-night); background: var(--tip-game, var(--vg-aqua)); border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .sr-v2 .sr-tips [data-tip="mic"] { --tip-game: var(--vg-violet-lite); }
body.pg-game .sr-v2 .sr-tips [data-tip="time"] { --tip-game: var(--vg-gold); }
body.pg-game .sr-v2 .sr-tips [data-tip="redo"] { --tip-game: #9be7d3; }
body.pg-game .sr-v2 :is(.sr-history-item, #sr-history > p) { border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .sr-v2 .sr-history-item { background: var(--vg-paper); }
body.pg-game .sr-v2 .sr-history-item.sr-current { background: #ece8fb; border-color: var(--vg-violet); }
body.pg-game .sr-v2 .sr-history-item:hover:not(:disabled) { border-color: var(--vg-violet); box-shadow: none; }
body.pg-game .sr-v2 .sr-history-item strong { color: var(--vg-gold); background: var(--vg-night); border-radius: 0 !important; clip-path: var(--pg-bevel); font-family: var(--vg-display); font-size: 16px; }
body.pg-game .sr-v2 .sr-history-item:not([data-status="done"]) strong { color: var(--vg-text); background: var(--vg-night-2); }
/* Paywall */
body.pg-game .sr-v2 .sr-paywall .sr-paywall-kicker { color: var(--vg-night); background: var(--vg-gold); border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .sr-v2 .sr-paywall-perks li::before { color: var(--vg-gold); }
body.pg-game .sr-v2 .sr-paywall-art { width: 150px; filter: invert(1); mix-blend-mode: screen; }
/* Result: the band in a night number panel, criteria and answers on light cards */
body.pg-game .sr-v2 .sr-score.vg-panel { padding: 24px 30px !important; animation: pg-rise .5s var(--pg-ease) backwards; }
body.pg-game .sr-v2 .sr-band { background: transparent; box-shadow: none; }
body.pg-game .sr-v2 .sr-band-gauge .sr-ring-track { stroke: rgba(150, 170, 255, .16); }
body.pg-game .sr-v2 .sr-band-gauge .sr-ring-fill { stroke: var(--vg-aqua); filter: drop-shadow(0 0 6px var(--vg-aqua)); }
body.pg-game .sr-v2 .sr-band strong.vg-num { color: var(--vg-gold); font-size: 50px; text-shadow: 0 0 18px rgba(255, 200, 61, .7); }
body.pg-game .sr-v2 .sr-band span { color: var(--vg-aqua); }
body.pg-game .sr-v2 .sr-band small { color: var(--vg-text-3); }
body.pg-game .sr-v2 .sr-score h2 { color: #fff; font-family: var(--vg-display); line-height: 1.35; }
body.pg-game .sr-v2 .sr-score-text p { color: var(--vg-text-2); }
body.pg-game .sr-v2 :is(.sr-basis, .sr-progress) { border-radius: 0 !important; }
body.pg-game .sr-v2 .sr-progress { color: var(--vg-night); background: var(--vg-aqua); clip-path: var(--pg-bevel); }
body.pg-game .sr-v2 .sr-criterion.vg-card { background: linear-gradient(var(--c), var(--c)) top / 100% 4px no-repeat, #fff !important; }
body.pg-game .sr-v2 .sr-criterion[data-crit="FC"] { --c: #0a8a91; --c-text: #0a8a91; }
body.pg-game .sr-v2 .sr-criterion[data-crit="LR"] { --c: #6a4fe0; --c-text: #6a4fe0; }
body.pg-game .sr-v2 .sr-criterion[data-crit="GRA"] { --c: #f3b400; --c-text: #9a6b00; }
body.pg-game .sr-v2 .sr-criterion-head strong.vg-num { color: var(--c-text) !important; }
body.pg-game .sr-v2 .sr-pron .sr-criterion-head strong.vg-num { color: #8c96c4 !important; }
body.pg-game .sr-v2 .sr-criterion:hover, body.pg-game .sr-v2 .sr-tile:hover { box-shadow: none; }
body.pg-game .sr-v2 :is(.sr-meter, .sr-meter i, .sr-pron-bar, .sr-pron-bar i) { border-radius: 0 !important; }
body.pg-game .sr-v2 .sr-box h3, body.pg-game .sr-v2 .sr-answers-title { font-family: var(--vg-display); line-height: 1.35; }
body.pg-game .sr-v2 .sr-tile.vg-card { background: linear-gradient(var(--t), var(--t)) left / 4px 100% no-repeat, var(--vg-paper) !important; }
body.pg-game .sr-v2 .sr-tile strong.vg-num { color: var(--t-text); font-size: 34px; }
body.pg-game .sr-v2 :is(.sr-tile-icon, .sr-priorities li, .sr-words > li, .sr-chip) { border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .sr-v2 .sr-answer.vg-card { background: linear-gradient(var(--part), var(--part)) left / 5px 100% no-repeat, #fff !important; }
body.pg-game .sr-v2 .sr-answer:hover { box-shadow: none !important; }
@media (max-width: 900px) {
  body.pg-game .sr-v2 .sr-title-card > .pg-portrait { grid-column: 2; grid-row: 1; }
}
@media (max-width: 640px) {
  body.pg-game .sr-v2 .sr-title-card .sr-kicker { display: block; }
  body.pg-game .sr-v2 .sr-score.vg-panel { padding: 20px 18px !important; }
}
@media (prefers-reduced-motion: reduce) { body.pg-game .sr-v2 .sr-step-now .sr-step-n { animation: none; } }

/* ══ Listening lab ═══════════════════════════════════════════════════════════════════════════════════════════ */
body.pg-game .ll-v2 { --c: #6a4fe0; --c-soft: #efebff; --c-deep: #4b33b8; --c-line: #dcd3fb; }
body.pg-game .ll-v2 .ll-top-card { grid-template-columns: minmax(0, 1fr) auto auto; min-height: 0; }
body.pg-game .ll-v2 .ll-top h1 { margin: 0 0 4px; }
body.pg-game .ll-v2 .ll-top-chips li svg { box-sizing: content-box; width: 16px; height: 16px; padding: 4px; color: var(--vg-night); background: var(--vg-aqua); border-radius: 0 !important;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); stroke: var(--vg-night); }
body.pg-game .ll-v2 .ll-top-chips li:nth-child(2) svg { background: var(--vg-violet-lite); }
body.pg-game .ll-v2 .ll-top-chips li:nth-child(3) svg { background: var(--vg-gold); }
body.pg-game .ll-v2 .ll-free-line { color: var(--vg-gold); }
body.pg-game .ll-v2 .ll-free-line svg { color: var(--vg-gold); stroke: var(--vg-gold); }
body.pg-game .ll-v2 .ll-top-accents li { color: var(--vg-text); background: rgba(255, 255, 255, .09); border-radius: 0 !important; box-shadow: inset 0 0 0 1px rgba(185, 168, 255, .22);
  clip-path: var(--pg-bevel); font-weight: 700; }
body.pg-game .ll-v2 .ll-top-accents li:hover { background: rgba(255, 255, 255, .16); }
body.pg-game .ll-v2 .ll-flag { border-radius: 0 !important; }
/* Tabs: a night strip, the open tab lit aqua */
body.pg-game .ll-v2 .ll-tabs { background: var(--vg-night); border-radius: 0 !important; box-shadow: none; clip-path: var(--pg-bevel); }
body.pg-game .ll-v2 .ll-tabs button { color: var(--vg-text-2); border-radius: 0 !important; clip-path: var(--pg-bevel); font-weight: 800; }
body.pg-game .ll-v2 .ll-tabs button:hover { color: #fff; background: rgba(255, 255, 255, .1); }
body.pg-game .ll-v2 .ll-tabs button[aria-selected="true"] { color: var(--vg-night); background: var(--vg-aqua); box-shadow: none; }
body.pg-game .ll-v2 .ll-tabs button svg { stroke: currentColor; }
/* Counts and filters */
body.pg-game .ll-v2 .ll-intro li { align-items: baseline; color: var(--vg-text-2); background: var(--vg-night); border-radius: 0 !important; clip-path: var(--pg-bevel); box-shadow: none; }
body.pg-game .ll-v2 .ll-intro li strong.vg-num { font-size: 22px; line-height: 1; }
body.pg-game .ll-v2 .ll-intro li strong.vg-num { color: var(--vg-aqua); }
body.pg-game .ll-v2 .ll-intro li strong.vg-num.violet { color: var(--vg-violet-lite); }
body.pg-game .ll-v2 .ll-intro li strong.vg-num.gold { color: var(--vg-gold); }
body.pg-game .ll-v2 .ll-intro svg { color: var(--vg-aqua); stroke: var(--vg-aqua); align-self: center; }
body.pg-game .ll-v2 .ll-filter .ll-chip { border-radius: 0 !important; clip-path: var(--pg-bevel); box-shadow: none; }
body.pg-game .ll-v2 .ll-filter .ll-chip[aria-pressed="true"] { color: #fff; background: var(--vg-night); border-color: var(--vg-night); }
body.pg-game .ll-v2 .ll-chip-count { border-radius: 0 !important; }
body.pg-game .ll-v2 .ll-filter .ll-chip[aria-pressed="true"] .ll-chip-count { color: var(--vg-night); background: var(--vg-aqua); }
/* Set cards: light bevelled cards with the accent's colour as a top edge and a shine on hover */
body.pg-game .ll-v2 .ll-card { position: relative; overflow: hidden; background: linear-gradient(var(--a, var(--c)), var(--a, var(--c))) top / 100% 4px no-repeat, #fff;
  border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--vg-line); clip-path: var(--pg-bevel-lg); }
body.pg-game .ll-v2 .ll-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .6s; pointer-events: none; }
body.pg-game .ll-v2 .ll-card:hover { background: linear-gradient(var(--a, var(--c)), var(--a, var(--c))) top / 100% 4px no-repeat, var(--vg-paper); box-shadow: inset 0 0 0 1px var(--a, var(--c)); }
body.pg-game .ll-v2 .ll-card:hover::after { transform: translateX(120%); }
body.pg-game .ll-v2 .ll-card.ll-locked { background: linear-gradient(var(--a, var(--c)), var(--a, var(--c))) top / 100% 4px no-repeat, var(--vg-paper); }
body.pg-game .ll-v2 .ll-card-num { font-family: var(--vg-display); font-size: 32px; }
body.pg-game .ll-v2 .ll-card-title { font-family: var(--vg-display); font-size: 18px; line-height: 1.35; }
body.pg-game .ll-v2 :is(.ll-tag, .ll-accent, .ll-card .badge) { border-radius: 0 !important; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
body.pg-game .ll-v2 :is(.ll-tag, .ll-accent) { background: var(--vg-paper); }
body.pg-game .ll-v2 .ll-card .badge-free { color: var(--vg-night); background: var(--vg-aqua); }
body.pg-game .ll-v2 .ll-card .badge-pro { color: var(--vg-night); background: var(--vg-gold); }
body.pg-game .ll-v2 .ll-ring-go { background: var(--vg-paper); }
/* The player: a light card; the audio deck becomes a night panel */
body.pg-game .ll-v2 .ll-player.vg-card { padding: clamp(16px, 2.4vw, 26px); }
body.pg-game .ll-v2 .ll-player-head h2 { font-family: var(--vg-display); line-height: 1.35; }
body.pg-game .ll-v2 :is(.ll-ghost, .ll-back, .ll-mini) { border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .ll-v2 .ll-dot { border-radius: 0 !important; }
body.pg-game .ll-v2 :is(.ll-dot-done, .ll-dot-now.ll-dot-done) { color: var(--vg-night); background: var(--vg-gold); }
body.pg-game .ll-v2 .ll-deck { background: radial-gradient(420px 180px at 85% -20%, rgba(138, 114, 246, .55), transparent 60%), radial-gradient(360px 160px at 0% 120%, rgba(86, 218, 220, .3), transparent 60%), var(--vg-night);
  border-radius: 0 !important; box-shadow: none; clip-path: var(--pg-bevel-lg); }
body.pg-game .ll-v2 .ll-deck .ll-play { color: var(--vg-night); border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .ll-v2 .ll-play-disc { color: var(--vg-night); background: var(--vg-aqua); }
body.pg-game .ll-v2 .ll-speed .ll-chip[aria-pressed="true"], body.pg-game .ll-v2 .ll-hint-word, body.pg-game .ll-v2 .ll-round:hover { color: var(--vg-night); }
body.pg-game .ll-v2 .ll-speed-thumb { background: var(--vg-aqua); }
body.pg-game .ll-v2 .ll-seek input[type="range"]::-webkit-slider-thumb { border-color: var(--vg-violet); }
body.pg-game .ll-v2 :is(.ll-type, .ll-result:not(:empty), .ll-summary, .ll-task-intro, .ll-questions) { background: var(--vg-paper); border-radius: 0 !important; clip-path: var(--pg-bevel-lg); }
body.pg-game .ll-v2 :is(.ll-type textarea, .ll-keys, .ll-tip, .ll-instructions, .ll-q, .ll-trap, .ll-patterns li, .ll-answer-row, .ll-line, .ll-legend li, .ll-others summary, .ll-clean, .ll-pair,
  .ll-distractor, .ll-saved, .ll-option, .ll-qline :is(input, select), .ll-answered, .ll-trap-span, .ll-key-answer, .ll-w) { border-radius: 0 !important; }
body.pg-game .ll-v2 :is(.ll-q, .ll-trap, .ll-patterns li, .ll-answer-row, .ll-legend li, .ll-tip, .ll-clean) { clip-path: var(--pg-bevel); }
body.pg-game .ll-v2 :is(.ll-trap-num, .ll-qnum, .ll-mark, .ll-legend-n, .ll-step-n) { border-radius: 0 !important; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
body.pg-game .ll-v2 :is(.ll-result, .ll-summary, .ll-box) h3, body.pg-game .ll-v2 .ll-heading, body.pg-game .ll-v2 .ll-score { font-family: var(--vg-display); line-height: 1.35; }
body.pg-game .ll-v2 :is(.ll-score-head, .ll-summary-top) .ll-ring { --rc: var(--vg-violet); background: radial-gradient(closest-side, var(--vg-paper) 76%, transparent 78% 100%), conic-gradient(var(--rc) calc(var(--p) * 1%), #e3def5 0); }
body.pg-game .ll-v2 .ll-answer { background: linear-gradient(#d9f6f6, #d9f6f6) no-repeat 0 0 / 100% 100%; }
/* Progress tab */
body.pg-game .ll-v2 .ll-stat { color: var(--vg-text); background: var(--vg-night) !important; border-radius: 0 !important; box-shadow: none !important; clip-path: var(--pg-bevel-lg); }
body.pg-game .ll-v2 .ll-stat strong { color: #fff; font-family: var(--vg-display); }
body.pg-game .ll-v2 .ll-stat strong.vg-num { color: var(--vg-aqua); text-shadow: 0 0 18px rgba(86, 218, 220, .8); }
body.pg-game .ll-v2 .ll-stat[data-stat="accuracy"] strong.vg-num { color: var(--vg-gold); text-shadow: 0 0 18px rgba(255, 200, 61, .7); }
body.pg-game .ll-v2 .ll-stat-label { color: var(--vg-text-2); }
body.pg-game .ll-v2 .ll-stat-icon { color: var(--vg-night); background: var(--vg-aqua); border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .ll-v2 .ll-stat[data-stat="accuracy"] .ll-stat-icon { background: var(--vg-gold); }
body.pg-game .ll-v2 .ll-stat[data-stat="top"] .ll-stat-icon { background: var(--vg-violet-lite); }
body.pg-game .ll-v2 .ll-stat-icon svg { stroke: currentColor; }
body.pg-game .ll-v2 .ll-box { border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--vg-line); clip-path: var(--pg-bevel-lg); }
body.pg-game .ll-v2 .ll-bars li { background: var(--vg-paper); border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .ll-v2 :is(.ll-bars .progress, .ll-bars .progress-fill) { border-radius: 0 !important; }
body.pg-game .ll-v2 .ll-bar-value { font-family: var(--vg-display); font-size: 20px; }
/* Paywall */
body.pg-game .ll-v2 .ll-paywall .ielts-kicker { color: var(--vg-gold); }
body.pg-game .ll-v2 .ll-paywall p:not(.ielts-kicker) { color: var(--vg-text-2); }
body.pg-game .ll-v2 .ll-paywall .ll-on-ink { color: var(--vg-aqua) !important; }
body.pg-game .ll-v2 .ll-paywall-art { filter: invert(1); mix-blend-mode: screen; }
@media (max-width: 900px) {
  body.pg-game .ll-v2 .ll-top-card { grid-template-columns: minmax(0, 1fr) auto; }
  body.pg-game .ll-v2 .ll-top-accents { grid-column: 1; grid-row: 2; grid-template-columns: repeat(4, auto); justify-content: start; }
  body.pg-game .ll-v2 .ll-top-card > .pg-portrait { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 640px) {
  body.pg-game .ll-v2 .ll-top-accents { grid-template-columns: repeat(2, auto); margin-top: 12px; }
  body.pg-game .ll-v2 .ll-top h1 { padding-right: 94px; }
}
@media (prefers-reduced-motion: reduce) { body.pg-game .ll-v2 .ll-card::after { transition: none; } }

/* ══ Reading lab ═════════════════════════════════════════════════════════════════════════════════════════════ */
body.pg-game .rl-v2 .rl-hero-inner.pg-hero { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
body.pg-game .rl-v2 .rl-hero-inner > .pg-portrait { grid-column: 2; grid-row: 1 / span 2; }
body.pg-game .rl-v2 .rl-hero-inner .rl-steps { grid-column: 1; margin: 0; }
body.pg-game .rl-v2 .rl-hero-inner .rl-steps li { background: rgba(255, 255, 255, .09) !important; }
body.pg-game .rl-v2 .rl-hero-art { grid-column: auto; grid-row: auto; width: auto; height: auto; }
body.pg-game .rl-v2 .vg-panel .ielts-kicker, body.pg-game .rl-v2 .vg-panel .ielts-kicker a { color: var(--vg-aqua); }
body.pg-game .rl-v2 .vg-panel .ielts-kicker a:hover { color: #fff; }
/* Passage header: a night panel; the reading otter sits in a light portrait window */
body.pg-game .rl-v2 .rl-head > .wrap.vg-panel { padding: 22px 230px 22px 28px !important; overflow: visible; animation: pg-rise .45s var(--pg-ease) backwards; }
body.pg-game .rl-v2 .rl-head > .wrap.vg-panel::after { right: 26px; top: 50%; bottom: auto; width: 168px; height: 126px; margin-top: -63px; mix-blend-mode: normal; filter: none;
  background: url("/static/study-hub/ielts-art/reading-lab.webp") center / 88% auto no-repeat, radial-gradient(circle at 50% 44%, #fff 0 40%, #f1edff 70%, #d6f5f5 100%);
  clip-path: var(--pg-bevel-lg); box-shadow: none; animation: vg-bob 3.2s ease-in-out infinite; }
body.pg-game .rl-v2 .rl-head .rl-sub { color: var(--vg-text-2); }
body.pg-game .rl-v2 .rl-head-chips .rl-chip { color: var(--vg-text); background: rgba(255, 255, 255, .09) !important; }
body.pg-game .rl-v2 .rl-head-chips .rl-chip .rl-ico { color: var(--vg-aqua); }
/* Index cards */
body.pg-game .rl-v2 .rl-work > .wrap > h2 { font-family: var(--vg-display); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.35; }
body.pg-game .rl-v2 .rl-card { overflow: hidden; background: #fff; border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--vg-line) !important; clip-path: var(--pg-bevel-lg); }
body.pg-game .rl-v2 .rl-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .6s; pointer-events: none; }
body.pg-game .rl-v2 .rl-card:hover { background: var(--vg-paper); box-shadow: inset 0 0 0 2px var(--vg-violet) !important; }
body.pg-game .rl-v2 .rl-card:hover::after { transform: translateX(120%); }
body.pg-game .rl-v2 .rl-card-art { border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .rl-v2 .rl-card strong { font-family: var(--vg-display); font-size: 20px; line-height: 1.35; }
body.pg-game .rl-v2 .rl-card-n { color: #6a4fe0; }
body.pg-game .rl-v2 :is(.rl-badge, .rl-chip, .rl-card-state, .rl-lock, .rl-card-go, .rl-group h3, .rl-headings, .rl-table summary, .rl-table table, .rl-result .rl-hint) { border-radius: 0 !important; }
body.pg-game .rl-v2 :is(.rl-badge, .rl-chip, .rl-card-state, .rl-card-go, .rl-group h3, .rl-headings, .rl-table summary) { clip-path: var(--pg-bevel); }
body.pg-game .rl-v2 .rl-free { color: var(--vg-night); background: var(--vg-aqua); }
body.pg-game .rl-v2 .rl-pro { color: var(--vg-night); background: var(--vg-gold); }
body.pg-game .rl-v2 .rl-card[data-access="open"] .rl-pro { color: var(--vg-night); background: var(--vg-violet-lite); }
body.pg-game .rl-v2 .rl-card-go { color: var(--vg-night); background: var(--vg-aqua); }
body.pg-game .rl-v2 .rl-card:hover .rl-card-go { color: var(--vg-night); background: var(--vg-gold); }
/* Toolbar, passage and questions */
body.pg-game .rl-v2 { --rl-bg: #f1eff9; }
body.pg-game .rl-v2 .rl-toolbar { background: linear-gradient(#f1eff9 78%, rgba(241, 239, 249, 0)); }
body.pg-game .rl-v2 .rl-toolbar-inner { border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--vg-line); clip-path: var(--pg-bevel-lg); }
body.pg-game .rl-v2 .rl-dot { border-radius: 0 !important; }
body.pg-game .re-back { border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .rl-v2 .rl-toolbar .btn:not(.vg-btn) { border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .rl-v2 .rl-ring-track { fill: var(--vg-paper); stroke: #e3def5; }
body.pg-game .rl-v2 .rl-ring-bar { stroke: var(--vg-violet); }
body.pg-game .rl-v2 .rl-clock output { font-family: var(--vg-display); font-size: 15px; }
body.pg-game .rl-v2 .re-passage.re-boxed.vg-card, body.pg-game .rl-v2 .rl-questions.vg-card { animation: pg-rise .5s var(--pg-ease) backwards; }
body.pg-game .rl-v2 .rl-group h3 { color: var(--vg-night); background: var(--vg-aqua); }
body.pg-game .rl-v2 .rl-headings { background: var(--vg-paper); }
body.pg-game .rl-v2 :is(.rl-q, .rl-options label, .rl-input, .rl-select) { border-radius: 0 !important; }
body.pg-game .rl-v2 .rl-n { border-radius: 0 !important; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); background: var(--vg-night); }
/* Result: a night number panel with a glowing score */
body.pg-game .rl-v2 .rl-result > .wrap.vg-panel { padding: 22px 26px !important; }
body.pg-game .rl-v2 .rl-result h2 { color: #fff; font-family: var(--vg-display); line-height: 1.35; }
body.pg-game .rl-v2 .rl-result p { color: var(--vg-text-2); }
body.pg-game .rl-v2 .rl-result .rl-hint { color: var(--vg-text-2); background: rgba(255, 255, 255, .08); }
body.pg-game .rl-v2 .rl-sr-track { fill: transparent; stroke: rgba(150, 170, 255, .16); }
body.pg-game .rl-v2 .rl-sr-bar { stroke: var(--vg-aqua); filter: drop-shadow(0 0 6px var(--vg-aqua)); }
body.pg-game .rl-v2 .rl-sr-num b { color: var(--vg-aqua); font-family: var(--vg-display); text-shadow: 0 0 18px rgba(86, 218, 220, .8); }
body.pg-game .rl-v2 .rl-sr-num small { color: var(--vg-text-2); }
body.pg-game .rl-v2 .rl-band { color: var(--vg-gold); background: rgba(255, 255, 255, .06); border-radius: 0 !important; box-shadow: inset 0 0 0 2px rgba(255, 200, 61, .5) !important;
  clip-path: var(--pg-bevel-lg); font-family: var(--vg-display); text-shadow: 0 0 18px rgba(255, 200, 61, .7); }
body.pg-game .rl-v2 .rl-band small { color: var(--vg-text-2); text-shadow: none; }
body.pg-game .rl-v2 .rl-table summary { color: var(--vg-night); background: var(--vg-aqua); }
body.pg-game .rl-v2 .rl-table table { color: var(--vg-ink); }
/* Paywall (locked passage) */
body.pg-game .rl-v2 .rl-paywall > .wrap.vg-panel::after { border-radius: 0 !important; clip-path: var(--pg-bevel-lg); }
body.pg-game .rl-v2 .rl-paywall .ielts-kicker { color: var(--vg-night) !important; background: var(--vg-gold) !important; border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .rl-v2 .rl-paywall .text-link.rl-free-link { color: var(--vg-night); background: var(--vg-aqua); border-radius: 0 !important; clip-path: var(--pg-bevel); text-decoration: none; }
body.pg-game .rl-v2 .rl-paywall h2 { color: #fff; font-family: var(--vg-display); line-height: 1.35; }
body.pg-game .rl-v2 .rl-paywall p { color: var(--vg-text-2); }
body.pg-game .rl-v2 .rl-paywall .ielts-kicker { color: var(--vg-gold); }
body.pg-game .rl-v2 .rl-paywall .text-link { color: var(--vg-aqua); }
@media (max-width: 640px) {
  body.pg-game .rl-v2 .rl-hero-inner.pg-hero { display: block !important; }
  body.pg-game .rl-v2 .rl-hero-inner .rl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
  body.pg-game .rl-v2 .rl-hero-inner .rl-steps > li { padding: 8px 9px 10px; font-size: 12.5px; }
  body.pg-game .rl-v2 .rl-head > .wrap.vg-panel { padding: 18px 108px 18px 16px !important; }
  body.pg-game .rl-v2 .rl-head > .wrap.vg-panel::after { right: 12px; top: 14px; margin: 0; width: 86px; height: 66px; }
}
/* ══ Exam predictions (pack page; the IELTS home's prediction cards are not on this page) ═══════════════════════ */
html body.pg-game.prediction-page { background: #f1eff9; }
body.pg-game .prediction-back { color: #4b33b8; font-weight: 700; }
body.pg-game .prediction-hero { margin: 4px 0 24px; padding: 26px 30px 0 !important; align-items: end; overflow: hidden !important; }
body.pg-game .prediction-hero > div { padding-bottom: 24px; }
body.pg-game .prediction-hero .prediction-eyebrow { margin: 0 0 6px; }
body.pg-game .prediction-main .prediction-hero h1 { margin: 0; font-size: clamp(30px, 4vw, 44px) !important; line-height: 1.3 !important; }
body.pg-game .prediction-hero .pg-mascot { width: 150px; margin: 0 0 -6px; }
body.pg-game .prediction-files li { color: var(--vg-ink); background: #fff; border: 0; border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--vg-line);
  clip-path: var(--pg-bevel-lg); transition: background-color .2s; animation: pg-rise .45s var(--pg-ease) backwards; }
body.pg-game .prediction-files li:nth-child(2) { animation-delay: .06s; } body.pg-game .prediction-files li:nth-child(3) { animation-delay: .12s; }
body.pg-game .prediction-files li:hover { background: var(--vg-paper); }
body.pg-game .prediction-files li > div { padding-left: 14px; box-shadow: inset 4px 0 0 var(--vg-aqua); }
body.pg-game .prediction-files li:nth-child(3n+2) > div { box-shadow: inset 4px 0 0 var(--vg-violet); }
body.pg-game .prediction-files li:nth-child(3n) > div { box-shadow: inset 4px 0 0 var(--vg-gold); }
body.pg-game .prediction-files strong { font-family: var(--vg-display); font-size: 18px; line-height: 1.35; }
body.pg-game .prediction-files small { color: #6a4fe0; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body.pg-game .prediction-button.vg-btn { justify-content: center; font-size: 14px; }
body.pg-game .prediction-empty { position: relative; background: #fff; border: 0; border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--vg-line); clip-path: var(--pg-bevel-lg); }
body.pg-game .prediction-empty h2 { font-family: var(--vg-display); font-weight: 800; line-height: 1.4; }
body.pg-game .prediction-lock { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 6px; color: var(--vg-gold); background: var(--vg-night);
  clip-path: var(--pg-bevel); font-size: 34px; text-shadow: 0 0 14px rgba(255, 200, 61, .8); }
@media (max-width: 640px) {
  body.pg-game .prediction-hero { padding: 20px 16px 0 !important; }
  body.pg-game .prediction-hero > .pg-mascot { top: auto; bottom: -4px; width: 86px; }
  body.pg-game .prediction-hero > div { padding-bottom: 20px; }
  body.pg-game .prediction-main .prediction-hero h1 { font-size: 28px !important; }
}

/* ══ Flashcards (Vocab club) ═════════════════════════════════════════════════════════════════════════════════ */
html body.pg-game.vocab-page { background: #f1eff9; }
body.pg-game .vf-hero.pg-hero { display: flex !important; min-height: 0; padding: 26px 34px !important; }
body.pg-game .vf-hero .vf-back { color: var(--vg-aqua); font-weight: 800; }
body.pg-game .vf-hero .vf-eyebrow { margin-top: 16px; }
body.pg-game .vf-hero h1.vg-title { letter-spacing: .3px !important; }
body.pg-game .vf-hero p:last-child { color: var(--vg-text-2); }
body.pg-game .vf-language { color: var(--vg-night); background: var(--vg-aqua); border: 0; border-radius: 0 !important; clip-path: var(--pg-bevel); z-index: 2; }
body.pg-game .vf-hero-art { flex: 0 0 330px; height: 190px; }
body.pg-game .vf-art-card { position: relative; left: -60px; border-radius: 0 !important; clip-path: var(--pg-bevel-lg); box-shadow: none; outline: 3px solid var(--vg-aqua); outline-offset: -3px; }
body.pg-game .vf-art-tag { right: 140px; color: var(--vg-night); background: var(--vg-gold); border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .vf-art-spark { right: 150px; color: var(--vg-gold); text-shadow: 0 0 16px rgba(255, 200, 61, .8); }
body.pg-game .vf-hero-otter { position: absolute; right: 0; bottom: -26px; width: 150px; height: auto; }
body.pg-game .vf-art-card { color: var(--vg-ink); }
/* Decks */
body.pg-game .vf-section-title h2 { font-family: var(--vg-display); font-size: 20px; line-height: 1.35; }
body.pg-game .vf-deck { border: 0; border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--vg-line); clip-path: var(--pg-bevel); }
body.pg-game .vf-deck[aria-pressed=true] { color: #fff; background: var(--vg-night); box-shadow: inset 0 0 0 2px var(--vg-violet-lite); }
body.pg-game .vf-deck[aria-pressed=true] small { color: var(--vg-text-2); }
body.pg-game .vf-deck-icon { border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .vf-notebook { color: #4b33b8; font-weight: 700; border-color: #c9bcf6; border-radius: 0 !important; }
/* Tabs: a night strip, the open activity lit aqua */
body.pg-game .vf-tabs { background: var(--vg-night); border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.pg-game .vf-tabs button { color: var(--vg-text-2); border-radius: 0 !important; clip-path: var(--pg-bevel); font-weight: 800; }
body.pg-game .vf-tabs button:hover { color: #fff; background: rgba(255, 255, 255, .1); }
body.pg-game .vf-tabs button[aria-selected=true] { color: var(--vg-night); background: var(--vg-aqua); box-shadow: none; }
/* The stage and the card: the flashcard is a night game card with a glowing word */
body.pg-game .vf-stage.vg-card { padding: 28px; }
body.pg-game .vf-stage h2 { font-family: var(--vg-display); line-height: 1.35; }
body.pg-game .vf-pill { color: var(--vg-night); background: var(--vg-violet-lite); border-radius: 0 !important; clip-path: var(--pg-bevel); font-weight: 700; }
body.pg-game .vf-flip.vg-panel { min-height: 265px; padding: 30px 24px; clip-path: var(--pg-bevel-lg); transition: transform .2s var(--pg-ease); }
body.pg-game .vf-flip.vg-panel:hover { transform: translateY(-2px); }
body.pg-game #main .vf-flip.vg-panel.is-back { background: radial-gradient(600px 240px at 20% -20%, rgba(86, 218, 220, .4), transparent 60%), radial-gradient(520px 240px at 100% 120%, rgba(138, 114, 246, .4), transparent 60%), var(--vg-night-2) !important; }
body.pg-game .vf-flip .vf-word { color: #fff; font-family: var(--vg-display); font-size: clamp(32px, 4vw, 52px); font-weight: 800; line-height: 1.3; letter-spacing: .5px;
  text-shadow: 0 0 22px rgba(86, 218, 220, .85), 0 0 2px rgba(255, 255, 255, .6); }
body.pg-game .vf-flip :is(.vf-ipa, .vf-hint) { color: var(--vg-text-2); }
body.pg-game .vf-flip .vf-hint:first-child { color: var(--vg-aqua); font-weight: 800; letter-spacing: .12em; }
body.pg-game .vf-flip .vf-meaning { color: #fff; font-size: 22px; text-shadow: 0 0 16px rgba(138, 114, 246, .7); }
body.pg-game .vf-flip > span:not([class]) { color: var(--vg-gold); font-weight: 700; }
body.pg-game .vf-flip .vf-example { color: var(--vg-text-2); }
body.pg-game .vf-btn.vg-btn { min-height: 42px; }
body.pg-game .vf-progress { border-radius: 0 !important; height: 8px; }
body.pg-game .vf-progress::-webkit-progress-bar { background: var(--vg-line); }
body.pg-game .vf-progress::-webkit-progress-value { background: linear-gradient(90deg, var(--vg-aqua), var(--vg-violet)); }
body.pg-game .vf-progress::-moz-progress-bar { background: linear-gradient(90deg, var(--vg-aqua), var(--vg-violet)); }
body.pg-game .vf-game-icon { color: var(--vg-gold); background: var(--vg-night); border-radius: 0 !important; clip-path: var(--pg-bevel-lg); text-shadow: 0 0 18px rgba(255, 200, 61, .8);
  animation: vg-bob 3.2s ease-in-out infinite; }
body.pg-game .vf-pair { border-radius: 0 !important; clip-path: var(--pg-bevel); font-size: 13px; }
body.pg-game .vf-pair.selected { border-color: var(--vg-violet); background: #ece8fb; }
body.pg-game .vf-prompt { color: var(--vg-text); background: radial-gradient(500px 200px at 80% -20%, rgba(138, 114, 246, .45), transparent 60%), var(--vg-night); border-radius: 0 !important; clip-path: var(--pg-bevel-lg); }
body.pg-game .vf-prompt p { color: #fff; }
body.pg-game .vf-prompt .vf-hint { color: var(--vg-aqua); }
body.pg-game :is(.vf-form input, .vf-feedback, .vf-alert, .vf-invite, .vf-player) { border-radius: 0 !important; }
body.pg-game :is(.vf-feedback, .vf-alert, .vf-player) { clip-path: var(--pg-bevel); }
body.pg-game .vf-score.vg-num { font-size: 52px; line-height: 1.2; }
body.pg-game .vf-timer { color: #6a4fe0; font-family: var(--vg-display); font-size: 24px; }
body.pg-game .vf-room-code { font-family: var(--vg-display); }
@media (max-width: 1100px) { body.pg-game .vf-hero-art { flex-basis: 260px; } body.pg-game .vf-art-card { left: -40px; } }
@media (max-width: 760px) {
  body.pg-game .vf-hero.pg-hero { padding: 20px 16px !important; }
  body.pg-game .vf-hero .vf-eyebrow, body.pg-game .vf-hero h1.vg-title { padding-right: 90px !important; }
  body.pg-game .vf-hero-art { display: block; position: absolute; right: 8px; bottom: 0; width: 96px; height: 110px; flex: none; }
  body.pg-game .vf-hero-art > :not(.vf-hero-otter) { display: none; }
  body.pg-game .vf-hero-otter { right: 0; bottom: -10px; width: 92px; }
  body.pg-game .vf-stage.vg-card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  body.pg-game :is(.vf-game-icon, .vf-hero-otter) { animation: none !important; }
  body.pg-game .vf-flip.vg-panel { transition: none; }
}
/* ══ Mock exam: only the screens outside the timed sections ═══════════════════════════════════════════════════
   Every rule starts with body.mk-v2.pg-game:not([data-mock-status="running"]). The running exam screen (candidate bar,
   Part box, questions, figures, Alice's speaking call, bottom navigator) keeps ielts-mock-cd.css exactly as it is. */
body.mk-v2.pg-game:not([data-mock-status="running"]) .mock-paper-picker a { border: 0; border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--vg-line); clip-path: var(--pg-bevel);
  background: #fff; color: var(--vg-ink); font-weight: 700; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mock-paper-picker a:hover { background: var(--vg-paper); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mock-paper-picker a[aria-current="page"] { color: var(--vg-aqua); background: var(--vg-night); outline: 0; box-shadow: none; }
/* Intro hero */
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-hero.pg-hero { grid-template-columns: minmax(0, 1fr) auto; overflow: visible; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-hero .mock-lede { color: var(--vg-text-2); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-hero .mk-kicker { color: var(--vg-aqua) !important; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-hero .mk-chip-ink { color: var(--vg-night); background: var(--vg-gold); border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-facts li { align-items: baseline; color: var(--vg-text-2); background: rgba(255, 255, 255, .09); border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(185, 168, 255, .22); clip-path: var(--pg-bevel); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-facts li .mk-i { align-self: center; color: var(--vg-gold); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-facts b.vg-num { font-size: 26px; line-height: 1; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-facts b.vg-num:not(.violet):not(.gold) { color: var(--vg-aqua); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-facts b.vg-num.violet { color: var(--vg-violet-lite); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-facts b.vg-num.gold { color: var(--vg-gold); }
body.mk-v2.pg-game:not([data-mock-status="running"]) main .btn.mk-start.vg-btn { min-height: 56px; padding: 0 28px; font-size: 17px; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-start-note { color: var(--vg-text-2); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-hero-art.pg-portrait { width: 270px; margin: 0; align-self: center; }
/* Sections, rules and results history */
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-sections li { background: linear-gradient(var(--sk), var(--sk)) top / 100% 4px no-repeat, #fff; border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px var(--vg-line) !important; clip-path: var(--pg-bevel-lg); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-sections li:hover { background: linear-gradient(var(--sk), var(--sk)) top / 100% 4px no-repeat, var(--vg-paper); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-sec-icon { color: #fff; background: var(--sk); border-radius: 0 !important; clip-path: var(--pg-bevel); box-shadow: none; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-sec-n { color: var(--sk); font-family: var(--vg-display); font-size: 22px; opacity: .8; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-sections b { font-family: var(--vg-display); font-size: 22px; line-height: 1.3; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-sec-time { border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-rules li { border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--vg-line); clip-path: var(--pg-bevel); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-rules .mk-i { color: var(--vg-night); background: var(--vg-aqua); border-radius: 0 !important; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-rules li:nth-child(2n) .mk-i { background: var(--vg-violet-lite); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-rules li:nth-child(3n) .mk-i { background: var(--vg-gold); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-history.vg-card { padding: 20px 22px; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-history h2 { font-family: var(--vg-display); line-height: 1.35; }
body.mk-v2.pg-game:not([data-mock-status="running"]) :is(.mk-history-icon, .mk-block-icon, .mk-score-icon) { border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-history-icon { color: var(--vg-aqua); background: var(--vg-night); }
body.mk-v2.pg-game:not([data-mock-status="running"]) :is(.mk-history-empty, .mk-history-paper, .mk-history-band, .mk-history-table) { border-radius: 0 !important; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-history-paper.vg-card { padding: 14px 16px; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-history-table td b { font-family: var(--vg-display); font-size: 18px; }
/* Between sections: a night panel with the next skill's art in a portrait window */
body.mk-v2.pg-game:not([data-mock-status="running"]) .mock-toolbar.mk-bar.vg-card { padding: 12px 18px; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-bar h2 { font-family: var(--vg-display); line-height: 1.3; }
body.mk-v2.pg-game:not([data-mock-status="running"]) :is(.mk-meter, .mk-meter span) { border-radius: 0 !important; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-meter span { background: linear-gradient(90deg, var(--vg-aqua), var(--vg-violet)); }
body.mk-v2.pg-game:not([data-mock-status="running"]) #mock-between.vg-panel { padding: 28px 30px !important; animation: pg-rise .5s var(--pg-ease) backwards; }
body.mk-v2.pg-game:not([data-mock-status="running"]) #mock-between .mk-between-icon { color: var(--vg-night); background: var(--vg-aqua); border-radius: 0 !important; box-shadow: none;
  clip-path: var(--pg-bevel-lg); animation: vg-pulse 1.8s ease-in-out infinite; }
body.mk-v2.pg-game:not([data-mock-status="running"]) #mock-between .mk-between-kicker { color: var(--vg-aqua); }
body.mk-v2.pg-game:not([data-mock-status="running"]) #mock-between #mock-next-description { color: #fff; font-family: var(--vg-display); font-size: 22px; line-height: 1.4; }
body.mk-v2.pg-game:not([data-mock-status="running"]) #mock-between .mk-between-portrait { grid-column: 3; grid-row: 1 / span 2; justify-self: end; width: 260px; }
body.mk-v2.pg-game:not([data-mock-status="running"]) #mock-between .mk-break { color: var(--vg-text-2); background: rgba(255, 255, 255, .08); border: 0; border-radius: 0 !important; clip-path: var(--pg-bevel); }
body.mk-v2.pg-game:not([data-mock-status="running"]) #mock-between .mk-break .mk-i { color: var(--vg-gold); }
/* Results */
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-results-head.vg-panel { padding: 26px 30px !important; animation: pg-rise .5s var(--pg-ease) backwards; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-results-head .mk-kicker { color: var(--vg-gold); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-results-head .mk-kicker .mk-i { color: var(--vg-gold); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-results-head .mock-small { color: var(--vg-text-2); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-gauge-track { stroke: rgba(150, 170, 255, .16); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-gauge-l { stroke: var(--vg-aqua); filter: drop-shadow(0 0 6px var(--vg-aqua)); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-gauge-r { stroke: var(--vg-violet-lite); filter: drop-shadow(0 0 6px var(--vg-violet)); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-gauge-value strong.vg-num { color: var(--vg-gold); font-size: 52px; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-gauge-value span, body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-gauge-label { color: var(--vg-text-2) !important; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mock-score-card.vg-card { background: linear-gradient(var(--sk), var(--sk)) top / 100% 4px no-repeat, #fff !important; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mock-score-card:hover { box-shadow: none; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mock-score-card .mk-score-value strong { font-family: var(--vg-display); font-size: 46px; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-score-icon { color: #fff; background: var(--sk); }
body.mk-v2.pg-game:not([data-mock-status="running"]) :is(.mk-score-bar, .mk-score-bar span, .mk-score-bands li, .mk-block-chips li, .mock-review-task, .mock-review-task pre,
  .mk-wordchip, .mock-feedback, .mk-band, .mk-fb-list, .mk-correction, #mock-recording-result) { border-radius: 0 !important; }
body.mk-v2.pg-game:not([data-mock-status="running"]) :is(.mk-score-bands li, .mk-block-chips li, .mk-band) { clip-path: var(--pg-bevel); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-score-bar { background: var(--vg-line); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-score-bands li { background: var(--vg-paper); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-block.vg-card { padding: 20px 22px 8px; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-block h2, body.mk-v2.pg-game:not([data-mock-status="running"]) .mock-score-card h3 { font-family: var(--vg-display); line-height: 1.35; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-block-icon { color: #fff; background: var(--sk); }
body.mk-v2.pg-game:not([data-mock-status="running"]) #mock-results details:not(.study-navigation):not(.study-rail-account) { border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--vg-line); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-band strong { font-family: var(--vg-display); }
@media (max-width: 900px) {
  body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-hero-art.pg-portrait { width: 200px; }
}
@media (max-width: 700px) {
  body.mk-v2.pg-game:not([data-mock-status="running"]) #mock-between .mk-between-portrait { display: none; }
}
@media (max-width: 640px) {
  body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-hero-art.pg-portrait { position: absolute; top: 14px; right: 12px; width: 86px; order: 0; }
  body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-hero .mk-kicker { padding-right: 94px; }
  body.mk-v2.pg-game:not([data-mock-status="running"]) #mock-between.vg-panel, body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-results-head.vg-panel { padding: 20px 18px !important; }
  body.mk-v2.pg-game:not([data-mock-status="running"]) #mock-between #mock-next-description { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  body.mk-v2.pg-game:not([data-mock-status="running"]) #mock-between .mk-between-icon { animation: none; }
}

/* ══ Locked mock paper ═══════════════════════════════════════════════════════════════════════════════════════ */
html body.mock-locked.pg-game { background: #f1eff9; }
body.mock-locked.pg-game .mock-locked-hero { margin: 0 0 6px; padding: 26px 30px 0 !important; align-items: end; overflow: hidden !important; }
body.mock-locked.pg-game .mock-locked-hero > div { padding-bottom: 24px; }
body.mock-locked.pg-game .mock-locked-hero .ielts-kicker { color: var(--vg-aqua) !important; }
body.mock-locked.pg-game .mock-locked-hero h1 { color: transparent !important; }
body.mock-locked.pg-game .mock-locked-hero .pg-mascot { width: 140px; margin: 0 0 -6px; }
body.mock-locked.pg-game .mock-paper-picker { padding: 0; }
body.mock-locked.pg-game .mock-paper-picker a { border: 0; border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--vg-line); clip-path: var(--pg-bevel); background: #fff; color: var(--vg-ink); font-weight: 700; }
body.mock-locked.pg-game .mock-paper-picker a[aria-current="page"] { color: var(--vg-aqua); background: var(--vg-night); outline: 0; box-shadow: none; }
body.mock-locked.pg-game .paywall { position: relative; color: var(--vg-text) !important; border: 0 !important; border-radius: 0 !important; clip-path: var(--pg-bevel-lg);
  background: radial-gradient(700px 260px at 80% -20%, rgba(138, 114, 246, .45), transparent 60%), radial-gradient(520px 240px at 0% 120%, rgba(86, 218, 220, .28), transparent 60%), var(--vg-night) !important; }
body.mock-locked.pg-game .paywall :is(h2) { color: #fff !important; font: 800 clamp(24px, 3vw, 34px)/1.35 var(--vg-display); }
body.mock-locked.pg-game .paywall :is(p, li) { color: var(--vg-text-2) !important; }
body.mock-locked.pg-game .paywall .kicker { color: var(--vg-gold) !important; }
body.mock-locked.pg-game .paywall a:not(.btn) { color: var(--vg-aqua) !important; }
body.mock-locked.pg-game .paywall .btn { color: var(--vg-night) !important; background: var(--vg-gold) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; clip-path: var(--pg-bevel); }
body.mock-locked.pg-game .paywall .btn:not(.btn-hi) { background: var(--vg-aqua) !important; }
body.mock-locked.pg-game .paywall .text-link { color: var(--vg-aqua) !important; }
@media (max-width: 640px) {
  body.mock-locked.pg-game .mock-locked-hero { padding: 20px 16px 0 !important; }
  body.mock-locked.pg-game .mock-locked-hero > .pg-mascot { top: auto; bottom: -4px; width: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  body.pg-game .rl-v2 .rl-head > .wrap.vg-panel::after { animation: none; }
  body.pg-game .rl-v2 .rl-card::after { transition: none; }
}

/* Mock exam practice bands: the overall arc glows gold on the night panel */
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-gauge-band { stroke: var(--vg-gold); filter: drop-shadow(0 0 6px var(--vg-gold)); }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-gauge-pending { color: var(--vg-aqua) !important; }
body.mk-v2.pg-game:not([data-mock-status="running"]) .mk-history-overall b.vg-num { color: #b78100; }