/* Vidi IELTS "game" style, shared by every IELTS page except the Arena (which has its own).
   Chosen by the owner on 1 Nov 2026 from the "Tuần này" panel (ielts-week.css): the Arena's night screen with the
   Vidi logo's aqua and violet glows, bevelled corners instead of rounded cards, glowing numbers, bevelled
   aqua / violet / gold buttons, and the otter mascot bobbing beside headline panels.
   Rule: reading and exam content stays on light surfaces (use .vg-card); the night .vg-panel is for headers,
   hero areas and number panels. Effects: count-up numbers (vidi-game.js), hover shine, otter bob, pulse. */
:root {
  --vg-night: #140f2e; --vg-night-2: #1d1645; --vg-aqua: #56dadc; --vg-violet: #8a72f6; --vg-violet-lite: #b9a8ff; --vg-gold: #ffc83d;
  --vg-text: #eaf7ff; --vg-text-2: #b8c4e6; --vg-text-3: #8c96c4;
  --vg-ink: #141225; --vg-ink-2: #4a4766; --vg-line: #e3def5; --vg-paper: #f7f5fd;
  --vg-bevel: 18px; --vg-bevel-sm: 10px;
  --vg-display: 'Baloo 2', 'Be Vietnam Pro', system-ui, sans-serif;
}

/* ── Night panel: headers, hero areas, number panels ── */
.vg-panel { position: relative; padding: 24px 26px; color: var(--vg-text); isolation: isolate;
  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);
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  clip-path: polygon(var(--vg-bevel) 0, 100% 0, 100% calc(100% - var(--vg-bevel)), calc(100% - var(--vg-bevel)) 100%, 0 100%, 0 var(--vg-bevel)); }
.vg-panel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px); pointer-events: none; }
.vg-panel :is(h1, h2, h3) { color: #fff; }
.vg-panel :is(p, small, li) { color: var(--vg-text-2); }
.vg-panel a:not(.vg-btn) { color: var(--vg-aqua); }
.vg-title { margin: 0; font: 800 clamp(24px, 3vw, 32px)/1.35 var(--vg-display); letter-spacing: .3px; padding-top: 2px;
  background: linear-gradient(180deg, #fff 30%, var(--vg-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vg-title.small { font-size: 22px; text-transform: uppercase; letter-spacing: .5px; }

/* ── Light bevelled card: content that people read ── */
.vg-card { position: relative; background: #fff; color: var(--vg-ink); border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  clip-path: polygon(var(--vg-bevel-sm) 0, 100% 0, 100% calc(100% - var(--vg-bevel-sm)), calc(100% - var(--vg-bevel-sm)) 100%, 0 100%, 0 var(--vg-bevel-sm));
  outline: 1px solid var(--vg-line); outline-offset: -1px; }
.vg-card.accent { background: linear-gradient(180deg, #fff, var(--vg-paper)); }

/* ── Numbers ── */
.vg-num { font: 800 40px/1 var(--vg-display); color: var(--vg-aqua); text-shadow: 0 0 18px rgba(86, 218, 220, .8); font-variant-numeric: tabular-nums; }
.vg-num.violet { color: var(--vg-violet-lite); text-shadow: 0 0 18px rgba(138, 114, 246, .9); }
.vg-num.gold { color: var(--vg-gold); text-shadow: 0 0 18px rgba(255, 200, 61, .7); }
.vg-card .vg-num { color: #0a8a91; text-shadow: none; }
.vg-card .vg-num.violet { color: #6a4fe0; } .vg-card .vg-num.gold { color: #b07a00; }

/* ── Bevelled buttons with a hover shine ── */
.vg-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; overflow: hidden; cursor: pointer;
  color: var(--vg-night) !important; background: var(--vg-aqua) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font: 800 15px/1.2 'Be Vietnam Pro', system-ui, sans-serif; text-decoration: none !important; text-transform: none;
  clip-path: polygon(var(--vg-bevel-sm) 0, 100% 0, 100% calc(100% - var(--vg-bevel-sm)), calc(100% - var(--vg-bevel-sm)) 100%, 0 100%, 0 var(--vg-bevel-sm)); transition: transform .18s, filter .18s; }
.vg-btn.violet { background: var(--vg-violet-lite) !important; } .vg-btn.gold { background: var(--vg-gold) !important; }
.vg-btn.ghost { color: var(--vg-text) !important; background: rgba(255, 255, 255, .1) !important; }
.vg-card .vg-btn.ghost, .vg-btn.ghost.on-light { color: var(--vg-ink) !important; background: var(--vg-paper) !important; }
.vg-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); transition: transform .6s; pointer-events: none; }
.vg-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.vg-btn:hover::before { transform: translateX(120%); }
.vg-btn:focus-visible { outline: 3px solid var(--vg-violet); outline-offset: 3px; }
.vg-btn.arrow::after { content: '→'; transition: transform .18s; } .vg-btn.arrow:hover::after { transform: translateX(4px); }

/* ── Chips and bars ── */
.vg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 12px; font-weight: 800; color: var(--vg-night); background: var(--vg-aqua);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.vg-chip.violet { background: var(--vg-violet-lite); } .vg-chip.gold { background: var(--vg-gold); }
.vg-bar { display: block; height: 8px; background: rgba(150, 170, 255, .18); overflow: hidden; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.vg-bar > i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--vg-aqua), var(--vg-violet)); box-shadow: 0 0 10px var(--vg-aqua); }
.vg-card .vg-bar { background: var(--vg-line); }

/* ── Otter beside a panel ── */
.vg-otter { filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .45)); animation: vg-bob 3.2s ease-in-out infinite; }
@keyframes vg-bob { 50% { transform: translateY(-8px) rotate(-2deg); } }
.vg-pulse { animation: vg-pulse 1.8s ease-in-out infinite; }
@keyframes vg-pulse { 50% { transform: scale(1.12); filter: brightness(1.2); } }

@media (prefers-reduced-motion: reduce) {
  .vg-otter, .vg-pulse { animation: none !important; }
  .vg-btn, .vg-btn::before, .vg-btn::after { transition: none !important; }
}

/* a gradient title inside a night panel keeps its gradient (the panel's heading colour would win otherwise) */
.vg-panel .vg-title { color: transparent !important; }
.vg-btn[hidden] { display: none !important; }   /* the button display would otherwise beat [hidden] */