/* ───────────────────────────────────────────────────────── IMPOSTER — Mobile-first style sheet Target: 390px (iPhone 14) baseline, scales up from there ───────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; /* prevent text size adjustment on rotation */ -webkit-text-size-adjust: 100%; } /* ── Dark theme (default) ─────────────────────────────────── */ :root { --bg: #000000; --surface: #0d0d0d; --surface2: #111111; --border: #222222; --border2: #2a2a2a; --text: #ffffff; --text-dim: #888888; --text-faint: #3a3a3a; --focus-border: #555555; --switch-on-bg: #2a2a2a; --switch-on-bdr: #555555; --radius: 14px; --radius-sm: 10px; --red: #e53935; --gold: #f5c518; /* safe area insets for notched phones */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* ── Light theme (OS preference) ─────────────────────────── */ @media (prefers-color-scheme: light) { :root { --bg: #ffffff; --surface: #f5f5f5; --surface2: #ebebeb; --border: #e0e0e0; --border2: #d0d0d0; --text: #111111; --text-dim: #555555; --text-faint: #aaaaaa; --focus-border: #999999; --switch-on-bg: #555555; --switch-on-bdr:#888888; } } /* ── Manual theme override (set via data-theme on ) ─── */ [data-theme="dark"] { --bg: #000000; --surface: #0d0d0d; --surface2: #111111; --border: #222222; --border2: #2a2a2a; --text: #ffffff; --text-dim: #888888; --text-faint: #3a3a3a; --focus-border: #555555; --switch-on-bg: #2a2a2a; --switch-on-bdr:#555555; } [data-theme="light"] { --bg: #ffffff; --surface: #f5f5f5; --surface2: #ebebeb; --border: #e0e0e0; --border2: #d0d0d0; --text: #111111; --text-dim: #555555; --text-faint: #aaaaaa; --focus-border: #999999; --switch-on-bg: #555555; --switch-on-bdr:#888888; } html { height: 100%; /* prevent rubber-band scroll revealing black */ background: var(--bg); } body { height: 100%; background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden; /* prevent pull-to-refresh on iOS */ overscroll-behavior: none; } /* ── Touch optimisation — applied globally ─────────────── */ button, a, [role="button"], .player-card, .pack-btn, .btn-mode { /* stops double-tap zoom on interactive elements */ touch-action: manipulation; /* removes iOS blue flash on tap */ -webkit-tap-highlight-color: transparent; /* remove default outlines; we add focus styles where needed */ outline: none; } /* ══════════════════════════════════ SCREENS */ .screen { position: fixed; inset: 0; /* respect notch/home-bar */ padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); padding-left: var(--safe-left); padding-right: var(--safe-right); display: flex; flex-direction: column; opacity: 0; pointer-events: none; transform: translateY(18px); transition: opacity 0.22s ease, transform 0.22s ease; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .screen.active { opacity: 1; pointer-events: all; transform: translateY(0); } /* ══════════════════════════════════ HEADER */ .screen-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg); position: sticky; top: 0; z-index: 10; /* min height keeps it tappable */ min-height: 60px; } .screen-title { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; flex: 1; text-align: center; line-height: 1.2; } .header-spacer { width: 44px; flex-shrink: 0; } .header-center { display: flex; flex-direction: column; align-items: center; flex: 1; gap: 2px; min-width: 0; } .header-badge { font-size: 11px; color: var(--text-dim); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; } /* scrollable body area */ .screen-body { padding: 20px 16px; display: flex; flex-direction: column; gap: 24px; padding-bottom: max(40px, calc(var(--safe-bottom) + 24px)); flex: 1; } /* ══════════════════════════════════ BUTTONS Every button that is tappable: min-height 56px. Main CTA buttons: 64px+ for comfort. ────────────────────────────────────────── */ /* Back button */ .btn-back { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); font-size: 20px; cursor: pointer; flex-shrink: 0; transition: background 0.12s; } .btn-back:active { background: var(--surface2); } /* Vote button in header */ .btn-vote { background: none; border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; font-weight: 700; padding: 10px 14px; min-height: 44px; cursor: pointer; white-space: nowrap; transition: background 0.12s; } .btn-vote:active { background: var(--surface2); } /* Primary CTA — large, comfortable */ .btn-start { width: 100%; padding: 20px 24px; min-height: 64px; background: var(--text); color: var(--bg); border: none; border-radius: var(--radius); font-size: 18px; font-weight: 800; cursor: pointer; letter-spacing: -0.3px; transition: opacity 0.12s, transform 0.1s; margin-top: 4px; } .btn-start:active { opacity: 0.88; transform: scale(0.98); } /* Secondary outlined button */ .btn-outline { width: 100%; padding: 18px 24px; min-height: 60px; background: none; color: var(--text); border: 1px solid var(--border2); border-radius: var(--radius); font-size: 17px; font-weight: 600; cursor: pointer; transition: background 0.12s; } .btn-outline:active { background: var(--surface2); } .btn-outline.small { padding: 12px 18px; min-height: 48px; font-size: 14px; width: auto; } /* Ghost / tertiary */ .btn-ghost { width: 100%; padding: 16px 24px; min-height: 56px; background: none; color: var(--text-dim); border: none; border-radius: var(--radius); font-size: 16px; font-weight: 500; cursor: pointer; } .btn-ghost:active { color: var(--text); } /* Add-player + button */ .btn-add { width: 56px; height: 56px; min-width: 56px; background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); font-size: 30px; font-weight: 300; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; transition: background 0.12s; } .btn-add:active { background: var(--border); } /* − / + counter buttons */ .btn-counter { width: 56px; height: 56px; background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); font-size: 26px; font-weight: 300; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s; } .btn-counter:active { background: var(--border); } /* ══════════════════════════════════ HOME SCREEN */ .home-content { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: max(48px, calc(var(--safe-top) + 32px)) 24px max(56px, calc(var(--safe-bottom) + 32px)); gap: 52px; } .home-logo { text-align: center; } .logo-mark { width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--border2); display: flex; align-items: center; justify-content: center; /* responsive font: clamp(min, preferred, max) */ font-size: clamp(28px, 8vw, 40px); font-weight: 900; margin: 0 auto 20px; color: var(--text-dim); } .home-title { /* 390px → ~48px, larger screens → up to 60px */ font-size: clamp(44px, 12vw, 60px); font-weight: 900; letter-spacing: clamp(-3px, -0.8vw, -2px); line-height: 1; margin-bottom: 10px; } .home-sub { font-size: 13px; color: var(--text-dim); letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; } .home-buttons { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 380px; } /* Mode buttons on home screen */ .btn-mode { display: flex; align-items: center; gap: 16px; padding: 22px 20px; min-height: 80px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; text-align: left; transition: border-color 0.12s, background 0.12s; width: 100%; color: var(--text); } .btn-mode:active { background: var(--surface2); border-color: var(--border2); } .btn-mode-icon { font-size: 30px; flex-shrink: 0; } .btn-mode-text { display: flex; flex-direction: column; gap: 3px; } .btn-mode-label { font-size: 18px; font-weight: 700; } .btn-mode-desc { font-size: 13px; color: var(--text-dim); } /* ══════════════════════════════════ SETUP */ .setup-section { display: flex; flex-direction: column; gap: 12px; } .section-label { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); text-align: center; } /* When label shares a row with another element, keep it left-aligned */ .section-header-row .section-label, .toggle-row .section-label { text-align: left; } .section-label.no-margin { margin: 0; } /* Text inputs */ .text-input { flex: 1; height: 56px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 16px; /* never below 16px — prevents iOS zoom-in */ font-family: inherit; padding: 0 16px; outline: none; transition: border-color 0.15s; min-width: 0; -webkit-appearance: none; appearance: none; } .text-input::placeholder { color: var(--text-faint); } .text-input:focus { border-color: var(--focus-border); } /* Room-code input: large, spaced characters */ .text-input.code-input { text-transform: uppercase; letter-spacing: 6px; font-weight: 800; font-size: 20px; text-align: center; } .add-player-row { display: flex; gap: 10px; align-items: center; } /* Player chips */ .chip-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 10px; justify-content: center; } .player-chip { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 100px; font-size: 15px; font-weight: 600; } .chip-remove { width: 28px; height: 28px; min-width: 28px; background: none; border: none; color: var(--text-dim); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.12s; } .chip-remove:active { background: var(--border); color: var(--text); } /* Word pack grid — 2 cols on 390px, overflow-hidden keeps cards from escaping */ .pack-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .pack-btn { display: flex; align-items: center; gap: 10px; padding: 14px 12px; min-height: 56px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; transition: border-color 0.12s, color 0.12s, background 0.12s; width: 100%; } .pack-btn.selected { border-color: var(--text); color: var(--text); background: var(--surface2); } .pack-btn:active { background: var(--surface2); } .pack-emoji { font-size: 20px; flex-shrink: 0; } .pack-name { font-size: 12px; line-height: 1.3; } /* Imposter counter */ .counter-row { display: flex; align-items: center; justify-content: center; gap: 24px; } .counter-value { font-size: 36px; font-weight: 900; min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; } /* Hint / No-hint toggle group */ .toggle-group { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .toggle-btn { flex: 1; padding: 16px 12px; min-height: 56px; background: none; border: none; color: var(--text-dim); font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.12s, color 0.12s; font-family: inherit; text-align: center; } .toggle-btn.active { background: var(--surface2); color: var(--text); } .toggle-btn:active { background: var(--border); } /* Troll toggle row */ .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 4px 0; } .toggle-info { display: flex; flex-direction: column; gap: 4px; } .setting-desc { font-size: 12px; color: var(--text-dim); line-height: 1.4; } /* iOS-style switch */ .switch { position: relative; display: inline-block; width: 54px; height: 32px; flex-shrink: 0; touch-action: manipulation; } .switch input { opacity: 0; width: 0; height: 0; } .slider-track { position: absolute; inset: 0; background: var(--border); border-radius: 32px; cursor: pointer; transition: background 0.2s; } .slider-track::before { content: ''; position: absolute; width: 24px; height: 24px; left: 4px; top: 4px; background: var(--text-dim); border-radius: 50%; transition: transform 0.2s, background 0.2s; } .switch input:checked + .slider-track { background: var(--switch-on-bg); border: 1px solid var(--switch-on-bdr); } .switch input:checked + .slider-track::before { transform: translateX(22px); background: #ffffff; } /* ══════════════════════════════════ PLAYER LIST */ .reveal-hint { padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .reveal-hint p { font-size: 14px; color: var(--text-dim); text-align: center; } /* Card grid — 2 cols at mobile, 3 at wider */ .cards-grid { padding: 14px 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-content: start; } /* Player cards — generous tap target */ .player-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 14px; min-height: 120px; /* comfortable tap target */ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; text-align: center; position: relative; transition: border-color 0.12s, background 0.12s, opacity 0.15s; /* prevent accidental text selection on rapid taps */ -webkit-user-select: none; user-select: none; } .player-card:active:not(.eliminated) { background: var(--surface2); border-color: var(--border2); transform: scale(0.97); } /* Revealed tick */ .player-card.revealed::after { content: '✓'; position: absolute; top: 8px; right: 10px; font-size: 13px; color: var(--text-dim); } /* Eliminated cards */ .player-card.eliminated { opacity: 0.25; cursor: default; pointer-events: none; } .card-name { font-size: 18px; /* easily readable at arm's length */ font-weight: 800; letter-spacing: -0.3px; word-break: break-word; line-height: 1.2; } .card-status { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; } /* Voting mode — bright borders to indicate interactivity */ .voting-mode .player-card:not(.eliminated) { border-color: var(--border2); min-height: 130px; /* slightly bigger on vote screen */ } .voting-mode .player-card:not(.eliminated):active { background: var(--surface2); transform: scale(0.97); } /* Voting hint bar */ .voting-hint { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text-dim); text-align: center; flex-shrink: 0; } /* ══════════════════════════════════ MODALS On mobile: takes up ~90% of screen height, centered Role reveal: effectively full-screen for drama ─────────────────────────────────────────── */ .modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); display: flex; align-items: flex-end; /* sheet rises from bottom on mobile */ justify-content: center; z-index: 100; padding: 0; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .modal.active { opacity: 1; pointer-events: all; } .modal-panel { background: var(--surface); border: 1px solid var(--border); border-top-left-radius: 24px; border-top-right-radius: 24px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 12px 24px max(32px, calc(var(--safe-bottom) + 20px)); width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; /* slide up from bottom */ transform: translateY(40px); transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1); max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal.active .modal-panel { transform: translateY(0); } /* Drag handle pill */ .modal-panel::before { content: ''; width: 40px; height: 4px; background: var(--border2); border-radius: 4px; margin-top: 4px; flex-shrink: 0; } .modal-state { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; padding-top: 8px; } .modal-state.hidden { display: none; } .modal-only-label { font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; } .modal-big-name { font-size: clamp(32px, 9vw, 44px); font-weight: 900; letter-spacing: -1.5px; line-height: 1.1; } /* "Tap to Reveal" — large, obvious */ .btn-reveal { width: 100%; padding: 22px; min-height: 68px; background: var(--text); color: var(--bg); border: none; border-radius: var(--radius); font-size: 18px; font-weight: 800; cursor: pointer; margin-top: 8px; transition: opacity 0.12s, transform 0.1s; font-family: inherit; } .btn-reveal:active { opacity: 0.88; transform: scale(0.98); } /* Done button in modal */ .btn-done { width: 100%; padding: 18px; min-height: 60px; background: none; color: var(--text); border: 1px solid var(--border2); border-radius: var(--radius); font-size: 17px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.12s; } .btn-done:active { background: var(--surface2); } /* Role badge in modal — stays white/neutral; color only on end screen */ .role-badge-large { font-size: 12px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; padding: 10px 24px; border-radius: 100px; border: 1px solid var(--border2); color: var(--text); background: var(--surface2); } /* Word area — big readable text */ .modal-word-area { display: flex; flex-direction: column; gap: 6px; width: 100%; } .word-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim); font-weight: 700; } .word-value { font-size: clamp(28px, 8vw, 38px); /* 28px minimum as specified */ font-weight: 900; letter-spacing: -1px; line-height: 1.15; color: var(--text); } .word-value.mystery { font-size: clamp(32px, 9vw, 44px); letter-spacing: 10px; color: var(--text-faint); } /* Vote result modal — same bottom-sheet treatment */ .vote-panel { gap: 14px; } .vote-result-icon { font-size: 56px; line-height: 1; padding-top: 4px; } .vote-result-name { font-size: clamp(24px, 7vw, 32px); font-weight: 900; letter-spacing: -0.8px; } .vote-result-verdict { font-size: 16px; color: var(--text-dim); font-weight: 600; } /* ══════════════════════════════════ END SCREEN */ .end-screen { overflow-y: auto; } .end-content { display: flex; flex-direction: column; align-items: center; padding: max(40px, calc(var(--safe-top) + 24px)) 20px max(60px, calc(var(--safe-bottom) + 32px)); gap: 28px; min-height: 100vh; } .end-banner { text-align: center; } .end-result { font-size: clamp(32px, 9vw, 44px); font-weight: 900; letter-spacing: -1.5px; line-height: 1.1; } .crew-wins { color: var(--text); } .imposter-wins { color: var(--red); } .end-subtitle { font-size: 15px; color: var(--text-dim); margin-top: 8px; } /* Word reveal box */ .end-word-box { text-align: center; padding: 20px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 380px; } .end-word-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim); font-weight: 700; margin-bottom: 8px; } .end-word-value { font-size: clamp(28px, 8vw, 38px); font-weight: 900; letter-spacing: -1px; } /* Roles list */ .end-roles { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 380px; } .end-role-row { display: flex; align-items: center; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); gap: 10px; } /* Color borders only on end screen */ .end-imposter { border-color: rgba(229, 57, 53, 0.6); } .end-troll { border-color: rgba(245, 197, 24, 0.6); } .end-crewmate { border-color: var(--border); } .end-player-name { font-size: 17px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .end-role-tag { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; flex-shrink: 0; } .end-imposter .end-role-tag { background: rgba(229, 57, 53, 0.15); color: var(--red); } .end-troll .end-role-tag { background: rgba(245, 197, 24, 0.15); color: var(--gold); } .end-crewmate .end-role-tag { background: var(--surface2); color: var(--text-dim); } .end-out-badge { font-size: 10px; color: var(--text-faint); font-weight: 600; flex-shrink: 0; } .end-buttons { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 380px; } /* ══════════════════════════════════ SERVER MODE */ /* Server Home — two-section full-height layout */ .server-home-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 28px 16px max(28px, calc(var(--safe-bottom) + 20px)); overflow-y: auto; -webkit-overflow-scrolling: touch; } .server-section { display: flex; flex-direction: column; gap: 16px; } .server-section-header { display: flex; flex-direction: column; gap: 6px; text-align: center; } .server-section-subtitle { font-size: 14px; color: var(--text-dim); text-align: center; line-height: 1.4; } .btn-create-room { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 88px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); cursor: pointer; padding: 24px 20px; transition: background 0.12s, border-color 0.12s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .btn-create-room:active { background: var(--surface2); border-color: var(--border2); } .btn-create-room-icon { font-size: 28px; flex-shrink: 0; } .btn-create-room-label { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; } .or-divider { display: flex; align-items: center; gap: 16px; padding: 4px 0; } .or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--border2); } .or-divider span { font-size: 12px; font-weight: 800; letter-spacing: 2.5px; color: var(--text-dim); text-transform: uppercase; } .join-fields { display: flex; flex-direction: column; gap: 10px; } /* Larger inputs for the join section */ .text-input.server-join-input { height: 60px; font-size: 18px; padding: 0 18px; } /* Room code card */ .room-code-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .room-code-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim); font-weight: 700; } .room-code-display { font-size: clamp(38px, 10vw, 50px); font-weight: 900; letter-spacing: clamp(6px, 2vw, 12px); line-height: 1; font-variant-numeric: tabular-nums; } .qr-box { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; } .qr-box canvas, .qr-box img { border-radius: 4px; } .lobby-players-section { display: flex; flex-direction: column; gap: 10px; } .lobby-chip { display: inline-flex; padding: 10px 16px; background: var(--surface2); border: 1px solid var(--border); border-radius: 100px; font-size: 15px; font-weight: 600; } /* Server player view */ .server-content { align-items: center; justify-content: center; min-height: 70vh; } .waiting-state { display: flex; flex-direction: column; align-items: center; gap: 20px; color: var(--text-dim); font-size: 16px; padding: 40px 20px; text-align: center; } .spinner { width: 36px; height: 36px; border: 2px solid var(--border); border-top-color: var(--text-dim); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .server-role-reveal { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; text-align: center; padding: 32px 20px max(32px, calc(var(--safe-bottom) + 20px)); } .server-role-badge { font-size: 12px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; padding: 12px 28px; border-radius: 100px; border: 1px solid var(--border2); color: var(--text); background: var(--surface2); } .server-word-area { display: flex; flex-direction: column; gap: 8px; } .server-hint-text { font-size: 14px; color: var(--text-dim); margin-top: 8px; line-height: 1.5; } .server-voting-area { width: 100%; display: flex; flex-direction: column; gap: 16px; padding: 16px; } .server-voting-area h3 { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: -0.5px; } .server-voted-notice { text-align: center; padding: 24px 20px; color: var(--text-dim); font-size: 16px; line-height: 1.5; } /* ══════════════════════════════════ SHAKE ANIMATION */ @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } } /* ══════════════════════════════════ UTILITY */ .hidden { display: none !important; } /* ══════════════════════════════════ CUSTOM WORDS + PACK BUILDER */ /* Section header row — label + "My Packs →" button side by side */ .section-header-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .btn-my-packs { background: none; border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 13px; font-weight: 700; padding: 8px 14px; min-height: 36px; cursor: pointer; font-family: inherit; white-space: nowrap; transition: color 0.12s, border-color 0.12s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .btn-my-packs:active { color: var(--text); border-color: var(--text); } /* Custom word input stack */ .custom-word-fields { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } /* In a column flex, flex-basis:0% collapses height — pin it back */ .custom-word-fields .text-input { flex: none; width: 100%; height: 56px; } /* Small muted helper text for scope clarification */ .scope-hint { font-size: 12px; color: var(--text-dim); text-align: center; line-height: 1.45; padding: 2px 4px; } /* "Save to a pack?" inline prompt */ .save-pack-prompt { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .save-prompt-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .save-prompt-label { font-size: 14px; color: var(--text-dim); } .btn-save-to-pack { background: none; border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; font-weight: 700; padding: 10px 16px; min-height: 40px; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.12s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .btn-save-to-pack:active { background: var(--surface2); } /* Custom badge inside pack button */ .custom-badge { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; line-height: 1.6; } .pack-btn-custom.selected .custom-badge { border-color: var(--text-dim); } /* ══════════════════════════════════ PACK MANAGER MODAL */ .pack-mgr-panel { gap: 0; padding-bottom: max(24px, calc(var(--safe-bottom) + 16px)); } .pack-mgr-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 4px 0 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .pack-mgr-title { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; } .btn-pack-mgr-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 16px; cursor: pointer; flex-shrink: 0; transition: background 0.12s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .btn-pack-mgr-close:active { background: var(--surface2); color: var(--text); } .pack-mgr-body { display: flex; flex-direction: column; gap: 12px; width: 100%; padding-top: 16px; flex: 1; } .pack-mgr-empty { font-size: 14px; color: var(--text-dim); text-align: center; padding: 8px 0 16px; } /* Individual pack card */ .pack-mgr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .pack-mgr-card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); } .pmgr-pack-name { font-size: 15px; font-weight: 700; } .pmgr-word-count { font-size: 12px; color: var(--text-dim); font-weight: 600; } .pmgr-words { display: flex; flex-direction: column; } .pmgr-word-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); } .pmgr-word-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pmgr-word { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pmgr-hint { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pmgr-del-word { width: 32px; height: 32px; min-width: 32px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 18px; cursor: pointer; transition: background 0.12s, color 0.12s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .pmgr-del-word:active { background: var(--surface2); color: var(--text); } .pmgr-add-form { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--border); } .pmgr-add-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .pmgr-add-fields .text-input { height: 46px; font-size: 14px; padding: 0 12px; } .pmgr-add-btn { width: 46px; height: 46px; min-width: 46px; background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); font-size: 26px; font-weight: 300; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; align-self: flex-end; transition: background 0.12s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .pmgr-add-btn:active { background: var(--border); } .pmgr-delete-pack-btn { width: 100%; padding: 14px 16px; background: none; border: none; color: var(--text-faint); font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; font-family: inherit; transition: color 0.12s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .pmgr-delete-pack-btn:active { color: var(--red); } /* ══════════════════════════════════ THEME TOGGLE */ .btn-theme-toggle { position: absolute; top: max(16px, var(--safe-top)); right: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 20px; cursor: pointer; z-index: 5; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.12s; line-height: 1; } .btn-theme-toggle:active { background: var(--surface2); } /* ══════════════════════════════════ RESPONSIVE BREAKPOINTS */ /* Wider phones / tablets — 3-column card grid */ @media (min-width: 500px) { .cards-grid { grid-template-columns: repeat(3, 1fr); } .pack-grid { grid-template-columns: repeat(3, 1fr); } } /* Desktop / large tablet — center and cap width */ @media (min-width: 700px) { .screen-body { max-width: 500px; margin: 0 auto; width: 100%; } .home-content { max-width: 420px; margin: 0 auto; } .cards-grid { max-width: 600px; margin: 0 auto; width: 100%; grid-template-columns: repeat(3, 1fr); } .pack-grid { grid-template-columns: repeat(4, 1fr); } /* On desktop the modal can be centred rather than bottom-sheet */ .modal { align-items: center; padding: 24px; } .modal-panel { border-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; max-height: 85vh; max-width: 400px; padding: 28px 28px 28px; } .modal-panel::before { display: none; } .end-content { max-width: 460px; margin: 0 auto; } }