/* A working copy of the Eclipse menu.
   Every measurement here comes from the client: the window is 1120 x 720 at the client's default
   scale, the sidebar is 190 wide, a module card is 74 tall, a toggle row 38, and so on. The text is
   smaller than the sizes written in the client's code because the client draws it at about three
   quarters of them. See tools/menu-export for how the numbers are checked against the real menu. */

.em { --accent: #4c9dff; --accent2: #7c8cff; --bg: #0b0e14; --bg-end: #10141d; --card: #141922; --sidebar: #090b10;
  --control: #1b212c; --border: #8a97ad; --text: #eef2f8; --muted: #a4aec0; --amber: #f2b04a;
  --win-opacity: .94; --radius: 8px; --frame-radius: 8px; --card-gap: 10px; --card-h: 74px; --sidebar-w: 190px;
  --border-alpha: .136; --shadow: .55;
  position: relative; width: 1440px; height: 900px; transform-origin: 0 0; user-select: none; -webkit-user-select: none;
  font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  font-size: 14.6px; line-height: 20px; color: var(--text); text-shadow: none; text-align: left; font-weight: 400; letter-spacing: 0; }
.em *, .em *::before, .em *::after { box-sizing: border-box; text-shadow: none; }
.em :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
.em :where(button):focus-visible, .em [tabindex]:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 1px; }
.em svg { display: block; }
.em ::selection { background: rgba(76, 157, 255, .35); }

/* the game behind the menu: darkened and blurred, as the client does it */
.em-game { position: absolute; inset: 0; overflow: hidden; background: #28486f; }
.em-game canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.em-game .em-world { position: absolute; inset: -30px; filter: blur(var(--game-blur, 14px)); }
.em-dark { position: absolute; inset: 0; pointer-events: none; }
.em-stage-label { position: absolute; left: 14px; bottom: 10px; font-size: 11px; color: rgba(255,255,255,.35); pointer-events: none; }

/* ---------- the window ---------- */
.em-win { position: absolute; left: 160px; top: 90px; width: 1120px; height: 720px; border-radius: var(--radius); overflow: hidden;
  background: color-mix(in srgb, var(--bg) calc(var(--win-opacity) * 100%), transparent); border: 1px solid rgba(74, 110, 168, calc(var(--border-alpha) * 2.5));
  box-shadow: 0 5px 0 0 rgba(0,0,0,.0), 0 18px 60px rgba(0,0,0,calc(var(--shadow) * .5)), 0 6px 18px rgba(0,0,0,calc(var(--shadow) * .45)); }
.em-win-fill { position: absolute; inset: 0; pointer-events: none; }
.em-win-fx { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }
.em-side { position: absolute; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); background: color-mix(in srgb, var(--sidebar) 80%, transparent);
  border-right: 1px solid rgba(108, 151, 215, .165); border-radius: var(--radius) 0 0 var(--radius); }
.em-header-line { position: absolute; left: var(--sidebar-w); right: 0; top: 78px; height: 1px; background: rgba(108, 151, 215, .14); }
.em-logo { position: absolute; left: 14px; top: 17px; width: 36px; height: 36px; border-radius: 8px; }
.em-brand { position: absolute; left: 57px; top: 19px; font-size: 17.6px; font-weight: 600; letter-spacing: .01em; line-height: 22px; font-family: inherit; }
.em-ver { position: absolute; left: 58px; top: 46px; font-size: 10.5px; line-height: 14px; color: var(--muted); }

.em-nav { position: absolute; left: 14px; width: calc(var(--sidebar-w) - 28px); height: 42px; border-radius: 7px; color: var(--muted); display: block; }
.em-nav:hover { background: rgba(115, 145, 190, .07); }
.em-nav[aria-current="page"] { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--text); }
.em-nav svg { position: absolute; left: 11px; top: 9px; width: 24px; height: 24px; overflow: visible; }
.em-nav[aria-current="page"] svg { color: var(--accent); }
.em-nav span { position: absolute; left: 41px; top: 8px; font-size: 15.5px; line-height: 22px; }

.em-chip { position: absolute; left: 14px; width: calc(var(--sidebar-w) - 28px); height: 48px; border-radius: 11px; background: rgba(255,255,255,.043); }
.em-chip:hover { background: rgba(255,255,255,.086); }
.em-chip small { position: absolute; left: 12px; top: 8px; font-size: 8.3px; line-height: 11px; color: var(--muted); letter-spacing: .02em; }
.em-chip b { position: absolute; left: 12px; top: 22px; right: 12px; font-size: 11.3px; font-weight: 400; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.em-chip i { position: absolute; right: 12px; top: 8px; font-size: 8.3px; line-height: 11px; font-style: normal; color: #f2b04a; }
.em-closehint { position: absolute; left: 24px; bottom: 23px; font-size: 12px; line-height: 16px; color: var(--muted); }

/* header: search and close */
.em-search { position: absolute; left: calc(var(--sidebar-w) + 24px); top: 22px; width: calc(100% - var(--sidebar-w) - 105px); height: 36px;
  border-radius: var(--frame-radius); background: color-mix(in srgb, var(--control) 94%, transparent); }
.em-search svg { position: absolute; left: 10px; top: 6px; width: 24px; height: 24px; color: var(--text); }
.em-search input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0 12px 0 38px; background: none; border: 0; outline: 0; color: var(--text);
  font: inherit; font-size: 14.6px; user-select: text; -webkit-user-select: text; caret-color: var(--text); }
.em-search input::placeholder { color: var(--muted); opacity: 1; }
.em-close { position: absolute; right: 20px; top: 22px; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); }
.em-close:hover { color: var(--text); background: rgba(111, 151, 218, .12); }
.em-close svg { position: absolute; left: 11px; top: 11px; width: 10px; height: 10px; overflow: visible; }
.em-title { position: absolute; left: calc(var(--sidebar-w) + 26px); top: 20px; font-size: 19.5px; line-height: 30px; }

/* tabs */
.em-tabs { position: absolute; left: calc(var(--sidebar-w) + 22px); top: 94px; height: 42px; right: 22px; display: flex; gap: 9.8px; padding-top: 0; white-space: nowrap; overflow: hidden; }
.em-tab { height: 36px; padding: 0 10px; min-width: 0; border-radius: var(--frame-radius); font-size: 14.6px; line-height: 36px; color: var(--text); }
.em-tab:hover { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.em-tab[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.em-tab.em-tab-sel { }

/* the module list */
.em-body { position: absolute; left: calc(var(--sidebar-w) + 12px); right: 0; top: 154px; bottom: 0; }
.em-list { position: absolute; inset: 0; overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(143, 160, 190, .35) transparent; padding-right: 0; }
.em-list::-webkit-scrollbar { width: var(--scroll-w, 5px); }
.em-list::-webkit-scrollbar-thumb { background: rgba(143, 160, 190, .35); border-radius: 3px; }
.em-cards { width: calc(100% - 5px); padding: 0; }
.em-card { position: relative; height: var(--card-h); margin-bottom: var(--card-pitch, 18px); border-radius: 8px; background: color-mix(in srgb, var(--card) 80%, transparent);
  border: 1px solid rgba(124, 156, 205, .094); cursor: pointer; transition: background .1s; }
.em-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 8px 0 0 8px; background: var(--accent); opacity: 0; transform: scaleY(0); transition: opacity .2s, transform .2s; transform-origin: 50% 50%; }
.em-card:hover { background: color-mix(in srgb, color-mix(in srgb, var(--card) 90%, var(--accent)) 88%, transparent); }
.em-card.on { background: color-mix(in srgb, color-mix(in srgb, var(--card) 93%, var(--accent)) 80%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.em-card.on::after { opacity: 1; transform: scaleY(1); }
.em-card.sel { background: color-mix(in srgb, color-mix(in srgb, var(--card) 82%, var(--accent)) 90%, transparent); border-color: var(--accent); cursor: default; }
.em-card.sel.on { border-color: var(--accent); }
.em-mark { position: absolute; left: 22px; top: 25px; width: 24px; height: 24px; overflow: visible; pointer-events: none; }
.em-mark .dot { fill: #61708a; }
.em-mark .ring, .em-mark .tick, .em-mark .fill, .em-mark .ripple { opacity: 0; }
.em-card.on .em-mark .dot { opacity: 0; }
.em-card.on .em-mark .ring { opacity: 1; stroke-dasharray: 75.4; stroke-dashoffset: 0; }
.em-card.on .em-mark .fill { opacity: 1; }
.em-card.on .em-mark .tick { opacity: 1; stroke-dasharray: 22; stroke-dashoffset: 0; }
.em-card.pop .em-mark .ring { animation: em-ring .28s ease-out both; }
.em-card.pop .em-mark .fill { animation: em-fill .3s ease-out .17s both; }
.em-card.pop .em-mark .tick { animation: em-tick .26s cubic-bezier(.2, .9, .3, 1.1) .24s both; }
.em-card.pop .em-mark .ripple { animation: em-ripple .3s ease-out .26s both; }
@keyframes em-ring { from { stroke-dashoffset: 75.4; opacity: 1 } to { stroke-dashoffset: 0; opacity: 1 } }
@keyframes em-fill { from { opacity: 0 } to { opacity: 1 } }
@keyframes em-tick { from { stroke-dashoffset: 22; opacity: 1 } to { stroke-dashoffset: 0; opacity: 1 } }
@keyframes em-ripple { 0% { opacity: .45; r: 14 } 100% { opacity: 0; r: 19 } }
.em.calm .em-card, .em.calm .em-card::after { transition: none; }
.em.calm .em-card.pop .em-mark * { animation: none !important; }
.em-name { position: absolute; left: 63px; top: 11px; right: 150px; font-size: 16.5px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.em-desc { position: absolute; left: 63px; top: 40px; right: 150px; font-size: 12px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.em-desc.hint { color: var(--accent); }
.em-keychip { position: absolute; top: 24px; height: 24px; padding: 0 9px; border-radius: 7px; background: rgba(255,255,255,.063); border: 1px solid rgba(255,255,255,.157); font-size: 10.5px; line-height: 22px; color: var(--text); white-space: nowrap; max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
.em-star { position: absolute; top: 25px; width: 24px; height: 24px; color: var(--muted); }
.em-star svg { width: 24px; height: 24px; overflow: visible; }
.em-star path { fill: none; stroke: currentColor; stroke-width: 1; stroke-linejoin: miter; }
.em-star.fav { color: var(--accent); }
.em-star.fav path { stroke-width: 2; fill: color-mix(in srgb, var(--accent) 35%, transparent); }
.em-switch { position: absolute; top: 25px; width: 40px; height: 24px; border-radius: 12px; background: #3d4858; transition: background .12s; }
.em-switch::after { content: ""; position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #94a2b7; transition: transform .1s, background .1s; }
.em-switch[aria-checked="true"] { background: var(--accent); }
.em-switch[aria-checked="true"]::after { transform: translateX(16px); background: #f5faff; }
.em.calm .em-switch, .em.calm .em-switch::after { transition: none; }
.em-chev { position: absolute; top: 25px; width: 20px; height: 24px; color: var(--muted); }
.em-chev:hover, .em-card.sel .em-chev { color: var(--text); }
.em-chev svg { position: absolute; left: 0; top: 0; width: 20px; height: 24px; overflow: visible; }
.em-empty { padding: 14px 6px; color: var(--text); font-size: 14.6px; line-height: 20px; }
.em-empty p { margin: 10px 0 0; }
.em-suggest { color: var(--accent); cursor: pointer; }
.em-suggest:hover { text-decoration: underline; }

/* the open module: its card stays on top, the settings scroll underneath */
.em-detail { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.em-detail .em-card { margin-left: 0; width: calc(100% - 12px); }
.em-pane { position: absolute; left: 16px; width: calc(100% - 44px); top: 90px; bottom: 20px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(143, 160, 190, .35) transparent; }
.em-pane::-webkit-scrollbar { width: 5px; }
.em-pane::-webkit-scrollbar-thumb { background: rgba(143, 160, 190, .35); border-radius: 3px; }
.em-pane .em-flow { padding-bottom: 12px; }
.em-pic { position: absolute; left: -12px; top: 82px; width: 928px; max-width: none; pointer-events: none; image-rendering: auto; }
.em-picwrap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(143, 160, 190, .35) transparent; }
.em-picwrap img { display: block; width: 928px; margin: 82px 0 0 -12px; max-width: none; }

/* ---------- settings widgets ---------- */
.em-flow > * { margin-bottom: var(--is, 10px); }

.em-sp { height: var(--is, 10px); margin-bottom: 0 !important; }
.em-gap { height: 0; }
.em-t { font-size: 14.6px; line-height: 19px; }
.em-t.muted { color: var(--muted); }
.em-t.body { color: var(--text); }
.em-t.warn { color: #f0b066; }
.em-sep { height: 1px; background: rgba(255,255,255,.098); }
.em-tog { position: relative; height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 2px; border-radius: 6px; cursor: pointer; }
.em-tog:hover { background: rgba(255,255,255,.024); }
.em-tog .em-switch { position: relative; top: auto; flex: none; }
.em-tog.dis, .em-sl.dis, .em-rg.dis, .em-cb.dis, .em-combo.dis { opacity: .45; pointer-events: none; }
.em button:disabled { cursor: default; }
.em-sl, .em-rg { position: relative; cursor: ew-resize; touch-action: none; }
.em-sl { height: 44px; }
.em-rg { height: 56px; }
.em-sl .cap { position: absolute; left: 2px; top: 1px; color: var(--muted); line-height: 20px; }
.em-pill { position: absolute; top: -1px; height: 26px; padding: 0 8px; border-radius: 8px; background: rgba(76, 157, 255, .133); background: color-mix(in srgb, var(--accent) 13.3%, transparent); line-height: 26px; color: var(--text); white-space: nowrap; }
.em-rg .em-pill { top: 0; }
.em-pill.l { left: 0; } .em-pill.r { right: 0; }
.em-track { position: absolute; left: 12px; right: 12px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.118); }
.em-sl .em-track { top: 30px; } .em-rg .em-track { top: 39px; }
.em-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); }
.em-thumb { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #f6f9ff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.em-thumb::after { content: ""; position: absolute; left: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.em-sl:hover .em-thumb, .em-rg:hover .em-thumb { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 15%, transparent); }
.em-sl.drag .em-thumb, .em-rg.drag .em-thumb { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 27%, transparent); }
.em-combo { position: relative; height: 36px; border-radius: var(--frame-radius); background: color-mix(in srgb, var(--control) 94%, transparent); cursor: pointer; }
.em-combo .cur { position: absolute; left: 10px; top: 8px; right: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-combo .arrow { position: absolute; right: 0; top: 0; width: 32px; height: 36px; border-radius: 0 var(--frame-radius) var(--frame-radius) 0; background: transparent; }
.em-combo .arrow::after { content: ""; position: absolute; left: 9px; top: 12px; border: 7px solid transparent; border-top: 9px solid var(--text); border-bottom: 0; }
.em-combo:hover .arrow, .em-combo.open .arrow { background: color-mix(in srgb, var(--accent) 30%, #1b2332); }
.em-popup { position: absolute; z-index: 30; background: #0d1219; border: 1px solid rgba(110, 130, 165, .35); border-radius: 6px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.em-popup div { height: 34px; padding: 0 4px; line-height: 34px; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.em-popup div:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.em-popup div.cur { background: color-mix(in srgb, var(--accent) 30%, #11182a); }
.em-btn { height: 36px; border-radius: var(--frame-radius); background: color-mix(in srgb, color-mix(in srgb, var(--card) 85%, var(--accent)) 90%, transparent); text-align: center !important; line-height: 36px; width: 100%; display: block; }
.em-btn:hover { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.em-btn.small { width: auto; height: auto; padding: 0 8px; line-height: 20px; display: inline-block; }
.em-cb { display: flex; align-items: center; gap: 8px; height: 36px; cursor: pointer; }
.em-cb i { width: 36px; height: 36px; border-radius: 8px; background: color-mix(in srgb, var(--control) 94%, transparent); position: relative; flex: none; }
.em-cb:hover i { background: color-mix(in srgb, var(--control) 70%, var(--accent)); }
.em-cb.on i::after { content: ""; position: absolute; left: 13px; top: 6px; width: 9px; height: 18px; border: solid var(--accent); border-width: 0 3.2px 3.2px 0; transform: rotate(45deg); }
.em-radio { display: flex; align-items: center; gap: 6px; height: 28px; cursor: pointer; }
.em-radio i { width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--control) 94%, transparent); position: relative; flex: none; }
.em-radio.on i::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--accent); }
.em-radio:hover i { background: color-mix(in srgb, var(--control) 70%, var(--accent)); }
.em-radio:disabled, .em-tree:disabled, .em-btn:disabled { opacity: .45; }
.em-tree { display: flex; align-items: center; gap: 8px; height: 24px; cursor: pointer; color: var(--text); }
.em-tree i { width: 0; height: 0; border: 5px solid transparent; border-left: 8px solid var(--muted); border-right: 0; transition: transform .1s; }
.em-tree.open i { transform: rotate(90deg); }
.em-kids { margin: 10px 0 0 21px; }
.em-arrow { width: 36px; height: 36px; border-radius: 8px; background: color-mix(in srgb, color-mix(in srgb, var(--card) 85%, var(--accent)) 90%, transparent); color: #fff; display: grid; place-items: center; flex: none; }
.em-arrow:hover { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.em-arrow.dis { color: #7a8294; pointer-events: none; }
.em-table { display: grid; row-gap: 4px; align-items: center; }
.em-tr { display: contents; }
.em-cell { display: flex; align-items: center; gap: 3px; min-height: 36px; min-width: 0; }
.em-cell .em-t { padding: 0; }
.em-table .em-rowflex { flex: none; }
.em-grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.em-colorbtn { height: 30px; border-radius: 6px; border: 1px solid rgba(255,255,255,.1); cursor: pointer; }
.em-input { height: 36px; border-radius: var(--frame-radius); background: color-mix(in srgb, var(--control) 94%, transparent); padding: 8px 10px; width: 100%; border: 0; outline: 0; color: var(--text); font: inherit; user-select: text; }
.em-keyrow { display: block; }
.em-keyval { color: var(--text); }
.em-rec { color: #9ec0ff; }
.em-rowflex { display: flex; gap: 8px; align-items: center; }
.em-rowflex > .em-btn { width: auto; flex: 1; }

/* toasts (notifications), drawn on the game screen */

.em-colorbtn-input { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.em-colorbtn-input::-webkit-color-swatch-wrapper { padding: 0; }
.em-colorbtn-input::-webkit-color-swatch { border: 0; border-radius: 6px; }
.em-colorbtn-input::-moz-color-swatch { border: 0; border-radius: 6px; }