.game-panel {
  padding: 0;
}

.game-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
}

.game-toolbar .page-title,
.game-toolbar .page-subtitle {
  margin: 0;
}

.game-toolbar .page-subtitle {
  margin-top: 4px;
}

.game-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.game-icon-button {
  width: 38px;
  min-width: 38px;
  padding-inline: 0;
  font-size: 22px;
  line-height: 1;
}

.web-game-stage:fullscreen {
  width: 100vw;
  height: 100dvh;
  min-height: 0;
}

.web-game-stage {
  position: relative;
  width: 100%;
  height: calc(100dvh - var(--header-height) - 106px);
  min-height: 520px;
  overflow: hidden;
  background: #111820;
}

.web-game-stage iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #111820;
}

.web-game-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: var(--spacing-xl);
  text-align: center;
  color: var(--color-text-secondary);
  background: #111820;
}

.web-game-loader {
  width: 50px;
  aspect-ratio: 1;
  margin: 0 auto 10px;
  border: 3px solid #eef3f6;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #eef3f6 0 14%, #26313a 15% 22%, transparent 23%),
    linear-gradient(#ef5350 0 44%, #26313a 45% 55%, #eef3f6 56%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .24), 0 8px 22px rgba(0, 0, 0, .28);
  animation: web-game-loader-spin 1.15s cubic-bezier(.5, .1, .5, .9) infinite;
}

.web-game-placeholder.is-error .web-game-loader {
  animation: none;
  filter: grayscale(1);
}

.web-game-placeholder strong {
  color: var(--color-text-primary);
}

.web-game-placeholder.is-hidden {
  display: none;
}

@keyframes web-game-loader-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(.92); }
  100% { transform: rotate(360deg) scale(1); }
}


.pwa-install-dialog {
  width: min(92vw, 480px);
  padding: 0;
  color: var(--color-text-primary);
  background: transparent;
  border: 0;
}

.pwa-install-dialog::backdrop {
  background: rgba(4, 9, 15, .78);
  backdrop-filter: blur(4px);
}

.pwa-install-dialog-card {
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.pwa-install-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.pwa-install-dialog h3,
.pwa-install-dialog p {
  margin-top: 0;
}

.pwa-install-dialog ol {
  display: grid;
  gap: var(--spacing-sm);
  padding-left: 1.4rem;
  color: var(--color-text-secondary);
}

html.pwa-game-shell,
html.pwa-game-shell body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111820;
}

.pwa-game-shell #playerHub .topnav,
.pwa-game-shell #notificationCenterPanel,
.pwa-game-shell #mobileMoreMenu,
.pwa-game-shell #mobileBottomNav,
.pwa-game-shell .game-toolbar,
.pwa-game-shell .main-content > [data-hub-panel]:not([data-hub-panel="game"]) {
  display: none !important;
}

.pwa-game-shell #playerHub,
.pwa-game-shell .main-content,
.pwa-game-shell .game-panel,
.pwa-game-shell .web-game-stage {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding: 0;
  margin: 0;
}

.pwa-game-shell .game-panel {
  display: block !important;
}

.pwa-game-shell .web-game-stage {
  position: fixed;
  inset: 0;
}

@media (max-width: 768px) {
  .game-toolbar {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .game-toolbar .page-subtitle {
    display: none;
  }

  .game-toolbar-actions {
    gap: 6px;
  }

  .web-game-stage {
    height: calc(100dvh - var(--header-height) - 58px - 64px);
    min-height: 420px;
  }
}