/* ═══════════════════════════════════════════════════════════════
   GPSL — Master UI Build
   3D cover-flow carousel · transparent header · fullscreen-ready
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Light app canvas ── */
  --app-bg:           #F5F5F3;   /* 中性微暖近白 — 去掉原本的藍味，貼近主網站純白 */
  --app-bg-soft:      #ECECE8;   /* 輸入框／球員卡底 — 同步去藍 */
  --app-text:         #0F1B33;
  --app-text-muted:   #5C6B86;
  --app-line:         rgba(15, 27, 51, 0.08);
  --app-card-shadow:  0 30px 70px rgba(10, 27, 54, 0.22),
                      0 10px 22px rgba(10, 27, 54, 0.10);

  /* ── ITTF tournament-blue card palette ── */
  --table-blue:       #1c4d75;
  --table-blue-deep:  #133957;
  --table-blue-tint:  #235e90;
  --gpsl-orange:      #DA6A2A;   /* 沉穩品牌橘 — 對齊主網站主橘（丁克 hover 那種），較不刺眼 */
  --gpsl-orange-deep: #B85A24;
  --gpsl-orange-lite: #F0851F;   /* 主網站的亮橘，供漸層的淺端使用 */
  --gpsl-orange-grad: linear-gradient(135deg, #F8A83E, #C55A20);   /* 淺→深橘漸層（對映藍→青）— 拉大淺/深對比讓漸層更明顯 */
  --card-bg:          var(--table-blue);
  --card-deep:        var(--table-blue-deep);
  --bg-input:         #0E2E4A;

  --text-main:        #FFFFFF;
  --text-input:       #E6FAFF;
  --text-muted:       #BCD3E3;
  --acc-score:        #00E5FF;
  --acc-win:          #00E676;
  --acc-lose:         #FF1744;
  --acc-warn:         #FFB300;
  --acc-gold:         #FFD54F;
  --border-soft:      rgba(255, 255, 255, 0.18);
  --border-cyan:      rgba(0, 229, 255, 0.40);

  --table-line:       #FFFFFF;
  --table-line-soft:  rgba(255, 255, 255, 0.55);

  --header-h:         60px;
  --bottom-h:         76px;

  /* ── Orientation-driven variables (flipped by .is-landscape-layout) ── */
  --tt-dir:           column;
  --net-w:            100%;
  --net-h:            10px;
  --stripe-angle:     90deg;
  --stripe-size:      6px 100%;
  --stripe-inset:     2px 0;
  --centerline-top:   8px;
  --centerline-bot:   8px;
  --centerline-left:  50%;
  --centerline-right: auto;
  --centerline-w:     2px;
  --centerline-h:     auto;
  --centerline-mx:    -1px;
  --centerline-my:    0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
}

body {
  font-family: 'Noto Sans TC', sans-serif;
  background-color: var(--app-bg);
  color: var(--app-text);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Subtle mesh grid — always visible behind the floating cards */
.bg-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 27, 51, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 27, 51, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  z-index: 0;
  pointer-events: none;
}

/* ──────────── Transparent floating header (persistent across views) ──────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  padding: 0 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border-bottom: none;
  z-index: 999;                   /* above .verify-view (150) + modals so brand stays clickable everywhere */
  pointer-events: none;           /* let mesh + cards receive clicks in empty zones */
}
.site-header > * { pointer-events: auto; }

/* Brand: logo image + text — clickable home-link across every view */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(28, 77, 117, 0.10);
  transition: opacity 0.15s ease;
}
.brand:hover  { opacity: 0.82; }
.brand:active { opacity: 0.68; }
.brand img {
  height: 44px;
  width: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 27px;
  letter-spacing: 2px;
  color: var(--app-text);
  margin: 0;
  line-height: 1;
}
/* Per-letter colours — match the official GPSL logo */
.brand-text h1 .lt-g { color: #2E7D32; } /* Green  */
.brand-text h1 .lt-p { color: #F57C00; } /* Yellow/Orange */
.brand-text h1 .lt-s { color: #D32F2F; } /* Red    */
.brand-text h1 .lt-l { color: #1565C0; } /* Blue   */
.brand-text p {
  font-size: 9px;
  color: var(--app-text-muted);
  letter-spacing: 0.3em;        /* premium athletic tracking */
  margin: 4px 0 0;
  font-weight: 600;
}
@media (max-width: 360px) {
  .brand img      { height: 38px; }
  .brand-text h1  { font-size: 22px; }
  .brand-text p   { font-size: 8px; }
}

.header-right { display: flex; align-items: center; gap: 8px; }
.menu-trigger {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--app-line);
  width: 42px; height: 42px;
  border-radius: 50%;
  font-size: 22px;
  color: var(--app-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(15, 27, 51, 0.10);
}
.menu-trigger:hover { background: rgba(255, 255, 255, 0.92); }
.notif-bell {
  position: relative; margin-right: 8px;
  background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--app-line); width: 42px; height: 42px; border-radius: 50%;
  color: var(--app-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(15, 27, 51, 0.10); vertical-align: middle;
}
.notif-bell:hover { background: rgba(255, 255, 255, 0.92); }
.notif-dot {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #E53935; color: #fff; font-size: 10.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--app-bg);
}
.menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 16px;
  background: #FFF;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 27, 51, 0.15);
  padding: 6px;
  min-width: 220px;
  z-index: 110;
  display: none;
}
.menu-dropdown.show { display: block; }
.menu-dropdown button {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--app-text);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.menu-dropdown button:hover { background: rgba(218,106,42,0.10); color: var(--gpsl-orange-deep); }
/* 「賽季報名」在選單裡以低調橘底色突顯（不脈衝，只用底色區分） */
.menu-dropdown button.menu-cta { background: rgba(218,106,42,0.12); color: var(--gpsl-orange-deep); font-weight: 800; }
.menu-dropdown button.menu-cta:hover { background: rgba(218,106,42,0.20); }

/* ══════════════════════════════════════════════════════════════
   3D cover-flow carousel — active card large + sharp,
   prev/next cards peek at the screen edges, scaled + blurred
   ══════════════════════════════════════════════════════════════ */
/* Default sizing = MOBILE PORTRAIT (small, with breathing room around).
   The height uses calc(100dvh - 180px) so the card never overlaps the
   transparent header (top) or the floating bottom-nav (below). */
.card-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(78vw, 340px);
  height: min(620px, calc(100dvh - 180px));
  transform: translate(-50%, -50%);
  overflow: visible;
  z-index: 1;
}

.stack-card {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: var(--card-bg);
  color: var(--text-main);
  border-radius: 22px;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  transform: scale(0.7) translateX(140%);
  filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(.22,.85,.3,1),
              opacity 0.45s ease,
              filter 0.45s ease;
  box-shadow: var(--app-card-shadow);
}

.stack-card.is-active {
  transform: scale(1) translateX(0);
  filter: none;
  opacity: 1;
  pointer-events: auto;
  z-index: 5;
  cursor: default;
}

/* Mobile-portrait peek: smaller stage = more room for neighbours to show through */
.stack-card.is-prev {
  transform: scale(0.78) translateX(-72%);
  filter: blur(6px);
  opacity: 0.55;
  z-index: 3;
  pointer-events: auto;
  cursor: pointer;
}
.stack-card.is-next {
  transform: scale(0.78) translateX(72%);
  filter: blur(6px);
  opacity: 0.55;
  z-index: 3;
  pointer-events: auto;
  cursor: pointer;
}
/* Block clicks on inner buttons / inputs of the blurred siblings so only
   the card itself receives the click → triggers prev()/next() in script.js */
.stack-card.is-prev *,
.stack-card.is-next * { pointer-events: none; }

/* Tablet+ — push neighbours further out, dominant active card */
@media (min-width: 768px) {
  .stack-card.is-prev { transform: scale(0.78) translateX(-92%); }
  .stack-card.is-next { transform: scale(0.78) translateX( 92%); }
}
@media (min-width: 1200px) {
  .stack-card.is-prev { transform: scale(0.78) translateX(-108%); }
  .stack-card.is-next { transform: scale(0.78) translateX( 108%); }
}

.stack-card::-webkit-scrollbar { width: 6px; }
.stack-card::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.25); border-radius: 4px; }
.stack-card::-webkit-scrollbar-track { background: transparent; }

/* ──────────── Coming Soon placeholders ──────────── */
.coming-soon {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}
.coming-soon .zh { font-size: 28px; font-weight: 900; letter-spacing: 6px; color: #FFFFFF; }
.coming-soon .en { font-size: 12px; color: var(--text-muted); letter-spacing: 3px; text-transform: uppercase; }

/* ──────────── Floating transparent bottom navigation ──────────── */
.bottom-nav {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  height: calc(var(--bottom-h) + env(safe-area-inset-bottom, 0px));
  padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: transparent;
  border-top: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 100;
  pointer-events: none;          /* let the mesh / cards receive clicks in empty zones */
}
.bottom-nav > * { pointer-events: auto; }
.nav-arrow {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  background: #0E2E4A;   /* 深藍＝計分板「選擇隊伍」底色（--bg-input），比 #0e1e32 淺一階、與橘色圓點和諧 */
  color: #FFF;
  font-size: 26px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(14, 46, 74, 0.34);
  font-family: inherit;
  transition: transform 0.15s;
}
.nav-arrow:active { transform: scale(0.92); }
.stage-indicator { display: flex; gap: 7px; }
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(15, 27, 51, 0.18);
  transition: background 0.25s, width 0.25s;
}
.dot.active { background: var(--gpsl-orange); width: 22px; border-radius: 4px; }   /* 目前位置＝橘（與全站「選中＝橘」一致）*/

/* ══════════════════════════════════════════════════════════════
   Scoreboard — ITTF table (orientation via CSS variables)
   ══════════════════════════════════════════════════════════════ */
.scoreboard-card { position: relative; }

/* Top-right fullscreen toggle on the playing card */
.btn-fullscreen {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  z-index: 20;
  transition: background 0.2s, transform 0.1s;
}
.btn-fullscreen:hover { background: rgba(255, 255, 255, 0.22); }
.btn-fullscreen:active { transform: scale(0.92); }
.btn-fullscreen svg { width: 16px; height: 16px; }

.point-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 48px 10px 0;     /* leave room for the fullscreen icon */
}
.point-selector .label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--text-muted);
}
.point-select {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--card-deep);
  color: var(--text-main);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 9px 32px 9px 12px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2300E5FF' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.point-select:focus { outline: none; border-color: var(--acc-score); box-shadow: 0 0 8px rgba(0, 229, 255, 0.3); }

/* The table — NO outer decorative border. Single source of orientation
   via CSS variables flipped by body.is-landscape-layout. */
.tt-table {
  position: relative;
  display: flex;
  flex-direction: var(--tt-dir);
  width: 100%;
  min-height: 320px;
  flex: 1 1 auto;
  background: var(--table-blue);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.20),
    0 8px 28px rgba(15, 27, 51, 0.18);
}

.tt-half {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: var(--tt-dir);
  justify-content: space-between;
  padding: 14px 14px;
  gap: 10px;
}

/* Doubles centerline — orientation switched by CSS vars */
.tt-half::before {
  content: '';
  position: absolute;
  top: var(--centerline-top);
  bottom: var(--centerline-bot);
  left: var(--centerline-left);
  right: var(--centerline-right);
  width: var(--centerline-w);
  height: var(--centerline-h);
  margin-left: var(--centerline-mx);
  margin-top: var(--centerline-my);
  background: var(--table-line-soft);
  pointer-events: none;
}

/* Net — the only decorative line on the playing surface */
.tt-net {
  position: relative;
  width: var(--net-w);
  height: var(--net-h);
  background: var(--table-line);
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.45),
    0 0 6px rgba(0, 229, 255, 0.25);
  z-index: 2;
  flex: 0 0 auto;
}
.tt-net::after {
  content: '';
  position: absolute;
  inset: var(--stripe-inset);
  background-image: linear-gradient(var(--stripe-angle), rgba(19, 57, 87, 0.40) 50%, transparent 50%);
  background-size: var(--stripe-size);
  pointer-events: none;
}

/* Swap-Sides button — solid background, high z-index.
   NO rotate. In landscape we switch to writing-mode: vertical-rl so the
   characters stay perfectly upright and stack top-to-bottom. */
.btn-swap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--table-blue);
  color: #FFFFFF;
  border: 2px solid var(--table-line);
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  font-family: inherit;
  z-index: 20;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: background 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-swap:active { transform: translate(-50%, -50%) scale(0.92); }
.btn-swap.is-active { background: var(--table-blue-tint); }
.swap-icon { line-height: 1; }
.swap-text { line-height: 1.1; }

/* Landscape: stack "換邊" vertically (upright, NOT rotated) */
body.is-landscape-layout .btn-swap {
  flex-direction: column;
  padding: 12px 8px;
  border-radius: 16px;
  gap: 2px;
  white-space: normal;
}
body.is-landscape-layout .btn-swap .swap-icon { display: none; }
body.is-landscape-layout .btn-swap .swap-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.15em;
  line-height: 1;
}

.team-inputs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.team-inputs.is-doubles { grid-template-columns: 1fr 1fr; }
.team-inputs .team-name-input { grid-column: 1 / -1; }
.team-inputs .gpsl-input { font-size: 12px; padding: 6px 8px; }

.big-score-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* Click-to-type score (visually identical to a static label) */
.big-score,
input.big-score {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 72px;
  line-height: 1;
  color: #FFFFFF;
  text-align: center;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 16px rgba(0, 229, 255, 0.22);
  width: 100px;
  min-width: 100px;
}
input.big-score {
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: textfield;
  caret-color: var(--acc-score);
}
input.big-score::-webkit-outer-spin-button,
input.big-score::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input.big-score:focus {
  outline: 1px dashed rgba(0, 229, 255, 0.45);
  outline-offset: 4px;
  border-radius: 6px;
}
input.big-score:disabled {
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  opacity: 1;
  cursor: not-allowed;
}

.btn-calc {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s, background 0.2s, opacity 0.2s;
}
.btn-calc.plus  { background: #00C8FF; color: #02283C; }
.btn-calc.minus { background: rgba(255, 255, 255, 0.16); color: var(--text-input); }
.btn-calc:active { transform: scale(0.9); }
.btn-calc:disabled { opacity: 0.30; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════
   LANDSCAPE LAYOUT  —  triggered by body.is-landscape-layout
   (set by JS for: media-query landscape, wide aspect ratio,
   OR scoreboard-card in fullscreen mode)
   ══════════════════════════════════════════════════════════════ */
body.is-landscape-layout {
  --tt-dir:           row;
  --net-w:            10px;
  --net-h:            auto;
  --stripe-angle:     0deg;
  --stripe-size:      100% 6px;
  --stripe-inset:     0 2px;
  --centerline-top:   50%;
  --centerline-bot:   auto;
  --centerline-left:  8px;
  --centerline-right: 8px;
  --centerline-w:     auto;
  --centerline-h:     2px;
  --centerline-mx:    0;
  --centerline-my:    -1px;
}

/* Desktop landscape — the PERFECT card size. Do not change. */
body.is-landscape-layout .card-stage {
  width: min(90vw, 900px);
  height: min(85vh, 600px);
}
/* Bottom nav stays visible in landscape on desktop (only hidden in fullscreen) */
body.is-landscape-layout .big-score,
body.is-landscape-layout input.big-score { font-size: 64px; width: 92px; min-width: 92px; }
body.is-landscape-layout .btn-calc { width: 44px; height: 44px; font-size: 20px; }
body.is-landscape-layout .tt-table { min-height: 60%; }

/* ── MOBILE LANDSCAPE OVERRIDE — small viewport in landscape orientation ── */
@media (max-width: 900px) and (orientation: landscape) {
  body.is-landscape-layout .card-stage {
    width: min(82vw, 540px);
    height: min(280px, calc(100dvh - 130px));
  }
  body.is-landscape-layout .big-score,
  body.is-landscape-layout input.big-score { font-size: 48px; width: 78px; min-width: 78px; }
  body.is-landscape-layout .btn-calc { width: 38px; height: 38px; font-size: 17px; }
  body.is-landscape-layout .tt-table { min-height: 55%; }
  .bottom-nav {
    height: 60px;
    padding: 6px 16px calc(env(safe-area-inset-bottom, 0px) + 6px);
  }
  .nav-arrow { width: 44px; height: 44px; font-size: 22px; }
}

/* The active scoreboard card when in fullscreen — fills the screen */
.stack-card.is-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 28px !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  z-index: 999;
}
.stack-card:fullscreen,
.stack-card:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  padding: 28px;
}
/* Hide background chrome in fullscreen */
body.fullscreen-active .bg-grid,
body.fullscreen-active .site-header,
body.fullscreen-active .bottom-nav { display: none; }
body.fullscreen-active .stack-card:not(.is-fullscreen) { visibility: hidden; }

/* ──────────── Mobile-hardened inputs ──────────── */
.gpsl-input,
input[type="text"].gpsl-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background-color: var(--bg-input) !important;
  background-image: none !important;
  color: var(--text-input) !important;
  -webkit-text-fill-color: var(--text-input) !important;
  caret-color: var(--acc-score);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.gpsl-input::placeholder { color: rgba(188, 211, 227, 0.55); }
.gpsl-input:focus {
  border-color: var(--acc-score);
  outline: none;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}
.gpsl-input:disabled { opacity: 0.65; cursor: not-allowed; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
  box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
  -webkit-text-fill-color: var(--text-input) !important;
  caret-color: var(--acc-score) !important;
  transition: background-color 99999s ease-in-out 0s;
}

/* ──────────── Match meta bar / sets summary ──────────── */
.match-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 8px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.meta-block { display: flex; flex-direction: column; align-items: center; min-width: 38px; }
.meta-label { font-size: 9px; letter-spacing: 1.5px; color: var(--text-muted); text-transform: uppercase; }
.meta-value { font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: var(--acc-score); font-variant-numeric: tabular-nums; }
.match-status-text { flex: 1; text-align: center; font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.match-status-text strong { color: var(--acc-score); font-weight: 700; }

.sets-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
  min-height: 22px;
}
.set-chip {
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 9px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-input);
  font-variant-numeric: tabular-nums;
}
button.set-chip {
  border: none;
  outline: none;
  font-family: inherit;
  text-align: center;
  line-height: 1.2;
  cursor: default;
  appearance: none;
  -webkit-appearance: none;
}
button.set-chip:disabled { cursor: default; }
button.set-chip.clickable { cursor: pointer; transition: background 0.15s, transform 0.1s, box-shadow 0.2s; }
button.set-chip.clickable:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-1px); }
.set-chip.editing { outline: 2px solid var(--acc-score); outline-offset: 1px; background: rgba(0, 229, 255, 0.22) !important; color: #FFFFFF; }
.set-chip.win-a { border-left:  3px solid var(--acc-score); }
.set-chip.win-b { border-right: 3px solid var(--acc-win); }
.set-chip.conflict {
  border: 1px solid var(--acc-lose);
  background: rgba(255, 23, 68, 0.12);
  color: #FFD7DC;
  animation: conflictPulse 1.4s ease-in-out infinite alternate;
}
@keyframes conflictPulse {
  from { box-shadow: 0 0 0 rgba(255, 23, 68, 0); }
  to   { box-shadow: 0 0 12px rgba(255, 23, 68, 0.45); }
}

/* ──────────── Buttons ──────────── */
.btn-confirm {
  width: 100%;
  background: linear-gradient(135deg, #00B248, #00E676);
  color: #052914;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 200, 83, 0.35);
  transition: transform 0.1s, opacity 0.2s;
  font-family: inherit;
}
.btn-confirm:active { transform: translateY(1px); }
.btn-confirm:disabled {
  background: #335f7c;
  color: #9bb0c1;
  cursor: not-allowed;
  box-shadow: none;
}

.action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.btn-secondary {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  border-radius: 10px;
  padding: 9px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.btn-secondary.danger { color: #FFB1BB; border-color: rgba(255, 23, 68, 0.4); }

.dispute-actions { display: none; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.dispute-actions.show { display: grid; }
.btn-dispute-confirm,
.btn-dispute-submit {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 14px 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s, opacity 0.2s, box-shadow 0.2s;
  line-height: 1.2;
}
.btn-dispute-confirm { background: linear-gradient(135deg, #0288D1, #00E5FF); color: #00131A; box-shadow: 0 4px 14px rgba(2, 136, 209, 0.32); }
.btn-dispute-submit  { background: linear-gradient(135deg, #FB8C00, #FFA726); color: #1B0E00; box-shadow: 0 4px 14px rgba(251, 140, 0, 0.34); }
.btn-dispute-confirm:active,
.btn-dispute-submit:active { transform: translateY(1px); }
.btn-dispute-confirm:disabled,
.btn-dispute-submit:disabled { background: #335f7c; color: #9bb0c1; cursor: not-allowed; box-shadow: none; }

/* ──────────── Warning / banners ──────────── */
.warning-notice {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 179, 0, 0.14);
  border: 1px solid rgba(255, 179, 0, 0.55);
  color: #FFD27F;
  font-size: 12px;
  text-align: center;
  line-height: 1.45;
  display: none;
}
.warning-notice.show { display: block; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.locked-banner {
  display: none;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(0, 119, 255, 0.18));
  border: 1px solid var(--border-cyan);
  border-radius: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--text-input);
}
.locked-banner.show { display: block; }
.locked-banner .code { display: inline-block; margin-left: 4px; font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: 3px; color: var(--acc-score); }
.locked-banner.disputed { background: rgba(255, 23, 68, 0.14); border-color: var(--acc-lose); color: #FFD7DC; }

.victory-banner {
  display: none;
  margin-bottom: 12px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(255, 213, 79, 0.22), rgba(0, 229, 255, 0.16));
  border: 1px solid var(--acc-gold);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 0 30px rgba(255, 213, 79, 0.20);
}
.victory-banner.show { display: block; }
.victory-banner .crown   { font-size: 24px; margin-bottom: 2px; }
.victory-banner .label   { font-family: 'Bebas Neue', sans-serif; font-size: 12px; letter-spacing: 3px; color: var(--acc-gold); }
.victory-banner .team    { font-size: 17px; font-weight: 900; color: #FFF; margin-top: 4px; }
.victory-banner .player  { font-size: 12px; color: var(--text-input); margin-top: 2px; }
.victory-banner .final   { display: inline-block; margin-top: 6px; font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: var(--acc-score); letter-spacing: 2px; }

.upload-section {
  display: none;
  margin-bottom: 12px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(255, 213, 79, 0.22), rgba(0, 230, 118, 0.18));
  border: 1px solid var(--acc-gold);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 0 26px rgba(255, 213, 79, 0.20);
}
.upload-section.show { display: block; }
.upload-section .headline { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 2px; color: var(--acc-gold); margin-bottom: 4px; }
.upload-section .subtle   { font-size: 11px; color: var(--text-input); margin-bottom: 10px; }
.btn-upload-match {
  width: 100%;
  background: linear-gradient(135deg, #FFB300, #FFD54F);
  color: #1B0F00;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255, 179, 0, 0.40);
  font-family: inherit;
}
.btn-upload-match:disabled { background: #998877; color: #4a3f2f; cursor: not-allowed; box-shadow: none; }

/* ══════════════════════════════════════════════════════════════
   Modals
   ══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 27, 51, 0.55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-overlay.show { display: flex; }
/* 報名確認/成功頁需蓋在報名頁(z1500)之上 */
#regConfirmModal, #regDoneModal, #regDupModal, #regCapDupModal, #regApplyModal { z-index: 1700; }
/* 月結審核彈窗 1600；「積分參數」由它裡面開啟，必須疊在它之上 */
#settleModal { z-index: 1600; }
#gpSettingsModal { z-index: 1900; }
.modal-card {
  background: #FFFFFF;
  color: var(--app-text);
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 30px 80px rgba(15, 27, 51, 0.25);
  max-height: 84vh;
  overflow-y: auto;
}
.modal-card.dark { background: var(--table-blue-deep); color: var(--text-main); }
.modal-card.wide { max-width: 480px; }
.modal-card h3 { font-size: 16px; font-weight: 900; margin-bottom: 10px; }
.modal-card .modal-body { font-size: 13px; line-height: 1.5; color: var(--app-text-muted); }
.modal-card.dark .modal-body { color: var(--text-muted); }
.modal-card .modal-actions { margin-top: 16px; display: flex; gap: 8px; justify-content: flex-end; }
.modal-btn {
  background: var(--app-bg-soft);
  border: 1px solid var(--app-line);
  color: var(--app-text);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.modal-btn.primary { background: linear-gradient(135deg, #1c4d75, #00C8FF); color: #FFF; border: none; }
.modal-btn.danger { color: #C62828; border-color: rgba(255, 23, 68, 0.5); }

/* Top-right ✕ close (injected into every modal-card) + click-outside close */
.modal-card { position: relative; }
.modal-card > h3:first-of-type { padding-right: 30px; }   /* clear the ✕ */

/* 🏓 月結審核彈窗（入口在審核台的月結區塊） */
.settle-card { max-width: 640px; }
.settle-locked {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 152, 0, 0.45);
  border-radius: 12px; padding: 14px; margin: 12px 0;
}
.settle-locked-ic { font-size: 26px; line-height: 1; }
.settle-locked-t { font-size: 14px; font-weight: 800; }
.settle-locked-s { font-size: 12px; color: var(--app-text-muted); line-height: 1.5; margin-top: 3px; }
.settle-locked-actions { margin-left: auto; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }

/* 半自動更新提示（審核台／名冊頂端，點一下同步） */
.sync-pill {
  background: linear-gradient(135deg, #fff3cd, #ffe69c);
  border: 1px solid #ffda6a; color: #7a5a00;
  border-radius: 10px; padding: 9px 12px; margin-bottom: 8px;
  font-size: 13px; font-weight: 800; cursor: pointer; text-align: center;
}
.sync-pill:hover { filter: brightness(0.97); }

/* ③ 即時同步：右下角小提示 */
.admin-sync-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(12px);
  background: rgba(15, 27, 51, 0.92); color: #fff;
  padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
  box-shadow: 0 10px 30px rgba(15, 27, 51, 0.3);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 2000;
}
.admin-sync-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ═══ 統一工具型小按鈕（方角 radius 10px）。主要/導覽鍵（送出、頁籤、返回、選單CTA）維持膠囊 ═══
   淺底＝中性底＋深字、hover 橘底；深底（.on-dark，如簡章深藍 bar）＝半透明白＋白字、hover 橘光。
   共用值同時套用到既有的 .modal-x / .legacy-btn / .reg-hb-tab / .reg-hb-x。 */
.btn-util {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 13px; border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--app-line); background: rgba(15, 27, 51, 0.05); color: var(--app-text);
  transition: background .15s, border-color .15s, color .15s;
}
.btn-util.icon { width: 34px; padding: 0; font-size: 15px; }
.btn-util:hover { background: rgba(218, 106, 42, 0.12); border-color: var(--gpsl-orange); color: var(--gpsl-orange-deep); }
.btn-util.on-dark { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); color: #FFF; }
.btn-util.on-dark:hover { background: rgba(240, 133, 31, 0.30); border-color: var(--gpsl-orange-lite); color: #FFF; }

.modal-x {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; border-radius: 10px; padding: 0;
  border: 1px solid var(--app-line); background: rgba(15, 27, 51, 0.05); color: var(--app-text-muted);
  font-size: 14px; line-height: 1; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; z-index: 5;
  transition: background .15s, border-color .15s, color .15s;
}
.modal-x:hover { background: rgba(218, 106, 42, 0.12); border-color: var(--gpsl-orange); color: var(--gpsl-orange-deep); }
.modal-card.dark .modal-x { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.85); }
.modal-card.dark .modal-x:hover { background: rgba(240, 133, 31, 0.30); border-color: var(--gpsl-orange-lite); color: #FFF; }

.reset-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
.reset-set-row .score { font-family: 'Bebas Neue', sans-serif; font-size: 18px; }
.reset-set-row button {
  background: rgba(255, 23, 68, 0.10);
  border: 1px solid rgba(255, 23, 68, 0.4);
  color: #C62828;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}

.qr-display { text-align: center; }
.qr-display img {
  width: 220px;
  height: 220px;
  margin: 12px auto;
  display: block;
  background: #FFF;
  padding: 8px;
  border-radius: 12px;
}
.qr-display .verify-code {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  letter-spacing: 8px;
  color: var(--acc-score);
  margin: 8px 0;
  word-break: break-all;
}
.qr-display .verify-url { font-size: 11px; color: var(--text-muted); word-break: break-all; margin-top: 8px; }

#qrReader { width: 100%; max-width: 320px; margin: 12px auto; }
#qrReader video { border-radius: 10px; }

/* ══════════════════════════════════════════════════════════════
   Match History
   ══════════════════════════════════════════════════════════════ */
.history-card .card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 3px;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 12px;
}
.history-list-wrap {
  position: relative;
  background: var(--table-blue);
  border-radius: 12px;
  padding: 14px 12px;
  min-height: 240px;
}
/* History page is a clean text list — explicitly NO net line */
.history-list-wrap::before { display: none; }
.history-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.history-item {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--app-text);
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-family: 'Noto Sans TC', monospace;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 10px rgba(10, 27, 54, 0.18);
  transition: transform 0.15s, box-shadow 0.2s;
  width: 100%;
}
.history-item:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(10, 27, 54, 0.25); }
.history-loading, .history-empty { text-align: center; padding: 28px 12px; color: var(--text-muted); font-size: 13px; }
.history-empty.error { color: #FFD7DC; }
.history-card .history-toolbar { margin-top: 10px; display: flex; justify-content: center; }

.hd-point {
  padding: 10px 12px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--app-bg-soft);
}
.hd-head { font-size: 11px; letter-spacing: 1.5px; color: var(--app-text-muted); text-transform: uppercase; margin-bottom: 6px; }
.hd-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: var(--app-text); }
.hd-teams .hd-side { font-weight: 700; }
.hd-teams .hd-side.right { text-align: right; }
.hd-teams .hd-score { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--table-blue); letter-spacing: 1px; }
.hd-sets { display: flex; flex-wrap: wrap; gap: 5px; }
.hd-set { font-size: 11px; padding: 3px 7px; border-radius: 4px; background: #FFFFFF; border: 1px solid var(--app-line); font-variant-numeric: tabular-nums; }
.hd-set.win-a { border-left:  3px solid var(--table-blue); }
.hd-set.win-b { border-right: 3px solid #00B248; }

/* ══════════════════════════════════════════════════════════════
   Verify view
   ══════════════════════════════════════════════════════════════ */
.verify-view {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: var(--app-bg);
  overflow-y: auto;
  /* Reserve clearance for the persistent fixed .site-header (60 px) plus
     20 px of breathing room. Mobile gets the env-aware override below. */
  padding: calc(var(--header-h) + 20px) 16px 40px;
  z-index: 150;
}
.verify-view-inner { max-width: 500px; margin: 0 auto; }
.verify-view .verify-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.verify-view h1 { font-size: 18px; font-weight: 900; flex: 1; }
/* ── 統一的「返回」鍵：一律置於右上（靠近選單位置），外觀與 ⋮ 選單一致、較醒目 ── */
.back-btn {
  order: 9; margin-left: auto;                 /* 移到該列最右側 */
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--app-line);
  color: var(--app-text);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 2px 6px rgba(15, 27, 51, 0.10);
}
.back-btn:hover  { background: rgba(255, 255, 255, 0.94); }
.back-btn:active { transform: scale(0.96); }

.verify-search {
  background: #FFF;
  border-radius: 14px;
  padding: 16px;
  border: 1px solid var(--app-line);
  margin-bottom: 14px;
}
.verify-search .row { display: flex; gap: 8px; flex-wrap: wrap; }
.code-input {
  flex: 1 1 140px;
  background: var(--app-bg-soft);
  border: 1px solid var(--app-line);
  color: var(--app-text);
  border-radius: 8px;
  padding: 10px;
  font-size: 18px;
  text-align: center;
  letter-spacing: 6px;
  font-family: 'Bebas Neue', sans-serif;
  text-transform: uppercase;
}
.code-input:focus { outline: none; border-color: var(--table-blue); box-shadow: 0 0 6px rgba(28, 77, 117, 0.25); }

.verify-detail {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 16px;
  border: 1px solid var(--app-line);
  display: none;
}
.verify-detail.show { display: block; }
.verify-detail .vd-meta { font-size: 13px; color: var(--app-text-muted); margin-bottom: 12px; }
.verify-detail .vd-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--app-bg-soft);
  border-radius: 10px;
  margin-bottom: 12px;
}
.vd-teams .vs { color: var(--table-blue); font-family: 'Bebas Neue', sans-serif; font-size: 18px; text-align: center; }
.vd-teams .side { font-size: 13px; }
.vd-teams .side .team-name { font-weight: 900; color: var(--app-text); }
.vd-teams .side .player { font-size: 12px; color: var(--app-text-muted); }

.verify-sets-table { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.vd-set-row {
  display: grid;
  grid-template-columns: 60px 1fr 24px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
}
.vd-set-row .set-num { font-family: 'Bebas Neue', sans-serif; font-size: 14px; color: var(--app-text-muted); }
.vd-set-row .colon { text-align: center; color: var(--app-text-muted); }
.vd-set-row input {
  width: 100%;
  background: var(--app-bg-soft);
  border: 1px solid var(--app-line);
  color: var(--app-text);
  border-radius: 6px;
  padding: 6px;
  font-size: 16px;
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  -webkit-appearance: none;
  appearance: none;
}
.vd-set-row.conflict { border-color: var(--acc-lose); background: rgba(255, 23, 68, 0.08); }
.vd-set-row.conflict input { border-color: var(--acc-lose); background: #FFFFFF; color: #C62828; }
.verify-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-approve {
  background: linear-gradient(135deg, #00B248, #00E676);
  color: #052914;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(0, 200, 83, 0.30);
}
.btn-dispute {
  background: rgba(255, 23, 68, 0.10);
  color: #C62828;
  border: 1px solid var(--acc-lose);
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.btn-approve:disabled, .btn-dispute:disabled { opacity: 0.5; cursor: not-allowed; }
.verify-final-notice {
  display: none;
  margin-top: 14px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(0,178,72,0.10), rgba(0,229,255,0.10));
  border: 1px solid #00B248;
  border-radius: 12px;
  color: #1B5E20;
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
}
.verify-final-notice.show { display: block; }
.verify-final-notice.dispute { background: rgba(255, 23, 68, 0.08); border-color: var(--acc-lose); color: #B71C1C; }

/* ──────────── Narrow-viewport tuning ──────────── */
@media (max-width: 360px) and (orientation: portrait) {
  .big-score, input.big-score { font-size: 60px; width: 86px; min-width: 86px; }
  .btn-calc { width: 42px; height: 42px; font-size: 20px; }
  .tt-table { min-height: 260px; }
  .team-inputs .gpsl-input { font-size: 11px; padding: 5px 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   PART 2 · iOS-ONLY PATCHES  (scoped to body.ios-device — JS adds it
   only when /iPhone|iPad|iPod/.test(navigator.userAgent) matches).
   Android phones never receive these rules.
   ═══════════════════════════════════════════════════════════════ */

/* iOS safe-area integration — Dynamic Island / Notch / Home Indicator */
body.ios-device .site-header {
  padding-top: max(15px, env(safe-area-inset-top));
}
body.ios-device .bottom-nav {
  padding-bottom: max(15px, env(safe-area-inset-bottom));
}

/* iOS Standalone PWA (Add to Home Screen) — clamp the card so it doesn't
   stretch awkwardly when Safari chrome collapses. iPhone-shaped only. */
@media (display-mode: standalone) {
  body.ios-device .card-stage {
    max-height: 85vh;
    aspect-ratio: 9 / 16;
  }
}

/* ── iOS Fullscreen FALLBACK — natural-landscape default ──
   When the iPhone is already held in landscape we render at the true
   16:9 aspect — NO CSS rotate.  The watcher in script.js toggles
   `.ios-forced-landscape` (block below) when the user flips back to
   portrait, eliminating the double-rotation glitch from the video. */
/* ITEM 1 — aspect-ratio cage REMOVED so the card never collapses into a
   thin floating box on ultra-wide iPhones (19.5:9). Expands to 94 dvw
   × 88 dvh while keeping the exit icon safely inside Safari chrome. */
body.ios-device.ios-fullscreen-active .stack-card.ios-fullscreen-fallback {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: 94dvw !important;
  height: 88dvh !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: auto !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  padding: 24px !important;
  filter: none !important;
  opacity: 1 !important;
  z-index: 99999 !important;
  background: #1c4d75 !important;
  background-color: #1c4d75 !important;
  isolation: isolate;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

body.ios-fullscreen-active {
  overflow: hidden !important;
  background: #1c4d75 !important;
}

/* Hide every body sibling except the mainView shell + rotation toast */
body.ios-fullscreen-active > *:not(#mainView):not(#rotationToast) {
  visibility: hidden !important;
}
body.ios-fullscreen-active #mainView > *:not(#cardStage) {
  visibility: hidden !important;
}
body.ios-fullscreen-active #cardStage > *:not(.ios-fullscreen-fallback) {
  visibility: hidden !important;
}
/* Belt-and-braces: legacy chrome must stay gone */
body.ios-fullscreen-active .bg-grid,
body.ios-fullscreen-active .site-header,
body.ios-fullscreen-active .bottom-nav,
body.ios-fullscreen-active .verify-view,
body.ios-fullscreen-active .auth-view,
body.ios-fullscreen-active .profile-completion-view,
body.ios-fullscreen-active .admin-view,
body.ios-fullscreen-active .legacy-fs-overlay,
body.ios-fullscreen-active .modal-overlay { display: none !important; }

/* The native-fullscreen visibility rule must NOT eat our iOS fallback */
body.fullscreen-active .stack-card:not(.is-fullscreen):not(.ios-fullscreen-fallback) {
  visibility: hidden;
}

/* ── iOS Forced-Landscape — engaged ONLY when watcher detects portrait ──
   Width/height swap to dvh/dvw so the rotated card still hugs the visible
   Safari chrome with a safe ~9% buffer.  Aspect-ratio is released because
   the visual aspect after the 90° rotate is determined by the dv-units. */
body.ios-device.ios-fullscreen-active .stack-card.ios-fullscreen-fallback.ios-forced-landscape {
  width: 94dvh !important;
  height: 88dvw !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  transform-origin: center !important;
}

/* Rotation toast — body-root child, NOT inside the rotated card so it
   reads upright regardless of the card's 90° rotation. */
.rotation-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(15, 27, 51, 0.92);
  color: #FFFFFF;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  z-index: 100001;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  max-width: 92vw;
  text-align: center;
  transition: opacity 0.4s ease;
}
.rotation-toast.show {
  opacity: 1;
  animation: rotationToastFade 3s ease forwards;
}
@keyframes rotationToastFade {
  0%   { opacity: 0; transform: translate(-50%, -40%); }
  10%  { opacity: 1; transform: translate(-50%, -50%); }
  80%  { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -60%); }
}

/* ═══════════════════════════════════════════════════════════════
   PART 1 · DESKTOP & BROADCAST SCOREBOARD  —  @media (min-width: 1024px)
   ──────────────────────────────────────────────────────────────
   Android phones never trigger these rules (their viewport is < 1024 px).
   Tablets / desktops with viewport ≥ 1024 px get the enhanced layout.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* 1️⃣  Vertical Score Sandwich:  [ + ]  ▸  [ score ]  ▸  [ – ]
        DOM order is  minus → score → plus, so we use column-reverse
        to render plus on TOP without moving any HTML node. */
  .big-score-row {
    flex-direction: column-reverse;
    align-items: center;
    gap: 14px;
  }

  /* Larger circular controls so the column reads as a broadcast block */
  .big-score-row .btn-calc {
    width: 60px;
    height: 60px;
    font-size: 28px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  }

  /* 2️⃣  Stadium 3-column grid when in native fullscreen.
         [ Left field ] [ Net separator ] [ Right field ] */
  .stack-card.is-fullscreen .tt-table {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr;
    gap: 0;
    height: 100%;
    min-height: 0;
  }
  .stack-card.is-fullscreen .tt-half {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4vh;
    padding: 4vh 3vw;
  }
  /* Side B's DOM order is score then team — flip so the broadcast layout
     always shows TEAM on top, vertical SCORE SANDWICH below.            */
  .stack-card.is-fullscreen .tt-half-b {
    flex-direction: column-reverse;
  }
  /* Disable the per-half doubles centerline + outer-zone push in broadcast */
  .stack-card.is-fullscreen .tt-half::before { display: none; }
  .stack-card.is-fullscreen .tt-half-a,
  .stack-card.is-fullscreen .tt-half-b {
    padding-left: 3vw;
    padding-right: 3vw;
  }

  /* Center net column — explicit grid track */
  .stack-card.is-fullscreen .tt-net {
    width: 12px;
    height: auto;
    align-self: stretch;
  }

  /* 3️⃣  Widescreen vh scaling — the real broadcast magic */
  .stack-card.is-fullscreen .big-score,
  .stack-card.is-fullscreen input.big-score {
    font-size: 22vh !important;
    width: auto !important;
    min-width: 0 !important;
    line-height: 0.9 !important;
  }
  .stack-card.is-fullscreen .big-score-row {
    flex-direction: column-reverse;
    gap: 3vh;
  }
  .stack-card.is-fullscreen .btn-calc {
    width: 9vh !important;
    height: 9vh !important;
    font-size: 4.5vh !important;
  }
  .stack-card.is-fullscreen .team-inputs {
    width: 100%;
    max-width: 36vw;
  }
  .stack-card.is-fullscreen .team-inputs .gpsl-input {
    font-size: 3vh !important;
    padding: 1.6vh 2vh !important;
  }
  .stack-card.is-fullscreen .btn-swap {
    font-size: 2.6vh;
    padding: 1.4vh 1vh;
  }
  .stack-card.is-fullscreen .match-meta-bar,
  .stack-card.is-fullscreen .meta-value,
  .stack-card.is-fullscreen .match-status-text,
  .stack-card.is-fullscreen .set-chip,
  .stack-card.is-fullscreen .sets-summary {
    font-size: 2.5vh !important;
  }
  .stack-card.is-fullscreen .meta-value { font-size: 4vh !important; }
  .stack-card.is-fullscreen .btn-confirm,
  .stack-card.is-fullscreen .btn-dispute-confirm,
  .stack-card.is-fullscreen .btn-dispute-submit {
    font-size: 2.4vh !important;
    padding: 2vh !important;
  }
  .stack-card.is-fullscreen .point-selector { font-size: 2.4vh !important; }
  .stack-card.is-fullscreen .point-select   { font-size: 2.4vh !important; padding: 1.4vh 4vh 1.4vh 1.6vh !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ITEM 2 · ANDROID MOBILE — FULLSCREEN-EXCLUSIVE VERTICAL SCORES
   ──────────────────────────────────────────────────────────────
   Only fires when:
     • viewport ≤ 1023 px (mobile, never desktop)
     • body has `.fullscreen-active` (= NATIVE Fullscreen API engaged)
   iOS uses `.ios-fullscreen-active`, so this rule never reaches iOS
   and standard Android browsing remains 100 % untouched.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  body.fullscreen-active .big-score-row {
    flex-direction: column-reverse !important;
    align-items: center !important;
  }
  body.fullscreen-active .big-score-row button {
    margin: 10px 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ITEM 3 · DESKTOP FULLSCREEN — PUSH SCORES AWAY FROM THE NET
   ──────────────────────────────────────────────────────────────
   In the 3-column broadcast grid each half gets a generous inner
   padding on the net-facing edge so the team block + vertical
   score sandwich settle into the visual centre of their court half.
   Scoped strictly to ≥ 1024 px AND .stack-card.is-fullscreen.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .stack-card.is-fullscreen .tt-half-a { padding-right: 8dvw !important; }
  .stack-card.is-fullscreen .tt-half-b { padding-left:  8dvw !important; }
}

/* ════════════════════════════════════════════════════════════════
   ITEM 2 · iOS-ONLY NON-FULLSCREEN LANDSCAPE OVERFLOW FIX
   ────────────────────────────────────────────────────────────────
   Strict triple-class lock: body.ios-device AND :not(.ios-fullscreen-active)
   AND :not(.fullscreen-active).  Android & Desktop selectors never
   match, so their layouts stay 100% untouched.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) and (orientation: landscape) {
  body.ios-device:not(.ios-fullscreen-active):not(.fullscreen-active) .stack-card {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.ios-device:not(.ios-fullscreen-active):not(.fullscreen-active) .scoreboard-card,
  body.ios-device:not(.ios-fullscreen-active):not(.fullscreen-active) .stack-card {
    padding: 14px !important;
  }
  body.ios-device:not(.ios-fullscreen-active):not(.fullscreen-active) .big-score,
  body.ios-device:not(.ios-fullscreen-active):not(.fullscreen-active) input.big-score {
    font-size: 40px !important;
    width: 60px !important;
    min-width: 60px !important;
  }
  body.ios-device:not(.ios-fullscreen-active):not(.fullscreen-active) .btn-calc {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
  }
  body.ios-device:not(.ios-fullscreen-active):not(.fullscreen-active) .team-inputs .gpsl-input {
    font-size: 11px !important;
    padding: 5px 7px !important;
  }
  body.ios-device:not(.ios-fullscreen-active):not(.fullscreen-active) .point-select {
    font-size: 12px !important;
    padding: 7px 28px 7px 10px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   ITEM 3 · iOS FULLSCREEN — vertical score stack (+ on top, − on bottom)
   ────────────────────────────────────────────────────────────────
   Desktop already vertical-stacks via @media (min-width: 1024px),
   Android already vertical-stacks via body.fullscreen-active in
   @media (max-width: 1023px).  This block ADDS the same stacking
   strictly for iOS fullscreen — without touching the outer .tt-table
   flex-direction (kept row so the central net stays visible).
   ════════════════════════════════════════════════════════════════ */
body.ios-device.ios-fullscreen-active .big-score-row {
  flex-direction: column-reverse !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
}
body.ios-device.ios-fullscreen-active .big-score-row .btn-calc {
  margin: 10px 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   ITEM 3 · MOBILE-FULLSCREEN SINGLES MODE — net divider spacing
   ────────────────────────────────────────────────────────────────
   Strictly mobile (≤ 1023 px).  Doubles mode (body.doubles-mode)
   never matches → its quad-player distribution stays untouched.
   Both Android (.fullscreen-active) and iOS (.ios-fullscreen-active)
   get the same comfortable padding flanking the central net.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Portrait fullscreen — net is horizontal, push scores vertically away */
  body.android-device.fullscreen-active.singles-mode    .tt-half-a,
  body.ios-device.ios-fullscreen-active.singles-mode    .tt-half-a {
    padding-bottom: 6vh !important;
  }
  body.android-device.fullscreen-active.singles-mode    .tt-half-b,
  body.ios-device.ios-fullscreen-active.singles-mode    .tt-half-b {
    padding-top: 6vh !important;
  }
}
@media (max-width: 1023px) and (orientation: landscape) {
  /* Landscape fullscreen — net is vertical, push horizontally instead */
  body.android-device.fullscreen-active.singles-mode    .tt-half-a,
  body.ios-device.ios-fullscreen-active.singles-mode    .tt-half-a {
    padding-bottom: 0 !important;
    padding-right: 6vw !important;
  }
  body.android-device.fullscreen-active.singles-mode    .tt-half-b,
  body.ios-device.ios-fullscreen-active.singles-mode    .tt-half-b {
    padding-top: 0 !important;
    padding-left: 6vw !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   ITEM 3 · DESKTOP CARD-MODE NET DIVIDER PADDING
   ────────────────────────────────────────────────────────────────
   ≥ 1024 px AND NOT .is-fullscreen.  Adds breathing room around the
   vertical net so the Team A / Team B vertical score sandwiches
   settle into the visual centre of their half-courts.
   Does NOT change .tt-table flex-direction (stays row) and does NOT
   touch fullscreen desktop broadcast (handled elsewhere).
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .stack-card:not(.is-fullscreen) .tt-half-a {
    padding-right: 56px !important;
  }
  .stack-card:not(.is-fullscreen) .tt-half-b {
    padding-left: 56px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   NEW ITEM 4 · 4-QUADRANT COURT GRID & NATURAL VERTICAL FLOW
   ────────────────────────────────────────────────────────────────
   Radical pivot from the previous absolute-positioning stack which
   was suffocating short landscape viewports. New architecture:

     • The card body is a vertical flex column that SCROLLS
       (overflow-y:auto) so nothing ever collides on short screens.
     • The court is a fixed-height row split by the vertical net.
     • Each half is a vertical flex column whose CSS `order` forces
       team-inputs to the top (upper quadrants) and big-score-row
       to the bottom (lower quadrants) — bypassing the DOM-order
       quirk that put A and B upside-down before.
     • Inside the lower quadrants, the score row REVERTS to the
       original horizontal [−][0][+] layout.
     • All bottom controllers (.sets-summary, .match-meta-bar,
       .btn-confirm, .dispute-actions) are returned to natural
       document flow beneath the court — they flow + scroll cleanly.

   Strictly scoped to mobile fullscreens. Desktop and the outer
   `.tt-table` horizontal `flex-direction: row` are NOT touched.
   ════════════════════════════════════════════════════════════════ */

/* 1. Scrollable vertical container for the entire mobile-fullscreen card */
body.android-device.fullscreen-active #scoreboardCard,
body.ios-device.ios-fullscreen-active   .stack-card.ios-fullscreen-fallback {
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

/* 2. The court keeps horizontal split (vertical net intact) with a stable
      minimum height so the playing surface never collapses */
body.android-device.fullscreen-active .tt-table,
body.ios-device.ios-fullscreen-active   .tt-table {
  display: flex !important;
  flex-direction: row !important;
  min-height: 280px !important;
  width: 100% !important;
  position: relative !important;
  margin-bottom: 24px !important;
  flex-shrink: 0 !important;
}

/* 3. Each half-court is a structured vertical column */
body.android-device.fullscreen-active .tt-half,
body.ios-device.ios-fullscreen-active   .tt-half {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 100% !important;
  width: 50% !important;
}

/* 4. CSS `order` overrides the DOM source-order quirk between A and B,
      placing team-inputs in the UPPER two quadrants and big-score-row
      in the LOWER two quadrants — symmetrically for both halves. */
body.android-device.fullscreen-active .team-inputs,
body.ios-device.ios-fullscreen-active   .team-inputs {
  order: 1 !important;                  /* upper quadrants */
  width: 90% !important;
  margin: 0 auto !important;
}
body.android-device.fullscreen-active .big-score-row,
body.ios-device.ios-fullscreen-active   .big-score-row {
  order: 2 !important;                  /* lower quadrants */
  width: 100% !important;
  margin-top: auto !important;
}

/* 5. REVERT score row to the original horizontal [−][score][+] layout.
      Higher-specificity than the older Android `column-reverse` rule;
      both !important, this comes later → wins on cascade order. */
body.android-device.fullscreen-active .big-score-row,
body.ios-device.ios-fullscreen-active   .big-score-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}
body.android-device.fullscreen-active .big-score-row .btn-calc,
body.ios-device.ios-fullscreen-active   .big-score-row .btn-calc {
  margin: 0 !important;                 /* zero out the older vertical-stack margin: 10px 0 */
}

/* 6. Return all bottom controllers to natural document flow under the court.
      No more absolute layers — they scroll naturally with the card. */
body.android-device.fullscreen-active .sets-summary,
body.ios-device.ios-fullscreen-active   .sets-summary,
body.android-device.fullscreen-active .match-meta-bar,
body.ios-device.ios-fullscreen-active   .match-meta-bar,
body.android-device.fullscreen-active .btn-confirm,
body.ios-device.ios-fullscreen-active   .btn-confirm,
body.android-device.fullscreen-active .dispute-actions,
body.ios-device.ios-fullscreen-active   .dispute-actions {
  position: static !important;
  transform: none !important;
  left: auto !important;
  bottom: auto !important;
  width: 85% !important;
  max-width: 480px !important;
  margin: 10px auto !important;
  z-index: auto !important;
  flex-shrink: 0 !important;
}

/* Confirm button padding tuned for clean landscape pipeline */
body.android-device.fullscreen-active .btn-confirm,
body.ios-device.ios-fullscreen-active   .btn-confirm {
  padding: 12px !important;
}

/* ════════════════════════════════════════════════════════════════
   PRODUCTION PATCH · iOS SAFARI BUG REFIX  (ISOLATED TO iOS ONLY)
   ────────────────────────────────────────────────────────────────
   This block appears AFTER the 4-quadrant ITEM 4 rules so it wins
   on cascade order at equal specificity (both !important). Android
   and Desktop selectors are NOT redefined here, so their layouts
   stay byte-for-byte identical to the verified production state.

   Why bypass `order` + `margin: auto`?  iOS WebKit collapses
   `height: 100%` inside min-height flex rows AND mis-measures
   `order` boxes when combined with `margin: auto`. We sidestep
   both with `align-items: stretch` + `flex: 1 1 0%` + a native
   `flex-direction: column-reverse` on the structurally inverted
   Team-B half.
   ════════════════════════════════════════════════════════════════ */

/* 1. Force iOS Safari to stretch both halves to identical heights */
body.ios-device.ios-fullscreen-active .tt-table {
  align-items: stretch !important;
}

body.ios-device.ios-fullscreen-active .tt-half {
  flex: 1 1 0% !important;       /* replaces width:50%/height:100% bug-prone pair */
  height: auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2. Fix Team-B DOM inversion STRUCTURALLY (no buggy `order` property) */
body.ios-device.ios-fullscreen-active .tt-half-a {
  flex-direction: column !important;          /* Team A: name top, score bottom */
}
body.ios-device.ios-fullscreen-active .tt-half-b {
  flex-direction: column-reverse !important;  /* Team B: DOM-reverse → visually identical to A */
}

/* 3. Strip the previously-set `order` and stray margins */
body.ios-device.ios-fullscreen-active .team-inputs,
body.ios-device.ios-fullscreen-active .big-score-row {
  order: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 95% !important;
}

/* 4. Stabilise the horizontal scoring track inside each lower quadrant */
body.ios-device.ios-fullscreen-active .big-score-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 12px 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   TEST 2 · CLAUDE'S "GRID TRACK-DISTRIBUTION" METHOD  (Android + iOS)
   ────────────────────────────────────────────────────────────────
   PROPOSAL — make the height of `.team-inputs` IRRELEVANT instead of
   forcing it to match Doubles.

   Replace each `.tt-half`'s flex `space-between` with a 5-track CSS
   GRID where:
     ┌──────────┐   ◄── grid-row 1   ░ 1fr   (elastic top spacer)
     │ team-inp │   ◄── grid-row 2   ░ auto  (whatever Singles/Doubles needs)
     │  ░ ░ ░   │   ◄── grid-row 3   ░ 1.4fr (elastic middle spacer)
     │ scoreRow │   ◄── grid-row 4   ░ auto  (horizontal [−][0][+] cluster)
     └──────────┘   ◄── grid-row 5   ░ 1fr   (elastic bottom spacer)

   The two content rows live at fixed coordinates regardless of DOM
   order, so Team-B's reversed source doesn't matter and Singles vs
   Doubles height differences are absorbed by the three `fr` spacers
   distributing leftover space proportionally.

   Targets BOTH Android native-fullscreen and iOS simulated-fullscreen.
   ════════════════════════════════════════════════════════════════ */

/* 1. Convert each half-court to a 5-row grid */
body.android-device.fullscreen-active .tt-half,
body.ios-device.ios-fullscreen-active   .tt-half {
  display: grid !important;
  grid-template-rows: 1fr auto 1.4fr auto 1fr !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  padding: 0 !important;
  gap: 0 !important;
  /* Null any prior flex setup so the grid engine is the sole authority */
  flex-direction: initial !important;
}

/* 2. Pin team names to grid-row 2 — same coordinate for BOTH halves,
      so Team-B's DOM order (where score-row appears first) is
      automatically corrected by grid placement. */
body.android-device.fullscreen-active .tt-half .team-inputs,
body.ios-device.ios-fullscreen-active   .tt-half .team-inputs {
  grid-row: 2 !important;
  grid-column: 1 !important;
  width: 95% !important;
  margin: 0 !important;
  order: 0 !important;
  align-self: center !important;
}

/* 3. Pin the horizontal [−] [score] [+] cluster to grid-row 4 — also
      same coordinate for both halves. */
body.android-device.fullscreen-active .tt-half .big-score-row,
body.ios-device.ios-fullscreen-active   .tt-half .big-score-row {
  grid-row: 4 !important;
  grid-column: 1 !important;
  width: 100% !important;
  margin: 0 !important;
  order: 0 !important;
  align-self: center !important;
  /* keep the original horizontal score track intact */
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
}

/* 4. Nullify any prior column / column-reverse so the grid engine
      doesn't have to fight with leftover flex code paths. */
body.android-device.fullscreen-active .tt-half-a,
body.android-device.fullscreen-active .tt-half-b,
body.ios-device.ios-fullscreen-active   .tt-half-a,
body.ios-device.ios-fullscreen-active   .tt-half-b {
  flex-direction: initial !important;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE PWA NOTCH & STATUS BAR SAFE AREA (VERIFY VIEW)
   ────────────────────────────────────────────────────────────────
   Scoped to viewports ≤ 1023 px so desktop layouts (≥ 1024 px) are
   100% unaffected.  Uses `env(safe-area-inset-top)` to detect the
   iPhone notch / Dynamic Island when the app is run from Add-to-
   Home-Screen, with a 65 px fallback for older Androids whose
   browsers don't expose the env() variable.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .verify-view {
    /* Persistent header (60 px) + notch + 10 px breathing.
       max() guarantees a 100 px floor on Androids whose browser
       returns 0 for env(safe-area-inset-top). */
    padding-top: max(calc(env(safe-area-inset-top) + var(--header-h) + 10px), 100px) !important;
  }

  .verify-header {
    margin-top: 10px !important;   /* Extra visual breathing room below the notch */
  }
}

/* ════════════════════════════════════════════════════════════════
   AUTH VIEW  (login / register / guest / legacy-member migration)
   ----------------------------------------------------------------
   • Full-screen overlay, mirrors .verify-view conventions.
   • z-index 150 keeps it BELOW the persistent .site-header (999) so
     the clickable brand → goToHome() stays interactive (constraint #3).
   • NO use of CSS `order` or flex auto-margins anywhere (constraint #4).
   • Desktop (>=1024px) styling is additive only — no existing desktop
     rule is touched (constraint #1).
   ════════════════════════════════════════════════════════════════ */
.auth-view {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: var(--app-bg);
  overflow-y: auto;
  /* Header clearance on desktop / non-notched screens. Mobile gets the
     env()-aware override in the @media block below. */
  padding: calc(var(--header-h) + 20px) 16px 48px;
  z-index: 150;
}
.auth-view-inner {
  max-width: 380px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-hero { text-align: center; margin-bottom: 4px; }
.auth-title { font-size: 22px; font-weight: 900; color: var(--app-text); letter-spacing: 0.5px; }
.auth-sub   { font-size: 12.5px; color: var(--app-text-muted); margin-top: 6px; line-height: 1.5; }

/* ── Buttons ── */
.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--app-line);
  background: #FFFFFF;
  color: var(--app-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  box-shadow: 0 1px 2px rgba(15, 27, 51, 0.05);
}
.auth-btn:hover  { box-shadow: 0 3px 10px rgba(15, 27, 51, 0.1); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-google .g-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: conic-gradient(from -45deg, #EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0 100%);
  color: #FFF; font-weight: 900; font-size: 12px;
}
.auth-primary {
  background: linear-gradient(135deg, #1c4d75, #00C8FF);
  color: #FFF; border: none;
}
.auth-verify-legacy { background: var(--table-blue); color: #FFF; border: none; }

/* ── Inputs ── */
.auth-email-block { display: flex; flex-direction: column; gap: 10px; }
.auth-input {
  width: 100%;
  background: var(--app-bg-soft);
  border: 1px solid var(--app-line);
  color: var(--app-text);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;            /* >=16px avoids iOS zoom; 15 acceptable w/ user-scalable=no */
  font-family: inherit;
}
.auth-input::placeholder { color: var(--app-text-muted); }
.auth-input:focus { outline: none; border-color: var(--table-blue); box-shadow: 0 0 6px rgba(28, 77, 117, 0.22); }
.auth-select { appearance: none; -webkit-appearance: none; background-image: none; }

/* ── Helper links / messages ── */
.auth-links-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.link-btn {
  background: none; border: none; padding: 4px 2px;
  color: var(--table-blue); font-family: inherit; font-size: 12.5px;
  cursor: pointer; text-decoration: none;
}
.link-btn:hover { text-decoration: underline; }
.guest-link { align-self: center; color: var(--app-text-muted); font-size: 13px; padding: 6px; }

.auth-msg { font-size: 12.5px; line-height: 1.5; min-height: 0; }
.auth-msg.error   { color: #C62828; }
.auth-msg.success { color: #1B5E20; }
.auth-msg.info    { color: var(--app-text-muted); }
/* 醒目提示框（橘色）— 用來提示「請先建立帳號」，刻意與紅色錯誤字區隔 */
.auth-msg.notice {
  color: #B85A24; background: rgba(240, 133, 31, 0.12);
  border: 1px solid rgba(240, 133, 31, 0.5); border-radius: 8px;
  padding: 10px 12px; font-weight: 700; font-size: 13.5px; line-height: 1.5;
}

/* ── OR divider ── */
.auth-or {
  display: flex; align-items: center; gap: 12px;
  color: var(--app-text-muted); font-size: 12px; letter-spacing: 2px;
  margin: 4px 0;
}
.auth-or::before, .auth-or::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--app-line);
}

/* ── Legacy-member toggle ── */
.legacy-toggle {
  display: flex; align-items: center; gap: 10px;
  background: #FFFFFF; border: 1px solid var(--app-line);
  border-radius: 12px; padding: 12px 14px; cursor: pointer;
  font-size: 13px; color: var(--app-text); font-weight: 700;
}
.legacy-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.legacy-toggle-box {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px;
  border: 2px solid var(--app-line); background: var(--app-bg-soft);
  position: relative; transition: background 0.15s ease, border-color 0.15s ease;
}
.legacy-toggle input:checked + .legacy-toggle-box {
  background: var(--table-blue); border-color: var(--table-blue);
}
.legacy-toggle input:checked + .legacy-toggle-box::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid #FFF; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.legacy-toggle input:focus-visible + .legacy-toggle-box {
  box-shadow: 0 0 0 3px rgba(28, 77, 117, 0.25);
}
.legacy-toggle-text { line-height: 1.4; }

/* ── Legacy sub-form (slide-expand, NO order / NO auto-margins) ── */
.legacy-form {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease;
}
/* Raised cap + visible overflow so the in-flow team-combobox panel is never
   clipped by the slide-expand container. */
.legacy-form.open { max-height: 1600px; overflow: visible; opacity: 1; }
.legacy-form-inner {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--app-bg-soft);
  border: 1px solid var(--app-line);
  border-radius: 12px; padding: 14px; margin-top: 4px;
}
.legacy-hint { font-size: 12px; color: var(--app-text-muted); line-height: 1.5; }
.legacy-notice { font-size: 12.5px; line-height: 1.55; }
.legacy-notice.success { color: #1B5E20; background: rgba(27,94,32,0.08); border-radius: 8px; padding: 10px; }
.legacy-notice.error   { color: #C62828; background: rgba(198,40,40,0.08); border-radius: 8px; padding: 10px; }

/* ── Profile / linking panel rows ── */
.profile-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--app-line); font-size: 13px; }
.profile-row:last-child { border-bottom: none; }
.pr-k { color: var(--app-text-muted); white-space: nowrap; }
.pr-v { color: var(--app-text); font-weight: 700; text-align: right; word-break: break-all; }
.pr-edit { flex: 1 1 auto; min-width: 0; max-width: 62%; margin: 0; padding: 6px 10px; font-size: 13px; text-align: right; }
.prof-link-box { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.prof-link-box .auth-btn { margin-top: 0; width: auto; flex: 1 1 auto; }
/* 我的帳號 · 我的隊伍/換領隊 */
.prof-captain-box { margin: 6px 0 4px; }
.prof-cap-title { font-size: 12px; font-weight: 800; color: var(--app-text-muted); margin: 8px 0 4px; }
.prof-cap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--app-line); }
.prof-cap-row:last-child { border-bottom: none; }
.prof-cap-info { min-width: 0; }
.prof-cap-team { font-size: 13px; font-weight: 700; }
.prof-cap-cap { font-size: 11px; color: var(--app-text-muted); }
.prof-cap-apply { margin-top: 0 !important; width: auto !important; font-size: 12px; padding: 6px 12px; }
.prof-cap-pending { font-size: 11px; font-weight: 700; color: var(--gpsl-orange-deep, #B85A24); }

/* ── Password preview (eye toggle) ── */
.pw-wrap { position: relative; display: flex; }
.pw-wrap .auth-input { flex: 1 1 auto; padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: none; border: none; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 0; border-radius: 8px;
  color: var(--app-text-muted);
}
.pw-toggle:hover { background: var(--app-bg-soft); }

/* ════════════════════════════════════════════════════════════════
   PROFILE COMPLETION VIEW  (mandatory first-login gate)
   Mirrors .auth-view; sits ABOVE .auth-view (z 200) but BELOW the
   persistent .site-header (999) so logout / brand stay reachable.
   ════════════════════════════════════════════════════════════════ */
.profile-completion-view {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: var(--app-bg);
  overflow-y: auto;
  padding: calc(var(--header-h) + 20px) 16px 48px;
  z-index: 200;
}
.pc-inner {
  max-width: 380px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── GPSL-ID reveal badge inside the success modal ── */
.gpsl-id-badge {
  margin: 12px 0;
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px;
  letter-spacing: 3px;
  color: var(--table-blue);
  background: var(--app-bg-soft);
  border: 1px dashed var(--table-blue);
  border-radius: 10px;
  padding: 12px 10px;
}

/* ════════ Mobile notch safety (constraint #2) ════════ */
@media (max-width: 1023px) {
  .auth-view,
  .profile-completion-view,
  .admin-view {
    /* Hardware-notch clearance on the auth + completion + admin containers. */
    padding-top: max(env(safe-area-inset-top), 65px) !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   ADMIN CONSOLE — Phase A (entry gate + back-office skeleton)
   ════════════════════════════════════════════════════════════════ */
/* Back-office overlay — mirrors .verify-view conventions. */
.admin-view {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: var(--app-bg);
  overflow-y: auto;
  padding: calc(var(--header-h) + 20px) 16px 40px;
  z-index: 150;
}
.admin-view-inner { max-width: 500px; margin: 0 auto; }
.admin-view .verify-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.admin-view h1 { font-size: 18px; font-weight: 900; flex: 1; }

.admin-section {
  background: #FFFFFF;
  border: 1px solid var(--app-line);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.admin-section-title { font-size: 15px; font-weight: 900; color: var(--app-text); margin-bottom: 8px; padding-left: 9px; border-left: 3px solid var(--gpsl-orange); line-height: 1.15; }
.admin-section-note { font-size: 12.5px; line-height: 1.6; color: var(--app-text-muted); }
.admin-phase-tag {
  display: inline-block; margin-top: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--table-blue);
  background: rgba(28, 77, 117, 0.08);
  border-radius: 999px; padding: 3px 10px;
}
.admin-foot-note { font-size: 11px; color: var(--app-text-muted); text-align: center; margin-top: 6px; }

/* ── Collapsible sections (accordion) + desktop/tablet web layout ── */
.admin-sections { display: block; }
.admin-acc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: none; border: 0; padding: 0; margin: 0;
  font-family: inherit; text-align: left; cursor: pointer; color: var(--app-text);
}
.admin-acc-head .admin-section-title { margin-bottom: 0; }
.acc-chevron { font-size: 13px; color: var(--app-text-muted); transition: transform 0.2s ease; flex: 0 0 auto; }
.admin-section.collapsed .acc-chevron { transform: rotate(-90deg); }
.admin-acc-body { margin-top: 14px; }
.admin-section.collapsed .admin-acc-body { display: none; }
.admin-acc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }

/* Tablet + desktop: a real web layout — wider canvas, two-column grid of
   sections (history spans full width), instead of one narrow centred strip. */
@media (min-width: 768px) {
  .admin-view-inner { max-width: 1080px; }
  .admin-sections {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px; align-items: start;
  }
  .admin-sections > .admin-section { margin-bottom: 0; }
  .admin-section.span-2 { grid-column: 1 / -1; }
}

/* Installed-PWA edge safety — keep the ⋮ menu + GPSL logo (and bottom
   controls) clear of the notch / Dynamic Island / home-indicator on BOTH
   iOS and Android once the app is added to the home screen. */
@media (display-mode: standalone) {
  .site-header {
    height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
  }
  .bottom-nav { padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
}

/* Step-up gate modal bits */
.ag-step-label { font-size: 12px; font-weight: 700; color: var(--app-text); margin-bottom: 8px; }
#adminGateModal .auth-btn { margin-top: 4px; }
.ag-hint { font-size: 12px; color: var(--app-text-muted); line-height: 1.55; margin-bottom: 10px; }
.ag-qr { text-align: center; margin: 6px 0; }
.ag-qr img { width: 168px; height: 168px; background: #FFF; border: 1px solid var(--app-line); border-radius: 10px; padding: 6px; }
.ag-secret { font-size: 12px; color: var(--app-text-muted); text-align: center; margin-top: 6px; word-break: break-all; }
.ag-secret code { color: var(--app-text); font-weight: 700; letter-spacing: 1px; }

/* Owner-only passcode control inside the profile panel */
.owner-only-block { margin-top: 14px; }

/* ════════════════════════════════════════════════════════════════
   SCOREBOARD NAME PICKER (teams + players dropdown)
   ════════════════════════════════════════════════════════════════ */
.gpsl-input.picker-input { cursor: pointer; }
#npSearch { margin-bottom: 4px; }
.np-list {
  max-height: 46vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; margin: 10px 0;
}
.np-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left;
  background: var(--app-bg-soft); border: 1px solid var(--app-line);
  border-radius: 8px; padding: 10px 12px;
  font-size: 14px; font-family: inherit; color: var(--app-text); cursor: pointer;
}
.np-opt:hover { border-color: var(--table-blue); }
.np-name { font-weight: 700; }
.np-pin {
  font-style: normal; font-size: 11px; color: #FFF;
  background: var(--table-blue); border-radius: 999px; padding: 1px 8px; margin-left: 6px;
}
.np-sub { font-size: 11px; color: var(--app-text-muted); white-space: nowrap; }
.np-empty { padding: 16px 8px; text-align: center; color: var(--app-text-muted); font-size: 13px; }
/* Team-picker filter chips (區域 / 聯盟) */
.np-filters { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; }
.np-filter-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.np-filter-label { font-size: 11px; color: var(--app-text-muted); width: 34px; flex: 0 0 auto; }
.np-filter {
  background: var(--app-bg-soft); border: 1px solid var(--app-line); color: var(--app-text-muted);
  border-radius: 999px; padding: 4px 10px; font-size: 12px; font-family: inherit; cursor: pointer;
}
.np-filter.is-active { background: var(--gpsl-orange-grad); border-color: var(--gpsl-orange); color: #FFF; }
.np-filter:not(.is-active):hover { border-color: var(--gpsl-orange); color: var(--gpsl-orange-deep); }

/* ════════════════════════════════════════════════════════════════
   ADMIN CONSOLE — Phase B (user management list)
   ════════════════════════════════════════════════════════════════ */
.admin-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.admin-mini-btn {
  background: var(--app-bg-soft); border: 1px solid var(--app-line); color: var(--app-text);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; font-family: inherit;
  cursor: pointer; white-space: nowrap;
}
.admin-mini-btn:hover { border-color: var(--table-blue); }
.admin-mini-btn.danger { color: #C62828; border-color: rgba(198, 40, 40, 0.4); }
.admin-mini-btn.warn   { color: #E65100; border-color: rgba(230, 81, 0, 0.45); }
.admin-loading { text-align: center; color: var(--app-text-muted); font-size: 13px; padding: 16px 8px; }
.admin-user-list { display: flex; flex-direction: column; gap: 8px; }
.admin-user-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  background: var(--app-bg-soft); border: 1px solid var(--app-line);
  border-radius: 10px; padding: 10px 12px;
}
.au-main { min-width: 0; flex: 1 1 auto; }
.au-name { font-size: 14px; font-weight: 700; color: var(--app-text); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.au-self { font-style: normal; font-size: 11px; color: var(--table-blue); }
.au-sub  { font-size: 11px; color: var(--app-text-muted); margin-top: 3px; word-break: break-all; }

/* User-management row — tiered identity (primary name+ID › role+nickname › fine print) */
.au-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.au-realname { font-size: 16px; font-weight: 900; color: var(--app-text); }
.au-unbound  { font-size: 15px; font-weight: 900; color: #C62828; }
.au-id {
  font-size: 13px; font-weight: 800; color: var(--table-blue);
  background: rgba(28, 77, 117, 0.10); border: 1px solid rgba(28, 77, 117, 0.22);
  border-radius: 6px; padding: 0 7px; letter-spacing: 0.3px; white-space: nowrap;
}
.au-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.au-nick { font-size: 12px; font-weight: 600; color: var(--app-text); opacity: 0.85; }
.au-fine { font-size: 11px; color: var(--app-text-muted); margin-top: 4px; word-break: break-all; }
.au-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; align-items: flex-end; }
.au-noact { color: var(--app-text-muted); font-size: 12px; }
.role-badge { font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 8px; letter-spacing: 0.5px; }
.role-super  { background: #17171A; color: #E7C66B; border: 1px solid #C9A64A; }   /* 曜石黑金：超級 Owner，不可撼動 */
.role-owner  { background: #6A2C91; color: #FFF; }   /* 深紫：一般 Owner */
.role-admin  { background: #8A4B3B; color: #FFF; }   /* 磨過的紅磚 */
.role-player { background: var(--app-line); color: var(--app-text); }
.role-guest  { background: var(--app-line); color: var(--app-text-muted); }
.cap-badge { font-size: 10px; font-weight: 700; color: #FFF; background: #00897B; border-radius: 999px; padding: 1px 8px; }
.ro-badge  { font-size: 10px; font-weight: 700; color: #FFF; background: #0E8F86; border-radius: 999px; padding: 1px 8px; }      /* 青綠 */
.ro-plus-badge { font-size: 10px; font-weight: 800; color: #FFF; background: #B8901C; border-radius: 999px; padding: 1px 8px; }  /* 金 */

/* ── 權限管理／身份管理：點開後的彩色清單（彈窗） ── */
.pm-card { max-width: 420px; }
.pm-sub { font-size: 12px; color: var(--app-text-muted); margin: 2px 0 12px; }
.pm-list { display: flex; flex-direction: column; gap: 8px; }
.pm-btn {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  font-size: 14px; font-weight: 700; color: #FFF; border: none; border-radius: 10px;
  padding: 11px 13px; cursor: pointer; font-family: inherit;
}
.pm-btn:hover { filter: brightness(1.06); }
.pm-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.pm-btn .pm-oo { margin-left: auto; font-size: 11px; font-weight: 500; opacity: .9; }
.pm-owner { background: #6A2C91; }
.pm-admin { background: #8A4B3B; }
.pm-ro    { background: #0E8F86; }
.pm-plus  { background: #B8901C; }
.pm-util  { background: #5F5E5A; }
.pm-mfa   { background: #1E6FB0; }
.pm-danger{ background: #C62828; }
.pm-super { background: #17171A; color: #E7C66B; border: 1px solid #C9A64A; }   /* 曜石黑金 */
.pm-ownerbox { border: 2px solid #C79A2E; background: rgba(199,154,46,.12); border-radius: 12px; padding: 10px; }
.pm-ownerbox-lbl { font-size: 11px; font-weight: 700; color: #8a6c10; margin: 0 0 8px; display: flex; align-items: center; gap: 5px; }
.pm-sep { border-top: 1px dashed var(--app-line); margin: 12px 0 8px; padding-top: 4px; font-size: 11px; color: var(--app-text-muted); }
.pm-hint { font-size: 11px; color: var(--app-text-muted); margin: -3px 2px 2px 4px; }
.admin-mini-btn.gp { color: #8a6c10; border-color: rgba(184,144,28,.55); }
.admin-mini-btn.gp:hover { background: rgba(184,144,28,.10); border-color: #B8901C; color: #8a6c10; }

/* 審核台：帳號刪除複核（醒目紅區）+ 指定接手清單 */
.rv-danger-block { border: 2px solid #C62828; background: rgba(198,40,40,.07); border-radius: 12px; padding: 10px 12px; margin: 10px 0 12px; }
.rv-danger-head { font-size: 14px; font-weight: 800; color: #C62828; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.rv-danger-count { font-size: 12px; font-weight: 800; color: #fff; background: #C62828; border-radius: 999px; padding: 1px 9px; }
.rv-card-danger { border-color: rgba(198,40,40,.4) !important; }
.dg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--app-line); }
.dg-name { font-size: 14px; font-weight: 700; color: var(--app-text); }
.dg-id { font-size: 12px; color: var(--app-text-muted); }

/* Block 1-A: 賽季與名冊 */
.sr-team-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  background: var(--app-bg-soft); border: 1px solid var(--app-line);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.sr-team-row.is-inactive { opacity: 0.55; }
/* 名冊：季別下拉、繳費清單、依隊伍分組卡 */
.sr-season-sel { width: auto; min-width: 150px; margin: 0; }
.sr-count-bar { font-size: 12px; color: var(--app-text-muted); background: var(--app-bg-soft); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }
.sr-count-bar b { color: var(--app-text); }
.sr-p-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--app-line); }
.sr-p-row:last-child { border-bottom: none; }
.sr-p-row .au-name { font-size: 14px; color: var(--app-text); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sr-p-row .au-sub { font-size: 11px; color: var(--app-text-muted); margin-top: 2px; }
.sr-team-card { border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-bg-card, var(--app-bg-soft)); margin-bottom: 10px; overflow: hidden; }
.sr-team-card.is-inactive { opacity: 0.6; }
.sr-team-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--app-bg-soft); }
.sr-team-players { padding: 2px 12px 6px; }
.sr-empty-line { font-size: 12px; color: var(--app-text-muted); padding: 8px 4px; }
.sr-contact-sub { font-size: 11px; color: var(--app-text); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.sr-ci { white-space: nowrap; }
.sr-ci-k { color: var(--table-blue-tint); font-weight: 700; }
/* 狀態標籤：淺色半透明底 + 醒目同色邊框（綠=已繳 / 紅=未繳） */
.paid-badge   { font-size: 10px; font-weight: 800; color: #1B5E20; background: rgba(46,125,50,0.12);  border: 1px solid rgba(46,125,50,0.55);  border-radius: 999px; padding: 1px 8px; }
.unpaid-badge { font-size: 10px; font-weight: 800; color: #C62828; background: rgba(198,40,40,0.12); border: 1px solid rgba(198,40,40,0.55); border-radius: 999px; padding: 1px 8px; }
/* 名冊：逐列可點多選（框起來）＋ 獨立批次鍵 */
.sr-p-row[data-psid] { cursor: pointer; border: 1.5px solid transparent; border-radius: 10px; transition: background .12s, border-color .12s; }
.sr-p-row[data-psid]:hover { background: rgba(218,106,42,0.06); }
.sr-p-row.is-sel { background: rgba(28,77,117,0.08); border-color: rgba(28,77,117,0.55); }
.sr-batch.to-paid   { color: #1B5E20; background: rgba(46,125,50,0.12);  border-color: rgba(46,125,50,0.55); font-weight: 800; }
.sr-batch.to-unpaid { color: #C62828; background: rgba(198,40,40,0.12); border-color: rgba(198,40,40,0.55); font-weight: 800; }
.sr-batch:disabled  { opacity: .45; }
.tr-addrow { display: flex; gap: 8px; margin-bottom: 8px; }
.tr-addrow .auth-input { flex: 1 1 auto; }
.tr-add-results { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tr-list-label { font-size: 12px; font-weight: 700; color: var(--app-text-muted); margin: 6px 0; }
.tr-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 8px 4px; border-bottom: 1px solid var(--app-line);
}
.tr-row:last-child { border-bottom: none; }
.tr-row.is-disabled { opacity: 0.6; }
.tr-main { min-width: 0; flex: 1 1 auto; }
.tr-name { font-size: 14px; color: var(--app-text); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tr-sub { font-size: 11px; color: var(--app-text-muted); margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; word-break: break-word; }
.tr-noacct { color: #C62828; font-weight: 600; }
.off-badge { font-size: 10px; font-weight: 800; color: #616161; background: rgba(158,158,158,0.16); border: 1px solid rgba(158,158,158,0.65); border-radius: 999px; padding: 1px 8px; }
.sr-toolbar { margin-bottom: 12px; }
.sr-toolbar .auth-input { margin-bottom: 8px; }
.um-toolbar { margin-bottom: 12px; }
.um-toolbar .auth-input { margin-bottom: 8px; }

/* Stage 2 · 4a — 賽程安排 */
.fx-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  background: var(--app-bg-soft); border: 1px solid var(--app-line);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.fx-row.fx-cancelled { opacity: 0.55; }
.fx-main { min-width: 0; flex: 1 1 auto; }
.fx-teams { font-size: 14px; font-weight: 800; color: var(--app-text); }
.fx-vs { font-size: 11px; font-weight: 700; color: var(--app-text-muted); margin: 0 4px; }
.fx-sub { font-size: 11px; color: var(--app-text-muted); margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.fx-status-badge { font-size: 10px; font-weight: 700; color: #FFF; border-radius: 999px; padding: 1px 8px; }
.fx-badge-scheduled   { background: #1c4d75; }
.fx-badge-in_progress { background: #E65100; }
.fx-badge-completed   { background: #2E7D32; }
.fx-badge-cancelled   { background: #9E9E9E; }
.fx-toolbar { margin-bottom: 12px; }
.fx-toolbar-row { display: flex; gap: 8px; margin-bottom: 8px; }
.fx-toolbar-row #fxSeasonSel { flex: 0 0 auto; width: auto; min-width: 110px; }
.fx-toolbar-row #fxSearch { flex: 1 1 auto; }
.fx-count { font-size: 11px; color: var(--app-text-muted); margin-bottom: 6px; }
.fx-day { margin-bottom: 12px; }
.fx-day-head {
  font-size: 12px; font-weight: 800; color: var(--app-text);
  background: var(--app-bg-soft); border: 1px solid var(--app-line);
  border-radius: 8px; padding: 5px 10px; margin-bottom: 6px;
  position: sticky; top: 0;
}
.fx-no {
  font-size: 10px; font-weight: 800; color: var(--table-blue);
  background: rgba(28, 77, 117, 0.10); border-radius: 6px; padding: 1px 6px; margin-right: 4px;
}
.fx-score { font-size: 14px; font-weight: 900; color: var(--app-text-muted); margin-left: 6px; }
.fx-score b { color: var(--app-text); font-weight: 900; }
.fx-score b.fx-win { color: #2E7D32; }
.fx-detail { margin-top: 6px; }
.fx-points { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.fx-pt { font-size: 11px; color: var(--app-text-muted); background: var(--app-bg-soft); border: 1px solid var(--app-line); border-radius: 6px; padding: 2px 7px; }
.fx-pt b { color: var(--app-text); }

/* Stage 2 · 4b — scoreboard fixture bar + picker */
/* 賽程列＝自製「選擇框」(對齊 POINT 下拉風格)＋📷；右側留 48px 清開全螢幕鈕，過長截斷不換行 */
.fixture-bar { display: flex; align-items: flex-start; gap: 8px; margin: 2px 96px 8px 0; }   /* 右側 96px：清開右上角 📷＋⛶ 一對 */
.fixture-select { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background-color: var(--card-deep); color: var(--text-main); border: 1px solid var(--border-soft); border-radius: 8px; padding: 5px 30px 6px 12px; font-family: inherit; text-align: left; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2300E5FF' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
.fixture-select:hover { border-color: var(--table-blue, #2a6); }
.fixture-select.is-empty { justify-content: center; min-height: 34px; }
.fx-sel-teams { max-width: 100%; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; font-size: 13px; font-weight: 800; line-height: 1.3; }   /* 放不下就折行(優先在 vs 空格斷、隊名不切半)，保證兩隊都看得見 */
.fx-sel-date { font-size: 10px; font-weight: 600; color: var(--text-muted); line-height: 1.2; }
.fixture-select.is-empty .fx-sel-teams { font-weight: 600; color: var(--text-muted); }
.fxbar-on { font-size: 12px; font-weight: 700; color: var(--text-main); }
.fxbar-empty { font-size: 12px; color: var(--text-muted); }
.fxbar-btn { font-size: 11px; font-family: inherit; cursor: pointer; border-radius: 999px; padding: 3px 12px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); color: #FFF; }
.fxbar-btn.primary { background: linear-gradient(135deg, #1c4d75, #00C8FF); border: none; }
/* 賽前紀錄照：清楚存在但存在感低調 —— 線條相機圖示、淡邊框、透明底 */
/* 📷 與全螢幕鈕(.btn-fullscreen)同款、同為右上角絕對定位 → 穩定配成一對（📷 在左 right:54、⛶ 在右 right:12） */
.fxbar-cam { position: absolute; top: 12px; right: 54px; z-index: 20; width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.30); background: rgba(255, 255, 255, 0.10); color: #FFF; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; opacity: 0.85; transition: background 0.2s; }
.fxbar-cam:hover { background: rgba(255, 255, 255, 0.22); opacity: 1; }
.fxbar-cam.has-photo { opacity: 1; }   /* 已有主照片 → 稍微顯眼一點 */
.fxbar-cam svg { display: block; }
/* 「已有開賽大合照」標記：綠底白勾（明確表示「已拍/完成」，不像未讀通知） */
.fxbar-cam-check { position: absolute; top: -4px; right: -4px; min-width: 13px; height: 13px; padding: 0 1px; border-radius: 50%; background: #16a34a; color: #FFF; font-size: 9px; font-weight: 900; line-height: 13px; text-align: center; box-shadow: 0 0 0 1.5px rgba(15,27,51,0.85); }

/* ── 賽事紀錄照面板 ────────────────────────────────────────── */
.mp-card { max-width: 400px; }
/* 右上角關閉鈕由全域自動注入(.modal-x)；此處不要再自己放一顆，並留白避免標題被 ✕ 蓋到 */
.mp-head { margin-bottom: 12px; padding-right: 34px; }
.mp-slogan { font-size: 17px; font-weight: 900; color: var(--app-text); letter-spacing: 0.5px; }
.mp-subtitle { font-size: 12px; color: var(--app-text-muted); margin-top: 2px; }
.mp-body { font-size: 13px; }
.mp-section { margin: 4px 0 14px; }
.mp-label { font-size: 12px; font-weight: 800; color: var(--app-text-muted); margin-bottom: 7px; }
.mp-main { position: relative; }
.mp-img { width: 100%; border-radius: 12px; display: block; background: #EEF1F5; cursor: zoom-in; }
.mp-main-acts { display: flex; gap: 8px; margin-top: 8px; }
.mp-add-main { width: 100%; padding: 22px 12px; border: 2px dashed rgba(15,27,51,0.20); border-radius: 12px; background: rgba(15,27,51,0.03); color: var(--app-text-muted); font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; }
.mp-add-main:hover { border-color: var(--gpsl-orange-lite, #F0851F); color: var(--gpsl-orange, #E0700C); }
.mp-empty { font-size: 11px; color: var(--app-text-muted); text-align: center; margin-top: 6px; }
.mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.mp-thumb { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #EEF1F5; }
.mp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.mp-del { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,0.55); color: #FFF; font-size: 11px; line-height: 1; cursor: pointer; }
.mp-add-extra { padding: 6px 12px; border: 1px solid rgba(15,27,51,0.18); border-radius: 999px; background: transparent; color: var(--app-text-muted); font-size: 12px; font-family: inherit; cursor: pointer; }
.mp-add-extra:hover { border-color: var(--gpsl-orange-lite, #F0851F); color: var(--gpsl-orange, #E0700C); }
/* 放大預覽 lightbox（在所有彈窗之上） */
.mp-lightbox { position: fixed; inset: 0; z-index: 6000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.92); padding: 20px; cursor: zoom-out; }
.mp-lightbox.show { display: flex; }
.mp-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.fp-list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.fp-opt { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; width: 100%; background: var(--app-bg-soft); border: 1px solid var(--app-line); border-radius: 10px; padding: 9px 12px; cursor: pointer; font-family: inherit; }
.fp-opt:hover { border-color: var(--table-blue); }
.fp-teams { font-size: 14px; font-weight: 700; color: var(--app-text); }
.fp-sub { font-size: 11px; color: var(--app-text-muted); }
.fp-pin   { font-style: normal; font-size: 10px; font-weight: 800; color: #FFF; background: #2E7D32; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.fp-today { font-style: normal; font-size: 10px; font-weight: 800; color: #FFF; background: #E65100; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.fp-mine  { font-style: normal; font-size: 10px; font-weight: 800; color: #FFF; background: #1c4d75; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }

/* #5 — per-排點 two-side confirm buttons (in the locked banner) */
.lb-confirm-btn { font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; border-radius: 8px; padding: 4px 12px; margin-left: 6px; border: none; }
.lb-confirm-btn.ok { background: #2E7D32; color: #FFF; }
.lb-confirm-btn.no { background: #C62828; color: #FFF; }

.handbook-fallback { text-align: center; font-size: 11px; color: var(--text-muted); padding: 6px; background: var(--table-blue-deep); }

/* ── 賽季報名 (registration) ── */
.registration-view {
  position: fixed; inset: 0; z-index: 1500; background: var(--app-bg);
  overflow-y: auto; display: none;
  padding: max(14px, env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom));
}
.registration-view.show { display: block; }
/* 報名頁開啟時鎖住背景頁面捲動 → 橫向時不會同時出現「背景頁 + 報名頁」兩條卷軸 */
html.reg-lock, html.reg-lock body { overflow: hidden !important; }
.reg-inner { max-width: 1000px; margin: 0 auto; }
/* 報名頁頁首：返回 + 標題 + 右上「賽季簡章」 */
.registration-view .reg-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.registration-view .reg-header h1 { font-size: 20px; margin: 0; flex: 1 1 auto; order: 0; }
.registration-view .reg-header .reg-hb-open { order: 8; }   /* 簡章鈕在返回鍵左側 */
.reg-hb-open {
  margin-left: auto; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(218,106,42,0.40);
  background: rgba(218,106,42,0.10); color: var(--gpsl-orange-deep);   /* 低調橘點綴 */
}
.reg-hb-open:hover { background: rgba(218,106,42,0.18); }
/* 清除草稿、重新填寫 */
.reg-clear-draft {
  display: inline-block; margin: 0 0 12px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(198,40,40,0.35);
  background: rgba(198,40,40,0.08); color: #C62828;
}
.reg-clear-draft:hover { background: rgba(198,40,40,0.16); }
/* 複製報名連結（分享給別人）— 顯眼橘色，點擊後短暫變綠 */
.reg-copy-link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 2px 0 12px; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(218,106,42,0.45);
  background: rgba(218,106,42,0.12); color: var(--gpsl-orange-deep);
  transition: background .15s, transform .1s;
}
.reg-copy-link:hover { background: rgba(218,106,42,0.20); }
.reg-copy-link:active { transform: scale(.99); }
.reg-copy-link.copied { background: rgba(46,125,50,0.14); border-color: rgba(46,125,50,0.45); color: #2E7D32; }
/* 「我本人也是球員」內嵌勾選 */
.reg-inline-check { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--app-text-muted); margin-top: 5px; cursor: pointer; }
.reg-inline-check input { width: 15px; height: 15px; flex: 0 0 auto; }
/* 「同報名者」快速帶入小連結 */
.reg-mini-link { border: 1px solid rgba(35,94,144,0.35); background: rgba(35,94,144,0.10); color: var(--table-blue-tint); font-family: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.reg-mini-link:hover { background: rgba(35,94,144,0.20); }
/* 隔年重報：沿用去年、不可修改的欄位反灰 */
.reg-locked, select.reg-locked, input.reg-locked { background: rgba(15,27,51,0.06) !important; color: var(--app-text-muted) !important; cursor: not-allowed; opacity: .72; }
/* 個人報名「用領隊當聯絡人」帶入後、鎖定唯讀的聯絡欄位（顯示遮蔽字串） */
input.reg-cap-locked { background: rgba(35,94,144,0.06) !important; color: var(--app-text) !important; cursor: default; letter-spacing: .5px; }
/* ② 送出前堆疊提示 ＋ 聯絡至少填一個 */
.reg-contact-hint { font-size: 11.5px; color: var(--table-blue-tint); background: rgba(35,94,144,0.07); border-radius: 8px; padding: 6px 10px; margin: 0 0 6px; }
.reg-msg-stack { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.reg-problem { color: #B00020; background: rgba(198,40,40,0.10); border: 1px solid rgba(198,40,40,0.45); border-radius: 8px; padding: 8px 11px; font-size: 13px; font-weight: 700; line-height: 1.5; }
.reg-flash { animation: regFlashAnim 0.45s ease 3; }
@keyframes regFlashAnim { 0%, 100% { background: rgba(198,40,40,0.18); } 50% { background: transparent; } }
.reg-locked-field > span { color: var(--app-text-muted); }
.reg-locked-note { font-size: 10.5px; color: var(--table-blue-tint); background: rgba(35,94,144,0.08); border-radius: 6px; padding: 3px 8px; margin-bottom: 8px; }
/* 簡章內嵌方格（不佔滿螢幕；背景變暗＋模糊；關閉不影響表單） */
.reg-hb-modal { display: none; position: fixed; inset: 0; z-index: 1600; }
.reg-hb-modal.show { display: block; }
.reg-hb-backdrop { position: absolute; inset: 0; background: rgba(4,20,35,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.reg-hb-box {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(880px, 92vw); height: min(88vh, 1100px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--app-bg); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.reg-hb-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--table-blue); color: #fff; flex: 0 0 auto; }
.reg-hb-title { font-weight: 800; font-size: 14px; }
.reg-hb-ctrls { display: flex; align-items: center; gap: 8px; }
.reg-hb-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.16); color: #fff; transition: background .15s, border-color .15s, color .15s; }
.reg-hb-tab:hover { background: rgba(240,133,31,.30); border-color: var(--gpsl-orange-lite); }
.reg-hb-x { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.16); color: #fff; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; font-size: 15px; line-height: 1; transition: background .15s, border-color .15s, color .15s; }
.reg-hb-x:hover { background: rgba(240,133,31,.30); border-color: var(--gpsl-orange-lite); }
.reg-hb-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
.reg-hb-box .handbook-fallback { flex: 0 0 auto; }
/* 內嵌報名救援卡：被 WordPress iframe 內嵌時，登入無法在框裡完成 → 蓋一張「新分頁開啟報名」卡 */
.reg-embed-launcher { display: none; position: fixed; inset: 0; z-index: 1800; align-items: center; justify-content: center; padding: 24px; background: var(--app-bg); }
.reg-embed-launcher .rel-card { max-width: 420px; width: 100%; background: var(--app-card, #fff); border: 1px solid var(--app-line); border-radius: 16px; padding: 30px 24px; text-align: center; box-shadow: 0 14px 44px rgba(15,27,51,.16); }
.reg-embed-launcher .rel-logo { font-size: 42px; line-height: 1; margin-bottom: 8px; }
.reg-embed-launcher .rel-title { font-size: 21px; font-weight: 900; color: var(--app-text); margin-bottom: 10px; }
.reg-embed-launcher .rel-text { font-size: 14.5px; line-height: 1.75; color: var(--app-text-muted); margin: 0 0 20px; }
.reg-embed-launcher .rel-btn { width: 100%; background: var(--gpsl-orange-grad); color: #fff; border: none; border-radius: 999px; padding: 15px 22px; font-size: 16px; font-weight: 800; font-family: inherit; cursor: pointer; transition: filter .15s; }
.reg-embed-launcher .rel-btn:hover { filter: brightness(1.06); }
.reg-embed-launcher .rel-hint { font-size: 12px; color: var(--app-text-muted); opacity: .8; margin: 14px 0 0; }
.reg-modes { display: flex; gap: 8px; margin: 4px 0 14px; }
.reg-mode-btn {
  flex: 1 1 0; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 9px 8px; border-radius: 10px; border: 1px solid var(--app-line);
  background: var(--app-bg-soft); color: var(--app-text-muted);
}
.reg-mode-btn.is-active { background: var(--gpsl-orange-grad); color: #FFF; border: none; }   /* 選中頁籤＝橘漸層（B 案）*/
.reg-section-title { font-size: 13px; font-weight: 900; color: var(--app-text); margin: 16px 0 8px; padding-left: 9px; border-left: 3px solid var(--gpsl-orange); line-height: 1.15; }
.reg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; }
.reg-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--app-text-muted); min-width: 0; }
.reg-field > span { font-weight: 700; }
.reg-field .auth-input { margin: 0; }
/* 報名表單輸入框 focus ＝ 低調橘外框（登入頁維持藍） */
.registration-view .auth-input:focus { border-color: var(--gpsl-orange); box-shadow: 0 0 0 3px rgba(218,106,42,0.16); }
.req { color: #C62828; font-weight: 900; }
/* Google-Forms-style inline errors */
.reg-invalid { border-color: #C62828 !important; box-shadow: 0 0 0 1px #C62828; }
.reg-field.has-err > span { color: #C62828; }
.reg-field.has-err::after { content: "需要填入這一格"; display: block; color: #C62828; font-size: 11px; margin-top: 2px; }
.reg-name.reg-invalid { outline: none; }
.reg-wide { grid-column: 1 / -1; }
.reg-roster {  }
.reg-roster-item {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--app-text);
  background: var(--app-bg-soft); border: 1px solid var(--app-line); border-radius: 8px;
  padding: 6px 10px; margin: 0 6px 6px 0; cursor: pointer;
}
.reg-group-label { font-size: 12px; font-weight: 900; color: var(--app-text-muted); margin: 12px 0 8px; }
.reg-hint { grid-column: 1 / -1; font-size: 11px; color: var(--app-text-muted); line-height: 1.5; margin: 2px 0; }
.reg-player-card { background: var(--app-bg-soft); border: 1px solid var(--app-line); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
/* Carried-over (existing-roster) players get the light-blue theme tint */
.reg-card-existing { background: linear-gradient(180deg, rgba(0,200,255,0.10), rgba(28,77,117,0.06)); border-color: rgba(0,200,255,0.38); }
/* 握持資訊 — a small recessed sub-panel grouping racket fields; slate-blue tint,
   deliberately distinct from the cyan (去年) and gray-white (新增) card colours. */
.reg-racket { margin-top: 8px; padding: 10px; border: 1px solid rgba(35,94,144,0.30); border-radius: 10px; background: rgba(35,94,144,0.08); }
.reg-racket .reg-grid { margin: 0; }
.reg-racket-label { font-size: 12px; font-weight: 800; color: var(--app-text); margin-bottom: 8px; }
.reg-racket-hint { font-size: 11px; color: var(--app-text-muted); line-height: 1.5; margin-top: 8px; }
.reg-pc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.reg-name { margin: 0 !important; font-weight: 700; flex: 1 1 auto; }
.reg-pc-x { border: none; background: rgba(198,40,40,.12); color: #C62828; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 13px; flex: 0 0 auto; }
.reg-rating .reg-grid { margin-top: 6px; }
.reg-rating [id^="rp-self-"] > .reg-field { margin-top: 8px; }
.reg-note { font-size: 11px; color: var(--app-text-muted); margin-top: 8px; text-align: center; }

/* 報名待確認 (admin review) */
.rr-batch { background: var(--app-bg-soft); border: 1px solid var(--app-line); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
/* 統一審核台 */
.rv-monthly { display:flex; align-items:center; justify-content:space-between; gap:10px; background: rgba(35,94,144,0.08); border:1px solid rgba(35,94,144,0.25); border-radius:12px; padding:12px 14px; margin-bottom:16px; cursor:pointer; }
.rv-monthly:hover { background: rgba(35,94,144,0.14); }
.rv-monthly-go { font-size:12.5px; font-weight:800; color: var(--table-blue-tint); white-space:nowrap; }
.rv-monthly-title { font-size:14px; font-weight:800; color: var(--table-blue-tint); }
.rv-monthly-sub { font-size:12px; color: var(--app-text-muted); margin-top:2px; }
.rv-apps-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.rv-apps-title { font-size:13px; font-weight:800; color: var(--app-text); }
.rv-tabs { display:flex; gap:6px; }
.rv-tab { font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; padding:5px 12px; border-radius:999px; border:1px solid var(--app-line); background: var(--app-bg-soft); color: var(--app-text-muted); }
.rv-tab.is-active { background: var(--gpsl-orange-grad); color:#fff; border:none; }
.rv-subtypes { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.rv-sub { font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid var(--app-line); color: var(--app-text); }
.rv-sub.is-active { background: rgba(35,94,144,0.10); border-color: rgba(35,94,144,0.35); color: var(--table-blue-tint); font-weight:700; }
.rv-sub.is-muted { color: var(--app-text-muted); opacity:.7; }
.rv-card { background: var(--app-card, #fff); border:1px solid var(--app-line); border-radius:12px; padding:12px 14px; margin-bottom:10px; }
.rv-chead { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.rv-ctitle { font-size:14px; font-weight:800; color: var(--app-text); }
.rv-cwhen { font-size:11.5px; color: var(--app-text-muted); white-space:nowrap; }
.rv-crow { font-size:13px; color: var(--app-text); margin:3px 0; }
.rv-k { display:inline-block; width:66px; color: var(--app-text-muted); }
.rv-cplayer { margin-top:6px; }
.rv-link { background:none; border:none; padding:0; font-family:inherit; font-size:12.5px; color: var(--table-blue-tint); cursor:pointer; }
.rv-pdetail { margin-top:6px; font-size:12px; color: var(--app-text-muted); background: var(--app-bg-soft); border-radius:8px; padding:8px 10px; }
.rv-cactions { display:flex; gap:8px; margin-top:12px; }
.rv-btn { flex:1; font-family:inherit; font-size:13px; font-weight:800; cursor:pointer; padding:9px; border-radius:10px; border:1px solid var(--app-line); background: var(--app-bg-soft); }
.rv-approve { color:#1B7A3D; border-color: rgba(27,122,61,.4); background: rgba(27,122,61,.08); }
.rv-reject { color:#C62828; border-color: rgba(198,40,40,.4); background: rgba(198,40,40,.08); }
.rv-cresult { margin-top:8px; }
.rv-pill { font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; }
.rv-ok { color:#1B7A3D; background: rgba(27,122,61,.12); }
.rv-no { color:#C62828; background: rgba(198,40,40,.12); }
/* App 內通知 */
#notifModal { z-index: 2000; }
.notif-badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:#E53935; color:#fff; font-size:10.5px; font-weight:800; margin-left:4px; }
.menu-trigger.has-notif { position:relative; }
.menu-trigger.has-notif::after { content:''; position:absolute; top:5px; right:5px; width:8px; height:8px; border-radius:50%; background:#E53935; }
#notifList { max-height:52vh; overflow:auto; text-align:left; }
.notif-item { border:1px solid var(--app-line); border-radius:10px; padding:10px 12px; margin-bottom:8px; background: var(--app-bg-soft); }
.notif-item.unread { border-color: rgba(35,94,144,0.4); background: rgba(35,94,144,0.06); }
.notif-title { font-size:13.5px; font-weight:800; color: var(--app-text); }
.notif-item.unread .notif-title::before { content:'●'; color:#235e90; font-size:10px; margin-right:5px; vertical-align:1px; }
.notif-body { font-size:12.5px; color: var(--app-text-muted); margin-top:3px; line-height:1.6; }
.notif-time { font-size:11px; color: var(--app-text-muted); margin-top:4px; }
.rr-bhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rr-bmain { min-width: 0; flex: 1 1 auto; }
.rr-bteam { font-size: 14px; font-weight: 800; color: var(--app-text); }
.rr-bsub { font-size: 11px; color: var(--app-text-muted); margin-top: 3px; }
.rr-players { margin-top: 8px; border-top: 1px dashed var(--app-line); padding-top: 6px; }
.rr-player { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--app-line); }
.rr-player:last-child { border-bottom: none; }
.rr-paid { font-size: 12px; color: var(--app-text); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
/* 已繳／未繳 二選一切換 */
.rr-paid-seg { display: inline-flex; flex-shrink: 0; border: 1px solid var(--app-line); border-radius: 8px; overflow: hidden; }
.rr-paid-seg button { border: none; background: transparent; color: var(--app-text-muted); font-size: 12px; font-weight: 700; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.rr-paid-seg button + button { border-left: 1px solid var(--app-line); }
.rr-paid-seg .rr-seg-paid.on { background: #2E7D32; color: #FFF; }
.rr-paid-seg .rr-seg-unpaid.on { background: #C62828; color: #FFF; }
.rr-paid-seg.is-locked { opacity: .6; }
.rr-paid-seg button:disabled { cursor: default; }
.rr-pmain { min-width: 0; }
.rr-pname { font-size: 13px; font-weight: 700; color: var(--app-text); }
.rr-psub { font-size: 11px; color: var(--app-text-muted); word-break: break-word; }
.rr-cont { font-size: 10px; font-weight: 800; color: #1c4d75; background: rgba(28,77,117,0.12); border: 1px solid rgba(28,77,117,0.5); border-radius: 999px; padding: 0 6px; }
.rr-done { font-size: 10px; font-weight: 700; color: #FFF; background: #2E7D32; border-radius: 999px; padding: 0 6px; }
@media (max-width: 560px) { .reg-grid { grid-template-columns: 1fr; } }   /* 手機：垂直 */
.fx-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.fx-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--app-text-muted); }
.fx-field > span { font-weight: 700; }
.fx-field .auth-input { margin: 0; }
.fx-field-wide { grid-column: 1 / -1; }
@media (max-width: 480px) { .fx-form-grid { grid-template-columns: 1fr; } }

/* Masked Email + 👁 reveal toggle (privacy in public spaces) */
.masked-wrap { display: inline-flex; align-items: center; gap: 3px; }
.eye-mini { background: none; border: 0; padding: 0 2px; cursor: pointer; font-size: 12px; line-height: 1; opacity: 0.55; }
.eye-mini:hover, .eye-mini.is-on { opacity: 1; }

/* Row jumped-to from the roster's 「權限管理」 button */
.admin-user-row.row-highlight { animation: rowPulse 2.2s ease; }
@keyframes rowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(28, 77, 117, 0); }
  15%, 55% { box-shadow: 0 0 0 3px rgba(28, 77, 117, 0.45); border-color: var(--table-blue); }
}

/* ════════════════════════════════════════════════════════════════
   ADMIN CONSOLE — Phase C (history correction)
   ════════════════════════════════════════════════════════════════ */
.hc-search { display: flex; gap: 8px; margin-bottom: 10px; }
.hc-search .auth-input { flex: 1 1 auto; text-transform: uppercase; letter-spacing: 3px; }
.hc-meta { font-size: 12px; color: var(--app-text-muted); margin-bottom: 6px; }
.hc-teams { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--app-text); margin-bottom: 10px; }
.hc-sets { display: flex; flex-direction: column; gap: 8px; }
.hc-set-row { display: flex; align-items: center; gap: 8px; }
.hc-set-idx { font-size: 12px; color: var(--app-text-muted); width: 56px; flex: 0 0 auto; }
.hc-score {
  width: 64px; text-align: center;
  background: var(--app-bg-soft); border: 1px solid var(--app-line); color: var(--app-text);
  border-radius: 8px; padding: 8px; font-size: 16px; font-family: inherit;
}
.hc-score:focus { outline: none; border-color: var(--table-blue); }
.hc-colon { font-weight: 700; color: var(--app-text-muted); }

/* History browser — browsable, filterable match list (replaces code lookup) */
.hc-toolbar { margin-bottom: 12px; }
.hc-toolbar .auth-input { margin-bottom: 8px; }
.hc-date { width: auto; flex: 1 1 120px; padding: 6px 10px; font-size: 13px; margin: 0; text-transform: none; letter-spacing: normal; }
/* 賽程 (team_match) group — top-level card that holds its 排點 */
.hc-tm { border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-bg-card, var(--app-bg-soft)); margin-bottom: 10px; overflow: hidden; }
.hc-tm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; background: none; border: 0; padding: 12px 14px;
  font-family: inherit; text-align: left; cursor: pointer; color: var(--app-text);
}
.hc-tm-head .hc-matchup { font-size: 15px; }
.hc-tm .acc-chevron { transform: rotate(-90deg); transition: transform .15s; }
.hc-tm.open > .hc-tm-head .acc-chevron { transform: rotate(0deg); }
.hc-tm-body { padding: 4px 10px 10px; border-top: 1px solid var(--app-line); }
.hc-tm-body .hc-card { background: var(--app-bg-soft); }
.hc-card { border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-bg-soft); margin-bottom: 8px; overflow: hidden; }
.hc-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; background: none; border: 0; padding: 10px 12px;
  font-family: inherit; text-align: left; cursor: pointer; color: var(--app-text);
}
.hc-card-main { min-width: 0; flex: 1 1 auto; }
.hc-matchup { font-size: 14px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hc-card-sub { font-size: 11px; color: var(--app-text-muted); margin-top: 3px; word-break: break-word; }
.hc-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.hc-score-badge { font-size: 14px; font-weight: 800; color: var(--app-text); white-space: nowrap; }
.hc-mode-badge { font-size: 10px; font-weight: 700; color: #FFF; background: var(--table-blue); border-radius: 999px; padding: 1px 8px; }
.hc-card .acc-chevron { transform: rotate(-90deg); }
.hc-card.open .acc-chevron { transform: rotate(0deg); }
.hc-card-body { padding: 10px 12px 12px; border-top: 1px solid var(--app-line); }
.hc-card-body .hc-set-row { justify-content: flex-start; }
.hc-empty { padding: 16px 8px; text-align: center; color: var(--app-text-muted); font-size: 13px; }

/* GPoint write modal — factor labels */
.gp-factor-label { font-size: 12px; font-weight: 700; color: var(--app-text); margin: 12px 0 4px; }

/* ════════════════════════════════════════════════════════════════
   BACKLOG #1 — Visitor read-only affordances (guest-mode)
   Functional gate lives in JS requireAuth(); this is the visual cue.
   ════════════════════════════════════════════════════════════════ */
.guest-lock-chip { display: none; }
body.guest-mode .guest-lock-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 auto 8px; padding: 6px 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFF; border-radius: 999px;
  font-size: 11.5px; font-family: inherit; cursor: pointer;
}
body.guest-mode .guest-lock-chip:hover { background: rgba(255, 255, 255, 0.2); }
/* Dim + lock the score rails / edit controls for guests (clicks still routed
   to the login guide by requireAuth, so we keep them visible but inert). */
body.guest-mode .btn-calc,
body.guest-mode .big-score,
body.guest-mode .btn-swap,
body.guest-mode .btn-confirm,
body.guest-mode .btn-upload-match,
body.guest-mode .dispute-actions,
body.guest-mode .action-row {
  opacity: 0.5;
}
body.guest-mode .big-score { pointer-events: none; }

/* Unbound accounts (ID only, no linked player) are read-only too — same
   visual cue as guests. Functional gate is in requireAuth(). */
body.unbound-mode .btn-calc,
body.unbound-mode .big-score,
body.unbound-mode .btn-swap,
body.unbound-mode .btn-confirm,
body.unbound-mode .btn-upload-match,
body.unbound-mode .dispute-actions,
body.unbound-mode .action-row {
  opacity: 0.5;
}
body.unbound-mode .big-score { pointer-events: none; }

/* ════════════════════════════════════════════════════════════════
   BACKLOG #3 — Legacy League Portal (embedded iframe + fullscreen)
   ════════════════════════════════════════════════════════════════ */
.legacy-card { padding: 0 !important; overflow: hidden; }
.legacy-portal {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: var(--app-bg);
  border-radius: inherit; overflow: hidden;
}
.legacy-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px;
  background: var(--table-blue); color: #FFF;
}
.legacy-title { font-size: 13px; font-weight: 900; letter-spacing: 0.5px; }
.legacy-ctrls { display: flex; gap: 6px; }
.legacy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 13px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.28);
  color: #FFF; font-size: 13px; font-weight: 700; line-height: 1; font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.legacy-btn:hover { background: rgba(240, 133, 31, 0.30); border-color: var(--gpsl-orange-lite); color: #FFF; }
.legacy-frame-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
.legacy-frame { width: 100%; height: 100%; border: 0; display: block; background: #FFF; }
.legacy-fallback {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  width: max-content; max-width: 90%;
  font-size: 11px; color: var(--app-text-muted);
  background: rgba(255, 255, 255, 0.9); padding: 6px 10px; border-radius: 8px;
  pointer-events: none; text-align: center;
}
/* Fullscreen overlay (sits above header so the iframe gets the whole screen) */
.legacy-fs-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: none; flex-direction: column;
  background: #000;
}
.legacy-fs-overlay.show { display: flex; }
.legacy-fs-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: max(env(safe-area-inset-top), 10px) 14px 10px;
  background: var(--table-blue); color: #FFF;
}
.legacy-fs-frame { flex: 1 1 auto; width: 100%; border: 0; background: #FFF; }

/* ════════════════════════════════════════════════════════════════
   BACKLOG #4 — Team combobox (search + region filter + 其他)
   No CSS order / auto-margins (Spec §4.6).
   ════════════════════════════════════════════════════════════════ */
.team-combobox { position: relative; width: 100%; }
.tc-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--app-bg-soft);
  border: 1px solid var(--app-line);
  color: var(--app-text);
  border-radius: 10px; padding: 12px 14px;
  font-size: 15px; font-family: inherit; cursor: pointer; text-align: left;
}
.tc-trigger-text.is-placeholder { color: var(--app-text-muted); }
.tc-caret { color: var(--app-text-muted); font-size: 12px; }
.tc-panel {
  display: none;
  /* In-flow (NOT absolute) so the panel expands the form and the parent
     overlay (.auth-view / .profile-completion-view) can scroll to its
     bottom instead of clipping it. */
  margin-top: 6px;
  background: #FFF; border: 1px solid var(--app-line);
  border-radius: 12px; padding: 10px;
  box-shadow: 0 8px 22px rgba(15, 27, 51, 0.12);
}
.team-combobox.open .tc-panel { display: block; }
.team-combobox.open .tc-caret { transform: rotate(180deg); }
.tc-search {
  width: 100%; box-sizing: border-box;
  background: var(--app-bg-soft); border: 1px solid var(--app-line);
  color: var(--app-text); border-radius: 8px; padding: 9px 12px;
  font-size: 14px; font-family: inherit; margin-bottom: 8px;
}
.tc-search:focus { outline: none; border-color: var(--table-blue); }
.tc-filters { display: flex; gap: 6px; margin-bottom: 8px; }
.tc-filter {
  flex: 1 1 auto;
  background: var(--app-bg-soft); border: 1px solid var(--app-line);
  color: var(--app-text-muted); border-radius: 999px; padding: 6px 4px;
  font-size: 11.5px; font-family: inherit; cursor: pointer;
}
.tc-filter.is-active { background: var(--gpsl-orange-grad); border-color: var(--gpsl-orange); color: #FFF; }
.tc-list { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.tc-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left;
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 9px 10px; font-size: 14px; font-family: inherit;
  color: var(--app-text); cursor: pointer;
}
.tc-opt:hover { background: var(--app-bg-soft); }
.tc-opt.is-sel { border-color: var(--table-blue); background: rgba(28, 77, 117, 0.08); }
.tc-region { font-size: 11px; color: var(--app-text-muted); }
.tc-empty { padding: 12px 8px; font-size: 12.5px; color: var(--app-text-muted); text-align: center; }
.tc-other {
  width: 100%; margin-top: 8px;
  background: none; border: 1px dashed var(--app-line); border-radius: 8px;
  padding: 9px 10px; font-size: 13px; font-family: inherit;
  color: var(--table-blue); cursor: pointer;
}
.tc-custom { display: none; margin-top: 8px; }
.tc-custom.open { display: block; }
.tc-custom-input {
  width: 100%; box-sizing: border-box;
  background: var(--app-bg-soft); border: 1px solid var(--app-line);
  color: var(--app-text); border-radius: 8px; padding: 10px 12px;
  font-size: 14px; font-family: inherit;
}
.tc-custom-input:focus { outline: none; border-color: var(--table-blue); }

/* ═══════════════════════════════════════════════════════════════
   全站按鈕 Hover 統一（設計語言 · 2026-07-10）
   ・主要動作（藍→青漸層 / 實心彩色）→ hover 提亮＋微浮
   ・淺底中性 / 工具鍵 / 未選頁籤 / 返回鍵 → hover 低調橘底（白底也清楚）
   ・危險/警告鍵 → hover 紅 / 橘紅底
   ・深底 bar 鍵（簡章新分頁/關閉、fixture bar）→ hover 橘光
   ・計分板深藍卡內的鍵維持原本（不套用此處）
   ═══════════════════════════════════════════════════════════════ */
.auth-btn, .modal-btn, .reg-mode-btn, .admin-mini-btn, .back-btn, .rr-paid-seg button,
.auth-primary, .fxbar-btn, .nav-arrow, .lb-confirm-btn {
  transition: background .15s ease, border-color .15s ease, color .15s ease,
              box-shadow .18s ease, transform .12s ease, filter .15s ease;
}
/* 主要動作（藍→青漸層 / 實心彩色）→ 提亮＋微浮 */
.auth-primary:hover,
.modal-btn.primary:hover,
.fxbar-btn.primary:hover,
.nav-arrow:hover,
.lb-confirm-btn:hover {
  filter: brightness(1.07);
  box-shadow: 0 6px 18px rgba(15, 27, 51, 0.22);
  transform: translateY(-1px);
}
/* 淺底中性鍵 / 未選頁籤 / 返回鍵 → 低調橘底 */
.auth-btn:not(.auth-primary):hover,
.modal-btn:not(.primary):not(.danger):hover,
.admin-mini-btn:not(.danger):not(.warn):hover,
.reg-mode-btn:not(.is-active):hover,
.back-btn:hover {
  background: rgba(218, 106, 42, 0.12);
  border-color: var(--gpsl-orange);
  color: var(--gpsl-orange-deep);
}
/* 危險 / 警告鍵 */
.modal-btn.danger:hover,
.admin-mini-btn.danger:hover { background: rgba(198, 40, 40, 0.10); border-color: #C62828; color: #C62828; }
.admin-mini-btn.warn:hover  { background: rgba(230, 81, 0, 0.10); border-color: #E65100; color: #E65100; }
/* 深底 fixture bar 的非主要鍵 → 橘光（與簡章 bar 一致） */
.fxbar-btn:not(.primary):hover { background: rgba(240, 133, 31, 0.30); border-color: var(--gpsl-orange-lite); color: #FFF; }
/* 分段按鈕（已繳/未繳）未選狀態 hover 提示 */
.rr-paid-seg button:not(.on):hover { background: rgba(218, 106, 42, 0.10); color: var(--gpsl-orange-deep); }

/* ═══ 乒力值月結審核 (settlement review) ═══ */
.st-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:6px; color:var(--app-text); font-size:14px; }
.st-summary { font-size:13px; color:var(--app-text-muted); }
.st-group-title { font-size:12.5px; font-weight:700; color:var(--app-text-muted); margin:16px 0 8px; }
.st-group-flex { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.st-card { background:var(--app-bg); border:1px solid var(--app-line); border-radius:12px; padding:11px 13px; margin-bottom:9px; }
.st-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.st-name { font-size:14.5px; font-weight:700; color:var(--app-text); }
.st-meta { font-size:12.5px; color:var(--app-text-muted); margin-top:6px; }
.st-cross { font-size:12.5px; color:#C62828; background:rgba(198,40,40,0.08); border-radius:8px; padding:6px 9px; margin-top:7px; }
.st-actions { display:flex; gap:6px; flex-wrap:wrap; }
.st-flag { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; background:rgba(15,27,51,0.06); color:var(--app-text-muted); }
.st-flag.danger { background:rgba(198,40,40,0.10); color:#C62828; }
.st-flag.accent { background:rgba(218,106,42,0.12); color:var(--gpsl-orange-deep); }
.st-flag.ok { background:rgba(46,125,50,0.10); color:#2E7D32; }
.st-up { color:#2E7D32; font-weight:700; }
.st-down { color:#C62828; font-weight:700; }
.st-muted { color:var(--app-text-muted); }
.st-btn { font-size:12.5px; padding:5px 11px; border-radius:10px; border:1px solid var(--app-line); background:#fff; color:var(--app-text); cursor:pointer; transition:background .15s,border-color .15s; }
.st-btn:hover { background:rgba(218,106,42,0.10); border-color:rgba(218,106,42,0.5); }
.st-btn.accent { border-color:rgba(218,106,42,0.55); color:var(--gpsl-orange-deep); }
.st-btn.ghost { color:var(--app-text-muted); }
.st-list { border:1px solid var(--app-line); border-radius:12px; overflow:hidden; }
.st-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 13px; font-size:13.5px; color:var(--app-text); border-bottom:1px solid var(--app-line); }
.st-row:last-child { border-bottom:none; }
.st-ev { margin-top:8px; background:var(--app-bg-soft); border-radius:10px; padding:6px 10px; }
.st-ev-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--app-text); padding:4px 0; }
.st-publish-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px; }
.st-publish-btn { font-size:14px; font-weight:700; color:#fff; background:linear-gradient(135deg,#1c4d75,#00C8FF); border:none; border-radius:999px; padding:10px 24px; cursor:pointer; }
.st-publish-btn:hover { filter:brightness(1.06); }
.st-warn { font-size:12.5px; color:var(--gpsl-orange-deep); }

/* ═══ 後臺快速解鎖（圖形／生物辨識／信任裝置） ═══ */
.ag-remember { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--app-text-muted); margin-top:8px; line-height:1.4; }
.ag-remember input { width:16px; height:16px; flex:0 0 auto; }
.ag-pattern-msg { font-size:12.5px; color:#C62828; text-align:center; min-height:16px; margin-top:4px; }
.pattern-pad { position:relative; width:210px; height:210px; margin:8px auto; display:grid;
  grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); place-items:center;
  touch-action:none; user-select:none; -webkit-user-select:none; }
.pattern-pad .pp-lines { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.pattern-pad .pp-dot { width:22px; height:22px; border-radius:50%; background:var(--app-bg-soft);
  border:2px solid var(--app-line); z-index:1; }
.pattern-pad .pp-dot.on { background:var(--gpsl-orange); border-color:var(--gpsl-orange); }
.sec-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--app-line); }
.sec-row:last-child { border-bottom:none; }
.sec-sub { font-size:12.5px; color:var(--app-text-muted); margin-top:2px; }
.sec-acts { display:flex; gap:6px; flex-wrap:wrap; }
.sec-group-title { font-size:12.5px; font-weight:700; color:var(--app-text-muted); margin:16px 0 8px; }

/* ═══ 我的乒力值顯示（官方＋暫估） ═══ */
.gp-big { font-size:19px; font-weight:800; color:var(--app-text); }
.gp-badge { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; margin-left:6px; vertical-align:middle; }
.gp-badge.ok { background:rgba(46,125,50,.10); color:#2E7D32; }
.gp-badge.prov { background:rgba(218,106,42,.12); color:var(--gpsl-orange-deep); }
.gp-prov { font-size:12px; color:var(--app-text-muted); margin-top:3px; line-height:1.4; }
.gp-none { font-size:13px; color:var(--app-text-muted); }

/* 生物辨識解鎖鈕改橘（快速路徑突顯；進入後臺維持藍色主鈕） */
#agBioBtn { background: var(--gpsl-orange-grad) !important; }

/* 生物辨識鈕的 Face ID＋指紋 icon（白色線條，在橘底清楚可見） */
.ag-bio-ic { display:inline-flex; align-items:center; gap:7px; margin-right:8px; vertical-align:-4px; }
.ag-bio-ic svg { width:20px; height:20px; }

/* ═══ 積分排行榜（Stats 卡片，白列在深藍面板上）═══ */
.leaderboard-card .card-title { font-family:'Bebas Neue', sans-serif; font-size:22px; letter-spacing:3px; color:#fff; text-align:center; margin-bottom:12px; }
.lb-wrap { background: var(--table-blue); border-radius:12px; padding:14px 12px; min-height:240px; }
.lb-filters { margin-bottom:12px; }
.lb-filters .np-filter-label { color: var(--text-muted); }
.lb-filters .np-filter { color:#EAF4FF; border-color: rgba(255,255,255,0.28); background: transparent; }
.lb-filters .np-filter.is-active { background: var(--gpsl-orange); border-color: var(--gpsl-orange); color:#fff; }
.lb-list { display:flex; flex-direction:column; gap:8px; max-height:46vh; overflow-y:auto; }
.lb-row { display:flex; align-items:center; gap:12px; background: rgba(255,255,255,0.94); border:1px solid rgba(255,255,255,0.4); border-radius:10px; padding:9px 12px; color: var(--app-text); }
.lb-row.me { background: rgba(248,168,62,0.95); border-color: var(--gpsl-orange); }
.lb-medal { flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; background: rgba(15,27,51,0.10); color: var(--app-text); }
.lb-medal.g1 { background:#F5B301; color:#4a3300; }
.lb-medal.g2 { background:#C2C9D2; color:#333a44; }
.lb-medal.g3 { background:#E0A667; color:#4a2e0e; }
.lb-mid { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.lb-name { font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.lb-team { font-size:12px; color: var(--app-text-muted); }
.lb-score { flex:0 0 auto; font-weight:800; font-size:18px; }
.lb-you { font-size:11px; font-weight:700; background: var(--gpsl-orange); color:#fff; padding:1px 7px; border-radius:6px; }

/* ═══ 歷史比賽紀錄（重新設計成卡片，與排行榜同一套語言）═══ */
.hist-filters { margin-bottom: 16px; }
.hist-search { width: 100%; margin-bottom: 14px; }
.hist-filters .np-filter-row { margin-bottom: 9px; }
.hist-filters .np-filter-row:last-child { margin-bottom: 0; }
.hist-filters .np-filter-label { color: var(--text-muted); }
.hist-filters .np-filter { color:#EAF4FF; border-color: rgba(255,255,255,0.28); background: transparent; }
.hist-filters .np-filter.is-active { background: var(--gpsl-orange); border-color: var(--gpsl-orange); color:#fff; }
.hist-card { display:flex; flex-direction:column; gap:7px; width:100%; text-align:left; cursor:pointer;
  background: rgba(255,255,255,0.94); border:1px solid rgba(255,255,255,0.4); border-radius:10px; padding:10px 13px; color: var(--app-text);
  transition: background .12s, transform .06s; }
.hist-card:hover { background:#fff; }
.hist-card:active { transform: scale(0.995); }
.hist-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hist-date { font-size:12px; color: var(--app-text-muted); }
.hist-badge { font-size:11px; font-weight:700; background: rgba(28,77,117,0.10); color:#1c4d75; padding:2px 8px; border-radius:6px; }
.hist-match { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:10px; }
.hist-team { font-size:14.5px; font-weight:600; color: var(--app-text); line-height:1.25; }
.hist-match .hist-team:first-of-type { text-align:right; }
.hist-match .hist-team:last-of-type { text-align:left; }
.hist-team.win { color: var(--gpsl-orange-deep); font-weight:800; }
.hist-score { font-size:17px; font-weight:800; color: var(--app-text); white-space:nowrap; }
.hist-colon { color: var(--app-text-muted); margin:0 1px; }

/* ═══ 積分參數設定 ═══ */
.gps-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
.gps-field { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--app-text); }
.gps-field > span { font-weight:700; }
.gps-field input { width:100%; }
.gps-field em { font-size:11.5px; color:var(--app-text-muted); font-style:normal; line-height:1.4; }
.gps-i { border:none; background:none; padding:0 0 0 2px; margin:0; font-family:inherit; font-size:13px; line-height:1; color:var(--table-blue-tint); cursor:pointer; vertical-align:middle; }
.gps-i:hover { color:var(--gpsl-orange, #DA6A2A); }
.gps-hint { display:none; }
.gps-hint.show { display:block; margin-top:2px; background:rgba(35,94,144,0.06); border-radius:6px; padding:6px 8px; }