/* Course choosers and living lesson paths, using the homepage's button material.
   Layout only: progression, rewards, destinations and scene ownership stay shared. */
body.path-playful.app-coast{
  --path-top:#b5ed78;--path-bottom:#83d54c;--path-rim:#e0ffb7;--path-base:#548f35;--path-ink:#234416;
  --app-paper:#fff9e9;--app-surface:#fffdf5;--app-ink:#214b40;--app-muted:#576d61;--app-rim:#ddd5bf;--app-edge:#c9bea2;
  --path-font:'Fredoka','Hiragino Maru Gothic ProN','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
  background:var(--sea-fallback-4,#1b6e96);font-family:var(--path-font);min-height:100svh;
}
body.path-playful[data-lesson-project=business]{--path-top:#c1b4fa;--path-bottom:#a28aea;--path-rim:#e8dfff;--path-base:#7560b6;--path-ink:#34254f}
body.path-playful[data-lesson-project=toeic]{--path-top:#96dcfa;--path-bottom:#59baee;--path-rim:#d5f4ff;--path-base:#2b84b4;--path-ink:#133b56}
body.path-playful.app-coast:not(.lesson-project-open){padding-bottom:calc(75px + env(safe-area-inset-bottom,0px))}
body.path-playful.app-coast>main{position:relative;z-index:1}
body.path-playful.app-coast>footer{display:none}
body.path-playful.app-coast .ic-head{
  position:relative;z-index:2;max-width:560px;margin:0 auto;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 8px;
  min-height:64px;background:transparent;border:0;box-shadow:none;border-radius:0;gap:10px;
}
body.path-playful.app-coast .ic-head .ava{display:block;width:42px;height:42px;border:2px solid #fff9e9;border-radius:16px;background:#fff9e9 url(assets/characters/bobo-v2/bobo-bust.webp) center/contain no-repeat;box-shadow:0 3px 0 #c9bea2}
body.path-playful.app-coast .ic-head .t h1{font:700 19px/1.1 var(--path-font);color:var(--sky-ink);text-shadow:var(--sky-shadow)}
body.path-playful.app-coast .ic-head .t>span{color:var(--sky-sub);font-size:10px;letter-spacing:.16em}
body.path-playful.app-coast .ic-coin{border:1px solid #e2d8bb;border-radius:15px;padding:5px 10px;background:linear-gradient(#fffef6,#f4e7ca);box-shadow:inset 0 2px 0 #fff,0 3px 0 #c9bea2}
body.path-playful.app-coast .ic-coin .n{font:700 16px/1.1 var(--path-font)}
body.path-playful.app-coast .ic-coin .s{font-size:9px}
body.path-playful.app-coast .lp-hub{max-width:560px;margin:0 auto;padding:4px 16px 12px;background:none;display:flex;flex-direction:column;gap:12px}
/* Reinstate the shared material after the older path chrome's face declarations. */
body.path-playful.app-coast .sg-button{
  min-height:var(--sg-height,44px);border:1px solid var(--sg-rim);border-radius:var(--sg-radius,16px);
  background:radial-gradient(ellipse 80% 65% at 50% -7%,var(--sg-gloss),transparent 82%),linear-gradient(180deg,var(--sg-face-top),var(--sg-face-bottom));
  color:var(--sg-ink);box-shadow:inset 0 2px 0 var(--sg-highlight),inset 0 -2px 0 #ffffff2e,0 var(--sg-depth) 0 var(--sg-base),0 10px 16px var(--sg-shadow);
  font-family:var(--path-font);font-weight:700;text-shadow:0 1px 0 #ffffff47;transition:transform .18s var(--sg-ease),box-shadow .15s;
}
body.path-playful.app-coast .sg-button:not(:disabled):not([aria-disabled=true]):active{transform:translateY(var(--sg-press,3px)) scale(.985);box-shadow:inset 0 1px 2px #1e3d2b1a,0 1px 0 var(--sg-base),0 4px 8px var(--sg-shadow)}
body.path-playful.app-coast .sg-button:focus-visible{outline:3px solid #fff;outline-offset:4px}
body.path-playful.app-coast .lp-cont{
  --sg-face-top:var(--path-top);--sg-face-bottom:var(--path-bottom);--sg-base:var(--path-base);--sg-rim:var(--path-rim);--sg-ink:var(--path-ink);--sg-radius:24px;--sg-depth:6px;
  display:flex;flex:none;gap:12px;margin:0;padding:8px 14px;min-height:92px;text-align:left;overflow:visible;
}
body.path-playful.app-coast .lp-cont::before{display:none}
body.path-playful.app-coast .lp-cic{display:flex;align-items:center;justify-content:center;width:82px;height:76px;flex:none;margin:-7px 0;background:none;border:0;border-radius:0;box-shadow:none}
body.path-playful.app-coast .lp-cmid{flex:1;min-width:0}
body.path-playful.app-coast .lp-resume-label{font-size:10px;letter-spacing:.07em;margin-bottom:3px;color:var(--path-ink);opacity:.85}
body.path-playful.app-coast .lp-ct1{font:700 21px/1.12 var(--path-font);color:var(--path-ink);overflow-wrap:anywhere}
body.path-playful.app-coast .lp-ct2{position:static;font:600 11px/1.4 var(--path-font);color:var(--path-ink);margin-top:5px}
body.path-playful.app-coast .lp-cgo{width:32px;height:32px;border-radius:50%;background:#fff9e9;display:grid;place-items:center;color:var(--path-ink);font-size:14px;box-shadow:0 3px 0 #294b3926;flex:none}
body.path-playful.app-coast .lp-hero{margin:0;background:none;border:0;box-shadow:none;overflow:visible;min-height:0}
body.path-playful.app-coast .lp-levels{display:flex;gap:5px;margin:0;padding:5px;background:#fff9e9;border:1px solid #fff9e9;border-radius:19px;box-shadow:0 3px 0 #c9bea2;overflow:visible}
body.path-playful.app-coast .lp-levels button{
  --sg-height:44px;--sg-radius:13px;--sg-depth:0px;--sg-shadow:transparent;--sg-rim:transparent;--sg-face-top:transparent;--sg-face-bottom:transparent;
  display:flex;flex:1;flex-direction:column;justify-content:center;gap:3px;min-width:44px;padding:4px 2px;font:600 12px/1.15 var(--path-font);color:#586c62;box-shadow:none;
}
body.path-playful.app-coast .lp-levels button.on{--sg-face-top:var(--path-top);--sg-face-bottom:var(--path-bottom);--sg-base:var(--path-base);--sg-rim:var(--path-rim);--sg-ink:var(--path-ink);--sg-depth:3px;color:var(--path-ink)}
body.path-playful.app-coast .lp-level-detail{font-size:9px;line-height:1.1}
body.path-playful.app-coast[data-lesson-project=toeic] .lp-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
body.path-playful.app-coast[data-lesson-project=toeic] .lp-levels button{font-size:13px}
body.path-playful.app-coast .lp-sectionbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
body.path-playful.app-coast .lp-gridhd{margin:0;color:#fff9e9;text-shadow:0 1px 4px #10385a80;font:600 12px/1.2 var(--path-font);letter-spacing:.025em}
body.path-playful.app-coast .lp-pager{display:flex;align-items:center;gap:7px;background:none;border:0;box-shadow:none;margin:0;padding:0}
body.path-playful.app-coast .lp-pager button{--sg-height:44px;--sg-radius:14px;--sg-depth:3px;display:grid;place-items:center;min-width:44px;width:44px;height:44px;padding:0;font-size:24px;line-height:1}
body.path-playful.app-coast .lp-page-count{font:600 12px var(--path-font);color:#fff9e9;white-space:nowrap;min-width:30px;text-align:center}
body.path-playful.app-coast .lp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:0;padding:0}
body.path-playful.app-coast .lp-mcard{
  --sg-height:144px;--sg-radius:23px;--sg-depth:5px;--sg-face-top:#fffdf5;--sg-face-bottom:#f5e9cf;--sg-rim:#fff7df;--sg-ink:#324f43;--sg-base:#c6b895;
  position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;min-width:0;min-height:144px;padding:11px;text-align:left;overflow:visible;
}
body.path-playful.app-coast .lp-mcard.current{--sg-face-top:var(--path-top);--sg-face-bottom:var(--path-bottom);--sg-base:var(--path-base);--sg-rim:var(--path-rim);--sg-ink:var(--path-ink);padding:11px}
body.path-playful.app-coast .lp-mcard.locked{opacity:1;filter:none;--sg-face-top:#e6eef0;--sg-face-bottom:#c9dce0;--sg-base:#8fabb3;--sg-rim:#f3fcff;--sg-ink:#425d64}
body.path-playful.app-coast .lp-mindex{position:absolute;left:11px;top:10px;font:600 11px/1 var(--path-font);color:inherit;margin:0;opacity:.8}
body.path-playful.app-coast .lp-mindex-prefix{display:none}
body.path-playful.app-coast .lp-mtop{display:flex;align-items:center;gap:7px;margin:16px 0 10px}
body.path-playful.app-coast .lp-mcard .lp-mic{display:grid;place-items:center;width:48px;height:48px;flex:none;background:#fffdf55e;border:1px solid #ffffff85;border-radius:17px;box-shadow:0 2px 0 #25493d13;overflow:hidden}
body.path-playful.app-coast .lp-mcard .lp-mic svg{width:43px;height:43px}
body.path-playful.app-coast .lp-mcard.locked .lp-mic{opacity:.72;filter:saturate(.75)}
body.path-playful.app-coast .lp-mcard .lp-mt{font:600 15px/1.17 var(--path-font);color:inherit;overflow-wrap:anywhere;hyphens:auto;min-width:0}
body.path-playful.app-coast .lp-mbar2{width:100%;height:7px;border:1px solid #45685926;background:#3c694a24;border-radius:20px;box-shadow:inset 0 1px 2px #19362916;overflow:hidden;margin:0}
body.path-playful.app-coast .lp-mbar2 i{background:linear-gradient(#8becb1,#43ba76);border-radius:inherit;box-shadow:inset 0 1px 0 #ffffff80}
body.path-playful.app-coast .lp-mm{display:flex;justify-content:space-between;font:500 10px/1.2 var(--path-font);color:inherit;margin-top:6px}
body.path-playful.app-coast .lp-nowtag{position:absolute;top:7px;right:8px;bottom:auto;left:auto;border-radius:20px;background:#fffdf5;color:var(--path-ink);font:600 9px/1.2 var(--path-font);padding:4px 7px;box-shadow:0 2px 0 #365c361a}
body.path-playful.app-coast .lp-mbadge{position:absolute;right:9px;top:7px;width:22px;height:22px;display:grid;place-items:center;border:0;background:#fffdf560;color:inherit;font-size:12px}
body.path-playful.app-coast .lp-card-arrow{display:none}
body.path-playful.app-coast .lp-uketoru{--sg-height:44px;--sg-radius:13px;--sg-depth:3px;position:absolute;right:7px;top:4px;z-index:2;padding:6px 9px;font-size:11px}
body.path-playful.app-coast .lp-codex{display:none}
/* The module scene keeps its own coast and construction. Only its chrome changes. */
body.path-playful.lesson-project-open :is(#sea,#seaFallback){visibility:hidden}
body.path-playful.app-coast .cp-app{--cp-paper:#fff9e9;--cp-ink:#214b40;--cp-muted:#576d61;font-family:var(--path-font)}
body.path-playful.app-coast .cp-header{background:#fff9e9ed;padding-inline:12px;gap:10px}
body.path-playful.app-coast .cp-brand b{font:700 15px/1.1 var(--path-font);letter-spacing:.12em}
body.path-playful.app-coast .cp-brand span{font:500 10px/1.1 var(--path-font);margin-top:3px}
body.path-playful.app-coast :is(.cp-back,.cp-arrow){--sg-radius:14px;--sg-depth:3px;--sg-press:2px;--sg-height:44px;padding:0;width:44px;height:44px}
body.path-playful.app-coast .cp-wallet{border:1px solid #e2d8bb;border-radius:15px;padding:7px 10px;background:linear-gradient(#fffef6,#f4e7ca);box-shadow:inset 0 2px 0 #fff,0 3px 0 #c9bea2;font:600 15px var(--path-font)}
body.path-playful.app-coast .cp-context{gap:8px;padding:7px 12px 4px;min-height:54px}
body.path-playful.app-coast .cp-module{--sg-radius:15px;--sg-depth:3px;--sg-height:44px;padding:6px 10px;font-size:14px}
body.path-playful.app-coast .cp-goal{background:linear-gradient(#fffef6,#fff3d9);border:1px solid #fffbed;border-radius:19px;box-shadow:inset 0 2px 0 #fff,0 4px 0 #b8bba566,0 8px 18px #114b671a;padding:9px 12px}
body.path-playful.app-coast .cp-goal h1{font-family:var(--path-font);font-weight:600}
body.path-playful.app-coast .cp-count b{font-family:var(--path-font);color:var(--path-ink)}
body.path-playful.app-coast .cp-goal>svg{color:var(--path-base)}
body.path-playful.app-coast .cp-scene-caption{color:#31514b;border:1px solid #fff;border-radius:12px;background:#fff9e9ed;box-shadow:0 3px 0 #1b58652b;font-size:10px}
body.path-playful.app-coast .cp-greet{--sg-height:44px;--sg-radius:15px;--sg-depth:3px;min-width:82px;padding:7px 10px;bottom:9px;font:600 11px var(--path-font)!important}
body.path-playful.app-coast .cp-panel{background:linear-gradient(#fffdf4,#fff2d7);border-top:3px solid #fffdf5;border-radius:27px 27px 0 0;box-shadow:0 -5px 15px #174b6520;padding:7px 13px 9px}
body.path-playful.app-coast .cp-stops{gap:1px;padding-bottom:7px}
body.path-playful.app-coast .cp-stop{min-height:60px;gap:5px}
body.path-playful.app-coast .cp-stop::before{top:23px;height:5px;background:#b9cbb7;border:1px solid #a8b9a944}
body.path-playful.app-coast .cp-stop-dot{width:37px;height:37px;border:2px solid #fafcf3;background:linear-gradient(#f4f7f1,#d5e1d2);color:#708878;box-shadow:inset 0 2px 0 white,0 4px 0 #adbca8;font:600 17px var(--path-font)}
body.path-playful.app-coast .cp-stop.active .cp-stop-dot{background:radial-gradient(ellipse at top,#ffffff99,transparent 65%),linear-gradient(var(--path-top),var(--path-bottom));border-color:var(--path-rim);color:var(--path-ink);box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--path-base),0 0 0 4px #ffffffcc}
body.path-playful.app-coast .cp-stop.active .cp-stop-label{color:var(--path-ink)}
body.path-playful.app-coast .cp-stop.done .cp-stop-dot{background:linear-gradient(#96eab5,#56c78a);border-color:#c7f7cd;color:#215f43;box-shadow:inset 0 2px 0 #ffffffc0,0 4px 0 #369768}
body.path-playful.app-coast .cp-primary{--sg-face-top:var(--path-top);--sg-face-bottom:var(--path-bottom);--sg-rim:var(--path-rim);--sg-base:var(--path-base);--sg-ink:var(--path-ink);--sg-height:48px;--sg-radius:18px;--sg-depth:5px;display:flex;margin-top:9px;padding:10px 34px;min-height:48px;color:var(--path-ink)!important;font-size:17px!important}
body.path-playful.app-coast .cp-next{font-family:var(--path-font);font-weight:600;color:#3c5d4b}
body.path-playful.app-coast .cp-quiet{--sg-height:44px;--sg-radius:14px;--sg-depth:3px;--sg-press:2px;padding:7px 10px;font-size:11px!important;color:var(--sg-ink)!important;gap:6px}
body.path-playful.app-coast .cp-quiet.on{--sg-face-top:#c1b4fa;--sg-face-bottom:#a28aea;--sg-base:#7560b6;--sg-rim:#e8dfff;--sg-ink:#34254f}
body.path-playful.app-coast .cp-tools{margin-top:10px;gap:8px}
body.path-playful.app-coast .cp-reward{border-radius:14px;background:#f7e2c2;border:1px solid #e5c8a0;box-shadow:inset 0 2px 0 #fff5df,0 3px 0 #c6a57c;font-family:var(--path-font)!important;padding:7px 9px;gap:3px}
body.path-playful.app-coast .cp-reward:disabled{opacity:.85}
body.path-playful.app-coast .cp-reward.claimable{background:linear-gradient(#b3e7bb,#8cd5a2);border-color:#78bfa0;color:#174f40;box-shadow:inset 0 2px 0 #fff9,0 3px 0 #37806d}
body.path-playful.app-coast .lp-sheet{border:2px solid #fff9e9;background:#fff9e9;border-radius:27px 27px 0 0;box-shadow:0 -8px 32px #17354f33;color:#214b40}
body.path-playful.app-coast .lp-sheet button{border-radius:14px;font-family:var(--path-font)}
/* Compact everyday phone view; enlarged text may scroll rather than be clipped. */
@media(max-width:879px){
 body.path-playful.app-coast .lp-hub{gap:10px}
 body.path-playful.app-coast .lp-mcard{min-height:136px;--sg-height:136px}
 body.path-playful.app-coast .lp-mtop{margin-top:15px}
 body.path-playful.app-coast .cp-header{padding-top:calc(5px + env(safe-area-inset-top,0px));min-height:54px}
 body.path-playful.app-coast .cp-app{grid-template-rows:auto auto auto minmax(80px,1fr) auto}
}
@media(max-width:879px) and (max-height:740px){
 body.path-playful.app-coast .ic-head{min-height:57px;padding:calc(5px + env(safe-area-inset-top,0px)) 13px 6px}
 body.path-playful.app-coast .lp-hub{padding:2px 13px 10px;gap:8px}
 body.path-playful.app-coast .lp-cont{min-height:78px;padding:6px 10px;gap:8px;--sg-radius:21px}
 body.path-playful.app-coast .lp-cic{width:68px;height:64px}
 body.path-playful.app-coast .lp-ct1{font-size:19px}
 body.path-playful.app-coast .lp-grid{gap:11px}
 body.path-playful.app-coast .lp-mcard{--sg-height:125px;min-height:125px;padding:10px}
 body.path-playful.app-coast .lp-mcard.current{padding:10px}
 body.path-playful.app-coast .lp-mtop{margin:15px 0 7px;gap:6px}
 body.path-playful.app-coast .lp-mcard .lp-mt{font-size:14px}
 body.path-playful.app-coast .lp-mcard .lp-mic{width:40px;height:40px;border-radius:14px}
 body.path-playful.app-coast .lp-mcard .lp-mic svg{width:38px;height:38px}
 body.path-playful.app-coast .cp-header{padding-top:env(safe-area-inset-top,0px);min-height:48px}
 body.path-playful.app-coast .cp-context{min-height:49px;padding-top:3px;padding-bottom:2px}
 body.path-playful.app-coast .cp-goal{padding:6px 10px;margin-top:4px}
 body.path-playful.app-coast .cp-panel{padding:5px 12px 6px}
 body.path-playful.app-coast .cp-stop{min-height:56px}
 body.path-playful.app-coast .cp-stops{padding-bottom:4px}
 body.path-playful.app-coast .cp-primary{--sg-height:44px;min-height:44px;margin-top:6px;font-size:16px!important}
 body.path-playful.app-coast .cp-tools{margin-top:8px}
}
@media(max-width:359px){
 body.path-playful.app-coast .lp-hub{padding-inline:10px}
 body.path-playful.app-coast .lp-levels{gap:2px;padding:4px}
 body.path-playful.app-coast .lp-levels button{font-size:11px}
 body.path-playful.app-coast .lp-mcard .lp-mtop{gap:4px}
 body.path-playful.app-coast .lp-mcard .lp-mic{width:32px;height:36px;flex-basis:32px}
 body.path-playful.app-coast .lp-mcard .lp-mic svg{width:32px;height:32px}
 body.path-playful.app-coast .lp-mcard .lp-mt{font-size:13px}
 body.path-playful.app-coast .cp-app[data-project-total="7"] .cp-stops{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:880px){
 body.path-playful.app-coast .ic-head{max-width:820px;padding-top:25px}
 body.path-playful.app-coast .lp-hub{max-width:820px;gap:18px;padding:12px 16px 26px}
 body.path-playful.app-coast .lp-cont{min-height:116px}
 body.path-playful.app-coast .lp-cic{width:125px;height:90px}
 body.path-playful.app-coast .lp-ct1{font-size:28px}
 body.path-playful.app-coast .lp-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
 body.path-playful.app-coast .lp-mcard{min-height:190px;--sg-height:190px}
 body.path-playful.app-coast .lp-mtop{flex-direction:column;align-items:flex-start;gap:10px}
 body.path-playful.app-coast .lp-mcard .lp-mic{width:58px;height:58px}
 body.path-playful.app-coast .lp-mcard .lp-mt{font-size:17px}
 body.path-playful.app-coast .cp-header{border-radius:22px;box-shadow:0 4px 0 #d2c8ac}
 body.path-playful.app-coast .cp-context{padding:9px 10px 6px}
 body.path-playful.app-coast .cp-panel{border-top:0;border-radius:0 0 26px 26px;padding:12px 18px 18px}
}
@media(prefers-reduced-motion:reduce){body.path-playful.app-coast .sg-button{transition:none}body.path-playful.app-coast .lp-hub,body.path-playful.app-coast .lp-gfade{animation:none}}

/* Shared illustrated navigation and the selected level face. */
body.path-playful.app-coast .lp-hub .lp-hero .lp-levels button.sg-button.on{background:radial-gradient(ellipse 80% 65% at 50% -7%,var(--sg-gloss),transparent 82%),linear-gradient(var(--path-top),var(--path-bottom));color:var(--path-ink);box-shadow:inset 0 2px 0 #fff,0 3px 0 var(--path-base)}
body.path-playful.app-coast .lp-module-art{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}
body.path-playful.app-coast>main{max-width:none}
body.path-playful.app-coast .dw-nav{left:8px;right:8px;top:auto;bottom:0;width:auto;transform:none;display:flex;flex-direction:row;gap:2px;margin:0;padding:5px 4px calc(7px + env(safe-area-inset-bottom,0px));border:1px solid var(--app-rim);border-bottom:0;border-radius:25px 25px 0 0;background:linear-gradient(#fffdf5,#f9f1df);box-shadow:inset 0 2px 0 #fff,0 -3px 18px #123b4f15;z-index:30}
body.path-playful.app-coast .dw-nav a{flex:1 1 0%;min-width:44px;min-height:58px;padding:3px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:17px;color:#576d61;font:500 10px/1.3 var(--path-font);opacity:1}
body.path-playful.app-coast .dw-nav a:last-child{flex-grow:1.25}
body.path-playful.app-coast .dw-nav a.on{background:#e4eed9;box-shadow:inset 0 1px 0 #fff,0 2px 0 #baccb1;color:#205443;font-weight:700}
body.path-playful.app-coast .dw-nav a [data-jp]{font:inherit;letter-spacing:normal}
body.path-playful.app-coast .dw-nav .dw-ic{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;flex:none}
body.path-playful.app-coast .dw-nav-object{display:block;width:32px;height:32px;object-fit:contain;flex:none}
body.path-playful.app-coast .dw-nav-object+svg{display:none}
@media(min-width:880px){
 body.path-playful.app-coast{--dw-nav-inset:228px}
 body.path-playful.app-coast.dw-has-nav{padding-left:228px;padding-bottom:24px}
 body.path-playful.app-coast .dw-nav{left:18px;right:auto;top:20px;bottom:20px;width:190px;flex-direction:column;justify-content:flex-start;gap:9px;padding:15px 10px;border:1px solid var(--app-rim);border-radius:27px}
 body.path-playful.app-coast .dw-nav a{flex:none;width:100%;min-height:56px;flex-direction:row;justify-content:flex-start;gap:10px;padding:8px 9px;font-size:14px}
 body.path-playful.app-coast .dw-nav a:last-child{flex-grow:0}
}

/* TOEIC's reference material remains one tap away without lengthening the path. */
body.path-playful .path-guide{--sg-height:44px;--sg-radius:14px;--sg-depth:3px;padding:7px 9px;min-width:44px;font-size:11px}
body.path-playful .path-extras{inset:0;margin:auto;width:min(600px,calc(100% - 24px));max-height:calc(100dvh - 40px);padding:16px;background:#fff9e9;color:#214b40;border:2px solid #fffdf5;border-radius:25px;box-shadow:0 7px 0 #c9bea2,0 20px 70px #08233770;overflow-y:auto;overscroll-behavior:contain;font-family:var(--path-font)}
body.path-playful .path-extras::backdrop{background:#0c2e4b85;backdrop-filter:blur(4px)}
body.path-playful .path-extras-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:12px;border-bottom:1px solid #dfd6be}
body.path-playful .path-extras h2{font:600 18px/1.3 var(--path-font);margin:0}
body.path-playful.app-coast .path-extras :is(.scope,.strands){margin:14px 0!important;max-width:none;background:#fffdf5;border:1px solid #e2d8c1;border-radius:17px;padding:13px}
body.path-playful .path-extras .scopegrid{grid-template-columns:1fr}
body.path-playful .path-extras .strandgrid{grid-template-columns:1fr}
body.path-playful .path-extras .scard{min-width:0;background:#f0f6f0;border-radius:16px}
body.path-playful .path-extras .strandtoggle{width:100%;color:#214b40}
@media(max-width:879px) and (max-height:740px){body.path-playful.app-coast[data-lesson-project=toeic] .lp-mcard{min-height:117px;--sg-height:117px}body.path-playful.app-coast[data-lesson-project=toeic] .lp-mcard .lp-mtop{gap:6px}body.path-playful.app-coast[data-lesson-project=toeic] .lp-mcard .lp-mt{font-size:14px;overflow-wrap:normal}}
/* Keep the chapter name full width; long English words never break into a lone letter. */
body.path-playful.app-coast .lp-mcard .lp-mtop{display:block;flex:1;position:static;margin:0 0 8px;padding-top:43px}
body.path-playful.app-coast .lp-mcard .lp-mic{position:absolute;left:10px;top:9px;width:38px;height:38px;border-radius:13px}
body.path-playful.app-coast .lp-mcard .lp-mindex{left:58px;top:21px}
body.path-playful.app-coast .lp-mcard .lp-mt{overflow-wrap:normal;hyphens:none;line-height:1.17}
@media(min-width:880px){body.path-playful.app-coast .lp-mcard .lp-mic{width:52px;height:52px}body.path-playful.app-coast .lp-mcard .lp-mindex{left:72px;top:25px}body.path-playful.app-coast .lp-mcard .lp-mtop{padding-top:57px}}

body.path-playful.app-coast .lp-sheet .lp-mrow{--sg-height:72px;--sg-radius:19px;--sg-depth:4px;display:flex;align-items:center;justify-content:flex-start;text-align:left;padding:10px;margin-bottom:12px;gap:10px}
body.path-playful.app-coast .lp-sheet .lp-mrow.current{--sg-face-top:var(--path-top);--sg-face-bottom:var(--path-bottom);--sg-base:var(--path-base);--sg-rim:var(--path-rim);--sg-ink:var(--path-ink)}
body.path-playful.app-coast .lp-sheet .lp-mrow.locked{opacity:.7;filter:saturate(.55)}
body.path-playful.app-coast .lp-sheet .lp-mic{width:43px;height:43px;border-radius:14px;border:1px solid #fffaf0;background:#fffdf5;overflow:hidden}
body.path-playful.app-coast .lp-sheet .lp-mt{font:600 15px/1.2 var(--path-font);color:inherit}
body.path-playful.app-coast .lp-sheet .lp-now{color:inherit;font:600 10px var(--path-font)}
body.path-playful.app-coast .lp-sheet .lp-mbar{border:0;background:#42614222;height:6px}
body.path-playful.app-coast .lp-sheet .lp-mbar i{background:#469a6f}
body.path-playful.app-coast .lp-mcard{gap:0}

/* Island first: a single floating header and a compact control dock. */
body.path-playful.app-coast .cp-app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(280px,1fr) auto;padding:0;gap:0;background:#489cce}
body.path-playful.app-coast .cp-header{position:absolute;inset:0 0 auto;width:100%;max-width:560px;min-height:54px;padding:calc(5px + env(safe-area-inset-top,0px)) 9px 5px;background:transparent;border-radius:0;box-shadow:none;gap:7px}
body.path-playful.app-coast .cp-header .cp-brand,body.path-playful.app-coast .cp-eyebrow,body.path-playful.app-coast .cp-stop-label,body.path-playful.app-coast .cp-stars{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
body.path-playful.app-coast .cp-header .cp-module{font-size:13px;min-width:0;gap:5px;line-height:1.2;padding:6px 8px}
body.path-playful.app-coast .cp-wallet{font-size:13px;padding:7px;flex:none}
body.path-playful.app-coast .cp-wallet svg{width:20px;height:20px}
body.path-playful.app-coast .cp-goal{position:absolute;left:12px;right:12px;top:calc(61px + env(safe-area-inset-top,0px));width:fit-content;max-width:calc(100% - 24px);margin:0 auto;padding:5px 10px;gap:8px;min-height:33px;border:1px solid #ffffff82;border-radius:14px;background:#fff9e9d9;box-shadow:0 2px 0 #194d621a}
body.path-playful.app-coast .cp-goal h1{font-size:12px;line-height:1.3}
body.path-playful.app-coast .cp-goal>svg{width:18px;height:18px}
body.path-playful.app-coast .cp-count{font-size:11px}
body.path-playful.app-coast .cp-count b{font-size:16px}
body.path-playful.app-coast .cp-hero{grid-column:1;grid-row:1;min-height:280px;margin:0;overflow:hidden}
body.path-playful.app-coast .cp-scene{inset:54px 0 0;width:100%;height:calc(100% - 54px);mask-image:none}
body.path-playful.app-coast .cp-panel{grid-column:1;grid-row:2;align-self:end;width:100%;max-width:560px;padding:4px 6px 8px;border-radius:24px 24px 0 0}
body.path-playful.app-coast .cp-app[data-project-total] .cp-stops{grid-template-columns:repeat(var(--cp-stops),minmax(44px,1fr));gap:0;padding:0 0 4px;overflow-x:auto;overflow-y:hidden}
body.path-playful.app-coast .cp-app .cp-stop{min-width:44px;min-height:46px;height:46px;display:flex;flex-direction:column;justify-content:center;flex-wrap:nowrap;gap:0;padding:4px 0 6px}
body.path-playful.app-coast .cp-app .cp-stop-dot{width:32px;height:32px;font-size:15px;flex:none}
body.path-playful.app-coast .cp-app .cp-stop::before{display:block;top:19px;height:4px}
body.path-playful.app-coast .cp-app .cp-stop:first-child::before{display:none}
body.path-playful.app-coast .cp-actions{padding:0 6px;border:0}
body.path-playful.app-coast .cp-lesson-title{font:500 11px/1.3 var(--path-font);margin:0 0 4px;color:#3c5d4b}
body.path-playful.app-coast .cp-start-row{display:flex;align-items:stretch;gap:8px}
body.path-playful.app-coast .cp-primary{flex:1;min-width:0;--sg-height:44px;min-height:44px;margin:0;padding:8px 28px 8px 10px;font-size:15px!important}
body.path-playful.app-coast .cp-details-open{--sg-height:44px;--sg-radius:15px;--sg-depth:3px;flex:none;width:44px;padding:0;display:grid;place-items:center}
body.path-playful.app-coast .cp-details-open svg{transform:rotate(180deg)}
body.path-playful.app-coast .cp-locked-note{flex:1;margin:0;padding:4px 8px;font-size:11px;min-height:44px}
body.path-playful.app-coast .cp-tools{margin-top:8px;gap:7px;min-height:44px}
body.path-playful.app-coast .cp-quiet{padding:6px 8px}
body.path-playful.app-coast .cp-scene-caption{bottom:12px;left:12px;padding:5px 9px;max-width:calc(100% - 118px)}
body.path-playful.app-coast .cp-greet{bottom:9px}
body.path-playful.app-coast .cp-details{inset:0;margin:auto;width:min(480px,calc(100% - 24px));max-height:calc(100dvh - 32px);padding:16px;border:2px solid #fffdf5;border-radius:25px;background:#fff9e9;color:#214b40;box-shadow:0 6px 0 #c9bea2,0 20px 70px #08233770;overflow-y:auto;overscroll-behavior:contain}
body.path-playful.app-coast .cp-details::backdrop{background:#0c2e4b85;backdrop-filter:blur(4px)}
body.path-playful.app-coast .cp-details-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
body.path-playful.app-coast .cp-details h2{font:600 18px/1.3 var(--path-font);margin:0}
body.path-playful.app-coast .cp-details-head button{--sg-height:44px;width:44px;font-size:22px;flex:none}
body.path-playful.app-coast .cp-details .cp-context{display:flex;grid-area:auto;margin:12px 0;padding:0;width:100%;background:none;gap:8px}
body.path-playful.app-coast .cp-context strong{flex:1;text-align:center;font-size:14px}
body.path-playful.app-coast .cp-details .cp-next{font-size:12px;padding:5px 0 10px}
body.path-playful.app-coast .cp-detail-stages{list-style:none;margin:0;padding:0;display:grid;gap:7px}
body.path-playful.app-coast .cp-detail-stages li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid #e3dcc9;background:#fffdf5;border-radius:13px;font:500 13px/1.3 var(--path-font)}
body.path-playful.app-coast .cp-detail-stages small{flex:none;font-size:10px;color:#576d61}
@media(min-width:880px){
 body.path-playful.app-coast .cp-header{max-width:none;padding:18px 24px;gap:12px}
 body.path-playful.app-coast .cp-header .cp-module{flex:0 1 320px;margin-right:auto;font-size:16px}
 body.path-playful.app-coast .cp-goal{top:85px;left:24px;right:auto;margin:0}
 body.path-playful.app-coast .cp-panel{position:absolute;bottom:18px;left:auto;right:24px;width:350px;max-width:calc(100% - 48px);border-radius:24px;padding:8px 10px 12px}
 body.path-playful.app-coast .cp-app{grid-template-rows:minmax(280px,1fr)}
 body.path-playful.app-coast .cp-hero{height:100%}
 body.path-playful.app-coast .cp-scene{inset:0;width:100%;height:100%}
 body.path-playful.app-coast .cp-scene-caption{bottom:24px;left:24px;max-width:calc(100% - 480px)}
 body.path-playful.app-coast .cp-greet{bottom:65px;left:24px;right:auto}
}

body.path-playful.app-coast :is(.cp-header,.cp-goal,.cp-panel){grid-area:auto}

/* Deeper course screens are building workspaces; the ocean belongs to main hubs. */
body.path-playful.app-coast:not(.lesson-project-open){
 --work-ground:#e4ead5;--work-line:#78916c17;--work-paper:#fffaf0;
 background:radial-gradient(ellipse at 13% 0%,#fffdf4c9,transparent 65%),linear-gradient(90deg,var(--work-line) 1px,transparent 1px),linear-gradient(var(--work-line) 1px,transparent 1px),var(--work-ground);
 background-size:auto,32px 32px,32px 32px,auto;background-attachment:fixed;
}
body.path-playful.app-coast[data-lesson-project=business]:not(.lesson-project-open){--work-ground:#e8e2ef;--work-line:#87789916}
body.path-playful.app-coast[data-lesson-project=toeic]:not(.lesson-project-open){--work-ground:#e2e9e5;--work-line:#66888518}
body.path-playful.app-coast .ic-head .t h1{color:#304c3d;text-shadow:none}
body.path-playful.app-coast .ic-head .t>span{color:#64725c}
body.path-playful.app-coast .lp-hub{padding:8px 16px 16px}
body.path-playful.app-coast .lp-gridhd,body.path-playful.app-coast .lp-page-count{color:#52634f;text-shadow:none}
body.path-playful.app-coast .lp-build-project{
 --sg-face-top:#fffef5;--sg-face-bottom:#f8efd8;--sg-rim:#fffef8;--sg-base:#b8b397;--sg-ink:#2f493c;--sg-shadow:#4857371c;
 position:relative;display:grid;grid-template-columns:138px minmax(0,1fr);grid-template-rows:1fr auto;column-gap:14px;row-gap:5px;align-items:center;padding:12px 16px;min-height:172px;--sg-radius:25px;
}
body.path-playful.app-coast .lp-build-project .lp-cic{grid-row:1/3;align-self:stretch;position:relative;width:138px;height:auto;margin:0;border-radius:20px;background:radial-gradient(ellipse at center,#dceac6 0%,#e9f1dbaa 55%,transparent 70%)}
body.path-playful.app-coast .lp-build-label{font:600 11px/1.3 var(--path-font);color:#62735a;margin-bottom:5px}
body.path-playful.app-coast .lp-build-project .lp-ct1{font-size:22px;color:#304c3d}
body.path-playful.app-coast .lp-build-project .lp-ct2{font-size:10px;line-height:1.2;color:#69705b;margin-top:5px}
body.path-playful.app-coast .lp-build-meter{display:flex;gap:3px;margin:5px 0;height:6px;max-width:200px}
body.path-playful.app-coast .lp-build-meter i{flex:1;min-width:0;border-radius:4px;background:#d7ddc9;box-shadow:inset 0 1px 1px #5c6f3225}
body.path-playful.app-coast .lp-build-meter i.done{background:#70b956;box-shadow:inset 0 1px 0 #bded95}
body.path-playful.app-coast .lp-build-next{display:block;font:500 10px/1.35 var(--path-font);color:#516a4d}
body.path-playful.app-coast .lp-build-project .lp-cgo{grid-column:2;width:auto;height:32px;display:flex;justify-content:center;gap:8px;min-width:0;border:1px solid var(--path-rim);border-radius:13px;background:radial-gradient(ellipse at top,#ffffff80,transparent 75%),linear-gradient(var(--path-top),var(--path-bottom));box-shadow:inset 0 1px 0 #fff,0 3px 0 var(--path-base);color:var(--path-ink);font:600 12px/1.2 var(--path-font)}
body.path-playful.app-coast .lp-mcard{--sg-face-top:#fffdf5;--sg-face-bottom:#f3e8cd;--sg-base:#b7ac8f;--sg-rim:#fff8e8;--sg-ink:#38503c}
body.path-playful.app-coast .lp-mcard.locked{--sg-face-top:#f4f2e7;--sg-face-bottom:#e4e6d7;--sg-base:#aeb7a0;--sg-rim:#fffff0;--sg-ink:#5c6854}
body.path-playful.app-coast .lp-mcard .lp-mic{background:#fffdf6;border-color:#e7dcc0}
body.path-playful.app-coast:not(.lesson-project-open) .sg-button:focus-visible{outline-color:#306b52}
@media(min-width:880px){
 body.path-playful.app-coast .lp-hub{gap:17px;padding-top:10px}
 body.path-playful.app-coast .lp-build-project{grid-template-columns:220px minmax(0,1fr);padding:18px 25px;min-height:223px;column-gap:25px;row-gap:8px}
 body.path-playful.app-coast .lp-build-project .lp-cic{width:220px}
 body.path-playful.app-coast .lp-build-project .lp-ct1{font-size:29px}
 body.path-playful.app-coast .lp-build-label{font-size:13px;margin-bottom:7px}
 body.path-playful.app-coast .lp-build-project .lp-ct2{font-size:12px}
 body.path-playful.app-coast .lp-build-next{font-size:12px}
 body.path-playful.app-coast .lp-build-project .lp-cgo{height:39px;font-size:14px;max-width:300px}
 body.path-playful.app-coast .lp-mcard{--sg-height:168px;min-height:168px}
}
@media(max-width:879px) and (max-height:740px){
 body.path-playful.app-coast .lp-hub{padding:2px 13px 10px;gap:7px}
 body.path-playful.app-coast .lp-build-project{grid-template-columns:103px minmax(0,1fr);min-height:124px;padding:8px 11px;column-gap:8px;row-gap:3px}
 body.path-playful.app-coast .lp-build-project .lp-cic{width:103px}
 body.path-playful.app-coast .lp-build-label{font-size:10px;margin-bottom:3px}
 body.path-playful.app-coast .lp-build-project .lp-ct1{font-size:18px}
 body.path-playful.app-coast .lp-build-project .lp-ct2{font-size:9px;margin-top:3px}
 body.path-playful.app-coast .lp-build-meter{height:4px;margin:4px 0}
 body.path-playful.app-coast .lp-build-next{font-size:9px}
 body.path-playful.app-coast .lp-build-project .lp-cgo{height:25px;font-size:10px}
 body.path-playful.app-coast .lp-mcard{min-height:106px;--sg-height:106px;padding:9px}
 body.path-playful.app-coast .lp-mcard.current{padding:9px}
 body.path-playful.app-coast .lp-mcard .lp-mtop{padding-top:32px;margin-bottom:5px}
 body.path-playful.app-coast .lp-mcard .lp-mic{width:29px;height:29px;top:7px;left:9px;border-radius:10px}
 body.path-playful.app-coast .lp-mcard .lp-mindex{left:47px;top:17px}
 body.path-playful.app-coast .lp-mcard .lp-mt{font-size:13px;line-height:1.1}
 body.path-playful.app-coast[data-lesson-project=toeic] .lp-mcard{min-height:102px;--sg-height:102px}
 body.path-playful.app-coast[data-lesson-project=toeic] .lp-mcard .lp-mt{font-size:13px}
 body.path-playful.app-coast .lp-mm{font-size:9px;margin-top:4px}
}
@media(max-width:359px){
 body.path-playful.app-coast .lp-build-project{grid-template-columns:88px minmax(0,1fr);column-gap:7px}
 body.path-playful.app-coast .lp-build-project .lp-cic{width:88px}
 body.path-playful.app-coast .lp-build-project .lp-ct1{font-size:16px}
 body.path-playful.app-coast .lp-hub{padding-inline:10px}
}
body.path-playful.app-coast .lp-build-project .lp-cmid{display:block;grid-column:2;grid-row:1;min-width:0}
body.path-playful.app-coast .lp-build-project .lp-cgo{margin-left:0;justify-self:stretch}

/* The project card hosts the very same building model as the selected island. */
body.path-playful.app-coast .lp-build-preview{position:relative;width:166px;height:158px;flex:none;display:grid;place-items:center;pointer-events:none}
body.path-playful.app-coast .lp-build-preview canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
body.path-playful.app-coast .lp-build-placeholder{font:500 10px/1.4 var(--path-font);text-align:center;color:#5d7054;max-width:85%;padding:8px;border-radius:12px;background:#ffffff6b}
body.path-playful.app-coast .lp-build-preview .lp-build-placeholder[hidden],body.path-playful.app-coast .lp-build-preview canvas[hidden]{display:none}
@media(min-width:880px){body.path-playful.app-coast .lp-build-preview{width:242px;height:208px}}
@media(max-width:879px) and (max-height:740px){body.path-playful.app-coast .lp-build-preview{width:131px;height:112px}}
@media(max-width:359px){body.path-playful.app-coast .lp-build-preview{width:113px;height:109px}}