/* A estrada é um traço no caderno; a cor da região entra como lápis de cor. */
.map-screen{--map-accent:#79b7ba;position:relative;display:flex;flex-direction:column;width:100%;min-height:0;overflow:hidden;background:var(--bg)}
.map-header{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;padding:16px 28px;border-bottom:2px solid var(--ink);background:linear-gradient(100deg,color-mix(in srgb,var(--map-accent) 18%,var(--paper)),var(--paper))}
.map-id{display:flex;flex-direction:column;min-width:0}.map-eyebrow{font-size:16px;color:var(--muted)}.map-header h2{font:700 35px/1 var(--display);margin-top:3px}.map-meta{display:flex;align-items:center;gap:12px;padding-top:8px;font-size:16px}.map-meta>span:first-child{padding:3px 8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--edge)}.map-meta b{color:var(--ink);font-weight:400}.map-meta i{font-style:normal;margin:0 5px;color:var(--muted)}
.map-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}.map-tools>button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:43px;padding:8px 14px;font-size:19px;white-space:nowrap;box-shadow:var(--shadow)}.map-tools-slot{display:flex;gap:7px;margin-right:6px}.map-tools-slot .icon-btn{width:38px;height:40px}.map-tools-slot svg{width:18px;height:18px}.map-tool{background:#e2e8f2}.map-play{background:var(--hatch),var(--yellow);border:2px solid var(--ink)}.map-play>span{font-size:13px}.map-return{background:#f0d6d2;border-color:var(--coral);color:#92303e}
.map-viewport{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ink) var(--bg);touch-action:pan-y;position:relative;overflow-anchor:none;outline-offset:-4px!important}.map-world{position:relative;overflow:hidden;overflow-anchor:none;background:var(--rule),var(--bg)}.map-terrain{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 6%,#cc647765 6%,#cc647765 calc(6% + 2px),transparent calc(6% + 2px))}.map-lane{position:absolute;inset:0;left:50%;transform:translateX(-50%);width:min(100%,620px)}
.map-road{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.map-road path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.road-shadow{stroke:#293e9833;stroke-width:43;transform:translate(3px,3px)}.road-edge{stroke:var(--ink);stroke-width:40}.road-surface{stroke:#ebe7d5;stroke-width:36}.road-dashes{stroke:#5669a9;stroke-width:2;stroke-dasharray:5 11}
.map-stop{position:absolute;transform:translate(-50%,-50%);z-index:2;width:72px;height:66px;text-align:center}.map-node{display:flex;align-items:center;justify-content:center;position:relative;width:66px;height:59px;margin:auto;border:2px solid var(--ink);border-radius:48% 52% 46% 54% / 53% 44% 56% 47%;background:var(--paper);box-shadow:3px 4px 0 #293e983b;font:700 31px var(--display);color:var(--ink)}.map-node:disabled{opacity:1;background:#eeebdf;color:#747b9b;border-color:#8c94b2;box-shadow:2px 3px 0 #a2a7b348}.map-node:disabled svg{position:absolute;bottom:-4px;right:-3px;width:21px;height:21px;padding:3px;background:var(--paper);border:1px solid #8c94b2;border-radius:50%;color:#747b9b}.map-node:hover:not(:disabled){transform:rotate(-5deg);background-color:#ffe894}.is-complete .map-node{background:var(--hatch),#f5dea0;color:#79541b;border-color:#9a7438}.is-current .map-node{width:75px;height:66px;background:var(--hatch),var(--yellow);border:3px solid var(--ink);outline:2px dashed var(--coral);outline-offset:5px;box-shadow:3px 4px 0 #293e9840}.map-node-stars{position:absolute;bottom:-21px;left:50%;transform:translateX(-50%);font-size:22px;white-space:nowrap;letter-spacing:1px;color:#956915;background:var(--bg);line-height:1}
.map-you{position:absolute;top:-70px;left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:5px;width:120px;pointer-events:none}.map-you i{width:23px;height:23px;border:2px solid var(--coral);border-radius:48%;background:repeating-linear-gradient(135deg,#e7a2a3 0 2px,#f8d3ce 2px 4px);box-shadow:2px 2px 0 #b8445230}.map-you>span{font:18px var(--display);background:var(--paper);padding:2px 8px;border:1px solid var(--ink);border-radius:var(--edge);white-space:nowrap}.map-you::after{content:'';width:6px;height:6px;border:solid var(--ink);border-width:0 1px 1px 0;transform:rotate(45deg);margin-top:-9px;background:var(--paper)}.map-milestone{position:absolute;right:-15px;top:-33px;font-size:37px;color:var(--coral);z-index:-1}.map-more,.map-origin{position:absolute;left:50%;transform:translateX(-50%);color:var(--muted);font-size:17px;text-align:center;width:max-content;max-width:95%;z-index:1;background:var(--bg);padding:0 8px}.map-more{display:flex;align-items:center;gap:9px}.map-more b{font-size:26px;font-weight:400}
.map-decoration{position:absolute;width:54px;height:90px;pointer-events:none;color:#50755c;transform:rotate(-3deg)}.map-decoration svg{width:100%;height:100%;overflow:visible}.map-decoration.crystals{color:#756092;height:65px;transform:rotate(4deg)}.map-spark{position:absolute;color:var(--muted);font-size:24px;pointer-events:none}.mini-journey{height:292px;position:relative}.mini-journey>svg{position:absolute;width:100%;height:290px}.mini-journey>svg path{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:4 5}.mini-node{position:absolute;transform:translate(-50%,-50%);width:35px;height:32px;border-radius:50%;background:var(--paper);font:700 20px var(--display)}.mini-node.active{background:var(--yellow);border:2px solid var(--ink)}.mini-node small{position:absolute;bottom:-15px;left:13px;color:#956915;font-size:13px}.mini-node:active:not(:disabled){transform:translate(-50%,calc(-50% + 2px))}
@media(max-width:1050px){.map-header{padding:12px 18px}.map-header h2{font-size:29px}.map-tools{gap:7px}.map-tools>button{font-size:17px;padding:7px 10px}}
@media(max-width:820px){.map-tools{width:100%;margin-left:0}.map-tools>button{flex:1}.map-tools-slot{margin-right:auto}.map-header h2{font-size:28px}.map-meta{font-size:14px;padding-top:5px}.map-eyebrow{font-size:14px}.map-tools-slot .icon-btn{width:33px;height:38px}}
@media(max-width:500px){.map-header{padding:12px}.map-tools{gap:7px}.map-tools-slot{width:100%;justify-content:flex-end}.map-tools>button{font-size:16px;padding:7px}.map-tools-slot .icon-btn{width:34px;height:34px}.map-more,.map-origin{font-size:15px}}
@media(max-width:970px) and (orientation:landscape){.map-header{gap:6px 12px;padding:8px 12px}.map-id{flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap}.map-eyebrow{display:none}.map-header h2{font-size:25px}.map-meta{padding:0;font-size:13px}.map-tools{width:100%;gap:7px}.map-tools>button{min-height:34px;padding:5px 8px;font-size:16px}.map-tools-slot .icon-btn{width:31px;height:33px}.map-tools-slot{width:auto}}

/* Controle: a fase escolhida no D-pad ganha o mesmo pontilhado da fase atual. */
.map-node:focus{outline:2px dashed var(--coral);outline-offset:5px}