gitcat — gitlawb

repository

loading code, commits, and activity

repositories

loading repo index

gitcat — gitlawb

#1	:root {
#2	color-scheme: dark;
#3	font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
#4	line-height: 1.4;
#5	}
#6
#7	* {
#8	box-sizing: border-box;
#9	margin: 0;
#10	padding: 0;
#11	}
#12
#13	html, body, #root {
#14	min-height: 100vh;
#15	min-height: 100dvh;
#16	background: #000;
#17	color: #fff;
#18	overflow-x: hidden;
#19	user-select: none;
#20	-webkit-user-select: none;
#21	-webkit-tap-highlight-color: transparent;
#22	touch-action: manipulation;
#23	}
#24
#25	.app {
#26	min-height: 100vh;
#27	min-height: 100dvh;
#28	display: flex;
#29	flex-direction: column;
#30	align-items: center;
#31	position: relative;
#32	}
#33
#34	/* Particles canvas */
#35	.particles-canvas {
#36	position: fixed;
#37	inset: 0;
#38	width: 100%;
#39	height: 100%;
#40	pointer-events: none;
#41	z-index: 100;
#42	}
#43
#44	/* Brand link */
#45	.brand-link {
#46	position: absolute;
#47	top: 0.75rem;
#48	left: 0.75rem;
#49	display: flex;
#50	align-items: center;
#51	gap: 0.45rem;
#52	text-decoration: none;
#53	z-index: 20;
#54	padding: 0.3rem 0.55rem 0.3rem 0.3rem;
#55	border-radius: 999px;
#56	background: rgba(255, 255, 255, 0.04);
#57	border: 1px solid rgba(255, 255, 255, 0.06);
#58	backdrop-filter: blur(8px);
#59	-webkit-backdrop-filter: blur(8px);
#60	transition: background 0.25s, border-color 0.25s;
#61	}
#62
#63	.brand-link:hover {
#64	background: rgba(255, 255, 255, 0.08);
#65	border-color: rgba(255, 255, 255, 0.12);
#66	}
#67
#68	.brand-avatar {
#69	width: 28px;
#70	height: 28px;
#71	border-radius: 50%;
#72	object-fit: cover;
#73	border: 1.5px solid rgba(255, 255, 255, 0.15);
#74	flex-shrink: 0;
#75	}
#76
#77	.brand-handle {
#78	font-size: 0.75rem;
#79	font-weight: 600;
#80	color: rgba(255, 255, 255, 0.85);
#81	letter-spacing: 0.01em;
#82	text-shadow: 0 0 12px rgba(255, 255, 255, 0.3), 0 0 24px rgba(255, 255, 255, 0.1);
#83	white-space: nowrap;
#84	}
#85
#86	/* Top bar */
#87	.top-bar {
#88	width: 100%;
#89	max-width: 600px;
#90	display: flex;
#91	justify-content: space-between;
#92	align-items: flex-start;
#93	padding: 1rem 1.5rem;
#94	z-index: 10;
#95	}
#96
#97	.title {
#98	font-size: clamp(2rem, 8vw, 3.5rem);
#99	font-weight: 900;
#100	letter-spacing: -0.03em;
#101	color: #fff;
#102	text-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
#103	background: linear-gradient(135deg, #fff 0%, #F05032 100%);
#104	-webkit-background-clip: text;
#105	-webkit-text-fill-color: transparent;
#106	background-clip: text;
#107	}
#108
#109	.score-box {
#110	text-align: right;
#111	}
#112
#113	.score-label {
#114	font-size: 0.75rem;
#115	text-transform: uppercase;
#116	letter-spacing: 0.15em;
#117	color: rgba(255, 255, 255, 0.45);
#118	margin-bottom: 0.15rem;
#119	}
#120
#121	.score-value {
#122	font-size: clamp(1rem, 4vw, 1.6rem);
#123	font-weight: 700;
#124	font-variant-numeric: tabular-nums;
#125	color: rgba(255, 255, 255, 0.7);
#126	}
#127
#128	/* Main area */
#129	.main-area {
#130	flex: 1;
#131	display: flex;
#132	flex-direction: column;
#133	align-items: center;
#134	justify-content: center;
#135	gap: 0.5rem;
#136	padding: 0 1rem;
#137	z-index: 10;
#138	max-width: 100%;
#139	}
#140
#141	/* Combo badge */
#142	.combo-badge {
#143	font-size: clamp(1rem, 4vw, 1.5rem);
#144	font-weight: 900;
#145	color: #F05032;
#146	text-shadow: 0 0 20px rgba(240, 80, 50, 0.6);
#147	animation: combo-pulse 0.3s ease-out;
#148	text-align: center;
#149	}
#150
#151	@keyframes combo-pulse {
#152	0% { transform: scale(1.8); opacity: 0.5; }
#153	100% { transform: scale(1); opacity: 1; }
#154	}
#155
#156	/* Pop count */
#157	.pop-count {
#158	font-size: clamp(2.5rem, 14vw, 6rem);
#159	font-weight: 900;
#160	font-variant-numeric: tabular-nums;
#161	color: #fff;
#162	text-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
#163	text-align: center;
#164	line-height: 1.1;
#165	transition: transform 0.08s ease-out;
#166	}
#167
#168	/* Cat container */
#169	.cat-container {
#170	width: clamp(200px, 60vw, 380px);
#171	cursor: pointer;
#172	position: relative;
#173	transition: transform 0.08s ease-out;
#174	}
#175
#176	.cat-container:active {
#177	transform: scale(0.95) !important;
#178	}
#179
#180	.cat-bounce {
#181	animation: cat-bounce-anim 0.1s ease-out;
#182	}
#183
#184	@keyframes cat-bounce-anim {
#185	0% { transform: scale(0.92); }
#186	50% { transform: scale(1.08); }
#187	100% { transform: scale(1); }
#188	}
#189
#190	.cat-glow {
#191	position: absolute;
#192	inset: -30px;
#193	border-radius: 50%;
#194	background: radial-gradient(circle, rgba(240, 80, 50, 0) 40%, rgba(240, 80, 50, 0) 100%);
#195	transition: background 0.1s;
#196	pointer-events: none;
#197	z-index: -1;
#198	}
#199
#200	.cat-glow.glow-active {
#201	background: radial-gradient(circle, rgba(240, 80, 50, 0.3) 0%, rgba(240, 80, 50, 0) 70%);
#202	}
#203
#204	/* Hint */
#205	.hint {
#206	font-size: 0.8rem;
#207	color: rgba(255, 255, 255, 0.25);
#208	text-align: center;
#209	margin-top: 0.25rem;
#210	}
#211
#212	/* Leaderboard */
#213	.leaderboard {
#214	width: 100%;
#215	max-width: 550px;
#216	padding: 0 1.5rem 1rem;
#217	z-index: 10;
#218	}
#219
#220	.leaderboard-worldwide {
#221	display: flex;
#222	justify-content: space-between;
#223	align-items: baseline;
#224	padding: 0.75rem 0;
#225	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
#226	margin-bottom: 0.5rem;
#227	}
#228
#229	.leaderboard-label {
#230	font-size: 0.9rem;
#231	font-weight: 700;
#232	color: rgba(255, 255, 255, 0.7);
#233	}
#234
#235	.leaderboard-value {
#236	font-size: clamp(1rem, 4vw, 1.4rem);
#237	font-weight: 800;
#238	color: #FFD700;
#239	font-variant-numeric: tabular-nums;
#240	}
#241
#242	.leaderboard-list {
#243	display: flex;
#244	flex-direction: column;
#245	gap: 0.3rem;
#246	}
#247
#248	.leaderboard-row {
#249	display: grid;
#250	grid-template-columns: 1.5rem 1.5rem 5rem 1fr auto;
#251	align-items: center;
#252	gap: 0.5rem;
#253	font-size: 0.8rem;
#254	padding: 0.25rem 0;
#255	}
#256
#257	.leaderboard-rank {
#258	color: rgba(255, 255, 255, 0.35);
#259	font-weight: 700;
#260	text-align: center;
#261	font-size: 0.75rem;
#262	}
#263
#264	.leaderboard-flag {
#265	font-size: 1rem;
#266	}
#267
#268	.leaderboard-country {
#269	color: rgba(255, 255, 255, 0.6);
#270	font-weight: 500;
#271	font-size: 0.75rem;
#272	overflow: hidden;
#273	text-overflow: ellipsis;
#274	white-space: nowrap;
#275	min-width: 0;
#276	}
#277
#278	.leaderboard-bar-bg {
#279	height: 6px;
#280	background: rgba(255, 255, 255, 0.06);
#281	border-radius: 3px;
#282	overflow: hidden;
#283	}
#284
#285	.leaderboard-bar {
#286	height: 100%;
#287	background: linear-gradient(90deg, #F05032, #FFD700);
#288	border-radius: 3px;
#289	transition: width 0.5s ease;
#290	}
#291
#292	.leaderboard-count {
#293	font-variant-numeric: tabular-nums;
#294	color: rgba(255, 255, 255, 0.5);
#295	font-size: 0.7rem;
#296	min-width: 5rem;
#297	text-align: right;
#298	}
#299
#300	/* Restart */
#301	.restart-trigger {
#302	position: fixed;
#303	bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
#304	right: 0.75rem;
#305	background: rgba(255, 255, 255, 0.06);
#306	border: 1px solid rgba(255, 255, 255, 0.1);
#307	color: rgba(255, 255, 255, 0.35);
#308	font-size: 0.75rem;
#309	min-height: 44px;
#310	padding: 0.5rem 0.85rem;
#311	border-radius: 6px;
#312	cursor: pointer;
#313	z-index: 20;
#314	transition: background 0.2s, color 0.2s;
#315	}
#316
#317	.restart-trigger:hover {
#318	background: rgba(255, 255, 255, 0.12);
#319	color: rgba(255, 255, 255, 0.6);
#320	}
#321
#322	.restart-panel {
#323	position: fixed;
#324	bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
#325	right: 0.75rem;
#326	left: 0.75rem;
#327	max-width: 320px;
#328	margin-left: auto;
#329	background: rgba(20, 20, 20, 0.95);
#330	border: 1px solid rgba(255, 255, 255, 0.15);
#331	border-radius: 10px;
#332	padding: 1rem;
#333	z-index: 20;
#334	display: flex;
#335	flex-direction: column;
#336	gap: 0.5rem;
#337	backdrop-filter: blur(10px);
#338	}
#339
#340	.restart-panel p {
#341	font-size: 0.85rem;
#342	color: rgba(255, 255, 255, 0.7);
#343	}
#344
#345	.restart-btn {
#346	background: #F05032;
#347	border: none;
#348	color: #fff;
#349	font-weight: 700;
#350	min-height: 44px;
#351	padding: 0.5rem 1rem;
#352	border-radius: 6px;
#353	cursor: pointer;
#354	font-size: 0.85rem;
#355	transition: opacity 0.2s;
#356	}
#357
#358	.restart-btn:hover {
#359	opacity: 0.85;
#360	}
#361
#362	.restart-btn.cancel {
#363	background: transparent;
#364	border: 1px solid rgba(255, 255, 255, 0.15);
#365	color: rgba(255, 255, 255, 0.5);
#366	}
#367
#368	/* Tip / Support */
#369	.tip-trigger {
#370	background: linear-gradient(135deg, #F05032, #FF6B4A);
#371	border: none;
#372	color: #fff;
#373	font-weight: 700;
#374	font-size: 0.85rem;
#375	min-height: 44px;
#376	padding: 0.6rem 1.4rem;
#377	border-radius: 8px;
#378	cursor: pointer;
#379	z-index: 10;
#380	margin: 0.5rem 0 0.25rem;
#381	box-shadow: 0 2px 12px rgba(240, 80, 50, 0.3);
#382	transition: transform 0.15s, box-shadow 0.15s;
#383	}
#384
#385	.tip-trigger:hover {
#386	transform: translateY(-1px);
#387	box-shadow: 0 4px 18px rgba(240, 80, 50, 0.45);
#388	}
#389
#390	.tip-trigger:active {
#391	transform: scale(0.97);
#392	}
#393
#394	.tip-panel {
#395	width: 100%;
#396	max-width: 360px;
#397	background: rgba(18, 18, 18, 0.96);
#398	border: 1px solid rgba(255, 255, 255, 0.1);
#399	border-radius: 12px;
#400	padding: 1.1rem;
#401	z-index: 20;
#402	display: flex;
#403	flex-direction: column;
#404	gap: 0.7rem;
#405	backdrop-filter: blur(12px);
#406	-webkit-backdrop-filter: blur(12px);
#407	margin: 0.5rem 1rem;
#408	}
#409
#410	.tip-header {
#411	display: flex;
#412	justify-content: space-between;
#413	align-items: center;
#414	}
#415
#416	.tip-title {
#417	font-weight: 800;
#418	font-size: 0.95rem;
#419	color: rgba(255, 255, 255, 0.9);
#420	}
#421
#422	.tip-disconnect {
#423	background: rgba(255, 255, 255, 0.06);
#424	border: 1px solid rgba(255, 255, 255, 0.1);
#425	color: rgba(255, 255, 255, 0.5);
#426	font-size: 0.65rem;
#427	font-family: monospace;
#428	padding: 0.3rem 0.5rem;
#429	border-radius: 6px;
#430	cursor: pointer;
#431	transition: background 0.2s;
#432	}
#433
#434	.tip-disconnect:hover {
#435	background: rgba(255, 255, 255, 0.1);
#436	}
#437
#438	.tip-presets {
#439	display: flex;
#440	gap: 0.5rem;
#441	}
#442
#443	.tip-preset {
#444	flex: 1;
#445	background: rgba(255, 255, 255, 0.05);
#446	border: 1px solid rgba(255, 255, 255, 0.1);
#447	color: rgba(255, 255, 255, 0.6);
#448	font-size: 0.8rem;
#449	font-weight: 600;
#450	padding: 0.55rem 0.3rem;
#451	border-radius: 8px;
#452	cursor: pointer;
#453	min-height: 44px;
#454	transition: background 0.15s, border-color 0.15s, color 0.15s;
#455	}
#456
#457	.tip-preset:hover {
#458	background: rgba(240, 80, 50, 0.1);
#459	border-color: rgba(240, 80, 50, 0.3);
#460	}
#461
#462	.tip-preset.active {
#463	background: rgba(240, 80, 50, 0.15);
#464	border-color: #F05032;
#465	color: #fff;
#466	}
#467
#468	.tip-custom-input {
#469	width: 100%;
#470	background: rgba(255, 255, 255, 0.05);
#471	border: 1px solid rgba(255, 255, 255, 0.1);
#472	color: #fff;
#473	font-size: 0.85rem;
#474	padding: 0.6rem 0.75rem;
#475	border-radius: 8px;
#476	outline: none;
#477	min-height: 44px;
#478	transition: border-color 0.2s;
#479	}
#480
#481	.tip-custom-input::placeholder {
#482	color: rgba(255, 255, 255, 0.25);
#483	}
#484
#485	.tip-custom-input:focus {
#486	border-color: rgba(240, 80, 50, 0.5);
#487	}
#488
#489	.tip-error {
#490	font-size: 0.75rem;
#491	color: #ff6b6b;
#492	padding: 0.2rem 0;
#493	}
#494
#495	.tip-send-btn {
#496	width: 100%;
#497	background: linear-gradient(135deg, #F05032, #FF6B4A);
#498	border: none;
#499	color: #fff;
#500	font-weight: 700;
#501	font-size: 0.85rem;
#502	padding: 0.7rem 1rem;
#503	border-radius: 8px;
#504	cursor: pointer;
#505	min-height: 44px;
#506	transition: opacity 0.2s, transform 0.15s;
#507	}
#508
#509	.tip-send-btn:hover:not(:disabled) {
#510	opacity: 0.9;
#511	}
#512
#513	.tip-send-btn:active:not(:disabled) {
#514	transform: scale(0.97);
#515	}
#516
#517	.tip-send-btn:disabled {
#518	opacity: 0.5;
#519	cursor: not-allowed;
#520	}
#521
#522	.tip-close-btn {
#523	width: 100%;
#524	background: transparent;
#525	border: 1px solid rgba(255, 255, 255, 0.1);
#526	color: rgba(255, 255, 255, 0.4);
#527	font-size: 0.75rem;
#528	padding: 0.5rem 1rem;
#529	border-radius: 8px;
#530	cursor: pointer;
#531	min-height: 44px;
#532	transition: background 0.2s, color 0.2s;
#533	}
#534
#535	.tip-close-btn:hover {
#536	background: rgba(255, 255, 255, 0.05);
#537	color: rgba(255, 255, 255, 0.6);
#538	}
#539
#540	.tip-success {
#541	display: flex;
#542	flex-direction: column;
#543	align-items: center;
#544	gap: 0.6rem;
#545	text-align: center;
#546	padding: 0.5rem 0;
#547	}
#548
#549	.tip-success-icon {
#550	font-size: 1.3rem;
#551	font-weight: 900;
#552	color: #4ade80;
#553	text-shadow: 0 0 20px rgba(74, 222, 128, 0.4);
#554	}
#555
#556	.tip-success-msg {
#557	font-size: 0.8rem;
#558	color: rgba(255, 255, 255, 0.6);
#559	}
#560
#561	.tip-explorer-link {
#562	font-size: 0.75rem;
#563	color: #F05032;
#564	text-decoration: none;
#565	font-weight: 600;
#566	transition: opacity 0.2s;
#567	}
#568
#569	.tip-explorer-link:hover {
#570	opacity: 0.8;
#571	}
#572
#573	/* Mobile adjustments */
#574	@media (max-width: 480px) {
#575	.brand-link {
#576	top: 0.5rem;
#577	left: 0.5rem;
#578	gap: 0.35rem;
#579	padding: 0.25rem 0.5rem 0.25rem 0.25rem;
#580	min-height: 32px;
#581	}
#582
#583	.brand-avatar {
#584	width: 22px;
#585	height: 22px;
#586	}
#587
#588	.brand-handle {
#589	font-size: 0.65rem;
#590	}
#591
#592	.top-bar {
#593	padding: 2.5rem 1rem 0.75rem;
#594	gap: 0.5rem;
#595	}
#596
#597	.score-box {
#598	text-align: right;
#599	}
#600
#601	.score-label {
#602	font-size: 0.65rem;
#603	}
#604
#605	.leaderboard {
#606	padding: 0 0.75rem 0.75rem;
#607	}
#608
#609	.leaderboard-row {
#610	grid-template-columns: 1.2rem 1.2rem minmax(0, 4rem) 1fr auto;
#611	font-size: 0.7rem;
#612	gap: 0.3rem;
#613	padding: 0.3rem 0;
#614	}
#615
#616	.leaderboard-count {
#617	font-size: 0.65rem;
#618	min-width: 3.2rem;
#619	}
#620
#621	.leaderboard-bar-bg {
#622	height: 4px;
#623	}
#624
#625	.hint {
#626	font-size: 0.7rem;
#627	}
#628
#629	.restart-panel {
#630	left: 0.75rem;
#631	}
#632
#633	.tip-panel {
#634	margin: 0.5rem 0.75rem;
#635	}
#636
#637	.tip-presets {
#638	gap: 0.35rem;
#639	}
#640
#641	.tip-preset {
#642	font-size: 0.75rem;
#643	padding: 0.5rem 0.2rem;
#644	}
#645	}
#646
#647	/* Smooth scroll for leaderboard */
#648	@media (prefers-reduced-motion: no-preference) {
#649	.leaderboard-bar {
#650	transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
#651	}
#652	}
#653
#654
#655

z6MkvfHn/gitcat