/* IMDCX installer sheet (imdcx-install.js), shared by the game and the
   invitation. Dark neon card: a bottom sheet on phones, centred on desktop. */
.imdcx-installer {
  position: fixed; inset: 0; z-index: 10600;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: #03040fc2; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 220ms ease;
  font-family: "Montserrat", "DM Sans", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.imdcx-installer.is-visible { opacity: 1; }
.imdcx-installer.is-leaving { pointer-events: none; }
/* text.css gives every p a serif face site-wide; the sheet opts out. */
.imdcx-installer :is(p, li, span, input, button) { font-family: "Montserrat", "DM Sans", Arial, sans-serif; }
.imdcx-installer-panel {
  position: relative; width: min(100%, 430px); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 30px 28px 24px; border: 1.5px solid transparent; border-radius: 28px; color: #e6e2f7;
  background:
    linear-gradient(180deg, #0c0d2ef5, #06071cfa) padding-box,
    linear-gradient(165deg, #c9b8ff, #5b6bff 25%, #4b2cf0 50%, #3f7bff 75%, #b98cff) border-box;
  box-shadow: 0 0 24px #5b3cff8c, 0 0 60px #3b2cff40, 0 30px 70px #000c;
  translate: 0 14px; transition: translate 240ms ease;
}
.imdcx-installer.is-visible .imdcx-installer-panel { translate: 0 0; }
.imdcx-installer svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.imdcx-installer-close {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 12px;
  background: none; color: #b3aed3; font: 400 26px/1 Arial, sans-serif; cursor: pointer;
}
.imdcx-installer-close:hover { background: #ffffff12; color: #fff; }
.imdcx-installer-badge {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #e6a2ff, #9b35f5 52%, #5a1bbd);
  box-shadow: 0 0 22px #a24dffa8, inset 0 1px 3px #ffffff80, inset 0 -3px 8px #2e0b6e;
}
.imdcx-installer-badge svg { width: 24px; height: 24px; fill: #180733; stroke: none; }
.imdcx-installer-title {
  margin: 0; color: #fff; text-align: center; font: 400 30px/1.15 Georgia, "Times New Roman", serif;
  text-shadow: 0 0 16px #b38cff55;
}
.imdcx-installer-text { margin: 10px 0 20px; color: #b3aed3; font-size: 14px; line-height: 1.6; text-align: center; }

.imdcx-installer-steps { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: none; }
.imdcx-installer-steps li {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid #8a7cff40; border-radius: 14px;
  background: #ffffff08; color: #f1eefb; font-size: 14px; line-height: 1.45;
}
.imdcx-installer-step-icon {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #2b2a7a, #4a2594); color: #e6dcff; box-shadow: inset 0 1px 0 #ffffff26;
}
.imdcx-installer-step-icon svg { width: 20px; height: 20px; }
.imdcx-installer-step-number { flex: none; color: #9b72ff; font-size: 12px; font-weight: 700; }
.imdcx-installer-step-text { min-width: 0; }
.imdcx-installer-panel[data-plan="installed"] .imdcx-installer-badge { background: radial-gradient(circle at 35% 28%, #b8ffe0, #2fbf8a 55%, #146b4d); box-shadow: 0 0 22px #3fe0a07a; }

.imdcx-installer-note { margin: 0 0 16px; color: #cbbcf2; font-size: 13px; line-height: 1.55; text-align: center; }
.imdcx-installer-note[hidden], .imdcx-installer-link[hidden], .imdcx-installer-steps[hidden] { display: none; }
.imdcx-installer-link {
  box-sizing: border-box; width: 100%; height: 46px; margin: 0 0 16px; padding: 0 14px; border: 1.5px solid #6c65b8b3;
  border-radius: 12px; background: #0b0d2c; color: #fff; font: 500 13px "Montserrat", Arial, sans-serif;
}

.imdcx-installer-actions { display: grid; gap: 10px; }
.imdcx-installer-actions button { font-family: inherit; cursor: pointer; }
.imdcx-installer-primary {
  min-height: 54px; padding: 0 20px; border: 1.5px solid #cdbcff; border-radius: 999px; color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  background:
    radial-gradient(ellipse 30% 90% at 8% 20%, #7fb4ff55, transparent 70%),
    radial-gradient(ellipse 30% 90% at 94% 20%, #ff7cf055, transparent 70%),
    linear-gradient(90deg, #2438ff, #4a26ee 38%, #8a2cf2 70%, #d03cf0);
  box-shadow: 0 0 0 4px #120f3d, 0 0 0 5.5px #7b5cff99, 0 0 22px #7b3cff99, inset 0 2px 3px #ffffff66;
}
.imdcx-installer-secondary {
  min-height: 48px; padding: 0 18px; border: 1px solid #8a7cff80; border-radius: 999px;
  background: #ffffff0a; color: #ece7fb; font-size: 14px; font-weight: 600;
}
.imdcx-installer-dismiss { min-height: 40px; border: 0; background: none; color: #a9a3cf; font-size: 13px; font-weight: 600; }
.imdcx-installer-dismiss:hover { color: #fff; }
.imdcx-installer :is(button, input):focus-visible { outline: 2px solid #b98cff; outline-offset: 3px; }
@media (hover: hover) {
  .imdcx-installer-primary:hover { filter: brightness(1.08); }
  .imdcx-installer-secondary:hover { background: #ffffff14; border-color: #b08cff; }
}

/* Phones: a sheet rising from the bottom, within thumb reach. */
@media (max-width: 560px) {
  .imdcx-installer { align-items: flex-end; padding: 0; }
  .imdcx-installer-panel {
    width: 100%; max-height: calc(100dvh - 24px); padding: 26px 20px calc(18px + env(safe-area-inset-bottom));
    border-radius: 26px 26px 0 0; translate: 0 40px;
  }
  .imdcx-installer-title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .imdcx-installer, .imdcx-installer-panel { transition: none; }
}