/* asciichat — themeable CRT styling Each theme overrides 5 base colors + scanline tint via CSS variables. Font is swappable via --font. */ :root { /* Defaults (Matrix theme) — overridden by .theme-* on */ --green: #33ff66; --green-dim: #1a8033; --green-them: #88ffbb; --bg: #001100; --bg-deep: #000a00; --scanline: rgba(0,30,0,0.30); --vignette: rgba(0,0,0,0.55); /* Neutral text colors — readable on every background, distinct from accent */ --text: #e8e8e8; --text-dim: #9a9a9a; --font: 'IBM Plex Mono', Menlo, Monaco, Consolas, ui-monospace, monospace; } /* Light themes need dark neutral text */ .theme-paper { --text:#1a1a1a; --text-dim:#5a5a5a; } /* Saturated red bg needs near-white text */ .theme-hotdog { --text:#ffffff; --text-dim:#f6dcdc; } /* ---------- 20 THEMES ---------- */ .theme-matrix { --green:#33ff66; --green-dim:#1a8033; --green-them:#88ffbb; --bg:#001100; --bg-deep:#000a00; --scanline:rgba(0,30,0,0.30); --vignette:rgba(0,0,0,0.55); } .theme-amber { --green:#ffb000; --green-dim:#7a5500; --green-them:#ffd56b; --bg:#1a0e00; --bg-deep:#0d0700; --scanline:rgba(40,20,0,0.30); --vignette:rgba(0,0,0,0.55); } .theme-cyan { --green:#22ffff; --green-dim:#0a7c7c; --green-them:#aaffff; --bg:#001818; --bg-deep:#000a0d; --scanline:rgba(0,30,30,0.30); --vignette:rgba(0,0,0,0.55); } .theme-vt220 { --green:#e8e8e8; --green-dim:#7a7a7a; --green-them:#ffffff; --bg:#0c0c0c; --bg-deep:#000000; --scanline:rgba(20,20,20,0.40); --vignette:rgba(0,0,0,0.55); } .theme-hacker { --green:#ff3344; --green-dim:#7a1118; --green-them:#ff8895; --bg:#1a0205; --bg-deep:#0a0103; --scanline:rgba(40,0,5,0.30); --vignette:rgba(0,0,0,0.55); } .theme-nord { --green:#88c0d0; --green-dim:#5e81ac; --green-them:#a3be8c; --bg:#2e3440; --bg-deep:#242933; --scanline:rgba(46,52,64,0.40); --vignette:rgba(0,0,0,0.45); } .theme-gruvbox { --green:#fabd2f; --green-dim:#b57614; --green-them:#b8bb26; --bg:#282828; --bg-deep:#1d2021; --scanline:rgba(40,40,40,0.40); --vignette:rgba(0,0,0,0.45); } .theme-soldark { --green:#268bd2; --green-dim:#586e75; --green-them:#2aa198; --bg:#073642; --bg-deep:#002b36; --scanline:rgba(7,54,66,0.40); --vignette:rgba(0,0,0,0.45); } .theme-dracula { --green:#bd93f9; --green-dim:#6272a4; --green-them:#ff79c6; --bg:#282a36; --bg-deep:#1e1f29; --scanline:rgba(40,42,54,0.40); --vignette:rgba(0,0,0,0.45); } .theme-tokyo { --green:#7aa2f7; --green-dim:#414868; --green-them:#bb9af7; --bg:#1a1b26; --bg-deep:#16161e; --scanline:rgba(26,27,38,0.40); --vignette:rgba(0,0,0,0.50); } .theme-synth { --green:#ff6ec7; --green-dim:#7a3a64; --green-them:#36f9f6; --bg:#241734; --bg-deep:#1a0033; --scanline:rgba(36,23,52,0.40); --vignette:rgba(0,0,0,0.45); } .theme-cyberpunk { --green:#fcee0a; --green-dim:#7a7305; --green-them:#00f0ff; --bg:#0d0221; --bg-deep:#050118; --scanline:rgba(13,2,33,0.40); --vignette:rgba(0,0,0,0.55); } .theme-monokai { --green:#a6e22e; --green-dim:#75715e; --green-them:#f92672; --bg:#272822; --bg-deep:#1e1f1c; --scanline:rgba(39,40,34,0.40); --vignette:rgba(0,0,0,0.45); } .theme-onedark { --green:#61afef; --green-dim:#5c6370; --green-them:#c678dd; --bg:#282c34; --bg-deep:#21252b; --scanline:rgba(40,44,52,0.40); --vignette:rgba(0,0,0,0.45); } .theme-catppuccin { --green:#cba6f7; --green-dim:#6c7086; --green-them:#f5c2e7; --bg:#1e1e2e; --bg-deep:#181825; --scanline:rgba(30,30,46,0.40); --vignette:rgba(0,0,0,0.45); } .theme-rosepine { --green:#ebbcba; --green-dim:#6e6a86; --green-them:#c4a7e7; --bg:#26233a; --bg-deep:#191724; --scanline:rgba(38,35,58,0.40); --vignette:rgba(0,0,0,0.45); } .theme-hotdog { --green:#ffff00; --green-dim:#7a7a00; --green-them:#ffffff; --bg:#cc0000; --bg-deep:#aa0000; --scanline:rgba(180,0,0,0.30); --vignette:rgba(0,0,0,0.30); } .theme-paper { --green:#1a1a1a; --green-dim:#666666; --green-them:#222222; --bg:#fdf6e3; --bg-deep:#f5eed4; --scanline:rgba(120,110,80,0.18); --vignette:rgba(0,0,0,0.18); } .theme-vampire { --green:#ff5555; --green-dim:#7a2828; --green-them:#ff79c6; --bg:#1a0008; --bg-deep:#0d0005; --scanline:rgba(40,0,15,0.30); --vignette:rgba(0,0,0,0.55); } .theme-mint { --green:#aff8d8; --green-dim:#458a6a; --green-them:#7fffd4; --bg:#001a14; --bg-deep:#000d0a; --scanline:rgba(0,30,25,0.30); --vignette:rgba(0,0,0,0.55); } /* ---------- 20 FONTS ---------- */ .font-ibm { --font: 'IBM Plex Mono', ui-monospace, monospace; } .font-jetbrains { --font: 'JetBrains Mono', ui-monospace, monospace; } .font-fira { --font: 'Fira Code', ui-monospace, monospace; } .font-source { --font: 'Source Code Pro', ui-monospace, monospace; } .font-inconsolata{ --font: 'Inconsolata', ui-monospace, monospace; } .font-space { --font: 'Space Mono', ui-monospace, monospace; } .font-roboto { --font: 'Roboto Mono', ui-monospace, monospace; } .font-ubuntu { --font: 'Ubuntu Mono', ui-monospace, monospace; } .font-cousine { --font: 'Cousine', ui-monospace, monospace; } .font-anonymous { --font: 'Anonymous Pro', ui-monospace, monospace; } .font-cutive { --font: 'Cutive Mono', ui-monospace, monospace; } .font-vt323 { --font: 'VT323', ui-monospace, monospace; } .font-pressstart { --font: 'Press Start 2P', ui-monospace, monospace; } .font-major { --font: 'Major Mono Display', ui-monospace, monospace; } .font-sharetech { --font: 'Share Tech Mono', ui-monospace, monospace; } .font-nova { --font: 'Nova Mono', ui-monospace, monospace; } .font-overpass { --font: 'Overpass Mono', ui-monospace, monospace; } .font-redhat { --font: 'Red Hat Mono', ui-monospace, monospace; } .font-dm { --font: 'DM Mono', ui-monospace, monospace; } .font-courier { --font: 'Courier Prime', ui-monospace, monospace; } * { box-sizing: border-box; } html, body { background: var(--bg-deep); color: var(--green); font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; margin: 0; height: 100%; width: 100%; max-width: 100vw; overflow: hidden; } /* CRT vignette */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, var(--vignette) 100%); pointer-events: none; z-index: 5; } /* CRT scanlines removed for clarity */ body::after { content: none; } /* offscreen helpers */ #cam, #cv, #peer-audio { position: absolute; left: -9999px; top: -9999px; } /* Tap-to-start overlay (iOS gesture requirement) */ .start-overlay { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--bg-deep); color: var(--green); font-family: inherit; border: none; cursor: pointer; text-shadow: 0 0 4px var(--green); -webkit-tap-highlight-color: transparent; } .start-overlay:active { background: color-mix(in srgb, var(--bg) 70%, var(--bg-deep)); } .ascii-logo { display: block; margin: 0 0 4px; padding: 0; font-family: inherit; font-size: clamp(4px, 1.65vw, 13px); line-height: 1.05; letter-spacing: 0; white-space: pre; color: var(--green); text-shadow: 0 0 4px var(--green), 0 0 12px color-mix(in srgb, var(--green) 55%, transparent), 0 0 24px color-mix(in srgb, var(--green) 28%, transparent); clip-path: inset(0 100% 0 0); animation: asciilogo-reveal 1.6s steps(60, end) 0.15s forwards, asciilogo-flicker 4.2s ease-in-out 1.8s infinite, asciilogo-pulse 2.8s ease-in-out 1.8s infinite; will-change: clip-path, opacity, text-shadow; } .ascii-logo-cursor { display: inline-block; color: var(--green-them); animation: asciilogo-blink 0.9s steps(2, end) infinite; } @keyframes asciilogo-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes asciilogo-pulse { 0%, 100% { text-shadow: 0 0 4px var(--green), 0 0 12px color-mix(in srgb, var(--green) 55%, transparent), 0 0 24px color-mix(in srgb, var(--green) 28%, transparent); } 50% { text-shadow: 0 0 6px var(--green), 0 0 18px color-mix(in srgb, var(--green) 70%, transparent), 0 0 36px color-mix(in srgb, var(--green) 40%, transparent); } } @keyframes asciilogo-flicker { 0%, 100% { opacity: 1; } 3%, 6% { opacity: 0.55; } 4% { opacity: 0.85; } 47%, 49% { opacity: 0.7; } 48% { opacity: 1; } 72% { opacity: 0.6; } 73% { opacity: 1; } } @keyframes asciilogo-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ascii-logo { animation: asciilogo-reveal 0.001s steps(1) forwards; } .ascii-logo-cursor { animation: none; } } .start-tag { font-size: 11px; letter-spacing: 3px; color: var(--green-dim); text-shadow: 0 0 2px var(--green-dim); margin-bottom: 6px; text-transform: uppercase; } .start-big { font-size: 32px; letter-spacing: 6px; animation: blink 1.2s infinite; } .start-sub { font-size: 13px; letter-spacing: 2px; color: var(--green-dim); text-shadow: 0 0 2px var(--green-dim); } @keyframes blink { 50% { opacity: 0.4; } } .start-overlay.hidden { display: none; } .frame { position: relative; z-index: 0; display: grid; grid-template-rows: auto 1fr auto; height: 100vh; height: 100dvh; width: 100%; max-width: 100vw; padding: 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-bottom:max(12px, env(safe-area-inset-bottom)); gap: 10px; overflow: hidden; } /* Top bar: logo + status + theme/font selectors */ .topbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--green-dim); background: color-mix(in srgb, var(--bg) 60%, transparent); padding: 4px 10px; min-width: 0; } .logo { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; font-weight: 700; font-size: 17px; letter-spacing: 3px; color: var(--green); text-shadow: 0 0 4px color-mix(in srgb, var(--green) 60%, transparent); padding-right: 10px; margin-right: 4px; border-right: 1px dashed var(--green-dim); user-select: none; } .logo-bracket { color: var(--green-dim); font-weight: 400; letter-spacing: 0; } .logo-text { background: linear-gradient(180deg, var(--green) 0%, var(--green-them) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .logo-cursor { display: inline-block; width: 0.5em; height: 1em; background: var(--green); margin-left: 1px; animation: logo-blink 1.05s steps(1, end) infinite; } @keyframes logo-blink { 50% { opacity: 0; } } .status { flex: 1 1 auto; min-width: 120px; text-align: left; text-shadow: 0 0 2px var(--green); font-size: 14px; letter-spacing: 2px; padding: 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* animated dots when searching for a stranger */ .status .status-dots { display: inline-block; margin-left: 1px; } .status .status-dots span { display: inline-block; opacity: 0.2; animation: status-dot 1.2s infinite; text-shadow: 0 0 4px var(--green); } .status .status-dots span:nth-child(2) { animation-delay: 0.18s; } .status .status-dots span:nth-child(3) { animation-delay: 0.36s; } @keyframes status-dot { 0%, 70%, 100% { opacity: 0.2; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } } /* live online-user counter */ .users { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 2px; color: var(--text-dim); padding: 4px 8px; border: 1px solid var(--green-dim); border-radius: 2px; flex: 0 0 auto; background: color-mix(in srgb, var(--bg-deep) 60%, transparent); } .users-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: users-pulse 1.6s ease-in-out infinite; } .users #users-count { color: var(--green); font-weight: 700; letter-spacing: 0; } @keyframes users-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.85); } } .settings { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .sel { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); letter-spacing: 1px; } .sel select { background: color-mix(in srgb, var(--bg-deep) 85%, transparent); color: var(--text); border: 1px solid var(--green-dim); font-family: inherit; font-size: 13px; padding: 4px 8px; letter-spacing: 0.5px; cursor: pointer; outline: none; max-width: 160px; } .sel select:hover { border-color: var(--green); } .sel select option { background: var(--bg-deep); color: var(--text); } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; } .pane { display: flex; flex-direction: column; border: 1px solid var(--green-dim); padding: 8px; min-height: 0; min-width: 0; overflow: hidden; background: color-mix(in srgb, var(--bg) 50%, transparent); container-type: inline-size; gap: 6px; } .pane-title { font-size: 12px; letter-spacing: 2px; color: var(--text-dim); flex: 0 0 auto; } .feed { margin: 0; flex: 1 1 auto; /* Auto-fit ASCII grid: 80 chars wide → ~2cqi per char */ font-size: clamp(4px, 1.95cqi, 13px); line-height: 1.0; color: var(--green); white-space: pre; overflow: hidden; font-family: inherit; letter-spacing: 0; display: flex; align-items: center; justify-content: center; text-align: left; min-height: 0; } /* Per-pane action button (MUTE under YOU, SKIP under STRANGER) */ .pane-btn { flex: 0 0 auto; align-self: stretch; background: transparent; border: 1px solid var(--green); color: var(--green); font-family: inherit; font-size: 13px; letter-spacing: 3px; padding: 8px 10px; cursor: pointer; transition: background 80ms; } .pane-btn:hover { background: var(--green); color: var(--bg-deep); } .pane-btn:active { transform: translateY(1px); } .pane-btn.muted { border-color: #ff6666; color: #ff6666; } .pane-btn.muted:hover { background: #ff6666; color: var(--bg-deep); } /* Stranger pane: SKIP + REPORT side by side */ .pane-btn-row { display: flex; gap: 6px; } .pane-btn-row .pane-btn { flex: 1 1 auto; } .report-btn { border-color: #ff5577; color: #ff8899; flex: 0 1 auto; min-width: 92px; } .report-btn:hover { background: #ff3355; border-color: #ff3355; color: #fff; } .report-btn.confirming { background: #ff3355; color: #fff; border-color: #ff3355; animation: report-pulse 0.5s ease-in-out 2; } @keyframes report-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(255,51,85,0); } 50% { box-shadow: 0 0 12px rgba(255,51,85,0.7); } } .chat { display: flex; flex-direction: column; border: 1px solid var(--green-dim); padding: 10px; min-height: 180px; max-height: 38vh; background: color-mix(in srgb, var(--bg) 50%, transparent); } .log { margin: 0 0 6px 0; flex: 1; overflow-y: auto; overflow-x: hidden; font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; font-family: inherit; color: var(--text); scrollbar-width: thin; scrollbar-color: var(--green-dim) transparent; } .log::-webkit-scrollbar { width: 6px; } .log::-webkit-scrollbar-thumb { background: var(--green-dim); } .log .me { color: var(--green); } .log .them { color: var(--text); } .log .sys { color: var(--text-dim); font-style: italic; } .typing { font-size: 14px; font-style: italic; letter-spacing: 0.5px; color: var(--text); height: 0; opacity: 0; overflow: hidden; transition: height 120ms ease, opacity 120ms ease; padding: 0; } .typing.active { height: 22px; opacity: 1; padding-bottom: 2px; } .typing-dots { display: inline-block; margin-left: 4px; letter-spacing: 2px; } .typing-dots span { display: inline-block; animation: typing-bounce 1.1s infinite ease-in-out; } .typing-dots span:nth-child(2) { animation-delay: 0.15s; } .typing-dots span:nth-child(3) { animation-delay: 0.30s; } @keyframes typing-bounce { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } } .input-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; border-top: 1px dashed var(--green-dim); padding-top: 8px; min-width: 0; } .prompt { color: var(--green-dim); font-size: 16px; flex: 0 0 auto; } #msg { flex: 1 1 120px; min-width: 0; background: transparent; border: none; color: var(--text); font-family: inherit; font-size: 16px; outline: none; caret-color: var(--green); padding: 4px 0; } #msg::placeholder { color: var(--text-dim); } .enter-btn { flex: 0 0 auto; background: var(--green); color: var(--bg-deep); border: 1px solid var(--green); font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 2px; padding: 7px 14px; cursor: pointer; transition: background 80ms; } .enter-btn:hover { background: var(--green-them); border-color: var(--green-them); } .enter-btn:active { transform: translateY(1px); } .enter-btn[disabled] { opacity: 0.45; cursor: not-allowed; } /* Narrow screens */ @media (max-width: 720px) { .frame { padding: 6px; gap: 6px; padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); padding-bottom:max(6px, env(safe-area-inset-bottom)); } .grid { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .chat { min-height: 110px; max-height: 180px; padding: 8px; } .logo { font-size: 14px; letter-spacing: 2px; padding-right: 8px; margin-right: 4px; } .logo-bracket { display: none; } .users { font-size: 10px; letter-spacing: 1px; padding: 3px 6px; } .users-dot { width: 6px; height: 6px; } .status { font-size: 13px; letter-spacing: 1px; } .report-btn { min-width: 70px; font-size: 11px; } .pane-title { font-size: 11px; } .pane { padding: 6px; gap: 4px; } .pane-btn { font-size: 12px; letter-spacing: 2px; padding: 7px; } .log { font-size: 14px; line-height: 1.5; } #msg { font-size: 16px; flex-basis: 100px; } .enter-btn { font-size: 12px; letter-spacing: 1.5px; padding: 6px 10px; } .typing { font-size: 13px; } .sel { font-size: 11px; } .sel select { font-size: 12px; padding: 3px 6px; max-width: 130px; } .sel span { display: none; } /* hide labels, keep dropdowns */ }