/* ============================================================ CUSTOM PROPERTIES ============================================================ */ :root { --color-bg: #f4f6f9; --color-surface: #ffffff; --color-border: #e2e6ec; --color-text: #1a2233; --color-text-muted: #6b7280; --color-primary: #3355ff; --color-primary-dark: #2540c7; --color-danger: #d63b3b; --color-gold: #b8860b; --color-gold-bg: #fff6dd; --color-silver: #6b7280; --color-silver-bg: #f1f3f6; --color-bronze: #a15c2a; --color-bronze-bg: #fbe9de; --shadow-card: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04); --radius-lg: 16px; --radius-md: 10px; } body.dark-theme { --color-bg: #10141c; --color-surface: #1a2030; --color-border: #2b3145; --color-text: #eef1f8; --color-text-muted: #9aa3b8; --color-primary: #6b85ff; --color-primary-dark: #8ea0ff; --color-danger: #ff6b6b; --color-gold: #e8c15a; --color-gold-bg: #3a3116; --color-silver: #c3c9d6; --color-silver-bg: #262c3d; --color-bronze: #e2a374; --color-bronze-bg: #3a2618; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4); } @media (prefers-color-scheme: dark) { body:not(.light-theme):not(.dark-theme) { --color-bg: #10141c; --color-surface: #1a2030; --color-border: #2b3145; --color-text: #eef1f8; --color-text-muted: #9aa3b8; } } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--color-bg); color: var(--color-text); transition: background 0.2s ease, color 0.2s ease; } #app { max-width: 640px; margin: 0 auto; padding-bottom: 3rem; } /* ============================================================ FOOTER ============================================================ */ .app-footer { max-width: 640px; margin: 0 auto; padding: 0.5rem 1rem 1.5rem; text-align: center; } .footer-line { margin: 0.2rem 0; font-size: 0.72rem; color: var(--color-text-muted); } /* ============================================================ PIN LOCK SCREEN ============================================================ */ /* Visibility is driven by the `locked` class on , set by an inline script before paint. Default (unlocked): app shows, lock hidden. This guarantees the page is never blank even if something fails. */ .lock-screen { display: none; } html.locked .lock-screen { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--color-bg); } html.locked #app { display: none; } /* View-only role: hide the destructive/edit-only controls entirely. */ html.view-only #reset-week-btn { display: none; } .view-only-note { background: var(--color-bg); border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: 0.9rem 1rem; color: var(--color-text-muted); font-size: 0.92rem; } .role-btn { display: inline-block; margin: 0.6rem auto 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.8rem; font-weight: 600; font-family: inherit; color: var(--color-text); cursor: pointer; box-shadow: var(--shadow-card); } html.view-only .role-btn { border-color: var(--color-bronze); color: var(--color-bronze); } .lock-box { width: 100%; max-width: 320px; text-align: center; } .lock-box.shake { animation: lock-shake 0.4s ease; } @keyframes lock-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } } .lock-logo { font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-bottom: 0.5rem; } .lock-prompt { color: var(--color-text-muted); font-size: 0.95rem; margin: 0 0 1.5rem; } .pin-dots { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1rem; } .pin-dot { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--color-text-muted); transition: background 0.1s ease, border-color 0.1s ease; } .pin-dot.filled { background: var(--color-primary); border-color: var(--color-primary); } .lock-error { color: var(--color-danger); font-size: 0.9rem; font-weight: 600; margin: 0 0 1rem; min-height: 1.1rem; } .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 0.5rem; } .key { aspect-ratio: 1; border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: 50%; font-size: 1.6rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: transform 0.05s ease, background 0.1s ease; } .key:active { transform: scale(0.94); background: var(--color-bg); } .key-blank { border: none; background: transparent; cursor: default; } .key-del { font-size: 1.3rem; border-color: transparent; } /* ============================================================ HEADER ============================================================ */ .app-header { position: relative; text-align: center; padding: 2rem 1.25rem 1.25rem; } .theme-toggle { position: absolute; top: 1rem; right: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 50%; width: 2.25rem; height: 2.25rem; font-size: 1.1rem; cursor: pointer; box-shadow: var(--shadow-card); } .app-logo { font-size: 1.6rem; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 0.4rem; } .app-tagline { color: var(--color-text-muted); margin: 0.35rem 0 0; font-size: 0.95rem; } /* ============================================================ LAYOUT ============================================================ */ .main-wrap { padding: 0 1rem; display: flex; flex-direction: column; gap: 1.25rem; } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.25rem; } .card h2 { margin: 0 0 0.75rem; font-size: 1.05rem; } .card-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .card-header-row h2 { margin: 0; } .muted { color: var(--color-text-muted); font-size: 0.9rem; } /* ============================================================ DAY TABS ============================================================ */ .day-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; } .day-tab { position: relative; background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: 0.6rem 0.25rem; font-size: 0.9rem; font-weight: 700; color: var(--color-text-muted); cursor: pointer; transition: all 0.15s ease; } .day-tab.active { border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); } .today-dot { position: absolute; top: 0.3rem; right: 0.35rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-gold); } .day-note { margin: -0.5rem 0 0; font-size: 0.85rem; color: var(--color-text-muted); text-align: center; } /* ============================================================ GAME LIST ============================================================ */ .session-heading { margin: 0.5rem 0 0.1rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .session-empty { margin: 0.25rem 0 0; } #game-list { display: flex; flex-direction: column; gap: 0.75rem; } .game-card { display: block; width: 100%; text-align: left; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1rem 1.1rem; cursor: pointer; font-family: inherit; color: var(--color-text); transition: border-color 0.15s ease, transform 0.1s ease; } .game-card:hover { border-color: var(--color-primary); } .game-card:active { transform: scale(0.99); } .game-card.done { border-color: color-mix(in srgb, var(--color-gold) 45%, var(--color-border)); } .game-card-top { display: flex; align-items: center; gap: 0.65rem; } .game-emoji { font-size: 1.5rem; } .game-card-titles { flex: 1; display: flex; flex-direction: column; min-width: 0; } .game-name { font-weight: 700; font-size: 1rem; } .game-loc { font-size: 0.8rem; color: var(--color-text-muted); } .format-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.25rem 0.5rem; border-radius: 999px; white-space: nowrap; } .badge-bracket { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); color: var(--color-primary); } .badge-tally { background: var(--color-gold-bg); color: var(--color-gold); } .badge-podium { background: var(--color-bronze-bg); color: var(--color-bronze); } .game-headline { margin: 0.55rem 0 0; font-size: 0.88rem; color: var(--color-text-muted); } .game-result-line { margin-top: 0.6rem; font-size: 0.85rem; font-weight: 600; background: var(--color-gold-bg); color: var(--color-gold); border-radius: var(--radius-md); padding: 0.45rem 0.6rem; } .game-progress-line { margin-top: 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--color-primary); } .messtival-banner { background: linear-gradient(90deg, var(--color-gold-bg), var(--color-bronze-bg)); color: var(--color-bronze); border-radius: var(--radius-md); padding: 0.7rem 0.9rem; font-size: 0.9rem; font-weight: 600; } .messtival-tag { background: var(--color-gold-bg); color: var(--color-gold); border-radius: var(--radius-md); padding: 0.5rem 0.75rem; font-size: 0.85rem; font-weight: 600; } /* ============================================================ HAPPENING NOW BANNER ============================================================ */ .now-banner { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 0.85rem 1rem; margin-bottom: 1rem; } .now-eyebrow { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.4rem; } .now-main { display: flex; align-items: flex-start; gap: 0.65rem; } .now-emoji { font-size: 1.7rem; line-height: 1.15; } .now-label { font-weight: 700; font-size: 1.05rem; line-height: 1.3; } .now-time { color: var(--color-text-muted); font-weight: 600; font-size: 0.85rem; white-space: nowrap; } .now-next { margin-top: 0.15rem; color: var(--color-text-muted); font-size: 0.85rem; } .now-stations { margin-top: 0.75rem; display: grid; gap: 0.4rem; } .now-station { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; background: var(--color-bg); border-radius: var(--radius-md); padding: 0.45rem 0.6rem; } .now-station-name { font-weight: 700; font-size: 0.88rem; flex: 0 0 auto; } .now-kids { display: flex; flex-wrap: wrap; gap: 0.3rem; } .kid-chip { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.12rem 0.6rem; font-size: 0.8rem; font-weight: 600; } /* ── Happening Now: tappable affordance ── */ .now-banner { cursor: pointer; transition: box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease; } .now-banner:hover { border-left-color: var(--color-primary-dark); box-shadow: 0 4px 14px rgba(16, 24, 40, 0.12), 0 2px 4px rgba(16, 24, 40, 0.06); } .now-banner:active { transform: scale(0.992); } .now-banner:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .now-eyebrow-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; } .now-eyebrow-row .now-eyebrow { margin-bottom: 0; } .now-open-hint { font-size: 0.72rem; font-weight: 700; color: var(--color-text-muted); white-space: nowrap; } /* ============================================================ FULL WEEK SCHEDULE (bottom sheet) ============================================================ */ body.no-scroll { overflow: hidden; } .schedule-overlay { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: flex-end; justify-content: center; } .schedule-backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, 0.55); backdrop-filter: blur(2px); animation: sched-fade 0.2s ease; } .schedule-sheet { position: relative; width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column; background: var(--color-bg); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 40px rgba(16, 24, 40, 0.25); animation: sched-slide 0.28s cubic-bezier(0.22, 1, 0.36, 1); overflow: hidden; } @keyframes sched-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes sched-slide { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .schedule-backdrop, .schedule-sheet { animation: none; } } .schedule-header { flex: 0 0 auto; padding: 0.5rem 1rem 0.75rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .schedule-grabber { width: 2.5rem; height: 0.3rem; border-radius: 999px; background: var(--color-border); margin: 0.25rem auto 0.75rem; } .schedule-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .schedule-title { margin: 0; font-size: 1.2rem; font-weight: 800; } .schedule-close { border: none; background: var(--color-bg); color: var(--color-text-muted); width: 2rem; height: 2rem; border-radius: 50%; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } .schedule-close:hover { background: var(--color-border); color: var(--color-text); } .schedule-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; } .sched-day-chip { position: relative; background: var(--color-bg); border: 1.5px solid transparent; border-radius: var(--radius-md); padding: 0.5rem 0.2rem; font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted); cursor: pointer; transition: all 0.15s ease; } .sched-day-chip.active { border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); } .schedule-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1rem 1rem 2rem; } .sched-day-title { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 800; } .sched-day-tag { color: var(--color-text-muted); font-weight: 600; font-size: 0.85rem; } .sched-timeline { position: relative; } .sched-block { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.65rem; } .sched-rail { display: flex; flex-direction: column; align-items: center; } .sched-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--color-border); margin-top: 0.9rem; flex: 0 0 auto; z-index: 1; } /* Connecting line between dots. */ .sched-rail::after { content: ''; flex: 1 1 auto; width: 2px; background: var(--color-border); margin-top: -0.1rem; } .sched-block:last-child .sched-rail::after { display: none; } .sched-card { padding: 0.6rem 0.8rem 0.75rem; margin-bottom: 0.6rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); min-width: 0; } .sched-time { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.01em; } .sched-now-pill { background: var(--color-primary); color: #fff; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.08rem 0.45rem; border-radius: 999px; } .sched-label { margin-top: 0.2rem; font-size: 0.98rem; font-weight: 700; line-height: 1.3; } .sched-emoji { font-size: 1.05rem; } /* Current block: highlighted card + filled primary dot. */ .sched-block.now .sched-card { border-color: var(--color-primary); border-left-width: 4px; background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)); box-shadow: var(--shadow-card); } .sched-block.now .sched-dot { background: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 22%, transparent); } /* Past blocks: dimmed so the eye lands on what's next. */ .sched-block.past .sched-card { opacity: 0.55; } .sched-block.past .sched-dot { background: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); } /* Meal blocks get a warm accent. */ .sched-block.meal .sched-card { background: color-mix(in srgb, var(--color-gold) 8%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-gold) 30%, var(--color-border)); } .sched-block.meal.now .sched-card { border-color: var(--color-primary); } /* Competition games listed inside a games block. */ .sched-games { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; } .sched-game-chip { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.18rem 0.6rem; font-size: 0.78rem; font-weight: 600; } .sched-game-chip.played { background: var(--color-gold-bg); border-color: color-mix(in srgb, var(--color-gold) 45%, var(--color-border)); color: var(--color-gold); } /* Electives listed inside an elective block. */ .sched-stations { margin-top: 0.5rem; display: grid; gap: 0.3rem; } .sched-station { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; font-size: 0.82rem; } .sched-station-name { font-weight: 700; flex: 0 0 auto; } .sched-station-kids { color: var(--color-text-muted); font-weight: 500; } /* ============================================================ GAME VIEW ============================================================ */ .back-btn { display: inline-block; margin-bottom: 0.75rem; text-decoration: none; font-weight: 600; } .game-view-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .game-view-header h2 { margin: 0; font-size: 1.25rem; } .game-view-header p { margin: 0.2rem 0 0; } .game-emoji-lg { font-size: 2.2rem; } .rules-details { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.75rem 1rem; margin: 0.75rem 0 1rem; font-size: 0.92rem; } .rules-details summary { cursor: pointer; font-weight: 700; font-size: 0.95rem; } .rules-details h4 { margin: 0.85rem 0 0.25rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } .rules-details ul { margin: 0.25rem 0; padding-left: 1.2rem; } .rules-details li { margin-bottom: 0.3rem; } /* ============================================================ BUTTONS ============================================================ */ .primary-btn { width: 100%; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-md); padding: 0.85rem 1rem; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .primary-btn:hover { background: var(--color-primary-dark); } .secondary-btn { flex: 1; background: var(--color-surface); color: var(--color-primary); border: 1.5px solid var(--color-primary); border-radius: var(--radius-md); padding: 0.7rem 0.85rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .secondary-btn:hover { background: var(--color-gold-bg); } .link-btn { background: none; border: none; color: var(--color-primary); font-size: 0.85rem; cursor: pointer; padding: 0; text-decoration: underline; } .danger-link { color: var(--color-danger); } /* ============================================================ STANDINGS TABLE ============================================================ */ .standings-hint { margin-top: 0; } .sync-status { margin: 0 0 0.75rem; font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); } .sync-status.synced { color: var(--color-primary); } .standings-actions { display: flex; gap: 0.6rem; margin-bottom: 0.85rem; } .standings-actions .secondary-btn { font-size: 0.88rem; padding: 0.6rem 0.5rem; } .copy-matchup-btn { width: 100%; margin-top: 0.6rem; background: transparent; border: 1.5px dashed var(--color-bronze); color: var(--color-bronze); border-radius: var(--radius-md); padding: 0.6rem 0.75rem; font-size: 0.9rem; font-weight: 600; font-family: inherit; cursor: pointer; } .copy-matchup-btn:disabled { opacity: 0.7; } .table-scroll { overflow-x: auto; } .standings-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .standings-table th, .standings-table td { padding: 0.5rem 0.4rem; text-align: left; border-bottom: 1px solid var(--color-border); } .standings-table th { color: var(--color-text-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; } .rank-col { width: 1.75rem; text-align: center !important; color: var(--color-text-muted); } .medal-col { width: 2.25rem; text-align: center !important; font-variant-numeric: tabular-nums; } .points-col { width: 2.75rem; text-align: center !important; font-variant-numeric: tabular-nums; font-weight: 700; } .medal-points { margin-left: auto; font-size: 0.85rem; font-weight: 600; opacity: 0.85; white-space: nowrap; } .team-name-input { width: 100%; border: 1px solid transparent; background: transparent; color: var(--color-text); font-size: 0.95rem; font-family: inherit; padding: 0.3rem 0.4rem; border-radius: 6px; } .team-name-input:hover, .team-name-input:focus { border-color: var(--color-border); background: var(--color-bg); outline: none; } .team-counselor-input { width: 100%; border: 1px solid transparent; background: transparent; color: var(--color-text-muted); font-size: 0.78rem; font-family: inherit; padding: 0.05rem 0.4rem 0.2rem; border-radius: 6px; } .team-counselor-input:hover, .team-counselor-input:focus { border-color: var(--color-border); background: var(--color-bg); outline: none; } .chip-sub { display: block; font-size: 0.72rem; font-weight: 500; color: var(--color-text-muted); line-height: 1.3; } .call-next-counselors { margin: -0.5rem 0 0.85rem; font-size: 0.85rem; color: var(--color-text-muted); } /* ============================================================ BRACKET WIZARD ============================================================ */ .bracket-steps { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 1.25rem; flex-wrap: wrap; font-size: 0.78rem; } .wizard-step { padding: 0.3rem 0.6rem; border-radius: 999px; background: var(--color-bg); color: var(--color-text-muted); font-weight: 600; } .wizard-step.active { background: var(--color-primary); color: #fff; } .wizard-step.done { background: var(--color-gold-bg); color: var(--color-gold); } .wizard-step-arrow { color: var(--color-text-muted); } .wizard-footer { margin-top: 1.25rem; text-align: center; } .team-chip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin: 0.75rem 0 1rem; } .team-chip { background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: 0.7rem 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--color-text); cursor: pointer; font-family: inherit; transition: all 0.15s ease; } .team-chip.selected { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); color: var(--color-primary); } .matchup-callout { background: var(--color-gold-bg); border-radius: var(--radius-md); padding: 1rem; margin: 0.75rem 0; text-align: center; } .call-next-label { margin: 0 0 0.25rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); font-weight: 700; } .call-next-teams { margin: 0 0 0.85rem; font-size: 1.15rem; font-weight: 700; } .call-next-teams .vs { color: var(--color-text-muted); font-weight: 500; font-size: 0.9rem; margin: 0 0.3rem; } .winner-btn-row { display: flex; gap: 0.6rem; } .completed-matches { margin-top: 1rem; font-size: 0.9rem; } .completed-matches ul { margin: 0.4rem 0; padding-left: 1.1rem; } .bye-note, .bronze-note { background: var(--color-bg); border-radius: var(--radius-md); padding: 0.7rem 0.9rem; font-size: 0.9rem; } /* ============================================================ TIMERS, STOPWATCH & COUNTERS ============================================================ */ .sound-toggle { right: auto; left: 1rem; } .tool-box { border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); padding: 1rem; margin: 0 0 1rem; text-align: center; background: var(--color-bg); } .tool-box.alarming { animation: alarm-flash 0.5s ease-in-out infinite alternate; border-color: var(--color-danger); } @keyframes alarm-flash { from { background: var(--color-bg); } to { background: color-mix(in srgb, var(--color-danger) 25%, var(--color-bg)); } } .tool-label { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } .round-label { margin-top: 0.35rem; font-size: 1rem; font-weight: 700; color: var(--color-primary); } .big-clock { font-size: 3.4rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; margin: 0.25rem 0; } .preset-row { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 0.75rem; } .preset-chip { background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 999px; padding: 0.45rem 0.9rem; font-size: 0.9rem; font-weight: 700; color: var(--color-text-muted); cursor: pointer; font-family: inherit; } .preset-chip.selected { border-color: var(--color-primary); color: var(--color-primary); } .preset-chip:disabled { opacity: 0.4; cursor: default; } .timer-btn-row { display: flex; gap: 0.6rem; } .timer-main-btn { flex: 1; min-height: 3.75rem; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-md); font-size: 1.2rem; font-weight: 700; font-family: inherit; cursor: pointer; } .timer-main-btn.alarm-btn { background: var(--color-danger); } .timer-main-btn.stop-lap-btn { background: var(--color-danger); } .timer-side-btn { min-height: 3.75rem; padding: 0 1rem; background: var(--color-surface); color: var(--color-text); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer; } .sw-total-line { font-size: 0.95rem; color: var(--color-text-muted); margin-bottom: 0.75rem; } .sw-total-line strong { color: var(--color-text); font-variant-numeric: tabular-nums; } .sw-laps { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 0.75rem; } .sw-actions { display: flex; justify-content: center; gap: 1.25rem; margin-top: 0.6rem; } .sw-save-row { display: flex; gap: 0.6rem; margin-top: 0.75rem; } .sw-save-row select { flex: 1; border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 0.95rem; font-family: inherit; padding: 0.45rem 0.5rem; border-radius: var(--radius-md); } .counter-btn-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .counter-btn { flex: 1; min-height: 3.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-md); border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 1.15rem; font-weight: 800; font-family: inherit; cursor: pointer; transition: transform 0.05s ease; } .counter-btn:active { transform: scale(0.96); } .counter-btn.plus { border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); } .counter-btn.minus { max-width: 5rem; color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border)); } .counter-btn-sub { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; } .score-input-row.with-counter { flex-direction: column; align-items: stretch; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.6rem 0.7rem; } .score-row-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; } /* ============================================================ PICTIONARY ROUND RUNNER ============================================================ */ .pic-team-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0.75rem 0; } .pic-team-chip { padding: 0.55rem 0.3rem; font-size: 0.85rem; } .pic-team-chip:disabled { opacity: 0.45; cursor: default; } .pic-prompt-card { background: var(--color-gold-bg); border-radius: var(--radius-md); padding: 0.85rem 1rem; margin: 0.5rem 0; } .pic-prompt-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .pic-prompt-word { font-size: 1.8rem; font-weight: 800; color: var(--color-gold); line-height: 1.2; } .pic-done-banner { background: var(--color-gold-bg); color: var(--color-gold); border-radius: var(--radius-md); padding: 0.75rem 1rem; font-size: 0.95rem; margin: 0.5rem 0 0.75rem; } .pic-export-hint { margin: 0.5rem 0 0; } .pic-items { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.85rem; text-align: left; } .pic-item-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.45rem 0.6rem; background: var(--color-surface); } .pic-item-text { font-weight: 600; font-variant-numeric: tabular-nums; } .pic-photo-btn { border: 1.5px solid var(--color-primary); background: var(--color-surface); color: var(--color-primary); border-radius: 999px; padding: 0.4rem 0.75rem; font-size: 0.8rem; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap; } .pic-photo-btn.has-photo { border-color: var(--color-gold); background: var(--color-gold-bg); color: var(--color-gold); } /* ============================================================ SCORE ENTRY (tally) ============================================================ */ .unit-tag { font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); } .score-input-grid { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0 1rem; } .score-input-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.95rem; font-weight: 600; } .score-input-row input { width: 7rem; border: 1.5px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font-size: 1rem; font-family: inherit; padding: 0.5rem 0.6rem; border-radius: var(--radius-md); text-align: right; } .score-input-row input:focus { border-color: var(--color-primary); outline: none; } .live-ranking { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; } .rank-pill { font-size: 0.8rem; font-weight: 600; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.25rem 0.6rem; } .tie-note { font-size: 0.85rem; font-weight: 600; color: var(--color-bronze); background: var(--color-bronze-bg); border-radius: var(--radius-md); padding: 0.5rem 0.7rem; } .medal-picker-heading { margin-bottom: 0.5rem; } /* ============================================================ MEDAL PICKER ============================================================ */ .medal-picker { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0 1rem; } .medal-slot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border-radius: var(--radius-md); padding: 0.6rem 0.8rem; font-weight: 700; font-size: 0.95rem; } .medal-slot-gold { background: var(--color-gold-bg); color: var(--color-gold); } .medal-slot-silver { background: var(--color-silver-bg); color: var(--color-silver); } .medal-slot-bronze { background: var(--color-bronze-bg); color: var(--color-bronze); } .medal-slot select { flex: 1; max-width: 60%; border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 0.95rem; font-family: inherit; padding: 0.45rem 0.5rem; border-radius: var(--radius-md); } .entry-error { color: var(--color-danger); font-size: 0.9rem; font-weight: 600; } /* ============================================================ MEDAL SUMMARY ============================================================ */ .medal-summary { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0 1.25rem; } .medal-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 1.05rem; } .gold-row { background: var(--color-gold-bg); color: var(--color-gold); } .silver-row { background: var(--color-silver-bg); color: var(--color-silver); } .bronze-row { background: var(--color-bronze-bg); color: var(--color-bronze); } .score-recap { margin: 0.25rem 0 1rem; padding-left: 1.2rem; font-size: 0.9rem; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 420px) { .winner-btn-row { flex-direction: column; } .score-input-row input { width: 5.5rem; } }