/* ssb-title.css — shared game title, used by BOTH the lobby (index.html) and the game
   page (super-soldier-battle-forest-mountain.html) so the title looks identical on both.
   Saira Condensed main line + Rajdhani spaced sub line. Requires the Google Fonts:
   Rajdhani:wght@600 and Saira+Condensed:wght@800 (both pages load them).
   The !important rules let this win over each page's older title CSS (Orbitron overrides,
   gradient text, etc.) without editing those rules. */
.ssb-title {
  margin: 0 !important;
  padding: 10px 32px 12px !important;
  text-align: center !important;
  z-index: 50;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  font-family: 'Orbitron', sans-serif !important;
  background: radial-gradient(ellipse at center, rgba(5,8,12,.55) 0%, rgba(5,8,12,.25) 55%, transparent 75%) !important;
  -webkit-text-fill-color: initial;
  border: 0 !important;
}
.ssb-title .main {
  display: block !important;
  font: 800 clamp(30px,5vw,60px) 'Orbitron', sans-serif !important;
  letter-spacing: .06em;
  line-height: .9;
  color: #f3f3f0 !important;
  -webkit-text-fill-color: #f3f3f0;
  background: none !important;
  text-shadow: 0 3px 8px rgba(0,0,0,.6);
  -webkit-text-stroke: 0 !important;
}
.ssb-title .sub {
  display: block !important;
  font: 600 clamp(10px,1.1vw,14px) 'Rajdhani', sans-serif !important;
  letter-spacing: .55em;
  padding-left: .55em;
  color: rgba(233,238,240,.8) !important;
  -webkit-text-fill-color: rgba(233,238,240,.8);
  background: none !important;
  margin-top: 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* MOBILE ONLY: let the long title wrap instead of overflowing off-screen, and give
   the title block a fixed 250px height (content vertically centered). Applies to both
   pages' mobile view. Desktop is unaffected. */
@media (max-width: 768px) {
  .ssb-title {
    white-space: normal !important;
    padding: 6px 16px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  /* Smaller so the title wraps to ~2 lines (not 3) and doesn't eat the vertical
     space the sign-in buttons need on short phones. */
  .ssb-title .main {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 0.95 !important;
    font-size: clamp(28px, 11vw, 44px) !important;
  }
}