:root {
  --surface-primary: #0B0D10;
  --surface-secondary: #141820;
  --surface-elevated: #1A202A;
  --text-primary: #F4EFE4;
  --text-secondary: #B8B0A2;
  --text-tertiary: #7D766C;
  --border-default: #34302A;
  --border-subtle: #22262D;
  --accent-primary: #D6A84F;
  --accent-hover: #F0C66A;
  --status-success: #6DBA73;
  --status-warning: #E0A34A;
  --status-error: #D9625C;
  --status-info: #70A7D8;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --control-pad-size: 320px;
  --control-knob-size: 116px;
  --control-button-width: 168px;
  --control-button-height: 104px;
  --control-primary-width: 196px;
  --control-primary-height: 124px;
}

html,
body {
  min-height: 100dvh;
  background: var(--surface-primary);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  touch-action: none;
}

#canvas {
  height: 720px !important;
  left: 50% !important;
  outline: none;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(var(--game-scale, 1));
  transform-origin: center center;
  width: 1280px !important;
}

#canvas:focus-visible {
  box-shadow: inset 0 0 0 var(--space-1) var(--accent-primary);
}

#spinner {
  align-items: center;
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  display: none;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

#spinner span {
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

#spinner.pending,
#spinner.loading,
#spinner.error {
  display: flex;
}

#spinner.pending {
  animation: pulse 480ms cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
  border-color: var(--accent-primary);
}

#spinner.loading {
  animation: spin 1200ms linear infinite;
  border-left-color: var(--accent-primary);
}

#spinner.error {
  animation: none;
  border-color: var(--status-error);
}

.fallback-panel {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  box-sizing: border-box;
  left: 50%;
  max-width: 420px;
  padding: var(--space-8);
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--space-12));
}

.fallback-panel h1 {
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 var(--space-4);
}

.fallback-panel p {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

a {
  color: var(--status-info);
  transition: color 120ms ease-out;
}

a:hover {
  color: var(--accent-hover);
}

a:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: var(--space-1);
}

.mobile-controls {
  display: none;
}

body.mobile-controls-active .mobile-controls {
  bottom: max(var(--space-6), env(safe-area-inset-bottom));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--control-pad-size) auto;
  justify-content: space-between;
  left: max(var(--space-6), env(safe-area-inset-left));
  pointer-events: none;
  position: fixed;
  right: max(var(--space-6), env(safe-area-inset-right));
  z-index: 20;
}

.mobile-controls__pad {
  align-self: end;
  background: color-mix(in srgb, var(--surface-secondary) 68%, transparent);
  border: 2px solid var(--border-default);
  border-radius: 50%;
  box-sizing: border-box;
  height: var(--control-pad-size);
  pointer-events: auto;
  position: relative;
  touch-action: none;
  user-select: none;
  width: var(--control-pad-size);
}

.mobile-controls__pad::before {
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  content: "";
  inset: var(--space-8);
  position: absolute;
}

.mobile-controls__knob {
  background: color-mix(in srgb, var(--accent-primary) 72%, var(--surface-elevated));
  border: 2px solid var(--accent-hover);
  border-radius: 50%;
  box-sizing: border-box;
  height: var(--control-knob-size);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 120ms ease-out;
  width: var(--control-knob-size);
}

.mobile-controls__pad.is-active .mobile-controls__knob {
  opacity: 0.95;
}

.mobile-controls__actions {
  align-self: end;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, max(var(--control-button-width), var(--control-primary-width)));
  pointer-events: auto;
}

.mobile-controls__button {
  align-items: center;
  background: color-mix(in srgb, var(--surface-secondary) 82%, transparent);
  border: 2px solid var(--border-default);
  box-sizing: border-box;
  color: var(--text-primary);
  display: inline-flex;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  height: var(--control-button-height);
  justify-content: center;
  line-height: 1;
  min-width: 0;
  padding: 0 var(--space-4);
  touch-action: none;
  user-select: none;
  width: 100%;
}

.mobile-controls__button--primary {
  background: color-mix(in srgb, var(--accent-primary) 82%, var(--surface-secondary));
  color: var(--surface-primary);
  height: var(--control-primary-height);
  width: var(--control-primary-width);
}

.mobile-controls__button.is-active,
.mobile-controls__button:active {
  border-color: var(--accent-hover);
  transform: translateY(var(--space-1));
}

.mobile-controls__button:focus-visible {
  outline: 3px solid var(--accent-hover);
  outline-offset: var(--space-1);
}

@media (orientation: portrait) {
  body.mobile-controls-active .mobile-controls {
    bottom: max(var(--space-8), env(safe-area-inset-bottom));
    grid-template-columns: var(--control-pad-size);
    row-gap: var(--space-6);
  }

  .mobile-controls__actions {
    grid-row: 1;
    justify-self: end;
  }

  .mobile-controls__pad {
    grid-row: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  #spinner.pending,
  #spinner.loading {
    animation: none;
  }

  a {
    transition: none;
  }

  .mobile-controls__knob {
    transition: none;
  }
}