/* NaijaWaka's green-and-white trail. Numbered levels ascend through Nigerian places. */
.app.screen-map { max-width: none; padding: 0; background: #e3f4e8; }
body.on-map { background: #d7efdf; } body.on-map .sky { display: none; }
.screen-map .journey { max-width: 620px; margin: 0 auto; position: relative; background: #c6e9d0; overflow: clip; box-shadow: 0 0 80px #133f2420; }
.screen-map .jr-top { position: sticky; top: var(--hud-h,56px); padding: 10px 14px; margin: 0; background: #ffffffed; backdrop-filter: blur(12px); border-bottom: 2px solid #c6e3d0; box-shadow: 0 7px 18px #0d4e2520; z-index: 12; }
.map-title { flex: 1; text-align: center; }
.map-title small { display: block; font: 900 .62rem var(--body); letter-spacing: 2px; color: #3b7e54; }
.screen-map .jr-top h1 { font-size: clamp(1.1rem,4.2vw,1.55rem); color: #075a2f; text-shadow: none; margin: 1px 0; }
.screen-map .jr-top .btn { background: #0a7f42; color: white; box-shadow: 0 3px 0 #07532d; border: 2px solid #fff; font-size: .75rem; padding: 6px 10px; min-height: 40px; }
.screen-map .chapter { margin: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; filter: none; overflow: hidden; background: radial-gradient(ellipse at 0% 15%,#f5fff7 0 16%,transparent 16.2%),radial-gradient(ellipse at 105% 65%,#b2dfbf 0 23%,transparent 23.2%),linear-gradient(180deg,#d6eddd,#c2e5cd); border: none; position: relative; }
.screen-map .chapter:nth-of-type(even) { background: radial-gradient(ellipse at 100% 14%,#f5fff7 0 16%,transparent 16.2%),radial-gradient(ellipse at -5% 65%,#b2dfbf 0 23%,transparent 23.2%),linear-gradient(180deg,#d6eddd,#c2e5cd); }
.screen-map .chapter.far,.screen-map .chapter.collapsed { background: #c7e5d0; }
.screen-map .chap-head { margin: 0 20px; top: 0; border-radius: 0 0 22px 22px; padding: 14px 16px; border: 2px solid white; border-top: 0; background: #fffdf5f2; color: #0a5830; text-shadow: none; box-shadow: 0 5px 0 #95c8a5,0 12px 18px #0b4c2412; z-index: 2; gap: 12px; }
.screen-map .chap-head::after { display: none; }
.screen-map .chap-head h2 { font-size: clamp(1.2rem,5vw,1.7rem); line-height: 1.05; margin: 3px 0; }
.screen-map .chap-head small { font: 900 .58rem var(--body); letter-spacing: 1.1px; color: #437653; }
.screen-map .chap-head p { font-size: .73rem; margin: 3px 0 0; font-weight: 700; color: #578064; }
.screen-map .chap-count { color: #0c6f39; background: #e6f4e9; font-size: .85rem; padding: 6px 9px; }
.map-flag { display: flex; width: 36px; height: 25px; transform: rotate(-6deg); border-radius: 3px; overflow: hidden; border: 1px solid #c0d7c7; flex: none; }
.map-flag i { flex: 1; background: #09804a; }.map-flag i:nth-child(2) { background: #fff; }
.screen-map .path { margin: 0 8px; }
.screen-map .trail-base { stroke: #fff; stroke-width: 34px; stroke-dasharray: 0; filter: drop-shadow(0 5px 0 #8dc49f); }
.screen-map .trail-done { stroke: #4ebc7c; stroke-width: 14px; stroke-dasharray: 2 22; filter: none; }
.screen-map .node { width: 66px; height: 66px; z-index: 4; animation: none; border: 0; padding: 0; background: none; }
.screen-map .node-face { border: 4px solid white; font: 900 1.65rem var(--font); text-shadow: 0 2px 0 #00442355; transition: transform .16s; }
.screen-map .node.done .node-face { background: linear-gradient(#53d58c,#168850); box-shadow: 0 6px 0 #076636,0 10px 12px #0d4e2430; color: white; }
.screen-map .node.locked .node-face { background: linear-gradient(#edf8ef,#bfdac8); box-shadow: 0 6px 0 #8cb59b,0 9px 12px #14552b12; border-color: #f9fffb; color: #548265; text-shadow: none; }
.screen-map .node.current .node-face { color: white; background: linear-gradient(#36c97e,#087a40); border-color: white; box-shadow: 0 6px 0 #04572c,0 0 0 5px #5fcb8980,0 0 0 10px #ffffff60,0 14px 22px #1b874d35; animation: map-current 2.4s ease-in-out infinite; }
.screen-map .node.boss { width: 76px; height: 76px; }
.screen-map .node.boss .node-face { color: white; background: linear-gradient(#22985d,#07572f); border: 5px solid white; box-shadow: 0 7px 0 #034824,0 12px 18px #0d4e2430; font-size: 1.7rem; }
.screen-map .node.boss.locked .node-face { background: linear-gradient(#b9d4c1,#7da98e); color: #f4fff7; filter: none; box-shadow: 0 7px 0 #5a866a; }
.node-crown { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); color: #075f34; font-size: 1.55rem; text-shadow: 0 2px 0 white; }
.screen-map .marker { top: -49px; margin-left: -21px; width: 42px; height: 42px; font-size: 2rem; z-index: 5; }
.screen-map .marker svg { max-width: 42px; max-height: 42px; }
.screen-map .node-stars { color: #fff; font-size: 1rem; letter-spacing: 1px; text-shadow: 0 1px 0 #2e8651,0 2px 3px #206e40; bottom: -23px; }
.screen-map .node-label { display: none; max-width: 130px; white-space: normal; font-size: .73rem; padding: 5px 8px; color: #075a2f; z-index: 10; }
.screen-map .node:focus-visible .node-label { display: block; }
.screen-map .node:focus-visible { outline: 3px solid #116fe1; outline-offset: 9px; border-radius: 50%; }
.map-billboard { position: absolute; width: clamp(100px,29%,150px); z-index: 3; pointer-events: none; transform: rotate(-4deg); }
.map-billboard.on-left { left: 0; }.map-billboard.on-right { right: 0; transform: rotate(4deg); }
.billboard-face { position: relative; padding: 9px 8px 10px; background: #fff; border: 3px solid #187749; border-radius: 12px; box-shadow: 0 4px 0 #0c6038,0 9px 12px #174b2520; text-align: center; }
.billboard-face::before,.billboard-face::after { content: ''; position: absolute; top: calc(100% + 3px); width: 6px; height: 24px; background: linear-gradient(90deg,#0c6238,#4d996b); border-radius: 0 0 2px 2px; z-index: -1; }
.billboard-face::before { left: 19px; }.billboard-face::after { right: 19px; }
.billboard-kicker { display: block; font: 900 .48rem var(--body); letter-spacing: 1.1px; color: #639475; margin-bottom: 3px; }
.billboard-face strong { display: block; color: #086437; font: 900 clamp(.8rem,3vw,1rem)/1.1 var(--font); }
.billboard-face p { font: 800 clamp(.62rem,2.3vw,.78rem)/1.22 var(--body); color: #3a7350; margin: 5px 0 0; }
.map-tree { position: absolute; display: block; width: 40px; height: 55px; opacity: .75; z-index: 1; pointer-events: none; }
.map-tree::before { content: ''; display: block; width: 40px; height: 42px; background: #4ba56b; border: 4px solid #75c18d; border-radius: 55% 50% 45% 45%; box-shadow: inset 5px -5px 0 #1a804e30; }
.map-tree::after { content: ''; display: block; width: 7px; height: 17px; background: #2c7f4d; margin: -3px auto 0; border-radius: 0 0 4px 4px; }
.tree-1,.tree-3 { transform: scale(.75); }
.screen-map .chap-open { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.screen-map .chap-tap { display: block; padding: 10px; color: #34734b; font-size: .7rem; }
.screen-map .chapter.far { padding-bottom: 20px; }
.screen-map .jr-end { padding: 12px 20px 18px; background: #c8e7d2; color: #0a6938; font-size: .85rem; }
.screen-map .jr-end-ico { animation: none; font-size: 2rem; }
@keyframes map-current { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@media(max-width:360px) { .screen-map .jr-top { padding: 8px; gap: 5px; }.screen-map .jr-top .btn { font-size: .66rem; padding: 5px 7px; }.screen-map .chap-head { margin: 0 10px; padding: 12px; gap: 8px; }.map-flag { width: 28px; height: 21px; }.map-billboard { width: 100px; }.billboard-face { padding: 8px 5px; } }
@media(prefers-reduced-motion:reduce) { .screen-map .node.current .node-face { animation: none; } }