:root { --navy: #0b2b40; --navy-deep: #071b2b; --gold: #c9a227; --gold-light: #e6c866; --cream: #f6f1e7; --ink: #1c2a33; --muted: #6b7c87; --ok: #2f8f5b; --danger: #b3462c; --hairline: #eee3c9; --input-border: #d8d0bf; --card-radius: 16px; --shadow: 0 6px 20px rgba(7, 27, 43, 0.15); } /* Per-guest theme override. Applied to by app.js right after a guest's identity is known (login, PIN set, or a resumed session) -- everything else in this file already reads from the custom properties above, so redeclaring them here on body is enough to recolor the whole app for just that one guest. Add another block the same way to support a different theme for someone else later. */ body[data-theme="pink"] { --navy: #9c1d5e; --navy-deep: #5c0f39; --gold: #ff6fa5; --gold-light: #ffb5d3; --cream: #fff2f7; --hairline: #ffd6e8; --input-border: #ffb8d6; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; background: var(--navy-deep); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } body { background: radial-gradient(circle at top, var(--navy) 0%, var(--navy-deep) 70%); min-height: 100vh; display: flex; flex-direction: column; align-items: center; } .app { width: 100%; max-width: 480px; min-height: 100vh; background: var(--cream); display: flex; flex-direction: column; box-shadow: var(--shadow); } header.app-header { background: var(--navy); color: var(--cream); /* Extra bottom padding makes room for the "Switch person" pill, which sits in its own row below the title/subtitle instead of overlapping them. */ padding: 20px 20px 48px; text-align: center; position: relative; } header.app-header h1 { margin: 0; font-size: 1.3rem; letter-spacing: 0.04em; text-transform: uppercase; } header.app-header .subtitle { margin: 4px 0 0; font-size: 0.8rem; color: var(--gold-light); letter-spacing: 0.06em; } header.app-header .stamp { position: absolute; bottom: 12px; right: 16px; font-size: 0.7rem; color: var(--gold-light); border: 1px solid var(--gold-light); border-radius: 999px; padding: 4px 10px; background: transparent; cursor: pointer; } main { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 16px; } .screen { display: none; flex-direction: column; gap: 16px; } .screen.active { display: flex; } .card { background: #fff; border-radius: var(--card-radius); padding: 18px; box-shadow: var(--shadow); } .muted { color: var(--muted); font-size: 0.85rem; } .roster-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .roster-btn { padding: 16px 10px; border-radius: 12px; border: 2px solid transparent; background: var(--navy); color: var(--cream); font-size: 1rem; font-weight: 600; cursor: pointer; } .roster-btn.claimed { background: #fff; color: var(--navy); border-color: var(--navy); } .roster-btn:active { transform: scale(0.98); } .pin-dots { display: flex; justify-content: center; gap: 14px; margin: 10px 0; } .pin-dots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--navy); background: transparent; } .pin-dots span.filled { background: var(--navy); } .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .keypad button { padding: 18px 0; font-size: 1.4rem; border-radius: 12px; border: none; background: var(--navy); color: var(--cream); font-weight: 600; } .keypad button.ghost { background: transparent; color: var(--navy); font-size: 1rem; } button.primary { background: var(--gold); color: var(--navy-deep); border: none; border-radius: 12px; padding: 14px 18px; font-size: 1.05rem; font-weight: 700; cursor: pointer; } button.secondary { background: transparent; color: var(--navy); border: 2px solid var(--navy); border-radius: 12px; padding: 12px 18px; font-size: 0.95rem; font-weight: 600; cursor: pointer; } button.link { background: none; border: none; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 0.85rem; padding: 4px; } button:disabled { opacity: 0.5; cursor: default; } .error-text { color: var(--danger); font-size: 0.85rem; min-height: 1.1em; } .big-log-btn { width: 100%; padding: 26px 0; font-size: 1.3rem; border-radius: var(--card-radius); background: var(--gold); color: var(--navy-deep); border: none; font-weight: 800; letter-spacing: 0.03em; cursor: pointer; box-shadow: var(--shadow); } .stat-row { display: flex; justify-content: space-between; align-items: baseline; } .stat-row .count { font-size: 2.2rem; font-weight: 800; color: var(--navy); } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .chip { padding: 10px 14px; border-radius: 999px; border: 2px solid var(--navy); background: #fff; color: var(--navy); font-size: 0.9rem; cursor: pointer; } .chip.selected { background: var(--navy); color: var(--cream); } input[type="text"], input[type="tel"] { width: 100%; padding: 12px 14px; border-radius: 10px; border: 2px solid var(--input-border); font-size: 1rem; background: #fff; } label { font-size: 0.85rem; font-weight: 600; color: var(--navy); margin-bottom: 4px; display: block; } nav.tabbar { display: flex; border-top: 1px solid var(--hairline); background: #fff; } nav.tabbar button { flex: 1; background: none; border: none; padding: 12px 4px 10px; font-size: 0.7rem; color: var(--muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; } nav.tabbar button .icon { font-size: 1.2rem; } nav.tabbar button.active { color: var(--navy); font-weight: 700; } .leaderboard-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .leaderboard-rank { width: 22px; font-weight: 700; color: var(--muted); text-align: center; } .leaderboard-name-bar { flex: 1; } .leaderboard-name { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: 3px; } .leaderboard-bar-track { height: 8px; background: var(--hairline); border-radius: 999px; overflow: hidden; } .leaderboard-bar-fill { height: 100%; background: var(--gold); } .award-card { border-left: 4px solid var(--gold); } .award-title { font-weight: 800; color: var(--navy); font-size: 1rem; } .award-desc { font-size: 0.8rem; color: var(--muted); margin: 2px 0 8px; } .award-winner { font-size: 1.1rem; font-weight: 700; } .award-value { font-size: 0.85rem; color: var(--muted); } .log-entry { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hairline); } .log-entry:last-child { border-bottom: none; } .log-entry-main { display: flex; flex-direction: column; } .log-entry-type { font-weight: 700; color: var(--navy); } .log-entry-meta { font-size: 0.78rem; color: var(--muted); } .log-entry button.link { color: var(--danger); } .toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: var(--navy-deep); color: var(--cream); padding: 10px 18px; border-radius: 999px; font-size: 0.85rem; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 50; } .toast.show { opacity: 1; } .empty-state { text-align: center; color: var(--muted); padding: 30px 10px; font-size: 0.9rem; }