.pwa-install-button {
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  padding: 0 16px;
  border: 1px solid #fff1ae;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffe77e, #d99c21);
  color: #19352f;
  font: 800 15px/1 system-ui, sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
  backdrop-filter: blur(5px);
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.pwa-install-button:disabled { opacity: .64; cursor: wait; }
@media (hover: hover) {
  .pwa-install-button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
}
@media (max-width: 700px) { .pwa-install-button { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .pwa-install-button { transition: none; } }
.pwa-install-button[aria-busy="true"]::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 9px;
  border: 2px solid rgba(25, 53, 47, .32);
  border-top-color: #19352f;
  border-radius: 50%;
  vertical-align: -3px;
  animation: pwa-button-spin .72s linear infinite;
}
@keyframes pwa-button-spin { to { transform: rotate(360deg); } }
.pwa-status {
  position: fixed;
  z-index: 1600;
  left: 50%;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(420px, calc(100vw - 28px));
  padding: 11px 14px;
  border: 1px solid #ffe277;
  border-radius: 12px;
  background: rgba(7, 59, 54, .96);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .42);
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.pwa-status.show { opacity: 1; transform: translate(-50%, 0); }
.pwa-status[hidden] { display: none; }
.pwa-status span {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffe55c;
  box-shadow: 0 0 10px rgba(255, 229, 92, .9);
}
.pwa-status[data-tone="progress"] span { animation: pwa-status-pulse .8s ease-in-out infinite alternate; }
.pwa-status[data-tone="success"] span { background: #58ef8b; box-shadow: 0 0 10px rgba(88, 239, 139, .9); }
.pwa-status[data-tone="error"] span { background: #ff6b6b; box-shadow: 0 0 10px rgba(255, 107, 107, .9); }
.pwa-status b { font: 700 14px/1.35 system-ui, sans-serif; }
@keyframes pwa-status-pulse { to { opacity: .38; transform: scale(.72); } }
.pwa-guide { width: min(360px, calc(100vw - 28px)); padding: 0; border: 1px solid #ffe277; border-radius: 18px; background: #073b36; color: #fff; box-shadow: 0 12px 42px #000b; }
.pwa-guide::backdrop { background: #001b19b8; }
.pwa-guide section { padding: 16px 18px 18px; }
.pwa-guide header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pwa-guide header strong { color: #ffe55c; font-size: 19px; }
.pwa-guide header button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #ffffff1c; color: #fff; font-size: 24px; cursor: pointer; }
.pwa-guide ol { margin: 14px 0 0; padding-left: 24px; font-size: 16px; line-height: 1.55; }
.pwa-guide li + li { margin-top: 7px; }
@media (display-mode: standalone), (display-mode: fullscreen) { .pwa-install-button { display: none !important; } }
@supports (padding: env(safe-area-inset-top)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  body.game-mode .app-shell { width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)); height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  body.game-mode { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .pwa-install-button { margin-bottom: env(safe-area-inset-bottom); }
  .pwa-guide section { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}
