:root {
  --wa-game-safe-top: env(safe-area-inset-top, 0px);
  --wa-game-safe-right: env(safe-area-inset-right, 0px);
  --wa-game-safe-bottom: env(safe-area-inset-bottom, 0px);
  --wa-game-safe-left: env(safe-area-inset-left, 0px);
  --wa-game-focus: #f8fafc;
  --wa-game-error: #fb7185;
  --wa-game-success: #34d399;
  --wa-game-warning: #fbbf24;
}

html {
  color-scheme: dark;
  font-optical-sizing: auto;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
}

button,
[role="button"],
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

button,
[role="button"],
a {
  touch-action: manipulation;
}

button:active:not(:disabled),
[role="button"]:active,
.btn:active:not(:disabled) {
  transform: scale(0.97);
  transition-duration: 90ms !important;
}

:where(button, [role="button"], a, input, select):focus-visible {
  outline: 3px solid var(--wa-game-focus);
  outline-offset: 3px;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.5;
}

.wa-game-live {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wa-game-banner {
  position: fixed;
  top: calc(10px + var(--wa-game-safe-top));
  left: 50%;
  z-index: 4000;
  display: flex;
  max-width: min(92vw, 560px);
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -12px);
  transition: opacity 180ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wa-game-banner[data-visible="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

.wa-game-banner[data-tone="error"] {
  border-color: rgba(251, 113, 133, 0.75);
}

.wa-game-banner[data-tone="success"] {
  border-color: rgba(52, 211, 153, 0.75);
}

.wa-game-banner[data-tone="warning"] {
  border-color: rgba(251, 191, 36, 0.75);
}

.wa-game-state-chip {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 7px;
  font: 700 0.75rem/1.2 system-ui, sans-serif;
}

.wa-game-state-chip::before {
  width: 8px;
  height: 8px;
  background: #94a3b8;
  border-radius: 50%;
  content: "";
}

[data-game-state="active"] .wa-game-state-chip::before,
[data-game-state="ready"] .wa-game-state-chip::before {
  background: var(--wa-game-success);
}

[data-game-state="paused"] .wa-game-state-chip::before,
[data-game-state="reconnecting"] .wa-game-state-chip::before {
  background: var(--wa-game-warning);
}

[data-game-state="error"] .wa-game-state-chip::before,
[data-game-state="offline"] .wa-game-state-chip::before {
  background: var(--wa-game-error);
}

.wa-game-control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wa-game-control {
  min-width: 44px;
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
  }

  .wa-game-banner {
    transform: translate(-50%, 0);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .wa-game-banner,
  .wa-game-state-chip,
  .overlay,
  .modal-overlay {
    background-color: #0f172a !important;
    backdrop-filter: none !important;
  }
}

@media (prefers-contrast: more) {
  .wa-game-banner,
  .wa-game-state-chip,
  button,
  [role="button"] {
    border-color: currentColor !important;
  }
}
.game-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}