/* Landing page (default.asp) on tablets and phones. Desktop is untouched; everything is scoped to .default-page and
   overrides main.css's fixed widths (login 252px, top bar 260px, Google buttons 250px) and the headline's 65px indent. */

/* the phones-only Play / Login pair under the logo */
.default-page .lp-quick { display: none; }

@media (max-width: 991.98px) {
  /* Top 10: name on the rank's line, points right */
  .default-page .panel-primary > .panel-body li.list-group-item { display: flex; align-items: center; gap: 4px; }
  .default-page .panel-primary > .panel-body li.list-group-item > a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .default-page .panel-primary > .panel-body li.list-group-item .top-pts { order: 9; }
  .default-page .login-container > .login-with-google-btn { white-space: nowrap; }
}

/* tablets: register form first, then the Top 10, both full width (the 4-column Top 10 cut the names to a few letters) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .default-page .container-bottom { display: flex; flex-direction: column-reverse; gap: 24px; }
  .default-page #feature .col-sm-4, .default-page #feature .col-sm-8 { float: none; width: 100%; }
  .default-page #feature .col-sm-4 .panel-primary { max-width: 560px; margin: 0 auto; }
}

@media (max-width: 767.98px) {
  /* top bar: More games + language as two small pills on the right */
  .default-page .top-bar { padding: 6px 0; line-height: 1.2; }
  .default-page .top-bar .container { width: 100%; padding: 0 12px; }
  .default-page .top-bar .row { margin: 0; }
  .default-page .top-bar .pull-right { float: none !important; width: auto !important; display: flex; justify-content: flex-end; gap: 6px; padding: 0; }
  .default-page .top-bar .btn-or2 {
    padding: 5px 12px; border-radius: 999px; font-size: 13px; line-height: 1.2;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  }

  /* Play for free and Login under the logo, as the first thing on the screen; with JavaScript the login card
     stays closed until Login is tapped (without it, the card is simply shown) */
  .default-page .lp-quick { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 4px; }
  .default-page .lp-quick__play, .default-page .lp-quick__login {
    display: block; width: 100%; min-height: 50px; padding: 13px 16px; box-sizing: border-box; border-radius: 12px;
    font: bold 18px/1.2 Roboto, Arial, sans-serif; text-align: center; cursor: pointer;
  }
  .default-page .lp-quick__play {
    border: 0; background: linear-gradient(180deg, #9ad34a, #5aa608); box-shadow: 0 3px 0 #3d7f15, 0 6px 16px -6px rgba(0,0,0,0.5);
    color: #fff; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  }
  .default-page .lp-quick__play:hover, .default-page .lp-quick__play:focus { color: #fff; text-decoration: none; filter: brightness(1.05); }
  .default-page .lp-quick__login { border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.12); color: #fff; font-size: 17px; }
  .default-page .lp-quick__login.is-on { background: rgba(255,255,255,0.22); }
  .lp-js .default-page .login-container:not(.is-open) { display: none; }
  .default-page .login-container.is-open { margin-top: 12px; }

  /* logo and the login card */
  .default-page .navbar { margin-bottom: 0; min-height: 0; }
  .default-page .header-bg { flex-direction: column; align-items: stretch; padding: 10px 16px 14px; background-size: cover; }
  .default-page .navbar-brand-pm { display: block; max-width: 230px; margin: 0 auto 10px; }
  /* The login card as one grid: username, password, then Login and Login Google side by side, Recover Password
     centred under them. The wrappers between (.login-form, #loginForm, .d-flex, .col) only lose their boxes
     (display: contents), so the fields and the Login button stay inside the form; jQuery's hide() on #loginForm
     (Recover Password) still hides all of it. The Google button sits straight in .login-container (an extra </div>
     closes .loginFB-container before it); that wrapper only holds the hidden Facebook button and goes. */
  .default-page .login-container {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; width: 100%;
  }
  .default-page .login-container .login-form, .default-page #loginForm, .default-page #loginForm .d-flex .col { display: contents; }
  .default-page #loginForm .d-flex { display: contents !important; }   /* main.css: .d-flex { display: flex !important } */
  .default-page .login-container .loginFB-container { display: none; }
  /* placed in this order, full width except the Login / Google pair; absent pieces take no row */
  .default-page #recoverMsg { order: 1; grid-column: 1 / -1; margin: 0 !important; text-align: center !important; }
  .default-page #loginForm .form-group { margin: 0; }
  .default-page #loginForm .form-group { order: 2; grid-column: 1 / -1; }
  .default-page .login-form .form-inline .form-group input.form-control { width: 100%; height: 44px; font-size: 16px; }
  .default-page #loginForm .d-flex .col > br { display: none; }   /* a <br> ignores order and would open an empty first row */
  .default-page #loginForm .d-flex .col > font, .default-page #loginForm .d-flex .col > #btn-fb, .default-page #loginForm .d-flex .col > #btn-greg { order: 3; grid-column: 1 / -1; justify-self: center; text-align: center; }
  .default-page #loginForm .btn-login { order: 4; grid-column: 1; width: 100%; height: 46px; margin: 0; font-size: 16px; }
  .default-page .login-container > .login-with-google-btn { order: 5; grid-column: 2; width: 100%; height: 46px; margin: 0; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .default-page #loginForm .d-flex label { order: 6; grid-column: 1 / -1; justify-self: center; margin: 0; font-size: 14px; }
  .default-page #recoverPass { order: 7; grid-column: 1 / -1; width: 100% !important; }
  /* while the recovery form is open (Recover Password hid #loginForm), the Google button steps aside */
  .default-page .login-container:has(#loginForm[style*="none"]) > .login-with-google-btn { display: none; }
  .default-page #recoverPass .btn { height: 44px; min-width: 120px; }

  /* headline and rotating pitch */
  .default-page .custom-hp-heading { margin: 18px 0 4px; padding: 0 16px; font-size: 27px; line-height: 1.15; }
  #main-slider .immersive_slider .carousel-content h1 { padding: 0 4px 0 12px; font-size: 19px; line-height: 1.25; }

  /* register panel: stars small enough not to cover the title, phone-sized fields, full-width buttons */
  .default-page .container { width: 100%; padding-left: 12px; padding-right: 12px; }
  .default-page .container-bottom { margin: 0; }
  .default-page #feature .col-sm-4, .default-page #feature .col-sm-8 { padding-left: 0; padding-right: 0; }
  .default-page .panel-primary2 .panel-heading { padding-left: 44px; padding-right: 44px; }
  .default-page .panel-primary2 .m-ico2, .default-page .panel-primary2 .m-ico3 { width: 46px; }
  .default-page .panel-primary2 .m-ico2 { left: 2px; }
  .default-page .panel-primary2 .m-ico3 { left: auto; right: 2px; }
  .default-page .panel-primary2 .m-ico2 img, .default-page .panel-primary2 .m-ico3 img { width: 46px; height: auto; }
  .default-page .panel-primary2 #panel-title { font-size: 26px; }
  .default-page .form-inline2 .col-md-6 { padding-left: 4px; padding-right: 4px; }
  .default-page .form-inline2 .form-group input.form-control { height: 44px; font-size: 16px; }
  .default-page .form-inline2 .styled-select select { height: 44px; font-size: 16px; }
  .default-page .sign-buttons p { align-self: stretch; margin-bottom: 10px; text-align: center; }
  .default-page .sign-buttons p[style] { padding-top: 12px !important; }
  .default-page .sign-buttons .playfbutt { width: 100%; max-width: 360px; }
  .default-page .sign-buttons .login-with-google-btn { width: 100% !important; max-width: 360px; height: 56px !important; white-space: normal; }

  /* Top 10 */
  .default-page .panel-primary .panel-heading { width: auto; margin-right: 12px; }
  .default-page .panel-primary .m-ico { left: -4px; top: -24px; }
  .default-page .panel-primary .m-ico img { width: 52px; height: auto; }

  /* About + footer */
  #about-game { padding-bottom: 24px; }
  #about-game .panel-primary2 { margin: 18px 0 0; }
  .default-page #footer .container, .default-page #footer .col-md-12 { width: 100%; padding: 0; }
  /* main.css floats the footer bar absolutely at 8% from the left: on phones it is a normal full-width strip */
  .default-page #footer .foot-copy { position: static; width: auto !important; left: auto; padding: 12px 16px 18px; line-height: 1.9; text-align: center; }
}