/* =========================
   RESPONSIVE - CLEAN & STABLE
========================= */


/* =========================
   TABLET (<= 1024px)
========================= */
@media (max-width: 1024px){

  .card-slot{ width:60px; height:88px; }
  .board .card-slot{ width:66px; height:96px; }

}


/* =========================
   MOBILE (<= 768px)
========================= */
@media (max-width: 768px){

  /* Page padding */
  body{ padding:8px; }

@media (max-width:768px){
  .hero-title{
    margin-bottom:12px;
  }

  .hero-container{
    margin:0 auto 12px;
  }
}
@media (max-width:768px){
  h1{
    font-size:1.2rem;
    line-height:1.2;
    margin-bottom:4px;
  }

  .hero-subtitle{
    font-size:.85rem;
    opacity:.8;
    margin-bottom:8px;
  }
}

  /* Sections */
  .section{
    padding:10px 12px;
    margin-bottom:8px;
    border-radius:8px;
  }

  .label{
    font-size:.85rem;
    margin-bottom:6px;
  }

  .row{ gap:8px; }

  /* Cards */
  .card-slot{ width:56px; height:82px; }
  .board .card-slot{ width:60px; height:88px; }

  .card-display .rank{ font-size:24px; }
  .card-display .suit{ font-size:28px; }

  .board .card-display .rank{ font-size:22px; }
  .board .card-display .suit{ font-size:26px; }

  /* Buttons */
@media (max-width:768px){
  .action-row{
    gap:6px;
    margin-top:8px;
  }
}


  .action-btn{
    padding:10px 10px;
    font-size:.85rem;
    min-height:44px; /* safe tap target */
  }

  #togglePicker,
  #closePicker{
    min-height:44px;
    padding:10px 12px;
    font-size:.9rem;
  }

  /* Equity */
  .big-equity{
    font-size:1.7rem;
    margin:6px 0;
  }
  .equity-bar{
    height:18px;
    margin:8px 0;
  }

  /* Output */
@media (max-width:768px){
  .output{
    padding:10px 12px;
    margin-top:4px;
  }
}


.output > div:not(.results-grid){
  margin-bottom:4px;
}


@media (max-width:768px){
  .site-header{
    padding:10px 12px;
  }
}


  /* Optional: hide intro on mobile */
  .intro-section{
    display:none;
  }

}


/* =========================
   SMALL PHONES (<= 480px)
========================= */
@media (max-width: 480px){

  body{ padding:10px; }

  .hero-title{
    font-size:clamp(1.8rem, 6vw, 2.2rem);
    margin-bottom:16px;
  }

  .section{
    padding:12px 14px;
    margin-bottom:10px;
  }

  .row{ gap:6px; }

  /* Cards */
  .card-slot{ width:54px; height:78px; }
  .board .card-slot{ width:58px; height:84px; }

  .card-display .rank{ font-size:22px; }
  .card-display .suit{ font-size:26px; }

  .board .card-display .rank{ font-size:20px; }
  .board .card-display .suit{ font-size:24px; }

  /* Buttons tighter */
  .action-row{ gap:6px; }

  .action-btn{
    padding:8px 8px;
    font-size:.8rem;
    min-height:42px;
  }

  #togglePicker,
  #closePicker{
    min-height:42px;
    padding:8px 10px;
  }

  .big-equity{ font-size:1.9rem; }

}


/* =========================
   LANDSCAPE SHORT HEIGHT
========================= */
@media (max-height: 600px) and (orientation: landscape){

  .section{
    padding:10px 12px;
    margin-bottom:8px;
  }

  .card-slot{ width:50px; height:73px; }
  .board .card-slot{ width:54px; height:79px; }

}


/* =========================
   REDUCED MOTION
========================= */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}
@media (max-width: 768px){

  .hero-title{
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 8px;
  }

}
@media (max-width: 768px){

  .hero-container{
    max-width: 90%;
    margin: 0 auto 18px;
  }

}
/* =========================
   DESKTOP TIGHT MODE (>= 1200px)
========================= */
@media (min-width: 1200px){

  body{
    padding: 16px 24px;   /* was 24px */
  }

  .hero-container{
    margin-bottom: 24px;  /* was 48px */
  }

  .section{
    padding: 18px 22px;   /* was 28px */
    margin-bottom: 14px;  /* was 20px */
  }

  h1{
    margin-bottom: 10px;  /* was 16px */
  }

  button{
    margin-top: 8px;      /* was 12px */
  }

  .output{
    padding: 18px;        /* was 24px */
    margin-top: 14px;
  }

  .equity-bar{
    margin: 14px 0;       /* tighten */
  }

}
@media (max-width: 768px){

  .advanced-output{
    display:none;
  }

}
@media (max-width:768px){

  .results-grid{
    display:grid;
    gap:8px;
  }

  .results-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

  .results-meta{
    display:flex;
    gap:10px;
    font-size:.8rem;
  }

  .big-equity{
    font-size:1.6rem;
    margin:2px 0;
  }

  .equity-bar{
    height:14px;
    margin:4px 0;
  }

  .results-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px 10px;
    font-size:.8rem;
  }

  .results-draws{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px 8px;
    font-size:.8rem;
  }

  .results-extra,
  .results-footer{
    display:none;   /* hide heavy info */
  }

  .results-actions{
    margin-top:6px;
  }

  .results-btn{
    height:36px;
    font-size:.85rem;
  }

}
@media (max-width:768px){
  .intro-card{
    display:none;
  }
}