/* Tablet-Tisch: eigene Karten bleiben auf dem Bildschirm.
   Die Leiste „Fehler melden“ lässt den Kopf umbrechen (reports.css, height:auto).
   Zwischen etwa 760px und 1200px werden die Knöpfe dadurch zwei- oder dreizeilig,
   der Kopf wird ~150px hoch, und der Tisch ist weiter mit „100vh minus 84px“
   bemessen. Die Hand sitzt dann unter der Falz, auf dem iPad und in Chrome
   auf dem Android-Tablet zusätzlich unter der Browserleiste (100vh zählt die
   große Fläche hinter den Werkzeugleisten). Übrig bleibt oft nur ein Streifen
   der eigenen Karten.

   Hier: eine Zeile Kopf auf dem Tablet, der Filz in der dynamischen Höhe
   (dvh) plus Safe Area, und eine Hand, deren Rang und Farbe ohne Hover
   lesbar und mit dem Finger treffbar sind. Gegner zeigen weiter nur Rückseiten. */

.topbar .tswitch{flex:none;border-color:rgba(233,201,119,.7);color:#e9c977}
@media (max-width:560px){
  .topbar-actions{overflow-x:auto;flex-wrap:nowrap}
  .topbar .tswitch{font-size:.75rem;padding:6px 8px}
}

.app{
  height:100vh;
  height:100dvh;
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
}

/* Eine Zeile, kurze Beschriftung, solange die langen Wörter den Kopf sprengen.
   Ab 561px, also auch iPad mini, 7–8"-Tablets und Laptops bis 1599px.
   „Spiel wechseln“ braucht den Platz, den die langen Wörter sonst umbrechen.
   Telefone im Hochformat bleiben bei ihrer eigenen Leiste. Kurze Telefone
   im Querformat (unter 500px hoch) ebenfalls. */
@media (min-width:561px) and (max-width:1599px) and (min-height:500px){
  .topbar,
  .topbar:has(.sf-report),
  .topbar:has([data-sf-account]){
    height:52px;
    min-height:52px;
    max-height:52px;
    flex-wrap:nowrap;
    align-items:center;
    padding-top:0;
    padding-bottom:0;
    overflow:hidden;
  }
  .topbar-actions,
  .topbar:has(.sf-report) .topbar-actions,
  .topbar:has([data-sf-account]) .topbar-actions{
    flex-wrap:nowrap;
    min-width:0;
    overflow-x:auto;
    row-gap:0;
    gap:4px;
  }
  .topbar .sf-who{
    flex:0 1 auto;
    order:0;
    max-width:8.5rem;
    margin:0 6px 0 0;
    overflow:hidden;
  }
  .logo img{height:30px}
  .tbtn{padding:6px 9px;font-size:.78rem;gap:5px}
  .lbl-long{display:none}
  .lbl-short{display:inline}
}

/* Gestapelte Tische (Tablet hoch, kleines Tablet quer): der Filz füllt genau
   den sichtbaren Bildschirm unter dem Kopf. Die Punkteliste bleibt darunter
   und lässt sich weiter scrollen. min-height aus den Spielen (560–640px)
   würde auf einem 600px hohen Display die Hand aus dem Bild schieben. */
@media (max-width:1000px){
  .app{
    height:auto;
    min-height:100vh;
    min-height:100dvh;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .table-area{
    height:calc(100vh - 4.5rem - env(safe-area-inset-bottom,0px));
    height:calc(100dvh - 4.5rem - env(safe-area-inset-bottom,0px));
    min-height:0;
    max-height:calc(100dvh - 4.5rem - env(safe-area-inset-bottom,0px));
  }
}

/* Eigene Hand auf dem Tablet: 10 bis 13 Karten passen in die Breite.
   Die linke Ecke (Rang und Farbe) bleibt frei. Der sichtbare Streifen ist
   etwa drei Viertel der Kartenbreite, also ohne Hover lesbar und mit dem
   Finger treffbar. iPad mini (744px) und das Galaxy Tab S fallen in die
   Handy-Stufe und hätten sonst 56px-Karten; hier dürfen sie bis zur normalen
   Blattgröße wachsen. Nur die eigene Hand: der letzte Stich und der
   Strohmann behalten ihre Größe. Der Sitz ist der Container, damit die
   Kartenhöhe die Hand nicht sprengt. */
@media (min-width:600px) and (max-width:1400px) and (any-pointer:coarse){
  .me{
    container-type:inline-size;
    container-name:seat;
    max-width:100%;
  }
  .me > .hand{
    --hand-max:max(var(--cw), 88px);
    /* 13 Karten (Rommé, Bridge) brauchen den Teiler 10.2.
       Kürzere Blätter dürfen größer werden, der Teiler folgt der Kartenzahl. */
    --fit-div:10.2;
    --fit-cw:min(var(--hand-max), calc(100cqi / var(--fit-div)));
    width:100%;
    max-width:100%;
    min-height:calc(var(--fit-cw) * 1.45 + 36px);
    justify-content:safe center;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .me > .hand:not(:has(> .card:nth-child(13))){--fit-div:9.5}
  .me > .hand:not(:has(> .card:nth-child(12))){--fit-div:8.7}
  .me > .hand:not(:has(> .card:nth-child(11))){--fit-div:8}
  .me > .hand::-webkit-scrollbar{display:none}
  .me > .hand .card{
    --cw:var(--fit-cw);
    margin-left:calc(var(--cw) * -0.24);
  }
  .me > .hand .card:first-child{margin-left:0}
  /* Bridge setzt zwischen den Farben einen positiven Abstand (10px).
     Der schiebt die letzte Karte aus dem Filz. Dieselbe Überlappung wie
     im restlichen Blatt hält alle 13 Karten im Sitz. */
  .me > .hand .card.suit-gap{margin-left:calc(var(--cw) * -0.24)}
  .me > .hand .card.playable:active{
    transform:translateY(-12px);
    z-index:4;
  }
}

/* Kurzes Tablet quer: Karten etwas kleiner, damit Stich und Hand zusammenpassen. */
@media (min-width:600px) and (max-width:1400px) and (max-height:720px) and (any-pointer:coarse){
  .me > .hand{--fit-cw:min(var(--hand-max), 64px, calc(100cqi / var(--fit-div)))}
  .me > .hand .card{--cw:var(--fit-cw)}
}

/* iPad mini und 7–8"-Tablets fallen in die Handy-Regeln (max-width:760px),
   die dort die gegnerischen Karten ausblenden. Ab 600px ist Platz für die
   Rückseiten. Die Vorderseite bleibt dem offenen Null-Ouvert vorbehalten. */
@media (min-width:600px) and (max-width:760px){
  .opp-cards{display:flex}
}

/* Der Meldeknopf liegt fest unten rechts und deckt auf dem Tablet die letzten
   eigenen Karten zu. Er rückt über die Hand. */
@media (max-width:1366px){
  .tbtn.sf-report{
    bottom:calc(env(safe-area-inset-bottom,0px) + 11rem);
  }
}