/* Island adventure map + overworld (TASK T-A; 22/10 new UI). Scene = smooth vector canvas baked at device resolution; nodes are real buttons on top.
   Trail positions: art units (--x, --y, --ox) x --s. World map: world/worldmap.js (.wm-*), CSS px. Text uses the UI font everywhere. */
.island-wrap{margin-top:16px}
.wmap-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0 0 12px}
.wmap-bar>span{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;background:#FFFFFF;color:#10233F;box-shadow:0 -2px 0 0 #2B6FC0,0 2px 0 0 #2B6FC0,-2px 0 0 0 #2B6FC0,2px 0 0 0 #2B6FC0}
.wmap-num,.wmap-count{font:700 15px/1 var(--lg-font,system-ui)}
.wmap-theme{font:600 15px/1.2 var(--lg-font, system-ui)}
.wmap-toggle{margin-left:auto;min-height:44px}
.wmap{display:grid;gap:16px;align-items:start}
@media(min-width:1100px){.wmap{grid-template-columns:minmax(0,1fr) 300px}}
.wmap-main{min-width:0}
.wmap-scroll{position:relative;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;background:#7EC4FF;
  box-shadow:0 -3px 0 0 var(--px-line,#16365F),0 3px 0 0 var(--px-line,#16365F),-3px 0 0 0 var(--px-line,#16365F),3px 0 0 0 var(--px-line,#16365F);margin:3px}
:root[data-theme="dark"] .wmap-scroll{background:#10233F}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .wmap-scroll{background:#10233F}}
.wmap-stage{position:relative;margin:0 auto;--s:2;--ox:0}
.wmap-scene{display:block}
.wmap-nodes{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.wmap-nodes>li{margin:0;padding:0;border:0;background:none;box-shadow:none}

/* ---- node buttons: >= 48 px targets, pixel stone tiles */
.wnode{position:absolute;left:calc((var(--ox) + var(--x)) * var(--s) * 1px);top:calc(var(--y) * var(--s) * 1px);width:48px;height:48px;margin:0;padding:0;border:0;background:none;
  transform:translate(-50%,-50%);display:grid;place-items:center;cursor:pointer;color:var(--bp-ink);-webkit-tap-highlight-color:transparent}
.wnode-tile{position:relative;width:36px;height:36px;display:grid;place-items:center;--pf:var(--gm-edge);background:var(--gm-stone);
  box-shadow:0 -3px 0 0 var(--pf),0 3px 0 0 var(--pf),-3px 0 0 0 var(--pf),3px 0 0 0 var(--pf),0 7px 0 0 var(--gm-edge-d),inset 0 3px 0 0 rgba(255,255,255,.55)}
.wnode-num{font:800 19px/1 var(--lg-font,system-ui)}
.wnode-bar{position:absolute;left:3px;right:3px;bottom:3px;height:4px;background:var(--gm-sky);transform-origin:left;transform:scaleX(var(--p,0))}
.wnode.is-current .wnode-tile{--pf:var(--gm-coral-dd);background:var(--gm-coral-d);color:#fff;box-shadow:0 -3px 0 0 var(--pf),0 3px 0 0 var(--pf),-3px 0 0 0 var(--pf),3px 0 0 0 var(--pf),0 7px 0 0 #4A1A17,inset 0 3px 0 0 rgba(255,255,255,.35)}
.wnode.is-in_progress .wnode-tile{color:var(--bp-tint-ink)}
.wnode.is-mastered .wnode-tile{--pf:var(--gm-sun-d);background:var(--gm-sun);color:#3A2600}
.wnode.is-done .wnode-tile{--pf:var(--gm-lime-d);background:#DDF7C4;color:#1E4A26}
.wnode.is-locked .wnode-tile{--pf:#8A90A0;background:#E3E6EC;color:#4A4F5C}
.wnode.cp .wnode-tile{background:#FFFFFF}
.wnode.cp-test .wnode-tile{--pf:var(--gm-coral-d);background:#10233F}
.wnode.cp.is-checkpoint[aria-label*="locked"] .wnode-tile{filter:grayscale(1);opacity:.85}
:root[data-theme="dark"] .wnode.is-locked .wnode-tile{background:#2A2D34;color:#C9CDD6}:root[data-theme="dark"] .wnode.is-done .wnode-tile{background:#1E4A26;color:#DDF7C4}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .wnode.is-locked .wnode-tile{background:#2A2D34;color:#C9CDD6}:root:not([data-theme="light"]) .wnode.is-done .wnode-tile{background:#1E4A26;color:#DDF7C4}}
.wnode.sel .wnode-tile{transform:translateY(-3px);outline:3px solid #FFFFFF;outline-offset:4px}
.wnode:focus-visible{outline:none}.wnode:focus-visible .wnode-tile{outline:3px solid var(--bp-focus,#0B1626);outline-offset:4px}
.wmap-stage.s3 .wnode{width:56px;height:56px}.wmap-stage.s3 .wnode-tile{width:42px;height:42px}
.wbadge{position:absolute;top:-4px;width:20px;height:20px;display:grid;place-items:center;color:#fff;box-shadow:0 0 0 2px #10233F}
.wbadge.rev{right:-4px;background:#1A66D9}.wbadge.asg{left:-4px;background:#D9503F}
.wnode-flag{position:absolute;right:-16px;top:-20px;width:16px;height:20px;pointer-events:none;transform-origin:left bottom}
.wnode-flag svg{display:block}
@media(prefers-reduced-motion:no-preference){.wnode-flag{animation:wflag 1.2s steps(2,end) infinite}.wnode .wnode-tile{transition:transform 120ms var(--bp-ease,ease)}}
@keyframes wflag{50%{transform:scaleY(.85) translateY(2px)}}

/* ---- avatar standing on / walking between nodes (moved with transform only) */
.wmap-avatar{position:absolute;left:0;top:0;pointer-events:none;z-index:2;opacity:0;will-change:transform}
.wmap-avatar.ready{opacity:1}
.wmap-avatar canvas{display:block}
.wmap-avatar.flip canvas{transform:scaleX(-1)}
.wmap-hint{display:flex;align-items:center;gap:6px;margin:10px 4px 0}.wmap-hint[hidden]{display:none}

/* ---- selection card */
.wcard{display:flex;flex-direction:column;gap:12px;min-height:220px}
.wcard.busy{opacity:.65}
.wc-eyebrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wc-state{font:600 13px/1.2 var(--lg-font,system-ui);padding:3px 8px;background:var(--bp-paper-2);color:var(--bp-ink-2)}
html[data-skin] .wcard .wc-title{margin:0;font:700 21px/1.25 var(--lg-font,system-ui);-webkit-font-smoothing:auto;letter-spacing:0}
.wc-prog{display:flex;align-items:center;gap:12px}.wc-line{margin:0;color:var(--bp-ink-2)}
.wc-chips{display:flex;flex-wrap:wrap;gap:8px}
.wc-acts{display:flex;flex-direction:column;gap:10px;margin-top:auto}.wc-acts .btn{justify-content:center;min-height:48px}
@media(forced-colors:active){.wnode-tile,.wbadge{border:2px solid CanvasText;box-shadow:none}.wnode.sel .wnode-tile{outline-color:Highlight}}

/* ---- overworld #/world and the home preview */
.world-wrap .wmap-stage{--s:2}
.wisle{position:absolute;left:calc(var(--x) * var(--s) * 1px);top:calc(var(--y) * var(--s) * 1px);transform:translate(-50%,-50%);width:132px;min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:4px;text-decoration:none;color:#10233F;padding-bottom:0}
.wisle-name{background:#FFFFFF;color:#10233F;font:500 13px/1.25 var(--lg-font,system-ui);padding:3px 7px;text-align:center;box-shadow:0 0 0 2px #16365F;max-width:132px}
.wisle.is-current .wisle-name{background:#A63A2E;color:#FFFFFF}
.wisle.is-locked{cursor:default}.wisle.is-locked .wisle-name{background:#E3E6EC;color:#33425F}
.wisle:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px}
.isl-preview{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}

.isl-preview .wc-acts{flex-direction:row;flex-wrap:wrap;margin-top:8px}
@media(max-width:600px){.isl-preview{grid-template-columns:1fr}}

/* ---- wider map + lesson names (15/10): map uses the full width, selection card sits below as a strip, every place shows its name */
.wmap{grid-template-columns:minmax(0,1fr)!important}
.wcard{flex-direction:row;flex-wrap:wrap;align-items:center;min-height:0;gap:12px 28px;padding:16px 24px}
.wcard .wc-eyebrow{flex:0 0 auto}.wcard .wc-title{flex:1 1 240px}
.wcard .wc-prog{flex:0 1 auto}.wcard .wc-chips{flex:0 0 auto}
.wcard .wc-acts{flex-direction:row;flex-wrap:wrap;margin:0 0 0 auto}.wcard .wc-acts .btn{min-width:150px}
.wnode-name{position:absolute;top:calc(100% - 4px);left:50%;transform:translateX(-50%);z-index:3;width:max-content;max-width:104px;padding:2px 6px;text-align:center;font:600 12.5px/1.2 var(--lg-font,system-ui);letter-spacing:0;-webkit-font-smoothing:antialiased;color:var(--bp-ink,#10233F);background:var(--bp-glass-solid,#fff);box-shadow:0 -2px 0 0 var(--px-line,#16365F),0 2px 0 0 var(--px-line,#16365F),-2px 0 0 0 var(--px-line,#16365F),2px 0 0 0 var(--px-line,#16365F);pointer-events:none}
.wmap-stage.s3 .wnode-name{max-width:124px;font-size:13.5px;top:calc(100% - 2px)}
.wnode.is-locked .wnode-name{opacity:.78}
.wnode.sel .wnode-name{background:#FFC94A;color:#3A2600;font-weight:700}
@media(max-width:560px){.wnode-name{font-size:11.5px;max-width:84px}}
/* the selection card stays reachable at the bottom of the viewport while the (taller) map is on screen */
.wmap>.wcard{position:static}
@media(min-width:821px){.wmap>.wcard{position:static}}   /* 1/11: the trail is a short horizontal strip now: the card sits under it, never over it */

/* ---- trail map (vertical, scrolls down the page): lesson -> BOSS -> lesson ... */
.wmap-scroll{overflow-y:visible}
.wmap-stage.trail{margin:0 auto}
.wnode.boss{width:56px;height:56px}
.wnode.boss .wnode-tile{width:40px;height:40px;--pf:#4A1A17;background:#C8402F;color:#fff;box-shadow:0 -3px 0 0 var(--pf),0 3px 0 0 var(--pf),-3px 0 0 0 var(--pf),3px 0 0 0 var(--pf),0 7px 0 0 #2A0E0C,inset 0 3px 0 0 rgba(255,255,255,.35)}
.wnode.boss.is-ready .wnode-tile{background:#FF6B5A}
.wnode.boss.is-locked .wnode-tile{--pf:#8A90A0;background:#E3E6EC;color:#4A4F5C;box-shadow:0 -3px 0 0 var(--pf),0 3px 0 0 var(--pf),-3px 0 0 0 var(--pf),3px 0 0 0 var(--pf),0 7px 0 0 #5B6070}
.wnode.boss.is-defeated .wnode-tile{--pf:var(--gm-sun-d);background:var(--gm-sun);color:#3A2600;box-shadow:0 -3px 0 0 var(--pf),0 3px 0 0 var(--pf),-3px 0 0 0 var(--pf),3px 0 0 0 var(--pf),0 7px 0 0 #7A5400}
.wmap-stage.s3 .wnode.boss{width:64px;height:64px}.wmap-stage.s3 .wnode.boss .wnode-tile{width:48px;height:48px}
.wnode.boss .wnode-name{background:#FFE3DE;color:#4A1A17}
.wc-state.is-ready{background:#FFE3DE;color:#4A1A17}.wc-state.is-defeated{background:#FFC94A;color:#3A2600}
/* selection card stays reachable on phones too (above the bottom nav) */
@media(max-width:820px){.wmap>.wcard{position:static;z-index:6;padding:10px 14px;gap:8px 14px}.wmap>.wcard .wc-prog,.wmap>.wcard .wc-chips{display:none}.wmap>.wcard .wc-acts .btn{min-width:0;min-height:44px}.wmap>.wcard .wc-title{font-size:17px;flex-basis:140px}}

/* ---- 22/10 new UI (old-UI sweep): smooth sky-glass frame + round node tiles on the trail; no pixel box-shadow borders, no pixel font ---- */
.wmap-scroll{margin:0;border-radius:24px;overflow-x:auto;background:#CDEBFF;box-shadow:inset 0 0 0 1px rgba(22,54,95,.14),0 10px 30px rgba(22,54,95,.12)}
.wmap-bar>span{border-radius:999px;box-shadow:inset 0 0 0 1px rgba(22,54,95,.16),0 4px 12px rgba(22,54,95,.1)}
.wnode-tile{border-radius:50%;background:#FFFFFF;color:#10233F;box-shadow:0 0 0 3px #1D3157,0 5px 0 3px #1D3157,inset 0 -4px 0 rgba(22,54,95,.12)}
.wnode.is-current .wnode-tile{background:#1A66D9;color:#fff;box-shadow:0 0 0 3px #1D3157,0 5px 0 3px #1D3157,0 0 0 9px rgba(26,102,217,.28)}
.wnode.is-mastered .wnode-tile{background:#FFD84D;color:#3A2600;box-shadow:0 0 0 3px #1D3157,0 5px 0 3px #1D3157}
.wnode.is-done .wnode-tile{background:#DDF7C4;color:#1E4A26;box-shadow:0 0 0 3px #1D3157,0 5px 0 3px #1D3157}
.wnode.is-locked .wnode-tile{background:#E8EDF4;color:#4A5770;box-shadow:0 0 0 3px #8A97AD,0 5px 0 3px #8A97AD}
.wnode.cp-test .wnode-tile{background:#10233F;color:#fff}
.wnode.boss .wnode-tile,.wnode.boss.is-ready .wnode-tile{border-radius:50%;background:#C8402F;color:#fff;box-shadow:0 0 0 3px #1D3157,0 5px 0 3px #1D3157}
.wnode.boss.is-locked .wnode-tile{background:#E8EDF4;color:#4A5770;box-shadow:0 0 0 3px #8A97AD,0 5px 0 3px #8A97AD}
.wnode.boss.is-defeated .wnode-tile{background:#FFD84D;color:#3A2600;box-shadow:0 0 0 3px #1D3157,0 5px 0 3px #1D3157}
.wnode-bar{left:8px;right:8px;bottom:5px;border-radius:2px;background:#4FA8FF}
.wnode-name{border-radius:10px;box-shadow:0 0 0 1.5px rgba(29,49,87,.35),0 4px 10px rgba(22,54,95,.14)}
.wbadge{border-radius:50%;box-shadow:0 0 0 2px #fff}
.wc-state{border-radius:999px}
@media(forced-colors:active){.wnode-tile{box-shadow:none}}

/* ---- world map v2 (world/worldmap.js): the sea map, region chips, section stops, game gates, the hero ---- */
.wm-legend{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.wm-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.82);color:#10233F;font:600 14px/1 var(--lg-font,system-ui);box-shadow:inset 0 0 0 1px rgba(22,54,95,.14)}
.wm-chip i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 2px #1D3157}
.wm-wrap{position:relative;width:100%;border-radius:24px;overflow:hidden;background:#CDEBFF;box-shadow:inset 0 0 0 1px rgba(22,54,95,.14),0 10px 30px rgba(22,54,95,.12)}
.wm-wrap.mini{border-radius:18px}
.wm-stage{position:relative}
.wm-scene{position:absolute;inset:0}
.wm-nodes{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.wm-nodes>li{margin:0;padding:0}
.wm-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;min-width:56px;min-height:56px;text-decoration:none;color:#10233F;z-index:2}
.wm-ring{position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 3px #1D3157,0 5px 0 3px #1D3157}
.wm-ring .ring-wrap{display:grid;place-items:center}.wm-ring .rt{font:800 17px/1 var(--lg-font,system-ui);color:#10233F}
.wm-done{position:absolute;inset:0;display:grid;place-items:center;color:#1A6E43}
.wm-lock{display:grid;place-items:center;color:#4A5770}
.wm-node.is-locked .wm-ring{background:#E8EDF4;box-shadow:0 0 0 3px #8A97AD,0 5px 0 3px #8A97AD}
.wm-node.is-current .wm-ring{box-shadow:0 0 0 3px #1D3157,0 5px 0 3px #1D3157,0 0 0 10px rgba(26,102,217,.3)}
.wm-name{display:flex;flex-direction:column;align-items:center;max-width:150px;padding:4px 10px;border-radius:12px;text-align:center;background:rgba(255,255,255,.92);box-shadow:0 0 0 1.5px rgba(29,49,87,.3),0 4px 12px rgba(22,54,95,.14);font:500 13px/1.25 var(--lg-font,system-ui)}
.wm-name b{font-weight:700}.wm-name small{font-size:12px;color:#3A4A6B}
.wm-node.is-current .wm-name{background:#1A66D9;color:#fff}.wm-node.is-current .wm-name small{color:#E3F0FF}
.wm-node.is-locked{cursor:default}.wm-node.is-locked .wm-name{background:rgba(255,255,255,.75);color:#33425F}
a.wm-node:hover .wm-ring{transform:translateY(-2px)}a.wm-node:focus-visible{outline:none}a.wm-node:focus-visible .wm-ring{outline:3px solid var(--bp-focus,#0B1626);outline-offset:6px}
@media(prefers-reduced-motion:no-preference){.wm-ring{transition:transform 140ms ease}}
.wm-gate{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:2px;min-width:44px;min-height:44px;z-index:1}
.wm-gate .ui-ic{width:40px!important;height:40px!important;filter:drop-shadow(0 3px 4px rgba(16,35,63,.25))}
.wm-gate-t{padding:2px 8px;border-radius:999px;background:#FFF6D6;color:#5A4200;font:700 12px/1.2 var(--lg-font,system-ui);white-space:normal;text-align:center;max-width:130px;box-shadow:0 0 0 1.5px rgba(122,90,0,.35)}
.wm-gate-v{font:600 10.5px/1.15 var(--lg-font,system-ui);color:#35506f;white-space:normal;text-align:center;max-width:120px}   /* 29/10 QA-A (F19): short labels that wrap, never cut */
.wm-gate.on .wm-gate-t{background:#E6F7EA;color:#14532D;box-shadow:0 0 0 1.5px rgba(20,83,45,.3)}
.wm-hero{position:absolute;transform:translate(-50%,-100%);pointer-events:none;z-index:3;opacity:0}
.wm-hero.ready{opacity:1}.wm-hero canvas{display:block}
.wm-stage.mini .wm-ring{width:48px;height:48px}.wm-stage.mini .wm-name{font-size:12px;max-width:118px;padding:3px 8px}
.wm-stage.mini .wm-name b{font-weight:600}
@media(max-width:560px){.wm-name{max-width:130px;font-size:12.5px}.wm-gate-t,.wm-gate-v{display:none}}
:root[data-theme="dark"] .wm-wrap,:root[data-theme="dark"] .wmap-scroll{background:#10233F}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .wm-wrap,:root:not([data-theme="light"]) .wmap-scroll{background:#10233F}}
.isl-preview{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
@media(max-width:760px){.isl-preview{grid-template-columns:1fr}}
.wm-stage.mini .wm-node:not(.is-current) .wm-name{display:none}

/* ---- World Study merge (28/10): subject + English track chips, bilingual stop names, "Start here" mark, English unit page ---- */
.wm-tracks{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.wm-track{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(22,54,95,.2);background:rgba(255,255,255,.82);color:#10233F;font:700 15px/1 var(--lg-font,system-ui);cursor:pointer}
.wm-track[aria-pressed=true]{background:#1A66D9;border-color:#1A66D9;color:#fff}.wm-track small{font-weight:600;opacity:.75;margin-left:4px}
.wm-vi-h{font-size:.6em;font-weight:600;color:var(--bp-muted,#3A4A6B);white-space:nowrap}
.wm-name small.wm-vi{font-size:11.5px;color:#4A5770;font-style:normal}.wm-node.is-current .wm-name small.wm-vi{color:#E3F0FF}
.wm-name small.wm-start{font-weight:800;font-size:12.5px;color:#fff;background:#FF7A3D;border-radius:999px;padding:1px 8px;margin-top:2px}
.wm-wrap.mini .wm-name small{display:none}
.wc-vi{margin:-4px 0 4px}
.crumb a{min-height:32px;display:inline-flex;align-items:center;gap:4px}
@media(max-width:560px){.wm-track{padding:0 12px;font-size:14px}.wm-vi-h{display:block;font-size:.55em}}
[data-testid=world-body] .wm-legend,[data-testid=world-body] .wm-tracks{margin:0}[data-testid=world-body] .island-wrap{margin-top:0}
.page-head>.jh-seg{align-self:flex-start;width:max-content}
.wm-name small.wm-start{white-space:nowrap;font-size:12px;padding:2px 8px}
/* 29/10: stops that fix a weak spot found by the 360 test (flow3/test_result.js) */
.wm-node .wm-name small.wm-fix{font-weight:800;font-size:12px;color:#b4232a!important;background:#fff1f0!important;border:1.5px solid #e5484d;border-radius:999px;padding:1px 8px;margin-top:2px;white-space:normal;line-height:1.25}