/* "Add to home screen" steps sheet, shared by the World game and the app (js/install.js). */
.install-sheet {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(3, 10, 44, 0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); animation: install-fade 0.18s ease-out;
  font-family: "Jersey 10", ui-monospace, monospace; letter-spacing: 0.02em;
}
.install-sheet.closing { animation: install-fade 0.18s ease-in reverse forwards; }
.install-card {
  width: min(420px, 100%); background: linear-gradient(180deg, #243263, #1c2750); color: #f1ecd8;
  border: 2px solid #070b1c; border-radius: 18px; padding: 22px 20px 18px; text-align: center;
  box-shadow: inset 0 0 0 1px #4a5c98, 0 18px 40px rgba(0, 0, 0, 0.5); animation: install-up 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.install-icon { border-radius: 16px; box-shadow: 0 0 0 2px #ffd23f, 0 6px 16px rgba(0, 0, 0, 0.4); }
.install-card h2 { font-family: "Titan One", "Arial Black", sans-serif; font-weight: 400; color: #ffd23f; font-size: 22px; line-height: 1.15; margin: 14px 0 6px; letter-spacing: 0; }
.install-card p { margin: 0 0 14px; font-size: 19px; color: #a9b3d6; line-height: 1.15; }
.install-card ol { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; text-align: left; }
.install-card li { display: flex; align-items: center; gap: 10px; background: rgba(3, 10, 44, 0.55); border: 1px solid #3b4c80; border-radius: 12px; padding: 9px 12px; font-size: 19px; line-height: 1.1; }
.install-card li b { color: #fff; font-weight: 400; }
.install-card li .n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #ffd23f; color: #06124f; font-family: "Titan One", sans-serif; font-size: 13px; }
.install-card li .ico { flex: none; width: 22px; display: grid; place-items: center; color: #7fd4ff; font-size: 18px; }
.install-ok {
  width: 100%; padding: 12px; border-radius: 12px; border: 2px solid #3a2a00; cursor: pointer;
  font-family: "Titan One", sans-serif; font-size: 17px; color: #06124f; background: linear-gradient(180deg, #ffe066, #e8b52a);
  box-shadow: inset 0 0 0 1px #fff3b0, 0 3px 0 #8a6410;
}
.install-ok:focus-visible { outline: 3px solid #7fd4ff; outline-offset: 2px; }
@keyframes install-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes install-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .install-sheet, .install-card { animation: none; } }

/* Title screen of the World: a link to the app and the home-screen button. */
.title-app { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 4px; }
.title-app:empty { display: none; }
.title-app-link, .title-app-add {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; font: inherit; font-size: 17px; line-height: 1.1;
  text-decoration: none; cursor: pointer; color: #f1ecd8; background: rgba(3, 10, 44, 0.6); border: 1px solid #3b4c80;
}
.title-app-link:hover, .title-app-add:hover { border-color: #7fd4ff; }
.title-app-add { color: #ffd23f; border-color: rgba(255, 210, 63, 0.55); }