/* Minileague Squad Check

   The mobile shell up to 720 px: a compact top bar, floating bottom
   navigation, the "More" sheet and scrollers around tables.
   <link id="mqM">, viz applyView() v js/ui.js.
   ============================================================ */

:root{--mnav-h:62px}
  html{-webkit-text-size-adjust:100%}

  /* Room has to be left under the content for the floating bar, or the
     last table row would end up beneath it and be unreadable. */
  body{padding-bottom:calc(var(--mnav-h) + env(safe-area-inset-bottom) + 18px)}
  .wrap{padding:0 12px}

  /* ---------- top bar ----------
     A logo, a subtitle, a countdown, a name and four buttons do not fit in
     400 px. Only what has to be visible without a click stays: the mark and
     the countdown. The account and the switches move into the "More" sheet. */
  .bar{padding-top:env(safe-area-inset-top)}
  .bar .wrap{height:56px;gap:10px;padding:0 12px}
  .bar .brand{flex:1 1 auto;min-width:0;overflow:hidden}
  .bar .brand img{width:28px;height:28px}
  .bar .btxt{min-width:0;flex:1;display:block}

  /* The league name comes back on a phone. The selector has to be as strong
     as `.bar .brand .tx{display:none}` in app.css (the rule for a narrow
     desktop, where the name gives way to the segment) — otherwise that would
     win and only the trophy would be left in the header.

     One line, clipped at the end: a two-line name would leave no room in a
     56px bar for the gameweek state under it. */
  .bar .brand .tx{display:block;font-size:13px;line-height:1.15;
    letter-spacing:.01em;-webkit-line-clamp:1;max-width:none;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* The `long` class is added to long names because of the desktop segment,
     which takes room beside them. On a phone there is no segment, so the
     name can stretch across the whole bar. */
  .bar .brand .tx.long{font-size:13px;letter-spacing:.01em;max-width:none}

  /* Gameweek state and countdown on one line under the name. It replaces the
     whole status bar, which took two rows below the header. */
  .bar .brandsub{display:block;margin-top:2px;font-family:var(--f-mono);
    font-size:10.5px;line-height:1.2;color:var(--gold-lift);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bar .brandsub[hidden]{display:none}

  .bar .cd{display:none}

  /* On a phone the data status belongs in the header, not in its own bar. */
  .statusbar{display:none!important}
  .bar .who{margin-left:0;gap:5px;flex:none}
  /* The team name and account management go into the "More" sheet. */
  .bar .who b,#logout,#gauth{display:none!important}
  /* One button stays in the bar: reload. The view and dark mode are switched
     in the "More" sheet — there is no room for three circles next to the
     league name, and the name is what people look at. */
  .bar #viewmode,.bar #theme{display:none}
  .bar .who button.small.icon{padding:4px 7px;min-width:28px;font-size:13px}

  /* The horizontal navigation is replaced by the bottom bar. */
  .navbar{display:none}

  .rail .wrap{height:32px;padding-top:16px;padding-bottom:5px}
  .railkey{font-size:9.5px;gap:10px;padding-bottom:6px}

  /* ---------- obsah ----------
     A 28px panel inset is an eighth of the width on a 360px display. */
  .panel{padding:18px 14px;margin:10px 0 14px;border-radius:18px}

  /* The explanatory sentence above each panel ("Standings, how the table has
     moved…") took two or three rows above the first number. On desktop there
     is room for it; on a phone it pushed the content below the fold — and it
     is read once anyway. The "Refresh" button goes with it: ⟳ in the header
     does the same and is visible everywhere.

     Deliberately only direct children of the panel, so it does not catch
     tabulek a karet. */
  .panel>.hint,.panel>.panelhead{display:none}
  h2{font-size:14px;margin:24px 0 8px}
  .panel table{font-size:12px}
  .tipbox{font-size:12px;padding:11px 13px}

  /* Wide tables do not wrap, they slide sideways — and the scroller runs past
     the panel edge, so it is visible that something continues. */
  .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin:0 -14px;padding:0 14px}
  .tscroll>table{min-width:max-content}

  .subnav,.gwnav,.phasenav{overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}

  /* The tabs reach the panel edges so the line under them reads as a content
     divider, not an underlined paragraph. A tighter gap than on desktop: four
     fit on a 360px display instead of two and a half. */
  .subnav{gap:16px;margin:0 -14px 14px;padding:0 14px;font-size:12.5px}
  .sub-btn{font-size:12.5px;padding:9px 0 10px}
  .subnav::-webkit-scrollbar,.gwnav::-webkit-scrollbar,
  .phasenav::-webkit-scrollbar{display:none}

  /* Without this the browser waits 300 ms in case a double tap arrives, and
     the whole app feels sluggish. */
  button,.nav button,#mnav button{touch-action:manipulation}
  button.small{padding:8px 14px}

  /* ---------- floating bottom bar ---------- */
  #mnav{
    display:flex;position:fixed;z-index:60;
    left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));
    height:var(--mnav-h);align-items:stretch;gap:2px;padding:6px;
    border-radius:20px;
    background:rgba(43,0,48,.93);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 10px 30px rgba(20,0,24,.42);
  }
  /* Six tiles instead of five: the icon and the type go down a notch, or a
     longer label would be clipped on a narrow phone. */
  #mnav button{
    flex:1 1 0;min-width:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;
    background:none;border:0;border-radius:12px;padding:4px 1px;
    color:#C0A0C8;font-family:var(--f);font-size:9px;font-weight:600;
    letter-spacing:-.01em;
    line-height:1;cursor:pointer;transition:background .15s,color .15s;
  }
  #mnav button svg{width:20px;height:20px;stroke:currentColor;fill:none;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

  /* Home is the entry point, not one of the sections — a thin line after it
     keeps that visually separate even in a wider bar. */
  #mnav button:first-child{position:relative}
  #mnav button:first-child::after{content:'';position:absolute;right:-2px;
    top:22%;bottom:22%;width:1px;background:rgba(255,255,255,.14)}

  /* The narrowest phones: labels go, icons stay. */
  @media(max-width:340px){
    #mnav button span{display:none}
    #mnav button svg{width:22px;height:22px}
  }
  #mnav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;display:block}
  #mnav button[aria-selected="true"]{color:#fff;background:rgba(255,255,255,.13)}
  #mnav button[aria-selected="true"] svg{stroke:var(--mint-fill)}
  #mnav button:active{transform:scale(.93)}

  /* ---------- the "More" sheet ----------
     The remaining sections and the account. It slides up from the bottom,
     because that is where the thumb is — a menu dropping from the top bar
     would be harder to use. */
  #msheet{position:fixed;inset:0;z-index:70;display:none}
  #msheet.on{display:block}
  #msheet .scrim{position:absolute;inset:0;background:rgba(15,0,18,.5);
    animation:mfade .18s ease}
  #msheet .card{position:absolute;left:0;right:0;bottom:0;
    background:var(--white);color:var(--charcoal);
    border-radius:22px 22px 0 0;
    padding:10px 14px calc(20px + env(safe-area-inset-bottom));
    max-height:84vh;overflow-y:auto;
    box-shadow:0 -14px 40px rgba(20,0,24,.34);
    animation:msheetUp .22s cubic-bezier(.2,.8,.3,1)}
  @keyframes msheetUp{from{transform:translateY(100%)}to{transform:none}}
  @keyframes mfade{from{opacity:0}to{opacity:1}}
  #msheet .grip{width:38px;height:4px;border-radius:2px;background:var(--line);
    margin:2px auto 10px}
  #msheet h3{font-family:var(--f-disp);font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--mute);margin:14px 0 8px}
  #msheet h3:first-of-type{margin-top:2px}
  #msheet .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  /* The outbound link looks like the other tiles but is an <a> — hence
     selectors for both. */
  #msheet .mgrid button,
  #msheet .mgrid a{display:flex;align-items:center;gap:9px;text-decoration:none;
    background:var(--haze);border:0;border-radius:14px;padding:13px 12px;
    font-family:var(--f);font-size:13px;font-weight:600;color:var(--charcoal);
    text-align:left;cursor:pointer;min-width:0}
  #msheet .mgrid button span,
  #msheet .mgrid a span{overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  #msheet .mgrid button svg,
  #msheet .mgrid a svg{width:18px;height:18px;stroke:currentColor;
    fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
    flex:none;color:var(--mute)}
  #msheet .mgrid button[aria-selected="true"]{background:var(--aubergine);
    color:#fff}
  #msheet .mgrid button[aria-selected="true"] svg{color:var(--mint-fill)}
  .navout{display:none}
  #msheet .mwho{display:flex;align-items:center;gap:8px;font-size:12.5px;
    color:var(--mute);margin:0 0 8px}
  #msheet .mwho b{color:var(--charcoal);font-weight:700;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}

  /* ============================================================
     SESTAVA NA JEDNU OBRAZOVKU

     The pitch was three screens long on a phone: a player card was 136 px,
     so four rows came to almost 600 px — with the team header and the
     gameweek summary above them. Anyone wanting to see the attack had to
     scroll, losing sight of the defence. Yet "what the whole team looks
     like" is the only reason to visit that tab.

     So the card shrinks to a fifth of the width. A fifth, not a third: the
     widest row has five players (five at the back), and if that fits, they
     all fit — and every row keeps the same card size. The proportions inside
     the card stay, everything just scales down: the fixed grid row heights
     are not dropped, so cards in a row are still equally tall even with a
     "yet to play" note.

     The new card height is 94 px, four rows with gaps 400 px. Together with
     the gameweek summary the whole XI fits above the fold.
     ============================================================ */
  .pitch{padding:12px 7px 14px;gap:8px;margin:12px 0}
  .row{gap:5px}

  .shirt{
    width:calc(20% - 4px);max-width:78px;
    padding:6px 3px 7px;border-radius:9px;
    grid-template-rows:28px 13px 10px 20px 10px;
  }
  .shirt .kit{width:25px;height:27px}
  .shirt .nm{font-size:10.5px}
  .shirt .tm{font-size:7.5px;letter-spacing:.1em;text-indent:.1em}
  .shirt .pts{font-size:18px}
  .shirt .pts.wait{font-size:12px}
  .shirt .mn{font-size:8px}
  .shirt .fd{font-size:9px}
  .shirt .cap{top:3px;right:3px;font-size:7.5px;padding:1px 3px;border-radius:3px}

  /* The gameweek summary: three numbers side by side with a note under them.
     The big number took 38 px of height for effect, not for legibility. */
  .livebar{gap:8px 16px;padding:10px 12px 12px;margin:-2px 0 2px}
  .livebar .big{font-size:24px}
  .livebar b{font-size:16px}
  .livebar span{font-size:9px;margin-top:2px}
  .livebar .txt{flex-basis:100%;text-align:left;font-size:10.5px;line-height:1.35}

  /* The team header above the pitch. Six items of 82 px wrapped into three
     rows on a 360px display and pushed the lineup down another 120 px. */
  .meta,.kpis{gap:10px 18px;margin-bottom:6px}
  .meta div,.kpis div{min-width:0;flex:1 1 40%}
  .meta .k,.kpis .k{font-size:9.5px;letter-spacing:.06em}
  .meta .v,.kpis .v{font-size:17px}

  /* Four awards side by side shrink into unreadable columns on a phone. Two
     and two: the winner's name then fits in full. */
  /* On mobile the rows do not wrap anywhere, they just tighten up. */
  .awards.mini .award{padding:8px 10px;gap:9px}
  .awards.mini .medal{width:26px;height:26px;font-size:13px}
  .awards.mini .who{font-size:12px}
  .awards.mini .val{font-size:15px}

  /* On mobile .phead is hidden (the rows carry labels in data-l), so there
     would be nothing to click for sorting. In the whole-squad view it comes
     back — as a strip of buttons without the Player column or the fixtures. */
  .squadlist.flat .phead{display:grid;grid-template-columns:repeat(3,1fr);
    gap:4px;padding:8px 10px}
  .squadlist.flat .phead>span:not([data-sort]){display:none}
  .squadlist.flat .phead [data-sort]{justify-content:center;
    padding:5px 2px;border-radius:7px;background:var(--white);
    border:1px solid var(--line);font-size:9.5px}
  .squadlist.flat .phead [data-sort]:not([aria-sort="none"]){
    background:var(--aubergine);border-color:var(--aubergine);color:#fff}

  /* A fixture on a phone: the names do not fit beside each other with the
     score between them, so the score goes underneath and the card narrows to
     two columns. */
  .h2hm{grid-template-columns:1fr auto;gap:6px 10px;padding:10px 12px}
  .h2hm .side b{font-size:12.5px;white-space:nowrap}
  .h2hm.big .side b{font-size:14px}
  .h2hm .sc{font-size:17px;grid-row:1/3;align-self:center}
  .h2hm.big .sc{font-size:22px}
  .h2hm .side.r{grid-column:1;text-align:left}
  .h2hm .side.r::before{content:'vs ';font-family:var(--f-mono);
    font-size:10px;color:var(--mute)}
  table.h2ht th,table.h2ht td{padding:6px 4px;font-size:11.5px}

  /* The newsletter on a phone: the filter is a horizontal scroller (it
     already has one as .subnav), the cards are narrower and the excerpt
     shorter — three lines are enough to tell what an article is about. */
  .ncard{padding:11px 12px}
  .ncard h4{font-size:14px}
  .ncard p{font-size:12px;display:-webkit-box;-webkit-line-clamp:3;
    -webkit-box-orient:vertical;overflow:hidden}
  .nmeta{font-size:10.5px;gap:7px}

  /* Comparisons stay two-column — it is the one place where two numbers side
     by side are worth reading together. */
  .advgrid{grid-template-columns:1fr;gap:8px}
  .advbox{padding:11px 12px}
  .advswap b{font-size:13.5px}
  .advswap i{font-size:15px}
  table.advcmp td,table.advcmp th{padding:5px 2px;font-size:11.5px}
  table.advcmp th{width:42%;font-size:10.5px}

  /* ---------- the squad as a bottom sheet ----------
     The same modal as on desktop, just stuck to the bottom: the thumb is down
     there, and a dialog in the middle of the screen is harder to dismiss on a
     phone than a sheet that can be tapped away anywhere above it. */
  .sqm .card{left:0;right:0;bottom:0;top:auto;transform:none;
    width:auto;max-width:none;border-radius:22px 22px 0 0;
    max-height:86vh;padding:10px 14px calc(20px + env(safe-area-inset-bottom));
    box-shadow:0 -14px 40px rgba(20,0,24,.34);
    animation:sqUp .22s cubic-bezier(.2,.8,.3,1)}
  @keyframes sqUp{from{transform:translateY(100%)}to{transform:none}}
  .sqm .grip{display:block;width:38px;height:4px;border-radius:2px;
    background:var(--line);margin:2px auto 10px;cursor:pointer}
  .sqm .x{display:none}
  .sqm h3{margin-right:0;font-size:15.5px}
  .sqsum .big{font-size:22px}
  .sqp{grid-template-columns:30px 1fr auto auto;gap:6px;padding:7px 6px}
  .sqp b{font-size:13.5px}

  /* Data status on a narrow display: two rows instead of one, so the note
     does not have to be shortened into nonsense. */
  .statusbar .wrap{padding:6px 0;gap:6px;font-size:11.5px}
  .statusbar .sbnote{width:100%;order:5}
  .statusbar .sbspace{display:none}

  /* Two squads side by side do not fit legibly on a phone — stack them. */
  .sqcmp{grid-template-columns:1fr}
  .sqcol + .sqcol{border-top:1px solid var(--line);padding-top:10px}
  .h2hm .bilance{position:static;transform:none;display:block;
    text-align:center;margin-top:4px}

  /* On a phone the bottom bar handles navigation — the segment and the search
     in the header would only take room from the league name. The gameweek
     state stays in its own bar under the header, where it fits in full.

     Deliberately without @media: the view switch rewrites the media attribute
     on the <link>, so "the mobile version on a wide monitor" has to hold too
     — and a nested query would switch it off. */
  #topnav,.bar .cmd,.bar .state,.barspace{display:none}
  /* Initials in a circle take more room in a narrow bar than a team name,
     which can be clipped — so on a phone the original form stays. */
  .bar .who b{width:auto;height:auto;border:0;background:none;border-radius:0}
  .bar .who b .tn{display:inline}