html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/***** Global dark background to ensure no white pages *****/
html, body {
  height: 100%;
}
body.theme-dark, body {
  color: #e6eef6;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(17, 214, 240, 0.08), transparent 60%),
              radial-gradient(900px 500px at 90% -20%, rgba(255, 211, 106, 0.06), transparent 60%),
              linear-gradient(180deg, #0b0f17, #101725 40%, #0b0f17);
  min-height: 100vh;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* ----- Battle page full-width grid layout ----- */
.battle-grid {
  display: grid;
  grid-template-columns: minmax(440px, 600px) 1fr 360px; /* widened left column by ~2/12 */
  gap: 1.25rem;
  align-items: start;
}

/* Keep the right column fixed in width and sticky so it doesn't move when center grows */
.battle-grid > section.stack-col:last-child {
  position: sticky;
  top: 84px; /* below navbar */
  align-self: start;
}

/* Ensure the watch list buttons can show full titles */
#publicRooms .btn,
#publicRooms button {
  white-space: normal; /* allow wrapping */
  text-overflow: clip;
  overflow: visible;
  text-align: left;
}

/* Make game and format toggles wrap to avoid pushing layout */
.game-toggle,
.format-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Cards/panels stretch full width of their columns */
.panel,
.feed-card,
.card.panel,
.card.feed-card {
  width: 100%;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
  .battle-grid {
    grid-template-columns: minmax(420px, 560px) 1fr 320px;
  }
}

@media (max-width: 1200px) {
  .battle-grid {
    grid-template-columns: minmax(400px, 520px) 1fr 300px;
  }
}

@media (max-width: 992px) {
  .battle-grid {
    grid-template-columns: 1fr; /* stack on tablet/mobile */
  }
  .battle-grid > section.stack-col:last-child {
    position: static; /* disable sticky on small screens */
  }
}

/* ----- Force visible buttons on dark theme (override Bootstrap) ----- */
:root {
  --pigdice-accent: #11d6f0;
  --pigdice-accent-hover: #16e6ff;
  --pigdice-accent-active: #10cbe5;
  --pigdice-bg-900: #0b0f17;
  --pigdice-secondary: #2a3347;
  --pigdice-secondary-hover: #35405a;
  --pigdice-secondary-border: #3a4357;
  --pigdice-text: #e6eef6;
}

/* Increase specificity and use !important to win against Bootstrap defaults and any isolation scope */
.btn.btn-primary {
  color: var(--pigdice-bg-900) !important;
  background-color: var(--pigdice-accent) !important;
  border-color: #0aa6be !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  color: var(--pigdice-bg-900) !important;
  background-color: var(--pigdice-accent-hover) !important;
  border-color: var(--pigdice-accent) !important;
}
.btn.btn-primary:active,
.btn.btn-primary.active,
.show > .btn.btn-primary.dropdown-toggle {
  color: var(--pigdice-bg-900) !important;
  background-color: var(--pigdice-accent-active) !important;
  border-color: var(--pigdice-accent) !important;
}
.btn.btn-primary:disabled,
.btn.btn-primary.disabled {
  color: var(--pigdice-bg-900) !important;
  background-color: rgba(17,214,240,.55) !important;
  border-color: rgba(17,214,240,.4) !important;
}

.btn.btn-secondary {
  color: var(--pigdice-text) !important;
  background-color: var(--pigdice-secondary) !important;
  border-color: var(--pigdice-secondary-border) !important;
}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
  color: var(--pigdice-text) !important;
  background-color: var(--pigdice-secondary-hover) !important;
  border-color: #4a556e !important;
}
.btn.btn-secondary:disabled,
.btn.btn-secondary.disabled {
  color: var(--pigdice-text) !important;
  background-color: var(--pigdice-secondary) !important;
  border-color: var(--pigdice-secondary-border) !important;
}