/* SC Sixers (player app): what the player screens need beyond the design's bundle.css and sixers-plus.css. */
.ph-version{margin:24px 0 0;text-align:center}
.ph-vs{display:block;font-size:.8em;line-height:1.15}
/* iPad and desktop: the same screens, a comfortable width, with the four tabs across the top */
@media (min-width:700px){
  .ph .app-content{display:flex;flex-direction:column;max-width:760px;margin:0 auto}
  .ph .ph-top{order:0}
  /* Same width, corners and shadow as the white panels below it */
  .ph .ph-tabs{order:1;position:sticky;top:8px;bottom:auto;margin:0 16px;border:0;border-radius:var(--radius-14);box-shadow:var(--shadow-card);padding:4px}
  .ph .ph-tabs a{flex-direction:row;gap:8px;min-height:48px}
  .ph .ph-main{order:2;padding-bottom:40px}
}
.size-chart{display:block;width:100%;height:auto;margin-top:8px;border-radius:var(--radius-10);box-shadow:0 0 0 1px var(--rule);background:#fff}
/* Recap cards as the real images (Last game strip, archive thumbnails) */
.l-card.l-card-img,.ra-thumb:has(img){padding:0;background:none}
.l-card.l-card-img::after,.ra-thumb:has(img)::after{display:none}
.l-card-img img,.ra-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* Squad: each player opens his LMS profile */
.ob-squad .sq-link{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink);text-decoration:none;min-height:var(--tap-target);border-radius:var(--radius-10)}
.ob-squad .sq-link:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* Getting started: the stage dots and step links are links (each step has its own address), styled as in the board */
a.ob-stage{text-decoration:none}
.ob-steplist a.linkish,.ob-index a.linkish,.ob-todo a.btn,.ob-order a.linkish,.ob-card a.linkish{text-decoration:none}
.ob-index a.linkish,.ob-steplist a.linkish{display:inline-flex;align-items:center;min-height:var(--tap-target)}
/* Preview as new player (from SC Sixers+): a bar across the top that says nothing is saved */
.pv-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:var(--ink);color:var(--paper);font-size:14px;line-height:1.35}
.pv-bar .pv-acts{display:flex;gap:8px}
.pv-bar .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);min-height:var(--tap-target)}
/* Welcome's "Have you played LMS before?" choices: text centred top to bottom, still left-aligned */
.ob-choice{justify-content:center}
/* All fixtures: finals the teams aren't decided for yet take an answer here (Available / Unavailable / Maybe) */
.me-list li.fx-final{flex-wrap:wrap;row-gap:8px}
.me-list li.fx-final .ph-joined{flex:1 1 100%}
/* Phones: the page itself never scrolls; only the middle does. Safari's toolbars then never slide in and out
   under the tab bar, which on iPhone left the bar's tap area out of line with where it's drawn, so taps missed.
   The tab bar is an ordinary part of the layout at the bottom of the screen, not a fixed overlay. */
@media (max-width:699px){
  html, body{height:100%;overflow:hidden;overscroll-behavior:none}
  .ph.app{height:100%;min-height:0;padding-bottom:0}
  .ph .app-content{height:100%;display:flex;flex-direction:column}
  .ph .ph-top{flex:none}
  .ph .ph-main{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:24px}
  .ph .ph-tabs{position:relative;flex:none;bottom:auto}
}
/* In the phone's browser (before it's a home-screen app): a short banner, and the tabs lifted a little */
.hs-banner{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-14);padding:10px 12px;margin:0 0 12px;font-size:15px}
.hs-banner-row{display:flex;align-items:flex-start;gap:8px}
.hs-banner-row span{flex:1 1 auto;font-weight:600;padding-top:2px}
.hs-banner .hs-x{flex:none;width:var(--tap-target);height:var(--tap-target);margin:-10px -10px -10px 0;border:0;background:none;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;border-radius:var(--radius-10)}
.hs-banner .ob-hs{margin-top:4px}
@media (max-width:699px){
  .in-browser .ph .ph-tabs{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
}