/* Brass compass and forest-green atlas, layered after the responsive HUD. */
#game .map-card{top:12px;right:18px;bottom:auto;width:204px;padding:0;background:none;border:0;box-shadow:none;z-index:var(--z-widget)}
#game .map-card .section-title{justify-content:center;margin:0 5px 7px;padding:6px 10px;min-height:30px;border:1px solid #a88c53;border-radius:4px;background:linear-gradient(120deg,#16261ded,#091611eb);color:#f0dfb3;font:12px "Noto Sans Thai",Tahoma,serif;letter-spacing:0;text-align:center}
.minimap-frame{position:relative;aspect-ratio:1;border-radius:50%;padding:5px;background:linear-gradient(135deg,#ead297,#6a542c 25%,#c7a96a 52%,#514329 76%,#debf80);box-shadow:0 0 0 2px #091411,0 5px 18px #0008,inset 0 0 0 1px #f9e1a34d}
#minimap-open{display:block;width:100%;height:100%;padding:0;border-radius:50%;border:2px solid #19281c;background:#172820;overflow:hidden}
#game .map-card canvas{width:100%;height:100%;border-radius:50%}
#minimap-open:hover{filter:brightness(1.12)}
.minimap-north{position:absolute;top:7px;left:50%;transform:translateX(-50%);pointer-events:none;color:#ffedbe;font:bold 15px Georgia;text-shadow:0 2px 3px #000}
.map-coordinates{display:block;width:max-content;max-width:100%;margin:7px auto 0;border-radius:5px;padding:3px 10px;background:#07120cbb;font:12px "Noto Sans Thai",Tahoma;color:#f6edd5;pointer-events:none;white-space:nowrap;font-variant-numeric:tabular-nums}
#game #online-population{display:flex;order:3;align-items:center;justify-content:center;gap:6px;width:max-content;max-width:100%;box-sizing:border-box;margin:5px auto 0;padding:5px 9px;min-height:30px;border:1px solid #a88c5359;border-radius:5px;background:#091611e8;color:#c7c4ae;font:11px "Noto Sans Thai",Tahoma,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:auto;cursor:pointer}
#game #online-population:hover{border-color:#cbb477;background:#1b3024}
#game #online-population:focus-visible{outline:2px solid #f4d98e;outline-offset:3px}
#game #online-roster{width:min(460px,calc(100vw - 24px));max-height:80dvh;box-sizing:border-box;padding:18px;border:1px solid #a88c53;border-radius:10px;background:linear-gradient(130deg,#21382b,#0d1e18);color:#eee3c7}
#online-roster::backdrop{background:#030d0b99;backdrop-filter:blur(4px)}
#online-roster header{display:flex;align-items:center;justify-content:space-between;gap:12px}
#online-roster h2{font-size:18px;margin:0}
#online-roster>p{font-size:12px;color:#afc7ad}
#online-roster ul{list-style:none;padding:0;margin:0}
#online-roster li{padding:12px 0;border-top:1px solid #a88c5333;overflow-wrap:anywhere}
#online-roster li>span{margin-left:8px;color:#a5dc91;font-size:11px}
#online-roster li p{margin:5px 0 0;font-size:12px;color:#c4cbb7;line-height:1.7}
#online-population::before{content:'';width:6px;height:6px;flex-shrink:0;border-radius:50%;background:#8b928c}
#game #online-population.is-connected{color:#d7ebcf}
#online-population.is-connected::before{background:#8bdc7b;box-shadow:0 0 5px #8bdc7b66}
#map-expand{position:absolute;right:0;bottom:0;width:44px;height:44px;border:1px solid #cbb477;border-radius:50%;background:#101e18ee;color:#f6e5bb;font:30px Georgia;padding:0;box-shadow:0 2px 8px #0009}
#map-expand kbd{position:absolute;bottom:-3px;right:-4px;font:11px "Noto Sans Thai",Tahoma;border:1px solid #a58c57;border-radius:3px;padding:2px 4px;background:#101a15;color:#f5e8c9}
/* Separate generated jade-and-brass medallions; no shared panel. */
#game .hud-menu{right:236px;top:42px;flex-direction:row;align-items:center;gap:6px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
#game .hud-menu button,#game .hud-menu #travel-btn{position:relative;display:block;flex-shrink:0;width:50px;height:50px;min-width:0;padding:0;border:0;border-radius:50%;background:none;color:#f1e2bc;box-shadow:none;backdrop-filter:none;transition:filter .15s,transform .15s}
#game .hud-menu .hud-menu-art{display:block;width:100%;height:100%;background-image:url('/games/main/assets/ui/menu-medallions-v1/menu-atlas.webp');background-size:400% 200%;background-repeat:no-repeat;pointer-events:none}
#character-btn{--menu-x:0%;--menu-y:0%}#skills-btn{--menu-x:33.333333%;--menu-y:0%}#bag-btn{--menu-x:66.666667%;--menu-y:0%}#travel-btn{--menu-x:100%;--menu-y:0%}#catalog-btn{--menu-x:0%;--menu-y:100%}#reset-hud{--menu-x:33.333333%;--menu-y:100%}#help-btn{--menu-x:66.666667%;--menu-y:100%}
#game .hud-menu .hud-menu-art{background-position:var(--menu-x) var(--menu-y)}
#game .hud-menu .hud-menu-label{position:absolute;top:100%;left:50%;transform:translateX(-50%);font:10px "Noto Sans Thai",Tahoma,system-ui,sans-serif;white-space:nowrap;line-height:1.2;text-shadow:0 1px 3px #000,0 0 4px #000;pointer-events:none}
#game .hud-menu kbd{position:absolute;top:2px;right:0;padding:1px 3px;border:1px solid #a98c50;border-radius:3px;background:#101c16;color:#ddc68e;font:8px "Noto Sans Thai",Tahoma,system-ui,sans-serif;pointer-events:none}
#game .hud-menu button:hover{background:none;filter:brightness(1.2);transform:translateY(-2px)}
#game .hud-menu button:active{transform:translateY(1px);filter:brightness(.92)}
#game .hud-menu button:focus-visible{outline:2px solid #f4d98e;outline-offset:0;background:none}
#game .hud-menu .hud-menu-utility{width:50px;height:50px}
#game .hud-menu .hud-menu-badge{position:absolute;top:0;left:0;width:11px;height:11px;border:2px solid #ffe3a3;border-radius:50%;background:#ed343e;box-shadow:0 1px 4px #000a;pointer-events:none;z-index:1}
#game .hud-menu .hud-menu-utility .hud-menu-label{display:block}
@media(prefers-reduced-motion:reduce){#game .hud-menu button{transition:none}#game .hud-menu button:hover,#game .hud-menu button:active{transform:none}}
#map-dialog{width:min(1160px,94vw);height:min(710px,90dvh);max-height:92dvh;padding:16px;overflow:hidden;border:1px solid #b3975f;border-radius:4px;background:radial-gradient(ellipse at top,#263c30e8,#0d1e18f5 70%);box-shadow:0 0 0 3px #13201b,0 0 0 4px #78683e,0 25px 100px #000b;color:#eee3c7}
#map-dialog[open]{display:flex;flex-direction:column}
#map-dialog::backdrop{background:#030d0b99;backdrop-filter:blur(5px)}
.map-heading{position:relative;min-height:34px;margin-bottom:12px;text-align:center;flex-shrink:0}
.map-heading h2{margin:0;font:24px Georgia,"Noto Sans Thai",Tahoma,serif;color:#f1dfb2}
#map-close{position:absolute;top:-5px;right:0;display:flex;flex-direction:column;align-items:center;border:0;background:none;font:32px Georgia;color:#dbc294;line-height:1}
#map-close kbd{font:10px "Noto Sans Thai",Tahoma;border:1px solid #9a865b;border-radius:2px;padding:2px 4px}

.map-layout{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:12px;flex:1;min-height:0}
.map-viewport{position:relative;min-width:0;min-height:0;overflow:hidden;border:1px solid #927b49;border-radius:5px;background:#172820;box-shadow:inset 0 0 40px #0005}
#large-map{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#large-map:active{cursor:grabbing}
.map-compass{position:absolute;top:14px;left:17px;text-align:center;color:#e8d6a8;pointer-events:none;line-height:1;font:18px Georgia;text-shadow:0 1px 3px #000}
.map-sidebar{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto}
.map-legend,.map-area{border:1px solid #786e49;border-radius:5px;padding:14px;background:#0a1814a3}
.map-sidebar h3{font-size:14px;color:#edd5a4;margin:0 0 12px;font-weight:normal}
.map-legend p{display:flex;align-items:center;gap:12px;margin:10px 0;font-size:12px}
.map-legend span{width:20px;text-align:center;font-size:20px;line-height:1}
.legend-player{color:#f6f3df}.legend-npc{color:#36c9d2}.legend-quest,.legend-pin{color:#f6ce54}.legend-portal{color:#66f5ff}.legend-enemy{color:#c77665}
.map-area p{margin:4px 0 12px;color:#99cf88;font-size:12px}.map-area small{display:block;font-size:11px;color:#c4b994;line-height:1.6}.map-area button{margin-top:8px;font-size:11px;padding:5px 10px}
.map-tools{margin-top:auto;display:flex;justify-content:space-between;gap:10px}
.map-zoom{display:flex;align-items:center;border:1px solid #786e49;border-radius:5px;background:#0a1814}
.map-tools button{width:36px;height:36px;padding:0;background:#101f18;border:1px solid #786e49;font-size:24px;color:#e9d6af}
.map-tools button:disabled{opacity:.4}.map-zoom output{min-width:64px;text-align:center;font-size:13px}#map-center{width:40px;height:40px;border-radius:4px;font-size:28px}
.map-footer{display:flex;justify-content:space-between;gap:10px;padding-top:12px;color:#c7c4ae;font-size:11px;flex-shrink:0}.map-footer kbd{padding:3px 6px;border:1px solid #766b4e;border-radius:3px}

#map-dialog button:focus-visible,#minimap-open:focus-visible,#map-expand:focus-visible{outline:2px solid #f4d98e;outline-offset:3px}

@media(max-width:750px),(pointer:coarse) and (max-width:1100px){
 #game .map-card{top:calc(env(safe-area-inset-top,0px) + 64px);right:calc(env(safe-area-inset-right,0px) + 14px);width:132px}
 #game .map-card .section-title{font-size:9px;padding:4px;min-height:24px}.map-coordinates{font-size:10px;padding:2px 6px}
 #game .hud-menu{top:calc(env(safe-area-inset-top,0px) + 8px);right:calc(env(safe-area-inset-right,0px) + 14px);gap:4px;padding:0;border-radius:0}
 #game .hud-menu button,#game .hud-menu #travel-btn,#game .hud-menu .hud-menu-utility{width:38px;height:38px;padding:0}
 #game .hud-menu .hud-menu-label{display:block;font-size:9px}
 #game .hud-menu kbd{display:none}

 #map-dialog{width:calc(100% - 24px);height:calc(100dvh - 32px);max-height:calc(100dvh - 32px);padding:12px}
 .map-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(120px,1fr) auto;gap:8px}.map-sidebar{display:grid;grid-template-columns:1fr auto;gap:8px;overflow:visible}.map-legend{display:none}.map-area{padding:8px}.map-area h3{font-size:12px;margin:0 0 3px}.map-area p{font-size:10px;margin:0 0 3px}.map-tools{align-self:center;margin:0;flex-wrap:wrap;justify-content:end;width:140px}.map-tools button{min-height:40px;width:36px}.map-zoom output{min-width:58px}
.map-footer{font-size:9px;line-height:1.5}.map-footer span:last-child{white-space:nowrap}
}
@media(max-height:500px) and (min-width:650px){.map-layout{grid-template-columns:minmax(0,1fr) 170px;grid-template-rows:1fr}.map-sidebar{display:flex}.map-legend{display:none}.map-heading h2{font-size:20px}.map-footer{padding-top:6px}}
/* Override the older HUD legend's span color. */
.map-legend .legend-player{color:#f6f3df}.map-legend .legend-npc{color:#36c9d2}.map-legend .legend-quest,.map-legend .legend-pin{color:#f6ce54}.map-legend .legend-portal{color:#66f5ff}.map-legend .legend-enemy{color:#c77665}

#shop-btn{--menu-x:100%;--menu-y:100%}#game #shop-btn .hud-menu-art{background-image:none;background:radial-gradient(circle,#365143,#101e18 67%);border:2px solid #c7a96a;border-radius:50%;display:grid;place-items:center}#shop-btn .hud-menu-art::after{content:'¤';color:#f2d18b;font:bold 28px Georgia}
.gold-display{top:124px;right:236px}@media(max-width:750px),(pointer:coarse) and (max-width:1100px){.gold-display{top:60px;right:150px;font-size:11px}#game .hud-menu{flex-wrap:wrap;max-width:calc(100vw - 28px)}}

/* Match the visible diameter of the atlas medallions, including their transparent rim. */
#game .hud-menu .hud-menu-art{position:absolute;inset:10%;width:80%;height:80%}
#game #shop-btn .hud-menu-art::after{line-height:1}

/* Align the opaque artwork, rather than the uneven transparent atlas cells. */
#game #character-btn .hud-menu-art{background-size:511.239193% 255.619597%;background-position:3.503854% 11.574074%}
#game #skills-btn .hud-menu-art{background-size:508.309456% 254.154728%;background-position:34.456140% 11.431227%}
#game #bag-btn .hud-menu-art{background-size:509.770115% 254.885057%;background-position:65.497896% 11.502783%}
#game #travel-btn .hud-menu-art{background-size:509.770115% 254.885057%;background-position:96.563815% 11.502783%}
#game #catalog-btn .hud-menu-art{background-size:506.857143% 253.428571%;background-position:3.441011% 90.223464%}
#game #reset-hud .hud-menu-art{background-size:505.413105% 252.706553%;background-position:34.434294% 90.298507%}
#game #help-btn .hud-menu-art{background-size:506.857143% 253.428571%;background-position:65.519663% 90.130354%}
#game #feedback-btn .hud-menu-art{background-size:506.857143% 253.428571%;background-position:65.519663% 90.130354%}
#game #settings-btn .hud-menu-art{background-image:url('/games/main/assets/ui/menu-medallions-v1/settings.webp');background-size:125.274725% 125.274725%;background-position:49.407115% 42.687747%;background-repeat:no-repeat;border:0;border-radius:0;background-color:transparent}

/* Atlas chrome stays readable over the game's shared parchment theme. */
#game #map-dialog{padding:20px;background:radial-gradient(ellipse at top,#35382f,#20241f 75%);border:1px solid #ba9457;box-shadow:inset 0 0 0 1px #eed6a0,0 0 0 3px #39372a,0 0 0 4px #aa8245,0 24px 80px #0009}
#game #map-dialog .map-heading{min-height:38px;padding:0 52px}
#game #map-dialog .map-heading h2{font:600 22px "Noto Sans Thai",Tahoma,system-ui,sans-serif;line-height:38px;color:#f6e5bc}
#game #map-close{top:0;width:38px;height:38px;justify-content:center;background:#181e18;border-color:#89754b;box-shadow:none;font-size:28px}
#game #map-close kbd{display:none}

#game #map-dialog .map-layout{grid-template-columns:minmax(0,1fr) 200px;gap:16px}
#game #map-dialog .map-viewport{border-color:#aa905b;box-shadow:0 2px 8px #0004}
#game #map-dialog .map-legend,#game #map-dialog .map-area{background:linear-gradient(140deg,#353c30,#2a3027);border:1px solid #a88b4c66;box-shadow:inset 0 1px #eed6a00d;color:#e4dfcc;padding:16px}
#game #map-dialog .map-sidebar h3{color:#f1d598;font-size:13px;font-weight:600;line-height:1.6;margin-bottom:12px}
#game #map-dialog .map-legend p{font-size:12px;margin:14px 0;gap:10px}
#game #map-dialog .map-legend p:last-child{margin-bottom:0}
#game #map-dialog .map-legend span{float:none;flex:0 0 20px;font-size:18px}
#game #map-dialog .map-area p{color:#a9d799;line-height:1.6}
#game #map-dialog .map-area small{color:#d3c8aa}
#game #map-dialog .map-zoom{background:#181e18;border-color:#89754b;padding:3px;gap:2px}
#game #map-dialog .map-tools button{width:36px;height:36px;box-shadow:none}
#game #map-dialog .map-zoom output{min-width:58px;font-variant-numeric:tabular-nums;color:#f6e5bc}
#game #map-dialog #map-center{width:44px;height:44px}
#game #map-dialog .map-footer{margin-top:14px;padding-top:10px;border-top:1px solid #a88b4c40;color:#bfbda8;line-height:1.6}
@media(max-width:750px),(pointer:coarse) and (max-width:1100px),(max-width:1100px) and (max-height:600px){
 #game #map-dialog{padding:10px}
 #game #map-dialog .map-heading{min-height:38px}
 #game #map-dialog .map-heading h2{font-size:18px}

 #game #map-dialog .map-layout{grid-template-columns:minmax(0,1fr);gap:8px}
 #game #map-dialog .map-area{padding:8px 10px}
 #game #map-dialog .map-area h3{margin-bottom:3px;font-size:12px}
 #game #map-dialog .map-area p{margin:0 0 3px;font-size:10px}
 #game #map-dialog .map-tools button{min-height:40px}
 #game #map-dialog .map-footer{margin-top:8px;padding-top:6px}
}
@media(max-height:500px) and (min-width:650px){
 #game #map-dialog .map-layout{grid-template-columns:minmax(0,1fr) 170px}

}

/* Travel gates use the same cyan core and gilded rim as their world artwork. */
#game #map-dialog .map-legend .legend-portal{display:grid;place-items:center;width:22px;height:22px;border:1px solid #f5d58b;border-radius:50%;background:#102a38;color:#66f5ff;font-size:16px;box-shadow:0 0 9px #66f5ff44}
#game #map-dialog .map-portals{padding:12px;border:1px solid #a88b4c66;border-radius:5px;background:linear-gradient(135deg,#14343d,#182922)}
#game #map-dialog .map-portals[hidden]{display:none}
#map-portal-list{display:grid;gap:6px;max-height:180px;overflow:auto}
#game #map-dialog .map-portal-focus{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:8px;text-align:left;border:1px solid #83e9ed55;border-radius:4px;background:#0d222a;color:#e3ffff;font:12px "Noto Sans Thai",Tahoma,system-ui;line-height:1.5;cursor:pointer}
#game #map-dialog .map-portal-focus:hover{background:#20434c;border-color:#f5d58b}
.portal-list-icon{display:grid;place-items:center;flex:0 0 24px;height:24px;border:1px solid #f5d58b;border-radius:50%;color:#66f5ff;box-shadow:0 0 9px #66f5ff44}
@media(max-width:750px),(pointer:coarse) and (max-width:1100px){
 #game #map-dialog .map-portals{grid-column:1/-1;padding:6px 8px}
 #game #map-dialog .map-portals h3{display:none}
 #map-portal-list{display:flex;max-height:64px;overflow:auto}
 #game #map-dialog .map-portal-focus{width:auto;flex:0 0 180px;font-size:11px}
}

#game #map-dialog .map-legend p{margin:8px 0}
#game #map-dialog .map-portals,#game #map-dialog .map-tools{flex-shrink:0}
#game #map-dialog .map-tools{position:sticky;bottom:0;padding-top:6px;background:#252b24}
@media(max-width:750px),(pointer:coarse) and (max-width:1100px){
 #game #map-dialog .map-area{grid-column:1;grid-row:1}
 #game #map-dialog .map-tools{grid-column:2;grid-row:1;position:static;padding-top:0;background:none}
 #game #map-dialog .map-portals{grid-row:2}
}

#game #map-dialog .legend-portal,.portal-list-icon{position:relative}
#game #map-dialog .legend-portal::after,.portal-list-icon::after{content:'';width:8px;height:14px;border:2px solid #66f5ff;border-radius:50%;box-shadow:0 0 5px #66f5ff88}
#game #map-dialog .legend-portal::before,.portal-list-icon::before{content:'';position:absolute;bottom:3px;width:12px;border-bottom:1px solid #e3ffff}
#game #map-dialog .map-legend p:has(.legend-portal){display:flex;align-items:center;gap:10px}
#game #map-dialog .map-legend span.legend-portal{display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px}
#game #map-dialog .legend-portal::after,.portal-list-icon::after{display:block;flex-shrink:0;box-sizing:content-box}
/* White light rings match the portal's current world and atlas appearance. */
#game #map-dialog .map-legend span.legend-portal,.portal-list-icon{border-color:#fff;color:#fff;background:#23363c;box-shadow:0 0 10px #ffffff66}
#game #map-dialog .legend-portal::after,.portal-list-icon::after{width:12px;height:12px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 5px #ffffff88}
#game #map-dialog .legend-portal::before,.portal-list-icon::before{display:none}
#game #map-dialog .map-portal-focus{border-color:#ffffff55;color:#fff}
#game #map-dialog .map-portal-focus:hover{border-color:#fff}