/* Mythos menu recreation. Geometry and colors come from MythosScreen.java; see gui.js. */
@font-face {
  font-family: "Google Sans";
  src: url("/assets/fonts/google-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

.mg { position: relative; --mg-font: "Google Sans", "Product Sans", system-ui, sans-serif; }

/* The game "screen": world backdrop + the client's dim layer (0xA6070B0D). */
.mg-frame {
  position: relative; border-radius: 18px; overflow: hidden; isolation: isolate; background: #0d1214;
  box-shadow: 0 50px 120px -50px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .07);
}
.mg-screen { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; }
.mg-world { position: absolute; inset: 0; background: radial-gradient(120% 70% at 70% 0%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(180deg, #4f86e6 0%, #79a8f2 48%, #a9c9f7 78%, #cfe1fa 100%); }
.mg-dim { position: absolute; inset: 0; background: rgba(7, 11, 13, .651); }
.mg-pan { position: absolute; inset: 0; }

.mg-stage {
  position: absolute; left: 0; top: 0; width: 900px; height: 560px; transform-origin: 0 0;
  font-family: var(--mg-font); font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  user-select: none; -webkit-user-select: none; color: #edf5f2;
}
.mg-window { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform .38s cubic-bezier(.2, .8, .2, 1), opacity .32s ease; }
.mg.mg-hidden .mg-window { transform: translateY(8px) scale(.97); opacity: 0; }
.mg-stage *, .mg-toasts * { box-sizing: border-box; }
.mg-r { position: absolute; }
.mg-t { position: absolute; white-space: pre; pointer-events: none; }
.mg-i { position: absolute; pointer-events: none; overflow: visible; }
.mg-img { position: absolute; pointer-events: none; max-width: none; }
.mg-fill { position: absolute; inset: 0; pointer-events: none; }
.mg-top { -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
.mg-clip { overflow: hidden; }
.mg-ell { overflow: hidden; text-overflow: ellipsis; }

/* Ambient accent glows drift like the client's sin(t / 4 s) * 18. */
.mg-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.mg-drift-a { animation: mg-drift 25.1s ease-in-out infinite; }
.mg-drift-b { animation: mg-drift 25.1s ease-in-out infinite reverse; }
@keyframes mg-drift { 0%, 50%, 100% { transform: translateX(0); } 25% { transform: translateX(18px); } 75% { transform: translateX(-18px); } }

/* Hit areas. Hover easing approximates the client's exp(-16·dt) approach. */
.mg-btn { position: absolute; display: block; padding: 0; margin: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; outline: none; text-align: left; -webkit-tap-highlight-color: transparent; }
.mg-btn:focus-visible { box-shadow: 0 0 0 2px var(--mg-focus, rgba(146, 221, 197, .6)); }
.mg-btn, .mg-btn .mg-t, .mg-btn .mg-i, .mg-btn .mg-img { transition: background-color .18s ease-out, color .18s ease-out, transform .18s ease-out, opacity .18s ease-out; }

/* Sidebar */
.mg-nav { border-radius: 7px; background: var(--bg); }
.mg-nav:hover, .mg-nav:focus-visible { background: var(--bg-h); }
.mg-nav .mg-label { color: var(--fg); }
.mg-nav:hover .mg-label, .mg-nav:focus-visible .mg-label { color: var(--fg-h); transform: translateX(2px); }
.mg-nav:hover .mg-ico, .mg-nav:focus-visible .mg-ico { transform: translateX(1px); }
.mg-marker { transition: top .3s cubic-bezier(.2, .8, .2, 1); }
.mg-logo { transition: transform .18s ease-out; }
.mg-logo-hit:hover .mg-logo { transform: scale(1.0588); }

/* button() */
.mg-button { border-radius: 6px; background: var(--bg); }
.mg-button:hover, .mg-button:focus-visible { background: var(--bg-h); transform: translateY(-.5px); }

/* Search: surface(border) + inset fill */
.mg-search { border-radius: 8px; background: var(--bd); }
.mg-search-fill { position: absolute; inset: 1px; border-radius: 7px; background: var(--bg); transition: background-color .18s ease-out; }
.mg-search:hover .mg-search-fill, .mg-search:focus-within .mg-search-fill { background: var(--bg-h); }
.mg-search input {
  position: absolute; border: 0; outline: 0; background: transparent; padding: 0; margin: 0; border-radius: 0;
  font: 500 12px/16px var(--mg-font); letter-spacing: -0.018em; color: var(--fg); caret-color: var(--fg); -webkit-appearance: none; appearance: none;
}
.mg-search input::placeholder { color: var(--ph); opacity: 1; }
.mg-search input::-webkit-search-cancel-button, .mg-search input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.mg-kbd { transition: opacity .15s; }
.mg-search:focus-within .mg-kbd, .mg-search.has-text .mg-kbd { opacity: 0; }
.mg-clear { border-radius: 4px; background: var(--bg); display: none; }
.mg-search.has-text .mg-clear { display: block; }
.mg-clear:hover { background: var(--bg-h); }
.mg-clear .mg-t { color: var(--fg); }
.mg-clear:hover .mg-t { color: var(--fg-h); }

/* Gamemodes trigger + menu */
.mg-trigger { border-radius: 6px; background: var(--bg); }
.mg-trigger.open { background: var(--bg-o); }
.mg-trigger:hover, .mg-trigger:focus-visible { background: var(--bg-h); }
.mg-trigger .mg-label { color: var(--fg); }
.mg-trigger:hover .mg-label { color: var(--fg-h); transform: translateX(1px); }
.mg-chev { transition: transform .24s cubic-bezier(.2, .8, .2, 1) !important; transform: rotate(90deg); }
.mg-trigger.open .mg-chev { transform: rotate(270deg); }
.mg-menu { border-radius: 8px; background: var(--bd); z-index: 20; visibility: hidden;
  clip-path: inset(0 0 100% 0 round 8px); transition: clip-path .24s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .24s; }
.mg-menu.open { clip-path: inset(0 0 0 0 round 8px); visibility: visible; transition: clip-path .24s cubic-bezier(.2, .8, .2, 1); }
.mg-menu-fill { position: absolute; inset: 1px; border-radius: 7px; background: var(--bg); }
.mg-menu-hl { opacity: 0; transition: top .14s ease-out, opacity .16s ease-out; }
.mg-menu:hover .mg-menu-hl { opacity: 1; }
.mg-opt { border-radius: 5px; }
.mg-opt .mg-label { color: var(--fg); }
.mg-opt:hover .mg-label, .mg-opt:focus-visible .mg-label { color: var(--fg-h); transform: translateX(1.5px); }
.mg-opt .mg-check { opacity: 0; transition: opacity .3s ease .06s; }
.mg-menu.open .mg-opt.sel .mg-check { opacity: 1; }

/* Module cards: gradientSurface (border + inset four-corner gradient) */
.mg-card { border-radius: 8px; background: var(--bd); }
.mg-card.on { background: var(--bd-on); }
.mg-card:hover, .mg-card:focus-visible { background: var(--bd-h); }
.mg-card .mg-hov { opacity: 0; transition: opacity .18s ease-out; }
.mg-card:hover .mg-hov, .mg-card:focus-visible .mg-hov { opacity: 1; }
.mg-card .mg-mi { color: var(--ic); transition: color .28s ease; }
.mg-card.on .mg-mi { color: var(--ic-on); }
.mg-card .mg-dcolor { transition: opacity .28s ease; }
.mg-desc { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

/* Switch: settles like the client Spring at its default 180 ms. */
.mg-toggle { position: absolute; background: var(--t-off); transition: background-color .28s cubic-bezier(.22, .9, .3, 1); }
.mg-toggle:hover { background: var(--t-off-h); }
.on > .mg-toggle { background: var(--t-on); }
.on > .mg-toggle:hover { background: var(--t-on-h); }
.mg-knob { position: absolute; border-radius: 50%; transition: transform .28s cubic-bezier(.22, 1.08, .36, 1); }
.mg-knob .k-off, .mg-knob .k-on { position: absolute; inset: 0; border-radius: 50%; transition: opacity .28s ease; }
.mg-knob .k-on { opacity: 0; }
.on > .mg-toggle .mg-knob { transform: translateX(var(--travel)); }
.on > .mg-toggle .k-on { opacity: 1; }
.on > .mg-toggle .k-off { opacity: 0; }

/* Scroll viewports keep native wheel/touch scrolling; the client-style thumb is drawn beside them. */
.mg-scroll { position: absolute; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: auto; -webkit-overflow-scrolling: touch; }
.mg-scroll::-webkit-scrollbar { display: none; }

/* Theme cards */
.mg-theme { border-radius: 11px; background: var(--bd); }
.mg-theme.active { background: var(--bd-a); }
.mg-theme:hover, .mg-theme:focus-visible { background: var(--bd-h); transform: translateY(-2px); }
.mg-theme.active:hover, .mg-theme.active:focus-visible { background: var(--bd-a); }
.mg-theme .mg-hov { opacity: 0; transition: opacity .18s ease-out; }
.mg-theme:hover .mg-hov, .mg-theme:focus-visible .mg-hov { opacity: 1; }
.mg-theme .mg-dot { opacity: 0; transition: opacity .18s ease-out; }
.mg-theme:hover .mg-dot, .mg-theme:focus-visible .mg-dot { opacity: 1; }
.mg-enter { animation: mg-enter .26s cubic-bezier(.33, 1, .68, 1) both; }
@keyframes mg-enter { from { translate: 0 16px; } to { translate: 0 0; } }
.mg-badge { position: absolute; height: 14px; border-radius: 4px; display: flex; align-items: center; gap: 3px; padding: 0 6px 0 5px; }
.mg-badge .mg-i { position: static; flex: none; }
.mg-badge-t { font-size: 7.5px; line-height: 1; white-space: nowrap; letter-spacing: .01em; }

/* Page reveal (client pageReveal: 180 ms ease-out cubic). */
/* The page layer spans the whole window and sits above the sidebar, so it must let clicks through
   everywhere except its own controls (otherwise the category buttons underneath can't be clicked). */
.mg-page { position: absolute; inset: 0; pointer-events: none; animation: mg-page .18s cubic-bezier(.33, 1, .68, 1) both; }
.mg-page .mg-btn, .mg-page .mg-search, .mg-page .mg-scroll, .mg-page .mg-menu.open { pointer-events: auto; }
@keyframes mg-page { from { opacity: 0; } to { opacity: 1; } }

/* Toasts live in screen space (HUD units: screen height / 900), like MythosNotifications. */
.mg-toasts { position: absolute; left: 0; top: 0; height: 900px; transform-origin: 0 0; pointer-events: none; overflow: visible;
  font-family: var(--mg-font); font-weight: 500; -webkit-font-smoothing: antialiased; color: #edf5f2; }
.mg-toast { position: absolute; width: 252px; height: 46px; transition: top .25s cubic-bezier(.2, .8, .2, 1); }
.mg-toast-in { position: absolute; inset: 0; transition: transform .36s cubic-bezier(.34, 1.3, .64, 1), opacity .36s cubic-bezier(.33, 1, .68, 1); }
.mg-toast.entering .mg-toast-in { transform: translateX(292px); opacity: 0; }
.mg-toast.leaving .mg-toast-in { transform: translateX(88px); opacity: 0; transition: transform .3s ease-in, opacity .3s ease-in; }
.mg-toast.pulse .mg-toast-in { animation: mg-pulse .28s ease; }
@keyframes mg-pulse { 50% { scale: 1.045; } }
.mg-count { transform-origin: 0 50%; animation: mg-count 2.8s linear both; }
@keyframes mg-count { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.mg-mini { transition: background-color .26s ease; }
.mg-mini-k { transition: transform .26s cubic-bezier(.2, .8, .2, 1), background-color .26s ease; }

/* Phones: keep a readable scale and let the screen pan sideways. */
.mg.mg-compact .mg-screen { aspect-ratio: auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mg.mg-compact .mg-screen::-webkit-scrollbar { display: none; }
.mg.mg-compact .mg-pan { right: auto; }
.mg.mg-compact .mg-world, .mg.mg-compact .mg-dim { position: absolute; width: 100%; min-width: 600px; }

@media (prefers-reduced-motion: reduce) {
  .mg *, .mg *::before, .mg *::after { animation: none !important; transition: none !important; }
  .mg.mg-hidden .mg-window { transform: none; opacity: 1; }
}