#apps { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

.app {
  position: absolute; pointer-events: auto; width: 76px; height: 76px; padding: 0; border: 0; background: none;
  cursor: pointer; border-radius: 22px; will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.app img {
  width: 100%; height: 100%; display: block; border-radius: 22px; user-select: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07);
  transition: transform .35s cubic-bezier(.2,.9,.1,1), box-shadow .35s;
}
.app:hover img, .app:focus-visible img, .app.open img {
  transform: scale(1.09);
  box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12), 0 0 34px -4px var(--accent);
}
.app:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.app-name {
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translate(-50%, -4px);
  font: 600 13px/1 var(--ui-font); color: #f3eef2; white-space: nowrap; letter-spacing: .01em;
  opacity: 0; transition: opacity .25s, transform .25s; text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
.app:hover .app-name, .app:focus-visible .app-name { opacity: 1; transform: translate(-50%, 0); }

#scrim { position: fixed; inset: 0; z-index: 4; background: rgba(6,2,8,.42); opacity: 0; pointer-events: none; transition: opacity .35s; }
#scrim.on { opacity: 1; pointer-events: auto; }

.card {
  position: fixed; z-index: 5; right: max(24px, 4vw); top: 50%; translate: 0 -50%;
  width: min(440px, calc(100vw - 32px)); max-height: min(78vh, 720px); overflow: auto;
  color: #efe9ee; font: 400 15px/1.55 var(--ui-font);
  background: rgba(22, 14, 24, .72); -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgba(255,255,255,.09); border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  transform-origin: center; overscroll-behavior: contain; scrollbar-width: thin;
}
.card header {
  position: sticky; top: 0; display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center;
  padding: 20px 20px 16px; background: linear-gradient(rgba(22,14,24,.96), rgba(22,14,24,.82));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.card header img { width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.card h2 { margin: 0; font: 700 21px/1.2 var(--ui-font); }
.card header p { margin: 3px 0 0; font-size: 14px; color: #bdb3bb; }
.card .x {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; font-size: 14px;
  color: #d9d0d7; background: rgba(255,255,255,.07); align-self: start;
}
.card .x:hover { background: rgba(255,255,255,.14); }
.card .x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card .body { padding: 6px 20px 22px; }
.card section { padding: 14px 0 2px; }
.card h3 {
  margin: 0 0 6px; font: 600 12px/1 var(--ui-font); letter-spacing: .06em; color: var(--accent);
}
.card p { margin: 0; }
.chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.07); color: #ddd4db; }
.links { display: flex; gap: 16px; flex-wrap: wrap; }
.links a { color: var(--accent); text-decoration: none; font-weight: 600; }
.links a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .app, .app img { width: 56px; height: 56px; border-radius: 16px; }
  .app-name { font-size: 12px; }
  .card { right: 16px; left: 16px; width: auto; top: auto; bottom: 16px; translate: none; max-height: 76vh; }
}