/* THE FELT - 99-responsive.css
   NARROW SCREENS - must stay LAST so these win over the base rules
   Part of a multi-file build; load order is fixed in The_Felt.html. */
/* ============================================================
   NARROW SCREENS - last in the file so these win over the base rules
   ============================================================ */
@media(max-width:620px){
  /* a narrow screen gets a rounder table so the seats have vertical room */
  .table-stage{padding:44px 10px 52px;}
  .ptable{aspect-ratio:1.28/1;}
  .ptable .felt{inset:3.2% 2.4%;}
  .ptable .betline{inset:11% 9%;}
  .ptable .feltmark{font-size:10px;letter-spacing:.3em;top:20%;}
  .seat{width:78px;}
  .seat .pod{padding:4px 6px;gap:5px;border-radius:9px;}
  .seat .nm{max-width:38px;font-size:10px;}
  .seat .stk{font-size:9.5px;}
  .seat .avatar{width:20px;height:20px;font-size:10px;}
  .seat .posb{font-size:7.5px;padding:1px 5px;top:-6px;right:-3px;}
  .seat .holecards{min-height:36px;margin-bottom:-6px;}
  .seat.hero .holecards{min-height:48px;margin-bottom:-4px;gap:4px;}
  .seat.hero .holecards .pcard{width:34px;height:48px;padding:2px 4px;border-radius:4px;}
  .seat.hero .holecards .pcard .r{font-size:15px;}
  .seat.hero .holecards .pcard .s{font-size:12px;}
  .seat .statusb{font-size:7.5px;padding:1px 6px;}
  .pcard.sm{width:26px;height:36px;border-radius:4px;padding:2px 3px;}
  .pcard.sm .r{font-size:11px;} .pcard.sm .s{font-size:9px;}
  .pcard.md{width:36px;height:50px;padding:3px 4px;} .pcard.md .r{font-size:15px;} .pcard.md .s{font-size:12px;}
  .bslot{width:36px;height:50px;}
  .ptable .board{gap:4px;}
  .betspot .amt{font-size:9.5px;} .betspot .disc{width:11px;height:11px;}
  .dbtn{width:18px;height:18px;font-size:9px;}
  .ptable .potline{font-size:10.5px;padding:3px 10px;}
  .actionbar{margin-top:-18px;padding:10px;}
  .bigbtn{padding:10px 16px;font-size:13px;min-width:82px;}
  .betsizer input[type=range]{width:120px;}
}
@media(max-width:620px){main{padding:0 10px;margin-top:14px;}.panel{padding:14px;}
  .panel>h3{margin:-14px -14px 12px;padding:10px 14px;}}
@media(max-width:1120px){
  .navgrp+.navgrp{margin-left:4px;padding-left:5px;}
  .iconbtn{height:29px;padding:0 9px;font-size:11.5px;}
}
/* Nine destinations in a fixed-height bar. The bar already scrolls sideways
   when they do not fit, but a hidden scrollbar with no other cue reads as
   "Results is missing" rather than "there is more to the right" - which is
   exactly how it looked at 820px. So: squeeze first, and only once the
   squeeze runs out, fade the right edge so it is visibly a scroller. */
@media(max-width:1000px){
  .topbar nav button{padding:6px 8px;font-size:11.5px;}
  .topbar nav{gap:2px;}
  .navgrp+.navgrp{margin-left:2px;padding-left:3px;}
}
@media(max-width:860px){
  .topbar nav{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%);
              mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%);}
  .topbar nav button{padding:6px 7px;font-size:11px;}
  .brand .mark{font-size:16px;}
}
@media(max-width:620px){
  .glossrow{grid-template-columns:1fr;gap:2px;}
  .pop{width:calc(100vw - 20px);left:10px !important;}
  /* the card field is the thing you touch every hand, so it gets the full
     width and everything else lines up under it */
  .parow{gap:10px;}
  .parow>.pafield.grow{flex:1 1 100%;order:-1;}
  .parow>.pafield:last-child{flex:1 1 100%;}
  .parow>.pafield:last-child .row{width:100%;}
  .parow>.pafield:last-child .row .btn{flex:1;}
  .pafield>.cap{white-space:normal;line-height:1.35;}
  .cardin{width:100%;}
  .cardin input{flex:1;min-width:0;width:auto;font-size:17px;}
  .cardin .cardline{min-height:38px;}
  .seatedit{padding:8px;}
  .seatedit th{font-size:9px;padding:2px 3px;}
  .seatedit td{padding:3px;}
  .seatedit input[type=text]{font-size:12px;padding:5px 6px;}
  .seatedit input[type=number]{width:58px;font-size:12px;padding:5px 4px;}
  /* the 52-card grid was 20px per cell on a phone - unusable as a touch target */
  .pickgrid{grid-template-columns:repeat(7,1fr);gap:5px;}
  .bigbtn{padding:11px 14px;min-width:76px;}
  .quickbar .bigbtn.wide{min-width:100%;}
}


/* ============================================================
   SIMULATOR SHELL - narrow screens
   Same rule as the rest of this file: these live at the very END of the last
   stylesheet, because they share specificity with the base rules and would
   be silently overridden anywhere earlier.
   ============================================================ */
/* ---------- the gap that broke the nine-handed table ----------
   Seat pods were a fixed 118px from 1100px all the way down to 620px, while
   the felt they sit around shrinks with its container. At nine-handed and a
   1200px window there are four pods across the top of a 600px table, which
   is 472px of pod in 600px of table with the outermost two hanging off the
   ends - so they touched, and the numbers on them ran together. The pods now
   shrink with the table. */
@media(max-width:1300px){
  .seat{width:106px;}
  .seat .nm{font-size:11px;}
  .seat .stk{font-size:10px;}
  .seat .avatar{width:25px;height:25px;font-size:12px;}
  .seat .pod{padding:5px 8px;gap:6px;}
}
@media(max-width:1160px){
  .seat{width:94px;}
  .seat .nm{font-size:10.5px;}
  .seat .stk{font-size:9.5px;}
  .seat .avatar{width:22px;height:22px;font-size:11px;}
  .seat .pod{padding:5px 7px;gap:5px;border-radius:10px;}
  .seat .hudline{font-size:8px;margin-top:2px;padding-top:2px;}
  .seat .posb{font-size:8px;padding:1px 5px;}
}
@media(max-width:900px){
  .seat{width:84px;}
  .seat .avatar{width:20px;height:20px;font-size:10px;}
  .seat .nm{font-size:10px;}
  .seat .stk{font-size:9px;}
  .assistbar .asw{padding:3px 9px 3px 7px;font-size:11px;}
  .assistbar .alab{display:none;}
}

@media(max-width:1100px){
  /* the reads rail drops under the table rather than squeezing it */
  .sim-main{grid-template-columns:1fr;}
  .reads{position:static;max-height:none;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:8px;}
  .reads h4{grid-column:1/-1;}
  .replay{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .strip .cell,.trnbar .cell{min-width:50%;flex:1 1 50%;
    border-bottom:1px solid var(--border);}
  .lobby{grid-template-columns:1fr;}
  .leakgrid{grid-template-columns:1fr;}
  .hrow{grid-template-columns:44px 1fr auto;}
  .hrow .hmeta{display:none;}
  .run{grid-template-columns:1fr 56px 70px;}
  .run .rc{display:none;}
  .sim-tabs button{padding:8px 12px;font-size:12px;}
}
@media(max-width:620px){
  .reads{grid-template-columns:1fr;}
  .carbox .v{font-size:20px;}
  /* two-up rather than one-up: seven stat cells stacked full width pushed the
     table most of a screen down, which defeats the point of the rebuild */
  .strip .cell,.trnbar .cell{min-width:0;flex:1 1 46%;}
  .strip .v,.trnbar .v{font-size:15px;}
}
@media(max-width:400px){
  .strip .cell,.trnbar .cell{min-width:100%;flex:1 1 100%;}
}

/* ============================================================
   WHEN THE FIT LAYOUT SHOULD GIVE UP
   It is built for a laptop, which is what this app is used on. Below about
   1080px the reads rail cannot sit beside the table at all (see the rule
   above that drops it under), and below about 620px of height there is no
   arrangement that fits a felt, a coach and a row of buttons. In both cases
   the page goes back to being a page and scrolls.
   ============================================================ */
@media(max-width:1080px),(max-height:620px){
  body.tablefit{height:auto;overflow:visible;display:block;}
  body.tablefit>main{display:block;margin:16px auto 30px;}
  body.tablefit>main>section.view.on{display:block;}
  body.tablefit .sim{display:flex;}
  body.tablefit .sim-pane.fitpane.on{display:block;}
  body.tablefit .sim-pane:not(.fitpane).on{overflow:visible;}
  .sim-main.fit{display:grid;grid-template-columns:minmax(0,1fr) 340px;}
  .sim-main.fit .sim-stage{display:block;}
  .sim-main.fit .table-stage{display:block;padding:52px 56px 64px;}
  .sim-main.fit .ptable{width:100%;min-width:0;}
  .rail{max-height:none;}
  .railbody{overflow:visible;}
}
@media(max-width:1080px){
  .sim-main.fit{grid-template-columns:1fr;}
}
/* A short screen - a 13" laptop at 768px, or a window with the devtools
   open - keeps the fit layout and just spends less of it on chrome, so the
   felt gets what is left. */
/* On a short screen the stat strip and the assistance switches stop being
   two stacked bars and share one row. That is 40px straight back into the
   felt, which is the difference between a table you can read and one you
   are squinting at. Both are still above the table and still reachable
   mid-hand, which is the only thing that mattered about their position. */
@media(max-height:860px){
  /* Practice's seven stat cells and the five assistance switches fit beside
     each other, so on a short screen they share a row and the felt gets the
     40px back.

     The tournament does NOT do this. Its bar carries nine cells - level,
     stack, players, average, rank, to the money, stage, bounty, clock - and
     squeezed into half the width they wrapped onto THREE rows: 109px, which
     is worse than the two stacked bars it was trying to replace. It keeps
     its own row and gets tighter cells instead. */
  body.tablefit #ttPane-table.on{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto minmax(0,1fr);gap:8px 10px;
  }
  body.tablefit #ttPane-table>.strip{grid-column:1;grid-row:1;}
  body.tablefit #ttPane-table>.assistbar{grid-column:2;grid-row:1;margin-top:0;
    align-self:stretch;flex-wrap:nowrap;}
  body.tablefit #ttPane-table>.sim-main{grid-column:1/-1;grid-row:2;min-height:0;}
  body.tablefit #tvGame>.trnbar .cell{padding:4px 9px;min-width:74px;}
  body.tablefit #tvGame>.trnbar .v{font-size:13px;}
  body.tablefit #tvGame>.assistbar{margin-top:0;}
}
@media(min-height:621px) and (max-height:800px){
  .stagehead{min-height:29px;padding:4px 12px;}
  .strip .cell{padding:4px 11px;}
  .strip .v{font-size:14px;}
  .strip .k{font-size:8.5px;}
  .assistbar{padding:4px 8px;margin-top:0;}
  .console .bigbtn{padding:9px 18px;font-size:13px;}
  .console .actionbar{padding:7px 11px;gap:7px;}
  .cd-verb{font-size:17px;}
  .cd-verdict{padding:7px 13px;min-width:104px;}
  .cd-body{padding:6px 12px;gap:4px;}
  /* two lines of reasoning rather than three, and it still scrolls - a
     short screen would rather have the felt */
  .cd-why{max-height:36px;}
  .sim-main.fit .table-stage{padding:30px 52px 66px;}
}