/* SudoSketch purple palette and compact command area for the direct board. */
body {
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 58, 237, 0.18), transparent 31%),
    radial-gradient(circle at 94% 12%, rgba(91, 33, 182, 0.10), transparent 28%),
    linear-gradient(145deg, #070b1b, #0b1230);
}

.play-site-nav {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

#app.app-shell {
  width: min(1120px, calc(100% - 40px));
  padding-top: 20px;
}

#app .app-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 22px;
  margin-bottom: 28px;
  padding: 18px 20px 16px;
  border-color: rgba(167, 139, 250, 0.25);
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.13), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
    rgba(9, 15, 37, 0.88);
}

#app .topbar-actions {
  justify-content: flex-end;
}

#app button.primary,
#app .topbar-actions button.primary {
  background: linear-gradient(180deg, #8b5cf6, #6532cb);
  box-shadow:
    0 12px 30px rgba(124, 58, 237, 0.30),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

#app .daily-context-bar {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid rgba(167, 139, 250, 0.20);
  border-radius: 0;
  background: transparent;
}

#app .daily-context-label {
  color: #a78bfa;
}

#app .daily-context-actions .current {
  border-color: rgba(167, 139, 250, 0.62);
  background: #6d3dd2;
}

#app .daily-context-actions a:hover,
#app .daily-context-actions button:hover {
  border-color: rgba(196, 181, 253, 0.56);
  background: rgba(124, 58, 237, 0.19);
}

@media (max-width: 760px) {
  .play-site-nav,
  #app.app-shell {
    width: calc(100% - 24px);
  }

  #app.app-shell {
    padding-top: 12px;
  }

  #app .app-topbar {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 18px;
    padding: 16px;
  }

  #app .topbar-actions {
    justify-content: stretch;
  }

  #app .topbar-actions button {
    flex: 1 1 140px;
  }

  #app .daily-context-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  #app .daily-context-actions {
    justify-content: flex-start;
  }
}