/* Compact mobile rules for the game page
   - Shrinks CTA buttons & number tiles
   - Puts Reserve full-width above Play Now / Clear
   - Trims vertical gaps
*/
@media (max-width: 540px) {
  /* tighten hero/skill area just above the grid */
  #game .panel-skill { margin-bottom: 8px !important; }
  #game .grid-card  { padding: 8px 10px !important; }

  /* CTA row: grid layout, Reserve spans full width */
  #game .panel-cta[role="group"]{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: min-content !important;
    gap: 12px !important;
  }
  #reserveBtn{ grid-column: 1 / -1 !important; }

  /* Buttons: Reserve / Play Now / Clear */
  #reserveBtn,
  #stripeBtn,
  #bankPayBtn,
  #bankSmartBtn,
  #clearBtn{
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    font-size: 14px !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    line-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Number tiles */
  #grid button,
  #grid .vc-cell{
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  /* Inputs */
  #game input[type="text"],
  #game input[type="email"],
  #game input[type="tel"],
  #game .form-control{
    height: 40px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    padding: .5rem .75rem !important;
  }
}

@media (max-width: 420px){
  .panel { gap: 8px !important; }
  .panel > * { margin-block: 0 !important; padding-block: 0 !important; }

  main .panel > details.panel,
  #game details.panel {
    margin-top: 6px !important;
  }

  .panel-skill,
  .terms-confirm { display:flex !important; align-items:center !important; gap:10px !important; }
  .panel-skill {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .panel-skill > label,
  .panel-skill > .form-label {
    width: 100% !important;
    margin: 0 !important;
  }
  .terms-confirm {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .terms-confirm input[type="checkbox"]{ margin:0 !important; }
  .terms-confirm span {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-right: 10px !important;
    overflow-wrap: anywhere !important;
  }
  .terms-confirm span a {
    display: inline !important;
    overflow-wrap: anywhere !important;
  }

  #game input[type="text"],
  #game input[type="email"],
  #game input[type="tel"],
  #game .form-control{
    height:40px !important; font-size:14px !important;
    border-radius:10px !important; padding:.5rem .75rem !important;
  }

  #grid{ gap:6px !important; }
  #grid button,
  #grid .vc-cell{
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }

  .panel-cta .btn,
  .panel-cta-secondary .btn{
    height:48px !important; font-size:14px !important; padding:8px 14px !important;
    border-radius:10px !important;
  }
  .panel-cta > *, .panel-cta-secondary > *{ margin:0 !important; }
}

/* --- VTB mobile compact fix (≤480px) --- */
@media (max-width: 480px) {
  /* Skill row: shrink input height */
  .panel-skill input[type="text"] {
    height: 40px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    padding: .5rem .75rem !important;
  }

  /* Checkbox row: align box + text tightly */
  .terms-confirm {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .terms-confirm span {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-right: 10px !important;
    overflow-wrap: anywhere !important;
  }
  .terms-confirm span a {
    display: inline !important;
    overflow-wrap: anywhere !important;
  }

  /* CTA block: vertical stack, small gap */
  .panel-cta {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  /* Secondary CTA row (Play / Clear): tighter */
  .panel-cta-secondary {
    display: flex !important;
    gap: 8px !important;
    margin: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  /* Buttons: clamp height */
  #reserveBtn,
  #stripeBtn,
  #bankPayBtn,
  #bankSmartBtn,
  #clearBtn {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    font-size: 14px !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* --- VTB mobile compact fix (≤600px) --- */
@media (max-width:600px) {
  /* Make skill + terms compact */
  main .panel .panel-skill,
  main .panel .panel-cta {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Skill row internals */
  main .panel .panel-skill {
    display: grid !important;
    gap: 8px !important;
  }
  main .panel .panel-skill > * { margin: 0 !important; }

  /* Terms row inline + compact */
  main .panel .terms-confirm {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  main .panel .terms-confirm input[type="checkbox"] {
    margin: 0 !important;
  }
  main .panel .terms-confirm span,
  main .panel .terms-confirm span a {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-right: 10px !important;
    overflow-wrap: anywhere !important;
  }

  /* CTAs stacked neatly */
  main .panel .panel-cta {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  main .panel .panel-cta-secondary {
    display: flex !important;
    gap: 8px !important;
    margin: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  /* Button consistency */
  #reserveBtn,
  #stripeBtn,
  #bankPayBtn,
  #bankSmartBtn,
  #clearBtn {
    height: 48px !important;
    min-height: 48px !important;
    line-height: 48px !important;
  }

  /* Optional: tighten number grid */
  #grid { gap: 6px !important; }
}

/* --- VTB: tighten hero on small screens (≤600px) --- */
@media (max-width:600px){
  main .game-hero{
    gap: 8px !important;
    margin-block: 8px !important;
  }

  /* let the hero body be only as tall as its content */
  main .game-hero-body{
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 1 auto !important;
  }

  /* make the image size itself; remove extra space */
  main .game-hero-image{
    margin: 0 !important;
    padding: 0 !important;
  }
  main .game-hero-image img{
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  /* pull the price/game row closer to the hero */
  main .game-head{
    margin-top: 6px !important;
  }
}