/* Kleine und mittlere Bildschirme: Anordnung der Spielanzeige auf Handy (hoch und quer) und Tablet */

/* Mittlere Breiten: Tafel und Statuszeile links unten, sonst ragen sie in die Regler rechts */
@media (min-width: 761px) and (max-width: 1100px) {
  #board, #status, #breakBalls { left: calc(12px + var(--sal)); transform: none; }
}
@media (max-width: 760px) and (min-height: 501px) {
  .player { min-width: 0; padding: 6px 10px; } .player .score { font-size: 20px; }
  #mid { display: none; } #power { width: 34px; }
  #controls { --ctl: 96px; right: calc(10px + var(--sar)); bottom: calc(66px + var(--sab)); gap: 6px; }
  #status { bottom: calc(229px + var(--sab)); left: auto; right: calc(10px + var(--sar)); transform: none; max-width: calc(100vw - 20px); font-size: 12px; }
  /* Unten: Anzeigetafel über die volle Breite am unteren Rand, darüber die Regler und die Statuszeile;
     oben die Buttons in einer Reihe, darunter Einblendungen */
  #board { left: calc(10px + var(--sal)); right: calc(10px + var(--sar)); bottom: calc(10px + var(--sab)); transform: none; }
  /* Kugeln des Breaks: zwischen Tafel und Reglern ist kein Platz, also links über der Stärke, unter der Statuszeile */
  #breakBalls { left: calc(10px + var(--sal)); bottom: calc(190px + var(--sab)); transform: none; gap: 4px; padding: 4px 6px; }
  #breakBalls .bb { --d: 19px; font-size: 10px; }
  #hud.break-balls #status { bottom: calc(229px + var(--sab)); }
  .player { flex: 1; }
  .player .name { max-width: 90px; }
  /* Challenge: rechts steht die Aufgabe („Tisch abräumen“) statt eines Namens */
  #hud.challenge #p1 .name { max-width: 130px; }
  #tools { top: calc(10px + var(--sat)); left: calc(10px + var(--sal)); right: calc(10px + var(--sar)); flex-direction: row; gap: 6px; }
  #tools { justify-content: flex-end; }
  #tools .icon-btn { width: 40px; height: 34px; padding: 0; }
  #tools button { padding: 7px 6px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Unten: Stärke links, Stoß mittig, Treffpunkt rechts; der Stoß-Button übernimmt auch das Platzieren */
  #controls { left: calc(10px + var(--sal)); justify-content: space-between; pointer-events: none; }
  #controls > * { pointer-events: auto; }
  #controls #btnShoot { position: fixed; left: 50%; bottom: calc(66px + var(--sab)); transform: translateX(-50%); z-index: 6;
    width: 104px; height: 56px; padding: 0 10px; font-size: 22px; }
  /* Zurück und vor: nebeneinander direkt über dem Stoß (links daneben ist nur Platz für einen Button) */
  #controls #btnUndo, #controls #btnRedo { position: fixed; bottom: calc(128px + var(--sab)); z-index: 6; width: 49px; height: 40px; }
  #controls #btnUndo { left: calc(50% - 52px); }
  #controls #btnRedo { left: calc(50% + 3px); }
  /* "Platzieren" passt nur kleiner in die feste Breite */
  #controls #btnShoot.long { padding: 0 6px; font-size: 16px; letter-spacing: .02em; }
  /* Keine Tastatur-Hinweise */
  .kbd-only { display: none !important; }
  .touch-only { display: revert; }
}
/* Handy im Querformat: wenig Höhe – Anzeigetafel oben links, Buttons oben rechts, Stärke und Treffpunkt
   klein in den unteren Ecken, Stoß unten mittig, Statuszeile darüber; der Tisch nutzt die Mitte */
@media (max-height: 500px) and (orientation: landscape) {
  #board { top: calc(8px + var(--sat)); left: calc(8px + var(--sal)); bottom: auto; transform: none; }
  .player { min-width: 0; padding: 4px 10px; gap: 10px; }
  .player .score { font-size: 18px; }
  .player .name { max-width: 90px; font-size: 13px; }
  #mid { padding: 3px 10px; font-size: 11px; }
  /* Kugeln des Breaks klein direkt unter der Tafel */
  #breakBalls { top: calc(58px + var(--sat)); left: calc(8px + var(--sal)); bottom: auto; transform: none; gap: 3px; padding: 3px 5px; }
  #breakBalls .bb { --d: 16px; font-size: 9px; }
  #hud.break-balls #status { bottom: calc(64px + var(--sab)); }
  #status { bottom: calc(64px + var(--sab)); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 300px); padding: 4px 10px; font-size: 12px; }
  #controls { left: calc(8px + var(--sal)); right: calc(8px + var(--sar)); bottom: calc(8px + var(--sab)); justify-content: space-between; align-items: flex-end; pointer-events: none; }
  #controls > * { pointer-events: auto; }
  #controls { --ctl: 84px; }
  #powerBox, #spinBox { gap: 3px; }
  #power { width: 31px; }
  #tools { top: calc(8px + var(--sat)); right: calc(8px + var(--sar)); flex-direction: row; gap: 6px; }
  #tools .icon-btn { width: 40px; height: 34px; }
  #controls #btnShoot { position: fixed; left: 50%; bottom: calc(8px + var(--sab)); transform: translateX(-50%); z-index: 6;
    min-width: 110px; height: 48px; padding: 0 14px; font-size: 22px; white-space: nowrap; }
  #controls #btnRedo { position: fixed; left: calc(50% - 55px - 8px - 48px); bottom: calc(8px + var(--sab)); z-index: 6; width: 48px; height: 48px; }
  #controls #btnUndo { position: fixed; left: calc(50% - 55px - 8px - 48px - 6px - 48px); bottom: calc(8px + var(--sab)); z-index: 6; width: 48px; height: 48px; }
  #controls #btnShoot.long { padding: 0 8px; font-size: 16px; letter-spacing: .02em; }
  .kbd-only { display: none !important; }
  .touch-only { display: revert; }
}
/* Editor auf dem Handy: hochkant die Leiste über Stärke und Treffpunkt, quer mittig zwischen beiden */
@media (max-width: 760px) and (min-height: 501px) {
  #editBar { left: calc(10px + var(--sal)); right: calc(10px + var(--sar)); bottom: calc(210px + var(--sab)); width: auto; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #editBar { left: 50%; bottom: calc(64px + var(--sab)); transform: translateX(-50%); width: calc(100vw - 290px); padding: 8px; gap: 6px; }
}