/* RPG Map Manager V1.8.98 — UX shell based on V1.8.89 */

/* Core desktop shell: map is the protagonist. */
@media (min-width:901px){
  html,body,#app{width:100%;height:100%;min-height:100%;overflow:hidden}
  body{background:#080a0e}
  .app-shell{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:46px minmax(0,1fr)!important;min-height:100vh!important;background:#080a0e}
  .topbar{grid-column:1!important;grid-row:1!important;height:46px;min-height:46px;padding:0 10px 0 10px;z-index:1100;background:#070a0fdc}
  .brand-block{gap:8px}.eyebrow{font-size:7px}.brand-title{font-size:13px}
  .brand-block .nav-menu-toggle{display:inline-flex!important}
  .main-area{grid-column:1!important;grid-row:2!important;display:block!important;width:100%!important;height:100%!important;min-height:0!important}
  .sidebar{position:fixed!important;left:0!important;top:46px!important;bottom:0!important;width:250px!important;z-index:1300!important;transform:translateX(-104%);transition:transform .18s ease,box-shadow .18s ease!important;background:#080b10f3!important;border-right:1px solid #2b3543!important;box-shadow:22px 0 54px #000b!important;backdrop-filter:blur(14px)!important}
  .app-shell.sidebar-open .sidebar{transform:translateX(0)}
  .map-layout{display:block!important;position:relative!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;background:#080a0e!important}
  .map-panel{position:relative!important;width:100%!important;height:100%!important;min-height:0!important;background:#080a0e!important}

  .map-menu-btn{position:absolute;left:10px;top:10px;z-index:200;pointer-events:auto;width:34px;height:34px;border:1px solid #344152;background:#0b1017db;color:#e8eef5;border-radius:9px;box-shadow:0 8px 24px #0008;cursor:pointer;backdrop-filter:blur(9px)}
  .map-menu-btn:hover{border-color:#63758b;background:#121a25}
  .map-toolbar{position:absolute!important;left:54px!important;right:10px!important;top:10px!important;height:44px!important;min-height:44px!important;padding:6px 8px!important;border:1px solid #2f3a49!important;border-radius:11px!important;background:linear-gradient(180deg,#0a0f16ed,#0a0f16ca)!important;box-shadow:0 10px 28px #0008!important;backdrop-filter:blur(10px)!important;z-index:75!important}
  .map-toolbar>*{pointer-events:auto}
  .desktop-map-nav{margin:0!important;gap:6px!important;min-width:0!important}
  .desktop-map-nav .map-back-btn{width:28px!important;height:28px!important}
  .desktop-breadcrumb{font-size:9px!important;max-width:52vw!important}
  .map-title,.map-subtitle{display:none!important}
  .map-role-badge{display:inline-flex!important;margin-left:10px!important;margin-top:0!important;align-items:center;justify-content:center;padding:3px 7px;border-radius:999px;border:1px solid #806a36;background:#17130c;color:#f0d99f;font-size:8px;letter-spacing:.12em;font-weight:700}
  .map-role-badge[data-role="player"]{border-color:#2e7665;background:#091814;color:#8ee5c9}
  .map-role-badge[data-role="viewer"]{border-color:#435061;background:#111720;color:#b6c0cb}
  .toolbar-actions{gap:5px!important}.toolbar-actions .tool-btn{min-width:30px!important;height:30px!important;font-size:14px!important;background:#0d141d!important}

  .map-viewport{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;background:#080a0e!important}
  .map-stage{width:100%;height:100%;aspect-ratio:auto;left:0;top:0}
  .map-image{object-fit:cover!important;border:0!important}
  .map-branding{position:absolute;right:10px;bottom:8px;z-index:100;color:#7e8895;font-size:9px;letter-spacing:.02em;opacity:.64;pointer-events:none;text-shadow:0 1px 3px #000}
  .scale-badge{left:10px!important;right:auto!important;bottom:10px!important;z-index:100!important}

  .desktop-tool-rail{position:absolute;left:8px;top:58px;z-index:80;display:flex;flex-direction:column;gap:2px;padding:5px;border:1px solid #2f3b4a;border-radius:12px;background:#080e15ea;box-shadow:0 14px 36px #000a;backdrop-filter:blur(11px)}
  .desktop-tool-btn{width:64px;min-height:53px;padding:6px 3px;border:1px solid transparent;border-radius:8px;background:transparent;color:#b7c2ce;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:8px;line-height:1.05;cursor:pointer}
  .desktop-tool-btn:hover{background:#151d28;border-color:#405062;color:#f2f6fb}.desktop-tool-btn.active{background:#0f2940;border-color:#286087;color:#eaf6ff;box-shadow:inset 0 0 0 1px #1f5274}
  .desktop-tool-icon{font-size:17px;line-height:1}
  .player-desktop-rail{position:absolute;right:12px;top:64px;z-index:80;display:none;flex-direction:column;gap:7px}
  .player-rail-btn{width:42px;height:42px;border:1px solid #344152;border-radius:10px;background:#0c141de8;color:#e8eef5;font-size:18px;cursor:pointer;box-shadow:0 8px 24px #0009;backdrop-filter:blur(9px)}
  .player-rail-btn:hover{border-color:#5a6f86;background:#111c29}
  body[data-role="player"] .desktop-tool-rail{display:none!important}
  body[data-role="player"] .player-desktop-rail{display:none!important}

  .inspector{display:none!important;position:absolute!important;right:10px!important;top:62px!important;left:auto!important;bottom:auto!important;width:min(320px,calc(100vw - 120px))!important;max-height:min(72vh,620px)!important;height:auto!important;z-index:120!important;border:1px solid #344152!important;border-radius:11px!important;background:#0b1017f2!important;box-shadow:0 20px 52px #000b!important;backdrop-filter:blur(12px)!important;overflow:hidden!important}
  .inspector.open{display:flex!important}
  .inspector-header{padding:10px 11px!important}.inspector-title{font-size:12px!important}.inspector-body{padding:10px!important;overflow:auto!important}
  .inspector-header-actions{display:flex;align-items:center;gap:5px}.context-toggle-btn{display:none!important}
  .inspector.context-expanded .context-toggle-btn{display:inline-flex!important;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid #42556b;background:#111a25;color:#dce5ef;border-radius:7px;font-size:14px;cursor:pointer}
  .inspector.context-expanded .closeInspectorBtn,.inspector.context-expanded #closeInspectorBtn{display:inline-flex!important}

  /* Fullscreen is a presentation mode, not a separate UX. */
  body.map-fullscreen-active .topbar{display:none!important}
  body.map-fullscreen-active .main-area{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:9998!important;background:#080a0e}
  body.map-fullscreen-active .sidebar{top:54px!important;z-index:10030!important}
  .map-layout:fullscreen,.map-layout.app-map-fullscreen{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;min-height:100vh!important;display:block!important;overflow:hidden!important;background:#080a0e!important;z-index:10000!important}
  .map-layout:fullscreen .map-panel,.map-layout.app-map-fullscreen .map-panel{width:100%!important;height:100%!important;min-height:100vh!important}
  .map-layout:fullscreen .map-toolbar,.map-layout.app-map-fullscreen .map-toolbar{display:flex!important}
  .map-layout:fullscreen .map-viewport,.map-layout.app-map-fullscreen .map-viewport{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:100vh!important}
  .map-layout:fullscreen .desktop-tool-rail,.map-layout.app-map-fullscreen .desktop-tool-rail{display:flex!important}
  .map-layout:fullscreen .player-desktop-rail,.map-layout.app-map-fullscreen .player-desktop-rail{display:none!important}
  .map-layout:fullscreen .map-stage,.map-layout.app-map-fullscreen .map-stage{aspect-ratio:auto!important}
  body[data-role="player"] .map-layout:fullscreen .desktop-tool-rail,body[data-role="player"] .map-layout.app-map-fullscreen .desktop-tool-rail{display:none!important}
  body[data-role="player"] .map-layout:fullscreen .player-desktop-rail,body[data-role="player"] .map-layout.app-map-fullscreen .player-desktop-rail{display:flex!important}
  .map-layout:fullscreen .inspector,.map-layout.app-map-fullscreen .inspector{display:none!important}
  .map-layout:fullscreen .inspector.open,.map-layout.app-map-fullscreen .inspector.open{display:flex!important}
  .map-layout:fullscreen .map-branding,.map-layout.app-map-fullscreen .map-branding{display:block!important}
  .map-layout:fullscreen .map-menu-btn,.map-layout.app-map-fullscreen .map-menu-btn{display:flex!important;align-items:center;justify-content:center}
  .fullscreen-exit-btn{display:none!important}

  body.public-share-mode .map-branding{display:block!important}
}

/* Player role: deliberately sparse on desktop. */
@media (min-width:901px){
  body[data-role="player"] .map-toolbar{left:54px!important}
  body[data-role="player"] .desktop-breadcrumb{max-width:64vw!important}
  body[data-role="player"] .map-role-badge{margin-left:14px!important}
}

/* Touch-first layout. */
@media (max-width:900px){
  html,body,#app{width:100%;height:100%;min-height:100%;overflow:hidden}
  .app-shell{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:44px minmax(0,1fr)!important;min-height:100vh!important}
  .topbar{grid-column:1!important;grid-row:1!important;height:44px;min-height:44px;padding:0 8px!important;z-index:1100}
  .brand-title{font-size:12px!important}.eyebrow{font-size:7px!important}.topbar-actions{gap:4px!important}.role-switcher select{max-width:118px!important;padding:5px 7px!important;font-size:9px!important}
  .sidebar{position:fixed!important;left:0!important;top:44px!important;bottom:0!important;width:min(280px,88vw)!important;z-index:1300!important;transform:translateX(-104%);transition:transform .18s ease!important;box-shadow:20px 0 54px #000b!important}
  .sidebar.open{transform:translateX(0)}
  .main-area{grid-column:1!important;grid-row:2!important;display:block!important;width:100%!important;height:100%!important;min-height:0!important}
  .map-layout{display:block!important;position:relative!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important}
  .map-panel{position:relative!important;width:100%!important;height:100%!important;min-height:0!important}
  .map-menu-btn{position:absolute;left:8px;top:8px;z-index:90;width:34px;height:34px;border:1px solid #3b4858;background:#0b1017e8;color:#edf2f7;border-radius:9px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #0008}
  .map-toolbar{position:absolute!important;left:48px!important;right:8px!important;top:8px!important;height:40px!important;min-height:40px!important;padding:4px 6px!important;border:1px solid #2f3a49!important;border-radius:10px!important;background:#0a0f16de!important;box-shadow:0 9px 26px #0008!important;z-index:75!important;backdrop-filter:blur(10px)!important}
  .desktop-map-nav{display:flex!important;margin:0!important;gap:5px!important}.desktop-map-nav .map-back-btn{display:none!important}.desktop-breadcrumb{font-size:9px!important;max-width:56vw!important}.map-title,.map-subtitle{display:none!important}
  .map-role-badge{display:inline-flex!important;margin-left:7px!important;padding:3px 6px!important;font-size:7px!important}
  .toolbar-actions{display:flex!important;gap:4px!important}.toolbar-actions .tool-btn{min-width:28px!important;height:28px!important;font-size:13px!important}.toolbar-actions #shareMapBtn,.toolbar-actions #fitEntryBtn{display:none!important}
  .map-viewport{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;background:#080a0e!important}
  .map-stage{width:100%;height:100%;aspect-ratio:auto;left:0;top:0}
  .map-image{object-fit:cover!important;border:0!important}
  .desktop-tool-rail,.player-desktop-rail{display:none!important}
  .mobile-toolbar{position:absolute!important;left:50%!important;bottom:max(9px,env(safe-area-inset-bottom))!important;right:auto!important;transform:translateX(-50%)!important;width:max-content!important;max-width:calc(100vw - 82px)!important;display:flex!important;align-items:stretch!important;gap:3px!important;padding:5px!important;border:1px solid #324154!important;background:#0a1017e8!important;border-radius:13px!important;box-shadow:0 12px 32px #000a!important;z-index:95!important;backdrop-filter:blur(10px)!important}
  .mobile-tool-btn{width:50px!important;min-width:50px!important;height:50px!important;padding:6px 2px!important;border:1px solid transparent!important;background:transparent!important;border-radius:9px!important;color:#d7e0ea!important;font-size:17px!important}.mobile-tool-btn span{display:block!important;font-size:7px!important;color:#9eabb9!important;margin-top:2px!important}.mobile-tool-btn.active{background:#0f2940!important;border-color:#2e6790!important;color:#eef8ff!important}
  #mobileFullscreenBtn{display:none!important}
  .mobile-player-toolbar{position:absolute;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);display:none;align-items:center;gap:8px;padding:5px;border:1px solid #344356;background:#0a1017ee;border-radius:15px;box-shadow:0 12px 34px #000a;z-index:95;backdrop-filter:blur(10px)}
  .mobile-player-btn{width:48px;height:48px;border:1px solid #405165;background:#0d1721;color:#edf4fb;border-radius:50%;font-size:18px;cursor:pointer}.mobile-player-btn:hover{border-color:#7190aa}
  body[data-role="player"] .mobile-toolbar{display:none!important}
  body[data-role="player"] .mobile-player-toolbar{display:flex!important}
  .inspector{position:absolute!important;left:auto!important;right:8px!important;top:56px!important;bottom:auto!important;width:min(330px,calc(100vw - 16px))!important;height:auto!important;max-height:min(68vh,460px)!important;transform:none!important;display:none!important;z-index:120!important;border:1px solid #344152!important;border-radius:12px!important;background:#0b1017f3!important;box-shadow:0 16px 48px #000b!important}
  .inspector.open{display:flex!important}.inspector-header{padding:9px 10px!important}.inspector-title{font-size:12px!important}.inspector-body{padding:9px!important}
  .map-branding{position:absolute!important;right:8px!important;bottom:7px!important;z-index:100!important;font-size:8px!important;color:#7e8895!important;opacity:.58!important;pointer-events:none}
  .scale-badge{left:8px!important;right:auto!important;bottom:7px!important;z-index:100!important}
  body.map-fullscreen-active .topbar{display:none!important}
  body.map-fullscreen-active .main-area{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:9998!important}
  body.map-fullscreen-active .sidebar{top:54px!important}
  .map-layout:fullscreen,.map-layout.app-map-fullscreen{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;min-height:100vh!important;z-index:10000!important}
  .map-layout:fullscreen .map-toolbar,.map-layout.app-map-fullscreen .map-toolbar{display:flex!important}
  .map-layout:fullscreen .map-viewport,.map-layout.app-map-fullscreen .map-viewport{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:100vh!important}
  .map-layout:fullscreen .map-stage,.map-layout.app-map-fullscreen .map-stage{aspect-ratio:auto!important}
  .map-layout:fullscreen .inspector,.map-layout.app-map-fullscreen .inspector{display:none!important}.map-layout:fullscreen .inspector.open,.map-layout.app-map-fullscreen .inspector.open{display:flex!important}
  .map-layout:fullscreen .fullscreen-exit-btn,.map-layout.app-map-fullscreen .fullscreen-exit-btn{display:flex!important;position:absolute!important;left:50%!important;bottom:max(14px,env(safe-area-inset-bottom))!important;transform:translateX(-50%)!important;width:44px!important;height:44px!important;border-radius:13px!important;z-index:125!important}
}

@media (min-width:901px){.map-role-badge[data-role="player"]{font-weight:700}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* --- UX correction pass based on approved mockup --- */
@media (min-width:901px){
  /* The mobile toolbar must never leak into desktop. */
  .mobile-toolbar,.mobile-player-toolbar{display:none!important}

  /* Player keeps a deliberately minimal map HUD. */
  body[data-role="player"] .desktop-tool-rail{display:none!important}
  body[data-role="player"] .player-desktop-rail{display:none!important}
  body[data-role="player"] .player-desktop-rail{top:86px!important;right:14px!important}
  body[data-role="player"] .player-rail-btn{width:44px!important;height:44px!important;border-radius:11px!important}

  /* Keep map controls visually secondary in Player mode. */
  body[data-role="player"] .toolbar-actions{gap:4px!important}
  body[data-role="player"] .toolbar-actions .tool-btn{min-width:28px!important;width:28px!important;height:28px!important;font-size:13px!important}
  body[data-role="player"] .toolbar-actions #fitEntryBtn,
  body[data-role="player"] .toolbar-actions #shareMapBtn{display:none!important}

  /* Fullscreen follows the mockup: a clean map with a dedicated exit X. */
  body.map-fullscreen-active .map-layout:fullscreen .fullscreen-exit-btn,
  body.map-fullscreen-active .map-layout.app-map-fullscreen .fullscreen-exit-btn{
    display:flex!important;align-items:center!important;justify-content:center!important;
    position:absolute!important;top:12px!important;right:12px!important;
    width:38px!important;height:38px!important;padding:0!important;
    border:1px solid #39485b!important;border-radius:10px!important;
    background:#0a1017e8!important;color:#edf3f8!important;
    z-index:150!important;box-shadow:0 8px 26px #000a!important;backdrop-filter:blur(10px)!important;
  }
  body.map-fullscreen-active .map-layout:fullscreen #mapFullscreenBtn,
  body.map-fullscreen-active .map-layout.app-map-fullscreen #mapFullscreenBtn{display:none!important}

  /* Inspector is a true overlay and only appears after an explicit selection. */
  .inspector{pointer-events:auto!important}
  .inspector:not(.open){pointer-events:none!important}
  body.map-fullscreen-active .inspector.open,
  .map-layout:fullscreen .inspector.open,
  .map-layout.app-map-fullscreen .inspector.open{
    top:64px!important;right:14px!important;width:min(330px,calc(100vw - 120px))!important;
    max-height:min(74vh,640px)!important;
  }

  /* Match the slim mockup rail proportions. */
  .desktop-tool-rail{left:8px!important;top:72px!important;padding:4px!important;border-radius:11px!important;z-index:140!important;max-height:calc(100vh - 90px);overflow:auto}
  .desktop-tool-btn{width:58px!important;min-height:49px!important;padding:5px 2px!important;font-size:8px!important}
  .desktop-tool-icon{font-size:16px!important}
}

@media (max-width:900px){
  /* Exact Master toolbar order/spacing from the approved mockup. */
  .mobile-toolbar{grid-template-columns:repeat(7,auto)!important;max-width:calc(100vw - 18px)!important}
  .mobile-toolbar .mobile-tool-btn{width:46px!important;min-width:46px!important;height:48px!important}
  body[data-role="player"] .mobile-toolbar{display:none!important}
  body[data-role="player"] .mobile-player-toolbar{display:flex!important}

  /* Fullscreen context remains an overlay, never a full-width header. */
  body.map-fullscreen-active .inspector.open,
  .map-layout:fullscreen .inspector.open,
  .map-layout.app-map-fullscreen .inspector.open{
    right:8px!important;top:54px!important;left:auto!important;
    width:min(330px,calc(100vw - 16px))!important;max-height:min(68vh,460px)!important;
  }
}

@media (min-width:901px){
  body.map-fullscreen-active .map-layout .sidebar{top:54px!important;bottom:0!important;z-index:10030!important;}
  body.map-fullscreen-active .map-layout #modalRoot{position:fixed!important;inset:0!important;z-index:30000!important;pointer-events:auto!important;}
  body.map-fullscreen-active .map-layout .player-desktop-rail{z-index:180!important;pointer-events:auto!important;}
}
@media (max-width:900px){
  body.map-fullscreen-active .map-layout .sidebar{top:54px!important;bottom:0!important;z-index:10030!important;}
  body.map-fullscreen-active .map-layout #modalRoot{position:fixed!important;inset:0!important;z-index:30000!important;pointer-events:auto!important;}
}

@media (min-width:901px){
  body.map-fullscreen-active .map-layout .map-menu-btn{z-index:10060!important;pointer-events:auto!important;}
  body.map-fullscreen-active .map-layout .player-desktop-rail .player-rail-btn{position:relative;z-index:181!important;pointer-events:auto!important;}
}

/* --- V1.8.97 — single canonical map-menu button ---
/* The topbar navigation button duplicated the map menu in normal desktop view.
   Keep the map-level button as the single source of truth in every mode. */
.brand-block .nav-menu-toggle{display:none!important}

@media (max-width:900px){
  .brand-block .nav-menu-toggle{display:none!important}
}

/* Ensure the visible map button remains the active close control when open. */
.map-layout .map-menu-btn{pointer-events:auto!important}
.map-layout .map-menu-btn[aria-label="Chiudi menu"]{z-index:10060!important}


/* --- V1.8.98 tool repair + fullscreen object scaling --- */
.ruler-layer{position:absolute;inset:0;width:100%;height:100%;z-index:12;pointer-events:none;overflow:visible}
.ruler-line{stroke:#66c7ff;stroke-width:0.8;stroke-dasharray:2 1;filter:drop-shadow(0 0 2px #001018);}
.ruler-point{fill:#66c7ff;stroke:#dff7ff;stroke-width:.45}
.ruler-label rect{fill:#07111bde;stroke:#3f6f8f;stroke-width:.5}
.ruler-label text{fill:#e8f7ff;font:700 2.6px Arial,sans-serif;text-anchor:middle;dominant-baseline:central;letter-spacing:.02em}
.map-hotspot,.map-marker,.map-token{will-change:transform}
body.map-fullscreen-active .map-stage{--map-object-scale:var(--map-object-scale,1)}
@media(max-width:900px){
  .mobile-toolbar{overflow-x:auto;scrollbar-width:none}
  .mobile-toolbar::-webkit-scrollbar{display:none}
  .mobile-tool-btn{flex:0 0 46px}
}