/* ===== Secret Traitor demo — visual style ===== * Theme: a candlelit chamber of intrigue. Engraved Roman capitals (Cinzel), * Garamond body, parchment plaques, aged gold framing, wax-seal red. */ :root { --bg-top: #241a12; --bg-bot: #0c0805; --ink: #1a120a; /* dark text on parchment */ --parch: #e9dcbf; /* aged paper */ --parch-2: #dccaa1; --gold: #c9a24a; --gold-bright: #e8c873; --line: #6b5026; /* aged gold-brown border */ --text: #ecdfc2; /* warm parchment text on dark */ --muted: #b6a071; --green: #9fc06f; /* virtuous / good (readable on dark) */ --red: #c8533f; /* assassin / danger (readable on dark) */ /* One font stack for every emoji so glyphs render consistently across the UI. */ --emoji-font: 'EB Garamond', Georgia, 'Times New Roman', serif; } /* Any emoji — banner icons, role glyphs, and the leading icon on button CTAs — uses the same stack so they look consistent everywhere. */ .scene-emoji, .glyph, .emoji { font-family: var(--emoji-font); } .emoji { font-style: normal; font-weight: normal; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; min-height: 100vh; /* fallback for browsers without dvh */ min-height: 100dvh; /* tracks the visible area as the address bar shows/hides */ font-family: 'EB Garamond', Georgia, 'Times New Roman', serif; color: var(--text); background: #070504; padding: 0; } /* Centering lives on body only — putting flex on made shrink-wrap to its content width instead of filling the viewport. */ body { width: 100%; display: flex; flex-direction: column; align-items: center; /* Anchor to the top so when the phone shrinks for the keyboard it doesn't get re-centred down behind it. */ justify-content: flex-start; gap: 0; } /* Phone frame — dark leather with gold piping */ .phone { position: relative; width: 100%; max-width: 400px; height: 100vh; /* fallback */ height: 100dvh; /* fill the full viewport height */ height: var(--vvh, 100dvh); /* tracks the visible area when the keyboard opens */ border-radius: 26px; background: radial-gradient(120% 80% at 50% -10%, rgba(201,162,74,.16), transparent 60%), linear-gradient(180deg, var(--bg-top), var(--bg-bot)); border: 1px solid #3a2c17; box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 0 0 6px #16100a, inset 0 0 0 7px rgba(201,162,74,.35), inset 0 2px 30px rgba(0,0,0,.6); overflow: hidden; display: flex; flex-direction: column; } /* Candlelight glow that gently flickers */ .phone::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(60% 45% at 50% 8%, rgba(232,200,115,.12), transparent 70%); animation: flicker 4s ease-in-out infinite; } @keyframes flicker { 0%,100% { opacity: .85; } 25% { opacity: 1; } 50% { opacity: .7; } 75% { opacity: .95; } } .app { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding: 30px 16px; overflow: hidden; /* the content area scrolls, not the whole app */ min-height: 0; } /* Scrollable content; the CTA footer is pinned below it (see layoutScreen). */ .app-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* old Edge/IE */ animation: fade .4s ease both; } .app-content::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chrome/Safari */ /* Call-to-action buttons, always anchored to the bottom of the screen. */ .cta-footer { flex: 0 0 auto; } @keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Typography */ .eyebrow { font-family: 'Cinzel', Georgia, serif; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; font-size: 11px; color: var(--gold); margin: 0 0 12px; } h1 { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 40px; line-height: 1.08; margin: 0 0 10px; letter-spacing: .06em; color: var(--gold-bright); text-shadow: 0 1px 0 #2a1d0d, 0 0 24px rgba(201,162,74,.35); } h2 { font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 22px; margin: 0 0 8px; letter-spacing: .04em; color: var(--gold-bright); } p { font-size: 18px; line-height: 1.55; margin: 0 0 14px; color: var(--text); } .center { text-align: center; } .warn { color: #e0a25a; font-size: 14px; margin-top: -4px; } .spacer { flex: 1; } .divider { color: var(--gold); text-align: center; font-size: 18px; letter-spacing: .6em; margin: 4px 0 16px; opacity: .85; } /* Buttons — pressed gold plaques */ .btn { appearance: none; cursor: pointer; display: block; width: 100%; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; padding: 16px 18px; margin-top: 14px; border-radius: 8px; color: #221708; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border: 1px solid #7a5d28; box-shadow: 0 2px 0 #5e4720, 0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .08s ease, filter .15s ease; } .btn:active { transform: translateY(1px); filter: brightness(.96); } /* CTA with a leading emoji: the label stays centered exactly as if there were no emoji (the two .cta-side columns are equal-width, so the label is the centre). The emoji lives in the left column and is centred within that free space, so its position adapts to the label width. Larger emoji without nudging the text. */ .btn.has-emoji { display: flex; align-items: center; } .btn.has-emoji .cta-side { flex: 1; display: flex; justify-content: center; } .btn.has-emoji .cta-label { flex: 0 0 auto; } .btn.has-emoji .emoji { font-size: 220%; line-height: 0; } .btn.secondary { background: transparent; color: var(--muted); border: 1px solid var(--line); box-shadow: none; } .btn.ghost { background: #231a10; color: var(--text); border: 1px solid var(--line); box-shadow: none; } .btn:disabled { opacity: .4; cursor: default; box-shadow: none; } /* The "what to tap" highlight: candleglow pulse */ .target { position: relative; animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,200,115,0); } 50% { box-shadow: 0 0 0 6px rgba(232,200,115,.25), 0 0 26px rgba(232,200,115,.5); } } /* Hint banner — an aged ribbon with a pointing hand. * In normal flow at the bottom of the phone (not overlaid) so it never covers buttons. */ .hint { flex: none; z-index: 2; margin: 0 14px 14px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 8px; background: linear-gradient(180deg, #efe3c6, #dcc99c); border: 1px solid #7a5d28; color: #3a2a12; font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 13px; letter-spacing: .02em; box-shadow: 0 6px 18px rgba(0,0,0,.5), inset 0 0 0 1px rgba(122,93,40,.35); } .hint[hidden] { display: none; } /* author display:flex would otherwise override [hidden] */ .hint-finger { font-size: 22px; line-height: 1; color: #5e3b14; animation: bob 1.2s ease-in-out infinite; } @keyframes bob { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } } /* Final roster (end-of-game) */ .seat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: #211810; border: 1px solid var(--line); animation: pop .3s ease both; } @keyframes pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } } .seat .name { font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 14px; letter-spacing: .02em; } .seat.you { border-color: var(--gold); } .seat.you .name { color: var(--gold-bright); } /* Winning team highlighted on the final roster */ .seat.winner { border-color: var(--gold-bright); background: linear-gradient(180deg, rgba(232,200,115,.16), rgba(232,200,115,.05)); box-shadow: inset 0 0 0 1px rgba(232,200,115,.55), 0 0 18px rgba(232,200,115,.22); } .seat.winner .name { color: var(--gold-bright); } .seat .crown { font-family: var(--emoji-font); font-size: 14px; margin-left: 6px; filter: drop-shadow(0 0 4px rgba(232,200,115,.7)); } /* Avatars — gold-rimmed medallions */ .avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; overflow: hidden; display: grid; place-items: center; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 13px; color: #1a120a; box-shadow: 0 0 0 2px #14100a, 0 0 0 3px rgba(201,162,74,.6); } .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Large avatar on the "Pass the phone to X" gate */ .gate-avatar { display: flex; justify-content: center; margin: auto auto 14px; } .gate-avatar .avatar { width: 112px; height: 112px; font-size: 42px; box-shadow: 0 0 0 2px #14100a, 0 0 0 4px rgba(201,162,74,.6), 0 8px 24px rgba(0,0,0,.5); } /* While a selfie is being repainted into a period portrait in the background, a gentle gilt shimmer rings the avatar. It clears the moment the portrait swaps in. */ .avatar.enhancing { animation: enhance-pulse 1.4s ease-in-out infinite; } @keyframes enhance-pulse { 0%, 100% { box-shadow: 0 0 0 2px #14100a, 0 0 0 3px rgba(201,162,74,.6); } 50% { box-shadow: 0 0 0 2px #14100a, 0 0 0 4px rgba(232,196,104,1); } } /* Optional Replicate token field, revealed under the Selfie avatars toggle. */ .token-field { margin: 2px 0 4px; } .token-input { width: 100%; box-sizing: border-box; -webkit-text-security: disc; } .token-note { margin: 6px 2px 0; font-size: 12px; line-height: 1.45; color: var(--muted, #9a8c74); } /* Selfie capture */ .selfie-stage { width: 240px; height: 240px; max-width: 72vw; max-height: 72vw; margin: 16px auto; border-radius: 16px; overflow: hidden; background: #14100a; box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(0,0,0,.45); } .selfie-stage video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); } .selfie-preview { width: 100%; height: 100%; object-fit: cover; display: block; } /* Player pick grid — parchment cards */ .pick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; } .pick { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 4px 4px 7px; border-radius: 10px; cursor: pointer; background: linear-gradient(180deg, var(--parch), var(--parch-2)); border: 1px solid #7a5d28; color: var(--ink); font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(122,93,40,.3), 0 4px 12px rgba(0,0,0,.35); transition: transform .08s ease; } .pick:active { transform: scale(.96); } .pick.selected { border-color: var(--gold-bright); box-shadow: inset 0 0 0 2px var(--gold-bright), 0 4px 16px rgba(201,162,74,.45); } .pick.selected .name { color: #5a3210; } /* Action-specific tint on the chosen card: vote = dark, kill = red, shield = blue. The tint colours the card's frame, name, AND washes over the portrait itself. */ .pick.selected .avatar { position: relative; } .pick.selected .avatar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; mix-blend-mode: multiply; opacity: .42; pointer-events: none; } .tint-vote .pick.selected { border-color: #2a1f12; box-shadow: inset 0 0 0 2px #2a1f12, 0 4px 16px rgba(0,0,0,.5); } .tint-vote .pick.selected .name { color: #2a1f12; } .tint-vote .pick.selected .avatar::after { background: #2a1f12; } .tint-kill .pick.selected { border-color: var(--red); box-shadow: inset 0 0 0 2px var(--red), 0 4px 18px rgba(200,83,63,.55); } .tint-kill .pick.selected .name { color: #9e3b2f; } .tint-kill .pick.selected .avatar::after { background: var(--red); } .tint-shield .pick.selected { border-color: #3f6fb0; box-shadow: inset 0 0 0 2px #3f6fb0, 0 4px 18px rgba(63,111,176,.55); } .tint-shield .pick.selected .name { color: #2f4f86; } .tint-shield .pick.selected .avatar::after { background: #3f6fb0; } /* End-game roster: same selected-card treatment, but the tint lives per card (winners gold, killed red, banished dark) since the grid mixes outcomes. */ .pick-tint-win.selected { border-color: var(--gold-bright); box-shadow: inset 0 0 0 2px var(--gold-bright), 0 4px 18px rgba(201,162,74,.55); } .pick-tint-win.selected .name { color: #5a3210; } .pick-tint-win.selected .avatar::after { background: var(--gold-bright); } .pick-tint-kill.selected { border-color: var(--red); box-shadow: inset 0 0 0 2px var(--red), 0 4px 18px rgba(200,83,63,.55); } .pick-tint-kill.selected .name { color: #9e3b2f; } .pick-tint-kill.selected .avatar::after { background: var(--red); } .pick-tint-vote.selected { border-color: #2a1f12; box-shadow: inset 0 0 0 2px #2a1f12, 0 4px 16px rgba(0,0,0,.5); } .pick-tint-vote.selected .name { color: #2a1f12; } .pick-tint-vote.selected .avatar::after { background: #2a1f12; } .pick .avatar { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 8px; font-size: 40px; } /* Lobby option — themed checkbox */ .option { display: flex; align-items: flex-start; gap: 12px; text-align: left; cursor: pointer; padding: 14px; border-radius: 10px; margin-top: 14px; background: #211810; border: 1px solid var(--line); } .option input { position: absolute; opacity: 0; width: 0; height: 0; } .option-box { flex: none; width: 24px; height: 24px; border-radius: 6px; margin-top: 2px; border: 1px solid #7a5d28; background: linear-gradient(180deg, var(--parch), var(--parch-2)); display: grid; place-items: center; font-family: 'Cinzel', serif; color: #7a3b16; font-weight: 700; font-size: 16px; } .option input:checked + .option-box::after { content: '✓'; } .option input:focus-visible + .option-box { box-shadow: 0 0 0 3px rgba(232,200,115,.5); } .option-text strong { display: block; font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: .04em; color: var(--gold-bright); font-size: 14px; text-transform: uppercase; margin-bottom: 2px; } .option-sub { color: var(--muted); font-size: 14px; line-height: 1.4; } /* Setup: player-count stepper + name inputs */ .stepper { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 6px 0 16px; } .step-btn { width: 46px; height: 46px; border-radius: 50%; cursor: pointer; border: 1px solid #7a5d28; color: #221708; font-family: 'Cinzel', serif; font-weight: 700; font-size: 24px; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); box-shadow: 0 2px 0 #5e4720, inset 0 1px 0 rgba(255,255,255,.3); } .step-btn:disabled { opacity: .4; cursor: default; box-shadow: none; } .step-count { font-family: 'Cinzel', serif; font-size: 18px; color: var(--gold-bright); letter-spacing: .04em; min-width: 116px; text-align: center; } .name-input { font-family: 'EB Garamond', serif; font-size: 16px; padding: 10px 12px; border-radius: 8px; border: 1px solid #7a5d28; color: var(--ink); background: linear-gradient(180deg, var(--parch), var(--parch-2)); width: 100%; box-sizing: border-box; } .name-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(232,200,115,.45); } /* End-game role tag (now shown under each card in the roster grid) */ .role-tag { font-family: 'Cinzel', serif; font-size: 10px; font-weight: 700; letter-spacing: .08em; } /* Vote reveal (suspense mode) */ .vote-line { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: 'Cinzel', serif; font-weight: 700; font-size: 20px; color: var(--ink); } .vote-arrow { margin: 14px 0; font-family: 'Cinzel', serif; letter-spacing: .2em; font-size: 11px; text-transform: uppercase; color: #8a6a2f; } /* Per-voter ballot card: the portrait is the headline, name is a caption below it. */ .flip.vote .vote-line { flex-direction: column-reverse; gap: 12px; } .flip.vote .vote-line .avatar { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 12px; font-size: 72px; } .flip.vote .face.front { padding: 14px; } /* Dawn reveal: the fallen/spared player's portrait is the focal point. */ .dawn-portrait { display: flex; justify-content: center; margin: 8px 0 16px; } .dawn-portrait .avatar { width: 100%; height: auto; aspect-ratio: 1 / 1; position: relative; border-radius: 14px; font-size: 88px; } /* Elimination reveal: the portrait starts in full colour and drains to its fate tint (grey for banished, grey + blood-red for slain). Ends matching the static .avatar.banished / .avatar.slain look so later screens stay consistent. */ .dawn-portrait.fade-banished .avatar { animation: drain-grey 1.5s ease-out .3s both; } .dawn-portrait.fade-slain .avatar { animation: drain-slain 1.5s ease-out .3s both; } .dawn-portrait.fade-slain .avatar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(120,18,18,.30); mix-blend-mode: multiply; animation: fade-in 1.5s ease-out .3s both; } @keyframes drain-grey { from { filter: none; } to { filter: grayscale(.5); } } @keyframes drain-slain { from { filter: none; } to { filter: grayscale(1) contrast(.95) brightness(.92); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* A dead player's avatar anywhere it appears: banished drains to grey, killed drains to grey with a blood-red tint. */ .avatar.banished, .avatar.slain { position: relative; } .avatar.banished, .avatar.banished .avatar-img { filter: grayscale(0.5); } .avatar.slain, .avatar.slain .avatar-img { filter: grayscale(1) contrast(.95) brightness(.92); } .avatar.slain::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(120,18,18,.30); mix-blend-mode: multiply; } .vote-choice { color: #9e3b2f; } /* All-ballots-at-once list */ .vote-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; } .vote-row { display: flex; align-items: center; gap: 8px; justify-content: center; font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 13px; } .vote-row .avatar { width: 28px; height: 28px; font-size: 11px; } .vr-name { max-width: 5.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vr-arrow { color: var(--muted); margin: 0 2px; } /* Debate hourglass (sand drains over --dur; the screen's button skips it) */ .hourglass { position: relative; width: 78px; margin: 18px auto 8px; display: flex; flex-direction: column; align-items: center; } .hourglass .cap { width: 78px; height: 7px; border-radius: 4px; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); box-shadow: 0 1px 0 #5e4720; } .hourglass .bulb { width: 64px; height: 46px; position: relative; overflow: hidden; background: rgba(255,255,255,.05); } .hourglass .bulb.top { clip-path: polygon(0 0, 100% 0, 50% 100%); } .hourglass .bulb.bottom { clip-path: polygon(50% 0, 0 100%, 100% 100%); } .hourglass .sand { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #e8c873, #c9a24a); } .hourglass .bulb.top .sand { height: 100%; animation: hg-drain var(--dur,60s) linear forwards; } .hourglass .bulb.bottom .sand { height: 0; animation: hg-fill var(--dur,60s) linear forwards; } @keyframes hg-drain { from { height: 100%; } to { height: 0; } } @keyframes hg-fill { from { height: 0; } to { height: 100%; } } .hourglass::after { content: ""; position: absolute; top: calc(50% + 10px); left: 50%; transform: translate(-50%, -50%); width: 2px; height: 20px; background: linear-gradient(#e8c873, rgba(232,200,115,0)); animation: hg-stream .6s linear infinite; } @keyframes hg-stream { 0%,100% { opacity: .25; } 50% { opacity: .9; } } .timer { font-family: 'Cinzel', Georgia, serif; font-size: 22px; letter-spacing: .12em; color: var(--gold-bright); margin: 2px 0 8px; } .timer.up { color: var(--red); animation: pulse 1.2s ease-in-out infinite; } /* Role reveal card (flip) */ .reveal { perspective: 1200px; margin: auto 0; } .flip { position: relative; width: 100%; aspect-ratio: 3/4; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.7,.2,1); } .flip.flipped { transform: rotateY(180deg); } .flip.vote { aspect-ratio: 4 / 5; } /* per-voter reveal — portrait fills the card */ .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 14px; padding: 26px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px rgba(201,162,74,.4), 0 10px 30px rgba(0,0,0,.5); } .face.back { background: radial-gradient(120% 90% at 50% 0%, #2c2013, #160f08); border: 1px solid #7a5d28; cursor: pointer; } .face.front { background: linear-gradient(180deg, var(--parch), var(--parch-2)); border: 1px solid #7a5d28; color: var(--ink); transform: rotateY(180deg); } .face.front p { color: #4a3719; font-size: 17px; } .face .glyph { font-size: 58px; margin-bottom: 16px; filter: sepia(.6) saturate(1.3) brightness(.95); } .face.back .glyph { filter: none; text-shadow: 0 0 18px rgba(232,200,115,.6); } .role-name { font-family: 'Cinzel', Georgia, serif; font-size: 30px; font-weight: 700; letter-spacing: .08em; } .role-guardian { color: #3f5f86; } /* shown on parchment — darker steel blue */ .role-virtuous { color: #4f7a2f; } /* (on parchment if used) */ .role-assassin { color: var(--red); } .scene-emoji { font-size: 56px; text-align: center; margin: auto auto 6px; filter: sepia(.6) saturate(1.3) brightness(.95) drop-shadow(0 2px 8px rgba(0,0,0,.5)); } /* Status pills */ .pill { display: inline-block; padding: 5px 12px; border-radius: 999px; font-family: 'Cinzel', Georgia, serif; font-size: 11px; font-weight: 600; letter-spacing: .06em; border: 1px solid var(--line); color: var(--gold); } /* 2-step "Vote › Special" progress hint for the Assassin/Guardian turn. */ .stepper { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px auto 2px; font-family: 'Cinzel', Georgia, serif; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .stepper .step { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); opacity: .55; } .stepper .step-num { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; font-size: 10px; border: 1px solid var(--line); color: var(--muted); } .stepper .step.active { color: var(--gold-bright); opacity: 1; } .stepper .step.active .step-num { border-color: var(--gold-bright); color: #221708; background: var(--gold-bright); } .stepper .step.done { color: var(--gold); opacity: .85; } .stepper .step.done .step-num { border-color: var(--gold); color: var(--gold); } .stepper .step-sep { color: var(--line); } @media (min-width: 460px) { body { padding: 24px; } }