/* GroupApps (launcher.js). Included by every title, so nothing here relies on
   game.css: a title may not load it. The panel is the enterprise prop on
   purpose, with pixel icons inside it.

   The icon takes the colour of what surrounds it. It defaults to the site's
   dark blue, lifted enough to find on the near-black page. A title in another
   frame sets --launcher-colour on :root. */

.launcher {
  --launcher-right: max(4px, env(safe-area-inset-right));
  position: absolute;
  top: max(4px, env(safe-area-inset-top));
  right: var(--launcher-right);
  z-index: 110;
  font: 13px/1.35 'Segoe UI', Arial, sans-serif;
}
/* With a mouse, overlay scrollbars take up no room but do take the clicks,
   so the icon stands clear of them. */
@media (hover: hover) and (pointer: fine) {
  .launcher { --launcher-right: 20px; }
}

/* ---------- The icon ---------- */

.launcher-button {
  position: relative;
  z-index: 2;
  display: block;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  color: var(--launcher-colour, #4f5f8f);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* A bigger target than it looks, for thumbs. */
.launcher-button::before { content: ''; position: absolute; inset: -11px -4px -11px -18px; }
.launcher-dots { display: block; width: 22px; height: 22px; }
.launcher-button[aria-expanded="true"],
.launcher-button:focus-visible { color: #fff1e8; }
.launcher-button:focus-visible { outline: 3px solid #ffec27; outline-offset: 2px; }
@media (hover: hover) {
  .launcher-button:hover { color: #fff1e8; filter: none; }
}
.launcher-button:active:not(:disabled) { box-shadow: none; transform: none; }

.launcher-scrim { position: fixed; inset: 0; z-index: 1; }

/* ---------- The panel ---------- */

.launcher-panel {
  position: fixed;
  top: var(--launcher-top, 32px);
  right: var(--launcher-right);
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(470px, calc(100vw - 8px));
  max-height: calc(100vh - var(--launcher-top, 32px) - 8px);
  max-height: calc(100svh - var(--launcher-top, 32px) - 8px);
  color: #1f2328;
  background: #eceef1;
  border: 3px solid #000;
  box-shadow: 0 0 0 2px #3d4a70, 6px 6px 0 rgba(0, 0, 0, 0.55);
  outline: none;
  animation: launcher-fade 0.12s linear;
}
@keyframes launcher-fade {
  from { opacity: 0; }
}

.launcher-header {
  flex: none;
  margin: 0;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  background: #336699;
}

.launcher-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px 10px; }

.launcher-label { margin: 0 0 4px; font-size: 11px; color: #5a6068; }
.launcher-recent { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #c8ccd2; }

.launcher-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.launcher-grid li { display: flex; }

/* ---------- Tiles ---------- */

.launcher-tile {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 44px;
  padding: 8px;
  color: #1f2328;
  background: #fff;
  border: 1px solid #c8ccd2;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.launcher-icon { display: block; flex: none; width: 32px; height: 32px; }
.launcher-name { font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }

.launcher-recent .launcher-tile { flex-direction: row; align-items: center; gap: 8px; padding: 4px 8px; }

.launcher-tile.is-unbuilt { color: #5a6068; background: #e2e4e8; }
.launcher-tile.is-unbuilt .launcher-icon { filter: grayscale(1); opacity: 0.75; }

/* The title currently open. */
.launcher-tile.is-current::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: #ffa300;
}

.launcher-chip {
  display: inline-block;
  padding: 0 4px;
  font-size: 10px;
  line-height: 15px;
  color: #4d535b;
  background: #f5f6f7;
  border: 1px solid #b5b9bf;
}

@media (hover: hover) {
  .launcher-tile:hover { background: #dfeaf5; border-color: #336699; }
  .launcher-tile.is-unbuilt:hover { background: #d9dce1; border-color: #9aa0a8; }
  .launcher-request:hover { color: #1f4d78; }
}
.launcher-panel a:focus-visible { outline: 2px solid #336699; outline-offset: 1px; }

/* ---------- Footer and toast ---------- */

.launcher-footer {
  flex: none;
  padding: 0 10px;
  background: #e2e4e8;
  border-top: 1px solid #c8ccd2;
}
.launcher-request {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  color: #336699;
}

.launcher-toast {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  margin: 0;
  padding: 6px 8px;
  font-size: 12px;
  color: #fff;
  background: #33383f;
  visibility: hidden;
}
.launcher-toast.is-showing { visibility: visible; animation: launcher-fade 0.12s linear; }

/* ---------- Phone: a bottom sheet, two across ---------- */

@media (max-width: 599px) {
  .launcher-scrim { background: rgba(5, 6, 10, 0.6); }
  .launcher-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 85vh;
    max-height: 85svh;
    border-width: 3px 0 0;
    box-shadow: 0 0 0 2px #3d4a70;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .launcher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .launcher-toast { font-size: 11px; bottom: calc(8px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .launcher-panel, .launcher-toast.is-showing { animation: none; }
}

/* ---------- The end-card line ---------- */

.launcher-line {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  margin: 6px 0 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  color: #6b6478;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* A bigger target than it looks, for thumbs. */
.launcher-line::before { content: ''; position: absolute; inset: -14px 0; }
.launcher-line:active:not(:disabled) { box-shadow: none; transform: none; }
/* Keeps it on one line on a phone. */
@media (max-width: 430px) {
  .launcher-line { font-size: 12px; }
}

/* ---------- The Titles list (homepage footer) ---------- */

.titles {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px 40px;
}
.titles-title {
  margin: 0;
  padding: 6px 10px;
  font: 400 14px/1.35 'Segoe UI', Arial, sans-serif;
  color: #fff;
  background: #336699;
}
.titles-table {
  width: 100%;
  border-collapse: collapse;
  font: 13px/1.35 'Segoe UI', Arial, sans-serif;
  color: #1f2328;
  background: #fff;
}
.titles-table th,
.titles-table td { padding: 6px 10px; text-align: left; vertical-align: top; border: 1px solid #c8ccd2; }
.titles-table th { font-weight: 400; color: #5a6068; background: #eceef1; }
.titles-table a { color: #336699; }
.titles-table .launcher-chip { white-space: nowrap; }