/* Pointer taps do not retain a keyboard ring. Keyboard navigation keeps its focus cue. */
html[data-input-mode="pointer"] :is(button,[role="button"],a):is(:focus,:focus-visible){outline:none!important}
button,[role="button"],a{-webkit-tap-highlight-color:transparent}
html[data-input-mode="keyboard"] :is(button,[role="button"],a):focus-visible{outline:3px solid var(--green)!important;outline-offset:3px}
html[data-design="2026"] .livingTopBar{gap:12px;align-items:center}
html[data-design="2026"] .livingTopBar :is(#wallet,[role="button"]:has(#streak)){min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:7px 12px!important;border:1px solid color-mix(in srgb,var(--border) 65%,transparent)!important;border-radius:16px;background:color-mix(in srgb,var(--surface2) 65%,transparent)!important;box-shadow:none;font-size:17px;font-weight:800}
.livingTopBar .headerSymbol{width:27px;height:27px;flex:none;filter:none;overflow:visible}
html[data-design="2026"] .livingTopBar .pathMissionButton{width:44px;height:44px;border:1px solid color-mix(in srgb,var(--border) 65%,transparent);border-radius:16px;background:color-mix(in srgb,var(--surface2) 65%,transparent)}
html[data-design="2026"] .livingTopBar .languageSwitch{border:1px solid color-mix(in srgb,var(--border) 65%,transparent)!important;border-radius:16px!important;background:color-mix(in srgb,var(--surface2) 65%,transparent)!important;box-shadow:none!important;min-height:44px;padding:7px 10px!important}
html[data-design="2026"] .livingTopBar .courseFlag{width:51px;height:28px;flex-basis:51px}
html[data-design="2026"] .livingTopBar .courseFlag>svg{width:35px;height:26px;border:1px solid #ffffff35;border-radius:6px;box-shadow:0 2px 5px #001a241a}
html[data-design="2026"] .livingTopBar .courseFlag>i{right:-2px;bottom:-1px;width:26px;height:20px;padding:2px;border-radius:5px;background:var(--surface)}
html[data-design="2026"] .livingTopBar .courseFlag>i>svg{width:22px;height:16px;border-radius:3px}
html[data-design="2026"] .livingTopBar #streak{color:var(--text);font-variant-numeric:tabular-nums}
html[data-design="2026"] .livingTopBar #wallet{color:var(--text);font-variant-numeric:tabular-nums}
.previewLesson{max-width:620px}.previewLesson .sheetHeader{gap:14px;align-items:flex-start}.previewLesson .sheetHeader h2{font-size:23px;line-height:1.3;margin-top:8px}.previewLesson .close{width:44px;height:44px;min-width:44px;padding:12px}.previewLesson .close .uiIcon{width:20px;height:20px}.previewReadingCard{margin:24px 0;padding:30px 20px;background:var(--surface2);border:1px solid var(--border);border-radius:24px;text-align:center}.previewReadingCard .thai{font-size:42px;line-height:1.6;overflow-wrap:anywhere}.previewReadingCard .wordRoman{font-size:19px;line-height:1.5;color:#cbb3db;margin:12px 0}.previewReadingCard h3{font-size:21px;margin:15px 0 20px}.previewNotice{font-size:12px;color:var(--muted);line-height:1.6;text-align:center}.previewLesson>.primary{width:100%;margin-top:15px;display:flex;justify-content:center;align-items:center;gap:12px}.previewLesson .primary .uiIcon{width:20px;height:20px}.previewLessonList{display:grid;gap:12px;margin:24px 0}.previewLessonList button{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:16px;padding:16px}.previewLessonList .uiIcon{width:20px;height:20px;flex:none}.exploreSetting label small{display:block;color:var(--muted);font-size:11px;line-height:1.5;font-weight:400;margin-top:6px;max-width:300px}
/* Slow environmental motion gives the map life without moving its controls. */
@media(prefers-reduced-motion:no-preference){
 html[data-design="2026"] .mapPalmOne svg{transform-origin:48% 94%;animation:palmBreeze 6.5s ease-in-out infinite alternate}
 html[data-design="2026"] .mapPalmTwo svg{transform-origin:48% 94%;animation:palmBreeze 7.5s ease-in-out -3s infinite alternate-reverse}
 html[data-design="2026"] .mapLanterns svg{transform-origin:50% 5%;animation:lanternBreeze 5.5s ease-in-out infinite alternate}
 html[data-design="2026"] .mapBoat svg{animation:boatWater 5.5s ease-in-out infinite}
 html[data-design="2026"] .mapCloud svg{animation:cloudBreeze 18s ease-in-out infinite alternate}
 html[data-design="2026"] .worldRiver path:nth-child(2){animation:riverFlow 16s linear infinite}
 html[data-design="2026"] .mapLotus svg{transform-origin:50% 80%;animation:lotusWater 7s ease-in-out infinite}
 html[data-design="2026"] .isCurrent>.trailNode:before{animation:routeGlow 3s ease-in-out infinite}
 html[data-design="2026"] .livingTopBar .header-flame{transform-origin:50% 80%;animation:headerFlame 5s ease-in-out infinite}
}
@keyframes palmBreeze{from{transform:rotate(-2deg)}to{transform:rotate(3deg)}}
@keyframes lanternBreeze{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes boatWater{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes cloudBreeze{from{transform:translateX(-9px)}to{transform:translateX(12px)}}
@keyframes riverFlow{to{stroke-dashoffset:-156}}
@keyframes lotusWater{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-2px) rotate(1deg)}}
@keyframes routeGlow{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes headerFlame{0%,65%,100%{transform:none}75%{transform:scale(.96,1.06) rotate(-2deg)}85%{transform:scale(1.03,.98) rotate(1deg)}}
@media(max-width:760px){html[data-design="2026"] .pathHome .workspace>header>.livingTopBar{gap:8px!important;min-height:54px;justify-content:space-between}html[data-design="2026"] .livingTopBar .compactLanguage .languageSwitch{width:73px;min-width:73px;min-height:44px;padding:7px 9px!important}html[data-design="2026"] .livingTopBar :is(#wallet,[role="button"]:has(#streak)){min-height:44px;font-size:16px;padding:7px 10px!important;gap:7px}html[data-design="2026"] .livingTopBar .headerSymbol{width:26px;height:26px}.previewReadingCard .thai{font-size:37px}}
@media(max-width:360px){html[data-design="2026"] .pathHome .workspace>header>.livingTopBar{gap:5px!important}html[data-design="2026"] .livingTopBar :is(#wallet,[role="button"]:has(#streak)){font-size:14px;padding:7px 8px!important;gap:5px}html[data-design="2026"] .livingTopBar .compactLanguage .languageSwitch{width:65px;min-width:65px;padding:7px 6px!important}html[data-design="2026"] .livingTopBar .headerSymbol{width:23px;height:23px}.previewReadingCard{padding:24px 14px}.previewReadingCard .thai{font-size:32px}}
@media(prefers-reduced-motion:reduce){.mapDetail svg,.worldRiver path,.headerSymbol,.trailNode:before{animation:none!important}.previewLesson{animation:none!important}}
html[data-design="2026"] .livingTopBar .iconSlot:has(.headerSymbol){width:27px;height:27px;display:flex;align-items:center;justify-content:center;flex:none}
/* One continuous map surface: no framed playfield and no postcard tiles over the river. */
html[data-design="2026"] .learningTrail{background:transparent;border:0;border-radius:0;box-shadow:none}
html[data-design="2026"] .learningTrail:before{content:none}
html[data-design="2026"] .travelLandscape{inset:0 -18px;overflow:hidden;border-radius:0;background:transparent}
html[data-design="2026"] .travelLandscape .landscapeTop{width:178px;right:-8px;top:300px;opacity:.86;filter:none}
html[data-design="2026"] .travelLandscape .landscapeBottom{display:none}
html[data-design="2026"] .travelLandscape .worldRiver{opacity:.33}
html[data-design="2026"] .cleanJourney{background:transparent}
html[data-design="2026"] .pathHome .workspace{background:radial-gradient(ellipse at 95% 42%,color-mix(in srgb,var(--scene-water) 10%,transparent),transparent 48%),var(--bg)}
html[data-design="2026"] .travelArrival{background:transparent;border:0;border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent);border-radius:0;box-shadow:none;padding-top:22px}
html[data-design="2026"] .destinationPostcard{background:radial-gradient(ellipse at 50% 85%,color-mix(in srgb,var(--scene-water) 18%,transparent),transparent 70%)}
html[data-design="2026"] .sectionChoices>button>.sectionLandmark{width:74px;height:60px;border-radius:0;background:transparent;display:flex;align-items:center;justify-content:center;flex:none}
html[data-design="2026"] .sectionLandmark>.destinationIllustration{width:86px;max-width:none;flex:none}
html[data-design="2026"] .sectionChoices>button{gap:10px}
@media(min-width:761px){html[data-design="2026"] .travelLandscape{inset:0 -24px}html[data-design="2026"] .travelLandscape .landscapeTop{width:220px;right:0;top:285px}}
@media(max-width:360px){html[data-design="2026"] .travelLandscape .landscapeTop{width:148px;right:-6px;top:305px}.sectionChoices>button>.sectionLandmark{width:58px!important}.sectionLandmark>.destinationIllustration{width:70px!important}}
/* Native-feeling taps: no text-selection loupe, callout or zoom bounce on app controls. */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable="true"],[contenteditable=""]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
button,a,[role="button"],summary,.learningTrail{touch-action:pan-y}
img,svg{-webkit-user-drag:none}
.sectionLandmark>.destinationIllustration{width:40px}
html[data-design="2026"] .sectionChoices>button{grid-template-columns:74px minmax(0,1fr) 18px}
html[data-design="2026"] .sectionChoices>button>div{min-width:0}
html[data-design="2026"] .destinationIllustration{stroke:color-mix(in srgb,var(--scene-ground) 45%,transparent);stroke-width:.7;stroke-linejoin:round}
html[data-design="2026"][data-theme="light"]{--scene-wall:#83b3a2}
@media(max-width:360px){html[data-design="2026"] .sectionChoices>button{grid-template-columns:58px minmax(0,1fr) 16px}}