/* ==========================================================================
   Układ na telefonie (poprawka 33)
   - pionowo: pasek menu w jednym rzędzie, rozwijani gracze, plansza na całą szerokość,
     kostka i dziennik pod planszą, bez "Zasad (skrót)"
   - poziomo (niska wysokość): plansza po lewej na całą wysokość, po prawej menu,
     gracze, kostka i dziennik
   Szerokie ekrany (komputer, tablet) bez zmian.
   ========================================================================== */

/* ---- wspólne dla obu układów telefonu ---- */
@media (max-width:700px) and (min-height:521px), (max-height:520px) and (min-aspect-ratio:1/1) {
  .wg:not(.lobby) .wg-rail > h1,
  .wg:not(.lobby) .wg-sub,
  .wg:not(.lobby) .rules-panel,
  .wg:not(.lobby) .wg-legend { display:none !important; }

  /* epoki: panel "Ta epoka" znika (szczegóły po dotknięciu nagłówka epoki), nagłówek w jednym rzędzie */
  .wg:not(.lobby) .era-box { display:none !important; }
  .wg:not(.lobby) .era-head { display:flex; align-items:center; gap:8px; width:100%; margin:0 0 4px; padding:3px 8px; box-sizing:border-box; }
  .wg:not(.lobby) .era-head .epoch-mark { width:24px; height:24px; flex:0 0 24px; }
  .wg:not(.lobby) .era-head-txt { min-width:0; }
  .wg:not(.lobby) .era-head-txt b { font-size:.9rem; line-height:1.2; }
  .wg:not(.lobby) .era-head-txt small, .wg:not(.lobby) .era-head-mult { display:none !important; }
  .wg:not(.lobby) .era-head-laps { margin-left:auto; display:flex; align-items:center; gap:6px; }
  .wg:not(.lobby) .era-head-laps small { font-size:.7rem; white-space:nowrap; }

  /* menu: jeden pasek, przewijany w bok */
  .wg:not(.lobby) .net-bar { display:flex; flex-wrap:nowrap; align-items:center; gap:5px; width:auto; margin:0 0 4px; padding:4px 6px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .wg:not(.lobby) .net-bar::-webkit-scrollbar { display:none; }
  .wg:not(.lobby) .net-bar > span:first-child { flex:0 0 auto; max-width:36vw; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.7rem; }
  .wg:not(.lobby) .net-bar .btn { flex:0 0 auto; min-height:32px; padding:4px 9px; font-size:.76rem; white-space:nowrap; }

  /* gracze: zwinięte karty (nazwa, gotówka, monety); dotknięcie rozwija resztę */
  .wg:not(.lobby) .wg-players { flex-wrap:nowrap; align-items:flex-start; gap:4px; margin:0 0 4px; }
  .wg:not(.lobby) .wg-players .wg-pcard.era-bank { flex:1 1 100%; }
  .wg:not(.lobby) .wg-players { flex-wrap:wrap; }
  .wg:not(.lobby) .wg-pcard { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; padding:4px 8px; cursor:pointer; }
  .wg:not(.lobby) .wg-pcard .name { flex:1 1 100%; padding-right:14px; font-size:.74rem; line-height:1.25; }
  .wg:not(.lobby) .wg-pcard .money { margin:0; font-size:.98rem; line-height:1.2; }
  .wg:not(.lobby) .wg-pcard .coins { margin:0; font-size:.8rem; }
  .wg:not(.lobby) .wg-pcard:not([data-m-open]) > :not(.name):not(.money):not(.coins):not(.era-bank-head):not(.reverse-arm) { display:none !important; }
  .wg:not(.lobby) .wg-pcard.era-bank { padding:0; }
  .wg:not(.lobby) .wg-pcard.era-bank .era-bank-head { flex:1 1 100%; height:30px; padding:0 22px 0 10px; }
  .wg:not(.lobby) .wg-pcard.era-bank:not([data-m-open]) .era-bank-body { display:none !important; }
  .wg:not(.lobby) .wg-pcard::after { content:"\25BE"; position:absolute; top:3px; right:7px; font-size:.7rem; line-height:1; opacity:.55; pointer-events:none; }
  .wg:not(.lobby) .wg-pcard[data-m-open]::after { content:"\25B4"; }

  /* kostka: kompaktowy pasek */
  .wg:not(.lobby) .dice-area { padding:5px 8px; gap:2px 8px; }
  .wg:not(.lobby) .dice-area .turn-name { font-size:.8rem; line-height:1.2; }
  .wg:not(.lobby) .dice-area .dice { padding:0; }
  .wg:not(.lobby) .dice-area .btn-row .btn { min-height:36px; padding:5px 10px; }

  /* dziennik */
  .wg:not(.lobby) .wg-side .wg-panel:not(.dice-area) { padding:5px 8px; }
  .wg:not(.lobby) .wg-side .wg-panel:not(.dice-area) h3 { margin:0 0 3px; font-size:.78rem; }
  .wg:not(.lobby) .desktop-chat { display:none !important; }
}

/* ---- telefon pionowo: plansza tuż pod graczami, kostka i dziennik pod planszą ---- */
@media (max-width:700px) and (min-height:521px) {
  .wg:not(.lobby) { padding:4px 4px max(10px,env(safe-area-inset-bottom)); }
  .wg:not(.lobby) .wg-main { gap:6px; }
  .wg:not(.lobby) .wg-board-wrap { order:2; max-height:none; overflow:auto; padding:4px 4px 6px; }
  .wg:not(.lobby) .wg-zoombar { margin:0 0 4px; padding:2px 8px; }
  .wg:not(.lobby) .wg-side .dice-area { order:3; }
  .wg:not(.lobby) .wg-side .wg-panel:not(.dice-area) { order:4; }
  .wg:not(.lobby) .wg-log { height:96px; }
}

/* ---- telefon poziomo: plansza po lewej na całą wysokość, reszta po prawej ---- */
@media (max-height:520px) and (min-aspect-ratio:1/1) {
  .wg:not(.lobby) {
    --wrapw: min(calc(100dvh + 14px), 56vw);
    --rw: calc(100vw - var(--wrapw) - 20px);
    display:flex; flex-flow:column wrap; align-content:flex-start; gap:4px 8px;
    height:100dvh; min-height:0; max-height:100dvh; padding:4px; overflow:hidden;
  }
  .wg:not(.lobby) .wg-rail,
  .wg:not(.lobby) .wg-main,
  .wg:not(.lobby) .wg-side { display:contents; }
  .wg:not(.lobby) .wg-board-wrap { order:-1; flex:0 0 auto; width:var(--wrapw); max-width:var(--wrapw); height:calc(100dvh - 8px); max-height:none; padding:4px; overflow:auto; margin:0; }
  .wg:not(.lobby) .wg-zoombar { display:none; }
  .wg:not(.lobby) .net-bar,
  .wg:not(.lobby) .wg-players,
  .wg:not(.lobby) .era-head,
  .wg:not(.lobby) .debt-bar,
  .wg:not(.lobby) .wg-side .wg-panel { order:1; flex:0 0 auto; width:var(--rw); max-width:var(--rw); min-width:0; margin:0; box-sizing:border-box; }
  .wg:not(.lobby) .wg-side .dice-area { order:2; }
  .wg:not(.lobby) .wg-players { flex-direction:row; flex-wrap:wrap; align-items:flex-start; }
  .wg:not(.lobby) .wg-players .wg-pcard:not(.bank) { flex:1 1 0; min-width:0; }
  .wg:not(.lobby) .dice-area { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:2px 10px; text-align:left; }
  .wg:not(.lobby) .dice-area h3 { display:none; }
  .wg:not(.lobby) .dice-area .turn-name { grid-column:1 / -1; grid-row:1; margin:0; }
  .wg:not(.lobby) .dice-area .dice { grid-column:1; grid-row:2; margin:0; gap:8px; }
  .wg:not(.lobby) .dice-area .btn-row { grid-column:2; grid-row:2; flex-direction:row; flex-wrap:wrap; gap:6px; }
  .wg:not(.lobby) .dice-area .moving-label, .wg:not(.lobby) .dice-area .auc-hint { grid-column:1 / -1; margin:0; min-height:0; font-size:.75rem; }
  .wg:not(.lobby) .dice-area .btn-row .btn { width:auto; flex:1 1 auto; white-space:nowrap; font-size:.85rem; padding:5px 8px; }
  .wg:not(.lobby) .wg-side .wg-panel:not(.dice-area) { order:3; flex:1 1 0; min-height:44px; display:flex; flex-direction:column; overflow:hidden; }
  .wg:not(.lobby) .wg-side .wg-panel:not(.dice-area) h3 { display:none; }
  .wg:not(.lobby) .wg-log { flex:1 1 auto; height:auto; min-height:0; overflow:auto; }
}