/* ============================================================
   RESPONSIIVISUUS

   Peliruudun runko on common.css:ssä: vyöhykkeet, jotka jakavat
   korkeuden (paikat / pöytä / käsi + napit). Tämä tiedosto ei rakenna
   omaa asettelujärjestelmää vaan säätää saman rungon mittasuhteita.

   Aiemmin tässä oli 59 media queryä ja 320 !important-määrettä, jotka
   taistelivat keskenään. Niitä ei tarvita, kun kokoerot hoituvat
   --u-yksiköllä ja korttien korkeusrajalla.

   Sisältö:
     1. Valikko kapealla ja matalalla näytöllä
     2. Peli: matala vaakanäyttö  → paikat vasempaan sarakkeeseen
     3. Peli: kapea pystynäyttö   → tiiviimmät paikat
     4. Iso näyttö                → väljemmät mittasuhteet
     5. Saavutettavuus
   ============================================================ */

/* ------------------------------------------------------------
   1. VALIKKO
   ------------------------------------------------------------ */
/* Kapea tai matala näyttö: näytetään vain VALITTU pelimuoto. Yläpuolella on
   jo Yksinpeli/Paripeli-kytkin, joten toinen kortti on pelkkää korkeutta.
   Tämä puolittaa valikon korkeuden pienimmillä puhelimilla. */
@media(max-width:760px),(max-height:680px){
  .setup-column:not(.active){display:none}
  .setup-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .setup-grid{grid-template-columns:1fr;gap:.6rem}
  .setup-footer{grid-template-columns:1fr;gap:.7rem;width:100%;padding:.7rem .2rem}
  #menu .card-panel{padding:.3rem .6rem 1rem}
  .setup-column{padding:.75rem}
}
/* Kapein puhelin: neljä 44 px kuvaketta + otsikko eivät mahdu 320 px:iin,
   joten kuvakkeet kutistuvat kosketuskokoon 38 px. */
@media(max-width:400px){
  header{gap:.35rem;padding-left:.5rem;padding-right:.5rem}
  .header-actions{gap:.28rem}
  button.icon{width:38px;height:38px;min-height:38px}
  button.icon svg{width:19px;height:19px}
  header h1{font-size:.82rem;letter-spacing:.08em}
}
@media(max-width:560px){
  .opt-row button{min-width:40px}
  header{padding:.5rem .7rem;padding-top:calc(.5rem + env(safe-area-inset-top))}
  header h1{font-size:.95rem;letter-spacing:.12em}
  .header-actions{gap:.4rem}
  body:not(.in-game) #app{padding:.6rem}
  .setup-note{font-size:.7rem}
  .opt-row button{min-height:40px;padding:.4rem .7rem}
}

/* Matala näyttö PYSTYSSÄKIN: valikon on mahduttava ilman vieritystä.
   Aiemmin tämä oli vain vaakatilassa, jolloin 320x568 -puhelin vieritti. */
@media(max-height:680px){
  #menu{margin:.25rem auto 0}
  #menu .card-panel{padding:.25rem .55rem .6rem}
  .mode-switch{margin:.15rem auto .55rem}
  .mode-switch .mode-pick{min-height:40px}
  .setup-grid{gap:.45rem;margin:.25rem auto .55rem}
  .setup-column{padding:.5rem}
  .setup-head{margin-bottom:.3rem}
  .setup-title{font-size:.86rem}
  .setup-note{display:none}
  .setup-column .lbl,.target-panel .lbl{font-size:.6rem;margin-top:.3rem}
  .opt-row{gap:.32rem;margin:.22rem 0 .35rem}
  .opt-row button{min-height:38px;padding:.25rem .55rem;font-size:.82rem}
  .setup-footer{padding:.5rem .3rem;gap:.5rem;margin-top:0}
  .menu-actions button{min-height:42px}
  .menu-profile-name{display:none}
}

/* Matala vaaka: valikon on mahduttava ruutuun ilman vieritystä. */
@media(orientation:landscape) and (max-height:639px){
  body:not(.in-game) #app{padding:.4rem}
  #menu{margin:.2rem auto 0;max-width:min(98vw,940px)}
  #menu .card-panel{padding:.2rem .5rem .5rem}
  .setup-grid{grid-template-columns:minmax(0,1fr);gap:.45rem;margin:.2rem auto .5rem}
  .setup-column{padding:.45rem;border-radius:13px}
  .setup-head{margin-bottom:.25rem}
  .setup-title{font-size:.8rem;letter-spacing:.07em}
  .setup-note{display:none}
  .setup-column .lbl,.target-panel .lbl{font-size:.58rem;margin-top:.25rem}
  .opt-row{gap:.3rem;margin:.2rem 0 .3rem}
  .opt-row button{min-height:34px;min-width:34px;padding:.2rem .55rem;font-size:.78rem}
  .mode-switch{margin:.15rem auto .5rem}
  .mode-switch .mode-pick{min-height:36px;font-size:.8rem}
  .setup-footer{grid-template-columns:1fr 1fr;gap:.6rem;padding:.45rem .5rem;margin-top:0}
  .menu-actions button{min-height:38px}
  .menu-profile-name{display:none}
  header{padding:.28rem .55rem;padding-top:calc(.28rem + env(safe-area-inset-top))}
  header h1{font-size:.85rem;letter-spacing:.1em}
  button.icon{width:38px;height:38px;min-height:38px}
  button.icon svg{width:19px;height:19px}
}

/* Erittäin matala vaaka (<=400 px): valikon on yhä mahduttava. */
@media(orientation:landscape) and (max-height:400px){
  #menu{margin:.1rem auto 0}
  #menu .card-panel{padding:.12rem .4rem .3rem}
  .mode-switch{margin:.1rem auto .3rem;padding:2px}
  .mode-switch .mode-pick{min-height:32px;font-size:.74rem}
  .setup-grid{margin:.12rem auto .3rem}
  .setup-column{padding:.32rem}
  .setup-head{margin-bottom:.15rem}
  .setup-title{font-size:.72rem}
  .setup-column .lbl,.target-panel .lbl{font-size:.52rem;margin-top:.15rem}
  .opt-row{gap:.24rem;margin:.12rem 0 .2rem}
  .opt-row button{min-height:30px;min-width:32px;padding:.12rem .4rem;font-size:.72rem}
  .setup-footer{padding:.25rem .3rem;gap:.4rem;border-top:0}
  .menu-actions button{min-height:32px;font-size:.82rem}
}

/* ------------------------------------------------------------
   2. PELI — matala vaakanäyttö

   Pystytilaa ei ole tarpeeksi paikkariville, joten paikat siirtyvät
   vasempaan sarakkeeseen. Runko on sama grid, vain suunta vaihtuu:
   yhdestä sarakkeesta kahteen.

       ┌────────┬──────────────┐
       │ paikat │  pöytä  1fr  │
       │        ├──────────────┤
       │        │ käsi + napit │
       └────────┴──────────────┘
   ------------------------------------------------------------ */
@media(orientation:landscape) and (max-height:639px){
  :root{--tap:34px}
  /* Rengas mahtuu myös matalaan vaakatilaan, kun paikat ovat matalia
     pillereitä eikä pöydän ylle jää turhaa pystyväliä. */
  body.in-game .col-main{gap:calc(var(--gap) * .55)}
  body.in-game .seat{max-width:clamp(120px,17vw,210px)}
  body.in-game .seat-mini-hand{display:none}
  #bidCallout.bid-callout{top:40%}
  #bidCallout .bid-callout-avatar{width:clamp(52px,11vh,86px);height:clamp(52px,11vh,86px)}
  #bidCallout .bid-callout-amount{font-size:clamp(1.1rem,4.5vh,2.2rem)}
  #bidCallout .bid-callout-name{font-size:clamp(.9rem,3.4vh,1.4rem)}
  body.in-game #game{padding:calc(var(--pad) * .6) calc(var(--pad) * .8)
    calc(var(--pad) * .6 + env(safe-area-inset-bottom))}

  body.in-game .col-main{max-width:1500px;margin-inline:auto;width:100%}

  .seat{padding:.32rem .44rem;gap:.4rem;max-width:none;
    grid-template-columns:clamp(22px,5vh,30px) minmax(0,1fr)}
  .seat-avatar{max-width:30px}
  .seat .nm{font-size:.74rem;line-height:1.12}
  .seat .st{font-size:.6rem;line-height:1.14}
  .seat-round-pts{font-size:.8em}

  #status{gap:.25rem}
  .chip{font-size:.66rem;padding:.16rem .42rem}
  #trumpMark{right:8px}
  #trumpMark .g{font-size:30px}
  #trumpMark:not(.none) .g{width:40px;height:40px}
  #trumpMark .t{font-size:.5rem;letter-spacing:.12em}
  #hand{padding:calc(var(--lift) + 2px) 0 0}
  #actions{gap:.34rem}
  #actions button{padding:.3rem .6rem;font-size:.82rem}
  #myPts .v{font-size:1rem}
  #myPts .k{font-size:.52rem}
  #pirun .table-pack-image{width:clamp(84px,13vh,124px)}
  #tablePrompt .table-prompt-main{font-size:clamp(.9rem,3.4vh,1.15rem)}
  #tablePrompt .table-prompt-sub{font-size:clamp(.62rem,2.2vh,.78rem)}
}

/* Erittäin matala vaaka (esim. puhelin 320 px korkea). */
@media(orientation:landscape) and (max-height:400px){
  :root{--tap:32px}
  body.in-game #status{display:none}     /* tiedot näkyvät paikoissa ja pöydässä */
  .seat .st{font-size:.56rem}
  #actions button{padding:.24rem .5rem;font-size:.76rem}
}


/* ------------------------------------------------------------
   3. PELI — kapea pystynäyttö
   ------------------------------------------------------------ */
@media(orientation:portrait) and (max-width:620px){
  body.in-game #game{padding:calc(var(--pad) * .7) calc(var(--pad) * .7)
    calc(var(--pad) * .7 + env(safe-area-inset-bottom))}
  .seat{padding:.38rem .46rem;gap:.42rem}
  .seat .nm{font-size:.8rem}
  .seat .st{font-size:.66rem}
  .chip{font-size:.72rem;padding:.26rem .55rem}
  #status{gap:.3rem}
  #trumpMark{right:9px}
  #trumpMark .g{font-size:34px}
  #trumpMark:not(.none) .g{width:46px;height:46px}
  #actions{gap:.4rem}
  #actions button{padding:.42rem .7rem}
}

/* Kapea pystynäyttö: paikat pysyvät VAAKASUUNTAISINA (avatar | teksti).
   Pystypinoaminen rikkoi näkymän, koska .seat-mini-hand on absoluuttisesti
   avatarin alapuolella ja peitti silloin pelaajan nimen. */
@media(orientation:portrait) and (max-width:460px){
  .seat{padding:.3rem .34rem;gap:.34rem;
    grid-template-columns:clamp(24px,7vw,32px) minmax(0,1fr)}
  .seat-avatar{max-width:32px}
  .seat .nm{font-size:.72rem}
  .seat .st{font-size:.6rem}
  .seat-mini-hand{width:40px;height:15px}
  .seat-mini-card{width:10px;height:14px}
}
}

/* ------------------------------------------------------------
   4. ISO NÄYTTÖ
   ------------------------------------------------------------ */
@media(min-width:1100px) and (min-height:700px){
  body.in-game #game{padding:calc(var(--pad) * 1.2) clamp(1rem,3vw,2.5rem)
    calc(var(--pad) * 1.2 + env(safe-area-inset-bottom))}
  body.in-game .col-main{gap:calc(var(--gap) * 1.4)}
  #seats{gap:calc(var(--gap) * 1.3)}
  .seat{padding:.6rem .8rem;grid-template-columns:46px minmax(0,1fr)}
  .seat-avatar{max-width:46px}
  .seat .nm{font-size:.98rem}
  .seat .st{font-size:.8rem}
  #actions{gap:.6rem}
}

/* Ultralaaja: peli ei leviä loputtomiin, mutta tila käytetään pöytään. */
@media(min-width:1700px){
  body.in-game #app{max-width:none}
  body.in-game #board{max-width:1600px;width:100%;margin:0 auto}
}

/* ------------------------------------------------------------
   5. SAAVUTETTAVUUS
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}