/* ============================================================ BadMatch — iOS/macOS-inspired design system ============================================================ */ :root { /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Sukhumvit Set", "Thonburi", "IBM Plex Sans Thai", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; /* Light theme — iOS system colors */ --bg: #f2f2f7; /* systemGroupedBackground */ --bg-elev: #ffffff; /* card surface */ --bg-elev-2: #f9f9fb; --bg-inset: #ebebf0; --bg-chrome: rgba(246, 246, 248, 0.72); /* frosted nav */ --text: #1c1c1e; /* label */ --text-2: #3c3c43; --text-3: rgba(60, 60, 67, 0.6); /* secondaryLabel */ --text-4: rgba(60, 60, 67, 0.3); /* tertiaryLabel */ --sep: rgba(60, 60, 67, 0.18); /* separator */ --sep-soft: rgba(60, 60, 67, 0.09); --tint: #0a84ff; /* systemBlue */ --tint-soft: rgba(10, 132, 255, 0.12); --tint-hover: #0070e0; --green: #30d158; --green-soft: rgba(48, 209, 88, 0.14); --red: #ff453a; --red-soft: rgba(255, 69, 58, 0.14); --orange: #ff9f0a; --orange-soft: rgba(255, 159, 10, 0.14); --purple: #bf5af2; --purple-soft: rgba(191, 90, 242, 0.14); --yellow: #ffd60a; --pink: #ff375f; --teal: #64d2ff; --indigo: #5e5ce6; /* Badminton-y accent */ --shuttle: #d9534f; /* Radii */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* Shadow */ --shadow-sm: 0 1px 0 rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 14px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-lg: 0 18px 50px -16px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.06); --shadow-pop: 0 24px 60px -10px rgba(15, 23, 42, 0.28); /* Spacing rhythm */ --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px; --gap-5: 20px; --gap-6: 24px; --gap-8: 32px; color-scheme: light; } /* ============================================================ Dark theme — applied via . Only the color tokens are overridden; every component reads these variables, so the whole UI flips with no per-rule edits. ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0b0b0d; /* near-black grouped background */ --bg-elev: #1c1c1e; /* card surface */ --bg-elev-2: #242427; --bg-inset: #2c2c2e; --bg-chrome: rgba(28, 28, 30, 0.72); /* frosted nav */ --text: #f2f2f7; --text-2: rgba(235, 235, 245, 0.86); --text-3: rgba(235, 235, 245, 0.6); --text-4: rgba(235, 235, 245, 0.3); --sep: rgba(235, 235, 245, 0.2); --sep-soft: rgba(235, 235, 245, 0.09); --tint: #0a84ff; --tint-soft: rgba(10, 132, 255, 0.24); --tint-hover: #409cff; --green: #30d158; --green-soft: rgba(48, 209, 88, 0.2); --red: #ff453a; --red-soft: rgba(255, 69, 58, 0.2); --orange: #ff9f0a; --orange-soft: rgba(255, 159, 10, 0.2); --purple: #bf5af2; --purple-soft: rgba(191, 90, 242, 0.2); --yellow: #ffd60a; --pink: #ff375f; --teal: #64d2ff; --indigo: #5e5ce6; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 14px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4); --shadow-lg: 0 18px 50px -16px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.4); --shadow-pop: 0 24px 60px -10px rgba(0,0,0,0.75); } /* Dark-mode scrollbar thumbs (light defaults are too dark to see) */ :root[data-theme="dark"] .scroll::-webkit-scrollbar-thumb, :root[data-theme="dark"] .queue::-webkit-scrollbar-thumb { background: rgba(235, 235, 245, 0.22); } /* Dark overrides for surfaces that hardcode a light background/gradient */ :root[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #161618 0%, #0d0d0f 100%); } :root[data-theme="dark"] .court.playing { background: linear-gradient(160deg, #1d1d20 0%, #15202e 100%); } :root[data-theme="dark"] .court.playing.has-override { background: linear-gradient(160deg, #1d1d20 0%, #241a2e 100%); } :root[data-theme="dark"] .court.playing.court-overdue { background: linear-gradient(160deg, #1d1d20 0%, #2a1e0e 100%); } /* Active segmented pill: the light-mode shadow is invisible on dark, so add a faint ring to keep the selected option distinct from the track. */ :root[data-theme="dark"] .segmented button.active { box-shadow: 0 0 0 0.5px rgba(255,255,255,0.1), 0 1px 3px rgba(0,0,0,0.4); } * { box-sizing: border-box; } html, body, #root { margin: 0; height: 100%; font-family: var(--font-sans); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-size: 15px; line-height: 1.45; letter-spacing: -0.005em; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; } input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } a { color: var(--tint); text-decoration: none; } /* ============================================================ App shell — sidebar (desktop) + tabbar (mobile) ============================================================ */ .app { display: grid; grid-template-columns: 256px 1fr; height: 100vh; height: 100dvh; /* dynamic viewport — avoids mobile browser-chrome overflow */ background: var(--bg); } .sidebar { background: linear-gradient(180deg, #fbfbfd 0%, #f4f4f8 100%); border-right: 1px solid var(--sep-soft); display: flex; flex-direction: column; padding: 14px 12px 18px; position: relative; } .brand { display: flex; align-items: center; gap: 10px; padding: 8px 10px 18px; } .brand-mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--tint), #6c4cff 90%); display: grid; place-items: center; color: white; font-weight: 700; box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.4), 0 6px 14px -6px rgba(10,132,255,0.55); } .brand-name { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; } .brand-sub { font-size: 11px; color: var(--text-3); margin-top: -2px; } .side-section { margin-top: 10px; } .side-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding: 6px 12px; font-weight: 600; } .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; margin: 1px 0; border-radius: 8px; font-size: 14px; color: var(--text-2); font-weight: 500; text-align: left; transition: background 0.12s ease; } .nav-item:hover { background: rgba(60,60,67,0.06); } .nav-item.active { background: var(--tint); color: white; } .nav-item.active .nav-icon { color: white; } .nav-icon { width: 22px; height: 22px; display: grid; place-items: center; color: var(--text-3); } .nav-item.active .nav-icon { color: white; } .side-footer { margin-top: auto; padding: 10px; border-top: 1px solid var(--sep-soft); display: flex; align-items: center; gap: 10px; } .avatar { width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(135deg, #ff9f0a, var(--shuttle)); display: grid; place-items: center; color: white; font-weight: 600; font-size: 13px; box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.6); } /* main */ .main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .topbar { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 22px; border-bottom: 1px solid var(--sep-soft); background: var(--bg-chrome); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); position: relative; z-index: 10; } .topbar h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .topbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } /* Mobile user chip in topbar — hidden on desktop (sidebar footer handles it) */ .topbar-user { display: none; align-items: center; gap: 7px; margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--sep-soft); flex-shrink: 0; } .topbar-user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .topbar-user-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; color: var(--text); } @media (max-width: 820px) { .topbar-user { display: flex; } } .scroll { flex: 1; overflow: auto; padding: 22px 26px 60px; } /* ============================================================ Primitives ============================================================ */ .card { background: var(--bg-elev); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); border: 0.5px solid var(--sep-soft); } .card-pad { padding: 18px; } .card-row { display: flex; align-items: center; padding: 12px 16px; border-top: 0.5px solid var(--sep); } .card-row:first-child { border-top: none; } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-weight: 500; font-size: 13.5px; background: var(--bg-inset); color: var(--text); transition: background 0.12s, transform 0.05s; white-space: nowrap; } .btn:hover { background: rgba(60,60,67,0.14); } .btn:active { transform: scale(0.97); } .btn.primary { background: var(--tint); color: white; } .btn.primary:hover { background: var(--tint-hover); } .btn.danger { background: var(--red); color: white; } .btn.ghost { background: transparent; color: var(--tint); } .btn.ghost:hover { background: var(--tint-soft); } .btn.sm { padding: 5px 10px; font-size: 12.5px; } .btn.lg { padding: 10px 20px; font-size: 15px; } .btn.block { width: 100%; justify-content: center; } .btn.icon { padding: 6px; width: 30px; height: 30px; justify-content: center; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--bg-inset); font-size: 12px; font-weight: 500; color: var(--text-2); } .chip.blue { background: var(--tint-soft); color: var(--tint); } .chip.green { background: var(--green-soft); color: #1f9e3e; } .chip.red { background: var(--red-soft); color: var(--red); } .chip.orange { background: var(--orange-soft); color: #c97000; } .chip.purple { background: var(--purple-soft); color: #8d3fc9; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], select { width: 100%; padding: 10px 12px; border-radius: 10px; background: var(--bg-elev-2); border: 1px solid var(--sep); outline: none; transition: border 0.15s, background 0.15s; } input:focus, select:focus { border-color: var(--tint); background: var(--bg-elev); } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .field label { font-size: 13px; font-weight: 500; color: var(--text-2); } .hint { font-size: 12px; color: var(--text-3); } /* Segmented control (iOS-style) */ .segmented { display: inline-flex; background: var(--bg-inset); border-radius: 10px; padding: 2px; gap: 0; position: relative; } .segmented button { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-2); transition: background 0.15s, color 0.15s; } .segmented button.active { background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04); } /* iOS toggle */ .toggle { width: 44px; height: 26px; border-radius: 999px; background: var(--bg-inset); position: relative; cursor: pointer; transition: background 0.2s; } .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 999px; background: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); transition: left 0.2s ease; } .toggle.on { background: var(--green); } .toggle.on::after { left: 20px; } /* Stat tiles */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .tile { background: var(--bg-elev); border: 0.5px solid var(--sep-soft); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-sm); } .tile-label { font-size: 12px; color: var(--text-3); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; } .tile-num { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; font-feature-settings: "tnum"; } .tile-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; } /* Level pill */ .level-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 12px; font-weight: 600; font-feature-settings: "tnum"; background: var(--bg-inset); color: var(--text-2); flex: none; } .level-pill[data-lv="1"], .level-pill[data-lv="2"] { background: #e3f2ff; color: #2563eb; } .level-pill[data-lv="3"], .level-pill[data-lv="4"] { background: #d6f4e0; color: #1a7f3a; } .level-pill[data-lv="5"], .level-pill[data-lv="6"] { background: #fff4d6; color: #a36500; } .level-pill[data-lv="7"], .level-pill[data-lv="8"] { background: #ffe2d6; color: #c44a1c; } .level-pill[data-lv="9"], .level-pill[data-lv="10"] { background: #ffd6e0; color: #b5184a; } /* Court card */ .court { background: var(--bg-elev); border-radius: var(--r-xl); padding: 18px; border: 0.5px solid var(--sep-soft); box-shadow: var(--shadow-md); position: relative; overflow: hidden; } .court.playing { background: linear-gradient(160deg, #ffffff 0%, #f0f7ff 100%); } .court.court-overdue { border-color: rgba(255, 149, 0, 0.45); box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 149, 0, 0.2) inset; } .court.playing.court-overdue { background: linear-gradient(160deg, #ffffff 0%, #fff7ed 100%); } .court-status.live.overdue { color: var(--orange); } .court-status.live.overdue::before { background: var(--orange); } .court.has-override { border-color: rgba(191,90,242,0.35); box-shadow: var(--shadow-md), 0 0 0 1px rgba(191,90,242,0.15) inset; } .court.playing.has-override { background: linear-gradient(160deg, #ffffff 0%, #f7f1ff 100%); } /* Court settings row (override toggle layout) */ .court-setting-row { border-top: 0.5px solid var(--sep-soft); padding: 14px 0; } .court-setting-row:first-of-type { border-top: none; padding-top: 4px; } .court-setting-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .court-setting-body { padding-left: 4px; transition: opacity 0.18s; } .court-setting-body.is-disabled { opacity: 0.42; pointer-events: none; filter: saturate(0.6); } .court-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .court-title { display: flex; align-items: center; gap: 10px; } .court-num { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--tint), #6c4cff); color: white; display: grid; place-items: center; font-weight: 700; font-size: 16px; box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.5); } .court-status { font-size: 12px; font-weight: 500; color: var(--text-3); } .court-status.live { color: var(--green); } .court-status.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--green); margin-right: 5px; animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(48,209,88,0.4); } 50% { opacity: 0.7; transform: scale(1.2); box-shadow: 0 0 0 6px rgba(48,209,88,0); } } .court-net { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; padding: 10px; border-radius: 14px; background: var(--bg-elev-2); border: 0.5px dashed var(--sep); } .court-side { display: flex; flex-direction: column; gap: 8px; padding: 8px; min-width: 0; } .court-divider { width: 1.5px; background: repeating-linear-gradient(180deg, var(--sep) 0 4px, transparent 4px 8px); } .court-vs { display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: 0.08em; padding: 0 4px; } .player-pill { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-elev); border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); border: 0.5px solid var(--sep-soft); } .player-pill.swappable { cursor: pointer; transition: border 0.15s, transform 0.05s, box-shadow 0.15s; position: relative; } .player-pill.swappable:hover { border-color: var(--tint); box-shadow: 0 2px 8px rgba(10,132,255,0.18); } .player-pill.swappable:active { transform: scale(0.98); } .player-pill .swap-hint { color: var(--text-4); display: inline-flex; transition: color 0.15s; } .player-pill.swappable:hover .swap-hint { color: var(--tint); } .player-pill-name { font-size: 13.5px; font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-pill-mini { padding: 5px 8px; font-size: 12.5px; } /* ── Guest Mode ─────────────────────────────────────── */ .guest-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--bg); } .guest-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: var(--bg-chrome); border-bottom: 0.5px solid var(--sep-soft); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); flex-shrink: 0; flex-wrap: wrap; } .guest-courts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 20px; } .guest-court-card { background: var(--bg-elev); border-radius: var(--r-lg); padding: 14px; border: 0.5px solid var(--sep-soft); box-shadow: var(--shadow-sm); } .guest-court-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; } @media (max-width: 820px) { .guest-topbar { padding: 8px 14px; } .guest-courts-grid { grid-template-columns: 1fr; } } /* Upcoming queue strip */ .queue { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; } .queue-card { flex: 0 0 280px; scroll-snap-align: start; background: var(--bg-elev); border-radius: var(--r-lg); padding: 14px; border: 0.5px solid var(--sep-soft); box-shadow: var(--shadow-sm); } .queue-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; } .queue-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 0.5px solid var(--sep-soft); } .queue-foot .queue-court-pick { width: auto; flex: 0 0 auto; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 8px; } .queue-foot .queue-court-pick.static { color: var(--text-2); background: var(--bg-elev-2); border: 0.5px solid var(--sep-soft); } .queue-foot .queue-order-hint { font-size: 11px; color: var(--text-3); white-space: nowrap; } .btn.icon.danger { color: var(--red); background: transparent; } .btn.icon.danger:hover { background: var(--red-soft); } /* List */ .list { display: flex; flex-direction: column; } .list-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 0.5px solid var(--sep-soft); background: var(--bg-elev); transition: background 0.1s; } .list-item:first-child { border-top: none; border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); } .list-item:last-child { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); } .list-item:hover { background: var(--bg-elev-2); } .list-item.selectable { cursor: pointer; } .list-item.checked { background: var(--tint-soft); } .list-item.checked:hover { background: rgba(10,132,255,0.18); } .list-item .name { font-weight: 500; } .list-item .meta { color: var(--text-3); font-size: 12.5px; } .check-circle { width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--sep); display: grid; place-items: center; transition: all 0.15s; } .list-item.checked .check-circle { background: var(--tint); border-color: var(--tint); color: white; } /* Modal / sheet */ .modal-back { position: fixed; inset: 0; background: rgba(0,0,0,0.32); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 100; animation: fadeIn 0.18s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--bg-elev); border-radius: 18px; width: min(92vw, 460px); max-height: 86vh; overflow: auto; box-shadow: var(--shadow-pop); animation: slideUp 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); } .modal.large { width: min(92vw, 720px); } @keyframes slideUp { from { transform: translateY(20px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 8px; } .modal-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .modal-body { padding: 8px 20px 16px; } .modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 20px; border-top: 0.5px solid var(--sep); background: var(--bg-elev-2); border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; } /* Toast */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: rgba(28,28,30,0.92); color: white; padding: 10px 18px; border-radius: 999px; font-size: 13.5px; box-shadow: var(--shadow-pop); backdrop-filter: blur(12px); z-index: 1000; animation: toastIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes toastIn { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } /* Login screen */ .auth-screen { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px 16px; overflow-y: auto; background: radial-gradient(ellipse at top left, rgba(10,132,255,0.12), transparent 50%), radial-gradient(ellipse at bottom right, rgba(255, 159, 10, 0.10), transparent 50%), var(--bg); } .auth-card { background: var(--bg-elev); border-radius: 22px; padding: 32px; width: min(94vw, 420px); box-shadow: var(--shadow-lg); border: 0.5px solid var(--sep-soft); } /* Footer note under the login form */ .auth-foot-note { margin-top: 20px; } .auth-foot-note .viewer-note { margin: 0; } @media (max-width: 480px) { .auth-card { padding: 24px 20px; border-radius: 18px; } .auth-logo { width: 48px; height: 48px; margin-bottom: 14px; } .auth-title { font-size: 20px; } .auth-sub { margin-bottom: 18px; } } /* Demo account picker on login */ .demo-accounts { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 16px; } .demo-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: start; padding: 10px 12px; background: var(--bg-elev-2); border: 1px solid var(--sep-soft); border-radius: 12px; cursor: pointer; text-align: left; transition: border-color 0.15s, transform 0.05s, background 0.15s; position: relative; } .demo-card:hover { border-color: var(--tint); background: var(--bg-elev); } .demo-card:active { transform: scale(0.98); } .demo-card .role-badge { grid-column: 1; grid-row: 1 / span 2; align-self: center; } .demo-name { font-weight: 600; font-size: 14px; line-height: 1.2; } .demo-email { font-size: 11.5px; color: var(--text-3); } .demo-desc { grid-column: 2; font-size: 11.5px; color: var(--text-3); margin-top: 2px; } .role-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .role-super { background: linear-gradient(135deg, #ffd60a, #ff9f0a); color: #5b3a00; } .role-admin { background: var(--tint-soft); color: var(--tint); } .role-viewer { background: var(--bg-inset); color: var(--text-2); } .auth-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--text-3); font-size: 11.5px; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--sep-soft); } /* Viewer demo section on login (preview public share without auth) */ .viewer-demo { margin-top: 18px; padding: 12px 14px; background: var(--bg-elev-2); border: 1px dashed var(--sep); border-radius: 12px; } .viewer-demo-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); margin-bottom: 8px; font-weight: 500; } .viewer-demo-head b { color: var(--tint); } .viewer-demo-list { display: flex; flex-direction: column; gap: 4px; } .viewer-demo-link { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--bg-elev); border: 0.5px solid var(--sep-soft); border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none; transition: border-color 0.15s, transform 0.05s; } .viewer-demo-link:hover { border-color: var(--tint); transform: translateY(-1px); } .viewer-demo-link:active { transform: scale(0.99); } .viewer-state-badge { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.02em; } .viewer-state-live .viewer-state-badge { background: var(--green-soft); color: #1f9e3e; } .viewer-state-disabled .viewer-state-badge { background: var(--orange-soft); color: #c97000; } .viewer-state-expired .viewer-state-badge { background: var(--red-soft); color: var(--red); } .viewer-state-notfound .viewer-state-badge { background: var(--bg-inset); color: var(--text-3); } .auth-logo { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, var(--tint), #6c4cff 90%); display: grid; place-items: center; color: white; box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.5), 0 12px 28px -10px rgba(10,132,255,0.55); margin-bottom: 18px; } .auth-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; } .auth-sub { color: var(--text-3); font-size: 14px; margin: 0 0 22px; } /* Section header */ .sec-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; } .sec-title { font-size: 22px; font-weight: 700; letter-spacing: -0.022em; margin: 0; } .sec-sub { color: var(--text-3); font-size: 13.5px; margin-top: -2px; } /* Page section spacing */ .page > section + section { margin-top: 26px; } /* Group card grid */ .group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .group-card { background: var(--bg-elev); border-radius: var(--r-lg); padding: 16px; border: 0.5px solid var(--sep-soft); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; position: relative; overflow: hidden; } .group-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .group-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--cg, var(--tint)), transparent 60%); opacity: 0.08; pointer-events: none; } .group-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .group-meta { color: var(--text-3); font-size: 12.5px; margin-top: 4px; } .group-stats { margin-top: 14px; display: flex; gap: 16px; font-size: 12.5px; color: var(--text-3); } .group-stats b { color: var(--text); font-feature-settings: "tnum"; font-weight: 600; } /* Tabs (in-page) */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--sep-soft); margin-bottom: 18px; } .tabs button { padding: 10px 14px; font-size: 14px; color: var(--text-3); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs button.active { color: var(--text); border-bottom-color: var(--tint); } /* Empty state */ .empty { display: grid; place-items: center; padding: 60px 20px; color: var(--text-3); text-align: center; } .empty .em { font-size: 36px; opacity: 0.5; margin-bottom: 8px; } /* Bench */ .bench-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .bench-card { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-elev); border-radius: 10px; border: 0.5px solid var(--sep-soft); font-size: 13px; } .bench-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green); } .bench-card.resting .bench-dot { background: var(--orange); } /* Tag dot */ .dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; } /* Scrollbar polish */ .scroll::-webkit-scrollbar { width: 10px; height: 10px; } .scroll::-webkit-scrollbar-thumb { background: rgba(60,60,67,0.18); border-radius: 999px; border: 2px solid var(--bg); } .queue::-webkit-scrollbar { height: 8px; } .queue::-webkit-scrollbar-thumb { background: rgba(60,60,67,0.18); border-radius: 999px; } /* ============================================================ Responsive — collapse to mobile tabbar ============================================================ */ @media (max-width: 820px) { .app { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .sidebar { grid-row: 2; display: flex; flex-direction: row; align-items: stretch; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Always keep a gap above the home indicator: max(safe-area, 8px) */ padding: 6px max(4px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-right)); border-right: none; border-top: 0.5px solid var(--sep-soft); background: var(--bg-chrome); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); } .sidebar::-webkit-scrollbar { display: none; } .brand, .side-label, .side-footer, .side-credit { display: none; } /* Only primary nav becomes the tab bar; recent groups live on the dashboard */ .side-section-main { margin: 0; display: contents; } .side-section-groups { display: none; } .nav-item { flex: 1 1 0; width: auto; min-width: 62px; flex-direction: column; gap: 2px; padding: 6px 6px; font-size: 10.5px; border-radius: 0; background: transparent !important; color: var(--text-3); text-align: center; white-space: nowrap; } .nav-item.active { background: transparent !important; color: var(--tint); } .nav-item.active .nav-icon { color: var(--tint); } .nav-item .nav-icon { width: 24px; height: 24px; } /* Topbar clears the notch / status bar (viewport-fit=cover) */ .topbar { padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); height: calc(52px + env(safe-area-inset-top)); box-sizing: border-box; align-items: center; } .topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-actions { gap: 6px; } /* Content respects side notches in landscape too */ .scroll { padding: 16px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)); } .sec-title { font-size: 20px; } .court-net { grid-template-columns: 1fr; gap: 8px; } .court-divider { display: none; } .court-vs { padding: 4px 0; } /* Section headers: let title + action controls stack instead of colliding */ .sec-head { flex-wrap: wrap; gap: 10px; } .sec-head > .row { flex-wrap: wrap; } /* In-page tabs scroll horizontally rather than wrapping/clipping */ .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tabs::-webkit-scrollbar { display: none; } .tabs button { white-space: nowrap; flex: 0 0 auto; } } /* iPad / medium-width layout (821px – 1100px) Sidebar stays visible but narrower; content gets more breathing room. */ @media (min-width: 821px) and (max-width: 1100px) { .app { grid-template-columns: 200px 1fr; } .sidebar { padding: 10px 8px 14px; } .brand { padding: 6px 8px 14px; } .brand-name { font-size: 13px; } .brand-sub { font-size: 10px; } .nav-item { padding: 8px 10px; font-size: 13px; gap: 8px; } .side-label { font-size: 9.5px; } .scroll { padding: 16px 18px 48px; } .queue-card { flex: 0 0 240px; } .sec-head { flex-wrap: wrap; gap: 10px; } .sec-head > .row { flex-wrap: wrap; } .tile-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } /* Custom radio chips for matching mode */ .mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mode-card { padding: 16px; border-radius: var(--r-md); background: var(--bg-elev-2); border: 1.5px solid var(--sep); cursor: pointer; text-align: left; transition: all 0.15s; } .mode-card.active { border-color: var(--tint); background: var(--tint-soft); } .mode-card .mc-title { font-weight: 600; } .mode-card .mc-sub { font-size: 12px; color: var(--text-3); } /* Log row */ .log-row { display: grid; grid-template-columns: 90px 110px 120px 1fr; gap: 10px; padding: 10px 14px; border-top: 0.5px solid var(--sep-soft); font-size: 13px; align-items: center; } .log-row:first-child { border-top: none; } .log-row .log-time { color: var(--text-3); font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 12px; } .log-row .log-actor { color: var(--text-2); } .log-row .log-type { font-size: 11px; } /* Match pair card (queue) */ .pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; } .pair-side { background: var(--bg-elev-2); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 4px; } .pair-side .pname { font-size: 12.5px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; } .pair-side .pname > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pair-vs { font-size: 10px; color: var(--text-3); font-weight: 700; letter-spacing: 0.1em; } /* Result picker */ .result-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .result-card { padding: 18px; border-radius: 14px; text-align: center; border: 1.5px solid var(--sep); background: var(--bg-elev); cursor: pointer; } .result-card.win { border-color: var(--green); background: var(--green-soft); color: #1f9e3e; } .result-card.win .rc-title { font-weight: 700; } .result-card.lose { border-color: var(--red); background: var(--red-soft); color: var(--red); } /* Helper utilities */ .row { display: flex; gap: 10px; align-items: center; } .col { display: flex; flex-direction: column; gap: 10px; } .spread { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 14px; } .mt-3 { margin-top: 22px; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 14px; } .mb-3 { margin-bottom: 22px; } .muted { color: var(--text-3); } .small { font-size: 12.5px; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .center { text-align: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .grow { flex: 1; } .hidden { display: none !important; } /* Swap modal */ .swap-section { margin-top: 14px; } .swap-section-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 4px 8px; } .swap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .swap-card { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--bg-elev-2); border: 1.5px solid var(--sep-soft); border-radius: 12px; cursor: pointer; transition: border-color 0.15s, transform 0.05s, background 0.15s; text-align: left; } .swap-card:hover { border-color: var(--tint); background: var(--tint-soft); } .swap-card:active { transform: scale(0.98); } /* Manual queue creation — team panels (host hand-picks who VS whom) */ .manual-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px; } .manual-team { background: var(--bg-elev-2); border: 1.5px solid var(--sep-soft); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .manual-team.active { border-color: var(--tint); background: var(--tint-soft); } .manual-team-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; } .manual-vs { align-self: center; font-size: 13px; font-weight: 800; color: var(--text-3); padding: 0 2px; } .manual-slot { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border-radius: 10px; border: 1.5px dashed var(--sep-soft); background: var(--bg-elev-1); } .manual-slot.filled { border-style: solid; border-color: var(--sep); cursor: pointer; } .manual-slot.filled:hover { border-color: var(--red); } .manual-slot .icon-svg, .manual-slot svg { color: var(--text-3); flex-shrink: 0; } .manual-hint { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; color: var(--orange); background: var(--orange-soft, rgba(255,159,10,0.12)); border: 1px solid rgba(255,159,10,0.25); } .manual-hint svg { flex-shrink: 0; } @media (max-width: 560px) { .manual-teams { grid-template-columns: 1fr; } .manual-vs { padding: 4px 0; } } /* Add-court tile (placeholder card to add a new court) */ .add-court-tile { display: grid; place-items: center; text-align: center; background: transparent; border: 1.5px dashed var(--sep); color: var(--text-3); cursor: pointer; min-height: 220px; box-shadow: none; transition: border-color 0.15s, color 0.15s, background 0.15s; } .add-court-tile:hover { border-color: var(--tint); color: var(--tint); background: var(--tint-soft); } /* ============================================================ Recommendation rows ============================================================ */ .reco-row { position: relative; padding-left: 18px !important; } .reco-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; } .reco-row.reco-up::before { background: var(--green); } .reco-row.reco-down::before { background: var(--red); } .reco-row.reco-stable::before { background: var(--tint); } .reco-row.reco-hold::before { background: var(--text-4); } /* ============================================================ Share modal ============================================================ */ .share-grid { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; } .share-qr { display: grid; place-items: center; } .share-toggle-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-elev-2); border-radius: 12px; border: 0.5px solid var(--sep-soft); margin-bottom: 8px; } .share-content { position: relative; } .share-content.share-disabled .share-grid { opacity: 0.4; pointer-events: none; filter: grayscale(0.4); } .share-overlay-msg { text-align: center; margin-top: 14px; padding: 10px 14px; background: var(--orange-soft); border-radius: 10px; color: #c97000; font-size: 13px; font-weight: 500; } .public-error-icon { width: 64px; height: 64px; border-radius: 999px; background: var(--bg-inset); color: var(--text-3); display: grid; place-items: center; margin-bottom: 14px; } /* Viewer note on login screen */ .viewer-note { display: flex; align-items: center; gap: 8px; background: var(--tint-soft); color: var(--tint); padding: 10px 12px; border-radius: 10px; font-size: 12.5px; margin: 12px 0 6px; } @media (max-width: 640px) { .share-grid { grid-template-columns: 1fr; } .share-qr { justify-self: center; } } /* ============================================================ Public share view (read-only) ============================================================ */ .public-shell { min-height: 100vh; background: radial-gradient(ellipse at top, rgba(10,132,255,0.08), transparent 50%), var(--bg); } .public-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: var(--bg-chrome); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 0.5px solid var(--sep-soft); position: sticky; top: 0; z-index: 10; } .public-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .public-sub { font-size: 12.5px; color: var(--text-3); } .public-content { padding: 24px; max-width: 1400px; margin: 0 auto; } .public-section { margin-bottom: 28px; } .public-h3 { font-size: 14px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 10px; } .public-courts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; } .public-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; margin-bottom: 0; } .public-card { background: var(--bg-elev); border-radius: 12px; padding: 14px; border: 0.5px solid var(--sep-soft); box-shadow: var(--shadow-sm); } .public-empty { display: grid; place-items: center; min-height: 60vh; padding: 40px; text-align: center; color: var(--text-3); } .public-foot { text-align: center; padding: 18px; border-top: 0.5px solid var(--sep-soft); } /* ============================================================ Ownership / audit ============================================================ */ .owner-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--purple-soft); color: #8d3fc9; font-size: 11.5px; font-weight: 500; } .log-row-clickable { cursor: pointer; transition: background 0.12s; } .log-row-clickable:hover { background: var(--bg-elev-2); } .log-pagination { padding: 10px 14px; border-top: 0.5px solid var(--sep-soft); justify-content: center; align-items: center; background: var(--bg-elev-2); } .log-detail { padding: 12px 14px; background: var(--bg-elev-2); border-top: 0.5px solid var(--sep-soft); font-size: 12px; color: var(--text-2); } .log-detail code { background: var(--bg-elev); border: 0.5px solid var(--sep-soft); padding: 1px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--text); } .log-detail b { color: var(--text-3); font-weight: 600; margin-right: 4px; } .log-detail-full { color: var(--text); font-size: 13px; line-height: 1.5; padding-bottom: 8px; border-bottom: 0.5px solid var(--sep-soft); margin-bottom: 8px; } .log-desc-cell { display: flex; align-items: center; gap: 6px; min-width: 0; } .log-desc-cell > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .log-expand-hint { flex-shrink: 0; opacity: 0.5; } /* ============================================================ Tooltip (InfoTip) ============================================================ */ .infotip-wrap { display: inline-flex; align-items: center; gap: 4px; position: relative; } .infotip-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: help; color: var(--text-3); border-radius: 999px; transition: color 0.15s, background 0.15s; } .infotip-btn:hover, .infotip-btn.open { color: var(--tint); background: var(--tint-soft); } @media (hover: none) { .infotip-btn { cursor: pointer; } } .infotip-pop { position: absolute; z-index: 200; width: max-content; max-width: 260px; padding: 8px 12px; background: rgba(28,28,30,0.95); color: white; border-radius: 10px; font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; box-shadow: 0 8px 28px rgba(0,0,0,0.2); backdrop-filter: blur(8px); animation: tipIn 0.14s ease-out; pointer-events: none; white-space: normal; } @keyframes tipIn { from { opacity: 0; transform: translate(-50%, 4px); } to { opacity: 1; transform: translate(-50%, 0); } } .infotip-top, .infotip-bottom { left: 50%; transform: translateX(-50%); } .infotip-top { bottom: calc(100% + 8px); } .infotip-bottom { top: calc(100% + 8px); } .infotip-top::after, .infotip-bottom::after { content: ""; position: absolute; left: 50%; margin-left: -5px; border: 5px solid transparent; } .infotip-top::after { top: 100%; border-top-color: rgba(28,28,30,0.95); } .infotip-bottom::after { bottom: 100%; border-bottom-color: rgba(28,28,30,0.95); } @media (max-width: 640px) { .infotip-pop { max-width: 220px; font-size: 12.5px; } } @media (max-width: 720px) { .public-head { padding: 12px 16px; } .public-content { padding: 14px; } .public-title { font-size: 16px; } } /* ============================================================ Responsive data tables (Users / Admin Groups) Desktop: columnar rows. Mobile: each row reflows to a stacked card. ============================================================ */ .dtable .dhead, .dtable .drow { display: flex; align-items: center; gap: 10px; } .dcol { flex: 0 0 auto; } .dcol-main { flex: 1 1 auto; min-width: 0; } .dcol-actions { display: flex; gap: 4px; justify-content: flex-end; } /* On desktop the meta wrapper is transparent so its columns sit inline */ .dmeta { display: contents; } .dmeta-label { display: none; } /* Column widths (shared by header + rows) */ .dc-avatar { width: 36px; } .dc-role { width: 108px; } .dc-exp { width: 124px; } .dc-status { width: 84px; display: flex; justify-content: center; } .dc-count { width: 64px; display: flex; justify-content: center; } .dc-type { width: 78px; display: flex; justify-content: center; } .dc-date { width: 70px; display: flex; justify-content: center; } .dc-act { width: 78px; } .dc-vtime { width: 64px; } .dc-vip { width: 132px; } .dc-vsession { width: 124px; } .dc-vua { width: 140px; } @media (max-width: 820px) { .dtable .dhead { display: none; } .dtable .drow { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; padding: 14px; } .dcol-main { flex: 1 1 60%; order: 1; } .dcol-actions { order: 2; margin-left: auto; } .dmeta { display: flex; order: 3; flex: 1 1 100%; flex-wrap: wrap; gap: 12px 18px; padding-top: 4px; border-top: 0.5px solid var(--sep-soft); } .dmeta > .dcol { width: auto !important; justify-content: flex-start; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .dmeta-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-4); } } /* Audit log rows reflow on narrow screens */ @media (max-width: 560px) { .log-head { display: none !important; } .log-row { grid-template-columns: auto 1fr; grid-template-areas: "time type" "actor actor" "desc desc"; gap: 4px 10px; padding: 12px 14px; } .log-row > :nth-child(1) { grid-area: time; } .log-row > :nth-child(2) { grid-area: type; justify-self: start; } .log-row > :nth-child(3) { grid-area: actor; } .log-row > :nth-child(4) { grid-area: desc; } } /* Stats: tighten the per-player bar-chart name column on phones */ @media (max-width: 560px) { .stat-bar-name { width: 92px !important; } } /* ============================================================ Profile popover (sidebar footer) ============================================================ */ .profile-trigger { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; background: none; border: none; cursor: pointer; transition: background 0.12s; } .profile-trigger:hover { background: rgba(60,60,67,0.06); } .profile-popover { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; background: var(--bg-elev); border: 0.5px solid var(--sep); border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.04); overflow: hidden; z-index: 200; animation: pop-in 0.15s cubic-bezier(.34,1.56,.64,1); } @keyframes pop-in { from { opacity: 0; transform: scale(0.94) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } } .profile-pop-info { padding: 14px 14px 10px; } .profile-pop-divider { height: 0.5px; background: var(--sep-soft); margin: 0 8px; } .profile-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--text); text-align: left; background: none; border: none; cursor: pointer; transition: background 0.1s; } .profile-pop-item:hover { background: var(--bg-elev-2); } .profile-pop-item.danger { color: var(--red); } /* Compact "rounds played" badge shown after a player's name (court + queue). */ .play-count { flex-shrink: 0; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--bg-inset); color: var(--text-3); font-variant-numeric: tabular-nums; } .profile-pop-theme { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; } .profile-pop-theme-label { font-size: 13px; font-weight: 500; color: var(--text-3); } /* ============================================================ Tutorial Tour ============================================================ */ .tour-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); } .tour-spotlight { position: fixed; border-radius: 10px; box-shadow: 0 0 0 4px var(--tint), 0 0 0 9999px rgba(0,0,0,0.5); pointer-events: none; z-index: 9001; transition: all 0.25s cubic-bezier(.4,0,.2,1); } .tour-card { background: var(--bg-elev); border: 0.5px solid var(--sep); border-radius: 18px; padding: 22px 20px 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.22); z-index: 9100; max-width: 320px; animation: pop-in 0.18s cubic-bezier(.34,1.56,.64,1); } .tour-card-center { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(340px, calc(100vw - 40px)); } /* On mobile keep the center card in the upper 2/3 so the spotlight on the bottom tab bar stays visible below the card */ @media (max-width: 599px) { .tour-card-center { top: 38%; } } .tour-card-anchored { position: fixed; } .tour-step-count { font-size: 11px; font-weight: 600; color: var(--tint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .tour-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; line-height: 1.3; } .tour-body { font-size: 14px; color: var(--text-2); line-height: 1.6; margin-bottom: 18px; white-space: pre-line; } .tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tour-dots { display: flex; gap: 5px; justify-content: center; margin-top: 14px; } .tour-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--sep); transition: all 0.2s; } .tour-dot.active { background: var(--tint); width: 18px; } /* ============================================================ Groups screen ============================================================ */ .group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } @media (max-width: 820px) { .group-grid { grid-template-columns: 1fr; } }