/* ==========================================================================
   PCB App — native-feel layer (shared by Junior and X-League)
   Pairs with pcb-native.js. Removes the "this is a web page" tells and
   styles the swipe transition and pull-to-refresh indicator.
   ========================================================================== */

/* No rubber-band on the page itself, no double-tap zoom, no 300ms tap delay */
html { overscroll-behavior-y: none; -webkit-text-size-adjust: 100%; }
body {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Chrome (nav, buttons, cards) is not selectable or long-pressable */
.topbar, .bottomnav, .bottom-nav, .quick, .quick-card, .pcb-back,
.bottomnav button, .bottom-nav button, .team-card, .card, .set-team {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
a, button { -webkit-tap-highlight-color: transparent; }
.topbar a, .bottomnav a, .bottom-nav a { -webkit-touch-callout: none; }

/* Text you may want to copy stays copyable */
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }

/* Tab-swipe slide */
@keyframes pcbSlideL { from { transform: translateX(28px); opacity: .55; } to { transform: none; opacity: 1; } }
@keyframes pcbSlideR { from { transform: translateX(-28px); opacity: .55; } to { transform: none; opacity: 1; } }
.view.pcb-slide-l { animation: pcbSlideL .26s cubic-bezier(.2,.7,.2,1) both; }
.view.pcb-slide-r { animation: pcbSlideR .26s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  .view.pcb-slide-l, .view.pcb-slide-r { animation: none; }
}

/* Pull-to-refresh indicator: a ring that fills as you pull, spins while loading */
#pcbPtr {
  --p: 0;
  position: fixed; left: 50%; z-index: 45;
  top: calc(env(safe-area-inset-top, 0px) + 74px);
  width: 34px; height: 34px; margin-left: -17px;
  border-radius: 50%;
  background: #181A20; border: 1px solid #2a2e37;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(-46px) scale(.8);
  transition: opacity .15s, transform .15s;
  pointer-events: none;
}
#pcbPtr.show {
  opacity: 1;
  transform: translateY(calc(var(--p) * 22px - 12px)) scale(calc(.85 + min(var(--p), 1) * .15));
  transition: none;
}
#pcbPtr .pcb-ptr-ring {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.18);
  border-top-color: #EF1B24;
  transform: rotate(calc(min(var(--p), 1) * 360deg));
}
#pcbPtr.armed .pcb-ptr-ring { border-top-color: #EF1B24; border-right-color: #EF1B24; }
#pcbPtr.spin { transform: translateY(10px) scale(1); transition: transform .15s; }
#pcbPtr.spin .pcb-ptr-ring { animation: pcbSpin .7s linear infinite; transform: none; }
@keyframes pcbSpin { to { transform: rotate(360deg); } }

/* "Tap to update" pill: retired. Pull-to-refresh applies updates, and the app
   updates itself silently when it returns to the foreground. */
#appUpdateBanner { display: none !important; }

/* Skeleton loaders: a list container that has not rendered yet shows three
   shimmering rows instead of empty space. Purely CSS; goes away the moment
   the app writes into the container. */
#homeGames:empty, #nextGames:empty, #scheduleList:empty, #teamList:empty,
#standingsTable:empty, #xlpTable:empty, #cardList:empty, #cardsList:empty, #myTeamContent:empty {
  display: block; min-height: 204px; border-radius: 14px;
  background:
    linear-gradient(#181a20, #181a20) 0 0 / 100% 60px no-repeat,
    linear-gradient(#181a20, #181a20) 0 72px / 100% 60px no-repeat,
    linear-gradient(#181a20, #181a20) 0 144px / 100% 60px no-repeat;
  position: relative; overflow: hidden;
}
#homeGames:empty::after, #nextGames:empty::after, #scheduleList:empty::after, #teamList:empty::after,
#standingsTable:empty::after, #xlpTable:empty::after, #cardList:empty::after, #cardsList:empty::after, #myTeamContent:empty::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
  transform: translateX(-100%); animation: pcbShimmer 1.4s ease-in-out infinite;
}
@keyframes pcbShimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { #homeGames:empty::after, #nextGames:empty::after, #scheduleList:empty::after, #teamList:empty::after, #standingsTable:empty::after, #xlpTable:empty::after, #cardList:empty::after, #cardsList:empty::after, #myTeamContent:empty::after { animation: none; } }

/* Add-to-Home-Screen prompt */
#pcbInstall {
  position: fixed; left: 12px; right: 12px; z-index: 80;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
  display: flex; align-items: center; gap: 12px;
  background: #181A20; border: 1px solid #2a2e37; border-radius: 16px;
  padding: 12px 12px 12px 14px; color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(16px); transition: opacity .25s, transform .25s;
  font-family: inherit;
}
#pcbInstall.show { opacity: 1; transform: none; }
#pcbInstall .pcb-install-mark { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: #EF1B24; display: grid; place-items: center; font-weight: 900; font-size: 13px; letter-spacing: .02em; }
#pcbInstall .pcb-install-text { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.35; }
#pcbInstall .pcb-install-text b { display: block; font-size: 14px; margin-bottom: 2px; }
#pcbInstall .pcb-install-text span { color: #AEB3BE; }
#pcbInstall .pcb-install-text span b { display: inline; font-size: inherit; color: #fff; margin: 0; }
#pcbInstall .pcb-share { display: inline-flex; align-items: center; gap: 3px; vertical-align: -2px; }
#pcbInstall .pcb-install-go { flex: 0 0 auto; background: #EF1B24; color: #fff; border: 0; border-radius: 10px; padding: 9px 14px; font-weight: 800; font-size: 13px; }
#pcbInstall .pcb-install-x { flex: 0 0 auto; background: transparent; border: 0; color: #7C8290; font-size: 24px; line-height: 1; padding: 4px 6px; }
@media (min-width: 640px) { #pcbInstall { max-width: 480px; left: auto; right: 20px; } }

/* Tier 3 — My Team toolbar (calendar + share) and unread dot */
.pcb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 16px; }
.pcb-tools .pcb-tool {
  display: inline-flex; align-items: center; gap: 7px;
  background: #181A20; color: #fff; border: 1px solid #2a2e37; border-radius: 11px;
  padding: 9px 13px; font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.pcb-tools .pcb-tool:hover { border-color: #EF1B24; }
.pcb-tools .pcb-tool:active { transform: scale(.97); }
.pcb-tools .pcb-tool svg { flex: 0 0 auto; }
.pcb-tools .pcb-tool-note { flex-basis: 100%; color: #AEB3BE; font-size: 12.5px; line-height: 1.4; }
@media (max-width: 420px) { .pcb-tools .pcb-tool { flex: 1 1 auto; justify-content: center; } }

/* Unread announcements: a dot on the Home tab (the app icon gets the real badge) */
.bottomnav button.pcb-unread, .bottom-nav button.pcb-unread { position: relative; }
.bottomnav button.pcb-unread::after, .bottom-nav button.pcb-unread::after {
  content: ""; position: absolute; top: 6px; left: 50%; margin-left: 6px;
  width: 7px; height: 7px; border-radius: 50%; background: #EF1B24;
  box-shadow: 0 0 0 2px rgba(9,9,11,.95);
}

/* Per-game calendar icon on game panels */
.pcb-cal-btn {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 28px; height: 28px; margin-left: 6px; padding: 0;
  border-radius: 8px; border: 1px solid #2a2e37; background: #181A20; color: #fff;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pcb-cal-btn:hover { border-color: #EF1B24; color: #EF1B24; }
.pcb-cal-btn:active { transform: scale(.94); }
.game-row .g-court-col { white-space: nowrap; }

/* Alerts toggle state */
.pcb-tools .pcb-tool.pcb-on { border-color: #EF1B24; }
.pcb-tools .pcb-tool.pcb-on svg { color: #EF1B24; }

/* --- Keyboard-safe inputs (2026-09-21) ---
   1. iOS zooms the whole page when a focused field is under 16px. .search-box
         and select were 14px, so every tap into a search or filter blew the
               layout up. 16px stops the zoom outright.
                  2. .bottomnav is position:fixed, so with the keyboard open it floats into
                        the middle of the screen. It hides while typing.
                           3. Centred modals measured 86vh against the FULL viewport, putting the card
                                 and its input behind the keyboard.
                                    Pairs with the keyboard-state block in pcb-native.js. */
                                    @media (pointer: coarse) { input, select, textarea, .search-box { font-size: 16px !important; } }
                                    body.pcb-kb .bottomnav, body.pcb-kb .bottom-nav, body.pcb-kb #pcbInstall, body.pcb-kb #pcbPtr { display: none !important; }
                                    body.pcb-kb { padding-bottom: 0 !important; }
                                    .modal-card { max-height: 86dvh; }
                                    body.pcb-kb .modal { place-items: start center; padding-top: 10px; }
                                    body.pcb-kb .modal-card { max-height: calc(var(--pcb-vh, 86dvh) - 20px); }
                                    input, select, textarea, [contenteditable] { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 78px); scroll-margin-bottom: 20px; }