:root { --hover-border: rgba(255,255,255,.9); --hover-shadow: rgba(0,0,0,.35); }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #efece0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
#app { display: grid; grid-template-rows: 1fr auto; min-height: 100vh; }
#screen { position: relative; margin: 0 auto; max-width: min(1280px, 96vw); width: 100%; }
#ratio-box { position: relative; width: 100%; min-height: 60vh; } /* safety height so it never starts at 0 */
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hot { fill: transparent; stroke: transparent; pointer-events: all; }
.hot:hover { stroke: var(--hover-border); stroke-width: 3; filter: drop-shadow(0 0 6px var(--hover-shadow)); cursor: pointer; }
#quickbar { display: flex; gap: .5rem; justify-content: center; align-items: center; padding: .5rem 1rem 1rem; flex-wrap: wrap; }
#quickbar button { padding: .5rem .8rem; border: 1px solid #c9c9c9; border-radius: 10px; background: white; cursor: pointer; }
#quickbar button:hover { background: #f1f1f1; }

/* --- UI overlay for interactive controls --- */
#ui-overlay { position: absolute; inset: 0; pointer-events: none; }
#ui-overlay select.ui-select { position: absolute; pointer-events: auto; font-size: 10px; padding: 0px 2px; }  /* was 1px 4px */
#ui-overlay select.ui-select:focus { outline: 2px solid #2b6cb0; outline-offset: 1px; }

#ui-overlay select.ui-select{
  box-sizing: border-box;
  white-space: nowrap;
  width: 85px;        /* kies wat past */
}


/* === Compact Top Menubar (from baseline) === */
#menu-bar { position: absolute; left: 0; top: 0; z-index: 20; pointer-events: auto; }
#menu-bar .bar { display: inline-flex; gap: .25rem; padding: .2rem; background:#fff; border:1px solid #e6e6e6; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.10); font-size:12px; }
#menu-bar .root { position: relative; }
#menu-bar .root-btn { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .55rem; border:1px solid #ececf2; background:#f8f9fd; border-radius:8px; font-weight:600; cursor:pointer; }
#menu-bar .root-btn:hover, #menu-bar .root-btn:focus { background:#eef2ff; outline:none; }
#menu-bar .dd { position:absolute; left:0; top:calc(100% + 6px); min-width:220px; max-width:340px; background:#fff; border:1px solid #e6e6e6; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:.25rem; display:none; }
#menu-bar .root.open > .dd, #menu-bar .root:focus-within > .dd { display:block; }
#menu-bar .dd ul { list-style:none; margin:0; padding:.1rem; }
#menu-bar .dd li { margin:0; }
#menu-bar .item { width:100%; text-align:left; display:block; padding:.38rem .5rem; background:transparent; border:0; border-radius:7px; cursor:pointer; }
#menu-bar .item:hover, #menu-bar .item:focus { background:#f5f7ff; outline:none; }
#menu-bar .muted { opacity:.85; font-weight:500; }