/* ══════════════════════════════════════════════════════════════════ SNUG / SUSS shared interface ------------------------------------------------------------------ The bits both games need to look like they came from the same place: colours, typography, buttons, cards, player lists, avatars. SNUG owns this file. SUSS keeps a COPY and pulls a new one when it wants to — deliberately not a live link, so deploying one game can never break the other. See SHARED.md. Nothing game-specific belongs here. If a rule mentions a bolt, a nut, a vote or a suspect, it lives in that game's own stylesheet. ══════════════════════════════════════════════════════════════════ */ :root{ /* ---- ink and surfaces ---- */ --ui-ink:#3A2A55; /* headings and body text on light cards */ --ui-muted:#6E5C8F; /* secondary text */ --ui-faint:#8B7BA8; /* captions, counts, timestamps */ --ui-card:#FFFFFF; --ui-veil:rgba(58,36,92,.62); /* ---- one accent per game, same roles ---- SNUG uses blue for the primary action and pink for the accent. SUSS uses coral. Override these two in the game's own CSS; every component below is written against the variables, not the colours. */ --ui-primary:#3B5FFC; --ui-primary-hi:#5B79FF; --ui-primary-dk:#2338B8; --ui-accent:#FF4FA0; /* ---- states, shared meaning across both games ---- */ --ui-good:#2FBF6B; /* success, personal best, correct */ --ui-warn:#C98A2E; /* close, caution */ --ui-bad:#D8456B; /* error, eliminated */ /* ---- shape ---- */ --ui-r-card:26px; --ui-r-btn:18px; --ui-r-pill:999px; --ui-shadow-card:0 10px 0 rgba(30,16,60,.35), 0 26px 50px rgba(20,8,45,.5); --ui-shadow-btn:0 5px 0 var(--ui-primary-dk); } /* ---- typography ---- Fredoka throughout. Import it once in the host page: */ .ui, .ui-card, .ui-btn, .ui-list{ font-family:'Fredoka', system-ui, sans-serif; } /* ---- buttons ---- .ui-btn the main action: solid, with a pressed-in bottom edge .ui-btn.alt a quieter card-coloured version of the same .ui-btn.text no chrome at all, for "no thanks" and "close" .ui-sw small pill, for toggles and pagers */ .ui-btn{width:100%;padding:15px 16px;border:0;border-radius:var(--ui-r-btn); background:var(--ui-primary);color:#fff;font-family:inherit;font-weight:700;font-size:17px; box-shadow:var(--ui-shadow-btn);cursor:pointer;transition:transform .06s, box-shadow .06s; touch-action:manipulation} .ui-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ui-primary-dk)} .ui-btn.alt{background:var(--ui-card);color:var(--ui-ink);box-shadow:0 5px 0 rgba(30,16,60,.18)} .ui-btn.alt:active{box-shadow:0 1px 0 rgba(30,16,60,.18)} .ui-btn.text{background:none;border:0;box-shadow:none;color:var(--ui-faint); font-weight:500;font-size:12.5px;padding:10px;width:auto} .ui-btn.text:active{transform:none} .ui-btn[disabled]{opacity:.4;pointer-events:none} .ui-sw{background:#F2EEFA;border:0;border-radius:var(--ui-r-pill);padding:8px 14px; font-family:inherit;font-weight:600;font-size:13px;color:var(--ui-ink);cursor:pointer; touch-action:manipulation} .ui-sw.on{background:var(--ui-primary);color:#fff} /* ---- cards ---- A centred sheet over a dimmed backdrop. The backdrop must sit ABOVE the game layer; see SHARED.md on stacking, which has bitten both games. */ .ui-veil{position:fixed;inset:0;background:var(--ui-veil);backdrop-filter:blur(3px); display:none;align-items:center;justify-content:center;padding:16px;overflow:hidden} .ui-veil.on{display:flex} .ui-card{position:relative;width:100%;max-width:340px;margin:auto; background:var(--ui-card);color:var(--ui-ink);border-radius:var(--ui-r-card); padding:22px 20px 16px;text-align:center;max-height:92dvh;overflow:auto; touch-action:pan-y;box-shadow:var(--ui-shadow-card)} .ui-card h2{margin:0 0 6px;font-size:23px;font-weight:700} .ui-card .sub{color:var(--ui-muted);font-size:13.5px;margin:0 0 12px} .ui-card .note{color:var(--ui-faint);font-size:12px;margin:8px 0 0;line-height:1.45} .ui-card .err{background:#FDECEF;color:var(--ui-bad);border-radius:14px; padding:10px 12px;font-size:13px;margin:8px 0} /* ---- a row of headline figures ---- */ .ui-stats{display:flex;gap:8px;justify-content:center;margin:10px 0 6px} .ui-stats .stat{flex:1;background:#F4F0FC;border-radius:16px;padding:10px 4px} .ui-stats .stat b{display:block;font-size:24px;font-weight:700;line-height:1} .ui-stats .stat i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.6px; text-transform:uppercase;color:var(--ui-muted);margin-top:3px} /* ---- segmented control, for tabs within a card ---- */ .ui-seg{display:inline-flex;background:#F2EEFA;border-radius:var(--ui-r-pill);padding:3px} .ui-seg button{border:0;background:none;border-radius:var(--ui-r-pill);padding:8px 15px; font-family:inherit;font-weight:600;font-size:13px;color:var(--ui-muted);cursor:pointer} .ui-seg button.on{background:var(--ui-primary);color:#fff} /* ---- player lists: lobbies, leagues, results ---- */ .ui-list{list-style:none;text-align:left;margin:10px 0;padding:0} .ui-list li{display:flex;align-items:center;gap:9px;background:#F7F4FD;border-radius:15px; padding:8px 11px;margin-bottom:7px;font-size:14.5px;font-weight:500} .ui-list li.me{background:#EAF0FF;box-shadow:inset 0 0 0 2px var(--ui-primary-hi)} .ui-list li.gap{justify-content:center;background:none;box-shadow:none; color:#B7ADC9;padding:2px 0;letter-spacing:3px} .ui-list .pos{min-width:22px;font-weight:700;color:var(--ui-muted);font-size:13px} .ui-list .tail{margin-left:auto;color:var(--ui-muted);font-size:12.5px; font-variant-numeric:tabular-nums} /* ---- avatars and the identity chip ---- Both games draw a player as an emoji on a coloured disc, and let you change your name from wherever you are. Keep them identical: this is the strongest signal that the two games are related. */ .ui-ava{width:26px;height:26px;border-radius:50%;display:grid;place-items:center; font-size:15px;flex:none} .ui-chip{display:inline-flex;align-items:center;gap:7px;background:#F4F0FC; border-radius:var(--ui-r-pill);padding:5px 12px 5px 5px;font-weight:600;font-size:14px; border:0;font-family:inherit;color:var(--ui-ink);cursor:pointer} .ui-chip .edit{color:var(--ui-muted);font-weight:500;font-size:12px} .ui-facegrid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;padding:2px; touch-action:pan-y} .ui-face{aspect-ratio:1;border:0;border-radius:13px;background:#F4F0FC;font-size:19px; cursor:pointer;display:grid;place-items:center} .ui-face.on{box-shadow:inset 0 0 0 3px var(--ui-primary)} /* ---- room codes ---- */ .ui-code{width:100%;padding:14px;border:2px dashed #D8CEEE;border-radius:var(--ui-r-btn); background:#FBF9FF;font-family:inherit;font-weight:700;font-size:19px;text-align:center; letter-spacing:5px;text-transform:uppercase;color:var(--ui-ink)} /* ---- respect the setting ---- */ @media (prefers-reduced-motion: reduce){ .ui-btn, .ui-btn:active{transition:none;transform:none} }