/* The Koala-led path (guide.js): racetrack on 📘 Tổng quan, step intro / result cards, the coach beside an exercise. */
:root { --grass: #cdeedd; --grass-2: #b8e4cd; --asphalt: #3b4a5e; --kerb: #ffffff; --kerb-2: #e0564a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grass: #16322b; --grass-2: #1b3c33; --asphalt: #0b141b; --kerb: #cfd8dc; --kerb-2: #b8473d; } }
:root[data-theme="dark"] { --grass: #16322b; --grass-2: #1b3c33; --asphalt: #0b141b; --kerb: #cfd8dc; --kerb-2: #b8473d; }

/* ---------- overview head ---------- */
.g-head { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.g-head h1 { margin: 0; }
.g-kpis { display: flex; gap: 8px; flex-wrap: wrap; }
.g-kpi { background: var(--panel); border-radius: 16px; padding: 8px 14px; box-shadow: var(--shadow); }
.g-kpi b { display: block; font-size: 1.15rem; color: var(--navy); font-weight: 900; line-height: 1.2; }
.g-kpi span { font-size: .75rem; color: var(--ink-3); font-weight: 700; }

/* ---------- racetrack ---------- */
.card.g-track { position: relative; padding: 0; overflow: hidden; border-radius: 26px; background: var(--grass); }
.g-track svg { display: block; width: 100%; height: auto; }
.g-grass { fill: var(--grass-2); opacity: .6; }
.g-edge { fill: none; stroke: var(--kerb); stroke-width: 58; stroke-linecap: round; stroke-linejoin: round; }
.g-kerb { fill: none; stroke: var(--kerb-2); stroke-width: 58; stroke-dasharray: 16 16; }
.g-road { fill: none; stroke: var(--asphalt); stroke-width: 46; stroke-linecap: round; stroke-linejoin: round; }
.g-road-done { fill: none; stroke: var(--accent); stroke-opacity: .55; stroke-width: 46; stroke-linecap: round; }
.g-center { fill: none; stroke: #fff; stroke-opacity: .75; stroke-width: 3; stroke-dasharray: 18 16; animation: gFlow 1.2s linear infinite; }
@keyframes gFlow { to { stroke-dashoffset: -34; } }
.g-stop { cursor: pointer; outline: none; }
.g-stop .base { fill: var(--panel); stroke: var(--ink-3); stroke-width: 3; }
.g-stop.done .base { fill: var(--accent); stroke: #fff; }
.g-stop.now .base { fill: #fff; stroke: var(--accent); stroke-width: 5; }
.g-stop.review .base { stroke-dasharray: 5 4; }
.g-stop:hover .base, .g-stop.sel .base, .g-stop:focus .base { stroke: var(--violet, #6b5bd6); stroke-width: 5; }
.g-stop .ico { font-size: 17px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.g-stop.done .ico { fill: #fff; font-weight: 900; font-size: 16px; }
.g-pulse { fill: none; stroke: var(--accent); stroke-width: 4; animation: gRing 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes gRing { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.g-lbl { font-weight: 800; font-size: 13px; fill: var(--navy); paint-order: stroke; stroke: var(--grass); stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.g-lbl .m { font-weight: 700; font-size: 11px; fill: var(--ink-2); }
.g-stop.done .g-lbl .m { fill: var(--ok); }
.g-mile rect { fill: var(--panel); stroke: var(--ink-3); stroke-width: 1.5; }
.g-mile text { font-size: 11px; font-weight: 900; fill: var(--ink-2); text-anchor: middle; dominant-baseline: central; }
.g-deco { font-size: 26px; pointer-events: none; }
.g-sway { animation: gSway 3s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
@keyframes gSway { 50% { transform: rotate(4deg); } }
.g-flag { animation: gWave 1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: left bottom; }
@keyframes gWave { to { transform: skewY(-8deg) scaleX(.92); } }
.g-car { cursor: pointer; }
.g-car-body { animation: gBump 1.2s ease-in-out infinite alternate; }
@keyframes gBump { to { transform: translateY(-2px); } }
.g-bubble { position: absolute; transform: translate(-50%, -100%); background: var(--panel); border-radius: 16px; padding: 8px 12px; box-shadow: 0 8px 22px rgba(31,58,104,.2);
  font-weight: 800; font-size: .88rem; white-space: nowrap; opacity: 0; transition: opacity .4s; display: flex; gap: 8px; align-items: center; z-index: 2; }
.g-bubble.show { opacity: 1; }
.g-bubble::after { content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top-color: var(--panel); border-bottom: 0; }
.g-bubble.below { transform: translate(-50%, 0); }
.g-bubble.below::after { bottom: auto; top: -8px; border-top: 0; border-bottom: 8px solid var(--panel); }
.g-bubble .go { border: 0; background: var(--accent); color: var(--accent-ink); border-radius: 99px; padding: 4px 12px; font-weight: 900; cursor: pointer; }

.card.g-detail { margin-top: 14px; }
.g-det { display: flex; gap: 14px; align-items: flex-start; }
.g-det .big { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; background: var(--accent-soft); flex: none; }
.g-det h3 { margin: 0; font-size: 1.15rem; color: var(--navy); }
.chip.g-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.chip.g-now { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.chip.g-extra { background: #ebe8fc; color: #6b5bd6; border-color: transparent; }

/* ---------- step intro + result ---------- */
.card.g-intro { text-align: center; padding: 26px 22px; max-width: 720px; margin: 0 auto; }
.g-intro .g-k { width: 130px; display: block; margin: 0 auto 4px; animation: gBob 3s ease-in-out infinite; }
.g-intro .g-k.talk, .g-coach.talk img { animation: gTalk .42s ease-in-out infinite alternate; }
@keyframes gBob { 50% { transform: translateY(-5px); } }
@keyframes gTalk { from { transform: rotate(-3deg); } to { transform: translateY(-5px) rotate(3deg) scale(1.05); } }
.g-crumb { font-weight: 800; letter-spacing: .04em; }
.g-intro h2 { margin: 4px 0 0; font-size: 1.5rem; }
.g-say { max-width: 560px; margin: 12px auto; background: var(--panel-2); border-radius: 16px; padding: 12px 16px; font-weight: 700; }
.g-facts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 6px 0 16px; }
.g-facts span { background: var(--accent-soft); color: var(--accent); border-radius: 99px; padding: 4px 12px; font-weight: 800; font-size: .85rem; }
.g-ring { width: 150px; height: 150px; margin: 6px auto; position: relative; }
.g-ring svg { transform: rotate(-90deg); }
.g-ring circle { fill: none; stroke-width: 12; }
.g-ring .bg { stroke: var(--panel-2); } .g-ring .fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); }
.g-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; font-weight: 900; color: var(--navy); }
.g-weak { text-align: left; max-width: 560px; margin: 10px auto; }
.g-weak summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.g-weak div { background: var(--bad-soft); border-radius: 10px; padding: 6px 10px; margin-top: 6px; font-size: .9rem; }
.g-weak b { color: var(--bad); }
.g-listen-done { position: sticky; bottom: 12px; margin-top: 14px; display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  background: var(--panel); border-radius: 18px; padding: 10px 14px; box-shadow: 0 8px 24px rgba(31,58,104,.15); }
.g-listen-done span { font-weight: 800; color: var(--ink-2); margin-right: auto; }
.g-listen-done.on { outline: 3px solid var(--accent-2); animation: pop .4s; }

/* ---------- the coach beside an exercise ---------- */
.g-coach { position: fixed; right: 22px; bottom: 22px; z-index: 30; width: 210px; text-align: center; pointer-events: none; }
.g-coach > * { pointer-events: auto; }
.g-coach img { width: 96px; display: block; margin: 0 auto; animation: gBob 3s ease-in-out infinite; }
.g-coach.happy img { animation: gJump .7s ease; }
.g-coach.sad img { animation: gShake .5s ease; }
@keyframes gJump { 30% { transform: translateY(-18px) scale(1.08); } 60% { transform: translateY(0) scale(.96); } }
@keyframes gShake { 25% { transform: translateX(-6px) rotate(-4deg); } 75% { transform: translateX(6px) rotate(4deg); } }
.g-bub { position: relative; background: var(--panel); border-radius: 16px; padding: 10px 12px; box-shadow: 0 8px 22px rgba(31,58,104,.18); text-align: left; font-weight: 700; font-size: .9rem; margin-bottom: 10px; }
.g-bub::after { content: ""; position: absolute; bottom: -9px; left: 50%; margin-left: -9px; border: 9px solid transparent; border-top-color: var(--panel); border-bottom: 0; }
.g-bub.ok { background: var(--ok-soft); } .g-bub.ok::after { border-top-color: var(--ok-soft); }
.g-bub.bad { background: var(--bad-soft); } .g-bub.bad::after { border-top-color: var(--bad-soft); }
.g-bub b { color: var(--accent); }
.g-link { display: inline-block; margin-top: 6px; border: 1px solid var(--accent); color: var(--accent); background: var(--panel); border-radius: 99px; padding: 3px 10px; font-weight: 800; font-size: .8rem; cursor: pointer; }
@media (max-width: 1100px) { .g-coach { width: 170px; right: 10px; bottom: 10px; } .g-coach img { width: 70px; } }
@media (max-width: 760px) { .g-coach { position: static; width: auto; display: flex; gap: 10px; align-items: center; margin-top: 12px; } .g-coach img { width: 56px; order: -1; } .g-bub { flex: 1; margin: 0; } .g-bub::after { display: none; } }

/* ---------- a theory card over the exercise ---------- */
.g-modal { position: fixed; inset: 0; z-index: 80; background: rgba(15,28,36,.45); display: grid; place-items: center; padding: 20px; animation: pop .25s; }
.g-modal-box { position: relative; width: min(900px, 100%); max-height: 88vh; overflow: auto; padding: 0 !important; }
.g-modal-box .t-card { margin: 0; }
.g-x { position: absolute; right: 10px; top: 10px; z-index: 2; border: 0; background: var(--panel-2); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-weight: 900; }
@media (prefers-reduced-motion: reduce) { .g-center, .g-pulse, .g-sway, .g-flag, .g-car-body, .g-coach img, .g-intro .g-k { animation: none !important; } }
.pop { animation: pop .4s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pop { 0% { transform: scale(.85); opacity: 0; } }
.g-intro h2::before, .g-intro h2::after { content: none !important; display: none !important; }