/* =============================================================
 * KUPONKIRÁLY – menedzserjátékok: mobilos megjelenési javítások
 * (Focimenedzser #fm, Kosármenedzser #km, Versenycsapat-menedzser
 *  #vm, Szövetségi kapitány #sk — ugyanaz a játékcsalád, ugyanazok
 *  a stílusszabályok, ezért a javítás is közös)
 * =============================================================
 * A játékok saját fájljai (style.css, skin-kuponkiraly.css, a
 * szkript) VÁLTOZATLANOK — minden javítás ebben a fájlban van, a
 * skin UTÁN betöltve. Így egy új játékverzió feltöltésekor a
 * javítások nem vesznek el.
 *
 * Csak azt írja felül, ami kilógott; ami eddig elfért, az ugyanúgy
 * néz ki, mint eddig.
 * ============================================================= */

/* 1. TABELLA, GÓLLÖVŐLISTA: A TÁBLA KITOLTA A KÁRTYÁT.
 *
 * Az oszlopsablon nélküli .grid egyetlen „auto" oszlopot kap, ami
 * a tartalom legkisebb szélességéig NŐ — a görgethető táblát
 * tartalmazó doboz így nem a kártyához igazodott, hanem a táblához,
 * és jobbra kilógott (P, GP oszlop levágva). minmax(0, 1fr): az
 * oszlop a kártya szélességét veszi fel, a tábla a saját
 * keretében görgethető. */
:is(#fm,#km,#vm,#sk) .grid:not(.g2):not(.g3):not(.g4) { grid-template-columns: minmax(0, 1fr); }
:is(#fm,#km,#vm,#sk) .grid > * { min-width: 0; }

/* A görgetőkereten kívüli táblák (góllövőlista, eredmények,
 * pénzügyi listák) mobilon: a nevek törhetnek két sorba, a számok
 * nem — így nem lógnak ki a kártyából. */
@media (max-width: 520px) {
  :is(#fm,#km,#vm,#sk) table.t:not(.tw table) td { white-space: normal; }
  :is(#fm,#km,#vm,#sk) table.t:not(.tw table) td.n,
  :is(#fm,#km,#vm,#sk) table.t:not(.tw table) td.c { white-space: nowrap; }
}

/* 2. GOMBOK: A FELIRAT KILÓGOTT A GOMBBÓL.
 *
 * „Fejlesztés · 42,6 M€", „+10 000 hely · 30,0 M€": a gomb nem
 * lehet szélesebb a dobozánál, a felirat viszont nem törhetett —
 * a fehér szöveg kicsúszott a fehér háttérre, olvashatatlanul.
 * Most a felirat két sorba törik, ha nem fér el. Ami elfér, az
 * egy sorban marad (flex-shrink: 0: a sorban álló gombok nem
 * nyomódnak össze, ahogy eddig sem). A táblázatcellák gombjai
 * maradnak egysorosak (ott a tábla görgethető). */
:is(#fm,#km,#vm,#sk) .btn { white-space: normal; text-align: center; flex-shrink: 0; overflow-wrap: break-word; }
:is(#fm,#km,#vm,#sk) td .btn,
:is(#fm,#km,#vm,#sk) .tabs .btn,
:is(#fm,#km,#vm,#sk) .seg .btn { white-space: nowrap; overflow-wrap: normal; }

/* 3. MECCS FEJLÉCE MOBILON: A CSAPATSZÍN-KORONG „ÖSSZEVISSZA".
 *
 * A címer, a név és a mezszín-korong egymás után folyt; hosszú
 * névnél a sor tördelése hol a korongot, hol a címert vitte a
 * következő sorba — a két csapatnál máshová. Keskeny kijelzőn
 * most mindig ugyanígy: fent a címer és a korong (a hazainál
 * balra, a vendégnél tükrözve jobbra), alatta a név. A hosszú
 * egyszavas név (pl. Székesfehérvár) végső esetben törik. */
@media (max-width: 520px) {
  :is(#fm,#km,#vm,#sk) .mview .score .tn {
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: 6px; row-gap: 4px; overflow-wrap: anywhere;
  }
  :is(#fm,#km,#vm,#sk) .mview .score .tn::before { content: ''; flex-basis: 100%; height: 0; order: -1; }
  :is(#fm,#km,#vm,#sk) .mview .score .tn > svg { order: -3; flex: 0 0 auto; }
  :is(#fm,#km,#vm,#sk) .mview .score .tn > .kit { order: -2; flex: 0 0 auto; }
  :is(#fm,#km,#vm,#sk) .mview .score .tn.r { justify-content: flex-end; text-align: right; }
  :is(#fm,#km,#vm,#sk) .mview .score .tn.r > .kit { order: -3; }
  :is(#fm,#km,#vm,#sk) .mview .score .tn.r > svg { order: -2; }
}

/* Nagyon keskeny kijelzőn (360 px alatt) kicsit kisebb betű, hogy a
 * hosszú nevek és gombfeliratok szótörés nélkül elférjenek. */
@media (max-width: 360px) {
  :is(#fm,#km,#vm,#sk)[data-skin="kk"] .mview .score .tn { font-size: 11px; }
  :is(#fm,#km,#vm,#sk) .btn.sm { font-size: 13px; padding: 5px 9px; }
}