html:not([data-mobile]) #screenPath .path-overview { min-height:850px; }
html:not([data-mobile]) #screenPath .path-level:nth-child(6) { left:155px;top:575px; }
html:not([data-mobile]) #screenPath .path-level-orb { background-size:cover;background-position:center; }
html:not([data-mobile]) #screenPath .path-main { background-image:linear-gradient(180deg,#020d2b33,#020d2b88),var(--hsk-map-image,url('../assets/hsk-path-night.webp'));background-size:100% 100%,100% auto;background-repeat:no-repeat,repeat-y; }
html:not([data-mobile]) #screenPath .path-title-mobile,html:not([data-mobile]) #screenPath .path-subtitle-mobile { display:none; }
/* Continuous road: one summit, repeating ground only, and calibrated platform positions. */
#screenPath .path-layout.active .path-main { background:#031128!important; }
#screenPath .path-layout.active .path-main::before,
#screenPath .path-layout.active .path-main::after { display:none!important; }
#screenPath #learningPathContainer.path-road {
--stage-pitch:240px;--road-cap:210px;--tile-height:calc(var(--stage-pitch) * 4);
position:relative!important;display:block!important;box-sizing:border-box;
width:100%!important;max-width:640px!important;height:calc(var(--road-cap) + var(--road-rows) * var(--stage-pitch) + 70px);
min-height:500px;margin:0 auto!important;padding:0!important;isolation:isolate;overflow:hidden;
}
#screenPath #learningPathContainer.path-road::before { display:none!important; }
#screenPath .path-road-summit {
position:absolute;inset:0 0 auto;height:var(--road-cap);z-index:0;pointer-events:none;
background-image:linear-gradient(180deg,transparent 68%,#031128),var(--hsk-map-image);
background-size:100% 100%,100% auto;background-position:center top;background-repeat:no-repeat;
}
#screenPath .path-road-terrain {
position:absolute;inset:var(--road-cap) 0 0;z-index:0;pointer-events:none;
background:url('../assets/road-continuous-v1.webp') center top / 100% var(--tile-height) repeat-y;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 40px,#000 calc(100% - 35px),transparent);
mask-image:linear-gradient(180deg,transparent,#000 40px,#000 calc(100% - 35px),transparent);
}
#screenPath .path-road[data-road-level="2"] .path-road-terrain,
#screenPath .path-road[data-road-level="3"] .path-road-terrain { filter:hue-rotate(45deg); }
#screenPath .path-road[data-road-level="4"] .path-road-terrain { filter:hue-rotate(12deg); }
#screenPath .path-road[data-road-level="5"] .path-road-terrain { filter:sepia(.85) saturate(1.6); }
#screenPath #learningPathContainer.path-road .path-unit,
#screenPath #learningPathContainer.path-road .path-unit:nth-child(n) {
position:absolute!important;left:0!important;top:calc(var(--road-cap) + var(--platform-row) * var(--stage-pitch));
display:block!important;width:100%!important;min-height:0!important;height:0;margin:0!important;padding:0!important;z-index:2;
background:none!important;border:0!important;box-shadow:none!important;
}
#screenPath #learningPathContainer.path-road .path-unit::before,
#screenPath #learningPathContainer.path-road .path-unit::after { display:none!important; }
#screenPath #learningPathContainer.path-road .path-stage-orb {
position:absolute!important;left:var(--platform-x);top:0;transform:translate(-50%,-50%);margin:0!important;
width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important;max-width:58px!important;max-height:58px!important;
aspect-ratio:1;box-sizing:border-box;padding:0!important;display:grid!important;place-items:center;flex:none!important;
border:1px solid #ffe49a99!important;border-radius:50%!important;
font-size:19px;background:#04162d99!important;box-shadow:0 0 12px #ffd07c66!important;
}
#screenPath #learningPathContainer.path-road .path-unit.current .path-stage-orb { border-color:#78f7ff!important;background:#048ca499!important;box-shadow:0 0 22px #21e9ff!important; }
#screenPath #learningPathContainer.path-road .path-unit.completed .path-stage-orb { background:#058c7599!important;border-color:#8dffe4!important; }
#screenPath #learningPathContainer.path-road .path-unit.locked .path-stage-orb { background:#071324bb!important;box-shadow:none!important;border-color:#bbb6a366!important; }
#screenPath #learningPathContainer.path-road .path-unit-header {
position:absolute!important;left:43%;top:0;transform:translateY(-50%);box-sizing:border-box;
width:54%;min-width:0!important;max-width:none!important;min-height:0;margin:0!important;padding:12px!important;
background:#03152ddb!important;border:1px solid #3984b68c!important;border-radius:16px;text-align:left!important;backdrop-filter:blur(4px);
}
#screenPath #learningPathContainer.path-road .path-card-left .path-unit-header { left:3%; }
#screenPath #learningPathContainer.path-road .path-unit.current .path-unit-header { border-color:#46dbed!important; }
#screenPath #learningPathContainer.path-road .path-unit-header h3 { margin:4px 0;font-size:14px; }
#screenPath #learningPathContainer.path-road .path-unit-header p { margin:0;font-size:11px;line-height:1.45;display:block;max-height:none; }
#screenPath #learningPathContainer.path-road .path-unit-header small,
#screenPath #learningPathContainer.path-road .path-unit-header>span { font-size:10px; }
#screenPath #learningPathContainer.path-road .path-stage-mascot { position:absolute;left:50%;bottom:25px;width:80px;transform:translateX(-50%);pointer-events:none; }
#screenPath #learningPathContainer.path-road .path-encouragement { display:none!important; }
html[data-mobile] .m-host-wrap[data-host="path"] .path-layout.active .path-main { padding:0 0 90px!important; }
@media(min-width:761px) { html:not([data-mobile]) #screenPath #learningPathContainer.path-road { --road-cap:320px;--stage-pitch:280px; } }
#screenPath .path-road-terrain { bottom:110px; }
/* Temple approach: overlapping scenery and a tapered stone staircase join the route. */
#screenPath .path-road-summit {
background-image:var(--hsk-map-image);background-size:100% auto;
-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
}
#screenPath .path-road-terrain {
top:calc(var(--road-cap) - 100px);background-position:center 100px;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 130px,#000 calc(100% - 35px),transparent);
mask-image:linear-gradient(180deg,transparent,#000 130px,#000 calc(100% - 35px),transparent);
}
#screenPath .path-road-approach {
position:absolute;left:0;right:0;top:0;height:calc(var(--road-cap) + 60px);z-index:1;pointer-events:none;opacity:.82;
-webkit-mask-image:linear-gradient(180deg,transparent 20%,#000 48%,#000 82%,transparent);
mask-image:linear-gradient(180deg,transparent 20%,#000 48%,#000 82%,transparent);
}
#screenPath .path-road-approach svg { display:block;width:100%;height:100%; }
#screenPath .path-road[data-road-level="5"] .path-road-approach { filter:sepia(.65) saturate(1.2); }
/* HSK 1 uses the supplied temple and its original central staircase. */
#screenPath #learningPathContainer.path-road[data-road-level="1"] {
--road-cap:calc(min(100vw, 640px) * 1.5);
}
#screenPath .path-road[data-road-level="1"] .path-road-summit {
background-image:url('../assets/hsk1-temple-summit-v3.webp');
-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 64px),transparent);
mask-image:linear-gradient(180deg,#000 calc(100% - 64px),transparent);
}
#screenPath .path-road[data-road-level="1"] .path-road-terrain {
top:calc(var(--road-cap) - 64px);background-position:center 64px;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 64px,#000 calc(100% - 35px),transparent);
mask-image:linear-gradient(180deg,transparent,#000 64px,#000 calc(100% - 35px),transparent);
}
#screenPath .path-road[data-road-level="1"] .path-road-approach { display:none; }
/* High-resolution temple-to-road scenes share one continuous layout. */
#screenPath #learningPathContainer.path-road { --road-cap:calc(min(100vw, 640px) * 1.5); }
#screenPath #learningPathContainer.path-road .path-road-summit {
-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 64px),transparent);
mask-image:linear-gradient(180deg,#000 calc(100% - 64px),transparent);
}
#screenPath .path-road .path-road-terrain {
top:calc(var(--road-cap) - 64px);background-position:center 64px;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 64px,#000 calc(100% - 35px),transparent);
mask-image:linear-gradient(180deg,transparent,#000 64px,#000 calc(100% - 35px),transparent);
}
#screenPath .path-road .path-road-approach { display:none; }
#screenPath .path-road[data-road-level="2"] .path-road-summit { background-image:url('../assets/hsk2-temple-summit-v3.webp'); }
#screenPath .path-road[data-road-level="3"] .path-road-summit { background-image:url('../assets/hsk3-temple-summit-v3.webp'); }
#screenPath .path-road[data-road-level="4"] .path-road-summit { background-image:url('../assets/hsk4-temple-summit-v3.webp'); }
#screenPath .path-road[data-road-level="5"] .path-road-summit { background-image:url('../assets/hsk5-temple-summit-v3.webp'); }
#screenPath .path-road[data-road-level="6"] .path-road-summit { background-image:url('../assets/hsk6-temple-summit-v3.webp'); }
#screenPath #learningPathContainer.path-road[data-road-level="6"] { height:calc(var(--road-cap) + 260px); }
#screenPath .path-road[data-road-level="6"] .path-empty {
position:relative;top:var(--road-cap);z-index:2;margin:0 12px;padding:20px;
background:#03152ded;border:1px solid #3984b68c;border-radius:18px;
}
@media(min-width:761px) { html:not([data-mobile]) #screenPath #learningPathContainer.path-road { --road-cap:960px; } }
#screenPath .path-road[data-road-level="2"] .path-road-terrain { filter:url('../assets/road-palette.svg#sakura'); }
#screenPath .path-road[data-road-level="3"] .path-road-terrain { filter:url('../assets/road-palette.svg#violet'); }
#screenPath .path-road[data-road-level="4"] .path-road-terrain { filter:none; }
#screenPath .path-road[data-road-level="5"] .path-road-terrain { filter:url("../assets/road-palette.svg#autumn"); }
/* Real autumn artwork keeps materials and lighting continuous with the temple. */
#screenPath .path-road[data-road-level="5"] .path-road-terrain {
background-image:url('../assets/hsk5-autumn-road-v2.webp');filter:none;
}
#screenPath .path-road[data-road-level="5"] .path-road-summit {
height:calc(var(--road-cap) + 64px);background-size:100% 100%;
-webkit-mask-image:none;mask-image:none;
}
/* End the map at the first stage, with scenery filling the navigation safe area. */
#screenPath #learningPathContainer.path-road:not([data-road-level="6"]) {
height:calc(var(--road-cap) + var(--road-end) * var(--stage-pitch) + 200px);
}
#screenPath .path-road .path-road-terrain {
bottom:0;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 64px);
mask-image:linear-gradient(180deg,transparent,#000 64px);
}
html[data-mobile] .m-host-wrap[data-host="path"] .path-layout.active .path-main { padding-bottom:0!important; }
html[data-mobile] #screenPath #learningPathContainer.path-road:not([data-road-level="6"]) { height:calc(var(--road-cap) + var(--road-end) * var(--stage-pitch) + 200px)!important; }
/* Keep the temple at its original scale; shorten only the approach below it. */
#screenPath #learningPathContainer.path-road {
--road-cap:calc(min(100vw, 640px) * 1.05)!important;
--summit-top:calc(var(--road-cap) * 5 / 7);
}
#screenPath #learningPathContainer.path-road .path-road-summit {
height:calc(var(--road-cap) + 64px);
background-size:100% calc(var(--summit-top) * 2);
-webkit-mask-image:none;mask-image:none;
}
#screenPath #learningPathContainer.path-road .path-road-summit::after {
content:'';position:absolute;left:0;right:0;top:var(--summit-top);bottom:0;
background-image:inherit;background-repeat:no-repeat;background-position:center bottom;
background-size:100% calc((var(--road-cap) + 64px - var(--summit-top)) * 2);
}
/* Level-specific painted roads match their temple foregrounds. */
#screenPath #learningPathContainer.path-road[data-road-level="2"] .path-road-terrain { background-image:url('../assets/hsk2-matched-road-v2.webp');filter:none; }
#screenPath #learningPathContainer.path-road[data-road-level="3"] .path-road-terrain { background-image:url('../assets/hsk3-matched-road-v2.webp');filter:none; }
#screenPath #learningPathContainer.path-road[data-road-level="4"] .path-road-terrain { background-image:url('../assets/hsk4-matched-road-v2.webp');filter:none; }
#screenPath #learningPathContainer.path-road[data-road-level="2"] .path-road-terrain,
#screenPath #learningPathContainer.path-road[data-road-level="3"] .path-road-terrain,
#screenPath #learningPathContainer.path-road[data-road-level="4"] .path-road-terrain {
top:calc(var(--road-cap) - 32px);background-position:center 32px;
}
html #screenPath #learningPathContainer.path-road[data-road-level="2"] .path-road-terrain,
html #screenPath #learningPathContainer.path-road[data-road-level="3"] .path-road-terrain,
html #screenPath #learningPathContainer.path-road[data-road-level="4"] .path-road-terrain {
-webkit-mask-image:linear-gradient(180deg,transparent,#000 32px);
mask-image:linear-gradient(180deg,transparent,#000 32px);
}
/* Compact scenes contain naturally painted stairs, without split-image compression. */
#screenPath #learningPathContainer.path-road[data-road-level="2"] .path-road-summit { background-image:url('../assets/hsk2-temple-compact-v4.webp'); }
#screenPath #learningPathContainer.path-road[data-road-level="3"] .path-road-summit { background-image:url('../assets/hsk3-temple-compact-v4.webp'); }
#screenPath #learningPathContainer.path-road[data-road-level="4"] .path-road-summit { background-image:url('../assets/hsk4-temple-compact-v4.webp'); }
#screenPath #learningPathContainer.path-road[data-road-level="2"] .path-road-summit,
#screenPath #learningPathContainer.path-road[data-road-level="3"] .path-road-summit,
#screenPath #learningPathContainer.path-road[data-road-level="4"] .path-road-summit {
height:var(--road-cap);background-size:100% 100%;
}
#screenPath #learningPathContainer.path-road[data-road-level="2"] .path-road-summit::after,
#screenPath #learningPathContainer.path-road[data-road-level="3"] .path-road-summit::after,
#screenPath #learningPathContainer.path-road[data-road-level="4"] .path-road-summit::after { display:none; }
/* Join the summit to the beginning of the road tile, not its repeated tail. */
#screenPath #learningPathContainer.path-road[data-road-level="3"] .path-road-terrain { background-position:center top; }
#screenPath #learningPathContainer.path-road[data-road-level="3"] .path-unit,
#screenPath #learningPathContainer.path-road[data-road-level="3"] .path-unit:nth-child(n) {
top:calc(var(--road-cap) + var(--platform-row) * var(--stage-pitch) - 32px)!important;
}
/* Lesson controls must be above the fixed mobile shell (z-index: 1200). */
html[data-mobile] #pathLessonOverlay { z-index:1300; height:100dvh; min-height:100dvh; overscroll-behavior:contain; padding-bottom:env(safe-area-inset-bottom,0px); box-sizing:border-box; }
/* Compact lesson header with a separate full-width progress row. */
#pathLessonOverlay .path-lesson-top { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:9px 10px; align-items:center; padding:12px; margin-bottom:18px; border:1px solid #24497c; border-radius:18px; background:linear-gradient(125deg,#09244a,#08142f); box-shadow:0 5px 20px #0003,inset 0 1px 0 #5e9bff12; }
#pathLessonOverlay .path-close { grid-column:1; grid-row:1 / 3; width:40px; height:40px; padding:0; border:1px solid #357cbd; border-radius:12px; background:linear-gradient(140deg,#123d69,#102341); color:#dbf5ff; font-size:19px; }
#pathLessonOverlay .path-lesson-top > div:nth-child(2) { grid-column:2; grid-row:1; min-width:0; }
#pathLessonOverlay #pathLessonStageTitle { margin:0; color:#f3f8ff; font-size:16px; line-height:1.3; font-weight:800; }
#pathLessonOverlay .path-lesson-meta { grid-column:3; grid-row:1; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px; max-width:145px; }
/* HSK 6 placeholder: scenery stretches across the whole screen and the notice card sits in the center. */
#screenPath #learningPathContainer.path-road[data-road-level="6"] {
position:absolute!important;
top:0;right:0;bottom:0;left:0;
height:auto!important;min-height:0;
display:flex!important;flex-direction:column;align-items:center;justify-content:center;
padding:24px 0!important;box-sizing:border-box;
}
/* Mobile shell keeps a !important road height; outrank it for the HSK 6 placeholder. */
html[data-mobile] #screenPath #learningPathContainer.path-road[data-road-level="6"] {
height:auto!important;min-height:0;
}
#screenPath #learningPathContainer.path-road[data-road-level="6"] .path-road-summit {
top:0;right:0;bottom:0;left:0;height:auto;
background-size:cover;background-position:center;
-webkit-mask-image:none;mask-image:none;
}
#screenPath #learningPathContainer.path-road[data-road-level="6"] .path-road-summit::after { display:none!important; }
#screenPath #learningPathContainer.path-road[data-road-level="6"] .path-road-terrain { display:none!important; }
#screenPath #learningPathContainer.path-road[data-road-level="6"] .path-empty {
position:relative;top:auto;
width:calc(100% - 24px);max-width:420px;margin:0 auto;padding:24px;
}
#screenPath #learningPathContainer.path-road[data-road-level="6"] .path-stage-start {
display:block;width:100%;margin:14px auto 0;
}
#pathLessonOverlay #pathLessonCounter { padding:5px 8px; border:1px solid #2c528a; border-radius:9px; background:#102e54; color:#c1deff; font-size:11px; white-space:nowrap; font-weight:750; }
#pathLessonOverlay #pathLessonTimer { display:inline-flex; align-items:center; min-height:24px; padding:3px 7px; border:1px solid #9460ec; border-radius:9px; background:#331c55; color:#dfc5ff; font-size:11px; white-space:nowrap; box-sizing:border-box; }
#pathLessonOverlay #pathLessonTimer:empty { display:none; }
#pathLessonOverlay .path-lesson-top > .path-lesson-progress { grid-column:2 / 4; grid-row:2; width:100%; height:7px; border:0; border-radius:20px; background:#12335a; box-shadow:inset 0 1px 3px #0005; overflow:hidden; }
#pathLessonOverlay #pathLessonProgressFill { border-radius:inherit; background:linear-gradient(90deg,#00dec6,#08c8ff,#7066ff); box-shadow:0 0 8px #09d0ed66; }
@media(max-width:480px) { #pathLessonOverlay .path-lesson-top { gap:8px; padding:10px; }#pathLessonOverlay .path-lesson-meta { max-width:93px; }#pathLessonOverlay #pathLessonStageTitle { font-size:15px; } }