:root { --map-ink:#4b250e; --map-gold:#ffd47a; --map-cream:#fff5d7; }
html { scroll-behavior:smooth; }
body { min-height:100vh; margin:0; color:var(--map-ink); background:#27a1cf url('/public/images/learning-map-sea.jpg') center center / cover no-repeat fixed; font-family:'Outfit',sans-serif; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; background:linear-gradient(#0527441b,transparent 26%,#04334a10); z-index:0; }
.map-navbar { position:relative; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; width:min(1640px,calc(100% - 48px)); min-height:82px; margin:0 auto; }
.map-brand { display:inline-flex; width:max-content; gap:12px; align-items:center; text-decoration:none; color:#fff7d2; filter:drop-shadow(0 3px 2px #54280dc9); }
.map-brand i { color:#ffdf83; font-size:2.5rem; transform:rotate(-9deg); }
.map-brand span { display:flex; flex-direction:column; }
.map-brand strong { color:#fff3b7; font-family:Georgia,serif; font-size:clamp(1.7rem,2.6vw,3rem); line-height:1; -webkit-text-stroke:1px #70401c; text-shadow:2px 3px #593319; }
.map-brand small { color:white; font-size:.72rem; font-weight:700; letter-spacing:.01em; white-space:nowrap; }
.map-nav-links { display:flex; gap:8px; padding:5px; border:2px solid #ffffffb8; border-radius:40px; background:#1f335796; box-shadow:0 3px 12px #17384757; }
.map-nav-links a { display:inline-flex; align-items:center; gap:10px; min-width:144px; justify-content:center; padding:10px 20px; border-radius:30px; color:#fff; text-decoration:none; font-weight:800; text-shadow:0 1px 2px #21324b; }
.map-nav-links a.active { color:#43260e; text-shadow:none; background:linear-gradient(#fff2ad,#eab454); box-shadow:inset 0 2px 0 #fff9de,0 2px 8px #20272850; }
.map-nav-links i { font-size:1.1rem; }
.map-mobile-profile { display:none !important; }
#auth-area { position:relative; justify-self:end; }
.map-account-menu { position:relative; }
.map-account { display:inline-flex; align-items:center; gap:10px; min-width:140px; max-width:220px; padding:5px 18px 5px 5px; border:2px solid #ffffffb8; border-radius:40px; background:#253858ab; color:white; text-decoration:none; font:800 1rem 'Outfit',sans-serif; box-shadow:0 3px 12px #17384757; cursor:pointer; }
.map-account .map-avatar { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%; color:white; background:#155f92; border:2px solid white; font-size:1.15rem; }
.map-account .map-username { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.map-account > i { margin-left:auto; font-size:.75rem; transition:transform .18s ease; }
.map-account-menu.open .map-account > i { transform:rotate(180deg); }
.map-account-dropdown { position:absolute; z-index:100; top:calc(100% + 10px); right:0; display:grid; width:260px; overflow:hidden; opacity:0; visibility:hidden; transform:translateY(8px); border:1px solid #d9e3e9; border-radius:18px; background:#fff; box-shadow:0 18px 38px #102b3f59; transition:opacity .18s ease,transform .18s ease,visibility .18s ease; }
.map-account-menu.open .map-account-dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.map-account-dropdown a,.map-account-dropdown button { display:flex; align-items:center; gap:13px; min-height:58px; box-sizing:border-box; padding:14px 20px; border:0; border-bottom:1px solid #e6edf1; color:#334155; background:#fff; text-decoration:none; font:600 1rem 'Outfit',sans-serif; text-align:left; cursor:pointer; }
.map-account-dropdown button { border-bottom:0; color:#ef4444; }
.map-account-dropdown a:hover,.map-account-dropdown button:hover { background:#f5f8fa; }
.map-account-dropdown i { width:22px; color:#334155; font-size:1.15rem; text-align:center; }
.map-account-dropdown button i { color:#334155; }
.map-account-dropdown button:disabled { opacity:.6; cursor:wait; }
.map-menu-toggle { display:none; }
.map-page { position:relative; z-index:1; width:min(1660px,100%); box-sizing:border-box; margin:0 auto; padding:12px clamp(18px,3vw,54px) 70px; }
.map-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,.95fr); gap:clamp(20px,6vw,100px); align-items:start; min-height:137px; }
.map-sign { position:relative; width:max-content; max-width:100%; box-sizing:border-box; padding:14px 34px 17px; transform:rotate(-2deg); border:8px ridge #9d581e; border-radius:18px; background:linear-gradient(105deg,#5d2c13,#8c491c 42%,#5a2811); box-shadow:0 8px 0 #663015,0 14px 18px #152f4b72,inset 0 0 0 2px #f6c063; text-align:center; font:inherit; cursor:pointer; transition:transform .18s ease,filter .18s ease; }
.map-sign:hover { transform:rotate(-2deg) translateY(-3px); filter:brightness(1.08); }
.map-sign:focus-visible { outline:4px solid #fff8c9; outline-offset:4px; }
.map-sign::before,.map-sign::after { content:''; position:absolute; top:7px; bottom:7px; width:7px; border-radius:5px; background:#e0a54f; box-shadow:inset 1px 0 2px #fff0a4; }
.map-sign::before { left:9px; }.map-sign::after { right:9px; }
.map-sign h1 { margin:0; color:#fff3c8; font-family:Georgia,serif; font-weight:900; font-size:clamp(1.7rem,3.1vw,3.4rem); line-height:1.05; text-shadow:2px 3px 0 #3c1c0d; }
.map-sign p { margin:6px 0 0; color:#fff1cf; font-size:clamp(.9rem,1.3vw,1.2rem); font-weight:700; }
.map-sign-hint { display:inline-flex; align-items:center; gap:6px; margin-top:8px; color:#ffe4a0; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.map-progress-panel { display:flex; align-items:center; justify-content:space-between; gap:18px; box-sizing:border-box; margin-top:10px; padding:15px 24px; min-height:91px; border:5px ridge #b47531; border-radius:17px; background:linear-gradient(100deg,#fff0bb,#f6d996 50%,#fff2c5); box-shadow:0 8px 13px #17324a7a,inset 0 0 12px #b57f424f; }
.map-progress-copy { flex:1; min-width:0; }
.map-progress-copy strong { display:block; font-size:clamp(.9rem,1.25vw,1.17rem); margin-bottom:8px; }
.map-progress-track { height:16px; overflow:hidden; border-radius:20px; background:#ba9b74; box-shadow:inset 0 2px 3px #765535; }
.map-progress-track span { display:block; height:100%; width:0%; border-radius:inherit; background:linear-gradient(#43dc91,#009969); box-shadow:0 0 10px #2bd081; transition:width .35s ease; }
.map-progress-building { display:flex; align-items:center; gap:6px; margin-top:7px; color:#7b512b; font-size:.72rem; font-weight:700; }
.map-progress-building i { color:#a96827; }
.map-progress-cheer { display:flex; align-items:center; gap:10px; line-height:1.15; font-size:.89rem; font-weight:800; }
.map-progress-cheer i { color:#348c33; font-size:2rem; filter:drop-shadow(1px 2px #755e2e); }
.map-actions { display:flex; justify-content:flex-end; gap:12px; margin:0 2px 10px; min-height:33px; }
.map-actions a { display:inline-flex; align-items:center; gap:7px; align-self:start; padding:6px 13px; border-radius:24px; border:1px solid #fff8d1; background:#273c58b5; color:#fff8dc; font-weight:800; text-decoration:none; text-shadow:0 1px 2px #162d42; box-shadow:0 3px 7px #1b3f5580; }
.map-actions .map-continue { background:linear-gradient(#ffc668,#b97624); color:#3b240e; text-shadow:none; border:2px solid #fff5c5; }
.map-actions [hidden] { display:none; }
.map-status { padding:35px; text-align:center; font-weight:700; color:white; text-shadow:0 2px 4px #15415d; }
.map-route-wrap { position:relative; }
.map-route { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.map-route path { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.map-route-glow { stroke:#fff082; stroke-width:27; opacity:.7; filter:blur(10px) drop-shadow(0 0 17px #fff5a2); }
.map-route-line { stroke:#fffdf0; stroke-width:8; stroke-dasharray:7 17; filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 11px #ffdf47) drop-shadow(0 3px 2px #80531e); }
.lesson-map { position:relative; z-index:1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:76px 4px; margin:0; padding:12px 4px 42px; list-style:none; }
.map-node { position:relative; min-width:0; text-align:center; }
.map-lesson { position:relative; display:flex; flex-direction:column; align-items:center; width:100%; gap:0; color:#3c2410; text-decoration:none; }
.map-thumb { --lesson-progress:0%; position:relative; display:grid; place-items:center; width:clamp(104px,8.8vw,142px); height:clamp(104px,8.8vw,142px); max-width:80%; overflow:hidden; box-sizing:border-box; padding:6px; border:0; border-radius:50%; background:conic-gradient(#ffd447 0 var(--lesson-progress),#ffffff66 var(--lesson-progress) 100%); box-shadow:0 7px 16px #18334678; transition:transform .2s ease,box-shadow .2s ease; }
.map-thumb.has-progress { box-shadow:0 0 8px 2px #fff0a6,0 0 18px 4px #ffc12f99,0 7px 16px #18334678; }
.map-thumb img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.map-thumb > i { color:#9c6d3c; font-size:3rem; }
.map-lesson:hover .map-thumb,.map-lesson:focus-visible .map-thumb { transform:translateY(-6px) scale(1.04); box-shadow:0 0 13px 3px #ffe68699,0 12px 22px #123b4a8c; }
.map-lesson:focus-visible { outline:3px solid white; outline-offset:7px; border-radius:16px; }
.map-number { position:absolute; z-index:3; top:-16px; left:calc(50% - 22px); display:grid; place-items:center; box-sizing:border-box; width:44px; height:44px; border:4px solid #b66a25; border-radius:50%; background:linear-gradient(#fffefa,#fff0c2); color:#3a2616; font:800 1.3rem Georgia,serif; box-shadow:inset 0 0 0 2px #fff,0 3px 4px #2b292c80; }
.map-title { position:relative; display:grid; place-items:center; box-sizing:border-box; max-width:100%; min-height:40px; min-width:150px; margin-top:-3px; padding:5px 13px; border:2px solid #a65d27; border-radius:7px 7px 13px 13px; background:linear-gradient(#fff7d9,#f0c879); box-shadow:0 4px 4px #49361c77,inset 0 2px #fff9e3; color:#332114; font-size:clamp(.75rem,.9vw,.95rem); font-weight:800; line-height:1.15; text-align:center; }
.map-title::before,.map-title::after { content:''; position:absolute; top:5px; width:10px; height:24px; background:#d8aa5d; z-index:-1; }
.map-title::before { left:-8px; transform:skewY(-15deg); }.map-title::after { right:-8px; transform:skewY(15deg); }
.map-state-icon { position:absolute; z-index:4; top:92px; left:calc(50% + 38px); display:grid; place-items:center; width:33px; height:33px; border:3px solid white; border-radius:50%; color:white; background:#96724c; box-shadow:0 2px 5px #13394d9e; font-size:1rem; }
.map-completed .map-state-icon { background:#12875b; }
.map-current .map-thumb { box-shadow:0 0 18px 7px #fff0a080,0 8px 18px #2e333270; }
.map-current .map-number { border-color:#ffa51f; }
.map-current .map-state-icon { background:#f29e2e; }
.map-current-label { margin-top:5px; padding:2px 9px; color:#5f300c; border-radius:20px; background:#ffeda8; font-size:.7rem; font-weight:800; box-shadow:0 2px 4px #472b1969; }
.map-empty { max-width:520px; margin:28px auto; padding:38px 30px; text-align:center; border:5px ridge #b47531; border-radius:18px; color:#4b250e; background:#fff0c6e8; box-shadow:0 9px 20px #16364580; }
.map-empty i { font-size:2.5rem; color:#9b652d; }.map-empty h2 { margin:13px 0 7px; }.map-empty p { line-height:1.5; }
.level-dialog { position:fixed; inset:50% auto auto 50%; width:min(560px,calc(100% - 28px)); max-height:calc(100vh - 36px); margin:0; padding:0; overflow:visible; border:0; border-radius:24px; color:#4b250e; background:transparent; transform:translate(-50%,-50%); }
.level-dialog::backdrop { background:#061c2ebd; backdrop-filter:blur(5px); }
.level-dialog-card { position:relative; box-sizing:border-box; max-height:calc(100vh - 36px); overflow:auto; padding:30px; border:7px ridge #a66329; border-radius:24px; background:linear-gradient(145deg,#fff7d9,#f4d08a); box-shadow:0 22px 65px #071b2ed9,inset 0 0 0 2px #fff4c9; text-align:center; }
.level-dialog-close { position:absolute; top:13px; right:13px; display:grid; place-items:center; width:39px; height:39px; border:2px solid #9c602b; border-radius:50%; color:#693817; background:#fff7dd; cursor:pointer; font-size:1.1rem; }
.level-dialog-icon { display:grid; place-items:center; width:66px; height:66px; margin:0 auto 10px; border:4px solid #fff9df; border-radius:50%; color:#fff4c7; background:linear-gradient(#2d84ad,#18517c); box-shadow:0 4px 9px #23455b69; font-size:1.75rem; }
.level-dialog h2 { margin:7px 38px 5px; font:900 clamp(1.6rem,5vw,2.25rem) Georgia,serif; color:#54270f; }
.level-dialog-card > p { margin:0 auto 21px; color:#765030; font-weight:600; }
.level-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.level-options button { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:58px; padding:10px 15px; border:3px solid #c98a43; border-radius:15px; color:#4b2b17; background:#fffaf0; box-shadow:0 3px 0 #a6672d; cursor:pointer; font:inherit; text-align:left; transition:transform .15s ease,background .15s ease; }
.level-options button:hover,.level-options button:focus-visible { transform:translateY(-2px); outline:none; background:#fff1bd; }
.level-options button.selected { border-color:#177ba6; color:#0d5579; background:#dff5ff; box-shadow:0 3px 0 #155d7d; }
.level-options .level-option-wide { grid-column:1 / -1; }
.level-options button:disabled { opacity:.58; cursor:wait; transform:none; }
.level-options strong { font-size:1.03rem; }.level-options span { font-size:.75rem; color:#8a684c; font-weight:700; }
.level-dialog-status { min-height:21px; margin:16px 0 0 !important; color:#9a271c !important; font-size:.9rem; font-weight:800 !important; }
@media(max-width:1100px) { .map-navbar { width:calc(100% - 30px); grid-template-columns:1fr auto; }.map-nav-links { grid-row:2; grid-column:1 / -1; justify-self:center; }.map-page { padding-top:25px; }.map-heading { gap:20px; }.lesson-map { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:72px; }.map-thumb { width:124px;height:124px; }.map-state-icon { top:81px; } }
@media(max-width:680px) { .map-navbar { width:calc(100% - 22px); min-height:67px; gap:7px; }.map-brand i { font-size:1.8rem; }.map-brand strong { font-size:1.65rem; }.map-brand small { display:none; }.map-menu-toggle { display:block; justify-self:end; grid-column:2; grid-row:1; padding:8px 11px; border:2px solid #fff5cc; border-radius:14px; background:#234968ca; color:white; }.map-nav-links { display:none; grid-column:1 / -1; grid-row:2; width:100%; box-sizing:border-box; }.map-nav-links.open { display:flex; }.map-nav-links a { min-width:0; flex:1; padding:8px; font-size:.87rem; }.map-nav-links a i { display:none; }#auth-area { grid-column:1 / -1; grid-row:3; justify-self:end; }.map-account { min-width:0; padding:3px 12px 3px 3px; font-size:.86rem; }.map-account .map-avatar { width:29px; height:29px; }.map-page { padding:15px 14px 60px; }.map-heading { display:block; min-height:0; }.map-sign { width:100%; padding:12px 19px; border-width:6px; }.map-sign h1 { font-size:clamp(1.65rem,7vw,2.3rem); }.map-sign p { font-size:.85rem; }.map-progress-panel { margin-top:18px; padding:10px 15px; min-height:70px; }.map-progress-cheer { font-size:.72rem; }.map-progress-cheer i { font-size:1.4rem; }.map-actions { justify-content:center; margin:14px 0 25px; }.lesson-map { grid-template-columns:repeat(2,minmax(0,1fr)); gap:31px 6px; }.map-thumb { width:min(38vw,148px); height:min(38vw,148px); max-width:90%; border-width:5px; }.map-number { width:35px; height:35px; left:calc(50% - 18px); font-size:1rem; }.map-title { min-width:0; width:95%; padding:6px 9px; min-height:42px; font-size:.82rem; }.map-state-icon { top:min(26vw,104px); left:calc(50% + 34px); width:29px; height:29px; font-size:.85rem; }.level-dialog-card { padding:25px 16px 18px; }.level-options { grid-template-columns:1fr; }.level-options button { min-height:49px; }.level-dialog-icon { width:56px;height:56px;font-size:1.45rem; }.level-dialog h2 { font-size:1.65rem; } }
@media(max-width:680px) {
    body { background-attachment:scroll; }
    .map-navbar { grid-template-columns:minmax(0,1fr) auto; width:calc(100% - 24px); min-height:66px; margin:10px auto 7px; padding:6px 8px; border:2px solid #ffffffd9; border-radius:36px; background:#ffffffde; box-shadow:0 5px 18px #173c5875; }
    .map-brand { min-width:0; gap:7px; color:#15274a; filter:none; }
    .map-brand i { color:#b56d23; font-size:2rem; filter:drop-shadow(0 2px 1px #80501e80); }
    .map-brand strong { color:#15274a; font:900 clamp(1.35rem,7vw,1.85rem) 'Outfit',sans-serif; -webkit-text-stroke:0; text-shadow:none; white-space:nowrap; }
    .map-menu-toggle { display:none; }
    #auth-area { grid-column:2; grid-row:1; }
    .map-account { min-width:0; max-width:145px; padding:3px 9px 3px 3px; border:0; color:#172744; background:transparent; box-shadow:none; }
    .map-account .map-avatar { width:34px; height:34px; background:#146699; }
    .map-account .map-username { max-width:72px; }
    .map-account-dropdown { width:min(260px,calc(100vw - 24px)); }
    .map-nav-links,.map-nav-links.open { position:fixed; z-index:60; left:0; right:0; bottom:0; grid-column:auto; grid-row:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; box-sizing:border-box; gap:2px; padding:7px 10px calc(7px + env(safe-area-inset-bottom)); border:1px solid #ffffffed; border-radius:24px 24px 0 0; background:#fffffff0; box-shadow:0 -5px 20px #173d5c45; }
    .map-nav-links a { display:flex; flex-direction:column; gap:3px; min-width:0; padding:4px; color:#20385c; background:transparent; box-shadow:none; text-shadow:none; font-size:.75rem; }
    .map-nav-links a i { display:block; font-size:1.35rem; }
    .map-nav-links a.active { color:#0874de; background:transparent; box-shadow:none; }
    .map-mobile-profile { display:flex !important; }
    .map-page { padding:8px 9px 112px; }
    .map-heading { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); align-items:stretch; gap:8px; min-height:0; }
    .map-sign { align-self:stretch; width:100%; padding:10px 12px; border-width:5px; border-radius:13px; transform:rotate(-1deg); }
    .map-sign:hover { transform:rotate(-1deg) translateY(-2px); }
    .map-sign h1 { font-size:clamp(1.15rem,5.1vw,1.55rem); }
    .map-sign p { margin-top:4px; font-size:clamp(.67rem,3vw,.82rem); }
    .map-sign-hint { display:inline-flex; margin-top:5px; font-size:clamp(.56rem,2.5vw,.68rem); line-height:1; }
    .map-progress-panel { align-self:stretch; gap:7px; min-width:0; min-height:0; margin:0; padding:9px 10px; border-width:4px; border-radius:13px; }
    .map-progress-copy strong { margin-bottom:6px; font-size:clamp(.69rem,3vw,.84rem); line-height:1.15; }
    .map-progress-track { height:11px; }
    .map-progress-building { margin-top:5px; font-size:.56rem; line-height:1.15; }
    .map-progress-building i { display:none; }
    .map-progress-cheer { flex:none; }
    .map-progress-cheer i { font-size:1.45rem; }
    .map-progress-cheer span { display:none; }
    .map-actions { min-height:12px; margin:5px 0 9px; }
    .map-actions .map-continue { display:none; }
    .lesson-map { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:row; gap:66px 8px; padding:22px 3px 42px; }
    .map-thumb { width:min(24vw,102px); height:min(24vw,102px); max-width:none; border-width:3px; }
    .map-number { top:-14px; width:34px; height:34px; left:calc(50% - 17px); border-width:3px; font-size:.98rem; }
    .map-title { width:min(34vw,138px); min-width:0; min-height:37px; padding:5px 7px; font-size:clamp(.67rem,3vw,.78rem); }
    .map-state-icon { top:min(16.8vw,69px); left:calc(50% + 25px); width:27px; height:27px; border-width:2px; font-size:.76rem; }
    .map-current-label { margin-top:7px; padding:5px 16px; border:2px solid #fff2a7; color:#61320d; background:linear-gradient(#ffd76a,#f69a22); box-shadow:0 0 10px #ffe56e,0 3px 5px #56341673; font-size:.75rem; text-transform:none; }
    .map-route-glow { stroke-width:21; filter:blur(8px) drop-shadow(0 0 14px #fff19a); }
    .map-route-line { stroke-width:6; stroke-dasharray:6 14; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:0ms !important; animation-duration:0ms !important; scroll-behavior:auto !important; } }

/* Keep the level selector label visible in the compact two-column mobile header. */
@media(max-width:680px) {
    .map-sign > .map-sign-hint {
        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;
        align-items:center;
        justify-content:center;
        gap:5px;
        margin:7px auto 0;
        color:#fff0b8;
        font-size:clamp(.62rem,2.8vw,.75rem);
        line-height:1.1;
        text-transform:none;
    }
}